Merge pull request 'feature/text-direction' (#274) from feature/text-…

…direction into release/v8.3.0

apps/common/main/lib/component/Label.js

@@ -148,6 +148,10 @@ define([
                     }
                 }
             }
+        },
+
+        setCaption: function(text) {
+            this.$label.find('.caption').text(text);
         }
     });
 });

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

@@ -260,6 +260,7 @@ define([
             this.mode = mode;
             this.toolbar.applyLayout(mode);
             Common.UI.TooltipManager.addTips({
+                'rtlDirection' : {name: 'help-tip-rtl-dir', placement: 'bottom-left', text: this.helpRtlDir, header: this.helpRtlDirHeader, target: '#slot-btn-direction', automove: true},
                 'mergeShapes' : {name: 'help-tip-merge-shapes', placement: 'bottom-left', text: this.helpMergeShapes, header: this.helpMergeShapesHeader, target: '#slot-shapes-merge', closable: false},
                 'refreshFile' : {text: _main.textUpdateVersion, header: _main.textUpdating, target: '#toolbar', maxwidth: 'none', showButton: false, automove: true, noHighlight: true, multiple: true},
                 'disconnect' : {text: _main.textConnectionLost, header: _main.textDisconnect, target: '#toolbar', maxwidth: 'none', showButton: false, automove: true, noHighlight: true, multiple: true},
@@ -372,6 +373,8 @@ define([
             toolbar.mnuLineSpace.on('item:toggle',                      _.bind(this.onLineSpaceToggle, this));
             toolbar.mnuLineSpace.on('item:click',                       _.bind(this.onLineSpaceClick, this));
             toolbar.mnuLineSpace.on('show:after',                       _.bind(this.onLineSpaceShow, this));
+            toolbar.btnTextDir.menu.on('item:click',                    _.bind(this.onTextDirClick, this));
+            toolbar.btnTextDir.menu.on('show:after',                    _.bind(this.onTextDirShowAfter, this));
             toolbar.mnuNonPrinting.on('item:toggle',                    _.bind(this.onMenuNonPrintingToggle, this));
             toolbar.btnShowHidenChars.on('toggle',                      _.bind(this.onNonPrintingToggle, this));
             toolbar.mnuTablePicker.on('select',                         _.bind(this.onTablePickerSelect, this));
@@ -484,6 +487,7 @@ define([
                 this.api.asc_registerCallback('asc_onAddSmartArtPreview', _.bind(this.onApiAddSmartArtPreview, this));
                 this.api.asc_registerCallback('asc_onEndSmartArtPreview', _.bind(this.onApiEndSmartArtPreview, this));
                 this.api.asc_registerCallback('asc_updateListPatterns', _.bind(this.onApiUpdateListPatterns, this));
+                this.api.asc_registerCallback('asc_onTextDirection', _.bind(this.onApiTextDirection, this));
             } else if (this.mode.isRestrictedEdit) {
                 this.api.asc_registerCallback('asc_onFocusObject', _.bind(this.onApiFocusObjectRestrictedEdit, this));
                 this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
@@ -1780,7 +1784,42 @@ define([
                 toolbar.mnuLineSpaceBefore.options.action = before ? 'remove' : 'add';
                 toolbar.mnuLineSpaceAfter.setCaption(after ? toolbar.textRemSpaceAfter : toolbar.textAddSpaceAfter);
                 toolbar.mnuLineSpaceAfter.options.action = after ? 'remove' : 'add';
+            }
+        },
+
+        onTextDirClick: function(menu, item) {
+            this.api && this.api.asc_setRtlTextDirection(!!item.value);
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onTextDirShowAfter: function(menu, item) {
+            Common.UI.TooltipManager.closeTip('rtlDirection');
+        },
 
+        onApiTextDirection: function (isRtl){
+            var toolbar = this.toolbar,
+                oldRtl = toolbar.btnTextDir.options.dirRtl,
+                newRtl = !!isRtl;
+            if (oldRtl !== newRtl) {
+                toolbar.btnTextDir.changeIcon({
+                    next: newRtl ? 'btn-rtl' : 'btn-ltr',
+                    curr: oldRtl ? 'btn-rtl' : 'btn-ltr'
+                });
+                toolbar.btnMarkers.changeIcon({
+                    next: newRtl ? 'btn-setmarkers-rtl' : 'btn-setmarkers',
+                    curr: oldRtl ? 'btn-setmarkers-rtl' : 'btn-setmarkers'
+                });
+                toolbar.btnNumbers.changeIcon({
+                    next: newRtl ? 'btn-numbering-rtl' : 'btn-numbering',
+                    curr: oldRtl ? 'btn-numbering-rtl' : 'btn-numbering'
+                });
+                toolbar.btnMultilevels.changeIcon({
+                    next: newRtl ? 'btn-multilevels-rtl' : 'btn-multilevels',
+                    curr: oldRtl ? 'btn-multilevels-rtl' : 'btn-multilevels'
+                });
+                toolbar.lblIndentsLeft.setCaption(newRtl ? toolbar.textIndBefore : toolbar.textIndLeft);
+                toolbar.lblIndentsRight.setCaption(newRtl ? toolbar.textIndAfter : toolbar.textIndRight);
+                toolbar.btnTextDir.options.dirRtl = !!isRtl;
             }
         },
 
@@ -3756,6 +3795,8 @@ define([
                     me.controllers.pageLayout.onLaunch(me.toolbar)
                         .setApi(me.api)
                         .onAppReady(config);
+
+                    !config.isPDFForm && Common.UI.TooltipManager.showTip('rtlDirection');
                 } else if (config.isRestrictedEdit && config.canFillForms && config.isPDFForm) {
                     if (me.toolbar.btnHandTool) {
                         me.api.asc_setViewerTargetType('hand');
@@ -3988,13 +4029,16 @@ define([
         },
 
         onActiveTab: function(tab) {
+            this.mode && this.mode.isPDFForm && (tab === 'home') && Common.UI.TooltipManager.showTip('rtlDirection');
+            (tab !== 'home') && Common.UI.TooltipManager.closeTip('rtlDirection');
             if (tab !== 'layout')
                 Common.UI.TooltipManager.closeTip('mergeShapes');
             else if (this.toolbar && this.toolbar.btnShapesMerge && !this.toolbar.btnShapesMerge.isDisabled())
                 Common.UI.TooltipManager.showTip('mergeShapes');
         },
 
         onTabCollapse: function(tab) {
+            Common.UI.TooltipManager.closeTip('rtlDirection');
             Common.UI.TooltipManager.closeTip('mergeShapes');
         }
 

apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template

@@ -53,6 +53,10 @@
             <div class="text-only" style="padding-top: 8px;">
                 <div id="paragraphadv-checkbox-add-interval"></div>
             </div>
+            <div style="padding-top: 16px;"><label class="header padding-very-small"><%= scope.strDirection %></label></div>
+            <div>
+                <div id="paragraphadv-dir-ltr" class="margin-right-20" style="display: inline-block;"></div><div id="paragraphadv-dir-rtl" class="margin-left-20" style="display: inline-block;"></div>
+            </div>
             <div class="padding-large" style="padding-top: 16px; display: none;">
                 <div style="border: 1px solid #cbcbcb; width: 350px;">
                     <div id="paragraphadv-indent-preview" style="height: 58px; position: relative;"></div>

apps/documenteditor/main/app/template/Toolbar.template

@@ -66,6 +66,7 @@
                         <span class="btn-slot split" id="slot-btn-decoffset"></span>
                         <span class="btn-slot split" id="slot-btn-incoffset"></span>
                         <span class="btn-slot split" id="slot-btn-linespace"></span>
+                        <span class="btn-slot split" id="slot-btn-direction"></span>
                     </div>
                     <div class="elset">
                         <span class="btn-slot split" id="<% if (!isRTL) { %>slot-btn-align-left<% } else { %>slot-btn-align-right<% } %>"></span>

apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js

@@ -306,6 +306,22 @@ define([
             this.cmbOutlinelevel.setValue(-1);
             this.cmbOutlinelevel.on('selected', _.bind(this.onOutlinelevelSelect, this));
 
+            this.rbDirLtr = new Common.UI.RadioBox({
+                el: $('#paragraphadv-dir-ltr'),
+                name        : 'text-dir',
+                labelText   : this.textDirLtr,
+                value: false
+            });
+            this.rbDirLtr.on('change', _.bind(this.onTextDirChange, this));
+
+            this.rbDirRtl = new Common.UI.RadioBox({
+                el: $('#paragraphadv-dir-rtl'),
+                name        : 'text-dir',
+                labelText   : this.textDirRtl,
+                value: true
+            });
+            this.rbDirRtl.on('change', _.bind(this.onTextDirChange, this));
+
             // Line & Page Breaks
 
             this.chBreakBefore = new Common.UI.CheckBox({
@@ -716,7 +732,7 @@ define([
         getFocusedComponents: function() {
             return this.btnsCategory.concat([
                 this.cmbTextAlignment, this.cmbOutlinelevel, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
-                this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, this.chAddInterval, // 0 tab
+                this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, this.chAddInterval, this.rbDirLtr, this.rbDirRtl, // 0 tab
                 this.chBreakBefore, this.chKeepLines, this.chOrphan, this.chKeepNext, this.chLineNumbers, // 1 tab
                 this.cmbBorderSize, this.btnBorderColor]).concat(this._btnsBorderPosition).concat([this.btnBackColor,  // 2 tab
                 this.chStrike, this.chSubscript, this.chDoubleStrike, this.chSmallCaps, this.chSuperscript, this.chAllCaps, this.numSpacing, this.numPosition, // 3 tab
@@ -871,6 +887,12 @@ define([
                 this.cmbSpecial.setValue(this.CurSpecial);
                 this.numSpecialBy.setValue(this.FirstLine!== null ? Math.abs(Common.Utils.Metric.fnRecalcFromMM(this.FirstLine)) : '', true);
 
+                value = props.asc_getRtlDirection();
+                if (value !== undefined) {
+                    this.rbDirRtl.setValue(value, true);
+                    this.rbDirLtr.setValue(!value, true);
+                }
+
                 this.cmbTextAlignment.setValue((props.get_Jc() !== undefined && props.get_Jc() !== null) ? props.get_Jc() : c_paragraphTextAlignment.LEFT, true);
 
                 this.chKeepLines.setValue((props.get_KeepLines() !== null && props.get_KeepLines() !== undefined) ? props.get_KeepLines() : 'indeterminate', true);
@@ -1477,6 +1499,12 @@ define([
             }
         },
 
+        onTextDirChange: function(field, newValue, eOpts) {
+            if (newValue && this._changedProps) {
+                this._changedProps.asc_putRtlDirection(field.options.value);
+            }
+        },
+
         textTitle:      'Paragraph - Advanced Settings',
         strIndentsLeftText:     'Left',
         strIndentsRightText:    'Right',

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

@@ -552,6 +552,25 @@ define([
                     });
                     this.paragraphControls.push(this.btnLineSpace);
 
+                    this.btnTextDir = new Common.UI.Button({
+                        id: 'id-toolbar-btn-direction',
+                        cls: 'btn-toolbar',
+                        iconCls: 'toolbar__icon btn-ltr',
+                        action: 'text-direction',
+                        dirRtl: false,
+                        lock: [_set.noParagraphSelected, _set.paragraphLock, _set.headerLock, _set.richEditLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockViewPara, _set.docLockForms, _set.docLockCommentsPara, _set.fixedForm, _set.viewMode],
+                        menu: new Common.UI.Menu({
+                            items: [
+                                {caption: me.textDirLtr, value: false, iconCls: 'menu__icon btn-ltr'},
+                                {caption: me.textDirRtl, value: true, iconCls: 'menu__icon btn-rtl'},
+                            ]
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'top',
+                        dataHintOffset: '0, -6'
+                    });
+                    this.paragraphControls.push(this.btnTextDir);
+
                     this.numIndentsLeft = new Common.UI.MetricSpinner({
                         step: .1,
                         width: 70,
@@ -2096,6 +2115,7 @@ define([
                 _injectComponent('#slot-btn-incoffset', this.btnIncLeftOffset);
                 _injectComponent('#slot-btn-decoffset', this.btnDecLeftOffset);
                 _injectComponent('#slot-btn-linespace', this.btnLineSpace);
+                _injectComponent('#slot-btn-direction', this.btnTextDir);
                 _injectComponent('#slot-btn-hidenchars', this.btnShowHidenChars);
                 _injectComponent('#slot-btn-markers', this.btnMarkers);
                 _injectComponent('#slot-btn-numbering', this.btnNumbers);
@@ -2563,6 +2583,7 @@ define([
                 this.btnDecLeftOffset.updateHint(this.tipDecPrLeft + Common.Utils.String.platformKey('Ctrl+Shift+M'));
                 this.btnIncLeftOffset.updateHint(this.tipIncPrLeft + Common.Utils.String.platformKey('Ctrl+M'));
                 this.btnLineSpace.updateHint(this.tipLineSpace);
+                this.btnTextDir.updateHint(this.tipTextDir);
                 this.btnShowHidenChars.updateHint(this.tipShowHiddenChars + Common.Utils.String.platformKey('Shift+8', ' (' + Common.Utils.String.textCtrl + '+{0})'));
                 this.btnMarkers.updateHint(this.tipMarkers);
                 this.btnNumbers.updateHint(this.tipNumbers);

apps/documenteditor/main/locale/ar.json

@@ -3690,5 +3690,15 @@
   "DE.Views.WatermarkSettingsDialog.textUnderline": "تحته خط",
   "DE.Views.WatermarkSettingsDialog.tipFontName": "اسم الخط",
   "DE.Views.WatermarkSettingsDialog.tipFontSize": "حجم الخط",
-  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected."
+  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected.",
+  "DE.Controllers.Toolbar.helpRtlDir": "Toggle between right-to-left (RTL) and left-to-right (LTR) text direction in  your documents.",
+  "DE.Controllers.Toolbar.helpRtlDirHeader": "Switch text direction",
+  "DE.Views.ParagraphSettingsAdvanced.strDirection": "Direction",
+  "DE.Views.ParagraphSettingsAdvanced.textDirLtr": "Left-to-right",
+  "DE.Views.ParagraphSettingsAdvanced.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.textDirLtr": "Left-to-right",
+  "DE.Views.Toolbar.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.tipTextDir": "Text direction",
+  "DE.Views.Toolbar.textIndBefore": "Indent before",
+  "DE.Views.Toolbar.textIndAfter": "Indent after"
 }

apps/documenteditor/main/locale/az.json

@@ -3690,5 +3690,15 @@
   "DE.Views.WatermarkSettingsDialog.textUnderline": "Altından xətt çəkilmiş",
   "DE.Views.WatermarkSettingsDialog.tipFontName": "Şrift Adı",
   "DE.Views.WatermarkSettingsDialog.tipFontSize": "Şrift Ölçüsü",
-  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected."
+  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected.",
+  "DE.Controllers.Toolbar.helpRtlDir": "Toggle between right-to-left (RTL) and left-to-right (LTR) text direction in  your documents.",
+  "DE.Controllers.Toolbar.helpRtlDirHeader": "Switch text direction",
+  "DE.Views.ParagraphSettingsAdvanced.strDirection": "Direction",
+  "DE.Views.ParagraphSettingsAdvanced.textDirLtr": "Left-to-right",
+  "DE.Views.ParagraphSettingsAdvanced.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.textDirLtr": "Left-to-right",
+  "DE.Views.Toolbar.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.tipTextDir": "Text direction",
+  "DE.Views.Toolbar.textIndBefore": "Indent before",
+  "DE.Views.Toolbar.textIndAfter": "Indent after"
 }

apps/documenteditor/main/locale/be.json

@@ -3690,5 +3690,15 @@
   "DE.Views.WatermarkSettingsDialog.textUnderline": "Падкрэслены",
   "DE.Views.WatermarkSettingsDialog.tipFontName": "Назва шрыфту",
   "DE.Views.WatermarkSettingsDialog.tipFontSize": "Памер шрыфту",
-  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected."
+  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected.",
+  "DE.Controllers.Toolbar.helpRtlDir": "Toggle between right-to-left (RTL) and left-to-right (LTR) text direction in  your documents.",
+  "DE.Controllers.Toolbar.helpRtlDirHeader": "Switch text direction",
+  "DE.Views.ParagraphSettingsAdvanced.strDirection": "Direction",
+  "DE.Views.ParagraphSettingsAdvanced.textDirLtr": "Left-to-right",
+  "DE.Views.ParagraphSettingsAdvanced.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.textDirLtr": "Left-to-right",
+  "DE.Views.Toolbar.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.tipTextDir": "Text direction",
+  "DE.Views.Toolbar.textIndBefore": "Indent before",
+  "DE.Views.Toolbar.textIndAfter": "Indent after"
 }

apps/documenteditor/main/locale/bg.json

@@ -3690,5 +3690,15 @@
   "DE.Views.WatermarkSettingsDialog.textUnderline": "Underline",
   "DE.Views.WatermarkSettingsDialog.tipFontName": "Име на шрифта",
   "DE.Views.WatermarkSettingsDialog.tipFontSize": "Размер на шрифта",
-  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected."
+  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected.",
+  "DE.Controllers.Toolbar.helpRtlDir": "Toggle between right-to-left (RTL) and left-to-right (LTR) text direction in  your documents.",
+  "DE.Controllers.Toolbar.helpRtlDirHeader": "Switch text direction",
+  "DE.Views.ParagraphSettingsAdvanced.strDirection": "Direction",
+  "DE.Views.ParagraphSettingsAdvanced.textDirLtr": "Left-to-right",
+  "DE.Views.ParagraphSettingsAdvanced.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.textDirLtr": "Left-to-right",
+  "DE.Views.Toolbar.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.tipTextDir": "Text direction",
+  "DE.Views.Toolbar.textIndBefore": "Indent before",
+  "DE.Views.Toolbar.textIndAfter": "Indent after"
 }

apps/documenteditor/main/locale/ca.json

@@ -3690,5 +3690,15 @@
   "DE.Views.WatermarkSettingsDialog.textUnderline": "Subratllar",
   "DE.Views.WatermarkSettingsDialog.tipFontName": "Nom de la lletra",
   "DE.Views.WatermarkSettingsDialog.tipFontSize": "Mida de la lletra",
-  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected."
+  "DE.Controllers.Main.errorEditProtectedRange": "You are not allowed to edit this selection because it is protected.",
+  "DE.Controllers.Toolbar.helpRtlDir": "Toggle between right-to-left (RTL) and left-to-right (LTR) text direction in  your documents.",
+  "DE.Controllers.Toolbar.helpRtlDirHeader": "Switch text direction",
+  "DE.Views.ParagraphSettingsAdvanced.strDirection": "Direction",
+  "DE.Views.ParagraphSettingsAdvanced.textDirLtr": "Left-to-right",
+  "DE.Views.ParagraphSettingsAdvanced.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.textDirLtr": "Left-to-right",
+  "DE.Views.Toolbar.textDirRtl": "Right-to-left",
+  "DE.Views.Toolbar.tipTextDir": "Text direction",
+  "DE.Views.Toolbar.textIndBefore": "Indent before",
+  "DE.Views.Toolbar.textIndAfter": "Indent after"
 }