From c022b065a02fc926a602f07133d1f9aa184f9445 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 30 Aug 2019 13:01:21 +0300 Subject: [PATCH] [PE] Refactoring loading slide layouts --- .../main/app/controller/Toolbar.js | 19 ++-- .../main/app/view/Toolbar.js | 92 +++++++------------ 2 files changed, 44 insertions(+), 67 deletions(-) diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 80f0f3962..8dac6cc17 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -125,6 +125,7 @@ define([ 'insert:textart' : this.onInsertTextart.bind(this), 'insert:shape' : this.onInsertShape.bind(this), 'add:slide' : this.onAddSlide.bind(this), + 'change:slide' : this.onChangeSlide.bind(this), 'change:compact' : this.onClickChangeCompact }, 'FileMenu': { @@ -255,8 +256,6 @@ define([ * UI Events */ - if (toolbar.mnuChangeSlidePicker) - toolbar.mnuChangeSlidePicker.on('item:click', _.bind(this.onChangeSlide, this)); toolbar.btnPreview.on('click', _.bind(this.onPreviewBtnClick, this)); toolbar.btnPreview.menu.on('item:click', _.bind(this.onPreviewItemClick, this)); toolbar.btnPrint.on('click', _.bind(this.onPrint, this)); @@ -722,8 +721,12 @@ define([ this.toolbar.lockToolbar(PE.enumLock.inEquation, in_equation, {array: [me.toolbar.btnSuperscript, me.toolbar.btnSubscript]}); } - if (this.toolbar.mnuChangeSlidePicker) - this.toolbar.mnuChangeSlidePicker.options.layout_index = layout_index; + if (this.toolbar.btnChangeSlide) { + if (this.toolbar.btnChangeSlide.mnuSlidePicker) + this.toolbar.btnChangeSlide.mnuSlidePicker.options.layout_index = layout_index; + else + this.toolbar.btnChangeSlide.mnuSlidePicker = {options: {layout_index: layout_index}}; + } }, onApiStyleChange: function(v) { @@ -816,19 +819,17 @@ define([ }, onAddSlide: function(type) { - var me = this; if ( this.api) { this.api.AddSlide(type); - Common.NotificationCenter.trigger('edit:complete', me.toolbar); + Common.NotificationCenter.trigger('edit:complete', this.toolbar); Common.component.Analytics.trackEvent('ToolBar', 'Add Slide'); } }, - onChangeSlide: function(picker, item, record) { + onChangeSlide: function(type) { if (this.api) { - if (record) - this.api.ChangeLayout(record.get('data').idx); + this.api.ChangeLayout(type); Common.NotificationCenter.trigger('edit:complete', this.toolbar); Common.component.Analytics.trackEvent('ToolBar', 'Change Layout'); diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index 647553c3f..39bc1c26a 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -1188,46 +1188,6 @@ define([ maxColumns: 10 }); - var createDataPicker = function (btn) { - me.mnuChangeSlidePicker = new Common.UI.DataView({ - el: $('#id-toolbar-menu-changeslide'), - parentMenu: me.btnChangeSlide.menu, - restoreHeight: 300, - restoreWidth: 302, - style: 'max-height: 300px;', - store: PE.getCollection('SlideLayouts'), - itemTemplate: _.template([ - '
', - '
', - '
<%= title %>
', - '
' - ].join('')) - }); - if (me.btnChangeSlide.menu) { - me.btnChangeSlide.menu.on('show:after', function () { - me.onSlidePickerShowAfter(me.mnuChangeSlidePicker); - me.mnuChangeSlidePicker.scroller.update({alwaysVisibleY: true}); - - var record = me.mnuChangeSlidePicker.store.findLayoutByIndex(me.mnuChangeSlidePicker.options.layout_index); - if (record) { - me.mnuChangeSlidePicker.selectRecord(record, true); - me.mnuChangeSlidePicker.scrollToRecord(record); - } - }); - } - me.mnuChangeSlidePicker._needRecalcSlideLayout = true; - }; - // btnChangeSlide isn't in compact toolbar mode -> may be rendered after createDelayedElements - if (this.btnChangeSlide.rendered) - createDataPicker(this.btnChangeSlide); - else - this.btnChangeSlide.on('render:after', createDataPicker); - - this.listenTo(PE.getCollection('SlideLayouts'), 'reset', function () { - if (me.mnuChangeSlidePicker) - me.mnuChangeSlidePicker._needRecalcSlideLayout = true; - }); - /** coauthoring begin **/ this.showSynchTip = !Common.localStorage.getBool('pe-hide-synch'); @@ -1421,7 +1381,6 @@ define([ onSlidePickerShowAfter: function (picker) { if (!picker._needRecalcSlideLayout) return; - if (picker.cmpEl && picker.dataViewItems.length > 0) { var dataViewItems = picker.dataViewItems, el = $(dataViewItems[0].el), @@ -1522,14 +1481,14 @@ define([ updateAddSlideMenu: function(collection) { if (collection.size()<1) return; - var me = this; - me.btnsAddSlide.forEach(function (btn, index) { - if ( !btn.mnuAddSlidePicker ) { - btn.mnuAddSlidePicker = new Common.UI.DataView({ - el: $('#id-toolbar-menu-addslide-' + index), - parentMenu: btn.menu, - showLast: false, + if (!me.binding.onShowBeforeAddSlide) { + me.binding.onShowBeforeAddSlide = function(menu) { + var change = (this.iconCls == 'btn-changeslide'); + var picker = new Common.UI.DataView({ + el: $('.menu-layouts', menu.$el), + parentMenu: menu, + showLast: change, restoreHeight: 300, restoreWidth: 302, style: 'max-height: 300px;', @@ -1541,21 +1500,38 @@ define([ '
' ].join('')) }); - btn.mnuAddSlidePicker.on('item:click', function (picker, item, record, e) { + picker.on('item:click', function (picker, item, record, e) { if (e.type !== 'click') Common.UI.Menu.Manager.hideAll(); if (record) - me.fireEvent('add:slide', [record.get('data').idx]); + me.fireEvent(change ? 'change:slide' : 'add:slide', [record.get('data').idx]); }); - if (btn.menu) { - btn.menu.on('show:after', function () { - me.onSlidePickerShowAfter(btn.mnuAddSlidePicker); - btn.mnuAddSlidePicker.scroller.update({alwaysVisibleY: true}); - btn.mnuAddSlidePicker.scroller.scrollTop(0); + if (menu) { + menu.on('show:after', function () { + me.onSlidePickerShowAfter(picker); + picker.scroller.update({alwaysVisibleY: true}); + if (change) { + var record = picker.store.findLayoutByIndex(picker.options.layout_index); + if (record) { + picker.selectRecord(record, true); + picker.scrollToRecord(record); + } + } else + picker.scroller.scrollTop(0); }); } - } - btn.mnuAddSlidePicker._needRecalcSlideLayout = true; - }); + menu.off('show:before', me.binding.onShowBeforeAddSlide); + if (change && this.mnuSlidePicker) + picker.options.layout_index = this.mnuSlidePicker.options.layout_index; + this.mnuSlidePicker = picker; + }; + me.btnsAddSlide.concat(me.btnChangeSlide).forEach(function (btn, index) { + btn.menu.on('show:before', me.binding.onShowBeforeAddSlide, btn); + }); + } else { + me.btnsAddSlide.concat(me.btnChangeSlide).forEach(function (btn, index) { + btn.mnuSlidePicker && (btn.mnuSlidePicker._needRecalcSlideLayout = true); + }); + } }, textBold: 'Bold',