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

Removed old line wrapper hack

Browse Source
This commit is contained in:
PMKuipers 2023-07-18 13:19:48 +02:00
parent 64f3b96dfc
commit 6392a0686f
2 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
amd/src/page-edit-plan.js
View File

@ -16,7 +16,7 @@ import ModalComponents from './modedit-modal';
import Debugger from './debugger';
import {load_strings} from './string-helper';
import {ProcessStudyplan, fixLineWrappers} from './studyplan-processor';
import {ProcessStudyplan} from './studyplan-processor';
import {download,upload} from './downloader';
import PortalVue from './portal-vue';
@ -56,9 +56,6 @@ export function init(contextid,categoryid) {
const in_systemcontext = (contextid <= 1);
// Add the event listeners for the line wrappers (needed to keep the arrows in their place)
window.addEventListener('resize',fixLineWrappers);
// Setup the initial Vue app for this page
let app = new Vue({
el: '#root',

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

@ -1366,6 +1366,7 @@ export default {
:key="line.id"
v-model="value.studylines[lineindex]"
:numlines='value.studylines.length'
:layers='countLineLayers(line)+1'
></t-studyline-heading>
</div>
<!-- Next, paint all the cells in the scrollable -->
@ -1500,9 +1501,14 @@ export default {
type: Number,
default: 1,
},
layers: {
type: Number,
default: 1,
},
},
data() {
return {
layerHeights: {}
};
},
created() {
@ -1514,16 +1520,31 @@ export default {
},
methods: {
onLineHeightChange(lineid,newheight){
onLineHeightChange(lineid,layerid,newheight){
// All layers for this line have the first slot send an update message on layer height change.
// When one of those updates is received, record the height and recalculate the total height of the
// header
if(lineid == this.value.id){
let offset = "";
if(this.value.sequence==1 || this.value.sequence==this.numlines) {
const cstyle = getComputedStyle(this.$refs.mainEl);
offset = " + " +cstyle.borderTopWidth + " + " + cstyle.borderBottomWidth;
debug.info("Adding extra height to offset border",cstyle);
//debug.info("Adding extra height to offset border",cstyle);
}
const heightStyle=`calc( ${newheight}px ${offset})`;
debug.info(`Received line height change line ${lineid} to ${heightStyle}`);
const items = document.querySelectorAll(
`.t-studyplan-content-edit .t-studyline-slot-0[data-studyline='${this.value.id}']`);
let heightSum = 0;
for(const ix in items){
debug.info(items[ix]);
const height = items[ix].clientHeight;
heightSum += height;
}
debug.info(`Line height change line ${lineid} layer ${layerid}`, items, heightSum);
const heightStyle=`calc( ${heightSum}px ${offset})`;
//debug.info(`Received line height change line ${lineid} to ${heightStyle}`);
this.$refs.mainEl.style.height = heightStyle;
}
}
@ -1661,9 +1682,11 @@ export default {
debug.info(`Creating height listener for line ${self.line.id} type ${self.type} slot ${self.slotindex}`,
"element",self.$refs.sizeElement);
self.resizeListener = new ResizeObserver(() => {
const height = self.$refs.sizeElement.clientHeight;
debug.info(`Sending height change event line ${self.line.id} height ${height}`);
ItemEventBus.$emit('lineHeightChange', self.line.id, height);
if(self.$refs.sizeElement){
const height = self.$refs.sizeElement.clientHeight;
debug.info(`Sending height change event line ${self.line.id} height ${height}`);
ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);
}
}).observe(self.$refs.sizeElement);
}
},
@ -1812,7 +1835,7 @@ export default {
},
template: `
<div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ((slotindex==0)?'t-studyline-firstcolumn':'')
<div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ((slotindex==0)?' t-studyline-firstcolumn':'')
+ ((line.sequence%2)?' odd':' even') "
:data-studyline="line.id" ref="sizeElement"
><drag v-if="item"
@ -1910,13 +1933,13 @@ export default {
dragelement.style.removeProperty('position');
document.removeEventListener("mousemove",this.onMouseMove);
},
onMouseMove: debounce(function(event){
onMouseMove: function(event){
let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);
dragelement.style.position = 'fixed';
dragelement.style.left = event.clientX+'px';
dragelement.style.top = event.clientY+'px';
// line will follow automatically
},20),
},
onDrop(event){
let from_id = event.data.id;
let to_id = this.value.id;