| 1 |
efrain |
1 |
{"version":3,"file":"month_navigation_drag_drop.min.js","sources":["../src/month_navigation_drag_drop.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 * A javascript module to handle calendar drag and drop in the calendar\n * month view navigation.\n *\n * This code is run each time the calendar month view is re-rendered. We\n * only register the event handlers once per page load so that the in place\n * DOM updates that happen on month change don't continue to register handlers.\n *\n * @module core_calendar/month_navigation_drag_drop\n * @copyright 2017 Ryan Wyllie <ryan@moodle.com>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine([\n 'jquery',\n 'core_calendar/drag_drop_data_store',\n ],\n function(\n $,\n DataStore\n ) {\n\n var SELECTORS = {\n DRAGGABLE: '[draggable=\"true\"][data-region=\"event-item\"]',\n DROP_ZONE: '[data-drop-zone=\"nav-link\"]',\n };\n var HOVER_CLASS = 'bg-primary text-white';\n var TARGET_CLASS = 'drop-target';\n var HOVER_TIME = 1000; // 1 second hover to change month.\n\n // We store some static variables at the module level because this\n // module is called each time the calendar month view is reloaded but\n // we want some actions to only occur ones.\n\n /* @var {bool} registered If the event listeners have been added */\n var registered = false;\n /* @var {int} hoverTimer The timeout id of any timeout waiting for hover */\n var hoverTimer = null;\n /* @var {object} root The root nav element we're operating on */\n var root = null;\n\n /**\n * Add or remove the appropriate styling to indicate whether\n * the drop target is being hovered over.\n *\n * @param {object} target The target drop zone element\n * @param {bool} hovered If the element is hovered over ot not\n */\n var updateHoverState = function(target, hovered) {\n if (hovered) {\n target.addClass(HOVER_CLASS);\n } else {\n target.removeClass(HOVER_CLASS);\n }\n };\n\n /**\n * Add some styling to the UI to indicate that the nav links\n * are an acceptable drop target.\n */\n var addDropZoneIndicator = function() {\n root.find(SELECTORS.DROP_ZONE).addClass(TARGET_CLASS);\n };\n\n /**\n * Remove the styling from the nav links.\n */\n var removeDropZoneIndicator = function() {\n root.find(SELECTORS.DROP_ZONE).removeClass(TARGET_CLASS);\n };\n\n /**\n * Get the drop zone target from the event, if one is found.\n *\n * @param {event} e Javascript event\n * @return {object|null}\n */\n var getTargetFromEvent = function(e) {\n var target = $(e.target).closest(SELECTORS.DROP_ZONE);\n return (target.length) ? target : null;\n };\n\n /**\n * This will add a visual indicator to the calendar UI to\n * indicate which nav link is a valid drop zone.\n *\n * @param {Event} e\n */\n var dragstartHandler = function(e) {\n // Make sure the drag event is for a calendar event.\n var eventElement = $(e.target).closest(SELECTORS.DRAGGABLE);\n\n if (eventElement.length) {\n addDropZoneIndicator();\n }\n };\n\n /**\n * Update the hover state of the target nav element when\n * the user is dragging an event over it.\n *\n * This will add a visual indicator to the calendar UI to\n * indicate which nav link is being hovered.\n *\n * @param {event} e The dragover event\n */\n var dragoverHandler = function(e) {\n // Ignore dragging of non calendar events.\n if (!DataStore.hasEventId()) {\n return;\n }\n\n e.preventDefault();\n var target = getTargetFromEvent(e);\n\n if (!target) {\n return;\n }\n\n // If we're not draggin a calendar event then\n // ignore it.\n if (!DataStore.hasEventId()) {\n return;\n }\n\n if (!hoverTimer) {\n hoverTimer = setTimeout(function() {\n target.click();\n hoverTimer = null;\n }, HOVER_TIME);\n }\n\n updateHoverState(target, true);\n removeDropZoneIndicator();\n };\n\n /**\n * Update the hover state of the target nav element that was\n * previously dragged over but has is no longer a drag target.\n *\n * This will remove the visual indicator from the calendar UI\n * that was added by the dragoverHandler.\n *\n * @param {event} e The dragstart event\n */\n var dragleaveHandler = function(e) {\n // Ignore dragging of non calendar events.\n if (!DataStore.hasEventId()) {\n return;\n }\n\n var target = getTargetFromEvent(e);\n\n if (!target) {\n return;\n }\n\n if (hoverTimer) {\n clearTimeout(hoverTimer);\n hoverTimer = null;\n }\n\n updateHoverState(target, false);\n addDropZoneIndicator();\n e.preventDefault();\n };\n\n /**\n * Remove the visual indicator from the calendar UI that was\n * added by the dragoverHandler.\n *\n * @param {event} e The drop event\n */\n var dropHandler = function(e) {\n // Ignore dragging of non calendar events.\n if (!DataStore.hasEventId()) {\n return;\n }\n\n removeDropZoneIndicator();\n var target = getTargetFromEvent(e);\n\n if (!target) {\n return;\n }\n\n updateHoverState(target, false);\n e.preventDefault();\n };\n\n return {\n /**\n * Initialise the event handlers for the drag events.\n *\n * @param {object} rootElement The element containing calendar nav links\n */\n init: function(rootElement) {\n // Only register the handlers once on the first load.\n if (!registered) {\n // These handlers are only added the first time the module\n // is loaded because we don't want to have a new listener\n // added each time the \"init\" function is called otherwise we'll\n // end up with lots of stale handlers.\n document.addEventListener('dragstart', dragstartHandler, false);\n document.addEventListener('dragover', dragoverHandler, false);\n document.addEventListener('dragleave', dragleaveHandler, false);\n document.addEventListener('drop', dropHandler, false);\n document.addEventListener('dragend', removeDropZoneIndicator, false);\n registered = true;\n }\n\n // Update the module variable to operate on the given\n // root element.\n root = $(rootElement);\n\n // If we're currently dragging then add the indicators.\n if (DataStore.hasEventId()) {\n addDropZoneIndicator();\n }\n },\n };\n});\n"],"names":["define","$","DataStore","SELECTORS","registered","hoverTimer","root","updateHoverState","target","hovered","addClass","removeClass","addDropZoneIndicator","find","removeDropZoneIndicator","getTargetFromEvent","e","closest","length","dragstartHandler","dragoverHandler","hasEventId","preventDefault","setTimeout","click","dragleaveHandler","clearTimeout","dropHandler","init","rootElement","document","addEventListener"],"mappings":";;;;;;;;;;;;AA2BAA,kDAAO,CACK,SACA,uCAEJ,SACIC,EACAC,eAGJC,oBACW,+CADXA,oBAEW,8BAWXC,YAAa,EAEbC,WAAa,KAEbC,KAAO,KASPC,iBAAmB,SAASC,OAAQC,SAChCA,QACAD,OAAOE,SAxBG,yBA0BVF,OAAOG,YA1BG,0BAkCdC,qBAAuB,WACvBN,KAAKO,KAAKV,qBAAqBO,SAlChB,gBAwCfI,wBAA0B,WAC1BR,KAAKO,KAAKV,qBAAqBQ,YAzChB,gBAkDfI,mBAAqB,SAASC,OAC1BR,OAASP,EAAEe,EAAER,QAAQS,QAAQd,4BACzBK,OAAOU,OAAUV,OAAS,MASlCW,iBAAmB,SAASH,GAETf,EAAEe,EAAER,QAAQS,QAAQd,qBAEtBe,QACbN,wBAaJQ,gBAAkB,SAASJ,MAEtBd,UAAUmB,cAIfL,EAAEM,qBACEd,OAASO,mBAAmBC,GAE3BR,QAMAN,UAAUmB,eAIVhB,aACDA,WAAakB,YAAW,WACpBf,OAAOgB,QACPnB,WAAa,OApGR,MAwGbE,iBAAiBC,QAAQ,GACzBM,6BAYAW,iBAAmB,SAAST,MAEvBd,UAAUmB,kBAIXb,OAASO,mBAAmBC,GAE3BR,SAIDH,aACAqB,aAAarB,YACbA,WAAa,MAGjBE,iBAAiBC,QAAQ,GACzBI,uBACAI,EAAEM,oBASFK,YAAc,SAASX,MAElBd,UAAUmB,cAIfP,8BACIN,OAASO,mBAAmBC,GAE3BR,SAILD,iBAAiBC,QAAQ,GACzBQ,EAAEM,0BAGC,CAMHM,KAAM,SAASC,aAENzB,aAKD0B,SAASC,iBAAiB,YAAaZ,kBAAkB,GACzDW,SAASC,iBAAiB,WAAYX,iBAAiB,GACvDU,SAASC,iBAAiB,YAAaN,kBAAkB,GACzDK,SAASC,iBAAiB,OAAQJ,aAAa,GAC/CG,SAASC,iBAAiB,UAAWjB,yBAAyB,GAC9DV,YAAa,GAKjBE,KAAOL,EAAE4B,aAGL3B,UAAUmB,cACVT"}
|