@ewc-lib/ewc-dialog-feedback - npm Package Compare versions

Comparing version 2.0.1-alpha to 3.0.0-alpha

package.json

 {
   "name": "@ewc-lib/ewc-dialog-feedback",
-  "version": "2.0.1-alpha",
+  "version": "3.0.0-alpha",
   "description": "",
@@ -14,4 +14,5 @@ "main": "src/main.js",
   "dependencies": {
+    "@ewc-lib/ewc-css": "^0.11.0",
     "@ewc-lib/ewc-dialog": "^2.0.1-alpha"
   }
 }

readme.md

@@ -5,9 +5,12 @@ # Screenshot
 
-- This component is supposed to be shown after page load until a given date.
-- The user can stop this component from being shown by
-  - either clicking on "Go to survey"
-  - or ticking the checkbox and clicking "No thanks"
+- This component is supposed to be shown after page load until a given date
+- The user can stop this component from being shown by ticking a checkbox
 - The information if it should be shown or not is stored in a cookie
-- Note that this component comes with predefined title and body text.
+- Multiple periods can be specified
 
+Notes 
+
+- this component comes with predefined title and body text
+- maximal 1 instance is supported
+
 # API
@@ -19,9 +22,37 @@
 
-- **cookieName** - name of the cookie
-- **cookiePath** - path of the cookie
-- **expiryutc** - the dialog is shown only before this time (see example below for a UTC time string)
-- **url** - opened in another tab when clicking "Go to survey" button
+- **configUrl** - URL to a raw text file containing a JSON string
+- **configString** - config as a JSON string
+  - Note: configString has precedence in case both are given
+- **titleText** - a string. Default: "Your feedback wanted"
+- **messageHtml** - a string containing html markup. Also has a default.
 
-Note that the attribs are applied only initially - changing them at runtime has no effect.
+Note: The attribs are applied only initially - changing them at runtime has no effect.
 
+## config string example
+
+    {
+      "cookieName": "eurostat-dashboards-survey",
+      "cookiePath": "/eurostat/cache",
+      "participationUrl": "https://ec.europa.eu/eusurvey/runner/dashboards_feedback",
+      "activationPeriods": [
+        {
+          "activeFrom": "2024-10-18 10:00",
+          "activeUntil": "2024-10-24 14:00",
+          "cookieExpiryDate": "2024-10-25"
+        },
+        {
+          "activeFrom": "2024-11-20 10:00",
+          "activeUntil": "2024-11-26 14:00",
+          "cookieExpiryDate": "2024-11-27"
+        },
+        {
+          "activeFrom": "2024-12-18 10:00",
+          "activeUntil": "2024-12-24 14:00",
+          "cookieExpiryDate": "2024-12-25"
+        }
+      ]
+    }
+
+Note: the user has to make sure the cookie expiry date of one period lies before the start of the next period
+
 # Usage with WebPack
@@ -32,3 +63,3 @@
     "dependencies": {
-      "@ewc-lib/ewc-dialog-feedback": "^0.1.0"
+      "@ewc-lib/ewc-dialog-feedback": "^SOMEVERSION"
     },
@@ -39,13 +70,8 @@
 
-    import "@ewc-lib/ewc-css/ewc.css"
     import "@ewc-lib/ewc-dialog-feedback"
 
-
 ## index.html
 
-    <ewc-dialog-feedback 
-      cookieName="mySurvery" 
-      cookiePath="/" 
-      expiryutc="2525-01-01T12:53:00Z" 
-      url="https://ec.europa.eu">
+    <ewc-dialog-feedback
+      configUrl="https://ec.europa.eu/eurostat/cache/dashboard/_configuration/survey-popup-settings.json"
     </ewc-dialog-feedback>

src/cookie.js

 export default class Cookie {
 	static name
-	static expiry=new Date(Date.now() + (3600 * 1000 * 24))
+	static expiry
   static path
 
-	static set() {
-		const str = `${Cookie.name}=viewed; expires=${Cookie.expiry.toUTCString()}; path=${Cookie.path}; secure`
+	static set(status) {
+		const str = `${Cookie.name}=${status}; expires=${Cookie.expiry.toUTCString()}; path=${Cookie.path}; secure`
 		document.cookie = str
 	}
 
-	static get() {
+	static getValue() {
 		if (document.cookie.length > 0) {
-			let startPosition = document.cookie.indexOf(this.name)
+			let startPosition = document.cookie.indexOf(Cookie.name)
 			if (startPosition !== -1) {
-				startPosition += this.name.length + 1
+				startPosition += Cookie.name.length + 1
 				let endPosition = document.cookie.indexOf(';', startPosition)
@@ -23,2 +23,4 @@ if (endPosition === -1) { endPosition = document.cookie.length }
 	}
+
+
 }

src/html.js

 // all HTML as JS string
 
 
-export function body() {
+export function getDefaultTitle() {
+	return "Your feedback wanted"
+}
+
+export function getDefaultMessageAsHtmlString() {
 	return `
 <p>Have you looked at any of our dashboards? We'd like to hear from you and get your feedback about them.</p>
-<p>Please fill out our short, anonymous survey and participate.</p>
+<p>Please fill out our short, anonymous survey and participate.</p>`
+}
+
+export function body(message) {
+	return `
+	${message}
 <p>
@@ -14,3 +23,3 @@ <input class="ewc-dialog-feedback__checkbox" type="checkbox"/>
 
-export function footer(assetBaseUrl = "./assets") {
+export function footer() {
   return getTemplateTag(`
@@ -22,6 +31,6 @@ <footer class="ewc-dialog__footer">
 			Go to survey
-			<img class="ewc-dialog-feedback__close-btn--image" 
-			focusable="false" aria-hidden="true" 
-			src="${assetBaseUrl}/corner-arrow.svg"/>
-		</button>
+			<svg class="ewc-dialog-feedback__close-btn--image" focusable="false" aria-hidden="true">
+				<use href="#corner-arrow"></use>
+			</svg>
+			</button>
 	</div>
@@ -31,2 +40,10 @@ </footer>
 
+export function getSvg() {
+  return getTemplateTag(`
+  <svg style="display: none;">
+    <symbol id="corner-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill-rule="evenodd" d="m45 33.12-2.73 2.82-18.24-18.36L5.73 36 3 33.18 24.03 12z"/></symbol>
+  </svg>
+`)}
+
+
 // helper
@@ -33,0 +50,0 @@ function getTemplateTag(source) {

src/main.js

 import * as HTML from  "./html.js"		// keep this file html free
 import CSS from  "./css.js"					// keep this file css free
 import Cookie from "./cookie.js"
-
 import Dialog from "../../ewc-dialog/src/main.js"
 
 
+const STATUS = {
+	stopped: "stopped",		// checkbox is checked and any button is clicked. doesn't show anymore.
+	viewed: "viewed"			// checkbox not checked and "go to survey" clicked. shows again on next load.
+}
+
+// expirySetter = any object having a "expiry" property
+function currentDateIsWithinATimespan(periods, expirySetter) {
+	const now = Date.now()
+	for (const p of periods) { 
+		const a = Date.parse(p.activeFrom)
+		const b = Date.parse(p.activeUntil)
+		if(now>a && now<b) {
+			expirySetter.expiry = new Date(p.cookieExpiryDate)
+			return true
+		}
+	}
+	return false
+}
+
+function isAffirmativeStatus(status) {
+	return status !== STATUS.stopped
+}
+
 class Element extends Dialog {
@@ -14,14 +36,39 @@
 	#checkbox
+	#participationUrl
+	#messageHtml
 
 	constructor() {
 		super()
+		this.#messageHtml = this.hasAttribute("messageHtml") ? this.getAttribute("messageHtml") : HTML.getDefaultMessageAsHtmlString()
 	}
+
+	getCfg() {
+		if(this.hasAttribute("configString")) {
+			return new Promise((resolve,reject) => {
+				resolve( JSON.parse( this.getAttribute("configString") ) )
+			})
+		}
+		if(this.hasAttribute("configUrl")) {
+			return fetch(this.getAttribute("configUrl")).then(response => response.json())
+		}
+		console.error("ewc-dialog-feedback: no config provided")
+	}
 	
 	connectedCallback() {
-		this.#initCookie()
-		if( this.#isInitialized || Cookie.get() || Cookie.expiry<Date.now() ) { return }
-
+		try {
+			this.getCfg().then(cfg=>this.#init(cfg))
+		} catch(e) {
+			console.error("ewc-dialog-feedback: error requesting or parsing config as JSON")
+		}
+	}
+	
+	#init(cfg) {
+		this.#initCookie(cfg)
+		if( this.#isInitialized || !cfg || !isAffirmativeStatus( Cookie.getValue() )
+			 || !currentDateIsWithinATimespan(cfg.activationPeriods, Cookie)) { 
+			return 
+		}
 		this.#isInitialized=true 
+		this.#participationUrl = cfg.participationUrl
 		super.connectedCallback()
-
 		this.#createElements()
@@ -44,6 +91,7 @@ this.#modifyParent()
 
-	#initCookie() {
-		Cookie.name = this.getAttribute("cookiename")
-		Cookie.expiry = new Date(this.getAttribute("expiryutc"))
-		Cookie.path = this.getAttribute("cookiepath")
+	#initCookie(cfg) {
+		if(cfg) {
+			Cookie.name = cfg.cookieName
+			Cookie.path = cfg.cookiePath
+		}
 	}
@@ -53,4 +101,4 @@
 		this.appendChild(CSS())
-		super.title = "Your feedback wanted"
-		super.bodyHtml = HTML.body()
+		const msg = this.hasAttribute("messageHtml") ? this.getAttribute("messageHtml") : HTML.getDefaultMessageAsHtmlString()
+		super.bodyHtml = HTML.body(msg)
 	}
@@ -61,3 +109,4 @@
 		this.querySelector(".ewc-dialog__header").classList.add("ewc-dialog-feedback__title--alt1")
-		this.querySelector(".ewc-dialog__content").appendChild(HTML.footer(this.getAttribute("assetBaseURL") ?? undefined))
+		this.querySelector(".ewc-dialog__content").appendChild(HTML.footer())
+		super.title = this.hasAttribute("titleText") ? this.getAttribute("titleText") : HTML.getDefaultTitle()
 	}
@@ -77,9 +126,9 @@
 	#yesSelected() {
-		Cookie.set()
+		Cookie.set(this.#checkbox.checked ? STATUS.stopped : STATUS.viewed)
 		this.visible = false
-		window.open(this.getAttribute("url"))
+		window.open(this.#participationUrl)
 	}
 
 	#noSelected() {
-		if(this.#checkbox.checked) { Cookie.set() }
+		Cookie.set(this.#checkbox.checked ? STATUS.stopped : STATUS.viewed)
 		this.visible = false
@@ -86,0 +135,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

219

increased by37.74%

Number of lines in readme file

74

increased by54.17%

Worsened metrics

Total package byte prevSize

42859

decreased by-16.07%

Dependency count

2

increased by100%

Number of package files

8

decreased by-11.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@ewc-lib/ewc-css@^0.11.0

• + Added@ewc-lib/ewc-css@0.11.0(transitive)