138 lines
No EOL
5 KiB
JavaScript
138 lines
No EOL
5 KiB
JavaScript
/*eslint no-unused-vars: warn */
|
|
/*eslint max-len: ["error", { "code": 160 }] */
|
|
/*eslint-disable no-trailing-spaces */
|
|
/*eslint-disable no-console */
|
|
/*eslint-env es6*/
|
|
|
|
import Debugger from './debugger';
|
|
let debug = new Debugger("p-sidebar");
|
|
|
|
export default {
|
|
install(Vue/*,options*/){
|
|
Vue.component('p-sidebar',{
|
|
props: {
|
|
value: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
right: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
shadow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
target: {
|
|
type: String,
|
|
default: 'body',
|
|
},
|
|
offsetRef: {
|
|
type: String,
|
|
default: '',
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
wrapper: null,
|
|
contentwrapper: null,
|
|
resizeobserver: null,
|
|
};
|
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
|
initWrappers(target) {
|
|
let initializeWrapperContent = false;
|
|
// First check if the sidebar wrapper already exists.
|
|
// Creating the wrappers over and over again is a recipe for disaster.
|
|
this.wrapper = document.querySelector("#p-sidebar-wrapper");
|
|
if (!this.wrapper) {
|
|
initializeWrapperContent = true;
|
|
// Otherwise, create it.
|
|
this.wrapper = document.createElement("div");
|
|
this.wrapper.setAttribute("id","p-sidebar-wrapper");
|
|
}
|
|
// First check if the contentwrapper already exists
|
|
this.contentwrapper = document.querySelector("#p-sidebar-contentwrapper");
|
|
if (!this.contentwrapper) {
|
|
initializeWrapperContent = true;
|
|
// Otherwise, create it.
|
|
this.contentwrapper = document.createElement("div");
|
|
this.contentwrapper.setAttribute("id","p-sidebar-contentwrapper");
|
|
this.wrapper.appendChild(this.contentwrapper);
|
|
}
|
|
|
|
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");
|
|
}
|
|
debug.warn(`Initializing wrappers with content of target `,targetEl);
|
|
// Move all target content parts to content wrapper....
|
|
while (targetEl.childNodes.length >0) {
|
|
this.contentwrapper.appendChild(targetEl.childNodes[0]);
|
|
}
|
|
// Add sidebar wrapper to target Element
|
|
targetEl.appendChild(this.wrapper);
|
|
}
|
|
|
|
},
|
|
rePosition(right) {
|
|
// Place the container elsewhere in the DOM.
|
|
const el = this.$refs.container;
|
|
if(right) {
|
|
this.wrapper.insertBefore(el,this.contentwrapper.nextSibling);
|
|
} else {
|
|
this.wrapper.insertBefore(el,this.contentwrapper);
|
|
}
|
|
},
|
|
setOffset(reference) {
|
|
const ref = reference?document.querySelector(reference):null;
|
|
console.info(`Setting offset from '${reference}'`,ref);
|
|
let offsetTop = (ref?ref.offsetTop:0);
|
|
offsetTop+=(offsetTop!=0)?"px":"";
|
|
const el = this.$refs.container;
|
|
el.style.height=`calc( 100vh - ${offsetTop})`;
|
|
el.style.marginTop=offsetTop;
|
|
}
|
|
|
|
},
|
|
watch: {
|
|
right(newVal) {
|
|
this.rePosition(newVal);
|
|
},
|
|
offsetRef(reference) {
|
|
this.setOffset(reference);
|
|
}
|
|
},
|
|
mounted() {
|
|
const self = this;
|
|
const el = self.$refs.container;
|
|
this.initWrappers(this.target);
|
|
this.setOffset(this.offsetRef);
|
|
this.rePosition(this.right,this.besides);
|
|
this.resizeObserver = new ResizeObserver(() => {
|
|
let wx = 0 - el.getBoundingClientRect().width;
|
|
wx += (wx!=0)?"px":"";
|
|
el.style.setProperty("--p-sidebar-hideoffset",wx);
|
|
});
|
|
this.resizeObserver.observe(el);
|
|
},
|
|
unmounted() {
|
|
if(this.resizeObserver) {
|
|
this.resizeObserver.disconnect();
|
|
}
|
|
},
|
|
template: `
|
|
<div>
|
|
<div ref='container'
|
|
:class="'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'') + (value?'shown ':'hidden ')"
|
|
><slot></slot></div>
|
|
</div>
|
|
`,
|
|
});
|
|
},
|
|
}; |