From ae617b0736b4e4513aead49e391d300291dcc39b Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 29 Jul 2019 17:00:21 +0300 Subject: [PATCH] [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 4a50978b3c..5bf6bf72a3 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 42b20e6ba0..feba75b02b 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 b47dd48933..b8e9742e71 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; },