/** * ----------------------------------------------------------------------------- * file: ui.inputConsole.js * file version: 1.0.1 * date: 2010-11-05 * * A jQuery plugin provided by the piwigo's plugin "GrumPluginClasses" * * ----------------------------------------------------------------------------- * Author : Grum * email : grum@piwigo.com * website : http://photos.grum.fr * PWG user : http://forum.phpwebgallery.net/profile.php?id=3706 * * << May the Little SpaceFrog be with you ! >> * ----------------------------------------------------------------------------- * * * * * :: HISTORY :: * * | release | date | * | 1.0.0 | 2010/10/10 | first release * | | | * | | | * | | | * | | | * | | | * | | | * */ ( function($) { /* * plugin 'public' functions */ var publicMethods = { init : function (opt) { return this.each(function() { // default values for the plugin var $this=$(this), data = $this.data('options'), objects = $this.data('objects'), properties = $this.data('properties'), options = { disabled:false, prompt:'>', historySize:8, historyHeight:60, change:null, submit:null, submited:null, focusChanged:null }; // if options given, merge it // if(opt) $.extend(options, opt); ==> options are set by setters $this.data('options', options); if(!properties) { $this.data('properties', { initialized:false, value:'', isValid:true, mouseIsOver:false, historyIsVisible:false, inputMargins:0, focus:false } ); properties=$this.data('properties'); } if(!objects) { objects = { container:$('
', { 'class':'ui-inputConsole', css:{ width:'100%' } } ).bind('click.inputConsole', function () { objects.input.focus(); } ) .bind('mouseenter', function () { properties.mouseIsOver=true; } ) .bind('mouseleave', function () { properties.mouseIsOver=false; } ), inputContainer:$('
', { 'class':'ui-inputConsole-input' } ), input:$('', { type:"text", value:'' } ).bind('focusout.inputConsole', function () { privateMethods.lostFocus($this); } ) .bind('focus.inputConsole', function () { privateMethods.getFocus($this); } ) .bind('keyup.inputConsole', function (event) { privateMethods.keyUp($this, event); } ), prompt:$('
', { html:options.prompt, 'class':'ui-inputConsole-prompt' } ), historyContainer:$('
', { 'class':'ui-inputConsole-history', css:{ display:'none' } } ), historyBackground:$('
', { 'class':'ui-inputConsole-historyBg' } ), historyListContainer:$('
', { 'class':'ui-inputConsole-historyListContainer' } ), historyList:$('
    ') }; $this .html('') .append( objects.container .append( objects.historyContainer .append(objects.historyBackground) .append(objects.historyListContainer.append(objects.historyList)) ) .append( objects.inputContainer.append(objects.prompt).append(objects.input) ) ).bind('resize.inputConsole', function () { privateMethods.setObjectsWidth($this); } ); properties.inputMargins=objects.input.outerWidth(true)-objects.input.width(); $this.data('objects', objects); } privateMethods.setOptions($this, opt); } ); }, // init destroy : function () { return this.each( function() { // default values for the plugin var $this=$(this), objects = $this.data('objects'); objects.input.unbind().remove(); objects.container.unbind().remove(); $this .unbind('.inputConsole') .css( { width:'', height:'' } ); } ); }, // destroy options: function (value) { return this.each(function() { privateMethods.setOptions($(this), value); } ); }, // options disabled: function (value) { if(value!=null) { return this.each(function() { privateMethods.setDisabled($(this), value); } ); } else { var options = this.data('options'); if(options) { return(options.disabled); } else { return(''); } } }, // disabled prompt: function (value) { if(value!=null) { return this.each(function() { privateMethods.setPrompt($(this), value); } ); } else { var options = this.data('options'); if(options) { return(options.prompt); } else { return(''); } } }, // prompt historySize: function (value) { if(value!=null) { return this.each(function() { privateMethods.setHistorySize($(this), value); } ); } else { var options = this.data('options'); if(options) { return(options.historySize); } else { return(''); } } }, // historySize historyHeight: function (value) { if(value!=null) { return this.each(function() { privateMethods.setHistoryHeight($(this), value); } ); } else { var options = this.data('options'); if(options) { return(options.historyHeight); } else { return(''); } } }, // historyHeight value: function (value) { if(value!=null) { // set selected value return this.each(function() { privateMethods.setValue($(this), value, true); } ); } else { // return the selected tags var properties=this.data('properties'); return(properties.value); } }, // value history: function (value, param) { var objects=this.data('objects'); if(value!=null) { // set selected value return this.each(function() { switch(value) { case 'clear': objects.historyList.html(''); break; case 'addResult': privateMethods.updateHistoryResult($(this), param); break; } } ); } else { // return the selected tags var returned=[]; objects.historyList.children().each( function (index, item) { returned.push($(item).text()); } ); return(returned); } }, // value isValid: function (value) { if(value!=null) { // set selected value return this.each(function() { privateMethods.setIsValid($(this), value); } ); } else { // return the selected tags var properties=this.data('properties'); return(properties.isValid); } }, // isValid focus: function (value) { if(value!=null) { // set selected value return this.each(function() { privateMethods.setFocus($(this), value); } ); } else { // return the selected tags var properties=this.data('properties'); return(properties.focus); } }, // isValid change: function (value) { if(value!=null && $.isFunction(value)) { // set selected value return this.each(function() { privateMethods.setEventChange($(this), value); } ); } else { // return the selected value var options=this.data('options'); if(options) { return(options.change); } else { return(null); } } }, // change submit: function (value) { if(value!=null && $.isFunction(value)) { // set selected value return this.each(function() { privateMethods.setEventSubmit($(this), value); } ); } else { // return the selected value var options=this.data('options'); if(options) { return(options.submit); } else { return(null); } } }, // submit submited: function (value) { if(value!=null && $.isFunction(value)) { // set selected value return this.each(function() { privateMethods.setEventSubmited($(this), value); } ); } else { // return the selected value var options=this.data('options'); if(options) { return(options.submited); } else { return(null); } } }, // submited focusChanged: function (value) { if(value!=null && $.isFunction(value)) { // set selected value return this.each(function() { privateMethods.setEventFocusChanged($(this), value); } ); } else { // return the selected value var options=this.data('options'); if(options) { return(options.focusChanged); } else { return(null); } } }, // focusChanged }; // methods /* * plugin 'private' methods */ var privateMethods = { setOptions : function (object, value) { var properties=object.data('properties'), options=object.data('options'); if(!$.isPlainObject(value)) return(false); properties.initialized=false; privateMethods.setHistoryHeight(object, (value.historyHeight!=null)?value.historyHeight:options.historyHeight); privateMethods.setHistorySize(object, (value.historySize!=null)?value.historySize:options.historySize); privateMethods.setPrompt(object, (value.prompt!=null)?value.prompt:options.prompt); privateMethods.setValue(object, (value.value!=null)?value.value:options.value, true); privateMethods.setDisabled(object, (value.disabled!=null)?value.disabled:options.disabled); privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change); privateMethods.setEventSubmit(object, (value.submit!=null)?value.submit:options.submit); privateMethods.setEventSubmited(object, (value.submited!=null)?value.submited:options.submited); privateMethods.setEventFocusChanged(object, (value.focusChanged!=null)?value.focusChanged:options.focusChanged); properties.initialized=true; }, setPrompt: function (object, value) { var objects=object.data('objects'), options=object.data('options'), properties=object.data('properties'); if(!properties.initialized || options.prompt!=value) { options.prompt=value; objects.prompt.html(options.prompt); privateMethods.setObjectsWidth(object); } return(options.prompt); }, setHistorySize: function (object, value) { var options=object.data('options'), properties=object.data('properties'); if(!properties.initialized || options.historySize!=value) { options.historySize=value; privateMethods.updateHistory(object, null); } return(options.historySize); }, setHistoryHeight: function (object, value) { var objects=object.data('objects'), options=object.data('options'), properties=object.data('properties'); if(!properties.initialized || options.historyHeight!=value) { options.historyHeight=value; objects.historyContainer.css( { height:options.historyHeight+'px', 'margin-top':(-options.historyHeight)+'px' } ); } return(options.historyHeight); }, setIsValid : function (object, value) { var objects=object.data('objects'), properties=object.data('properties'); if(properties.isValid!=value) { properties.isValid=value; if(properties.isValid) { objects.container.removeClass('ui-error'); objects.input.removeClass('ui-error'); } else { objects.container.addClass('ui-error'); objects.input.addClass('ui-error'); } } return(properties.isValid); }, setDisabled : function (object, value) { var options=object.data('options'), properties=object.data('properties'); if((!properties.initialized || options.disabled!=value) && (value==true || value==false)) { options.disabled=value; } return(options.disabled); }, setValue : function (object, value, apply) { var options=object.data('options'), properties=object.data('properties'), objects=object.data('objects'); properties.value=value; if(apply) objects.input.val(properties.value); if(options.change) object.trigger('inputConsoleChange', properties.value); return(true); }, //setValue setFocus : function (object, value) { var objects=object.data('objects'), options=object.data('options'), properties=object.data('properties'); if(value===true||value===false) { if(value) { objects.input.focus(); } else { objects.input.blur(); } properties.focus=value; if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus); } return(properties.focus); }, getFocus : function (object) { var objects=object.data('objects'), options=object.data('options'), properties=object.data('properties'); properties.focus=true; objects.historyContainer.css('display', 'block'); privateMethods.setObjectsWidth(object); if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus); }, lostFocus : function (object) { var objects=object.data('objects'), options=object.data('options'), properties=object.data('properties'); properties.focus=false; objects.historyContainer.css('display', 'none'); if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus); }, setEventChange : function (object, value) { var options=object.data('options'); options.change=value; object.unbind('inputConsoleChange'); if(value) object.bind('inputConsoleChange', options.change); return(options.change); }, setEventSubmit : function (object, value) { var options=object.data('options'); options.submit=value; object.unbind('inputConsoleSubmit'); if(value) object.bind('inputConsoleSubmit', options.submit); return(options.submit); }, setEventSubmited : function (object, value) { var options=object.data('options'); options.submited=value; object.unbind('inputConsoleSubmited'); if(value) object.bind('inputConsoleSubmited', options.submited); return(options.submited); }, setEventFocusChanged : function (object, value) { var options=object.data('options'); options.focusChanged=value; object.unbind('inputConsoleFocusChanged'); if(value) object.bind('inputConsoleFocusChanged', options.focusChanged); return(options.focusChanged); }, keyUp : function (object, event) { var properties=object.data('properties'), options=object.data('options'), objects=object.data('objects'); if(event.keyCode==13 && // DOM_VK_ENTER properties.isValid) { if(options.submit) object.trigger('inputConsoleSubmit', properties.value); privateMethods.updateHistory(object, properties.value); if(options.submited) object.trigger('inputConsoleSubmited', properties.value); privateMethods.setValue(object, '', true); } else { privateMethods.setValue(object, objects.input.val(), false); } }, updateHistory : function (object, item) { var options=object.data('options'), objects=object.data('objects'); if(item!='' && item!=null) objects.historyList.append( $('
  • ', { html: ''+item+'' } ) .bind('click', object, function (event) { privateMethods.setValue(event.data, $(this).children('.ui-inputConsole-historyCmd').html(), true); } ) ); while(objects.historyList.children().length>options.historySize) { objects.historyList.children(':first').remove(); } objects.historyContainer.scrollTop(objects.historyList.height()); }, updateHistoryResult : function (object, item) { var options=object.data('options'), objects=object.data('objects'); if(item!='' && item!=null) { objects.historyList.children(':last').html( objects.historyList.children(':last').html() + ""+item+"" ); } objects.historyListContainer.scrollTop(objects.historyList.height()); }, setObjectsWidth : function (object) { var objects=object.data('objects') properties=object.data('properties'); if(objects.inputContainer.width()>0) { objects.input.css('width', (objects.inputContainer.innerWidth()-objects.prompt.outerWidth(true)-properties.inputMargins)+'px' ); objects.historyContainer.css( { width:objects.inputContainer.innerWidth()+'px', 'margin-left':((objects.historyContainer.width()-objects.historyContainer.outerWidth())/2)+'px' } ); } } }; $.fn.inputConsole = function(method) { if(publicMethods[method]) { return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if(typeof method === 'object' || ! method) { return publicMethods.init.apply(this, arguments); } else { $.error( 'Method ' + method + ' does not exist on jQuery.inputConsole' ); } } // $.fn.inputConsole } )(jQuery);