j1-template 2024.1.5 → 2024.2.0

data/assets/themes/j1/modules/carousel/css/theme/uno.css

@@ -52,7 +52,7 @@ padding-left: 1px;
 
 .owl-carousel .item p {
   margin: 3px;
-  color: var(--bs-gray-500);
+  color: var(--md-gray-700);
 }
 
 .owl-carousel .item img {
@@ -72,8 +72,8 @@ padding-left: 1px;
  ------------------------------------------------------------------------------- */
 
 .owl-btn {
-  color: var(--bs-gray);
-  background: var(--bs-gray-100);
+  color: var(--md-gray);
+  background: var(--md-gray-100);
   cursor: pointer;
   font-size: 18px;
   padding: 2px 9px;
@@ -91,7 +91,7 @@ padding-left: 1px;
 }
 
 .owl-theme .owl-controls .owl-buttons div {
-    color: var(--bs-gray-900);
+    color: var(--md-gray-900);
     display: inline-block;
     zoom: 1;
     margin: 5px;

data/assets/themes/j1/modules/carousel/css/theme/uno.min.css

@@ -12,4 +12,4 @@
  # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
  # -----------------------------------------------------------------------------
 */
-.j1-owl-gutter.row{margin-right:0;margin-left:0}.j1-owl-gutter>[class^="col-"],.j1-owl-gutter>[class^=" col-"]{padding-right:0;padding-left:0}.j1-owl-gutter-2.row{margin-right:-1px;margin-left:-1px}.j1-owl-gutter-2>[class^="col-"],.j1-owl-gutter-2>[class^=" col-"]{padding-right:1px;padding-left:1px}.owl-carousel .owl-item>a{border-bottom:unset}.owl-carousel .owl-item>a:hover{color:rgba(0,0,0,0.5) !important}.owl-carousel .item p{margin:3px;color:var(--bs-gray-500)}.owl-carousel .item img{opacity:1;width:100%;height:auto}.slider-title{line-height:1.25rem;font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.owl-btn{color:var(--bs-gray);background:var(--bs-gray-100);cursor:pointer;font-size:18px;padding:2px 9px;text-align:center}.owl-btn:hover{color:var(--bs-white);background:var(--bs-green)}.owl-theme .owl-controls{margin-top:10px;text-align:center}.owl-theme .owl-controls .owl-buttons div{color:var(--bs-gray-900);display:inline-block;zoom:1;margin:5px;padding:3px 10px;font-size:12px;font-weight:500;-webkit-border-radius:30px;-moz-border-radius:30px;background:var(--bs-primary)}.owl-theme .owl-controls.clickable .owl-buttons div:hover{opacity:1;text-decoration:none}.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1}.owl-theme .owl-controls .owl-page span{display:block;width:1.25rem;height:1.25rem;margin:5px 7px;filter:Alpha(Opacity=50);opacity:.5;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:var(--bs-primary)}.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{opacity:1}.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:var(--bs-white);padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-item.loading{min-height:150px;background:url(../../images/ajax-loader.gif) no-repeat center center}.owl-carousel .container{display:table;height:inherit}.owl-carousel .caption{display:table-cell}.owl-carousel .caption h1,.owl-carousel .caption p,.owl-carousel .caption div{position:relative;margin-top:2rem;margin-right:2rem;margin-left:2rem}.owl-carousel .caption h1 span{padding:.25em 0;line-height:180%}.owl-item .carousel-caption{opacity:0;position:absolute;bottom:3px;left:3px;right:3px;font-size:1rem;font-weight:300;font-family:sans-serif;z-index:10;padding-left:10px}.owl-item .carousel-caption:hover{opacity:1;-webkit-transition:opacity 500ms;-moz-transition:opacity 500ms;-o-transition:opacity 500ms;transition:opacity 500ms;background:rgba(0,0,0,0.5)}
+.j1-owl-gutter.row{margin-right:0;margin-left:0}.j1-owl-gutter>[class^="col-"],.j1-owl-gutter>[class^=" col-"]{padding-right:0;padding-left:0}.j1-owl-gutter-2.row{margin-right:-1px;margin-left:-1px}.j1-owl-gutter-2>[class^="col-"],.j1-owl-gutter-2>[class^=" col-"]{padding-right:1px;padding-left:1px}.owl-carousel .owl-item>a{border-bottom:unset}.owl-carousel .owl-item>a:hover{color:rgba(0,0,0,0.5) !important}.owl-carousel .item p{margin:3px;color:var(--md-gray-700)}.owl-carousel .item img{opacity:1;width:100%;height:auto}.slider-title{line-height:1.25rem;font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.owl-btn{color:var(--md-gray);background:var(--md-gray-100);cursor:pointer;font-size:18px;padding:2px 9px;text-align:center}.owl-btn:hover{color:var(--bs-white);background:var(--bs-green)}.owl-theme .owl-controls{margin-top:10px;text-align:center}.owl-theme .owl-controls .owl-buttons div{color:var(--md-gray-900);display:inline-block;zoom:1;margin:5px;padding:3px 10px;font-size:12px;font-weight:500;-webkit-border-radius:30px;-moz-border-radius:30px;background:var(--bs-primary)}.owl-theme .owl-controls.clickable .owl-buttons div:hover{opacity:1;text-decoration:none}.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1}.owl-theme .owl-controls .owl-page span{display:block;width:1.25rem;height:1.25rem;margin:5px 7px;filter:Alpha(Opacity=50);opacity:.5;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:var(--bs-primary)}.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{opacity:1}.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:var(--bs-white);padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-item.loading{min-height:150px;background:url(../../images/ajax-loader.gif) no-repeat center center}.owl-carousel .container{display:table;height:inherit}.owl-carousel .caption{display:table-cell}.owl-carousel .caption h1,.owl-carousel .caption p,.owl-carousel .caption div{position:relative;margin-top:2rem;margin-right:2rem;margin-left:2rem}.owl-carousel .caption h1 span{padding:.25em 0;line-height:180%}.owl-item .carousel-caption{opacity:0;position:absolute;bottom:3px;left:3px;right:3px;font-size:1rem;font-weight:300;font-family:sans-serif;z-index:10;padding-left:10px}.owl-item .carousel-caption:hover{opacity:1;-webkit-transition:opacity 500ms;-moz-transition:opacity 500ms;-o-transition:opacity 500ms;transition:opacity 500ms;background:rgba(0,0,0,0.5)}

data/assets/themes/j1/modules/clipboard/js/clipboard.js

@@ -453,7 +453,6 @@ function delegate(elements, selector, type, callback, useCapture) {
 function listener(element, selector, type, callback) {
     return function(e) {
         e.delegateTarget = closest(e.target, selector);
-
         if (e.delegateTarget) {
             callback.call(element, e);
         }

data/assets/themes/j1/modules/cookieConsent/js/cookieConsent.js

@@ -49,8 +49,8 @@ function CookieConsent(props) {
   var current_page;
   var whitelisted;
 
-  logger.info('\n' + 'initializing core module: started');
-  logger.info('\n' + 'state: started');
+  logger.debug('\n' + 'initializing core module: started');
+  logger.debug('\n' + 'state: started');
 
   if (navigatorLanguage.indexOf("-") !== -1) {
     navigatorLanguage = navigatorLanguage.split("-")[0];
@@ -395,8 +395,8 @@ function CookieConsent(props) {
 
   // API functions
   // ---------------------------------------------------------------------------
-  logger.info('\n' + 'initializing core module finished');
-  logger.info('\n' + 'state: finished');
+  logger.debug('\n' + 'initializing core module finished');
+  logger.debug('\n' + 'state: finished');
 
   // show the consent dialog (modal)
   // ---------------------------------------------------------------------------

data/assets/themes/j1/modules/iconPicker/css/theme/uno.css

@@ -0,0 +1,58 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/theme_uno/modules/iconPicker/css/theme/uno.css
+ # UniversalIconPicker theme for J1 Theme
+ #
+ # Product/Info:
+ # https://jekyll.one
+ #
+ # Copyright (C) 2023, 2024 Juergen Adams
+ #
+ # J1 Template is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
+ # -----------------------------------------------------------------------------
+*/
+
+.uip-modal .uip-modal--content .uip-modal--header
+.uip-modal--header-logo-title {
+  /*jadams, 2023-05-21: increased font size */
+  font-size: 20px !important;
+}
+
+.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner
+.uip-modal--icon-preview {
+  grid-gap: 10px !important;  /* jadams, was 20px */
+}
+
+.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview
+.uip-icon-item:hover {
+  background-color: #9FA8DA !important; /* jadams, added: mdi-blue-300 */
+}
+
+.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview
+.uip-icon-item.universal-selected {
+  -webkit-box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 0 0 3px #1976D2 !important; /* jadams, was: #1cc2ff,  now: mdi-blue-700 */
+  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 0 0 3px #1976D2 !important; /* jadams, was: #1cc2ff,  now: mdi-blue-700 */
+}
+
+.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview .uip-icon-item .uip-icon-item-inner .uip-icon-item__icon,
+.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview
+.uip-icon-item .uip-icon-item-inner i {
+  font-size: 36px !important; /* jadams, was: 25px */
+  color: #616161 !important; /* jadams, was: #6d7882 */
+}
+
+.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview .uip-icon-item .uip-icon-item-inner
+.uip-icon-item-name {
+  color: #616161 !important; /* jadams, was: #c2cbd2, now: mdi-gray-700 */
+}
+
+.uip-modal .uip-modal--footer
+button.uip-insert-icon-button:hover {
+  background-color: #1976D2 !important; /* jadams: mdi-blue-700 */
+}
+
+.uip-modal .uip-modal--footer
+button.uip-insert-icon-button {
+  background-color: #2196F3 !important; /* jadams, was: #42d6a0, now: mdi-blue */
+}

data/assets/themes/j1/modules/iconPicker/css/theme/uno.min.css

@@ -0,0 +1,16 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/theme_uno/modules/iconPicker/css/theme/uno.min.css
+ # UniversalIconPicker theme for J1 Theme
+ #
+ # Product/Info:
+ # https://jekyll.one
+ #
+ # Copyright (C) 2023, 2024 Juergen Adams
+ #
+ # J1 Template is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
+ # -----------------------------------------------------------------------------
+*/
+
+.uip-modal .uip-modal--content .uip-modal--header .uip-modal--header-logo-title{font-size:20px !important}.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview{grid-gap:10px !important}.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview .uip-icon-item:hover{background-color:#9fa8da !important}.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview .uip-icon-item.universal-selected{-webkit-box-shadow:0 1px 12px rgba(0,0,0,0.05),0 0 0 3px #1976d2 !important;box-shadow:0 1px 12px rgba(0,0,0,0.05),0 0 0 3px #1976d2 !important}.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview .uip-icon-item .uip-icon-item-inner .uip-icon-item__icon,.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview .uip-icon-item .uip-icon-item-inner i{font-size:36px !important;color:#616161 !important}.uip-modal .uip-modal--content .uip-modal--body .uip-modal--icon-preview-wrap .uip-modal--icon-preview-inner .uip-modal--icon-preview .uip-icon-item .uip-icon-item-inner .uip-icon-item-name{color:#616161 !important}.uip-modal .uip-modal--footer button.uip-insert-icon-button:hover{background-color:#1976d2 !important}.uip-modal .uip-modal--footer button.uip-insert-icon-button{background-color:#2196f3 !important}

data/assets/themes/j1/modules/iconPicker/js/universal-icon-picker.0.js

@@ -0,0 +1,493 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/theme_uno/modules/iconPicker/js/universal-icon-picker.js
+ # UniversalIconPicker v.1.1.0 implementation for J1 Theme
+ #
+ # Product/Info:
+ # https://jekyll.one
+ # https://github.com/migliori/universal-icon-picker
+ #
+ # Copyright (C) 2023, 2024 Juergen Adams
+ # Copyright (C) 2023 Gilles Migliori
+ #
+ # J1 Template is licensed under the MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
+ # -----------------------------------------------------------------------------
+*/
+const iconPickerUrl = document.currentScript.src.replace(/js\/([a-z\.-]+)$/gm, '');
+const loadedDependencies = [];
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([], factory('UniversalIconPicker'));
+    } else if (typeof exports === 'object') {
+        module.exports = factory('UniversalIconPicker');
+    } else {
+        root['UniversalIconPicker'] = factory('UniversalIconPicker');
+    }
+}(this, function () {
+    'use strict';
+
+    const createDomEle = function (string) {
+        const ele = document.createElement('div');
+        ele.innerHTML = string;
+        return ele.firstChild;
+    }
+
+    const debounce = function (func, wait, immediate) {
+        let timeout;
+        return function () {
+            const context = this,
+                args = arguments;
+            const later = function () {
+                timeout = null;
+                if (!immediate) func.apply(context, args);
+            };
+            const callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) func.apply(context, args);
+        };
+    };
+
+    const escapeHtml = function (text) {
+        const map = {
+            '&': '&',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+
+        return text.replace(/[&<>"']/g, function (m) { return map[m]; });
+    };
+
+    /**
+     * Merge defaults with user options
+     * @param {Object} defaults Default settings
+     * @param {Object} options User options
+     */
+    const extend = function (defaults, options) {
+        let prop, extended = {};
+        for (prop in defaults) {
+            if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
+                extended[prop] = defaults[prop];
+            }
+        }
+        for (prop in options) {
+            if (Object.prototype.hasOwnProperty.call(options, prop)) {
+                extended[prop] = options[prop];
+            }
+        }
+
+        return extended;
+    };
+
+    const getLibraryName = function (string) {
+        return string.replace(/([A-Z])/g, ' $1');
+    }
+
+    /**
+     * Plugin Object
+     * @param selector The html selector to initialize
+     * @param {Object} options User options
+     * @constructor
+     */
+    function UniversalIconPicker (selector, options) {
+        this.selector = selector;
+
+        let defaults = {
+            allowEmpty: true,
+            iconLibraries: null,
+            iconLibrariesCss: null,
+            mode: 'autoload', // autoload | onrequest
+            onBeforeOpen: null,
+            onReset: null,
+            onSelect: null,
+            resetSelector: null,
+            loadCustomCss: false
+        };
+        this.options = extend(defaults, options);
+
+        this.activeLibraryId = '';
+        this.filterIcon = '';
+        this.iconEventsLoaded = false;
+        this.iconLibraries = {};
+        this.iconLibrariesLoaded = false;
+        this.iconMarkup = '';
+        this.iconWrap = '';
+        this.idSuffix = '-' + this.selector.replace(/[#\s[\]="]/g, '');
+        this.sideBarBtn = '';
+        this.sideBarList = [];
+
+        this.universalWrap = '<div class="uip-modal uip-open" id="uip-modal' + this.idSuffix + '"><div class="uip-modal--content"><div class="uip-modal--header"><div class="uip-modal--header-logo-area"><span class="uip-modal--header-logo-title">Icon Picker</span></div><div class="uip-modal--header-close-btn"><img src="' + iconPickerUrl + '/images/xmark-solid.svg" width="40" height="40" alt="Close" title="Close"></div></div><div class="uip-modal--body"><div id="uip-modal--sidebar' + this.idSuffix + '" class="uip-modal--sidebar"><div class="uip-modal--sidebar-tabs"></div></div><div id="uip-modal--icon-preview-wrap' + this.idSuffix + '" class="uip-modal--icon-preview-wrap"><div class="uip-modal--icon-search"><input name="" value="" placeholder="Filter by name..."><img src="' + iconPickerUrl + '/images/magnifying-glass-solid.svg" width="20" height="16" alt="Search" title="Search"></div><div class="uip-modal--icon-preview-inner"><div id="uip-modal--icon-preview' + this.idSuffix + '" class="uip-modal--icon-preview"></div></div></div></div><div class="uip-modal--footer"><button class="uip-insert-icon-button mt-3 mb-3 mr-6">Copy to clipboard</button></div></div></div>';
+
+        this.universalDomEle = createDomEle(this.universalWrap);
+        this.sidebarTabs = this.universalDomEle.querySelector('.uip-modal--sidebar-tabs');
+        this.previewWrap = this.universalDomEle.querySelector('#uip-modal--icon-preview' + this.idSuffix);
+        this.searchInput = this.universalDomEle.querySelector('.uip-modal--icon-search input');
+        if (this.options.mode === 'autoload') {
+            this.init();
+        } else {
+            document.querySelector(this.selector).addEventListener('click', this.init.bind(this), { once: true });
+        }
+    }
+
+
+    // Plugin prototype
+    UniversalIconPicker.prototype = {
+
+        /* Public functions
+        ------------------------------------------------------------------------ */
+
+        init: function () {
+            this._loadCssFiles();
+            if (this.options.mode !== 'autoload') {
+                this._onBeforeOpen().then(() => {
+                    this.open();
+                });
+            }
+            document.querySelector(this.selector).addEventListener('click', () => {
+                this._onBeforeOpen().then(() => {
+                    this.open();
+                });
+            });
+
+            //Remove selected icon
+            if (this.options.resetSelector) {
+                document.querySelector(this.options.resetSelector).addEventListener('click', this.options.onReset);
+            }
+        },
+
+        open: function () {
+            this._loadIconLibraries().then(() => {
+                this.iconLibrariesLoaded = true;
+                if (!document.getElementById('uip-modal' + this.idSuffix)) {
+                    // push universal dom to body
+                    document.body.appendChild(this.universalDomEle);
+
+                    // jadams, 2023-05-21: disable page scrolling if modal is OPEN
+                    document.body.classList.add('stop-scrolling');
+
+                    // Icon library close by clicking close button
+                    this.universalDomEle.querySelector('.uip-modal--header-close-btn').addEventListener('click', () => {
+                        this.universalDomEle.classList.add('uip-close');
+                        this.universalDomEle.classList.remove('uip-open');
+                        // jadams, 2023-05-21: (re-)enable page scrolling if modal is CLOSED
+                        document.body.classList.remove('stop-scrolling');
+                    });
+
+                    // Insert button
+                    this.universalDomEle.querySelector('.uip-insert-icon-button').addEventListener('click', () => {
+                        let selected = this.universalDomEle.querySelector('.universal-selected');
+
+                        if (selected) {
+                            let iconHtml = selected.querySelector('i').outerHTML;
+                            let jsonOutput = {
+                                'libraryId': selected.dataset.libraryId,
+                                'libraryName': selected.dataset.libraryName,
+                                'iconHtml': null,
+                                'iconMarkup': null,
+                                'iconClass': null,
+                                'iconText': null
+                            };
+                            if (!selected.querySelector('i').classList.value.match('uip-icon-none')) {
+                                jsonOutput.iconHtml = iconHtml;
+                                jsonOutput.iconMarkup = escapeHtml(iconHtml);
+                                jsonOutput.iconClass = selected.querySelector('i').classList.value;
+                                jsonOutput.iconText = selected.querySelector('i').innerText;
+                            }
+
+                            this.options.onSelect(jsonOutput);
+                        }
+                        // jadams, 2023-05-21: disable modal CLOSE on a select
+                        // this.universalDomEle.classList.add('uip-close');
+                        // this.universalDomEle.classList.remove('uip-open');
+                    });
+                } else {
+                    // Icon library open if dom element exist
+                    this.universalDomEle.classList.remove('uip-close');
+                    this.universalDomEle.classList.add('uip-open');
+                    // jadams, 2023-05-21: disable page scrolling if modal is OPEN
+                    document.body.classList.add('stop-scrolling');
+                }
+
+                if (!this.iconEventsLoaded) {
+                    // selected icon highlighted by adding class
+                    this.universalDomEle.querySelectorAll('.uip-icon-item').forEach((item) => {
+                        item.addEventListener('click', (evt) => {
+                            this.iconWrap.forEach((el) => {
+                                el.classList.remove('universal-selected');
+                            });
+                            evt.currentTarget.classList.toggle('universal-selected');
+                        });
+                        item.addEventListener('dblclick', (evt) => {
+                            this.universalDomEle.querySelector('.uip-insert-icon-button').click();
+                        });
+                    });
+                    this.iconEventsLoaded = true;
+                }
+
+                this.universalDomEle.querySelector('.uip-modal--icon-search input').focus();
+            });
+        },
+
+        setOptions: function (opts) {
+            this.options = extend(this.options, opts);
+            if (opts.iconLibrariesCss) {
+                this._loadCssFiles();
+            }
+            if (opts.iconLibraries) {
+                // dom icon events need to be reloaded
+                this.iconEventsLoaded = false;
+                this.iconLibrariesLoaded = false;
+                this._resetIconAndSidebarList();
+            }
+        },
+
+        /* Private functions
+        ------------------------------------------------------------------------ */
+
+        _clickHandlerFunc: function (e) {
+            if (!e.currentTarget.classList.contains('universal-active')) {
+                this.sideBarBtn.forEach(function (item) {
+                    item.classList.remove('universal-active');
+                });
+                e.currentTarget.classList.add('universal-active')
+            }
+            this._sidebarFilterFunc(e.currentTarget.dataset['libraryId']);
+        },
+
+        _iconItemMarkup: function (libraryName, libraryItem) {
+            let markup = '',
+                library = libraryItem['icon-style'],
+                prefix = libraryItem['prefix'];
+
+            if (this.options.allowEmpty) {
+                markup += '<div class="uip-icon-item" data-library-id="' + library + '" data-filter="" data-library-name="' + libraryName + '"><div class="uip-icon-item-inner"><i class="' + prefix + ' uip-icon-none">&nbsp;</i><div class="uip-icon-item-name" title="None">None</div></div></div>';
+            }
+            if (prefix.match(/^material-icons/)) {
+                libraryItem['icons'].forEach(function (item) {
+                    markup += '<div class="uip-icon-item" data-library-id="' + library + '" data-filter="' + item + '" data-library-name="' + libraryName + '"><div class="uip-icon-item-inner"><i class="' + prefix + '">' + item + '</i><div class="uip-icon-item-name" title="' + item + '">' + item.replace("-", " ") + '</div></div></div>';
+                });
+            } else {
+                libraryItem['icons'].forEach(function (item) {
+                    markup += '<div class="uip-icon-item" data-library-id="' + library + '" data-filter="' + item + '" data-library-name="' + libraryName + '"><div class="uip-icon-item-inner"><i class="' + [prefix, item].join('') + '"></i><div class="uip-icon-item-name" title="' + item + '">' + item.replace("-", " ") + '</div></div></div>';
+                });
+            }
+
+            return markup;
+        },
+
+        _iconItemPush: function (arrayList) {
+            this.previewWrap.innerHTML = '';
+            arrayList.forEach((item) => {
+                this.previewWrap.appendChild(item[1]);
+            });
+        },
+
+        _loadCssFiles: function () {
+            let link = document.createElement('link');
+            if (!loadedDependencies.includes('universal-icon-picker.min.css') & !this.options.loadCustomCss) {
+                link.rel = 'stylesheet';
+                link.type = 'text/css';
+                link.href = iconPickerUrl + 'css/universal-icon-picker.min.css';
+                link.media = 'screen';
+                document.head.appendChild(link);
+                loadedDependencies.push('universal-icon-picker.min.css');
+            }
+            if (this.options.iconLibrariesCss) {
+                this.options.iconLibrariesCss.forEach(cssFile => {
+                    if (!loadedDependencies.includes(cssFile)) {
+                        let cssFileLink = iconPickerUrl + 'css/' + cssFile;
+                        if (cssFile.match(/^http|^\/\//)) {
+                            cssFileLink = cssFile;
+                        }
+                        link = document.createElement('link');
+                        link.rel = 'stylesheet';
+                        link.type = 'text/css';
+                        link.href = cssFileLink;
+                        link.media = 'screen';
+                        document.head.appendChild(link);
+                        loadedDependencies.push(cssFile);
+                    }
+                });
+            }
+        },
+
+        _loadIconLibraries: async function (i = 0) {
+            if (!this.options.iconLibraries) {
+                console.error('Universal icon picker - no icon library loaded');
+                return false;
+            }
+            if (this.iconLibrariesLoaded) {
+                return true;
+            }
+            if (i === 0 && this.options.iconLibraries.length > 1) {
+                this.sideBarList.push({
+                    "title": "all icons",
+                    "list-icon": "",
+                    "library-id": "all",
+                    "prefix": ""
+                });
+            }
+
+            let iconLib = this.options.iconLibraries[i];
+
+            await fetch(iconPickerUrl + 'icons-libraries/' + iconLib)
+                .then(response => response.json())
+                .then(data => {
+                    // Success!
+                    const camelCasedIconLibrary = iconLib.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); }).replace(/\.[a-z.]+$/, '');
+                    let newLibrary = {};
+                    newLibrary[camelCasedIconLibrary] = data;
+                    Object.assign(this.iconLibraries, newLibrary);  // new icon library merge
+                    if (i + 1 === this.options.iconLibraries.length) {
+                        //set icon and sidebar list
+                        this._setIconAndSidebarList();
+
+                        this.activeLibraryId = this.sideBarList[0]['library-id'];
+
+                        //sidebar list markup push
+                        this.sidebarTabs.innerHTML = this._sideBarListMarkup(this.sideBarList);
+
+                        //icon markup push
+                        this.previewWrap.innerHTML = this.iconMarkup;
+
+                        // get all icon wrapper dom element
+                        this.iconWrap = this.previewWrap.querySelectorAll('.uip-icon-item');
+
+                        //set event lisner to search input
+                        this.searchInput.addEventListener('keyup', debounce(this._searchFunc, 100).bind(this), false);
+
+                        //get all sidebar list item wrapper dom element
+                        this.sideBarBtn = this.sidebarTabs.querySelectorAll('.uip-modal--sidebar-tab-item');
+
+                        //set click event lisner to sidebar list item
+                        this.sideBarBtn.forEach((item) => {
+                            item.addEventListener('click', this._clickHandlerFunc.bind(this), false);
+                        });
+
+                        return true;
+                    } else {
+                        return this._loadIconLibraries(i + 1);
+                    }
+                }).catch((error) => {
+                    console.log(error);
+                    return error;
+                });
+        },
+
+        _onBeforeOpen: async function () {
+            if (typeof (this.options.onBeforeOpen) === 'function') {
+                return this.options.onBeforeOpen();
+            }
+        },
+
+        _resetIconAndSidebarList: function () {
+            this.sideBarList = [];
+            this.iconMarkup = '';
+            this.iconLibraries = {};
+            this.iconWrap = '';
+            this.filterIcon = '';
+            this.sideBarBtn = '';
+            this.activeLibraryId = '';
+        },
+
+        _searchFunc: function (e) {
+            // console.log(this.value.toLowerCase());
+
+            const searchText = e.target.value.toLowerCase();
+            this._searchFilterFunc(searchText, 'filter');
+
+        },
+
+        _searchFilterFunc: function (filterText, dataName) {
+            this.filterIcon = Object.entries(this.iconWrap).filter((item) => {
+                if (-1 == item[1].dataset[dataName].indexOf(filterText) || (this.activeLibraryId !== 'all' && item[1].dataset['libraryId'] !== this.activeLibraryId)) {
+                    return false;
+                }
+                return true;
+            });
+
+            this._iconItemPush(this.filterIcon);
+
+        },
+
+        _setIconAndSidebarList: function () {
+            for (const [libraryName, libraryContent] of Object.entries(this.iconLibraries)) {
+                this._setSideBarList(getLibraryName(libraryName), libraryContent);
+                this._setIconMarkup(libraryName, libraryContent);
+            }
+        },
+
+        _setIconMarkup: function (libraryName, libraryContent) {
+            if (libraryContent.icons !== undefined) {
+                this.iconMarkup += this._iconItemMarkup(libraryName, libraryContent)
+            } else {
+                Object.entries(libraryContent).forEach((item) => {
+                    this.iconMarkup += this._iconItemMarkup(libraryName, item[1])
+                });
+            }
+        },
+
+        _sidebarFilterFunc: function (filterText) {
+            this.activeLibraryId = filterText;
+            this.filterIcon = Object.entries(this.iconWrap).filter(function (item) {
+                if ('all' === filterText || filterText === item[1].dataset['libraryId']) {
+                    return true;
+                }
+                return false;
+            });
+
+            this._iconItemPush(this.filterIcon);
+
+        },
+
+        _setSideBarList: function (libraryName, libraryContent) {
+            let listItem;
+            if (libraryContent.icons !== undefined) {
+                listItem = {
+                    'title': libraryName,
+                    'prefix': libraryContent['prefix'] !== undefined ? libraryContent['prefix'] : '',
+                    'list-icon': libraryContent['list-icon'] !== undefined ? libraryContent['list-icon'] : '',
+                    'library-id': libraryContent['icon-style'] !== undefined ? libraryContent['icon-style'] : 'all',
+                };
+                this.sideBarList.push(listItem);
+            } else {
+                Object.entries(libraryContent).forEach(item => {
+                    listItem = {
+                        "title": libraryName + ' - ' + item[0],
+                        "prefix": item[1]['prefix'] !== undefined ? item[1]['prefix'] : '',
+                        "list-icon": item[1]['list-icon'] !== undefined ? item[1]['list-icon'] : "",
+                        "library-id": item[1]['icon-style'] !== undefined ? item[1]['icon-style'] : "all",
+                    };
+                    this.sideBarList.push(listItem)
+                });
+            }
+        },
+
+        _sideBarListMarkup: function (sideBarList) {
+            let markup = '';
+            sideBarList.forEach((item) => {
+                let activeClazz = '';
+                if (item['library-id'] === this.activeLibraryId) {
+                    activeClazz = ' universal-active';
+                }
+                if ('all' !== item['library-id']) {
+                    let iconTag = '<i class="' + item['list-icon'] + '"></i>';
+                    if (item['prefix'].match(/^material-icons/)) {
+                        iconTag = '<i class="' + item['prefix'] + '">' + item['list-icon'] + '</i>';
+                    }
+                    markup += '<div class="uip-modal--sidebar-tab-item' + activeClazz + '" data-library-id="' + item['library-id'] + '">' + iconTag + item['title'] + '</div>';
+                } else {
+                    markup += '<div class="uip-modal--sidebar-tab-item' + activeClazz + '" data-library-id="' + item['library-id'] + '"><img src="' + iconPickerUrl + '/images/star-of-life-solid.svg" width="13.125px" height="auto" alt="All" title="All">' + item['title'] + '</div>';
+                }
+            });
+
+            return markup;
+        }
+    };
+
+    return UniversalIconPicker;
+}));

data/assets/themes/j1/modules/iconPicker/js/universal-icon-picker.js

@@ -302,14 +302,14 @@ const loadedDependencies = [];
                         let cssFileLink = iconPickerUrl + 'css/' + cssFile;
                         if (cssFile.match(/^http|^\/\//)) {
                             cssFileLink = cssFile;
+                            link = document.createElement('link');
+                            link.rel = 'stylesheet';
+                            link.type = 'text/css';
+                            link.href = cssFileLink;
+                            link.media = 'screen';
+                            document.head.appendChild(link);
+                            loadedDependencies.push(cssFile);
                         }
-                        link = document.createElement('link');
-                        link.rel = 'stylesheet';
-                        link.type = 'text/css';
-                        link.href = cssFileLink;
-                        link.media = 'screen';
-                        document.head.appendChild(link);
-                        loadedDependencies.push(cssFile);
                     }
                 });
             }