diff --git a/amd/build/commands.min.js b/amd/build/commands.min.js index 6115b03..1b7a51a 100644 --- a/amd/build/commands.min.js +++ b/amd/build/commands.min.js @@ -1,3 +1,3 @@ -define("tiny_c4l/commands",["exports","editor_tiny/utils","core/str","./ui","./common","./options"],(function(_exports,_utils,_str,_ui,_common,_options){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.getSetup=void 0;_exports.getSetup=async()=>{const[c4lButtonNameTitle,c4lMenuItemNameTitle,buttonImage]=await Promise.all([(0,_str.get_string)("button_c4l",_common.component),(0,_str.get_string)("menuitem_c4l",_common.component),(0,_utils.getButtonImage)("icon",_common.component)]);return editor=>{(0,_options.isC4LVisible)(editor)&&(editor.ui.registry.addIcon(_common.icon,buttonImage.html),editor.ui.registry.addButton(_common.c4lButtonName,{icon:_common.icon,tooltip:c4lButtonNameTitle,onAction:()=>(0,_ui.handleAction)(editor)}),editor.ui.registry.addMenuItem(_common.c4lMenuItemName,{icon:_common.icon,text:c4lMenuItemNameTitle,onAction:()=>(0,_ui.handleAction)(editor)}))}}})); +define("tiny_c4l/commands",["exports","editor_tiny/utils","core/str","./ui","./common","./options"],(function(_exports,_utils,_str,_ui,_common,_options){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.getSetup=void 0;_exports.getSetup=async()=>{const[c4lButtonNameTitle,c4lMenuItemNameTitle,buttonImage]=await Promise.all([(0,_str.get_string)("button_c4l",_common.component),(0,_str.get_string)("menuitem_c4l",_common.component),(0,_utils.getButtonImage)("icon",_common.component)]);return editor=>{(0,_options.isC4LVisible)(editor)&&(editor.ui.registry.addIcon(_common.icon,buttonImage.html),editor.ui.registry.addButton(_common.c4lButtonName,{icon:_common.icon,tooltip:c4lButtonNameTitle,onAction:()=>(0,_ui.handleAction)(editor)}),editor.ui.registry.addMenuItem(_common.c4lMenuItemName,{icon:_common.icon,text:c4lMenuItemNameTitle,onAction:()=>(0,_ui.handleAction)(editor)}),editor.options.set("content_style",(0,_options.getpreviewCSS)(editor)))}}})); //# sourceMappingURL=commands.min.js.map \ No newline at end of file diff --git a/amd/build/commands.min.js.map b/amd/build/commands.min.js.map index 3bf0e77..ed51981 100644 --- a/amd/build/commands.min.js.map +++ b/amd/build/commands.min.js.map @@ -1 +1 @@ -{"version":3,"file":"commands.min.js","sources":["../src/commands.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 * Tiny C4L commands.\n *\n * @module tiny_c4l/commands\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {getButtonImage} from 'editor_tiny/utils';\nimport {get_string as getString} from 'core/str';\nimport {handleAction} from './ui';\nimport {\n component,\n c4lButtonName,\n c4lMenuItemName,\n icon,\n} from './common';\nimport {isC4LVisible} from './options';\n\nexport const getSetup = async() => {\n const [\n c4lButtonNameTitle,\n c4lMenuItemNameTitle,\n buttonImage,\n ] = await Promise.all([\n getString('button_c4l', component),\n getString('menuitem_c4l', component),\n getButtonImage('icon', component),\n ]);\n\n return (editor) => {\n if (isC4LVisible(editor)) {\n // Register the C4L Icon.\n editor.ui.registry.addIcon(icon, buttonImage.html);\n\n // Register the C4L Toolbar Button.\n editor.ui.registry.addButton(c4lButtonName, {\n icon,\n tooltip: c4lButtonNameTitle,\n onAction: () => handleAction(editor),\n });\n\n // Add the C4L Menu Item.\n // This allows it to be added to a standard menu, or a context menu.\n editor.ui.registry.addMenuItem(c4lMenuItemName, {\n icon,\n text: c4lMenuItemNameTitle,\n onAction: () => handleAction(editor),\n });\n }\n };\n};\n"],"names":["_exports","getSetup","async","c4lButtonNameTitle","c4lMenuItemNameTitle","buttonImage","Promise","all","getString","component","getButtonImage","editor","isC4LVisible","ui","registry","addIcon","icon","html","addButton","c4lButtonName","tooltip","onAction","handleAction","addMenuItem","c4lMenuItemName","text"],"mappings":"0OAkEEA,SAAAC,SAhCsBC,UACpB,MACIC,mBACAC,qBACAC,mBACMC,QAAQC,IAAI,EAClB,EAAAC,KAAAA,YAAU,aAAcC,QAASA,YACjC,EAAAD,KAAAA,YAAU,eAAgBC,QAASA,YACnC,EAAAC,uBAAe,OAAQD,QAASA,aAGpC,OAAQE,UACA,EAAAC,SAAAA,cAAaD,UAEbA,OAAOE,GAAGC,SAASC,QAAQC,QAAAA,KAAMX,YAAYY,MAG7CN,OAAOE,GAAGC,SAASI,UAAUC,sBAAe,CACxCH,KAAAA,QAAIA,KACJI,QAASjB,mBACTkB,SAAUA,KAAM,EAAAC,IAAAA,cAAaX,UAKjCA,OAAOE,GAAGC,SAASS,YAAYC,wBAAiB,CAC5CR,KAAAA,QAAIA,KACJS,KAAMrB,qBACNiB,SAAUA,KAAM,EAAAC,IAAAA,cAAaX,UAErC,CACH,CACH"} \ No newline at end of file +{"version":3,"file":"commands.min.js","sources":["../src/commands.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 * Tiny C4L commands.\n *\n * @module tiny_c4l/commands\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {getButtonImage} from 'editor_tiny/utils';\nimport {get_string as getString} from 'core/str';\nimport {handleAction} from './ui';\nimport {\n component,\n c4lButtonName,\n c4lMenuItemName,\n icon,\n} from './common';\nimport {\n isC4LVisible,\n getpreviewCSS\n} from './options';\n\nexport const getSetup = async() => {\n const [\n c4lButtonNameTitle,\n c4lMenuItemNameTitle,\n buttonImage,\n ] = await Promise.all([\n getString('button_c4l', component),\n getString('menuitem_c4l', component),\n getButtonImage('icon', component),\n ]);\n\n return (editor) => {\n if (isC4LVisible(editor)) {\n // Register the C4L Icon.\n editor.ui.registry.addIcon(icon, buttonImage.html);\n\n // Register the C4L Toolbar Button.\n editor.ui.registry.addButton(c4lButtonName, {\n icon,\n tooltip: c4lButtonNameTitle,\n onAction: () => handleAction(editor),\n });\n\n // Add the C4L Menu Item.\n // This allows it to be added to a standard menu, or a context menu.\n editor.ui.registry.addMenuItem(c4lMenuItemName, {\n icon,\n text: c4lMenuItemNameTitle,\n onAction: () => handleAction(editor),\n });\n\n // Inject custom CSS.\n editor.options.set('content_style', getpreviewCSS(editor));\n }\n };\n};\n"],"names":["_exports","getSetup","async","c4lButtonNameTitle","c4lMenuItemNameTitle","buttonImage","Promise","all","getString","component","getButtonImage","editor","isC4LVisible","ui","registry","addIcon","icon","html","addButton","c4lButtonName","tooltip","onAction","handleAction","addMenuItem","c4lMenuItemName","text","options","set","getpreviewCSS"],"mappings":"0OAwEEA,SAAAC,SAnCsBC,UACpB,MACIC,mBACAC,qBACAC,mBACMC,QAAQC,IAAI,EAClB,EAAAC,KAAAA,YAAU,aAAcC,QAASA,YACjC,EAAAD,KAAAA,YAAU,eAAgBC,QAASA,YACnC,EAAAC,uBAAe,OAAQD,QAASA,aAGpC,OAAQE,UACA,EAAAC,SAAAA,cAAaD,UAEbA,OAAOE,GAAGC,SAASC,QAAQC,QAAAA,KAAMX,YAAYY,MAG7CN,OAAOE,GAAGC,SAASI,UAAUC,sBAAe,CACxCH,KAAAA,QAAIA,KACJI,QAASjB,mBACTkB,SAAUA,KAAM,EAAAC,IAAAA,cAAaX,UAKjCA,OAAOE,GAAGC,SAASS,YAAYC,wBAAiB,CAC5CR,KAAAA,QAAIA,KACJS,KAAMrB,qBACNiB,SAAUA,KAAM,EAAAC,IAAAA,cAAaX,UAIjCA,OAAOe,QAAQC,IAAI,iBAAiB,EAAAC,SAAaA,eAACjB,SACtD,CACH,CACH"} \ No newline at end of file diff --git a/amd/build/common.min.js b/amd/build/common.min.js index 78e4c13..7c211d5 100644 --- a/amd/build/common.min.js +++ b/amd/build/common.min.js @@ -1,3 +1,3 @@ -define("tiny_c4l/common",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={component:"tiny_c4l",pluginName:"".concat("tiny_c4l","/plugin"),icon:"".concat("tiny_c4l"),c4lButtonName:"".concat("tiny_c4l"),c4lMenuItemName:"".concat("tiny_c4l")};return _exports.default=_default,_exports.default})); +define("tiny_c4l/common",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;_exports.default={component:"tiny_c4l",pluginName:"tiny_c4l/plugin",icon:"tiny_c4l",c4lButtonName:"tiny_c4l",c4lMenuItemName:"tiny_c4l"};return _exports.default})); //# sourceMappingURL=common.min.js.map \ No newline at end of file diff --git a/amd/build/common.min.js.map b/amd/build/common.min.js.map index fb6d669..1b40d95 100644 --- a/amd/build/common.min.js.map +++ b/amd/build/common.min.js.map @@ -1 +1 @@ -{"version":3,"file":"common.min.js","sources":["../src/common.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 * Tiny C4L common.\n *\n * @module tiny_c4l/common\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst component = 'tiny_c4l';\n\nexport default {\n component,\n pluginName: `${component}/plugin`,\n icon: `${component}`,\n c4lButtonName: `${component}`,\n c4lMenuItemName: `${component}`,\n};\n"],"names":["_default","component","pluginName","concat","icon","c4lButtonName","c4lMenuItemName","_exports","default"],"mappings":"yIAuB6B,IAAAA,SAEd,CACXC,UAHc,WAIdC,WAAUC,GAAAA,OAJI,WAImB,WACjCC,KAAID,GAAAA,OALU,YAMdE,cAAaF,GAAAA,OANC,YAOdG,gBAAe,GAAAH,OAPD,aAQjB,OAAAI,SAAAC,QAAAR,SAAAO,SAAAC,OAAA"} \ No newline at end of file +{"version":3,"file":"common.min.js","sources":["../src/common.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 * Tiny C4L common.\n *\n * @module tiny_c4l/common\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst component = 'tiny_c4l';\n\nexport default {\n component,\n pluginName: `${component}/plugin`,\n icon: `${component}`,\n c4lButtonName: `${component}`,\n c4lMenuItemName: `${component}`,\n};\n"],"names":["_exports","default","component","pluginName","icon","c4lButtonName","c4lMenuItemName"],"mappings":"yIAuB6BA,SAAAC,QAEd,CACXC,UAHc,WAIdC,WAAa,kBACbC,KAAO,WACPC,cAAgB,WAChBC,gBAAkB,YACrB,OAAAN,SAAAC,OAAA"} \ No newline at end of file diff --git a/amd/build/components.min.js b/amd/build/components.min.js index 12b0b75..d67c0fe 100644 --- a/amd/build/components.min.js +++ b/amd/build/components.min.js @@ -1,3 +1,11 @@ -define("tiny_c4l/components",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={components:[{id:"0",name:"keyconcept",type:"contextual",imageClass:"c4l-keyconcept-icon",code:'

{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"1",name:"tip",type:"contextual",imageClass:"c4l-tip-icon",code:'

\n {{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"2",name:"reminder",type:"contextual",imageClass:"c4l-reminder-icon",code:'

\n {{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"3",name:"quote",type:"contextual",imageClass:"c4l-quote-icon",code:'

\n
\n

{{PLACEHOLDER}}

\n
\n {{VARIANTSHTML}}\n


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width","quote"]},{id:"4",name:"dodontcards",type:"contextual",imageClass:"c4l-dodontcards-icon",code:'

\n
{{PLACEHOLDER}}
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Phasellus a posuere nibh, eu mollis lacus.\n Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\n nascetur ridiculus mus.


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"5",name:"readingcontext",type:"contextual",imageClass:"c4l-readingcontext-icon",code:'

\n

{{PLACEHOLDER}}

{{VARIANTSHTML}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi. Lorem ipsum dolor sit amet. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.",variants:["full-width","quote","comfort-reading"]},{id:"6",name:"example",type:"contextual",imageClass:"c4l-example-icon",code:'

Lorem ipsum dolor sit amet

\n

{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"7",name:"figure",type:"contextual",imageClass:"c4l-figure-icon",code:'

Lorem ipsum dolor sit amet\n {{VARIANTSHTML}}


',text:"Consectetur adipiscing elit.",variants:["full-width","caption"]},{id:"8",name:"tag",type:"contextual",imageClass:"c4l-tag-icon",code:'

\n
{{PLACEHOLDER}}
',text:"Lorem ipsum",variants:["align-right"]},{id:"9",name:"inlinetag",type:"contextual",imageClass:"c4l-inlinetag-icon",code:'{{PLACEHOLDER}}',text:"Text",variants:[]},{id:"10",name:"attention",type:"procedural",imageClass:"c4l-attention-icon",code:'

\n "{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"11",name:"estimatedtime",type:"procedural",imageClass:"c4l-estimatedtime-icon",code:'

{{PLACEHOLDER}} {{#min}}
',text:"15",variants:["align-left"]},{id:"12",name:"duedate",type:"procedural",imageClass:"c4l-duedate-icon",code:'

{{PLACEHOLDER}}
',text:"November 17th",variants:["align-left"]},{id:"13",name:"proceduralcontext",type:"procedural",imageClass:"c4l-proceduralcontext-icon",code:'

\n {{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis lorem aliquet, fermentum dolor ac, venenatis turpis.",variants:["full-width"]},{id:"14",name:"learningoutcomes",type:"procedural",imageClass:"c4l-learningoutcomes-icon",code:'

\n
\n
{{#learningoutcomes}}
\n
  • {{PLACEHOLDER}}
  • Curabitur non nulla sit amet\n nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
    • \n
  • Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. \n Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.",variants:["full-width","ordered-list"]},{id:"15",name:"gradingvalue",type:"evaluative",imageClass:"c4l-gradingvalue-icon",code:'

{{#gradingvalue}}: {{PLACEHOLDER}}
',text:"33.3%",variants:["align-left"]},{id:"16",name:"expectedfeedback",type:"evaluative",imageClass:"c4l-expectedfeedback-icon",code:'

\n

{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width"]},{id:"17",name:"allpurposecard",type:"helper",imageClass:"c4l-allpurposecard-icon",code:'

{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]}]};return _exports.default=_default,_exports.default})); +define("tiny_c4l/components",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0; +/** + * Tiny C4L components. + * + * @module tiny_c4l/components + * @copyright 2022 Marc Català + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */ +const components=[{id:"0",name:"keyconcept",type:"contextual",imageClass:"c4l-keyconcept-icon",code:'

{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"1",name:"tip",type:"contextual",imageClass:"c4l-tip-icon",code:'

\n {{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"2",name:"reminder",type:"contextual",imageClass:"c4l-reminder-icon",code:'

\n {{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"3",name:"quote",type:"contextual",imageClass:"c4l-quote-icon",code:'

\n
\n

{{PLACEHOLDER}}

\n
\n {{VARIANTSHTML}}\n


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width","quote"]},{id:"4",name:"dodontcards",type:"contextual",imageClass:"c4l-dodontcards-icon",code:'

\n
{{PLACEHOLDER}}
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Phasellus a posuere nibh, eu mollis lacus.\n Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\n nascetur ridiculus mus.


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"5",name:"readingcontext",type:"contextual",imageClass:"c4l-readingcontext-icon",code:'

\n

{{PLACEHOLDER}}

{{VARIANTSHTML}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi. Lorem ipsum dolor sit amet. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.",variants:["full-width","quote","comfort-reading"]},{id:"6",name:"example",type:"contextual",imageClass:"c4l-example-icon",code:'

Lorem ipsum dolor sit amet

\n

{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"7",name:"figure",type:"contextual",imageClass:"c4l-figure-icon",code:'

Lorem ipsum dolor sit amet\n {{VARIANTSHTML}}


',text:"Consectetur adipiscing elit.",variants:["full-width","caption"]},{id:"8",name:"tag",type:"contextual",imageClass:"c4l-tag-icon",code:'

\n
{{PLACEHOLDER}}
',text:"Lorem ipsum",variants:["align-right"]},{id:"9",name:"inlinetag",type:"contextual",imageClass:"c4l-inlinetag-icon",code:'{{PLACEHOLDER}}',text:"Text",variants:[]},{id:"10",name:"attention",type:"procedural",imageClass:"c4l-attention-icon",code:'

\n "{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"11",name:"estimatedtime",type:"procedural",imageClass:"c4l-estimatedtime-icon",code:'

{{PLACEHOLDER}} {{#min}}
',text:"15",variants:["align-left"]},{id:"12",name:"duedate",type:"procedural",imageClass:"c4l-duedate-icon",code:'

{{PLACEHOLDER}}
',text:"November 17th",variants:["align-left"]},{id:"13",name:"proceduralcontext",type:"procedural",imageClass:"c4l-proceduralcontext-icon",code:'

\n {{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis lorem aliquet, fermentum dolor ac, venenatis turpis.",variants:["full-width"]},{id:"14",name:"learningoutcomes",type:"procedural",imageClass:"c4l-learningoutcomes-icon",code:'

\n
\n
{{#learningoutcomes}}
\n
  • {{PLACEHOLDER}}
  • Curabitur non nulla sit amet\n nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
    • \n
  • Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.\n Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.",variants:["full-width","ordered-list"]},{id:"15",name:"gradingvalue",type:"evaluative",imageClass:"c4l-gradingvalue-icon",code:'

{{#gradingvalue}}: {{PLACEHOLDER}}
',text:"33.3%",variants:["align-left"]},{id:"16",name:"expectedfeedback",type:"evaluative",imageClass:"c4l-expectedfeedback-icon",code:'

\n

{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width"]},{id:"17",name:"allpurposecard",type:"helper",imageClass:"c4l-allpurposecard-icon",code:'

{{PLACEHOLDER}}


',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]}];_exports.default={components:components};return _exports.default})); //# sourceMappingURL=components.min.js.map \ No newline at end of file diff --git a/amd/build/components.min.js.map b/amd/build/components.min.js.map index 7787431..23dd4fd 100644 --- a/amd/build/components.min.js.map +++ b/amd/build/components.min.js.map @@ -1 +1 @@ -{"version":3,"file":"components.min.js","sources":["../src/components.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 * Tiny C4L components.\n *\n * @module tiny_c4l/components\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst components = [\n {\n id: \"0\",\n name: \"keyconcept\",\n type: \"contextual\",\n imageClass: \"c4l-keyconcept-icon\",\n code:\n '

' +\n \"{{PLACEHOLDER}}


\",\n text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n variants: [\"full-width\"],\n },\n {\n id: \"1\",\n name: \"tip\",\n type: \"contextual\",\n imageClass: \"c4l-tip-icon\",\n code:\n `

\n {{PLACEHOLDER}}


`,\n text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n variants: [\"full-width\"],\n },\n {\n id: \"2\",\n name: \"reminder\",\n type: \"contextual\",\n imageClass: \"c4l-reminder-icon\",\n code:\n `

\n {{PLACEHOLDER}}


`,\n text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n variants: [\"full-width\"],\n },\n {\n id: \"3\",\n name: \"quote\",\n type: \"contextual\",\n imageClass: \"c4l-quote-icon\",\n code:\n `

\n
\n

{{PLACEHOLDER}}

\n
\n {{VARIANTSHTML}}\n


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\",\n variants: [\"full-width\", \"quote\"],\n },\n {\n id: \"4\",\n name: \"dodontcards\",\n type: \"contextual\",\n imageClass: \"c4l-dodontcards-icon\",\n code:\n `

\n
{{PLACEHOLDER}}
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Phasellus a posuere nibh, eu mollis lacus.\n Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\n nascetur ridiculus mus.


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\" +\n \"Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\",\n variants: [\"full-width\"],\n },\n {\n id: \"5\",\n name: \"readingcontext\",\n type: \"contextual\",\n imageClass: \"c4l-readingcontext-icon\",\n code:\n `

\n

{{PLACEHOLDER}}

{{VARIANTSHTML}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae,\" +\n \" posuere egestas nisi. Lorem ipsum dolor sit amet. \" +\n \"Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.\",\n variants: [\"full-width\", \"quote\", \"comfort-reading\"],\n },\n {\n id: \"6\",\n name: \"example\",\n type: \"contextual\",\n imageClass: \"c4l-example-icon\",\n code:\n `

Lorem ipsum dolor sit amet

\n

{{PLACEHOLDER}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" +\n \" Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\" +\n \" nascetur ridiculus mus.\",\n variants: [\"full-width\"],\n },\n {\n id: \"7\",\n name: \"figure\",\n type: \"contextual\",\n imageClass: \"c4l-figure-icon\",\n code:\n `

\"Lorem\n {{VARIANTSHTML}}


`,\n text: \"Consectetur adipiscing elit.\",\n variants: [\"full-width\", \"caption\"],\n },\n {\n id: \"8\",\n name: \"tag\",\n type: \"contextual\",\n imageClass: \"c4l-tag-icon\",\n code:\n `

\n
{{PLACEHOLDER}}
`,\n text: \"Lorem ipsum\",\n variants: [\"align-right\"],\n },\n {\n id: \"9\",\n name: \"inlinetag\",\n type: \"contextual\",\n imageClass: \"c4l-inlinetag-icon\",\n code: `{{PLACEHOLDER}}`,\n text: \"Text\",\n variants: [],\n },\n {\n id: \"10\",\n name: \"attention\",\n type: \"procedural\",\n imageClass: \"c4l-attention-icon\",\n code:\n `

\n \"{{PLACEHOLDER}}


`,\n text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n variants: [\"full-width\"],\n },\n {\n id: \"11\",\n name: \"estimatedtime\",\n type: \"procedural\",\n imageClass: \"c4l-estimatedtime-icon\",\n code:\n `

{{PLACEHOLDER}} {{#min}}
`,\n text: \"15\",\n variants: [\"align-left\"],\n },\n {\n id: \"12\",\n name: \"duedate\",\n type: \"procedural\",\n imageClass: \"c4l-duedate-icon\",\n code:\n `

{{PLACEHOLDER}}
`,\n text: \"November 17th\",\n variants: [\"align-left\"],\n },\n {\n id: \"13\",\n name: \"proceduralcontext\",\n type: \"procedural\",\n imageClass: \"c4l-proceduralcontext-icon\",\n code:\n `

\n {{PLACEHOLDER}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\" +\n \" Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis lorem aliquet,\" +\n \" fermentum dolor ac, venenatis turpis.\",\n variants: [\"full-width\"],\n },\n {\n id: \"14\",\n name: \"learningoutcomes\",\n type: \"procedural\",\n imageClass: \"c4l-learningoutcomes-icon\",\n code:\n `

\n
\n
{{#learningoutcomes}}
\n
  • {{PLACEHOLDER}}
  • Curabitur non nulla sit amet\n nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
    • \n
  • Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. \n Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, \" +\n \"enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.\",\n variants: [\"full-width\", \"ordered-list\"],\n },\n {\n id: \"15\",\n name: \"gradingvalue\",\n type: \"evaluative\",\n imageClass: \"c4l-gradingvalue-icon\",\n code:\n `

{{#gradingvalue}}: {{PLACEHOLDER}}
`,\n text: \"33.3%\",\n variants: [\"align-left\"],\n },\n {\n id: \"16\",\n name: \"expectedfeedback\",\n type: \"evaluative\",\n imageClass: \"c4l-expectedfeedback-icon\",\n code:\n `

\n

{{PLACEHOLDER}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\",\n variants: [\"full-width\"],\n },\n {\n id: \"17\",\n name: \"allpurposecard\",\n type: \"helper\",\n imageClass: \"c4l-allpurposecard-icon\",\n code:\n `

{{PLACEHOLDER}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\" +\n \" Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\",\n variants: [\"full-width\"],\n },\n];\n\nexport default {\n components,\n};\n"],"names":["components","id","name","type","imageClass","code","text","variants"],"mappings":"0JA2Qe,CACXA,WArPe,CACf,CACIC,GAAI,IACJC,KAAM,aACNC,KAAM,aACNC,WAAY,sBACZC,KACI,oIAEJC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,KACK,oIAELC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,WACNC,KAAM,aACNC,WAAY,oBACZC,KACK,4JAGLC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,QACNC,KAAM,aACNC,WAAY,iBACZC,KACK,0UAOLC,KACI,4IAEJC,SAAU,CAAC,aAAc,UAE7B,CACIN,GAAI,IACJC,KAAM,cACNC,KAAM,aACNC,WAAY,uBACZC,KACK,wkBAQLC,KACI,kOAGJC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,iBACNC,KAAM,aACNC,WAAY,0BACZC,KACK,8LAGLC,KACI,iNAGJC,SAAU,CAAC,aAAc,QAAS,oBAEtC,CACIN,GAAI,IACJC,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,KACK,oMAGLC,KACI,mOAIJC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,SACNC,KAAM,aACNC,WAAY,kBACZC,KACK,2MAGLC,KAAM,+BACNC,SAAU,CAAC,aAAc,YAE7B,CACIN,GAAI,IACJC,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,KACK,6JAELC,KAAM,cACNC,SAAU,CAAC,gBAEf,CACIN,GAAI,IACJC,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,KAAO,+FACPC,KAAM,OACNC,SAAU,IAEd,CACIN,GAAI,KACJC,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,KACK,iJAELC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,gBACNC,KAAM,aACNC,WAAY,yBACZC,KACK,sMAELC,KAAM,KACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,KACK,oKAELC,KAAM,gBACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,oBACNC,KAAM,aACNC,WAAY,6BACZC,KACK,0KAGLC,KACI,mSAIJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,KACK,yoBAOLC,KACI,uKAEJC,SAAU,CAAC,aAAc,iBAE7B,CACIN,GAAI,KACJC,KAAM,eACNC,KAAM,aACNC,WAAY,wBACZC,KACK,+MAELC,KAAM,QACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,KACK,kLAGLC,KACI,4IAEJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,iBACNC,KAAM,SACNC,WAAY,0BACZC,KACK,gKAELC,KACI,mOAGJC,SAAU,CAAC"} \ No newline at end of file +{"version":3,"file":"components.min.js","sources":["../src/components.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 * Tiny C4L components.\n *\n * @module tiny_c4l/components\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst components = [\n {\n id: \"0\",\n name: \"keyconcept\",\n type: \"contextual\",\n imageClass: \"c4l-keyconcept-icon\",\n code:\n '

' +\n \"{{PLACEHOLDER}}


\",\n text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n variants: [\"full-width\"],\n },\n {\n id: \"1\",\n name: \"tip\",\n type: \"contextual\",\n imageClass: \"c4l-tip-icon\",\n code:\n `

\n {{PLACEHOLDER}}


`,\n text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n variants: [\"full-width\"],\n },\n {\n id: \"2\",\n name: \"reminder\",\n type: \"contextual\",\n imageClass: \"c4l-reminder-icon\",\n code:\n `

\n {{PLACEHOLDER}}


`,\n text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n variants: [\"full-width\"],\n },\n {\n id: \"3\",\n name: \"quote\",\n type: \"contextual\",\n imageClass: \"c4l-quote-icon\",\n code:\n `

\n
\n

{{PLACEHOLDER}}

\n
\n {{VARIANTSHTML}}\n


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\",\n variants: [\"full-width\", \"quote\"],\n },\n {\n id: \"4\",\n name: \"dodontcards\",\n type: \"contextual\",\n imageClass: \"c4l-dodontcards-icon\",\n code:\n `

\n
{{PLACEHOLDER}}
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Phasellus a posuere nibh, eu mollis lacus.\n Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\n nascetur ridiculus mus.


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\" +\n \"Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\",\n variants: [\"full-width\"],\n },\n {\n id: \"5\",\n name: \"readingcontext\",\n type: \"contextual\",\n imageClass: \"c4l-readingcontext-icon\",\n code:\n `

\n

{{PLACEHOLDER}}

{{VARIANTSHTML}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae,\" +\n \" posuere egestas nisi. Lorem ipsum dolor sit amet. \" +\n \"Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.\",\n variants: [\"full-width\", \"quote\", \"comfort-reading\"],\n },\n {\n id: \"6\",\n name: \"example\",\n type: \"contextual\",\n imageClass: \"c4l-example-icon\",\n code:\n `

Lorem ipsum dolor sit amet

\n

{{PLACEHOLDER}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" +\n \" Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\" +\n \" nascetur ridiculus mus.\",\n variants: [\"full-width\"],\n },\n {\n id: \"7\",\n name: \"figure\",\n type: \"contextual\",\n imageClass: \"c4l-figure-icon\",\n code:\n `

\"Lorem\n {{VARIANTSHTML}}


`,\n text: \"Consectetur adipiscing elit.\",\n variants: [\"full-width\", \"caption\"],\n },\n {\n id: \"8\",\n name: \"tag\",\n type: \"contextual\",\n imageClass: \"c4l-tag-icon\",\n code:\n `

\n
{{PLACEHOLDER}}
`,\n text: \"Lorem ipsum\",\n variants: [\"align-right\"],\n },\n {\n id: \"9\",\n name: \"inlinetag\",\n type: \"contextual\",\n imageClass: \"c4l-inlinetag-icon\",\n code: `{{PLACEHOLDER}}`,\n text: \"Text\",\n variants: [],\n },\n {\n id: \"10\",\n name: \"attention\",\n type: \"procedural\",\n imageClass: \"c4l-attention-icon\",\n code:\n `

\n \"{{PLACEHOLDER}}


`,\n text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n variants: [\"full-width\"],\n },\n {\n id: \"11\",\n name: \"estimatedtime\",\n type: \"procedural\",\n imageClass: \"c4l-estimatedtime-icon\",\n code:\n `

{{PLACEHOLDER}} {{#min}}
`,\n text: \"15\",\n variants: [\"align-left\"],\n },\n {\n id: \"12\",\n name: \"duedate\",\n type: \"procedural\",\n imageClass: \"c4l-duedate-icon\",\n code:\n `

{{PLACEHOLDER}}
`,\n text: \"November 17th\",\n variants: [\"align-left\"],\n },\n {\n id: \"13\",\n name: \"proceduralcontext\",\n type: \"procedural\",\n imageClass: \"c4l-proceduralcontext-icon\",\n code:\n `

\n {{PLACEHOLDER}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\" +\n \" Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis lorem aliquet,\" +\n \" fermentum dolor ac, venenatis turpis.\",\n variants: [\"full-width\"],\n },\n {\n id: \"14\",\n name: \"learningoutcomes\",\n type: \"procedural\",\n imageClass: \"c4l-learningoutcomes-icon\",\n code:\n `

\n
\n
{{#learningoutcomes}}
\n
  • {{PLACEHOLDER}}
  • Curabitur non nulla sit amet\n nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
    • \n
  • Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.\n Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, \" +\n \"enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.\",\n variants: [\"full-width\", \"ordered-list\"],\n },\n {\n id: \"15\",\n name: \"gradingvalue\",\n type: \"evaluative\",\n imageClass: \"c4l-gradingvalue-icon\",\n code:\n `

{{#gradingvalue}}: {{PLACEHOLDER}}
`,\n text: \"33.3%\",\n variants: [\"align-left\"],\n },\n {\n id: \"16\",\n name: \"expectedfeedback\",\n type: \"evaluative\",\n imageClass: \"c4l-expectedfeedback-icon\",\n code:\n `

\n

{{PLACEHOLDER}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\",\n variants: [\"full-width\"],\n },\n {\n id: \"17\",\n name: \"allpurposecard\",\n type: \"helper\",\n imageClass: \"c4l-allpurposecard-icon\",\n code:\n `

{{PLACEHOLDER}}


`,\n text:\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n \" Praesent dictum in velit sed dapibus.\" +\n \" Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\",\n variants: [\"full-width\"],\n },\n];\n\nexport default {\n components,\n};\n"],"names":["components","id","name","type","imageClass","code","text","variants","_exports","default"],"mappings":";;;;;;;;AAuBA,MAAMA,WAAa,CACf,CACIC,GAAI,IACJC,KAAM,aACNC,KAAM,aACNC,WAAY,sBACZC,KACI,oIAEJC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,KACK,oIAELC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,WACNC,KAAM,aACNC,WAAY,oBACZC,KACK,4JAGLC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,QACNC,KAAM,aACNC,WAAY,iBACZC,KACK,0UAOLC,KACI,4IAEJC,SAAU,CAAC,aAAc,UAE7B,CACIN,GAAI,IACJC,KAAM,cACNC,KAAM,aACNC,WAAY,uBACZC,KACK,wkBAQLC,KACI,kOAGJC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,iBACNC,KAAM,aACNC,WAAY,0BACZC,KACK,8LAGLC,KACI,iNAGJC,SAAU,CAAC,aAAc,QAAS,oBAEtC,CACIN,GAAI,IACJC,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,KACK,oMAGLC,KACI,mOAIJC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,SACNC,KAAM,aACNC,WAAY,kBACZC,KACK,2MAGLC,KAAM,+BACNC,SAAU,CAAC,aAAc,YAE7B,CACIN,GAAI,IACJC,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,KACK,6JAELC,KAAM,cACNC,SAAU,CAAC,gBAEf,CACIN,GAAI,IACJC,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,KAAO,+FACPC,KAAM,OACNC,SAAU,IAEd,CACIN,GAAI,KACJC,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,KACK,iJAELC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,gBACNC,KAAM,aACNC,WAAY,yBACZC,KACK,sMAELC,KAAM,KACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,KACK,oKAELC,KAAM,gBACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,oBACNC,KAAM,aACNC,WAAY,6BACZC,KACK,0KAGLC,KACI,mSAIJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,KACK,yoBAOLC,KACI,uKAEJC,SAAU,CAAC,aAAc,iBAE7B,CACIN,GAAI,KACJC,KAAM,eACNC,KAAM,aACNC,WAAY,wBACZC,KACK,+MAELC,KAAM,QACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,KACK,kLAGLC,KACI,4IAEJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,iBACNC,KAAM,SACNC,WAAY,0BACZC,KACK,gKAELC,KACI,mOAGJC,SAAU,CAAC,gBAEjBC,SAAAC,QAEa,CACXT,uBACH,OAAAQ,SAAAC,OAAA"} \ No newline at end of file diff --git a/amd/build/modal.min.js b/amd/build/modal.min.js index d33f2bf..7b96d5c 100644 --- a/amd/build/modal.min.js +++ b/amd/build/modal.min.js @@ -1,10 +1,10 @@ -define("tiny_c4l/modal",["exports","core/modal","core/modal_registry"],(function(_exports,_modal,_modal_registry){var _class;function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return(key=function(arg){var key=function(input,hint){if("object"!=typeof input||null===input)return input;var prim=input[Symbol.toPrimitive];if(void 0!==prim){var res=prim.call(input,hint||"default");if("object"!=typeof res)return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)} +define("tiny_c4l/modal",["exports","core/modal","core/modal_registry"],(function(_exports,_modal,_modal_registry){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}} /** - * C4L Modal for Tiny. - * - * @module tiny_c4l/modal - * @copyright 2022 Marc Català - * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */(arg,"string");return"symbol"==typeof key?key:String(key)}(key))in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_modal=_interopRequireDefault(_modal),_modal_registry=_interopRequireDefault(_modal_registry);const C4LModal=(_defineProperty(_class=class extends _modal.default{registerEventListeners(){super.registerEventListeners()}},"TYPE","tiny_c4l/modal"),_defineProperty(_class,"TEMPLATE","tiny_c4l/modal"),_class);_modal_registry.default.register(C4LModal.TYPE,C4LModal,C4LModal.TEMPLATE);var _default=C4LModal;return _exports.default=_default,_exports.default})); + * C4L Modal for Tiny. + * + * @module tiny_c4l/modal + * @copyright 2022 Marc Català + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_modal=_interopRequireDefault(_modal),_modal_registry=_interopRequireDefault(_modal_registry);const C4LModal=class extends _modal.default{static TYPE="tiny_c4l/modal";static TEMPLATE="tiny_c4l/modal";registerEventListeners(){super.registerEventListeners()}};_modal_registry.default.register(C4LModal.TYPE,C4LModal,C4LModal.TEMPLATE);_exports.default=C4LModal;return _exports.default})); //# sourceMappingURL=modal.min.js.map \ No newline at end of file diff --git a/amd/build/modal.min.js.map b/amd/build/modal.min.js.map index d8d5587..583ecf8 100644 --- a/amd/build/modal.min.js.map +++ b/amd/build/modal.min.js.map @@ -1 +1 @@ -{"version":3,"file":"modal.min.js","sources":["../src/modal.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 * C4L Modal for Tiny.\n *\n * @module tiny_c4l/modal\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Modal from 'core/modal';\nimport ModalRegistry from 'core/modal_registry';\n\nconst C4LModal = class extends Modal {\n static TYPE = 'tiny_c4l/modal';\n static TEMPLATE = 'tiny_c4l/modal';\n\n registerEventListeners() {\n // Call the parent registration.\n super.registerEventListeners();\n }\n};\n\nModalRegistry.register(C4LModal.TYPE, C4LModal, C4LModal.TEMPLATE);\n\nexport default C4LModal;\n"],"names":["_class","_interopRequireDefault","obj","__esModule","default","_defineProperty","key","value","arg","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","String","Number","_toPrimitive","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","_modal","_modal_registry","C4LModal","Modal","registerEventListeners","super","ModalRegistry","register","TYPE","TEMPLATE","_default","_exports"],"mappings":"kHAwBgD,IAAAA,OAAA,SAAAC,uBAAAC,KAAAA,OAAAA,KAAAA,IAAAC,WAAAD,IAAAE,CAAAA,QAAAF,IAAA,CAAA,SAAAG,gBAAAH,IAAAI,IAAAC,cAAAD,IAAA,SAAAE,KAAAF,IAAAA,IAAA,SAAAG,MAAAC,SAAA,iBAAAD,OAAAA,OAAAA,MAAAA,OAAAA,UAAAE,KAAAF,MAAAG,OAAAC,aAAA,QAAAC,IAAAH,KAAA,CAAA,IAAAI,IAAAJ,KAAAK,KAAAP,MAAAC,oBAAA,iBAAAK,IAAA,OAAAA,IAAAE,MAAAA,IAAAA,iEAAA,WAAAP,KAAAQ,OAAAC,QAAAV,MAThD;;;;;;;+XASgDW,CAAAZ,IAAA,UAAA,MAAAF,iBAAAA,IAAAA,IAAAY,OAAAZ,IAAA,CAAAe,CAAAf,QAAAJ,IAAAoB,OAAAC,eAAArB,IAAAI,IAAA,CAAAC,MAAAA,MAAAiB,YAAA,EAAAC,cAAAC,EAAAA,cAAAxB,IAAAI,KAAAC,MAAAL,GAAA,iFADhDyB,OAAA1B,uBAAA0B,QACAC,gBAAA3B,uBAAA2B,iBAEA,MAAMC,UAQLxB,gBARaL,OAAG,cAAc8B,eAI3BC,sBAAAA,GAEIC,MAAMD,wBACV,UANc,kBAAgB1B,gBAAAL,OAAA,WACZ,kBAAgBA,QAQtCiC,gBAAAA,QAAcC,SAASL,SAASM,KAAMN,SAAUA,SAASO,UAAU,IAAAC,SAEpDR,SAAQ,OAAAS,SAAAlC,QAAAiC,SAAAC,SAAAlC,OAAA"} \ No newline at end of file +{"version":3,"file":"modal.min.js","sources":["../src/modal.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 * C4L Modal for Tiny.\n *\n * @module tiny_c4l/modal\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Modal from 'core/modal';\nimport ModalRegistry from 'core/modal_registry';\n\nconst C4LModal = class extends Modal {\n static TYPE = 'tiny_c4l/modal';\n static TEMPLATE = 'tiny_c4l/modal';\n\n registerEventListeners() {\n // Call the parent registration.\n super.registerEventListeners();\n }\n};\n\nModalRegistry.register(C4LModal.TYPE, C4LModal, C4LModal.TEMPLATE);\n\nexport default C4LModal;\n"],"names":["_interopRequireDefault","obj","__esModule","default","_modal","_modal_registry","C4LModal","Modal","static","registerEventListeners","super","ModalRegistry","register","TYPE","TEMPLATE","_exports"],"mappings":"kHAwBgD,SAAAA,uBAAAC,KAAAA,OAAAA,KAAAA,IAAAC,WAAAD,IAAAE,CAAAA,QAAAF,IAAA;;;;;;;qFADhDG,OAAAJ,uBAAAI,QACAC,gBAAAL,uBAAAK,iBAEA,MAAMC,SAAW,cAAcC,OAAAA,QAC3BC,YAAc,iBACdA,gBAAkB,iBAElBC,sBAAAA,GAEIC,MAAMD,wBACV,GAGJE,gBAAAA,QAAcC,SAASN,SAASO,KAAMP,SAAUA,SAASQ,UAAUC,SAAAZ,QAEpDG,SAAQ,OAAAS,SAAAZ,OAAA"} \ No newline at end of file diff --git a/amd/build/options.min.js b/amd/build/options.min.js index d22cf98..855f34b 100644 --- a/amd/build/options.min.js +++ b/amd/build/options.min.js @@ -1,4 +1,4 @@ -define("tiny_c4l/options",["exports","editor_tiny/options","./common"],(function(_exports,_options,_common){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.showPreview=_exports.register=_exports.isStudent=_exports.isC4LVisible=_exports.getallowedComponents=void 0; +define("tiny_c4l/options",["exports","editor_tiny/options","./common"],(function(_exports,_options,_common){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.showPreview=_exports.register=_exports.isStudent=_exports.isC4LVisible=_exports.getpreviewCSS=_exports.getcustomComponents=_exports.getallowedComponents=void 0; /** * Options helper for C4L plugin. * @@ -6,6 +6,6 @@ define("tiny_c4l/options",["exports","editor_tiny/options","./common"],(function * @copyright 2022 Marc Català * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -const isstudentName=(0,_options.getPluginOptionName)(_common.pluginName,"isstudent"),allowedcompsName=(0,_options.getPluginOptionName)(_common.pluginName,"allowedcomps"),showpreviewName=(0,_options.getPluginOptionName)(_common.pluginName,"showpreview"),viewc4lName=(0,_options.getPluginOptionName)(_common.pluginName,"viewc4l");_exports.register=editor=>{const registerOption=editor.options.register;registerOption(allowedcompsName,{processor:"array",default:[]}),registerOption(isstudentName,{processor:"boolean",default:!1}),registerOption(showpreviewName,{processor:"boolean",default:!0}),registerOption(viewc4lName,{processor:"boolean",default:!0})};_exports.isC4LVisible=editor=>editor.options.get(viewc4lName);_exports.isStudent=editor=>editor.options.get(isstudentName);_exports.showPreview=editor=>editor.options.get(showpreviewName);_exports.getallowedComponents=editor=>editor.options.get(allowedcompsName)})); +const isstudentName=(0,_options.getPluginOptionName)(_common.pluginName,"isstudent"),allowedcompsName=(0,_options.getPluginOptionName)(_common.pluginName,"allowedcomps"),showpreviewName=(0,_options.getPluginOptionName)(_common.pluginName,"showpreview"),viewc4lName=(0,_options.getPluginOptionName)(_common.pluginName,"viewc4l"),previewCSS=(0,_options.getPluginOptionName)(_common.pluginName,"previewcss"),customComps=(0,_options.getPluginOptionName)(_common.pluginName,"customcomps");_exports.register=editor=>{const registerOption=editor.options.register;registerOption(allowedcompsName,{processor:"array",default:[]}),registerOption(isstudentName,{processor:"boolean",default:!1}),registerOption(showpreviewName,{processor:"boolean",default:!0}),registerOption(viewc4lName,{processor:"boolean",default:!0}),registerOption(previewCSS,{processor:"string",default:""}),registerOption(customComps,{processor:"array",default:[]})};_exports.isC4LVisible=editor=>editor.options.get(viewc4lName);_exports.isStudent=editor=>editor.options.get(isstudentName);_exports.showPreview=editor=>editor.options.get(showpreviewName);_exports.getallowedComponents=editor=>editor.options.get(allowedcompsName);_exports.getcustomComponents=editor=>editor.options.get(customComps);_exports.getpreviewCSS=editor=>editor.options.get(previewCSS)})); //# sourceMappingURL=options.min.js.map \ No newline at end of file diff --git a/amd/build/options.min.js.map b/amd/build/options.min.js.map index 91b1925..1230cf2 100644 --- a/amd/build/options.min.js.map +++ b/amd/build/options.min.js.map @@ -1 +1 @@ -{"version":3,"file":"options.min.js","sources":["../src/options.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 * Options helper for C4L plugin.\n *\n * @module tiny_c4l/options\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {getPluginOptionName} from 'editor_tiny/options';\nimport {pluginName} from './common';\n\nconst isstudentName = getPluginOptionName(pluginName, 'isstudent');\nconst allowedcompsName = getPluginOptionName(pluginName, 'allowedcomps');\nconst showpreviewName = getPluginOptionName(pluginName, 'showpreview');\nconst viewc4lName = getPluginOptionName(pluginName, 'viewc4l');\n\nexport const register = (editor) => {\n const registerOption = editor.options.register;\n\n registerOption(allowedcompsName, {\n processor: 'array',\n \"default\": [],\n });\n\n registerOption(isstudentName, {\n processor: 'boolean',\n \"default\": false,\n });\n\n registerOption(showpreviewName, {\n processor: 'boolean',\n \"default\": true,\n });\n\n registerOption(viewc4lName, {\n processor: 'boolean',\n \"default\": true,\n });\n};\n\n/**\n * Get the permissions configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const isC4LVisible = (editor) => editor.options.get(viewc4lName);\n\n/**\n * Get whether user is a student configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const isStudent = (editor) => editor.options.get(isstudentName);\n\n/**\n * Get the preview visibility configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const showPreview = (editor) => editor.options.get(showpreviewName);\n\n/**\n * Get components allowed at students configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const getallowedComponents = (editor) => editor.options.get(allowedcompsName);\n"],"names":["isstudentName","getPluginOptionName","pluginName","allowedcompsName","showpreviewName","viewc4lName","_exports","register","editor","registerOption","options","processor","default","isC4LVisible","get","isStudent","showPreview","getallowedComponents"],"mappings":";;;;;;;;AA0BA,MAAMA,eAAgB,EAAAC,SAAAA,qBAAoBC,QAAUA,WAAE,aAChDC,kBAAmB,EAAAF,SAAAA,qBAAoBC,QAAUA,WAAE,gBACnDE,iBAAkB,EAAAH,SAAAA,qBAAoBC,QAAUA,WAAE,eAClDG,aAAc,EAAAJ,SAAAA,qBAAoBC,QAAUA,WAAE,WAwBlDI,SAAAC,SAtBuBC,SACrB,MAAMC,eAAiBD,OAAOE,QAAQH,SAEtCE,eAAeN,iBAAkB,CAC7BQ,UAAW,QACXC,QAAW,KAGfH,eAAeT,cAAe,CAC1BW,UAAW,UACXC,SAAY,IAGhBH,eAAeL,gBAAiB,CAC5BO,UAAW,UACXC,SAAY,IAGhBH,eAAeJ,YAAa,CACxBM,UAAW,UACXC,SAAY,GACd,EASkEN,SAAAO,aAA3CL,QAAWA,OAAOE,QAAQI,IAAIT,aAQYC,SAAAS,UAA7CP,QAAWA,OAAOE,QAAQI,IAAId,eAQmBM,SAAAU,YAA/CR,QAAWA,OAAOE,QAAQI,IAAIV,iBAQ2BE,SAAAW,qBAAhDT,QAAWA,OAAOE,QAAQI,IAAIX,iBAAkB"} \ No newline at end of file +{"version":3,"file":"options.min.js","sources":["../src/options.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 * Options helper for C4L plugin.\n *\n * @module tiny_c4l/options\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {getPluginOptionName} from 'editor_tiny/options';\nimport {pluginName} from './common';\n\nconst isstudentName = getPluginOptionName(pluginName, 'isstudent');\nconst allowedcompsName = getPluginOptionName(pluginName, 'allowedcomps');\nconst showpreviewName = getPluginOptionName(pluginName, 'showpreview');\nconst viewc4lName = getPluginOptionName(pluginName, 'viewc4l');\nconst previewCSS = getPluginOptionName(pluginName, 'previewcss');\nconst customComps = getPluginOptionName(pluginName, 'customcomps');\n\nexport const register = (editor) => {\n const registerOption = editor.options.register;\n\n registerOption(allowedcompsName, {\n processor: 'array',\n \"default\": [],\n });\n\n registerOption(isstudentName, {\n processor: 'boolean',\n \"default\": false,\n });\n\n registerOption(showpreviewName, {\n processor: 'boolean',\n \"default\": true,\n });\n\n registerOption(viewc4lName, {\n processor: 'boolean',\n \"default\": true,\n });\n\n registerOption(previewCSS, {\n processor: 'string',\n \"default\": '',\n });\n\n registerOption(customComps, {\n processor: 'array',\n \"default\": [],\n });\n};\n\n/**\n * Get the permissions configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const isC4LVisible = (editor) => editor.options.get(viewc4lName);\n\n/**\n * Get whether user is a student configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const isStudent = (editor) => editor.options.get(isstudentName);\n\n/**\n * Get the preview visibility configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const showPreview = (editor) => editor.options.get(showpreviewName);\n\n/**\n * Get components allowed at students configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const getallowedComponents = (editor) => editor.options.get(allowedcompsName);\n\n/**\n * Get custom components configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {object}\n */\nexport const getcustomComponents = (editor) => editor.options.get(customComps);\n\n/**\n * Get custom preview CSS configuration for the Tiny C4L plugin.\n *\n * @param {TinyMCE} editor\n * @returns {string}\n */\nexport const getpreviewCSS = (editor) => editor.options.get(previewCSS);\n"],"names":["isstudentName","getPluginOptionName","pluginName","allowedcompsName","showpreviewName","viewc4lName","previewCSS","customComps","_exports","register","editor","registerOption","options","processor","default","isC4LVisible","get","isStudent","showPreview","getallowedComponents","getcustomComponents","getpreviewCSS"],"mappings":";;;;;;;;AA0BA,MAAMA,eAAgB,EAAAC,SAAAA,qBAAoBC,QAAUA,WAAE,aAChDC,kBAAmB,EAAAF,SAAAA,qBAAoBC,QAAUA,WAAE,gBACnDE,iBAAkB,EAAAH,SAAAA,qBAAoBC,QAAUA,WAAE,eAClDG,aAAc,EAAAJ,SAAAA,qBAAoBC,QAAUA,WAAE,WAC9CI,YAAa,EAAAL,SAAAA,qBAAoBC,QAAUA,WAAE,cAC7CK,aAAc,EAAAN,SAAAA,qBAAoBC,QAAUA,WAAE,eAkClDM,SAAAC,SAhCuBC,SACrB,MAAMC,eAAiBD,OAAOE,QAAQH,SAEtCE,eAAeR,iBAAkB,CAC7BU,UAAW,QACXC,QAAW,KAGfH,eAAeX,cAAe,CAC1Ba,UAAW,UACXC,SAAY,IAGhBH,eAAeP,gBAAiB,CAC5BS,UAAW,UACXC,SAAY,IAGhBH,eAAeN,YAAa,CACxBQ,UAAW,UACXC,SAAY,IAGhBH,eAAeL,WAAY,CACvBO,UAAW,SACXC,QAAW,KAGfH,eAAeJ,YAAa,CACxBM,UAAW,QACXC,QAAW,IACb,EASkEN,SAAAO,aAA3CL,QAAWA,OAAOE,QAAQI,IAAIX,aAQYG,SAAAS,UAA7CP,QAAWA,OAAOE,QAAQI,IAAIhB,eAQmBQ,SAAAU,YAA/CR,QAAWA,OAAOE,QAAQI,IAAIZ,iBAQ2BI,SAAAW,qBAAhDT,QAAWA,OAAOE,QAAQI,IAAIb,kBAQYK,SAAAY,oBAA3CV,QAAWA,OAAOE,QAAQI,IAAIT,aAQMC,SAAAa,cAA1CX,QAAWA,OAAOE,QAAQI,IAAIV,WAAY"} \ No newline at end of file diff --git a/amd/build/plugin.min.js b/amd/build/plugin.min.js index ba4cb1d..290c7e4 100644 --- a/amd/build/plugin.min.js +++ b/amd/build/plugin.min.js @@ -1,10 +1,10 @@ -define("tiny_c4l/plugin",["exports","editor_tiny/loader","editor_tiny/utils","./common","./options","./commands","./configuration"],(function(_exports,_loader,_utils,_common,_options,_commands,Configuration){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Configuration=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj} +define("tiny_c4l/plugin",["exports","editor_tiny/loader","editor_tiny/utils","./common","./options","./commands","./configuration"],(function(_exports,_loader,_utils,_common,_options,_commands,Configuration){function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap,t=new WeakMap;return(_getRequireWildcardCache=function(e){return e?t:r})(e)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Configuration=function(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u]}return n.default=e,t&&t.set(e,n),n /** * Tiny C4L plugin. * * @module tiny_c4l/plugin * @copyright 2022 Marc Català * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */(Configuration);var _default=new Promise((async resolve=>{const[tinyMCE,pluginMetadata,setupCommands]=await Promise.all([(0,_loader.getTinyMCE)(),(0,_utils.getPluginMetadata)(_common.component,_common.pluginName),(0,_commands.getSetup)()]);tinyMCE.PluginManager.add(_common.pluginName,(editor=>((0,_options.register)(editor),setupCommands(editor),pluginMetadata))),resolve([_common.pluginName,Configuration])}));return _exports.default=_default,_exports.default})); + */}(Configuration);_exports.default=new Promise((async resolve=>{const[tinyMCE,pluginMetadata,setupCommands]=await Promise.all([(0,_loader.getTinyMCE)(),(0,_utils.getPluginMetadata)(_common.component,_common.pluginName),(0,_commands.getSetup)()]);tinyMCE.PluginManager.add(_common.pluginName,(editor=>((0,_options.register)(editor),setupCommands(editor),pluginMetadata))),resolve([_common.pluginName,Configuration])}));return _exports.default})); //# sourceMappingURL=plugin.min.js.map \ No newline at end of file diff --git a/amd/build/plugin.min.js.map b/amd/build/plugin.min.js.map index fb94d85..b087ba4 100644 --- a/amd/build/plugin.min.js.map +++ b/amd/build/plugin.min.js.map @@ -1 +1 @@ -{"version":3,"file":"plugin.min.js","sources":["../src/plugin.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 * Tiny C4L plugin.\n *\n * @module tiny_c4l/plugin\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {getTinyMCE} from 'editor_tiny/loader';\nimport {getPluginMetadata} from 'editor_tiny/utils';\n\nimport {component, pluginName} from './common';\nimport {register as registerOptions} from './options';\nimport {getSetup as getCommandSetup} from './commands';\nimport * as Configuration from './configuration';\n\n// Setup the tiny_c4l Plugin.\nexport default new Promise(async(resolve) => {\n const [\n tinyMCE,\n pluginMetadata,\n setupCommands,\n ] = await Promise.all([\n getTinyMCE(),\n getPluginMetadata(component, pluginName),\n getCommandSetup(),\n ]);\n\n tinyMCE.PluginManager.add(pluginName, (editor) => {\n // Register options.\n registerOptions(editor);\n\n // Setup commands.\n setupCommands(editor);\n\n return pluginMetadata;\n });\n\n // Resolve the C4L Plugin and include configuration.\n resolve([pluginName, Configuration]);\n});\n"],"names":["_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","Configuration","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_interopRequireWildcard","_default","Promise","async","tinyMCE","pluginMetadata","setupCommands","all","getTinyMCE","getPluginMetadata","component","pluginName","getCommandSetup","PluginManager","add","editor","registerOptions","resolve","_exports"],"mappings":"gNA6BiD,SAAAA,yBAAAC,aAAA,GAAA,mBAAAC,QAAA,OAAA,KAAA,IAAAC,kBAAAD,IAAAA,QAAAE,iBAAAF,IAAAA,eAAAF,yBAAA,SAAAC,aAAAA,OAAAA,YAAAG,iBAAAD,oBAAAF,YAAA,iFAAjDI,cAAiD,SAAAC,IAAAL,aAAAA,IAAAA,aAAAK,KAAAA,IAAAC,WAAAD,OAAAA,IAAAA,GAAAA,OAAAA,KAAAA,iBAAAA,KAAAE,mBAAAF,IAAAE,MAAAA,CAAAA,QAAAF,KAAAG,IAAAA,MAAAT,yBAAAC,aAAA,GAAAQ,OAAAA,MAAAC,IAAAJ,KAAA,OAAAG,MAAAE,IAAAL,KAAA,IAAAM,OAAAC,GAAAA,sBAAAC,OAAAC,gBAAAD,OAAAE,yBAAAC,IAAAA,IAAAA,OAAAX,IAAAW,eAAAA,KAAAH,OAAAI,UAAAC,eAAAC,KAAAd,IAAAW,KAAA,CAAA,IAAAI,KAAAR,sBAAAC,OAAAE,yBAAAV,IAAAW,KAAAI,KAAAA,OAAAA,KAAAV,KAAAU,KAAAC,KAAAR,OAAAC,eAAAH,OAAAK,IAAAI,MAAAT,OAAAK,KAAAX,IAAAW,IAAAL,CAAAA,OAAAJ,QAAAF,IAAAG,OAAAA,MAAAa,IAAAhB,IAAAM,eAAAA,MAAA;;;;;;;KAAjDW,CAAAlB,eAdA,IAAAmB,SAiBe,IAAIC,SAAQC,gBACvB,MACIC,QACAC,eACAC,qBACMJ,QAAQK,IAAI,EAClB,EAAAC,QAAAA,eACA,EAAAC,OAAiBA,mBAACC,kBAAWC,QAAAA,aAC7B,EAAAC,UAAAA,cAGJR,QAAQS,cAAcC,IAAIH,QAAUA,YAAGI,UAEnC,EAAAC,SAAAA,UAAgBD,QAGhBT,cAAcS,QAEPV,kBAIXY,QAAQ,CAACN,QAAAA,WAAY7B,eAAe,IACtC,OAAAoC,SAAAjC,QAAAgB,SAAAiB,SAAAjC,OAAA"} \ No newline at end of file +{"version":3,"file":"plugin.min.js","sources":["../src/plugin.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 * Tiny C4L plugin.\n *\n * @module tiny_c4l/plugin\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {getTinyMCE} from 'editor_tiny/loader';\nimport {getPluginMetadata} from 'editor_tiny/utils';\n\nimport {component, pluginName} from './common';\nimport {register as registerOptions} from './options';\nimport {getSetup as getCommandSetup} from './commands';\nimport * as Configuration from './configuration';\n\n// eslint-disable-next-line no-async-promise-executor\nexport default new Promise(async(resolve) => {\n const [\n tinyMCE,\n pluginMetadata,\n setupCommands,\n ] = await Promise.all([\n getTinyMCE(),\n getPluginMetadata(component, pluginName),\n getCommandSetup(),\n ]);\n\n tinyMCE.PluginManager.add(pluginName, (editor) => {\n // Register options.\n registerOptions(editor);\n\n // Setup commands.\n setupCommands(editor);\n\n return pluginMetadata;\n });\n\n // Resolve the C4L Plugin and include configuration.\n resolve([pluginName, Configuration]);\n});\n"],"names":["_getRequireWildcardCache","e","WeakMap","r","t","Configuration","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_interopRequireWildcard","_exports","Promise","async","tinyMCE","pluginMetadata","setupCommands","all","getTinyMCE","getPluginMetadata","component","pluginName","getCommandSetup","PluginManager","add","editor","registerOptions","resolve"],"mappings":"gNA6BiD,SAAAA,yBAAAC,GAAA,GAAA,mBAAAC,QAAA,OAAA,KAAA,IAAAC,EAAAD,IAAAA,QAAAE,EAAAF,IAAAA,eAAAF,yBAAA,SAAAC,GAAAA,OAAAA,EAAAG,EAAAD,IAAAF,EAAA,iFAAjDI,cAAiD,SAAAJ,EAAAE,GAAAA,IAAAA,GAAAF,GAAAA,EAAAK,WAAAL,OAAAA,EAAAA,GAAAA,OAAAA,GAAAA,iBAAAA,GAAAA,mBAAAA,EAAAM,MAAAA,CAAAA,QAAAN,GAAAG,IAAAA,EAAAJ,yBAAAG,GAAA,GAAAC,GAAAA,EAAAI,IAAAP,GAAA,OAAAG,EAAAK,IAAAR,GAAA,IAAAS,EAAA,CAAAC,UAAA,MAAAC,EAAAC,OAAAC,gBAAAD,OAAAE,yBAAA,IAAA,IAAAC,KAAAf,EAAAe,GAAAA,YAAAA,GAAAC,CAAAA,EAAAA,eAAAC,KAAAjB,EAAAe,GAAAG,CAAAA,IAAAA,EAAAP,EAAAC,OAAAE,yBAAAd,EAAAe,GAAAG,KAAAA,IAAAA,EAAAV,KAAAU,EAAAC,KAAAP,OAAAC,eAAAJ,EAAAM,EAAAG,GAAAT,EAAAM,GAAAf,EAAAe,GAAAN,OAAAA,EAAAH,QAAAN,EAAAG,GAAAA,EAAAgB,IAAAnB,EAAAS,GAAAA;;;;;;;KAAA,CAAjDW,CAAAhB,eAdAiB,SAAAf,QAiBe,IAAIgB,SAAQC,gBACvB,MACIC,QACAC,eACAC,qBACMJ,QAAQK,IAAI,EAClB,EAAAC,QAAAA,eACA,EAAAC,OAAiBA,mBAACC,kBAAWC,QAAAA,aAC7B,EAAAC,UAAAA,cAGJR,QAAQS,cAAcC,IAAIH,QAAUA,YAAGI,UAEnC,EAAAC,SAAAA,UAAgBD,QAGhBT,cAAcS,QAEPV,kBAIXY,QAAQ,CAACN,QAAAA,WAAY3B,eAAe,IACtC,OAAAiB,SAAAf,OAAA"} \ No newline at end of file diff --git a/amd/build/ui.min.js b/amd/build/ui.min.js index 0d18bb1..58762bd 100644 --- a/amd/build/ui.min.js +++ b/amd/build/ui.min.js @@ -5,6 +5,6 @@ define("tiny_c4l/ui",["exports","./common","./modal","core/modal_factory","./com * @module tiny_c4l/ui * @copyright 2022 Marc Català * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.handleAction=void 0,_modal=_interopRequireDefault(_modal),_modal_factory=_interopRequireDefault(_modal_factory),_modal_events=_interopRequireDefault(_modal_events);let userStudent=!1,previewC4L=!0,allowedComponents=[],Contexts=[],langStrings={};_exports.handleAction=async editor=>{userStudent=(0,_options.isStudent)(editor),previewC4L=(0,_options.showPreview)(editor),langStrings=await getAllStrings(),allowedComponents=(0,_options.getallowedComponents)(editor),(0,_variantslib.loadVariantPreferences)().then((()=>displayDialogue(editor)))};const displayDialogue=async editor=>{const data=Object.assign({},{}),modal=await _modal_factory.default.create({type:_modal.default.TYPE,templateContext:await getTemplateContext(editor,data),large:!0});previewC4L||editor.targetElm.closest("body").classList.add("c4l-modal-no-preview"),modal.show(),modal.getRoot().on(_modal_events.default.hidden,(()=>{handleModalHidden(editor)}));modal.getRoot()[0].querySelectorAll(".c4l-button-filter").forEach((node=>{node.addEventListener("click",(event=>{handleButtonFilterClick(event,modal)}))})),modal.getRoot()[0].querySelector(".c4l-select-filter").addEventListener("change",(event=>{handleSelectFilterChange(event,modal)}));modal.getRoot()[0].querySelectorAll(".c4lt-dialog-button").forEach((node=>{node.addEventListener("click",(event=>{handleButtonClick(event,editor,modal)})),previewC4L&&(node.addEventListener("mouseenter",(event=>{handleButtonMouseEvent(event,modal,!0)})),node.addEventListener("mouseleave",(event=>{handleButtonMouseEvent(event,modal,!1)})))}));modal.getRoot()[0].querySelectorAll(".c4l-button-variant").forEach((node=>{node.addEventListener("click",(event=>{handleVariantClick(event,modal)})),previewC4L&&(node.addEventListener("mouseenter",(event=>{handleVariantMouseEvent(event,modal,!0)})),node.addEventListener("mouseleave",(event=>{handleVariantMouseEvent(event,modal,!1)})))}))},handleSelectFilterChange=(event,modal)=>{const select=event.target.closest("select");if(select){const currentContext=select.value;if(-1!==Contexts.indexOf(currentContext)){modal.getRoot()[0].querySelectorAll(".c4l-buttons-filters button").forEach((node=>node.classList.remove("c4l-button-filter-enabled")));modal.getRoot()[0].querySelector('.c4l-button-filter[data-filter="'+currentContext+'"]').classList.add("c4l-button-filter-enabled"),showContextButtons(modal,currentContext)}}},handleButtonFilterClick=(event,modal)=>{const button=event.target.closest("button"),currentContext=button.dataset.filter;if(-1!==Contexts.indexOf(currentContext)){modal.getRoot()[0].querySelectorAll(".c4l-buttons-filters button").forEach((node=>node.classList.remove("c4l-button-filter-enabled"))),button.classList.add("c4l-button-filter-enabled");modal.getRoot()[0].querySelector(".c4l-select-filter").selectedIndex=Contexts.indexOf(currentContext),showContextButtons(modal,currentContext)}},handleModalHidden=editor=>{editor.targetElm.closest("body").classList.remove("c4l-modal-no-preview"),(0,_variantslib.saveVariantPreferences)()},handleButtonClick=(event,editor,modal)=>{const selectedButton=event.target.closest("button").dataset.id;if(null!==_components.components&&void 0!==_components.components&&_components.components[selectedButton]){const sel=editor.selection.getContent();let componentCode=_components.components[selectedButton].code;const placeholder=sel.length>0?sel:_components.components[selectedButton].text,randomId=generateRandomID(),newNode=document.createElement("span");newNode.dataset.id=randomId,newNode.innerHTML=placeholder,componentCode=componentCode.replace("{{PLACEHOLDER}}",newNode.outerHTML);const variants=(0,_variantslib.getVariantsClass)(_components.components[selectedButton].name);variants.length>0?(componentCode=componentCode.replace("{{VARIANTS}}",variants.join(" ")),componentCode=componentCode.replace("{{VARIANTSHTML}}",(0,_variantslib.getVariantsHtml)(_components.components[selectedButton].name))):(componentCode=componentCode.replace("{{VARIANTS}}",""),componentCode=componentCode.replace("{{VARIANTSHTML}}","")),componentCode=applyRandomID(componentCode),componentCode=applyLangStrings(componentCode),editor.selection.setContent(componentCode);const nodeSel=editor.dom.select('span[data-id="'+randomId+'"]');null!=nodeSel&&nodeSel[0]&&editor.selection.select(nodeSel[0]),modal.destroy(),editor.focus()}},handleButtonMouseEvent=(event,modal,show)=>{const selectedButton=event.target.closest("button").dataset.id,node=modal.getRoot()[0].querySelector('div[data-id="code-preview-'+selectedButton+'"]'),previewDefault=modal.getRoot()[0].querySelector('div[data-id="code-preview-default"]');node&&(show?(previewDefault.classList.toggle("c4l-hidden"),node.classList.toggle("c4l-hidden")):(node.classList.toggle("c4l-hidden"),previewDefault.classList.toggle("c4l-hidden")))},handleVariantMouseEvent=(event,modal,show)=>{const variant=event.target.closest("span"),variantEnabled="on"==variant.dataset.state,button=event.target.closest("button");variantEnabled||updateVariantComponentState(variant,button,modal,show,!1)},handleVariantClick=(event,modal)=>{event.stopPropagation();const variant=event.target.closest("span"),button=event.target.closest("button");updateVariantComponentState(variant,button,modal,!1,!0)},getTemplateContext=async(editor,data)=>Object.assign({},{elementid:editor.id,buttons:await getButtons(editor),filters:await getFilters(),preview:previewC4L},data),getFilters=async()=>{const filters=[],stringValues=await(0,_str.get_strings)(Contexts.map((key=>({key:key,component:_common.component}))));return Contexts.forEach(((context,index)=>{filters.push({name:stringValues[index],type:context,filterClass:0===index?"c4l-button-filter-enabled":""})})),filters},getButtons=editor=>{const buttons=[],sel=editor.selection.getContent();let componentCode="",placeholder="",variants=[];return _components.components.forEach(((component,index)=>{if(!userStudent||userStudent&&allowedComponents.includes(component.name)){if(previewC4L){placeholder=sel.length>0?sel:component.text,componentCode=component.code,componentCode=componentCode.replace("{{PLACEHOLDER}}",placeholder),variants=(0,_variantslib.getVariantsClass)(component.name);const variantsNode=document.createElement("span");variantsNode.dataset.id="variantHTML-"+component.id,variants.length>0?(componentCode=componentCode.replace("{{VARIANTS}}",variants.join(" ")),variantsNode.innerHTML=(0,_variantslib.getVariantsHtml)(component.name),componentCode=componentCode.replace("{{VARIANTSHTML}}",variantsNode.outerHTML)):(componentCode=componentCode.replace("{{VARIANTS}}",""),componentCode=componentCode.replace("{{VARIANTSHTML}}",variantsNode.outerHTML)),componentCode=applyLangStrings(componentCode)}-1===Contexts.indexOf(component.type)&&Contexts.push(component.type),buttons.push({id:index,name:langStrings.get(component.name),type:component.type,imageClass:component.imageClass,classComponent:"c4lv-"+component.name,htmlcode:componentCode,variants:getVariantsState(component.name,component.variants)}),0!==Contexts.indexOf(component.type)&&(buttons[buttons.length-1].imageClass+=" c4l-hidden")}})),buttons},getVariantsState=(component,elements)=>{const variants=[];let variantState="",variantClass="";return elements.length>3&&(elements=elements.slice(0,2)),elements.forEach(((variant,index)=>{(0,_variantslib.variantExists)(component,variant)?(variantState="on",variantClass="on "):(variantState="off",variantClass=""),variantClass+=variant+"-variant-"+variantState,variants.push({id:index,name:variant,state:variantState,imageClass:variantClass,title:langStrings.get(variant)})})),variants},updateVariantComponentState=(variant,button,modal,show,updateHtml)=>{const selectedVariant="c4l-"+variant.dataset.variant+"-variant",selectedButton=button.dataset.id,componentClass=button.dataset.classcomponent,previewComponent=modal.getRoot()[0].querySelector('div[data-id="code-preview-'+selectedButton+'"] .'+componentClass),variantPreview=modal.getRoot()[0].querySelector('span[data-id="variantHTML-'+selectedButton+'"]');let variantsHtml="";previewComponent?updateHtml?("on"==variant.dataset.state?((0,_variantslib.removeVariant)(_components.components[selectedButton].name,variant.dataset.variant),updateVariantButtonState(variant,!1),previewComponent.classList.remove(selectedVariant)):((0,_variantslib.addVariant)(_components.components[selectedButton].name,variant.dataset.variant),updateVariantButtonState(variant,!0),previewComponent.classList.add(selectedVariant)),variantPreview&&(variantPreview.innerHTML=(0,_variantslib.getVariantsHtml)(_components.components[selectedButton].name))):(variantsHtml=(0,_variantslib.getVariantsHtml)(_components.components[selectedButton].name),show?(previewComponent.classList.add(selectedVariant),variantsHtml+=(0,_variantslib.getVariantHtml)(variant.dataset.variant)):previewComponent.classList.remove(selectedVariant),variantPreview&&(variantPreview.innerHTML=variantsHtml)):"on"==variant.dataset.state?((0,_variantslib.removeVariant)(_components.components[selectedButton].name,variant.dataset.variant),updateVariantButtonState(variant,!1)):((0,_variantslib.addVariant)(_components.components[selectedButton].name,variant.dataset.variant),updateVariantButtonState(variant,!0))},updateVariantButtonState=(variant,activate)=>{activate?(variant.dataset.state="on",variant.classList.remove(variant.dataset.variant+"-variant-off"),variant.classList.add(variant.dataset.variant+"-variant-on"),variant.classList.add("on")):(variant.dataset.state="off",variant.classList.remove(variant.dataset.variant+"-variant-on"),variant.classList.add(variant.dataset.variant+"-variant-off"),variant.classList.remove("on"))},showContextButtons=(modal,context)=>{const showNodes=modal.getRoot()[0].querySelectorAll('button[data-type="'+context+'"]'),hideNodes=modal.getRoot()[0].querySelectorAll('button[data-type]:not([data-type="'+context+'"])');showNodes.forEach((node=>node.classList.remove("c4l-hidden"))),hideNodes.forEach((node=>node.classList.add("c4l-hidden")))},applyLangStrings=text=>([...text.matchAll(/{{#([^}]*)}}/g)].forEach((strLang=>{text=text.replace("{{#"+strLang[1]+"}}",langStrings.get(strLang[1]))})),text),generateRandomID=()=>{const timestamp=(new Date).getTime();return"R"+Math.round(1e5*Math.random())+"-"+timestamp},applyRandomID=text=>{const compRegex=/{{@ID}}/g;return text.match(compRegex)&&(text=text.replace(compRegex,generateRandomID())),text},getAllStrings=async()=>{const keys=[],compRegex=/{{#([^}]*)}}/g;_components.components.forEach((element=>{keys.push(element.name),element.variants.forEach((variant=>{-1===keys.indexOf(variant)&&keys.push(variant)})),[...element.code.matchAll(compRegex)].forEach((strLang=>{-1===keys.indexOf(strLang[1])&&keys.push(strLang[1])}))}));const stringValues=await(0,_str.get_strings)(keys.map((key=>({key:key,component:_common.component}))));return new Map(keys.map(((key,index)=>[key,stringValues[index]])))}})); + */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.handleAction=void 0,_modal=_interopRequireDefault(_modal),_modal_factory=_interopRequireDefault(_modal_factory),_modal_events=_interopRequireDefault(_modal_events);let userStudent=!1,previewC4L=!0,allowedComponents=[],Contexts=[],langStrings={},previewCSS="",customComponents=[];_exports.handleAction=async editor=>{userStudent=(0,_options.isStudent)(editor),previewC4L=(0,_options.showPreview)(editor),customComponents=(0,_options.getcustomComponents)(editor),addCustomComponents(),allowedComponents=(0,_options.getallowedComponents)(editor),previewCSS=(0,_options.getpreviewCSS)(editor),langStrings=await getAllStrings(),(0,_variantslib.loadVariantPreferences)(_components.components).then((()=>displayDialogue(editor)))};const displayDialogue=async editor=>{const data=Object.assign({},{}),modal=await _modal_factory.default.create({type:_modal.default.TYPE,templateContext:await getTemplateContext(editor,data),large:!0}),modalClass=previewC4L?"c4l-modal":"c4l-modal-no-preview";if(editor.targetElm.closest("body").classList.add(modalClass),""!==previewCSS){const styles=document.createElement("style");styles.textContent=previewCSS,editor.targetElm.closest("body").appendChild(styles)}modal.show(),modal.getRoot().on(_modal_events.default.hidden,(()=>{handleModalHidden(editor)}));modal.getRoot()[0].querySelectorAll(".c4l-button-filter").forEach((node=>{node.addEventListener("click",(event=>{handleButtonFilterClick(event,modal)}))})),modal.getRoot()[0].querySelector(".c4l-select-filter").addEventListener("change",(event=>{handleSelectFilterChange(event,modal)}));modal.getRoot()[0].querySelectorAll(".c4lt-dialog-button").forEach((node=>{node.addEventListener("click",(event=>{handleButtonClick(event,editor,modal)})),previewC4L&&(node.addEventListener("mouseenter",(event=>{handleButtonMouseEvent(event,modal,!0)})),node.addEventListener("mouseleave",(event=>{handleButtonMouseEvent(event,modal,!1)})))}));modal.getRoot()[0].querySelectorAll(".c4l-button-variant").forEach((node=>{node.addEventListener("click",(event=>{handleVariantClick(event,modal)})),previewC4L&&(node.addEventListener("mouseenter",(event=>{handleVariantMouseEvent(event,modal,!0)})),node.addEventListener("mouseleave",(event=>{handleVariantMouseEvent(event,modal,!1)})))}))},handleSelectFilterChange=(event,modal)=>{const select=event.target.closest("select");if(select){const currentContext=select.value;if(-1!==Contexts.indexOf(currentContext)){modal.getRoot()[0].querySelectorAll(".c4l-buttons-filters button").forEach((node=>node.classList.remove("c4l-button-filter-enabled")));modal.getRoot()[0].querySelector('.c4l-button-filter[data-filter="'+currentContext+'"]').classList.add("c4l-button-filter-enabled"),showContextButtons(modal,currentContext)}}},handleButtonFilterClick=(event,modal)=>{const button=event.target.closest("button"),currentContext=button.dataset.filter;if(-1!==Contexts.indexOf(currentContext)){modal.getRoot()[0].querySelectorAll(".c4l-buttons-filters button").forEach((node=>node.classList.remove("c4l-button-filter-enabled"))),button.classList.add("c4l-button-filter-enabled");modal.getRoot()[0].querySelector(".c4l-select-filter").selectedIndex=Contexts.indexOf(currentContext),showContextButtons(modal,currentContext)}},handleModalHidden=editor=>{editor.targetElm.closest("body").classList.remove("c4l-modal-no-preview"),(0,_variantslib.saveVariantPreferences)(_components.components)},handleButtonClick=(event,editor,modal)=>{const selectedButton=event.target.closest("button").dataset.id,component=_components.components.find((element=>element.name==selectedButton));if(null!=component){const sel=editor.selection.getContent();let componentCode=component.code;const placeholder=sel.length>0?sel:component.text,randomId=generateRandomID(),newNode=document.createElement("span");newNode.dataset.id=randomId,newNode.innerHTML=placeholder,componentCode=componentCode.replace("{{PLACEHOLDER}}",newNode.outerHTML);const variants=(0,_variantslib.getVariantsClass)(component.name);variants.length>0?(componentCode=componentCode.replace("{{VARIANTS}}",variants.join(" ")),componentCode=componentCode.replace("{{VARIANTSHTML}}",(0,_variantslib.getVariantsHtml)(component.name))):(componentCode=componentCode.replace("{{VARIANTS}}",""),componentCode=componentCode.replace("{{VARIANTSHTML}}","")),componentCode=applyRandomID(componentCode),componentCode=applyLangStrings(componentCode),editor.selection.setContent(componentCode);const nodeSel=editor.dom.select('span[data-id="'+randomId+'"]');nodeSel?.[0]&&editor.selection.select(nodeSel[0]),modal.destroy(),editor.focus()}},handleButtonMouseEvent=(event,modal,show)=>{const selectedButton=event.target.closest("button").dataset.id,node=modal.getRoot()[0].querySelector('div[data-id="code-preview-'+selectedButton+'"]'),previewDefault=modal.getRoot()[0].querySelector('div[data-id="code-preview-default"]');node&&(show?(previewDefault.classList.toggle("c4l-hidden"),node.classList.toggle("c4l-hidden")):(node.classList.toggle("c4l-hidden"),previewDefault.classList.toggle("c4l-hidden")))},handleVariantMouseEvent=(event,modal,show)=>{const variant=event.target.closest("span"),variantEnabled="on"==variant.dataset.state,button=event.target.closest("button");variantEnabled||updateVariantComponentState(variant,button,modal,show,!1)},handleVariantClick=(event,modal)=>{event.stopPropagation();const variant=event.target.closest("span"),button=event.target.closest("button");updateVariantComponentState(variant,button,modal,!1,!0)},getTemplateContext=async(editor,data)=>Object.assign({},{elementid:editor.id,buttons:await getButtons(editor),filters:await getFilters(),preview:previewC4L},data),getFilters=async()=>{const filters=[],stringValues=await(0,_str.get_strings)(Contexts.map((key=>({key:key,component:_common.component}))));return Contexts.forEach(((context,index)=>{filters.push({name:stringValues[index],type:context,filterClass:0===index?"c4l-button-filter-enabled":""})})),filters},getButtons=editor=>{const buttons=[],sel=editor.selection.getContent();let componentCode="",placeholder="",variants=[],buttonText="";return _components.components.forEach((component=>{if(!userStudent||userStudent&&allowedComponents.includes(component.name)){if(previewC4L){placeholder=sel.length>0?sel:component.text,componentCode=component.code,componentCode=componentCode.replace("{{PLACEHOLDER}}",placeholder),variants=(0,_variantslib.getVariantsClass)(component.name);const variantsNode=document.createElement("span");variantsNode.dataset.id="variantHTML-"+component.id,variants.length>0?(componentCode=componentCode.replace("{{VARIANTS}}",variants.join(" ")),variantsNode.innerHTML=(0,_variantslib.getVariantsHtml)(component.name),componentCode=componentCode.replace("{{VARIANTSHTML}}",variantsNode.outerHTML)):(componentCode=componentCode.replace("{{VARIANTS}}",""),componentCode=componentCode.replace("{{VARIANTSHTML}}",variantsNode.outerHTML)),componentCode=applyLangStrings(componentCode)}-1===Contexts.indexOf(component.type)&&Contexts.push(component.type),buttonText="custom"==component.type?component.buttonname:langStrings.get(component.name),buttons.push({id:component.name,name:buttonText,type:component.type,icon:component.icon??"",imageClass:component.imageClass,classComponent:"c4lv-"+component.name,htmlcode:componentCode,css:component.css??"",variants:getVariantsState(component.name,component.variants)}),0!==Contexts.indexOf(component.type)&&(buttons[buttons.length-1].imageClass+=" c4l-hidden")}})),buttons},getVariantsState=(component,elements)=>{const variants=[];let variantState="",variantClass="";return elements.length>3&&(elements=elements.slice(0,2)),elements.forEach(((variant,index)=>{(0,_variantslib.variantExists)(component,variant)?(variantState="on",variantClass="on "):(variantState="off",variantClass=""),variantClass+=variant+"-variant-"+variantState,variants.push({id:index,name:variant,state:variantState,imageClass:variantClass,title:langStrings.get(variant)})})),variants},updateVariantComponentState=(variant,button,modal,show,updateHtml)=>{const selectedVariant="c4l-"+variant.dataset.variant+"-variant",component=_components.components.find((element=>element.name==button.dataset.id)),componentClass=button.dataset.classcomponent,previewComponent=modal.getRoot()[0].querySelector('div[data-id="code-preview-'+button.dataset.id+'"] .'+componentClass),variantPreview=modal.getRoot()[0].querySelector('span[data-id="variantHTML-'+button.dataset.id+'"]');let variantsHtml="";previewComponent?updateHtml?("on"==variant.dataset.state?((0,_variantslib.removeVariant)(component.name,variant.dataset.variant),updateVariantButtonState(variant,!1),previewComponent.classList.remove(selectedVariant)):((0,_variantslib.addVariant)(component.name,variant.dataset.variant),updateVariantButtonState(variant,!0),previewComponent.classList.add(selectedVariant)),variantPreview&&(variantPreview.innerHTML=(0,_variantslib.getVariantsHtml)(component.name))):(variantsHtml=(0,_variantslib.getVariantsHtml)(component.name),show?(previewComponent.classList.add(selectedVariant),variantsHtml+=(0,_variantslib.getVariantHtml)(variant.dataset.variant)):previewComponent.classList.remove(selectedVariant),variantPreview&&(variantPreview.innerHTML=variantsHtml)):updateHtml&&("on"==variant.dataset.state?((0,_variantslib.removeVariant)(component.name,variant.dataset.variant),updateVariantButtonState(variant,!1)):((0,_variantslib.addVariant)(component.name,variant.dataset.variant),updateVariantButtonState(variant,!0)))},updateVariantButtonState=(variant,activate)=>{activate?(variant.dataset.state="on",variant.classList.remove(variant.dataset.variant+"-variant-off"),variant.classList.add(variant.dataset.variant+"-variant-on"),variant.classList.add("on")):(variant.dataset.state="off",variant.classList.remove(variant.dataset.variant+"-variant-on"),variant.classList.add(variant.dataset.variant+"-variant-off"),variant.classList.remove("on"))},showContextButtons=(modal,context)=>{const showNodes=modal.getRoot()[0].querySelectorAll('button[data-type="'+context+'"]'),hideNodes=modal.getRoot()[0].querySelectorAll('button[data-type]:not([data-type="'+context+'"])');showNodes.forEach((node=>node.classList.remove("c4l-hidden"))),hideNodes.forEach((node=>node.classList.add("c4l-hidden")))},applyLangStrings=text=>([...text.matchAll(/{{#([^}]*)}}/g)].forEach((strLang=>{text=text.replace("{{#"+strLang[1]+"}}",langStrings.get(strLang[1]))})),text),generateRandomID=()=>{const timestamp=(new Date).getTime();return"R"+Math.round(1e5*Math.random())+"-"+timestamp},applyRandomID=text=>{const compRegex=/{{@ID}}/g;return text.match(compRegex)&&(text=text.replace(compRegex,generateRandomID())),text},getAllStrings=async()=>{const keys=[],compRegex=/{{#([^}]*)}}/g;_components.components.forEach((element=>{-1==element.name.indexOf("customcomp")&&keys.push(element.name),element.variants.forEach((variant=>{-1===keys.indexOf(variant)&&keys.push(variant)})),[...element.code.matchAll(compRegex)].forEach((strLang=>{-1===keys.indexOf(strLang[1])&&keys.push(strLang[1])})),[...element.text.matchAll(compRegex)].forEach((strLang=>{-1===keys.indexOf(strLang[1])&&keys.push(strLang[1])}))}));const stringValues=await(0,_str.get_strings)(keys.map((key=>({key:key,component:_common.component}))));return new Map(keys.map(((key,index)=>[key,stringValues[index]])))},addCustomComponents=()=>{customComponents.length>0&&customComponents.forEach((customcomp=>{null==_components.components.find((element=>element.id==customcomp.id+1e3))&&_components.components.push({id:customcomp.id+1e3,name:customcomp.name,buttonname:customcomp.buttonname,type:"custom",imageClass:"c4l-custom-icon",code:replaceCustomPlaceholders(customcomp),text:customcomp.text.length>0?customcomp.text:"{{#textplaceholder}}",variants:customcomp.variants?["full-width"]:[],icon:customcomp.icon,css:customcomp.css})}))},replaceCustomPlaceholders=component=>{let html=component.code;const variants=component.variants?" {{VARIANTS}}":"";return html=html.replace("{{CUSTOMCLASS}}","c4lv-"+component.name+" c4lv-custom-component"+variants),html}})); //# sourceMappingURL=ui.min.js.map \ No newline at end of file diff --git a/amd/build/ui.min.js.map b/amd/build/ui.min.js.map index 9355d19..43584f3 100644 --- a/amd/build/ui.min.js.map +++ b/amd/build/ui.min.js.map @@ -1 +1 @@ -{"version":3,"file":"ui.min.js","sources":["../src/ui.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 * Tiny C4L UI.\n *\n * @module tiny_c4l/ui\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {component} from './common';\nimport C4LModal from './modal';\nimport ModalFactory from 'core/modal_factory';\nimport {components as Components} from './components';\nimport {get_strings as getStrings} from 'core/str';\nimport {\n isStudent,\n getallowedComponents,\n showPreview\n} from './options';\nimport ModalEvents from 'core/modal_events';\nimport {\n addVariant,\n getVariantsClass,\n getVariantHtml,\n getVariantsHtml,\n loadVariantPreferences,\n removeVariant,\n saveVariantPreferences,\n variantExists\n} from './variantslib';\n\nlet userStudent = false;\nlet previewC4L = true;\nlet allowedComponents = [];\nlet Contexts = [];\nlet langStrings = {};\n\n/**\n * Handle action\n *\n * @param {TinyMCE} editor\n */\nexport const handleAction = async(editor) => {\n userStudent = isStudent(editor);\n previewC4L = showPreview(editor);\n langStrings = await getAllStrings();\n allowedComponents = getallowedComponents(editor);\n loadVariantPreferences().then(() => displayDialogue(editor));\n};\n\n/**\n * Display modal\n *\n * @param {TinyMCE} editor\n */\nconst displayDialogue = async(editor) => {\n const data = Object.assign({}, {});\n\n // Show modal with buttons.\n const modal = await ModalFactory.create({\n type: C4LModal.TYPE,\n templateContext: await getTemplateContext(editor, data),\n large: true,\n });\n\n // Set modal size when no preview.\n if (!previewC4L) {\n editor.targetElm.closest('body').classList.add('c4l-modal-no-preview');\n }\n modal.show();\n\n // Event modal listener.\n modal.getRoot().on(ModalEvents.hidden, () => {\n handleModalHidden(editor);\n });\n\n // Event filters listener.\n const filters = modal.getRoot()[0].querySelectorAll('.c4l-button-filter');\n filters.forEach(node => {\n node.addEventListener('click', (event) => {\n handleButtonFilterClick(event, modal);\n });\n });\n\n modal.getRoot()[0].querySelector('.c4l-select-filter').addEventListener('change', (event) => {\n handleSelectFilterChange(event, modal);\n });\n\n // Event buttons listeners.\n const buttons = modal.getRoot()[0].querySelectorAll('.c4lt-dialog-button');\n buttons.forEach(node => {\n node.addEventListener('click', (event) => {\n handleButtonClick(event, editor, modal);\n });\n if (previewC4L) {\n node.addEventListener('mouseenter', (event) => {\n handleButtonMouseEvent(event, modal, true);\n });\n node.addEventListener('mouseleave', (event) => {\n handleButtonMouseEvent(event, modal, false);\n });\n }\n });\n\n // Event variants listeners.\n const variants = modal.getRoot()[0].querySelectorAll('.c4l-button-variant');\n variants.forEach(node => {\n node.addEventListener('click', (event) => {\n handleVariantClick(event, modal);\n });\n if (previewC4L) {\n node.addEventListener('mouseenter', (event) => {\n handleVariantMouseEvent(event, modal, true);\n });\n node.addEventListener('mouseleave', (event) => {\n handleVariantMouseEvent(event, modal, false);\n });\n }\n });\n};\n\n/**\n * Handle a change within filter select.\n *\n * @param {MouseEvent} event The change event\n * @param {obj} modal\n */\nconst handleSelectFilterChange = (event, modal) => {\n const select = event.target.closest('select');\n\n if (select) {\n const currentContext = select.value;\n if (Contexts.indexOf(currentContext) !== -1) {\n // Select current button.\n const buttons = modal.getRoot()[0]\n .querySelectorAll('.c4l-buttons-filters button');\n buttons.forEach(node => node.classList.remove('c4l-button-filter-enabled'));\n const button = modal.getRoot()[0]\n .querySelector('.c4l-button-filter[data-filter=\"' + currentContext + '\"]');\n button.classList.add('c4l-button-filter-enabled');\n\n // Show/hide component buttons.\n showContextButtons(modal, currentContext);\n }\n }\n};\n\n/**\n * Handle a click within filter button.\n *\n * @param {MouseEvent} event The change event\n * @param {obj} modal\n */\nconst handleButtonFilterClick = (event, modal) => {\n const button = event.target.closest('button');\n\n const currentContext = button.dataset.filter;\n // Filter button.\n if (Contexts.indexOf(currentContext) !== -1) {\n // Select current button.\n const buttons = modal.getRoot()[0].querySelectorAll('.c4l-buttons-filters button');\n buttons.forEach(node => node.classList.remove('c4l-button-filter-enabled'));\n button.classList.add('c4l-button-filter-enabled');\n\n // Select current option in select.\n const select = modal.getRoot()[0].querySelector('.c4l-select-filter');\n select.selectedIndex = Contexts.indexOf(currentContext);\n\n // Show/hide component buttons.\n showContextButtons(modal, currentContext);\n }\n};\n\n/**\n * Handle when closing the Modal.\n *\n * @param {obj} editor\n */\nconst handleModalHidden = (editor) => {\n editor.targetElm.closest('body').classList.remove('c4l-modal-no-preview');\n saveVariantPreferences();\n};\n\n/**\n * Handle a click in a component button.\n *\n * @param {MouseEvent} event The click event\n * @param {obj} editor\n * @param {obj} modal\n */\nconst handleButtonClick = (event, editor, modal) => {\n const selectedButton = event.target.closest('button').dataset.id;\n\n // Component button.\n if (Components?.[selectedButton]) {\n const sel = editor.selection.getContent();\n let componentCode = Components[selectedButton].code;\n const placeholder = (sel.length > 0 ? sel : Components[selectedButton].text);\n\n // Create a new node to replace the placeholder.\n const randomId = generateRandomID();\n const newNode = document.createElement('span');\n newNode.dataset.id = randomId;\n newNode.innerHTML = placeholder;\n componentCode = componentCode.replace('{{PLACEHOLDER}}', newNode.outerHTML);\n\n // Return active variants for current component.\n const variants = getVariantsClass(Components[selectedButton].name);\n\n // Apply variants to html component.\n if (variants.length > 0) {\n componentCode = componentCode.replace('{{VARIANTS}}', variants.join(' '));\n componentCode = componentCode.replace('{{VARIANTSHTML}}', getVariantsHtml(Components[selectedButton].name));\n } else {\n componentCode = componentCode.replace('{{VARIANTS}}', '');\n componentCode = componentCode.replace('{{VARIANTSHTML}}', '');\n }\n\n // Apply random IDs.\n componentCode = applyRandomID(componentCode);\n\n // Apply lang strings.\n componentCode = applyLangStrings(componentCode);\n\n // Sets new content.\n editor.selection.setContent(componentCode);\n\n // Select text.\n const nodeSel = editor.dom.select('span[data-id=\"' + randomId + '\"]');\n if (nodeSel?.[0]) {\n editor.selection.select(nodeSel[0]);\n }\n\n modal.destroy();\n editor.focus();\n }\n};\n\n/**\n * Handle a mouse events mouseenter/mouseleave in a component button.\n *\n * @param {MouseEvent} event The click event\n * @param {obj} modal\n * @param {bool} show\n */\nconst handleButtonMouseEvent = (event, modal, show) => {\n const selectedButton = event.target.closest('button').dataset.id;\n const node = modal.getRoot()[0].querySelector('div[data-id=\"code-preview-' + selectedButton + '\"]');\n const previewDefault = modal.getRoot()[0].querySelector('div[data-id=\"code-preview-default\"]');\n\n if (node) {\n if (show) {\n previewDefault.classList.toggle('c4l-hidden');\n node.classList.toggle('c4l-hidden');\n } else {\n node.classList.toggle('c4l-hidden');\n previewDefault.classList.toggle('c4l-hidden');\n }\n }\n};\n\n/**\n * Handle a mouse events mouseenter/mouseleave in a variant button.\n *\n * @param {MouseEvent} event The mouseenter/mouseleave event\n * @param {obj} modal\n * @param {bool} show\n */\nconst handleVariantMouseEvent = (event, modal, show) => {\n const variant = event.target.closest('span');\n const variantEnabled = variant.dataset.state == 'on';\n const button = event.target.closest('button');\n\n if (!variantEnabled) {\n updateVariantComponentState(variant, button, modal, show, false);\n }\n};\n\n\n/**\n * Handle a mouse event within the variant buttons.\n *\n * @param {MouseEvent} event The mouseenter/mouseleave event\n * @param {obj} modal\n */\nconst handleVariantClick = (event, modal) => {\n event.stopPropagation();\n const variant = event.target.closest('span');\n const button = event.target.closest('button');\n updateVariantComponentState(variant, button, modal, false, true);\n};\n\n/**\n * Get the template context for the dialogue.\n *\n * @param {Editor} editor\n * @param {object} data\n * @returns {object} data\n */\nconst getTemplateContext = async(editor, data) => {\n return Object.assign({}, {\n elementid: editor.id,\n buttons: await getButtons(editor),\n filters: await getFilters(),\n preview: previewC4L,\n }, data);\n};\n\n/**\n * Get the C4L filters for the dialogue.\n *\n * @returns {object} data\n */\nconst getFilters = async() => {\n const filters = [];\n const stringValues = await getStrings(Contexts.map((key) => ({key, component})));\n\n // Iterate over contexts.\n Contexts.forEach((context, index) => {\n filters.push({\n name: stringValues[index],\n type: context,\n filterClass: index === 0 ? 'c4l-button-filter-enabled' : '',\n });\n });\n\n return filters;\n};\n\n/**\n * Get the C4L buttons for the dialogue.\n *\n * @param {Editor} editor\n * @returns {object} buttons\n */\nconst getButtons = (editor) => {\n const buttons = [];\n const sel = editor.selection.getContent();\n let componentCode = '';\n let placeholder = '';\n let variants = [];\n\n // Iterate over components.\n Components.forEach((component, index) => {\n if (!userStudent || (userStudent && allowedComponents.includes(component.name))) {\n if (previewC4L) {\n placeholder = (sel.length > 0 ? sel : component.text);\n componentCode = component.code;\n componentCode = componentCode.replace('{{PLACEHOLDER}}', placeholder);\n // Return active variants for component.\n variants = getVariantsClass(component.name);\n\n // Apply class variants and html to html component.\n const variantsNode = document.createElement('span');\n variantsNode.dataset.id = 'variantHTML-' + component.id;\n if (variants.length > 0) {\n componentCode = componentCode.replace('{{VARIANTS}}', variants.join(' '));\n variantsNode.innerHTML = getVariantsHtml(component.name);\n componentCode = componentCode.replace('{{VARIANTSHTML}}', variantsNode.outerHTML);\n } else {\n componentCode = componentCode.replace('{{VARIANTS}}', '');\n componentCode = componentCode.replace('{{VARIANTSHTML}}', variantsNode.outerHTML);\n }\n\n // Apply lang strings.\n componentCode = applyLangStrings(componentCode);\n }\n\n // Save contexts.\n if (Contexts.indexOf(component.type) === -1) {\n Contexts.push(component.type);\n }\n\n buttons.push({\n id: index,\n name: langStrings.get(component.name),\n type: component.type,\n imageClass: component.imageClass,\n classComponent: 'c4lv-' + component.name,\n htmlcode: componentCode,\n variants: getVariantsState(component.name, component.variants),\n });\n\n // Add class to hide button.\n if (Contexts.indexOf(component.type) !== 0) {\n buttons[buttons.length - 1].imageClass += ' c4l-hidden';\n }\n }\n });\n\n return buttons;\n};\n\n/**\n * Get variants for the dialogue.\n *\n * @param {string} component\n * @param {object} elements\n * @return {object} Variants for a component\n */\nconst getVariantsState = (component, elements) => {\n const variants = [];\n let variantState = '';\n let variantClass = '';\n\n // Max 3 variants.\n if (elements.length > 3) {\n elements = elements.slice(0, 2);\n }\n\n elements.forEach((variant, index) => {\n if (variantExists(component, variant)) {\n variantState = 'on';\n variantClass = 'on ';\n } else {\n variantState = 'off';\n variantClass = '';\n }\n variantClass += variant + '-variant-' + variantState;\n variants.push({\n id: index,\n name: variant,\n state: variantState,\n imageClass: variantClass,\n title: langStrings.get(variant),\n });\n });\n\n return variants;\n};\n\n/**\n * Update a variant component UI.\n *\n * @param {obj} variant\n * @param {obj} button\n * @param {obj} modal\n * @param {bool} show\n * @param {bool} updateHtml\n */\nconst updateVariantComponentState = (variant, button, modal, show, updateHtml) => {\n const selectedVariant = 'c4l-' + variant.dataset.variant + '-variant';\n const selectedButton = button.dataset.id;\n const componentClass = button.dataset.classcomponent;\n const previewComponent = modal.getRoot()[0]\n .querySelector('div[data-id=\"code-preview-' + selectedButton + '\"] .' + componentClass);\n const variantPreview = modal.getRoot()[0]\n .querySelector('span[data-id=\"variantHTML-' + selectedButton + '\"]');\n let variantsHtml = '';\n\n if (previewComponent) {\n if (updateHtml) {\n if (variant.dataset.state == 'on') {\n removeVariant(Components[selectedButton].name, variant.dataset.variant);\n updateVariantButtonState(variant, false);\n previewComponent.classList.remove(selectedVariant);\n } else {\n addVariant(Components[selectedButton].name, variant.dataset.variant);\n updateVariantButtonState(variant, true);\n previewComponent.classList.add(selectedVariant);\n }\n\n // Update variant preview HTML.\n if (variantPreview) {\n variantPreview.innerHTML = getVariantsHtml(Components[selectedButton].name);\n }\n } else {\n variantsHtml = getVariantsHtml(Components[selectedButton].name);\n if (show) {\n previewComponent.classList.add(selectedVariant);\n variantsHtml += getVariantHtml(variant.dataset.variant);\n } else {\n previewComponent.classList.remove(selectedVariant);\n }\n\n // Update variant preview HTML.\n if (variantPreview) {\n variantPreview.innerHTML = variantsHtml;\n }\n }\n } else {\n // Update variants preferences.\n if (variant.dataset.state == 'on') {\n removeVariant(Components[selectedButton].name, variant.dataset.variant);\n updateVariantButtonState(variant, false);\n } else {\n addVariant(Components[selectedButton].name, variant.dataset.variant);\n updateVariantButtonState(variant, true);\n }\n }\n};\n\n/**\n * Update a variant button UI.\n *\n * @param {obj} variant\n * @param {bool} activate\n */\nconst updateVariantButtonState = (variant, activate) => {\n if (activate) {\n variant.dataset.state = 'on';\n variant.classList.remove(variant.dataset.variant + '-variant-off');\n variant.classList.add(variant.dataset.variant + '-variant-on');\n variant.classList.add('on');\n } else {\n variant.dataset.state = 'off';\n variant.classList.remove(variant.dataset.variant + '-variant-on');\n variant.classList.add(variant.dataset.variant + '-variant-off');\n variant.classList.remove('on');\n }\n};\n\n/**\n * Show/hide buttons depend on selected context.\n *\n * @param {object} modal\n * @param {String} context\n */\nconst showContextButtons = (modal, context) => {\n const showNodes = modal.getRoot()[0].querySelectorAll('button[data-type=\"' + context + '\"]');\n const hideNodes = modal.getRoot()[0].querySelectorAll('button[data-type]:not([data-type=\"' + context + '\"])');\n\n showNodes.forEach(node => node.classList.remove('c4l-hidden'));\n hideNodes.forEach(node => node.classList.add('c4l-hidden'));\n};\n\n/**\n * Replace all localized strings.\n *\n * @param {String} text\n * @return {String} String with lang tags replaced with a localized string.\n */\nconst applyLangStrings = (text) => {\n const compRegex = /{{#([^}]*)}}/g;\n\n [...text.matchAll(compRegex)].forEach(strLang => {\n text = text.replace('{{#' + strLang[1] +'}}', langStrings.get(strLang[1]));\n });\n\n return text;\n};\n\n/**\n * Generates a random string.\n * @return {string} A random string\n */\nconst generateRandomID = () => {\n const timestamp = new Date().getTime();\n return 'R' + Math.round(Math.random() * 100000) + '-' + timestamp;\n};\n\n/**\n * Replace all ID tags with a random string.\n * @param {String} text\n * @return {String} String with all ID tags replaced with a random string.\n */\nconst applyRandomID = (text) => {\n const compRegex = /{{@ID}}/g;\n\n if (text.match(compRegex)) {\n text = text.replace(compRegex, generateRandomID());\n }\n\n return text;\n};\n\n/**\n * Get language strings.\n *\n * @return {object} Language strings\n */\nconst getAllStrings = async() => {\n const keys = [];\n const compRegex = /{{#([^}]*)}}/g;\n\n Components.forEach(element => {\n keys.push(element.name);\n element.variants.forEach(variant => {\n if (keys.indexOf(variant) === -1) {\n keys.push(variant);\n }\n });\n // Get lang strings from components.\n [...element.code.matchAll(compRegex)].forEach(strLang => {\n if (keys.indexOf(strLang[1]) === -1) {\n keys.push(strLang[1]);\n }\n });\n });\n\n const stringValues = await getStrings(keys.map((key) => ({key, component})));\n return new Map(keys.map((key, index) => ([key, stringValues[index]])));\n};\n"],"names":["userStudent","previewC4L","allowedComponents","Contexts","langStrings","async","editor","getAllStrings","then","displayDialogue","data","Object","assign","modal","ModalFactory","create","type","C4LModal","TYPE","templateContext","getTemplateContext","large","targetElm","closest","classList","add","show","getRoot","on","ModalEvents","hidden","handleModalHidden","querySelectorAll","forEach","node","addEventListener","event","handleButtonFilterClick","querySelector","handleSelectFilterChange","handleButtonClick","handleButtonMouseEvent","handleVariantClick","handleVariantMouseEvent","select","target","currentContext","value","indexOf","remove","showContextButtons","button","dataset","filter","selectedIndex","selectedButton","id","Components","sel","selection","getContent","componentCode","code","placeholder","length","text","randomId","generateRandomID","newNode","document","createElement","innerHTML","replace","outerHTML","variants","name","join","applyRandomID","applyLangStrings","setContent","nodeSel","dom","destroy","focus","previewDefault","toggle","variant","variantEnabled","state","updateVariantComponentState","stopPropagation","elementid","buttons","getButtons","filters","getFilters","preview","stringValues","map","key","component","context","index","push","filterClass","includes","variantsNode","get","imageClass","classComponent","htmlcode","getVariantsState","elements","variantState","variantClass","slice","title","updateHtml","selectedVariant","componentClass","classcomponent","previewComponent","variantPreview","variantsHtml","updateVariantButtonState","activate","showNodes","hideNodes","matchAll","strLang","timestamp","Date","getTime","Math","round","random","compRegex","match","keys","element","Map"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"ui.min.js","sources":["../src/ui.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 * Tiny C4L UI.\n *\n * @module tiny_c4l/ui\n * @copyright 2022 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {component} from './common';\nimport C4LModal from './modal';\nimport ModalFactory from 'core/modal_factory';\nimport {components as Components} from './components';\nimport {get_strings as getStrings} from 'core/str';\nimport {\n isStudent,\n getallowedComponents,\n showPreview,\n getpreviewCSS,\n getcustomComponents\n} from './options';\nimport ModalEvents from 'core/modal_events';\nimport {\n addVariant,\n getVariantsClass,\n getVariantHtml,\n getVariantsHtml,\n loadVariantPreferences,\n removeVariant,\n saveVariantPreferences,\n variantExists\n} from './variantslib';\n\nlet userStudent = false;\nlet previewC4L = true;\nlet allowedComponents = [];\nlet Contexts = [];\nlet langStrings = {};\nlet previewCSS = '';\nlet customComponents = [];\nconst compPrefix = 'c4lv-';\n\n/**\n * Handle action\n *\n * @param {TinyMCE} editor\n */\nexport const handleAction = async(editor) => {\n userStudent = isStudent(editor);\n previewC4L = showPreview(editor);\n customComponents = getcustomComponents(editor);\n addCustomComponents();\n allowedComponents = getallowedComponents(editor);\n previewCSS = getpreviewCSS(editor);\n langStrings = await getAllStrings();\n loadVariantPreferences(Components).then(() => displayDialogue(editor));\n};\n\n/**\n * Display modal\n *\n * @param {TinyMCE} editor\n */\nconst displayDialogue = async(editor) => {\n const data = Object.assign({}, {});\n\n // Show modal with buttons.\n const modal = await ModalFactory.create({\n type: C4LModal.TYPE,\n templateContext: await getTemplateContext(editor, data),\n large: true,\n });\n\n // Choose class to modal.\n const modalClass = previewC4L ? 'c4l-modal' : 'c4l-modal-no-preview';\n\n // Set class to modal.\n editor.targetElm.closest('body').classList.add(modalClass);\n\n // Inject custom component styles in editor.\n if (previewCSS !== \"\") {\n const styles = document.createElement('style');\n styles.textContent = previewCSS;\n editor.targetElm.closest('body').appendChild(styles);\n }\n\n modal.show();\n\n // Event modal listener.\n modal.getRoot().on(ModalEvents.hidden, () => {\n handleModalHidden(editor);\n });\n\n // Event filters listener.\n const filters = modal.getRoot()[0].querySelectorAll('.c4l-button-filter');\n filters.forEach(node => {\n node.addEventListener('click', (event) => {\n handleButtonFilterClick(event, modal);\n });\n });\n\n modal.getRoot()[0].querySelector('.c4l-select-filter').addEventListener('change', (event) => {\n handleSelectFilterChange(event, modal);\n });\n\n // Event buttons listeners.\n const buttons = modal.getRoot()[0].querySelectorAll('.c4lt-dialog-button');\n buttons.forEach(node => {\n node.addEventListener('click', (event) => {\n handleButtonClick(event, editor, modal);\n });\n if (previewC4L) {\n node.addEventListener('mouseenter', (event) => {\n handleButtonMouseEvent(event, modal, true);\n });\n node.addEventListener('mouseleave', (event) => {\n handleButtonMouseEvent(event, modal, false);\n });\n }\n });\n\n // Event variants listeners.\n const variants = modal.getRoot()[0].querySelectorAll('.c4l-button-variant');\n variants.forEach(node => {\n node.addEventListener('click', (event) => {\n handleVariantClick(event, modal);\n });\n if (previewC4L) {\n node.addEventListener('mouseenter', (event) => {\n handleVariantMouseEvent(event, modal, true);\n });\n node.addEventListener('mouseleave', (event) => {\n handleVariantMouseEvent(event, modal, false);\n });\n }\n });\n};\n\n/**\n * Handle a change within filter select.\n *\n * @param {MouseEvent} event The change event\n * @param {obj} modal\n */\nconst handleSelectFilterChange = (event, modal) => {\n const select = event.target.closest('select');\n\n if (select) {\n const currentContext = select.value;\n if (Contexts.indexOf(currentContext) !== -1) {\n // Select current button.\n const buttons = modal.getRoot()[0]\n .querySelectorAll('.c4l-buttons-filters button');\n buttons.forEach(node => node.classList.remove('c4l-button-filter-enabled'));\n const button = modal.getRoot()[0]\n .querySelector('.c4l-button-filter[data-filter=\"' + currentContext + '\"]');\n button.classList.add('c4l-button-filter-enabled');\n\n // Show/hide component buttons.\n showContextButtons(modal, currentContext);\n }\n }\n};\n\n/**\n * Handle a click within filter button.\n *\n * @param {MouseEvent} event The change event\n * @param {obj} modal\n */\nconst handleButtonFilterClick = (event, modal) => {\n const button = event.target.closest('button');\n\n const currentContext = button.dataset.filter;\n // Filter button.\n if (Contexts.indexOf(currentContext) !== -1) {\n // Select current button.\n const buttons = modal.getRoot()[0].querySelectorAll('.c4l-buttons-filters button');\n buttons.forEach(node => node.classList.remove('c4l-button-filter-enabled'));\n button.classList.add('c4l-button-filter-enabled');\n\n // Select current option in select.\n const select = modal.getRoot()[0].querySelector('.c4l-select-filter');\n select.selectedIndex = Contexts.indexOf(currentContext);\n\n // Show/hide component buttons.\n showContextButtons(modal, currentContext);\n }\n};\n\n/**\n * Handle when closing the Modal.\n *\n * @param {obj} editor\n */\nconst handleModalHidden = (editor) => {\n editor.targetElm.closest('body').classList.remove('c4l-modal-no-preview');\n saveVariantPreferences(Components);\n};\n\n/**\n * Handle a click in a component button.\n *\n * @param {MouseEvent} event The click event\n * @param {obj} editor\n * @param {obj} modal\n */\nconst handleButtonClick = (event, editor, modal) => {\n const selectedButton = event.target.closest('button').dataset.id;\n\n // Component button.\n const component = Components.find(element => element.name == selectedButton);\n if (component != undefined) {\n const sel = editor.selection.getContent();\n let componentCode = component.code;\n const placeholder = (sel.length > 0 ? sel : component.text);\n\n // Create a new node to replace the placeholder.\n const randomId = generateRandomID();\n const newNode = document.createElement('span');\n newNode.dataset.id = randomId;\n newNode.innerHTML = placeholder;\n componentCode = componentCode.replace('{{PLACEHOLDER}}', newNode.outerHTML);\n\n // Return active variants for current component.\n const variants = getVariantsClass(component.name);\n\n // Apply variants to html component.\n if (variants.length > 0) {\n componentCode = componentCode.replace('{{VARIANTS}}', variants.join(' '));\n componentCode = componentCode.replace('{{VARIANTSHTML}}', getVariantsHtml(component.name));\n } else {\n componentCode = componentCode.replace('{{VARIANTS}}', '');\n componentCode = componentCode.replace('{{VARIANTSHTML}}', '');\n }\n\n // Apply random IDs.\n componentCode = applyRandomID(componentCode);\n\n // Apply lang strings.\n componentCode = applyLangStrings(componentCode);\n\n // Sets new content.\n editor.selection.setContent(componentCode);\n\n // Select text.\n const nodeSel = editor.dom.select('span[data-id=\"' + randomId + '\"]');\n if (nodeSel?.[0]) {\n editor.selection.select(nodeSel[0]);\n }\n\n modal.destroy();\n editor.focus();\n }\n};\n\n/**\n * Handle a mouse events mouseenter/mouseleave in a component button.\n *\n * @param {MouseEvent} event The click event\n * @param {obj} modal\n * @param {bool} show\n */\nconst handleButtonMouseEvent = (event, modal, show) => {\n const selectedButton = event.target.closest('button').dataset.id;\n const node = modal.getRoot()[0].querySelector('div[data-id=\"code-preview-' + selectedButton + '\"]');\n const previewDefault = modal.getRoot()[0].querySelector('div[data-id=\"code-preview-default\"]');\n\n if (node) {\n if (show) {\n previewDefault.classList.toggle('c4l-hidden');\n node.classList.toggle('c4l-hidden');\n } else {\n node.classList.toggle('c4l-hidden');\n previewDefault.classList.toggle('c4l-hidden');\n }\n }\n};\n\n/**\n * Handle a mouse events mouseenter/mouseleave in a variant button.\n *\n * @param {MouseEvent} event The mouseenter/mouseleave event\n * @param {obj} modal\n * @param {bool} show\n */\nconst handleVariantMouseEvent = (event, modal, show) => {\n const variant = event.target.closest('span');\n const variantEnabled = variant.dataset.state == 'on';\n const button = event.target.closest('button');\n\n if (!variantEnabled) {\n updateVariantComponentState(variant, button, modal, show, false);\n }\n};\n\n\n/**\n * Handle a mouse event within the variant buttons.\n *\n * @param {MouseEvent} event The mouseenter/mouseleave event\n * @param {obj} modal\n */\nconst handleVariantClick = (event, modal) => {\n event.stopPropagation();\n const variant = event.target.closest('span');\n const button = event.target.closest('button');\n updateVariantComponentState(variant, button, modal, false, true);\n};\n\n/**\n * Get the template context for the dialogue.\n *\n * @param {Editor} editor\n * @param {object} data\n * @returns {object} data\n */\nconst getTemplateContext = async(editor, data) => {\n return Object.assign({}, {\n elementid: editor.id,\n buttons: await getButtons(editor),\n filters: await getFilters(),\n preview: previewC4L,\n }, data);\n};\n\n/**\n * Get the C4L filters for the dialogue.\n *\n * @returns {object} data\n */\nconst getFilters = async() => {\n const filters = [];\n const stringValues = await getStrings(Contexts.map((key) => ({key, component})));\n\n // Iterate over contexts.\n Contexts.forEach((context, index) => {\n filters.push({\n name: stringValues[index],\n type: context,\n filterClass: index === 0 ? 'c4l-button-filter-enabled' : '',\n });\n });\n\n return filters;\n};\n\n/**\n * Get the C4L buttons for the dialogue.\n *\n * @param {Editor} editor\n * @returns {object} buttons\n */\nconst getButtons = (editor) => {\n const buttons = [];\n const sel = editor.selection.getContent();\n let componentCode = '';\n let placeholder = '';\n let variants = [];\n let buttonText = '';\n\n // Iterate over components.\n Components.forEach((component) => {\n if (!userStudent || (userStudent && allowedComponents.includes(component.name))) {\n if (previewC4L) {\n placeholder = (sel.length > 0 ? sel : component.text);\n componentCode = component.code;\n componentCode = componentCode.replace('{{PLACEHOLDER}}', placeholder);\n // Return active variants for component.\n variants = getVariantsClass(component.name);\n\n // Apply class variants and html to html component.\n const variantsNode = document.createElement('span');\n variantsNode.dataset.id = 'variantHTML-' + component.id;\n if (variants.length > 0) {\n componentCode = componentCode.replace('{{VARIANTS}}', variants.join(' '));\n variantsNode.innerHTML = getVariantsHtml(component.name);\n componentCode = componentCode.replace('{{VARIANTSHTML}}', variantsNode.outerHTML);\n } else {\n componentCode = componentCode.replace('{{VARIANTS}}', '');\n componentCode = componentCode.replace('{{VARIANTSHTML}}', variantsNode.outerHTML);\n }\n\n // Apply lang strings.\n componentCode = applyLangStrings(componentCode);\n }\n\n // Save contexts.\n if (Contexts.indexOf(component.type) === -1) {\n Contexts.push(component.type);\n }\n\n buttonText = component.type == 'custom' ? component.buttonname : langStrings.get(component.name);\n buttons.push({\n id: component.name,\n name: buttonText,\n type: component.type,\n icon: component.icon ?? '',\n imageClass: component.imageClass,\n classComponent: compPrefix + component.name,\n htmlcode: componentCode,\n css: component.css ?? '',\n variants: getVariantsState(component.name, component.variants),\n });\n\n // Add class to hide button.\n if (Contexts.indexOf(component.type) !== 0) {\n buttons[buttons.length - 1].imageClass += ' c4l-hidden';\n }\n }\n });\n\n return buttons;\n};\n\n/**\n * Get variants for the dialogue.\n *\n * @param {string} component\n * @param {object} elements\n * @return {object} Variants for a component\n */\nconst getVariantsState = (component, elements) => {\n const variants = [];\n let variantState = '';\n let variantClass = '';\n\n // Max 3 variants.\n if (elements.length > 3) {\n elements = elements.slice(0, 2);\n }\n\n elements.forEach((variant, index) => {\n if (variantExists(component, variant)) {\n variantState = 'on';\n variantClass = 'on ';\n } else {\n variantState = 'off';\n variantClass = '';\n }\n variantClass += variant + '-variant-' + variantState;\n variants.push({\n id: index,\n name: variant,\n state: variantState,\n imageClass: variantClass,\n title: langStrings.get(variant),\n });\n });\n\n return variants;\n};\n\n/**\n * Update a variant component UI.\n *\n * @param {obj} variant\n * @param {obj} button\n * @param {obj} modal\n * @param {bool} show\n * @param {bool} updateHtml\n */\nconst updateVariantComponentState = (variant, button, modal, show, updateHtml) => {\n const selectedVariant = 'c4l-' + variant.dataset.variant + '-variant';\n const component = Components.find(element => element.name == button.dataset.id);\n const componentClass = button.dataset.classcomponent;\n const previewComponent = modal.getRoot()[0]\n .querySelector('div[data-id=\"code-preview-' + button.dataset.id + '\"] .' + componentClass);\n const variantPreview = modal.getRoot()[0]\n .querySelector('span[data-id=\"variantHTML-' + button.dataset.id + '\"]');\n let variantsHtml = '';\n\n if (previewComponent) {\n if (updateHtml) {\n if (variant.dataset.state == 'on') {\n removeVariant(component.name, variant.dataset.variant);\n updateVariantButtonState(variant, false);\n previewComponent.classList.remove(selectedVariant);\n } else {\n addVariant(component.name, variant.dataset.variant);\n updateVariantButtonState(variant, true);\n previewComponent.classList.add(selectedVariant);\n }\n\n // Update variant preview HTML.\n if (variantPreview) {\n variantPreview.innerHTML = getVariantsHtml(component.name);\n }\n } else {\n variantsHtml = getVariantsHtml(component.name);\n if (show) {\n previewComponent.classList.add(selectedVariant);\n variantsHtml += getVariantHtml(variant.dataset.variant);\n } else {\n previewComponent.classList.remove(selectedVariant);\n }\n\n // Update variant preview HTML.\n if (variantPreview) {\n variantPreview.innerHTML = variantsHtml;\n }\n }\n } else {\n if (updateHtml) {\n // Update variants preferences.\n if (variant.dataset.state == 'on') {\n removeVariant(component.name, variant.dataset.variant);\n updateVariantButtonState(variant, false);\n } else {\n addVariant(component.name, variant.dataset.variant);\n updateVariantButtonState(variant, true);\n }\n }\n }\n};\n\n/**\n * Update a variant button UI.\n *\n * @param {obj} variant\n * @param {bool} activate\n */\nconst updateVariantButtonState = (variant, activate) => {\n if (activate) {\n variant.dataset.state = 'on';\n variant.classList.remove(variant.dataset.variant + '-variant-off');\n variant.classList.add(variant.dataset.variant + '-variant-on');\n variant.classList.add('on');\n } else {\n variant.dataset.state = 'off';\n variant.classList.remove(variant.dataset.variant + '-variant-on');\n variant.classList.add(variant.dataset.variant + '-variant-off');\n variant.classList.remove('on');\n }\n};\n\n/**\n * Show/hide buttons depend on selected context.\n *\n * @param {object} modal\n * @param {String} context\n */\nconst showContextButtons = (modal, context) => {\n const showNodes = modal.getRoot()[0].querySelectorAll('button[data-type=\"' + context + '\"]');\n const hideNodes = modal.getRoot()[0].querySelectorAll('button[data-type]:not([data-type=\"' + context + '\"])');\n\n showNodes.forEach(node => node.classList.remove('c4l-hidden'));\n hideNodes.forEach(node => node.classList.add('c4l-hidden'));\n};\n\n/**\n * Replace all localized strings.\n *\n * @param {String} text\n * @return {String} String with lang tags replaced with a localized string.\n */\nconst applyLangStrings = (text) => {\n const compRegex = /{{#([^}]*)}}/g;\n\n [...text.matchAll(compRegex)].forEach(strLang => {\n text = text.replace('{{#' + strLang[1] + '}}', langStrings.get(strLang[1]));\n });\n\n return text;\n};\n\n/**\n * Generates a random string.\n * @return {string} A random string\n */\nconst generateRandomID = () => {\n const timestamp = new Date().getTime();\n return 'R' + Math.round(Math.random() * 100000) + '-' + timestamp;\n};\n\n/**\n * Replace all ID tags with a random string.\n * @param {String} text\n * @return {String} String with all ID tags replaced with a random string.\n */\nconst applyRandomID = (text) => {\n const compRegex = /{{@ID}}/g;\n\n if (text.match(compRegex)) {\n text = text.replace(compRegex, generateRandomID());\n }\n\n return text;\n};\n\n/**\n * Get language strings.\n *\n * @return {object} Language strings\n */\nconst getAllStrings = async() => {\n const keys = [];\n const compRegex = /{{#([^}]*)}}/g;\n\n Components.forEach(element => {\n\n // Only add name from standard components.\n if (element.name.indexOf(\"customcomp\") == -1) {\n keys.push(element.name);\n }\n\n // Get lang strings from variants.\n element.variants.forEach(variant => {\n if (keys.indexOf(variant) === -1) {\n keys.push(variant);\n }\n });\n\n // Get lang strings from components.\n [...element.code.matchAll(compRegex)].forEach(strLang => {\n if (keys.indexOf(strLang[1]) === -1) {\n keys.push(strLang[1]);\n }\n });\n\n // Get lang strings from text placeholders.\n [...element.text.matchAll(compRegex)].forEach(strLang => {\n if (keys.indexOf(strLang[1]) === -1) {\n keys.push(strLang[1]);\n }\n });\n });\n\n const stringValues = await getStrings(keys.map((key) => ({key, component})));\n return new Map(keys.map((key, index) => ([key, stringValues[index]])));\n};\n\n/**\n * Add custom components to standard components.\n */\nconst addCustomComponents = () => {\n if (customComponents.length > 0) {\n customComponents.forEach(customcomp => {\n if (Components.find(element => element.id == customcomp['id'] + 1000) == undefined) {\n Components.push({\n id: customcomp['id'] + 1000,\n name: customcomp['name'],\n buttonname: customcomp['buttonname'],\n type: 'custom',\n imageClass: 'c4l-custom-icon',\n code: replaceCustomPlaceholders(customcomp),\n text: customcomp['text'].length > 0 ? customcomp['text'] : '{{#textplaceholder}}',\n variants: customcomp['variants'] ? [\"full-width\"] : [],\n icon: customcomp['icon'],\n css: customcomp['css']\n });\n }\n });\n }\n};\n\n/**\n * Replace custom placeholders with values.\n *\n * @param {object} component\n * @return {string} HTML code.\n */\nconst replaceCustomPlaceholders = (component) => {\n let html = component['code'];\n const variants = component['variants'] ? \" {{VARIANTS}}\" : \"\";\n html = html.replace('{{CUSTOMCLASS}}', compPrefix + component['name'] + ' ' + compPrefix + \"custom-component\" + variants);\n\n return html;\n};\n"],"names":["_interopRequireDefault","obj","__esModule","default","_modal","_modal_factory","_modal_events","userStudent","previewC4L","allowedComponents","Contexts","langStrings","previewCSS","customComponents","_exports","handleAction","async","isStudent","editor","showPreview","getcustomComponents","addCustomComponents","getallowedComponents","getpreviewCSS","getAllStrings","loadVariantPreferences","Components","components","then","displayDialogue","data","Object","assign","modal","ModalFactory","create","type","C4LModal","TYPE","templateContext","getTemplateContext","large","modalClass","targetElm","closest","classList","add","styles","document","createElement","textContent","appendChild","show","getRoot","on","ModalEvents","hidden","handleModalHidden","querySelectorAll","forEach","node","addEventListener","event","handleButtonFilterClick","querySelector","handleSelectFilterChange","handleButtonClick","handleButtonMouseEvent","handleVariantClick","handleVariantMouseEvent","select","target","currentContext","value","indexOf","remove","showContextButtons","button","dataset","filter","selectedIndex","saveVariantPreferences","selectedButton","id","component","find","element","name","undefined","sel","selection","getContent","componentCode","code","placeholder","length","text","randomId","generateRandomID","newNode","innerHTML","replace","outerHTML","variants","getVariantsClass","join","getVariantsHtml","applyRandomID","applyLangStrings","setContent","nodeSel","dom","destroy","focus","previewDefault","toggle","variant","variantEnabled","state","updateVariantComponentState","stopPropagation","elementid","buttons","getButtons","filters","getFilters","preview","stringValues","getStrings","map","key","context","index","push","filterClass","buttonText","includes","variantsNode","buttonname","get","icon","imageClass","classComponent","htmlcode","css","getVariantsState","elements","variantState","variantClass","slice","variantExists","title","updateHtml","selectedVariant","componentClass","classcomponent","previewComponent","variantPreview","variantsHtml","removeVariant","updateVariantButtonState","addVariant","getVariantHtml","activate","showNodes","hideNodes","matchAll","strLang","timestamp","Date","getTime","Math","round","random","compRegex","match","keys","Map","customcomp","replaceCustomPlaceholders","html","compPrefix"],"mappings":"4PAmC4C,SAAAA,uBAAAC,KAAAA,OAAAA,KAAAA,IAAAC,WAAAD,IAAAE,CAAAA,QAAAF,IAAA;;;;;;;0FAX5CG,OAAAJ,uBAAAI,QACAC,eAAAL,uBAAAK,gBAUAC,cAAAN,uBAAAM,eAYA,IAAIC,aAAc,EACdC,YAAa,EACbC,kBAAoB,GACpBC,SAAW,GACXC,YAAc,CAAA,EACdC,WAAa,GACbC,iBAAmB,GAiBrBC,SAAAC,aAT0BC,eACxBT,aAAc,EAAAU,SAASA,WAACC,QACxBV,YAAa,EAAAW,SAAWA,aAACD,QACzBL,kBAAmB,EAAAO,SAAmBA,qBAACF,QACvCG,sBACAZ,mBAAoB,EAAAa,SAAoBA,sBAACJ,QACzCN,YAAa,EAAAW,SAAaA,eAACL,QAC3BP,kBAAoBa,iBACpB,EAAAC,aAAsBA,wBAACC,YAAUC,YAAEC,MAAK,IAAMC,gBAAgBX,SAAQ,EAQ1E,MAAMW,gBAAkBb,eACpB,MAAMc,KAAOC,OAAOC,OAAO,CAAE,EAAE,CAAE,GAG3BC,YAAcC,eAAY/B,QAACgC,OAAO,CACpCC,KAAMC,OAAQlC,QAACmC,KACfC,sBAAuBC,mBAAmBtB,OAAQY,MAClDW,OAAO,IAILC,WAAalC,WAAa,YAAc,uBAM9C,GAHAU,OAAOyB,UAAUC,QAAQ,QAAQC,UAAUC,IAAIJ,YAG5B,KAAf9B,WAAmB,CACnB,MAAMmC,OAASC,SAASC,cAAc,SACtCF,OAAOG,YAActC,WACrBM,OAAOyB,UAAUC,QAAQ,QAAQO,YAAYJ,OACjD,CAEAd,MAAMmB,OAGNnB,MAAMoB,UAAUC,GAAGC,cAAWpD,QAACqD,QAAQ,KACnCC,kBAAkBvC,OAAO,IAIbe,MAAMoB,UAAU,GAAGK,iBAAiB,sBAC5CC,SAAQC,OACZA,KAAKC,iBAAiB,SAAUC,QAC5BC,wBAAwBD,MAAO7B,MAAM,GACvC,IAGNA,MAAMoB,UAAU,GAAGW,cAAc,sBAAsBH,iBAAiB,UAAWC,QAChFG,yBAAyBH,MAAO7B,MAAM,IAIzBA,MAAMoB,UAAU,GAAGK,iBAAiB,uBAC5CC,SAAQC,OACZA,KAAKC,iBAAiB,SAAUC,QAC5BI,kBAAkBJ,MAAO5C,OAAQe,MAAM,IAEvCzB,aACAoD,KAAKC,iBAAiB,cAAeC,QACjCK,uBAAuBL,MAAO7B,OAAO,EAAK,IAE9C2B,KAAKC,iBAAiB,cAAeC,QACjCK,uBAAuBL,MAAO7B,OAAO,EAAM,IAEnD,IAIaA,MAAMoB,UAAU,GAAGK,iBAAiB,uBAC5CC,SAAQC,OACbA,KAAKC,iBAAiB,SAAUC,QAC5BM,mBAAmBN,MAAO7B,MAAM,IAEhCzB,aACAoD,KAAKC,iBAAiB,cAAeC,QACjCO,wBAAwBP,MAAO7B,OAAO,EAAK,IAE/C2B,KAAKC,iBAAiB,cAAeC,QACjCO,wBAAwBP,MAAO7B,OAAO,EAAM,IAEpD,GACF,EASAgC,yBAA2BA,CAACH,MAAO7B,SACrC,MAAMqC,OAASR,MAAMS,OAAO3B,QAAQ,UAEpC,GAAI0B,OAAQ,CACR,MAAME,eAAiBF,OAAOG,MAC9B,IAA0C,IAAtC/D,SAASgE,QAAQF,gBAAwB,CAEzBvC,MAAMoB,UAAU,GAC3BK,iBAAiB,+BACdC,SAAQC,MAAQA,KAAKf,UAAU8B,OAAO,+BAC/B1C,MAAMoB,UAAU,GAC1BW,cAAc,mCAAqCQ,eAAiB,MAClE3B,UAAUC,IAAI,6BAGrB8B,mBAAmB3C,MAAOuC,eAC9B,CACJ,GASET,wBAA0BA,CAACD,MAAO7B,SACpC,MAAM4C,OAASf,MAAMS,OAAO3B,QAAQ,UAE9B4B,eAAiBK,OAAOC,QAAQC,OAEtC,IAA0C,IAAtCrE,SAASgE,QAAQF,gBAAwB,CAEzBvC,MAAMoB,UAAU,GAAGK,iBAAiB,+BAC5CC,SAAQC,MAAQA,KAAKf,UAAU8B,OAAO,+BAC9CE,OAAOhC,UAAUC,IAAI,6BAGNb,MAAMoB,UAAU,GAAGW,cAAc,sBACzCgB,cAAgBtE,SAASgE,QAAQF,gBAGxCI,mBAAmB3C,MAAOuC,eAC9B,GAQEf,kBAAqBvC,SACvBA,OAAOyB,UAAUC,QAAQ,QAAQC,UAAU8B,OAAO,yBAClD,EAAAM,aAAAA,wBAAuBvD,YAAAA,WAAW,EAUhCwC,kBAAoBA,CAACJ,MAAO5C,OAAQe,SACtC,MAAMiD,eAAiBpB,MAAMS,OAAO3B,QAAQ,UAAUkC,QAAQK,GAGxDC,UAAY1D,YAAUC,WAAC0D,MAAKC,SAAWA,QAAQC,MAAQL,iBAC7D,GAAiBM,MAAbJ,UAAwB,CACxB,MAAMK,IAAMvE,OAAOwE,UAAUC,aAC7B,IAAIC,cAAgBR,UAAUS,KAC9B,MAAMC,YAAeL,IAAIM,OAAS,EAAIN,IAAML,UAAUY,KAGhDC,SAAWC,mBACXC,QAAUnD,SAASC,cAAc,QACvCkD,QAAQrB,QAAQK,GAAKc,SACrBE,QAAQC,UAAYN,YACpBF,cAAgBA,cAAcS,QAAQ,kBAAmBF,QAAQG,WAGjE,MAAMC,UAAW,EAAAC,aAAAA,kBAAiBpB,UAAUG,MAGxCgB,SAASR,OAAS,GAClBH,cAAgBA,cAAcS,QAAQ,eAAgBE,SAASE,KAAK,MACpEb,cAAgBA,cAAcS,QAAQ,oBAAoB,EAAAK,aAAAA,iBAAgBtB,UAAUG,SAEpFK,cAAgBA,cAAcS,QAAQ,eAAgB,IACtDT,cAAgBA,cAAcS,QAAQ,mBAAoB,KAI9DT,cAAgBe,cAAcf,eAG9BA,cAAgBgB,iBAAiBhB,eAGjC1E,OAAOwE,UAAUmB,WAAWjB,eAG5B,MAAMkB,QAAU5F,OAAO6F,IAAIzC,OAAO,iBAAmB2B,SAAW,MAC5Da,UAAU,IACV5F,OAAOwE,UAAUpB,OAAOwC,QAAQ,IAGpC7E,MAAM+E,UACN9F,OAAO+F,OACX,GAUE9C,uBAAyBA,CAACL,MAAO7B,MAAOmB,QAC1C,MAAM8B,eAAiBpB,MAAMS,OAAO3B,QAAQ,UAAUkC,QAAQK,GACxDvB,KAAO3B,MAAMoB,UAAU,GAAGW,cAAc,6BAA+BkB,eAAiB,MACxFgC,eAAiBjF,MAAMoB,UAAU,GAAGW,cAAc,uCAEpDJ,OACIR,MACA8D,eAAerE,UAAUsE,OAAO,cAChCvD,KAAKf,UAAUsE,OAAO,gBAEtBvD,KAAKf,UAAUsE,OAAO,cACtBD,eAAerE,UAAUsE,OAAO,eAExC,EAUE9C,wBAA0BA,CAACP,MAAO7B,MAAOmB,QAC3C,MAAMgE,QAAUtD,MAAMS,OAAO3B,QAAQ,QAC/ByE,eAA0C,MAAzBD,QAAQtC,QAAQwC,MACjCzC,OAASf,MAAMS,OAAO3B,QAAQ,UAE/ByE,gBACDE,4BAA4BH,QAASvC,OAAQ5C,MAAOmB,MAAM,EAC9D,EAUEgB,mBAAqBA,CAACN,MAAO7B,SAC/B6B,MAAM0D,kBACN,MAAMJ,QAAUtD,MAAMS,OAAO3B,QAAQ,QAC/BiC,OAASf,MAAMS,OAAO3B,QAAQ,UACpC2E,4BAA4BH,QAASvC,OAAQ5C,OAAO,GAAO,EAAK,EAU9DO,mBAAqBxB,MAAME,OAAQY,OAC9BC,OAAOC,OAAO,GAAI,CACrByF,UAAWvG,OAAOiE,GAClBuC,cAAeC,WAAWzG,QAC1B0G,cAAeC,aACfC,QAAStH,YACVsB,MAQD+F,WAAa7G,UACf,MAAM4G,QAAU,GACVG,mBAAqB,EAAAC,KAAAA,aAAWtH,SAASuH,KAAKC,MAAS,CAACA,QAAK9C,UAAAA,QAAAA,eAWnE,OARA1E,SAASiD,SAAQ,CAACwE,QAASC,SACvBR,QAAQS,KAAK,CACT9C,KAAMwC,aAAaK,OACnBhG,KAAM+F,QACNG,YAAuB,IAAVF,MAAc,4BAA8B,IAC3D,IAGCR,OAAO,EASZD,WAAczG,SAChB,MAAMwG,QAAU,GACVjC,IAAMvE,OAAOwE,UAAUC,aAC7B,IAAIC,cAAgB,GAChBE,YAAc,GACdS,SAAW,GACXgC,WAAa,GAqDjB,OAlDA7G,YAAAA,WAAWiC,SAASyB,YAChB,IAAK7E,aAAgBA,aAAeE,kBAAkB+H,SAASpD,UAAUG,MAAQ,CAC7E,GAAI/E,WAAY,CACZsF,YAAeL,IAAIM,OAAS,EAAIN,IAAML,UAAUY,KAChDJ,cAAgBR,UAAUS,KAC1BD,cAAgBA,cAAcS,QAAQ,kBAAmBP,aAEzDS,UAAW,EAAAC,aAAAA,kBAAiBpB,UAAUG,MAGtC,MAAMkD,aAAezF,SAASC,cAAc,QAC5CwF,aAAa3D,QAAQK,GAAK,eAAiBC,UAAUD,GACjDoB,SAASR,OAAS,GAClBH,cAAgBA,cAAcS,QAAQ,eAAgBE,SAASE,KAAK,MACpEgC,aAAarC,WAAY,EAAAM,8BAAgBtB,UAAUG,MACnDK,cAAgBA,cAAcS,QAAQ,mBAAoBoC,aAAanC,aAEvEV,cAAgBA,cAAcS,QAAQ,eAAgB,IACtDT,cAAgBA,cAAcS,QAAQ,mBAAoBoC,aAAanC,YAI3EV,cAAgBgB,iBAAiBhB,cACrC,EAG0C,IAAtClF,SAASgE,QAAQU,UAAUhD,OAC3B1B,SAAS2H,KAAKjD,UAAUhD,MAG5BmG,WAA+B,UAAlBnD,UAAUhD,KAAmBgD,UAAUsD,WAAa/H,YAAYgI,IAAIvD,UAAUG,MAC3FmC,QAAQW,KAAK,CACTlD,GAAIC,UAAUG,KACdA,KAAMgD,WACNnG,KAAMgD,UAAUhD,KAChBwG,KAAMxD,UAAUwD,MAAQ,GACxBC,WAAYzD,UAAUyD,WACtBC,eAvWG,QAuW0B1D,UAAUG,KACvCwD,SAAUnD,cACVoD,IAAK5D,UAAU4D,KAAO,GACtBzC,SAAU0C,iBAAiB7D,UAAUG,KAAMH,UAAUmB,YAIhB,IAArC7F,SAASgE,QAAQU,UAAUhD,QAC3BsF,QAAQA,QAAQ3B,OAAS,GAAG8C,YAAc,cAElD,KAGGnB,OAAO,EAUZuB,iBAAmBA,CAAC7D,UAAW8D,YACjC,MAAM3C,SAAW,GACjB,IAAI4C,aAAe,GACfC,aAAe,GAyBnB,OAtBIF,SAASnD,OAAS,IAClBmD,SAAWA,SAASG,MAAM,EAAG,IAGjCH,SAASvF,SAAQ,CAACyD,QAASgB,UACnB,EAAAkB,aAAaA,eAAClE,UAAWgC,UACzB+B,aAAe,KACfC,aAAe,QAEfD,aAAe,MACfC,aAAe,IAEnBA,cAAgBhC,QAAU,YAAc+B,aACxC5C,SAAS8B,KAAK,CACVlD,GAAIiD,MACJ7C,KAAM6B,QACNE,MAAO6B,aACPN,WAAYO,aACZG,MAAO5I,YAAYgI,IAAIvB,UACzB,IAGCb,QAAQ,EAYbgB,4BAA8BA,CAACH,QAASvC,OAAQ5C,MAAOmB,KAAMoG,cAC/D,MAAMC,gBAAkB,OAASrC,QAAQtC,QAAQsC,QAAU,WACrDhC,UAAY1D,YAAAA,WAAW2D,MAAKC,SAAWA,QAAQC,MAAQV,OAAOC,QAAQK,KACtEuE,eAAiB7E,OAAOC,QAAQ6E,eAChCC,iBAAmB3H,MAAMoB,UAAU,GACpCW,cAAc,6BAA+Ba,OAAOC,QAAQK,GAAK,OAASuE,gBACzEG,eAAiB5H,MAAMoB,UAAU,GAClCW,cAAc,6BAA+Ba,OAAOC,QAAQK,GAAK,MACtE,IAAI2E,aAAe,GAEfF,iBACIJ,YAC6B,MAAzBpC,QAAQtC,QAAQwC,QAChB,EAAAyC,aAAAA,eAAc3E,UAAUG,KAAM6B,QAAQtC,QAAQsC,SAC9C4C,yBAAyB5C,SAAS,GAClCwC,iBAAiB/G,UAAU8B,OAAO8E,oBAElC,EAAAQ,aAAAA,YAAW7E,UAAUG,KAAM6B,QAAQtC,QAAQsC,SAC3C4C,yBAAyB5C,SAAS,GAClCwC,iBAAiB/G,UAAUC,IAAI2G,kBAI/BI,iBACAA,eAAezD,WAAY,EAAAM,8BAAgBtB,UAAUG,SAGzDuE,cAAe,EAAApD,aAAAA,iBAAgBtB,UAAUG,MACrCnC,MACAwG,iBAAiB/G,UAAUC,IAAI2G,iBAC/BK,eAAgB,EAAAI,aAAcA,gBAAC9C,QAAQtC,QAAQsC,UAE/CwC,iBAAiB/G,UAAU8B,OAAO8E,iBAIlCI,iBACAA,eAAezD,UAAY0D,eAI/BN,aAE6B,MAAzBpC,QAAQtC,QAAQwC,QAChB,EAAAyC,aAAAA,eAAc3E,UAAUG,KAAM6B,QAAQtC,QAAQsC,SAC9C4C,yBAAyB5C,SAAS,MAElC,EAAA6C,aAAAA,YAAW7E,UAAUG,KAAM6B,QAAQtC,QAAQsC,SAC3C4C,yBAAyB5C,SAAS,IAG9C,EASE4C,yBAA2BA,CAAC5C,QAAS+C,YACnCA,UACA/C,QAAQtC,QAAQwC,MAAQ,KACxBF,QAAQvE,UAAU8B,OAAOyC,QAAQtC,QAAQsC,QAAU,gBACnDA,QAAQvE,UAAUC,IAAIsE,QAAQtC,QAAQsC,QAAU,eAChDA,QAAQvE,UAAUC,IAAI,QAEtBsE,QAAQtC,QAAQwC,MAAQ,MACxBF,QAAQvE,UAAU8B,OAAOyC,QAAQtC,QAAQsC,QAAU,eACnDA,QAAQvE,UAAUC,IAAIsE,QAAQtC,QAAQsC,QAAU,gBAChDA,QAAQvE,UAAU8B,OAAO,MAC7B,EASEC,mBAAqBA,CAAC3C,MAAOkG,WAC/B,MAAMiC,UAAYnI,MAAMoB,UAAU,GAAGK,iBAAiB,qBAAuByE,QAAU,MACjFkC,UAAYpI,MAAMoB,UAAU,GAAGK,iBAAiB,qCAAuCyE,QAAU,OAEvGiC,UAAUzG,SAAQC,MAAQA,KAAKf,UAAU8B,OAAO,gBAChD0F,UAAU1G,SAAQC,MAAQA,KAAKf,UAAUC,IAAI,eAAc,EASzD8D,iBAAoBZ,OAGtB,IAAIA,KAAKsE,SAFS,kBAEY3G,SAAQ4G,UAClCvE,KAAOA,KAAKK,QAAQ,MAAQkE,QAAQ,GAAK,KAAM5J,YAAYgI,IAAI4B,QAAQ,IAAI,IAGxEvE,MAOLE,iBAAmBA,KACrB,MAAMsE,WAAY,IAAIC,MAAOC,UAC7B,MAAO,IAAMC,KAAKC,MAAsB,IAAhBD,KAAKE,UAAqB,IAAML,SAAS,EAQ/D7D,cAAiBX,OACnB,MAAM8E,UAAY,WAMlB,OAJI9E,KAAK+E,MAAMD,aACX9E,KAAOA,KAAKK,QAAQyE,UAAW5E,qBAG5BF,IAAI,EAQTxE,cAAgBR,UAClB,MAAMgK,KAAO,GACPF,UAAY,gBAElBpJ,YAAAA,WAAWiC,SAAQ2B,WAG4B,GAAvCA,QAAQC,KAAKb,QAAQ,eACrBsG,KAAK3C,KAAK/C,QAAQC,MAItBD,QAAQiB,SAAS5C,SAAQyD,WACU,IAA3B4D,KAAKtG,QAAQ0C,UACb4D,KAAK3C,KAAKjB,QACd,IAIJ,IAAI9B,QAAQO,KAAKyE,SAASQ,YAAYnH,SAAQ4G,WACR,IAA9BS,KAAKtG,QAAQ6F,QAAQ,KACrBS,KAAK3C,KAAKkC,QAAQ,GACtB,IAIJ,IAAIjF,QAAQU,KAAKsE,SAASQ,YAAYnH,SAAQ4G,WACR,IAA9BS,KAAKtG,QAAQ6F,QAAQ,KACrBS,KAAK3C,KAAKkC,QAAQ,GACtB,GACF,IAGN,MAAMxC,mBAAqB,EAAAC,KAAAA,aAAWgD,KAAK/C,KAAKC,MAAS,CAACA,QAAK9C,UAAAA,QAAAA,eAC/D,OAAO,IAAI6F,IAAID,KAAK/C,KAAI,CAACC,IAAKE,QAAW,CAACF,IAAKH,aAAaK,UAAU,EAMpE/G,oBAAsBA,KACpBR,iBAAiBkF,OAAS,GAC1BlF,iBAAiB8C,SAAQuH,aACoD1F,MAArE9D,uBAAW2D,MAAKC,SAAWA,QAAQH,IAAM+F,WAAe,GAAI,OAC5DxJ,YAAUC,WAAC0G,KAAK,CACZlD,GAAI+F,WAAe,GAAI,IACvB3F,KAAM2F,WAAiB,KACvBxC,WAAYwC,WAAuB,WACnC9I,KAAM,SACNyG,WAAY,kBACZhD,KAAMsF,0BAA0BD,YAChClF,KAAMkF,WAAiB,KAAEnF,OAAS,EAAImF,WAAiB,KAAI,uBAC3D3E,SAAU2E,WAAqB,SAAI,CAAC,cAAgB,GACpDtC,KAAMsC,WAAiB,KACvBlC,IAAKkC,WAAgB,KAE7B,GAER,EASEC,0BAA6B/F,YAC/B,IAAIgG,KAAOhG,UAAgB,KAC3B,MAAMmB,SAAWnB,UAAoB,SAAI,gBAAkB,GAG3D,OAFAgG,KAAOA,KAAK/E,QAAQ,kBAjnBL,QAinBqCjB,UAAgB,KAA7BiG,yBAAyE9E,UAEzG6E,IAAI,CACb"} \ No newline at end of file diff --git a/amd/build/variants.min.js b/amd/build/variants.min.js index ed6b993..d84cb5a 100644 --- a/amd/build/variants.min.js +++ b/amd/build/variants.min.js @@ -1,3 +1,11 @@ -define("tiny_c4l/variants",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={variants:[{id:0,name:"align-center",html:""},{id:1,name:"align-left",html:""},{id:2,name:"align-right",html:""},{id:3,name:"caption",html:'
Consectetur adipiscing elit.\n Marcus Tullius Cicero,\n De Finibus Bonorum et Malorum'}]};return _exports.default=_default,_exports.default})); +define("tiny_c4l/variants",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0; +/** + * Tiny C4L components variants. + * + * @module tiny_c4l/variants + * @copyright 2023 Marc Català + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */ +const variants=[{id:0,name:"align-center",html:""},{id:1,name:"align-left",html:""},{id:2,name:"align-right",html:""},{id:3,name:"caption",html:'
Consectetur adipiscing elit.\n Marcus Tullius Cicero,\n De Finibus Bonorum et Malorum'}];_exports.default={variants:variants};return _exports.default})); //# sourceMappingURL=variants.min.js.map \ No newline at end of file diff --git a/amd/build/variants.min.js.map b/amd/build/variants.min.js.map index 05c9caa..7cc0b59 100644 --- a/amd/build/variants.min.js.map +++ b/amd/build/variants.min.js.map @@ -1 +1 @@ -{"version":3,"file":"variants.min.js","sources":["../src/variants.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 * Tiny C4L components variants.\n *\n * @module tiny_c4l/variants\n * @copyright 2023 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst variants = [\n {\n id: 0,\n name: \"align-center\",\n html: \"\",\n },\n {\n id: 1,\n name: \"align-left\",\n html: \"\",\n },\n {\n id: 2,\n name: \"align-right\",\n html: \"\",\n },\n {\n id: 3,\n name: \"caption\",\n html:\n `
Consectetur adipiscing elit.\n \n Source: Phasellus a posuere nibh.
`,\n },\n {\n id: 4,\n name: \"comfort-reading\",\n html: \"\",\n },\n {\n id: 5,\n name: \"dont-card-only\",\n html: \"\",\n },\n {\n id: 6,\n name: \"full-width\",\n html: \"\",\n },\n {\n id: 7,\n name: \"ordered-list\",\n html: \"\",\n },\n {\n id: 8,\n name: \"quote\",\n html:\n `
Marcus Tullius Cicero,\n De Finibus Bonorum et Malorum
`,\n },\n];\n\nexport default {\n variants,\n};\n"],"names":["variants","id","name","html"],"mappings":"wJA4Ee,CACPA,SAtDS,CACb,CACIC,GAAI,EACJC,KAAM,eACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,aACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,cACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,UACNC,gPAKJ,CACIF,GAAI,EACJC,KAAM,kBACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,iBACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,aACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,eACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,QACNC"} \ No newline at end of file +{"version":3,"file":"variants.min.js","sources":["../src/variants.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 * Tiny C4L components variants.\n *\n * @module tiny_c4l/variants\n * @copyright 2023 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst variants = [\n {\n id: 0,\n name: \"align-center\",\n html: \"\",\n },\n {\n id: 1,\n name: \"align-left\",\n html: \"\",\n },\n {\n id: 2,\n name: \"align-right\",\n html: \"\",\n },\n {\n id: 3,\n name: \"caption\",\n html:\n `
Consectetur adipiscing elit.\n \n Source: Phasellus a posuere nibh.
`,\n },\n {\n id: 4,\n name: \"comfort-reading\",\n html: \"\",\n },\n {\n id: 5,\n name: \"dont-card-only\",\n html: \"\",\n },\n {\n id: 6,\n name: \"full-width\",\n html: \"\",\n },\n {\n id: 7,\n name: \"ordered-list\",\n html: \"\",\n },\n {\n id: 8,\n name: \"quote\",\n html:\n `
Marcus Tullius Cicero,\n De Finibus Bonorum et Malorum
`,\n },\n];\n\nexport default {\n variants,\n};\n"],"names":["variants","id","name","html","_exports","default"],"mappings":";;;;;;;;AAuBA,MAAMA,SAAW,CACb,CACIC,GAAI,EACJC,KAAM,eACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,aACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,cACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,UACNC,KACK,2OAIT,CACIF,GAAI,EACJC,KAAM,kBACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,iBACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,aACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,eACNC,KAAM,IAEV,CACIF,GAAI,EACJC,KAAM,QACNC,KACK,sJAGXC,SAAAC,QAEa,CACPL,mBACP,OAAAI,SAAAC,OAAA"} \ No newline at end of file diff --git a/amd/build/variantslib.min.js b/amd/build/variantslib.min.js index 15e88a6..32d5505 100644 --- a/amd/build/variantslib.min.js +++ b/amd/build/variantslib.min.js @@ -1,10 +1,10 @@ -define("tiny_c4l/variantslib",["exports","core/ajax","core/notification","./components","./variants"],(function(_exports,_ajax,_notification,_components,_variants){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}} +define("tiny_c4l/variantslib",["exports","core/ajax","core/notification","./variants"],(function(_exports,_ajax,_notification,_variants){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}} /** * Variants helper for C4L plugin. * * @module tiny_c4l/variantslib * @copyright 2023 Marc Català * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.variantExists=_exports.saveVariantPreferences=_exports.removeVariant=_exports.loadVariantPreferences=_exports.getVariantsHtml=_exports.getVariantsClass=_exports.getVariantHtml=_exports.addVariant=void 0,_ajax=_interopRequireDefault(_ajax),_notification=_interopRequireDefault(_notification);let variantPreferences={};_exports.loadVariantPreferences=async()=>{const request={methodname:"core_user_get_user_preferences",args:{name:"c4l_components_variants"}};return _ajax.default.call([request])[0].then((result=>{let comp={},rawPreferences={},variantObj={};try{rawPreferences=JSON.parse(result.preferences[0].value)}catch(e){_notification.default.exception(e)}null!==rawPreferences&&Object.keys(rawPreferences).forEach((preference=>{comp=_components.components.find((component=>component.id==preference)),null!=comp&&(variantPreferences[comp.name]=[],rawPreferences[preference].forEach((variant=>{variantObj=_variants.variants.find((element=>element.id==variant)),null!=variantObj&&variantPreferences[comp.name].push(variantObj.name)})))}))})).catch(_notification.default.exception)};_exports.saveVariantPreferences=()=>{let comp={},rawPreferences={},variantObj={};Object.keys(variantPreferences).forEach((preference=>{comp=_components.components.find((component=>component.name==preference)),null!=comp&&(rawPreferences[comp.id]=[],variantPreferences[preference].forEach((variant=>{variantObj=_variants.variants.find((element=>element.name==variant)),null!=variantObj&&rawPreferences[comp.id].push(variantObj.id)})))}));const request={methodname:"core_user_update_user_preferences",args:{preferences:[{type:"c4l_components_variants",value:JSON.stringify(rawPreferences)}]}};return _ajax.default.call([request])[0].catch(_notification.default.exception)};const variantExists=(component,variant)=>(null==variantPreferences?void 0:variantPreferences[component])&&-1!==variantPreferences[component].indexOf(variant);_exports.variantExists=variantExists;_exports.getVariantsClass=component=>{let variants=[];return null!=variantPreferences&&variantPreferences[component]&&variantPreferences[component].forEach((variant=>{variants.push("c4l-"+variant+"-variant")})),variants};_exports.getVariantsHtml=component=>{let variantsHtml="",variantObj={};return null!=variantPreferences&&variantPreferences[component]&&variantPreferences[component].forEach((variant=>{variantObj=_variants.variants.find((element=>element.name==variant)),null!=variantObj&&(variantsHtml+=variantObj.html)})),variantsHtml};_exports.getVariantHtml=variant=>{let variantHtml=[],variantObj={};return variantObj=_variants.variants.find((element=>element.name==variant)),null!=variantObj&&(variantHtml=variantObj.html),variantHtml};_exports.addVariant=(component,variant)=>{null!=variantPreferences&&variantPreferences[component]||(variantPreferences[component]=[]),variantExists(component,variant)||variantPreferences[component].push(variant)};_exports.removeVariant=(component,variant)=>{const index=variantPreferences[component].indexOf(variant);-1!==index&&delete variantPreferences[component][index]}})); + */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.variantExists=_exports.saveVariantPreferences=_exports.removeVariant=_exports.loadVariantPreferences=_exports.getVariantsHtml=_exports.getVariantsClass=_exports.getVariantHtml=_exports.addVariant=void 0,_ajax=_interopRequireDefault(_ajax),_notification=_interopRequireDefault(_notification);let variantPreferences={};_exports.loadVariantPreferences=async components=>{const request={methodname:"core_user_get_user_preferences",args:{name:"c4l_components_variants"}};return _ajax.default.call([request])[0].then((result=>{let comp={},rawPreferences={},variantComp={},variantObj={};try{rawPreferences=JSON.parse(result.preferences[0].value)}catch(e){_notification.default.exception(e)}null!==rawPreferences&&Object.keys(rawPreferences).forEach((preference=>{comp=components.find((component=>component.id==preference)),null!=comp&&(variantPreferences[comp.name]=[],rawPreferences[preference].forEach((variant=>{variantObj=_variants.variants.find((element=>element.id==variant)),null!=variantObj&&(variantComp=comp.variants.find((element=>element==variantObj.name)),null!=variantComp&&variantPreferences[comp.name].push(variantObj.name))})))}))})).catch(_notification.default.exception)};_exports.saveVariantPreferences=components=>{let comp={},rawPreferences={},variantObj={};Object.keys(variantPreferences).forEach((preference=>{comp=components.find((component=>component.name==preference)),null!=comp&&(rawPreferences[comp.id]=[],variantPreferences[preference].forEach((variant=>{variantObj=_variants.variants.find((element=>element.name==variant)),null!=variantObj&&rawPreferences[comp.id].push(variantObj.id)})))}));const request={methodname:"core_user_update_user_preferences",args:{preferences:[{type:"c4l_components_variants",value:JSON.stringify(rawPreferences)}]}};return _ajax.default.call([request])[0].catch(_notification.default.exception)};const variantExists=(component,variant)=>variantPreferences?.[component]&&-1!==variantPreferences[component].indexOf(variant);_exports.variantExists=variantExists;_exports.getVariantsClass=component=>{let variants=[];return variantPreferences?.[component]&&variantPreferences[component].forEach((variant=>{variants.push("c4l-"+variant+"-variant")})),variants};_exports.getVariantsHtml=component=>{let variantsHtml="",variantObj={};return variantPreferences?.[component]&&variantPreferences[component].forEach((variant=>{variantObj=_variants.variants.find((element=>element.name==variant)),null!=variantObj&&(variantsHtml+=variantObj.html)})),variantsHtml};_exports.getVariantHtml=variant=>{let variantHtml=[],variantObj={};return variantObj=_variants.variants.find((element=>element.name==variant)),null!=variantObj&&(variantHtml=variantObj.html),variantHtml};_exports.addVariant=(component,variant)=>{variantPreferences?.[component]||(variantPreferences[component]=[]),variantExists(component,variant)||variantPreferences[component].push(variant)};_exports.removeVariant=(component,variant)=>{const index=variantPreferences[component].indexOf(variant);-1!==index&&delete variantPreferences[component][index]}})); //# sourceMappingURL=variantslib.min.js.map \ No newline at end of file diff --git a/amd/build/variantslib.min.js.map b/amd/build/variantslib.min.js.map index 25a02c4..601c41e 100644 --- a/amd/build/variantslib.min.js.map +++ b/amd/build/variantslib.min.js.map @@ -1 +1 @@ -{"version":3,"file":"variantslib.min.js","sources":["../src/variantslib.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 * Variants helper for C4L plugin.\n *\n * @module tiny_c4l/variantslib\n * @copyright 2023 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Ajax from 'core/ajax';\nimport Notification from 'core/notification';\nimport {components as COMPONENTS} from './components';\nimport {variants as VARIANTS} from './variants';\n\nconst variantsPreferenceName = 'c4l_components_variants';\nlet variantPreferences = {};\n\n/**\n * Load user preferences.\n *\n * @returns {Promise}\n */\nexport const loadVariantPreferences = async() => {\n\n const request = {\n methodname: 'core_user_get_user_preferences',\n args: {\n name: variantsPreferenceName\n }\n };\n\n return Ajax.call([request])[0]\n .then(result => {\n let comp = {};\n let rawPreferences = {};\n let variantObj = {};\n try {\n rawPreferences = JSON.parse(result.preferences[0].value);\n } catch (e) {\n Notification.exception(e);\n }\n\n if (rawPreferences !== null) {\n Object.keys(rawPreferences).forEach(preference => {\n comp = COMPONENTS.find(component => component.id == preference);\n if (comp != undefined) {\n variantPreferences[comp.name] = [];\n rawPreferences[preference].forEach((variant) => {\n variantObj = VARIANTS.find(element => element.id == variant);\n if (variantObj != undefined) {\n variantPreferences[comp.name].push(variantObj.name);\n }\n });\n }\n });\n }\n }).catch(Notification.exception);\n};\n\n/**\n * Save user preferences.\n *\n * @returns {Promise}\n */\nexport const saveVariantPreferences = () => {\n let comp = {};\n let rawPreferences = {};\n let variantObj = {};\n Object.keys(variantPreferences).forEach(preference => {\n comp = COMPONENTS.find(component => component.name == preference);\n if (comp != undefined) {\n rawPreferences[comp.id] = [];\n variantPreferences[preference].forEach((variant) => {\n variantObj = VARIANTS.find(element => element.name == variant);\n if (variantObj != undefined) {\n rawPreferences[comp.id].push(variantObj.id);\n }\n });\n }\n });\n\n const request = {\n methodname: 'core_user_update_user_preferences',\n args: {\n preferences: [\n {\n type: variantsPreferenceName,\n value: JSON.stringify(rawPreferences)\n }\n ]\n }\n };\n\n return Ajax.call([request])[0].catch(Notification.exception);\n};\n\n\n/**\n * Returns whether a variant exists for a component.\n *\n * @param {string} component Component name\n * @param {string} variant Variant name\n * @returns {bool}\n */\nexport const variantExists = (component, variant) => {\n return variantPreferences?.[component] && variantPreferences[component].indexOf(variant) !== -1;\n};\n\n/**\n * Returns each variant for a component as a CSS class.\n *\n * @param {string} component Component name\n * @returns {Array}\n */\nexport const getVariantsClass = (component) => {\n let variants = [];\n\n if (variantPreferences?.[component]) {\n variantPreferences[component].forEach(variant => {\n variants.push('c4l-' + variant + '-variant');\n });\n }\n return variants;\n};\n\n/**\n * Return all HTML variants for a component.\n *\n * @param {string} component Component name\n * @returns {string}\n */\nexport const getVariantsHtml = (component) => {\n let variantsHtml = '';\n let variantObj = {};\n\n if (variantPreferences?.[component]) {\n variantPreferences[component].forEach(variant => {\n variantObj = VARIANTS.find(element => element.name == variant);\n if (variantObj != undefined) {\n variantsHtml += variantObj.html;\n }\n });\n }\n return variantsHtml;\n};\n\n/**\n * Return the HTML variant.\n *\n * @param {string} variant Variant name\n * @returns {string}\n */\nexport const getVariantHtml = (variant) => {\n let variantHtml = [];\n let variantObj = {};\n\n variantObj = VARIANTS.find(element => element.name == variant);\n if (variantObj != undefined) {\n variantHtml = variantObj.html;\n }\n return variantHtml;\n};\n\n/**\n * Add a variant to variantPreferences\n *\n * @param {string} component Component name\n * @param {string} variant Variant name\n */\nexport const addVariant = (component, variant) => {\n if (!variantPreferences?.[component]) {\n variantPreferences[component] = [];\n }\n if (!variantExists(component, variant)) {\n variantPreferences[component].push(variant);\n }\n};\n\n/**\n * Remove a variant from variantPreferences\n *\n * @param {string} component Component name\n * @param {string} variant Variant name\n */\nexport const removeVariant = (component, variant) => {\n const index = variantPreferences[component].indexOf(variant);\n if (index !== -1) {\n delete variantPreferences[component][index];\n }\n};\n"],"names":["_interopRequireDefault","obj","__esModule","default","_ajax","_notification","variantPreferences","_exports","loadVariantPreferences","async","request","methodname","args","name","Ajax","call","then","result","comp","rawPreferences","variantObj","JSON","parse","preferences","value","e","Notification","exception","Object","keys","forEach","preference","COMPONENTS","find","component","id","undefined","variant","VARIANTS","element","push","catch","saveVariantPreferences","type","stringify","variantExists","indexOf","getVariantsClass","variants","getVariantsHtml","variantsHtml","html","getVariantHtml","variantHtml","addVariant","removeVariant","index"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"variantslib.min.js","sources":["../src/variantslib.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 * Variants helper for C4L plugin.\n *\n * @module tiny_c4l/variantslib\n * @copyright 2023 Marc Català \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Ajax from 'core/ajax';\nimport Notification from 'core/notification';\nimport {variants as VARIANTS} from './variants';\n\nconst variantsPreferenceName = 'c4l_components_variants';\nlet variantPreferences = {};\n\n/**\n * Load user preferences.\n *\n * @param {object} components [description]\n * @returns {Promise}\n */\nexport const loadVariantPreferences = async(components) => {\n\n const request = {\n methodname: 'core_user_get_user_preferences',\n args: {\n name: variantsPreferenceName\n }\n };\n\n return Ajax.call([request])[0]\n .then(result => {\n let comp = {};\n let rawPreferences = {};\n let variantComp = {};\n let variantObj = {};\n try {\n rawPreferences = JSON.parse(result.preferences[0].value);\n } catch (e) {\n Notification.exception(e);\n }\n\n if (rawPreferences !== null) {\n Object.keys(rawPreferences).forEach(preference => {\n comp = components.find(component => component.id == preference);\n if (comp != undefined) {\n variantPreferences[comp.name] = [];\n rawPreferences[preference].forEach((variant) => {\n variantObj = VARIANTS.find(element => element.id == variant);\n if (variantObj != undefined) {\n // Avoid invalid variants saved previously.\n variantComp = comp.variants.find(element => element == variantObj.name);\n if (variantComp != undefined) {\n variantPreferences[comp.name].push(variantObj.name);\n }\n }\n });\n }\n });\n }\n }).catch(Notification.exception);\n};\n\n/**\n * Save user preferences.\n *\n * @param {object} components [description]\n * @returns {Promise}\n */\nexport const saveVariantPreferences = (components) => {\n let comp = {};\n let rawPreferences = {};\n let variantObj = {};\n Object.keys(variantPreferences).forEach(preference => {\n comp = components.find(component => component.name == preference);\n if (comp != undefined) {\n rawPreferences[comp.id] = [];\n variantPreferences[preference].forEach((variant) => {\n variantObj = VARIANTS.find(element => element.name == variant);\n if (variantObj != undefined) {\n rawPreferences[comp.id].push(variantObj.id);\n }\n });\n }\n });\n\n const request = {\n methodname: 'core_user_update_user_preferences',\n args: {\n preferences: [\n {\n type: variantsPreferenceName,\n value: JSON.stringify(rawPreferences)\n }\n ]\n }\n };\n\n return Ajax.call([request])[0].catch(Notification.exception);\n};\n\n\n/**\n * Returns whether a variant exists for a component.\n *\n * @param {string} component Component name\n * @param {string} variant Variant name\n * @returns {bool}\n */\nexport const variantExists = (component, variant) => {\n return variantPreferences?.[component] && variantPreferences[component].indexOf(variant) !== -1;\n};\n\n/**\n * Returns each variant for a component as a CSS class.\n *\n * @param {string} component Component name\n * @returns {Array}\n */\nexport const getVariantsClass = (component) => {\n let variants = [];\n\n if (variantPreferences?.[component]) {\n variantPreferences[component].forEach(variant => {\n variants.push('c4l-' + variant + '-variant');\n });\n }\n return variants;\n};\n\n/**\n * Return all HTML variants for a component.\n *\n * @param {string} component Component name\n * @returns {string}\n */\nexport const getVariantsHtml = (component) => {\n let variantsHtml = '';\n let variantObj = {};\n\n if (variantPreferences?.[component]) {\n variantPreferences[component].forEach(variant => {\n variantObj = VARIANTS.find(element => element.name == variant);\n if (variantObj != undefined) {\n variantsHtml += variantObj.html;\n }\n });\n }\n return variantsHtml;\n};\n\n/**\n * Return the HTML variant.\n *\n * @param {string} variant Variant name\n * @returns {string}\n */\nexport const getVariantHtml = (variant) => {\n let variantHtml = [];\n let variantObj = {};\n\n variantObj = VARIANTS.find(element => element.name == variant);\n if (variantObj != undefined) {\n variantHtml = variantObj.html;\n }\n return variantHtml;\n};\n\n/**\n * Add a variant to variantPreferences\n *\n * @param {string} component Component name\n * @param {string} variant Variant name\n */\nexport const addVariant = (component, variant) => {\n if (!variantPreferences?.[component]) {\n variantPreferences[component] = [];\n }\n if (!variantExists(component, variant)) {\n variantPreferences[component].push(variant);\n }\n};\n\n/**\n * Remove a variant from variantPreferences\n *\n * @param {string} component Component name\n * @param {string} variant Variant name\n */\nexport const removeVariant = (component, variant) => {\n const index = variantPreferences[component].indexOf(variant);\n if (index !== -1) {\n delete variantPreferences[component][index];\n }\n};\n"],"names":["_interopRequireDefault","obj","__esModule","default","_ajax","_notification","variantPreferences","_exports","loadVariantPreferences","async","request","methodname","args","name","Ajax","call","then","result","comp","rawPreferences","variantComp","variantObj","JSON","parse","preferences","value","e","Notification","exception","Object","keys","forEach","preference","components","find","component","id","undefined","variant","VARIANTS","element","variants","push","catch","saveVariantPreferences","type","stringify","variantExists","indexOf","getVariantsClass","getVariantsHtml","variantsHtml","html","getVariantHtml","variantHtml","addVariant","removeVariant","index"],"mappings":"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"} \ No newline at end of file diff --git a/amd/src/commands.js b/amd/src/commands.js index 3d83c4d..cc7b6b3 100644 --- a/amd/src/commands.js +++ b/amd/src/commands.js @@ -30,7 +30,10 @@ import { c4lMenuItemName, icon, } from './common'; -import {isC4LVisible} from './options'; +import { + isC4LVisible, + getpreviewCSS +} from './options'; export const getSetup = async() => { const [ @@ -62,6 +65,9 @@ export const getSetup = async() => { text: c4lMenuItemNameTitle, onAction: () => handleAction(editor), }); + + // Inject custom CSS. + editor.options.set('content_style', getpreviewCSS(editor)); } }; }; diff --git a/amd/src/components.js b/amd/src/components.js index acff8be..6653201 100644 --- a/amd/src/components.js +++ b/amd/src/components.js @@ -50,8 +50,8 @@ const components = [ type: "contextual", imageClass: "c4l-reminder-icon", code: - `

+ `

{{PLACEHOLDER}}


`, text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.", variants: ["full-width"], @@ -116,8 +116,8 @@ const components = [ imageClass: "c4l-example-icon", code: `

Lorem ipsum dolor sit amet

-

{{PLACEHOLDER}}


`, + aria-label="{{#example}}">

Lorem ipsum dolor sit amet

+

{{PLACEHOLDER}}


`, text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." + " Phasellus a posuere nibh, eu mollis lacus." + @@ -217,8 +217,8 @@ const components = [
{{#learningoutcomes}}
  • {{PLACEHOLDER}}
  • Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
    • -
  • Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. - Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


`, +
  • Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. + Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.


    • `, text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, " + "enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.", @@ -230,8 +230,8 @@ const components = [ type: "evaluative", imageClass: "c4l-gradingvalue-icon", code: - `

    {{#gradingvalue}}: {{PLACEHOLDER}}
    `, + `

    {{#gradingvalue}}: {{PLACEHOLDER}}
    `, text: "33.3%", variants: ["align-left"], }, diff --git a/amd/src/options.js b/amd/src/options.js index 9f82b49..9456439 100644 --- a/amd/src/options.js +++ b/amd/src/options.js @@ -28,6 +28,8 @@ const isstudentName = getPluginOptionName(pluginName, 'isstudent'); const allowedcompsName = getPluginOptionName(pluginName, 'allowedcomps'); const showpreviewName = getPluginOptionName(pluginName, 'showpreview'); const viewc4lName = getPluginOptionName(pluginName, 'viewc4l'); +const previewCSS = getPluginOptionName(pluginName, 'previewcss'); +const customComps = getPluginOptionName(pluginName, 'customcomps'); export const register = (editor) => { const registerOption = editor.options.register; @@ -51,6 +53,16 @@ export const register = (editor) => { processor: 'boolean', "default": true, }); + + registerOption(previewCSS, { + processor: 'string', + "default": '', + }); + + registerOption(customComps, { + processor: 'array', + "default": [], + }); }; /** @@ -84,3 +96,19 @@ export const showPreview = (editor) => editor.options.get(showpreviewName); * @returns {object} */ export const getallowedComponents = (editor) => editor.options.get(allowedcompsName); + +/** + * Get custom components configuration for the Tiny C4L plugin. + * + * @param {TinyMCE} editor + * @returns {object} + */ +export const getcustomComponents = (editor) => editor.options.get(customComps); + +/** + * Get custom preview CSS configuration for the Tiny C4L plugin. + * + * @param {TinyMCE} editor + * @returns {string} + */ +export const getpreviewCSS = (editor) => editor.options.get(previewCSS); diff --git a/amd/src/plugin.js b/amd/src/plugin.js index e632410..84a8e93 100644 --- a/amd/src/plugin.js +++ b/amd/src/plugin.js @@ -29,7 +29,7 @@ import {register as registerOptions} from './options'; import {getSetup as getCommandSetup} from './commands'; import * as Configuration from './configuration'; -// Setup the tiny_c4l Plugin. +// eslint-disable-next-line no-async-promise-executor export default new Promise(async(resolve) => { const [ tinyMCE, diff --git a/amd/src/ui.js b/amd/src/ui.js index db6f40e..bc67fb6 100644 --- a/amd/src/ui.js +++ b/amd/src/ui.js @@ -29,7 +29,9 @@ import {get_strings as getStrings} from 'core/str'; import { isStudent, getallowedComponents, - showPreview + showPreview, + getpreviewCSS, + getcustomComponents } from './options'; import ModalEvents from 'core/modal_events'; import { @@ -48,6 +50,9 @@ let previewC4L = true; let allowedComponents = []; let Contexts = []; let langStrings = {}; +let previewCSS = ''; +let customComponents = []; +const compPrefix = 'c4lv-'; /** * Handle action @@ -57,9 +62,12 @@ let langStrings = {}; export const handleAction = async(editor) => { userStudent = isStudent(editor); previewC4L = showPreview(editor); - langStrings = await getAllStrings(); + customComponents = getcustomComponents(editor); + addCustomComponents(); allowedComponents = getallowedComponents(editor); - loadVariantPreferences().then(() => displayDialogue(editor)); + previewCSS = getpreviewCSS(editor); + langStrings = await getAllStrings(); + loadVariantPreferences(Components).then(() => displayDialogue(editor)); }; /** @@ -77,10 +85,19 @@ const displayDialogue = async(editor) => { large: true, }); - // Set modal size when no preview. - if (!previewC4L) { - editor.targetElm.closest('body').classList.add('c4l-modal-no-preview'); + // Choose class to modal. + const modalClass = previewC4L ? 'c4l-modal' : 'c4l-modal-no-preview'; + + // Set class to modal. + editor.targetElm.closest('body').classList.add(modalClass); + + // Inject custom component styles in editor. + if (previewCSS !== "") { + const styles = document.createElement('style'); + styles.textContent = previewCSS; + editor.targetElm.closest('body').appendChild(styles); } + modal.show(); // Event modal listener. @@ -192,7 +209,7 @@ const handleButtonFilterClick = (event, modal) => { */ const handleModalHidden = (editor) => { editor.targetElm.closest('body').classList.remove('c4l-modal-no-preview'); - saveVariantPreferences(); + saveVariantPreferences(Components); }; /** @@ -206,10 +223,11 @@ const handleButtonClick = (event, editor, modal) => { const selectedButton = event.target.closest('button').dataset.id; // Component button. - if (Components?.[selectedButton]) { + const component = Components.find(element => element.name == selectedButton); + if (component != undefined) { const sel = editor.selection.getContent(); - let componentCode = Components[selectedButton].code; - const placeholder = (sel.length > 0 ? sel : Components[selectedButton].text); + let componentCode = component.code; + const placeholder = (sel.length > 0 ? sel : component.text); // Create a new node to replace the placeholder. const randomId = generateRandomID(); @@ -219,12 +237,12 @@ const handleButtonClick = (event, editor, modal) => { componentCode = componentCode.replace('{{PLACEHOLDER}}', newNode.outerHTML); // Return active variants for current component. - const variants = getVariantsClass(Components[selectedButton].name); + const variants = getVariantsClass(component.name); // Apply variants to html component. if (variants.length > 0) { componentCode = componentCode.replace('{{VARIANTS}}', variants.join(' ')); - componentCode = componentCode.replace('{{VARIANTSHTML}}', getVariantsHtml(Components[selectedButton].name)); + componentCode = componentCode.replace('{{VARIANTSHTML}}', getVariantsHtml(component.name)); } else { componentCode = componentCode.replace('{{VARIANTS}}', ''); componentCode = componentCode.replace('{{VARIANTSHTML}}', ''); @@ -353,9 +371,10 @@ const getButtons = (editor) => { let componentCode = ''; let placeholder = ''; let variants = []; + let buttonText = ''; // Iterate over components. - Components.forEach((component, index) => { + Components.forEach((component) => { if (!userStudent || (userStudent && allowedComponents.includes(component.name))) { if (previewC4L) { placeholder = (sel.length > 0 ? sel : component.text); @@ -385,13 +404,16 @@ const getButtons = (editor) => { Contexts.push(component.type); } + buttonText = component.type == 'custom' ? component.buttonname : langStrings.get(component.name); buttons.push({ - id: index, - name: langStrings.get(component.name), + id: component.name, + name: buttonText, type: component.type, + icon: component.icon ?? '', imageClass: component.imageClass, - classComponent: 'c4lv-' + component.name, + classComponent: compPrefix + component.name, htmlcode: componentCode, + css: component.css ?? '', variants: getVariantsState(component.name, component.variants), }); @@ -454,32 +476,32 @@ const getVariantsState = (component, elements) => { */ const updateVariantComponentState = (variant, button, modal, show, updateHtml) => { const selectedVariant = 'c4l-' + variant.dataset.variant + '-variant'; - const selectedButton = button.dataset.id; + const component = Components.find(element => element.name == button.dataset.id); const componentClass = button.dataset.classcomponent; const previewComponent = modal.getRoot()[0] - .querySelector('div[data-id="code-preview-' + selectedButton + '"] .' + componentClass); + .querySelector('div[data-id="code-preview-' + button.dataset.id + '"] .' + componentClass); const variantPreview = modal.getRoot()[0] - .querySelector('span[data-id="variantHTML-' + selectedButton + '"]'); + .querySelector('span[data-id="variantHTML-' + button.dataset.id + '"]'); let variantsHtml = ''; if (previewComponent) { if (updateHtml) { if (variant.dataset.state == 'on') { - removeVariant(Components[selectedButton].name, variant.dataset.variant); + removeVariant(component.name, variant.dataset.variant); updateVariantButtonState(variant, false); previewComponent.classList.remove(selectedVariant); } else { - addVariant(Components[selectedButton].name, variant.dataset.variant); + addVariant(component.name, variant.dataset.variant); updateVariantButtonState(variant, true); previewComponent.classList.add(selectedVariant); } // Update variant preview HTML. if (variantPreview) { - variantPreview.innerHTML = getVariantsHtml(Components[selectedButton].name); + variantPreview.innerHTML = getVariantsHtml(component.name); } } else { - variantsHtml = getVariantsHtml(Components[selectedButton].name); + variantsHtml = getVariantsHtml(component.name); if (show) { previewComponent.classList.add(selectedVariant); variantsHtml += getVariantHtml(variant.dataset.variant); @@ -493,13 +515,15 @@ const updateVariantComponentState = (variant, button, modal, show, updateHtml) = } } } else { - // Update variants preferences. - if (variant.dataset.state == 'on') { - removeVariant(Components[selectedButton].name, variant.dataset.variant); - updateVariantButtonState(variant, false); - } else { - addVariant(Components[selectedButton].name, variant.dataset.variant); - updateVariantButtonState(variant, true); + if (updateHtml) { + // Update variants preferences. + if (variant.dataset.state == 'on') { + removeVariant(component.name, variant.dataset.variant); + updateVariantButtonState(variant, false); + } else { + addVariant(component.name, variant.dataset.variant); + updateVariantButtonState(variant, true); + } } } }; @@ -548,7 +572,7 @@ const applyLangStrings = (text) => { const compRegex = /{{#([^}]*)}}/g; [...text.matchAll(compRegex)].forEach(strLang => { - text = text.replace('{{#' + strLang[1] +'}}', langStrings.get(strLang[1])); + text = text.replace('{{#' + strLang[1] + '}}', langStrings.get(strLang[1])); }); return text; @@ -588,20 +612,72 @@ const getAllStrings = async() => { const compRegex = /{{#([^}]*)}}/g; Components.forEach(element => { - keys.push(element.name); + + // Only add name from standard components. + if (element.name.indexOf("customcomp") == -1) { + keys.push(element.name); + } + + // Get lang strings from variants. element.variants.forEach(variant => { if (keys.indexOf(variant) === -1) { keys.push(variant); } }); + // Get lang strings from components. [...element.code.matchAll(compRegex)].forEach(strLang => { if (keys.indexOf(strLang[1]) === -1) { keys.push(strLang[1]); } }); + + // Get lang strings from text placeholders. + [...element.text.matchAll(compRegex)].forEach(strLang => { + if (keys.indexOf(strLang[1]) === -1) { + keys.push(strLang[1]); + } + }); }); const stringValues = await getStrings(keys.map((key) => ({key, component}))); return new Map(keys.map((key, index) => ([key, stringValues[index]]))); }; + +/** + * Add custom components to standard components. + */ +const addCustomComponents = () => { + if (customComponents.length > 0) { + customComponents.forEach(customcomp => { + if (Components.find(element => element.id == customcomp['id'] + 1000) == undefined) { + Components.push({ + id: customcomp['id'] + 1000, + name: customcomp['name'], + buttonname: customcomp['buttonname'], + type: 'custom', + imageClass: 'c4l-custom-icon', + code: replaceCustomPlaceholders(customcomp), + text: customcomp['text'].length > 0 ? customcomp['text'] : '{{#textplaceholder}}', + variants: customcomp['variants'] ? ["full-width"] : [], + icon: customcomp['icon'], + css: customcomp['css'] + }); + } + }); + } +}; + +/** + * Replace custom placeholders with values. + * + * @param {object} component + * @return {string} HTML code. + */ +const replaceCustomPlaceholders = (component) => { + let html = component['code']; + const variants = component['variants'] ? " {{VARIANTS}}" : ""; + html = html.replace('{{CUSTOMCLASS}}', compPrefix + component['name'] + ' ' + compPrefix + "custom-component" + variants); + + return html; +}; diff --git a/amd/src/variantslib.js b/amd/src/variantslib.js index 4beee7a..71089e9 100644 --- a/amd/src/variantslib.js +++ b/amd/src/variantslib.js @@ -23,7 +23,6 @@ import Ajax from 'core/ajax'; import Notification from 'core/notification'; -import {components as COMPONENTS} from './components'; import {variants as VARIANTS} from './variants'; const variantsPreferenceName = 'c4l_components_variants'; @@ -32,9 +31,10 @@ let variantPreferences = {}; /** * Load user preferences. * + * @param {object} components [description] * @returns {Promise} */ -export const loadVariantPreferences = async() => { +export const loadVariantPreferences = async(components) => { const request = { methodname: 'core_user_get_user_preferences', @@ -47,6 +47,7 @@ export const loadVariantPreferences = async() => { .then(result => { let comp = {}; let rawPreferences = {}; + let variantComp = {}; let variantObj = {}; try { rawPreferences = JSON.parse(result.preferences[0].value); @@ -56,13 +57,17 @@ export const loadVariantPreferences = async() => { if (rawPreferences !== null) { Object.keys(rawPreferences).forEach(preference => { - comp = COMPONENTS.find(component => component.id == preference); + comp = components.find(component => component.id == preference); if (comp != undefined) { variantPreferences[comp.name] = []; rawPreferences[preference].forEach((variant) => { variantObj = VARIANTS.find(element => element.id == variant); if (variantObj != undefined) { - variantPreferences[comp.name].push(variantObj.name); + // Avoid invalid variants saved previously. + variantComp = comp.variants.find(element => element == variantObj.name); + if (variantComp != undefined) { + variantPreferences[comp.name].push(variantObj.name); + } } }); } @@ -74,14 +79,15 @@ export const loadVariantPreferences = async() => { /** * Save user preferences. * + * @param {object} components [description] * @returns {Promise} */ -export const saveVariantPreferences = () => { +export const saveVariantPreferences = (components) => { let comp = {}; let rawPreferences = {}; let variantObj = {}; Object.keys(variantPreferences).forEach(preference => { - comp = COMPONENTS.find(component => component.name == preference); + comp = components.find(component => component.name == preference); if (comp != undefined) { rawPreferences[comp.id] = []; variantPreferences[preference].forEach((variant) => { diff --git a/classes/plugininfo.php b/classes/plugininfo.php index 910b83f..018a40f 100644 --- a/classes/plugininfo.php +++ b/classes/plugininfo.php @@ -73,6 +73,8 @@ public static function get_plugin_configuration_for_context( array $fpoptions, ?\editor_tiny\editor $editor = null ): array { + + $config = get_config('tiny_c4l'); $viewc4l = has_capability('tiny/c4l:viewplugin', $context); $showpreview = get_config('tiny_c4l', 'enablepreview'); $isstudent = !has_capability('gradereport/grader:view', $context); @@ -83,11 +85,115 @@ public static function get_plugin_configuration_for_context( $allowedcomps = array_merge($aimedcomps, $notintendedcomps); } + // Get CSS preview. + $previewcss = $config->custompreviewcss ?? ''; + + // Get custom components. + $customcomponents = self::get_custom_components($config); + return [ 'isstudent' => $isstudent, 'allowedcomps' => $allowedcomps, 'showpreview' => ($showpreview == '1'), 'viewc4l' => $viewc4l, + 'previewcss' => $previewcss, + 'customcomps' => $customcomponents, ]; } + + /** + * Get the custom components. + * + * @param stdClass $config tiny_c4l config + * @return array + */ + public static function get_custom_components(\stdClass $config) { + global $OUTPUT; + + $customcomponents = []; + if ($config->customcompcount > 0) { + $context = \context_system::instance(); + if ($config->customimagesbank) { + // Get filearea. + $fs = get_file_storage(); + + // Get all files from filearea. + $files = $fs->get_area_files($context->id, 'tiny_c4l', 'customimagesbank', + false, 'itemid', false); + $customfiles = []; + foreach ($files as $file) { + $customfiles[$file->get_filename()] = $file; + } + } + for ($i = 1; $i <= $config->customcompcount; $i++) { + $compcode = "customcompcode{$i}"; + $compenable = "customcompenable{$i}"; + $compname = "customcompname{$i}"; + if ($config->$compenable === '1' + && !empty(trim($config->$compname)) + && !empty(trim($config->$compcode))) { + + // Component parameters. + $compicon = "customcompicon{$i}"; + $compimage = "customcompimage{$i}"; + $comptext = "customcomptext{$i}"; + $compvar = "customcompvariant{$i}"; + $compsort = "customcompsortorder{$i}"; + + if (!empty($config->$compicon)) { + $icon = \moodle_url::make_pluginfile_url($context->id, 'tiny_c4l', + "customcompicon{$i}", 0, '/', basename($config->$compicon)); + } else { + $icon = $OUTPUT->image_url('c4l_customcomponent_icon', 'tiny_c4l'); + } + + // Replace {} before searching for images and cleaning code (FORMAT_HTML). + $html = str_replace('{{CUSTOMCLASS}}', '~~CUSTOMCLASS~~', $config->$compcode); + $html = str_replace('{{PLACEHOLDER}}', '~~PLACEHOLDER~~', $html); + + // Set url images. + $html = preg_replace_callback('/{{([^}]*)}}/', + function ($matches) use ($customfiles) { + if (isset($matches[1]) && isset($customfiles[$matches[1]])) { + $file = $customfiles[$matches[1]]; + $fileurl = \moodle_url::make_pluginfile_url($file->get_contextid(), $file->get_component(), + $file->get_filearea(), $file->get_itemid(), $file->get_filepath(), + $file->get_filename(), false)->out(); + + return $fileurl; + } else { + return ''; + } + }, + $html + ); + + // Clean HTML code. + $html = format_text($html, FORMAT_HTML); + $html = preg_replace('/ style=("|\')(.*?)("|\')/', '', $html); + + // Restore {}. + $html = str_replace('~~CUSTOMCLASS~~', '{{CUSTOMCLASS}}', $html); + $html = str_replace('~~PLACEHOLDER~~', '{{PLACEHOLDER}}', $html); + + $key = count($customcomponents); + $customcomponents[$key]['id'] = $i; + $customcomponents[$key]['name'] = 'customcomp' . $i; + $customcomponents[$key]['buttonname'] = $config->$compname; + $customcomponents[$key]['icon'] = $icon->out(); + $customcomponents[$key]['code'] = $html; + $customcomponents[$key]['text'] = $config->$comptext ?? ''; + $customcomponents[$key]['variants'] = $config->$compvar === '1'; + $customcomponents[$key]['sortorder'] = $config->$compsort; + } + } + + // Sort components. + usort($customcomponents, function($a, $b) { + return $a['sortorder'] <=> $b['sortorder']; + }); + } + + return $customcomponents; + } } diff --git a/db/access.php b/db/access.php index fe3095f..6d53677 100644 --- a/db/access.php +++ b/db/access.php @@ -32,7 +32,7 @@ 'student' => CAP_ALLOW, 'teacher' => CAP_ALLOW, 'editingteacher' => CAP_ALLOW, - 'manager' => CAP_ALLOW - ] - ] + 'manager' => CAP_ALLOW, + ], + ], ]; diff --git a/editor_styles.css b/editor_styles.css index 524777e..df90478 100644 --- a/editor_styles.css +++ b/editor_styles.css @@ -1 +1 @@ -.c4l-spacer{display:block;height:12px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote,.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-readingcontext,.c4l-spacer+.c4lv-readingcontext{margin-top:16px;margin-bottom:4px}.c4l-spacer+.c4l-figure,.c4l-spacer+.c4lv-figure{margin:24px auto 14px auto}.c4l-spacer+.c4l-proceduralcontext,.c4l-spacer+.c4lv-proceduralcontext{margin-bottom:0;padding-top:0;padding-bottom:0}.c4l-inline-group{display:flex;flex-direction:row;align-content:flex-end;justify-content:flex-end}.c4l-display-left{display:flex;flex-direction:row;align-content:flex-start;justify-content:flex-start}.c4l-spacer+.c4l-display-left{margin-top:0}.c4l-embedded-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-embedded-caption span{text-transform:uppercase;font-size:14px}.c4l-embedded-caption span::after{content:", "}.c4l-keyconcept,.c4lv-keyconcept{min-width:200px;max-width:99%;background-color:#f1f5fe;padding:24px 36px 30px 36px;border:none;border-left:6px solid #387af1;margin:36px auto;position:relative;border-radius:0}.c4l-keyconcept p:last-of-type,.c4lv-keyconcept p:last-of-type{margin-bottom:0}.c4l-tip,.c4lv-tip{min-width:200px;max-width:99%;background-color:#fbeffa;padding:24px 48px 30px 36px;border:none;border-left:6px solid #b00ca9;margin:36px auto;position:relative;border-radius:0}.c4l-tip p:last-of-type,.c4lv-tip p:last-of-type{margin-bottom:0}.c4l-tip::after,.c4lv-tip::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);position:absolute;top:6px;right:-3px}.c4l-reminder,.c4lv-reminder{min-width:200px;max-width:99%;background-color:#eff8fd;padding:24px 48px 30px 36px;border:none;border-left:6px solid #16b9ff;margin:36px auto;position:relative;border-radius:0}.c4l-reminder p:last-of-type,.c4lv-reminder p:last-of-type{margin-bottom:0}.c4l-reminder::after,.c4lv-reminder::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);position:absolute;top:6px;right:-3px}.c4l-attention,.c4lv-attention{min-width:200px;max-width:99%;background-color:#fef6ed;padding:24px 48px 30px 36px;border:none;border-left:6px solid #f88923;margin:36px auto;position:relative;border-radius:0}.c4l-attention p:last-of-type,.c4lv-attention p:last-of-type{margin-bottom:0}.c4l-attention::after,.c4lv-attention::after{content:url([[pix:tiny_c4l|c4l_attention]]);position:absolute;top:6px;right:-3px}.c4l-quote,.c4lv-quote{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:24px;margin:24px auto;min-width:200px;max-width:100%}.c4l-quote .c4l-quote-body,.c4lv-quote .c4l-quote-body{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:space-between;font-style:italic}.c4l-quote .c4l-quote-line,.c4lv-quote .c4l-quote-line{border-left:4px solid #387af1;margin-right:16px;margin-top:4px;margin-bottom:2px}.c4l-quote .c4l-quote-text::before,.c4lv-quote .c4l-quote-text::before{content:"";position:static;top:0;margin-right:0}.c4l-quote .c4l-quote-text::after,.c4lv-quote .c4l-quote-text::after{content:"";position:static;top:0;margin-left:0}.c4l-quote .c4l-quote-text p:first-of-type::before,.c4lv-quote .c4l-quote-text p:first-of-type::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);position:relative;top:-4px;margin-right:2px}.c4l-quote .c4l-quote-text p:last-of-type::after,.c4lv-quote .c4l-quote-text p:last-of-type::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);position:relative;top:-2px;margin-left:2px}.c4l-quote .c4l-quote-text p:last-of-type,.c4lv-quote .c4l-quote-text p:last-of-type{margin-bottom:0}.c4l-quote .c4l-quote-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-quote .c4l-quote-caption span{text-transform:uppercase;font-size:14px}.c4l-quote .c4l-quote-caption span::after{content:", "}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{margin-top:36px}.c4l-dodontcards .c4l-dodontcards-dont,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:36px}.c4l-dodontcards>.c4l-dodontcards-dont,.c4lv-dodontcards>.c4l-dodontcards-dont{margin-top:12px}.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{min-width:200px;max-width:100%;background:#f1fbf5;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-do::before,.c4lv-dodontcards .c4l-dodontcards-do::before{content:url([[pix:tiny_c4l|c4l_docard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{min-width:200px;max-width:100%;background:#ffefef;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-dont::before,.c4lv-dodontcards .c4l-dodontcards-dont::before{content:url([[pix:tiny_c4l|c4l_dontcard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-do p,.c4l-dodontcards .c4l-dodontcards-dont p,.c4lv-dodontcards .c4l-dodontcards-do p,.c4lv-dodontcards .c4l-dodontcards-dont p{margin-bottom:6px}.c4l-dodontcards .c4l-dodontcards-do p:last-of-type,.c4l-dodontcards .c4l-dodontcards-dont p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-do p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-dont p:last-of-type{margin-bottom:0}.c4l-readingcontext,.c4lv-readingcontext{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:36px auto}.c4l-readingcontext p,.c4lv-readingcontext p{font-size:16px;line-height:23px}.c4l-readingcontext{padding:30px 40px 19px 40px;font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-readingcontext .c4l-readingcontext-caption{font-size:16px;margin-top:24px;text-align:right;padding-bottom:14px;font-style:italic}.c4l-readingcontext .c4l-readingcontext-caption span{text-transform:uppercase;font-size:16px;font-style:normal}.c4l-readingcontext .c4l-readingcontext-caption span::after{content:", "}.c4lv-readingcontext{padding:30px 40px 32px 40px;font-family:sans-serif}.c4lv-readingcontext p:last-of-type{margin-bottom:0}.c4lv-readingcontext .c4l-embedded-caption{margin-top:1rem;font-size:16px;font-style:italic}.c4lv-readingcontext.c4l-comfort-reading-variant{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-example,.c4lv-example{font-size:15px;line-height:22px;color:inherit;background:#fff;border-radius:0;margin:36px auto;min-width:75%;max-width:100%;padding:18px 24px;position:relative;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-example h1,.c4lv-example h1{font-weight:700;font-size:11px;line-height:21px;letter-spacing:.5px;color:#3171e3;margin:0 0 24px 0;text-transform:uppercase;font-family:inherit;display:inline-block;border-bottom:2px solid #3171e3}.c4l-figure,.c4lv-figure{min-width:200px;margin:48px auto}.c4l-figure img,.c4lv-figure img{width:100%}.c4l-figure img:not([src]),.c4l-figure img[src=""],.c4lv-figure img:not([src]),.c4lv-figure img[src=""]{content:url([[pix:tiny_c4l|c4l_figure_placeholder]])}.c4l-figure figcaption,.c4lv-figure figcaption{font-size:13px;line-height:16px;color:#686d79;margin-top:7px}.c4l-figure .c4l-figure-footer::after,.c4lv-figure .c4l-figure-footer::after{content:" | ";font-weight:normal;font-style:normal}.c4l-figure .c4l-figure-caption,.c4lv-figure .c4l-figure-caption{font-style:normal;font-size:12px}.c4l-figure figcaption span strong,.c4lv-figure figcaption span strong{font-weight:700}.c4l-figure{max-width:100%}.c4lv-figure{max-width:75%}.c4l-tag,.c4lv-tag{display:inline-block;font-size:10px;font-weight:700;color:#2167cf;background-color:#f1f5fe;border-radius:30px;padding:4px 17px;line-height:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.2px}.c4lv-tag.c4l-align-right-variant{margin-left:auto}.c4l-estimatedtime,.c4lv-estimatedtime{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-estimatedtime span,.c4lv-estimatedtime span{font-weight:600;font-size:10px}.c4l-estimatedtime::before,.c4lv-estimatedtime::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);position:absolute;left:12px}.c4lv-estimatedtime.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-duedate,.c4lv-duedate{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:600;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-duedate::after,.c4lv-duedate::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);position:absolute;left:12px}.c4lv-duedate.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-proceduralcontext,.c4lv-proceduralcontext{font-style:italic;color:#3a56af;margin-bottom:12px;padding-top:24px;padding-bottom:24px;font-weight:400}.c4l-gradingvalue,.c4lv-gradingvalue{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-gradingvalue span,.c4lv-gradingvalue span{font-weight:600;font-size:10px}.c4l-gradingvalue::after,.c4lv-gradingvalue::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);position:absolute;left:12px;top:6px}.c4lv-gradingvalue.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-expectedfeedback,.c4lv-expectedfeedback{min-width:200px;max-width:90%;background-color:#fff;padding:24px 36px 30px 36px;margin:36px auto;font-style:italic;position:relative;border-radius:8px;border:none;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-expectedfeedback::before,.c4lv-expectedfeedback::before{content:""}.c4l-expectedfeedback::after,.c4lv-expectedfeedback::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);position:absolute;bottom:6px;right:-3px}.c4l-expectedfeedback p:last-of-type,.c4lv-expectedfeedback p:last-of-type{margin-bottom:0}.c4l-allpurposecard,.c4lv-allpurposecard{min-width:200px;max-width:100%;background:#f1f5fe;border-radius:10px;padding:24px 48px 30px 36px;margin:24px auto;position:relative}.c4l-allpurposecard p,.c4lv-allpurposecard p{margin-bottom:6px}.c4l-allpurposecard p:last-of-type,.c4lv-allpurposecard p:last-of-type{margin-bottom:0}.c4l-spacer+.c4l-allpurposecard{margin:0 auto}.c4l-inlinetag,.c4lv-inlinetag{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;display:inline-block;color:#fff;background:#3171e3;border-radius:7px;padding:2px 7px 1px 7px;position:relative;top:-2px;margin-left:4px;margin-right:4px}.c4l-learningoutcomes,.c4lv-learningoutcomes{min-width:200px;max-width:99%;background-color:#f2f5fd;padding:24px 48px 30px 36px;border:none;margin:36px auto;position:relative;border-radius:0}.c4l-learningoutcomes p:last-of-type,.c4lv-learningoutcomes p:last-of-type{margin-bottom:0}.c4l-learningoutcomes .c4l-learningoutcomes-title,.c4lv-learningoutcomes .c4l-learningoutcomes-title{position:relative;top:-11px;left:-39px;padding:6px 14px 5px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:600;font-size:11px;letter-spacing:.7px;color:#fff;background-color:#497ae9;text-transform:uppercase;font-family:inherit;display:inline-block;margin-top:0;filter:drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07))}.c4l-learningoutcomes .c4l-learningoutcomes-title::before,.c4lv-learningoutcomes .c4l-learningoutcomes-title::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);position:absolute;width:3px;height:2px;top:15.5px;left:.5px}.c4l-learningoutcomes .c4l-learningoutcomes-list,.c4lv-learningoutcomes .c4l-learningoutcomes-list{margin-top:18px;margin-bottom:18px;padding-left:32px}.c4l-learningoutcomes .c4l-learningoutcomes-list>li,.c4lv-learningoutcomes .c4l-learningoutcomes-list>li{position:relative}.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child){margin-bottom:21px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before{background-image:url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);background-size:9px 11px;display:inline-block;width:9px;height:11px;content:"";justify-self:center;position:absolute;left:-32px;top:7px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker{color:rgba(0,0,0,0)}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list{counter-reset:section}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before{background-image:none;position:absolute;left:-32px;top:0;counter-increment:section;content:counter(section) ". ";font-weight:700;color:#497ae9}body.mce-content-body .collapse:not(.show),.c4l-code-preview .collapse:not(.show){display:block !important}@media only screen and (min-width: 576px){.c4l-select-filters{display:none}.c4l-buttons-filters{display:flex;justify-content:center;align-items:center;margin:16px 0 37px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:24px auto 8px auto}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:12px auto 0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:12px auto 6px auto;padding:36px 48px}.c4l-embedded-caption{margin-top:24px}.c4l-quote,.c4lv-quote{margin:36px auto;max-width:90%}.c4l-quote .c4l-quote-caption{margin-top:24px}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-dont{max-width:90%;margin:24px auto}.c4l-readingcontext,.c4lv-readingcontext{max-width:88%}.c4l-example,.c4lv-example{max-width:88%;padding:36px 48px}.c4l-expectedfeedback,.c4lv-expectedfeedback{max-width:88%;margin:48px auto}.c4l-allpurposecard,.c4lv-allpurposecard{margin:36px auto;max-width:90%}}@media only screen and (min-width: 768px){.c4l-keyconcept,.c4lv-keyconcept,.c4l-tip,.c4lv-tip,.c4l-reminder,.c4lv-reminder,.c4l-attention,.c4lv-attention,.c4l-dodontcards-do,.c4lv-dodontcards-do,.c4l-dodontcards-dont,.c4lv-dodontcards-dont,.c4l-readingcontext,.c4lv-readingcontext,.c4l-expectedfeedback,.c4lv-expectedfeedback,.c4l-allpurposecard,.c4lv-allpurposecard,.c4l-learningoutcomes,.c4lv-learningoutcomes{max-width:75%}.c4l-keyconcept.c4l-full-width-variant,.c4lv-keyconcept.c4l-full-width-variant,.c4l-tip.c4l-full-width-variant,.c4lv-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-readingcontext.c4l-full-width-variant,.c4lv-readingcontext.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant{max-width:100%}.c4l-quote,.c4lv-quote{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:24px auto 14px auto}.c4l-example,.c4lv-example{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:24px auto 12px auto}}@media only screen and (min-width: 992px){.c4l-modal-no-preview.modal-open .modal-dialog{max-width:500px}.c4l-buttons-preview{max-height:314px}.c4l-buttons-preview.c4l-no-preview{justify-content:center;max-height:324px}.c4l-buttons-preview.c4l-no-preview .c4l-buttons-grid{grid-gap:9px;justify-content:center;width:405px}.c4l-buttons-preview.c4l-no-preview .c4l-code-preview{display:none}.c4l-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill, 116px);grid-template-rows:repeat(auto-fill, 100px);grid-gap:4px;justify-content:flex-start;width:377px;padding:3px 0 3px 3px}.c4lt-dialog-button{height:100px;width:116px;max-width:116px;box-shadow:none;border-radius:4px;margin-bottom:0}.c4lt-dialog-button .c4l-button-text::before{top:20px;left:0;right:0;height:20px;width:26px;margin:0 auto;border-right:none}.c4lt-dialog-button .c4l-button-text{padding:55px 8px 15px 8px;font-size:12px;font-weight:500;line-height:13px;width:80px;text-align:center;justify-content:center}.c4lt-dialog-button .c4l-button-variants{grid-auto-flow:row;grid-gap:0;align-content:flex-start;justify-content:start;width:36px;height:99px;background-color:#ecf3ff;margin:0}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;color:#1679f9;height:33px;width:36px}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:0 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:first-child,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:nth-child(2){border-bottom:1px solid #fff}.c4lt-dialog-button:hover .c4l-button-variants .c4l-button-variant{box-shadow:none}.c4l-code-preview{position:relative;display:flex;flex-direction:column;height:300px;width:343px;align-items:center;justify-content:center}.c4l-preview-default{border:1px solid #e1e5ee;border-radius:8px;color:#9297a1;padding:23px 10px;font-weight:400;font-size:12px;line-height:16px;text-align:center;width:60%;margin:0 auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.c4l-text-preview{position:absolute;top:10px;right:10px;font-weight:600;font-size:9.5px;line-height:11px;letter-spacing:.06em;color:#fff;background-color:#535d76;border-radius:6px;padding:5px;text-transform:uppercase}}.c4l-keyconcept.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant,.c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-figure.c4l-full-width-variant,.c4l-proceduralcontext.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant{max-width:100%}.c4l-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant{max-width:99%}.c4l-readingcontext.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant{max-width:94%}.c4lv-keyconcept.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4lv-dodontcards.c4l-full-width-variant,.c4lv-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-figure.c4l-full-width-variant,.c4lv-proceduralcontext.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant{max-width:100%}.c4lv-tip.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant{max-width:99%}.c4lv-readingcontext.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant{max-width:94%} +.c4l-spacer{display:block;height:12px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote,.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-readingcontext,.c4l-spacer+.c4lv-readingcontext{margin-top:16px;margin-bottom:4px}.c4l-spacer+.c4l-figure,.c4l-spacer+.c4lv-figure{margin:24px auto 14px auto}.c4l-spacer+.c4l-proceduralcontext,.c4l-spacer+.c4lv-proceduralcontext{margin-bottom:0;padding-top:0;padding-bottom:0}.c4l-inline-group{display:flex;flex-direction:row;align-content:flex-end;justify-content:flex-end}.c4l-display-left{display:flex;flex-direction:row;align-content:flex-start;justify-content:flex-start}.c4l-spacer+.c4l-display-left{margin-top:0}.c4l-embedded-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-embedded-caption span{text-transform:uppercase;font-size:14px}.c4l-embedded-caption span::after{content:", "}.c4l-keyconcept,.c4lv-keyconcept{min-width:200px;max-width:99%;background-color:#f1f5fe;padding:24px 36px 30px 36px;border:none;border-left:6px solid #387af1;margin:36px auto;position:relative;border-radius:0}.c4l-keyconcept p:last-of-type,.c4lv-keyconcept p:last-of-type{margin-bottom:0}.c4l-tip,.c4lv-tip{min-width:200px;max-width:99%;background-color:#fbeffa;padding:24px 48px 30px 36px;border:none;border-left:6px solid #b00ca9;margin:36px auto;position:relative;border-radius:0}.c4l-tip p:last-of-type,.c4lv-tip p:last-of-type{margin-bottom:0}.c4l-tip::after,.c4lv-tip::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);position:absolute;top:6px;right:-3px}.c4l-reminder,.c4lv-reminder{min-width:200px;max-width:99%;background-color:#eff8fd;padding:24px 48px 30px 36px;border:none;border-left:6px solid #16b9ff;margin:36px auto;position:relative;border-radius:0}.c4l-reminder p:last-of-type,.c4lv-reminder p:last-of-type{margin-bottom:0}.c4l-reminder::after,.c4lv-reminder::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);position:absolute;top:6px;right:-3px}.c4l-attention,.c4lv-attention{min-width:200px;max-width:99%;background-color:#fef6ed;padding:24px 48px 30px 36px;border:none;border-left:6px solid #f88923;margin:36px auto;position:relative;border-radius:0}.c4l-attention p:last-of-type,.c4lv-attention p:last-of-type{margin-bottom:0}.c4l-attention::after,.c4lv-attention::after{content:url([[pix:tiny_c4l|c4l_attention]]);position:absolute;top:6px;right:-3px}.c4l-quote,.c4lv-quote{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:24px;margin:24px auto;min-width:200px;max-width:100%}.c4l-quote .c4l-quote-body,.c4lv-quote .c4l-quote-body{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:space-between;font-style:italic}.c4l-quote .c4l-quote-line,.c4lv-quote .c4l-quote-line{border-left:4px solid #387af1;margin-right:16px;margin-top:4px;margin-bottom:2px}.c4l-quote .c4l-quote-text::before,.c4lv-quote .c4l-quote-text::before{content:"";position:static;top:0;margin-right:0}.c4l-quote .c4l-quote-text::after,.c4lv-quote .c4l-quote-text::after{content:"";position:static;top:0;margin-left:0}.c4l-quote .c4l-quote-text p:first-of-type::before,.c4lv-quote .c4l-quote-text p:first-of-type::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);position:relative;top:-4px;margin-right:2px}.c4l-quote .c4l-quote-text p:last-of-type::after,.c4lv-quote .c4l-quote-text p:last-of-type::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);position:relative;top:-2px;margin-left:2px}.c4l-quote .c4l-quote-text p:last-of-type,.c4lv-quote .c4l-quote-text p:last-of-type{margin-bottom:0}.c4l-quote .c4l-quote-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-quote .c4l-quote-caption span{text-transform:uppercase;font-size:14px}.c4l-quote .c4l-quote-caption span::after{content:", "}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{margin-top:36px}.c4l-dodontcards .c4l-dodontcards-dont,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:36px}.c4l-dodontcards>.c4l-dodontcards-dont,.c4lv-dodontcards>.c4l-dodontcards-dont{margin-top:12px}.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{min-width:200px;max-width:100%;background:#f1fbf5;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-do::before,.c4lv-dodontcards .c4l-dodontcards-do::before{content:url([[pix:tiny_c4l|c4l_docard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{min-width:200px;max-width:100%;background:#ffefef;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-dont::before,.c4lv-dodontcards .c4l-dodontcards-dont::before{content:url([[pix:tiny_c4l|c4l_dontcard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-do p,.c4l-dodontcards .c4l-dodontcards-dont p,.c4lv-dodontcards .c4l-dodontcards-do p,.c4lv-dodontcards .c4l-dodontcards-dont p{margin-bottom:6px}.c4l-dodontcards .c4l-dodontcards-do p:last-of-type,.c4l-dodontcards .c4l-dodontcards-dont p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-do p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-dont p:last-of-type{margin-bottom:0}.c4l-readingcontext,.c4lv-readingcontext{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:36px auto}.c4l-readingcontext p,.c4lv-readingcontext p{font-size:16px;line-height:23px}.c4l-readingcontext{padding:30px 40px 19px 40px;font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-readingcontext .c4l-readingcontext-caption{font-size:16px;margin-top:24px;text-align:right;padding-bottom:14px;font-style:italic}.c4l-readingcontext .c4l-readingcontext-caption span{text-transform:uppercase;font-size:16px;font-style:normal}.c4l-readingcontext .c4l-readingcontext-caption span::after{content:", "}.c4lv-readingcontext{padding:30px 40px 32px 40px;font-family:sans-serif}.c4lv-readingcontext p:last-of-type{margin-bottom:0}.c4lv-readingcontext .c4l-embedded-caption{margin-top:1rem;font-size:16px;font-style:italic}.c4lv-readingcontext.c4l-comfort-reading-variant{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-example,.c4lv-example{font-size:15px;line-height:22px;color:inherit;background:#fff;border-radius:0;margin:36px auto;min-width:75%;max-width:100%;padding:18px 24px;position:relative;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-example h1,.c4lv-example h1{font-weight:700;font-size:11px;line-height:21px;letter-spacing:.5px;color:#3171e3;margin:0 0 24px 0;text-transform:uppercase;font-family:inherit;display:inline-block;border-bottom:2px solid #3171e3}.c4l-figure,.c4lv-figure{min-width:200px;margin:48px auto}.c4l-figure img,.c4lv-figure img{width:100%}.c4l-figure img:not([src]),.c4l-figure img[src=""],.c4lv-figure img:not([src]),.c4lv-figure img[src=""]{content:url([[pix:tiny_c4l|c4l_figure_placeholder]])}.c4l-figure figcaption,.c4lv-figure figcaption{font-size:13px;line-height:16px;color:#686d79;margin-top:7px}.c4l-figure .c4l-figure-footer::after,.c4lv-figure .c4l-figure-footer::after{content:" | ";font-weight:normal;font-style:normal}.c4l-figure .c4l-figure-caption,.c4lv-figure .c4l-figure-caption{font-style:normal;font-size:12px}.c4l-figure figcaption span strong,.c4lv-figure figcaption span strong{font-weight:700}.c4l-figure{max-width:100%}.c4lv-figure{max-width:75%}.c4l-tag,.c4lv-tag{display:inline-block;font-size:10px;font-weight:700;color:#2167cf;background-color:#f1f5fe;border-radius:30px;padding:4px 17px;line-height:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.2px}.c4lv-tag.c4l-align-right-variant{margin-left:auto}.c4l-estimatedtime,.c4lv-estimatedtime{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-estimatedtime span,.c4lv-estimatedtime span{font-weight:600;font-size:10px}.c4l-estimatedtime::before,.c4lv-estimatedtime::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);position:absolute;left:12px}.c4lv-estimatedtime.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-duedate,.c4lv-duedate{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:600;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-duedate::after,.c4lv-duedate::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);position:absolute;left:12px}.c4lv-duedate.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-proceduralcontext,.c4lv-proceduralcontext{font-style:italic;color:#3a56af;margin-bottom:12px;padding-top:24px;padding-bottom:24px;font-weight:400}.c4l-gradingvalue,.c4lv-gradingvalue{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-gradingvalue span,.c4lv-gradingvalue span{font-weight:600;font-size:10px}.c4l-gradingvalue::after,.c4lv-gradingvalue::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);position:absolute;left:12px;top:6px}.c4lv-gradingvalue.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-expectedfeedback,.c4lv-expectedfeedback{min-width:200px;max-width:90%;background-color:#fff;padding:24px 36px 30px 36px;margin:36px auto;font-style:italic;position:relative;border-radius:8px;border:none;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-expectedfeedback::before,.c4lv-expectedfeedback::before{content:""}.c4l-expectedfeedback::after,.c4lv-expectedfeedback::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);position:absolute;bottom:6px;right:-3px}.c4l-expectedfeedback p:last-of-type,.c4lv-expectedfeedback p:last-of-type{margin-bottom:0}.c4l-allpurposecard,.c4lv-allpurposecard{min-width:200px;max-width:100%;background:#f1f5fe;border-radius:10px;padding:24px 48px 30px 36px;margin:24px auto;position:relative}.c4l-allpurposecard p,.c4lv-allpurposecard p{margin-bottom:6px}.c4l-allpurposecard p:last-of-type,.c4lv-allpurposecard p:last-of-type{margin-bottom:0}.c4l-spacer+.c4l-allpurposecard{margin:0 auto}.c4l-inlinetag,.c4lv-inlinetag{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;display:inline-block;color:#fff;background:#3171e3;border-radius:7px;padding:2px 7px 1px 7px;position:relative;top:-2px;margin-left:4px;margin-right:4px}.c4l-learningoutcomes,.c4lv-learningoutcomes{min-width:200px;max-width:99%;background-color:#f2f5fd;padding:24px 48px 30px 36px;border:none;margin:36px auto;position:relative;border-radius:0}.c4l-learningoutcomes p:last-of-type,.c4lv-learningoutcomes p:last-of-type{margin-bottom:0}.c4l-learningoutcomes .c4l-learningoutcomes-title,.c4lv-learningoutcomes .c4l-learningoutcomes-title{position:relative;top:-11px;left:-39px;padding:6px 14px 5px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:600;font-size:11px;letter-spacing:.7px;color:#fff;background-color:#497ae9;text-transform:uppercase;font-family:inherit;display:inline-block;margin-top:0;filter:drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07))}.c4l-learningoutcomes .c4l-learningoutcomes-title::before,.c4lv-learningoutcomes .c4l-learningoutcomes-title::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);position:absolute;width:3px;height:2px;top:15.5px;left:.5px}.c4l-learningoutcomes .c4l-learningoutcomes-list,.c4lv-learningoutcomes .c4l-learningoutcomes-list{margin-top:18px;margin-bottom:18px;padding-left:32px}.c4l-learningoutcomes .c4l-learningoutcomes-list>li,.c4lv-learningoutcomes .c4l-learningoutcomes-list>li{position:relative}.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child){margin-bottom:21px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before{background-image:url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);background-size:9px 11px;display:inline-block;width:9px;height:11px;content:"";justify-self:center;position:absolute;left:-32px;top:7px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker{color:rgba(0,0,0,0)}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list{counter-reset:section}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before{background-image:none;position:absolute;left:-32px;top:0;counter-increment:section;content:counter(section) ". ";font-weight:700;color:#497ae9}body.mce-content-body .collapse:not(.show),.c4l-code-preview .collapse:not(.show){display:block !important}@media only screen and (min-width: 576px){.c4l-modal.modal-open .modal-dialog,.c4l-modal-no-preview.modal-open .modal-dialog{min-width:550px}.c4l-select-filters{display:none}.c4l-buttons-filters{display:flex;justify-content:center;align-items:center;margin:16px 0 37px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:24px auto 8px auto}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:12px auto 0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:12px auto 6px auto;padding:36px 48px}.c4l-embedded-caption{margin-top:24px}.c4l-quote,.c4lv-quote{margin:36px auto;max-width:90%}.c4l-quote .c4l-quote-caption{margin-top:24px}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-dont{max-width:90%;margin:24px auto}.c4l-readingcontext,.c4lv-readingcontext{max-width:88%}.c4l-example,.c4lv-example{max-width:88%;padding:36px 48px}.c4l-expectedfeedback,.c4lv-expectedfeedback{max-width:88%;margin:48px auto}.c4l-allpurposecard,.c4lv-allpurposecard{margin:36px auto;max-width:90%}}@media only screen and (min-width: 768px){.c4l-keyconcept,.c4lv-keyconcept,.c4l-tip,.c4lv-tip,.c4l-reminder,.c4lv-reminder,.c4l-attention,.c4lv-attention,.c4l-dodontcards-do,.c4lv-dodontcards-do,.c4l-dodontcards-dont,.c4lv-dodontcards-dont,.c4l-readingcontext,.c4lv-readingcontext,.c4l-expectedfeedback,.c4lv-expectedfeedback,.c4l-allpurposecard,.c4lv-allpurposecard,.c4l-learningoutcomes,.c4lv-learningoutcomes{max-width:75%}.c4l-keyconcept.c4l-full-width-variant,.c4lv-keyconcept.c4l-full-width-variant,.c4l-tip.c4l-full-width-variant,.c4lv-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-readingcontext.c4l-full-width-variant,.c4lv-readingcontext.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant{max-width:100%}.c4l-quote,.c4lv-quote{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:24px auto 14px auto}.c4l-example,.c4lv-example{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:24px auto 12px auto}}@media only screen and (min-width: 992px){.c4l-modal-no-preview.modal-open .modal-dialog{max-width:550px}.c4l-buttons-preview{max-height:314px}.c4l-buttons-preview.c4l-no-preview{justify-content:center;max-height:324px}.c4l-buttons-preview.c4l-no-preview .c4l-buttons-grid{grid-gap:9px;justify-content:center;width:405px}.c4l-buttons-preview.c4l-no-preview .c4l-code-preview{display:none}.c4l-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill, 116px);grid-template-rows:repeat(auto-fill, 100px);grid-gap:4px;justify-content:flex-start;width:377px;padding:3px 0 3px 3px}.c4lt-dialog-button.c4l-custom-icon .c4l-button-text i{top:20px;left:0;right:0;margin:0 auto;max-width:25px;min-width:25px;width:100%;border-right:none}.c4lt-dialog-button{height:100px;width:116px;max-width:116px;box-shadow:none;border-radius:4px;margin-bottom:0}.c4lt-dialog-button .c4l-button-text::before{top:20px;left:0;right:0;height:20px;width:26px;margin:0 auto;border-right:none}.c4lt-dialog-button .c4l-button-text{padding:55px 8px 15px 8px;font-size:12px;font-weight:500;line-height:13px;width:80px;text-align:center;justify-content:center}.c4lt-dialog-button .c4l-button-variants{grid-auto-flow:row;grid-gap:0;align-content:flex-start;justify-content:start;width:36px;height:99px;background-color:#ecf3ff;margin:0}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;color:#1679f9;height:33px;width:36px}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:0 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:first-child,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:nth-child(2){border-bottom:1px solid #fff}.c4lt-dialog-button:hover .c4l-button-variants .c4l-button-variant{box-shadow:none}.c4l-code-preview{position:relative;display:flex;flex-direction:column;height:300px;width:343px;align-items:center;justify-content:center}.c4l-preview-default{border:1px solid #e1e5ee;border-radius:8px;color:#9297a1;padding:23px 10px;font-weight:400;font-size:12px;line-height:16px;text-align:center;width:60%;margin:0 auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.c4l-text-preview{position:absolute;top:10px;right:10px;font-weight:600;font-size:9.5px;line-height:11px;letter-spacing:.06em;color:#fff;background-color:#535d76;border-radius:6px;padding:5px;text-transform:uppercase}}.c4l-keyconcept.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant,.c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-figure.c4l-full-width-variant,.c4l-proceduralcontext.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant{max-width:100%}.c4l-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant{max-width:99%}.c4l-readingcontext.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant{max-width:94%}.c4lv-keyconcept.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4lv-dodontcards.c4l-full-width-variant,.c4lv-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-figure.c4l-full-width-variant,.c4lv-proceduralcontext.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4lv-custom-component.c4l-full-width-variant{max-width:100%}.c4lv-tip.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant{max-width:99%}.c4lv-readingcontext.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant{max-width:94%} diff --git a/lang/en/tiny_c4l.php b/lang/en/tiny_c4l.php index 3fff84e..5076dd1 100644 --- a/lang/en/tiny_c4l.php +++ b/lang/en/tiny_c4l.php @@ -25,6 +25,7 @@ defined('MOODLE_INTERNAL') || die(); +$string['additionalhtml'] = 'Additional HTML admin page'; $string['aimedatstudents'] = 'Aimed at Students'; $string['aimedatstudents_desc'] = 'By default, only selected components will be available for users with student capabilities when using the editor. To change the default setting, just check or uncheck you own preferred selection.'; $string['align-left'] = 'Align to left'; @@ -37,6 +38,39 @@ $string['caption'] = 'Caption'; $string['comfort-reading'] = 'Comfort reading'; $string['contextual'] = 'Contextual'; +$string['custom'] = 'Custom'; +$string['customcompcode'] = 'HTML code component {$a}'; +$string['customcompcodedesc'] = 'The word {{CUSTOMCLASS}} is a mandatory class to be beside your main component CSS classes.
    +Code example: +
    +<div class="{{CUSTOMCLASS}} <!-- Add your main CSS classes here -->">
+    <p>{{PLACEHOLDER}}</p>
+</div>
+
    +Be aware that any Javascript code or inline CSS will be removed before rendering.'; +$string['customcompcount'] = 'Number of custom components'; +$string['customcompcountdesc'] = 'Number of custom components to be created'; +$string['customcompenable'] = 'Enable component {$a}'; +$string['customcompenabledesc'] = 'If enabled, this component will be available.'; +$string['customcompicon'] = 'Icon component {$a}'; +$string['customcompicondesc'] = 'Optional icon component. Recommended size: 18x18 pixels.'; +$string['customcompname'] = 'Button text component {$a}'; +$string['customcompnamedesc'] = 'Text showed inside the button.'; +$string['customcompsortorder'] = 'Sort order component {$a}'; +$string['customcompsortorderdesc'] = 'Sets the position of the component in the UI.'; +$string['customcomptext'] = 'Placeholder text component {$a}'; +$string['customcomptextdesc'] = 'Text to show as a placeholder in your component. Insert the word {{PLACEHOLDER}} in your code.'; +$string['customcomptitle'] = 'Custom component {$a}'; +$string['customcomponents'] = 'Custom components'; +$string['customcompvariant'] = 'Enable variants component {$a}'; +$string['customcompvariantdesc'] = 'If enabled, full width variant will be available for this component.'; +$string['customimagesbank'] = 'Bank of images'; +$string['customimagesbankdesc'] = 'To insert any of the uploaded images to your code, add this line:
    +<img src="{{filename.extension}}" alt="Custom image">'; +$string['custompreviewcss'] = 'CSS code'; +$string['custompreviewcssdesc'] = 'CSS used to preview components inside the editor. +

    Any CSS code added here must be also included either to your theme or inside the style tags <style>...<style> and saved into the additionalhtmlhead setting at {$a}; + otherwise your styles will not be applied to your components when rendered.

    '; $string['do-card'] = 'Do card'; $string['dodontcards'] = 'Do/don\'t cards'; $string['dont-card'] = 'Don\'t card'; @@ -50,6 +84,7 @@ $string['expectedfeedback'] = 'Expected feedback'; $string['figure'] = 'Figure'; $string['full-width'] = 'Full width'; +$string['generalsettings'] = 'General'; $string['gradingvalue'] = 'Grading value'; $string['helper'] = 'Helper'; $string['helplinktext'] = 'C4L helper'; @@ -71,4 +106,5 @@ $string['readingcontext'] = 'Reading context'; $string['reminder'] = 'Reminder'; $string['tag'] = 'Tag'; +$string['textplaceholder'] = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; $string['tip'] = 'Tip'; diff --git a/lib.php b/lib.php index e85696d..5e4bfcf 100644 --- a/lib.php +++ b/lib.php @@ -32,11 +32,54 @@ function tiny_c4l_user_preferences() { $preferences = []; - $preferences['c4l_components_variants'] = array( + $preferences['c4l_components_variants'] = [ 'type' => PARAM_RAW, 'null' => NULL_NOT_ALLOWED, - 'default' => '' - ); + 'default' => '', + ]; return $preferences; } + +/** + * Serves the tiny_c4l files. + * + * @param stdClass $course course object + * @param stdClass $cm course module object + * @param stdClass $context context object + * @param string $filearea file area + * @param array $args extra arguments + * @param bool $forcedownload whether or not force download + * @param array $options additional options affecting the file serving + * @return bool false if file not found, does not return if found - just send the file + */ +function tiny_c4l_pluginfile($course, + $cm, + $context, + $filearea, + $args, + $forcedownload, + array $options = []) { + + $compicon = strpos($filearea, 'compicon') !== false; + $compimage = strpos($filearea, 'customimagesbank') !== false; + + if ($context->contextlevel == CONTEXT_SYSTEM && ($compicon || $compimage)) { + // Get file. + $fs = get_file_storage(); + $relativepath = implode('/', $args); + $fullpath = "/$context->id/tiny_c4l/$filearea/$relativepath"; + $file = $fs->get_file_by_hash(sha1($fullpath)); + + if (!$file || $file->is_directory()) { + return false; + } + + if (PHPUNIT_TEST) { + return $file; + } + send_stored_file($file, null, 0, false, $options); + } else { + send_file_not_found(); + } +} diff --git a/pix/c4l_customcomponent_icon.svg b/pix/c4l_customcomponent_icon.svg new file mode 100644 index 0000000..8df1452 --- /dev/null +++ b/pix/c4l_customcomponent_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scss/_buttons.scss b/scss/_buttons.scss index ee60047..28a58f2 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -100,6 +100,18 @@ margin-bottom: 8px; } +.c4lt-dialog-button.c4l-custom-icon .c4l-button-text i { + position: absolute; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + min-height: 23px; + min-width: 49px; + top: auto; + left: 0; + border-right: 1px solid #dce3f0; +} + .c4lt-dialog-button .c4l-button-text { display: flex; align-items: center; diff --git a/scss/_responsive.scss b/scss/_responsive.scss index ff52ab1..203bc6b 100644 --- a/scss/_responsive.scss +++ b/scss/_responsive.scss @@ -1,6 +1,11 @@ /* Media queries */ @media only screen and (min-width: 576px) { + .c4l-modal.modal-open .modal-dialog, + .c4l-modal-no-preview.modal-open .modal-dialog { + min-width: 550px; + } + .c4l-select-filters { display: none; } @@ -175,7 +180,7 @@ @media only screen and (min-width: 992px) { .c4l-modal-no-preview.modal-open .modal-dialog { - max-width: 500px; + max-width: 550px; } .c4l-buttons-preview { @@ -207,6 +212,17 @@ padding: 3px 0 3px 3px; } + .c4lt-dialog-button.c4l-custom-icon .c4l-button-text i { + top: 20px; + left: 0; + right: 0; + margin: 0 auto; + max-width: 25px; + min-width: 25px; + width: 100%; + border-right: none; + } + .c4lt-dialog-button { height: 100px; width: 116px; diff --git a/scss/_variants.scss b/scss/_variants.scss index c5456f1..8a784fc 100644 --- a/scss/_variants.scss +++ b/scss/_variants.scss @@ -41,7 +41,8 @@ .c4lv-proceduralcontext.c4l-full-width-variant, .c4lv-learningoutcomes.c4l-full-width-variant, .c4lv-expectedfeedback.c4l-full-width-variant, -.c4lv-allpurposecard.c4l-full-width-variant { +.c4lv-allpurposecard.c4l-full-width-variant, +.c4lv-custom-component.c4l-full-width-variant { max-width: 100%; } diff --git a/settings.php b/settings.php index 4bb08ea..0c0a0ac 100644 --- a/settings.php +++ b/settings.php @@ -24,50 +24,153 @@ defined('MOODLE_INTERNAL') || die(); -if ($hassiteconfig) { - $settings = new admin_settingpage('tiny_c4l_settings', new lang_string('pluginname', 'tiny_c4l')); - - if ($ADMIN->fulltree) { - // Configure component preview. - $name = get_string('enablepreview', 'tiny_c4l'); - $desc = get_string('enablepreview_desc', 'tiny_c4l'); - $default = 1; - $setting = new admin_setting_configcheckbox('tiny_c4l/enablepreview', $name, $desc, $default); +$ADMIN->add('editortiny', new admin_category('tiny_c4l', new lang_string('pluginname', 'tiny_c4l'))); + +$settings = new admin_settingpage('tiny_c4l_settings', new lang_string('pluginname', 'tiny_c4l')); + +if ($ADMIN->fulltree) { + + // Custom components settings. + $settings->add(new admin_setting_heading('tiny_c4l/generalsettings', new lang_string('generalsettings', 'tiny_c4l'), '')); + + // Configure component preview. + $name = get_string('enablepreview', 'tiny_c4l'); + $desc = get_string('enablepreview_desc', 'tiny_c4l'); + $default = 1; + $setting = new admin_setting_configcheckbox('tiny_c4l/enablepreview', $name, $desc, $default); + $settings->add($setting); + + // Configure available students' components. + $components = [ + 'keyconcept' => get_string('keyconcept', 'tiny_c4l'), + 'tip' => get_string('tip', 'tiny_c4l'), + 'reminder' => get_string('reminder', 'tiny_c4l'), + 'quote' => get_string('quote', 'tiny_c4l'), + 'dodontcards' => get_string('dodontcards', 'tiny_c4l'), + 'readingcontext' => get_string('readingcontext', 'tiny_c4l'), + 'example' => get_string('example', 'tiny_c4l'), + 'figure' => get_string('figure', 'tiny_c4l'), + 'tag' => get_string('tag', 'tiny_c4l'), + 'inlinetag' => get_string('inlinetag', 'tiny_c4l'), + 'attention' => get_string('attention', 'tiny_c4l'), + 'allpurposecard' => get_string('allpurposecard', 'tiny_c4l'), + ]; + $name = get_string('aimedatstudents', 'tiny_c4l'); + $desc = get_string('aimedatstudents_desc', 'tiny_c4l'); + $setting = new admin_setting_configmulticheckbox('tiny_c4l/aimedatstudents', $name, $desc, $components, $components); + $settings->add($setting); + + + // Configure not intended students' components. + $components = [ + 'estimatedtime' => get_string('estimatedtime', 'tiny_c4l'), + 'duedate' => get_string('duedate', 'tiny_c4l'), + 'proceduralcontext' => get_string('proceduralcontext', 'tiny_c4l'), + 'gradingvalue' => get_string('gradingvalue', 'tiny_c4l'), + 'expectedfeedback' => get_string('expectedfeedback', 'tiny_c4l'), + 'learningoutcomes' => get_string('learningoutcomes', 'tiny_c4l'), + ]; + $name = get_string('notintendedforstudents', 'tiny_c4l'); + $desc = get_string('notintendedforstudents_desc', 'tiny_c4l'); + $setting = new admin_setting_configmulticheckbox('tiny_c4l/notintendedforstudents', $name, $desc, [], $components); + $settings->add($setting); + + // Custom components settings. + $settings->add(new admin_setting_heading('tiny_c4l/customcomponents', new lang_string('customcomponents', 'tiny_c4l'), '')); + + // Number of custom components. + $name = 'tiny_c4l/customcompcount'; + $title = get_string('customcompcount', 'tiny_c4l'); + $description = get_string('customcompcountdesc', 'tiny_c4l'); + $options = range(0, 12); + $options = array_combine($options, $options); + $setting = new admin_setting_configselect($name, $title, $description, 0, $options); + $setting->set_updatedcallback('purge_all_caches'); + $settings->add($setting); + + + // CSS for preview content inside editor. + $name = 'tiny_c4l/custompreviewcss'; + $title = get_string('custompreviewcss', 'tiny_c4l'); + $url = new moodle_url('/admin/settings.php', ['section' => 'additionalhtml']); + $link = html_writer::link($url, get_string('additionalhtml', 'tiny_c4l'), ['target' => '_blank']); + $description = get_string('custompreviewcssdesc', 'tiny_c4l', $link); + $setting = new admin_setting_configtextarea($name, $title, $description, ''); + $settings->add($setting); + + // Images bank. + $fileareaid = 'customimagesbank'; + $name = 'tiny_c4l/customimagesbank'; + $title = get_string('customimagesbank', 'tiny_c4l'); + $description = get_string('customimagesbankdesc', 'tiny_c4l'); + $options = ['accepted_types' => ['image'], 'maxfiles' => -1]; + $setting = new admin_setting_configstoredfile($name, $title, $description, $fileareaid, 0, $options); + $settings->add($setting); + + // If we don't have any custom component yet, set to 0. + if (!$customcompcount = get_config('tiny_c4l', 'customcompcount')) { + $customcompcount = 0; + } + + for ($componentindex = 1; $componentindex <= $customcompcount; $componentindex++) { + + // Header. + $name = 'tiny_c4l/customcomptitle' . $componentindex; + $title = get_string('customcomptitle', 'tiny_c4l', $componentindex); + $title = html_writer::tag('h4', $title); + $setting = new admin_setting_description($name, '', $title); $settings->add($setting); - // Configure available students' components. - $components = [ - 'keyconcept' => get_string('keyconcept', 'tiny_c4l'), - 'tip' => get_string('tip', 'tiny_c4l'), - 'reminder' => get_string('reminder', 'tiny_c4l'), - 'quote' => get_string('quote', 'tiny_c4l'), - 'dodontcards' => get_string('dodontcards', 'tiny_c4l'), - 'readingcontext' => get_string('readingcontext', 'tiny_c4l'), - 'example' => get_string('example', 'tiny_c4l'), - 'figure' => get_string('figure', 'tiny_c4l'), - 'tag' => get_string('tag', 'tiny_c4l'), - 'inlinetag' => get_string('inlinetag', 'tiny_c4l'), - 'attention' => get_string('attention', 'tiny_c4l'), - 'allpurposecard' => get_string('allpurposecard', 'tiny_c4l') - ]; - $name = get_string('aimedatstudents', 'tiny_c4l'); - $desc = get_string('aimedatstudents_desc', 'tiny_c4l'); - $setting = new admin_setting_configmulticheckbox('tiny_c4l/aimedatstudents', $name, $desc, $components, $components); + // Enable. + $name = 'tiny_c4l/customcompenable' . $componentindex; + $title = get_string('customcompenable', 'tiny_c4l', $componentindex); + $description = get_string('customcompenabledesc', 'tiny_c4l'); + $setting = new admin_setting_configcheckbox($name, $title, $description, 0); $settings->add($setting); + // Name. + $name = 'tiny_c4l/customcompname' . $componentindex; + $title = get_string('customcompname', 'tiny_c4l', $componentindex); + $description = get_string('customcompnamedesc', 'tiny_c4l'); + $setting = new admin_setting_configtext_with_maxlength($name, $title, $description, '', PARAM_TEXT, null, 15); + $settings->add($setting); - // Configure not intended students' components. - $components = [ - 'estimatedtime' => get_string('estimatedtime', 'tiny_c4l'), - 'duedate' => get_string('duedate', 'tiny_c4l'), - 'proceduralcontext' => get_string('proceduralcontext', 'tiny_c4l'), - 'gradingvalue' => get_string('gradingvalue', 'tiny_c4l'), - 'expectedfeedback' => get_string('expectedfeedback', 'tiny_c4l'), - 'learningoutcomes' => get_string('learningoutcomes', 'tiny_c4l'), - ]; - $name = get_string('notintendedforstudents', 'tiny_c4l'); - $desc = get_string('notintendedforstudents_desc', 'tiny_c4l'); - $setting = new admin_setting_configmulticheckbox('tiny_c4l/notintendedforstudents', $name, $desc, [], $components); + // Icon. + $fileareaid = 'customcompicon' . $componentindex; + $name = 'tiny_c4l/customcompicon' . $componentindex; + $title = get_string('customcompicon', 'tiny_c4l', $componentindex); + $description = get_string('customcompicondesc', 'tiny_c4l'); + $options = ['accepted_types' => ['image'], 'maxfiles' => 1]; + $setting = new admin_setting_configstoredfile($name, $title, $description, $fileareaid, 0, $options); + $settings->add($setting); + + // Text. + $name = 'tiny_c4l/customcomptext' . $componentindex; + $title = get_string('customcomptext', 'tiny_c4l', $componentindex); + $description = get_string('customcomptextdesc', 'tiny_c4l'); + $setting = new admin_setting_configtextarea($name, $title, $description, '', PARAM_TEXT); + $settings->add($setting); + + // Code. + $name = 'tiny_c4l/customcompcode' . $componentindex; + $title = get_string('customcompcode', 'tiny_c4l', $componentindex); + $description = get_string('customcompcodedesc', 'tiny_c4l'); + $setting = new admin_setting_configtextarea($name, $title, $description, ''); + $settings->add($setting); + + // Variant. + $name = 'tiny_c4l/customcompvariant' . $componentindex; + $title = get_string('customcompvariant', 'tiny_c4l', $componentindex); + $description = get_string('customcompvariantdesc', 'tiny_c4l'); + $setting = new admin_setting_configcheckbox($name, $title, $description, 0); + $settings->add($setting); + + // Sortorder. + $name = 'tiny_c4l/customcompsortorder' . $componentindex; + $title = get_string('customcompsortorder', 'tiny_c4l', $componentindex); + $description = get_string('customcompsortorderdesc', 'tiny_c4l'); + $setting = new admin_setting_configtext($name, $title, $description, $componentindex, PARAM_INT); $settings->add($setting); } + } diff --git a/styles.css b/styles.css index 95e5136..d75eefe 100644 --- a/styles.css +++ b/styles.css @@ -1 +1 @@ -.c4l-plugin-container{display:block;padding:1rem;background-color:#f6f7f8;border:1px solid #dee2e6}.c4l-buttons-filters{display:none}.c4l-select-filters{display:grid;grid-auto-flow:column;width:100%;margin:7px 0 36px 0}.c4l-select-filter{grid-column:1/-1;background-color:#fff;border:1px solid #dfe2e5;border-radius:7px;padding:17px;width:100%;text-transform:capitalize;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-image:url([[pix:t/dropdown]]);background-repeat:no-repeat;background-position-x:95%;background-position-y:center}.c4l-button-filter{background-color:#fff;border:1px solid #dfe2e5;padding:10px 16px;font-weight:500;font-size:10.5px;line-height:12px;letter-spacing:.05em;color:#424b62;text-transform:uppercase}.c4l-button-filter:hover,.c4l-button-filter.c4l-button-filter-enabled{background-color:#e7ebef}.c4l-button-filter:first-child{border-radius:6px 0 0 6px}.c4l-button-filter:last-child{border-radius:0 6px 6px 0}.c4l-buttons-preview{display:flex;justify-content:space-between;width:100%;max-height:340px}.c4l-buttons-grid{display:block;margin-bottom:0;width:100%;overflow-y:auto}.c4l-hidden{display:none !important;max-height:0;padding:0}.c4lt-dialog-button{display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;height:48px;max-height:100px;width:100%;max-width:100%;background-color:#fff;border:1px solid #e4e9ec;color:#535d76;box-shadow:0 0 6px 0 rgba(0,0,0,.1);overflow-wrap:anywhere;overflow:hidden;padding:0;margin-bottom:8px}.c4lt-dialog-button .c4l-button-text{display:flex;align-items:center;height:100%}.c4lt-dialog-button .c4l-button-text::before{position:absolute;top:0;left:0;height:100%;min-height:23px;width:49px;display:flex;justify-content:center;align-items:center;border-right:1px solid #dce3f0}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:inset 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-text{position:relative;font-size:12px;font-weight:500;width:100%;text-align:left;padding-left:62px}.c4l-code-preview{display:none;overflow:hidden;background-color:#fff}.c4l-code-preview .c4l-component-code{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);width:160%;margin-top:35px}.c4l-code-preview .c4l-component-code .c4l-learningoutcomes{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.c4l-keyconcept-icon::before{content:""}.c4l-keyconcept-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_keyconcept_icon]])}.c4l-tip-icon::before{content:""}.c4l-tip-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip_icon]])}.c4l-reminder-icon::before{content:""}.c4l-reminder-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder_icon]])}.c4l-attention-icon::before{content:""}.c4l-attention-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_attention_icon]])}.c4l-quote-icon::before{content:""}.c4l-quote-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_icon]])}.c4l-dodontcards-icon::before{content:""}.c4l-dodontcards-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_dodontcards_icon]])}.c4l-readingcontext-icon::before{content:""}.c4l-readingcontext-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_readingcontext_icon]])}.c4l-example-icon::before{content:""}.c4l-example-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_example_icon]])}.c4l-figure-icon::before{content:""}.c4l-figure-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_figure_icon]])}.c4l-tag-icon::before{content:""}.c4l-tag-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tag_icon]])}.c4l-estimatedtime-icon::before{content:""}.c4l-estimatedtime-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime_icon]])}.c4l-duedate-icon::before{content:""}.c4l-duedate-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate_icon]])}.c4l-proceduralcontext-icon::before{content:""}.c4l-proceduralcontext-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_proceduralcontext_icon]])}.c4l-learningoutcomes-icon::before{content:""}.c4l-learningoutcomes-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_icon]])}.c4l-gradingvalue-icon::before{content:""}.c4l-gradingvalue-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue_icon]])}.c4l-expectedfeedback-icon::before{content:""}.c4l-expectedfeedback-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback_icon]])}.c4l-allpurposecard-icon::before{content:""}.c4l-allpurposecard-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_allpurposecard_icon]])}.c4l-inlinetag-icon::before{content:""}.c4l-inlinetag-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_inlinetag_icon]])}.c4lt-dialog-button .c4l-button-variants{display:grid;grid-auto-flow:column;grid-gap:3px;justify-content:end;width:100%;height:42px;margin-right:3px}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;background-color:#ecf3ff;color:#1679f9;height:42px;width:36px}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant.on,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:hover{color:#fff;background-color:#1679f9}.c4l-button-variant.align-center-variant-off::before{content:url([[pix:tiny_c4l|variants/align-center-variant-off]])}.c4l-button-variant.align-center-variant-on::before,.c4l-button-variant.align-center-variant-on:hover::before,.c4l-button-variant.align-center-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-center-variant-on]])}.c4l-button-variant.align-left-variant-off::before{content:url([[pix:tiny_c4l|variants/align-left-variant-off]])}.c4l-button-variant.align-left-variant-on::before,.c4l-button-variant.align-left-variant-on:hover::before,.c4l-button-variant.align-left-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-left-variant-on]])}.c4l-button-variant.align-right-variant-off::before{content:url([[pix:tiny_c4l|variants/align-right-variant-off]])}.c4l-button-variant.align-right-variant-on::before,.c4l-button-variant.align-right-variant-on:hover::before,.c4l-button-variant.align-right-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-right-variant-on]])}.c4l-button-variant.caption-variant-off::before{content:url([[pix:tiny_c4l|variants/caption-variant-off]])}.c4l-button-variant.caption-variant-on::before,.c4l-button-variant.caption-variant-on:hover::before,.c4l-button-variant.caption-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/caption-variant-on]])}.c4l-button-variant.comfort-reading-variant-off::before{content:url([[pix:tiny_c4l|variants/comfort-reading-variant-off]])}.c4l-button-variant.comfort-reading-variant-on::before,.c4l-button-variant.comfort-reading-variant-on:hover::before,.c4l-button-variant.comfort-reading-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/comfort-reading-variant-on]])}.c4l-button-variant.dont-card-only-variant-off::before{content:url([[pix:tiny_c4l|variants/dont-card-only-variant-off]])}.c4l-button-variant.dont-card-only-variant-on::before,.c4l-button-variant.dont-card-only-variant-on:hover::before,.c4l-button-variant.dont-card-only-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/dont-card-only-variant-on]])}.c4l-button-variant.full-width-variant-off::before{content:url([[pix:tiny_c4l|variants/full-width-variant-off]])}.c4l-button-variant.full-width-variant-on::before,.c4l-button-variant.full-width-variant-on:hover::before,.c4l-button-variant.full-width-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/full-width-variant-on]])}.c4l-button-variant.ordered-list-variant-off::before{content:url([[pix:tiny_c4l|variants/ordered-list-variant-off]])}.c4l-button-variant.ordered-list-variant-on::before,.c4l-button-variant.ordered-list-variant-on:hover::before,.c4l-button-variant.ordered-list-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/ordered-list-variant-on]])}.c4l-button-variant.quote-variant-off::before{content:url([[pix:tiny_c4l|variants/quote-variant-off]])}.c4l-button-variant.quote-variant-on::before,.c4l-button-variant.quote-variant-on:hover::before,.c4l-button-variant.quote-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/quote-variant-on]])}.c4l-spacer{display:block;height:12px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote,.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-readingcontext,.c4l-spacer+.c4lv-readingcontext{margin-top:16px;margin-bottom:4px}.c4l-spacer+.c4l-figure,.c4l-spacer+.c4lv-figure{margin:24px auto 14px auto}.c4l-spacer+.c4l-proceduralcontext,.c4l-spacer+.c4lv-proceduralcontext{margin-bottom:0;padding-top:0;padding-bottom:0}.c4l-inline-group{display:flex;flex-direction:row;align-content:flex-end;justify-content:flex-end}.c4l-display-left{display:flex;flex-direction:row;align-content:flex-start;justify-content:flex-start}.c4l-spacer+.c4l-display-left{margin-top:0}.c4l-embedded-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-embedded-caption span{text-transform:uppercase;font-size:14px}.c4l-embedded-caption span::after{content:", "}.c4l-keyconcept,.c4lv-keyconcept{min-width:200px;max-width:99%;background-color:#f1f5fe;padding:24px 36px 30px 36px;border:none;border-left:6px solid #387af1;margin:36px auto;position:relative;border-radius:0}.c4l-keyconcept p:last-of-type,.c4lv-keyconcept p:last-of-type{margin-bottom:0}.c4l-tip,.c4lv-tip{min-width:200px;max-width:99%;background-color:#fbeffa;padding:24px 48px 30px 36px;border:none;border-left:6px solid #b00ca9;margin:36px auto;position:relative;border-radius:0}.c4l-tip p:last-of-type,.c4lv-tip p:last-of-type{margin-bottom:0}.c4l-tip::after,.c4lv-tip::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);position:absolute;top:6px;right:-3px}.c4l-reminder,.c4lv-reminder{min-width:200px;max-width:99%;background-color:#eff8fd;padding:24px 48px 30px 36px;border:none;border-left:6px solid #16b9ff;margin:36px auto;position:relative;border-radius:0}.c4l-reminder p:last-of-type,.c4lv-reminder p:last-of-type{margin-bottom:0}.c4l-reminder::after,.c4lv-reminder::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);position:absolute;top:6px;right:-3px}.c4l-attention,.c4lv-attention{min-width:200px;max-width:99%;background-color:#fef6ed;padding:24px 48px 30px 36px;border:none;border-left:6px solid #f88923;margin:36px auto;position:relative;border-radius:0}.c4l-attention p:last-of-type,.c4lv-attention p:last-of-type{margin-bottom:0}.c4l-attention::after,.c4lv-attention::after{content:url([[pix:tiny_c4l|c4l_attention]]);position:absolute;top:6px;right:-3px}.c4l-quote,.c4lv-quote{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:24px;margin:24px auto;min-width:200px;max-width:100%}.c4l-quote .c4l-quote-body,.c4lv-quote .c4l-quote-body{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:space-between;font-style:italic}.c4l-quote .c4l-quote-line,.c4lv-quote .c4l-quote-line{border-left:4px solid #387af1;margin-right:16px;margin-top:4px;margin-bottom:2px}.c4l-quote .c4l-quote-text::before,.c4lv-quote .c4l-quote-text::before{content:"";position:static;top:0;margin-right:0}.c4l-quote .c4l-quote-text::after,.c4lv-quote .c4l-quote-text::after{content:"";position:static;top:0;margin-left:0}.c4l-quote .c4l-quote-text p:first-of-type::before,.c4lv-quote .c4l-quote-text p:first-of-type::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);position:relative;top:-4px;margin-right:2px}.c4l-quote .c4l-quote-text p:last-of-type::after,.c4lv-quote .c4l-quote-text p:last-of-type::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);position:relative;top:-2px;margin-left:2px}.c4l-quote .c4l-quote-text p:last-of-type,.c4lv-quote .c4l-quote-text p:last-of-type{margin-bottom:0}.c4l-quote .c4l-quote-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-quote .c4l-quote-caption span{text-transform:uppercase;font-size:14px}.c4l-quote .c4l-quote-caption span::after{content:", "}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{margin-top:36px}.c4l-dodontcards .c4l-dodontcards-dont,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:36px}.c4l-dodontcards>.c4l-dodontcards-dont,.c4lv-dodontcards>.c4l-dodontcards-dont{margin-top:12px}.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{min-width:200px;max-width:100%;background:#f1fbf5;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-do::before,.c4lv-dodontcards .c4l-dodontcards-do::before{content:url([[pix:tiny_c4l|c4l_docard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{min-width:200px;max-width:100%;background:#ffefef;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-dont::before,.c4lv-dodontcards .c4l-dodontcards-dont::before{content:url([[pix:tiny_c4l|c4l_dontcard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-do p,.c4l-dodontcards .c4l-dodontcards-dont p,.c4lv-dodontcards .c4l-dodontcards-do p,.c4lv-dodontcards .c4l-dodontcards-dont p{margin-bottom:6px}.c4l-dodontcards .c4l-dodontcards-do p:last-of-type,.c4l-dodontcards .c4l-dodontcards-dont p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-do p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-dont p:last-of-type{margin-bottom:0}.c4l-readingcontext,.c4lv-readingcontext{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:36px auto}.c4l-readingcontext p,.c4lv-readingcontext p{font-size:16px;line-height:23px}.c4l-readingcontext{padding:30px 40px 19px 40px;font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-readingcontext .c4l-readingcontext-caption{font-size:16px;margin-top:24px;text-align:right;padding-bottom:14px;font-style:italic}.c4l-readingcontext .c4l-readingcontext-caption span{text-transform:uppercase;font-size:16px;font-style:normal}.c4l-readingcontext .c4l-readingcontext-caption span::after{content:", "}.c4lv-readingcontext{padding:30px 40px 32px 40px;font-family:sans-serif}.c4lv-readingcontext p:last-of-type{margin-bottom:0}.c4lv-readingcontext .c4l-embedded-caption{margin-top:1rem;font-size:16px;font-style:italic}.c4lv-readingcontext.c4l-comfort-reading-variant{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-example,.c4lv-example{font-size:15px;line-height:22px;color:inherit;background:#fff;border-radius:0;margin:36px auto;min-width:75%;max-width:100%;padding:18px 24px;position:relative;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-example h1,.c4lv-example h1{font-weight:700;font-size:11px;line-height:21px;letter-spacing:.5px;color:#3171e3;margin:0 0 24px 0;text-transform:uppercase;font-family:inherit;display:inline-block;border-bottom:2px solid #3171e3}.c4l-figure,.c4lv-figure{min-width:200px;margin:48px auto}.c4l-figure img,.c4lv-figure img{width:100%}.c4l-figure img:not([src]),.c4l-figure img[src=""],.c4lv-figure img:not([src]),.c4lv-figure img[src=""]{content:url([[pix:tiny_c4l|c4l_figure_placeholder]])}.c4l-figure figcaption,.c4lv-figure figcaption{font-size:13px;line-height:16px;color:#686d79;margin-top:7px}.c4l-figure .c4l-figure-footer::after,.c4lv-figure .c4l-figure-footer::after{content:" | ";font-weight:normal;font-style:normal}.c4l-figure .c4l-figure-caption,.c4lv-figure .c4l-figure-caption{font-style:normal;font-size:12px}.c4l-figure figcaption span strong,.c4lv-figure figcaption span strong{font-weight:700}.c4l-figure{max-width:100%}.c4lv-figure{max-width:75%}.c4l-tag,.c4lv-tag{display:inline-block;font-size:10px;font-weight:700;color:#2167cf;background-color:#f1f5fe;border-radius:30px;padding:4px 17px;line-height:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.2px}.c4lv-tag.c4l-align-right-variant{margin-left:auto}.c4l-estimatedtime,.c4lv-estimatedtime{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-estimatedtime span,.c4lv-estimatedtime span{font-weight:600;font-size:10px}.c4l-estimatedtime::before,.c4lv-estimatedtime::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);position:absolute;left:12px}.c4lv-estimatedtime.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-duedate,.c4lv-duedate{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:600;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-duedate::after,.c4lv-duedate::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);position:absolute;left:12px}.c4lv-duedate.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-proceduralcontext,.c4lv-proceduralcontext{font-style:italic;color:#3a56af;margin-bottom:12px;padding-top:24px;padding-bottom:24px;font-weight:400}.c4l-gradingvalue,.c4lv-gradingvalue{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-gradingvalue span,.c4lv-gradingvalue span{font-weight:600;font-size:10px}.c4l-gradingvalue::after,.c4lv-gradingvalue::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);position:absolute;left:12px;top:6px}.c4lv-gradingvalue.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-expectedfeedback,.c4lv-expectedfeedback{min-width:200px;max-width:90%;background-color:#fff;padding:24px 36px 30px 36px;margin:36px auto;font-style:italic;position:relative;border-radius:8px;border:none;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-expectedfeedback::before,.c4lv-expectedfeedback::before{content:""}.c4l-expectedfeedback::after,.c4lv-expectedfeedback::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);position:absolute;bottom:6px;right:-3px}.c4l-expectedfeedback p:last-of-type,.c4lv-expectedfeedback p:last-of-type{margin-bottom:0}.c4l-allpurposecard,.c4lv-allpurposecard{min-width:200px;max-width:100%;background:#f1f5fe;border-radius:10px;padding:24px 48px 30px 36px;margin:24px auto;position:relative}.c4l-allpurposecard p,.c4lv-allpurposecard p{margin-bottom:6px}.c4l-allpurposecard p:last-of-type,.c4lv-allpurposecard p:last-of-type{margin-bottom:0}.c4l-spacer+.c4l-allpurposecard{margin:0 auto}.c4l-inlinetag,.c4lv-inlinetag{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;display:inline-block;color:#fff;background:#3171e3;border-radius:7px;padding:2px 7px 1px 7px;position:relative;top:-2px;margin-left:4px;margin-right:4px}.c4l-learningoutcomes,.c4lv-learningoutcomes{min-width:200px;max-width:99%;background-color:#f2f5fd;padding:24px 48px 30px 36px;border:none;margin:36px auto;position:relative;border-radius:0}.c4l-learningoutcomes p:last-of-type,.c4lv-learningoutcomes p:last-of-type{margin-bottom:0}.c4l-learningoutcomes .c4l-learningoutcomes-title,.c4lv-learningoutcomes .c4l-learningoutcomes-title{position:relative;top:-11px;left:-39px;padding:6px 14px 5px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:600;font-size:11px;letter-spacing:.7px;color:#fff;background-color:#497ae9;text-transform:uppercase;font-family:inherit;display:inline-block;margin-top:0;filter:drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07))}.c4l-learningoutcomes .c4l-learningoutcomes-title::before,.c4lv-learningoutcomes .c4l-learningoutcomes-title::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);position:absolute;width:3px;height:2px;top:15.5px;left:.5px}.c4l-learningoutcomes .c4l-learningoutcomes-list,.c4lv-learningoutcomes .c4l-learningoutcomes-list{margin-top:18px;margin-bottom:18px;padding-left:32px}.c4l-learningoutcomes .c4l-learningoutcomes-list>li,.c4lv-learningoutcomes .c4l-learningoutcomes-list>li{position:relative}.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child){margin-bottom:21px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before{background-image:url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);background-size:9px 11px;display:inline-block;width:9px;height:11px;content:"";justify-self:center;position:absolute;left:-32px;top:7px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker{color:rgba(0,0,0,0)}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list{counter-reset:section}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before{background-image:none;position:absolute;left:-32px;top:0;counter-increment:section;content:counter(section) ". ";font-weight:700;color:#497ae9}body.mce-content-body .collapse:not(.show),.c4l-code-preview .collapse:not(.show){display:block !important}@media only screen and (min-width: 576px){.c4l-select-filters{display:none}.c4l-buttons-filters{display:flex;justify-content:center;align-items:center;margin:16px 0 37px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:24px auto 8px auto}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:12px auto 0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:12px auto 6px auto;padding:36px 48px}.c4l-embedded-caption{margin-top:24px}.c4l-quote,.c4lv-quote{margin:36px auto;max-width:90%}.c4l-quote .c4l-quote-caption{margin-top:24px}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-dont{max-width:90%;margin:24px auto}.c4l-readingcontext,.c4lv-readingcontext{max-width:88%}.c4l-example,.c4lv-example{max-width:88%;padding:36px 48px}.c4l-expectedfeedback,.c4lv-expectedfeedback{max-width:88%;margin:48px auto}.c4l-allpurposecard,.c4lv-allpurposecard{margin:36px auto;max-width:90%}}@media only screen and (min-width: 768px){.c4l-keyconcept,.c4lv-keyconcept,.c4l-tip,.c4lv-tip,.c4l-reminder,.c4lv-reminder,.c4l-attention,.c4lv-attention,.c4l-dodontcards-do,.c4lv-dodontcards-do,.c4l-dodontcards-dont,.c4lv-dodontcards-dont,.c4l-readingcontext,.c4lv-readingcontext,.c4l-expectedfeedback,.c4lv-expectedfeedback,.c4l-allpurposecard,.c4lv-allpurposecard,.c4l-learningoutcomes,.c4lv-learningoutcomes{max-width:75%}.c4l-keyconcept.c4l-full-width-variant,.c4lv-keyconcept.c4l-full-width-variant,.c4l-tip.c4l-full-width-variant,.c4lv-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-readingcontext.c4l-full-width-variant,.c4lv-readingcontext.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant{max-width:100%}.c4l-quote,.c4lv-quote{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:24px auto 14px auto}.c4l-example,.c4lv-example{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:24px auto 12px auto}}@media only screen and (min-width: 992px){.c4l-modal-no-preview.modal-open .modal-dialog{max-width:500px}.c4l-buttons-preview{max-height:314px}.c4l-buttons-preview.c4l-no-preview{justify-content:center;max-height:324px}.c4l-buttons-preview.c4l-no-preview .c4l-buttons-grid{grid-gap:9px;justify-content:center;width:405px}.c4l-buttons-preview.c4l-no-preview .c4l-code-preview{display:none}.c4l-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill, 116px);grid-template-rows:repeat(auto-fill, 100px);grid-gap:4px;justify-content:flex-start;width:377px;padding:3px 0 3px 3px}.c4lt-dialog-button{height:100px;width:116px;max-width:116px;box-shadow:none;border-radius:4px;margin-bottom:0}.c4lt-dialog-button .c4l-button-text::before{top:20px;left:0;right:0;height:20px;width:26px;margin:0 auto;border-right:none}.c4lt-dialog-button .c4l-button-text{padding:55px 8px 15px 8px;font-size:12px;font-weight:500;line-height:13px;width:80px;text-align:center;justify-content:center}.c4lt-dialog-button .c4l-button-variants{grid-auto-flow:row;grid-gap:0;align-content:flex-start;justify-content:start;width:36px;height:99px;background-color:#ecf3ff;margin:0}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;color:#1679f9;height:33px;width:36px}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:0 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:first-child,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:nth-child(2){border-bottom:1px solid #fff}.c4lt-dialog-button:hover .c4l-button-variants .c4l-button-variant{box-shadow:none}.c4l-code-preview{position:relative;display:flex;flex-direction:column;height:300px;width:343px;align-items:center;justify-content:center}.c4l-preview-default{border:1px solid #e1e5ee;border-radius:8px;color:#9297a1;padding:23px 10px;font-weight:400;font-size:12px;line-height:16px;text-align:center;width:60%;margin:0 auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.c4l-text-preview{position:absolute;top:10px;right:10px;font-weight:600;font-size:9.5px;line-height:11px;letter-spacing:.06em;color:#fff;background-color:#535d76;border-radius:6px;padding:5px;text-transform:uppercase}}.c4l-keyconcept.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant,.c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-figure.c4l-full-width-variant,.c4l-proceduralcontext.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant{max-width:100%}.c4l-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant{max-width:99%}.c4l-readingcontext.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant{max-width:94%}.c4lv-keyconcept.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4lv-dodontcards.c4l-full-width-variant,.c4lv-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-figure.c4l-full-width-variant,.c4lv-proceduralcontext.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant{max-width:100%}.c4lv-tip.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant{max-width:99%}.c4lv-readingcontext.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant{max-width:94%} +.c4l-plugin-container{display:block;padding:1rem;background-color:#f6f7f8;border:1px solid #dee2e6}.c4l-buttons-filters{display:none}.c4l-select-filters{display:grid;grid-auto-flow:column;width:100%;margin:7px 0 36px 0}.c4l-select-filter{grid-column:1/-1;background-color:#fff;border:1px solid #dfe2e5;border-radius:7px;padding:17px;width:100%;text-transform:capitalize;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-image:url([[pix:t/dropdown]]);background-repeat:no-repeat;background-position-x:95%;background-position-y:center}.c4l-button-filter{background-color:#fff;border:1px solid #dfe2e5;padding:10px 16px;font-weight:500;font-size:10.5px;line-height:12px;letter-spacing:.05em;color:#424b62;text-transform:uppercase}.c4l-button-filter:hover,.c4l-button-filter.c4l-button-filter-enabled{background-color:#e7ebef}.c4l-button-filter:first-child{border-radius:6px 0 0 6px}.c4l-button-filter:last-child{border-radius:0 6px 6px 0}.c4l-buttons-preview{display:flex;justify-content:space-between;width:100%;max-height:340px}.c4l-buttons-grid{display:block;margin-bottom:0;width:100%;overflow-y:auto}.c4l-hidden{display:none !important;max-height:0;padding:0}.c4lt-dialog-button{display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;height:48px;max-height:100px;width:100%;max-width:100%;background-color:#fff;border:1px solid #e4e9ec;color:#535d76;box-shadow:0 0 6px 0 rgba(0,0,0,.1);overflow-wrap:anywhere;overflow:hidden;padding:0;margin-bottom:8px}.c4lt-dialog-button.c4l-custom-icon .c4l-button-text i{position:absolute;background-repeat:no-repeat;background-size:contain;background-position:center;min-height:23px;min-width:49px;top:auto;left:0;border-right:1px solid #dce3f0}.c4lt-dialog-button .c4l-button-text{display:flex;align-items:center;height:100%}.c4lt-dialog-button .c4l-button-text::before{position:absolute;top:0;left:0;height:100%;min-height:23px;width:49px;display:flex;justify-content:center;align-items:center;border-right:1px solid #dce3f0}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:inset 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-text{position:relative;font-size:12px;font-weight:500;width:100%;text-align:left;padding-left:62px}.c4l-code-preview{display:none;overflow:hidden;background-color:#fff}.c4l-code-preview .c4l-component-code{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);width:160%;margin-top:35px}.c4l-code-preview .c4l-component-code .c4l-learningoutcomes{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.c4l-keyconcept-icon::before{content:""}.c4l-keyconcept-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_keyconcept_icon]])}.c4l-tip-icon::before{content:""}.c4l-tip-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip_icon]])}.c4l-reminder-icon::before{content:""}.c4l-reminder-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder_icon]])}.c4l-attention-icon::before{content:""}.c4l-attention-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_attention_icon]])}.c4l-quote-icon::before{content:""}.c4l-quote-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_icon]])}.c4l-dodontcards-icon::before{content:""}.c4l-dodontcards-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_dodontcards_icon]])}.c4l-readingcontext-icon::before{content:""}.c4l-readingcontext-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_readingcontext_icon]])}.c4l-example-icon::before{content:""}.c4l-example-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_example_icon]])}.c4l-figure-icon::before{content:""}.c4l-figure-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_figure_icon]])}.c4l-tag-icon::before{content:""}.c4l-tag-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tag_icon]])}.c4l-estimatedtime-icon::before{content:""}.c4l-estimatedtime-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime_icon]])}.c4l-duedate-icon::before{content:""}.c4l-duedate-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate_icon]])}.c4l-proceduralcontext-icon::before{content:""}.c4l-proceduralcontext-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_proceduralcontext_icon]])}.c4l-learningoutcomes-icon::before{content:""}.c4l-learningoutcomes-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_icon]])}.c4l-gradingvalue-icon::before{content:""}.c4l-gradingvalue-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue_icon]])}.c4l-expectedfeedback-icon::before{content:""}.c4l-expectedfeedback-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback_icon]])}.c4l-allpurposecard-icon::before{content:""}.c4l-allpurposecard-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_allpurposecard_icon]])}.c4l-inlinetag-icon::before{content:""}.c4l-inlinetag-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_inlinetag_icon]])}.c4lt-dialog-button .c4l-button-variants{display:grid;grid-auto-flow:column;grid-gap:3px;justify-content:end;width:100%;height:42px;margin-right:3px}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;background-color:#ecf3ff;color:#1679f9;height:42px;width:36px}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant.on,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:hover{color:#fff;background-color:#1679f9}.c4l-button-variant.align-center-variant-off::before{content:url([[pix:tiny_c4l|variants/align-center-variant-off]])}.c4l-button-variant.align-center-variant-on::before,.c4l-button-variant.align-center-variant-on:hover::before,.c4l-button-variant.align-center-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-center-variant-on]])}.c4l-button-variant.align-left-variant-off::before{content:url([[pix:tiny_c4l|variants/align-left-variant-off]])}.c4l-button-variant.align-left-variant-on::before,.c4l-button-variant.align-left-variant-on:hover::before,.c4l-button-variant.align-left-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-left-variant-on]])}.c4l-button-variant.align-right-variant-off::before{content:url([[pix:tiny_c4l|variants/align-right-variant-off]])}.c4l-button-variant.align-right-variant-on::before,.c4l-button-variant.align-right-variant-on:hover::before,.c4l-button-variant.align-right-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-right-variant-on]])}.c4l-button-variant.caption-variant-off::before{content:url([[pix:tiny_c4l|variants/caption-variant-off]])}.c4l-button-variant.caption-variant-on::before,.c4l-button-variant.caption-variant-on:hover::before,.c4l-button-variant.caption-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/caption-variant-on]])}.c4l-button-variant.comfort-reading-variant-off::before{content:url([[pix:tiny_c4l|variants/comfort-reading-variant-off]])}.c4l-button-variant.comfort-reading-variant-on::before,.c4l-button-variant.comfort-reading-variant-on:hover::before,.c4l-button-variant.comfort-reading-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/comfort-reading-variant-on]])}.c4l-button-variant.dont-card-only-variant-off::before{content:url([[pix:tiny_c4l|variants/dont-card-only-variant-off]])}.c4l-button-variant.dont-card-only-variant-on::before,.c4l-button-variant.dont-card-only-variant-on:hover::before,.c4l-button-variant.dont-card-only-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/dont-card-only-variant-on]])}.c4l-button-variant.full-width-variant-off::before{content:url([[pix:tiny_c4l|variants/full-width-variant-off]])}.c4l-button-variant.full-width-variant-on::before,.c4l-button-variant.full-width-variant-on:hover::before,.c4l-button-variant.full-width-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/full-width-variant-on]])}.c4l-button-variant.ordered-list-variant-off::before{content:url([[pix:tiny_c4l|variants/ordered-list-variant-off]])}.c4l-button-variant.ordered-list-variant-on::before,.c4l-button-variant.ordered-list-variant-on:hover::before,.c4l-button-variant.ordered-list-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/ordered-list-variant-on]])}.c4l-button-variant.quote-variant-off::before{content:url([[pix:tiny_c4l|variants/quote-variant-off]])}.c4l-button-variant.quote-variant-on::before,.c4l-button-variant.quote-variant-on:hover::before,.c4l-button-variant.quote-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/quote-variant-on]])}.c4l-spacer{display:block;height:12px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote,.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-readingcontext,.c4l-spacer+.c4lv-readingcontext{margin-top:16px;margin-bottom:4px}.c4l-spacer+.c4l-figure,.c4l-spacer+.c4lv-figure{margin:24px auto 14px auto}.c4l-spacer+.c4l-proceduralcontext,.c4l-spacer+.c4lv-proceduralcontext{margin-bottom:0;padding-top:0;padding-bottom:0}.c4l-inline-group{display:flex;flex-direction:row;align-content:flex-end;justify-content:flex-end}.c4l-display-left{display:flex;flex-direction:row;align-content:flex-start;justify-content:flex-start}.c4l-spacer+.c4l-display-left{margin-top:0}.c4l-embedded-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-embedded-caption span{text-transform:uppercase;font-size:14px}.c4l-embedded-caption span::after{content:", "}.c4l-keyconcept,.c4lv-keyconcept{min-width:200px;max-width:99%;background-color:#f1f5fe;padding:24px 36px 30px 36px;border:none;border-left:6px solid #387af1;margin:36px auto;position:relative;border-radius:0}.c4l-keyconcept p:last-of-type,.c4lv-keyconcept p:last-of-type{margin-bottom:0}.c4l-tip,.c4lv-tip{min-width:200px;max-width:99%;background-color:#fbeffa;padding:24px 48px 30px 36px;border:none;border-left:6px solid #b00ca9;margin:36px auto;position:relative;border-radius:0}.c4l-tip p:last-of-type,.c4lv-tip p:last-of-type{margin-bottom:0}.c4l-tip::after,.c4lv-tip::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);position:absolute;top:6px;right:-3px}.c4l-reminder,.c4lv-reminder{min-width:200px;max-width:99%;background-color:#eff8fd;padding:24px 48px 30px 36px;border:none;border-left:6px solid #16b9ff;margin:36px auto;position:relative;border-radius:0}.c4l-reminder p:last-of-type,.c4lv-reminder p:last-of-type{margin-bottom:0}.c4l-reminder::after,.c4lv-reminder::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);position:absolute;top:6px;right:-3px}.c4l-attention,.c4lv-attention{min-width:200px;max-width:99%;background-color:#fef6ed;padding:24px 48px 30px 36px;border:none;border-left:6px solid #f88923;margin:36px auto;position:relative;border-radius:0}.c4l-attention p:last-of-type,.c4lv-attention p:last-of-type{margin-bottom:0}.c4l-attention::after,.c4lv-attention::after{content:url([[pix:tiny_c4l|c4l_attention]]);position:absolute;top:6px;right:-3px}.c4l-quote,.c4lv-quote{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:24px;margin:24px auto;min-width:200px;max-width:100%}.c4l-quote .c4l-quote-body,.c4lv-quote .c4l-quote-body{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:space-between;font-style:italic}.c4l-quote .c4l-quote-line,.c4lv-quote .c4l-quote-line{border-left:4px solid #387af1;margin-right:16px;margin-top:4px;margin-bottom:2px}.c4l-quote .c4l-quote-text::before,.c4lv-quote .c4l-quote-text::before{content:"";position:static;top:0;margin-right:0}.c4l-quote .c4l-quote-text::after,.c4lv-quote .c4l-quote-text::after{content:"";position:static;top:0;margin-left:0}.c4l-quote .c4l-quote-text p:first-of-type::before,.c4lv-quote .c4l-quote-text p:first-of-type::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);position:relative;top:-4px;margin-right:2px}.c4l-quote .c4l-quote-text p:last-of-type::after,.c4lv-quote .c4l-quote-text p:last-of-type::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);position:relative;top:-2px;margin-left:2px}.c4l-quote .c4l-quote-text p:last-of-type,.c4lv-quote .c4l-quote-text p:last-of-type{margin-bottom:0}.c4l-quote .c4l-quote-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-quote .c4l-quote-caption span{text-transform:uppercase;font-size:14px}.c4l-quote .c4l-quote-caption span::after{content:", "}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{margin-top:36px}.c4l-dodontcards .c4l-dodontcards-dont,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:36px}.c4l-dodontcards>.c4l-dodontcards-dont,.c4lv-dodontcards>.c4l-dodontcards-dont{margin-top:12px}.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{min-width:200px;max-width:100%;background:#f1fbf5;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-do::before,.c4lv-dodontcards .c4l-dodontcards-do::before{content:url([[pix:tiny_c4l|c4l_docard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{min-width:200px;max-width:100%;background:#ffefef;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-dont::before,.c4lv-dodontcards .c4l-dodontcards-dont::before{content:url([[pix:tiny_c4l|c4l_dontcard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-do p,.c4l-dodontcards .c4l-dodontcards-dont p,.c4lv-dodontcards .c4l-dodontcards-do p,.c4lv-dodontcards .c4l-dodontcards-dont p{margin-bottom:6px}.c4l-dodontcards .c4l-dodontcards-do p:last-of-type,.c4l-dodontcards .c4l-dodontcards-dont p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-do p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-dont p:last-of-type{margin-bottom:0}.c4l-readingcontext,.c4lv-readingcontext{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:36px auto}.c4l-readingcontext p,.c4lv-readingcontext p{font-size:16px;line-height:23px}.c4l-readingcontext{padding:30px 40px 19px 40px;font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-readingcontext .c4l-readingcontext-caption{font-size:16px;margin-top:24px;text-align:right;padding-bottom:14px;font-style:italic}.c4l-readingcontext .c4l-readingcontext-caption span{text-transform:uppercase;font-size:16px;font-style:normal}.c4l-readingcontext .c4l-readingcontext-caption span::after{content:", "}.c4lv-readingcontext{padding:30px 40px 32px 40px;font-family:sans-serif}.c4lv-readingcontext p:last-of-type{margin-bottom:0}.c4lv-readingcontext .c4l-embedded-caption{margin-top:1rem;font-size:16px;font-style:italic}.c4lv-readingcontext.c4l-comfort-reading-variant{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-example,.c4lv-example{font-size:15px;line-height:22px;color:inherit;background:#fff;border-radius:0;margin:36px auto;min-width:75%;max-width:100%;padding:18px 24px;position:relative;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-example h1,.c4lv-example h1{font-weight:700;font-size:11px;line-height:21px;letter-spacing:.5px;color:#3171e3;margin:0 0 24px 0;text-transform:uppercase;font-family:inherit;display:inline-block;border-bottom:2px solid #3171e3}.c4l-figure,.c4lv-figure{min-width:200px;margin:48px auto}.c4l-figure img,.c4lv-figure img{width:100%}.c4l-figure img:not([src]),.c4l-figure img[src=""],.c4lv-figure img:not([src]),.c4lv-figure img[src=""]{content:url([[pix:tiny_c4l|c4l_figure_placeholder]])}.c4l-figure figcaption,.c4lv-figure figcaption{font-size:13px;line-height:16px;color:#686d79;margin-top:7px}.c4l-figure .c4l-figure-footer::after,.c4lv-figure .c4l-figure-footer::after{content:" | ";font-weight:normal;font-style:normal}.c4l-figure .c4l-figure-caption,.c4lv-figure .c4l-figure-caption{font-style:normal;font-size:12px}.c4l-figure figcaption span strong,.c4lv-figure figcaption span strong{font-weight:700}.c4l-figure{max-width:100%}.c4lv-figure{max-width:75%}.c4l-tag,.c4lv-tag{display:inline-block;font-size:10px;font-weight:700;color:#2167cf;background-color:#f1f5fe;border-radius:30px;padding:4px 17px;line-height:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.2px}.c4lv-tag.c4l-align-right-variant{margin-left:auto}.c4l-estimatedtime,.c4lv-estimatedtime{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-estimatedtime span,.c4lv-estimatedtime span{font-weight:600;font-size:10px}.c4l-estimatedtime::before,.c4lv-estimatedtime::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);position:absolute;left:12px}.c4lv-estimatedtime.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-duedate,.c4lv-duedate{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:600;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-duedate::after,.c4lv-duedate::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);position:absolute;left:12px}.c4lv-duedate.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-proceduralcontext,.c4lv-proceduralcontext{font-style:italic;color:#3a56af;margin-bottom:12px;padding-top:24px;padding-bottom:24px;font-weight:400}.c4l-gradingvalue,.c4lv-gradingvalue{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-gradingvalue span,.c4lv-gradingvalue span{font-weight:600;font-size:10px}.c4l-gradingvalue::after,.c4lv-gradingvalue::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);position:absolute;left:12px;top:6px}.c4lv-gradingvalue.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-expectedfeedback,.c4lv-expectedfeedback{min-width:200px;max-width:90%;background-color:#fff;padding:24px 36px 30px 36px;margin:36px auto;font-style:italic;position:relative;border-radius:8px;border:none;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-expectedfeedback::before,.c4lv-expectedfeedback::before{content:""}.c4l-expectedfeedback::after,.c4lv-expectedfeedback::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);position:absolute;bottom:6px;right:-3px}.c4l-expectedfeedback p:last-of-type,.c4lv-expectedfeedback p:last-of-type{margin-bottom:0}.c4l-allpurposecard,.c4lv-allpurposecard{min-width:200px;max-width:100%;background:#f1f5fe;border-radius:10px;padding:24px 48px 30px 36px;margin:24px auto;position:relative}.c4l-allpurposecard p,.c4lv-allpurposecard p{margin-bottom:6px}.c4l-allpurposecard p:last-of-type,.c4lv-allpurposecard p:last-of-type{margin-bottom:0}.c4l-spacer+.c4l-allpurposecard{margin:0 auto}.c4l-inlinetag,.c4lv-inlinetag{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;display:inline-block;color:#fff;background:#3171e3;border-radius:7px;padding:2px 7px 1px 7px;position:relative;top:-2px;margin-left:4px;margin-right:4px}.c4l-learningoutcomes,.c4lv-learningoutcomes{min-width:200px;max-width:99%;background-color:#f2f5fd;padding:24px 48px 30px 36px;border:none;margin:36px auto;position:relative;border-radius:0}.c4l-learningoutcomes p:last-of-type,.c4lv-learningoutcomes p:last-of-type{margin-bottom:0}.c4l-learningoutcomes .c4l-learningoutcomes-title,.c4lv-learningoutcomes .c4l-learningoutcomes-title{position:relative;top:-11px;left:-39px;padding:6px 14px 5px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:600;font-size:11px;letter-spacing:.7px;color:#fff;background-color:#497ae9;text-transform:uppercase;font-family:inherit;display:inline-block;margin-top:0;filter:drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07))}.c4l-learningoutcomes .c4l-learningoutcomes-title::before,.c4lv-learningoutcomes .c4l-learningoutcomes-title::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);position:absolute;width:3px;height:2px;top:15.5px;left:.5px}.c4l-learningoutcomes .c4l-learningoutcomes-list,.c4lv-learningoutcomes .c4l-learningoutcomes-list{margin-top:18px;margin-bottom:18px;padding-left:32px}.c4l-learningoutcomes .c4l-learningoutcomes-list>li,.c4lv-learningoutcomes .c4l-learningoutcomes-list>li{position:relative}.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child){margin-bottom:21px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before{background-image:url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);background-size:9px 11px;display:inline-block;width:9px;height:11px;content:"";justify-self:center;position:absolute;left:-32px;top:7px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker{color:rgba(0,0,0,0)}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list{counter-reset:section}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before{background-image:none;position:absolute;left:-32px;top:0;counter-increment:section;content:counter(section) ". ";font-weight:700;color:#497ae9}body.mce-content-body .collapse:not(.show),.c4l-code-preview .collapse:not(.show){display:block !important}@media only screen and (min-width: 576px){.c4l-modal.modal-open .modal-dialog,.c4l-modal-no-preview.modal-open .modal-dialog{min-width:550px}.c4l-select-filters{display:none}.c4l-buttons-filters{display:flex;justify-content:center;align-items:center;margin:16px 0 37px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:24px auto 8px auto}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:12px auto 0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:12px auto 6px auto;padding:36px 48px}.c4l-embedded-caption{margin-top:24px}.c4l-quote,.c4lv-quote{margin:36px auto;max-width:90%}.c4l-quote .c4l-quote-caption{margin-top:24px}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-dont{max-width:90%;margin:24px auto}.c4l-readingcontext,.c4lv-readingcontext{max-width:88%}.c4l-example,.c4lv-example{max-width:88%;padding:36px 48px}.c4l-expectedfeedback,.c4lv-expectedfeedback{max-width:88%;margin:48px auto}.c4l-allpurposecard,.c4lv-allpurposecard{margin:36px auto;max-width:90%}}@media only screen and (min-width: 768px){.c4l-keyconcept,.c4lv-keyconcept,.c4l-tip,.c4lv-tip,.c4l-reminder,.c4lv-reminder,.c4l-attention,.c4lv-attention,.c4l-dodontcards-do,.c4lv-dodontcards-do,.c4l-dodontcards-dont,.c4lv-dodontcards-dont,.c4l-readingcontext,.c4lv-readingcontext,.c4l-expectedfeedback,.c4lv-expectedfeedback,.c4l-allpurposecard,.c4lv-allpurposecard,.c4l-learningoutcomes,.c4lv-learningoutcomes{max-width:75%}.c4l-keyconcept.c4l-full-width-variant,.c4lv-keyconcept.c4l-full-width-variant,.c4l-tip.c4l-full-width-variant,.c4lv-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-readingcontext.c4l-full-width-variant,.c4lv-readingcontext.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant{max-width:100%}.c4l-quote,.c4lv-quote{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:24px auto 14px auto}.c4l-example,.c4lv-example{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:24px auto 12px auto}}@media only screen and (min-width: 992px){.c4l-modal-no-preview.modal-open .modal-dialog{max-width:550px}.c4l-buttons-preview{max-height:314px}.c4l-buttons-preview.c4l-no-preview{justify-content:center;max-height:324px}.c4l-buttons-preview.c4l-no-preview .c4l-buttons-grid{grid-gap:9px;justify-content:center;width:405px}.c4l-buttons-preview.c4l-no-preview .c4l-code-preview{display:none}.c4l-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill, 116px);grid-template-rows:repeat(auto-fill, 100px);grid-gap:4px;justify-content:flex-start;width:377px;padding:3px 0 3px 3px}.c4lt-dialog-button.c4l-custom-icon .c4l-button-text i{top:20px;left:0;right:0;margin:0 auto;max-width:25px;min-width:25px;width:100%;border-right:none}.c4lt-dialog-button{height:100px;width:116px;max-width:116px;box-shadow:none;border-radius:4px;margin-bottom:0}.c4lt-dialog-button .c4l-button-text::before{top:20px;left:0;right:0;height:20px;width:26px;margin:0 auto;border-right:none}.c4lt-dialog-button .c4l-button-text{padding:55px 8px 15px 8px;font-size:12px;font-weight:500;line-height:13px;width:80px;text-align:center;justify-content:center}.c4lt-dialog-button .c4l-button-variants{grid-auto-flow:row;grid-gap:0;align-content:flex-start;justify-content:start;width:36px;height:99px;background-color:#ecf3ff;margin:0}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;color:#1679f9;height:33px;width:36px}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:0 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:first-child,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:nth-child(2){border-bottom:1px solid #fff}.c4lt-dialog-button:hover .c4l-button-variants .c4l-button-variant{box-shadow:none}.c4l-code-preview{position:relative;display:flex;flex-direction:column;height:300px;width:343px;align-items:center;justify-content:center}.c4l-preview-default{border:1px solid #e1e5ee;border-radius:8px;color:#9297a1;padding:23px 10px;font-weight:400;font-size:12px;line-height:16px;text-align:center;width:60%;margin:0 auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.c4l-text-preview{position:absolute;top:10px;right:10px;font-weight:600;font-size:9.5px;line-height:11px;letter-spacing:.06em;color:#fff;background-color:#535d76;border-radius:6px;padding:5px;text-transform:uppercase}}.c4l-keyconcept.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant,.c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-figure.c4l-full-width-variant,.c4l-proceduralcontext.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant{max-width:100%}.c4l-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant{max-width:99%}.c4l-readingcontext.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant{max-width:94%}.c4lv-keyconcept.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4lv-dodontcards.c4l-full-width-variant,.c4lv-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-figure.c4l-full-width-variant,.c4lv-proceduralcontext.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4lv-custom-component.c4l-full-width-variant{max-width:100%}.c4lv-tip.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant{max-width:99%}.c4lv-readingcontext.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant{max-width:94%} diff --git a/templates/modal.mustache b/templates/modal.mustache index bc0ca2e..89d59e7 100644 --- a/templates/modal.mustache +++ b/templates/modal.mustache @@ -73,7 +73,12 @@ data-type="{{type}}" data-classcomponent="{{classComponent}}" > - {{{name}}} + + {{#icon}} + + {{/icon}} + {{{name}}} + {{#variants}} {{#str}} previewdefault, tiny_c4l {{/str}} {{#buttons}} - + {{/buttons}} {{/preview}}