Explorar el Código

HUE-3497 [editor] Auto extend var text input if needed

Enrico Berti hace 9 años
padre
commit
8b8ec92e27

+ 40 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3638,4 +3638,44 @@
     }
   };
 
+  ko.bindingHandlers.autogrowInput = {
+    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
+      var o = $.extend({
+        minWidth: 0,
+        maxWidth: 1000,
+        comfortZone: 70
+      }, valueAccessor());
+      var minWidth = o.minWidth || $(element).width(),
+        val = '',
+        input = $(element),
+        testSubject = $('<tester/>').css({
+          position: 'absolute',
+          top: -9999,
+          left: -9999,
+          width: 'auto',
+          fontSize: input.css('fontSize'),
+          fontFamily: input.css('fontFamily'),
+          fontWeight: input.css('fontWeight'),
+          letterSpacing: input.css('letterSpacing'),
+          whiteSpace: 'nowrap'
+        }),
+        check = function () {
+          if (val === (val = input.val())) {
+            return;
+          }
+          var escaped = val.replace(/&/g, '&amp;').replace(/\s/g, ' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+          testSubject.html(escaped);
+          var testerWidth = testSubject.width(),
+            newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
+            currentWidth = input.width(),
+            isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) || (newWidth > minWidth && newWidth < o.maxWidth);
+          if (isValidWidthChange) {
+            input.width(newWidth);
+          }
+        };
+      testSubject.insertAfter(element);
+      ko.utils.registerEventHandler(element, 'keyup keydown blur update', check);
+    }
+  };
+
 }));

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -730,7 +730,7 @@ ${ hueIcons.symbols() }
         <li>
           <div class="input-prepend margin-top-10">
             <span class="muted add-on" data-bind="text: name"></span>
-            <input class="input-medium" type="text" placeholder="${ _("Variable value") }" data-bind="value: value">
+            <input class="input-medium" type="text" placeholder="${ _("Variable value") }" data-bind="autogrowInput: { minWidth: 150, maxWidth: 270, comfortZone: 15 }">
           </div>
         </li>
       </ul>