Issue #3051766 by bnjmnm, alexpott, Oleksiy, finnsky, zrpnr, jungle, Wim Leers, vacho, anmolgoyal74, lauriii, tim.plunkett, rachel_norfolk, andypost, catch, Gábor Hojtsy, nod_, fubarhouse: Deprecate and replace jQuery Joyride (for tours)
(cherry picked from commit 9630f296b7)
merge-requests/686/head
catch
parent
ce9a79e647
commit
202aa37f38
|
|
@ -19,6 +19,7 @@
|
|||
"Backbone": true,
|
||||
"Modernizr": true,
|
||||
"Popper": true,
|
||||
"Shepherd": true,
|
||||
"Sortable": true,
|
||||
"once": true,
|
||||
"CKEDITOR": true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
/*! shepherd.js 8.3.1 */
|
||||
|
||||
'use strict';(function(G,ca){"object"===typeof exports&&"undefined"!==typeof module?module.exports=ca():"function"===typeof define&&define.amd?define(ca):(G="undefined"!==typeof globalThis?globalThis:G||self,G.Shepherd=ca())})(this,function(){function G(a,b){return!1!==b.clone&&b.isMergeableObject(a)?V(Array.isArray(a)?[]:{},a,b):a}function ca(a,b,c){return a.concat(b).map(function(a){return G(a,c)})}function tb(a){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(a).filter(function(b){return a.propertyIsEnumerable(b)}):
|
||||
[]}function Ia(a){return Object.keys(a).concat(tb(a))}function Ja(a,b){try{return b in a}catch(c){return!1}}function ub(a,b,c){var d={};c.isMergeableObject(a)&&Ia(a).forEach(function(b){d[b]=G(a[b],c)});Ia(b).forEach(function(e){if(!Ja(a,e)||Object.hasOwnProperty.call(a,e)&&Object.propertyIsEnumerable.call(a,e))if(Ja(a,e)&&c.isMergeableObject(b[e])){if(c.customMerge){var f=c.customMerge(e);f="function"===typeof f?f:V}else f=V;d[e]=f(a[e],b[e],c)}else d[e]=G(b[e],c)});return d}function V(a,b,c){c=
|
||||
c||{};c.arrayMerge=c.arrayMerge||ca;c.isMergeableObject=c.isMergeableObject||vb;c.cloneUnlessOtherwiseSpecified=G;var d=Array.isArray(b),e=Array.isArray(a);return d!==e?G(b,c):d?c.arrayMerge(a,b,c):ub(a,b,c)}function W(a){return"function"===typeof a}function da(a){return"string"===typeof a}function Ka(a){let b=Object.getOwnPropertyNames(a.constructor.prototype);for(let c=0;c<b.length;c++){let d=b[c],e=a[d];"constructor"!==d&&"function"===typeof e&&(a[d]=e.bind(a))}return a}function wb(a,b){return c=>
|
||||
{if(b.isOpen()){let d=b.el&&c.currentTarget===b.el;(void 0!==a&&c.currentTarget.matches(a)||d)&&b.tour.next()}}}function xb(a){let {event:b,selector:c}=a.options.advanceOn||{};if(b){let d=wb(c,a),e;try{e=document.querySelector(c)}catch(f){}if(void 0===c||e)e?(e.addEventListener(b,d),a.on("destroy",()=>e.removeEventListener(b,d))):(document.body.addEventListener(b,d,!0),a.on("destroy",()=>document.body.removeEventListener(b,d,!0)));else return console.error(`No element was found for the selector supplied to advanceOn: ${c}`)}else return console.error("advanceOn was defined, but no event name was passed.")}
|
||||
function B(a){return a?(a.nodeName||"").toLowerCase():null}function z(a){return null==a?window:"[object Window]"!==a.toString()?(a=a.ownerDocument)?a.defaultView||window:window:a}function ea(a){var b=z(a).Element;return a instanceof b||a instanceof Element}function y(a){var b=z(a).HTMLElement;return a instanceof b||a instanceof HTMLElement}function La(a){if("undefined"===typeof ShadowRoot)return!1;var b=z(a).ShadowRoot;return a instanceof b||a instanceof ShadowRoot}function F(a){return a.split("-")[0]}
|
||||
function X(a){a=a.getBoundingClientRect();return{width:a.width,height:a.height,top:a.top,right:a.right,bottom:a.bottom,left:a.left,x:a.left,y:a.top}}function ta(a){var b=X(a),c=a.offsetWidth,d=a.offsetHeight;1>=Math.abs(b.width-c)&&(c=b.width);1>=Math.abs(b.height-d)&&(d=b.height);return{x:a.offsetLeft,y:a.offsetTop,width:c,height:d}}function Ma(a,b){var c=b.getRootNode&&b.getRootNode();if(a.contains(b))return!0;if(c&&La(c)){do{if(b&&a.isSameNode(b))return!0;b=b.parentNode||b.host}while(b)}return!1}
|
||||
function H(a){return z(a).getComputedStyle(a)}function L(a){return((ea(a)?a.ownerDocument:a.document)||window.document).documentElement}function la(a){return"html"===B(a)?a:a.assignedSlot||a.parentNode||(La(a)?a.host:null)||L(a)}function Na(a){return y(a)&&"fixed"!==H(a).position?a.offsetParent:null}function fa(a){for(var b=z(a),c=Na(a);c&&0<=["table","td","th"].indexOf(B(c))&&"static"===H(c).position;)c=Na(c);if(c&&("html"===B(c)||"body"===B(c)&&"static"===H(c).position))return b;if(!c)a:{c=-1!==
|
||||
navigator.userAgent.toLowerCase().indexOf("firefox");if(-1===navigator.userAgent.indexOf("Trident")||!y(a)||"fixed"!==H(a).position)for(a=la(a);y(a)&&0>["html","body"].indexOf(B(a));){var d=H(a);if("none"!==d.transform||"none"!==d.perspective||"paint"===d.contain||-1!==["transform","perspective"].indexOf(d.willChange)||c&&"filter"===d.willChange||c&&d.filter&&"none"!==d.filter){c=a;break a}else a=a.parentNode}c=null}return c||b}function ua(a){return 0<=["top","bottom"].indexOf(a)?"x":"y"}function Oa(a){return Object.assign({},
|
||||
{top:0,right:0,bottom:0,left:0},a)}function Pa(a,b){return b.reduce(function(b,d){b[d]=a;return b},{})}function Qa(a){var b,c=a.popper,d=a.popperRect,e=a.placement,f=a.offsets,h=a.position,k=a.gpuAcceleration,m=a.adaptive;a=a.roundOffsets;if(!0===a){a=f.y;var g=window.devicePixelRatio||1;a={x:ma(ma(f.x*g)/g)||0,y:ma(ma(a*g)/g)||0}}else a="function"===typeof a?a(f):f;g=a;a=g.x;a=void 0===a?0:a;g=g.y;g=void 0===g?0:g;var l=f.hasOwnProperty("x");f=f.hasOwnProperty("y");var p="left",t="top",A=window;
|
||||
if(m){var C=fa(c),u="clientHeight",D="clientWidth";C===z(c)&&(C=L(c),"static"!==H(C).position&&(u="scrollHeight",D="scrollWidth"));"top"===e&&(t="bottom",g-=C[u]-d.height,g*=k?1:-1);"left"===e&&(p="right",a-=C[D]-d.width,a*=k?1:-1)}c=Object.assign({position:h},m&&yb);if(k){var v;return Object.assign({},c,(v={},v[t]=f?"0":"",v[p]=l?"0":"",v.transform=2>(A.devicePixelRatio||1)?"translate("+a+"px, "+g+"px)":"translate3d("+a+"px, "+g+"px, 0)",v))}return Object.assign({},c,(b={},b[t]=f?g+"px":"",b[p]=
|
||||
l?a+"px":"",b.transform="",b))}function na(a){return a.replace(/left|right|bottom|top/g,function(a){return zb[a]})}function Ra(a){return a.replace(/start|end/g,function(a){return Ab[a]})}function va(a){a=z(a);return{scrollLeft:a.pageXOffset,scrollTop:a.pageYOffset}}function wa(a){return X(L(a)).left+va(a).scrollLeft}function xa(a){a=H(a);return/auto|scroll|overlay|hidden/.test(a.overflow+a.overflowY+a.overflowX)}function Sa(a){return 0<=["html","body","#document"].indexOf(B(a))?a.ownerDocument.body:
|
||||
y(a)&&xa(a)?a:Sa(la(a))}function ha(a,b){var c;void 0===b&&(b=[]);var d=Sa(a);a=d===(null==(c=a.ownerDocument)?void 0:c.body);c=z(d);d=a?[c].concat(c.visualViewport||[],xa(d)?d:[]):d;b=b.concat(d);return a?b:b.concat(ha(la(d)))}function ya(a){return Object.assign({},a,{left:a.x,top:a.y,right:a.x+a.width,bottom:a.y+a.height})}function Ta(a,b){if("viewport"===b){b=z(a);var c=L(a);b=b.visualViewport;var d=c.clientWidth;c=c.clientHeight;var e=0,f=0;b&&(d=b.width,c=b.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||
|
||||
(e=b.offsetLeft,f=b.offsetTop));a={width:d,height:c,x:e+wa(a),y:f};a=ya(a)}else y(b)?(a=X(b),a.top+=b.clientTop,a.left+=b.clientLeft,a.bottom=a.top+b.clientHeight,a.right=a.left+b.clientWidth,a.width=b.clientWidth,a.height=b.clientHeight,a.x=a.left,a.y=a.top):(f=L(a),a=L(f),d=va(f),b=null==(c=f.ownerDocument)?void 0:c.body,c=E(a.scrollWidth,a.clientWidth,b?b.scrollWidth:0,b?b.clientWidth:0),e=E(a.scrollHeight,a.clientHeight,b?b.scrollHeight:0,b?b.clientHeight:0),f=-d.scrollLeft+wa(f),d=-d.scrollTop,
|
||||
"rtl"===H(b||a).direction&&(f+=E(a.clientWidth,b?b.clientWidth:0)-c),a=ya({width:c,height:e,x:f,y:d}));return a}function Bb(a){var b=ha(la(a)),c=0<=["absolute","fixed"].indexOf(H(a).position)&&y(a)?fa(a):a;return ea(c)?b.filter(function(a){return ea(a)&&Ma(a,c)&&"body"!==B(a)}):[]}function Cb(a,b,c){b="clippingParents"===b?Bb(a):[].concat(b);c=[].concat(b,[c]);c=c.reduce(function(b,c){c=Ta(a,c);b.top=E(c.top,b.top);b.right=M(c.right,b.right);b.bottom=M(c.bottom,b.bottom);b.left=E(c.left,b.left);return b},
|
||||
Ta(a,c[0]));c.width=c.right-c.left;c.height=c.bottom-c.top;c.x=c.left;c.y=c.top;return c}function Ua(a){var b=a.reference,c=a.element,d=(a=a.placement)?F(a):null;a=a?a.split("-")[1]:null;var e=b.x+b.width/2-c.width/2,f=b.y+b.height/2-c.height/2;switch(d){case "top":e={x:e,y:b.y-c.height};break;case "bottom":e={x:e,y:b.y+b.height};break;case "right":e={x:b.x+b.width,y:f};break;case "left":e={x:b.x-c.width,y:f};break;default:e={x:b.x,y:b.y}}d=d?ua(d):null;if(null!=d)switch(f="y"===d?"height":"width",
|
||||
a){case "start":e[d]-=b[f]/2-c[f]/2;break;case "end":e[d]+=b[f]/2-c[f]/2}return e}function ia(a,b){void 0===b&&(b={});var c=b;b=c.placement;b=void 0===b?a.placement:b;var d=c.boundary,e=void 0===d?"clippingParents":d;d=c.rootBoundary;var f=void 0===d?"viewport":d;d=c.elementContext;d=void 0===d?"popper":d;var h=c.altBoundary,k=void 0===h?!1:h;c=c.padding;c=void 0===c?0:c;c=Oa("number"!==typeof c?c:Pa(c,ja));var m=a.elements.reference;h=a.rects.popper;k=a.elements[k?"popper"===d?"reference":"popper":
|
||||
d];e=Cb(ea(k)?k:k.contextElement||L(a.elements.popper),e,f);f=X(m);k=Ua({reference:f,element:h,strategy:"absolute",placement:b});h=ya(Object.assign({},h,k));f="popper"===d?h:f;var g={top:e.top-f.top+c.top,bottom:f.bottom-e.bottom+c.bottom,left:e.left-f.left+c.left,right:f.right-e.right+c.right};a=a.modifiersData.offset;if("popper"===d&&a){var l=a[b];Object.keys(g).forEach(function(a){var b=0<=["right","bottom"].indexOf(a)?1:-1,c=0<=["top","bottom"].indexOf(a)?"y":"x";g[a]+=l[c]*b})}return g}function Db(a,
|
||||
b){void 0===b&&(b={});var c=b.boundary,d=b.rootBoundary,e=b.padding,f=b.flipVariations,h=b.allowedAutoPlacements,k=void 0===h?Va:h,m=b.placement.split("-")[1];b=m?f?Wa:Wa.filter(function(a){return a.split("-")[1]===m}):ja;f=b.filter(function(a){return 0<=k.indexOf(a)});0===f.length&&(f=b);var g=f.reduce(function(b,f){b[f]=ia(a,{placement:f,boundary:c,rootBoundary:d,padding:e})[F(f)];return b},{});return Object.keys(g).sort(function(a,b){return g[a]-g[b]})}function Eb(a){if("auto"===F(a))return[];
|
||||
var b=na(a);return[Ra(a),b,Ra(b)]}function Xa(a,b,c){void 0===c&&(c={x:0,y:0});return{top:a.top-b.height-c.y,right:a.right-b.width+c.x,bottom:a.bottom-b.height+c.y,left:a.left-b.width-c.x}}function Ya(a){return["top","right","bottom","left"].some(function(b){return 0<=a[b]})}function Fb(a,b,c){void 0===c&&(c=!1);var d=L(b);a=X(a);var e=y(b),f={scrollLeft:0,scrollTop:0},h={x:0,y:0};if(e||!e&&!c){if("body"!==B(b)||xa(d))f=b!==z(b)&&y(b)?{scrollLeft:b.scrollLeft,scrollTop:b.scrollTop}:va(b);y(b)?(h=
|
||||
X(b),h.x+=b.clientLeft,h.y+=b.clientTop):d&&(h.x=wa(d))}return{x:a.left+f.scrollLeft-h.x,y:a.top+f.scrollTop-h.y,width:a.width,height:a.height}}function Gb(a){function b(a){d.add(a.name);[].concat(a.requires||[],a.requiresIfExists||[]).forEach(function(a){d.has(a)||(a=c.get(a))&&b(a)});e.push(a)}var c=new Map,d=new Set,e=[];a.forEach(function(a){c.set(a.name,a)});a.forEach(function(a){d.has(a.name)||b(a)});return e}function Hb(a){var b=Gb(a);return Ib.reduce(function(a,d){return a.concat(b.filter(function(a){return a.phase===
|
||||
d}))},[])}function Jb(a){var b;return function(){b||(b=new Promise(function(c){Promise.resolve().then(function(){b=void 0;c(a())})}));return b}}function Kb(a){var b=a.reduce(function(a,b){var c=a[b.name];a[b.name]=c?Object.assign({},c,b,{options:Object.assign({},c.options,b.options),data:Object.assign({},c.data,b.data)}):b;return a},{});return Object.keys(b).map(function(a){return b[a]})}function Za(){for(var a=arguments.length,b=Array(a),c=0;c<a;c++)b[c]=arguments[c];return!b.some(function(a){return!(a&&
|
||||
"function"===typeof a.getBoundingClientRect)})}function za(){za=Object.assign||function(a){for(var b=1;b<arguments.length;b++){var c=arguments[b],d;for(d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=c[d])}return a};return za.apply(this,arguments)}function Lb(){return[{name:"applyStyles",fn({state:a}){Object.keys(a.elements).forEach(b=>{if("popper"===b){var c=a.attributes[b]||{},d=a.elements[b];Object.assign(d.style,{position:"fixed",left:"50%",top:"50%",transform:"translate(-50%, -50%)"});
|
||||
Object.keys(c).forEach(a=>{let b=c[a];!1===b?d.removeAttribute(a):d.setAttribute(a,!0===b?"":b)})}})}},{name:"computeStyles",options:{adaptive:!1}}]}function Mb(a){let b=Lb(),c={placement:"top",strategy:"fixed",modifiers:[{name:"focusAfterRender",enabled:!0,phase:"afterWrite",fn(){setTimeout(()=>{a.el&&a.el.focus()},300)}}]};return c=za({},c,{modifiers:Array.from(new Set([...c.modifiers,...b]))})}function $a(a){return da(a)&&""!==a?"-"!==a.charAt(a.length-1)?`${a}-`:a:""}function Aa(a){a=a.options.attachTo||
|
||||
{};let b=Object.assign({},a);if(da(a.element)){try{b.element=document.querySelector(a.element)}catch(c){}b.element||console.error(`The element for this Shepherd step was not found ${a.element}`)}return b}function Ba(){let a=Date.now();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,b=>{let c=(a+16*Math.random())%16|0;a=Math.floor(a/16);return("x"==b?c:c&3|8).toString(16)})}function Nb(a,b){let c={modifiers:[{name:"preventOverflow",options:{altAxis:!0,tether:!1}},{name:"focusAfterRender",
|
||||
enabled:!0,phase:"afterWrite",fn(){setTimeout(()=>{b.el&&b.el.focus()},300)}}],strategy:"absolute"};b.isCentered()?c=Mb(b):c.placement=a.on;(a=b.tour&&b.tour.options&&b.tour.options.defaultStepOptions)&&(c=ab(a,c));return c=ab(b.options,c)}function ab(a,b){if(a.popperOptions){let c=Object.assign({},b,a.popperOptions);if(a.popperOptions.modifiers&&0<a.popperOptions.modifiers.length){let d=a.popperOptions.modifiers.map(a=>a.name);b=b.modifiers.filter(a=>!d.includes(a.name));c.modifiers=Array.from(new Set([...b,
|
||||
...a.popperOptions.modifiers]))}return c}return b}function x(){}function Ob(a,b){for(let c in b)a[c]=b[c];return a}function Y(a){return a()}function bb(a){return"function"===typeof a}function I(a,b){return a!=a?b==b:a!==b||a&&"object"===typeof a||"function"===typeof a}function w(a){a.parentNode.removeChild(a)}function cb(a){return document.createElementNS("http://www.w3.org/2000/svg",a)}function oa(a,b,c,d){a.addEventListener(b,c,d);return()=>a.removeEventListener(b,c,d)}function q(a,b,c){null==c?
|
||||
a.removeAttribute(b):a.getAttribute(b)!==c&&a.setAttribute(b,c)}function db(a,b){let c=Object.getOwnPropertyDescriptors(a.__proto__);for(let d in b)null==b[d]?a.removeAttribute(d):"style"===d?a.style.cssText=b[d]:"__value"===d?a.value=a[d]=b[d]:c[d]&&c[d].set?a[d]=b[d]:q(a,d,b[d])}function Z(a,b,c){a.classList[c?"add":"remove"](b)}function pa(){if(!P)throw Error("Function called outside component initialization");return P}function Ca(a){qa.push(a)}function eb(){if(!Da){Da=!0;do{for(var a=0;a<ka.length;a+=
|
||||
1){var b=ka[a];P=b;b=b.$$;if(null!==b.fragment){b.update();b.before_update.forEach(Y);let a=b.dirty;b.dirty=[-1];b.fragment&&b.fragment.p(b.ctx,a);b.after_update.forEach(Ca)}}P=null;for(ka.length=0;aa.length;)aa.pop()();for(a=0;a<qa.length;a+=1)b=qa[a],Ea.has(b)||(Ea.add(b),b());qa.length=0}while(ka.length);for(;fb.length;)fb.pop()();Da=Fa=!1;Ea.clear()}}function Q(){R={r:0,c:[],p:R}}function S(){R.r||R.c.forEach(Y);R=R.p}function n(a,b){a&&a.i&&(ra.delete(a),a.i(b))}function r(a,b,c,d){a&&a.o&&!ra.has(a)&&
|
||||
(ra.add(a),R.c.push(()=>{ra.delete(a);d&&(c&&a.d(1),d())}),a.o(b))}function T(a){a&&a.c()}function N(a,b,c,d){let {fragment:e,on_mount:f,on_destroy:h,after_update:k}=a.$$;e&&e.m(b,c);d||Ca(()=>{let b=f.map(Y).filter(bb);h?h.push(...b):b.forEach(Y);a.$$.on_mount=[]});k.forEach(Ca)}function O(a,b){a=a.$$;null!==a.fragment&&(a.on_destroy.forEach(Y),a.fragment&&a.fragment.d(b),a.on_destroy=a.fragment=null,a.ctx=[])}function J(a,b,c,d,e,f,h=[-1]){let k=P;P=a;let m=a.$$={fragment:null,ctx:null,props:f,
|
||||
update:x,not_equal:e,bound:Object.create(null),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(k?k.$$.context:b.context||[]),callbacks:Object.create(null),dirty:h,skip_bound:!1},g=!1;m.ctx=c?c(a,b.props||{},(b,c,...d)=>{d=d.length?d[0]:c;if(m.ctx&&e(m.ctx[b],m.ctx[b]=d)){if(!m.skip_bound&&m.bound[b])m.bound[b](d);g&&(-1===a.$$.dirty[0]&&(ka.push(a),Fa||(Fa=!0,Pb.then(eb)),a.$$.dirty.fill(0)),a.$$.dirty[b/31|0]|=1<<b%31)}return c}):[];m.update();g=!0;m.before_update.forEach(Y);
|
||||
m.fragment=d?d(m.ctx):!1;b.target&&(b.hydrate?(c=Array.from(b.target.childNodes),m.fragment&&m.fragment.l(c),c.forEach(w)):m.fragment&&m.fragment.c(),b.intro&&n(a.$$.fragment),N(a,b.target,b.anchor,b.customElement),eb());P=k}function Qb(a){let b,c,d,e,f;return{c(){b=document.createElement("button");q(b,"aria-label",c=a[3]?a[3]:null);q(b,"class",d=`${a[1]||""} shepherd-button ${a[4]?"shepherd-button-secondary":""}`);b.disabled=a[2];q(b,"tabindex","0")},m(c,d){c.insertBefore(b,d||null);b.innerHTML=
|
||||
a[5];e||(f=oa(b,"click",function(){bb(a[0])&&a[0].apply(this,arguments)}),e=!0)},p(e,[f]){a=e;f&32&&(b.innerHTML=a[5]);f&8&&c!==(c=a[3]?a[3]:null)&&q(b,"aria-label",c);f&18&&d!==(d=`${a[1]||""} shepherd-button ${a[4]?"shepherd-button-secondary":""}`)&&q(b,"class",d);f&4&&(b.disabled=a[2])},i:x,o:x,d(a){a&&w(b);e=!1;f()}}}function Rb(a,b,c){let {config:d}=b,{step:e}=b,f,h,k,m,g,l;a.$$set=a=>{"config"in a&&c(6,d=a.config);"step"in a&&c(7,e=a.step)};a.$$.update=()=>{if(a.$$.dirty&192){c(0,f=d.action?
|
||||
d.action.bind(e.tour):null);c(1,h=d.classes);if(d.disabled){var b=d.disabled;b=W(b)?b.call(e):b}else b=!1;c(2,k=b);c(3,m=d.label);c(4,g=d.secondary);c(5,l=d.text)}};return[f,h,k,m,g,l,d,e]}function gb(a,b,c){a=a.slice();a[2]=b[c];return a}function hb(a){let b,c,d=a[1],e=[];for(let b=0;b<d.length;b+=1)e[b]=ib(gb(a,d,b));let f=a=>r(e[a],1,1,()=>{e[a]=null});return{c(){for(let a=0;a<e.length;a+=1)e[a].c();b=document.createTextNode("")},m(a,d){for(let b=0;b<e.length;b+=1)e[b].m(a,d);a.insertBefore(b,
|
||||
d||null);c=!0},p(a,c){if(c&3){d=a[1];let h;for(h=0;h<d.length;h+=1){let f=gb(a,d,h);e[h]?(e[h].p(f,c),n(e[h],1)):(e[h]=ib(f),e[h].c(),n(e[h],1),e[h].m(b.parentNode,b))}Q();for(h=d.length;h<e.length;h+=1)f(h);S()}},i(a){if(!c){for(a=0;a<d.length;a+=1)n(e[a]);c=!0}},o(a){e=e.filter(Boolean);for(a=0;a<e.length;a+=1)r(e[a]);c=!1},d(a){var c=e;for(let b=0;b<c.length;b+=1)c[b]&&c[b].d(a);a&&w(b)}}}function ib(a){let b,c;b=new Sb({props:{config:a[2],step:a[0]}});return{c(){T(b.$$.fragment)},m(a,e){N(b,a,
|
||||
e);c=!0},p(a,c){let d={};c&2&&(d.config=a[2]);c&1&&(d.step=a[0]);b.$set(d)},i(a){c||(n(b.$$.fragment,a),c=!0)},o(a){r(b.$$.fragment,a);c=!1},d(a){O(b,a)}}}function Tb(a){let b,c,d=a[1]&&hb(a);return{c(){b=document.createElement("footer");d&&d.c();q(b,"class","shepherd-footer")},m(a,f){a.insertBefore(b,f||null);d&&d.m(b,null);c=!0},p(a,[c]){a[1]?d?(d.p(a,c),c&2&&n(d,1)):(d=hb(a),d.c(),n(d,1),d.m(b,null)):d&&(Q(),r(d,1,1,()=>{d=null}),S())},i(a){c||(n(d),c=!0)},o(a){r(d);c=!1},d(a){a&&w(b);d&&d.d()}}}
|
||||
function Ub(a,b,c){let d,{step:e}=b;a.$$set=a=>{"step"in a&&c(0,e=a.step)};a.$$.update=()=>{a.$$.dirty&1&&c(1,d=e.options.buttons)};return[e,d]}function Vb(a){let b,c,d,e,f;return{c(){b=document.createElement("button");c=document.createElement("span");c.textContent="\u00d7";q(c,"aria-hidden","true");q(b,"aria-label",d=a[0].label?a[0].label:"Close Tour");q(b,"class","shepherd-cancel-icon");q(b,"type","button")},m(d,k){d.insertBefore(b,k||null);b.appendChild(c);e||(f=oa(b,"click",a[1]),e=!0)},p(a,[c]){c&
|
||||
1&&d!==(d=a[0].label?a[0].label:"Close Tour")&&q(b,"aria-label",d)},i:x,o:x,d(a){a&&w(b);e=!1;f()}}}function Wb(a,b,c){let {cancelIcon:d}=b,{step:e}=b;a.$$set=a=>{"cancelIcon"in a&&c(0,d=a.cancelIcon);"step"in a&&c(2,e=a.step)};return[d,a=>{a.preventDefault();e.cancel()},e]}function Xb(a){let b;return{c(){b=document.createElement("h3");q(b,"id",a[1]);q(b,"class","shepherd-title")},m(c,d){c.insertBefore(b,d||null);a[3](b)},p(a,[d]){d&2&&q(b,"id",a[1])},i:x,o:x,d(c){c&&w(b);a[3](null)}}}function Yb(a,
|
||||
b,c){let {labelId:d}=b,{element:e}=b,{title:f}=b;pa().$$.after_update.push(()=>{W(f)&&c(2,f=f());c(0,e.innerHTML=f,e)});a.$$set=a=>{"labelId"in a&&c(1,d=a.labelId);"element"in a&&c(0,e=a.element);"title"in a&&c(2,f=a.title)};return[e,d,f,function(a){aa[a?"unshift":"push"](()=>{e=a;c(0,e)})}]}function jb(a){let b,c;b=new Zb({props:{labelId:a[0],title:a[2]}});return{c(){T(b.$$.fragment)},m(a,e){N(b,a,e);c=!0},p(a,c){let d={};c&1&&(d.labelId=a[0]);c&4&&(d.title=a[2]);b.$set(d)},i(a){c||(n(b.$$.fragment,
|
||||
a),c=!0)},o(a){r(b.$$.fragment,a);c=!1},d(a){O(b,a)}}}function kb(a){let b,c;b=new $b({props:{cancelIcon:a[3],step:a[1]}});return{c(){T(b.$$.fragment)},m(a,e){N(b,a,e);c=!0},p(a,c){let d={};c&8&&(d.cancelIcon=a[3]);c&2&&(d.step=a[1]);b.$set(d)},i(a){c||(n(b.$$.fragment,a),c=!0)},o(a){r(b.$$.fragment,a);c=!1},d(a){O(b,a)}}}function ac(a){let b,c,d,e=a[2]&&jb(a),f=a[3]&&a[3].enabled&&kb(a);return{c(){b=document.createElement("header");e&&e.c();c=document.createTextNode(" ");f&&f.c();q(b,"class","shepherd-header")},
|
||||
m(a,k){a.insertBefore(b,k||null);e&&e.m(b,null);b.appendChild(c);f&&f.m(b,null);d=!0},p(a,[d]){a[2]?e?(e.p(a,d),d&4&&n(e,1)):(e=jb(a),e.c(),n(e,1),e.m(b,c)):e&&(Q(),r(e,1,1,()=>{e=null}),S());a[3]&&a[3].enabled?f?(f.p(a,d),d&8&&n(f,1)):(f=kb(a),f.c(),n(f,1),f.m(b,null)):f&&(Q(),r(f,1,1,()=>{f=null}),S())},i(a){d||(n(e),n(f),d=!0)},o(a){r(e);r(f);d=!1},d(a){a&&w(b);e&&e.d();f&&f.d()}}}function bc(a,b,c){let {labelId:d}=b,{step:e}=b,f,h;a.$$set=a=>{"labelId"in a&&c(0,d=a.labelId);"step"in a&&c(1,e=
|
||||
a.step)};a.$$.update=()=>{a.$$.dirty&2&&(c(2,f=e.options.title),c(3,h=e.options.cancelIcon))};return[d,e,f,h]}function cc(a){let b;return{c(){b=document.createElement("div");q(b,"class","shepherd-text");q(b,"id",a[1])},m(c,d){c.insertBefore(b,d||null);a[3](b)},p(a,[d]){d&2&&q(b,"id",a[1])},i:x,o:x,d(c){c&&w(b);a[3](null)}}}function dc(a,b,c){let {descriptionId:d}=b,{element:e}=b,{step:f}=b;pa().$$.after_update.push(()=>{let {text:a}=f.options;W(a)&&(a=a.call(f));a instanceof HTMLElement?e.appendChild(a):
|
||||
c(0,e.innerHTML=a,e)});a.$$set=a=>{"descriptionId"in a&&c(1,d=a.descriptionId);"element"in a&&c(0,e=a.element);"step"in a&&c(2,f=a.step)};return[e,d,f,function(a){aa[a?"unshift":"push"](()=>{e=a;c(0,e)})}]}function lb(a){let b,c;b=new ec({props:{labelId:a[1],step:a[2]}});return{c(){T(b.$$.fragment)},m(a,e){N(b,a,e);c=!0},p(a,c){let d={};c&2&&(d.labelId=a[1]);c&4&&(d.step=a[2]);b.$set(d)},i(a){c||(n(b.$$.fragment,a),c=!0)},o(a){r(b.$$.fragment,a);c=!1},d(a){O(b,a)}}}function mb(a){let b,c;b=new fc({props:{descriptionId:a[0],
|
||||
step:a[2]}});return{c(){T(b.$$.fragment)},m(a,e){N(b,a,e);c=!0},p(a,c){let d={};c&1&&(d.descriptionId=a[0]);c&4&&(d.step=a[2]);b.$set(d)},i(a){c||(n(b.$$.fragment,a),c=!0)},o(a){r(b.$$.fragment,a);c=!1},d(a){O(b,a)}}}function nb(a){let b,c;b=new gc({props:{step:a[2]}});return{c(){T(b.$$.fragment)},m(a,e){N(b,a,e);c=!0},p(a,c){let d={};c&4&&(d.step=a[2]);b.$set(d)},i(a){c||(n(b.$$.fragment,a),c=!0)},o(a){r(b.$$.fragment,a);c=!1},d(a){O(b,a)}}}function hc(a){let b,c=void 0!==a[2].options.title||a[2].options.cancelIcon&&
|
||||
a[2].options.cancelIcon.enabled,d,e=void 0!==a[2].options.text,f,h=Array.isArray(a[2].options.buttons)&&a[2].options.buttons.length,k,m=c&&lb(a),g=e&&mb(a),l=h&&nb(a);return{c(){b=document.createElement("div");m&&m.c();d=document.createTextNode(" ");g&&g.c();f=document.createTextNode(" ");l&&l.c();q(b,"class","shepherd-content")},m(a,c){a.insertBefore(b,c||null);m&&m.m(b,null);b.appendChild(d);g&&g.m(b,null);b.appendChild(f);l&&l.m(b,null);k=!0},p(a,[k]){k&4&&(c=void 0!==a[2].options.title||a[2].options.cancelIcon&&
|
||||
a[2].options.cancelIcon.enabled);c?m?(m.p(a,k),k&4&&n(m,1)):(m=lb(a),m.c(),n(m,1),m.m(b,d)):m&&(Q(),r(m,1,1,()=>{m=null}),S());k&4&&(e=void 0!==a[2].options.text);e?g?(g.p(a,k),k&4&&n(g,1)):(g=mb(a),g.c(),n(g,1),g.m(b,f)):g&&(Q(),r(g,1,1,()=>{g=null}),S());k&4&&(h=Array.isArray(a[2].options.buttons)&&a[2].options.buttons.length);h?l?(l.p(a,k),k&4&&n(l,1)):(l=nb(a),l.c(),n(l,1),l.m(b,null)):l&&(Q(),r(l,1,1,()=>{l=null}),S())},i(a){k||(n(m),n(g),n(l),k=!0)},o(a){r(m);r(g);r(l);k=!1},d(a){a&&w(b);m&&
|
||||
m.d();g&&g.d();l&&l.d()}}}function ic(a,b,c){let {descriptionId:d}=b,{labelId:e}=b,{step:f}=b;a.$$set=a=>{"descriptionId"in a&&c(0,d=a.descriptionId);"labelId"in a&&c(1,e=a.labelId);"step"in a&&c(2,f=a.step)};return[d,e,f]}function ob(a){let b;return{c(){b=document.createElement("div");q(b,"class","shepherd-arrow");q(b,"data-popper-arrow","")},m(a,d){a.insertBefore(b,d||null)},d(a){a&&w(b)}}}function jc(a){let b,c,d,e,f,h,k,m,g=a[4].options.arrow&&a[4].options.attachTo&&a[4].options.attachTo.element&&
|
||||
a[4].options.attachTo.on&&ob();d=new kc({props:{descriptionId:a[2],labelId:a[3],step:a[4]}});let l=[{"aria-describedby":e=void 0!==a[4].options.text?a[2]:null},{"aria-labelledby":f=a[4].options.title?a[3]:null},a[1],{role:"dialog"},{tabindex:"0"}],p={};for(let a=0;a<l.length;a+=1)p=Ob(p,l[a]);return{c(){b=document.createElement("div");g&&g.c();c=document.createTextNode(" ");T(d.$$.fragment);db(b,p);Z(b,"shepherd-has-cancel-icon",a[5]);Z(b,"shepherd-has-title",a[6]);Z(b,"shepherd-element",!0)},m(e,
|
||||
f){e.insertBefore(b,f||null);g&&g.m(b,null);b.appendChild(c);N(d,b,null);a[13](b);h=!0;k||(m=oa(b,"keydown",a[7]),k=!0)},p(a,[k]){a[4].options.arrow&&a[4].options.attachTo&&a[4].options.attachTo.element&&a[4].options.attachTo.on?g||(g=ob(),g.c(),g.m(b,c)):g&&(g.d(1),g=null);var m={};k&4&&(m.descriptionId=a[2]);k&8&&(m.labelId=a[3]);k&16&&(m.step=a[4]);d.$set(m);m=b;{k=[(!h||k&20&&e!==(e=void 0!==a[4].options.text?a[2]:null))&&{"aria-describedby":e},(!h||k&24&&f!==(f=a[4].options.title?a[3]:null))&&
|
||||
{"aria-labelledby":f},k&2&&a[1],{role:"dialog"},{tabindex:"0"}];let b={},c={},d={$$scope:1},g=l.length;for(;g--;){let a=l[g],e=k[g];if(e){for(u in a)u in e||(c[u]=1);for(let a in e)d[a]||(b[a]=e[a],d[a]=1);l[g]=e}else for(let b in a)d[b]=1}for(let a in c)a in b||(b[a]=void 0);var u=b}db(m,p=u);Z(b,"shepherd-has-cancel-icon",a[5]);Z(b,"shepherd-has-title",a[6]);Z(b,"shepherd-element",!0)},i(a){h||(n(d.$$.fragment,a),h=!0)},o(a){r(d.$$.fragment,a);h=!1},d(c){c&&w(b);g&&g.d();O(d);a[13](null);k=!1;m()}}}
|
||||
function pb(a){return a.split(" ").filter(a=>!!a.length)}function lc(a,b,c){let {classPrefix:d}=b,{element:e}=b,{descriptionId:f}=b,{firstFocusableElement:h}=b,{focusableElements:k}=b,{labelId:m}=b,{lastFocusableElement:g}=b,{step:l}=b,{dataStepId:p}=b,t,A,C;pa().$$.on_mount.push(()=>{c(1,p={[`data-${d}shepherd-step-id`]:l.id});c(9,k=e.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'));c(8,h=k[0]);
|
||||
c(10,g=k[k.length-1])});pa().$$.after_update.push(()=>{if(C!==l.options.classes){var a=C;da(a)&&(a=pb(a),a.length&&e.classList.remove(...a));a=C=l.options.classes;da(a)&&(a=pb(a),a.length&&e.classList.add(...a))}});a.$$set=a=>{"classPrefix"in a&&c(11,d=a.classPrefix);"element"in a&&c(0,e=a.element);"descriptionId"in a&&c(2,f=a.descriptionId);"firstFocusableElement"in a&&c(8,h=a.firstFocusableElement);"focusableElements"in a&&c(9,k=a.focusableElements);"labelId"in a&&c(3,m=a.labelId);"lastFocusableElement"in
|
||||
a&&c(10,g=a.lastFocusableElement);"step"in a&&c(4,l=a.step);"dataStepId"in a&&c(1,p=a.dataStepId)};a.$$.update=()=>{a.$$.dirty&16&&(c(5,t=l.options&&l.options.cancelIcon&&l.options.cancelIcon.enabled),c(6,A=l.options&&l.options.title))};return[e,p,f,m,l,t,A,a=>{const {tour:b}=l;switch(a.keyCode){case 9:if(0===k.length){a.preventDefault();break}if(a.shiftKey){if(document.activeElement===h||document.activeElement.classList.contains("shepherd-element"))a.preventDefault(),g.focus()}else document.activeElement===
|
||||
g&&(a.preventDefault(),h.focus());break;case 27:b.options.exitOnEsc&&l.cancel();break;case 37:b.options.keyboardNavigation&&b.back();break;case 39:b.options.keyboardNavigation&&b.next()}},h,k,g,d,()=>e,function(a){aa[a?"unshift":"push"](()=>{e=a;c(0,e)})}]}function mc(a){a&&({steps:a}=a,a.forEach(a=>{a.options&&!1===a.options.canClickTarget&&a.options.attachTo&&a.target instanceof HTMLElement&&a.target.classList.remove("shepherd-target-click-disabled")}))}function nc({width:a,height:b,x:c=0,y:d=0,
|
||||
r:e=0}){let {innerWidth:f,innerHeight:h}=window;return`M${f},${h}\
|
||||
H0\
|
||||
V0\
|
||||
H${f}\
|
||||
V${h}\
|
||||
Z\
|
||||
M${c+e},${d}\
|
||||
a${e},${e},0,0,0-${e},${e}\
|
||||
V${b+d-e}\
|
||||
a${e},${e},0,0,0,${e},${e}\
|
||||
H${a+c-e}\
|
||||
a${e},${e},0,0,0,${e}-${e}\
|
||||
V${d+e}\
|
||||
a${e},${e},0,0,0-${e}-${e}\
|
||||
Z`}function oc(a){let b,c,d,e,f;return{c(){b=cb("svg");c=cb("path");q(c,"d",a[2]);q(b,"class",d=`${a[1]?"shepherd-modal-is-visible":""} shepherd-modal-overlay-container`)},m(d,k){d.insertBefore(b,k||null);b.appendChild(c);a[11](b);e||(f=oa(b,"touchmove",a[3]),e=!0)},p(a,[e]){e&4&&q(c,"d",a[2]);e&2&&d!==(d=`${a[1]?"shepherd-modal-is-visible":""} shepherd-modal-overlay-container`)&&q(b,"class",d)},i:x,o:x,d(c){c&&w(b);a[11](null);e=!1;f()}}}function qb(a){if(!a)return null;let b=a instanceof HTMLElement&&
|
||||
window.getComputedStyle(a).overflowY;return"hidden"!==b&&"visible"!==b&&a.scrollHeight>=a.clientHeight?a:qb(a.parentElement)}function pc(a,b,c){function d(){c(4,l={width:0,height:0,x:0,y:0,r:0})}function e(){c(1,p=!1);k()}function f(a=0,b=0,e,f){if(f){var g=f.getBoundingClientRect();var u=g.y||g.top;g=g.bottom||u+g.height;if(e){var h=e.getBoundingClientRect();e=h.y||h.top;h=h.bottom||e+h.height;u=Math.max(u,e);g=Math.min(g,h)}u={y:u,height:Math.max(g-u,0)};let {y:d,height:k}=u,{x:m,width:p,left:A}=
|
||||
f.getBoundingClientRect();c(4,l={width:p+2*a,height:k+2*a,x:(m||A)-a,y:d-a,r:b})}else d()}function h(){c(1,p=!0)}function k(){t&&(cancelAnimationFrame(t),t=void 0);window.removeEventListener("touchmove",C,{passive:!1})}function m(a){let {modalOverlayOpeningPadding:b,modalOverlayOpeningRadius:c}=a.options,d=qb(a.target),e=()=>{t=void 0;f(b,c,d,a.target);t=requestAnimationFrame(e)};e();window.addEventListener("touchmove",C,{passive:!1})}let {element:g}=b,{openingProperties:l}=b;Ba();let p=!1,t=void 0,
|
||||
A;d();let C=a=>{a.preventDefault()};a.$$set=a=>{"element"in a&&c(0,g=a.element);"openingProperties"in a&&c(4,l=a.openingProperties)};a.$$.update=()=>{a.$$.dirty&16&&c(2,A=nc(l))};return[g,p,A,a=>{a.stopPropagation()},l,()=>g,d,e,f,function(a){k();a.tour.options.useModalOverlay?(m(a),h()):e()},h,function(a){aa[a?"unshift":"push"](()=>{g=a;c(0,g)})}]}var vb=function(a){var b;if(b=!!a&&"object"===typeof a)b=Object.prototype.toString.call(a),b=!("[object RegExp]"===b||"[object Date]"===b||a.$$typeof===
|
||||
qc);return b},qc="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;V.all=function(a,b){if(!Array.isArray(a))throw Error("first argument should be an array");return a.reduce(function(a,d){return V(a,d,b)},{})};var rc=V;class Ga{on(a,b,c,d=!1){void 0===this.bindings&&(this.bindings={});void 0===this.bindings[a]&&(this.bindings[a]=[]);this.bindings[a].push({handler:b,ctx:c,once:d});return this}once(a,b,c){return this.on(a,b,c,!0)}off(a,b){if(void 0===this.bindings||void 0===this.bindings[a])return this;
|
||||
void 0===b?delete this.bindings[a]:this.bindings[a].forEach((c,d)=>{c.handler===b&&this.bindings[a].splice(d,1)});return this}trigger(a,...b){void 0!==this.bindings&&this.bindings[a]&&this.bindings[a].forEach((c,d)=>{let {ctx:e,handler:f,once:h}=c;f.apply(e||this,b);h&&this.bindings[a].splice(d,1)});return this}}var ja=["top","bottom","right","left"],Wa=ja.reduce(function(a,b){return a.concat([b+"-start",b+"-end"])},[]),Va=[].concat(ja,["auto"]).reduce(function(a,b){return a.concat([b,b+"-start",
|
||||
b+"-end"])},[]),Ib="beforeRead read afterRead beforeMain main afterMain beforeWrite write afterWrite".split(" "),E=Math.max,M=Math.min,ma=Math.round,yb={top:"auto",right:"auto",bottom:"auto",left:"auto"},sa={passive:!0},zb={left:"right",right:"left",bottom:"top",top:"bottom"},Ab={start:"end",end:"start"},rb={placement:"bottom",modifiers:[],strategy:"absolute"},sc=function(a){void 0===a&&(a={});var b=a.defaultModifiers,c=void 0===b?[]:b;a=a.defaultOptions;var d=void 0===a?rb:a;return function(a,b,
|
||||
h){function e(){g.orderedModifiers.forEach(function(a){var b=a.name,c=a.options;c=void 0===c?{}:c;a=a.effect;"function"===typeof a&&(b=a({state:g,name:b,instance:t,options:c}),l.push(b||function(){}))})}function f(){l.forEach(function(a){return a()});l=[]}void 0===h&&(h=d);var g={placement:"bottom",orderedModifiers:[],options:Object.assign({},rb,d),modifiersData:{},elements:{reference:a,popper:b},attributes:{},styles:{}},l=[],p=!1,t={state:g,setOptions:function(h){f();g.options=Object.assign({},d,
|
||||
g.options,h);g.scrollParents={reference:ea(a)?ha(a):a.contextElement?ha(a.contextElement):[],popper:ha(b)};h=Hb(Kb([].concat(c,g.options.modifiers)));g.orderedModifiers=h.filter(function(a){return a.enabled});e();return t.update()},forceUpdate:function(){if(!p){var a=g.elements,b=a.reference;a=a.popper;if(Za(b,a))for(g.rects={reference:Fb(b,fa(a),"fixed"===g.options.strategy),popper:ta(a)},g.reset=!1,g.placement=g.options.placement,g.orderedModifiers.forEach(function(a){return g.modifiersData[a.name]=
|
||||
Object.assign({},a.data)}),b=0;b<g.orderedModifiers.length;b++)if(!0===g.reset)g.reset=!1,b=-1;else{var c=g.orderedModifiers[b];a=c.fn;var d=c.options;d=void 0===d?{}:d;c=c.name;"function"===typeof a&&(g=a({state:g,options:d,name:c,instance:t})||g)}}},update:Jb(function(){return new Promise(function(a){t.forceUpdate();a(g)})}),destroy:function(){f();p=!0}};if(!Za(a,b))return t;t.setOptions(h).then(function(a){if(!p&&h.onFirstUpdate)h.onFirstUpdate(a)});return t}}({defaultModifiers:[{name:"eventListeners",
|
||||
enabled:!0,phase:"write",fn:function(){},effect:function(a){var b=a.state,c=a.instance;a=a.options;var d=a.scroll,e=void 0===d?!0:d;a=a.resize;var f=void 0===a?!0:a,h=z(b.elements.popper),k=[].concat(b.scrollParents.reference,b.scrollParents.popper);e&&k.forEach(function(a){a.addEventListener("scroll",c.update,sa)});f&&h.addEventListener("resize",c.update,sa);return function(){e&&k.forEach(function(a){a.removeEventListener("scroll",c.update,sa)});f&&h.removeEventListener("resize",c.update,sa)}},data:{}},
|
||||
{name:"popperOffsets",enabled:!0,phase:"read",fn:function(a){var b=a.state;b.modifiersData[a.name]=Ua({reference:b.rects.reference,element:b.rects.popper,strategy:"absolute",placement:b.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(a){var b=a.state,c=a.options;a=c.gpuAcceleration;a=void 0===a?!0:a;var d=c.adaptive;d=void 0===d?!0:d;c=c.roundOffsets;c=void 0===c?!0:c;a={placement:F(b.placement),popper:b.elements.popper,popperRect:b.rects.popper,gpuAcceleration:a};
|
||||
null!=b.modifiersData.popperOffsets&&(b.styles.popper=Object.assign({},b.styles.popper,Qa(Object.assign({},a,{offsets:b.modifiersData.popperOffsets,position:b.options.strategy,adaptive:d,roundOffsets:c}))));null!=b.modifiersData.arrow&&(b.styles.arrow=Object.assign({},b.styles.arrow,Qa(Object.assign({},a,{offsets:b.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:c}))));b.attributes.popper=Object.assign({},b.attributes.popper,{"data-popper-placement":b.placement})},data:{}},{name:"applyStyles",
|
||||
enabled:!0,phase:"write",fn:function(a){var b=a.state;Object.keys(b.elements).forEach(function(a){var c=b.styles[a]||{},e=b.attributes[a]||{},f=b.elements[a];y(f)&&B(f)&&(Object.assign(f.style,c),Object.keys(e).forEach(function(a){var b=e[a];!1===b?f.removeAttribute(a):f.setAttribute(a,!0===b?"":b)}))})},effect:function(a){var b=a.state,c={popper:{position:b.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(b.elements.popper.style,c.popper);b.styles=
|
||||
c;b.elements.arrow&&Object.assign(b.elements.arrow.style,c.arrow);return function(){Object.keys(b.elements).forEach(function(a){var d=b.elements[a],f=b.attributes[a]||{};a=Object.keys(b.styles.hasOwnProperty(a)?b.styles[a]:c[a]).reduce(function(a,b){a[b]="";return a},{});y(d)&&B(d)&&(Object.assign(d.style,a),Object.keys(f).forEach(function(a){d.removeAttribute(a)}))})}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(a){var b=a.state,c=a.name;
|
||||
a=a.options.offset;var d=void 0===a?[0,0]:a;a=Va.reduce(function(a,c){var e=b.rects;var f=F(c);var h=0<=["left","top"].indexOf(f)?-1:1,k="function"===typeof d?d(Object.assign({},e,{placement:c})):d;e=k[0];k=k[1];e=e||0;k=(k||0)*h;f=0<=["left","right"].indexOf(f)?{x:k,y:e}:{x:e,y:k};a[c]=f;return a},{});var e=a[b.placement],f=e.x;e=e.y;null!=b.modifiersData.popperOffsets&&(b.modifiersData.popperOffsets.x+=f,b.modifiersData.popperOffsets.y+=e);b.modifiersData[c]=a}},{name:"flip",enabled:!0,phase:"main",
|
||||
fn:function(a){var b=a.state,c=a.options;a=a.name;if(!b.modifiersData[a]._skip){var d=c.mainAxis;d=void 0===d?!0:d;var e=c.altAxis;e=void 0===e?!0:e;var f=c.fallbackPlacements,h=c.padding,k=c.boundary,m=c.rootBoundary,g=c.altBoundary,l=c.flipVariations,p=void 0===l?!0:l,t=c.allowedAutoPlacements;c=b.options.placement;l=F(c);f=f||(l!==c&&p?Eb(c):[na(c)]);var A=[c].concat(f).reduce(function(a,c){return a.concat("auto"===F(c)?Db(b,{placement:c,boundary:k,rootBoundary:m,padding:h,flipVariations:p,allowedAutoPlacements:t}):
|
||||
c)},[]);c=b.rects.reference;f=b.rects.popper;var n=new Map;l=!0;for(var u=A[0],D=0;D<A.length;D++){var v=A[D],q=F(v),r="start"===v.split("-")[1],U=0<=["top","bottom"].indexOf(q),x=U?"width":"height",w=ia(b,{placement:v,boundary:k,rootBoundary:m,altBoundary:g,padding:h});r=U?r?"right":"left":r?"bottom":"top";c[x]>f[x]&&(r=na(r));x=na(r);U=[];d&&U.push(0>=w[q]);e&&U.push(0>=w[r],0>=w[x]);if(U.every(function(a){return a})){u=v;l=!1;break}n.set(v,U)}if(l)for(d=function(a){var b=A.find(function(b){if(b=
|
||||
n.get(b))return b.slice(0,a).every(function(a){return a})});if(b)return u=b,"break"},e=p?3:1;0<e&&"break"!==d(e);e--);b.placement!==u&&(b.modifiersData[a]._skip=!0,b.placement=u,b.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},{name:"preventOverflow",enabled:!0,phase:"main",fn:function(a){var b=a.state,c=a.options;a=a.name;var d=c.mainAxis,e=void 0===d?!0:d;d=c.altAxis;var f=void 0===d?!1:d;d=c.tether;d=void 0===d?!0:d;var h=c.tetherOffset,k=void 0===h?0:h,m=ia(b,{boundary:c.boundary,rootBoundary:c.rootBoundary,
|
||||
padding:c.padding,altBoundary:c.altBoundary});c=F(b.placement);var g=b.placement.split("-")[1],l=!g,p=ua(c);c="x"===p?"y":"x";h=b.modifiersData.popperOffsets;var t=b.rects.reference,n=b.rects.popper,q="function"===typeof k?k(Object.assign({},b.rects,{placement:b.placement})):k;k={x:0,y:0};if(h){if(e||f){var u="y"===p?"top":"left",D="y"===p?"bottom":"right",v="y"===p?"height":"width",r=h[p],x=h[p]+m[u],w=h[p]-m[D],z=d?-n[v]/2:0,y="start"===g?t[v]:n[v];g="start"===g?-n[v]:-t[v];n=b.elements.arrow;n=
|
||||
d&&n?ta(n):{width:0,height:0};var B=b.modifiersData["arrow#persistent"]?b.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0};u=B[u];D=B[D];n=E(0,M(t[v],n[v]));y=l?t[v]/2-z-n-u-q:y-n-u-q;t=l?-t[v]/2+z+n+D+q:g+n+D+q;l=b.elements.arrow&&fa(b.elements.arrow);q=b.modifiersData.offset?b.modifiersData.offset[b.placement][p]:0;l=h[p]+y-q-(l?"y"===p?l.clientTop||0:l.clientLeft||0:0);t=h[p]+t-q;e&&(e=d?M(x,l):x,w=d?E(w,t):w,e=E(e,M(r,w)),h[p]=e,k[p]=e-r);f&&(f=h[c],e=f+m["x"===p?"top":
|
||||
"left"],m=f-m["x"===p?"bottom":"right"],e=d?M(e,l):e,d=d?E(m,t):m,d=E(e,M(f,d)),h[c]=d,k[c]=d-f)}b.modifiersData[a]=k}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(a){var b,c=a.state,d=a.name,e=a.options,f=c.elements.arrow,h=c.modifiersData.popperOffsets,k=F(c.placement);a=ua(k);k=0<=["left","right"].indexOf(k)?"height":"width";if(f&&h){e=e.padding;e="function"===typeof e?e(Object.assign({},c.rects,{placement:c.placement})):e;e=Oa("number"!==typeof e?e:Pa(e,ja));
|
||||
var m=ta(f),g="y"===a?"top":"left",l="y"===a?"bottom":"right",p=c.rects.reference[k]+c.rects.reference[a]-h[a]-c.rects.popper[k];h=h[a]-c.rects.reference[a];f=(f=fa(f))?"y"===a?f.clientHeight||0:f.clientWidth||0:0;h=f/2-m[k]/2+(p/2-h/2);k=E(e[g],M(h,f-m[k]-e[l]));c.modifiersData[d]=(b={},b[a]=k,b.centerOffset=k-h,b)}},effect:function(a){var b=a.state;a=a.options.element;a=void 0===a?"[data-popper-arrow]":a;if(null!=a){if("string"===typeof a&&(a=b.elements.popper.querySelector(a),!a))return;Ma(b.elements.popper,
|
||||
a)&&(b.elements.arrow=a)}},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(a){var b=a.state;a=a.name;var c=b.rects.reference,d=b.rects.popper,e=b.modifiersData.preventOverflow,f=ia(b,{elementContext:"reference"}),h=ia(b,{altBoundary:!0});c=Xa(f,c);d=Xa(h,d,e);e=Ya(c);h=Ya(d);b.modifiersData[a]={referenceClippingOffsets:c,popperEscapeOffsets:d,isReferenceHidden:e,hasPopperEscaped:h};b.attributes.popper=
|
||||
Object.assign({},b.attributes.popper,{"data-popper-reference-hidden":e,"data-popper-escaped":h})}}]});let P,ka=[],aa=[],qa=[],fb=[],Pb=Promise.resolve(),Fa=!1,Da=!1,Ea=new Set,ra=new Set,R;class K{$destroy(){O(this,1);this.$destroy=x}$on(a,b){let c=this.$$.callbacks[a]||(this.$$.callbacks[a]=[]);c.push(b);return()=>{let a=c.indexOf(b);-1!==a&&c.splice(a,1)}}$set(a){this.$$set&&0!==Object.keys(a).length&&(this.$$.skip_bound=!0,this.$$set(a),this.$$.skip_bound=!1)}}class Sb extends K{constructor(a){super();
|
||||
J(this,a,Rb,Qb,I,{config:6,step:7})}}class gc extends K{constructor(a){super();J(this,a,Ub,Tb,I,{step:0})}}class $b extends K{constructor(a){super();J(this,a,Wb,Vb,I,{cancelIcon:0,step:2})}}class Zb extends K{constructor(a){super();J(this,a,Yb,Xb,I,{labelId:1,element:0,title:2})}}class ec extends K{constructor(a){super();J(this,a,bc,ac,I,{labelId:0,step:1})}}class fc extends K{constructor(a){super();J(this,a,dc,cc,I,{descriptionId:1,element:0,step:2})}}class kc extends K{constructor(a){super();J(this,
|
||||
a,ic,hc,I,{descriptionId:0,labelId:1,step:2})}}class tc extends K{constructor(a){super();J(this,a,lc,jc,I,{classPrefix:11,element:0,descriptionId:2,firstFocusableElement:8,focusableElements:9,labelId:3,lastFocusableElement:10,step:4,dataStepId:1,getElement:12})}get getElement(){return this.$$.ctx[12]}}var sb=function(a,b){return b={exports:{}},a(b,b.exports),b.exports}(function(a,b){(function(){a.exports={polyfill:function(){function a(a,b){this.scrollLeft=a;this.scrollTop=b}function b(a){if(null===
|
||||
a||"object"!==typeof a||void 0===a.behavior||"auto"===a.behavior||"instant"===a.behavior)return!0;if("object"===typeof a&&"smooth"===a.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+a.behavior+" is not a valid value for enumeration ScrollBehavior.");}function e(a,b){if("Y"===b)return a.clientHeight+r<a.scrollHeight;if("X"===b)return a.clientWidth+r<a.scrollWidth}function f(a,b){a=g.getComputedStyle(a,null)["overflow"+b];return"auto"===a||"scroll"===a}function h(a){var b=
|
||||
e(a,"Y")&&f(a,"Y");a=e(a,"X")&&f(a,"X");return b||a}function k(a){var b=(q()-a.startTime)/468;var c=.5*(1-Math.cos(Math.PI*(1<b?1:b)));b=a.startX+(a.x-a.startX)*c;c=a.startY+(a.y-a.startY)*c;a.method.call(a.scrollable,b,c);b===a.x&&c===a.y||g.requestAnimationFrame(k.bind(g,a))}function m(b,c,d){var e=q();if(b===l.body){var f=g;var h=g.scrollX||g.pageXOffset;b=g.scrollY||g.pageYOffset;var u=n.scroll}else f=b,h=b.scrollLeft,b=b.scrollTop,u=a;k({scrollable:f,method:u,startTime:e,startX:h,startY:b,x:c,
|
||||
y:d})}var g=window,l=document;if(!("scrollBehavior"in l.documentElement.style&&!0!==g.__forceSmoothScrollPolyfill__)){var p=g.HTMLElement||g.Element,n={scroll:g.scroll||g.scrollTo,scrollBy:g.scrollBy,elementScroll:p.prototype.scroll||a,scrollIntoView:p.prototype.scrollIntoView},q=g.performance&&g.performance.now?g.performance.now.bind(g.performance):Date.now,r=/MSIE |Trident\/|Edge\//.test(g.navigator.userAgent)?1:0;g.scroll=g.scrollTo=function(a,c){void 0!==a&&(!0===b(a)?n.scroll.call(g,void 0!==
|
||||
a.left?a.left:"object"!==typeof a?a:g.scrollX||g.pageXOffset,void 0!==a.top?a.top:void 0!==c?c:g.scrollY||g.pageYOffset):m.call(g,l.body,void 0!==a.left?~~a.left:g.scrollX||g.pageXOffset,void 0!==a.top?~~a.top:g.scrollY||g.pageYOffset))};g.scrollBy=function(a,c){void 0!==a&&(b(a)?n.scrollBy.call(g,void 0!==a.left?a.left:"object"!==typeof a?a:0,void 0!==a.top?a.top:void 0!==c?c:0):m.call(g,l.body,~~a.left+(g.scrollX||g.pageXOffset),~~a.top+(g.scrollY||g.pageYOffset)))};p.prototype.scroll=p.prototype.scrollTo=
|
||||
function(a,c){if(void 0!==a)if(!0===b(a)){if("number"===typeof a&&void 0===c)throw new SyntaxError("Value could not be converted");n.elementScroll.call(this,void 0!==a.left?~~a.left:"object"!==typeof a?~~a:this.scrollLeft,void 0!==a.top?~~a.top:void 0!==c?~~c:this.scrollTop)}else c=a.left,a=a.top,m.call(this,this,"undefined"===typeof c?this.scrollLeft:~~c,"undefined"===typeof a?this.scrollTop:~~a)};p.prototype.scrollBy=function(a,c){void 0!==a&&(!0===b(a)?n.elementScroll.call(this,void 0!==a.left?
|
||||
~~a.left+this.scrollLeft:~~a+this.scrollLeft,void 0!==a.top?~~a.top+this.scrollTop:~~c+this.scrollTop):this.scroll({left:~~a.left+this.scrollLeft,top:~~a.top+this.scrollTop,behavior:a.behavior}))};p.prototype.scrollIntoView=function(a){if(!0===b(a))n.scrollIntoView.call(this,void 0===a?!0:a);else{for(a=this;a!==l.body&&!1===h(a);)a=a.parentNode||a.host;var c=a.getBoundingClientRect(),d=this.getBoundingClientRect();a!==l.body?(m.call(this,a,a.scrollLeft+d.left-c.left,a.scrollTop+d.top-c.top),"fixed"!==
|
||||
g.getComputedStyle(a).position&&g.scrollBy({left:c.left,top:c.top,behavior:"smooth"})):g.scrollBy({left:d.left,top:d.top,behavior:"smooth"})}}}}}})()});sb.polyfill;sb.polyfill();class Ha extends Ga{constructor(a,b={}){super(a,b);this.tour=a;this.classPrefix=this.tour.options?$a(this.tour.options.classPrefix):"";this.styles=a.styles;Ka(this);this._setOptions(b);return this}cancel(){this.tour.cancel();this.trigger("cancel")}complete(){this.tour.complete();this.trigger("complete")}destroy(){this.tooltip&&
|
||||
(this.tooltip.destroy(),this.tooltip=null);this.el instanceof HTMLElement&&this.el.parentNode&&(this.el.parentNode.removeChild(this.el),this.el=null);this._updateStepTargetOnHide();this.trigger("destroy")}getTour(){return this.tour}hide(){this.tour.modal.hide();this.trigger("before-hide");this.el&&(this.el.hidden=!0);this._updateStepTargetOnHide();this.trigger("hide")}isCentered(){let a=Aa(this);return!a.element||!a.on}isOpen(){return!(!this.el||this.el.hidden)}show(){if(W(this.options.beforeShowPromise)){let a=
|
||||
this.options.beforeShowPromise();if(void 0!==a)return a.then(()=>this._show())}this._show()}updateStepOptions(a){Object.assign(this.options,a);this.shepherdElementComponent&&this.shepherdElementComponent.$set({step:this})}getElement(){return this.el}getTarget(){return this.target}_createTooltipContent(){this.shepherdElementComponent=new tc({target:this.tour.options.stepsContainer||document.body,props:{classPrefix:this.classPrefix,descriptionId:`${this.id}-description`,labelId:`${this.id}-label`,step:this,
|
||||
styles:this.styles}});return this.shepherdElementComponent.getElement()}_scrollTo(a){let {element:b}=Aa(this);W(this.options.scrollToHandler)?this.options.scrollToHandler(b):b instanceof Element&&"function"===typeof b.scrollIntoView&&b.scrollIntoView(a)}_getClassOptions(a){var b=this.tour&&this.tour.options&&this.tour.options.defaultStepOptions;b=b&&b.classes?b.classes:"";a=[...(a.classes?a.classes:"").split(" "),...b.split(" ")];a=new Set(a);return Array.from(a).join(" ").trim()}_setOptions(a={}){let b=
|
||||
this.tour&&this.tour.options&&this.tour.options.defaultStepOptions;b=rc({},b||{});this.options=Object.assign({arrow:!0},b,a);let {when:c}=this.options;this.options.classes=this._getClassOptions(a);this.destroy();this.id=this.options.id||`step-${Ba()}`;c&&Object.keys(c).forEach(a=>{this.on(a,c[a],this)})}_setupElements(){void 0!==this.el&&this.destroy();this.el=this._createTooltipContent();this.options.advanceOn&&xb(this);{this.tooltip&&this.tooltip.destroy();let a=Aa(this),b=a.element,c=Nb(a,this);
|
||||
this.isCentered()&&(b=document.body,this.shepherdElementComponent.getElement().classList.add("shepherd-centered"));this.tooltip=sc(b,this.el,c);this.target=a.element}}_show(){this.trigger("before-show");this._setupElements();this.tour.modal||this.tour._setupModal();this.tour.modal.setupForStep(this);this._styleTargetElementForStep(this);this.el.hidden=!1;this.options.scrollTo&&setTimeout(()=>{this._scrollTo(this.options.scrollTo)});this.el.hidden=!1;let a=this.shepherdElementComponent.getElement(),
|
||||
b=this.target||document.body;b.classList.add(`${this.classPrefix}shepherd-enabled`);b.classList.add(`${this.classPrefix}shepherd-target`);a.classList.add("shepherd-enabled");this.trigger("show")}_styleTargetElementForStep(a){let b=a.target;b&&(a.options.highlightClass&&b.classList.add(a.options.highlightClass),!1===a.options.canClickTarget&&b.classList.add("shepherd-target-click-disabled"))}_updateStepTargetOnHide(){let a=this.target||document.body;this.options.highlightClass&&a.classList.remove(this.options.highlightClass);
|
||||
a.classList.remove("shepherd-target-click-disabled",`${this.classPrefix}shepherd-enabled`,`${this.classPrefix}shepherd-target`)}}class uc extends K{constructor(a){super();J(this,a,pc,oc,I,{element:0,openingProperties:4,getElement:5,closeModalOpening:6,hide:7,positionModal:8,setupForStep:9,show:10})}get getElement(){return this.$$.ctx[5]}get closeModalOpening(){return this.$$.ctx[6]}get hide(){return this.$$.ctx[7]}get positionModal(){return this.$$.ctx[8]}get setupForStep(){return this.$$.ctx[9]}get show(){return this.$$.ctx[10]}}
|
||||
let ba=new Ga;class vc extends Ga{constructor(a={}){super(a);Ka(this);this.options=Object.assign({},{exitOnEsc:!0,keyboardNavigation:!0},a);this.classPrefix=$a(this.options.classPrefix);this.steps=[];this.addSteps(this.options.steps);"active cancel complete inactive show start".split(" ").map(a=>{(a=>{this.on(a,b=>{b=b||{};b.tour=this;ba.trigger(a,b)})})(a)});this._setTourID();return this}addStep(a,b){a instanceof Ha?a.tour=this:a=new Ha(this,a);void 0!==b?this.steps.splice(b,0,a):this.steps.push(a);
|
||||
return a}addSteps(a){Array.isArray(a)&&a.forEach(a=>{this.addStep(a)});return this}back(){let a=this.steps.indexOf(this.currentStep);this.show(a-1,!1)}cancel(){this.options.confirmCancel?window.confirm(this.options.confirmCancelMessage||"Are you sure you want to stop the tour?")&&this._done("cancel"):this._done("cancel")}complete(){this._done("complete")}getById(a){return this.steps.find(b=>b.id===a)}getCurrentStep(){return this.currentStep}hide(){let a=this.getCurrentStep();if(a)return a.hide()}isActive(){return ba.activeTour===
|
||||
this}next(){let a=this.steps.indexOf(this.currentStep);a===this.steps.length-1?this.complete():this.show(a+1,!0)}removeStep(a){let b=this.getCurrentStep();this.steps.some((b,d)=>{if(b.id===a)return b.isOpen()&&b.hide(),b.destroy(),this.steps.splice(d,1),!0});b&&b.id===a&&(this.currentStep=void 0,this.steps.length?this.show(0):this.cancel())}show(a=0,b=!0){if(a=da(a)?this.getById(a):this.steps[a])this._updateStateBeforeShow(),W(a.options.showOn)&&!a.options.showOn()?this._skipStep(a,b):(this.trigger("show",
|
||||
{step:a,previous:this.currentStep}),this.currentStep=a,a.show())}start(){this.trigger("start");this.focusedElBeforeOpen=document.activeElement;this.currentStep=null;this._setupModal();this._setupActiveTour();this.next()}_done(a){let b=this.steps.indexOf(this.currentStep);Array.isArray(this.steps)&&this.steps.forEach(a=>a.destroy());mc(this);this.trigger(a,{index:b});ba.activeTour=null;this.trigger("inactive",{tour:this});this.modal&&this.modal.hide();"cancel"!==a&&"complete"!==a||!this.modal||(a=
|
||||
document.querySelector(".shepherd-modal-overlay-container"))&&a.remove();this.focusedElBeforeOpen instanceof HTMLElement&&this.focusedElBeforeOpen.focus()}_setupActiveTour(){this.trigger("active",{tour:this});ba.activeTour=this}_setupModal(){this.modal=new uc({target:this.options.modalContainer||document.body,props:{classPrefix:this.classPrefix,styles:this.styles}})}_skipStep(a,b){a=this.steps.indexOf(a);this.show(b?a+1:a-1,b)}_updateStateBeforeShow(){this.currentStep&&this.currentStep.hide();this.isActive()||
|
||||
this._setupActiveTour()}_setTourID(){this.id=`${this.options.tourName||"tour"}--${Ba()}`}}Object.assign(ba,{Tour:vc,Step:Ha});return ba})
|
||||
//# sourceMappingURL=shepherd.min.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -503,9 +503,20 @@ jquery.joyride:
|
|||
gpl-compatible: true
|
||||
js:
|
||||
assets/vendor/jquery-joyride/jquery.joyride-2.1.js: { }
|
||||
deprecated: The "%library_id%" asset library is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Use the core/shepherd library instead. See https://www.drupal.org/node/3195234
|
||||
dependencies:
|
||||
- core/jquery
|
||||
|
||||
shepherd:
|
||||
remote: https://github.com/shipshapecode/shepherd
|
||||
version: "8.3.1"
|
||||
license:
|
||||
name: MIT
|
||||
url: https://raw.githubusercontent.com/shipshapecode/shepherd/v8.3.1/LICENSE
|
||||
gpl-compatible: true
|
||||
js:
|
||||
assets/vendor/shepherd/shepherd.min.js: { minified: true }
|
||||
|
||||
jquery.once:
|
||||
remote: https://github.com/RobLoach/jquery-once
|
||||
version: "2.2.3"
|
||||
|
|
|
|||
|
|
@ -21,24 +21,21 @@ tips:
|
|||
label: 'Place Blocks'
|
||||
body: 'Any custom or contributed block can be added to a particular region by clicking on a button Place block. A new block can also be created by clicking on Place Block'
|
||||
weight: 2
|
||||
attributes:
|
||||
data-class: button--small
|
||||
selector: '.button--small'
|
||||
block-region:
|
||||
id: block-region
|
||||
plugin: text
|
||||
label: 'Block Region'
|
||||
body: 'Assign or change the region of a block by clicking here. A dropdown list with all the regions will appear.You can place one block in multiple regions.'
|
||||
weight: 3
|
||||
attributes:
|
||||
data-class: block-region-select
|
||||
selector: '.block-region-select'
|
||||
configure-block:
|
||||
id: configure-block
|
||||
plugin: text
|
||||
label: 'Configure Block'
|
||||
body: 'By Clicking on "Configure" you can go ahead and edit the contents of the block, deal with the visibility settings and even change the placement of where it is on your theme.'
|
||||
weight: 4
|
||||
attributes:
|
||||
data-class: dropbutton-widget
|
||||
selector: '.dropbutton-widget'
|
||||
custom-block-library:
|
||||
id: custom-block-library
|
||||
plugin: text
|
||||
|
|
|
|||
|
|
@ -67,9 +67,7 @@ class TourTest extends ResourceTestBase {
|
|||
'label' => 'Llama',
|
||||
'body' => 'Who handle the awesomeness of llamas?',
|
||||
'weight' => 100,
|
||||
'attributes' => [
|
||||
'data-id' => 'tour-llama-1',
|
||||
],
|
||||
'selector' => '#tour-llama-1',
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
|
@ -119,9 +117,7 @@ class TourTest extends ResourceTestBase {
|
|||
'label' => 'Llama',
|
||||
'body' => 'Who handle the awesomeness of llamas?',
|
||||
'weight' => 100,
|
||||
'attributes' => [
|
||||
'data-id' => 'tour-llama-1',
|
||||
],
|
||||
'selector' => '#tour-llama-1',
|
||||
],
|
||||
],
|
||||
'drupal_internal__id' => 'tour-llama',
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@ tips:
|
|||
label: 'Select language'
|
||||
body: '<p>Choose a language from the list, or choose "Custom language..." at the end of the list.</p><p>Click the "Add language" button when you are done choosing your language.</p><p>When adding a custom language, you will get an additional form where you can provide the name, code, and direction of the language.</p>'
|
||||
weight: 2
|
||||
attributes:
|
||||
data-id: edit-predefined-langcode
|
||||
selector: '#edit-predefined-langcode'
|
||||
language-add-continue:
|
||||
id: language-add-continue
|
||||
plugin: text
|
||||
|
|
|
|||
|
|
@ -21,24 +21,21 @@ tips:
|
|||
label: 'Language code'
|
||||
body: '<p>You cannot change the code of a language on the site, since it is used by the system to keep track of the language.</p>'
|
||||
weight: 2
|
||||
attributes:
|
||||
data-id: edit-langcode-view
|
||||
selector: '#edit-langcode-view'
|
||||
language-edit-label:
|
||||
id: language-edit-label
|
||||
plugin: text
|
||||
label: 'Language name'
|
||||
body: '<p>The language name is used throughout the site for all users and is written in English. Names of built-in languages can be translated using the Interface Translation module, and names of both built-in and custom languages can be translated using the Configuration Translation module.</p>'
|
||||
weight: 3
|
||||
attributes:
|
||||
data-id: edit-label
|
||||
selector: '#edit-label'
|
||||
language-edit-direction:
|
||||
id: language-edit-direction
|
||||
plugin: text
|
||||
label: 'Language direction'
|
||||
body: '<p>Choose if the language is a "Left to right" or "Right to left" language.</p><p>Note that not all themes support "Right to left" layouts, so test your theme if you are using "Right to left".</p>'
|
||||
weight: 4
|
||||
attributes:
|
||||
data-id: edit-direction--wrapper--description
|
||||
selector: '#edit-direction--wrapper--description'
|
||||
language-edit-continue:
|
||||
id: language-edit-continue
|
||||
plugin: text
|
||||
|
|
|
|||
|
|
@ -21,32 +21,28 @@ tips:
|
|||
label: 'Adding languages'
|
||||
body: '<p>To add more languages to your site, click the "Add language" button.</p><p>Added languages will be displayed in the language list and can then be edited or deleted.</p>'
|
||||
weight: 2
|
||||
attributes:
|
||||
data-class: button-action
|
||||
selector: '.button-action'
|
||||
language-reorder:
|
||||
id: language-reorder
|
||||
plugin: text
|
||||
label: 'Reordering languages'
|
||||
body: '<p>To reorder the languages on your site, use the drag icons next to each language.</p><p>The order shown here is the display order for language lists on the site such as in the language switcher blocks provided by the Interface Translation and Content Translation modules.</p><p>When you are done with reordering the languages, click the "Save configuration" button for the changes to take effect.</p>'
|
||||
weight: 3
|
||||
attributes:
|
||||
data-class: draggable
|
||||
selector: '.draggable'
|
||||
language-default:
|
||||
id: language-default
|
||||
plugin: text
|
||||
label: 'Set a language as default'
|
||||
body: '<p>You can change the default language of the site by choosing one of your configured languages as default. The site will use the default language in situations where no choice is made but a language should be set, for example as the language of the displayed interface.</p>'
|
||||
weight: 4
|
||||
attributes:
|
||||
data-class: js-form-item-site-default-language
|
||||
selector: '.js-form-item-site-default-language'
|
||||
language-operations:
|
||||
id: language-operations
|
||||
plugin: text
|
||||
label: 'Modifying languages'
|
||||
body: '<p>Operations are provided for editing and deleting your languages.</p><p>You can edit the name and the direction of the language.</p><p>Deleted languages can be added back at a later time. Deleting a language will remove all interface translations associated with it, and content in this language will be set to be language neutral. Note that you cannot delete the default language of the site.</p>'
|
||||
weight: 5
|
||||
attributes:
|
||||
data-class: dropbutton-wrapper
|
||||
selector: '.dropbutton-wrapper'
|
||||
language-continue:
|
||||
id: language-continue
|
||||
plugin: text
|
||||
|
|
|
|||
|
|
@ -21,48 +21,42 @@ tips:
|
|||
label: 'Translation language'
|
||||
body: 'Choose the language you want to translate.'
|
||||
weight: 2
|
||||
attributes:
|
||||
data-id: edit-langcode
|
||||
selector: '#edit-langcode'
|
||||
locale-search:
|
||||
id: locale-search
|
||||
plugin: text
|
||||
label: Search
|
||||
body: 'Enter the specific word or sentence you want to translate, you can also write just a part of a word.'
|
||||
weight: 3
|
||||
attributes:
|
||||
data-id: edit-string
|
||||
selector: '#edit-string'
|
||||
locale-filter:
|
||||
id: locale-filter
|
||||
plugin: text
|
||||
label: 'Filter the search'
|
||||
body: 'You can search for untranslated strings if you want to translate something that isn''t translated yet. If you want to modify an existing translation, you might want to search only for translated strings.'
|
||||
weight: 4
|
||||
attributes:
|
||||
data-id: edit-translation
|
||||
selector: '#edit-translation'
|
||||
locale-submit:
|
||||
id: locale-submit
|
||||
plugin: text
|
||||
label: 'Apply your search criteria'
|
||||
body: 'To apply your search criteria, click on the <em>Filter</em> button.'
|
||||
weight: 5
|
||||
attributes:
|
||||
data-id: edit-submit
|
||||
selector: '#edit-submit'
|
||||
locale-translate:
|
||||
id: locale-translate
|
||||
plugin: text
|
||||
label: Translate
|
||||
body: 'You can write your own translation in the text fields of the right column. Try to figure out in which context the text will be used in order to translate it in the appropriate way.'
|
||||
weight: 6
|
||||
attributes:
|
||||
data-class: js-form-type-textarea
|
||||
selector: '.js-form-type-textarea'
|
||||
locale-validate:
|
||||
id: locale-validate
|
||||
plugin: text
|
||||
label: 'Validate the translation'
|
||||
body: 'When you have finished your translations, click on the <em>Save translations</em> button. You must save your translations, each time before changing the page or making a new search.'
|
||||
weight: 7
|
||||
attributes:
|
||||
data-id: edit-submit--2
|
||||
selector: '#edit-submit--2'
|
||||
locale-continue:
|
||||
id: locale-continue
|
||||
plugin: text
|
||||
|
|
|
|||
|
|
@ -43,9 +43,17 @@ tour.tip:
|
|||
type: integer
|
||||
label: 'Weight'
|
||||
location:
|
||||
deprecated: "The tour.tip 'location' config schema property is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Instead use 'position'. The value must be a valid placement accepted by PopperJS. See https://www.drupal.org/node/3204093"
|
||||
type: string
|
||||
label: 'Location'
|
||||
position:
|
||||
type: string
|
||||
label: 'Position'
|
||||
selector:
|
||||
type: string
|
||||
label: 'Selector'
|
||||
attributes:
|
||||
deprecated: "The tour.tip 'attributes' config schema property is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Instead of 'data-class' and 'data-id' attributes, use 'selector' to specify the element a tip attaches to. See https://www.drupal.org/node/3204093"
|
||||
type: sequence
|
||||
label: 'Attributes'
|
||||
sequence:
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
float: left;
|
||||
}
|
||||
|
||||
/* Override placement of the tour progress indicator. */
|
||||
/* Style the tour progress indicator. */
|
||||
.tour-progress {
|
||||
position: absolute;
|
||||
right: 20px; /* LTR */
|
||||
|
|
@ -22,122 +22,132 @@
|
|||
left: 20px;
|
||||
}
|
||||
|
||||
/* Default styles for the container */
|
||||
.joyride-tip-guide {
|
||||
/**
|
||||
* The following are largely Shepherd's default styles, with a few modifications
|
||||
* to facilitate a graceful transition from Joyride, the library used prior to
|
||||
* Shepherd.
|
||||
*/
|
||||
.shepherd-footer {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.shepherd-footer .shepherd-button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.shepherd-title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.shepherd-header {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 50px 0 20px;
|
||||
}
|
||||
|
||||
.shepherd-text {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.shepherd-text p {
|
||||
margin: 0 0 1.4em;
|
||||
}
|
||||
|
||||
.shepherd-element {
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 300px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.joyride-tip-guide {
|
||||
.shepherd-element {
|
||||
left: 2.5%;
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.joyride-content-wrapper {
|
||||
position: relative;
|
||||
padding: 20px 50px 20px 20px; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .joyride-content-wrapper {
|
||||
padding: 20px 20px 20px 50px;
|
||||
.shepherd-enabled.shepherd-element {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
|
||||
.joyride-tip-guide .joyride-nub {
|
||||
.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shepherd-element,
|
||||
.shepherd-element *,
|
||||
.shepherd-element :after,
|
||||
.shepherd-element :before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.shepherd-arrow,
|
||||
.shepherd-arrow:before {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.top {
|
||||
top: -28px;
|
||||
bottom: auto;
|
||||
.shepherd-arrow:before {
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.bottom {
|
||||
bottom: -28px;
|
||||
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.right {
|
||||
top: 22px;
|
||||
right: -28px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.left {
|
||||
top: 22px;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: -28px;
|
||||
.shepherd-element[data-popper-placement^=left] > .shepherd-arrow {
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.top-right {
|
||||
top: -28px;
|
||||
right: 28px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
.shepherd-element[data-popper-placement^=right] > .shepherd-arrow {
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .tour-tip-label {
|
||||
margin-top: 0;
|
||||
.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,
|
||||
.shepherd-target-click-disabled.shepherd-enabled.shepherd-target * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.joyride-tip-guide p {
|
||||
margin: 0 0 1.4em;
|
||||
}
|
||||
|
||||
.joyride-timer-indicator-wrap {
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
bottom: 16px;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
}
|
||||
.joyride-timer-indicator {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.joyride-close-tip {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px; /* LTR */
|
||||
line-height: 1em;
|
||||
}
|
||||
[dir="rtl"] .joyride-close-tip {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.joyride-modal-bg {
|
||||
.shepherd-modal-overlay-container {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.joyride-expose-wrapper {
|
||||
position: absolute;
|
||||
z-index: 102;
|
||||
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
|
||||
height: 100vh;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.joyride-expose-cover {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* Attaches behaviors for the Tour module's toolbar tab.
|
||||
*/
|
||||
|
||||
(function ($, Backbone, Drupal, document) {
|
||||
(($, Backbone, Drupal, settings, document, Shepherd) => {
|
||||
const queryString = decodeURI(window.location.search);
|
||||
|
||||
/**
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
.once('tour')
|
||||
.each(() => {
|
||||
const model = new Drupal.tour.models.StateModel();
|
||||
// eslint-disable-next-line no-new
|
||||
new Drupal.tour.views.ToggleTourView({
|
||||
el: $(context).find('#toolbar-tab-tour'),
|
||||
model,
|
||||
|
|
@ -36,14 +37,16 @@
|
|||
|
||||
model
|
||||
// Allow other scripts to respond to tour events.
|
||||
.on('change:isActive', (model, isActive) => {
|
||||
.on('change:isActive', (tourModel, isActive) => {
|
||||
$(document).trigger(
|
||||
isActive ? 'drupalTourStarted' : 'drupalTourStopped',
|
||||
);
|
||||
})
|
||||
// Initialization: check whether a tour is available on the current
|
||||
// page.
|
||||
.set('tour', $(context).find('ol#tour'));
|
||||
});
|
||||
// Initialization: check whether a tour is available on the current
|
||||
// page.
|
||||
if (settings._tour_internal) {
|
||||
model.set('tour', settings._tour_internal);
|
||||
}
|
||||
|
||||
// Start the tour immediately if toggled via query string.
|
||||
if (/tour=?/i.test(queryString)) {
|
||||
|
|
@ -138,7 +141,7 @@
|
|||
this.$el
|
||||
.find('button')
|
||||
.toggleClass('is-active', isActive)
|
||||
.prop('aria-pressed', isActive);
|
||||
.attr('aria-pressed', isActive);
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -147,27 +150,105 @@
|
|||
*/
|
||||
toggleTour() {
|
||||
if (this.model.get('isActive')) {
|
||||
const $tour = this._getTour();
|
||||
this._removeIrrelevantTourItems($tour, this._getDocument());
|
||||
this._removeIrrelevantTourItems(this._getTour());
|
||||
const tourItems = this.model.get('tour');
|
||||
const that = this;
|
||||
const close = Drupal.t('Close');
|
||||
if ($tour.find('li').length) {
|
||||
$tour.joyride({
|
||||
autoStart: true,
|
||||
postRideCallback() {
|
||||
that.model.set('isActive', false);
|
||||
},
|
||||
// HTML segments for tip layout.
|
||||
template: {
|
||||
link: `<a href="#close" class="joyride-close-tip" aria-label="${close}">×</a>`,
|
||||
button:
|
||||
'<a href="#" class="button button--primary joyride-next-tip"></a>',
|
||||
|
||||
if (tourItems.length) {
|
||||
// If Joyride is positioned relative to the top or bottom of an
|
||||
// element, and its secondary position is right or left, then the
|
||||
// arrow is also positioned right or left. Shepherd defaults to
|
||||
// center positioning the arrow.
|
||||
//
|
||||
// In most cases, this arrow positioning difference has
|
||||
// little impact. However, tours built with Joyride may have tips
|
||||
// using a higher level selector than the element the tip is
|
||||
// expected to point to, and relied on Joyride's arrow positioning
|
||||
// to align the arrow with the expected reference element. Joyride's
|
||||
// arrow positioning behavior is replicated here to prevent those
|
||||
// use cases from causing UI regressions.
|
||||
//
|
||||
// This modifier is provided here instead of TourViewBuilder (where
|
||||
// most position modifications are) because it includes adding a
|
||||
// JavaScript callback function.
|
||||
settings.tourShepherdConfig.defaultStepOptions.popperOptions.modifiers.push(
|
||||
{
|
||||
name: 'moveArrowJoyridePosition',
|
||||
enabled: true,
|
||||
phase: 'write',
|
||||
fn({ state }) {
|
||||
const { arrow } = state.elements;
|
||||
const { placement } = state;
|
||||
if (
|
||||
arrow &&
|
||||
/^top|bottom/.test(placement) &&
|
||||
/-start|-end$/.test(placement)
|
||||
) {
|
||||
const horizontalPosition = placement.split('-')[1];
|
||||
const offset =
|
||||
horizontalPosition === 'start'
|
||||
? 28
|
||||
: state.elements.popper.clientWidth - 56;
|
||||
arrow.style.transform = `translate3d(${offset}px, 0px, 0px)`;
|
||||
}
|
||||
},
|
||||
},
|
||||
);
|
||||
const shepherdTour = new Shepherd.Tour(settings.tourShepherdConfig);
|
||||
shepherdTour.on('cancel', () => {
|
||||
that.model.set('isActive', false);
|
||||
});
|
||||
this.model.set({ isActive: true, activeTour: $tour });
|
||||
shepherdTour.on('complete', () => {
|
||||
that.model.set('isActive', false);
|
||||
});
|
||||
|
||||
tourItems.forEach((tourStepConfig, index) => {
|
||||
// Create the configuration for a given tour step by using values
|
||||
// defined in TourViewBuilder.
|
||||
// @see \Drupal\tour\TourViewBuilder::viewMultiple()
|
||||
const tourItemOptions = {
|
||||
title: tourStepConfig.title
|
||||
? Drupal.checkPlain(tourStepConfig.title)
|
||||
: null,
|
||||
text: () => Drupal.theme('tourItemContent', tourStepConfig),
|
||||
attachTo: tourStepConfig.attachTo,
|
||||
buttons: [Drupal.tour.nextButton(shepherdTour, tourStepConfig)],
|
||||
classes: tourStepConfig.classes,
|
||||
index,
|
||||
};
|
||||
|
||||
tourItemOptions.when = {
|
||||
show() {
|
||||
const nextButton =
|
||||
shepherdTour.currentStep.el.querySelector('footer button');
|
||||
|
||||
// Drupal disables Shepherd's built in focus after item
|
||||
// creation functionality due to focus being set on the tour
|
||||
// item container after every scroll and resize event. In its
|
||||
// place, the 'next' button is focused here.
|
||||
nextButton.focus();
|
||||
|
||||
// When Stable or Stable 9 are part of the active theme, the
|
||||
// Drupal.tour.convertToJoyrideMarkup() function is available.
|
||||
// This function converts Shepherd markup to Joyride markup,
|
||||
// facilitating the use of the Shepherd library that is
|
||||
// backwards compatible with customizations intended for
|
||||
// Joyride.
|
||||
// The Drupal.tour.convertToJoyrideMarkup() function is
|
||||
// internal, and will eventually be removed from Drupal core.
|
||||
if (Drupal.tour.hasOwnProperty('convertToJoyrideMarkup')) {
|
||||
Drupal.tour.convertToJoyrideMarkup(shepherdTour);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
shepherdTour.addStep(tourItemOptions);
|
||||
});
|
||||
shepherdTour.start();
|
||||
this.model.set({ isActive: true, activeTour: shepherdTour });
|
||||
}
|
||||
} else {
|
||||
this.model.get('activeTour').joyride('destroy');
|
||||
this.model.get('activeTour').cancel();
|
||||
this.model.set({ isActive: false, activeTour: [] });
|
||||
}
|
||||
},
|
||||
|
|
@ -187,24 +268,13 @@
|
|||
/**
|
||||
* Gets the tour.
|
||||
*
|
||||
* @return {jQuery}
|
||||
* A jQuery element pointing to an `<ol>` containing tour items.
|
||||
* @return {array}
|
||||
* An array of Shepherd tour item objects.
|
||||
*/
|
||||
_getTour() {
|
||||
return this.model.get('tour');
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the relevant document as a jQuery element.
|
||||
*
|
||||
* @return {jQuery}
|
||||
* A jQuery element pointing to the document within which a tour would be
|
||||
* started given the current state.
|
||||
*/
|
||||
_getDocument() {
|
||||
return $(document);
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes tour items for elements that don't have matching page elements.
|
||||
*
|
||||
|
|
@ -215,62 +285,133 @@
|
|||
* page element or don't have the "bar" class.</caption>
|
||||
* http://example.com/foo?tips=bar
|
||||
*
|
||||
* @param {jQuery} $tour
|
||||
* A jQuery element pointing to an `<ol>` containing tour items.
|
||||
* @param {jQuery} $document
|
||||
* A jQuery element pointing to the document within which the elements
|
||||
* should be sought.
|
||||
*
|
||||
* @see Drupal.tour.views.ToggleTourView#_getDocument
|
||||
* @param {Object[]} tourItems
|
||||
* An array containing tour Step config objects.
|
||||
* The object properties relevant to this function:
|
||||
* - classes {string}: A string of classes to be added to the tour step
|
||||
* when rendered.
|
||||
* - selector {string}: The selector a tour step is associated with.
|
||||
*/
|
||||
_removeIrrelevantTourItems($tour, $document) {
|
||||
let removals = false;
|
||||
_removeIrrelevantTourItems(tourItems) {
|
||||
const tips = /tips=([^&]+)/.exec(queryString);
|
||||
$tour.find('li').each(function () {
|
||||
const $this = $(this);
|
||||
const itemId = $this.attr('data-id');
|
||||
const itemClass = $this.attr('data-class');
|
||||
const filteredTour = tourItems.filter((tourItem) => {
|
||||
// If the query parameter 'tips' is set, remove all tips that don't
|
||||
// have the matching class.
|
||||
if (tips && !$(this).hasClass(tips[1])) {
|
||||
removals = true;
|
||||
$this.remove();
|
||||
return;
|
||||
}
|
||||
// Remove tip from the DOM if there is no corresponding page element.
|
||||
// have the matching class. The `tourItem` variable is a step config
|
||||
// object, and the 'classes' property is a ShepherdJS Step() config
|
||||
// option that provides a string.
|
||||
if (
|
||||
(!itemId && !itemClass) ||
|
||||
(itemId && $document.find(`#${itemId}`).length) ||
|
||||
(itemClass && $document.find(`.${itemClass}`).length)
|
||||
tips &&
|
||||
tourItem.hasOwnProperty('classes') &&
|
||||
tourItem.classes.indexOf(tips[1]) === -1
|
||||
) {
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
removals = true;
|
||||
$this.remove();
|
||||
|
||||
// If a selector is configured but there isn't a matching element,
|
||||
// return false.
|
||||
return !(
|
||||
tourItem.selector && !document.querySelector(tourItem.selector)
|
||||
);
|
||||
});
|
||||
|
||||
// If there were removals, we'll have to do some clean-up.
|
||||
if (removals) {
|
||||
const total = $tour.find('li').length;
|
||||
if (!total) {
|
||||
this.model.set({ tour: [] });
|
||||
}
|
||||
// If there are tours filtered, we'll have to update model.
|
||||
if (tourItems.length !== filteredTour.length) {
|
||||
filteredTour.forEach((filteredTourItem, filteredTourItemId) => {
|
||||
filteredTour[filteredTourItemId].counter = Drupal.t(
|
||||
'!tour_item of !total',
|
||||
{
|
||||
'!tour_item': filteredTourItemId + 1,
|
||||
'!total': filteredTour.length,
|
||||
},
|
||||
);
|
||||
|
||||
$tour
|
||||
.find('li')
|
||||
// Rebuild the progress data.
|
||||
.each(function (index) {
|
||||
const progress = Drupal.t('!tour_item of !total', {
|
||||
'!tour_item': index + 1,
|
||||
'!total': total,
|
||||
});
|
||||
$(this).find('.tour-progress').text(progress);
|
||||
})
|
||||
// Update the last item to have "End tour" as the button.
|
||||
.eq(-1)
|
||||
.attr('data-text', Drupal.t('End tour'));
|
||||
if (filteredTourItemId === filteredTour.length - 1) {
|
||||
filteredTour[filteredTourItemId].cancelText =
|
||||
Drupal.t('End tour');
|
||||
}
|
||||
});
|
||||
this.model.set('tour', filteredTour);
|
||||
}
|
||||
},
|
||||
},
|
||||
);
|
||||
})(jQuery, Backbone, Drupal, document);
|
||||
|
||||
/**
|
||||
* Provides an object that will become the tour item's 'next' button.
|
||||
*
|
||||
* Similar to a theme function, themes can override this function to customize
|
||||
* the resulting button. Unlike a theme function, it returns an object instead
|
||||
* of a string, which is why it is not part of Drupal.theme.
|
||||
*
|
||||
* @param {Tour} shepherdTour
|
||||
* A class representing a Shepherd site tour.
|
||||
* @param {Object} tourStepConfig
|
||||
* An object generated in TourViewBuilder used for creating the options
|
||||
* passed to `Tour.addStep(options)`.
|
||||
* Contains the following properties:
|
||||
* - id {string}: The tour.tip ID specified by its config
|
||||
* - selector {string|null}: The selector of the element the tour step is
|
||||
* attaching to.
|
||||
* - module {string}: The module providing the tip plugin used by this step.
|
||||
* - counter {string}: A string indicating which tour step this is out of
|
||||
* how many total steps.
|
||||
* - attachTo {Object} This is directly mapped to the `attachTo` Step()
|
||||
* option. It has two properties:
|
||||
* - element {string}: The selector of the element the step attaches to.
|
||||
* - on {string}: a PopperJS compatible string to specify step position.
|
||||
* - classes {string}: Will be added to the class attribute of the step.
|
||||
* - body {string}: Markup that is mapped to the `text` Step() option. Will
|
||||
* become the step content.
|
||||
* - title {string}: is mapped to the `title` Step() option.
|
||||
*
|
||||
* @return {{classes: string, action: string, text: string}}
|
||||
* An object structured in the manner Shepherd requires to create the
|
||||
* 'next' button.
|
||||
*
|
||||
* @see https://shepherdjs.dev/docs/Tour.html
|
||||
* @see \Drupal\tour\TourViewBuilder::viewMultiple()
|
||||
* @see https://shepherdjs.dev/docs/Step.html
|
||||
*/
|
||||
Drupal.tour.nextButton = (shepherdTour, tourStepConfig) => {
|
||||
return {
|
||||
classes: 'button button--primary',
|
||||
text: tourStepConfig.cancelText
|
||||
? tourStepConfig.cancelText
|
||||
: Drupal.t('Next'),
|
||||
action: tourStepConfig.cancelText
|
||||
? shepherdTour.cancel
|
||||
: shepherdTour.next,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Theme function for tour item content.
|
||||
*
|
||||
* @param {Object} tourStepConfig
|
||||
* An object generated in TourViewBuilder used for creating the options
|
||||
* passed to `Tour.addStep(options)`.
|
||||
* Contains the following properties:
|
||||
* - id {string}: The tour.tip ID specified by its config
|
||||
* - selector {string|null}: The selector of the element the tour step is
|
||||
* attaching to.
|
||||
* - module {string}: The module providing the tip plugin used by this step.
|
||||
* - counter {string}: A string indicating which tour step this is out of
|
||||
* how many total steps.
|
||||
* - attachTo {Object} This is directly mapped to the `attachTo` Step()
|
||||
* option. It has two properties:
|
||||
* - element {string}: The selector of the element the step attaches to.
|
||||
* - on {string}: a PopperJS compatible string to specify step position.
|
||||
* - classes {string}: Will be added to the class attribute of the step.
|
||||
* - body {string}: Markup that is mapped to the `text` Step() option. Will
|
||||
* become the step content.
|
||||
* - title {string}: is mapped to the `title` Step() option.
|
||||
*
|
||||
* @return {string}
|
||||
* The tour item content markup.
|
||||
*
|
||||
* @see \Drupal\tour\TourViewBuilder::viewMultiple()
|
||||
* @see https://shepherdjs.dev/docs/Step.html
|
||||
*/
|
||||
Drupal.theme.tourItemContent = (tourStepConfig) =>
|
||||
`${tourStepConfig.body}<div class="tour-progress">${tourStepConfig.counter}</div>`;
|
||||
})(jQuery, Backbone, Drupal, drupalSettings, document, window.Shepherd);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* @preserve
|
||||
**/
|
||||
|
||||
(function ($, Backbone, Drupal, document) {
|
||||
(function ($, Backbone, Drupal, settings, document, Shepherd) {
|
||||
var queryString = decodeURI(window.location.search);
|
||||
Drupal.behaviors.tour = {
|
||||
attach: function attach(context) {
|
||||
|
|
@ -15,9 +15,13 @@
|
|||
el: $(context).find('#toolbar-tab-tour'),
|
||||
model: model
|
||||
});
|
||||
model.on('change:isActive', function (model, isActive) {
|
||||
model.on('change:isActive', function (tourModel, isActive) {
|
||||
$(document).trigger(isActive ? 'drupalTourStarted' : 'drupalTourStopped');
|
||||
}).set('tour', $(context).find('ol#tour'));
|
||||
});
|
||||
|
||||
if (settings._tour_internal) {
|
||||
model.set('tour', settings._tour_internal);
|
||||
}
|
||||
|
||||
if (/tour=?/i.test(queryString)) {
|
||||
model.set('isActive', true);
|
||||
|
|
@ -47,36 +51,71 @@
|
|||
render: function render() {
|
||||
this.$el.toggleClass('hidden', this._getTour().length === 0);
|
||||
var isActive = this.model.get('isActive');
|
||||
this.$el.find('button').toggleClass('is-active', isActive).prop('aria-pressed', isActive);
|
||||
this.$el.find('button').toggleClass('is-active', isActive).attr('aria-pressed', isActive);
|
||||
return this;
|
||||
},
|
||||
toggleTour: function toggleTour() {
|
||||
if (this.model.get('isActive')) {
|
||||
var $tour = this._getTour();
|
||||
|
||||
this._removeIrrelevantTourItems($tour, this._getDocument());
|
||||
this._removeIrrelevantTourItems(this._getTour());
|
||||
|
||||
var tourItems = this.model.get('tour');
|
||||
var that = this;
|
||||
var close = Drupal.t('Close');
|
||||
|
||||
if ($tour.find('li').length) {
|
||||
$tour.joyride({
|
||||
autoStart: true,
|
||||
postRideCallback: function postRideCallback() {
|
||||
that.model.set('isActive', false);
|
||||
},
|
||||
template: {
|
||||
link: "<a href=\"#close\" class=\"joyride-close-tip\" aria-label=\"".concat(close, "\">×</a>"),
|
||||
button: '<a href="#" class="button button--primary joyride-next-tip"></a>'
|
||||
if (tourItems.length) {
|
||||
settings.tourShepherdConfig.defaultStepOptions.popperOptions.modifiers.push({
|
||||
name: 'moveArrowJoyridePosition',
|
||||
enabled: true,
|
||||
phase: 'write',
|
||||
fn: function fn(_ref) {
|
||||
var state = _ref.state;
|
||||
var arrow = state.elements.arrow;
|
||||
var placement = state.placement;
|
||||
|
||||
if (arrow && /^top|bottom/.test(placement) && /-start|-end$/.test(placement)) {
|
||||
var horizontalPosition = placement.split('-')[1];
|
||||
var offset = horizontalPosition === 'start' ? 28 : state.elements.popper.clientWidth - 56;
|
||||
arrow.style.transform = "translate3d(".concat(offset, "px, 0px, 0px)");
|
||||
}
|
||||
}
|
||||
});
|
||||
var shepherdTour = new Shepherd.Tour(settings.tourShepherdConfig);
|
||||
shepherdTour.on('cancel', function () {
|
||||
that.model.set('isActive', false);
|
||||
});
|
||||
shepherdTour.on('complete', function () {
|
||||
that.model.set('isActive', false);
|
||||
});
|
||||
tourItems.forEach(function (tourStepConfig, index) {
|
||||
var tourItemOptions = {
|
||||
title: tourStepConfig.title ? Drupal.checkPlain(tourStepConfig.title) : null,
|
||||
text: function text() {
|
||||
return Drupal.theme('tourItemContent', tourStepConfig);
|
||||
},
|
||||
attachTo: tourStepConfig.attachTo,
|
||||
buttons: [Drupal.tour.nextButton(shepherdTour, tourStepConfig)],
|
||||
classes: tourStepConfig.classes,
|
||||
index: index
|
||||
};
|
||||
tourItemOptions.when = {
|
||||
show: function show() {
|
||||
var nextButton = shepherdTour.currentStep.el.querySelector('footer button');
|
||||
nextButton.focus();
|
||||
|
||||
if (Drupal.tour.hasOwnProperty('convertToJoyrideMarkup')) {
|
||||
Drupal.tour.convertToJoyrideMarkup(shepherdTour);
|
||||
}
|
||||
}
|
||||
};
|
||||
shepherdTour.addStep(tourItemOptions);
|
||||
});
|
||||
shepherdTour.start();
|
||||
this.model.set({
|
||||
isActive: true,
|
||||
activeTour: $tour
|
||||
activeTour: shepherdTour
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.model.get('activeTour').joyride('destroy');
|
||||
this.model.get('activeTour').cancel();
|
||||
this.model.set({
|
||||
isActive: false,
|
||||
activeTour: []
|
||||
|
|
@ -91,48 +130,41 @@
|
|||
_getTour: function _getTour() {
|
||||
return this.model.get('tour');
|
||||
},
|
||||
_getDocument: function _getDocument() {
|
||||
return $(document);
|
||||
},
|
||||
_removeIrrelevantTourItems: function _removeIrrelevantTourItems($tour, $document) {
|
||||
var removals = false;
|
||||
_removeIrrelevantTourItems: function _removeIrrelevantTourItems(tourItems) {
|
||||
var tips = /tips=([^&]+)/.exec(queryString);
|
||||
$tour.find('li').each(function () {
|
||||
var $this = $(this);
|
||||
var itemId = $this.attr('data-id');
|
||||
var itemClass = $this.attr('data-class');
|
||||
|
||||
if (tips && !$(this).hasClass(tips[1])) {
|
||||
removals = true;
|
||||
$this.remove();
|
||||
return;
|
||||
var filteredTour = tourItems.filter(function (tourItem) {
|
||||
if (tips && tourItem.hasOwnProperty('classes') && tourItem.classes.indexOf(tips[1]) === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!itemId && !itemClass || itemId && $document.find("#".concat(itemId)).length || itemClass && $document.find(".".concat(itemClass)).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
removals = true;
|
||||
$this.remove();
|
||||
return !(tourItem.selector && !document.querySelector(tourItem.selector));
|
||||
});
|
||||
|
||||
if (removals) {
|
||||
var total = $tour.find('li').length;
|
||||
|
||||
if (!total) {
|
||||
this.model.set({
|
||||
tour: []
|
||||
if (tourItems.length !== filteredTour.length) {
|
||||
filteredTour.forEach(function (filteredTourItem, filteredTourItemId) {
|
||||
filteredTour[filteredTourItemId].counter = Drupal.t('!tour_item of !total', {
|
||||
'!tour_item': filteredTourItemId + 1,
|
||||
'!total': filteredTour.length
|
||||
});
|
||||
}
|
||||
|
||||
$tour.find('li').each(function (index) {
|
||||
var progress = Drupal.t('!tour_item of !total', {
|
||||
'!tour_item': index + 1,
|
||||
'!total': total
|
||||
});
|
||||
$(this).find('.tour-progress').text(progress);
|
||||
}).eq(-1).attr('data-text', Drupal.t('End tour'));
|
||||
if (filteredTourItemId === filteredTour.length - 1) {
|
||||
filteredTour[filteredTourItemId].cancelText = Drupal.t('End tour');
|
||||
}
|
||||
});
|
||||
this.model.set('tour', filteredTour);
|
||||
}
|
||||
}
|
||||
});
|
||||
})(jQuery, Backbone, Drupal, document);
|
||||
|
||||
Drupal.tour.nextButton = function (shepherdTour, tourStepConfig) {
|
||||
return {
|
||||
classes: 'button button--primary',
|
||||
text: tourStepConfig.cancelText ? tourStepConfig.cancelText : Drupal.t('Next'),
|
||||
action: tourStepConfig.cancelText ? shepherdTour.cancel : shepherdTour.next
|
||||
};
|
||||
};
|
||||
|
||||
Drupal.theme.tourItemContent = function (tourStepConfig) {
|
||||
return "".concat(tourStepConfig.body, "<div class=\"tour-progress\">").concat(tourStepConfig.counter, "</div>");
|
||||
};
|
||||
})(jQuery, Backbone, Drupal, drupalSettings, document, window.Shepherd);
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
namespace Drupal\tour\Plugin\tour\tip;
|
||||
|
||||
use Drupal\Component\Utility\Html;
|
||||
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
|
||||
use Drupal\Core\Utility\Token;
|
||||
use Drupal\tour\TipPluginBase;
|
||||
use Drupal\tour\TourTipPluginInterface;
|
||||
use Symfony\Component\DependencyInjection\ContainerInterface;
|
||||
|
||||
/**
|
||||
|
|
@ -16,7 +16,7 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
|
|||
* title = @Translation("Text")
|
||||
* )
|
||||
*/
|
||||
class TipPluginText extends TipPluginBase implements ContainerFactoryPluginInterface {
|
||||
class TipPluginText extends TipPluginBase implements ContainerFactoryPluginInterface, TourTipPluginInterface {
|
||||
|
||||
/**
|
||||
* The body text which is used for render of this Text Tip.
|
||||
|
|
@ -32,20 +32,6 @@ class TipPluginText extends TipPluginBase implements ContainerFactoryPluginInter
|
|||
*/
|
||||
protected $token;
|
||||
|
||||
/**
|
||||
* The forced position of where the tip will be located.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $location;
|
||||
|
||||
/**
|
||||
* Unique aria-id.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $ariaId;
|
||||
|
||||
/**
|
||||
* Constructs a \Drupal\tour\Plugin\tour\tip\TipPluginText object.
|
||||
*
|
||||
|
|
@ -70,58 +56,27 @@ class TipPluginText extends TipPluginBase implements ContainerFactoryPluginInter
|
|||
return new static($configuration, $plugin_id, $plugin_definition, $container->get('token'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an ID that is guaranteed uniqueness.
|
||||
*
|
||||
* @return string
|
||||
* A unique id to be used to generate aria attributes.
|
||||
*/
|
||||
public function getAriaId() {
|
||||
if (!$this->ariaId) {
|
||||
$this->ariaId = Html::getUniqueId($this->get('id'));
|
||||
}
|
||||
return $this->ariaId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns body of the text tip.
|
||||
*
|
||||
* @return string
|
||||
* The tip body.
|
||||
*/
|
||||
public function getBody() {
|
||||
return $this->get('body');
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns location of the text tip.
|
||||
*
|
||||
* @return string
|
||||
* The tip location.
|
||||
*/
|
||||
public function getLocation() {
|
||||
return $this->get('location');
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getAttributes() {
|
||||
$attributes = parent::getAttributes();
|
||||
$attributes['data-aria-describedby'] = 'tour-tip-' . $this->getAriaId() . '-contents';
|
||||
$attributes['data-aria-labelledby'] = 'tour-tip-' . $this->getAriaId() . '-label';
|
||||
if ($location = $this->get('location')) {
|
||||
$attributes['data-options'] = 'tipLocation:' . $location;
|
||||
}
|
||||
return $attributes;
|
||||
public function getBody(): array {
|
||||
return [
|
||||
'#type' => 'html_tag',
|
||||
'#tag' => 'p',
|
||||
'#value' => $this->token->replace($this->get('body')),
|
||||
'#attributes' => [
|
||||
'class' => ['tour-tip-body'],
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getOutput() {
|
||||
$output = '<h2 class="tour-tip-label" id="tour-tip-' . $this->getAriaId() . '-label">' . Html::escape($this->getLabel()) . '</h2>';
|
||||
$output .= '<p class="tour-tip-body" id="tour-tip-' . $this->getAriaId() . '-contents">' . $this->token->replace($this->getBody()) . '</p>';
|
||||
// Call parent to trigger error when calling this function.
|
||||
parent::getOutput();
|
||||
$output = '<p class="tour-tip-body">' . $this->token->replace($this->get('body')) . '</p>';
|
||||
return ['#markup' => $output];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,9 +32,24 @@ abstract class TipPluginBase extends PluginBase implements TipPluginInterface {
|
|||
* The attributes that will be applied to the markup of this tip.
|
||||
*
|
||||
* @var array
|
||||
*
|
||||
* @deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. There is no
|
||||
* direct replacement. Note that this was never actually used.
|
||||
*
|
||||
* @see https://www.drupal.org/node/3204096
|
||||
*/
|
||||
protected $attributes;
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function __construct(array $configuration, $plugin_id, $plugin_definition) {
|
||||
parent::__construct($configuration, $plugin_id, $plugin_definition);
|
||||
if (!$this instanceof TourTipPluginInterface) {
|
||||
@trigger_error('Implementing ' . __NAMESPACE__ . '\TipPluginInterface without also implementing ' . __NAMESPACE__ . '\TourTipPluginInterface is deprecated in drupal:9.2.0. See https://www.drupal.org/node/3204096', E_USER_DEPRECATED);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
|
|
@ -58,9 +73,34 @@ abstract class TipPluginBase extends PluginBase implements TipPluginInterface {
|
|||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*
|
||||
* @todo remove in https://drupal.org/node/3195193
|
||||
*/
|
||||
public function getAttributes() {
|
||||
return $this->get('attributes') ?: [];
|
||||
// This method is deprecated and rewritten to be as backwards compatible as
|
||||
// possible with pre-existing uses. Due to the flexibility of tip plugins,
|
||||
// this backwards compatibility can't be fully guaranteed. Because of this,
|
||||
// we trigger a warning to caution the use of this function. This warning
|
||||
// does not stop page execution, but will be logged.
|
||||
trigger_error(__NAMESPACE__ . '\TipPluginInterface::getAttributes is deprecated. Tour tip plugins should implement ' . __NAMESPACE__ . '\TourTipPluginInterface and Tour configs should use the \'selector\' property instead of \'attributes\' to target an element.', E_USER_WARNING);
|
||||
|
||||
// The _tour_update_joyride() updates the deprecated 'attributes' property
|
||||
// to the current 'selector' property. It's possible that additional
|
||||
// attributes not supported by Drupal core exist and these need to merged
|
||||
// in.
|
||||
$attributes = $this->get('attributes') ?: [];
|
||||
|
||||
// Convert the selector property to the expected structure.
|
||||
$selector = $this->get('selector');
|
||||
$first_char = substr($selector, 0, 1);
|
||||
if ($first_char === '#') {
|
||||
$attributes['data-id'] = substr($selector, 1);
|
||||
}
|
||||
elseif ($first_char === '.') {
|
||||
$attributes['data-class'] = substr($selector, 1);
|
||||
}
|
||||
|
||||
return $attributes;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -79,4 +119,81 @@ abstract class TipPluginBase extends PluginBase implements TipPluginInterface {
|
|||
$this->configuration[$key] = $value;
|
||||
}
|
||||
|
||||
/**
|
||||
* This method should not be used. It is deprecated from TipPluginInterface.
|
||||
*
|
||||
* @return array
|
||||
* An intentionally empty array.
|
||||
*
|
||||
* @todo remove in https://drupal.org/node/3195193
|
||||
*/
|
||||
public function getOutput() {
|
||||
// The getOutput() method was a requirement of TipPluginInterface, but was
|
||||
// not part of TipPluginBase prior to it being deprecated. As a result, all
|
||||
// tip plugins have their own implementations of getOutput() making it
|
||||
// unlikely that this implementation will be called. If it does get called,
|
||||
// however, the tour tip will have no content due to this method returning
|
||||
// an empty array. To help tour tips from unexpectedly having no content, a
|
||||
// warning is triggered. This warning does not stop page
|
||||
// execution, but will be logged.
|
||||
trigger_error(__NAMESPACE__ . 'TipPluginInterface::getOutput is deprecated. Use getBody() instead. See https://www.drupal.org/node/3204096', E_USER_WARNING);
|
||||
|
||||
// This class must implement TipPluginInterface, but this method is
|
||||
// deprecated. An empty array is returned to meet interface requirements.
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines the placement of the tip relative to the element.
|
||||
*
|
||||
* If null, the tip will automatically determine the best position based on
|
||||
* the element's position in the viewport.
|
||||
*
|
||||
* @return string|null
|
||||
* The tip placement relative to the element.
|
||||
*
|
||||
* @see https://shepherdjs.dev/docs/Step.html
|
||||
*/
|
||||
public function getLocation(): ?string {
|
||||
$location = $this->get('position');
|
||||
|
||||
// The location values accepted by PopperJS, the library used for
|
||||
// positioning the tip.
|
||||
assert(in_array(trim($location), [
|
||||
'auto',
|
||||
'auto-start',
|
||||
'auto-end',
|
||||
'top',
|
||||
'top-start',
|
||||
'top-end',
|
||||
'bottom',
|
||||
'bottom-start',
|
||||
'bottom-end',
|
||||
'right',
|
||||
'right-start',
|
||||
'right-end',
|
||||
'left',
|
||||
'left-start',
|
||||
'left-end',
|
||||
'',
|
||||
], TRUE), "$location is not a valid Tour Tip position value");
|
||||
|
||||
return $location;
|
||||
}
|
||||
|
||||
/**
|
||||
* The selector the tour tip will attach to.
|
||||
*
|
||||
* This is mapped to the `attachTo.element` property of the Shepherd tooltip
|
||||
* options.
|
||||
*
|
||||
* @return null|string
|
||||
* A selector string, or null for an unattached tip.
|
||||
*
|
||||
* @see https://shepherdjs.dev/docs/Step.html
|
||||
*/
|
||||
public function getSelector(): ?string {
|
||||
return $this->get('selector');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@ interface TipPluginInterface {
|
|||
/**
|
||||
* Returns an array of attributes for the tip wrapper.
|
||||
*
|
||||
* @deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. The
|
||||
* attributes property is no longer used.
|
||||
* @see https://www.drupal.org/node/3204093
|
||||
*
|
||||
* @return array
|
||||
* An array of classes and values.
|
||||
*/
|
||||
|
|
@ -69,6 +73,11 @@ interface TipPluginInterface {
|
|||
/**
|
||||
* Returns a renderable array.
|
||||
*
|
||||
* @deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Use
|
||||
* getBody() instead, and do not include the tip label in the returned
|
||||
* output.
|
||||
* @see https://www.drupal.org/node/3195234
|
||||
*
|
||||
* @return array
|
||||
* A renderable array.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\tour;
|
||||
|
||||
/**
|
||||
* Defines an interface for tour items.
|
||||
*
|
||||
* @see \Drupal\tour\Annotation\Tip
|
||||
* @see \Drupal\tour\TipPluginBase
|
||||
* @see \Drupal\tour\TipPluginManager
|
||||
* @see plugin_api
|
||||
*
|
||||
* @todo move all methods to TipPluginInterface and deprecate this interface in
|
||||
* https://drupal.org/node/3195193
|
||||
*/
|
||||
interface TourTipPluginInterface extends TipPluginInterface {
|
||||
|
||||
/**
|
||||
* Returns the selector the tour tip will attach to.
|
||||
*
|
||||
* This typically maps to the Shepherd Step options `attachTo.element`
|
||||
* property.
|
||||
*
|
||||
* @return null|string
|
||||
* A selector string, or null for an unattached tip.
|
||||
*
|
||||
* @see https://shepherdjs.dev/docs/Step.html
|
||||
*/
|
||||
public function getSelector() : ?string;
|
||||
|
||||
/**
|
||||
* Returns the body content of the tooltip.
|
||||
*
|
||||
* This typically maps to the Shepherd Step options `text` property.
|
||||
*
|
||||
* @return array
|
||||
* A render array.
|
||||
*
|
||||
* @see https://shepherdjs.dev/docs/Step.html
|
||||
*/
|
||||
public function getBody(): array;
|
||||
|
||||
/**
|
||||
* Returns the configured placement of the tip relative to the element.
|
||||
*
|
||||
* If null, the tip will automatically determine the best position based on
|
||||
* the element's position in the viewport.
|
||||
*
|
||||
* This typically maps to the Shepherd Step options `attachTo.on` property.
|
||||
*
|
||||
* @return string|null
|
||||
* The tip placement relative to the element.
|
||||
*
|
||||
* @see https://shepherdjs.dev/docs/Step.html
|
||||
*/
|
||||
public function getLocation(): ?string;
|
||||
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
namespace Drupal\tour;
|
||||
|
||||
use Drupal\Core\Cache\Cache;
|
||||
use Drupal\Core\Entity\EntityViewBuilder;
|
||||
use Drupal\Component\Utility\Html;
|
||||
|
||||
|
|
@ -15,58 +16,171 @@ class TourViewBuilder extends EntityViewBuilder {
|
|||
*/
|
||||
public function viewMultiple(array $entities = [], $view_mode = 'full', $langcode = NULL) {
|
||||
/** @var \Drupal\tour\TourInterface[] $entities */
|
||||
$build = [];
|
||||
$tour = [];
|
||||
$cache_tags = [];
|
||||
$total_tips = 0;
|
||||
foreach ($entities as $entity_id => $entity) {
|
||||
$tips = $entity->getTips();
|
||||
$count = count($tips);
|
||||
$list_items = [];
|
||||
$tour[$entity_id] = $entity->getTips();
|
||||
$total_tips += count($tour[$entity_id]);
|
||||
$cache_tags = Cache::mergeTags($cache_tags, $entity->getCacheTags());
|
||||
}
|
||||
|
||||
$items = [];
|
||||
foreach ($tour as $tour_id => $tips) {
|
||||
$tourEntity = $entities[$tour_id];
|
||||
|
||||
foreach ($tips as $index => $tip) {
|
||||
if ($output = $tip->getOutput()) {
|
||||
$attributes = [
|
||||
'class' => [
|
||||
'tip-module-' . Html::cleanCssIdentifier($entity->getModule()),
|
||||
'tip-type-' . Html::cleanCssIdentifier($tip->getPluginId()),
|
||||
'tip-' . Html::cleanCssIdentifier($tip->id()),
|
||||
],
|
||||
$classes = [
|
||||
'tip-module-' . Html::getClass($tourEntity->getModule()),
|
||||
'tip-type-' . Html::getClass($tip->getPluginId()),
|
||||
'tip-' . Html::getClass($tip->id()),
|
||||
];
|
||||
|
||||
$selector = $tip->getSelector();
|
||||
$location = $tip->getLocation();
|
||||
|
||||
// If $location is null, it's possible that a value is available
|
||||
// by directly accessing the `location` property. This can occur if
|
||||
// a tour with the deprecated `location` property was installed and
|
||||
// tour_post_update_joyride_selectors_to_selector_property() has not run
|
||||
// with it installed.
|
||||
// @see tour_post_update_joyride_selectors_to_selector_property()
|
||||
|
||||
if (!$location && $location = $tip->get('location')) {
|
||||
// If the `location` property still has a value, this means the tip
|
||||
// is configured for Joyride. The position value must be appended with
|
||||
// '-start' to provide the same experience as Joyride.
|
||||
$location = $location . '-start';
|
||||
}
|
||||
|
||||
// @todo remove conditional in https://drupal.org/node/3195193, as all
|
||||
// instances will already be instances of TourTipPluginInterface.
|
||||
if ($tip instanceof TourTipPluginInterface) {
|
||||
$body_render_array = $tip->getBody();
|
||||
$body = (string) \Drupal::service('renderer')->renderPlain($body_render_array);
|
||||
$output = [
|
||||
'body' => $body,
|
||||
'title' => Html::escape($tip->getLabel()),
|
||||
];
|
||||
$list_items[] = [
|
||||
'output' => $output,
|
||||
'counter' => [
|
||||
'#type' => 'container',
|
||||
'#attributes' => [
|
||||
'class' => [
|
||||
'tour-progress',
|
||||
],
|
||||
],
|
||||
'#children' => t('@tour_item of @total', ['@tour_item' => $index + 1, '@total' => $count]),
|
||||
|
||||
$selector = $tip->getSelector();
|
||||
}
|
||||
else {
|
||||
// This condition is met if the tip does not implement
|
||||
// TourTipPluginInterface. This means the tour tip must be constructed
|
||||
// with the deprecated getOutput() method. The resulting tour tip
|
||||
// should be largely identical, with the following exceptions:
|
||||
// 1 - If the tour tip `attributes` property included anything other
|
||||
// than `data-class` or `data-id`, these additional attributes
|
||||
// will not be available in the resulting tour tip. Note that such
|
||||
// uses are uncommon.
|
||||
// 2 - Although the tour tip content is identical, the markup
|
||||
// structure will be different due to being rendered by Shepherd
|
||||
// instead of Joyride. Themes extending Stable or Stable 9 will
|
||||
// not experience these changes as a script is provided that
|
||||
// reconstructs each tip to match Joyride's markup structure.
|
||||
$attributes = (array) $tip->get('attributes');
|
||||
if (array_diff(['data-class', 'data-id'], array_keys($attributes + ['data-class', 'data-id']))) {
|
||||
trigger_error('The tour tips only support data-class and data-id attributes and they will have to be upgraded manually. See https://www.drupal.org/node/3204093', E_USER_WARNING);
|
||||
}
|
||||
$tour_render_array = $tip->getOutput();
|
||||
if (!empty($tour_render_array)) {
|
||||
// The output render array intentionally omits title. The deprecated
|
||||
// getOutput() returns a render array with the title and main
|
||||
// content.
|
||||
$output = [
|
||||
'body' => (string) \Drupal::service('renderer')->renderPlain($tour_render_array),
|
||||
];
|
||||
|
||||
// Add a class so JavaScript in Stable themes can identify deprecated
|
||||
// tip plugins. The logic used to make markup backwards compatible
|
||||
// with Joyride is different depending on the type of
|
||||
// plugin used.
|
||||
$classes[] = 'tip-uses-get-output';
|
||||
}
|
||||
}
|
||||
|
||||
if ($output) {
|
||||
$items[] = [
|
||||
'id' => $tip->id(),
|
||||
'selector' => $selector,
|
||||
'module' => $tourEntity->getModule(),
|
||||
'type' => $tip->getPluginId(),
|
||||
'counter' => $this->t('@tour_item of @total', [
|
||||
'@tour_item' => $index + 1,
|
||||
'@total' => $total_tips,
|
||||
]),
|
||||
'attachTo' => [
|
||||
'element' => $selector,
|
||||
'on' => $location ?? 'bottom-start',
|
||||
],
|
||||
'#wrapper_attributes' => $tip->getAttributes() + $attributes,
|
||||
];
|
||||
// Shepherd expects classes to be provided as a string.
|
||||
'classes' => implode(' ', $classes),
|
||||
] + $output;
|
||||
}
|
||||
}
|
||||
// If there is at least one tour item, build the tour.
|
||||
if ($list_items) {
|
||||
end($list_items);
|
||||
$key = key($list_items);
|
||||
$list_items[$key]['#wrapper_attributes']['data-text'] = t('End tour');
|
||||
$build[$entity_id] = [
|
||||
'#theme' => 'item_list',
|
||||
'#items' => $list_items,
|
||||
'#list_type' => 'ol',
|
||||
'#attributes' => [
|
||||
'id' => 'tour',
|
||||
'class' => [
|
||||
'hidden',
|
||||
}
|
||||
|
||||
// If there is at least one tour item, build the tour.
|
||||
if ($items) {
|
||||
end($items);
|
||||
$key = key($items);
|
||||
$items[$key]['cancelText'] = t('End tour');
|
||||
}
|
||||
|
||||
$build = [
|
||||
'#cache' => [
|
||||
'tags' => $cache_tags,
|
||||
],
|
||||
];
|
||||
|
||||
// If at least one tour was built, attach tips and the tour library.
|
||||
if ($items) {
|
||||
$build['#attached']['drupalSettings']['tourShepherdConfig'] = [
|
||||
'defaultStepOptions' => [
|
||||
'classes' => 'drupal-tour',
|
||||
'cancelIcon' => [
|
||||
'enabled' => TRUE,
|
||||
'label' => $this->t('Close'),
|
||||
],
|
||||
'modalOverlayOpeningPadding' => 3,
|
||||
'scrollTo' => [
|
||||
'behavior' => 'smooth',
|
||||
'block' => 'center',
|
||||
],
|
||||
'popperOptions' => [
|
||||
'modifiers' => [
|
||||
// Prevent overlap with the element being highlighted.
|
||||
[
|
||||
'name' => 'offset',
|
||||
'options' => [
|
||||
'offset' => [-10, 20],
|
||||
],
|
||||
],
|
||||
// Pad the arrows so they don't hit the edge of rounded corners.
|
||||
[
|
||||
'name' => 'arrow',
|
||||
'options' => [
|
||||
'padding' => 12,
|
||||
],
|
||||
],
|
||||
// Disable Shepherd's focusAfterRender modifier, which results in
|
||||
// the tour item container being focused on any scroll or resize
|
||||
// event.
|
||||
[
|
||||
'name' => 'focusAfterRender',
|
||||
'enabled' => FALSE,
|
||||
],
|
||||
|
||||
],
|
||||
],
|
||||
'#cache' => [
|
||||
'tags' => $entity->getCacheTags(),
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
// If at least one tour was built, attach the tour library.
|
||||
if ($build) {
|
||||
],
|
||||
'useModalOverlay' => TRUE,
|
||||
];
|
||||
// This property is used for storing the tour items. It may change without
|
||||
// notice and should not be extended or modified in contrib.
|
||||
// see: https://www.drupal.org/project/drupal/issues/3214593
|
||||
$build['#attached']['drupalSettings']['_tour_internal'] = $items;
|
||||
$build['#attached']['library'][] = 'tour/tour';
|
||||
}
|
||||
return $build;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Adds deprecated tour config for testing updates.
|
||||
*
|
||||
* @see https://www.drupal.org/node/3022401
|
||||
*/
|
||||
|
||||
use Drupal\Core\Database\Database;
|
||||
use Drupal\Core\Serialization\Yaml;
|
||||
|
||||
$connection = Database::getConnection();
|
||||
|
||||
$tour_with_location = Yaml::decode(file_get_contents(__DIR__ . '/legacy_config/tour.tour.tour-test-legacy-location.yml'));
|
||||
$connection->insert('config')
|
||||
->fields([
|
||||
'collection',
|
||||
'name',
|
||||
'data',
|
||||
])
|
||||
->values([
|
||||
'collection' => '',
|
||||
'name' => 'tour.tour.tour-test-legacy-location',
|
||||
'data' => serialize($tour_with_location),
|
||||
])
|
||||
->execute();
|
||||
30
core/modules/tour/tests/fixtures/legacy_config/tour.tour.tour-test-legacy-location.yml
vendored
Normal file
30
core/modules/tour/tests/fixtures/legacy_config/tour.tour.tour-test-legacy-location.yml
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
id: tour-test-legacy-location
|
||||
module: tour_test
|
||||
label: 'Tour test the location property'
|
||||
routes:
|
||||
- route_name: some_tour_route
|
||||
tips:
|
||||
location-test-top:
|
||||
id: location-test-top
|
||||
plugin: text
|
||||
label: 'Top position'
|
||||
body: 'Top that, top that'
|
||||
location: top
|
||||
location-test-bottom:
|
||||
id: location-test-bottom
|
||||
plugin: text
|
||||
label: 'Bottom position'
|
||||
body: 'You can give all that you can, but you will never top that'
|
||||
location: bottom
|
||||
location-test-left:
|
||||
id: location-test-left
|
||||
plugin: text
|
||||
label: 'Left position'
|
||||
body: "You can dream until you're blue but you can never top that, huh-huh!"
|
||||
location: left
|
||||
location-test-right:
|
||||
id: location-test-right
|
||||
plugin: text
|
||||
label: 'Right position'
|
||||
body: "I don't really give a [pause] about trying to top that"
|
||||
location: right
|
||||
29
core/modules/tour/tests/fixtures/legacy_config/tour.tour.tour-test-legacy.yml
vendored
Normal file
29
core/modules/tour/tests/fixtures/legacy_config/tour.tour.tour-test-legacy.yml
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
id: tour-test-legacy
|
||||
module: tour_test
|
||||
label: 'Tour test Legacy'
|
||||
langcode: en
|
||||
routes:
|
||||
- route_name: tour_test.legacy
|
||||
tips:
|
||||
tour-test-legacy-1:
|
||||
id: tour-test-legacy-1
|
||||
plugin: text_legacy
|
||||
label: 'The first tip'
|
||||
body: 'Is <a href="[site:url]">[site:name]</a> always the best dressed?'
|
||||
weight: 1
|
||||
attributes:
|
||||
data-id: tour-test-1
|
||||
tour-test-legacy-3:
|
||||
id: tour-test-legacy-3
|
||||
plugin: image_legacy
|
||||
label: 'The awesome image'
|
||||
url: 'http://local/image.png'
|
||||
weight: 1
|
||||
tour-test-legacy-6:
|
||||
id: tour-test-legacy-6
|
||||
plugin: text_legacy
|
||||
label: 'Im a list'
|
||||
body: '<p>Im all these things:</p><ul><li>Modal</li><li>Awesome</li></ul>'
|
||||
weight: 6
|
||||
attributes:
|
||||
data-class: tour-test-5
|
||||
|
|
@ -50,9 +50,7 @@ abstract class TourResourceTestBase extends EntityResourceTestBase {
|
|||
'label' => 'Llama',
|
||||
'body' => 'Who handle the awesomeness of llamas?',
|
||||
'weight' => 100,
|
||||
'attributes' => [
|
||||
'data-id' => 'tour-llama-1',
|
||||
],
|
||||
'selector' => '#tour-llama-1',
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
|
@ -84,9 +82,7 @@ abstract class TourResourceTestBase extends EntityResourceTestBase {
|
|||
'label' => 'Llama',
|
||||
'body' => 'Who handle the awesomeness of llamas?',
|
||||
'weight' => 100,
|
||||
'attributes' => [
|
||||
'data-id' => 'tour-llama-1',
|
||||
],
|
||||
'selector' => '#tour-llama-1',
|
||||
],
|
||||
],
|
||||
'uuid' => $this->entity->uuid(),
|
||||
|
|
|
|||
|
|
@ -75,33 +75,57 @@ class TourTest extends TourTestBasic {
|
|||
$this->assertTourTips($tips);
|
||||
$this->assertTourTips();
|
||||
|
||||
$elements = $this->xpath('//li[@data-id=:data_id and @class=:classes and ./p//a[@href=:href and contains(., :text)]]', [
|
||||
':classes' => 'tip-module-tour-test tip-type-text tip-tour-test-1',
|
||||
':data_id' => 'tour-test-1',
|
||||
':href' => Url::fromRoute('<front>', [], ['absolute' => TRUE])->toString(),
|
||||
':text' => 'Drupal',
|
||||
]);
|
||||
$tips = $this->getTourTips();
|
||||
|
||||
$href = Url::fromRoute('<front>', [], ['absolute' => TRUE])->toString();
|
||||
$elements = [];
|
||||
foreach ($tips as $tip) {
|
||||
if ($tip['id'] == 'tour-test-1' && $tip['module'] == 'tour_test' && $tip['type'] == 'text' && strpos($tip['body'], $href) !== FALSE && strpos($tip['body'], 'Drupal') !== FALSE) {
|
||||
$elements[] = $tip;
|
||||
}
|
||||
}
|
||||
$this->assertCount(1, $elements, 'Found Token replacement.');
|
||||
|
||||
$elements = $this->cssSelect("li[data-id=tour-test-1] h2:contains('The first tip')");
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-1',
|
||||
'title' => 'The first tip',
|
||||
]);
|
||||
$this->assertCount(1, $elements, 'Found English variant of tip 1.');
|
||||
|
||||
$elements = $this->cssSelect("li[data-id=tour-test-2] h2:contains('The quick brown fox')");
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-2',
|
||||
'title' => 'The quick brown fox',
|
||||
]);
|
||||
$this->assertNotCount(1, $elements, 'Did not find English variant of tip 2.');
|
||||
|
||||
$elements = $this->cssSelect("li[data-id=tour-test-1] h2:contains('La pioggia cade in spagna')");
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-1',
|
||||
'title' => 'La pioggia cade in spagna',
|
||||
]);
|
||||
$this->assertNotCount(1, $elements, 'Did not find Italian variant of tip 1.');
|
||||
|
||||
// Ensure that plugins work.
|
||||
$elements = $this->xpath('//img[@src="http://local/image.png"]');
|
||||
$elements = [];
|
||||
foreach ($tips as $tip) {
|
||||
if (strpos($tip['body'], 'http://local/image.png') !== FALSE) {
|
||||
$elements[] = $tip;
|
||||
}
|
||||
}
|
||||
$this->assertCount(1, $elements, 'Image plugin tip found.');
|
||||
|
||||
// Navigate to tour-test-2/subpath and verify the tour_test_2 tip is found.
|
||||
$this->drupalGet('tour-test-2/subpath');
|
||||
$elements = $this->cssSelect("li[data-id=tour-test-2] h2:contains('The quick brown fox')");
|
||||
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-2',
|
||||
'title' => 'The quick brown fox',
|
||||
]);
|
||||
$this->assertCount(1, $elements, 'Found English variant of tip 2.');
|
||||
|
||||
$elements = $this->cssSelect("li[data-id=tour-test-1] h2:contains('The first tip')");
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-1',
|
||||
'title' => 'The first tip',
|
||||
]);
|
||||
$this->assertNotCount(1, $elements, 'Did not find English variant of tip 1.');
|
||||
|
||||
// Enable Italian language and navigate to it/tour-test1 and verify italian
|
||||
|
|
@ -109,10 +133,16 @@ class TourTest extends TourTestBasic {
|
|||
ConfigurableLanguage::createFromLangcode('it')->save();
|
||||
$this->drupalGet('it/tour-test-1');
|
||||
|
||||
$elements = $this->cssSelect("li[data-id=tour-test-1] h2:contains('La pioggia cade in spagna')");
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-1',
|
||||
'title' => 'La pioggia cade in spagna',
|
||||
]);
|
||||
$this->assertCount(1, $elements, 'Found Italian variant of tip 1.');
|
||||
|
||||
$elements = $this->cssSelect("li[data-id=tour-test-2] h2:contains('The quick brown fox')");
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-2',
|
||||
'title' => 'The quick brown fox',
|
||||
]);
|
||||
$this->assertNotCount(1, $elements, 'Did not find English variant of tip 1.');
|
||||
|
||||
// Programmatically create a tour for use through the remainder of the test.
|
||||
|
|
@ -131,9 +161,7 @@ class TourTest extends TourTestBasic {
|
|||
'label' => 'The rain in spain',
|
||||
'body' => 'Falls mostly on the plain.',
|
||||
'weight' => '100',
|
||||
'attributes' => [
|
||||
'data-id' => 'tour-code-test-1',
|
||||
],
|
||||
'selector' => '#tour-code-test-1',
|
||||
],
|
||||
'tour-code-test-2' => [
|
||||
'id' => 'tour-code-test-2',
|
||||
|
|
@ -141,9 +169,7 @@ class TourTest extends TourTestBasic {
|
|||
'label' => 'The awesome image',
|
||||
'url' => 'http://local/image.png',
|
||||
'weight' => 1,
|
||||
'attributes' => [
|
||||
'data-id' => 'tour-code-test-2',
|
||||
],
|
||||
'selector' => '#tour-code-test-2',
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
|
@ -165,12 +191,19 @@ class TourTest extends TourTestBasic {
|
|||
|
||||
// Navigate to tour-test-1 and verify the new tip is found.
|
||||
$this->drupalGet('tour-test-1');
|
||||
$elements = $this->cssSelect("li[data-id=tour-code-test-1] h2:contains('The rain in spain')");
|
||||
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-code-test-1',
|
||||
'title' => 'The rain in spain',
|
||||
]);
|
||||
$this->assertCount(1, $elements, 'Found the required tip markup for tip 4');
|
||||
|
||||
// Verify that the weight sorting works by ensuring the lower weight item
|
||||
// (tip 4) has the 'End tour' button.
|
||||
$elements = $this->cssSelect("li[data-id=tour-code-test-1][data-text='End tour']");
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-code-test-1',
|
||||
'text' => 'End tour',
|
||||
]);
|
||||
$this->assertCount(1, $elements, 'Found code tip was weighted last and had "End tour".');
|
||||
|
||||
// Test hook_tour_alter().
|
||||
|
|
@ -179,22 +212,68 @@ class TourTest extends TourTestBasic {
|
|||
// Navigate to tour-test-3 and verify the tour_test_1 tip is found with
|
||||
// appropriate classes.
|
||||
$this->drupalGet('tour-test-3/foo');
|
||||
$elements = $this->xpath('//li[@data-id=:data_id and @class=:classes and ./h2[contains(., :text)]]', [
|
||||
':classes' => 'tip-module-tour-test tip-type-text tip-tour-test-1',
|
||||
':data_id' => 'tour-test-1',
|
||||
':text' => 'The first tip',
|
||||
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-1',
|
||||
'module' => 'tour_test',
|
||||
'type' => 'text',
|
||||
'title' => 'The first tip',
|
||||
]);
|
||||
$this->assertCount(1, $elements, 'Found English variant of tip 1.');
|
||||
|
||||
// Navigate to tour-test-3 and verify the tour_test_1 tip is not found with
|
||||
// appropriate classes.
|
||||
$this->drupalGet('tour-test-3/bar');
|
||||
$elements = $this->xpath('//li[@data-id=:data_id and @class=:classes and ./h2[contains(., :text)]]', [
|
||||
':classes' => 'tip-module-tour-test tip-type-text tip-tour-test-1',
|
||||
':data_id' => 'tour-test-1',
|
||||
':text' => 'The first tip',
|
||||
|
||||
$elements = $this->findTip([
|
||||
'id' => 'tour-test-1',
|
||||
'module' => 'tour_test',
|
||||
'type' => 'text',
|
||||
'title' => 'The first tip',
|
||||
]);
|
||||
$this->assertCount(0, $elements, 'Did not find English variant of tip 1.');
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets tour tips from the JavaScript drupalSettings variable.
|
||||
*
|
||||
* @return array
|
||||
* A list of tips and their data.
|
||||
*/
|
||||
protected function getTourTips() {
|
||||
$tips = [];
|
||||
$drupalSettings = $this->getDrupalSettings();
|
||||
if (isset($drupalSettings['_tour_internal'])) {
|
||||
foreach ($drupalSettings['_tour_internal'] as $tip) {
|
||||
$tips[] = $tip;
|
||||
}
|
||||
}
|
||||
|
||||
return $tips;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find specific tips by their parameters in the list of tips.
|
||||
*
|
||||
* @param array $params
|
||||
* The list of search parameters and their values.
|
||||
*
|
||||
* @return array
|
||||
* A list of tips which match the parameters.
|
||||
*/
|
||||
protected function findTip(array $params) {
|
||||
$tips = $this->getTourTips();
|
||||
$elements = [];
|
||||
foreach ($tips as $tip) {
|
||||
foreach ($params as $param => $value) {
|
||||
if (isset($tip[$param]) && $tip[$param] != $value) {
|
||||
continue 2;
|
||||
}
|
||||
}
|
||||
$elements[] = $tip;
|
||||
}
|
||||
|
||||
return $elements;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,13 +33,14 @@ abstract class TourTestBase extends BrowserTestBase {
|
|||
public function assertTourTips($tips = []) {
|
||||
// Get the rendered tips and their data-id and data-class attributes.
|
||||
if (empty($tips)) {
|
||||
// Tips are rendered as <li> elements inside <ol id="tour">.
|
||||
$rendered_tips = $this->xpath('//ol[@id = "tour"]//li[starts-with(@class, "tip")]');
|
||||
foreach ($rendered_tips as $rendered_tip) {
|
||||
$tips[] = [
|
||||
'data-id' => $rendered_tip->getAttribute('data-id'),
|
||||
'data-class' => $rendered_tip->getAttribute('data-class'),
|
||||
];
|
||||
// Tips are rendered as drupalSettings values.
|
||||
$drupalSettings = $this->getDrupalSettings();
|
||||
if (isset($drupalSettings['_tour_internal'])) {
|
||||
foreach ($drupalSettings['_tour_internal'] as $tip) {
|
||||
$tips[] = [
|
||||
'selector' => $tip['selector'] ?? NULL,
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\Tests\tour\Functional\Update;
|
||||
|
||||
use Drupal\Tests\BrowserTestBase;
|
||||
|
||||
/**
|
||||
* Confirms that legacy tour tips are updated when module config is imported.
|
||||
*
|
||||
* @group tour
|
||||
* @group legacy
|
||||
*/
|
||||
class TourTipDeprecatedConfigModuleInstallTest extends BrowserTestBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected static $modules = ['tour'];
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected $defaultTheme = 'stark';
|
||||
|
||||
/**
|
||||
* Test ensuring that tour config is updated on config import.
|
||||
*/
|
||||
public function testModuleInstall() {
|
||||
$this->expectDeprecation("The tour.tip 'attributes' config schema property is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Instead of 'data-class' and 'data-id' attributes, use 'selector' to specify the element a tip attaches to. See https://www.drupal.org/node/3204093");
|
||||
$this->expectDeprecation("The tour.tip 'location' config schema property is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Instead use 'position'. The value must be a valid placement accepted by PopperJS. See https://www.drupal.org/node/3204093");
|
||||
|
||||
$this->container->get('module_installer')->install(['tour_test', 'tour_legacy_test']);
|
||||
$updated_legacy_tour_config = $this->container->get('config.factory')->get('tour.tour.tour-test-legacy');
|
||||
$updated_tips = $updated_legacy_tour_config->get('tips');
|
||||
|
||||
// Confirm that tour-test-1 uses `selector` instead of `data-id`.
|
||||
$this->assertSame('#tour-test-1', $updated_tips['tour-test-legacy-1']['selector']);
|
||||
$this->assertArrayNotHasKey('attributes', $updated_tips['tour-test-legacy-1']);
|
||||
|
||||
// Confirm that tour-test-5 uses `selector` instead of `data-class`.
|
||||
$this->assertSame('.tour-test-5', $updated_tips['tour-test-legacy-6']['selector']);
|
||||
$this->assertArrayNotHasKey('attributes', $updated_tips['tour-test-legacy-6']);
|
||||
|
||||
// Confirm that tour-test-legacy-7 uses `selector` instead of `data-class`.
|
||||
$this->assertSame('.tour-test-7', $updated_tips['tour-test-legacy-7']['selector']);
|
||||
$this->assertSame(['foo' => 'bar'], $updated_tips['tour-test-legacy-7']['attributes']);
|
||||
|
||||
$updated_legacy_location_tour_config = $this->container->get('config.factory')->get('tour.tour.tour-test-legacy-location');
|
||||
$updated_location_tips = $updated_legacy_location_tour_config->get('tips');
|
||||
|
||||
$this->assertSame('top-start', $updated_location_tips['location-test-top']['position']);
|
||||
$this->assertArrayNotHasKey('location', $updated_location_tips['location-test-top']);
|
||||
$this->assertEquals('bottom-start', $updated_location_tips['location-test-bottom']['position']);
|
||||
$this->assertArrayNotHasKey('location', $updated_location_tips['location-test-bottom']);
|
||||
$this->assertEquals('right-start', $updated_location_tips['location-test-right']['position']);
|
||||
$this->assertArrayNotHasKey('location', $updated_location_tips['location-test-right']);
|
||||
$this->assertEquals('left-start', $updated_location_tips['location-test-left']['position']);
|
||||
$this->assertArrayNotHasKey('location', $updated_location_tips['location-test-left']);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\Tests\tour\Functional\Update;
|
||||
|
||||
use Drupal\FunctionalTests\Update\UpdatePathTestBase;
|
||||
|
||||
/**
|
||||
* Confirms tour tip deprecated config is updated properly.
|
||||
*
|
||||
* @group tour
|
||||
*
|
||||
* @see tour_post_update_joyride_selectors_to_selector_property()
|
||||
* @see tour_tour_presave()
|
||||
*/
|
||||
class TourTipDeprecatedConfigUpdateTest extends UpdatePathTestBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function setDatabaseDumpFiles() {
|
||||
$this->databaseDumpFiles = [
|
||||
__DIR__ . '/../../../../../system/tests/fixtures/update/drupal-9.0.0.bare.standard.php.gz',
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests tour_post_update_joyride_selectors_to_selector_property().
|
||||
*
|
||||
* Confirms that tour_post_update_joyride_selectors_to_selector_property()
|
||||
* populates the `selector` and `location` properties.
|
||||
*
|
||||
* Joyride-based tours used the `data-id` and `data-class` attributes to
|
||||
* associate a tour tip with an element. This was changed to a `selector`
|
||||
* property.
|
||||
*
|
||||
* Joyride-based tours also used the `location` to configure the positioning
|
||||
* of the tour tip.
|
||||
*
|
||||
* Existing tours are updated to use this new property via
|
||||
* tour_post_update_joyride_selectors_to_selector_property(), and this test
|
||||
* confirms it is done properly.
|
||||
*
|
||||
* @see tour_tour_presave()
|
||||
*/
|
||||
public function testUpdate() {
|
||||
$legacy_tour_config = $this->container->get('config.factory')->get('tour.tour.views-ui');
|
||||
$tips = $legacy_tour_config->get('tips');
|
||||
|
||||
// Confirm the existing tour tip configurations match expectations.
|
||||
$this->assertFalse(isset($tips['views-ui-view-admin']['selector']));
|
||||
$this->assertEquals('views-display-extra-actions', $tips['views-ui-view-admin']['attributes']['data-id']);
|
||||
$this->assertEquals('views-ui-display-tab-bucket.format', $tips['views-ui-format']['attributes']['data-class']);
|
||||
$this->assertSame('left', $tips['views-ui-view-admin']['location']);
|
||||
$this->assertArrayNotHasKey('position', $tips['views-ui-view-admin']);
|
||||
|
||||
$this->runUpdates();
|
||||
|
||||
$updated_legacy_tour_config = $this->container->get('config.factory')->get('tour.tour.views-ui');
|
||||
$updated_tips = $updated_legacy_tour_config->get('tips');
|
||||
|
||||
// Confirm that views-ui-view-admin uses `selector` instead of `data-id`.
|
||||
$this->assertSame('#views-display-extra-actions', $updated_tips['views-ui-view-admin']['selector']);
|
||||
|
||||
// Confirm that views-ui-format uses `selector` instead of `data-class`.
|
||||
$this->assertSame('.views-ui-display-tab-bucket.format', $updated_tips['views-ui-format']['selector']);
|
||||
|
||||
// Assert that the deprecated attributes key has been removed now that it is
|
||||
// empty.
|
||||
$this->assertArrayNotHasKey('attributes', $updated_tips['views-ui-view-admin']);
|
||||
|
||||
$this->assertSame('left-start', $updated_tips['views-ui-view-admin']['position']);
|
||||
$this->assertArrayNotHasKey('location', $updated_tips['views-ui-view-admin']);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\Tests\tour\FunctionalJavascript;
|
||||
|
||||
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
|
||||
|
||||
/**
|
||||
* General Tour tests that require JavaScript.
|
||||
*
|
||||
* @group tour
|
||||
*/
|
||||
class TourJavascriptTest extends WebDriverTestBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected static $modules = [
|
||||
'tour',
|
||||
'tour_test',
|
||||
'toolbar',
|
||||
];
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected $defaultTheme = 'stark';
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function setUp(): void {
|
||||
parent::setUp();
|
||||
|
||||
$admin_user = $this->drupalCreateUser([
|
||||
'access toolbar',
|
||||
'access tour',
|
||||
]);
|
||||
$this->drupalLogin($admin_user);
|
||||
}
|
||||
|
||||
/**
|
||||
* Confirm the 'tips' and 'tour 'query arguments.
|
||||
*/
|
||||
public function testQueryArg() {
|
||||
$assert_session = $this->assertSession();
|
||||
|
||||
$this->drupalGet('tour-test-1');
|
||||
$assert_session->assertNoElementAfterWait('css', '.tip-tour-test-1');
|
||||
$assert_session->pageTextContains('Where does the rain in Spain fail?');
|
||||
$assert_session->pageTextNotContains('Im all these things');
|
||||
$assert_session->pageTextNotContains('The first tip');
|
||||
|
||||
$this->drupalGet('tour-test-1', [
|
||||
'query' => [
|
||||
'tips' => 'tip-tour-test-6',
|
||||
],
|
||||
]);
|
||||
$this->assertNotNull($assert_session->waitForElementVisible('css', '.tip-tour-test-6'));
|
||||
$assert_session->pageTextContains('Im all these things');
|
||||
|
||||
$this->drupalGet('tour-test-1', [
|
||||
'query' => [
|
||||
'tour' => '1',
|
||||
],
|
||||
]);
|
||||
$this->assertNotNull($assert_session->waitForElementVisible('css', '.tip-tour-test-1'));
|
||||
$assert_session->pageTextContains('The first tip');
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests stepping through a tour.
|
||||
*/
|
||||
public function testGeneralTourUse() {
|
||||
$page = $this->getSession()->getPage();
|
||||
$assert_session = $this->assertSession();
|
||||
|
||||
$this->drupalGet('tour-test-1');
|
||||
|
||||
$assert_session->assertNoElementAfterWait('css', '.tip-tour-test-1');
|
||||
|
||||
// Open the tour.
|
||||
$page->find('css', '#toolbar-tab-tour button')->press();
|
||||
|
||||
// Confirm the tour can be cancelled.
|
||||
$tip_to_close = $assert_session->waitForElementVisible('css', '.shepherd-enabled.tip-tour-test-1');
|
||||
$this->assertNotNull($tip_to_close);
|
||||
$tip_text = $tip_to_close->getText();
|
||||
$this->assertStringContainsString('always the best dressed', $tip_text);
|
||||
$this->assertStringContainsString('1 of 3', $tip_text);
|
||||
$this->assertStringNotContainsString('End tour', $tip_text);
|
||||
|
||||
// Cancel the tour.
|
||||
$tip_to_close->find('css', '.shepherd-cancel-icon')->press();
|
||||
$assert_session->assertNoElementAfterWait('css', '.tip-tour-test-1');
|
||||
$assert_session->assertNoElementAfterWait('css', '.shepherd-enabled');
|
||||
|
||||
// Navigate through the three steps of the tour.
|
||||
$page->find('css', '#toolbar-tab-tour button')->press();
|
||||
$tip1 = $assert_session->waitForElementVisible('css', '.shepherd-enabled.tip-tour-test-1');
|
||||
$this->assertNotNull($tip1);
|
||||
|
||||
// Click the next button.
|
||||
$tip1->find('css', '.button--primary:contains("Next")')->press();
|
||||
|
||||
// The second tour tip should appear, confirm it has the expected content.
|
||||
$tip2 = $assert_session->waitForElementVisible('css', '.shepherd-enabled.tip-tour-test-3');
|
||||
$assert_session->pageTextNotContains('always the best dressed');
|
||||
$tip_text = $tip2->getText();
|
||||
$this->assertStringContainsString('The awesome image', $tip_text);
|
||||
$this->assertStringContainsString('2 of 3', $tip_text);
|
||||
$this->assertStringNotContainsString('End tour', $tip_text);
|
||||
|
||||
// Click the next button.
|
||||
$tip2->find('css', '.button--primary:contains("Next")')->press();
|
||||
|
||||
// The third tour tip should appear, confirm it has the expected content.
|
||||
$tip3 = $assert_session->waitForElementVisible('css', '.shepherd-enabled.tip-tour-test-6');
|
||||
$assert_session->pageTextNotContains('The awesome image');
|
||||
$tip_text = $tip3->getText();
|
||||
$this->assertStringContainsString('Im all these things', $tip_text);
|
||||
$this->assertStringContainsString('3 of 3', $tip_text);
|
||||
$this->assertStringNotContainsString('Next', $tip_text);
|
||||
|
||||
// The final tip should have a button to end the tour. Press and confirm all
|
||||
// tips removed.
|
||||
$tip3->find('css', '.button--primary:contains("End tour")')->press();
|
||||
$assert_session->assertNoElementAfterWait('css', '.shepherd-enabled');
|
||||
$assert_session->pageTextNotContains('The awesome image');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\Tests\tour\FunctionalJavascript;
|
||||
|
||||
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
|
||||
|
||||
/**
|
||||
* Tests Tour's backwards compatible markup and legacy config.
|
||||
*
|
||||
* @group tour
|
||||
* @group legacy
|
||||
*/
|
||||
class TourLegacyTest extends WebDriverTestBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected static $modules = [
|
||||
'tour',
|
||||
'tour_legacy_test',
|
||||
'toolbar',
|
||||
];
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected $defaultTheme = 'stable';
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function setUp(): void {
|
||||
parent::setUp();
|
||||
|
||||
$admin_user = $this->drupalCreateUser([
|
||||
'access toolbar',
|
||||
'access tour',
|
||||
]);
|
||||
$this->drupalLogin($admin_user);
|
||||
}
|
||||
|
||||
/**
|
||||
* Confirms backwards compatible markup.
|
||||
*
|
||||
* @param string $path
|
||||
* The path to check.
|
||||
* @param string $theme
|
||||
* The theme used by the tests.
|
||||
*
|
||||
* @dataProvider providerTestTourTipMarkup
|
||||
*/
|
||||
public function testTourTipMarkup(string $path, string $theme = NULL) {
|
||||
// Install the specified theme and make it default if that is not already
|
||||
// the case.
|
||||
if ($theme) {
|
||||
$theme_manager = $this->container->get('theme.manager');
|
||||
$this->container->get('theme_installer')->install([$theme], TRUE);
|
||||
|
||||
$system_theme_config = $this->container->get('config.factory')->getEditable('system.theme');
|
||||
$system_theme_config
|
||||
->set('default', $theme)
|
||||
->save();
|
||||
$this->rebuildAll();
|
||||
$this->assertSame($theme, $theme_manager->getActiveTheme()->getName());
|
||||
}
|
||||
|
||||
$page = $this->getSession()->getPage();
|
||||
$assert_session = $this->assertSession();
|
||||
$this->drupalGet($path);
|
||||
|
||||
$assert_session->waitForElementVisible('css', '#toolbar-tab-tour button');
|
||||
$page->find('css', '#toolbar-tab-tour button')->press();
|
||||
$this->assertToolTipMarkup(0, 'top');
|
||||
$page->find('css', '.joyride-tip-guide[data-index="0"]')->clickLink('Next');
|
||||
$this->assertToolTipMarkup(1, '', 'image');
|
||||
$page->find('css', '.joyride-tip-guide[data-index="1"]')->clickLink('Next');
|
||||
$this->assertToolTipMarkup(2, 'top', 'body');
|
||||
$tip_content = $assert_session->waitForElementVisible('css', '.joyride-tip-guide[data-index="2"] .joyride-content-wrapper');
|
||||
|
||||
$additional_paragraph = $tip_content->find('css', '.tour-tip-body + p');
|
||||
$this->assertNotNull($additional_paragraph, 'Tip 3 has an additional paragraph that is a sibling to the main paragraph.');
|
||||
$additional_list = $tip_content->find('css', '.tour-tip-body + p + ul');
|
||||
$this->assertNotNull($additional_list, 'Tip 3 has an additional unordered list that is a sibling to the main paragraph.');
|
||||
}
|
||||
|
||||
/**
|
||||
* Asserts the markup structure of a tip.
|
||||
*
|
||||
* @param int $index
|
||||
* The position of the tip within the tour.
|
||||
* @param string $nub_position
|
||||
* The expected position of the nub arrow.
|
||||
* @param string $joyride_content_container_name
|
||||
* For identifying classnames specific to a tip type.
|
||||
*/
|
||||
private function assertToolTipMarkup($index, $nub_position, $joyride_content_container_name = 'body') {
|
||||
$assert_session = $this->assertSession();
|
||||
$tip = $assert_session->waitForElementVisible('css', ".joyride-tip-guide[data-index=\"$index\"]");
|
||||
$this->assertNotNull($tip, 'The tour tip element is present.');
|
||||
|
||||
$nub = $tip->find('css', ".joyride-tip-guide[data-index=\"$index\"] > .joyride-nub");
|
||||
$this->assertNotNull($nub, 'The nub element is present.');
|
||||
if (!empty($nub_position)) {
|
||||
$this->assertTrue($nub->hasClass($nub_position), 'The nub has a class that indicates its configured position.');
|
||||
}
|
||||
|
||||
$content_wrapper = $tip->find('css', '.joyride-nub + .joyride-content-wrapper');
|
||||
$this->assertNotNull($content_wrapper, 'The joyride content wrapper exists, and is the next sibling of the nub.');
|
||||
|
||||
$label = $tip->find('css', '.joyride-content-wrapper > h2.tour-tip-label:first-child');
|
||||
$this->assertNotNull($label, 'The tour tip label is an h2, and is the first child of the content wrapper.');
|
||||
|
||||
$tip_content = $content_wrapper->find('css', "h2.tour-tip-label + p.tour-tip-$joyride_content_container_name");
|
||||
$this->assertNotNull($tip_content, 'The tip\'s main paragraph is the next sibling of the label, and has the expected wrapper class.');
|
||||
|
||||
$tour_progress = $content_wrapper->find('css', "h2.tour-tip-label + p.tour-tip-$joyride_content_container_name ~ div.tour-progress");
|
||||
$this->assertNotNull($tour_progress, 'The div containing tour progress info is present, and is the next sibling of the main paragraph.');
|
||||
|
||||
$next_item = $content_wrapper->find('css', ".tour-progress + a.joyride-next-tip.button.button--primary");
|
||||
$this->assertNotNull($next_item, 'The "Next" link is present, and the next sibling of the div containing progress info.');
|
||||
|
||||
$close_tour = $content_wrapper->find('css', ".joyride-content-wrapper > a.joyride-close-tip:last-child");
|
||||
$this->assertNotNull($close_tour, 'The "Close" link is present, is an immediate child of the content wrapper, and is the last child.');
|
||||
}
|
||||
|
||||
/**
|
||||
* Data Provider.
|
||||
*
|
||||
* @return \string[][]
|
||||
* An array with two potential items:
|
||||
* - The different path the test will run on.
|
||||
* - The active theme when running the tests.
|
||||
*/
|
||||
public function providerTestTourTipMarkup() {
|
||||
return [
|
||||
'Using the the deprecated TipPlugin with Stable theme' => ['tour-test-legacy'],
|
||||
'Using current TourTipPlugin with Stable theme' => ['tour-test-1'],
|
||||
'Using the the deprecated TipPlugin with Stable 9 theme' => ['tour-test-legacy', 'stable9'],
|
||||
'Using current TourTipPlugin with Stable 9 theme' => ['tour-test-1', 'stable9'],
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -3,6 +3,8 @@
|
|||
namespace Drupal\Tests\tour\Kernel;
|
||||
|
||||
use Drupal\KernelTests\KernelTestBase;
|
||||
use Drupal\tour\Entity\Tour;
|
||||
use PHPUnit\Framework\Error\Warning;
|
||||
|
||||
/**
|
||||
* Tests the functionality of tour plugins.
|
||||
|
|
@ -25,6 +27,9 @@ class TourPluginTest extends KernelTestBase {
|
|||
*/
|
||||
protected $pluginManager;
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function setUp(): void {
|
||||
parent::setUp();
|
||||
|
||||
|
|
@ -39,4 +44,60 @@ class TourPluginTest extends KernelTestBase {
|
|||
$this->assertCount(1, $this->pluginManager->getDefinitions(), 'Only tour plugins for the enabled modules were returned.');
|
||||
}
|
||||
|
||||
/**
|
||||
* Test that warnings and deprecations are triggered.
|
||||
*
|
||||
* @group legacy
|
||||
*/
|
||||
public function testDeprecatedMethodWarningsErrors() {
|
||||
\Drupal::service('module_installer')->install(['tour_legacy_test']);
|
||||
$tip = Tour::load('tour-test')->getTips()[0];
|
||||
|
||||
// These are E_USER_WARNING severity errors that supplement existing
|
||||
// deprecation errors. These warnings are triggered when methods are called
|
||||
// that are designed to be backwards compatible, but aren't able to 100%
|
||||
// promise this due to the many ways that tip plugins can be extended.
|
||||
try {
|
||||
$tip->getOutput();
|
||||
$this->fail('No getOutput() warning triggered.');
|
||||
}
|
||||
catch (Warning $e) {
|
||||
$this->assertSame('Drupal\tourTipPluginInterface::getOutput is deprecated. Use getBody() instead. See https://www.drupal.org/node/3204096', $e->getMessage());
|
||||
}
|
||||
|
||||
try {
|
||||
$tip->getAttributes();
|
||||
$this->fail('No getAttributes() warning triggered.');
|
||||
}
|
||||
catch (Warning $e) {
|
||||
$this->assertSame('Drupal\tour\TipPluginInterface::getAttributes is deprecated. Tour tip plugins should implement Drupal\tour\TourTipPluginInterface and Tour configs should use the \'selector\' property instead of \'attributes\' to target an element.', $e->getMessage());
|
||||
}
|
||||
|
||||
// Remove PHPUnits conversion of warning to exceptions.
|
||||
set_error_handler(function () {});
|
||||
$tip = Tour::load('tour-test-legacy')->getTips()[3];
|
||||
$attributes = $tip->getAttributes();
|
||||
restore_error_handler();
|
||||
$this->assertSame([
|
||||
'foo' => 'bar',
|
||||
'data-class' => 'tour-test-7',
|
||||
'data-aria-describedby' => 'tour-tip-tour-test-legacy-7-contents',
|
||||
'data-aria-labelledby' => 'tour-tip-tour-test-legacy-7-label',
|
||||
], $attributes);
|
||||
|
||||
$this->expectDeprecation('Implementing Drupal\tour\TipPluginInterface without also implementing Drupal\tour\TourTipPluginInterface is deprecated in drupal:9.2.0. See https://www.drupal.org/node/3204096');
|
||||
$this->expectDeprecation("The tour.tip 'attributes' config schema property is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Instead of 'data-class' and 'data-id' attributes, use 'selector' to specify the element a tip attaches to. See https://www.drupal.org/node/3204093");
|
||||
$this->expectDeprecation("The tour.tip 'location' config schema property is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Instead use 'position'. The value must be a valid placement accepted by PopperJS. See https://www.drupal.org/node/3204093");
|
||||
|
||||
try {
|
||||
\Drupal::entityTypeManager()
|
||||
->getViewBuilder('tour')
|
||||
->viewMultiple([Tour::load('tour-test-legacy')], 'full');
|
||||
$this->fail('No deprecated interface warning triggered.');
|
||||
}
|
||||
catch (Warning $e) {
|
||||
$this->assertSame('The tour tips only support data-class and data-id attributes and they will have to be upgraded manually. See https://www.drupal.org/node/3204093', $e->getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\Tests\tour\Unit\Plugin\tour\tip;
|
||||
|
||||
use Drupal\Tests\UnitTestCase;
|
||||
use Drupal\tour\Plugin\tour\tip\TipPluginText;
|
||||
|
||||
/**
|
||||
* @coversDefaultClass \Drupal\tour\Plugin\tour\tip\TipPluginText
|
||||
* @group tour
|
||||
*/
|
||||
class TipPluginTextTest extends UnitTestCase {
|
||||
|
||||
/**
|
||||
* Tests that getAriaId returns unique id per plugin instance.
|
||||
*
|
||||
* @see \Drupal\tour\Plugin\tour\tip\TipPluginText::getAriaId()
|
||||
* @runTestsInSeparateProcesses
|
||||
* This test calls \Drupal\Component\Utility\Html::getUniqueId() which uses a
|
||||
* static list. Run this test in a separate process to prevent side effects.
|
||||
*/
|
||||
public function testGetAriaId() {
|
||||
$id_instance_one = 'one';
|
||||
$id_instance_two = 'two';
|
||||
$config_instance_one = [
|
||||
'id' => $id_instance_one,
|
||||
];
|
||||
$config_instance_two = [
|
||||
'id' => $id_instance_two,
|
||||
];
|
||||
$definition = [];
|
||||
$plugin_id = 'text';
|
||||
$token = $this->createMock('\Drupal\Core\Utility\Token');
|
||||
$instance_one = new TipPluginText($config_instance_one, $plugin_id, $definition, $token);
|
||||
$instance_two = new TipPluginText($config_instance_two, $plugin_id, $definition, $token);
|
||||
$instance_three = new TipPluginText($config_instance_one, $plugin_id, $definition, $token);
|
||||
|
||||
$this->assertEquals($id_instance_one, $instance_one->getAriaId());
|
||||
$this->assertEquals($id_instance_two, $instance_two->getAriaId());
|
||||
$this->assertNotEquals($instance_one->getAriaId(), $instance_two->getAriaId());
|
||||
$this->assertNotEquals($instance_one->getAriaId(), $instance_three->getAriaId());
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\Tests\tour\Unit;
|
||||
|
||||
use Drupal\Tests\UnitTestCase;
|
||||
use Drupal\tour\TipPluginBase;
|
||||
|
||||
/**
|
||||
* @coversDefaultClass \Drupal\tour\TipPluginBase
|
||||
*
|
||||
* @group tour
|
||||
*/
|
||||
class TipPluginBaseTest extends UnitTestCase {
|
||||
|
||||
/**
|
||||
* @covers ::getLocation
|
||||
*/
|
||||
public function testGetLocationAssertion() {
|
||||
$base_plugin = $this->getMockForAbstractClass(TipPluginBase::class, [], '', FALSE);
|
||||
|
||||
$base_plugin->set('position', 'right');
|
||||
$this->assertSame('right', $base_plugin->getLocation());
|
||||
|
||||
$base_plugin->set('position', 'not_valid');
|
||||
$this->expectException(\AssertionError::class);
|
||||
$this->expectExceptionMessage('not_valid is not a valid Tour Tip position value');
|
||||
$base_plugin->getLocation();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
id: tour-test-legacy-location
|
||||
module: tour_test
|
||||
label: 'Tour test the location property'
|
||||
routes:
|
||||
- route_name: some_tour_route
|
||||
tips:
|
||||
location-test-top:
|
||||
id: location-test-top
|
||||
plugin: text
|
||||
label: 'Top position'
|
||||
body: 'Top that, top that'
|
||||
location: top
|
||||
location-test-bottom:
|
||||
id: location-test-bottom
|
||||
plugin: text
|
||||
label: 'Bottom position'
|
||||
body: 'You can give all that you can, but you will never top that'
|
||||
location: bottom
|
||||
location-test-left:
|
||||
id: location-test-left
|
||||
plugin: text
|
||||
label: 'Left position'
|
||||
body: "You can dream until you're blue but you can never top that, huh-huh!"
|
||||
location: left
|
||||
location-test-right:
|
||||
id: location-test-right
|
||||
plugin: text
|
||||
label: 'Right position'
|
||||
body: "I don't really give a [pause] about trying to top that"
|
||||
location: right
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
id: tour-test-legacy
|
||||
module: tour_test
|
||||
label: 'Tour test Legacy'
|
||||
langcode: en
|
||||
routes:
|
||||
- route_name: tour_test.legacy
|
||||
tips:
|
||||
tour-test-legacy-1:
|
||||
id: tour-test-legacy-1
|
||||
plugin: text_legacy
|
||||
label: 'The first legacy tip'
|
||||
body: 'Is <a href="[site:url]">[site:name]</a> always the best dressed?'
|
||||
weight: 1
|
||||
attributes:
|
||||
data-id: tour-test-1
|
||||
tour-test-legacy-3:
|
||||
id: tour-test-legacy-3
|
||||
plugin: image_legacy
|
||||
label: 'The awesome legacy image'
|
||||
url: 'http://local/image.png'
|
||||
weight: 1
|
||||
tour-test-legacy-6:
|
||||
id: tour-test-legacy-6
|
||||
plugin: text_legacy
|
||||
label: 'Im a legacy list'
|
||||
body: '<p>Im all these things:</p><ul><li>Modal</li><li>Awesome</li></ul>'
|
||||
weight: 6
|
||||
attributes:
|
||||
data-class: tour-test-5
|
||||
tour-test-legacy-7:
|
||||
id: tour-test-legacy-7
|
||||
plugin: text_legacy
|
||||
label: 'Im a legacy list with more attributes'
|
||||
body: '<p>More attributes</p>'
|
||||
weight: 8
|
||||
attributes:
|
||||
data-class: tour-test-7
|
||||
foo: bar
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
# Schema for the configuration files of the Tour Test Legacy module.
|
||||
|
||||
tour.tip.image_legacy:
|
||||
type: tour.tip
|
||||
label: 'Image tour tip'
|
||||
mapping:
|
||||
url:
|
||||
type: uri
|
||||
label: 'Image URL'
|
||||
|
||||
tour.tip.text_legacy:
|
||||
type: tour.tip
|
||||
label: 'Textual tour tip'
|
||||
mapping:
|
||||
body:
|
||||
type: text
|
||||
label: 'Body'
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
name: Tour legacy plugin tests
|
||||
type: module
|
||||
description: Tests related to deprecated plugins.
|
||||
package: Testing
|
||||
version: VERSION
|
||||
dependencies:
|
||||
- drupal:tour
|
||||
- drupal:tour_test
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
tour_test.legacy:
|
||||
path: '/tour-test-legacy'
|
||||
defaults:
|
||||
_controller: '\Drupal\tour_test\Controller\TourTestController::tourTest1'
|
||||
options:
|
||||
_admin_route: TRUE
|
||||
requirements:
|
||||
_access: 'TRUE'
|
||||
|
|
@ -11,5 +11,4 @@ tips:
|
|||
label: 'The quick brown fox'
|
||||
body: 'Per lo più in pianura.'
|
||||
weight: 2
|
||||
attributes:
|
||||
data-id: tour-test-2
|
||||
selector: '#tour-test-2'
|
||||
|
|
|
|||
|
|
@ -14,16 +14,14 @@ tips:
|
|||
label: 'The first tip'
|
||||
body: 'Is <a href="[site:url]">[site:name]</a> always the best dressed?'
|
||||
weight: 1
|
||||
attributes:
|
||||
data-id: tour-test-1
|
||||
selector: '#tour-test-1'
|
||||
tour-test-action:
|
||||
id: tour-test-3
|
||||
plugin: text
|
||||
label: 'The action'
|
||||
body: 'The action button of awesome'
|
||||
weight: 2
|
||||
attributes:
|
||||
data-class: button-action
|
||||
selector: '.button-action'
|
||||
tour-test-3:
|
||||
id: tour-test-3
|
||||
plugin: image
|
||||
|
|
@ -36,5 +34,4 @@ tips:
|
|||
label: 'Im a list'
|
||||
body: '<p>Im all these things:</p><ul><li>Modal</li><li>Awesome</li></ul>'
|
||||
weight: 6
|
||||
attributes:
|
||||
data-id: tour-test-3
|
||||
selector: '#tour-test-3'
|
||||
|
|
|
|||
|
|
@ -2,8 +2,11 @@
|
|||
|
||||
namespace Drupal\tour_test\Plugin\tour\tip;
|
||||
|
||||
use Drupal\Component\Utility\Html;
|
||||
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
|
||||
use Drupal\Core\Utility\Token;
|
||||
use Drupal\tour\TipPluginBase;
|
||||
use Drupal\tour\TourTipPluginInterface;
|
||||
use Symfony\Component\DependencyInjection\ContainerInterface;
|
||||
|
||||
/**
|
||||
* Displays an image as a tip.
|
||||
|
|
@ -13,7 +16,7 @@ use Drupal\tour\TipPluginBase;
|
|||
* title = @Translation("Image")
|
||||
* )
|
||||
*/
|
||||
class TipPluginImage extends TipPluginBase {
|
||||
class TipPluginImage extends TipPluginBase implements ContainerFactoryPluginInterface, TourTipPluginInterface {
|
||||
|
||||
/**
|
||||
* The url which is used for the image in this Tip.
|
||||
|
|
@ -31,18 +34,54 @@ class TipPluginImage extends TipPluginBase {
|
|||
*/
|
||||
protected $alt;
|
||||
|
||||
/**
|
||||
* Token service.
|
||||
*
|
||||
* @var \Drupal\Core\Utility\Token
|
||||
*/
|
||||
protected $token;
|
||||
|
||||
/**
|
||||
* Constructs a \Drupal\tour\Plugin\tour\tip\TipPluginText object.
|
||||
*
|
||||
* @param array $configuration
|
||||
* A configuration array containing information about the plugin instance.
|
||||
* @param string $plugin_id
|
||||
* The plugin_id for the plugin instance.
|
||||
* @param mixed $plugin_definition
|
||||
* The plugin implementation definition.
|
||||
* @param \Drupal\Core\Utility\Token $token
|
||||
* The token service.
|
||||
*/
|
||||
public function __construct(array $configuration, $plugin_id, $plugin_definition, Token $token) {
|
||||
parent::__construct($configuration, $plugin_id, $plugin_definition);
|
||||
$this->token = $token;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getOutput() {
|
||||
$prefix = '<h2 class="tour-tip-label" id="tour-tip-' . $this->get('ariaId') . '-label">' . Html::escape($this->get('label')) . '</h2>';
|
||||
$prefix .= '<p class="tour-tip-image" id="tour-tip-' . $this->get('ariaId') . '-contents">';
|
||||
return [
|
||||
'#prefix' => $prefix,
|
||||
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
|
||||
return new static($configuration, $plugin_id, $plugin_definition, $container->get('token'));
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getBody(): array {
|
||||
$image = [
|
||||
'#theme' => 'image',
|
||||
'#uri' => $this->get('url'),
|
||||
'#alt' => $this->get('alt'),
|
||||
'#suffix' => '</p>',
|
||||
];
|
||||
|
||||
return [
|
||||
'#type' => 'html_tag',
|
||||
'#tag' => 'p',
|
||||
'#attributes' => [
|
||||
'class' => ['tour-tip-image'],
|
||||
],
|
||||
'image' => $image,
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\tour_test\Plugin\tour\tip;
|
||||
|
||||
use Drupal\Component\Utility\Html;
|
||||
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
|
||||
use Drupal\Core\Utility\Token;
|
||||
use Drupal\tour\TipPluginBase;
|
||||
use Symfony\Component\DependencyInjection\ContainerInterface;
|
||||
|
||||
/**
|
||||
* Displays an image as a tip.
|
||||
*
|
||||
* @Tip(
|
||||
* id = "image_legacy",
|
||||
* title = @Translation("Image Legacy")
|
||||
* )
|
||||
*/
|
||||
class TipPluginImageLegacy extends TipPluginBase implements ContainerFactoryPluginInterface {
|
||||
|
||||
/**
|
||||
* The url which is used for the image in this Tip.
|
||||
*
|
||||
* @var string
|
||||
* A url used for the image.
|
||||
*/
|
||||
protected $url;
|
||||
|
||||
/**
|
||||
* The alt text which is used for the image in this Tip.
|
||||
*
|
||||
* @var string
|
||||
* An alt text used for the image.
|
||||
*/
|
||||
protected $alt;
|
||||
|
||||
/**
|
||||
* Token service.
|
||||
*
|
||||
* @var \Drupal\Core\Utility\Token
|
||||
*/
|
||||
protected $token;
|
||||
|
||||
/**
|
||||
* Constructs a TipPluginImageLegacy object.
|
||||
*
|
||||
* @param array $configuration
|
||||
* A configuration array containing information about the plugin instance.
|
||||
* @param string $plugin_id
|
||||
* The plugin_id for the plugin instance.
|
||||
* @param mixed $plugin_definition
|
||||
* The plugin implementation definition.
|
||||
* @param \Drupal\Core\Utility\Token $token
|
||||
* The token service.
|
||||
*/
|
||||
public function __construct(array $configuration, $plugin_id, $plugin_definition, Token $token) {
|
||||
parent::__construct($configuration, $plugin_id, $plugin_definition);
|
||||
$this->token = $token;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
|
||||
return new static($configuration, $plugin_id, $plugin_definition, $container->get('token'));
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getConfigurationOrNot() {
|
||||
$image = [
|
||||
'#theme' => 'image',
|
||||
'#uri' => $this->get('url'),
|
||||
'#alt' => $this->get('alt'),
|
||||
];
|
||||
|
||||
return [
|
||||
'title' => Html::escape($this->get('label')),
|
||||
'body' => $this->token->replace(\Drupal::service('renderer')->renderPlain($image)),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getOutput() {
|
||||
$prefix = '<h2 class="tour-tip-label" id="tour-tip-' . $this->get('ariaId') . '-label">' . Html::escape($this->get('label')) . '</h2>';
|
||||
$prefix .= '<p class="tour-tip-image" id="tour-tip-' . $this->get('ariaId') . '-contents">';
|
||||
return [
|
||||
'#prefix' => $prefix,
|
||||
'#theme' => 'image',
|
||||
'#uri' => $this->get('url'),
|
||||
'#alt' => $this->get('alt'),
|
||||
'#suffix' => '</p>',
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<?php
|
||||
|
||||
namespace Drupal\tour_test\Plugin\tour\tip;
|
||||
|
||||
use Drupal\Component\Utility\Html;
|
||||
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
|
||||
use Drupal\Core\Utility\Token;
|
||||
use Drupal\tour\TipPluginBase;
|
||||
use Symfony\Component\DependencyInjection\ContainerInterface;
|
||||
|
||||
/**
|
||||
* Displays some text as a tip.
|
||||
*
|
||||
* @Tip(
|
||||
* id = "text_legacy",
|
||||
* title = @Translation("Text Legacy")
|
||||
* )
|
||||
*/
|
||||
class TipPluginTextLegacy extends TipPluginBase implements ContainerFactoryPluginInterface {
|
||||
|
||||
/**
|
||||
* The body text which is used for render of this Text Tip.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $body;
|
||||
|
||||
/**
|
||||
* Token service.
|
||||
*
|
||||
* @var \Drupal\Core\Utility\Token
|
||||
*/
|
||||
protected $token;
|
||||
|
||||
/**
|
||||
* The forced position of where the tip will be located.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $location;
|
||||
|
||||
/**
|
||||
* Unique aria-id.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
protected $ariaId;
|
||||
|
||||
/**
|
||||
* Constructs a TipPluginTextLegacy object.
|
||||
*
|
||||
* @param array $configuration
|
||||
* A configuration array containing information about the plugin instance.
|
||||
* @param string $plugin_id
|
||||
* The plugin_id for the plugin instance.
|
||||
* @param mixed $plugin_definition
|
||||
* The plugin implementation definition.
|
||||
* @param \Drupal\Core\Utility\Token $token
|
||||
* The token service.
|
||||
*/
|
||||
public function __construct(array $configuration, $plugin_id, $plugin_definition, Token $token) {
|
||||
parent::__construct($configuration, $plugin_id, $plugin_definition);
|
||||
$this->token = $token;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
|
||||
return new static($configuration, $plugin_id, $plugin_definition, $container->get('token'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an ID that is guaranteed uniqueness.
|
||||
*
|
||||
* @return string
|
||||
* A unique id to be used to generate aria attributes.
|
||||
*/
|
||||
public function getAriaId() {
|
||||
if (!$this->ariaId) {
|
||||
$this->ariaId = Html::getUniqueId($this->get('id'));
|
||||
}
|
||||
return $this->ariaId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns body of the text tip.
|
||||
*
|
||||
* @return string
|
||||
* The tip body.
|
||||
*/
|
||||
public function getBody() {
|
||||
return $this->get('body');
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getAttributes() {
|
||||
$attributes = parent::getAttributes();
|
||||
$attributes['data-aria-describedby'] = 'tour-tip-' . $this->getAriaId() . '-contents';
|
||||
$attributes['data-aria-labelledby'] = 'tour-tip-' . $this->getAriaId() . '-label';
|
||||
if ($location = $this->get('location')) {
|
||||
$attributes['data-options'] = 'tipLocation:' . $location;
|
||||
}
|
||||
return $attributes;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getOutput() {
|
||||
$output = '<h2 class="tour-tip-label" id="tour-tip-' . $this->getAriaId() . '-label">' . Html::escape($this->getLabel()) . '</h2>';
|
||||
$output .= '<p class="tour-tip-body" id="tour-tip-' . $this->getAriaId() . '-contents">' . $this->token->replace($this->getBody()) . '</p>';
|
||||
return ['#markup' => $output];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ tour:
|
|||
- core/jquery.once
|
||||
- core/drupal
|
||||
- core/backbone
|
||||
- core/jquery.joyride
|
||||
- core/shepherd
|
||||
- tour/tour-styling
|
||||
|
||||
tour-styling:
|
||||
|
|
|
|||
|
|
@ -114,3 +114,82 @@ function tour_tour_insert($entity) {
|
|||
function tour_tour_update($entity) {
|
||||
\Drupal::service('plugin.manager.tour.tip')->clearCachedDefinitions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements hook_ENTITY_TYPE_presave() for tour entities.
|
||||
*
|
||||
* @todo https://www.drupal.org/i/3195823 Remove once deprecated properties are
|
||||
* no longer supported.
|
||||
*/
|
||||
function tour_tour_presave(Tour $tour) {
|
||||
_tour_update_joyride($tour);
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates a tour to make it compatible with the Shepherd library.
|
||||
*
|
||||
* @param \Drupal\tour\Entity\Tour $tour
|
||||
* The tour to update.
|
||||
* @param bool $trigger_deprecation
|
||||
* (optional) Whether to trigger deprecations. Defaults to TRUE.
|
||||
*
|
||||
* @return bool
|
||||
* Whether or not the entity needs saving.
|
||||
*
|
||||
* @see tour_post_update_joyride_selectors_to_selector_property()
|
||||
*
|
||||
* @internal
|
||||
*
|
||||
* @todo https://www.drupal.org/i/3195823 Remove once deprecated properties are
|
||||
* no longer supported.
|
||||
*/
|
||||
function _tour_update_joyride(Tour $tour, bool $trigger_deprecation = TRUE): bool {
|
||||
$needs_save = FALSE;
|
||||
|
||||
// Update jQuery Joyride based plugins into a new, more structured format that
|
||||
// is compatible with Shepherd.
|
||||
$tips = $tour->get('tips');
|
||||
foreach ($tips as &$tip) {
|
||||
if (isset($tip['attributes']['data-class']) || isset($tip['attributes']['data-id'])) {
|
||||
if ($trigger_deprecation) {
|
||||
@trigger_error("The tour.tip 'attributes' config schema property is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Instead of 'data-class' and 'data-id' attributes, use 'selector' to specify the element a tip attaches to. See https://www.drupal.org/node/3204093", E_USER_DEPRECATED);
|
||||
}
|
||||
|
||||
$needs_save = TRUE;
|
||||
$selector = isset($tip['attributes']['data-class']) ? ".{$tip['attributes']['data-class']}" : NULL;
|
||||
$selector = isset($tip['attributes']['data-id']) ? "#{$tip['attributes']['data-id']}" : $selector;
|
||||
$tip['selector'] = $selector;
|
||||
|
||||
// Although the attributes property is deprecated, only the properties
|
||||
// with 1:1 equivalents are unset.
|
||||
unset($tip['attributes']['data-class'], $tip['attributes']['data-id']);
|
||||
// Remove attributes if it is now empty.
|
||||
if (empty($tip['attributes'])) {
|
||||
unset($tip['attributes']);
|
||||
}
|
||||
}
|
||||
if (isset($tip['location'])) {
|
||||
if ($trigger_deprecation) {
|
||||
@trigger_error("The tour.tip 'location' config schema property is deprecated in drupal:9.2.0 and is removed from drupal:10.0.0. Instead use 'position'. The value must be a valid placement accepted by PopperJS. See https://www.drupal.org/node/3204093", E_USER_DEPRECATED);
|
||||
}
|
||||
$needs_save = TRUE;
|
||||
|
||||
// Joyride only supports four location options: 'top', 'bottom',
|
||||
// 'left', and 'right'. Shepherd also accepts these as options, but they
|
||||
// result in different behavior. A given Joyride location option will
|
||||
// provide the same results in Shepherd if '-start' is appended to it (
|
||||
// e.g. the 'left-start' option in Shepherd positions the element the
|
||||
// same way that 'left' does in Joyride.
|
||||
//
|
||||
// @see https://shepherdjs.dev/docs/Step.html
|
||||
$tip['position'] = $tip['location'] . '-start';
|
||||
unset($tip['location']);
|
||||
}
|
||||
}
|
||||
|
||||
if ($needs_save) {
|
||||
$tour->set('tips', $tips);
|
||||
}
|
||||
|
||||
return $needs_save;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Post update functions for Tour.
|
||||
*/
|
||||
|
||||
use Drupal\Core\Config\Entity\ConfigEntityUpdater;
|
||||
use Drupal\tour\Entity\Tour;
|
||||
|
||||
/**
|
||||
* Convert Joyride selectors to `selector` property.
|
||||
*
|
||||
* @see tour_tour_presave()
|
||||
*/
|
||||
function tour_post_update_joyride_selectors_to_selector_property(array &$sandbox = NULL) {
|
||||
$config_entity_updater = \Drupal::classResolver(ConfigEntityUpdater::class);
|
||||
$config_entity_updater->update($sandbox, 'tour', function (Tour $tour) {
|
||||
return _tour_update_joyride($tour, FALSE);
|
||||
});
|
||||
}
|
||||
|
|
@ -24,71 +24,62 @@ tips:
|
|||
label: 'Displays in this view'
|
||||
body: 'A display is a way of outputting the results, e.g., as a page or a block. A view can contain multiple displays, which are listed here. The active display is highlighted.'
|
||||
weight: 2
|
||||
attributes:
|
||||
data-id: views-display-top
|
||||
selector: '#views-display-top'
|
||||
views-ui-view-admin:
|
||||
id: views-ui-view-admin
|
||||
plugin: text
|
||||
label: 'View administration'
|
||||
body: 'Perform administrative tasks, including adding a description and creating a clone. Click the drop-down button to view the available options.'
|
||||
weight: 3
|
||||
location: left
|
||||
attributes:
|
||||
data-id: views-display-extra-actions
|
||||
position: right
|
||||
selector: '#views-display-extra-actions'
|
||||
views-ui-format:
|
||||
id: views-ui-format
|
||||
plugin: text
|
||||
label: 'Output format'
|
||||
body: 'Choose how to output results. E.g., choose <em>Content</em> to output each item completely, using your configured display settings. Or choose <em>Fields</em>, which allows you to output only specific fields for each result. Additional formats can be added by installing modules to <em>extend</em> Drupal''s base functionality.'
|
||||
weight: 4
|
||||
attributes:
|
||||
data-class: views-ui-display-tab-bucket.format
|
||||
selector: '.views-ui-display-tab-bucket.format'
|
||||
views-ui-fields:
|
||||
id: views-ui-fields
|
||||
plugin: text
|
||||
label: Fields
|
||||
body: 'If this view uses fields, they are listed here. You can click on a field to configure it.'
|
||||
weight: 5
|
||||
attributes:
|
||||
data-class: views-ui-display-tab-bucket.field
|
||||
selector: '.views-ui-display-tab-bucket.field'
|
||||
views-ui-filter:
|
||||
id: views-ui-filter
|
||||
plugin: text
|
||||
label: 'Filter your view'
|
||||
body: 'Add filters to limit the results in the output. E.g., to only show content that is <em>published</em>, you would add a filter for <em>Published</em> and select <em>Yes</em>.'
|
||||
weight: 6
|
||||
attributes:
|
||||
data-class: views-ui-display-tab-bucket.filter
|
||||
selector: '.views-ui-display-tab-bucket.filter'
|
||||
views-ui-filter-operations:
|
||||
id: views-ui-filter-operations
|
||||
plugin: text
|
||||
label: 'Filter actions'
|
||||
body: 'Add, rearrange or remove filters.'
|
||||
weight: 7
|
||||
attributes:
|
||||
data-class: 'views-ui-display-tab-bucket.filter .dropbutton-widget'
|
||||
selector: '.views-ui-display-tab-bucket.filter .dropbutton-widget'
|
||||
views-ui-sorts:
|
||||
id: views-ui-sorts
|
||||
plugin: text
|
||||
label: 'Sort Criteria'
|
||||
body: 'Control the order in which the results are output. Click on an active sort rule to configure it.'
|
||||
weight: 8
|
||||
attributes:
|
||||
data-class: views-ui-display-tab-bucket.sort
|
||||
selector: '.views-ui-display-tab-bucket.sort'
|
||||
views-ui-sorts-operations:
|
||||
id: views-ui-sorts-operations
|
||||
plugin: text
|
||||
label: 'Sort actions'
|
||||
body: 'Add, rearrange or remove sorting rules.'
|
||||
weight: 9
|
||||
attributes:
|
||||
data-class: 'views-ui-display-tab-bucket.sort .dropbutton-widget'
|
||||
selector: '.views-ui-display-tab-bucket.sort .dropbutton-widget'
|
||||
views-ui-preview:
|
||||
id: views-ui-preview
|
||||
plugin: text
|
||||
label: Preview
|
||||
body: 'Show a preview of the view output.'
|
||||
weight: 10
|
||||
location: left
|
||||
attributes:
|
||||
data-id: preview-submit
|
||||
position: right
|
||||
selector: '#preview-submit'
|
||||
|
|
|
|||
|
|
@ -27,45 +27,40 @@ tips:
|
|||
label: Navigation
|
||||
body: This is the main navigation menu for the Umami website. It is simple to create and administer menus and you can create as many menus as your site requires. For example, this site provides this main navigation as well as the user navigation displayed above.
|
||||
weight: 3
|
||||
location: left
|
||||
attributes:
|
||||
data-class: menu-main__link.is-active
|
||||
position: right
|
||||
selector: '.menu-main__link.is-active'
|
||||
umami-theme:
|
||||
id: umami-theme
|
||||
plugin: text
|
||||
label: The Umami theme
|
||||
body: This website uses the custom Umami theme to style its appearance. This theme has been created using CSS and by customizing Drupal's HTML templates that are built using the popular Twig templating system. Themes are also available for download and installation.
|
||||
weight: 4
|
||||
location: right
|
||||
attributes:
|
||||
data-class: block-type-banner-block .summary
|
||||
position: left
|
||||
selector: '.block-type-banner-block .summary'
|
||||
managing-content:
|
||||
id: managing-content
|
||||
plugin: text
|
||||
label: Managing content
|
||||
body: This example website provides a collection of articles and recipes that demonstrate how content can easily be managed in a flexible and structured way.
|
||||
weight: 5
|
||||
location: right
|
||||
attributes:
|
||||
data-class: view-promoted-items--single .read-more__link
|
||||
position: left
|
||||
selector: '.view-promoted-items--single .read-more__link'
|
||||
umami-front-views:
|
||||
id: umami-front-content
|
||||
plugin: text
|
||||
label: Configuring content display
|
||||
body: Display modes can be configured to provide different presentations of content. These promoted articles and recipes use the display modes feature to format the images with different ratios.
|
||||
weight: 6
|
||||
location: left
|
||||
attributes:
|
||||
data-class: view-promoted-items--double .node:nth-child(1)
|
||||
position: right
|
||||
selector: '.view-promoted-items--double .node:nth-child(1)'
|
||||
umami-views:
|
||||
id: umami-views
|
||||
plugin: text
|
||||
label: Displaying content with Views
|
||||
body: Drupal makes it simple to create lists of filtered content and control how the content is displayed using the Views feature. This latest recipes example uses a view to fetch the most recent four recipes, displays the view as a block that is positioned on the front page with the block system.
|
||||
weight: 7
|
||||
location: right
|
||||
attributes:
|
||||
data-class: view-frontpage .node:nth-child(1)
|
||||
position: left
|
||||
selector: '.view-frontpage .node:nth-child(1)'
|
||||
front-bookend:
|
||||
id: front-bookend
|
||||
plugin: text
|
||||
|
|
|
|||
|
|
@ -1,9 +1,28 @@
|
|||
.joyride-tip-guide .tour-tip-label {
|
||||
margin-top: 0;
|
||||
.shepherd-element:focus {
|
||||
outline-width: 1px;
|
||||
outline-style: dotted;
|
||||
outline-color: #008068;
|
||||
outline-offset: 2px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.joyride-tip-guide h2 {
|
||||
margin: 10px 0;
|
||||
.shepherd-cancel-icon {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon:focus {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon:hover,
|
||||
.shepherd-cancel-icon:focus {
|
||||
color: #000;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.shepherd-title {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida Sans", sans-serif;
|
||||
font-size: 18px;
|
||||
|
|
@ -11,19 +30,13 @@
|
|||
line-height: 20px;
|
||||
}
|
||||
|
||||
.joyride-tip-guide p {
|
||||
.shepherd-text p {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .button {
|
||||
.shepherd-button {
|
||||
padding: 4px 1.5em;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.joyride-tip-guide a:hover,
|
||||
.joyride-tip-guide a:focus {
|
||||
color: #000;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,27 @@ class DefaultConfigTest extends KernelTestBase {
|
|||
*/
|
||||
protected static $modules = ['system', 'config_test'];
|
||||
|
||||
/**
|
||||
* Config files to be ignored by this test.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
protected $toSkip = [
|
||||
// Skip files provided by the config_schema_test module since that module
|
||||
// is explicitly for testing schema.
|
||||
'config_schema_test.ignore',
|
||||
'config_schema_test.noschema',
|
||||
'config_schema_test.plugin_types',
|
||||
'config_schema_test.someschema.somemodule.section_one.subsection',
|
||||
'config_schema_test.someschema.somemodule.section_two.subsection',
|
||||
'config_schema_test.someschema.with_parents',
|
||||
'config_schema_test.someschema',
|
||||
// Skip tour-test-legacy files as they intentionally have deprecated
|
||||
// properties.
|
||||
'tour.tour.tour-test-legacy',
|
||||
'tour.tour.tour-test-legacy-location',
|
||||
];
|
||||
|
||||
/**
|
||||
* Themes which provide default configuration and need enabling.
|
||||
*
|
||||
|
|
@ -62,11 +83,8 @@ class DefaultConfigTest extends KernelTestBase {
|
|||
// Create a configuration storage with access to default configuration in
|
||||
// every module, profile and theme.
|
||||
$default_config_storage = new TestInstallStorage();
|
||||
|
||||
foreach ($default_config_storage->listAll() as $config_name) {
|
||||
// Skip files provided by the config_schema_test module since that module
|
||||
// is explicitly for testing schema.
|
||||
if (strpos($config_name, 'config_schema_test') === 0) {
|
||||
if (in_array($config_name, $this->toSkip)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@ libraries-extend:
|
|||
- bartik/classy.media_library
|
||||
media_library/widget:
|
||||
- bartik/classy.media_library
|
||||
tour/tour:
|
||||
- bartik/tour
|
||||
user/drupal.user:
|
||||
- bartik/user
|
||||
|
||||
|
|
|
|||
|
|
@ -114,6 +114,11 @@ classy.base:
|
|||
css/classy/components/tabs.css: { weight: -10 }
|
||||
css/classy/components/textarea.css: { weight: -10 }
|
||||
css/classy/components/ui-dialog.css: { weight: -10 }
|
||||
tour:
|
||||
version: VERSION
|
||||
css:
|
||||
component:
|
||||
css/components/tour.css: {}
|
||||
|
||||
user:
|
||||
version: VERSION
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
.shepherd-cancel-icon {
|
||||
text-decoration: none;
|
||||
color: #0071b3;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon:hover,
|
||||
.shepherd-cancel-icon:focus {
|
||||
color: #008ee2;
|
||||
}
|
||||
|
|
@ -160,7 +160,7 @@ tour-styling:
|
|||
version: VERSION
|
||||
css:
|
||||
theme:
|
||||
css/components/tour.theme.css: {}
|
||||
css/theme/tour.theme.css: {}
|
||||
|
||||
media-form:
|
||||
version: VERSION
|
||||
|
|
|
|||
|
|
@ -1,127 +0,0 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for Tour theme.
|
||||
*/
|
||||
|
||||
/* Default styles for the container */
|
||||
|
||||
.joyride-tip-guide {
|
||||
color: #fff;
|
||||
border-radius: 0.3125rem;
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
|
||||
@media only screen and (max-width: 47.9375rem) {
|
||||
.joyride-tip-guide {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
|
||||
|
||||
.joyride-tip-guide .joyride-nub {
|
||||
border: solid 14px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.top {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.bottom {
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent; /* LTR */
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
[dir="rtl"] .joyride-tip-guide .joyride-nub.right {
|
||||
border-right-color: rgba(0, 0, 0, 0.8);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.left {
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent; /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .joyride-tip-guide .joyride-nub.left {
|
||||
border-right-color: transparent;
|
||||
border-left-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.joyride-tip-guide .joyride-nub.top-right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
.joyride-tip-guide h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.joyride-tip-guide p {
|
||||
line-height: 1.385em;
|
||||
}
|
||||
|
||||
.joyride-tip-guide a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Button Style */
|
||||
|
||||
.joyride-tip-guide .joyride-next-tip {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.joyride-timer-indicator-wrap {
|
||||
border: solid 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.joyride-timer-indicator {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.joyride-close-tip {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.joyride-close-tip:hover,
|
||||
.joyride-close-tip:focus {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.joyride-modal-bg {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.joyride-expose-wrapper {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.joyride-expose-cover {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* Styles for Tour theme.
|
||||
*/
|
||||
|
||||
/* Default styles for the container */
|
||||
.joyride-tip-guide {
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.joyride-tip-guide {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
|
||||
.joyride-tip-guide .joyride-nub {
|
||||
border: solid 14px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.top {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.bottom {
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent; /* LTR */
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
[dir="rtl"] .joyride-tip-guide .joyride-nub.right {
|
||||
border-right-color: rgba(0, 0, 0, 0.8);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.left {
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .joyride-tip-guide .joyride-nub.left {
|
||||
border-right-color: transparent;
|
||||
border-left-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.top-right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.joyride-tip-guide h2 {
|
||||
color: #fff;
|
||||
}
|
||||
.joyride-tip-guide p {
|
||||
line-height: 1.385em;
|
||||
}
|
||||
.joyride-tip-guide a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Button Style */
|
||||
.joyride-tip-guide .joyride-next-tip {
|
||||
margin: 0;
|
||||
}
|
||||
.joyride-timer-indicator-wrap {
|
||||
border: solid 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.joyride-timer-indicator {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.joyride-close-tip {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.joyride-close-tip:hover,
|
||||
.joyride-close-tip:focus {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.joyride-modal-bg {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.joyride-expose-wrapper {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.joyride-expose-cover {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for Tour theme.
|
||||
*/
|
||||
|
||||
/* Default styles for the container */
|
||||
|
||||
.shepherd-element {
|
||||
color: #fff;
|
||||
border-radius: 0.3125rem;
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.shepherd-element:focus {
|
||||
outline: 2px dotted transparent;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
|
||||
@media only screen and (max-width: 47.9375rem) {
|
||||
.shepherd-element {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shepherd-arrow:before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
|
||||
|
||||
.shepherd-arrow {
|
||||
border: solid 14px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
|
||||
bottom: -1.75rem;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
|
||||
top: -1.75rem;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=left] > .shepherd-arrow {
|
||||
right: -1.75rem;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent; /* LTR */
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=right] > .shepherd-arrow {
|
||||
left: -1.75rem;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent; /* LTR */
|
||||
}
|
||||
|
||||
.shepherd-text p {
|
||||
line-height: 1.385em;
|
||||
}
|
||||
|
||||
.shepherd-text a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon {
|
||||
color: #fff;
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon:hover,
|
||||
.shepherd-cancel-icon:focus {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.shepherd-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shepherd-content *:focus {
|
||||
outline: 2px dotted transparent;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
/**
|
||||
* @file
|
||||
* Styles for Tour theme.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
/* Default styles for the container */
|
||||
.shepherd-element {
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.shepherd-element:focus {
|
||||
outline: 2px dotted transparent;
|
||||
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.shepherd-element {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shepherd-arrow:before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
|
||||
.shepherd-arrow {
|
||||
border: solid 14px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
|
||||
bottom: -28px;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
|
||||
top: -28px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=left] > .shepherd-arrow {
|
||||
right: -28px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent; /* LTR */
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=right] > .shepherd-arrow {
|
||||
left: -28px;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent; /* LTR */
|
||||
}
|
||||
|
||||
.shepherd-text p {
|
||||
line-height: 1.385em;
|
||||
}
|
||||
.shepherd-text a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon {
|
||||
color: #fff;
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
.shepherd-cancel-icon:hover,
|
||||
.shepherd-cancel-icon:focus {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.shepherd-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shepherd-content *:focus {
|
||||
outline: 2px dotted transparent;
|
||||
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
|
||||
}
|
||||
|
|
@ -4,100 +4,76 @@
|
|||
*/
|
||||
|
||||
/* Default styles for the container */
|
||||
.joyride-tip-guide {
|
||||
.shepherd-element {
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.shepherd-element:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.joyride-tip-guide {
|
||||
.shepherd-element {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shepherd-arrow:before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Add a little css triangle pip, older browser just miss out on the fanciness of it. */
|
||||
.joyride-tip-guide .joyride-nub {
|
||||
.shepherd-arrow {
|
||||
border: solid 14px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.top {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.bottom {
|
||||
|
||||
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
|
||||
bottom: -28px;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.right {
|
||||
|
||||
.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
|
||||
top: -28px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=left] > .shepherd-arrow {
|
||||
right: -28px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent; /* LTR */
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
[dir="rtl"] .joyride-tip-guide .joyride-nub.right {
|
||||
border-right-color: rgba(0, 0, 0, 0.8);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.left {
|
||||
|
||||
.shepherd-element[data-popper-placement^=right] > .shepherd-arrow {
|
||||
left: -28px;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .joyride-tip-guide .joyride-nub.left {
|
||||
border-right-color: transparent;
|
||||
border-left-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.joyride-tip-guide .joyride-nub.top-right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.joyride-tip-guide h2 {
|
||||
color: #fff;
|
||||
}
|
||||
.joyride-tip-guide p {
|
||||
.shepherd-text p {
|
||||
line-height: 1.385em;
|
||||
}
|
||||
.joyride-tip-guide a {
|
||||
.shepherd-text a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Button Style */
|
||||
.joyride-tip-guide .joyride-next-tip {
|
||||
margin: 0;
|
||||
}
|
||||
.joyride-timer-indicator-wrap {
|
||||
border: solid 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.joyride-timer-indicator {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.joyride-close-tip {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
.shepherd-cancel-icon {
|
||||
color: #fff;
|
||||
font-family: "Open Sans", Verdana, sans-serif;
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.joyride-close-tip:hover,
|
||||
.joyride-close-tip:focus {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.joyride-modal-bg {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.joyride-expose-wrapper {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.joyride-expose-cover {
|
||||
background: transparent;
|
||||
.shepherd-cancel-icon:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,3 +141,33 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* In Joyride, display: block is added as an inline style. */
|
||||
.shepherd-element.joyride-tip-guide {
|
||||
display: block;
|
||||
}
|
||||
.shepherd-element.joyride-tip-guide[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shepherd-modal-overlay-container {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
|
||||
height: 100vh;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
/**
|
||||
* @file
|
||||
* Provides backwards compatibility for Tours that no longer use Joyride.
|
||||
*/
|
||||
|
||||
((Drupal) => {
|
||||
/**
|
||||
* Converts the markup of a Shepherd tour tip to match Joyride.
|
||||
*
|
||||
* @param {Tour} shepherdTour
|
||||
* A ShepherdJS tour object.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
Drupal.tour.convertToJoyrideMarkup = (shepherdTour) => {
|
||||
/**
|
||||
* Changes the tag of an element.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* The element that will have its tag changed.
|
||||
* @param {string} tag
|
||||
* The tag the element should be changed to.
|
||||
*/
|
||||
const changeTag = (element, tag) => {
|
||||
if (element) {
|
||||
const newTagElement = document.createElement(tag);
|
||||
[...element.attributes].forEach((attr) => {
|
||||
newTagElement.setAttribute(attr.name, attr.value);
|
||||
});
|
||||
newTagElement.innerHTML = element.innerHTML;
|
||||
element.parentNode.replaceChild(newTagElement, element);
|
||||
}
|
||||
};
|
||||
|
||||
// Create variables for the elements that will be rearranged.
|
||||
const shepherdElement = shepherdTour.currentStep.el;
|
||||
const shepherdContent = shepherdElement.querySelector('.shepherd-content');
|
||||
const shepherdCancel = shepherdElement.querySelector(
|
||||
'.shepherd-cancel-icon',
|
||||
);
|
||||
const shepherdTitle = shepherdElement.querySelector('.shepherd-title');
|
||||
const shepherdText = shepherdElement.querySelector('.shepherd-text');
|
||||
const shepherdNext = shepherdElement.querySelector('footer .button');
|
||||
const tourProgress = shepherdElement.querySelector('.tour-progress');
|
||||
|
||||
// Add attributes to the elements so they match what they were when Joyride
|
||||
// was providing Tour functionality.
|
||||
shepherdElement.classList.add('joyride-tip-guide');
|
||||
shepherdContent.classList.add('joyride-content-wrapper');
|
||||
shepherdNext.classList.add('joyride-next-tip');
|
||||
shepherdNext.setAttribute('href', '#');
|
||||
shepherdNext.setAttribute('role', 'button');
|
||||
shepherdNext.removeAttribute('type');
|
||||
shepherdCancel.classList.add('joyride-close-tip');
|
||||
shepherdCancel.removeAttribute('type');
|
||||
shepherdCancel.setAttribute('href', '#');
|
||||
shepherdCancel.setAttribute('role', 'button');
|
||||
shepherdElement.setAttribute(
|
||||
'data-index',
|
||||
shepherdTour.currentStep.options.index,
|
||||
);
|
||||
shepherdElement.querySelector('footer').remove();
|
||||
|
||||
// If the class list includes `tip-uses-get-output`, then the tip was created
|
||||
// by a deprecated tip plugin. This means the markup has some differences
|
||||
// that require some different steps to rebuild it as Joyride BC markup.
|
||||
// @todo remove the contents of the 'if' in this conditional in
|
||||
// https://drupal.org/node/3195193.
|
||||
if (shepherdElement.classList.contains('tip-uses-get-output')) {
|
||||
// Move the next button.
|
||||
shepherdText.appendChild(shepherdNext);
|
||||
|
||||
// Move the cancel button and remove the now unnecessary header.
|
||||
shepherdText.appendChild(shepherdCancel);
|
||||
shepherdContent.querySelector('.shepherd-header').remove();
|
||||
|
||||
// Remove empty paragraphs from the text container markup.
|
||||
Array.from(shepherdText.children).forEach((node) => {
|
||||
if (
|
||||
node.tagName === 'P' &&
|
||||
node.textContent === '' &&
|
||||
node.classList.length === 0
|
||||
) {
|
||||
node.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Move the contents of shepherdText directly into shepherdContent to
|
||||
// remove the now redundant `<p>` provided by TipPlugin. Shepherd already
|
||||
// wraps its content in a `<p>`, so the Plugin provided tag is redundant.
|
||||
shepherdContent.innerHTML = shepherdText.innerHTML;
|
||||
} else {
|
||||
// Rearrange elements so their structure matches Joyride's.
|
||||
shepherdContent.insertBefore(shepherdTitle, shepherdContent.firstChild);
|
||||
shepherdContent.insertBefore(tourProgress, shepherdText.nextSibling);
|
||||
shepherdContent.appendChild(shepherdCancel);
|
||||
shepherdContent.querySelector('.shepherd-header').remove();
|
||||
shepherdContent.insertBefore(shepherdNext, tourProgress.nextSibling);
|
||||
shepherdCancel.innerHTML = '<span aria-hidden="true">×</span>';
|
||||
shepherdTitle.classList.add('tour-tip-label');
|
||||
|
||||
// Convert elements to use the tags they used in Joyride.
|
||||
changeTag(shepherdTitle, 'h2');
|
||||
|
||||
// Remove the wrapper Shepherd adds for tip content.
|
||||
shepherdText.outerHTML = shepherdText.innerHTML;
|
||||
}
|
||||
|
||||
// Convert the next and cancel buttons to links so they match Joyride's
|
||||
// markup. They must be re-queried as they were potentially moved elsewhere
|
||||
// in the DOM.
|
||||
changeTag(shepherdElement.querySelector('.joyride-close-tip'), 'a');
|
||||
changeTag(shepherdElement.querySelector('.joyride-next-tip'), 'a');
|
||||
|
||||
// The arrow protruding from a tip pointing to the element it references.
|
||||
const shepherdArrow = shepherdElement.querySelector('.shepherd-arrow');
|
||||
|
||||
if (shepherdArrow) {
|
||||
shepherdArrow.classList.add('joyride-nub');
|
||||
|
||||
if (shepherdTour.currentStep.options.attachTo.on) {
|
||||
// Shepherd's positions are opposite of Joyride's as they specify the
|
||||
// tip location relative to the corresponding element as opposed to
|
||||
// their location on the tip itself.
|
||||
const stepToTipPosition = {
|
||||
bottom: 'top',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
right: 'left',
|
||||
};
|
||||
shepherdArrow.classList.add(
|
||||
// Split at '-' as shepherd positioning accommodates dash-delimited
|
||||
// secondary axis positioning.
|
||||
// shepherdTour.currentStep.options.attachTo.on.split('-')[0]
|
||||
stepToTipPosition[
|
||||
// Split at '-' as shepherd positioning accommodates dash-delimited
|
||||
// secondary axis positioning.
|
||||
shepherdTour.currentStep.options.attachTo.on.split('-')[0]
|
||||
],
|
||||
);
|
||||
}
|
||||
changeTag(shepherdArrow, 'span');
|
||||
} else {
|
||||
// If there is no Shepherd arrow, there still needs to be markup for a
|
||||
// non-displayed nub to match Joyride's markup.
|
||||
const nub = document.createElement('span');
|
||||
nub.classList.add('joyride-nub');
|
||||
nub.setAttribute('style', 'display: none;');
|
||||
shepherdElement.insertBefore(nub, shepherdElement.firstChild);
|
||||
}
|
||||
|
||||
// When the next and cancel buttons were converted to links, they became
|
||||
// new DOM elements that no longer have their associated event listeners.
|
||||
// The events must be reintroduced here.
|
||||
shepherdElement
|
||||
.querySelector('.joyride-next-tip')
|
||||
.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
shepherdTour.next();
|
||||
});
|
||||
shepherdElement
|
||||
.querySelector('.joyride-close-tip')
|
||||
.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
shepherdTour.cancel();
|
||||
});
|
||||
shepherdElement.querySelector('.joyride-next-tip').focus();
|
||||
};
|
||||
})(Drupal);
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
||||
|
||||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
|
||||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
||||
|
||||
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
||||
|
||||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
||||
|
||||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
||||
|
||||
(function (Drupal) {
|
||||
Drupal.tour.convertToJoyrideMarkup = function (shepherdTour) {
|
||||
var changeTag = function changeTag(element, tag) {
|
||||
if (element) {
|
||||
var newTagElement = document.createElement(tag);
|
||||
|
||||
_toConsumableArray(element.attributes).forEach(function (attr) {
|
||||
newTagElement.setAttribute(attr.name, attr.value);
|
||||
});
|
||||
|
||||
newTagElement.innerHTML = element.innerHTML;
|
||||
element.parentNode.replaceChild(newTagElement, element);
|
||||
}
|
||||
};
|
||||
|
||||
var shepherdElement = shepherdTour.currentStep.el;
|
||||
var shepherdContent = shepherdElement.querySelector('.shepherd-content');
|
||||
var shepherdCancel = shepherdElement.querySelector('.shepherd-cancel-icon');
|
||||
var shepherdTitle = shepherdElement.querySelector('.shepherd-title');
|
||||
var shepherdText = shepherdElement.querySelector('.shepherd-text');
|
||||
var shepherdNext = shepherdElement.querySelector('footer .button');
|
||||
var tourProgress = shepherdElement.querySelector('.tour-progress');
|
||||
shepherdElement.classList.add('joyride-tip-guide');
|
||||
shepherdContent.classList.add('joyride-content-wrapper');
|
||||
shepherdNext.classList.add('joyride-next-tip');
|
||||
shepherdNext.setAttribute('href', '#');
|
||||
shepherdNext.setAttribute('role', 'button');
|
||||
shepherdNext.removeAttribute('type');
|
||||
shepherdCancel.classList.add('joyride-close-tip');
|
||||
shepherdCancel.removeAttribute('type');
|
||||
shepherdCancel.setAttribute('href', '#');
|
||||
shepherdCancel.setAttribute('role', 'button');
|
||||
shepherdElement.setAttribute('data-index', shepherdTour.currentStep.options.index);
|
||||
shepherdElement.querySelector('footer').remove();
|
||||
|
||||
if (shepherdElement.classList.contains('tip-uses-get-output')) {
|
||||
shepherdText.appendChild(shepherdNext);
|
||||
shepherdText.appendChild(shepherdCancel);
|
||||
shepherdContent.querySelector('.shepherd-header').remove();
|
||||
Array.from(shepherdText.children).forEach(function (node) {
|
||||
if (node.tagName === 'P' && node.textContent === '' && node.classList.length === 0) {
|
||||
node.remove();
|
||||
}
|
||||
});
|
||||
shepherdContent.innerHTML = shepherdText.innerHTML;
|
||||
} else {
|
||||
shepherdContent.insertBefore(shepherdTitle, shepherdContent.firstChild);
|
||||
shepherdContent.insertBefore(tourProgress, shepherdText.nextSibling);
|
||||
shepherdContent.appendChild(shepherdCancel);
|
||||
shepherdContent.querySelector('.shepherd-header').remove();
|
||||
shepherdContent.insertBefore(shepherdNext, tourProgress.nextSibling);
|
||||
shepherdCancel.innerHTML = '<span aria-hidden="true">×</span>';
|
||||
shepherdTitle.classList.add('tour-tip-label');
|
||||
changeTag(shepherdTitle, 'h2');
|
||||
shepherdText.outerHTML = shepherdText.innerHTML;
|
||||
}
|
||||
|
||||
changeTag(shepherdElement.querySelector('.joyride-close-tip'), 'a');
|
||||
changeTag(shepherdElement.querySelector('.joyride-next-tip'), 'a');
|
||||
var shepherdArrow = shepherdElement.querySelector('.shepherd-arrow');
|
||||
|
||||
if (shepherdArrow) {
|
||||
shepherdArrow.classList.add('joyride-nub');
|
||||
|
||||
if (shepherdTour.currentStep.options.attachTo.on) {
|
||||
var stepToTipPosition = {
|
||||
bottom: 'top',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
right: 'left'
|
||||
};
|
||||
shepherdArrow.classList.add(stepToTipPosition[shepherdTour.currentStep.options.attachTo.on.split('-')[0]]);
|
||||
}
|
||||
|
||||
changeTag(shepherdArrow, 'span');
|
||||
} else {
|
||||
var nub = document.createElement('span');
|
||||
nub.classList.add('joyride-nub');
|
||||
nub.setAttribute('style', 'display: none;');
|
||||
shepherdElement.insertBefore(nub, shepherdElement.firstChild);
|
||||
}
|
||||
|
||||
shepherdElement.querySelector('.joyride-next-tip').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
shepherdTour.next();
|
||||
});
|
||||
shepherdElement.querySelector('.joyride-close-tip').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
shepherdTour.cancel();
|
||||
});
|
||||
shepherdElement.querySelector('.joyride-next-tip').focus();
|
||||
};
|
||||
})(Drupal);
|
||||
|
|
@ -306,3 +306,5 @@ libraries-extend:
|
|||
- stable/drupal.ajax
|
||||
user/drupal.user:
|
||||
- stable/drupal.user
|
||||
tour/tour:
|
||||
- stable/tour
|
||||
|
|
|
|||
|
|
@ -19,3 +19,8 @@ normalize:
|
|||
base:
|
||||
css/core/assets/vendor/normalize-css/normalize.css: { weight: -20 }
|
||||
css/core/normalize-fixes.css: { weight: -19 }
|
||||
|
||||
tour:
|
||||
version: VERSION
|
||||
js:
|
||||
js/tour.js: {}
|
||||
|
|
|
|||
|
|
@ -141,3 +141,33 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* In Joyride, display: block is added as an inline style. */
|
||||
.shepherd-element.joyride-tip-guide {
|
||||
display: block;
|
||||
}
|
||||
.shepherd-element.joyride-tip-guide[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shepherd-modal-overlay-container {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
|
||||
height: 100vh;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
/**
|
||||
* @file
|
||||
* Provides backwards compatibility for Tours that no longer use Joyride.
|
||||
*/
|
||||
|
||||
((Drupal) => {
|
||||
/**
|
||||
* Converts the markup of a Shepherd tour tip to match Joyride.
|
||||
*
|
||||
* @param {Tour} shepherdTour
|
||||
* A ShepherdJS tour object.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
Drupal.tour.convertToJoyrideMarkup = (shepherdTour) => {
|
||||
/**
|
||||
* Changes the tag of an element.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* The element that will have its tag changed.
|
||||
* @param {string} tag
|
||||
* The tag the element should be changed to.
|
||||
*/
|
||||
const changeTag = (element, tag) => {
|
||||
if (element) {
|
||||
const newTagElement = document.createElement(tag);
|
||||
[...element.attributes].forEach((attr) => {
|
||||
newTagElement.setAttribute(attr.name, attr.value);
|
||||
});
|
||||
newTagElement.innerHTML = element.innerHTML;
|
||||
element.parentNode.replaceChild(newTagElement, element);
|
||||
}
|
||||
};
|
||||
|
||||
// Create variables for the elements that will be rearranged.
|
||||
const shepherdElement = shepherdTour.currentStep.el;
|
||||
const shepherdContent = shepherdElement.querySelector('.shepherd-content');
|
||||
const shepherdCancel = shepherdElement.querySelector(
|
||||
'.shepherd-cancel-icon',
|
||||
);
|
||||
const shepherdTitle = shepherdElement.querySelector('.shepherd-title');
|
||||
const shepherdText = shepherdElement.querySelector('.shepherd-text');
|
||||
const shepherdNext = shepherdElement.querySelector('footer .button');
|
||||
const tourProgress = shepherdElement.querySelector('.tour-progress');
|
||||
|
||||
// Add attributes to the elements so they match what they were when Joyride
|
||||
// was providing Tour functionality.
|
||||
shepherdElement.classList.add('joyride-tip-guide');
|
||||
shepherdContent.classList.add('joyride-content-wrapper');
|
||||
shepherdNext.classList.add('joyride-next-tip');
|
||||
shepherdNext.setAttribute('href', '#');
|
||||
shepherdNext.setAttribute('role', 'button');
|
||||
shepherdNext.removeAttribute('type');
|
||||
shepherdCancel.classList.add('joyride-close-tip');
|
||||
shepherdCancel.removeAttribute('type');
|
||||
shepherdCancel.setAttribute('href', '#');
|
||||
shepherdCancel.setAttribute('role', 'button');
|
||||
shepherdElement.setAttribute(
|
||||
'data-index',
|
||||
shepherdTour.currentStep.options.index,
|
||||
);
|
||||
shepherdElement.querySelector('footer').remove();
|
||||
|
||||
// If the class list includes `tip-uses-get-output`, then the tip was created
|
||||
// by a deprecated tip plugin. This means the markup has some differences
|
||||
// that require some different steps to rebuild it as Joyride BC markup.
|
||||
// @todo remove the contents of the 'if' in this conditional in
|
||||
// https://drupal.org/node/3195193.
|
||||
if (shepherdElement.classList.contains('tip-uses-get-output')) {
|
||||
// Move the next button.
|
||||
shepherdText.appendChild(shepherdNext);
|
||||
|
||||
// Move the cancel button and remove the now unnecessary header.
|
||||
shepherdText.appendChild(shepherdCancel);
|
||||
shepherdContent.querySelector('.shepherd-header').remove();
|
||||
|
||||
// Remove empty paragraphs from the text container markup.
|
||||
Array.from(shepherdText.children).forEach((node) => {
|
||||
if (
|
||||
node.tagName === 'P' &&
|
||||
node.textContent === '' &&
|
||||
node.classList.length === 0
|
||||
) {
|
||||
node.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Move the contents of shepherdText directly into shepherdContent to
|
||||
// remove the now redundant `<p>` provided by TipPlugin. Shepherd already
|
||||
// wraps its content in a `<p>`, so the Plugin provided tag is redundant.
|
||||
shepherdContent.innerHTML = shepherdText.innerHTML;
|
||||
} else {
|
||||
// Rearrange elements so their structure matches Joyride's.
|
||||
shepherdContent.insertBefore(shepherdTitle, shepherdContent.firstChild);
|
||||
shepherdContent.insertBefore(tourProgress, shepherdText.nextSibling);
|
||||
shepherdContent.appendChild(shepherdCancel);
|
||||
shepherdContent.querySelector('.shepherd-header').remove();
|
||||
shepherdContent.insertBefore(shepherdNext, tourProgress.nextSibling);
|
||||
shepherdCancel.innerHTML = '<span aria-hidden="true">×</span>';
|
||||
shepherdTitle.classList.add('tour-tip-label');
|
||||
|
||||
// Convert elements to use the tags they used in Joyride.
|
||||
changeTag(shepherdTitle, 'h2');
|
||||
|
||||
// Remove the wrapper Shepherd adds for tip content.
|
||||
shepherdText.outerHTML = shepherdText.innerHTML;
|
||||
}
|
||||
|
||||
// Convert the next and cancel buttons to links so they match Joyride's
|
||||
// markup. They must be re-queried as they were potentially moved elsewhere
|
||||
// in the DOM.
|
||||
changeTag(shepherdElement.querySelector('.joyride-close-tip'), 'a');
|
||||
changeTag(shepherdElement.querySelector('.joyride-next-tip'), 'a');
|
||||
|
||||
// The arrow protruding from a tip pointing to the element it references.
|
||||
const shepherdArrow = shepherdElement.querySelector('.shepherd-arrow');
|
||||
|
||||
if (shepherdArrow) {
|
||||
shepherdArrow.classList.add('joyride-nub');
|
||||
|
||||
if (shepherdTour.currentStep.options.attachTo.on) {
|
||||
// Shepherd's positions are opposite of Joyride's as they specify the
|
||||
// tip location relative to the corresponding element as opposed to
|
||||
// their location on the tip itself.
|
||||
const stepToTipPosition = {
|
||||
bottom: 'top',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
right: 'left',
|
||||
};
|
||||
shepherdArrow.classList.add(
|
||||
// Split at '-' as shepherd positioning accommodates dash-delimited
|
||||
// secondary axis positioning.
|
||||
// shepherdTour.currentStep.options.attachTo.on.split('-')[0]
|
||||
stepToTipPosition[
|
||||
// Split at '-' as shepherd positioning accommodates dash-delimited
|
||||
// secondary axis positioning.
|
||||
shepherdTour.currentStep.options.attachTo.on.split('-')[0]
|
||||
],
|
||||
);
|
||||
}
|
||||
changeTag(shepherdArrow, 'span');
|
||||
} else {
|
||||
// If there is no Shepherd arrow, there still needs to be markup for a
|
||||
// non-displayed nub to match Joyride's markup.
|
||||
const nub = document.createElement('span');
|
||||
nub.classList.add('joyride-nub');
|
||||
nub.setAttribute('style', 'display: none;');
|
||||
shepherdElement.insertBefore(nub, shepherdElement.firstChild);
|
||||
}
|
||||
|
||||
// When the next and cancel buttons were converted to links, they became
|
||||
// new DOM elements that no longer have their associated event listeners.
|
||||
// The events must be reintroduced here.
|
||||
shepherdElement
|
||||
.querySelector('.joyride-next-tip')
|
||||
.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
shepherdTour.next();
|
||||
});
|
||||
shepherdElement
|
||||
.querySelector('.joyride-close-tip')
|
||||
.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
shepherdTour.cancel();
|
||||
});
|
||||
shepherdElement.querySelector('.joyride-next-tip').focus();
|
||||
};
|
||||
})(Drupal);
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/2815083
|
||||
* @preserve
|
||||
**/
|
||||
|
||||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
||||
|
||||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
|
||||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
||||
|
||||
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
||||
|
||||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
||||
|
||||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
||||
|
||||
(function (Drupal) {
|
||||
Drupal.tour.convertToJoyrideMarkup = function (shepherdTour) {
|
||||
var changeTag = function changeTag(element, tag) {
|
||||
if (element) {
|
||||
var newTagElement = document.createElement(tag);
|
||||
|
||||
_toConsumableArray(element.attributes).forEach(function (attr) {
|
||||
newTagElement.setAttribute(attr.name, attr.value);
|
||||
});
|
||||
|
||||
newTagElement.innerHTML = element.innerHTML;
|
||||
element.parentNode.replaceChild(newTagElement, element);
|
||||
}
|
||||
};
|
||||
|
||||
var shepherdElement = shepherdTour.currentStep.el;
|
||||
var shepherdContent = shepherdElement.querySelector('.shepherd-content');
|
||||
var shepherdCancel = shepherdElement.querySelector('.shepherd-cancel-icon');
|
||||
var shepherdTitle = shepherdElement.querySelector('.shepherd-title');
|
||||
var shepherdText = shepherdElement.querySelector('.shepherd-text');
|
||||
var shepherdNext = shepherdElement.querySelector('footer .button');
|
||||
var tourProgress = shepherdElement.querySelector('.tour-progress');
|
||||
shepherdElement.classList.add('joyride-tip-guide');
|
||||
shepherdContent.classList.add('joyride-content-wrapper');
|
||||
shepherdNext.classList.add('joyride-next-tip');
|
||||
shepherdNext.setAttribute('href', '#');
|
||||
shepherdNext.setAttribute('role', 'button');
|
||||
shepherdNext.removeAttribute('type');
|
||||
shepherdCancel.classList.add('joyride-close-tip');
|
||||
shepherdCancel.removeAttribute('type');
|
||||
shepherdCancel.setAttribute('href', '#');
|
||||
shepherdCancel.setAttribute('role', 'button');
|
||||
shepherdElement.setAttribute('data-index', shepherdTour.currentStep.options.index);
|
||||
shepherdElement.querySelector('footer').remove();
|
||||
|
||||
if (shepherdElement.classList.contains('tip-uses-get-output')) {
|
||||
shepherdText.appendChild(shepherdNext);
|
||||
shepherdText.appendChild(shepherdCancel);
|
||||
shepherdContent.querySelector('.shepherd-header').remove();
|
||||
Array.from(shepherdText.children).forEach(function (node) {
|
||||
if (node.tagName === 'P' && node.textContent === '' && node.classList.length === 0) {
|
||||
node.remove();
|
||||
}
|
||||
});
|
||||
shepherdContent.innerHTML = shepherdText.innerHTML;
|
||||
} else {
|
||||
shepherdContent.insertBefore(shepherdTitle, shepherdContent.firstChild);
|
||||
shepherdContent.insertBefore(tourProgress, shepherdText.nextSibling);
|
||||
shepherdContent.appendChild(shepherdCancel);
|
||||
shepherdContent.querySelector('.shepherd-header').remove();
|
||||
shepherdContent.insertBefore(shepherdNext, tourProgress.nextSibling);
|
||||
shepherdCancel.innerHTML = '<span aria-hidden="true">×</span>';
|
||||
shepherdTitle.classList.add('tour-tip-label');
|
||||
changeTag(shepherdTitle, 'h2');
|
||||
shepherdText.outerHTML = shepherdText.innerHTML;
|
||||
}
|
||||
|
||||
changeTag(shepherdElement.querySelector('.joyride-close-tip'), 'a');
|
||||
changeTag(shepherdElement.querySelector('.joyride-next-tip'), 'a');
|
||||
var shepherdArrow = shepherdElement.querySelector('.shepherd-arrow');
|
||||
|
||||
if (shepherdArrow) {
|
||||
shepherdArrow.classList.add('joyride-nub');
|
||||
|
||||
if (shepherdTour.currentStep.options.attachTo.on) {
|
||||
var stepToTipPosition = {
|
||||
bottom: 'top',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
right: 'left'
|
||||
};
|
||||
shepherdArrow.classList.add(stepToTipPosition[shepherdTour.currentStep.options.attachTo.on.split('-')[0]]);
|
||||
}
|
||||
|
||||
changeTag(shepherdArrow, 'span');
|
||||
} else {
|
||||
var nub = document.createElement('span');
|
||||
nub.classList.add('joyride-nub');
|
||||
nub.setAttribute('style', 'display: none;');
|
||||
shepherdElement.insertBefore(nub, shepherdElement.firstChild);
|
||||
}
|
||||
|
||||
shepherdElement.querySelector('.joyride-next-tip').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
shepherdTour.next();
|
||||
});
|
||||
shepherdElement.querySelector('.joyride-close-tip').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
shepherdTour.cancel();
|
||||
});
|
||||
shepherdElement.querySelector('.joyride-next-tip').focus();
|
||||
};
|
||||
})(Drupal);
|
||||
|
|
@ -320,3 +320,7 @@ libraries-override:
|
|||
theme:
|
||||
css/views_ui.admin.theme.css: css/views_ui/views_ui.admin.theme.css
|
||||
css/views_ui.contextual.css: css/views_ui/views_ui.contextual.css
|
||||
|
||||
libraries-extend:
|
||||
tour/tour:
|
||||
- stable9/tour
|
||||
|
|
|
|||
|
|
@ -9,3 +9,8 @@ normalize:
|
|||
base:
|
||||
css/core/assets/vendor/normalize-css/normalize.css: { weight: -20 }
|
||||
css/core/normalize-fixes.css: { weight: -19 }
|
||||
|
||||
tour:
|
||||
version: VERSION
|
||||
js:
|
||||
js/tour.js: {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue