diff --git a/amd/build/fontawesome-popover.min.js b/amd/build/fontawesome-popover.min.js index 938e48b8045..a8fe8db4d64 100644 --- a/amd/build/fontawesome-popover.min.js +++ b/amd/build/fontawesome-popover.min.js @@ -6,6 +6,6 @@ * @copyright based on code from theme_boost\footer-popover by Bas Brands. * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -define("theme_boost_union/fontawesome-popover",["jquery","theme_boost/popover","core/fragment"],(function($,popover,Fragment){const SELECTORS_PICKERCONTAINER=".fontawesome-iconpicker-popover";var contextID;let pickerIsShown=!1;var SELECTBOX;const iconPicker=target=>{if(null==(SELECTBOX=document.querySelector(target)))return;(target=>{var input=document.createElement("input");input.setAttribute("type","text"),input.classList.add("fontawesome-autocomplete"),input.classList.add("form-control"),input.setAttribute("name","iconsearch"),""!=SELECTBOX.value&&(input.value=null!==SELECTBOX.querySelector("option[selected]")?SELECTBOX.querySelector("option[selected]").text:"");var wrapper=document.createElement("div");wrapper.classList.add("fontawesome-picker-container"),wrapper.append(input),document.querySelector(target).style.display="none",document.querySelector(target).parentNode.append(wrapper)})(target);const pickerInput=document.querySelector(target).parentNode.querySelector("input.fontawesome-autocomplete");null!=pickerInput?(Fragment.loadFragment("theme_boost_union","icons_list",contextID,{}).then((function(html){$(pickerInput).popover({content:html,html:!0,placement:"bottom",customClass:"fontawesome-picker",trigger:"click"}),$(pickerInput).on("inserted.bs.popover",(function(){document.querySelector(".fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions").querySelectorAll("li").forEach((li=>{li.addEventListener("click",(e=>{var target=e.target.closest("li"),value=target.getAttribute("aria-value"),label=target.getAttribute("aria-label");pickerInput.value=label,SELECTBOX.value=value||0,$(pickerInput).popover("hide")}))}))}))})).catch(),document.addEventListener("click",(e=>{pickerIsShown&&!e.target.closest(SELECTORS_PICKERCONTAINER)&&$(pickerInput).popover("hide")}),!0),document.addEventListener("keydown",(e=>{pickerIsShown&&"Escape"===e.key&&($(pickerInput).popover("hide"),pickerInput.focus())})),document.addEventListener("focus",(e=>{pickerIsShown&&!e.target.closest(SELECTORS_PICKERCONTAINER)&&$(pickerInput).popover("hide")}),!0),$(pickerInput).on("shown.bs.popover",(()=>{if(pickerIsShown=!0,""!=pickerInput.value){var iconSuggestion=document.querySelector(".fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions");null!==iconSuggestion.querySelector('li[aria-label="'+pickerInput.value+'"]')&&(iconSuggestion.querySelectorAll("li").forEach((li=>li.classList.remove("selected"))),iconSuggestion.querySelector('li[aria-label="'+pickerInput.value+'"]').classList.add("selected"))}})),$(pickerInput).on("hide.bs.popover",(()=>{pickerIsShown=!1})),pickerInput.addEventListener("keyup",(function(e){(target=>{var filter=target.value.toLowerCase();SELECTBOX.value=filter||0;var ul=document.querySelector(".fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions");if(null!=ul)for(var li=ul.querySelectorAll("li"),i=0;iiconPicker(target)),1e3)};return{init:(target,contextid)=>{contextID=contextid,iconPicker(target)}}})); +define("theme_boost_union/fontawesome-popover",["jquery","theme_boost/popover","core/fragment"],(function($,popover,Fragment){const SELECTORS_PICKERCONTAINER=".fontawesome-iconpicker-popover";var contextID;let pickerIsShown=!1;var SELECTBOX;const iconPicker=target=>{if(null==(SELECTBOX=document.querySelector(target)))return;(target=>{var input=document.createElement("input");input.setAttribute("type","text"),input.classList.add("fontawesome-autocomplete"),input.classList.add("form-control"),input.setAttribute("name","iconsearch"),""!=SELECTBOX.value&&(input.value=null!==SELECTBOX.querySelector("option[selected]")?SELECTBOX.querySelector("option[selected]").text:"");var wrapper=document.createElement("div");wrapper.classList.add("fontawesome-picker-container"),wrapper.append(input),document.querySelector(target).style.display="none",document.querySelector(target).parentNode.append(wrapper)})(target);const pickerInput=document.querySelector(target).parentNode.querySelector("input.fontawesome-autocomplete");null!=pickerInput?(Fragment.loadFragment("theme_boost_union","icons_list",contextID,{}).then((function(html){$(pickerInput).popover({content:html,html:!0,placement:"bottom",customClass:"fontawesome-picker",trigger:"click",sanitize:!1}),$(pickerInput).on("inserted.bs.popover",(function(){document.querySelector(".fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions").querySelectorAll("li").forEach((li=>{li.addEventListener("click",(e=>{var target=e.target.closest("li"),value=target.getAttribute("data-value"),label=target.getAttribute("data-label");pickerInput.value=label,SELECTBOX.value=value||0,$(pickerInput).popover("hide")}))}))}))})).catch(),document.addEventListener("click",(e=>{pickerIsShown&&!e.target.closest(SELECTORS_PICKERCONTAINER)&&$(pickerInput).popover("hide")}),!0),document.addEventListener("keydown",(e=>{pickerIsShown&&"Escape"===e.key&&($(pickerInput).popover("hide"),pickerInput.focus())})),document.addEventListener("focus",(e=>{pickerIsShown&&!e.target.closest(SELECTORS_PICKERCONTAINER)&&$(pickerInput).popover("hide")}),!0),$(pickerInput).on("shown.bs.popover",(()=>{if(pickerIsShown=!0,""!=pickerInput.value){var iconSuggestion=document.querySelector(".fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions");null!==iconSuggestion.querySelector('li[data-label="'+pickerInput.value+'"]')&&(iconSuggestion.querySelectorAll("li").forEach((li=>li.classList.remove("selected"))),iconSuggestion.querySelector('li[data-label="'+pickerInput.value+'"]').classList.add("selected"))}})),$(pickerInput).on("hide.bs.popover",(()=>{pickerIsShown=!1})),pickerInput.addEventListener("keyup",(function(e){(target=>{var filter=target.value.toLowerCase();SELECTBOX.value=filter||0;var ul=document.querySelector(".fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions");if(null!=ul)for(var li=ul.querySelectorAll("li"),i=0;iiconPicker(target)),1e3)};return{init:(target,contextid)=>{contextID=contextid,iconPicker(target)}}})); //# sourceMappingURL=fontawesome-popover.min.js.map \ No newline at end of file diff --git a/amd/build/fontawesome-popover.min.js.map b/amd/build/fontawesome-popover.min.js.map index 4e956148313..b323f8c4240 100644 --- a/amd/build/fontawesome-popover.min.js.map +++ b/amd/build/fontawesome-popover.min.js.map @@ -1 +1 @@ -{"version":3,"file":"fontawesome-popover.min.js","sources":["../src/fontawesome-popover.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Theme Boost Union - JS code which shows all fontawesome icons in a popover.\n *\n * @module theme_boost_union/fontawesome-popover\n * @copyright 2023 bdecent GmbH \n * @copyright based on code from theme_boost\\footer-popover by Bas Brands.\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\ndefine(['jquery', 'theme_boost/popover', 'core/fragment'], function($, popover, Fragment) {\n\n const SELECTORS = {\n PICKERCONTAINER: '.fontawesome-iconpicker-popover',\n PICKERCONTENT: '[data-region=\"icons-list\"]',\n };\n\n var contextID;\n\n let pickerIsShown = false;\n\n var SELECTBOX;\n\n /**\n * Get the icon list for popover.\n *\n * @returns {String} HTML string\n * @private\n */\n const getIconList = () => {\n return Fragment.loadFragment('theme_boost_union', 'icons_list', contextID, {});\n };\n\n /**\n * Filter the icons in the list with values which the user entered in the search input.\n * Given input will contain the text in both aria-value and aria-label.\n * Ex. \"core:t\\document\" is aria-value and \"fa-document\" is aria-label.\n *\n * @param {Element} target\n */\n const filterIcons = (target) => {\n var filter = target.value.toLowerCase();\n SELECTBOX.value = filter || 0;\n var ul = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\n if (ul === undefined || ul === null) {\n return;\n }\n var li = ul.querySelectorAll('li');\n\n for (var i = 0; i < li.length; i++) {\n var value = li[i].getAttribute('aria-value');\n var label = li[i].getAttribute('aria-label');\n if (!value.toLowerCase().includes(filter) && !label.toLowerCase().includes(filter)) {\n li[i].style.display = \"none\";\n } else {\n li[i].style.display = \"inline-block\";\n }\n }\n };\n\n /**\n * Creates input element and append the element into the target element's parent node.\n * User is able to search icons using this input field.\n *\n * @param {String} target Element Selector.\n */\n const createElements = (target) => {\n\n var input = document.createElement('input');\n input.setAttribute('type', 'text');\n input.classList.add('fontawesome-autocomplete');\n input.classList.add('form-control');\n input.setAttribute('name', 'iconsearch');\n\n if (SELECTBOX.value != '') {\n input.value = SELECTBOX.querySelector('option[selected]') !== null\n ? SELECTBOX.querySelector('option[selected]').text : '';\n }\n\n var wrapper = document.createElement('div');\n wrapper.classList.add(\"fontawesome-picker-container\");\n wrapper.append(input);\n\n document.querySelector(target).style.display = 'none';\n document.querySelector(target).parentNode.append(wrapper);\n };\n\n /**\n * Update the target with fontawesome iconpicker.\n *\n * Create picker input field for search icons insert to DOM, fetch the icons list and setup the popover with icons content.\n * Display the popover when the icon search input field is focused or clicked. This way user can view the list of icons and\n * search icons. When the icon is selected, same icon in the select element will be selected.\n *\n * @param {String} target Element Selector.\n */\n const iconPicker = (target) => {\n\n SELECTBOX = document.querySelector(target);\n\n if (SELECTBOX === undefined || SELECTBOX === null) {\n return;\n }\n\n // Create input element and insert for search icons and hide the current target select box.\n createElements(target);\n\n // Parent of the target element.\n var selectBoxParent = document.querySelector(target).parentNode;\n\n // Input element for search icons, appended in createElements method.\n const pickerInput = selectBoxParent.querySelector(\"input.fontawesome-autocomplete\");\n\n // Check the search input created and inserted in DOM.\n if (pickerInput === undefined || pickerInput === null) {\n setTimeout(() => iconPicker(target), 1000);\n return;\n }\n\n // Fetch the icons list and setup popover with icons list.\n // eslint-disable-next-line promise/valid-params\n getIconList().then(function(html) {\n\n $(pickerInput).popover({\n content: html,\n html: true,\n placement: 'bottom',\n customClass: 'fontawesome-picker',\n trigger: 'click'\n });\n\n // Event observer when the popover is inserted in DOM, create event listner for each icon in icons list.\n // Icon is clicked, set the icon aria-value as value for select box.\n // Set the icon label to value of autocomplete picker.\n $(pickerInput).on('inserted.bs.popover', function() {\n var ul = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\n ul.querySelectorAll('li').forEach((li) => {\n li.addEventListener('click', (e) => {\n var target = e.target.closest('li');\n var value = target.getAttribute('aria-value');\n var label = target.getAttribute('aria-label');\n pickerInput.value = label;\n SELECTBOX.value = value || 0;\n $(pickerInput).popover('hide');\n });\n });\n });\n return;\n }).catch();\n\n document.addEventListener('click', e => {\n if (pickerIsShown && !e.target.closest(SELECTORS.PICKERCONTAINER)) {\n $(pickerInput).popover('hide');\n }\n },\n true);\n\n document.addEventListener('keydown', e => {\n if (pickerIsShown && e.key === 'Escape') {\n $(pickerInput).popover('hide');\n pickerInput.focus();\n }\n });\n\n document.addEventListener('focus', e => {\n if (pickerIsShown && !e.target.closest(SELECTORS.PICKERCONTAINER)) {\n $(pickerInput).popover('hide');\n }\n },\n true);\n\n $(pickerInput).on('shown.bs.popover', () => {\n pickerIsShown = true;\n // Add class to selected icon, helps to differentiate.\n if (pickerInput.value != '') {\n var iconSuggestion = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\n if (iconSuggestion.querySelector('li[aria-label=\"' + pickerInput.value + '\"]') !== null) {\n // Remove selected class.\n iconSuggestion.querySelectorAll('li').forEach((li) =>\n li.classList.remove('selected'));\n // Assign selected class for new.\n iconSuggestion.querySelector('li[aria-label=\"' + pickerInput.value + '\"]').classList.add('selected');\n }\n }\n });\n\n $(pickerInput).on('hide.bs.popover', () => {\n pickerIsShown = false;\n });\n\n pickerInput.addEventListener('keyup', function(e) {\n filterIcons(e.target);\n });\n\n };\n\n return {\n init: (target, contextid) => {\n contextID = contextid;\n iconPicker(target);\n }\n\n };\n});\n"],"names":["define","$","popover","Fragment","SELECTORS","contextID","pickerIsShown","SELECTBOX","iconPicker","target","document","querySelector","input","createElement","setAttribute","classList","add","value","text","wrapper","append","style","display","parentNode","createElements","pickerInput","loadFragment","then","html","content","placement","customClass","trigger","on","querySelectorAll","forEach","li","addEventListener","e","closest","getAttribute","label","catch","key","focus","iconSuggestion","remove","filter","toLowerCase","ul","i","length","includes","filterIcons","setTimeout","init","contextid"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"fontawesome-popover.min.js","sources":["../src/fontawesome-popover.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Theme Boost Union - JS code which shows all fontawesome icons in a popover.\n *\n * @module theme_boost_union/fontawesome-popover\n * @copyright 2023 bdecent GmbH \n * @copyright based on code from theme_boost\\footer-popover by Bas Brands.\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\ndefine(['jquery', 'theme_boost/popover', 'core/fragment'], function($, popover, Fragment) {\n\n const SELECTORS = {\n PICKERCONTAINER: '.fontawesome-iconpicker-popover',\n PICKERCONTENT: '[data-region=\"icons-list\"]',\n };\n\n var contextID;\n\n let pickerIsShown = false;\n\n var SELECTBOX;\n\n /**\n * Get the icon list for popover.\n *\n * @returns {String} HTML string\n * @private\n */\n const getIconList = () => {\n return Fragment.loadFragment('theme_boost_union', 'icons_list', contextID, {});\n };\n\n /**\n * Filter the icons in the list with values which the user entered in the search input.\n * Given input will contain the text in both data-value and data-label.\n * Ex. \"core:t\\document\" is data-value and \"fa-document\" is data-label.\n *\n * @param {Element} target\n */\n const filterIcons = (target) => {\n var filter = target.value.toLowerCase();\n SELECTBOX.value = filter || 0;\n var ul = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\n if (ul === undefined || ul === null) {\n return;\n }\n var li = ul.querySelectorAll('li');\n\n for (var i = 0; i < li.length; i++) {\n var value = li[i].getAttribute('data-value');\n var label = li[i].getAttribute('data-label');\n if (!value.toLowerCase().includes(filter) && !label.toLowerCase().includes(filter)) {\n li[i].style.display = \"none\";\n } else {\n li[i].style.display = \"inline-block\";\n }\n }\n };\n\n /**\n * Creates input element and append the element into the target element's parent node.\n * User is able to search icons using this input field.\n *\n * @param {String} target Element Selector.\n */\n const createElements = (target) => {\n\n var input = document.createElement('input');\n input.setAttribute('type', 'text');\n input.classList.add('fontawesome-autocomplete');\n input.classList.add('form-control');\n input.setAttribute('name', 'iconsearch');\n\n if (SELECTBOX.value != '') {\n input.value = SELECTBOX.querySelector('option[selected]') !== null\n ? SELECTBOX.querySelector('option[selected]').text : '';\n }\n\n var wrapper = document.createElement('div');\n wrapper.classList.add(\"fontawesome-picker-container\");\n wrapper.append(input);\n\n document.querySelector(target).style.display = 'none';\n document.querySelector(target).parentNode.append(wrapper);\n };\n\n /**\n * Update the target with fontawesome iconpicker.\n *\n * Create picker input field for search icons insert to DOM, fetch the icons list and setup the popover with icons content.\n * Display the popover when the icon search input field is focused or clicked. This way user can view the list of icons and\n * search icons. When the icon is selected, same icon in the select element will be selected.\n *\n * @param {String} target Element Selector.\n */\n const iconPicker = (target) => {\n\n SELECTBOX = document.querySelector(target);\n\n if (SELECTBOX === undefined || SELECTBOX === null) {\n return;\n }\n\n // Create input element and insert for search icons and hide the current target select box.\n createElements(target);\n\n // Parent of the target element.\n var selectBoxParent = document.querySelector(target).parentNode;\n\n // Input element for search icons, appended in createElements method.\n const pickerInput = selectBoxParent.querySelector(\"input.fontawesome-autocomplete\");\n\n // Check the search input created and inserted in DOM.\n if (pickerInput === undefined || pickerInput === null) {\n setTimeout(() => iconPicker(target), 1000);\n return;\n }\n\n // Fetch the icons list and setup popover with icons list.\n // eslint-disable-next-line promise/valid-params\n getIconList().then(function(html) {\n\n $(pickerInput).popover({\n content: html,\n html: true,\n placement: 'bottom',\n customClass: 'fontawesome-picker',\n trigger: 'click',\n sanitize: false\n });\n\n // Event observer when the popover is inserted in DOM, create event listner for each icon in icons list.\n // Icon is clicked, set the icon data-value as value for select box.\n // Set the icon label to value of autocomplete picker.\n $(pickerInput).on('inserted.bs.popover', function() {\n var ul = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\n ul.querySelectorAll('li').forEach((li) => {\n li.addEventListener('click', (e) => {\n var target = e.target.closest('li');\n var value = target.getAttribute('data-value');\n var label = target.getAttribute('data-label');\n pickerInput.value = label;\n SELECTBOX.value = value || 0;\n $(pickerInput).popover('hide');\n });\n });\n });\n return;\n }).catch();\n\n document.addEventListener('click', e => {\n if (pickerIsShown && !e.target.closest(SELECTORS.PICKERCONTAINER)) {\n $(pickerInput).popover('hide');\n }\n },\n true);\n\n document.addEventListener('keydown', e => {\n if (pickerIsShown && e.key === 'Escape') {\n $(pickerInput).popover('hide');\n pickerInput.focus();\n }\n });\n\n document.addEventListener('focus', e => {\n if (pickerIsShown && !e.target.closest(SELECTORS.PICKERCONTAINER)) {\n $(pickerInput).popover('hide');\n }\n },\n true);\n\n $(pickerInput).on('shown.bs.popover', () => {\n pickerIsShown = true;\n // Add class to selected icon, helps to differentiate.\n if (pickerInput.value != '') {\n var iconSuggestion = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\n if (iconSuggestion.querySelector('li[data-label=\"' + pickerInput.value + '\"]') !== null) {\n // Remove selected class.\n iconSuggestion.querySelectorAll('li').forEach((li) =>\n li.classList.remove('selected'));\n // Assign selected class for new.\n iconSuggestion.querySelector('li[data-label=\"' + pickerInput.value + '\"]').classList.add('selected');\n }\n }\n });\n\n $(pickerInput).on('hide.bs.popover', () => {\n pickerIsShown = false;\n });\n\n pickerInput.addEventListener('keyup', function(e) {\n filterIcons(e.target);\n });\n\n };\n\n return {\n init: (target, contextid) => {\n contextID = contextid;\n iconPicker(target);\n }\n\n };\n});\n"],"names":["define","$","popover","Fragment","SELECTORS","contextID","pickerIsShown","SELECTBOX","iconPicker","target","document","querySelector","input","createElement","setAttribute","classList","add","value","text","wrapper","append","style","display","parentNode","createElements","pickerInput","loadFragment","then","html","content","placement","customClass","trigger","sanitize","on","querySelectorAll","forEach","li","addEventListener","e","closest","getAttribute","label","catch","key","focus","iconSuggestion","remove","filter","toLowerCase","ul","i","length","includes","filterIcons","setTimeout","init","contextid"],"mappings":";;;;;;;;AAwBAA,+CAAO,CAAC,SAAU,sBAAuB,kBAAkB,SAASC,EAAGC,QAASC,gBAEtEC,0BACe,sCAIjBC,cAEAC,eAAgB,MAEhBC,gBA2EEC,WAAcC,YAIZF,OAFJA,UAAYG,SAASC,cAAcF,gBAhCfA,CAAAA,aAEhBG,MAAQF,SAASG,cAAc,SACnCD,MAAME,aAAa,OAAQ,QAC3BF,MAAMG,UAAUC,IAAI,4BACpBJ,MAAMG,UAAUC,IAAI,gBACpBJ,MAAME,aAAa,OAAQ,cAEJ,IAAnBP,UAAUU,QACVL,MAAMK,MAAwD,OAAhDV,UAAUI,cAAc,oBAChCJ,UAAUI,cAAc,oBAAoBO,KAAO,QAGzDC,QAAUT,SAASG,cAAc,OACrCM,QAAQJ,UAAUC,IAAI,gCACtBG,QAAQC,OAAOR,OAEfF,SAASC,cAAcF,QAAQY,MAAMC,QAAU,OAC/CZ,SAASC,cAAcF,QAAQc,WAAWH,OAAOD,UAqBjDK,CAAef,cAMTgB,YAHgBf,SAASC,cAAcF,QAAQc,WAGjBZ,cAAc,kCAG9Cc,MAAAA,aApFGtB,SAASuB,aAAa,oBAAqB,aAAcrB,UAAW,IA2F7DsB,MAAK,SAASC,MAExB3B,EAAEwB,aAAavB,QAAQ,CACnB2B,QAASD,KACTA,MAAM,EACNE,UAAW,SACXC,YAAa,qBACbC,QAAS,QACTC,UAAU,IAMdhC,EAAEwB,aAAaS,GAAG,uBAAuB,WAC5BxB,SAASC,cAAc,mEAC7BwB,iBAAiB,MAAMC,SAASC,KAC/BA,GAAGC,iBAAiB,SAAUC,QACtB9B,OAAS8B,EAAE9B,OAAO+B,QAAQ,MAC1BvB,MAAQR,OAAOgC,aAAa,cAC5BC,MAAQjC,OAAOgC,aAAa,cAChChB,YAAYR,MAAQyB,MACpBnC,UAAUU,MAAQA,OAAS,EAC3BhB,EAAEwB,aAAavB,QAAQ,oBAKpCyC,QAEHjC,SAAS4B,iBAAiB,SAASC,IAC3BjC,gBAAkBiC,EAAE9B,OAAO+B,QAAQpC,4BACnCH,EAAEwB,aAAavB,QAAQ,WAG/B,GAEAQ,SAAS4B,iBAAiB,WAAWC,IAC7BjC,eAA2B,WAAViC,EAAEK,MACnB3C,EAAEwB,aAAavB,QAAQ,QACvBuB,YAAYoB,YAIpBnC,SAAS4B,iBAAiB,SAASC,IAC3BjC,gBAAkBiC,EAAE9B,OAAO+B,QAAQpC,4BACnCH,EAAEwB,aAAavB,QAAQ,WAG/B,GAEAD,EAAEwB,aAAaS,GAAG,oBAAoB,QAClC5B,eAAgB,EAES,IAArBmB,YAAYR,MAAa,KACrB6B,eAAiBpC,SAASC,cAAc,mEACuC,OAA/EmC,eAAenC,cAAc,kBAAoBc,YAAYR,MAAQ,QAErE6B,eAAeX,iBAAiB,MAAMC,SAASC,IACvCA,GAAGtB,UAAUgC,OAAO,cAE5BD,eAAenC,cAAc,kBAAoBc,YAAYR,MAAQ,MAAMF,UAAUC,IAAI,iBAKrGf,EAAEwB,aAAaS,GAAG,mBAAmB,KACjC5B,eAAgB,KAGpBmB,YAAYa,iBAAiB,SAAS,SAASC,GAvJ9B9B,CAAAA,aACbuC,OAASvC,OAAOQ,MAAMgC,cAC1B1C,UAAUU,MAAQ+B,QAAU,MACxBE,GAAKxC,SAASC,cAAc,sEAC5BuC,MAAAA,WAGAb,GAAKa,GAAGf,iBAAiB,MAEpBgB,EAAI,EAAGA,EAAId,GAAGe,OAAQD,IAAK,KAC5BlC,MAAQoB,GAAGc,GAAGV,aAAa,cAC3BC,MAAQL,GAAGc,GAAGV,aAAa,cAC1BxB,MAAMgC,cAAcI,SAASL,SAAYN,MAAMO,cAAcI,SAASL,QAGvEX,GAAGc,GAAG9B,MAAMC,QAAU,eAFtBe,GAAGc,GAAG9B,MAAMC,QAAU,SA2I1BgC,CAAYf,EAAE9B,YA7Ed8C,YAAW,IAAM/C,WAAWC,SAAS,YAkFtC,CACH+C,KAAM,CAAC/C,OAAQgD,aACXpD,UAAYoD,UACZjD,WAAWC"} \ No newline at end of file diff --git a/amd/src/fontawesome-popover.js b/amd/src/fontawesome-popover.js index f515c04377d..a2faaa8c853 100644 --- a/amd/src/fontawesome-popover.js +++ b/amd/src/fontawesome-popover.js @@ -47,8 +47,8 @@ define(['jquery', 'theme_boost/popover', 'core/fragment'], function($, popover, /** * Filter the icons in the list with values which the user entered in the search input. - * Given input will contain the text in both aria-value and aria-label. - * Ex. "core:t\document" is aria-value and "fa-document" is aria-label. + * Given input will contain the text in both data-value and data-label. + * Ex. "core:t\document" is data-value and "fa-document" is data-label. * * @param {Element} target */ @@ -62,8 +62,8 @@ define(['jquery', 'theme_boost/popover', 'core/fragment'], function($, popover, var li = ul.querySelectorAll('li'); for (var i = 0; i < li.length; i++) { - var value = li[i].getAttribute('aria-value'); - var label = li[i].getAttribute('aria-label'); + var value = li[i].getAttribute('data-value'); + var label = li[i].getAttribute('data-label'); if (!value.toLowerCase().includes(filter) && !label.toLowerCase().includes(filter)) { li[i].style.display = "none"; } else { @@ -140,19 +140,20 @@ define(['jquery', 'theme_boost/popover', 'core/fragment'], function($, popover, html: true, placement: 'bottom', customClass: 'fontawesome-picker', - trigger: 'click' + trigger: 'click', + sanitize: false }); // Event observer when the popover is inserted in DOM, create event listner for each icon in icons list. - // Icon is clicked, set the icon aria-value as value for select box. + // Icon is clicked, set the icon data-value as value for select box. // Set the icon label to value of autocomplete picker. $(pickerInput).on('inserted.bs.popover', function() { var ul = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions'); ul.querySelectorAll('li').forEach((li) => { li.addEventListener('click', (e) => { var target = e.target.closest('li'); - var value = target.getAttribute('aria-value'); - var label = target.getAttribute('aria-label'); + var value = target.getAttribute('data-value'); + var label = target.getAttribute('data-label'); pickerInput.value = label; SELECTBOX.value = value || 0; $(pickerInput).popover('hide'); @@ -188,12 +189,12 @@ define(['jquery', 'theme_boost/popover', 'core/fragment'], function($, popover, // Add class to selected icon, helps to differentiate. if (pickerInput.value != '') { var iconSuggestion = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions'); - if (iconSuggestion.querySelector('li[aria-label="' + pickerInput.value + '"]') !== null) { + if (iconSuggestion.querySelector('li[data-label="' + pickerInput.value + '"]') !== null) { // Remove selected class. iconSuggestion.querySelectorAll('li').forEach((li) => li.classList.remove('selected')); // Assign selected class for new. - iconSuggestion.querySelector('li[aria-label="' + pickerInput.value + '"]').classList.add('selected'); + iconSuggestion.querySelector('li[data-label="' + pickerInput.value + '"]').classList.add('selected'); } } }); diff --git a/templates/fontawesome-iconpicker-popover.mustache b/templates/fontawesome-iconpicker-popover.mustache index 65287e78979..0a54ad864c7 100644 --- a/templates/fontawesome-iconpicker-popover.mustache +++ b/templates/fontawesome-iconpicker-popover.mustache @@ -48,7 +48,7 @@