From cfadc6c2666a20fa7cc3db17d8a2e6bf944756ea Mon Sep 17 00:00:00 2001 From: Islam Attrash Date: Sun, 27 Jan 2019 13:22:54 +0200 Subject: [PATCH] [FEATURE] Adding Scoped classNames in Driver and Popover level (#138) This PR is related to adding scoped classNames into the driver-popover-item. I temporary wrapped it in a React Component which handles this isolation in order to protect from getting to the style css collision problem since the selectors are shared between all usages. You can specifiy the className in the Driver instance options and at the popover options level. classNames of popover will be merged with the general driver className if exist. --- demo/index.html | 17 ++++++++++------- demo/scripts/demo.js | 4 +++- readme.md | 3 +++ src/common/constants.js | 4 ++-- src/core/popover.js | 2 +- src/index.js | 6 ++++++ 6 files changed, 25 insertions(+), 11 deletions(-) diff --git a/demo/index.html b/demo/index.html index 1d5d941..91881c8 100644 --- a/demo/index.html +++ b/demo/index.html @@ -208,6 +208,7 @@ driver.defineSteps([ { element: '#first-element-introduction', popover: { + className: 'first-step-popover-class', title: 'Title on Popover', description: 'Body of the popover', position: 'left' @@ -273,6 +274,7 @@ driver.highlight({

Driver Definition

Here are the options that Driver understands

const driver = new Driver({
+  className: 'scoped-class', // className to wrap driver.js popover
   animate: true,  // Animate while changing highlighted element
   opacity: 0.75,  // Background opacity (0 means only popovers and without overlay)
   padding: 10,    // Distance of element from around the edges
@@ -301,14 +303,15 @@ driver.highlight({
       
Here are the set of options that you can pass in each step i.e. an item in array of steps or the object that
         you pass to highlight method

       
const stepDefinition = {
-  element: '#some-item',  // Query selector string or Node to be highlighted
-  popover: {              // There will be no popover if empty or not given
-    title: 'Title',       // Title on the popover
+  element: '#some-item',        // Query selector string or Node to be highlighted
+  popover: {                    // There will be no popover if empty or not given
+    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
+    title: 'Title',             // Title on the popover
     description: 'Description', // Body of the popover
-    showButtons: false,      // Do not show control buttons in footer
-    closeBtnText: 'Close',   // Text on the close button for this step
-    nextBtnText: 'Next',     // Next button text for this step
-    prevBtnText: 'Previous', // Previous button text for this step
+    showButtons: false,         // Do not show control buttons in footer
+    closeBtnText: 'Close',      // Text on the close button for this step
+    nextBtnText: 'Next',        // Next button text for this step
+    prevBtnText: 'Previous',    // Previous button text for this step
   }
 };
 

diff --git a/demo/scripts/demo.js b/demo/scripts/demo.js
index 9883e01..3305e78 100644
--- a/demo/scripts/demo.js
+++ b/demo/scripts/demo.js
@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', function () {
     {
       element: document.getElementById('driver-demo-head'),
       popover: {
+        className: 'scoped-driver-popover',
         title: 'Before we start',
         description: 'This is just one use-case, make sure to check out the rest of the docs below.',
         nextBtnText: 'Okay, Start!',
@@ -101,7 +102,8 @@ document.addEventListener('DOMContentLoaded', function () {
     animate: false,
     opacity: 0.8,
     padding: 5,
-    showButtons: true
+    showButtons: true,
+    className: 'boring-scope'
   });
 
   boringTourDriver.defineSteps(tourSteps);
diff --git a/readme.md b/readme.md
index 375ed6b..8e13b1c 100644
--- a/readme.md
+++ b/readme.md
@@ -146,6 +146,7 @@ driver.defineSteps([
   {
     element: '#first-element-introduction',
     popover: {
+      className: 'first-step-popover-class',
       title: 'Title on Popover',
       description: 'Body of the popover',
       position: 'left'
@@ -238,6 +239,7 @@ Here are the options that Driver understands:
 
 ```javascript
 const driver = new Driver({
+  className: 'scoped-class',        // className to wrap driver.js popover
   animate: true,                    // Whether to animate or not
   opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
   padding: 10,                      // Distance of element from around the edges
@@ -270,6 +272,7 @@ const stepDefinition = {
   element: '#some-item',        // Query selector string or Node to be highlighted
   stageBackground: '#ffffff',   // This will override the one set in driver
   popover: {                    // There will be no popover if empty or not given
+    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
     title: 'Title',             // Title on the popover
     description: 'Description', // Body of the popover
     showButtons: false,         // Do not show control buttons in footer
diff --git a/src/common/constants.js b/src/common/constants.js
index f42a081..82c9116 100644
--- a/src/common/constants.js
+++ b/src/common/constants.js
@@ -32,8 +32,8 @@ export const CLASS_BTN_DISABLED = 'driver-disabled';
 export const ANIMATION_DURATION_MS = 400;
 
 // language=HTML
-export const POPOVER_HTML = `
-  

+export const POPOVER_HTML = (className = '') => `
+  

     

     
Popover Title

     
Popover Description

diff --git a/src/core/popover.js b/src/core/popover.js
index fe1feb4..0c4bb10 100644
--- a/src/core/popover.js
+++ b/src/core/popover.js
@@ -54,7 +54,7 @@ export default class Popover extends Element {
   attachNode() {
     let popover = this.document.getElementById(ID_POPOVER);
     if (!popover) {
-      popover = createNodeFromString(POPOVER_HTML);
+      popover = createNodeFromString(POPOVER_HTML(this.options.className));
       document.body.appendChild(popover);
     }
 
diff --git a/src/index.js b/src/index.js
index f63de10..42c54fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -370,9 +370,15 @@ export default class Driver {
 
     let popover = null;
     if (elementOptions.popover && elementOptions.popover.title) {
+      const mergedClassNames = [
+        this.options.className,
+        elementOptions.popover.className,
+      ].filter(c => c).join(' ');
+
       const popoverOptions = {
         ...this.options,
         ...elementOptions.popover,
+        className: mergedClassNames,
         totalCount: allSteps.length,
         currentIndex: index,
         isFirst: index === 0,