From c3cfc72f54b69b90cb9d7d248ccf4d11a29e62e9 Mon Sep 17 00:00:00 2001 From: kissyteam Date: Sat, 11 Apr 2015 13:34:19 +0800 Subject: [PATCH] sync daily version 3.0.0 --- 3.0.0/README.md | 10 + 3.0.0/abc.json | 9 + 3.0.0/bower.json | 12 ++ 3.0.0/build/index-min.js | 1 + 3.0.0/build/index.js | 394 ++++++++++++++++++++++++++++++++++ 3.0.0/build/lib/main-min.js | 1 + 3.0.0/build/lib/main.js | 19 ++ 3.0.0/build/mods-min.js | 1 + 3.0.0/build/mods.js | 14 ++ 3.0.0/demo/index.html | 83 +++++++ 3.0.0/guide/index.md | 61 ++++++ 3.0.0/gulpfile.js | 108 ++++++++++ 3.0.0/index.css | 148 +++++++++++++ 3.0.0/index.js | 391 +++++++++++++++++++++++++++++++++ 3.0.0/index.less | 147 +++++++++++++ 3.0.0/lib/main.js | 16 ++ 3.0.0/package.json | 22 ++ 3.0.0/test/runner.html | 59 +++++ 3.0.0/test/runner.js | 3 + 3.0.0/test/spec/index-spec.js | 10 + 3.0.0/totoro-config.json | 3 + 21 files changed, 1512 insertions(+) create mode 100644 3.0.0/README.md create mode 100644 3.0.0/abc.json create mode 100644 3.0.0/bower.json create mode 100644 3.0.0/build/index-min.js create mode 100644 3.0.0/build/index.js create mode 100644 3.0.0/build/lib/main-min.js create mode 100644 3.0.0/build/lib/main.js create mode 100644 3.0.0/build/mods-min.js create mode 100644 3.0.0/build/mods.js create mode 100644 3.0.0/demo/index.html create mode 100644 3.0.0/guide/index.md create mode 100644 3.0.0/gulpfile.js create mode 100644 3.0.0/index.css create mode 100644 3.0.0/index.js create mode 100644 3.0.0/index.less create mode 100644 3.0.0/lib/main.js create mode 100644 3.0.0/package.json create mode 100644 3.0.0/test/runner.html create mode 100644 3.0.0/test/runner.js create mode 100644 3.0.0/test/spec/index-spec.js create mode 100644 3.0.0/totoro-config.json diff --git a/3.0.0/README.md b/3.0.0/README.md new file mode 100644 index 0000000..57cc2e8 --- /dev/null +++ b/3.0.0/README.md @@ -0,0 +1,10 @@ +## timelines + + +## changelog + +### V2.0.0 + + [!] + + diff --git a/3.0.0/abc.json b/3.0.0/abc.json new file mode 100644 index 0000000..a482097 --- /dev/null +++ b/3.0.0/abc.json @@ -0,0 +1,9 @@ +{ + "name": "timelines", + "type": "kpm", + "kissy":"1.4.8", + "builder": "@ali/builder-kpm", + "options": { + + } +} \ No newline at end of file diff --git a/3.0.0/bower.json b/3.0.0/bower.json new file mode 100644 index 0000000..3fcd660 --- /dev/null +++ b/3.0.0/bower.json @@ -0,0 +1,12 @@ +{ + "name": "timelines", + "version": "3.0.0", + "main": "index.js", + "ignore": [ + "**/*", + "!index.js", + "!index.css", + "!lib/**/*" + ], + "dependencies": {} +} \ No newline at end of file diff --git a/3.0.0/build/index-min.js b/3.0.0/build/index-min.js new file mode 100644 index 0000000..720ba0a --- /dev/null +++ b/3.0.0/build/index-min.js @@ -0,0 +1 @@ +KISSY.add("kg/timelines/3.0.0/index",["base","dom","event","anim","node"],function(e,t,i,a){var n,r=t("base"),o=t("dom"),s=t("event"),d=t("anim"),l=t("node");n=function(t){var i=(l.all,r),a=o,n=s,u=d,p=i.extend({initializer:function(){var e=this;e.el=e.get("container"),a.css(e.el,{position:"relative","padding-top":"10px"}),e.curdate=e.get("curDate")||null;var t=(new Date).getFullYear();e.hashYear={},e.hashYear[t]=!0,e.outerw=a.outerWidth(e.el),e.today=e.get("today")||e.formatDate(new Date,"yyyy-MM-dd"),e.isReToday=e.today===e.curdate,e._initDateGrid(e.get("data"))},_initDateGrid:function(t){var i=this;try{if(!i._typeof(t,"Array")){var n=new Error;throw n.name="类型出错",n.message="传入的data不是数组!",n}var r=i._initTimeNode("wrap",{end:!0});r+=i._initTimeNode("line",{num:3}),i._getTimeMs(i.today)0&&(r+=i._initTimeNode("line",{num:Math.ceil(i.outerw/16)})),a.append(a.create(r+""),i.el),i.elwrap=a.get(".timeline-wrap",i.el),i._initNodeEvents(t)}catch(o){console.log(o.message)}},_initTimeNode:function(e,t){var i=this,a={wrap:'
',node:'
',line:'
',omission:'
',shine:'
',cur:'
',dot:'
'},n={node:40,line:16,omission:20,shine:40,cur:120,dot:33};if("wrap"!==e){var r=t&&t.num||1;i.outerw-=n[e]*r}var o=a[e];if(t&&t.time&&(o+=""+t.time+""),t&&t.end)return o;if("cur"===e&&(o+='
'),t&&t.num){o+="
";for(var s=0;s",i.outerw-=n[e];return o}return o+"
"},_addToady:function(e){var t=this;return t.curdate&&t.today!=t.curdate?e+t._initTimeNode("shine",{time:t.formatDate(t.today,"MM.dd")}):e},_addmission:function(e,t){function i(t,i){var a=(i-t)/864e5,n=Math.floor(a/30);switch(n=n>2?2:n,!0){case a>2&&6>a:return e+=r._initTimeNode("dot");case a>6:return e+=r._initTimeNode("omission",{num:n});default:return e}}var a,n,r=this,o=r._getTimeMs(r.today);return!t.before&&t.after?(n=r._getTimeMs(t.after),e=r._addToady(e),e=i(o,n)):(a=r._getTimeMs(t.before),t.after?(n=r._getTimeMs(t.after),o>=a&&n>o?(o!==a&&(e=i(a,o)),e=r._addToady(e),o!==n&&(e=i(o,n))):e=i(a,n),e):(o>a&&(e=i(a,o),e=r._addToady(e)),e))},_getTimeMs:function(e){return new Date(e).getTime()},_typeof:function(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"},_isSameYear:function(e){var t=this,i=new Date(e).getFullYear();return t.hashYear[i]?!0:(t.hashYear[i]=!0,!1)},_initNodeEvents:function(t){function i(){r.tipsInter=setTimeout(function(){r._tipIndex=r._tipIndex>r._tipQueue.length-1?0:r._tipIndex,r._initTips(r._tipQueue[r._tipIndex++]),i()},1500)}var r=this,o=a.query(".timeline-node",r.el);e.each(o,function(e,t){!r.isReToday&&a.hasClass(e,"timeline-blue-node")&&(a.css(e,{cursor:"default"}),o.splice(t,1))});var s=a.offset(r.elwrap).left,d=[],l={};e.each(o,function(e,i){var o=t[i],u=a.offset(e).left;o.left=u-s+Math.ceil(a.outerWidth(e)/2);var p,m=r._typeof(o.tip,"Array");if(m){for(var c=0,f=o.tip.length;f>c;c++)p={left:o.left,date:o.date,tip:o.tip[c]},d.push(p);l[i]=f}else d.push(o),l[i]=1;var v,_,h;n.on(e,"mouseover",function(){r.anim&&r.anim.stop(),_=m?Math.floor(Math.random()*o.tip.length):0,h=0;for(var e=0;i>e;e++)h+=l[e];r._tipIndex=h+_,v=m?{left:o.left,date:o.date,tip:o.tip[_]}:o,r._initTips(v)})}),n.on(r.elwrap,"mouseover mouseout",function(e){switch(e.type){case"mouseover":r.anim&&r.anim.stop(!0),clearTimeout(r.tipsInter);break;case"mouseout":i()}}),r._tipQueue=d,r._tipIndex=0,r.tipsInter=null,i()},_initTips:function(e){{var t=this,i={left:e.left,tip:t._typeof(e.tip,"Array")?e.tip[0]:e.tip};t._tips}if(t._tips)a.get("span",t._tips).innerHTML=i.tip,t.anim&&t.anim.stop(),e.date===t.curdate?a.addClass(t._tips,"tip-cur"):a.removeClass(t._tips,"tip-cur"),t.anim=new u(t._tips,{left:i.left,marginLeft:-a.outerWidth(t._tips)/2},.5,"easeBoth",!1,function(){}).run();else{var n='
'+i.tip+"
";t._tips=a.create(n),e.date===t.curdate?a.addClass(t._tips,"tip-cur"):a.removeClass(t._tips,"tip-cur"),a.append(t._tips,t.el),a.css(t._tips,{"margin-left":-a.outerWidth(t._tips)/2})}},formatDate:function(e,t){var i=new Date(e),a={"M+":i.getMonth()+1,"d+":i.getDate(),"h+":i.getHours(),"m+":i.getMinutes(),"s+":i.getSeconds(),"q+":Math.floor((i.getMonth()+3)/3),S:i.getMilliseconds()};/(y+)/.test(t)&&(t=t.replace(RegExp.$1,(i.getFullYear()+"").substr(4-RegExp.$1.length)));for(var n in a)new RegExp("("+n+")").test(t)&&(t=t.replace(RegExp.$1,1==RegExp.$1.length?a[n]:("00"+a[n]).substr((""+a[n]).length)));return t}});return t=p}(),a.exports=n}); \ No newline at end of file diff --git a/3.0.0/build/index.js b/3.0.0/build/index.js new file mode 100644 index 0000000..d7da225 --- /dev/null +++ b/3.0.0/build/index.js @@ -0,0 +1,394 @@ +KISSY.add('kg/timelines/3.0.0/index',["node","base","dom","event","anim"],function(S ,require, exports, module) { + var $ = require('node').all; +var Base = require('base'); +var D = require('dom'); +var E = require('event'); +var Anim = require('anim'); +var TimeLines = Base.extend({ + /** + * 初始化 + * @return {[type]} [description] + */ + initializer: function () { + debugger; + var self = this; + self.el = self.get('container'); + D.css(self.el, { + 'position': 'relative', + 'padding-top': '10px' + }); + self.curdate = self.get('curDate') || null; + //标记是否有不同年份 + var initYear = new Date().getFullYear(); + self.hashYear = {}; + self.hashYear[initYear] = true; + self.outerw = D.outerWidth(self.el); + //标记今天的日子 + self.today = self.get('today') || self.formatDate(new Date(), 'yyyy-MM-dd'); + self.isReToday = (self.today === self.curdate); + self._initDateGrid(self.get('data')); + } + /** + * 初始化TimeLine布局 + * @type {Array} + */, _initDateGrid: function (data) { + var self = this; + try { + if (!self._typeof(data, 'Array')) { + var err = new Error(); + err.name = '类型出错'; + err.message = '传入的data不是数组!'; + throw(err); + } + var timebody = self._initTimeNode('wrap', { + end: true + }); + timebody += self._initTimeNode('line', { + num: 3 + }); + //如果今天比数组的第一个日期还小就把今天放在最前面 + if (self._getTimeMs(self.today) < self._getTimeMs(data[0].date)) { + timebody = self._addmission(timebody, { + before: null, + after: data[0].date + }); + } + //装载节点 + S.each(data, function (item, index) { + //如果不是同一年，就打上跨年标记 + if (!self._isSameYear(item.date)) { + timebody += self._initTimeNode('dot', { + time: self.formatDate(item.date, 'yyyy') + }); + } + //add node + if (!(index === 0 && self.today === item.date)) { + var _booleanCur = self.curdate && (item.date == self.curdate); + if (self.today !== item.date || _booleanCur) { + //如果配置了时间就点亮 + var _nodeType = _booleanCur ? 'cur' : 'node'; + timebody += self._initTimeNode(_nodeType, { + time: self.formatDate(item.date, 'MM.dd') + }); + } + + } + if (self.today === item.date) { + self.isReToday = true; + } + //两个日期跨度太大的时候增加省略号 + timebody = self._addmission(timebody, { + before: item.date, + after: data[index + 1] && data[index + 1].date + }); + }); + if (self.outerw > 0) { + timebody += self._initTimeNode('line', { + num: Math.ceil(self.outerw / 16) + }); + } + D.append(D.create(timebody + '
'), self.el); + self.elwrap = D.get('.timeline-wrap', self.el); + //bind events + self._initNodeEvents(data); + } catch (e) { + console.log(e.message); + } + } + /** + * 初始化节点 + * @param {[type]} type [description] + * @param {[type]} end [description] + * @param {[type]} time [description] + * @param {[type]} num [description] + * @return {[type]} [description] + */, _initTimeNode: function (type, cfg) { + var self = this; + var timeArray = { + wrap: '
', + node: '
', + line: '
', + omission: '
', + shine: '
', + cur: '
', + dot: '
' + }; + var w = { + node: 40, + line: 16, + omission: 20, + shine: 40, + cur: 120, + dot: 33 + }; + if (type !== 'wrap') { + var _num = (cfg && cfg.num) || 1; + self.outerw -= w[type] * _num; + } + var _node = timeArray[type]; + if (cfg && cfg.time) { + _node += '' + cfg.time + ''; + } + if (cfg && cfg.end) { + return _node; + } + if (type === 'cur') { + _node += '
'; + } + if (cfg && cfg.num) { + _node += '
'; + for (var i = 0; i < cfg.num; i++) { + _node += timeArray[type] + '
'; + self.outerw -= w[type]; + } + return _node; + } + return _node + '
'; + }, _addToady: function (body) { + //放入今天的日期 + var self = this; + //如果设置了点亮日期并且今天要不等于设置的点亮日期 + if (self.curdate && self.today != self.curdate) { + return body + self._initTimeNode('shine', { + time: self.formatDate(self.today, 'MM.dd') + }); + } + return body; + } + /** + * 日期跨度间隔大的增加省略号 + * @return {[type]} [description] + */, _addmission: function (body, date) { + var self = this; + var _today = self._getTimeMs(self.today); + var _before, _after; + if (!date.before && date.after) { + _after = self._getTimeMs(date.after); + body = self._addToady(body); + body = cons(_today, _after); + return body; + } + //before time + _before = self._getTimeMs(date.before); + if (!date.after) { + if (_today > _before) { + body = cons(_before, _today); + body = self._addToady(body); + } + return body; + } + //after time + _after = self._getTimeMs(date.after); + + if (_today >= _before && _today < _after) { + if (_today !== _before) { + body = cons(_before, _today); + } + //增加今天日期的标识 + body = self._addToady(body); + if (_today !== _after) { + body = cons(_today, _after); + } + } else { + body = cons(_before, _after); + // body = self._addToady(body); + } + return body; + + function cons(before, after) { + var diff = (after - before) / (3600 * 1000 * 24); + var num = Math.floor(diff / 30); + num = num > 2 ? 2 : num; + // if (diff > 6) { + // return body += self._initTimeNode('omission', { + // num: num + // }); + // } else if (){ + // return body; + // } + switch (true) { + case diff > 2 && diff < 6: + return body += self._initTimeNode('dot'); + break; + case diff > 6: + return body += self._initTimeNode('omission', { + num: num + }); + break; + default: + return body; + } + } + }, _getTimeMs: function (date) { + return new Date(date).getTime(); + } + /** + * 数据类型的检测 + * @param {[type]} obj [description] + * @param {[type]} type [description] + * @return {[type]} [description] + */, _typeof: function (obj, type) { + return Object.prototype.toString.call(obj) === '[object ' + type + ']'; + }, _isSameYear: function (date) { + var self = this; + var _year = new Date(date).getFullYear(); + if (!self.hashYear[_year]) { + self.hashYear[_year] = true; + return false; + } + return true; + }, _initNodeEvents: function (data) { + var self = this; + var nodes = D.query('.timeline-node', self.el); + S.each(nodes, function (item, index) { + if (!self.isReToday && D.hasClass(item, 'timeline-blue-node')) { + D.css(item, { + cursor: 'default' + }); + nodes.splice(index, 1); + } + }); + var wrapleft = D.offset(self.elwrap).left; + //queue tips + var tipQueue = []; + var tipTotal = {}; + S.each(nodes, function (item, index) { + var _data = data[index]; + var _left = D.offset(item).left; + _data.left = _left - wrapleft + Math.ceil(D.outerWidth(item) / 2); + var _tipisarr = self._typeof(_data.tip, 'Array'); + var _pushtip; + if (_tipisarr) { + for (var i = 0, len = _data.tip.length; i < len; i++) { + _pushtip = { + left: _data.left, + date: _data.date, + tip: _data.tip[i] + } + tipQueue.push(_pushtip); + } + tipTotal[index] = len; + } else { + tipQueue.push(_data); + tipTotal[index] = 1; + } + var _sdata, _index, _count; + E.on(item, 'mouseover', function (e) { + self.anim && self.anim.stop(); + _index = _tipisarr ? Math.floor(Math.random() * _data.tip.length) : 0; + _count = 0; + for (var i = 0; i < index; i++) { + _count += tipTotal[i]; + } + self._tipIndex = _count + _index; + if (_tipisarr) { + _sdata = { + left: _data.left, + date: _data.date, + tip: _data.tip[_index] + } + } else { + _sdata = _data; + } + self._initTips(_sdata); + }); + }); + //stop anim + E.on(self.elwrap, 'mouseover mouseout', function (e) { + switch (e.type) { + case 'mouseover': + self.anim && self.anim.stop(true); + clearTimeout(self.tipsInter); + break; + case 'mouseout': + interTips(); + break; + } + }); + self._tipQueue = tipQueue; + self._tipIndex = 0; + self.tipsInter = null; + // self._initTips(self._tipQueue[self._tipIndex ++]); + interTips(); + + function interTips() { + self.tipsInter = setTimeout(function () { + self._tipIndex = self._tipIndex > (self._tipQueue.length - 1) ? 0 : self._tipIndex; + self._initTips(self._tipQueue[self._tipIndex++]); + interTips(); + }, 1500); + } + }, _initTips: function (data) { + var self = this; + var cfg = { + left: data.left, + tip: self._typeof(data.tip, 'Array') ? data.tip[0] : data.tip + } + var oTip = self._tips; + if (!self._tips) { + var tips = '
' + '
' + '' + cfg.tip + '' + '
'; + self._tips = D.create(tips); + if (data.date === self.curdate) { + D.addClass(self._tips, 'tip-cur'); + } else { + D.removeClass(self._tips, 'tip-cur'); + } + D.append(self._tips, self.el); + D.css(self._tips, { + 'margin-left': -D.outerWidth(self._tips) / 2 + }); + } else { + D.get('span', self._tips).innerHTML = cfg.tip; + self.anim && self.anim.stop(); + if (data.date === self.curdate) { + D.addClass(self._tips, 'tip-cur'); + } else { + D.removeClass(self._tips, 'tip-cur'); + } + self.anim = new Anim(self._tips, { + left: cfg.left, + marginLeft: -D.outerWidth(self._tips) / 2 + }, 0.5, 'easeBoth', false, function () { + + }).run(); + } + + } + /** + * 日期格式化 + * @param {[type]} date [des] + * @param {[type]} format [description] + * @return {[type]} [description] + */, formatDate: function (date, format) { + var now = new Date(date); + var o = { + "M+": now.getMonth() + 1, //month + "d+": now.getDate(), //day + "h+": now.getHours(), //hour + "m+": now.getMinutes(), //minute + "s+": now.getSeconds(), //second + "q+": Math.floor((now.getMonth() + 3) / 3), //quarter + "S": now.getMilliseconds() //millisecond + } + if (/(y+)/.test(format)) { + format = format.replace(RegExp.$1, (now.getFullYear() + "") + .substr(4 - RegExp.$1.length)); + } + + for (var k in o) { + if (new RegExp("(" + k + ")").test(format)) { + format = format.replace(RegExp.$1, + RegExp.$1.length == 1 ? o[k] : + ("00" + o[k]).substr(("" + o[k]).length)); + } + } + + return format; + } +}); +module.exports = TimeLines; + + + + +}); \ No newline at end of file diff --git a/3.0.0/build/lib/main-min.js b/3.0.0/build/lib/main-min.js new file mode 100644 index 0000000..e64fe12 --- /dev/null +++ b/3.0.0/build/lib/main-min.js @@ -0,0 +1 @@ +KISSY.add("kg/timelines/3.0.0/lib/main",["node","base"],function(e,i,n,a){var t=(i("node").all,i("base"));a.exports=t.extend({initializer:function(){}},{ATTRS:{}})}); \ No newline at end of file diff --git a/3.0.0/build/lib/main.js b/3.0.0/build/lib/main.js new file mode 100644 index 0000000..b15796d --- /dev/null +++ b/3.0.0/build/lib/main.js @@ -0,0 +1,19 @@ +KISSY.add('kg/timelines/3.0.0/lib/main',["node","base"],function(S ,require, exports, module) { + +var EMPTY = ''; +var $ = require('node').all; +var Base = require('base'); + +module.exports = Base.extend({ + initializer:function(){ + + } +},{ + ATTRS:{ + + } +}); + + + +}); \ No newline at end of file diff --git a/3.0.0/build/mods-min.js b/3.0.0/build/mods-min.js new file mode 100644 index 0000000..88fcc58 --- /dev/null +++ b/3.0.0/build/mods-min.js @@ -0,0 +1 @@ +KISSY.config("requires",{"kg/timelines/3.0.0/index":["node","base","dom","event","anim"],"kg/timelines/3.0.0/lib/main":["node","base"]}); \ No newline at end of file diff --git a/3.0.0/build/mods.js b/3.0.0/build/mods.js new file mode 100644 index 0000000..8e90efc --- /dev/null +++ b/3.0.0/build/mods.js @@ -0,0 +1,14 @@ +/*generated by gulp-kmc*/ +KISSY.config('requires',{ + "kg/timelines/3.0.0/index": [ + "node", + "base", + "dom", + "event", + "anim" + ], + "kg/timelines/3.0.0/lib/main": [ + "node", + "base" + ] +}); \ No newline at end of file diff --git a/3.0.0/demo/index.html b/3.0.0/demo/index.html new file mode 100644 index 0000000..e797f91 --- /dev/null +++ b/3.0.0/demo/index.html @@ -0,0 +1,83 @@ + + + + + Timelines的demo + + + +

Timelines的demo

+
+ + + + diff --git a/3.0.0/guide/index.md b/3.0.0/guide/index.md new file mode 100644 index 0000000..78ac3f0 --- /dev/null +++ b/3.0.0/guide/index.md @@ -0,0 +1,61 @@ +## 综述 + +TimeLines是一个基于日期的事件提示的时间组件，目前在数据平台直播间中使用。 + +## 初始化组件 +``` + S.use('kg/timelines/3.0.0/index,kg/timelines/3.0.0/index.css', function (S, line) { + var data = [ + { + "date" : "2013-09-01", + "tip": "开学了！" + }, + { + "date" : "2013-09-07", + "tip": ["秋季热卖","有的是毛线"] + }, + { + "date" : "2013-09-23", + "tip": ["月饼大甩卖","土豪今天和我做了朋友"] + }, + { + "date" : "2013-10-01", + "tip" : ["去年买了个登山包","今年在双十一必须买土豪金"] + }, + { + "date" : "2013-10-15", + "tip" : "一定要让俗人看看什么才是土豪！" + }, + { + "date" : "2013-11-02", + "tip": "活动预热,还有9天双十一" + }, + { + "date" : "2013-11-03", + "tip": "活动预热,还有8天双十一" + }, + { + "date" : "2013-11-04", + "tip": "活动预热,还有7天双十一" + }, + { + "date" : "2013-11-10", + "tip": "活动预热,还有1天双十一" + }, + { + "date" : "2013-11-11", + "tip": "双11启动，土豪金，fighting!" + }, + { + "date" : "2014-05-15", + "tip" : "又出了个煤老板专用色。。。" + } + ]; + new line({ + container : "#J_TimeLine" + ,data : data + ,curDate : "2013-11-11" + }); + }) +``` +![TIMELINES](http://gtms02.alicdn.com/tps/i2/T1UUS3FdFcXXX8JDoo-743-151.jpg) diff --git a/3.0.0/gulpfile.js b/3.0.0/gulpfile.js new file mode 100644 index 0000000..eb318ca --- /dev/null +++ b/3.0.0/gulpfile.js @@ -0,0 +1,108 @@ +var path = require('path'); +var gulp = require('gulp'); +var kmc = require('gulp-kmc'); +var less = require('gulp-less'); +var css = require('gulp-mini-css'); +var kclean = require('gulp-kclean'); +var rename = require("gulp-rename"); +var filter = require('gulp-filter'); +var minify = require('gulp-minify'); +var XTemplate = require('xtemplate'); +var gulpXTemplate = require('gulp-xtemplate'); +var src = ".", + dest = "./build"; + +var root = process.cwd(); +var bower = require('./bower.json'); +var version = bower.version; +//包配置 +var pkg = "kg/"+path.basename(root)+"/"+version; +var comboSuffix = '-combo'; + +kmc.config({ + packages:[{ + name: pkg, + base: src + }] +}); + + +//使用kmc合并并编译kissy模块文件 +function renderKmc(fileName){ + var comboFiles = fileName.map(function(name){ + return { + src: pkg+"/"+name+".js", + dest: name + comboSuffix+".js" + }; + }); + var cleanFiles = fileName.map(function(name){ + return { + src:name+comboSuffix+'.js', + outputModule:pkg+'/'+name + }; + }); + return gulp.src([src+'/**/*.js','!./node_modules/**/*.js','!./test/**/*.js','!./gulpfile.js','!./build/**/*.js']) + //转换cmd模块为kissy模块 + .pipe(kmc.convert({ + kissy: true, + ignoreFiles: ['-min.js'] + })) + //合并文件 + .pipe(kmc.combo({ + deps:'mods.js', + files:comboFiles + })) + //优化代码 + .pipe(kclean({ + files:cleanFiles + })) + .pipe(minify()) + .pipe(filter(function(file){ + var files = fileName.map(function(name){ + return name+comboSuffix+'.js'; + }); + return files.indexOf(file.relative) == -1; + })) + .pipe(rename(function(file){ + fileName.forEach(function(name){ + file.basename = file.basename.replace(name+comboSuffix+'-min',name+'-min'); + }) + })) + .pipe(gulp.dest(dest)); +} + + +gulp.task('kmc', function() { + renderKmc(['index']); +}); + +gulp.task('mini-css', function(){ + return gulp.src([src+'/**/*.css','!./node_modules/**/*.css','!./build/**/*.css']) + .pipe(gulp.dest(dest)) + .pipe(css({ext:'-min.css'})) + .pipe(gulp.dest(dest)); +}); + +gulp.task('less', function(){ + return gulp.src([src+'/**/*.less','!./node_modules/**/*.less']) + .pipe(less()) + .pipe(gulp.dest(src)); +}); + +gulp.task('css',['less','mini-css']); + + +gulp.task('xtpl',function(){ + return gulp.src(src+'/**/*.xtpl') + .pipe(gulpXTemplate({ + wrap: 'kissy', + XTemplate: XTemplate + })) + .on('error',function(e){ + console.log(e); + }) + .pipe(gulp.dest(src)); +}); + + +gulp.task('default', ['kmc','css']); diff --git a/3.0.0/index.css b/3.0.0/index.css new file mode 100644 index 0000000..bc50b2d --- /dev/null +++ b/3.0.0/index.css @@ -0,0 +1,148 @@ +/** + * @时间线 + * @Author jixiangac + * @Email jixiangac@gmail.com + */ +.timeline-wrap { + font-size: 0; + /* 所有浏览器 */ + *word-spacing: -1px; + /* IE6、7 */ + height: 100px; + position: relative; + overflow: hidden; +} +.timeline-main { + padding-top: 32px; + position: absolute; + left: 0; + top: 0; + width: 2000px; +} +.timeline-wrap .timeline-node, +.timeline-wrap .timeline-line, +.timeline-wrap .timeline-dot, +.timeline-wrap .timeline-omission { + font-size: 12px; + letter-spacing: normal; + word-spacing: normal; + vertical-align: top; +} +.timeline-wrap .timeline-node { + cursor: pointer; +} +.timeline-node, +.timeline-cur, +.timeline-cur-left, +.timeline-cur-right, +.timeline-line, +.timeline-dot, +.timeline-omission { + display: inline-block; + *display: inline; + *zoom: 1; + width: 40px; + height: 30px; + /*overflow: hidden;*/ + background: url(http://gtms03.alicdn.com/tps/i3/T1QH5KFlJgXXbD2s7F-69-260.png) 0 0 no-repeat; + position: relative; +} +.timeline-node a { + font-size: 14px; + font-weight: bold; + color: #c4c4cc; + position: absolute; + bottom: 32px; + left: 0; + font-family: 'Arial'; + cursor: default; +} +.timeline-node a:hover { + text-decoration: none; +} +.timeline-blue-dot a { + color: #2275c3; +} +.timeline-cur a { + color: #b10000; +} +.timeline-blue-node { + background-position: 0 -40px; +} +.timeline-blue-node a { + color: #258ace; +} +.timeline-omission { + background-position: 0 -147px; + width: 20px; +} +.timeline-line { + background-position: 0 -120px; + width: 16px; +} +.timeline-cur { + background-position: 0 -81px; +} +.timeline-cur-left { + background-position: 0 -189px; +} +.timeline-cur-right { + background-position: 0 -223px; +} +.timeline-dot { + background-position: 0 -120px; + width: 33px; +} +.timeline-dot a { + font-size: 14px; + color: #999; + position: absolute; + bottom: 18px; + left: 0; + font-family: 'Arial'; + cursor: default; +} +.tip { + height: 24px; + line-height: 24px; + text-align: center; + background: #fff; + border: 1px solid #c3c3c3; + box-shadow: 0 0 5px #bebebe; + position: absolute; + top: 80px; + left: -19px; + color: #666; + font-weight: bold; + font-size: 12px; + padding: 0 10px; +} +.tip .arrow-grey, +.tip .arrow { + -webkit-backface-visibility: hidden; + width: 0; + height: 0; + border-width: 8px; + border-style: dashed dashed solid dashed; + border-color: transparent transparent #c3c3c3 transparent; + font-size: 0; + line-height: 0; + position: absolute; + left: 50%; + top: -16px; + margin-left: -8px; +} +/*当前时间*/ +.tip .arrow { + border-color: transparent transparent #fff transparent; + top: -7px; +} +.tip-cur { + border-color: #dfa8a8; + box-shadow: 0 0 5px #dfa8a8; + color: #b10000; + left: 37px; +} +.tip-cur .arrow-grey { + border-color: transparent transparent #dfa8a8 transparent; +} diff --git a/3.0.0/index.js b/3.0.0/index.js new file mode 100644 index 0000000..e1f48da --- /dev/null +++ b/3.0.0/index.js @@ -0,0 +1,391 @@ +var $ = require('node').all; +var Base = require('base'); +var D = require('dom'); +var E = require('event'); +var Anim = require('anim'); +var TimeLines = Base.extend({ + /** + * 初始化 + * @return {[type]} [description] + */ + initializer: function () { + debugger; + var self = this; + self.el = self.get('container'); + D.css(self.el, { + 'position': 'relative', + 'padding-top': '10px' + }); + self.curdate = self.get('curDate') || null; + //标记是否有不同年份 + var initYear = new Date().getFullYear(); + self.hashYear = {}; + self.hashYear[initYear] = true; + self.outerw = D.outerWidth(self.el); + //标记今天的日子 + self.today = self.get('today') || self.formatDate(new Date(), 'yyyy-MM-dd'); + self.isReToday = (self.today === self.curdate); + self._initDateGrid(self.get('data')); + } + /** + * 初始化TimeLine布局 + * @type {Array} + */, _initDateGrid: function (data) { + var self = this; + try { + if (!self._typeof(data, 'Array')) { + var err = new Error(); + err.name = '类型出错'; + err.message = '传入的data不是数组!'; + throw(err); + } + var timebody = self._initTimeNode('wrap', { + end: true + }); + timebody += self._initTimeNode('line', { + num: 3 + }); + //如果今天比数组的第一个日期还小就把今天放在最前面 + if (self._getTimeMs(self.today) < self._getTimeMs(data[0].date)) { + timebody = self._addmission(timebody, { + before: null, + after: data[0].date + }); + } + //装载节点 + S.each(data, function (item, index) { + //如果不是同一年，就打上跨年标记 + if (!self._isSameYear(item.date)) { + timebody += self._initTimeNode('dot', { + time: self.formatDate(item.date, 'yyyy') + }); + } + //add node + if (!(index === 0 && self.today === item.date)) { + var _booleanCur = self.curdate && (item.date == self.curdate); + if (self.today !== item.date || _booleanCur) { + //如果配置了时间就点亮 + var _nodeType = _booleanCur ? 'cur' : 'node'; + timebody += self._initTimeNode(_nodeType, { + time: self.formatDate(item.date, 'MM.dd') + }); + } + + } + if (self.today === item.date) { + self.isReToday = true; + } + //两个日期跨度太大的时候增加省略号 + timebody = self._addmission(timebody, { + before: item.date, + after: data[index + 1] && data[index + 1].date + }); + }); + if (self.outerw > 0) { + timebody += self._initTimeNode('line', { + num: Math.ceil(self.outerw / 16) + }); + } + D.append(D.create(timebody + '
'), self.el); + self.elwrap = D.get('.timeline-wrap', self.el); + //bind events + self._initNodeEvents(data); + } catch (e) { + console.log(e.message); + } + } + /** + * 初始化节点 + * @param {[type]} type [description] + * @param {[type]} end [description] + * @param {[type]} time [description] + * @param {[type]} num [description] + * @return {[type]} [description] + */, _initTimeNode: function (type, cfg) { + var self = this; + var timeArray = { + wrap: '
', + node: '
', + line: '
', + omission: '
', + shine: '
', + cur: '
', + dot: '
' + }; + var w = { + node: 40, + line: 16, + omission: 20, + shine: 40, + cur: 120, + dot: 33 + }; + if (type !== 'wrap') { + var _num = (cfg && cfg.num) || 1; + self.outerw -= w[type] * _num; + } + var _node = timeArray[type]; + if (cfg && cfg.time) { + _node += '' + cfg.time + ''; + } + if (cfg && cfg.end) { + return _node; + } + if (type === 'cur') { + _node += '
'; + } + if (cfg && cfg.num) { + _node += '
'; + for (var i = 0; i < cfg.num; i++) { + _node += timeArray[type] + '
'; + self.outerw -= w[type]; + } + return _node; + } + return _node + '
'; + }, _addToady: function (body) { + //放入今天的日期 + var self = this; + //如果设置了点亮日期并且今天要不等于设置的点亮日期 + if (self.curdate && self.today != self.curdate) { + return body + self._initTimeNode('shine', { + time: self.formatDate(self.today, 'MM.dd') + }); + } + return body; + } + /** + * 日期跨度间隔大的增加省略号 + * @return {[type]} [description] + */, _addmission: function (body, date) { + var self = this; + var _today = self._getTimeMs(self.today); + var _before, _after; + if (!date.before && date.after) { + _after = self._getTimeMs(date.after); + body = self._addToady(body); + body = cons(_today, _after); + return body; + } + //before time + _before = self._getTimeMs(date.before); + if (!date.after) { + if (_today > _before) { + body = cons(_before, _today); + body = self._addToady(body); + } + return body; + } + //after time + _after = self._getTimeMs(date.after); + + if (_today >= _before && _today < _after) { + if (_today !== _before) { + body = cons(_before, _today); + } + //增加今天日期的标识 + body = self._addToady(body); + if (_today !== _after) { + body = cons(_today, _after); + } + } else { + body = cons(_before, _after); + // body = self._addToady(body); + } + return body; + + function cons(before, after) { + var diff = (after - before) / (3600 * 1000 * 24); + var num = Math.floor(diff / 30); + num = num > 2 ? 2 : num; + // if (diff > 6) { + // return body += self._initTimeNode('omission', { + // num: num + // }); + // } else if (){ + // return body; + // } + switch (true) { + case diff > 2 && diff < 6: + return body += self._initTimeNode('dot'); + break; + case diff > 6: + return body += self._initTimeNode('omission', { + num: num + }); + break; + default: + return body; + } + } + }, _getTimeMs: function (date) { + return new Date(date).getTime(); + } + /** + * 数据类型的检测 + * @param {[type]} obj [description] + * @param {[type]} type [description] + * @return {[type]} [description] + */, _typeof: function (obj, type) { + return Object.prototype.toString.call(obj) === '[object ' + type + ']'; + }, _isSameYear: function (date) { + var self = this; + var _year = new Date(date).getFullYear(); + if (!self.hashYear[_year]) { + self.hashYear[_year] = true; + return false; + } + return true; + }, _initNodeEvents: function (data) { + var self = this; + var nodes = D.query('.timeline-node', self.el); + S.each(nodes, function (item, index) { + if (!self.isReToday && D.hasClass(item, 'timeline-blue-node')) { + D.css(item, { + cursor: 'default' + }); + nodes.splice(index, 1); + } + }); + var wrapleft = D.offset(self.elwrap).left; + //queue tips + var tipQueue = []; + var tipTotal = {}; + S.each(nodes, function (item, index) { + var _data = data[index]; + var _left = D.offset(item).left; + _data.left = _left - wrapleft + Math.ceil(D.outerWidth(item) / 2); + var _tipisarr = self._typeof(_data.tip, 'Array'); + var _pushtip; + if (_tipisarr) { + for (var i = 0, len = _data.tip.length; i < len; i++) { + _pushtip = { + left: _data.left, + date: _data.date, + tip: _data.tip[i] + } + tipQueue.push(_pushtip); + } + tipTotal[index] = len; + } else { + tipQueue.push(_data); + tipTotal[index] = 1; + } + var _sdata, _index, _count; + E.on(item, 'mouseover', function (e) { + self.anim && self.anim.stop(); + _index = _tipisarr ? Math.floor(Math.random() * _data.tip.length) : 0; + _count = 0; + for (var i = 0; i < index; i++) { + _count += tipTotal[i]; + } + self._tipIndex = _count + _index; + if (_tipisarr) { + _sdata = { + left: _data.left, + date: _data.date, + tip: _data.tip[_index] + } + } else { + _sdata = _data; + } + self._initTips(_sdata); + }); + }); + //stop anim + E.on(self.elwrap, 'mouseover mouseout', function (e) { + switch (e.type) { + case 'mouseover': + self.anim && self.anim.stop(true); + clearTimeout(self.tipsInter); + break; + case 'mouseout': + interTips(); + break; + } + }); + self._tipQueue = tipQueue; + self._tipIndex = 0; + self.tipsInter = null; + // self._initTips(self._tipQueue[self._tipIndex ++]); + interTips(); + + function interTips() { + self.tipsInter = setTimeout(function () { + self._tipIndex = self._tipIndex > (self._tipQueue.length - 1) ? 0 : self._tipIndex; + self._initTips(self._tipQueue[self._tipIndex++]); + interTips(); + }, 1500); + } + }, _initTips: function (data) { + var self = this; + var cfg = { + left: data.left, + tip: self._typeof(data.tip, 'Array') ? data.tip[0] : data.tip + } + var oTip = self._tips; + if (!self._tips) { + var tips = '
' + '
' + '' + cfg.tip + '' + '
'; + self._tips = D.create(tips); + if (data.date === self.curdate) { + D.addClass(self._tips, 'tip-cur'); + } else { + D.removeClass(self._tips, 'tip-cur'); + } + D.append(self._tips, self.el); + D.css(self._tips, { + 'margin-left': -D.outerWidth(self._tips) / 2 + }); + } else { + D.get('span', self._tips).innerHTML = cfg.tip; + self.anim && self.anim.stop(); + if (data.date === self.curdate) { + D.addClass(self._tips, 'tip-cur'); + } else { + D.removeClass(self._tips, 'tip-cur'); + } + self.anim = new Anim(self._tips, { + left: cfg.left, + marginLeft: -D.outerWidth(self._tips) / 2 + }, 0.5, 'easeBoth', false, function () { + + }).run(); + } + + } + /** + * 日期格式化 + * @param {[type]} date [des] + * @param {[type]} format [description] + * @return {[type]} [description] + */, formatDate: function (date, format) { + var now = new Date(date); + var o = { + "M+": now.getMonth() + 1, //month + "d+": now.getDate(), //day + "h+": now.getHours(), //hour + "m+": now.getMinutes(), //minute + "s+": now.getSeconds(), //second + "q+": Math.floor((now.getMonth() + 3) / 3), //quarter + "S": now.getMilliseconds() //millisecond + } + if (/(y+)/.test(format)) { + format = format.replace(RegExp.$1, (now.getFullYear() + "") + .substr(4 - RegExp.$1.length)); + } + + for (var k in o) { + if (new RegExp("(" + k + ")").test(format)) { + format = format.replace(RegExp.$1, + RegExp.$1.length == 1 ? o[k] : + ("00" + o[k]).substr(("" + o[k]).length)); + } + } + + return format; + } +}); +module.exports = TimeLines; + + + diff --git a/3.0.0/index.less b/3.0.0/index.less new file mode 100644 index 0000000..cbbfd35 --- /dev/null +++ b/3.0.0/index.less @@ -0,0 +1,147 @@ +/** + * @时间线 + * @Author jixiangac + * @Email jixiangac@gmail.com + */ +.timeline-wrap{ + font-size:0;/* 所有浏览器 */ + *word-spacing:-1px;/* IE6、7 */ + height: 100px; + position: relative; + overflow: hidden; +} +.timeline-main{ + padding-top: 32px; + position: absolute; + left: 0; + top: 0; + width: 2000px; +} +.timeline-wrap .timeline-node, +.timeline-wrap .timeline-line, +.timeline-wrap .timeline-dot, +.timeline-wrap .timeline-omission +{ + font-size: 12px; + letter-spacing: normal; + word-spacing: normal; + vertical-align:top; +} +.timeline-wrap .timeline-node{ + cursor: pointer; +} +.timeline-node, +.timeline-cur, +.timeline-cur-left, +.timeline-cur-right, +.timeline-line, +.timeline-dot, +.timeline-omission{ + display: inline-block; + *display: inline; + *zoom: 1; + width: 40px; + height: 30px; + /*overflow: hidden;*/ + background: url(http://gtms03.alicdn.com/tps/i3/T1QH5KFlJgXXbD2s7F-69-260.png) 0 0 no-repeat; + position: relative; +} +.timeline-node a{ + font-size: 14px; + font-weight: bold; + color: #c4c4cc; + position: absolute; + bottom: 32px; + left: 0; + font-family: 'Arial'; + cursor: default; +} +.timeline-node a:hover{ + text-decoration: none; +} +.timeline-blue-dot a{ + color: #2275c3; +} +.timeline-cur a{ + color: #b10000; +} +.timeline-blue-node{ + background-position: 0 -40px; +} +.timeline-blue-node a{ + color: #258ace; +} +.timeline-omission{ + background-position: 0 -147px; + width: 20px; +} +.timeline-line{ + background-position: 0 -120px; + width: 16px; +} +.timeline-cur{ + background-position: 0 -81px; +} +.timeline-cur-left{ + background-position: 0 -189px; +} +.timeline-cur-right{ + background-position: 0 -223px; +} +.timeline-dot{ + background-position: 0 -120px; + width: 33px; +} +.timeline-dot a{ + font-size: 14px; + color: #999; + position: absolute; + bottom: 18px; + left: 0; + font-family: 'Arial'; + cursor: default; +} +.tip{ + height: 24px; + line-height: 24px; + text-align: center; + background: #fff; + border: 1px solid #c3c3c3; + box-shadow: 0 0 5px #bebebe; + position: absolute; + top: 80px; + left: -19px; + color: #666; + font-weight: bold; + font-size: 12px; + padding: 0 10px; +} +.tip .arrow-grey, +.tip .arrow{ + -webkit-backface-visibility: hidden; + width: 0; + height: 0; + border-width: 8px; + border-style: dashed dashed solid dashed; + border-color: transparent transparent #c3c3c3 transparent; + font-size: 0; + line-height: 0; + position: absolute; + left: 50%; + top: -16px; + margin-left: -8px; +} +/*当前时间*/ +.tip .arrow{ + border-color: transparent transparent #fff transparent; + top: -7px; +} +.tip-cur{ + border-color: #dfa8a8; + box-shadow: 0 0 5px #dfa8a8; + color: #b10000; + left: 37px; +} +.tip-cur .arrow-grey{ + border-color: transparent transparent #dfa8a8 transparent; +} \ No newline at end of file diff --git a/3.0.0/lib/main.js b/3.0.0/lib/main.js new file mode 100644 index 0000000..fb7eb9b --- /dev/null +++ b/3.0.0/lib/main.js @@ -0,0 +1,16 @@ + +var EMPTY = ''; +var $ = require('node').all; +var Base = require('base'); + +module.exports = Base.extend({ + initializer:function(){ + + } +},{ + ATTRS:{ + + } +}); + + diff --git a/3.0.0/package.json b/3.0.0/package.json new file mode 100644 index 0000000..2b99294 --- /dev/null +++ b/3.0.0/package.json @@ -0,0 +1,22 @@ +{ + "name": "timelines", + "version": "3.0.0", + "devDependencies": { + "bufferstreams": "0.0.2", + "gulp": "^3.8.7", + "gulp-copy": "0.0.2", + "gulp-filter": "^1.0.2", + "gulp-kclean": "1.0.3", + "gulp-kmc": "1.0.24", + "gulp-less": "^1.3.5", + "gulp-mini-css": "0.0.3", + "gulp-minify": "0.0.5", + "gulp-minify-css": "^0.3.11", + "gulp-rename": "^1.2.0", + "gulp-uglify": "^1.0.1", + "gulp-util": "^3.0.0", + "gulp-xtemplate": "^1.2.2", + "memory-cache": "0.0.5", + "xtemplate": "3.3.3" + } +} \ No newline at end of file diff --git a/3.0.0/test/runner.html b/3.0.0/test/runner.html new file mode 100644 index 0000000..39c4038 --- /dev/null +++ b/3.0.0/test/runner.html @@ -0,0 +1,59 @@ + + + + + + Runner + + + + + + + + + + diff --git a/3.0.0/test/runner.js b/3.0.0/test/runner.js new file mode 100644 index 0000000..beba11d --- /dev/null +++ b/3.0.0/test/runner.js @@ -0,0 +1,3 @@ +KISSY.add(function(){ + //在这里requires需要运行的用例文件 +},{requires:['test/spec/index-spec']}) \ No newline at end of file diff --git a/3.0.0/test/spec/index-spec.js b/3.0.0/test/spec/index-spec.js new file mode 100644 index 0000000..1e7cb8c --- /dev/null +++ b/3.0.0/test/spec/index-spec.js @@ -0,0 +1,10 @@ +KISSY.add(function (S, Node,Demo) { + var $ = Node.all; + describe('timelines', function () { + it('Instantiation of components',function(){ + var demo = new Demo(); + expect(S.isObject(demo)).toBe(true); + }) + }); + +},{requires:['node','kg/timelines/3.0.0/']}); \ No newline at end of file diff --git a/3.0.0/totoro-config.json b/3.0.0/totoro-config.json new file mode 100644 index 0000000..33f03f0 --- /dev/null +++ b/3.0.0/totoro-config.json @@ -0,0 +1,3 @@ +{ + "runner":"./test/runner.html" +} \ No newline at end of file