14
14
* "alsoRotate" extension (under construction)
15
15
* "animate" extension (under construction)
16
16
*
17
+ * Classes:
18
+ * .ui-rotatable {}
19
+ * .ui-rotatable-rotating {}
20
+ * .ui-rotatable-rotated {}
21
+ * .ui-rotatable-handle {}
22
+ *
17
23
* Usages:
18
24
* $('#foo .bar').rotatable();
19
25
* $('#foo .bar').resizable().rotatable().draggable();
@@ -67,7 +73,7 @@ $.widget('ui.rotatable', $.ui.mouse, {
67
73
elementStartAngle : 0 ,
68
74
elementCurrentAngle : 0 ,
69
75
elementStopAngle : 0 ,
70
- mouseStartAngle : 0 ,
76
+ mouseStartAngle : null ,
71
77
72
78
_num : function ( value ) {
73
79
return parseFloat ( value ) || 0 ;
@@ -135,30 +141,31 @@ $.widget('ui.rotatable', $.ui.mouse, {
135
141
return ( typeof this . options . rotationOriginPosition . top === 'number' ) || ( typeof this . options . rotationOriginPosition . left === 'number' ) ;
136
142
} ,
137
143
138
- _getRotationOriginPositionTop : function ( ) {
144
+ getRotationOriginPositionTop : function ( element ) {
139
145
if ( typeof this . options . rotationOriginPosition . top === 'number' ) {
140
146
return this . options . rotationOriginPosition . top ;
141
147
}
142
- return Math . round ( this . element . height ( ) / 2 ) ;
148
+ return Math . round ( element . height ( ) / 2 ) ;
143
149
} ,
144
150
145
- _getRotationOriginPositionLeft : function ( ) {
151
+ getRotationOriginPositionLeft : function ( element ) {
146
152
if ( typeof this . options . rotationOriginPosition . left === 'number' ) {
147
153
return this . options . rotationOriginPosition . left ;
148
154
}
149
- return Math . round ( this . element . width ( ) / 2 ) ;
155
+ return Math . round ( element . width ( ) / 2 ) ;
150
156
} ,
151
157
152
158
_calculateOrigin : function ( ) {
159
+ var element = this . element ;
153
160
var elementOffset = this . _getElementOffset ( ) ;
154
161
if ( this . _isRotationOriginPositionGiven ( ) ) {
155
162
return {
156
- x : elementOffset . left + this . _getRotationOriginPositionLeft ( ) ,
157
- y : elementOffset . top + this . _getRotationOriginPositionTop ( )
163
+ x : elementOffset . left + this . getRotationOriginPositionLeft ( element ) ,
164
+ y : elementOffset . top + this . getRotationOriginPositionTop ( element )
158
165
} ;
159
166
}
160
167
// or
161
- var transformOrigin = this . element . css ( 'transform-origin' ) ;
168
+ var transformOrigin = element . css ( 'transform-origin' ) ;
162
169
if ( typeof transformOrigin === 'string' ) {
163
170
var origin = transformOrigin . match ( / ( [ \d . ] + ) p x + ( [ \d . ] + ) p x / ) ;
164
171
if ( origin !== null ) {
@@ -170,15 +177,15 @@ $.widget('ui.rotatable', $.ui.mouse, {
170
177
}
171
178
// or
172
179
return {
173
- x : elementOffset . left + Math . round ( this . element . width ( ) / 2 ) ,
174
- y : elementOffset . top + Math . round ( this . element . height ( ) / 2 )
180
+ x : elementOffset . left + Math . round ( element . width ( ) / 2 ) ,
181
+ y : elementOffset . top + Math . round ( element . height ( ) / 2 )
175
182
} ;
176
183
} ,
177
184
178
185
_calculateRotationAngleViaMousePosition : function ( event ) {
179
186
var origin = this . _calculateOrigin ( ) ;
180
187
var mouseAngle = this . _calculateMouseAngle ( event , origin ) ;
181
- var rotationAngle = mouseAngle - this . mouseStartAngle + this . elementStartAngle ;
188
+ var rotationAngle = mouseAngle - this . _num ( this . mouseStartAngle ) + this . elementStartAngle ;
182
189
if ( this . options . snap ) {
183
190
rotationAngle = this . _calculateSnap ( rotationAngle ) ;
184
191
}
@@ -198,7 +205,7 @@ $.widget('ui.rotatable', $.ui.mouse, {
198
205
return 0 ;
199
206
}
200
207
if ( this . _isRotationOriginPositionGiven ( ) ) {
201
- element . css ( 'transform-origin' , this . _getRotationOriginPositionLeft ( ) + 'px ' + this . _getRotationOriginPositionTop ( ) + 'px' ) ;
208
+ element . css ( 'transform-origin' , this . getRotationOriginPositionLeft ( element ) + 'px ' + this . getRotationOriginPositionTop ( element ) + 'px' ) ;
202
209
}
203
210
var newTransform = 'rotate(' + angle + 'deg) ' ;
204
211
if ( currentTransform !== 'none' ) {
@@ -264,13 +271,13 @@ $.widget('ui.rotatable', $.ui.mouse, {
264
271
265
272
_create : function ( ) {
266
273
var o = this . options ;
274
+ this . handlers = {
275
+ _mouseWheel : $ . proxy ( this . _mouseWheel , this )
276
+ } ;
267
277
this . element . addClass ( 'ui-rotatable' ) ;
268
278
if ( o . handle ) {
269
279
this . _placeHandle ( ) ;
270
280
}
271
- this . handlers = {
272
- _mouseWheel : $ . proxy ( this . _mouseWheel , this )
273
- } ;
274
281
if ( o . wheel ) {
275
282
this . element . bind ( 'wheel' , this . handlers . _mouseWheel ) ;
276
283
}
@@ -281,17 +288,17 @@ $.widget('ui.rotatable', $.ui.mouse, {
281
288
282
289
_destroy : function ( ) {
283
290
this . _mouseDestroy ( ) ;
284
- this . element . removeClass ( 'ui-rotatable' ) ;
291
+ this . element . removeClass ( 'ui-rotatable ui-rotatable-rotating ui-rotatable-rotated ' ) ;
285
292
this . element . off ( 'rotatable' ) ;
286
- this . element . find ( '.ui-rotatable-handle:first ' ) . remove ( ) ;
293
+ this . element . find ( '.ui-rotatable-handle' ) . remove ( ) ;
287
294
if ( this . options . wheel ) {
288
295
this . element . unbind ( 'wheel' , this . handlers . _mouseWheel ) ;
289
296
}
290
297
} ,
291
298
292
299
_placeHandle : function ( ) {
293
300
var o = this . options ;
294
- if ( ! this . element ) {
301
+ if ( ! this . element || this . element . disabled || o . disabled ) {
295
302
return ;
296
303
}
297
304
if ( ! this . _canBeParent ( ) ) {
@@ -329,6 +336,10 @@ $.widget('ui.rotatable', $.ui.mouse, {
329
336
}
330
337
} ,
331
338
339
+ _displaceHandle : function ( ) {
340
+ //
341
+ } ,
342
+
332
343
_getJqHandle : function ( ) {
333
344
var o = this . options ;
334
345
if ( o . handle ) {
@@ -362,6 +373,9 @@ $.widget('ui.rotatable', $.ui.mouse, {
362
373
363
374
_mouseStart : function ( event ) { // event handler
364
375
var element = this . element ;
376
+ if ( ! element || element . disabled || this . options . disabled ) {
377
+ return false ;
378
+ }
365
379
var jqHandle = this . _getJqHandle ( ) ;
366
380
var origin = this . _calculateOrigin ( ) ;
367
381
this . mouseStartAngle = this . _calculateMouseAngle ( event , origin ) ;
@@ -379,8 +393,8 @@ $.widget('ui.rotatable', $.ui.mouse, {
379
393
} ,
380
394
381
395
_mouseDrag : function ( event , originalUi ) { // event handler
382
- var element = this . element , o = this . options ;
383
- if ( ! element || element . disabled || o . disabled ) {
396
+ var element = this . element ;
397
+ if ( ! element || element . disabled || this . options . disabled ) {
384
398
return false ;
385
399
}
386
400
var rotationAngle = this . _calculateRotationAngleViaMousePosition ( event ) ;
@@ -400,7 +414,7 @@ $.widget('ui.rotatable', $.ui.mouse, {
400
414
401
415
_mouseStop : function ( event ) { // event handler
402
416
var element = this . element ;
403
- if ( ! element ) {
417
+ if ( ! element || element . disabled || this . options . disabled ) {
404
418
return false ;
405
419
}
406
420
this . elementStopAngle = this . elementCurrentAngle ;
@@ -414,6 +428,7 @@ $.widget('ui.rotatable', $.ui.mouse, {
414
428
var ui = this . ui ( ) ;
415
429
$ . ui . plugin . call ( this , 'stop' , [ event , ui ] ) ; // calling extension methods
416
430
this . _trigger ( 'stop' , event , ui ) ; // calling callback
431
+ this . mouseStartAngle = null ;
417
432
return false ;
418
433
} ,
419
434
@@ -475,17 +490,46 @@ $.widget('ui.rotatable', $.ui.mouse, {
475
490
if ( handle === undefined ) {
476
491
return o . handle ;
477
492
}
493
+ if ( handle ) {
494
+ if ( ! o . handle ) {
495
+ this . _placeHandle ( ) ;
496
+ }
497
+ }
498
+ else {
499
+ if ( o . handle ) {
500
+ this . _displaceHandle ( ) ;
501
+ }
502
+ }
478
503
o . handle = handle ;
479
- if ( o . handle ) {
480
- this . _placeHandle ( ) ;
504
+ } ,
505
+
506
+ wheel : function ( wheel ) {
507
+ var element = this . element , o = this . options ;
508
+ if ( wheel === undefined ) {
509
+ return o . wheel ;
481
510
}
511
+ if ( wheel ) {
512
+ if ( ! o . wheel ) {
513
+ element . bind ( 'wheel' , this . handlers . _mouseWheel ) ;
514
+ }
515
+ }
516
+ else {
517
+ if ( o . wheel ) {
518
+ element . unbind ( 'wheel' , this . handlers . _mouseWheel ) ;
519
+ }
520
+ }
521
+ o . wheel = wheel ;
482
522
} ,
483
523
484
524
handleElementSelector : function ( handleElementSelector ) { // accessor
485
525
var o = this . options ;
486
526
if ( handleElementSelector === undefined ) {
487
527
return o . handleElementSelector ;
488
528
}
529
+ if ( o . handleElementSelector === handleElementSelector ) {
530
+ return ;
531
+ }
532
+ this . _displaceHandle ( ) ;
489
533
o . handleElementSelector = handleElementSelector ;
490
534
if ( o . handle ) {
491
535
this . _placeHandle ( ) ;
@@ -505,6 +549,10 @@ $.widget('ui.rotatable', $.ui.mouse, {
505
549
}
506
550
} ,
507
551
552
+ currentAngle : function ( ) {
553
+ return this . elementCurrentAngle ;
554
+ } ,
555
+
508
556
ui : function ( ) {
509
557
return {
510
558
element : this . element ,
@@ -535,23 +583,20 @@ $.ui.plugin.add('rotatable', 'alsoRotate', {
535
583
var instance = $ ( this ) . rotatable ( 'instance' ) , o = instance . options ;
536
584
$ ( o . alsoRotate ) . each ( function ( ) {
537
585
var element = $ ( this ) ;
538
- element . data ( 'ui-rotatable-alsorotate' , { } ) ;
539
- // todo: complete here
586
+ // do nothing
540
587
} ) ;
541
588
} ,
542
589
543
590
rotate : function ( event , ui ) {
544
591
var instance = $ ( this ) . rotatable ( 'instance' ) , o = instance . options ;
545
592
$ ( o . alsoRotate ) . each ( function ( ) {
546
593
var element = $ ( this ) ;
547
- var start = element . data ( 'ui-rotatable-alsorotate' ) ;
548
594
instance . perform ( element , instance . elementCurrentAngle ) ;
549
- // todo: complete here
550
595
} ) ;
551
596
} ,
552
597
553
598
stop : function ( event , ui ) {
554
- $ ( this ) . removeData ( 'ui-rotatable-alsorotate' ) ;
599
+ // do nothing
555
600
}
556
601
557
602
} ) ;
0 commit comments