@ewc-lib/ewc-popovers 2.0.4-beta → 2.1.0-alpha

package/ewc-popover/package.json

@@ -3,7 +3,9 @@
   "main": "src/main.js",
   "license": "EUPL v.1.1",
   "peerDependencies": {
-    "@ewc-lib/ewc-css-common": "0.1.0",
-    "@ewc-lib/ewc-dialogs": "5.0.8-beta"
+    "@ewc-lib/ewc-css-common": "0.1.0"
+  },
+  "optionalDependencies": {
+    "@ewc-lib/ewc-dialogs": "5.0.10"
   }
 }

package/ewc-popover/readme.md

@@ -27,6 +27,7 @@ ewc-popover must have 2 children:
 
 - an HTML element to open/close the popover (**slot="toggle"**)
   - the position of the popover is relative to this element
+  - Note: eventListeners (click and keyboard) are being attached to the element ("toggleElement" in element.js)
 - the content of the popover (**slot="content"**)
   - this element is expected to have "display:inline" style
 
@@ -61,3 +62,13 @@ An element within the content can be specified to close the popover.
 This is done by setting the attribute "**data-ewc-popover-close**" on it.
 Just existence is checked, value doesn't matter.
 Use case: a close button inside the popover.
+
+## Suppressing tooltips
+
+On a child with slot="toggle" attribute, the attribute "tooltip-suppressed" is set to "true" when popover opens and set to "false" when the popover closes.
+
+This can be seen as an optional interface.
+
+If the child implements that interface, the popover expects the child to not show any tooltip. If the child does not inplement that interface, nothing happens - ⚠️ as long as the child doesn't expose any other functionality via the attribute "tooltip-suppressed".
+
+Note: ewc-icon-button (a WebComponent intended to be used together with this popover) implements this interface.

package/ewc-popover/src/element.js

@@ -1,4 +1,4 @@
-import * as POPOVER from "./popover.js"
+import Popover from "./popover.js"
 import MARKUP from "./markup.js"		// keep this file markup free
 import CSS from  "./css.js"
 
@@ -6,15 +6,18 @@ import CSS from  "./css.js"
 export default class Element extends HTMLElement {
 
 	#isInitialized=false
-	#popover
+	#popover = null
+	#toggleElement = null
 
 	constructor() {	
-		super()	
+		super()
+		this.toggleVisibility = this.toggleVisibility.bind(this)
+		this.handleClickGlobal = this.handleClickGlobal.bind(this)
 	}
 	
 	connectedCallback(ignoreCheck) {
 		if(this.#isInitialized) { return } else { this.#isInitialized=true }
-    this.setAttribute("ewc-version", "2.0.4-beta")		// please always keep in sync with version in package.json
+    this.setAttribute("ewc-version", "2.1.0-alpha")		// please always keep in sync with version in package.json
 		if(ignoreCheck || this.childElementCount===2) {
 			// please see also comment in html.js
 
@@ -24,13 +27,25 @@ export default class Element extends HTMLElement {
 			this.shadowRoot.appendChild( MARKUP().cloneNode(true) )
 
 			const rootElement = this.shadowRoot.querySelector(".main_container")
-			const toggleElement = this.shadowRoot.querySelector("slot[name=toggle]").assignedElements()[0]
+			this.#toggleElement = this.shadowRoot.querySelector("slot[name=toggle]").assignedElements()[0]
 			const p = {
-				toggleElement : toggleElement,
+				toggleElement : this.#toggleElement,
 				positioninghint : this.hasAttribute("positioninghint") ? this.getAttribute("positioninghint").toLowerCase() : false
 			}
-			this.#popover = new POPOVER.Popover( rootElement, p).init()
-			
+			this.#popover = new Popover(rootElement, p).init()
+
+			if (this.#toggleElement) {
+				this.#toggleElement.addEventListener('click', this.toggleVisibility);
+			}
+
+			if (this.#toggleElement) {
+				this.#toggleElement.addEventListener('keydown', e=>{
+					if(e.key==="Enter" || e.key===" " || e.key==="ArrowDown") {this.toggleVisibility(e)}
+				})
+			}
+
+			document.addEventListener('click', this.handleClickGlobal);
+
 		} else {
 			console.error("popover: Must have 2 children: the toggle-element and the content.")
 		}
@@ -41,19 +56,61 @@ export default class Element extends HTMLElement {
 
 	set visibility(val) {
 		if(val==true) {
+			this.#toggleElement.setAttribute("tooltip-suppressed", "true")
 			this.#popover.openPopover()
+			this.#popover.positionPopover()
 		} else {
+			this.#toggleElement.setAttribute("tooltip-suppressed", "false")
 			this.#popover.closePopover()
 		}
 	}
 	
-	toggleVisibility() {
+	toggleVisibility(e) {
+		if(e) {e.preventDefault()}
+
 		if(this.#popover.isOpen()) {
-			this.#popover.closePopover()
+			this.visibility = false
 		} else {
-			this.#popover.openPopover()
+			this.visibility = true
 		}
 	}
 
 	setFocusToToggleElement() {this.#popover.setFocusToToggleElement()}
+
+  /**
+   * Handles global click events, triggered outside of the popover.
+   * It's tediously complicated :-(
+   */
+  handleClickGlobal(e) {
+    if (this.#popover.isOpen()) {
+
+			const rootElement = this.shadowRoot.querySelector(".main_container")
+
+			// this is the whole popover area
+      // we're in shadow DOM. test if element containing content is in also in shadow or in light DOM
+      const content = rootElement.querySelector("slot[name=content]")
+      const cond1 = content ? content.assignedElements()[0].contains(e.target) : rootElement.querySelector(".ewc-popover__content").contains(e.target)
+
+      // this is the designated element to toggle the popover
+      const cond2 = e.target === this.#toggleElement || e.target === this.#toggleElement.firstElementChild
+
+      // this is the custom property itself
+      // also include derived classes
+      const cond3 = e.target.nodeName.slice(0, 11)==="EWC-POPOVER"
+
+      // this is the element inside the content area with which it should be closed
+      // close when such an element was clicked
+      const cond4 = e.target.hasAttribute("data-ewc-popover-close")
+
+      //console.log(!cond2,!cond3,!cond1,cond4)
+
+      // close if anything other than the popover was clicked
+      if(!cond2 && !cond3 && (!cond1 || cond4)) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        this.visibility=false        
+      }
+    }
+  }
+
 }

package/ewc-popover/src/popover.js

@@ -16,7 +16,7 @@ See also comment in html.js
  * @param {Boolean} options.attachClickListener
  * @param {Boolean} options.attachKeyListener
  */
-export class Popover {
+export default class Popover {
 
   constructor(
     element,
@@ -53,9 +53,7 @@ export class Popover {
     this.openPopover = this.openPopover.bind(this);
     this.closePopover = this.closePopover.bind(this);
     this.positionPopover = this.positionPopover.bind(this);
-    this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
     this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
-    this.handleClickGlobal = this.handleClickGlobal.bind(this);
     this.checkPosition = this.checkPosition.bind(this);
     this.resetStyles = this.resetStyles.bind(this);
 
@@ -79,23 +77,10 @@ export class Popover {
     if (this.attachKeyListener) {
       document.addEventListener('keyup', this.handleKeyboardGlobal);
     }
-    if (this.attachClickListener) {
-      document.addEventListener('click', this.handleClickGlobal);
-    }
 
     window.addEventListener('resize', this.checkPosition);
     document.addEventListener('scroll', this.checkPosition);
 
-    if (this.attachClickListener && this.toggle) {
-      this.toggle.addEventListener('click', this.handleClickOnToggle);
-    }
-
-    if (this.attachKeyListener && this.toggle) {
-      this.toggle.addEventListener('keydown', e=>{
-        if(e.key==="Enter" || e.key===" " || e.key==="ArrowDown") {this.handleClickOnToggle(e)}
-      })
-    }
-
     return this
   }
 
@@ -109,35 +94,16 @@ export class Popover {
     if (this.attachKeyListener) {
       document.removeEventListener('keyup', this.handleKeyboardGlobal);
     }
-    if (this.attachClickListener) {
-      document.removeEventListener('click', this.handleClickGlobal);
-    }
 
     if (this.toggle.getAttribute('aria-expanded') === 'true') {
       this.closePopover();
     }
   }
 
-  #isOpen() {
+  isOpen() {
     return this.container.style.display!=="none" && this.container.style.display!==""
   }
 
-  /**
-   * Toggles between collapsed/expanded states.
-   *
-   * @param {Event} e
-   */
-  handleClickOnToggle(e) {
-    e.preventDefault();
-    // Toggle the popover
-    if (this.#isOpen()) {
-      this.closePopover();
-      return;
-    }
-    this.openPopover();
-    this.positionPopover();
-  }
-
   openPopover() {
     this.toggle.setAttribute('aria-expanded', 'true');
     this.container.style.display="block"
@@ -348,7 +314,7 @@ export class Popover {
   checkPosition() {
     clearTimeout(this.resizeTimer);
     this.resizeTimer = setTimeout(() => {
-      if(this.#isOpen()) {
+      if(this.isOpen()) {
         this.positionPopover();
       }
     }, 200);
@@ -363,7 +329,7 @@ export class Popover {
     if (!this.container) return;
 
     // assume there's maximally only 1 open
-    if(this.#isOpen()) {
+    if(this.isOpen()) {
       if (e.key === 'Escape' || e.key === 'Esc') {
         this.closePopover();
         this.setFocusToToggleElement()
@@ -372,42 +338,7 @@ export class Popover {
   }
 
   setFocusToToggleElement() {
-    this.element.firstElementChild.assignedElements()[0].focus()
+    this.toggle.focus()
   }
 
-  /**
-   * Handles global click events, triggered outside of the popover.
-   * It's tediously complicated :-(
-   */
-  handleClickGlobal(e) {
-    if (!this.container) return;
-
-    if (this.#isOpen()) {
-
-      // this is the whole popover area
-      // we're in shadow DOM. test if element containing content is in also in shadow or in light DOM
-      const content = this.container.querySelector("slot[name=content]")
-      const cond1 = content ? content.assignedElements()[0].contains(e.target) : this.container.querySelector(".ewc-popover__content").contains(e.target)
-
-      // this is the designated element to toggle the popover
-      const cond2 = e.target === this.toggle || e.target === this.toggle.firstElementChild
-
-      // this is the custom property itself
-      // also include derived classes
-      const cond3 = e.target.nodeName.slice(0, 11)==="EWC-POPOVER" 
-
-      // this is the element inside the content area with which it should be closed
-      // close when such an element was clicked
-      const cond4 = e.target.hasAttribute("data-ewc-popover-close")
-
-      //console.log(!cond2,cond3,cond1,cond4)
-
-      // close if anything other than the popover was clicked
-      if(!cond2 && !cond3 && (!cond1 || cond4)) {
-        e.preventDefault()
-        e.stopImmediatePropagation()
-        this.closePopover();
-      }
-    }
-  }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ewc-lib/ewc-popovers",
   "description": "Monorepo for EWCL popover WebComponents",
   "//": "please always keep version in sync with version info in the sourcecode",
-  "version": "2.0.4-beta",
+  "version": "2.1.0-alpha",
   "workspaces": [
     "ewc-popover",
     "ewc-popover-sharing"

package/readme.md

@@ -118,3 +118,12 @@ Before the 2 popover components were grouped together into this monorepo, they e
 
 - 2.0.4-beta
   - fix opener bug for X
+
+- 2.0.4
+  - drop beta
+
+- 2.0.5-alpha
+  - consolidation of development workflow
+
+- 2.1.0-alpha
+  - use a child's optional "tooltip-suppressed" functionality