fe / yohobuywap-node · Commits

Go to a project

Authored by 王洪广
Commit 1ebded3b2f0dbdf34be998422e030314b76494f4 1 parent 631102a4

调整导航

Inline Side-by-side
Showing 6 changed files with 158 additions and 122 deletions
... ... @@ -4,11 +4,13 @@
* @date: 2016/05/09
*/
'use strict';
const library = '../../../library';
// const library = '../../../library';
// const _ = require('lodash');
const outletModel = require('../models/outlet');
// const helpers = require(`${library}/helpers`);
const log = require(`${library}/logger`);
const renderData = {
module: 'outlet',
... ... @@ -20,7 +22,6 @@ const renderData = {
// res.send('error');
// };
exports.index = (req, res) => {
outletModel.getContent().then(result => {
res.render('outlet', Object.assign({}, renderData, result));
... ...
... ... @@ -6,11 +6,12 @@
'use strict';
const library = '../../../library';
const utils = '../../../utils';
// const _ = require('lodash');
const _ = require('lodash');
const ServiceAPI = require(`${library}/api`).ServiceAPI;
const sign = require(`${library}/sign`);
// const camelCase = require(`${library}/camel-case`);
const camelCase = require(`${library}/camel-case`);
const resourcesProcess = require(`${utils}/resources-process`);
const log = require(`${library}/logger`);
... ... @@ -33,10 +34,34 @@ const getOutletResource = () => {
});
};
const convertNavData = (list) => {
const formatData = [];
list = list || [];
list = camelCase(list);
_.forEach(list, (item) => {
formatData.push({
id: item.id,
name: item.sortName,
url: encodeURI(item.sortUrl)
});
});
return {data: formatData};
};
const getNavData = () => {
return api.get('3b8b45b8d87c8e44.json').then(result => {
const params = {
client_type: 'iphone',
os_version: 8.4,
screen_size: '320x568',
v: 7,
parent_id: 1107,
debug: 'XYZ'
}
return api.get('operations/api/v6/category/getCategory', sign.apiSign(params)).then(result => {
if (result && result.code === 200) {
return result.data;
return convertNavData(result.data);
} else {
log.error('奥莱资源位接口返回状态码 不是 200');
return result;
... ... @@ -52,7 +77,7 @@ exports.getContent = () => {
floorsData.nav = data[0];
floorsData.content = data[1];
console.log(floorsData.content);
// console.log(floorsData.content);
return floorsData;
});
... ...
{{# nav}}
<nav class="outlet-nav">
<ul>
{{#each nav}}
{{#each data}}
<li><a href="{{url}}">{{name}}</a></li>
{{/each}}
</ul>
... ...
... ... @@ -4,31 +4,32 @@
* @date 2016-05-29
*/
'use strict';
var $ = require("yoho-jquery");
var $ = require('yoho-jquery');
var EVENT_AFTER_PAINT = 'afterPaint';
var defaultOPtions = {
el: {},
// unix时间戳，单位应该是毫秒！
stopPoint: 0,
leftTime: 0,
template: '', //'${h}时${m}分${s-ext}秒'
template: '', // '${h}时${m}分${s-ext}秒'
varRegular: /\$\{([\-\w]+)\}/g,
clock: ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1],
effect: 'normal'
}
};
var effect = {
normal: {
paint: function () {
paint: function() {
var me = this,
content;
// 找到值发生改变的hand
$.each(me.hands, function (index, hand) {
$.each(me.hands, function(index, hand) {
if (hand.lastValue !== hand.value) {
// 生成新的markup
content = '';
$.each(me._toDigitals(hand.value, hand.bits), function (index, digital) {
$.each(me._toDigitals(hand.value, hand.bits), function(i, digital) {
content += me._html(digital, '', 'digital');
});
... ... @@ -38,8 +39,8 @@ var effect = {
});
}
}
}
var timer = (function () {
};
var timer = (function() {
var fns = [],
commands = [];// 操作指令
... ... @@ -47,29 +48,32 @@ var timer = (function () {
* timer
* 调用频率为100ms一次。努力精确计时，调用帧函数
*/
function timer() {
function timerIn() {
// 计算新时间，调整diff
var diff = +new Date() - timerIn.nextTime,
count = 1 + Math.floor(diff / 100);
// 循环处理fns二元组
var frequency, step,
i, len;
// 为避免循环时受到 对fns数组操作 的影响,
// add/remove指令提前统一处理
while (commands.length) {
commands.shift()();
}
// 计算新时间，调整diff
var diff = +new Date() - timer.nextTime,
count = 1 + Math.floor(diff / 100);
diff = 100 - diff % 100;
timer.nextTime += 100 * count;
timerIn.nextTime += 100 * count;
// 循环处理fns二元组
var frequency, step,
i, len;
for (i = 0, len = fns.length; i < len; i += 2) {
frequency = fns[i + 1];
// 100次/s的
if (0 === frequency) {
if (frequency === 0) {
fns[i](count);
// 1000次/s的
} else {
// 先把末位至0，再每次加2
... ... @@ -86,14 +90,16 @@ var timer = (function () {
}
// next
setTimeout(timer, diff);
setTimeout(timerIn, diff);
}
// 首次调用
timer.nextTime = +new Date();
timer();
timerIn.nextTime = +new Date();
timerIn();
function indexOf(item, arr) {
for (var i = 0, len = arr.length; i < len; ++i) {
var i, len;
for (i = 0, len = arr.length; i < len; ++i) {
if (arr[i] === item) {
return i;
}
... ... @@ -102,37 +108,44 @@ var timer = (function () {
}
return {
add: function (fn, frequency) {
commands.push(function () {
add: function(fn, frequency) {
commands.push(function() {
fns.push(fn);
fns.push(frequency === 1000 ? 1 : 0);
});
},
remove: function (fn) {
commands.push(function () {
var i = indexOf(fn, fns);
remove: function(fn) {
var i;
commands.push(function() {
i = indexOf(fn, fns);
if (i !== -1) {
fns.splice(indexOf(fn, fns), 2);
}
});
}
};
})();
}());
function Countdown(config) {
var cfg;
if (!(this instanceof Countdown)) {
return new Countdown(config);
}
config.el = $(config.el);
if (!config.el) return;
if (!config.el) {
return;
}
cfg = config.el.attr('data-config');
var cfg = config.el.attr('data-config');
if (cfg) {
cfg = JSON.parse(cfg.replace(/'/g, '"'));
config = $.extend(true, {}, defaultOPtions, cfg, config);
}
this.config = config;
this._init();
}
... ... @@ -141,40 +154,46 @@ $.extend(Countdown.prototype, {
* 初始化
* @private
*/
_init: function () {
_init: function() {
var me = this;
var el = me.config.el;
// 初始化时钟.
var hands = [];
// 分析markup
var tmpl = el.html();
var varRE = me.config.varRegular;
var clock;
var _reflow;
/**
* 指针结构
* hand: {
* type: string,
* value: number,
* lastValue: number,
* base: number,
* radix: number,
* bits: number,
* node: S.Node
* }
* type: string,
* value: number,
* lastValue: number,
* base: number,
* radix: number,
* bits: number,
* node: S.Node
* }
*/
me.hands = hands;
me.frequency = 1000;
me._notify = [];
// 分析markup
var tmpl = el.html();
var varRE = me.config.varRegular;
varRE.lastIndex = 0;
el.html(tmpl.replace(varRE, function (str, type) {
el.html(tmpl.replace(varRE, function(str, type) {
// 生成hand的markup
var content = '';
// 时钟频率校正.
if (type === 'u' || type === 's-ext') {
me.frequency = 100;
}
// 生成hand的markup
var content = '';
if (type === 's-ext') {
hands.push({type: 's'});
hands.push({type: 'u'});
... ... @@ -189,8 +208,9 @@ $.extend(Countdown.prototype, {
}));
// 指针type以外属性(node, radix, etc.)的初始化.
var clock = me.config.clock;
$.each(hands, function (index, hand) {
clock = me.config.clock;
$.each(hands, function(index, hand) {
var type = hand.type,
base = 100, i;
... ... @@ -213,8 +233,8 @@ $.extend(Countdown.prototype, {
me._reflow();
// bind reflow to me.
var _reflow = me._reflow;
me._reflow = function () {
_reflow = me._reflow;
me._reflow = function() {
return _reflow.apply(me, arguments);
};
timer.add(me._reflow, me.frequency);
... ... @@ -222,29 +242,31 @@ $.extend(Countdown.prototype, {
// 显示时钟.
el.show();
},
/**
* 获取倒计时剩余帧数
*/
_getLeft: function () {//{{{
_getLeft: function() { // {{{
var left = this.config.leftTime * 1000;
var end = this.config.stopPoint; // 这个是UNIX时间戳，毫秒级
if (!left && end) {
left = end - (+new Date());
}
this.left = left - left % this.frequency;
},//}}}
}, // }}}
/**
* 更新时钟
*/
_reflow: function (count) {
count = count || 0;
_reflow: function(count) {
var me = this;
count = count || 0;
me.left = me.left - me.frequency * count;
// 更新hands
$.each(me.hands, function (index, hand) {
$.each(me.hands, function(index, hand) {
hand.lastValue = hand.value;
hand.value = Math.floor(me.left / hand.base) % hand.radix;
});
... ... @@ -254,7 +276,7 @@ $.extend(Countdown.prototype, {
// notify
if (me._notify[me.left]) {
$.each(me._notify[me.left], function (index, callback) {
$.each(me._notify[me.left], function(index, callback) {
callback.call(me);
});
}
... ... @@ -266,26 +288,28 @@ $.extend(Countdown.prototype, {
return me;
},
/**
* 重绘时钟
* @private
*/
_repaint: function () {
_repaint: function() {
effect[this.config.effect].paint.apply(this);
this.config.el.trigger(EVENT_AFTER_PAINT);
},
/**
* 把值转换为独立的数字形式
* @private
* @param {number} value
* @param {number} bits
*/
_toDigitals: function (value, bits) {
value = value < 0 ? 0 : value;
_toDigitals: function(value, bits) {
var digitals = [];
value = value < 0 ? 0 : value;
// 把时、分、秒等换算成数字.
while (bits--) {
digitals[bits] = value % 10;
... ... @@ -295,6 +319,7 @@ $.extend(Countdown.prototype, {
return digitals;
},
/**
* 生成需要的html代码，辅助工具
* @private
... ... @@ -302,7 +327,7 @@ $.extend(Countdown.prototype, {
* @param {string} className
* @param {string} type
*/
_html: function (content, className, type) {
_html: function(content, className, type) {
if ($.isArray(content)) {
content = content.join('');
}
... ... @@ -325,16 +350,19 @@ $.extend(Countdown.prototype, {
return '<i class="' + className + '">' + content + '</i>';
},
/**
* 倒计时事件
* @param {number} time unit: second
* @param {Function} callback
*/
notify: function (time, callback) {
notify: function(time, callback) {
var notifies;
time = time * 1000;
time = time - time % this.frequency;
var notifies = this._notify[time] || [];
notifies = this._notify[time] || [];
notifies.push(callback);
this._notify[time] = notifies;
... ...
var $ = require('yoho-jquery'),
IScroll = require('yoho-iscroll'),
lazyLoad = require('yoho-jquery-lazyload'),
Countdown = require('./countdown').Countdown;
lazyLoad = require('yoho-jquery-lazyload');
lazyLoad($('img.lazy'));
... ... @@ -11,6 +10,17 @@ function initNavScroll() {
$lis = $navBox.find('li'),
iScroll;
function scroll(ele) {
var offset;
ele = ele || $navBox.find('li').eq(0)[0];
offset = -($navBox.find('ul').width() - 20) / 2;
setTimeout(function() {
iScroll.scrollToElement(ele, 400, offset);
}, 1);
}
iScroll = new IScroll($navBox[0], {
scrollX: true,
scrollY: false
... ... @@ -18,43 +28,13 @@ function initNavScroll() {
$navBox.on('click', 'li', function() {
var $this = $(this);
var i = $this.index();
$lis.eq(i).addClass('active').siblings().removeClass('active');
scroll($this[0]);
});
function scroll(ele) {
var offset = -($navBox.find('ul').width() - 20) / 2;
setTimeout(function() {
iScroll.scrollToElement(ele, 400, offset);
}, 1);
}
// scroll($navBox.find(".active")[0]);
}
function initCountDown() {
$('#demo1 .cd').each(function(index, node) {
Countdown({
el: node,
callback: function() {
alert(1);
}
});
});
var cd = Countdown({
el: '#demo4 .cd'
});
cd.notify(0, function() {
alert(1);
});
Countdown({
el: '#demo6 .cd',
stopPoint: 1464515700000,
effect: 'normal'
});
scroll($navBox.find('.active')[0]);
}
initNavScroll();
initCountDown();
... ...
.outlet-nav {
width:100%;
width: 100%;
height: 88px;
border-top:1px solid #e0e0e0;
border-bottom:1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
white-space: nowrap;
position: relative;
overflow: hidden;
ul{
padding:0 20px;
ul {
padding: 0 20px;
margin: 0;
display: table;
table-layout: fixed;
white-space: nowrap;
width: auto;
}
li{
li {
-webkit-box-flex: 1;
display: inline-block;
-webkit-box-align: center;
... ... @@ -23,25 +24,26 @@
vertical-align: top;
margin-right: 10px;
height: 88px;
a{
a {
display: inline-block;
width: auto;
height: 86px;
padding:0 20px;
padding: 0 20px;
line-height: 88px;
color: #b0b0b0;
font-size: 28px;
border-bottom: 6px solid #fff;
}
&.active{
a{
&.active {
a {
border-color: #3d3d3d;
color: #444;
}
}
&:last-child{
&:last-child {
margin-right: 0;
}
}
}
\ No newline at end of file
}
... ...