Switch modals from ids to classes and prefix them

Fixes #455 Fixes #456
shipshapecode · Jul 26, 2019 · 5ef4289 · 5ef4289
1 parent 00807c6
commit 5ef4289
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 62 deletions.
diff --git a/src/js/components/shepherd-modal/index.jsx b/src/js/components/shepherd-modal/index.jsx
@@ -10,6 +10,8 @@ export default class ShepherdModal extends Component {
 
     this._onScreenChange = null;
 
+    this.classPrefix = props.classPrefix;
+
     autoBind(this);
 
     // Setup initial state
@@ -22,24 +24,25 @@ export default class ShepherdModal extends Component {
   }
 
   render(props, state) {
+    const { classPrefix, styles } = props;
     return <svg
-      id='shepherdModalOverlayContainer'
+      className={styles['modal-overlay-container']}
       onTouchMove={ShepherdModal._preventModalOverlayTouch}
       style={state.style}
     >
       <defs>
         <mask height='100%' id='shepherdModalMask' width='100%' x='0' y='0'>
           <rect
+            className={styles['modal-mask-rect']}
             fill='#FFFFFF'
             height='100%'
-            id='shepherdModalMaskRect'
             width='100%'
             x='0'
             y='0'
           />
           <rect
+            className={`${classPrefix}shepherd-modal-mask-opening`}
             fill='#000000'
-            id='shepherdModalMaskOpening'
             height={state.openingProperties.height}
             x={state.openingProperties.x}
             y={state.openingProperties.y}
@@ -66,7 +69,7 @@ export default class ShepherdModal extends Component {
    * Hide the modal overlay
    */
   hide() {
-    document.body.classList.remove('shepherd-modal-is-visible');
+    document.body.classList.remove(`${this.classPrefix}shepherd-modal-is-visible`);
 
     this.setState({
       style: {
@@ -120,7 +123,7 @@ export default class ShepherdModal extends Component {
    * Show the modal overlay
    */
   show() {
-    document.body.classList.add('shepherd-modal-is-visible');
+    document.body.classList.add(`${this.classPrefix}shepherd-modal-is-visible`);
 
     this.setState({
       style: {

diff --git a/src/js/components/shepherd-modal/styles.js b/src/js/components/shepherd-modal/styles.js
@@ -0,0 +1,20 @@
+export default function modalStyles() {
+  return {
+    'modal-overlay-container': {
+      '-ms-filter': 'progid:dximagetransform.microsoft.gradient.alpha(Opacity=50)',
+      filter: 'alpha(opacity=50)',
+      height: '100vh',
+      left: 0,
+      opacity: 0.5,
+      position: 'fixed',
+      top: 0,
+      transition: 'all 0.3s ease-out',
+      width: '100vw',
+      zIndex: 9997
+    },
+    'modal-mask-rect': {
+      height: '100vh',
+      width: '100vw'
+    }
+  };
+}
diff --git a/src/js/step.jsx b/src/js/step.jsx
@@ -344,7 +344,7 @@ export class Step extends Evented {
       return;
     }
 
-    toggleShepherdModalClass(targetElement);
+    toggleShepherdModalClass(targetElement, step.classPrefix);
 
     if (step.options.highlightClass) {
       targetElement.classList.add(step.options.highlightClass);

diff --git a/src/js/styles/generateStyles.js b/src/js/styles/generateStyles.js
@@ -7,6 +7,7 @@ import contentStyles from '../components/shepherd-content/styles';
 import elementStyles from '../components/shepherd-element/styles';
 import footerStyles from '../components/shepherd-content/shepherd-footer/styles';
 import headerStyles from '../components/shepherd-content/shepherd-header/styles';
+import modalStyles from '../components/shepherd-modal/styles';
 import textStyles from '../components/shepherd-content/shepherd-text/styles';
 
 export function generateStyles(options) {
@@ -36,6 +37,7 @@ export function generateStyles(options) {
     ...elementStyles(),
     ...footerStyles(classPrefix, variables),
     ...headerStyles(classPrefix, variables),
+    ...modalStyles(),
     ...textStyles(variables)
   };
 
@@ -112,28 +114,5 @@ export function generateStyles(options) {
     }
   }, `${classPrefix}shepherd`);
 
-  _addModalStyles(put);
-
   return classes;
 }
-
-function _addModalStyles(put) {
-  put('#shepherdModalOverlayContainer', {
-    '-ms-filter': 'progid:dximagetransform.microsoft.gradient.alpha(Opacity=50)',
-    filter: 'alpha(opacity=50)',
-    height: '100vh',
-    left: 0,
-    opacity: 0.5,
-    position: 'fixed',
-    top: 0,
-    transition: 'all 0.3s ease-out',
-    width: '100vw',
-    zIndex: 9997,
-    '#shepherdModalMask': {
-      '#shepherdModalMaskRect': {
-        height: '100vh',
-        width: '100vw'
-      }
-    }
-  });
-}
diff --git a/src/js/tour.jsx b/src/js/tour.jsx
@@ -70,8 +70,16 @@ export class Tour extends Evented {
       })(event);
     });
 
-    const existingModal = document.getElementById('shepherdModalOverlayContainer');
-    render(<ShepherdModal ref={(c) => this.modal = c}/>, document.body, existingModal);
+    const existingModal = document.querySelector(`.${this.classPrefix}shepherd-modal-overlay-container`);
+    render(
+      <ShepherdModal
+        classPrefix={this.classPrefix}
+        ref={(c) => this.modal = c}
+        styles={this.styles}
+      />,
+      document.body,
+      existingModal
+    );
 
     this._setTooltipDefaults();
     this._setTourID();

diff --git a/src/js/utils/modal.jsx b/src/js/utils/modal.jsx
@@ -1,15 +1,17 @@
 /**
  * Remove any leftover modal target classes and add the modal target class to the currentElement
  * @param {HTMLElement} currentElement The element for the current step
+ * @param {string} classPrefix The prefix to add to the class name
  */
-function toggleShepherdModalClass(currentElement) {
-  const shepherdModal = document.querySelector('shepherd-modal-target');
+function toggleShepherdModalClass(currentElement, classPrefix) {
+  debugger;
+  const shepherdModalTarget = document.querySelector(`.${classPrefix}shepherd-modal-target`);
 
-  if (shepherdModal) {
-    shepherdModal.classList.remove('shepherd-modal-target');
+  if (shepherdModalTarget) {
+    shepherdModalTarget.classList.remove(`${classPrefix}shepherd-modal-target`);
   }
 
-  currentElement.classList.add('shepherd-modal-target');
+  currentElement.classList.add(`${classPrefix}shepherd-modal-target`);
 }
 
 export {

diff --git a/test/cypress/integration/modal.spec.js b/test/cypress/integration/modal.spec.js
@@ -33,7 +33,7 @@ describe('Modal mode', () => {
     it('Displaying the modal during tours when modal mode is enabled', () => {
       tour.start();
 
-      cy.get('#shepherdModalOverlayContainer').should('have.css', 'display', 'block');
+      cy.get('.shepherd-modal-overlay-container').should('have.css', 'display', 'block');
       cy.get('body').should('have.class', 'shepherd-modal-is-visible');
     });
   });
@@ -48,7 +48,7 @@ describe('Modal mode', () => {
     it('Hiding the modal during tours when modal mode is not enabled', () => {
       tour.start();
 
-      cy.get('#shepherdModalOverlayContainer').should('have.css', 'display', 'none');
+      cy.get('shepherd-modal-overlay-container').should('have.css', 'display', 'none');
       cy.get('body').should('not.have.class', 'shepherd-modal-is-visible');
     });
   });

diff --git a/test/unit/components/shepherd-modal.spec.js b/test/unit/components/shepherd-modal.spec.js
@@ -22,29 +22,29 @@ describe('components/ShepherdModal', () => {
 
       modalComponent.rerender();
 
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('height')).to.equal(250);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('x')).to.equal(20);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('y')).to.equal(20);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('width')).to.equal(500);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('height')).to.equal(250);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('x')).to.equal(20);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('y')).to.equal(20);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('width')).to.equal(500);
 
       modalComponent.component().closeModalOpening();
       modalComponent.rerender();
 
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('height')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('x')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('y')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('width')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('height')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('x')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('y')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('width')).to.equal(0);
     });
   });
 
   describe('positionModalOpening()', function() {
     it('sets the correct attributes when positioning modal opening', () => {
       const modalComponent = shallow(<ShepherdModal/>);
 
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('height')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('x')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('y')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('width')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('height')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('x')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('y')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('width')).to.equal(0);
 
       modalComponent.component().positionModalOpening({
         getBoundingClientRect() {
@@ -59,19 +59,19 @@ describe('components/ShepherdModal', () => {
 
       modalComponent.rerender();
 
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('height')).to.equal(250);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('x')).to.equal(20);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('y')).to.equal(20);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('width')).to.equal(500);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('height')).to.equal(250);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('x')).to.equal(20);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('y')).to.equal(20);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('width')).to.equal(500);
     });
 
     it('sets the correct attributes with padding', () => {
       const modalComponent = shallow(<ShepherdModal/>);
 
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('height')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('x')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('y')).to.equal(0);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('width')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('height')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('x')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('y')).to.equal(0);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('width')).to.equal(0);
 
       modalComponent.component().positionModalOpening({
         getBoundingClientRect() {
@@ -86,10 +86,10 @@ describe('components/ShepherdModal', () => {
 
       modalComponent.rerender();
 
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('height')).to.equal(270);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('x')).to.equal(10);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('y')).to.equal(10);
-      expect(modalComponent.find('#shepherdModalMaskOpening').attr('width')).to.equal(520);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('height')).to.equal(270);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('x')).to.equal(10);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('y')).to.equal(10);
+      expect(modalComponent.find('.shepherd-modal-mask-opening').attr('width')).to.equal(520);
     });
   });