[sse mobile] Add text orientation into edit cell

apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js

@@ -132,6 +132,8 @@ define([
                     me.initBorderColorPage();
                 } else if ('#edit-text-format' == pageId) {
                     me.initTextFormat();
+                } else if ('#edit-text-orientation' == pageId) {
+                    me.initTextOrientation();
                 } else if ('#edit-border-style' == pageId) {
                     me.initBorderStyle();
                 } else if (!_.isUndefined(pageId) && pageId.indexOf('#edit-cell-format') > -1) {
@@ -339,6 +341,8 @@ define([
                     return;
                 }
 
+                me.initTextOrientation();
+
                 me.initTextFormat();
             },
 
@@ -504,6 +508,49 @@ define([
                 return clr;
             },
 
+            initTextOrientation: function() {
+                if (_.isUndefined(this._cellInfo)) return;
+
+                var me = this,
+                    $pageTextOrientation = $('.page[data-page=edit-text-orientation]'),
+                    orientationStr = 'horizontal',
+                    xfs = this._cellInfo.asc_getXfs();
+
+                var textAngle = xfs.asc_getAngle();
+
+                switch(textAngle) {
+                    case 45:    orientationStr = 'anglecount'; break;
+                    case -45:   orientationStr = 'angleclock'; break;
+                    case 255:   orientationStr = 'vertical'; break;
+                    case 90:    orientationStr = 'rotateup'; break;
+                    case -90:   orientationStr = 'rotatedown'; break;
+                    case 0:     orientationStr = 'horizontal'; break;
+                }
+
+                $('#text-orientation .item-media i').removeClass().addClass(Common.Utils.String.format('icon icon-text-orientation-{0}', orientationStr));
+
+                if ($pageTextOrientation.length > 0) {
+                    var $radioOrientation = $pageTextOrientation.find('input:radio[name=text-orientation]');
+                    $radioOrientation.val([orientationStr]);
+                    $radioOrientation.single('change', _.bind(me.onTextOrientationChange, me));
+                }
+            },
+
+            onTextOrientationChange: function(e) {
+                var $target = $(e.currentTarget),
+                    value = $target.prop('value');
+                var angle = 0;
+                switch (value) {
+                    case 'anglecount':  angle =  45;    break;
+                    case 'angleclock':  angle = -45;    break;
+                    case 'vertical':    angle =  255;   break;
+                    case 'rotateup':    angle =  90;    break;
+                    case 'rotatedown':  angle = -90;    break;
+                }
+                if (this.api)
+                    this.api.asc_setCellAngle(angle);
+            },
+
             textFonts: 'Fonts',
             textAuto: 'Auto',
             textPt: 'pt'

apps/spreadsheeteditor/mobile/app/template/EditCell.template

@@ -55,6 +55,16 @@
                     </div>
                 </a>
             </li>
+            <li>
+                <a id="text-orientation" class="item-link" data-page="#edit-text-orientation">
+                    <div class="item-content">
+                        <% if (!android) { %><div class="item-media"><i class="icon icon-text-orientation"></i></div><% } %>
+                        <div class="item-inner">
+                            <div class="item-title"><%= scope.textTextOrientation %></div>
+                        </div>
+                    </div>
+                </a>
+            </li>
             <li>
                 <a id="border-style" class="item-link" data-page="#edit-border-style">
                     <div class="item-content">
@@ -303,6 +313,103 @@
     </div>
 </div>
 
+<!-- Text Orientation view -->
+<div id="edit-text-orientation">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
+            <div class="center sliding"><%= scope.textTextOrientation %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="edit-text-orientation">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-orientation" value="horizontal">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-text-orientation-horizontal"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textHorizontalText %></div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-orientation" value="anglecount">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-text-orientation-anglecount"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textAngleCounterclockwise %></div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-orientation" value="angleclock">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-text-orientation-angleclock"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textAngleClockwise %></div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-orientation" value="vertical">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-text-orientation-vertical"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textVerticalText %></div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-orientation" value="rotateup">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-text-orientation-rotateup"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textRotateTextUp %></div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="text-orientation" value="rotatedown">
+                            <% if (android) { %>
+                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
+                            <% } else { %>
+                            <div class="item-media"><i class="icon icon-text-orientation-rotatedown"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textRotateTextDown %></div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Border Styles view -->
 <div id="edit-border-style">
     <div class="navbar">

apps/spreadsheeteditor/mobile/app/view/edit/EditCell.js

@@ -166,6 +166,7 @@ define([
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-border-style]', '.page[data-page=edit-border-style] .page-content');
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-cell-format]', '.page[data-page=edit-cell-format] .page-content');
                 Common.Utils.addScrollIfNeed('.page[data-page=edit-text-format]', '.page[data-page=edit-text-format] .page-content');
+                Common.Utils.addScrollIfNeed('.page[data-page=edit-text-orientation]', '.page[data-page=edit-text-orientation] .page-content');
 
                 $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
             },
@@ -422,7 +423,14 @@ define([
             textCharacterItalic: 'I',
             textCharacterUnderline: 'U',
             textAddCustomColor: 'Add Custom Color',
-            textCustomColor: 'Custom Color'
+            textCustomColor: 'Custom Color',
+            textTextOrientation: 'Text Orientation',
+            textHorizontalText: 'Horizontal Text',
+            textAngleCounterclockwise: 'Angle Counterclockwise',
+            textAngleClockwise: 'Angle Clockwise',
+            textVerticalText: 'Vertical Text',
+            textRotateTextUp: 'Rotate Text Up',
+            textRotateTextDown: 'Rotate Text Down'
     }
     })(), SSE.Views.EditCell || {}))
 });

apps/spreadsheeteditor/mobile/locale/en.json

@@ -428,6 +428,13 @@
   "SSE.Views.EditCell.textTopBorder": "Top Border",
   "SSE.Views.EditCell.textWrapText": "Wrap Text",
   "SSE.Views.EditCell.textYen": "Yen",
+  "SSE.Views.EditCell.textTextOrientation": "Text Orientation",
+  "SSE.Views.EditCell.textHorizontalText": "Horizontal Text",
+  "SSE.Views.EditCell.textAngleCounterclockwise": "Angle Counterclockwise",
+  "SSE.Views.EditCell.textAngleClockwise": "Angle Clockwise",
+  "SSE.Views.EditCell.textVerticalText": "Vertical Text",
+  "SSE.Views.EditCell.textRotateTextUp": "Rotate Text Up",
+  "SSE.Views.EditCell.textRotateTextDown": "Rotate Text Down",
   "SSE.Views.EditChart.textAddCustomColor": "Add Custom Color",
   "SSE.Views.EditChart.textAuto": "Auto",
   "SSE.Views.EditChart.textAxisCrosses": "Axis Crosses",