This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

Merge branch 'master' of github.com:yutent/doui

old
宇天 2017-11-08 23:35:58 +08:00
parent 4736e6b118 b13b8573b9
commit 442707471b
8 changed files with 803 additions and 793 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -2,3 +2,5 @@
*.min.css *.min.css
index.html index.html
.vscode .vscode
dist.sublime-project
dist.sublime-workspace

577
js/lib/request/es5.js
View File

@ -5,12 +5,13 @@
* *
*/ */
"use strict"; 'use strict';
define(['yua'], function(yua){ define(['yua', './promise'], function(yua) {
var _request = function(url, protocol) { var _request = function(url, protocol) {
this.transport = true this.transport = true;
protocol = (protocol + '').trim().toUpperCase() protocol = (protocol + '').trim().toUpperCase();
this.xhr = Xhr() this.xhr = Xhr();
this.defer = Promise.defer();
this.opt = { this.opt = {
url: (url + '').trim(), url: (url + '').trim(),
type: protocol || 'GET', type: protocol || 'GET',
@ -18,8 +19,10 @@ define(['yua'], function(yua){
data: {}, data: {},
headers: {}, headers: {},
timeoutID: 0, timeoutID: 0,
uuid: Math.random().toString(16).substr(2) uuid: Math.random()
} .toString(16)
.substr(2)
};
}, },
_requestp = _request.prototype, _requestp = _request.prototype,
toS = Object.prototype.toString, toS = Object.prototype.toString,
@ -28,72 +31,64 @@ define(['yua'], function(yua){
encode = encodeURIComponent, encode = encodeURIComponent,
decode = decodeURIComponent, decode = decodeURIComponent,
noop = function(e, res) { noop = function(e, res) {
if(e) this.defer.resolve(res);
throw new Error(e + '')
}; };
// ----------------------------- // -----------------------------
// 本地协议判断正则 // 本地协议判断正则
var rlocalProtocol = /^(?:about|app|app-storage|.+-extension|file|res|widget):$/ var rlocalProtocol = /^(?:about|app|app-storage|.+-extension|file|res|widget):$/;
var isLocal = false var isLocal = false;
try { try {
isLocal = rlocalProtocol.test(location.ptyperotocol) isLocal = rlocalProtocol.test(location.ptyperotocol);
} catch (e) {} } catch (e) {}
var rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/gm;
var rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/mg
// ----------------- 一些兼容性预处理 -------------------- // ----------------- 一些兼容性预处理 --------------------
win.Xhr = function() { win.Xhr = function() {
return new XMLHttpRequest() return new XMLHttpRequest();
} };
var supportCors = 'withCredentials' in Xhr() var supportCors = 'withCredentials' in Xhr();
// ------------------- 几个解释方法 ----------------------- // ------------------- 几个解释方法 -----------------------
function serialize(p, obj, q) { function serialize(p, obj, q) {
var k var k;
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
obj.forEach(function(it, i) { obj.forEach(function(it, i) {
k = p ? (p + '[' + (Array.isArray(it) ? i : '') + ']') : i k = p ? p + '[' + (Array.isArray(it) ? i : '') + ']' : i;
if (typeof it === 'object') { if (typeof it === 'object') {
serialize(k, it, q) serialize(k, it, q);
} else { } else {
q(k, it) q(k, it);
} }
}) });
} else { } else {
for (var i in obj) { for (var i in obj) {
k = p ? (p + '[' + i + ']') : i k = p ? p + '[' + i + ']' : i;
if (typeof obj[i] === 'object') { if (typeof obj[i] === 'object') {
serialize(k, obj[i], q) serialize(k, obj[i], q);
} else { } else {
q(k, obj[i]) q(k, obj[i]);
}
} }
} }
} }
} var Format = function() {};
var Format = function(){}
Format.prototype = { Format.prototype = {
parseJS: function(code) { parseJS: function(code) {
code = (code + '').trim() code = (code + '').trim();
if (code) { if (code) {
if (code.indexOf('use strict') === 1) { if (code.indexOf('use strict') === 1) {
var script = doc.createElement('script') var script = doc.createElement('script');
script.text = code script.text = code;
doc.head doc.head.appendChild(script).parentNode.removeChild(script);
.appendChild(script)
.parentNode
.removeChild(script)
} else { } else {
eval(code) eval(code);
} }
} }
}, },
@ -105,54 +100,53 @@ define(['yua'], function(yua){
xml = void 0; xml = void 0;
} }
if(!xml || if (
!xml ||
!xml.documentElement || !xml.documentElement ||
xml.getElementsByTagName('parsererror').length){ xml.getElementsByTagName('parsererror').length
console.error('Invalid XML: ' + data) ) {
console.error('Invalid XML: ' + data);
} }
return xml return xml;
}, },
parseHTML: function(html) { parseHTML: function(html) {
return yua.parseHTML(html) return yua.parseHTML(html);
}, },
param: function(obj) { param: function(obj) {
if (!obj || typeof obj === 'string' || typeof obj === 'number') if (!obj || typeof obj === 'string' || typeof obj === 'number')
return obj return obj;
var arr = [] var arr = [];
var q = function(k, v) { var q = function(k, v) {
if(/native code/.test(v)) if (/native code/.test(v)) return;
return
v = (typeof v === 'function') ? v() : v v = typeof v === 'function' ? v() : v;
v = (toS.call(v) !== '[object File]') ? encode(v) : v v = toS.call(v) !== '[object File]' ? encode(v) : v;
arr.push(encode(k) + '=' + v) arr.push(encode(k) + '=' + v);
} };
if(typeof obj === 'object') if (typeof obj === 'object') serialize('', obj, q);
serialize('', obj, q)
return arr.join('&') return arr.join('&');
}, },
parseForm: function(form) { parseForm: function(form) {
var data = {} var data = {};
for(var i = 0,field; field = form.elements[i++];){ for (var i = 0, field; (field = form.elements[i++]); ) {
switch (field.type) { switch (field.type) {
case 'select-one': case 'select-one':
case 'select-multiple': case 'select-multiple':
if (field.name.length && !field.disabled) { if (field.name.length && !field.disabled) {
for(var j = 0, opt;opt = field.options[j++];){ for (var j = 0, opt; (opt = field.options[j++]); ) {
if (opt.selected) { if (opt.selected) {
data[field.name] = opt.value || opt.text data[field.name] = opt.value || opt.text;
} }
} }
} }
break; break;
case 'file': case 'file':
if (field.name.length && !field.disabled) { if (field.name.length && !field.disabled) {
data[field.name] = field.files[0] data[field.name] = field.files[0];
} }
break; break;
case undefined: case undefined:
@ -163,96 +157,84 @@ define(['yua'], function(yua){
case 'radio': case 'radio':
case 'checkbox': case 'checkbox':
// 只处理选中的 // 只处理选中的
if(!field.checked) if (!field.checked) break;
break;
default: default:
if (field.name.length && !field.disabled) { if (field.name.length && !field.disabled) {
data[field.name] = field.value data[field.name] = field.value;
} }
} }
} }
return data return data;
}, },
merge: function(a, b) { merge: function(a, b) {
if (typeof a !== 'object' || typeof b !== 'object') if (typeof a !== 'object' || typeof b !== 'object')
throw new TypeError('argument must be an object') throw new TypeError('argument must be an object');
if(Object.assign) if (Object.assign) return Object.assign(a, b);
return Object.assign(a, b)
for (var i in b) { for (var i in b) {
a[i] = b[i] a[i] = b[i];
}
return a
} }
return a;
} }
};
var F = new Format();
var F = new Format()
// --------------------------------------------------------- // ---------------------------------------------------------
// -------------------- request 模块开始 -------------------- // -------------------- request 模块开始 --------------------
// --------------------------------------------------------- // ---------------------------------------------------------
var requestConvert = { var requestConvert = {
text: function(val) { text: function(val) {
return val return val;
}, },
xml: function(val, xml) { xml: function(val, xml) {
return xml !== undefined ? xml : F.parseXML(val) return xml !== undefined ? xml : F.parseXML(val);
}, },
html: function(val) { html: function(val) {
return F.parseHTML(val) return F.parseHTML(val);
}, },
json: function(val) { json: function(val) {
return JSON.parse(val) return JSON.parse(val);
}, },
script: function(val) { script: function(val) {
return F.parseJS(val) return F.parseJS(val);
}, },
jsonp: function(name) { jsonp: function(name) {
var json = request.cache[name] var json = request.cache[name];
delete request.cache[name]; delete request.cache[name];
return json return json;
}
} }
};
var requestExtend = { var requestExtend = {
formData: function() { formData: function() {
if (this.opt.form) { if (this.opt.form) {
var data = F.parseForm(this.opt.form) var data = F.parseForm(this.opt.form);
F.merge(this.opt.data, data) F.merge(this.opt.data, data);
} }
var form = new FormData() var form = new FormData();
for (var i in this.opt.data) { for (var i in this.opt.data) {
var el = this.opt.data[i] var el = this.opt.data[i];
if (Array.isArray(el)) { if (Array.isArray(el)) {
el.forEach(function(it) { el.forEach(function(it) {
form.append(i + '[]', it) form.append(i + '[]', it);
}) });
} else { } else {
form.append(i, this.opt.data[i]) form.append(i, this.opt.data[i]);
} }
} }
return form return form;
}, },
jsonp: function(jsonpcallback) { jsonp: function(jsonpcallback) {
win[jsonpcallback] = function(val) { win[jsonpcallback] = function(val) {
delete win[jsonpcallback] delete win[jsonpcallback];
request.cache[jsonpcallback] = val request.cache[jsonpcallback] = val;
} };
}, },
dispatch: function(self) { dispatch: function(self) {
if (!this.transport) return this.defer.reject('Request pending...');
if(!this.transport)
return
var _this = this, var _this = this,
result = { result = {
@ -274,260 +256,272 @@ define(['yua'], function(yua){
//状态为4,既已成功, 则清除超时 //状态为4,既已成功, 则清除超时
clearTimeout(_this.opt.timeoutID); clearTimeout(_this.opt.timeoutID);
if(typeof this.transport === 'object' if (
&& this.opt.type === 'JSONP'){ typeof this.transport === 'object' &&
this.opt.type === 'JSONP'
) {
//移除script //移除script
// this.transport.parentNode.removeChild(this.transport); // this.transport.parentNode.removeChild(this.transport);
//超时返回 //超时返回
if (self !== null) { if (self !== null) {
var exec = !this.transport.readyState var exec =
|| this.transport.readyState === 'loaded' !this.transport.readyState ||
|| this.transport.readyState === 'complete'; this.transport.readyState === 'loaded' ||
this.transport.readyState === 'complete';
if (exec) { if (exec) {
result.body = requestConvert.jsonp(this.opt.data.callback) result.body = requestConvert.jsonp(
result.text = JSON.stringify(result.body) this.opt.data.callback
);
result.text = JSON.stringify(result.body);
} }
} }
this.callback(result.error, result) this.callback(result.error, result);
} else { } else {
//成功的回调 //成功的回调
var isSucc = self ? ((self.status >= 200 && self.status < 300) || self.status === 304) : false, var isSucc = self
headers = self && self.getAllResponseHeaders().split('\n') || []; ? (self.status >= 200 && self.status < 300) ||
self.status === 304
: false,
headers =
(self && self.getAllResponseHeaders().split('\n')) ||
[];
//处理返回的Header //处理返回的Header
headers.forEach(function(it, i) { headers.forEach(function(it, i) {
it = it.trim() it = it.trim();
if (it) { if (it) {
it = it.split(':') it = it.split(':');
result.response.headers[it.shift().toLowerCase()] = it.join(':').trim() result.response.headers[
it.shift().toLowerCase()
] = it.join(':').trim();
} }
}); });
if (isSucc) { if (isSucc) {
result.status = self.status result.status = self.status;
if (result.status === 204) { if (result.status === 204) {
result.statusText = 'no content' result.statusText = 'no content';
} else if (result.status === 304) { } else if (result.status === 304) {
result.statusText = 'not modified' result.statusText = 'not modified';
} }
} else { } else {
result.status = self === null ? 504 : (self.status || 500) result.status = self === null ? 504 : self.status || 500;
result.statusText = self === null ? 'Connected timeout' : (self.statusText || 'Internal Server Error') result.statusText =
result.error = F.merge(new Error(result.statusText), {status: result.status}) self === null
? 'Connected timeout'
: self.statusText || 'Internal Server Error';
result.error = F.merge(new Error(result.statusText), {
status: result.status
});
} }
try { try {
//处理返回的数据 //处理返回的数据
var dataType = result.response.headers['content-type'].match(/json|xml|script|html/i) || ['text'] var dataType = result.response.headers[
'content-type'
].match(/json|xml|script|html/i) || ['text'];
dataType = dataType[0].toLowerCase() dataType = dataType[0].toLowerCase();
result.text = self && (self.responseText || self.responseXML) || '' result.text =
result.body = requestConvert[dataType](result.text, self && self.responseXML) (self && (self.responseText || self.responseXML)) || '';
result.body = requestConvert[dataType](
result.text,
self && self.responseXML
);
} catch (err) { } catch (err) {
result.error = err result.error = err;
result.statusText = 'parse error' result.statusText = 'parse error';
} }
_this.callback(result.error, result) _this.callback(result.error, result);
} }
delete _this.defer;
delete _this.transport; delete _this.transport;
delete _this.opt delete _this.opt;
delete _this.xhr delete _this.xhr;
}
} }
};
// 设置表单类型, 支持2种, form/json // 设置表单类型, 支持2种, form/json
_requestp.type = function(t) { _requestp.type = function(t) {
if(this.opt.formType === 'form-data') if (this.opt.formType === 'form-data') return this;
return this
this.opt.formType = t || 'form' this.opt.formType = t || 'form';
if (t === 'form' || this.opt.type === 'GET') if (t === 'form' || this.opt.type === 'GET')
this.set('content-type', 'application/x-www-form-urlencoded; charset=UTF-8') this.set(
else 'content-type',
this.set('content-type', 'application/json; charset=UTF-8') 'application/x-www-form-urlencoded; charset=UTF-8'
);
else this.set('content-type', 'application/json; charset=UTF-8');
return this return this;
} };
//设置头信息 //设置头信息
_requestp.set = function(k, val) { _requestp.set = function(k, val) {
if(!this.transport) if (!this.transport) return;
return
if (typeof k === 'object') { if (typeof k === 'object') {
for (var i in k) { for (var i in k) {
i = i.toLowerCase() i = i.toLowerCase();
this.opt.headers[i] = k[i] this.opt.headers[i] = k[i];
} }
} else if (typeof k === 'string') { } else if (typeof k === 'string') {
if(arguments.length < 2) if (arguments.length < 2) throw new Error('2 arguments required');
throw new Error('2 arguments required')
// 全转小写,避免重复写入 // 全转小写,避免重复写入
k = k.toLowerCase() k = k.toLowerCase();
if(val === undefined) if (val === undefined) delete this.opt.headers[k];
delete this.opt.headers[k] else this.opt.headers[k] = val;
else
this.opt.headers[k] = val
} else { } else {
throw new Error('arguments must be string/object, but [' + (typeof k) + '] given') throw new Error(
} 'arguments must be string/object, but [' + typeof k + '] given'
return this );
} }
return this;
};
//设置请求参数 //设置请求参数
_requestp.send = function(k, val) { _requestp.send = function(k, val) {
if (!this.transport) return;
if(!this.transport)
return
// 1. send方法可以多次调用, 但必须保证格式一致 // 1. send方法可以多次调用, 但必须保证格式一致
// 2. 2次圴提交纯字符串也会抛出异常 // 2. 2次圴提交纯字符串也会抛出异常
if (typeof k === 'object') { if (typeof k === 'object') {
if(this.opt.data && (typeof this.opt.data === 'string')) if (this.opt.data && typeof this.opt.data === 'string')
throw new Error('param can not be string and object at the same time') throw new Error(
if(!this.opt.data) 'param can not be string and object at the same time'
this.opt.data = {} );
if (!this.opt.data) this.opt.data = {};
F.merge(this.opt.data, k) F.merge(this.opt.data, k);
} else { } else {
if (typeof k === 'string') { if (typeof k === 'string') {
if (arguments.length === 1) { if (arguments.length === 1) {
if (this.opt.data) if (this.opt.data)
throw new Error('invalid param in function send') throw new Error('invalid param in function send');
this.opt.data = k this.opt.data = k;
} else { } else {
if(this.opt.data && (typeof this.opt.data === 'string')) if (this.opt.data && typeof this.opt.data === 'string')
throw new Error('param can not be string and object at the same time') throw new Error(
'param can not be string and object at the same time'
);
if(!this.opt.data) if (!this.opt.data) this.opt.data = {};
this.opt.data = {}
this.opt.data[k] = val this.opt.data[k] = val;
} }
} else { } else {
throw new Error('argument of send must be string/object, but [' + (typeof k) + '] given') throw new Error(
'argument of send must be string/object, but [' +
typeof k +
'] given'
);
}
} }
} return this;
};
return this
}
//该方法用于 form-data类型的post请求的参数设置 //该方法用于 form-data类型的post请求的参数设置
_requestp.field = function(k, val) { _requestp.field = function(k, val) {
if (!this.transport) return this;
if(!this.transport)
return this
// 此类型优先级最高 // 此类型优先级最高
this.opt.formType = 'form-data' this.opt.formType = 'form-data';
this.opt.type = 'POST' this.opt.type = 'POST';
if(!this.opt.data || (this.opt.data && typeof this.opt.data !== 'object')) if (
this.opt.data = {} !this.opt.data ||
(this.opt.data && typeof this.opt.data !== 'object')
)
this.opt.data = {};
if (arguments.length === 1 && typeof k === 'object') { if (arguments.length === 1 && typeof k === 'object') {
F.merge(this.opt.data, k) F.merge(this.opt.data, k);
} else if (arguments.length === 2) { } else if (arguments.length === 2) {
this.opt.data[k] = val this.opt.data[k] = val;
} else { } else {
throw new TypeError('argument must be an object, but ' + (typeof k) + ' given') throw new TypeError(
'argument must be an object, but ' + typeof k + ' given'
);
} }
return this return this;
} };
//设置缓存 //设置缓存
_requestp.cache = function(t) { _requestp.cache = function(t) {
if(!this.transport) if (!this.transport) return;
return
if(this.opt.type === 'GET') if (this.opt.type === 'GET') this.opt.cache = !!t;
this.opt.cache = !!t
return this
}
return this;
};
//取消网络请求 //取消网络请求
_requestp.abort = function() { _requestp.abort = function() {
delete this.transport delete this.transport;
if(!this.opt.form) if (!this.opt.form) this.xhr.abort();
this.xhr.abort()
return this return this;
} };
//超时设置, 单位毫秒 //超时设置, 单位毫秒
_requestp.timeout = function(time) { _requestp.timeout = function(time) {
if(typeof time !== 'number' || time < 1) if (typeof time !== 'number' || time < 1) return this;
return this
this.opt.timeout = time
return this
}
this.opt.timeout = time;
return this;
};
_requestp.form = function(form) { _requestp.form = function(form) {
if (typeof form === 'object' && form.nodeName === 'FORM') { if (typeof form === 'object' && form.nodeName === 'FORM') {
this.opt.type = 'POST' this.opt.type = 'POST';
this.opt.form = form this.opt.form = form;
}
return this
} }
return this;
};
var originAnchor = doc.createElement('a'); var originAnchor = doc.createElement('a');
originAnchor.href = location.href; originAnchor.href = location.href;
_requestp.end = function(callback) { _requestp.end = function(callback) {
var _this = this; var _this = this;
// 回调已执行, 或已取消, 则直接返回, 防止重复执行 // 回调已执行, 或已取消, 则直接返回, 防止重复执行
if(!this.transport) if (!this.transport) return this;
return this
if(!this.opt.url) if (!this.opt.url) throw new Error('Invalid request url');
throw new Error('Invalid request url')
F.merge(this, requestExtend) F.merge(this, requestExtend);
this.callback = callback || noop this.callback = callback || noop.bind(this);
// 1. url规范化 // 1. url规范化
this.opt.url = this.opt.url.replace(/#.*$/, '').replace(/^\/\//, location.protocol + '//') this.opt.url = this.opt.url
.replace(/#.*$/, '')
.replace(/^\/\//, location.protocol + '//');
// 2. 处理跨域 // 2. 处理跨域
if (typeof this.opt.crossDomain !== 'boolean') { if (typeof this.opt.crossDomain !== 'boolean') {
var anchor = doc.createElement('a') var anchor = doc.createElement('a');
try { try {
anchor.href = this.opt.url anchor.href = this.opt.url;
// IE7及以下浏览器 '1'[0]的结果是 undefined // IE7及以下浏览器 '1'[0]的结果是 undefined
// IE7下需要获取绝对路径 // IE7下需要获取绝对路径
var absUrl = !'1'[0] ? anchor.getAttribute('href', 4) : anchor.href var absUrl = !'1'[0]
anchor.href = absUrl ? anchor.getAttribute('href', 4)
anchor.async = true : anchor.href;
this.opt.crossDomain = (originAnchor.protocol !== anchor.protocol) || (originAnchor.host !== anchor.host) anchor.href = absUrl;
anchor.async = true;
this.opt.crossDomain =
originAnchor.protocol !== anchor.protocol ||
originAnchor.host !== anchor.host;
} catch (e) { } catch (e) {
this.opt.crossDomain = true this.opt.crossDomain = true;
} }
} }
@ -537,145 +531,126 @@ define(['yua'], function(yua){
if (!this.opt.crossDomain) { if (!this.opt.crossDomain) {
this.opt.type = 'GET'; this.opt.type = 'GET';
} else { } else {
this.opt.data['callback'] = this.opt.data['callback'] || ('jsonp' + request.cid++); this.opt.data['callback'] =
this.opt.data['callback'] || 'jsonp' + request.cid++;
this.jsonp(this.opt.data['callback']); //创建临时处理方法 this.jsonp(this.opt.data['callback']); //创建临时处理方法
} }
} }
// 2.2 如果不是跨域请求，则自动加上一条header信息，用以标识这是ajax请求 // 2.2 如果不是跨域请求，则自动加上一条header信息，用以标识这是ajax请求
if (!this.opt.crossDomain) { if (!this.opt.crossDomain) {
this.set('X-Requested-With', 'XMLHttpRequest') this.set('X-Requested-With', 'XMLHttpRequest');
} else { } else {
supportCors && (this.xhr.withCredentials = true) supportCors && (this.xhr.withCredentials = true);
} }
// 3. data转字符串 // 3. data转字符串
this.opt.param = F.param(this.opt.data) this.opt.param = F.param(this.opt.data);
// 4. 设置Content-Type类型, 默认x-www-form-urlencoded // 4. 设置Content-Type类型, 默认x-www-form-urlencoded
if(!this.opt.formType) if (!this.opt.formType) this.type('form');
this.type('form')
// 5.处理GET请求 // 5.处理GET请求
this.opt.hasContent = this.opt.type === 'POST' //是否为post请求 this.opt.hasContent = this.opt.type === 'POST'; //是否为post请求
if (!this.opt.hasContent) { if (!this.opt.hasContent) {
//GET请求直接把参数拼接到url上 //GET请求直接把参数拼接到url上
if (this.opt.param) { if (this.opt.param) {
this.opt.url += (/\?/.test(this.opt.url) ? '&' : '?') + this.opt.param this.opt.url +=
(/\?/.test(this.opt.url) ? '&' : '?') + this.opt.param;
} }
//加随机值,避免缓存 //加随机值,避免缓存
if (this.opt.cache === false) if (this.opt.cache === false)
this.opt.url += (/\?/.test(this.opt.url) ? '&' : '?') + '_=' + Math.random() this.opt.url +=
(/\?/.test(this.opt.url) ? '&' : '?') +
'_=' +
Math.random();
} else { } else {
if (this.opt.formType === 'form-data') { if (this.opt.formType === 'form-data') {
delete this.opt.headers['content-type'] delete this.opt.headers['content-type'];
this.opt.param = this.formData() this.opt.param = this.formData();
} else if (this.opt.formType !== 'form') { } else if (this.opt.formType !== 'form') {
this.opt.param = JSON.stringify(this.opt.data) this.opt.param = JSON.stringify(this.opt.data);
} }
} }
//jsonp //jsonp
if (this.opt.type === 'JSONP') { if (this.opt.type === 'JSONP') {
this.transport = doc.createElement('script');
this.transport = doc.createElement('script')
this.transport.onerror = this.transport.onload = function() { this.transport.onerror = this.transport.onload = function() {
_this.dispatch(_this.transport) _this.dispatch(_this.transport);
} };
this.transport.src = this.opt.url this.transport.src = this.opt.url;
doc.head.insertBefore(this.transport, doc.head.firstChild) doc.head.insertBefore(this.transport, doc.head.firstChild);
//6. 超时处理 //6. 超时处理
if (this.opt.timeout && this.opt.timeout > 0) { if (this.opt.timeout && this.opt.timeout > 0) {
this.opt.timeoutID = setTimeout(function() { this.opt.timeoutID = setTimeout(function() {
_this.transport.onerror = _this.transport.onload = null _this.transport.onerror = _this.transport.onload = null;
_this.dispatch(null) _this.dispatch(null);
}, this.opt.timeout) }, this.opt.timeout);
} }
} else { } else {
this.xhr.onreadystatechange = function(ev) { this.xhr.onreadystatechange = function(ev) {
if (_this.opt.timeout && _this.opt.timeout > 0) { if (_this.opt.timeout && _this.opt.timeout > 0) {
_this.opt['time' + this.readyState] = ev.timeStamp _this.opt['time' + this.readyState] = ev.timeStamp;
if (this.readyState === 4) { if (this.readyState === 4) {
_this.opt.isTimeout = _this.opt.time4 - _this.opt.time1 > _this.opt.timeout _this.opt.isTimeout =
_this.opt.time4 - _this.opt.time1 >
_this.opt.timeout;
} }
} }
if (this.readyState !== 4) { if (this.readyState !== 4) {
return return;
}
_this.dispatch(_this.opt.isTimeout ? null : _this.xhr)
} }
_this.dispatch(_this.opt.isTimeout ? null : _this.xhr);
};
// 6. 初始化xhr提交 // 6. 初始化xhr提交
this.xhr.open(this.opt.type, this.opt.url, true) this.xhr.open(this.opt.type, this.opt.url, true);
// 7. 设置头信息 // 7. 设置头信息
for (var i in this.opt.headers) { for (var i in this.opt.headers) {
if (this.opt.headers[i]) if (this.opt.headers[i])
this.xhr.setRequestHeader(i, this.opt.headers[i]) this.xhr.setRequestHeader(i, this.opt.headers[i]);
} }
// 8. 发起网络请求 // 8. 发起网络请求
_this.xhr.send(_this.opt.param) _this.xhr.send(_this.opt.param);
//超时处理 //超时处理
if (this.opt.timeout && this.opt.timeout > 0) { if (this.opt.timeout && this.opt.timeout > 0) {
this.xhr.timeout = this.opt.timeout; this.xhr.timeout = this.opt.timeout;
} }
} }
return this return this.defer.promise;
};
}
// ---------------------- end ------------------------ // ---------------------- end ------------------------
if (!win.request) { if (!win.request) {
win.request = { win.request = {
get: function(url) { get: function(url) {
if(!url) if (!url) throw new Error('argument url is required');
throw new Error('argument url is required')
return new _request(url, 'GET') return new _request(url, 'GET');
}, },
post: function(url) { post: function(url) {
if(!url) if (!url) throw new Error('argument url is required');
throw new Error('argument url is required')
return new _request(url, 'POST') return new _request(url, 'POST');
}, },
jsonp: function(url) { jsonp: function(url) {
if(!url) if (!url) throw new Error('argument url is required');
throw new Error('argument url is required')
return new _request(url, 'JSONP') return new _request(url, 'JSONP');
}, },
cache: {}, cache: {},
cid: 0, cid: 0,
version: '1.0.0-es5', version: '1.1.0-es5'
} };
yua.ui.request = request.version yua.ui.request = request.version;
} }
return request return request;
}) });

216
js/lib/request/promise.js
View File

@ -5,32 +5,34 @@
* *
*/ */
"use strict"; 'use strict';
define(function() { define(function() {
var _Promise = function(callback) { var _Promise = function(callback) {
this.callback = [] this.callback = [];
var _this = this var _this = this;
if (typeof this !== 'object') if (typeof this !== 'object')
throw new TypeError('Promises must be constructed via new') throw new TypeError('Promises must be constructed via new');
if (typeof callback !== 'function') if (typeof callback !== 'function')
throw new TypeError('Argument must be a function') throw new TypeError('Argument must be a function');
callback(function(val){ callback(
_resolve(_this, val) function(val) {
}, function(val){ _resolve(_this, val);
_reject(_this, val) },
}) function(val) {
_reject(_this, val);
} }
);
};
var self = { var self = {
_state: 1, _state: 1,
_fired: 1, _fired: 1,
_val: 1, _val: 1,
callback: 1 callback: 1
} };
_Promise.prototype = { _Promise.prototype = {
constructor: _Promise, constructor: _Promise,
@ -38,200 +40,184 @@ define(function(){
_fired: false, _fired: false,
_fire: function(yes, no) { _fire: function(yes, no) {
if (this._state === 'rejected') { if (this._state === 'rejected') {
if(typeof no === 'function') if (typeof no === 'function') no(this._val);
no(this._val) else throw this._val;
else
throw this._val
} else { } else {
if(typeof yes === 'function') if (typeof yes === 'function') yes(this._val);
yes(this._val)
} }
}, },
_then: function(yes, no) { _then: function(yes, no) {
if (this._fired) { if (this._fired) {
var _this = this var _this = this;
fireCallback(_this, function() { fireCallback(_this, function() {
_this._fire(yes, no) _this._fire(yes, no);
}) });
} else { } else {
this.callback.push({yes: yes, no: no}) this.callback.push({ yes: yes, no: no });
} }
}, },
then: function(yes, no) { then: function(yes, no) {
yes = typeof yes === 'function' ? yes : _yes yes = typeof yes === 'function' ? yes : _yes;
no = typeof no === 'function' ? no : _no no = typeof no === 'function' ? no : _no;
var _this = this var _this = this;
var next = new _Promise(function(resolve, reject) { var next = new _Promise(function(resolve, reject) {
_this._then(
_this._then(function(val){ function(val) {
try { try {
val = yes(val) val = yes(val);
} catch (err) { } catch (err) {
return reject(err) return reject(err);
} }
}, function(val){ },
function(val) {
try { try {
val = no(val) val = no(val);
} catch (err) { } catch (err) {
return reject(err) return reject(err);
} }
resolve(val) resolve(val);
}) }
}) );
});
for (var i in _this) { for (var i in _this) {
if(!self[i]) if (!self[i]) next[i] = _this[i];
next[i] = _this[i]
} }
return next return next;
}, },
done: done, done: done,
catch: fail, catch: fail,
fail: fail fail: fail
} };
_Promise.all = function(arr) { _Promise.all = function(arr) {
return _some(false, arr) return _some(false, arr);
} };
_Promise.race = function(arr) { _Promise.race = function(arr) {
return _some(true, arr) return _some(true, arr);
} };
_Promise.defer = defer _Promise.defer = defer;
// ----------------------------------------------------------- // -----------------------------------------------------------
function _yes(val) { function _yes(val) {
return val return val;
} }
function _no(err) { function _no(err) {
throw err throw err;
} }
function done(callback) { function done(callback) {
return this.then(callback, _no) return this.then(callback, _no);
} }
function fail(callback) { function fail(callback) {
return this.then(_yes, callback) return this.then(_yes, callback);
} }
function defer() { function defer() {
var obj = {} var obj = {};
obj.promise = new this(function(yes, no) { obj.promise = new this(function(yes, no) {
obj.resolve = yes obj.resolve = yes;
obj.reject = no obj.reject = no;
}) });
return obj return obj;
} }
//成功的回调 //成功的回调
function _resolve(obj, val) { function _resolve(obj, val) {
if(obj._state !== 'pending') if (obj._state !== 'pending') return;
return
if (val && typeof val.then === 'function') { if (val && typeof val.then === 'function') {
var method = val instanceof _Promise ? '_then' : 'then' var method = val instanceof _Promise ? '_then' : 'then';
val[method](function(v){ val[method](
_transmit(obj, v, true) function(v) {
}, function(v){ _transmit(obj, v, true);
_transmit(obj, v, false) },
}) function(v) {
_transmit(obj, v, false);
}
);
} else { } else {
_transmit(obj, val, true) _transmit(obj, val, true);
} }
} }
//失败的回调 //失败的回调
function _reject(obj, val) { function _reject(obj, val) {
if(obj._state !== 'pending') if (obj._state !== 'pending') return;
return
_transmit(obj, val, false) _transmit(obj, val, false);
} }
// 改变Promise的_fired值，并保持用户传参，触发所有回调 // 改变Promise的_fired值，并保持用户传参，触发所有回调
function _transmit(obj, val, isResolved) { function _transmit(obj, val, isResolved) {
obj._fired = true obj._fired = true;
obj._val = val obj._val = val;
obj._state = isResolved ? 'fulfilled' : 'rejected' obj._state = isResolved ? 'fulfilled' : 'rejected';
fireCallback(obj, function() { fireCallback(obj, function() {
for (var i in obj.callback) { for (var i in obj.callback) {
obj._fire(obj.callback[i].yes, obj.callback[i].no) obj._fire(obj.callback[i].yes, obj.callback[i].no);
} }
}) });
} }
function fireCallback(obj, callback) { function fireCallback(obj, callback) {
var isAsync = false var isAsync = false;
if(typeof obj.async === 'boolean') if (typeof obj.async === 'boolean') isAsync = obj.async;
isAsync = obj.async else isAsync = obj.async = true;
else
isAsync = obj.async = true
if(isAsync) if (isAsync) setTimeout(callback, 0);
setTimeout(callback, 0) else callback();
else
callback()
} }
function _some(bool, iterable) { function _some(bool, iterable) {
iterable = Array.isArray(iterable) ? iterable : [] iterable = Array.isArray(iterable) ? iterable : [];
var n = 0 var n = 0;
var res = [] var res = [];
var end = false var end = false;
return new _Promise(function(yes, no) { return new _Promise(function(yes, no) {
if(!iterable.length) if (!iterable.length) no(res);
no(res)
function loop(obj, idx) { function loop(obj, idx) {
obj.then(function(val){ obj.then(
function(val) {
if (!end) { if (!end) {
res[idx] = val res[idx] = val;
n++ n++;
if (bool || n >= iterable.length) { if (bool || n >= iterable.length) {
yes(bool ? val : res) yes(bool ? val : res);
end = true end = true;
} }
} }
}, function(val){ },
end = true function(val) {
no(val) end = true;
}) no(val);
}
);
} }
for (var i = 0, len = iterable.length; i < len; i++) { for (var i = 0, len = iterable.length; i < len; i++) {
loop(iterable[i], i) loop(iterable[i], i);
} }
}) });
} }
// --------------------------------------------------------------- // ---------------------------------------------------------------
var nativePromise = window.Promise;
var nativePromise = window.Promise
if (/native code/.test(nativePromise)) { if (/native code/.test(nativePromise)) {
nativePromise.prototype.done = done nativePromise.prototype.done = done;
nativePromise.prototype.fail = fail nativePromise.prototype.fail = fail;
if(!nativePromise.defer) if (!nativePromise.defer) nativePromise.defer = defer;
nativePromise.defer = defer
} }
return window.Promise = nativePromise || _Promise return (window.Promise = nativePromise || _Promise);
});
})

16
js/lib/sliders/Readme.md
View File

@ -4,16 +4,16 @@
```json ```json
{ {
sliderList: [{src: '', link: '', title: '', titleStyle: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); titleStyle: 标题样式 sliderList: [{src: '', title: '', link: '', elm: ''}], //src: 图片地址; link: 点击链接; title: 幻灯片标题(可以是文本或html); elm: 幻灯片中的dom元素
autoSlide: boolean, //true: 自动轮播; false: 停止轮播 autoSlide: boolean, //true: 自动轮播; false: 停止轮播
time: int, //轮播间隔时间 time: int, //自动轮播间隔时间
preview: boolean //是否缩略有图 preview: boolean //是否缩略有图(不适用于全屏)
skin: 'skin-2', //4种,默认0(0,1,2,3) skin: int, //4种,默认0(0,1,2,3)
sliderType: int, //幻灯片动画效果,目前有1: 水平滑动;2: 水平渐进渐出;3: 垂直滑动;4: 垂直渐进渐出
$onSuccess: function(vm){ $onSuccess: function(vm){
slider = vm slider = vm
}, //初始化回调 }, //初始化回调
vm.$setSliderList(list), //赋值数据给幻灯片数组 vm.$setSliderList(list), //赋值数据给幻灯片数组
vm.$setSliderType(type) //type改变幻灯片动画效果,目前有1: 滑动;2: 渐进渐出
} }
``` ```
@ -40,8 +40,10 @@ name属性可以设定组件的$id值，方便各模块之间进行通讯
sliderList: [{src: '', link: '', title: '', elm: ''}], sliderList: [{src: '', link: '', title: '', elm: ''}],
autoSlide: false, autoSlide: false,
time: 0, time: 0,
preview: true // preview: true,
skin: 'skin-2', fullScreen: true,
skin: 1,
sliderType: 4,
$onSuccess: function(vm){ $onSuccess: function(vm){
slider = vm slider = vm
slider.$setSliderList(list) slider.$setSliderList(list)

2
js/lib/sliders/main.css
View File

@ -1 +1 @@
.do-sliders{position:relative;height:100%;width:100%}.do-sliders .slider-content{height:80%;position:relative}.do-sliders .slider-content .container{position:relative;height:100%;overflow:hidden}.do-sliders .slider-content .container .box{position:relative;height:100%;width:100%;transition:.4s}.do-sliders .slider-content .container .box a{position:relative;display:inline-block;height:100%;vertical-align:middle;transition:.4s}.do-sliders .slider-content .container .box a img{width:100%;height:100%;object-fit:cover}.do-sliders .slider-content .container .box a .title-class{position:absolute;width:30%;min-height:30px;line-height:30px;left:0;bottom:15%;right:0;margin:auto;text-align:center;font-size:25px}.do-sliders .slider-content .container .box a .elm{height:100%;width:100%;background:#333}.do-sliders .slider-content .container .box a .default-elm{width:100%;height:100%}.do-sliders .slider-content .container .box .fadeType{position:absolute;left:0;top:0;width:100%}.do-sliders .slider-content .slider-btn{position:absolute;top:50%;min-width:50px;min-height:50px;margin-top:-25px;text-decoration:none;font-size:30px;line-height:50px;text-align:center;border-radius:100%;color:rgba(255,255,255,0.6);font-weight:bold;z-index:1;transition:.4s}.do-sliders .slider-content .slider-btn:nth-of-type(1){margin-left:20px}.do-sliders .slider-content .slider-btn:nth-of-type(2){right:0;margin-right:20px}.do-sliders .slider-preview-btn{position:relative;bottom:-5%;height:15%;width:100%;margin:0 auto;text-align:center;overflow:hidden}.do-sliders .slider-preview-btn span{display:inline-block;width:10px;height:10px;margin:20px 5px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.5s}.do-sliders .slider-preview-btn span:hover{background:#1abc9c}.do-sliders .slider-preview-btn .no-preview-act{background:#16a085}.do-sliders .slider-preview-btn .btn-group{height:100%}.do-sliders .slider-preview-btn .btn-img{display:inline-block;position:relative;width:80px;height:100%;margin:0 5px;transition:.4s;cursor:pointer}.do-sliders .slider-preview-btn .btn-img img{position:relative;width:100%;height:100%;object-fit:cover;transition:.4s;z-index:2}.do-sliders .slider-preview-btn .btn-img .preview-act{transform:scale(0.95)}.do-sliders .slider-preview-btn .btn-img .btn-background{content:'';position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:.8s;z-index:1}.do-sliders .slider-preview-btn .btn-img.act .btn-background{opacity:1}.do-sliders.skin-0 .title-class{color:#fff}.do-sliders.skin-1 .title-class{color:#c54133}.do-sliders.skin-2 .title-class{color:#16a085}.do-sliders.skin-3 .title-class{color:#2c81ba}.do-sliders.skin-0 .slider-btn{color:rgba(255,255,255,0.6)}.do-sliders.skin-1 .slider-btn{color:#c54133}.do-sliders.skin-2 .slider-btn{color:#16a085}.do-sliders.skin-3 .slider-btn{color:#2c81ba}.do-sliders.skin-0 .slider-btn:hover{color:#fff}.do-sliders.skin-1 .slider-btn:hover{color:#e74c3c}.do-sliders.skin-2 .slider-btn:hover{color:#1abc9c}.do-sliders.skin-3 .slider-btn:hover{color:#3498db}.do-sliders.skin-0 .btn-img .btn-background{background:rgba(0,0,0,0.5)}.do-sliders.skin-1 .btn-img .btn-background{background:#e74c3c}.do-sliders.skin-2 .btn-img .btn-background{background:#1abc9c}.do-sliders.skin-3 .btn-img .btn-background{background:#3498db}.do-sliders.skin-0 .default-elm{background:#fff}.do-sliders.skin-1 .default-elm{background:#e74c3c}.do-sliders.skin-2 .default-elm{background:#1abc9c}.do-sliders.skin-3 .default-elm{background:#3498db}.do-sliders .h-80{height:80%}.do-sliders .h-100{height:100%}@keyframes right-to-left{49%{-webkit-transform:translate(100%)}50%{-webkit-transform:translate(-100%);opacity:0}100%{opacity:1}}@keyframes left-to-right{49%{-webkit-transform:translate(-100%)}50%{-webkit-transform:translate(100%);opacity:0}100%{opacity:1}} .do-sliders{position:relative;height:100%;width:100%}.do-sliders .skin{height:100%}.do-sliders.fullscreen{position:absolute;width:100%;height:100%;left:0;top:0}.do-sliders .slider-content{position:relative}.do-sliders .slider-content .container{position:relative;height:100%;overflow:hidden}.do-sliders .slider-content .container .box{position:relative;height:100%;width:100%;transition:.4s}.do-sliders .slider-content .container .box .page{position:relative;display:inline-block;height:100%;vertical-align:middle}.do-sliders .slider-content .container .box .page img{width:100%;height:100%;object-fit:cover}.do-sliders .slider-content .container .box .page .title-class{position:absolute;width:30%;min-height:30px;line-height:30px;left:0;bottom:15%;right:0;margin:auto;text-align:center;font-size:25px}.do-sliders .slider-content .container .box .page .elm{height:100%;width:100%;background:#333}.do-sliders .slider-content .container .box .page .default-elm{width:100%;height:100%}.do-sliders .slider-content .container .box .page .default-btn{width:100%;height:100%}.do-sliders .slider-content .container .box .fadeType{position:absolute;left:0;top:0;width:100%;transition:.4s}.do-sliders .slider-content .slider-btn{position:absolute;top:50%;min-width:50px;min-height:50px;margin-top:-25px;text-decoration:none;font-size:30px;line-height:50px;text-align:center;border-radius:100%;color:rgba(255,255,255,0.6);font-weight:bold;z-index:1;transition:.4s}.do-sliders .slider-content .slider-btn:nth-of-type(1){margin-left:20px}.do-sliders .slider-content .slider-btn:nth-of-type(2){right:0;margin-right:20px}.do-sliders .slider-preview-btn{position:absolute;bottom:2%;height:12%;width:100%;margin:0 auto;text-align:center;overflow:hidden}.do-sliders .slider-preview-btn span{display:inline-block;width:10px;height:10px;margin:0 5px;border-radius:100%;background:rgba(255,255,255,0.8);cursor:pointer;transition:.5s}.do-sliders .slider-preview-btn span:hover{background:#4caf50}.do-sliders .slider-preview-btn .no-preview-act{background:#388e3c}.do-sliders .slider-preview-btn .btn-group{height:100%}.do-sliders .slider-preview-btn .btn-img{display:inline-block;position:relative;width:80px;height:100%;margin:0 5px;transition:.4s;cursor:pointer}.do-sliders .slider-preview-btn .btn-img img{position:relative;width:100%;height:100%;object-fit:cover;transition:.4s;z-index:2}.do-sliders .slider-preview-btn .btn-img .preview-act{transform:scale(0.95)}.do-sliders .slider-preview-btn .btn-img:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:.8s;z-index:1}.do-sliders .slider-preview-btn .btn-img.act:after{opacity:1}.do-sliders .slider-preview-btn-vertical{right:10px;bottom:50%;width:20px;height:auto;text-align:center;transform:translate(0, 50%)}.do-sliders .skin-0 .title-class{color:#e0e0e0}.do-sliders .skin-1 .title-class{color:#e64a19}.do-sliders .skin-2 .title-class{color:#388e3c}.do-sliders .skin-3 .title-class{color:#1976d2}.do-sliders .skin-0 .slider-btn{color:rgba(255,255,255,0.6)}.do-sliders .skin-1 .slider-btn{color:#e64a19}.do-sliders .skin-2 .slider-btn{color:#388e3c}.do-sliders .skin-3 .slider-btn{color:#1976d2}.do-sliders .skin-0 .slider-btn:hover{color:#e0e0e0}.do-sliders .skin-1 .slider-btn:hover{color:#ff5722}.do-sliders .skin-2 .slider-btn:hover{color:#4caf50}.do-sliders .skin-3 .slider-btn:hover{color:#2196f3}.do-sliders .skin-0 .btn-img:after{background:rgba(0,0,0,0.5)}.do-sliders .skin-1 .btn-img:after{background:#ff5722}.do-sliders .skin-2 .btn-img:after{background:#4caf50}.do-sliders .skin-3 .btn-img:after{background:#2196f3}.do-sliders .skin-0 .default-elm{background:#e0e0e0}.do-sliders .skin-1 .default-elm{background:#ff5722}.do-sliders .skin-2 .default-elm{background:#4caf50}.do-sliders .skin-3 .default-elm{background:#2196f3}.do-sliders .skin-0 .default-btn{background:#e0e0e0}.do-sliders .skin-1 .default-btn{background:#ff5722}.do-sliders .skin-2 .default-btn{background:#4caf50}.do-sliders .skin-3 .default-btn{background:#2196f3}.do-sliders .skin-0 .no-preview-act{background:rgba(0,0,0,0.6)}.do-sliders .skin-1 .no-preview-act{background:#e64a19}.do-sliders .skin-2 .no-preview-act{background:#388e3c}.do-sliders .skin-3 .no-preview-act{background:#1976d2}.do-sliders .skin-0 .slider-preview-btn span:hover{background:rgba(0,0,0,0.6)}.do-sliders .skin-1 .slider-preview-btn span:hover{background:#e64a19}.do-sliders .skin-2 .slider-preview-btn span:hover{background:#388e3c}.do-sliders .skin-3 .slider-preview-btn span:hover{background:#1976d2}.do-sliders .h-83{height:83%}.do-sliders .h-100{height:100%}@keyframes right-to-left{49%{-webkit-transform:translate(100%)}50%{-webkit-transform:translate(-100%);opacity:0}100%{opacity:1}}@keyframes left-to-right{49%{-webkit-transform:translate(-100%)}50%{-webkit-transform:translate(100%);opacity:0}100%{opacity:1}}

59
js/lib/sliders/main.htm
View File

@ -1,19 +1,20 @@
<div class="do-sliders" :class="{{skin}}"> <div class="do-sliders" :class="{fullscreen: fullScreen}">
12 <div class="skin" :class="{{skin}}">
<div class="slider-content" :class="{'h-100': !preview}" :class="{'h-80': preview}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
<div class="slider-content" :class="{'h-83': preview && !fullScreen, 'h-100': !preview || fullScreen}" :if="sliderList.length" :mouseenter="$stopSlide()" :mouseleave="$startSlide()">
<a class="do-ui-font slider-btn" href="javascript:;" <a class="do-ui-font slider-btn" href="javascript:;"
:if="sliderType < 3"
:click="$go(-1)">&#xe8ed</a> :click="$go(-1)">&#xe8ed</a>
<div class="container"> <div class="container">
<div class="box" <div class="box"
:if="sliderType == 1" :if="sliderType == 1"
:css="{width: sliderList.length * 100 + '%', transform: animation}"> :css="{width: sliderList.length * 100 + '%', transform: animation}">
<a target="_blank" <a class="page" target="_blank"
:repeat="sliderList" :repeat="sliderList"
:css="{width: currWidth}" :css="{width: currWidth + '%'}"
:attr="{href: el.link || 'javascript:;'}"> :attr="{href: el.link || 'javascript:;'}">
<img :if="el.src && el.src != ''" :attr-src="el.src"> <img :if="el.src && el.src != ''" :attr-src="el.src">
<div class="default-elm" :class="{elm: !el.elm && !el.src, 'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}" :if="!el.src" :html="el.elm ? el.elm : ''"></div>
<p :if="el.title" <p :if="el.title"
:html="el.title" :html="el.title"
class="title-class"></p> class="title-class"></p>
@ -22,12 +23,39 @@
<div class="box" <div class="box"
:if="sliderType == 2"> :if="sliderType == 2">
<a target="_blank" <a target="_blank"
class="fadeType" class="page fadeType"
:repeat="sliderList" :repeat="sliderList"
:css="{opacity: curr != $index ? 0 : 1}" :css="{opacity: curr != $index ? 0 : 1}"
:attr="{href: el.link || 'javascript:;'}"> :attr="{href: el.link || 'javascript:;'}">
<img :if="el.src && el.src != ''" :attr-src="el.src"> <img :if="el.src && el.src != ''" :attr-src="el.src">
<div class="default-elm" :class="{elm: !el.elm && !el.src, 'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}" :if="!el.src" :html="el.elm ? el.elm : ''"></div>
<p :if="el.title"
:html="el.title"
class="title-class"></p>
</a>
</div>
<div class="box"
:if="sliderType == 3"
:css="{height: sliderList.length * 100 + '%', transform: animation}">
<a class="page" target="_blank"
:repeat="sliderList"
:css="{width: '100%', height: (100 / sliderList.length) + '%'}"
:attr="{href: el.link || 'javascript:;'}">
<img :if="el.src && el.src != ''" :attr-src="el.src">
<p :if="el.title"
:html="el.title"
class="title-class"></p>
</a>
</div>
<div class="box"
:if="sliderType == 4">
<a target="_blank"
class="page fadeType"
:repeat="sliderList"
:css="{opacity: curr != $index ? 0 : 1}"
:attr="{href: el.link || 'javascript:;'}">
<img :if="el.src && el.src != ''" :attr-src="el.src">
{{el.elm | html}}
<p :if="el.title" <p :if="el.title"
:html="el.title" :html="el.title"
class="title-class"></p> class="title-class"></p>
@ -36,29 +64,32 @@
</div> </div>
<a class="do-ui-font slider-btn" href="javascript:;" <a class="do-ui-font slider-btn" href="javascript:;"
:if="sliderType < 3"
:click="$go(1)">&#xe8eb</a> :click="$go(1)">&#xe8eb</a>
</div> </div>
<div class="slider-preview-btn" <div class="slider-preview-btn"
:css="{bottom: preview ? '-5%' : '15%'}" > :class="{'slider-preview-btn-vertical': sliderType > 2}"
<span :if="!preview" :css="{padding: !preview && sliderType < 3 ? '2%' : ''}" >
href="javascript:;" <span href="javascript:;"
:if="!preview || fullScreen"
:class="{'no-preview-act': curr === $index}" :class="{'no-preview-act': curr === $index}"
:repeat="sliderList" :repeat="sliderList"
:click="$jump($index)"> :click="$jump($index)">
</span> </span>
<a class="btn-img" href="javascript:;" <a class="btn-img" href="javascript:;"
:if="preview" :if="preview && !fullScreen"
:class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1)}" :class="{act: curr === $index || (curr >= maxNum && $index == maxNum - 1), 'default-btn': !el.src}"
:click="$jump($index)" :click="$jump($index)"
:repeat="sliderBtnList"> :repeat="sliderBtnList">
<img <img
:class="{'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}" :class="{'preview-act': curr === $index || (curr >= maxNum && $index == maxNum - 1)}"
:if="el.src && el.src != ''" :if="el.src && el.src != ''"
:attr-src="el.src" /> :attr-src="el.src" />
<div class="btn-background"></div> <div class="btn-background" ms-if="el.src"></div>
</a> </a>
</div> </div>
</div> </div>
</div>

104
js/lib/sliders/main.js
View File

@ -7,16 +7,19 @@
define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
var dom; var dom;
function getWidth(){} var sliderNum = 0;
var skin = ['skin-0','skin-1','skin-2','skin-3']
/** /**
* [根据当前幻灯片索引获取填充底下按钮数据] * [根据当前幻灯片索引获取填充底下按钮数据]
* @param {Object} vm [vm对象] * @param {Object} vm [vm对象]
* @return {[Array]} [填充到按钮的数据] * @return {[Array]} [填充到按钮的数据]
*/ */
function getBtnList(vm){ function getBtnList(vm, el){
var currWidth = vm.currWidth.slice(0, -2) if(el){
vm.maxNum = Math.floor(currWidth / 130) dom = el
}
vm.maxNum = Math.floor(dom.offsetWidth / 90)
var curr = vm.curr + 1 var curr = vm.curr + 1
let res = [] let res = []
if(!vm.preview) if(!vm.preview)
@ -43,7 +46,7 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
vm.timer = setTimeout(function(){ vm.timer = setTimeout(function(){
vm.$go(1) vm.$go(1)
autoSlide(vm) autoSlide(vm)
}, vm.time) }, vm.time <= 0 ? 3000 : vm.time)
} }
return yua.component("sliders", { return yua.component("sliders", {
@ -84,60 +87,53 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
vm.sliderList.pushArray(list) vm.sliderList.pushArray(list)
} }
vm.$setSliderType = function(type){
vm.sliderType = type
yua.log(vm.sliderType)
}
vm.$watch('curr', function(val, old) {
vm.currWidth = getWidth()
var width
if(vm.currWidth.indexOf('px') > -1)
width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
vm.animation = 'translate(' + (-width * val) + 'px, 0)'
if(vm.preview && vm.maxNum < vm.sliderList.length){
vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm))
}
})
window.addEventListener('resize', function(){
vm.currWidth = getWidth()
var width
if(vm.currWidth.indexOf('px') > -1)
width = vm.currWidth.slice(0, vm.currWidth.indexOf('px'))
vm.animation = 'translate(' + (-width * vm.curr) + 'px, 0)'
if(vm.preview && vm.maxNum < vm.sliderList.length){
yua.log(vm.maxNum , vm.sliderList.length)
vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm))
}
}, false)
vm.$onSuccess(vm) vm.$onSuccess(vm)
}, },
$ready: function(vm){ $ready: function(vm, el){
dom = document.querySelector('.do-sliders') vm.skin = skin[vm.skin]
vm.currWidth = (100 / vm.sliderList.length)
/**
* [获取当前幻灯片元素宽度]
*/
getWidth = function(){
return window.getComputedStyle ? window.getComputedStyle(dom).width : dom.offsetWidth + 'px'
}
vm.currWidth = getWidth()
if(vm.autoSlide) if(vm.autoSlide)
autoSlide(vm) autoSlide(vm)
if(vm.preview){ if(vm.preview){
vm.sliderBtnList.removeAll() vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm)) vm.sliderBtnList.pushArray(getBtnList(vm, el))
}
vm.$watch('curr', function(val, old) {
vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * val) + '%)' : 'translate(' + (-vm.currWidth * val) + '%, 0)'
if(vm.preview && vm.maxNum < vm.sliderList.length){
vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm, el))
}
})
window.addEventListener('resize', function(){
vm.animation = vm.sliderType > 2 ? 'translate(0, ' + (-vm.currWidth * vm.curr) + '%)' : 'translate(' + (-vm.currWidth * vm.curr) + '%, 0)'
if(vm.preview && vm.maxNum < vm.sliderList.length){
vm.sliderBtnList.removeAll()
vm.sliderBtnList.pushArray(getBtnList(vm, el))
}
}, false)
if(vm.sliderType >= 3){
var now = 0
var mouseWheelEv = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll": "mousewheel"
var direction = /Firefox/i.test(navigator.userAgent) ? "detail": "deltaY"
window.addEventListener(mouseWheelEv, function(ev){
if(Date.now() - now > 500 || now == 0){
if(ev[direction] > 0){
vm.$go(1)
}else{
vm.$go(-1)
}
now = Date.now()
}
}, false)
} }
yua.log(vm)
}, },
currWidth: 0, currWidth: 0,
animation: '', animation: '',
@ -150,12 +146,12 @@ define(["yua", "text!./main.htm", "css!./main"], function(yua, tpl){
sliderList: [], sliderList: [],
autoSlide: '', autoSlide: '',
time: 3000, time: 3000,
preview: true, preview: false,
skin: 'skin-0', skin: 0,
fullScreen: false,
$onSuccess: yua.noop, $onSuccess: yua.noop,
$setSliderList: yua.noop, $setSliderList: yua.noop,
$setSliderType: yua.noop,
$jump: yua.noop, $jump: yua.noop,
$stopSlide: yua.noop, $stopSlide: yua.noop,
$startSlide: yua.noop, $startSlide: yua.noop,

76
js/lib/sliders/main.scss
View File

@ -10,17 +10,20 @@
// @import "../../../css/reset.scss"; // @import "../../../css/reset.scss";
.do-sliders {position: relative;height: 100%;width: 100%; .do-sliders {position: relative;height: 100%;width: 100%;
.slider-content{height: 80%;position: relative; .skin{height: 100%}
&.fullscreen{position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
.slider-content{position: relative;
.container {position: relative;height: 100%;overflow: hidden; .container {position: relative;height: 100%;overflow: hidden;
.box {position: relative;height: 100%;width: 100%;transition: .4s; .box {position: relative;height: 100%;width: 100%;transition: .4s;
a {position:relative;display: inline-block;height: 100%;vertical-align: middle;transition: .4s; .page {position:relative;display: inline-block;height: 100%;vertical-align: middle;
img {width: 100%;height: 100%;object-fit: cover;} img {width: 100%;height: 100%;object-fit: cover;}
.title-class {position: absolute;width: 30%;min-height: 30px;line-height: 30px;left: 0;bottom: 15%;right: 0;margin: auto;text-align: center;font-size: 25px;} .title-class {position: absolute;width: 30%;min-height: 30px;line-height: 30px;left: 0;bottom: 15%;right: 0;margin: auto;text-align: center;font-size: 25px;}
.elm{height: 100%;width: 100%;background: #333;} .elm{height: 100%;width: 100%;background: #333;}
.default-elm{width: 100%;height: 100%;} .default-elm{width: 100%;height: 100%;}
.default-btn{width: 100%;height: 100%;}
} }
.fadeType{position: absolute;left: 0;top: 0;width: 100%;} .fadeType{position: absolute;left: 0;top: 0;width: 100%;transition: .4s;}
} }
} }
@ -32,10 +35,9 @@
// .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;} // .slider-btn:nth-of-type(2):hover{animation: right-to-left .3s;}
} }
.slider-preview-btn {position: absolute;bottom: 2%;height: 12%;width: 100%;margin: 0 auto;text-align: center;overflow: hidden;
.slider-preview-btn {position: relative;bottom: -5%;height: 15%;width: 100%;margin: 0 auto;text-align: center;overflow: hidden; span {display: inline-block;width: 10px;height: 10px;margin: 0 5px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .5s;}
span {display: inline-block;width: 10px;height: 10px;margin: 20px 5px;border-radius: 100%;background: rgba(255,255,255,0.8);cursor: pointer;transition: .5s;}
span:hover{background:nth($cg, 1);} span:hover{background:nth($cg, 1);}
.no-preview-act{background:nth($cg, 3);} .no-preview-act{background:nth($cg, 3);}
@ -45,36 +47,52 @@
img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;} img {position: relative;width: 100%;height: 100%;object-fit: cover;transition: .4s;z-index: 2;}
.preview-act{transform: scale(.95)} .preview-act{transform: scale(.95)}
} }
.btn-img .btn-background {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: .8s;z-index: 1;} .btn-img:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: .8s;z-index: 1;}
.btn-img.act .btn-background {opacity: 1;} .btn-img.act:after {opacity: 1;}
} }
.slider-preview-btn-vertical{right: 10px;bottom: 50%;width: 20px;height: auto;text-align: center;transform: translate(0, 50%);}
&.skin-0 .title-class{color: #fff} .skin-0 .title-class{color: #e0e0e0}
&.skin-1 .title-class{color: nth($cr, 3)} .skin-1 .title-class{color: nth($cr, 3)}
&.skin-2 .title-class{color: nth($cg, 3)} .skin-2 .title-class{color: nth($cg, 3)}
&.skin-3 .title-class{color: nth($cb, 3)} .skin-3 .title-class{color: nth($cb, 3)}
&.skin-0 .slider-btn{color: rgba(255,255,255,.6)} .skin-0 .slider-btn{color: rgba(255,255,255,.6)}
&.skin-1 .slider-btn{color: nth($cr, 3)} .skin-1 .slider-btn{color: nth($cr, 3)}
&.skin-2 .slider-btn{color: nth($cg, 3)} .skin-2 .slider-btn{color: nth($cg, 3)}
&.skin-3 .slider-btn{color: nth($cb, 3)} .skin-3 .slider-btn{color: nth($cb, 3)}
&.skin-0 .slider-btn:hover{color: #fff} .skin-0 .slider-btn:hover{color: #e0e0e0}
&.skin-1 .slider-btn:hover{color: nth($cr, 1)} .skin-1 .slider-btn:hover{color: nth($cr, 1)}
&.skin-2 .slider-btn:hover{color: nth($cg, 1)} .skin-2 .slider-btn:hover{color: nth($cg, 1)}
&.skin-3 .slider-btn:hover{color: nth($cb, 1)} .skin-3 .slider-btn:hover{color: nth($cb, 1)}
&.skin-0 .btn-img .btn-background{background: rgba(0,0,0,0.5)} .skin-0 .btn-img:after{background: rgba(0,0,0,0.5)}
&.skin-1 .btn-img .btn-background{background: nth($cr, 1)} .skin-1 .btn-img:after{background: nth($cr, 1)}
&.skin-2 .btn-img .btn-background{background: nth($cg, 1)} .skin-2 .btn-img:after{background: nth($cg, 1)}
&.skin-3 .btn-img .btn-background{background: nth($cb, 1)} .skin-3 .btn-img:after{background: nth($cb, 1)}
&.skin-0 .default-elm{background: #fff} .skin-0 .default-elm{background: #e0e0e0}
&.skin-1 .default-elm{background: nth($cr, 1)} .skin-1 .default-elm{background: nth($cr, 1)}
&.skin-2 .default-elm{background: nth($cg, 1)} .skin-2 .default-elm{background: nth($cg, 1)}
&.skin-3 .default-elm{background: nth($cb, 1)} .skin-3 .default-elm{background: nth($cb, 1)}
.h-80{height: 80%;} .skin-0 .default-btn{background: #e0e0e0}
.skin-1 .default-btn{background: nth($cr, 1)}
.skin-2 .default-btn{background: nth($cg, 1)}
.skin-3 .default-btn{background: nth($cb, 1)}
.skin-0 .no-preview-act{background: rgba(0,0,0,.6)}
.skin-1 .no-preview-act{background: nth($cr, 3)}
.skin-2 .no-preview-act{background: nth($cg, 3)}
.skin-3 .no-preview-act{background: nth($cb, 3)}
.skin-0 .slider-preview-btn span:hover{background: rgba(0,0,0,.6)}
.skin-1 .slider-preview-btn span:hover{background: nth($cr, 3)}
.skin-2 .slider-preview-btn span:hover{background: nth($cg, 3)}
.skin-3 .slider-preview-btn span:hover{background: nth($cb, 3)}
.h-83{height: 83%;}
.h-100{height: 100%;} .h-100{height: 100%;}
} }