diff --git a/theme/boost/amd/build/drawers.min.js b/theme/boost/amd/build/drawers.min.js index 544cb725350..2bdb9344b33 100644 --- a/theme/boost/amd/build/drawers.min.js +++ b/theme/boost/amd/build/drawers.min.js @@ -1,3 +1,3 @@ -define("theme_boost/drawers",["exports","core/modal_backdrop","core/templates","core/aria","core/event_dispatcher","core/utils","core/pagehelpers","core/pending","jquery"],(function(_exports,_modal_backdrop,_templates,Aria,_event_dispatcher,_utils,_pagehelpers,_pending,_jquery){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_modal_backdrop=_interopRequireDefault(_modal_backdrop),_templates=_interopRequireDefault(_templates),Aria=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(Aria),_pending=_interopRequireDefault(_pending),_jquery=_interopRequireDefault(_jquery);let backdropPromise=null;const drawerMap=new Map,SELECTORS_BUTTONS='[data-toggler="drawers"]',SELECTORS_CLOSEBTN='[data-toggler="drawers"][data-action="closedrawer"]',SELECTORS_OPENBTN='[data-toggler="drawers"][data-action="opendrawer"]',SELECTORS_TOGGLEBTN='[data-toggler="drawers"][data-action="toggle"]',SELECTORS_DRAWERS='[data-region="fixed-drawer"]',SELECTORS_CONTAINER="#page.drawers",SELECTORS_DRAWERCONTENT=".drawercontent",CLASSES_SCROLLED="scrolled",CLASSES_SHOW="show",CLASSES_NOTINITIALISED="not-initialized",CLASSES_TOGGLERIGHT=".drawer-right-toggle",getBackdrop=()=>(backdropPromise||(backdropPromise=_templates.default.render("core/modal_backdrop",{}).then((html=>new _modal_backdrop.default(html))).then((modalBackdrop=>(modalBackdrop.getAttachmentPoint().get(0).addEventListener("click",(e=>{e.preventDefault(),Drawers.closeAllDrawers()})),modalBackdrop))).catch()),backdropPromise),getDrawerOpenButton=drawerId=>{let openButton=document.querySelector("".concat(SELECTORS_OPENBTN,'[data-target="').concat(drawerId,'"]'));return openButton||(openButton=document.querySelector("".concat(SELECTORS_TOGGLEBTN,'[data-target="').concat(drawerId,'"]'))),openButton},disableDrawerTooltips=drawerNode=>{[drawerNode.querySelector(SELECTORS_CLOSEBTN),getDrawerOpenButton(drawerNode.id)].forEach((button=>{button&&disableButtonTooltip(button)}))},disableButtonTooltip=(button,enableOnBlur)=>{button.hasAttribute("data-original-title")?((0,_jquery.default)(button).tooltip("disable"),button.setAttribute("title",button.dataset.originalTitle)):(button.dataset.disabledToggle=button.dataset.toggle,button.removeAttribute("data-toggle")),enableOnBlur&&(button.dataset.restoreTooltipOnBlur=!0)},enableButtonTooltip=button=>{button.hasAttribute("data-original-title")?((0,_jquery.default)(button).tooltip("enable"),button.removeAttribute("title")):button.dataset.disabledToggle&&(button.dataset.toggle=button.dataset.disabledToggle,(0,_jquery.default)(button).tooltip()),delete button.dataset.restoreTooltipOnBlur};class Drawers{constructor(drawerNode){_defineProperty(this,"drawerNode",null),void 0===drawerNode.dataset.behatFakeDrawer&&(this.drawerNode=drawerNode,(0,_pagehelpers.isSmall)()&&this.closeDrawer({focusOnOpenButton:!1,updatePreferences:!1}),this.drawerNode.classList.contains(CLASSES_SHOW)?this.openDrawer({focusOnCloseButton:!1}):1==this.drawerNode.dataset.forceopen?(0,_pagehelpers.isSmall)()||this.openDrawer({focusOnCloseButton:!1}):Aria.hide(this.drawerNode),(0,_pagehelpers.isSmall)()&&disableDrawerTooltips(this.drawerNode),(drawerNode=>{const content=drawerNode.querySelector(SELECTORS_DRAWERCONTENT);content&&content.addEventListener("scroll",(()=>{drawerNode.classList.toggle(CLASSES_SCROLLED,0!=content.scrollTop)}))})(this.drawerNode),drawerMap.set(drawerNode,this),drawerNode.classList.remove(CLASSES_NOTINITIALISED))}get isOpen(){return this.drawerNode.classList.contains(CLASSES_SHOW)}get closeOnResize(){return!!parseInt(this.drawerNode.dataset.closeOnResize)}static getDrawerInstanceForNode(drawerNode){return drawerMap.has(drawerNode)||new Drawers(drawerNode),drawerMap.get(drawerNode)}dispatchEvent(eventname){let cancelable=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return(0,_event_dispatcher.dispatchEvent)(eventname,{drawerInstance:this},this.drawerNode,{cancelable:cancelable})}openDrawer(){var _this$drawerNode$quer;let{focusOnCloseButton:focusOnCloseButton=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const pendingPromise=new _pending.default("theme_boost/drawers:open");if(this.dispatchEvent(Drawers.eventTypes.drawerShow,!0).defaultPrevented)return;null===(_this$drawerNode$quer=this.drawerNode.querySelector(SELECTORS_CLOSEBTN))||void 0===_this$drawerNode$quer||_this$drawerNode$quer.classList.toggle("hidden",!0);let openButton=getDrawerOpenButton(this.drawerNode.id);var _jQuery;openButton&&openButton.hasAttribute("data-original-title")&&(null===(_jQuery=(0,_jquery.default)(openButton))||void 0===_jQuery||_jQuery.tooltip("hide"));Aria.unhide(this.drawerNode),this.drawerNode.classList.add(CLASSES_SHOW);const preference=this.drawerNode.dataset.preference;preference&&!(0,_pagehelpers.isSmall)()&&1!=this.drawerNode.dataset.forceopen&&M.util.set_user_preference(preference,!0);const state=this.drawerNode.dataset.state;if(state){document.getElementById("page").classList.add(state)}(0,_pagehelpers.isSmall)()&&getBackdrop().then((backdrop=>{backdrop.show();return document.getElementById("page").style.overflow="hidden",backdrop})).catch();const closeButton=this.drawerNode.querySelector(SELECTORS_CLOSEBTN);focusOnCloseButton&&closeButton&&disableButtonTooltip(closeButton,!0),setTimeout((()=>{closeButton.classList.toggle("hidden",!1),focusOnCloseButton&&closeButton.focus(),pendingPromise.resolve()}),300),this.dispatchEvent(Drawers.eventTypes.drawerShown)}closeDrawer(){let{focusOnOpenButton:focusOnOpenButton=!0,updatePreferences:updatePreferences=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const pendingPromise=new _pending.default("theme_boost/drawers:close");if(this.dispatchEvent(Drawers.eventTypes.drawerHide,!0).defaultPrevented)return;const closeButton=this.drawerNode.querySelector(SELECTORS_CLOSEBTN);var _jQuery2;(null==closeButton||closeButton.classList.toggle("hidden",!0),closeButton.hasAttribute("data-original-title"))&&(null===(_jQuery2=(0,_jquery.default)(closeButton))||void 0===_jQuery2||_jQuery2.tooltip("hide"));const preference=this.drawerNode.dataset.preference;preference&&updatePreferences&&!(0,_pagehelpers.isSmall)()&&M.util.set_user_preference(preference,!1);const state=this.drawerNode.dataset.state;if(state){document.getElementById("page").classList.remove(state)}Aria.hide(this.drawerNode),this.drawerNode.classList.remove(CLASSES_SHOW),getBackdrop().then((backdrop=>{if(backdrop.hide(),(0,_pagehelpers.isSmall)()){document.getElementById("page").style.overflow="visible"}return backdrop})).catch();let openButton=getDrawerOpenButton(this.drawerNode.id);openButton&&disableButtonTooltip(openButton,!0),setTimeout((()=>{openButton&&focusOnOpenButton&&openButton.focus(),pendingPromise.resolve()}),300),this.dispatchEvent(Drawers.eventTypes.drawerHidden)}toggleVisibility(){this.drawerNode.classList.contains(CLASSES_SHOW)?this.closeDrawer():this.openDrawer()}static closeAllDrawers(){drawerMap.forEach((drawerInstance=>{drawerInstance.closeDrawer()}))}static closeOtherDrawers(comparisonInstance){drawerMap.forEach((drawerInstance=>{drawerInstance!==comparisonInstance&&drawerInstance.closeDrawer()}))}}_exports.default=Drawers,_defineProperty(Drawers,"eventTypes",{drawerShow:"theme_boost/drawers:show",drawerShown:"theme_boost/drawers:shown",drawerHide:"theme_boost/drawers:hide",drawerHidden:"theme_boost/drawers:hidden"});const scrollbarVisible=htmlNode=>htmlNode.scrollHeight>htmlNode.clientHeight,setLastUsedToggle=toggleButton=>{toggleButton.dataset.target&&(document.querySelectorAll("".concat(SELECTORS_BUTTONS,'[data-target="').concat(toggleButton.dataset.target,'"]')).forEach((btn=>{btn.dataset.lastused=!1})),toggleButton.dataset.lastused=!0)};(()=>{const body=document.querySelector("body"),drawerLayout=document.querySelector(SELECTORS_CONTAINER);if(drawerLayout){const drawerRight=document.querySelector(SELECTORS_CONTAINER+" "+CLASSES_TOGGLERIGHT);!scrollbarVisible(drawerLayout)&&drawerRight&&(drawerRight.style.marginRight="0"),drawerLayout.addEventListener("scroll",(()=>{drawerLayout.scrollTop>=window.innerHeight?body.classList.add(CLASSES_SCROLLED):body.classList.remove(CLASSES_SCROLLED)}))}})(),(()=>{document.addEventListener("click",(e=>{const toggleButton=e.target.closest(SELECTORS_TOGGLEBTN);if(toggleButton&&toggleButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(toggleButton.dataset.target),drawerInstance=Drawers.getDrawerInstanceForNode(targetDrawer);setLastUsedToggle(toggleButton),drawerInstance.toggleVisibility()}const openDrawerButton=e.target.closest(SELECTORS_OPENBTN);if(openDrawerButton&&openDrawerButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(openDrawerButton.dataset.target),drawerInstance=Drawers.getDrawerInstanceForNode(targetDrawer);setLastUsedToggle(toggleButton),drawerInstance.openDrawer()}const closeDrawerButton=e.target.closest(SELECTORS_CLOSEBTN);if(closeDrawerButton&&closeDrawerButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(closeDrawerButton.dataset.target);Drawers.getDrawerInstanceForNode(targetDrawer).closeDrawer(),(target=>{const lastUsedButton=document.querySelector("".concat(SELECTORS_BUTTONS,'[data-target="').concat(target,'"][data-lastused="true"'));lastUsedButton&&lastUsedButton.focus()})(closeDrawerButton.dataset.target)}})),document.addEventListener(Drawers.eventTypes.drawerShow,(e=>{(0,_pagehelpers.isLarge)()||Drawers.closeOtherDrawers(e.detail.drawerInstance)}));const btnSelector="".concat(SELECTORS_TOGGLEBTN,", ").concat(SELECTORS_OPENBTN,", ").concat(SELECTORS_CLOSEBTN);document.addEventListener("focusout",(e=>{const button=e.target.closest(btnSelector);void 0!==(null==button?void 0:button.dataset.restoreTooltipOnBlur)&&enableButtonTooltip(button)}));window.addEventListener("resize",(0,_utils.debounce)((()=>{if((0,_pagehelpers.isSmall)()){let anyOpen=!1;drawerMap.forEach((drawerInstance=>{disableDrawerTooltips(drawerInstance.drawerNode),drawerInstance.isOpen&&(drawerInstance.closeOnResize?drawerInstance.closeDrawer():anyOpen=!0)})),anyOpen&&getBackdrop().then((backdrop=>backdrop.show())).catch()}else drawerMap.forEach((drawerInstance=>{var drawerNode;[(drawerNode=drawerInstance.drawerNode).querySelector(SELECTORS_CLOSEBTN),getDrawerOpenButton(drawerNode.id)].forEach((button=>{button&&enableButtonTooltip(button)}))})),getBackdrop().then((backdrop=>backdrop.hide())).catch()}),400))})();return document.querySelectorAll(SELECTORS_DRAWERS).forEach((drawerNode=>Drawers.getDrawerInstanceForNode(drawerNode))),_exports.default})); +define("theme_boost/drawers",["exports","core/modal_backdrop","core/templates","core/aria","core/event_dispatcher","core/utils","core/pagehelpers","core/pending","jquery"],(function(_exports,_modal_backdrop,_templates,Aria,_event_dispatcher,_utils,_pagehelpers,_pending,_jquery){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_modal_backdrop=_interopRequireDefault(_modal_backdrop),_templates=_interopRequireDefault(_templates),Aria=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(Aria),_pending=_interopRequireDefault(_pending),_jquery=_interopRequireDefault(_jquery);let backdropPromise=null;const drawerMap=new Map,SELECTORS_BUTTONS='[data-toggler="drawers"]',SELECTORS_CLOSEBTN='[data-toggler="drawers"][data-action="closedrawer"]',SELECTORS_OPENBTN='[data-toggler="drawers"][data-action="opendrawer"]',SELECTORS_TOGGLEBTN='[data-toggler="drawers"][data-action="toggle"]',SELECTORS_DRAWERS='[data-region="fixed-drawer"]',SELECTORS_DRAWERCONTENT=".drawercontent",SELECTORS_PAGECONTENT="#page-content",CLASSES_SCROLLED="scrolled",CLASSES_SHOW="show",CLASSES_NOTINITIALISED="not-initialized",getDrawerZIndex=()=>{const drawer=document.querySelector(SELECTORS_DRAWERS);return drawer?parseInt(window.getComputedStyle(drawer).zIndex,10):null},getBackdrop=()=>(backdropPromise||(backdropPromise=_templates.default.render("core/modal_backdrop",{}).then((html=>new _modal_backdrop.default(html))).then((modalBackdrop=>(getDrawerZIndex()&&modalBackdrop.setZIndex(getDrawerZIndex()-1),modalBackdrop.getAttachmentPoint().get(0).addEventListener("click",(e=>{e.preventDefault(),Drawers.closeAllDrawers()})),modalBackdrop))).catch()),backdropPromise),getDrawerOpenButton=drawerId=>{let openButton=document.querySelector("".concat(SELECTORS_OPENBTN,'[data-target="').concat(drawerId,'"]'));return openButton||(openButton=document.querySelector("".concat(SELECTORS_TOGGLEBTN,'[data-target="').concat(drawerId,'"]'))),openButton},disableDrawerTooltips=drawerNode=>{[drawerNode.querySelector(SELECTORS_CLOSEBTN),getDrawerOpenButton(drawerNode.id)].forEach((button=>{button&&disableButtonTooltip(button)}))},disableButtonTooltip=(button,enableOnBlur)=>{button.hasAttribute("data-original-title")?((0,_jquery.default)(button).tooltip("disable"),button.setAttribute("title",button.dataset.originalTitle)):(button.dataset.disabledToggle=button.dataset.toggle,button.removeAttribute("data-toggle")),enableOnBlur&&(button.dataset.restoreTooltipOnBlur=!0)},enableButtonTooltip=button=>{button.hasAttribute("data-original-title")?((0,_jquery.default)(button).tooltip("enable"),button.removeAttribute("title")):button.dataset.disabledToggle&&(button.dataset.toggle=button.dataset.disabledToggle,(0,_jquery.default)(button).tooltip()),delete button.dataset.restoreTooltipOnBlur};class Drawers{constructor(drawerNode){_defineProperty(this,"drawerNode",null),_defineProperty(this,"boundingRect",null),void 0===drawerNode.dataset.behatFakeDrawer&&(this.drawerNode=drawerNode,(0,_pagehelpers.isSmall)()&&this.closeDrawer({focusOnOpenButton:!1,updatePreferences:!1}),this.drawerNode.classList.contains(CLASSES_SHOW)?this.openDrawer({focusOnCloseButton:!1}):1==this.drawerNode.dataset.forceopen?(0,_pagehelpers.isSmall)()||this.openDrawer({focusOnCloseButton:!1}):Aria.hide(this.drawerNode),(0,_pagehelpers.isSmall)()&&disableDrawerTooltips(this.drawerNode),(drawerNode=>{const content=drawerNode.querySelector(SELECTORS_DRAWERCONTENT);content&&content.addEventListener("scroll",(()=>{drawerNode.classList.toggle(CLASSES_SCROLLED,0!=content.scrollTop)}))})(this.drawerNode),drawerMap.set(drawerNode,this),drawerNode.classList.remove(CLASSES_NOTINITIALISED))}get isOpen(){return this.drawerNode.classList.contains(CLASSES_SHOW)}get closeOnResize(){return!!parseInt(this.drawerNode.dataset.closeOnResize)}static getDrawerInstanceForNode(drawerNode){return drawerMap.has(drawerNode)||new Drawers(drawerNode),drawerMap.get(drawerNode)}dispatchEvent(eventname){let cancelable=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return(0,_event_dispatcher.dispatchEvent)(eventname,{drawerInstance:this},this.drawerNode,{cancelable:cancelable})}openDrawer(){var _this$drawerNode$quer;let{focusOnCloseButton:focusOnCloseButton=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const pendingPromise=new _pending.default("theme_boost/drawers:open");if(this.dispatchEvent(Drawers.eventTypes.drawerShow,!0).defaultPrevented)return;null===(_this$drawerNode$quer=this.drawerNode.querySelector(SELECTORS_CLOSEBTN))||void 0===_this$drawerNode$quer||_this$drawerNode$quer.classList.toggle("hidden",!0);let openButton=getDrawerOpenButton(this.drawerNode.id);var _jQuery;openButton&&openButton.hasAttribute("data-original-title")&&(null===(_jQuery=(0,_jquery.default)(openButton))||void 0===_jQuery||_jQuery.tooltip("hide"));Aria.unhide(this.drawerNode),this.drawerNode.classList.add(CLASSES_SHOW);const preference=this.drawerNode.dataset.preference;preference&&!(0,_pagehelpers.isSmall)()&&1!=this.drawerNode.dataset.forceopen&&M.util.set_user_preference(preference,!0);const state=this.drawerNode.dataset.state;if(state){document.getElementById("page").classList.add(state)}this.boundingRect=this.drawerNode.getBoundingClientRect(),(0,_pagehelpers.isSmall)()&&getBackdrop().then((backdrop=>{backdrop.show();return document.getElementById("page").style.overflow="hidden",backdrop})).catch();const closeButton=this.drawerNode.querySelector(SELECTORS_CLOSEBTN);focusOnCloseButton&&closeButton&&disableButtonTooltip(closeButton,!0),setTimeout((()=>{closeButton.classList.toggle("hidden",!1),focusOnCloseButton&&closeButton.focus(),pendingPromise.resolve()}),300),this.dispatchEvent(Drawers.eventTypes.drawerShown)}closeDrawer(){let{focusOnOpenButton:focusOnOpenButton=!0,updatePreferences:updatePreferences=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const pendingPromise=new _pending.default("theme_boost/drawers:close");if(this.dispatchEvent(Drawers.eventTypes.drawerHide,!0).defaultPrevented)return;const closeButton=this.drawerNode.querySelector(SELECTORS_CLOSEBTN);var _jQuery2;(null==closeButton||closeButton.classList.toggle("hidden",!0),closeButton.hasAttribute("data-original-title"))&&(null===(_jQuery2=(0,_jquery.default)(closeButton))||void 0===_jQuery2||_jQuery2.tooltip("hide"));const preference=this.drawerNode.dataset.preference;preference&&updatePreferences&&!(0,_pagehelpers.isSmall)()&&M.util.set_user_preference(preference,!1);const state=this.drawerNode.dataset.state;if(state){document.getElementById("page").classList.remove(state)}Aria.hide(this.drawerNode),this.drawerNode.classList.remove(CLASSES_SHOW),getBackdrop().then((backdrop=>{if(backdrop.hide(),(0,_pagehelpers.isSmall)()){document.getElementById("page").style.overflow="visible"}return backdrop})).catch();let openButton=getDrawerOpenButton(this.drawerNode.id);openButton&&disableButtonTooltip(openButton,!0),setTimeout((()=>{openButton&&focusOnOpenButton&&openButton.focus(),pendingPromise.resolve()}),300),this.dispatchEvent(Drawers.eventTypes.drawerHidden)}toggleVisibility(){this.drawerNode.classList.contains(CLASSES_SHOW)?this.closeDrawer():this.openDrawer()}displace(scrollPosition){var _this$drawerNode$data;let displace=scrollPosition,openButton=getDrawerOpenButton(this.drawerNode.id);if(0===scrollPosition)return this.drawerNode.style.transform="",void(openButton&&(openButton.style.transform=""));const state=null===(_this$drawerNode$data=this.drawerNode.dataset)||void 0===_this$drawerNode$data?void 0:_this$drawerNode$data.state,drawrWidth=this.drawerNode.offsetWidth;let scrollThreshold=drawrWidth,direction=-1;"show-drawer-right"===state&&(direction=1,scrollThreshold=20),scrollPosition>scrollThreshold&&(displace=drawrWidth+20),displace*=direction;const transform="translateX(".concat(displace,"px)");openButton&&(openButton.style.transform=transform),this.drawerNode.style.transform=transform}preventOverlap(currentFocus){if(!this.isOpen)return;const drawrWidth=this.drawerNode.offsetWidth,element=currentFocus.getBoundingClientRect(),drawer=this.boundingRect;element.right+20>drawer.left&&element.left-20{drawerInstance.closeDrawer()}))}static closeOtherDrawers(comparisonInstance){drawerMap.forEach((drawerInstance=>{drawerInstance!==comparisonInstance&&drawerInstance.closeDrawer()}))}static preventCoveringFocusedElement(){const currentFocus=document.activeElement,pagecontent=document.querySelector(SELECTORS_PAGECONTENT);currentFocus&&null!=pagecontent&&pagecontent.contains(currentFocus)?drawerMap.forEach((drawerInstance=>{drawerInstance.preventOverlap(currentFocus)})):Drawers.displaceDrawers(window.scrollX)}static displaceDrawers(displace){drawerMap.forEach((drawerInstance=>{drawerInstance.displace(displace)}))}}_exports.default=Drawers,_defineProperty(Drawers,"eventTypes",{drawerShow:"theme_boost/drawers:show",drawerShown:"theme_boost/drawers:shown",drawerHide:"theme_boost/drawers:hide",drawerHidden:"theme_boost/drawers:hidden"});const setLastUsedToggle=toggleButton=>{toggleButton.dataset.target&&(document.querySelectorAll("".concat(SELECTORS_BUTTONS,'[data-target="').concat(toggleButton.dataset.target,'"]')).forEach((btn=>{btn.dataset.lastused=!1})),toggleButton.dataset.lastused=!0)};(()=>{document.addEventListener("click",(e=>{const toggleButton=e.target.closest(SELECTORS_TOGGLEBTN);if(toggleButton&&toggleButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(toggleButton.dataset.target),drawerInstance=Drawers.getDrawerInstanceForNode(targetDrawer);setLastUsedToggle(toggleButton),drawerInstance.toggleVisibility()}const openDrawerButton=e.target.closest(SELECTORS_OPENBTN);if(openDrawerButton&&openDrawerButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(openDrawerButton.dataset.target),drawerInstance=Drawers.getDrawerInstanceForNode(targetDrawer);setLastUsedToggle(toggleButton),drawerInstance.openDrawer()}const closeDrawerButton=e.target.closest(SELECTORS_CLOSEBTN);if(closeDrawerButton&&closeDrawerButton.dataset.target){e.preventDefault();const targetDrawer=document.getElementById(closeDrawerButton.dataset.target);Drawers.getDrawerInstanceForNode(targetDrawer).closeDrawer(),(target=>{const lastUsedButton=document.querySelector("".concat(SELECTORS_BUTTONS,'[data-target="').concat(target,'"][data-lastused="true"'));lastUsedButton&&lastUsedButton.focus()})(closeDrawerButton.dataset.target)}})),document.addEventListener(Drawers.eventTypes.drawerShow,(e=>{(0,_pagehelpers.isLarge)()||Drawers.closeOtherDrawers(e.detail.drawerInstance)}));const btnSelector="".concat(SELECTORS_TOGGLEBTN,", ").concat(SELECTORS_OPENBTN,", ").concat(SELECTORS_CLOSEBTN);document.addEventListener("focusout",(e=>{const button=e.target.closest(btnSelector);void 0!==(null==button?void 0:button.dataset.restoreTooltipOnBlur)&&enableButtonTooltip(button)}));document.addEventListener("scroll",(()=>{const body=document.querySelector("body");window.scrollY>=window.innerHeight?body.classList.add(CLASSES_SCROLLED):body.classList.remove(CLASSES_SCROLLED),Drawers.displaceDrawers(window.scrollX)}));const preventOverlap=(0,_utils.debounce)(Drawers.preventCoveringFocusedElement,100);document.addEventListener("focusin",preventOverlap),document.addEventListener("focusout",preventOverlap),window.addEventListener("resize",(0,_utils.debounce)((()=>{if((0,_pagehelpers.isSmall)()){let anyOpen=!1;drawerMap.forEach((drawerInstance=>{disableDrawerTooltips(drawerInstance.drawerNode),drawerInstance.isOpen&&(drawerInstance.closeOnResize?drawerInstance.closeDrawer():anyOpen=!0)})),anyOpen&&getBackdrop().then((backdrop=>backdrop.show())).catch()}else drawerMap.forEach((drawerInstance=>{var drawerNode;[(drawerNode=drawerInstance.drawerNode).querySelector(SELECTORS_CLOSEBTN),getDrawerOpenButton(drawerNode.id)].forEach((button=>{button&&enableButtonTooltip(button)}))})),getBackdrop().then((backdrop=>backdrop.hide())).catch()}),400))})();return document.querySelectorAll(SELECTORS_DRAWERS).forEach((drawerNode=>Drawers.getDrawerInstanceForNode(drawerNode))),_exports.default})); //# sourceMappingURL=drawers.min.js.map \ No newline at end of file diff --git a/theme/boost/amd/build/drawers.min.js.map b/theme/boost/amd/build/drawers.min.js.map index dcb88ef79df..c46be7fe01c 100644 --- a/theme/boost/amd/build/drawers.min.js.map +++ b/theme/boost/amd/build/drawers.min.js.map @@ -1 +1 @@ -{"version":3,"file":"drawers.min.js","sources":["../src/drawers.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 * Toggling the visibility of the secondary navigation on mobile.\n *\n * @module theme_boost/drawers\n * @copyright 2021 Bas Brands\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport ModalBackdrop from 'core/modal_backdrop';\nimport Templates from 'core/templates';\nimport * as Aria from 'core/aria';\nimport {dispatchEvent} from 'core/event_dispatcher';\nimport {debounce} from 'core/utils';\nimport {isSmall, isLarge} from 'core/pagehelpers';\nimport Pending from 'core/pending';\n// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.\nimport jQuery from 'jquery';\n\nlet backdropPromise = null;\n\nconst drawerMap = new Map();\n\nconst SELECTORS = {\n BUTTONS: '[data-toggler=\"drawers\"]',\n CLOSEBTN: '[data-toggler=\"drawers\"][data-action=\"closedrawer\"]',\n OPENBTN: '[data-toggler=\"drawers\"][data-action=\"opendrawer\"]',\n TOGGLEBTN: '[data-toggler=\"drawers\"][data-action=\"toggle\"]',\n DRAWERS: '[data-region=\"fixed-drawer\"]',\n CONTAINER: '#page.drawers',\n DRAWERCONTENT: '.drawercontent',\n};\n\nconst CLASSES = {\n SCROLLED: 'scrolled',\n SHOW: 'show',\n NOTINITIALISED: 'not-initialized',\n TOGGLERIGHT: '.drawer-right-toggle',\n};\n\n/**\n * Add a backdrop to the page.\n *\n * @returns {Promise} rendering of modal backdrop.\n * @private\n */\nconst getBackdrop = () => {\n if (!backdropPromise) {\n backdropPromise = Templates.render('core/modal_backdrop', {})\n .then(html => new ModalBackdrop(html))\n .then(modalBackdrop => {\n modalBackdrop.getAttachmentPoint().get(0).addEventListener('click', e => {\n e.preventDefault();\n Drawers.closeAllDrawers();\n });\n return modalBackdrop;\n })\n .catch();\n }\n return backdropPromise;\n};\n\n/**\n * Get the button element to open a specific drawer.\n *\n * @param {String} drawerId the drawer element Id\n * @return {HTMLElement|undefined} the open button element\n * @private\n */\nconst getDrawerOpenButton = (drawerId) => {\n let openButton = document.querySelector(`${SELECTORS.OPENBTN}[data-target=\"${drawerId}\"]`);\n if (!openButton) {\n openButton = document.querySelector(`${SELECTORS.TOGGLEBTN}[data-target=\"${drawerId}\"]`);\n }\n return openButton;\n};\n\n/**\n * Disable drawer tooltips.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst disableDrawerTooltips = (drawerNode) => {\n const buttons = [\n drawerNode.querySelector(SELECTORS.CLOSEBTN),\n getDrawerOpenButton(drawerNode.id),\n ];\n buttons.forEach(button => {\n if (!button) {\n return;\n }\n disableButtonTooltip(button);\n });\n};\n\n/**\n * Disable the button tooltips.\n *\n * @param {HTMLElement} button the button element\n * @param {boolean} enableOnBlur if the tooltip must be re-enabled on blur.\n * @private\n */\nconst disableButtonTooltip = (button, enableOnBlur) => {\n if (button.hasAttribute('data-original-title')) {\n // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n jQuery(button).tooltip('disable');\n button.setAttribute('title', button.dataset.originalTitle);\n } else {\n button.dataset.disabledToggle = button.dataset.toggle;\n button.removeAttribute('data-toggle');\n }\n if (enableOnBlur) {\n button.dataset.restoreTooltipOnBlur = true;\n }\n};\n\n/**\n * Enable drawer tooltips.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst enableDrawerTooltips = (drawerNode) => {\n const buttons = [\n drawerNode.querySelector(SELECTORS.CLOSEBTN),\n getDrawerOpenButton(drawerNode.id),\n ];\n buttons.forEach(button => {\n if (!button) {\n return;\n }\n enableButtonTooltip(button);\n });\n};\n\n/**\n * Enable the button tooltips.\n *\n * @param {HTMLElement} button the button element\n * @private\n */\nconst enableButtonTooltip = (button) => {\n // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n if (button.hasAttribute('data-original-title')) {\n jQuery(button).tooltip('enable');\n button.removeAttribute('title');\n } else if (button.dataset.disabledToggle) {\n button.dataset.toggle = button.dataset.disabledToggle;\n jQuery(button).tooltip();\n }\n delete button.dataset.restoreTooltipOnBlur;\n};\n\n/**\n * Add scroll listeners to a drawer element.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst addInnerScrollListener = (drawerNode) => {\n const content = drawerNode.querySelector(SELECTORS.DRAWERCONTENT);\n if (!content) {\n return;\n }\n content.addEventListener(\"scroll\", () => {\n drawerNode.classList.toggle(\n CLASSES.SCROLLED,\n content.scrollTop != 0\n );\n });\n};\n\n/**\n * The Drawers class is used to control on-screen drawer elements.\n *\n * It handles opening, and closing of drawer elements, as well as more detailed behaviours such as closing a drawer when\n * another drawer is opened, and supports closing a drawer when the screen is resized.\n *\n * Drawers are instantiated on page load, and can also be toggled lazily when toggling any drawer toggle, open button,\n * or close button.\n *\n * A range of show and hide events are also dispatched as detailed in the class\n * {@link module:theme_boost/drawers#eventTypes eventTypes} object.\n *\n * @example Standard usage\n *\n * // The module just needs to be included to add drawer support.\n * import 'theme_boost/drawers';\n *\n * @example Manually open or close any drawer\n *\n * import Drawers from 'theme_boost/drawers';\n *\n * const myDrawer = Drawers.getDrawerInstanceForNode(document.querySelector('.myDrawerNode');\n * myDrawer.closeDrawer();\n *\n * @example Listen to the before show event and cancel it\n *\n * import Drawers from 'theme_boost/drawers';\n *\n * document.addEventListener(Drawers.eventTypes.drawerShow, e => {\n * // The drawer which will be shown.\n * window.console.log(e.target);\n *\n * // The instance of the Drawers class for this drawer.\n * window.console.log(e.detail.drawerInstance);\n *\n * // Prevent this drawer from being shown.\n * e.preventDefault();\n * });\n *\n * @example Listen to the shown event\n *\n * document.addEventListener(Drawers.eventTypes.drawerShown, e => {\n * // The drawer which was shown.\n * window.console.log(e.target);\n *\n * // The instance of the Drawers class for this drawer.\n * window.console.log(e.detail.drawerInstance);\n * });\n */\nexport default class Drawers {\n /**\n * The underlying HTMLElement which is controlled.\n */\n drawerNode = null;\n\n constructor(drawerNode) {\n // Some behat tests may use fake drawer divs to test components in drawers.\n if (drawerNode.dataset.behatFakeDrawer !== undefined) {\n return;\n }\n\n this.drawerNode = drawerNode;\n\n if (isSmall()) {\n this.closeDrawer({focusOnOpenButton: false, updatePreferences: false});\n }\n\n if (this.drawerNode.classList.contains(CLASSES.SHOW)) {\n this.openDrawer({focusOnCloseButton: false});\n } else if (this.drawerNode.dataset.forceopen == 1) {\n if (!isSmall()) {\n this.openDrawer({focusOnCloseButton: false});\n }\n } else {\n Aria.hide(this.drawerNode);\n }\n\n // Disable tooltips in small screens.\n if (isSmall()) {\n disableDrawerTooltips(this.drawerNode);\n }\n\n addInnerScrollListener(this.drawerNode);\n\n drawerMap.set(drawerNode, this);\n\n drawerNode.classList.remove(CLASSES.NOTINITIALISED);\n }\n\n /**\n * Whether the drawer is open.\n *\n * @returns {boolean}\n */\n get isOpen() {\n return this.drawerNode.classList.contains(CLASSES.SHOW);\n }\n\n /**\n * Whether the drawer should close when the window is resized\n *\n * @returns {boolean}\n */\n get closeOnResize() {\n return !!parseInt(this.drawerNode.dataset.closeOnResize);\n }\n\n /**\n * The list of event types.\n *\n * @static\n * @property {String} drawerShow See {@link event:theme_boost/drawers:show}\n * @property {String} drawerShown See {@link event:theme_boost/drawers:shown}\n * @property {String} drawerHide See {@link event:theme_boost/drawers:hide}\n * @property {String} drawerHidden See {@link event:theme_boost/drawers:hidden}\n */\n static eventTypes = {\n /**\n * An event triggered before a drawer is shown.\n *\n * @event theme_boost/drawers:show\n * @type {CustomEvent}\n * @property {HTMLElement} target The drawer that will be opened.\n */\n drawerShow: 'theme_boost/drawers:show',\n\n /**\n * An event triggered after a drawer is shown.\n *\n * @event theme_boost/drawers:shown\n * @type {CustomEvent}\n * @property {HTMLElement} target The drawer that was be opened.\n */\n drawerShown: 'theme_boost/drawers:shown',\n\n /**\n * An event triggered before a drawer is hidden.\n *\n * @event theme_boost/drawers:hide\n * @type {CustomEvent}\n * @property {HTMLElement} target The drawer that will be hidden.\n */\n drawerHide: 'theme_boost/drawers:hide',\n\n /**\n * An event triggered after a drawer is hidden.\n *\n * @event theme_boost/drawers:hidden\n * @type {CustomEvent}\n * @property {HTMLElement} target The drawer that was be hidden.\n */\n drawerHidden: 'theme_boost/drawers:hidden',\n };\n\n\n /**\n * Get the drawer instance for the specified node\n *\n * @param {HTMLElement} drawerNode\n * @returns {module:theme_boost/drawers}\n */\n static getDrawerInstanceForNode(drawerNode) {\n if (!drawerMap.has(drawerNode)) {\n new Drawers(drawerNode);\n }\n\n return drawerMap.get(drawerNode);\n }\n\n /**\n * Dispatch a drawer event.\n *\n * @param {string} eventname the event name\n * @param {boolean} cancelable if the event is cancelable\n * @returns {CustomEvent} the resulting custom event\n */\n dispatchEvent(eventname, cancelable = false) {\n return dispatchEvent(\n eventname,\n {\n drawerInstance: this,\n },\n this.drawerNode,\n {\n cancelable,\n }\n );\n }\n\n /**\n * Open the drawer.\n *\n * By default, openDrawer sets the page focus to the close drawer button. However, when a drawer is open at page\n * load, this represents an accessibility problem as the initial focus changes without any user interaction. The\n * focusOnCloseButton parameter can be set to false to prevent this behaviour.\n *\n * @param {object} args\n * @param {boolean} [args.focusOnCloseButton=true] Whether to alter page focus when opening the drawer\n */\n openDrawer({focusOnCloseButton = true} = {}) {\n\n const pendingPromise = new Pending('theme_boost/drawers:open');\n const showEvent = this.dispatchEvent(Drawers.eventTypes.drawerShow, true);\n if (showEvent.defaultPrevented) {\n return;\n }\n\n // Hide close button while the drawer is showing to prevent glitchy effects.\n this.drawerNode.querySelector(SELECTORS.CLOSEBTN)?.classList.toggle('hidden', true);\n\n // Remove open tooltip if still visible.\n let openButton = getDrawerOpenButton(this.drawerNode.id);\n if (openButton && openButton.hasAttribute('data-original-title')) {\n // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n jQuery(openButton)?.tooltip('hide');\n }\n\n Aria.unhide(this.drawerNode);\n this.drawerNode.classList.add(CLASSES.SHOW);\n\n const preference = this.drawerNode.dataset.preference;\n if (preference && !isSmall() && (this.drawerNode.dataset.forceopen != 1)) {\n M.util.set_user_preference(preference, true);\n }\n\n const state = this.drawerNode.dataset.state;\n if (state) {\n const page = document.getElementById('page');\n page.classList.add(state);\n }\n\n if (isSmall()) {\n getBackdrop().then(backdrop => {\n backdrop.show();\n\n const pageWrapper = document.getElementById('page');\n pageWrapper.style.overflow = 'hidden';\n return backdrop;\n })\n .catch();\n }\n\n // Show close button once the drawer is fully opened.\n const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);\n if (focusOnCloseButton && closeButton) {\n disableButtonTooltip(closeButton, true);\n }\n setTimeout(() => {\n closeButton.classList.toggle('hidden', false);\n if (focusOnCloseButton) {\n closeButton.focus();\n }\n pendingPromise.resolve();\n }, 300);\n\n this.dispatchEvent(Drawers.eventTypes.drawerShown);\n }\n\n /**\n * Close the drawer.\n *\n * @param {object} args\n * @param {boolean} [args.focusOnOpenButton=true] Whether to alter page focus when opening the drawer\n * @param {boolean} [args.updatePreferences=true] Whether to update the user prewference\n */\n closeDrawer({focusOnOpenButton = true, updatePreferences = true} = {}) {\n\n const pendingPromise = new Pending('theme_boost/drawers:close');\n\n const hideEvent = this.dispatchEvent(Drawers.eventTypes.drawerHide, true);\n if (hideEvent.defaultPrevented) {\n return;\n }\n\n // Hide close button while the drawer is hiding to prevent glitchy effects.\n const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);\n closeButton?.classList.toggle('hidden', true);\n // Remove the close button tooltip if visible.\n if (closeButton.hasAttribute('data-original-title')) {\n // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n jQuery(closeButton)?.tooltip('hide');\n }\n\n const preference = this.drawerNode.dataset.preference;\n if (preference && updatePreferences && !isSmall()) {\n M.util.set_user_preference(preference, false);\n }\n\n const state = this.drawerNode.dataset.state;\n if (state) {\n const page = document.getElementById('page');\n page.classList.remove(state);\n }\n\n Aria.hide(this.drawerNode);\n this.drawerNode.classList.remove(CLASSES.SHOW);\n\n getBackdrop().then(backdrop => {\n backdrop.hide();\n\n if (isSmall()) {\n const pageWrapper = document.getElementById('page');\n pageWrapper.style.overflow = 'visible';\n }\n return backdrop;\n })\n .catch();\n\n // Move focus to the open drawer (or toggler) button once the drawer is hidden.\n let openButton = getDrawerOpenButton(this.drawerNode.id);\n if (openButton) {\n disableButtonTooltip(openButton, true);\n }\n setTimeout(() => {\n if (openButton && focusOnOpenButton) {\n openButton.focus();\n }\n pendingPromise.resolve();\n }, 300);\n\n this.dispatchEvent(Drawers.eventTypes.drawerHidden);\n }\n\n /**\n * Toggle visibility of the drawer.\n */\n toggleVisibility() {\n if (this.drawerNode.classList.contains(CLASSES.SHOW)) {\n this.closeDrawer();\n } else {\n this.openDrawer();\n }\n }\n\n /**\n * Close all drawers.\n */\n static closeAllDrawers() {\n drawerMap.forEach(drawerInstance => {\n drawerInstance.closeDrawer();\n });\n }\n\n /**\n * Close all drawers except for the specified drawer.\n *\n * @param {module:theme_boost/drawers} comparisonInstance\n */\n static closeOtherDrawers(comparisonInstance) {\n drawerMap.forEach(drawerInstance => {\n if (drawerInstance === comparisonInstance) {\n return;\n }\n\n drawerInstance.closeDrawer();\n });\n }\n}\n\n/**\n * Activate the scroller helper for the drawer layout.\n *\n * @private\n */\nconst scroller = () => {\n const body = document.querySelector('body');\n const drawerLayout = document.querySelector(SELECTORS.CONTAINER);\n if (drawerLayout) {\n // If there is not visible scrollbar then remove extra margin from right drawer.\n const drawerRight = document.querySelector(SELECTORS.CONTAINER + ' ' + CLASSES.TOGGLERIGHT);\n if (!scrollbarVisible(drawerLayout) && drawerRight) {\n drawerRight.style.marginRight = '0';\n }\n drawerLayout.addEventListener(\"scroll\", () => {\n if (drawerLayout.scrollTop >= window.innerHeight) {\n body.classList.add(CLASSES.SCROLLED);\n } else {\n body.classList.remove(CLASSES.SCROLLED);\n }\n });\n }\n};\n\n/**\n * Check if there is a visible scrollbar in the given html element.\n *\n * @param {object} htmlNode The html element.\n * @returns {boolean} true if the scroll height is greater than client height.\n */\nconst scrollbarVisible = (htmlNode) => {\n return htmlNode.scrollHeight > htmlNode.clientHeight;\n};\n\n/**\n * Set the last used attribute for the last used toggle button for a drawer.\n *\n * @param {object} toggleButton The clicked button.\n */\nconst setLastUsedToggle = (toggleButton) => {\n if (toggleButton.dataset.target) {\n document.querySelectorAll(`${SELECTORS.BUTTONS}[data-target=\"${toggleButton.dataset.target}\"]`)\n .forEach(btn => {\n btn.dataset.lastused = false;\n });\n toggleButton.dataset.lastused = true;\n }\n};\n\n/**\n * Set the focus to the last used button to open this drawer.\n * @param {string} target The drawer target.\n */\nconst focusLastUsedToggle = (target) => {\n const lastUsedButton = document.querySelector(`${SELECTORS.BUTTONS}[data-target=\"${target}\"][data-lastused=\"true\"`);\n if (lastUsedButton) {\n lastUsedButton.focus();\n }\n};\n\n/**\n * Register the event listeners for the drawer.\n *\n * @private\n */\nconst registerListeners = () => {\n // Listen for show/hide events.\n document.addEventListener('click', e => {\n const toggleButton = e.target.closest(SELECTORS.TOGGLEBTN);\n if (toggleButton && toggleButton.dataset.target) {\n e.preventDefault();\n const targetDrawer = document.getElementById(toggleButton.dataset.target);\n const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n setLastUsedToggle(toggleButton);\n\n drawerInstance.toggleVisibility();\n }\n\n const openDrawerButton = e.target.closest(SELECTORS.OPENBTN);\n if (openDrawerButton && openDrawerButton.dataset.target) {\n e.preventDefault();\n const targetDrawer = document.getElementById(openDrawerButton.dataset.target);\n const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n setLastUsedToggle(toggleButton);\n\n drawerInstance.openDrawer();\n }\n\n const closeDrawerButton = e.target.closest(SELECTORS.CLOSEBTN);\n if (closeDrawerButton && closeDrawerButton.dataset.target) {\n e.preventDefault();\n const targetDrawer = document.getElementById(closeDrawerButton.dataset.target);\n const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n\n drawerInstance.closeDrawer();\n focusLastUsedToggle(closeDrawerButton.dataset.target);\n }\n });\n\n // Close drawer when another drawer opens.\n document.addEventListener(Drawers.eventTypes.drawerShow, e => {\n if (isLarge()) {\n return;\n }\n Drawers.closeOtherDrawers(e.detail.drawerInstance);\n });\n\n // Tooglers and openers blur listeners.\n const btnSelector = `${SELECTORS.TOGGLEBTN}, ${SELECTORS.OPENBTN}, ${SELECTORS.CLOSEBTN}`;\n document.addEventListener('focusout', (e) => {\n const button = e.target.closest(btnSelector);\n if (button?.dataset.restoreTooltipOnBlur !== undefined) {\n enableButtonTooltip(button);\n }\n });\n\n const closeOnResizeListener = () => {\n if (isSmall()) {\n let anyOpen = false;\n drawerMap.forEach(drawerInstance => {\n disableDrawerTooltips(drawerInstance.drawerNode);\n if (drawerInstance.isOpen) {\n if (drawerInstance.closeOnResize) {\n drawerInstance.closeDrawer();\n } else {\n anyOpen = true;\n }\n }\n });\n\n if (anyOpen) {\n getBackdrop().then(backdrop => backdrop.show()).catch();\n }\n } else {\n drawerMap.forEach(drawerInstance => {\n enableDrawerTooltips(drawerInstance.drawerNode);\n });\n getBackdrop().then(backdrop => backdrop.hide()).catch();\n }\n };\n\n window.addEventListener('resize', debounce(closeOnResizeListener, 400));\n};\n\nscroller();\nregisterListeners();\n\nconst drawers = document.querySelectorAll(SELECTORS.DRAWERS);\ndrawers.forEach(drawerNode => Drawers.getDrawerInstanceForNode(drawerNode));\n"],"names":["backdropPromise","drawerMap","Map","SELECTORS","CLASSES","getBackdrop","Templates","render","then","html","ModalBackdrop","modalBackdrop","getAttachmentPoint","get","addEventListener","e","preventDefault","Drawers","closeAllDrawers","catch","getDrawerOpenButton","drawerId","openButton","document","querySelector","disableDrawerTooltips","drawerNode","id","forEach","button","disableButtonTooltip","enableOnBlur","hasAttribute","tooltip","setAttribute","dataset","originalTitle","disabledToggle","toggle","removeAttribute","restoreTooltipOnBlur","enableButtonTooltip","constructor","undefined","behatFakeDrawer","closeDrawer","focusOnOpenButton","updatePreferences","this","classList","contains","openDrawer","focusOnCloseButton","forceopen","Aria","hide","content","scrollTop","addInnerScrollListener","set","remove","isOpen","closeOnResize","parseInt","has","dispatchEvent","eventname","cancelable","drawerInstance","pendingPromise","Pending","eventTypes","drawerShow","defaultPrevented","unhide","add","preference","M","util","set_user_preference","state","getElementById","backdrop","show","style","overflow","closeButton","setTimeout","focus","resolve","drawerShown","drawerHide","drawerHidden","toggleVisibility","comparisonInstance","scrollbarVisible","htmlNode","scrollHeight","clientHeight","setLastUsedToggle","toggleButton","target","querySelectorAll","btn","lastused","body","drawerLayout","drawerRight","marginRight","window","innerHeight","scroller","closest","targetDrawer","getDrawerInstanceForNode","openDrawerButton","closeDrawerButton","lastUsedButton","focusLastUsedToggle","closeOtherDrawers","detail","btnSelector","anyOpen","registerListeners"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"drawers.min.js","sources":["../src/drawers.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 * Toggling the visibility of the secondary navigation on mobile.\n *\n * @module theme_boost/drawers\n * @copyright 2021 Bas Brands\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport ModalBackdrop from 'core/modal_backdrop';\nimport Templates from 'core/templates';\nimport * as Aria from 'core/aria';\nimport {dispatchEvent} from 'core/event_dispatcher';\nimport {debounce} from 'core/utils';\nimport {isSmall, isLarge} from 'core/pagehelpers';\nimport Pending from 'core/pending';\n// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.\nimport jQuery from 'jquery';\n\nlet backdropPromise = null;\n\nconst drawerMap = new Map();\n\nconst SELECTORS = {\n BUTTONS: '[data-toggler=\"drawers\"]',\n CLOSEBTN: '[data-toggler=\"drawers\"][data-action=\"closedrawer\"]',\n OPENBTN: '[data-toggler=\"drawers\"][data-action=\"opendrawer\"]',\n TOGGLEBTN: '[data-toggler=\"drawers\"][data-action=\"toggle\"]',\n DRAWERS: '[data-region=\"fixed-drawer\"]',\n DRAWERCONTENT: '.drawercontent',\n PAGECONTENT: '#page-content',\n};\n\nconst CLASSES = {\n SCROLLED: 'scrolled',\n SHOW: 'show',\n NOTINITIALISED: 'not-initialized',\n};\n\n/**\n * Pixel thresshold to auto-hide drawers.\n *\n * @type {Number}\n */\nconst THRESHOLD = 20;\n\n/**\n * Try to get the drawer z-index from the page content.\n *\n * @returns {Number|null} the z-index of the drawer.\n * @private\n */\nconst getDrawerZIndex = () => {\n const drawer = document.querySelector(SELECTORS.DRAWERS);\n if (!drawer) {\n return null;\n }\n return parseInt(window.getComputedStyle(drawer).zIndex, 10);\n};\n\n/**\n * Add a backdrop to the page.\n *\n * @returns {Promise} rendering of modal backdrop.\n * @private\n */\nconst getBackdrop = () => {\n if (!backdropPromise) {\n backdropPromise = Templates.render('core/modal_backdrop', {})\n .then(html => new ModalBackdrop(html))\n .then(modalBackdrop => {\n const drawerZindex = getDrawerZIndex();\n if (drawerZindex) {\n modalBackdrop.setZIndex(getDrawerZIndex() - 1);\n }\n modalBackdrop.getAttachmentPoint().get(0).addEventListener('click', e => {\n e.preventDefault();\n Drawers.closeAllDrawers();\n });\n return modalBackdrop;\n })\n .catch();\n }\n return backdropPromise;\n};\n\n/**\n * Get the button element to open a specific drawer.\n *\n * @param {String} drawerId the drawer element Id\n * @return {HTMLElement|undefined} the open button element\n * @private\n */\nconst getDrawerOpenButton = (drawerId) => {\n let openButton = document.querySelector(`${SELECTORS.OPENBTN}[data-target=\"${drawerId}\"]`);\n if (!openButton) {\n openButton = document.querySelector(`${SELECTORS.TOGGLEBTN}[data-target=\"${drawerId}\"]`);\n }\n return openButton;\n};\n\n/**\n * Disable drawer tooltips.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst disableDrawerTooltips = (drawerNode) => {\n const buttons = [\n drawerNode.querySelector(SELECTORS.CLOSEBTN),\n getDrawerOpenButton(drawerNode.id),\n ];\n buttons.forEach(button => {\n if (!button) {\n return;\n }\n disableButtonTooltip(button);\n });\n};\n\n/**\n * Disable the button tooltips.\n *\n * @param {HTMLElement} button the button element\n * @param {boolean} enableOnBlur if the tooltip must be re-enabled on blur.\n * @private\n */\nconst disableButtonTooltip = (button, enableOnBlur) => {\n if (button.hasAttribute('data-original-title')) {\n // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n jQuery(button).tooltip('disable');\n button.setAttribute('title', button.dataset.originalTitle);\n } else {\n button.dataset.disabledToggle = button.dataset.toggle;\n button.removeAttribute('data-toggle');\n }\n if (enableOnBlur) {\n button.dataset.restoreTooltipOnBlur = true;\n }\n};\n\n/**\n * Enable drawer tooltips.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst enableDrawerTooltips = (drawerNode) => {\n const buttons = [\n drawerNode.querySelector(SELECTORS.CLOSEBTN),\n getDrawerOpenButton(drawerNode.id),\n ];\n buttons.forEach(button => {\n if (!button) {\n return;\n }\n enableButtonTooltip(button);\n });\n};\n\n/**\n * Enable the button tooltips.\n *\n * @param {HTMLElement} button the button element\n * @private\n */\nconst enableButtonTooltip = (button) => {\n // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n if (button.hasAttribute('data-original-title')) {\n jQuery(button).tooltip('enable');\n button.removeAttribute('title');\n } else if (button.dataset.disabledToggle) {\n button.dataset.toggle = button.dataset.disabledToggle;\n jQuery(button).tooltip();\n }\n delete button.dataset.restoreTooltipOnBlur;\n};\n\n/**\n * Add scroll listeners to a drawer element.\n *\n * @param {HTMLElement} drawerNode the drawer main node\n * @private\n */\nconst addInnerScrollListener = (drawerNode) => {\n const content = drawerNode.querySelector(SELECTORS.DRAWERCONTENT);\n if (!content) {\n return;\n }\n content.addEventListener(\"scroll\", () => {\n drawerNode.classList.toggle(\n CLASSES.SCROLLED,\n content.scrollTop != 0\n );\n });\n};\n\n/**\n * The Drawers class is used to control on-screen drawer elements.\n *\n * It handles opening, and closing of drawer elements, as well as more detailed behaviours such as closing a drawer when\n * another drawer is opened, and supports closing a drawer when the screen is resized.\n *\n * Drawers are instantiated on page load, and can also be toggled lazily when toggling any drawer toggle, open button,\n * or close button.\n *\n * A range of show and hide events are also dispatched as detailed in the class\n * {@link module:theme_boost/drawers#eventTypes eventTypes} object.\n *\n * @example Standard usage\n *\n * // The module just needs to be included to add drawer support.\n * import 'theme_boost/drawers';\n *\n * @example Manually open or close any drawer\n *\n * import Drawers from 'theme_boost/drawers';\n *\n * const myDrawer = Drawers.getDrawerInstanceForNode(document.querySelector('.myDrawerNode');\n * myDrawer.closeDrawer();\n *\n * @example Listen to the before show event and cancel it\n *\n * import Drawers from 'theme_boost/drawers';\n *\n * document.addEventListener(Drawers.eventTypes.drawerShow, e => {\n * // The drawer which will be shown.\n * window.console.log(e.target);\n *\n * // The instance of the Drawers class for this drawer.\n * window.console.log(e.detail.drawerInstance);\n *\n * // Prevent this drawer from being shown.\n * e.preventDefault();\n * });\n *\n * @example Listen to the shown event\n *\n * document.addEventListener(Drawers.eventTypes.drawerShown, e => {\n * // The drawer which was shown.\n * window.console.log(e.target);\n *\n * // The instance of the Drawers class for this drawer.\n * window.console.log(e.detail.drawerInstance);\n * });\n */\nexport default class Drawers {\n /**\n * The underlying HTMLElement which is controlled.\n */\n drawerNode = null;\n\n /**\n * The drawer page bounding box dimensions.\n * @var {DOMRect} boundingRect\n */\n boundingRect = null;\n\n constructor(drawerNode) {\n // Some behat tests may use fake drawer divs to test components in drawers.\n if (drawerNode.dataset.behatFakeDrawer !== undefined) {\n return;\n }\n\n this.drawerNode = drawerNode;\n\n if (isSmall()) {\n this.closeDrawer({focusOnOpenButton: false, updatePreferences: false});\n }\n\n if (this.drawerNode.classList.contains(CLASSES.SHOW)) {\n this.openDrawer({focusOnCloseButton: false});\n } else if (this.drawerNode.dataset.forceopen == 1) {\n if (!isSmall()) {\n this.openDrawer({focusOnCloseButton: false});\n }\n } else {\n Aria.hide(this.drawerNode);\n }\n\n // Disable tooltips in small screens.\n if (isSmall()) {\n disableDrawerTooltips(this.drawerNode);\n }\n\n addInnerScrollListener(this.drawerNode);\n\n drawerMap.set(drawerNode, this);\n\n drawerNode.classList.remove(CLASSES.NOTINITIALISED);\n }\n\n /**\n * Whether the drawer is open.\n *\n * @returns {boolean}\n */\n get isOpen() {\n return this.drawerNode.classList.contains(CLASSES.SHOW);\n }\n\n /**\n * Whether the drawer should close when the window is resized\n *\n * @returns {boolean}\n */\n get closeOnResize() {\n return !!parseInt(this.drawerNode.dataset.closeOnResize);\n }\n\n /**\n * The list of event types.\n *\n * @static\n * @property {String} drawerShow See {@link event:theme_boost/drawers:show}\n * @property {String} drawerShown See {@link event:theme_boost/drawers:shown}\n * @property {String} drawerHide See {@link event:theme_boost/drawers:hide}\n * @property {String} drawerHidden See {@link event:theme_boost/drawers:hidden}\n */\n static eventTypes = {\n /**\n * An event triggered before a drawer is shown.\n *\n * @event theme_boost/drawers:show\n * @type {CustomEvent}\n * @property {HTMLElement} target The drawer that will be opened.\n */\n drawerShow: 'theme_boost/drawers:show',\n\n /**\n * An event triggered after a drawer is shown.\n *\n * @event theme_boost/drawers:shown\n * @type {CustomEvent}\n * @property {HTMLElement} target The drawer that was be opened.\n */\n drawerShown: 'theme_boost/drawers:shown',\n\n /**\n * An event triggered before a drawer is hidden.\n *\n * @event theme_boost/drawers:hide\n * @type {CustomEvent}\n * @property {HTMLElement} target The drawer that will be hidden.\n */\n drawerHide: 'theme_boost/drawers:hide',\n\n /**\n * An event triggered after a drawer is hidden.\n *\n * @event theme_boost/drawers:hidden\n * @type {CustomEvent}\n * @property {HTMLElement} target The drawer that was be hidden.\n */\n drawerHidden: 'theme_boost/drawers:hidden',\n };\n\n\n /**\n * Get the drawer instance for the specified node\n *\n * @param {HTMLElement} drawerNode\n * @returns {module:theme_boost/drawers}\n */\n static getDrawerInstanceForNode(drawerNode) {\n if (!drawerMap.has(drawerNode)) {\n new Drawers(drawerNode);\n }\n\n return drawerMap.get(drawerNode);\n }\n\n /**\n * Dispatch a drawer event.\n *\n * @param {string} eventname the event name\n * @param {boolean} cancelable if the event is cancelable\n * @returns {CustomEvent} the resulting custom event\n */\n dispatchEvent(eventname, cancelable = false) {\n return dispatchEvent(\n eventname,\n {\n drawerInstance: this,\n },\n this.drawerNode,\n {\n cancelable,\n }\n );\n }\n\n /**\n * Open the drawer.\n *\n * By default, openDrawer sets the page focus to the close drawer button. However, when a drawer is open at page\n * load, this represents an accessibility problem as the initial focus changes without any user interaction. The\n * focusOnCloseButton parameter can be set to false to prevent this behaviour.\n *\n * @param {object} args\n * @param {boolean} [args.focusOnCloseButton=true] Whether to alter page focus when opening the drawer\n */\n openDrawer({focusOnCloseButton = true} = {}) {\n\n const pendingPromise = new Pending('theme_boost/drawers:open');\n const showEvent = this.dispatchEvent(Drawers.eventTypes.drawerShow, true);\n if (showEvent.defaultPrevented) {\n return;\n }\n\n // Hide close button while the drawer is showing to prevent glitchy effects.\n this.drawerNode.querySelector(SELECTORS.CLOSEBTN)?.classList.toggle('hidden', true);\n\n // Remove open tooltip if still visible.\n let openButton = getDrawerOpenButton(this.drawerNode.id);\n if (openButton && openButton.hasAttribute('data-original-title')) {\n // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n jQuery(openButton)?.tooltip('hide');\n }\n\n Aria.unhide(this.drawerNode);\n this.drawerNode.classList.add(CLASSES.SHOW);\n\n const preference = this.drawerNode.dataset.preference;\n if (preference && !isSmall() && (this.drawerNode.dataset.forceopen != 1)) {\n M.util.set_user_preference(preference, true);\n }\n\n const state = this.drawerNode.dataset.state;\n if (state) {\n const page = document.getElementById('page');\n page.classList.add(state);\n }\n\n this.boundingRect = this.drawerNode.getBoundingClientRect();\n\n if (isSmall()) {\n getBackdrop().then(backdrop => {\n backdrop.show();\n\n const pageWrapper = document.getElementById('page');\n pageWrapper.style.overflow = 'hidden';\n return backdrop;\n })\n .catch();\n }\n\n // Show close button once the drawer is fully opened.\n const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);\n if (focusOnCloseButton && closeButton) {\n disableButtonTooltip(closeButton, true);\n }\n setTimeout(() => {\n closeButton.classList.toggle('hidden', false);\n if (focusOnCloseButton) {\n closeButton.focus();\n }\n pendingPromise.resolve();\n }, 300);\n\n this.dispatchEvent(Drawers.eventTypes.drawerShown);\n }\n\n /**\n * Close the drawer.\n *\n * @param {object} args\n * @param {boolean} [args.focusOnOpenButton=true] Whether to alter page focus when opening the drawer\n * @param {boolean} [args.updatePreferences=true] Whether to update the user prewference\n */\n closeDrawer({focusOnOpenButton = true, updatePreferences = true} = {}) {\n\n const pendingPromise = new Pending('theme_boost/drawers:close');\n\n const hideEvent = this.dispatchEvent(Drawers.eventTypes.drawerHide, true);\n if (hideEvent.defaultPrevented) {\n return;\n }\n\n // Hide close button while the drawer is hiding to prevent glitchy effects.\n const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);\n closeButton?.classList.toggle('hidden', true);\n // Remove the close button tooltip if visible.\n if (closeButton.hasAttribute('data-original-title')) {\n // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.\n jQuery(closeButton)?.tooltip('hide');\n }\n\n const preference = this.drawerNode.dataset.preference;\n if (preference && updatePreferences && !isSmall()) {\n M.util.set_user_preference(preference, false);\n }\n\n const state = this.drawerNode.dataset.state;\n if (state) {\n const page = document.getElementById('page');\n page.classList.remove(state);\n }\n\n Aria.hide(this.drawerNode);\n this.drawerNode.classList.remove(CLASSES.SHOW);\n\n getBackdrop().then(backdrop => {\n backdrop.hide();\n\n if (isSmall()) {\n const pageWrapper = document.getElementById('page');\n pageWrapper.style.overflow = 'visible';\n }\n return backdrop;\n })\n .catch();\n\n // Move focus to the open drawer (or toggler) button once the drawer is hidden.\n let openButton = getDrawerOpenButton(this.drawerNode.id);\n if (openButton) {\n disableButtonTooltip(openButton, true);\n }\n setTimeout(() => {\n if (openButton && focusOnOpenButton) {\n openButton.focus();\n }\n pendingPromise.resolve();\n }, 300);\n\n this.dispatchEvent(Drawers.eventTypes.drawerHidden);\n }\n\n /**\n * Toggle visibility of the drawer.\n */\n toggleVisibility() {\n if (this.drawerNode.classList.contains(CLASSES.SHOW)) {\n this.closeDrawer();\n } else {\n this.openDrawer();\n }\n }\n\n /**\n * Displaces the drawer outsite the page.\n *\n * @param {Number} scrollPosition the page current scroll position\n */\n displace(scrollPosition) {\n let displace = scrollPosition;\n let openButton = getDrawerOpenButton(this.drawerNode.id);\n if (scrollPosition === 0) {\n this.drawerNode.style.transform = '';\n if (openButton) {\n openButton.style.transform = '';\n }\n return;\n }\n const state = this.drawerNode.dataset?.state;\n const drawrWidth = this.drawerNode.offsetWidth;\n let scrollThreshold = drawrWidth;\n let direction = -1;\n if (state === 'show-drawer-right') {\n direction = 1;\n scrollThreshold = THRESHOLD;\n }\n if (scrollPosition > scrollThreshold) {\n displace = drawrWidth + THRESHOLD;\n }\n displace *= direction;\n const transform = `translateX(${displace}px)`;\n if (openButton) {\n openButton.style.transform = transform;\n }\n this.drawerNode.style.transform = transform;\n }\n\n /**\n * Prevent drawer from overlapping an element.\n *\n * @param {HTMLElement} currentFocus\n */\n preventOverlap(currentFocus) {\n if (!this.isOpen) {\n return;\n }\n const drawrWidth = this.drawerNode.offsetWidth;\n const element = currentFocus.getBoundingClientRect();\n const drawer = this.boundingRect;\n const overlapping = (\n (element.right + THRESHOLD) > drawer.left &&\n (element.left - THRESHOLD) < drawer.right\n );\n if (overlapping) {\n // Force drawer to displace out of the page.\n this.displace(drawrWidth + 1);\n } else {\n // Reset drawer displacement.\n this.displace(window.scrollX);\n }\n }\n\n /**\n * Close all drawers.\n */\n static closeAllDrawers() {\n drawerMap.forEach(drawerInstance => {\n drawerInstance.closeDrawer();\n });\n }\n\n /**\n * Close all drawers except for the specified drawer.\n *\n * @param {module:theme_boost/drawers} comparisonInstance\n */\n static closeOtherDrawers(comparisonInstance) {\n drawerMap.forEach(drawerInstance => {\n if (drawerInstance === comparisonInstance) {\n return;\n }\n\n drawerInstance.closeDrawer();\n });\n }\n\n /**\n * Prevent drawers from covering the focused element.\n */\n static preventCoveringFocusedElement() {\n const currentFocus = document.activeElement;\n // Focus on page layout elements should be ignored.\n const pagecontent = document.querySelector(SELECTORS.PAGECONTENT);\n if (!currentFocus || !pagecontent?.contains(currentFocus)) {\n Drawers.displaceDrawers(window.scrollX);\n return;\n }\n drawerMap.forEach(drawerInstance => {\n drawerInstance.preventOverlap(currentFocus);\n });\n }\n\n /**\n * Prevent drawer from covering the content when the page content covers the full page.\n *\n * @param {Number} displace\n */\n static displaceDrawers(displace) {\n drawerMap.forEach(drawerInstance => {\n drawerInstance.displace(displace);\n });\n }\n}\n\n/**\n * Set the last used attribute for the last used toggle button for a drawer.\n *\n * @param {object} toggleButton The clicked button.\n */\nconst setLastUsedToggle = (toggleButton) => {\n if (toggleButton.dataset.target) {\n document.querySelectorAll(`${SELECTORS.BUTTONS}[data-target=\"${toggleButton.dataset.target}\"]`)\n .forEach(btn => {\n btn.dataset.lastused = false;\n });\n toggleButton.dataset.lastused = true;\n }\n};\n\n/**\n * Set the focus to the last used button to open this drawer.\n * @param {string} target The drawer target.\n */\nconst focusLastUsedToggle = (target) => {\n const lastUsedButton = document.querySelector(`${SELECTORS.BUTTONS}[data-target=\"${target}\"][data-lastused=\"true\"`);\n if (lastUsedButton) {\n lastUsedButton.focus();\n }\n};\n\n/**\n * Register the event listeners for the drawer.\n *\n * @private\n */\nconst registerListeners = () => {\n // Listen for show/hide events.\n document.addEventListener('click', e => {\n const toggleButton = e.target.closest(SELECTORS.TOGGLEBTN);\n if (toggleButton && toggleButton.dataset.target) {\n e.preventDefault();\n const targetDrawer = document.getElementById(toggleButton.dataset.target);\n const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n setLastUsedToggle(toggleButton);\n\n drawerInstance.toggleVisibility();\n }\n\n const openDrawerButton = e.target.closest(SELECTORS.OPENBTN);\n if (openDrawerButton && openDrawerButton.dataset.target) {\n e.preventDefault();\n const targetDrawer = document.getElementById(openDrawerButton.dataset.target);\n const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n setLastUsedToggle(toggleButton);\n\n drawerInstance.openDrawer();\n }\n\n const closeDrawerButton = e.target.closest(SELECTORS.CLOSEBTN);\n if (closeDrawerButton && closeDrawerButton.dataset.target) {\n e.preventDefault();\n const targetDrawer = document.getElementById(closeDrawerButton.dataset.target);\n const drawerInstance = Drawers.getDrawerInstanceForNode(targetDrawer);\n\n drawerInstance.closeDrawer();\n focusLastUsedToggle(closeDrawerButton.dataset.target);\n }\n });\n\n // Close drawer when another drawer opens.\n document.addEventListener(Drawers.eventTypes.drawerShow, e => {\n if (isLarge()) {\n return;\n }\n Drawers.closeOtherDrawers(e.detail.drawerInstance);\n });\n\n // Tooglers and openers blur listeners.\n const btnSelector = `${SELECTORS.TOGGLEBTN}, ${SELECTORS.OPENBTN}, ${SELECTORS.CLOSEBTN}`;\n document.addEventListener('focusout', (e) => {\n const button = e.target.closest(btnSelector);\n if (button?.dataset.restoreTooltipOnBlur !== undefined) {\n enableButtonTooltip(button);\n }\n });\n\n const closeOnResizeListener = () => {\n if (isSmall()) {\n let anyOpen = false;\n drawerMap.forEach(drawerInstance => {\n disableDrawerTooltips(drawerInstance.drawerNode);\n if (drawerInstance.isOpen) {\n if (drawerInstance.closeOnResize) {\n drawerInstance.closeDrawer();\n } else {\n anyOpen = true;\n }\n }\n });\n\n if (anyOpen) {\n getBackdrop().then(backdrop => backdrop.show()).catch();\n }\n } else {\n drawerMap.forEach(drawerInstance => {\n enableDrawerTooltips(drawerInstance.drawerNode);\n });\n getBackdrop().then(backdrop => backdrop.hide()).catch();\n }\n };\n\n document.addEventListener('scroll', () => {\n const body = document.querySelector('body');\n if (window.scrollY >= window.innerHeight) {\n body.classList.add(CLASSES.SCROLLED);\n } else {\n body.classList.remove(CLASSES.SCROLLED);\n }\n // Horizontal scroll listener to displace the drawers to prevent covering\n // any possible sticky content.\n Drawers.displaceDrawers(window.scrollX);\n });\n\n const preventOverlap = debounce(Drawers.preventCoveringFocusedElement, 100);\n document.addEventListener('focusin', preventOverlap);\n document.addEventListener('focusout', preventOverlap);\n\n window.addEventListener('resize', debounce(closeOnResizeListener, 400));\n};\n\nregisterListeners();\n\nconst drawers = document.querySelectorAll(SELECTORS.DRAWERS);\ndrawers.forEach(drawerNode => Drawers.getDrawerInstanceForNode(drawerNode));\n"],"names":["backdropPromise","drawerMap","Map","SELECTORS","CLASSES","getDrawerZIndex","drawer","document","querySelector","parseInt","window","getComputedStyle","zIndex","getBackdrop","Templates","render","then","html","ModalBackdrop","modalBackdrop","setZIndex","getAttachmentPoint","get","addEventListener","e","preventDefault","Drawers","closeAllDrawers","catch","getDrawerOpenButton","drawerId","openButton","disableDrawerTooltips","drawerNode","id","forEach","button","disableButtonTooltip","enableOnBlur","hasAttribute","tooltip","setAttribute","dataset","originalTitle","disabledToggle","toggle","removeAttribute","restoreTooltipOnBlur","enableButtonTooltip","constructor","undefined","behatFakeDrawer","closeDrawer","focusOnOpenButton","updatePreferences","this","classList","contains","openDrawer","focusOnCloseButton","forceopen","Aria","hide","content","scrollTop","addInnerScrollListener","set","remove","isOpen","closeOnResize","has","dispatchEvent","eventname","cancelable","drawerInstance","pendingPromise","Pending","eventTypes","drawerShow","defaultPrevented","unhide","add","preference","M","util","set_user_preference","state","getElementById","boundingRect","getBoundingClientRect","backdrop","show","style","overflow","closeButton","setTimeout","focus","resolve","drawerShown","drawerHide","drawerHidden","toggleVisibility","displace","scrollPosition","transform","_this$drawerNode$data","drawrWidth","offsetWidth","scrollThreshold","direction","preventOverlap","currentFocus","element","right","left","scrollX","comparisonInstance","activeElement","pagecontent","displaceDrawers","setLastUsedToggle","toggleButton","target","querySelectorAll","btn","lastused","closest","targetDrawer","getDrawerInstanceForNode","openDrawerButton","closeDrawerButton","lastUsedButton","focusLastUsedToggle","closeOtherDrawers","detail","btnSelector","body","scrollY","innerHeight","preventCoveringFocusedElement","anyOpen","registerListeners"],"mappings":"osDAgCIA,gBAAkB,WAEhBC,UAAY,IAAIC,IAEhBC,kBACO,2BADPA,mBAEQ,sDAFRA,kBAGO,qDAHPA,oBAIS,iDAJTA,kBAKO,+BALPA,wBAMa,iBANbA,sBAOW,gBAGXC,iBACQ,WADRA,aAEI,OAFJA,uBAGc,kBAgBdC,gBAAkB,WACdC,OAASC,SAASC,cAAcL,0BACjCG,OAGEG,SAASC,OAAOC,iBAAiBL,QAAQM,OAAQ,IAF7C,MAWTC,YAAc,KACXb,kBACDA,gBAAkBc,mBAAUC,OAAO,sBAAuB,IACzDC,MAAKC,MAAQ,IAAIC,wBAAcD,QAC/BD,MAAKG,gBACmBd,mBAEjBc,cAAcC,UAAUf,kBAAoB,GAEhDc,cAAcE,qBAAqBC,IAAI,GAAGC,iBAAiB,SAASC,IAChEA,EAAEC,iBACFC,QAAQC,qBAELR,iBAEVS,SAEE5B,iBAUL6B,oBAAuBC,eACrBC,WAAaxB,SAASC,wBAAiBL,2CAAkC2B,uBACxEC,aACDA,WAAaxB,SAASC,wBAAiBL,6CAAoC2B,iBAExEC,YASLC,sBAAyBC,aACX,CACZA,WAAWzB,cAAcL,oBACzB0B,oBAAoBI,WAAWC,KAE3BC,SAAQC,SACPA,QAGLC,qBAAqBD,YAWvBC,qBAAuB,CAACD,OAAQE,gBAC9BF,OAAOG,aAAa,4CAEbH,QAAQI,QAAQ,WACvBJ,OAAOK,aAAa,QAASL,OAAOM,QAAQC,iBAE5CP,OAAOM,QAAQE,eAAiBR,OAAOM,QAAQG,OAC/CT,OAAOU,gBAAgB,gBAEvBR,eACAF,OAAOM,QAAQK,sBAAuB,IA6BxCC,oBAAuBZ,SAErBA,OAAOG,aAAa,4CACbH,QAAQI,QAAQ,UACvBJ,OAAOU,gBAAgB,UAChBV,OAAOM,QAAQE,iBACtBR,OAAOM,QAAQG,OAAST,OAAOM,QAAQE,mCAChCR,QAAQI,kBAEZJ,OAAOM,QAAQK,4BAuELrB,QAYjBuB,YAAYhB,8CARC,0CAME,WAIgCiB,IAAvCjB,WAAWS,QAAQS,uBAIlBlB,WAAaA,YAEd,gCACKmB,YAAY,CAACC,mBAAmB,EAAOC,mBAAmB,IAG/DC,KAAKtB,WAAWuB,UAAUC,SAASrD,mBAC9BsD,WAAW,CAACC,oBAAoB,IACO,GAArCJ,KAAKtB,WAAWS,QAAQkB,WAC1B,gCACIF,WAAW,CAACC,oBAAoB,IAGzCE,KAAKC,KAAKP,KAAKtB,aAIf,2BACAD,sBAAsBuB,KAAKtB,YAlGPA,CAAAA,mBACtB8B,QAAU9B,WAAWzB,cAAcL,yBACpC4D,SAGLA,QAAQxC,iBAAiB,UAAU,KAC/BU,WAAWuB,UAAUX,OACjBzC,iBACqB,GAArB2D,QAAQC,eA6FZC,CAAuBV,KAAKtB,YAE5BhC,UAAUiE,IAAIjC,WAAYsB,MAE1BtB,WAAWuB,UAAUW,OAAO/D,yBAQ5BgE,oBACOb,KAAKtB,WAAWuB,UAAUC,SAASrD,cAQ1CiE,4BACS5D,SAAS8C,KAAKtB,WAAWS,QAAQ2B,+CAyDdpC,mBACvBhC,UAAUqE,IAAIrC,iBACXP,QAAQO,YAGThC,UAAUqB,IAAIW,YAUzBsC,cAAcC,eAAWC,0EACd,mCACHD,UACA,CACIE,eAAgBnB,MAEpBA,KAAKtB,WACL,CACIwC,WAAAA,aAeZf,2CAAWC,mBAACA,oBAAqB,0DAAQ,SAE/BgB,eAAiB,IAAIC,iBAAQ,+BACjBrB,KAAKgB,cAAc7C,QAAQmD,WAAWC,YAAY,GACtDC,2DAKT9C,WAAWzB,cAAcL,4EAAqBqD,UAAUX,OAAO,UAAU,OAG1Ed,WAAaF,oBAAoB0B,KAAKtB,WAAWC,gBACjDH,YAAcA,WAAWQ,aAAa,6DAE/BR,wCAAaS,QAAQ,SAGhCqB,KAAKmB,OAAOzB,KAAKtB,iBACZA,WAAWuB,UAAUyB,IAAI7E,oBAExB8E,WAAa3B,KAAKtB,WAAWS,QAAQwC,WACvCA,cAAe,2BAAmD,GAArC3B,KAAKtB,WAAWS,QAAQkB,WACrDuB,EAAEC,KAAKC,oBAAoBH,YAAY,SAGrCI,MAAQ/B,KAAKtB,WAAWS,QAAQ4C,SAClCA,MAAO,CACM/E,SAASgF,eAAe,QAChC/B,UAAUyB,IAAIK,YAGlBE,aAAejC,KAAKtB,WAAWwD,yBAEhC,2BACA5E,cAAcG,MAAK0E,WACfA,SAASC,cAEWpF,SAASgF,eAAe,QAChCK,MAAMC,SAAW,SACtBH,YAEV9D,cAICkE,YAAcvC,KAAKtB,WAAWzB,cAAcL,oBAC9CwD,oBAAsBmC,aACtBzD,qBAAqByD,aAAa,GAEtCC,YAAW,KACPD,YAAYtC,UAAUX,OAAO,UAAU,GACnCc,oBACAmC,YAAYE,QAEhBrB,eAAesB,YAChB,UAEE1B,cAAc7C,QAAQmD,WAAWqB,aAU1C9C,kBAAYC,kBAACA,mBAAoB,EAArBC,kBAA2BA,mBAAoB,0DAAQ,SAEzDqB,eAAiB,IAAIC,iBAAQ,gCAEjBrB,KAAKgB,cAAc7C,QAAQmD,WAAWsB,YAAY,GACtDpB,8BAKRe,YAAcvC,KAAKtB,WAAWzB,cAAcL,kCAClD2F,MAAAA,aAAAA,YAAatC,UAAUX,OAAO,UAAU,GAEpCiD,YAAYvD,aAAa,+DAElBuD,2CAActD,QAAQ,eAG3B0C,WAAa3B,KAAKtB,WAAWS,QAAQwC,WACvCA,YAAc5B,qBAAsB,2BACpC6B,EAAEC,KAAKC,oBAAoBH,YAAY,SAGrCI,MAAQ/B,KAAKtB,WAAWS,QAAQ4C,SAClCA,MAAO,CACM/E,SAASgF,eAAe,QAChC/B,UAAUW,OAAOmB,OAG1BzB,KAAKC,KAAKP,KAAKtB,iBACVA,WAAWuB,UAAUW,OAAO/D,cAEjCS,cAAcG,MAAK0E,cACfA,SAAS5B,QAEL,0BAAW,CACSvD,SAASgF,eAAe,QAChCK,MAAMC,SAAW,iBAE1BH,YAEV9D,YAGGG,WAAaF,oBAAoB0B,KAAKtB,WAAWC,IACjDH,YACAM,qBAAqBN,YAAY,GAErCgE,YAAW,KACHhE,YAAcsB,mBACdtB,WAAWiE,QAEfrB,eAAesB,YAChB,UAEE1B,cAAc7C,QAAQmD,WAAWuB,cAM1CC,mBACQ9C,KAAKtB,WAAWuB,UAAUC,SAASrD,mBAC9BgD,mBAEAM,aASb4C,SAASC,8CACDD,SAAWC,eACXxE,WAAaF,oBAAoB0B,KAAKtB,WAAWC,OAC9B,IAAnBqE,2BACKtE,WAAW2D,MAAMY,UAAY,QAC9BzE,aACAA,WAAW6D,MAAMY,UAAY,WAI/BlB,oCAAQ/B,KAAKtB,WAAWS,gDAAhB+D,sBAAyBnB,MACjCoB,WAAanD,KAAKtB,WAAW0E,gBAC/BC,gBAAkBF,WAClBG,WAAa,EACH,sBAAVvB,QACAuB,UAAY,EACZD,gBApgBM,IAsgBNL,eAAiBK,kBACjBN,SAAWI,WAvgBL,IAygBVJ,UAAYO,gBACNL,+BAA0BF,gBAC5BvE,aACAA,WAAW6D,MAAMY,UAAYA,gBAE5BvE,WAAW2D,MAAMY,UAAYA,UAQtCM,eAAeC,kBACNxD,KAAKa,oBAGJsC,WAAanD,KAAKtB,WAAW0E,YAC7BK,QAAUD,aAAatB,wBACvBnF,OAASiD,KAAKiC,aAEfwB,QAAQC,MA9hBH,GA8hBwB3G,OAAO4G,MACpCF,QAAQE,KA/hBH,GA+hBuB5G,OAAO2G,WAI/BX,SAASI,WAAa,QAGtBJ,SAAS5F,OAAOyG,kCAQzBlH,UAAUkC,SAAQuC,iBACdA,eAAetB,0CASEgE,oBACrBnH,UAAUkC,SAAQuC,iBACVA,iBAAmB0C,oBAIvB1C,eAAetB,8DAQb2D,aAAexG,SAAS8G,cAExBC,YAAc/G,SAASC,cAAcL,uBACtC4G,cAAiBO,MAAAA,aAAAA,YAAa7D,SAASsD,cAI5C9G,UAAUkC,SAAQuC,iBACdA,eAAeoC,eAAeC,iBAJ9BrF,QAAQ6F,gBAAgB7G,OAAOyG,gCAahBb,UACnBrG,UAAUkC,SAAQuC,iBACdA,eAAe4B,SAASA,uDA/Yf5E,qBAyEG,CAQhBoD,WAAY,2BASZoB,YAAa,4BASbC,WAAY,2BASZC,aAAc,qCA6ShBoB,kBAAqBC,eACnBA,aAAa/E,QAAQgF,SACrBnH,SAASoH,2BAAoBxH,2CAAkCsH,aAAa/E,QAAQgF,cACnFvF,SAAQyF,MACLA,IAAIlF,QAAQmF,UAAW,KAE3BJ,aAAa/E,QAAQmF,UAAW,IAoBd,MAEtBtH,SAASgB,iBAAiB,SAASC,UACzBiG,aAAejG,EAAEkG,OAAOI,QAAQ3H,wBAClCsH,cAAgBA,aAAa/E,QAAQgF,OAAQ,CAC7ClG,EAAEC,uBACIsG,aAAexH,SAASgF,eAAekC,aAAa/E,QAAQgF,QAC5DhD,eAAiBhD,QAAQsG,yBAAyBD,cACxDP,kBAAkBC,cAElB/C,eAAe2B,yBAGb4B,iBAAmBzG,EAAEkG,OAAOI,QAAQ3H,sBACtC8H,kBAAoBA,iBAAiBvF,QAAQgF,OAAQ,CACrDlG,EAAEC,uBACIsG,aAAexH,SAASgF,eAAe0C,iBAAiBvF,QAAQgF,QAChEhD,eAAiBhD,QAAQsG,yBAAyBD,cACxDP,kBAAkBC,cAElB/C,eAAehB,mBAGbwE,kBAAoB1G,EAAEkG,OAAOI,QAAQ3H,uBACvC+H,mBAAqBA,kBAAkBxF,QAAQgF,OAAQ,CACvDlG,EAAEC,uBACIsG,aAAexH,SAASgF,eAAe2C,kBAAkBxF,QAAQgF,QAChDhG,QAAQsG,yBAAyBD,cAEzC3E,cAzCEsE,CAAAA,eACnBS,eAAiB5H,SAASC,wBAAiBL,2CAAkCuH,mCAC/ES,gBACAA,eAAenC,SAuCXoC,CAAoBF,kBAAkBxF,QAAQgF,YAKtDnH,SAASgB,iBAAiBG,QAAQmD,WAAWC,YAAYtD,KACjD,2BAGJE,QAAQ2G,kBAAkB7G,EAAE8G,OAAO5D,yBAIjC6D,sBAAiBpI,iCAAwBA,+BAAsBA,oBACrEI,SAASgB,iBAAiB,YAAaC,UAC7BY,OAASZ,EAAEkG,OAAOI,QAAQS,kBACarF,KAAzCd,MAAAA,cAAAA,OAAQM,QAAQK,uBAChBC,oBAAoBZ,WA6B5B7B,SAASgB,iBAAiB,UAAU,WAC1BiH,KAAOjI,SAASC,cAAc,QAChCE,OAAO+H,SAAW/H,OAAOgI,YACzBF,KAAKhF,UAAUyB,IAAI7E,kBAEnBoI,KAAKhF,UAAUW,OAAO/D,kBAI1BsB,QAAQ6F,gBAAgB7G,OAAOyG,kBAG7BL,gBAAiB,mBAASpF,QAAQiH,8BAA+B,KACvEpI,SAASgB,iBAAiB,UAAWuF,gBACrCvG,SAASgB,iBAAiB,WAAYuF,gBAEtCpG,OAAOa,iBAAiB,UAAU,oBAzCJ,SACtB,0BAAW,KACPqH,SAAU,EACd3I,UAAUkC,SAAQuC,iBACd1C,sBAAsB0C,eAAezC,YACjCyC,eAAeN,SACXM,eAAeL,cACfK,eAAetB,cAEfwF,SAAU,MAKlBA,SACA/H,cAAcG,MAAK0E,UAAYA,SAASC,SAAQ/D,aAGpD3B,UAAUkC,SAAQuC,iBA3lBAzC,IAAAA,WACV,EADUA,WA4lBOyC,eAAezC,YA1lBjCzB,cAAcL,oBACzB0B,oBAAoBI,WAAWC,KAE3BC,SAAQC,SACPA,QAGLY,oBAAoBZ,cAqlBhBvB,cAAcG,MAAK0E,UAAYA,SAAS5B,SAAQlC,UAoBU,OAGtEiH,UAEgBtI,SAASoH,iBAAiBxH,mBAClCgC,SAAQF,YAAcP,QAAQsG,yBAAyB/F"} \ No newline at end of file diff --git a/theme/boost/amd/src/drawers.js b/theme/boost/amd/src/drawers.js index e376085f139..d81429dab28 100644 --- a/theme/boost/amd/src/drawers.js +++ b/theme/boost/amd/src/drawers.js @@ -40,15 +40,35 @@ const SELECTORS = { OPENBTN: '[data-toggler="drawers"][data-action="opendrawer"]', TOGGLEBTN: '[data-toggler="drawers"][data-action="toggle"]', DRAWERS: '[data-region="fixed-drawer"]', - CONTAINER: '#page.drawers', DRAWERCONTENT: '.drawercontent', + PAGECONTENT: '#page-content', }; const CLASSES = { SCROLLED: 'scrolled', SHOW: 'show', NOTINITIALISED: 'not-initialized', - TOGGLERIGHT: '.drawer-right-toggle', +}; + +/** + * Pixel thresshold to auto-hide drawers. + * + * @type {Number} + */ +const THRESHOLD = 20; + +/** + * Try to get the drawer z-index from the page content. + * + * @returns {Number|null} the z-index of the drawer. + * @private + */ +const getDrawerZIndex = () => { + const drawer = document.querySelector(SELECTORS.DRAWERS); + if (!drawer) { + return null; + } + return parseInt(window.getComputedStyle(drawer).zIndex, 10); }; /** @@ -62,6 +82,10 @@ const getBackdrop = () => { backdropPromise = Templates.render('core/modal_backdrop', {}) .then(html => new ModalBackdrop(html)) .then(modalBackdrop => { + const drawerZindex = getDrawerZIndex(); + if (drawerZindex) { + modalBackdrop.setZIndex(getDrawerZIndex() - 1); + } modalBackdrop.getAttachmentPoint().get(0).addEventListener('click', e => { e.preventDefault(); Drawers.closeAllDrawers(); @@ -239,6 +263,12 @@ export default class Drawers { */ drawerNode = null; + /** + * The drawer page bounding box dimensions. + * @var {DOMRect} boundingRect + */ + boundingRect = null; + constructor(drawerNode) { // Some behat tests may use fake drawer divs to test components in drawers. if (drawerNode.dataset.behatFakeDrawer !== undefined) { @@ -415,6 +445,8 @@ export default class Drawers { page.classList.add(state); } + this.boundingRect = this.drawerNode.getBoundingClientRect(); + if (isSmall()) { getBackdrop().then(backdrop => { backdrop.show(); @@ -518,6 +550,65 @@ export default class Drawers { } } + /** + * Displaces the drawer outsite the page. + * + * @param {Number} scrollPosition the page current scroll position + */ + displace(scrollPosition) { + let displace = scrollPosition; + let openButton = getDrawerOpenButton(this.drawerNode.id); + if (scrollPosition === 0) { + this.drawerNode.style.transform = ''; + if (openButton) { + openButton.style.transform = ''; + } + return; + } + const state = this.drawerNode.dataset?.state; + const drawrWidth = this.drawerNode.offsetWidth; + let scrollThreshold = drawrWidth; + let direction = -1; + if (state === 'show-drawer-right') { + direction = 1; + scrollThreshold = THRESHOLD; + } + if (scrollPosition > scrollThreshold) { + displace = drawrWidth + THRESHOLD; + } + displace *= direction; + const transform = `translateX(${displace}px)`; + if (openButton) { + openButton.style.transform = transform; + } + this.drawerNode.style.transform = transform; + } + + /** + * Prevent drawer from overlapping an element. + * + * @param {HTMLElement} currentFocus + */ + preventOverlap(currentFocus) { + if (!this.isOpen) { + return; + } + const drawrWidth = this.drawerNode.offsetWidth; + const element = currentFocus.getBoundingClientRect(); + const drawer = this.boundingRect; + const overlapping = ( + (element.right + THRESHOLD) > drawer.left && + (element.left - THRESHOLD) < drawer.right + ); + if (overlapping) { + // Force drawer to displace out of the page. + this.displace(drawrWidth + 1); + } else { + // Reset drawer displacement. + this.displace(window.scrollX); + } + } + /** * Close all drawers. */ @@ -541,41 +632,34 @@ export default class Drawers { drawerInstance.closeDrawer(); }); } -} -/** - * Activate the scroller helper for the drawer layout. - * - * @private - */ -const scroller = () => { - const body = document.querySelector('body'); - const drawerLayout = document.querySelector(SELECTORS.CONTAINER); - if (drawerLayout) { - // If there is not visible scrollbar then remove extra margin from right drawer. - const drawerRight = document.querySelector(SELECTORS.CONTAINER + ' ' + CLASSES.TOGGLERIGHT); - if (!scrollbarVisible(drawerLayout) && drawerRight) { - drawerRight.style.marginRight = '0'; + /** + * Prevent drawers from covering the focused element. + */ + static preventCoveringFocusedElement() { + const currentFocus = document.activeElement; + // Focus on page layout elements should be ignored. + const pagecontent = document.querySelector(SELECTORS.PAGECONTENT); + if (!currentFocus || !pagecontent?.contains(currentFocus)) { + Drawers.displaceDrawers(window.scrollX); + return; } - drawerLayout.addEventListener("scroll", () => { - if (drawerLayout.scrollTop >= window.innerHeight) { - body.classList.add(CLASSES.SCROLLED); - } else { - body.classList.remove(CLASSES.SCROLLED); - } + drawerMap.forEach(drawerInstance => { + drawerInstance.preventOverlap(currentFocus); }); } -}; -/** - * Check if there is a visible scrollbar in the given html element. - * - * @param {object} htmlNode The html element. - * @returns {boolean} true if the scroll height is greater than client height. - */ -const scrollbarVisible = (htmlNode) => { - return htmlNode.scrollHeight > htmlNode.clientHeight; -}; + /** + * Prevent drawer from covering the content when the page content covers the full page. + * + * @param {Number} displace + */ + static displaceDrawers(displace) { + drawerMap.forEach(drawerInstance => { + drawerInstance.displace(displace); + }); + } +} /** * Set the last used attribute for the last used toggle button for a drawer. @@ -684,10 +768,25 @@ const registerListeners = () => { } }; + document.addEventListener('scroll', () => { + const body = document.querySelector('body'); + if (window.scrollY >= window.innerHeight) { + body.classList.add(CLASSES.SCROLLED); + } else { + body.classList.remove(CLASSES.SCROLLED); + } + // Horizontal scroll listener to displace the drawers to prevent covering + // any possible sticky content. + Drawers.displaceDrawers(window.scrollX); + }); + + const preventOverlap = debounce(Drawers.preventCoveringFocusedElement, 100); + document.addEventListener('focusin', preventOverlap); + document.addEventListener('focusout', preventOverlap); + window.addEventListener('resize', debounce(closeOnResizeListener, 400)); }; -scroller(); registerListeners(); const drawers = document.querySelectorAll(SELECTORS.DRAWERS); diff --git a/theme/boost/scss/moodle/drawer.scss b/theme/boost/scss/moodle/drawer.scss index c915b397d8c..cc1606bda7b 100644 --- a/theme/boost/scss/moodle/drawer.scss +++ b/theme/boost/scss/moodle/drawer.scss @@ -159,7 +159,6 @@ $right-drawer-width: 320px; } @mixin drawer() { - @include transition(left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease); background-color: $drawer-bg-color; z-index: $zindex-fixed; position: fixed; @@ -173,6 +172,7 @@ $right-drawer-width: 320px; @mixin drawertypes() { &.drawer-right { + @include transition(right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease); width: $drawer-right-width; max-width: $drawer-right-width; right: calc(-#{$drawer-right-width} + -10px); @@ -190,6 +190,7 @@ $right-drawer-width: 320px; } } &.drawer-left { + @include transition(left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease); width: $drawer-left-width; max-width: $drawer-left-width; left: calc(-#{$drawer-left-width} + -10px); diff --git a/theme/boost/scss/moodle/grade.scss b/theme/boost/scss/moodle/grade.scss index 7ce968b2706..582945b5c93 100644 --- a/theme/boost/scss/moodle/grade.scss +++ b/theme/boost/scss/moodle/grade.scss @@ -526,7 +526,7 @@ tr.heading { position: sticky; - top: 0; + top: $navbar-height; z-index: 4; } diff --git a/theme/boost/scss/moodle/layout.scss b/theme/boost/scss/moodle/layout.scss index 41806b1f8b1..13435722a4c 100644 --- a/theme/boost/scss/moodle/layout.scss +++ b/theme/boost/scss/moodle/layout.scss @@ -181,9 +181,6 @@ #page.drawers .main-inner { margin-top: 1.5rem; } - #page.drawers .drawer-right-toggle { - margin-right: 0.7rem; - } } @include media-breakpoint-up(md) { @@ -220,7 +217,6 @@ position: relative; overflow-y: visible; @include transition(0.2s); - height: calc(100vh - #{$navbar-height}); left: 0; right: 0; &.show-drawer-left { @@ -241,7 +237,7 @@ margin-right: $drawer-right-width; } &.hasstickyfooter { - height: calc(100vh - #{$navbar-height} - #{$stickyfooter-height}); + margin-bottom: $stickyfooter-height; } } } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 60d84ab3a1c..e6493fc9f1c 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -29724,27 +29724,27 @@ body.drawer-ease { } .drawer { - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1030; position: fixed; height: 100vh; top: 0; } -@media (prefers-reduced-motion: reduce) { - .drawer { - transition: none; - } -} .drawer.not-initialized { display: none; } .drawer.drawer-right { + transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease; width: 315px; max-width: 315px; right: calc(-315px + -10px); visibility: hidden; } +@media (prefers-reduced-motion: reduce) { + .drawer.drawer-right { + transition: none; + } +} .drawer.drawer-right.show { right: 0; visibility: visible; @@ -29754,11 +29754,17 @@ body.drawer-ease { margin-right: 5px; } .drawer.drawer-left { + transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; width: 285px; max-width: 285px; left: calc(-285px + -10px); visibility: hidden; } +@media (prefers-reduced-motion: reduce) { + .drawer.drawer-left { + transition: none; + } +} .drawer.drawer-left.show { left: 0; visibility: visible; @@ -29804,35 +29810,35 @@ body.drawer-ease { @media (max-width: 991.98px) { .drawer-md { display: block; - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1030; position: fixed; height: 100vh; top: 0; } -} -@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { - .drawer-md { - transition: none; - } -} -@media (max-width: 991.98px) { .drawer-md.not-initialized { display: none; } -} -@media (max-width: 991.98px) { .drawer-md.drawer-right { + transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease; width: 315px; max-width: 315px; right: calc(-315px + -10px); visibility: hidden; } +} +@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { + .drawer-md.drawer-right { + transition: none; + } +} +@media (max-width: 991.98px) { .drawer-md.drawer-right.show { right: 0; visibility: visible; } +} +@media (max-width: 991.98px) { .drawer-md.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; @@ -29840,15 +29846,25 @@ body.drawer-ease { } @media (max-width: 991.98px) { .drawer-md.drawer-left { + transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; width: 285px; max-width: 285px; left: calc(-285px + -10px); visibility: hidden; } +} +@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { + .drawer-md.drawer-left { + transition: none; + } +} +@media (max-width: 991.98px) { .drawer-md.drawer-left.show { left: 0; visibility: visible; } +} +@media (max-width: 991.98px) { .drawer-md.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; @@ -29865,35 +29881,35 @@ body.drawer-ease { @media (max-width: 767.98px) { .drawer-sm { display: block; - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1030; position: fixed; height: 100vh; top: 0; } -} -@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { - .drawer-sm { - transition: none; - } -} -@media (max-width: 767.98px) { .drawer-sm.not-initialized { display: none; } -} -@media (max-width: 767.98px) { .drawer-sm.drawer-right { + transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease; width: 315px; max-width: 315px; right: calc(-315px + -10px); visibility: hidden; } +} +@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { + .drawer-sm.drawer-right { + transition: none; + } +} +@media (max-width: 767.98px) { .drawer-sm.drawer-right.show { right: 0; visibility: visible; } +} +@media (max-width: 767.98px) { .drawer-sm.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; @@ -29901,15 +29917,25 @@ body.drawer-ease { } @media (max-width: 767.98px) { .drawer-sm.drawer-left { + transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; width: 285px; max-width: 285px; left: calc(-285px + -10px); visibility: hidden; } +} +@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { + .drawer-sm.drawer-left { + transition: none; + } +} +@media (max-width: 767.98px) { .drawer-sm.drawer-left.show { left: 0; visibility: visible; } +} +@media (max-width: 767.98px) { .drawer-sm.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; @@ -35361,7 +35387,7 @@ p.arrow_button { } .path-grade-report-grader .gradeparent tr.heading { position: sticky; - top: 0; + top: 60px; z-index: 4; } .path-grade-report-grader .gradeparent tr.userrow th { @@ -36589,9 +36615,6 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp #page.drawers .main-inner { margin-top: 1.5rem; } - #page.drawers .drawer-right-toggle { - margin-right: 0.7rem; - } } @media (min-width: 768px) { #page.drawers { @@ -36621,7 +36644,6 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp position: relative; overflow-y: visible; transition: 0.2s; - height: calc(100vh - 60px); left: 0; right: 0; } @@ -36656,7 +36678,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp } @media (min-width: 992px) { #page.drawers.hasstickyfooter { - height: calc(100vh - 60px - max(96px, 0.9375rem * 3)); + margin-bottom: max(96px, 0.9375rem * 3); } } .drawercontrolbuttons { diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index b51cf5dd96c..b3ba1cc90e9 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -29724,27 +29724,27 @@ body.drawer-ease { } .drawer { - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1030; position: fixed; height: 100vh; top: 0; } -@media (prefers-reduced-motion: reduce) { - .drawer { - transition: none; - } -} .drawer.not-initialized { display: none; } .drawer.drawer-right { + transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease; width: 315px; max-width: 315px; right: calc(-315px + -10px); visibility: hidden; } +@media (prefers-reduced-motion: reduce) { + .drawer.drawer-right { + transition: none; + } +} .drawer.drawer-right.show { right: 0; visibility: visible; @@ -29754,11 +29754,17 @@ body.drawer-ease { margin-right: 5px; } .drawer.drawer-left { + transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; width: 285px; max-width: 285px; left: calc(-285px + -10px); visibility: hidden; } +@media (prefers-reduced-motion: reduce) { + .drawer.drawer-left { + transition: none; + } +} .drawer.drawer-left.show { left: 0; visibility: visible; @@ -29804,35 +29810,35 @@ body.drawer-ease { @media (max-width: 991.98px) { .drawer-md { display: block; - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1030; position: fixed; height: 100vh; top: 0; } -} -@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { - .drawer-md { - transition: none; - } -} -@media (max-width: 991.98px) { .drawer-md.not-initialized { display: none; } -} -@media (max-width: 991.98px) { .drawer-md.drawer-right { + transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease; width: 315px; max-width: 315px; right: calc(-315px + -10px); visibility: hidden; } +} +@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { + .drawer-md.drawer-right { + transition: none; + } +} +@media (max-width: 991.98px) { .drawer-md.drawer-right.show { right: 0; visibility: visible; } +} +@media (max-width: 991.98px) { .drawer-md.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; @@ -29840,15 +29846,25 @@ body.drawer-ease { } @media (max-width: 991.98px) { .drawer-md.drawer-left { + transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; width: 285px; max-width: 285px; left: calc(-285px + -10px); visibility: hidden; } +} +@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { + .drawer-md.drawer-left { + transition: none; + } +} +@media (max-width: 991.98px) { .drawer-md.drawer-left.show { left: 0; visibility: visible; } +} +@media (max-width: 991.98px) { .drawer-md.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; @@ -29865,35 +29881,35 @@ body.drawer-ease { @media (max-width: 767.98px) { .drawer-sm { display: block; - transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; z-index: 1030; position: fixed; height: 100vh; top: 0; } -} -@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { - .drawer-sm { - transition: none; - } -} -@media (max-width: 767.98px) { .drawer-sm.not-initialized { display: none; } -} -@media (max-width: 767.98px) { .drawer-sm.drawer-right { + transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease; width: 315px; max-width: 315px; right: calc(-315px + -10px); visibility: hidden; } +} +@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { + .drawer-sm.drawer-right { + transition: none; + } +} +@media (max-width: 767.98px) { .drawer-sm.drawer-right.show { right: 0; visibility: visible; } +} +@media (max-width: 767.98px) { .drawer-sm.drawer-right .drawertoggle { margin-left: auto; margin-right: 5px; @@ -29901,15 +29917,25 @@ body.drawer-ease { } @media (max-width: 767.98px) { .drawer-sm.drawer-left { + transition: left 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; width: 285px; max-width: 285px; left: calc(-285px + -10px); visibility: hidden; } +} +@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { + .drawer-sm.drawer-left { + transition: none; + } +} +@media (max-width: 767.98px) { .drawer-sm.drawer-left.show { left: 0; visibility: visible; } +} +@media (max-width: 767.98px) { .drawer-sm.drawer-left .drawertoggle { margin-right: auto; margin-left: 5px; @@ -35361,7 +35387,7 @@ p.arrow_button { } .path-grade-report-grader .gradeparent tr.heading { position: sticky; - top: 0; + top: 50px; z-index: 4; } .path-grade-report-grader .gradeparent tr.userrow th { @@ -36523,9 +36549,6 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp #page.drawers .main-inner { margin-top: 1.5rem; } - #page.drawers .drawer-right-toggle { - margin-right: 0.7rem; - } } @media (min-width: 768px) { #page.drawers { @@ -36555,7 +36578,6 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp position: relative; overflow-y: visible; transition: 0.2s; - height: calc(100vh - 50px); left: 0; right: 0; } @@ -36590,7 +36612,7 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp } @media (min-width: 992px) { #page.drawers.hasstickyfooter { - height: calc(100vh - 50px - max(96px, 0.9375rem * 3)); + margin-bottom: max(96px, 0.9375rem * 3); } } .drawercontrolbuttons {