Skip to content

Commit 024bbf9

Browse files
ksky521ksky521
committed
添加magic效果，todo：垂直居中；parse
1 parent 422029e commit 024bbf9

File tree

5 files changed

+370
-115
lines changed

5 files changed

+370
-115
lines changed

‎assets/css/nodeppt.css

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

‎assets/js/nodeppt.js

+165-29
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@
5050
}
5151

5252
function dispatchEvent($dom, name, data) {
53+
if (!$dom || typeof $dom.dispatchEvent !== 'function') {
54+
data = name;
55+
name = $dom;
56+
$dom = null;
57+
}
5358
var event = document.createEvent('Event');
5459
event.initEvent('ppt' + name, true, true);
5560
event.stopped = false;
@@ -65,7 +70,7 @@
6570
}
6671
}
6772
}
68-
$dom.dispatchEvent(event);
73+
$dom && $dom.dispatchEvent && $dom.dispatchEvent(event);
6974
return event;
7075
}
7176
//设置底部进度条
@@ -131,7 +136,28 @@
131136
if (slideInTimer) {
132137
clearTimeout(slideInTimer);
133138
}
134-
slideInTimer = setTimeout(slideInCallBack_, 1500);
139+
//休息休息一下~
140+
slideInTimer = setTimeout(slideInCallBack_, 800);
141+
}
142+
143+
function getCallbackFuncFromName(cbNames) {
144+
if (!cbNames) {
145+
return cbNames;
146+
}
147+
cbNames = cbNames.split('.');
148+
var cb = window;
149+
for (var i = 0, len = cbNames.length; i < len; i++) {
150+
var type = typeof cb[cbNames[i]];
151+
if (type === 'object' || type === 'function') {
152+
cb = cb[cbNames[i]];
153+
} else {
154+
break;
155+
}
156+
}
157+
if (typeof cb === 'function') {
158+
return cb;
159+
}
160+
return null;
135161
}
136162

137163
function slideInCallBack_() {
@@ -140,16 +166,21 @@
140166
return;
141167
}
142168
var dataset = $cur.dataset;
143-
var cb = dataset.incallback || dataset.onEnter;
169+
var cbNames = dataset.incallback || dataset.onEnter;
170+
var cb = getCallbackFuncFromName(cbNames);
171+
var event = dispatchEvent('Enter', {
172+
container: $cur
173+
});
144174
//如果有data-incallback那么就执行callback
145-
cb && typeof $win[cb] === 'function' && proxyFn(cb);
175+
cb && typeof cb === 'function' && proxyFn(cbNames, event);
146176

147177

148178
//事件：keypress接管，build接管
149179
['Keypress', 'Build'].forEach(function(v) {
150180
var callback = dataset['on' + v];
151-
if (callback && typeof $win[callback] === 'function') {
152-
$cur.addEventListener('ppt' + v, $win[callback], true);
181+
callback = getCallbackFuncFromName(callback);
182+
if (callback && typeof callback === 'function') {
183+
$cur.addEventListener('ppt' + v, callback, true);
153184
}
154185
});
155186

@@ -182,15 +213,20 @@
182213

183214
function slideOutCallBack_(prev) {
184215
var dataset = prev.dataset;
185-
var cb = dataset.outcallback || dataset.onLeave;
216+
var cbNames = dataset.outcallback || dataset.onLeave;
217+
var cb = getCallbackFuncFromName(cbNames);
218+
var event = dispatchEvent('Leave', {
219+
container: prev
220+
});
186221
//如果有data-outcallback那么就执行callback
187-
cb && typeof $win[cb] === 'function' && proxyFn(cb);
222+
cb && typeof cb === 'function' && proxyFn(cbNames, event);
188223

189224
//解绑事件：keypress，build
190225
['Keypress', 'Build'].forEach(function(v) {
191226
var callback = dataset['on' + v];
192-
if (callback && typeof $win[callback] === 'function') {
193-
prev.removeEventListener('ppt' + v, $win[callback], true);
227+
callback = getCallbackFuncFromName(callback);
228+
if (callback && typeof callback === 'function') {
229+
prev.removeEventListener('ppt' + v, callback, true);
194230
}
195231
});
196232
}
@@ -229,7 +265,8 @@
229265
$curSlide = $slides[curIndex];
230266
//自定义事件，直接返回
231267
var event = dispatchEvent($curSlide, 'Build', {
232-
direction: 'next'
268+
direction: 'next',
269+
container: $curSlide
233270
});
234271
if (event.stopped) {
235272
return event.stopped;
@@ -275,7 +312,8 @@
275312

276313
//自定义事件，直接返回
277314
var event = dispatchEvent($curSlide, 'Build', {
278-
direction: 'prev'
315+
direction: 'prev',
316+
container: $curSlide
279317
});
280318
if (event.stopped) {
281319
return event.stopped;
@@ -347,15 +385,15 @@
347385
}
348386

349387
//切换动画
350-
function doSlide() {
388+
function doSlide(direction) {
351389
// $container.style.marginLeft = -(slideID * slideWidth) + 'px';
352390
updateSlideClass();
353391
setProgress();
354392
if (doHash) {
355393
lockSlide = true;
356394
$win.location.hash = "#" + curIndex;
357395
}
358-
slideInCallBack();
396+
slideInCallBack(direction);
359397
removePaint();
360398

361399
if ($doc.body.classList.contains('overview')) {
@@ -385,22 +423,22 @@
385423
for (var i = 0, len = $slides.length; i < len; ++i) {
386424
switch (i) {
387425
case curSlide - 2:
388-
updateSlideClass_(i, 'far-past', pageClass);
426+
updateSlideClass_($slides[i], 'far-past', pageClass);
389427
break;
390428
case curSlide - 1:
391-
updateSlideClass_(i, 'past', pageClass);
429+
updateSlideClass_($slides[i], 'past', pageClass);
392430
break;
393431
case curSlide:
394-
updateSlideClass_(i, 'current', pageClass);
432+
updateSlideClass_($slides[i], 'current', pageClass);
395433
break;
396434
case curSlide + 1:
397-
updateSlideClass_(i, 'next', pageClass);
435+
updateSlideClass_($slides[i], 'next', pageClass);
398436
break;
399437
case curSlide + 2:
400-
updateSlideClass_(i, 'far-next', pageClass);
438+
updateSlideClass_($slides[i], 'far-next', pageClass);
401439
break;
402440
default:
403-
updateSlideClass_(i);
441+
updateSlideClass_($slides[i]);
404442
break;
405443
}
406444
}
@@ -428,8 +466,8 @@
428466
}
429467
}
430468

431-
function updateSlideClass_(slideNo, className, pageClass) {
432-
var el = $slides[slideNo];
469+
function updateSlideClass_(el, className, pageClass) {
470+
// var el = $slides[slideNo];
433471

434472
if (!el) {
435473
return;
@@ -491,6 +529,7 @@
491529
var event = dispatchEvent($curSlide, 'Keypress', {
492530
keyCode: key,
493531
orgiTarget: target,
532+
container: $curSlide
494533
});
495534
if (event.stopped) {
496535
return event.stopped;
@@ -642,7 +681,7 @@
642681
// right
643682
case 40:
644683
// down
645-
nextSlide()
684+
nextSlide();
646685
break;
647686
}
648687

@@ -771,7 +810,7 @@
771810
this.classList.remove('fa-paint-brush');
772811
}
773812
isOpen = !isOpen;
774-
}
813+
};
775814
}(), false);
776815

777816
$win.addEventListener('hashchange', function() {
@@ -961,11 +1000,12 @@
9611000
}
9621001
return false; //j 触屏画笔
9631002
}
964-
}
1003+
};
9651004

9661005
//代理函数，用于函数控制
9671006
function proxyFn(fnName, args) {
968-
$win[fnName](args);
1007+
var cb = getCallbackFuncFromName(fnName);
1008+
cb(args);
9691009
}
9701010

9711011
/**
@@ -1018,7 +1058,7 @@
10181058

10191059
function loadTheme() {
10201060
if (defaultOptions.theme) {
1021-
loadCSS('/css/theme.' + defaultOptions.theme + '.css')
1061+
loadCSS('/css/theme.' + defaultOptions.theme + '.css');
10221062
}
10231063
}
10241064

@@ -1057,7 +1097,6 @@
10571097
});
10581098
}
10591099

1060-
10611100
initVar(); //初始化变量
10621101
loadTheme();
10631102
makeBuildLists();
@@ -1080,6 +1119,102 @@
10801119
$body.style.opacity = 1;
10811120
}
10821121

1122+
function magic(e) {
1123+
var $cur = $('magic', e.container);
1124+
if ($cur.length) {
1125+
$cur = $cur[0];
1126+
} else {
1127+
return;
1128+
}
1129+
var index = ($cur.dataset.index || 0) | 0;
1130+
1131+
var pageClass = 'pagedown';
1132+
1133+
if (e.direction === 'prev') {
1134+
//往前翻页
1135+
pageClass = 'pageup';
1136+
}
1137+
var $slides = toArray($('.magicItem', $cur));
1138+
var len = $slides.length;
1139+
1140+
if (!e.firstKiss) {
1141+
if (e.direction === 'prev') {
1142+
index--;
1143+
if (index < 0) {
1144+
index = 0;
1145+
$cur.dataset.index = index;
1146+
//标示状态
1147+
$cur.dataset.status = 'wait';
1148+
return;
1149+
} else {
1150+
e.stop();
1151+
}
1152+
} else {
1153+
index++;
1154+
if (index === len) {
1155+
index = len - 1;
1156+
$cur.dataset.index = index;
1157+
//标示状态
1158+
$cur.dataset.status = 'done';
1159+
return;
1160+
} else {
1161+
e.stop();
1162+
}
1163+
}
1164+
$cur.dataset.index = index;
1165+
}
1166+
1167+
// debugger
1168+
for (var i = 0; i < len; ++i) {
1169+
switch (i) {
1170+
case index - 2:
1171+
updateSlideClass_($slides[i], 'far-past', pageClass);
1172+
break;
1173+
case index - 1:
1174+
updateSlideClass_($slides[i], 'past', pageClass);
1175+
break;
1176+
case index:
1177+
updateSlideClass_($slides[i], 'current', pageClass);
1178+
break;
1179+
case index + 1:
1180+
updateSlideClass_($slides[i], 'next', pageClass);
1181+
break;
1182+
case index + 2:
1183+
updateSlideClass_($slides[i], 'far-next', pageClass);
1184+
break;
1185+
default:
1186+
updateSlideClass_($slides[i]);
1187+
break;
1188+
}
1189+
}
1190+
1191+
}
1192+
magic.init = function(e) {
1193+
var $cur = $('magic', e.container);
1194+
if ($cur.length) {
1195+
$cur = $cur[0];
1196+
} else {
1197+
return;
1198+
}
1199+
1200+
var index = $cur.dataset.index || 0;
1201+
switch ($cur.dataset.status) {
1202+
case 'done':
1203+
//说明从完成的地方往前翻页
1204+
$cur.dataset.index = index;
1205+
1206+
index--;
1207+
case 'wait':
1208+
//说明已经到了第一页了
1209+
break;
1210+
default:
1211+
//第一次进入
1212+
e.firstKiss = true;
1213+
magic(e);
1214+
}
1215+
console.log('init:', index);
1216+
1217+
};
10831218
var Slide = {
10841219
current: 0,
10851220
curItem: 0,
@@ -1111,7 +1246,8 @@
11111246
showPaint: showPaint,
11121247
removePaint: removePaint,
11131248
buildNextItem: buildNextItem,
1114-
buildPrevItem: buildPrevItem
1249+
buildPrevItem: buildPrevItem,
1250+
magic: magic
11151251
};
11161252
['on', 'un', 'fire'].forEach(function(v) {
11171253
Slide[v] = function() {

0 commit comments

Comments
 (0)