[PE] New search: add left panel, add controller

apps/documenteditor/main/app/controller/Search.js

@@ -53,7 +53,6 @@ define([
         ],
 
         initialize: function () {
-            console.log('init');
             this.addListeners({
                 'SearchBar': {
                     'search:back': _.bind(this.onQuerySearch, this, 'back'),

apps/presentationeditor/main/app.js

@@ -153,6 +153,7 @@ require([
             'LeftMenu',
             'Main',
             'ViewTab',
+            'Search',
             'Common.Controllers.Fonts',
             'Common.Controllers.History'
             /** coauthoring begin **/
@@ -178,6 +179,7 @@ require([
             'presentationeditor/main/app/controller/LeftMenu',
             'presentationeditor/main/app/controller/Main',
             'presentationeditor/main/app/controller/ViewTab',
+            'presentationeditor/main/app/controller/Search',
             'presentationeditor/main/app/view/FileMenuPanels',
             'presentationeditor/main/app/view/ParagraphSettings',
             'presentationeditor/main/app/view/ImageSettings',

apps/presentationeditor/main/app/controller/LeftMenu.js

@@ -171,6 +171,8 @@ define([
             if (this.mode.canUseHistory)
                 this.getApplication().getController('Common.Controllers.History').setApi(this.api).setMode(this.mode);
             this.leftMenu.btnThumbs.toggle(true);
+            this.getApplication().getController('Search').setApi(this.api).setMode(this.mode);
+            this.leftMenu.setOptionsPanel('advancedsearch', this.getApplication().getController('Search').getView('Common.Views.SearchPanel'));
             return this;
         },
 
@@ -747,6 +749,9 @@ define([
 
                     // focus to sdk
                     this.api.asc_enableKeyEvents(true);
+                } else if (this.leftMenu.btnSearchBar.isActive()) {
+                    this.leftMenu.btnSearchBar.toggle(false);
+                    this.leftMenu.onBtnMenuClick(this.leftMenu.btnSearchBar);
                 }
             }
         },

apps/presentationeditor/main/app/controller/Search.js

@@ -0,0 +1,126 @@
+/*
+ *
+ * (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
+ *
+ */
+
+/**
+ *  ViewTab.js
+ *
+ *  Created by Julia Svinareva on 25.02.2022
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'common/main/lib/view/SearchPanel'
+], function () {
+    'use strict';
+
+    PE.Controllers.Search = Backbone.Controller.extend(_.extend({
+        sdkViewName : '#id_main',
+
+        views: [
+            'Common.Views.SearchPanel'
+        ],
+
+        initialize: function () {
+            this.addListeners({
+                'SearchBar': {
+                    'search:back': _.bind(this.onQuerySearch, this, 'back'),
+                    'search:next': _.bind(this.onQuerySearch, this, 'next'),
+                },
+                'Common.Views.SearchPanel': {
+                    'search:back': _.bind(this.onQuerySearch, this, 'back'),
+                    'search:next': _.bind(this.onQuerySearch, this, 'next'),
+                    'search:replace': _.bind(this.onQueryReplace, this),
+                    'search:replaceall': _.bind(this.onQueryReplaceAll, this)
+                }
+            });
+        },
+        onLaunch: function () {
+            this._state = {};
+        },
+
+        setMode: function (mode) {
+            this.view = this.createView('Common.Views.SearchPanel', { mode: mode });
+        },
+
+        setApi: function (api) {
+            if (api) {
+                this.api = api;
+            }
+            return this;
+        },
+
+        getView: function(name) {
+            return !name && this.view ?
+                this.view : Backbone.Controller.prototype.getView.call(this, name);
+        },
+
+        onQuerySearch: function (d, w, opts) {
+            if (opts.textsearch && opts.textsearch.length) {
+                if (!this.api.asc_findText(opts.textsearch, d != 'back', opts.matchcase)) {
+                    var me = this;
+                    Common.UI.info({
+                        msg: this.textNoTextFound,
+                        callback: function() {
+                            //me.dlgSearch.focus();
+                        }
+                    });
+                }
+            }
+        },
+
+        onQueryReplace: function(w, opts) {
+            if (!_.isEmpty(opts.textsearch)) {
+                if (!this.api.asc_replaceText(opts.textsearch, opts.textreplace, false, opts.matchcase)) {
+                    var me = this;
+                    Common.UI.info({
+                        msg: this.textNoTextFound,
+                        callback: function() {
+                            me.view.focus();
+                        }
+                    });
+                }
+            }
+        },
+
+        onQueryReplaceAll: function(w, opts) {
+            if (!_.isEmpty(opts.textsearch)) {
+                this.api.asc_replaceText(opts.textsearch, opts.textreplace, true, opts.matchcase);
+            }
+        },
+
+        textNoTextFound: 'The data you have been searching for could not be found. Please adjust your search options.',
+
+    }, PE.Controllers.Search || {}));
+});

apps/presentationeditor/main/app/template/LeftMenu.template

@@ -1,6 +1,7 @@
 <div id="view-left-menu" class="tool-menu left">
     <div class="tool-menu-btns">
         <button id="left-btn-search" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button>
+        <button id="left-btn-searchbar" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button>
         <button id="left-btn-thumbs" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-thumbs">&nbsp;</i></button>
         <!-- /** coauthoring begin **/ -->
         <button id="left-btn-comments" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target="left-panel-comments"><i class="icon toolbar__icon btn-menu-comments">&nbsp;</i></button>
@@ -11,6 +12,7 @@
         <button id="left-btn-about" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button>
     </div>
     <div class="left-panel" style="">
+        <div id="left-panel-search" class="" style="display: none;"></div>
         <!-- /** coauthoring begin **/ -->
         <div id="left-panel-comments" class="" style="display: none;"></div>
         <div id="left-panel-chat" class="" style="display: none;"></div>

apps/presentationeditor/main/app/view/LeftMenu.js

@@ -72,6 +72,7 @@ define([
                 'click #left-btn-chat': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
                 /** coauthoring end **/
+                'click #left-btn-searchbar': _.bind(this.onCoauthOptions, this),
                 'click #left-btn-support': function() {
                     var config = this.mode.customization;
                     config && !!config.feedback && !!config.feedback.url ?
@@ -97,6 +98,15 @@ define([
                 enableToggle: true
             });
 
+            this.btnSearchBar = new Common.UI.Button({
+                action: 'advancedsearch',
+                el: $markup.elementById('#left-btn-searchbar'),
+                hint: this.tipSearch + Common.Utils.String.platformKey('Ctrl+F'),
+                disabled: true,
+                enableToggle: true,
+                toggleGroup: 'leftMenuGroup'
+            });
+
             this.btnThumbs = new Common.UI.Button({
                 action: 'thumbs',
                 el: $markup.elementById('#left-btn-thumbs'),
@@ -157,6 +167,7 @@ define([
             this.btnPlugins.on('click',         _.bind(this.onBtnMenuClick, this));
             
             this.btnSearch.on('click',          _.bind(this.onBtnMenuClick, this));
+            this.btnSearchBar.on('click',       _.bind(this.onBtnMenuClick, this));
             this.btnThumbs.on('click',          _.bind(this.onBtnMenuClick, this));
             this.btnAbout.on('toggle',          _.bind(this.onBtnMenuToggle, this));
             this.btnAbout.on('click',           _.bind(this.onFullMenuClick, this));
@@ -241,6 +252,13 @@ define([
                 }
             }
             /** coauthoring end **/
+            if (this.panelSearch) {
+                if (this.btnSearchBar.pressed) {
+                    this.panelSearch.show();
+                } else {
+                    this.panelSearch.hide();
+                }
+            }
             // if (this.mode.canPlugins && this.panelPlugins) {
             //     if (this.btnPlugins.pressed) {
             //         this.panelPlugins.show();
@@ -260,6 +278,9 @@ define([
                 this.panelPlugins = panel.render('#left-panel-plugins');
             } else if (name == 'history') {
                 this.panelHistory = panel.render('#left-panel-history');
+            } else
+            if (name == 'advancedsearch') {
+                this.panelSearch = panel.render('#left-panel-search');
             }
         },
 
@@ -299,11 +320,15 @@ define([
                 this.panelPlugins['hide']();
                 this.btnPlugins.toggle(false, true);
             }
+            if (this.panelSearch) {
+                this.panelSearch['hide']();
+                this.btnSearchBar.toggle(false, true);
+            }
             this.fireEvent('panel:show', [this, '', false]);
         },
 
         isOpened: function() {
-            var isopened = this.btnSearch.pressed;
+            var isopened = this.btnSearchBar.pressed;
             /** coauthoring begin **/
             !isopened && (isopened = this.btnComments.pressed || this.btnChat.pressed);
             /** coauthoring end **/
@@ -311,6 +336,7 @@ define([
         },
 
         disableMenu: function(menu, disable) {
+            this.btnSearchBar.setDisabled(disable);
             this.btnThumbs.setDisabled(disable);
             this.btnAbout.setDisabled(disable);
             this.btnSupport.setDisabled(disable);
@@ -342,6 +368,13 @@ define([
                         this.onBtnMenuClick(this.btnComments);
                         this.onCoauthOptions();
                     }
+                } else if (menu == 'advancedsearch') {
+                    if (this.btnSearchBar.isVisible() &&
+                        !this.btnSearchBar.isDisabled() && !this.btnSearchBar.pressed) {
+                        this.btnSearchBar.toggle(true);
+                        this.onBtnMenuClick(this.btnSearchBar);
+                        this.onCoauthOptions();
+                    }
                 }
                 /** coauthoring end **/
             }

apps/presentationeditor/main/app_dev.js

@@ -144,6 +144,7 @@ require([
             'LeftMenu',
             'Main',
             'ViewTab',
+            'Search',
             'Common.Controllers.Fonts',
             'Common.Controllers.History'
             /** coauthoring begin **/
@@ -169,6 +170,7 @@ require([
             'presentationeditor/main/app/controller/LeftMenu',
             'presentationeditor/main/app/controller/Main',
             'presentationeditor/main/app/controller/ViewTab',
+            'presentationeditor/main/app/controller/Search',
             'presentationeditor/main/app/view/FileMenuPanels',
             'presentationeditor/main/app/view/ParagraphSettings',
             'presentationeditor/main/app/view/ImageSettings',

apps/spreadsheeteditor/main/app/controller/Search.js

@@ -53,7 +53,6 @@ define([
         ],
 
         initialize: function () {
-            console.log('init');
             this.addListeners({
                 'SearchBar': {
                     'search:back': _.bind(this.onQuerySearch, this, 'back'),