Skip to content
This repository was archived by the owner on Jul 29, 2024. It is now read-only.

Calculate height of content #24

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Calculate height of content #24

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2baf733
Calculate height of content
Aug 28, 2018
90f04a6
Update wrapper.vue
farhadf246 Aug 28, 2018
f77a47d
Update wrapper.vue
farhadf246 Aug 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 48 additions & 37 deletions src/components/wrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,41 @@
status: false,
}
},

props: ['active'],

// status watcher - change toggle element when status changes
watch: {
active: function(status){
if ( status != null ) {
this.status = status;
}
},
active: function (status) {
if (status != null) {
this.status = status;
}
},

status: function (new_value, old_value) {
this.$emit('onStatusChange', {vm: this, status: new_value, old_status: old_value});
if (this.$parent.onlyOneActive === false) {
toggleElement(this.nodes.content, this.$options.$vc.settings);
} else {
if (new_value === true && old_value === false) {
let active = this.$parent.$children.filter(function (el) {
return el.status === true;
});
if (active.length > 1) {
active.forEach(function (el) {
el.close();
closeElement(el.nodes.content, this.$options.$vc.settings);
}.bind(this))
}
openElement(this.nodes.content, this.$options.$vc.settings);
this.open();
} else if (old_value === true && new_value === false) {
closeElement(this.nodes.content, this.$options.$vc.settings);
this.close();
status: function (new_value, old_value) {
this.$emit('onStatusChange', {vm: this, status: new_value, old_status: old_value});
if (this.$parent.onlyOneActive === false) {
toggleElement(this.nodes.content, this.$options.$vc.settings);
} else {
if (new_value === true && old_value === false) {
let active = this.$parent.$children.filter(function (el) {
return el.status === true;
});
if (active.length > 1) {
active.forEach(function (el) {
el.close();
closeElement(el.nodes.content, this.$options.$vc.settings);
}.bind(this))
}
openElement(this.nodes.content, this.$options.$vc.settings);
this.open();
} else if (old_value === true && new_value === false) {
closeElement(this.nodes.content, this.$options.$vc.settings);
this.close();
}

}

}
},

// collapse basic instance methods
Expand All @@ -63,42 +63,53 @@
this.$emit('beforeClose', this);
this.status = false;
this.$emit('afterClose', this);
this.removeHeight();
},
open: function () {
this.$emit('beforeOpen', this);
this.$emit('beforeOpen', this)
this.status = true;
this.$emit('afterOpen', this);
this.SetHeightCalculator();
},

//Calculate height of content
SetHeightCalculator: function () {
let _hg = this.nodes.content.scrollHeight + 'px';
this.nodes.content.setAttribute("style", "max-height:" + _hg);
},
removeHeight: function () {
this.nodes.content.setAttribute("style", "max-height:0");
}
},

// mounting

mounted: function () {
this.nodes.toggle = this.$el.querySelector('.' + this.$options.$vc.settings.togglerClassDefault);
this.nodes.content = this.$el.querySelector('.' + this.$options.$vc.settings.contentClassDefault);
this.nodes.content.setAttribute("style", "max-height:0");
this.$emit('afterNodesBinding', {vm: this, nodes: this.nodes});
if(this.nodes.toggle !== null){
if (this.nodes.toggle !== null) {
this.nodes.toggle.addEventListener('click', () => {
this.toggle();
});
}
if ( this.active != null ) {
this.status = this.active;
if (this.active != null) {
this.status = this.active;
}
}
}
</script>

<style>
.v-collapse-content{
max-height: 0;
transition: max-height 0.3s ease-out;
.v-collapse-content {
transition: max-height 0.4s ease-in-out 0s, padding-top 0.3s ease-in-out 0s, padding-bottom 0.3s ease-in-out 0s;
overflow: hidden;
padding: 0;
}

.v-collapse-content-end{
transition: max-height 0.3s ease-in;
max-height: 500px;
.v-collapse-content-end {
animation-fill-mode: both;
animation-timing-function: ease-in;
}
</style>