Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
floating-label
Advanced tools
floating-label - npm Package Compare versions
Comparing version 1.0.1 to 2.0.0
@@ -55,5 +55,10 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.floatingLabel = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){ | ||
| var inputEl = evt.target || evt.srcElement, | ||
| labelEl = self.getPreviousSibling( inputEl ), | ||
| inputID = inputEl.getAttribute( 'id' ), | ||
| labelEl = document.querySelector( 'label[for="' + inputID + '"]' ), | ||
| typeRe = /text|password|url|email|tel|search|number/i; | ||
| if ( !labelEl ) { | ||
| return; | ||
| } | ||
| if ( ( inputEl.nodeName === 'INPUT' && typeRe.test( inputEl.getAttribute( 'type' ))) || inputEl.nodeName === 'TEXTAREA' ) { | ||
@@ -67,4 +72,9 @@ showHideLabel( inputEl, labelEl ); | ||
| var inputEl = inputs[ input ], | ||
| labelEl = self.getPreviousSibling( inputEl ); | ||
| inputID = inputEl.getAttribute( 'id' ), | ||
| labelEl = document.querySelector( 'label[for="' + inputID + '"]' ); | ||
| if ( !labelEl ) { | ||
| return; | ||
| } | ||
| showHideLabel( inputEl, labelEl ); | ||
@@ -71,0 +81,0 @@ |
@@ -1,1 +0,1 @@ | ||
| (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.floatingLabel=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module,exports){module.exports={config:{floatingClassName:"floating",delegateEvents:false},init:function initializeFloatingLabel(opt){"use strict";this._eventsDelegated=false;if(opt instanceof Object){for(var option in opt){if(window.Object.hasOwnProperty.call(opt,option)&&window.Object.hasOwnProperty.call(this.config,option)){this.config[option]=opt[option]}}}if(window.addEventListener){window.addEventListener("DOMContentLoaded",this.evaluateInputs.bind(this),false)}else{document.onreadystatechange=this.evaluateInputs.bind(this)}},evaluateInputs:function evaluateInputs(){"use strict";var self=this,inputs=document.querySelectorAll('input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], textarea');function showHideLabel(input,label){if(input.value.length){self.addClass(label,self.config.floatingClassName)}else{self.removeClass(label,self.config.floatingClassName)}}function inputEventHandler(evt){if(!evt){evt=window.event}var inputEl=evt.target||evt.srcElement,labelEl=self.getPreviousSibling(inputEl),typeRe=/text|password|url|email|tel|search|number/i;if(inputEl.nodeName==="INPUT"&&typeRe.test(inputEl.getAttribute("type"))||inputEl.nodeName==="TEXTAREA"){showHideLabel(inputEl,labelEl)}}for(var input=0;input<inputs.length;input++){if(inputs[input]instanceof Element&&window.Object.hasOwnProperty.call(inputs,input)){var inputEl=inputs[input],labelEl=self.getPreviousSibling(inputEl);showHideLabel(inputEl,labelEl);this.removeEventListener(inputEl,"keyup",inputEventHandler,false);this.removeEventListener(inputEl,"input",inputEventHandler,false);if(!this.config.delegateEvents){this.addEventListener(inputEl,"keyup",inputEventHandler,false);this.addEventListener(inputEl,"input",inputEventHandler,false)}}}if(this.config.delegateEvents&&!this._eventsDelegated){this.addEventListener(document.body,"keyup",inputEventHandler,false);this.addEventListener(document.body,"input",inputEventHandler,false);this._eventsDelegated=true}},getPreviousSibling:function getPreviousSibling(el){"use strict";el=el.previousSibling;while(el&&el.nodeType!==1){el=el.previousSibling}return el},addClass:function addClass(el,className){"use strict";if(el.classList){el.classList.add(className)}else{el.className+=" "+className}return el},removeClass:function removeClass(el,className){"use strict";if(el){if(el.classList){el.classList.remove(className)}else{el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}return el},hasClass:function hasClass(el,className){"use strict";if(el.classList){return el.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(el.className)}},addEventListener:function addEventListener(el,eventName,handler,useCapture){"use strict";if(!useCapture){useCapture=false}if(el.addEventListener){el.addEventListener(eventName,handler,useCapture);return el}else{if(eventName==="focus"){eventName="focusin"}el.attachEvent("on"+eventName,function(){handler.call(el)});return el}},removeEventListener:function removeEventListener(el,eventName,handler,useCapture){"use strict";if(!useCapture){useCapture=false}if(el.removeEventListener){el.removeEventListener(eventName,handler,useCapture)}else{if(eventName==="focus"){eventName="focusin"}el.detachEvent("on"+eventName,function(){handler.call(el)})}return el}}},{}]},{},[1])(1)}); | ||
| (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.floatingLabel=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module,exports){module.exports={config:{floatingClassName:"floating",delegateEvents:false},init:function initializeFloatingLabel(opt){"use strict";this._eventsDelegated=false;if(opt instanceof Object){for(var option in opt){if(window.Object.hasOwnProperty.call(opt,option)&&window.Object.hasOwnProperty.call(this.config,option)){this.config[option]=opt[option]}}}if(window.addEventListener){window.addEventListener("DOMContentLoaded",this.evaluateInputs.bind(this),false)}else{document.onreadystatechange=this.evaluateInputs.bind(this)}},evaluateInputs:function evaluateInputs(){"use strict";var self=this,inputs=document.querySelectorAll('input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], textarea');function showHideLabel(input,label){if(input.value.length){self.addClass(label,self.config.floatingClassName)}else{self.removeClass(label,self.config.floatingClassName)}}function inputEventHandler(evt){if(!evt){evt=window.event}var inputEl=evt.target||evt.srcElement,inputID=inputEl.getAttribute("id"),labelEl=document.querySelector('label[for="'+inputID+'"]'),typeRe=/text|password|url|email|tel|search|number/i;if(!labelEl){return}if(inputEl.nodeName==="INPUT"&&typeRe.test(inputEl.getAttribute("type"))||inputEl.nodeName==="TEXTAREA"){showHideLabel(inputEl,labelEl)}}for(var input=0;input<inputs.length;input++){if(inputs[input]instanceof Element&&window.Object.hasOwnProperty.call(inputs,input)){var inputEl=inputs[input],inputID=inputEl.getAttribute("id"),labelEl=document.querySelector('label[for="'+inputID+'"]');if(!labelEl){return}showHideLabel(inputEl,labelEl);this.removeEventListener(inputEl,"keyup",inputEventHandler,false);this.removeEventListener(inputEl,"input",inputEventHandler,false);if(!this.config.delegateEvents){this.addEventListener(inputEl,"keyup",inputEventHandler,false);this.addEventListener(inputEl,"input",inputEventHandler,false)}}}if(this.config.delegateEvents&&!this._eventsDelegated){this.addEventListener(document.body,"keyup",inputEventHandler,false);this.addEventListener(document.body,"input",inputEventHandler,false);this._eventsDelegated=true}},getPreviousSibling:function getPreviousSibling(el){"use strict";el=el.previousSibling;while(el&&el.nodeType!==1){el=el.previousSibling}return el},addClass:function addClass(el,className){"use strict";if(el.classList){el.classList.add(className)}else{el.className+=" "+className}return el},removeClass:function removeClass(el,className){"use strict";if(el){if(el.classList){el.classList.remove(className)}else{el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")}}return el},hasClass:function hasClass(el,className){"use strict";if(el.classList){return el.classList.contains(className)}else{return new RegExp("(^| )"+className+"( |$)","gi").test(el.className)}},addEventListener:function addEventListener(el,eventName,handler,useCapture){"use strict";if(!useCapture){useCapture=false}if(el.addEventListener){el.addEventListener(eventName,handler,useCapture);return el}else{if(eventName==="focus"){eventName="focusin"}el.attachEvent("on"+eventName,function(){handler.call(el)});return el}},removeEventListener:function removeEventListener(el,eventName,handler,useCapture){"use strict";if(!useCapture){useCapture=false}if(el.removeEventListener){el.removeEventListener(eventName,handler,useCapture)}else{if(eventName==="focus"){eventName="focusin"}el.detachEvent("on"+eventName,function(){handler.call(el)})}return el}}},{}]},{},[1])(1)}); |
@@ -0,240 +1,236 @@ | ||
| 'use strict' | ||
| module.exports = { | ||
| config: { | ||
| floatingClassName: 'floating', | ||
| delegateEvents: false | ||
| }, | ||
| init: function initializeFloatingLabel( opt ) { | ||
| 'use strict'; | ||
| config: { | ||
| floatingClassName: 'floating', | ||
| delegateEvents: false | ||
| }, | ||
| init: function initializeFloatingLabel (opt) { | ||
| this._eventsDelegated = false | ||
| this._eventsDelegated = false; | ||
| if ( opt instanceof Object ) { | ||
| for ( var option in opt ) { | ||
| if ( window.Object.hasOwnProperty.call( opt, option ) && window.Object.hasOwnProperty.call( this.config, option )) { | ||
| this.config[ option ] = opt[ option ]; | ||
| } | ||
| } | ||
| if (opt instanceof Object) { | ||
| for (var option in opt) { | ||
| if (window.Object.hasOwnProperty.call(opt, option) && window.Object.hasOwnProperty.call(this.config, option)) { | ||
| this.config[option] = opt[option] | ||
| } | ||
| } | ||
| } | ||
| // Once the DOM is loaded, evaluate the inputs on the page | ||
| if ( window.addEventListener ) { | ||
| window.addEventListener( 'DOMContentLoaded', this.evaluateInputs.bind( this ), false ); | ||
| } else { | ||
| document.onreadystatechange = this.evaluateInputs.bind( this ); | ||
| } | ||
| }, | ||
| // Once the DOM is loaded, evaluate the inputs on the page | ||
| if (window.addEventListener) { | ||
| window.addEventListener('DOMContentLoaded', this.evaluateInputs.bind(this), false) | ||
| } else { | ||
| document.onreadystatechange = this.evaluateInputs.bind(this) | ||
| } | ||
| }, | ||
| /** | ||
| * evaluateInputs - Loop through all the elements currently on the page and display the floating label if needed. | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.evaluateInputs(); | ||
| * @return {void} | ||
| */ | ||
| evaluateInputs: function evaluateInputs() { | ||
| 'use strict'; | ||
| /** | ||
| * evaluateInputs - Loop through all the elements currently on the page and display the floating label if needed. | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.evaluateInputs(); | ||
| * @return {void} | ||
| */ | ||
| evaluateInputs: function evaluateInputs () { | ||
| var self = this | ||
| var inputs = document.querySelectorAll('input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], textarea') | ||
| var self = this, | ||
| inputs = document.querySelectorAll( 'input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], textarea' ); | ||
| function showHideLabel (input, label) { | ||
| if (input.value.length) { | ||
| self.addClass(label, self.config.floatingClassName) | ||
| } else { | ||
| self.removeClass(label, self.config.floatingClassName) | ||
| } | ||
| } | ||
| function showHideLabel( input, label ) { | ||
| if ( input.value.length ) { | ||
| self.addClass( label, self.config.floatingClassName ); | ||
| } else { | ||
| self.removeClass( label, self.config.floatingClassName ); | ||
| } | ||
| } | ||
| function inputEventHandler (evt) { | ||
| if (!evt) { | ||
| evt = window.event | ||
| } | ||
| function inputEventHandler( evt ) { | ||
| if ( !evt ) { | ||
| evt = window.event; | ||
| } | ||
| var inputEl = evt.target || evt.srcElement | ||
| var inputID = inputEl.getAttribute('id') | ||
| var labelEl = document.querySelector('label[for="' + inputID + '"]') | ||
| var typeRe = /text|password|url|email|tel|search|number/i | ||
| var inputEl = evt.target || evt.srcElement, | ||
| labelEl = self.getPreviousSibling( inputEl ), | ||
| typeRe = /text|password|url|email|tel|search|number/i; | ||
| if (!labelEl) { | ||
| return | ||
| } | ||
| if ( ( inputEl.nodeName === 'INPUT' && typeRe.test( inputEl.getAttribute( 'type' ))) || inputEl.nodeName === 'TEXTAREA' ) { | ||
| showHideLabel( inputEl, labelEl ); | ||
| } | ||
| } | ||
| if ((inputEl.nodeName === 'INPUT' && typeRe.test(inputEl.getAttribute('type'))) || inputEl.nodeName === 'TEXTAREA') { | ||
| showHideLabel(inputEl, labelEl) | ||
| } | ||
| } | ||
| for ( var input = 0; input < inputs.length; input++ ) { | ||
| if ( ( inputs[ input ] instanceof Element ) && window.Object.hasOwnProperty.call( inputs, input )) { | ||
| var inputEl = inputs[ input ], | ||
| labelEl = self.getPreviousSibling( inputEl ); | ||
| for (var input = 0; input < inputs.length; input++) { | ||
| if ((inputs[input] instanceof window.Element) && window.Object.hasOwnProperty.call(inputs, input)) { | ||
| var inputEl = inputs[input] | ||
| var inputID = inputEl.getAttribute('id') | ||
| var labelEl = document.querySelector('label[for="' + inputID + '"]') | ||
| showHideLabel( inputEl, labelEl ); | ||
| this.removeEventListener( inputEl, 'keyup', inputEventHandler, false ); | ||
| this.removeEventListener( inputEl, 'input', inputEventHandler, false ); | ||
| if ( !this.config.delegateEvents ) { | ||
| this.addEventListener( inputEl, 'keyup', inputEventHandler, false ); | ||
| this.addEventListener( inputEl, 'input', inputEventHandler, false ); | ||
| } | ||
| } | ||
| if (!labelEl) { | ||
| return | ||
| } | ||
| if ( this.config.delegateEvents && !this._eventsDelegated ) { | ||
| this.addEventListener( document.body, 'keyup', inputEventHandler, false ); | ||
| this.addEventListener( document.body, 'input', inputEventHandler, false ); | ||
| showHideLabel(inputEl, labelEl) | ||
| this._eventsDelegated = true; | ||
| } | ||
| }, | ||
| this.removeEventListener(inputEl, 'keyup', inputEventHandler, false) | ||
| this.removeEventListener(inputEl, 'input', inputEventHandler, false) | ||
| /** | ||
| * getPreviousSibling - Small function to get the previous sibling of an element. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.getPreviousSibling( el ); | ||
| * @param {element} el - The element to get the previous sibling of | ||
| * @return {element} - The previous sibling element | ||
| */ | ||
| getPreviousSibling: function getPreviousSibling( el ) { | ||
| 'use strict'; | ||
| el = el.previousSibling; | ||
| while ( el && el.nodeType !== 1 ) { | ||
| el = el.previousSibling; | ||
| if (!this.config.delegateEvents) { | ||
| this.addEventListener(inputEl, 'keyup', inputEventHandler, false) | ||
| this.addEventListener(inputEl, 'input', inputEventHandler, false) | ||
| } | ||
| } | ||
| } | ||
| return el; | ||
| }, | ||
| if (this.config.delegateEvents && !this._eventsDelegated) { | ||
| this.addEventListener(document.body, 'keyup', inputEventHandler, false) | ||
| this.addEventListener(document.body, 'input', inputEventHandler, false) | ||
| /** | ||
| * addClass - Small function to add a class to an element. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.addClass( this.currentTooltip, 'visible' ); | ||
| * @param {element} el - The element to add the class to | ||
| * @param {string} className - The class name to add to the element | ||
| * @return {element} - The element that had the class added to it | ||
| * @api private | ||
| */ | ||
| addClass: function addClass( el, className ) { | ||
| 'use strict'; | ||
| this._eventsDelegated = true | ||
| } | ||
| }, | ||
| if ( el.classList ) { | ||
| el.classList.add( className ); | ||
| } else { | ||
| el.className += ' ' + className; | ||
| } | ||
| /** | ||
| * getPreviousSibling - Small function to get the previous sibling of an element. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.getPreviousSibling( el ); | ||
| * @param {element} el - The element to get the previous sibling of | ||
| * @return {element} - The previous sibling element | ||
| */ | ||
| getPreviousSibling: function getPreviousSibling (el) { | ||
| el = el.previousSibling | ||
| return el; | ||
| }, | ||
| while (el && el.nodeType !== 1) { | ||
| el = el.previousSibling | ||
| } | ||
| /** | ||
| * removeClass - Small function to remove a class from an element. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.removeClass( this.currentTooltip, 'visible' ); | ||
| * @param {element} el - The element to remove the class from | ||
| * @param {string} className - The class name to remove from the element | ||
| * @return {element} - The element that had the class removed from it | ||
| * @api private | ||
| */ | ||
| removeClass: function removeClass( el, className ) { | ||
| 'use strict'; | ||
| return el | ||
| }, | ||
| if ( el ) { | ||
| if ( el.classList ) { | ||
| el.classList.remove( className ); | ||
| } else { | ||
| el.className = el.className.replace( new RegExp( '(^|\\b)' + className.split( ' ' ).join( '|' ) + '(\\b|$)', 'gi' ), ' ' ); | ||
| } | ||
| } | ||
| /** | ||
| * addClass - Small function to add a class to an element. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.addClass( this.currentTooltip, 'visible' ); | ||
| * @param {element} el - The element to add the class to | ||
| * @param {string} className - The class name to add to the element | ||
| * @return {element} - The element that had the class added to it | ||
| * @api private | ||
| */ | ||
| addClass: function addClass (el, className) { | ||
| if (el.classList) { | ||
| el.classList.add(className) | ||
| } else { | ||
| el.className += ' ' + className | ||
| } | ||
| return el; | ||
| }, | ||
| return el | ||
| }, | ||
| /** | ||
| * hasClass - Small function to see if an element has a specific class. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.hasClass( this.currentTooltip, 'visible' ); | ||
| * @param {element} el - The element to check the class existence on | ||
| * @param {string} className - The class to check for | ||
| * @return {boolean} - True or false depending on if the element has the class | ||
| * @api private | ||
| */ | ||
| hasClass: function hasClass( el, className ) { | ||
| 'use strict'; | ||
| /** | ||
| * removeClass - Small function to remove a class from an element. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.removeClass( this.currentTooltip, 'visible' ); | ||
| * @param {element} el - The element to remove the class from | ||
| * @param {string} className - The class name to remove from the element | ||
| * @return {element} - The element that had the class removed from it | ||
| * @api private | ||
| */ | ||
| removeClass: function removeClass (el, className) { | ||
| if (el) { | ||
| if (el.classList) { | ||
| el.classList.remove(className) | ||
| } else { | ||
| el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ') | ||
| } | ||
| } | ||
| if ( el.classList ) { | ||
| return el.classList.contains( className ); | ||
| } else { | ||
| return new RegExp( '(^| )' + className + '( |$)', 'gi' ).test( el.className ); | ||
| } | ||
| }, | ||
| return el | ||
| }, | ||
| /** | ||
| * addEventListener - Small function to add an event listener. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.addEventListener( document.body, 'click', this.open( this.currentTooltip )); | ||
| * @param {element} el - The element node that needs to have the event listener added | ||
| * @param {string} eventName - The event name (sans the "on") | ||
| * @param {function} handler - The function to be run when the event is triggered | ||
| * @return {element} - The element that had an event bound | ||
| * @api private | ||
| */ | ||
| addEventListener: function addEventListener( el, eventName, handler, useCapture ) { | ||
| 'use strict'; | ||
| /** | ||
| * hasClass - Small function to see if an element has a specific class. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.hasClass( this.currentTooltip, 'visible' ); | ||
| * @param {element} el - The element to check the class existence on | ||
| * @param {string} className - The class to check for | ||
| * @return {boolean} - True or false depending on if the element has the class | ||
| * @api private | ||
| */ | ||
| hasClass: function hasClass (el, className) { | ||
| if (el.classList) { | ||
| return el.classList.contains(className) | ||
| } else { | ||
| return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className) | ||
| } | ||
| }, | ||
| if ( !useCapture ) { | ||
| useCapture = false; | ||
| } | ||
| /** | ||
| * addEventListener - Small function to add an event listener. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.addEventListener( document.body, 'click', this.open( this.currentTooltip )); | ||
| * @param {element} el - The element node that needs to have the event listener added | ||
| * @param {string} eventName - The event name (sans the "on") | ||
| * @param {function} handler - The function to be run when the event is triggered | ||
| * @return {element} - The element that had an event bound | ||
| * @api private | ||
| */ | ||
| addEventListener: function addEventListener (el, eventName, handler, useCapture) { | ||
| if (!useCapture) { | ||
| useCapture = false | ||
| } | ||
| if ( el.addEventListener ) { | ||
| el.addEventListener( eventName, handler, useCapture ); | ||
| if (el.addEventListener) { | ||
| el.addEventListener(eventName, handler, useCapture) | ||
| return el; | ||
| } else { | ||
| if ( eventName === 'focus' ) { | ||
| eventName = 'focusin'; | ||
| } | ||
| return el | ||
| } else { | ||
| if (eventName === 'focus') { | ||
| eventName = 'focusin' | ||
| } | ||
| el.attachEvent( 'on' + eventName, function() { | ||
| handler.call( el ); | ||
| }); | ||
| el.attachEvent('on' + eventName, function () { | ||
| handler.call(el) | ||
| }) | ||
| return el; | ||
| } | ||
| }, | ||
| return el | ||
| } | ||
| }, | ||
| /** | ||
| * removeEventListener - Small function to remove and event listener. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.removeEventListener( document.body, 'click', this.open( this.currentTooltip )); | ||
| * @param {element} el - The element node that needs to have the event listener removed | ||
| * @param {string} eventName - The event name (sans the "on") | ||
| * @param {function} handler - The function that was to be run when the event is triggered | ||
| * @return {element} - The element that had an event removed | ||
| * @api private | ||
| */ | ||
| removeEventListener: function removeEventListener( el, eventName, handler, useCapture ) { | ||
| 'use strict'; | ||
| /** | ||
| * removeEventListener - Small function to remove and event listener. Should be compatible with IE8+ | ||
| * @version 1.0.0 | ||
| * @example | ||
| * this.removeEventListener( document.body, 'click', this.open( this.currentTooltip )); | ||
| * @param {element} el - The element node that needs to have the event listener removed | ||
| * @param {string} eventName - The event name (sans the "on") | ||
| * @param {function} handler - The function that was to be run when the event is triggered | ||
| * @return {element} - The element that had an event removed | ||
| * @api private | ||
| */ | ||
| removeEventListener: function removeEventListener (el, eventName, handler, useCapture) { | ||
| if (!useCapture) { | ||
| useCapture = false | ||
| } | ||
| if ( !useCapture ) { | ||
| useCapture = false; | ||
| } | ||
| if (el.removeEventListener) { | ||
| el.removeEventListener(eventName, handler, useCapture) | ||
| } else { | ||
| if (eventName === 'focus') { | ||
| eventName = 'focusin' | ||
| } | ||
| if ( el.removeEventListener ) { | ||
| el.removeEventListener( eventName, handler, useCapture ); | ||
| } else { | ||
| if ( eventName === 'focus' ) { | ||
| eventName = 'focusin'; | ||
| } | ||
| el.detachEvent('on' + eventName, function () { | ||
| handler.call(el) | ||
| }) | ||
| } | ||
| el.detachEvent( 'on' + eventName, function() { | ||
| handler.call( el ); | ||
| }); | ||
| } | ||
| return el; | ||
| } | ||
| }; | ||
| return el | ||
| } | ||
| } |
| { | ||
| "name": "floating-label", | ||
| "version": "1.0.1", | ||
| "description": "Ajfloating label plugin written in vanilla javascript", | ||
| "version": "2.0.0", | ||
| "description": "A floating label plugin written in vanilla javascript", | ||
| "main": "floatingLabel.js", | ||
| "scripts": { | ||
| "test": "mkdir tmp; browserify test/index.js > tmp/index.js; gulp test; rm -r tmp", | ||
| "start": "http-server", | ||
| "test": "standard; browserify test/index.js | tape-run | tap-spec", | ||
| "dist": "browserify floatingLabel.js -s floatingLabel | derequire > dist/floatingLabel.js; browserify floatingLabel.js -s floatingLabel | derequire | uglifyjs - > dist/floatingLabel.min.js" | ||
| }, | ||
| "testling": { | ||
| "harness": "mocha-bdd", | ||
| "files": "test/*.js", | ||
| "files": "test/index.js", | ||
| "browsers": [ | ||
@@ -17,3 +17,4 @@ "ie/8..latest", | ||
| "firefox/latest", | ||
| "safari/latest" | ||
| "safari/latest", | ||
| "opera/latest" | ||
| ] | ||
@@ -34,3 +35,3 @@ }, | ||
| "author": "Mike Engel <mike.engel@datuhealth.com>", | ||
| "license": "Apache 2.0", | ||
| "license": "Apache-2.0", | ||
| "bugs": { | ||
@@ -42,14 +43,17 @@ "url": "https://github.com/datuhealth/floating-label/issues" | ||
| "browserify": "^11.2.0", | ||
| "chai": "^3.3.0", | ||
| "derequire": "^2.0.0", | ||
| "es5-shim": "^4.1.0", | ||
| "gulp": "^3.9.0", | ||
| "gulp-jscs": "^3.0.1", | ||
| "gulp-jshint": "^1.9.4", | ||
| "gulp-logwarn": "0.0.8", | ||
| "gulp-mocha-phantomjs": "^0.10.1", | ||
| "mocha": "^2.2.1", | ||
| "http-server": "^0.8.5", | ||
| "pre-commit": "^1.0.6", | ||
| "standard": "^5.3.1", | ||
| "tap-spec": "^4.1.0", | ||
| "tape": "^4.2.1", | ||
| "tape-run": "^1.1.0", | ||
| "uglify-js": "^2.5.0" | ||
| }, | ||
| "standard": { | ||
| "ignore": [ | ||
| "dist/" | ||
| ] | ||
| } | ||
| } |
@@ -16,3 +16,3 @@ # floating-label | ||
| The only markup needed is either an `input` or a `textarea` element, and some sort of element for the label. | ||
| The only markup needed is either an `input` or a `textarea` element, and some sort of element for the label. Since version 2.0, labels _must_ now include the `for` attribute to associate it to an input. Not only is this per the spec & accessible, you can now have inputs without a label, and have the label element somewhere else in the DOM. | ||
@@ -35,3 +35,3 @@ ```html | ||
| If you're running a singple page app and need to re-run floatingLabel when a new view is rendered, use `evaluateInputs` | ||
| If you're running a single page app and need to re-run floatingLabel when a new view is rendered, use `evaluateInputs` | ||
@@ -44,3 +44,3 @@ ```javascript | ||
| ## `init( options )` | ||
| ## `init(options)` | ||
@@ -68,3 +68,3 @@ The init method is a simple function to evaluate all the inputs on a page once the DOM has been loaded. An optional config object can be passed in to set a custom class and whether to delegate events or bind them directly on the inputs themselves. | ||
| If you would like to contribute, please create a new branch after forking with your changes, then submit a PR to this repo. Please also follow our javascript [styleguide](https://github.com/datuhealth/idiomatic.js). | ||
| If you would like to contribute, please create a new branch after forking with your changes, then submit a PR to this repo. We use [standard](https://github.com/feross/standard) for our javascript styleguide. | ||
@@ -71,0 +71,0 @@ # license |
@@ -1,160 +0,188 @@ | ||
| var floatingLabel = require( '../floatingLabel' ), | ||
| chai = require( 'chai' ), | ||
| expect = chai.expect; | ||
| var floatingLabel = require('../floatingLabel') | ||
| var test = require('tape') | ||
| function eventFire( el, evtType ) { | ||
| if ( el.fireEvent ) { | ||
| el.fireEvent( 'on' + evtType ); | ||
| } else { | ||
| var evtObj = document.createEvent( 'Events' ); | ||
| function eventFire (el, evtType) { | ||
| if (el.fireEvent) { | ||
| el.fireEvent('on' + evtType) | ||
| } else { | ||
| var evtObj = document.createEvent('Events') | ||
| evtObj.initEvent( evtType, true, false ); | ||
| el.dispatchEvent( evtObj ); | ||
| } | ||
| evtObj.initEvent(evtType, true, false) | ||
| el.dispatchEvent(evtObj) | ||
| } | ||
| } | ||
| describe( 'initialization options', function() { | ||
| it( 'should use a custom class', function() { | ||
| floatingLabel.init({ | ||
| floatingClassName: 'custom-float' | ||
| }); | ||
| function setupForm () { | ||
| document.body.innerHTML = [ | ||
| '<form method="POST" action="javascript:void(0);" enctype="application/x-www-form-urlencoded">', | ||
| '<div class="initial no-value">', | ||
| '<label for="no-value">No value</label>', | ||
| '<input type="text" name="no-value" id="no-value" placeholder="No value" />', | ||
| '</div>', | ||
| '<div class="initial value">', | ||
| '<label for="value">With value</label>', | ||
| '<input type="text" name="value" id="value" value="With value" />', | ||
| '</div>', | ||
| '<div class="initial no-value textarea">', | ||
| '<label for="no-value-textarea">No value on a textarea</label>', | ||
| '<textarea name="no-value-textarea" id="no-value-textarea" placeholder="No value"></textarea>', | ||
| '</div>', | ||
| '<div class="initial value textarea">', | ||
| '<label for="value-textarea">With value on a textarea</label>', | ||
| '<textarea name="value-textarea" id="value-textarea">With value</textarea>', | ||
| '</div>', | ||
| '<div class="initial no-label">', | ||
| '<input type="text" name="no-label" id="no-label" placeholder="No label">', | ||
| '</div>', | ||
| '<div class="initial no-label textarea">', | ||
| '<textarea name="no-label-textarea" id="no-label-textarea" placeholder="No label"></textarea>', | ||
| '</div>', | ||
| '</form>' | ||
| ].join('') | ||
| } | ||
| floatingLabel.evaluateInputs(); | ||
| test('a custom floating class can be used', function (t) { | ||
| setupForm() | ||
| var noValueContainer = document.querySelector( 'div.initial.no-value' ), | ||
| label = noValueContainer.querySelector( 'label' ), | ||
| input = noValueContainer.querySelector( 'input' ); | ||
| floatingLabel.init({ | ||
| floatingClassName: 'custom-float' | ||
| }) | ||
| expect( input.value ).to.equal( '' ); | ||
| expect( label.classList.contains( 'custom-float' )).to.equal( false ); | ||
| var noValueContainer = document.body.querySelector('div.initial.no-value') | ||
| var label = noValueContainer.querySelector('label[for="no-value"]') | ||
| var input = noValueContainer.querySelector('input') | ||
| input.value = 'With value'; | ||
| t.equal(input.value, '', 'there is no default input value') | ||
| t.notOk(label.classList.contains('custom-float'), 'there is no floating class by default') | ||
| eventFire( input, 'keyup' ); | ||
| input.value = 'With value' | ||
| expect( input.value ).to.equal( 'With value' ); | ||
| expect( label.classList.contains( 'custom-float' )).to.equal( true ); | ||
| }); | ||
| eventFire(input, 'keyup') | ||
| // We skip this test because mocking delegated events is hard | ||
| // If you have a good way to do it, let us know! | ||
| // it( 'should delegate events', function() { | ||
| // floatingLabel.init({ | ||
| // floatingClassName: 'custom-float', | ||
| // delegateEvents: true | ||
| // }); | ||
| // | ||
| // var noValueContainer = document.querySelector( 'div.initial.no-value' ), | ||
| // label = noValueContainer.querySelector( 'label' ), | ||
| // input = noValueContainer.querySelector( 'input' ); | ||
| // | ||
| // input.value = ''; | ||
| // | ||
| // floatingLabel.evaluateInputs(); | ||
| // | ||
| // expect( input.value ).to.equal( '' ); | ||
| // expect( label.classList.contains( 'custom-float' )).to.equal( false ); | ||
| // | ||
| // input.value = 'With value'; | ||
| // | ||
| // eventFire( document.body, 'keyup' ); | ||
| // | ||
| // expect( input.value ).to.equal( 'With value' ); | ||
| // expect( label.classList.contains( 'custom-float' )).to.equal( true ); | ||
| // }); | ||
| }); | ||
| floatingLabel.evaluateInputs() | ||
| describe( 'the floating label initial state', function() { | ||
| it( 'should not be floating without a value on an input', function() { | ||
| floatingLabel.init({ | ||
| floatingClassName: 'floating' | ||
| }); | ||
| t.equal(input.value, 'With value', 'the new value was set correctly') | ||
| t.ok(label.classList.contains('custom-float'), 'the custom floating class was applied') | ||
| t.end() | ||
| }) | ||
| var noValueContainer = document.querySelector( 'div.initial.no-value' ), | ||
| label = noValueContainer.querySelector( 'label' ), | ||
| input = noValueContainer.querySelector( 'input' ); | ||
| test('the initial state should not be floating without a value on an input', function (t) { | ||
| setupForm() | ||
| input.value = ''; | ||
| floatingLabel.init({ | ||
| floatingClassName: 'floating' | ||
| }) | ||
| floatingLabel.evaluateInputs(); | ||
| var noValueContainer = document.querySelector('div.initial.no-value') | ||
| var label = noValueContainer.querySelector('label[for="no-value"]') | ||
| var input = noValueContainer.querySelector('input') | ||
| expect( input.value ).to.equal( '' ); | ||
| expect( label.classList.contains( 'floating' )).to.equal( false ); | ||
| }); | ||
| t.equal(input.value, '', 'there is no initial value') | ||
| t.notOk(label.classList.contains('floating'), 'there shouldn\'t be a floating class') | ||
| t.end() | ||
| }) | ||
| it( 'should be floating with an initial value on an input', function() { | ||
| floatingLabel.evaluateInputs(); | ||
| test('the initial state should be floating with an initial value on an input', function (t) { | ||
| setupForm() | ||
| var noValueContainer = document.querySelector( 'div.initial.value' ), | ||
| label = noValueContainer.querySelector( 'label' ), | ||
| input = noValueContainer.querySelector( 'input' ); | ||
| floatingLabel.evaluateInputs() | ||
| expect( input.value ).to.equal( 'With value' ); | ||
| expect( label.classList.contains( 'floating' )).to.equal( true ); | ||
| }); | ||
| var noValueContainer = document.querySelector('div.initial.value') | ||
| var label = noValueContainer.querySelector('label[for="value"]') | ||
| var input = noValueContainer.querySelector('input') | ||
| it( 'should not be floating without a value on a textarea', function() { | ||
| floatingLabel.evaluateInputs(); | ||
| t.equal(input.value, 'With value', 'there is an initial value on the input') | ||
| t.ok(label.classList.contains('floating'), 'The floating class is on the label') | ||
| t.end() | ||
| }) | ||
| var noValueContainer = document.querySelector( 'div.initial.no-value.textarea' ), | ||
| label = noValueContainer.querySelector( 'label' ), | ||
| input = noValueContainer.querySelector( 'textarea' ); | ||
| test('the initial state should not be floating without a value on a textarea', function (t) { | ||
| setupForm() | ||
| expect( input.value ).to.equal( '' ); | ||
| expect( label.classList.contains( 'floating' )).to.equal( false ); | ||
| }); | ||
| floatingLabel.evaluateInputs() | ||
| it( 'should be floating with an initial value on a textarea', function() { | ||
| floatingLabel.evaluateInputs(); | ||
| var noValueContainer = document.querySelector('div.initial.no-value.textarea') | ||
| var label = noValueContainer.querySelector('label[for="no-value-textarea"]') | ||
| var input = noValueContainer.querySelector('textarea') | ||
| var noValueContainer = document.querySelector( 'div.initial.value.textarea' ), | ||
| label = noValueContainer.querySelector( 'label' ), | ||
| input = noValueContainer.querySelector( 'textarea' ); | ||
| t.equal(input.value, '', 'There\'s no initial value in the textarea') | ||
| t.notOk(label.classList.contains('floating'), 'The label isn\'t floating') | ||
| t.end() | ||
| }) | ||
| expect( input.value ).to.equal( 'With value' ); | ||
| expect( label.classList.contains( 'floating' )).to.equal( true ); | ||
| }); | ||
| }); | ||
| test('the initial state should be floating with an initial value on a textarea', function (t) { | ||
| setupForm() | ||
| describe( 'the label', function() { | ||
| it( 'should float as text is entered via keyboard', function() { | ||
| var noValueContainer = document.querySelector( 'div.initial.no-value' ), | ||
| label = noValueContainer.querySelector( 'label' ), | ||
| input = noValueContainer.querySelector( 'input' ); | ||
| floatingLabel.evaluateInputs() | ||
| input.value = ''; | ||
| var noValueContainer = document.querySelector('div.initial.value.textarea') | ||
| var label = noValueContainer.querySelector('label[for="value-textarea"]') | ||
| var input = noValueContainer.querySelector('textarea') | ||
| floatingLabel.evaluateInputs(); | ||
| t.equal(input.value, 'With value', 'There\'s an initial value on the textarea') | ||
| t.ok(label.classList.contains('floating'), 'The label is initialy floating') | ||
| t.end() | ||
| }) | ||
| expect( input.value ).to.equal( '' ); | ||
| expect( label.classList.contains( 'floating' )).to.equal( false ); | ||
| test('the label should float as text is entered via keyboard', function (t) { | ||
| setupForm() | ||
| input.value = 'New value entered'; | ||
| floatingLabel.evaluateInputs() | ||
| eventFire( input, 'keyup' ); | ||
| var noValueContainer = document.querySelector('div.initial.no-value') | ||
| var label = noValueContainer.querySelector('label[for="no-value"]') | ||
| var input = noValueContainer.querySelector('input') | ||
| expect( input.value ).to.equal( 'New value entered' ); | ||
| expect( label.classList.contains( 'floating' )).to.equal( true ); | ||
| }); | ||
| t.equal(input.value, '', 'There\'s no initial value on the input') | ||
| t.notOk(label.classList.contains('floating'), 'The label isn\'t initially floating') | ||
| // We skip this event because mocking the 'input' event is hard | ||
| // If you have a good way to do it, let us know! | ||
| // it( 'should float as text is entered via paste', function() { | ||
| // floatingLabel.evaluateInputs(); | ||
| // | ||
| // var noValueContainer = document.querySelector( 'div.initial.no-value' ), | ||
| // label = noValueContainer.querySelector( 'label' ), | ||
| // input = noValueContainer.querySelector( 'input' ); | ||
| // | ||
| // input.value = ''; | ||
| // expect( input.value ).to.equal( '' ); | ||
| // expect( label.classList.contains( 'floating' )).to.equal( false ); | ||
| // | ||
| // input.value = 'New value entered'; | ||
| // | ||
| // eventFire( input, 'input' ); | ||
| // | ||
| // expect( input.value ).to.equal( 'New value entered' ); | ||
| // expect( label.classList.contains( 'floating' )).to.equal( true ); | ||
| // }); | ||
| }); | ||
| input.value = 'New value entered' | ||
| eventFire(input, 'keyup') | ||
| floatingLabel.evaluateInputs() | ||
| t.equal(input.value, 'New value entered', 'The input now has a value') | ||
| t.ok(label.classList.contains('floating'), 'The label is now floating') | ||
| t.end() | ||
| }) | ||
| test('the page should still work if an input has no label', function (t) { | ||
| setupForm() | ||
| floatingLabel.evaluateInputs() | ||
| var noValueContainer = document.querySelector('div.initial.no-label') | ||
| var label = noValueContainer.querySelector('label[for="no-label"]') | ||
| var input = noValueContainer.querySelector('input') | ||
| t.notOk(label, 'There is no label') | ||
| input.value = 'New value entered' | ||
| eventFire(input, 'keyup') | ||
| floatingLabel.evaluateInputs() | ||
| t.end() | ||
| }) | ||
| test('the page should still work if a textarea has no label', function (t) { | ||
| setupForm() | ||
| floatingLabel.evaluateInputs() | ||
| var noValueContainer = document.querySelector('div.initial.no-label.textarea') | ||
| var label = noValueContainer.querySelector('label[for="no-label-textarea"]') | ||
| var input = noValueContainer.querySelector('textarea') | ||
| t.notOk(label, 'There is no label') | ||
| input.value = 'New value entered' | ||
| eventFire(input, 'keyup') | ||
| floatingLabel.evaluateInputs() | ||
| t.end() | ||
| }) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-16.67%
10
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-12.84%
48303
- Number of package files
- decreased by-25%
12
- Lines of code
- decreased by-1.31%
603
No dependency changes