add resizable-container component

Author: olton

examples/resizable-container.html

@@ -9,10 +9,7 @@
     <title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
     <style>
         .demo-box {
-            width: 300px;
-            height: 300px;
-            /*background-color: var(--color-light-nude);*/
-            border: 1px solid var(--color-nude);
+            border: 1px solid var(--border-color);
             position: absolute;
             display: flex;
             align-items: center;
@@ -34,18 +31,34 @@
 </nav>
 
 <div class="container h-100">
-    <div class="demo-box" data-role="resizable-container, draggable" data-enable-resize="false" style="width: 300px; height: 300px;">
+    <div class="demo-box" 
+         data-role="resizable-container, draggable" 
+         data-can-resize="false"
+         data-min-width="100"
+         data-min-height="100"
+         data-on-resize="onResize"
+         data-on-resize-stop="onResizeStop"
+         >
+        <div class="text-center" id="size"></div>
     </div>
 </div>
 
 <script src="../lib/metro.js"></script>
 <script>
     function toggleResizeMode() {
         const container = $(".demo-box");
-        const mode = container.attr("data-enable-resize");
-        container.attr("data-enable-resize", mode === "true" ? "false" : "true");
+        const mode = container.attr("data-can-resize");
+        container.attr("data-can-resize", mode === "true" ? "false" : "true");
     }
 
+    function onResize(size, element, point) {
+        $("#size").html(size.width + "x" + size.height)
+    }
+
+    function onResizeStop(size, element, point) {
+        $("#size").clear()
+    }
+    
     (() => {
         $("body").hotkey("alt+t", toggleResizeMode)
 

lib/metro.js

@@ -35679,10 +35679,13 @@
       minHeight: 0,
       maxWidth: 0,
       maxHeight: 0,
-      enableResize: true,
+      initWidth: 0,
+      initHeight: 0,
       onResizeStart: Metro2.noop,
       onResize: Metro2.noop,
       onResizeStop: Metro2.noop,
+      onResizeEnable: Metro2.noop,
+      onResizeDisable: Metro2.noop,
       onResizableContainerCreate: Metro2.noop
     };
     Metro2.resizableContainerSetup = (options) => {
@@ -35718,12 +35721,24 @@
         if (Metro2.utils.getStyleOne(element2[0], "position") === "static") {
           element2.css("position", "relative");
         }
-        const contour = $7(`<div>`).addClass("rc-contour").css({ zIndex: zIndex + 1 }).appendTo(element2);
+        if (o2.minWidth) {
+          element2.css("minWidth", o2.minWidth);
+        }
+        if (o2.minHeight) {
+          element2.css("minHeight", o2.minHeight);
+        }
+        if (o2.initWidth) {
+          element2.css("width", o2.initWidth);
+        }
+        if (o2.initHeight) {
+          element2.css("height", o2.initHeight);
+        }
+        const contour = $7(`<div>`).addClass("rc-contour").css({ zIndex: zIndex + 2 }).appendTo(element2);
         for (const p5 of this.pointers) {
-          $7(`<div>`).addClass(`rc-point -${p5}`).css({ zIndex: zIndex + 2 }).attr("data-resize-direction", p5).appendTo(contour);
+          $7(`<div>`).addClass(`rc-point -${p5}`).css({ zIndex: zIndex + 3 }).attr("data-resize-direction", p5).appendTo(contour);
         }
-        if (o2.enableResize === false) {
-          contour.addClass("disabled");
+        if (o2.canResize === false) {
+          this.disable();
         }
       },
       _createEvents: function() {
@@ -35736,20 +35751,24 @@
         const maxH = o2.maxHeight || 0;
         const clamp = Metro2.utils.clamp;
         element2.on(Metro2.events.startAll, ".rc-point", function(e2) {
-          if (!o2.canResize) return;
           e2.preventDefault();
           e2.stopPropagation();
-          const pointer = $7(this).attr("data-resize-direction");
+          const point = $7(this).attr("data-resize-direction");
           const startXY = Metro2.utils.pageXY(e2);
           const { height, width, top, left } = element2[0].getBoundingClientRect();
           const { top: pTop, left: pLeft } = element2.parent()[0].getBoundingClientRect();
+          that._fireEvent("resize-start", {
+            size: that.size(),
+            element: element2[0],
+            point
+          });
           $7(document).on(
             Metro2.events.moveAll,
             (e3) => {
               const moveXY = Metro2.utils.pageXY(e3);
               const deltaX = moveXY.x - startXY.x;
               const deltaY = moveXY.y - startXY.y;
-              if (pointer === "n") {
+              if (point === "n") {
                 const rawH = height - deltaY;
                 const newH = clamp(rawH, minH, maxH);
                 const effDy = height - newH;
@@ -35759,21 +35778,21 @@
                   top: `${newTop}px`
                 });
               }
-              if (pointer === "s") {
+              if (point === "s") {
                 const rawH = height + deltaY;
                 const newH = clamp(rawH, minH, maxH);
                 element2.css({
                   height: `${newH}px`
                 });
               }
-              if (pointer === "e") {
+              if (point === "e") {
                 const rawW = width + deltaX;
                 const newW = clamp(rawW, minW, maxW);
                 element2.css({
                   width: `${newW}px`
                 });
               }
-              if (pointer === "w") {
+              if (point === "w") {
                 const rawW = width - deltaX;
                 const newW = clamp(rawW, minW, maxW);
                 const effDx = width - newW;
@@ -35783,7 +35802,7 @@
                   left: `${newLeft}px`
                 });
               }
-              if (pointer === "ne") {
+              if (point === "ne") {
                 const rawW = width + deltaX;
                 const newW = clamp(rawW, minW, maxW);
                 const rawH = height - deltaY;
@@ -35796,7 +35815,7 @@
                   top: `${newTop}px`
                 });
               }
-              if (pointer === "nw") {
+              if (point === "nw") {
                 const rawW = width - deltaX;
                 const newW = clamp(rawW, minW, maxW);
                 const effDx = width - newW;
@@ -35812,7 +35831,7 @@
                   top: `${newTop}px`
                 });
               }
-              if (pointer === "se") {
+              if (point === "se") {
                 const rawW = width + deltaX;
                 const newW = clamp(rawW, minW, maxW);
                 const rawH = height + deltaY;
@@ -35822,7 +35841,7 @@
                   height: `${newH}px`
                 });
               }
-              if (pointer === "sw") {
+              if (point === "sw") {
                 const rawW = width - deltaX;
                 const newW = clamp(rawW, minW, maxW);
                 const effDx = width - newW;
@@ -35835,6 +35854,11 @@
                   left: `${newLeft}px`
                 });
               }
+              that._fireEvent("resize", {
+                size: that.size(),
+                element: element2[0],
+                point
+              });
             },
             { ns: that.id }
           );
@@ -35843,20 +35867,51 @@
             () => {
               $7(document).off(Metro2.events.moveAll, { ns: that.id });
               $7(document).off(Metro2.events.stopAll, { ns: that.id });
+              that._fireEvent("resize-stop", {
+                size: that.size(),
+                element: element2[0],
+                point
+              });
             },
             { ns: that.id }
           );
         });
       },
+      size: function(width, height) {
+        const element2 = this.element;
+        const clamp = Metro2.utils.clamp;
+        const o2 = this.options;
+        if (width !== void 0) {
+          element2.css("width", clamp(width, o2.minWidth, o2.maxWidth));
+        }
+        if (height !== void 0) {
+          element2.css("height", clamp(height, o2.minHeight, o2.maxHeight));
+        }
+        const rect = element2[0].getBoundingClientRect();
+        return {
+          width: rect.width,
+          height: rect.height,
+          top: rect.top,
+          left: rect.left
+        };
+      },
       enable: function() {
         this.element.find(".rc-contour").removeClass("disabled");
+        this._fireEvent("resize-enable", {
+          size: this.size(),
+          element: this.element
+        });
       },
       disable: function() {
         this.element.find(".rc-contour").addClass("disabled");
+        this._fireEvent("resize-disable", {
+          size: this.size(),
+          element: this.element
+        });
       },
       changeAttribute: function(attr, val) {
         switch (attr) {
-          case "data-enable-resize": {
+          case "data-can-resize": {
             if (val === "true") {
               this.enable();
             } else {