Mixing
Custom Component run function before el is loaded, but before loaded event is emitted
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am writing a custom function that requires all components to be initialized (including itself).
Once all components are initialized, but before the loaded event is emitted, I want to run some custom logic over the el and then release the loaded event.
Is there a way to deal with this and is there a custom event like 'components-loaded'
I am trying to avoid the loaded event as it would interfere with other logic that requires this event while still monitoring the dom.
AFRAME.registerComponent('cool-component', {
init: function() {
this.preloadBound = this._preload.bind(this);
this.el.addEventListener('components-loaded', this.preloadBound, {once: true});
this.el.addEventListener('componentinitialized', this.preloadBound, {once: true});
this.el.addEventListener('componentchanged', this.preloadBound, {once: true});
this.el.addEventListener('componentremoved', this.preloadBound, {once: true});
this.el.addEventListener('child-attached', this.preloadBound, {once: true});
this.el.addEventListener('child-detached', this.preloadBound, {once: true});
this.preloaded = false; <-- CREATED BOOL FLAG
},
_preload: function() {
//do some work here
this.preloaded = true;
}
exposed:function(){ <-- UPDATED THIS FUNCTION
return new Promise((resolve,reject)=>{
if(!this.preloaded){
setTimeout(() => {
this.exposed().then(resolve);
}, 200);
}
else{
//do some work based on the work done in the preload
resolve()
}
});
}
});
aframe
asked Jan 3 at 13:13
BeyerzBeyerz
4871718
add a comment |
0
I am writing a custom function that requires all components to be initialized (including itself).
Once all components are initialized, but before the loaded event is emitted, I want to run some custom logic over the el and then release the loaded event.
Is there a way to deal with this and is there a custom event like 'components-loaded'
I am trying to avoid the loaded event as it would interfere with other logic that requires this event while still monitoring the dom.
AFRAME.registerComponent('cool-component', {
init: function() {
this.preloadBound = this._preload.bind(this);
this.el.addEventListener('components-loaded', this.preloadBound, {once: true});
this.el.addEventListener('componentinitialized', this.preloadBound, {once: true});
this.el.addEventListener('componentchanged', this.preloadBound, {once: true});
this.el.addEventListener('componentremoved', this.preloadBound, {once: true});
this.el.addEventListener('child-attached', this.preloadBound, {once: true});
this.el.addEventListener('child-detached', this.preloadBound, {once: true});
this.preloaded = false; <-- CREATED BOOL FLAG
},
_preload: function() {
//do some work here
this.preloaded = true;
}
exposed:function(){ <-- UPDATED THIS FUNCTION
return new Promise((resolve,reject)=>{
if(!this.preloaded){
setTimeout(() => {
this.exposed().then(resolve);
}, 200);
}
else{
//do some work based on the work done in the preload
resolve()
}
});
}
});
aframe
asked Jan 3 at 13:13
BeyerzBeyerz
4871718
The only way I have managed to solve this is by making the exposed function return a promise, that validates the preload function has completed. in the event it has not completed, it then calls itself with the resolve using setTimeout
– Beyerz
Jan 3 at 13:34
add a comment |
0
0
0
I am writing a custom function that requires all components to be initialized (including itself).
Once all components are initialized, but before the loaded event is emitted, I want to run some custom logic over the el and then release the loaded event.
Is there a way to deal with this and is there a custom event like 'components-loaded'
I am trying to avoid the loaded event as it would interfere with other logic that requires this event while still monitoring the dom.
AFRAME.registerComponent('cool-component', {
init: function() {
this.preloadBound = this._preload.bind(this);
this.el.addEventListener('components-loaded', this.preloadBound, {once: true});
this.el.addEventListener('componentinitialized', this.preloadBound, {once: true});
this.el.addEventListener('componentchanged', this.preloadBound, {once: true});
this.el.addEventListener('componentremoved', this.preloadBound, {once: true});
this.el.addEventListener('child-attached', this.preloadBound, {once: true});
this.el.addEventListener('child-detached', this.preloadBound, {once: true});
this.preloaded = false; <-- CREATED BOOL FLAG
},
_preload: function() {
//do some work here
this.preloaded = true;
}
exposed:function(){ <-- UPDATED THIS FUNCTION
return new Promise((resolve,reject)=>{
if(!this.preloaded){
setTimeout(() => {
this.exposed().then(resolve);
}, 200);
}
else{
//do some work based on the work done in the preload
resolve()
}
});
}
});
aframe
asked Jan 3 at 13:13
BeyerzBeyerz
4871718
I am writing a custom function that requires all components to be initialized (including itself).
Once all components are initialized, but before the loaded event is emitted, I want to run some custom logic over the el and then release the loaded event.
Is there a way to deal with this and is there a custom event like 'components-loaded'
I am trying to avoid the loaded event as it would interfere with other logic that requires this event while still monitoring the dom.
AFRAME.registerComponent('cool-component', {
init: function() {
this.preloadBound = this._preload.bind(this);
this.el.addEventListener('components-loaded', this.preloadBound, {once: true});
this.el.addEventListener('componentinitialized', this.preloadBound, {once: true});
this.el.addEventListener('componentchanged', this.preloadBound, {once: true});
this.el.addEventListener('componentremoved', this.preloadBound, {once: true});
this.el.addEventListener('child-attached', this.preloadBound, {once: true});
this.el.addEventListener('child-detached', this.preloadBound, {once: true});
this.preloaded = false; <-- CREATED BOOL FLAG
},
_preload: function() {
//do some work here
this.preloaded = true;
}
exposed:function(){ <-- UPDATED THIS FUNCTION
return new Promise((resolve,reject)=>{
if(!this.preloaded){
setTimeout(() => {
this.exposed().then(resolve);
}, 200);
}
else{
//do some work based on the work done in the preload
resolve()
}
});
}
});
aframe
aframe
asked Jan 3 at 13:13
BeyerzBeyerz
4871718
asked Jan 3 at 13:13
BeyerzBeyerz
4871718
edited Jan 3 at 18:56
Beyerz
asked Jan 3 at 13:13
BeyerzBeyerz
4871718
asked Jan 3 at 13:13
BeyerzBeyerz
4871718
asked Jan 3 at 13:13
BeyerzBeyerz
4871718
4871718
The only way I have managed to solve this is by making the exposed function return a promise, that validates the preload function has completed. in the event it has not completed, it then calls itself with the resolve using setTimeout
– Beyerz
Jan 3 at 13:34
add a comment |
The only way I have managed to solve this is by making the exposed function return a promise, that validates the preload function has completed. in the event it has not completed, it then calls itself with the resolve using setTimeout
– Beyerz
Jan 3 at 13:34
The only way I have managed to solve this is by making the exposed function return a promise, that validates the preload function has completed. in the event it has not completed, it then calls itself with the resolve using setTimeout
– Beyerz
Jan 3 at 13:34
The only way I have managed to solve this is by making the exposed function return a promise, that validates the preload function has completed. in the event it has not completed, it then calls itself with the resolve using setTimeout
– Beyerz
Jan 3 at 13:34
add a comment |
1 Answer
1
active
oldest
votes
0
You could use events instead of a timer - emit an event when the preloaded stuff is done:
_preload: function() {
//do some work here
emit('preloaded_done')
this.preloaded = true;
},
exposed:function(){
if (!this.preloaded) {
this.el.addEventListener('preloaded_done', this.exposed)
return;
}
// all things that are needed to be done after the preload
}
This way the exposed function will be executed after the preloaded stuff is done.
Or you could store the events in an array
init: function() {
// ... binds and stuff
this.cachedEvents =
this.el.addEventListener('loaded', this.cacheEvents)
stuffBeforeEmittingEvents()
},
cacheEvents: function(e) {
this.cachedEvents.push(e)
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
}
and once You do your stuff, just loop through and emit them
for(i = 0; i < this.cachedEvents.length; i++) {
this.el.emit(this.cachedEvents[i].type, this.cachedEvents[i])
}
Something like this:
init: function() {
this.events =
this.stuff = this.stuff.bind(this);
this.cacheEvents = this.cacheEvents.bind(this);
this.emitCachedEvents = this.emitCachedEvents.bind(this);
this.el.addEventListener('loaded', this.cacheEvents)
this.stuff()
},
stuff: function() {
// whatever you need to do
this.emitCachedEvents()
},
cacheEvents(e) {
this.events.push(e)
// prevent bubbling + catching the same event
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
},
emitCachedEvents() {
for (let i = 0; i < this.events.length; i++) {
// primitive, may require polyfill - emit(name, data)
emit(this.events[i].type, this.events[i])
}
}
Check it out in my fiddle.
answered Jan 3 at 14:09
Piotr Adam MilewskiPiotr Adam Milewski
5,92321228
I'm trying to avoid deferring the loaded event as this would affect other parts of the system in ways I have not yet considered (and don't really want to think about). I have updated my question to show my current solution using the Promise interface
– Beyerz
Jan 3 at 18:57
@Beyerz I have another idea based on what i saw at Don McCurdys physics system.
– Piotr Adam Milewski
Jan 3 at 22:49
I will definitely look into this library and take some pointers. I have already seen some aspects that will assist me.
– Beyerz
Jan 6 at 8:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023013%2fcustom-component-run-function-before-el-is-loaded-but-before-loaded-event-is-em%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You could use events instead of a timer - emit an event when the preloaded stuff is done:
_preload: function() {
//do some work here
emit('preloaded_done')
this.preloaded = true;
},
exposed:function(){
if (!this.preloaded) {
this.el.addEventListener('preloaded_done', this.exposed)
return;
}
// all things that are needed to be done after the preload
}
This way the exposed function will be executed after the preloaded stuff is done.
Or you could store the events in an array
init: function() {
// ... binds and stuff
this.cachedEvents =
this.el.addEventListener('loaded', this.cacheEvents)
stuffBeforeEmittingEvents()
},
cacheEvents: function(e) {
this.cachedEvents.push(e)
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
}
and once You do your stuff, just loop through and emit them
for(i = 0; i < this.cachedEvents.length; i++) {
this.el.emit(this.cachedEvents[i].type, this.cachedEvents[i])
}
Something like this:
init: function() {
this.events =
this.stuff = this.stuff.bind(this);
this.cacheEvents = this.cacheEvents.bind(this);
this.emitCachedEvents = this.emitCachedEvents.bind(this);
this.el.addEventListener('loaded', this.cacheEvents)
this.stuff()
},
stuff: function() {
// whatever you need to do
this.emitCachedEvents()
},
cacheEvents(e) {
this.events.push(e)
// prevent bubbling + catching the same event
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
},
emitCachedEvents() {
for (let i = 0; i < this.events.length; i++) {
// primitive, may require polyfill - emit(name, data)
emit(this.events[i].type, this.events[i])
}
}
Check it out in my fiddle.
answered Jan 3 at 14:09
Piotr Adam MilewskiPiotr Adam Milewski
5,92321228
I'm trying to avoid deferring the loaded event as this would affect other parts of the system in ways I have not yet considered (and don't really want to think about). I have updated my question to show my current solution using the Promise interface
– Beyerz
Jan 3 at 18:57
@Beyerz I have another idea based on what i saw at Don McCurdys physics system.
– Piotr Adam Milewski
Jan 3 at 22:49
I will definitely look into this library and take some pointers. I have already seen some aspects that will assist me.
– Beyerz
Jan 6 at 8:19
add a comment |
0
You could use events instead of a timer - emit an event when the preloaded stuff is done:
_preload: function() {
//do some work here
emit('preloaded_done')
this.preloaded = true;
},
exposed:function(){
if (!this.preloaded) {
this.el.addEventListener('preloaded_done', this.exposed)
return;
}
// all things that are needed to be done after the preload
}
This way the exposed function will be executed after the preloaded stuff is done.
Or you could store the events in an array
init: function() {
// ... binds and stuff
this.cachedEvents =
this.el.addEventListener('loaded', this.cacheEvents)
stuffBeforeEmittingEvents()
},
cacheEvents: function(e) {
this.cachedEvents.push(e)
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
}
and once You do your stuff, just loop through and emit them
for(i = 0; i < this.cachedEvents.length; i++) {
this.el.emit(this.cachedEvents[i].type, this.cachedEvents[i])
}
Something like this:
init: function() {
this.events =
this.stuff = this.stuff.bind(this);
this.cacheEvents = this.cacheEvents.bind(this);
this.emitCachedEvents = this.emitCachedEvents.bind(this);
this.el.addEventListener('loaded', this.cacheEvents)
this.stuff()
},
stuff: function() {
// whatever you need to do
this.emitCachedEvents()
},
cacheEvents(e) {
this.events.push(e)
// prevent bubbling + catching the same event
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
},
emitCachedEvents() {
for (let i = 0; i < this.events.length; i++) {
// primitive, may require polyfill - emit(name, data)
emit(this.events[i].type, this.events[i])
}
}
Check it out in my fiddle.
answered Jan 3 at 14:09
Piotr Adam MilewskiPiotr Adam Milewski
5,92321228
I'm trying to avoid deferring the loaded event as this would affect other parts of the system in ways I have not yet considered (and don't really want to think about). I have updated my question to show my current solution using the Promise interface
– Beyerz
Jan 3 at 18:57
@Beyerz I have another idea based on what i saw at Don McCurdys physics system.
– Piotr Adam Milewski
Jan 3 at 22:49
I will definitely look into this library and take some pointers. I have already seen some aspects that will assist me.
– Beyerz
Jan 6 at 8:19
add a comment |
0
0
0
You could use events instead of a timer - emit an event when the preloaded stuff is done:
_preload: function() {
//do some work here
emit('preloaded_done')
this.preloaded = true;
},
exposed:function(){
if (!this.preloaded) {
this.el.addEventListener('preloaded_done', this.exposed)
return;
}
// all things that are needed to be done after the preload
}
This way the exposed function will be executed after the preloaded stuff is done.
Or you could store the events in an array
init: function() {
// ... binds and stuff
this.cachedEvents =
this.el.addEventListener('loaded', this.cacheEvents)
stuffBeforeEmittingEvents()
},
cacheEvents: function(e) {
this.cachedEvents.push(e)
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
}
and once You do your stuff, just loop through and emit them
for(i = 0; i < this.cachedEvents.length; i++) {
this.el.emit(this.cachedEvents[i].type, this.cachedEvents[i])
}
Something like this:
init: function() {
this.events =
this.stuff = this.stuff.bind(this);
this.cacheEvents = this.cacheEvents.bind(this);
this.emitCachedEvents = this.emitCachedEvents.bind(this);
this.el.addEventListener('loaded', this.cacheEvents)
this.stuff()
},
stuff: function() {
// whatever you need to do
this.emitCachedEvents()
},
cacheEvents(e) {
this.events.push(e)
// prevent bubbling + catching the same event
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
},
emitCachedEvents() {
for (let i = 0; i < this.events.length; i++) {
// primitive, may require polyfill - emit(name, data)
emit(this.events[i].type, this.events[i])
}
}
Check it out in my fiddle.
answered Jan 3 at 14:09
Piotr Adam MilewskiPiotr Adam Milewski
5,92321228
You could use events instead of a timer - emit an event when the preloaded stuff is done:
_preload: function() {
//do some work here
emit('preloaded_done')
this.preloaded = true;
},
exposed:function(){
if (!this.preloaded) {
this.el.addEventListener('preloaded_done', this.exposed)
return;
}
// all things that are needed to be done after the preload
}
This way the exposed function will be executed after the preloaded stuff is done.
Or you could store the events in an array
init: function() {
// ... binds and stuff
this.cachedEvents =
this.el.addEventListener('loaded', this.cacheEvents)
stuffBeforeEmittingEvents()
},
cacheEvents: function(e) {
this.cachedEvents.push(e)
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
}
and once You do your stuff, just loop through and emit them
for(i = 0; i < this.cachedEvents.length; i++) {
this.el.emit(this.cachedEvents[i].type, this.cachedEvents[i])
}
Something like this:
init: function() {
this.events =
this.stuff = this.stuff.bind(this);
this.cacheEvents = this.cacheEvents.bind(this);
this.emitCachedEvents = this.emitCachedEvents.bind(this);
this.el.addEventListener('loaded', this.cacheEvents)
this.stuff()
},
stuff: function() {
// whatever you need to do
this.emitCachedEvents()
},
cacheEvents(e) {
this.events.push(e)
// prevent bubbling + catching the same event
this.el.removeEventListener(e.type, this.cacheEvents)
e.stopPropagation()
},
emitCachedEvents() {
for (let i = 0; i < this.events.length; i++) {
// primitive, may require polyfill - emit(name, data)
emit(this.events[i].type, this.events[i])
}
}
Check it out in my fiddle.
answered Jan 3 at 14:09
Piotr Adam MilewskiPiotr Adam Milewski
5,92321228
edited Jan 3 at 22:46
answered Jan 3 at 14:09
Piotr Adam MilewskiPiotr Adam Milewski
5,92321228
answered Jan 3 at 14:09
Piotr Adam MilewskiPiotr Adam Milewski
5,92321228
answered Jan 3 at 14:09
Piotr Adam MilewskiPiotr Adam Milewski
5,92321228
5,92321228
I'm trying to avoid deferring the loaded event as this would affect other parts of the system in ways I have not yet considered (and don't really want to think about). I have updated my question to show my current solution using the Promise interface
– Beyerz
Jan 3 at 18:57
@Beyerz I have another idea based on what i saw at Don McCurdys physics system.
– Piotr Adam Milewski
Jan 3 at 22:49
I will definitely look into this library and take some pointers. I have already seen some aspects that will assist me.
– Beyerz
Jan 6 at 8:19
add a comment |
I'm trying to avoid deferring the loaded event as this would affect other parts of the system in ways I have not yet considered (and don't really want to think about). I have updated my question to show my current solution using the Promise interface
– Beyerz
Jan 3 at 18:57
@Beyerz I have another idea based on what i saw at Don McCurdys physics system.
– Piotr Adam Milewski
Jan 3 at 22:49
I will definitely look into this library and take some pointers. I have already seen some aspects that will assist me.
– Beyerz
Jan 6 at 8:19
I'm trying to avoid deferring the loaded event as this would affect other parts of the system in ways I have not yet considered (and don't really want to think about). I have updated my question to show my current solution using the Promise interface
– Beyerz
Jan 3 at 18:57
I'm trying to avoid deferring the loaded event as this would affect other parts of the system in ways I have not yet considered (and don't really want to think about). I have updated my question to show my current solution using the Promise interface
– Beyerz
Jan 3 at 18:57
@Beyerz I have another idea based on what i saw at Don McCurdys physics system.
– Piotr Adam Milewski
Jan 3 at 22:49
@Beyerz I have another idea based on what i saw at Don McCurdys physics system.
– Piotr Adam Milewski
Jan 3 at 22:49
I will definitely look into this library and take some pointers. I have already seen some aspects that will assist me.
– Beyerz
Jan 6 at 8:19
I will definitely look into this library and take some pointers. I have already seen some aspects that will assist me.
– Beyerz
Jan 6 at 8:19
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023013%2fcustom-component-run-function-before-el-is-loaded-but-before-loaded-event-is-em%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The only way I have managed to solve this is by making the exposed function return a promise, that validates the preload function has completed. in the event it has not completed, it then calls itself with the resolve using setTimeout
– Beyerz
Jan 3 at 13:34