source: extensions/GrumPluginClasses/js/ui.iconSelector.js @ 7175

Last change on this file since 7175 was 7175, checked in by grum, 14 years ago

Packing js files + add categorySelector functionnalities
  • Property svn:executable set to *
File size: 19.4 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: ui.iconSelector.js
4 * file version: 1.0.0
5 * date: 2010-10-10
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 *   PWG user : http://forum.phpwebgallery.net/profile.php?id=3706
14 *
15 *   << May the Little SpaceFrog be with you ! >>
16 * -----------------------------------------------------------------------------
17 *
18 *  Options         Type                 Default value
19 *  - images        Array<String>        []
20 *      Define the list at initialization
21 *        $(".selector").iconSelector({images:['url1', 'url2', ..., 'urlN']});
22 *
23 *      Set/get the images list after initialisation
24 *        $(".selector").iconSelector('images', ['url1', 'url2', ..., 'urlN']);
25 *        $(".selector").iconSelector('images');
26 *
27 *  - numCols       Integer              1
28 *  - numRows       Integer              8
29 *      Define the number of cols/rows displayed
30 *      If number of icon is greater than numCols*numRows, a scrollbar allows to
31 *      scroll on the list
32 *        $(".selector").iconSelector({numCols:4, numRows:4});
33 *
34 *      Set/get the numCols/numRows after initialisation
35 *        $(".selector").iconSelector('numCols', 4);
36 *        $(".selector").iconSelector('numCols');
37 *
38 *  - cellWidth     Integer              32
39 *  - cellHeight    Integer              32
40 *      Define the width/height of cells in the list
41 *      If number of icon is greater than numCols*numRows, a scrollbar allows to
42 *      scroll on the list
43 *        $(".selector").iconSelector({cellWidth:40, cellHeight:20});
44 *
45 *      Set/get the cellWidth/cellHeight after initialisation
46 *        $(".selector").iconSelector('cellHeight', 20);
47 *        $(".selector").iconSelector('cellHeight');
48 *
49 *  - value         String               (first value of image list)
50 *      Define the current selected image
51 *      can also take special values ':first' or ':last'
52 *        $(".selector").iconSelector({value:'urlX'});
53 *
54 *      Set/get the selected icon after initialisation
55 *        $(".selector").iconSelector('value', 'urlX');
56 *        $(".selector").iconSelector('value');
57 *
58 *
59 *  Events
60 *  - popup
61 *      Triggered when the selection list is opened/closed
62 *      One parameter is given (selection list is visible or not)
63 *        $(".selector").iconSelector({popup: function (event, visible) { ... } } );
64 *
65 *      To bind on the event :
66 *        $(".selector").bind('iconSelectorPopup', function (event, visible) { ... } );
67 *
68 *  - change
69 *      Triggered when the selected in has changed
70 *      One parameter is given (the selected value)
71 *        $(".selector").iconSelector({change: function (event, value) { ... } } );
72 *
73 *      To bind on the event :
74 *        $(".selector").bind('iconSelectorChange', function (event, value) { ... } );
75 *
76 *
77 *  Styles
78 *  .ui-icon-selector               : CSS class for the main object
79 *  .ui-icon-selector-list          : CSS class for the icon list container
80 *  .ui-icon-selector-icon          : CSS class for icons
81 *  .ui-icon-selector-selected-icon : CSS class for the selected icon
82 *
83 *
84 * :: HISTORY ::
85 *
86 * | release | date       |
87 * | 1.0.0   | 2010/10/10 | first release
88 * |         |            |
89 * |         |            |
90 * |         |            |
91 * |         |            |
92 * |         |            |
93 * |         |            |
94 *
95 */
96
97
98
99(
100  function($)
101  {
102    /*
103     * plugin 'public' functions
104     */
105    var publicMethods =
106    {
107      init : function (opt)
108        {
109          return this.each(function()
110            {
111              // default values for the plugin
112              var $this=$(this),
113                  data = $this.data('options'),
114                  objects = $this.data('objects'),
115                  properties = $this.data('properties'),
116                  options =
117                    {
118                      images:[],
119                      numCols:1,
120                      numRows:8,
121                      cellWidth:32,
122                      cellHeight:32,
123                      popup:null,
124                      change:null
125                    };
126
127              // if options given, merge it
128              if(opt) $.extend(options, opt);
129
130              $this.data('options', options);
131
132              if(!properties)
133              {
134                $this.data('properties',
135                  {
136                    index:-1,
137                    initialized:false,
138                    selectorVisible:false
139                  }
140                );
141                properties=$this.data('properties');
142              }
143
144              if(!objects)
145              {
146                objects =
147                  {
148                    container:$('<div/>',
149                        {
150                          'class':' ui-icon-selector ',
151                        }
152                    ).bind('click.iconSelector',
153                        function ()
154                        {
155                          privateMethods.displaySelector($this, !$this.data('properties').selectorVisible);
156                        }
157                      ),
158                    listContainer:$('<div/>',
159                        {
160                          html: "",
161                          'class':' ui-icon-selector-list ',
162                          css: {
163                            overflow:"auto",
164                            width:'0px',
165                            height:'0px',
166                            display:'none',
167                            position:'absolute'
168                          }
169                        }
170                    ).bind('mouseleave.iconSelector',
171                        function ()
172                        {
173                          privateMethods.displaySelector($this, false);
174                        }
175                      ),
176                    list:$('<ul/>',
177                      {
178                        css: {
179                          listStyle:'none',
180                          padding:'0px',
181                          margin:'0px'
182                        }
183                      }
184                    )
185                  };
186
187                $this
188                  .html('')
189                  .append(objects.container)
190                  .append(objects.listContainer.append(objects.list));
191
192
193                $this.data('objects', objects);
194              }
195
196              privateMethods.setImages($this, options.images);
197              privateMethods.setCellWidth($this, options.cellWidth);
198              privateMethods.setCellHeight($this, options.cellHeight);
199              privateMethods.setNumCols($this, options.numCols);
200              privateMethods.setNumRows($this, options.numRows);
201              privateMethods.setEventPopup($this, options.popup);
202              privateMethods.setEventChange($this, options.change);
203              if(options.images.length>0) privateMethods.setValue($this, options.images[0]);
204
205              properties.initialized=true;
206            }
207          );
208        }, // init
209      destroy : function ()
210        {
211          return this.each(
212            function()
213            {
214              // default values for the plugin
215              var $this=$(this),
216                  objects = $this.data('objects');
217              objects.container.unbind().remove();
218              objects.list.children().unbind();
219              objects.listContainer.remove();
220              $this
221                .unbind('.iconSelector')
222                .css(
223                  {
224                    width:'',
225                    height:'',
226                    backgroundImage:''
227                  }
228                );
229            }
230          );
231        }, // destroy
232      images : function (list)
233        {
234          if(list)
235          {
236            // set images list values
237            return this.each(function()
238              {
239                privateMethods.setImages($(this), list);
240              }
241            );
242          }
243          else
244          {
245            // return images list values
246            var options = this.data('options');
247
248            if(options)
249            {
250              return(options.images);
251            }
252            else
253            {
254              return([]);
255            }
256          }
257        }, // images
258      numCols: function (value)
259        {
260          if(value)
261          {
262            // set numCols values
263            return this.each(function()
264              {
265                privateMethods.setCols($(this), value);
266              }
267            );
268          }
269          else
270          {
271            // return images list values
272            var options = this.data('options');
273
274            if(options)
275            {
276              return(options.numCols);
277            }
278            else
279            {
280              return(0);
281            }
282          }
283        }, // numCols
284      numRows: function (value)
285        {
286          if(value)
287          {
288            // set numRows values
289            return this.each(function()
290              {
291                privateMethods.setRows($(this), value);
292              }
293            );
294          }
295          else
296          {
297            // return images list values
298            var options = this.data('options');
299
300            if(options)
301            {
302              return(options.numRows);
303            }
304            else
305            {
306              return(0);
307            }
308          }
309        }, // numRows
310      cellWidth: function (value)
311        {
312          if(value)
313          {
314            // set cell width values
315            return this.each(function()
316              {
317                privateMethods.setCellWidth($(this), value);
318              }
319            );
320          }
321          else
322          {
323            // return images list values
324            var options = this.data('options');
325
326            if(options)
327            {
328              return(options.cellWidth);
329            }
330            else
331            {
332              return(0);
333            }
334          }
335        }, // cellWidth
336      cellHeight: function (value)
337        {
338          if(value)
339          {
340            // set cell width values
341            return this.each(function()
342              {
343                privateMethods.setCellHeight($(this), value);
344              }
345            );
346          }
347          else
348          {
349            // return images list values
350            var options = this.data('options');
351
352            if(options)
353            {
354              return(options.cellHeight);
355            }
356            else
357            {
358              return(0);
359            }
360          }
361        }, // cellHeight
362      value: function (value)
363        {
364          if(value)
365          {
366            // set selected value
367            return this.each(function()
368              {
369                privateMethods.setValue($(this), value);
370              }
371            );
372          }
373          else
374          {
375            // return the selected value
376            var options=this.data('options'),
377                properties=this.data('properties');
378
379            if(options && properties && properties.index>-1 && properties.index<options.images.length)
380            {
381              return(options.images[properties.index]);
382            }
383            else
384            {
385              return('');
386            }
387          }
388        }, // value
389      popup: function (value)
390        {
391          if(value && $.isFunction(value))
392          {
393            // set selected value
394            return this.each(function()
395              {
396                privateMethods.setEventPopup($(this), value);
397              }
398            );
399          }
400          else
401          {
402            // return the selected value
403            var options=this.data('options');
404
405            if(options)
406            {
407              return(options.popup);
408            }
409            else
410            {
411              return(null);
412            }
413          }
414        }, // popup
415      change: function (value)
416        {
417          if(value && $.isFunction(value))
418          {
419            // set selected value
420            return this.each(function()
421              {
422                privateMethods.setEventChange($(this), value);
423              }
424            );
425          }
426          else
427          {
428            // return the selected value
429            var options=this.data('options');
430
431            if(options)
432            {
433              return(options.change);
434            }
435            else
436            {
437              return(null);
438            }
439          }
440        } // popup
441
442    }; // methods
443
444
445    /*
446     * plugin 'private' methods
447     */
448    var privateMethods =
449    {
450      updateListArea : function (object)
451        {
452          var options=object.data('options'),
453              objects=object.data('objects'),
454              icon=objects.list.children().first(),
455              width=icon.outerWidth()*options.numCols,
456              height=icon.outerHeight()*options.numRows;
457
458          objects.listContainer.css(
459            {
460              width:width+'px',
461              height:height+'px'
462            }
463          );
464
465          delta = width-objects.listContainer.get(0).clientWidth;
466          // adjust size if scrollbars are present
467          if(delta>0)
468          {
469            objects.listContainer.css('width', (width+delta)+'px');
470          }
471        },
472      setImages : function (object, value)
473        {
474          var options=object.data('options'),
475              objects=object.data('objects'),
476              properties=object.data('properties');
477          options.images=value;
478
479          objects.list.children().unbind();
480          objects.list.html('');
481          for(var i=0;i<options.images.length;i++)
482          {
483            liClass=' ui-icon-selector-icon ';
484            if(i==properties.index)
485            {
486              liClass+=' ui-icon-selector-selected-icon ';
487            }
488            objects.list.append(
489              $('<li indexValue="'+i+'" class="'+liClass+'" style="display:inline-block;width:'+options.cellWidth+'px;height:'+options.cellHeight+'px;background-image:url('+options.images[i]+');"></li>')
490                .bind('click',
491                  {object:object},
492                  function (event)
493                  {
494                    privateMethods.setValueByIndex(event.data.object, $(this).attr('indexValue'), true);
495                    privateMethods.displaySelector(event.data.object, false);
496                  }
497                )
498            );
499          }
500
501          return(options.images);
502        },
503      setNumCols : function (object, value)
504        {
505          var options=object.data('options'),
506              properties=object.data('properties');
507          if((!properties.initialized || options.numCols!=value) && value>0)
508          {
509            options.numCols=value;
510          }
511          return(options.numCols);
512        },
513      setNumRows : function (object, value)
514        {
515          var options=object.data('options'),
516              properties=object.data('properties');
517          if((!properties.initialized || options.numRows!=value) && value>0)
518          {
519            options.numRows=value;
520          }
521          return(options.numRows);
522        },
523      setCellWidth : function (object, value)
524        {
525          var options=object.data('options'),
526              properties=object.data('properties'),
527              objects=object.data('objects');
528          if((!properties.initialized || options.cellWidth!=value) && value>=0)
529          {
530            options.cellWidth=value;
531            objects.container.css('width', value+'px');
532          }
533          return(options.cellWidth);
534        },
535      setCellHeight : function (object, value)
536        {
537          var options=object.data('options'),
538              properties=object.data('properties'),
539              objects=object.data('objects');
540          if((!properties.initialized || options.cellHeight!=value) && value>=0)
541          {
542            options.cellHeight=value;
543            objects.container.css('height', value+'px');
544          }
545          return(options.cellHeight);
546        },
547      setValue : function (object, value)
548        {
549          var options=object.data('options'),
550              properties=object.data('properties'),
551              index=-1;
552
553          switch(value)
554          {
555            case ':first':
556              if(options.images.length>0) index=0;
557              break;
558            case ':last':
559              index=options.images.length-1;
560              break;
561            default:
562              index=$.inArray(value, options.images);
563              break;
564          }
565
566          if((!properties.initialized || properties.index!=index) && index>-1)
567          {
568            privateMethods.setValueByIndex(object, index, false);
569          }
570          return(options.images[properties.index]);
571        },
572      setValueByIndex : function (object, value, trigger)
573        {
574          var options=object.data('options'),
575              properties=object.data('properties'),
576              objects=object.data('objects');
577          if((!properties.initialized || properties.index!=value) && value>-1 && value<options.images.length)
578          {
579            objects.list.children('.ui-icon-selector-selected-icon').removeClass('ui-icon-selector-selected-icon');
580            objects.list.children('[indexValue="'+value+'"]').addClass('ui-icon-selector-selected-icon');
581            properties.index=value;
582            objects.container.css('background-image', 'url('+options.images[properties.index]+')');
583            if(trigger && options.change) object.trigger('iconSelectorChange', [properties.index]);
584          }
585          return(options.images[properties.index]);
586        },
587      displaySelector : function (object, value)
588        {
589          var options=object.data('options'),
590              properties=object.data('properties'),
591              objects=object.data('objects');
592          if(properties.selectorVisible!=value)
593          {
594            properties.selectorVisible=value;
595
596            if(properties.selectorVisible)
597            {
598              objects.listContainer
599                .css('display', 'block')
600                .scrollTop(objects.listContainer.scrollTop()+objects.list.children('[indexValue="'+properties.index+'"]').position().top);
601              privateMethods.updateListArea(object);
602            }
603            else
604            {
605              objects.listContainer.css('display', 'none');
606            }
607            if(options.popup) object.trigger('iconSelectorPopup', [properties.selectorVisible]);
608          }
609          return(properties.selectorVisible);
610        },
611      setEventPopup : function (object, value)
612        {
613          var options=object.data('options');
614          options.popup=value;
615          object.unbind('iconSelectorPopup');
616          if(value) object.bind('iconSelectorPopup', options.popup);
617          return(options.popup);
618        },
619      setEventChange : function (object, value)
620        {
621          var options=object.data('options');
622          options.change=value;
623          object.unbind('iconSelectorChange');
624          if(value) object.bind('iconSelectorChange', options.change);
625          return(options.change);
626        }
627    };
628
629
630    $.fn.iconSelector = function(method)
631    {
632      if(publicMethods[method])
633      {
634        return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
635      }
636      else if(typeof method === 'object' || ! method)
637      {
638        return publicMethods.init.apply(this, arguments);
639      }
640      else
641      {
642        $.error( 'Method ' +  method + ' does not exist on jQuery.iconSelector' );
643      }
644    } // $.fn.iconSelector
645
646  }
647)(jQuery);
648
649
Note: See TracBrowser for help on using the repository browser.