Fixes for resizers (data-ko-height and extresizable binding)

voidlabs · May 19, 2022 · 2cf3589 · 2cf3589
1 parent a1bd793
commit 2cf3589
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/css/style_mosaico_content.less b/src/css/style_mosaico_content.less
@@ -133,6 +133,12 @@
 }
 #main-edit-area .ui-resizable-container {
   position: relative;
+  .ui-resizable-handle {
+    display: none !important;
+  }
+  &:hover .ui-resizable-handle {
+    display: block !important;
+  }
 }
 #main-edit-area .ui-resizable.ui-resizing-div {
   position: absolute;
@@ -141,6 +147,11 @@
   right: 0;
   bottom: 0;
 
+  &.ui-resizable-resizing {
+    z-index: 1000;
+    background-color: #ffffffcc;
+  }
+
   &.ui-resizable-resizing:before {
     display: block;
   }

diff --git a/src/js/bindings/extresizable.js b/src/js/bindings/extresizable.js
@@ -33,15 +33,14 @@
                 //get reference to drop method
                 value = "data" in value ? value.data : valueAccessor();
 
-
-                // TODO questi devono venire da parametri
+                // TODO we probably should get this from parameters
                 options.minHeight = 2;
                 options.maxHeight = 1000;
-                options.autoHide = true;
+                options.autoHide = false;
                 // options.helper = $("<div/>");
                 // options.ghost = true;
                 options.start = function(event, ui) {
-                    console.log("start");
+                    // console.log("start");
                     if (typeof options.resizing == 'function') options.resizing(true);
                     ko.utils.toggleDomNodeCssClass(element, "resizable-resizing", true); 
                     /*
@@ -53,7 +52,7 @@
                     */
                 };
                 options.stop = function(event, ui) {
-                    console.log("stop");
+                    // console.log("stop");
                     if (typeof options.resizing == 'function') options.resizing(false);
                     ko.utils.toggleDomNodeCssClass(element, "resizable-resizing", false); 
                     event.target.style.height = "auto";
@@ -65,7 +64,7 @@
                     */
                 };
                 options.resize = function(event, ui) {
-                    console.log("resize", ui.size.height, ui.originalSize.height, value());
+                    // console.log("resize", ui.size.height, ui.originalSize.height, value());
                     value(ui.size.height);
                     ui.size.height = value();
                 };
@@ -75,14 +74,14 @@
 
                 //initialize resizable
                 $(element).resizable(resizableOptions);
-                console.log(element, "resizable init");
+                // console.log(element, "resizable init");
 
                 //handle enabling/disabling resizable
                 if (isEnabled !== undefined) {
                     ko.computed({
                         read: function() {
                             $(element).resizable(unwrap(isEnabled) ? "enable": "disable");
-                            console.log(element, "resizable enabled read");
+                            // console.log(element, "resizable enabled read");
                         },
                         disposeWhenNodeIsRemoved: element
                     });
@@ -91,7 +90,7 @@
                 //handle disposal
                 ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                     $(element).resizable("destroy");
-                    console.log(element, "resizable destroy");
+                    // console.log(element, "resizable destroy");
                 });
 
             }