ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-11 13:16:15 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Drag collapse WIP

Browse Source
This commit is contained in:
charlesh88 2018-08-24 14:47:22 -07:00
parent f9b764bb64
commit 3f1e649526
1 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/ui/components/controls/pane.vue
View File

@ -260,26 +260,29 @@ export default {
}*/ }*/
}, },
methods: { methods: {
toggleCollapse: function (restoreSize) { toggleCollapse: function () {
this.collapsed = !this.collapsed; this.collapsed = !this.collapsed;
// console.log("rs " + restoreSize); // console.log("rs " + restoreSize);
if (!restoreSize) { restoreSize = this.$el.style[this.styleProp]; } // if (!restoreSize) { restoreSize = this.$el.style[this.styleProp]; }
if (this.collapsed) { if (this.collapsed) {
// Pane is expanded and is being collapsed // Pane is expanded and is being collapsed
this.currentSize = this.$el.style[this.styleProp]; this.currentSize = (this.dragCollapse === true)? this.initial : this.$el.style[this.styleProp];
this.$el.style[this.styleProp] = ''; this.$el.style[this.styleProp] = '';
} else { } else {
// Pane is collapsed and is being expanded // Pane is collapsed and is being expanded
this.$el.style[this.styleProp] = this.currentSize; this.$el.style[this.styleProp] = this.currentSize;
delete this.currentSize; delete this.currentSize;
delete this.dragCollapse;
} }
}, },
trackSize: function() { trackSize: function() {
if (!this.dragCollapse === true) {
if (this.type === 'vertical') { if (this.type === 'vertical') {
this.initial = this.$el.offsetHeight; this.initial = this.$el.offsetHeight;
} else if (this.type === 'horizontal') { } else if (this.type === 'horizontal') {
this.initial = this.$el.offsetWidth; this.initial = this.$el.offsetWidth;
} }
}
}, },
getPosition: function (event) { getPosition: function (event) {
return this.type === 'horizontal' ? return this.type === 'horizontal' ?
@ -298,24 +301,22 @@ export default {
updatePosition: function (event) { updatePosition: function (event) {
let size = this.getNewSize(event); let size = this.getNewSize(event);
this.$el.style[this.styleProp] = size; this.$el.style[this.styleProp] = size;
/*
let intSize = parseInt(size.substr(0, size.length - 2)); let intSize = parseInt(size.substr(0, size.length - 2));
// console.log(this.initial); // console.log(this.initial);
if (intSize < 50) { if (intSize < 50) {
// this.currentSize = this.initial;
console.log("initial: " + this.initial); console.log("initial: " + this.initial);
// this.toggleCollapse("initial: " + this.initial); this.dragCollapse = true;
document.body.removeEventListener('mousemove', this.updatePosition); this.end();
document.body.removeEventListener('mouseup', this.end); this.toggleCollapse();
} else { } else {
this.$el.style[this.styleProp] = size; this.$el.style[this.styleProp] = size;
}*/ }
}, },
start: function (event) { start: function (event) {
this.startPosition = this.getPosition(event); this.startPosition = this.getPosition(event);
this.trackSize();
document.body.addEventListener('mousemove', this.updatePosition); document.body.addEventListener('mousemove', this.updatePosition);
document.body.addEventListener('mouseup', this.end); document.body.addEventListener('mouseup', this.end);
this.trackSize();
}, },
end: function (event) { end: function (event) {
document.body.removeEventListener('mousemove', this.updatePosition); document.body.removeEventListener('mousemove', this.updatePosition);