Fixed minor issue with sidebar not always loading

amd/build/util/psidebar-vue.min.js

@@ -1,3 +1,3 @@
-define("local_treestudyplan/util/psidebar-vue",["exports","../portal-vue/portal-vue.esm","./debugger"],(function(_exports,_portalVue,_debugger){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_portalVue=_interopRequireDefault(_portalVue);let wrapper,contentwrapper,resizeObserver,debug=new((_debugger=_interopRequireDefault(_debugger)).default)("p-sidebar");function rePosition(right){let el=document.querySelector("#p-sidebar-mount");el||(el=document.createElement("div"),el.setAttribute("id","p-sidebar-mount"),resizeObserver=new ResizeObserver((()=>{let wx=0-el.getBoundingClientRect().width;wx+=0!=wx?"px":"",el.style.setProperty("--p-sidebar-hideoffset",wx)})),resizeObserver.observe(el)),right?wrapper.insertBefore(el,contentwrapper.nextSibling):wrapper.insertBefore(el,contentwrapper)}function setOffset(reference){const ref=reference?document.querySelector(reference):null;if(ref){let offsetTop=ref?ref.offsetTop:0;offsetTop+=0!=offsetTop?"px":"";const el=document.querySelector("#p-sidebar-mount");el&&(el.style.height=`calc( 100vh - ${offsetTop})`,el.style.marginTop=offsetTop)}}var _default={install(Vue){Vue.use(_portalVue.default),window.addEventListener("load",(()=>{!function(target,offsetref){let initializeWrapperContent=!1;if(wrapper=document.querySelector("#p-sidebar-wrapper"),wrapper||(initializeWrapperContent=!0,wrapper=document.createElement("div"),wrapper.setAttribute("id","p-sidebar-wrapper")),contentwrapper=document.querySelector("#p-sidebar-contentwrapper"),contentwrapper||(initializeWrapperContent=!0,contentwrapper=document.createElement("div"),contentwrapper.setAttribute("id","p-sidebar-contentwrapper"),wrapper.appendChild(contentwrapper)),initializeWrapperContent){let targetEl=document.querySelector(target);for(console.info(`Targeting '${target}' to `,targetEl),targetEl&&"HTML"!=targetEl.nodeType||(targetEl=document.querySelector("body"));targetEl.childNodes.length>0;)contentwrapper.appendChild(targetEl.childNodes[0]);targetEl.appendChild(wrapper)}rePosition(!1),setOffset(offsetref)}()})),Vue.component("p-easeinout",{template:'\n            <transition name="p-easeinout"\n                ><slot></slot>\n            </transition>'}),Vue.component("p-sidebar",{props:{value:{type:Boolean,default:!0},right:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1},target:{type:String,default:"body"},offsetRef:{type:String,default:""}},data:()=>({wrapper:null,contentwrapper:null,resizeobserver:null}),computed:{},methods:{},watch:{right(newVal){rePosition(newVal)},offsetRef(reference){setOffset(reference,this.$refs.portal)}},mounted(){debug.info("OffsetRef",this.offsetRef),setOffset(this.offsetRef),debug.info("Right",this.right),rePosition(this.right)},unmounted(){},template:"\n        <div\n        ><mounting-portal ref='portal'\n            mount-to=\"#p-sidebar-mount\"\n            class=\"(right?'p-sidebar-right ':'')\"\n            append\n            transition=\"p-easeinout\"\n            ><div ref='container' v-if=\"value\"\n                    :class=\"'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'')\"\n                ><slot></slot></div\n            ></mounting-portal>\n        </div>\n        "})}};return _exports.default=_default,_exports.default}));
+define("local_treestudyplan/util/psidebar-vue",["exports","../portal-vue/portal-vue.esm","./debugger"],(function(_exports,_portalVue,_debugger){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_portalVue=_interopRequireDefault(_portalVue);let wrapper,contentwrapper,resizeObserver,debug=new((_debugger=_interopRequireDefault(_debugger)).default)("p-sidebar");function createPortalTarget(target,offsetref){let initializeWrapperContent=!1;if(debug.info("Creating portal target"),wrapper=document.querySelector("#p-sidebar-wrapper"),wrapper||(initializeWrapperContent=!0,wrapper=document.createElement("div"),wrapper.setAttribute("id","p-sidebar-wrapper")),contentwrapper=document.querySelector("#p-sidebar-contentwrapper"),contentwrapper||(initializeWrapperContent=!0,contentwrapper=document.createElement("div"),contentwrapper.setAttribute("id","p-sidebar-contentwrapper"),wrapper.appendChild(contentwrapper)),initializeWrapperContent){let targetEl=document.querySelector(target);for(targetEl&&"HTML"!=targetEl.nodeType||(targetEl=document.querySelector("body")),console.info(`Targeting '${target}' to `,targetEl);targetEl.childNodes.length>0;)contentwrapper.appendChild(targetEl.childNodes[0]);targetEl.appendChild(wrapper)}rePosition(!1),setOffset(offsetref)}function rePosition(right){let el=document.querySelector("#p-sidebar-mount");el||(el=document.createElement("div"),el.setAttribute("id","p-sidebar-mount"),resizeObserver=new ResizeObserver((()=>{let wx=0-el.getBoundingClientRect().width;wx+=0!=wx?"px":"",el.style.setProperty("--p-sidebar-hideoffset",wx)})),resizeObserver.observe(el)),right?wrapper.insertBefore(el,contentwrapper.nextSibling):wrapper.insertBefore(el,contentwrapper)}function setOffset(reference){const ref=reference?document.querySelector(reference):null;if(ref){let offsetTop=ref?ref.offsetTop:0;offsetTop+=0!=offsetTop?"px":"";const el=document.querySelector("#p-sidebar-mount");el&&(el.style.height=`calc( 100vh - ${offsetTop})`,el.style.marginTop=offsetTop)}}var _default={install(Vue){Vue.use(_portalVue.default),"ready"===document.readyState||"complete"===document.readyState?(debug.info("Page already loaded"),createPortalTarget()):window.addEventListener("load",(()=>{debug.info("Page not yet loaded"),createPortalTarget()})),Vue.component("p-easeinout",{template:'\n            <transition name="p-easeinout"\n                ><slot></slot>\n            </transition>'}),Vue.component("p-sidebar",{props:{value:{type:Boolean,default:!0},right:{type:Boolean,default:!1},shadow:{type:Boolean,default:!1},target:{type:String,default:"body"},offsetRef:{type:String,default:""}},data:()=>({wrapper:null,contentwrapper:null,resizeobserver:null}),computed:{},methods:{},watch:{right(newVal){rePosition(newVal)},offsetRef(reference){setOffset(reference,this.$refs.portal)}},mounted(){debug.info("OffsetRef",this.offsetRef),setOffset(this.offsetRef),debug.info("Right",this.right),rePosition(this.right)},template:"\n        <div\n        ><mounting-portal ref='portal'\n            mount-to=\"#p-sidebar-mount\"\n            class=\"(right?'p-sidebar-right ':'')\"\n            append\n            transition=\"p-easeinout\"\n            ><div ref='container' v-if=\"value\"\n                    :class=\"'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'')\"\n                ><slot></slot></div\n            ></mounting-portal>\n        </div>\n        "})}};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=psidebar-vue.min.js.map

amd/src/util/psidebar-vue.js

@@ -18,8 +18,9 @@ let resizeObserver;
  * @param {String} offsetref Query string to select element that should appear above the sidebar. 
  * Defaults to none
  */
-function createPortalTarget(target,offsetref) {
+function createPortalTarget(target, offsetref) {
     let initializeWrapperContent = false;
+    debug.info("Creating portal target");
     // First check if the sidebar wrapper already exists. 
     // Creating the wrappers over and over again is a recipe for disaster.
     wrapper = document.querySelector("#p-sidebar-wrapper");
@@ -42,10 +43,10 @@ function createPortalTarget(target,offsetref) {
     if (initializeWrapperContent) {
         // Find containing target (otherwise use body)
         let targetEl = document.querySelector(target);
-            console.info(`Targeting '${target}' to `, targetEl);
         if (!targetEl || targetEl.nodeType == "HTML") {
             targetEl = document.querySelector("body");
         }
+        console.info(`Targeting '${target}' to `, targetEl);
         
         // Move all target content parts to content wrapper....
         while (targetEl.childNodes.length > 0) {
@@ -69,7 +70,7 @@ function rePosition(right) {
     // Find or create the portal target.
     let el = document.querySelector(`#p-sidebar-mount`);
     if (!el) {
-        el =  document.createElement("div");
+        el = document.createElement("div");
         el.setAttribute("id", `p-sidebar-mount`);
 
         // Initialize a resizeObser
@@ -111,11 +112,17 @@ export default {
         /*  Create the portal target on initialization.
             Defaults to body. Offset and final position set through sidebar parameter.
         */
-        window.addEventListener("load", () => {
+        if (document.readyState === 'ready' || document.readyState === 'complete') {
+            debug.info("Page already loaded");
             createPortalTarget();
-        });
+        } else {
+            window.addEventListener("load", () => {
+                debug.info("Page not yet loaded");
+                createPortalTarget();
+            });
+        }
 
-        Vue.component('p-easeinout',{
+        Vue.component('p-easeinout', {
             template: `
             <transition name="p-easeinout"
                 ><slot></slot>
@@ -155,24 +162,20 @@ export default {
         computed: {
         },
         methods: {
-
         },
         watch: {
             right(newVal) {
                 rePosition(newVal);
             },
             offsetRef(reference) {
-                setOffset(reference,this.$refs.portal);
+                setOffset(reference, this.$refs.portal);
             }
         },
         mounted() {
-            debug.info("OffsetRef",this.offsetRef);
+            debug.info("OffsetRef", this.offsetRef);
             setOffset(this.offsetRef);
-            debug.info("Right",this.right);
+            debug.info("Right", this.right);
             rePosition(this.right);
-        },
-        unmounted() {
-
         },
         template: `
         <div