shape.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848
  1. /*!
  2. * # Fomantic-UI - Shape
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. ;(function ($, window, document, undefined) {
  11. 'use strict';
  12. $.isFunction = $.isFunction || function(obj) {
  13. return typeof obj === "function" && typeof obj.nodeType !== "number";
  14. };
  15. window = (typeof window != 'undefined' && window.Math == Math)
  16. ? window
  17. : (typeof self != 'undefined' && self.Math == Math)
  18. ? self
  19. : Function('return this')()
  20. ;
  21. $.fn.shape = function(parameters) {
  22. var
  23. $allModules = $(this),
  24. time = new Date().getTime(),
  25. performance = [],
  26. query = arguments[0],
  27. methodInvoked = (typeof query == 'string'),
  28. queryArguments = [].slice.call(arguments, 1),
  29. requestAnimationFrame = window.requestAnimationFrame
  30. || window.mozRequestAnimationFrame
  31. || window.webkitRequestAnimationFrame
  32. || window.msRequestAnimationFrame
  33. || function(callback) { setTimeout(callback, 0); },
  34. returnedValue
  35. ;
  36. $allModules
  37. .each(function() {
  38. var
  39. moduleSelector = $allModules.selector || '',
  40. settings = ( $.isPlainObject(parameters) )
  41. ? $.extend(true, {}, $.fn.shape.settings, parameters)
  42. : $.extend({}, $.fn.shape.settings),
  43. // internal aliases
  44. namespace = settings.namespace,
  45. selector = settings.selector,
  46. error = settings.error,
  47. className = settings.className,
  48. // define namespaces for modules
  49. eventNamespace = '.' + namespace,
  50. moduleNamespace = 'module-' + namespace,
  51. // selector cache
  52. $module = $(this),
  53. $sides = $module.find('>' + selector.sides),
  54. $side = $sides.find('>' + selector.side),
  55. // private variables
  56. nextIndex = false,
  57. $activeSide,
  58. $nextSide,
  59. // standard module
  60. element = this,
  61. instance = $module.data(moduleNamespace),
  62. module
  63. ;
  64. module = {
  65. initialize: function() {
  66. module.verbose('Initializing module for', element);
  67. module.set.defaultSide();
  68. module.instantiate();
  69. },
  70. instantiate: function() {
  71. module.verbose('Storing instance of module', module);
  72. instance = module;
  73. $module
  74. .data(moduleNamespace, instance)
  75. ;
  76. },
  77. destroy: function() {
  78. module.verbose('Destroying previous module for', element);
  79. $module
  80. .removeData(moduleNamespace)
  81. .off(eventNamespace)
  82. ;
  83. },
  84. refresh: function() {
  85. module.verbose('Refreshing selector cache for', element);
  86. $module = $(element);
  87. $sides = $(this).find(selector.sides);
  88. $side = $(this).find(selector.side);
  89. },
  90. repaint: function() {
  91. module.verbose('Forcing repaint event');
  92. var
  93. shape = $sides[0] || document.createElement('div'),
  94. fakeAssignment = shape.offsetWidth
  95. ;
  96. },
  97. animate: function(propertyObject, callback) {
  98. module.verbose('Animating box with properties', propertyObject);
  99. callback = callback || function(event) {
  100. module.verbose('Executing animation callback');
  101. if(event !== undefined) {
  102. event.stopPropagation();
  103. }
  104. module.reset();
  105. module.set.active();
  106. };
  107. settings.beforeChange.call($nextSide[0]);
  108. if(module.get.transitionEvent()) {
  109. module.verbose('Starting CSS animation');
  110. $module
  111. .addClass(className.animating)
  112. ;
  113. $sides
  114. .css(propertyObject)
  115. .one(module.get.transitionEvent(), callback)
  116. ;
  117. module.set.duration(settings.duration);
  118. requestAnimationFrame(function() {
  119. $module
  120. .addClass(className.animating)
  121. ;
  122. $activeSide
  123. .addClass(className.hidden)
  124. ;
  125. });
  126. }
  127. else {
  128. callback();
  129. }
  130. },
  131. queue: function(method) {
  132. module.debug('Queueing animation of', method);
  133. $sides
  134. .one(module.get.transitionEvent(), function() {
  135. module.debug('Executing queued animation');
  136. setTimeout(function(){
  137. $module.shape(method);
  138. }, 0);
  139. })
  140. ;
  141. },
  142. reset: function() {
  143. module.verbose('Animating states reset');
  144. $module
  145. .removeClass(className.animating)
  146. .attr('style', '')
  147. .removeAttr('style')
  148. ;
  149. // removeAttr style does not consistently work in safari
  150. $sides
  151. .attr('style', '')
  152. .removeAttr('style')
  153. ;
  154. $side
  155. .attr('style', '')
  156. .removeAttr('style')
  157. .removeClass(className.hidden)
  158. ;
  159. $nextSide
  160. .removeClass(className.animating)
  161. .attr('style', '')
  162. .removeAttr('style')
  163. ;
  164. },
  165. is: {
  166. complete: function() {
  167. return ($side.filter('.' + className.active)[0] == $nextSide[0]);
  168. },
  169. animating: function() {
  170. return $module.hasClass(className.animating);
  171. },
  172. hidden: function() {
  173. return $module.closest(':hidden').length > 0;
  174. }
  175. },
  176. set: {
  177. defaultSide: function() {
  178. $activeSide = $side.filter('.' + settings.className.active);
  179. $nextSide = ( $activeSide.next(selector.side).length > 0 )
  180. ? $activeSide.next(selector.side)
  181. : $side.first()
  182. ;
  183. nextIndex = false;
  184. module.verbose('Active side set to', $activeSide);
  185. module.verbose('Next side set to', $nextSide);
  186. },
  187. duration: function(duration) {
  188. duration = duration || settings.duration;
  189. duration = (typeof duration == 'number')
  190. ? duration + 'ms'
  191. : duration
  192. ;
  193. module.verbose('Setting animation duration', duration);
  194. if(settings.duration || settings.duration === 0) {
  195. $sides.add($side)
  196. .css({
  197. '-webkit-transition-duration': duration,
  198. '-moz-transition-duration': duration,
  199. '-ms-transition-duration': duration,
  200. '-o-transition-duration': duration,
  201. 'transition-duration': duration
  202. })
  203. ;
  204. }
  205. },
  206. currentStageSize: function() {
  207. var
  208. $activeSide = $side.filter('.' + settings.className.active),
  209. width = $activeSide.outerWidth(true),
  210. height = $activeSide.outerHeight(true)
  211. ;
  212. $module
  213. .css({
  214. width: width,
  215. height: height
  216. })
  217. ;
  218. },
  219. stageSize: function() {
  220. var
  221. $clone = $module.clone().addClass(className.loading),
  222. $side = $clone.find('>' + selector.sides + '>' + selector.side),
  223. $activeSide = $side.filter('.' + settings.className.active),
  224. $nextSide = (nextIndex)
  225. ? $side.eq(nextIndex)
  226. : ( $activeSide.next(selector.side).length > 0 )
  227. ? $activeSide.next(selector.side)
  228. : $side.first(),
  229. newWidth = (settings.width === 'next')
  230. ? $nextSide.outerWidth(true)
  231. : (settings.width === 'initial')
  232. ? $module.width()
  233. : settings.width,
  234. newHeight = (settings.height === 'next')
  235. ? $nextSide.outerHeight(true)
  236. : (settings.height === 'initial')
  237. ? $module.height()
  238. : settings.height
  239. ;
  240. $activeSide.removeClass(className.active);
  241. $nextSide.addClass(className.active);
  242. $clone.insertAfter($module);
  243. $clone.remove();
  244. if(settings.width !== 'auto') {
  245. $module.css('width', newWidth + settings.jitter);
  246. module.verbose('Specifying width during animation', newWidth);
  247. }
  248. if(settings.height !== 'auto') {
  249. $module.css('height', newHeight + settings.jitter);
  250. module.verbose('Specifying height during animation', newHeight);
  251. }
  252. },
  253. nextSide: function(selector) {
  254. nextIndex = selector;
  255. $nextSide = $side.filter(selector);
  256. nextIndex = $side.index($nextSide);
  257. if($nextSide.length === 0) {
  258. module.set.defaultSide();
  259. module.error(error.side);
  260. }
  261. module.verbose('Next side manually set to', $nextSide);
  262. },
  263. active: function() {
  264. module.verbose('Setting new side to active', $nextSide);
  265. $side
  266. .removeClass(className.active)
  267. ;
  268. $nextSide
  269. .addClass(className.active)
  270. ;
  271. settings.onChange.call($nextSide[0]);
  272. module.set.defaultSide();
  273. }
  274. },
  275. flip: {
  276. to: function(type,stage){
  277. if(module.is.hidden()) {
  278. module.debug('Module not visible', $nextSide);
  279. return;
  280. }
  281. if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) {
  282. module.debug('Side already visible', $nextSide);
  283. return;
  284. }
  285. var
  286. transform = module.get.transform[type]()
  287. ;
  288. if( !module.is.animating()) {
  289. module.debug('Flipping '+type, $nextSide);
  290. module.set.stageSize();
  291. module.stage[stage]();
  292. module.animate(transform);
  293. }
  294. else {
  295. module.queue('flip '+type);
  296. }
  297. },
  298. up: function() {
  299. module.flip.to('up','above');
  300. },
  301. down: function() {
  302. module.flip.to('down','below');
  303. },
  304. left: function() {
  305. module.flip.to('left','left');
  306. },
  307. right: function() {
  308. module.flip.to('right','right');
  309. },
  310. over: function() {
  311. module.flip.to('over','behind');
  312. },
  313. back: function() {
  314. module.flip.to('back','behind');
  315. }
  316. },
  317. get: {
  318. transform: {
  319. up: function() {
  320. var
  321. translateZ = $activeSide.outerHeight(true) / 2,
  322. translateY = $nextSide.outerHeight(true) - translateZ
  323. ;
  324. return {
  325. transform: 'translateY(' + translateY + 'px) translateZ(-'+ translateZ + 'px) rotateX(-90deg)'
  326. };
  327. },
  328. down: function() {
  329. var
  330. translate = {
  331. z: $activeSide.outerHeight(true) / 2
  332. }
  333. ;
  334. return {
  335. transform: 'translateY(-' + translate.z + 'px) translateZ(-'+ translate.z + 'px) rotateX(90deg)'
  336. };
  337. },
  338. left: function() {
  339. var
  340. translateZ = $activeSide.outerWidth(true) / 2,
  341. translateX = $nextSide.outerWidth(true) - translateZ
  342. ;
  343. return {
  344. transform: 'translateX(' + translateX + 'px) translateZ(-' + translateZ + 'px) rotateY(90deg)'
  345. };
  346. },
  347. right: function() {
  348. var
  349. translate = {
  350. z : $activeSide.outerWidth(true) / 2
  351. }
  352. ;
  353. return {
  354. transform: 'translateX(-' + translate.z + 'px) translateZ(-' + translate.z + 'px) rotateY(-90deg)'
  355. };
  356. },
  357. over: function() {
  358. var
  359. translate = {
  360. x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
  361. }
  362. ;
  363. return {
  364. transform: 'translateX(' + translate.x + 'px) rotateY(180deg)'
  365. };
  366. },
  367. back: function() {
  368. var
  369. translate = {
  370. x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
  371. }
  372. ;
  373. return {
  374. transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)'
  375. };
  376. }
  377. },
  378. transitionEvent: function() {
  379. var
  380. element = document.createElement('element'),
  381. transitions = {
  382. 'transition' :'transitionend',
  383. 'OTransition' :'oTransitionEnd',
  384. 'MozTransition' :'transitionend',
  385. 'WebkitTransition' :'webkitTransitionEnd'
  386. },
  387. transition
  388. ;
  389. for(transition in transitions){
  390. if( element.style[transition] !== undefined ){
  391. return transitions[transition];
  392. }
  393. }
  394. },
  395. nextSide: function() {
  396. return ( $activeSide.next(selector.side).length > 0 )
  397. ? $activeSide.next(selector.side)
  398. : $side.first()
  399. ;
  400. }
  401. },
  402. stage: {
  403. above: function() {
  404. var
  405. box = {
  406. origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
  407. depth : {
  408. active : ($nextSide.outerHeight(true) / 2),
  409. next : ($activeSide.outerHeight(true) / 2)
  410. }
  411. }
  412. ;
  413. module.verbose('Setting the initial animation position as above', $nextSide, box);
  414. $activeSide
  415. .css({
  416. 'transform' : 'rotateX(0deg)'
  417. })
  418. ;
  419. $nextSide
  420. .addClass(className.animating)
  421. .css({
  422. 'top' : box.origin + 'px',
  423. 'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px) translateY(-' + box.depth.active + 'px)'
  424. })
  425. ;
  426. },
  427. below: function() {
  428. var
  429. box = {
  430. origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
  431. depth : {
  432. active : ($nextSide.outerHeight(true) / 2),
  433. next : ($activeSide.outerHeight(true) / 2)
  434. }
  435. }
  436. ;
  437. module.verbose('Setting the initial animation position as below', $nextSide, box);
  438. $activeSide
  439. .css({
  440. 'transform' : 'rotateX(0deg)'
  441. })
  442. ;
  443. $nextSide
  444. .addClass(className.animating)
  445. .css({
  446. 'top' : box.origin + 'px',
  447. 'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px) translateY(' + box.depth.active + 'px)'
  448. })
  449. ;
  450. },
  451. left: function() {
  452. var
  453. height = {
  454. active : $activeSide.outerWidth(true),
  455. next : $nextSide.outerWidth(true)
  456. },
  457. box = {
  458. origin : ( ( height.active - height.next ) / 2),
  459. depth : {
  460. active : (height.next / 2),
  461. next : (height.active / 2)
  462. }
  463. }
  464. ;
  465. module.verbose('Setting the initial animation position as left', $nextSide, box);
  466. $activeSide
  467. .css({
  468. 'transform' : 'rotateY(0deg)'
  469. })
  470. ;
  471. $nextSide
  472. .addClass(className.animating)
  473. .css({
  474. 'left' : box.origin + 'px',
  475. 'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px) translateX(-' + box.depth.active + 'px)'
  476. })
  477. ;
  478. },
  479. right: function() {
  480. var
  481. height = {
  482. active : $activeSide.outerWidth(true),
  483. next : $nextSide.outerWidth(true)
  484. },
  485. box = {
  486. origin : ( ( height.active - height.next ) / 2),
  487. depth : {
  488. active : (height.next / 2),
  489. next : (height.active / 2)
  490. }
  491. }
  492. ;
  493. module.verbose('Setting the initial animation position as right', $nextSide, box);
  494. $activeSide
  495. .css({
  496. 'transform' : 'rotateY(0deg)'
  497. })
  498. ;
  499. $nextSide
  500. .addClass(className.animating)
  501. .css({
  502. 'left' : box.origin + 'px',
  503. 'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px) translateX(' + box.depth.active + 'px)'
  504. })
  505. ;
  506. },
  507. behind: function() {
  508. var
  509. height = {
  510. active : $activeSide.outerWidth(true),
  511. next : $nextSide.outerWidth(true)
  512. },
  513. box = {
  514. origin : ( ( height.active - height.next ) / 2),
  515. depth : {
  516. active : (height.next / 2),
  517. next : (height.active / 2)
  518. }
  519. }
  520. ;
  521. module.verbose('Setting the initial animation position as behind', $nextSide, box);
  522. $activeSide
  523. .css({
  524. 'transform' : 'rotateY(0deg)'
  525. })
  526. ;
  527. $nextSide
  528. .addClass(className.animating)
  529. .css({
  530. 'left' : box.origin + 'px',
  531. 'transform' : 'rotateY(-180deg)'
  532. })
  533. ;
  534. }
  535. },
  536. setting: function(name, value) {
  537. module.debug('Changing setting', name, value);
  538. if( $.isPlainObject(name) ) {
  539. $.extend(true, settings, name);
  540. }
  541. else if(value !== undefined) {
  542. if($.isPlainObject(settings[name])) {
  543. $.extend(true, settings[name], value);
  544. }
  545. else {
  546. settings[name] = value;
  547. }
  548. }
  549. else {
  550. return settings[name];
  551. }
  552. },
  553. internal: function(name, value) {
  554. if( $.isPlainObject(name) ) {
  555. $.extend(true, module, name);
  556. }
  557. else if(value !== undefined) {
  558. module[name] = value;
  559. }
  560. else {
  561. return module[name];
  562. }
  563. },
  564. debug: function() {
  565. if(!settings.silent && settings.debug) {
  566. if(settings.performance) {
  567. module.performance.log(arguments);
  568. }
  569. else {
  570. module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
  571. module.debug.apply(console, arguments);
  572. }
  573. }
  574. },
  575. verbose: function() {
  576. if(!settings.silent && settings.verbose && settings.debug) {
  577. if(settings.performance) {
  578. module.performance.log(arguments);
  579. }
  580. else {
  581. module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
  582. module.verbose.apply(console, arguments);
  583. }
  584. }
  585. },
  586. error: function() {
  587. if(!settings.silent) {
  588. module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
  589. module.error.apply(console, arguments);
  590. }
  591. },
  592. performance: {
  593. log: function(message) {
  594. var
  595. currentTime,
  596. executionTime,
  597. previousTime
  598. ;
  599. if(settings.performance) {
  600. currentTime = new Date().getTime();
  601. previousTime = time || currentTime;
  602. executionTime = currentTime - previousTime;
  603. time = currentTime;
  604. performance.push({
  605. 'Name' : message[0],
  606. 'Arguments' : [].slice.call(message, 1) || '',
  607. 'Element' : element,
  608. 'Execution Time' : executionTime
  609. });
  610. }
  611. clearTimeout(module.performance.timer);
  612. module.performance.timer = setTimeout(module.performance.display, 500);
  613. },
  614. display: function() {
  615. var
  616. title = settings.name + ':',
  617. totalTime = 0
  618. ;
  619. time = false;
  620. clearTimeout(module.performance.timer);
  621. $.each(performance, function(index, data) {
  622. totalTime += data['Execution Time'];
  623. });
  624. title += ' ' + totalTime + 'ms';
  625. if(moduleSelector) {
  626. title += ' \'' + moduleSelector + '\'';
  627. }
  628. if($allModules.length > 1) {
  629. title += ' ' + '(' + $allModules.length + ')';
  630. }
  631. if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
  632. console.groupCollapsed(title);
  633. if(console.table) {
  634. console.table(performance);
  635. }
  636. else {
  637. $.each(performance, function(index, data) {
  638. console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
  639. });
  640. }
  641. console.groupEnd();
  642. }
  643. performance = [];
  644. }
  645. },
  646. invoke: function(query, passedArguments, context) {
  647. var
  648. object = instance,
  649. maxDepth,
  650. found,
  651. response
  652. ;
  653. passedArguments = passedArguments || queryArguments;
  654. context = element || context;
  655. if(typeof query == 'string' && object !== undefined) {
  656. query = query.split(/[\. ]/);
  657. maxDepth = query.length - 1;
  658. $.each(query, function(depth, value) {
  659. var camelCaseValue = (depth != maxDepth)
  660. ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
  661. : query
  662. ;
  663. if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
  664. object = object[camelCaseValue];
  665. }
  666. else if( object[camelCaseValue] !== undefined ) {
  667. found = object[camelCaseValue];
  668. return false;
  669. }
  670. else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
  671. object = object[value];
  672. }
  673. else if( object[value] !== undefined ) {
  674. found = object[value];
  675. return false;
  676. }
  677. else {
  678. return false;
  679. }
  680. });
  681. }
  682. if ( $.isFunction( found ) ) {
  683. response = found.apply(context, passedArguments);
  684. }
  685. else if(found !== undefined) {
  686. response = found;
  687. }
  688. if(Array.isArray(returnedValue)) {
  689. returnedValue.push(response);
  690. }
  691. else if(returnedValue !== undefined) {
  692. returnedValue = [returnedValue, response];
  693. }
  694. else if(response !== undefined) {
  695. returnedValue = response;
  696. }
  697. return found;
  698. }
  699. };
  700. if(methodInvoked) {
  701. if(instance === undefined) {
  702. module.initialize();
  703. }
  704. var $inputs = $module.find('input');
  705. if( $inputs.length > 0) {
  706. $inputs.blur();
  707. setTimeout(function(){
  708. module.invoke(query);
  709. }, 150);
  710. } else {
  711. module.invoke(query);
  712. }
  713. }
  714. else {
  715. if(instance !== undefined) {
  716. instance.invoke('destroy');
  717. }
  718. module.initialize();
  719. }
  720. })
  721. ;
  722. return (returnedValue !== undefined)
  723. ? returnedValue
  724. : this
  725. ;
  726. };
  727. $.fn.shape.settings = {
  728. // module info
  729. name : 'Shape',
  730. // hide all debug content
  731. silent : false,
  732. // debug content outputted to console
  733. debug : false,
  734. // verbose debug output
  735. verbose : false,
  736. // fudge factor in pixels when swapping from 2d to 3d (can be useful to correct rounding errors)
  737. jitter : 0,
  738. // performance data output
  739. performance: true,
  740. // event namespace
  741. namespace : 'shape',
  742. // width during animation, can be set to 'auto', initial', 'next' or pixel amount
  743. width: 'initial',
  744. // height during animation, can be set to 'auto', 'initial', 'next' or pixel amount
  745. height: 'initial',
  746. // callback occurs on side change
  747. beforeChange : function() {},
  748. onChange : function() {},
  749. // allow animation to same side
  750. allowRepeats: false,
  751. // animation duration
  752. duration : false,
  753. // possible errors
  754. error: {
  755. side : 'You tried to switch to a side that does not exist.',
  756. method : 'The method you called is not defined'
  757. },
  758. // classnames used
  759. className : {
  760. animating : 'animating',
  761. hidden : 'hidden',
  762. loading : 'loading',
  763. active : 'active'
  764. },
  765. // selectors used
  766. selector : {
  767. sides : '.sides',
  768. side : '.side'
  769. }
  770. };
  771. })( jQuery, window, document );