Skip to content

Commit

Permalink
添加callback回调
Browse files Browse the repository at this point in the history 
扩展[slide]方式
修改背景图片实现
  • Loading branch information
@ksky521
ksky521 committed Oct 1, 2013
1 parent bdf0513 commit 0a626c3
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 125 deletions.
99 changes: 10 additions & 89 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
nodePPT v0.4.6
nodePPT v0.4.8
=============
![nodePPT演示](https://raw.github.com/ksky521/nodePPT/master/demo.gif "nodePPT演示")

Expand Down Expand Up @@ -36,18 +36,15 @@ speaker: Theo Wang
url: https://github.com/ksky521/nodePPT
transition: zoomin

[slide]
[slide data-]

# 封面样式
## h1是作为封面用的，内部的都用h2

[slide]

[bgimage]/img/bg1.png[/bgimage]
[slide style="background-image:url('/img/bg1.png')"]

# 背景图片 {:&.flexbox.vleft}
## 使用方法：[bgimage]/img/bg.jpg[/bgimage]

## 使用方法：[slide style="background-image:url('/img/bg1.png')"]

[slide]

Expand All @@ -61,93 +58,15 @@ nodeppt：https://github.com/ksky521/nodePPT

[slide]

## 这是一个列表
---

* 列表支持淡入淡出 {:&.build}
* 上下左右方向键翻页 {:&.build}
* 支持多级列表
* 完全基于markdown语法哦

[slide]
## 表格示例
### 市面上主要的css预处理器：less\sass\stylus
---
|less| sass | stylus
:-------|:------:|-------:|--------
环境 |js/nodejs | Ruby | nodejs
扩展名 | .less | .sass/.scss | .styl
特点 | 老牌，用户多，支持js解析 | 功能全，有成型框架，发展快 | 语法多样，小众
案例/框架 | [Bootstrap](http://getbootstrap.com/) | [compass](http://compass-style.org) [bourbon](http://bourbon.io) |

[slide]

## 代码格式化
### 使用 **highlightjs**
----

[slide]
## iframe
----
<iframe data-src="http://www.google.com/doodle4google/resources/history.html" src="about:blank;"></iframe>
[slide]
[note]
##这里是note

使用n键，才能显示
[/note]
## 使用note笔记
### note笔记是多窗口，或者自己做一些笔记用的
---
按下键盘【n】键测试下note，


[slide]

## 使用画笔
### 使用画笔做标记哦~你也可以随便作画啊！
---
按下键盘【p】键。按下鼠标左键，在此处乱花下看看效果。

按下键盘【c】键。清空画板

[slide]

## 使用宽屏模式
---
按下键盘【w】键。看下效果。

再按下键盘【w】键。

[slide]

## 哦 忘记说了
---
本页面网址改成 url#client，支持多窗口演示哦！

另外支持多种动画哦：

* horizontal3d
* horizontal
* vertical3d
* zoomin
* zoomout
* cards

当然你可以自己写更炫的动画啊，记得pull给我动画代码哦~

[slide]

## 更多玩法
---
https://github.com/ksky521/nodePPT

什么？这些功能还不够用？

极客模式：查看源码的nodeppt.js，相信你会找到牛逼的手机互动（摇一摇换页）功能

查看项目目录ppts获取更多帮助信息
```

更多demo，查看 ```ppts``` 目录的demo

### 帮助

```shell
Expand All @@ -156,5 +75,7 @@ nodeppt -h

## demo演示 & 使用方法

* 启动 nodeppt
* 执行 nodeppt start -p 8080
* 访问 http://127.0.0.1:8080/


2 changes: 1 addition & 1 deletion assets/markdown.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,6 @@ MixJS.use('event/broadcast', function($){
});
});
</script>
<%= files %>
</body>
</html>
77 changes: 52 additions & 25 deletions lib/md_parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ var defaultJSON = {
url: '',
speaker: '',
content: '',
transition: 'zoomout'
transition: 'zoomout',
files: ''
};

marked.setOptions({
Expand All @@ -35,13 +36,16 @@ marked.setOptions({
});

var emptyFn = function(str) {
console.log(str);
// console.log(str);
};
var parser = function(string, callback) {
if (typeof callback !== 'function') {
callback = emptyFn;
}
var contents = string.split('[slide]');
var splitReg = /\[slide\s*(.*)\]/ig;
var slidesSetting = string.match(splitReg);
var contents = string.split(/\[slide.*\]/i);
// console.log(contents.length, slidesSetting);
//第一个是封面
var cover = contents.shift();

Expand All @@ -50,16 +54,34 @@ var parser = function(string, callback) {
json.nodeppt_version = config.version
json.nodeppt_site = config.site;
json = mix(defaultJSON, json);

if (json.files) {
var files = json.files.split(/\s?,\s?/);
json.files = files.map(function(v) {
if (/.js$/i.test(v)) {
//js文件
return '<script src="' + v + '"></script>'
} else if (/.css$/i.test(v)) {
//css文件
return '<link rel="stylesheet" href="' + v + '">'
}
return v;
}).join(EOL);
}
var slides = [];
var reg = /\[note\]([\s\S]+)\[\/note\]/im;
contents.forEach(function(v) {
contents.forEach(function(v, i) {
var cfg = slidesSetting[i];
cfg = cfg.match(/\[slide\s+(.+)\s?\]/);
var attrs = '';
if (cfg) {
attrs = cfg[1];
}
var note = reg.exec(v);
if (note) {
v = v.replace(reg, '');
note = marked(note[1]);
}
slides.push(parse(marked(v), note));
slides.push(parse(marked(v), note, attrs));
});
//合并
json.content = slides.join(EOL);
Expand All @@ -85,11 +107,11 @@ module.exports = parser;
function mix(obj) {
var i = 1,
target, key;

var hasOwnProperty = Object.prototype.hasOwnProperty;
for (; i < arguments.length; i++) {
target = arguments[i];
for (key in target) {
if (Object.prototype.hasOwnProperty.call(target, key)) {
if (hasOwnProperty.call(target, key)) {
obj[key] = target[key];
}
}
Expand Down Expand Up @@ -117,16 +139,18 @@ function parseCover(str) {

/**
* 解析 slide内容
* @param {[type]} str [description]
* @return {[type]} [description]
* @param {[type]} str [description]
* @param {[type]} note [description]
* @param {[type]} sAttrs [description]
* @return {[type]} [description]
*/

function parse(str, note) {
function parse(str, note, sAttrs) {
var arr = str.split('<hr>');
var head = '',
article = '';
if (note && note.length > 3) {
note = '<aside class="note">\n<section>' + note + '</section>\n</aside>';
note = ['<aside class="note">', '<section>', note, '</section>', '</aside>'].join(EOL);
} else {
note = '';
}
Expand All @@ -138,14 +162,14 @@ function parse(str, note) {
}
if (head !== '') {
head = do_attr(head);
head = '<hgroup>\n' + head + '</hgroup>\n';
head = ['<hgroup>', head, '</hgroup>'].join(EOL);
}

var noHead = !head;
var articleAttr;
article = do_attr(article, true, noHead);

article = '<article>\n' + article + '</article>\n';
article = ['<article>', article, '</article>'].join(EOL);
//处理文章只用h1的情况，作为标题页面
if (noHead && /<h1>.*<\/h1>/g.test(article)) {

Expand All @@ -168,18 +192,21 @@ function parse(str, note) {
}
}
var content = head + article;
var bgimage;
//背景图片
if (/[bgimage].*[\/bgimage]/g.test(content)) {
content = content.replace(/<(\w+)>\[bgimage\](.*)\[\/bgimage(?:\]|<\/a>])+<\/\1>/gm, function(input, tag, image) {
bgimage = image.replace(/<(.*?)>/g, '');
return '';
})
}

var tagStart = '<slide class="slide">';
if (bgimage) {
tagStart = '<slide class="slide fill" style="background-image:url(' + bgimage + ')">'
if (sAttrs) {
var cls = sAttrs.match(/class=['"]?([^'"]+)['"]?/);
if (cls) {
cls = cls[1] + ' slide';
sAttrs = sAttrs.replace(cls[0], '');
} else {
cls = 'slide';
}
if (/background/.test(sAttrs)) {
cls += ' fill';
}
tagStart = '<slide class="' + cls + '" ' + sAttrs + '>';
// console.log(tagStart);
}
return tagStart + note + content + '</slide>';
}
Expand Down Expand Up @@ -241,6 +268,6 @@ function parseAttr(idinput, attrs) {
return attr;
}
///test
// var str = fs.readFileSync('../test/basic.md').toString();
// var str = fs.readFileSync('ppts/demo.md').toString();

// parser(str);
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "nodeppt",
"jsname": "nodeppt",
"description": "Create a PowerPoint presentation with Markdown",
"version": "0.4.7",
"version": "0.4.8",
"site": "https://github.com/ksky521/nodePPT",
"author": {
"name": "Theo Wang",
Expand Down
3 changes: 3 additions & 0 deletions ppts/css/demo.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.file-setting{
color: yellow;
}
Loading

0 comments on commit 0a626c3

Please sign in to comment.