Permalink
Browse files

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

  • Loading branch information...
1 parent a99e337 commit ca4bfeab7a88c300e8008a5a39f34f2177b959c3 @sgruhier committed Apr 19, 2010
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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>
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
-
Oops, something went wrong.

0 comments on commit ca4bfea

Please sign in to comment.