Merge pull request #13 from SengitU/master

Improved modal drag performance

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "uxrocket.modal",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "homepage": "https://github.com/uxrocket/uxrocket.modal",
   "authors": [
     "Bilal Çınarlı <[email protected]>"

dist/uxrocket.modal.css

@@ -18,9 +18,8 @@
   z-index: 10000;
   top: 50%;
   left: 50%;
-  -webkit-transform: translateY(-50%) translateX(-50%);
-      -ms-transform: translateY(-50%) translateX(-50%);
-          transform: translateY(-50%) translateX(-50%);
+  -ms-transform: translateY(-50%) translateX(-50%);
+      transform: translateY(-50%) translateX(-50%);
   min-width: 50px;
   min-height: 50px;
   padding: 20px;
@@ -79,8 +78,7 @@
   border: 2px dashed #777;
   border-radius: 50%;
   box-sizing: border-box;
-  -webkit-animation: uxr-modal-loading 2s infinite linear;
-          animation: uxr-modal-loading 2s infinite linear;
+  animation: uxr-modal-loading 2s infinite linear;
 }
 
 .uxr-modal-close {
@@ -108,24 +106,11 @@
   display: none;
 }
 
-@-webkit-keyframes uxr-modal-loading {
-  from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
-}
-
 @keyframes uxr-modal-loading {
   from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }

dist/uxrocket.modal.js

@@ -146,7 +146,8 @@
     };
 
     Modal.prototype.bindUIActions = function() {
-        var _this = this;
+        var _this = this,
+            dragTimer;
 
         this.$el
             .on(events.click, function(e) {
@@ -193,7 +194,12 @@
 
         $(document)
             .on(events.mousemove + ' ' + events.touchmove, function(e) {
-                modal.move.drag(e);
+                if (dragTimer) {
+                    clearTimeout(dragTimer);
+                }
+                dragTimer = setTimeout(function() {
+                    modal.move.drag(e);
+                }, 100);
             }).on(events.mouseup + ' ' + events.touchend, function() {
             modal.move.stop();
         });
@@ -355,6 +361,8 @@
             .find('.' + utils.getClassname('close'))
             .addClass(utils.getClassname('hide'));
 
+        this.$content.find('#uxr-notifications').remove();
+
         modal.close(this);
 
         if(this.$ph) {
@@ -544,10 +552,11 @@
                 }
             },
             drag:     function(e) {
-                var pointer = this.pointer(e);
+                var pointer = this.pointer(e),
+                    scrollTop = $(window).scrollTop();
 
                 if(this.selected) {
-                    this.selected.$content[0].style.top  = pointer.y + (this.selected.$content.height() / 2) + 'px';
+                    this.selected.$content[0].style.top  = pointer.y - scrollTop + (this.selected.$content.height() / 2) + 'px';
                     this.selected.$content[0].style.left = pointer.x + 'px';
                 }
             },
@@ -620,7 +629,7 @@
         return openedInstances;
     };
 
-    ux.version = '1.6.1';
+    ux.version = '1.6.2';
 
     ux.settings = defaults;
-}));
+}));

examples/index.html

@@ -98,7 +98,7 @@
         (console'da tetiklenen callbackleri görebilirsiniz).</p>
 </div>
 
-<div class="hide" style="display: none">
+    <div class="hide" style="display: none">
     <div id="hidden-content" class="modal-window" style="width: 480px">
         <p>Sayfada normalde gizlenmiş olan bir içeriğin modal pencerede çağrılması</p>
 

lib/_uxrocket-modal.scss

@@ -1,5 +1,5 @@
 /* @author Bilal Cinarli */
-$modal-version: 1.2.3;
+$modal-version: 1.6.2;
 
 /** -------------------------------------------
     Modal
@@ -119,4 +119,4 @@ $modal-version: 1.2.3;
     to {
         transform: rotate(360deg);
     }
-}
+}

lib/uxrocket.modal.js

@@ -146,7 +146,8 @@
     };
 
     Modal.prototype.bindUIActions = function() {
-        var _this = this;
+        var _this = this,
+            dragTimer;
 
         this.$el
             .on(events.click, function(e) {
@@ -193,7 +194,12 @@
 
         $(document)
             .on(events.mousemove + ' ' + events.touchmove, function(e) {
-                modal.move.drag(e);
+                if (dragTimer) {
+                    clearTimeout(dragTimer);
+                }
+                dragTimer = setTimeout(function() {
+                    modal.move.drag(e);
+                }, 100);
             }).on(events.mouseup + ' ' + events.touchend, function() {
             modal.move.stop();
         });
@@ -355,6 +361,8 @@
             .find('.' + utils.getClassname('close'))
             .addClass(utils.getClassname('hide'));
 
+        this.$content.find('#uxr-notifications').remove();
+
         modal.close(this);
 
         if(this.$ph) {
@@ -544,10 +552,11 @@
                 }
             },
             drag:     function(e) {
-                var pointer = this.pointer(e);
+                var pointer = this.pointer(e),
+                    scrollTop = $(window).scrollTop();
 
                 if(this.selected) {
-                    this.selected.$content[0].style.top  = pointer.y + (this.selected.$content.height() / 2) + 'px';
+                    this.selected.$content[0].style.top  = pointer.y - scrollTop + (this.selected.$content.height() / 2) + 'px';
                     this.selected.$content[0].style.left = pointer.x + 'px';
                 }
             },
@@ -620,7 +629,7 @@
         return openedInstances;
     };
 
-    ux.version = '1.6.1';
+    ux.version = '1.6.2';
 
     ux.settings = defaults;
-}));
+}));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uxrocket.modal",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Modal Plugin",
   "repository": {
     "type": "git",