[PE] Left menu refactoring

apps/presentationeditor/main/app/view/FileMenu.js

@@ -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);
+            var $markup = $(this.template());
-            this.$el.html(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;
+            this.rendered = true;
-            me.panels = {
+            this.$el.html($markup);
-                'opts'      : (new PE.Views.FileMenuPanels.Settings({menu:me})).render(),
+            this.$el.find('.content-box').hide();
-                'info'      : (new PE.Views.FileMenuPanels.DocumentInfo({menu:me})).render(),
+            this.applyMode();
-                'rights'    : (new PE.Views.FileMenuPanels.DocumentRights({menu:me})).render()
-            };
 
-            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.canOpenRecent && this.mode.recent ) {
-                if (this.mode.recent){
+                !this.panels['recent'] && (this.panels['recent'] = (new PE.Views.FileMenuPanels.RecentFiles({menu:this, recent: this.mode.recent})).render());
-                    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')
+            if (type == 'save') {
-                return this.miSave;
+                if (this.rendered)
+                    return this.miSave;
+                else
+                    return this.options.miSave ? this.options.miSave : (this.options.miSave = new Common.UI.MenuItem({}));
+            }
         },
 
         btnSaveCaption          : 'Save',

apps/presentationeditor/main/app/view/FileMenuPanels.js

@@ -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() {
+        render: function(node) {
-            $(this.el).html(this.template({scope: this}));
+            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) {
+            }).on('selected', function(combo, record) {
-                if (record.value == 1 && (this.chAutosave.getValue()!=='checked'))
+                if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
-                    this.chAutosave.setValue(1);
+                    me.chAutosave.setValue(1);
-                this.lblCoAuthMode.text(record.descValue);
+                me.lblCoAuthMode.text(record.descValue);
-            }, this));
+            });
 
-            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){
+            }).on('change', function(field, newValue, oldValue, eOpts){
-                if (field.getValue()!=='checked' && this.cmbCoAuthMode.getValue()) {
+                if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
-                    this.cmbCoAuthMode.setValue(0);
+                    me.cmbCoAuthMode.setValue(0);
-                    this.lblCoAuthMode.text(this.strCoAuthModeDescStrict);
+                    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() {
+        render: function(node) {
-            $(this.el).html(this.template());
-
             var me = this;
+            var $markup = $(me.template());
 
             // server info
-            this.lblPlacement = $('#id-info-placement');
+            this.lblPlacement = $markup.findById('#id-info-placement');
-            this.lblOwner = $('#id-info-owner');
+            this.lblOwner = $markup.findById('#id-info-owner');
-            this.lblUploaded = $('#id-info-uploaded');
+            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.lblModifyDate = $markup.findById('#id-info-modify-date');
-            this.lblModifyBy = $('#id-info-modify-by');
+            this.lblModifyBy = $markup.findById('#id-info-modify-by');
 
             // creation info
-            this.lblDate = $('#id-info-date');
+            this.lblDate = $markup.findById('#id-info-date');
-            this.lblApplication = $('#id-info-appname');
+            this.lblApplication = $markup.findById('#id-info-appname');
-            this.tblAuthor = $('#id-info-author table');
+            this.tblAuthor = $markup.findById('#id-info-author table');
-            this.trAuthor = $('#id-info-add-author').closest('tr');
+            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() {
+        render: function(node) {
-            $(this.el).html(this.template());
+            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:sharing', this.changeAccessRights.bind(this));
-            Common.NotificationCenter.on('collaboration:sharingdeny', _.bind(this.onLostEditRights, 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
                 });
             }

apps/presentationeditor/main/app/view/LeftMenu.js

@@ -87,13 +87,11 @@ define([
         },
 
         render: function () {
-            var el = $(this.el);
+            var $markup = $(this.template({}));
-            el.html(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.btnComments.on('click',        this.onBtnMenuClick.bind(this));
-            this.btnChat.on('click',            _.bind(this.onBtnMenuClick, 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'}));
-            this.btnAbout.panel = (new Common.Views.About({el: $('#about-menu-panel'), appName: 'Presentation Editor'})).render();
+            this.$el.html($markup);
 
             return this;
         },