[PE] Add opacity for slide background

apps/presentationeditor/main/app/template/SlideSettings.template

@@ -9,7 +9,7 @@
             <div id="slide-combo-fill-src" style="width: 100%;"></div>
         </td>
     </tr>
-    <tr class="padding-small">
+    <tr>
         <td>
             <div id="slide-panel-color-fill" class="padding-small" style="width: 100%;">
                 <div id="slide-back-color-btn" style=""></div>
@@ -99,6 +99,19 @@
             </div>
         </td>
     </tr>
+    <tr>
+        <td>
+            <div class="padding-small" id="slide-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="slide-lbl-transparency-start">0</label>
+                    <div id="slide-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="slide-lbl-transparency-end">100</label>
+                </div>
+                <div id="slide-spin-transparency" style="display: inline-block;float: right;"></div>
+            </div>
+        </td>
+    </tr>
     <tr>
         <td class="padding-small">
             <div class="separator horizontal"></div>

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

@@ -86,6 +86,7 @@ define([
             this._stateDisabled = {};
 
             this._state = {
+                Transparency: null,
                 FillType:undefined,
                 SlideColor: 'ffffff',
                 BlipFillType: Asc.c_oAscFillBlipType.STRETCH,
@@ -143,10 +144,40 @@ define([
             });
             this.FillItems.push(this.btnBackColor);
 
+            this.numTransparency = new Common.UI.MetricSpinner({
+                el: $('#slide-spin-transparency'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                disabled: true
+            });
+            this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
+            this.numTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
+            this.FillItems.push(this.numTransparency);
+
+            this.sldrTransparency = new Common.UI.SingleSlider({
+                el: $('#slide-slider-transparency'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrTransparency.setDisabled(true);
+            this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
+            this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
+            this.FillItems.push(this.sldrTransparency);
+
+            this.lblTransparencyStart = $(this.el).find('#slide-lbl-transparency-start');
+            this.lblTransparencyEnd = $(this.el).find('#slide-lbl-transparency-end');
+
             this.FillColorContainer = $('#slide-panel-color-fill');
             this.FillImageContainer = $('#slide-panel-image-fill');
             this.FillPatternContainer = $('#slide-panel-pattern-fill');
             this.FillGradientContainer = $('#slide-panel-gradient-fill');
+            this.TransparencyContainer = $('#slide-panel-transparent-fill');
 
             this._arrEffectName = [
                 {displayValue: this.textNone,    value: Asc.c_oAscSlideTransitionTypes.None},
@@ -483,6 +514,50 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
+        onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
+            this.sldrTransparency.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                var num = field.getNumberValue();
+                var props = new Asc.CAscSlideProps();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_transparent(num * 2.55);
+                props.put_background(fill);
+                this.api.SetSlideProps(props);
+            }
+        },
+
+        onTransparencyChange: function(field, newValue, oldValue){
+            this._sliderChanged = newValue;
+            this.numTransparency.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
+            }
+        },
+
+        onTransparencyChangeComplete: function(field, newValue, oldValue){
+            clearInterval(this.updateslider);
+            this._sliderChanged = newValue;
+            if (!this._sendUndoPoint) { // start point was added
+                this.api.setEndPointHistory();
+                this._transparencyApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+
+        _transparencyApplyFunc: function() {
+            if (this._sliderChanged!==undefined) {
+                var props = new Asc.CAscSlideProps();
+                var fill = new Asc.asc_CShapeFill();
+                fill.put_transparent(this._sliderChanged * 2.55);
+                props.put_background(fill);
+                this.api.SetSlideProps(props);
+                this._sliderChanged = undefined;
+            }
+        },
+
         onGradTypeSelect: function(combo, record){
             this.GradFillType = record.value;
 
@@ -1191,6 +1266,7 @@ define([
             this.FillImageContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_BLIP);
             this.FillPatternContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_PATT);
             this.FillGradientContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_GRAD);
+            this.TransparencyContainer.toggleClass('settings-hidden', (value === Asc.c_oAscFill.FILL_TYPE_NOFILL || value === null));
         },
 
         ChangeSettings: function(props) {
@@ -1209,6 +1285,17 @@ define([
                 var fill_type = fill.get_type();
                 var color = null;
 
+                var transparency = fill.get_transparent();
+                if ( Math.abs(this._state.Transparency-transparency)>0.001 || Math.abs(this.numTransparency.getNumberValue()-transparency)>0.001 ||
+                    (this._state.Transparency===null || transparency===null)&&(this._state.Transparency!==transparency || this.numTransparency.getNumberValue()!==transparency)) {
+
+                    if (transparency !== undefined) {
+                        this.sldrTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true);
+                        this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
+                    }
+                    this._state.Transparency=transparency;
+                }
+
                 if (fill===null || fill_type===null || fill_type==Asc.c_oAscFill.FILL_TYPE_NOFILL) { // заливки нет или не совпадает у неск. фигур
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_NOFILL;
                 } else if (fill_type==Asc.c_oAscFill.FILL_TYPE_SOLID) {
@@ -1544,6 +1631,8 @@ define([
                 for (var i=0; i<this.FillItems.length; i++) {
                     this.FillItems[i].setDisabled(background);
                 }
+                this.lblTransparencyStart.toggleClass('disabled', background);
+                this.lblTransparencyEnd.toggleClass('disabled', background);
                 this.numGradientAngle.setDisabled(background || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
                 this._stateDisabled.background = background;
             }
@@ -1717,6 +1806,7 @@ define([
         textPosition: 'Position',
         tipAddGradientPoint: 'Add gradient point',
         tipRemoveGradientPoint: 'Remove gradient point',
-        textAngle: 'Angle'
+        textAngle: 'Angle',
+        strTransparency: 'Opacity'
     }, PE.Views.SlideSettings || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1667,6 +1667,7 @@
   "PE.Views.SlideSettings.txtLeather": "Leather",
   "PE.Views.SlideSettings.txtPapyrus": "Papyrus",
   "PE.Views.SlideSettings.txtWood": "Wood",
+  "PE.Views.SlideSettings.strTransparency": "Opacity",
   "PE.Views.SlideshowSettings.textLoop": "Loop continuously until 'Esc' is pressed",
   "PE.Views.SlideshowSettings.textTitle": "Show Settings",
   "PE.Views.SlideSizeSettings.strLandscape": "Landscape",