ghosh · fromaline · Oct 23, 2020 · Oct 23, 2020 · Oct 23, 2020
diff --git a/README.md b/README.md
@@ -47,6 +47,8 @@ The aim of this library is to make modal dialogs accessible and easy to include
 
 ✔ Retains the focused element state after closing the modal
 
+✔ Shows modal on page load if its id specified in URL
+
 &nbsp;
 
 ## Installation

diff --git a/docs/src/index.html b/docs/src/index.html
@@ -53,6 +53,7 @@
 
 
 </head>
+
 <body class="js-body sans-serif bg-white-20 bt bw3">
 
   <div class="center cf ph3 mw6 mw7-l">
@@ -68,7 +69,7 @@
         </svg>
       </div>
 
-    <!-- <div class=lh-copy">
+      <!-- <div class=lh-copy">
       <a
         href="https://github.com/ghosh/micromodal"
         target="_blank"
@@ -386,20 +387,23 @@ <h2 class="f3 fw6 lh-title mt5 mb4 black heading" id="configuration">
   awaitOpenAnimation: false, // [8]
   awaitCloseAnimation: false, // [9]
   debugMode: true // [10]
+  showModalFromURL: false // [11]
 });
         </code></pre>
 
         <ul class="ordered lh-copy pl0 mv4">
           <li class="pl4 pv3">
             <strong class="fw5">onShow</strong> <code>function</code>
             <p>
-              This is fired when the modal is opening. The function receives the modal object as the first parameter and the trigger element as second parameter
+              This is fired when the modal is opening. The function receives the modal object as the first parameter and
+              the trigger element as second parameter
             </p>
           </li>
           <li class="pl4 pv3">
             <strong class="fw5">onClose</strong> <code>function</code>
             <p>
-              This is fired when the modal is closing. The function receives the modal object as the first parameter and the trigger element as second parameter
+              This is fired when the modal is closing. The function receives the modal object as the first parameter and
+              the trigger element as second parameter
             </p>
           </li>
           <li class="pl4 pv3">
@@ -435,7 +439,8 @@ <h2 class="f3 fw6 lh-title mt5 mb4 black heading" id="configuration">
           <li class="pl4 pv3">
             <strong class="fw5">awaitOpenAnimation</strong> <code>boolean</code>
             <p>
-              Set this to <code>true</code> if using css animations to open the modal. This allows it to wait for the animation to finish before focusing on an element inside the modal. Default is <code>false</code>
+              Set this to <code>true</code> if using css animations to open the modal. This allows it to wait for the
+              animation to finish before focusing on an element inside the modal. Default is <code>false</code>
             </p>
           </li>
           <li class="pl4 pv3">
@@ -453,6 +458,16 @@ <h2 class="f3 fw6 lh-title mt5 mb4 black heading" id="configuration">
               <code>false</code>
             </p>
           </li>
+          <li class="pl4 pv3">
+            <strong class="fw5">showModalFromURL</strong> <code>boolean</code>
+            <p>
+              If this option is <code>true</code> and hash specified in the URL is id of some initialized modal, the
+              modal
+              will be shown on page load. The default value is
+              <code>false</code> <br>
+              Add <code>#modal-1</code> hash in URL and reload to test it out!
+            </p>
+          </li>
         </ul>
 
         <h2 class="f3 fw6 lh-title mt5 mb4 black heading" id="styling">

diff --git a/docs/src/scripts/index.js b/docs/src/scripts/index.js
@@ -5,7 +5,8 @@ import './prism'
 MicroModal.init({
   openTrigger: 'data-custom-open',
   disableScroll: false,
-  awaitCloseAnimation: true
+  awaitCloseAnimation: true,
+  showModalFromURL: true
 })
 
 // Programmatically show modal

diff --git a/lib/src/index.js b/lib/src/index.js
@@ -17,7 +17,7 @@ const MicroModal = (() => {
 
   class Modal {
     constructor ({
-      targetModal,
+      targetModalId,
       triggers = [],
       onShow = () => { },
       onClose = () => { },
@@ -28,13 +28,14 @@ const MicroModal = (() => {
       disableFocus = false,
       awaitCloseAnimation = false,
       awaitOpenAnimation = false,
-      debugMode = false
+      debugMode = false,
+      showModalFromURL = false
     }) {
       // Save a reference of the modal
-      this.modal = document.getElementById(targetModal)
+      this.modal = document.getElementById(targetModalId)
 
       // Save a reference to the passed config
-      this.config = { debugMode, disableScroll, openTrigger, closeTrigger, openClass, onShow, onClose, awaitCloseAnimation, awaitOpenAnimation, disableFocus }
+      this.config = { debugMode, disableScroll, openTrigger, closeTrigger, openClass, onShow, onClose, awaitCloseAnimation, awaitOpenAnimation, disableFocus, showModalFromURL }
 
       // Register click events only if pre binding eventListeners
       if (triggers.length > 0) this.registerTriggers(...triggers)
@@ -86,7 +87,7 @@ const MicroModal = (() => {
       this.config.onClose(this.modal, this.activeElement, event)
 
       if (this.config.awaitCloseAnimation) {
-        let openClass = this.config.openClass // <- old school ftw
+        const openClass = this.config.openClass // <- old school ftw
         this.modal.addEventListener('animationend', function handler () {
           modal.classList.remove(openClass)
           modal.removeEventListener('animationend', handler, false)
@@ -96,8 +97,8 @@ const MicroModal = (() => {
       }
     }
 
-    closeModalById (targetModal) {
-      this.modal = document.getElementById(targetModal)
+    closeModalById (targetModalId) {
+      this.modal = document.getElementById(targetModalId)
       if (this.modal) this.closeModal()
     }
 
@@ -235,7 +236,7 @@ const MicroModal = (() => {
   const validateModalPresence = id => {
     if (!document.getElementById(id)) {
       console.warn(`MicroModal: \u2757Seems like you have missed %c'${ id }'`, 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'ID somewhere in your code. Refer example below to resolve it.')
-      console.warn(`%cExample:`, 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', `<div class="modal" id="${ id }"></div>`)
+      console.warn('%cExample:', 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', `<div class="modal" id="${ id }"></div>`)
       return false
     }
   }
@@ -248,8 +249,8 @@ const MicroModal = (() => {
    */
   const validateTriggerPresence = triggers => {
     if (triggers.length <= 0) {
-      console.warn(`MicroModal: \u2757Please specify at least one %c'micromodal-trigger'`, 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'data attribute.')
-      console.warn(`%cExample:`, 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', `<a href="#" data-micromodal-trigger="my-modal"></a>`)
+      console.warn('MicroModal: \u2757Please specify at least one %c"micromodal-trigger"', 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', 'data attribute.')
+      console.warn('%cExample:', 'background-color: #f8f9fa;color: #50596c;font-weight: bold;', '<a href="#" data-micromodal-trigger="my-modal"></a>')
       return false
     }
   }
@@ -288,25 +289,39 @@ const MicroModal = (() => {
 
     // For every target modal creates a new instance
     for (var key in triggerMap) {
-      let value = triggerMap[key]
-      options.targetModal = key
+      const value = triggerMap[key]
+      options.targetModalId = key
       options.triggers = [...value]
       activeModal = new Modal(options) // eslint-disable-line no-new
     }
+
+    if (options.showModalFromURL === true) {
+      document.addEventListener('DOMContentLoaded', () => {
+        // Gets hash from URL without hashtag sign
+        const hashFromURL = window.location.hash.slice(1)
+        // Checks if trigger nodes include node with the same attribute value as hash from URL
+        const isTriggersIncludeHash = !!triggers.find(el => el.getAttribute(options.openTrigger) === hashFromURL)
+
+        if (isTriggersIncludeHash) {
+          // show the modal with same id as hash in URL
+          show(hashFromURL)
+        }
+      })
+    }
   }
 
   /**
    * Shows a particular modal
-   * @param  {string} targetModal [The id of the modal to display]
+   * @param  {string} targetModalId [The id of the modal to display]
    * @param  {object} config [The configuration object to pass]
    * @return {void}
    */
-  const show = (targetModal, config) => {
+  const show = (targetModalId, config) => {
     const options = config || {}
-    options.targetModal = targetModal
+    options.targetModalId = targetModalId
 
     // Checks if modals and triggers exist in dom
-    if (options.debugMode === true && validateModalPresence(targetModal) === false) return
+    if (options.debugMode === true && validateModalPresence(targetModalId) === false) return
 
     // clear events in case previous modal wasn't close
     if (activeModal) activeModal.removeEventListeners()
@@ -318,11 +333,11 @@ const MicroModal = (() => {
 
   /**
    * Closes the active modal
-   * @param  {string} targetModal [The id of the modal to close]
+   * @param  {string} targetModalId [The id of the modal to close]
    * @return {void}
    */
-  const close = targetModal => {
-    targetModal ? activeModal.closeModalById(targetModal) : activeModal.closeModal()
+  const close = targetModalId => {
+    targetModalId ? activeModal.closeModalById(targetModalId) : activeModal.closeModal()
   }
 
   return { init, show, close }

diff --git a/yarn.lock b/yarn.lock
@@ -1569,9 +1569,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001035:
-  version "1.0.30001037"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001037.tgz#cf666560b14f8dfa18abc235db1ef2699273af6e"
-  integrity sha512-qQP40FzWQ1i9RTjxppOUnpM8OwTBFL5DQbjoR9Az32EtM7YUZOw9orFO6rj1C+xWAGzz+X3bUe09Jf5Ep+zpuA==
+  version "1.0.30001150"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001150.tgz"
+  integrity sha512-kiNKvihW0m36UhAFnl7bOAv0i1K1f6wpfVtTF5O5O82XzgtBnb05V0XeV3oZ968vfg2sRNChsHw8ASH2hDfoYQ==
 
 caseless@~0.12.0:
   version "0.12.0"
-Original file line number
+Diff line change
@@ Expand Up @@
     ✔ Retains the focused element state after closing the modal
+    ✔ Shows modal on page load if its id specified in URL
     &nbsp;
     ## Installation
@@ Expand Down @@