gallery-2012.03.23-18-00 sumana gallery-carousel-circular

ericf · Mar 23, 2012 · 6fabda3 · 6fabda3
1 parent e5672f4
commit 6fabda3
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 19 deletions.
diff --git a/src/gallery-carousel-circular/assets/gallery-carousel-circular.css b/src/gallery-carousel-circular/assets/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/build.properties b/src/gallery-carousel-circular/build.properties
@@ -13,9 +13,10 @@ 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.cssfiles=gallery-carousel-circular.css 
+
 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/examples/carousel-circular.html b/src/gallery-carousel-circular/examples/carousel-circular.html
@@ -45,14 +45,12 @@
 </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">
+<link rel="stylesheet" type="text/css" href="../../../../yui3-gallery/build/gallery-carousel-circular/assets/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>
@@ -70,6 +68,8 @@ <h1 class='title'>YUI3 Gallery Circular Carousel example: Constructing by provid
         <li>10</li>
         <li>11</li>
         <li>12</li>
+        <li>13</li>
+        <li>14</li>
  </ul>
 <span class='next'>Next</span>
 </div>
@@ -81,26 +81,26 @@ <h1 class='title'>YUI3 Gallery Circular Carousel example: Constructing by provid
         modules: {
              "gallery-carousel-circular": {
                 fullpath : "../../../../yui3-gallery/build/gallery-carousel-circular/gallery-carousel-circular.js",
-                requires : ["substitute", "widget", "widget-child", "widget-parent"]
+                requires : ["substitute", "widget", "widget-parent","node-base", "node-event-delegate", "transition", "event-move"]
             }
         },
-        filter:"raw",
-        combine : false
      }).use("gallery-carousel-circular", function (Y) {
-
     var carousel = new Y.CircularCarousel({
                    srcNode: '#carousel',
                    contentBox: '#carousel',
                    boundingBox : '#carousel',
-                   type : 'CircularCarousel'
+                   type : 'CircularCarousel',
+                   totalNodes : '14',
+                   numNodesToDisplay : '3'
+
     });
         carousel.render();
 
     Y.one('.prev').on('click', function(){
-       Y.fire('carousel:goPrev');
+       carousel.fire('goPrev');
     });
     Y.one('.next').on('click', function(){
-       Y.fire('carousel:goNext');
+       carousel.fire('goNext');
     });
 });
 

diff --git a/src/gallery-carousel-circular/js/gallery-carousel-circular.js b/src/gallery-carousel-circular/js/gallery-carousel-circular.js
@@ -3,6 +3,7 @@
 	    CIRCULAR_CAROUSEL = 'circular-carousel',
 	    FIRST_CHILD = 'first-child',
 	    LAST_CHILD = 'last-child',
+	    MIN_SWIPE = 10,
 	    _classNames = {
 		circularCarousel: getClassName(CIRCULAR_CAROUSEL),
 		circularCarouselItem : getClassName(CIRCULAR_CAROUSEL, 'item'),
@@ -17,16 +18,29 @@
 
 		initializer : function(){
 		    this.list = this.get('srcNode');
+		    this.listNodes = this.list.all('li');
+		    this.totalNodes = this.get('totalNodes');
+		    this.numNodesToDisplay = this.get('numNodesToDisplay');
+		    this.publish("goPrev", {defaultFn: this._goPrev}, this);
+		    this.publish("goNext", {defaultFn: this._goNext}, this);
 		},
 
 		_initScroll : function(){
-		    var currentNode,list;
+		    var currentNode,list, i, arr=[];
 
 		    list = this.list;
 		    this.currentNode = list.one('.' + _classNames.selectedCarouselItem);
 		    this.firstNode = list.one('.' + _classNames.start);
 		    this.lastNode = list.one('.' + _classNames.end);
 
+		    i=0;
+		    if(typeof this.prevCount === 'undefined'){
+			this.prevCount = this.totalNodes - this.numNodesToDisplay + 1;
+                    }
+
+		    if(!this.nextCount){
+			this.nextCount = this.numNodesToDisplay - 1;
+		    }
 		    currentNode = this.currentNode;
 		    this.rightNode = currentNode.next();
 		    this.leftNode = currentNode.previous();
@@ -41,6 +55,19 @@
 		    this.rightNode.addClass(_classNames.right);
 		    this.leftNode.addClass(_classNames.left);
 
+		    Y.each(this.listNodes, function(node){
+			    arr[i] = node;
+			    if(!node.hasClass('yui3-circular-carousel-selected') && 
+			       !node.hasClass('yui3-circular-carousel-right') &&
+			       !node.hasClass('yui3-circular-carousel-left') &&
+			       !node.hasClass('yui3-circular-carousel-start') &&
+			       !node.hasClass('yui3-circular-carousel-end')
+			       ){
+				node.remove();
+			    }
+			    i++;
+			});
+		    this.arr = arr;
 		},
 
 		renderUI: function () {
@@ -50,25 +77,78 @@
                     srcNode.one(':'+ FIRST_CHILD).addClass(_classNames.selectedCarouselItem);
                     srcNode.one(':'+ LAST_CHILD).addClass(_classNames.end);
                     srcNode.get(CHILDREN).addClass(_classNames.circularCarouselItem);
-
+		    if(srcNode){
 		    this._initScroll();
+		    }
 		},
 
 		bindUI : function(){
-		    Y.on('carousel:goPrev', this._goPrev, this);
-		    Y.on('carousel:goNext', this._goNext, this);
+		    //		    Y.on('carousel:goPrev', this._goPrev, this);
+		    //		    Y.on('carousel:goNext', this._goNext, this);
+
+
+
+		    this.list.on('gesturemovestart', Y.bind(this._detectSwipe, this));
+		    Y.on('swipedLeft', this._goPrev, this);
+		    Y.on('swipedRight', this._goNext, this);
 		},
 
 		syncUI : function(){
 
 		},
 
+		_detectSwipe : function(e){
+		    Y.log('detectSwipe');
+		    var item = e.currentTarget,
+		    swipeStart,
+		    swipeEnd,
+		    isSwipeLeft, 
+		    isSwipeRight;
+
+		    item.setData("swipeStart", e.pageX);
+		    item.once("gesturemoveend", function(e) {
+			    swipeStart = item.getData("swipeStart");
+			    swipeEnd = e.pageX;
+			    isSwipeLeft = (swipeStart - swipeEnd) > MIN_SWIPE;
+			    isSwipeRight = (swipeEnd - swipeStart) > MIN_SWIPE;
+
+			    if (isSwipeLeft) {
+				Y.log('swiped Right');
+				Y.fire('swipedRight');
+			    }else if(isSwipeRight){
+				Y.log('swiped left');
+				Y.fire('swipedLeft');
+			    }
+
+			});
+		},
 		_goPrev: function(){
-		    var leftNode = this.leftNode,
-		    futureLeft = leftNode.previous();
+		    Y.log('calling goPrev');
+		    var leftNode, futureLeft;
+		    if (this.prevCount < 0){
+			this.prevCount = this.totalNodes - 1;
+		    }else if(this.prevCount > (this.totalNodes-1)){
+		        this.prevCount = 0;
+		    }
+		    Y.log('this.prevCount:'+this.prevCount);
+		    Y.log('this.nextCount:'+this.nextCount);
+		    leftNode = this.leftNode;
+
+		    futureLeft = this.arr[this.prevCount];
 
+		    this.list.prepend(futureLeft);
+
 		    this.currentNode.replaceClass(_classNames.selectedCarouselItem,_classNames.right);
 		    this.rightNode.removeClass(_classNames.right);
+
+		    this.prevCount--;
+		    this.nextCount--;
+		    if(this.nextCount < 0){
+			this.nextCount = this.totalNodes - 1;
+		    }
+
+		    this.rightNode.remove();
+
 		    this.rightNode = this.currentNode;
 		    leftNode.replaceClass(_classNames.left, _classNames.selectedCarouselItem);
 		    this.currentNode = leftNode;
@@ -81,21 +161,40 @@
 		},
 
 		_goNext : function(){
-		    var rightNode = this.rightNode,
-		    futureRight = rightNode.next();
+		    Y.log('calling goNext');
+		    var rightNode, futureRight;
+		    Y.log('this.prevCount:'+this.prevCount);
+		    Y.log('this.nextCount:'+this.nextCount);
+		    if(this.nextCount == this.totalNodes){
+			this.nextCount = 0;
+		    }else if( this.nextCount < 0){
+			this.nextCount = this.totalNodes - 1;
+		    }
+		    rightNode = this.rightNode;
+		    futureRight = this.arr[this.nextCount];
+		    this.list.append(futureRight);
 
 		    this.currentNode.replaceClass(_classNames.selectedCarouselItem,_classNames.left);
 		    this.leftNode.removeClass(_classNames.left);
+
+		    this.nextCount++;
+		    this.prevCount++;
+		    if(this.prevCount > this.totalNodes - 1){
+			this.prevCount = 0;
+		    }
+		    this.leftNode.remove(); //added
 		    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;
 
+
 		}
 
 	    }, {
@@ -106,6 +205,12 @@
 		    },
 		    tabIndex: {
 			value: -1
+		    },
+		    totalNodes : {
+			value: 20
+		    },
+		    numNodesToDisplay : {
+			value : 13
 		    }
 		}