bind events by data-attributes

AyseGulcan · Apr 19, 2015 · de6ffe6 · de6ffe6
1 parent b3a2f4a
commit de6ffe6
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 21 deletions.
diff --git a/dist/jquery.remodal.css b/dist/jquery.remodal.css
@@ -6,8 +6,6 @@
  *  Made by Ilya Makarov
  *  Under MIT License
  */
-@import url(//fonts.googleapis.com/css?family=Exo+2:700,400&subset=latin,cyrillic);
-
 /* ==========================================================================
    Remodal necessary styles
    ========================================================================== */

diff --git a/dist/jquery.remodal.js b/dist/jquery.remodal.js
@@ -242,7 +242,7 @@
     }
 
     remodal.$bg = $('.' + namespace + '-bg');
-    remodal.$closeButton = $('<a href="#"></a>').addClass(namespace + '-close');
+
     remodal.$wrapper = $('<div>').addClass(namespace + '-wrapper');
     remodal.$modal = $modal;
     remodal.$modal.addClass(namespace);
@@ -251,8 +251,10 @@
     remodal.$modal.append(remodal.$closeButton);
     remodal.$wrapper.append(remodal.$modal);
     remodal.$body.append(remodal.$wrapper);
-    remodal.$confirmButton = remodal.$modal.find('.' + namespace + '-confirm');
-    remodal.$cancelButton = remodal.$modal.find('.' + namespace + '-cancel');
+
+    remodal.$closeButton = remodal.$modal.find('[data-' + namespace + '-action="close"]');
+    remodal.$confirmButton = remodal.$modal.find('[data-' + namespace + '-action="confirm"]');
+    remodal.$cancelButton = remodal.$modal.find('[data-' + namespace + '-action="cancel"]');
 
     // Calculate timeouts
     tdOverlay = getTransitionDuration(remodal.$overlay);

diff --git a/dist/jquery.remodal.min.js b/dist/jquery.remodal.min.js
diff --git a/examples/index-zepto.html b/examples/index-zepto.html
@@ -80,6 +80,7 @@ <h1>Remodal</h1>
 </div>
 
 <div class="remodal" data-remodal-id="modal">
+  <span data-remodal-action="close" class="remodal-close"></span>
   <h1>Remodal</h1>
   <p>
     Flat, responsive, lightweight, fast, easy customizable modal window plugin
@@ -89,8 +90,8 @@ <h1>Remodal</h1>
     Minified version size: ~4kb
   </p>
   <br>
-  <a class="remodal-cancel" href="#">Cancel</a>
-  <a class="remodal-confirm" href="#">OK</a>
+  <a data-remodal-action="cancel" class="remodal-cancel" href="#">Cancel</a>
+  <a data-remodal-action="confirm" class="remodal-confirm" href="#">OK</a>
 </div>
 
 <div data-remodal-id="modal2">
@@ -99,7 +100,7 @@ <h1>Another one window</h1>
     Hello!
   </p>
   <br>
-  <a class="remodal-confirm" href="#">Hello!</a>
+  <a data-remodal-action="confirm" class="remodal-confirm" href="#">Hello!</a>
 </div>
 
 <!-- You can define the global options -->

diff --git a/examples/index.html b/examples/index.html
@@ -80,6 +80,7 @@ <h1>Remodal</h1>
 </div>
 
 <div class="remodal" data-remodal-id="modal">
+  <span data-remodal-action="close" class="remodal-close"></span>
   <h1>Remodal</h1>
   <p>
     Flat, responsive, lightweight, fast, easy customizable modal window plugin
@@ -89,8 +90,8 @@ <h1>Remodal</h1>
     Minified version size: ~4kb
   </p>
   <br>
-  <a class="remodal-cancel" href="#">Cancel</a>
-  <a class="remodal-confirm" href="#">OK</a>
+  <a data-remodal-action="cancel" class="remodal-cancel" href="#">Cancel</a>
+  <a data-remodal-action="confirm" class="remodal-confirm" href="#">OK</a>
 </div>
 
 <div data-remodal-id="modal2">
@@ -99,7 +100,7 @@ <h1>Another one window</h1>
     Hello!
   </p>
   <br>
-  <a class="remodal-confirm" href="#">Hello!</a>
+  <a data-remodal-action="confirm" class="remodal-confirm" href="#">Hello!</a>
 </div>
 
 <!-- You can define the global options -->

diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css
@@ -1,5 +1,3 @@
-@import url(//fonts.googleapis.com/css?family=Exo+2:700,400&subset=latin,cyrillic);
-
 /* ==========================================================================
    Remodal necessary styles
    ========================================================================== */

diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js
@@ -234,7 +234,7 @@
     }
 
     remodal.$bg = $('.' + namespace + '-bg');
-    remodal.$closeButton = $('<a href="#"></a>').addClass(namespace + '-close');
+
     remodal.$wrapper = $('<div>').addClass(namespace + '-wrapper');
     remodal.$modal = $modal;
     remodal.$modal.addClass(namespace);
@@ -243,8 +243,10 @@
     remodal.$modal.append(remodal.$closeButton);
     remodal.$wrapper.append(remodal.$modal);
     remodal.$body.append(remodal.$wrapper);
-    remodal.$confirmButton = remodal.$modal.find('.' + namespace + '-confirm');
-    remodal.$cancelButton = remodal.$modal.find('.' + namespace + '-cancel');
+
+    remodal.$closeButton = remodal.$modal.find('[data-' + namespace + '-action="close"]');
+    remodal.$confirmButton = remodal.$modal.find('[data-' + namespace + '-action="confirm"]');
+    remodal.$cancelButton = remodal.$modal.find('[data-' + namespace + '-action="cancel"]');
 
     // Calculate timeouts
     tdOverlay = getTransitionDuration(remodal.$overlay);

diff --git a/test/remodal.html b/test/remodal.html
@@ -30,16 +30,20 @@
 
 <a href="#" data-remodal-target="modal">Call</a>
 <div class="remodal" data-remodal-id="modal">
-    <a class="remodal-cancel" href="#">Cancel</a>
-    <a class="remodal-confirm" href="#">OK</a>
+  <a data-remodal-action="close" class="remodal-close"></a>
+
+  <a data-remodal-action="cancel" class="remodal-cancel" href="#">Cancel</a>
+  <a data-remodal-action="confirm" class="remodal-confirm" href="#">OK</a>
 </div>
 
 <div class="remodal" data-remodal-id="modal2" data-remodal-options="hashTracking: false,closeOnConfirm:false,closeOnCancel:   false">
-    <a class="remodal-cancel" href="#">Cancel</a>
-    <a class="remodal-confirm" href="#">OK</a>
+  <a data-remodal-action="close" class="remodal-close"></a>
+  <a data-remodal-action="cancel" class="remodal-cancel" href="#">Cancel</a>
+  <a data-remodal-action="confirm" class="remodal-confirm" href="#">OK</a>
 </div>
 
 <div data-remodal-id="modal3">
+  <a data-remodal-action="close" class="remodal-close"></a>
 </div>
 </body>
 </html>