From fb589034d9ddb4ecfdcda6b68180a1a7ab730c03 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Tue, 22 Nov 2016 10:48:36 +0300 Subject: [PATCH] [PE mobile] Add search. --- apps/presentationeditor/mobile/app-dev.js | 4 +- .../mobile/app/controller/Search.js | 208 ++++++++++++++++++ .../mobile/app/template/Search.template | 21 ++ .../mobile/app/view/Search.js | 137 ++++++++++++ .../mobile/resources/css/app-ios.css | 37 ---- .../mobile/resources/css/app-material.css | 36 --- .../mobile/resources/less/ios/_search.less | 63 ------ .../resources/less/material/_search.less | 68 ------ 8 files changed, 368 insertions(+), 206 deletions(-) create mode 100644 apps/presentationeditor/mobile/app/controller/Search.js create mode 100644 apps/presentationeditor/mobile/app/template/Search.template create mode 100644 apps/presentationeditor/mobile/app/view/Search.js diff --git a/apps/presentationeditor/mobile/app-dev.js b/apps/presentationeditor/mobile/app-dev.js index 95273aedb..8353680b8 100644 --- a/apps/presentationeditor/mobile/app-dev.js +++ b/apps/presentationeditor/mobile/app-dev.js @@ -135,7 +135,7 @@ require([ controllers : [ 'Editor', 'Toolbar', - // 'Search', + 'Search', 'Main' // 'DocumentHolder', // 'Settings', @@ -200,7 +200,7 @@ require([ 'common/main/lib/util/utils', 'presentationeditor/mobile/app/controller/Editor', 'presentationeditor/mobile/app/controller/Toolbar', - // 'presentationeditor/mobile/app/controller/Search', + 'presentationeditor/mobile/app/controller/Search', 'presentationeditor/mobile/app/controller/Main' // 'presentationeditor/mobile/app/controller/DocumentHolder', // 'presentationeditor/mobile/app/controller/Settings', diff --git a/apps/presentationeditor/mobile/app/controller/Search.js b/apps/presentationeditor/mobile/app/controller/Search.js new file mode 100644 index 000000000..7892c9f50 --- /dev/null +++ b/apps/presentationeditor/mobile/app/controller/Search.js @@ -0,0 +1,208 @@ +/* + * + * (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 + * + */ + +/** + * Search.js + * Presentation Editor + * + * Created by Alexander Yuzhin on 11/22/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + + +define([ + 'core', + 'jquery', + 'underscore', + 'backbone', + 'presentationeditor/mobile/app/view/Search' +], function (core, $, _, Backbone) { + 'use strict'; + + PE.Controllers.Search = Backbone.Controller.extend(_.extend((function() { + // private + + var _isShow = false, + _startPoint = {}; + + var pointerEventToXY = function(e){ + var out = {x:0, y:0}; + if(e.type == 'touchstart' || e.type == 'touchend'){ + var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + out.x = touch.pageX; + out.y = touch.pageY; + } else if (e.type == 'mousedown' || e.type == 'mouseup') { + out.x = e.pageX; + out.y = e.pageY; + } + return out; + }; + + return { + models: [], + collections: [], + views: [ + 'Search' + ], + + initialize: function() { + this.addListeners({ + 'Search': { + 'searchbar:show' : this.onSearchbarShow, + 'searchbar:hide' : this.onSearchbarHide, + 'searchbar:render' : this.onSearchbarRender + } + }); + }, + + setApi: function(api) { + this.api = api; + }, + + setMode: function (mode) { + this.getView('Search').setMode(mode); + }, + + onLaunch: function() { + var me = this; + me.createView('Search').render(); + + $('#editor_sdk').single('mousedown touchstart', _.bind(me.onEditorTouchStart, me)); + $('#editor_sdk').single('mouseup touchend', _.bind(me.onEditorTouchEnd, me)); + }, + + showSearch: function () { + this.getView('Search').showSearch(); + }, + + hideSearch: function () { + this.getView('Search').hideSearch(); + }, + + // Handlers + + onEditorTouchStart: function (e) { + _startPoint = pointerEventToXY(e); + }, + + onEditorTouchEnd: function (e) { + var _endPoint = pointerEventToXY(e); + + if (_isShow) { + var distance = Math.sqrt((_endPoint.x -= _startPoint.x) * _endPoint.x + (_endPoint.y -= _startPoint.y) * _endPoint.y); + + if (distance < 1) { + this.hideSearch(); + } + } + }, + + onSearchbarRender: function(bar) { + var me = this, + searchString = Common.SharedSettings.get('search-search') || ''; + + me.searchBar = uiApp.searchbar('.searchbar.document .searchbar.search', { + customSearch: true, + onSearch : _.bind(me.onSearchChange, me), + onEnable : _.bind(me.onSearchEnable, me), + onClear : _.bind(me.onSearchClear, me) + }); + + me.searchPrev = $('.searchbar.document .prev'); + me.searchNext = $('.searchbar.document .next'); + + me.searchPrev.single('click', _.bind(me.onSearchPrev, me)); + me.searchNext.single('click', _.bind(me.onSearchNext, me)); + + me.searchBar.search(searchString); + }, + + onSearchbarShow: function(bar) { + _isShow = true; + }, + + onSearchEnable: function (bar) { + // + }, + + onSearchbarHide: function(bar) { + _isShow = false; + }, + + onSearchChange: function(search) { + var me = this, + isEmpty = (search.query.trim().length < 1); + + Common.SharedSettings.set('search-search', search.query); + + _.each([me.searchPrev, me.searchNext], function(btn) { + btn.toggleClass('disabled', isEmpty); + }); + }, + + onSearchClear: function(search) { + Common.SharedSettings.set('search-search', ''); +// window.focus(); +// document.activeElement.blur(); + }, + + onSearchPrev: function(btn) { + this.onQuerySearch(this.searchBar.query, 'back'); + }, + + onSearchNext: function(btn) { + this.onQuerySearch(this.searchBar.query, 'next'); + }, + + onQuerySearch: function(query, direction) { + if (query && query.length) { + if (!this.api.findText(query, direction != 'back')) { + var me = this; + uiApp.alert( + '', + me.textNoTextFound, + function () { + me.searchBar.input.focus(); + } + ); + } + } + }, + + // API handlers + + textNoTextFound : 'Text not found' + } + })(), PE.Controllers.Search || {})) +}); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/template/Search.template b/apps/presentationeditor/mobile/app/template/Search.template new file mode 100644 index 000000000..a7ff591db --- /dev/null +++ b/apps/presentationeditor/mobile/app/template/Search.template @@ -0,0 +1,21 @@ + +
+
+
+
+
+
+
+ +
+
+
+
+

+ + +

+
+
+
+
\ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/Search.js b/apps/presentationeditor/mobile/app/view/Search.js new file mode 100644 index 000000000..10e230efb --- /dev/null +++ b/apps/presentationeditor/mobile/app/view/Search.js @@ -0,0 +1,137 @@ +/* + * + * (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 + * + */ + +/** + * Search.js + * Presentation Editor + * + * Created by Alexander Yuzhin on 11/22/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'text!presentationeditor/mobile/app/template/Search.template', + 'jquery', + 'underscore', + 'backbone' +], function (searchTemplate, $, _, Backbone) { + 'use strict'; + + PE.Views.Search = Backbone.View.extend(_.extend((function() { + // private + var _isEdit = false, + _layout; + + return { + el: '.view-main', + + // Compile our stats template + template: _.template(searchTemplate), + + // Delegated events for creating new items, and clearing completed ones. + events: {}, + + // Set innerHTML and get the references to the DOM elements + initialize: function () { + this.on('searchbar:show', _.bind(this.initEvents, this)); + }, + + initEvents: function() { + // + }, + + // Render layout + render: function () { + _layout = $('
').append(this.template({ + android : Common.SharedSettings.get('android'), + phone : Common.SharedSettings.get('phone'), + isEdit : _isEdit, + scope : this + })); + + return this; + }, + + setMode: function (mode) { + _isEdit = (mode === 'edit'); + this.render(); + }, + + showSearch: function () { + var me = this, + searchBar = $$('.searchbar.document'); + + if (searchBar.length < 1) { + $(me.el).find('.pages .page').first().prepend(_layout.find('#search-panel-view').html()); + + me.fireEvent('searchbar:render', me); + me.fireEvent('searchbar:show', me); + + searchBar = $$('.searchbar.document'); + + _.defer(function() { + uiApp.showNavbar(searchBar); + + searchBar.transitionEnd(function () { + if (!searchBar.hasClass('navbar-hidden')) { + $('.searchbar.search input').focus(); + } + }); + }, 10); + } + }, + + hideSearch: function () { + var me = this, + searchBar = $$('.searchbar.document'); + + if (searchBar.length > 0) { + // Animating + if (searchBar.hasClass('.navbar-hidding')) { + return; + } + + _.defer(function() { + searchBar.transitionEnd(function () { + me.fireEvent('searchbar:hide', me); + searchBar.remove(); + }); + + uiApp.hideNavbar(searchBar); + }, 10); + } + }, + } + })(), PE.Views.Search || {})) +}); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 57185bcdd..59620473b 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6233,16 +6233,6 @@ html.pixel-ratio-3 .color-palette a { background-size: auto; } } -.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%; } @@ -6250,30 +6240,9 @@ html.pixel-ratio-3 .color-palette a { 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 { @@ -6293,15 +6262,9 @@ html.pixel-ratio-3 .color-palette a { .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; } diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index c213d08fb..223fc8886 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -5836,15 +5836,6 @@ html.pixel-ratio-3 .color-palette a { background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png'); } } -.tablet .searchbar.document.replace .center > .replace { - 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%; display: flex; @@ -5857,27 +5848,6 @@ html.pixel-ratio-3 .color-palette a { .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 { @@ -5891,18 +5861,12 @@ html.pixel-ratio-3 .color-palette a { .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; diff --git a/apps/presentationeditor/mobile/resources/less/ios/_search.less b/apps/presentationeditor/mobile/resources/less/ios/_search.less index 5d509e859..c285d3759 100644 --- a/apps/presentationeditor/mobile/resources/less/ios/_search.less +++ b/apps/presentationeditor/mobile/resources/less/ios/_search.less @@ -1,27 +1,6 @@ // 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%; @@ -30,51 +9,17 @@ 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, @@ -98,20 +43,12 @@ content: none; } } - - .replace { - display: none; - } } .right { > p { margin: 0; } - - > .replace { - display: none; - } } } } diff --git a/apps/presentationeditor/mobile/resources/less/material/_search.less b/apps/presentationeditor/mobile/resources/less/material/_search.less index 93a72ea17..08786cfea 100644 --- a/apps/presentationeditor/mobile/resources/less/material/_search.less +++ b/apps/presentationeditor/mobile/resources/less/material/_search.less @@ -1,26 +1,6 @@ // Search .tablet { - // Replace mode - .searchbar.document.replace { - .center { - > .replace { - display: flex; - } - } - - .right { - .replace { - display: flex; - } - } - - .link.replace { - font-size: 16px; - } - } - - // Search mode .searchbar.document { .center { width: 100%; @@ -35,16 +15,6 @@ padding: 0; } } - - > .replace { - display: none; - } - } - - .right { - .replace { - display: none; - } } } } @@ -52,32 +22,6 @@ @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, @@ -85,10 +29,6 @@ flex-direction: column; } - .left { - // - } - .center { width: 100%; margin: 0; @@ -97,10 +37,6 @@ .searchbar { padding: 0; } - - .replace { - display: none; - } } .right { @@ -111,10 +47,6 @@ height: @phoneSearchHeight; } } - - > .replace { - display: none; - } } } } \ No newline at end of file