From 26475ae341e02d1809a7be16a11834255a0ec8a9 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Mon, 31 Jan 2022 08:11:21 +0100
Subject: [PATCH] make UI Select as component and add div as part of DOM
---
app/components/commander/index.hbs | 2 ++
app/components/ui_select.hbs | 2 ++
app/modifiers/ui_select.js | 50 ++++++++----------------------
app/styles/ui_select.scss | 3 +-
4 files changed, 19 insertions(+), 38 deletions(-)
create mode 100644 app/components/ui_select.hbs
diff --git a/app/components/commander/index.hbs b/app/components/commander/index.hbs
index e18a28e..c7be9e2 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 0000000..05b247c
--- /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 2cec61b..32ae9f7 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 8452ae7..cb2c15a 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;
+}
--
GitLab