Browse files

A new scrollable:

- size parameter is back! does not work with circular in this version
- navigator history with "HTML5" pushState. the history plugin will propably be removed
  • Loading branch information...
1 parent fcecfe6 commit a69f655e537bab8cadb33000021b6daaadf084c4 @tipiirai tipiirai committed Feb 8, 2011
Showing with 68 additions and 61 deletions.
  1. +19 −10 src/scrollable/scrollable.js
  2. +27 −32 src/scrollable/scrollable.navigator.js
  3. +5 −8 test/scrollable/index.html
  4. +17 −11 test/scrollable/single.html
View
29 src/scrollable/scrollable.js
@@ -23,12 +23,13 @@
disabledClass: 'disabled',
easing: 'swing',
initialIndex: 0,
- item: null,
+ item: '> *',
items: '.items',
keyboard: true,
mousewheel: false,
next: '.next',
prev: '.prev',
+ size: 1,
speed: 400,
vertical: false,
touch: true,
@@ -64,6 +65,10 @@
if (!current) { current = self; }
if (itemWrap.length > 1) { itemWrap = $(conf.items, root); }
+
+ // in this version circular not supported when size > 1
+ if (conf.size > 1) { conf.circular = false; }
+
// methods
$.extend(self, {
@@ -100,11 +105,11 @@
},
next: function(time) {
- return self.move(1, time);
+ return self.move(conf.size, time);
},
prev: function(time) {
- return self.move(-1, time);
+ return self.move(-conf.size, time);
},
begin: function(time) {
@@ -128,8 +133,8 @@
next.removeClass("disabled");
} else {
- itemWrap.children("." + conf.clonedClass + ":last").before(item);
- itemWrap.children("." + conf.clonedClass + ":first").replaceWith(item.clone().addClass(conf.clonedClass));
+ itemWrap.children().last().before(item);
+ itemWrap.children().first().replaceWith(item.clone().addClass(conf.clonedClass));
}
fire.trigger("onAddItem", [item]);
@@ -200,6 +205,10 @@
var cloned1 = self.getItems().slice(-1).clone().prependTo(itemWrap),
cloned2 = self.getItems().eq(1).clone().appendTo(itemWrap);
+ /* var items = self.getItems(),
+ cloned1 = items.slice(-1).clone().prependTo(itemWrap),
+ cloned2 = items.filter(":lt(" + conf.size + ")").clone().appendTo(itemWrap); */
+
cloned1.add(cloned2).addClass(conf.clonedClass);
self.onBeforeSeek(function(e, i, time) {
@@ -241,11 +250,11 @@
next.toggleClass(conf.disabledClass, i >= self.getSize() -1);
}
}, 1);
- });
- }
-
- if (!conf.initialIndex) {
- prev.addClass(conf.disabledClass);
+ });
+
+ if (!conf.initialIndex) {
+ prev.addClass(conf.disabledClass);
+ }
}
if (self.getSize() < 2) {
View
59 src/scrollable/scrollable.navigator.js
@@ -47,7 +47,9 @@
navi = conf.navi.jquery ? conf.navi : find(api.getRoot(), conf.navi),
buttons = api.getNaviButtons(),
cls = conf.activeClass,
- history = conf.history && $.fn.history;
+ hashed = conf.history && !!history.pushState,
+ size = api.getConf().size;
+
// @deprecated stuff
if (api) { ret = api; }
@@ -57,15 +59,19 @@
};
+ if (hashed) {
+ history.pushState({i: 0});
+
+ $(window).bind("popstate", function(evt) {
+ var s = evt.originalEvent.state;
+ if (s) { api.seekTo(s.i); }
+ });
+ }
+
function doClick(el, i, e) {
- api.seekTo(i);
- if (history) {
- if (location.hash) {
- location.hash = el.attr("href").replace("#", "");
- }
- } else {
- return e.preventDefault();
- }
+ api.seekTo(i);
+ e.preventDefault();
+ if (hashed) { history.pushState({i: i}); }
}
function els() {
@@ -75,18 +81,17 @@
function addItem(i) {
var item = $("<" + (conf.naviItem || 'a') + "/>").click(function(e) {
- doClick($(this), i, e);
-
- }).attr("href", "#" + i);
+ doClick($(this), i, e);
+ });
// index number / id attribute
if (i === 0) { item.addClass(cls); }
if (conf.indexed) { item.text(i + 1); }
- if (conf.idPrefix) { item.attr("id", conf.idPrefix + i); }
+ if (conf.idPrefix) { item.attr("id", conf.idPrefix + i); }
return item.appendTo(navi);
}
-
+
// generate navigator
if (els().length) {
@@ -96,40 +101,30 @@
});
});
- } else {
+ } else {
$.each(api.getItems(), function(i) {
- addItem(i);
+ if (i % size == 0) addItem(i);
});
}
// activate correct entry
api.onBeforeSeek(function(e, index) {
setTimeout(function() {
if (!e.isDefaultPrevented()) {
- var el = els().eq(index);
- if (!e.isDefaultPrevented() && el.length) {
- els().removeClass(cls).eq(index).addClass(cls);
- }
+ var i = index / size,
+ el = els().eq(i);
+
+ if (el.length) { els().removeClass(cls).eq(i).addClass(cls); }
}
}, 1);
});
- function doHistory(evt, hash) {
- var el = els().eq(hash.replace("#", ""));
- if (!el.length) {
- el = els().filter("[href=" + hash + "]");
- }
- el.click();
- }
-
// new item being added
api.onAddItem(function(e, item) {
- item = addItem(api.getItems().index(item));
- if (history) { item.history(doHistory); }
+ var i = api.getItems().index(item);
+ if (i % size == 0) addItem(i);
});
- if (history) { els().history(doHistory); }
-
});
return conf.api ? ret : this;
View
13 test/scrollable/index.html
@@ -1,9 +1,8 @@
-<script src="../js/jquery-1.3.2.js"></script>
+<script src="../js/jquery-1.5.min.js"></script>
<script src="../../src/scrollable/scrollable.js"></script>
<script src="../../src/scrollable/scrollable.navigator.js"></script>
<script src="../../src/scrollable/scrollable.autoscroll.js"></script>
-<script src="../../src/toolbox/toolbox.history.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
@@ -18,7 +17,7 @@
<script>
$(function() {
- window.api = $(".scrollable").scrollable({ mousewheel: true, size: 5})
+ window.api = $(".scrollable").scrollable({ mousewheel: true, size: 5 })
.navigator({idPrefix: 'a', history: true}).data("scrollable");
api.onBeforeSeek(function() {
@@ -51,17 +50,15 @@
<p>
<button type="button" onclick="api.begin()">begin</button>
- <button type="button" onclick="api.prevPage()">prevPage</button>
- <button type="button" onclick="api.prev()">prev</button>
- <button type="button" onclick="api.next()">next</button>
- <button type="button" onclick="api.nextPage()">nextPage</button>
+ <button type="button" onclick="api.prev()">&lt;</button>
+ <button type="button" onclick="api.next()">&gt;</button>
<button type="button" onclick="api.end()">end</button>
</p>
<h2>Add / remove items</h2>
<p>
- <button type="button" onclick="$('div.items').append('<div>x</div>')">add item</button>
+ <button type="button" onclick="api.addItem('<div>x</div>')">add item</button>
<button type="button" onclick="$('div.items div:last').remove()">remove item</button>
</p>
View
28 test/scrollable/single.html
@@ -1,23 +1,31 @@
-<script src="../js/jquery-1.5.min.js"></script>
+<script src="../js/jquery-1.4.2.min.js"></script>
<script src="../../src/scrollable/scrollable.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
.disabled {
visibility:hidden;
}
+.scrollable {
+ height: 90px;
+ width: 265px;
+}
</style>
<script>
$(function() {
- var api = $(".scrollable").scrollable({
- onSeek: function() {
+ var api = $(".scrollable").scrollable({
+
+ onBeforeSeek: function() {
console.info("jou");
- }
+ },
+ size: 2,
+ circular: true
+
}).data("scrollable");
- api.addItem("<div>added</div>");
+ // api.addItem("<div>added</div>");
});
</script>
@@ -28,16 +36,14 @@
<div class="navi"></div>
- <div class="scrollable" style="width:130px">
+ <div class="scrollable">
<div class="items">
<div>0</div>
- <div>1</div>
- <div>2</div>
- <div>3</div>
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
<div>4</div>
- <div>5</div>
- <div>6</div>
</div>
</div>

1 comment on commit a69f655

@blacktrash

The changes to navigator here break what is advertised:
"If you are using a tags inside the wrapper and you supply href attributes for them you have the added benefit of automatically seeking to the correct item when you enter the page with a matching "hash" of the URL."

http://flowplayer.org/tools/scrollable/index.html#demos
should scroll to "demos".

See #511

Please sign in to comment.