makeup-floating-label - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/index.js

@@ -16,19 +16,61 @@ 'use strict';
   textboxElementBackgroundRGB: ['rgb(255, 255, 255)', 'rgb(247, 247, 247)', 'rgb(245, 245, 245)', 'rgb(230, 32, 72)', 'rgb(254, 245, 246)']
-};
+}; // Common getter. Will get either first option text (for select),
+// or placeholder for textbox
 
-function onMutation() {
-  var textboxFocus = isFocused(this.textboxEl);
+function getPlaceHolder(formControlEl) {
+  if (isSelect(formControlEl)) {
+    var firstOption = formControlEl.querySelector('option');
+    return !firstOption.value ? firstOption.text : null;
+  } else if (formControlEl.hasAttribute('placeholder')) {
+    return formControlEl.getAttribute('placeholder');
+  }
+} // Common setter. Will set either first option text (for select),
+// or placeholder for textbox
 
-  if (this.textboxEl.hasAttribute('placeholder')) {
-    this.placeholder = this.textboxEl.getAttribute('placeholder');
+
+function setPlaceholder(formControlEl, value) {
+  if (isSelect(formControlEl)) {
+    formControlEl.style['min-width'] = '';
+    var beforeWidth = formControlEl.offsetWidth;
+    formControlEl.querySelector('option').text = value;
+
+    if (!value && beforeWidth > formControlEl.offsetWidth) {
+      formControlEl.style['min-width'] = "".concat(beforeWidth, "px");
+    }
+  } else if (value) {
+    formControlEl.setAttribute('placeholder', value);
+  } else {
+    formControlEl.removeAttribute('placeholder');
   }
+} // Called on mutatation. Sets placeholder for current state (focused or unfocused)
 
-  if (!!this.placeholder && textboxFocus && !this.textboxEl.hasAttribute('placeholder')) {
-    // Input has focus, make sure it has placeholder
-    this.textboxEl.setAttribute('placeholder', this.placeholder);
-  } else if (!textboxFocus && this.textboxEl.hasAttribute('placeholder')) {
-    this.textboxEl.removeAttribute('placeholder');
+
+function checkForPlaceholder(formControlEl) {
+  if (isSelect(formControlEl)) {
+    var firstOption = formControlEl.querySelector('option');
+
+    if (!!firstOption.value) {
+      // If first option has a value then it is not a placeholder
+      return;
+    }
+
+    return !!firstOption.text;
   }
 
-  if (isInvalid(this.textboxEl)) {
+  return formControlEl.hasAttribute('placeholder');
+}
+
+function onMutation() {
+  var textboxFocus = isFocused(this.formControlEl);
+  this.placeholder = getPlaceHolder(this.formControlEl) || this.placeholder;
+  var placeholderCheck = checkForPlaceholder(this.formControlEl, this.placeholder);
+
+  if (!!this.placeholder && textboxFocus && !placeholderCheck) {
+    // Input has focus, make sure it has "placeholder" option
+    setPlaceholder(this.formControlEl, this.placeholder);
+  } else if (!textboxFocus && placeholderCheck) {
+    setPlaceholder(this.formControlEl, '');
+  }
+
+  if (isInvalid(this.formControlEl)) {
     this.labelEl.classList.add(this.options.labelElementInvalidModifier);
@@ -39,3 +81,3 @@ } else {
 
-  if (isDisabled(this.textboxEl)) {
+  if (isDisabled(this.formControlEl)) {
     this.labelEl.classList.add(this.options.labelElementDisabledModifier);
@@ -47,6 +89,10 @@ } else {
 
-function isFocused(textboxEl) {
-  return document.activeElement === textboxEl;
+function isFocused(formControlEl) {
+  return document.activeElement === formControlEl;
 }
 
+function isSelect(formControlEl) {
+  return formControlEl.tagName === 'SELECT';
+}
+
 function hasValue(input) {
@@ -67,8 +113,12 @@ return input.value.length > 0;
   // https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/35783761#35783761
-  var bgColor = getComputedStyle(input).backgroundColor;
-  return Array.isArray(color) ? !color.includes(bgColor) : bgColor !== color;
+  if (!isSelect(input)) {
+    var bgColor = getComputedStyle(input).backgroundColor;
+    return Array.isArray(color) ? !color.includes(bgColor) : bgColor !== color;
+  }
+
+  return false;
 }
 
 function _onBlur() {
-  if (!hasValue(this.textboxEl)) {
+  if (!hasValue(this.formControlEl)) {
     this.labelEl.classList.add(this.options.labelElementInlineModifier);
@@ -79,7 +129,7 @@ }
 
-  if (isInvalid(this.textboxEl)) {
+  if (isInvalid(this.formControlEl)) {
     this.labelEl.classList.add(this.options.labelElementInvalidModifier);
   }
 
-  this.textboxEl.removeAttribute('placeholder');
+  setPlaceholder(this.formControlEl, '');
 }
@@ -94,3 +144,3 @@
   if (this.placeholder) {
-    this.textboxEl.setAttribute('placeholder', this.placeholder);
+    setPlaceholder(this.formControlEl, this.placeholder);
   }
@@ -107,13 +157,13 @@ }
     this.labelEl = this.rootEl.querySelector('label');
-    this.textboxEl = this.rootEl.querySelector('input,textarea');
+    this.formControlEl = this.rootEl.querySelector('input,textarea,select');
     this._onBlurListener = _onBlur.bind(this);
     this._onFocusListener = _onFocus.bind(this);
-    this.textboxEl.addEventListener('blur', this._onBlurListener);
-    this.textboxEl.addEventListener('focus', this._onFocusListener);
+    this.formControlEl.addEventListener('blur', this._onBlurListener);
+    this.formControlEl.addEventListener('focus', this._onFocusListener);
 
-    if (!hasValue(this.textboxEl) && !isAutofilled(this.textboxEl, this.options.textboxElementBackgroundRGB)) {
+    if (!hasValue(this.formControlEl) && !isAutofilled(this.formControlEl, this.options.textboxElementBackgroundRGB)) {
       this.labelEl.classList.add(this.options.labelElementInlineModifier);
     }
 
-    if (isFocused(this.textboxEl)) {
+    if (isFocused(this.formControlEl)) {
       this.labelEl.classList.add(this.options.labelElementFocusModifier);
@@ -124,5 +174,5 @@ }
 
-    this._observer.observe(this.textboxEl, {
-      childList: false,
-      subtree: false,
+    this._observer.observe(this.formControlEl, {
+      childList: isSelect(this.formControlEl),
+      subtree: isSelect(this.formControlEl),
       attributeFilter: ['disabled', 'aria-invalid', 'placeholder', 'value'],
@@ -141,3 +191,3 @@ attributes: true
     value: function refresh() {
-      if (hasValue(this.textboxEl) || isAutofilled(this.textboxEl, this.options.textboxElementBackgroundRGB)) {
+      if (hasValue(this.formControlEl) || isSelect(this.formControlEl) || isAutofilled(this.formControlEl, this.options.textboxElementBackgroundRGB)) {
         this.labelEl.classList.remove(this.options.labelElementInlineModifier);
@@ -148,3 +198,3 @@ } else {
 
-      if (isFocused(this.textboxEl)) {
+      if (isFocused(this.formControlEl)) {
         this.labelEl.classList.add(this.options.labelElementFocusModifier);
@@ -151,0 +201,0 @@ }

package-lock.json

 {
   "name": "makeup-floating-label",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 1
 }

package.json

 {
   "name": "makeup-floating-label",
   "description": "Module for creating an accessible, progressively enhanced floating label",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "repository": "https://github.com/makeup/makeup-js/tree/master/packages/makeup-floating-label",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11276

increased by17.77%

Lines of code

167

increased by31.5%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes