diff --git a/src/css/style_mosaico_content.less b/src/css/style_mosaico_content.less index 882f2479f..865b54a23 100644 --- a/src/css/style_mosaico_content.less +++ b/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; } } diff --git a/src/js/bindings/syncedhoverclass.js b/src/js/bindings/syncedhoverclass.js new file mode 100644 index 000000000..1d78b004f --- /dev/null +++ b/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(); + }); + + }, +}; diff --git a/src/js/converter/parser.js b/src/js/converter/parser.js index 4ba9c2caa..3270d9731 100644 --- a/src/js/converter/parser.js +++ b/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 = $('
')[0]; domutils.setAttribute(resizingDiv, 'data-bind', resizingBinding); diff --git a/src/js/ko-bindings.js b/src/js/ko-bindings.js index 1c4ffb79f..dc0a3c373 100644 --- a/src/js/ko-bindings.js +++ b/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"); \ No newline at end of file +require("./bindings/scrollintoview.js"); +require("./bindings/syncedhoverclass.js"); \ No newline at end of file