Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add pagintor class, clean-up CSS to be more theme friendly

  • Loading branch information...
commit ca4bfeab7a88c300e8008a5a39f34f2177b959c3 1 parent a99e337
@sgruhier authored
View
BIN  sample/pagination/images/black_bullet.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  sample/pagination/images/blue_bullet.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
50 sample/pagination/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+ <title>Simple Example</title>
+ <link rel="stylesheet" href="../../themes/test/theme.css" type="text/css" />
+ <link rel="stylesheet" href="../../themes/default/ui.carousel.css" type="text/css" />
+ <link rel="stylesheet" href="simple.css" type="text/css" />
+</head>
+
+<body>
+ <h1>Prototype Carousel Examples</h1>
+ <h2>Paginator</h2>
+ <div id="hcarousel" class="ui-carousel-horizontal">
+ <div class="ui-carousel-container">
+ <ul>
+ <li class="item1">1</li>
+ <li class="item2">2</li>
+ <li class="item3">3</li>
+ <li class="item4">4</li>
+ <li class="item5">5</li>
+ <li class="item6">6</li>
+ <li class="item7">7</li>
+ <li class="item8">8</li>
+ <li class="item9">9</li>
+ <li class="item10">10</li>
+ <li class="item11">11</li>
+ <li class="item12">12</li>
+ </ul>
+ </div>
+ <div id="hpaginate" class="ui-carousel-paginate">
+ <div class="ui-icon ui-icon-circle-arrow-w ui-carousel-prev"><a href="#" onclick="return false">&lt;</a></div>
+ <ul></ul>
+ <div class="ui-icon ui-icon-circle-arrow-e ui-carousel-next"><a href="#" onclick="return false">&gt;</a></div>
+
+ </div>
+ </div>
+
+ <script src="../../lib/prototype.js" type="text/javascript"></script>
+ <script src="../../lib/s2.js" type="text/javascript"></script>
+ <script src="../../src/carousel.js" type="text/javascript"></script>
+
+ <script type="text/javascript">
+ new S2.UI.Carousel("hcarousel", {paginator: 'hpaginate'});
+ </script>
+</body>
+</html>
View
95 sample/pagination/simple.css
@@ -0,0 +1,95 @@
+body {
+
+}
+
+h1, h2 {
+ float:left;
+ width:100%;
+}
+
+#container {
+ margin-left:auto;
+ margin-right:auto;
+ text-align:left;
+ width:1024px;
+}
+
+#hcarousel {
+ float:left;
+ width:600px;
+ height: 200px;
+}
+
+.item1 { background:#F2F2F2; }
+.item2 { background:#E5E5E5; }
+.item3 { background:#D8D8D8; }
+.item4 { background:#CCC; }
+.item5 { background:#BFBFBF; }
+.item6 { background:#B2B2B2; }
+.item7 { background:#A5A5A5; }
+.item8 { background:#999; }
+.item9 { background:#8C8C8C; }
+.item10 { background:#7F7F7F; }
+.item11 { background:#727272; }
+.item12 { background:#666; }
+
+.ui-carousel-horizontal .ui-carousel-container {
+ float: left;
+ width: 600px;
+ height: 200px;
+}
+
+.ui-carousel-horizontal .ui-carousel-container ul {
+ float:left;
+ height: 200px;
+}
+
+.ui-carousel-horizontal .ui-carousel-container ul li {
+ float:left;
+ width:200px;
+ height: 200px;
+ list-style:none;
+ line-height: 200px;
+ font-size: 50px;
+ text-align: center;
+ margin:0;
+ padding:0;
+}
+
+.ui-carousel-horizontal .ui-carousel-prev a, .ui-carousel-horizontal .ui-carousel-next a {
+ color:#6CF;
+ text-decoration:none;
+ background: #C6F1FF;
+}
+
+.ui-carousel-horizontal .ui-carousel-prev a:hover, .ui-carousel-horizontal .ui-carousel-next a:hover {
+ background: #6CF;
+ color:#FFF;
+}
+
+.ui-carousel-horizontal .ui-carousel-paginate {
+ text-align: center;
+}
+
+.ui-carousel-horizontal .ui-carousel-paginate ul {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+}
+
+.ui-carousel-prev, .ui-carousel-next, .ui-carousel-horizontal .ui-carousel-paginate li {
+ display: inline-block;
+}
+
+.ui-carousel-horizontal .ui-carousel-paginate .ui-state-hover {
+ border: none;
+ background-color: #FFF;
+ background-image: url(../../themes/test/images/ui-icons_228ef1_256x240.png);
+ font-weight: bold;
+}
+
+.ui-carousel-horizontal .ui-carousel-paginate ul li.ui-state-active {
+ border: none;
+ background-color: #FFF;
+ background-image: url(../../themes/test/images/ui-icons_ffd27a_256x240.png);
+}
View
2  sample/simple/index.html
@@ -13,7 +13,7 @@
</head>
<body>
- <h1>Prototype Carousel Samples</h1>
+ <h1>Prototype Carousel Examples</h1>
<h2>Horizontal</h2>
<div id="hcarousel" class="ui-carousel-horizontal">
<div class="ui-carousel-prev"><a href="#" onclick="return false">&lt;</a></div>
View
67 sample/simple/simple.css
@@ -43,6 +43,54 @@ h1, h2 {
.item11 { background:#727272; }
.item12 { background:#666; }
+/* Horizontal */
+.ui-carousel-horizontal .ui-carousel-container {
+ float: left;
+ width: 600px;
+ height: 200px;
+}
+
+.ui-carousel-horizontal .ui-carousel-container ul {
+ float:left;
+ height: 200px;
+}
+
+.ui-carousel-horizontal .ui-carousel-container ul li {
+ float:left;
+ width:200px;
+ height: 200px;
+ list-style:none;
+ line-height: 200px;
+ font-size: 50px;
+ text-align: center;
+ margin:0;
+ padding:0;
+}
+
+/* Vertical */
+.ui-carousel-vertical .ui-carousel-container {
+ float: left;
+ width: 100px;
+ height: 300px;
+}
+
+.ui-carousel-vertical .ui-carousel-container ul {
+ float:left;
+ width: 100px;
+}
+
+.ui-carousel-vertical .ui-carousel-container ul li {
+ float:left;
+ width:100px;
+ height: 100px;
+ list-style:none;
+ line-height: 100px;
+ font-size: 40px;
+ text-align: center;
+ margin:0;
+ padding:0;
+}
+
.ui-carousel-horizontal .ui-carousel-prev a, .ui-carousel-horizontal .ui-carousel-next a {
color:#6CF;
text-decoration:none;
@@ -54,6 +102,16 @@ h1, h2 {
color:#FFF;
}
+.ui-carousel-horizontal .ui-carousel-prev, .ui-carousel-horizontal .ui-carousel-next,
+.ui-carousel-horizontal .ui-carousel-prev a, .ui-carousel-horizontal .ui-carousel-next a {
+ float:left;
+ width: 20px;
+ height:200px;
+ line-height: 200px;
+ font-size: 20px;
+ text-align:center;
+}
+
.ui-carousel-vertical .ui-carousel-prev a, .ui-carousel-vertical .ui-carousel-next a {
color:#6CF;
text-decoration:none;
@@ -65,4 +123,13 @@ h1, h2 {
color:#FFF;
}
+.ui-carousel-vertical .ui-carousel-prev, .ui-carousel-vertical .ui-carousel-next,
+.ui-carousel-vertical .ui-carousel-prev a, .ui-carousel-vertical .ui-carousel-next a {
+ float:left;
+ height: 20px;
+ width:100px;
+ line-height: 20px;
+ font-size: 20px;
+ text-align:center;
+}
View
6 sample/slider/index.html
@@ -13,8 +13,8 @@
</head>
<body>
- <h1>Prototype Carousel Samples</h1>
- <h2>Horizontal</h2>
+ <h1>Prototype Carousel Examples</h1>
+ <h2>Horizontal with slider</h2>
<div id="hcarousel" class="ui-carousel-horizontal">
<div class="ui-carousel-container">
<ul>
@@ -41,7 +41,7 @@
</div>
</div>
- <h2>Vertical</h2>
+ <h2>Vertical with slider</h2>
<div id="vcarousel" class="ui-carousel-vertical">
<div class="ui-carousel-container">
<ul>
View
46 sample/slider/simple.css
@@ -61,6 +61,29 @@ h1, h2 {
background-position:-96px -15px;
}
+.ui-carousel-horizontal .ui-carousel-container {
+ float: left;
+ width: 600px;
+ height: 200px;
+}
+
+.ui-carousel-horizontal .ui-carousel-container ul {
+ float:left;
+ height: 200px;
+}
+
+.ui-carousel-horizontal .ui-carousel-container ul li {
+ float:left;
+ width:200px;
+ height: 200px;
+ list-style:none;
+ line-height: 200px;
+ font-size: 50px;
+ text-align: center;
+ margin:0;
+ padding:0;
+}
+
/* Verticak carousel */
#vcarousel {
float:left;
@@ -94,3 +117,26 @@ h1, h2 {
.ui-icon-triangle-1-w {
background-position:-96px -15px;
}
+
+.ui-carousel-vertical .ui-carousel-container {
+ float: left;
+ width: 100px;
+ height: 300px;
+}
+
+.ui-carousel-vertical .ui-carousel-container ul {
+ float:left;
+ width: 100px;
+}
+
+.ui-carousel-vertical .ui-carousel-container ul li {
+ float:left;
+ width:100px;
+ height: 100px;
+ list-style:none;
+ line-height: 100px;
+ font-size: 40px;
+ text-align: center;
+ margin:0;
+ padding:0;
+}
View
58 src/carousel.js
@@ -56,6 +56,7 @@ S2.FX.Element.addMethods({
}
_updateScrollButton.call(this);
_createSlider.call(this);
+ _createPaginator.call(this);
}
function isHorizontal() {
@@ -161,6 +162,11 @@ S2.FX.Element.addMethods({
}
};
+ function _createPaginator() {
+ if (this.options.paginator) {
+ this.paginator = new UI.Carousel.Paginator(this.options.paginator, this);
+ }
+ }
// Publish public methods
return {initialize: initialize,
isHorizontal: isHorizontal,
@@ -182,9 +188,57 @@ S2.FX.Element.addMethods({
disableClass: 'ui-state-disabled',
orientation: 'horizontal',
fxOption: {duration: 0.75, transition: S2.FX.Transitions.easeInOutExpo},
- slider: null
+ slider: null,
+ paginator: null
}
});
+
+ UI.Carousel.Paginator = Class.create(UI.Base, (function() {
+ // Constructor
+ function initialize(element, carousel) {
+ this.element = $(element);
+ this.carousel = carousel;
+ var nbPages = Math.ceil(carousel.elements.length / carousel.nbVisibleElements);
+ _createUI.call(this, nbPages);
+
+ this.carousel.getContainer().observe("carousel:position:changed", _update.bind(this));
+ this.ul.observe('click', _scroll.bind(this));
+ }
+
+ function goToPage(page) {
+ this.carousel.goTo(page * this.carousel.nbVisibleElements)
+ }
+
+ // Private methods
+ function _createUI(nbPages) {
+ this.ul = this.element.down('ul') || new Element('ul');
+ for (var i=0; i<nbPages; i++) {
+ this.ul.insert(new Element('li').addClassName('ui-icon ui-icon-bullet').update(i+1));
+ }
+ if (!this.ul.parentNode) {
+ this.element.insert(this.ul);
+ }
+ this.lis = this.ul.select('li')
+ _update.call(this)
+ }
+
+ function _update(event) {
+ this.lis.invoke('removeClassName', 'ui-state-active');
+ this.lis[_currentPage.call(this)].addClassName('ui-state-active')
+ }
+
+ function _currentPage() {
+ return Math.round(this.carousel.getPosition() / this.carousel.nbVisibleElements);
+ }
+
+ function _scroll(event) {
+ var element = event.findElement('li'),
+ page = this.lis.indexOf(element);
+ this.goToPage(page);
+ }
+
+ return {initialize: initialize,
+ goToPage: goToPage}
+ })());
})(S2.UI);
-
View
56 themes/default/ui.carousel.css
@@ -1,76 +1,28 @@
/* Horizontal */
.ui-carousel-horizontal .ui-carousel-container {
- float: left;
- width: 600px;
- height: 200px;
overflow:hidden;
}
.ui-carousel-horizontal .ui-carousel-container ul {
- float:left;
width: 10000000px;
- height: 200px;
margin:0;
padding:0;
}
-.ui-carousel-horizontal .ui-carousel-container ul li {
- float:left;
- width:200px;
- height: 200px;
- list-style:none;
- line-height: 200px;
- font-size: 50px;
- text-align: center;
- margin:0;
- padding:0;
-}
-
-.ui-carousel-horizontal .ui-carousel-prev, .ui-carousel-horizontal .ui-carousel-next,
-.ui-carousel-horizontal .ui-carousel-prev a, .ui-carousel-horizontal .ui-carousel-next a {
- float:left;
- width: 20px;
- height:200px;
- line-height: 200px;
- font-size: 20px;
- text-align:center;
-}
-
/* Vertical */
.ui-carousel-vertical .ui-carousel-container {
- float: left;
- width: 100px;
- height: 300px;
overflow:hidden;
}
.ui-carousel-vertical .ui-carousel-container ul {
- float:left;
height: 10000000px;
- width: 100px;
- margin:0;
- padding:0;
-}
-
-.ui-carousel-vertical .ui-carousel-container ul li {
- float:left;
- width:100px;
- height: 100px;
- list-style:none;
- line-height: 100px;
- font-size: 40px;
- text-align: center;
margin:0;
padding:0;
}
-.ui-carousel-vertical .ui-carousel-prev, .ui-carousel-vertical .ui-carousel-next,
-.ui-carousel-vertical .ui-carousel-prev a, .ui-carousel-vertical .ui-carousel-next a {
- float:left;
- height: 20px;
- width:100px;
- line-height: 20px;
- font-size: 20px;
- text-align:center;
+/* Paginator */
+.ui-carousel-horizontal .ui-carousel-paginate ul li {
+ text-indent: -10000px;
+ cursor:pointer;
}
Please sign in to comment.
Something went wrong with that request. Please try again.