gallery-2011.11.10-16-24 sumana gallery-carousel-circular

skotos · Nov 10, 2011 · 927866b · 927866b
1 parent 4038225
commit 927866b
Show file tree

Hide file tree

Showing 5 changed files with 304 additions and 0 deletions.
diff --git a/src/gallery-carousel-circular/build.properties b/src/gallery-carousel-circular/build.properties
@@ -0,0 +1,21 @@
+# Circular Carousel Build Properties
+
+# As long as the 'builder' project is cloned to the default folder
+# next to the 'yui3-gallery' project folder, the 'builddir' property does not 
+# need to be changed
+#
+# If the 'builder' project is checked out to an alternate location, this
+# property should be updated to point to the checkout location.
+builddir=../../../builder/componentbuild
+
+# The name of the component. E.g. event, attribute, widget 
+component=gallery-carousel-circular
+
+# The list of files which should be concatenated to create the component.
+# NOTE: For a css component (e.g. cssfonts, cssgrids etc.) use component.cssfiles instead. 
+component.jsfiles=gallery-carousel-circular.js
+
+component.cssfiles=gallery-carousel-circular.css 
+# The list of modules this component requires. Used to set up the Y.add module call for YUI 3.
+component.requires=node, event
+
diff --git a/src/gallery-carousel-circular/build.xml b/src/gallery-carousel-circular/build.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- YUI 3 Gallery Component Build File -->
+<project name="Circular Carousel" default="local">
+    <description>Circular Carousel Build File</description>
+    <property file="build.properties" />
+    <import file="${builddir}/3.x/bootstrap.xml" description="Default Build Properties and Targets" />
+</project>
diff --git a/src/gallery-carousel-circular/css/gallery-carousel-circular.css b/src/gallery-carousel-circular/css/gallery-carousel-circular.css
@@ -0,0 +1,48 @@
+
+.yui3-circular-carousel{
+    -webkit-perspective: 500px;
+}
+
+.yui3-circular-carousel-item {
+      position: absolute;
+      height: 200px;
+      width: 200px;
+      border: 1px solid black;
+      -webkit-border-radius: 12px;
+      -webkit-box-sizing: border-box;
+      text-align: center;
+      font-family: Times, serif;
+      font-size: 124pt;
+      color: black;
+      background-color: rgba(148,116,172, 0.6);
+      -webkit-transition: -webkit-transform 2s, opacity 2s;
+      -webkit-backface-visibility: hidden;
+      position: absolute;		   
+      -webkit-transition: 0.3s ease;
+      -webkit-transform: rotate(0) scale(0.9) translateX(100%);
+      z-index: 0;
+      width: 200px;
+      overflow: visible;
+      opacity: 0;
+}
+
+.yui3-circular-carousel  .yui3-circular-carousel-selected{
+    opacity: 1;
+   -webkit-transform: rotate(0) scale(1) translateX(54%);
+    z-index: 99;
+}
+
+.yui3-circular-carousel .yui3-circular-carousel-left,
+.yui3-circular-carousel .yui3-circular-carousel-right {
+    opacity: 0.4;
+    z-index: 88;
+}
+
+.yui3-circular-carousel .yui3-circular-carousel-left {
+    -webkit-transform: rotate(0) scale(0.9) translateX(0%);
+}
+
+.yui3-circular-carousel .yui3-circular-carousel-right {
+    -webkit-transform: rotate(0) scale(0.9) translateX(134%);
+}
+
diff --git a/src/gallery-carousel-circular/examples/carousel-circular.html b/src/gallery-carousel-circular/examples/carousel-circular.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Circular Carousel</title>
+
+<style type="text/css">
+
+.title {
+    margin-bottom: 10px;
+    font-weight:bold;
+    font-size:20px;
+}
+#carousel {
+      width: 100%;
+      height: 700px;
+      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
+      -webkit-perspective-origin: 50% 225px;
+      position: relative;
+      left:50px;
+      top:100px;
+      height: 200px;
+      width: 200px;
+      -webkit-transform-style: preserve-3d;
+}
+.prev,
+.next{
+   background: url(http://l.yimg.com/us.yimg.com/i/us/ls/gr/t/1303150075/media_sprite_low_res.png) no-repeat;
+   display: block;
+   height: 40px;
+   position: absolute;
+   top: 215px;
+   width: 40px;
+   z-index: 100;
+   text-indent:-9999px;
+}
+.prev{
+   background-position: 10px -62px;
+   left: 0px;
+}
+.next{
+   background-position: 22px 0px;
+   left: 489px;
+}
+</style>
+
+<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">
+<link rel="stylesheet" type="text/css" href="../../../../yui3-gallery/build/gallery-carousel-circular/gallery-carousel-circular.css">
+<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0pr3/build/yui/yui.js"></script>
+
+</head>
+
+<body class="yui3-skin-sam  yui-skin-sam">
+
+
+
+<div class="playground">
+<h1 class='title'>YUI3 Gallery Circular Carousel example: Constructing by providing markup</h1>
+<span class='prev'>Prev</span>
+ <ul id='carousel'>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+        <li>8</li>
+        <li>9</li>
+        <li>10</li>
+        <li>11</li>
+        <li>12</li>
+ </ul>
+<span class='next'>Next</span>
+</div>
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+
+<script type="text/javascript">
+    YUI({ 
+        modules: {
+             "gallery-carousel-circular": {
+                fullpath : "../../../../yui3-gallery/build/gallery-carousel-circular/gallery-carousel-circular.js",
+                requires : ["substitute", "widget", "widget-child", "widget-parent"]
+            }
+        },
+        filter:"raw",
+        combine : false
+     }).use("gallery-carousel-circular", function (Y) {
+
+    var carousel = new Y.CircularCarousel({
+                   srcNode: '#carousel',
+                   contentBox: '#carousel',
+                   boundingBox : '#carousel',
+                   type : 'CircularCarousel'
+    });
+        carousel.render();
+
+    Y.one('.prev').on('click', function(){
+       Y.fire('carousel:goPrev');
+    });
+    Y.one('.next').on('click', function(){
+       Y.fire('carousel:goNext');
+    });
+});
+
+</script>
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+
+<!--MyBlogLog instrumentation-->
+</body>
+</html>
+
diff --git a/src/gallery-carousel-circular/js/gallery-carousel-circular.js b/src/gallery-carousel-circular/js/gallery-carousel-circular.js
@@ -0,0 +1,114 @@
+	var getClassName = Y.ClassNameManager.getClassName,
+	    CHILDREN = 'children',
+	    CIRCULAR_CAROUSEL = 'circular-carousel',
+	    FIRST_CHILD = 'first-child',
+	    LAST_CHILD = 'last-child',
+	    _classNames = {
+		circularCarousel: getClassName(CIRCULAR_CAROUSEL),
+		circularCarouselItem : getClassName(CIRCULAR_CAROUSEL, 'item'),
+		end: getClassName(CIRCULAR_CAROUSEL, 'end'),
+		left: getClassName(CIRCULAR_CAROUSEL, 'left'),
+		right: getClassName(CIRCULAR_CAROUSEL, 'right'),
+		selectedCarouselItem: getClassName(CIRCULAR_CAROUSEL, 'selected'),
+		start: getClassName(CIRCULAR_CAROUSEL, 'start')
+	    };
+
+	Y.CircularCarousel = Y.Base.create("circularcarousel", Y.Widget, [Y.WidgetParent], {
+
+		initializer : function(){
+		    this.list = this.get('srcNode');
+		},
+
+		_initScroll : function(){
+		    var currentNode,list;
+
+		    list = this.list;
+		    this.currentNode = list.one('.' + _classNames.selectedCarouselItem);
+		    this.firstNode = list.one('.' + _classNames.start);
+		    this.lastNode = list.one('.' + _classNames.end);
+
+		    currentNode = this.currentNode;
+		    this.rightNode = currentNode.next();
+		    this.leftNode = currentNode.previous();
+		    if(!this.rightNode){
+			this.rightNode = this.firstNode;
+		    }
+
+		    if(!this.leftNode){
+			this.leftNode = this.lastNode;
+		    }
+
+		    this.rightNode.addClass(_classNames.right);
+		    this.leftNode.addClass(_classNames.left);
+
+		},
+
+		renderUI: function () {
+		    var srcNode = this.list;
+                    srcNode.addClass( _classNames.circularCarousel);
+                    srcNode.one(':'+ FIRST_CHILD).addClass(_classNames.start);
+                    srcNode.one(':'+ FIRST_CHILD).addClass(_classNames.selectedCarouselItem);
+                    srcNode.one(':'+ LAST_CHILD).addClass(_classNames.end);
+                    srcNode.get(CHILDREN).addClass(_classNames.circularCarouselItem);
+
+		    this._initScroll();
+		},
+
+		bindUI : function(){
+		    Y.on('carousel:goPrev', this._goPrev, this);
+		    Y.on('carousel:goNext', this._goNext, this);
+		},
+
+		syncUI : function(){
+
+		},
+
+		_goPrev: function(){
+		    var leftNode = this.leftNode,
+		    futureLeft = leftNode.previous();
+
+		    this.currentNode.replaceClass(_classNames.selectedCarouselItem,_classNames.right);
+		    this.rightNode.removeClass(_classNames.right);
+		    this.rightNode = this.currentNode;
+		    leftNode.replaceClass(_classNames.left, _classNames.selectedCarouselItem);
+		    this.currentNode = leftNode;
+		    if(!futureLeft){
+			futureLeft = this.lastNode;
+		    }
+
+		    futureLeft.addClass(_classNames.left);
+		    this.leftNode = futureLeft;
+		},
+
+		_goNext : function(){
+		    var rightNode = this.rightNode,
+		    futureRight = rightNode.next();
+
+		    this.currentNode.replaceClass(_classNames.selectedCarouselItem,_classNames.left);
+		    this.leftNode.removeClass(_classNames.left);
+		    this.leftNode = this.currentNode;
+		    rightNode.replaceClass(_classNames.right,_classNames.selectedCarouselItem);
+		    this.currentNode = rightNode;
+		    if(!futureRight){
+			futureRight = this.firstNode;
+		    }
+
+		    futureRight.addClass(_classNames.right);
+		    this.rightNode = futureRight;
+
+		}
+
+	    }, {
+		NAME: "circularcarousel",
+		ATTRS : {
+		    label : {
+			validator: Y.Lang.isString
+		    },
+		    tabIndex: {
+			value: -1
+		    }
+		}
+
+	    });
+
+