[PE] Fix Bug 46920: add highlight button

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

@@ -517,6 +517,12 @@ define([
                 var application = this.getApplication(),
                     toolbarView = application.getController('Toolbar').getView('Toolbar');
 
+                if (this.appOptions.isEdit && toolbarView && toolbarView.btnHighlightColor.pressed &&
+                    ( !_.isObject(arguments[1]) || arguments[1].id !== 'id-toolbar-btn-highlight')) {
+                    this.api.SetMarkerFormat(false);
+                    toolbarView.btnHighlightColor.toggle(false, false);
+                }
+                
                 application.getController('DocumentHolder').getView('DocumentHolder').focus();
                 if (this.api && this.appOptions.isEdit && this.api.asc_isDocumentCanSave) {
                     var cansave = this.api.asc_isDocumentCanSave(),

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

@@ -105,7 +105,8 @@ define([
                 fontsize: undefined,
                 in_equation: undefined,
                 in_chart: false,
-                no_columns: false
+                no_columns: false,
+                clrhighlight: undefined
             };
             this._isAddingShape = false;
             this.slideSizeArr = [
@@ -301,6 +302,9 @@ define([
             toolbar.btnFontColor.on('click',                            _.bind(this.onBtnFontColor, this));
             toolbar.mnuFontColorPicker.on('select',                     _.bind(this.onSelectFontColor, this));
             $('#id-toolbar-menu-new-fontcolor').on('click',             _.bind(this.onNewFontColor, this));
+            toolbar.btnHighlightColor.on('click',                       _.bind(this.onBtnHighlightColor, this));
+            toolbar.mnuHighlightColorPicker.on('select',                _.bind(this.onSelectHighlightColor, this));
+            toolbar.mnuHighlightTransparent.on('click',                 _.bind(this.onHighlightTransparentClick, this));
             toolbar.btnLineSpace.menu.on('item:toggle',                 _.bind(this.onLineSpaceToggle, this));
             toolbar.btnColumns.menu.on('item:click',                    _.bind(this.onColumnsSelect, this));
             toolbar.btnColumns.menu.on('show:before',                   _.bind(this.onBeforeColumns, this));
@@ -353,6 +357,8 @@ define([
                 this.api.asc_registerCallback('asc_onVerticalTextAlign',    _.bind(this.onApiVerticalTextAlign, this));
                 this.api.asc_registerCallback('asc_onCanAddHyperlink',      _.bind(this.onApiCanAddHyperlink, this));
                 this.api.asc_registerCallback('asc_onTextColor',            _.bind(this.onApiTextColor, this));
+                this.api.asc_registerCallback('asc_onMarkerFormatChanged', _.bind(this.onApiStartHighlight, this));
+                this.api.asc_registerCallback('asc_onTextHighLight',       _.bind(this.onApiHighlightColor, this));
 
                 this.api.asc_registerCallback('asc_onUpdateThemeIndex',     _.bind(this.onApiUpdateThemeIndex, this));
                 this.api.asc_registerCallback('asc_onEndAddShape',          _.bind(this.onApiEndAddShape, this));
@@ -1903,6 +1909,86 @@ define([
             this._state.clrtext_asccolor = color;
         },
 
+        onApiStartHighlight: function(pressed) {
+            this.toolbar.btnHighlightColor.toggle(pressed, true);
+        },
+
+        onApiHighlightColor: function(c) {
+            if (c) {
+                if (c == -1) {
+                    if (this._state.clrhighlight != -1) {
+                        this.toolbar.mnuHighlightTransparent.setChecked(true, true);
+
+                        if (this.toolbar.mnuHighlightColorPicker.cmpEl) {
+                            this._state.clrhighlight = -1;
+                            this.toolbar.mnuHighlightColorPicker.select(null, true);
+                        }
+                    }
+                } else if (c !== null) {
+                    if (this._state.clrhighlight != c.get_hex().toUpperCase()) {
+                        this.toolbar.mnuHighlightTransparent.setChecked(false);
+                        this._state.clrhighlight = c.get_hex().toUpperCase();
+
+                        if ( _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) )
+                            this.toolbar.mnuHighlightColorPicker.select(this._state.clrhighlight, true);
+                    }
+                }  else {
+                    if ( this._state.clrhighlight !== c) {
+                        this.toolbar.mnuHighlightTransparent.setChecked(false, true);
+                        this.toolbar.mnuHighlightColorPicker.select(null, true);
+                        this._state.clrhighlight = c;
+                    }
+                }
+            }
+        },
+
+        _setMarkerColor: function(strcolor, h) {
+            var me = this;
+
+            if (h === 'menu') {
+                me.toolbar.mnuHighlightTransparent.setChecked(false);
+
+                me.toolbar.btnHighlightColor.currentColor = strcolor;
+                me.toolbar.btnHighlightColor.setColor(me.toolbar.btnHighlightColor.currentColor);
+                me.toolbar.btnHighlightColor.toggle(true, true);
+            }
+
+            strcolor = strcolor || 'transparent';
+
+            if (strcolor == 'transparent') {
+                me.api.SetMarkerFormat(true, false);
+            } else {
+                var r = strcolor[0] + strcolor[1],
+                    g = strcolor[2] + strcolor[3],
+                    b = strcolor[4] + strcolor[5];
+                me.api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnHighlightColor);
+            Common.component.Analytics.trackEvent('ToolBar', 'Highlight Color');
+        },
+
+        onBtnHighlightColor: function(btn) {
+            if (btn.pressed) {
+                this._setMarkerColor(btn.currentColor);
+                Common.component.Analytics.trackEvent('ToolBar', 'Highlight Color');
+            }
+            else {
+                this.api.SetMarkerFormat(false);
+            }
+        },
+
+        onSelectHighlightColor: function(picker, color) {
+            this._setMarkerColor(color, 'menu');
+        },
+
+        onHighlightTransparentClick: function(item, e) {
+            this._setMarkerColor('transparent', 'menu');
+            item.setChecked(true, true);
+            this.toolbar.btnHighlightColor.currentColor = 'transparent';
+            this.toolbar.btnHighlightColor.setColor(this.toolbar.btnHighlightColor.currentColor);
+        },
+
         onResetAutoshapes: function () {
             var me = this;
             var onShowBefore = function(menu) {

apps/presentationeditor/main/app/template/Toolbar.template

@@ -57,6 +57,7 @@
                         <span class="btn-slot" id="slot-btn-strikeout"></span>
                         <span class="btn-slot" id="slot-btn-superscript"></span>
                         <span class="btn-slot" id="slot-btn-subscript"></span>
+                        <span class="btn-slot split" id="slot-btn-highlight"></span>
                         <span class="btn-slot split" id="slot-btn-fontcolor"></span>
                     </div>
                 </div>

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

@@ -334,6 +334,28 @@ define([
                     });
                     me.paragraphControls.push(me.btnSubscript);
 
+                    me.btnHighlightColor = new Common.UI.ButtonColored({
+                        id: 'id-toolbar-btn-highlight',
+                        cls: 'btn-toolbar',
+                        iconCls: 'toolbar__icon btn-highlight',
+                        enableToggle: true,
+                        allowDepress: true,
+                        split: true,
+                        lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
+                        menu: new Common.UI.Menu({
+                            style: 'min-width: 100px;',
+                            items: [
+                                {template: _.template('<div id="id-toolbar-menu-highlight" style="width: 120px; height: 120px; margin: 10px;"></div>')},
+                                {caption: '--'},
+                                me.mnuHighlightTransparent = new Common.UI.MenuItem({
+                                    caption: me.strMenuNoFill,
+                                    checkable: true
+                                })
+                            ]
+                        })
+                    });
+                    me.paragraphControls.push(me.btnHighlightColor);
+
                     me.btnFontColor = new Common.UI.ButtonColored({
                         id: 'id-toolbar-btn-fontcolor',
                         cls: 'btn-toolbar',
@@ -925,7 +947,7 @@ define([
 
                     this.lockControls = [this.btnChangeSlide, this.btnSave,
                         this.btnCopy, this.btnPaste, this.btnUndo, this.btnRedo, this.cmbFontName, this.cmbFontSize, this.btnIncFontSize, this.btnDecFontSize,
-                        this.btnBold, this.btnItalic, this.btnUnderline, this.btnStrikeout, this.btnSuperscript, this.btnChangeCase,
+                        this.btnBold, this.btnItalic, this.btnUnderline, this.btnStrikeout, this.btnSuperscript, this.btnChangeCase, this.btnHighlightColor,
                         this.btnSubscript, this.btnFontColor, this.btnClearStyle, this.btnCopyStyle, this.btnMarkers,
                         this.btnNumbers, this.btnDecLeftOffset, this.btnIncLeftOffset, this.btnLineSpace, this.btnHorizontalAlign, this.btnColumns,
                         this.btnVerticalAlign, this.btnShapeArrange, this.btnShapeAlign, this.btnInsertTable, this.btnInsertChart,
@@ -1037,6 +1059,7 @@ define([
                 _injectComponent('#slot-btn-incfont', this.btnIncFontSize);
                 _injectComponent('#slot-btn-decfont', this.btnDecFontSize);
                 _injectComponent('#slot-btn-fontcolor', this.btnFontColor);
+                _injectComponent('#slot-btn-highlight', this.btnHighlightColor);
                 _injectComponent('#slot-btn-changecase', this.btnChangeCase);
                 _injectComponent('#slot-btn-clearstyle', this.btnClearStyle);
                 _injectComponent('#slot-btn-copystyle', this.btnCopyStyle);
@@ -1159,6 +1182,7 @@ define([
                 this.btnSuperscript.updateHint(this.textSuperscript);
                 this.btnSubscript.updateHint(this.textSubscript);
                 this.btnFontColor.updateHint(this.tipFontColor);
+                this.btnHighlightColor.updateHint(this.tipHighlightColor);
                 this.btnChangeCase.updateHint(this.tipChangeCase);
                 this.btnClearStyle.updateHint(this.tipClearStyle);
                 this.btnCopyStyle.updateHint(this.tipCopyStyle + Common.Utils.String.platformKey('Ctrl+Shift+C'));
@@ -1341,6 +1365,18 @@ define([
                         el: $('#id-toolbar-menu-fontcolor')
                     });
                 }
+                if (this.btnHighlightColor.cmpEl) {
+                    this.btnHighlightColor.currentColor = 'FFFF00';
+                    this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor);
+                    this.mnuHighlightColorPicker = new Common.UI.ColorPalette({
+                        el: $('#id-toolbar-menu-highlight'),
+                        colors: [
+                            'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
+                            '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000'
+                        ]
+                    });
+                    this.mnuHighlightColorPicker.select('FFFF00');
+                }
             },
 
             setApi: function (api) {
@@ -1775,7 +1811,9 @@ define([
             mniLowerCase: 'lowercase',
             mniUpperCase: 'UPPERCASE',
             mniCapitalizeWords: 'Capitalize Each Word',
-            mniToggleCase: 'tOGGLE cASE'
+            mniToggleCase: 'tOGGLE cASE',
+            strMenuNoFill: 'No Fill',
+            tipHighlightColor: 'Highlight color'
         }
     }()), PE.Views.Toolbar || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1960,5 +1960,7 @@
   "PE.Views.Toolbar.txtScheme8": "Flow",
   "PE.Views.Toolbar.txtScheme9": "Foundry",
   "PE.Views.Toolbar.txtSlideAlign": "Align to Slide",
-  "PE.Views.Toolbar.txtUngroup": "Ungroup"
+  "PE.Views.Toolbar.txtUngroup": "Ungroup",
+  "PE.Views.Toolbar.strMenuNoFill": "No Fill",
+  "PE.Views.Toolbar.tipHighlightColor": "Highlight color"
 }

apps/presentationeditor/main/resources/less/toolbar.less

@@ -14,6 +14,10 @@
         > .btn-slot:not(:last-child):not(.split) {
             margin-right: 4px;
         }
+
+        > .btn-slot:not(:last-child).split {
+            margin-right: 2px;
+        }
     }
 }