From 6080f6673e0c2fc30cb558a133008a9966c190b2 Mon Sep 17 00:00:00 2001 From: Mikael Nordfeldth Date: Sat, 7 Mar 2015 00:49:05 +0100 Subject: [PATCH] "infield labels" should be migrated to HTML5 placeholder --- js/extlib/jquery.infieldlabel.js | 168 ------------------------------- js/util.js | 3 - theme/base/css/display.css | 5 - 3 files changed, 176 deletions(-) delete mode 100644 js/extlib/jquery.infieldlabel.js diff --git a/js/extlib/jquery.infieldlabel.js b/js/extlib/jquery.infieldlabel.js deleted file mode 100644 index 246028c1be..0000000000 --- a/js/extlib/jquery.infieldlabel.js +++ /dev/null @@ -1,168 +0,0 @@ -/** - * @license In-Field Label jQuery Plugin - * http://fuelyourcoding.com/scripts/infield.html - * http://github.com/streetpc/jquery-infieldlabels - * - * Copyright (c) 2009 Doug Neiner, Adrien Lavoillotte - * Dual licensed under the MIT and GPL licenses, see: - * http://docs.jquery.com/License - * - * @version 0.2.1 - */ -(function ($) { - - // private constants - // - states - var BLUR = 0, // field is empty & unfocused - FOCUS = 1, // field is empty & focused - NOT_EMPTY = 2, // field is not empty - // - accepted input type - INPUT_TYPE = /^(?:text|password|search|number|tel|url|email|date(?:time(?:-local)?)?|time|month|week)?$/, - // - state transitions - T = function(from, to) { return (from << 3) | to; }, - TRANSITIONS = {}; - - // init transitions - TRANSITIONS[T( FOCUS, BLUR )] = function(base) { base.fadeTo(1.0); }; - TRANSITIONS[T( NOT_EMPTY, BLUR )] = function(base) { base.$label.css({opacity: 1.0}).show(); base.emptied(true); }; - TRANSITIONS[T( BLUR, FOCUS )] = function(base) { base.fadeTo(base.options.fadeOpacity); }; - TRANSITIONS[T( NOT_EMPTY, FOCUS )] = function(base) { base.$label.css({opacity: base.options.fadeOpacity}).show(); base.emptied(true); }; - TRANSITIONS[T( BLUR, NOT_EMPTY )] = function(base) { base.$label.hide(); base.emptied(false); }; - TRANSITIONS[T( FOCUS, NOT_EMPTY )] = TRANSITIONS[T( BLUR, NOT_EMPTY )]; - - $.InFieldLabels = function (label, field, options) { - // To avoid scope issues, use 'base' instead of 'this' - // to reference this class from internal events and functions. - var base = this; - - // Access to jQuery and DOM versions of each element - base.$label = $(label); - base.label = label; - - base.$field = $(field); - base.field = field; - - base.$label.data('InFieldLabels', base); - base.state = BLUR; - - base.init = function () { - // Merge supplied options with default options - base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); - - if (base.options.labelClass) { - base.$label.addClass(base.options.labelClass); - } - if (base.options.disableAutocomplete) { - base.$field.attr('autocomplete', 'off'); - } - - base.$field - .bind('blur focus change keyup.infield cut', base.updateState) - // paste cannot be empty - .bind('paste', function(e){ base.setState(NOT_EMPTY); }); - - base.updateState(); - }; - - base.emptied = function(empty) { - if (!base.options.emptyWatch) { - if (empty) { - // namespace ensures we unbind only our handler - base.$field.bind('keyup.infield', base.updateState); - } else { - // save CPU but won't detect empty until blur - base.$field.unbind('keyup.infield', base.updateState); - } - } - }; - - base.fadeTo = function (opacity) { - if (!base.options.fadeDuration) { - base.$label.css({ opacity: opacity }); - } else { - base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); - } - }; - - base.updateState = function (e, nl) { - var state = NOT_EMPTY; - if (base.field.value === '') { - var focus = e && e.type; - if (focus === 'focus' || focus === 'keyup') { - focus = true; - } else if (focus === 'blur' || focus === 'change') { - focus = false; - } else { // last resort because slowest - focus = base.$field.is(':focus'); - } - state = focus ? FOCUS : BLUR; - } - base.setState(state, nl); - }; - - base.setState = function (state, nl) { - if (state === base.state) { - return; - } - - var transition = TRANSITIONS[T(base.state, state)]; - if (typeof transition === 'function') { - transition(base); - base.state = state; - } else { // unkown transition - shouldn't happen - // nl avoids looping - nl || base.updateState(null, true); - } - }; - - // Run the initialization method - base.init(); - }; - - $.InFieldLabels.defaultOptions = { - emptyWatch: true, // Keep watching the field as the user types (slower but brings back the label immediately when the field is emptied) - disableAutocomplete: true, // Disable autocomplete on the matched fields - fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be - fadeDuration: 300, // How long should it take to animate from 1.0 opacity to the fadeOpacity - labelClass: 'in-field' // CSS class to apply to the label when it gets in-field - }; - - - $.fn.inFieldLabels = function (options) { - return this.each(function () { - if (this.tagName !== 'LABEL') { - return; - } - // Find input or textarea based on for= attribute - // The for attribute on the label must contain the ID - // of the input or textarea element - var for_attr = this.getAttribute('for') || this.htmlFor, - field, valid = true; - if (!for_attr) { - return; // Nothing to attach, since the for field wasn't used - } - - // Find the referenced input or textarea element - field = document.getElementById(for_attr); - if (!field) { - return; - } - - if (field.tagName === 'INPUT') { - valid = INPUT_TYPE.test(field.type.toLowerCase()); - } else if (field.tagName !== 'TEXTAREA') { - valid = false; - } - - valid = valid && !field.getAttribute('placeholder'); - - if (!valid) { - return; // Again, nothing to attach - } - - // Only create object for input[text], input[password], or textarea - (new $.InFieldLabels(this, field, options)); - }); - }; - -}(jQuery)); \ No newline at end of file diff --git a/js/util.js b/js/util.js index 5995294d8f..7eee7c863d 100644 --- a/js/util.js +++ b/js/util.js @@ -1433,9 +1433,6 @@ var SN = { // StatusNet }); } }); - - // Infield labels for notice form inputs. - $('.input_forms fieldset fieldset label').inFieldLabels({ fadeOpacity:0 }); } }, diff --git a/theme/base/css/display.css b/theme/base/css/display.css index adf40edfcc..9e0bfac3fe 100644 --- a/theme/base/css/display.css +++ b/theme/base/css/display.css @@ -452,14 +452,9 @@ address .poweredby { } .input_form fieldset fieldset label { - position: absolute; - top: 0; - left: 6px; float: none; text-align: left; color: #888; - cursor: text; - background: #fff; } .input_form .form_settings li input { -- 2.39.5