source: extensions/GrumPluginClasses/js/ui.inputDotArea.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: 15.0 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: ui.inputDotArea.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/11/04 | 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                      range:
55                        {
56                          x:[0,100],
57                          y:[0,100]
58                        },
59                      width:0,
60                      height:0,
61                      disabled:false,
62                      change:null
63                    };
64
65              // if options given, merge it
66              // if(opt) $.extend(options, opt); ==> options are set by setters
67
68              $this.data('options', options);
69
70
71              if(!properties)
72              {
73                $this.data('properties',
74                  {
75                    initialized:false,
76                    values:
77                      {
78                        x:50,
79                        y:50
80                      },
81                    isValid:true,
82                    mouseIsDown:false
83                  }
84                );
85                properties=$this.data('properties');
86              }
87
88              if(!objects)
89              {
90                objects =
91                  {
92                    container:$('<div/>',
93                        {
94                          'class':'ui-inputDotArea',
95                          css:{
96                            width:'100%',
97                            height:'100%'
98                          }
99                        }
100                    )
101                    .bind('mousedown.inputDotArea',
102                        function (event)
103                        {
104                          privateMethods.mouseDown($this, event);
105                        }
106                      )
107                     .bind('mouseup.inputDotArea',
108                       function (event)
109                       {
110                         privateMethods.mouseUp($this, event);
111                       }
112                     )
113                     .bind('mousemove.inputDotArea',
114                        function (event)
115                        {
116                          privateMethods.mouseMove($this, event);
117                        }
118                      ),
119                    dot:$('<div/>',
120                      {
121                        'class':'ui-inputDotArea-dot'
122                      }
123                    )
124
125                  };
126
127                $this
128                  .html('')
129                  .append(objects.container.append(objects.dot));
130
131                $this.data('objects', objects);
132              }
133
134              privateMethods.setOptions($this, opt);
135            }
136          );
137        }, // init
138      destroy : function ()
139        {
140          return this.each(
141            function()
142            {
143              // default values for the plugin
144              var $this=$(this),
145                  objects = $this.data('objects');
146              objects.dot.remove();
147              objects.container.unbind().remove();
148              $this
149                .unbind('.inputDotArea')
150                .removeData()
151                .css(
152                  {
153                    width:'',
154                    height:''
155                  }
156                );
157              delete $this;
158            }
159          );
160        }, // destroy
161
162      options: function (value)
163        {
164          return(
165            this.each(
166              function()
167              {
168                privateMethods.setOptions($(this), value);
169              }
170            )
171          );
172        }, // options
173
174      disabled: function (value)
175        {
176          if(value!=null)
177          {
178            return(
179              this.each(
180                function()
181                {
182                  privateMethods.setDisabled($(this), value);
183                }
184              )
185            );
186          }
187          else
188          {
189            var options = this.data('options');
190
191            if(options)
192            {
193              return(options.disabled);
194            }
195            else
196            {
197              return('');
198            }
199          }
200        }, // disabled
201
202      width: function (value)
203        {
204          if(value!=null)
205          {
206            return(
207              this.each(
208                function()
209                {
210                  privateMethods.setWidth($(this), value, true);
211                }
212              )
213            );
214          }
215          else
216          {
217            var options=this.data('options');
218            return(options.width);
219          }
220        }, // width
221
222      height: function (value)
223        {
224          if(value!=null)
225          {
226            return(
227              this.each(
228                function()
229                {
230                  privateMethods.setHeight($(this), value, true);
231                }
232              )
233            );
234          }
235          else
236          {
237            var options=this.data('options');
238            return(options.height);
239          }
240        }, // height
241
242      range: function (value)
243        {
244          if(value!=null)
245          {
246            return(
247              this.each(
248                function()
249                {
250                  privateMethods.setRange($(this), value, true);
251                }
252              )
253            );
254          }
255          else
256          {
257            var options=this.data('options');
258            return(options.range);
259          }
260        }, // value
261
262      values: function (value)
263        {
264          if(value!=null)
265          {
266            // set selected value
267            return(
268              this.each(
269                function()
270                {
271                  privateMethods.setValues($(this), value, true);
272                }
273              )
274            );
275          }
276          else
277          {
278            // return the selected tags
279            var properties=this.data('properties');
280            return(properties.values);
281          }
282        }, // value
283
284      isValid: function (value)
285        {
286          if(value!=null)
287          {
288            // set selected value
289            return(
290              this.each(
291                function()
292                {
293                  privateMethods.setIsValid($(this), value);
294                }
295              )
296            );
297          }
298          else
299          {
300            // return the selected tags
301            var properties=this.data('properties');
302            return(properties.isValid);
303          }
304        }, // isValid
305
306      change: function (value)
307        {
308          if(value!=null && $.isFunction(value))
309          {
310            // set selected value
311            return(
312              this.each(
313                function()
314                {
315                  privateMethods.setEventChange($(this), value);
316                }
317              )
318            );
319          }
320          else
321          {
322            // return the selected value
323            var options=this.data('options');
324
325            if(options)
326            {
327              return(options.change);
328            }
329            else
330            {
331              return(null);
332            }
333          }
334        } // change
335
336    }; // methods
337
338
339    /*
340     * plugin 'private' methods
341     */
342    var privateMethods =
343    {
344      setOptions : function (object, value)
345        {
346          var properties=object.data('properties'),
347              options=object.data('options');
348
349          if(!$.isPlainObject(value)) return(false);
350
351          properties.initialized=false;
352
353          privateMethods.setWidth(object, (value.width!=null)?value.width:options.width);
354          privateMethods.setHeight(object, (value.height!=null)?value.height:options.height);
355          privateMethods.setRange(object, (value.range!=null)?value.range:options.range);
356          privateMethods.setValues(object, (value.values!=null)?value.values:properties.values, true);
357
358          privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
359
360          properties.initialized=true;
361        },
362
363      setIsValid : function (object, value)
364        {
365          var objects=object.data('objects'),
366              properties=object.data('properties');
367/*
368          if(properties.isValid!=value && properties.initialized)
369          {
370            properties.isValid=value;
371            if(properties.isValid)
372            {
373              objects.container.removeClass('ui-error');
374              objects.input.removeClass('ui-error');
375            }
376            else
377            {
378              objects.container.addClass('ui-error');
379              objects.input.addClass('ui-error');
380            }
381          }
382*/
383          return(properties.isValid);
384        },
385
386
387      setWidth : function (object, value)
388        {
389          var options=object.data('options'),
390              objects=object.data('objects'),
391              properties=object.data('properties');
392
393          if((!properties.initialized || options.width!=value) && value>0)
394          {
395            options.width=value;
396            objects.container.css('width', options.width+'px');
397          }
398          return(options.width);
399        },
400
401      setHeight : function (object, value)
402        {
403          var options=object.data('options'),
404              objects=object.data('objects'),
405              properties=object.data('properties');
406
407          if((!properties.initialized || options.height!=value) && value>0)
408          {
409            options.height=value;
410            objects.container.css('height', options.height+'px');
411          }
412          return(options.height);
413        },
414
415      setDisabled : function (object, value)
416        {
417          var options=object.data('options'),
418              objects=object.data('objects'),
419              properties=object.data('properties');
420
421          if((!properties.initialized || options.disabled!=value) && (value==true || value==false))
422          {
423            options.disabled=value;
424            objects.input.attr('disabled', options.disabled);
425          }
426          return(options.disabled);
427        },
428
429
430      setRange : function (object, value)
431        {
432          var options=object.data('options'),
433              properties=object.data('properties'),
434              objects=object.data('objects');
435
436          if(value.x==false || ($.isArray(value.x) && value.x[0]<=value.x[1]))
437          {
438            options.range.x=value.x;
439          }
440
441          if(value.y==false || ($.isArray(value.y) && value.y[0]<=value.y[1]))
442          {
443            options.range.y=value.y;
444          }
445
446          return(options.range);
447        }, //setValue
448
449
450      setValues : function (object, value, apply)
451        {
452          var options=object.data('options'),
453              properties=object.data('properties'),
454              objects=object.data('objects'),
455              tmp={x:'', y:''};
456
457          if(!(
458               (value.x==null || (value.x!=null && options.range.x[0]<=value.x && value.x<=options.range.x[1])) &&
459               (value.y==null || (value.y!=null && options.range.y[0]<=value.y && value.y<=options.range.y[1])) &&
460               !(value.x==null && value.y==null)
461              )
462            )
463          {
464            return(false);
465          }
466
467          if(value.x!=null) properties.values.x=value.x;
468          if(value.y!=null) properties.values.y=value.y;
469
470          if(apply)
471          {
472            if(options.range.x==false)
473            {
474              tmp.x=options.width/2;
475            }
476            else
477            {
478              tmp.x=properties.values.x*options.width/(options.range.x[1]-options.range.x[0])+options.range.x[0];
479            }
480            tmp.x-=6;
481
482            if(options.range.y==false)
483            {
484              tmp.y=options.height/2;
485            }
486            else
487            {
488              tmp.y=properties.values.y*options.height/(options.range.y[1]-options.range.y[0])+options.range.y[0];
489            }
490            tmp.y-=6;
491
492            objects.dot.css(
493              {
494                top:tmp.y+'px',
495                left:tmp.x+'px'
496              }
497            );
498          }
499
500          if(options.change) object.trigger('inputDotAreaChange', properties.values);
501
502          return(true);
503        }, //setValue
504
505      setEventChange : function (object, value)
506        {
507          var options=object.data('options');
508
509          options.change=value;
510          object.unbind('inputDotAreaChange');
511          if(value) object.bind('inputDotAreaChange', options.change);
512          return(options.change);
513        },
514
515      mouseDown : function (object, event)
516        {
517          var properties=object.data('properties');
518
519          properties.mouseIsDown=true;
520          privateMethods.mouseMove(object, event);
521        },
522
523      mouseUp : function (object, event)
524        {
525          var properties=object.data('properties');
526
527          properties.mouseIsDown=false;
528        },
529
530      mouseMove : function (object, event)
531        {
532          var properties=object.data('properties'),
533              objects=object.data('objects'),
534              options=object.data('options'),
535              values={};
536
537          if(properties.mouseIsDown)
538          {
539            event.layerX=event.pageX-objects.container.offset().left;
540            event.layerY=event.pageY-objects.container.offset().top;
541
542            if(options.range.x!=false)
543            {
544              values.x=options.range.x[0]+event.layerX*(options.range.x[1]-options.range.x[0])/options.width;
545            }
546            if(options.range.y!=false)
547            {
548              values.y=options.range.y[0]+event.layerY*(options.range.y[1]-options.range.y[0])/options.height;
549            }
550
551            privateMethods.setValues(object, values, true);
552          }
553        }
554
555
556    };
557
558
559    $.fn.inputDotArea = function(method)
560    {
561      if(publicMethods[method])
562      {
563        return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
564      }
565      else if(typeof method === 'object' || ! method)
566      {
567        return publicMethods.init.apply(this, arguments);
568      }
569      else
570      {
571        $.error( 'Method ' +  method + ' does not exist on jQuery.inputDotArea' );
572      }
573    } // $.fn.inputDotArea
574
575  }
576)(jQuery);
577
578
Note: See TracBrowser for help on using the repository browser.