define( [ 'de_epages/guidedtour/js/hopscotch', ], function(hopscotch){ /** * More convenient form for the help center link in the last step of the guided tour. * * @param { string } [link] the url the user jumps to, when clicking the CTA button * * @example * ["goToHelpCenter","{ GuidedTourHelpLink }"] * * { * title : "{ Congratulations }", * content : "{ CongratulationsContent }", * target : ".ContentList", * showCTAButton : true, * ctaLabel : "{ openHelpCenterBtn }", * onCTA : ["goToHelpCenter","{ GuidedTourHelpLink }"] * } */ hopscotch.registerHelper('goToHelpCenter',function(link){ window.open(link); hopscotch.endTour(); }); /** * Lets you target multiple elements, which are then highlighted together. * * This is achieved by creating a new element as bounding rectangle of all the given elements. * This means, that the elements need to be "connected" or you will have a lot of space, * which will be highlighted for no reason! * * @param { string } [selector] css selector for the DOM elements to be selected * * @returns { Element } A new DOM element, which represents the bounding rectangle of the the input elements * * @example * The helper is already required in the MBOGuidedTours/Tempaltes/MBO/GuidedTours.html as "h". * So you have to return the target from an anonymous function like following: * * function(){ return h.multiSelect( <css-selector> ) } * or * ()=>h.multiSelect(<css-selector>) // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions * * { * title : "{ Settings }", * content : "{ SettingsContent }", * target : function(){ return h.multiSelect( <css-selector> ) }, * placement : "right", * } */ function multiSelect(selector){ var MULTIELEMENTCLASS = "multiElement"; var DATASET = "guidedtourelements"; // check, if the element container has already been created and attached to the DOM // if yes, return it instead of recalculating everything var el = document.querySelector("."+MULTIELEMENTCLASS+"[data-"+DATASET+"='"+selector+"']"); if (el){ return el; } // the list of the "real" elements var sourceElements = document.querySelectorAll(selector); if (!sourceElements.length){ return null; } el = createMultiboundingRect(sourceElements); window.addEventListener("resize",updateMultiBoundingRect); return el; function updateMultiBoundingRect(){ var dim = findMultiBoundingRectDimensions(sourceElements); setMultiBoundingRectDimensions(el,dim); } function createMultiboundingRect(els){ var newEl = document.createElement("div"); //newEl.classList.add("rect"); var dim = findMultiBoundingRectDimensions(els); setMultiBoundingRectDimensions(newEl,dim); newEl.style.position = "absolute"; // setting attributes // (relies on having access to the scoped variables, so do not move this function!) newEl.classList.add(MULTIELEMENTCLASS); newEl.dataset[DATASET] = selector; document.body.appendChild(newEl); return newEl; } function setMultiBoundingRectDimensions(el,dim){ el.style.top = dim.top +"px"; el.style.left = dim.left +"px"; el.style.width = dim.width +"px"; el.style.height = dim.height +"px"; } function findMultiBoundingRectDimensions(els){ var dim = {top:null,left:null,right:null,bottom:null} for (var i = 0; i < els.length;i++){ var bound = els[i].getBoundingClientRect(); dim.top = (!dim.top || bound.top < dim.top)?bound.top:dim.top; dim.left = (!dim.left || bound.left < dim.left)?bound.left:dim.left; dim.right = (!dim.right || bound.right > dim.right)?bound.right:dim.right; dim.bottom = (!dim.bottom || bound.bottom > dim.bottom)?bound.bottom:dim.bottom; dim.width = dim.right - dim.left; dim.height = dim.bottom - dim.top; } return dim; } }; return { multiSelect : multiSelect } } );