Skip to content

Commit 57c1d95

Browse files
ksky521ksky521
committed
1、note页面效果优化
2、qrcode页面优化，添加链接之后关闭 3、双屏下一页不能单条显示 4、摇一摇优化
1 parent 582f891 commit 57c1d95

10 files changed

+173
-79
lines changed

‎assets/css/nodeppt2.0.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/nodeppt.control.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
function doItem(id, itemID) {
99
itemID = itemID | 0;
1010
var $curSlide = $slides[id];
11-
var toBuild = $curSlide.querySelectorAll('.build > *');
11+
var buildClass = '.build > *,.fadeIn > *,.moveIn > *,.bounceIn > *,.zoomIn > *';
12+
var toBuild = $curSlide.querySelectorAll(buildClass);
1213
var list;
1314
var index = itemID;
1415

@@ -106,7 +107,7 @@
106107
Slide.Control.methods[type].init(args);
107108
});
108109
}
109-
}
110+
};
110111
Control.init();
111112
Slide.Control = Control;
112113
}(window, document, MixJS.event.broadcast, Slide, MixJS.loadJS));

‎assets/js/nodeppt.control.socket.js

+15-10
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Slide.Control.add('socket', function(S, broadcast) {
77
time = '00' + time;
88
return time.substr(-2);
99
}
10+
var showQrcode;
1011
var qrcodeLink = function() {
1112
//按 q显示控制区域二维码
1213
document.addEventListener('keydown', function(e) {
@@ -22,17 +23,17 @@ Slide.Control.add('socket', function(S, broadcast) {
2223
$body.appendChild($layer);
2324
var $container = document.getElementById('container');
2425

25-
function showQrcode(e) {
26+
showQrcode = function (e) {
2627
if (showQrcode.isShow) {
27-
$container.style.display = 'block';
28+
// $container.style.display = 'block';
2829
$layer.style.display = 'none';
2930
showQrcode.isShow = false;
3031
} else {
31-
$container.style.display = 'none';
32+
// $container.style.display = 'none';
3233
$layer.style.display = 'block';
3334
showQrcode.isShow = true;
3435
}
35-
}
36+
};
3637
};
3738

3839
var webSocket;
@@ -111,7 +112,10 @@ Slide.Control.add('socket', function(S, broadcast) {
111112
}
112113
});
113114
webSocket.on('system', function(data) {
114-
console.log(data);
115+
// console.log(data);
116+
if(showQrcode && showQrcode.isShow){
117+
showQrcode();
118+
}
115119
});
116120

117121
this[this.role + 'Connect']();
@@ -170,14 +174,15 @@ Slide.Control.add('socket', function(S, broadcast) {
170174
if (args.shake) {
171175
//添加shake
172176
MixJS.loadJS(Slide.dir + 'shake.js', function() {
173-
var lastTime = +new Date;
174-
addShakeEvent(function() {
175-
var now = +new Date;
176-
if (now - lastTime > 1000) {
177+
var lastTime = Date.now();
178+
window.addEventListener('shake', function(){
179+
var now = Date.now();
180+
if (now - lastTime > 3000) {
177181
lastTime = now;
178182
Slide.next();
179183
}
180-
});
184+
}, true);
185+
181186
});
182187
}
183188

‎assets/js/nodeppt.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@
130130
//将该标签删除，释放内存
131131
tmpNode.parentNode && tmpNode.parentNode.removeChild(tmpNode);
132132
tmpNode = null;
133-
}
133+
};
134134
}(tmpNode));
135135
}
136136
}

‎assets/js/shake.js

+111-31
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,124 @@
1-
(function(window, document) {
2-
if (window.DeviceMotionEvent) {
3-
window.addEventListener('devicemotion', deviceMotionHandler, false);
1+
(function (window, document) {
2+
3+
/**
4+
* from :https://github.com/alexgibson/shake.js/blob/master/shake.js
5+
*
6+
*/
7+
/**
8+
* 摇一摇实现-抽奖游戏
9+
* @global
10+
* @class Shake
11+
*
12+
* @example
13+
* ```html
14+
* <script src="../output/template/common/bdbox/game/shake.js"></script>
15+
* <script>
16+
* window.addEventListener('shake', shakeEventDidOccur, false);
17+
* function shakeEventDidOccur () {
18+
* alert('被摇了');
19+
* }
20+
* </script>
21+
* ```
22+
*/
23+
function Shake() {
24+
25+
//feature detect
26+
this.hasDeviceMotion = 'ondevicemotion' in window;
27+
28+
//default velocity threshold for shake to register
29+
this.threshold = 15;
30+
31+
//use date to prevent multiple shakes firing
32+
this.lastTime = new Date();
33+
34+
//accelerometer values
35+
this.lastX = null;
36+
this.lastY = null;
37+
this.lastZ = null;
38+
39+
//create custom event
40+
if (typeof document.CustomEvent === "function") {
41+
this.event = new document.CustomEvent('shake', {
42+
bubbles: true,
43+
cancelable: true
44+
});
45+
} else if (typeof document.createEvent === "function") {
46+
this.event = document.createEvent('Event');
47+
this.event.initEvent('shake', true, true);
48+
} else {
49+
return false;
50+
}
451
}
552

6-
var SHAKE_THRESHOLD = 1500;
7-
var lastUpdate = 0;
8-
var x, y, z, last_x, last_y, last_z;
9-
var shakeEvent = [];
53+
//reset timer values
54+
Shake.prototype.reset = function () {
55+
this.lastTime = new Date();
56+
this.lastX = null;
57+
this.lastY = null;
58+
this.lastZ = null;
59+
};
60+
61+
//start listening for devicemotion
62+
Shake.prototype.start = function () {
63+
this.reset();
64+
if (this.hasDeviceMotion) { window.addEventListener('devicemotion', this, false); }
65+
};
66+
67+
//stop listening for devicemotion
68+
Shake.prototype.stop = function () {
1069

11-
function deviceMotionHandler(eventData) {
12-
// Grab the acceleration including gravity from the results
13-
var acceleration = eventData.accelerationIncludingGravity;
70+
if (this.hasDeviceMotion) { window.removeEventListener('devicemotion', this, false); }
71+
this.reset();
72+
};
1473

15-
var curTime = +new Date();
74+
//calculates if shake did occur
75+
Shake.prototype.devicemotion = function (e) {
1676

17-
if ((curTime - lastUpdate) > 100) {
77+
var current = e.accelerationIncludingGravity,
78+
currentTime,
79+
timeDifference,
80+
deltaX = 0,
81+
deltaY = 0,
82+
deltaZ = 0;
1883

19-
var diffTime = (curTime - lastUpdate);
20-
lastUpdate = curTime;
84+
if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
85+
this.lastX = current.x;
86+
this.lastY = current.y;
87+
this.lastZ = current.z;
88+
return;
89+
}
90+
91+
deltaX = Math.abs(this.lastX - current.x);
92+
deltaY = Math.abs(this.lastY - current.y);
93+
deltaZ = Math.abs(this.lastZ - current.z);
2194

22-
x = acceleration.x;
23-
y = acceleration.y;
24-
z = acceleration.z;
95+
if (((deltaX > this.threshold) && (deltaY > this.threshold)) || ((deltaX > this.threshold) && (deltaZ > this.threshold)) || ((deltaY > this.threshold) && (deltaZ > this.threshold))) {
96+
//calculate time in milliseconds since last shake registered
97+
currentTime = new Date();
98+
timeDifference = currentTime.getTime() - this.lastTime.getTime();
2599

26-
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
27-
if (speed > SHAKE_THRESHOLD) {
28-
shakeEvent.forEach(function(v) {
29-
if (typeof v === 'function') {
30-
v();
31-
}
32-
});
100+
if (timeDifference > 1000) {
101+
window.dispatchEvent(this.event);
102+
this.lastTime = new Date();
33103
}
34-
last_x = x;
35-
last_y = y;
36-
last_z = z;
37104
}
38105

106+
this.lastX = current.x;
107+
this.lastY = current.y;
108+
this.lastZ = current.z;
109+
110+
};
111+
112+
//event handler
113+
Shake.prototype.handleEvent = function (e) {
114+
115+
if (typeof (this[e.type]) === 'function') {
116+
return this[e.type](e);
117+
}
118+
};
119+
120+
//create a new instance of shake.js.
121+
var myShakeEvent = new Shake();
122+
myShakeEvent.start();
39123

40-
}
41-
window.addShakeEvent = function(fn) {
42-
shakeEvent.push(fn);
43-
}
44124
}(window, document));

‎assets/scss/nodeppt2.0.scss

+23-15
Original file line numberDiff line numberDiff line change
@@ -228,13 +228,7 @@ slides > slide .slide-wrapper{
228228
max-width: $slide-width-widescreen - $slide-left-right-padding*2;
229229
max-height: $slide-height - $slide-top-bottom-padding*2;
230230
}
231-
.note{
232-
color: $gray-2;
233-
h1,h2,h3,h4{
234-
color: black;
235-
@include text-shadow(none);
236-
}
237-
}
231+
238232
blockquote {
239233
font-size: 28px;
240234
line-height: 1.5em;
@@ -385,6 +379,14 @@ slides > slide {
385379
&:nth-child(6n+5){
386380
background-color: #f68dbb
387381
}
382+
383+
.note{
384+
color: $gray-2;
385+
h1,h2,h3,h4{
386+
color: black;
387+
@include text-shadow(none);
388+
}
389+
}
388390
}
389391

390392

@@ -1241,22 +1243,28 @@ aside.gdbar {
12411243
.qrcode{
12421244
display: none;
12431245
position: fixed;
1244-
width:300px;
1245-
height:300px;
1246-
left:50%;
1247-
top:20%;
1248-
margin-left:-170px;
1249-
background:white;
1250-
padding:20px;
1246+
width:100%;
1247+
height:100%;
1248+
left:0;
1249+
top:0;
1250+
background: rgba(0,0,0,0.5);
1251+
12511252
#qrcode{
12521253
width:256px;
1253-
height:256px;
1254+
height:300px;
12541255
vertical-align: middle;
12551256
margin:0 auto;
1257+
position: relative;
1258+
background-color: white;
1259+
padding: 20px 20px 10px;
1260+
top: 100px;
12561261
}
12571262
p{
12581263
text-align: center;
12591264
line-height: 44px;
1265+
position: absolute;
1266+
top: 380px;
1267+
width: 100%;
12601268
}
12611269
}
12621270

‎lib/md_parser.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ function parse(str, note, sAttrs) {
207207
tagStart = '<slide class="' + cls + '" ' + sAttrs + '>';
208208
// console.log(tagStart);
209209
}
210-
return tagStart + '<section class="slide-wrapper">' + note + content + '</section></slide>';
210+
return tagStart + note +'<section class="slide-wrapper">' + content + '</section></slide>';
211211
}
212212

213213
function doAttr(str, isArticle, noHead) {

‎lib/server.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ module.exports.start = function(port, pptDir, host, argvObj) {
100100
});
101101
});
102102

103-
}
103+
};
104104

105105
function startApp(port, dir, host, argvObj) {
106106
host = host || '0.0.0.0';
@@ -136,7 +136,7 @@ function startApp(port, dir, host, argvObj) {
136136
pptlist(res, pptDir, argvObj);
137137
return;
138138
} else if (dirname === '/md') {
139-
var uid = req.session.uid;
139+
uid = req.session.uid;
140140
if (!uid) {
141141
uid = now++; //当前连接用户的UID
142142
req.session.uid = uid;
@@ -289,7 +289,7 @@ function pptlist(res, dir, argvObj) {
289289
}
290290
var url = '/md/' + filename;
291291
list += '<li><a class="star" href="' + url + '" target="_blank">' + title + '</a>';
292-
list += (argvObj.controller === 'socket' ? '' : '&nbsp; [<a href="' + url + '?_multiscreen=1" target="_blank" title="多窗口打开">多窗口</a>]') + '</li>';
292+
list += (argvObj.controller === 'socket' ? '' : '&nbsp; [<a href="' + url + '?_multiscreen=1" target="_blank" title="多窗口打开">多窗口</a>]&nbsp; [<a href="' + url + '?controller=socket" target="_blank" title="用socket远程控制">远程控制</a>]') + '</li>';
293293
}, '', '', function(filename) {
294294
return /\.(md|markdown)$/.test(filename);
295295
});

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "nodeppt",
33
"jsname": "nodeppt",
4-
"description": "Create a PowerPoint presentation with Markdown",
5-
"version": "0.8.0",
4+
"description": "A simple, in-browser, markdown-driven presentation tool",
5+
"version": "0.8.1",
66
"site": "https://github.com/ksky521/nodePPT",
77
"author": {
88
"name": "Theo Wang",

0 commit comments

Comments
 (0)