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

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

release 3.4.0
fix bug:1984, bug:2109
js file are minified, remove packed files
  • Property svn:executable set to *
File size: 19.2 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: ui.inputPosition.js
4 * file version: 1.0.0
5 * date: 2010-11-05
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 *
19 *
20 *
21 * :: HISTORY ::
22 *
23 * | release | date       |
24 * | 1.0.0   | 2010/10/10 | first release
25 * |         |            |
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                .css(
186                  {
187                    width:'',
188                    height:''
189                  }
190                );
191            }
192          );
193        }, // destroy
194
195      options: function (value)
196        {
197          return this.each(function()
198            {
199              privateMethods.setOptions($(this), value);
200            }
201          );
202        }, // options
203
204      disabled: function (value)
205        {
206          if(value!=null)
207          {
208            return this.each(function()
209              {
210                privateMethods.setDisabled($(this), value);
211              }
212            );
213          }
214          else
215          {
216            var options = this.data('options');
217
218            if(options)
219            {
220              return(options.disabled);
221            }
222            else
223            {
224              return('');
225            }
226          }
227        }, // disabled
228
229      width: function (value)
230        {
231          if(value!=null)
232          {
233            return this.each(function()
234              {
235                privateMethods.setWidth($(this), value);
236              }
237            );
238          }
239          else
240          {
241            var options = this.data('options');
242
243            if(options)
244            {
245              return(options.width);
246            }
247            else
248            {
249              return('');
250            }
251          }
252        }, // width
253
254      height: function (value)
255        {
256          if(value!=null)
257          {
258            return this.each(function()
259              {
260                privateMethods.setHeight($(this), value);
261              }
262            );
263          }
264          else
265          {
266            var options = this.data('options');
267
268            if(options)
269            {
270              return(options.height);
271            }
272            else
273            {
274              return('');
275            }
276          }
277        }, // width
278
279      values: function (value)
280        {
281          if(value!=null)
282          {
283            return this.each(function()
284              {
285                privateMethods.setValues($(this), value);
286              }
287            );
288          }
289          else
290          {
291            var options = this.data('options');
292
293            if(options)
294            {
295              return(options.values);
296            }
297            else
298            {
299              return('');
300            }
301          }
302        }, // values
303
304      value: function (value)
305        {
306          if(value!=null)
307          {
308            // set selected value
309            return this.each(function()
310              {
311                privateMethods.setValue($(this), value, true);
312              }
313            );
314          }
315          else
316          {
317            // return the selected tags
318            var properties=this.data('properties');
319            return(properties.value);
320          }
321        }, // value
322
323      isValid: function (value)
324        {
325          if(value!=null)
326          {
327            // set selected value
328            return this.each(function()
329              {
330                privateMethods.setIsValid($(this), value);
331              }
332            );
333          }
334          else
335          {
336            // return the selected tags
337            var properties=this.data('properties');
338            return(properties.isValid);
339          }
340        }, // isValid
341
342      change: function (value)
343        {
344          if(value!=null && $.isFunction(value))
345          {
346            // set selected value
347            return this.each(function()
348              {
349                privateMethods.setEventChange($(this), value);
350              }
351            );
352          }
353          else
354          {
355            // return the selected value
356            var options=this.data('options');
357
358            if(options)
359            {
360              return(options.change);
361            }
362            else
363            {
364              return(null);
365            }
366          }
367        } // change
368
369
370    }; // methods
371
372
373    /*
374     * plugin 'private' methods
375     */
376    var privateMethods =
377    {
378      setOptions : function (object, value)
379        {
380          var properties=object.data('properties'),
381              options=object.data('options');
382
383          if(!$.isPlainObject(value)) return(false);
384
385          properties.initialized=false;
386
387          privateMethods.setValues(object, (value.values!=null)?value.values:options.values);
388          privateMethods.setHeight(object, (value.height!=null)?value.height:options.height, true);
389          privateMethods.setWidth(object, (value.width!=null)?value.width:options.width, true);
390          privateMethods.setValue(object, (value.value!=null)?value.value:options.value, true);
391          privateMethods.setDisabled(object, (value.disabled!=null)?value.disabled:options.disabled);
392
393          privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
394
395          properties.initialized=true;
396        },
397
398      setIsValid : function (object, value)
399        {
400          var objects=object.data('objects'),
401              properties=object.data('properties');
402
403          if(properties.isValid!=value)
404          {
405            properties.isValid=value;
406            if(properties.isValid)
407            {
408              objects.container.removeClass('ui-error');
409              objects.input.removeClass('ui-error');
410            }
411            else
412            {
413              objects.container.addClass('ui-error');
414              objects.input.addClass('ui-error');
415            }
416          }
417          return(properties.isValid);
418        },
419
420      setDisabled : function (object, value)
421        {
422          var options=object.data('options'),
423              properties=object.data('properties');
424
425          if((!properties.initialized || options.disabled!=value) && (value==true || value==false))
426          {
427            options.disabled=value;
428
429          }
430          return(options.disabled);
431        },
432
433      setHeight : function (object, value)
434        {
435          var options=object.data('options'),
436              objects=object.data('objects'),
437              properties=object.data('properties');
438
439          if((!properties.initialized || options.height!=value) && value>=0)
440          {
441            if(value==0)
442            {
443              options.height=value;
444              objects.container.css('height', '100%');
445            }
446            else
447            {
448              options.height=value;
449              objects.container.css('height', options.height+'px');
450            }
451          }
452          privateMethods.setRadioPosition(object);
453          return(options.height);
454        }, //setHeight
455
456      setWidth : function (object, value)
457        {
458          var options=object.data('options'),
459              objects=object.data('objects'),
460              properties=object.data('properties');
461
462          if((!properties.initialized || options.width!=value) && value>=0)
463          {
464            if(value==0)
465            {
466              options.width=value;
467              objects.container.css('width', '100%');
468            }
469            else
470            {
471              options.width=value;
472              objects.container.css('width', options.width+'px');
473            }
474            privateMethods.setRadioPosition(object);
475          }
476          return(options.width);
477        }, //setWidth
478
479      setValues : function (object, value)
480        {
481          var options=object.data('options'),
482              objects=object.data('objects');
483
484          if(!$.isArray(value)) value=[value];
485
486          options.values=[];
487
488          object.find('input').hide();
489
490          for(var i=0;i<value.length;i++)
491          {
492            if(value[i]=='center' || value[i]=='corners' || value[i]=='sides')
493            {
494              options.values.push(value[i]);
495              object.find('input[group='+value[i]+']').show();
496            }
497          }
498
499          return(true);
500        }, //setValue
501
502
503      setValue : function (object, value, apply)
504        {
505          var options=object.data('options'),
506              properties=object.data('properties'),
507              objects=object.data('objects');
508
509          if(!(($.inArray('center', options.values)>-1 && value=='C') ||
510               ($.inArray('corners', options.values)>-1 && (value=='TL' || value=='TR' || value=='BR' || value=='BL')) ||
511               ($.inArray('sides', options.values)>-1 && (value=='L' || value=='R' || value=='B' || value=='T'))
512              )
513            ) return(false);
514
515          properties.value=value;
516
517          if(apply)
518          {
519            switch(properties.value)
520            {
521              case 'TL':
522                objects.radios.corners[0].attr('checked', true);
523                break;
524              case 'TR':
525                objects.radios.corners[1].attr('checked', true);
526                break;
527              case 'BR':
528                objects.radios.corners[2].attr('checked', true);
529                break;
530              case 'BL':
531                objects.radios.corners[3].attr('checked', true);
532                break;
533              case 'T':
534                objects.radios.sides[0].attr('checked', true);
535                break;
536              case 'L':
537                objects.radios.sides[1].attr('checked', true);
538                break;
539              case 'B':
540                objects.radios.sides[2].attr('checked', true);
541                break;
542              case 'R':
543                objects.radios.sides[3].attr('checked', true);
544                break;
545              case 'C':
546                objects.radios.center[0].attr('checked', true);
547                break;
548            }
549          }
550
551          if(options.change) object.trigger('inputPositionChange', properties.value);
552
553          return(true);
554        }, //setValue
555
556      setEventChange : function (object, value)
557        {
558          var options=object.data('options');
559
560          options.change=value;
561          object.unbind('inputPositionChange');
562          if(value) object.bind('inputPositionChange', options.change);
563          return(options.change);
564        },
565
566      setRadioPosition : function (object)
567        {
568          var options=object.data('options'),
569              objects=object.data('objects'),
570              properties=object.data('properties');
571
572          if($.inArray('center', options.values)>-1)
573          {
574            objects.radios.center[0].css(
575              {
576                'margin-left':(options.width/2-properties.radioW)+'px',
577                'margin-top':(options.height/2-properties.radioH)+'px'
578              }
579            );
580          }
581          if($.inArray('corners', options.values)>-1)
582          {
583            for(var i=0;i<objects.radios.corners.length;i++)
584            {
585              switch(objects.radios.corners[i].attr('value'))
586              {
587                case 'TL':
588                  objects.radios.corners[i].css(
589                    {
590                      'margin-left':'-'+properties.radioW+'px',
591                      'margin-top':'-'+properties.radioH+'px'
592                    }
593                  );
594                  break;
595                case 'TR':
596                  objects.radios.corners[i].css(
597                    {
598                      'margin-left':(options.width-properties.radioW)+'px',
599                      'margin-top':'-'+properties.radioH+'px'
600                    }
601                  );
602                  break;
603                case 'BR':
604                  objects.radios.corners[i].css(
605                    {
606                      'margin-left':(options.width-properties.radioW)+'px',
607                      'margin-top':(options.height-properties.radioH)+'px'
608                    }
609                  );
610                  break;
611                case 'BL':
612                  objects.radios.corners[i].css(
613                    {
614                      'margin-left':'-'+properties.radioW+'px',
615                      'margin-top':(options.height-properties.radioH)+'px'
616                    }
617                  );
618                  break;
619              }
620            }
621          }
622          if($.inArray('sides', options.values)>-1)
623          {
624            w=objects.radios.sides[0].width();
625            h=objects.radios.sides[0].height();
626
627            for(var i=0;i<objects.radios.sides.length;i++)
628            {
629              switch(objects.radios.sides[i].attr('value'))
630              {
631                case 'L':
632                  objects.radios.sides[i].css(
633                    {
634                      'margin-left':'-'+properties.radioW+'px',
635                      'margin-top':(options.height/2-properties.radioH)+'px'
636                    }
637                  );
638                  break;
639                case 'T':
640                  objects.radios.sides[i].css(
641                    {
642                      'margin-left':(options.width/2-properties.radioW)+'px',
643                      'margin-top':'-'+properties.radioH+'px'
644                    }
645                  );
646                  break;
647                case 'R':
648                  objects.radios.sides[i].css(
649                    {
650                      'margin-left':(options.width-properties.radioW)+'px',
651                      'margin-top':(options.height/2-properties.radioH)+'px'
652                    }
653                  );
654                  break;
655                case 'B':
656                  objects.radios.sides[i].css(
657                    {
658                      'margin-left':(options.width/2-properties.radioW)+'px',
659                      'margin-top':(options.height-properties.radioH)+'px'
660                    }
661                  );
662                  break;
663              }
664            }
665          }
666        }
667
668    };
669
670    $.fn.inputPosition = function(method)
671    {
672      if(publicMethods[method])
673      {
674        return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
675      }
676      else if(typeof method === 'object' || ! method)
677      {
678        return publicMethods.init.apply(this, arguments);
679      }
680      else
681      {
682        $.error( 'Method ' +  method + ' does not exist on jQuery.inputPosition' );
683      }
684    } // $.fn.inputPosition
685
686  }
687)(jQuery);
688
689
Note: See TracBrowser for help on using the repository browser.