base9.html | searchcode

/1.4/api/source/base9.html

https://github.com/yiminghe/kissyteam.github.com
HTML | 350 lines | 334 code | 16 blank | 0 comment | 0 complexity | 80012cd02a4175ac8897309bea967c62 MD5 | raw file

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @ignore
 * scroll-view control
 * @author yiminghe@gmail.com
 */
KISSY.add('scroll-view/base', function (S, Node, Anim, Container, Render, undefined) {
    var $ = S.all,
        isTouchEventSupported = S.Features.isTouchEventSupported(),
        KeyCode = Node.KeyCode;

    function onElScroll() {
        var self = this,
            el = self.el,
            scrollTop = el.scrollTop,
            scrollLeft = el.scrollLeft;
        if (scrollTop) {
            self.set('scrollTop', scrollTop + self.get('scrollTop'));
        }
        if (scrollLeft) {
            self.set('scrollLeft', scrollLeft + self.get('scrollLeft'));
        }
        el.scrollTop = el.scrollLeft = 0;
    }

    function frame(anim, fx) {
        anim.scrollView.set(fx.prop, fx.val);
    }

<span id='KISSY-ScrollView-Base'>    /**
</span>     * Make container scrollable.
     * module scroll-view will be this class on non-touch device
     * @class KISSY.ScrollView.Base
     * @extend KISSY.Component.Container
     */
    return Container.extend({
        initializer: function () {
            this.scrollAnims = [];
        },

        bindUI: function () {
            var self = this,
                $el = self.$el;
            $el.on('mousewheel', self.handleMouseWheel, self)
                // textarea enter cause el to scroll
                // bug: left top scroll does not fire scroll event, because scrollTop is 0!
                .on('scroll', onElScroll, self);
        },

        handleKeyDownInternal: function (e) {
            // no need to process disabled (already processed by Component)
            var target = e.target,
                $target = $(target),
                nodeName = $target.nodeName();
            // editable element
            if (nodeName == 'input' ||
                nodeName == 'textarea' ||
                nodeName == 'select' ||
                $target.hasAttr('contenteditable')) {
                return undefined;
            }
            var self = this,
                keyCode = e.keyCode,
                scrollStep = self.getScrollStep(),
                ok = undefined;
            var allowX = self.allowScroll['left'];
            var allowY = self.allowScroll['top'];
            if (allowY) {
                var scrollStepY = scrollStep.top,
                    clientHeight = self.clientHeight,
                    scrollTop = self.get('scrollTop');
                if (keyCode == KeyCode.DOWN) {
                    self.scrollToWithBounds({
                        top: scrollTop + scrollStepY
                    });
                    ok = true;
                } else if (keyCode == KeyCode.UP) {
                    self.scrollToWithBounds({top: scrollTop - scrollStepY});
                    ok = true;
                } else if (keyCode == KeyCode.PAGE_DOWN) {
                    self.scrollToWithBounds({top: scrollTop + clientHeight});
                    ok = true;
                } else if (keyCode == KeyCode.PAGE_UP) {
                    self.scrollToWithBounds({top: scrollTop - clientHeight});
                    ok = true;
                }
            }
            if (allowX) {
                var scrollStepX = scrollStep.left;
                var scrollLeft = self.get('scrollLeft');
                if (keyCode == KeyCode.RIGHT) {
                    self.scrollToWithBounds({left: scrollLeft + scrollStepX});
                    ok = true;
                } else if (keyCode == KeyCode.LEFT) {
                    self.scrollToWithBounds({left: scrollLeft - scrollStepX});
                    ok = true;
                }
            }
            return ok;
        },

        getScrollStep: function () {
            var control = this;
            if (control.scrollStep) {
                return control.scrollStep;
            }
            var elDoc = $(this.get('el')[0].ownerDocument);
            var clientHeight = control.clientHeight;
            var clientWidth = control.clientWidth;
            return control.scrollStep = {
                top: Math.max(clientHeight * clientHeight * 0.7 / elDoc.height(), 20),
                left: Math.max(clientWidth * clientWidth * 0.7 / elDoc.width(), 20)
            };
        },

        handleMouseWheel: function (e) {
            if (this.get('disabled')) {
                return;
            }
            var max,
                min,
                self = this,
                scrollStep = self.getScrollStep(),
                deltaY,
                deltaX,
                maxScroll = self.maxScroll,
                minScroll = self.minScroll;

            if ((deltaY = e.deltaY) &amp;&amp; self.allowScroll['top']) {
                var scrollTop = self.get('scrollTop');
                max = maxScroll.top;
                min = minScroll.top;
                if (scrollTop &lt;= min &amp;&amp; deltaY &gt; 0 || scrollTop &gt;= max &amp;&amp; deltaY &lt; 0) {
                } else {
                    self.scrollToWithBounds({top: scrollTop - e.deltaY * scrollStep['top']});
                    e.preventDefault();
                }
            }

            if ((deltaX = e.deltaX) &amp;&amp; self.allowScroll['left']) {
                var scrollLeft = self.get('scrollLeft');
                max = maxScroll.left;
                min = minScroll.left;
                if (scrollLeft &lt;= min &amp;&amp; deltaX &gt; 0 || scrollLeft &gt;= max &amp;&amp; deltaX &lt; 0) {
                } else {
                    self.scrollToWithBounds({left: scrollLeft - e.deltaX * scrollStep['left']});
                    e.preventDefault();
                }
            }
        },

        'isAxisEnabled': function (axis) {
            return this.allowScroll[axis == 'x' ? 'left' : 'top'];
        },

        stopAnimation: function () {
            var self = this;
            if (self.scrollAnims.length) {
                S.each(self.scrollAnims, function (scrollAnim) {
                    scrollAnim.stop();
                });
                self.scrollAnims = [];
            }
            self.scrollToWithBounds({
                left: self.get('scrollLeft'),
                top: self.get('scrollTop')
            });
        },

        '_uiSetPageIndex': function (v) {
            this.scrollToPage(v);
        },

        _getPageIndexFromXY: function (v, allowX, direction) {
            var pagesOffset = this.pagesOffset.concat([]);
            var p2 = allowX ? 'left' : 'top';
            var i, offset;
            pagesOffset.sort(function (e1, e2) {
                return e1[p2] - e2[p2];
            });
            if (direction &gt; 0) {
                for (i = 0; i &lt; pagesOffset.length; i++) {
                    offset = pagesOffset[i];
                    if (offset[p2] &gt;= v) {
                        return offset.index;
                    }
                }
            } else {
                for (i = pagesOffset.length - 1; i &gt;= 0; i--) {
                    offset = pagesOffset[i];
                    if (offset[p2] &lt;= v) {
                        return offset.index;
                    }
                }
            }
            return undefined;
        },

        scrollToPage: function (index, animCfg) {
            var self = this,
                pageOffset;
            if ((pageOffset = self.pagesOffset) &amp;&amp; pageOffset[index]) {
                self.set('pageIndex', index);
                self.scrollTo(pageOffset[index], animCfg);
            }
        },

        scrollToWithBounds: function (cfg, anim) {
            var self = this;
            var maxScroll = self.maxScroll;
            var minScroll = self.minScroll;
            if (cfg.left) {
                cfg.left = Math.min(Math.max(cfg.left, minScroll.left), maxScroll.left);
            }
            if (cfg.top) {
                cfg.top = Math.min(Math.max(cfg.top, minScroll.top), maxScroll.top);
            }
            self.scrollTo(cfg, anim);
        },

        scrollTo: function (cfg, animCfg) {
            var self = this,
                left = cfg.left,
                top = cfg.top;
            if (animCfg) {
                var scrollLeft = self.get('scrollLeft'),
                    scrollTop = self.get('scrollTop'),
                    node = {},
                    to = {};
                if (left !== undefined) {
                    to.scrollLeft = left;
                    node.scrollLeft = self.get('scrollLeft');
                }
                if (top !== undefined) {
                    to.scrollTop = top;
                    node.scrollTop = self.get('scrollTop');
                }
                animCfg.frame = frame;
                animCfg.node = node;
                animCfg.to = to;
                var anim;
                self.scrollAnims.push(anim = new Anim(animCfg));
                anim.scrollView = self;
                anim.run();
            } else {
                if (left !== undefined) {
                    self.set('scrollLeft', left);
                }
                if (top !== undefined) {
                    self.set('scrollTop', top);
                }
            }
        }
    }, {
        ATTRS: {
<span id='KISSY-ScrollView-Base-property-contentEl'>            /**
</span>             * content element of scroll view component
             * @property contentEl
             * @type {KISSY.NodeList}
             */
<span id='global-property-contentEl'>            /**
</span>             * @ignore
             */
            contentEl: {
            },
<span id='KISSY-ScrollView-Base-property-scrollLeft'>            /**
</span>             * scrollLeft of scroll view
             * @property scrollLeft
             * @type {Number}
             */
<span id='global-property-scrollLeft'>            /**
</span>             * @ignore
             */
            scrollLeft: {
                view: 1,
                value: 0
            },
<span id='KISSY-ScrollView-Base-property-scrollTop'>            /**
</span>             * scrollTop of scroll view
             * @property scrollTop
             * @type {Number}
             */
<span id='global-property-scrollTop'>            /**
</span>             * @ignore
             */
            scrollTop: {
                view: 1,
                value: 0
            },
            focusable: {
                // need process keydown
                value: !isTouchEventSupported
            },
            allowTextSelection: {
                value: true
            },
            handleMouseEvents: {
                value: false
            },
<span id='KISSY-ScrollView-Base-cfg-snap'>            /**
</span>             * whether to allow snap effect
             * @cfg {Boolean} snap
             */
<span id='global-property-snap'>            /**
</span>             * @ignore
             */
            snap: {
                value: false
            },
<span id='KISSY-ScrollView-Base-property-pageIndex'>            /**
</span>             * pageIndex, current pageIndex if allow snap
             * @property pageIndex
             * @type {Number}
             */
<span id='global-property-pageIndex'>            /**
</span>             * @ignore
             */
            pageIndex: {
                value: 0
            },
            xrender: {
                value: Render
            }
        },
        xclass: 'scroll-view'
    });
}, {
    requires: ['node',
        'anim',
        'component/container',
        './base/render']
});</pre>
</body>
</html>