diff --git a/.abapgit.xml b/.abapgit.xml index 3f9057ff..8c3e8007 100644 --- a/.abapgit.xml +++ b/.abapgit.xml @@ -14,6 +14,8 @@ /.gitlab-ci.yml /abaplint.json /azure-pipelines.yml + /src/01/z2ui5_cl_fw_font_awsome_icons.clas.abap + /src/01/z2ui5_cl_fw_font_awsome_icons.clas.xml diff --git a/src/01/z2ui5_cl_fw_cc_factory.clas.abap b/src/01/z2ui5_cl_fw_cc_factory.clas.abap index f7f9c82a..c37e21c4 100644 --- a/src/01/z2ui5_cl_fw_cc_factory.clas.abap +++ b/src/01/z2ui5_cl_fw_cc_factory.clas.abap @@ -17,17 +17,22 @@ CLASS z2ui5_cl_fw_cc_factory DEFINITION RETURNING VALUE(result) TYPE REF TO z2ui5_cl_fw_cc_demo_output. - METHODS load_font_awsome + METHODS load_font_awesome RETURNING - VALUE(result) TYPE REF TO z2ui5_cl_fw_font_awsome_icons. + VALUE(result) TYPE REF TO z2ui5_cl_fw_font_awesome_icons. METHODS constructor IMPORTING i_view TYPE REF TO z2ui5_cl_xml_view. + METHODS bwip_js RETURNING VALUE(result) TYPE REF TO z2ui5_cl_fw_cc_bwipjs. + METHODS driver_js + RETURNING + VALUE(result) TYPE REF TO z2ui5_cl_fw_driver_js. + PROTECTED SECTION. DATA mo_view TYPE REF TO z2ui5_cl_xml_view. @@ -53,6 +58,13 @@ CLASS Z2UI5_CL_FW_CC_FACTORY IMPLEMENTATION. ENDMETHOD. + METHOD driver_js. + + result = NEW #( mo_view ). + + ENDMETHOD. + + METHOD gui_demo_output. result = NEW #( mo_view ). @@ -60,7 +72,7 @@ CLASS Z2UI5_CL_FW_CC_FACTORY IMPLEMENTATION. ENDMETHOD. - METHOD load_font_awsome. + METHOD load_font_awesome. result = NEW #( mo_view ). diff --git a/src/01/z2ui5_cl_fw_font_awsome_icons.clas.abap b/src/01/z2ui5_cl_fw_font_awesome_icons.clas.abap similarity index 96% rename from src/01/z2ui5_cl_fw_font_awsome_icons.clas.abap rename to src/01/z2ui5_cl_fw_font_awesome_icons.clas.abap index 0e5b0966..d6adb7ab 100644 --- a/src/01/z2ui5_cl_fw_font_awsome_icons.clas.abap +++ b/src/01/z2ui5_cl_fw_font_awesome_icons.clas.abap @@ -1,4 +1,4 @@ -class Z2UI5_CL_FW_FONT_AWSOME_ICONS definition +class Z2UI5_CL_FW_FONT_AWESOME_ICONS definition public final create public . @@ -27,24 +27,24 @@ ENDCLASS. -CLASS Z2UI5_CL_FW_FONT_AWSOME_ICONS IMPLEMENTATION. +CLASS Z2UI5_CL_FW_FONT_AWESOME_ICONS IMPLEMENTATION. - METHOD constructor. + METHOD CONSTRUCTOR. me->mo_view = view. ENDMETHOD. - METHOD load_animation_js. + METHOD LOAD_ANIMATION_JS. result = mo_view->_cc_plain_xml( `` ). ENDMETHOD. - METHOD load_icons. + METHOD LOAD_ICONS. DATA(js) = `debugger;` && |\n| && * `const metadataURI = "` && metadata_uri && `";` && |\n| && diff --git a/src/01/z2ui5_cl_fw_font_awsome_icons.clas.xml b/src/01/z2ui5_cl_fw_font_awesome_icons.clas.xml similarity index 89% rename from src/01/z2ui5_cl_fw_font_awsome_icons.clas.xml rename to src/01/z2ui5_cl_fw_font_awesome_icons.clas.xml index f25e4ae6..735ecc44 100644 --- a/src/01/z2ui5_cl_fw_font_awsome_icons.clas.xml +++ b/src/01/z2ui5_cl_fw_font_awesome_icons.clas.xml @@ -3,7 +3,7 @@ - Z2UI5_CL_FW_FONT_AWSOME_ICONS + Z2UI5_CL_FW_FONT_AWESOME_ICONS E font awsome icons load 1 diff --git a/src/z2ui5_cl_fw_driver_js.clas.abap b/src/z2ui5_cl_fw_driver_js.clas.abap new file mode 100644 index 00000000..fd64d989 --- /dev/null +++ b/src/z2ui5_cl_fw_driver_js.clas.abap @@ -0,0 +1,311 @@ +CLASS z2ui5_cl_fw_driver_js DEFINITION + PUBLIC + FINAL + CREATE PUBLIC . + + PUBLIC SECTION. + + TYPES: + BEGIN OF ty_config_steps_popover, + title TYPE string, + description TYPE string, + side TYPE string, + align TYPE string, + showbuttons TYPE string, + disablebuttons TYPE string, + nextbtntext TYPE string, + prevbtntext TYPE string, + donebtntext TYPE string, + showprogress TYPE abap_bool, + progresstext TYPE string, + popoverclass TYPE string, + END OF ty_config_steps_popover . + TYPES: + BEGIN OF ty_config_steps, + element TYPE string, + popover TYPE ty_config_steps_popover, + END OF ty_config_steps . + TYPES: + BEGIN OF ty_config, + steps TYPE ty_config_steps, + animate TYPE abap_bool, + overlaycolor TYPE string, + smoothscroll TYPE abap_bool, + allowclose TYPE abap_bool, + overlayopacity TYPE i, + stagepadding TYPE i, + stageradius TYPE i, + allowkeyboardcontrol TYPE abap_bool, + disableactiveinteraction TYPE abap_bool, + popoverclass TYPE string, + popoveroffset TYPE i, + showbuttons TYPE string, + disablebuttons TYPE string, + showprogress TYPE abap_bool, + progresstext TYPE string, + nextbtntext TYPE string, + prevbtntext TYPE string, + donebtntext TYPE string, + END OF ty_config . + + + DATA mo_view TYPE REF TO z2ui5_cl_xml_view . + + METHODS constructor + IMPORTING + !view TYPE REF TO z2ui5_cl_xml_view . + + METHODS load_lib + IMPORTING + !js_url TYPE clike OPTIONAL + !css_url TYPE clike OPTIONAL + !local_css TYPE abap_bool OPTIONAL + !local_js TYPE abap_bool OPTIONAL + RETURNING + VALUE(result) TYPE REF TO z2ui5_cl_xml_view . + + METHODS set_drive_config + IMPORTING + !config TYPE ty_config + RETURNING + VALUE(result) TYPE REF TO z2ui5_cl_xml_view ##NEEDED. + + CLASS-METHODS get_css_local + RETURNING + VALUE(result) TYPE string . + + CLASS-METHODS get_js_local + RETURNING + VALUE(result) TYPE string . + + PROTECTED SECTION. + PRIVATE SECTION. + +ENDCLASS. + + + +CLASS Z2UI5_CL_FW_DRIVER_JS IMPLEMENTATION. + + + METHOD constructor. + + me->mo_view = view. + + ENDMETHOD. + + + METHOD get_css_local. + result = `` && |\n| && +`.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}` && +`@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}` && +`.driver-fade .driver-popover{animation:animate-fade-in .2s}` && +`.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}` && +`.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}` && +`.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}` && +`.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}` && +`.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}` && +`.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}` && +`.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;` && +` cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}` && +`.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}` && +`.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,` && +`.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}` && +`.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}` && +`.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}` && +`.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}` && +`.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}` && +`.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}` && +`.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}` && +`.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}` && +`.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}` && +`.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}` && +`.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}` && +`.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}`. + ENDMETHOD. + + + METHOD get_js_local. + result = `debugger;` && |\n| && +`this.driver=this.driver||{};this.driver.js=function(D){"use strict";let F={};function z(e={}){F={animate:!0,allowClose:!0,overlayOpacity:.7,smoothScroll:!1,disableActiveInteraction:!1,showProgress:!1,stagePadding:10,stageRadius:5,` && +`popoverOffset:10,showButtons:["next","previous","close"],disableButtons:[],overlayColor:"#000",...e}}function a(e){return e?F[e]:F}function W(e,o,t,i){return(e/=i/2)<1?t/2*e*e+o:-t/2*(--e*(e-2)-1)+o}` && +`function q(` && +`e){const o='a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not(` && +`[disabled])';return e.flatMap(t=>{const i=t.matches(o),p=Array.from(t.querySelectorAll(o));return[...i?[t]:[],...p]}).filter(t=>getComputedStyle(t).pointerEvents!=="none"&&ae(t))}function V(e){if(!e||se(e))return;` && +`const o=a(` && +`"smoothScroll");e.scrollIntoView({behavior:!o||re(e)?"auto":"smooth",inline:"center",block:"center"})}function re(e){if(!e||!e.parentElement)return;const o=e.parentElement;return ` && +`o.scrollHeight>o.clientHeight}function se(e){const o=e.getBoundingClientRect();return o.top>=0&&o.left>=0&&o.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&o.right<=(` && +`window.innerWidth||document.documentElement.clientWidth)}function ae(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}let N={};function b(e,o){N[e]=o}function l(e){return e?N[e]:N}function K(){N={}}let E={};function O(e,o)` && +`{E[e]=o}function _(e){var o;(o=E[e])==null||o.call(E)}function ce(){E={}}function le(e,o,t,i){let p=l("__activeStagePosition");const n=p||t.getBoundingClientRect(),f=i.getBoundingClientRect(),w=W(e,n.x,f.x-n.x,o),r=W(e,n.y,f.y-n.y,o),v=W(e,` && +`n.width,f.width-n.width,o),s=W(e,n.height,f.height-n.height,o);p={x:w,y:r,width:v,height:s},Y(p),b("__activeStagePosition",p)}function X(e){if(!e)return;const o=e.getBoundingClientRect(),t={x:o.x,y:o.y,width:o.width,height:o.height};b(` && +`"__activeStagePosition",t),Y(t)}function de(){const e=l("__activeStagePosition"),o=l("__overlaySvg");if(!e)return;if(!o){console.warn("No stage svg found.");return}const t=window.innerWidth,` && +'i=window.innerHeight;o.setAttribute("viewBox",`0 0 ${t} ${i}`)}function pe(e){const o=ue(e);document.body.appendChild(o),G(o,t=>{t.target.tagName==="path"&&_("overlayClick")}),b("__overlaySvg",o)' && +`}function Y(e){const o=l("__overlaySvg");if(!o){pe(e);return}const t=o.firstElementChild;if((t==null?void 0:t.tagName)!=="path")throw new Error("no path element found in stage svg");t.setAttribute("d",j(e))` && +`}function ue(e){const o=window.innerWidth,t=window.innerHeight,i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.classList.add("driver-overlay","driver-overlay-animated"),i.setAttribute(` && +'"viewBox",`0 0 ${o} ${t}`),i.setAttribute("xmlSpace","preserve"),i.setAttribute("xmlnsXlink","http://www.w3.org/1999/xlink"),i.setAttribute("version","1.1"),i.setAttribute(' && +`"preserveAspectRatio","xMinYMin slice"),i.style.fillRule="evenodd",i.style.clipRule="evenodd",i.style.strokeLinejoin="round",i.style.strokeMiterlimit="2",i.style.zIndex="10000",` && +`i.style.position="fixed",i.style.top="0",i.style.left="0",i.style.width="100%",i.style.height="100%";const p=document.createElementNS("http://www.w3.org/2000/svg","path");return ` && +'p.setAttribute("d",j(e)),p.style.fill=a("overlayColor")||"rgb(0,0,0)",p.style.opacity=`${a("overlayOpacity")}`,p.style.pointerEvents="auto",p.style.cursor="auto",i.appendChild(p),i}' && +`function j(e)` && +'{const o=window.innerWidth,t=window.innerHeight,i=a("stagePadding")||0,p=a("stageRadius")||0,n=e.width+i*2,f=e.height+i*2,w=Math.min(p,n/2,f/2),r=Math.floor(Math.max(w,0)),v=e.x-i+r,s=e.y-i,c=n-r*2,d=f-r*2;return`M${o},0L0,0L0,' && +'${t}L${o},${t}L${o},0ZM${v},${s} h${c} a${r},${r} 0 0 1 ${r},${r} v${d} a${r},${r} 0 0 1 -${r},${r} h-${c} a${r},${r} 0 0 1 -${r},-${r} v-${d} a${r},${r} 0 0 1 ${r},-${r} z`}function ve(){const e=l("__overlaySvg");e&&e.remove()' && +`}function fe(){const e=document.getElementById("driver-dummy-element");if(e)return e;let o=document.createElement("div");return o.id="driver-dummy-element",o.style.width="0",o.style.height="0",` && +`o.style.pointerEvents="none",o.style.opacity="0",o.style.position="fixed",o.style.top="50%",o.style.left="50%",document.body.appendChild(o),o}function Q(e){const{element:o}=e;let t=typeof ` && +`o=="string"?document.querySelector(o):o;t||(t=fe()),ge(t,e)}function he(){const e=l("__activeElement"),o=l("__activeStep");e&&(X(e),de(),oe(e,o))}function ge(e,o){const i=Date.now(),p=l("__activeStep"),` && +`n=l(` && +`"__activeElement")||e,f=!n||n===e,w=e.id==="driver-dummy-element",r=n.id==="driver-dummy-element",v=a("animate"),s=o.onHighlightStarted||a("onHighlightStarted"),c=(o==null?void 0:o.onHighlighted)||a(` && +`"onHighlighted"),d=(p==null?void 0:p.onDeselected)||a("onDeselected"),m=a(),g=l();!f&&d&&d(r?void 0:n,p,{config:m,state:g}),s&&s(w?void 0:e,o,{config:m,state:g});const u=!f&&v;let h=!1;xe(),b(` && +`"previousStep",p),b("previousElement",n),b("activeStep",o),b("activeElement",e);const P=()=>{if(l("__transitionCallback")!==P)return;const x=Date.now()-i,` && +`y=400-x<=400/2;o.popover&&y&&!h&&u&&(J(e,o),h=!0),a("animate")&&x<400?le(x,400,n,e):(X(e),c&&c(w?void 0:e,o,{config:a(),state:l()}),b("__transitionCallback",void 0),b(` && +`"__previousStep",p),b("__previousElement",n),b("__activeStep",o),b("__activeElement",e)),window.requestAnimationFrame(P)};b("__transitionCallback",P),window.requestAnimationFrame(P),V(e),` && +`!u&&o.popover&&J(e,o),n.classList.remove("driver-active-element","driver-no-interaction"),n.removeAttribute("aria-haspopup"),n.removeAttribute("aria-expanded"),n.removeAttribute(` && +`"aria-controls"),a("disableActiveInteraction")&&e.classList.add("driver-no-interaction"),e.classList.add("driver-active-element"),e.setAttribute("aria-haspopup","dialog"),` && +`e.setAttribute(` && +`"aria-expanded","true"),e.setAttribute("aria-controls","driver-popover-content")}function we(){var e;(e=document.getElementById("driver-dummy-element"))==null||e.remove(),document.querySelectorAll(` && +`".driver-active-element").forEach(o=>{o.classList.remove("driver-active-element","driver-no-interaction"),o.removeAttribute("aria-haspopup"),o.removeAttribute("aria-expanded"),o.removeAttribute(` && +`"aria-controls")})}function A(){const e=l("__resizeTimeout");e&&window.cancelAnimationFrame(e),b("__resizeTimeout",window.requestAnimationFrame(he))}function me(e){var r;if(!l("isInitialized")||!(` && +`e.key==="Tab"||e.keyCode===9))return;const i=l("__activeElement"),p=(r=l("popover"))==null?void 0:r.wrapper,n=q([...p?[p]:[],...i?[i]:[]]),f=n[0],w=n[n.length-1];if(e.preventDefault(),e.shiftKey){const v=n[n.indexOf(` && +`document.activeElement)-1]||w;v==null||v.focus()}else{const v=n[n.indexOf(document.activeElement)+1]||f;v==null||v.focus()}}function Z(e){var t;((t=a("allowKeyboardControl"))==null||t)&&(e.key==="Escape"?_(` && +`"escapePress"):e.key==="ArrowRight"?_("arrowRightPress"):e.key==="ArrowLeft"&&_("arrowLeftPress"))}function G(e,o,t){const i=(n,f)=>{const w=n.target;e.contains(w)&&((!t||t(w))` && +`&&(n.preventDefault(),n.stopPropagation(),n.stopImmediatePropagation()),f==null||f(n))};document.addEventListener("pointerdown",i,!0),document.addEventListener("mousedown",i,!0),document.addEventListener("` && +`pointerup",` && +`i,!0),document.addEventListener("mouseup",i,!0),document.addEventListener("click",n=>{i(n,o)},!0)}function ye(){window.addEventListener("keyup",Z,!1),window.addEventListener("keydown",me,!1),` && +`window.addEventListener("resize",A),window.addEventListener("scroll",A)}function be(){window.removeEventListener("keyup",Z),window.removeEventListener("resize",A),window.removeEventListener("scroll",` && +`A)` && +`}function xe(){const e=l("popover");e&&(e.wrapper.style.display="none")}function J(e,o){var C,y;let t=l("popover");t&&document.body.removeChild(t.wrapper),t=Pe(),document.body.appendChild(t.wrapper)` && +`;const{title:i,description:p,showButtons:n,disableButtons:f,showProgress:w,nextBtnText:r=a("nextBtnText")||"Next &rarr;",prevBtnText:v=a("prevBtnText")||"&larr; Previous",progressText:s=a(` && +`"progressText")||"{current} of {total}"}=o.popover||{};t.nextButton.innerHTML=r,t.previousButton.innerHTML=v,t.progress.innerHTML=s,i?(t.title.innerHTML=i,t.title.style.display="block")` && +`:t.title.style.display="none",p?(t.description.innerHTML=p,t.description.style.display="block"):t.description.style.display="none";const c=n||a("showButtons"),` && +`d=w||a("showProgress")||!1,m=(c==null?void ` && +`0:c.includes("next"))||(c==null?void 0:c.includes("previous"))||d;t.closeButton.style.display=c.includes("close")?"block":"none",m?(t.footer.style.display="flex",` && +`t.progress.style.display=d?"block":"none",t.nextButton.style.display=c.includes("next")?"block":"none"` && +`,t.previousButton.style.display=c.includes("previous")?"block":"none")` && +`:t.footer.style.display="none";const g=f||a("disableButtons")||[];g!=null&&g.includes("next")&&(t.nextButton.disabled=!0,t.nextButton.classList.add("driver-popover-btn-disabled")),` && +`g!=null&&g.includes("previous")&&(t.previousButton.disabled=!0,t.previousButton.classList.add("driver-popover-btn-disabled")),g!=null&&g.includes("close")&&(t.closeButton.disabled=!0,` && +`t.closeButton.classList.add("driver-popover-btn-disabled"));const u=t.wrapper;u.style.display="block",u.style.left="",u.style.top="",u.style.bottom="",u.style.right="",` && +`u.id="driver-popover-content",u.setAttribute("role","dialog"),u.setAttribute("aria-labelledby","driver-popover-title"),u.setAttribute("aria-describedby"` && +`,"driver-popover-description")` && +';const h=t.arrow;h.className="driver-popover-arrow";const P=((C=o.popover)==null?void 0:C.popoverClass)||a("popoverClass")||"";u.className=`driver-popover ${P}`.trim(),G(t.wrapper,k=>{var M,R,I;const T=k.target,H=((' && +`M=o.popover)==null?void 0:M.onNextClick)||a("onNextClick"),$=((R=o.popover)==null?void 0:R.onPrevClick)||a("onPrevClick"),B=((I=o.popover)==null?void 0:I.onCloseClick)||a("onCloseClick");if(T.classList.contains(` && +`"driver-popover-next-btn"))return H?H(e,o,{config:a(),state:l()}):_("nextClick");if(T.classList.contains("driver-popover-prev-btn"))return $?$(e,o,{config:a(),state:l()}):_("prevClick");if(T.classList.contains(` && +`"driver-popover-close-btn"))return B?B(e,o,{config:a(),state:l()}):_("closeClick")},k=>!(t!=null&&t.description.contains(k))&&!(t!=null&&t.title.contains(k))&&typeof ` && +`k.className=="string"&&k.className.includes("driver-popover")),b("popover",t);const S=((y=o.popover)==null?void 0:y.onPopoverRender)||a("onPopoverRender");S&&` && +`S(t,{config:a(),state:l()}),oe(e,o),V(u)` && +`;const L=e.classList.contains("driver-dummy-element"),x=q([u,...L?[]:[e]]);x.length>0&&x[0].focus()}function U(){const e=l("popover");if(!(e!=null&&e.wrapper))return;const o=e.wrapper.getBoundingClientRect(),` && +`t=a(` && +`"stagePadding")||0,i=a("popoverOffset")||0;return{width:o.width+t+i,height:o.height+t+i,realWidth:o.width,realHeight:o.height}}function ee(e,o){const{elementDimensions:t,popoverDimensions:i,popoverPadding:p,` && +`popoverArrowDimensions:n}=o;return e==="start"?Math.max(Math.min(t.top-p,window.innerHeight-i.realHeight-n.width),n.width):e==="end"?Math.max(Math.min(t.top-(i==null?void 0:i.realHeight)+t.height+p,window.innerHeight-(i==null?void` +&& +`0:i.realHeight)-n.width),n.width):e==="center"?Math.max(Math.min(t.top+t.height/2-(i==null?void 0:i.realHeight)/2,window.innerHeight-(i==null?void 0:i.realHeight)-n.width),n.width):0}function te(e,o){const{elementDimensions:t,` && +`popoverDimensions:i,popoverPadding:p,popoverArrowDimensions:n}=o;return e==="start"?Math.max(Math.min(t.left-p,window.innerWidth-i.realWidth-n.width),n.width):e==="end"` && +`?Math.max(Math.min(t.left-(i==null?void 0:i.realWidth)+t.width+p,` && +`window.innerWidth-(i==null?void 0:i.realWidth)-n.width),n.width):e==="center"?Math.max(Math.min(t.left+t.width/2-(i==null?void 0:i.realWidth)/2,window.innerWidth-(i==null?void 0:i.realWidth)-n.width),n.width):0}function oe(e,o){const t=l(` && +`"popover");if(!t)return;const{align:i="start",side:p="left"}=(o==null?void 0:o.popover)||{},n=i,f=e.id==="driver-dummy-element"?"over":p,w=a("stagePadding")||0,r=U(),` && +`v=t.arrow.getBoundingClientRect(),s=e.getBoundingClientRect(),c=s.top-r.height;let d=c>=0;const m=window.innerHeight-(s.bottom+r.height);let g=m>=0;const u=s.left-r.width;let h=u>=0;const P=window.innerWidth-(s.right+r.width);let ` && +`S=P>=0;const L=!d&&!g&&!h&&!S;let x=f;if(f==="top"&&d?S=h=g=!1:f==="bottom"&&g?S=h=d=!1:f==="left"&&h?S=d=g=!1:f==="right"&&S&&(h=d=g=!1),` && +'f==="over"){const C=window.innerWidth/2-r.realWidth/2,y=window.innerHeight/2-r.realHeight/2;t.wrapper.style.left=`${C}px`,t.wrapper.style.right="auto",t.wrapper.style.top=`${y}px`,t.wrapper.style.bottom="auto"}else if(L)' && +'{const C=window.innerWidth/2-(r==null?void 0:r.realWidth)/2,y=10;t.wrapper.style.left=`${C}px`,t.wrapper.style.right="auto",t.wrapper.style.bottom=`${y}px`,t.wrapper.style.top="auto"' && +`}else if(h){const C=Math.min(u,window.innerWidth-(` && +'r==null?void 0:r.realWidth)-v.width),y=ee(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.left=`${C}px`,t.wrapper.style.top=`${y}px`,t.wrapper.style.bottom="auto",' && +`t.wrapper.style.right="auto",x="left"}else if(S){const C=Math.min(P,window.innerWidth-(r==null?void 0:r.realWidth)-v.width),y=ee(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v})` && +';t.wrapper.style.right=`${C}px`,t.wrapper.style.top=`${y}px`,t.wrapper.style.bottom="auto",t.wrapper.style.left="auto",x="right"}else if(d){const C=Math.min(c,window.innerHeight-r.realHeight-v.width);let y=te(n,' && +'{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.top=`${C}px`,t.wrapper.style.left=`${y}px`,t.wrapper.style.bottom="auto",t.wrapper.style.right="auto",x="top"' && +`}else if(g)` && +'{const C=Math.min(m,window.innerHeight-(r==null?void 0:r.realHeight)-v.width);let y=te(n,{elementDimensions:s,popoverDimensions:r,popoverPadding:w,popoverArrowDimensions:v});t.wrapper.style.left=`${y}px`,t.wrapper.style.bottom=`${C}px`,' && +`t.wrapper.style.top="auto",t.wrapper.style.right="auto",x="bottom"}L?t.arrow.classList.add("driver-popover-arrow-none"):Ce(n,x,e)}function Ce(e,o,t){const i=l("popover");if(!i)return;const ` && +`p=t.getBoundingClientRect(),n=U(),f=i.arrow,w=n.width,r=window.innerWidth,v=p.width,s=p.left,c=n.height,d=window.innerHeight,m=p.top,g=p.height;f.className="driver-popover-arrow";let u=o,h=e;o==="top"?(s+v<=0?(u="` && +`right",` && +`h="end"):s+v-w<=0&&(u="top",h="start"),s>=r?(u="left",h="end"):s+w>=r&&(u="top",h="end")):o==="bottom"?(s+v<=0?(u="right",` && +`h="start"):s+v-w<=0&&(u="bottom",h="start"),s>=r?(u="left",h="start"):s+w>=r&&(u="bottom",h="end")):o==="left"?(m+g<=0?(u="bottom",` && +`h="end"):m+g-c<=0&&(u="left",h="start"),m>=d?(u="top",h="end"):m+c>=d&&(u="left",h="end")):o==="right"&&(m+g<=0?(u="bottom",` && +'h="start"):m+g-c<=0&&(u="right",h="start"),m>=d?(u="top",h="start"):m+c>=d&&(u="right",h="end")),u?(f.classList.add(`driver-popover-arrow-side-${u}`),' && +'f.classList.add(`driver-popover-arrow-align-${h}`)):f.classList.add("driver-popover-arrow-none")}function Pe(){const e=document.createElement("div");e.classList.add("driver-popover");const o=document.createElement(' && +`"div");o.classList.add("driver-popover-arrow");const t=document.createElement("header");t.id="driver-popover-title",t.classList.add("driver-popover-title"),t.style.display="none",` && +`t.innerText="Popover Title";const i=document.createElement("div");i.id="driver-popover-description",i.classList.add("driver-popover-description"),i.style.display="none",i.innerText="Popover ` && +`description is here";const p=document.createElement("button");p.type="button",p.classList.add("driver-popover-close-btn"),p.setAttribute("aria-label","Close"),` && +`p.innerHTML="&times;";const n=document.createElement("footer");n.classList.add("driver-popover-footer");const f=document.createElement("span");f.classList.add("driver-popover-progress-text"),` && +`f.innerText="";const w=document.createElement("span");w.classList.add("driver-popover-navigation-btns");const r=document.createElement("button");r.type="button",r.classList.add(` && +`"driver-popover-prev-btn"),r.innerHTML="&larr; Previous";const v=document.createElement("button");return v.type="button",v.classList.add("driver-popover-next-btn"),v.innerHTML="Next ` && +`&rarr;",w.appendChild(r),w.appendChild(v),n.appendChild(f),n.appendChild(w),e.appendChild(p),e.appendChild(o),e.appendChild(t),e.appendChild(i),e.appendChild(n),{wrapper:e,arrow:o,title:t,description:i,footer:n,previousButton:r,nextButton:v,` && +`closeButton:p,footerButtons:w,progress:f}}function Se(){var o;const e=l("popover");e&&((o=e.wrapper.parentElement)==null||o.removeChild(e.wrapper))}const Le="";function ke(e={}){z(e);function o(){a("allowClose")` && +`&&v()}function t(){const s=l("activeIndex"),c=a("steps")||[];if(typeof s=="undefined")return;const d=s+1;c[d]?r(d):v()}function i(){const s=l("activeIndex"),c=a("steps")||[];if(typeof ` && +`s=="undefined")return;const d=s-1;c[d]?r(d):v()}function p(s){(a("steps")||[])[s]?r(s):v()}function n(){var h;if(l("__transitionCallback"))return;const c=l("activeIndex"),d=l("__activeStep"),m=l(` && +`"__activeElement");if(typeof c=="undefined"||typeof d=="undefined"||typeof l("activeIndex")=="undefined")return;const u=((h=d.popover)==null?void 0:h.onPrevClick)||a("onPrevClick");` && +`if(u)return ` && +`u(m,d,{config:a(),state:l()});i()}function f(){var u;if(l("__transitionCallback"))return;const c=l("activeIndex"),d=l("__activeStep"),m=l("__activeElement");if(typeof c=="undefined"||typeof ` && +`d=="undefined")return;const g=((u=d.popover)==null?void 0:u.onNextClick)||a("onNextClick");if(g)return g(m,d,{config:a(),state:l()});t()}function w(){l("isInitialized")||(b("isInitialized",!0),` && +`document.body.classList.add("driver-active",a("animate")?"driver-fade":"driver-simple"),ye(),O("overlayClick",o),O("escapePress",o),O("arrowLeftPress",n),` && +`O("arrowRightPress",` && +`f))}function r(s=0){var H,$,B,M,R,I,ie,ne;const c=a("steps");if(!c){console.error("No steps to drive through"),v();return}if(!c[s]){v();return}b("__activeOnDestroyed",document.activeElement),b("activeIndex",s)` && +`;const d=c[s],m=c[s+1],g=c[s-1],u=((H=d.popover)==null?void 0:H.doneBtnText)||a("doneBtnText")||"Done",h=a("allowClose"),P=typeof(($=d.popover)==null?void 0:$.showProgress)!="undefined"` && +`?(B=d.popover)==null?void ` && +'0:B.showProgress:a("showProgress"),L=(((M=d.popover)==null?void 0:M.progressText)||a("progressText")||"{{current}} of {{total}}").replace("{{current}}",`${s+1}`).replace("' && +'{{total}}",`${c.length}`),x=((' && +`R=d.popover)==null?void 0:R.showButtons)||a("showButtons"),C=["next","previous",...h?["close"]:[]].filter(_e=>!(x!=null&&x.length)||x.includes(_e)),y=((I=d.popover)==null?void 0:I.onNextClick)||a(` && +`"onNextClick"),k=((ie=d.popover)==null?void 0:ie.onPrevClick)||a("onPrevClick"),T=((ne=d.popover)==null?void 0:ne.onCloseClick)||a("onCloseClick");Q({...d,popover:{showButtons:C,nextBtnText:m?void 0:u,` && +`disableButtons:[...g?[]:["previous"]],showProgress:P,progressText:L,onNextClick:y||(()=>{m?r(s+1):v()}),onPrevClick:k||(()=>{r(s-1)}),onCloseClick:T||(()=>{v()}),...(d==null?void 0:d.popover)||{}}})}function v(s=!0){const c=l(` && +`"__activeElement"),d=l("__activeStep"),m=l("__activeOnDestroyed"),g=a("onDestroyStarted");if(s&&g){const P=!c||(c==null?void 0:c.id)==="driver-dummy-element";g(P?void 0:c,d,` && +`{config:a(),state:l()})` && +`;return}const u=(d==null?void 0:d.onDeselected)||a("onDeselected"),h=a("onDestroyed");if(document.body.classList.remove("driver-active","driver-fade","driver-simple"),be(),Se(),we(),ve(),ce(),K(),` && +`c&&d){const P=c.id==="driver-dummy-element";u&&u(P?void 0:c,d,{config:a(),state:l()}),h&&h(P?void 0:c,d,{config:a(),state:l()})}m&&m.focus()}return{isActive:()=>l("isInitialized")||!1,refresh:A,` && +`drive:(s=0)=>{w(),r(s)},setConfig:z,setSteps:s=>{K(),z({...a(),steps:s})},getConfig:a,getState:l,getActiveIndex:()=>l("activeIndex"),isFirstStep:()=>l("activeIndex")===0,isLastStep:()=>{` && +`const s=a("steps")||[],` && +`c=l("activeIndex");return c!==void 0&&c===s.length-1},getActiveStep:()=>l("activeStep"),getActiveElement:()=>l("activeElement"),getPreviousElement:()=>l("previousElement"),` && +`getPreviousStep:()=>l(` && +`"previousStep"),moveNext:t,movePrevious:i,moveTo:p,hasNextStep:()=>{const s=a("steps")||[],c=l("activeIndex");return c!==void 0&&s[c+1]},hasPreviousStep:()=>{const s=a("steps")||[],c=l(` && +`"activeIndex");return c!==void 0&&s[c-1]},highlight:s=>{w(),Q({...s,popover:s.popover?{showButtons:[],showProgress:!1,progressText:"",...s.popover}:void 0})},destroy:()=>{v(!1)}}}return ` && +`D.driver=ke,Object.defineProperty(` && +`D,Symbol.toStringTag,{value:"Module"}),D}({});`. + + ENDMETHOD. + + + METHOD load_lib. + + DATA(js) = ``. + DATA(css) = ``. + + IF css_url IS INITIAL. + IF local_css = abap_true. + css = css && `` && get_css_local( ) && `` && |\n|. + ENDIF. + ELSE. + css = css && `` && css_url && `` && |\n|. + ENDIF. + + IF js_url IS INITIAL. + IF local_js = abap_true. + js = js && `` && get_js_local( ) && `` && |\n|. + ENDIF. + ELSE. + js = js && `` && |\n|. + ENDIF. + + DATA(final) = js && |\n| && css ##NEEDED. + + result = mo_view->_cc_plain_xml( js )->get_parent( )->_cc_plain_xml( css ). + + ENDMETHOD. + + + METHOD set_drive_config. + + + DATA(drive_js) = `debugger; const driver = window.driver.js.driver;`. + + drive_js = drive_js && + `const driverObj = driver({` && |\n| && +* ` showProgress: ` && z2ui5_cl_fw_utility=>boolean_abap_2_json( config-showprogress ) && `,` && |\n| && + ` showProgress: true,` && |\n| && + ` steps: [` && |\n| && + ` { element: '#__xmlview5--choper725', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},` && |\n| && + ` { element: '#__xmlview5--choper725-1', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},` && |\n| && + ` { element: '#__xmlview5--choper725-2', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},` && |\n| && + ` ]` && |\n| && + `});`. + + result = mo_view->_cc_plain_xml( `` && drive_js && `` ). +* result = drive_js. + + ENDMETHOD. +ENDCLASS. diff --git a/src/z2ui5_cl_fw_driver_js.clas.xml b/src/z2ui5_cl_fw_driver_js.clas.xml new file mode 100644 index 00000000..115d551d --- /dev/null +++ b/src/z2ui5_cl_fw_driver_js.clas.xml @@ -0,0 +1,16 @@ + + + + + + Z2UI5_CL_FW_DRIVER_JS + E + driverjs - product tours, highlights, contextual help & more + 1 + X + X + X + + + + diff --git a/src/z2ui5_cl_fw_http_handler.clas.abap b/src/z2ui5_cl_fw_http_handler.clas.abap index 9119c89b..dc5c2baf 100644 --- a/src/z2ui5_cl_fw_http_handler.clas.abap +++ b/src/z2ui5_cl_fw_http_handler.clas.abap @@ -265,6 +265,21 @@ CLASS Z2UI5_CL_FW_HTTP_HANDLER IMPLEMENTATION. ` var navConTo = sap.z2ui5.oView.byId(args[2]);` && |\n| && ` navCon.to(navConTo);` && |\n| && ` break;` && |\n| && + ` case 'NEST_NAV_CONTAINER_TO':` && |\n| && + ` var navCon = sap.z2ui5.oViewNest.byId(args[1]);` && |\n| && + ` var navConTo = sap.z2ui5.oViewNest.byId(args[2]);` && |\n| && + ` navCon.to(navConTo);` && |\n| && + ` break;` && |\n| && + ` case 'NEST2_NAV_CONTAINER_TO':` && |\n| && + ` var navCon = sap.z2ui5.oViewNest2.byId(args[1]);` && |\n| && + ` var navConTo = sap.z2ui5.oViewNest.byId(args[2]);` && |\n| && + ` navCon.to(navConTo);` && |\n| && + ` break;` && |\n| && + ` case 'DRIVE':` && |\n| && + ` if( driverObj !== undefined ) {` && |\n| && + ` driverObj.drive();` && |\n| && + ` };` && |\n| && + ` break;` && |\n| && ` }` && |\n| && ` },` && |\n| && |\n| &&