segmented-controllers.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /**
  2. * segmented-controllers
  3. * @param {type} $
  4. * @param {type} window
  5. * @param {type} document
  6. * @param {type} undefined
  7. * @returns {undefined}
  8. */
  9. (function($, window, document, name, undefined) {
  10. var CLASS_CONTROL_ITEM = $.className('control-item');
  11. var CLASS_SEGMENTED_CONTROL = $.className('segmented-control');
  12. var CLASS_SEGMENTED_CONTROL_VERTICAL = $.className('segmented-control-vertical');
  13. var CLASS_CONTROL_CONTENT = $.className('control-content');
  14. var CLASS_TAB_BAR = $.className('bar-tab');
  15. var CLASS_TAB_ITEM = $.className('tab-item');
  16. var CLASS_SLIDER_ITEM = $.className('slider-item');
  17. var handle = function(event, target) {
  18. if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
  19. if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
  20. //vertical 如果preventDefault会导致无法滚动
  21. } else {
  22. event.preventDefault(); //stop hash change
  23. }
  24. // if (target.hash) {
  25. return target;
  26. // }
  27. }
  28. return false;
  29. };
  30. $.registerTarget({
  31. name: name,
  32. index: 80,
  33. handle: handle,
  34. target: false
  35. });
  36. window.addEventListener('tap', function(e) {
  37. var targetTab = $.targets.tab;
  38. if (!targetTab) {
  39. return;
  40. }
  41. var activeTab;
  42. var activeBodies;
  43. var targetBody;
  44. var className = $.className('active');
  45. var classSelector = '.' + className;
  46. var segmentedControl = targetTab.parentNode;
  47. for (; segmentedControl && segmentedControl !== document; segmentedControl = segmentedControl.parentNode) {
  48. if (segmentedControl.classList.contains(CLASS_SEGMENTED_CONTROL)) {
  49. activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_CONTROL_ITEM);
  50. break;
  51. } else if (segmentedControl.classList.contains(CLASS_TAB_BAR)) {
  52. activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_TAB_ITEM);
  53. }
  54. }
  55. if (activeTab) {
  56. activeTab.classList.remove(className);
  57. }
  58. var isLastActive = targetTab === activeTab;
  59. if (targetTab) {
  60. targetTab.classList.add(className);
  61. }
  62. if (!targetTab.hash) {
  63. return;
  64. }
  65. targetBody = document.getElementById(targetTab.hash.replace('#', ''));
  66. if (!targetBody) {
  67. return;
  68. }
  69. if (!targetBody.classList.contains(CLASS_CONTROL_CONTENT)) { //tab bar popover
  70. targetTab.classList[isLastActive ? 'remove' : 'add'](className);
  71. return;
  72. }
  73. if (isLastActive) { //same
  74. return;
  75. }
  76. var parentNode = targetBody.parentNode;
  77. activeBodies = parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT + classSelector);
  78. for (var i = 0; i < activeBodies.length; i++) {
  79. var activeBody = activeBodies[i];
  80. activeBody.parentNode === parentNode && activeBody.classList.remove(className);
  81. }
  82. targetBody.classList.add(className);
  83. var contents = [];
  84. var _contents = parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT);
  85. for (var i = 0; i < _contents.length; i++) { //查找直属子节点
  86. _contents[i].parentNode === parentNode && (contents.push(_contents[i]));
  87. }
  88. $.trigger(targetBody, $.eventName('shown', name), {
  89. tabNumber: Array.prototype.indexOf.call(contents, targetBody)
  90. });
  91. e.detail && e.detail.gesture.preventDefault(); //fixed hashchange
  92. });
  93. })(mui, window, document, 'tab');