Skip to content

Instantly share code, notes, and snippets.

@mix3

mix3/jquery.presentation.js.diff

Created June 10, 2011 22:08
Show Gist options
  • Save mix3/1019885 to your computer and use it in GitHub Desktop.
Save mix3/1019885 to your computer and use it in GitHub Desktop.
Download ZIP
diff -u js/jquery.presentation.js.orig js/jquery.presentation.js
Raw
readme.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>$.presentation</title>
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.presentation.js"></script>
<script type="text/javascript">
$(function(){
// 一応フェードの時間を調整可能
$.presentation.slideManager._fadetime = 500;
});
</script>
</head>
<body>
<div class="mod-page top">
<div>
<h1><a href="http://code.google.com/p/jquery-presentation/">jquery-presentation</a></h1>
<p>もう少しだけプレゼンツールっぽくしてみた</p>
</div>
</div>
<div class="mod-page plain">
<div>
<h2>変更してみたこと</h2>
<ul>
<li class="pause">プレゼンっぽく情報の小出しが可能に
<ul class="pause"><li>タグの属性として「class="pause"」を付けたものは小出しの対象に</li></ul>
</li>
<li class="pause">小出し、ページ送り、先頭、末尾、の操作が可能
<ul>
<li>左右：情報の小出し</li>
<li>上下：ページ送り</li>
<li>Home/End：先頭/末尾</li>
</ul>
</li>
</ul>
<pre class="pause" style="font-size:50%">
&lt;script type="text/javascript">
$(function(){
// 一応フェードの時間を調整可能
$.presentation.slideManager._fadetime = 500;
});
&lt;/script>
</pre>
</div>
</div>
<div class="mod-page shout">
<div>
<p>以上</p>
</div>
</div>
<hr />
<ul class="mod-pager" id="pager"> <li id="pager-L"><a href="#">L</a></li> <li id="pager-R"><a href="#">R</a></li> </ul>
<p class="mod-pageNum" id="pageNum"> <span class="current" id="pageNum-current">0</span> / <span class="total" id="pageNum-total">0</span> </p>
</body>
</html>
Raw
jquery.presentation.js.diff
--- js/jquery.presentation.js.orig 2010-05-23 23:18:18.000000000 +0900
+++ js/jquery.presentation.js 2011-06-11 04:13:06.000000000 +0900
@@ -33,6 +33,7 @@
* $.presentation.SlideManager
*/
$.presentation.SlideManager = function(){
+ this._fadetime = 500;
this._current = null;
this._items = [];
this._createItems();
@@ -79,18 +80,18 @@
e.preventDefault();
self.next();
});
- /* Home - to the first page */
- $.keyDownObserver.observe({ key: 36, fn: $.proxy(self.first, self) });
- /* End - to the last page */
- $.keyDownObserver.observe({ key: 35, fn: $.proxy(self.last, self) });
- /* up/left arrow, PgUp - to the previous page */
- $.keyDownObserver.observe({ key: 33, fn: $.proxy(self.prev, self) });
+ /* PgUp - to the last page */
+ $.keyDownObserver.observe({ key: 33, fn: $.proxy(self.first, self) });
+ /* left arrow - to the previous info */
$.keyDownObserver.observe({ key: 37, fn: $.proxy(self.prev, self) });
- $.keyDownObserver.observe({ key: 38, fn: $.proxy(self.prev, self) });
- /* down/right arrow, PgDn - to the next page */
- $.keyDownObserver.observe({ key: 34, fn: $.proxy(self.next, self) });
+ /* up - to the previous page */
+ $.keyDownObserver.observe({ key: 38, fn: $.proxy(self.page_prev, self) });
+ /* PgDn - to the last page */
+ $.keyDownObserver.observe({ key: 34, fn: $.proxy(self.last, self) });
+ /* right arrow - to the next info */
$.keyDownObserver.observe({ key: 39, fn: $.proxy(self.next, self) });
- $.keyDownObserver.observe({ key: 40, fn: $.proxy(self.next, self) });
+ /* down - to the next page */
+ $.keyDownObserver.observe({ key: 40, fn: $.proxy(self.page_next, self) });
$.keyDownObserver.start();
},
_transitionize: function(){
@@ -125,13 +126,16 @@
return res;
},
add: function(element){
- var item = new $.presentation.SlideManager.Item(element);
+ var item = new $.presentation.SlideManager.Item(element, this._hidetime);
this._items.push(item);
$.presentation.pageNum.increaseTotal();
return item;
},
next: function(){
var current = this._current;
+ if (current.pause_next(this._fadetime)) {
+ return true;
+ }
var next = this._findNextOf(current);
if(!next){
return null;
@@ -144,6 +148,9 @@
},
prev: function(){
var current = this._current;
+ if (current.pause_prev(this._fadetime)) {
+ return true;
+ }
var prev = this._findPrevOf(current);
if(!prev){
return null;
@@ -154,6 +161,24 @@
$.presentation.pageNum.decrease();
return prev;
},
+ page_prev: function(){
+ var current = this._current;
+ if(current.is_first()){
+ this.prev();
+ return;
+ }
+ var res = true;
+ while(res){ res = current.pause_prev(this._fadetime) }
+ },
+ page_next: function(){
+ var current = this._current;
+ if(current.is_last()){
+ this.next();
+ return;
+ }
+ var res = true;
+ while(res){ res = current.pause_next(this._fadetime) }
+ },
first: function(){
var res = true;
while(res){ res = this.prev(); }
@@ -168,7 +193,14 @@
* $.presentation.SlideManager.Item
*/
$.presentation.SlideManager.Item = function(element){
- this.element = $(element);
+ this.element = $(element);
+ this._current = 0;
+ this._pauses = [];
+ var pauses = this._pauses;
+ this.element.find('.pause').each(function(){
+ $(this).hide();
+ pauses.push($(this));
+ });
};
$.presentation.SlideManager.Item.prototype = {
transitionize: function(){
@@ -189,7 +221,36 @@
this.element.
removeClass('center onView left').
addClass('right');
- }
+ },
+ is_first: function() {
+ if(this._current == 0){
+ return true;
+ }
+ return false;
+ },
+ is_last: function() {
+ if(this._current == this._pauses.length){
+ return true;
+ }
+ return false;
+ },
+ pause_next: function(fadetime) {
+ var max = this._pauses.length;
+ if (this._current < max) {
+ this._pauses[this._current].show(fadetime);
+ this._current++;
+ return true;
+ }
+ return false;
+ },
+ pause_prev: function(fadetime){
+ if (0 < this._current) {
+ this._current--;
+ this._pauses[this._current].hide(fadetime);
+ return true;
+ }
+ return false;
+ },
};
/**
@mix3
Copy link
Author

mix3 commented Jun 10, 2011

上記サンプル：http://dl.dropbox.com/u/5299588/jquery-presentation/index.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment