web-apps/apps/documenteditor/mobile/app/controller/tablet/panel/Font.js

/*
 *
 * (c) Copyright Ascensio System Limited 2010-2016
 *
 * This program is a free software product. You can redistribute it and/or
 * modify it under the terms of the GNU Affero General Public License (AGPL)
 * version 3 as published by the Free Software Foundation. In accordance with
 * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
 * that Ascensio System SIA expressly excludes the warranty of non-infringement
 * of any third-party rights.
 *
 * This program is distributed WITHOUT ANY WARRANTY; without even the implied
 * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
 * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
 *
 * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
 * EU, LV-1021.
 *
 * The  interactive user interfaces in modified source and object code versions
 * of the Program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU AGPL version 3.
 *
 * Pursuant to Section 7(b) of the License you must retain the original Product
 * logo when distributing the program. Pursuant to Section 7(e) we decline to
 * grant you any rights under trademark law for use of our trademarks.
 *
 * All the Product's GUI elements, including illustrations and icon sets, as
 * well as technical writing content are licensed under the terms of the
 * Creative Commons Attribution-ShareAlike 4.0 International. See the License
 * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 *
*/
Ext.define('DE.controller.tablet.panel.Font', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            fontPanel           : 'fontpanel',
            navigateView        : '#id-font-navigate',
            fontSizeSpinner     : 'fontpanel planarspinnerfield',
            fontView            : '#id-font-root',
            fontNameView        : '#id-font-name',
            fontNameButton      : '#id-btn-fontname',
            fontButton          : '#id-tb-btn-font',
            fontBaseToggle      : '#id-toggle-baseline',
            fontBaseUp          : '#id-btn-baseline-up',
            fontBaseDown        : '#id-btn-baseline-down'
        },

        control: {
            fontPanel       : {
                show    : 'onFontPanelShow',
                hide    : 'onFontPanelHide'
            },
            navigateView    : {
                push    : 'onNavigateViewPush',
                pop     : 'onNavigateViewPop',
                back    : 'onNavigateViewBack'
            },
            fontNameButton  : {
                tap     : 'onFontNameButtonTap'
            },
            fontSizeSpinner : {
                blur    : 'onFontSizeSpinnerBlur',
                focus   : 'onFontSizeSpinnerFocus',
                keyup   : 'onFontSizeSpinnerKeyUp',
                spin    : 'onFontSizeSpinnerSpin'
            },
            fontNameView    : {
                select  : 'onFontNameSelect',
                itemtap : 'onFontNameItemTap'
            },
            fontBaseUp      : {
                tap     : 'onFontBaseUpTap'
            },
            fontBaseDown    : {
                tap     : 'onFontBaseDownTap'
            }
        },

        handleApiEvent  : false
    },

    init: function() {
    },

    launch: function() {
    },

    setApi: function(o) {
        this.api = o;

        if (this.api) {
            this.api.asc_registerCallback('asc_onFontFamily',           Ext.bind(this.onApiFontChange, this));
            this.api.asc_registerCallback('asc_onInitEditorFonts',      Ext.bind(this.onApiLoadFonts, this)); // deprecated
            this.api.asc_registerCallback('asc_onFontSize',             Ext.bind(this.onApiFontSize, this));
            this.api.asc_registerCallback('asc_onVerticalAlign',        Ext.bind(this.onApiVerticalAlign, this));
            this.api.asc_registerCallback('asc_onDocumentContentReady', Ext.bind(this.onDocumentContentReady, this));
        }
    },

    onFontPanelShow: function(cmp) {
        this.setHandleApiEvent(true);

        // update ui data
        this.api && this.api.UpdateInterfaceState();
    },

    onFontPanelHide: function(cmp) {
        this.setHandleApiEvent(false);

        var navigateView    = this.getNavigateView(),
            fontSizeSpinner = this.getFontSizeSpinner();

        if (fontSizeSpinner) {
            Ext.defer(function(){
                fontSizeSpinner.blur();
            }, 200);
        }

        if (navigateView) {
            navigateView.reset();
            navigateView.addCls('plain');
            navigateView.getNavigationBar().hide();

            var activeItem = navigateView.getActiveItem(),
                panelSize = this.getSizeById(activeItem && activeItem.id);

            cmp.setSize(panelSize.width, panelSize.height);
        }
    },

    onFontNameButtonTap: function() {
        var navigateView = this.getNavigateView(),
            fontNameView = this.getFontNameView();

        if (navigateView) {
            var navigationBar = navigateView.getNavigationBar();

            if (navigationBar)
                navigationBar.show();

            navigateView.push(fontNameView);
        }
    },

    onFontSizeSpinnerFocus: function() {
        this.api && this.api.asc_enableKeyEvents(false);
    },

    onFontSizeSpinnerBlur: function(field) {
        this.api && this.api.asc_enableKeyEvents(true);

        this.getFontSizeSpinner().setValue(field.getValue());

        if (this.api) {
            this.api.put_TextPrFontSize(field.getValue());

            Common.component.Analytics.trackEvent('ToolBar', 'Font Size');
        }
    },

    onFontSizeSpinnerKeyUp: function(field, event) {
        if (event.browserEvent.keyCode == 13 ||
            event.browserEvent.keyCode == 10) {
            event.stopEvent();
            field.element.dom.blur();

            if (this.api) {
                this.api.put_TextPrFontSize(field.getValue());

                Common.component.Analytics.trackEvent('ToolBar', 'Font Size');
            }
        }
    },

    onFontSizeSpinnerSpin: function(spin, value) {
        if (this.api) {
            this.api.put_TextPrFontSize(value);

            Common.component.Analytics.trackEvent('ToolBar', 'Font Size');
        }
    },

    getSizeById: function(id){
        switch(id){
            case 'id-font-name':    return {width: 350, height: 300};
            default:
            case 'id-font-root':    return {width: 440, height: 46};
        }
    },

    toggleSegmentedButton: function(btn) {
        var toggler = this.getFontBaseToggle();

        if (toggler) {
            var pressedButtonsNew = [];

            if (btn)
                pressedButtonsNew.push(btn);

            toggler.setPressedButtons(pressedButtonsNew);
        }
    },

//    scrollToSelectFont: function() {
//        var fontNameView = this.getFontNameView();
//
//        if (fontNameView) {
//            var el       = fontNameView.element,
//                cls      = fontNameView.getSelectedCls(),
//                selected = el.down('.' + cls),
//                y;
//
//            if (selected) {
//                y = selected.dom.offsetTop;
//
//                fontNameView.getScrollable().getScroller().scrollTo(0, y, true);
//            }
//        }
//    },

    onNavigateViewPush: function(cmp, view) {
        var parentCmp = cmp.getParent(),
            panelSize = this.getSizeById(view && view.id);

        if (parentCmp) {
            parentCmp.setSize(panelSize.width, panelSize.height);

            var navigationView = this.getNavigateView();

            if (navigationView){
                navigationView.removeCls('plain');
                navigationView.getNavigationBar().show();
            }

            var fontButton = this.getFontButton();

            if (fontButton)
                parentCmp.alignTo(fontButton);

//            if (view && view.id == 'id-font-name') {
//                this.scrollToSelectFont();
//            }
        }
    },

    onNavigateViewPop: function(cmp, view) {
//        //
    },

    onNavigateViewBack: function(cmp) {
        var parentCmp  = cmp.getParent(),
            activeItem = cmp.getActiveItem(),
            panelSize  = this.getSizeById(activeItem && activeItem.id);


        if (activeItem && activeItem.id == 'id-font-root') {
            var navigationView = this.getNavigateView();

            if (navigationView) {
                navigationView.addCls('plain');
                navigationView.getNavigationBar().hide();
            }
        }

        if (parentCmp) {
            parentCmp.setSize(panelSize.width, panelSize.height);

            var fontButton = this.getFontButton();

            if (fontButton)
                parentCmp.alignTo(fontButton);
        }
    },

    onFontNameSelect: function(cmp, rec) {
        var fontNameButton = this.getFontNameButton();

        if (fontNameButton) {
            fontNameButton.setText(rec.get('setting'));
        }
    },

    onFontNameItemTap: function(cmp, index, item, rec) {
        if (this.api) {
            this.api.put_TextPrFontName(rec.get('setting'));

            Common.component.Analytics.trackEvent('ToolBar', 'Font Name');
        }
    },

    onFontBaseUpTap: function(btn) {
        if (this.api) {
            var toggler = this.getFontBaseToggle();

            if (toggler) {
                this.api.put_TextPrBaseline(toggler.isPressed(btn) ? 1 : 0);

                Common.component.Analytics.trackEvent('ToolBar', 'Superscript');
            }
        }
    },

    onFontBaseDownTap: function(btn) {
        if (this.api) {
            var toggler = this.getFontBaseToggle();

            if (toggler) {
                this.api.put_TextPrBaseline(toggler.isPressed(btn) ? 2 : 0);

                Common.component.Analytics.trackEvent('ToolBar', 'Subscript');
            }
        }
    },

    onDocumentContentReady: function() {
    },

    onApiFontChange: function(font) {
        if (this.getHandleApiEvent()) {
            var fontNameView = this.getFontNameView();

            if (fontNameView) {
                var fontName = font.get_Name(),
                    fontRec = fontNameView.getStore().findRecord('setting', fontName);

                if (fontRec) {
                    fontNameView.select(fontRec);
                }
            }
        }
    },

    onApiLoadFonts: function(fl) {
        var fontNameView = this.getFontNameView();

        if (fontNameView) {
            var rawFontsArray = [];
            Ext.each(fl, function(font){
                rawFontsArray.push({
                    setting : font.asc_getFontName(),
                    group   : 'font'
                });
            });

            fontNameView.getStore().setData(rawFontsArray);
        }
    },

    onApiFontSize: function(size) {
        if (this.getHandleApiEvent()) {
            var fontSizeSpinner = this.getFontSizeSpinner();

            if (fontSizeSpinner)
                fontSizeSpinner.setValue(size);
//        if (!this.flg.setFontSize) {
////            var str_size = size + ' pt';
//            var str_size = String(size);
//            if (this.cmbFontSize.getValue() != str_size) {
//                this.cmbFontSize.setValue(str_size);
////                this.cmbFontSize.setRawValue(this.cmbFontSize.getValue() + ' pt');
//            }
//        }
        }
    },

    onApiVerticalAlign: function(type) {
        if (this.getHandleApiEvent()) {
            switch(type) {
                case 1:
                    this.toggleSegmentedButton(this.getFontBaseUp());
                    break;
                case 2:
                    this.toggleSegmentedButton(this.getFontBaseDown());
                    break;
                default:
                    this.toggleSegmentedButton();
            }
        }
    }
});