From cf8837bb48da58f5aefbe1d8179259251f8c1985 Mon Sep 17 00:00:00 2001 From: Prasanna LMSACE Date: Wed, 20 Dec 2023 11:26:36 +0530 Subject: [PATCH] Fix smart menu mustache linter warnings, solves #362 --- amd/build/fontawesome-popover.min.js | 2 +- amd/build/fontawesome-popover.min.js.map | 2 +- amd/src/fontawesome-popover.js | 21 +- templates/core/moremenu.mustache | 33 ++- templates/core/moremenu_children.mustache | 219 +++++++++--------- .../core/user_action_menu_items.mustache | 7 +- .../fontawesome-iconpicker-popover.mustache | 2 +- .../smartmenus-cardmenu-children.mustache | 137 ++++++----- version.php | 2 +- 9 files changed, 227 insertions(+), 198 deletions(-) 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..3cb9480546f 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":";;;;;;;;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,UAMb/B,EAAEwB,aAAaQ,GAAG,uBAAuB,WAC5BvB,SAASC,cAAc,mEAC7BuB,iBAAiB,MAAMC,SAASC,KAC/BA,GAAGC,iBAAiB,SAAUC,QACtB7B,OAAS6B,EAAE7B,OAAO8B,QAAQ,MAC1BtB,MAAQR,OAAO+B,aAAa,cAC5BC,MAAQhC,OAAO+B,aAAa,cAChCf,YAAYR,MAAQwB,MACpBlC,UAAUU,MAAQA,OAAS,EAC3BhB,EAAEwB,aAAavB,QAAQ,oBAKpCwC,QAEHhC,SAAS2B,iBAAiB,SAASC,IAC3BhC,gBAAkBgC,EAAE7B,OAAO8B,QAAQnC,4BACnCH,EAAEwB,aAAavB,QAAQ,WAG/B,GAEAQ,SAAS2B,iBAAiB,WAAWC,IAC7BhC,eAA2B,WAAVgC,EAAEK,MACnB1C,EAAEwB,aAAavB,QAAQ,QACvBuB,YAAYmB,YAIpBlC,SAAS2B,iBAAiB,SAASC,IAC3BhC,gBAAkBgC,EAAE7B,OAAO8B,QAAQnC,4BACnCH,EAAEwB,aAAavB,QAAQ,WAG/B,GAEAD,EAAEwB,aAAaQ,GAAG,oBAAoB,QAClC3B,eAAgB,EAES,IAArBmB,YAAYR,MAAa,KACrB4B,eAAiBnC,SAASC,cAAc,mEACuC,OAA/EkC,eAAelC,cAAc,kBAAoBc,YAAYR,MAAQ,QAErE4B,eAAeX,iBAAiB,MAAMC,SAASC,IACvCA,GAAGrB,UAAU+B,OAAO,cAE5BD,eAAelC,cAAc,kBAAoBc,YAAYR,MAAQ,MAAMF,UAAUC,IAAI,iBAKrGf,EAAEwB,aAAaQ,GAAG,mBAAmB,KACjC3B,eAAgB,KAGpBmB,YAAYY,iBAAiB,SAAS,SAASC,GAtJ9B7B,CAAAA,aACbsC,OAAStC,OAAOQ,MAAM+B,cAC1BzC,UAAUU,MAAQ8B,QAAU,MACxBE,GAAKvC,SAASC,cAAc,sEAC5BsC,MAAAA,WAGAb,GAAKa,GAAGf,iBAAiB,MAEpBgB,EAAI,EAAGA,EAAId,GAAGe,OAAQD,IAAK,KAC5BjC,MAAQmB,GAAGc,GAAGV,aAAa,cAC3BC,MAAQL,GAAGc,GAAGV,aAAa,cAC1BvB,MAAM+B,cAAcI,SAASL,SAAYN,MAAMO,cAAcI,SAASL,QAGvEX,GAAGc,GAAG7B,MAAMC,QAAU,eAFtBc,GAAGc,GAAG7B,MAAMC,QAAU,SA0I1B+B,CAAYf,EAAE7B,YA5Ed6C,YAAW,IAAM9C,WAAWC,SAAS,YAiFtC,CACH8C,KAAM,CAAC9C,OAAQ+C,aACXnD,UAAYmD,UACZhD,WAAWC"} \ 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/\r\n//\r\n// Moodle is free software: you can redistribute it and/or modify\r\n// it under the terms of the GNU General Public License as published by\r\n// the Free Software Foundation, either version 3 of the License, or\r\n// (at your option) any later version.\r\n//\r\n// Moodle is distributed in the hope that it will be useful,\r\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n// GNU General Public License for more details.\r\n//\r\n// You should have received a copy of the GNU General Public License\r\n// along with Moodle. If not, see .\r\n\r\n/**\r\n * Theme Boost Union - JS code which shows all fontawesome icons in a popover.\r\n *\r\n * @module theme_boost_union/fontawesome-popover\r\n * @copyright 2023 bdecent GmbH \r\n * @copyright based on code from theme_boost\\footer-popover by Bas Brands.\r\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\r\n */\r\n\r\ndefine(['jquery', 'theme_boost/popover', 'core/fragment'], function($, popover, Fragment) {\r\n\r\n const SELECTORS = {\r\n PICKERCONTAINER: '.fontawesome-iconpicker-popover',\r\n PICKERCONTENT: '[data-region=\"icons-list\"]',\r\n };\r\n\r\n var contextID;\r\n\r\n let pickerIsShown = false;\r\n\r\n var SELECTBOX;\r\n\r\n /**\r\n * Get the icon list for popover.\r\n *\r\n * @returns {String} HTML string\r\n * @private\r\n */\r\n const getIconList = () => {\r\n return Fragment.loadFragment('theme_boost_union', 'icons_list', contextID, {});\r\n };\r\n\r\n /**\r\n * Filter the icons in the list with values which the user entered in the search input.\r\n * Given input will contain the text in both data-value and data-label.\r\n * Ex. \"core:t\\document\" is data-value and \"fa-document\" is data-label.\r\n *\r\n * @param {Element} target\r\n */\r\n const filterIcons = (target) => {\r\n var filter = target.value.toLowerCase();\r\n SELECTBOX.value = filter || 0;\r\n var ul = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\r\n if (ul === undefined || ul === null) {\r\n return;\r\n }\r\n var li = ul.querySelectorAll('li');\r\n\r\n for (var i = 0; i < li.length; i++) {\r\n var value = li[i].getAttribute('data-value');\r\n var label = li[i].getAttribute('data-label');\r\n if (!value.toLowerCase().includes(filter) && !label.toLowerCase().includes(filter)) {\r\n li[i].style.display = \"none\";\r\n } else {\r\n li[i].style.display = \"inline-block\";\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Creates input element and append the element into the target element's parent node.\r\n * User is able to search icons using this input field.\r\n *\r\n * @param {String} target Element Selector.\r\n */\r\n const createElements = (target) => {\r\n\r\n var input = document.createElement('input');\r\n input.setAttribute('type', 'text');\r\n input.classList.add('fontawesome-autocomplete');\r\n input.classList.add('form-control');\r\n input.setAttribute('name', 'iconsearch');\r\n\r\n if (SELECTBOX.value != '') {\r\n input.value = SELECTBOX.querySelector('option[selected]') !== null\r\n ? SELECTBOX.querySelector('option[selected]').text : '';\r\n }\r\n\r\n var wrapper = document.createElement('div');\r\n wrapper.classList.add(\"fontawesome-picker-container\");\r\n wrapper.append(input);\r\n\r\n document.querySelector(target).style.display = 'none';\r\n document.querySelector(target).parentNode.append(wrapper);\r\n };\r\n\r\n /**\r\n * Update the target with fontawesome iconpicker.\r\n *\r\n * Create picker input field for search icons insert to DOM, fetch the icons list and setup the popover with icons content.\r\n * Display the popover when the icon search input field is focused or clicked. This way user can view the list of icons and\r\n * search icons. When the icon is selected, same icon in the select element will be selected.\r\n *\r\n * @param {String} target Element Selector.\r\n */\r\n const iconPicker = (target) => {\r\n\r\n SELECTBOX = document.querySelector(target);\r\n\r\n if (SELECTBOX === undefined || SELECTBOX === null) {\r\n return;\r\n }\r\n\r\n // Create input element and insert for search icons and hide the current target select box.\r\n createElements(target);\r\n\r\n // Parent of the target element.\r\n var selectBoxParent = document.querySelector(target).parentNode;\r\n\r\n // Input element for search icons, appended in createElements method.\r\n const pickerInput = selectBoxParent.querySelector(\"input.fontawesome-autocomplete\");\r\n\r\n // Check the search input created and inserted in DOM.\r\n if (pickerInput === undefined || pickerInput === null) {\r\n setTimeout(() => iconPicker(target), 1000);\r\n return;\r\n }\r\n\r\n // Fetch the icons list and setup popover with icons list.\r\n // eslint-disable-next-line promise/valid-params\r\n getIconList().then(function(html) {\r\n\r\n $(pickerInput).popover({\r\n content: html,\r\n html: true,\r\n placement: 'bottom',\r\n customClass: 'fontawesome-picker',\r\n trigger: 'click',\r\n sanitize: false\r\n });\r\n\r\n // Event observer when the popover is inserted in DOM, create event listner for each icon in icons list.\r\n // Icon is clicked, set the icon data-value as value for select box.\r\n // Set the icon label to value of autocomplete picker.\r\n $(pickerInput).on('inserted.bs.popover', function() {\r\n var ul = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\r\n ul.querySelectorAll('li').forEach((li) => {\r\n li.addEventListener('click', (e) => {\r\n var target = e.target.closest('li');\r\n var value = target.getAttribute('data-value');\r\n var label = target.getAttribute('data-label');\r\n pickerInput.value = label;\r\n SELECTBOX.value = value || 0;\r\n $(pickerInput).popover('hide');\r\n });\r\n });\r\n });\r\n return;\r\n }).catch();\r\n\r\n document.addEventListener('click', e => {\r\n if (pickerIsShown && !e.target.closest(SELECTORS.PICKERCONTAINER)) {\r\n $(pickerInput).popover('hide');\r\n }\r\n },\r\n true);\r\n\r\n document.addEventListener('keydown', e => {\r\n if (pickerIsShown && e.key === 'Escape') {\r\n $(pickerInput).popover('hide');\r\n pickerInput.focus();\r\n }\r\n });\r\n\r\n document.addEventListener('focus', e => {\r\n if (pickerIsShown && !e.target.closest(SELECTORS.PICKERCONTAINER)) {\r\n $(pickerInput).popover('hide');\r\n }\r\n },\r\n true);\r\n\r\n $(pickerInput).on('shown.bs.popover', () => {\r\n pickerIsShown = true;\r\n // Add class to selected icon, helps to differentiate.\r\n if (pickerInput.value != '') {\r\n var iconSuggestion = document.querySelector('.fontawesome-iconpicker-popover ul.fontawesome-icon-suggestions');\r\n if (iconSuggestion.querySelector('li[data-label=\"' + pickerInput.value + '\"]') !== null) {\r\n // Remove selected class.\r\n iconSuggestion.querySelectorAll('li').forEach((li) =>\r\n li.classList.remove('selected'));\r\n // Assign selected class for new.\r\n iconSuggestion.querySelector('li[data-label=\"' + pickerInput.value + '\"]').classList.add('selected');\r\n }\r\n }\r\n });\r\n\r\n $(pickerInput).on('hide.bs.popover', () => {\r\n pickerIsShown = false;\r\n });\r\n\r\n pickerInput.addEventListener('keyup', function(e) {\r\n filterIcons(e.target);\r\n });\r\n\r\n };\r\n\r\n return {\r\n init: (target, contextid) => {\r\n contextID = contextid;\r\n iconPicker(target);\r\n }\r\n\r\n };\r\n});\r\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":"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"} \ 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/core/moremenu.mustache b/templates/core/moremenu.mustache index ed350ae1846..bcad295a26c 100644 --- a/templates/core/moremenu.mustache +++ b/templates/core/moremenu.mustache @@ -55,17 +55,44 @@