diff --git a/app/components/commander/index.hbs b/app/components/commander/index.hbs index e18a28e30a38e12ee276e07f0998fbaee20dd79f..c7be9e2b9d555b6fbc06d71fa7057594dd800e9c 100644 --- a/app/components/commander/index.hbs +++ b/app/components/commander/index.hbs @@ -5,6 +5,7 @@ {{uiSelect}}> + <UiSelect /> <div class="d-flex justify-content-between"> <Commander::ActionButtons @openNewFolderModal={{this.openNewFolderModal}} @@ -76,4 +77,5 @@ @hint={{@hint}} /> {{/if}} + </div> diff --git a/app/components/ui_select.hbs b/app/components/ui_select.hbs new file mode 100644 index 0000000000000000000000000000000000000000..05b247c659517acc94397e9bba94fa0077a14dc8 --- /dev/null +++ b/app/components/ui_select.hbs @@ -0,0 +1,2 @@ +<div id='ui-select'> +</div> diff --git a/app/modifiers/ui_select.js b/app/modifiers/ui_select.js index 2cec61b9df9d9370e19bab77e05f11c27b3e5ad0..32ae9f748d5756b5f66dd0a927d44da6a3f55bb9 100644 --- a/app/modifiers/ui_select.js +++ b/app/modifiers/ui_select.js @@ -22,23 +22,17 @@ class UISelect { this.height = 0; this.width = 0; this.parent = parent_selector; - this.select_div = undefined; + this.select_div = document.getElementById('ui-select'); } - create_div() { - if (!this.select_div) { - this.select_div = this._create_selection_div( - this.start_x, - this.start_y - ); - } + show(x, y) { + this.select_div.style.visibility = 'visible'; + this.select_div.style.top = `${x}px`; + this.select_div.style.left = `${y}px`; } - remove_div() { - if (this.select_div) { - this.select_div.remove(); - this.select_div = undefined; - } + hide() { + this.select_div.style.visibility = 'hidden'; } update(x, y) { @@ -71,21 +65,6 @@ class UISelect { } } - _create_selection_div(x, y) { - - let div = document.createElement('div'); - - div.setAttribute('id', 'ui-select'); - div.style.position = 'absolute'; - div.style.top = `${y}px`; - div.style.left = `${x}px`; - div.style.width = '0px'; - div.style.height = '0px'; - - this.parent.appendChild(div); - - return div; - } } @@ -118,7 +97,7 @@ export default class UISelectModifier extends Modifier { @action onMouseMove(event) { if (!event.buttons) { - this.remove_div(); + this.hide(); } else if (this.ui_select) { this.ui_select.update(event.clientX, event.clientY); } @@ -126,26 +105,23 @@ export default class UISelectModifier extends Modifier { @action onMouseUp() { - console.log('mouse up'); - this.remove_div(); + this.hide(); } @action onMouseDown(event) { - console.log('mouse down'); this.ui_select = new UISelect( this.element, event.clientX, event.clientY ); - this.ui_select.create_div(); + this.ui_select.show(event.clientX, event.clientY); } - remove_div() { + hide() { if (this.ui_select) { - this.ui_select.remove_div(); - this.ui_select = undefined; + this.ui_select.hide(); } } -} \ No newline at end of file +} diff --git a/app/styles/ui_select.scss b/app/styles/ui_select.scss index 8452ae7714119294e095c45032652f831c058616..cb2c15af0716830c50e1ddfcff0c468b32676580 100644 --- a/app/styles/ui_select.scss +++ b/app/styles/ui_select.scss @@ -1,4 +1,5 @@ #ui-select { background-color: #e6f5ff40; border: 1px solid #A6DAFF; -} \ No newline at end of file + position: absolute; +}