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] > <javascript:>> 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] <javascript:>. >> 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. For more options, visit https://groups.google.com/d/optout.
