/**
* @fileoverview blog-list-plaza
* @desc 博文广场瀑布流展示模式，
* @author baohe.oyt<ouyangtao404@qq.com>
* @date 20120922
* @version 1.0
* @depends kissy, widgets/ImageCtrl/ImageCtrl,widgets/UserOperate/UserOperate,widgets/Waterfall/Waterfall,widgets/Pagination/Pagination,menubutton,template,widgets/Store/Store
*/
KISSY.app('LEHUO');
LEHUO.namespace('blogListPlaza');
LEHUO.blogListPlaza = (function () {
var S = KISSY,
D = S.DOM,
E = S.Event,
_A = S.all,
_O = S.one,
defaultWidth = 235,//图片默认宽度，修改的话，需要同步改模板
imageMaxHeight = 480,//图片最大高度
marginTop = 10,//瀑布流item的垂直间距
BREAK_MARK = '||',//多个热门标签的分隔符
isNormalListDefault = false,//列表浏览模式默认值（瀑布流）
isFirstTimeGetData = true,
listTypeLocalName = 'plazaListType',
maxNum = 99999,//阅读评论收集数最大值
maxNumStr = '99999+',//达到最大值时的替代string
minHeight = 90,//瀑布流文字块最低高度
waterfallPerPage = 50,
normalListPerPage = 50,
tagmap = {//热门标签对应表
jujia : "居家",
diy : "手工DIY",
jiaju : "家居",
xiaohuxing : "小户型",
jujiaqiaomen : "居家窍门",
zhuangxiu : "装修",
yijia : "宜家",
dapei : "搭配",
shaiwu : "晒物",
fushi : "服饰",
shishang : "时尚",
jiepai : "街拍",
peishi : "配饰",
zherou : "遮肉",
xianshou : "显瘦",
mingxing : "明星",
meishi : "美食",
tianpin : "甜品",
xiaochi : "小吃",
liangtang : "靓汤",
lanrencaipu : "懒人菜谱",
shoushenshipu : "瘦身食谱",
meibaican : "美白餐",
yingyangcan : "营养餐",
huazhuang : "化妆",
zatoufa : "扎头发",
bianfa : "编发",
huayanxian : "画眼线"
},
waterfallTemplate = '<div class="waterfall-item">\
<div class="item-con">\
<h3 class="title">\
<a href="/article_detail.htm?article_id={{articleId}}" target="_blank" title="{{articletitle}}">\
{{#if recommend != 0}}\
<span class="Jcss_jian">[荐]</span>\
{{/if}}\
{{#if original == 1}}\
<span class="Jcss_jian">[原创]</span>\
{{/if}}\
{{articletitle}}\
</a>\
</h3>\
<span class="author">作者：\
<a target="_blank" href="{{nameurl}}" title="{{username}}">{{username}}\
{{#if role == "2"}}\
<s class="vip-ico"></s>\
{{/if}}\
{{#if role == "5"}}\
<s class="vip-ico"></s>\
{{/if}}\
</a>\
</span>\
{{#if summarizeimg != ""}}\
<div class="img-box">\
<a class="big-img" target="_blank" href="/article_detail.htm?article_id={{articleId}}">\
<img class="oneimg" style="width:235px" src="{{summarizeimg}}"/>\
</a>\
</div>\
<s class="mask"></s>\
{{/if}}\
<p class="para">{{summarize}}<a class="lookMore" target="_blank" href="/article_detail.htm?article_id={{articleId}}">阅读全文</a></p>\
<ul class="operation clearfix">\
<li class="read-li">\
<a target="_blank" class="read icon" href="/article_detail.htm?article_id={{articleId}}" title="阅读">{{read}}</a>\
</li>\
<li class="collect-li J_operate" data-articleid="{{articleId}}" data-title="{{articletitle}}" data-userid="{{userid}}">\
{{#if isCollect}}\
<a class="collect icon cancelcollectbtn" href="javascript:void(0);" title="取消收集">{{collect}}</a>\
{{/if}}\
{{#if !isCollect}}\
<a class="collect icon collectbtn" href="javascript:void(0);" title="收集">{{collect}}</a>\
{{/if}}\
</li>\
<li class="comment-li" data-articleid="{{articleId}}" data-title="{{articletitle}}" data-userid="{{userid}}">\
<a class="comment icon" target="_blank" href="/article_detail.htm?article_id={{articleId}}" title="评论">\
{{#if commentcount != 0}}\
{{commentcount}}\
{{/if}}\
</a>\
</li>\
</ul>\
</div>\
<div class="boxshadow"></div>\
</div>',
listTemplate = '<div>\
<div class="blog-list-item clearfix">\
<div class="list-item-left">\
<a href="{{nameurl}}" target="_blank" class="portrait">\
{{#if portrait == ""}}\
<img src="http://a.tbcdn.cn/app/sns/img/default/avatar-120.png" alt="" />\
{{/if}}\
<img src="{{portrait}}" alt="" />\
{{#if role == "2"}}\
<s class="vip-ico"></s></a>\
{{/if}}\
{{#if role == "5"}}\
<s class="vip-ico"></s></a>\
{{/if}}\
<a href="{{nameurl}}" target="_blank" class="article-author">{{username}}</a>\
</div>\
<div class="list-item-right">\
<div class="item-right-center clearfix">\
<div class="center-describe">\
<a href="/article_detail.htm?article_id={{articleId}}" target="_blank" class="article-name">\
{{#if recommend != 0}}\
<span class="Jcss_jian">[荐]</span>\
{{/if}}\
{{#if original == 1}}\
<span class="Jcss_jian">[原创]</span>\
{{/if}}\
{{articletitle}}\
</a>\
</div>\
<div class="article-content clearfix">\
{{#if summarizeimg != ""}}\
<div class="img-wrap"><a href="/article_detail.htm?article_id={{articleId}}" target="_blank"><img class="oneimg" src="{{summarizeimg}}" alt="" /></a></div>\
{{/if}}\
<div class="article-text">{{summarize}}<a href="/article_detail.htm?article_id={{articleId}}" target="_blank" class="lookMore">阅读全文</a></div>\
<div class="article-tags">\
<span class="{{#if summarizeimg != ""}}tags-wrap-small{{#elseif summarizeimg == ""}}tags-wrap{{/if}}">\
{{#each tags}}\
<a target="_blank" href="/article_plaza.htm?per_page=30&pageNum=1&key={{encodeURIComponent(_ks_value)}}&newArticle=false&count=false">{{_ks_value}}</a>\
{{/each}}\
</span>\
</div>\
</div>\
{{#if sourceUrl != ""}}\
<div class="source">来源<div class="divpop hidden"><b></b><a href="{{sourceUrl}}" target="_blank">{{from}}</a></div></div>\
{{/if}}\
<ul class="operation clearfix">\
<li class="comment-li" data-articleid="{{articleId}}" data-title="{{articletitle}}" data-userid="{{userid}}">\
<a class="comment icon" target="_blank" href="/article_detail.htm?article_id={{articleId}}" title="评论">\
{{#if commentcount != 0}}\
{{commentcount}}\
{{/if}}\
</a>\
</li>\
<li class="collect-li J_operate" data-articleid="{{articleId}}" data-title="{{articletitle}}" data-userid="{{userid}}">\
{{#if isCollect}}\
<a class="collect icon cancelcollectbtn" href="javascript:void(0);" title="取消收集">{{collect}}</a>\
{{/if}}\
{{#if !isCollect}}\
<a class="collect icon collectbtn" href="javascript:void(0);" title="收集">{{collect}}</a>\
{{/if}}\
</li>\
<li class="read-li">\
<a target="_blank" class="read icon" href="/article_detail.htm?article_id={{articleId}}" title="阅读">{{read}}</a>\
</li>\
</ul>\
</div>\
<div class="list-decorate"></div>\
<b class="list-c"></b>\
<div class="list-boxshadow"></div>\
</div>\
</div>\
</div>',
paginationHTML = '{{#! 显示首页 }}'+
'{{#if currentPage === startPage }}'+
'<a class="pg-prev pg-first pg-disabled">首页</a>'+
'{{#else}}'+
'<a class="pg-prev pg-first" href="#contents" data-page="{{ startPage }}">首页</a>'+
'{{/if}}'+
''+
'{{#! 显示上一页 }}'+
'{{#if currentPage === startPage }}'+
'<a class="pg-prev pg-disabled">上一页</a>'+
'{{#else}}'+
'<a class="pg-prev" href="#contents" data-page="{{ currentPage - 1 }}">上一页</a>'+
'{{/if}}'+
''+
'{{#if showPageNum }}'+
'{{#! 左边固定显示几页, 如固定显示 1 和 2 }}'+
'{{#if currentPage > startPage + alwaysDisplayCount - 1}}'+
'{{#for var i = 0; i < alwaysDisplayCount; i++ }}'+
'{{#! 避免后面重复显示 }}'+
'{{#if i + startPage < startIndex }}'+
'<a class="pg-page pg-item" href="#contents" data-page="{{ i + startPage }}">{{ i + startPage }}</a>'+
'{{/if}}'+
'{{/for}}'+
'{{/if}}'+
''+
'{{#! 是否显示省略号 }}'+
'{{#if ellipseText && startIndex > startPage + alwaysDisplayCount }}'+
'<span class="pg-item">…</span>'+
'{{/if}}'+
''+
'{{#! 显示页数 }}'+
'{{#for var i = startIndex; i <= endIndex; i++ }}'+
'{{#if currentPage !== i }}'+
'<a class="pg-page pg-item" href="#contents" data-page="{{ i }}">{{ i }}</a>'+
'{{#else}}'+
'<span class="pg-current pg-item">{{ i }}</span>'+
'{{/if}}'+
'{{/for}}'+
''+
'{{#! 是否显示省略号 }}'+
'{{#if ellipseText && endIndex < endPage - alwaysDisplayCount }}'+
'<span class="pg-item">…</span>'+
'{{/if}}'+
''+
'{{#! 右边固定显示几页 }}'+
'{{#if currentPage < endPage - alwaysDisplayCount + 1 }}'+
'{{#for var i = endPage - alwaysDisplayCount + 1; i <= endPage; i++ }}'+
'{{#if i > endIndex }}'+
'<a class="pg-page pg-item" href="#contents" data-page="{{ i }}">{{ i }}</a>'+
'{{/if}}'+
'{{/for}}'+
'{{/if}}'+
'{{/if}}'+
''+
'{{#! 显示下一页 }}'+
'{{#if currentPage === endPage }}'+
'<a class="pg-next pg-disabled">下一页</a>'+
'{{#else}}'+
'<a class="pg-next" href="#contents" data-page="{{ currentPage + 1 }}">下一页</a>'+
'{{/if}}'+
''+
'{{#! 显示末页 }}'+
'{{#if currentPage === endPage }}'+
'<a class="pg-next pg-last pg-disabled" href="#contents">末页</a>'+
'{{#else}}'+
'<a class="pg-next pg-last" href="#contents" data-page="{{ endPage }}">末页</a>'+
'{{/if}}'+
''+
'{{#! 显示当前页和总页数}}'+
'<span class="pg-skip">'+
'共{{ endPage - startPage + 1 }}页 到第'+
'<!--<form method="get" action="/search?q=mp3&tab=all" >-->'+
'<input type="text" id="J_jumpTo" size="2" class="pg-jump" value="{{ currentPage }}"/>页'+
'<button type="submit" class="J_jumpToBtn pg-next">确定</button>'+
'<!--</form>-->'+
'</span>'+
'<select name="decorateSelect" id="decorateSelect">'+
'<option value="10">10</option>'+
'<option value="20">20</option>'+
'<option value="30">30</option>'+
'<option value="40">40</option>'+
'<option value="50">50</option>'+
'</select>',
//loading
loading = D.create('<img src="http://img01.taobaocdn.com/tps/i1/T1kKy9XnNcXXXXXXXX-42-42.gif" class="loading" />');
loading.hide = function() {
var self = this;
D.remove(self);
};
loading.show = function() {
var self = this,
con = D.get('#page-content-5');
if(D.contains(con, self) || D.get('.loading', con))return;//检测容器中是否已经存在该元素
D.prepend(self, con);
};
/**
* this的常用属性如下：
*
* content 容器
* leftMessage 待加载数据集合
* pagesize 一页信息个数???
* message 所有请求来的的信息
* isNormalList 是不是常规列表(注意！为了有记忆功能，不要直接赋值，要用工具set_isNormalList赋值)
* isNewArticle 是不是最新浏览
* store 本地存储的实例化对象
* toTopBtn 回到顶部按钮
* isCreateNormalListStructure 普通模式，每页第一次为false，scroll触发信息插入为true，每次翻页重新置false
* isCreateWaterFallStructure 瀑布流模式，同上
* widgets 相关组件
*
*/
return {
config: {
getPageUrl : "",
getListUrl : "",//废弃
param:{},
collectajax:'/ajax/article_collect.htm',
cancelcollect:'/ajax/article_collect.htm?p=delete',
//获取已有专辑列表
getAlbumsAjax : '/ajax/album_title_list.htm',
//创建专辑
createNewAjax : '/ajax/album_create.htm'
},
init: function() {
var self = this,
widgetStr = 'widgets/ImageCtrl/ImageCtrl,widgets/UserOperate/UserOperate,widgets/Waterfall/Waterfall,widgets/Pagination/Pagination,menubutton,template,widgets/Store/Store';
S.use(widgetStr, function(S, IC, UO, Waterfall, Pagination, MenuButton, Template, Store) {
self.widgets = {
//操作给常规list设置图片的组件
'IC': IC,
//用户操作组件（收集和取消收集等）
'UO': UO,
'Waterfall': Waterfall,
'Pagination': Pagination,
'MenuButton': MenuButton,
'Template': Template,
'Store': Store
};
S.ready(function() {
self._initParam();
// 优先从url上抓取key，填充至当前标签
self.renderHotLabel(function() {
//初始化热门标签筛选
self.bindMoreLabelEvent();
});
//初始化“回到顶部功能”
self._backTop();
//初始化控制板展示
self.setRankAndMode();
//监听热门文章和最新文章的切换按钮，再渲染页码，回调函数中请求数据
self._sortType();
//列表模式切换监听
self._modeType();
//渲染信息
self._renderData();
});
});
},
/**
* 初始设置参数
*/
_initParam: function() {
var self = this,
listType,//从本地存储取出值
rankType = self.getArguments("newArticle"),//取是按照“热门”还是“最新”排列
modeType = self.getArguments("normalList");//取是按照“常规”还是“瀑布流”排列
self.store = new self.widgets.Store({type:'local'});//本地存储的实例化对象
listType = self.store.get(listTypeLocalName);
self.isNewArticle = (rankType === 'false' || rankType === 'undefined')? false : true;
//链接里有明确的normalList = true或者false的优先，本地存储的次之，最后再默认的
if(modeType === 'true' || modeType === 'false'){
(modeType === 'true')? self.set_isNormalList(true) : self.set_isNormalList(false);
}else{
listType? self.set_isNormalList(listType) : self.set_isNormalList(isNormalListDefault);
}
self.content = D.get('#page-content-5');
self.isCreateNormalListStructure = false;//是否已经绑创建通浏览模式的结构，事件监听；
self.isCreateWaterFallStructure = false;//是否已经创建好瀑布流的结构；
self.waterRenderNum = 10;//瀑布流一次渲染10个；
},
/**
* 重新加载数据（1.初次打开，2. 浏览模式切换）
*/
_renderData: function() {
var self = this;
//请求页面总页数
self._requestAllData(function(idx) {
//idx是当前数据的页码，翻页的时候用，这里不用
self._createPagination();
});
},
/**
* 热门标签部分的初始化
*/
bindMoreLabelEvent: function() {
var self = this,
labelBox = S.one('.inner'),
labelUlHeight = S.one('.labelList').height(),
moreLabel = S.one('.tips-bar .morelabel');
if(labelUlHeight <= 30)return;
moreLabel.show();
moreLabel.on('click', function(e) {
if(labelBox.hasClass('lock')){
labelBox.removeClass('lock');
moreLabel.html('收起');
moreLabel.addClass('open');
return;
}
labelBox.addClass('lock');
moreLabel.html('更多');
moreLabel.removeClass('open');
});
},
/**
* 通过
* isNormalList 是不是常规列表
* isNewArticle 是不是最新浏览
* 来重新设置展示（操作面板、回顶按钮）
*/
setRankAndMode: function() {
var self = this,
rankBtn = D.get('#J_check_rank'),
modeBtn = D.get('#J_check_mode'),
rankClassName = self.isNewArticle? 'new' : 'hot',
currentRank = D.get('.'+ rankClassName, rankBtn);
D.addClass(currentRank, 'current');
D.prepend(currentRank, rankBtn);
D.removeClass(D.next(currentRank), 'current');
if(self.isNormalList) {//常规list
D.addClass(modeBtn, 'first');
} else {//瀑布流
D.removeClass(modeBtn, 'first');
}
//重置回到顶部按钮的水平位置
self.toTopBtn.resetMarginRight();
},
/**
* 面包屑的展示
*/
renderHotLabel: function(callback) {
var self = this,
newCrumbs = '',//最新的面包屑
crumbs = D.get('.current-tips'),//面包屑容器
currentTag = D.get("#J_tagInfo"),//可能不需要了
tagName = self.getArguments("key"),//取参数key
hottag = self.getArguments("hottag"),//取热门标签
//hotBtn = D.get("#hot-type"),
//newBtn = D.get("#new-type"),
labelListBox = D.get('.labelList'),//筛选标签容器
labelListHtml = '',
labelList,
len,
tags,//把key参数值断开的集合
hottagname = tagmap[hottag];//获得热门标签参数的对应中文
//赋值给这里的命名空间，给发请求的时候使用
self.key = (!tagName || tagName === 'undefined')? '' : tagName ;
//热门标签请求并且渲染
S.ajax({
url: self.config.siftUrl,
dataType: 'json',
data: {
key: encodeURIComponent(self.key)
},
success: function(data) {
if(!data.success)return;
//返回空的数组，没有相关标签
if(data.labelList.length === 0)return;
S.one('.tips-bar').one('.inner').show();
labelList = data.labelList;
len = labelList.length
for(var i=0; i<len; i++){
labelListHtml += '<li><a href="'+ labelList[i].link +'">'+ labelList[i].name +'</a></li>';
}
D.html(labelListBox, labelListHtml);
callback();
}
});
//hottag存在
if(hottagname != '' && hottagname != undefined) {
newCrumbs = D.html(crumbs) + '<span class="point">></span><a href="#" id="J_tagInfo">'+ hottagname +'</a>';
D.html(crumbs, newCrumbs);
document.title = hottagname+' — 淘宝乐活+';
return;
}
if(self.key == '') {
document.title = '全部标签'+' — 淘宝乐活+';
return;
}
var tags = decodeURIComponent(tagName).split(BREAK_MARK),
len = tags.length;
document.title = tags[len-1]+' — 淘宝乐活+';
for(var i=0; i<len; i++) {
if(i == len - 1){
newCrumbs += '<span class="point">></span><a href="javascript:void(0);" id="J_tagInfo">'+ tags[i] +'</a>';
continue;
}
newCrumbs += '<span class="point">></span><a href="/article_plaza.htm?per_page=30&pageNum=1&key='+ encodeURIComponent(tags[i]) +'" id="J_tagInfo">'+ tags[i] +'</a>';
}
D.html(crumbs, D.html(crumbs) + newCrumbs);
},
/**
* 重新设置渲染条件
* 1.页面翻页的时候用
*/
resetPageParam: function() {
var self = this,
brooks,
paganation;
loading.show();
//创建新瀑布流实例前，销毁之前的瀑布流实例
self.waterfall = self.waterfall || {};
if(self.waterfall.waterfallCase){
self.waterfall.waterfallCase.end();
}
/**
* 给普通list,清理事件
*/
self._stopNormalList();
//普通模式
//{{
if(self.isNormalList) {
self.isCreateNormalListStructure = false;//翻页的后，结构需要重新来
D.html(self.content, '');
paganation = D.get('.dr-blog-list-plaza #page5');
if(!paganation){
D.append(D.get('#page5'), D.get('.dr-blog-list-plaza'));
}
return;
}
//}}
//瀑布流模式
//{{
if(D.get('#page-content-5 .leftCon')) {
var brooks = D.query('.J_plaza_brook'),
len = brooks.length;
for(var i=0; i<len; i++) {
D.html(brooks[i], '');
}
self.isCreateWaterFallStructure = true;//表示已经创建瀑布流结构
} else {
self.isCreateWaterFallStructure = false;//表示未创建瀑布流结构
}
//把页码挪到大容下中
paganation = D.get('.dr-blog-list-plaza #page5');
if(paganation){
D.insertAfter(paganation, D.get('#contents'));
}
//}}
},
/**
* 当前页信息渲染结束后的操作
* 1.展示页码
*/
_currentPageRenderOver: function() {
var self = this;
//普通模式
if(self.isNormalList) {
D.css("#page5", 'display' , 'block');
E.remove(window, 'resize scroll', self._eventBlogList.renderFn);
return;
}
//瀑布流模式
D.css("#page5", 'display' , 'block');
},
/**
* 渲染方式选择器
*/
_rendering: function(){
var self = this;
//普通列表
if(self.isNormalList){
//给普通的列表绑定渲染信息的事件监听,只在第一次绑定！
if(!self.isCreateNormalListStructure){
self._createNormalListStructure();
}
self._createList();
return;
}
//瀑布流
//给瀑布流绑定渲染信息的事件监听,只在第一次绑定！
if(!self.isCreateWaterFallStructure){
self._createWaterFallStructure();
}
self._createWaterFall();
},
/**
* 热门排序和最新文章切换
*/
_sortType: function() {
var self = this,
rankBtn = D.get('#J_check_rank');
E.on(rankBtn, 'mouseenter', function(e) {
D.removeClass(rankBtn, 'lock');
});
E.on(rankBtn, 'mouseleave', function(e) {
D.addClass(rankBtn, 'lock');
});
E.on(D.get('.hot', rankBtn), 'click', function(e) {
e.halt();
//D.addClass(rankBtn, 'lock');
if(D.hasClass(e.currentTarget, 'current'))return;
D.addClass(rankBtn, 'lock');
self.isNewArticle = false;
self.setRankAndMode();
//hot和new切换，页码数据是一样的
self._createPagination();
});
E.on(D.get('.new', rankBtn), 'click', function(e) {
e.halt();
//D.addClass(rankBtn, 'lock');
if(D.hasClass(e.currentTarget, 'current'))return;
D.addClass(rankBtn, 'lock');
self.isNewArticle = true;
self.setRankAndMode();
//同hot
self._createPagination();
});
},
/**
* 列表模式切换（常规和瀑布流）
*/
_modeType: function() {
var self = this,
modeBtn = D.get('#J_check_mode');
E.on(D.get('.list', modeBtn), 'click', function(e) {
e.halt();
if(D.hasClass(modeBtn, 'first'))return;
self.set_isNormalList(true);
self.setRankAndMode();
self._createNormalListStructure();
loading.show();
//模式改变，页码会变，不能直接_createPagination
self._renderData();
});
E.on(D.get('.big-img', modeBtn), 'click', function(e) {
e.halt();
if(!D.hasClass(modeBtn, 'first'))return;
self.set_isNormalList(false);
self.setRankAndMode();
self._createWaterFallStructure();
loading.show();
//模式改变，页码会变，不能直接_createPagination
self._renderData();
});
},
/**
* 用于设置和获取self.isNormalList的值
*/
set_isNormalList: function(b) {
var self = this;
if(typeof b == 'boolean'){
self.store.set(listTypeLocalName, b)
self.isNormalList = b;
}
return self.isNormalList;
},
/**
* 获取url参数的值
*/
getArguments: function(name) {
var reg = new RegExp("(^|\\?|&|#)"+ name +"=([^&]*)", "g"),
cs;
window.location.href.replace(reg, function($1,$2,$3){cs = !$3 ? '' : $3; });
return decodeURIComponent(cs);
},
/**
* 判断图片是否超高
* 最大高度为 imageMaxHeight
* 宽度固定为 defaultWidth
*/
isOverHeight: function(obj) {
var self = this;
if(imageMaxHeight/defaultWidth < obj.height/obj.width){//确定超高
return true;
}
return false;
},
/**
* 请求list所有信息
*/
_requestAllData: function(callback, idx) {
var self = this,
hottag = self.getArguments("hottag"),
pageAllNum = D.attr(D.get("#page5"), "data-page"),
topid = self.getArguments("topid"),
hottag = self.getArguments("hottag"),
dataArguments;
//第一次请求现实loading，其他情况，在清理信息之后loading，体验更好
if(isFirstTimeGetData){
loading.show();
}
idx = (idx && (typeof idx == 'number' || typeof idx == 'string'))? idx : 1;
topid = (topid !== 'undefined')? topid : '';
dataArguments = {
//每页的信息个数
'pageSize' : self.isNormalList? normalListPerPage : waterfallPerPage,
'hottag' : hottag,
'key' : encodeURIComponent(self.key),
'newArticle': self.isNewArticle,
'count' : !self.isNewArticle,
'topid' : topid,
'page' : idx,
'_t' : S.now()
};
if(topid!='undefined') {
dataArguments.topid = topid;
}
S.ajax({
url: self.config.getListUrl,
dataType: 'json',
data: dataArguments,
success: function(data) {
//检测和处理异常数据，返回数据，是正常的true还是异常false
var isOk = self._checkSolveRequestDataAbnormal(data);
if(!isOk)return;
self.changePageNum = data.totalPage;//翻页配置设置为返回的总页数
self.message = data;//给_statusSwitch备用
callback(idx);
}
});
},
/**
* 对请求数据的状态分析（status的值），再启动渲染
*/
_statusSwitch: function(idx, ready) {
var self = this,
// newtype = D.prop(D.get("#new-type"), "checked"),
// hottype = D.prop(D.get("#hot-type"), "checked"),
//hottag = self.getArguments("hottag"),
newSelect,
rs = self.message;
//返回顶部，从第一条开始看
scroll(0,0);
//防止相应时间过长出现翻页
D.css("#page5", 'display', 'none');
if (rs.status === 200) {
loading.hide();
//创建list
self.leftMessage = rs;//把所有信息都放到全局的剩余信息里(里面会越来越少)
//首次加载数据
self._rendering();
// 加载完内容后, 通知下分页器更新加载状态
ready(idx);
}else if(rs.status === 1) {//最后一页
var pgNextBtn = D.get('a.pg-next');
//remove小菊花
D.html(self.content, '');
//创建list
//self._createList(rs);
self.leftMessage = rs;//把所有信息都放到全局的剩余信息里(里面会越来越少)
//首次加载数据
self._rendering();
//显示分页、移除翻页按钮功能
D.css('#page5', 'display' , 'block');
D.addClass(pgNextBtn, 'pg-disabled');
E.on(pgNextBtn, 'click', function(e){
e.halt();
});
} else {//请求的数据异常
self._checkSolveRequestDataAbnormal(rs);
}
/*老代码，不知道用处是什么,先留着
var pgSkip = pgFirst = D.get("a.pg-first"),
pgLast = D.get("a.pg-last");
D.remove([pgFirst, pgLast]);
cacheIdx = idx;
*/
},
/**
* 处理请求有误信息
* 有异常返回true，否则false
*/
_checkSolveRequestDataAbnormal: function(rs) {
var self = this;
if(rs.status === 0) {//博文广场无数据
var urlKey = encodeURIComponent(self.getArguments("key"));
D.html(self.content, '<div class="noData">很抱歉，暂时还没有关于' + decodeURIComponent(urlKey).split(BREAK_MARK).join('、') + '的博文哦，去 <a href="/article_plaza.htm">广场</a> 逛逛吧！</div>')
return false;
}else if(rs.status === 400) {//个人中心无数据
D.html(self.content, '<div class="noData">您暂时还没有任何博文动态哦，去 <a href="/article_plaza.htm">广场</a> 逛逛吧！</div>')
return false;
}
return true;
},
/**
* 分页
* //tag -> 标签 newtype -> 最新排序 hottype -> 热门排序 选择排序radio是获取最新状态
*/
_createPagination: function() {
var self = this,
pagination,
newSelect;
//self.pagesize = self.isNormalList? 30 : 50;
if(self.pagination){
self.pagination.reset();
}
self.pagination = new self.widgets.Pagination({
container: '#page5',
totalPage: self.changePageNum,
template: paginationHTML,
callback: function(idx, pg, ready) {
self.resetPageParam();
/**
* 从init过来的已经有数据，从按页码来的要重新请求数据
*/
if(isFirstTimeGetData) {
isFirstTimeGetData = false;
self._statusSwitch(idx, ready);//请求信息
return;
}
self._requestAllData(function(idx) {
self._statusSwitch(idx, ready);//请求信息
}, idx);
ready(idx);
},
events: {
'J_jumpToBtn': {
click: function(e) {
var pg = this,
val = pg.get('container').one('#J_jumpTo').val();
// 对用户指定翻页数做限制（输入负数则跳到第一页，输入数大于总页数则到最后一页）
if(val<1)
{
val=1;
}else if(val > self.changePageNum)
{
val = self.changePageNum;
}
pg.page(val);
}
}
}
});
pagination = self.pagination;
newSelect = function() {
var select = self.widgets.MenuButton.Select.decorate('#decorateSelect', {
prefixCls:"c2c-",
menuAlign:{
offset:[0,-1]
},
menuCfg:{
width:82,
height:150,
elStyle:{
overflow:"auto",
overflowX:"hidden"
}
}
});
select.on("click", function(e) {
self.pagesize = select.get("value");
// 更新页码后, 重新获取数据;
pagination.page(pagination.get('currentPage'));
});
select.set("value", self.pagesize);
return select;
};
select = newSelect();
pagination.on('beforePageChange', function(v) {
v.halt();
// 更新分页器前, 销毁其他组件
select && select.destroy();
});
pagination.on('afterPageChange', function(v) {
v.halt();
// 重新初始化 select
select = newSelect();
});
pagination.reset = function() {
var self = this;
container = self.get('container');
var newPage = D.create('<div style="display:none" id="page5" class="pagination"></div>');
D.insertAfter(newPage, container[0]);
container.remove();
};
},
/**
* 瀑布流的列表模式
*/
_createWaterFall: function(){
var self = this;
self.waterfall.waterfallCase = new self.widgets.Waterfall('#contents', {
brooks: D.query('.J_plaza_brook'),
//给每纵列的基本高度，是顶部不齐的，能尽量底部对齐
basicHeight: [0, 0, 0, 410],
//图片的class，用于在插入元素之前操作元素
imageClass: 'oneimg',
/**
* requestSuccess 参数为瀑布流代码块
* end 结束瀑布流
* context 瀑布流组件的上下文
*/
load: function(requestSuccess, end, context) {
self._packageMessage(requestSuccess, end, context);
},
//单个item插入之前
//此时图片已经算好高度了
insertBefore: function(imgData) {
var _self = this;//该item
if(!imgData.isHasImg)return;//没有图片的item
if(self.isOverHeight(imgData)) {
var img = D.get('.big-img', _self);
D.css(img, 'height', imageMaxHeight);
D.css(D.get('.mask', D.parent(img, '.waterfall-item')), 'display', 'block');
}
},
//单个item插入之后
insertAfter: function(imgData) {
var _self = this,//该元素
para,
height;
if(imgData.isHasImg) return;//item存在大图片时不进行限高操作
para = D.get('.para', _self),
height = D.height(para);
if(height < minHeight){
D.css(para, 'height', minHeight+'px');
}
},
//单个item显示完整（渐隐）
itemComplete: false
});
},
/**
* 限制几项数据的最大值
*/
_limiteMaxNum: function(currentItem) {
var self = this;
currentItem.collect = (currentItem.collect <= maxNum)? currentItem.collect : maxNumStr;
currentItem.read = (currentItem.read <= maxNum)? currentItem.read : maxNumStr;
currentItem.commentcount = (currentItem.commentcount <= maxNum)? currentItem.commentcount : maxNumStr;
return currentItem;
},
/**
* 组装用于渲染瀑布流的信息块集合
*
*/
_packageMessage: function(requestSuccess, end, context) {
var self = this,
leftItems = self.leftMessage.items,
len = self.waterRenderNum,
items = [],
currentItem,
isLastTime = false;
for(var i=0; i<len; i++){
if(leftItems.length == 0){//若当次信息已经不足预定的每次渲染数量，则渲染完就跳出
isLastTime = true;
break;
}
//给收集、阅读、评论增加最大限制
currentItem = self._limiteMaxNum(self.leftMessage.items[0]);
var item = S.Template(waterfallTemplate).render(currentItem),
newItemDom = D.create(item),
o = S.clone(self.config);
o.wrapclass = D.get('.J_operate', newItemDom);
var uo = new self.widgets.UO(o);
uo.on('Plaza', function(e) {
var box = e.currentTarget.wraps;
if(!e.collect)return;
var str = D.html(D.get('.collect', box)),
box_a = D.get('.collect', box);
D.attr(box_a, 'title', '取消收集');
if(str.indexOf('+') == -1){
var newNum = parseInt(D.html(D.get('.collect', box)));
newNum = (newNum == maxNum)? '99999+' : newNum+1;
D.html(box_a, newNum);
D.addClass(box_a, 'hover');
D.removeClass(box_a, 'collectbtn');
D.addClass(box_a, 'cancelcollectbtn');
}
});
uo.on('Guang_Center', function(e) {
var box = e.currentTarget.wraps,
str = D.html(D.get('.collect', box)),
box_a = D.get('.collect', box);
D.attr(box_a, 'title', '收集');
if(str.indexOf('+') == -1){
var newNum = parseInt(D.html(D.get('.collect', box)));
newNum = newNum-1;
D.html(box_a, newNum);
D.removeClass(box_a, 'hover');
D.addClass(box_a, 'collectbtn');
D.removeClass(box_a, 'cancelcollectbtn');
}
});
items.push(newItemDom);
leftItems.shift();
}
requestSuccess.call(context, items);
if(isLastTime){
end.apply(context);
self._currentPageRenderOver();
}
},
/**
* 创建瀑布流的基本结构
* _createWaterFall之前执行
*/
_createWaterFallStructure: function() {
var self = this,
selfCon = D.get('#page-content-5'),
rightCon = D.get('.right-small-col-v2'),
leftColNum = 3,
marginValue = 14,//间隙
colWidth = 237,//没列宽
leftConStr = '',
waterFallStructureAlready = false,
rightConStr = '';
//如果已经存在瀑布流结构，就不再创建该结构
waterFallStructureAlready = D.get('.leftCon', self.content)? true : false;
//瀑布流结构重新渲染
if(!waterFallStructureAlready) {
self.isCreateWaterFallStructure = true;//表示瀑布流模式渲染已经开始
for(var i =0; i<leftColNum; i++){
leftConStr += (i == leftColNum - 1)? '<div class="J_plaza_brook" style="float:left;width:'+ colWidth +'px;"></div>'
: '<div class="J_plaza_brook" style="float:left;margin-right:'+ marginValue +'px;width:'+ colWidth +'px;"></div>';
}
leftConStr = '<div class="leftCon" style="width:741px;overflow:hidden">'+ leftConStr +'</div>';
rightConStr = '<div class="J_plaza_brook" style="float:left;margin-top:'+ marginTop +'px;width:'+ colWidth +'px;"></div>';
D.html(selfCon, leftConStr);//左边的内容需要清空
D.append(D.create(rightConStr), rightCon);//右边的内容，是加在其原有内容下方
return;
}
//清空原有瀑布流结构内容
var brooks = D.query('.J_plaza_brook');
for(var i=0; i<len; i++) {
D.html(brooks[i], '');
}
},
/**
* 创建常规list模式的基本结构
*/
_createNormalListStructure: function(){
var self = this,
hooks = D.query('.J_plaza_brook');
//表示常规list模式已经开始
self.isCreateNormalListStructure = true;
//清除瀑布流结构
if(hooks.length > 0){
D.remove(hooks);
var leftCon = D.get('.dr-blog-list-plaza .leftCon');
if(leftCon){
D.remove(leftCon);
}
}
self._eventBlogList();
},
/**
* 清除普通list模式的事件
*/
_stopNormalList: function() {
var self = this;
self._eventBlogList = self._eventBlogList || {};
if(!self._eventBlogList.renderFn)return;
E.remove(window, "resize scroll", self._eventBlogList.renderFn);
},
/**
* 普通的列表模式
*/
_createList: function() {
var self = this;
//没有剩余信息渲染了
if(self.leftMessage.items.length === 0) {
self._currentPageRenderOver();
return;
}
//请求回数据填充首屏数据：当list包裹层 < 可视区 + scrollTop，则加载list数据
if(D.innerHeight(self.content) < D.viewportHeight() + D.scrollTop()) {
var currentItem = self._limiteMaxNum(self.leftMessage.items[0]),
domTemplate = S.Template(listTemplate).render(currentItem),
domList = D.create(domTemplate);
self.leftMessage.items.shift();
D.append(domList, self.content);
//self._sourcePop(domList);
var ic = new self.widgets.IC(domList, '.oneimg', [139,139]),
o = S.clone(self.config);
o.wrapclass = D.get('.J_operate', domList);
var uo = new self.widgets.UO(o);
uo.on('Plaza', function(e) {
var box = e.currentTarget.wraps;
if(!e.collect)return;
var str = D.html(D.get('.collect', box)),
box_a = D.get('.collect', box);
D.attr(box_a, 'title', '取消收集');
if(str.indexOf('+') == -1){
var newNum = parseInt(D.html(D.get('.collect', box)));
newNum = (newNum == maxNum)? '99999+' : newNum+1;
D.html(box_a, newNum);
D.addClass(box_a, 'hover');
D.removeClass(box_a, 'collectbtn');
D.addClass(box_a, 'cancelcollectbtn');
}
});
uo.on('Guang_Center', function(e) {
var box = e.currentTarget.wraps,
str = D.html(D.get('.collect', box)),
box_a = D.get('.collect', box);
D.attr(box_a, 'title', '收集');
if(str.indexOf('+') == -1){
var newNum = parseInt(D.html(D.get('.collect', box)));
newNum = newNum-1;
D.html(box_a, newNum);
D.removeClass(box_a, 'hover');
D.addClass(box_a, 'collectbtn');
D.removeClass(box_a, 'cancelcollectbtn');
}
});
self._rendering();
}
},
/**
* 普通列表模式的事件监听
*/
_eventBlogList: function() {
var self = this,
timer;
self._eventBlogList.renderFn = function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
clearTimeout(timer);
self._rendering();
});
};
E.on(window, "resize scroll", self._eventBlogList.renderFn);
},
/**
* 来源
*/
/*
_sourcePop: function(dom) {
var self = this,
timer,
source = D.get('.source', dom);
if(!source)return;
E.on(source, 'mouseenter', function(e) {
timer && clearTimeout(timer);
var pp = D.get('.divpop', this);
D.removeClass(pp, 'hidden');
E.on(pp, 'mouseenter', function() {
timer && clearTimeout(timer);
E.remove(pp, 'mouseenter');
});
E.on(pp, 'mouseleave', function() {
E.remove(pp, 'mouseleave');
D.addClass(pp, 'hidden')
});
});
E.on(source, 'mouseleave', function(e) {
var _this = this;
timer = setTimeout(function() {
var pp = D.get('.divpop', _this);
D.addClass(pp, 'hidden');
}, 1000);
});
},*/
/**
* 浮动回到顶部
*/
_backTop: function() {
var self = this,
winheight = D.viewportHeight(),
isShow = false,
normalListMargin = -294,
waterfallMargin = -531,
//marginRight = self.isNormalList? normalListMargin : waterfallMargin,
newClassName = self.isNormalList? 'back-to-top-normalList' : 'back-to-top-waterfall',
//backbtn = D.create('<a href="javascript:;" target="_self" class="back-to-top '+ newClassName +'" style="display:none;margin-right:'+ marginRight +'px;"></a>'),
backbtn = D.create('<a href="javascript:;" target="_self" class="back-to-top '+ newClassName +'" style="display:none;"></a>'),
btn = D.get(backbtn),
timer;
self.toTopBtn = btn;
self.toTopBtn.resetMarginRight = function(){
//var marginRight = self.isNormalList? normalListMargin : waterfallMargin;
var newClassName = self.isNormalList? 'back-to-top-normalList' : 'back-to-top-waterfall',
oldClassName = self.isNormalList? 'back-to-top-waterfall' : 'back-to-top-normalList';
//alert(marginRight);
D.removeClass(self.toTopBtn, oldClassName);
D.addClass(self.toTopBtn, newClassName);
//D.css(self.toTopBtn, 'marginRight', marginRight);
};
D.append(backbtn, D.get(".left-large-col-v2"));
E.on(btn, "click", function() {
isShow=false;
scroll(0,0);
D.hide(backbtn);
D.css(btn,{
opacity: '0'
});
});
E.on(window, "scroll", function() {
//winheight = D.viewportHeight();
winheight = 700;
if(D.scrollTop() > winheight) {
var st = D.scrollTop();
D.show(backbtn);
!isShow && S.Anim(btn, {
opacity: 1
}, 0.3).run();
isShow = true;
if(S.UA.ie == 6) {
timer && clearTimeout(timer);
timer = setTimeout(function() {
S.Anim(backbtn, {'top':winheight-398+st+"px"}, 0.3, 'easeOut').run();
}, 400);
}
} else {
isShow = false;
D.hide(backbtn);
D.css(btn, {
opacity: '0'
});
}
});
}
};
})();
分享到：
发表评论
-
区块代码
2012-10-23 15:13 344<cms:page name="国际时装周&q ... -
git常用命令
2012-10-09 11:48 583Create a new repository on th ... -
常用正则
2012-09-26 10:19 538一些常用的正则表达式： URL: / ... -
ul在ie6下，宽度固定，只适应高度，高度撑不开问题
2012-09-18 11:40 400ul在ie6下，宽度固定，只适应高度，高度撑不开， ie6下 ... -
kissy1.2.0模块化加载
2012-09-11 19:46 489S.config({ combine: tr ... -
代码规范
2012-09-10 16:18 544/** * @fileoverview personal- ... -
超出显...
2012-09-04 17:34 516text-overflow:ellipsis 超出显... -
在页面的图片加载完成后进行其他操作
2012-08-29 14:34 499if(!image.complete) { ... -
元素内连续字母强制折行
2012-08-14 17:31 409.c { width : 300 px ; ... -
状态代码
2012-08-08 17:40 576大家都知道404是木有找到东西，301是定义转向，但又有几个人 ... -
项目整理
2012-06-21 09:36 630最新需求以静态模块或者tms页面小修改居多，有比较好的js代码 ... -
一种js的代码框架
2012-06-21 09:35 607self = function(){ var p ... -
对运营更友好的延迟加载
2012-06-21 09:34 466<?php if($__REQUEST['en ... -
可能用到的php代码
2012-06-19 21:28 6121.延迟请求文件，模拟网速不好的时候的场景，代码地址如下： ... -
正则表达式学习笔记
2012-06-06 15:17 548var patt1=new RegExp("e&qu ... -
淘宝本地生活应用-移动web开发总结
2012-06-05 17:45 1143-webkit-transition:background 0 ... -
string操作
2012-05-31 17:08 493favouriteNum.innerHTML = favou ... -
手机端前端开发实践
2012-05-22 15:57 7421.横竖版可以重置缩放，但无法手动缩放页面 <met ... -
常犯错误总结
2012-05-22 15:34 5481.运算符用的是全角的 alert(x - y); 中间 ... -
常用链接集合
2012-05-16 11:28 441阿帕奇配置(apache rewrite)： http:// ...
相关推荐
苏州建屋乐活广场的商业项目定位与品牌营销战略是一个深度整合了区域发展、市场需求、品牌建设和消费者认知的综合策略。在制定这一战略时，首要任务是对项目所处的区位进行深入分析。 首先，从区位价值角度来看，...
苏州建屋乐活广场商业项目定位及品牌营销战略.pptx
【东上海乐活广场商业项目】位于上海市杨浦区五角场商圈辐射区内，地理位置优越，交通便捷。项目占地面积为20604平方米，总建筑面积达到80881.44平方米，包括住宅、办公和商铺等多种建筑类型。其中，住宅建筑面积...
苏州建屋乐活广场商业项目定位及品牌营销战略是一个针对商业地产开发的重要课题，涉及到市场分析、项目定位、品牌策略等多个方面。在这个过程中，首先要明确的是，最理想的商业项目并不一定是开发商最适合或最能成功...
【苏州建屋乐活广场商业项目定位及品牌营销战略学习教案】主要涵盖了商业地产项目的定位策略以及品牌营销的深入探讨。该文档旨在通过分析项目所在的区位价值，理解市场的需求，从而制定出能够最大化项目价值并符合...
《乐活工程20手册》是一份专注于提升家居生活品质的技术指南，源于1998年社会学家保罗·雷提出的“LOHAS”理念，即“健康可持续性的生活方式”。佳园装饰在2008年引入这一理念，推出了“乐活工程1.0”，旨在创造更...
这份长达179页的招股书详细阐述了公司的业务模式、财务状况、市场前景以及风险提示等多个关键领域。 在【行业分析】部分，乐活天下将深入探讨生鲜电商行业的现状和未来趋势。生鲜服务市场是电子商务中快速增长的一...
本篇文章将详细解读《乐活淘创意生活用品网店创业计划书》，并围绕这个主题展开一系列关于网店运营、市场分析、产品定位、营销策略以及财务规划等关键知识点。 首先，我们需要理解“乐活淘”这一品牌概念。"乐活"...
商业计划 - 灵活用工乐业乐活智能用工平台涉及的知识点相当广泛，可以从以下几个维度进行深入分析： 1. 互联网+人力资源行业的兴起：乐业乐活智能用工平台的出现，反映了互联网技术与人力资源管理相结合的新趋势。...
【“乐活”创意生活APP】是一款针对25至35岁的中高档消费人群精心打造的生活美学指南。这款APP旨在传递快乐、创意和有意义的生活理念，满足用户在物质享受之外的精神需求。在互联网时代，手机APP已成为人们生活的...
- 法律法规：遵守电子商务相关的法律法规，避免侵权和法律纠纷。 - 技术风险：预防网络攻击，保证用户数据安全。 - 市场风险：应对市场需求变化，保持产品和服务的竞争力。 8. **里程碑和时间表**： - 设定短期...
乐活公寓商业计划书
综上所述，乐活公寓商业计划书是一个综合性的文档，旨在为投资者、团队成员和其他利益相关者提供全面的项目信息，以支持乐活公寓的成功启动和发展。通过深入阅读和分析这份计划书，我们可以获取关于创业、市场分析、...
在乐活途购物分享社区源码中，PHP主要负责处理服务器端逻辑，如用户登录验证、数据存储和检索、页面渲染等。 2. MVC架构： 为了实现良好的代码组织和模块化，此社区源码可能采用了MVC（Model-View-Controller）架构...
乐活_4.13.20.apk
宁波江北乐活清洁用品有限公司
佳弗O2O网站系统——乐活版 环境需求 1. 可用的 www 服务器，如 Apache、Zeus、IIS 等 2. php 4.3.0 及以上 3. Zend Optimizer 2.5.7 及以上 4. MySQL 3.23 及以上，仅针对 MySQL 版 安装 1.安装按照...
"乐活途生活分享社区 v1.1"的源码提供给用户，意味着他们可以查看和修改底层代码，以适应自己的需求或者进行二次开发。这为个人开发者、小团队或爱好者提供了极大的灵活性和可扩展性。 论坛社区是网络上的一种互动...
【标题】：“基于ASP的乐活网络产品发布系统(中英文版)”是一个使用Active Server Pages (ASP)技术构建的网络应用程序，旨在实现线上产品的管理和发布功能。ASP是微软开发的一种服务器端脚本语言，用于创建动态、...
在PHP编程语言中，乐活途购物分享社区可能采用了MVC（Model-View-Controller）设计模式，这是一种常见的Web应用架构模式，用于分离业务逻辑、数据处理和用户界面。模型负责数据的管理和业务逻辑，视图负责显示数据，...