From cc13ef62b17355789768acc0cbcc796dd7779cf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=A5=E7=8B=B8?= Date: Thu, 31 Oct 2013 10:03:07 +0800 Subject: [PATCH 1/5] changes --- 1.1/base.js | 106 +++++++++++++++++++++++++---- 1.1/demo/d2.html | 2 +- 1.1/demo/fullwidth.html | 97 +++++++++++++++++++++++++++ 1.1/demo/index.html | 2 + 1.1/demo/invisibleStop.html | 129 ++++++++++++++++++++++++++++++++++++ 1.1/index.js | 1 + 1.1/slide-util.js | 20 +++++- 7 files changed, 341 insertions(+), 16 deletions(-) create mode 100755 1.1/demo/fullwidth.html create mode 100755 1.1/demo/invisibleStop.html diff --git a/1.1/base.js b/1.1/base.js index 841def8..f056941 100644 --- a/1.1/base.js +++ b/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('
'); 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; + - width /= self.colspan; + 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,11 @@ KISSY.add('gallery/slide/1.1/base',function(S){ height = self.adaptive_height ? self.adaptive_height(): self.animcon.get('region').height; + + self.animwrap.setStyles({ + height:self.pannels.size() * height + 'px' + }); + height /= self.colspan; self.pannels.setStyles({ @@ -705,17 +718,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 +920,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)slideLeft+slideWidth|| + scrollLeft+S.DOM.width(window) self.pannels.size()){ index = self.pannels.size() - self.colspan; } animFn[self.effect](index); - self.currentTab = index; self.hightlightNav(self.getWrappedIndex(index)); // TODO，讨论switch的发生时机 diff --git a/1.1/demo/d2.html b/1.1/demo/d2.html index 17b2a5f..0f0ad2c 100644 --- a/1.1/demo/d2.html +++ b/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'); diff --git a/1.1/demo/fullwidth.html b/1.1/demo/fullwidth.html new file mode 100755 index 0000000..97d79a5 --- /dev/null +++ b/1.1/demo/fullwidth.html @@ -0,0 +1,97 @@ + + + + + +Demo + + + + + + + + +

width 100% 自适应

+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + + diff --git a/1.1/demo/index.html b/1.1/demo/index.html index 1495611..7bf2158 100644 --- a/1.1/demo/index.html +++ b/1.1/demo/index.html @@ -41,6 +41,8 @@

demo

  • 杂项1 杂项
  • 触屏功能Demo 触屏支持
  • Flipsnap Flipsnap用法
    • +
  • 脱离可视区停止播放demo slide脱离可视区，自动停止播放
    • +
  • fullwidth slide宽度自适应
    • diff --git a/1.1/demo/invisibleStop.html b/1.1/demo/invisibleStop.html new file mode 100755 index 0000000..529e765 --- /dev/null +++ b/1.1/demo/invisibleStop.html @@ -0,0 +1,129 @@ + + + + +Demo + + + + + + + + +
    +

    往下拉，slide在下面

    +
    +
    +
    +
    + + + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + + +
      +
    • + 1 +
      • +
    • + 2 +
      • +
    • + 3 +
      • +
    • + 4 +
      • +
    • + 5 +
      • +
    • + 6 +
      • +
    +
    + Example Frame +
    +
    + + + + + diff --git a/1.1/index.js b/1.1/index.js index 3b309bc..2513e6b 100644 --- a/1.1/index.js +++ b/1.1/index.js @@ -30,6 +30,7 @@ KISSY.add('gallery/slide/1.1/index',function(S,BSlide){ * easing: {String} 帧切换的缓动值，默认为'easeBoth'，取值请参照KISSY.Anim * http://docs.kissyui.com/docs/html/api/core/anim/index.html * hoverStop: {boolean} 鼠标悬停在面板上是否停止自动播放，默认为true + * invisibleStop:{boolean} slide面板脱离可视区是否停止自动播放，默认为false * selectedClass:{String} tab选中时的className，默认为't-slide'，目前未实现 * navClass: {String} tab容器的className，默认为'tab-nav' * triggerSelector:{String}tab容器中的触碰元素的选择器，默认为'li' diff --git a/1.1/slide-util.js b/1.1/slide-util.js index 8374521..731346b 100644 --- a/1.1/slide-util.js +++ b/1.1/slide-util.js @@ -101,8 +101,26 @@ KISSY.add('gallery/slide/1.1/slide-util',function(S){ }else{ return false; } + }, + // 检测浏览器是否支持pagevisivility并读取document的hidden值，不同浏览器可能需要前缀，如webkitHidden + getHiddenProp:function(){ + // 如果支持'hidden'就直接返回 + if ('hidden' in document) return 'hidden'; + // 否则检查前缀，看是否有支持属性 + var prefixes = ['webkit','moz','ms','o']; + for (var i = 0; i < prefixes.length; i++){ + if ((prefixes[i] + 'Hidden') in document) + return prefixes[i] + 'Hidden'; + } + // 没有检测到返回null，表示不支持pagevisivility + return null; + }, + // 当前页面是否隐藏 + isHidden:function(){ + var prop = this.getHiddenProp(); + if (!prop) return false; + return document[prop]; } - }); },{ From 6539587c4ba27df4b790a5de216aa38fa9fa7c7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=A5=E7=8B=B8?= Date: Thu, 31 Oct 2013 11:05:40 +0800 Subject: [PATCH 2/5] change --- 1.1/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1.1/index.js b/1.1/index.js index 2513e6b..a0549f1 100644 --- a/1.1/index.js +++ b/1.1/index.js @@ -30,7 +30,7 @@ KISSY.add('gallery/slide/1.1/index',function(S,BSlide){ * easing: {String} 帧切换的缓动值，默认为'easeBoth'，取值请参照KISSY.Anim * http://docs.kissyui.com/docs/html/api/core/anim/index.html * hoverStop: {boolean} 鼠标悬停在面板上是否停止自动播放，默认为true - * invisibleStop:{boolean} slide面板脱离可视区是否停止自动播放，默认为false + * invisibleStop:{boolean} slide面板脱离可视区是否停止自动播放，默认为false。支持由tab页失去焦点，resize，scroll事件导致的slide脱离视野 * selectedClass:{String} tab选中时的className，默认为't-slide'，目前未实现 * navClass: {String} tab容器的className，默认为'tab-nav' * triggerSelector:{String}tab容器中的触碰元素的选择器，默认为'li' From a87867a37d60603a9fe4322b0e0634b819dbe5cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=A5=E7=8B=B8?= Date: Thu, 31 Oct 2013 11:22:09 +0800 Subject: [PATCH 3/5] change --- 1.1/guide/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/1.1/guide/index.md b/1.1/guide/index.md index e9a599f..3c5fdf5 100644 --- a/1.1/guide/index.md +++ b/1.1/guide/index.md @@ -157,6 +157,10 @@ Slide构造器第二个参数用以传入配置项，这些配置项为基础参 鼠标悬停在面板上是否停止自动播放，默认为true +*invisibleStop:{Boolean} + +slide面板脱离可视区是否停止自动播放，默认为false。支持由tab页失去焦点，resize，scroll事件导致的slide脱离视野 + *selectedClass* (String) 导航选中时的className，默认为'selected' From 74036d39862ad71454223125f6a8cc4657a62b55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=A5=E7=8B=B8?= Date: Thu, 31 Oct 2013 11:37:50 +0800 Subject: [PATCH 4/5] change --- 1.1/guide/index.md | 2 +- 1.1/index.js | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/1.1/guide/index.md b/1.1/guide/index.md index 3c5fdf5..9e693b1 100644 --- a/1.1/guide/index.md +++ b/1.1/guide/index.md @@ -157,7 +157,7 @@ Slide构造器第二个参数用以传入配置项，这些配置项为基础参 鼠标悬停在面板上是否停止自动播放，默认为true -*invisibleStop:{Boolean} +*invisibleStop* (Boolean) slide面板脱离可视区是否停止自动播放，默认为false。支持由tab页失去焦点，resize，scroll事件导致的slide脱离视野 diff --git a/1.1/index.js b/1.1/index.js index a0549f1..c2b47ef 100644 --- a/1.1/index.js +++ b/1.1/index.js @@ -16,7 +16,7 @@ KISSY.add('gallery/slide/1.1/index',function(S,BSlide){ * Demo: 配host，访问：http://a.tbcdn.cn/apps/ks/zoo/slide/demo/tab.html * * @param 参数列表 - * autoSlide : {boolean} 是否自动播放，默认为false + * autoSlide : {Boolean} 是否自动播放，默认为false * speed: {float} 帧切换的速度，默认为500(ms) * timeout: {Number} 帧切换的时间间隔，默认为1000(ms) * effect: {String} 帧切换类型，默认为'none',取值： * none:无特效 @@ -29,8 +29,8 @@ KISSY.add('gallery/slide/1.1/index',function(S,BSlide){ * mouseenter:鼠标进入 * easing: {String} 帧切换的缓动值，默认为'easeBoth'，取值请参照KISSY.Anim * http://docs.kissyui.com/docs/html/api/core/anim/index.html - * hoverStop: {boolean} 鼠标悬停在面板上是否停止自动播放，默认为true - * invisibleStop:{boolean} slide面板脱离可视区是否停止自动播放，默认为false。支持由tab页失去焦点，resize，scroll事件导致的slide脱离视野 + * hoverStop: {Boolean} 鼠标悬停在面板上是否停止自动播放，默认为true + * invisibleStop:{Boolean} slide面板脱离可视区是否停止自动播放，默认为false。支持由tab页失去焦点，resize，scroll事件导致的slide脱离视野 * selectedClass:{String} tab选中时的className，默认为't-slide'，目前未实现 * navClass: {String} tab容器的className，默认为'tab-nav' * triggerSelector:{String}tab容器中的触碰元素的选择器，默认为'li' @@ -39,13 +39,13 @@ KISSY.add('gallery/slide/1.1/index',function(S,BSlide){ * id: {String} hook，直接写id，比如"J_id"(正确)，"#J_id"(错误) * carousel: {Boolean} 是否以跑马灯形式播放，默认为false * touchmove: {Boolean} 是否支持手指滑动切换，默认为false - * adaptive_fixed_width:{boolean} 屏幕是否根据控件的宽度改变重新渲染尺寸，默认为false，主要在组件定宽高的场景中，保证resize时tab-pannel尺寸正确 - * adaptive_fixed_height:{boolean} 屏幕是否根据控件的高度改变重新渲染尺寸，默认为false,主要在组件定宽高的场景中，保证resize时tab-pannel尺寸正确 - * adaptive_fixed_size:{boolean} 屏幕是否根据控件的宽度和高度改变重新渲染尺寸，默认为false,主要在组件定宽高的场景中，保证resize时tab-pannel尺寸正确 + * adaptive_fixed_width:{Boolean} 屏幕是否根据控件的宽度改变重新渲染尺寸，默认为false，主要在组件定宽高的场景中，保证resize时tab-pannel尺寸正确 + * adaptive_fixed_height:{Boolean} 屏幕是否根据控件的高度改变重新渲染尺寸，默认为false,主要在组件定宽高的场景中，保证resize时tab-pannel尺寸正确 + * adaptive_fixed_size:{Boolean} 屏幕是否根据控件的宽度和高度改变重新渲染尺寸，默认为false,主要在组件定宽高的场景中，保证resize时tab-pannel尺寸正确 * defaultTab: {Number} 默认定位在某个帧，默认为0，即第一帧 * layerSlide: {Boolean} 是否开启分层动画，默认为false * layerClass: {String} subLayer的className，未实现，默认用alt="sublayer"来标识 - * reverse: {boolean} "播放下一个"和"播放上一个"对调，默认为false + * reverse: {Boolean} "播放下一个"和"播放上一个"对调，默认为false * adaptive_height:{function},同下 * adaptive_width:{function}，如果是百分比设置容器的宽度的话，需要指定这个函数，返回一个宽度值，动态的得到可变化的宽度,默认为false，代码示例: * From e5ac4ad44f4665897f01f25940ae915d5ace6286 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=A5=E7=8B=B8?= Date: Thu, 31 Oct 2013 11:47:03 +0800 Subject: [PATCH 5/5] change --- 1.1/base.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/1.1/base.js b/1.1/base.js index f056941..1d47e13 100644 --- a/1.1/base.js +++ b/1.1/base.js @@ -538,7 +538,7 @@ KISSY.add('gallery/slide/1.1/base',function(S){ self.animcon.get('region').width; height = self.pannels.item(index).get('region').height; - + // 修复resize时animwrap尺寸计算有误 self.animwrap.setStyles({ width:self.pannels.size() * width + 'px' }); @@ -571,7 +571,8 @@ 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' }); @@ -718,7 +719,7 @@ KISSY.add('gallery/slide/1.1/base',function(S){ if(self.hoverStop){ self.con._delegate('mouseover',function(e){ //e.halt(); - self.isMouseover = true; + self.isMouseover = true; // 增加对鼠标状态的标识 if(self.autoSlide)self.stop(); },'.'+self.contentClass+' .'+self.pannelClass); self.con._delegate('mouseout',function(e){