The switchable from aralejs

Carousel组件不支持配置prevButtonClass和nextButtonClass

Carousel组件的配置写明可以配置prevButtonClass和nextButtonClass，但是其实不支持
`
//Carousel组件的attrs：
module.exports = Switchable.extend({

    attrs: {
        circular: true,

        prevBtn: {
            getter: function(val) {
                return $(val).eq(0);
            }
        },

        nextBtn: {
            getter: function(val) {
                return $(val).eq(0);
            }
        },

        _isNext: false
    },

`

Carousel 部分有个缺陷

Carousel的demo，在第一屏单击“上一页”时，出现滚动了一个空白屏的问题（demo中为向右滚动）

circular设置true/false后autoplay播放效果都一样

如题，现在circular设置true和false，自动播放的时候最后一屏回到第一屏的动画是反方向过度的，没有无缝无限滚动的感觉，除了Carousel组件上下按钮点击能感觉到效果外，其他组件里感觉到circular参数就是个摆设，很鸡肋，是否在autoplay里播放到最后一页的时候判断circular是否设置调用不同的处理方式呢？

Carousel的最大宽度问题

https://github.com/aralejs/switchable/blob/master/src/plugins/effects.js#L56

因为写死了宽度是 9999px，在某些页数非常多（宽度超过9999px）的情况下，容器无法盛下。

个人建议，让这个数字 可配置

@lizzie

Carousel貌似不支持无缝切换

Carousel.js,因为在项目中经常的需求是，panels != step * n，这样就会导致element出现空白，而不是真正的无缝切换，请问这个问题应该怎样解决呢？

怎么实现左右2块半透明遮罩,中间是viewsize区域这样scrollx切换

直接使用slider时发现scrolx有问题,它总是把panel自动调整到left=0时,再开始滑动;
而在显示区域上来说,应该是以viewsize(或是content)这个中间区域块为参考点来滑动,而不是最左边;
虽然它滑动的的每次位移是正确的;但是参考点不对了,在可见区域上可能出现图片某边进入遮罩区了.

arale 很多模块都没有 spm3 doc publish

RT

accordion 与 switchable 的关系

从整个交互形式上来说，accordion 更像是 toggle 而不是 switch 。
当初将 accordion 设计进 switchable 是看中了switchable 的什么功能？

@lifesinger @lizzie @leoner

data-switchable-role 暂时改回 data-role

这个修改影响到 @lianqin7 他们了. 暂时先改回来. 以后要改的话, 所有组件一起改.

active 样式无法自定义

ui-switchable-active

from alipay/arale#172

render方法问题

switchable组件在setup方法里就调用了render方法，和其他widget的生命周期管理有不同，影响了整个arale组件的一致性，是否能把render方法放出来，用new Widget().render()的方式代替

Arale-switchable的演示挂掉了

http://spmjs.io/docs/arale-switchable/examples/index.html

这个组件的demo挂掉了。

为什么 spmjs.io 上发布的 1.1.0 版没有 package.json

代码也没有。。

$ spm install arale-switchable
download: http://spmjs.io/repository/arale-switchable/1.1.0/arale-switchable-1.1.0.tar.gz
        extract: ~/.spm/cache/arale-switchable-1.1.0.tar.gz
      installed: $CWD/spm_modules/arale-switchable/1.1.0
        depends: [email protected], [email protected], [email protected]
...
$ ll -a spm_modules/arale-switchable/1.1.0
total 40
drwxr-xr-x  7 hotoo  staff   238B  9 22 21:50 .
drwxr-xr-x  3 hotoo  staff   102B  9 22 21:50 ..
-rwxr-xr-x  1 hotoo  staff   139B  9 22 21:50 .gitignore
-rwxr-xr-x  1 hotoo  staff   273B  9 22 21:50 .travis.yml
-rwxr-xr-x  1 hotoo  staff   1.7K  9 22 21:50 HISTORY.md
-rwxr-xr-x  1 hotoo  staff   6.7K  9 22 21:50 README.md
drwxr-xr-x  4 hotoo  staff   136B  9 22 21:50 examples

AutoPlay中的destroy方法在火狐下报错！

TypeError: this.stop is not a function
[在此错误处中断]     
this.stop();

http://aralejs.org/switchable/examples/switchable.html

直接firebug查看

提交个bug

Carousel 中的134217726px 在360 6.3版本的浏览器下是不支持的改成小点的值就可以了，浏览器对width和height支持的最大值不是统一的哦！！！

effect 为 fade 效果时，切换完毕没有把面板的 display 设为 none

这样会影响页面布局。

https://github.com/aralejs/switchable/blob/master/src/plugins/effects.js#L131

应该在这句话后面加上 fromPanel.css('display: none');

参数circular设置后滚动效果错误

#27 还是这个问题，今天终于明白哪里不对了,看图先~

按右边的>进行操作，画面向左一直循环，这里没有问题！
然后测试左边<按钮，理论和用户感觉上都应该是画面向右一直循环，但是现在确是：当切换首页和尾页的时候滚动方向会改变，而且会一次性滚动几个屏幕！
纠结啊~

data-role 应该换成 data-switchable-role

DATA-API 中, 设置的 data-role 应该换成 data-switchable-role, 以对应于 data-widget-role

switchable的nav自动生成的时候是否应该支持生成在指定元素中

现在自动生成nav默认生成在element最下面，无法定制到指定元素，这个需求还是有的！

默认的className能否通过配置干掉

如题，通过Switchable组件生成的代码总是会加上ui-switchable-的class，看着难受:(

可否通过配置项的形式干掉，比如navClass之类的

panels元素寻找的是当前document下所有的元素，并非依赖父级元素

举例来说：
$(".J_slide").each(function(){
new Slide({
element: this,
panels: '.img_contain li',
activeTriggerClass: 'hover',
effect: 'fade',
easing: 'easeOutStrong',
interval: 2000
}).render();
});

我理解的panels，应该是当前J_silde这个类下面的img_contain类下面的li元素，但实际是找的是所有的document下面的

widget.js文件第一行抛出问题

我参照http://aralejs.org/switchable/examples/slide.html这个demo，但是会抛出错误，在chrome下的问题截图是chrome.png,在firefox下出现的问题如firefox.png所示

。
我在初始化时的代码是跟线上的demo一模一样的。

.

widget升级到1.0.0后switchable关于data-api的处理

widget升级到1.0.0后，对于data-api中的role部分需要手动进行处理.

有两个问题请教一下

我有两个问题想请教一下，应该不算是提bug：
1.我使用tabs控件，我想问下是否支持动态添加和关闭标签页的功能。
2.控件好像没有默认的样式，需要自己单独引入，是吗？

carousel 在360浏览器极速模式显示有问题，兼容模式下没问题

effect能否增加不是使用display控制的但又没有动画的效果

具体的需求是在tab中切换图表，切换才去加载，用display控制图表画出来大小有问题，也不想用fade，因为在ie下切换比较慢，会有重叠的情况，现在是自己写的：

              if (fromPanel[0]) {
                 toPanel.css({
                    opacity: 1 ,
                    position: 'absolute',
                    zIndex:  9 
                });
                fromPanel.css({
                    opacity: 0,
                    position: 'absolute',
                    zIndex:  1
                });

文档：

和原来相比的几个修改点（均可讨论）：

将核心功能和主要功能分开，提供精简版，方便不同场景使用（2者差异见文档）。tab基于精简版，而 slide 与 carousel 基于完整版。
暂时先不实现 accordion 模块（在基础上可以快速添加）
增加 延时加载 功能（api设置参考 kissy，采用 textarea 存放 html 代码）
carousel模块增加高宽自适应功能（简单的适应响应式布局）
需要js代码里追加class的处理（这个还没完全想清楚）

@lizzie @afc163 @popomore

当effect为scrollx时，会把panels的父节点position设为absolute，影响原有布局

设为relative较为稳妥。

是否可以增加 `multiple: false` 的情况下允许全关闭

目前好像只有 multiple: true 的情况下可以全关闭，multiple: false 的情况下最后一个关不掉。

如果初始化的时候设 activeIndex: -1，效果是全关闭，但因为不可能 switchTo(-1)，所以再也达不到这个全关闭的状态了。

slide组件与tab组件panels冲突

我在同一个页面中使用了tabs组件和slide组件，代码如下：

var marketTrends = new Slide({
    element:'#slide-market',
    effect:'scrolly',
    interval:5000,
    autoplay:true,
    circular:true,
    easing:'easeBoth',
    hasTriggers:true
}).render();

var tabs = new Tabs({
    element: '#banner',
    triggers: '.ui-switchable-nav li',
    panels: '.ui-switchable-content div',
    activeIndex: 0,
    autoplay:true,
    interval:1000,
    circular:true,
    effect: 'fade'
});

结果，两个组件都会给自己的panels设置类名：ui-switchable-panel，
然后悲剧发生了，两个组件开始互相调用彼此的 ui-switchable-panel，tabs以为自己的panels有自身+slide个。slide的ui-switchable-panel也会被tabs给隐藏掉。

switchable使用问题

https://github.com/aralejs/switchable/blob/master/dist/switchable-debug.js

这个文件里面有好几个define方法，是否符合规范？

require这个文件出来的对象，是const.js里面的那个object。

测试用例没跑通

http://aralejs.org/switchable/tests/runner.html

有全局变量泄露。

switchable 如果没有在初始化的时候指定唯一的 element 参数引发的问题。

我的页面有12组需要轮播的地方，都是相同的dom结构
一开始我是这样初始化的

  $('.the-same-top-class').each(function(index, element) {
    new Switchable({
        panels: $(element).find('.content'),
        triggers: $(element).find('.triggers'),
        activeTriggerClass: 'trigger-selected',
        autoplay: true,
        circular: true,
        interval: 2500,
        effect: 'scrollx',
        duration: 300,
        delay: 500
    }).render();
    ...
 })

，因为switchable 的 triggers 参数和 pannels 参数除了接受字符选择器之外还支持jQuery数组，所以我是传入了数组，因为dom结构都一样，要是传入字符选择器的话会混乱
3. 但是页面初始化成功之后轮播在没有发生页面滚动的时候是正常的
4. 页面发生滚动后，轮播就不再自动播放了
5. debug源码之后发现，问题出现在 ’arale/switchable/1.0.2/plugins/autoplay-debug‘ 的 install 函数里面
6. 问题代码在这里

 // 滚出可视区域后，停止自动播放
            this._scrollDetect = throttle(function() {
                console.log($(element).html());
                console.log(isInViewport(element) ? "start" : "stop");
                // 不自动播放的时候，输出这里的element，指向的不是轮播的 viewport ，而是一个空的 div
                that[isInViewport(element) ? "start" : "stop"]();
            });

在页面有多个相同结构的dom需要用到switchable的时候，初始化switchable的时候如果没有明确的指定 element 参数，则这里的 element 会指向一个空的div，导致页面一旦发生滚动，这个 that[isInViewport(element) ? "start" : "stop"](); 会一直返回 stop ，因为那个空的 div 根本就不在 viewport 里。
翻开官方文档 http://aralejs.org/switchable/#配置说明配置说明里也没有 element 这个参数说明
只有这里才有 http://aralejs.org/switchable/#tabs-普通标签页关于 element 这个参数的说明
综上所述，当页面有多个相同结构 dom 需要用 js 初始化 switchable 这个组件的时候，除了 triggers pannels 这两个参数需要唯一之外，还需要指定对应的父级 element 参数，要不自动播放会失效，不知道是不是个 bug ，此坑已踩，望加文档或修正，避免他人再踩。