web-apps/apps/common/main/lib/view/AutoCorrectDialog.js

/*
 *
 * (c) Copyright Ascensio System SIA 2010-2020
 *
 * 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 20A-12 Ernesta Birznieka-Upisha
 * street, Riga, Latvia, EU, LV-1050.
 *
 * 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
 *
 */

/**
 *  AutoCorrectDialog.js
 *
 *  Created by Julia Radzhabova on 03.07.2020
 *  Copyright (c) 2020 Ascensio System SIA. All rights reserved.
 *
 */
if (Common === undefined)
    var Common = {};
define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
    'common/main/lib/component/ListView',
    'common/main/lib/component/Window'
], function (contentTemplate) { 'use strict';

    Common.Views.AutoCorrectDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
        options: {
            contentWidth: 375,
            height: 430,
            buttons: null,
            toggleGroup: 'autocorrect-dialog-group'
        },

        initialize : function(options) {
            var filter = Common.localStorage.getKeysFilter();
            this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';

            _.extend(this.options, {
                title: this.textTitle,
                storageName: this.appPrefix + 'autocorrect-dialog-category',
                items: [
                    {panelId: 'id-autocorrect-dialog-settings-math', panelCaption: this.textMathCorrect},
                    {panelId: 'id-autocorrect-dialog-settings-recognized',    panelCaption: this.textLock}
                ],
                template: [
                    '<div class="box" style="height:' + (this.options.height-85) + 'px;">',
                        '<div class="menu-panel" style="overflow: hidden;">',
                            '<% _.each(items, function(item) { %>',
                            '<button class="btn btn-category" content-target="<%= item.panelId %>"><span class=""><%= item.panelCaption %></span></button>',
                            '<% }); %>',
                        '</div>',
                        '<div class="separator"></div>',
                        '<div class="content-panel">' + _.template(contentTemplate)({scope: this}) + '</div>',
                    '</div>',
                    '<div class="separator horizontal"></div>',
                    '<div class="footer center">',
                        '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
                    '</div>'
                ].join('')
            }, options || {});

            this.mathStore = this.options.mathStore || new Common.UI.DataViewStore();
            this.api = this.options.api;
            this.handler = this.options.handler;

            var path = this.appPrefix + "settings-math-correct";
            var value = Common.Utils.InternalSettings.get(path + "-add");
            this.arrAdd = value ? JSON.parse(value) : [];
            value = Common.Utils.InternalSettings.get(path + "-rem");
            this.arrRem = value ? JSON.parse(value) : [];

            Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
        },

        render: function() {
            Common.Views.AdvancedSettingsWindow.prototype.render.call(this);

            var $window = this.getChild();
            var me = this;

            this.chReplaceType = new Common.UI.CheckBox({
                el: $window.findById('#auto-correct-chb-replace-type'),
                labelText: this.textReplaceType,
                value: Common.Utils.InternalSettings.get(this.appPrefix + "settings-math-correct-replace-type")
            }).on('change', function(field, newValue, oldValue, eOpts){
                var checked = (field.getValue()==='checked');
                Common.localStorage.setBool(me.appPrefix + "settings-math-correct-replace-type", checked);
                Common.Utils.InternalSettings.set(me.appPrefix + "settings-math-correct-replace-type", checked);
                me.api.asc_updateFlagAutoCorrectMathSymbols(checked);
            });

            this.onInitList();

            // special
            this.mathList = new Common.UI.ListView({
                el: $window.find('#auto-correct-math-list'),
                store: new Common.UI.DataViewStore(this.mathStore.slice(0, 9)),
                simpleAddMode: false,
                template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                itemTemplate: _.template([
                    '<div id="<%= id %>" class="list-item" style="pointer-events:none;width: 100%;display:flex;">',
                        '<div style="min-width:110px;padding-right: 5px;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= replaced %></div>',
                        '<div style="flex-grow:1;font-family: Cambria Math;font-size:13px;<% if (defaultDisabled) { %> font-style:italic; opacity: 0.5;<% } %>"><%= by %></div>',
                    '</div>'
                ].join('')),
                scrollAlwaysVisible: true
            });
            this.mathList.on('item:select', _.bind(this.onSelectMathItem, this));

            this.inputReplace = new Common.UI.InputField({
                el               : $window.find('#auto-correct-replace'),
                allowBlank       : true,
                validateOnChange : true,
                validation       : function () { return true; }
            }).on ('changing', function (input, value) {
                var _selectedItem;
                if (value.length) {
                    var store = me.mathList.store;
                    _selectedItem = store.find(function(item) {
                        if ( item.get('replaced').indexOf(value) == 0) {
                            return true;
                        }
                    });
                    if (_selectedItem) {
                        me.mathList.scrollToRecord(_selectedItem, true);
                        if (_selectedItem.get('replaced') == value)
                            me.mathList.selectRecord(_selectedItem, true);
                        else
                            _selectedItem = null;
                    }
                }
                (!_selectedItem) && me.mathList.deselectAll();
                me.updateControls(_selectedItem);
            });

            this.inputReplace.cmpEl.find('input').on('keydown', function(event){
                if (event.key == 'ArrowDown') {
                    var _selectedItem = me.mathList.getSelectedRec() || me.mathList.store.at(0);
                    if (_selectedItem) {
                        me.mathList.selectRecord(_selectedItem);
                        me.mathList.scrollToRecord(_selectedItem);
                    }
                    _.delay(function(){
                        me.mathList.cmpEl.find('.listview').focus();
                    },10);

                }
            });

            this.inputBy = new Common.UI.InputField({
                el               : $window.find('#auto-correct-by'),
                allowBlank       : true,
                validateOnChange : true,
                validation       : function () { return true; }
            }).on ('changing', function (input, value) {
                me.updateControls();
            });
            // this.inputBy.cmpEl.find('input').css('font-size', '13px');

            this.btnReset = new Common.UI.Button({
                el: $('#auto-correct-btn-reset')
            });
            this.btnReset.on('click', _.bind(this.onResetToDefault, this));

            this.btnEdit = new Common.UI.Button({
                el: $('#auto-correct-btn-edit')
            });
            this.btnEdit.on('click', _.bind(this.onEdit, this, false));

            this.btnDelete = new Common.UI.Button({
                el: $('#auto-correct-btn-delete')
            });
            this.btnDelete.on('click', _.bind(this.onDelete, this, false));

            this.btnsCategory[0].on('click', _.bind(this.onMathCategoryClick, this, false));

            this.afterRender();
        },

        afterRender: function() {
            this.updateControls();
            if (this.storageName) {
                var value = Common.localStorage.getItem(this.storageName);
                this.setActiveCategory((value!==null) ? parseInt(value) : 0);
            }
        },

        getSettings: function() {
            return;
        },

        onSelectMathItem: function(lisvView, itemView, record) {
            if (record) {
                this.inputReplace.setValue(record.get('replaced'));
                this.inputBy.setValue(record.get('by'));
            }
            this.updateControls(record);
        },

        updateControls: function(rec) {
            if (!this.mathList) return;

            rec = rec || this.mathList.getSelectedRec();
            var inputBy = this.inputBy.getValue(),
                inputReplace = this.inputReplace.getValue();
            if (rec) {
                var disabled = rec.get('defaultDisabled'),
                    defChanged = rec.get('defaultValue') && (rec.get('defaultValueStr')!==rec.get('by'));
                this.btnDelete.setCaption(disabled ? this.textRestore : this.textDelete);
                this.btnEdit.setDisabled(disabled || inputBy === rec.get('by') && !defChanged || !inputBy || !inputReplace);
                this.btnEdit.setCaption(defChanged && (inputBy === rec.get('by')) ? this.textReset : this.textReplace);
            } else {
                this.btnDelete.setCaption(this.textDelete);
                this.btnEdit.setDisabled(!inputBy || !inputReplace);
                this.btnEdit.setCaption(this.textAdd);
            }
            this.btnDelete.setDisabled(!rec);
        },

        show: function() {
            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);

            var value = this.getActiveCategory();
            if (value==0) this.onMathCategoryClick(true);
        },

        close: function() {
            Common.Views.AdvancedSettingsWindow.prototype.close.apply(this, arguments);
            this.mathList && this.mathList.deselectAll();
        },

        onMathCategoryClick: function(delay) {
            var me = this;
            _.delay(function(){
                $('input', me.inputReplace.cmpEl).select().focus();
            },delay ? 50 : 0);

            if (me.mathList.store.length < me.mathStore.length) {
                _.delay(function(){
                    me.mathList.setStore(me.mathStore);
                    me.mathList.onResetItems();
                },delay ? 100 : 10);
            }
        },

        onDelete: function() {
            var rec = this.mathList.getSelectedRec();
            if (rec) {
                if (rec.get('defaultValue')) {
                    var path = this.appPrefix + "settings-math-correct-rem";
                    var disabled = !rec.get('defaultDisabled');
                    rec.set('defaultDisabled', disabled);
                    if (disabled)
                        this.arrRem.push(rec.get('replaced'));
                    else
                        this.arrRem.splice(this.arrRem.indexOf(rec.get('replaced')), 1);
                    var val = JSON.stringify(this.arrRem);
                    Common.Utils.InternalSettings.set(path, val);
                    Common.localStorage.setItem(path, val);
                    this.btnDelete.setCaption(disabled ? this.textRestore : this.textDelete);
                } else {
                    this.mathStore.remove(rec);
                }
                this.updateControls();
                this.api.asc_deleteFromAutoCorrectMathSymbols(rec.get('replaced'));
            }
        },

        onEdit: function() {
            var rec = this.mathList.getSelectedRec(),
                by = '',
                me = this,
                applySettings = function(record, by) {
                    var path = me.appPrefix + "settings-math-correct-add";
                    var val = JSON.stringify(me.arrAdd);
                    Common.Utils.InternalSettings.set(path, val);
                    Common.localStorage.setItem(path, val);
                    me.api.asc_AddOrEditFromAutoCorrectMathSymbols(record.get('replaced'), by);
                    me.mathList.selectRecord(record);
                    me.mathList.scrollToRecord(record);
                };
            if (!rec) {
                rec = this.mathStore.findWhere({replaced: this.inputReplace.getValue()})
            }
            if (rec) {
                var idx = _.findIndex(this.arrAdd, function(item){return (item[0]==rec.get('replaced'));});
                var restore = rec.get('defaultValue') && (rec.get('defaultValueStr')!==rec.get('by')) && (this.inputBy.getValue() === rec.get('by'));
                Common.UI.warning({
                    maxwidth: 500,
                    msg: restore ? this.warnRestore.replace('%1', rec.get('replaced')) : this.warnReplace.replace('%1', rec.get('replaced')),
                    buttons: ['yes', 'no'],
                    primary: 'yes',
                    callback: _.bind(function(btn, dontshow){
                        if (btn == 'yes') {
                            if (restore) {// reset to default
                                by = rec.get('defaultValue');
                                rec.set('by', rec.get('defaultValueStr'));
                                (idx>=0) && this.arrAdd.splice(idx, 1);
                            } else { // replace
                                by = this.inputBy.getValue();
                                rec.set('by', by);
                                if (idx<0)
                                    this.arrAdd.push([rec.get('replaced'), by]);
                                else
                                    this.arrAdd[idx][1] = by;
                            }
                            applySettings(rec, by);
                        }
                    }, this)
                });

            } else {
                rec = this.mathStore.add({
                    replaced: this.inputReplace.getValue(),
                    by: this.inputBy.getValue(),
                    defaultDisabled: false
                });
                by = rec.get('by');
                this.arrAdd.push([rec.get('replaced'), by]);
                applySettings(rec, by);
            }
        },

        onResetToDefault: function() {
            Common.UI.warning({
                maxwidth: 500,
                msg: this.warnReset,
                buttons: ['yes', 'no'],
                primary: 'yes',
                callback: _.bind(function(btn, dontshow){
                    if (btn == 'yes') {
                        this.api.asc_resetToDefaultAutoCorrectMathSymbols();
                        this.onResetList();
                    }
                }, this)
            });
        },

        onResetList: function() {
            // remove storage data
            var path = this.appPrefix + "settings-math-correct";
            var val = JSON.stringify([]);
            Common.Utils.InternalSettings.set(path + "-add", val);
            Common.localStorage.setItem(path + "-add", val);
            Common.Utils.InternalSettings.set(path + "-rem", val);
            Common.localStorage.setItem(path + "-rem", val);
            this.arrAdd = [];
            this.arrRem = [];

            this.mathStore.remove(this.mathStore.findWhere({defaultValue: undefined}));
            this.mathStore.each(function(item, index){
                item.set('by', item.get('defaultValueStr'));
                item.set('defaultDisabled', false);
            });
            this.mathList.deselectAll();
            if (this.mathList.scroller) {
                this.mathList.scroller.update();
                this.mathList.scroller.scrollTop(0);
            }
            this.updateControls();
        },

        onInitList: function() {
            if (this.mathStore.length>0) return;

            this.mathStore.comparator = function(item1, item2) {
                var n1 = item1.get('replaced').toLowerCase(),
                    n2 = item2.get('replaced').toLowerCase();
                if (n1==n2) return 0;
                return (n1<n2) ? -1 : 1;
            };

            var arrAdd = this.arrAdd,
                arrRem = this.arrRem;

            var arr = (this.api) ? this.api.asc_getAutoCorrectMathSymbols() : [],
                data = [];
            _.each(arr, function(item, index){
                var itm = {
                    replaced: item[0],
                    defaultValue: item[1],
                    defaultDisabled: arrRem.indexOf(item[0])>-1
                };
                if (typeof item[1]=='object') {
                    itm.defaultValueStr = '';
                    _.each(item[1], function(ch){
                        itm.defaultValueStr += Common.Utils.String.encodeSurrogateChar(ch);
                    });
                    itm.by = itm.defaultValueStr;
                } else {
                    itm.by = itm.defaultValueStr = Common.Utils.String.encodeSurrogateChar(item[1]);
                }
                data.push(itm);
            });

            var dataAdd = [];
            _.each(arrAdd, function(item, index){
                var idx = _.findIndex(data, {replaced: item[0]});
                if (idx<0) {
                    dataAdd.push({
                        replaced: item[0],
                        by: item[1],
                        defaultDisabled: false
                    });
                } else {
                    var changed = data[idx];
                    changed.by = item[1];
                }
            });
            this.mathStore.reset(data.concat(dataAdd));
            this.updateControls();
        },

        textTitle: 'AutoCorrect',
        textMathCorrect: 'Math AutoCorrect',
        textReplace: 'Replace',
        textBy: 'By',
        textResetAll: 'Reset to default',
        textAdd: 'Add',
        textDelete: 'Delete',
        textRestore: 'Restore',
        textReset: 'Reset',
        textReplaceType: 'Replace text as you type',
        warnReset: 'Any autocorrect you added will be removed and the changed ones will be restored to their original values. Do you want to continue?',
        warnReplace: 'The autocorrect entry for %1 already exists. Do you want to replace it?',
        warnRestore: 'The autocorrect entry for %1 will be reset to its original value. Do you want to continue?'

    }, Common.Views.AutoCorrectDialog || {}))
});