bulma-extensions/bulma-iconpicker/dist/bulma-iconpicker.min.js

Set of extensions for Bulma.io CSS Framework

"use strict";function _sliceIterator(e,t){var i=[],a=!0,n=!1,r=void 0;try{for(var s,c=e[Symbol.iterator]();!(a=(s=c.next()).done)&&(i.push(s.value),!t||i.length!==t);a=!0);}catch(e){n=!0,r=e}finally{try{a||null==c.return||c.return()}finally{if(n)throw r}}return i}function _slicedToArray(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return _sliceIterator(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _createClass(e,t,i){return t&&_defineProperties(e.prototype,t),i&&_defineProperties(e,i),e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var MOUSE_EVENTS=["click","touchstart"],fetchStyle=function(e){return new Promise(function(t,i){var a=document.createElement("link");(a.type="text/css",a.rel="stylesheet",a.onload=function(){t()},a.href=e,document.querySelector('link[href="'+e+'"]'))||document.querySelector("head").append(a)})},IconPicker=function(){function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,e);this.element=t,this.options=Object.assign({},{iconSets:[{name:"simpleLine",css:"https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css",prefix:"icon-",displayPrefix:""},{name:"fontAwesome",css:"https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css",prefix:"fa-",displayPrefix:"fa fa-icon"}]},i),this.icons=[],this.id="iconPicker"+(new Date).getTime(),this.init()}return _createClass(e,[{key:"init",value:function(){var e=this;this.createModal(),this.createPreview(),this.options.iconSets.forEach(function(t){fetchStyle(t.css),fetch(t.css,{mode:"cors"}).then(function(e){return e.text()}).then(function(i){e.icons[t.name]=e.parseCSS(i,t.prefix||"fa-",t.displayPrefix||""),e.modalSetTabs.querySelector("a").click();var a=new Event("touchstart");e.modalSetTabs.querySelector("a").dispatchEvent(a)})})}},{key:"createPreview",value:function(){var e=this;this.preview=document.createElement("div"),this.preview.className="icon is-large",this.preview.classList.add("iconpicker-preview");var t=document.createElement("i");(t.className="iconpicker-icon-preview",this.element.value.length)&&this.element.value.split(" ").forEach(function(e){t.classList.add(e)});this.preview.appendChild(t),MOUSE_EVENTS.forEach(function(t){e.preview.addEventListener(t,function(t){t.preventDefault(),e.modal.classList.add("is-active")})}),this.element.parentNode.insertBefore(this.preview,this.element.nextSibling)}},{key:"parseCSS",value:function(e){for(var t,i,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"fa-",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",r=new RegExp("\\."+a+"([^\\.!:]*)::?before\\s*{\\s*content:\\s*[\"|']\\\\[^'|\"]*[\"|'];?\\s*}","g"),s=[];i=r.exec(e);)t={prefix:a,selector:a+i[1].trim(":"),name:this.ucwords(i[1]).trim(":"),filter:i[1].trim(":"),displayPrefix:n},s[i[1]]=t;return 0==Object.getOwnPropertyNames(this.icons).length&&console.warn("No icons found in CSS file"),s}},{key:"ucwords",value:function(e){return(e+"").replace(/^(.)|\s+(.)/g,function(e){return e.toUpperCase()})}},{key:"drawIcons",value:function(e){if(this.iconsList.innerHTML="",e)for(var t=Object.entries(e),i=0;i<t.length;i++){var a=_slicedToArray(t[i],2),n=(a[0],a[1]);this.iconsList.appendChild(this.createIconPreview(n))}}},{key:"createIconPreview",value:function(e){var t=this,i=(arguments.length>1&&void 0!==arguments[1]&&arguments[1],document.createElement("a"));i.dataset.title=e.name,i.setAttribute("title",e.name),i.dataset.icon=e.selector,i.dataset.filter=e.filter;var a=document.createElement("i");return a.className="iconpicker-icon-preview",e.displayPrefix.length&&e.displayPrefix.split(" ").forEach(function(e){a.classList.add(e)}),a.classList.add(e.selector),i.appendChild(a),MOUSE_EVENTS.forEach(function(e){i.addEventListener(e,function(e){e.preventDefault(),t.preview.innerHTML="",t.element.value=e.target.classList,t.preview.appendChild(e.target.cloneNode(!0)),t.modal.classList.remove("is-active")})}),i}},{key:"createModal",value:function(){var e=this;this.modal=document.createElement("div"),this.modal.className="modal",this.modal.classList.add("iconpicker-modal"),this.modal.id=this.id;var t=document.createElement("div");t.className="modal-background";var i=document.createElement("div");i.className="modal-card";var a=document.createElement("header");a.className="modal-card-head";var n=document.createElement("p");n.className="modal-card-title",n.innerHTML="iconPicker",this.modalHeaderSearch=document.createElement("input"),this.modalHeaderSearch.setAttribute("type","search"),this.modalHeaderSearch.setAttribute("placeholder","Search"),this.modalHeaderSearch.className="iconpicker-search",this.modalHeaderSearch.addEventListener("input",function(t){e.filter(t.target.value)});var r=document.createElement("button");if(r.className="delete",MOUSE_EVENTS.forEach(function(t){r.addEventListener(t,function(t){t.preventDefault(),e.modal.classList.remove("is-active")})}),i.appendChild(a),this.modalBody=document.createElement("section"),this.modalBody.className="modal-card-body",this.options.iconSets.length>=1){var s=document.createElement("div");s.className="iconpicker-sets",s.classList.add("tabs"),this.modalSetTabs=document.createElement("ul"),this.options.iconSets.forEach(function(t){var i=document.createElement("li"),a=document.createElement("a");a.dataset.iconset=t.name,a.innerHTML=t.name,MOUSE_EVENTS.forEach(function(t){a.addEventListener(t,function(t){t.preventDefault();var i=e.modalSetTabs.querySelectorAll(".is-active");[].forEach.call(i,function(e){e.classList.remove("is-active")}),t.target.parentNode.classList.add("is-active"),e.drawIcons(e.icons[t.target.dataset.iconset]),e.filter(e.modalHeaderSearch.value)})}),i.appendChild(a),e.modalSetTabs.appendChild(i)}),s.appendChild(this.modalSetTabs),i.appendChild(s)}this.iconsList=document.createElement("div"),this.iconsList.className="iconpicker-icons",a.appendChild(n),a.appendChild(this.modalHeaderSearch),a.appendChild(r),this.modalBody.appendChild(this.iconsList),i.appendChild(this.modalBody),this.modal.appendChild(t),this.modal.appendChild(i),document.body.appendChild(this.modal)}},{key:"filter",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";""!==e?(this.iconsList.querySelectorAll("[data-filter]").forEach(function(e){e.classList.remove("is-hidden")}),this.iconsList.querySelectorAll('[data-filter]:not([data-filter*="'+e+'"])').forEach(function(e){e.classList.add("is-hidden")})):this.iconsList.querySelectorAll("[data-filter]").forEach(function(e){e.classList.remove("is-hidden")})}}]),e}();exports.default=IconPicker,document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll('[data-action="iconPicker"]'),t={};[].forEach.call(e,function(e){e.dataset.iconPicker||(e.dataset.iconPicker=new IconPicker(e,t))})});