Refactored drag 'n' drop code.

This commit is contained in:
WrinklyNinja
2014-08-29 19:15:12 +01:00
parent f834fe47d0
commit 9df354f2e1
3 changed files with 37 additions and 28 deletions
+1
View File
@@ -387,6 +387,7 @@ body.editMode header #headerOverlay {
}
[draggable] {
-webkit-user-select: none;
cursor: move;
}
.highlight {
background: #69aaff;
+36 -7
View File
@@ -315,14 +315,14 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
/* Remove drag 'n' drop event handlers. */
var elements = document.getElementById('pluginsNav').children;
for (var i = 0; i < elements.length; ++i) {
elements[i].removeAttribute('draggable', true);
elements[i].removeEventListener('dragstart', handlePluginDragStart, false);
elements[i].removeAttribute('draggable');
elements[i].removeEventListener('dragstart', elements[i].handleDragStart, false);
}
elements = card.shadowRoot.getElementsByTagName('table');
for (var i = 0; i < elements.length; ++i) {
if (elements[i].id == 'loadAfter' || elements[i].id == 'req' || elements[i].id == 'inc') {
elements[i].removeEventListener('drop', handlePluginDrop, false);
elements[i].removeEventListener('dragover', handlePluginDragOver, false);
elements[i].removeEventListener('drop', elements[i].handleDrop, false);
elements[i].removeEventListener('dragover', elements[i].handleDragOver, false);
}
}
@@ -500,13 +500,13 @@ var pluginCardProto = Object.create(HTMLElement.prototype, {
elements = document.getElementById('pluginsNav').children;
for (var i = 0; i < elements.length; ++i) {
elements[i].draggable = true;
elements[i].addEventListener('dragstart', handlePluginDragStart, false);
elements[i].addEventListener('dragstart', elements[i].handleDragStart, false);
}
elements = this.shadowRoot.getElementsByTagName('table');
for (var i = 0; i < elements.length; ++i) {
if (elements[i].id == 'loadAfter' || elements[i].id == 'req' || elements[i].id == 'inc') {
elements[i].addEventListener('drop', handlePluginDrop, false);
elements[i].addEventListener('dragover', handlePluginDragOver, false);
elements[i].addEventListener('drop', elements[i].handleDrop, false);
elements[i].addEventListener('dragover', elements[i].handleDragOver, false);
}
}
@@ -618,6 +618,13 @@ var PluginCard = document.registerElement('plugin-card', {prototype: pluginCardP
/* Create a <plugin-li> element type that extends from <li>. */
var pluginLIProto = Object.create(HTMLLIElement.prototype, {
handleDragStart: {
value: function(evt) {
evt.dataTransfer.effectAllowed = 'copy';
evt.dataTransfer.setData('text/plain', evt.target.textContent);
}
},
createdCallback: {
value: function() {
@@ -753,6 +760,28 @@ var MessageDialog = document.registerElement('message-dialog', {
/* Create a <editable-table> element type that extends from <table>. */
var EditableTableProto = Object.create(HTMLTableElement.prototype, {
handleDrop: {
value: function(evt) {
evt.stopPropagation();
if (evt.currentTarget.tagName == 'TABLE' && (evt.currentTarget.id == 'req' || evt.currentTarget.id == 'inc' || evt.currentTarget.id == 'loadAfter')) {
var data = {
name: evt.dataTransfer.getData('text/plain')
};
evt.currentTarget.addRow(data);
}
return false;
}
},
handleDragOver: {
value: function(evt) {
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
},
getRowsData: {
value: function(writableOnly) {
var writableRows = [];
-21
View File
@@ -946,27 +946,6 @@ function copyContent(evt) {
loot.query(request).catch(processCefError);
}
function handlePluginDrop(evt) {
evt.stopPropagation();
if (evt.currentTarget.tagName == 'TABLE' && (evt.currentTarget.id == 'req' || evt.currentTarget.id == 'inc' || evt.currentTarget.id == 'loadAfter')) {
var data = {
name: evt.dataTransfer.getData('text/plain')
};
evt.currentTarget.addRow(data);
}
return false;
}
function handlePluginDragStart(evt) {
evt.dataTransfer.effectAllowed = 'copy';
evt.dataTransfer.setData('text/plain', evt.target.textContent);
}
function handlePluginDragOver(evt) {
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
function areSettingsValid() {
/* Validate inputs individually. */
var inputs = document.getElementById('settings').getElementsByTagName('input');