imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

collapse left panel when 50px past min-width

Browse source
This commit is contained in:
Bruno Windels 2018-10-11 15:40:59 +02:00
parent d6774fd8ee
commit 4f006b033e
3 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/resizer/distributors.js
View file

@ -26,7 +26,12 @@ class CollapseDistributor extends FixedDistributor {
resize(offset) {
let newWidth = offset - this.sizer.getItemOffset(this.item);
if (this.minWidth > 0) {
if (offset < this.minWidth + 50) {
// -50 this is to not collapse immediately
// when moving the cursor past the minWidth
// to give some visual feedback you are about
// to collapse
// TODO: should 50 be configurable? minWidth/2 maybe?
if (offset < (this.minWidth - 50)) {
this.item.classList.add("collapsed");
newWidth = this.minWidth;
}

3
src/resizer/index.js
View file

@ -1,10 +1,11 @@
import {Sizer} from "./sizer";
import {FixedDistributor, PercentageDistributor} from "./distributors";
import {FixedDistributor, CollapseDistributor, PercentageDistributor} from "./distributors";
import {makeResizeable} from "./event";
module.exports = {
makeResizeable,
Sizer,
FixedDistributor,
CollapseDistributor,
PercentageDistributor,
};