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.

1120 lines
36 KiB

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