From 2d38cca2088217976b8a1209ce3b781831573c70 Mon Sep 17 00:00:00 2001
From: Zenoo <perso@franckdemoute.fr>
Date: Thu, 1 Jul 2021 23:14:16 +0200
Subject: [PATCH] feat: Added modal:initialized callback + preload param +
 $.modal.get method

---
 README.md           |  8 +++++++-
 examples/index.html | 49 +++++++++++++++++++++++++++++++++++++++++++++
 jquery.modal.js     | 37 +++++++++++++++++++++++++---------
 jquery.modal.min.js |  6 +-----
 4 files changed, 84 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 56c1a1f..20b6942 100644
--- a/README.md
+++ b/README.md
@@ -172,6 +172,10 @@ _(Note that modals loaded with AJAX are removed from the DOM when closed)._
 * Use `$.modal.isActive()` to check if a modal is currently being displayed.
 * Use `$.modal.getCurrent()` to retrieve a reference to the currently active modal instance, if any.
 
+# Getting a modal instance
+
+* Use `$.modal.get($elm)` to a modal instance.
+
 # Options
 
 These are the supported options and their default values:
@@ -192,7 +196,8 @@ $.modal.defaults = {
 
   showSpinner: true,      // Enable/disable the default spinner during AJAX requests.
   fadeDuration: null,     // Number of milliseconds the fade transition takes (null means no transition)
-  fadeDelay: 1.0          // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+  fadeDelay: 1.0,         // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+  preload: false          // Preload the modal on init, without displaying it
 };
 ```
 
@@ -201,6 +206,7 @@ $.modal.defaults = {
 The following events are triggered on the modal element at various points in the open/close cycle (see below for AJAX events).
 
 ```javascript
+$.modal.INITIALIZED = 'modal:initialized';      // Fires when the modal content has been loaded.
 $.modal.BEFORE_BLOCK = 'modal:before-block';    // Fires just before the overlay (blocker) appears.
 $.modal.BLOCK = 'modal:block';                  // Fires after the overlay (block) is visible.
 $.modal.BEFORE_OPEN = 'modal:before-open';      // Fires just before the modal opens.
diff --git a/examples/index.html b/examples/index.html
index 6c6fbe4..b7dab5c 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -534,6 +534,30 @@ <h2 id="example-8"><a href="#example-8">#</a> Example 8: Custom Class for Close
   <p>This modal has a fancy-shmancy close button.</p>
 </div>
 
+<hr />
+
+<h2 id="example-9"><a href="#example-9">#</a> Example 9: Preload and display later</h2>
+<ol>
+  <li>Preload the modal once</li>
+  <li>Open it with <code>.open()</code> when you need to.</li>
+</ol>
+<pre><code>// Preload the modal
+  $('#preloaded-data').modal({
+    preload: true
+  });
+
+  // Open the modal when needed
+  $('#button').on('click', () => {
+    $.modal.get($('#preloaded-data')).open();
+  });
+</code></pre>
+
+<a class="btn" id="example-9-trigger" href="">Open Modal</a>
+
+<div class="modal" id="example-9-modal">
+  <p>I was loaded <span class="loaded-since"></span> seconds ago.</p>
+</div>
+
 <style type="text/css">
   .modal a.close-modal[class*="icon-"] {
     top: -10px;
@@ -564,6 +588,7 @@ <h2 id="example-8"><a href="#example-8">#</a> Example 8: Custom Class for Close
       if(typeof console != 'undefined' && console.log) console.log("[event] " + event.type);
     };
 
+    $(document).on($.modal.INITIALIZED, log_modal_event);
     $(document).on($.modal.BEFORE_BLOCK, log_modal_event);
     $(document).on($.modal.BLOCK, log_modal_event);
     $(document).on($.modal.BEFORE_OPEN, log_modal_event);
@@ -575,6 +600,8 @@ <h2 id="example-8"><a href="#example-8">#</a> Example 8: Custom Class for Close
     $(document).on($.modal.AJAX_SUCCESS, log_modal_event);
     $(document).on($.modal.AJAX_COMPLETE, log_modal_event);
 
+
+
     $('#more').click(function() {
       $(this).parent().after($(this).parent().next().clone());
       return false;
@@ -635,6 +662,28 @@ <h2 id="example-8"><a href="#example-8">#</a> Example 8: Custom Class for Close
       });
     });
 
+
+
+    $(document).on($.modal.INITIALIZED, function(_, ctx){
+      if(ctx.elm.find('.loaded-since').length){
+        // Count down seconds since init
+        const span = ctx.elm.find('.loaded-since');
+        let seconds = 0;
+        setInterval(function(){
+          seconds++;
+          span.text(seconds);
+        }, 1000);
+      }
+    });
+
+    $('#example-9-modal').modal({
+      preload: true
+    });
+
+    $('#example-9-trigger').on('click', function(e){
+      e.preventDefault();
+      $.modal.get($('#example-9-modal')).open();
+    });
   });
 </script>
 
diff --git a/jquery.modal.js b/jquery.modal.js
index 7e62a4d..3532584 100644
--- a/jquery.modal.js
+++ b/jquery.modal.js
@@ -47,26 +47,28 @@
         this.$elm = $(target);
         if (this.$elm.length !== 1) return null;
         this.$body.append(this.$elm);
-        this.open();
+        el.trigger($.modal.INITIALIZED, [this._ctx()]);
+        if(!this.options.preload) this.open();
       //AJAX
       } else {
         this.$elm = $('<div>');
         this.$body.append(this.$elm);
         remove = function(event, modal) { modal.elm.remove(); };
-        this.showSpinner();
+        if(!this.options.preload) this.showSpinner();
         el.trigger($.modal.AJAX_SEND);
         $.get(target).done(function(html) {
           if (!$.modal.isActive()) return;
           el.trigger($.modal.AJAX_SUCCESS);
           var current = getCurrent();
           current.$elm.empty().append(html).on($.modal.CLOSE, remove);
-          current.hideSpinner();
-          current.open();
+          el.trigger($.modal.INITIALIZED, [this._ctx()]);
+          if(!this.options.preload) current.hideSpinner();
+          if(!this.options.preload) current.open();
           el.trigger($.modal.AJAX_COMPLETE);
         }).fail(function() {
           el.trigger($.modal.AJAX_FAIL);
           var current = getCurrent();
-          current.hideSpinner();
+          if(!this.options.preload) current.hideSpinner();
           modals.pop(); // remove expected modal from the list
           el.trigger($.modal.AJAX_COMPLETE);
         });
@@ -75,7 +77,8 @@
       this.$elm = el;
       this.anchor = el;
       this.$body.append(this.$elm);
-      this.open();
+      el.trigger($.modal.INITIALIZED, [this._ctx()]);
+      if(!this.options.preload) this.open();
     }
   };
 
@@ -105,7 +108,10 @@
     },
 
     close: function() {
-      modals.pop();
+      // Don't pop preloaded modals
+      if(modals.length && !modals[modals.length - 1]._ctx().options.preload){
+        modals.pop();
+      }
       this.unblock();
       this.hide();
       if (!$.modal.isActive())
@@ -186,16 +192,25 @@
   };
 
   $.modal.close = function(event) {
-    if (!$.modal.isActive()) return;
     if (event) event.preventDefault();
     var current = getCurrent();
+    if(!current) return;
     current.close();
     return current.$elm;
   };
 
   // Returns if there currently is an active modal
   $.modal.isActive = function () {
-    return modals.length > 0;
+    return modals.filter(function(m){
+      return !m._ctx().options.preload;
+    }).length > 0;
+  };
+
+  // Get modal instance from DOM element
+  $.modal.get = function (el) {
+    return modals.find(function(m){
+      return m._ctx().elm.is(el);
+    });
   };
 
   $.modal.getCurrent = getCurrent;
@@ -212,10 +227,12 @@
     showSpinner: true,
     showClose: true,
     fadeDuration: null,   // Number of milliseconds the fade animation takes.
-    fadeDelay: 1.0        // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+    fadeDelay: 1.0,       // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
+    preload: false        // Preload the modal on init, without displaying it
   };
 
   // Event constants
+  $.modal.INITIALIZED = 'modal:initialized';
   $.modal.BEFORE_BLOCK = 'modal:before-block';
   $.modal.BLOCK = 'modal:block';
   $.modal.BEFORE_OPEN = 'modal:before-open';
diff --git a/jquery.modal.min.js b/jquery.modal.min.js
index 34eecf6..940b636 100644
--- a/jquery.modal.min.js
+++ b/jquery.modal.min.js
@@ -1,5 +1 @@
-/*
-    A simple jQuery modal (http://github.com/kylefox/jquery-modal)
-    Version 0.9.2
-*/
-!function(o){"object"==typeof module&&"object"==typeof module.exports?o(require("jquery"),window,document):o(jQuery,window,document)}(function(o,t,i,e){var s=[],l=function(){return s.length?s[s.length-1]:null},n=function(){var o,t=!1;for(o=s.length-1;o>=0;o--)s[o].$blocker&&(s[o].$blocker.toggleClass("current",!t).toggleClass("behind",t),t=!0)};o.modal=function(t,i){var e,n;if(this.$body=o("body"),this.options=o.extend({},o.modal.defaults,i),this.options.doFade=!isNaN(parseInt(this.options.fadeDuration,10)),this.$blocker=null,this.options.closeExisting)for(;o.modal.isActive();)o.modal.close();if(s.push(this),t.is("a"))if(n=t.attr("href"),this.anchor=t,/^#/.test(n)){if(this.$elm=o(n),1!==this.$elm.length)return null;this.$body.append(this.$elm),this.open()}else this.$elm=o("<div>"),this.$body.append(this.$elm),e=function(o,t){t.elm.remove()},this.showSpinner(),t.trigger(o.modal.AJAX_SEND),o.get(n).done(function(i){if(o.modal.isActive()){t.trigger(o.modal.AJAX_SUCCESS);var s=l();s.$elm.empty().append(i).on(o.modal.CLOSE,e),s.hideSpinner(),s.open(),t.trigger(o.modal.AJAX_COMPLETE)}}).fail(function(){t.trigger(o.modal.AJAX_FAIL);var i=l();i.hideSpinner(),s.pop(),t.trigger(o.modal.AJAX_COMPLETE)});else this.$elm=t,this.anchor=t,this.$body.append(this.$elm),this.open()},o.modal.prototype={constructor:o.modal,open:function(){var t=this;this.block(),this.anchor.blur(),this.options.doFade?setTimeout(function(){t.show()},this.options.fadeDuration*this.options.fadeDelay):this.show(),o(i).off("keydown.modal").on("keydown.modal",function(o){var t=l();27===o.which&&t.options.escapeClose&&t.close()}),this.options.clickClose&&this.$blocker.click(function(t){t.target===this&&o.modal.close()})},close:function(){s.pop(),this.unblock(),this.hide(),o.modal.isActive()||o(i).off("keydown.modal")},block:function(){this.$elm.trigger(o.modal.BEFORE_BLOCK,[this._ctx()]),this.$body.css("overflow","hidden"),this.$blocker=o('<div class="'+this.options.blockerClass+' blocker current"></div>').appendTo(this.$body),n(),this.options.doFade&&this.$blocker.css("opacity",0).animate({opacity:1},this.options.fadeDuration),this.$elm.trigger(o.modal.BLOCK,[this._ctx()])},unblock:function(t){!t&&this.options.doFade?this.$blocker.fadeOut(this.options.fadeDuration,this.unblock.bind(this,!0)):(this.$blocker.children().appendTo(this.$body),this.$blocker.remove(),this.$blocker=null,n(),o.modal.isActive()||this.$body.css("overflow",""))},show:function(){this.$elm.trigger(o.modal.BEFORE_OPEN,[this._ctx()]),this.options.showClose&&(this.closeButton=o('<a href="#close-modal" rel="modal:close" class="close-modal '+this.options.closeClass+'">'+this.options.closeText+"</a>"),this.$elm.append(this.closeButton)),this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker),this.options.doFade?this.$elm.css({opacity:0,display:"inline-block"}).animate({opacity:1},this.options.fadeDuration):this.$elm.css("display","inline-block"),this.$elm.trigger(o.modal.OPEN,[this._ctx()])},hide:function(){this.$elm.trigger(o.modal.BEFORE_CLOSE,[this._ctx()]),this.closeButton&&this.closeButton.remove();var t=this;this.options.doFade?this.$elm.fadeOut(this.options.fadeDuration,function(){t.$elm.trigger(o.modal.AFTER_CLOSE,[t._ctx()])}):this.$elm.hide(0,function(){t.$elm.trigger(o.modal.AFTER_CLOSE,[t._ctx()])}),this.$elm.trigger(o.modal.CLOSE,[this._ctx()])},showSpinner:function(){this.options.showSpinner&&(this.spinner=this.spinner||o('<div class="'+this.options.modalClass+'-spinner"></div>').append(this.options.spinnerHtml),this.$body.append(this.spinner),this.spinner.show())},hideSpinner:function(){this.spinner&&this.spinner.remove()},_ctx:function(){return{elm:this.$elm,$elm:this.$elm,$blocker:this.$blocker,options:this.options,$anchor:this.anchor}}},o.modal.close=function(t){if(o.modal.isActive()){t&&t.preventDefault();var i=l();return i.close(),i.$elm}},o.modal.isActive=function(){return s.length>0},o.modal.getCurrent=l,o.modal.defaults={closeExisting:!0,escapeClose:!0,clickClose:!0,closeText:"Close",closeClass:"",modalClass:"modal",blockerClass:"jquery-modal",spinnerHtml:'<div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div>',showSpinner:!0,showClose:!0,fadeDuration:null,fadeDelay:1},o.modal.BEFORE_BLOCK="modal:before-block",o.modal.BLOCK="modal:block",o.modal.BEFORE_OPEN="modal:before-open",o.modal.OPEN="modal:open",o.modal.BEFORE_CLOSE="modal:before-close",o.modal.CLOSE="modal:close",o.modal.AFTER_CLOSE="modal:after-close",o.modal.AJAX_SEND="modal:ajax:send",o.modal.AJAX_SUCCESS="modal:ajax:success",o.modal.AJAX_FAIL="modal:ajax:fail",o.modal.AJAX_COMPLETE="modal:ajax:complete",o.fn.modal=function(t){return 1===this.length&&new o.modal(this,t),this},o(i).on("click.modal",'a[rel~="modal:close"]',o.modal.close),o(i).on("click.modal",'a[rel~="modal:open"]',function(t){t.preventDefault(),o(this).modal()})});
+!function(o){"object"==typeof module&&"object"==typeof module.exports?o(require("jquery"),window,document):o(jQuery,window,document)}((function(o,t,i,e){var s=[],l=function(){return s.length?s[s.length-1]:null},n=function(){var o,t=!1;for(o=s.length-1;o>=0;o--)s[o].$blocker&&(s[o].$blocker.toggleClass("current",!t).toggleClass("behind",t),t=!0)};o.modal=function(t,i){var e,n;if(this.$body=o("body"),this.options=o.extend({},o.modal.defaults,i),this.options.doFade=!isNaN(parseInt(this.options.fadeDuration,10)),this.$blocker=null,this.options.closeExisting)for(;o.modal.isActive();)o.modal.close();if(s.push(this),t.is("a"))if(n=t.attr("href"),this.anchor=t,/^#/.test(n)){if(this.$elm=o(n),1!==this.$elm.length)return null;this.$body.append(this.$elm),t.trigger(o.modal.INITIALIZED,[this._ctx()]),this.options.preload||this.open()}else this.$elm=o("<div>"),this.$body.append(this.$elm),e=function(o,t){t.elm.remove()},this.options.preload||this.showSpinner(),t.trigger(o.modal.AJAX_SEND),o.get(n).done((function(i){if(o.modal.isActive()){t.trigger(o.modal.AJAX_SUCCESS);var s=l();s.$elm.empty().append(i).on(o.modal.CLOSE,e),t.trigger(o.modal.INITIALIZED,[this._ctx()]),this.options.preload||s.hideSpinner(),this.options.preload||s.open(),t.trigger(o.modal.AJAX_COMPLETE)}})).fail((function(){t.trigger(o.modal.AJAX_FAIL);var i=l();this.options.preload||i.hideSpinner(),s.pop(),t.trigger(o.modal.AJAX_COMPLETE)}));else this.$elm=t,this.anchor=t,this.$body.append(this.$elm),t.trigger(o.modal.INITIALIZED,[this._ctx()]),this.options.preload||this.open()},o.modal.prototype={constructor:o.modal,open:function(){var t=this;this.block(),this.anchor.blur(),this.options.doFade?setTimeout((function(){t.show()}),this.options.fadeDuration*this.options.fadeDelay):this.show(),o(i).off("keydown.modal").on("keydown.modal",(function(o){var t=l();27===o.which&&t.options.escapeClose&&t.close()})),this.options.clickClose&&this.$blocker.click((function(t){t.target===this&&o.modal.close()}))},close:function(){s.length&&!s[s.length-1]._ctx().options.preload&&s.pop(),this.unblock(),this.hide(),o.modal.isActive()||o(i).off("keydown.modal")},block:function(){this.$elm.trigger(o.modal.BEFORE_BLOCK,[this._ctx()]),this.$body.css("overflow","hidden"),this.$blocker=o('<div class="'+this.options.blockerClass+' blocker current"></div>').appendTo(this.$body),n(),this.options.doFade&&this.$blocker.css("opacity",0).animate({opacity:1},this.options.fadeDuration),this.$elm.trigger(o.modal.BLOCK,[this._ctx()])},unblock:function(t){!t&&this.options.doFade?this.$blocker.fadeOut(this.options.fadeDuration,this.unblock.bind(this,!0)):(this.$blocker.children().appendTo(this.$body),this.$blocker.remove(),this.$blocker=null,n(),o.modal.isActive()||this.$body.css("overflow",""))},show:function(){this.$elm.trigger(o.modal.BEFORE_OPEN,[this._ctx()]),this.options.showClose&&(this.closeButton=o('<a href="#close-modal" rel="modal:close" class="close-modal '+this.options.closeClass+'">'+this.options.closeText+"</a>"),this.$elm.append(this.closeButton)),this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker),this.options.doFade?this.$elm.css({opacity:0,display:"inline-block"}).animate({opacity:1},this.options.fadeDuration):this.$elm.css("display","inline-block"),this.$elm.trigger(o.modal.OPEN,[this._ctx()])},hide:function(){this.$elm.trigger(o.modal.BEFORE_CLOSE,[this._ctx()]),this.closeButton&&this.closeButton.remove();var t=this;this.options.doFade?this.$elm.fadeOut(this.options.fadeDuration,(function(){t.$elm.trigger(o.modal.AFTER_CLOSE,[t._ctx()])})):this.$elm.hide(0,(function(){t.$elm.trigger(o.modal.AFTER_CLOSE,[t._ctx()])})),this.$elm.trigger(o.modal.CLOSE,[this._ctx()])},showSpinner:function(){this.options.showSpinner&&(this.spinner=this.spinner||o('<div class="'+this.options.modalClass+'-spinner"></div>').append(this.options.spinnerHtml),this.$body.append(this.spinner),this.spinner.show())},hideSpinner:function(){this.spinner&&this.spinner.remove()},_ctx:function(){return{elm:this.$elm,$elm:this.$elm,$blocker:this.$blocker,options:this.options,$anchor:this.anchor}}},o.modal.close=function(o){o&&o.preventDefault();var t=l();if(t)return t.close(),t.$elm},o.modal.isActive=function(){return s.filter((function(o){return!o._ctx().options.preload})).length>0},o.modal.get=function(o){return s.find((function(t){return t._ctx().elm.is(o)}))},o.modal.getCurrent=l,o.modal.defaults={closeExisting:!0,escapeClose:!0,clickClose:!0,closeText:"Close",closeClass:"",modalClass:"modal",blockerClass:"jquery-modal",spinnerHtml:'<div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div>',showSpinner:!0,showClose:!0,fadeDuration:null,fadeDelay:1,preload:!1},o.modal.INITIALIZED="modal:initialized",o.modal.BEFORE_BLOCK="modal:before-block",o.modal.BLOCK="modal:block",o.modal.BEFORE_OPEN="modal:before-open",o.modal.OPEN="modal:open",o.modal.BEFORE_CLOSE="modal:before-close",o.modal.CLOSE="modal:close",o.modal.AFTER_CLOSE="modal:after-close",o.modal.AJAX_SEND="modal:ajax:send",o.modal.AJAX_SUCCESS="modal:ajax:success",o.modal.AJAX_FAIL="modal:ajax:fail",o.modal.AJAX_COMPLETE="modal:ajax:complete",o.fn.modal=function(t){return 1===this.length&&new o.modal(this,t),this},o(i).on("click.modal",'a[rel~="modal:close"]',o.modal.close),o(i).on("click.modal",'a[rel~="modal:open"]',(function(t){t.preventDefault(),o(this).modal()}))}));
\ No newline at end of file