[SSE mobile] implemented sheet tabs scrolling

apps/spreadsheeteditor/mobile/app/view/Statusbar.js

@@ -43,10 +43,123 @@ define([
     'underscore'
     , 'common/mobile/utils/utils'
 ],
-    function(template){
+    function(core){
         'use strict';
 
-        SSE.Views.Statusbar = Backbone.View.extend({
+        SSE.Views.Statusbar = Backbone.View.extend((function(){
+            function tabVisible(t) {
+                var leftbound = arguments[1] || this.$boxTabs.offset().left,
+                    rightbound = arguments[2] || (leftbound + this.$boxTabs.width()),
+                    tab;
+
+                if ( typeof t == 'number' ) {
+                    if ( !(t < 0) && t < this.$boxTabs.children().length ) {
+                        tab = this.$boxTabs.children().eq(t);
+                    }
+                } else {
+                    tab = t.get('el');
+                }
+
+                if ( tab ) {
+                    var rect = tab.get(0).getBoundingClientRect();
+                    return !(rect.left < leftbound) && !(rect.right > rightbound);
+                }
+
+                return false;
+            }
+
+            function setTabVisible(tab) {
+                var _sheets = SSE.getCollection('Sheets');
+
+                if ( typeof tab == 'object' ) {
+                     if ( tab == _sheets.first() ) tab = 'first'; else
+                     if ( tab == _sheets.last() ) tab = 'last';
+                } else
+                if ( typeof tab == 'number' ) {
+                    if ( !(tab > 0) ) tab = 'first'; else
+                    if ( !(tab + 1 < _sheets.size()) ) tab = 'last';
+                    else tab = _sheets.at(tab);
+                }
+
+                if (tab <= 0 || tab == 'first') {
+                    this.$boxTabs.scrollLeft(0);
+                } else
+                if ( tab == 'last' || tab >= (_sheets.size() - 1) ) {
+                    this.$boxTabs.scrollLeft(10000);
+                } else {
+                    var $el = tab.get('el');
+                    if ( $el ) {
+                        var rightbound = this.$boxTabs.width();
+                        var left = tab.position().left,
+                            right = left + parseInt(tab.css('width'));
+
+                        if (left < 0) {
+                            this.$boxTabs.scrollLeft(/*this.$boxTabs.scrollLeft() + */left - 26);
+                        } else if (right > rightbound) {
+                            this.$boxTabs.scrollLeft(/*this.$boxTabs.scrollLeft() + */(right - rightbound) + 20);
+                        }
+                    }
+                }
+            }
+
+            function hasInvisible() {
+                var _sheets = SSE.getCollection('Sheets');
+
+                var _left_bound_ = this.$boxTabs.offset().left,
+                    _right_bound_ = _left_bound_ + this.$boxTabs.width();
+
+                var tab = _sheets.first().get('el');
+                var rect = tab.get(0).getBoundingClientRect();
+
+                if ( !(rect.left < _left_bound_) ) {
+                    tab = _sheets.last().get('el');
+                    rect = tab.get(0).getBoundingClientRect();
+
+                    if ( !(rect.right > _right_bound_) )
+                        return false;
+                }
+
+                return true;
+            }
+
+            var touch = {};
+            function onTouchStart(e) {
+                if ( hasInvisible.call(this) )
+                {
+                    var touches = e.originalEvent.changedTouches;
+                    touch.startx = touches[0].clientX;
+                    touch.scrollx = this.$boxTabs.scrollLeft();
+
+                    touch.timer = setTimeout(function () {
+                        // touch.longtouch = true;
+                    }, 500);
+                    e.preventDefault();
+                }
+            }
+
+            function onTouchMove(e) {
+                if ( touch.startx !== undefined ) {
+                    var touches = e.originalEvent.changedTouches;
+
+                    if ( touch.longtouch ) {}
+                    else {
+                        if ( touch.timer ) clearTimeout(touch.timer), delete touch.timer;
+                        this.$boxTabs.scrollLeft(touch.scrollx + (touch.startx - touches[0].clientX));
+                    }
+
+                    e.preventDefault();
+                }
+            }
+
+            function onTouchEnd(e) {
+                if ( touch.startx !== undefined ) {
+                    touch.longtouch = false;
+                    delete touch.startx;
+                    e.preventDefault();
+                }
+            }
+
+            return {
                 el: '.pages > .page',
                 template: '<div class="statusbar">' +
                                 '<div id="box-addtab" class="status-group">' +
@@ -81,6 +194,12 @@ define([
                         me.fireEvent('sheet:addnew');
                     }, 300));
 
+                    me.$boxTabs.on({
+                        'touchstart': onTouchStart.bind(this),
+                        'touchmove': onTouchMove.bind(this),
+                        'touchend': onTouchEnd
+                    });
+
                     // me.editMode = false;
                     return me;
                 },
@@ -107,15 +226,22 @@ define([
 
                     $item.on('click', this.onSheetClick.bind(this, index, model));
                     model.get('active') && $item.addClass('active');
+                    model.set('el', $item, {silent:true});
+
                     return $item;
                 },
 
                 addSheets: function (collection) {
-                var me = this;
+                    var active;
                     collection.each(function(model) {
-                    var $item = me.addSheet(model);
-                    model.set('el', $item, {silent:true});
-                });
+                        this.addSheet(model);
+
+                        if ( model.get('active') )
+                            active = model;
+                    }, this);
+
+                    if ( active && !tabVisible.call(this, active) )
+                        setTabVisible.call(this, active);
                 },
 
                 clearTabs: function () {
@@ -126,6 +252,9 @@ define([
                 setActiveTab: function (index) {
                     this.$boxTabs.children().removeClass('active')
                             .eq(index).addClass('active');
+
+                    if ( !tabVisible.call(this, index) )
+                        setTabVisible.call(this, index);
                 },
 
                 onSheetClick: function (index, model, e) {
@@ -133,24 +262,24 @@ define([
                     return false;
                 },
 
-            onSheetChanged: function(o, index, tab) {
-                this.api.asc_showWorksheet(tab.sheetindex);
-
-                if (this.hasTabInvisible && !this.tabbar.isTabVisible(index)) {
-                    this.tabbar.setTabVisible(index);
-                }
-
-                this.fireEvent('sheet:changed', [this, tab.sheetindex]);
-                this.fireEvent('sheet:updateColors', [true]);
-
-                Common.NotificationCenter.trigger('comments:updatefilter',
-                    {
-                        property: 'uid',
-                        value: new RegExp('^(doc_|sheet' + this.api.asc_getActiveWorksheetId() + '_)')
-                    },
-                    false //  hide popover
-                );
-            },
+                // onSheetChanged: function(o, index, tab) {
+                //     this.api.asc_showWorksheet(tab.sheetindex);
+                //
+                //     if (this.hasTabInvisible && !this.tabbar.isTabVisible(index)) {
+                //         this.tabbar.setTabVisible(index);
+                //     }
+                //
+                //     this.fireEvent('sheet:changed', [this, tab.sheetindex]);
+                //     this.fireEvent('sheet:updateColors', [true]);
+                //
+                //     Common.NotificationCenter.trigger('comments:updatefilter',
+                //         {
+                //             property: 'uid',
+                //             value: new RegExp('^(doc_|sheet' + this.api.asc_getActiveWorksheetId() + '_)')
+                //         },
+                //         false //  hide popover
+                //     );
+                // },
 
                 changeViewMode: function (edit) {
                     if (edit) {
@@ -194,6 +323,7 @@ define([
                         this.fireEvent('contextmenu:click', [this, eventName, model]);
                     }, 100, this));
                 }
-        });
+            }
+        })())
     }
 );
\ No newline at end of file

apps/spreadsheeteditor/mobile/resources/less/statusbar.less

@@ -15,11 +15,12 @@
   .hairline(top, @statusBarBorderColor);
   height: @statusBarHeight;
   min-height: @statusBarHeight;
-  display: flex;
-  flex-direction: row;
 
   .box-tabs {
-    flex-grow: 1;
+  }
+
+  #box-addtab {
+    float: left;
   }
 
   .button {
@@ -47,6 +48,7 @@
     margin: 0;
     padding: 0;
     white-space: nowrap;
+    overflow: hidden;
 
     > li {
       list-style: none;