Skip to content

Commit

Permalink
调整magic
Browse files Browse the repository at this point in the history
  • Loading branch information
@ksky521
ksky521 committed Dec 12, 2015
1 parent ff97398 commit 1a3b7b6
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 48 deletions.
2 changes: 1 addition & 1 deletion assets/css/nodeppt.css
View file

Large diffs are not rendered by default.

44 changes: 33 additions & 11 deletions assets/scss/_animation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,32 @@
}

/**zoomout***/
slide[data-transition="zoomin"],
slide[data-transition="zoomout"],
.magic>.magicItem[data-transition="zoomin"],
.magic>.magicItem[data-transition="zoomout"] {
visibility: hidden;
}
slide[data-transition="zoomout"].current,
slide[data-transition="zoomin"].current,
.magic>.magicItem[data-transition="zoomout"].current,
.magic>.magicItem[data-transition="zoomin"].current{
visibility: visible;

}
slide[data-transition="zoomout"].past,
slide[data-transition="zoomin"].next,

.magic>.magicItem[data-transition="zoomout"].past,
.magic>.magicItem[data-transition="zoomin"].next{
@include transform(scale(1.2));
visibility: visible;
}
slide[data-transition="zoomin"].past,
slide[data-transition="zoomout"].next,

.magic>.magicItem[data-transition="zoomin"].past,
.magic>.magicItem[data-transition="zoomout"].next {
@include transform(scale(0.8));
visibility: visible;
}

/**horizontal*/
Expand Down Expand Up @@ -97,11 +110,12 @@ slides.layout-widescreen .magic>.magicItem[data-transition="horizontal3d"]{

slide[data-transition="horizontal3d"].next,
.magic>.magicItem[data-transition="horizontal3d"].next {
@include transform(rotateY(90deg));
@include transform(rotateY(90deg));
}
slide[data-transition="horizontal3d"].past,
.magic>.magicItem[data-transition="horizontal3d"].past {
@include transform(rotateY(-90deg))
opacity: 1;
@include transform(rotateY(-90deg))
}

// vertical 3d
Expand Down Expand Up @@ -524,29 +538,34 @@ slide.pageup[data-transition="slide3"].next,
@include prefixed(animation-timing-function, cubic-bezier(1, 0, 0, 1));
}


//cover-diamond
slide[data-transition="cover-diamond"],
.magic>.magicItem[data-transition="cover-diamond"]{
@include transition(opacity 0, -webkit-clip-path 1s);
@include transition(opacity 0.9s, -webkit-clip-path 0.9s);
opacity: 0;
@include prefixed(clip-path, polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%));
}
slide[data-transition="cover-diamond"].current,
.magic>.magicItem[data-transition="cover-diamond"].current{
opacity: 1;
@include ani-delay700();
@include prefixed(clip-path, polygon(50% -100%, 137.5% 50%, 50% 200%, -37.5% 50%));
}

slide[data-transition="cover-diamond"].past,
.magic>.magicItem[data-transition="cover-diamond"].past {
@include transition(opacity, 0 cubic-bezier(.11,.75,.58,.97));
.magic>.magicItem[data-transition="cover-diamond"].past,
slide[data-transition="cover-diamond"].next,
.magic>.magicItem[data-transition="cover-diamond"].next {
opacity: 1;
@include transition(clip-path, 0 cubic-bezier(.11,.75,.58,.97));
}



slide[data-transition="cover-circle"],
.magic>.magicItem[data-transition="cover-circle"]{
opacity: 0;
@include transition(opacity 0, -webkit-clip-path 1s);
@include transition(opacity 0.9s, -webkit-clip-path 0.9s);
@include prefixed(clip-path,circle(0% at 50% 50%));
}
slide[data-transition="cover-circle"].current,
Expand All @@ -555,8 +574,11 @@ slide[data-transition="cover-circle"].current,
@include prefixed(clip-path,circle(80% at 50% 50%));
}
slide[data-transition="cover-circle"].past,
.magic>.magicItem[data-transition="cover-circle"].past {
@include transition(opacity, 0 cubic-bezier(.11,.75,.58,.97));
.magic>.magicItem[data-transition="cover-circle"].past,
slide[data-transition="cover-circle"].next,
.magic>.magicItem[data-transition="cover-circle"].next {
opacity: 1;
@include transition(clip-path, 0 cubic-bezier(.11,.75,.58,.97));
}

@import "keyframes";
32 changes: 25 additions & 7 deletions assets/scss/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,30 +85,48 @@
@include column(5);
@include column(6);

.padding10,.pd10{
padding: 10px;
}
.margin10,.mg10{
margin: 10px;
}
.padding20,.pd20{
padding: 20px;
}
.margin20,.mg20{
margin: 20px;
}
.pd5-10,.padding5-10{
padding: 5px 10px;
}
.pd10-20,.padding10-20{
padding: 10px 20px;
}
//lable
.label {
.label,.tag {
line-height: inherit;
font-weight: 400
}
.label-default {
.label-default,.tag-default {
@include label-variant($label-default-bg);
color: black;
border: 1px solid $border-color;
}
.label-primary {
.label-primary,.tag-primary {
@include label-variant($label-primary-bg);
color: #fff;
}
.label-success {
.label-success,.tag-success {
@include label-variant($label-success-bg);
}
.label-info {
.label-info,.tag-info {
@include label-variant($label-info-bg);
}
.label-warning {
.label-warning,.tag-warning {
@include label-variant($label-warning-bg);
}
.label-danger {
.label-danger,.tag-danger {
@include label-variant($label-danger-bg);
}
//text
Expand Down
1 change: 1 addition & 0 deletions assets/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@

@mixin label-variant($color) {
background-color: $color;
padding:5px 0;
&[href] {
&:hover,
&:focus {
Expand Down
2 changes: 1 addition & 1 deletion assets/scss/nodeppt.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ slides > slide .slide-wrapper {
}

slides > slide .magic{
visibility: hidden;
// visibility: hidden;
width: 100%;
height: 100%;
// overflow: hidden;
Expand Down
57 changes: 29 additions & 28 deletions lib/md_parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ var defaultJSON = {
files: '',
highlightStyle: 'monokai_sublime',
headFiles: '',
usemathjax: '',//如果为yes，则引入mathjax，默认不建议开启，导出文件太多
usemathjax: '', //如果为yes，则引入mathjax，默认不建议开启，导出文件太多
date: ''
};

Expand All @@ -41,10 +41,10 @@ marked.setOptions({
langPrefix: ''
});

var emptyFn = function(str) {
var emptyFn = function (str) {
// console.log(str);
};
var parser = function(string, callback, argvObj, queryObj, commonData) {
var parser = function (string, callback, argvObj, queryObj, commonData) {
if (typeof callback !== 'function') {
callback = emptyFn;
}
Expand All @@ -65,7 +65,7 @@ var parser = function(string, callback, argvObj, queryObj, commonData) {
});

//优先使用url的参数来控制，使用js来做，不再使用server
['theme', 'transition'].forEach(function(v) {
['theme', 'transition'].forEach(function (v) {
if (json.query && json.query[v]) {
json[v] = json.query[v];
}
Expand All @@ -81,7 +81,7 @@ var parser = function(string, callback, argvObj, queryObj, commonData) {
var subReg = /\[subslide\]([\s\S]+)\[\/subslide\]/im;
var magicReg = /\[magic\b(.*)\]([\s\S]+)\[\/magic\]/im;
var subSeparator = /[\=]{4,}/g;
contents.forEach(function(v, i) {
contents.forEach(function (v, i) {
var cfg = slidesSetting[i];
cfg = cfg.match(/\[slide\s+(.+)\s?\]/);
var attrs = '';
Expand All @@ -100,12 +100,12 @@ var parser = function(string, callback, argvObj, queryObj, commonData) {
if (subslide) {
extType = 'subSlide';
subslide = subslide[1].split(subSeparator)
.filter(function(v) {
.filter(function (v) {
return v && v.trim();
});
if (subslide.length > 1) {
v = v.replace(subReg, EOL + SUB_SILDE_PLACEHOLDER + EOL);
subslide.forEach(function(v, i) {
subslide.forEach(function (v, i) {
extData.push(marked(v));
});
} else {
Expand All @@ -118,13 +118,13 @@ var parser = function(string, callback, argvObj, queryObj, commonData) {
extAttr = magicSlide[1];
attrs += ' data-on-build="Slide.magic" data-on-enter="Slide.magic.init"';
magicSlide = magicSlide[2].split(subSeparator)
.filter(function(v) {
.filter(function (v) {
return v && v.trim();
});

if (magicSlide.length > 1) {
v = v.replace(magicReg, EOL + SUB_SILDE_PLACEHOLDER + EOL);
magicSlide.forEach(function(v, i) {
magicSlide.forEach(function (v, i) {
extData.push(['<div class="magic-wrapper">', contentParser(marked(v)), '</div>'].join(EOL));
});
} else {
Expand Down Expand Up @@ -187,7 +187,7 @@ function parseCover(str) {
str = str.split(EOL);
var obj = {};
var reg = /(\w+)\s?:\s?(.+)/;
str.forEach(function(val) {
str.forEach(function (val) {
if (val = reg.exec(val)) {
obj[val[1]] = val[2];
}
Expand Down Expand Up @@ -247,15 +247,16 @@ function parse(content, extendTags, note, sAttrs) {
return tagStart + note + '<section class="slide-wrapper">' + content + '</section></slide>';
}
var extendTagsHandler = {
magic: function(data, attr) {
attr = attr || 'data-transition="circle"'
data = data.map(function(v) {
return '<div class="magicItem" ' + attr + '>' + contentParser(v) + '</div>';
magic: function (data, attr) {
attr = attr || 'data-transition="move"'
var clss = ['current pagedown', 'next pagedown', 'far-next pagedown'];
data = data.map(function (v, i) {
return '<div class="magicItem ' + (clss[i] ? clss[i] : '') + '" ' + attr + '>' + contentParser(v) + '</div>';
});
return '<div class="magic">' + data.join(EOL) + '</div>';
},
subSlide: function(data, attr) {
data = data.map(function(v) {
subSlide: function (data, attr) {
data = data.map(function (v) {
return '<div class="subSlide">' + contentParser(v) + '</div>';
});
return data.join(EOL);
Expand Down Expand Up @@ -286,7 +287,7 @@ function contentParser(str) {
//处理文章只用h1的情况，作为标题页面
if (noHead && /<h1>.*<\/h1>/g.test(article)) {

article = article.replace(/<h1>([^<]+)(\s+\{:\&amp;(.+)\})<\/h1>/m, function(input, text, idinput, attrs) {
article = article.replace(/<h1>([^<]+)(\s+\{:\&amp;(.+)\})<\/h1>/m, function (input, text, idinput, attrs) {
articleAttr = parseAttr(idinput, attrs);
return '<h1>' + text + '</h1>';
});
Expand All @@ -297,12 +298,12 @@ function contentParser(str) {
}
} else {

article = article.replace(/<(\w+)>(\s?\{:(?:\&amp;)?([^\&].+)\})<\/\1>/gm, function(input, tag, idinput, attrs) {
article = article.replace(/<(\w+)>(\s?\{:(?:\&amp;)?([^\&].+)\})<\/\1>/gm, function (input, tag, idinput, attrs) {
articleAttr = parseAttr(idinput, attrs);
return '';
});
//特殊处理tb
article = article.replace(/<(td|p)>(.*)(\s?\{:(?:\&amp;)?([^\&].+)\})<\/\1>/gm, function(input, tag, con, idinput, attrs) {
article = article.replace(/<(td|p)>(.*)(\s?\{:(?:\&amp;)?([^\&].+)\})<\/\1>/gm, function (input, tag, con, idinput, attrs) {
var a = parseAttr(idinput, attrs);
if (con.indexOf('<span') === -1) {
con = '<span>' + con + '<span>';
Expand All @@ -315,7 +316,7 @@ function contentParser(str) {
}
}
article = article.replace(/<p>\s*<\/p>/g, '').replace(/<p>\s*(<img([^<]+)>)<\/p>/g, '$1');
article = article.replace(/<p>\s*<p>(.*?)<\/p>\s*<\/p>/g, function(index, reg) {
article = article.replace(/<p>\s*<p>(.*?)<\/p>\s*<\/p>/g, function (index, reg) {
return '<p>' + reg + '</p>';
});
return head + article;
Expand All @@ -332,12 +333,12 @@ function doAttr(str, isArticle, noHead) {
//input:## Title {:.build width="200px"}
//output: <h2 class="build" width="200px">Title</h2>

str = str.replace(/<(\w+)([^>]*)>([^<]+)(\s+\{:([^\&].+)\})<\/\1>/gm, function(input, tag, pre, text, idinput, attrs) {
str = str.replace(/<(\w+)([^>]*)>([^<]+)(\s+\{:([^\&].+)\})<\/\1>/gm, function (input, tag, pre, text, idinput, attrs) {
var attr = parseAttr(idinput, attrs);
attr = mergeAttr(pre, attr);
return '<' + tag + ' ' + attr + '>' + text + '</' + tag + '>';
});
str = str.replace(/<(\w+)>([^<]+)<(\w+)>(.+)(\s+\{:\&amp;(.+)\})/mg, function(input, parentTag, parentText, childTag, childText, idinput, attrs) {
str = str.replace(/<(\w+)>([^<]+)<(\w+)>(.+)(\s+\{:\&amp;(.+)\})/mg, function (input, parentTag, parentText, childTag, childText, idinput, attrs) {
var attr = parseAttr(idinput, attrs);
return '<' + parentTag + ' ' + attr + '>' + parentText + '<' + childTag + '>' + childText;
});
Expand All @@ -364,7 +365,7 @@ function mergeAttr(oldAttr, newAttr) {
var old = {},
inew = {};
var back = [];
oldAttrs.forEach(function(a) {
oldAttrs.forEach(function (a) {
var v = a.split('=');
v[0] = v[0].toLowerCase();
if (v[0] === 'class' || v[0] === 'style') {
Expand All @@ -373,7 +374,7 @@ function mergeAttr(oldAttr, newAttr) {
back.push(a);
}
});
newAttrs.forEach(function(a) {
newAttrs.forEach(function (a) {
var v = a.split('=');
v[0] = v[0].toLowerCase();
if (v[0] === 'class' || v[0] === 'style') {
Expand All @@ -382,7 +383,7 @@ function mergeAttr(oldAttr, newAttr) {
back.push(a);
}
});
['class', 'style'].forEach(function(v) {
['class', 'style'].forEach(function (v) {
//两个都存在，则合并之
switch (v) {
case 'class':
Expand All @@ -408,13 +409,13 @@ function parseAttr(idinput, attrs) {
var attrArr = [];
var idArr = [],
classArr = [];
attrs.forEach(function(attr) {
attrs.forEach(function (attr) {
if (!!~attr.indexOf('=')) {
attrArr.push(attr);
} else if (attr) {
var ids = attr.split(/[#|.]/);
// console.log(attr);
ids.forEach(function(v) {
ids.forEach(function (v) {
if (v !== '') {
(new RegExp('\\#' + v)).test(idinput) && idArr.push(v);
(new RegExp('\\.' + v)).test(idinput) && classArr.push(v);
Expand Down Expand Up @@ -451,7 +452,7 @@ function parseAttr(idinput, attrs) {
*/
function getFilesHtml(files) {
files = (files || '').split(/\s?,\s?/);
return files.map(function(v) {
return files.map(function (v) {
var basename = path.basename(v);
if (/.js$/i.test(basename)) {
//js文件
Expand Down

0 comments on commit 1a3b7b6

Please sign in to comment.