diff --git a/components/event-set/dist/aframe-event-set-component.js b/components/event-set/dist/aframe-event-set-component.js
index c6ff71a4..40b2c3f3 100644
--- a/components/event-set/dist/aframe-event-set-component.js
+++ b/components/event-set/dist/aframe-event-set-component.js
@@ -107,7 +107,58 @@ return /******/ (function(modules) { // webpackBootstrap
/* global AFRAME */
-var styleParser = AFRAME.utils.styleParser;
+
+// AFRAME styleParse has one issue: it transforms hyphenated keys to camel-case.
+// This is a problem when those keys are component names, as A-Frame component
+// names often include hyphens, and are not converted internally to camel case.
+
+// To compensate for this, we post-process the data from the parser:
+// - analyze the first part of the string, represeting the component
+// - if translating this out of camel case to a dashed value gives
+// a better match against known A-Frame components, then use the dashed value
+// for the component name.
+
+// This solution is not 100% robust, but good enough for most circumstances.
+// - Will not handle component names that have a mix of camel case and dashes
+// e.g. example-componentOne
+// - Could give incorrect results in case where two components have names that
+// only differ by their casing.
+// e.g. example-component-two & exampleComponentTwo
+var styleParse = function styleParse(value) {
+
+ function dashLowerCase(str) {
+ return '-' + str[0].toLowerCase();
+ }
+
+ function fromCamelCase(str) {
+ return str.replace(/([A-Z])/g, dashLowerCase);
+ }
+
+ var data = AFRAME.utils.styleParser.parse(value);
+
+ var key;
+ var component;
+ var remainder;
+ var dashComponent;
+ var dashKey;
+
+ for (key in data) {
+ component = key.split('.')[0];
+ remainder = key.split('.').slice(1).join('.');
+ dashComponent = fromCamelCase(component);
+ if (component === dashComponent) {
+ continue;
+ }
+
+ if (AFRAME.components[dashComponent] && !AFRAME.components[component]) {
+ dashKey = dashComponent.concat('.', remainder);
+ data[dashKey] = data[key];
+ delete data[key];
+ }
+ }
+
+ return data;
+};
if (typeof AFRAME === 'undefined') {
throw new Error('Component attempted to register before AFRAME was available.');
@@ -117,7 +168,7 @@ AFRAME.registerComponent('event-set', {
schema: {
default: '',
parse: function parse(value) {
- return styleParser.parse(value);
+ return styleParse(value);
}
},
diff --git a/components/event-set/dist/aframe-event-set-component.min.js b/components/event-set/dist/aframe-event-set-component.min.js
index 7b69f566..93102bb0 100644
--- a/components/event-set/dist/aframe-event-set-component.min.js
+++ b/components/event-set/dist/aframe-event-set-component.min.js
@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";var r=AFRAME.utils.styleParser;if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("event-set",{schema:{default:"",parse:function(e){return r.parse(e)}},multiple:!0,init:function(){this.eventHandler=null,this.eventName=null},update:function(e){this.removeEventListener(),this.updateEventListener(),this.addEventListener()},remove:function(){this.removeEventListener()},pause:function(){this.removeEventListener()},play:function(){this.addEventListener()},updateEventListener:function(){var e,t,n,r=this,i=this.data,o=this.el;e=i._event||this.id,t=i._target,n=t?o.sceneEl.querySelector(t):o,this.eventName=e;var s=function(){var e;for(e in i)"_event"!==e&&"_target"!==e&&AFRAME.utils.entity.setComponentProperty.call(r,n,e,i[e])};isNaN(i._delay)?this.eventHandler=s:this.eventHandler=function(){setTimeout(s,parseFloat(i._delay))}},addEventListener:function(){this.el.addEventListener(this.eventName,this.eventHandler)},removeEventListener:function(){this.el.removeEventListener(this.eventName,this.eventHandler)}})}])});
\ No newline at end of file
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("event-set",{schema:{default:"",parse:function(e){return function(e){function t(e){return"-"+e[0].toLowerCase()}var n,r,i,o,s=AFRAME.utils.styleParser.parse(e);for(n in s)r=n.split(".")[0],i=n.split(".").slice(1).join("."),r!==(o=r.replace(/([A-Z])/g,t))&&AFRAME.components[o]&&!AFRAME.components[r]&&(s[o.concat(".",i)]=s[n],delete s[n]);return s}(e)}},multiple:!0,init:function(){this.eventHandler=null,this.eventName=null},update:function(e){this.removeEventListener(),this.updateEventListener(),this.addEventListener()},remove:function(){this.removeEventListener()},pause:function(){this.removeEventListener()},play:function(){this.addEventListener()},updateEventListener:function(){var e,t,n,r=this,i=this.data,o=this.el;e=i._event||this.id,t=i._target,n=t?o.sceneEl.querySelector(t):o,this.eventName=e;var s=function(){var e;for(e in i)"_event"!==e&&"_target"!==e&&AFRAME.utils.entity.setComponentProperty.call(r,n,e,i[e])};isNaN(i._delay)?this.eventHandler=s:this.eventHandler=function(){setTimeout(s,parseFloat(i._delay))}},addEventListener:function(){this.el.addEventListener(this.eventName,this.eventHandler)},removeEventListener:function(){this.el.removeEventListener(this.eventName,this.eventHandler)}})}])}));
\ No newline at end of file
diff --git a/components/event-set/examples/basic/index.html b/components/event-set/examples/basic/index.html
index 2befd3cc..984a9e04 100644
--- a/components/event-set/examples/basic/index.html
+++ b/components/event-set/examples/basic/index.html
@@ -3,7 +3,7 @@
Cursor
-
+
diff --git a/components/event-set/examples/hyphenated-component/index.html b/components/event-set/examples/hyphenated-component/index.html
new file mode 100644
index 00000000..f0a4ae12
--- /dev/null
+++ b/components/event-set/examples/hyphenated-component/index.html
@@ -0,0 +1,56 @@
+
+
+
+
+ Cursor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/event-set/examples/hyphenated-component/preview.gif b/components/event-set/examples/hyphenated-component/preview.gif
new file mode 100644
index 00000000..9e6daa85
Binary files /dev/null and b/components/event-set/examples/hyphenated-component/preview.gif differ
diff --git a/components/event-set/index.js b/components/event-set/index.js
index 6d99243f..1d3ac17c 100644
--- a/components/event-set/index.js
+++ b/components/event-set/index.js
@@ -1,5 +1,52 @@
/* global AFRAME */
-var styleParser = AFRAME.utils.styleParser;
+
+// AFRAME styleParse has one issue: it transforms hyphenated keys to camel-case.
+// This is a problem when those keys are component names, as A-Frame component
+// names often include hyphens, and are not converted internally to camel case.
+
+// To compensate for this, we post-process the data from the parser:
+// - analyze the first part of the string, represeting the component
+// - if translating this out of camel case to a dashed value gives
+// a better match against known A-Frame components, then use the dashed value
+// for the component name.
+
+// This solution is not 100% robust, but good enough for most circumstances.
+// - Will not handle component names that have a mix of camel case and dashes
+// e.g. example-componentOne
+// - Could give incorrect results in case where two components have names that
+// only differ by their casing.
+// e.g. example-component-two & exampleComponentTwo
+var styleParse = function(value) {
+
+ function dashLowerCase (str) { return '-' + str[0].toLowerCase(); }
+
+ function fromCamelCase (str) {
+ return str.replace(/([A-Z])/g, dashLowerCase);
+ }
+
+ const data = AFRAME.utils.styleParser.parse(value);
+
+ var key;
+ var component;
+ var remainder;
+ var dashComponent;
+ var dashKey;
+
+ for (key in data) {
+ component = key.split('.')[0];
+ remainder = key.split('.').slice(1).join('.');
+ dashComponent = fromCamelCase(component);
+ if (component === dashComponent) { continue; }
+
+ if (AFRAME.components[dashComponent] && !AFRAME.components[component]) {
+ dashKey = dashComponent.concat('.', remainder);
+ data[dashKey] = data[key];
+ delete data[key];
+ }
+ }
+
+ return(data);
+}
if (typeof AFRAME === 'undefined') {
throw new Error('Component attempted to register before AFRAME was available.');
@@ -9,7 +56,7 @@ AFRAME.registerComponent('event-set', {
schema: {
default: '',
parse: function (value) {
- return styleParser.parse(value);
+ return styleParse(value);
}
},