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.
106 lines
3.2 KiB
106 lines
3.2 KiB
/**
|
|
* segmented-controllers
|
|
* @param {type} $
|
|
* @param {type} window
|
|
* @param {type} document
|
|
* @param {type} undefined
|
|
* @returns {undefined}
|
|
*/
|
|
(function($, window, document, name, undefined) {
|
|
|
|
var CLASS_CONTROL_ITEM = $.className('control-item');
|
|
var CLASS_SEGMENTED_CONTROL = $.className('segmented-control');
|
|
var CLASS_SEGMENTED_CONTROL_VERTICAL = $.className('segmented-control-vertical');
|
|
var CLASS_CONTROL_CONTENT = $.className('control-content');
|
|
var CLASS_TAB_BAR = $.className('bar-tab');
|
|
var CLASS_TAB_ITEM = $.className('tab-item');
|
|
var CLASS_SLIDER_ITEM = $.className('slider-item');
|
|
|
|
var handle = function(event, target) {
|
|
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
|
|
if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
|
|
//vertical 如果preventDefault会导致无法滚动
|
|
} else {
|
|
event.preventDefault(); //stop hash change
|
|
}
|
|
// if (target.hash) {
|
|
return target;
|
|
// }
|
|
}
|
|
return false;
|
|
};
|
|
|
|
$.registerTarget({
|
|
name: name,
|
|
index: 80,
|
|
handle: handle,
|
|
target: false
|
|
});
|
|
|
|
window.addEventListener('tap', function(e) {
|
|
|
|
var targetTab = $.targets.tab;
|
|
if (!targetTab) {
|
|
return;
|
|
}
|
|
var activeTab;
|
|
var activeBodies;
|
|
var targetBody;
|
|
var className = $.className('active');
|
|
var classSelector = '.' + className;
|
|
var segmentedControl = targetTab.parentNode;
|
|
|
|
for (; segmentedControl && segmentedControl !== document; segmentedControl = segmentedControl.parentNode) {
|
|
if (segmentedControl.classList.contains(CLASS_SEGMENTED_CONTROL)) {
|
|
activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_CONTROL_ITEM);
|
|
break;
|
|
} else if (segmentedControl.classList.contains(CLASS_TAB_BAR)) {
|
|
activeTab = segmentedControl.querySelector(classSelector + '.' + CLASS_TAB_ITEM);
|
|
}
|
|
}
|
|
|
|
if (activeTab) {
|
|
activeTab.classList.remove(className);
|
|
}
|
|
|
|
var isLastActive = targetTab === activeTab;
|
|
if (targetTab) {
|
|
targetTab.classList.add(className);
|
|
}
|
|
|
|
if (!targetTab.hash) {
|
|
return;
|
|
}
|
|
targetBody = document.getElementById(targetTab.hash.replace('#', ''));
|
|
|
|
if (!targetBody) {
|
|
return;
|
|
}
|
|
if (!targetBody.classList.contains(CLASS_CONTROL_CONTENT)) { //tab bar popover
|
|
targetTab.classList[isLastActive ? 'remove' : 'add'](className);
|
|
return;
|
|
}
|
|
if (isLastActive) { //same
|
|
return;
|
|
}
|
|
var parentNode = targetBody.parentNode;
|
|
activeBodies = parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT + classSelector);
|
|
for (var i = 0; i < activeBodies.length; i++) {
|
|
var activeBody = activeBodies[i];
|
|
activeBody.parentNode === parentNode && activeBody.classList.remove(className);
|
|
}
|
|
|
|
targetBody.classList.add(className);
|
|
|
|
var contents = [];
|
|
var _contents = parentNode.querySelectorAll('.' + CLASS_CONTROL_CONTENT);
|
|
for (var i = 0; i < _contents.length; i++) { //查找直属子节点
|
|
_contents[i].parentNode === parentNode && (contents.push(_contents[i]));
|
|
}
|
|
$.trigger(targetBody, $.eventName('shown', name), {
|
|
tabNumber: Array.prototype.indexOf.call(contents, targetBody)
|
|
});
|
|
e.detail && e.detail.gesture.preventDefault(); //fixed hashchange
|
|
});
|
|
|
|
})(mui, window, document, 'tab'); |