|
|
/*eslint-disable*/
|
|
|
var $ = require('yoho-jquery');
|
|
|
(function ($, undefined) {
|
|
|
var prefix = '', eventPrefix,
|
|
|
vendors = {Webkit: 'webkit', Moz: '', O: 'o'},
|
|
|
testEl = document.createElement('div'),
|
|
|
supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
|
|
|
transform,
|
|
|
transitionProperty, transitionDuration, transitionTiming, transitionDelay,
|
|
|
animationName, animationDuration, animationTiming, animationDelay,
|
|
|
cssReset = {};
|
|
|
|
|
|
function dasherize(str) {
|
|
|
return str.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase();
|
|
|
var tip = require('../plugin/tip');
|
|
|
(function($, undefined) {
|
|
|
var prefix = '',
|
|
|
eventPrefix,
|
|
|
vendors = {
|
|
|
Webkit: 'webkit',
|
|
|
Moz: '',
|
|
|
O: 'o'
|
|
|
},
|
|
|
testEl = document.createElement('div'),
|
|
|
supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
|
|
|
transform,
|
|
|
transitionProperty,
|
|
|
transitionDuration,
|
|
|
transitionTiming,
|
|
|
transitionDelay,
|
|
|
animationName,
|
|
|
animationDuration,
|
|
|
animationTiming,
|
|
|
animationDelay,
|
|
|
cssReset = {};
|
|
|
|
|
|
function dasherize(str) {
|
|
|
return str.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase();
|
|
|
}
|
|
|
|
|
|
function normalizeEvent(name) {
|
|
|
return eventPrefix ? eventPrefix + name : name.toLowerCase();
|
|
|
}
|
|
|
|
|
|
$.each(vendors, function(vendor, event) {
|
|
|
if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
|
|
|
prefix = '-' + vendor.toLowerCase() + '-';
|
|
|
eventPrefix = event;
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
function normalizeEvent(name) {
|
|
|
return eventPrefix ? eventPrefix + name : name.toLowerCase();
|
|
|
});
|
|
|
|
|
|
transform = prefix + 'transform';
|
|
|
cssReset[transitionProperty = prefix + 'transition-property'] = cssReset[transitionDuration = prefix + 'transition-duration'] = cssReset[transitionDelay = prefix + 'transition-delay'] = cssReset[transitionTiming = prefix + 'transition-timing-function'] = cssReset[animationName = prefix + 'animation-name'] = cssReset[animationDuration = prefix + 'animation-duration'] = cssReset[animationDelay = prefix + 'animation-delay'] = cssReset[animationTiming = prefix + 'animation-timing-function'] = '';
|
|
|
|
|
|
$.fx = {
|
|
|
off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
|
|
|
speeds: {
|
|
|
_default: 400,
|
|
|
fast: 200,
|
|
|
slow: 600
|
|
|
},
|
|
|
cssPrefix: prefix,
|
|
|
transitionEnd: normalizeEvent('TransitionEnd'),
|
|
|
animationEnd: normalizeEvent('AnimationEnd')
|
|
|
};
|
|
|
|
|
|
$.fn.animate = function(properties, duration, ease, callback, delay) {
|
|
|
if ($.isFunction(duration))
|
|
|
callback = duration, ease = undefined, duration = undefined;
|
|
|
if ($.isFunction(ease))
|
|
|
callback = ease, ease = undefined;
|
|
|
if ($.isPlainObject(duration))
|
|
|
ease = duration.easing, callback = duration.complete, delay = duration.delay, duration = duration.duration;
|
|
|
if (duration)
|
|
|
duration = (typeof duration == 'number' ? duration :
|
|
|
($.fx.speeds[duration] || $.fx.speeds._default)) / 1000;
|
|
|
if (delay)
|
|
|
delay = parseFloat(delay) / 1000;
|
|
|
return this.anim(properties, duration, ease, callback, delay);
|
|
|
};
|
|
|
|
|
|
$.fn.anim = function(properties, duration, ease, callback, delay) {
|
|
|
var key,
|
|
|
cssValues = {},
|
|
|
cssProperties,
|
|
|
transforms = '',
|
|
|
that = this,
|
|
|
wrappedCallback,
|
|
|
endEvent = $.fx.transitionEnd,
|
|
|
fired = false;
|
|
|
|
|
|
if (duration === undefined)
|
|
|
duration = $.fx.speeds._default / 1000;
|
|
|
if (delay === undefined)
|
|
|
delay = 0;
|
|
|
if ($.fx.off)
|
|
|
duration = 0;
|
|
|
|
|
|
if (typeof properties == 'string') {
|
|
|
// keyframe animation
|
|
|
cssValues[animationName] = properties;
|
|
|
cssValues[animationDuration] = duration + 's';
|
|
|
cssValues[animationDelay] = delay + 's';
|
|
|
cssValues[animationTiming] = (ease || 'linear');
|
|
|
endEvent = $.fx.animationEnd;
|
|
|
} else {
|
|
|
cssProperties = [];
|
|
|
|
|
|
// CSS transitions
|
|
|
for (key in properties)
|
|
|
if (supportedTransforms.test(key))
|
|
|
transforms += key + '(' + properties[key] + ') ';
|
|
|
else cssValues[key] = properties[key], cssProperties.push(dasherize(key));
|
|
|
|
|
|
if (transforms) cssValues[transform] = transforms, cssProperties.push(transform);
|
|
|
if (duration > 0 && typeof properties === 'object') {
|
|
|
cssValues[transitionProperty] = cssProperties.join(', ');
|
|
|
cssValues[transitionDuration] = duration + 's';
|
|
|
cssValues[transitionDelay] = delay + 's';
|
|
|
cssValues[transitionTiming] = (ease || 'linear');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
$.each(vendors, function (vendor, event) {
|
|
|
if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
|
|
|
prefix = '-' + vendor.toLowerCase() + '-';
|
|
|
eventPrefix = event;
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
wrappedCallback = function(event) {
|
|
|
if (typeof event !== 'undefined') {
|
|
|
if (event.target !== event.currentTarget) return; // makes sure the event didn't bubble from "below"
|
|
|
$(event.target).unbind(endEvent, wrappedCallback);
|
|
|
} else
|
|
|
$(this).unbind(endEvent, wrappedCallback); // triggered by setTimeout
|
|
|
|
|
|
transform = prefix + 'transform';
|
|
|
cssReset[transitionProperty = prefix + 'transition-property'] =
|
|
|
cssReset[transitionDuration = prefix + 'transition-duration'] =
|
|
|
cssReset[transitionDelay = prefix + 'transition-delay'] =
|
|
|
cssReset[transitionTiming = prefix + 'transition-timing-function'] =
|
|
|
cssReset[animationName = prefix + 'animation-name'] =
|
|
|
cssReset[animationDuration = prefix + 'animation-duration'] =
|
|
|
cssReset[animationDelay = prefix + 'animation-delay'] =
|
|
|
cssReset[animationTiming = prefix + 'animation-timing-function'] = '';
|
|
|
|
|
|
$.fx = {
|
|
|
off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
|
|
|
speeds: {_default: 400, fast: 200, slow: 600},
|
|
|
cssPrefix: prefix,
|
|
|
transitionEnd: normalizeEvent('TransitionEnd'),
|
|
|
animationEnd: normalizeEvent('AnimationEnd')
|
|
|
fired = true;
|
|
|
$(this).css(cssReset);
|
|
|
callback && callback.call(this);
|
|
|
};
|
|
|
|
|
|
$.fn.animate = function (properties, duration, ease, callback, delay) {
|
|
|
if ($.isFunction(duration))
|
|
|
callback = duration, ease = undefined, duration = undefined;
|
|
|
if ($.isFunction(ease))
|
|
|
callback = ease, ease = undefined;
|
|
|
if ($.isPlainObject(duration))
|
|
|
ease = duration.easing, callback = duration.complete, delay = duration.delay, duration = duration.duration;
|
|
|
if (duration) duration = (typeof duration == 'number' ? duration :
|
|
|
($.fx.speeds[duration] || $.fx.speeds._default)) / 1000;
|
|
|
if (delay) delay = parseFloat(delay) / 1000;
|
|
|
return this.anim(properties, duration, ease, callback, delay);
|
|
|
};
|
|
|
|
|
|
$.fn.anim = function (properties, duration, ease, callback, delay) {
|
|
|
var key, cssValues = {}, cssProperties, transforms = '',
|
|
|
that = this, wrappedCallback, endEvent = $.fx.transitionEnd,
|
|
|
fired = false;
|
|
|
|
|
|
if (duration === undefined) duration = $.fx.speeds._default / 1000;
|
|
|
if (delay === undefined) delay = 0;
|
|
|
if ($.fx.off) duration = 0;
|
|
|
|
|
|
if (typeof properties == 'string') {
|
|
|
// keyframe animation
|
|
|
cssValues[animationName] = properties;
|
|
|
cssValues[animationDuration] = duration + 's';
|
|
|
cssValues[animationDelay] = delay + 's';
|
|
|
cssValues[animationTiming] = (ease || 'linear');
|
|
|
endEvent = $.fx.animationEnd;
|
|
|
} else {
|
|
|
cssProperties = [];
|
|
|
|
|
|
// CSS transitions
|
|
|
for (key in properties)
|
|
|
if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') ';
|
|
|
else cssValues[key] = properties[key], cssProperties.push(dasherize(key));
|
|
|
|
|
|
if (transforms) cssValues[transform] = transforms, cssProperties.push(transform);
|
|
|
if (duration > 0 && typeof properties === 'object') {
|
|
|
cssValues[transitionProperty] = cssProperties.join(', ');
|
|
|
cssValues[transitionDuration] = duration + 's';
|
|
|
cssValues[transitionDelay] = delay + 's';
|
|
|
cssValues[transitionTiming] = (ease || 'linear');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
wrappedCallback = function (event) {
|
|
|
if (typeof event !== 'undefined') {
|
|
|
if (event.target !== event.currentTarget) return; // makes sure the event didn't bubble from "below"
|
|
|
$(event.target).unbind(endEvent, wrappedCallback);
|
|
|
} else
|
|
|
$(this).unbind(endEvent, wrappedCallback); // triggered by setTimeout
|
|
|
|
|
|
fired = true;
|
|
|
$(this).css(cssReset);
|
|
|
callback && callback.call(this);
|
|
|
};
|
|
|
if (duration > 0) {
|
|
|
this.bind(endEvent, wrappedCallback);
|
|
|
|
|
|
// transitionEnd is not always firing on older Android phones
|
|
|
// so make sure it gets fired
|
|
|
setTimeout(function () {
|
|
|
if (fired) return;
|
|
|
wrappedCallback.call(that);
|
|
|
}, ((duration + delay) * 1000) + 25);
|
|
|
}
|
|
|
|
|
|
// trigger page reflow so new elements can animate
|
|
|
this.size() && this.get(0).clientLeft;
|
|
|
|
|
|
this.css(cssValues);
|
|
|
|
|
|
if (duration <= 0) setTimeout(function () {
|
|
|
that.each(function () {
|
|
|
wrappedCallback.call(this);
|
|
|
});
|
|
|
}, 0);
|
|
|
|
|
|
return this;
|
|
|
};
|
|
|
|
|
|
testEl = null;
|
|
|
})($)
|
|
|
;
|
|
|
(function ($, undefined) {
|
|
|
var document = window.document, docElem = document.documentElement,
|
|
|
origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle;
|
|
|
|
|
|
function anim(el, speed, opacity, scale, callback) {
|
|
|
if (typeof speed == 'function' && !callback) callback = speed, speed = undefined;
|
|
|
var props = {opacity: opacity};
|
|
|
if (scale) {
|
|
|
props.scale = scale;
|
|
|
el.css($.fx.cssPrefix + 'transform-origin', '0 0');
|
|
|
}
|
|
|
return el.animate(props, speed, null, callback);
|
|
|
if (duration > 0) {
|
|
|
this.bind(endEvent, wrappedCallback);
|
|
|
|
|
|
// transitionEnd is not always firing on older Android phones
|
|
|
// so make sure it gets fired
|
|
|
setTimeout(function() {
|
|
|
if (fired) return;
|
|
|
wrappedCallback.call(that);
|
|
|
}, ((duration + delay) * 1000) + 25);
|
|
|
}
|
|
|
|
|
|
function hide(el, speed, scale, callback) {
|
|
|
return anim(el, speed, 0, scale, function () {
|
|
|
origHide.call($(this));
|
|
|
callback && callback.call(this);
|
|
|
});
|
|
|
}
|
|
|
// trigger page reflow so new elements can animate
|
|
|
this.size() && this.get(0).clientLeft;
|
|
|
|
|
|
$.fn.show = function (speed, callback) {
|
|
|
origShow.call(this);
|
|
|
if (speed === undefined) speed = 0;
|
|
|
else this.css('opacity', 0);
|
|
|
return anim(this, speed, 1, '1,1', callback);
|
|
|
};
|
|
|
this.css(cssValues);
|
|
|
|
|
|
$.fn.hide = function (speed, callback) {
|
|
|
if (speed === undefined) return origHide.call(this);
|
|
|
else return hide(this, speed, '0,0', callback);
|
|
|
};
|
|
|
|
|
|
$.fn.toggle = function (speed, callback) {
|
|
|
if (speed === undefined || typeof speed == 'boolean')
|
|
|
return origToggle.call(this, speed);
|
|
|
else return this.each(function () {
|
|
|
var el = $(this);
|
|
|
el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback);
|
|
|
if (duration <= 0) setTimeout(function() {
|
|
|
that.each(function() {
|
|
|
wrappedCallback.call(this);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
$.fn.fadeTo = function (speed, opacity, callback) {
|
|
|
return anim(this, speed, opacity, null, callback);
|
|
|
};
|
|
|
}, 0);
|
|
|
|
|
|
$.fn.fadeIn = function (speed, callback) {
|
|
|
var target = this.css('opacity');
|
|
|
if (target > 0) this.css('opacity', 0);
|
|
|
else target = 1;
|
|
|
return origShow.call(this).fadeTo(speed, target, callback);
|
|
|
};
|
|
|
return this;
|
|
|
};
|
|
|
|
|
|
$.fn.fadeOut = function (speed, callback) {
|
|
|
return hide(this, speed, null, callback);
|
|
|
testEl = null;
|
|
|
})($)
|
|
|
;
|
|
|
(function($, undefined) {
|
|
|
var document = window.document,
|
|
|
docElem = document.documentElement,
|
|
|
origShow = $.fn.show,
|
|
|
origHide = $.fn.hide,
|
|
|
origToggle = $.fn.toggle;
|
|
|
|
|
|
function anim(el, speed, opacity, scale, callback) {
|
|
|
if (typeof speed == 'function' && !callback) callback = speed, speed = undefined;
|
|
|
var props = {
|
|
|
opacity: opacity
|
|
|
};
|
|
|
if (scale) {
|
|
|
props.scale = scale;
|
|
|
el.css($.fx.cssPrefix + 'transform-origin', '0 0');
|
|
|
}
|
|
|
return el.animate(props, speed, null, callback);
|
|
|
}
|
|
|
|
|
|
$.fn.fadeToggle = function (speed, callback) {
|
|
|
return this.each(function () {
|
|
|
var el = $(this);
|
|
|
el[
|
|
|
(el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
|
|
|
](speed, callback);
|
|
|
});
|
|
|
};
|
|
|
function hide(el, speed, scale, callback) {
|
|
|
return anim(el, speed, 0, scale, function() {
|
|
|
origHide.call($(this));
|
|
|
callback && callback.call(this);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
$.fn.show = function(speed, callback) {
|
|
|
origShow.call(this);
|
|
|
if (speed === undefined)
|
|
|
speed = 0;
|
|
|
else this.css('opacity', 0);
|
|
|
return anim(this, speed, 1, '1,1', callback);
|
|
|
};
|
|
|
|
|
|
$.fn.hide = function(speed, callback) {
|
|
|
if (speed === undefined) return origHide.call(this);
|
|
|
else return hide(this, speed, '0,0', callback);
|
|
|
};
|
|
|
|
|
|
$.fn.toggle = function(speed, callback) {
|
|
|
if (speed === undefined || typeof speed == 'boolean')
|
|
|
return origToggle.call(this, speed);
|
|
|
else return this.each(function() {
|
|
|
var el = $(this);
|
|
|
el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
$.fn.fadeTo = function(speed, opacity, callback) {
|
|
|
return anim(this, speed, opacity, null, callback);
|
|
|
};
|
|
|
|
|
|
$.fn.fadeIn = function(speed, callback) {
|
|
|
var target = this.css('opacity');
|
|
|
if (target > 0) this.css('opacity', 0);
|
|
|
else
|
|
|
target = 1;
|
|
|
return origShow.call(this).fadeTo(speed, target, callback);
|
|
|
};
|
|
|
|
|
|
$.fn.fadeOut = function(speed, callback) {
|
|
|
return hide(this, speed, null, callback);
|
|
|
};
|
|
|
|
|
|
$.fn.fadeToggle = function(speed, callback) {
|
|
|
return this.each(function() {
|
|
|
var el = $(this);
|
|
|
el[
|
|
|
(el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
|
|
|
](speed, callback);
|
|
|
});
|
|
|
};
|
|
|
})($)
|
|
|
|
|
|
;
|
|
|
(function ($, undefined) {
|
|
|
Array.prototype.find = function (item) {
|
|
|
for (var i = 0; i < this.length; i++) {
|
|
|
if (this[i] === item) {
|
|
|
return this[i];
|
|
|
}
|
|
|
}
|
|
|
return null;
|
|
|
};
|
|
|
var uc = false;
|
|
|
if (window.navigator.userAgent.match(/(UCBrowser|UCWeb)/i))
|
|
|
uc = true;
|
|
|
var AsideSlider = function () {
|
|
|
this.visibleStack = [];
|
|
|
this.bindArray = [];
|
|
|
this.lastY = 0;
|
|
|
this.y = 0;
|
|
|
|
|
|
this.bind();
|
|
|
};
|
|
|
AsideSlider.prototype._findEntry = function (item) {
|
|
|
for (var i = 0; i < this.bindArray.length; i++) {
|
|
|
if (this.bindArray[i].initialator === item && $(this.bindArray[i].slider).length > 0) {
|
|
|
return true;
|
|
|
Array.prototype.find = function(item) {
|
|
|
for (var i = 0; i < this.length; i++) {
|
|
|
if (this[i] === item) {
|
|
|
return this[i];
|
|
|
}
|
|
|
}
|
|
|
return null;
|
|
|
};
|
|
|
var uc = false;
|
|
|
if (window.navigator.userAgent.match(/(UCBrowser|UCWeb)/i))
|
|
|
uc = true;
|
|
|
var AsideSlider = function() {
|
|
|
this.visibleStack = [];
|
|
|
this.bindArray = [];
|
|
|
this.lastY = 0;
|
|
|
this.y = 0;
|
|
|
|
|
|
this.bind();
|
|
|
};
|
|
|
AsideSlider.prototype._findEntry = function(item) {
|
|
|
for (var i = 0; i < this.bindArray.length; i++) {
|
|
|
if (this.bindArray[i].initialator === item && $(this.bindArray[i].slider).length > 0) {
|
|
|
return true;
|
|
|
}
|
|
|
}
|
|
|
return false;
|
|
|
};
|
|
|
AsideSlider.prototype.bind = AsideSlider.prototype.rebind = function() {
|
|
|
var asliderEntries = $('[data-aslider-in]');
|
|
|
var _scope = this;
|
|
|
var historyList = [];
|
|
|
$(asliderEntries).each(function(idx, el) {
|
|
|
if (_scope._findEntry(el)) {
|
|
|
return;
|
|
|
}
|
|
|
var array = String($(this).data('aslider-in')).split('|');
|
|
|
var targetSlider = array[0];
|
|
|
_scope.bindArray.push({
|
|
|
initialator: this,
|
|
|
slider: '[data-aslider="' + targetSlider + '"]',
|
|
|
options: {
|
|
|
isFade: (function() {
|
|
|
var isFade = false;
|
|
|
array.forEach(function(value, idx) {
|
|
|
if (value == 'fade') {
|
|
|
isFade = true;
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
return false;
|
|
|
};
|
|
|
AsideSlider.prototype.bind = AsideSlider.prototype.rebind = function () {
|
|
|
var asliderEntries = $('[data-aslider-in]');
|
|
|
var _scope = this;
|
|
|
var historyList = [];
|
|
|
$(asliderEntries).each(function (idx, el) {
|
|
|
if (_scope._findEntry(el)) {
|
|
|
return;
|
|
|
});
|
|
|
return isFade;
|
|
|
})(),
|
|
|
direction: (function() {
|
|
|
var direction = 'right';
|
|
|
array.forEach(function(value, idx) {
|
|
|
if (value == 'right' || value == 'left' || value == 'top' || value == 'bottom') {
|
|
|
direction = value;
|
|
|
return false;
|
|
|
}
|
|
|
var array = String($(this).data('aslider-in')).split('|');
|
|
|
var targetSlider = array[0];
|
|
|
_scope.bindArray.push({
|
|
|
initialator: this,
|
|
|
slider: '[data-aslider="' + targetSlider + '"]',
|
|
|
options: {
|
|
|
isFade: (function () {
|
|
|
var isFade = false;
|
|
|
array.forEach(function (value, idx) {
|
|
|
if (value == 'fade') {
|
|
|
isFade = true;
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
return isFade;
|
|
|
})(),
|
|
|
direction: (function () {
|
|
|
var direction = 'right';
|
|
|
array.forEach(function (value, idx) {
|
|
|
if (value == 'right' || value == 'left' || value == 'top' || value == 'bottom') {
|
|
|
direction = value;
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
return direction;
|
|
|
})(),
|
|
|
size: (function () {
|
|
|
var size = '100%';
|
|
|
var direction = 'right';
|
|
|
array.forEach(function (value, idx) {
|
|
|
if (value == 'right' || value == 'left' || value == 'top' || value == 'bottom') {
|
|
|
direction = value;
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
})()
|
|
|
}
|
|
|
});
|
|
|
for (var i in historyList) {
|
|
|
if (historyList[i].entry == $(el).data('aslider-in')) {
|
|
|
return;
|
|
|
}
|
|
|
});
|
|
|
return direction;
|
|
|
})(),
|
|
|
size: (function() {
|
|
|
var size = '100%';
|
|
|
var direction = 'right';
|
|
|
array.forEach(function(value, idx) {
|
|
|
if (value == 'right' || value == 'left' || value == 'top' || value == 'bottom') {
|
|
|
direction = value;
|
|
|
return false;
|
|
|
}
|
|
|
historyList.push(
|
|
|
{
|
|
|
'entry': $(el).data('aslider-in'),
|
|
|
'slider': '[data-aslider="' + targetSlider + '"]',
|
|
|
}
|
|
|
);
|
|
|
var $bg = $('<div class=\'bg close\'></div>');
|
|
|
$(_scope.bindArray[_scope.bindArray.length - 1].slider).prepend($bg);
|
|
|
});
|
|
|
|
|
|
// sliders to be inited
|
|
|
var sliders = historyList.map(function (item) {
|
|
|
return item.slider;
|
|
|
}).join(',');
|
|
|
this.init($(sliders));
|
|
|
};
|
|
|
AsideSlider.prototype.onTransitionEnd = function (e) {
|
|
|
var $el = $(e.currentTarget);
|
|
|
this.y = 0;
|
|
|
this.lastY = 0;
|
|
|
$el.find('.slider').css({
|
|
|
'-moz-transform': 'translate(0,0)',
|
|
|
'-ms-transform': 'translate(0,0)',
|
|
|
'transform': 'translate(0,0)',
|
|
|
'-webkit-transform': 'translate(0,0)',
|
|
|
});
|
|
|
if ($el.find('.slide_out')[0])
|
|
|
$el.css('display', 'none');
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 侦听侧边栏的关闭点击事件,调用滑出侧边栏方法
|
|
|
* @param {event}
|
|
|
* @return {null}
|
|
|
*/
|
|
|
AsideSlider.prototype.onClose = function (e) {
|
|
|
if ($(e.target).hasClass('close')) {
|
|
|
var $el = this._findAslider(e.currentTarget);
|
|
|
this.asideSlideOut($el);
|
|
|
}
|
|
|
};
|
|
|
AsideSlider.prototype.init = function () {
|
|
|
var asliders = $('[data-aslider]');
|
|
|
var _scope = this;
|
|
|
var y = this.y;
|
|
|
var lastY = this.lastY;
|
|
|
$(asliders).bind('webkitTransitionEnd', $.proxy(this.onTransitionEnd, this));
|
|
|
$(asliders).bind('transitionEnd', $.proxy(this.onTransitionEnd, this));
|
|
|
|
|
|
$(asliders).on('click', '.close', $.proxy(this.onClose, this));
|
|
|
$(document).on('click', '[data-aslider="' + $(asliders).data('aslider') + '"]', $.proxy(this.onClose, this));
|
|
|
|
|
|
/**
|
|
|
* 侦听触摸事件的div
|
|
|
*/
|
|
|
$(asliders).each(function (idx, aslider) {
|
|
|
if (uc)
|
|
|
$(aslider).find('.asilder_wrapper').addClass('for_uc');
|
|
|
var lastScrollTop = 0;
|
|
|
|
|
|
// 找不到slider,就创建slider
|
|
|
var children = $(aslider).find('.asilder_wrapper').children();
|
|
|
if ($(aslider).find('.slider').length == 0) {
|
|
|
var $slider = $('<div class=\'slider\'></div>');
|
|
|
$slider.append(children);
|
|
|
$(aslider).find('.asilder_wrapper').append($slider);
|
|
|
} else
|
|
|
var $slider = $(aslider).find('.slider');
|
|
|
if ($(aslider).find('.scroll').length == 0) {
|
|
|
var $scroll = $('<div class=\'scroll\'></>');
|
|
|
|
|
|
// 创建scroll
|
|
|
$slider.before($scroll);
|
|
|
|
|
|
// 将slider添加到scroll
|
|
|
$scroll.append($slider);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 每次点击开始时,先重置lastY
|
|
|
*/
|
|
|
$slider.on('touchstart', function (e) {
|
|
|
lastY = e.originalEvent.touches[0].pageY;
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
* 触摸移动事件
|
|
|
* 通过当前的触摸Y值 - 上一次事件的y值
|
|
|
* 得到两次触摸事件的差
|
|
|
* y = y +deltaY使div移动
|
|
|
* 如果y > 0,则div的顶部低于窗口了,所以y>0时,y=0
|
|
|
* 同理y < limit是为了防止div的底部高于窗口
|
|
|
* 最后让当前的触摸y值 = lastY,即对下一次触摸来说,这次的y就是lastY
|
|
|
*/
|
|
|
$slider.on('touchmove', function (e) {
|
|
|
var curY = e.originalEvent.touches[0].pageY;
|
|
|
var deltaY = curY - lastY;
|
|
|
var height = $(this)[0].scrollHeight;
|
|
|
var limit = height - $(this).parent().height();
|
|
|
y = y + deltaY;
|
|
|
if (y < limit * -1) y = limit * -1;
|
|
|
if (y > 0) y = 0;
|
|
|
var translate = 'translate3d(0,' + y + 'px,0)';
|
|
|
$(this).css({
|
|
|
'-moz-transform': translate,
|
|
|
'-ms-transform': translate,
|
|
|
'transform': translate,
|
|
|
'-webkit-transform': translate,
|
|
|
});
|
|
|
lastY = curY;
|
|
|
});
|
|
|
$slider.on('touchend', function (e) {
|
|
|
});
|
|
|
});
|
|
|
|
|
|
this.bindArray.forEach(function (item) {
|
|
|
_scope._bindAsideSlider($(item.initialator), $(item.slider));
|
|
|
if (item.options.isFade)
|
|
|
$(item.slider).data('aslider-fade', item.options.isFade);
|
|
|
else
|
|
|
$(item.slider).find('.bg').css('opacity', '0');
|
|
|
$(item.slider).data('aslider-direction', item.options.direction);
|
|
|
$(item.slider).find('.asilder_wrapper').addClass(item.options.direction);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* @private
|
|
|
* 绑定页面的侧边栏和侧边栏滑出的发起者的click事件,当点击发起者时,滑出侧边栏
|
|
|
* @param {zepto object} $initialator 发起者
|
|
|
* @param {zepto object} $slider 侧边栏
|
|
|
* @return {null}
|
|
|
*/
|
|
|
AsideSlider.prototype._bindAsideSlider = function ($initialator, $slider) {
|
|
|
if (typeof($initialator) == 'undefined') return;
|
|
|
$initialator.click($.proxy(function (e) {
|
|
|
this.asideSlideIn($slider);
|
|
|
}, this));
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* @private
|
|
|
* 给定一个侧边栏的子节点,找到这个侧边栏
|
|
|
* @param {Type} 一个html dom node
|
|
|
*/
|
|
|
AsideSlider.prototype._findAslider = function (el) {
|
|
|
var theSlider;
|
|
|
$('[data-aslider]').each(function (idx, aslider) {
|
|
|
if (aslider == el) {
|
|
|
theSlider = aslider;
|
|
|
return false;
|
|
|
}
|
|
|
$(aslider).find('.close').each(function (idx, _el) {
|
|
|
if (el == _el) {
|
|
|
theSlider = aslider;
|
|
|
return false;
|
|
|
} else {
|
|
|
return true;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
return $(theSlider);
|
|
|
};
|
|
|
});
|
|
|
})()
|
|
|
}
|
|
|
});
|
|
|
for (var i in historyList) {
|
|
|
if (historyList[i].entry == $(el).data('aslider-in')) {
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
historyList.push(
|
|
|
{
|
|
|
'entry': $(el).data('aslider-in'),
|
|
|
'slider': '[data-aslider="' + targetSlider + '"]',
|
|
|
}
|
|
|
);
|
|
|
var $bg = $('<div class=\'bg close\'></div>');
|
|
|
$(_scope.bindArray[_scope.bindArray.length - 1].slider).prepend($bg);
|
|
|
});
|
|
|
|
|
|
// sliders to be inited
|
|
|
var sliders = historyList.map(function(item) {
|
|
|
return item.slider;
|
|
|
}).join(',');
|
|
|
this.init($(sliders));
|
|
|
};
|
|
|
AsideSlider.prototype.onTransitionEnd = function(e) {
|
|
|
var $el = $(e.currentTarget);
|
|
|
this.y = 0;
|
|
|
this.lastY = 0;
|
|
|
$el.find('.slider').css({
|
|
|
'-moz-transform': 'translate(0,0)',
|
|
|
'-ms-transform': 'translate(0,0)',
|
|
|
'transform': 'translate(0,0)',
|
|
|
'-webkit-transform': 'translate(0,0)',
|
|
|
});
|
|
|
if ($el.find('.slide_out')[0])
|
|
|
$el.css('display', 'none');
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 侦听侧边栏的关闭点击事件,调用滑出侧边栏方法
|
|
|
* @param {event}
|
|
|
* @return {null}
|
|
|
*/
|
|
|
AsideSlider.prototype.onClose = function(e) {
|
|
|
if ($(e.target).hasClass('close')) {
|
|
|
var $el = this._findAslider(e.currentTarget);
|
|
|
this.asideSlideOut($el);
|
|
|
}
|
|
|
};
|
|
|
AsideSlider.prototype.init = function() {
|
|
|
var asliders = $('[data-aslider]');
|
|
|
var _scope = this;
|
|
|
var y = this.y;
|
|
|
var lastY = this.lastY;
|
|
|
$(asliders).bind('webkitTransitionEnd', $.proxy(this.onTransitionEnd, this));
|
|
|
$(asliders).bind('transitionEnd', $.proxy(this.onTransitionEnd, this));
|
|
|
|
|
|
$(asliders).on('click', '.close', $.proxy(this.onClose, this));
|
|
|
$(document).on('click', '[data-aslider="' + $(asliders).data('aslider') + '"]', $.proxy(this.onClose, this));
|
|
|
|
|
|
/**
|
|
|
* 侦听触摸事件的div
|
|
|
*/
|
|
|
$(asliders).each(function(idx, aslider) {
|
|
|
if (uc)
|
|
|
$(aslider).find('.asilder_wrapper').addClass('for_uc');
|
|
|
var lastScrollTop = 0;
|
|
|
|
|
|
// 找不到slider,就创建slider
|
|
|
var children = $(aslider).find('.asilder_wrapper').children();
|
|
|
if ($(aslider).find('.slider').length == 0) {
|
|
|
var $slider = $('<div class=\'slider\'></div>');
|
|
|
$slider.append(children);
|
|
|
$(aslider).find('.asilder_wrapper').append($slider);
|
|
|
} else
|
|
|
var $slider = $(aslider).find('.slider');
|
|
|
if ($(aslider).find('.scroll').length == 0) {
|
|
|
var $scroll = $('<div class=\'scroll\'></>');
|
|
|
|
|
|
// 创建scroll
|
|
|
$slider.before($scroll);
|
|
|
|
|
|
// 将slider添加到scroll
|
|
|
$scroll.append($slider);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* @public
|
|
|
* 遍历所有侧边栏,滑出隐藏当前显示的那个
|
|
|
* @return {null}
|
|
|
* 每次点击开始时,先重置lastY
|
|
|
*/
|
|
|
AsideSlider.prototype.asideSlideOut =
|
|
|
AsideSlider.prototype.slideOut = function ($el) {
|
|
|
$el = typeof $el === 'string' ? $($el) : $el;
|
|
|
if ($el.css('display') != 'none') {
|
|
|
var isFade = $el.data('aslider-fade');
|
|
|
if (isFade === '' || isFade || $el.isFade) {
|
|
|
$el.find('.bg').removeClass('fade_in');
|
|
|
$el.find('.bg').addClass('fade_out');
|
|
|
}
|
|
|
$el.find('.asilder_wrapper').removeClass('slide_in');
|
|
|
$el.find('.asilder_wrapper').addClass('slide_out');
|
|
|
}
|
|
|
this.visibleStack.pop();
|
|
|
if (this.visibleStack.length === 0)
|
|
|
$('body').unbind('touchmove');
|
|
|
};
|
|
|
$slider.on('touchstart', function(e) {
|
|
|
lastY = e.originalEvent.touches[0].pageY;
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
* @public
|
|
|
* 滑入显示一个侧边栏
|
|
|
* @param {zepto object} $el 侧边栏dom对象
|
|
|
* @return {null}
|
|
|
* 触摸移动事件
|
|
|
* 通过当前的触摸Y值 - 上一次事件的y值
|
|
|
* 得到两次触摸事件的差
|
|
|
* y = y +deltaY使div移动
|
|
|
* 如果y > 0,则div的顶部低于窗口了,所以y>0时,y=0
|
|
|
* 同理y < limit是为了防止div的底部高于窗口
|
|
|
* 最后让当前的触摸y值 = lastY,即对下一次触摸来说,这次的y就是lastY
|
|
|
*/
|
|
|
AsideSlider.prototype.asideSlideIn =
|
|
|
AsideSlider.prototype.slideIn = function ($el) {
|
|
|
$el = typeof $el === 'string' ? $($el) : $el;
|
|
|
$el.show();
|
|
|
var isFade = $el.data('aslider-fade');
|
|
|
if (isFade === '' || isFade || $el.isFade) {
|
|
|
$el.find('.bg').removeClass('fade_out');
|
|
|
$el.find('.bg').addClass('fade_in');
|
|
|
}
|
|
|
$el.find('.asilder_wrapper').removeClass('slide_out');
|
|
|
$el.find('.asilder_wrapper').addClass('slide_in');
|
|
|
this.visibleStack.push($el);
|
|
|
|
|
|
$('body').bind('touchmove', function (e) {
|
|
|
e.preventDefault();
|
|
|
});
|
|
|
window.JI_bilibili && window.JI_bilibili($el);
|
|
|
};
|
|
|
$(function () {
|
|
|
$.asideSlider = $.aslider = new AsideSlider();
|
|
|
$slider.on('touchmove', function(e) {
|
|
|
var curY = e.originalEvent.touches[0].pageY;
|
|
|
var deltaY = curY - lastY;
|
|
|
var height = $(this)[0].scrollHeight;
|
|
|
var limit = height - $(this).parent().height();
|
|
|
y = y + deltaY;
|
|
|
if (y < limit * -1)
|
|
|
y = limit * -1;
|
|
|
if (y > 0)
|
|
|
y = 0;
|
|
|
var translate = 'translate3d(0,' + y + 'px,0)';
|
|
|
$(this).css({
|
|
|
'-moz-transform': translate,
|
|
|
'-ms-transform': translate,
|
|
|
'transform': translate,
|
|
|
'-webkit-transform': translate,
|
|
|
});
|
|
|
lastY = curY;
|
|
|
});
|
|
|
$slider.on('touchend', function(e) {});
|
|
|
|
|
|
$(aslider).on("click", ".s-group-zimu a", function() {
|
|
|
lastY = 0;
|
|
|
var name = $(this).html();
|
|
|
var curY = $(aslider).find('[data-pos=' + name + ']').offset().top;
|
|
|
var height = $slider.offset().top;
|
|
|
var deltaY = -(curY - lastY) + height;
|
|
|
|
|
|
var translate = 'translate3d(0,' + deltaY + 'px,0)';
|
|
|
$slider.css({
|
|
|
'-moz-transform': translate,
|
|
|
'-ms-transform': translate,
|
|
|
'transform': translate,
|
|
|
'-webkit-transform': translate,
|
|
|
});
|
|
|
y = deltaY;
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
this.bindArray.forEach(function(item) {
|
|
|
_scope._bindAsideSlider($(item.initialator), $(item.slider));
|
|
|
if (item.options.isFade)
|
|
|
$(item.slider).data('aslider-fade', item.options.isFade);
|
|
|
else
|
|
|
$(item.slider).find('.bg').css('opacity', '0');
|
|
|
$(item.slider).data('aslider-direction', item.options.direction);
|
|
|
$(item.slider).find('.asilder_wrapper').addClass(item.options.direction);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* @private
|
|
|
* 绑定页面的侧边栏和侧边栏滑出的发起者的click事件,当点击发起者时,滑出侧边栏
|
|
|
* @param {zepto object} $initialator 发起者
|
|
|
* @param {zepto object} $slider 侧边栏
|
|
|
* @return {null}
|
|
|
*/
|
|
|
AsideSlider.prototype._bindAsideSlider = function($initialator, $slider) {
|
|
|
if (typeof ($initialator) == 'undefined') return;
|
|
|
$initialator.click($.proxy(function(e) {
|
|
|
var isShow = $initialator.attr("aslider-isShow") || true;
|
|
|
if (typeof isShow === 'string') {
|
|
|
isShow = isShow === 'true' ? true : false;
|
|
|
}
|
|
|
if (isShow) {
|
|
|
this.asideSlideIn($slider);
|
|
|
} else {
|
|
|
tip.show('请先选择省份');
|
|
|
}
|
|
|
}, this));
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* @private
|
|
|
* 给定一个侧边栏的子节点,找到这个侧边栏
|
|
|
* @param {Type} 一个html dom node
|
|
|
*/
|
|
|
AsideSlider.prototype._findAslider = function(el) {
|
|
|
var theSlider;
|
|
|
$('[data-aslider]').each(function(idx, aslider) {
|
|
|
if (aslider == el) {
|
|
|
theSlider = aslider;
|
|
|
return false;
|
|
|
}
|
|
|
$(aslider).find('.close').each(function(idx, _el) {
|
|
|
if (el == _el) {
|
|
|
theSlider = aslider;
|
|
|
return false;
|
|
|
} else {
|
|
|
return true;
|
|
|
}
|
|
|
});
|
|
|
})($);
|
|
|
});
|
|
|
return $(theSlider);
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* @public
|
|
|
* 遍历所有侧边栏,滑出隐藏当前显示的那个
|
|
|
* @return {null}
|
|
|
*/
|
|
|
AsideSlider.prototype.asideSlideOut = AsideSlider.prototype.slideOut = function($el) {
|
|
|
$el = typeof $el === 'string' ? $($el) : $el;
|
|
|
if ($el.css('display') != 'none') {
|
|
|
var isFade = $el.data('aslider-fade');
|
|
|
if (isFade === '' || isFade || $el.isFade) {
|
|
|
$el.find('.bg').removeClass('fade_in');
|
|
|
$el.find('.bg').addClass('fade_out');
|
|
|
}
|
|
|
$el.find('.asilder_wrapper').removeClass('slide_in');
|
|
|
$el.find('.asilder_wrapper').addClass('slide_out');
|
|
|
}
|
|
|
this.visibleStack.pop();
|
|
|
if (this.visibleStack.length === 0)
|
|
|
$('body').unbind('touchmove');
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* @public
|
|
|
* 滑入显示一个侧边栏
|
|
|
* @param {zepto object} $el 侧边栏dom对象
|
|
|
* @return {null}
|
|
|
*/
|
|
|
AsideSlider.prototype.asideSlideIn = AsideSlider.prototype.slideIn = function($el) {
|
|
|
$el = typeof $el === 'string' ? $($el) : $el;
|
|
|
$el.show();
|
|
|
var isFade = $el.data('aslider-fade');
|
|
|
if (isFade === '' || isFade || $el.isFade) {
|
|
|
$el.find('.bg').removeClass('fade_out');
|
|
|
$el.find('.bg').addClass('fade_in');
|
|
|
}
|
|
|
$el.find('.asilder_wrapper').removeClass('slide_out');
|
|
|
$el.find('.asilder_wrapper').addClass('slide_in');
|
|
|
this.visibleStack.push($el);
|
|
|
|
|
|
$('body').bind('touchmove', function(e) {
|
|
|
e.preventDefault();
|
|
|
});
|
|
|
window.JI_bilibili && window.JI_bilibili($el);
|
|
|
};
|
|
|
// $(function () {
|
|
|
// $.asideSlider = $.aslider = new AsideSlider();
|
|
|
// });
|
|
|
module.exports = AsideSlider;
|
|
|
/*eslint-enable*/ |
...
|
...
|
|