jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented Basic Drag and Drop for inventory Items

Browse Source
This commit is contained in:
Thaum
2015-03-10 15:09:49 +00:00
parent a3db1bd021
commit bf4bed2766
5 changed files with 80 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
rpg-docs/.meteor/packages
View File

@@ -11,7 +11,6 @@ accounts-ui
random
dburles:collection-helpers
reactive-var
cw4gn3r:jquery-event-drag
underscore
aldeed:collection2
differential:vulcanize

1
rpg-docs/.meteor/versions
View File

@@ -15,7 +15,6 @@ boilerplate-generator@1.0.2
callback-hook@1.0.2
check@1.0.4
conielo:autoform-polymer-paper@0.1.1
cw4gn3r:jquery-event-drag@2.2.0
dburles:collection-helpers@1.0.2
dburles:mongo-collection-instances@0.3.1
ddp@1.0.14

4
rpg-docs/client/views/GeneralCSS/general.css
View File

@@ -140,6 +140,10 @@ paper-button {
visibility: hidden;
}
.hidden{
opacity: 0;
}
@media (max-width: 640px) {
html /deep/ paper-action-dialog[global-dialog] {
top: 0 !important;

32
rpg-docs/client/views/character/inventory/inventory.html
View File

@@ -21,7 +21,7 @@
</div>
</paper-shadow>
<!--Equipment-->
<paper-shadow class="card container">
<paper-shadow class="card container equipmentContainer">
<div class="equipmentTop" layout horizontal center>
<div class="containerName subhead" flex>
Equipment
@@ -32,24 +32,16 @@
<div flex class="equipmentMain">
{{#if armor}}
{{#with armor}}
<div class="itemSlot">
<paper-item class="inventoryItem armorItem" hero-id="main" {{detailHero}} layout horizontal>
{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
</paper-item>
</div>
{{>inventoryItem}}
{{/with}}
{{/if}}
{{#each equipment}}
<div class="itemSlot">
<paper-item class="inventoryItem" hero-id="main" {{detailHero}} layout horizontal>
{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
</paper-item>
</div>
{{>inventoryItem}}
{{/each}}
</div>
</paper-shadow>
{{#each containers}}
<paper-shadow class="card container" hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
<paper-shadow class="card container itemContainer" hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
@@ -57,11 +49,7 @@
</div>
<div flex class="containerMain">
{{#each items ../_id _id}}
<div class="itemSlot">
<paper-item class="inventoryItem" hero-id="main" {{detailHero}} layout horizontal>
{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
</paper-item>
</div>
{{>inventoryItem}}
{{/each}}
</div>
</paper-shadow>
@@ -74,4 +62,12 @@
<paper-fab-menu-item id="addContainer" icon="work" color="#d23f31" tooltip="Container"></paper-fab-menu-item>
</paper-fab-menu>
</div>
</template>
</template>
<template name="inventoryItem">
<div class="itemSlot">
<paper-item class="inventoryItem {{hidden}}" hero-id="main" {{detailHero}} layout horizontal draggable="true">
{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
</paper-item>
</div>
</template>

65
rpg-docs/client/views/character/inventory/inventory.js
View File

@@ -18,9 +18,6 @@ Template.inventory.helpers({
showAddButtons: function(){
return Template.instance().showAddButtons.get();
},
ne1: function(num){
return num !== 1;
},
colorClass: function(){
return getColorClass(this.color)
},
@@ -102,3 +99,65 @@ Template.inventory.events({
});
}
});
Template.inventoryItem.helpers({
ne1: function(num){
return num !== 1;
},
hidden: function(){
return Session.equals("inventory.dragItemId", this._id)? "hidden" : null;
}
});
Template.layout.events({
"dragstart .inventoryItem": function(event, instance){
Session.set("inventory.dragItemId", this._id);
Session.set("inventory.dragItemOriginalContainer", this.container);
Session.set("inventory.dragItemOriginalCharacter", this.charId);
},
"dragend .inventoryItem": function(event, instance){
resetInvetorySession();
},
"dragover .itemContainer": function(event, instance){
event.preventDefault();
},
"dragover .equipmentContainer": function(event, instance){
var containerId = Session.get("inventory.dragItemOriginalContainer");
var charId = Session.get("inventory.dragItemOriginalCharacter");
if (this._id !== charId) return; //we can't equip something we don't own
var item = Items.findOne(Session.get("inventory.dragItemId"));
if (item.equipmentSlot === "none") return; //we can't equip this
event.preventDefault(); //this is a valid drop zone
},
"drop .container": function(event, instacne){
var item = Items.findOne(Session.get("inventory.dragItemId"));
if (item.container === this._id && !item.equipped) return; //the item is already here
if(Containers.findOne(this._id)){//the container exists
Items.update(item._id, {$set: {container: this._id, charId: this.charId, equipped: false}});
}
resetInvetorySession();
},
"drop .equipmentContainer": function(event, instance){
var containerId = Session.get("inventory.dragItemOriginalContainer");
var charId = Session.get("inventory.dragItemOriginalCharacter");
if (this._id !== charId) return; //we can't equip something we don't own
var item = Items.findOne(Session.get("inventory.dragItemId"));
if (item.equipmentSlot === "none") return; //we can't equip this
//equip the item if it's not equipped
if(!item.equipped) Items.update(item._id, {$set: {equipped: true, container: containerId, charId: charId}});
resetInvetorySession();
}
})
var resetInvetorySession = function(){
_.defer(function(){
Session.set("inventory.dragItemId", null);
Session.set("inventory.dragItemOriginalContainer", null);
Session.set("inventory.dragItemOriginalCharacter", null);
})
}