@goldenpine/react-form-builder2 0.20.3-build.31 → 0.20.3-build.32

package/lib/form-elements/floating-placeholder.js

@@ -0,0 +1,89 @@
+"use strict";
+
+(function (window, document) {
+  'use strict';
+
+  var CSS_ID = 'floating-placeholder-styles';
+  function injectStyles() {
+    if (document.getElementById(CSS_ID)) return;
+    var css = "\n.floating-input-wrapper{position:relative}\n.floating-input-wrapper .fb-placeholder{\n  position:absolute;\n  left:.75rem;\n  top:50%;\n  transform:translateY(-50%);\n  transition:all .15s ease;\n  color: #6c757d;\n  pointer-events:none;\n  font-size:1rem;\n  white-space:nowrap;\n  overflow:hidden;\n  text-overflow:ellipsis;\n}\n.floating-input-wrapper .fb-placeholder.shrunken{\n  top:.25rem;\n  transform:none;\n  font-size:.75rem;\n  color:#495057;\n}\n.floating-input-wrapper.has-placeholder input.form-control,\n.floating-input-wrapper.has-placeholder textarea.form-control{\n  padding-top:1.5rem;\n}\n";
+    var style = document.createElement('style');
+    style.id = CSS_ID;
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(css));
+    (document.head || document.documentElement).appendChild(style);
+  }
+  function processWrapper(wrapper) {
+    if (!wrapper) return;
+    var input = wrapper.querySelector('input, textarea');
+    if (!input) return;
+
+    // find existing placeholder span or derive placeholder text
+    var placeholderSpan = wrapper.querySelector('.fb-placeholder');
+    var derivedPlaceholder = input.getAttribute('data-placeholder') || input.getAttribute('placeholder') || '';
+
+    // if span not present but placeholder text exists, create it
+    if (!placeholderSpan && derivedPlaceholder) {
+      placeholderSpan = document.createElement('span');
+      placeholderSpan.className = 'fb-placeholder';
+      placeholderSpan.textContent = derivedPlaceholder;
+      wrapper.appendChild(placeholderSpan);
+    }
+    if (placeholderSpan) wrapper.classList.add('has-placeholder');
+    var update = function update() {
+      var val = input.value;
+      if (!placeholderSpan) return;
+      if (val && String(val).length > 0) {
+        placeholderSpan.classList.add('shrunken');
+      } else if (document.activeElement === input) {
+        // keep shrunken while focused
+        placeholderSpan.classList.add('shrunken');
+      } else {
+        placeholderSpan.classList.remove('shrunken');
+      }
+    };
+    input.addEventListener('input', update);
+    input.addEventListener('focus', function () {
+      wrapper.classList.add('focused');
+      update();
+    });
+    input.addEventListener('blur', function () {
+      wrapper.classList.remove('focused');
+      update();
+    });
+
+    // clicking the wrapper focuses inner input
+    wrapper.addEventListener('click', function (e) {
+      // allow clicks on other controls inside wrapper
+      if (e.target === wrapper || e.target === placeholderSpan) {
+        input.focus();
+      }
+    });
+
+    // initial state
+    update();
+  }
+  function init(options) {
+    options = options || {};
+    if (options.injectStyles !== false) injectStyles();
+    var wrappers = document.querySelectorAll('.floating-input-wrapper');
+    wrappers.forEach(processWrapper);
+  }
+
+  // auto init on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () {
+      return init();
+    });
+  } else {
+    // run on next tick
+    setTimeout(function () {
+      return init();
+    }, 0);
+  }
+
+  // expose API
+  window.FloatingPlaceholder = {
+    init: init
+  };
+})(window, document);