渲染前台的方式。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="/stylesheets/common/cp.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/factory/list.css">
<title>乐视广告创意平台|我的创意</title>
</head>
<body class="body-bg">
<% include header %>
<script id="createPopupTmpl" type="x-tmpl-mustache">
<div id="createPopup" class="popup-create">
<div class="popup-create-head">
<span class="popup-create-title">新建创意</span>
<span id="popupCreateClose" class="popup-create-close"></span>
</div>
<div>
<span class="popup-create-label">平台：</span>
<select id="popupAppType" class="popup-create-select"></select>
</div>
<div>
<span class="popup-create-label">广告位：</span>
<select id="popupCategory" class="popup-create-select"></select>
</div>
<div>
<span class="popup-create-label">模板：</span>
<select id="popupTemplate" class="popup-create-select"></select>
</div> <div class="popup-create-title-box">
<span class="popup-create-label">标题：</span>
<input id="popupTitleInput" type="text" class="input popup-create-title-input" value="{{title}}"></input>
</div>
<p id="popupCreateTip" class="popup-create-tip"> </p> <div class="popup-create-button-box">
<input id="popupCreateSubmit" class="button popup-button popup-create-button-submit" type="button" value="确定"/>
<input id="popupCreateCancel" class="button popup-button" type="button" value="取消"/>
</div>
</div>
</script> <script id="popupAppTypeTmpl" type="x-tmpl-mustache">
{{#appTypes}}
<option value="{{id}}">{{title}}</option>
{{/appTypes}}
</script>
<script id="popupCategoryTmpl" type="x-tmpl-mustache">
{{#categories}}
<option value="{{categoryId}}">{{title}}</option>
{{/categories}}
</script>
<script id="popupTemplateTmpl" type="x-tmpl-mustache">
{{#templates}}
<option value="{{tId}}">{{title}}</option>
{{/templates}}
</script> <div id="toolbar">
<div id="toolbar-box">
<div id="platform"></div>
<span>平台</span>
<select id="appTypeSelect" class="platform-select">
<script id="appTypeTmpl" type="x-tmpl-mustache">
{{#appTypes}}
<option value="{{id}}">{{title}}</option>
{{/appTypes}}
</script>
</select>
<div class="category-template-nav">
<span>广告创意：</span>
<span id="categoryNav" class="category-template-nav-label"></span>
<span id="categoryNavSep" class="category-template-nav-label">>></span>
<span id="templateNav" class="category-template-nav-label"></span>
</div>
<div id="createCreativeBtn" class="creative-add"></div>
</div>
</div> <div id="container">
<div class="sidebar">
<ul id="sidebarCategory" class="sidebar-category">
</ul>
</div>
<script id="catetoryTmpl" type="x-tmpl-mustache">
{{#categories}}
<li>
<span id="categoryId-{{categoryId}}-icon" class="sidebar-category-icon"></span>
<span id="categoryId-{{categoryId}}-title" class="sidebar-category-label">{{title}}</span>
<ul id="categoryId-{{categoryId}}-templates" >
</ul>
</li>
{{/categories}}
</script>
<script id="templateTmpl" type="x-tmpl-mustache">
<li id="templateId-{{tId}}-title" class="sidebar-template-label">{{title}}</li>
</script>
<div class="right-box">
<div id="creativeBox" class="creative-box">
</div>
<div id="paging" class="paging"></div>
</div>
<script id="noCreativeTmpl" type="x-tmpl-mustache">
<div class="nocreative-box">
<div></div>
<img src="/images/factory/nocreative.jpg" />
</div>
</script>
<script id="pagingTmpl" type="x-tmpl-mustache">
<a id="page-{{page}}" class="paging-btn">{{label}}</a>
</script>
<script id="creativeTmpl" type="x-tmpl-mustache">
<div id="creativeId-{{creativeId}}-creative-item" class="creative-item">
<div id="creativeId-{{creativeId}}-rename-popup" class="creative-rename-popup">
<div class="creative-rename-panel">
<div class="creative-rename-panel-head">
<span class="creative-rename-popup-label">重命名</span>
<span id="creativeId-{{creativeId}}-rename-close" class="creative-rename-popup-close"></span>
</div>
<p>
<input class="creative-rename-popup-input" type="text"/>
</p>
<p class="creative-rename-popup-tip">标题不能为空</p>
<div class="creative-rename-popup-button-box">
<input id="creativeId-{{creativeId}}-rename-submit" class="button popup-button creative-rename-submit" type="button" value="确定"/>
<input id="creativeId-{{creativeId}}-rename-cancel" class="button popup-button creative-rename-cancel" type="button" value="取消"/>
</div>
</div>
</div>
<div id="creativeId-{{creativeId}}-delete-popup" class="creative-delete-popup">
<div class="creative-delete-panel">
<div class="creative-delete-panel-head">
<div id="creativeId-{{creativeId}}-delete-close" class="creative-delete-popup-close"></div>
</div>
<p class="creative-delete-panel-title">是否要删除当前创意？</p>
<p class="creative-delete-popup-tip">删除失败</p>
<div class="creative-delete-popup-button-box">
<input id="creativeId-{{creativeId}}-delete-submit" class="button popup-button creative-delete-submit" type="button" value="确定"/>
<input id="creativeId-{{creativeId}}-delete-cancel" class="button popup-button creative-delete-cancel" type="button" value="取消"/>
</div>
</div>
</div>
<a id="creativeId-{{creativeId}}-img" class="creative-item-img-box" href="/creative/edit/{{creativeId}}" target="_blank">
<img class="creative-item-img" src="/images/factory/q.png" />
</a>
<a id="creativeId-{{creativeId}}-creative-item-title" href="/creative/edit/{{creativeId}}" target="_blank" class="creative-item-title">{{title}}</a>
<div class="creative-item-info">
<span>{{category.title}}</span>
<span>-</span>
<span>{{template.title}}</span>
</div>
<div class="creative-item-time">
<span>{{updateDateStr}}</span>
</div>
<div class="creative-item-operate">
<a href="/creative/edit/{{creativeId}}" target="_blank">编辑</a>
<span class="creative-item-vline">|</span>
<a id="creativeId-{{creativeId}}-rename" class="creative-item-rename">重命名</a>
<span class="creative-item-vline">|</span>
<a id="creativeId-{{creativeId}}-delete" class="creative-item-delete">删除</a>
</div>
</div>
</script>
</div>
<% include footer %>
<script type="text/javascript">var jsonData = <%- jsonData %></script>
<script type="text/javascript" data-main="/javascripts/factory/list.js" src="/javascripts/lib/require-2.1.14.min.js"></script>
</body>
</html>
/**
* list.js
* Author: shen100
* Email: liushen@letv.com
* Create: 2014-10-28 16:39:17
* */ requirejs.config({
paths: {
jquery: '/javascripts/lib/jquery-1.11.1.min',
mustache: '/javascripts/lib/mustache-0.8.1',
common: '/javascripts/common/cp'
}
}); var $, Mustache, common, Logger, ErrorCode;
var AppType, Creative; function ModelProxy() {} ModelProxy.FIND_CREATIVES_RESULT = 'findCreativesResult';
ModelProxy.FIND_CREATIVES_FAULT = 'findCreativesFault';
ModelProxy.RENAME_CREATIVE_RESULT = 'renameCreativeResult';
ModelProxy.DELETE_CREATIVE_RESULT = 'deleteCreativeResult'; ModelProxy.prototype = {
constructor: ModelProxy,
init: function(data) {
this.allListener = {};
this.findURL = '/creative/find/:tId/:page/:count';
this.renameURL = '/creative/rename';
this.deleteURL = '/creative/del'; this.appTypes = data.appTypes; //所有的应用类型(1: web pc, 2: web mobile, 3: desktop等)
this.categories = data.categories;//所有的分类
this.templates = data.templates; //所有的模板
this.curAppType = data.curAppType;//当前应用类型
this.curTemplateId = data.curTmpl; //当前选中的模板，0表示没选中任何模板 this.curCreatives = null; //当前显示的创意
this.count = ; //每页显示多少个创意
this.page = ; //当前页
this.cols = ; //每行有几列
this.total = ; //后台返回指定模板下的创意总数
this.pageCount = ; //有多少页
this.pageGroup = ; //分页组件当前显示多少页(除第一页，最后页外) this.curCategories = []; //当前应用类型下的分类
this.curTemplates = []; //当前应用类型下的模板 this.updateCurApp();
},
updateCurApp: function() {
this.curCategories = [];
this.curTemplates = [];
for (var i = ; i < this.categories.length; i++) {
if(this.categories[i].appType == this.curAppType) {
this.curCategories.push(this.categories[i]);
}
}
for (var j = ; j < this.templates.length; j++) {
var categoryId = this.templates[j].categoryId;
for (var k = ; k < this.curCategories.length; k++) {
if(categoryId == this.curCategories[k].categoryId) {
this.curTemplates.push(this.templates[j]);
break;
}
}
}
},
addEventListener: function(type, listener) {
if(!this.allListener[type]) {
this.allListener[type] = [listener];
}else {
var found = false;
for (var i = , len = this.allListener[type].length; i < len; i++) {
if(this.allListener[type][i] == listener) {
found = true;
break;
}
}
if(!found) {
this.allListener[type].push(listener);
}
}
},
removeEventListener: function(type, listener) {
var listeners = this.allListener[type];
if(listeners) {
for (var i = ; i < listeners.length; i++) {
if(listeners[i] == listener) {
listeners.splice(, );
break;
}
}
}
},
dispatchEvent: function(event) {
var listeners = this.allListener[event.type];
if(listeners) {
for (var i = ; i < listeners.length; i++) {
var listener = listeners[i];
var data = {};
if(typeof listener == 'object') {
listener.func.call(listener.context, event);
}else {
listener.call(null, event);
}
}
}
},
findCreatives: function(data) {
var request = new common.net.Request();
var url = this.findURL.replace(':tId', data.templateId);
url = url.replace(':page', data.page);
url = url.replace(':count', this.count);
url = url + '?r=' + Math.random();
request.get(url, {
onResult : onResult,
onFault : onFault
});
var self = this;
function onResult(result) {
if(result.error === ErrorCode.SUCCESS) {
self.total = result.data.total;
self.curCreatives = result.data.creatives;
self.page = result.data.page;
self.pageCount = Math.ceil(self.total / self.count);
self.curTemplateId = parseInt(result.data.tId);
}
self.dispatchEvent({
type: ModelProxy.FIND_CREATIVES_RESULT,
data: result
});
} function onFault() { }
},
renameCreative: function(creativeId, title) {
creativeId = parseInt(creativeId);
var request = new common.net.Request();
var templateId;
for (var i = ; i < this.curCreatives.length; i++) {
if(this.curCreatives[i].creativeId === creativeId) {
templateId = this.curCreatives[i].templateId;
break;
}
}
request.post(this.renameURL,
{
creativeId : creativeId,
title : title,
templateId : templateId
},
{
onResult : onResult,
onFault : onFault
});
var self = this;
function onResult(result) {
if(result.error === ErrorCode.SUCCESS) {
for (var i = ; i < self.curCreatives.length; i++) {
if(self.curCreatives[i].creativeId === result.data.creativeId) {
self.curCreatives[i].title = result.data.title;
break;
}
}
}
self.dispatchEvent({
type: ModelProxy.RENAME_CREATIVE_RESULT,
data: result
});
} function onFault() { }
},
deleteCreative: function(creativeId) {
creativeId = parseInt(creativeId);
var request = new common.net.Request();
request.post(this.deleteURL,
{
creativeId: creativeId
},
{
onResult : onResult,
onFault : onFault
});
var self = this;
function onResult(result) {
if(result.error === ErrorCode.SUCCESS) {
for (var i = ; i < self.curCreatives.length; i++) {
if(self.curCreatives[i].creativeId === result.data.creativeId) {
self.curCreatives.splice(i, );
break;
}
}
self.dispatchEvent({
type: ModelProxy.DELETE_CREATIVE_RESULT,
data: result
});
if(!self.curCreatives || self.curCreatives.length <= ) {
self.findCreatives({
templateId : modelProxy.curTemplateId,
page : self.page
});
}
}
}
function onFault() { }
}
}; var modelProxy = new ModelProxy(); var toolBoxMediator = {
init: function() {
var self = this;
var width = ; function onScroll() {
if($(document).scrollTop() > $('#topline').height() + $('#header').height()) {
$('#toolbar').css('position', 'fixed');
$('#toolbar').css('top', '');
$('#toolbar').css('left', '');
$('#container').css('margin-top', ($('#toolbar').height() + ) + 'px');
$('#toolbar').css('width', '100%');
if(width > $(window).width()) {
$('#toolbar-box').css('width', $(window).width());
}else {
$('#toolbar-box').css('width', width);
}
}else {
$('#toolbar-box').css('width', width);
if(width > $(window).width()) {
$('#toolbar').width();
}else {
$('#toolbar').css('width', '100%');
}
$('#toolbar').css('position', 'static');
$('#container').css('margin-top', '16px');
}
if(width > $(window).width()) {
$('#topline').width(width);
$('.footer').width(width);
}else {
$('#topline').css('width', '100%');
$('.footer').css('width', '100%');
}
}
$(window).scroll(function(event) {
onScroll();
});
$(window).resize(function() {
onScroll();
});
$(window).scroll(); modelProxy.addEventListener(ModelProxy.FIND_CREATIVES_RESULT, function(event) {
self.renderNav();
});
},
render: function() {
var rendered = Mustache.render($('#appTypeTmpl').html(), {
appTypes: [{id: , title: "web pc"}]//modelProxy.appTypes
});
$('#appTypeSelect').html(rendered);
},
renderNav: function() {
if(modelProxy.curTemplateId === ) {
$('#categoryNavSep').hide();
$('#templateNav').hide();
$('#categoryNav').html('全部');
$('#categoryNav').show();
}else {
for (var i = ; i < modelProxy.curTemplates.length; i++) {
if(modelProxy.curTemplates[i].tId === modelProxy.curTemplateId) {
var title = modelProxy.curTemplates[i].title;
var categoryId = modelProxy.curTemplates[i].categoryId;
for (var j = ; j < modelProxy.curCategories.length; j++) {
if(modelProxy.curCategories[j].categoryId === categoryId) {
var categoryTitle = modelProxy.curCategories[j].title;
$('#categoryNav').html(categoryTitle);
$('#categoryNav').show();
$('#categoryNavSep').show();
$('#templateNav').show();
$('#templateNav').html(title);
break;
}
}
break;
}
}
}
}
}; var createPopupMediator = {
canSubmit: true,
init: function() {
var self = this;
$('#createCreativeBtn').click(function() {
self.render();
var rendered = Mustache.render($('#popupAppTypeTmpl').html(), {
appTypes: [{id: , title: "web pc"}] //modelProxy.appTypes
});
$('#popupAppType').html(rendered);
$('#popupAppType').val(modelProxy.curAppType); rendered = Mustache.render($('#popupCategoryTmpl').html(), {
categories: modelProxy.curCategories
});
$('#popupCategory').html(rendered); if(modelProxy.curTemplateId) {
for (var i = ; i < modelProxy.curTemplates.length; i++) {
if(modelProxy.curTemplateId == modelProxy.curTemplates[i].tId) {
$('#popupCategory').val(modelProxy.curTemplates[i].categoryId);
break;
}
}
} function renderTmplSelect() {
var tArr = [];
for (var i = ; i < modelProxy.curTemplates.length; i++) {
var categoryId = parseInt($('#popupCategory').val());
if(modelProxy.curTemplates[i].categoryId == categoryId) {
tArr.push(modelProxy.curTemplates[i]);
}
}
rendered = Mustache.render($('#popupTemplateTmpl').html(), {
templates: tArr
});
$('#popupTemplate').html(rendered);
} renderTmplSelect(); if(modelProxy.curTemplateId) {
$('#popupTemplate').val(modelProxy.curTemplateId);
} $('#popupCategory').change(function() {
renderTmplSelect();
}); function closePopup() {
$('#createPopup').remove();
}
$('#popupCreateClose').click(closePopup);
$('#popupCreateCancel').click(closePopup);
$('#popupCreateSubmit').click(function() {
if(!self.canSubmit) {
return;
}
var title = $.trim($('#popupTitleInput').val());
var templateId = $('#popupTemplate').val();
if(!title) {
return $('#popupCreateTip').html('标题不能为空');
}
if(title.length > Creative.MAX_TITLE_LENGTH) {
return $('#popupCreateTip').html('标题长度不能多于' + Creative.MAX_TITLE_LENGTH + '个字符');
}
self.canSubmit = false;
var req = new common.net.Request();
req.post('/creative/add', {
title : title,
templateId : templateId,
appType : modelProxy.curAppType
},
{
onResult: function(result) {
self.canSubmit = true;
if(result.error === ErrorCode.SUCCESS) {
$('#createPopup').remove();
location.href = '/creative/edit/' + result.data.creativeId;
}else if(result.error === ErrorCode.CREATIVE_TITLE_EXIST) {
$('#popupCreateTip').html('名称已存在，请改名');
}
},
onFault: function() {
self.canSubmit = true;
$('#popupCreateTip').html('新建失败');
}
});
});
});
},
render: function() {
if(this.createPopup) {
this.createPopup.remove();
}
var rendered = Mustache.render($('#createPopupTmpl').html());
this.createPopup = $(rendered); $('body').append(this.createPopup); var left = ($(window).width() - this.createPopup.width()) / ;
var top = ($(window).height() - this.createPopup.height()) / ;
this.createPopup.css('left', left);
this.createPopup.css('top', top);
var self = this;
$('.popup-create-title').mousedown(function(event) {
event.stopImmediatePropagation();
event.preventDefault();
var pageX = event.pageX;
var pageY = event.pageY;
var offset = self.createPopup.offset();
$('body').mousemove(function(event) {
var offsetX = event.pageX - pageX;
var offsetY = event.pageY - pageY;
self.createPopup.offset({
left : offset.left + offsetX,
top : offset.top + offsetY
});
});
$('body').mouseup(function(event) {
$('body').unbind();
});
});
}
}; var sidebarMediator = {
init: function() {
modelProxy.addEventListener(ModelProxy.FIND_CREATIVES_RESULT, function(event) {
$('#templateId-' + modelProxy.curTemplateId + '-title').css('color', 'rgb(250, 125, 60)');
});
},
render: function() {
var rendered = Mustache.render($('#catetoryTmpl').html(), {
categories: modelProxy.curCategories
});
$('#sidebarCategory').html(rendered);
var cateTmpl = {};
for (var i = ; i < modelProxy.curTemplates.length; i++) {
var categoryId = modelProxy.curTemplates[i].categoryId;
if(!cateTmpl[categoryId]) {
cateTmpl[categoryId] = [];
}
cateTmpl[categoryId].push(modelProxy.curTemplates[i]);
}
for (var i = ; i < modelProxy.curCategories.length; i++) {
var categoryId = modelProxy.curCategories[i].categoryId;
var categoryTemplate = $('#categoryId-' + categoryId + '-templates');
for (var j = ; j < cateTmpl[categoryId].length; j++) {
var rendered = Mustache.render($('#templateTmpl').html(), cateTmpl[categoryId][j]);
categoryTemplate.append($(rendered));
}
var categoryIcon = $('#categoryId-' + categoryId + '-icon');
var xPos, yPos;
xPos = '-' + ( * i) + 'px';
if(modelProxy.curAppType == AppType.WEB_PC.id) {
yPos = '-' + + 'px';
}
categoryIcon.css('width', '18px');
categoryIcon.css('height', '18px');
categoryIcon.css('background-position', xPos + ' ' + yPos);
} $('.sidebar-template-label').click(function() {
var templateId = parseInt($(this).attr('id').split('-')[]); if(templateId != modelProxy.curTemplateId) {
$('#templateId-' + modelProxy.curTemplateId + '-title').css('color', '#777');
}
modelProxy.findCreatives({
templateId : templateId,
page :
});
}); $('.sidebar-template-label').mouseover(function() {
$(this).css('color', '#fa7d3c');
});
$('.sidebar-template-label').mouseout(function() {
var templateId = parseInt($(this).attr('id').split('-')[]);
if(modelProxy.curTemplateId != templateId) {
$(this).css('color', '#777');
}
});
}
}; var creativeBoxMediator = {
init: function() {
var self = this;
modelProxy.addEventListener(ModelProxy.FIND_CREATIVES_RESULT, function(event) {
self.render();
});
modelProxy.addEventListener(ModelProxy.RENAME_CREATIVE_RESULT, function(event) {
self.updateCreativeName(event.data);
});
modelProxy.addEventListener(ModelProxy.DELETE_CREATIVE_RESULT, function(event) {
self.removeCreativeItem();
});
},
removeCreativeItem: function() {
this.render();
},
render: function() {
var self = this;
$('#creativeBox').html('');
if(modelProxy.total) {
var creatives = modelProxy.curCreatives;
var rows = Math.ceil(creatives.length / modelProxy.cols);
var maxCount = rows * modelProxy.cols;
for (var i = ; i < creatives.length; i++) {
creatives[i].updateDateStr = common.util.Util.formatTimeStr(creatives[i].updateDate);
if(creatives[i].createDate == creatives[i].updateDate) {
creatives[i].updateDateStr = '创建于：' + creatives[i].updateDateStr;
}else {
creatives[i].updateDateStr = '更新于：' + creatives[i].updateDateStr;
}
var rendered = Mustache.render($('#creativeTmpl').html(), creatives[i]);
var creativeDOM = $(rendered);
if(i + modelProxy.cols < maxCount) {
if((i + ) % modelProxy.cols == ) {
creativeDOM.css('border-bottom', '1px solid #CCCCCC');
}else {
creativeDOM.css('border-right', '1px solid #CCCCCC');
creativeDOM.css('border-bottom', '1px solid #CCCCCC');
}
}else {
if(i != maxCount - ) {
creativeDOM.css('border-right', '1px solid #CCCCCC');
}
}
$('#creativeBox').append(creativeDOM);
} $('.creative-item-rename').click(function() {
$('.creative-rename-popup').hide();
$('.creative-delete-popup').hide();
$('.creative-rename-popup-tip').hide();
$('.creative-rename-popup-button-box').css('margin-top', '10px');
var creativeId = $(this).attr('id').split('-')[];
var popup = $('#creativeId-' + creativeId + '-rename-popup');
popup.show();
var creativeItem = $('#creativeId-' + creativeId + '-creative-item');
var titleDOM = $(creativeItem.find('.creative-item-title')[]);
popup.find('.creative-rename-popup-input').val(titleDOM.html());
}); $('.creative-rename-popup-input').blur(function() {
$(this).css('border-color', '#C8C8C8');
});
$('.creative-rename-popup-input').focus(function() {
$(this).css('border-color', '#989898');
}); $('.creative-rename-submit').click(function() {
var creativeId = $(this).attr('id').split('-')[];
var popup = $('#creativeId-' + creativeId + '-rename-popup');
var creativeItem = $('#creativeId-' + creativeId + '-creative-item');
var titleDOM = $(creativeItem.find('.creative-item-title')[]);
var title = popup.find('.creative-rename-popup-input').val();
title = $.trim(title);
if(titleDOM.html() == title) {
popup.hide();
}else if(!title) {
$('.creative-rename-popup-tip').html('标题不能为空');
$('.creative-rename-popup-tip').show();
$('.creative-rename-popup-button-box').css('margin-top', '0px');
}else if(title.length > Creative.MAX_TITLE_LENGTH) {
$('.creative-rename-popup-tip').html('标题长度不能多于' + Creative.MAX_TITLE_LENGTH + '个字符');
$('.creative-rename-popup-tip').show();
$('.creative-rename-popup-button-box').css('margin-top', '0px');
}else {
modelProxy.renameCreative(creativeId, title);
}
}); function onRenameCancel() {
var creativeId = $(this).attr('id').split('-')[];
$('#creativeId-' + creativeId + '-rename-popup').hide();
} $('.creative-rename-cancel').click(onRenameCancel);
$('.creative-rename-popup-close').click(onRenameCancel); $('.creative-item-delete').click(function() {
$('.creative-rename-popup').hide();
$('.creative-delete-popup').hide();
var creativeId = $(this).attr('id').split('-')[];
$('#creativeId-' + creativeId + '-delete-popup').show();
}); $('.creative-delete-submit').click(function() {
var creativeId = $(this).attr('id').split('-')[];
modelProxy.deleteCreative(creativeId);
}); function onDeleteCancel() {
var creativeId = $(this).attr('id').split('-')[];
$('#creativeId-' + creativeId + '-delete-popup').hide();
} $('.creative-delete-cancel').click(onDeleteCancel);
$('.creative-delete-popup-close').click(onDeleteCancel); }else {
var rendered = Mustache.render($('#noCreativeTmpl').html());
$('#creativeBox').append($(rendered));
}
},
updateCreativeName: function(result) {
if(result.error === ErrorCode.SUCCESS) {
var creative = result.data;
$('#creativeId-' + creative.creativeId + '-creative-item-title').html(creative.title);
$('#creativeId-' + creative.creativeId + '-rename-popup').hide();
}else if(result.error === ErrorCode.CREATIVE_TITLE_EXIST) {
$('.creative-rename-popup-tip').html('名称已存在，请改名');
$('.creative-rename-popup-tip').show();
$('.creative-rename-popup-button-box').css('margin-top', '0px');
}
}
}; var pagingMediator = {
init: function() {
var self = this;
modelProxy.addEventListener(ModelProxy.FIND_CREATIVES_RESULT, function(event) {
self.render();
});
},
render: function() {
$('#paging').html('');
var pages = [];
var pageItem;
if(modelProxy.page < modelProxy.pageGroup || modelProxy.pageCount <= modelProxy.pageGroup) {
var min = Math.min(modelProxy.pageCount, modelProxy.pageGroup);
for (var i = ; i < min; i++) {
pageItem = {
page : i + ,
label : i +
};
pages.push(pageItem);
}
if(modelProxy.pageGroup < modelProxy.pageCount) {
pages.push({
page : ,
label : '...'
});
pages.push({
page : modelProxy.pageCount,
label : modelProxy.pageCount
});
}
}else {
var minPage = modelProxy.pageCount - modelProxy.pageGroup + ;
var maxPage = modelProxy.pageCount;
if(modelProxy.page >= minPage && modelProxy.page <= maxPage) {
for (var i = minPage; i <= maxPage; i++) {
pageItem = {
page : i,
label : i
}
pages.push(pageItem);
}
if(modelProxy.pageGroup < modelProxy.pageCount) {
pages.unshift({
page : ,
label : '...'
});
pages.unshift({
page : ,
label :
});
}
}else {
var range = (modelProxy.pageGroup - ) / ;
var startPage = modelProxy.page - range;
var endPage = modelProxy.page + range;
for (var i = startPage; i <= endPage; i++) {
pageItem = {
page : i,
label : i
}
pages.push(pageItem);
}
pages.unshift({
page : ,
label : '...'
});
pages.unshift({
page : ,
label :
});
pages.push({
page : ,
label : '...'
});
pages.push({
page : modelProxy.pageCount,
label : modelProxy.pageCount
});
}
}
if(modelProxy.page > ) {
pageItem = {
page: modelProxy.page - ,
label: '上一页'
};
pages.unshift(pageItem);
}
if(modelProxy.page < modelProxy.pageCount) {
pageItem = {
page: modelProxy.page + ,
label: '下一页'
};
pages.push(pageItem);
}
for (var i = ; i < pages.length; i++) {
var rendered = Mustache.render($('#pagingTmpl').html(), pages[i]);
var pagingItem = $(rendered);
if(pages[i].page == modelProxy.page) {
pagingItem.addClass('paging-btn-selected');
}
$('#paging').append(pagingItem);
}
$('.paging-btn').mouseover(function() {
var page = parseInt($(this).attr('id').split('-')[]);
if(page != modelProxy.page) {
$(this).addClass('paging-btn-hover');
}
});
$('.paging-btn').mouseout(function() {
var page = parseInt($(this).attr('id').split('-')[]);
if(page != modelProxy.page) {
$(this).removeClass('paging-btn-hover');
}
}); $('.paging-btn').click(function() {
var page = parseInt($(this).attr('id').split('-')[]);
if(page == modelProxy.page || page === ) {
return;
}
modelProxy.findCreatives({
templateId : modelProxy.curTemplateId,
page : page
});
});
}
}; require(['jquery', 'mustache', 'common'], function(_$, _Mustache, _common) {
$ = _$;
Mustache = _Mustache;
common = _common;
Logger = common.log.Logger;
AppType = common.model.AppType;
Creative = common.model.Creative;
ErrorCode = common.error.ErrorCode; modelProxy.init({
templates : jsonData.templates,
categories : jsonData.categories,
appTypes : jsonData.appTypes,
curAppType : jsonData.curAppType,
curTmpl : jsonData.curTmpl
});
toolBoxMediator.init(); // 平台
toolBoxMediator.render();
createPopupMediator.init();//点击右上角的+然后出现的隐藏框
sidebarMediator.init(); //左侧的菜单
sidebarMediator.render(); creativeBoxMediator.init();
pagingMediator.init(); modelProxy.findCreatives({
templateId : modelProxy.curTemplateId,
page :
});
});