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.

838 lines
26 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic - Dropdown
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. ;(function ( $, window, document, undefined ) {
  12. $.fn.dropdown = function(parameters) {
  13. var
  14. $allModules = $(this),
  15. $document = $(document),
  16. moduleSelector = $allModules.selector || '',
  17. hasTouch = ('ontouchstart' in document.documentElement),
  18. time = new Date().getTime(),
  19. performance = [],
  20. query = arguments[0],
  21. methodInvoked = (typeof query == 'string'),
  22. queryArguments = [].slice.call(arguments, 1),
  23. returnedValue
  24. ;
  25. $allModules
  26. .each(function() {
  27. var
  28. settings = ( $.isPlainObject(parameters) )
  29. ? $.extend(true, {}, $.fn.dropdown.settings, parameters)
  30. : $.extend({}, $.fn.dropdown.settings),
  31. className = settings.className,
  32. metadata = settings.metadata,
  33. namespace = settings.namespace,
  34. selector = settings.selector,
  35. error = settings.error,
  36. eventNamespace = '.' + namespace,
  37. moduleNamespace = 'module-' + namespace,
  38. $module = $(this),
  39. $item = $module.find(selector.item),
  40. $text = $module.find(selector.text),
  41. $input = $module.find(selector.input),
  42. $menu = $module.children(selector.menu),
  43. element = this,
  44. instance = $module.data(moduleNamespace),
  45. module
  46. ;
  47. module = {
  48. initialize: function() {
  49. module.debug('Initializing dropdown', settings);
  50. module.set.selected();
  51. if(hasTouch) {
  52. module.bind.touchEvents();
  53. }
  54. // no use detecting mouse events because touch devices emulate them
  55. module.bind.mouseEvents();
  56. module.instantiate();
  57. },
  58. instantiate: function() {
  59. module.verbose('Storing instance of dropdown', module);
  60. instance = module;
  61. $module
  62. .data(moduleNamespace, module)
  63. ;
  64. },
  65. destroy: function() {
  66. module.verbose('Destroying previous dropdown for', $module);
  67. $item
  68. .off(eventNamespace)
  69. ;
  70. $module
  71. .off(eventNamespace)
  72. .removeData(moduleNamespace)
  73. ;
  74. },
  75. bind: {
  76. touchEvents: function() {
  77. module.debug('Touch device detected binding touch events');
  78. $module
  79. .on('touchstart' + eventNamespace, module.event.test.toggle)
  80. ;
  81. $item
  82. .on('touchstart' + eventNamespace, module.event.item.mouseenter)
  83. .on('touchstart' + eventNamespace, module.event.item.click)
  84. ;
  85. },
  86. mouseEvents: function() {
  87. module.verbose('Mouse detected binding mouse events');
  88. if(settings.on == 'click') {
  89. $module
  90. .on('click' + eventNamespace, module.event.test.toggle)
  91. ;
  92. }
  93. else if(settings.on == 'hover') {
  94. $module
  95. .on('mouseenter' + eventNamespace, module.delay.show)
  96. .on('mouseleave' + eventNamespace, module.delay.hide)
  97. ;
  98. }
  99. else {
  100. $module
  101. .on(settings.on + eventNamespace, module.toggle)
  102. ;
  103. }
  104. $item
  105. .on('mouseenter' + eventNamespace, module.event.item.mouseenter)
  106. .on('mouseleave' + eventNamespace, module.event.item.mouseleave)
  107. .on('click' + eventNamespace, module.event.item.click)
  108. ;
  109. },
  110. intent: function() {
  111. module.verbose('Binding hide intent event to document');
  112. if(hasTouch) {
  113. $document
  114. .on('touchstart' + eventNamespace, module.event.test.touch)
  115. .on('touchmove' + eventNamespace, module.event.test.touch)
  116. ;
  117. }
  118. $document
  119. .on('click' + eventNamespace, module.event.test.hide)
  120. ;
  121. }
  122. },
  123. unbind: {
  124. intent: function() {
  125. module.verbose('Removing hide intent event from document');
  126. if(hasTouch) {
  127. $document
  128. .off('touchstart' + eventNamespace)
  129. ;
  130. }
  131. $document
  132. .off('click' + eventNamespace)
  133. ;
  134. }
  135. },
  136. event: {
  137. test: {
  138. toggle: function(event) {
  139. if( module.determine.intent(event, module.toggle) ) {
  140. event.preventDefault();
  141. }
  142. },
  143. touch: function(event) {
  144. module.determine.intent(event, function() {
  145. if(event.type == 'touchstart') {
  146. module.timer = setTimeout(module.hide, settings.delay.touch);
  147. }
  148. else if(event.type == 'touchmove') {
  149. clearTimeout(module.timer);
  150. }
  151. });
  152. event.stopPropagation();
  153. },
  154. hide: function(event) {
  155. module.determine.intent(event, module.hide);
  156. }
  157. },
  158. item: {
  159. mouseenter: function(event) {
  160. var
  161. $currentMenu = $(this).find(selector.menu),
  162. $otherMenus = $(this).siblings(selector.item).children(selector.menu)
  163. ;
  164. if( $currentMenu.size() > 0 ) {
  165. clearTimeout(module.itemTimer);
  166. module.itemTimer = setTimeout(function() {
  167. module.animate.hide(false, $otherMenus);
  168. module.verbose('Showing sub-menu', $currentMenu);
  169. module.animate.show(false, $currentMenu);
  170. }, settings.delay.show * 2);
  171. event.preventDefault();
  172. }
  173. },
  174. mouseleave: function(event) {
  175. var
  176. $currentMenu = $(this).find(selector.menu)
  177. ;
  178. if($currentMenu.size() > 0) {
  179. clearTimeout(module.itemTimer);
  180. module.itemTimer = setTimeout(function() {
  181. module.verbose('Hiding sub-menu', $currentMenu);
  182. module.animate.hide(false, $currentMenu);
  183. }, settings.delay.hide);
  184. }
  185. },
  186. click: function (event) {
  187. var
  188. $choice = $(this),
  189. text = ( $choice.data(metadata.text) !== undefined )
  190. ? $choice.data(metadata.text)
  191. : $choice.text(),
  192. value = ( $choice.data(metadata.value) !== undefined)
  193. ? $choice.data(metadata.value)
  194. : text.toLowerCase()
  195. ;
  196. if( $choice.find(selector.menu).size() === 0 ) {
  197. module.determine.selectAction(text, value);
  198. $.proxy(settings.onChange, element)(value, text);
  199. }
  200. }
  201. },
  202. resetStyle: function() {
  203. $(this).removeAttr('style');
  204. }
  205. },
  206. determine: {
  207. selectAction: function(text, value) {
  208. module.verbose('Determining action', settings.action);
  209. if( $.isFunction( module.action[settings.action] ) ) {
  210. module.verbose('Triggering preset action', settings.action, text, value);
  211. module.action[ settings.action ](text, value);
  212. }
  213. else if( $.isFunction(settings.action) ) {
  214. module.verbose('Triggering user action', settings.action, text, value);
  215. settings.action(text, value);
  216. }
  217. else {
  218. module.error(error.action, settings.action);
  219. }
  220. },
  221. intent: function(event, callback) {
  222. module.debug('Determining whether event occurred in dropdown', event.target);
  223. callback = callback || function(){};
  224. if( $(event.target).closest($menu).size() === 0 ) {
  225. module.verbose('Triggering event', callback);
  226. callback();
  227. return true;
  228. }
  229. else {
  230. module.verbose('Event occurred in dropdown, canceling callback');
  231. return false;
  232. }
  233. }
  234. },
  235. action: {
  236. nothing: function() {},
  237. hide: function() {
  238. module.hide();
  239. },
  240. activate: function(text, value) {
  241. value = (value !== undefined)
  242. ? value
  243. : text
  244. ;
  245. module.set.selected(value);
  246. module.set.value(value);
  247. module.hide();
  248. },
  249. /* Deprecated */
  250. auto: function(text, value) {
  251. value = (value !== undefined)
  252. ? value
  253. : text
  254. ;
  255. module.set.selected(value);
  256. module.set.value(value);
  257. module.hide();
  258. },
  259. /* Deprecated */
  260. changeText: function(text, value) {
  261. value = (value !== undefined)
  262. ? value
  263. : text
  264. ;
  265. module.set.selected(value);
  266. module.hide();
  267. },
  268. /* Deprecated */
  269. updateForm: function(text, value) {
  270. value = (value !== undefined)
  271. ? value
  272. : text
  273. ;
  274. module.set.selected(value);
  275. module.set.value(value);
  276. module.hide();
  277. }
  278. },
  279. get: {
  280. text: function() {
  281. return $text.text();
  282. },
  283. value: function() {
  284. return ($input.size() > 0)
  285. ? $input.val()
  286. : $module.data(metadata.value)
  287. ;
  288. },
  289. item: function(value) {
  290. var
  291. $selectedItem
  292. ;
  293. value = (value !== undefined)
  294. ? value
  295. : ( module.get.value() !== undefined)
  296. ? module.get.value()
  297. : module.get.text()
  298. ;
  299. if(value !== undefined) {
  300. $item
  301. .each(function() {
  302. var
  303. $choice = $(this),
  304. optionText = ( $choice.data(metadata.text) !== undefined )
  305. ? $choice.data(metadata.text)
  306. : $choice.text(),
  307. optionValue = ( $choice.data(metadata.value) !== undefined )
  308. ? $choice.data(metadata.value)
  309. : optionText.toLowerCase()
  310. ;
  311. if( optionValue == value || optionText == value ) {
  312. $selectedItem = $(this);
  313. return false;
  314. }
  315. })
  316. ;
  317. }
  318. else {
  319. value = module.get.text();
  320. }
  321. return $selectedItem || false;
  322. }
  323. },
  324. set: {
  325. text: function(text) {
  326. module.debug('Changing text', text, $text);
  327. $text.removeClass(className.placeholder);
  328. $text.text(text);
  329. },
  330. value: function(value) {
  331. module.debug('Adding selected value to hidden input', value, $input);
  332. if($input.size() > 0) {
  333. $input.val(value);
  334. }
  335. else {
  336. $module.data(metadata.value, value);
  337. }
  338. },
  339. active: function() {
  340. $module.addClass(className.active);
  341. },
  342. visible: function() {
  343. $module.addClass(className.visible);
  344. },
  345. selected: function(value) {
  346. var
  347. $selectedItem = module.get.item(value),
  348. selectedText
  349. ;
  350. if($selectedItem) {
  351. module.debug('Setting selected menu item to', $selectedItem);
  352. selectedText = ($selectedItem.data(metadata.text) !== undefined)
  353. ? $selectedItem.data(metadata.text)
  354. : $selectedItem.text()
  355. ;
  356. $item
  357. .removeClass(className.active)
  358. ;
  359. $selectedItem
  360. .addClass(className.active)
  361. ;
  362. module.set.text(selectedText);
  363. }
  364. }
  365. },
  366. remove: {
  367. active: function() {
  368. $module.removeClass(className.active);
  369. },
  370. visible: function() {
  371. $module.removeClass(className.visible);
  372. }
  373. },
  374. is: {
  375. selection: function() {
  376. return $module.hasClass(className.selection);
  377. },
  378. animated: function($subMenu) {
  379. return ($subMenu)
  380. ? $subMenu.is(':animated') || $subMenu.transition('is animating')
  381. : $menu.is(':animated') || $menu.transition('is animating')
  382. ;
  383. },
  384. visible: function($subMenu) {
  385. return ($subMenu)
  386. ? $subMenu.is(':visible')
  387. : $menu.is(':visible')
  388. ;
  389. },
  390. hidden: function($subMenu) {
  391. return ($subMenu)
  392. ? $subMenu.is(':not(:visible)')
  393. : $menu.is(':not(:visible)')
  394. ;
  395. }
  396. },
  397. can: {
  398. click: function() {
  399. return (hasTouch || settings.on == 'click');
  400. },
  401. show: function() {
  402. return !$module.hasClass(className.disabled);
  403. }
  404. },
  405. animate: {
  406. show: function(callback, $subMenu) {
  407. var
  408. $currentMenu = $subMenu || $menu
  409. ;
  410. callback = callback || function(){};
  411. if( module.is.hidden($currentMenu) ) {
  412. module.verbose('Doing menu show animation', $currentMenu);
  413. if(settings.transition == 'none') {
  414. callback();
  415. }
  416. else if($.fn.transition !== undefined && $module.transition('is supported')) {
  417. $currentMenu.transition({
  418. animation : settings.transition + ' in',
  419. duration : settings.duration,
  420. complete : callback,
  421. queue : false
  422. });
  423. }
  424. else if(settings.transition == 'slide down') {
  425. $currentMenu
  426. .hide()
  427. .clearQueue()
  428. .children()
  429. .clearQueue()
  430. .css('opacity', 0)
  431. .delay(50)
  432. .animate({
  433. opacity : 1
  434. }, settings.duration, 'easeOutQuad', module.event.resetStyle)
  435. .end()
  436. .slideDown(100, 'easeOutQuad', function() {
  437. $.proxy(module.event.resetStyle, this)();
  438. callback();
  439. })
  440. ;
  441. }
  442. else if(settings.transition == 'fade') {
  443. $currentMenu
  444. .hide()
  445. .clearQueue()
  446. .fadeIn(settings.duration, function() {
  447. $.proxy(module.event.resetStyle, this)();
  448. callback();
  449. })
  450. ;
  451. }
  452. else {
  453. module.error(error.transition, settings.transition);
  454. }
  455. }
  456. },
  457. hide: function(callback, $subMenu) {
  458. var
  459. $currentMenu = $subMenu || $menu
  460. ;
  461. callback = callback || function(){};
  462. if(module.is.visible($currentMenu) ) {
  463. module.verbose('Doing menu hide animation', $currentMenu);
  464. if($.fn.transition !== undefined && $module.transition('is supported')) {
  465. $currentMenu.transition({
  466. animation : settings.transition + ' out',
  467. duration : settings.duration,
  468. complete : callback,
  469. queue : false
  470. });
  471. }
  472. else if(settings.transition == 'none') {
  473. callback();
  474. }
  475. else if(settings.transition == 'slide down') {
  476. $currentMenu
  477. .show()
  478. .clearQueue()
  479. .children()
  480. .clearQueue()
  481. .css('opacity', 1)
  482. .animate({
  483. opacity : 0
  484. }, 100, 'easeOutQuad', module.event.resetStyle)
  485. .end()
  486. .delay(50)
  487. .slideUp(100, 'easeOutQuad', function() {
  488. $.proxy(module.event.resetStyle, this)();
  489. callback();
  490. })
  491. ;
  492. }
  493. else if(settings.transition == 'fade') {
  494. $currentMenu
  495. .show()
  496. .clearQueue()
  497. .fadeOut(150, function() {
  498. $.proxy(module.event.resetStyle, this)();
  499. callback();
  500. })
  501. ;
  502. }
  503. else {
  504. module.error(error.transition);
  505. }
  506. }
  507. }
  508. },
  509. show: function() {
  510. module.debug('Checking if dropdown can show');
  511. if( module.is.hidden() ) {
  512. module.hideOthers();
  513. module.set.active();
  514. module.animate.show(function() {
  515. if( module.can.click() ) {
  516. module.bind.intent();
  517. }
  518. module.set.visible();
  519. });
  520. $.proxy(settings.onShow, element)();
  521. }
  522. },
  523. hide: function() {
  524. if( !module.is.animated() && module.is.visible() ) {
  525. module.debug('Hiding dropdown');
  526. if( module.can.click() ) {
  527. module.unbind.intent();
  528. }
  529. module.remove.active();
  530. module.animate.hide(module.remove.visible);
  531. $.proxy(settings.onHide, element)();
  532. }
  533. },
  534. delay: {
  535. show: function() {
  536. module.verbose('Delaying show event to ensure user intent');
  537. clearTimeout(module.timer);
  538. module.timer = setTimeout(module.show, settings.delay.show);
  539. },
  540. hide: function() {
  541. module.verbose('Delaying hide event to ensure user intent');
  542. clearTimeout(module.timer);
  543. module.timer = setTimeout(module.hide, settings.delay.hide);
  544. }
  545. },
  546. hideOthers: function() {
  547. module.verbose('Finding other dropdowns to hide');
  548. $allModules
  549. .not($module)
  550. .has(selector.menu + ':visible')
  551. .dropdown('hide')
  552. ;
  553. },
  554. toggle: function() {
  555. module.verbose('Toggling menu visibility');
  556. if( module.is.hidden() ) {
  557. module.show();
  558. }
  559. else {
  560. module.hide();
  561. }
  562. },
  563. setting: function(name, value) {
  564. if( $.isPlainObject(name) ) {
  565. $.extend(true, settings, name);
  566. }
  567. else if(value !== undefined) {
  568. settings[name] = value;
  569. }
  570. else {
  571. return settings[name];
  572. }
  573. },
  574. internal: function(name, value) {
  575. if( $.isPlainObject(name) ) {
  576. $.extend(true, module, name);
  577. }
  578. else if(value !== undefined) {
  579. module[name] = value;
  580. }
  581. else {
  582. return module[name];
  583. }
  584. },
  585. debug: function() {
  586. if(settings.debug) {
  587. if(settings.performance) {
  588. module.performance.log(arguments);
  589. }
  590. else {
  591. module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
  592. module.debug.apply(console, arguments);
  593. }
  594. }
  595. },
  596. verbose: function() {
  597. if(settings.verbose && settings.debug) {
  598. if(settings.performance) {
  599. module.performance.log(arguments);
  600. }
  601. else {
  602. module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
  603. module.verbose.apply(console, arguments);
  604. }
  605. }
  606. },
  607. error: function() {
  608. module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
  609. module.error.apply(console, arguments);
  610. },
  611. performance: {
  612. log: function(message) {
  613. var
  614. currentTime,
  615. executionTime,
  616. previousTime
  617. ;
  618. if(settings.performance) {
  619. currentTime = new Date().getTime();
  620. previousTime = time || currentTime;
  621. executionTime = currentTime - previousTime;
  622. time = currentTime;
  623. performance.push({
  624. 'Element' : element,
  625. 'Name' : message[0],
  626. 'Arguments' : [].slice.call(message, 1) || '',
  627. 'Execution Time' : executionTime
  628. });
  629. }
  630. clearTimeout(module.performance.timer);
  631. module.performance.timer = setTimeout(module.performance.display, 100);
  632. },
  633. display: function() {
  634. var
  635. title = settings.name + ':',
  636. totalTime = 0
  637. ;
  638. time = false;
  639. clearTimeout(module.performance.timer);
  640. $.each(performance, function(index, data) {
  641. totalTime += data['Execution Time'];
  642. });
  643. title += ' ' + totalTime + 'ms';
  644. if(moduleSelector) {
  645. title += ' \'' + moduleSelector + '\'';
  646. }
  647. if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
  648. console.groupCollapsed(title);
  649. if(console.table) {
  650. console.table(performance);
  651. }
  652. else {
  653. $.each(performance, function(index, data) {
  654. console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
  655. });
  656. }
  657. console.groupEnd();
  658. }
  659. performance = [];
  660. }
  661. },
  662. invoke: function(query, passedArguments, context) {
  663. var
  664. maxDepth,
  665. found,
  666. response
  667. ;
  668. passedArguments = passedArguments || queryArguments;
  669. context = element || context;
  670. if(typeof query == 'string' && instance !== undefined) {
  671. query = query.split(/[\. ]/);
  672. maxDepth = query.length - 1;
  673. $.each(query, function(depth, value) {
  674. var camelCaseValue = (depth != maxDepth)
  675. ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
  676. : query
  677. ;
  678. if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
  679. instance = instance[camelCaseValue];
  680. }
  681. else if( instance[camelCaseValue] !== undefined ) {
  682. found = instance[camelCaseValue];
  683. return false;
  684. }
  685. else if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
  686. instance = instance[value];
  687. }
  688. else if( instance[value] !== undefined ) {
  689. found = instance[value];
  690. return false;
  691. }
  692. else {
  693. module.error(error.method, query);
  694. return false;
  695. }
  696. });
  697. }
  698. if ( $.isFunction( found ) ) {
  699. response = found.apply(context, passedArguments);
  700. }
  701. else if(found !== undefined) {
  702. response = found;
  703. }
  704. if($.isArray(returnedValue)) {
  705. returnedValue.push(response);
  706. }
  707. else if(returnedValue !== undefined) {
  708. returnedValue = [returnedValue, response];
  709. }
  710. else if(response !== undefined) {
  711. returnedValue = response;
  712. }
  713. return found;
  714. }
  715. };
  716. if(methodInvoked) {
  717. if(instance === undefined) {
  718. module.initialize();
  719. }
  720. module.invoke(query);
  721. }
  722. else {
  723. if(instance !== undefined) {
  724. module.destroy();
  725. }
  726. module.initialize();
  727. }
  728. })
  729. ;
  730. return (returnedValue)
  731. ? returnedValue
  732. : this
  733. ;
  734. };
  735. $.fn.dropdown.settings = {
  736. name : 'Dropdown',
  737. namespace : 'dropdown',
  738. verbose : true,
  739. debug : true,
  740. performance : true,
  741. on : 'click',
  742. action : 'activate',
  743. delay: {
  744. show : 200,
  745. hide : 300,
  746. touch : 50
  747. },
  748. transition : 'slide down',
  749. duration : 250,
  750. onChange : function(value, text){},
  751. onShow : function(){},
  752. onHide : function(){},
  753. error : {
  754. action : 'You called a dropdown action that was not defined',
  755. method : 'The method you called is not defined.',
  756. transition : 'The requested transition was not found'
  757. },
  758. metadata: {
  759. text : 'text',
  760. value : 'value'
  761. },
  762. selector : {
  763. menu : '.menu',
  764. item : '.menu > .item',
  765. text : '> .text',
  766. input : '> input[type="hidden"]'
  767. },
  768. className : {
  769. active : 'active',
  770. placeholder : 'default',
  771. disabled : 'disabled',
  772. visible : 'visible',
  773. selection : 'selection'
  774. }
  775. };
  776. })( jQuery, window , document );