Commit 25dd0b75 authored by Robin Tissot's avatar Robin Tissot
Browse files

Add sort and some fixes.

parent 4b8792f0
......@@ -16,25 +16,38 @@ var DiploPanel = BasePanel.extend({
}.bind(this), 10000);
},
mounted() {
/* Vue.nextTick(function() {
* var vm = this ;
* var el = document.getElementById('list');
* sortable = Sortable.create(el, {
* group: 'shared',
* multiDrag: true,
* multiDragKey : 'CTRL',
* selectedClass: "selected",
* animation: 150,
* onEnd: function(evt) {
* vm.onDragginEnd(evt);
* }
* });
* }.bind(this));
*/
Vue.nextTick(function() {
var vm = this ;
vm.sortable = Sortable.create(this.editor, {
disabled: true,
multiDrag: true,
multiDragKey : 'CTRL',
selectedClass: "selected",
animation: 150,
onEnd: function(evt) {
vm.onDragginEnd(evt);
}
});
}.bind(this));
this.editor = this.$el.querySelector('#diplomatic-lines');
this.sortModeBtn = this.$el.querySelector('#sortMode');
this.saveNotif = this.$el.querySelector('.tools #save-notif');
},
methods: {
toggleSort() {
if (this.editor.contentEditable === 'true') {
this.editor.contentEditable = 'false';
this.sortable.option('disabled', false);
this.sortModeBtn.classList.remove('btn-info');
this.sortModeBtn.classList.add('btn-success');
} else {
this.editor.contentEditable = 'true';
this.sortable.option('disabled', true);
this.sortModeBtn.classList.remove('btn-success');
this.sortModeBtn.classList.add('btn-info');
}
},
changed() {
this.saveNotif.classList.remove('hide');
this.debouncedSave();
......@@ -89,20 +102,19 @@ var DiploPanel = BasePanel.extend({
Finish dragging lines, save new positions
*/
if(ev.newIndicies.length == 0 && ev.newIndex != ev.oldIndex){
let pk = ev.item.querySelector('.line-content').id;
let elt = {"pk":pk, "index":ev.newIndex};
this.movedLines.push(elt);
}
else {
this.movedLines.push({
"pk": this.$children[ev.oldIndex].line.pk,
"index": ev.newIndex
});
} else {
for(let i=0; i< ev.newIndicies.length; i++){
let line = ev.newIndicies[i];
let pk = line.multiDragElement.querySelector('.line-content').id;
let index = line.index;
let elt = {"pk":pk, "index":index};
this.movedLines.push(elt);
// TODO: doesn't appear to work?!
this.movedLines.push({
"pk": this.$children[ev.oldIndicies[i].index].line.pk,
"index": ev.newIndicies[i].index
});
}
}
this.moveLines();
},
moveLines() {
......@@ -207,7 +219,7 @@ var DiploPanel = BasePanel.extend({
}
},
hideOverlay() {
this.$children[0].hideOverlay();
if (this.$children.length) this.$children[0].hideOverlay();
},
bulkUpdate() {
......
......@@ -615,7 +615,8 @@ i.panel-icon {
}
#diplomatic-lines div:before {
user-select: none;
/* user-select: none; */
pointer-events: all;
text-align: center;
counter-increment: line;
content: counter(line);
......@@ -628,7 +629,7 @@ i.panel-icon {
color: #888;
}
.line-selected {
#diplomatic-lines div.selected {
background-color:#33A2FF;
border: solid #33A2FF 1px;
}
......
......@@ -550,6 +550,11 @@
<div class="tools">
<i title="{% trans 'Transcription Panel' %}" class="panel-icon fas fa-list-ol"></i>
<i id="save-notif" title="{% trans "There is content waiting to be saved (don't leave the page)" %}" class="notice fas fa-save hide"></i>
<button id="sortMode"
title="{% trans "Toggle sorting mode." %}"
class="btn btn-sm ml-3 btn-info fas fa-sort"
@click="toggleSort"
autocomplete="off"></button>
</div>
<div class="content-container {{ document.read_direction }}">
......@@ -566,9 +571,9 @@
@input="changed"
@focusin="startEdit"
@focusout="stopEdit"
@paste="onPaste"
@mousemove="showOverlay"
@mouseleave="hideOverlay"
@paste="onPaste">
@mouseleave="hideOverlay">
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment