source: extensions/GrumPluginClasses/js/ui.inputConsole.js @ 20009

Last change on this file since 20009 was 16012, checked in by grum, 12 years ago

feature:2634- compatibility with Piwigo 2.4
+add some objects on js framework

  • Property svn:executable set to *
File size: 23.8 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: ui.inputConsole.js
4 * file version: 1.0.1
5 * date: 2012-06-18
6 *
7 * A jQuery plugin provided by the piwigo's plugin "GrumPluginClasses"
8 *
9 * -----------------------------------------------------------------------------
10 * Author     : Grum
11 *   email    : grum@piwigo.com
12 *   website  : http://photos.grum.fr
13 *
14 *   << May the Little SpaceFrog be with you ! >>
15 * -----------------------------------------------------------------------------
16 *
17 *
18 *
19 *
20 * :: HISTORY ::
21 *
22 * | release | date       |
23 * | 1.0.0   | 2010/10/10 | first release
24 * |         |            |
25 * | 1.0.1   | 2012/06/18 | * improve memory managment
26 * |         |            |
27 * |         |            |
28 * |         |            |
29 * |         |            |
30 *
31 */
32
33
34
35(
36  function($)
37  {
38    /*
39     * plugin 'public' functions
40     */
41    var publicMethods =
42    {
43      init : function (opt)
44        {
45          return this.each(function()
46            {
47              // default values for the plugin
48              var $this=$(this),
49                  data = $this.data('options'),
50                  objects = $this.data('objects'),
51                  properties = $this.data('properties'),
52                  options =
53                    {
54                      disabled:false,
55                      prompt:'>',
56                      historySize:8,
57                      historyHeight:60,
58                      change:null,
59                      submit:null,
60                      submited:null,
61                      focusChanged:null
62                    };
63
64              // if options given, merge it
65              // if(opt) $.extend(options, opt); ==> options are set by setters
66
67              $this.data('options', options);
68
69
70              if(!properties)
71              {
72                $this.data('properties',
73                  {
74                    initialized:false,
75                    value:'',
76                    isValid:true,
77                    mouseIsOver:false,
78                    historyIsVisible:false,
79                    inputMargins:0,
80                    focus:false
81                  }
82                );
83                properties=$this.data('properties');
84              }
85
86              if(!objects)
87              {
88                objects =
89                  {
90                    container:$('<div/>',
91                        {
92                          'class':'ui-inputConsole',
93                          css:{
94                            width:'100%'
95                          }
96                        }
97                    ).bind('click.inputConsole',
98                        function ()
99                        {
100                          objects.input.focus();
101                        }
102                      )
103                    .bind('mouseenter',
104                        function ()
105                        {
106                          properties.mouseIsOver=true;
107                        }
108                      )
109                    .bind('mouseleave',
110                        function ()
111                        {
112                          properties.mouseIsOver=false;
113                        }
114                      ),
115                    inputContainer:$('<div/>',
116                      {
117                        'class':'ui-inputConsole-input'
118                      }
119                    ),
120                    input:$('<input>',
121                      {
122                        type:"text",
123                        value:''
124                      }
125                    ).bind('focusout.inputConsole',
126                        function ()
127                        {
128                          privateMethods.lostFocus($this);
129                        }
130                      )
131                      .bind('focus.inputConsole',
132                          function ()
133                          {
134                            privateMethods.getFocus($this);
135                          }
136                        )
137                      .bind('keyup.inputConsole',
138                          function (event)
139                          {
140                            privateMethods.keyUp($this, event);
141                          }
142                        ),
143                    prompt:$('<div/>',
144                      {
145                        html:options.prompt,
146                        'class':'ui-inputConsole-prompt'
147                      }
148                    ),
149                    historyContainer:$('<div/>',
150                      {
151                        'class':'ui-inputConsole-history',
152                        css:{
153                          display:'none'
154                        }
155                      }
156                    ),
157                    historyBackground:$('<div/>',
158                      {
159                        'class':'ui-inputConsole-historyBg'
160                      }
161                    ),
162                    historyListContainer:$('<div/>',
163                      {
164                        'class':'ui-inputConsole-historyListContainer'
165                      }
166                    ),
167                    historyList:$('<ul/>')
168
169                  };
170
171                $this
172                  .html('')
173                  .append(
174                    objects.container
175                    .append(
176                      objects.historyContainer
177                        .append(objects.historyBackground)
178                        .append(objects.historyListContainer.append(objects.historyList))
179                    )
180                    .append(
181                      objects.inputContainer.append(objects.prompt).append(objects.input)
182                    )
183                  ).bind('resize.inputConsole',
184                        function ()
185                        {
186                          privateMethods.setObjectsWidth($this);
187                        }
188                      );
189
190                properties.inputMargins=objects.input.outerWidth(true)-objects.input.width();
191
192                $this.data('objects', objects);
193              }
194
195              privateMethods.setOptions($this, opt);
196            }
197          );
198        }, // init
199      destroy : function ()
200        {
201          return this.each(
202            function()
203            {
204              // default values for the plugin
205              var $this=$(this),
206                  objects = $this.data('objects');
207              objects.input.unbind().remove();
208              objects.prompt.unbind().remove();
209              objects.inputContainer.unbind().remove();
210              objects.historyList.unbind().remove();
211              objects.historyListContainer.unbind().remove();
212              objects.historyBackground.unbind().remove();
213              objects.historyContainer.unbind().remove();
214              objects.container.unbind().remove();
215              $this
216                .unbind('.inputConsole')
217                .removeData()
218                .css(
219                  {
220                    width:'',
221                    height:''
222                  }
223                );
224              delete $this;
225            }
226          );
227        }, // destroy
228
229      options: function (value)
230        {
231          return this.each(function()
232            {
233              privateMethods.setOptions($(this), value);
234            }
235          );
236        }, // options
237
238      disabled: function (value)
239        {
240          if(value!=null)
241          {
242            return this.each(function()
243              {
244                privateMethods.setDisabled($(this), value);
245              }
246            );
247          }
248          else
249          {
250            var options = this.data('options');
251
252            if(options)
253            {
254              return(options.disabled);
255            }
256            else
257            {
258              return('');
259            }
260          }
261        }, // disabled
262
263
264      prompt: function (value)
265        {
266          if(value!=null)
267          {
268            return this.each(function()
269              {
270                privateMethods.setPrompt($(this), value);
271              }
272            );
273          }
274          else
275          {
276            var options = this.data('options');
277
278            if(options)
279            {
280              return(options.prompt);
281            }
282            else
283            {
284              return('');
285            }
286          }
287        }, // prompt
288
289      historySize: function (value)
290        {
291          if(value!=null)
292          {
293            return this.each(function()
294              {
295                privateMethods.setHistorySize($(this), value);
296              }
297            );
298          }
299          else
300          {
301            var options = this.data('options');
302
303            if(options)
304            {
305              return(options.historySize);
306            }
307            else
308            {
309              return('');
310            }
311          }
312        }, // historySize
313
314      historyHeight: function (value)
315        {
316          if(value!=null)
317          {
318            return this.each(function()
319              {
320                privateMethods.setHistoryHeight($(this), value);
321              }
322            );
323          }
324          else
325          {
326            var options = this.data('options');
327
328            if(options)
329            {
330              return(options.historyHeight);
331            }
332            else
333            {
334              return('');
335            }
336          }
337        }, // historyHeight
338
339      value: function (value)
340        {
341          if(value!=null)
342          {
343            // set selected value
344            return this.each(function()
345              {
346                privateMethods.setValue($(this), value, true);
347              }
348            );
349          }
350          else
351          {
352            // return the selected tags
353            var properties=this.data('properties');
354            return(properties.value);
355          }
356        }, // value
357
358      history: function (value, param)
359        {
360          var objects=this.data('objects');
361
362          if(value!=null)
363          {
364            // set selected value
365            return this.each(function()
366              {
367                switch(value)
368                {
369                  case 'clear':
370                    objects.historyList.html('');
371                    break;
372                  case 'addResult':
373                    privateMethods.updateHistoryResult($(this), param);
374                    break;
375                }
376              }
377            );
378          }
379          else
380          {
381            // return the selected tags
382            var returned=[];
383            objects.historyList.children().each(
384              function (index, item)
385              {
386                returned.push($(item).text());
387              }
388            );
389            return(returned);
390          }
391        }, // value
392
393      isValid: function (value)
394        {
395          if(value!=null)
396          {
397            // set selected value
398            return this.each(function()
399              {
400                privateMethods.setIsValid($(this), value);
401              }
402            );
403          }
404          else
405          {
406            // return the selected tags
407            var properties=this.data('properties');
408            return(properties.isValid);
409          }
410        }, // isValid
411
412      focus: function (value)
413        {
414          if(value!=null)
415          {
416            // set selected value
417            return this.each(function()
418              {
419                privateMethods.setFocus($(this), value);
420              }
421            );
422          }
423          else
424          {
425            // return the selected tags
426            var properties=this.data('properties');
427            return(properties.focus);
428          }
429        }, // isValid
430
431      change: function (value)
432        {
433          if(value!=null && $.isFunction(value))
434          {
435            // set selected value
436            return this.each(function()
437              {
438                privateMethods.setEventChange($(this), value);
439              }
440            );
441          }
442          else
443          {
444            // return the selected value
445            var options=this.data('options');
446
447            if(options)
448            {
449              return(options.change);
450            }
451            else
452            {
453              return(null);
454            }
455          }
456        }, // change
457
458
459      submit: function (value)
460        {
461          if(value!=null && $.isFunction(value))
462          {
463            // set selected value
464            return this.each(function()
465              {
466                privateMethods.setEventSubmit($(this), value);
467              }
468            );
469          }
470          else
471          {
472            // return the selected value
473            var options=this.data('options');
474
475            if(options)
476            {
477              return(options.submit);
478            }
479            else
480            {
481              return(null);
482            }
483          }
484        }, // submit
485
486      submited: function (value)
487        {
488          if(value!=null && $.isFunction(value))
489          {
490            // set selected value
491            return this.each(function()
492              {
493                privateMethods.setEventSubmited($(this), value);
494              }
495            );
496          }
497          else
498          {
499            // return the selected value
500            var options=this.data('options');
501
502            if(options)
503            {
504              return(options.submited);
505            }
506            else
507            {
508              return(null);
509            }
510          }
511        }, // submited
512
513      focusChanged: function (value)
514        {
515          if(value!=null && $.isFunction(value))
516          {
517            // set selected value
518            return this.each(function()
519              {
520                privateMethods.setEventFocusChanged($(this), value);
521              }
522            );
523          }
524          else
525          {
526            // return the selected value
527            var options=this.data('options');
528
529            if(options)
530            {
531              return(options.focusChanged);
532            }
533            else
534            {
535              return(null);
536            }
537          }
538        }, // focusChanged
539
540
541
542    }; // methods
543
544
545    /*
546     * plugin 'private' methods
547     */
548    var privateMethods =
549    {
550      setOptions : function (object, value)
551        {
552          var properties=object.data('properties'),
553              options=object.data('options');
554
555          if(!$.isPlainObject(value)) return(false);
556
557          properties.initialized=false;
558
559          privateMethods.setHistoryHeight(object, (value.historyHeight!=null)?value.historyHeight:options.historyHeight);
560          privateMethods.setHistorySize(object, (value.historySize!=null)?value.historySize:options.historySize);
561          privateMethods.setPrompt(object, (value.prompt!=null)?value.prompt:options.prompt);
562          privateMethods.setValue(object, (value.value!=null)?value.value:options.value, true);
563          privateMethods.setDisabled(object, (value.disabled!=null)?value.disabled:options.disabled);
564
565          privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
566          privateMethods.setEventSubmit(object, (value.submit!=null)?value.submit:options.submit);
567          privateMethods.setEventSubmited(object, (value.submited!=null)?value.submited:options.submited);
568          privateMethods.setEventFocusChanged(object, (value.focusChanged!=null)?value.focusChanged:options.focusChanged);
569
570          properties.initialized=true;
571        },
572
573      setPrompt: function (object, value)
574        {
575          var objects=object.data('objects'),
576              options=object.data('options'),
577              properties=object.data('properties');
578
579          if(!properties.initialized || options.prompt!=value)
580          {
581            options.prompt=value;
582            objects.prompt.html(options.prompt);
583            privateMethods.setObjectsWidth(object);
584          }
585          return(options.prompt);
586        },
587
588      setHistorySize: function (object, value)
589        {
590          var options=object.data('options'),
591              properties=object.data('properties');
592
593          if(!properties.initialized || options.historySize!=value)
594          {
595            options.historySize=value;
596            privateMethods.updateHistory(object, null);
597          }
598          return(options.historySize);
599        },
600
601      setHistoryHeight: function (object, value)
602        {
603          var objects=object.data('objects'),
604              options=object.data('options'),
605              properties=object.data('properties');
606
607          if(!properties.initialized || options.historyHeight!=value)
608          {
609            options.historyHeight=value;
610            objects.historyContainer.css(
611              {
612                height:options.historyHeight+'px',
613                'margin-top':(-options.historyHeight)+'px'
614              }
615            );
616          }
617          return(options.historyHeight);
618        },
619
620      setIsValid : function (object, value)
621        {
622          var objects=object.data('objects'),
623              properties=object.data('properties');
624
625          if(properties.isValid!=value)
626          {
627            properties.isValid=value;
628            if(properties.isValid)
629            {
630              objects.container.removeClass('ui-error');
631              objects.input.removeClass('ui-error');
632            }
633            else
634            {
635              objects.container.addClass('ui-error');
636              objects.input.addClass('ui-error');
637            }
638          }
639          return(properties.isValid);
640        },
641
642      setDisabled : function (object, value)
643        {
644          var options=object.data('options'),
645              properties=object.data('properties');
646
647          if((!properties.initialized || options.disabled!=value) && (value==true || value==false))
648          {
649            options.disabled=value;
650
651          }
652          return(options.disabled);
653        },
654
655      setValue : function (object, value, apply)
656        {
657          var options=object.data('options'),
658              properties=object.data('properties'),
659              objects=object.data('objects');
660
661          properties.value=value;
662
663          if(apply) objects.input.val(properties.value);
664
665          if(options.change) object.trigger('inputConsoleChange', properties.value);
666
667          return(true);
668        }, //setValue
669
670
671      setFocus : function (object, value)
672        {
673          var objects=object.data('objects'),
674              options=object.data('options'),
675              properties=object.data('properties');
676
677          if(value===true||value===false)
678          {
679            if(value)
680            {
681              objects.input.focus();
682            }
683            else
684            {
685              objects.input.blur();
686            }
687
688            properties.focus=value;
689            if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus);
690          }
691
692          return(properties.focus);
693        },
694
695      getFocus : function (object)
696        {
697          var objects=object.data('objects'),
698              options=object.data('options'),
699              properties=object.data('properties');
700
701          properties.focus=true;
702          objects.historyContainer.css('display', 'block');
703          privateMethods.setObjectsWidth(object);
704          if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus);
705        },
706
707      lostFocus : function (object)
708        {
709          var objects=object.data('objects'),
710              options=object.data('options'),
711              properties=object.data('properties');
712
713          properties.focus=false;
714          objects.historyContainer.css('display', 'none');
715          if(options.focusChanged) object.trigger('inputConsoleFocusChanged', properties.focus);
716        },
717
718      setEventChange : function (object, value)
719        {
720          var options=object.data('options');
721
722          options.change=value;
723          object.unbind('inputConsoleChange');
724          if(value) object.bind('inputConsoleChange', options.change);
725          return(options.change);
726        },
727
728      setEventSubmit : function (object, value)
729        {
730          var options=object.data('options');
731
732          options.submit=value;
733          object.unbind('inputConsoleSubmit');
734          if(value) object.bind('inputConsoleSubmit', options.submit);
735          return(options.submit);
736        },
737
738      setEventSubmited : function (object, value)
739        {
740          var options=object.data('options');
741
742          options.submited=value;
743          object.unbind('inputConsoleSubmited');
744          if(value) object.bind('inputConsoleSubmited', options.submited);
745          return(options.submited);
746        },
747
748      setEventFocusChanged : function (object, value)
749        {
750          var options=object.data('options');
751
752          options.focusChanged=value;
753          object.unbind('inputConsoleFocusChanged');
754          if(value) object.bind('inputConsoleFocusChanged', options.focusChanged);
755          return(options.focusChanged);
756        },
757
758      keyUp : function (object, event)
759        {
760          var properties=object.data('properties'),
761              options=object.data('options'),
762              objects=object.data('objects');
763
764          if(event.keyCode==13 && // DOM_VK_ENTER
765             properties.isValid)
766          {
767            if(options.submit) object.trigger('inputConsoleSubmit', properties.value);
768            privateMethods.updateHistory(object, properties.value);
769            if(options.submited) object.trigger('inputConsoleSubmited', properties.value);
770            privateMethods.setValue(object, '', true);
771          }
772          else
773          {
774            privateMethods.setValue(object, objects.input.val(), false);
775          }
776        },
777
778      updateHistory : function (object, item)
779        {
780          var options=object.data('options'),
781              objects=object.data('objects');
782
783          if(item!='' && item!=null)
784            objects.historyList.append(
785              $('<li/>', { html: '<span class="ui-inputConsole-historyCmd">'+item+'</span>' } )
786                .bind('click', object,
787                  function (event)
788                    {
789                      privateMethods.setValue(event.data, $(this).children('.ui-inputConsole-historyCmd').html(), true);
790                    }
791                )
792            );
793
794          while(objects.historyList.children().length>options.historySize)
795          {
796            objects.historyList.children(':first').remove();
797          }
798          objects.historyContainer.scrollTop(objects.historyList.height());
799        },
800
801      updateHistoryResult : function (object, item)
802        {
803          var options=object.data('options'),
804              objects=object.data('objects');
805
806          if(item!='' && item!=null)
807          {
808            objects.historyList.children(':last').html(
809              objects.historyList.children(':last').html() + "<span class='ui-inputConsole-historyResult'>"+item+"</span>"
810            );
811          }
812
813          objects.historyListContainer.scrollTop(objects.historyList.height());
814        },
815
816      setObjectsWidth : function (object)
817        {
818          var objects=object.data('objects')
819              properties=object.data('properties');
820
821          if(objects.inputContainer.width()>0)
822          {
823            objects.input.css('width',
824              (objects.inputContainer.innerWidth()-objects.prompt.outerWidth(true)-properties.inputMargins)+'px'
825            );
826            objects.historyContainer.css(
827              {
828                width:objects.inputContainer.innerWidth()+'px',
829                'margin-left':((objects.historyContainer.width()-objects.historyContainer.outerWidth())/2)+'px'
830              }
831            );
832          }
833        }
834
835    };
836
837
838    $.fn.inputConsole = function(method)
839    {
840      if(publicMethods[method])
841      {
842        return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
843      }
844      else if(typeof method === 'object' || ! method)
845      {
846        return publicMethods.init.apply(this, arguments);
847      }
848      else
849      {
850        $.error( 'Method ' +  method + ' does not exist on jQuery.inputConsole' );
851      }
852    } // $.fn.inputConsole
853
854  }
855)(jQuery);
Note: See TracBrowser for help on using the repository browser.