From bcaf38223f8f80d67827a6c4c9fda755a0bdd8c7 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Fri, 23 Dec 2016 16:16:53 +0300 Subject: [PATCH] [SSE mobile] add worksheet's tab context menu --- .../mobile/app/controller/Main.js | 4 + .../mobile/app/controller/Statusbar.js | 167 ++++++++++-------- .../mobile/app/view/Statusbar.js | 35 +++- .../mobile/resources/less/statusbar.less | 2 +- 4 files changed, 131 insertions(+), 77 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/app/controller/Main.js b/apps/spreadsheeteditor/mobile/app/controller/Main.js index f7c7663d4..66925c955 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/Main.js +++ b/apps/spreadsheeteditor/mobile/app/controller/Main.js @@ -586,6 +586,10 @@ define([ }); } } + + $('.view-main').on('click', function (e) { + uiApp.closeModal('.document-menu.modal-in'); + }) }, onOpenDocument: function(progress) { diff --git a/apps/spreadsheeteditor/mobile/app/controller/Statusbar.js b/apps/spreadsheeteditor/mobile/app/controller/Statusbar.js index b3ea762af..ae9d06b6e 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/Statusbar.js +++ b/apps/spreadsheeteditor/mobile/app/controller/Statusbar.js @@ -58,7 +58,8 @@ define([ this.addListeners({ 'Statusbar': { 'sheet:click': this.onTabClick, - 'sheet:addnew': this.onAddTab + 'sheet:addnew': this.onAddTab, + 'contextmenu:click': this.onTabMenu } }); }, @@ -82,12 +83,15 @@ define([ reset : function (collection, opts) { me.statusbar.clearTabs(); collection.each(function(model) { - me.statusbar.addSheet(model); + var $item = me.statusbar.addSheet(model); + model.set('el', $item); }); } }); + this.hiddensheets = this.getApplication().createCollection('Sheets'); // this.bindViewEvents(this.statusbar, this.events); + Common.NotificationCenter.on('document:ready', this.onApiSheetsChanged.bind(this)); }, @@ -129,11 +133,11 @@ define([ draglocked : locked }; - this.api.asc_isWorksheetHidden(i)? hiddentems.push(tab) : - items.push(new SSE.Models.Sheet(tab)); + (this.api.asc_isWorksheetHidden(i) ? hiddentems : items).push(new SSE.Models.Sheet(tab)); } this.sheets.reset(items); + this.hiddensheets.reset(hiddentems); return; @@ -200,27 +204,16 @@ define([ createDelayedElements: function() { this.statusbar.$el.css('z-index', ''); - this.statusbar.tabMenu.on('item:click', _.bind(this.onTabMenu, this)); this.statusbar.btnAddWorksheet.on('click', _.bind(this.onAddWorksheetClick, this)); Common.NotificationCenter.on('window:resize', _.bind(this.onWindowResize, this)); - Common.NotificationCenter.on('cells:range', _.bind(this.onRangeDialogMode, this)); + // Common.NotificationCenter.on('cells:range', _.bind(this.onRangeDialogMode, this)); }, onWindowResize: function(area) { // this.statusbar.onTabInvisible(undefined, this.statusbar.tabbar.checkInvisible(true)); }, - onTabMenu: function(obj, item, e) { - switch (item.value){ - case 'ins': - this.api.asc_insertWorksheet(this.createSheetName()); - break; - case 'del': this.deleteWorksheet(); break; - case 'copy': this.moveWorksheet(false); break; - case 'hide': this.hideWorksheet(true); break; - } - }, createSheetName: function() { var items = [], wc = this.api.asc_getWorksheetsCount(); @@ -258,18 +251,14 @@ define([ deleteWorksheet: function() { var me = this; - if (this.statusbar.tabbar.tabs.length == 1) { - Common.UI.warning({msg: this.errorLastSheet}); + if (this.sheets.length == 1) { + uiApp.alert(this.errorLastSheet); } else { - Common.UI.warning({ - msg: this.warnDeleteSheet, - buttons: ['ok','cancel'], - callback: function(btn) { - if (btn == 'ok' && !me.api.asc_deleteWorksheet()) { - _.delay(function(){ - Common.UI.error({msg: me.errorRemoveSheet}); - },10); - } + uiApp.confirm(this.warnDeleteSheet, undefined, function(){ + if ( !me.api.asc_deleteWorksheet() ) { + _.defer(function(){ + uiApp.alert(me.errorRemoveSheet); + }); } }); } @@ -277,58 +266,15 @@ define([ hideWorksheet: function(hide, index) { if ( hide ) { - this.statusbar.tabbar.tabs.length == 1 ? - Common.UI.warning({msg: this.errorLastSheet}) : + this.sheets.length == 1 ? + uiApp.alert(this.errorLastSheet) : this.api['asc_hideWorksheet'](index); } else { this.api['asc_showWorksheet'](index); - this.loadTabColor(index); + // this.loadTabColor(index); } }, - moveWorksheet: function(cut, silent, index, destPos) { - var me = this; - var wc = me.api.asc_getWorksheetsCount(), items = [], i = -1; - while (++i < wc) { - if (!this.api.asc_isWorksheetHidden(i)) { - items.push({ - value : me.api.asc_getWorksheetName(i), - inindex : i - }); - } - } - if (!_.isUndefined(silent)) { - me.api.asc_showWorksheet(items[index].inindex); - - Common.NotificationCenter.trigger('comments:updatefilter', - {property: 'uid', - value: new RegExp('^(doc_|sheet' + this.api.asc_getActiveWorksheetId() + '_)')}); - - if (!_.isUndefined(destPos)) { - me.api.asc_moveWorksheet(items.length === destPos ? wc : items[destPos].inindex); - } - - return; - } - - (new SSE.Views.Statusbar.CopyDialog({ - title : cut ? me.statusbar.itemMove : me.statusbar.itemCopy, - ismove : cut, - names : items, - handler : function(btn, i) { - if (btn == 'ok') { - if (cut) { - me.api.asc_moveWorksheet(i == -255 ? wc : i); - } else { - var new_text = me.createCopyName(me.api.asc_getWorksheetName(me.api.asc_getActiveWorksheetIndex())); - me.api.asc_copyWorksheet(i == -255 ? wc : i, new_text); - } - } - me.api.asc_enableKeyEvents(true); - } - })).show(); - }, - onAddWorksheetClick: function(o, index, opts) { if (this.api) { this.api.asc_closeCellEditor(); @@ -477,8 +423,17 @@ define([ }, onTabClick: function(index, model) { - this.api.asc_showWorksheet(model.get('index')); - this.statusbar.setActiveTab(index); + var opened = $('.document-menu.modal-in').length; + uiApp.closeModal('.document-menu.modal-in'); + + var newindex = model.get('index'); + if ( newindex == this.api.asc_getActiveWorksheetIndex () ) { + if ( !opened ) + this.statusbar.showTabContextMenu(this._getTabMenuItems(), model); + } else { + this.api.asc_showWorksheet( newindex ); + this.statusbar.setActiveTab(index); + } }, onAddTab: function () { @@ -486,6 +441,68 @@ define([ this.api.asc_addWorksheet(this.createSheetName()); }, + onTabMenu: function (view, event, model) { + var me = this; + + switch (event) { + case 'del': me.deleteWorksheet(); break; + case 'hide': me.hideWorksheet(true, model.get('index')); break; + case 'ins': me.api.asc_insertWorksheet(me.createSheetName()); break; + case 'copy': + var name = me.createCopyName(me.api.asc_getWorksheetName(me.api.asc_getActiveWorksheetIndex())); + me.api.asc_copyWorksheet(model.get('index'), name); + break; + case 'unhide': + var items = []; + _.each(this.hiddensheets.models, function (item) { + items.push({ + caption: item.get('name'), + event: 'reveal:' + item.get('index') + }) + }); + _.defer(function () { + me.statusbar.showTabContextMenu(items, model); + }); + break; + default: + var _re = /reveal\:(\d+)/.exec(event); + if ( _re && !!_re[1] ) { + me.hideWorksheet(false, parseInt(_re[1])); + } + } + + }, + + _getTabMenuItems: function() { + var items = [ + { + caption: this.menuDuplicate, + event: 'copy' + }, + { + caption: this.menuDelete, + event: 'del' + }, + { + caption: this.menuHide, + event: 'hide' + } + ]; + + if ( this.hiddensheets.length ) { + items.push({ + caption: this.menuUnhide, + event: 'unhide' + }); + } + + return items; + }, + + menuDuplicate : 'Duplicate', + menuDelete : 'Delete', + menuHide : 'Hide', + menuUnhide : 'Unhide', errorLastSheet : 'Workbook must have at least one visible worksheet.', errorRemoveSheet: 'Can\'t delete the worksheet.', warnDeleteSheet : 'The worksheet maybe has data. Proceed operation?', diff --git a/apps/spreadsheeteditor/mobile/app/view/Statusbar.js b/apps/spreadsheeteditor/mobile/app/view/Statusbar.js index 2acec28f5..621afb698 100644 --- a/apps/spreadsheeteditor/mobile/app/view/Statusbar.js +++ b/apps/spreadsheeteditor/mobile/app/view/Statusbar.js @@ -56,6 +56,10 @@ define([ '' + '', tabtemplate: _.template('
  • <%= label %>
    • '), + menutemplate: _.template( + '<% _.each(menuItems, function(item) { %>' + + '
  • <%= item.caption %>
    • ' + + '<% }); %>'), events: {}, api: undefined, @@ -109,7 +113,7 @@ define([ var index = this.$boxTabs.children().length; var $item = $(this.tabtemplate({ 'label': model.get('name') - })).appendTo(this.$boxTabs) + })).appendTo(this.$boxTabs); $item.on('click', this.onSheetClick.bind(this, index, model)); model.get('active') && $item.addClass('active'); @@ -187,6 +191,7 @@ define([ onSheetClick: function (index, model, e) { this.fireEvent('sheet:click', [index, model]); + return false; }, onSheetChanged: function(o, index, tab) { @@ -233,6 +238,34 @@ define([ this.tabbar.options.draggable = edit; this.editMode = edit; + }, + + showTabContextMenu: function (items, model) { + uiApp.closeModal('.document-menu.modal-in'); + + var popoverHTML = + '
    '+ + '
    '+ + '
    '+ + '
      '+ + this.menutemplate({menuItems: items}) + + '
    '+ + '
    '+ + '
    '+ + '
    '; + + uiApp.popover(popoverHTML, model.get('el')); + + $('.modal-overlay').removeClass('modal-overlay-visible'); + + $('.document-menu li').single('click', _.buffered(function(e) { + uiApp.closeModal('.document-menu.modal-in'); + + var $target = $(e.currentTarget), + eventName = $target.data('event'); + + this.fireEvent('contextmenu:click', [this, eventName, model]); + }, 100, this)); } }); } diff --git a/apps/spreadsheeteditor/mobile/resources/less/statusbar.less b/apps/spreadsheeteditor/mobile/resources/less/statusbar.less index c6391a5cc..9e1d8cd6b 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/statusbar.less +++ b/apps/spreadsheeteditor/mobile/resources/less/statusbar.less @@ -43,7 +43,7 @@ > li { list-style: none; - display: inline; + display: inline-block; &:not(.active) { a {