Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge branch 'feature/sse-move-sheet' into develop

Browse source
This commit is contained in:
Julia Svinareva 2020-03-05 15:42:45 +03:00
parent 8d852e957a 28a376f874
commit 7b9460a5f1
8 changed files with 218 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/common/main/lib/component/Tab.js
View file

@ -51,8 +51,9 @@ define([
this.active = false;
this.label = 'Tab';
this.cls = '';
this.index = -1;
this.template = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
'<a title="<%= label %>"><%- label %></a>',
'<span title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- label %></span>',
'</li>'].join(''));
this.initialize.call(this, opts);
@ -124,7 +125,7 @@ define([
},
setCaption: function(text) {
this.$el.find('> a').text(text);
this.$el.find('> span').text(text);
}
});

94
apps/common/main/lib/component/TabBar.js
View file

@ -144,6 +144,7 @@ define([
}
me.drag = undefined;
me.bar.trigger('tab:drop', this);
}
}
function dragMove (event) {
@ -187,6 +188,7 @@ define([
$(document).off('mouseup.tabbar');
$(document).off('mousemove.tabbar', dragMove);
});
this.bar.trigger('tab:drag', this.bar.selectTabs);
}
}
}
@ -231,14 +233,66 @@ define([
this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs);
}, this.bar),
mousedown: $.proxy(function (e) {
if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) {
if (!tab.isLockTheDrag) {
if (!e.ctrlKey && !e.metaKey && !e.shiftKey) {
tab.changeState();
dragHelper.setHookTabs(e, this.bar, this.bar.selectTabs);
if ((3 !== e.which) && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
var lockDrag = tab.isLockTheDrag;
this.bar.selectTabs.forEach(function (item) {
if (item.isLockTheDrag) {
lockDrag = true;
}
});
if (this.bar.selectTabs.length === this.bar.tabs.length || this.bar.tabs.length === 1) {
lockDrag = true;
}
this.bar.$el.find('ul > li > span').attr('draggable', !lockDrag);
tab.changeState();
} else {
this.bar.$el.find('ul > li > span').attr('draggable', 'false');
}
this.bar.trigger('tab:drag', this.bar.selectTabs);
}, this)
});
tab.$el.children().on(
{dragstart: $.proxy(function (e) {
var event = e.originalEvent,
img = document.createElement('div');
event.dataTransfer.setDragImage(img, 0, 0);
event.dataTransfer.effectAllowed = 'move';
this.bar.trigger('tab:dragstart', event.dataTransfer, this.bar.selectTabs);
}, this),
dragenter: $.proxy(function (e) {
this.bar.$el.find('.mousemove').removeClass('mousemove right');
$(e.currentTarget).parent().addClass('mousemove');
var event = e.originalEvent;
var data = event.dataTransfer.getData("onlyoffice");
event.dataTransfer.dropEffect = data ? 'move' : 'none';
}, this),
dragover: $.proxy(function (e) {
var event = e.originalEvent;
if (event.preventDefault) {
event.preventDefault(); // Necessary. Allows us to drop.
}
this.bar.$el.find('.mousemove').removeClass('mousemove right');
$(e.currentTarget).parent().addClass('mousemove');
return false;
}, this),
dragleave: $.proxy(function (e) {
$(e.currentTarget).parent().removeClass('mousemove right');
}, this),
dragend: $.proxy(function (e) {
var event = e.originalEvent;
if (event.dataTransfer.dropEffect === 'move') {
this.bar.trigger('tab:dragend', true);
} else {
this.bar.trigger('tab:dragend', false);
}
this.bar.$el.find('.mousemove').removeClass('mousemove right');
}, this),
drop: $.proxy(function (e) {
var event = e.originalEvent,
index = $(event.currentTarget).data('index');
this.bar.$el.find('.mousemove').removeClass('mousemove right');
this.bar.trigger('tab:drop', event.dataTransfer, index);
this.bar.isDrop = true;
}, this)
});
};
@ -255,7 +309,7 @@ define([
},
tabs: [],
template: _.template('<ul class="nav nav-tabs <%= placement %>" />'),
template: _.template('<ul id="statusbar_bottom" class="nav nav-tabs <%= placement %>"/>'),
selectTabs: [],
initialize : function (options) {
@ -275,6 +329,34 @@ define([
var eventname=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
addEvent(this.$bar[0], eventname, _.bind(this._onMouseWheel,this));
addEvent(this.$bar[0], 'dragstart', _.bind(function (event) {
event.dataTransfer.effectAllowed = 'move';
}, this));
addEvent(this.$bar[0], 'dragenter', _.bind(function (event) {
var data = event.dataTransfer.getData("onlyoffice");
event.dataTransfer.dropEffect = data ? 'move' : 'none';
}, this));
addEvent(this.$bar[0], 'dragover', _.bind(function (event) {
if (event.preventDefault) {
event.preventDefault(); // Necessary. Allows us to drop.
}
event.dataTransfer.dropEffect = 'move';
this.tabs[this.tabs.length - 1].$el.addClass('mousemove right');
return false;
}, this));
addEvent(this.$bar[0], 'dragleave', _.bind(function (event) {
event.dataTransfer.dropEffect = 'none';
this.tabs[this.tabs.length - 1].$el.removeClass('mousemove right');
}, this));
addEvent(this.$bar[0], 'drop', _.bind(function (event) {
var index = this.tabs.length;
this.$el.find('.mousemove').removeClass('mousemove right');
if (this.isDrop === undefined) {
this.trigger('tab:drop', event.dataTransfer, index);
} else {
this.isDrop = undefined;
}
}, this));
this.manager = new StateManager({bar: this});

8
apps/common/main/resources/less/tabbar.less
View file

@ -4,10 +4,10 @@
> li {
float: none;
display: inline;
display: inline-block;
&.active {
> a, > a:hover, > a:focus {
> span, > span:hover, > span:focus {
background-color: #fff;
color: #000;
border-color: #fff;
@ -19,7 +19,7 @@
transition: left .2s;
}
> a {
> span {
display: inline;
background-color: #7a7a7a;
color: #fff;
@ -50,7 +50,7 @@
> li {
vertical-align: middle;
> a {
> span {
padding-bottom: 1px;
border-radius: 0 0 4px 4px;
}

7
apps/spreadsheeteditor/main/app/controller/DocumentHolder.js
View file

@ -162,7 +162,8 @@ define([
},
'cells:range': function(status){
me.onCellsRange(status);
}
},
'tabs:dragend': _.bind(me.onDragEndMouseUp, me)
});
Common.Gateway.on('processmouse', _.bind(me.onProcessMouse, me));
@ -1526,6 +1527,10 @@ define([
(data.type == 'mouseup') && (this.mouse.isLeftButtonDown = false);
},
onDragEndMouseUp: function() {
this.mouse.isLeftButtonDown = false;
},
onDocumentMouseMove: function(e) {
if (e.target.localName !== 'canvas') {
this.hideHyperlinkTip();

4
apps/spreadsheeteditor/main/app/controller/Main.js
View file

@ -242,7 +242,7 @@ define([
}
}).on('dragover', function(e) {
var event = e.originalEvent;
if (event.target && $(event.target).closest('#editor_sdk').length<1 ) {
if (event.target && $(event.target).closest('#editor_sdk').length<1 && !($(event.target).is('#statusbar_bottom') || $.contains($('#statusbar_bottom'), $(event.target))) ) {
event.preventDefault();
event.dataTransfer.dropEffect ="none";
return false;
@ -415,6 +415,8 @@ define([
docInfo.put_Permissions(_permissions);
this.headerView && this.headerView.setDocumentCaption(data.doc.title);
Common.Utils.InternalSettings.set("sse-doc-info-key", data.doc.key);
}
this.api.asc_registerCallback('asc_onGetEditorPermissions', _.bind(this.onEditorPermissions, this));

8
apps/spreadsheeteditor/main/app/controller/Statusbar.js
View file

@ -159,6 +159,7 @@ define([
// else item.reorderable = !this.api.asc_isWorksheetLockedOrDeleted(item.sheetindex);
} else {
item.disable(locked);
item.$el.children(':first-child').attr('draggable', locked?'false':'true');
}
}
},
@ -170,6 +171,7 @@ define([
if (index == tab.sheetindex) {
tab[locked?'addClass':'removeClass']('coauth-locked');
tab.isLockTheDrag = locked || (this.statusbar.rangeSelectionMode==Asc.c_oAscSelectionDialogType.FormatTable);
tab.$el.children(':first-child').attr('draggable', tab.isLockTheDrag?'false':'true');
break;
}
}
@ -550,7 +552,7 @@ define([
if ('transparent' === color) {
this.api.asc_setWorksheetTabColor(null, arrIndex);
selectTabs.forEach(function (tab) {
tab.$el.find('a').css('box-shadow', '');
tab.$el.find('span').css('box-shadow', '');
});
} else {
var asc_clr = Common.Utils.ThemeColor.getRgbColor(color);
@ -681,9 +683,9 @@ define([
color = '0px 4px 0 ' + color + ' inset';
}
tab.$el.find('a').css('box-shadow', color);
tab.$el.find('span').css('box-shadow', color);
} else {
tab.$el.find('a').css('box-shadow', '');
tab.$el.find('span').css('box-shadow', '');
}
}
},

88
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -200,6 +200,92 @@ define([
me.fireEvent('sheet:move', [undefined, false, true, tabIndex, index]);
}
}, this),
'tab:dragstart': _.bind(function (dataTransfer, selectTabs) {
this.api.asc_closeCellEditor();
var arrTabs = [],
arrName = [],
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
});
}
}
var arrSelectIndex = [];
selectTabs.forEach(function (item) {
arrSelectIndex.push(item.sheetindex);
});
items.forEach(function (item) {
if (arrSelectIndex.indexOf(item.inindex) !== -1) {
arrTabs.push(item.inindex);
arrName.push(item.value);
}
});
var stringSheet, arr = [];
stringSheet = this.api.asc_StartMoveSheet(_.clone(arrTabs));
arr.push({type: 'onlyoffice', value: stringSheet});
arr.push({type: 'indexes', value: arrTabs});
arr.push({type: 'names', value: arrName});
arr.push({type: 'key', value: Common.Utils.InternalSettings.get("sse-doc-info-key")});
var json = JSON.stringify(arr);
dataTransfer.setData("onlyoffice", json);
this.dropTabs = selectTabs;
}, this),
'tab:drop': _.bind(function (dataTransfer, index) {
var data = dataTransfer.getData("onlyoffice");
if (data) {
var arrData = JSON.parse(data);
if (arrData) {
var key = _.findWhere(arrData, {type: 'key'}).value;
if (Common.Utils.InternalSettings.get("sse-doc-info-key") === key) {
this.api.asc_moveWorksheet(index, _.findWhere(arrData, {type: 'indexes'}).value);
Common.NotificationCenter.trigger('tabs:dragend', this);
} else {
var names = [], wc = this.api.asc_getWorksheetsCount();
while (wc--) {
names.push(this.api.asc_getWorksheetName(wc).toLowerCase());
}
var newNames = [];
var arrNames = _.findWhere(arrData, {type: 'names'}).value;
arrNames.forEach(function (name) {
var ind = 0,
name = name;
var first = name;
if (names.indexOf(name.toLowerCase()) !== -1) {
while (true) {
if (names.indexOf(name.toLowerCase()) === -1) {
newNames.push(name);
break;
} else {
ind++;
name = first + '(' + ind + ')';
}
}
} else {
newNames.push(name);
}
});
this.api.asc_EndMoveSheet(index, newNames, _.findWhere(arrData, {type: 'onlyoffice'}).value);
}
}
}
}, this),
'tab:dragend': _.bind(function (cut) {
if (cut) {
if (this.dropTabs.length > 0) {
var arr = [];
this.dropTabs.forEach(function (tab) {
arr.push(tab.sheetindex);
});
me.api.asc_deleteWorksheet(arr);
}
}
this.dropTabs = undefined;
Common.NotificationCenter.trigger('tabs:dragend', this);
}, this)
});
@ -326,6 +412,7 @@ define([
locked = me.api.asc_isWorksheetLockedOrDeleted(i);
tab = {
sheetindex : i,
index : items.length,
active : sindex == i,
label : me.api.asc_getWorksheetName(i),
// reorderable : !locked,
@ -357,6 +444,7 @@ define([
this.tabbar.setTabVisible(sindex);
this.btnAddWorksheet.setDisabled(me.mode.isDisconnected || me.api.asc_isWorkbookLocked() || me.api.isCellEdited);
$('#status-addtabs-box').css('border-right', 'none');
$('#status-label-zoom').text(Common.Utils.String.format(this.zoomText, Math.floor((this.api.asc_getZoom() +.005)*100)));
me.fireEvent('sheet:changed', [me, sindex]);

51
apps/spreadsheeteditor/main/resources/less/statusbar.less
View file

@ -159,11 +159,7 @@
> li {
background-color: @gray-light;
&:first-child > a {
border-left: 0 none;
}
> a {
> span {
display: inline-block;
.border-radius(0);
padding: 0 10px 0;
@ -171,9 +167,9 @@
margin-right: -1px;
background-color: @gray-light;
outline: none;
border-left-color: @gray-dark;
border-right-color: @gray-dark;
border-top-color: @gray-dark;
border-left: 1px solid @gray-dark;
border-right: 1px solid @gray-dark;
border-top: 1px solid @gray-dark;
&:hover {
border-top-color: @gray-dark;
@ -183,7 +179,7 @@
}
&.active {
> a {
> span {
border-bottom-color: @body-bg;
background-color: @body-bg;
outline: none;
@ -195,7 +191,7 @@
}
&.selected {
> a {
> span {
border-bottom-color: @body-bg;
background-color: @body-bg;
box-shadow: 0px 4px 0 #49795d inset;
@ -205,14 +201,14 @@
&.coauth-locked {
vertical-align: top;
&.active {
> a {
> span {
border-top-width: 1px;
}
}
> a {
> span {
outline: none;
}
> a:after {
> span:after {
position: absolute;
content: '';
width: 7px;
@ -228,34 +224,29 @@
&.disabled {
opacity: 0.5;
> a {
> span {
cursor: default;
}
}
&:not(.active) {
> a {
> span {
color: @gray-darker;
}
}
&.mousemove {
> a {
background: linear-gradient(to right, @gray-deep 0px, @gray-deep 2px, @gray-light 2px);
> span {
border-left: 3px solid #49795d;
padding-left: 8px;
}
&.right {
> a {
background: linear-gradient(to left, @gray-deep 0px, @gray-deep 2px, @gray-light 2px);
}
}
&.selected {
> a {
background: linear-gradient(to right, @gray-deep 0px, @gray-deep 2px, #FFFFFF 2px);
}
&.right {
> a {
background: linear-gradient(to left, @gray-deep 0px, @gray-deep 2px, #FFFFFF 2px);
}
> span {
border-left: 1px solid @gray-dark;
border-right: 3px solid #49795d;
padding-right: 8px;
padding-left: 10px;
}
}
}
@ -313,7 +304,7 @@
li {
text-align: center;
> a {
> span {
padding-left: 15px;
padding-right: 15px;
}