Add new version with id support

README.md

@@ -49,13 +49,14 @@ These are all the options you can use in the constructor:
 
 ```js
 new HelloBar({
+  id: "", // A unique ID for this hello bar content (required for targeting)
   text: "", // Text you want the banner to display
   hideClose: false, // Set to `true` to hide close button
   position: "top", // Set to "bottom" to have the bar in the bottom instead of top
   fixed: false, // Set to `true` to set the position as fixed (on scroll)
   move: null, // Element(s) to force add margin-top to, in case you have any absolutely positioned elements
-  duration: 500, // Animation duration in miliseconds
-  delay: 1, // Delay in miliseconds
+  duration: 500, // Animation duration in ms
+  delay: 1, // Delay in ms
   align: "center", // Text alignment in CSS ("left", "right", or "center")
   background: "#eee", // Background color
   textColor: null, // Black or white text is automagically determined; you can specify a color if you like

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hello-bar",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "build/index.js",
   "scripts": {
     "start": "node scripts/start.js",

src/docs/App.js

@@ -12,6 +12,7 @@ const multiLineText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 class App {
   constructor() {
     this.libInstance = new Lib({
+      id: "github",
       text: checkOutText,
       background: "#5352ed",
       size: "large",
@@ -27,6 +28,7 @@ class App {
           case "cookie-law-1":
             setTimeout(() => {
               this.libInstance = new Lib({
+                id: "eu",
                 text: euText,
                 position: "bottom",
                 fixed: true
@@ -37,6 +39,7 @@ class App {
           case "cookie-law-2":
             setTimeout(() => {
               this.libInstance = new Lib({
+                id: "eu-2",
                 text: euText,
                 targeting: {
                   location: {
@@ -50,6 +53,7 @@ class App {
           case "multiline":
             setTimeout(() => {
               this.libInstance = new Lib({
+                id: "multiline",
                 text: multiLineText,
                 multiline: true
               });
@@ -59,6 +63,7 @@ class App {
           case "evening":
             setTimeout(() => {
               this.libInstance = new Lib({
+                id: "evening",
                 text: eveningText,
                 background: "#000",
                 targeting: {
@@ -75,6 +80,7 @@ class App {
           case "random":
             setTimeout(() => {
               this.libInstance = new Lib({
+                id: "a-b-test",
                 text: randomText,
                 background: "#e24331",
                 size: "large"
@@ -85,6 +91,7 @@ class App {
           default:
             setTimeout(() => {
               this.libInstance = new Lib({
+                id: "github",
                 text: checkOutText,
                 background: "#5352ed",
                 size: "large"

src/lib/App.js

@@ -22,6 +22,7 @@ class App {
       Math.random()
         .toString(36)
         .substr(2);
+    if (this.settings.id) this.id = this.settings.id;
     this.bar = document.createElement("div");
     this.bar.setAttribute("id", this.id);
     if (typeof this.settings.text === "object") {
@@ -96,11 +97,11 @@ class App {
     return new Promise((resolve, reject) => {
       const finishConfirmation = () => {
         if (this.settings.targeting.once) {
-          if (sessionStorage.getItem("hello-bar--session-showed"))
+          if (sessionStorage.getItem(`hello-bar-${this.id}--session-showed`))
             return reject();
         }
         if (this.settings.targeting.onceUser) {
-          if (localStorage.getItem("hello-bar--user-showed")) return reject();
+          if (localStorage.getItem(`hello-bar-${this.id}--user-showed`)) return reject();
         }
         if (Object.keys(this.settings.targeting.time).length) {
           const timeMatches = {
@@ -197,8 +198,8 @@ class App {
   hideBar() {
     if (!document.querySelector(`#${this.id}`)) return;
     this.bar.classList.remove("hello-bar--is-visible");
-    sessionStorage.setItem("hello-bar--session-showed", true);
-    localStorage.setItem("hello-bar--user-showed", true);
+    sessionStorage.setItem(`hello-bar-${this.id}--session-showed`, true);
+    localStorage.setItem(`hello-bar-${this.id}--user-showed`, true);
     this.unMove();
     setTimeout(() => {
       this.bar.parentNode.removeChild(this.bar);