Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE] Left menu refactoring

Browse source
This commit is contained in:
Julia Radzhabova 2019-08-22 17:43:51 +03:00
parent fa9e831df6
commit c19c9ba7b0
3 changed files with 147 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
apps/presentationeditor/main/app/view/FileMenu.js
View file

@ -49,6 +49,7 @@ define([
PE.Views.FileMenu = Common.UI.BaseView.extend(_.extend({
el: '#file-menu-panel',
rendered: false,
options: {alias:'FileMenu'},
template: _.template(tpl),
@ -84,89 +85,92 @@ define([
},
render: function () {
this.$el = $(this.el);
this.$el.html(this.template());
var $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,
disabled: true
});
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
});
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.miHelp = new Common.UI.MenuItem({
el : $('#fm-btn-help',this.el),
el : $markup.elementById('#fm-btn-help'),
action : 'help',
caption : this.btnHelpCaption,
canFocused: false
@ -175,7 +179,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
@ -191,35 +195,37 @@ 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
}),
this.miAccess,
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'),
action : 'exit',
caption : this.btnBackCaption,
canFocused: false
})
);
var me = this;
me.panels = {
'opts' : (new PE.Views.FileMenuPanels.Settings({menu:me})).render(),
'info' : (new PE.Views.FileMenuPanels.DocumentInfo({menu:me})).render(),
'rights' : (new PE.Views.FileMenuPanels.DocumentRights({menu:me})).render()
};
this.rendered = true;
this.$el.html($markup);
this.$el.find('.content-box').hide();
this.applyMode();
me.$el.find('.content-box').hide();
if ( !!this.api ) {
this.panels['info'].setApi(this.api);
if ( this.panels['protect'] )
this.panels['protect'].setApi(api);
}
return this;
},
@ -227,6 +233,9 @@ define([
show: function(panel) {
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;
@ -245,6 +254,16 @@ define([
},
applyMode: function() {
if (!this.panels) {
this.panels = {
'opts' : (new PE.Views.FileMenuPanels.Settings({menu:this})).render(this.$el.find('#panel-settings')),
'info' : (new PE.Views.FileMenuPanels.DocumentInfo({menu:this})).render(this.$el.find('#panel-info')),
'rights' : (new PE.Views.FileMenuPanels.DocumentRights({menu:this})).render(this.$el.find('#panel-rights'))
};
}
if (!this.mode) return;
this.miDownload[(this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline))?'show':'hide']();
this.miSaveCopyAs[(this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) && (this.mode.canRequestSaveAs || this.mode.saveAsUrl) ?'show':'hide']();
this.miSaveAs[(this.mode.canDownload && this.mode.isDesktopApp && this.mode.isOffline)?'show':'hide']();
@ -278,30 +297,28 @@ define([
if ( this.mode.canCreateNew ) {
if (this.mode.templates && this.mode.templates.length) {
$('a',this.miNew.$el).text(this.btnCreateNewCaption + '...');
this.panels['new'] = ((new PE.Views.FileMenuPanels.CreateNew({menu: this, docs: this.mode.templates})).render());
!this.panels['new'] && (this.panels['new'] = ((new PE.Views.FileMenuPanels.CreateNew({menu: this, docs: this.mode.templates})).render()));
}
}
if ( this.mode.canOpenRecent ) {
if (this.mode.recent){
this.panels['recent'] = (new PE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render();
}
if ( this.mode.canOpenRecent && this.mode.recent ) {
!this.panels['recent'] && (this.panels['recent'] = (new PE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render());
}
if (this.mode.canProtect) {
this.panels['protect'] = (new PE.Views.FileMenuPanels.ProtectDoc({menu:this})).render();
!this.panels['protect'] && (this.panels['protect'] = (new PE.Views.FileMenuPanels.ProtectDoc({menu:this})).render());
this.panels['protect'].setMode(this.mode);
}
if (this.mode.canDownload) {
this.panels['saveas'] = ((new PE.Views.FileMenuPanels.ViewSaveAs({menu: this})).render());
!this.panels['saveas'] && (this.panels['saveas'] = ((new PE.Views.FileMenuPanels.ViewSaveAs({menu: this})).render()));
}
if (this.mode.canDownload && (this.mode.canRequestSaveAs || this.mode.saveAsUrl)) {
this.panels['save-copy'] = ((new PE.Views.FileMenuPanels.ViewSaveCopy({menu: this})).render());
!this.panels['save-copy'] && (this.panels['save-copy'] = ((new PE.Views.FileMenuPanels.ViewSaveCopy({menu: this})).render()));
}
if (this.mode.canHelp) {
if (this.mode.canHelp && !this.panels['help']) {
this.panels['help'] = ((new PE.Views.FileMenuPanels.Help({menu: this})).render());
this.panels['help'].setLangConfig(this.mode.lang);
}
@ -319,14 +336,21 @@ define([
this.mode = mode;
}
if (!delay) this.applyMode();
if (!delay) {
if ( this.rendered )
this.applyMode();
}
},
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);
}
this.api.asc_registerCallback('asc_onDocumentName', _.bind(this.onDocumentName, this));
return this;
},
loadDocument: function(data) {
@ -370,7 +394,8 @@ define([
onDocumentName: function(name) {
this.document.title = name;
this.panels['info'].updateInfo(this.document);
if (this.rendered)
this.panels['info'].updateInfo(this.document);
},
isVisible: function () {
@ -378,8 +403,12 @@ define([
},
getButton: function(type) {
if (type == 'save')
return this.miSave;
if (type == 'save') {
if (this.rendered)
return this.miSave;
else
return this.options.miSave ? this.options.miSave : (this.options.miSave = new Common.UI.MenuItem({}));
}
},
btnSaveCaption : 'Save',

127
apps/presentationeditor/main/app/view/FileMenuPanels.js
View file

@ -84,12 +84,12 @@ 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)) {
this.scroller = new Common.UI.Scroller({
el: $(this.el),
el: this.$el,
suppressScrollX: true
});
}
@ -140,12 +140,12 @@ 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)) {
this.scroller = new Common.UI.Scroller({
el: $(this.el),
el: this.$el,
suppressScrollX: true
});
}
@ -221,21 +221,22 @@ define([
this.menu = options.menu;
},
render: function() {
$(this.el).html(this.template({scope: this}));
render: function(node) {
var me = this;
var $markup = $(this.template({scope: this}));
this.chSpell = new Common.UI.CheckBox({
el: $('#fms-chb-spell-check'),
el: $markup.findById('#fms-chb-spell-check'),
labelText: this.strSpellCheckMode
});
this.chInputMode = new Common.UI.CheckBox({
el: $('#fms-chb-input-mode'),
el: $markup.findById('#fms-chb-input-mode'),
labelText: this.strInputMode
});
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',
@ -259,7 +260,7 @@ define([
/** coauthoring begin **/
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',
@ -267,38 +268,38 @@ 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.lblCoAuthMode.text(record.descValue);
}, this));
}).on('selected', function(combo, record) {
if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
me.chAutosave.setValue(1);
me.lblCoAuthMode.text(record.descValue);
});
this.lblCoAuthMode = $('#fms-lbl-coauth-mode');
this.lblCoAuthMode = $markup.findById('#fms-lbl-coauth-mode');
/** coauthoring end **/
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.lblCoAuthMode.text(this.strCoAuthModeDescStrict);
}).on('change', function(field, newValue, oldValue, eOpts){
if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
me.cmbCoAuthMode.setValue(0);
me.lblCoAuthMode.text(me.strCoAuthModeDescStrict);
}
}, 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.cmbFontRender = new Common.UI.ComboBox({
el : $('#fms-cmb-font-render'),
el : $markup.findById('#fms-cmb-font-render'),
style : 'width: 160px;',
editable : false,
cls : 'input-group-nr',
@ -310,7 +311,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',
@ -322,14 +323,16 @@ 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.$el = $(node).html($markup);
if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({
el: $(this.el),
el: this.$el,
suppressScrollX: true
});
}
@ -472,7 +475,7 @@ define([
},
render: function() {
$(this.el).html(this.template());
this.$el.html(this.template());
this.viewRecentPicker = new Common.UI.DataView({
el: $('#id-recent-view'),
@ -490,7 +493,7 @@ define([
if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({
el: $(this.el),
el: this.$el,
suppressScrollX: true
});
}
@ -552,14 +555,14 @@ define([
},
render: function() {
$(this.el).html(this.template({
this.$el.html(this.template({
scope: this,
docs: this.options[0].docs
}));
if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({
el: $(this.el),
el: this.$el,
suppressScrollX: true
});
}
@ -662,15 +665,14 @@ 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');
// edited info
var keyDownBefore = function(input, e){
@ -685,7 +687,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
@ -696,7 +698,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
@ -707,7 +709,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
@ -719,18 +721,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 = '<tr><td><div style="display: inline-block;width: 200px;"><input type="text" spellcheck="false" class="form-control" readonly="true" value="{0}" ></div><div class="close img-commonctrl"></div></td></tr>';
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);
@ -744,7 +746,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
@ -773,9 +775,10 @@ define([
this.updateInfo(this.doc);
this.$el = $(node).html($markup);
if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({
el: $(this.el),
el: this.$el,
suppressScrollX: true
});
}
@ -967,12 +970,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.findById('#id-info-btn-edit')
});
this.btnEditRights.on('click', _.bind(this.changeAccessRights, this));
@ -980,15 +983,17 @@ define([
this.updateInfo(this.doc);
this.$el = $(node).html($markup);
if (_.isUndefined(this.scroller)) {
this.scroller = new Common.UI.Scroller({
el: $(this.el),
el: this.$el,
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));
return this;
},
@ -1132,7 +1137,7 @@ define([
render: function() {
var me = this;
$(this.el).html(this.template());
this.$el.html(this.template());
this.viewHelpPicker = new Common.UI.DataView({
el: $('#id-help-contents'),
@ -1263,7 +1268,7 @@ define([
},
render: function() {
$(this.el).html(this.template({scope: this}));
this.$el.html(this.template({scope: this}));
var protection = PE.getController('Common.Controllers.Protection').getView();
@ -1290,7 +1295,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
});
}

26
apps/presentationeditor/main/app/view/LeftMenu.js
View file

@ -87,13 +87,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
@ -101,7 +99,7 @@ define([
this.btnThumbs = new Common.UI.Button({
action: 'thumbs',
el: $('#left-btn-thumbs'),
el: $markup.elementById('#left-btn-thumbs'),
hint: this.tipSlides,
enableToggle: true,
disabled: true,
@ -110,7 +108,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,
@ -119,14 +117,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,
@ -134,7 +132,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,
@ -144,12 +142,12 @@ define([
this.btnComments.hide();
this.btnChat.hide();
this.btnComments.on('click', _.bind(this.onBtnMenuClick, this));
this.btnChat.on('click', _.bind(this.onBtnMenuClick, this));
this.btnComments.on('click', this.onBtnMenuClick.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,
@ -164,8 +162,8 @@ define([
this.btnAbout.on('click', _.bind(this.onFullMenuClick, this));
this.menuFile = new PE.Views.FileMenu({});
this.menuFile.render();
this.btnAbout.panel = (new Common.Views.About({el: $('#about-menu-panel'), appName: 'Presentation Editor'})).render();
this.btnAbout.panel = (new Common.Views.About({el: '#about-menu-panel', appName: 'Presentation Editor'}));
this.$el.html($markup);
return this;
},