Feature: Font Awesome 5 Icon Picker (#1019)

Author: amosfolz

app/sprinkles/admin/assets/userfrosting/js/pages/group.js

@@ -21,4 +21,7 @@ $(document).ready(function() {
     $("#widget-group-users").on("pagerComplete.ufTable", function () {
         bindUserButtons($(this));
     });
+
+$('.icp').iconpicker();
+
 });

app/sprinkles/admin/assets/userfrosting/js/widgets/groups.js

@@ -6,7 +6,7 @@
  * Set up the form in a modal after being successfully attached to the body.
  */
 function attachGroupForm() {
-    $("body").on('renderSuccess.ufModal', function (data) {
+    $("body").on('renderSuccess.ufModal', function(data) {
         var modal = $(this).ufModal('getModal');
         var form = modal.find('.js-form');
 
@@ -36,11 +36,34 @@ function attachGroupForm() {
             }
         });
 
+        // Fontawesome-iconpicker
+        // Starcraft icons
+        var sc_icons = [{
+                title: "sc sc-terran",
+                searchTerms: ['starcraft', 'terran']
+            },
+            {
+                title: "sc sc-zerg",
+                searchTerms: ['starcraft', 'zerg']
+            }, {
+                title: "sc sc-protoss",
+                searchTerms: ['starcraft', 'protoss']
+            },
+        ]
+
+        $('.icp-auto').iconpicker({
+            // this is a hacky way to add in our custom icons to the default FA5 icons.
+            // See https://github.com/farbelous/fontawesome-iconpicker/issues/77
+            icons: typeof sc_icons != 'undefined' ? $.merge(sc_icons, $.iconpicker.defaultOptions.icons) : null,
+        });
+
         // Set icon when changed
         form.find('input[name=icon]').on('input change', function() {
             $(this).prev(".icon-preview").find("i").removeClass().addClass($(this).val());
         });
 
+        $('.icp-auto').iconpicker();
+
         // Set up the form for submission
         form.ufForm({
             validator: page.validators
@@ -93,16 +116,16 @@ function bindGroupButtons(el, options) {
             msgTarget: $("#alerts-page")
         });
 
-        $("body").on('renderSuccess.ufModal', function () {
+        $("body").on('renderSuccess.ufModal', function() {
             var modal = $(this).ufModal('getModal');
             var form = modal.find('.js-form');
 
             form.ufForm()
-            .on("submitSuccess.ufForm", function() {
-                // Navigate or reload page on success
-                if (options.delete_redirect) window.location.href = options.delete_redirect;
-                else window.location.reload();
-            });
+                .on("submitSuccess.ufForm", function() {
+                    // Navigate or reload page on success
+                    if (options.delete_redirect) window.location.href = options.delete_redirect;
+                    else window.location.reload();
+                });
         });
     });
 }
@@ -119,4 +142,4 @@ function bindGroupCreationButton(el) {
 
         attachGroupForm();
     });
-};
+};

app/sprinkles/admin/templates/forms/group.html.twig

@@ -35,11 +35,11 @@
             {% endif %}
             {% if 'icon' not in fields.hidden %}
             <div class="col-sm-12">
-                <div class="form-group">
+                <div class="form-group iconpicker-container">
                     <label>{{translate("GROUP.ICON")}}</label>
                     <div class="input-group">
                         <span class="input-group-addon icon-preview"><i class="{{group.icon}} fa-fw"></i></span>
-                        <input type="text" class="form-control" name="icon" autocomplete="off" value="{{group.icon}}" placeholder="{{translate("GROUP.ICON_EXPLAIN")}}" {% if 'icon' in form.fields.disabled %}disabled{% endif %}>
+                        <input type="text" class="form-control icp icp-auto" name="icon" autocomplete="off" value="{{group.icon}}" placeholder="{{translate("GROUP.ICON_EXPLAIN")}}" {% if 'icon' in form.fields.disabled %}disabled{% endif %}>
                     </div>
                 </div>
             </div>

app/sprinkles/core/asset-bundles.json

@@ -33,7 +33,8 @@
         "js/form-widgets": {
             "scripts": [
                 "vendor/speakingurl/speakingurl.min.js",
-                "userfrosting/js/uf-collection.js"
+                "userfrosting/js/uf-collection.js",
+                "vendor/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.js"
             ],
             "options": {
                 "result": {
@@ -45,6 +46,7 @@
         },
         "css/main": {
             "styles": [
+                "vendor/fontawesome-iconpicker/dist/css/fontawesome-iconpicker.css",
                 "vendor/@fortawesome/fontawesome-free/css/all.css",
                 "vendor/bootstrap/dist/css/bootstrap.css",
                 "vendor/select2/dist/css/select2.css",

app/sprinkles/core/package.json

@@ -5,6 +5,7 @@
     "bootstrap": "^3.3.6",
     "clipboard": "^1.5.16",
     "fastclick": "^1.0.6",
+    "fontawesome-iconpicker": "^3.2.0",
     "handlebars": "^4.1.2",
     "icheck": "^1.0.1",
     "ionicons": "^2.0.1",