git.fiddlerwoaroof.com
Browse code

various updates

fiddlerwoaroof authored on 23/05/2016 22:57:17
Showing 3 changed files
css/myjQModal.css
History View file @ 7166c65
... ... 
@@ -1,4 +1,4 @@
1 
-.myjQModal-wrapper {
1 
+.handyModal-wrapper {
2 2 
   display: none;
3 3 
   position: fixed;
4 4 
   top: 0px;
... ... 
@@ -8,15 +8,15 @@
8 8 
   z-index: 999;
9 9 
 }
10 10
11 
-.myjQModal-wrapper {
11 
+.handyModal-wrapper {
12 12 
   background: hsla(0,0%,25%,0.5);
13 13 
 }
14 14
15 
-.myjQModal-wrapper.open {
15 
+.handyModal-wrapper.open {
16 16 
   display: block;
17 17 
 }
18 18
19 
-.myjQModal-wrapper > div.myjQModal {
19 
+.handyModal-wrapper > div.handyModal {
20 20 
   border: thin solid black;
21 21 
   box-shadow: 0em 0em 0.1em #ccc;
22 22 
   width: auto;
... ... 
@@ -31,7 +31,7 @@
31 31 
   background: white;
32 32 
 }
33 33
34 
-div.myjQModal > div {
34 
+div.handyModal > div {
35 35 
   position: relative;
36 36 
   width: 100%;
37 37 
   height: 100%;
index.html
History View file @ 7166c65
... ... 
@@ -3,20 +3,29 @@
3 3 
   <head>
4 4 
     <meta charset="UTF-8">
5 5 
     <title></title>
6 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
7 
-    <script src="js/myjQModal.jquery.js"></script>
6 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
8 7 
     <link rel="stylesheet" href="css/myjQModal.css">
8 
+    <style type="text/css">
9 
+      * {
10 
+        box-sizing: border-box;
11 
+      }
12 
+      .modal-el {
13 
+        padding: 10em 7.5em;
14 
+        text-align: center;
15 
+      }
16 
+    </style>
9 17 
   </head>
10 18 
   <body>
11 19 
     <div id="background"></div>
12 20 
     <button  data-action="open" data-target="#modal"> open modal! </button>
13 
-    <div id="modal">
21 
+    <div class="modal-el" id="modal">
14 22 
       <button  data-action="open" data-target="#modal2"> open modal! </button>
15 
-      Howdy!
23 
+      This is the first modal!
16 24 
     </div>
17 
-    <div id="modal2" class="close-on-click">
25 
+    <div class="modal-el close-on-click" id="modal2">
18 26 
       This is the second modal!
19 27 
     </div>
20 28
29 
+    <script id="handyModal" data-initialize src="js/handyModal.jquery.js"></script>
21 30 
   </body>
22 31 
 </html>
js/handyModal.jquery.js
History View file @ 7166c65
... ... 
@@ -1,26 +1,27 @@
1 
+scriptTag = null;
1 2 
 (function ($) {
2 3
3 4 
   var currentModal = null;
4 
-  $.fn.myjQModal = function() {
5 
+  $.fn.handyModal = function() {
5 6 
       'use strict';
6 7 
       var self=this;
7 8 
       var $self = $(self);
8 9
9 
-      if ($self.length === 1 && $self[0].myjQModal !== undefined) { return $self[0].myjQModal; }
10 
+      if ($self.length === 1 && $self[0].handyModal !== undefined) { return $self[0].handyModal; }
10 11
11 12 
       $(self).each(function() {
12 
-          if (this.myjQModal === undefined) {
13 
+          if (this.handyModal === undefined) {
13 14 
               var target = $(this.dataset.target);
14 
-              var targetModal = target.data('myjQModal');
15 
+              var targetModal = target.data('handyModal');
15 16 
               var action = this.dataset.action;
16 
-              var wrapper = target.closest('.myjQModal-wrapper');
17 
+              var wrapper = target.closest('.handyModal-wrapper');
17 18
18 19 
               if (targetModal === undefined) {
19 20 
                   var modal = $('<div></div>');
20 
-                  wrapper = $('<div class="myjQModal-wrapper"></div>').append(modal);
21 
+                  wrapper = $('<div class="handyModal-wrapper"></div>').append(modal);
21 22
22 23 
                   modal.append(target);
23 
-                  modal.wrap('<div class="myjQModal">');
24 
+                  modal.wrap('<div class="handyModal">');
24 25 
                   $('body').append(wrapper);
25 26
26 27 
                   wrapper.click(function() {
... ... 
@@ -37,7 +38,7 @@
37 38 
                   target.removeClass('preinit');
38 39 
               }
39 40
40 
-              this.myjQModal = {
41 
+              this.handyModal = {
41 42 
                   target: target,
42 43 
                   action: action,
43 44 
                   wrapper: wrapper,
... ... 
@@ -54,16 +55,24 @@
54 55 
               };
55 56
56 57 
               if (targetModal === undefined) {
57 
-                  target.data('myjQModal', this.myjQModal);
58 
+                  target.data('handyModal', this.handyModal);
58 59 
               }
59 60
60 61 
               $(this).click(function() {
61 62 
                   console.log('this should happen');
62 
-                  if (action === 'open') { this.myjQModal.open(); }
63 
-                  else if (action === 'close') { this.myjQModal.close(); }
63 
+                  if (action === 'open') { this.handyModal.open(); }
64 
+                  else if (action === 'close') { this.handyModal.close(); }
64 65 
               });
65 
-          };
66 
+          }
66 67 
       });
67 68 
       return this;
68 69 
   };
70 
+
71 
+  $(document).ready(function() {
72 
+    scriptTag = document.querySelector('script#handyModal');
73 
+
74 
+    if (scriptTag && scriptTag.dataset.hasOwnProperty('initialize')) {
75 
+      $('[data-target]').handyModal();
76 
+    }
77 
+  });
69 78 
 }( jQuery ));