From 70ca82b0df0e0453be6ec5a70c3476713fabf2aa Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 17 Jul 2019 13:36:37 +0300 Subject: [PATCH 001/193] Create document api in viewport controller --- .../main/app/controller/Main.js | 68 ++++++++-------- .../main/app/controller/Viewport.js | 9 +++ .../main/app/controller/Main.js | 78 +++++++++---------- .../main/app/controller/Toolbar.js | 2 +- .../main/app/controller/Viewport.js | 9 +++ .../main/app/controller/Main.js | 57 +++++++------- .../main/app/controller/Viewport.js | 11 +++ 7 files changed, 126 insertions(+), 108 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index 28b0d65d7..266e7e139 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -97,38 +97,9 @@ define([ 'settings:apply': _.bind(this.applySettings, this) } }); - }, - onLaunch: function() { - var me = this; - - this.stackLongActions = new Common.IrregularStack({ - strongCompare : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;}, - weakCompare : function(obj1, obj2){return obj1.type === obj2.type;} - }); - - this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false}; - this.languages = null; - this.translationTable = []; - this.isModalShowed = 0; - // Initialize viewport - - if (!Common.Utils.isBrowserSupported()){ - Common.Utils.showBrowserRestriction(); - Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText); - return; - } - - var value = Common.localStorage.getItem("de-settings-fontrender"); - if (value === null) - window.devicePixelRatio > 1 ? value = '1' : '0'; - Common.Utils.InternalSettings.set("de-settings-fontrender", value); - - // Initialize api - - window["flat_desine"] = true; - - var styleNames = ['Normal', 'No Spacing', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', + var me = this, + styleNames = ['Normal', 'No Spacing', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6', 'Heading 7', 'Heading 8', 'Heading 9', 'Title', 'Subtitle', 'Quote', 'Intense Quote', 'List Paragraph', 'footnote text'], translate = { 'Series': this.txtSeries, @@ -164,16 +135,39 @@ define([ "Hyperlink": this.txtHyperlink }; styleNames.forEach(function(item){ - translate[item] = me.translationTable[item] = me['txtStyle_' + item.replace(/ /g, '_')] || item; + translate[item] = me['txtStyle_' + item.replace(/ /g, '_')] || item; }); - me.translationTable['Header'] = this.txtHeader; - me.translationTable['Footer'] = this.txtFooter; + me.translationTable = translate; + }, - this.api = new Asc.asc_docs_api({ - 'id-view' : 'editor_sdk', - 'translate': translate + onLaunch: function() { + var me = this; + + this.stackLongActions = new Common.IrregularStack({ + strongCompare : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;}, + weakCompare : function(obj1, obj2){return obj1.type === obj2.type;} }); + this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false}; + this.languages = null; + this.isModalShowed = 0; + // Initialize viewport + + if (!Common.Utils.isBrowserSupported()){ + Common.Utils.showBrowserRestriction(); + Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText); + return; + } + + var value = Common.localStorage.getItem("de-settings-fontrender"); + if (value === null) + window.devicePixelRatio > 1 ? value = '1' : '0'; + Common.Utils.InternalSettings.set("de-settings-fontrender", value); + + // Initialize api + window["flat_desine"] = true; + this.api = this.getApplication().getController('Viewport').getApi(); + if (this.api){ this.api.SetDrawingFreeze(true); switch (value) { diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js index eef6af3e7..54ad031fd 100644 --- a/apps/documenteditor/main/app/controller/Viewport.js +++ b/apps/documenteditor/main/app/controller/Viewport.js @@ -116,11 +116,20 @@ define([ Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this)); }, + getApi: function() { + return this.api; + }, // When our application is ready, lets get started onLaunch: function() { // Create and render main view this.viewport = this.createView('Viewport').render(); + + this.api = new Asc.asc_docs_api({ + 'id-view' : 'editor_sdk', + 'translate': this.getApplication().getController('Main').translationTable + }); + this.header = this.createView('Common.Views.Header', { headerCaption: 'Document Editor', storeUsers: DE.getCollection('Common.Collections.Users') diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js index a16b70921..940a7106c 100644 --- a/apps/presentationeditor/main/app/controller/Main.js +++ b/apps/presentationeditor/main/app/controller/Main.js @@ -96,42 +96,10 @@ define([ 'settings:apply': _.bind(this.applySettings, this) } }); - }, - onLaunch: function() { - var me = this; - - this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false}; - this.languages = null; - this.translationTable = []; - this.isModalShowed = 0; - - window.storagename = 'presentation'; - - this.stackLongActions = new Common.IrregularStack({ - strongCompare : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;}, - weakCompare : function(obj1, obj2){return obj1.type === obj2.type;} - }); - - // Initialize viewport - - if (!Common.Utils.isBrowserSupported()){ - Common.Utils.showBrowserRestriction(); - Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText); - return; - } - - var value = Common.localStorage.getItem("pe-settings-fontrender"); - if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3'; - Common.Utils.InternalSettings.set("pe-settings-fontrender", value); - - // Initialize api - - window["flat_desine"] = true; - - this.api = new Asc.asc_docs_api({ - 'id-view' : 'editor_sdk', - 'translate': { + var me = this, + themeNames = ['blank', 'pixel', 'classic', 'official', 'green', 'lines', 'office', 'safari', 'dotted', 'corner', 'turtle'], + translate = { 'Series': this.txtSeries, 'Diagram Title': this.txtDiagramTitle, 'X Axis': this.txtXAxis, @@ -154,13 +122,43 @@ define([ 'Loading': this.txtLoading, 'Click to add notes': this.txtAddNotes, 'Click to add first slide': this.txtAddFirstSlide - } + }; + + themeNames.forEach(function(item){ + translate[item] = me['txtTheme_' + item.replace(/ /g, '_')] || item; + }); + me.translationTable = translate; + }, + + onLaunch: function() { + var me = this; + + this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false}; + this.languages = null; + this.isModalShowed = 0; + + window.storagename = 'presentation'; + + this.stackLongActions = new Common.IrregularStack({ + strongCompare : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;}, + weakCompare : function(obj1, obj2){return obj1.type === obj2.type;} }); - var themeNames = ['blank', 'pixel', 'classic', 'official', 'green', 'lines', 'office', 'safari', 'dotted', 'corner', 'turtle']; - themeNames.forEach(function(item){ - me.translationTable[item] = me['txtTheme_' + item.replace(/ /g, '_')] || item; - }); + // Initialize viewport + + if (!Common.Utils.isBrowserSupported()){ + Common.Utils.showBrowserRestriction(); + Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText); + return; + } + + var value = Common.localStorage.getItem("pe-settings-fontrender"); + if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3'; + Common.Utils.InternalSettings.set("pe-settings-fontrender", value); + + // Initialize api + window["flat_desine"] = true; + this.api = this.getApplication().getController('Viewport').getApi(); if (this.api){ this.api.SetDrawingFreeze(true); diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 2692b5750..953e05705 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -1942,7 +1942,7 @@ define([ this._state.clrtext_asccolor = undefined; }, - _onInitEditorThemes: function(editorThemes, documentThemes) { + _onInitEditorThemes: function(editorThemes/*array */, documentThemes) { var me = this; window.styles_loaded = false; diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js index 36aa2aab6..50de61e27 100644 --- a/apps/presentationeditor/main/app/controller/Viewport.js +++ b/apps/presentationeditor/main/app/controller/Viewport.js @@ -123,11 +123,20 @@ define([ Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this)); }, + getApi: function() { + return this.api; + }, // When our application is ready, lets get started onLaunch: function() { // Create and render main view this.viewport = this.createView('Viewport').render(); + + this.api = new Asc.asc_docs_api({ + 'id-view' : 'editor_sdk', + 'translate': this.getApplication().getController('Main').translationTable + }); + this.header = this.createView('Common.Views.Header', { headerCaption: 'Presentation Editor', storeUsers: PE.getCollection('Common.Collections.Users') diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index b07853775..7ee72540f 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -99,6 +99,32 @@ define([ 'settings:apply': _.bind(this.applySettings, this) } }); + + var me = this, + styleNames = ['Normal', 'Neutral', 'Bad', 'Good', 'Input', 'Output', 'Calculation', 'Check Cell', 'Explanatory Text', 'Note', 'Linked Cell', 'Warning Text', + 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Title', 'Total', 'Currency', 'Percent', 'Comma'], + translate = { + 'Series': this.txtSeries, + 'Diagram Title': this.txtDiagramTitle, + 'X Axis': this.txtXAxis, + 'Y Axis': this.txtYAxis, + 'Your text here': this.txtArt, + 'Table': this.txtTable, + 'Print_Area': this.txtPrintArea + }; + styleNames.forEach(function(item){ + translate[item] = me['txtStyle_' + item.replace(/ /g, '_')] || item; + }); + translate['Currency [0]'] = me.txtStyle_Currency + ' [0]'; + translate['Comma [0]'] = me.txtStyle_Comma + ' [0]'; + + for (var i=1; i<7; i++) { + translate['Accent'+i] = me.txtAccent + i; + translate['20% - Accent'+i] = '20% - ' + me.txtAccent + i; + translate['40% - Accent'+i] = '40% - ' + me.txtAccent + i; + translate['60% - Accent'+i] = '60% - ' + me.txtAccent + i; + } + me.translationTable = translate; }, onLaunch: function() { @@ -106,7 +132,6 @@ define([ var me = this; this._state = {isDisconnected: false, usersCount: 1, fastCoauth: true, lostEditingRights: false, licenseType: false}; - this.translationTable = []; this.isModalShowed = 0; if (!Common.Utils.isBrowserSupported()){ @@ -123,35 +148,7 @@ define([ Common.Utils.InternalSettings.set("sse-settings-fontrender", value); // Initialize api - var styleNames = ['Normal', 'Neutral', 'Bad', 'Good', 'Input', 'Output', 'Calculation', 'Check Cell', 'Explanatory Text', 'Note', 'Linked Cell', 'Warning Text', - 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Title', 'Total', 'Currency', 'Percent', 'Comma'], - translate = { - 'Series': this.txtSeries, - 'Diagram Title': this.txtDiagramTitle, - 'X Axis': this.txtXAxis, - 'Y Axis': this.txtYAxis, - 'Your text here': this.txtArt, - 'Table': this.txtTable, - 'Print_Area': this.txtPrintArea - }; - styleNames.forEach(function(item){ - translate[item] = me.translationTable[item] = me['txtStyle_' + item.replace(/ /g, '_')] || item; - }); - translate['Currency [0]'] = me.translationTable['Currency [0]'] = me.txtStyle_Currency + ' [0]'; - translate['Comma [0]'] = me.translationTable['Comma [0]'] = me.txtStyle_Comma + ' [0]'; - - for (var i=1; i<7; i++) { - translate['Accent'+i] = me.translationTable['Accent'+i] = me.txtAccent + i; - translate['20% - Accent'+i] = me.translationTable['20% - Accent'+i] = '20% - ' + me.txtAccent + i; - translate['40% - Accent'+i] = me.translationTable['40% - Accent'+i] = '40% - ' + me.txtAccent + i; - translate['60% - Accent'+i] = me.translationTable['60% - Accent'+i] = '60% - ' + me.txtAccent + i; - } - - this.api = new Asc.spreadsheet_api({ - 'id-view' : 'editor_sdk', - 'id-input' : 'ce-cell-content', - 'translate': translate - }); + this.api = this.getApplication().getController('Viewport').getApi(); this.api.asc_setFontRenderingMode(parseInt(value)); this.api.asc_registerCallback('asc_onOpenDocumentProgress', _.bind(this.onOpenDocument, this)); diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js index 191521268..e1d3bd42a 100644 --- a/apps/spreadsheeteditor/main/app/controller/Viewport.js +++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js @@ -130,6 +130,10 @@ define([ Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this)); }, + getApi: function() { + return this.api; + }, + onAppShowed: function (config) { var me = this; me.appConfig = config; @@ -318,6 +322,13 @@ define([ onLaunch: function() { // Create and render main view this.viewport = this.createView('Viewport').render(); + + this.api = new Asc.spreadsheet_api({ + 'id-view' : 'editor_sdk', + 'id-input' : 'ce-cell-content', + 'translate': this.getApplication().getController('Main').translationTable + }); + this.header = this.createView('Common.Views.Header', { headerCaption: 'Spreadsheet Editor', storeUsers: SSE.getCollection('Common.Collections.Users') From 1339e29e10b07cc3a902123ce976dc235c440e18 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Fri, 19 Jul 2019 16:05:44 +0300 Subject: [PATCH 002/193] DE skeleton loader --- .../main/app/controller/Main.js | 2 + apps/documenteditor/main/index.html | 211 ++++++------------ .../main/resources/less/app.less | 24 +- 3 files changed, 92 insertions(+), 145 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index 266e7e139..f6e7db4fb 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -168,6 +168,8 @@ define([ window["flat_desine"] = true; this.api = this.getApplication().getController('Viewport').getApi(); + $('#editor_sdk').append('
' + '
'.repeat(20) + '
'); + if (this.api){ this.api.SetDrawingFreeze(true); switch (value) { diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index 0e92951fb..dfe7c9797 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -22,157 +22,91 @@ z-index: 10000; } - .loader-page { + .loadmask { width: 100%; - height: 170px; - bottom: 42%; - position: absolute; - text-align: center; - line-height: 10px; + height: 100%; } - .loader-logo { - max-height: 160px; - margin-bottom: 10px; - } - - .loader-page-romb { - width: 40px; - display: inline-block; - } - - .loader-page-text { + .loadmask > .brendpanel { width: 100%; - bottom: 42%; - position: absolute; - text-align: center; - color: #888; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 20px; + height: 56px; + background: #446995; } - .loader-page-text-loading { - font-size: 14px; + .loadmask > .brendpanel > div { + display: flex; + align-items: center; } - .loader-page-text-customer { - font-size: 16px; - margin-bottom: 5px; + .loadmask > .brendpanel .spacer { + margin-left: auto; } - .romb { - width: 40px; - height: 40px; - -webkit-transform: rotate(135deg) skew(20deg, 20deg); - -moz-transform: rotate(135deg) skew(20deg, 20deg); - -ms-transform: rotate(135deg) skew(20deg, 20deg); - -o-transform: rotate(135deg) skew(20deg, 20deg); - position: absolute; - background: red; - border-radius: 6px; - -webkit-animation: movedown 3s infinite ease; - -moz-animation: movedown 3s infinite ease; - -ms-animation: movedown 3s infinite ease; - -o-animation: movedown 3s infinite ease; - animation: movedown 3s infinite ease; + .loadmask > .brendpanel .loading-logo { + background: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png) 50% 50% no-repeat; + width: 110px; + height: 20px; } - #blue { - z-index: 3; - background: #55bce6; - -webkit-animation-name: blue; - -moz-animation-name: blue; - -ms-animation-name: blue; - -o-animation-name: blue; - animation-name: blue; + .loadmask > .brendpanel .circle { + vertical-align: middle; + width: 20px; + height: 20px; + border-radius: 12px; + margin: 4px 10px; + background: rgba(255, 255, 255, 0.2); } - #red { - z-index:1; - background: #de7a59; - -webkit-animation-name: red; - -moz-animation-name: red; - -ms-animation-name: red; - -o-animation-name: red; - animation-name: red; + .loadmask > .brendpanel .rect { + vertical-align: middle; + width: 50px; + height: 12px; + border-radius: 3px; + margin: 0 10px; + background: rgba(255, 255, 255, 0.2); } - #green { - z-index: 2; - background: #a1cb5c; - -webkit-animation-name: green; - -moz-animation-name: green; - -ms-animation-name: green; - -o-animation-name: green; - animation-name: green; + .loadmask > .placeholder { + background: #fbfbfb; + width: 796px; + margin: 112px auto; + height: 100%; + border: 1px solid #dfdfdf; + padding-top: 50px; } - @-webkit-keyframes red { - 0% { top:120px; background: #de7a59; } - 10% { top:120px; background: #F2CBBF; } - 14% { background: #f4f4f4; top:120px; } - 15% { background: #f4f4f4; top:0;} - 20% { background: #E6E4E4; } - 30% { background: #D2D2D2; } - 40% { top:120px; } - 100% { top:120px; background: #de7a59; } + .loadmask > .placeholder > .line { + height: 15px; + margin: 30px 80px; + background: #e2e2e2; + overflow: hidden; + position: relative; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; } - @keyframes red { - 0% { top:120px; background: #de7a59; } - 10% { top:120px; background: #F2CBBF; } - 14% { background: #f4f4f4; top:120px; } - 15% { background: #f4f4f4; top:0; } - 20% { background: #E6E4E4; } - 30% { background: #D2D2D2; } - 40% { top:120px; } - 100% { top:120px; background: #de7a59; } + @keyframes flickerAnimation { + 0% { opacity:0.1; } + 50% { opacity:1; } + 100% { opacity:0.1; } } - - @-webkit-keyframes green { - 0% { top:110px; background: #a1cb5c; opacity:1; } - 10% { top:110px; background: #CBE0AC; opacity:1; } - 14% { background: #f4f4f4; top:110px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #EFEFEF; top:0; opacity:1; } - 30% { background:#E6E4E4; } - 70% { top:110px; } - 100% { top:110px; background: #a1cb5c; } + @-o-keyframes flickerAnimation{ + 0% { opacity:0.1; } + 50% { opacity:1; } + 100% { opacity:0.1; } } - - @keyframes green { - 0% { top:110px; background: #a1cb5c; opacity:1; } - 10% { top:110px; background: #CBE0AC; opacity:1; } - 14% { background: #f4f4f4; top:110px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #EFEFEF; top:0; opacity:1; } - 30% { background:#E6E4E4; } - 70% { top:110px; } - 100% { top:110px; background: #a1cb5c; } + @-moz-keyframes flickerAnimation{ + 0% { opacity:0.1; } + 50% { opacity:1; } + 100% { opacity:0.1; } } - - @-webkit-keyframes blue { - 0% { top:100px; background: #55bce6; opacity:1; } - 10% { top:100px; background: #BFE8F8; opacity:1; } - 14% { background: #f4f4f4; top:100px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #f4f4f4; top:0; opacity:0; } - 45% { background: #EFEFEF; top:0; opacity:0.2; } - 100% { top:100px; background: #55bce6; } - } - - @keyframes blue { - 0% { top:100px; background: #55bce6; opacity:1; } - 10% { top:100px; background: #BFE8F8; opacity:1; } - 14% { background: #f4f4f4; top:100px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #fff; top:0; opacity:0; } - 45% { background: #EFEFEF; top:0; opacity:0.2; } - 100% { top:100px; background: #55bce6; } + @-webkit-keyframes flickerAnimation{ + 0% { opacity:0.1; } + 50% { opacity:1; } + 100% { opacity:0.1; } } @@ -256,21 +190,9 @@ else if ( lang == 'vi') loading = 'Đang tải...'; else if ( lang == 'zh') loading = '加载中...'; - if ( !stopLoading ) - document.write( - '
' + - '
' + - ((logo!==null) ? logo : - '
' + - '
' + - '
' + - '
' + - '
') + - '
' + - '
' + customer + - '
' + loading + '
' + - '
' + - '
'); + if (stopLoading) { + document.getElementById('loading-mask').remove(); + } @@ -278,6 +200,7 @@ +
@@ -299,7 +222,7 @@ - + diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less index a16802d19..2848bd5d0 100644 --- a/apps/documenteditor/main/resources/less/app.less +++ b/apps/documenteditor/main/resources/less/app.less @@ -144,4 +144,26 @@ } @huge-icon-size: 37px; -@x-huge-icon-size: 45px; \ No newline at end of file +@x-huge-icon-size: 45px; + +.doc-placeholder { + background: #fbfbfb; + width: 796px; + margin: 40px auto; + height: 100%; + border: 1px solid #dfdfdf; + padding-top: 50px; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + > .line { + height: 15px; + margin: 30px 80px; + background: #e2e2e2; + overflow: hidden; + position: relative; + } +} \ No newline at end of file From 9c69d97c91edca4d43f423e0343292792c9889ee Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Fri, 19 Jul 2019 17:04:38 +0300 Subject: [PATCH 003/193] DE layout logo on skeleton lile on the app --- apps/documenteditor/main/index.html | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index dfe7c9797..c39284863 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -43,11 +43,19 @@ } .loadmask > .brendpanel .loading-logo { - background: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png) 50% 50% no-repeat; - width: 110px; + padding: 0 24px 0 12px; + max-width: 200px; height: 20px; } + .loadmask > .brendpanel .loading-logo > i { + display: inline-block; + width: 86px; + height: 20px; + background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); + background-repeat: no-repeat; + } + .loadmask > .brendpanel .circle { vertical-align: middle; width: 20px; @@ -200,7 +208,7 @@ -
+
From b74cdd182dfb20c592dae27e2d8c1aba4fa650e9 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 19 Jul 2019 17:09:31 +0300 Subject: [PATCH 004/193] [SSE] Fix editor loading --- apps/spreadsheeteditor/main/app/controller/CellEditor.js | 5 +---- apps/spreadsheeteditor/main/app/controller/Viewport.js | 1 + 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/CellEditor.js b/apps/spreadsheeteditor/main/app/controller/CellEditor.js index 549455637..0530a7316 100644 --- a/apps/spreadsheeteditor/main/app/controller/CellEditor.js +++ b/apps/spreadsheeteditor/main/app/controller/CellEditor.js @@ -115,10 +115,7 @@ define([ }, onLaunch: function() { - this.editor = this.createView('CellEditor',{ - el: '#cell-editing-box' - }).render(); - + this.editor = this.getView('CellEditor'); this.bindViewEvents(this.editor, this.events); this.editor.$el.parent().find('.after').css({zIndex: '4'}); // for spreadsheets - bug 23127 diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js index e1d3bd42a..9002db7a2 100644 --- a/apps/spreadsheeteditor/main/app/controller/Viewport.js +++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js @@ -322,6 +322,7 @@ define([ onLaunch: function() { // Create and render main view this.viewport = this.createView('Viewport').render(); + this.getApplication().getController('CellEditor').createView('CellEditor',{ el: '#cell-editing-box' }).render(); this.api = new Asc.spreadsheet_api({ 'id-view' : 'editor_sdk', From 47c45bd0b6f324ef77219f6211d03359a00cdd98 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Fri, 19 Jul 2019 17:21:47 +0300 Subject: [PATCH 005/193] SE skeleton loader --- .../main/app/controller/Main.js | 2 + apps/spreadsheeteditor/main/index.html | 247 +++++++----------- .../main/resources/less/app.less | 33 ++- 3 files changed, 131 insertions(+), 151 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index 7ee72540f..5eb974c52 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -143,6 +143,8 @@ define([ // viewport.applicationUI.setVisible(true); } + $('#editor_sdk').append('
' + '
'.repeat(2) + '
'); + var value = Common.localStorage.getItem("sse-settings-fontrender"); if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3'; Common.Utils.InternalSettings.set("sse-settings-fontrender", value); diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html index 158ad8d9c..9a565c43f 100644 --- a/apps/spreadsheeteditor/main/index.html +++ b/apps/spreadsheeteditor/main/index.html @@ -20,157 +20,116 @@ z-index: 10000; } - .loader-page { + .loadmask { width: 100%; - height: 170px; - bottom: 42%; - position: absolute; - text-align: center; - line-height: 10px; + height: 100%; } - .loader-logo { - max-height: 160px; - margin-bottom: 10px; + .loadmask > .brendpanel { + width: 100%; + height: 56px; + background: #40865c; } - .loader-page-romb { - width: 40px; + .loadmask > .brendpanel > div { + display: flex; + align-items: center; + } + + .loadmask > .brendpanel .loading-logo { + padding: 0 24px 0 12px; + max-width: 200px; + height: 20px; + } + + .loadmask > .brendpanel .loading-logo > i { display: inline-block; + width: 86px; + height: 20px; + background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); + background-repeat: no-repeat; } - .loader-page-text { + .loadmask > .brendpanel .spacer { + margin-left: auto; + } + + .loadmask > .brendpanel .circle { + vertical-align: middle; + width: 20px; + height: 20px; + border-radius: 12px; + margin: 4px 10px; + background: rgba(255, 255, 255, 0.2); + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + } + + .loadmask > .brendpanel .rect { + vertical-align: middle; + width: 50px; + height: 12px; + border-radius: 3px; + margin: 0 10px; + background: rgba(255, 255, 255, 0.2); + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + } + + .loadmask > .placeholder { + background: #fbfbfb; width: 100%; - bottom: 42%; - position: absolute; - text-align: center; - color: #888; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 20px; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; } - .loader-page-text-loading { - font-size: 14px; + .loadmask > .placeholder > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0, + linear-gradient(rgba(0,255,0,0) 19px, #d5d5d5 20px) 0 0, + linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; } - .loader-page-text-customer { - font-size: 16px; - margin-bottom: 5px; + .loadmask > .placeholder > .columns:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; } - .romb { - width: 40px; - height: 40px; - -webkit-transform: rotate(135deg) skew(20deg, 20deg); - -moz-transform: rotate(135deg) skew(20deg, 20deg); - -ms-transform: rotate(135deg) skew(20deg, 20deg); - -o-transform: rotate(135deg) skew(20deg, 20deg); - position: absolute; - background: red; - border-radius: 6px; - -webkit-animation: movedown 3s infinite ease; - -moz-animation: movedown 3s infinite ease; - -ms-animation: movedown 3s infinite ease; - -o-animation: movedown 3s infinite ease; - animation: movedown 3s infinite ease; + @keyframes flickerAnimation { + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - #blue { - z-index: 3; - background: #55bce6; - -webkit-animation-name: blue; - -moz-animation-name: blue; - -ms-animation-name: blue; - -o-animation-name: blue; - animation-name: blue; + @-o-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - #red { - z-index:1; - background: #de7a59; - -webkit-animation-name: red; - -moz-animation-name: red; - -ms-animation-name: red; - -o-animation-name: red; - animation-name: red; + @-moz-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - #green { - z-index: 2; - background: #a1cb5c; - -webkit-animation-name: green; - -moz-animation-name: green; - -ms-animation-name: green; - -o-animation-name: green; - animation-name: green; - } - - @-webkit-keyframes red { - 0% { top:120px; background: #de7a59; } - 10% { top:120px; background: #F2CBBF; } - 14% { background: #f4f4f4; top:120px; } - 15% { background: #f4f4f4; top:0;} - 20% { background: #E6E4E4; } - 30% { background: #D2D2D2; } - 40% { top:120px; } - 100% { top:120px; background: #de7a59; } - } - - @keyframes red { - 0% { top:120px; background: #de7a59; } - 10% { top:120px; background: #F2CBBF; } - 14% { background: #f4f4f4; top:120px; } - 15% { background: #f4f4f4; top:0; } - 20% { background: #E6E4E4; } - 30% { background: #D2D2D2; } - 40% { top:120px; } - 100% { top:120px; background: #de7a59; } - } - - @-webkit-keyframes green { - 0% { top:110px; background: #a1cb5c; opacity:1; } - 10% { top:110px; background: #CBE0AC; opacity:1; } - 14% { background: #f4f4f4; top:110px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #EFEFEF; top:0; opacity:1; } - 30% { background:#E6E4E4; } - 70% { top:110px; } - 100% { top:110px; background: #a1cb5c; } - } - - @keyframes green { - 0% { top:110px; background: #a1cb5c; opacity:1; } - 10% { top:110px; background: #CBE0AC; opacity:1; } - 14% { background: #f4f4f4; top:110px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #EFEFEF; top:0; opacity:1; } - 30% { background:#E6E4E4; } - 70% { top:110px; } - 100% { top:110px; background: #a1cb5c; } - } - - @-webkit-keyframes blue { - 0% { top:100px; background: #55bce6; opacity:1; } - 10% { top:100px; background: #BFE8F8; opacity:1; } - 14% { background: #f4f4f4; top:100px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #f4f4f4; top:0; opacity:0; } - 45% { background: #EFEFEF; top:0; opacity:0.2; } - 100% { top:100px; background: #55bce6; } - } - - @keyframes blue { - 0% { top:100px; background: #55bce6; opacity:1; } - 10% { top:100px; background: #BFE8F8; opacity:1; } - 14% { background: #f4f4f4; top:100px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #f4f4f4; top:0; opacity:0; } - 45% { background: #EFEFEF; top:0; opacity:0.2; } - 100% { top:100px; background: #55bce6; } + @-webkit-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } @@ -246,21 +205,9 @@ else if ( lang == 'vi') loading = 'Đang tải...'; else if ( lang == 'zh') loading = '加载中...'; - if (!stopLoading) - document.write( - '
' + - '
' + - ((logo!==null) ? logo : - '
' + - '
' + - '
' + - '
' + - '
') + - '
' + - '
' + customer + - '
' + loading + '
' + - '
' + - '
'); + if (stopLoading) { + document.getElementById('loading-mask').remove(); + } @@ -270,7 +217,7 @@ - +
@@ -294,7 +241,7 @@ - + diff --git a/apps/spreadsheeteditor/main/resources/less/app.less b/apps/spreadsheeteditor/main/resources/less/app.less index a5d13d177..7b7d265b2 100644 --- a/apps/spreadsheeteditor/main/resources/less/app.less +++ b/apps/spreadsheeteditor/main/resources/less/app.less @@ -142,4 +142,35 @@ } @huge-icon-size: 37px; -@x-huge-icon-size: 45px; \ No newline at end of file +@x-huge-icon-size: 45px; + +// Skeleton of workbook + +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0, + linear-gradient(rgba(0,255,0,0) 19px, #d5d5d5 20px) 0 0, + linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + + &:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; + } + } +} \ No newline at end of file From bdc69aec84663d6351c263643ae767a6cc473e47 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Mon, 22 Jul 2019 11:17:53 +0300 Subject: [PATCH 006/193] PE skeleton loader --- .../main/app/controller/Main.js | 2 + .../main/resources/less/app.less | 2 + .../main/app/controller/Main.js | 4 + apps/presentationeditor/main/index.html | 252 ++++++++---------- .../main/resources/less/app.less | 59 ++++ 5 files changed, 172 insertions(+), 147 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index f6e7db4fb..dc1bb9727 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -1039,6 +1039,8 @@ define([ $(document).on('contextmenu', _.bind(me.onContextMenu, me)); Common.Gateway.documentReady(); + + $('.doc-placeholder').remove(); }, onDocumentReady: function() { diff --git a/apps/documenteditor/main/resources/less/app.less b/apps/documenteditor/main/resources/less/app.less index 2848bd5d0..8b5b0fae6 100644 --- a/apps/documenteditor/main/resources/less/app.less +++ b/apps/documenteditor/main/resources/less/app.less @@ -146,6 +146,8 @@ @huge-icon-size: 37px; @x-huge-icon-size: 45px; +// Skeleton of document + .doc-placeholder { background: #fbfbfb; width: 796px; diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js index 940a7106c..31a72ccb2 100644 --- a/apps/presentationeditor/main/app/controller/Main.js +++ b/apps/presentationeditor/main/app/controller/Main.js @@ -160,6 +160,8 @@ define([ window["flat_desine"] = true; this.api = this.getApplication().getController('Viewport').getApi(); + $('#editor_sdk').append('
'); + if (this.api){ this.api.SetDrawingFreeze(true); this.api.SetThemesPath("../../../../sdkjs/slide/themes/"); @@ -786,6 +788,8 @@ define([ $(document).on('contextmenu', _.bind(me.onContextMenu, me)); Common.Gateway.documentReady(); + + $('.doc-placeholder').remove(); }, onDocumentReady: function() { diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html index e8902a029..3f2cf5c10 100644 --- a/apps/presentationeditor/main/index.html +++ b/apps/presentationeditor/main/index.html @@ -21,157 +21,126 @@ z-index: 10000; } - .loader-page { + .loadmask { width: 100%; - height: 170px; - bottom: 42%; - position: absolute; - text-align: center; - line-height: 10px; + height: 100%; } - .loader-logo { - max-height: 160px; - margin-bottom: 10px; + .loadmask > .brendpanel { + width: 100%; + height: 56px; + background: #aa5252; } - .loader-page-romb { - width: 40px; + .loadmask > .brendpanel > div { + display: flex; + align-items: center; + } + + .loadmask > .brendpanel .loading-logo { + padding: 0 24px 0 12px; + max-width: 200px; + height: 20px; + } + + .loadmask > .brendpanel .loading-logo > i { display: inline-block; + width: 86px; + height: 20px; + background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); + background-repeat: no-repeat; } - .loader-page-text { + .loadmask > .brendpanel .spacer { + margin-left: auto; + } + + .loadmask > .brendpanel .circle { + vertical-align: middle; + width: 20px; + height: 20px; + border-radius: 12px; + margin: 4px 10px; + background: rgba(255, 255, 255, 0.2); + } + + .loadmask > .brendpanel .rect { + vertical-align: middle; + width: 50px; + height: 12px; + border-radius: 3px; + margin: 0 10px; + background: rgba(255, 255, 255, 0.2); + } + + .loadmask > .placeholder { + display: flex; + flex-direction: column; + min-height: 100%; + margin: 0 100px; + } + + .loadmask > .placeholder .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + max-width: 1350px; width: 100%; - bottom: 42%; + margin: 0 auto 56px; + } + .loadmask > .placeholder .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; + } + + .loadmask > .placeholder .slide-container { position: absolute; - text-align: center; - color: #888; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 20px; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; } - .loader-page-text-loading { - font-size: 14px; - } - - .loader-page-text-customer { - font-size: 16px; - margin-bottom: 5px; - } - - .romb { - width: 40px; - height: 40px; - -webkit-transform: rotate(135deg) skew(20deg, 20deg); - -moz-transform: rotate(135deg) skew(20deg, 20deg); - -ms-transform: rotate(135deg) skew(20deg, 20deg); - -o-transform: rotate(135deg) skew(20deg, 20deg); - position: absolute; - background: red; + .loadmask > .placeholder .slide-container > .line { + height: 30%; + margin: auto 120px; border-radius: 6px; - -webkit-animation: movedown 3s infinite ease; - -moz-animation: movedown 3s infinite ease; - -ms-animation: movedown 3s infinite ease; - -o-animation: movedown 3s infinite ease; - animation: movedown 3s infinite ease; + background: #f5f5f5; } - #blue { - z-index: 3; - background: #55bce6; - -webkit-animation-name: blue; - -moz-animation-name: blue; - -ms-animation-name: blue; - -o-animation-name: blue; - animation-name: blue; + .loadmask > .placeholder .slide-container > .line:nth-child(1) { + height: 40%; + margin: auto 80px; } - #red { - z-index:1; - background: #de7a59; - -webkit-animation-name: red; - -moz-animation-name: red; - -ms-animation-name: red; - -o-animation-name: red; - animation-name: red; + @keyframes flickerAnimation { + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - #green { - z-index: 2; - background: #a1cb5c; - -webkit-animation-name: green; - -moz-animation-name: green; - -ms-animation-name: green; - -o-animation-name: green; - animation-name: green; + @-o-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - @-webkit-keyframes red { - 0% { top:120px; background: #de7a59; } - 10% { top:120px; background: #F2CBBF; } - 14% { background: #f4f4f4; top:120px; } - 15% { background: #f4f4f4; top:0;} - 20% { background: #E6E4E4; } - 30% { background: #D2D2D2; } - 40% { top:120px; } - 100% { top:120px; background: #de7a59; } + @-moz-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } - - @keyframes red { - 0% { top:120px; background: #de7a59; } - 10% { top:120px; background: #F2CBBF; } - 14% { background: #f4f4f4; top:120px; } - 15% { background: #f4f4f4; top:0; } - 20% { background: #E6E4E4; } - 30% { background: #D2D2D2; } - 40% { top:120px; } - 100% { top:120px; background: #de7a59; } - } - - @-webkit-keyframes green { - 0% { top:110px; background: #a1cb5c; opacity:1; } - 10% { top:110px; background: #CBE0AC; opacity:1; } - 14% { background: #f4f4f4; top:110px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #EFEFEF; top:0; opacity:1; } - 30% { background:#E6E4E4; } - 70% { top:110px; } - 100% { top:110px; background: #a1cb5c; } - } - - @keyframes green { - 0% { top:110px; background: #a1cb5c; opacity:1; } - 10% { top:110px; background: #CBE0AC; opacity:1; } - 14% { background: #f4f4f4; top:110px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #EFEFEF; top:0; opacity:1; } - 30% { background:#E6E4E4; } - 70% { top:110px; } - 100% { top:110px; background: #a1cb5c; } - } - - @-webkit-keyframes blue { - 0% { top:100px; background: #55bce6; opacity:1; } - 10% { top:100px; background: #BFE8F8; opacity:1; } - 14% { background: #f4f4f4; top:100px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #f4f4f4; top:0; opacity:0; } - 45% { background: #EFEFEF; top:0; opacity:0.2; } - 100% { top:100px; background: #55bce6; } - } - - @keyframes blue { - 0% { top:100px; background: #55bce6; opacity:1; } - 10% { top:100px; background: #BFE8F8; opacity:1; } - 14% { background: #f4f4f4; top:100px; opacity:1; } - 15% { background: #f4f4f4; top:0; opacity:1; } - 20% { background: #f4f4f4; top:0; opacity:0; } - 25% { background: #f4f4f4; top:0; opacity:0; } - 45% { background: #EFEFEF; top:0; opacity:0.2; } - 100% { top:100px; background: #55bce6; } + @-webkit-keyframes flickerAnimation{ + 0% { opacity:1; } + 50% { opacity:0.3; } + 100% { opacity:1; } } @@ -247,21 +216,9 @@ else if ( lang == 'vi') loading = 'Đang tải...'; else if ( lang == 'zh') loading = '加载中...'; - if ( !stopLoading ) - document.write( - '
' + - '
' + - ((logo!==null) ? logo : - '
' + - '
' + - '
' + - '
' + - '
') + - '
' + - '
' + customer + - '
' + loading + '
' + - '
' + - '
'); + if (stopLoading) { + document.getElementById('loading-mask').remove(); + } @@ -269,6 +226,7 @@ +
@@ -294,7 +252,7 @@ - + diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less index 995117453..ef27cafd8 100644 --- a/apps/presentationeditor/main/resources/less/app.less +++ b/apps/presentationeditor/main/resources/less/app.less @@ -168,4 +168,63 @@ background-position: -20px @top-position; } } +} + +// Skeleton of document + +.doc-placeholder { + display: flex; + flex-direction: column; + min-height: 100%; + padding: 0 100px; + background: rgb(226, 226, 226); + z-index: 999; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + max-width: 1350px; + width: 100%; + margin: 0 auto 56px; + } + + .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; + } + + .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + + > .line { + height: 30%; + margin: auto 120px; + border-radius: 6px; + background: #f5f5f5; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + &:nth-child(1) { + height: 40%; + margin: auto 80px; + } + } + } } \ No newline at end of file From 1bfaa3cc266b56ad975cfcb436aedafd4f93da01 Mon Sep 17 00:00:00 2001 From: Alexander Yuzhin Date: Mon, 22 Jul 2019 13:45:02 +0300 Subject: [PATCH 007/193] DE-mobile skeleton loader --- .../mobile/app/controller/Main.js | 4 + apps/documenteditor/mobile/index.html | 234 +++++++----------- .../mobile/resources/css/app-ios.css | 21 ++ .../mobile/resources/css/app-material.css | 21 ++ .../mobile/resources/less/app-ios.less | 25 ++ 5 files changed, 155 insertions(+), 150 deletions(-) diff --git a/apps/documenteditor/mobile/app/controller/Main.js b/apps/documenteditor/mobile/app/controller/Main.js index 07e8f817d..2f23bc0c9 100644 --- a/apps/documenteditor/mobile/app/controller/Main.js +++ b/apps/documenteditor/mobile/app/controller/Main.js @@ -122,6 +122,8 @@ define([ 'translate': translate }); + $('#editor_sdk').append('
'); + // Localization uiApp params uiApp.params.modalButtonOk = me.textOK; uiApp.params.modalButtonCancel = me.textCancel; @@ -599,6 +601,8 @@ define([ $(document).on('contextmenu', _.bind(me.onContextMenu, me)); Common.Gateway.documentReady(); + + $('.doc-placeholder').remove(); }, onLicenseChanged: function(params) { diff --git a/apps/documenteditor/mobile/index.html b/apps/documenteditor/mobile/index.html index 5f3b6495a..6ecc8a965 100644 --- a/apps/documenteditor/mobile/index.html +++ b/apps/documenteditor/mobile/index.html @@ -16,172 +16,113 @@ +
+
diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 5f8bc366d..62a03c171 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -7012,3 +7012,24 @@ html.pixel-ratio-3 .numbers li { #user-list ul:before { content: none; } +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 10; +} +.doc-placeholder > .line { + height: 15px; + margin: 30px; + background: #e2e2e2; + overflow: hidden; + position: relative; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index d1aabb74d..871bbfe52 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -6783,3 +6783,24 @@ html.pixel-ratio-3 .numbers li { #user-list ul:before { content: none; } +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 10; +} +.doc-placeholder > .line { + height: 15px; + margin: 30px; + background: #e2e2e2; + overflow: hidden; + position: relative; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/less/app-ios.less b/apps/documenteditor/mobile/resources/less/app-ios.less index acfb7401b..4614abef7 100644 --- a/apps/documenteditor/mobile/resources/less/app-ios.less +++ b/apps/documenteditor/mobile/resources/less/app-ios.less @@ -269,4 +269,29 @@ input, textarea { ul:before { content: none; } +} + +// Skeleton of document + +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 10; + + > .line { + height: 15px; + margin: 30px; + background: #e2e2e2; + overflow: hidden; + position: relative; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + } } \ No newline at end of file From 80a6e6a1e677946e97acdedcfc144abb9764b5b7 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 22 Jul 2019 17:04:24 +0300 Subject: [PATCH 008/193] Custom loader logo --- apps/api/documents/api.js | 11 +- apps/documenteditor/main/index.html | 47 +-- apps/documenteditor/main/index_loader.html | 303 ++++++++++++++++++ apps/presentationeditor/main/index.html | 47 +-- .../presentationeditor/main/index_loader.html | 296 +++++++++++++++++ apps/spreadsheeteditor/main/index.html | 47 +-- apps/spreadsheeteditor/main/index_loader.html | 300 +++++++++++++++++ 7 files changed, 957 insertions(+), 94 deletions(-) create mode 100644 apps/documenteditor/main/index_loader.html create mode 100644 apps/presentationeditor/main/index_loader.html create mode 100644 apps/spreadsheeteditor/main/index_loader.html diff --git a/apps/api/documents/api.js b/apps/api/documents/api.js index 50848e08f..f18237c3f 100644 --- a/apps/api/documents/api.js +++ b/apps/api/documents/api.js @@ -719,8 +719,15 @@ : config.type === "embedded" ? "embed" : "main"; - path += "/index.html"; + var index = "/index.html"; + if (config.editorConfig && config.editorConfig.targetApp!=='desktop') { + var customization = config.editorConfig.customization; + if ( typeof(customization) == 'object' && (customization.loaderName || customization.loaderLogo)) { + index = "/index_loader.html"; + } + } + path += index; return path; } @@ -737,6 +744,8 @@ params += "&customer=ONLYOFFICE"; if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.loaderLogo) { if (config.editorConfig.customization.loaderLogo !== '') params += "&logo=" + config.editorConfig.customization.loaderLogo; + } else if ( (typeof(config.editorConfig.customization) == 'object') && config.editorConfig.customization.logo) { + if (config.editorConfig.customization.logo.image) params += "&headerlogo=" + config.editorConfig.customization.logo.image; } } diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index c39284863..dc7f5bab5 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -52,8 +52,9 @@ display: inline-block; width: 86px; height: 20px; - background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + background: url('../../common/main/resources/img/header/header-logo.png') no-repeat; + background-size: contain; + opacity: 0; } .loadmask > .brendpanel .circle { @@ -170,37 +171,9 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - customer = params["customer"] ? ('
' + encodeUrlParam(params["customer"]) + '
') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; + logo = params["headerlogo"] ? 'url(' + encodeUrlParam(params["headerlogo"]) + ')' : null; window.frameEditorId = params["frameEditorId"]; - - if ( lang == 'de') loading = 'Ladevorgang...'; - else if ( lang == 'es') loading = 'Cargando...'; - else if ( lang == 'fr') loading = 'Chargement en cours...'; - else if ( lang == 'it') loading = 'Caricamento in corso...'; - else if ( lang == 'pt') loading = 'Carregando...'; - else if ( lang == 'ru') loading = 'Загрузка...'; - else if ( lang == 'sl') loading = 'Nalaganje...'; - else if ( lang == 'tr') loading = 'Yükleniyor...'; - else if ( lang == 'bg') loading = 'Зареждане...'; - else if ( lang == 'cs') loading = 'Nahrávám...'; - else if ( lang == 'hu') loading = 'Betöltés...'; - else if ( lang == 'ja') loading = '読み込み中...'; - else if ( lang == 'ko') loading = '로드 중...'; - else if ( lang == 'lv') loading = 'Ieladēšana ...'; - else if ( lang == 'nl') loading = 'Laden...'; - else if ( lang == 'pl') loading = 'Ładowanie...'; - else if ( lang == 'sk') loading = 'Nahrávam...'; - else if ( lang == 'uk') loading = 'Завантаження...'; - else if ( lang == 'vi') loading = 'Đang tải...'; - else if ( lang == 'zh') loading = '加载中...'; - - if (stopLoading) { - document.getElementById('loading-mask').remove(); - } @@ -211,6 +184,18 @@
+ + diff --git a/apps/documenteditor/main/index_loader.html b/apps/documenteditor/main/index_loader.html new file mode 100644 index 000000000..5019ebabd --- /dev/null +++ b/apps/documenteditor/main/index_loader.html @@ -0,0 +1,303 @@ + + + + ONLYOFFICE Documents + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html index 3f2cf5c10..6b34b8d55 100644 --- a/apps/presentationeditor/main/index.html +++ b/apps/presentationeditor/main/index.html @@ -47,8 +47,9 @@ display: inline-block; width: 86px; height: 20px; - background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + background: url('../../common/main/resources/img/header/header-logo.png') no-repeat; + background-size: contain; + opacity: 0; } .loadmask > .brendpanel .spacer { @@ -188,37 +189,9 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - customer = params["customer"] ? ('
' + encodeUrlParam(params["customer"]) + '
') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; + logo = params["headerlogo"] ? 'url(' + encodeUrlParam(params["headerlogo"]) + ')' : null; window.frameEditorId = params["frameEditorId"]; - - if ( lang == 'de') loading = 'Ladevorgang...'; - else if ( lang == 'es') loading = 'Cargando...'; - else if ( lang == 'fr') loading = 'Chargement en cours...'; - else if ( lang == 'it') loading = 'Caricamento in corso...'; - else if ( lang == 'pt') loading = 'Carregando...'; - else if ( lang == 'ru') loading = 'Загрузка...'; - else if ( lang == 'sl') loading = 'Nalaganje...'; - else if ( lang == 'tr') loading = 'Yükleniyor...'; - else if ( lang == 'bg') loading = 'Зареждане...'; - else if ( lang == 'cs') loading = 'Nahrávám...'; - else if ( lang == 'hu') loading = 'Betöltés...'; - else if ( lang == 'ja') loading = '読み込み中...'; - else if ( lang == 'ko') loading = '로드 중...'; - else if ( lang == 'lv') loading = 'Ieladēšana ...'; - else if ( lang == 'nl') loading = 'Laden...'; - else if ( lang == 'pl') loading = 'Ładowanie...'; - else if ( lang == 'sk') loading = 'Nahrávam...'; - else if ( lang == 'uk') loading = 'Завантаження...'; - else if ( lang == 'vi') loading = 'Đang tải...'; - else if ( lang == 'zh') loading = '加载中...'; - - if (stopLoading) { - document.getElementById('loading-mask').remove(); - } @@ -229,6 +202,18 @@
+ + diff --git a/apps/presentationeditor/main/index_loader.html b/apps/presentationeditor/main/index_loader.html new file mode 100644 index 000000000..bc50707ae --- /dev/null +++ b/apps/presentationeditor/main/index_loader.html @@ -0,0 +1,296 @@ + + + + ONLYOFFICE Presentation Editor + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html index 9a565c43f..7d715d12f 100644 --- a/apps/spreadsheeteditor/main/index.html +++ b/apps/spreadsheeteditor/main/index.html @@ -46,8 +46,9 @@ display: inline-block; width: 86px; height: 20px; - background-image: url(http://192.168.3.191:8080/web-apps-pro/apps/common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + background: url('../../common/main/resources/img/header/header-logo.png') no-repeat; + background-size: contain; + opacity: 0; } .loadmask > .brendpanel .spacer { @@ -177,37 +178,9 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - customer = params["customer"] ? ('
' + encodeUrlParam(params["customer"]) + '
') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; + logo = params["headerlogo"] ? 'url(' + encodeUrlParam(params["headerlogo"]) + ')' : null; window.frameEditorId = params["frameEditorId"]; - - if ( lang == 'de') loading = 'Ladevorgang...'; - else if ( lang == 'es') loading = 'Cargando...'; - else if ( lang == 'fr') loading = 'Chargement en cours...'; - else if ( lang == 'it') loading = 'Caricamento in corso...'; - else if ( lang == 'pt') loading = 'Carregando...'; - else if ( lang == 'ru') loading = 'Загрузка...'; - else if ( lang == 'sl') loading = 'Nalaganje...'; - else if ( lang == 'tr') loading = 'Yükleniyor...'; - else if ( lang == 'bg') loading = 'Зареждане...'; - else if ( lang == 'cs') loading = 'Nahrávám...'; - else if ( lang == 'hu') loading = 'Betöltés...'; - else if ( lang == 'ja') loading = '読み込み中...'; - else if ( lang == 'ko') loading = '로드 중...'; - else if ( lang == 'lv') loading = 'Ieladēšana ...'; - else if ( lang == 'nl') loading = 'Laden...'; - else if ( lang == 'pl') loading = 'Ładowanie...'; - else if ( lang == 'sk') loading = 'Nahrávam...'; - else if ( lang == 'uk') loading = 'Завантаження...'; - else if ( lang == 'vi') loading = 'Đang tải...'; - else if ( lang == 'zh') loading = '加载中...'; - - if (stopLoading) { - document.getElementById('loading-mask').remove(); - } @@ -220,6 +193,18 @@
+ + diff --git a/apps/spreadsheeteditor/main/index_loader.html b/apps/spreadsheeteditor/main/index_loader.html new file mode 100644 index 000000000..af0b26d38 --- /dev/null +++ b/apps/spreadsheeteditor/main/index_loader.html @@ -0,0 +1,300 @@ + + + + ONLYOFFICE Document Editor + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From b0037bdd422640cd3f2130993607aaf6dafdf3f2 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Mon, 22 Jul 2019 17:09:53 +0300 Subject: [PATCH 009/193] [PE mobile] [SSE mobile] Skeleton loader --- .../mobile/app/controller/Main.js | 4 + apps/presentationeditor/mobile/index.html | 281 +++++++++--------- .../mobile/app/controller/Main.js | 4 + apps/spreadsheeteditor/mobile/index.html | 252 +++++++--------- 4 files changed, 249 insertions(+), 292 deletions(-) diff --git a/apps/presentationeditor/mobile/app/controller/Main.js b/apps/presentationeditor/mobile/app/controller/Main.js index a3e746c08..0db9e2598 100644 --- a/apps/presentationeditor/mobile/app/controller/Main.js +++ b/apps/presentationeditor/mobile/app/controller/Main.js @@ -133,6 +133,8 @@ define([ uiApp.params.smartSelectPickerCloseText = me.textDone; uiApp.params.notificationCloseButtonText = me.textClose; + $('#editor_sdk').append('
'); + if (me.api){ Common.Utils.Metric.setCurrentMetric(1); //pt @@ -546,6 +548,8 @@ define([ $(document).on('contextmenu', _.bind(me.onContextMenu, me)); Common.Gateway.documentReady(); + + $('.doc-placeholder').remove(); }, onLicenseChanged: function(params) { diff --git a/apps/presentationeditor/mobile/index.html b/apps/presentationeditor/mobile/index.html index 03d7dff40..313d4fc12 100644 --- a/apps/presentationeditor/mobile/index.html +++ b/apps/presentationeditor/mobile/index.html @@ -16,172 +16,164 @@ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/spreadsheeteditor/mobile/app/controller/Main.js b/apps/spreadsheeteditor/mobile/app/controller/Main.js index cfb8ff878..084f9b2da 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/Main.js +++ b/apps/spreadsheeteditor/mobile/app/controller/Main.js @@ -125,6 +125,8 @@ define([ 'translate': translate }); + $('#editor_sdk').append('
' + '
'.repeat(2) + '
'); + // Localization uiApp params uiApp.params.modalButtonOk = me.textOK; uiApp.params.modalButtonCancel = me.textCancel; @@ -568,6 +570,8 @@ define([ $(document).on('contextmenu', _.bind(me.onContextMenu, me)); Common.Gateway.documentReady(); + + $('.doc-placeholder').remove(); }, onLicenseChanged: function(params) { diff --git a/apps/spreadsheeteditor/mobile/index.html b/apps/spreadsheeteditor/mobile/index.html index f4a7051f9..77a2b2e56 100644 --- a/apps/spreadsheeteditor/mobile/index.html +++ b/apps/spreadsheeteditor/mobile/index.html @@ -16,6 +16,7 @@ +
+
+
+
+ +
+
+
+
+
+
+
+
From 147c0a56e1f43e4425817d0431a56aad0c814a81 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 22 Jul 2019 17:32:10 +0300 Subject: [PATCH 010/193] Fix loading custom logo --- apps/documenteditor/main/index.html | 16 +++++++--------- apps/presentationeditor/main/index.html | 16 +++++++--------- apps/spreadsheeteditor/main/index.html | 16 +++++++--------- 3 files changed, 21 insertions(+), 27 deletions(-) diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html index dc7f5bab5..4270f1c3b 100644 --- a/apps/documenteditor/main/index.html +++ b/apps/documenteditor/main/index.html @@ -48,12 +48,10 @@ height: 20px; } - .loadmask > .brendpanel .loading-logo > i { + .loadmask > .brendpanel .loading-logo > img { display: inline-block; - width: 86px; - height: 20px; - background: url('../../common/main/resources/img/header/header-logo.png') no-repeat; - background-size: contain; + max-width: 100px; + max-height: 20px; opacity: 0; } @@ -171,7 +169,7 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - logo = params["headerlogo"] ? 'url(' + encodeUrlParam(params["headerlogo"]) + ')' : null; + logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; window.frameEditorId = params["frameEditorId"]; @@ -181,16 +179,16 @@ -
+
@@ -199,16 +197,16 @@ -
+
@@ -190,16 +188,16 @@ -
+
+
+
+ + + From f6b9e3b686f753e860669f3e52d5d4a9c1e19b41 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 23 Jul 2019 11:21:45 +0300 Subject: [PATCH 012/193] [Mobile] Add header logo --- .../mobile/resources/img/header/header-logo.png | Bin 0 -> 1050 bytes .../resources/img/header/header-logo@2x.png | Bin 0 -> 2367 bytes apps/documenteditor/mobile/index.html | 2 +- apps/presentationeditor/mobile/index.html | 2 +- apps/spreadsheeteditor/mobile/index.html | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 apps/common/mobile/resources/img/header/header-logo.png create mode 100644 apps/common/mobile/resources/img/header/header-logo@2x.png diff --git a/apps/common/mobile/resources/img/header/header-logo.png b/apps/common/mobile/resources/img/header/header-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..bace6a10041848af132f24df3d1d045f5a3430b0 GIT binary patch literal 1050 zcmV+#1m*jQP)TREKTt-9zs4SoWY1PIwlrnmg^)dD9ZPnS7+Zre*0N5r4r3kWJ>OHGr_=4enaB7` z_gA0popaAQ_uTJqIp@5O3S$CE31i?M2~5xIvL zE4sS$H64$M#o{D?dzOo^C3GExptYhLmnN2qt>UXEqr0%_y4L;6@mEE2m-a>?QFIhV zM5r>pv$ZI@(R?t0uaOVdAw2Fn3!~USx}FBFSZ5pI@{TL&O+SJxW3E5wV+Hp0yUI z>C;!d6;s7-F-a^CB}HjO+axZrmNGaZhWp}H8Jd8D)`@2HH}~(ve7<9zxXt^r`K~0M zpGTa#;xO~RqAh?^(`moMo)Ta!#wn{rWpNyb_^q{?ez(M4Ti74srf7pGrX+NVP-9Ps zCE|vt!C0rwVO~?OGiZw!^@zqbwA~j$u^dtIvPWXFSV@EhC|#Y!XCnWbm@cvyW3pyD z4!l6y3z2Ni+lA|OaVo;Q<3ts)jZNLQ;+B)n+QKekP!5qZN)#r7`_sOIbTjGIQ;ft@ z4~Qh&T9C#W4yTxuYfQQtE6TeLiJ?SNUS?9XkC?_9*YYuiNZnLRR3DB{qa;$-KHOll=j z%kr`iPIxHZP+I=fjM$&J&&DY}qCMQ66X94I%w^tp)Ldg3;Zk6ti-K{wPxd z4)9^6B9wv@BBYWPwMNYLoFLL1{l^n&qoWk&srZ8Pvn+w0P#OYOyPpjCAYRgDzICBX zDL9-W+Mrb!pkVuaim6&G(LnU8;B-|Wp>Mbju*^efyvbC zOlo6OF~y1spS4k}iXd!F>SNf}=20fh<~5i59BO+xHm_hlPEY$ejSOZ}y+x##;B0TK zg1tBS8B`m=s>2(0$rT7#gW6e^ahdGC_gxlok)u;0bBB*x{jB5GN5`01q8F!yZ)C@N zA~4BC*i1()HFgPx# literal 0 HcmV?d00001 diff --git a/apps/common/mobile/resources/img/header/header-logo@2x.png b/apps/common/mobile/resources/img/header/header-logo@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..57644434a25700778c3e8297a63c2d422fb58bbf GIT binary patch literal 2367 zcmV-F3BdM=P)5X+h+H7H7i_)*rXPkfAcAF+Z%o8!be#F@mu z&GH%q!(clQA15aG;gNHQ3y7}}Q_M0O6t%&YBHm3LO>9=kF<36VO8kO&(JZ+^APu$} z@gd?!V$}eTwU77)BtwQ-dV|6kY;%PD0r0Lx2~N`H!|SG*M_}Nu!G1}9dj(k}x<0Rm(ibpVp-L9R8KubkCmQ3sAdSWxi z;Fu-QUBtZ(-{nT)TyZ>^_?6OzC0QqY?<&L+#B}0LjJ-}HwJH%4J**{<{S$F0@m80% zyNNF%`5vdt`JkqKNn(5AZMdf*u{7~K)^tDdJK}Ob=4*vvk%O{Xi2l5J!w>6CVjs<% zYk+qUrx3>z=V_`OwQf6M0BbVo6wyy6v7@G4Y2spK%zonfQgQx*_`E{XSE9I{AjSLPh4w;dB`~p z#qQS%n zD}Sv%5jn+qov$Pw^>+Zf^Lhx6Tz2Y?&SoRTa!6a@r{3hywh&29OX5e+I{YxE6Yn8j z@3F5t#pmPb%LzHqj8eD8Im}NQ$#iJ5Kw>NOw2cRdZLG`n?Ji=z_Y1?eM1sfo)kQXO zd2p3DZdnXf9w)FSZK_D4Re>HP3|cE*oMX>An79&}C>d;mtay;+{LVlI^yBNoD?~$Y zwL_N3Xn^c_IT9&fkV#I8@^E$dK{@8^H&r=T3Y&8zjJhr&%cKCWFMF7t#G9e%ra^Ps zNP=O@dDRlfUNrs=VsDYqG!oH6u0fRM-ehQEwZf3#P$lpcabuL@m4#ThR+j#EfK5(S zf^rCxyx1FwOAu-wBu*d>ho^`^0<;au%Y1~W5bX9IDBTpM5>Z8bKH{Oh+D7-qOCu2& zhs4do=XZ&F0%))~D37JU7~>UVd|qiEp{&(O4`ZY&$B`O??d@>y8jZnng=DOz?Z++# zt5yW|6=K~wfGW;~A#62*akUcV7`yZo5AKEGt|h(zswj(o5)dMs^xYcN8}}De`OFE6 z5w>oJ5l{E=a0`l5=+LQ(BpE77MgIqcYBXxVVH@Xf&~#DIuwAVGzLCXA)1$;8(6sAd zaG?mP?eXBt`0xa_#5nE89FGyp`|y^Qi$`_y%1;n~7A3xJMX=aO7{`tl3lOy}N+xHN_#Z&gV_-q-H*9hV3B3U80@q#Vb5VjTzbLl5uQx|p9fNxt@esN=OxG2B|dlB_bw@{xACr}&5 zO+EA-qezf6jk96H+3azyXZ>g^@rQEU4z=?lapS!6JHZHJu)xW9h|j`k{P8-hYx&on z@u)tmMMA*I2mcz?On6NpN>2HP3BtuDe#Yg7W_VN|@^o`E4GyXdY=Br(IGad$$Dw}qj# zfVSnn2U_`m+jj!LmbghA&s0i3mdKDf^xY)RJ?U{BPQbI;NC=|AE)*V^rNLyB9aWS^ z(iSe9#M~gxn;qI5C3oQYb#=%iN?8SXBQVV2d`Wo0IAnVqHV;7Cybq1r7A2TV&^_Nm zcVuCLta)RVGLF||NDZe0(06TwyOoeGOAx{uVMEFAI0FygD`ugj#~!VO$9rB;3|*q2 z-sKFUS|XCzC~VTjsK(^N^Y*mz|G>cC_s<|FUTg8(hlpwnN7)gmFr0^>Mq(4PGn%dG zr>~PUV}tz$mL7{vLKUN`1E#}p(_jb-eHeO-*!e1Q5k68qmTm0N&Sf(D<(DvI*+U(Y zJ1$Yp^K-FzUZasvdPV&rdhlFA9EtA{i$r!HsN#@yxxTyYDybH{hsernSxqF5I++#W z&_@#|DP()tqwtU$g>F)RG2z|Z28quu7~M%2HHZC%pwr7U=TLjx>5!dzsTTBu*SCK) zvR^Me0qL>~5g^k+V{H~y5gmB*@*7mml_W%#-ClCZQu@|OM7E>Bct-3g8^9^%VlKxJxz{?(*SSXN@K0pI zFi4!o(u$j*r6OEivJ4Cg0WbduF&c(j(@z1u2NL42S!RRcG+0aMkT`f=r)2E{ Date: Tue, 23 Jul 2019 11:38:58 +0300 Subject: [PATCH 013/193] [Mobile] Custom loader logo --- apps/documenteditor/mobile/index.html | 43 +-- apps/documenteditor/mobile/index_loader.html | 265 +++++++++++++++++ apps/presentationeditor/mobile/index.html | 42 +-- .../mobile/index_loader.html | 265 +++++++++++++++++ apps/spreadsheeteditor/mobile/index.html | 42 +-- .../mobile/index_loader.html | 266 ++++++++++++++++++ 6 files changed, 830 insertions(+), 93 deletions(-) create mode 100644 apps/documenteditor/mobile/index_loader.html create mode 100644 apps/presentationeditor/mobile/index_loader.html create mode 100644 apps/spreadsheeteditor/mobile/index_loader.html diff --git a/apps/documenteditor/mobile/index.html b/apps/documenteditor/mobile/index.html index e8e87a5ef..75f032d7d 100644 --- a/apps/documenteditor/mobile/index.html +++ b/apps/documenteditor/mobile/index.html @@ -61,12 +61,11 @@ margin: 0 auto; } - .loadmask > .brendpanel .loading-logo > i { + .loadmask > .brendpanel .loading-logo > img { display: inline-block; - width: 86px; - height: 20px; - background-image: url(../../common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + max-width: 100px; + max-height: 20px; + opacity: 0; } .loadmask > .brendpanel .circle { @@ -121,7 +120,7 @@ -
+
diff --git a/apps/documenteditor/mobile/index_loader.html b/apps/documenteditor/mobile/index_loader.html new file mode 100644 index 000000000..7ec0537f5 --- /dev/null +++ b/apps/documenteditor/mobile/index_loader.html @@ -0,0 +1,265 @@ + + + + + + + + + + ONLYOFFICE Documents + + + + + + + + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/apps/presentationeditor/mobile/index.html b/apps/presentationeditor/mobile/index.html index 6efc856a9..effc920b3 100644 --- a/apps/presentationeditor/mobile/index.html +++ b/apps/presentationeditor/mobile/index.html @@ -61,12 +61,11 @@ margin: 0 auto; } - .loadmask > .brendpanel .loading-logo > i { + .loadmask > .brendpanel .loading-logo > img { display: inline-block; - width: 86px; - height: 20px; - background-image: url(../../common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + max-width: 100px; + max-height: 20px; + opacity: 0; } .loadmask > .brendpanel .circle { @@ -158,7 +157,7 @@
@@ -199,40 +198,21 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - customer = params["customer"] ? ('
' + encodeUrlParam(params["customer"]) + '
') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; + logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; window.frameEditorId = params["frameEditorId"]; - if ( lang == 'de') loading = 'Ladevorgang...'; - else if ( lang == 'es') loading = 'Cargando...'; - else if ( lang == 'fr') loading = 'Chargement en cours...'; - else if ( lang == 'it') loading = 'Caricamento in corso...'; - else if ( lang == 'pt') loading = 'Carregando...'; - else if ( lang == 'ru') loading = 'Загрузка...'; - else if ( lang == 'sl') loading = 'Nalaganje...'; - else if ( lang == 'tr') loading = 'Yükleniyor...'; - else if ( lang == 'bg') loading = 'Зареждане...'; - else if ( lang == 'cs') loading = 'Nahrávám...'; - else if ( lang == 'hu') loading = 'Betöltés...'; - else if ( lang == 'ja') loading = '読み込み中...'; - else if ( lang == 'ko') loading = '로드 중...'; - else if ( lang == 'lv') loading = 'Ieladēšana ...'; - else if ( lang == 'nl') loading = 'Laden...'; - else if ( lang == 'pl') loading = 'Ładowanie...'; - else if ( lang == 'sk') loading = 'Nahrávam...'; - else if ( lang == 'uk') loading = 'Завантаження...'; - else if ( lang == 'vi') loading = 'Đang tải...'; - else if ( lang == 'zh') loading = '加载中...'; - var brendpanel = document.getElementsByClassName('brendpanel')[0]; if (brendpanel) { if (/Android/.test(navigator.userAgent)) { brendpanel.classList.add('android'); } brendpanel.classList.add('visible'); + var elem = document.querySelector('.loading-logo img'); + if (elem) { + logo && (elem.setAttribute('src', logo)); + elem.style.opacity = 1; + } } var placeholder = document.getElementsByClassName('placeholder')[0]; if (placeholder && /Android/.test(navigator.userAgent)) { diff --git a/apps/presentationeditor/mobile/index_loader.html b/apps/presentationeditor/mobile/index_loader.html new file mode 100644 index 000000000..07c555eb9 --- /dev/null +++ b/apps/presentationeditor/mobile/index_loader.html @@ -0,0 +1,265 @@ + + + + + + + + + + ONLYOFFICE Presentations + + + + + + + + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/index.html b/apps/spreadsheeteditor/mobile/index.html index 532f2ce12..dd3b30105 100644 --- a/apps/spreadsheeteditor/mobile/index.html +++ b/apps/spreadsheeteditor/mobile/index.html @@ -57,12 +57,11 @@ margin: 0 auto; } - .loadmask > .brendpanel .loading-logo > i { + .loadmask > .brendpanel .loading-logo > img { display: inline-block; - width: 86px; - height: 20px; - background-image: url(../../common/main/resources/img/header/header-logo.png); - background-repeat: no-repeat; + max-width: 100px; + max-height: 20px; + opacity: 0; } .loadmask > .brendpanel .circle { @@ -136,7 +135,7 @@
@@ -171,40 +170,21 @@ var params = getUrlParams(), lang = (params["lang"] || 'en').split(/[\-\_]/)[0], - customer = params["customer"] ? ('
' + encodeUrlParam(params["customer"]) + '
') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; + logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null; window.frameEditorId = params["frameEditorId"]; - if ( lang == 'de') loading = 'Ladevorgang...'; - else if ( lang == 'es') loading = 'Cargando...'; - else if ( lang == 'fr') loading = 'Chargement en cours...'; - else if ( lang == 'it') loading = 'Caricamento in corso...'; - else if ( lang == 'pt') loading = 'Carregando...'; - else if ( lang == 'ru') loading = 'Загрузка...'; - else if ( lang == 'sl') loading = 'Nalaganje...'; - else if ( lang == 'tr') loading = 'Yükleniyor...'; - else if ( lang == 'bg') loading = 'Зареждане...'; - else if ( lang == 'cs') loading = 'Nahrávám...'; - else if ( lang == 'hu') loading = 'Betöltés...'; - else if ( lang == 'ja') loading = '読み込み中...'; - else if ( lang == 'ko') loading = '로드 중...'; - else if ( lang == 'lv') loading = 'Ieladēšana ...'; - else if ( lang == 'nl') loading = 'Laden...'; - else if ( lang == 'pl') loading = 'Ładowanie...'; - else if ( lang == 'sk') loading = 'Nahrávam...'; - else if ( lang == 'uk') loading = 'Завантаження...'; - else if ( lang == 'vi') loading = 'Đang tải...'; - else if ( lang == 'zh') loading = '加载中...'; - var brendpanel = document.getElementsByClassName('brendpanel')[0]; if (brendpanel) { if (/Android/.test(navigator.userAgent)) { brendpanel.classList.add('android'); } brendpanel.classList.add('visible'); + var elem = document.querySelector('.loading-logo img'); + if (elem) { + logo && (elem.setAttribute('src', logo)); + elem.style.opacity = 1; + } } var placeholder = document.getElementsByClassName('placeholder')[0]; if (placeholder && /Android/.test(navigator.userAgent)) { diff --git a/apps/spreadsheeteditor/mobile/index_loader.html b/apps/spreadsheeteditor/mobile/index_loader.html new file mode 100644 index 000000000..02be1089c --- /dev/null +++ b/apps/spreadsheeteditor/mobile/index_loader.html @@ -0,0 +1,266 @@ + + + + + + + + + + ONLYOFFICE Spreadsheets + + + + + + + + + + + + +
+ + + + + + + + + + + \ No newline at end of file From 3e5d4ff58fabdd03458415d827d6fbe42cccb050 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 23 Jul 2019 12:17:47 +0300 Subject: [PATCH 014/193] Skeleton loader (fix less) --- .../mobile/resources/less/app-material.less | 25 +++++++++ apps/presentationeditor/mobile/index.html | 2 +- .../mobile/resources/css/app-ios.css | 47 ++++++++++++++++ .../mobile/resources/css/app-material.css | 47 ++++++++++++++++ .../mobile/resources/less/app-ios.less | 56 +++++++++++++++++++ .../mobile/resources/less/app-material.less | 56 +++++++++++++++++++ apps/spreadsheeteditor/mobile/index.html | 1 + .../mobile/resources/css/app-ios.css | 29 ++++++++++ .../mobile/resources/css/app-material.css | 29 ++++++++++ .../mobile/resources/less/app-ios.less | 37 ++++++++++++ .../mobile/resources/less/app-material.less | 37 ++++++++++++ 11 files changed, 365 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less index 54e5c2199..d39835fa7 100644 --- a/apps/documenteditor/mobile/resources/less/app-material.less +++ b/apps/documenteditor/mobile/resources/less/app-material.less @@ -255,4 +255,29 @@ input, textarea { ul:before { content: none; } +} + +// Skeleton of document + +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 10; + + > .line { + height: 15px; + margin: 30px; + background: #e2e2e2; + overflow: hidden; + position: relative; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/index.html b/apps/presentationeditor/mobile/index.html index 313d4fc12..1e561ca77 100644 --- a/apps/presentationeditor/mobile/index.html +++ b/apps/presentationeditor/mobile/index.html @@ -79,7 +79,7 @@ } .loadmask > .placeholder { - background: rgba(255, 255, 255, 0.2); + background: #f5f5f5; width: 100%; height: 100%; padding-top: 56px; diff --git a/apps/presentationeditor/mobile/resources/css/app-ios.css b/apps/presentationeditor/mobile/resources/css/app-ios.css index 793548ff6..f8ccf98a9 100644 --- a/apps/presentationeditor/mobile/resources/css/app-ios.css +++ b/apps/presentationeditor/mobile/resources/css/app-ios.css @@ -6896,3 +6896,50 @@ html.pixel-ratio-3 .numbers li { #user-list ul:before { content: none; } +.doc-placeholder { + background: #f5f5f5; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + position: absolute; + padding-top: 12px; +} +.doc-placeholder .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + width: 90%; + margin: 15px auto; +} +.doc-placeholder .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; +} +.doc-placeholder .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} +.doc-placeholder .slide-container > .line { + height: 40%; + margin: auto 60px; + border-radius: 6px; + background: #f5f5f5; +} +.doc-placeholder .slide-container > .line:nth-child(1) { + height: 50%; + margin: auto 35px; +} diff --git a/apps/presentationeditor/mobile/resources/css/app-material.css b/apps/presentationeditor/mobile/resources/css/app-material.css index 39ffc9763..ea40db6e0 100644 --- a/apps/presentationeditor/mobile/resources/css/app-material.css +++ b/apps/presentationeditor/mobile/resources/css/app-material.css @@ -6724,3 +6724,50 @@ html.pixel-ratio-3 .numbers li { #user-list ul:before { content: none; } +.doc-placeholder { + background: #f5f5f5; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + position: absolute; + padding-top: 22px; +} +.doc-placeholder .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + width: 90%; + margin: 15px auto; +} +.doc-placeholder .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; +} +.doc-placeholder .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} +.doc-placeholder .slide-container > .line { + height: 40%; + margin: auto 60px; + border-radius: 6px; + background: #f5f5f5; +} +.doc-placeholder .slide-container > .line:nth-child(1) { + height: 50%; + margin: auto 35px; +} diff --git a/apps/presentationeditor/mobile/resources/less/app-ios.less b/apps/presentationeditor/mobile/resources/less/app-ios.less index 2ac567445..1a6054b97 100644 --- a/apps/presentationeditor/mobile/resources/less/app-ios.less +++ b/apps/presentationeditor/mobile/resources/less/app-ios.less @@ -273,4 +273,60 @@ input, textarea { ul:before { content: none; } +} + +// Skeleton of document + +.doc-placeholder { + background: #f5f5f5; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + position: absolute; + padding-top: 12px; + + .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + width: 90%; + margin: 15px auto; + } + + .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; + } + + .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + > .line { + height: 40%; + margin: auto 60px; + border-radius: 6px; + background: #f5f5f5; + + &:nth-child(1) { + height: 50%; + margin: auto 35px; + } + } + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/resources/less/app-material.less b/apps/presentationeditor/mobile/resources/less/app-material.less index 604bfa755..58bd3f23a 100644 --- a/apps/presentationeditor/mobile/resources/less/app-material.less +++ b/apps/presentationeditor/mobile/resources/less/app-material.less @@ -260,4 +260,60 @@ input, textarea { ul:before { content: none; } +} + +// Skeleton of document + +.doc-placeholder { + background: #f5f5f5; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + position: absolute; + padding-top: 22px; + + .slide-h { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + width: 90%; + margin: 15px auto; + } + + .slide-v { + display: flex; + position: relative; + flex-direction: column; + padding-bottom: 56.1333%; + } + + .slide-container { + position: absolute; + height: 100%; + width: 100%; + background: #fbfbfb; + border: 1px solid #dfdfdf; + display: grid; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + > .line { + height: 40%; + margin: auto 60px; + border-radius: 6px; + background: #f5f5f5; + + &:nth-child(1) { + height: 50%; + margin: auto 35px; + } + } + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/index.html b/apps/spreadsheeteditor/mobile/index.html index 77a2b2e56..683514306 100644 --- a/apps/spreadsheeteditor/mobile/index.html +++ b/apps/spreadsheeteditor/mobile/index.html @@ -103,6 +103,7 @@ } .loadmask > .placeholder > .columns:first-child { + position: absolute; background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; background-size: 20px 20px; width: 35px; diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css index 0adba5b26..972d80f78 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -7460,3 +7460,32 @@ html.pixel-ratio-3 .cell-styles.dataview .row li { .lang-flag.es-MX { background-position: -16px -192px; } +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + padding-top: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.doc-placeholder > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0, 0, 0, 0) 1px) 0 0, linear-gradient(rgba(0, 255, 0, 0) 19px, #d5d5d5 20px) 0 0, linear-gradient(#f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} +.doc-placeholder > .columns:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; +} diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css index f4134c4ed..e81c01687 100644 --- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -7330,3 +7330,32 @@ html.pixel-ratio-3 .cell-styles.dataview .row li { .lang-flag.es-MX { background-position: -16px -192px; } +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + padding-top: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.doc-placeholder > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0, 0, 0, 0) 1px) 0 0, linear-gradient(rgba(0, 255, 0, 0) 19px, #d5d5d5 20px) 0 0, linear-gradient(#f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; +} +.doc-placeholder > .columns:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; +} diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less index c255df6f4..458767033 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less +++ b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less @@ -318,4 +318,41 @@ input, textarea { &.zh, &.zh-CN {background-position: -32px -180px;} &.ja, &.ja-JP {background-position: 0 -192px;} &.es-MX {background-position: -16px -192px;} +} + +// Skeleton of workbook + +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + padding-top: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0, + linear-gradient(rgba(0,255,0,0) 19px, #d5d5d5 20px) 0 0, + linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + &:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; + } + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-material.less b/apps/spreadsheeteditor/mobile/resources/less/app-material.less index 8ec1cb479..4f2e38a50 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/app-material.less +++ b/apps/spreadsheeteditor/mobile/resources/less/app-material.less @@ -305,4 +305,41 @@ input, textarea { &.zh, &.zh-CN {background-position: -32px -180px;} &.ja, &.ja-JP {background-position: 0 -192px;} &.es-MX {background-position: -16px -192px;} +} + +// Skeleton of workbook + +.doc-placeholder { + background: #fbfbfb; + width: 100%; + height: 100%; + border: 1px solid #dfdfdf; + white-space: nowrap; + padding-top: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + > .columns { + width: 100%; + height: 100%; + display: inline-block; + background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0, + linear-gradient(rgba(0,255,0,0) 19px, #d5d5d5 20px) 0 0, + linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x; + background-size: 80px 20px; + + -webkit-animation: flickerAnimation 2s infinite ease-in-out; + -moz-animation: flickerAnimation 2s infinite ease-in-out; + -o-animation: flickerAnimation 2s infinite ease-in-out; + animation: flickerAnimation 2s infinite ease-in-out; + + &:first-child { + background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0; + background-size: 20px 20px; + width: 35px; + } + } } \ No newline at end of file From 4725e80119c392c2a42c3b49b272034aa54a7701 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 29 Jul 2019 14:24:20 +0300 Subject: [PATCH 015/193] [common] refactoring for components --- apps/common/main/lib/component/Button.js | 2 +- apps/common/main/lib/component/CheckBox.js | 16 +++++++--------- apps/common/main/lib/component/ColorPalette.js | 8 +++----- .../main/lib/component/ColorPaletteExt.js | 6 +++--- apps/common/main/lib/component/ComboBox.js | 7 +++---- .../common/main/lib/component/ComboDataView.js | 2 +- apps/common/main/lib/component/DataView.js | 4 ++-- .../main/lib/component/DimensionPicker.js | 4 ++-- .../main/lib/component/HSBColorPicker.js | 4 ++-- apps/common/main/lib/component/InputField.js | 7 +++---- apps/common/main/lib/component/MaskedField.js | 6 +++--- apps/common/main/lib/component/Menu.js | 8 ++++---- apps/common/main/lib/component/MenuItem.js | 13 ++++++------- .../common/main/lib/component/MetricSpinner.js | 8 ++++---- apps/common/main/lib/component/RadioBox.js | 5 ++--- apps/common/main/lib/component/Scroller.js | 2 +- apps/common/main/lib/component/Slider.js | 14 ++++++-------- apps/common/main/lib/component/Switcher.js | 7 +++---- apps/common/main/lib/component/TableStyler.js | 4 ++-- .../main/lib/component/ThemeColorPalette.js | 18 +++++++++--------- apps/common/main/lib/component/TreeView.js | 2 +- 21 files changed, 68 insertions(+), 79 deletions(-) diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js index 816c88988..76a0957e6 100644 --- a/apps/common/main/lib/component/Button.js +++ b/apps/common/main/lib/component/Button.js @@ -319,7 +319,7 @@ define([ me.trigger('render:before', me); - me.cmpEl = $(me.el); + me.cmpEl = me.$el || $(me.el); if (parentEl) { me.setElement(parentEl, false); diff --git a/apps/common/main/lib/component/CheckBox.js b/apps/common/main/lib/component/CheckBox.js index 5aaa8a112..0d3d35c75 100644 --- a/apps/common/main/lib/component/CheckBox.js +++ b/apps/common/main/lib/component/CheckBox.js @@ -104,27 +104,25 @@ define([ }, render: function (parentEl) { - var me = this, - el = $(this.el); + var me = this; if (!me.rendered) { if (parentEl) { this.setElement(parentEl, false); parentEl.html(this.template({ labelText: this.options.labelText })); - el = $(this.el); } else { - el.html(this.template({ + me.$el.html(this.template({ labelText: this.options.labelText })); } - this.$chk = el.find('input[type=button]'); - this.$label = el.find('label'); - this.$chk.on('click', _.bind(this.onItemCheck, this)); - } + this.$chk = me.$el.find('input[type=button]'); + this.$label = me.$el.find('label'); + this.$chk.on('click', this.onItemCheck.bind(this)); - this.rendered = true; + this.rendered = true; + } if (this.options.disabled) this.setDisabled(this.options.disabled); diff --git a/apps/common/main/lib/component/ColorPalette.js b/apps/common/main/lib/component/ColorPalette.js index 106cfb761..ba35ca857 100644 --- a/apps/common/main/lib/component/ColorPalette.js +++ b/apps/common/main/lib/component/ColorPalette.js @@ -91,16 +91,14 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + me.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = me.$el || $(this.el); } if (!me.rendered) { - var el = this.cmpEl; - - el.on('click', 'span.color-item', _.bind(this.itemClick, this)); + me.cmpEl.on('click', 'span.color-item', me.itemClick.bind(me)); } me.rendered = true; diff --git a/apps/common/main/lib/component/ColorPaletteExt.js b/apps/common/main/lib/component/ColorPaletteExt.js index 98eadf69d..a6b7e9c9a 100644 --- a/apps/common/main/lib/component/ColorPaletteExt.js +++ b/apps/common/main/lib/component/ColorPaletteExt.js @@ -108,12 +108,12 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } - this.cmpEl.on('click', _.bind(this.handleClick, this)); + this.cmpEl.on('click', me.handleClick.bind(me)); } else { - this.cmpEl = $(this.el); + this.cmpEl = me.$el || $(this.el); } me.rendered = true; diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js index 8b24e3caf..2cccb52e0 100644 --- a/apps/common/main/lib/component/ComboBox.js +++ b/apps/common/main/lib/component/ComboBox.js @@ -104,8 +104,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; this.id = me.options.id || Common.UI.getId(); this.cls = me.options.cls; @@ -158,10 +157,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = me.$el || $(this.el); } if (!me.rendered) { diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js index c10d000ca..d2b1e9b3e 100644 --- a/apps/common/main/lib/component/ComboDataView.js +++ b/apps/common/main/lib/component/ComboDataView.js @@ -148,7 +148,7 @@ define([ me.trigger('render:before', me); - me.cmpEl = $(me.el); + me.cmpEl = me.$el || $(me.el); var templateEl = me.template({ id : me.id, diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js index 67a027902..09c9e0a32 100644 --- a/apps/common/main/lib/component/DataView.js +++ b/apps/common/main/lib/component/DataView.js @@ -135,7 +135,7 @@ define([ if (_.isUndefined(this.model.id)) return this; - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template(this.model.toJSON())); el.addClass('item'); @@ -262,7 +262,6 @@ define([ this.trigger('render:before', this); - this.cmpEl = $(this.el); if (parentEl) { this.setElement(parentEl, false); this.cmpEl = $(this.template({ @@ -272,6 +271,7 @@ define([ parentEl.html(this.cmpEl); } else { + this.cmpEl = me.$el || $(this.el); this.cmpEl.html(this.template({ groups: me.groups ? me.groups.toJSON() : null, style: me.style diff --git a/apps/common/main/lib/component/DimensionPicker.js b/apps/common/main/lib/component/DimensionPicker.js index 72c4d6b25..dab30a9d2 100644 --- a/apps/common/main/lib/component/DimensionPicker.js +++ b/apps/common/main/lib/component/DimensionPicker.js @@ -97,7 +97,7 @@ define([ me = this; - rootEl = $(this.el); + rootEl = me.$el || $(this.el); me.itemSize = me.options.itemSize; me.minRows = me.options.minRows; @@ -133,7 +133,7 @@ define([ }, render: function() { - $(this.el).html(this.template()); + (this.$el || $(this.el)).html(this.template()); return this; }, diff --git a/apps/common/main/lib/component/HSBColorPicker.js b/apps/common/main/lib/component/HSBColorPicker.js index 1a17387e1..316d862c9 100644 --- a/apps/common/main/lib/component/HSBColorPicker.js +++ b/apps/common/main/lib/component/HSBColorPicker.js @@ -82,7 +82,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); var me = this, - el = $(this.el), + el = me.$el || $(this.el), arrowSatBrightness, arrowHue, areaSatBrightness, areaHue, previewColor, previewTransparentColor, previewColorText, @@ -278,7 +278,7 @@ define([ }, render: function () { - $(this.el).html(this.template()); + (this.$el || $(this.el)).html(this.template()); this.trigger('render:after', this); return this; diff --git a/apps/common/main/lib/component/InputField.js b/apps/common/main/lib/component/InputField.js index 054721355..952dbe54b 100644 --- a/apps/common/main/lib/component/InputField.js +++ b/apps/common/main/lib/component/InputField.js @@ -94,8 +94,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; this.id = me.options.id || Common.UI.getId(); this.cls = me.options.cls; @@ -142,10 +141,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = this.$el; } if (!me.rendered) { diff --git a/apps/common/main/lib/component/MaskedField.js b/apps/common/main/lib/component/MaskedField.js index 611e80bb9..1c55f7026 100644 --- a/apps/common/main/lib/component/MaskedField.js +++ b/apps/common/main/lib/component/MaskedField.js @@ -48,7 +48,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); var me = this, - el = $(this.el); + el = me.$el || $(this.el); el.addClass('masked-field user-select'); el.attr('maxlength', me.options.maxLength); @@ -75,11 +75,11 @@ define([ setValue: function(value) { if (this.options.maskExp.test(value) && value.length<=this.options.maxLength) - $(this.el).val(value); + this.$el.val(value); }, getValue: function() { - $(this.el).val(); + this.$el.val(); } }); }); \ No newline at end of file diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index bb04c6b57..597b0baa6 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -208,7 +208,7 @@ define([ this.trigger('render:before', this); - this.cmpEl = $(this.el); + this.cmpEl = me.$el || $(this.el); if (parentEl) { this.setElement(parentEl, false); @@ -225,7 +225,7 @@ define([ this.cmpEl = this.template({ options : me.options }); - $(this.el).append(this.cmpEl); + this.$el.append(this.cmpEl); } } @@ -246,7 +246,7 @@ define([ if (this.options.maxHeight) { menuRoot.css({'max-height': me.options.maxHeight}); this.scroller = new Common.UI.Scroller({ - el: $(this.el).find('.dropdown-menu '), + el: me.$el.find('.dropdown-menu '), minScrollbarLength: 30, suppressScrollX: true, alwaysVisibleY: this.scrollAlwaysVisible @@ -543,7 +543,7 @@ define([ if (top + menuH > docH) { menuRoot.css('max-height', (docH - top) + 'px'); (!this.scroller) && (this.scroller = new Common.UI.Scroller({ - el: $(this.el).find('.dropdown-menu '), + el: this.$el.find('.dropdown-menu '), minScrollbarLength: 30, suppressScrollX: true, alwaysVisibleY: this.scrollAlwaysVisible diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js index 7b49b77e2..7d7193987 100644 --- a/apps/common/main/lib/component/MenuItem.js +++ b/apps/common/main/lib/component/MenuItem.js @@ -119,8 +119,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; this.id = me.options.id || Common.UI.getId(); this.cls = me.options.cls; @@ -148,7 +147,7 @@ define([ render: function() { var me = this, - el = $(this.el); + el = me.$el || $(this.el); me.trigger('render:before', me); @@ -159,7 +158,7 @@ define([ el.off('click'); Common.UI.ToggleManager.unregister(me); - $(this.el).html(this.template({ + el.html(this.template({ id : me.id, caption : me.caption, iconCls : me.iconCls, @@ -170,7 +169,7 @@ define([ if (me.menu) { el.addClass('dropdown-submenu'); - me.menu.render($(this.el)); + me.menu.render(el); el.mouseenter(_.bind(me.menu.alignPosition, me.menu)); // el.focusin(_.bind(me.onFocusItem, me)); el.focusout(_.bind(me.onBlurItem, me)); @@ -214,7 +213,7 @@ define([ } if (this.disabled) - $(this.el).toggleClass('disabled', this.disabled); + el.toggleClass('disabled', this.disabled); el.on('click', _.bind(this.onItemClick, this)); el.on('mousedown', _.bind(this.onItemMouseDown, this)); @@ -223,7 +222,7 @@ define([ } } - me.cmpEl = $(this.el); + me.cmpEl = el; me.rendered = true; me.trigger('render:after', me); diff --git a/apps/common/main/lib/component/MetricSpinner.js b/apps/common/main/lib/component/MetricSpinner.js index e64b61522..584db251d 100644 --- a/apps/common/main/lib/component/MetricSpinner.js +++ b/apps/common/main/lib/component/MetricSpinner.js @@ -128,7 +128,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); var me = this, - el = $(this.el); + el = me.$el || $(this.el); el.addClass('spinner'); @@ -165,7 +165,7 @@ define([ this.setRawValue(this.value); if (this.options.width) { - $(this.el).width(this.options.width); + el.width(this.options.width); } if (this.options.defaultValue===undefined) @@ -176,7 +176,7 @@ define([ }, render: function () { - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template); this.$input = el.find('.form-control'); @@ -189,7 +189,7 @@ define([ }, setDisabled: function(disabled) { - var el = $(this.el); + var el = this.$el || $(this.el); if (disabled !== this.disabled) { el.find('button').toggleClass('disabled', disabled); el.toggleClass('disabled', disabled); diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js index 8b7ff4b6f..1b0f7084b 100644 --- a/apps/common/main/lib/component/RadioBox.js +++ b/apps/common/main/lib/component/RadioBox.js @@ -76,8 +76,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; this.name = this.options.name || Common.UI.getId(); @@ -94,7 +93,7 @@ define([ }, render: function () { - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template({ labelText: this.options.labelText, name: this.name diff --git a/apps/common/main/lib/component/Scroller.js b/apps/common/main/lib/component/Scroller.js index 53e3783dd..db564e0d4 100644 --- a/apps/common/main/lib/component/Scroller.js +++ b/apps/common/main/lib/component/Scroller.js @@ -78,7 +78,7 @@ define([ render: function() { var me = this; - me.cmpEl = $(this.el); + me.cmpEl = me.$el || $(this.el); if (!me.rendered) { me.cmpEl.perfectScrollbar(_.extend({}, me.options)); diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index d11430466..0ee059b7e 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -104,8 +104,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; me.width = me.options.width; me.minValue = me.options.minValue; @@ -131,10 +130,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + me.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = me.$el; } this.cmpEl.find('.track-center').width(me.options.width - 14); @@ -299,8 +298,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; me.width = me.options.width; me.minValue = me.options.minValue; @@ -326,10 +324,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = this.$el; } var el = this.cmpEl; diff --git a/apps/common/main/lib/component/Switcher.js b/apps/common/main/lib/component/Switcher.js index e393011d2..a474e40ae 100644 --- a/apps/common/main/lib/component/Switcher.js +++ b/apps/common/main/lib/component/Switcher.js @@ -65,8 +65,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; me.width = me.options.width; me.thumbWidth = me.options.thumbWidth; @@ -89,10 +88,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = this.$el; } this.thumb = this.cmpEl.find('.thumb'); diff --git a/apps/common/main/lib/component/TableStyler.js b/apps/common/main/lib/component/TableStyler.js index 1f2868e90..fab6c9640 100644 --- a/apps/common/main/lib/component/TableStyler.js +++ b/apps/common/main/lib/component/TableStyler.js @@ -335,10 +335,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = this.$el; } me.rendered = true; diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js index 98899fd45..10549495c 100644 --- a/apps/common/main/lib/component/ThemeColorPalette.js +++ b/apps/common/main/lib/component/ThemeColorPalette.js @@ -98,7 +98,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); var me = this, - el = $(this.el); + el = me.$el || $(this.el); this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent); @@ -116,7 +116,7 @@ define([ }, render: function () { - $(this.el).html(this.template({colors: this.colors})); + this.$el.html(this.template({colors: this.colors})); return this; }, @@ -144,7 +144,7 @@ define([ }, updateCustomColors: function() { - var el = $(this.el); + var el = this.$el || $(this.el); if (el) { var selected = el.find('a.' + this.selectedCls), color = (selected.length>0 && /color-dynamic/.test(selected[0].className)) ? selected.attr('color') : undefined; @@ -221,7 +221,7 @@ define([ }, setCustomColor: function(color) { - var el = $(this.el); + var el = this.$el || $(this.el); color = /#?([a-fA-F0-9]{6})/.exec(color); if (color) { this.saveCustomColor(color[1]); @@ -272,7 +272,7 @@ define([ }, select: function(color, suppressEvent) { - var el = $(this.el); + var el = this.$el || $(this.el); el.find('a.' + this.selectedCls).removeClass(this.selectedCls); if (typeof(color) == 'object' ) { @@ -321,7 +321,7 @@ define([ }, selectByRGB: function(rgb, suppressEvent) { - var el = $(this.el); + var el = this.$el || $(this.el); el.find('a.' + this.selectedCls).removeClass(this.selectedCls); var color = (typeof(rgb) == 'object') ? rgb.color : rgb; @@ -351,7 +351,7 @@ define([ if (effectcolors===undefined || standartcolors===undefined) return; var me = this, - el = $(this.el); + el = me.$el || $(this.el); if (me.aColorElements === undefined) { me.aColorElements = el.find('a.palette-color'); @@ -407,7 +407,7 @@ define([ if (value) this.select(value, true); else { - var selected = $(this.el).find('a.' + this.selectedCls); + var selected = el.find('a.' + this.selectedCls); if (selected.length && selected.hasClass('palette-color-effect')) { this.value = selected[0].className.match(this.colorRe)[1].toUpperCase(); } @@ -416,7 +416,7 @@ define([ }, clearSelection: function(suppressEvent) { - $(this.el).find('a.' + this.selectedCls).removeClass(this.selectedCls); + this.$el.find('a.' + this.selectedCls).removeClass(this.selectedCls); this.value = undefined; }, diff --git a/apps/common/main/lib/component/TreeView.js b/apps/common/main/lib/component/TreeView.js index c95bb9878..d8b645e2c 100644 --- a/apps/common/main/lib/component/TreeView.js +++ b/apps/common/main/lib/component/TreeView.js @@ -193,7 +193,7 @@ define([ }); if (view) { - var innerEl = $(this.el).find('.inner').addBack().filter('.inner'); + var innerEl = (this.$el || $(this.el)).find('.inner').addBack().filter('.inner'); if (innerEl) { (this.dataViewItems.length<1) && innerEl.find('.empty-text').remove(); From 56201f99c589e282590e249ce30983b38cd3bff7 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 29 Jul 2019 16:56:47 +0300 Subject: [PATCH 016/193] [DE] 'left' menu refactoring --- apps/documenteditor/main/app/view/LeftMenu.js | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/apps/documenteditor/main/app/view/LeftMenu.js b/apps/documenteditor/main/app/view/LeftMenu.js index 767fd4613..b47dd4893 100644 --- a/apps/documenteditor/main/app/view/LeftMenu.js +++ b/apps/documenteditor/main/app/view/LeftMenu.js @@ -90,13 +90,11 @@ define([ }, render: function () { - var el = $(this.el); - el.html(this.template({ - })); + var $markup = $(this.template({})); this.btnSearch = new Common.UI.Button({ action: 'search', - el: $('#left-btn-search'), + el: $markup.elementById('#left-btn-search'), hint: this.tipSearch + Common.Utils.String.platformKey('Ctrl+F'), disabled: true, enableToggle: true @@ -104,7 +102,7 @@ define([ this.btnAbout = new Common.UI.Button({ action: 'about', - el: $('#left-btn-about'), + el: $markup.elementById('#left-btn-about'), hint: this.tipAbout, enableToggle: true, disabled: true, @@ -113,14 +111,14 @@ define([ this.btnSupport = new Common.UI.Button({ action: 'support', - el: $('#left-btn-support'), + el: $markup.elementById('#left-btn-support'), hint: this.tipSupport, disabled: true }); /** coauthoring begin **/ this.btnComments = new Common.UI.Button({ - el: $('#left-btn-comments'), + el: $markup.elementById('#left-btn-comments'), hint: this.tipComments + Common.Utils.String.platformKey('Ctrl+Shift+H'), enableToggle: true, disabled: true, @@ -128,7 +126,7 @@ define([ }); this.btnChat = new Common.UI.Button({ - el: $('#left-btn-chat'), + el: $markup.elementById('#left-btn-chat'), hint: this.tipChat + Common.Utils.String.platformKey('Alt+Q'), enableToggle: true, disabled: true, @@ -138,32 +136,34 @@ define([ this.btnComments.hide(); this.btnChat.hide(); - this.btnComments.on('click', _.bind(this.onBtnMenuClick, this)); - this.btnComments.on('toggle', _.bind(this.onBtnCommentsToggle, this)); - this.btnChat.on('click', _.bind(this.onBtnMenuClick, this)); + this.btnComments.on('click', this.onBtnMenuClick.bind(this)); + this.btnComments.on('toggle', this.onBtnCommentsToggle.bind(this)); + this.btnChat.on('click', this.onBtnMenuClick.bind(this)); /** coauthoring end **/ this.btnPlugins = new Common.UI.Button({ - el: $('#left-btn-plugins'), + el: $markup.elementById('#left-btn-plugins'), hint: this.tipPlugins, enableToggle: true, disabled: true, toggleGroup: 'leftMenuGroup' }); this.btnPlugins.hide(); - this.btnPlugins.on('click', _.bind(this.onBtnMenuClick, this)); + this.btnPlugins.on('click', this.onBtnMenuClick.bind(this)); this.btnNavigation = new Common.UI.Button({ - el: $('#left-btn-navigation'), + el: $markup.elementById('#left-btn-navigation'), hint: this.tipNavigation, enableToggle: true, disabled: true, toggleGroup: 'leftMenuGroup' }); - this.btnNavigation.on('click', _.bind(this.onBtnMenuClick, this)); + this.btnNavigation.on('click', this.onBtnMenuClick.bind(this)); - this.btnSearch.on('click', _.bind(this.onBtnMenuClick, this)); - this.btnAbout.on('toggle', _.bind(this.onBtnMenuToggle, this)); + this.btnSearch.on('click', this.onBtnMenuClick.bind(this)); + this.btnAbout.on('toggle', this.onBtnMenuToggle.bind(this)); + + this.$el.html($markup); this.menuFile = new DE.Views.FileMenu(); this.menuFile.render(); From ae617b0736b4e4513aead49e391d300291dcc39b Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 29 Jul 2019 17:00:21 +0300 Subject: [PATCH 017/193] [DE] 'left' menu + 'file' menu + about refactoring --- apps/common/main/lib/view/About.js | 107 ++++++++++-------- apps/documenteditor/main/app/view/FileMenu.js | 106 ++++++++++++----- apps/documenteditor/main/app/view/LeftMenu.js | 7 +- 3 files changed, 141 insertions(+), 79 deletions(-) diff --git a/apps/common/main/lib/view/About.js b/apps/common/main/lib/view/About.js index 4a50978b3..5bf6bf72a 100644 --- a/apps/common/main/lib/view/About.js +++ b/apps/common/main/lib/view/About.js @@ -45,6 +45,7 @@ define([ Common.Views.About = Common.UI.BaseView.extend(_.extend({ menu: undefined, + rendered: false, options: { alias: 'Common.Views.About' }, @@ -152,81 +153,95 @@ define([ }, render: function() { - var el = $(this.el); - el.html(this.template({ - publishername: '{{PUBLISHER_NAME}}', - publisheraddr: '{{PUBLISHER_ADDRESS}}', - publisherurl: '{{PUBLISHER_URL}}', - supportemail: '{{SUPPORT_EMAIL}}', - phonenum: '{{PUBLISHER_PHONE}}', - scope: this - })); + if ( !this.rendered ) { + this.rendered = true; - el.addClass('about-dlg'); - this.cntLicenseeInfo = $('#id-about-licensee-info'); - this.cntLicensorInfo = $('#id-about-licensor-info'); - this.divCompanyLogo = $('#id-about-company-logo'); - this.lblCompanyName = $('#id-about-company-name'); - this.lblCompanyAddress = $('#id-about-company-address'); - this.lblCompanyMail = $('#id-about-company-mail'); - this.lblCompanyUrl = $('#id-about-company-url'); - this.lblCompanyLic = $('#id-about-company-lic'); + var _$l = $(this.template({ + publishername: '{{PUBLISHER_NAME}}', + publisheraddr: '{{PUBLISHER_ADDRESS}}', + publisherurl: '{{PUBLISHER_URL}}', + supportemail: '{{SUPPORT_EMAIL}}', + phonenum: '{{PUBLISHER_PHONE}}', + scope: this + })); - if (_.isUndefined(this.scroller)) { - this.scroller = new Common.UI.Scroller({ - el: $(this.el), - suppressScrollX: true - }); + this.cntLicenseeInfo = _$l.findById('#id-about-licensee-info'); + this.cntLicensorInfo = _$l.findById('#id-about-licensor-info'); + this.divCompanyLogo = _$l.findById('#id-about-company-logo'); + this.lblCompanyName = _$l.findById('#id-about-company-name'); + this.lblCompanyAddress = _$l.findById('#id-about-company-address'); + this.lblCompanyMail = _$l.findById('#id-about-company-mail'); + this.lblCompanyUrl = _$l.findById('#id-about-company-url'); + this.lblCompanyLic = _$l.findById('#id-about-company-lic'); + + if ( this.licData ) + this.setLicInfo(this.licData); + + this.$el.html(_$l); + this.$el.addClass('about-dlg'); + + if (_.isUndefined(this.scroller)) { + this.scroller = new Common.UI.Scroller({ + el: this.$el, + suppressScrollX: true + }); + } } return this; }, setLicInfo: function(data){ - if (data && typeof data == 'object' && typeof(data.customer)=='object') { - var customer = data.customer; - - $('#id-about-licensor-logo').addClass('hidden'); - $('#id-about-licensor-short').removeClass('hidden'); - this.cntLicensorInfo.addClass('hidden'); + if ( !this.rendered ) { + this.licData = data || true; + } else { + if (data && typeof data == 'object' && typeof(data.customer)=='object') { + var customer = data.customer; - this.cntLicenseeInfo.removeClass('hidden'); - this.cntLicensorInfo.removeClass('margin-bottom'); + $('#id-about-licensor-logo').addClass('hidden'); + $('#id-about-licensor-short').removeClass('hidden'); + this.cntLicensorInfo.addClass('hidden'); - var value = customer.name; - value && value.length ? + this.cntLicenseeInfo.removeClass('hidden'); + this.cntLicensorInfo.removeClass('margin-bottom'); + + var value = customer.name; + value && value.length ? this.lblCompanyName.text(value) : this.lblCompanyName.parents('tr').addClass('hidden'); - value = customer.address; - value && value.length ? + value = customer.address; + value && value.length ? this.lblCompanyAddress.text(value) : this.lblCompanyAddress.parents('tr').addClass('hidden'); - (value = customer.mail) && value.length ? + (value = customer.mail) && value.length ? this.lblCompanyMail.attr('href', "mailto:"+value).text(value) : this.lblCompanyMail.parents('tr').addClass('hidden'); - if ((value = customer.www) && value.length) { - var http = !/^https?:\/{2}/i.test(value) ? "http:\/\/" : ''; - this.lblCompanyUrl.attr('href', http+value).text(value); - } else - this.lblCompanyUrl.parents('tr').addClass('hidden'); + if ((value = customer.www) && value.length) { + var http = !/^https?:\/{2}/i.test(value) ? "http:\/\/" : ''; + this.lblCompanyUrl.attr('href', http+value).text(value); + } else + this.lblCompanyUrl.parents('tr').addClass('hidden'); - (value = customer.info) && value.length ? + (value = customer.info) && value.length ? this.lblCompanyLic.text(value) : this.lblCompanyLic.parents('tr').addClass('hidden'); - (value = customer.logo) && value.length ? + (value = customer.logo) && value.length ? this.divCompanyLogo.html('') : this.divCompanyLogo.parents('tr').addClass('hidden'); - } else { - this.cntLicenseeInfo.addClass('hidden'); - this.cntLicensorInfo.addClass('margin-bottom'); + } else { + this.cntLicenseeInfo.addClass('hidden'); + this.cntLicensorInfo.addClass('margin-bottom'); + } } }, show: function () { + if ( !this.rendered ) this.render(); + Common.UI.BaseView.prototype.show.call(this,arguments); this.fireEvent('show', this ); }, diff --git a/apps/documenteditor/main/app/view/FileMenu.js b/apps/documenteditor/main/app/view/FileMenu.js index 42b20e6ba..feba75b02 100644 --- a/apps/documenteditor/main/app/view/FileMenu.js +++ b/apps/documenteditor/main/app/view/FileMenu.js @@ -49,6 +49,7 @@ define([ DE.Views.FileMenu = Common.UI.BaseView.extend(_.extend({ el: '#file-menu-panel', + rendered: false, options: {alias:'FileMenu'}, template: _.template(tpl), @@ -81,95 +82,104 @@ define([ }, render: function () { - this.$el = $(this.el); - this.$el.html(this.template()); + let $markup = $(this.template()); this.miSave = new Common.UI.MenuItem({ - el : $('#fm-btn-save',this.el), + el : $markup.elementById('#fm-btn-save'), action : 'save', caption : this.btnSaveCaption, canFocused: false }); + if ( !!this.options.miSave ) { + this.miSave.setDisabled(this.options.miSave.isDisabled()); + delete this.options.miSave; + } + this.miEdit = new Common.UI.MenuItem({ - el : $('#fm-btn-edit',this.el), + el : $markup.elementById('#fm-btn-edit'), action : 'edit', caption : this.btnToEditCaption, canFocused: false }); this.miDownload = new Common.UI.MenuItem({ - el : $('#fm-btn-download',this.el), + el : $markup.elementById('#fm-btn-download'), action : 'saveas', caption : this.btnDownloadCaption, canFocused: false }); this.miSaveCopyAs = new Common.UI.MenuItem({ - el : $('#fm-btn-save-copy',this.el), + el : $markup.elementById('#fm-btn-save-copy'), action : 'save-copy', caption : this.btnSaveCopyAsCaption, canFocused: false }); this.miSaveAs = new Common.UI.MenuItem({ - el : $('#fm-btn-save-desktop',this.el), + el : $markup.elementById('#fm-btn-save-desktop'), action : 'save-desktop', caption : this.btnSaveAsCaption, canFocused: false }); this.miPrint = new Common.UI.MenuItem({ - el : $('#fm-btn-print',this.el), + el : $markup.elementById('#fm-btn-print'), action : 'print', caption : this.btnPrintCaption, canFocused: false }); this.miRename = new Common.UI.MenuItem({ - el : $('#fm-btn-rename',this.el), + el : $markup.elementById('#fm-btn-rename'), action : 'rename', caption : this.btnRenameCaption, canFocused: false }); + if ( !!this.options.miRename ) { + this.miRename.setDisabled(this.options.miRename.isDisabled()); + delete this.options.miRename; + } + this.miProtect = new Common.UI.MenuItem({ - el : $('#fm-btn-protect',this.el), + el : $markup.elementById('#fm-btn-protect'), action : 'protect', caption : this.btnProtectCaption, canFocused: false }); this.miRecent = new Common.UI.MenuItem({ - el : $('#fm-btn-recent',this.el), + el : $markup.elementById('#fm-btn-recent'), action : 'recent', caption : this.btnRecentFilesCaption, canFocused: false }); this.miNew = new Common.UI.MenuItem({ - el : $('#fm-btn-create',this.el), + el : $markup.elementById('#fm-btn-create'), action : 'new', caption : this.btnCreateNewCaption, canFocused: false }); this.miAccess = new Common.UI.MenuItem({ - el : $('#fm-btn-rights',this.el), + el : $markup.elementById('#fm-btn-rights'), action : 'rights', caption : this.btnRightsCaption, canFocused: false }); this.miHistory = new Common.UI.MenuItem({ - el : $('#fm-btn-history',this.el), + el : $markup.elementById('#fm-btn-history'), action : 'history', caption : this.btnHistoryCaption, canFocused: false }); this.miHelp = new Common.UI.MenuItem({ - el : $('#fm-btn-help',this.el), + el : $markup.elementById('#fm-btn-help'), action : 'help', caption : this.btnHelpCaption, canFocused: false @@ -178,7 +188,7 @@ define([ this.items = []; this.items.push( new Common.UI.MenuItem({ - el : $('#fm-btn-return',this.el), + el : $markup.elementById('#fm-btn-return'), action : 'back', caption : this.btnCloseMenuCaption, canFocused: false @@ -194,7 +204,7 @@ define([ this.miRecent, this.miNew, new Common.UI.MenuItem({ - el : $('#fm-btn-info',this.el), + el : $markup.elementById('#fm-btn-info'), action : 'info', caption : this.btnInfoCaption, canFocused: false @@ -202,14 +212,15 @@ define([ this.miAccess, this.miHistory, new Common.UI.MenuItem({ - el : $('#fm-btn-settings',this.el), + el : $markup.elementById('#fm-btn-settings'), action : 'opts', caption : this.btnSettingsCaption, canFocused: false }), this.miHelp, new Common.UI.MenuItem({ - el : $('#fm-btn-back',this.el), + el : $markup.elementById('#fm-btn-back'), + // el : _get_el('fm-btn-back'), action : 'exit', caption : this.btnBackCaption, canFocused: false @@ -219,19 +230,34 @@ define([ var me = this; me.panels = { // 'saveas' : (new DE.Views.FileMenuPanels.ViewSaveAs({menu:me})).render(), - 'opts' : (new DE.Views.FileMenuPanels.Settings({menu:me})).render(), - 'info' : (new DE.Views.FileMenuPanels.DocumentInfo({menu:me})).render(), - 'rights' : (new DE.Views.FileMenuPanels.DocumentRights({menu:me})).render() + 'opts' : (new DE.Views.FileMenuPanels.Settings({menu:me})).render($markup.find('#panel-settings')), + 'info' : (new DE.Views.FileMenuPanels.DocumentInfo({menu:me})).render($markup.find('#panel-info')), + 'rights' : (new DE.Views.FileMenuPanels.DocumentRights({menu:me})).render($markup.find('#panel-rights')) }; + me.rendered = true; + me.$el.html($markup); me.$el.find('.content-box').hide(); + if ( !!me.mode ) { + me.applyMode(); + } + + if ( !!me.api ) { + me.panels['info'].setApi(me.api); + if ( me.panels['protect'] ) + me.panels['protect'].setApi(api); + } + return this; }, show: function(panel, opts) { if (this.isVisible() && panel===undefined || !this.mode) return; + if ( !this.rendered ) + this.render(); + var defPanel = (this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) ? 'saveas' : 'info'; if (!panel) panel = this.active || defPanel; @@ -330,13 +356,22 @@ define([ this.mode = mode; } - if (!delay) this.applyMode(); + if (!delay) { + if ( this.rendered ) + this.applyMode(); + } + return this; }, setApi: function(api) { this.api = api; - this.panels['info'].setApi(api); - if (this.panels['protect']) this.panels['protect'].setApi(api); + + if ( this.rendered ) { + this.panels['info'].setApi(api); + if (this.panels['protect']) this.panels['protect'].setApi(api); + } + + return this; }, loadDocument: function(data) { @@ -370,8 +405,11 @@ define([ }, SetDisabled: function(disable) { - this.miSave[(disable || !this.mode.isEdit)?'hide':'show'](); - this.miRename[(disable || !this.mode.canRename || this.mode.isDesktopApp) ?'hide':'show'](); + var _btn_save = this.getButton('save'), + _btn_rename = this.getButton('rename'); + + _btn_save[(disable || !this.mode.isEdit)?'hide':'show'](); + _btn_rename[(disable || !this.mode.canRename || this.mode.isDesktopApp) ?'hide':'show'](); }, isVisible: function () { @@ -379,8 +417,18 @@ define([ }, getButton: function(type) { - if (type == 'save') - return this.miSave; + if ( !this.rendered ) { + if (type == 'save') { + return this.options.miSave ? this.options.miSave : (this.options.miSave = new Common.UI.MenuItem({})); + } else + if (type == 'rename') { + return this.options.miRename ? this.options.miRename : (this.options.miRename = new Common.UI.MenuItem({})); + } + } else { + if (type == 'save') { + return this.miSave; + } + } }, btnSaveCaption : 'Save', diff --git a/apps/documenteditor/main/app/view/LeftMenu.js b/apps/documenteditor/main/app/view/LeftMenu.js index b47dd4893..b8e9742e7 100644 --- a/apps/documenteditor/main/app/view/LeftMenu.js +++ b/apps/documenteditor/main/app/view/LeftMenu.js @@ -163,11 +163,10 @@ define([ this.btnSearch.on('click', this.onBtnMenuClick.bind(this)); this.btnAbout.on('toggle', this.onBtnMenuToggle.bind(this)); - this.$el.html($markup); - this.menuFile = new DE.Views.FileMenu(); - this.menuFile.render(); - this.btnAbout.panel = (new Common.Views.About({el: $('#about-menu-panel'), appName: 'Document Editor'})).render(); + this.btnAbout.panel = new Common.Views.About({el: '#about-menu-panel', appName: 'Document Editor'}); + + this.$el.html($markup); return this; }, From ae675ba38fa8e8e6028af6b92e31b835f258ab2d Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 29 Jul 2019 18:30:57 +0300 Subject: [PATCH 018/193] [common] inner function to search elements by id --- apps/common/main/lib/util/utils.js | 41 ++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js index b6c6a353b..d1c4d2e44 100644 --- a/apps/common/main/lib/util/utils.js +++ b/apps/common/main/lib/util/utils.js @@ -855,6 +855,47 @@ Common.Utils.injectComponent = function ($slot, cmp) { } }; +jQuery.fn.extend({ + elementById: function (id, parent) { + /** + * usage: $obj.findById('#id') + * $().findById('#id', $obj | node) + * $.fn.findById('#id', $obj | node) + * + * return: dom element + * */ + var _el = document.getElementById(id.substring(1)); + if ( !_el ) { + parent = parent || this; + if ( parent instanceof jQuery ) { + parent.each(function (i, node) { + _el = node.querySelectorAll(id); + if ( _el.length == 0 ) { + if ( ('#' + node.id) == id ) { + _el = node; + return false; + } + } else + if ( _el.length ) { + _el = _el[0]; + return false; + } + }) + } else { + _el = parent.querySelectorAll(id); + if ( _el && _el.length ) return _el[0]; + } + } + + return _el; + }, + + findById: function (id, parent) { + var _el = $.fn.elementById.apply(this, arguments); + return !!_el ? $(_el) : $(); + } +}); + Common.Utils.InternalSettings.set('toolbar-height-tabs', 32); Common.Utils.InternalSettings.set('toolbar-height-tabs-top-title', 28); Common.Utils.InternalSettings.set('toolbar-height-controls', 67); From 537d84cbcc412817941ca58f25839b92171316c2 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 29 Jul 2019 18:32:32 +0300 Subject: [PATCH 019/193] [common] refactoring Comments view --- apps/common/main/lib/view/Comments.js | 494 +++++++++++++------------- 1 file changed, 249 insertions(+), 245 deletions(-) diff --git a/apps/common/main/lib/view/Comments.js b/apps/common/main/lib/view/Comments.js index 788a1df3b..7efc94c3f 100644 --- a/apps/common/main/lib/view/Comments.js +++ b/apps/common/main/lib/view/Comments.js @@ -72,6 +72,99 @@ define([ return tpl; } + var CommentsPanelDataView = Common.UI.DataView.extend((function() { + return { + options : { + handleSelect: false, + scrollable: true, + listenStoreEvents: false, + template: _.template('
') + }, + + getTextBox: function () { + var text = $(this.el).find('textarea'); + return (text && text.length) ? text : undefined; + }, + setFocusToTextBox: function () { + var text = $(this.el).find('textarea'); + if (text && text.length) { + var val = text.val(); + text.focus(); + text.val(''); + text.val(val); + } + }, + getActiveTextBoxVal: function () { + var text = $(this.el).find('textarea'); + return (text && text.length) ? text.val().trim() : ''; + }, + autoHeightTextBox: function () { + var view = this, + textBox = $(this.el).find('textarea'), + domTextBox = null, + minHeight = 50, + lineHeight = 0, + scrollPos = 0, + oldHeight = 0, + newHeight = 0; + + function updateTextBoxHeight() { + if (domTextBox.scrollHeight > domTextBox.clientHeight) { + textBox.css({height: (domTextBox.scrollHeight + lineHeight) + 'px'}); + } else { + oldHeight = domTextBox.clientHeight; + if (oldHeight >= minHeight) { + + textBox.css({height: minHeight + 'px'}); + + if (domTextBox.scrollHeight > domTextBox.clientHeight) { + newHeight = Math.max(domTextBox.scrollHeight + lineHeight, minHeight); + textBox.css({height: newHeight + 'px'}); + } + } + } + + view.autoScrollToEditButtons(); + } + + if (textBox && textBox.length) { + domTextBox = textBox.get(0); + + if (domTextBox) { + lineHeight = parseInt(textBox.css('lineHeight'), 10) * 0.25; + updateTextBoxHeight(); + textBox.bind('input propertychange', updateTextBoxHeight) + } + } + + this.textBox = textBox; + }, + clearTextBoxBind: function () { + if (this.textBox) { + this.textBox.unbind('input propertychange'); + this.textBox = undefined; + } + }, + autoScrollToEditButtons: function () { + var button = $('#id-comments-change'), // TODO: add to cache + btnBounds = null, + contentBounds = this.el.getBoundingClientRect(), + moveY = 0, + padding = 7; + + if (button.length) { + btnBounds = button.get(0).getBoundingClientRect(); + if (btnBounds && contentBounds) { + moveY = contentBounds.bottom - (btnBounds.bottom + padding); + if (moveY < 0) { + this.scroller.scrollTop(this.scroller.getScrollTop() - moveY); + } + } + } + } + } + })()); + Common.Views.Comments = Common.UI.BaseView.extend(_.extend({ el: '#left-panel-comments', template: _.template(panelTemplate), @@ -81,11 +174,126 @@ define([ textBoxAutoSizeLocked: undefined, // disable autosize textbox viewmode: false, + _commentsViewOnItemClick: function (picker, item, record, e) { + var me = this; + var btn, showEditBox, showReplyBox, commentId, replyId, hideAddReply; + + function readdresolves() { + me.update(); + } + + btn = $(e.target); + if (btn) { + showEditBox = record.get('editText'); + showReplyBox = record.get('showReply'); + commentId = record.get('uid'); + replyId = btn.attr('data-value'); + + if (btn.hasClass('btn-edit')) { + if (!_.isUndefined(replyId)) { + me.fireEvent('comment:closeEditing', [commentId]); + me.fireEvent('comment:editReply', [commentId, replyId]); + + me.commentsView.reply = replyId; + + this.autoHeightTextBox(); + + readdresolves(); + + me.hookTextBox(); + + this.autoScrollToEditButtons(); + this.setFocusToTextBox(); + } else { + + if (!showEditBox) { + me.fireEvent('comment:closeEditing'); + record.set('editText', true); + + this.autoHeightTextBox(); + readdresolves(); + this.setFocusToTextBox(); + me.hookTextBox(); + } + } + } else if (btn.hasClass('btn-delete')) { + if (!_.isUndefined(replyId)) { + me.fireEvent('comment:removeReply', [commentId, replyId]); + } else { + me.fireEvent('comment:remove', [commentId]); + Common.NotificationCenter.trigger('edit:complete', me); + } + + me.fireEvent('comment:closeEditing'); + readdresolves(); + } else if (btn.hasClass('user-reply')) { + me.fireEvent('comment:closeEditing'); + record.set('showReply', true); + + readdresolves(); + + this.autoHeightTextBox(); + me.hookTextBox(); + + this.autoScrollToEditButtons(); + this.setFocusToTextBox(); + } else if (btn.hasClass('btn-reply', false)) { + if (showReplyBox) { + me.fireEvent('comment:addReply', [commentId, this.getActiveTextBoxVal()]); + me.fireEvent('comment:closeEditing'); + + readdresolves(); + } + } else if (btn.hasClass('btn-close', false)) { + + me.fireEvent('comment:closeEditing', [commentId]); + + } else if (btn.hasClass('btn-inner-edit', false)) { + if (!_.isUndefined(me.commentsView.reply)) { + me.fireEvent('comment:changeReply', [commentId, me.commentsView.reply, this.getActiveTextBoxVal()]); + me.commentsView.reply = undefined; + } else if (showEditBox) { + me.fireEvent('comment:change', [commentId, this.getActiveTextBoxVal()]); + } + + me.fireEvent('comment:closeEditing'); + + readdresolves(); + + } else if (btn.hasClass('btn-inner-close', false)) { + me.fireEvent('comment:closeEditing'); + + me.commentsView.reply = undefined; + + readdresolves(); + } else if (btn.hasClass('btn-resolve', false)) { + var tip = btn.data('bs.tooltip'); + if (tip) tip.dontShow = true; + + me.fireEvent('comment:resolve', [commentId]); + + readdresolves(); + } else if (btn.hasClass('btn-resolve-check', false)) { + var tip = btn.data('bs.tooltip'); + if (tip) tip.dontShow = true; + + me.fireEvent('comment:resolve', [commentId]); + + readdresolves(); + } else if (!btn.hasClass('msg-reply') && + !btn.hasClass('btn-resolve-check') && + !btn.hasClass('btn-resolve')) { + me.fireEvent('comment:show', [commentId, false]); + } + } + }, + initialize: function (options) { Common.UI.BaseView.prototype.initialize.call(this, options); this.store = this.options.store; }, + render: function () { var me = this; @@ -134,255 +342,51 @@ define([ } }); } - var CommentsPanelDataView = Common.UI.DataView.extend((function() { - return { + if (this.commentsView) { + this.commentsView.onResetItems(); + } else { + this.commentsView = new CommentsPanelDataView({ + el: $('.messages-ct',me.el), + store: me.store, + itemTemplate: _.template(replaceWords(commentsTemplate, { + textAddReply: me.textAddReply, + textAdd: me.textAdd, + textCancel: me.textCancel, + textEdit: me.textEdit, + textReply: me.textReply, + textClose: me.textClose, + maxCommLength: Asc.c_oAscMaxCellOrCommentLength + })) + }); - options : { - handleSelect: false, - scrollable: true, - listenStoreEvents: false, - template: _.template('
') - }, - - getTextBox: function () { - var text = $(this.el).find('textarea'); - return (text && text.length) ? text : undefined; - }, - setFocusToTextBox: function () { - var text = $(this.el).find('textarea'); - if (text && text.length) { - var val = text.val(); - text.focus(); - text.val(''); - text.val(val); - } - }, - getActiveTextBoxVal: function () { - var text = $(this.el).find('textarea'); - return (text && text.length) ? text.val().trim() : ''; - }, - autoHeightTextBox: function () { - var view = this, - textBox = $(this.el).find('textarea'), - domTextBox = null, - minHeight = 50, - lineHeight = 0, - scrollPos = 0, - oldHeight = 0, - newHeight = 0; - - function updateTextBoxHeight() { - if (domTextBox.scrollHeight > domTextBox.clientHeight) { - textBox.css({height: (domTextBox.scrollHeight + lineHeight) + 'px'}); - } else { - oldHeight = domTextBox.clientHeight; - if (oldHeight >= minHeight) { - - textBox.css({height: minHeight + 'px'}); - - if (domTextBox.scrollHeight > domTextBox.clientHeight) { - newHeight = Math.max(domTextBox.scrollHeight + lineHeight, minHeight); - textBox.css({height: newHeight + 'px'}); - } - } - } - - view.autoScrollToEditButtons(); - } - - if (textBox && textBox.length) { - domTextBox = textBox.get(0); - - if (domTextBox) { - lineHeight = parseInt(textBox.css('lineHeight'), 10) * 0.25; - updateTextBoxHeight(); - textBox.bind('input propertychange', updateTextBoxHeight) - } - } - - this.textBox = textBox; - }, - clearTextBoxBind: function () { - if (this.textBox) { - this.textBox.unbind('input propertychange'); - this.textBox = undefined; - } - }, - autoScrollToEditButtons: function () { - var button = $('#id-comments-change'), // TODO: add to cache - btnBounds = null, - contentBounds = this.el.getBoundingClientRect(), - moveY = 0, - padding = 7; - - if (button.length) { - btnBounds = button.get(0).getBoundingClientRect(); - if (btnBounds && contentBounds) { - moveY = contentBounds.bottom - (btnBounds.bottom + padding); - if (moveY < 0) { - this.scroller.scrollTop(this.scroller.getScrollTop() - moveY); - } - } - } + var addtooltip = function (dataview, view, record) { + if (view.tipsArray) { + view.tipsArray.forEach(function(item){ + item.remove(); + }); } - } - })()); - if (CommentsPanelDataView) { - if (this.commentsView) { - this.commentsView.onResetItems(); - } else { - this.commentsView = new CommentsPanelDataView({ - el: $('.messages-ct',me.el), - store: me.store, - itemTemplate: _.template(replaceWords(commentsTemplate, { - textAddReply: me.textAddReply, - textAdd: me.textAdd, - textCancel: me.textCancel, - textEdit: me.textEdit, - textReply: me.textReply, - textClose: me.textClose, - maxCommLength: Asc.c_oAscMaxCellOrCommentLength - })) + + var arr = [], + btns = $(view.el).find('.btn-resolve'); + btns.tooltip({title: me.textResolve, placement: 'cursor'}); + btns.each(function(idx, item){ + arr.push($(item).data('bs.tooltip').tip()); }); - - var addtooltip = function (dataview, view, record) { - if (view.tipsArray) { - view.tipsArray.forEach(function(item){ - item.remove(); - }); - } - - var arr = [], - btns = $(view.el).find('.btn-resolve'); - btns.tooltip({title: me.textResolve, placement: 'cursor'}); - btns.each(function(idx, item){ - arr.push($(item).data('bs.tooltip').tip()); - }); - btns = $(view.el).find('.btn-resolve-check'); - btns.tooltip({title: me.textOpenAgain, placement: 'cursor'}); - btns.each(function(idx, item){ - arr.push($(item).data('bs.tooltip').tip()); - }); - view.tipsArray = arr; - }; - this.commentsView.on('item:add', addtooltip); - this.commentsView.on('item:remove', addtooltip); - this.commentsView.on('item:change', addtooltip); - - this.commentsView.on('item:click', function (picker, item, record, e) { - var btn, showEditBox, showReplyBox, commentId, replyId, hideAddReply; - - function readdresolves() { - me.update(); - } - - btn = $(e.target); - if (btn) { - showEditBox = record.get('editText'); - showReplyBox = record.get('showReply'); - commentId = record.get('uid'); - replyId = btn.attr('data-value'); - - if (btn.hasClass('btn-edit')) { - if (!_.isUndefined(replyId)) { - me.fireEvent('comment:closeEditing', [commentId]); - me.fireEvent('comment:editReply', [commentId, replyId]); - - me.commentsView.reply = replyId; - - this.autoHeightTextBox(); - - readdresolves(); - - me.hookTextBox(); - - this.autoScrollToEditButtons(); - this.setFocusToTextBox(); - } else { - - if (!showEditBox) { - me.fireEvent('comment:closeEditing'); - record.set('editText', true); - - this.autoHeightTextBox(); - readdresolves(); - this.setFocusToTextBox(); - me.hookTextBox(); - } - } - } else if (btn.hasClass('btn-delete')) { - if (!_.isUndefined(replyId)) { - me.fireEvent('comment:removeReply', [commentId, replyId]); - } else { - me.fireEvent('comment:remove', [commentId]); - Common.NotificationCenter.trigger('edit:complete', me); - } - - me.fireEvent('comment:closeEditing'); - readdresolves(); - } else if (btn.hasClass('user-reply')) { - me.fireEvent('comment:closeEditing'); - record.set('showReply', true); - - readdresolves(); - - this.autoHeightTextBox(); - me.hookTextBox(); - - this.autoScrollToEditButtons(); - this.setFocusToTextBox(); - } else if (btn.hasClass('btn-reply', false)) { - if (showReplyBox) { - me.fireEvent('comment:addReply', [commentId, this.getActiveTextBoxVal()]); - me.fireEvent('comment:closeEditing'); - - readdresolves(); - } - } else if (btn.hasClass('btn-close', false)) { - - me.fireEvent('comment:closeEditing', [commentId]); - - } else if (btn.hasClass('btn-inner-edit', false)) { - if (!_.isUndefined(me.commentsView.reply)) { - me.fireEvent('comment:changeReply', [commentId, me.commentsView.reply, this.getActiveTextBoxVal()]); - me.commentsView.reply = undefined; - } else if (showEditBox) { - me.fireEvent('comment:change', [commentId, this.getActiveTextBoxVal()]); - } - - me.fireEvent('comment:closeEditing'); - - readdresolves(); - - } else if (btn.hasClass('btn-inner-close', false)) { - me.fireEvent('comment:closeEditing'); - - me.commentsView.reply = undefined; - - readdresolves(); - } else if (btn.hasClass('btn-resolve', false)) { - var tip = btn.data('bs.tooltip'); - if (tip) tip.dontShow = true; - - me.fireEvent('comment:resolve', [commentId]); - - readdresolves(); - } else if (btn.hasClass('btn-resolve-check', false)) { - var tip = btn.data('bs.tooltip'); - if (tip) tip.dontShow = true; - - me.fireEvent('comment:resolve', [commentId]); - - readdresolves(); - } else if (!btn.hasClass('msg-reply') && - !btn.hasClass('btn-resolve-check') && - !btn.hasClass('btn-resolve')) { - me.fireEvent('comment:show', [commentId, false]); - } - } + btns = $(view.el).find('.btn-resolve-check'); + btns.tooltip({title: me.textOpenAgain, placement: 'cursor'}); + btns.each(function(idx, item){ + arr.push($(item).data('bs.tooltip').tip()); }); - } + view.tipsArray = arr; + }; + + this.commentsView.on({ + 'item:add': addtooltip, + 'item:remove': addtooltip, + 'item:change': addtooltip, + 'item:click': this._commentsViewOnItemClick.bind(this) + }); } if (!this.rendered) this.setupLayout(); @@ -482,7 +486,7 @@ define([ }, setupLayout: function () { - var me = this, parent = $(me.el); + var me = this, parent = me.$el; var add = $('.new-comment-ct', me.el), to = $('.add-link-ct', me.el), From 291f525b78690f91344a5e5a6e4f813bc023df31 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 1 Aug 2019 11:13:08 +0300 Subject: [PATCH 020/193] [DE] file panels refactoring --- .../main/app/view/FileMenuPanels.js | 129 +++++++++--------- 1 file changed, 66 insertions(+), 63 deletions(-) diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js index a32be4c16..720f1ca54 100644 --- a/apps/documenteditor/main/app/view/FileMenuPanels.js +++ b/apps/documenteditor/main/app/view/FileMenuPanels.js @@ -87,7 +87,7 @@ define([ }, render: function() { - $(this.el).html(this.template({rows:this.formats})); + this.$el.html(this.template({rows:this.formats})); $('.btn-doc-format',this.el).on('click', _.bind(this.onFormatClick,this)); if (_.isUndefined(this.scroller)) { @@ -243,56 +243,57 @@ define([ this.menu = options.menu; }, - render: function() { - $(this.el).html(this.template({scope: this})); + render: function(node) { + let me = this; + let $markup = $(this.template({scope: this})); this.chInputMode = new Common.UI.CheckBox({ - el: $('#fms-chb-input-mode'), + el: $markup.findById('#fms-chb-input-mode'), labelText: this.strInputMode }); /** coauthoring begin **/ this.chLiveComment = new Common.UI.CheckBox({ - el: $('#fms-chb-live-comment'), + el: $markup.findById('#fms-chb-live-comment'), labelText: this.strLiveComment - }).on('change', _.bind(function(field, newValue, oldValue, eOpts){ - this.chResolvedComment.setDisabled(field.getValue()!=='checked'); - }, this)); + }).on('change', function(field, newValue, oldValue, eOpts){ + me.chResolvedComment.setDisabled(field.getValue()!=='checked'); + }); this.chResolvedComment = new Common.UI.CheckBox({ - el: $('#fms-chb-resolved-comment'), + el: $markup.findById('#fms-chb-resolved-comment'), labelText: this.strResolvedComment }); /** coauthoring end **/ this.chSpell = new Common.UI.CheckBox({ - el: $('#fms-chb-spell-check'), + el: $markup.findById('#fms-chb-spell-check'), labelText: this.strSpellCheckMode }); this.chAutosave = new Common.UI.CheckBox({ - el: $('#fms-chb-autosave'), + el: $markup.findById('#fms-chb-autosave'), labelText: this.strAutosave - }).on('change', _.bind(function(field, newValue, oldValue, eOpts){ - if (field.getValue()!=='checked' && this.cmbCoAuthMode.getValue()) { - this.cmbCoAuthMode.setValue(0); - this.onSelectCoAuthMode(this.cmbCoAuthMode.getSelectedRecord()); + }).on('change', function(field, newValue, oldValue, eOpts){ + if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) { + me.cmbCoAuthMode.setValue(0); + me.onSelectCoAuthMode(me.cmbCoAuthMode.getSelectedRecord()); } - }, this)); - this.lblAutosave = $('#fms-lbl-autosave'); + }); + this.lblAutosave = $markup.findById('#fms-lbl-autosave'); this.chForcesave = new Common.UI.CheckBox({ - el: $('#fms-chb-forcesave'), + el: $markup.findById('#fms-chb-forcesave'), labelText: this.strForcesave }); this.chAlignGuides = new Common.UI.CheckBox({ - el: $('#fms-chb-align-guides'), + el: $markup.findById('#fms-chb-align-guides'), labelText: this.strAlignGuides }); this.cmbZoom = new Common.UI.ComboBox({ - el : $('#fms-cmb-zoom'), + el : $markup.findById('#fms-cmb-zoom'), style : 'width: 160px;', editable : false, cls : 'input-group-nr', @@ -316,7 +317,7 @@ define([ /** coauthoring begin **/ this.cmbShowChanges = new Common.UI.ComboBox({ - el : $('#fms-cmb-show-changes'), + el : $markup.findById('#fms-cmb-show-changes'), style : 'width: 160px;', editable : false, cls : 'input-group-nr', @@ -328,7 +329,7 @@ define([ }); this.cmbCoAuthMode = new Common.UI.ComboBox({ - el : $('#fms-cmb-coauth-mode'), + el : $markup.findById('#fms-cmb-coauth-mode'), style : 'width: 160px;', editable : false, cls : 'input-group-nr', @@ -336,17 +337,17 @@ define([ { value: 1, displayValue: this.strFast, descValue: this.strCoAuthModeDescFast}, { value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict } ] - }).on('selected', _.bind( function(combo, record) { - if (record.value == 1 && (this.chAutosave.getValue()!=='checked')) - this.chAutosave.setValue(1); - this.onSelectCoAuthMode(record); - }, this)); + }).on('selected', function(combo, record) { + if (record.value == 1 && (me.chAutosave.getValue()!=='checked')) + me.chAutosave.setValue(1); + me.onSelectCoAuthMode(record); + }); - this.lblCoAuthMode = $('#fms-lbl-coauth-mode'); + this.lblCoAuthMode = $markup.findById('#fms-lbl-coauth-mode'); /** coauthoring end **/ this.cmbFontRender = new Common.UI.ComboBox({ - el : $('#fms-cmb-font-render'), + el : $markup.find('#fms-cmb-font-render'), style : 'width: 160px;', editable : false, cls : 'input-group-nr', @@ -358,7 +359,7 @@ define([ }); this.cmbUnit = new Common.UI.ComboBox({ - el : $('#fms-cmb-unit'), + el : $markup.findById('#fms-cmb-unit'), style : 'width: 160px;', editable : false, cls : 'input-group-nr', @@ -370,10 +371,10 @@ define([ }); this.btnApply = new Common.UI.Button({ - el: '#fms-btn-apply' + el: $markup.findById('#fms-btn-apply') }); - this.btnApply.on('click', _.bind(this.applySettings, this)); + this.btnApply.on('click', this.applySettings.bind(this)); if (_.isUndefined(this.scroller)) { this.scroller = new Common.UI.Scroller({ @@ -382,6 +383,7 @@ define([ }); } + this.$el = $(node).html($markup); return this; }, @@ -764,23 +766,22 @@ define([ this.authors = []; }, - render: function() { - $(this.el).html(this.template()); - + render: function(node) { var me = this; + var $markup = $(me.template()); // server info - this.lblPlacement = $('#id-info-placement'); - this.lblOwner = $('#id-info-owner'); - this.lblUploaded = $('#id-info-uploaded'); + this.lblPlacement = $markup.findById('#id-info-placement'); + this.lblOwner = $markup.findById('#id-info-owner'); + this.lblUploaded = $markup.findById('#id-info-uploaded'); // statistic info - this.lblStatPages = $('#id-info-pages'); - this.lblStatWords = $('#id-info-words'); - this.lblStatParagraphs = $('#id-info-paragraphs'); - this.lblStatSymbols = $('#id-info-symbols'); - this.lblStatSpaces = $('#id-info-spaces'); - // this.lblEditTime = $('#id-info-edittime'); + this.lblStatPages = $markup.findById('#id-info-pages'); + this.lblStatWords = $markup.findById('#id-info-words'); + this.lblStatParagraphs = $markup.findById('#id-info-paragraphs'); + this.lblStatSymbols = $markup.findById('#id-info-symbols'); + this.lblStatSpaces = $markup.findById('#id-info-spaces'); + // this.lblEditTime = $markup.find('#id-info-edittime'); // edited info var keyDownBefore = function(input, e){ @@ -795,7 +796,7 @@ define([ }; this.inputTitle = new Common.UI.InputField({ - el : $('#id-info-title'), + el : $markup.findById('#id-info-title'), style : 'width: 200px;', placeHolder : this.txtAddText, validateOnBlur: false @@ -806,7 +807,7 @@ define([ } }).on('keydown:before', keyDownBefore); this.inputSubject = new Common.UI.InputField({ - el : $('#id-info-subject'), + el : $markup.findById('#id-info-subject'), style : 'width: 200px;', placeHolder : this.txtAddText, validateOnBlur: false @@ -817,7 +818,7 @@ define([ } }).on('keydown:before', keyDownBefore); this.inputComment = new Common.UI.InputField({ - el : $('#id-info-comment'), + el : $markup.findById('#id-info-comment'), style : 'width: 200px;', placeHolder : this.txtAddText, validateOnBlur: false @@ -829,18 +830,18 @@ define([ }).on('keydown:before', keyDownBefore); // modify info - this.lblModifyDate = $('#id-info-modify-date'); - this.lblModifyBy = $('#id-info-modify-by'); + this.lblModifyDate = $markup.findById('#id-info-modify-date'); + this.lblModifyBy = $markup.findById('#id-info-modify-by'); // creation info - this.lblDate = $('#id-info-date'); - this.lblApplication = $('#id-info-appname'); - this.tblAuthor = $('#id-info-author table'); - this.trAuthor = $('#id-info-add-author').closest('tr'); + this.lblDate = $markup.findById('#id-info-date'); + this.lblApplication = $markup.findById('#id-info-appname'); + this.tblAuthor = $markup.findById('#id-info-author table'); + this.trAuthor = $markup.findById('#id-info-add-author').closest('tr'); this.authorTpl = '
'; this.tblAuthor.on('click', function(e) { - var btn = $(e.target); + var btn = $markup.find(e.target); if (btn.hasClass('close') && !btn.hasClass('disabled')) { var el = btn.closest('tr'), idx = me.tblAuthor.find('tr').index(el); @@ -854,7 +855,7 @@ define([ }); this.inputAuthor = new Common.UI.InputField({ - el : $('#id-info-add-author'), + el : $markup.findById('#id-info-add-author'), style : 'width: 200px;', validateOnBlur: false, placeHolder: this.txtAddAuthor @@ -885,11 +886,12 @@ define([ if (_.isUndefined(this.scroller)) { this.scroller = new Common.UI.Scroller({ - el: $(this.el), + el: $markup, suppressScrollX: true }); } + me.$el = $(node).html($markup); return this; }, @@ -1139,12 +1141,12 @@ define([ this.menu = options.menu; }, - render: function() { - $(this.el).html(this.template()); + render: function(node) { + var $markup = $(this.template()); - this.cntRights = $('#id-info-rights'); + this.cntRights = $markup.findById('#id-info-rights'); this.btnEditRights = new Common.UI.Button({ - el: '#id-info-btn-edit' + el: $markup.elementById('#id-info-btn-edit') }); this.btnEditRights.on('click', _.bind(this.changeAccessRights, this)); @@ -1154,14 +1156,15 @@ define([ if (_.isUndefined(this.scroller)) { this.scroller = new Common.UI.Scroller({ - el: $(this.el), + el: $markup, suppressScrollX: true }); } - Common.NotificationCenter.on('collaboration:sharing', _.bind(this.changeAccessRights, this)); - Common.NotificationCenter.on('collaboration:sharingdeny', _.bind(this.onLostEditRights, this)); + Common.NotificationCenter.on('collaboration:sharing', this.changeAccessRights.bind(this)); + Common.NotificationCenter.on('collaboration:sharingdeny', this.onLostEditRights.bind(this)); + this.$el = $(node).html($markup); return this; }, From 6d5f42a234afe2e71d6dec0a829ce4b35bb20fb5 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 1 Aug 2019 11:50:22 +0300 Subject: [PATCH 021/193] File menu refactoring --- apps/documenteditor/main/app/view/FileMenu.js | 2 +- .../main/app/view/FileMenuPanels.js | 35 +++++++++---------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/apps/documenteditor/main/app/view/FileMenu.js b/apps/documenteditor/main/app/view/FileMenu.js index feba75b02..272ab52bd 100644 --- a/apps/documenteditor/main/app/view/FileMenu.js +++ b/apps/documenteditor/main/app/view/FileMenu.js @@ -82,7 +82,7 @@ define([ }, render: function () { - let $markup = $(this.template()); + var $markup = $(this.template()); this.miSave = new Common.UI.MenuItem({ el : $markup.elementById('#fm-btn-save'), diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js index 720f1ca54..2618e1d8f 100644 --- a/apps/documenteditor/main/app/view/FileMenuPanels.js +++ b/apps/documenteditor/main/app/view/FileMenuPanels.js @@ -92,7 +92,7 @@ define([ if (_.isUndefined(this.scroller)) { this.scroller = new Common.UI.Scroller({ - el: $(this.el), + el: this.$el, suppressScrollX: true }); } @@ -153,7 +153,7 @@ define([ if (_.isUndefined(this.scroller)) { this.scroller = new Common.UI.Scroller({ - el: $(this.el), + el: this.$el, suppressScrollX: true }); } @@ -244,8 +244,8 @@ define([ }, render: function(node) { - let me = this; - let $markup = $(this.template({scope: this})); + var me = this; + var $markup = $(this.template({scope: this})); this.chInputMode = new Common.UI.CheckBox({ el: $markup.findById('#fms-chb-input-mode'), @@ -376,14 +376,14 @@ define([ this.btnApply.on('click', this.applySettings.bind(this)); + this.$el = $(node).html($markup); + if (_.isUndefined(this.scroller)) { this.scroller = new Common.UI.Scroller({ - el: $(this.el), + el: this.$el, suppressScrollX: true }); } - - this.$el = $(node).html($markup); return this; }, @@ -884,14 +884,13 @@ define([ this.updateInfo(this.doc); + this.$el = $(node).html($markup); if (_.isUndefined(this.scroller)) { this.scroller = new Common.UI.Scroller({ - el: $markup, + el: this.$el, suppressScrollX: true }); } - - me.$el = $(node).html($markup); return this; }, @@ -1154,17 +1153,17 @@ define([ this.updateInfo(this.doc); - if (_.isUndefined(this.scroller)) { - this.scroller = new Common.UI.Scroller({ - el: $markup, - suppressScrollX: true - }); - } - Common.NotificationCenter.on('collaboration:sharing', this.changeAccessRights.bind(this)); Common.NotificationCenter.on('collaboration:sharingdeny', this.onLostEditRights.bind(this)); this.$el = $(node).html($markup); + + if (_.isUndefined(this.scroller)) { + this.scroller = new Common.UI.Scroller({ + el: this.$el, + suppressScrollX: true + }); + } return this; }, @@ -1495,7 +1494,7 @@ define([ this.cntSignatureView = $('#id-fms-signature-view'); if (_.isUndefined(this.scroller)) { this.scroller = new Common.UI.Scroller({ - el: $(this.el), + el: this.$el, suppressScrollX: true }); } From 43edea7d22a27d85890032e76770bc8b932337c7 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 1 Aug 2019 13:46:25 +0300 Subject: [PATCH 022/193] [DE] File menu panels refactoring --- apps/documenteditor/main/app/view/FileMenu.js | 54 +++++++++---------- 1 file changed, 25 insertions(+), 29 deletions(-) diff --git a/apps/documenteditor/main/app/view/FileMenu.js b/apps/documenteditor/main/app/view/FileMenu.js index 272ab52bd..5c8293151 100644 --- a/apps/documenteditor/main/app/view/FileMenu.js +++ b/apps/documenteditor/main/app/view/FileMenu.js @@ -227,26 +227,15 @@ define([ }) ); - var me = this; - me.panels = { -// 'saveas' : (new DE.Views.FileMenuPanels.ViewSaveAs({menu:me})).render(), - 'opts' : (new DE.Views.FileMenuPanels.Settings({menu:me})).render($markup.find('#panel-settings')), - 'info' : (new DE.Views.FileMenuPanels.DocumentInfo({menu:me})).render($markup.find('#panel-info')), - 'rights' : (new DE.Views.FileMenuPanels.DocumentRights({menu:me})).render($markup.find('#panel-rights')) - }; + this.rendered = true; + this.$el.html($markup); + this.$el.find('.content-box').hide(); + this.applyMode(); - me.rendered = true; - me.$el.html($markup); - me.$el.find('.content-box').hide(); - - if ( !!me.mode ) { - me.applyMode(); - } - - if ( !!me.api ) { - me.panels['info'].setApi(me.api); - if ( me.panels['protect'] ) - me.panels['protect'].setApi(api); + if ( !!this.api ) { + this.panels['info'].setApi(this.api); + if ( this.panels['protect'] ) + this.panels['protect'].setApi(api); } return this; @@ -276,6 +265,16 @@ define([ }, applyMode: function() { + if (!this.panels) { + this.panels = { + 'opts' : (new DE.Views.FileMenuPanels.Settings({menu:this})).render(this.$el.find('#panel-settings')), + 'info' : (new DE.Views.FileMenuPanels.DocumentInfo({menu:this})).render(this.$el.find('#panel-info')), + 'rights' : (new DE.Views.FileMenuPanels.DocumentRights({menu:this})).render(this.$el.find('#panel-rights')) + }; + } + + if (!this.mode) return; + this.miPrint[this.mode.canPrint?'show':'hide'](); this.miRename[(this.mode.canRename && !this.mode.isDesktopApp) ?'show':'hide'](); this.miProtect[this.mode.canProtect ?'show':'hide'](); @@ -311,32 +310,29 @@ define([ if ( this.mode.canCreateNew ) { if (this.mode.templates && this.mode.templates.length) { $('a',this.miNew.$el).text(this.btnCreateNewCaption + '...'); - this.panels['new'] = ((new DE.Views.FileMenuPanels.CreateNew({menu: this, docs: this.mode.templates})).render()); + !this.panels['new'] && (this.panels['new'] = ((new DE.Views.FileMenuPanels.CreateNew({menu: this, docs: this.mode.templates})).render())); } } - if ( this.mode.canOpenRecent ) { - if (this.mode.recent){ - this.panels['recent'] = (new DE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render(); - } + if ( this.mode.canOpenRecent && this.mode.recent ) { + !this.panels['recent'] && (this.panels['recent'] = (new DE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render()); } if (this.mode.canProtect) { -// this.$el.find('#fm-btn-back').hide(); - this.panels['protect'] = (new DE.Views.FileMenuPanels.ProtectDoc({menu:this})).render(); + !this.panels['protect'] && (this.panels['protect'] = (new DE.Views.FileMenuPanels.ProtectDoc({menu:this})).render()); this.panels['protect'].setMode(this.mode); } if (this.mode.canDownload) { - this.panels['saveas'] = ((new DE.Views.FileMenuPanels.ViewSaveAs({menu: this})).render()); + !this.panels['saveas'] && (this.panels['saveas'] = ((new DE.Views.FileMenuPanels.ViewSaveAs({menu: this})).render())); } else if (this.mode.canDownloadOrigin) $('a',this.miDownload.$el).text(this.textDownload); if (this.mode.canDownload && this.mode.saveAsUrl) { - this.panels['save-copy'] = ((new DE.Views.FileMenuPanels.ViewSaveCopy({menu: this})).render()); + !this.panels['save-copy'] && (this.panels['save-copy'] = ((new DE.Views.FileMenuPanels.ViewSaveCopy({menu: this})).render())); } - if (this.mode.canHelp) { + if (this.mode.canHelp && !this.panels['help']) { this.panels['help'] = ((new DE.Views.FileMenuPanels.Help({menu: this})).render()); this.panels['help'].setLangConfig(this.mode.lang); } From 3d8ba364628a95343346d4e15a86bd22f8e6a4da Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Sat, 10 Aug 2019 16:36:24 +0300 Subject: [PATCH 023/193] [Common] Add MenuSimple component --- apps/common/main/lib/component/Menu.js | 445 +++++++++++++++++++++ apps/common/main/lib/component/MenuItem.js | 2 +- 2 files changed, 446 insertions(+), 1 deletion(-) diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index 597b0baa6..8082b5557 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -584,4 +584,449 @@ define([ })() }) })(); + + Common.UI.MenuSimple = Common.UI.BaseView.extend({ + options : { + cls : '', + style : '', + itemTemplate: null, + items : [], + menuAlign : 'tl-bl', + menuAlignEl : null, + offset : [0, 0], + cyclic : true, + search : false, + scrollAlwaysVisible: true + }, + + template: _.template([ + '' + ].join('')), + + initialize : function(options) { + Common.UI.BaseView.prototype.initialize.call(this, options); + + var me = this; + + this.id = this.options.id || Common.UI.getId(); + this.itemTemplate = this.options.itemTemplate || _.template([ + ' style="<%= style %>" <% } %>', + '<% if(typeof canFocused !== "undefined") { %> tabindex="-1" type="menuitem" <% } %>', + '<% if(typeof stopPropagation !== "undefined") { %> data-stopPropagation="true" <% } %>', + 'class="<% if (checked) { %> checked <% } %> <% if (checkable) { %> checkable <% } %>" >', + '<% if (typeof iconCls !== "undefined") { %>', + '', + '<% } %>', + '<%= caption %>', + '' + ].join('')); + this.rendered = false; + this.items = this.options.items || []; + this.offset = [0, 0]; + this.menuAlign = this.options.menuAlign; + this.menuAlignEl = this.options.menuAlignEl; + this.scrollAlwaysVisible = this.options.scrollAlwaysVisible; + this.search = this.options.search; + + if (this.options.restoreHeight) { + this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000); + !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight); + } + + if (!this.options.cyclic) this.options.cls += ' no-cyclic'; + + if (this.options.el) + this.render(); + + Common.UI.Menu.Manager.register(this); + }, + + remove: function() { + Common.UI.Menu.Manager.unregister(this); + Common.UI.BaseView.prototype.remove.call(this); + }, + + render: function(parentEl) { + var me = this; + + this.trigger('render:before', this); + + this.cmpEl = me.$el || $(this.el); + + parentEl && this.setElement(parentEl, false); + + if (!me.rendered) { + this.cmpEl = $(this.template({ + items: me.items, + itemTemplate: me.itemTemplate, + options : me.options + })); + + parentEl ? parentEl.append(this.cmpEl) : this.$el.append(this.cmpEl); + } + + var rootEl = this.cmpEl.parent(), + menuRoot = (rootEl.attr('role') === 'menu') ? rootEl : rootEl.find('[role=menu]'); + this.menuRoot = menuRoot; + + if (menuRoot) { + if (!me.rendered) { + menuRoot.on( "click", "li", _.bind(me.onItemClick, me)); + menuRoot.on( "mousedown", "li", _.bind(me.onItemMouseDown, me)); + } + + if (this.options.maxHeight) { + menuRoot.css({'max-height': me.options.maxHeight}); + this.scroller = new Common.UI.Scroller({ + el: me.$el.find('.dropdown-menu '), + minScrollbarLength: 30, + suppressScrollX: true, + alwaysVisibleY: this.scrollAlwaysVisible + }); + } + + menuRoot.css({ + position : 'fixed', + right : 'auto', + left : -1000, + top : -1000 + }); + + this.parentEl = menuRoot.parent(); + + this.parentEl.on('show.bs.dropdown', _.bind(me.onBeforeShowMenu, me)); + this.parentEl.on('shown.bs.dropdown', _.bind(me.onAfterShowMenu, me)); + this.parentEl.on('hide.bs.dropdown', _.bind(me.onBeforeHideMenu, me)); + this.parentEl.on('hidden.bs.dropdown', _.bind(me.onAfterHideMenu, me)); + this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me)); + + menuRoot.hover( + function(e) { me.isOver = true;}, + function(e) { me.isOver = false; } + ); + } + + this.rendered = true; + + this.trigger('render:after', this); + + return this; + }, + + resetItems: function(items) { + this.items = items || []; + this.$items = null; + var template = _.template([ + '<% _.each(items, function(item) { %>', + '<% if (!item.id) item.id = Common.UI.getId(); %>', + '<% item.checkable = item.checkable || false; %>', + '<% item.checked = item.checked || false; %>', + '
  • <%= itemTemplate(item) %>
    • ', + '<% }) %>' + ].join('')); + this.cmpEl && this.cmpEl.html(template({ + items: this.items, + itemTemplate: this.itemTemplate, + options : this.options + })); + }, + + isVisible: function() { + return this.rendered && (this.cmpEl.is(':visible')); + }, + + show: function() { + if (this.rendered && this.parentEl && !this.parentEl.hasClass('open')) { + this.cmpEl.dropdown('toggle'); + } + }, + + hide: function() { + if (this.rendered && this.parentEl) { + if ( this.parentEl.hasClass('open') ) + this.cmpEl.dropdown('toggle'); + else if (this.parentEl.hasClass('over')) + this.parentEl.removeClass('over'); + } + }, + + onItemClick: function(e) { + if (e.which != 1 && e.which !== undefined) + return false; + + var index = $(e.currentTarget).closest('li').index(), + item = (index>=0) ? this.items[index] : null; + if (!item) return; + + if (item.disabled) + return false; + + if (!item.checked) + this.setChecked(index, !item.checked); + + this.isOver = false; + if (item.stopPropagation) { + e.stopPropagation(); + var me = this; + _.delay(function(){ + me.$el.parent().parent().find('[data-toggle=dropdown]').focus(); + }, 10); + return; + } + this.trigger('item:click', this, item, e); + }, + + onItemMouseDown: function(e) { + if (e.which != 1) { + e.preventDefault(); + e.stopPropagation(); + + return false; + } + e.stopPropagation(); + }, + + setChecked: function(index, check, suppressEvent) { + this.toggle(index, check, suppressEvent); + }, + + toggle: function(index, toggle, suppressEvent) { + var state = !!toggle; + var item = this.items[index]; + + this.clearAll(); + + if (item && item.checkable) { + item.checked = state; + + if (this.rendered) { + var itemEl = item.el || this.cmpEl.find('#'+item.id); + if (itemEl) { + itemEl.toggleClass('checked', item.checked); + if (!_.isEmpty(item.iconCls)) { + itemEl.css('background-image', 'none'); + } + } + } + + if (!suppressEvent) + this.trigger('item:toggle', this, item, state); + } + }, + + setDisabled: function(disabled) { + this.disabled = !!disabled; + + if (this.rendered) + this.cmpEl.toggleClass('disabled', this.disabled); + }, + + isDisabled: function() { + return this.disabled; + }, + + onBeforeShowMenu: function(e) { + Common.NotificationCenter.trigger('menu:show'); + this.trigger('show:before', this, e); + this.alignPosition(); + }, + + onAfterShowMenu: function(e) { + this.trigger('show:after', this, e); + if (this.scroller) { + this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); + var menuRoot = this.menuRoot, + $selected = menuRoot.find('> li .checked'); + if ($selected.length) { + var itemTop = $selected.position().top, + itemHeight = $selected.height(), + listHeight = menuRoot.height(); + if (itemTop < 0 || itemTop + itemHeight > listHeight) { + menuRoot.scrollTop(menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2)); + } + setTimeout(function(){$selected.focus();}, 1); + } + } + this._search = {}; + if (this.search && !this.$items) { + var me = this; + this.$items = this.menuRoot.find('> li').find('> a'); + _.each(this.$items, function(item, index) { + me.items[index].el = $(item); + }); + } + }, + + onBeforeHideMenu: function(e) { + this.trigger('hide:before', this, e); + + if (Common.UI.Scroller.isMouseCapture()) + e.preventDefault(); + }, + + onAfterHideMenu: function(e, isFromInputControl) { + this.trigger('hide:after', this, e, isFromInputControl); + Common.NotificationCenter.trigger('menu:hide', this, isFromInputControl); + }, + + onAfterKeydownMenu: function(e) { + if (e.keyCode == Common.UI.Keys.RETURN) { + var li = $(e.target).closest('li'); + if (li.length<=0) li = $(e.target).parent().find('li .dataview'); + if (li.length>0) li.click(); + if (!li.hasClass('dropdown-submenu')) + Common.UI.Menu.Manager.hideAll(); + if ( $(e.currentTarget).closest('li').hasClass('dropdown-submenu')) { + e.stopPropagation(); + return false; + } + } else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) { + this.fromKeyDown = true; + } else if (e.keyCode == Common.UI.Keys.ESC) { +// Common.NotificationCenter.trigger('menu:afterkeydown', e); +// return false; + } else if (this.search && e.keyCode > 64 && e.keyCode < 91 && e.key){ + var me = this; + clearTimeout(this._search.timer); + this._search.timer = setTimeout(function () { me._search = {}; }, 1000); + + (!this._search.text) && (this._search.text = ''); + (!this._search.char) && (this._search.char = e.key); + (this._search.char !== e.key) && (this._search.full = true); + this._search.text += e.key; + if (this._search.index===undefined) { + this._search.index = this.$items.index(this.$items.filter(':focus')); + } + this.selectCandidate(); + } + }, + + selectCandidate: function() { + var index = this._search.index || 0, + re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'), + itemCandidate, idxCandidate; + + for (var i=0; iindex) { + itemCandidate = item; + idxCandidate = i; + break; + } + } + } + + if (itemCandidate) { + this._search.index = idxCandidate; + var item = itemCandidate.el; + if (this.scroller) { + this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); + var itemTop = item.position().top, + itemHeight = item.height(), + listHeight = this.menuRoot.height(); + if (itemTop < 0 || itemTop + itemHeight > listHeight) { + this.menuRoot.scrollTop(this.menuRoot.scrollTop() + itemTop + itemHeight - (listHeight/2)); + } + } + item.focus(); + } + }, + + setOffset: function(offsetX, offsetY) { + this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX; + this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY; + this.alignPosition(); + }, + + getOffset: function() { + return this.offset; + }, + + alignPosition: function(fixedAlign, fixedOffset) { + var menuRoot = this.menuRoot, + menuParent = this.menuAlignEl || menuRoot.parent(), + m = this.menuAlign.match(/^([a-z]+)-([a-z]+)/), + offset = menuParent.offset(), + docW = Common.Utils.innerWidth(), + docH = Common.Utils.innerHeight() - 10, // Yep, it's magic number + menuW = menuRoot.outerWidth(), + menuH = menuRoot.outerHeight(), + parentW = menuParent.outerWidth(), + parentH = menuParent.outerHeight(); + + var posMenu = { + 'tl': [0, 0], + 'bl': [0, menuH], + 'tr': [menuW, 0], + 'br': [menuW, menuH] + }; + var posParent = { + 'tl': [0, 0], + 'tr': [parentW, 0], + 'bl': [0, parentH], + 'br': [parentW, parentH] + }; + var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0]; + var top = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1]; + + if (left + menuW > docW) + if (menuParent.is('li.dropdown-submenu')) { + left = offset.left - menuW + 2; + } else { + left = docW - menuW; + } + + if (this.options.restoreHeight) { + if (typeof (this.options.restoreHeight) == "number") { + if (top + menuH > docH) { + menuRoot.css('max-height', (docH - top) + 'px'); + (!this.scroller) && (this.scroller = new Common.UI.Scroller({ + el: this.$el.find('.dropdown-menu '), + minScrollbarLength: 30, + suppressScrollX: true, + alwaysVisibleY: this.scrollAlwaysVisible + })); + } else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) { + menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px'); + } + } + } else { + if (top + menuH > docH) { + if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height + m = fixedAlign.match(/^([a-z]+)-([a-z]+)/); + top = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0); + } else + top = docH - menuH; + } + + if (top < 0) + top = 0; + } + + if (this.options.additionalAlign) + this.options.additionalAlign.call(this, menuRoot, left, top); + else + menuRoot.css({left: Math.ceil(left), top: Math.ceil(top)}); + }, + + clearAll: function() { + this.cmpEl.find('li > a.checked').removeClass('checked'); + _.each(this.items, function(item){ + item.checked = false; + }); + } + }); + }); \ No newline at end of file diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js index 7d7193987..c54501185 100644 --- a/apps/common/main/lib/component/MenuItem.js +++ b/apps/common/main/lib/component/MenuItem.js @@ -137,7 +137,7 @@ define([ this.hint = me.options.hint; this.rendered = false; - if (this.menu !== null && !(this.menu instanceof Common.UI.Menu)) { + if (this.menu !== null && !(this.menu instanceof Common.UI.Menu) && !(this.menu instanceof Common.UI.MenuSimple)) { this.menu = new Common.UI.Menu(_.extend({}, me.options.menu)); } From 6c0aca5bce94c88b2ee97d0cf23613c7224e0c2f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Sat, 10 Aug 2019 16:38:51 +0300 Subject: [PATCH 024/193] [DE] Refactoring loading of languages: use MenuSimple component --- .../main/app/view/DocumentHolder.js | 97 ++++++++----------- .../documenteditor/main/app/view/Statusbar.js | 24 ++--- 2 files changed, 51 insertions(+), 70 deletions(-) diff --git a/apps/documenteditor/main/app/view/DocumentHolder.js b/apps/documenteditor/main/app/view/DocumentHolder.js index df1935404..6a943b309 100644 --- a/apps/documenteditor/main/app/view/DocumentHolder.js +++ b/apps/documenteditor/main/app/view/DocumentHolder.js @@ -743,19 +743,10 @@ define([ this.changeLanguageMenu = function(menu) { var i; if (me._currLang.id===null || me._currLang.id===undefined) { - for (i=0; i-1) && !menu.items[index].checked && menu.setChecked(index, true); } }; @@ -2717,13 +2708,21 @@ define([ }) }); + var langTemplate = _.template([ + '', + '', + '<%= caption %>', + '' + ].join('')); + me.langTableMenu = new Common.UI.MenuItem({ caption : me.langText, - menu : new Common.UI.Menu({ + menu : new Common.UI.MenuSimple({ cls: 'lang-menu', menuAlign: 'tl-tr', restoreHeight: 300, items : [], + itemTemplate: langTemplate, search: true }) }); @@ -3343,11 +3342,12 @@ define([ me.langParaMenu = new Common.UI.MenuItem({ caption : me.langText, - menu : new Common.UI.Menu({ + menu : new Common.UI.MenuSimple({ cls: 'lang-menu', menuAlign: 'tl-tr', restoreHeight: 300, items : [], + itemTemplate: langTemplate, search: true }) }); @@ -3728,58 +3728,39 @@ define([ var me = this; if (langs && langs.length > 0 && me.langParaMenu && me.langTableMenu) { - me.langParaMenu.menu.removeAll(); - me.langTableMenu.menu.removeAll(); - _.each(langs, function(lang, index){ - me.langParaMenu.menu.addItem(new Common.UI.MenuItem({ + var arrPara = [], arrTable = []; + _.each(langs, function(lang) { + var item = { caption : lang.displayValue, value : lang.value, checkable : true, - toggleGroup : 'popupparalang', langid : lang.code, - spellcheck : lang.spellcheck, - template: _.template([ - '', - '', - '<%= caption %>', - '' - ].join('')) - }).on('click', function(item, e){ - if (me.api){ - if (!_.isUndefined(item.options.langid)) - me.api.put_TextPrLang(item.options.langid); + spellcheck : lang.spellcheck + }; + arrPara.push(item); + arrTable.push(_.clone(item)); + }); + me.langParaMenu.menu.resetItems(arrPara); + me.langTableMenu.menu.resetItems(arrTable); - me._currLang.paraid = item.options.langid; - me.langParaMenu.menu.currentCheckedItem = item; + me.langParaMenu.menu.on('item:click', function(menu, item){ + if (me.api){ + if (!_.isUndefined(item.langid)) + me.api.put_TextPrLang(item.langid); - me.fireEvent('editcomplete', me); - } - })); + me._currLang.paraid = item.langid; + me.fireEvent('editcomplete', me); + } + }); - me.langTableMenu.menu.addItem(new Common.UI.MenuItem({ - caption : lang.displayValue, - value : lang.value, - checkable : true, - toggleGroup : 'popuptablelang', - langid : lang.code, - spellcheck : lang.spellcheck, - template: _.template([ - '', - '', - '<%= caption %>', - '' - ].join('')) - }).on('click', function(item, e){ - if (me.api){ - if (!_.isUndefined(item.options.langid)) - me.api.put_TextPrLang(item.options.langid); + me.langTableMenu.menu.on('item:click', function(menu, item, e){ + if (me.api){ + if (!_.isUndefined(item.langid)) + me.api.put_TextPrLang(item.langid); - me._currLang.tableid = item.options.langid; - me.langTableMenu.menu.currentCheckedItem = item; - - me.fireEvent('editcomplete', me); - } - })); + me._currLang.tableid = item.langid; + me.fireEvent('editcomplete', me); + } }); } }, diff --git a/apps/documenteditor/main/app/view/Statusbar.js b/apps/documenteditor/main/app/view/Statusbar.js index 346af6733..e05d256ce 100644 --- a/apps/documenteditor/main/app/view/Statusbar.js +++ b/apps/documenteditor/main/app/view/Statusbar.js @@ -66,7 +66,7 @@ define([ Common.Utils.String.format(this.pageIndexText, model.get('current'), model.get('count')) ); } - function _clickLanguage(menu, item, state) { + function _clickLanguage(menu, item) { var $parent = menu.$el.parent(); $parent.find('#status-label-lang').text(item.caption); this.langMenu.prevTip = item.value.value; @@ -228,13 +228,13 @@ define([ disabled: true }); - this.langMenu = new Common.UI.Menu({ + this.langMenu = new Common.UI.MenuSimple({ cls: 'lang-menu', style: 'margin-top:-5px;', restoreHeight: 300, itemTemplate: _.template([ - '', - '', + '', + '', '<%= caption %>', '' ].join('')), @@ -340,18 +340,18 @@ define([ }, reloadLanguages: function(array) { - this.langMenu.removeAll(); + var arr = [], + saved = this.langMenu.saved; _.each(array, function(item) { - this.langMenu.addItem({ + arr.push({ caption : item['displayValue'], value : {value: item['value'], code: item['code']}, checkable : true, - checked : this.langMenu.saved == item['displayValue'], - spellcheck : item['spellcheck'], - toggleGroup : 'language' + checked : saved == item['displayValue'], + spellcheck : item['spellcheck'] }); - }, this); - + }); + this.langMenu.resetItems(arr); if (this.langMenu.items.length>0) { this.btnLanguage.setDisabled(!!this.mode.isDisconnected); } @@ -369,7 +369,7 @@ define([ this.langMenu.saved = info.displayValue; this.langMenu.clearAll(); } else - this.langMenu.items[index].setChecked(true); + this.langMenu.setChecked(index, true); } }, From a50379abc6fecc34f6e780ff9a9833833c1d9537 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Sat, 10 Aug 2019 17:02:16 +0300 Subject: [PATCH 025/193] [DE] Refactorint languages menu --- apps/common/main/lib/component/Menu.js | 6 ++---- apps/documenteditor/main/app/view/DocumentHolder.js | 2 +- apps/documenteditor/main/app/view/Statusbar.js | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index 8082b5557..ad97bdf1b 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -603,7 +603,6 @@ define([ '