134 lines
3.8 KiB
JavaScript
134 lines
3.8 KiB
JavaScript
/**
|
|
Text input
|
|
|
|
@class text
|
|
@extends abstractinput
|
|
@final
|
|
@example
|
|
<a href="#" id="username" data-type="text" data-pk="1">awesome</a>
|
|
<script>
|
|
$(function(){
|
|
$('#username').editable({
|
|
url: '/post',
|
|
title: 'Enter username'
|
|
});
|
|
});
|
|
</script>
|
|
**/
|
|
(function ($) {
|
|
var Text = function (options) {
|
|
this.init('text', options, Text.defaults);
|
|
};
|
|
|
|
$.fn.editableutils.inherit(Text, $.fn.editabletypes.abstractinput);
|
|
|
|
$.extend(Text.prototype, {
|
|
render: function() {
|
|
this.renderClear();
|
|
this.setClass();
|
|
this.setAttr('placeholder');
|
|
},
|
|
|
|
activate: function() {
|
|
if(this.$input.is(':visible')) {
|
|
this.$input.focus();
|
|
$.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);
|
|
if(this.toggleClear) {
|
|
this.toggleClear();
|
|
}
|
|
}
|
|
},
|
|
|
|
//render clear button
|
|
renderClear: function() {
|
|
if (this.options.clear) {
|
|
this.$clear = $('<span class="editable-clear-x"></span>');
|
|
this.$input.after(this.$clear)
|
|
.css('padding-right', 24)
|
|
.keyup($.proxy(function(e) {
|
|
//arrows, enter, tab, etc
|
|
if(~$.inArray(e.keyCode, [40,38,9,13,27])) {
|
|
return;
|
|
}
|
|
|
|
clearTimeout(this.t);
|
|
var that = this;
|
|
this.t = setTimeout(function() {
|
|
that.toggleClear(e);
|
|
}, 200);
|
|
|
|
}, this))
|
|
.parent().css('position', 'relative');
|
|
|
|
this.$clear.click($.proxy(this.clear, this));
|
|
}
|
|
},
|
|
|
|
postrender: function() {
|
|
if(this.$clear) {
|
|
//can position clear button only here, when form is shown and height can be calculated
|
|
var h = this.$input.outerHeight() || 20,
|
|
delta = (h - this.$clear.height()) / 2;
|
|
|
|
//workaround for plain-popup
|
|
if(delta < 3) {
|
|
delta = 3;
|
|
}
|
|
|
|
this.$clear.css({top: delta, right: delta});
|
|
}
|
|
},
|
|
|
|
//show / hide clear button
|
|
toggleClear: function(e) {
|
|
if(!this.$clear) {
|
|
return;
|
|
}
|
|
|
|
var len = this.$input.val().length,
|
|
visible = this.$clear.is(':visible');
|
|
|
|
if(len && !visible) {
|
|
this.$clear.show();
|
|
}
|
|
|
|
if(!len && visible) {
|
|
this.$clear.hide();
|
|
}
|
|
},
|
|
|
|
clear: function() {
|
|
this.$clear.hide();
|
|
this.$input.val('').focus();
|
|
}
|
|
});
|
|
|
|
Text.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
|
/**
|
|
@property tpl
|
|
@default <input type="text">
|
|
**/
|
|
tpl: '<input type="text">',
|
|
/**
|
|
Placeholder attribute of input. Shown when input is empty.
|
|
|
|
@property placeholder
|
|
@type string
|
|
@default null
|
|
**/
|
|
placeholder: null,
|
|
|
|
/**
|
|
Whether to show `clear` button
|
|
|
|
@property clear
|
|
@type boolean
|
|
@default true
|
|
**/
|
|
clear: true
|
|
});
|
|
|
|
$.fn.editabletypes.text = Text;
|
|
|
|
}(window.jQuery));
|