Working inside lists

themes/grav/app/forms/fields/iconpicker.js

@@ -6,10 +6,6 @@ import $ from 'jquery';
  * License: GPLv2
  */
 
-$(function() {
-
-    'use strict';
-
 var defaults = {
     'mode': 'dialog', // show overlay 'dialog' panel or slide down 'inline' panel
     'closeOnPick': true,   // whether to close panel after picking or 'no'
@@ -27,21 +23,19 @@ $(function() {
     }
 };
 
-    function QL_Icon_Picker(element, options) {
+class QL_Icon_Picker {
+
+    constructor(element, options) {
+        this.iconSet = '';
+        this.iconSetName = '';
+        this.$field = '';
         this.element = element;
         this.settings = $.extend({}, defaults, options);
         this._defaults = defaults;
         this.init();
     }
 
-    QL_Icon_Picker.prototype = {
-
-        iconSet: '',
-        iconSetName: '',
-        $field: '',
-
-        init: function() {
-
+    init() {
         var $brick = $(this.element);
         var pickerId = $brick.data('pickerid');
         var $preview = $('<div class="icon-preview icon-preview-' + pickerId + '" />');
@@ -59,9 +53,9 @@ $(function() {
 
         // Prepare display styles, inline and dialog
         this.makeDisplay($brick);
-        },
+    }
 
-        makePreview: function($brick, pickerId, $preview) {
+    makePreview($brick, pickerId, $preview) {
         var $icon = $('<i />');
         var iconValue = this.$field.val();
 
@@ -71,9 +65,9 @@ $(function() {
             $preview.addClass('icon-preview-on');
             $icon.addClass(iconValue);
         }
-        },
+    }
 
-        makeClear: function(pickerId, $preview) {
+    makeClear(pickerId, $preview) {
         var base = this;
         var $clear = $('<a class="remove-icon ' + base.settings.classes.clear + '" />');
 
@@ -90,9 +84,9 @@ $(function() {
             $preview.removeClass('icon-preview-on').find('i').removeClass();
             $(this).hide();
         });
-        },
+    }
 
-        makeDisplay: function($brick) {
+    makeDisplay($brick) {
         var base = this;
         var close = base.settings.classes.close;
         var $body = $('body');
@@ -119,9 +113,9 @@ $(function() {
                     $(this).removeClass(close);
                 }
             });
-        },
+    }
 
-        makeLaunchers: function($brick) {
+    makeLaunchers($brick) {
         var base = this;
         var dataIconSets = $brick.data('iconsets');
         var iconSet;
@@ -149,9 +143,9 @@ $(function() {
             // Show icon picker
             base.showPicker($brick, $(base.iconSet), base.settings.mode);
         });
-        },
+    }
 
-        iconPick: function($brick) {
+    iconPick($brick) {
         var base = this;
         var highlight = 'icon-highlight ' + base.settings.classes.highlight;
 
@@ -185,9 +179,9 @@ $(function() {
                 $(this).removeClass(highlight);
             }
         });
-        },
+    }
 
-        showPicker: function($brick, $icons, mode) {
+    showPicker($brick, $icons, mode) {
         if (mode === 'inline') {
             $('.icon-set').removeClass('inline-open');
             $brick.find($icons).toggleClass('inline-open');
@@ -207,9 +201,9 @@ $(function() {
         }
         // Broadcast event when the picker is shown passing the picker mode.
         $('body').trigger('iconpickershow.queryloop', mode);
-        },
+    }
 
-        closePicker: function($brick, $icons, mode) {
+    closePicker($brick, $icons, mode) {
         // Remove event so they don't fire from a different picker
         $(this.iconSet).off('click', 'li');
 
@@ -221,9 +215,9 @@ $(function() {
         }
         // Broadcast event when the picker is closed passing the picker mode.
         $('body').trigger('iconpickerclose.queryloop', mode);
-        },
+    }
 
-        setPreview: function(preview) {
+    setPreview(preview) {
         var $preview = $(this.element).find('.icon-preview');
 
         $preview.addClass('icon-preview-on').find('i').removeClass()
@@ -233,6 +227,32 @@ $(function() {
     }
 };
 
+export default class IconpickerField {
+
+    constructor(options) {
+        this.items = $();
+        this.options = Object.assign({}, this.defaults, options);
+
+        $('[data-grav-iconpicker]').each((index, element) => this.addItem(element));
+        $('body').on('mutation._grav', this._onAddedNodes.bind(this));
+    }
+
+    _onAddedNodes(event, target/* , record, instance */) {
+        let fields = $(target).find('[data-grav-iconpicker]');
+        if (!fields.length) { return; }
+
+        fields.each((index, field) => {
+            field = $(field);
+            if (!~this.items.index(field)) {
+                this.addItem(field);
+            }
+        });
+    }
+
+    addItem(element) {
+        element = $(element);
+        this.items = this.items.add(element);
+
         $.fn.qlIconPicker = function(options) {
             this.each(function() {
                 if (!$.data(this, 'plugin_qlIconPicker')) {
@@ -245,5 +265,20 @@ $(function() {
         $('.icon-picker').qlIconPicker({
             'save': 'class'
         });
+    }
+}
 
+export let Instance = new IconpickerField();
+
+$.fn.qlIconPicker = function(options) {
+    this.each(function() {
+        if (!$.data(this, 'plugin_qlIconPicker')) {
+            $.data(this, 'plugin_qlIconPicker', new QL_Icon_Picker(this, options));
+        }
+    });
+    return this;
+};
+
+$('.icon-picker').qlIconPicker({
+    'save': 'class'
 });

themes/grav/templates/forms/fields/iconpicker/iconpicker.html.twig

@@ -2,6 +2,13 @@
 {% set originalValue = originalValue is defined ? originalValue : value %}
 {% set value = (value is null ? field.default : value) %}
 
+{% block global_attributes %}
+    data-grav-iconpicker
+    data-name="{{field.name}}"
+    data-value="{{value}}"
+    {{ parent() }}
+{% endblock %}
+
 {% block input %}
     <div class="form-list-wrapper {{ field.size }}" data-type="collection">
         <div class="icon-picker" data-pickerid="fa" data-iconsets='{"fa":"Pick FontAwesome"}'>