Skip to content

Commit

Permalink
增加watch功能，修复overview多次控制问题
Browse files Browse the repository at this point in the history 
升级socket.io到最新版本
  • Loading branch information
@ksky521
ksky521 committed Feb 13, 2015
1 parent c10452d commit 1c86235
Show file tree
Hide file tree
Showing 9 changed files with 187 additions and 158 deletions.
8 changes: 7 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ nodePPT - 让你爱上做分享！
=============
[This is a readme file in English](./README_EN.md)

[![NPM](https://nodei.co/npm-dl/nodeppt.png)](https://nodei.co/npm/nodeppt/)
[![NPM](https://nodei.co/npm/nodeppt.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/nodeppt/)

## 为什么选择nodePPT

**这可能是迄今为止最好的网页版PPT**
Expand All @@ -18,7 +21,10 @@ nodePPT - 让你爱上做分享！
* [支持进入/退出回调](#callback)，做在线demo很方便
* 支持事件update函数，查看[demo](http://qdemo.sinaapp.com/#12)

## 0.9.0新功能
## 1.0.0新功能
* 实现watch功能`nodeppt start -w`

## 0.9.0 新功能
* 添加画板多端同步
* 添加按钮控制进度
* 新增两种转场动效，增加事件绑定方法：`Slide.on`
Expand Down
21 changes: 5 additions & 16 deletions README_EN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,38 @@ nodePPT - This is probably the best web presentation tool so far!
==================================
中文说明：[README](./README.md)

[![NPM](https://nodei.co/npm-dl/nodeppt.png)](https://nodei.co/npm/nodeppt/)
[![NPM](https://nodei.co/npm/nodeppt.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/nodeppt/)

## why nodePPT?

* markdown based on GFM;

* mix-code with html and markdown

* export your work with html and pdf format;

* 18 different transition animations, and you can choose single page animation well;

* Setting one page background image different than others;

* overview mode, multiscreen mode, remote control with socket, shake to page-flipping with ipad/iphone;

* canvas is also supported, with socket, we **sync your multiscreen in real time**, and you can type some notes;

* syntax highlighting of course, and you may want to customize your [syntax highlighting style](https://highlightjs.org/), it's supported well;

* Animation in single page, one-step animation;

* [forward and backward callback function](#callback)

## 0.9.0 new features

## 1.0.0 new features
* real time sync canvas drawing across multiple devices

* watch
* add buttons to control page-flipping

* bugs fixed

## demo

* http://qdemo.sinaapp.com/

* sync multiscreen in real time: http://qdemo.sinaapp.com/?_multiscreen=1 (make sure alert is allowed in your browser)

* front-end experience of mobile baidu: http://qdemo.sinaapp.com/box-fe-road.htm


## customize your theme

* default theme is not cool? just customize your theme! take a look with [theme.moon](https://github.com/ksky521/nodePPT/blob/master/assets/scss/theme.moon.scss)

* write your customize theme's template path in setting md:

```markdown
Expand Down
2 changes: 0 additions & 2 deletions assets/js/nodeppt.control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,6 @@
t.sendUpdateItem(slideID, buildItem);
}).on('slide event keyup', function(e) {
t.sendKeyEvent(e.keyCode);
}).on('overview', function(e) {
t.sendKeyEvent(79);
}).on('show paint', function(e){
t.sendKeyEvent(80);
}).on('remove paint', function(){
Expand Down
25 changes: 11 additions & 14 deletions assets/js/nodeppt.control.socket.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,28 +90,20 @@ Slide.Control.add('socket', function(S, broadcast) {
action = action.replace('client', 'control');

broadcast.fire(action, data);

// switch (action) {
// case 'from client update':
// broadcast.fire('from control update', data);
// break;
// case 'from client updateItem':
// broadcast.fire('from control updateItem', data);
// break;
// }
});

},
connect: function() {
webSocket = io.connect(this.host);
webSocket = io.connect(location.host+'/ppt');
// console.log(io);
webSocket.on('UUID', function(uid) {
webSocket.uid = uid;
if (Socket.role === 'client') {
MixJS.loadJS('/js/qrcode.js', function() {
qrcodeLink();
var url = location.href.split('#')[0];
url += (!~url.indexOf('?')) ? '?' : '&';
url += 'iscontroller=1&clientid=' + uid;
url += 'iscontroller=1&clientid=' + encodeURIComponent(uid);
var qrcode = new QRCode('qrcode', {
text: url,
width: 256,
Expand Down Expand Up @@ -162,7 +154,6 @@ Slide.Control.add('socket', function(S, broadcast) {
// console.log(this.clientUID);
//角色，是否为控制端
if (args.isControl) {
console.log(this.clientUID);
this.role = 'control';
var $body = document.body;
$body.classList.add('popup');
Expand Down Expand Up @@ -202,9 +193,15 @@ Slide.Control.add('socket', function(S, broadcast) {
});
}

MixJS.loadJS(socketIOURL, function() {
if (io && io.connect) {
//已经存在
Socket.connect();
});
} else {
MixJS.loadJS(socketIOURL, function() {
Socket.connect();
});
}

}
};
return Socket;
Expand Down
173 changes: 86 additions & 87 deletions assets/js/nodeppt.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@
build: item.dataset.index
})
list = item.classList;
$B.fire('slide.update',curIndex|0, item.dataset.index|0+1);
$B.fire('slide.update', curIndex | 0, item.dataset.index | 0 + 1);
list.remove('to-build');
list.add('building');

Expand Down Expand Up @@ -240,7 +240,7 @@
if ($doc.body.classList.contains('overview')) {
focusOverview_();
return;
}else if(!$doc.body.classList.contains('popup')){
} else if (!$doc.body.classList.contains('popup')) {
$doc.body.classList.remove('with-notes');
}

Expand Down Expand Up @@ -283,7 +283,7 @@
break;
}
}
$B.fire('slide.update', curIndex,0, pageClass);
$B.fire('slide.update', curIndex, 0, pageClass);

}

Expand Down Expand Up @@ -345,102 +345,101 @@
/*************************events***************/

//pc键盘翻页事件逻辑

function evtDocUp(e) {
var key = e.keyCode;
var target = e.target;
//防止input和textarea，和可以编辑tag
if (/^(input|textarea)$/i.test(target.nodeName) || target.isContentEditable) {
return;
}
if (!e.isFromControl) {
switch (key) {
case 13:
case 72:
case 87:
case 79:
case 78:
case 80:
case 67:
$B.fire('slide event keyup', e);
break;
}
}
var key = e.keyCode;
var target = e.target;
//防止input和textarea，和可以编辑tag
if (/^(input|textarea)$/i.test(target.nodeName) || target.isContentEditable) {
return;
}
if (!e.isFromControl) {
switch (key) {
case 13:
// Enter
if ($doc.body.classList.contains('overview')) {
overview(e.isFromControl);
}

break;
case 72:
// H: Toggle code highlighting
$doc.body.classList.toggle('highlight-code');
setTimeout(function() {
$doc.body.classList.toggle('highlight-code');
}, 2000);
break;
// 下掉宽屏模式，默认width：100%
case 87:
// W: Toggle widescreen
// Only respect 'w' on body. Don't want to capture keys from an <input>.
if (!(e.shiftKey && e.metaKey)) {
if (!$body.classList.contains('popup'))
$container.classList.toggle('layout-widescreen');
}
break;
case 79:
// O: Toggle overview
overview(e.isFromControl);

break;
case 78:
// N
if (!$body.classList.contains('popup'))
$doc.body.classList.toggle('with-notes');
break;
case 80:
//P
if (!$body.classList.contains('popup')) {
showPaint(e.isFromControl);
}
break;
case 67:
//c
if (!$body.classList.contains('popup')) {
removePaint(e.isFromControl);
}
break;
//上一页
case 33:
// pg up
case 37:
// left
case 38:
// up
prevSlide();
break;
//下一页
// case 9:
// tab
case 32:
// space
case 34:
// pg down
case 39:
// right
case 40:
// down
nextSlide()
$B.fire('slide event keyup', e);
break;
}

// $container.style.marginLeft = -(curIndex * slideWidth) + 'px';
// setProgress();
// setHistory();
}
/******************************** Touch events *********************/
switch (key) {
case 13:
// Enter
if ($doc.body.classList.contains('overview')) {
overview(e.isFromControl);
}

break;
case 72:
// H: Toggle code highlighting
$doc.body.classList.toggle('highlight-code');
setTimeout(function() {
$doc.body.classList.toggle('highlight-code');
}, 2000);
break;
// 下掉宽屏模式，默认width：100%
case 87:
// W: Toggle widescreen
// Only respect 'w' on body. Don't want to capture keys from an <input>.
if (!(e.shiftKey && e.metaKey)) {
if (!$body.classList.contains('popup'))
$container.classList.toggle('layout-widescreen');
}
break;
case 79:
// O: Toggle overview
overview(e.isFromControl);

break;
case 78:
// N
if (!$body.classList.contains('popup'))
$doc.body.classList.toggle('with-notes');
break;
case 80:
//P
if (!$body.classList.contains('popup')) {
showPaint(e.isFromControl);
}
break;
case 67:
//c
if (!$body.classList.contains('popup')) {
removePaint(e.isFromControl);
}
break;
//上一页
case 33:
// pg up
case 37:
// left
case 38:
// up
prevSlide();
break;
//下一页
// case 9:
// tab
case 32:
// space
case 34:
// pg down
case 39:
// right
case 40:
// down
nextSlide()
break;
}

// $container.style.marginLeft = -(curIndex * slideWidth) + 'px';
// setProgress();
// setHistory();
};
/******************************** Touch events *********************/
var isStopTouchEvent = false;

function evtTouchStart(event) {
Expand Down
1 change: 1 addition & 0 deletions bin/nodeppt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ program
.option('-p, --port [port]', 'set server port ', 8080)
.option('-c, --controller [socket]', 'support websocket mutil screen controller')
.option('-H, --host [host]', 'set host address', ipv4 || '0.0.0.0')
.option('-w, --watch', 'livereload')
.action(function (cmd){
if(typeof cmd !== 'object'){
this.outputHelp();
Expand Down
Loading

0 comments on commit 1c86235

Please sign in to comment.