Recipe config 78207 (#55)

* Add copyPlaceholder option to CUI.Input

New boolean option that shows a button inside the input (on hover)
to apply the placeholder value as the actual input value.
The button is only visible when there is a placeholder and the input
is empty. Uses storeValue to support NumberInput correctly.

Also propagates the option through MultiInput to MultiInputInput
for multi-language field support.

See #78207

Author: novaxpro

public/cui.js

@@ -48485,6 +48485,10 @@ CUI.Input = (function(superClass) {
         check: function(v) {
           return v instanceof CUI.DOMElement;
         }
+      },
+      copyPlaceholder: {
+        "default": false,
+        check: Boolean
       }
     });
   };
@@ -48573,7 +48577,8 @@ CUI.Input = (function(superClass) {
     if (typeof this.__resizeForPlaceholder === "function") {
       this.__resizeForPlaceholder();
     }
-    return this.setContentSize();
+    this.setContentSize();
+    return this.__updateCopyPlaceholderButton();
   };
 
   Input.prototype.getPlaceholder = function() {
@@ -49391,6 +49396,9 @@ CUI.Input = (function(superClass) {
       CUI.dom.addClass(this._leftControlElement, 'cui-input-control-element');
       this.prepend(this._leftControlElement, this.getTemplateKeyForRender());
     }
+    if (this._copyPlaceholder) {
+      this.__initCopyPlaceholderButton();
+    }
     ref = ["empty", "invalid", "valid"];
     for (j = 0, len1 = ref.length; j < len1; j++) {
       k = ref[j];
@@ -49512,6 +49520,7 @@ CUI.Input = (function(superClass) {
       this.__input.value = value;
     }
     this.checkInput();
+    this.__updateCopyPlaceholderButton();
     return this;
   };
 
@@ -49785,6 +49794,56 @@ CUI.Input = (function(superClass) {
     return this;
   };
 
+  Input.prototype.__initCopyPlaceholderButton = function() {
+    this.__copyPlaceholderBtn = new CUI.Button({
+      icon: "fa-level-down",
+      "class": "cui-input-copy-placeholder-button",
+      tooltip: {
+        text: "Apply"
+      },
+      onClick: (function(_this) {
+        return function() {
+          var placeholder;
+          placeholder = _this.getPlaceholder();
+          if (CUI.util.isEmpty(placeholder)) {
+            return;
+          }
+          _this.__input.value = placeholder;
+          _this.storeValue(placeholder);
+          _this.checkInput();
+          _this.__updateCopyPlaceholderButton();
+        };
+      })(this)
+    });
+    this.append(this.__copyPlaceholderBtn, this.getTemplateKeyForRender());
+    this.__updateCopyPlaceholderButton();
+    CUI.Events.listen({
+      node: this.__input,
+      type: "input",
+      instance: this,
+      call: (function(_this) {
+        return function() {
+          return _this.__updateCopyPlaceholderButton();
+        };
+      })(this)
+    });
+  };
+
+  Input.prototype.__updateCopyPlaceholderButton = function() {
+    var hasPlaceholder, hasValue, placeholder;
+    if (!this.__copyPlaceholderBtn) {
+      return;
+    }
+    placeholder = this.getPlaceholder();
+    hasPlaceholder = !CUI.util.isEmpty(placeholder);
+    hasValue = this.hasUserInput();
+    if (hasPlaceholder && !hasValue) {
+      CUI.dom.showElement(this.__copyPlaceholderBtn);
+    } else {
+      CUI.dom.hideElement(this.__copyPlaceholderBtn);
+    }
+  };
+
   Input.prototype.destroy = function() {
     this.__removeShadowInput();
     return Input.__super__.destroy.call(this);
@@ -58307,6 +58366,10 @@ CUI.MultiInput = (function(superClass) {
       user_selectable: {
         "default": false,
         check: Boolean
+      },
+      copyPlaceholder: {
+        "default": false,
+        check: Boolean
       }
     });
   };
@@ -58518,7 +58581,7 @@ CUI.MultiInput = (function(superClass) {
   };
 
   MultiInput.prototype.__initInputs = function() {
-    var fn, i, idx, input, input_opts, key, len, ref, ref1, ref2;
+    var fn, i, idx, input, input_opts, key, len, ref, ref1, ref2, ref3;
     if (this.__inputs) {
       return;
     }
@@ -58628,6 +58691,7 @@ CUI.MultiInput = (function(superClass) {
         undo_support: false,
         content_size: this._content_size,
         placeholder: ((ref1 = this._placeholder) != null ? ref1[key.name] : void 0) || ((ref2 = this._placeholder) != null ? ref2["default"] : void 0),
+        copyPlaceholder: this._copyPlaceholder && !CUI.util.isEmpty((ref3 = this._placeholder) != null ? ref3[key.name] : void 0),
         onDataInit: (function(_this) {
           return function(field, data) {
             if (_this.__user_selectable && CUI.util.isEmpty(data[field.getName()])) {

public/cui.min.js

@@ -155,6 +155,9 @@ class CUI.Input extends CUI.DataFieldInput
 				check: (v) -> v instanceof CUI.DOMElement or CUI.util.isFunction(v)
 			leftControlElement:
 				check: (v) -> v instanceof CUI.DOMElement
+			copyPlaceholder:
+				default: false
+				check: Boolean
 
 	readOpts: ->
 
@@ -225,6 +228,7 @@ class CUI.Input extends CUI.DataFieldInput
 		CUI.dom.setAttribute(@__input, "placeholder", placeholder)
 		@__resizeForPlaceholder?()
 		@setContentSize()
+		@__updateCopyPlaceholderButton()
 
 	getPlaceholder: ->
 		if @__dynamicPlaceholder
@@ -989,6 +993,9 @@ class CUI.Input extends CUI.DataFieldInput
 			CUI.dom.addClass(@_leftControlElement, 'cui-input-control-element')
 			@prepend(@_leftControlElement, @getTemplateKeyForRender())
 
+		if @_copyPlaceholder
+			@__initCopyPlaceholderButton()
+
 		# @append(@getChangedMarker(), @getTemplateKeyForRender())
 
 		for k in ["empty", "invalid", "valid"]
@@ -1080,6 +1087,7 @@ class CUI.Input extends CUI.DataFieldInput
 			# prevent focus loss if value is the same
 			@__input.value = value
 		@checkInput()
+		@__updateCopyPlaceholderButton()
 		@
 
 	getValueForDisplay: ->
@@ -1331,6 +1339,47 @@ class CUI.Input extends CUI.DataFieldInput
 		#console.debug "moveCursor new range", @getRangeFromCursor()
 		@
 
+	__initCopyPlaceholderButton: ->
+		@__copyPlaceholderBtn = new CUI.Button
+			icon: "fa-level-down"
+			class: "cui-input-copy-placeholder-button"
+			tooltip: text: "Apply"
+			onClick: =>
+				placeholder = @getPlaceholder()
+				if CUI.util.isEmpty(placeholder)
+					return
+				@__input.value = placeholder
+				@storeValue(placeholder)
+				@checkInput()
+				@__updateCopyPlaceholderButton()
+				return
+
+		@append(@__copyPlaceholderBtn, @getTemplateKeyForRender())
+		@__updateCopyPlaceholderButton()
+
+		CUI.Events.listen
+			node: @__input
+			type: "input"
+			instance: @
+			call: =>
+				@__updateCopyPlaceholderButton()
+
+		return
+
+	__updateCopyPlaceholderButton: ->
+		if not @__copyPlaceholderBtn
+			return
+
+		placeholder = @getPlaceholder()
+		hasPlaceholder = not CUI.util.isEmpty(placeholder)
+		hasValue = @hasUserInput()
+
+		if hasPlaceholder and not hasValue
+			CUI.dom.showElement(@__copyPlaceholderBtn)
+		else
+			CUI.dom.hideElement(@__copyPlaceholderBtn)
+		return
+
 	destroy: ->
 		@__removeShadowInput()
 		super()

public/cui_fylr.css

@@ -41,6 +41,9 @@ class CUI.MultiInput extends CUI.DataFieldInput
 			user_selectable:
 				default: false
 				check: Boolean
+			copyPlaceholder:
+				default: false
+				check: Boolean
 
 	readOpts: ->
 		super()
@@ -212,6 +215,7 @@ class CUI.MultiInput extends CUI.DataFieldInput
 				undo_support: false
 				content_size: @_content_size
 				placeholder: @_placeholder?[key.name] or @_placeholder?["default"]
+				copyPlaceholder: @_copyPlaceholder and not CUI.util.isEmpty(@_placeholder?[key.name])
 				onDataInit: (field, data) =>
 					if @__user_selectable and CUI.util.isEmpty(data[field.getName()])
 						field.hide()