Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases 4 Wiki Activity

Update to transition system

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
amd/build/studyplan-editor-components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
amd/build/studyplan-editor-components.min.js.map
View File

File diff suppressed because one or more lines are too long

2
amd/build/util/psidebar-vue.min.js vendored
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

2
amd/build/util/psidebar-vue.min.js.map
View File

File diff suppressed because one or more lines are too long

16
amd/src/studyplan-editor-components.js
View File

@ -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');

26
amd/src/util/psidebar-vue.js
View File

@ -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})`;
el.style.marginTop = offsetTop;
if (el) {
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'
:class="'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'') + ((!value)?'hidden ':'')"
><slot></slot></div></mounting-portal>
transition="p-easeinout"
><div ref='container' v-if="value"
:class="'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'')"
><slot></slot></div
></mounting-portal>
</div>
`,
});

34
css/devstyles.css
View File

@ -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;
}
@ -2079,3 +2078,36 @@ 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);
}

42
scss/psidebar.scss
View File

@ -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);
}
}
}

34
styles.css
View File

@ -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;
}
@ -2079,3 +2078,36 @@ 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);
}