136 lines
3.8 KiB
JavaScript
136 lines
3.8 KiB
JavaScript
/*
|
|
* Prevue.js jQuery Password Previewer v1.0.2
|
|
* http://jaunesarmiento.me/prevuejs
|
|
*
|
|
* Copyright 2013, Jaune Sarmiento
|
|
* Released under the MIT license
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
*
|
|
* Date: Wed Jan 29, 2014
|
|
*/
|
|
|
|
(function($) {
|
|
|
|
// Enables console.log() in all browsers for error messages
|
|
window.log = function() {
|
|
log.history = log.history || [];
|
|
log.history.push(arguments);
|
|
if (this.console) {
|
|
console.log(Array.prototype.slice.call(arguments))
|
|
}
|
|
};
|
|
|
|
$.fn.prevue = function(settings) {
|
|
|
|
/**
|
|
* Default settings
|
|
*
|
|
* string fontIconClassNameOn Class name of the icon to use when preview is on
|
|
* string fontIconClassNameOff Class name of the icon to use when preview is off
|
|
* string fontSize The size of the icon
|
|
* string color The color of the icon; in hex format (e.g #FFF or #000000). You may
|
|
* also use rgb() and rgba() values here
|
|
* int offsetX X-offset from the end of the input element; useful when the preview
|
|
* button's position is off
|
|
* int offsetY Y-offset from the top of the input element; useful when the preview
|
|
* button's position is off
|
|
* int zIndex z-index
|
|
*/
|
|
|
|
var defaults = {
|
|
fontIconClassNameOff: 'prevue-icon-eye', // These are interchanged since when preview is off you'll want show the 'on' icon
|
|
fontIconClassNameOn: 'prevue-icon-eye-off',
|
|
color: '#999',
|
|
offsetX: 5,
|
|
offsetY: 0,
|
|
zIndex: 0
|
|
};
|
|
|
|
// Merge the user settings with the defaults (if passed)
|
|
if (settings){ $.extend(defaults, settings) }
|
|
|
|
return this.each(function() {
|
|
|
|
// Selected node
|
|
var $o = $(this);
|
|
|
|
// Name of the selected node
|
|
var node = this.nodeName.toLowerCase();
|
|
|
|
// If the node is actually an input[type="password"] element
|
|
if (node == "input" && this.type == "password") {
|
|
|
|
// Build the preview button
|
|
var $input = $o,
|
|
|
|
$previewIcon = $('<i>')
|
|
.addClass('prevue-icon')
|
|
.addClass(defaults.fontIconClassNameOff),
|
|
|
|
|
|
$previewBtn = $('<a>')
|
|
.attr('href', 'javascript: void(0);')
|
|
.attr('tabindex', -1)
|
|
.addClass('prevue-btn')
|
|
.css({
|
|
'text-decoration': 'none',
|
|
'position': 'absolute',
|
|
'padding-right': '5px',
|
|
'padding-left': '5px',
|
|
'line-height': '13px',
|
|
'right': 0,
|
|
'top': 0,
|
|
'line-height': '0px',
|
|
'color': defaults.color,
|
|
'z-index': parseInt(0 + defaults.zIndex),
|
|
'display': 'flex',
|
|
'flex-direction': 'column',
|
|
'justify-content': 'center',
|
|
'height': '100%'
|
|
}),
|
|
|
|
|
|
|
|
$wrapper = $('<span>')
|
|
.addClass('prevue-wrapper')
|
|
.css({
|
|
'position': 'relative',
|
|
'display': 'inline-block',
|
|
'vertical-align': 'top'
|
|
});
|
|
|
|
$previewBtn.append($previewIcon);
|
|
if ($input.css('width')) {
|
|
$wrapper.css('width', ($input.outerWidth() / $input.parent().width() * 100) + '%');
|
|
$input.css('width', '100%');
|
|
}
|
|
$o.replaceWith($wrapper);
|
|
$wrapper.append($input);
|
|
$wrapper.append($previewBtn);
|
|
|
|
// Add the event handler
|
|
$previewBtn.on('click', function(e){
|
|
var $el = $(this).prev(),
|
|
$icon = $(this).children().eq(0);
|
|
|
|
if ($el.prop('type') == 'password') {
|
|
$el.prop('type', 'text');
|
|
$icon.removeClass(defaults.fontIconClassNameOff).addClass(defaults.fontIconClassNameOn);
|
|
}
|
|
else {
|
|
$el.prop('type', 'password');
|
|
$icon.removeClass(defaults.fontIconClassNameOn).addClass(defaults.fontIconClassNameOff);
|
|
}
|
|
});
|
|
|
|
} else {
|
|
console.log('Prevue.js only works on <input type="password"> elements, while you have used it on a <'+node+'> element.');
|
|
return false;
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
})(jQuery);
|