[SSE] Move sheet: drag and drop
This commit is contained in:
Julia Svinareva
parent
8cefc20a94
commit
b1a6e69991
|
|
@ -53,7 +53,7 @@ define([
|
|||
this.cls = '';
|
||||
this.index = -1;
|
||||
this.template = _.template(['<li class="<% if(active){ %>active selected<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">',
|
||||
'<a title="<%= label %>" draggable="true" oo_editor_input="true" tabindex="-1" data-index="<%= index %>"><%- 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);
|
||||
|
|
@ -125,7 +125,7 @@ define([
|
|||
},
|
||||
|
||||
setCaption: function(text) {
|
||||
this.$el.find('> a').text(text);
|
||||
this.$el.find('> span').text(text);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -233,15 +233,18 @@ define([
|
|||
this.trigger('tab:contextmenu', this, this.tabs.indexOf(tab), tab, this.selectTabs);
|
||||
}, this.bar),
|
||||
mousedown: $.proxy(function (e) {
|
||||
if ((3 !== e.which) && !e.ctrlKey && !e.metaKey && !e.shiftKey)
|
||||
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;
|
||||
}
|
||||
});
|
||||
this.bar.$el.find('ul > li > span').attr('draggable', !lockDrag);
|
||||
tab.changeState();
|
||||
/*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);
|
||||
}
|
||||
}*/
|
||||
} else {
|
||||
this.bar.$el.find('ul > li > span').attr('draggable', 'false');
|
||||
}
|
||||
this.bar.trigger('tab:drag', this.bar.selectTabs);
|
||||
}, this)
|
||||
});
|
||||
|
|
@ -263,6 +266,7 @@ define([
|
|||
event.preventDefault(); // Necessary. Allows us to drop.
|
||||
}
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
this.bar.$el.find('.mousemove').removeClass('mousemove right');
|
||||
$(e.currentTarget).parent().addClass('mousemove');
|
||||
return false;
|
||||
}, this),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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', '');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -202,13 +202,27 @@ define([
|
|||
|
||||
}, this),
|
||||
'tab:dragstart' : _.bind(function (dataTransfer, selectTabs) {
|
||||
var tabs = selectTabs,
|
||||
arrTabs = [],
|
||||
var arrTabs = [],
|
||||
arrName = [],
|
||||
me = this;
|
||||
tabs.forEach(function (item) {
|
||||
arrTabs.push(item.sheetindex);
|
||||
arrName.push(me.api.asc_getWorksheetName(item.sheetindex));
|
||||
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,
|
||||
stringSheetJson,
|
||||
|
|
@ -231,7 +245,30 @@ define([
|
|||
if (Common.Utils.InternalSettings.get("sse-doc-info-key") === key) {
|
||||
this.api.asc_moveWorksheet(index, arrIndex);
|
||||
} else {
|
||||
this.api.asc_EndMoveSheet(index, arrNames, arrSheets);
|
||||
var names = [], wc = this.api.asc_getWorksheetsCount();
|
||||
while (wc--) {
|
||||
names.push(this.api.asc_getWorksheetName(wc).toLowerCase());
|
||||
}
|
||||
var newNames = [];
|
||||
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, arrSheets);
|
||||
}
|
||||
}, this)
|
||||
});
|
||||
|
|
@ -391,6 +428,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]);
|
||||
|
|
|
|||
|
|
@ -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,24 +224,28 @@
|
|||
&.disabled {
|
||||
opacity: 0.5;
|
||||
|
||||
> a {
|
||||
> span {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
> a {
|
||||
> span {
|
||||
color: @gray-darker;
|
||||
}
|
||||
}
|
||||
|
||||
&.mousemove {
|
||||
> a {
|
||||
background: linear-gradient(to right, #49795d, @gray-light 3px);
|
||||
> span {
|
||||
border-left: 3px solid #49795d;
|
||||
padding-left: 8px;
|
||||
}
|
||||
&.right {
|
||||
> a {
|
||||
background: linear-gradient(to left, #49795d, @gray-light 3px);
|
||||
> span {
|
||||
border-left: 1px solid @gray-dark;
|
||||
border-right: 3px solid #49795d;
|
||||
padding-right: 8px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
li {
|
||||
text-align: center;
|
||||
|
||||
> a {
|
||||
> span {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue