source: extensions/GrumPluginClasses/js/ui.inputPosition.js @ 16012

Last change on this file since 16012 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: 19.3 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: ui.inputPosition.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                      width:0,
56                      height:0,
57                      values:['center', 'corners', 'sides'],
58                      change:null
59                    };
60
61              // if options given, merge it
62              // if(opt) $.extend(options, opt); ==> options are set by setters
63
64              $this.data('options', options);
65
66
67              if(!properties)
68              {
69                $this.data('properties',
70                  {
71                    initialized:false,
72                    value:'',
73                    isValid:true,
74                    radioH:0,
75                    radioW:0
76                  }
77                );
78                properties=$this.data('properties');
79              }
80
81              if(!objects)
82              {
83                objects =
84                  {
85                    container:$('<div/>',
86                        {
87                          'class':'ui-inputPosition',
88                          css:{
89                            width:'100%'
90                          }
91                        }
92                    ),
93                    radios:
94                      {
95                        corners:[],
96                        sides:[],
97                        center:[]
98                      }
99                  };
100
101                var name=$this.get(0).id,
102                    values=['TL', 'TR', 'BR', 'BL'];
103
104                for(var i=0;i<values.length;i++)
105                {
106                  objects.radios.corners.push(
107                    $('<input>',
108                        {
109                          type:'radio',
110                          id:name+values[i],
111                          name:'ip_'+name,
112                          value:values[i],
113                          group:'corners'
114                        }
115                    ).appendTo(objects.container)
116                  );
117                }
118
119                values=['T', 'L', 'B', 'R'];
120                for(var i=0;i<values.length;i++)
121                {
122                  objects.radios.sides.push(
123                    $('<input>',
124                        {
125                          type:'radio',
126                          id:name+values[i],
127                          name:'ip_'+name,
128                          value:values[i],
129                          group:'sides'
130                        }
131                    ).appendTo(objects.container)
132                  )
133                }
134
135                values=['C'];
136                for(var i=0;i<values.length;i++)
137                {
138                  objects.radios.center.push(
139                    $('<input>',
140                        {
141                          type:'radio',
142                          id:name+values[i],
143                          name:'ip_'+name,
144                          value:values[i],
145                          group:'center'
146                        }
147                    ).appendTo(objects.container)
148                  )
149                }
150
151                objects.container.find('input').bind('click',
152                  function (event)
153                  {
154                    privateMethods.setValue($this, $(this).attr('value'), false);
155                  }
156                );
157
158                $this
159                  .html('')
160                  .append(objects.container);
161
162                properties.radioW=objects.container.find('input').first().outerWidth()/2;
163                properties.radioH=objects.container.find('input').first().outerHeight()/2;
164                $this.css('padding', properties.radioH+'px '+properties.radioW+'px');
165
166                $this.data('objects', objects);
167              }
168
169              privateMethods.setOptions($this, opt);
170            }
171          );
172        }, // init
173      destroy : function ()
174        {
175          return this.each(
176            function()
177            {
178              // default values for the plugin
179              var $this=$(this),
180                  objects = $this.data('objects');
181              objects.input.unbind().remove();
182              objects.container.unbind().remove();
183              $this
184                .unbind('.inputPosition')
185                .removeData()
186                .css(
187                  {
188                    width:'',
189                    height:''
190                  }
191                );
192              delete $this;
193            }
194          );
195        }, // destroy
196
197      options: function (value)
198        {
199          return this.each(function()
200            {
201              privateMethods.setOptions($(this), value);
202            }
203          );
204        }, // options
205
206      disabled: function (value)
207        {
208          if(value!=null)
209          {
210            return this.each(function()
211              {
212                privateMethods.setDisabled($(this), value);
213              }
214            );
215          }
216          else
217          {
218            var options = this.data('options');
219
220            if(options)
221            {
222              return(options.disabled);
223            }
224            else
225            {
226              return('');
227            }
228          }
229        }, // disabled
230
231      width: function (value)
232        {
233          if(value!=null)
234          {
235            return this.each(function()
236              {
237                privateMethods.setWidth($(this), value);
238              }
239            );
240          }
241          else
242          {
243            var options = this.data('options');
244
245            if(options)
246            {
247              return(options.width);
248            }
249            else
250            {
251              return('');
252            }
253          }
254        }, // width
255
256      height: function (value)
257        {
258          if(value!=null)
259          {
260            return this.each(function()
261              {
262                privateMethods.setHeight($(this), value);
263              }
264            );
265          }
266          else
267          {
268            var options = this.data('options');
269
270            if(options)
271            {
272              return(options.height);
273            }
274            else
275            {
276              return('');
277            }
278          }
279        }, // width
280
281      values: function (value)
282        {
283          if(value!=null)
284          {
285            return this.each(function()
286              {
287                privateMethods.setValues($(this), value);
288              }
289            );
290          }
291          else
292          {
293            var options = this.data('options');
294
295            if(options)
296            {
297              return(options.values);
298            }
299            else
300            {
301              return('');
302            }
303          }
304        }, // values
305
306      value: function (value)
307        {
308          if(value!=null)
309          {
310            // set selected value
311            return this.each(function()
312              {
313                privateMethods.setValue($(this), value, true);
314              }
315            );
316          }
317          else
318          {
319            // return the selected tags
320            var properties=this.data('properties');
321            return(properties.value);
322          }
323        }, // value
324
325      isValid: function (value)
326        {
327          if(value!=null)
328          {
329            // set selected value
330            return this.each(function()
331              {
332                privateMethods.setIsValid($(this), value);
333              }
334            );
335          }
336          else
337          {
338            // return the selected tags
339            var properties=this.data('properties');
340            return(properties.isValid);
341          }
342        }, // isValid
343
344      change: function (value)
345        {
346          if(value!=null && $.isFunction(value))
347          {
348            // set selected value
349            return this.each(function()
350              {
351                privateMethods.setEventChange($(this), value);
352              }
353            );
354          }
355          else
356          {
357            // return the selected value
358            var options=this.data('options');
359
360            if(options)
361            {
362              return(options.change);
363            }
364            else
365            {
366              return(null);
367            }
368          }
369        } // change
370
371
372    }; // methods
373
374
375    /*
376     * plugin 'private' methods
377     */
378    var privateMethods =
379    {
380      setOptions : function (object, value)
381        {
382          var properties=object.data('properties'),
383              options=object.data('options');
384
385          if(!$.isPlainObject(value)) return(false);
386
387          properties.initialized=false;
388
389          privateMethods.setValues(object, (value.values!=null)?value.values:options.values);
390          privateMethods.setHeight(object, (value.height!=null)?value.height:options.height, true);
391          privateMethods.setWidth(object, (value.width!=null)?value.width:options.width, true);
392          privateMethods.setValue(object, (value.value!=null)?value.value:options.value, true);
393          privateMethods.setDisabled(object, (value.disabled!=null)?value.disabled:options.disabled);
394
395          privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
396
397          properties.initialized=true;
398        },
399
400      setIsValid : function (object, value)
401        {
402          var objects=object.data('objects'),
403              properties=object.data('properties');
404
405          if(properties.isValid!=value)
406          {
407            properties.isValid=value;
408            if(properties.isValid)
409            {
410              objects.container.removeClass('ui-error');
411              objects.input.removeClass('ui-error');
412            }
413            else
414            {
415              objects.container.addClass('ui-error');
416              objects.input.addClass('ui-error');
417            }
418          }
419          return(properties.isValid);
420        },
421
422      setDisabled : function (object, value)
423        {
424          var options=object.data('options'),
425              properties=object.data('properties');
426
427          if((!properties.initialized || options.disabled!=value) && (value==true || value==false))
428          {
429            options.disabled=value;
430
431          }
432          return(options.disabled);
433        },
434
435      setHeight : function (object, value)
436        {
437          var options=object.data('options'),
438              objects=object.data('objects'),
439              properties=object.data('properties');
440
441          if((!properties.initialized || options.height!=value) && value>=0)
442          {
443            if(value==0)
444            {
445              options.height=value;
446              objects.container.css('height', '100%');
447            }
448            else
449            {
450              options.height=value;
451              objects.container.css('height', options.height+'px');
452            }
453          }
454          privateMethods.setRadioPosition(object);
455          return(options.height);
456        }, //setHeight
457
458      setWidth : function (object, value)
459        {
460          var options=object.data('options'),
461              objects=object.data('objects'),
462              properties=object.data('properties');
463
464          if((!properties.initialized || options.width!=value) && value>=0)
465          {
466            if(value==0)
467            {
468              options.width=value;
469              objects.container.css('width', '100%');
470            }
471            else
472            {
473              options.width=value;
474              objects.container.css('width', options.width+'px');
475            }
476            privateMethods.setRadioPosition(object);
477          }
478          return(options.width);
479        }, //setWidth
480
481      setValues : function (object, value)
482        {
483          var options=object.data('options'),
484              objects=object.data('objects');
485
486          if(!$.isArray(value)) value=[value];
487
488          options.values=[];
489
490          object.find('input').hide();
491
492          for(var i=0;i<value.length;i++)
493          {
494            if(value[i]=='center' || value[i]=='corners' || value[i]=='sides')
495            {
496              options.values.push(value[i]);
497              object.find('input[group='+value[i]+']').show();
498            }
499          }
500
501          return(true);
502        }, //setValue
503
504
505      setValue : function (object, value, apply)
506        {
507          var options=object.data('options'),
508              properties=object.data('properties'),
509              objects=object.data('objects');
510
511          if(!(($.inArray('center', options.values)>-1 && value=='C') ||
512               ($.inArray('corners', options.values)>-1 && (value=='TL' || value=='TR' || value=='BR' || value=='BL')) ||
513               ($.inArray('sides', options.values)>-1 && (value=='L' || value=='R' || value=='B' || value=='T'))
514              )
515            ) return(false);
516
517          properties.value=value;
518
519          if(apply)
520          {
521            switch(properties.value)
522            {
523              case 'TL':
524                objects.radios.corners[0].attr('checked', true);
525                break;
526              case 'TR':
527                objects.radios.corners[1].attr('checked', true);
528                break;
529              case 'BR':
530                objects.radios.corners[2].attr('checked', true);
531                break;
532              case 'BL':
533                objects.radios.corners[3].attr('checked', true);
534                break;
535              case 'T':
536                objects.radios.sides[0].attr('checked', true);
537                break;
538              case 'L':
539                objects.radios.sides[1].attr('checked', true);
540                break;
541              case 'B':
542                objects.radios.sides[2].attr('checked', true);
543                break;
544              case 'R':
545                objects.radios.sides[3].attr('checked', true);
546                break;
547              case 'C':
548                objects.radios.center[0].attr('checked', true);
549                break;
550            }
551          }
552
553          if(options.change) object.trigger('inputPositionChange', properties.value);
554
555          return(true);
556        }, //setValue
557
558      setEventChange : function (object, value)
559        {
560          var options=object.data('options');
561
562          options.change=value;
563          object.unbind('inputPositionChange');
564          if(value) object.bind('inputPositionChange', options.change);
565          return(options.change);
566        },
567
568      setRadioPosition : function (object)
569        {
570          var options=object.data('options'),
571              objects=object.data('objects'),
572              properties=object.data('properties');
573
574          if($.inArray('center', options.values)>-1)
575          {
576            objects.radios.center[0].css(
577              {
578                'margin-left':(options.width/2-properties.radioW)+'px',
579                'margin-top':(options.height/2-properties.radioH)+'px'
580              }
581            );
582          }
583          if($.inArray('corners', options.values)>-1)
584          {
585            for(var i=0;i<objects.radios.corners.length;i++)
586            {
587              switch(objects.radios.corners[i].attr('value'))
588              {
589                case 'TL':
590                  objects.radios.corners[i].css(
591                    {
592                      'margin-left':'-'+properties.radioW+'px',
593                      'margin-top':'-'+properties.radioH+'px'
594                    }
595                  );
596                  break;
597                case 'TR':
598                  objects.radios.corners[i].css(
599                    {
600                      'margin-left':(options.width-properties.radioW)+'px',
601                      'margin-top':'-'+properties.radioH+'px'
602                    }
603                  );
604                  break;
605                case 'BR':
606                  objects.radios.corners[i].css(
607                    {
608                      'margin-left':(options.width-properties.radioW)+'px',
609                      'margin-top':(options.height-properties.radioH)+'px'
610                    }
611                  );
612                  break;
613                case 'BL':
614                  objects.radios.corners[i].css(
615                    {
616                      'margin-left':'-'+properties.radioW+'px',
617                      'margin-top':(options.height-properties.radioH)+'px'
618                    }
619                  );
620                  break;
621              }
622            }
623          }
624          if($.inArray('sides', options.values)>-1)
625          {
626            w=objects.radios.sides[0].width();
627            h=objects.radios.sides[0].height();
628
629            for(var i=0;i<objects.radios.sides.length;i++)
630            {
631              switch(objects.radios.sides[i].attr('value'))
632              {
633                case 'L':
634                  objects.radios.sides[i].css(
635                    {
636                      'margin-left':'-'+properties.radioW+'px',
637                      'margin-top':(options.height/2-properties.radioH)+'px'
638                    }
639                  );
640                  break;
641                case 'T':
642                  objects.radios.sides[i].css(
643                    {
644                      'margin-left':(options.width/2-properties.radioW)+'px',
645                      'margin-top':'-'+properties.radioH+'px'
646                    }
647                  );
648                  break;
649                case 'R':
650                  objects.radios.sides[i].css(
651                    {
652                      'margin-left':(options.width-properties.radioW)+'px',
653                      'margin-top':(options.height/2-properties.radioH)+'px'
654                    }
655                  );
656                  break;
657                case 'B':
658                  objects.radios.sides[i].css(
659                    {
660                      'margin-left':(options.width/2-properties.radioW)+'px',
661                      'margin-top':(options.height-properties.radioH)+'px'
662                    }
663                  );
664                  break;
665              }
666            }
667          }
668        }
669
670    };
671
672    $.fn.inputPosition = function(method)
673    {
674      if(publicMethods[method])
675      {
676        return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
677      }
678      else if(typeof method === 'object' || ! method)
679      {
680        return publicMethods.init.apply(this, arguments);
681      }
682      else
683      {
684        $.error( 'Method ' +  method + ' does not exist on jQuery.inputPosition' );
685      }
686    } // $.fn.inputPosition
687
688  }
689)(jQuery);
690
691
Note: See TracBrowser for help on using the repository browser.