Skip to content

Commit a8d60b8

Browse files
alswlalswl
committed
支持字体变化
1 parent a180e44 commit a8d60b8

File tree

8 files changed

+90
-29
lines changed

8 files changed

+90
-29
lines changed

‎js/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
run: function () {
1919
var self = this, book;
2020
self.ui.displayHeroUnit();
21-
if (!window.shiu.util.isIphone() && !window.shiu.DEBUG) { // 非 iOS 打开
21+
if (!window.shiu.util.isMobile() && !window.shiu.DEBUG) { // 非 iOS 打开
2222
self.error('请在iPhone/iPod Touch打开');
2323
} else {
2424
// 以独立应用打开

‎js/appui.js

+49-21
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
e.preventDefault();
3939
});
4040
self.sidebar = Object.create(p.Sidebar).init('#sidebar', self);
41-
self.indexBtn = Object.create(p.IndexBtn).init('#sidebar .index_btn', self);
41+
self.buttons = Object.create(p.Buttons).init('#sidebar .buttons', self);
4242
self.content = Object.create(window.shiu.ui.Content).init('#content', self);
4343
self.$heroUnit.one('click', function () {
4444
self.app.startRead();
@@ -56,16 +56,6 @@
5656
isOrientation = isOrientation || false;
5757
var x = window.screen.width,
5858
y = document.body.scrollHeight;
59-
//$('#body').css('width', x + 'px');
60-
//$('#main').css('width', x + 'px');
61-
//$('#index').css('width', x + 'px');
62-
//$('#content .chapter').css('width', x + 'px');
63-
//$('#content .chapter').css('-moz-column-width', x + 'px');
64-
//$('#content .chapter').css('-webkit-column-width', x + 'px');
65-
//$('#body').css('height', y + 'px');
66-
//$('#main').css('height', y + 'px');
67-
//$('#index').css('height', y + 'px');
68-
//$('#content').css('height', y + 'px');
6959
if (isOrientation) {
7060
this.SCREEN_WIDTH = y;
7161
this.SCREEN_HEIGHT = x;
@@ -210,14 +200,17 @@
210200
window.shiu.ui.Sidebar = Sidebar;
211201
}());
212202

213-
// 目录菜单按钮
203+
// 菜单按钮
214204
(function () {
215205
'use strict';
216-
var IndexBtn = {
206+
var Buttons = {
217207

218208
init: function (selector, ui) {
219209
var self = this;
220210
self.$ = $(selector);
211+
self.$index = $(selector).children('.index_btn');
212+
self.$fontZi = $(selector).children('.font_zi_btn');
213+
self.$fontZo = $(selector).children('.font_zo_btn');
221214
self.ui = ui;
222215
self.bindTouchStart();
223216
return self;
@@ -246,23 +239,33 @@
246239

247240
bindTouchStart: function () {
248241
var self = this;
249-
self.$.bind('touchstart', function (e) {
242+
self.$index.bind('touchstart', function (e) {
250243
self.ui.sidebar.toggle();
251244
e.stopPropagation();
252245
return false;
253246
});
247+
self.$fontZi.bind('touchstart', function (e) {
248+
self.ui.content.incFontSize();
249+
e.stopPropagation();
250+
return false;
251+
});
252+
self.$fontZo.bind('touchstart', function (e) {
253+
self.ui.content.decFontSize();
254+
e.stopPropagation();
255+
return false;
256+
});
254257
},
255258

256259
bindDragEnd: function () { // TODO 暂时不用
257260
var self = this;
258-
self.$.ondragend = function (e) {
261+
self.$index.ondragend = function (e) {
259262
self.ui.sidebar.show();
260263
};
261264
}
262265

263266
};
264267

265-
window.shiu.ui.IndexBtn = IndexBtn;
268+
window.shiu.ui.Buttons = Buttons;
266269
}());
267270

268271
// 书籍内容模块 Content
@@ -292,12 +295,12 @@
292295
if (!self.isTouchEvent) {
293296
if (x < self.ui.SCREEN_WIDTH * 0.25) {
294297
self.ui.app.prePage();
295-
self.ui.indexBtn.hide();
298+
self.ui.buttons.hide();
296299
} else if (x > self.ui.SCREEN_WIDTH * 0.75) {
297300
self.ui.app.nextPage();
298-
self.ui.indexBtn.hide();
301+
self.ui.buttons.hide();
299302
} else {
300-
self.ui.indexBtn.toggle();
303+
self.ui.buttons.toggle();
301304
}
302305
}
303306
});
@@ -367,6 +370,7 @@
367370
self.$chapter.css('height',
368371
(self.ui.SCREEN_HEIGHT - self.ui.SCREEN_BOTTOM_HEIGHT) + 'px');
369372
self.$chapter.css('-webkit-column-width', self.ui.SCREEN_WIDTH + 'px');
373+
self.$chapter.children('p').css('font-size', self.ui.app.book.getFontSize());
370374
},
371375

372376
setPage: function (page) {
@@ -376,10 +380,34 @@
376380
},
377381

378382
getPageCount: function () {
379-
return (this.$chapter.children().last().offset().left -
380-
this.ui.SCREEN_PADDING)
383+
return ((this.$chapter.find('.end').offset().left - this.$chapter.children().first().offset().left))
381384
/ (this.ui.SCREEN_WIDTH + this.ui.SCREEN_COLUMN_GAP)
382385
+ 1;
386+
},
387+
388+
incFontSize: function () {
389+
var self = this,
390+
size = parseInt(self.$chapter.children('p').css('font-size'), 10);
391+
if (size < 32) {
392+
self.$chapter.children('p').css('font-size', (size + 2) + 'px');
393+
}
394+
self.ui.app.book.setPageCount(self.getPageCount());
395+
self.ui.app.book.setFontSize(size);
396+
},
397+
398+
decFontSize: function () {
399+
var self = this,
400+
size = parseInt(self.$chapter.children('p').css('font-size'), 10);
401+
if (size > 12) {
402+
self.$chapter.children('p').css('font-size', (size - 2) + 'px');
403+
}
404+
self.ui.app.book.setPageCount(self.getPageCount());
405+
self.ui.app.book.setFontSize(size);
406+
407+
// 过载保护
408+
if (self.ui.app.book.getPageCount() <= self.ui.app.book.getCurrentPage()) {
409+
self.ui.app.prePage();
410+
}
383411
}
384412

385413
};

‎js/book.js

+14
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,20 @@
3838
return page;
3939
},
4040

41+
setFontSize: function (size) {
42+
var self = this;
43+
self.db.set(self.title + '_font_size', size);
44+
},
45+
46+
getFontSize: function () {
47+
var self = this,
48+
size = self.db.get(self.title + '_font_size');
49+
if (size === null) {
50+
size = 16;
51+
}
52+
return size;
53+
},
54+
4155
// 总页数保存到本地
4256
setPageCount: function (page) {
4357
var self = this;

‎js/chapter.js

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
self.$Template = '<section class="chapter">\n' +
1818
'<h2>{title}</h2>\n' +
1919
'{contents}\n' +
20+
'<span class="end"></span>\n' +
2021
'</section>';
2122
contentHtml = '';
2223
for (i = 0; i < self.content.split('\r').length; i += 1) {

‎js/common.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@
135135
},
136136

137137
// 是否 iPhone
138-
isIphone: function () {
138+
isMobile: function () {
139139
return (navigator.userAgent.match(/iPhone/i)) ||
140140
(navigator.userAgent.match(/iPod/i)) ||
141141
(navigator.userAgent.match(/iPad/i)) ||

‎js/shiu.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ $(function () {
88
if (DEBUG && DEBUG_MODE === 'standalone') {
99
window.navigator.standalone = true;
1010
}
11-
if (DEBUG && !window.shiu.util.isIphone()) {
11+
if (DEBUG && !window.shiu.util.isMobile()) {
1212
element = document.createElement("script");
1313
element.type = "text/javascript";
1414
element.src = '../js/phantom-limb.js';

‎qingyunian1/index.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,11 @@ <h1 class="book_name">庆余年·壹</h1>
5656
</div>
5757
</div>
5858
</div>
59-
<div class="btn index_btn">目</div>
59+
<div class="buttons">
60+
<div class="btn index_btn">目</div>
61+
<div class="btn font_zi_btn">大</div>
62+
<div class="btn font_zo_btn">小</div>
63+
</div>
6064
</div>
6165
<div id="content_wrapper">
6266
<div id="content">

‎style/style.css

+18-4
Original file line numberDiff line numberDiff line change
@@ -209,20 +209,33 @@ body {
209209
#sidebar .wrapper .copyright a {
210210
color: #fff;
211211
}
212-
#sidebar .btn {
212+
#sidebar .btns {
213+
float: left;
214+
}
215+
#sidebar .buttons {
216+
top: 250px;
213217
position: relative;
214218
float: left;
219+
}
220+
#sidebar .btn {
215221
width: 30px;
216-
height: 50px;
217-
line-height: 50px;
222+
height: 40px;
223+
line-height: 40px;
218224
padding: 4px;
219225
font-size: 20px;
220226
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
221227
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
222228
border-radius: 0 6px 6px 0;
223229
}
224230
#sidebar .index_btn {
225-
top: 250px;
231+
background: #00ADEE;
232+
border: 1px solid #0076A3;
233+
}
234+
#sidebar .font_zi_btn {
235+
background: #00ADEE;
236+
border: 1px solid #0076A3;
237+
}
238+
#sidebar .font_zo_btn {
226239
background: #00ADEE;
227240
border: 1px solid #0076A3;
228241
}
@@ -252,4 +265,5 @@ body {
252265
#content p {
253266
font-size: 1.2em;
254267
text-indent: 2em;
268+
line-height: 1.6em;
255269
}

0 commit comments

Comments
 (0)