/** * @author zhixin wen * https://github.com/wenzhixin/bootstrap-show-password * version: 1.0.3 */ !function ($) { 'use strict'; // TOOLS DEFINITION // ====================== // it only does '%s', and return '' when arguments are undefined var sprintf = function(str) { var args = arguments, flag = true, i = 1; str = str.replace(/%s/g, function () { var arg = args[i++]; if (typeof arg === 'undefined') { flag = false; return ''; } return arg; }); if (flag) { return str; } return ''; }; // PASSWORD CLASS DEFINITION // ====================== var Password = function(element, options) { this.options = options; this.$element = $(element); this.isShown = false; this.init(); }; Password.DEFAULTS = { placement: 'after', // 'before' or 'after' white: false, // v2 message: 'Click here to show/hide password', eyeClass: 'glyphicon', eyeOpenClass: 'glyphicon-eye-open', eyeCloseClass: 'glyphicon-eye-close' }; Password.prototype.init = function() { var placementFuc, inputClass; // v2 class if (this.options.placement === 'before') { placementFuc = 'insertBefore'; inputClass = 'input-prepend'; } else { this.options.placement = 'after'; // default to after placementFuc = 'insertAfter'; inputClass = 'input-append'; } // Create the text, icon and assign this.$element.wrap(sprintf('
', inputClass)); this.$icon = $([ '', '', '' ].join(''))[placementFuc](this.$element).css('cursor', 'pointer'); this.$icon.off('click').on('click', $.proxy(function () { this.$element.prop('type', this.isShown ? 'password' : 'text'); this.toggle(); }, this)); }; Password.prototype.toggle = function(_relatedTarget) { this[!this.isShown ? 'show' : 'hide'](_relatedTarget); }; Password.prototype.show = function(_relatedTarget) { var e = $.Event('show.bs.password', {relatedTarget: _relatedTarget}); this.$element.trigger(e); this.isShown = true; this.$icon.find('i') .removeClass('icon-eye-open ' + this.options.eyeOpenClass) .addClass('icon-eye-close ' + this.options.eyeCloseClass); }; Password.prototype.hide = function(_relatedTarget) { var e = $.Event('hide.bs.password', {relatedTarget: _relatedTarget}); this.$element.trigger(e); this.isShown = false; this.$icon.find('i') .removeClass('icon-eye-close ' + this.options.eyeCloseClass) .addClass('icon-eye-open ' + this.options.eyeOpenClass); }; Password.prototype.val = function (value) { return this.$element.val(); }; // PASSWORD PLUGIN DEFINITION // ======================= var old = $.fn.password; $.fn.password = function() { var option = arguments[0], args = arguments, value, allowedMethods = ['show', 'hide', 'toggle', 'val']; // public function this.each(function() { var $this = $(this), data = $this.data('bs.password'), options = $.extend({}, Password.DEFAULTS, $this.data(), typeof option === 'object' && option); if (typeof option === 'string') { if ($.inArray(option, allowedMethods) < 0) { throw "Unknown method: " + option; } value = data[option](args[1]); } else { if (!data) { data = new Password($this, options); $this.data('bs.password', data); } else { data.init(options); } } }); return value ? value : this; }; $.fn.password.Constructor = Password; // PASSWORD NO CONFLICT // ================= $.fn.password.noConflict = function() { $.fn.password = old; return this; }; $(function () { $('[data-toggle="password"]').password(); }); }(window.jQuery);