/public/javascripts/jquery.infieldlabel-custom.js

https://github.com/Anewczs/diaspora · JavaScript · 156 lines · 95 code · 23 blank · 38 comment · 10 complexity · 4cf6bc196047b0031bd49861a2b9c8dd MD5 · raw file

  1. /**
  2. * @license In-Field Label jQuery Plugin
  3. * http://fuelyourcoding.com/scripts/infield.html
  4. *
  5. * Copyright (c) 2009-2010 Doug Neiner
  6. * Dual licensed under the MIT and GPL licenses.
  7. * Uses the same license as jQuery, see:
  8. * http://docs.jquery.com/License
  9. *
  10. * @version 0.1.2
  11. */
  12. (function ($) {
  13. $.InFieldLabels = function (label, field, options) {
  14. // To avoid scope issues, use 'base' instead of 'this'
  15. // to reference this class from internal events and functions.
  16. var base = this;
  17. // Access to jQuery and DOM versions of each element
  18. base.$label = $(label);
  19. base.label = label;
  20. base.$field = $(field);
  21. base.field = field;
  22. base.$label.data("InFieldLabels", base);
  23. base.showing = true;
  24. base.init = function () {
  25. // Merge supplied options with default options
  26. base.options = $.extend({}, $.InFieldLabels.defaultOptions, options);
  27. // Check if the field is already filled in
  28. if (base.$field.val() !== "") {
  29. base.$label.hide();
  30. base.showing = false;
  31. }
  32. base.$field.focus(function () {
  33. base.fadeOnFocus();
  34. }).blur(function () {
  35. base.checkForEmpty(true);
  36. }).bind('keydown.infieldlabel', function (e) {
  37. // Use of a namespace (.infieldlabel) allows us to
  38. // unbind just this method later
  39. base.hideOnChange(e);
  40. }).bind('paste', function (e) {
  41. // Since you can not paste an empty string we can assume
  42. // that the fieldis not empty and the label can be cleared.
  43. base.setOpacity(0.0);
  44. }).change(function (e) {
  45. base.checkForEmpty();
  46. }).bind('onPropertyChange', function () {
  47. base.checkForEmpty();
  48. });
  49. };
  50. // If the label is currently showing
  51. // then fade it down to the amount
  52. // specified in the settings
  53. base.fadeOnFocus = function () {
  54. if (base.showing) {
  55. base.setOpacity(base.options.fadeOpacity);
  56. }
  57. };
  58. base.setOpacity = function (opacity) {
  59. base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration);
  60. base.showing = (opacity > 0.0);
  61. };
  62. // Checks for empty as a fail safe
  63. // set blur to true when passing from
  64. // the blur event
  65. base.checkForEmpty = function (blur) {
  66. if (base.$field.val() === "") {
  67. base.prepForShow();
  68. base.setOpacity(blur ? 1.0 : base.options.fadeOpacity);
  69. } else {
  70. base.setOpacity(0.0);
  71. }
  72. };
  73. base.prepForShow = function (e) {
  74. if (!base.showing) {
  75. // Prepare for a animate in...
  76. base.$label.css({opacity: 0.0}).show();
  77. // Reattach the keydown event
  78. base.$field.bind('keydown.infieldlabel', function (e) {
  79. base.hideOnChange(e);
  80. });
  81. }
  82. };
  83. base.hideOnChange = function (e) {
  84. if (
  85. (e.keyCode === 16) || // Skip Shift
  86. (e.keyCode === 9) // Skip Tab
  87. ) {
  88. return;
  89. }
  90. if (base.showing) {
  91. base.$label.hide();
  92. base.showing = false;
  93. }
  94. // Remove keydown event to save on CPU processing
  95. base.$field.unbind('keydown.infieldlabel');
  96. };
  97. // Run the initialization method
  98. base.init();
  99. };
  100. $.InFieldLabels.defaultOptions = {
  101. fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be
  102. fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity
  103. };
  104. $.fn.inFieldLabels = function (options) {
  105. return this.each(function () {
  106. // Find input or textarea based on for= attribute
  107. // The for attribute on the label must contain the ID
  108. // of the input or textarea element
  109. var for_attr = $(this).attr('for'), $field;
  110. if (!for_attr) {
  111. return; // Nothing to attach, since the for field wasn't used
  112. }
  113. // Find the referenced input or textarea element
  114. // This fucking for_attr thing is some seriously dumb shit.
  115. //
  116. // It must be dealt with
  117. $field = $(this).siblings(
  118. "input#" + for_attr + "[type='text']," +
  119. "input#" + for_attr + "[type='search']," +
  120. "input#" + for_attr + "[type='tel']," +
  121. "input#" + for_attr + "[type='url']," +
  122. "input#" + for_attr + "[type='email']," +
  123. "input#" + for_attr + "[type='password']," +
  124. "textarea#" + for_attr
  125. );
  126. if ($field.length === 0) {
  127. return; // Again, nothing to attach
  128. }
  129. // Only create object for input[text], input[password], or textarea
  130. (new $.InFieldLabels(this, $field[0], options));
  131. });
  132. };
  133. }(jQuery));