3
* http://github.com/jlukic/semantic-ui/
6
* Copyright 2014 Contributors
7
* Released under the MIT license
8
* http://opensource.org/licenses/MIT
12
;(function ( $, window, document, undefined ) {
14
$.fn.shape = function(parameters) {
16
$allModules = $(this),
19
time = new Date().getTime(),
23
methodInvoked = (typeof query == 'string'),
24
queryArguments = [].slice.call(arguments, 1),
31
moduleSelector = $allModules.selector || '',
32
settings = $.extend(true, {}, $.fn.shape.settings, parameters),
35
namespace = settings.namespace,
36
selector = settings.selector,
37
error = settings.error,
38
className = settings.className,
40
// define namespaces for modules
41
eventNamespace = '.' + namespace,
42
moduleNamespace = 'module-' + namespace,
46
$sides = $module.find(selector.sides),
47
$side = $module.find(selector.side),
56
instance = $module.data(moduleNamespace),
62
initialize: function() {
63
module.verbose('Initializing module for', element);
64
module.set.defaultSide();
68
instantiate: function() {
69
module.verbose('Storing instance of module', module);
72
.data(moduleNamespace, instance)
77
module.verbose('Destroying previous module for', element);
79
.removeData(moduleNamespace)
85
module.verbose('Refreshing selector cache for', element);
87
$sides = $(this).find(selector.shape);
88
$side = $(this).find(selector.side);
92
module.verbose('Forcing repaint event');
94
shape = $sides.get(0) || document.createElement('div'),
95
fakeAssignment = shape.offsetWidth
99
animate: function(propertyObject, callback) {
100
module.verbose('Animating box with properties', propertyObject);
101
callback = callback || function(event) {
102
module.verbose('Executing animation callback');
103
if(event !== undefined) {
104
event.stopPropagation();
109
$.proxy(settings.beforeChange, $nextSide[0])();
110
if(module.get.transitionEvent()) {
111
module.verbose('Starting CSS animation');
113
.addClass(className.animating)
117
.addClass(className.animating)
120
.addClass(className.hidden)
124
.one(module.get.transitionEvent(), callback)
126
module.set.duration(settings.duration);
133
queue: function(method) {
134
module.debug('Queueing animation of', method);
136
.one(module.get.transitionEvent(), function() {
137
module.debug('Executing queued animation');
138
setTimeout(function(){
139
$module.shape(method);
146
module.verbose('Animating states reset');
148
.removeClass(className.animating)
152
// removeAttr style does not consistently work in safari
160
.removeClass(className.hidden)
163
.removeClass(className.animating)
170
animating: function() {
171
return $module.hasClass(className.animating);
177
defaultSide: function() {
178
$activeSide = $module.find('.' + settings.className.active);
179
$nextSide = ( $activeSide.next(selector.side).size() > 0 )
180
? $activeSide.next(selector.side)
181
: $module.find(selector.side).first()
183
nextSelector = false;
184
module.verbose('Active side set to', $activeSide);
185
module.verbose('Next side set to', $nextSide);
188
duration: function(duration) {
189
duration = duration || settings.duration;
190
duration = (typeof duration == 'number')
194
module.verbose('Setting animation duration', duration);
197
'-webkit-transition-duration': duration,
198
'-moz-transition-duration': duration,
199
'-ms-transition-duration': duration,
200
'-o-transition-duration': duration,
201
'transition-duration': duration
206
stageSize: function() {
208
$clone = $module.clone().addClass(className.loading),
209
$activeSide = $clone.find('.' + settings.className.active),
210
$nextSide = (nextSelector)
211
? $clone.find(nextSelector)
212
: ( $activeSide.next(selector.side).size() > 0 )
213
? $activeSide.next(selector.side)
214
: $clone.find(selector.side).first(),
217
$activeSide.removeClass(className.active);
218
$nextSide.addClass(className.active);
219
$clone.prependTo($body);
221
width : $nextSide.outerWidth(),
222
height : $nextSide.outerHeight()
228
module.verbose('Resizing stage to fit new content', newSize);
231
nextSide: function(selector) {
232
nextSelector = selector;
233
$nextSide = $module.find(selector);
234
if($nextSide.size() === 0) {
235
module.error(error.side);
237
module.verbose('Next side manually set to', $nextSide);
241
module.verbose('Setting new side to active', $nextSide);
243
.removeClass(className.active)
246
.addClass(className.active)
248
$.proxy(settings.onChange, $nextSide[0])();
249
module.set.defaultSide();
256
module.debug('Flipping up', $nextSide);
257
if( !module.is.animating() ) {
258
module.set.stageSize();
259
module.stage.above();
260
module.animate( module.get.transform.up() );
263
module.queue('flip up');
268
module.debug('Flipping down', $nextSide);
269
if( !module.is.animating() ) {
270
module.set.stageSize();
271
module.stage.below();
272
module.animate( module.get.transform.down() );
275
module.queue('flip down');
280
module.debug('Flipping left', $nextSide);
281
if( !module.is.animating() ) {
282
module.set.stageSize();
284
module.animate(module.get.transform.left() );
287
module.queue('flip left');
292
module.debug('Flipping right', $nextSide);
293
if( !module.is.animating() ) {
294
module.set.stageSize();
295
module.stage.right();
296
module.animate(module.get.transform.right() );
299
module.queue('flip right');
304
module.debug('Flipping over', $nextSide);
305
if( !module.is.animating() ) {
306
module.set.stageSize();
307
module.stage.behind();
308
module.animate(module.get.transform.over() );
311
module.queue('flip over');
316
module.debug('Flipping back', $nextSide);
317
if( !module.is.animating() ) {
318
module.set.stageSize();
319
module.stage.behind();
320
module.animate(module.get.transform.back() );
323
module.queue('flip back');
335
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
336
z: -($activeSide.outerHeight() / 2)
340
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)'
347
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
348
z: -($activeSide.outerHeight() / 2)
352
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)'
359
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
360
z : -($activeSide.outerWidth() / 2)
364
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)'
371
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
372
z : -($activeSide.outerWidth() / 2)
376
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)'
383
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
387
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
394
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
398
transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
403
transitionEvent: function() {
405
element = document.createElement('element'),
407
'transition' :'transitionend',
408
'OTransition' :'oTransitionEnd',
409
'MozTransition' :'transitionend',
410
'WebkitTransition' :'webkitTransitionEnd'
414
for(transition in transitions){
415
if( element.style[transition] !== undefined ){
416
return transitions[transition];
421
nextSide: function() {
422
return ( $activeSide.next(selector.side).size() > 0 )
423
? $activeSide.next(selector.side)
424
: $module.find(selector.side).first()
435
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
437
active : ($nextSide.outerHeight() / 2),
438
next : ($activeSide.outerHeight() / 2)
442
module.verbose('Setting the initial animation position as above', $nextSide, box);
445
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
449
.addClass(className.animating)
452
'top' : box.origin + 'px',
453
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)'
461
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
463
active : ($nextSide.outerHeight() / 2),
464
next : ($activeSide.outerHeight() / 2)
468
module.verbose('Setting the initial animation position as below', $nextSide, box);
471
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
475
.addClass(className.animating)
478
'top' : box.origin + 'px',
479
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)'
487
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
489
active : ($nextSide.outerWidth() / 2),
490
next : ($activeSide.outerWidth() / 2)
494
module.verbose('Setting the initial animation position as left', $nextSide, box);
497
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
501
.addClass(className.animating)
504
'left' : box.origin + 'px',
505
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)'
513
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
515
active : ($nextSide.outerWidth() / 2),
516
next : ($activeSide.outerWidth() / 2)
520
module.verbose('Setting the initial animation position as left', $nextSide, box);
523
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
527
.addClass(className.animating)
530
'left' : box.origin + 'px',
531
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)'
539
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
541
active : ($nextSide.outerWidth() / 2),
542
next : ($activeSide.outerWidth() / 2)
546
module.verbose('Setting the initial animation position as behind', $nextSide, box);
549
'transform' : 'rotateY(0deg)'
553
.addClass(className.animating)
556
'left' : box.origin + 'px',
557
'transform' : 'rotateY(-180deg)'
562
setting: function(name, value) {
563
if( $.isPlainObject(name) ) {
564
$.extend(true, settings, name);
566
else if(value !== undefined) {
567
settings[name] = value;
570
return settings[name];
573
internal: function(name, value) {
574
if( $.isPlainObject(name) ) {
575
$.extend(true, module, name);
577
else if(value !== undefined) {
578
module[name] = value;
586
if(settings.performance) {
587
module.performance.log(arguments);
590
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
591
module.debug.apply(console, arguments);
595
verbose: function() {
596
if(settings.verbose && settings.debug) {
597
if(settings.performance) {
598
module.performance.log(arguments);
601
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
602
module.verbose.apply(console, arguments);
607
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
608
module.error.apply(console, arguments);
611
log: function(message) {
617
if(settings.performance) {
618
currentTime = new Date().getTime();
619
previousTime = time || currentTime;
620
executionTime = currentTime - previousTime;
625
'Arguments' : [].slice.call(message, 1) || '',
626
'Execution Time' : executionTime
629
clearTimeout(module.performance.timer);
630
module.performance.timer = setTimeout(module.performance.display, 100);
632
display: function() {
634
title = settings.name + ':',
638
clearTimeout(module.performance.timer);
639
$.each(performance, function(index, data) {
640
totalTime += data['Execution Time'];
642
title += ' ' + totalTime + 'ms';
644
title += ' \'' + moduleSelector + '\'';
646
if($allModules.size() > 1) {
647
title += ' ' + '(' + $allModules.size() + ')';
649
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
650
console.groupCollapsed(title);
652
console.table(performance);
655
$.each(performance, function(index, data) {
656
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
664
invoke: function(query, passedArguments, context) {
671
passedArguments = passedArguments || queryArguments;
672
context = element || context;
673
if(typeof query == 'string' && object !== undefined) {
674
query = query.split(/[\. ]/);
675
maxDepth = query.length - 1;
676
$.each(query, function(depth, value) {
677
var camelCaseValue = (depth != maxDepth)
678
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
681
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
682
object = object[camelCaseValue];
684
else if( object[camelCaseValue] !== undefined ) {
685
found = object[camelCaseValue];
688
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
689
object = object[value];
691
else if( object[value] !== undefined ) {
692
found = object[value];
700
if ( $.isFunction( found ) ) {
701
response = found.apply(context, passedArguments);
703
else if(found !== undefined) {
706
if($.isArray(returnedValue)) {
707
returnedValue.push(response);
709
else if(returnedValue !== undefined) {
710
returnedValue = [returnedValue, response];
712
else if(response !== undefined) {
713
returnedValue = response;
720
if(instance === undefined) {
723
module.invoke(query);
726
if(instance !== undefined) {
734
return (returnedValue !== undefined)
740
$.fn.shape.settings = {
745
// debug content outputted to console
748
// verbose debug output
751
// performance data output
757
// callback occurs on side change
758
beforeChange : function() {},
759
onChange : function() {},
761
// animation duration
766
side : 'You tried to switch to a side that does not exist.',
767
method : 'The method you called is not defined'
772
animating : 'animating',
787
})( jQuery, window , document );
b'\\ No newline at end of file'