"linked" hover for resizing handles dealing with the same variable

src/css/style_mosaico_content.less

@@ -136,7 +136,8 @@
   .ui-resizable-handle {
     display: none !important;
   }
-  &:hover .ui-resizable-handle {
+  &:hover .ui-resizable-handle,
+  .resizing-hover .ui-resizable-handle, {
     display: block !important;
   }
 }

src/js/bindings/syncedhoverclass.js

@@ -0,0 +1,33 @@
+"use strict";
+/* globals global:false */
+
+var ko = require("knockout");
+
+/**
+ * wants a "ref" observable, that will be instrumented with an additional observable shared by other bindings pointing to the same observable
+ * wants also a "class" that will be set when the element is hovered (that will also be set when any of the other element with the same ref will be hovered)
+ */
+ko.bindingHandlers['syncedhoverclass'] = {
+  init: function(element, valueAccessor) {
+    if (typeof valueAccessor().ref.syncedHoverObservable == 'undefined') valueAccessor().ref.syncedHoverObservable = ko.observable(false);
+
+    var syncedHoverObservable = valueAccessor().ref.syncedHoverObservable;
+    var className = valueAccessor().class;
+
+    ko.applyBindingsToNode(element, {
+        event: {
+            mouseenter: function () { syncedHoverObservable(true); },
+            mouseleave: function () { syncedHoverObservable(false); }
+        }
+    });
+
+    var subscriber = syncedHoverObservable.subscribe(function(hover) {
+      ko.utils.toggleDomNodeCssClass(element, className, hover);
+    });
+
+    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
+      subscriber.dispose();
+    });
+
+  },
+};

src/js/converter/parser.js

@@ -172,7 +172,7 @@ var processBlock = function(element, defs, themeUpdater, blockPusher, templateUr
     if (typeof defs[bindingValue] !== 'undefined' && typeof defs[bindingValue]._min !== 'undefined') resizableOptions += ', minHeight: '+defs[bindingValue]._min;
     if (typeof defs[bindingValue] !== 'undefined' && typeof defs[bindingValue]._max !== 'undefined') resizableOptions += ', maxHeight: '+defs[bindingValue]._max;
 
-    var resizingBinding = "extresizable: { data: " + bindingValue + ", options: { handles: 's'" + resizableOptions + ", resizing: $root.resizing } }, attr: { 'data-size': ko.utils.unwrapObservable(" + bindingValue + ")+'px' } ";
+    var resizingBinding = "syncedhoverclass: { ref: " + bindingValue + ", class: 'resizing-hover' }, extresizable: { data: " + bindingValue + ", options: { handles: 's'" + resizableOptions + ", resizing: $root.resizing } }, attr: { 'data-size': ko.utils.unwrapObservable(" + bindingValue + ")+'px' } ";
 
     var resizingDiv = $('<div class="ui-resizing-div" data-ko-wrap="false" style="width: 100%; height: 100%"></div>')[0];
     domutils.setAttribute(resizingDiv, 'data-bind', resizingBinding);

src/js/ko-bindings.js

@@ -22,4 +22,5 @@ require("./bindings/eventable.js");
 require("./bindings/tooltips.js");
 require("./bindings/extender-pagination.js");
 require("./bindings/validated-value.js");
-require("./bindings/scrollintoview.js");
+require("./bindings/scrollintoview.js");
+require("./bindings/syncedhoverclass.js");