source: extensions/GrumPluginClasses/js/ui.inputSortBox.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

File size: 16.2 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: ui.inputSortBox.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   | 2012/06/09 | 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                      mode:'normal', // normal|direction
55                      chars:{
56                          asc:'',
57                          desc:''
58                        },
59                      items:[],
60                      change:null
61                    };
62
63              // if options given, merge it
64              // if(opt) $.extend(options, opt); ==> options are set by setters
65
66              $this.data('options', options);
67
68
69              if(!properties)
70              {
71                $this.data('properties',
72                  {
73                  }
74                );
75                properties=$this.data('properties');
76              }
77
78              if(!objects)
79              {
80                objects =
81                  {
82                    container:$('<ul/>',
83                        {
84                          'class':'ui-inputSortBox'
85                        }
86                    )
87                  };
88
89                $this
90                  .html('')
91                  .append(
92                      objects.container
93                        );
94
95                $this.data('objects', objects);
96              }
97
98              privateMethods.setOptions($this, opt);
99            }
100          );
101        }, // init
102      destroy : function ()
103        {
104          return this.each(
105            function()
106            {
107              // default values for the plugin
108              var $this=$(this),
109                  objects = $this.data('objects');
110              objects.container.remove();
111              $this
112                .unbind('inputSortBox')
113                .removeData();
114              delete $this;
115            }
116          );
117        }, // destroy
118
119      options: function (value)
120        {
121          return(
122            this.each(
123              function()
124              {
125                privateMethods.setOptions($(this), value);
126              }
127            )
128          );
129        }, // options
130
131
132      items: function (value)
133        {
134          if(value!=null)
135          {
136            // set selected value
137            return(
138              this.each(
139                function()
140                {
141                  privateMethods.setItems($(this), value, true);
142                }
143              )
144            );
145          }
146          else
147          {
148            // return the selected tags
149            var options=this.data('options');
150            return(options.items);
151          }
152        }, // items
153
154      mode: function (value)
155        {
156          if(value!=null)
157          {
158            // set selected value
159            return(
160              this.each(
161                function()
162                {
163                  privateMethods.setMode($(this), value, true);
164                }
165              )
166            );
167          }
168          else
169          {
170            // return the selected tags
171            var options=this.data('options');
172            return(options.mode);
173          }
174        }, // mode
175
176      chars: function (value)
177        {
178          if(value!=null)
179          {
180            // set selected value
181            return(
182              this.each(
183                function()
184                {
185                  privateMethods.setChars($(this), value, true);
186                }
187              )
188            );
189          }
190          else
191          {
192            // return the selected tags
193            var options=this.data('options');
194            return(options.chars);
195          }
196        }, // mode
197
198      change: function (value)
199        {
200          if(value!=null && $.isFunction(value))
201          {
202            // set selected value
203            return(
204              this.each(
205                function()
206                {
207                  privateMethods.setEventChange($(this), value);
208                }
209              )
210            );
211          }
212          else
213          {
214            // return the selected value
215            var options=this.data('options');
216
217            if(options)
218            {
219              return(options.change);
220            }
221            else
222            {
223              return(null);
224            }
225          }
226        } // change
227
228    }; // methods
229
230
231    /*
232     * plugin 'private' methods
233     */
234    var privateMethods =
235    {
236      setOptions : function (object, value)
237        {
238          var properties=object.data('properties'),
239              options=object.data('options');
240
241          if(!$.isPlainObject(value)) return(false);
242
243          properties.initialized=false;
244
245          privateMethods.setChars(object, (value.chars!=null)?value.chars:options.chars);
246          privateMethods.setMode(object, (value.mode!=null)?value.mode:options.mode);
247          privateMethods.setItems(object, (value.items!=null)?value.items:options.items);
248
249          privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
250
251          properties.initialized=true;
252        },
253
254
255      setItems : function (object, value)
256        {
257          var $this=$(this),
258              options=object.data('options'),
259              objects=object.data('objects'),
260              charDir='',
261              className='';
262
263          /* if is_array */
264          objects.container.sortable("destroy").remove('li');
265          options.items=value;
266
267          for(i=0;i<options.items.length;i++)
268          {
269            if(options.items[i].direction==null) options.items[i].direction='asc'
270
271            if(options.items[i].direction=='asc')
272            {
273              charDir=options.chars.asc;
274              className='ui-inputSortBoxAsc';
275            }
276            else
277            {
278              charDir=options.chars.desc;
279              className='ui-inputSortBoxDesc';
280            }
281
282            if(options.items[i].id!=null && options.items[i].id!='' &&
283               options.items[i].content!=null && options.items[i].content!='')
284            {
285              objects.container.append(
286                $('<li/>',
287                    {
288                      'oId':options.items[i].id,
289                      'oDir':options.items[i].direction
290                    }
291                ).append(
292                    $('<span/>',
293                        {
294                          class:'ui-inputSortBoxText'
295                        }
296                    ).html(options.items[i].content))
297                 .append(
298                    $('<span/>',
299                        {
300                          class:className,
301                          style:'display:none'
302                        }
303                      ).html(charDir)
304                       .bind('click', function (event)
305                          {
306                            var p=$(this).parent(),
307                                oDir=p.attr('oDir');
308
309                            switch(oDir)
310                            {
311                              case 'asc':
312                                  oDir='desc';
313                                  $(this)
314                                    .html(options.chars.desc)
315                                    .toggleClass('ui-inputSortBoxAsc ui-inputSortBoxDesc');
316                                break;
317                              case 'desc':
318                                  oDir='asc';
319                                  $(this)
320                                    .html(options.chars.asc)
321                                    .toggleClass('ui-inputSortBoxAsc ui-inputSortBoxDesc');
322                                break;
323                            }
324
325                            p.attr('oDir', oDir);
326
327                            privateMethods.setCurrentOrder(object);
328                            if(options.change)
329                            {
330                              object.trigger('inputSortBoxChange', {order:options.items} );
331                            }
332                          }
333                        )
334                )
335              );
336            }
337          }
338
339          if(options.items.length>0)
340          {
341            privateMethods.changeMode(object);
342
343            objects.container.sortable(
344              {
345                axis:'y',
346                items:'li',
347                scroll:false,
348                update:function (event, ui)
349                  {
350                    privateMethods.setCurrentOrder(object);
351                    if(options.change)
352                    {
353                      object.trigger('inputSortBoxChange', {order:options.items} );
354                    }
355                  }
356              }
357            );
358          }
359
360          return(options.items);
361        }, //setItems
362
363      setChars: function (object, value)
364        {
365          var options=object.data('options');
366
367          if(value!=null && value.asc!=null && value.desc!=null &&
368            value.asc!=options.asc && value.desc!=options.desc)
369          {
370            options.chars.asc=value.asc;
371            options.chars.desc=value.desc;
372            privateMethods.changeMode(object, options.mode);
373          }
374
375          return(options.chars);
376        }, // setChars
377
378      setMode: function (object, value)
379        {
380          var options=object.data('options');
381
382          if((value=='normal' || value=='direction') && value!=options.mode)
383          {
384            previousMode=options.mode;
385
386            options.mode=value;
387            privateMethods.changeMode(object);
388          }
389
390          return(options.mode);
391        }, // setMode
392
393      setEventChange : function (object, value)
394        {
395          var options=object.data('options');
396
397          options.change=value;
398          object.unbind('inputSortBoxChange');
399          if(value) object.bind('inputSortBoxChange', options.change);
400          return(options.change);
401        },
402
403      /*
404       * apply the current order to the options.items
405       */
406      setCurrentOrder : function (object)
407        {
408          var options=object.data('options'),
409              objects=object.data('objects'),
410              returned=[];
411
412          objects.container.children().each(
413            function (index)
414            {
415              returned.push(
416                {
417                  id:$(this).attr('oId'),
418                  content:$(this).children('span.ui-inputSortBoxText').html(),
419                  direction:$(this).attr('oDir')
420                }
421              );
422            }
423          );
424
425          options.items=returned;
426
427          return(options.items);
428        }, // setCurrentOrder
429
430      /*
431       * apply mode to DOM model
432       */
433      changeMode : function (object)
434        {
435          var options=object.data('options'),
436              objects=object.data('objects'),
437              displayMode='none';
438
439          if(options.mode=='direction') displayMode='block';
440          objects.container.find('span.ui-inputSortBoxAsc').attr('style', 'display:'+displayMode).html(options.chars.asc);
441          objects.container.find('span.ui-inputSortBoxDesc').attr('style', 'display:'+displayMode).html(options.chars.desc);
442        }
443    };
444
445
446    $.fn.inputSortBox = function(method)
447    {
448      if(publicMethods[method])
449      {
450        return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
451      }
452      else if(typeof method === 'object' || ! method)
453      {
454        return publicMethods.init.apply(this, arguments);
455      }
456      else
457      {
458        $.error( 'Method ' +  method + ' does not exist on jQuery.inputSortBox' );
459      }
460    } // $.fn.inputSortBox
461
462  }
463)(jQuery);
464
465
466
467$.inputDialogSortBox = function(opt)
468{
469  var options=
470        {
471          modal:true,
472          width:350,
473          height:200,
474          autoHeight:true,
475          title:'Sort box',
476          mode:'normal',
477          chars:{
478              asc:'', //&uArr;
479              desc:'' //&dArr;
480            },
481          items:[],
482          buttons:
483            {
484              ok:'Ok',
485              cancel:'Cancel'
486            },
487          change:null
488        },
489      objects=
490        {
491          dialogBox:$('<div/>'),
492          sortBox:$('<div/>', {'class':'sortBox'} )
493        },
494
495  setOptions = function (opt)
496    {
497      if(opt.modal==true || opt.modal==false) options.modal=opt.modal;
498      if(opt.width!=null || opt.width>0) options.width=opt.width;
499      if(opt.height!=null || opt.height>0) options.height=opt.height;
500      if(opt.autoHeight==true || opt.autoHeight==false) options.autoHeight=opt.autoHeight;
501      if(opt.mode=='normal' || opt.mode=='direction') options.mode=opt.mode;
502      if(opt.chars!=null) options.chars=opt.chars;
503      options.items=opt.items;
504      if(opt.title) options.title=opt.title;
505      if(opt.buttons && opt.buttons.ok) options.buttons.ok=opt.buttons.ok;
506      if(opt.buttons && opt.buttons.cancel) options.buttons.cancel=opt.buttons.cancel;
507      if(opt.change && $.isFunction(opt.change)) options.change=opt.change;
508    },
509
510  initDialog = function ()
511    {
512      var dialogOpt=
513          {
514            buttons:{},
515            width:options.width,
516            height:options.height,
517            closeText:'x',
518            dialogClass:'ui-inputDialogSortBox',
519            modal:options.modal,
520            resizable:false,
521            title:options.title,
522            open: null,
523            close: function ()
524                    {
525                      objects.sortBox.inputSortBox('destroy').remove();
526                      $(this).dialog('destroy').remove();
527                    }
528          };
529
530      if(options.autoHeight)
531      {
532        tmpLi=$('<li/>').html('*');
533        tmpUl=$('<ul/>', {class:'ui-inputSortBox', style:'visibility:hidden'}).append(tmpLi);
534        $('body').append(tmpUl);
535
536        cHeight=options.items.length*tmpLi.outerHeight(true)+25;
537        tmpLi.remove();
538        tmpUl.remove();
539        delete tmpLi;
540        delete tmpUl;
541        if(cHeight>dialogOpt.height) dialogOpt.height=cHeight;
542      }
543
544      if(options.modal)
545      {
546        dialogOpt.buttons[options.buttons.ok]=function (event)
547          {
548            if(options.change)
549            {
550              options.change(event, objects.sortBox.inputSortBox('items') );
551            }
552            $(this).dialog('close');
553          };
554
555        dialogOpt.buttons[options.buttons.cancel]= function (event)
556          {
557            $(this).dialog('close');
558          };
559
560        dialogOpt.open= function ()
561          {
562            objects.sortBox
563              .inputSortBox(
564                {
565                  mode:options.mode,
566                  chars:options.chars,
567                  items:options.items
568                }
569              );
570          };
571      }
572      else
573      {
574        dialogOpt.open= function ()
575          {
576            objects.sortBox
577              .inputSortBox(
578                {
579                  items:options.items,
580                  mode:options.mode,
581                  chars:options.chars,
582                  change:function (event)
583                    {
584                      if(options.change)
585                        {
586                          options.change(event, objects.sortBox.inputSortBox('items') );
587                        }
588                    }
589                }
590              );
591          };
592      }
593
594      objects.dialogBox
595        .append(objects.sortBox)
596        .dialog(dialogOpt);
597    };
598
599  setOptions(opt);
600  initDialog();
601
602} // $.fn.inputSortBox
603
604
Note: See TracBrowser for help on using the repository browser.