Removed old line wrapper hack
This commit is contained in:
parent
64f3b96dfc
commit
6392a0686f
|
@ -16,7 +16,7 @@ import ModalComponents from './modedit-modal';
|
||||||
import Debugger from './debugger';
|
import Debugger from './debugger';
|
||||||
|
|
||||||
import {load_strings} from './string-helper';
|
import {load_strings} from './string-helper';
|
||||||
import {ProcessStudyplan, fixLineWrappers} from './studyplan-processor';
|
import {ProcessStudyplan} from './studyplan-processor';
|
||||||
import {download,upload} from './downloader';
|
import {download,upload} from './downloader';
|
||||||
|
|
||||||
import PortalVue from './portal-vue';
|
import PortalVue from './portal-vue';
|
||||||
|
@ -56,9 +56,6 @@ export function init(contextid,categoryid) {
|
||||||
|
|
||||||
const in_systemcontext = (contextid <= 1);
|
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
|
// Setup the initial Vue app for this page
|
||||||
let app = new Vue({
|
let app = new Vue({
|
||||||
el: '#root',
|
el: '#root',
|
||||||
|
|
|
@ -1366,6 +1366,7 @@ export default {
|
||||||
:key="line.id"
|
:key="line.id"
|
||||||
v-model="value.studylines[lineindex]"
|
v-model="value.studylines[lineindex]"
|
||||||
:numlines='value.studylines.length'
|
:numlines='value.studylines.length'
|
||||||
|
:layers='countLineLayers(line)+1'
|
||||||
></t-studyline-heading>
|
></t-studyline-heading>
|
||||||
</div>
|
</div>
|
||||||
<!-- Next, paint all the cells in the scrollable -->
|
<!-- Next, paint all the cells in the scrollable -->
|
||||||
|
@ -1500,9 +1501,14 @@ export default {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 1,
|
default: 1,
|
||||||
},
|
},
|
||||||
|
layers: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
layerHeights: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -1514,16 +1520,31 @@ export default {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
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){
|
if(lineid == this.value.id){
|
||||||
let offset = "";
|
let offset = "";
|
||||||
if(this.value.sequence==1 || this.value.sequence==this.numlines) {
|
if(this.value.sequence==1 || this.value.sequence==this.numlines) {
|
||||||
const cstyle = getComputedStyle(this.$refs.mainEl);
|
const cstyle = getComputedStyle(this.$refs.mainEl);
|
||||||
offset = " + " +cstyle.borderTopWidth + " + " + cstyle.borderBottomWidth;
|
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;
|
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}`,
|
debug.info(`Creating height listener for line ${self.line.id} type ${self.type} slot ${self.slotindex}`,
|
||||||
"element",self.$refs.sizeElement);
|
"element",self.$refs.sizeElement);
|
||||||
self.resizeListener = new ResizeObserver(() => {
|
self.resizeListener = new ResizeObserver(() => {
|
||||||
|
if(self.$refs.sizeElement){
|
||||||
const height = self.$refs.sizeElement.clientHeight;
|
const height = self.$refs.sizeElement.clientHeight;
|
||||||
debug.info(`Sending height change event line ${self.line.id} height ${height}`);
|
debug.info(`Sending height change event line ${self.line.id} height ${height}`);
|
||||||
ItemEventBus.$emit('lineHeightChange', self.line.id, height);
|
ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);
|
||||||
|
}
|
||||||
}).observe(self.$refs.sizeElement);
|
}).observe(self.$refs.sizeElement);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -1812,7 +1835,7 @@ export default {
|
||||||
|
|
||||||
},
|
},
|
||||||
template: `
|
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') "
|
+ ((line.sequence%2)?' odd':' even') "
|
||||||
:data-studyline="line.id" ref="sizeElement"
|
:data-studyline="line.id" ref="sizeElement"
|
||||||
><drag v-if="item"
|
><drag v-if="item"
|
||||||
|
@ -1910,13 +1933,13 @@ export default {
|
||||||
dragelement.style.removeProperty('position');
|
dragelement.style.removeProperty('position');
|
||||||
document.removeEventListener("mousemove",this.onMouseMove);
|
document.removeEventListener("mousemove",this.onMouseMove);
|
||||||
},
|
},
|
||||||
onMouseMove: debounce(function(event){
|
onMouseMove: function(event){
|
||||||
let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);
|
let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);
|
||||||
dragelement.style.position = 'fixed';
|
dragelement.style.position = 'fixed';
|
||||||
dragelement.style.left = event.clientX+'px';
|
dragelement.style.left = event.clientX+'px';
|
||||||
dragelement.style.top = event.clientY+'px';
|
dragelement.style.top = event.clientY+'px';
|
||||||
// line will follow automatically
|
// line will follow automatically
|
||||||
},20),
|
},
|
||||||
onDrop(event){
|
onDrop(event){
|
||||||
let from_id = event.data.id;
|
let from_id = event.data.id;
|
||||||
let to_id = this.value.id;
|
let to_id = this.value.id;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user