Merge pull request #1718 from adumesny/master

adumesny · web-flow · commit 922c0b1fc897 · 2021-04-10T19:15:31.000-07:00
scrollbar fix
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [4.1.0-dev](#410-dev)
 - [4.1.0 (2021-4-7)](#410-2021-4-7)
 - [4.0.3 (2021-3-28)](#403-2021-3-28)
 - [4.0.2 (2021-3-27)](#402-2021-3-27)
@@ -52,6 +53,10 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+## 4.1.0-dev
+
+- fix [#1704](https://github.com/gridstack/gridstack.js/issues/1704) scrollbar fix broken in 4.x
+
 ## 4.1.0 (2021-4-7)
 
 - fix [#219](https://github.com/gridstack/gridstack.js/issues/219) **fixing another 6 years old request** we now automatically insert extra rows
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "4.1.0",
+  "version": "4.1.0-dev",
   "description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",
@@ -87,6 +87,6 @@
     "ts-loader": "^8.0.7",
     "typescript": "3.6.5",
     "webpack": "^5.3.2",
-    "webpack-cli": "^4.1.0"
+    "webpack-cli": "^4.1.0-dev"
   }
 }
diff --git a/spec/e2e/html/1704_scroll_bar.html b/spec/e2e/html/1704_scroll_bar.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"></link>
+  <script src="../../../dist/gridstack-h5.js"></script>
+  <style>
+    #trash {
+      background: rgba(255, 0, 0, 0.4);
+    }
+    .two {
+      background: lavender;
+    }
+  </style>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-2 d-none d-md-block" style="position: relative;">
+        <div style="position: sticky; top: 0;">
+          <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">remove</div>
+          <div class="newWidget grid-stack-item" gs-min-w="3">
+            <div class="grid-stack-item-content" style="padding: 5px;">add</div>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-12 col-md-10">
+        <div class="grid-stack"></div>
+        <div class="grid-stack two"></div>
+      </div>
+    </div>
+  <script type="text/javascript">
+    let grids = GridStack.initAll({
+      acceptWidgets: true,
+      dragIn: ".newWidget", // class that can be dragged from outside
+      dragOut: false,
+      dragInOptions: {
+        revert: "invalid",
+        scroll: false,
+        appendTo: "body",
+        helper: "clone"
+      },
+      removable: "#trash", // drag-out delete class
+      removeTimeout: 100,
+      float: true,
+      row: 3,
+    });
+    // let items = [{x: 0, y: 0, content: "0"}];
+    // grids.forEach(grid => grid.load(items));
+  </script>
+</body>
+</html>
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
@@ -1,5 +1,5 @@
 /**
- * gridstack-dd.ts 4.1.0
+ * gridstack-dd.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
@@ -161,7 +161,7 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
 
       // get grid screen coordinates and cell dimensions
       let box = this.el.getBoundingClientRect();
-      gridPos = {top: box.top + document.documentElement.scrollTop, left: box.left};
+      gridPos = {top: box.top, left: box.left};
       cellWidth = this.cellWidth();
       cellHeight = this.getCellHeight(true);
 
diff --git a/src/gridstack-ddi.ts b/src/gridstack-ddi.ts
@@ -1,5 +1,5 @@
 /**
- * gridstack-ddi.ts 4.1.0
+ * gridstack-ddi.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
@@ -1,5 +1,5 @@
 /**
- * gridstack-engine.ts 4.1.0
+ * gridstack-engine.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack-h5.ts b/src/gridstack-h5.ts
@@ -1,5 +1,5 @@
 /**
- * index-h5.ts 4.1.0 - everything you need for a Grid that uses HTML5 native drag&drop
+ * index-h5.ts 4.1.0-dev - everything you need for a Grid that uses HTML5 native drag&drop
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack-jq.ts b/src/gridstack-jq.ts
@@ -1,5 +1,5 @@
 /**
- * index-jq.ts 4.1.0 - everything you need for a Grid that uses Jquery-ui drag&drop (original, full feature)
+ * index-jq.ts 4.1.0-dev - everything you need for a Grid that uses Jquery-ui drag&drop (original, full feature)
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack-poly.js b/src/gridstack-poly.js
@@ -1,5 +1,5 @@
 /**
- * gridstack-poly.ts 4.1.0 - used for older browser support (not currently supported in v2+)
+ * gridstack-poly.ts 4.1.0-dev - used for older browser support (not currently supported in v2+)
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack-static.ts b/src/gridstack-static.ts
@@ -1,5 +1,5 @@
 /**
- * index-static.ts 4.1.0 - much smaller, everything you need for a static Grid (non draggable, API driven)
+ * index-static.ts 4.1.0-dev - much smaller, everything you need for a static Grid (non draggable, API driven)
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack.scss b/src/gridstack.scss
@@ -1,5 +1,5 @@
 /**
- * gridstack SASS styles 4.1.0
+ * gridstack SASS styles 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1,5 +1,5 @@
 /*!
- * GridStack 4.1.0
+ * GridStack 4.1.0-dev
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021 Alain Dumesny
diff --git a/src/h5/dd-base-impl.ts b/src/h5/dd-base-impl.ts
@@ -1,5 +1,5 @@
 /**
- * dd-base-impl.ts 4.1.0
+ * dd-base-impl.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts
@@ -1,5 +1,5 @@
 /**
- * dd-draggable.ts 4.1.0
+ * dd-draggable.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/h5/dd-droppable.ts b/src/h5/dd-droppable.ts
@@ -1,5 +1,5 @@
 /**
- * dd-droppable.ts 4.1.0
+ * dd-droppable.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/h5/dd-element.ts b/src/h5/dd-element.ts
@@ -1,5 +1,5 @@
 /**
- * dd-elements.ts 4.1.0
+ * dd-elements.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/h5/dd-manager.ts b/src/h5/dd-manager.ts
@@ -1,5 +1,5 @@
 /**
- * dd-manager.ts 4.1.0
+ * dd-manager.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/h5/dd-resizable-handle.ts b/src/h5/dd-resizable-handle.ts
@@ -1,5 +1,5 @@
 /**
- * dd-resizable-handle.ts 4.1.0
+ * dd-resizable-handle.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/h5/dd-resizable.ts b/src/h5/dd-resizable.ts
@@ -1,5 +1,5 @@
 /**
- * dd-resizable.ts 4.1.0
+ * dd-resizable.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/h5/dd-utils.ts b/src/h5/dd-utils.ts
@@ -1,5 +1,5 @@
 /**
- * dd-utils.ts 4.1.0
+ * dd-utils.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 export class DDUtils {
diff --git a/src/h5/gridstack-dd-native.ts b/src/h5/gridstack-dd-native.ts
@@ -1,5 +1,5 @@
 /**
- * gridstack-dd-native.ts 4.1.0
+ * gridstack-dd-native.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/jq/gridstack-dd-jqueryui.ts b/src/jq/gridstack-dd-jqueryui.ts
@@ -1,4 +1,4 @@
-// gridstack-dd-jqueryui.ts 4.1.0
+// gridstack-dd-jqueryui.ts 4.1.0-dev
 // Copyright (c) 2021 Alain Dumesny - see root license
 import { GridStackElement } from '../gridstack';
 import { GridStackDD, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dd';
diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,5 @@
 /**
- * types.ts 4.1.0
+ * types.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,5 +1,5 @@
 /**
- * utils.ts 4.1.0
+ * utils.ts 4.1.0-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "gridstack",`
`3`		`- "version": "4.1.0",`
	`3`	`+ "version": "4.1.0-dev",`
`4`	`4`	`"description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",`
`5`	`5`	`"main": "./dist/gridstack.js",`
`6`	`6`	`"types": "./dist/gridstack.d.ts",`
`@@ -87,6 +87,6 @@`
`87`	`87`	`"ts-loader": "^8.0.7",`
`88`	`88`	`"typescript": "3.6.5",`
`89`	`89`	`"webpack": "^5.3.2",`
`90`		`- "webpack-cli": "^4.1.0"`
	`90`	`+ "webpack-cli": "^4.1.0-dev"`
`91`	`91`	`}`
`92`	`92`	`}`