fix: fixed responsive overflow in demo

fixed possible loop between mouseover and cell movement #9, #7
rosspi · Jun 10, 2017 · 34906b9 · 34906b9
1 parent 75a251b
commit 34906b9
Show file tree

Hide file tree

Showing 23 changed files with 193 additions and 109 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -11,6 +11,7 @@
 			banner: "/*\n" +
 				" *  <%= pkg.title || pkg.name %> - v{{ include-version }}\n" + 
 				" *  <%= pkg.description %>\n" +
+				" *  <%= pkg.message %>\n" +
 				" *  <%= pkg.homepage %>\n" +
 				" *\n" +
 				" *  Made by <%= pkg.author.name %>\n" +
@@ -25,10 +26,10 @@
 			},
 			dist: {
 				files: {
-					"dist/jquery.gridstrap.js": ["dist/jquery.gridstrap.js"],
 					"docs/jquery.gridstrap.js": ["dist/jquery.gridstrap.js"],
-					"dist/jquery.gridstrap.css": ["src/style.css"],
+					"dist/jquery.gridstrap.js": ["dist/jquery.gridstrap.js"],
 					"docs/jquery.gridstrap.css": ["src/style.css"],
+					"dist/jquery.gridstrap.css": ["src/style.css"],
 					"dist/jquery.gridstrap.min.css": ["dist/jquery.gridstrap.min.css"],
 				} 
 			}
@@ -62,10 +63,9 @@
 		// karma test runner
 		karma: {
 			unit: {
-				configFile: "karma.conf.js",
-				background: true,
+				configFile: "karma.conf.js", 
 				singleRun: false,
-				browsers: [ "PhantomJS", "Firefox" ]
+				browsers: [ "PhantomJS" ]
 			},
 
 			//continuous integration mode: run tests once in PhantomJS browser.
@@ -107,6 +107,10 @@
 					replacements: [{
 						pattern: /"http:\/\//ig,
 						replacement: '"//'
+					},
+					{
+						pattern: /responsiveLocal/ig,
+						replacement: 'responsive'
 					}]
 				}
 			}

diff --git a/README.md b/README.md
@@ -6,9 +6,11 @@
 ![donate](https://img.shields.io/badge/donate%20bitcoin-1Q32bCvaoNPS4GUNxeBbPzkniMguKFVEtf-green.svg)
 
 gridstrap.js is a jQuery plugin designed to take [Bootstrap's CSS grid system](https://getbootstrap.com/css/#grid) and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour. It will also work with any kind of CSS-driven layout.
+I made this plugin to fill a gap that existed for easily creating Bootstrap-based drag 'n' drop grid responsive interfaces. 
+Both gridster.js and gridstack.js inspired this jQuery plugin, however both have their own grid systems that don't play nicely with Bootstrap out of the box.
 
 ## Demo 
-[https://rosspi.github.io/gridstrap.js/](https://rosspi.github.io/gridstrap.js/)
+[https://rosspi.github.io/gridstrap.js/](https://rosspi.github.io/gridstrap.js/){:target="_blank"}
 
 
 
@@ -18,7 +20,7 @@ gridstrap.js is a jQuery plugin designed to take [Bootstrap's CSS grid system](h
 	1. Include jQuery:
 
 		```html
-		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+		<script src="//code.jquery.com/jquery-1.12.4.js"></script>
 		```
 
 	2. Include plugin's code:
@@ -50,7 +52,7 @@ gridstrap.js is a jQuery plugin designed to take [Bootstrap's CSS grid system](h
 
 	**Download from NPM to have version details affixed to distributables. Using semantic-release means this info won't be in the distributables on GitHub.**
 
-	[![NPM version](https://img.shields.io/npm/v/jquery.gridstrap.svg)](https://www.npmjs.com/package/jquery.gridstrap) 
+	[![NPM version](https://img.shields.io/npm/v/jquery.gridstrap.svg)](https://www.npmjs.com/package/jquery.gridstrap){:target="_blank"}
 
 	```bash
 	$ npm install jquery.gridstrap
@@ -380,7 +382,7 @@ When gridstrap is initialised on a element, its child elements will become 'cell
 As the aim of the extension was to easily enable draggable bootstrap grids, making them resizable doesn't really fit the Bootstrap grid design. However they will behave as expected upon resizing them. To make the cells resizable to always fit within Bootstrap's grid system, check out the example at https://rosspi.github.io/gridstrap.js/ .
 
 ### Non-contiguous
-Non-contiguous mode allows the ability to move cells to anywhere within the grid area, rather than just in place of existing cells. It can create the illusion of there being no backing static/relative grid like there is with Bootstrap's grid system. The way the plugin pulls this off is by appended new cells on the fly as needed upon dragging or performing cell operations beyond the existing cell count, and applying the `nonContiguousPlaceholderCellClass` class to them to set their opacity to 0 by default. Once created, the placeholder cells can serve as hidden cells for other regular hidden cells to move around. This implementation will not work well with cells that are of a different size. But of course, this extension will work with any kind of html layout.
+Non-contiguous mode grants the ability to move cells to anywhere within the grid area, rather than just in place of existing cells. It can create the illusion of there being no backing static/relative grid like there is with Bootstrap's grid system. The way this is pulled off is by appended new cells on the fly as needed upon dragging or performing cell operations beyond the existing cell count, and applying the `nonContiguousPlaceholderCellClass` class to them to set their opacity to 0 by default. Once created, the placeholder cells can serve as hidden cells for other regular hidden cells to move around. This implementation will not work well with cells that are of a different size. But of course, this extension will work with any kind of html layout.
 
 
 ## History
@@ -390,5 +392,3 @@ Check [Releases](https://github.com/rosspi/gridstrap.js/releases) for detailed c
 ## License
 
 [MIT License](http://mit-license.org/) © Ross P
-
-The way non-contiguous mode works is by appending (or removing as needed) placeholder cells to the end of the cell container. These placeholders therefore act dynamically so that the quantity of cells within the grid will be sufficient for whatever is required as if they were 'real' cells. However, because.. somethign about misbehaving with things moving between cells.
diff --git a/dist/jquery.gridstrap.css b/dist/jquery.gridstrap.css
@@ -1,6 +1,7 @@
 /*
  *  jquery.gridstrap - v{{ include-version }}
- *  gridstrap.js https://www.npmjs.com/package/jquery.gridstrap
+ *  gridstrap.js
+ *  Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released.
  *  https://rosspi.github.io/gridstrap.js/
  *
  *  Made by Ross P

diff --git a/dist/jquery.gridstrap.js b/dist/jquery.gridstrap.js
@@ -1,6 +1,7 @@
 /*
  *  jquery.gridstrap - v{{ include-version }}
- *  gridstrap.js https://www.npmjs.com/package/jquery.gridstrap
+ *  gridstrap.js
+ *  Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released.
  *  https://rosspi.github.io/gridstrap.js/
  *
  *  Made by Ross P
@@ -260,7 +261,8 @@ var Handlers = (function () {
             _this.internal.MoveCell($draggedCell, $cell, gridstrapContext);
 
             // reset dragged object to mouse pos, not pos of hidden cells.
-            _this.internal.MoveDraggedCell(mouseEvent, $draggedCell);
+            // do not trigger overlapping now.
+            _this.internal.MoveDraggedCell(mouseEvent, $draggedCell, true);
           }
         }, options.dragMouseoverThrottle);
       }
@@ -546,7 +548,7 @@ var Internal = (function () {
     return element;
   };
 
-  Internal.prototype.MoveDraggedCell = function MoveDraggedCell(mouseEvent, $cell) {
+  Internal.prototype.MoveDraggedCell = function MoveDraggedCell(mouseEvent, $cell, dontLookForOverlappedCell /*optional*/) {
     var $ = this.setup.jQuery;
     var context = this.setup.Context;
     var options = this.setup.Options;
@@ -571,6 +573,10 @@ var Internal = (function () {
     $cell.css('left', absoluteOffset.left);
     $cell.css('top', absoluteOffset.top);
 
+    if (dontLookForOverlappedCell) {
+      return;
+    }
+
     var triggerMouseOverEvent = function triggerMouseOverEvent($element) {
       $element.trigger($.Event(_constants2['default'].EVENT_MOUSEOVER, {
         pageX: mouseEvent.pageX,
@@ -1014,6 +1020,8 @@ var Methods = (function () {
     var context = this.setup.Context;
     var options = this.setup.Options;
 
+    var $draggedCell = this.internal.$GetDraggingCell();
+
     for (var i = 0; i < this.internal.CellsArray.length; i++) {
       var $this = this.internal.CellsArray[i];
 
@@ -1023,15 +1031,16 @@ var Methods = (function () {
 
       this.setCellAbsolutePositionAndSize($this, positionNSizeOfHiddenClone);
     }
+
     // need to also update the first child gristrap - one that might exist within this one - it is then obviously recursive.
     for (var i = 0; i < this.internal.CellsArray.length; i++) {
       var $nestedGridstrap = this.internal.CellsArray[i].find('*').filter(function () {
         return !!$(this).data(_constants2['default'].DATA_GRIDSTRAP);
       });
 
-      if ($nestedGridstrap.length) {
-        $nestedGridstrap.first().data(_constants2['default'].DATA_GRIDSTRAP).updateVisibleCellCoordinates();
-      }
+      $nestedGridstrap.each(function () {
+        $(this).data(_constants2['default'].DATA_GRIDSTRAP).updateVisibleCellCoordinates();
+      });
     }
   };
 

diff --git a/dist/jquery.gridstrap.min.css b/dist/jquery.gridstrap.min.css
@@ -1,6 +1,7 @@
 /*
  *  jquery.gridstrap - v{{ include-version }}
- *  gridstrap.js https://www.npmjs.com/package/jquery.gridstrap
+ *  gridstrap.js
+ *  Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released.
  *  https://rosspi.github.io/gridstrap.js/
  *
  *  Made by Ross P

diff --git a/dist/jquery.gridstrap.min.js b/dist/jquery.gridstrap.min.js
diff --git a/dist/jquery.gridstrap.min.js.map b/dist/jquery.gridstrap.min.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en-us">
   <head>
@@ -23,17 +22,19 @@
 
   </head>
   <body>
-    <section class="page-header">
+    <section class="page-header header-bg">
       <h1 class="project-name">gridstrap.js</h1>
       <h2 class="project-tagline"></h2>
 
-        <a href="//github.com/rosspi/gridstrap.js" class="btn btn-top">View on GitHub</a>
+        <a href="//github.com/rosspi/gridstrap.js" class="btn btn-top" target="_blank">View on GitHub</a>
 
 
     </section>
 
      <section class="main-content">
-      <p>gridstrap.js is a jQuery plugin designed to take Bootstrap's responsive <a href="//getbootstrap.com/css/#grid" target="_blank">grid</a> system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour. It will also work with any kind of CSS-driven layout.</p> 
+      <p><a href="//github.com/rosspi/gridstrap.js" target="_blank">gridstrap.js</a> is a jQuery plugin designed to take Bootstrap's responsive <a href="//getbootstrap.com/css/#grid" target="_blank">grid</a> system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour. It will also work with any kind of CSS-driven layout.</p>
+      <p>I made this plugin to fill a gap that existed for easily creating Bootstrap-based drag 'n' drop grid interfaces.</p>
+      <p>Both gridster.js and gridstack.js inspired this plugin.</p> 
 
 <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
 
@@ -144,7 +145,7 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
     resizeHandleSelector: '.resize' 
   });
   // The above is all you need to do to enable resizing.
-  // The below shows how we can maintain Bootstrap's
+  // However, the below shows how we can maintain Bootstrap's
   // grid functionality.
   var gs = $('#resize-grid').data('gridstrap'); 
   $('#resize-grid').on('cellresize', function (e) {
@@ -303,23 +304,21 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
       </div>
     </div> 
   </div> 
+    </section>
+
 
 
-      <footer class="site-footer">
+      <footer class="site-footer ">
         <div class="container">
                 <div class="row">
                     <div class="col-xs-12">
                         Copyright © Ross P 2017
                     </div>
                 </div>
             </div>
+            <br/>
       </footer>
-    </section>
-
-          <script
-  src="//code.jquery.com/jquery-3.2.1.js"
-  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
-  crossorigin="anonymous"></script>
+        <script src="//code.jquery.com/jquery-1.9.1.js" ></script>
 
         <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.css" />

diff --git a/docs/indexLocal.html b/docs/indexLocal.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en-us">
   <head>
@@ -23,17 +22,19 @@
 
   </head>
   <body>
-    <section class="page-header">
+    <section class="page-header header-bg">
       <h1 class="project-name">gridstrap.js</h1>
       <h2 class="project-tagline"></h2>
 
-        <a href="http://github.com/rosspi/gridstrap.js" class="btn btn-top">View on GitHub</a>
+        <a href="http://github.com/rosspi/gridstrap.js" class="btn btn-top" target="_blank">View on GitHub</a>
 
 
     </section>
 
      <section class="main-content">
-      <p>gridstrap.js is a jQuery plugin designed to take Bootstrap's responsive <a href="http://getbootstrap.com/css/#grid" target="_blank">grid</a> system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour. It will also work with any kind of CSS-driven layout.</p> 
+      <p><a href="http://github.com/rosspi/gridstrap.js" target="_blank">gridstrap.js</a> is a jQuery plugin designed to take Bootstrap's responsive <a href="http://getbootstrap.com/css/#grid" target="_blank">grid</a> system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour. It will also work with any kind of CSS-driven layout.</p>
+      <p>I made this plugin to fill a gap that existed for easily creating Bootstrap-based drag 'n' drop grid interfaces.</p>
+      <p>Both gridster.js and gridstack.js inspired this plugin.</p> 
 
 <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
 
@@ -85,7 +86,7 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
       </div>
     </div>
     <div role="tabpanel" class="tab-pane" id="responsive-demo">  
-      <iframe style="width:500px;" id="ff" src="./responsive.html" > 
+      <iframe style="width:500px;" id="ff" src="./responsiveLocal.html" > 
       </iframe> 
       <div class="row">
         <div class="col-xs-12">  
@@ -144,7 +145,7 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
     resizeHandleSelector: '.resize' 
   });
   // The above is all you need to do to enable resizing.
-  // The below shows how we can maintain Bootstrap's
+  // However, the below shows how we can maintain Bootstrap's
   // grid functionality.
   var gs = $('#resize-grid').data('gridstrap'); 
   $('#resize-grid').on('cellresize', function (e) {
@@ -303,23 +304,21 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
       </div>
     </div> 
   </div> 
+    </section>
+
 
 
-      <footer class="site-footer">
+      <footer class="site-footer ">
         <div class="container">
                 <div class="row">
                     <div class="col-xs-12">
                         Copyright © Ross P 2017
                     </div>
                 </div>
             </div>
+            <br/>
       </footer>
-    </section>
-
-          <script
-  src="http://code.jquery.com/jquery-3.2.1.js"
-  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
-  crossorigin="anonymous"></script>
+        <script src="http://code.jquery.com/jquery-1.9.1.js" ></script>
 
         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.css" />

diff --git a/docs/indexstyle.css b/docs/indexstyle.css
@@ -262,15 +262,15 @@ body { padding: 0; margin: 0; font-family: "Open Sans", "Helvetica Neue", Helvet
 a { color: #1e6bb8; text-decoration: none; }
 a:hover { text-decoration: underline; }
 
-.btn-top { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
+.btn-top { display: inline-block;  color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
 .btn-top:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
 .btn-top + .btn-top { margin-left: 1rem; }
 @media screen and (min-width: 64em) { .btn-top { padding: 0.75rem 1rem; } }
 @media screen and (min-width: 42em) and (max-width: 64em) { .btn-top { padding: 0.6rem 0.9rem; font-size: 0.9rem; } }
 @media screen and (max-width: 42em) { .btn-top { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
   .btn-top + .btn-top { margin-top: 1rem; margin-left: 0; } }
 
-.page-header { 
+.header-bg { 
 
 
 color: #cdbfe3;
@@ -327,7 +327,12 @@ margin:0px;
 .main-content dl dd { padding: 0; margin-bottom: 1rem; }
 .main-content hr { height: 2px; padding: 0; margin: 1rem 0; background-color: #eff0f1; border: 0; }
 
-.site-footer { padding-top: 2rem; margin-top: 2rem; border-top: solid 1px #eff0f1; }
+.site-footer { padding-top: 2rem; margin-top: 2rem; border-top: solid 1px #eff0f1;
+
+    color: #99979c;
+    text-align: center;
+    background-color: #2a2730;
+ }
 @media screen and (min-width: 64em) { .site-footer { font-size: 1rem; } }
 @media screen and (min-width: 42em) and (max-width: 64em) { .site-footer { font-size: 1rem; } }
 @media screen and (max-width: 42em) { .site-footer { font-size: 0.9rem; } }

diff --git a/docs/jquery.gridstrap.css b/docs/jquery.gridstrap.css
@@ -1,6 +1,7 @@
 /*
  *  jquery.gridstrap - v{{ include-version }}
- *  gridstrap.js https://www.npmjs.com/package/jquery.gridstrap
+ *  gridstrap.js
+ *  Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released.
  *  https://rosspi.github.io/gridstrap.js/
  *
  *  Made by Ross P