You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1092 lines
35 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Sidebar
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributor
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. ;(function ( $, window, document, undefined ) {
  12. "use strict";
  13. $.fn.sidebar = function(parameters) {
  14. var
  15. $allModules = $(this),
  16. $window = $(window),
  17. $document = $(document),
  18. $html = $('html'),
  19. $head = $('head'),
  20. moduleSelector = $allModules.selector || '',
  21. time = new Date().getTime(),
  22. performance = [],
  23. query = arguments[0],
  24. methodInvoked = (typeof query == 'string'),
  25. queryArguments = [].slice.call(arguments, 1),
  26. requestAnimationFrame = window.requestAnimationFrame
  27. || window.mozRequestAnimationFrame
  28. || window.webkitRequestAnimationFrame
  29. || window.msRequestAnimationFrame
  30. || function(callback) { setTimeout(callback, 0); },
  31. returnedValue
  32. ;
  33. $allModules
  34. .each(function() {
  35. var
  36. settings = ( $.isPlainObject(parameters) )
  37. ? $.extend(true, {}, $.fn.sidebar.settings, parameters)
  38. : $.extend({}, $.fn.sidebar.settings),
  39. selector = settings.selector,
  40. className = settings.className,
  41. namespace = settings.namespace,
  42. regExp = settings.regExp,
  43. error = settings.error,
  44. eventNamespace = '.' + namespace,
  45. moduleNamespace = 'module-' + namespace,
  46. $module = $(this),
  47. $context = $(settings.context),
  48. $sidebars = $module.children(selector.sidebar),
  49. $fixed = $context.children(selector.fixed),
  50. $pusher = $context.children(selector.pusher),
  51. $style,
  52. element = this,
  53. instance = $module.data(moduleNamespace),
  54. elementNamespace,
  55. id,
  56. currentScroll,
  57. transitionEvent,
  58. module
  59. ;
  60. module = {
  61. initialize: function() {
  62. module.debug('Initializing sidebar', parameters);
  63. module.create.id();
  64. transitionEvent = module.get.transitionEvent();
  65. // cache on initialize
  66. if( ( settings.useLegacy == 'auto' && module.is.legacy() ) || settings.useLegacy === true) {
  67. settings.transition = 'overlay';
  68. settings.useLegacy = true;
  69. }
  70. if(module.is.ios()) {
  71. module.set.ios();
  72. }
  73. // avoids locking rendering if initialized in onReady
  74. if(settings.delaySetup) {
  75. requestAnimationFrame(module.setup.layout);
  76. }
  77. else {
  78. module.setup.layout();
  79. }
  80. module.instantiate();
  81. },
  82. instantiate: function() {
  83. module.verbose('Storing instance of module', module);
  84. instance = module;
  85. $module
  86. .data(moduleNamespace, module)
  87. ;
  88. },
  89. create: {
  90. id: function() {
  91. module.verbose('Creating unique id for element');
  92. id = module.get.uniqueID();
  93. elementNamespace = '.' + id;
  94. }
  95. },
  96. destroy: function() {
  97. module.verbose('Destroying previous module for', $module);
  98. module.remove.direction();
  99. $module
  100. .off(eventNamespace)
  101. .removeData(moduleNamespace)
  102. ;
  103. // bound by uuid
  104. $context.off(elementNamespace);
  105. $window.off(elementNamespace);
  106. $document.off(elementNamespace);
  107. },
  108. event: {
  109. clickaway: function(event) {
  110. var
  111. clickedInPusher = ($pusher.find(event.target).length > 0 || $pusher.is(event.target)),
  112. clickedContext = ($context.is(event.target))
  113. ;
  114. if(clickedInPusher) {
  115. module.verbose('User clicked on dimmed page');
  116. module.hide();
  117. }
  118. if(clickedContext) {
  119. module.verbose('User clicked on dimmable context (scaled out page)');
  120. module.hide();
  121. }
  122. },
  123. touch: function(event) {
  124. //event.stopPropagation();
  125. },
  126. containScroll: function(event) {
  127. if(element.scrollTop <= 0) {
  128. element.scrollTop = 1;
  129. }
  130. if((element.scrollTop + element.offsetHeight) >= element.scrollHeight) {
  131. element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
  132. }
  133. },
  134. scroll: function(event) {
  135. if( $(event.target).closest(selector.sidebar).length === 0 ) {
  136. event.preventDefault();
  137. }
  138. }
  139. },
  140. bind: {
  141. clickaway: function() {
  142. module.verbose('Adding clickaway events to context', $context);
  143. if(settings.closable) {
  144. $context
  145. .on('click' + elementNamespace, module.event.clickaway)
  146. .on('touchend' + elementNamespace, module.event.clickaway)
  147. ;
  148. }
  149. },
  150. scrollLock: function() {
  151. if(settings.scrollLock) {
  152. module.debug('Disabling page scroll');
  153. $window
  154. .on('DOMMouseScroll' + elementNamespace, module.event.scroll)
  155. ;
  156. }
  157. module.verbose('Adding events to contain sidebar scroll');
  158. $document
  159. .on('touchmove' + elementNamespace, module.event.touch)
  160. ;
  161. $module
  162. .on('scroll' + eventNamespace, module.event.containScroll)
  163. ;
  164. }
  165. },
  166. unbind: {
  167. clickaway: function() {
  168. module.verbose('Removing clickaway events from context', $context);
  169. $context.off(elementNamespace);
  170. },
  171. scrollLock: function() {
  172. module.verbose('Removing scroll lock from page');
  173. $document.off(elementNamespace);
  174. $window.off(elementNamespace);
  175. $module.off('scroll' + eventNamespace);
  176. }
  177. },
  178. add: {
  179. bodyCSS: function() {
  180. var
  181. width = $module.outerWidth(),
  182. height = $module.outerHeight(),
  183. direction = module.get.direction(),
  184. distance = {
  185. left : width,
  186. right : -width,
  187. top : height,
  188. bottom : -height
  189. },
  190. style
  191. ;
  192. if( module.is.rtl() ){
  193. module.verbose('RTL detected, flipping widths');
  194. distance.left = -width;
  195. distance.right = width;
  196. }
  197. style = '<style title="' + namespace + '">';
  198. if(direction === 'left' || direction === 'right') {
  199. module.debug('Adding CSS rules for animation distance', width);
  200. style += ''
  201. + ' .ui.visible.' + direction + '.sidebar ~ .fixed,'
  202. + ' .ui.visible.' + direction + '.sidebar ~ .pusher {'
  203. + ' -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
  204. + ' transform: translate3d('+ distance[direction] + 'px, 0, 0);'
  205. + ' }'
  206. ;
  207. }
  208. else if(direction === 'top' || direction == 'bottom') {
  209. style += ''
  210. + ' .ui.visible.' + direction + '.sidebar ~ .fixed,'
  211. + ' .ui.visible.' + direction + '.sidebar ~ .pusher {'
  212. + ' -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
  213. + ' transform: translate3d(0, ' + distance[direction] + 'px, 0);'
  214. + ' }'
  215. ;
  216. }
  217. /* IE is only browser not to create context with transforms */
  218. /* https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328 */
  219. if( module.is.ie() ) {
  220. if(direction === 'left' || direction === 'right') {
  221. module.debug('Adding CSS rules for animation distance', width);
  222. style += ''
  223. + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
  224. + ' -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
  225. + ' transform: translate3d('+ distance[direction] + 'px, 0, 0);'
  226. + ' }'
  227. ;
  228. }
  229. else if(direction === 'top' || direction == 'bottom') {
  230. style += ''
  231. + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
  232. + ' -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
  233. + ' transform: translate3d(0, ' + distance[direction] + 'px, 0);'
  234. + ' }'
  235. ;
  236. }
  237. /* opposite sides visible forces content overlay */
  238. style += ''
  239. + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,'
  240. + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {'
  241. + ' -webkit-transform: translate3d(0px, 0, 0);'
  242. + ' transform: translate3d(0px, 0, 0);'
  243. + ' }'
  244. ;
  245. }
  246. style += '</style>';
  247. $head.append(style);
  248. $style = $('style[title=' + namespace + ']');
  249. module.debug('Adding sizing css to head', $style);
  250. }
  251. },
  252. refresh: function() {
  253. module.verbose('Refreshing selector cache');
  254. $context = $(settings.context);
  255. $sidebars = $context.children(selector.sidebar);
  256. $pusher = $context.children(selector.pusher);
  257. $fixed = $context.children(selector.fixed);
  258. },
  259. refreshSidebars: function() {
  260. module.verbose('Refreshing other sidebars');
  261. $sidebars = $context.children(selector.sidebar);
  262. },
  263. repaint: function() {
  264. module.verbose('Forcing repaint event');
  265. element.style.display='none';
  266. element.offsetHeight;
  267. element.scrollTop = element.scrollTop;
  268. element.style.display='';
  269. },
  270. setup: {
  271. layout: function() {
  272. if( $context.children(selector.pusher).length === 0 ) {
  273. module.debug('Adding wrapper element for sidebar');
  274. module.error(error.pusher);
  275. $pusher = $('<div class="pusher" />');
  276. $context
  277. .children()
  278. .not(selector.omitted)
  279. .not($sidebars)
  280. .wrapAll($pusher)
  281. ;
  282. module.refresh();
  283. }
  284. if($module.nextAll(selector.pusher).length === 0 || $module.nextAll(selector.pusher)[0] !== $pusher[0]) {
  285. module.debug('Moved sidebar to correct parent element');
  286. module.error(error.movedSidebar, element);
  287. $module.detach().prependTo($context);
  288. module.refresh();
  289. }
  290. module.set.pushable();
  291. module.set.direction();
  292. }
  293. },
  294. attachEvents: function(selector, event) {
  295. var
  296. $toggle = $(selector)
  297. ;
  298. event = $.isFunction(module[event])
  299. ? module[event]
  300. : module.toggle
  301. ;
  302. if($toggle.length > 0) {
  303. module.debug('Attaching sidebar events to element', selector, event);
  304. $toggle
  305. .on('click' + eventNamespace, event)
  306. ;
  307. }
  308. else {
  309. module.error(error.notFound, selector);
  310. }
  311. },
  312. show: function(callback) {
  313. var
  314. animateMethod = (settings.useLegacy === true)
  315. ? module.legacyPushPage
  316. : module.pushPage
  317. ;
  318. callback = $.isFunction(callback)
  319. ? callback
  320. : function(){}
  321. ;
  322. if(module.is.hidden()) {
  323. module.refreshSidebars();
  324. if(settings.overlay) {
  325. module.error(error.overlay);
  326. settings.transition = 'overlay';
  327. }
  328. module.refresh();
  329. if(module.othersActive()) {
  330. module.debug('Other sidebars currently visible');
  331. if(settings.exclusive) {
  332. // if not overlay queue animation after hide
  333. if(settings.transition != 'overlay') {
  334. module.hideOthers(module.show);
  335. return;
  336. }
  337. else {
  338. module.hideOthers();
  339. }
  340. }
  341. else {
  342. settings.transition = 'overlay';
  343. }
  344. }
  345. animateMethod(function() {
  346. callback.call(element);
  347. settings.onShow.call(element);
  348. });
  349. settings.onChange.call(element);
  350. settings.onVisible.call(element);
  351. }
  352. else {
  353. module.debug('Sidebar is already visible');
  354. }
  355. },
  356. hide: function(callback) {
  357. var
  358. animateMethod = (settings.useLegacy === true)
  359. ? module.legacyPullPage
  360. : module.pullPage
  361. ;
  362. callback = $.isFunction(callback)
  363. ? callback
  364. : function(){}
  365. ;
  366. if(module.is.visible() || module.is.animating()) {
  367. module.debug('Hiding sidebar', callback);
  368. module.refreshSidebars();
  369. animateMethod(function() {
  370. callback.call(element);
  371. settings.onHidden.call(element);
  372. });
  373. settings.onChange.call(element);
  374. settings.onHide.call(element);
  375. }
  376. },
  377. othersAnimating: function() {
  378. return ($sidebars.not($module).filter('.' + className.animating).length > 0);
  379. },
  380. othersVisible: function() {
  381. return ($sidebars.not($module).filter('.' + className.visible).length > 0);
  382. },
  383. othersActive: function() {
  384. return(module.othersVisible() || module.othersAnimating());
  385. },
  386. hideOthers: function(callback) {
  387. var
  388. $otherSidebars = $sidebars.not($module).filter('.' + className.visible),
  389. sidebarCount = $otherSidebars.length,
  390. callbackCount = 0
  391. ;
  392. callback = callback || function(){};
  393. $otherSidebars
  394. .sidebar('hide', function() {
  395. callbackCount++;
  396. if(callbackCount == sidebarCount) {
  397. callback();
  398. }
  399. })
  400. ;
  401. },
  402. toggle: function() {
  403. module.verbose('Determining toggled direction');
  404. if(module.is.hidden()) {
  405. module.show();
  406. }
  407. else {
  408. module.hide();
  409. }
  410. },
  411. pushPage: function(callback) {
  412. var
  413. transition = module.get.transition(),
  414. $transition = (transition == 'safe')
  415. ? $context
  416. : (transition === 'overlay' || module.othersActive())
  417. ? $module
  418. : $pusher,
  419. animate,
  420. transitionEnd
  421. ;
  422. callback = $.isFunction(callback)
  423. ? callback
  424. : function(){}
  425. ;
  426. if(settings.transition == 'scale down') {
  427. module.scrollToTop();
  428. }
  429. module.set.transition(transition);
  430. module.repaint();
  431. animate = function() {
  432. module.bind.clickaway();
  433. module.add.bodyCSS();
  434. module.set.animating();
  435. module.set.visible();
  436. if(!module.othersVisible()) {
  437. if(settings.dimPage) {
  438. $pusher.addClass(className.dimmed);
  439. }
  440. }
  441. };
  442. transitionEnd = function(event) {
  443. if( event.target == $transition[0] ) {
  444. $transition.off(transitionEvent + elementNamespace, transitionEnd);
  445. module.remove.animating();
  446. module.bind.scrollLock();
  447. callback.call(element);
  448. }
  449. };
  450. $transition.off(transitionEvent + elementNamespace);
  451. $transition.on(transitionEvent + elementNamespace, transitionEnd);
  452. requestAnimationFrame(animate);
  453. },
  454. pullPage: function(callback) {
  455. var
  456. transition = module.get.transition(),
  457. $transition = (transition == 'safe')
  458. ? $context
  459. : (transition == 'overlay' || module.othersActive())
  460. ? $module
  461. : $pusher,
  462. animate,
  463. transitionEnd
  464. ;
  465. callback = $.isFunction(callback)
  466. ? callback
  467. : function(){}
  468. ;
  469. module.verbose('Removing context push state', module.get.direction());
  470. module.set.transition(transition);
  471. module.unbind.clickaway();
  472. module.unbind.scrollLock();
  473. animate = function() {
  474. module.set.animating();
  475. module.remove.visible();
  476. if(settings.dimPage && !module.othersVisible()) {
  477. $pusher.removeClass(className.dimmed);
  478. }
  479. };
  480. transitionEnd = function(event) {
  481. if( event.target == $transition[0] ) {
  482. $transition.off(transitionEvent + elementNamespace, transitionEnd);
  483. module.remove.animating();
  484. module.remove.transition();
  485. module.remove.bodyCSS();
  486. if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) {
  487. module.scrollBack();
  488. }
  489. callback.call(element);
  490. }
  491. };
  492. $transition.off(transitionEvent + elementNamespace);
  493. $transition.on(transitionEvent + elementNamespace, transitionEnd);
  494. requestAnimationFrame(animate);
  495. },
  496. legacyPushPage: function(callback) {
  497. var
  498. distance = $module.width(),
  499. direction = module.get.direction(),
  500. properties = {}
  501. ;
  502. distance = distance || $module.width();
  503. callback = $.isFunction(callback)
  504. ? callback
  505. : function(){}
  506. ;
  507. properties[direction] = distance;
  508. module.debug('Using javascript to push context', properties);
  509. module.set.visible();
  510. module.set.transition();
  511. module.set.animating();
  512. if(settings.dimPage) {
  513. $pusher.addClass(className.dimmed);
  514. }
  515. $context
  516. .css('position', 'relative')
  517. .animate(properties, settings.duration, settings.easing, function() {
  518. module.remove.animating();
  519. module.bind.clickaway();
  520. callback.call(element);
  521. })
  522. ;
  523. },
  524. legacyPullPage: function(callback) {
  525. var
  526. distance = 0,
  527. direction = module.get.direction(),
  528. properties = {}
  529. ;
  530. distance = distance || $module.width();
  531. callback = $.isFunction(callback)
  532. ? callback
  533. : function(){}
  534. ;
  535. properties[direction] = '0px';
  536. module.debug('Using javascript to pull context', properties);
  537. module.unbind.clickaway();
  538. module.set.animating();
  539. module.remove.visible();
  540. if(settings.dimPage && !module.othersActive()) {
  541. $pusher.removeClass(className.dimmed);
  542. }
  543. $context
  544. .css('position', 'relative')
  545. .animate(properties, settings.duration, settings.easing, function() {
  546. module.remove.animating();
  547. callback.call(element);
  548. })
  549. ;
  550. },
  551. scrollToTop: function() {
  552. module.verbose('Scrolling to top of page to avoid animation issues');
  553. currentScroll = $(window).scrollTop();
  554. $module.scrollTop(0);
  555. window.scrollTo(0, 0);
  556. },
  557. scrollBack: function() {
  558. module.verbose('Scrolling back to original page position');
  559. window.scrollTo(0, currentScroll);
  560. },
  561. set: {
  562. // html
  563. ios: function() {
  564. $html.addClass(className.ios);
  565. },
  566. // container
  567. pushed: function() {
  568. $context.addClass(className.pushed);
  569. },
  570. pushable: function() {
  571. $context.addClass(className.pushable);
  572. },
  573. // sidebar
  574. active: function() {
  575. $module.addClass(className.active);
  576. },
  577. animating: function() {
  578. $module.addClass(className.animating);
  579. },
  580. transition: function(transition) {
  581. transition = transition || module.get.transition();
  582. $module.addClass(transition);
  583. },
  584. direction: function(direction) {
  585. direction = direction || module.get.direction();
  586. $module.addClass(className[direction]);
  587. },
  588. visible: function() {
  589. $module.addClass(className.visible);
  590. },
  591. overlay: function() {
  592. $module.addClass(className.overlay);
  593. }
  594. },
  595. remove: {
  596. bodyCSS: function() {
  597. module.debug('Removing body css styles', $style);
  598. if($style && $style.length > 0) {
  599. $style.remove();
  600. }
  601. },
  602. // context
  603. pushed: function() {
  604. $context.removeClass(className.pushed);
  605. },
  606. pushable: function() {
  607. $context.removeClass(className.pushable);
  608. },
  609. // sidebar
  610. active: function() {
  611. $module.removeClass(className.active);
  612. },
  613. animating: function() {
  614. $module.removeClass(className.animating);
  615. },
  616. transition: function(transition) {
  617. transition = transition || module.get.transition();
  618. $module.removeClass(transition);
  619. },
  620. direction: function(direction) {
  621. direction = direction || module.get.direction();
  622. $module.removeClass(className[direction]);
  623. },
  624. visible: function() {
  625. $module.removeClass(className.visible);
  626. },
  627. overlay: function() {
  628. $module.removeClass(className.overlay);
  629. }
  630. },
  631. get: {
  632. direction: function() {
  633. if($module.hasClass(className.top)) {
  634. return className.top;
  635. }
  636. else if($module.hasClass(className.right)) {
  637. return className.right;
  638. }
  639. else if($module.hasClass(className.bottom)) {
  640. return className.bottom;
  641. }
  642. return className.left;
  643. },
  644. transition: function() {
  645. var
  646. direction = module.get.direction(),
  647. transition
  648. ;
  649. transition = ( module.is.mobile() )
  650. ? (settings.mobileTransition == 'auto')
  651. ? settings.defaultTransition.mobile[direction]
  652. : settings.mobileTransition
  653. : (settings.transition == 'auto')
  654. ? settings.defaultTransition.computer[direction]
  655. : settings.transition
  656. ;
  657. module.verbose('Determined transition', transition);
  658. return transition;
  659. },
  660. transitionEvent: function() {
  661. var
  662. element = document.createElement('element'),
  663. transitions = {
  664. 'transition' :'transitionend',
  665. 'OTransition' :'oTransitionEnd',
  666. 'MozTransition' :'transitionend',
  667. 'WebkitTransition' :'webkitTransitionEnd'
  668. },
  669. transition
  670. ;
  671. for(transition in transitions){
  672. if( element.style[transition] !== undefined ){
  673. return transitions[transition];
  674. }
  675. }
  676. },
  677. uniqueID: function() {
  678. return (Math.random().toString(16) + '000000000').substr(2,8);
  679. }
  680. },
  681. is: {
  682. ie: function() {
  683. var
  684. isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window),
  685. isIE = ('ActiveXObject' in window)
  686. ;
  687. return (isIE11 || isIE);
  688. },
  689. legacy: function() {
  690. var
  691. element = document.createElement('div'),
  692. transforms = {
  693. 'webkitTransform' :'-webkit-transform',
  694. 'OTransform' :'-o-transform',
  695. 'msTransform' :'-ms-transform',
  696. 'MozTransform' :'-moz-transform',
  697. 'transform' :'transform'
  698. },
  699. has3D
  700. ;
  701. // Add it to the body to get the computed style.
  702. document.body.insertBefore(element, null);
  703. for (var transform in transforms) {
  704. if (element.style[transform] !== undefined) {
  705. element.style[transform] = "translate3d(1px,1px,1px)";
  706. has3D = window.getComputedStyle(element).getPropertyValue(transforms[transform]);
  707. }
  708. }
  709. document.body.removeChild(element);
  710. return !(has3D !== undefined && has3D.length > 0 && has3D !== 'none');
  711. },
  712. ios: function() {
  713. var
  714. userAgent = navigator.userAgent,
  715. isIOS = userAgent.match(regExp.ios)
  716. ;
  717. if(isIOS) {
  718. module.verbose('Browser was found to be iOS', userAgent);
  719. return true;
  720. }
  721. else {
  722. return false;
  723. }
  724. },
  725. mobile: function() {
  726. var
  727. userAgent = navigator.userAgent,
  728. isMobile = userAgent.match(regExp.mobile)
  729. ;
  730. if(isMobile) {
  731. module.verbose('Browser was found to be mobile', userAgent);
  732. return true;
  733. }
  734. else {
  735. module.verbose('Browser is not mobile, using regular transition', userAgent);
  736. return false;
  737. }
  738. },
  739. hidden: function() {
  740. return !module.is.visible();
  741. },
  742. visible: function() {
  743. return $module.hasClass(className.visible);
  744. },
  745. // alias
  746. open: function() {
  747. return module.is.visible();
  748. },
  749. closed: function() {
  750. return module.is.hidden();
  751. },
  752. vertical: function() {
  753. return $module.hasClass(className.top);
  754. },
  755. animating: function() {
  756. return $context.hasClass(className.animating);
  757. },
  758. rtl: function () {
  759. return $module.css('direction') == 'rtl';
  760. }
  761. },
  762. setting: function(name, value) {
  763. module.debug('Changing setting', name, value);
  764. if( $.isPlainObject(name) ) {
  765. $.extend(true, settings, name);
  766. }
  767. else if(value !== undefined) {
  768. settings[name] = value;
  769. }
  770. else {
  771. return settings[name];
  772. }
  773. },
  774. internal: function(name, value) {
  775. if( $.isPlainObject(name) ) {
  776. $.extend(true, module, name);
  777. }
  778. else if(value !== undefined) {
  779. module[name] = value;
  780. }
  781. else {
  782. return module[name];
  783. }
  784. },
  785. debug: function() {
  786. if(settings.debug) {
  787. if(settings.performance) {
  788. module.performance.log(arguments);
  789. }
  790. else {
  791. module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
  792. module.debug.apply(console, arguments);
  793. }
  794. }
  795. },
  796. verbose: function() {
  797. if(settings.verbose && settings.debug) {
  798. if(settings.performance) {
  799. module.performance.log(arguments);
  800. }
  801. else {
  802. module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
  803. module.verbose.apply(console, arguments);
  804. }
  805. }
  806. },
  807. error: function() {
  808. module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
  809. module.error.apply(console, arguments);
  810. },
  811. performance: {
  812. log: function(message) {
  813. var
  814. currentTime,
  815. executionTime,
  816. previousTime
  817. ;
  818. if(settings.performance) {
  819. currentTime = new Date().getTime();
  820. previousTime = time || currentTime;
  821. executionTime = currentTime - previousTime;
  822. time = currentTime;
  823. performance.push({
  824. 'Name' : message[0],
  825. 'Arguments' : [].slice.call(message, 1) || '',
  826. 'Element' : element,
  827. 'Execution Time' : executionTime
  828. });
  829. }
  830. clearTimeout(module.performance.timer);
  831. module.performance.timer = setTimeout(module.performance.display, 100);
  832. },
  833. display: function() {
  834. var
  835. title = settings.name + ':',
  836. totalTime = 0
  837. ;
  838. time = false;
  839. clearTimeout(module.performance.timer);
  840. $.each(performance, function(index, data) {
  841. totalTime += data['Execution Time'];
  842. });
  843. title += ' ' + totalTime + 'ms';
  844. if(moduleSelector) {
  845. title += ' \'' + moduleSelector + '\'';
  846. }
  847. if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
  848. console.groupCollapsed(title);
  849. if(console.table) {
  850. console.table(performance);
  851. }
  852. else {
  853. $.each(performance, function(index, data) {
  854. console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
  855. });
  856. }
  857. console.groupEnd();
  858. }
  859. performance = [];
  860. }
  861. },
  862. invoke: function(query, passedArguments, context) {
  863. var
  864. object = instance,
  865. maxDepth,
  866. found,
  867. response
  868. ;
  869. passedArguments = passedArguments || queryArguments;
  870. context = element || context;
  871. if(typeof query == 'string' && object !== undefined) {
  872. query = query.split(/[\. ]/);
  873. maxDepth = query.length - 1;
  874. $.each(query, function(depth, value) {
  875. var camelCaseValue = (depth != maxDepth)
  876. ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
  877. : query
  878. ;
  879. if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
  880. object = object[camelCaseValue];
  881. }
  882. else if( object[camelCaseValue] !== undefined ) {
  883. found = object[camelCaseValue];
  884. return false;
  885. }
  886. else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
  887. object = object[value];
  888. }
  889. else if( object[value] !== undefined ) {
  890. found = object[value];
  891. return false;
  892. }
  893. else {
  894. module.error(error.method, query);
  895. return false;
  896. }
  897. });
  898. }
  899. if ( $.isFunction( found ) ) {
  900. response = found.apply(context, passedArguments);
  901. }
  902. else if(found !== undefined) {
  903. response = found;
  904. }
  905. if($.isArray(returnedValue)) {
  906. returnedValue.push(response);
  907. }
  908. else if(returnedValue !== undefined) {
  909. returnedValue = [returnedValue, response];
  910. }
  911. else if(response !== undefined) {
  912. returnedValue = response;
  913. }
  914. return found;
  915. }
  916. }
  917. ;
  918. if(methodInvoked) {
  919. if(instance === undefined) {
  920. module.initialize();
  921. }
  922. module.invoke(query);
  923. }
  924. else {
  925. if(instance !== undefined) {
  926. module.invoke('destroy');
  927. }
  928. module.initialize();
  929. }
  930. });
  931. return (returnedValue !== undefined)
  932. ? returnedValue
  933. : this
  934. ;
  935. };
  936. $.fn.sidebar.settings = {
  937. name : 'Sidebar',
  938. namespace : 'sidebar',
  939. debug : false,
  940. verbose : true,
  941. performance : true,
  942. transition : 'auto',
  943. mobileTransition : 'auto',
  944. defaultTransition : {
  945. computer: {
  946. left : 'uncover',
  947. right : 'uncover',
  948. top : 'overlay',
  949. bottom : 'overlay'
  950. },
  951. mobile: {
  952. left : 'uncover',
  953. right : 'uncover',
  954. top : 'overlay',
  955. bottom : 'overlay'
  956. }
  957. },
  958. context : 'body',
  959. exclusive : false,
  960. closable : true,
  961. dimPage : true,
  962. scrollLock : false,
  963. returnScroll : false,
  964. delaySetup : false,
  965. useLegacy : 'auto',
  966. duration : 500,
  967. easing : 'easeInOutQuint',
  968. onChange : function(){},
  969. onShow : function(){},
  970. onHide : function(){},
  971. onHidden : function(){},
  972. onVisible : function(){},
  973. className : {
  974. active : 'active',
  975. animating : 'animating',
  976. dimmed : 'dimmed',
  977. ios : 'ios',
  978. pushable : 'pushable',
  979. pushed : 'pushed',
  980. right : 'right',
  981. top : 'top',
  982. left : 'left',
  983. bottom : 'bottom',
  984. visible : 'visible'
  985. },
  986. selector: {
  987. fixed : '.fixed',
  988. omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
  989. pusher : '.pusher',
  990. sidebar : '.ui.sidebar'
  991. },
  992. regExp: {
  993. ios : /(iPad|iPhone|iPod)/g,
  994. mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
  995. },
  996. error : {
  997. method : 'The method you called is not defined.',
  998. pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
  999. movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',
  1000. overlay : 'The overlay setting is no longer supported, use animation: overlay',
  1001. notFound : 'There were no elements that matched the specified selector'
  1002. }
  1003. };
  1004. // Adds easing
  1005. $.extend( $.easing, {
  1006. easeInOutQuint: function (x, t, b, c, d) {
  1007. if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  1008. return c/2*((t-=2)*t*t*t*t + 2) + b;
  1009. }
  1010. });
  1011. })( jQuery, window , document );