Update to transition system

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

amd/src/studyplan-editor-components.js

@@ -1488,10 +1488,26 @@ export default {
                         self.availableroles = response;
                         return;
                     }).catch(notification.exception);
+                } else {
+                    self.edit.toolbox_shown = true; // Defaults to on in coching view.
                 }
                 this.$root.$emit('redrawLines');
                 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() {
                 this.$root.$emit('redrawLines');
                 ItemEventBus.$emit('redrawLines');

amd/src/util/psidebar-vue.js

@@ -98,12 +98,13 @@ function setOffset(reference) {
         let offsetTop = (ref ? ref.offsetTop : 0);
         offsetTop += (offsetTop != 0) ? "px" : "";
         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 {
     install(Vue /* ,options */) {
         Vue.use(PortalVue);
@@ -114,6 +115,13 @@ export default {
             createPortalTarget();
         });
 
+        Vue.component('p-easeinout',{
+            template: `
+            <transition name="p-easeinout"
+                ><slot></slot>
+            </transition>`
+        });
+
         Vue.component('p-sidebar', {
         props: {
             value: {
@@ -167,12 +175,16 @@ export default {
 
         },
         template: `
-        <div><mounting-portal ref='portal'
+        <div
+        ><mounting-portal ref='portal'
             mount-to="#p-sidebar-mount"
+            class="(right?'p-sidebar-right ':'')"
             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>
         `,
         });

css/devstyles.css

@@ -2060,7 +2060,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     background-color: var(--light);
     display: flex;
     flex-direction: column;
-    transition: all 0.3s ease-in-out;
     z-index: 100;
     --p-sidebar-hideoffset: -320px;
 }
@@ -2078,4 +2077,37 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 }
 #p-sidebar-wrapper .p-sidebar .t-toolbox-tabs {
     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);
 }

scss/psidebar.scss

@@ -28,7 +28,7 @@
         background-color: var(--light);
         display: flex;
         flex-direction: column;
-        transition: all 0.3s ease-in-out;
+        
         z-index: 100;
         --p-sidebar-hideoffset: -320px;
         //overflow-y: auto;
@@ -50,5 +50,45 @@
             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);
+        }
+    }
 }
 

styles.css

@@ -2060,7 +2060,6 @@ body.path-local-treestudyplan .editmode-switch-form > * {
     background-color: var(--light);
     display: flex;
     flex-direction: column;
-    transition: all 0.3s ease-in-out;
     z-index: 100;
     --p-sidebar-hideoffset: -320px;
 }
@@ -2078,4 +2077,37 @@ body.path-local-treestudyplan .editmode-switch-form > * {
 }
 #p-sidebar-wrapper .p-sidebar .t-toolbox-tabs {
     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);
 }