Skip to content

Commit caa9482

Browse files
imyeloimyelo
committed
add custom forum setting module
1 parent a2e6cf9 commit caa9482

File tree

14 files changed

+364
-2
lines changed

14 files changed

+364
-2
lines changed

‎debug_browser.html

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<main id="main">
2222
<aside id="menu"></aside>
2323
<section id="forums"></section>
24+
<section id="customForums"></section>
2425
<section id="forum"></section>
2526
<section id="topic"></section>
2627
<section id="user"></section>

‎debug_phone.html

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<main id="main">
2424
<aside id="menu"></aside>
2525
<section id="forums"></section>
26+
<section id="customForums"></section>
2627
<section id="forum"></section>
2728
<section id="topic"></section>
2829
<section id="user"></section>

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<main id="main">
2020
<aside id="menu"></aside>
2121
<section id="forums"></section>
22+
<section id="customForums"></section>
2223
<section id="forum"></section>
2324
<section id="topic"></section>
2425
<section id="user"></section>

‎js/modules/Router.js

+9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ define(function (require, exports, module) {
22
var SiteModel = require('modules/daos/site/SiteModel');
33
var MenuView = require('modules/views/menu/Menu');
44
var ForumsView = require('modules/views/forums/Forums');
5+
var CustomForumsView = require('modules/views/customForums/CustomForums');
56
var ForumView = require('modules/views/forum/Forum');
67
var TopicView = require('modules/views/topic/Topic');
78
var UserView = require('modules/views/user/User');
@@ -22,6 +23,7 @@ define(function (require, exports, module) {
2223
"": "index",
2324
"!/bootup": "index",
2425
"!/forums": "getForums",
26+
"!/customForums": "getCustomForums",
2527
"!/forum/:fid": "getForum",
2628
"!/forum/:fid/p:page": "getForum",
2729
"!/favor": "getFavor",
@@ -50,6 +52,7 @@ define(function (require, exports, module) {
5052
data.siteModel = new SiteModel();
5153
data.menuView = new MenuView();
5254
data.forumsView = new ForumsView();
55+
data.customForumsView = new CustomForumsView();
5356
data.forumView = new ForumView();
5457
data.topicView = new TopicView();
5558
data.userView = new UserView();
@@ -65,6 +68,7 @@ define(function (require, exports, module) {
6568
},
6669
stageInitialize: function () {
6770
this.cached.forumsView.$el.addClass('stage-animate-out');
71+
this.cached.customForumsView.$el.addClass('stage-animate-out');
6872
this.cached.forumView.$el.addClass('stage-animate-out');
6973
this.cached.topicView.$el.addClass('stage-animate-out');
7074
this.cached.userView.$el.addClass('stage-animate-out');
@@ -86,6 +90,10 @@ define(function (require, exports, module) {
8690
// transition.toSection(this.cached.forumsView);
8791
this.cached.forumsView.open();
8892
},
93+
getCustomForums: function () {
94+
console.log('customForums: ');
95+
this.cached.customForumsView.refresh();
96+
},
8997
getForum: function (fid, page) {
9098
console.log('forum: ' + fid, this.cached.forumView);
9199
// transition.toSection(this.cached.forumView);
@@ -196,6 +204,7 @@ define(function (require, exports, module) {
196204
"": appCache.get('bootupView'),
197205
"!/bootup": appCache.get('bootupView'),
198206
"!/forums": appCache.get('forumsView'),
207+
"!/customForums": appCache.get('customForumsView'),
199208
"!/forum/:fid": appCache.get('forumView'),
200209
"!/forum/:fid/p:page": appCache.get('forumView'),
201210
"!/favor": appCache.get('forumView'),

‎js/modules/storage/site.js

+14
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,20 @@ define(function (require, exports, module) {
7575
var favor = this.getFavorForum();
7676
this.set('favorForum', _.chain(favor).difference([fid]).first(4).value());
7777
},
78+
// 获取自定义版面列表
79+
getCustomForum: function () {
80+
return this.get('customForum') || [];
81+
},
82+
// 增加自定义版面
83+
addCustomForum: function (fid) {
84+
var custom = this.getCustomForum();
85+
this.set('customForum', _.chain(custom).union([fid]).value());
86+
},
87+
// 移除自定义版面
88+
removeCustomForum: function (fid) {
89+
var custom = this.getCustomForum();
90+
this.set('customForum', _.chain(custom).difference([fid]).value());
91+
},
7892
// 更新设置
7993
getSetting: function (key) {
8094
var defaults = {

‎js/modules/views/customForums/CustomForums.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
define(function (require, exports, module) {
2+
var art = require('utils/artTemplate/index');
3+
var ui = require('utils/ui/index');
4+
var BasicView = require('modules/views/abstracts/Basic');
5+
var tpl = require('templates/customForums/customForums.tpl');
6+
var tplContent = require('templates/customForums/content.tpl');
7+
var siteStorage = require('modules/storage/site');
8+
var Notification = require('utils/Notification');
9+
10+
var CustomForumsView = BasicView.extend({
11+
el: '#customForums',
12+
tpl: art.compile(tpl),
13+
tplContent: art.compile(tplContent),
14+
flag: {
15+
},
16+
events: {
17+
'singleTap .action-back': function () {
18+
Backbone.stage.back(['slide-left', 'slide-right']);
19+
},
20+
'singleTap .action-add': function () {
21+
Notification.prompt('输入指定版面号', function (result) {
22+
var tid;
23+
if (result) {
24+
tid = result['input1'];
25+
if (result['buttonIndex'] === 2 && tid) {
26+
siteStorage.addCustomForum(parseInt(tid, 0) + '');
27+
}
28+
}
29+
}, '添加', ['yamie', 'biu~'], (''));
30+
}
31+
},
32+
refresh: function () {
33+
var forums = siteStorage.getCustomForum();
34+
this.$ul.html(this.tplContent({forums: forums}));
35+
},
36+
render: function () {
37+
this.$el.html(this.tpl());
38+
this.$el.find('.iscroll').css('height', window.innerHeight - 50);
39+
this.scroll = new iScroll('customForums-article', {
40+
});
41+
this.$ul = this.$el.find('ul');
42+
return this;
43+
},
44+
initialize: function () {
45+
this.listenTo(siteStorage, 'change:customForum', function () {
46+
this.refresh();
47+
});
48+
return this.render();
49+
}
50+
});
51+
module.exports = CustomForumsView;
52+
});

‎js/modules/views/setting/Setting.js

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ define(function (require, exports, module) {
1313
'singleTap .action-settingFavor': function () {
1414
Backbone.stage.change('#!/setting/favor', ['slide-right', 'slide-left']);
1515
},
16+
'singleTap .action-customForums': function () {
17+
Backbone.stage.change('#!/customForums', ['slide-right', 'slide-left']);
18+
},
1619
'singleTap .select': function (e) {
1720
$li = $(e.currentTarget);
1821
$li.find('.checkbox').toggleClass('checked');

‎js/templates/customForums/content.tpl

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<% for (var i = 0, len = forums.length; i < len; i++) { %>
2+
<li data-fid="<%= forums[i] %>" class="forum">
3+
<h4>
4+
版面[<%= forums[i] %>]
5+
</h4>
6+
</li>
7+
<% } %>

‎js/templates/customForums/customForums.tpl

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<header>
2+
<h1><a class="action-back"><span class="glyphicon glyphicon-chevron-left"></span> <span class="subject">自定义版面</span></a></h1>
3+
<div>
4+
<a class="icon action-add"><span class="glyphicon glyphicon-plus"></span></a>
5+
</div>
6+
</header>
7+
<article id="customForums-article" class="iscroll">
8+
<div class="scroller">
9+
<ul>
10+
</ul>
11+
</div>
12+
</article>
13+
<div class="asideMask"></div>

‎js/templates/setting/setting.tpl

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
<li class="action-settingFavor link">
88
<h4>设置最喜爱的版面<span class="glyphicon glyphicon-chevron-right"></span></h4>
99
</li>
10+
<li class="action-customForums link">
11+
<h4>管理自定义版面<span class="glyphicon glyphicon-chevron-right"></span></h4>
12+
</li>
1013
</ul>
1114
<ul>
1215
<li class="select" data-key="downloadAvatar">

‎js/utils/LocalStorageProxy/LocalStorageProxy.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@ define(function (require, exports, module) {
2121
var previous;
2222
checkReserved(key);
2323
_.defaults((options || (options = {})), {silent: false});
24+
previous = this._storage.get(key, {silent: true});
25+
this._storage.set(key, val);
2426
if (!options.silent) {
25-
previous = this._storage.get(key, {silent: true});
2627
if (!_.isEqual(previous, val)) {
2728
this.trigger('change', key, val, previous);
2829
this.trigger('change:' + key, val, previous);
2930
}
3031
this.trigger('set', key, val);
3132
this.trigger('set:' + key, val);
3233
}
33-
this._storage.set(key, val);
3434
return this;
3535
},
3636
get: function (key, options) {

‎style/main.css

+144
Original file line numberDiff line numberDiff line change
@@ -4816,6 +4816,150 @@ main > .overlay {
48164816
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%, );
48174817
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(255, 255, 255, 0) 0%, endColors=#ffffff 100%);
48184818
}
4819+
#customForums {
4820+
position: absolute;
4821+
top: 0;
4822+
left: 0;
4823+
width: 100%;
4824+
height: 100%;
4825+
box-shadow: 0 0 10px 1px #999;
4826+
}
4827+
#customForums header {
4828+
color: #fff;
4829+
background-color: #db5633;
4830+
}
4831+
#customForums header a:active {
4832+
background-color: #421104;
4833+
}
4834+
#customForums header > h1 {
4835+
text-shadow: 0 1px 1px #421104;
4836+
text-shadow: 0 1px 1px #421104, ;
4837+
}
4838+
#customForums article {
4839+
width: 100%;
4840+
display: block;
4841+
position: absolute;
4842+
top: 50px;
4843+
overflow: scroll;
4844+
background-color: #efefef;
4845+
}
4846+
#customForums article .scroller {
4847+
-webkit-box-shadow: 0, -5px 5px #000000;
4848+
-moz-box-shadow: 0, -5px 5px #000000;
4849+
box-shadow: 0, -5px 5px #000000;
4850+
}
4851+
#customForums article .scroller > ul {
4852+
margin: 0;
4853+
}
4854+
#customForums article .scroller > ul > li {
4855+
-webkit-backface-visibility: hidden;
4856+
display: block;
4857+
min-height: 56px;
4858+
width: 100%;
4859+
-webkit-box-sizing: border-box;
4860+
-moz-box-sizing: border-box;
4861+
box-sizing: border-box;
4862+
}
4863+
#customForums article .scroller > ul > li.show {
4864+
-webkit-animation: bounceInDown 1s ease;
4865+
}
4866+
#customForums article .scroller > ul > li.category,
4867+
#customForums article .scroller > ul > li.group {
4868+
background-color: #ddd;
4869+
border-bottom: 1px solid #ccc;
4870+
}
4871+
#customForums article .scroller > ul > li.category {
4872+
min-height: 30px;
4873+
line-height: 30px;
4874+
font-size: 18px;
4875+
border-left: 4px solid #db5633;
4876+
padding: 10px 16px;
4877+
}
4878+
#customForums article .scroller > ul > li.group {
4879+
min-height: 20px;
4880+
line-height: 20px;
4881+
font-size: 16px;
4882+
padding: 10px 18px;
4883+
}
4884+
#customForums article .scroller > ul > li.forum {
4885+
border-bottom: 1px solid #ddd;
4886+
width: 100%;
4887+
padding: 18px 20px;
4888+
font-size: 10px;
4889+
color: #a3a3a3;
4890+
}
4891+
#customForums article .scroller > ul > li.forum:active,
4892+
#customForums article .scroller > ul > li.forum.choose {
4893+
background-color: #db5633;
4894+
color: #eee;
4895+
}
4896+
#customForums article .scroller > ul > li.forum:active > h4,
4897+
#customForums article .scroller > ul > li.forum.choose > h4 {
4898+
color: #fff;
4899+
}
4900+
#customForums article .scroller > ul > li.forum.choose span {
4901+
display: inline-block;
4902+
float: right;
4903+
font-size: 14px;
4904+
}
4905+
#customForums article .scroller > ul > li.forum span {
4906+
display: none;
4907+
}
4908+
#customForums article .scroller > ul > li.forum > h4 {
4909+
margin: 0;
4910+
padding: 0;
4911+
font-size: 14px;
4912+
font-weight: normal;
4913+
color: #666;
4914+
}
4915+
#customForums article .scroller > .action-pulldown,
4916+
#customForums article .scroller > .action-pullup {
4917+
-webkit-transition: all 0.3s ease-in;
4918+
-moz-transition: all 0.3s ease-in;
4919+
-o-transition: all 0.3s ease-in;
4920+
transition: all 0.3s ease-in;
4921+
text-align: center;
4922+
min-height: 2em;
4923+
line-height: 2em;
4924+
color: #999;
4925+
}
4926+
#customForums article .scroller > .action-pulldown.flip,
4927+
#customForums article .scroller > .action-pullup.flip {
4928+
color: #db5633;
4929+
}
4930+
#customForums article .scroller > .action-pulldown.loading,
4931+
#customForums article .scroller > .action-pullup.loading {
4932+
color: #db5633;
4933+
}
4934+
#customForums article .scroller > .action-pulldown.loading > span.glyphicon,
4935+
#customForums article .scroller > .action-pullup.loading > span.glyphicon {
4936+
-webkit-animation: rotation 2s infinite linear;
4937+
}
4938+
#customForums footer {
4939+
color: #db5633;
4940+
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
4941+
/* FF3.6+ */
4942+
/* Saf4+, Chrome */
4943+
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
4944+
/* Chrome 10+, Saf5.1+, iOS 5+ */
4945+
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
4946+
/* IE10 */
4947+
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
4948+
/* Opera 11.10+ */
4949+
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
4950+
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%, );
4951+
/* FF3.6+ */
4952+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0) 0%), to(#ffffff 100%));
4953+
/* Saf4+, Chrome */
4954+
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%, );
4955+
/* Chrome 10+, Saf5.1+, iOS 5+ */
4956+
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%, );
4957+
/* IE10 */
4958+
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%, );
4959+
/* Opera 11.10+ */
4960+
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%, );
4961+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(255, 255, 255, 0) 0%, endColors=#ffffff 100%);
4962+
}
48194963
#forum {
48204964
position: absolute;
48214965
top: 0;

‎style/main.less

+1
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,7 @@ main {
241241
@import "base/components";
242242

243243
@import "page/forums";
244+
@import "page/customForums";
244245
@import "page/forum";
245246
@import "page/topic";
246247
@import "page/user";

0 commit comments

Comments
 (0)