fixed sizeToContent demo

adumesny · adumesny · commit 9fe88794c3fa · 2024-10-13T16:25:16.000-07:00
* fixed with latest sidebar code path
diff --git a/demo/sizeToContent.html b/demo/sizeToContent.html
@@ -91,7 +91,7 @@ <h1>sizeToContent options demo</h1>
     grid.load(items); // test loading after
     GridStack.init({...opts, children:undefined}, '#grid2');
 
-    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
+    GridStack.setupDragIn('.sidebar>.grid-stack-item');
 
     function clearGrid() {
       grid.removeAll();
@@ -109,10 +109,7 @@ <h1>sizeToContent options demo</h1>
       grid.addWidget({content: `<div>New: ${text}</div>`});
     }
     function makeWidget() {
-      let doc = document.implementation.createHTMLDocument();
-      doc.body.innerHTML = `<div class="item"><div class="grid-stack-item-content"><div>New Make: ${text}</div></div></div>`;
-      let el = doc.body.children[0];
-      grid.el.appendChild(el);
+      let el = GridStack.Utils.createWidgetDivs(undefined, {content: `<div>New Make: ${text}</div>`}, grid.el)
       grid.makeWidget(el, {w:2});
     }
     function more() {
diff --git a/demo/static.html b/demo/static.html
@@ -49,7 +49,7 @@ <h1>Static vs can move/drag Demo</h1>
     ];
     grid.load(serializedData);
 
-    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
+    GridStack.setupDragIn('.sidebar>.grid-stack-item');
 
     // grid.setStatic(false); // TEST enable after disabled
 
diff --git a/demo/two.html b/demo/two.html
@@ -23,7 +23,7 @@ <h1>Two grids demo</h1>
 
     <div class="row">
       <div class="col-md-8">
-        <!-- NOTE: add .grid-stack-item for acceptWidgets:true, but not needed for function which handles .sidebar-item -->
+        <!-- NOTE: add .grid-stack-item for acceptWidgets:true, but not needed for function which handles .sidebar-item (anything) -->
         <div class="sidebar">
           <!-- will size to match content. Also see sidebarContent -->
           <div class="sidebar-item">Drag me</div>
@@ -73,7 +73,7 @@ <h1>Two grids demo</h1>
     ];
     items.forEach((item, i) => item.content = item.content || String(i));
 
-    // sidebar content to create when we get dropped, instead of inserting the clone version
+    // sidebar content (just 2, rest is other behavior) to create when we get dropped, instead of inserting the clone version
     let sidebarContent = [
       {content: 'dropped'},
       {content: 'max=3', w:2, h:1, maxW: 3},
@@ -85,9 +85,10 @@ <h1>Two grids demo</h1>
       cellHeight: 70,
       float: true,
       removable: '.trash', // true or drag-out delete class
+      /** accepts everything fcn, not just .grid-stack-item (true case) but can also be: true | false | '.someClass' value */
+      acceptWidgets: function(el) { return true },
       children: items,
       // itemClass: 'with-lines', // test a custom additional class #2110
-      acceptWidgets: function(el) { return true } // function example, but can also be: true | false | '.someClass' value
     };
     let grids = GridStack.initAll(options);
     grids[1].float(false);
diff --git a/demo/web2.html b/demo/web2.html
@@ -31,7 +31,7 @@
 <body>
   <h1>Advanced Demo</h1>
   <div class="row">
-    <div class="col-md-2 d-none d-md-block">
+    <div class="sidepanel col-md-2 d-none d-md-block">
       <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
         <div>
           <ion-icon name="trash" style="font-size: 300%"></ion-icon>
@@ -40,7 +40,7 @@ <h1>Advanced Demo</h1>
           <span>Drop here to remove!</span>
         </div>
       </div>
-      <div class="newWidget grid-stack-item">
+      <div class="grid-stack-item" gs-h="2">
         <div class="grid-stack-item-content" style="padding: 5px;">
           <div>
             <ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
@@ -67,7 +67,7 @@ <h1>Advanced Demo</h1>
       acceptWidgets: true,
       removable: '#trash', // drag-out delete class
     });
-    GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' });
+    GridStack.setupDragIn('.sidepanel>.grid-stack-item');
 
     let items = [
       {x: 0, y: 0, w: 4, h: 2, content: '1'},
diff --git a/demo/website.html b/demo/website.html
diff --git a/src/gridstack.ts b/src/gridstack.ts
