Fixed minor issue with sidebar not always loading

This commit is contained in:
PMKuipers 2024-08-20 17:58:57 +02:00
parent a00af55f66
commit b0a61d018c
3 changed files with 18 additions and 15 deletions

View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -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