Well, I'm not getting the sync behavior I was expecting.....even though I
should by the laws of event loop. So, I resorted back to using a promise.
So far so good...although it's a little premature I'm excited that this
will fix it so I'll post my new code now. Coming from python, I'm not a fan
of functions over 5 lines...but in this case it's a hackish fix so anything
goes.
function makeGlobalElements() {
var noNameFoo = new Promise(function(resolve, reject) {
//elements is not routing list, routing list is elementList
function _createElements() {
panel = document.querySelector('paper-header-panel[main]');
rippleElement = document.querySelector('#ripple-element');
toolbar = document.querySelector('#main-toolbar');
headerName = document.querySelector('#name-title');
drawer = document.querySelector('paper-drawer-panel');
mainPanelContent = document.querySelector('#mainPanelContent');
}
var iteration = 1;
var completed = false;
function _checkElements() {
var elements = [panel, rippleElement, toolbar, headerName,
drawer, mainPanelContent];
completed = elements.every(function(el) {
if (el !== null && typeof el !== 'undefined' && el.nodeType === 1) {
return true;
} else {
return false;
}
});
}
var NUMBER_CHECKS = 100;
do {
_createElements();
_checkElements();
iteration++;
if (!completed) {
console.log(iteration);
console.log(iteration < NUMBER_CHECKS && completed);
console.log('Elements weren\'t ready, running again');
console.log('Trying attempt # ' + iteration);
} else {
console.log('yay! elements good');
resolve();
}
} while(iteration < NUMBER_CHECKS && !completed);
});
return noNameFoo;
};
function attatchListeners() {
panel.addEventListener("content-scroll", moveTitle);
['webkitAnimationEnd', 'animationend']
.forEach(function(vendor) {
mainPanelContent.addEventListener(vendor, function (animationEvent) {
if (animationEvent.animationName === "slide-down") {
afterSlideDown.runStack();
mainPanelContent.classList.remove('slide-down-now');
}
});
headerName.addEventListener(vendor, function() {
headerName.classList.remove('fade-title');
});
});
};
//polymer bug where elements aren't ready in time
function initializeYay() {
makeGlobalElements().then(function() {;
attatchListeners();
setUpRoutes();
removeSplash();
//fetchPdfjs();
});
}
if (!webComponentsSupported) {
document.addEventListener('WebComponentsReady', initializeYay);
} else {
initializeYay();
}
On Saturday, January 2, 2016 at 9:15:25 AM UTC-6, Darin Hensley wrote:
>
> Thank you for the suggestion, but there is no reason to use a promise
> here. The element queries are blocking operations, because they are none
> I/O. This means the operation is already sync. To use a promise on a sync
> operation to make it a sync operation is unnecessary code.
>
> On Saturday, January 2, 2016 at 4:29:19 AM UTC-6, David Waterman wrote:
>>
>> Just thought I'd mention this article on promises...it mentions their use
>> for synchronous stuff too (mixing them), so thought it might be of interest
>> :
>> <
>> http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html?utm_source=javascriptweekly&utm_medium=email
>> >
>>
>> Max.
>>
>> On Sat, 2 Jan 2016, 06:27 Darin Hensley <[email protected]> wrote:
>>
>>> Ok, that issue just hit me again so here it is with the details:
>>>
>>> https://github.com/Polymer/polymer/issues/3262
>>>
>>>
>>> On Wednesday, December 30, 2015 at 5:31:51 AM UTC-6, David Waterman
>>> wrote:
>>>
>>>> Did you file a bug?
>>>>
>>>> Thanks,
>>>>
>>>> Max.
>>>>
>>>> On Sun, 27 Dec 2015 at 21:33 Darin Hensley <[email protected]> wrote:
>>>>
>>> Thanks, I originally did this but I realized using a promise is a bad
>>>>> fit. The reason being, the queries used are blocking since they are non
>>>>> I/O, which means sync. I am still implementing a function that is
>>>>> checking
>>>>> and redoing if so, but without a promise.
>>>>>
>>>>> However, I feel that this might be a bug in polymer because when dom
>>>>> manipulation js script is placed last in chrome, then all elements are
>>>>> garuanteed to be ready. This is from documentation(in the 0.5 to 1.0
>>>>> migration docs). I will file a bug tonight.
>>>>>
>>>>>
>>>>>
>>>>> On Sunday, December 27, 2015 at 9:27:48 PM UTC, David Waterman wrote:
>>>>>
>>>>>> I just thought that my approach to this issue would be to create a
>>>>>> promise for each event (each event handler resolves its promise), and
>>>>>> then
>>>>>> do Promise.all(). If you do this, you can test for native support of web
>>>>>> components which means 'webcomponentsready' doesn't fire at all[0], and
>>>>>> resolve it immediately, and your code will still work when Polymer
>>>>>> change
>>>>>> to using native web components...
>>>>>>
>>>>>> Max.
>>>>>> [0] <
>>>>>> https://www.polymer-project.org/1.0/docs/migration.html#polymer-ready
>>>>>> >
>>>>>>
>>>>>> On Sun, 27 Dec 2015 at 03:44 Darin Hensley <[email protected]>
>>>>>> wrote:
>>>>>>
>>>>> It's been working for many refreshes...but it just happened again... I
>>>>>>> got 'Uncaught TypeError: Cannot read property 'addEventListener' of
>>>>>>> undefined' for 'panel.addEventListener("content-scroll", moveTitle);'.
>>>>>>> This
>>>>>>> is in chrome where the initialize.js script is loaded last in the
>>>>>>> index.html.
>>>>>>>
>>>>>>> function makeGlobalElements() {
>>>>>>> //elements is not routing list, routing list is elementList
>>>>>>>
>>>>>>> panel = Polymer.dom(document.rootElement).querySelector(
>>>>>>> 'paper-header-panel[main]');
>>>>>>> rippleElement = Polymer.dom(document.rootElement).querySelector(
>>>>>>> '#ripple-element');
>>>>>>> toolbar = Polymer.dom(document.rootElement).querySelector(
>>>>>>> '#main-toolbar');
>>>>>>> headerName = Polymer.dom(document.rootElement).querySelector(
>>>>>>> '#name-title');
>>>>>>> drawer = Polymer.dom(document.rootElement).querySelector(
>>>>>>> 'paper-drawer-panel');
>>>>>>> mainPanelContent = Polymer.dom(document.rootElement).querySelector
>>>>>>> ('#mainPanelContent');
>>>>>>>
>>>>>>> };
>>>>>>>
>>>>>>>
>>>>>>> function attatchListeners() {
>>>>>>> panel.addEventListener("content-scroll", moveTitle);
>>>>>>>
>>>>>>> ....
>>>>>>>
>>>>>>>
>>>>>>> function initializeYay() {
>>>>>>> makeGlobalElements();
>>>>>>> attatchListeners();
>>>>>>> setUpRoutes();
>>>>>>> removeSplash();
>>>>>>> //fetchPdfjs();
>>>>>>> }
>>>>>>>
>>>>>>> if (!webComponentsSupported) {
>>>>>>> document.addEventListener('WebComponentsReady', initializeYay);
>>>>>>> } else {
>>>>>>> initializeYay();
>>>>>>> page('/portfolio');
>>>>>>> }
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> ----
>>>>>>>
>>>>>>> On Friday, December 25, 2015 at 9:37:55 AM UTC-6, Eric Bidelman
>>>>>>> wrote:
>>>>>>>
>>>>>>>> You can attach listeners to elements before they're upgraded and
>>>>>>>> ready. That's a nice property of custom elements and DOM events.
>>>>>>>> Waiting to
>>>>>>>> attach until WCR means you may miss the event the first time it's
>>>>>>>> fired.
>>>>>>>>
>>>>>>>> On Thu, Dec 24, 2015, 10:32 PM Darin Hensley <[email protected]>
>>>>>>>> wrote:
>>>>>>>>
>>>>>>> I am having issues(not consistent....random) where the elements are
>>>>>>>>> not ready when I attach the listeners. I placed a setTimeout to try
>>>>>>>>> and
>>>>>>>>> compensate the random race condition. Should these elements be ready
>>>>>>>>> during
>>>>>>>>> the time of their queries when WebComponentsReady fires or with the
>>>>>>>>> initialize.js script placed last at the bottom of the index.html?
>>>>>>>>> function makeGlobalElements() {
>>>>>>>>> //elements is not routing list, routing list is elementList
>>>>>>>>> panel = document.querySelector('paper-header-panel[main]');
>>>>>>>>> rippleElement = document.getElementById('ripple-element');
>>>>>>>>> toolbar = document.querySelector('#main-toolbar');
>>>>>>>>> headerName = document.getElementById('name-title');
>>>>>>>>> drawer = document.querySelector('paper-drawer-panel');
>>>>>>>>> mainPanelContent = document.getElementById('mainPanelContent');
>>>>>>>>> };
>>>>>>>>>
>>>>>>>>> function attatchListeners() {
>>>>>>>>> panel.addEventListener("content-scroll", moveTitle);
>>>>>>>>> ['webkitAnimationEnd', 'animationend']
>>>>>>>>> .forEach(function(vendor) {
>>>>>>>>> mainPanelContent.addEventListener(vendor, function
>>>>>>>>> (animationEvent) {
>>>>>>>>> if (animationEvent.animationName === "slide-down") {
>>>>>>>>> afterSlideDown.runStack();
>>>>>>>>> mainPanelContent.classList.remove('slide-down-now');
>>>>>>>>> }
>>>>>>>>> });
>>>>>>>>> headerName.addEventListener(vendor, function() {
>>>>>>>>> headerName.classList.remove('fade-title');
>>>>>>>>> });
>>>>>>>>> });
>>>>>>>>> };
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> function initializeYay() {
>>>>>>>>> makeGlobalElements();
>>>>>>>>> setTimeout(attatchListeners, 500);
>>>>>>>>> setUpRoutes();
>>>>>>>>> removeSplash();
>>>>>>>>> //fetchPdfjs();
>>>>>>>>> }
>>>>>>>>>
>>>>>>>>> if (!webComponentsSupported) {
>>>>>>>>> document.addEventListener('WebComponentsReady', initializeYay);
>>>>>>>>> } else {
>>>>>>>>> initializeYay();
>>>>>>>>> page('/portfolio');
>>>>>>>>> }
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Tuesday, December 22, 2015 at 9:44:05 PM UTC-6, Darin Hensley
>>>>>>>>> wrote:
>>>>>>>>>>
>>>>>>>>>> stack overflow post
>>>>>>>>>> <http://stackoverflow.com/questions/34428255/domcontentloaded-never-fires-can-not-use-webcomponentsready>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Using polymer 1.2.3,
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> In linux firefox 42.0, where the polyfill(webcomponents-lite.js)
>>>>>>>>>> is used:
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> `WebComponentsReady` fires to soon, because I `querySelect` and
>>>>>>>>>> `getElementById` elements that do not exist yet in `initialize`.
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> window.addEventListener('WebComponentsReady', function() {
>>>>>>>>>> initialize
>>>>>>>>>> .then(attatchListeners)
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> So I am using `DOMContentLoaded` but it never fires:
>>>>>>>>>>
>>>>>>>>>> document.addEventListener('DOMContentLoaded', function() {
>>>>>>>>>> initialize
>>>>>>>>>> .then(attatchListeners)
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> Any ideas on how to make initialize run when the elements are
>>>>>>>>>> available for `querySelect()`?
>>>>>>>>>>
>>>>>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>>>>>>> ---
>>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>>> Groups "Polymer" group.
>>>>>>>>>
>>>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>>>>> send an email to [email protected].
>>>>>>>>
>>>>>>>>
>>>>>>>>> To view this discussion on the web visit
>>>>>>>>> https://groups.google.com/d/msgid/polymer-dev/13dcb312-f0a9-44d5-bf55-29be4cd38441%40googlegroups.com
>>>>>>>>>
>>>>>>>>> <https://groups.google.com/d/msgid/polymer-dev/13dcb312-f0a9-44d5-bf55-29be4cd38441%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>>>>>> .
>>>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>>>>
>>>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>>>>> ---
>>>>>>> You received this message because you are subscribed to the Google
>>>>>>> Groups "Polymer" group.
>>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>>> send an email to [email protected].
>>>>>>>
>>>>>> To view this discussion on the web visit
>>>>>>> https://groups.google.com/d/msgid/polymer-dev/ecbf652f-4130-4118-8a29-30de8c98ff24%40googlegroups.com
>>>>>>>
>>>>>>> <https://groups.google.com/d/msgid/polymer-dev/ecbf652f-4130-4118-8a29-30de8c98ff24%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>>>> .
>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>>
>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>>> ---
>>>>> You received this message because you are subscribed to the Google
>>>>> Groups "Polymer" group.
>>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>>> an email to [email protected].
>>>>>
>>>> To view this discussion on the web visit
>>>>> https://groups.google.com/d/msgid/polymer-dev/25ca6f26-e689-4829-9dbd-5a87c2c129dc%40googlegroups.com
>>>>>
>>>>> <https://groups.google.com/d/msgid/polymer-dev/25ca6f26-e689-4829-9dbd-5a87c2c129dc%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>> .
>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>
>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>> ---
>>> You received this message because you are subscribed to the Google
>>> Groups "Polymer" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to [email protected].
>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msgid/polymer-dev/144ec899-6d1d-4d8b-93f3-b9485115aaf0%40googlegroups.com
>>>
>>> <https://groups.google.com/d/msgid/polymer-dev/144ec899-6d1d-4d8b-93f3-b9485115aaf0%40googlegroups.com?utm_medium=email&utm_source=footer>
>>> .
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/291e3c41-a1a7-41d1-91cb-e964ed749d31%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
