SVGHMI: When clicking outside of opened HMI:DropDown box, close it.
--- a/svghmi/gen_index_xhtml.xslt Tue Apr 14 19:22:18 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt Tue Apr 14 22:08:52 2020 +0200
@@ -867,7 +867,7 @@
</xsl:text>
<xsl:text> this.opened = false;
</xsl:text>
- <xsl:text> this.bound_inhibit_click_elsewhere = this.inhibit_click_elsewhere.bind(this);
+ <xsl:text> this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
</xsl:text>
<xsl:text> },
</xsl:text>
@@ -977,21 +977,27 @@
</xsl:text>
<xsl:text> },
</xsl:text>
- <xsl:text> inhibit_click_elsewhere: function(e) {
+ <xsl:text> close_on_click_elsewhere: function(e) {
</xsl:text>
<xsl:text> console.log("inhibit", e);
</xsl:text>
<xsl:text> console.log(e.target.parentNode, this.text_elt);
</xsl:text>
- <xsl:text> if(e.target.parentNode !== this.text_elt)
+ <xsl:text> if(e.target.parentNode !== this.text_elt){
</xsl:text>
<xsl:text> e.stopPropagation();
</xsl:text>
+ <xsl:text> if(e.target !== this.box_elt)
+</xsl:text>
+ <xsl:text> this.close();
+</xsl:text>
+ <xsl:text> }
+</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> close: function(){
</xsl:text>
- <xsl:text> document.removeEventListener("click", this.bound_inhibit_click_elsewhere, true);
+ <xsl:text> document.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
</xsl:text>
<xsl:text> this.reset_text();
</xsl:text>
@@ -1137,7 +1143,7 @@
</xsl:text>
<xsl:text> // disable interaction with background
</xsl:text>
- <xsl:text> document.addEventListener("click", this.bound_inhibit_click_elsewhere, true);
+ <xsl:text> document.addEventListener("click", this.bound_close_on_click_elsewhere, true);
</xsl:text>
<xsl:text> this.opened = true;
</xsl:text>
--- a/svghmi/widget_dropdown.ysl2 Tue Apr 14 19:22:18 2020 +0200
+++ b/svghmi/widget_dropdown.ysl2 Tue Apr 14 22:08:52 2020 +0200
@@ -22,7 +22,7 @@
this.menu_offset = 0;
this.lift = 0;
this.opened = false;
- this.bound_inhibit_click_elsewhere = this.inhibit_click_elsewhere.bind(this);
+ this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
},
on_selection_click: function(selection) {
console.log("selected "+selection);
@@ -77,14 +77,17 @@
}
return count;
},
- inhibit_click_elsewhere: function(e) {
+ close_on_click_elsewhere: function(e) {
console.log("inhibit", e);
console.log(e.target.parentNode, this.text_elt);
- if(e.target.parentNode !== this.text_elt)
+ if(e.target.parentNode !== this.text_elt){
e.stopPropagation();
+ if(e.target !== this.box_elt)
+ this.close();
+ }
},
close: function(){
- document.removeEventListener("click", this.bound_inhibit_click_elsewhere, true);
+ document.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
this.reset_text();
this.reset_box();
this.element.appendChild(this.button_elt);
@@ -153,7 +156,7 @@
this.element.removeChild(this.button_elt);
this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
// disable interaction with background
- document.addEventListener("click", this.bound_inhibit_click_elsewhere, true);
+ document.addEventListener("click", this.bound_close_on_click_elsewhere, true);
this.opened = true;
},
reset_text: function(){