AutorÃa | Ultima modificación | Ver Log |
{"version":3,"file":"dragdrop.min.js","sources":["../src/dragdrop.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 <http://www.gnu.org/licenses/>.\n\n\n/**\n * @author Andreas Grabs <moodle@grabs-edv.de>\n * @copyright 2024 Andreas Grabs\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport log from 'core/log';\nimport config from 'core/config';\n\nlet _formid;\nlet _type;\nlet _useDragdrop;\nlet _contextid;\n\n/**\n * Find the items in our mform we want to be draggable\n *\n * @param {string} formid The id of the mform the draggable items are related toHtml\n * @returns {array}\n */\nconst getDraggableItems = (formid) => {\n let fieldsets = document.querySelectorAll('#' + formid + ' fieldset');\n const items = [];\n fieldsets.forEach(fieldset => {\n if (fieldset.id.startsWith('id_singleelementheader_')) {\n items.push(fieldset);\n }\n });\n return items;\n};\n\n/**\n * Initialize a draggable item to be ready for drag and drop\n *\n * @param {Element} item The draggable item\n * @param {Integer} index The index of the draggable item\n */\nconst initDragElement = (item, index) => {\n // Add the class \"dragging\" a little later to get the dragging image visible.\n if (_useDragdrop) {\n item.classList.add('draggable');\n }\n item.dataset.index = index;\n};\n\n/**\n * Set the new sortorder values dependig on the current list order.\n */\nconst resortList = () => {\n // Set the new sortorder;\n let i = 0;\n log.debug('Changed sortorder');\n document.querySelectorAll('#' + _formid + ' fieldset.draggable').forEach(sortitem => {\n let elementindex = sortitem.dataset.index;\n log.debug('Set sortorder in element: ' + 'unilabeltype_' + _type + '_sortorder[' + elementindex + ']');\n let hiddenelement = document.forms[_formid].elements['unilabeltype_' + _type + '_sortorder[' + elementindex + ']'];\n let oldvalue = hiddenelement.value;\n hiddenelement.value = i + 1;\n log.debug('Element: ' + elementindex + ' - old value: ' + oldvalue + ', new value: ' + hiddenelement.value);\n i++;\n });\n};\n\n/**\n * Export our init method.\n *\n * @param {string} type The type of unilabeltype e.g.: grid\n * @param {string} formid The id of the mform the draggable elements are related to\n * @param {boolean} useDragdrop If false or not set drag drop is deactivated.\n */\nexport const init = async(type, formid, useDragdrop) => {\n _type = type;\n _formid = formid;\n _useDragdrop = useDragdrop;\n\n // Initialize drag and drop.\n const items = getDraggableItems(formid);\n let index = 0;\n items.forEach(item => {\n initDragElement(item, index);\n index++;\n });\n\n // Add event listener for new items.\n document.querySelector('#' + formid).addEventListener('itemadded', (e) => {\n log.debug('New element created with index: ' + e.detail);\n var newitem = document.querySelector('#id_singleelementheader_' + e.detail);\n initDragElement(newitem, e.detail);\n if (_useDragdrop) {\n resortList();\n }\n });\n // Add event listener if item is removed.\n document.querySelector('#' + formid).addEventListener('itemremoved', (e) => {\n log.debug('Element has been deleted: ' + e.detail);\n if (_useDragdrop) {\n resortList();\n }\n });\n\n //Import Sortable from 'js/Sortable.js';\n const Sortable = await import(config.wwwroot + '/mod/unilabel/js/Sortable.min.js');\n _contextid = config.contextid;\n const mysortablelist = document.querySelector('#' + formid);\n var sortable = Sortable.create(\n mysortablelist,\n {\n draggable: '.draggable',\n handle: '.draghandle',\n animation: 150,\n swapThreshold: 0.5,\n onEnd: async(e) => {\n log.debug(e.item);\n if (globalThis.tinymce !== undefined) {\n var fieldsetselector = '#' + e.item.id;\n log.debug(fieldsetselector);\n var repeatindex = parseInt(document.querySelector(fieldsetselector).dataset.index);\n let tinyeditor = await import('editor_tiny/editor');\n let tinyconfig = await import('mod_unilabel/tinyconfig');\n let editor = globalThis.tinymce;\n editor.remove('#' + e.item.id + ' textarea');\n document.querySelectorAll('#id_singleelementheader_' + repeatindex + ' [data-fieldtype=\"editor\"]').forEach(\n async(editorcontainer) => {\n let target = editorcontainer.querySelector('textarea');\n let targetid = target.getAttribute('id');\n let targetname = target.getAttribute('name');\n // Find the current draftitemid;\n let draftitemidselector = targetname.replace('[text]', '[itemid]');\n let draftitemid = document.forms[_formid][draftitemidselector].value;\n let config = await tinyconfig.getTinyConfig(_contextid, targetid, targetname, draftitemid, repeatindex);\n await tinyeditor.setupForTarget(target, config);\n }\n );\n }\n resortList();\nreturn true;\n }\n }\n );\n log.debug('Initialized sortable list');\n return sortable;\n\n};\n"],"names":["_formid","_type","_useDragdrop","_contextid","initDragElement","item","index","classList","add","dataset","resortList","i","debug","document","querySelectorAll","forEach","sortitem","elementindex","hiddenelement","forms","elements","oldvalue","value","async","type","formid","useDragdrop","items","fieldsets","fieldset","id","startsWith","push","getDraggableItems","querySelector","addEventListener","e","detail","newitem","Sortable","config","wwwroot","contextid","mysortablelist","sortable","create","draggable","handle","animation","swapThreshold","onEnd","undefined","globalThis","tinymce","fieldsetselector","repeatindex","parseInt","tinyeditor","tinyconfig","remove","target","editorcontainer","targetid","getAttribute","targetname","draftitemidselector","replace","draftitemid","getTinyConfig","setupForTarget"],"mappings":"oeAyBIA,QACAC,MACAC,aACAC,iBAyBEC,gBAAkB,CAACC,KAAMC,SAEvBJ,cACAG,KAAKE,UAAUC,IAAI,aAEvBH,KAAKI,QAAQH,MAAQA,OAMnBI,WAAa,SAEXC,EAAI,eACJC,MAAM,qBACVC,SAASC,iBAAiB,IAAMd,QAAU,uBAAuBe,SAAQC,eACjEC,aAAeD,SAASP,QAAQH,mBAChCM,MAAM,0CAAiDX,MAAQ,cAAgBgB,aAAe,SAC9FC,cAAgBL,SAASM,MAAMnB,SAASoB,SAAS,gBAAkBnB,MAAQ,cAAgBgB,aAAe,KAC1GI,SAAWH,cAAcI,MAC7BJ,cAAcI,MAAQX,EAAI,eACtBC,MAAM,YAAcK,aAAe,iBAAmBI,SAAW,gBAAkBH,cAAcI,OACrGX,sBAWYY,MAAMC,KAAMC,OAAQC,eACpCzB,MAAQuB,KACRxB,QAAUyB,OACVvB,aAAewB,kBAGTC,MAxDiBF,CAAAA,aACnBG,UAAYf,SAASC,iBAAiB,IAAMW,OAAS,mBACnDE,MAAQ,UACdC,UAAUb,SAAQc,WACVA,SAASC,GAAGC,WAAW,4BACvBJ,MAAMK,KAAKH,aAGZF,OAgDOM,CAAkBR,YAC5BnB,MAAQ,EACZqB,MAAMZ,SAAQV,OACVD,gBAAgBC,KAAMC,OACtBA,WAIJO,SAASqB,cAAc,IAAMT,QAAQU,iBAAiB,aAAcC,iBAC5DxB,MAAM,mCAAqCwB,EAAEC,YAC7CC,QAAUzB,SAASqB,cAAc,2BAA6BE,EAAEC,QACpEjC,gBAAgBkC,QAASF,EAAEC,QACvBnC,cACAQ,gBAIRG,SAASqB,cAAc,IAAMT,QAAQU,iBAAiB,eAAgBC,iBAC9DxB,MAAM,6BAA+BwB,EAAEC,QACvCnC,cACAQ,sBAKF6B,+NAAwBC,gBAAOC,QAAU,8TAAjBD,gBAAOC,QAAU,8FAAjBD,gBAAOC,QAAU,sCAC/CtC,WAAaqC,gBAAOE,gBACdC,eAAiB9B,SAASqB,cAAc,IAAMT,YAChDmB,SAAWL,SAASM,OACpBF,eACA,CACIG,UAAW,aACXC,OAAQ,cACRC,UAAW,IACXC,cAAe,GACfC,MAAO3B,MAAAA,oBACCX,MAAMwB,EAAE/B,WACe8C,IAAvBC,WAAWC,QAAuB,KAC9BC,iBAAmB,IAAMlB,EAAE/B,KAAKyB,gBAChClB,MAAM0C,sBACNC,YAAcC,SAAS3C,SAASqB,cAAcoB,kBAAkB7C,QAAQH,WACxEmD,ynBACAC,woBACSN,WAAWC,QACjBM,OAAO,IAAMvB,EAAE/B,KAAKyB,GAAK,aAChCjB,SAASC,iBAAiB,2BAA6ByC,YAAc,8BAA8BxC,SAC/FQ,MAAAA,sBACQqC,OAASC,gBAAgB3B,cAAc,YACvC4B,SAAWF,OAAOG,aAAa,MAC/BC,WAAaJ,OAAOG,aAAa,QAEjCE,oBAAsBD,WAAWE,QAAQ,SAAU,YACnDC,YAActD,SAASM,MAAMnB,SAASiE,qBAAqB3C,MAC3DkB,aAAekB,WAAWU,cAAcjE,WAAY2D,SAAUE,WAAYG,YAAaZ,mBACrFE,WAAWY,eAAeT,OAAQpB,kBAIpD9B,cACO,yBAIfE,MAAM,6BACHgC"}