diff --git a/amd/build/components.min.js b/amd/build/components.min.js index fcc258b..fd505f0 100644 --- a/amd/build/components.min.js +++ b/amd/build/components.min.js @@ -6,6 +6,6 @@ define("tiny_c4l/components",["exports"],(function(_exports){Object.defineProper * @copyright 2022 Marc Català * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -var _default={components:[{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."},{name:"tip",type:"contextual",imageClass:"c4l-tip-icon",code:'

{{PLACEHOLDER}}


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

{{PLACEHOLDER}}


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

{{PLACEHOLDER}}

Marcus Tullius CiceroDe Finibus Bonorum et Malorum


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

{{PLACEHOLDER}}
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.


',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."},{name:"readingcontext",type:"contextual",imageClass:"c4l-readingcontext-icon",code:'

{{PLACEHOLDER}}

Marcus Tullius CiceroDe Finibus Bonorum et Malorum


',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."},{name:"example",type:"contextual",imageClass:"c4l-example-icon",code:'

Lorem ipsum dolor sit amet

{{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."},{name:"figure",type:"contextual",imageClass:"c4l-figure-icon",code:'

Lorem ipsum dolor sit amet
{{PLACEHOLDER}}Font: Phasellus a posuere nibh.


',text:"Consectetur adipiscing elit."},{name:"tag",type:"contextual",imageClass:"c4l-tag-icon",code:'

{{PLACEHOLDER}}
',text:"Lorem ipsum"},{name:"attention",type:"contextual",imageClass:"c4l-attention-icon",code:'

{{PLACEHOLDER}}


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

{{PLACEHOLDER}} min
',text:"15"},{name:"duedate",type:"procedural",imageClass:"c4l-duedate-icon",code:'

{{PLACEHOLDER}}
',text:"November 17th"},{name:"proceduralcontext",type:"procedural",imageClass:"c4l-proceduralcontext-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. Nulla quis lorem aliquet, fermentum dolor ac, venenatis turpis."},{name:"gradingvalue",type:"evaluative",imageClass:"c4l-gradingvalue-icon",code:'

Grading value: {{PLACEHOLDER}}
',text:"33.3%"},{name:"expectedfeedback",type:"evaluative",imageClass:"c4l-expectedfeedback-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."},{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."},{name:"inlinetag",type:"helper",imageClass:"c4l-inlinetag-icon",code:'{{PLACEHOLDER}}',text:"Text"}]};return _exports.default=_default,_exports.default})); +var _default={components:[{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."},{name:"tip",type:"contextual",imageClass:"c4l-tip-icon",code:'

{{PLACEHOLDER}}


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

{{PLACEHOLDER}}


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

{{PLACEHOLDER}}

Marcus Tullius CiceroDe Finibus Bonorum et Malorum


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

{{PLACEHOLDER}}
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.


',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."},{name:"readingcontext",type:"contextual",imageClass:"c4l-readingcontext-icon",code:'

{{PLACEHOLDER}}

Marcus Tullius CiceroDe Finibus Bonorum et Malorum


',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."},{name:"example",type:"contextual",imageClass:"c4l-example-icon",code:'

Lorem ipsum dolor sit amet

{{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."},{name:"figure",type:"contextual",imageClass:"c4l-figure-icon",code:'

Lorem ipsum dolor sit amet
{{PLACEHOLDER}}Font: Phasellus a posuere nibh.


',text:"Consectetur adipiscing elit."},{name:"tag",type:"contextual",imageClass:"c4l-tag-icon",code:'

{{PLACEHOLDER}}
',text:"Lorem ipsum"},{name:"inlinetag",type:"contextual",imageClass:"c4l-inlinetag-icon",code:'{{PLACEHOLDER}}',text:"Text"},{name:"attention",type:"procedural",imageClass:"c4l-attention-icon",code:'

{{PLACEHOLDER}}


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

{{PLACEHOLDER}} min
',text:"15"},{name:"duedate",type:"procedural",imageClass:"c4l-duedate-icon",code:'

{{PLACEHOLDER}}
',text:"November 17th"},{name:"proceduralcontext",type:"procedural",imageClass:"c4l-proceduralcontext-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. Nulla quis lorem aliquet, fermentum dolor ac, venenatis turpis."},{name:"gradingvalue",type:"evaluative",imageClass:"c4l-gradingvalue-icon",code:'

Grading value: {{PLACEHOLDER}}
',text:"33.3%"},{name:"expectedfeedback",type:"evaluative",imageClass:"c4l-expectedfeedback-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."},{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."}]};return _exports.default=_default,_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 7ab0a85..b65b4de 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 name: \"keyconcept\",\n type: \"contextual\",\n imageClass: \"c4l-keyconcept-icon\",\n code: \"

\" +\n \"{{PLACEHOLDER}}


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

\" +\n \"{{PLACEHOLDER}}


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

\" +\n \"{{PLACEHOLDER}}


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

\" +\n \"
\" +\n \"

{{PLACEHOLDER}}

\" +\n \"
Marcus Tullius Cicero\" +\n \"De Finibus Bonorum et Malorum


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

\" +\n \"
{{PLACEHOLDER}}
\" +\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: \"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 },\n {\n name: \"readingcontext\",\n type: \"contextual\",\n imageClass: \"c4l-readingcontext-icon\",\n code: \"

\" +\n \"

{{PLACEHOLDER}}

\" +\n \"
Marcus Tullius Cicero\" +\n \"De Finibus Bonorum et Malorum


\",\n text: \"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 },\n {\n name: \"example\",\n type: \"contextual\",\n imageClass: \"c4l-example-icon\",\n code: \"

\" +\n \"

Lorem ipsum dolor sit amet

\" +\n \"

{{PLACEHOLDER}}


\",\n text: \"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 },\n {\n name: \"figure\",\n type: \"contextual\",\n imageClass: \"c4l-figure-icon\",\n code: \"

\" +\n \"\\\"Lorem\" +\n \"
{{PLACEHOLDER}}\" +\n \"Font: Phasellus a posuere nibh.\" +\n \"


\",\n text: \"Consectetur adipiscing elit.\"\n },\n {\n name: \"tag\",\n type: \"contextual\",\n imageClass: \"c4l-tag-icon\",\n code: \"

{{PLACEHOLDER}}
\",\n text: \"Lorem ipsum\"\n },\n {\n name: \"attention\",\n type: \"contextual\",\n imageClass: \"c4l-attention-icon\",\n code: \"

\" +\n \"{{PLACEHOLDER}}


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

\" +\n \"{{PLACEHOLDER}} min
\",\n text: \"15\"\n },\n {\n name: \"duedate\",\n type: \"procedural\",\n imageClass: \"c4l-duedate-icon\",\n code: \"

{{PLACEHOLDER}}
\",\n text: \"November 17th\"\n },\n {\n name: \"proceduralcontext\",\n type: \"procedural\",\n imageClass: \"c4l-proceduralcontext-icon\",\n code: \"

\" +\n \"{{PLACEHOLDER}}


\",\n text: \"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 },\n {\n name: \"gradingvalue\",\n type: \"evaluative\",\n imageClass: \"c4l-gradingvalue-icon\",\n code: \"

\" +\n \"Grading value: {{PLACEHOLDER}}
\",\n text: \"33.3%\"\n },\n {\n name: \"expectedfeedback\",\n type: \"evaluative\",\n imageClass: \"c4l-expectedfeedback-icon\",\n code: \"

\" +\n \"

{{PLACEHOLDER}}


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

\" +\n \"

{{PLACEHOLDER}}


\",\n text: \"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 },\n {\n name: \"inlinetag\",\n type: \"helper\",\n imageClass: \"c4l-inlinetag-icon\",\n code: \"{{PLACEHOLDER}}\",\n text: \"Text\"\n },\n];\n\nexport default {\n components,\n};"],"names":["components","name","type","imageClass","code","text"],"mappings":";;;;;;;;aA0Le,CACXA,WApKe,CACf,CACIC,KAAM,aACNC,KAAM,aACNC,WAAY,sBACZC,KAAM,yFAENC,KAAM,2GAEV,CACIJ,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,KAAM,kFAENC,KAAM,2GAEV,CACIJ,KAAM,WACNC,KAAM,aACNC,WAAY,oBACZC,KAAM,uFAENC,KAAM,2GAEV,CACIJ,KAAM,QACNC,KAAM,aACNC,WAAY,iBACZC,KAAM,qSAKNC,KAAM,6IAGV,CACIJ,KAAM,cACNC,KAAM,aACNC,WAAY,uBACZC,KAAM,wYAMNC,KAAM,mOAIV,CACIJ,KAAM,iBACNC,KAAM,aACNC,WAAY,0BACZC,KAAM,iNAINC,KAAM,kNAIV,CACIJ,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,KAAM,gIAGNC,KAAM,oOAKV,CACIJ,KAAM,SACNC,KAAM,aACNC,WAAY,kBACZC,KAAM,sUAKNC,KAAM,gCAEV,CACIJ,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,KAAM,2GACNC,KAAM,eAEV,CACIJ,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,KAAM,wFAENC,KAAM,2GAEV,CACIJ,KAAM,gBACNC,KAAM,aACNC,WAAY,yBACZC,KAAM,sIAENC,KAAM,MAEV,CACIJ,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,KAAM,+GACNC,KAAM,iBAEV,CACIJ,KAAM,oBACNC,KAAM,aACNC,WAAY,6BACZC,KAAM,4FAENC,KAAM,oSAKV,CACIJ,KAAM,eACNC,KAAM,aACNC,WAAY,wBACZC,KAAM,gJAENC,KAAM,SAEV,CACIJ,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,KAAM,sGAENC,KAAM,6IAGV,CACIJ,KAAM,iBACNC,KAAM,SACNC,WAAY,0BACZC,KAAM,oGAENC,KAAM,oOAIV,CACIJ,KAAM,YACNC,KAAM,SACNC,WAAY,qBACZC,KAAM,qDACNC,KAAM"} \ 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 name: \"keyconcept\",\n type: \"contextual\",\n imageClass: \"c4l-keyconcept-icon\",\n code: \"

\" +\n \"{{PLACEHOLDER}}


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

\" +\n \"{{PLACEHOLDER}}


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

\" +\n \"{{PLACEHOLDER}}


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

\" +\n \"
\" +\n \"

{{PLACEHOLDER}}

\" +\n \"
Marcus Tullius Cicero\" +\n \"De Finibus Bonorum et Malorum


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

\" +\n \"
{{PLACEHOLDER}}
\" +\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: \"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 },\n {\n name: \"readingcontext\",\n type: \"contextual\",\n imageClass: \"c4l-readingcontext-icon\",\n code: \"

\" +\n \"

{{PLACEHOLDER}}

\" +\n \"
Marcus Tullius Cicero\" +\n \"De Finibus Bonorum et Malorum


\",\n text: \"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 },\n {\n name: \"example\",\n type: \"contextual\",\n imageClass: \"c4l-example-icon\",\n code: \"

\" +\n \"

Lorem ipsum dolor sit amet

\" +\n \"

{{PLACEHOLDER}}


\",\n text: \"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 },\n {\n name: \"figure\",\n type: \"contextual\",\n imageClass: \"c4l-figure-icon\",\n code: \"

\" +\n \"\\\"Lorem\" +\n \"
{{PLACEHOLDER}}\" +\n \"Font: Phasellus a posuere nibh.\" +\n \"


\",\n text: \"Consectetur adipiscing elit.\"\n },\n {\n name: \"tag\",\n type: \"contextual\",\n imageClass: \"c4l-tag-icon\",\n code: \"

{{PLACEHOLDER}}
\",\n text: \"Lorem ipsum\"\n },\n {\n name: \"inlinetag\",\n type: \"contextual\",\n imageClass: \"c4l-inlinetag-icon\",\n code: \"{{PLACEHOLDER}}\",\n text: \"Text\"\n },\n {\n name: \"attention\",\n type: \"procedural\",\n imageClass: \"c4l-attention-icon\",\n code: \"

\" +\n \"{{PLACEHOLDER}}


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

\" +\n \"{{PLACEHOLDER}} min
\",\n text: \"15\"\n },\n {\n name: \"duedate\",\n type: \"procedural\",\n imageClass: \"c4l-duedate-icon\",\n code: \"

{{PLACEHOLDER}}
\",\n text: \"November 17th\"\n },\n {\n name: \"proceduralcontext\",\n type: \"procedural\",\n imageClass: \"c4l-proceduralcontext-icon\",\n code: \"

\" +\n \"{{PLACEHOLDER}}


\",\n text: \"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 },\n {\n name: \"gradingvalue\",\n type: \"evaluative\",\n imageClass: \"c4l-gradingvalue-icon\",\n code: \"

\" +\n \"Grading value: {{PLACEHOLDER}}
\",\n text: \"33.3%\"\n },\n {\n name: \"expectedfeedback\",\n type: \"evaluative\",\n imageClass: \"c4l-expectedfeedback-icon\",\n code: \"

\" +\n \"

{{PLACEHOLDER}}


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

\" +\n \"

{{PLACEHOLDER}}


\",\n text: \"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 },\n];\n\nexport default {\n components,\n};"],"names":["components","name","type","imageClass","code","text"],"mappings":";;;;;;;;aA0Le,CACXA,WApKe,CACf,CACIC,KAAM,aACNC,KAAM,aACNC,WAAY,sBACZC,KAAM,yFAENC,KAAM,2GAEV,CACIJ,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,KAAM,kFAENC,KAAM,2GAEV,CACIJ,KAAM,WACNC,KAAM,aACNC,WAAY,oBACZC,KAAM,uFAENC,KAAM,2GAEV,CACIJ,KAAM,QACNC,KAAM,aACNC,WAAY,iBACZC,KAAM,qSAKNC,KAAM,6IAGV,CACIJ,KAAM,cACNC,KAAM,aACNC,WAAY,uBACZC,KAAM,wYAMNC,KAAM,mOAIV,CACIJ,KAAM,iBACNC,KAAM,aACNC,WAAY,0BACZC,KAAM,iNAINC,KAAM,kNAIV,CACIJ,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,KAAM,gIAGNC,KAAM,oOAKV,CACIJ,KAAM,SACNC,KAAM,aACNC,WAAY,kBACZC,KAAM,sUAKNC,KAAM,gCAEV,CACIJ,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,KAAM,2GACNC,KAAM,eAEV,CACIJ,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,KAAM,qDACNC,KAAM,QAEV,CACIJ,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,KAAM,wFAENC,KAAM,2GAEV,CACIJ,KAAM,gBACNC,KAAM,aACNC,WAAY,yBACZC,KAAM,sIAENC,KAAM,MAEV,CACIJ,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,KAAM,+GACNC,KAAM,iBAEV,CACIJ,KAAM,oBACNC,KAAM,aACNC,WAAY,6BACZC,KAAM,4FAENC,KAAM,oSAKV,CACIJ,KAAM,eACNC,KAAM,aACNC,WAAY,wBACZC,KAAM,gJAENC,KAAM,SAEV,CACIJ,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,KAAM,sGAENC,KAAM,6IAGV,CACIJ,KAAM,iBACNC,KAAM,SACNC,WAAY,0BACZC,KAAM,oGAENC,KAAM"} \ No newline at end of file diff --git a/amd/build/ui.min.js b/amd/build/ui.min.js index c9a2928..633e21f 100644 --- a/amd/build/ui.min.js +++ b/amd/build/ui.min.js @@ -1,3 +1,3 @@ -define("tiny_c4l/ui",["exports","./common","./modal","core/modal_factory","./components","core/str","./options","core/modal_events"],(function(_exports,_common,_modal,_modal_factory,_components,_str,_options,_modal_events){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.handleAction=void 0,_modal=_interopRequireDefault(_modal),_modal_factory=_interopRequireDefault(_modal_factory),_modal_events=_interopRequireDefault(_modal_events);var previewC4L=!0;_exports.handleAction=function(editor){previewC4L=(0,_options.showPreview)(editor),displayDialogue(editor)};var _ref,_ref2,_ref3,_ref4,displayDialogue=(_ref=_asyncToGenerator(regeneratorRuntime.mark((function _callee(editor){var data,modal;return regeneratorRuntime.wrap((function(_context){for(;;)switch(_context.prev=_context.next){case 0:return data=Object.assign({},{}),_context.t0=_modal_factory.default,_context.t1=_modal.default.TYPE,_context.next=5,getTemplateContext(editor,data);case 5:return _context.t2=_context.sent,_context.t3={type:_context.t1,templateContext:_context.t2,large:!0},_context.next=9,_context.t0.create.call(_context.t0,_context.t3);case 9:modal=_context.sent,previewC4L&&(editor.targetElm.closest("body").classList.add("c4l-modal-open"),modal.setScrollable(!1)),modal.show(),modal.getRoot()[0].addEventListener("click",(function(event){handleModalClick(event,editor,modal)})),modal.getRoot().on(_modal_events.default.hidden,(function(){handleModalHidden(editor)})),previewC4L&&(modal.getRoot()[0].addEventListener("mouseover",(function(event){handleModalMouseEvent(event,modal,!0)})),modal.getRoot()[0].addEventListener("mouseout",(function(event){handleModalMouseEvent(event,modal,!1)})));case 15:case"end":return _context.stop()}}),_callee)}))),function(_x){return _ref.apply(this,arguments)}),handleModalHidden=function(editor){editor.targetElm.closest("body").classList.remove("c4l-modal-open")},handleModalClick=function(event,editor,modal){var button=event.target.closest("button");if(button){var sel=editor.selection.getContent(),selectedButton=button.dataset.id;if(null!==_components.components&&void 0!==_components.components&&_components.components[selectedButton]){var componentCode=_components.components[selectedButton].code,placeholder=sel.length>0?sel:_components.components[selectedButton].text,timestamp=(new Date).getTime(),randomId=Math.round(1e5*Math.random())+"-"+timestamp,newNode=document.createElement("span");newNode.dataset.id=randomId,newNode.innerHTML=placeholder,componentCode=componentCode.replace("{{PLACEHOLDER}}",newNode.outerHTML),editor.selection.setContent(componentCode);var nodeSel=editor.dom.select('span[data-id="'+randomId+'"]');null!=nodeSel&&nodeSel[0]&&editor.selection.select(nodeSel[0]),editor.focus()}modal.destroy()}},handleModalMouseEvent=function(event,modal,show){var isPreview="c4l-eye-preview"==event.target.className,button=event.target.closest("button");if(isPreview&&button){var selectedButton=button.dataset.id,node=modal.getRoot()[0].querySelector('div[data-id="code-preview-'+selectedButton+'"]');node&&(show?(node.parentElement.classList.remove("c4l-hidden"),node.parentElement.classList.add("c4l-visible"),node.classList.remove("c4l-hidden"),node.classList.add("c4l-visible")):(node.parentElement.classList.remove("c4l-visible"),node.parentElement.classList.add("c4l-hidden"),node.classList.remove("c4l-visible"),node.classList.add("c4l-hidden")))}},getTemplateContext=(_ref2=_asyncToGenerator(regeneratorRuntime.mark((function _callee2(editor,data){return regeneratorRuntime.wrap((function(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:return _context2.t0=Object,_context2.t1={},_context2.t2=editor.id,_context2.next=5,getButtons(editor);case 5:return _context2.t3=_context2.sent,_context2.t4=previewC4L,_context2.next=9,(0,_str.get_string)("preview",_common.component);case 9:return _context2.t5=_context2.sent,_context2.t6={elementid:_context2.t2,buttons:_context2.t3,preview:_context2.t4,textpreview:_context2.t5},_context2.t7=data,_context2.abrupt("return",_context2.t0.assign.call(_context2.t0,_context2.t1,_context2.t6,_context2.t7));case 13:case"end":return _context2.stop()}}),_callee2)}))),function(_x2,_x3){return _ref2.apply(this,arguments)}),getButtons=(_ref3=_asyncToGenerator(regeneratorRuntime.mark((function _callee3(editor){var buttons,strings,sel,componentCode,placeholder;return regeneratorRuntime.wrap((function(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:return buttons=[],_context3.next=3,getAllStrings();case 3:return strings=_context3.sent,sel=editor.selection.getContent(),componentCode="",placeholder="",_components.components.map((function(component,index){previewC4L&&(placeholder=sel.length>0?sel:component.text,componentCode=(componentCode=component.code).replace("{{PLACEHOLDER}}",placeholder)),buttons.push({id:index,name:strings.get(component.name),imageClass:component.imageClass,htmlcode:componentCode})})),_context3.abrupt("return",buttons);case 9:case"end":return _context3.stop()}}),_callee3)}))),function(_x4){return _ref3.apply(this,arguments)}),getAllStrings=(_ref4=_asyncToGenerator(regeneratorRuntime.mark((function _callee4(){var keys,stringValues;return regeneratorRuntime.wrap((function(_context4){for(;;)switch(_context4.prev=_context4.next){case 0:return keys=[],_components.components.map((function(element){keys.push(element.name)})),_context4.next=4,(0,_str.get_strings)(keys.map((function(key){return{key:key,component:_common.component}})));case 4:return stringValues=_context4.sent,_context4.abrupt("return",new Map(keys.map((function(key,index){return[key,stringValues[index]]}))));case 6:case"end":return _context4.stop()}}),_callee4)}))),function(){return _ref4.apply(this,arguments)})})); +define("tiny_c4l/ui",["exports","./common","./modal","core/modal_factory","./components","core/str","./options","core/modal_events"],(function(_exports,_common,_modal,_modal_factory,_components,_str,_options,_modal_events){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.handleAction=void 0,_modal=_interopRequireDefault(_modal),_modal_factory=_interopRequireDefault(_modal_factory),_modal_events=_interopRequireDefault(_modal_events);var previewC4L=!0,Contexts=[];_exports.handleAction=function(editor){previewC4L=(0,_options.showPreview)(editor),displayDialogue(editor)};var _ref,_ref2,_ref3,_ref4,_ref5,displayDialogue=(_ref=_asyncToGenerator(regeneratorRuntime.mark((function _callee(editor){var data,modal;return regeneratorRuntime.wrap((function(_context){for(;;)switch(_context.prev=_context.next){case 0:return data=Object.assign({},{}),_context.t0=_modal_factory.default,_context.t1=_modal.default.TYPE,_context.next=5,getTemplateContext(editor,data);case 5:return _context.t2=_context.sent,_context.t3={type:_context.t1,templateContext:_context.t2,large:!0},_context.next=9,_context.t0.create.call(_context.t0,_context.t3);case 9:modal=_context.sent,previewC4L||editor.targetElm.closest("body").classList.add("c4l-modal-no-preview"),modal.show(),modal.getRoot()[0].addEventListener("click",(function(event){handleModalClick(event,editor,modal)})),modal.getRoot().on(_modal_events.default.hidden,(function(){handleModalHidden(editor)})),previewC4L&&(modal.getRoot()[0].addEventListener("mouseover",(function(event){handleModalMouseEvent(event,modal,!0)})),modal.getRoot()[0].addEventListener("mouseout",(function(event){handleModalMouseEvent(event,modal,!1)})));case 15:case"end":return _context.stop()}}),_callee)}))),function(_x){return _ref.apply(this,arguments)}),handleModalHidden=function(editor){editor.targetElm.closest("body").classList.remove("c4l-modal-no-preview")},handleModalClick=function(event,editor,modal){var button=event.target.closest("button"),select=event.target.closest("select");if(button){var selectedButton=button.dataset.id;if(null!==_components.components&&void 0!==_components.components&&_components.components[selectedButton]){var sel=editor.selection.getContent(),componentCode=_components.components[selectedButton].code,placeholder=sel.length>0?sel:_components.components[selectedButton].text,timestamp=(new Date).getTime(),randomId=Math.round(1e5*Math.random())+"-"+timestamp,newNode=document.createElement("span");newNode.dataset.id=randomId,newNode.innerHTML=placeholder,componentCode=componentCode.replace("{{PLACEHOLDER}}",newNode.outerHTML),editor.selection.setContent(componentCode);var nodeSel=editor.dom.select('span[data-id="'+randomId+'"]');null!=nodeSel&&nodeSel[0]&&editor.selection.select(nodeSel[0]),modal.destroy(),editor.focus()}else{var currentContext=button.dataset.filter;if(-1!==Contexts.indexOf(currentContext))modal.getRoot()[0].querySelectorAll(".c4l-buttons-filters button").forEach((function(node){return 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)}}else if(select){var _currentContext=select.value;if(-1!==Contexts.indexOf(_currentContext))modal.getRoot()[0].querySelectorAll(".c4l-buttons-filters button").forEach((function(node){return 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)}},handleModalMouseEvent=function(event,modal,show){var isPreview=event.target.classList.contains("c4l-dialog-button"),button=event.target.closest("button");if(isPreview&&button){var selectedButton=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")))}},getTemplateContext=(_ref2=_asyncToGenerator(regeneratorRuntime.mark((function _callee2(editor,data){return regeneratorRuntime.wrap((function(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:return _context2.t0=Object,_context2.t1={},_context2.t2=editor.id,_context2.next=5,getButtons(editor);case 5:return _context2.t3=_context2.sent,_context2.next=8,getFilters();case 8:return _context2.t4=_context2.sent,_context2.t5=previewC4L,_context2.t6={elementid:_context2.t2,buttons:_context2.t3,filters:_context2.t4,preview:_context2.t5},_context2.t7=data,_context2.abrupt("return",_context2.t0.assign.call(_context2.t0,_context2.t1,_context2.t6,_context2.t7));case 13:case"end":return _context2.stop()}}),_callee2)}))),function(_x2,_x3){return _ref2.apply(this,arguments)}),getFilters=(_ref3=_asyncToGenerator(regeneratorRuntime.mark((function _callee3(){var filters,stringValues;return regeneratorRuntime.wrap((function(_context3){for(;;)switch(_context3.prev=_context3.next){case 0:return filters=[],_context3.next=3,(0,_str.get_strings)(Contexts.map((function(key){return{key:key,component:_common.component}})));case 3:return stringValues=_context3.sent,Contexts.map((function(context,index){filters.push({name:stringValues[index],type:context,filterClass:0===index?"c4l-button-filter-enabled":""})})),_context3.abrupt("return",filters);case 6:case"end":return _context3.stop()}}),_callee3)}))),function(){return _ref3.apply(this,arguments)}),getButtons=(_ref4=_asyncToGenerator(regeneratorRuntime.mark((function _callee4(editor){var buttons,strings,sel,componentCode,placeholder;return regeneratorRuntime.wrap((function(_context4){for(;;)switch(_context4.prev=_context4.next){case 0:return buttons=[],_context4.next=3,getAllStrings();case 3:return strings=_context4.sent,sel=editor.selection.getContent(),componentCode="",placeholder="",_components.components.map((function(component,index){previewC4L&&(placeholder=sel.length>0?sel:component.text,componentCode=(componentCode=component.code).replace("{{PLACEHOLDER}}",placeholder)),-1===Contexts.indexOf(component.type)&&Contexts.push(component.type),buttons.push({id:index,name:strings.get(component.name),type:component.type,imageClass:component.imageClass,htmlcode:componentCode}),0!==Contexts.indexOf(component.type)&&(buttons[index].imageClass+=" c4l-hidden")})),_context4.abrupt("return",buttons);case 9:case"end":return _context4.stop()}}),_callee4)}))),function(_x4){return _ref4.apply(this,arguments)}),showContextButtons=function(modal,context){var showNodes=modal.getRoot()[0].querySelectorAll('button[data-type="'+context+'"]'),hideNodes=modal.getRoot()[0].querySelectorAll('button[data-type]:not([data-type="'+context+'"])');showNodes.forEach((function(node){return node.classList.remove("c4l-hidden")})),hideNodes.forEach((function(node){return node.classList.add("c4l-hidden")}))},getAllStrings=(_ref5=_asyncToGenerator(regeneratorRuntime.mark((function _callee5(){var keys,stringValues;return regeneratorRuntime.wrap((function(_context5){for(;;)switch(_context5.prev=_context5.next){case 0:return keys=[],_components.components.map((function(element){return keys.push(element.name)})),_context5.next=4,(0,_str.get_strings)(keys.map((function(key){return{key:key,component:_common.component}})));case 4:return stringValues=_context5.sent,_context5.abrupt("return",new Map(keys.map((function(key,index){return[key,stringValues[index]]}))));case 6:case"end":return _context5.stop()}}),_callee5)}))),function(){return _ref5.apply(this,arguments)})})); //# 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 5f66170..87de20c 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 {\n get_string as getString,\n get_strings as getStrings\n} from 'core/str';\nimport {showPreview} from './options';\nimport ModalEvents from 'core/modal_events';\n\nlet previewC4L = true;\n\n/**\n * Handle action\n * @param {TinyMCE} editor\n */\nexport const handleAction = (editor) => {\n previewC4L = showPreview(editor);\n displayDialogue(editor);\n};\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 // Disable scroll on preview.\n if (previewC4L) {\n editor.targetElm.closest('body').classList.add('c4l-modal-open');\n modal.setScrollable(false);\n }\n modal.show();\n\n // Event listeners.\n modal.getRoot()[0].addEventListener('click', (event) => {\n handleModalClick(event, editor, modal);\n });\n modal.getRoot().on(ModalEvents.hidden, () => {\n handleModalHidden(editor);\n });\n if (previewC4L) {\n modal.getRoot()[0].addEventListener('mouseover', (event) => {\n handleModalMouseEvent(event, modal, true);\n });\n modal.getRoot()[0].addEventListener('mouseout', (event) => {\n handleModalMouseEvent(event, modal, false);\n });\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-open');\n};\n\n/**\n * Handle a click within the Modal.\n *\n * @param {MouseEvent} event The click event\n * @param {obj} editor\n * @param {obj} modal\n */\nconst handleModalClick = (event, editor, modal) => {\n const button = event.target.closest('button');\n\n if (button) {\n const sel = editor.selection.getContent();\n const selectedButton = button.dataset.id;\n\n if (Components?.[selectedButton]) {\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 timestamp = new Date().getTime();\n const randomId = Math.round(Math.random() * 100000) + '-' + timestamp;\n const newNode = document.createElement('span');\n newNode.dataset.id = randomId;\n newNode.innerHTML = placeholder;\n componentCode = componentCode.replace('{{PLACEHOLDER}}', newNode.outerHTML);\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 editor.focus();\n }\n\n modal.destroy();\n }\n};\n\n/**\n * Handle a mouse event within the Modal.\n *\n * @param {MouseEvent} event The click event\n * @param {obj} modal\n * @param {bool} show\n */\nconst handleModalMouseEvent = (event, modal, show) => {\n const isPreview = event.target.className == 'c4l-eye-preview';\n const button = event.target.closest('button');\n\n if (isPreview && button) {\n const selectedButton = button.dataset.id;\n const node = modal.getRoot()[0].querySelector('div[data-id=\"code-preview-' + selectedButton + '\"]');\n\n if (node) {\n if (show) {\n node.parentElement.classList.remove('c4l-hidden');\n node.parentElement.classList.add('c4l-visible');\n node.classList.remove('c4l-hidden');\n node.classList.add('c4l-visible');\n } else {\n node.parentElement.classList.remove('c4l-visible');\n node.parentElement.classList.add('c4l-hidden');\n node.classList.remove('c4l-visible');\n node.classList.add('c4l-hidden');\n }\n }\n }\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 preview: previewC4L,\n textpreview: await getString('preview', component),\n }, data);\n};\n\n/**\n * Get the C4L buttons for the dialogue.\n *\n * @param {Editor} editor\n * @returns {object} data\n */\nconst getButtons = async(editor) => {\n const buttons = [];\n const strings = await getAllStrings();\n const sel = editor.selection.getContent();\n let componentCode = '';\n let placeholder = '';\n\n // Iterate over components.\n Components.map((component, index) => {\n if (previewC4L) {\n placeholder = (sel.length > 0 ? sel : component.text);\n componentCode = component.code;\n componentCode = componentCode.replace('{{PLACEHOLDER}}', placeholder);\n }\n\n buttons.push({\n id: index,\n name: strings.get(component.name),\n imageClass: component.imageClass,\n htmlcode: componentCode,\n });\n });\n\n return buttons;\n};\n\n/**\n * Get language strings.\n *\n * @return {object} Language strings\n */\nconst getAllStrings = async() => {\n const keys = [];\n\n Components.map((element) => {\n keys.push(element.name);\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":["previewC4L","editor","displayDialogue","data","Object","assign","ModalFactory","C4LModal","TYPE","getTemplateContext","type","templateContext","large","create","modal","targetElm","closest","classList","add","setScrollable","show","getRoot","addEventListener","event","handleModalClick","on","ModalEvents","hidden","handleModalHidden","handleModalMouseEvent","remove","button","target","sel","selection","getContent","selectedButton","dataset","id","Components","componentCode","code","placeholder","length","text","timestamp","Date","getTime","randomId","Math","round","random","newNode","document","createElement","innerHTML","replace","outerHTML","setContent","nodeSel","dom","select","focus","destroy","isPreview","className","node","querySelector","parentElement","getButtons","component","elementid","buttons","preview","textpreview","getAllStrings","strings","map","index","push","name","get","imageClass","htmlcode","keys","element","key","stringValues","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 {\n get_strings as getStrings\n} from 'core/str';\nimport {showPreview} from './options';\nimport ModalEvents from 'core/modal_events';\n\nlet previewC4L = true;\nlet Contexts = [];\n\n/**\n * Handle action\n * @param {TinyMCE} editor\n */\nexport const handleAction = (editor) => {\n previewC4L = showPreview(editor);\n displayDialogue(editor);\n};\n\n/**\n * Display modal\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 listeners.\n modal.getRoot()[0].addEventListener('click', (event) => {\n handleModalClick(event, editor, modal);\n });\n modal.getRoot().on(ModalEvents.hidden, () => {\n handleModalHidden(editor);\n });\n if (previewC4L) {\n modal.getRoot()[0].addEventListener('mouseover', (event) => {\n handleModalMouseEvent(event, modal, true);\n });\n modal.getRoot()[0].addEventListener('mouseout', (event) => {\n handleModalMouseEvent(event, modal, false);\n });\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};\n\n/**\n * Handle a click within the Modal.\n *\n * @param {MouseEvent} event The click event\n * @param {obj} editor\n * @param {obj} modal\n */\nconst handleModalClick = (event, editor, modal) => {\n const button = event.target.closest('button');\n const select = event.target.closest('select');\n\n if (button) {\n const selectedButton = 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 timestamp = new Date().getTime();\n const randomId = Math.round(Math.random() * 100000) + '-' + timestamp;\n const newNode = document.createElement('span');\n newNode.dataset.id = randomId;\n newNode.innerHTML = placeholder;\n componentCode = componentCode.replace('{{PLACEHOLDER}}', newNode.outerHTML);\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 } else {\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 } else if (select) {\n const currentContext = select.value;\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 const button = modal.getRoot()[0].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 mouse event within the Modal.\n *\n * @param {MouseEvent} event The click event\n * @param {obj} modal\n * @param {bool} show\n */\nconst handleModalMouseEvent = (event, modal, show) => {\n const isPreview = event.target.classList.contains('c4l-dialog-button');\n const button = event.target.closest('button');\n\n if (isPreview && button) {\n const selectedButton = 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/**\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.map((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} data\n */\nconst getButtons = async(editor) => {\n const buttons = [];\n const strings = await getAllStrings();\n const sel = editor.selection.getContent();\n let componentCode = '';\n let placeholder = '';\n\n // Iterate over components.\n Components.map((component, index) => {\n if (previewC4L) {\n placeholder = (sel.length > 0 ? sel : component.text);\n componentCode = component.code;\n componentCode = componentCode.replace('{{PLACEHOLDER}}', placeholder);\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: strings.get(component.name),\n type: component.type,\n imageClass: component.imageClass,\n htmlcode: componentCode,\n });\n\n // Add class to hide button.\n if (Contexts.indexOf(component.type) !== 0) {\n buttons[index].imageClass += ' c4l-hidden';\n }\n });\n\n return buttons;\n};\n\n/**\n * Show/hide buttons depend on selected context.\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 * Get language strings.\n *\n * @return {object} Language strings\n */\nconst getAllStrings = async() => {\n const keys = [];\n\n Components.map(element => keys.push(element.name));\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":["previewC4L","Contexts","editor","displayDialogue","data","Object","assign","ModalFactory","C4LModal","TYPE","getTemplateContext","type","templateContext","large","create","modal","targetElm","closest","classList","add","show","getRoot","addEventListener","event","handleModalClick","on","ModalEvents","hidden","handleModalHidden","handleModalMouseEvent","remove","button","target","select","selectedButton","dataset","id","Components","sel","selection","getContent","componentCode","code","placeholder","length","text","timestamp","Date","getTime","randomId","Math","round","random","newNode","document","createElement","innerHTML","replace","outerHTML","setContent","nodeSel","dom","destroy","focus","currentContext","filter","indexOf","querySelectorAll","forEach","node","querySelector","selectedIndex","showContextButtons","value","isPreview","contains","previewDefault","toggle","getButtons","getFilters","elementid","buttons","filters","preview","map","key","component","stringValues","context","index","push","name","filterClass","getAllStrings","strings","get","imageClass","htmlcode","showNodes","hideNodes","keys","element","Map"],"mappings":"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"} \ No newline at end of file diff --git a/amd/src/components.js b/amd/src/components.js index af628de..293ed8a 100644 --- a/amd/src/components.js +++ b/amd/src/components.js @@ -115,8 +115,15 @@ const components = [ text: "Lorem ipsum" }, { - name: "attention", + name: "inlinetag", type: "contextual", + imageClass: "c4l-inlinetag-icon", + code: "{{PLACEHOLDER}}", + text: "Text" + }, + { + name: "attention", + type: "procedural", imageClass: "c4l-attention-icon", code: "

" + "{{PLACEHOLDER}}


", @@ -175,13 +182,6 @@ const components = [ " Praesent dictum in velit sed dapibus." + " Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." }, - { - name: "inlinetag", - type: "helper", - imageClass: "c4l-inlinetag-icon", - code: "{{PLACEHOLDER}}", - text: "Text" - }, ]; export default { diff --git a/amd/src/ui.js b/amd/src/ui.js index 63ad3aa..82adbae 100644 --- a/amd/src/ui.js +++ b/amd/src/ui.js @@ -26,13 +26,13 @@ import C4LModal from './modal'; import ModalFactory from 'core/modal_factory'; import {components as Components} from './components'; import { - get_string as getString, get_strings as getStrings } from 'core/str'; import {showPreview} from './options'; import ModalEvents from 'core/modal_events'; let previewC4L = true; +let Contexts = []; /** * Handle action @@ -43,6 +43,10 @@ export const handleAction = (editor) => { displayDialogue(editor); }; +/** + * Display modal + * @param {TinyMCE} editor + */ const displayDialogue = async(editor) => { const data = Object.assign({}, {}); @@ -53,10 +57,9 @@ const displayDialogue = async(editor) => { large: true, }); - // Disable scroll on preview. - if (previewC4L) { - editor.targetElm.closest('body').classList.add('c4l-modal-open'); - modal.setScrollable(false); + // Set modal size when no preview. + if (!previewC4L) { + editor.targetElm.closest('body').classList.add('c4l-modal-no-preview'); } modal.show(); @@ -83,7 +86,7 @@ const displayDialogue = async(editor) => { * @param {obj} editor */ const handleModalHidden = (editor) => { - editor.targetElm.closest('body').classList.remove('c4l-modal-open'); + editor.targetElm.closest('body').classList.remove('c4l-modal-no-preview'); }; /** @@ -95,12 +98,14 @@ const handleModalHidden = (editor) => { */ const handleModalClick = (event, editor, modal) => { const button = event.target.closest('button'); + const select = event.target.closest('select'); if (button) { - const sel = editor.selection.getContent(); const selectedButton = button.dataset.id; + // Component button. if (Components?.[selectedButton]) { + const sel = editor.selection.getContent(); let componentCode = Components[selectedButton].code; const placeholder = (sel.length > 0 ? sel : Components[selectedButton].text); @@ -121,10 +126,37 @@ const handleModalClick = (event, editor, modal) => { editor.selection.select(nodeSel[0]); } + modal.destroy(); editor.focus(); + } else { + const currentContext = button.dataset.filter; + // Filter button. + if (Contexts.indexOf(currentContext) !== -1) { + // Select current button. + const buttons = modal.getRoot()[0].querySelectorAll('.c4l-buttons-filters button'); + buttons.forEach(node => node.classList.remove('c4l-button-filter-enabled')); + button.classList.add('c4l-button-filter-enabled'); + + // Select current option in select. + const select = modal.getRoot()[0].querySelector('.c4l-select-filter'); + select.selectedIndex = Contexts.indexOf(currentContext); + + // Show/hide component buttons. + showContextButtons(modal, currentContext); + } } + } else if (select) { + const currentContext = select.value; + if (Contexts.indexOf(currentContext) !== -1) { + // Select current button. + const buttons = modal.getRoot()[0].querySelectorAll('.c4l-buttons-filters button'); + buttons.forEach(node => node.classList.remove('c4l-button-filter-enabled')); + const button = modal.getRoot()[0].querySelector('.c4l-button-filter[data-filter="' + currentContext + '"]'); + button.classList.add('c4l-button-filter-enabled'); - modal.destroy(); + // Show/hide component buttons. + showContextButtons(modal, currentContext); + } } }; @@ -136,24 +168,21 @@ const handleModalClick = (event, editor, modal) => { * @param {bool} show */ const handleModalMouseEvent = (event, modal, show) => { - const isPreview = event.target.className == 'c4l-eye-preview'; + const isPreview = event.target.classList.contains('c4l-dialog-button'); const button = event.target.closest('button'); if (isPreview && button) { const selectedButton = button.dataset.id; const node = modal.getRoot()[0].querySelector('div[data-id="code-preview-' + selectedButton + '"]'); + const previewDefault = modal.getRoot()[0].querySelector('div[data-id="code-preview-default"]'); if (node) { if (show) { - node.parentElement.classList.remove('c4l-hidden'); - node.parentElement.classList.add('c4l-visible'); - node.classList.remove('c4l-hidden'); - node.classList.add('c4l-visible'); + previewDefault.classList.toggle('c4l-hidden'); + node.classList.toggle('c4l-hidden'); } else { - node.parentElement.classList.remove('c4l-visible'); - node.parentElement.classList.add('c4l-hidden'); - node.classList.remove('c4l-visible'); - node.classList.add('c4l-hidden'); + node.classList.toggle('c4l-hidden'); + previewDefault.classList.toggle('c4l-hidden'); } } } @@ -166,15 +195,36 @@ const handleModalMouseEvent = (event, modal, show) => { * @param {object} data * @returns {object} data */ -const getTemplateContext = async (editor, data) => { +const getTemplateContext = async(editor, data) => { return Object.assign({}, { elementid: editor.id, buttons: await getButtons(editor), + filters: await getFilters(), preview: previewC4L, - textpreview: await getString('preview', component), }, data); }; +/** + * Get the C4L filters for the dialogue. + * + * @returns {object} data + */ +const getFilters = async() => { + const filters = []; + const stringValues = await getStrings(Contexts.map((key) => ({key, component}))); + + // Iterate over contexts. + Contexts.map((context, index) => { + filters.push({ + name: stringValues[index], + type: context, + filterClass: index === 0 ? 'c4l-button-filter-enabled' : '', + }); + }); + + return filters; +}; + /** * Get the C4L buttons for the dialogue. * @@ -196,17 +246,41 @@ const getButtons = async(editor) => { componentCode = componentCode.replace('{{PLACEHOLDER}}', placeholder); } + // Save contexts. + if (Contexts.indexOf(component.type) === -1) { + Contexts.push(component.type); + } + buttons.push({ id: index, name: strings.get(component.name), + type: component.type, imageClass: component.imageClass, htmlcode: componentCode, }); + + // Add class to hide button. + if (Contexts.indexOf(component.type) !== 0) { + buttons[index].imageClass += ' c4l-hidden'; + } }); return buttons; }; +/** + * Show/hide buttons depend on selected context. + * @param {object} modal + * @param {String} context + */ +const showContextButtons = (modal, context) => { + const showNodes = modal.getRoot()[0].querySelectorAll('button[data-type="' + context + '"]'); + const 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')); +}; + /** * Get language strings. * @@ -215,9 +289,7 @@ const getButtons = async(editor) => { const getAllStrings = async() => { const keys = []; - Components.map((element) => { - keys.push(element.name); - }); + Components.map(element => keys.push(element.name)); const stringValues = await getStrings(keys.map((key) => ({key, component}))); return new Map(keys.map((key, index) => ([key, stringValues[index]]))); diff --git a/editor_styles.css b/editor_styles.css index 555b8e9..93efeed 100644 --- a/editor_styles.css +++ b/editor_styles.css @@ -1,79 +1,79 @@ /* Contextual components buttons */ -.c4l-keyconcept-icon:before { +.c4l-keyconcept-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_keyconcept_icon]]); } -.c4l-tip-icon:before { +.c4l-tip-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_tip_icon]]); } -.c4l-reminder-icon:before { +.c4l-reminder-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_reminder_icon]]); } -.c4l-attention-icon:before { +.c4l-attention-icon::before { content: url([[pix:tiny_c4l|c4l_attention_icon]]); } -.c4l-quote-icon:before { +.c4l-quote-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_quote_icon]]); } -.c4l-dodontcards-icon:before { +.c4l-dodontcards-icon::before { content: url([[pix:tiny_c4l|c4l_dodontcards_icon]]); } -.c4l-readingcontext-icon:before { +.c4l-readingcontext-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_readingcontext_icon]]); } -.c4l-example-icon:before { +.c4l-example-icon::before { content: url([[pix:tiny_c4l|c4l_example_icon]]); } -.c4l-figure-icon:before { +.c4l-figure-icon::before { content: url([[pix:tiny_c4l|c4l_figure_icon]]); } -.c4l-tag-icon:before { +.c4l-tag-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_tag_icon]]); } /* Procedural components buttons */ -.c4l-estimatedtime-icon:before { +.c4l-estimatedtime-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime_icon]]); } -.c4l-duedate-icon:before { +.c4l-duedate-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_duedate_icon]]); } -.c4l-proceduralcontext-icon:before { +.c4l-proceduralcontext-icon::before { content: url([[pix:tiny_c4l|c4l_proceduralcontext_icon]]); } /* Evaluative components buttons */ -.c4l-gradingvalue-icon:before { +.c4l-gradingvalue-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue_icon]]); } -.c4l-expectedfeedback-icon:before { +.c4l-expectedfeedback-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback_icon]]); } /* Helper components buttons */ -.c4l-allpurposecard-icon:before { +.c4l-allpurposecard-icon::before { content: url([[pix:tiny_c4l|c4l_allpurposecard_icon]]); } -.c4l-inlinetag-icon:before { +.c4l-inlinetag-icon::before { content: url([[pix:tiny_c4l|c4l_inlinetag_icon]]); } @@ -84,7 +84,7 @@ .c4l-spacer { display: block; - height: 12px; + margin-top: 12px; } .c4l-inline-group { @@ -150,7 +150,7 @@ margin-bottom: 0; } -.c4l-tip:after { +.c4l-tip::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]); position: absolute; top: 6px; @@ -180,7 +180,7 @@ margin-bottom: 0; } -.c4l-reminder:after { +.c4l-reminder::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]); position: absolute; top: 6px; @@ -210,7 +210,7 @@ margin-bottom: 0; } -.c4l-attention:after { +.c4l-attention::after { content: url([[pix:tiny_c4l|c4l_attention]]); position: absolute; top: 6px; @@ -250,21 +250,21 @@ margin-bottom: 2px; } -.c4l-quote-text:before { +.c4l-quote-text::before { content: ''; position: static; top: 0; margin-right: 0; } -.c4l-quote-text:after { +.c4l-quote-text::after { content: ''; position: static; top: 0; margin-left: 0; } -.c4l-quote-text p:first-of-type:before { +.c4l-quote-text p:first-of-type::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]); position: relative; top: -4px; @@ -293,7 +293,7 @@ font-size: 14px; } -.c4l-quote-caption span:after { +.c4l-quote-caption span::after { content: ", "; } @@ -400,7 +400,7 @@ font-style: normal; } -.c4l-readingcontext .c4l-readingcontext-caption span:after { +.c4l-readingcontext .c4l-readingcontext-caption span::after { content: ", "; } @@ -460,7 +460,7 @@ margin-top: 7px; } -.c4l-figure .c4l-figure-footer:after { +.c4l-figure .c4l-figure-footer::after { content: " | "; font-weight: normal; font-style: normal; @@ -513,7 +513,7 @@ font-size: 10px; } -.c4l-estimatedtime:before { +.c4l-estimatedtime::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]); position: absolute; left: 12px; @@ -536,7 +536,7 @@ border-radius: 5px; } -.c4l-duedate:after { +.c4l-duedate::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]); position: absolute; left: 12px; @@ -581,7 +581,7 @@ font-size: 10px; } -.c4l-gradingvalue:after { +.c4l-gradingvalue::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]); position: absolute; left: 12px; @@ -611,11 +611,11 @@ margin-bottom: 0; } -.c4l-expectedfeedback:before { +.c4l-expectedfeedback::before { content: ''; } -.c4l-expectedfeedback:after { +.c4l-expectedfeedback::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]); position: absolute; bottom: 6px; diff --git a/lang/en/tiny_c4l.php b/lang/en/tiny_c4l.php index 0492945..dcf8362 100644 --- a/lang/en/tiny_c4l.php +++ b/lang/en/tiny_c4l.php @@ -29,21 +29,26 @@ $string['attention'] = 'Attention'; $string['button_c4l'] = 'C4L'; $string['c4l:viewplugin'] = 'View C4L plugin'; +$string['contextual'] = 'Contextual'; $string['dodontcards'] = 'Do/don\'t cards'; $string['duedate'] = 'Due date'; $string['enablepreview'] = 'Enable preview'; $string['enablepreview_desc'] = 'If enabled, a preview is showed when you hover the mouse cursor over each component.'; $string['estimatedtime'] = 'Estimated time'; +$string['evaluative'] = 'Evaluative'; $string['example'] = 'Example'; $string['expectedfeedback'] = 'Expected feedback'; $string['figure'] = 'Figure'; $string['gradingvalue'] = 'Grading value'; +$string['helper'] = 'Helper'; $string['inlinetag'] = 'Inline tag'; $string['keyconcept'] = 'Key concept'; $string['menuitem_c4l'] = 'Components for Learning (C4L)'; $string['pluginname'] = 'Components for Learning (C4L)'; $string['preview'] = 'Preview'; +$string['previewdefault'] = 'Place the pointer on any component to see its preview.'; $string['privacy:metadata'] = 'Components for Learning (C4L) does not store any personal data'; +$string['procedural'] = 'Procedural'; $string['proceduralcontext'] = 'Procedural context'; $string['quote'] = 'Quote'; $string['readingcontext'] = 'Reading context'; diff --git a/pix/c4l_inlinetag_icon.svg b/pix/c4l_inlinetag_icon.svg index 7b30dd1..16b49b4 100644 --- a/pix/c4l_inlinetag_icon.svg +++ b/pix/c4l_inlinetag_icon.svg @@ -1,4 +1,4 @@ - - + + diff --git a/styles.css b/styles.css index af92311..9ba78c7 100644 --- a/styles.css +++ b/styles.css @@ -1,185 +1,206 @@ /* PLUGIN UI STYLES */ -.c4l-component-code { - transition-property: all; - transition-timing-function: ease-in-out; - transition-duration: .7s; +.c4l-plugin-container { + display: block; + padding: 1rem; + background-color: #f6f7f8; + border: 1px solid #dee2e6; } -.c4l-hidden { - visibility: hidden; - opacity: 0; - max-height: 0; - padding: 0; +.c4l-buttons-filters { + display: none; } -.c4l-visible { - visibility: visible; - opacity: 1; - max-height: 500px; +.c4l-select-filters { + display: grid; + grid-template-columns: repeat(auto-fill, 90px); + grid-gap: 9px; + margin-bottom: 0; + width: 100%; + justify-content: center; + margin: 7px 0 36px; } -.c4l-dialog-button { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - flex: 0 1 100%; - min-height: 32px; +.c4l-select-filter { + grid-column: 1 / -1; background-color: #fff; - border-radius: 1px; - margin: 0 0 1% 1%; - border-width: 0; - font-weight: 600; - color: #505d78; - border: 0 solid transparent; - font-size: 13px; - box-shadow: 0 2.52644px 18.5272px rgba(0, 0, 0, .07); - transition: .15s ease-in-out; - text-align: left; + border: 1px solid #dfe2e5; + border-radius: 7px; + padding: 17px; + width: 100%; + text-transform: capitalize; } -.c4l-dialog-button:hover, -.c4l-dialog-button:active { - -webkit-transform: scale(1.02, 1.04); - -ms-transform: scale(1.02, 1.04); - transform: scale(1.02, 1.04); +.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: 0.05em; + color: #424b62; + text-transform: uppercase; } -.c4l-dialog-button::before { - margin-top: 4px; - margin-right: 18px; +.c4l-button-filter:hover, +.c4l-button-filter.c4l-button-filter-enabled { + background-color: #e7ebef; } -.c4l-dialog-button:after { - content: " "; - height: 24px; - border-left: 1px solid #e0eaf6; - position: absolute; - left: 58px; +.c4l-button-filter:first-child { + border-radius: 6px 0 0 6px; } -.c4l-plugin-container { - padding: 1rem; - background-color: #f6f7f8; - border: 1px solid #dee2e6; +.c4l-button-filter:last-child { + border-radius: 0 6px 6px 0; } -.c4l-buttons-grid { +.c4l-buttons-preview { display: flex; - flex-wrap: wrap; - justify-content: flex-start; + justify-content: space-between; + width: 100%; + max-height: 340px; +} + +.c4l-buttons-grid { + display: grid; + grid-template-columns: repeat(auto-fill, 90px); + grid-gap: 9px; margin-bottom: 0; + width: 100%; + justify-content: center; + overflow-y: auto; } -.c4l-text-preview { - display: none; +.c4l-hidden { + display: none !important; + max-height: 0; + padding: 0; } -.c4l-text-preview { - background-color: #f6f7f8; +.c4l-dialog-button { + position: relative; + display: flex; + align-items: flex-end; + justify-content: center; + height: 100px; + max-height: 100px; + width: 90px; + max-width: 90px; + padding: 0 9px 20px 9px; + font-size: 12px; + font-weight: 500; + line-height: 13px; + background-color: #fff; + border: 1px solid #e4e9ec; + color: #535d76; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08); } -.c4l-code-preview { - overflow: hidden; - transition-property: all; - transition-timing-function: ease-in-out; - transition-duration: 1s; - border-color: #dee2e6; - border-style: hidden solid solid solid; - border-width: 1px; +.c4l-dialog-button::before { + position: absolute; + top: 20px; + left: 0; + right: 0; + height: 20px; + width: 26px; + margin: 0 auto; } -.c4l-code-preview .c4l-component-code { - -webkit-transform: scale(0.7); - -ms-transform: scale(0.7); - transform: scale(0.7); +.c4l-dialog-button:hover, +.c4l-dialog-button:active { + background: #ecf3ff; + box-shadow: inset 0 0 3px rgba(22, 121, 249, 0.3); } -.c4l-dialog-button .c4l-eye-preview { +.c4l-code-preview { display: none; + overflow: hidden; + background-color: #fff; } -.c4l-dialog-button .c4l-eye-preview:hover { - -webkit-transform: scale(1.04); - -ms-transform: scale(1.04); - transform: scale(1.04); +.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; } /* Contextual components buttons */ -.c4l-keyconcept-icon:before { +.c4l-keyconcept-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_keyconcept_icon]]); } -.c4l-tip-icon:before { +.c4l-tip-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_tip_icon]]); } -.c4l-reminder-icon:before { +.c4l-reminder-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_reminder_icon]]); } -.c4l-attention-icon:before { +.c4l-attention-icon::before { content: url([[pix:tiny_c4l|c4l_attention_icon]]); } -.c4l-quote-icon:before { +.c4l-quote-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_quote_icon]]); } -.c4l-dodontcards-icon:before { +.c4l-dodontcards-icon::before { content: url([[pix:tiny_c4l|c4l_dodontcards_icon]]); } -.c4l-readingcontext-icon:before { +.c4l-readingcontext-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_readingcontext_icon]]); } -.c4l-example-icon:before { +.c4l-example-icon::before { content: url([[pix:tiny_c4l|c4l_example_icon]]); } -.c4l-figure-icon:before { +.c4l-figure-icon::before { content: url([[pix:tiny_c4l|c4l_figure_icon]]); } -.c4l-tag-icon:before { +.c4l-tag-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_tag_icon]]); } /* Procedural components buttons */ -.c4l-estimatedtime-icon:before { +.c4l-estimatedtime-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime_icon]]); } -.c4l-duedate-icon:before { +.c4l-duedate-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_duedate_icon]]); } -.c4l-proceduralcontext-icon:before { +.c4l-proceduralcontext-icon::before { content: url([[pix:tiny_c4l|c4l_proceduralcontext_icon]]); } /* Evaluative components buttons */ -.c4l-gradingvalue-icon:before { +.c4l-gradingvalue-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue_icon]]); } -.c4l-expectedfeedback-icon:before { +.c4l-expectedfeedback-icon::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback_icon]]); } /* Helper components buttons */ -.c4l-allpurposecard-icon:before { +.c4l-allpurposecard-icon::before { content: url([[pix:tiny_c4l|c4l_allpurposecard_icon]]); } -.c4l-inlinetag-icon:before { +.c4l-inlinetag-icon::before { content: url([[pix:tiny_c4l|c4l_inlinetag_icon]]); } @@ -254,7 +275,7 @@ margin-bottom: 0; } -.c4l-tip:after { +.c4l-tip::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]); position: absolute; top: 6px; @@ -283,7 +304,7 @@ margin-bottom: 0; } -.c4l-reminder:after { +.c4l-reminder::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]); position: absolute; top: 6px; @@ -312,7 +333,7 @@ margin-bottom: 0; } -.c4l-attention:after { +.c4l-attention::after { content: url([[pix:tiny_c4l|c4l_attention]]); position: absolute; top: 6px; @@ -352,21 +373,21 @@ margin-bottom: 2px; } -.c4l-quote-text:before { +.c4l-quote-text::before { content: ''; position: static; top: 0; margin-right: 0; } -.c4l-quote-text:after { +.c4l-quote-text::after { content: ''; position: static; top: 0; margin-left: 0; } -.c4l-quote-text p:first-of-type:before { +.c4l-quote-text p:first-of-type::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]); position: relative; top: -4px; @@ -395,7 +416,7 @@ font-size: 14px; } -.c4l-quote-caption span:after { +.c4l-quote-caption span::after { content: ", "; } @@ -502,7 +523,7 @@ font-style: normal; } -.c4l-readingcontext .c4l-readingcontext-caption span:after { +.c4l-readingcontext .c4l-readingcontext-caption span::after { content: ", "; } @@ -562,7 +583,7 @@ margin-top: 7px; } -.c4l-figure .c4l-figure-footer:after { +.c4l-figure .c4l-figure-footer::after { content: " | "; font-weight: normal; font-style: normal; @@ -615,7 +636,7 @@ font-size: 10px; } -.c4l-estimatedtime:before { +.c4l-estimatedtime::before { content: url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]); position: absolute; left: 12px; @@ -638,7 +659,7 @@ border-radius: 5px; } -.c4l-duedate:after { +.c4l-duedate::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]); position: absolute; left: 12px; @@ -683,7 +704,7 @@ font-size: 10px; } -.c4l-gradingvalue:after { +.c4l-gradingvalue::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]); position: absolute; left: 12px; @@ -713,11 +734,11 @@ margin-bottom: 0; } -.c4l-expectedfeedback:before { +.c4l-expectedfeedback::before { content: ''; } -.c4l-expectedfeedback:after { +.c4l-expectedfeedback::after { content: url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]); position: absolute; bottom: 6px; @@ -770,16 +791,15 @@ @media only screen and (min-width: 576px) { - .c4l-dialog-button { - flex: 0 1 49%; + .c4l-select-filters { + display: none; } - .c4l-keyconcept, - .c4l-tip, - .c4l-reminder, - .c4l-attention { - max-width: 90%; - margin: 48px auto; + .c4l-buttons-filters { + display: flex; + justify-content: center; + align-items: center; + margin: 16px 0 37px; } .c4l-spacer + .c4l-keyconcept, @@ -875,35 +895,83 @@ } } - @media only screen and (min-width: 992px) { - .c4l-modal-open.modal-open .modal { - overflow-x: hidden; - overflow-y: hidden; + .c4l-modal-no-preview.modal-open .modal-dialog { + max-width: 500px; } - .c4l-dialog-button .c4l-eye-preview { - position: absolute; - top: 5px; - right: 5px; - display: block; - background-image: url([[pix:tiny_c4l|c4l_preview_icon]]); - background-repeat: no-repeat; - height: 16px; - width: 16px; + .c4l-buttons-preview { + max-height: 310px; } - .c4l-text-preview { - display: block; - color: #444; - font-weight: bold; - padding: 5px; - border: 1px solid #dee2e6; - margin-top: 5px; + .c4l-buttons-preview.c4l-no-preview { + justify-content: center; + max-height: 320px; + } + + .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 { + grid-gap: 0; + justify-content: flex-start; + width: 375px; } .c4l-dialog-button { - flex: 0 1 32%; + box-shadow: none; + } + + .c4l-buttons-preview.c4l-no-preview .c4l-dialog-button { + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08); + } + + .c4l-code-preview { + position: relative; + display: flex; + flex-direction: column; + height: 300px; + width: 345px; + 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: 0.06em; + color: #fff; + background-color: #535D76; + border-radius: 6px; + padding: 5px; + text-transform: uppercase; } } diff --git a/templates/modal.mustache b/templates/modal.mustache index 9743c52..64e37fe 100644 --- a/templates/modal.mustache +++ b/templates/modal.mustache @@ -30,12 +30,18 @@ Example context (json): { "elementid": "exampleId", + "filters" : [ + {"name": "Contextual"}, + {"type": "contextual"}, + {"filterClass": ""} + ], "buttons": [ {"id": "randomid"}, {"imageClass": "c4l-classname"}, {"name": "component name"}, {"htmlcode": "
Text
"} - ] + ], + "preview": "true" } }} {{< core/modal }} @@ -44,24 +50,40 @@ {{/title}} {{$body}}
-
- {{#buttons}} - - {{/buttons}} + {{/filters}}
-
- {{#preview}} -
{{textpreview}}
-
- {{#buttons}} - - {{/buttons}} +
+
+ {{#buttons}} + + {{/buttons}} +
+ {{#preview}} +
+
{{#str}} preview, tiny_c4l {{/str}}
+
+
{{#str}} previewdefault, tiny_c4l {{/str}}
+
+ {{#buttons}} + + {{/buttons}} +
+ {{/preview}}
- {{/preview}} +
{{/body}} {{/ core/modal }} diff --git a/version.php b/version.php index 21f05c0..87391d4 100644 --- a/version.php +++ b/version.php @@ -25,7 +25,7 @@ defined('MOODLE_INTERNAL') || die(); $plugin->component = 'tiny_c4l'; -$plugin->release = '1.0.0'; +$plugin->release = '1.1.0'; $plugin->requires = 2022112800; $plugin->maturity = MATURITY_STABLE; -$plugin->version = 2022112200; +$plugin->version = 2023012900;