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.

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