From 8b061f7aa94e42778237ad3d5c4cedbab4ca8f84 Mon Sep 17 00:00:00 2001 From: Stefan Zermatten Date: Thu, 13 Jul 2017 15:53:03 +0200 Subject: [PATCH] Improved look and feel of effect editing --- .../lib/requestAnimationFramePolyfill.js | 28 +++++++ .../effects/effectEdit/effectEdit.html | 18 ++-- .../effects/effectEdit/effectEdit.js | 82 ++++++++++++------- .../dicecloud-selectable.html | 4 +- 4 files changed, 94 insertions(+), 38 deletions(-) create mode 100644 rpg-docs/client/lib/requestAnimationFramePolyfill.js diff --git a/rpg-docs/client/lib/requestAnimationFramePolyfill.js b/rpg-docs/client/lib/requestAnimationFramePolyfill.js new file mode 100644 index 00000000..0fb801e6 --- /dev/null +++ b/rpg-docs/client/lib/requestAnimationFramePolyfill.js @@ -0,0 +1,28 @@ +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating + +// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel + +// MIT license +var lastTime = 0; +var vendors = ["ms", "moz", "webkit", "o"]; +for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"]; + window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || + window[vendors[x] + "CancelRequestAnimationFrame"]; +} + +if (!window.requestAnimationFrame) +window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; +}; + +if (!window.cancelAnimationFrame) +window.cancelAnimationFrame = function(id) { + clearTimeout(id); +}; diff --git a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html index 3ae51b94..078cd946 100644 --- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html +++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html @@ -20,26 +20,28 @@
{{#each statGroups}} -
+
{{this}}
- {{#each stats}} - {{name}} - {{/each}} + + {{#each stats}} + {{name}} + {{/each}} + {{/each}} {{#if operations}} {{#each operations}} - {{name}} + {{name}} {{/each}} {{else}} {{#if showMultiplierOperations}} - Resistance - Vulnerability - Immunity + Resistance + Vulnerability + Immunity {{else}}
diff --git a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js index d18538fa..b47f7219 100644 --- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js +++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js @@ -149,47 +149,71 @@ Template.effectEdit.helpers({ effectValue: function(){ return this.calculation || this.value; }, + isGroupSelected: function(groupName, statName){ + var stat = statsDict[statName] + return stat && (stat.group === groupName); + }, }); +var setStat = function(statName, effectId){ + var setter = {stat: statName}; + var effect = Effects.findOne(this._id); + var group = statsDict[statName].group; + if (group === "Saving Throws" || group === "Skills"){ + // Skills must have a valid skill operation + if (!_.contains( + _.map(skillOperations, ao => ao.operation), + effect.operation + )){ + setter.operation = "add"; + } + } else if (group !== "Weakness/Resistance"){ + // Attributes must have a valid attribute operation + if (!_.contains( + _.map(attributeOperations, ao => ao.operation), + effect.operation + )){ + setter.operation = "base"; + } + } else { + // Weakness/Resistance must have a mul operation and value + if (effect.operation !== "mul"){ + setter.operation = "mul"; + } + if (!_.contains([0, 0.5, 2], effect.value)){ + setter.value = 0.5; + } + } + Effects.update(effectId, {$set: setter}); +}; + +var scrollAnimationId; +var scrollElementToView = element => { + var scrollFunction = function(){ + element.scrollIntoView(); + scrollAnimationId = requestAnimationFrame(scrollFunction); + }; + return scrollFunction; +} + Template.effectEdit.events({ "click #deleteButton": function(event, instance){ Effects.softRemoveNode(instance.data.id); GlobalUI.deletedToast(instance.data.id, "Effects", "Effect"); popDialogStack(); }, + "click .statGroupTitle": function(event, instance){ + var groupName = this.toString(); + var firstStat = statGroups[groupName][0].stat; + setStat(firstStat, instance.data.id); + scrollAnimationId = requestAnimationFrame(scrollElementToView(event.target)); + _.delay(() => cancelAnimationFrame(scrollAnimationId), 300); + }, "iron-select .statMenu": function(event){ var detail = event.originalEvent.detail; var statName = detail.item.getAttribute("name"); if (statName == this.stat) return; - var setter = {stat: statName}; - var group = Blaze.getData(detail.item).group; - var effect = Effects.findOne(this._id); - if (group === "Saving Throws" || group === "Skills"){ - // Skills must have a valid skill operation - if (!_.contains( - _.map(skillOperations, ao => ao.operation), - effect.operation - )){ - setter.operation = "add"; - } - } else if (group !== "Weakness/Resistance"){ - // Attributes must have a valid attribute operation - if (!_.contains( - _.map(attributeOperations, ao => ao.operation), - effect.operation - )){ - setter.operation = "base"; - } - } else { - // Weakness/Resistance must have a mul operation and value - if (effect.operation !== "mul"){ - setter.operation = "mul"; - } - if (!_.contains([0, 0.5, 2], effect.value)){ - setter.value = 0.5; - } - } - Effects.update(this._id, {$set: setter}); + setStat(statName, this._id); }, "iron-select .operationMenu": function(event){ var detail = event.originalEvent.detail; diff --git a/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html b/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html index fceeba7e..c88c3a30 100644 --- a/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html +++ b/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html @@ -249,7 +249,9 @@ }, _updateItems: function() { - var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*'); + var nodes = this.selectable + ? Polymer.dom(this).querySelectorAll(this.selectable) + : Polymer.dom(this).queryDistributedElements('*'); nodes = Array.prototype.filter.call(nodes, this._bindFilterItem); this._setItems(nodes); },