Commit 9e8831a4 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Fix remembering scroll state of guides. 

Refactor common scrolling methods into a mixin class that's used in both
class overview and guides container.
parent 4fcc4828

template/app/controller/Guides.js

+15 −2
Original line number Diff line number Diff line
@@ -57,6 +57,13 @@ Ext.define('Docs.controller.Guides', { 
                        delegate: '.guide'

                    });

                }

            },

            '#guide': {

                afterrender: function(cmp) {

                    cmp.body.addListener('scroll', function(cmp, el) {

                        this.setScrollState(this.activeUrl, el.scrollTop);

                    }, this);

                }

            }

        });

    },
@@ -144,9 +151,15 @@ Ext.define('Docs.controller.Guides', { 
            reRendered = true;

        }

        this.activeUrl = url;

        section ? this.getGuide().scrollToEl(name+section) : this.getGuide().scrollToTop();



        if (section) {

            this.getGuide().scrollToEl(name+section);

        }

        else {

            this.getGuide().setScrollTop(this.getScrollState(this.activeUrl));

        }



        this.fireEvent('showGuide', name, { reRendered: reRendered });

        this.getTree().selectUrl(url);

    }



});

template/app/view/PanelScrolling.js

0 → 100644
+44 −0
Original line number Diff line number Diff line 
/**

 * A mixin that adds various scrolling methods to panel.

 */

Ext.define('Docs.view.PanelScrolling', {

    /**

     * Scrolls the specified element into view

     *

     * @param {String/HTMLElement/Ext.Element} el  The element to scroll to.

     * @param {Object} [opts]  Additional options:

     * @param {Number} opts.offset  Additional amount to scroll more or less

     * @param {Boolean} opts.highlight  True to also highlight the element.

     */

    scrollToView: function(el, opts) {

        el = Ext.get(el);

        opts = opts || {};

        if (el) {

            this.setScrollTop(this.getScrollTop() + el.getY() + (opts.offset || 0));

            opts.highlight && el.highlight();

        }

    },



    /**

     * Returns the amount of vertical scroll.

     * @return {Number}

     */

    getScrollTop: function() {

        return this.body.getScroll()['top'];

    },



    /**

     * Scrolls vertically to given offset.

     * @param {Number} offset

     */

    setScrollTop: function(offset) {

        return this.body.scrollTo('top', offset);

    },



    /**

     * Scrolls panel to the top

     */

    scrollToTop: function() {

        this.body.scrollTo('top');

    }

});

template/app/view/cls/Overview.js

+5 −6
Original line number Diff line number Diff line
@@ -11,6 +11,7 @@ Ext.define('Docs.view.cls.Overview', { 
        'Docs.Syntax',

        'Docs.Settings'

    ],

    mixins: ['Docs.view.PanelScrolling'],



    cls: 'class-overview iScroll',

    autoScroll: true,
@@ -55,12 +56,10 @@ Ext.define('Docs.view.cls.Overview', { 
                el.addCls('open');

            }



            var scrollOffset = el.getY() - (isMember ? 165 : 155) + (offset || 0);

            var docContent = this.getEl().down('.x-panel-body');

            var currentScroll = docContent.getScroll()['top'];

            docContent.scrollTo('top', currentScroll + scrollOffset);



            el.highlight();

            this.scrollToView(el, {

                highlight: true,

                offset: (offset || 0) - (isMember ? 165 : 155)

            });

        }

    },

template/app/view/guides/Container.js

+7 −30
Original line number Diff line number Diff line
@@ -7,6 +7,7 @@ Ext.define('Docs.view.guides.Container', { 
    extend: 'Ext.panel.Panel',

    alias: 'widget.guidecontainer',

    componentCls: 'guide-container',

    mixins: ['Docs.view.PanelScrolling'],



    initComponent: function() {

        this.addEvents(
@@ -22,37 +23,13 @@ Ext.define('Docs.view.guides.Container', { 
    /**

     * Scrolls the specified element into view

     *

     * @param {String} id  ID of elemnt to scroll to.

     * @param {String} el  The element to scroll to.

     */

    scrollToEl: function(id) {

        var el = Ext.get(id);

        if (el) {

            this.setScrollTop(this.getScrollTop() + el.getY() - 100);

            el.highlight();

        }

    },



    /**

     * Returns the amount of vertical scroll

     * @return {Number}

     */

    getScrollTop: function() {

        return this.body.getScroll()['top'];

    },



    /**

     * Scrolls vertically to given offset

     * @param {Number} offset

     */

    setScrollTop: function(offset) {

        return this.body.scrollTo('top', offset);

    },



    /**

     * Scrolls guide to the top

     */

    scrollToTop: function() {

        this.body.scrollTo('top');

    scrollToEl: function(el) {

        this.scrollToView(el, {

            highlight: true,

            offset: -100

        });

    },



    /**