[PE] Fix Bug 35477.

apps/presentationeditor/main/app/collection/SlideThemes.js

@@ -0,0 +1,49 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2017
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ *  SlideThemes.js
+ *
+ *  Created by Julia Radzhabova on 8/07/17
+ *  Copyright (c) 2017 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'backbone'
+], function(Backbone){ 'use strict';
+
+    PE.Collections = PE.Collections || {};
+
+    PE.Collections.SlideThemes = Backbone.Collection.extend({
+    });
+});

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -48,6 +48,7 @@ define([
     'common/main/lib/view/ImageFromUrlDialog',
     'common/main/lib/view/InsertTableDialog',
     'common/main/lib/util/define',
+    'presentationeditor/main/app/collection/SlideThemes',
     'presentationeditor/main/app/view/Toolbar',
     'presentationeditor/main/app/view/HyperlinkSettingsDialog',
     'presentationeditor/main/app/view/SlideSizeSettings',
@@ -56,7 +57,9 @@ define([
 
     PE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({
         models: [],
-        collections: [],
+        collections: [
+            'SlideThemes'
+        ],
         views: [
             'Toolbar'
         ],
@@ -1953,13 +1956,25 @@ define([
 
             me.toolbar.listTheme.menuPicker.store.reset([]); // remove all
 
-            _.each(defaultThemes.concat(docThemes), function(theme) {
+            var themeStore = this.getCollection('SlideThemes');
-                me.toolbar.listTheme.menuPicker.store.add({
+            if (themeStore) {
-                    imageUrl: theme.get_Image(),
+                var arr = [];
-                    uid     : Common.UI.getId(),
+                _.each(defaultThemes.concat(docThemes), function(theme) {
-                    themeId : theme.get_Index()
+                    arr.push(new Common.UI.DataViewModel({
+                        imageUrl: theme.get_Image(),
+                        uid     : Common.UI.getId(),
+                        themeId : theme.get_Index(),
+                        itemWidth   : 85,
+                        itemHeight  : 38
+                    }));
+                    me.toolbar.listTheme.menuPicker.store.add({
+                        imageUrl: theme.get_Image(),
+                        uid     : Common.UI.getId(),
+                        themeId : theme.get_Index()
+                    });
                 });
-            });
+                themeStore.reset(arr);
+            }
 
             if (me.toolbar.listTheme.menuPicker.store.length > 0 &&  me.toolbar.listTheme.rendered){
                 me.toolbar.listTheme.fillComboView(me.toolbar.listTheme.menuPicker.store.at(0), true);

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

@@ -66,6 +66,7 @@ define([
             me._currentParaObjDisabled = false;
             me._currentSpellObj = undefined;
             me._currLang        = {};
+            me._state = {};
             
             /** coauthoring begin **/
             var usersStore = PE.getCollection('Common.Collections.Users');
@@ -1472,6 +1473,18 @@ define([
                 me._isFromSlideMenu = number;
             };
 
+            var onApiUpdateThemeIndex = function(v) {
+                me._state.themeId = v;
+            };
+
+            var onApiLockDocumentTheme = function() {
+                me._state.themeLock = true;
+            };
+
+            var onApiUnLockDocumentTheme = function() {
+                me._state.themeLock = false;
+            };
+
             this.setApi = function(o) {
                 me.api = o;
 
@@ -1501,6 +1514,9 @@ define([
                     me.api.asc_registerCallback('asc_onShowForeignCursorLabel', _.bind(onShowForeignCursorLabel, me));
                     me.api.asc_registerCallback('asc_onHideForeignCursorLabel', _.bind(onHideForeignCursorLabel, me));
                     me.api.asc_registerCallback('asc_onFocusObject',            _.bind(onFocusObject, me));
+                    me.api.asc_registerCallback('asc_onUpdateThemeIndex',       _.bind(onApiUpdateThemeIndex, me));
+                    me.api.asc_registerCallback('asc_onLockDocumentTheme',      _.bind(onApiLockDocumentTheme, me));
+                    me.api.asc_registerCallback('asc_onUnLockDocumentTheme',    _.bind(onApiUnLockDocumentTheme, me));
                 }
 
                 return me;
@@ -1739,6 +1755,16 @@ define([
                 })
             });
 
+            var mnuChangeTheme = new Common.UI.MenuItem({
+                caption     : me.txtChangeTheme,
+                menu        : new Common.UI.Menu({
+                    menuAlign: 'tl-tr',
+                    items: [
+                        { template: _.template('<div id="id-docholder-menu-changetheme" style="width: 280px; margin: 0 4px;"></div>') }
+                    ]
+                })
+            });
+
             var mnuPreview = new Common.UI.MenuItem({
                 caption : me.txtPreview
             }).on('click', function(item) {
@@ -1792,10 +1818,11 @@ define([
                     mnuSlideHide.setChecked(value.isSlideHidden===true);
                     me.slideMenu.items[5].setVisible(value.isSlideSelect===true || value.fromThumbs!==true);
                     mnuChangeSlide.setVisible(value.isSlideSelect===true || value.fromThumbs!==true);
+                    mnuChangeTheme.setVisible(value.isSlideSelect===true || value.fromThumbs!==true);
                     menuSlideSettings.setVisible(value.fromThumbs!==true);
                     menuSlideSettings.options.value = null;
 
-                    for (var i = 8; i < 12; i++) {
+                    for (var i = 9; i < 13; i++) {
                         me.slideMenu.items[i].setVisible(value.fromThumbs===true);
                     }
 
@@ -1822,6 +1849,7 @@ define([
                     mnuSelectAll.setDisabled(locked || me.slidesCount<2);
                     mnuDeleteSlide.setDisabled(lockedDeleted || locked);
                     mnuChangeSlide.setDisabled(lockedLayout || locked);
+                    mnuChangeTheme.setDisabled(me._state.themeLock || locked );
                     mnuSlideHide.setDisabled(lockedLayout || locked);
                 },
                 items: [
@@ -1852,6 +1880,7 @@ define([
                     mnuSlideHide,
                     {caption: '--'},
                     mnuChangeSlide,
+                    mnuChangeTheme,
                     menuSlideSettings,
                     {caption: '--'},
                     mnuSelectAll,
@@ -1901,6 +1930,37 @@ define([
                 me.listenTo(PE.getCollection('SlideLayouts'), 'reset',  function() {
                     me.slideLayoutMenu._needRecalcSlideLayout = true;
                 });
+
+                me.slideThemeMenu = new Common.UI.DataView({
+                    el          : $('#id-docholder-menu-changetheme'),
+                    parentMenu  : mnuChangeTheme.menu,
+                    restoreHeight: 300,
+                    style: 'max-height: 300px;',
+                    store       : PE.getCollection('SlideThemes'),
+                    itemTemplate: _.template([
+                        '<div class="style" id="<%= id %>" style="width: <%= itemWidth %>px;">',
+                        '<div style="background-image: url(<%= imageUrl %>); width: <%= itemWidth %>px; height: <%= itemHeight %>px;"/>',
+                        '</div>'
+                    ].join(''))
+                }).on('item:click', function(picker, item, record, e) {
+                    if (me.api) {
+                        me.api.ChangeTheme(record.get('themeId'), true);
+                        if (e.type !== 'click')
+                            me.slideMenu.hide();
+                        me.fireEvent('editcomplete', me);
+                        Common.component.Analytics.trackEvent('DocumentHolder', 'Change Theme');
+                    }
+                });
+
+                if (me.slideMenu) {
+                    mnuChangeTheme.menu.on('show:after', function (menu) {
+                        var record = me.slideThemeMenu.store.findWhere({themeId: me._state.themeId});
+                        me.slideThemeMenu.selectRecord(record, true);
+
+                        me.slideThemeMenu.scroller.update({alwaysVisibleY: true});
+                        me.slideThemeMenu.scroller.scrollTop(0);
+                    });
+                }
             });
 
             var mnuTableMerge = new Common.UI.MenuItem({
@@ -3219,7 +3279,8 @@ define([
         spellcheckText: 'Spellcheck',
         langText: 'Select Language',
         textUndo: 'Undo',
-        txtSlideHide: 'Hide Slide'
+        txtSlideHide: 'Hide Slide',
+        txtChangeTheme: 'Change Theme'
 
     }, PE.Views.DocumentHolder || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -709,6 +709,7 @@
   "PE.Views.DocumentHolder.txtBorderProps": "Border properties",
   "PE.Views.DocumentHolder.txtBottom": "Bottom",
   "PE.Views.DocumentHolder.txtChangeLayout": "Change Layout",
+  "PE.Views.DocumentHolder.txtChangeTheme": "Change Theme",
   "PE.Views.DocumentHolder.txtColumnAlign": "Column alignment",
   "PE.Views.DocumentHolder.txtDecreaseArg": "Decrease argument size",
   "PE.Views.DocumentHolder.txtDeleteArg": "Delete argument",