Add support for newer versions of Font Awesome, it now created an `<i…

…>` element when font-awesome 5 classes are detected. This also enabled creating a new element as return value for the `icon` callback for extra flexibility. Relates to issue #593
swisnl · Jul 10, 2018 · b5ba010 · b5ba010
1 parent d024bee
commit b5ba010
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 ## Changelog ##
 
+### Unreleased
+
+#### Added
+
+* Added support for Font Awesome 5 ([Issue #593](https://github.com/swisnl/jQuery-contextMenu/issues/593)), ([Issue #593](https://github.com/swisnl/jQuery-contextMenu/issues/593))
+
 ### 2.6.4
 
 #### Fixed

diff --git a/dist/font/context-menu-icons.eot b/dist/font/context-menu-icons.eot
diff --git a/dist/font/context-menu-icons.ttf b/dist/font/context-menu-icons.ttf
diff --git a/dist/font/context-menu-icons.woff b/dist/font/context-menu-icons.woff
diff --git a/dist/font/context-menu-icons.woff2 b/dist/font/context-menu-icons.woff2
diff --git a/dist/jquery.contextMenu.css b/dist/jquery.contextMenu.css
@@ -12,7 +12,7 @@
  * Licensed under
  *   MIT License http://www.opensource.org/licenses/mit-license
  *
- * Date: 2018-03-16T11:13:46.072Z
+ * Date: 2018-07-10T10:17:15.670Z
  */
 @-webkit-keyframes cm-spin {
   0% {
@@ -54,8 +54,8 @@
   font-style: normal; 
   font-weight: normal;
 
-  src: url("font/context-menu-icons.eot?1s39y");
-  src: url("font/context-menu-icons.eot?1s39y#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?1s39y") format("woff2"), url("font/context-menu-icons.woff?1s39y") format("woff"), url("font/context-menu-icons.ttf?1s39y") format("truetype");
+  src: url("font/context-menu-icons.eot?camk");
+  src: url("font/context-menu-icons.eot?camk#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?camk") format("woff2"), url("font/context-menu-icons.woff?camk") format("woff"), url("font/context-menu-icons.ttf?camk") format("truetype");
 }
 
 .context-menu-icon-add:before {
@@ -157,6 +157,23 @@
   color: #bbb;
 }
 
+.context-menu-icon.context-menu-icon--fa5 {
+  display: list-item;
+  font-family: inherit;
+  line-height: inherit;
+}
+.context-menu-icon.context-menu-icon--fa5 i {
+  position: absolute; 
+  left: .5em;
+  color: #2980b9;
+}
+.context-menu-icon.context-menu-icon--fa5.context-menu-hover i {
+  color: #fff;
+}
+.context-menu-icon.context-menu-icon--fa5.context-menu-disabled i {
+  color: #bbb;
+}
+
 .context-menu-list {
   position: absolute; 
   display: inline-block;

diff --git a/dist/jquery.contextMenu.js b/dist/jquery.contextMenu.js
@@ -11,7 +11,7 @@
  * Licensed under
  *   MIT License http://www.opensource.org/licenses/mit-license
  *
- * Date: 2018-03-16T11:13:45.992Z
+ * Date: 2018-07-10T10:17:15.594Z
  */
 
 // jscs:disable
@@ -116,7 +116,7 @@
             // flag denoting if a second trigger should simply move (true) or rebuild (false) an open menu
             // as long as the trigger happened on one of the trigger-element's child nodes
             reposition: true,
-            // Flag denoting if a second trigger should close the menu, as long as 
+            // Flag denoting if a second trigger should close the menu, as long as
             // the trigger happened on one of the trigger-element's child nodes.
             // This overrides the reposition option.
             hideOnSecondTrigger: false,
@@ -466,12 +466,12 @@
                         $(target).trigger(e);
                         root.$layer.show();
                     }
-                    
+
                     if (root.hideOnSecondTrigger && triggerAction && root.$menu !== null && typeof root.$menu !== 'undefined') {
                       root.$menu.trigger('contextmenu:hide');
                       return;
                     }
-                    
+
                     if (root.reposition && triggerAction) {
                         if (document.elementFromPoint) {
                             if (root.$trigger.is(target)) {
@@ -1001,7 +1001,7 @@
                 // position and show context menu
                 opt.$menu.css(css)[opt.animation.show](opt.animation.duration, function () {
                     $trigger.trigger('contextmenu:visible');
-                    
+
                     op.activated(opt);
                     opt.events.activated(opt);
                 });
@@ -1213,9 +1213,7 @@
                             $t.addClass('context-menu-separator ' + root.classNames.notSelectable);
                         } else if (item.type === 'html') {
                             $t.addClass('context-menu-html ' + root.classNames.notSelectable);
-                        } else if (item.type === 'sub') {
-                            // We don't want to execute the next else-if if it is a sub.
-                        } else if (item.type) {
+                        } else if (item.type !== 'sub' && item.type) {
                             $label = $('<label></label>').appendTo($t);
                             createNameNode(item).appendTo($label);
 
@@ -1330,14 +1328,27 @@
                             if ($.isFunction(item.icon)) {
                                 item._icon = item.icon.call(this, this, $t, key, item);
                             } else {
-                                if (typeof(item.icon) === 'string' && item.icon.substring(0, 3) === 'fa-') {
+                                if (typeof(item.icon) === 'string' && (
+                                    item.icon.substring(0, 4) === 'fab '
+                                    || item.icon.substring(0, 4) === 'fas '
+                                    || item.icon.substring(0, 4) === 'far '
+                                    || item.icon.substring(0, 4) === 'fal ')
+                                ) {
                                     // to enable font awesome
+                                    $t.addClass(root.classNames.icon + ' ' + root.classNames.icon + '--fa5');
+                                    item._icon = $('<i class="' + item.icon + '"></i>');
+                                } else if (typeof(item.icon) === 'string' && item.icon.substring(0, 3) === 'fa-') {
                                     item._icon = root.classNames.icon + ' ' + root.classNames.icon + '--fa fa ' + item.icon;
                                 } else {
                                     item._icon = root.classNames.icon + ' ' + root.classNames.icon + '-' + item.icon;
                                 }
                             }
-                            $t.addClass(item._icon);
+
+                            if(typeof(item._icon) === "string"){
+                                $t.addClass(item._icon);
+                            } else {
+                                $t.prepend(item._icon);
+                            }
                         }
                     }
 
@@ -1433,8 +1444,13 @@
 
                     if ($.isFunction(item.icon)) {
                         $item.removeClass(item._icon);
-                        item._icon = item.icon.call(this, $trigger, $item, key, item);
-                        $item.addClass(item._icon);
+                        var iconResult = item.icon.call(this, $trigger, $item, key, item);
+                        if(typeof(iconResult) === "string"){
+                            $item.addClass(iconResult);
+                        } else {
+                            $item.prepend(iconResult);
+                        }
+                        delete iconResult;
                     }
 
                     if (item.type) {
@@ -1565,7 +1581,7 @@
                     $menu.css({
                         'top': '0px'
                     });
-                } 
+                }
             }
         };
 

diff --git a/dist/jquery.contextMenu.min.css b/dist/jquery.contextMenu.min.css