Migrated the Feature page to Polymer 1
This commit is contained in:
Stefan Zermatten
@@ -1,32 +1,23 @@
|
||||
openParentDialog = function(parent, charId, heroId) {
|
||||
var detail;
|
||||
openParentDialog = function({
|
||||
parent, charId, element, returnElement, callback,
|
||||
}) {
|
||||
let template;
|
||||
let data;
|
||||
if (parent.collection === "Characters" && parent.group === "racial") {
|
||||
detail = {
|
||||
template: "raceDialog",
|
||||
data: {charId: parent.id},
|
||||
};
|
||||
template = "raceDialog";
|
||||
data = {charId: parent.id};
|
||||
} else if (parent.collection === "Features") {
|
||||
detail = {
|
||||
template: "featureDialog",
|
||||
data: {featureId: parent.id},
|
||||
};
|
||||
template = "featureDialog";
|
||||
data = {featureId: parent.id};
|
||||
} else if (parent.collection === "Classes") {
|
||||
detail = {
|
||||
template: "classDialog",
|
||||
data: {classId: parent.id},
|
||||
};
|
||||
template = "classDialog";
|
||||
data = {classId: parent.id};
|
||||
} else if (parent.collection === "Items") {
|
||||
detail = {
|
||||
template: "itemDialog",
|
||||
data: {itemId: parent.id},
|
||||
};
|
||||
template = "itemDialog";
|
||||
data = {itemId: parent.id};
|
||||
} else if (parent.collection === "Spells") {
|
||||
detail = {
|
||||
template: "spellDialog",
|
||||
data: {spellId: parent.id},
|
||||
};
|
||||
template = "spellDialog";
|
||||
data = {spellId: parent.id};
|
||||
}
|
||||
detail.heroId = heroId;
|
||||
detail.charId = charId;
|
||||
GlobalUI.setDetail(detail);
|
||||
pushDialogStack({template, data, element, returnElement, callback});
|
||||
};
|
||||
|
||||
@@ -55,6 +55,8 @@ paper-icon-item::shadow #contentIcon {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
/* stop the fab from flashing during animation */
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
paper-fab {
|
||||
@@ -75,6 +77,11 @@ paper-button {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
dicecloud-selector paper-item {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*Style shortcuts*/
|
||||
.scroll-y {
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
</app-header>
|
||||
<div class="form flex">
|
||||
<paper-dropdown-menu label="Who can view this character">
|
||||
<paper-listbox class="visibilityDropdown dropdown-content" selected={{viewPermission}} attr-for-selected="name">
|
||||
<dicecloud-selector class="visibilityDropdown dropdown-content" selected={{viewPermission}}>
|
||||
<paper-item name="whitelist">Only people I share with</paper-item>
|
||||
<paper-item name="public">Anyone with link</paper-item>
|
||||
</paper-listbox>
|
||||
</dicecloud-selector>
|
||||
</paper-dropdown-menu>
|
||||
<div class="layout horizontal center wrap">
|
||||
<paper-input class="flex" id="userNameOrEmailInput" label="Share with username or email" floatinglabel></paper-input>
|
||||
|
||||
@@ -30,24 +30,21 @@ Template.characterSheet.events({
|
||||
"color-change": function(event, instance){
|
||||
Characters.update(this._id, {$set: {color: event.color}});
|
||||
},
|
||||
"tap #deleteCharacter": function(event, instance){
|
||||
const menu = instance.find(".character-menu");
|
||||
"click #deleteCharacter": function(event, instance){
|
||||
pushDialogStack({
|
||||
data: this,
|
||||
template: "deleteCharacterConfirmation",
|
||||
element: event.currentTarget.parentElement.parentElement,
|
||||
});
|
||||
},
|
||||
"tap #shareCharacter": function(event, instance){
|
||||
const menu = instance.find(".character-menu");
|
||||
"click #shareCharacter": function(event, instance){
|
||||
pushDialogStack({
|
||||
data: this,
|
||||
template: "shareDialog",
|
||||
element: event.currentTarget.parentElement.parentElement,
|
||||
});
|
||||
},
|
||||
"tap #characterSettings": function(event, instance){
|
||||
const menu = instance.find(".character-menu");
|
||||
"click #characterSettings": function(event, instance){
|
||||
pushDialogStack({
|
||||
data: this,
|
||||
template: "characterSettings",
|
||||
|
||||
@@ -10,10 +10,9 @@
|
||||
|
||||
<template name="featureDetails">
|
||||
{{#if or canEnable hasUses}}
|
||||
<div layout horizontal center justified wrap>
|
||||
<div class="layout horizontal center justified wrap">
|
||||
{{#if canEnable}}
|
||||
<div>enabled:</div>
|
||||
<paper-checkbox class="sideMargin" checked={{enabled}}></paper-checkbox>
|
||||
<paper-checkbox class="sideMargin" checked={{enabled}}>enabled</paper-checkbox>
|
||||
{{/if}}
|
||||
{{#if hasUses}}
|
||||
<div class="subhead" style="margin-right: 16px">
|
||||
@@ -21,7 +20,7 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if hasUses}}
|
||||
<div layout horizontal>
|
||||
<div class="layout horizontal">
|
||||
<paper-button class="useFeature" disabled={{noUsesLeft}}>Use</paper-button>
|
||||
<paper-button class="resetFeature" disabled={{usesFull}}>Reset</paper-button>
|
||||
</div>
|
||||
@@ -41,44 +40,36 @@
|
||||
|
||||
<template name="featureEdit">
|
||||
<!--name-->
|
||||
<paper-input id="featureNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
|
||||
<paper-input id="featureNameInput" class="fullwidth" label="Name" value={{name}}></paper-input>
|
||||
|
||||
<hr class="vertMargin">
|
||||
|
||||
<div layout horizontal center style="height: 60px;">
|
||||
<paper-dropdown-menu id="enabledDropdown" label="Enable Feature">
|
||||
<paper-dropdown layered class="dropdown">
|
||||
<core-menu id="enabledMenu" class="menu" selected={{enabledSelection}} on-tap="onStatMenuTap">
|
||||
<paper-item name="alwaysEnabled"> Always Enabled </paper-item>
|
||||
<paper-item name="enabled"> Enabled </paper-item>
|
||||
<paper-item name="disabled"> Disabled </paper-item>
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
<div class="layout horizontal center wrap justified">
|
||||
<paper-dropdown-menu class=flex label="Enable Feature" style="flex-basis: 150px; max-width: 200px;">
|
||||
<dicecloud-selector selected={{enabledSelection}} class="dropdown-content enabled-dropdown">
|
||||
<paper-item name="alwaysEnabled" style="width: 150px;">
|
||||
Always Enabled
|
||||
</paper-item>
|
||||
<paper-item name="enabled">
|
||||
Enabled
|
||||
</paper-item>
|
||||
<paper-item name="disabled">
|
||||
Disabled
|
||||
</paper-item>
|
||||
</dicecloud-selector>
|
||||
</paper-dropdown-menu>
|
||||
<div layout horizontal center class="sideMargin">
|
||||
<div>Limit Uses: </div>
|
||||
<paper-toggle-button id="limitUseCheck"
|
||||
class="sideMargin"
|
||||
checked={{usesSet}}
|
||||
role="button"
|
||||
aria-pressed="false"
|
||||
tabindex="0"
|
||||
touch-action="pan-y">
|
||||
</paper-toggle-button>
|
||||
</div>
|
||||
<paper-toggle-button id="limitUseCheck" checked={{usesSet}} style="margin: 0 16px; height: 62px;">
|
||||
Limit uses
|
||||
</paper-toggle-button>
|
||||
{{#if usesSet}}
|
||||
<paper-input flex id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
|
||||
<paper-input id="usesInput" type="number" allowed-pattern="[0-9]" class="flex"
|
||||
label="Uses" value={{uses}} style="flex-basis: 100px; max-width: 200px">
|
||||
</paper-input>
|
||||
{{else}}
|
||||
<div class="flex" style="flex-basis: 100px; max-width: 200px"></div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<hr class="vertMargin">
|
||||
|
||||
<!--description-->
|
||||
<paper-input-decorator label="Description" floatinglabel layout vertical>
|
||||
<paper-autogrow-textarea>
|
||||
<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
<paper-textarea label="Description" id="featureDescriptionInput" value={{description}}></paper-textarea>
|
||||
|
||||
{{> effectsEditList parentId=_id parentCollection="Features" charId=charId name=name enabled=enabled}}
|
||||
{{> proficiencyEditList parentId=_id parentCollection="Features" charId=charId enabled=enabled}}
|
||||
|
||||
@@ -31,11 +31,11 @@ Template.featureDetails.helpers({
|
||||
});
|
||||
|
||||
Template.featureDetails.events({
|
||||
"tap .useFeature": function(event){
|
||||
"click .useFeature": function(event){
|
||||
var featureId = this._id;
|
||||
Features.update(featureId, {$inc: {used: 1}});
|
||||
},
|
||||
"tap .resetFeature": function(event){
|
||||
"click .resetFeature": function(event){
|
||||
var featureId = this._id;
|
||||
Features.update(featureId, {$set: {used: 0}});
|
||||
},
|
||||
@@ -46,10 +46,6 @@ Template.featureDetails.events({
|
||||
},
|
||||
});
|
||||
|
||||
Template.featureEdit.onRendered(function(){
|
||||
updatePolymerInputs(this);
|
||||
});
|
||||
|
||||
Template.featureEdit.helpers({
|
||||
usesSet: function(){
|
||||
return _.isString(this.uses);
|
||||
@@ -67,32 +63,53 @@ Template.featureEdit.helpers({
|
||||
},
|
||||
});
|
||||
|
||||
const debounce = (f) => _.debounce(f, 300);
|
||||
|
||||
Template.featureEdit.events({
|
||||
"change #featureNameInput": function(event){
|
||||
var name = Template.instance().find("#featureNameInput").value;
|
||||
Features.update(this._id, {$set: {name: name}});
|
||||
},
|
||||
"change #featureDescriptionInput": function(event){
|
||||
var description = Template.instance().find("#featureDescriptionInput").value;
|
||||
Features.update(this._id, {$set: {description: description}});
|
||||
},
|
||||
"change #limitUseCheck": function(event){
|
||||
"input #featureNameInput": debounce(function(event){
|
||||
var name = event.currentTarget.value;
|
||||
Features.update(this._id, {
|
||||
$set: {name: name}
|
||||
}, {
|
||||
removeEmptyStrings: false,
|
||||
trimStrings: false,
|
||||
});
|
||||
}),
|
||||
"input #featureDescriptionInput": debounce(function(event){
|
||||
var description = event.currentTarget.value;
|
||||
Features.update(this._id, {
|
||||
$set: {description: description}
|
||||
}, {
|
||||
removeEmptyStrings: false,
|
||||
trimStrings: false,
|
||||
});
|
||||
}),
|
||||
"change #limitUseCheck": debounce(function(event){
|
||||
var currentUses = this.uses;
|
||||
var featureId = this._id;
|
||||
if (event.target.checked && !_.isString(currentUses)){
|
||||
Features.update(featureId, {$set: {uses: ""}}, {removeEmptyStrings: false});
|
||||
Features.update(featureId, {
|
||||
$set: {uses: ""}
|
||||
}, {
|
||||
removeEmptyStrings: false
|
||||
});
|
||||
} else if (!event.target.checked && _.isString(currentUses)){
|
||||
Features.update(featureId, {$unset: {uses: ""}});
|
||||
Features.update(featureId, {
|
||||
$unset: {uses: ""}
|
||||
});
|
||||
}
|
||||
},
|
||||
"change #usesInput, input #quantityInput": function(event){
|
||||
var value = event.target.value;
|
||||
}),
|
||||
"input #usesInput, input #quantityInput": debounce(function(event){
|
||||
var value = event.currentTarget.value;
|
||||
var featureId = this._id;
|
||||
Features.update(featureId, {$set: {uses: value}});
|
||||
},
|
||||
"core-select #enabledDropdown": function(event){
|
||||
Features.update(featureId, {
|
||||
$set: {uses: value}
|
||||
}, {
|
||||
removeEmptyStrings: false,
|
||||
});
|
||||
}),
|
||||
"iron-select .enabled-dropdown": function(event){
|
||||
var detail = event.originalEvent.detail;
|
||||
if (!detail.isSelected) return;
|
||||
var value = detail.item.getAttribute("name");
|
||||
var setter;
|
||||
if (value === "enabled"){
|
||||
|
||||
@@ -3,10 +3,6 @@
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
<template name="features">
|
||||
<div fit>
|
||||
<div class="scroll-y" fit>
|
||||
<div class="column-container">
|
||||
<!--expertiseDice-->
|
||||
{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
|
||||
<!--ki-->
|
||||
{{>resource name="ki" title="Ki Points" color="teal" char=this}}
|
||||
<!--rages-->
|
||||
{{>resource name="rages" title="Rages" color="teal" char=this}}
|
||||
<!--sorceryPoints-->
|
||||
{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
|
||||
<!--superiorityDice-->
|
||||
{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
|
||||
<div class="features">
|
||||
<div class="column-container">
|
||||
<!--expertiseDice-->
|
||||
{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
|
||||
<!--ki-->
|
||||
{{>resource name="ki" title="Ki Points" color="teal" char=this}}
|
||||
<!--rages-->
|
||||
{{>resource name="rages" title="Rages" color="teal" char=this}}
|
||||
<!--sorceryPoints-->
|
||||
{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
|
||||
<!--superiorityDice-->
|
||||
{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
|
||||
|
||||
<!--Attacks-->
|
||||
<div>
|
||||
<!--Attacks-->
|
||||
<div>
|
||||
<paper-material class="card">
|
||||
<div class="top white">
|
||||
Attacks
|
||||
@@ -22,23 +21,21 @@
|
||||
<div class="bottom list">
|
||||
{{#each attacks}}
|
||||
<div class="item-slot">
|
||||
<div class="flexible attack item"
|
||||
hero-id="main" {{detailHero}}>
|
||||
<div layout horizontal>
|
||||
<div class="headline"
|
||||
style="margin-right: 16px;"
|
||||
layout horizontal center>
|
||||
<div class="flexible attack item">
|
||||
<div class="layout horizontal">
|
||||
<div class="paper-font-headline layout horizontal center"
|
||||
style="margin-right: 16px;">
|
||||
{{evaluateSigned ../_id attackBonus}}
|
||||
</div>
|
||||
<div flex layout vertical>
|
||||
<div class="body2">
|
||||
<div class="flex layout vertical">
|
||||
<div class="paper-font-body2">
|
||||
{{name}}
|
||||
</div>
|
||||
<div>
|
||||
{{evaluateString ../_id damage}} {{damageType}}
|
||||
</div>
|
||||
{{#if details}}
|
||||
<div class="caption">
|
||||
<div>
|
||||
{{details}}
|
||||
</div>
|
||||
{{/if}}
|
||||
@@ -49,46 +46,43 @@
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-material>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Proficiencies-->
|
||||
<div>
|
||||
<!--Proficiencies-->
|
||||
<div>
|
||||
<paper-material class="card">
|
||||
<div class="white top">
|
||||
Proficiencies
|
||||
</div>
|
||||
<div flex class="bottom list">
|
||||
{{#if weaponProfs.count}}
|
||||
<div class="subhead">Weapons</div>
|
||||
<div class="paper-font-subhead">Weapons</div>
|
||||
{{/if}}
|
||||
{{#each weaponProfs}}
|
||||
{{> proficiencyListItem}}
|
||||
{{/each}}
|
||||
{{#if armorProfs.count}}
|
||||
<div class="subhead">Armor</div>
|
||||
<div class="paper-font-subhead">Armor</div>
|
||||
{{/if}}
|
||||
{{#each armorProfs}}
|
||||
{{> proficiencyListItem}}
|
||||
{{/each}}
|
||||
{{#if toolProfs.count}}
|
||||
<div class="subhead">Tools</div>
|
||||
<div class="paper-font-subhead">Tools</div>
|
||||
{{/if}}
|
||||
{{#each toolProfs}}
|
||||
{{> proficiencyListItem}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</paper-material>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--features-->
|
||||
{{#each features}}
|
||||
<div>
|
||||
<paper-material class="card featureCard"
|
||||
hero-id="main" {{detailHero}}>
|
||||
<div class="top {{colorClass}} subhead"
|
||||
layout horizontal
|
||||
hero-id="toolbar" {{detailHero}}>
|
||||
<div flex hero-id="title" {{detailHero}}>
|
||||
<!--features-->
|
||||
{{#each features}}
|
||||
<div>
|
||||
<paper-material class="card featureCard" data-id={{_id}}>
|
||||
<div class="top {{colorClass}} paper-font-subhead layout horizontal">
|
||||
<div class="flex">
|
||||
{{name}}
|
||||
</div>
|
||||
{{#if hasUses}}
|
||||
@@ -97,22 +91,22 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if canEnable}}
|
||||
<core-tooltip label="Feature enabled"
|
||||
position="left">
|
||||
<div>
|
||||
<paper-checkbox class="enabledCheckbox"
|
||||
checked={{enabled}}
|
||||
disabled={{#unless canEditCharacter charId}}true{{/unless}}>
|
||||
</paper-checkbox>
|
||||
</core-tooltip>
|
||||
<paper-tooltip position="left">Feature enabled</paper-tooltip>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if description}}
|
||||
<div flex class="bottom">
|
||||
<div class="bottom flex">
|
||||
{{#markdown}}{{evaluateString charId shortDescription}}{{/markdown}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if hasUses}}
|
||||
<div layout horizontal center end-justified>
|
||||
<div class="layout horizontal center end-justified">
|
||||
<paper-button class="useFeature"
|
||||
disabled={{noUsesLeft}}>
|
||||
Use
|
||||
@@ -124,20 +118,15 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
</paper-material>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="fab-buffer"></div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#if canEditCharacter _id}}
|
||||
<paper-fab id="addFeature"
|
||||
class="floatyButton"
|
||||
icon="add"
|
||||
title="Add"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Add"
|
||||
hero-id="main"></paper-fab>
|
||||
icon="add">
|
||||
<paper-tooltip position="left">Add Feature</paper-tooltip>
|
||||
</paper-fab>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
@@ -145,12 +134,8 @@
|
||||
<template name="resource">
|
||||
{{#if characterCalculate "attributeBase" char._id name}}
|
||||
<div>
|
||||
<paper-material class="card"
|
||||
hero-id="main" {{detailHero name char._id}}
|
||||
layout horizontal>
|
||||
<div class="left {{getColor}} display1 white-text"
|
||||
hero-id="toolbar" {{detailHero name char._id}}
|
||||
layout horizontal center>
|
||||
<paper-material class="card layout horizontal">
|
||||
<div class="left {{getColor}} paper-font-display1 white-text layout horizontal center">
|
||||
<div style="margin-right: 8px;">
|
||||
<paper-icon-button class="resourceUp"
|
||||
icon="arrow-drop-up"
|
||||
@@ -164,8 +149,7 @@
|
||||
<div>{{characterCalculate "attributeValue" char._id name}}</div>
|
||||
<!--<div>/{{char.attributeBase name}}</div>-->
|
||||
</div>
|
||||
<div class="right clickable"
|
||||
flex layout horizontal center>
|
||||
<div class="right clickable flex layout horizontal center">
|
||||
{{title}}
|
||||
</div>
|
||||
</paper-material>
|
||||
|
||||
@@ -43,54 +43,45 @@ Template.features.helpers({
|
||||
});
|
||||
|
||||
Template.features.events({
|
||||
"tap #addFeature": function(event){
|
||||
"click #addFeature": function(event, instance){
|
||||
var featureId = Features.insert({
|
||||
name: "New Feature",
|
||||
charId: this._id,
|
||||
enabled: true,
|
||||
alwaysEnabled: true,
|
||||
});
|
||||
GlobalUI.setDetail({
|
||||
pushDialogStack({
|
||||
template: "featureDialog",
|
||||
data: {featureId: featureId, charId: this._id, startEditing: true},
|
||||
heroId: featureId,
|
||||
element: event.currentTarget,
|
||||
returnElement: instance.find(`.featureCard[data-id='${featureId}']`),
|
||||
});
|
||||
},
|
||||
"tap #addAttackButton": function(event){
|
||||
var charId = this._id;
|
||||
Attacks.insert({
|
||||
charId: charId
|
||||
}, function(error, id){
|
||||
if (!error){
|
||||
GlobalUI.setDetail({
|
||||
template: "attackDialog",
|
||||
data: {attackId: id, charId: charId},
|
||||
heroId: id,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
"tap .featureCard .top": function(event){
|
||||
"click .featureCard .top": function(event){
|
||||
var featureId = this._id;
|
||||
var charId = Template.parentData()._id;
|
||||
GlobalUI.setDetail({
|
||||
pushDialogStack({
|
||||
template: "featureDialog",
|
||||
data: {featureId: featureId, charId: charId},
|
||||
heroId: featureId,
|
||||
element: event.currentTarget.parentElement,
|
||||
});
|
||||
},
|
||||
"tap .attack": function(event){
|
||||
openParentDialog(this.parent, this.charId, this._id);
|
||||
"click .attack": function(event){
|
||||
openParentDialog({
|
||||
parent: this.parent,
|
||||
charId: this.charId,
|
||||
element: event.currentTarget,
|
||||
});
|
||||
},
|
||||
"tap .useFeature": function(event){
|
||||
"click .useFeature": function(event){
|
||||
var featureId = this._id;
|
||||
Features.update(featureId, {$inc: {used: 1}});
|
||||
},
|
||||
"tap .resetFeature": function(event){
|
||||
"click .resetFeature": function(event){
|
||||
var featureId = this._id;
|
||||
Features.update(featureId, {$set: {used: 0}});
|
||||
},
|
||||
"tap .enabledCheckbox": function(event){
|
||||
"click .enabledCheckbox": function(event){
|
||||
event.stopPropagation();
|
||||
},
|
||||
"change .enabledCheckbox": function(event){
|
||||
@@ -122,7 +113,7 @@ Template.resource.helpers({
|
||||
});
|
||||
|
||||
Template.resource.events({
|
||||
"tap .resourceUp": function(event){
|
||||
"click .resourceUp": function(event){
|
||||
var value = Characters.calculate.attributeValue(this.char._id, this.name);
|
||||
var base = Characters.calculate.attributeBase(this.char._id, this.name);
|
||||
if (value < base){
|
||||
@@ -131,7 +122,7 @@ Template.resource.events({
|
||||
Characters.update(this.char._id, modifier, {validate: false});
|
||||
}
|
||||
},
|
||||
"tap .resourceDown": function(event){
|
||||
"click .resourceDown": function(event){
|
||||
var value = Characters.calculate.attributeValue(this.char._id, this.name);
|
||||
if (value > 0){
|
||||
var modifier = {$inc: {}};
|
||||
@@ -139,11 +130,11 @@ Template.resource.events({
|
||||
Characters.update(this.char._id, modifier, {validate: false});
|
||||
}
|
||||
},
|
||||
"tap .right": function(event, instance) {
|
||||
GlobalUI.setDetail({
|
||||
"click .right": function(event, instance) {
|
||||
pushDialogStack({
|
||||
template: "attributeDialog",
|
||||
data: {name: this.title, statName: this.name, charId: this.char._id},
|
||||
heroId: this.char._id + this.name,
|
||||
element: event.currentTarget.parentElement,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template name="stats">
|
||||
<div class="scroll-y" fit>
|
||||
<div class="stats">
|
||||
<div style="padding: 8px 8px 0 8px">
|
||||
{{> healthCard}}
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
#accountSummary {
|
||||
padding: 16px;
|
||||
min-height: 146px;
|
||||
background-image: url(/png/paper-dice-crown.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
<template name="layout">
|
||||
<app-drawer-layout class="layout" responsiveWidth="905px" fullbleed>
|
||||
<app-drawer-layout class="layout" responsive-width="905px" fullbleed>
|
||||
<app-drawer>
|
||||
<app-header-layout mode="seamed" class="white">
|
||||
<div id="accountSummary">
|
||||
{{#if currentUser}}
|
||||
<a href="/account"
|
||||
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
|
||||
{{profileLink}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="/sign-in" style="color: white;">Sign in</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
<app-header-layout class="white" has-scrolling-region>
|
||||
<app-header id="accountSummary" effects="waterfall parallax-background" condenses fixed>
|
||||
<app-toolbar>
|
||||
{{#if currentUser}}
|
||||
<a href="/account"
|
||||
style="text-decoration: underline; cursor: pointer; font-size: 16px;">
|
||||
{{profileLink}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="/sign-in" style="color: white; text-decoration: underline;">Sign in</a>
|
||||
{{/if}}
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<div id="navPanel">
|
||||
<a href="/" tabindex="-1">
|
||||
<paper-icon-item id="homeNav">
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
</script>
|
||||
<link rel="import" href="/components/app-layout/app-layout.html">
|
||||
<link rel="import" href="/components/app-layout/app-scroll-effects/effects/waterfall.html">
|
||||
<link rel="import" href="/components/app-layout/app-scroll-effects/effects/parallax-background.html">
|
||||
<link rel="import" href="/components/app-layout/app-scroll-effects/effects/resize-title.html">
|
||||
|
||||
<link rel="import" href="/components/iron-icon/iron-icon.html">
|
||||
@@ -23,6 +24,7 @@
|
||||
<!--<link rel="import" href="/components/iron-icons/places-icons.html">-->
|
||||
<link rel="import" href="/components/iron-icons/social-icons.html">
|
||||
<link rel="import" href="/components/iron-image/iron-image.html">
|
||||
<link rel="import" href="/components/iron-selector/iron-selector.html">
|
||||
|
||||
<link rel="import" href="/components/neon-animation/neon-animation.html">
|
||||
<link rel="import" href="/components/neon-animation/neon-animations.html">
|
||||
@@ -39,6 +41,7 @@
|
||||
<link rel="import" href="/components/paper-listbox/paper-listbox.html">
|
||||
<link rel="import" href="/components/paper-material/paper-material.html">
|
||||
<link rel="import" href="/components/paper-menu-button/paper-menu-button.html">
|
||||
<link rel="import" href="/components/paper-menu/paper-menu.html">
|
||||
<link rel="import" href="/components/paper-radio-button/paper-radio-button.html">
|
||||
<link rel="import" href="/components/paper-radio-group/paper-radio-group.html">
|
||||
<link rel="import" href="/components/paper-ripple/paper-ripple.html">
|
||||
@@ -48,6 +51,7 @@
|
||||
<link rel="import" href="/components/paper-toggle-button/paper-toggle-button.html">
|
||||
<link rel="import" href="/components/paper-tooltip/paper-tooltip.html">
|
||||
|
||||
<link rel="import" href="/custom_components/dicecloud-selector/dicecloud-selector.html">
|
||||
<link rel="import" href="/custom_components/paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
|
||||
<link rel="import" href="/custom_components/app-theme.html">
|
||||
|
||||
@@ -6,7 +6,6 @@ Template.colorDropdown.helpers({
|
||||
|
||||
Template.colorDropdown.events({
|
||||
"click paper-item": function(event, instance){
|
||||
instance.find(".colorDropdown").close();
|
||||
var color = event.currentTarget.getAttribute("name");
|
||||
instance.$(".colorDropdown").trigger({
|
||||
type: "color-change",
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
transition: visibility 0s;
|
||||
transition: visibility 0s linear;
|
||||
}
|
||||
|
||||
.dialog-stack.hide {
|
||||
@@ -15,8 +15,9 @@
|
||||
}
|
||||
|
||||
.dialog-stack .backdrop {
|
||||
background: rgba(0,0,0,0.4);
|
||||
opacity: 1;
|
||||
background: #000;
|
||||
transform: translateZ(0);
|
||||
opacity: 0.4;
|
||||
transition: opacity 400ms linear;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ dialogs = new ReactiveArray();
|
||||
const offset = 16;
|
||||
const duration = 400;
|
||||
|
||||
pushDialogStack = function({template, data, element, callback}){
|
||||
pushDialogStack = function({template, data, element, returnElement, callback}){
|
||||
// Generate a new _id so that Blaze knows how to shuffle the array
|
||||
const _id = Random.id();
|
||||
dialogs.push({
|
||||
@@ -10,6 +10,7 @@ pushDialogStack = function({template, data, element, callback}){
|
||||
template,
|
||||
data,
|
||||
element,
|
||||
returnElement,
|
||||
callback,
|
||||
});
|
||||
};
|
||||
@@ -20,11 +21,6 @@ popDialogStack = function(result){
|
||||
dialog.callback && dialog.callback(result);
|
||||
};
|
||||
|
||||
let cloneHolder;
|
||||
Template.dialogStack.onRendered(function(){
|
||||
cloneHolder = this.find(".clone-holder");
|
||||
});
|
||||
|
||||
Template.dialogStack.helpers({
|
||||
dialogStackClass(){
|
||||
if (!dialogs.get().length) return "hide";
|
||||
@@ -43,13 +39,8 @@ Template.dialogStack.helpers({
|
||||
});
|
||||
|
||||
Template.dialogStack.events({
|
||||
"click .dialog-stack": function(event){
|
||||
popDialogStack();
|
||||
},
|
||||
"click .dialog-sizer": function(event){
|
||||
// Returning false from an event handler is the same as calling both
|
||||
// stopImmediatePropagation and preventDefault on the event.
|
||||
return false;
|
||||
"click .dialog-stack .backdrop": function(event){
|
||||
if (event.target === event.currentTarget) popDialogStack();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -76,10 +67,11 @@ const imitate = (
|
||||
element.style.borderRadius = transformedRadius($(source).css("border-radius"));
|
||||
}
|
||||
|
||||
const dialogOpenAnimation = ({element, dialog}) => {
|
||||
const dialogOpenAnimation = ({element, returnElement, dialog}) => {
|
||||
const dialogRect = dialog.getBoundingClientRect();
|
||||
const elementRect = element.getBoundingClientRect();
|
||||
element.style.visibility = "hidden";
|
||||
if (returnElement) returnElement.style.visibility = "hidden";
|
||||
// Get how must the element change to become the dialog
|
||||
const deltaLeft = elementRect.left - dialogRect.left;
|
||||
const deltaTop = elementRect.top - dialogRect.top;
|
||||
@@ -103,7 +95,22 @@ const dialogOpenAnimation = ({element, dialog}) => {
|
||||
}, duration);
|
||||
}
|
||||
|
||||
const dialogCloseAnimation = ({element, dialog, callback}) => {
|
||||
const dialogCloseAnimation = ({element, returnElement, dialog, callback}) => {
|
||||
// We are returning to a different element
|
||||
// pop the original element back in and use the returnElement in its place
|
||||
if (returnElement){
|
||||
let originalElement = element;
|
||||
element = returnElement;
|
||||
originalElement.style.visibility = "";
|
||||
originalElement.style.transform = "scale(0)";
|
||||
_.defer(() => {
|
||||
originalElement.style.transition = `transform ${duration}ms ease`;
|
||||
originalElement.style.transform = "";
|
||||
});
|
||||
_.delay(() => {
|
||||
originalElement.style.transition = "";
|
||||
}, duration);
|
||||
}
|
||||
// Reset the dialog if it is mid-transition
|
||||
dialog.style.transition = "none";
|
||||
dialog.style.transform = "none";
|
||||
@@ -171,18 +178,22 @@ Template.dialogStack.uihooks({
|
||||
if (data.element){
|
||||
// Store the reference to the element on the DOM node itself,
|
||||
// since Blaze won't keep the data around for the remove hook
|
||||
node["data-element"] = data.element;
|
||||
node._dialogStackElement = data.element;
|
||||
node._dialogStackReturnElement = data.returnElement;
|
||||
dialogOpenAnimation({
|
||||
element: data.element,
|
||||
returnElement: data.returnElement,
|
||||
dialog: node,
|
||||
});
|
||||
}
|
||||
},
|
||||
remove: function(node, tpl) {
|
||||
const element = node["data-element"];
|
||||
const element = node._dialogStackElement;
|
||||
const returnElement = node._dialogStackReturnElement;
|
||||
if (element){
|
||||
dialogCloseAnimation({
|
||||
element,
|
||||
returnElement,
|
||||
dialog: node,
|
||||
callback(){
|
||||
node.remove();
|
||||
|
||||
@@ -4,12 +4,15 @@
|
||||
<link rel="import" href="../components/paper-styles/classes/global.html">
|
||||
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
|
||||
--primary-color: #424242;
|
||||
--light-primary-color: #666;
|
||||
--dark-primary-color: #222;
|
||||
--accent-color: #d13b2e;
|
||||
--light-accent-color: #ff5a4b;
|
||||
--dark-accent-color: #ad2a1f;
|
||||
:root {
|
||||
--primary-color: #424242;
|
||||
--light-primary-color: #666;
|
||||
--dark-primary-color: #222;
|
||||
|
||||
--accent-color: #d13b2e;
|
||||
--light-accent-color: #ff5a4b;
|
||||
--dark-accent-color: #ad2a1f;
|
||||
}
|
||||
paper-item.short {
|
||||
--paper-item-min-height: 32px;
|
||||
}
|
||||
@@ -22,4 +25,17 @@
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
#accountSummary{
|
||||
--app-header-background-front-layer: {
|
||||
background-image: url(/png/paper-dice-crown.png);
|
||||
};
|
||||
}
|
||||
.card .top paper-checkbox {
|
||||
--paper-checkbox-unchecked-color: #757575;
|
||||
--paper-checkbox-unchecked-color: rgba(255,255,255,0.54);
|
||||
--paper-checkbox-unchecked-ink-color: #fff;
|
||||
--paper-checkbox-checked-color: #606060;
|
||||
--paper-checkbox-checked-color: rgba(255,255,255,0.30);
|
||||
--paper-checkbox-checked-ink-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,353 @@
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="../../components/iron-selector/iron-selection.html">
|
||||
|
||||
<script>
|
||||
// jscs:disable
|
||||
/**
|
||||
* A stripped down version of iron-selectable
|
||||
* No multi-select
|
||||
* Assumes attrForSelected = "name"
|
||||
* Behaves a little better with Blaze
|
||||
*/
|
||||
/** @polymerBehavior */
|
||||
Polymer.DicecloudSelectableBehavior = {
|
||||
|
||||
/**
|
||||
* Fired when dicecloud-selector is activated (selected or deselected).
|
||||
* It is fired before the selected items are changed.
|
||||
* Cancel the event to abort selection.
|
||||
*
|
||||
* @event iron-activate
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when an item is selected
|
||||
*
|
||||
* @event iron-select
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when an item is deselected
|
||||
*
|
||||
* @event iron-deselect
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the list of selectable items changes (e.g., items are
|
||||
* added or removed). The detail of the event is a mutation record that
|
||||
* describes what changed.
|
||||
*
|
||||
* @event iron-items-changed
|
||||
*/
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Gets or sets the selected element. The default is to use the index of the item.
|
||||
* @type {string|number}
|
||||
*/
|
||||
selected: {
|
||||
type: String,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the currently selected item.
|
||||
*
|
||||
* @type {?Object}
|
||||
*/
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The event that fires from items when they are selected. Selectable
|
||||
* will listen for this event from items and update the selection state.
|
||||
* Set to empty string to listen to no events.
|
||||
*/
|
||||
activateEvent: {
|
||||
type: String,
|
||||
value: 'tap',
|
||||
observer: '_activateEventChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* This is a CSS selector string. If this is set, only items that match the CSS selector
|
||||
* are selectable.
|
||||
*/
|
||||
selectable: String,
|
||||
|
||||
/**
|
||||
* The class to set on elements when selected.
|
||||
*/
|
||||
selectedClass: {
|
||||
type: String,
|
||||
value: 'iron-selected'
|
||||
},
|
||||
|
||||
/**
|
||||
* The attribute to set on elements when selected.
|
||||
*/
|
||||
selectedAttribute: {
|
||||
type: String,
|
||||
value: null
|
||||
},
|
||||
|
||||
/**
|
||||
* Default fallback if the selection based on selected with `name`
|
||||
* is not found.
|
||||
*/
|
||||
fallbackSelection: {
|
||||
type: String,
|
||||
value: null
|
||||
},
|
||||
|
||||
/**
|
||||
* The list of items from which a selection can be made.
|
||||
*/
|
||||
items: {
|
||||
type: Array,
|
||||
readOnly: true,
|
||||
notify: true,
|
||||
value: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The set of excluded elements where the key is the `localName`
|
||||
* of the element that will be ignored from the item list.
|
||||
*
|
||||
* @default {template: 1}
|
||||
*/
|
||||
_excludedLocalNames: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return {
|
||||
'template': 1
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_updateSelected(selected)',
|
||||
'_checkFallback(fallbackSelection)'
|
||||
],
|
||||
|
||||
created: function() {
|
||||
this._bindFilterItem = this._filterItem.bind(this);
|
||||
this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this._observer = this._observeItems(this);
|
||||
this._updateItems();
|
||||
if (!this._shouldUpdateSelection) {
|
||||
this._updateSelected();
|
||||
}
|
||||
this._addListener(this.activateEvent);
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
if (this._observer) {
|
||||
Polymer.dom(this).unobserveNodes(this._observer);
|
||||
}
|
||||
this._removeListener(this.activateEvent);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the index of the given item.
|
||||
*
|
||||
* @method indexOf
|
||||
* @param {Object} item
|
||||
* @returns Returns the index of the item
|
||||
*/
|
||||
indexOf: function(item) {
|
||||
return this.items.indexOf(item);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the given value.
|
||||
*
|
||||
* @method select
|
||||
* @param {string|number} value the value to select.
|
||||
*/
|
||||
select: function(value) {
|
||||
this.selected = value;
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the previous item.
|
||||
*
|
||||
* @method selectPrevious
|
||||
*/
|
||||
selectPrevious: function() {
|
||||
var length = this.items.length;
|
||||
var index = (Number(this._valueToIndex(this.selected)) - 1 + length) % length;
|
||||
this.selected = this._indexToValue(index);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the next item.
|
||||
*
|
||||
* @method selectNext
|
||||
*/
|
||||
selectNext: function() {
|
||||
var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.length;
|
||||
this.selected = this._indexToValue(index);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the item at the given index.
|
||||
*
|
||||
* @method selectIndex
|
||||
*/
|
||||
selectIndex: function(index) {
|
||||
this.select(this._indexToValue(index));
|
||||
},
|
||||
|
||||
/**
|
||||
* Force a synchronous update of the `items` property.
|
||||
*
|
||||
* NOTE: Consider listening for the `iron-items-changed` event to respond to
|
||||
* updates to the set of selectable items after updates to the DOM list and
|
||||
* selection state have been made.
|
||||
*
|
||||
* WARNING: If you are using this method, you should probably consider an
|
||||
* alternate approach. Synchronously querying for items is potentially
|
||||
* slow for many use cases. The `items` property will update asynchronously
|
||||
* on its own to reflect selectable items in the DOM.
|
||||
*/
|
||||
forceSynchronousItemUpdate: function() {
|
||||
this._updateItems();
|
||||
},
|
||||
|
||||
get _shouldUpdateSelection() {
|
||||
return this.selected != null;
|
||||
},
|
||||
|
||||
_checkFallback: function() {
|
||||
if (this._shouldUpdateSelection) {
|
||||
this._updateSelected();
|
||||
}
|
||||
},
|
||||
|
||||
_addListener: function(eventName) {
|
||||
this.listen(this, eventName, '_activateHandler');
|
||||
},
|
||||
|
||||
_removeListener: function(eventName) {
|
||||
this.unlisten(this, eventName, '_activateHandler');
|
||||
},
|
||||
|
||||
_activateEventChanged: function(eventName, old) {
|
||||
this._removeListener(old);
|
||||
this._addListener(eventName);
|
||||
},
|
||||
|
||||
_updateItems: function() {
|
||||
var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
|
||||
nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
|
||||
this._setItems(nodes);
|
||||
},
|
||||
|
||||
_updateSelected: function() {
|
||||
this._selectSelected(this.selected);
|
||||
},
|
||||
|
||||
_selectSelected: function(selected) {
|
||||
this._selection.select(this._valueToItem(this.selected));
|
||||
// Check for items, since this array is populated only when attached
|
||||
// Since Number(0) is falsy, explicitly check for undefined
|
||||
if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
|
||||
this.selected = this.fallbackSelection;
|
||||
}
|
||||
},
|
||||
|
||||
_filterItem: function(node) {
|
||||
return !this._excludedLocalNames[node.localName];
|
||||
},
|
||||
|
||||
_valueToItem: function(value) {
|
||||
return (value == null) ? null : this.items[this._valueToIndex(value)];
|
||||
},
|
||||
|
||||
_valueToIndex: function(value) {
|
||||
for (var i = 0, item; item = this.items[i]; i++) {
|
||||
if (this._valueForItem(item) == value) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_indexToValue: function(index) {
|
||||
var item = this.items[index];
|
||||
if (item) {
|
||||
return this._valueForItem(item);
|
||||
}
|
||||
},
|
||||
|
||||
_valueForItem: function(item) {
|
||||
return item.getAttribute("name") || item["name"];
|
||||
},
|
||||
|
||||
_applySelection: function(item, isSelected) {
|
||||
if (this.selectedClass) {
|
||||
this.toggleClass(this.selectedClass, isSelected, item);
|
||||
}
|
||||
if (this.selectedAttribute) {
|
||||
this.toggleAttribute(this.selectedAttribute, isSelected, item);
|
||||
}
|
||||
this._selectionChange();
|
||||
this.fire('iron-' + (isSelected ? 'select' : 'deselect'), {item: item});
|
||||
},
|
||||
|
||||
_selectionChange: function() {
|
||||
this._setSelectedItem(this._selection.get());
|
||||
},
|
||||
|
||||
// observe items change under the given node.
|
||||
_observeItems: function(node) {
|
||||
return Polymer.dom(node).observeNodes(function(mutation) {
|
||||
this._updateItems();
|
||||
|
||||
if (this._shouldUpdateSelection) {
|
||||
this._updateSelected();
|
||||
}
|
||||
|
||||
// Let other interested parties know about the change so that
|
||||
// we don't have to recreate mutation observers everywhere.
|
||||
this.fire('iron-items-changed', mutation, {
|
||||
bubbles: false,
|
||||
cancelable: false
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
_activateHandler: function(e) {
|
||||
var t = e.target;
|
||||
var items = this.items;
|
||||
while (t && t != this) {
|
||||
var i = items.indexOf(t);
|
||||
if (i >= 0) {
|
||||
var value = this._indexToValue(i);
|
||||
this._itemActivate(value, t);
|
||||
return;
|
||||
}
|
||||
t = t.parentNode;
|
||||
}
|
||||
},
|
||||
|
||||
_itemActivate: function(value, item) {
|
||||
if (!this.fire('iron-activate',
|
||||
{selected: value, item: item}, {cancelable: true}).defaultPrevented) {
|
||||
this.select(value);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<link rel="import" href="../../components/polymer/polymer.html">
|
||||
<link rel="import" href="dicecloud-selectable.html">
|
||||
|
||||
<script>
|
||||
// jscs:disable
|
||||
/**
|
||||
`dicecloud-selector` implements DicecloudSelectableBehavior
|
||||
behaves like a simple iron-selector
|
||||
- No multi-select
|
||||
- Assumes attrForSelected = "name"
|
||||
- Behaves a little better with Blaze
|
||||
*/
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'dicecloud-selector',
|
||||
|
||||
behaviors: [
|
||||
Polymer.DicecloudSelectableBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user