315 lines
13 KiB
HTML
315 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="inventory-style.css" />
|
|
<!--<script src="Inventory/inventory.js"></script>-->
|
|
<script src="jquery-3.3.1.min.js"></script>
|
|
<script>
|
|
function allowDrop(ev) {
|
|
ev.preventDefault();
|
|
}
|
|
|
|
function drag(ev) {
|
|
ev.dataTransfer.setData("text", ev.target.id);
|
|
}
|
|
|
|
function drop(ev) {
|
|
ev.preventDefault();
|
|
var data = ev.dataTransfer.getData("text");
|
|
ev.target.appendChild(document.getElementById(data));
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="inventory-table" id="personal-inventory">
|
|
<div class="inventory-row">
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot0">
|
|
<div class="inventory-slot">1</div>
|
|
<div class="inventory-item" draggable="true" ondragstart="drag(event)" id="item1">Hamburger</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot1">
|
|
<div class="inventory-slot">2</div>
|
|
<div class="inventory-item" draggable="true" ondragstart="drag(event)" id="item2" style="background-color:yellow;">Cheeseburger</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot2">
|
|
<div class="inventory-slot">3</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot3">
|
|
<div class="inventory-slot">4</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot4">
|
|
<div class="inventory-slot">5</div>
|
|
</div>
|
|
</div>
|
|
<div class="inventory-row">
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot5">
|
|
<div class="inventory-slot">6</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot6">
|
|
<div class="inventory-slot">7</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot7">
|
|
<div class="inventory-slot">8</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot8">
|
|
<div class="inventory-slot">9</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot9">
|
|
<div class="inventory-slot">10</div>
|
|
</div>
|
|
</div>
|
|
<div class="inventory-row">
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot10">
|
|
<div class="inventory-slot">11</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot11">
|
|
<div class="inventory-slot">12</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot12">
|
|
<div class="inventory-slot">13</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot13">
|
|
<div class="inventory-slot">14</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot14">
|
|
<div class="inventory-slot">15</div>
|
|
</div>
|
|
</div>
|
|
<div class="inventory-row">
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot15">
|
|
<div class="inventory-slot">16</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot16">
|
|
<div class="inventory-slot">17</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot17">
|
|
<div class="inventory-slot">18</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot18">
|
|
<div class="inventory-slot">19</div>
|
|
</div>
|
|
<div class="inventory-cell" ondrop="drop(event)" ondragover="allowDrop(event)" id="slot19">
|
|
<div class="inventory-slot">20</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
"use strict";
|
|
|
|
jQuery.fn.extend({
|
|
addRemoveItems: function (targetCount) {
|
|
return this.each(function () {
|
|
var $children = $(this).children();
|
|
var rowCountDifference = targetCount - $children.length;
|
|
//console.log('row count diff: ' + rowCountDifference);
|
|
|
|
if (rowCountDifference > 0) {
|
|
// Add items
|
|
for (var i = 0; i < rowCountDifference; i++) {
|
|
//console.log($rows.first());
|
|
$children.last().clone().appendTo(this);
|
|
}
|
|
}
|
|
else if (rowCountDifference < 0) {
|
|
// remove items
|
|
$children.slice(rowCountDifference).remove();
|
|
}
|
|
});
|
|
},
|
|
// Modified and Updated by MLM
|
|
// Origin: Davy8 (http://stackoverflow.com/a/5212193/796832)
|
|
parentToAnimate: function (newParent, duration) {
|
|
duration = duration || 'slow';
|
|
|
|
var $element = $(this);
|
|
//console.log($element);
|
|
if ($element.length > 0) {
|
|
|
|
newParent = $(newParent); // Allow passing in either a JQuery object or selector
|
|
var oldOffset = $element.offset();
|
|
$(this).appendTo(newParent);
|
|
var newOffset = $element.offset();
|
|
|
|
|
|
var temp = $element.clone().appendTo('body');
|
|
|
|
temp.css({
|
|
'position': 'absolute',
|
|
'left': oldOffset.left,
|
|
'top': oldOffset.top,
|
|
'zIndex': 1000
|
|
});
|
|
|
|
$element.hide();
|
|
|
|
temp.animate({
|
|
'top': newOffset.top,
|
|
'left': newOffset.left
|
|
}, duration, function () {
|
|
$element.show();
|
|
temp.remove();
|
|
});
|
|
|
|
//console.log("parentTo Animate done");
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#row-count').on('input propertychange change', function () {
|
|
var targetRowCount = $(this).val();
|
|
//console.log('target count: ' + targetRowCount);
|
|
$('label[for="' + $(this).attr('id') + '"]').html(targetRowCount);
|
|
|
|
$('#personal-inventory.inventory-table').addRemoveItems(targetRowCount);
|
|
|
|
refreshSortableInventoryList();
|
|
}).trigger('change');
|
|
|
|
$('#column-count').on('input propertychange change', function () {
|
|
var targetColumnCount = $(this).val();
|
|
//console.log('target count: ' + targetColumnCount);
|
|
$('label[for="' + $(this).attr('id') + '"]').html(targetColumnCount);
|
|
|
|
$('#personal-inventory.inventory-table .inventory-row').addRemoveItems(targetColumnCount);
|
|
|
|
refreshSortableInventoryList();
|
|
}).trigger('change');
|
|
|
|
|
|
|
|
|
|
// Sorting, dragging, dropping, etc
|
|
|
|
refreshSortableInventoryList();
|
|
function refreshSortableInventoryList() {
|
|
$('.inventory-cell').sortable({
|
|
connectWith: '.inventory-cell',
|
|
placeholder: 'inventory-item-sortable-placeholder',
|
|
receive: function (event, ui) {
|
|
var attrWhitelist = $(this).closest('.inventory-table').attr('data-item-filter-whitelist');
|
|
var attrBlackList = $(this).closest('.inventory-table').attr('data-item-filter-blacklist');
|
|
var itemFilterWhitelistArray = attrWhitelist ? attrWhitelist.split(/\s+/) : [];
|
|
var itemFilterBlacklistArray = attrBlackList ? attrBlackList.split(/\s+/) : [];
|
|
//console.log(itemFilterWhitelistArray);
|
|
//console.log(itemFilterBlacklistArray);
|
|
|
|
var attrTypeList = $(ui.item).attr('data-item-type');
|
|
var itemTypeListArray = attrTypeList ? attrTypeList.split(/\s+/) : [];
|
|
//console.log(itemTypeListArray);
|
|
|
|
var canMoveIntoSlot = verifyWithWhiteBlackLists(itemTypeListArray, itemFilterWhitelistArray, itemFilterBlacklistArray)
|
|
|
|
if (!canMoveIntoSlot) {
|
|
console.log("Can't move to this slot");
|
|
//$(ui.sender).sortable('cancel');
|
|
$(ui.item).parentToAnimate($(ui.sender), 200);
|
|
}
|
|
else {
|
|
|
|
// Swap places of items if dragging on top of another
|
|
// Add the items in this list to the list the new item was from
|
|
$(this).children().not(ui.item).parentToAnimate($(ui.sender), 200);
|
|
|
|
// $(this) is the list the item is being moved into
|
|
// $(ui.sender) is the list the item came from
|
|
// Don't forget the move swap items as well
|
|
|
|
// $(this).attr('data-slot-position-x');
|
|
// $(this).attr('data-slot-position-y');
|
|
// $(ui.sender).attr('data-slot-position-x');
|
|
// $(ui.sender).attr('data-slot-position-y');
|
|
//console.log("Moving to: (" + $(this).attr('data-slot-position-x') + ", " + $(this).attr('data-slot-position-y') + ") - From: (" + $(ui.sender).attr('data-slot-position-x') + ", " + $(ui.sender).attr('data-slot-position-y') + ")");
|
|
}
|
|
}
|
|
}).each(function () {
|
|
// Setup some nice attributes for everything
|
|
// Makes it easier to update the backend
|
|
$(this).attr('data-slot-position-x', $(this).prevAll('.inventory-cell').length);
|
|
$(this).attr('data-slot-position-y', $(this).closest('.inventory-row').prevAll('.inventory-row').length);
|
|
}).disableSelection();
|
|
}
|
|
|
|
function verifyWithWhiteBlackLists(itemList, whiteList, blackList) {
|
|
// itemList should contain tags
|
|
// whiteList and blackList can contain tags and tag queries
|
|
|
|
// If we have a matching tags to some tag query in the whiteList but not in the blackList, then return true
|
|
// Else return false
|
|
|
|
|
|
console.group("Lists");
|
|
console.log(itemList);
|
|
console.log(whiteList);
|
|
console.log(blackList);
|
|
console.groupEnd();
|
|
|
|
// If white and black lists are empty, return true
|
|
// Save the calculations, no filtering
|
|
if (whiteList.length == 0 && blackList.length == 0)
|
|
return true;
|
|
|
|
|
|
|
|
// Check if the itemList has an item in the blackList
|
|
var inBlackList = false;
|
|
$.each(blackList, function (index, value) {
|
|
var itemBlack = value;
|
|
var itemBlackAndArray = itemBlack.split(/\+/);
|
|
console.log(itemBlackAndArray);
|
|
|
|
var andedResult = true;
|
|
for (var i = 0; i < itemBlackAndArray.length; i++) {
|
|
if (blackList.length > 0 && $.inArray(itemBlackAndArray[i], itemList) !== -1) {
|
|
andedResult = andedResult && true;
|
|
}
|
|
else {
|
|
andedResult = andedResult && false;
|
|
}
|
|
}
|
|
|
|
if (andedResult)
|
|
inBlackList = true;
|
|
});
|
|
|
|
inBlackList = blackList.length > 0 ? inBlackList : false;
|
|
|
|
|
|
// Check if the itemList has an item in the whiteList
|
|
var inWhiteList = false;
|
|
$.each(whiteList, function (index, value) {
|
|
var itemWhite = value;
|
|
var itemWhiteAndArray = itemWhite.split(/\+/);
|
|
//console.log(itemWhiteAndArray);
|
|
|
|
var andedResult = true;
|
|
for (var i = 0; i < itemWhiteAndArray.length; i++) {
|
|
if (whiteList.length > 0 && $.inArray(itemWhiteAndArray[i], itemList) !== -1) {
|
|
andedResult = andedResult && true;
|
|
}
|
|
else {
|
|
andedResult = andedResult && false;
|
|
}
|
|
}
|
|
//console.log("andedResult: " + andedResult);
|
|
|
|
if (andedResult)
|
|
inWhiteList = true;
|
|
|
|
});
|
|
|
|
inWhiteList = whiteList.length > 0 ? inWhiteList : false;
|
|
|
|
|
|
console.log("inWhite: " + inWhiteList + " - inBlack: " + inBlackList);
|
|
|
|
if ((whiteList.length == 0 || inWhiteList) && !inBlackList)
|
|
return true;
|
|
|
|
return false;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |