增加slide脱离视野（visibilitychange,scroll,resize引发）停止播放功能

1.1/base.js

@@ -38,7 +38,6 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 
 		// 构造函数
 		init:function(selector,config){
-
 			var self = this;
 
 			if(S.isObject(selector)){
@@ -278,7 +277,6 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 		// 如果是动画效果，则构建Wrap
 		buildWrap: function(){
 			var self = this;
-
 			self.animwrap = S.Node.create('<div style="position:absolute;"></div>');
 			self.animwrap.set('innerHTML', self.animcon.get('innerHTML'));
 			self.animcon.set('innerHTML', '');
@@ -361,7 +359,6 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 					});
 				}
 			};
-
 			effectInitFn[self.effect]();
 
 			return this;
@@ -403,7 +400,12 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 			self.hightlightNav(self.getWrappedIndex(self.currentTab));
             //是否自动播放
             if (self.autoSlide === true) {
-                self.play();
+				// 如果设置了invisibleStop为true，还要多判断一下slide是否在可视区
+				// 未设置invisibleStop为true，则直接自动播放
+				if((self.invisibleStop && self.isSlideVisible())||
+					!self.invisibleStop){
+					self.play();
+				}
             }
             return this;
         },
@@ -535,15 +537,21 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 										self.adaptive_width():
 										self.animcon.get('region').width;
 				height = self.pannels.item(index).get('region').height;
+
+				// 修复resize时animwrap尺寸计算有误
+				self.animwrap.setStyles({
+					width:self.pannels.size() * width + 'px'
+				});
 
 				width /= self.colspan;
-
+				
 				// pannels的高度是不定的，高度是根据内容
 				// 来撑开的因此不能设置高度，而宽度则需要设置
 				self.pannels.setStyles({
 					width:width+'px',
 					display:'block'
 				});
+
 
 				self.animcon.setStyles({
 					width:width * self.colspan +'px',
@@ -563,6 +571,12 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 				height = self.adaptive_height ? 
 										self.adaptive_height():
 										self.animcon.get('region').height;
+
+				// 修复resize时animwrap尺寸计算有误
+				self.animwrap.setStyles({
+					height:self.pannels.size() * height + 'px'
+				});
+
 				height /= self.colspan;
 
 				self.pannels.setStyles({
@@ -705,17 +719,19 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 			if(self.hoverStop){
 				self.con._delegate('mouseover',function(e){
 					//e.halt();
+					self.isMouseover = true;		// 增加对鼠标状态的标识
 					if(self.autoSlide)self.stop();
 				},'.'+self.contentClass+' .'+self.pannelClass);
 				self.con._delegate('mouseout',function(e){
 					//e.halt();
+					self.isMouseover = false;
 					if(self.autoSlide)self.play();
 				},'.'+self.contentClass+' .'+self.pannelClass);
 			}
 
 			// 绑定窗口resize事件 
 			try {
-				S.Event.on('resize',function(e){
+				S.Event.on(window,'resize',function(e){
 					self.fixSlideSize(self.currentTab);
 					self.relocateCurrentTab();
 				},window);
@@ -905,11 +921,75 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 				}
 
 			}
+
+			// slide离开视野，是否暂停滚动
+			if(self.invisibleStop){
+				// 检测是否支持pagevisivility，脱离视野，暂停播放
+				var visProp = S.getHiddenProp();
+				if(visProp){
+					// 拼装visibilitychange事件名，并监听
+					var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange',autoPlayPageVisible;
+					S.Event.on(document,evtname,function(e){
+						// 如果页面离开视野，暂停播放
+						if(S.isHidden()){
+							if(self.timer){
+								autoPlayPageVisible = true;
+								self.stop();
+								//console.info('触发事件:'+e.type+'   '+'播放状态：stop');
+							}else{
+								autoPlayPageVisible = false;
+							}
+						}else{
+							// 页面可见 && slide在视野内 && 停止播放前slide播放状态是‘正在播放’ 满足这三个条件继续播放
+							if(self.isSlideVisible()&&autoPlayPageVisible){
+								self.play();
+								//console.info('触发事件:'+e.type+'   '+'播放状态：play');
+							}
+						}
+					});
+				}
+				// 监听onscoll,resize事件，通过坐标判断slide是否脱离可视区
+				S.Event.on(window,'scroll resize',function(e){
+					// 边界判断
+					if(self.isSlideVisible()){
+						// 防止与鼠标悬停slide停止播放的设置相冲突，if里要检测鼠标是否在slide上
+						// bug场景：鼠标悬浮在slide上，滚动页面，触发play，与hoverStop设置冲突
+						if(!self.timer&&
+							(!self.hoverStop||(self.hoverStop&&!self.isMouseover))){
+							self.play();
+							//console.info('触发事件:'+e.type+'   '+'播放状态：play');
+						}
+					}else{
+						if(self.timer){
+							self.stop();
+							//console.info('触发事件:'+e.type+'   '+'播放状态：stop');
+						}
+					}
+
+				});
+			}
 
 			return this;
-
 		},
-
+		// 判断slide是否在可视区内
+		isSlideVisible:function(){
+			var self = this,
+				slideLeft = self.animcon.offset().left,
+				slideTop = self.animcon.offset().top,
+				slideWidth = self.animcon.outerWidth(),
+				slideHeight = self.animcon.outerHeight(),
+				scrollTop = S.DOM.scrollTop(),
+				scrollLeft = S.DOM.scrollLeft();	
+			if(scrollTop>slideTop+slideHeight||
+				scrollTop+S.DOM.height(window)<slideTop||
+				scrollLeft>slideLeft+slideWidth||
+				scrollLeft+S.DOM.width(window)<slideLeft){
+				return false;
+			}else{
+				return true;
+			}
+		},
+
 		// 初始化所有的SubLayer
 		// TODO 从BSlide中抽离出来
 
@@ -1280,6 +1360,7 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 				eventType:		'click',
 				easing:			'easeBoth',
 				hoverStop:		true,
+				invisibleStop:	false,
 				selectedClass:	'selected',
 				conClass:		't-slide',
 				navClass:		'tab-nav',
@@ -1455,7 +1536,6 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 		// 修正跑马灯结尾的滚动位置
 		fix_next_carousel:function(){
 			var self = this;
-
 			self.currentTab = self.colspan;
 			var con = self.con;
 			if(self.effect != 'none'){
@@ -1532,7 +1612,7 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 		//切换至index,这里的index为真实的索引
 		switch_to:function(index,callback){
 			var self = this;
-
+			
 			// 切换是否强制取消动画
 			if(callback === false){
 				var doeffect = false;
@@ -1558,7 +1638,7 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 				navnode: self.tabs.item(self.getWrappedIndex(self.currentTab)),
 				pannelnode: self.pannels.item(self.currentTab)
 			});
-
+			
 			self.fixSlideSize(index);
 			if(self.autoSlide){
 				self.stop().play();
@@ -1642,14 +1722,15 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 
 				},
 				'hSlide':function(index){
-
+					
 					if(self.transitions){
 
 						self.animwrap.setStyles({
 							'-webkit-transition-duration': (doeffect ? self.speed : '0') + 's',
 							'-webkit-transform':'translate3d('+(-1 * index * self.animcon.get('region').width / self.colspan)+'px,0,0)',
 							'-webkit-backface-visibility':'hidden'
 						});
+
 						if(doeffect){
 							self.anim = S.Anim(self.animwrap,{
 								opacity:1
@@ -1729,12 +1810,10 @@ KISSY.add('gallery/slide/1.1/base',function(S){
 				if(goon !== false){
 					//发生go的时候首先判断是否需要整理空间的长宽尺寸
 					//self.renderSize(index);
-
 					if(index + self.colspan > self.pannels.size()){
 						index = self.pannels.size() - self.colspan;
 					}
 					animFn[self.effect](index);
-
 					self.currentTab = index;
 					self.hightlightNav(self.getWrappedIndex(index));
 					// TODO，讨论switch的发生时机

1.1/demo/d2.html

@@ -75,7 +75,7 @@
 		selectedClass:'current',
 		triggerSelector:'a',
 		effect:'fade',
-		autoPlay:true
+		autoSlide:true
 
 	});
 	var ctl = S.one('#JSlide-ctrl');

1.1/demo/fullwidth.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
+<title>Demo</title>
+<script type="text/javascript" src="http://a.tbcdn.cn/??s/kissy/1.3.0/seed-min.js" data-config="{combine:true}"></script>
+<link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base.css" />
+<link rel="stylesheet" href="http://jayli.github.com/gallery/yuislide/assets/global.css" />
+<style>
+body {
+	background:white;
+}
+
+#example {
+	margin-left:auto;
+	margin-right:auto;
+	width:100%;
+}
+.tab-content {
+	height:200px;
+}
+.tab-pannel {
+	height:200px;
+}
+#slides{
+	left:0;
+	width:100%;
+}
+.slides_container{
+	width:100%;
+}
+.tab-pannel{
+	width:100%;
+}
+</style>
+
+
+</head>
+<body>
+<h1>width 100% 自适应</h1>
+<div id="example">
+	<div id="slides"><!--Slide控件开始-->
+		<div class="slides_container tab-content">
+			<div class="tab-pannel" style="background:red">
+			</div>
+			<div class="tab-pannel" style="background:green">
+			</div>
+			<div class="tab-pannel" style="background:blue">
+			</div>
+			<!--div class="tab-pannel" style="background:yellow">
+			</div>
+			<div class="tab-pannel" style="background:orange">
+			</div>
+			<div class="tab-pannel" style="background:gray">
+			</div-->
+		</div>
+	</div><!--Slide控件结束-->
+</div>
+
+<script>
+    var S = KISSY;
+	var srcPath = "../../../";
+	S.config({
+		packages:[
+			{
+				name:"gallery",
+				path:srcPath,
+				charset:"utf-8",
+				combine:false,
+				tag:S.now(),
+				ignorePackageNameInUri:true,
+				debug:true
+			}
+		]
+	});
+
+KISSY.use('gallery/slide/1.1/index',function(S,Slide){
+	var C = new Slide('slides',{
+		autoSlide:true,
+		effect:'hSlide',
+		timeout:3000,
+		speed:700,
+		eventType:'mouseover',
+		triggerDelay:400,
+		selectedClass:'current',
+		carousel:true,
+		//adaptive_fixed_width:true,
+		adaptive_width:function(){
+			return S.DOM.width(window);
+		}
+	});
+
+});</script>
+
+</body>
+</html>

1.1/demo/index.html

@@ -41,6 +41,8 @@ <h2>demo</h2>
 		<li><a href="d8.html?ks-debug">杂项1</a> 杂项</li>
 		<li><a href="touch.html?ks-debug">触屏功能Demo</a> 触屏支持</li>
 		<li><a href="flipsnap.html?ks-debug">Flipsnap</a> Flipsnap用法</li>
+		<li><a href="invisibleStop.html?ks-debug">脱离可视区停止播放demo</a> slide脱离可视区，自动停止播放</li>
+		<li><a href="fullwidth.html?ks-debug">fullwidth</a> slide宽度自适应</li>
 	</ul>
 	</ul>