[PE mobile] Add text replacement

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

@@ -81,7 +81,8 @@ define([
                     'Search': {
                         'searchbar:show'        : this.onSearchbarShow,
                         'searchbar:hide'        : this.onSearchbarHide,
-                        'searchbar:render'      : this.onSearchbarRender
+                        'searchbar:render'      : this.onSearchbarRender,
+                        'searchbar:showsettings': this.onSearchbarSettings
                     }
                 });
             },
@@ -130,7 +131,8 @@ define([
 
             onSearchbarRender: function(bar) {
                 var me              = this,
-                    searchString    = Common.SharedSettings.get('search-search') || '';
+                    searchString    = Common.SharedSettings.get('search-search') || '',
+                    replaceString   = Common.SharedSettings.get('search-replace')|| '';
 
                 me.searchBar = uiApp.searchbar('.searchbar.document .searchbar.search', {
                     customSearch: true,
@@ -139,13 +141,46 @@ define([
                     onClear     : _.bind(me.onSearchClear, me)
                 });
 
+                me.replaceBar = uiApp.searchbar('.searchbar.document .searchbar.replace', {
+                    customSearch: true,
+                    onSearch    : _.bind(me.onReplaceChange, me),
+                    onEnable    : _.bind(me.onReplaceEnable, me),
+                    onClear     : _.bind(me.onReplaceClear, me)
+                });
+
                 me.searchPrev = $('.searchbar.document .prev');
                 me.searchNext = $('.searchbar.document .next');
+                me.replaceBtn = $('.searchbar.document .link.replace');
 
                 me.searchPrev.single('click', _.bind(me.onSearchPrev, me));
                 me.searchNext.single('click', _.bind(me.onSearchNext, me));
+                me.replaceBtn.single('click', _.bind(me.onReplace, me));
+
+                $$('.searchbar.document .link.replace').on('taphold', _.bind(me.onReplaceAll, me));
 
                 me.searchBar.search(searchString);
+                me.replaceBar.search(replaceString);
+            },
+
+            onSearchbarSettings: function (view) {
+                var strictBool = function (settingName) {
+                    var value = Common.SharedSettings.get(settingName);
+                    return !_.isUndefined(value) && (value === true);
+                };
+
+                var me              = this,
+                    isReplace       = strictBool('search-is-replace'),
+                    isCaseSensitive = strictBool('search-case-sensitive'),
+                    $pageSettings   = $('.page[data-page=search-settings]'),
+                    $inputType      = $pageSettings.find('input[name=search-type]'),
+                    $inputCase      = $pageSettings.find('#search-case-sensitive input:checkbox');
+
+                $inputType.val([isReplace ? 'replace' : 'search']);
+                $inputCase.prop('checked', isCaseSensitive);
+
+                // init events
+                $inputType.single('change',      _.bind(me.onTypeChange, me));
+                $inputCase.single('change',      _.bind(me.onCaseClick, me));
             },
 
             onSearchbarShow: function(bar) {
@@ -153,7 +188,7 @@ define([
             },
 
             onSearchEnable: function (bar) {
-                //
+                this.replaceBar.container.removeClass('searchbar-active');
             },
 
             onSearchbarHide: function(bar) {
@@ -166,7 +201,7 @@ define([
 
                 Common.SharedSettings.set('search-search', search.query);
 
-                _.each([me.searchPrev, me.searchNext], function(btn) {
+                _.each([me.searchPrev, me.searchNext, me.replaceBtn], function(btn) {
                     btn.toggleClass('disabled', isEmpty);
                 });
             },
@@ -177,6 +212,21 @@ define([
 //            document.activeElement.blur();
             },
 
+            onReplaceChange: function(replace) {
+                var me = this,
+                    isEmpty = (replace.query.trim().length < 1);
+
+                Common.SharedSettings.set('search-replace', replace.query);
+            },
+
+            onReplaceEnable: function (bar) {
+                this.searchBar.container.removeClass('searchbar-active');
+            },
+
+            onReplaceClear: function(replace) {
+                Common.SharedSettings.set('search-replace', '');
+            },
+
             onSearchPrev: function(btn) {
                 this.onQuerySearch(this.searchBar.query, 'back');
             },
@@ -185,9 +235,37 @@ define([
                 this.onQuerySearch(this.searchBar.query, 'next');
             },
 
+            onReplace: function (btn) {
+                this.onQueryReplace(this.searchBar.query, this.replaceBar.query);
+            },
+
+            onReplaceAll: function (e) {
+                var me = this,
+                    popover = [
+                        '<div class="popover" style="width: auto;">',
+                            '<div class="popover-inner">',
+                                '<div class="list-block">',
+                                    '<ul>',
+                                        '<li><a href="#" id="replace-all" class="item-link list-button">{0}</li>'.format(me.textReplaceAll),
+                                    '</ul>',
+                                '</div>',
+                            '</div>',
+                        '</div>'
+                    ].join('');
+
+                popover = uiApp.popover(popover, $$(e.currentTarget));
+
+                $('#replace-all').single('click', _.bind(function () {
+                    me.onQueryReplaceAll(this.searchBar.query, this.replaceBar.query);
+                    uiApp.closeModal(popover);
+                }, me))
+            },
+
             onQuerySearch: function(query, direction) {
+                var matchcase = Common.SharedSettings.get('search-case-sensitive') || false;
+
                 if (query && query.length) {
-                    if (!this.api.findText(query, direction != 'back')) {
+                    if (!this.api.findText(query, direction != 'back', matchcase)) {
                         var me = this;
                         uiApp.alert(
                             '',
@@ -200,9 +278,48 @@ define([
                 }
             },
 
+            onQueryReplace: function(search, replace) {
+                var matchcase = Common.SharedSettings.get('search-case-sensitive') || false;
+
+                if (search && search.length) {
+                    if (!this.api.asc_replaceText(search, replace, false, matchcase)) {
+                        var me = this;
+                        uiApp.alert(
+                            '',
+                            me.textNoTextFound,
+                            function () {
+                                me.searchBar.input.focus();
+                            }
+                        );
+                    }
+                }
+            },
+
+            onQueryReplaceAll: function(search, replace) {
+                var matchcase = Common.SharedSettings.get('search-case-sensitive') || false;
+
+                if (search && search.length) {
+                    this.api.asc_replaceText(search, replace, true, matchcase);
+                }
+            },
+
+            onTypeChange: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget),
+                    isReplace = ($target.val() === 'replace');
+
+                Common.SharedSettings.set('search-is-replace', isReplace);
+                $('.searchbar.document').toggleClass('replace', isReplace);
+            },
+
+            onCaseClick: function (e) {
+                Common.SharedSettings.set('search-case-sensitive', $(e.currentTarget).is(':checked'));
+            },
+
             // API handlers
 
-            textNoTextFound     : 'Text not found'
+            textNoTextFound     : 'Text not found',
+            textReplaceAll: 'Replace All'
         }
     })(), PE.Controllers.Search || {}))
 });

apps/presentationeditor/mobile/app/template/Search.template

@@ -2,19 +2,92 @@
 <div id="search-panel-view">
     <div class="searchbar document navbar navbar-hidden">
         <div class="navbar-inner">
-            <div class="left"></div>
+            <div class="left">
+                <a id="search-settings" href="#" class="link icon-only"><i class="icon icon-settings"></i></a>
+            </div>
             <div class="center">
                 <form class="searchbar search">
                     <div class="searchbar-input search">
                         <input type="search" placeholder="<%= scope.textSearch %>"><a href="#" class="searchbar-clear"></a>
                     </div>
                 </form>
+                <form class="searchbar replace">
+                    <div class="searchbar-input replace">
+                        <input type="search" placeholder="<%= scope.textReplace %>"><a href="#" class="searchbar-clear"></a>
+                    </div>
+                </form>
             </div>
             <div class="right">
+                <% if (phone) { %>
                 <p class="buttons-row">
                     <a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>
                     <a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>
                 </p>
+                <p class="buttons-row replace">
+                    <a href="#" class="link replace disabled"><%= scope.textReplace %></a>
+                </p>
+                <% } else { %>
+                <p class="buttons-row">
+                    <a href="#" class="link replace disabled"><%= scope.textReplace %></a>
+                    <a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>
+                    <a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>
+                </p>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!--Settings-->
+<div id="search-settings-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="center sliding"><%= isEdit ? scope.textFindAndReplace : scope.textFind %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link close-popup"><b><%= scope.textDone %></b></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="search-settings">
+        <div class="page-content">
+            <% if (isEdit) { %>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="search-type" value="search">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textFind %></div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="search-type" value="replace">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textFindAndReplace %></div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <% } %>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <div id="search-case-sensitive" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textCase %></div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>

apps/presentationeditor/mobile/app/view/Search.js

@@ -68,7 +68,7 @@ define([
             },
 
             initEvents: function() {
-                //
+                $('#search-settings').single('click', _.bind(this.showSettings, this));
             },
 
             // Render layout
@@ -88,6 +88,57 @@ define([
                 this.render();
             },
 
+            showSettings: function (e) {
+                var me = this;
+
+                uiApp.closeModal();
+
+                if (Common.SharedSettings.get('phone')) {
+                    me.picker = $$(uiApp.popup([
+                        '<div class="popup settings">',
+                            '<div class="view search-settings-view navbar-through">',
+                                _layout.find('#search-settings-view').html(),
+                            '</div>',
+                        '</div>'].join('')
+                    ))
+                } else {
+                    me.picker = uiApp.popover([
+                            '<div class="popover settings" style="width: 280px; height: 300px;">',
+                                '<div class="popover-angle"></div>',
+                                '<div class="popover-inner">',
+                                    '<div class="content-block">',
+                                        '<div class="view popover-view search-settings-view navbar-through" style="height: 300px;">',
+                                            _layout.find('#search-settings-view').html(),
+                                        '</div>',
+                                    '</div>',
+                                '</div>',
+                            '</div>'].join(''),
+                        $$('#search-settings')
+                    );
+
+                    // Prevent hide overlay. Conflict popover and modals.
+                    var $overlay = $('.modal-overlay');
+
+                    $$(me.picker).on('opened', function () {
+                        $overlay.on('removeClass', function () {
+                            if (!$overlay.hasClass('modal-overlay-visible')) {
+                                $overlay.addClass('modal-overlay-visible')
+                            }
+                        });
+                    }).on('close', function () {
+                        $overlay.off('removeClass');
+                        $overlay.removeClass('modal-overlay-visible')
+                    });
+                }
+
+                if (Common.SharedSettings.get('android')) {
+                    $$('.view.search-settings-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
+                    $$('.view.search-settings-view .navbar').prependTo('.view.search-settings-view > .pages > .page');
+                }
+
+                me.fireEvent('searchbar:showsettings', me);
+            },
+
             showSearch: function () {
                 var me = this,
                     searchBar = $$('.searchbar.document');
@@ -95,6 +146,10 @@ define([
                 if (searchBar.length < 1) {
                     $(me.el).find('.pages .page').first().prepend(_layout.find('#search-panel-view').html());
 
+                    // Show replace mode if needed
+                    var isReplace = Common.SharedSettings.get('search-is-replace');
+                    $('.searchbar.document').toggleClass('replace', !_.isUndefined(isReplace) && (isReplace === true));
+
                     me.fireEvent('searchbar:render', me);
                     me.fireEvent('searchbar:show', me);
 
@@ -133,7 +188,13 @@ define([
                 }
             },
 
-            textSearch: 'Search'
+            textFind: 'Find',
+            textFindAndReplace: 'Find and Replace',
+            textDone: 'Done',
+            textSearch: 'Search',
+            textReplace: 'Replace',
+            textCase: 'Case sensitive',
+            textHighlight: 'Highlight results'
         }
     })(), PE.Views.Search || {}))
 });

apps/presentationeditor/mobile/app/view/Settings.js

@@ -221,7 +221,8 @@ define([
             textSlideSize: 'Slide Size',
             mniSlideStandard: 'Standard (4:3)',
             mniSlideWide: 'Widescreen (16:9)',
-            textPoweredBy: 'Powered by'
+            textPoweredBy: 'Powered by',
+            textFindAndReplace: 'Find and Replace'
         }
     })(), PE.Views.Settings || {}))
 });

apps/presentationeditor/mobile/locale/en.json

@@ -213,6 +213,7 @@
   "PE.Controllers.Main.warnNoLicenseUsers": "This version of ONLYOFFICE Editors has certain limitations for concurrent users.<br>If you need more please consider purchasing a commercial license.",
   "PE.Controllers.Main.warnProcessRightsChange": "You have been denied the right to edit the file.",
   "PE.Controllers.Search.textNoTextFound": "Text not Found",
+  "PE.Controllers.Search.textReplaceAll": "Replace All",
   "PE.Controllers.Settings.notcriticalErrorTitle": "Warning",
   "PE.Controllers.Settings.txtLoading": "Loading...",
   "PE.Controllers.Toolbar.dlgLeaveMsgText": "You have unsaved changes in this document. Click 'Stay on this Page' to await the autosave of the document. Click 'Leave this Page' to discard all the unsaved changes.",
@@ -423,6 +424,11 @@
   "PE.Views.EditText.textSmallCaps": "Small Caps",
   "PE.Views.EditText.textStrikethrough": "Strikethrough",
   "PE.Views.EditText.textSubscript": "Subscript",
+  "PE.Views.Search.textCase": "Case sensitive",
+  "PE.Views.Search.textDone": "Done",
+  "PE.Views.Search.textFind": "Find",
+  "PE.Views.Search.textFindAndReplace": "Find and Replace",
+  "PE.Views.Search.textReplace": "Replace",
   "PE.Views.Search.textSearch": "Search",
   "PE.Views.Settings.mniSlideStandard": "Standard (4:3)",
   "PE.Views.Settings.mniSlideWide": "Widescreen (16:9)",
@@ -437,6 +443,7 @@
   "PE.Views.Settings.textEditPresent": "Edit Presentation",
   "PE.Views.Settings.textEmail": "email",
   "PE.Views.Settings.textFind": "Find",
+  "PE.Views.Settings.textFindAndReplace": "Find and Replace",
   "PE.Views.Settings.textHelp": "Help",
   "PE.Views.Settings.textLoading": "Loading...",
   "PE.Views.Settings.textPoweredBy": "Powered by",

apps/presentationeditor/mobile/resources/css/app-ios.css

@@ -6239,6 +6239,16 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   background: url('../../../../common/mobile/resources/img/about/onlyoffice.svg') no-repeat center;
   margin-top: 20px;
 }
+.tablet .searchbar.document.replace .center .searchbar:first-child {
+  margin-right: 10px;
+}
+.tablet .searchbar.document.replace .center .replace {
+  display: flex;
+}
+.tablet .searchbar.document.replace .right .replace {
+  display: flex;
+  margin: 0 10px;
+}
 .tablet .searchbar.document .center {
   width: 100%;
 }
@@ -6246,9 +6256,30 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
   background: inherit;
   padding: 0;
 }
+.tablet .searchbar.document .center .replace {
+  display: none;
+}
 .tablet .searchbar.document .right .prev {
   margin-left: 0;
 }
+.tablet .searchbar.document .right .replace {
+  display: none;
+}
+.phone .searchbar.document.replace {
+  height: 88px;
+}
+.phone .searchbar.document.replace .left {
+  margin-top: -44px;
+}
+.phone .searchbar.document.replace .center .searchbar-input {
+  margin: 8px 0;
+}
+.phone .searchbar.document.replace .center .replace {
+  display: block;
+}
+.phone .searchbar.document.replace .right > .replace {
+  display: flex;
+}
 .phone .searchbar.document .left,
 .phone .searchbar.document .center,
 .phone .searchbar.document .right {
@@ -6264,9 +6295,15 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after
 .phone .searchbar.document .center .searchbar:after {
   content: none;
 }
+.phone .searchbar.document .center .replace {
+  display: none;
+}
 .phone .searchbar.document .right > p {
   margin: 0;
 }
+.phone .searchbar.document .right > .replace {
+  display: none;
+}
 .searchbar.document {
   background: #e4e4e6;
 }

apps/presentationeditor/mobile/resources/css/app-material.css

@@ -5838,8 +5838,14 @@ html.phone .document-menu .list-block .item-link {
 .about .logo {
   background: url('../../../../common/mobile/resources/img/about/onlyoffice.svg') no-repeat center;
 }
-.tablet .searchbar.document .left {
+.tablet .searchbar.document.replace .center > .replace {
-  min-width: 15px;
+  display: flex;
+}
+.tablet .searchbar.document.replace .right .replace {
+  display: flex;
+}
+.tablet .searchbar.document.replace .link.replace {
+  font-size: 16px;
 }
 .tablet .searchbar.document .center {
   width: 100%;
@@ -5853,14 +5859,32 @@ html.phone .document-menu .list-block .item-link {
 .tablet .searchbar.document .center .searchbar.search {
   padding: 0;
 }
+.tablet .searchbar.document .center > .replace {
+  display: none;
+}
+.tablet .searchbar.document .right .replace {
+  display: none;
+}
+.phone .searchbar.document.replace {
+  height: 96px;
+}
+.phone .searchbar.document.replace .link.replace {
+  font-size: 16px;
+}
+.phone .searchbar.document.replace .left {
+  margin-top: -48px;
+}
+.phone .searchbar.document.replace .center .replace {
+  display: block;
+}
+.phone .searchbar.document.replace .right > .replace {
+  display: flex;
+}
 .phone .searchbar.document .left,
 .phone .searchbar.document .center,
 .phone .searchbar.document .right {
   flex-direction: column;
 }
-.phone .searchbar.document .left {
-  min-width: 15px;
-}
 .phone .searchbar.document .center {
   width: 100%;
   margin: 0;
@@ -5869,12 +5893,18 @@ html.phone .document-menu .list-block .item-link {
 .phone .searchbar.document .center .searchbar {
   padding: 0;
 }
+.phone .searchbar.document .center .replace {
+  display: none;
+}
 .phone .searchbar.document .right > p {
   margin: 0;
 }
 .phone .searchbar.document .right > p a.link {
   height: 48px;
 }
+.phone .searchbar.document .right > .replace {
+  display: none;
+}
 i.icon.icon-expand-up {
   width: 17px;
   height: 17px;

apps/presentationeditor/mobile/resources/less/ios/_search.less

@@ -1,6 +1,27 @@
 // Search
 
 .tablet {
+  // Replace mode
+  .searchbar.document.replace {
+    .center {
+      .searchbar:first-child {
+        margin-right: 10px;
+      }
+
+      .replace {
+        display: flex;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+        margin: 0 10px;
+      }
+    }
+  }
+
+  // Search mode
   .searchbar.document {
     .center {
       width: 100%;
@@ -9,17 +30,51 @@
         background: inherit;
         padding: 0;
       }
+
+      .replace {
+        display: none;
+      }
     }
 
     .right {
       .prev {
         margin-left: 0;
       }
+
+      .replace {
+        display: none;
+      }
     }
   }
 }
 
 .phone {
+  // Replace mode
+  .searchbar.document.replace {
+    height: 88px;
+
+    .left {
+      margin-top: -44px;
+    }
+
+    .center {
+      .searchbar-input {
+        margin: 8px 0;
+      }
+
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      > .replace {
+        display: flex;
+      }
+    }
+  }
+
+  // Search mode
   .searchbar.document {
     .left,
     .center,
@@ -38,12 +93,20 @@
           content: none;
         }
       }
+
+      .replace {
+        display: none;
+      }
     }
 
     .right {
       > p {
         margin: 0;
       }
+
+      > .replace {
+        display: none;
+      }
     }
   }
 }

apps/presentationeditor/mobile/resources/less/material/_search.less

@@ -1,11 +1,27 @@
 // Search
 
 .tablet {
-  .searchbar.document {
+  // Replace mode
-    .left {
+  .searchbar.document.replace {
-      min-width: 15px;
+    .center {
+      > .replace {
+        display: flex;
+      }
     }
 
+    .right {
+      .replace {
+        display: flex;
+      }
+    }
+
+    .link.replace {
+      font-size: 16px;
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
     .center {
       width: 100%;
       display: flex;
@@ -19,6 +35,16 @@
           padding: 0;
         }
       }
+
+      > .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      .replace {
+        display: none;
+      }
     }
   }
 }
@@ -26,6 +52,32 @@
 @phoneSearchHeight: 48px;
 
 .phone {
+  // Replace mode
+  .searchbar.document.replace {
+    height: @phoneSearchHeight * 2;
+
+    .link.replace {
+      font-size: 16px;
+    }
+
+    .left {
+      margin-top: -@phoneSearchHeight;
+    }
+
+    .center {
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      > .replace {
+        display: flex;
+      }
+    }
+  }
+
+  // Search mode
   .searchbar.document {
     .left,
     .center,
@@ -34,7 +86,7 @@
     }
 
     .left {
-      min-width: 15px;
+      //min-width: 15px;
     }
 
     .center {
@@ -45,6 +97,10 @@
       .searchbar {
         padding: 0;
       }
+
+      .replace {
+        display: none;
+      }
     }
 
     .right {
@@ -55,6 +111,10 @@
           height: @phoneSearchHeight;
         }
       }
+
+      > .replace {
+        display: none;
+      }
     }
   }
 }