Update to transition system

This commit is contained in:
PMKuipers 2024-08-15 10:57:51 +02:00
parent 743cb82cc9
commit 1e4f399baf
9 changed files with 146 additions and 14 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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.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-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><mounting-portal ref='portal'\n mount-to=\"#p-sidebar-mount\"\n append\n ><div ref='container'\n :class=\"'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'') + ((!value)?'hidden ':'')\"\n ><slot></slot></div></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 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}));
//# sourceMappingURL=psidebar-vue.min.js.map //# sourceMappingURL=psidebar-vue.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -1488,10 +1488,26 @@ export default {
self.availableroles = response; self.availableroles = response;
return; return;
}).catch(notification.exception); }).catch(notification.exception);
} else {
self.edit.toolbox_shown = true; // Defaults to on in coching view.
} }
this.$root.$emit('redrawLines'); this.$root.$emit('redrawLines');
this.$emit('pagechanged', this.selectedpage); this.$emit('pagechanged', this.selectedpage);
}, },
beforeUnmount() {
this.edit.toolbox_shown = false;
debug.info("Hiding toolbar because of destroy");
},
deactivated() {
this.edit.toolbox_shown = false;
debug.info("Hiding toolbar because of deactivation");
},
activated() {
if (this.coaching) {
self.edit.toolbox_shown = true; // Defaults to on in coching view.
}
},
updated() { updated() {
this.$root.$emit('redrawLines'); this.$root.$emit('redrawLines');
ItemEventBus.$emit('redrawLines'); ItemEventBus.$emit('redrawLines');

View File

@ -98,12 +98,13 @@ function setOffset(reference) {
let offsetTop = (ref ? ref.offsetTop : 0); let offsetTop = (ref ? ref.offsetTop : 0);
offsetTop += (offsetTop != 0) ? "px" : ""; offsetTop += (offsetTop != 0) ? "px" : "";
const el = document.querySelector(`#p-sidebar-mount`); const el = document.querySelector(`#p-sidebar-mount`);
el.style.height = `calc( 100vh - ${offsetTop})`; if (el) {
el.style.marginTop = offsetTop; el.style.height = `calc( 100vh - ${offsetTop})`;
el.style.marginTop = offsetTop;
}
} }
} }
export default { export default {
install(Vue /* ,options */) { install(Vue /* ,options */) {
Vue.use(PortalVue); Vue.use(PortalVue);
@ -114,6 +115,13 @@ export default {
createPortalTarget(); createPortalTarget();
}); });
Vue.component('p-easeinout',{
template: `
<transition name="p-easeinout"
><slot></slot>
</transition>`
});
Vue.component('p-sidebar', { Vue.component('p-sidebar', {
props: { props: {
value: { value: {
@ -167,12 +175,16 @@ export default {
}, },
template: ` template: `
<div><mounting-portal ref='portal' <div
><mounting-portal ref='portal'
mount-to="#p-sidebar-mount" mount-to="#p-sidebar-mount"
class="(right?'p-sidebar-right ':'')"
append append
><div ref='container' transition="p-easeinout"
:class="'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'') + ((!value)?'hidden ':'')" ><div ref='container' v-if="value"
><slot></slot></div></mounting-portal> :class="'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'')"
><slot></slot></div
></mounting-portal>
</div> </div>
`, `,
}); });

View File

@ -2060,7 +2060,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
background-color: var(--light); background-color: var(--light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: all 0.3s ease-in-out;
z-index: 100; z-index: 100;
--p-sidebar-hideoffset: -320px; --p-sidebar-hideoffset: -320px;
} }
@ -2078,4 +2077,37 @@ body.path-local-treestudyplan .editmode-switch-form > * {
} }
#p-sidebar-wrapper .p-sidebar .t-toolbox-tabs { #p-sidebar-wrapper .p-sidebar .t-toolbox-tabs {
flex: 1; /* Make sure it grows to fill the space */ flex: 1; /* Make sure it grows to fill the space */
}
#p-sidebar-wrapper .p-easeinout-enter {
display: flex;
}
#p-sidebar-wrapper .p-easeinout-enter:not(.p-sidebar-right) {
margin-left: var(--p-sidebar-hideoffset);
}
#p-sidebar-wrapper .p-easeinout-enter.p-sidebar-right {
margin-right: var(--p-sidebar-hideoffset);
}
#p-sidebar-wrapper .p-easeinout-enter-active {
transition: all 0.3s ease-in-out;
}
#p-sidebar-wrapper .p-easeinout-enter-to:not(.p-sidebar-right) {
margin-left: 0;
}
#p-sidebar-wrapper .p-easeinout-enter-to.p-sidebar-right {
margin-right: 0;
}
#p-sidebar-wrapper .p-easeinout-leave:not(.p-sidebar-right) {
margin-left: 0;
}
#p-sidebar-wrapper .p-easeinout-leave.p-sidebar-right {
margin-right: 0;
}
#p-sidebar-wrapper .p-easeinout-leave-active {
transition: all 0.3s ease-in-out;
}
#p-sidebar-wrapper .p-easeinout-leave-to:not(.p-sidebar-right) {
margin-left: var(--p-sidebar-hideoffset);
}
#p-sidebar-wrapper .p-easeinout-leave-to.p-sidebar-right {
margin-right: var(--p-sidebar-hideoffset);
} }

View File

@ -28,7 +28,7 @@
background-color: var(--light); background-color: var(--light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: all 0.3s ease-in-out;
z-index: 100; z-index: 100;
--p-sidebar-hideoffset: -320px; --p-sidebar-hideoffset: -320px;
//overflow-y: auto; //overflow-y: auto;
@ -50,5 +50,45 @@
flex: 1; /* Make sure it grows to fill the space */ flex: 1; /* Make sure it grows to fill the space */
} }
} }
.p-easeinout-enter {
display:flex;
&:not(.p-sidebar-right) {
margin-left: var(--p-sidebar-hideoffset);
}
&.p-sidebar-right {
margin-right: var(--p-sidebar-hideoffset);
}
}
.p-easeinout-enter-active {
transition: all 0.3s ease-in-out;
}
.p-easeinout-enter-to {
&:not(.p-sidebar-right) {
margin-left: 0;
}
&.p-sidebar-right {
margin-right: 0;
}
}
.p-easeinout-leave {
&:not(.p-sidebar-right) {
margin-left: 0;
}
&.p-sidebar-right {
margin-right: 0;
}
}
.p-easeinout-leave-active {
transition: all 0.3s ease-in-out;
}
.p-easeinout-leave-to {
&:not(.p-sidebar-right) {
margin-left: var(--p-sidebar-hideoffset);
}
&.p-sidebar-right {
margin-right: var(--p-sidebar-hideoffset);
}
}
} }

View File

@ -2060,7 +2060,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
background-color: var(--light); background-color: var(--light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: all 0.3s ease-in-out;
z-index: 100; z-index: 100;
--p-sidebar-hideoffset: -320px; --p-sidebar-hideoffset: -320px;
} }
@ -2078,4 +2077,37 @@ body.path-local-treestudyplan .editmode-switch-form > * {
} }
#p-sidebar-wrapper .p-sidebar .t-toolbox-tabs { #p-sidebar-wrapper .p-sidebar .t-toolbox-tabs {
flex: 1; /* Make sure it grows to fill the space */ flex: 1; /* Make sure it grows to fill the space */
}
#p-sidebar-wrapper .p-easeinout-enter {
display: flex;
}
#p-sidebar-wrapper .p-easeinout-enter:not(.p-sidebar-right) {
margin-left: var(--p-sidebar-hideoffset);
}
#p-sidebar-wrapper .p-easeinout-enter.p-sidebar-right {
margin-right: var(--p-sidebar-hideoffset);
}
#p-sidebar-wrapper .p-easeinout-enter-active {
transition: all 0.3s ease-in-out;
}
#p-sidebar-wrapper .p-easeinout-enter-to:not(.p-sidebar-right) {
margin-left: 0;
}
#p-sidebar-wrapper .p-easeinout-enter-to.p-sidebar-right {
margin-right: 0;
}
#p-sidebar-wrapper .p-easeinout-leave:not(.p-sidebar-right) {
margin-left: 0;
}
#p-sidebar-wrapper .p-easeinout-leave.p-sidebar-right {
margin-right: 0;
}
#p-sidebar-wrapper .p-easeinout-leave-active {
transition: all 0.3s ease-in-out;
}
#p-sidebar-wrapper .p-easeinout-leave-to:not(.p-sidebar-right) {
margin-left: var(--p-sidebar-hideoffset);
}
#p-sidebar-wrapper .p-easeinout-leave-to.p-sidebar-right {
margin-right: var(--p-sidebar-hideoffset);
} }