version 1.0.1 - bug fix and small improvements

- now all free font awesome icons (solid and brand) should work - improved documentation - added link to source code
spilymp · Mar 16, 2021 · 3bd2719 · 3bd2719
1 parent bffad0f
commit 3bd2719
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/css/style.css b/css/style.css
@@ -22,6 +22,10 @@ h3 {
     text-align: center;
 }
 
+.align-right {
+    text-align: right;
+}
+
 label {
     text-align: right;
 }

diff --git a/index.html b/index.html
@@ -67,6 +67,7 @@
     <!-- pre loading the fonts so they are available for the js class -->
     <div class="font_preload" style="opacity: 0">
         <span style="font-family: 'Font Awesome 5 Free', Arial, sans-serif;"></span>
+        <span style="font-family: 'Font Awesome 5 Brands', Arial, sans-serif;"></span>
         <span style="font-family: 'bootstrap-icons', Arial, sans-serif;"></span>
         <span style="font-family: 'simple-line-icons', Arial, sans-serif;"></span>
         <span style="font-family: 'remixicon', Arial, sans-serif;"></span>
@@ -103,7 +104,8 @@ <h1>IBO - Icon Builder for Odoo</h1>
                     </div>
                     <div class="column">
                         <select id="iconSet">
-                            <option value="Font Awesome 5 Free">Font Awesome 5 Free</option>
+                            <option value="Font Awesome 5 Free">Font Awesome 5 Solid</option>
+                            <option value="Font Awesome 5 Brands">Font Awesome 5 Brands</option>
                             <option value="bootstrap-icons">Bootstrap Icons</option>
                             <option value="simple-line-icons">Simple Line Icons</option>
                             <option value="remixicon">Remix Icon</option>
@@ -162,7 +164,7 @@ <h1>IBO - Icon Builder for Odoo</h1>
 
     <div class="container">
         <div class="row">
-            <div class="column column-100">
+            <div class="column">
                 <h2>Documentation</h2>
             </div>
         </div>
@@ -175,8 +177,8 @@ <h2>Documentation</h2>
                     To set an icon you have to find and enter the corresponding css class.
                     Please check the corresponding page of the icon set for this purpose:
                 <ul>
-                    <li><a href="https://fontawesome.com/icons?d=gallery&p=2&s=brands,solid&m=free">Font Awesome 5
-                            Free</a></li>
+                    <li><a href="https://fontawesome.com/icons?d=gallery&p=2&s=solid&m=free">Font Awesome 5 Solid</a></li>
+                    <li><a href="https://fontawesome.com/icons?d=gallery&p=2&s=brands&m=free">Font Awesome 5 Brands</a></li>
                     <li><a href="https://icons.getbootstrap.com/">Bootstrap Icons</a></li>
                     <li><a href="https://simplelineicons.github.io/">Simple Line Icons</a></li>
                     <li><a href="https://remixicon.com/">Remix Icon</a></li>
@@ -186,12 +188,12 @@ <h2>Documentation</h2>
         </div>
 
         <div class="row">
-            <div class="column column-100">
+            <div class="column">
                 <h3>Getting Started</h3>
             </div>
         </div>
         <div class="row row-center">
-            <div class="column column-100">
+            <div class="column">
                 <p>
                     It is also possible to use the class elsewhere and create your own configurator based on it, for
                     example.
@@ -245,7 +247,7 @@ <h3>Parameter</h3>
         </div>
 
         <div class="row">
-            <div class="column column-100">
+            <div class="column">
 
                 <table>
                     <thead>
@@ -280,7 +282,7 @@ <h3>Parameter</h3>
                             <td>icon_class</td>
                             <td>eg. "fas fa-address-card"</td>
                             <td>CSS class name of your symbol for the icon, the class will automatically try to finde
-                                the corresponding unicode. If an unicode is set the class will be ignored.</td>
+                                the corresponding unicode. If an unicode (parameter "icon_text") is set the class will be ignored.</td>
                         </tr>
                         <tr>
                             <td>icon_text</td>
@@ -309,12 +311,15 @@ <h3>Parameter</h3>
             <hr />
         </div>
         <div class="row">
-            <div class="column">
+            <div class="column column-50">
                 <p>
                     Created with <i class="fas fa-heart"></i> by <a href="https://github.com/spilymp">spilymp</a>.
                 </p>
             </div>
-            <div class="column">
+            <div class="column column-50 align-right">
+                <p>
+                    View Source Code on <a href="https://github.com/spilymp/ibo"><i class="fab fa-github"></i></a>
+                </p>
             </div>
         </div>
     </footer>

diff --git a/js/ibo_icon.js b/js/ibo_icon.js
@@ -1,5 +1,5 @@
 /**
- * Version: 1.0.0
+ * Version: 1.0.1
  * 
  * Copyright (C) 2021 - spilymp (https://github.com/spilymp)
  *
@@ -40,7 +40,11 @@ class IBO_ICON {
             this.font_size = parseInt(this.icon_width) * 0.5;
         }
         if (settings != null && !("icon_text" in settings)) {
-            this.icon_text = this._getUnicode(this.icon_class)
+            let ufw = this._getUnicodeAndFontWeight(this.icon_class);
+            this.icon_text = ufw[0];
+            if (settings != null && !("font_weight" in settings)) {
+                this.font_weight = ufw[1];
+            }
         }
 
         // set other non public settings
@@ -78,7 +82,7 @@ class IBO_ICON {
         this.canvas.width = this.icon_width;
 
         this._ctx = this.canvas.getContext("2d");
-        this._ctx.font = `normal ${this.font_weight} ${this.font_size}px "${this.font_family}"`;
+        this._ctx.font = `${this.font_weight} ${this.font_size}px "${this.font_family}"`;
     }
 
     /**
@@ -126,7 +130,7 @@ class IBO_ICON {
     _setText(text, color, centerX, centerY, font_size) {
         this._ctx.save();
         this._ctx.fillStyle = color;
-        this._ctx.font = `normal ${font_size}px "${this.font_family}"`;
+        this._ctx.font = `${this.font_weight} ${font_size}px "${this.font_family}"`;
         this._ctx.textAlign = "center";
         this._ctx.textBaseline = "middle";
         this._ctx.fillText(`${text}`, centerX, centerY);
@@ -136,7 +140,7 @@ class IBO_ICON {
     /**
      * Shade, blend and convert a color.
      * 
-     * Credit to Pimp Trizkit (https://github.com/PimpTrizkit)
+     * Credit to and Copyright by Pimp Trizkit (https://github.com/PimpTrizkit)
      * Documentation see https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)
      */
     _pSBC(p, c0, c1, l) {
@@ -377,17 +381,19 @@ class IBO_ICON {
      * Helper function to extract the corresponding symbol based on a given class.
      * @param {*} clazzName - The CSS class from which the symbol should be extracted.
      */
-    _getUnicode(clazzName) {
+    _getUnicodeAndFontWeight(clazzName) {
         let tempI = document.createElement('i');
 
         tempI.className = clazzName;
         document.body.appendChild(tempI);
 
         //let char = window.getComputedStyle(document.querySelector('.' + clazzName), ':before').getPropertyValue('content').replace(/'|"/g, '');
         let char = window.getComputedStyle(tempI, ':before').content.replace(/'|"/g, '');
-
+        let font_weight = window.getComputedStyle(tempI).getPropertyValue( "font-weight" );
         tempI.remove();
 
-        return char;
+        // Logging for debug purposes
+        // console.log("Unicode: " + char + " # Font-Weight: " + font_weight);
+        return [char, font_weight];
     }
 }