Bug in polymer + tutorial for polymer

[vautr...@gmail.com]

Hi there ! 

I'm a french 21yo student coming from Lyon. I watched the last google I/O and enjoyed it very much. I found this polymer thing very exiting ! So, when the new version has been released, I immediatly tried it :)

Aaaaaand here comes the problems... :/

I'd like to know if there are any docs or tutorial in complementary of the one which is on the http://www.polymer-project.org/ website. I'd like to make two website : one which could looks like this : 

http://www.polymer-project.org/apps/topeka/

But how ? (Do I have to create all my new elements, like topeka did ? ) 

And one which is there  :

http://vautrinremi.fr/CV

As you can see, the mode="cover" prevent the default utility of the favicon : when the window is resized to a minimal window, the menu isn't accessible... But I really like the cover mode... Do I have to choose between responsive design and cover mode ? (I'm affraid of the response lol)

Regards,

Rémi, 

Polymer User :)

[Scott Miles]

>> But how ? (Do I have to create all my new elements, like topeka did ? ) 

Lots of `topeka` is made out of our standard elements. If there is some part of it that is only in `topeka` that you think should be a standard component, let us know.

>> As you can see, the mode="cover" prevent the default utility of the favicon : when the window is resized to a minimal window, the menu isn't accessible

When you engage `cover` mode, it's up to you to make sure your content width is such that it doesn't obscure important UI elements, like the menu.

Thanks for trying Polymer!

Scott

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/cdfb2924-f9f9-40c9-b2b7-45c147960731%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[vautr...@gmail.com]

Hi ! Thanks for replying. :)

I'd like to know if it's possible to change the mode when the core-drawer-pannel is "narrow". I've tried with the event, and it works only when I resize the window. Is there any way to know if the core-drawer-pannel is narrow in JS?

Regards, 

Rémi

[vautr...@gmail.com]

PS : it's not the menu which is hidden, but the click on the favicon which doesn't work

[steven]

Yes - just check your core-drawer-panel's narrow property for the current state.

[vautr...@gmail.com]

Thanks for replying, 

How can I access a polymer element propriety ? 

I've tried : console.log(document.querySelector("core-drawer-panel core-media-query"));

console.log(document.querySelector("core-drawer-panel[narrow]"));

console.log(document.querySelector("core-drawer-panel").getAttribute("narrow"));

console.log(document.querySelector("core-drawer-panel").narrow);

console.log(document.querySelector("core-drawer-panel").narrow_);

Everything is NULL, I don't understand. Could you help me please, or give me a link of the doc ? 

[steven]

Here's info on published properties - http://www.polymer-project.org/docs/polymer/polymer.html#published-properties & you might want to take a look at http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding - actually I recommend you just read that whole page if you haven't already, it will make everything much clearer :)

To get straight to the point if you have a drawer panel in your element's template like so:

<core-drawer-panel id="myDrawerPanel">…</core-drawer-panel>

then in your element's script you can do:

this.$.myDrawerPanel.narrow

to get it's state.

[vautr...@gmail.com]

 

Thanks !!!! I'll read the whole page in details ASAP, I think it's a vital need for my future polymer app' ! ;) 

This leads me to a new question :  How can I, in polymer, select all the elements with a class "myClass" for example? Is there any selector like in jQuery? Do I have to create an id for each elements ? 

Thanks by advances,

Regards.

[Eric Bidelman]

On Sat, Jun 28, 2014 at 11:28 AM, <vautr...@gmail.com> wrote:

 

Thanks !!!! I'll read the whole page in details ASAP, I think it's a vital need for my future polymer app' ! ;) 

This leads me to a new question :  How can I, in polymer, select all the elements with a class "myClass" for example? Is there any selector like in jQuery? Do I have to create an id for each elements ? 

this.shadowRoot.querySelectorAll('.myClass')

`this` is your element

`.shadowRoot` is the element's shadow root

so `this.shadowRoot` scopes the querySelectorAll call to nodes in your element's shadow dom.

 

Thanks by advances,

Regards.

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2f259a50-ec0c-4c1c-b0b6-20032beb8785%40googlegroups.com.

[vautr...@gmail.com]

Problem solved, it works fine !

Is the shadow root explained in the api doc ?  

 

Thanks again

 

[Eric Bidelman]

It certainly isn't :\ Filed: https://github.com/Polymer/docs/issues/477

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1ff19911-a544-4914-9885-82419a94c0ee%40googlegroups.com.

[vautr...@gmail.com]

Ok no problems. :) 

[vautr...@gmail.com]

Hello guys ! 

I'm come back here with another problem : the narrow attribute is "false" instead of "true" when i'm on my smartphone. When I've tried with the doc example, the button appears, so I think the narrow was "true".

At first I thought it could come from the fact I have not write any responsive code in my polymer element, so I write 

<core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{queryMatches}}"></core-media-query>

<core-drawer-panel id="drawerPanel" narrow="{{narrow}}">

And I've copied/pasted the method queryMatchesChanged method, the responsiveWitdth and the narrow attributes. But it still doesn't work : When i resize the window, it's reponsive, but not on my phone...

What should I do/read? 

Sorry for the inconvenience, I'm a big newbie in polymer... 

[Eric Bidelman]

The demo at http://www.polymer-project.org/components/core-drawer-panel/demo.html as expected for me on my N5, Chrome for Android.

core-drawer-panel is responsive by default and hides itself at 640px. If you want to customize the media query it responds to, you'll need to use the `responsiveWidth` published property. Pass it as the attribute:

<core-drawer-panel responsiveWidth="400px">

Note: core-draw-panel automatically toggles .narrow for you when the media query is matched. You should not need to set it yourself.

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b2158410-f08c-41ae-9962-e8ada21b3dfe%40googlegroups.com.

[vautr...@gmail.com]

Thanks for replying ! It's helped me: It works now. (but not correctly)

 The demo on the polymer project works fine for me too, that's why i was wondering where I went wrong.

I tried some values for the responsiveWidth on the polymer element I've created : over 980px, it's fully responsive, under 980px it's not. I'm glad it works, but the example of the polymer project set the responsive width to 640px... So I wonder what the responsive width is, and I'm affraid it's not written in the doc. ;)

[Ian MacLeod]

Hmm, the link that Eric gave for core-drawer-panel is definitely the value (640px) at which it performs the responsive toggle between narrow/wide modes.

When playing with the responsiveWidth for your custom element, it seems to be working for values under 980px. I'm probably missing something, though - what behavior are you expecting?

On 1404075361798, <vautr...@gmail.com> wrote:

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/817d4127-2368-49c7-8e93-7641909701ab%40googlegroups.com.

[vautr...@gmail.com]

Thanks for replying. :)

Hmm sorry, I might not have explained as much as I could. Actually, this works fine on my computer too, for values under 980px, like 700px, or 640px. But on my phone it's totally different. I've set 640px again, and the narrow is "false", I think, when I visit the app with my phone.(On my computer all is fine)

 If this is a bug, no problem, I'll do with that. But if it is not, and if didn't catch the meaning of the responsive width, then I'd have a few more questions:

- Is the responsiveWidth different between two elements  ?

- Is the narrow event based on the width of the screen (Actually, this is what I trust) or on the width of the element, or both ? 

- Should I set a fixed width for the differents elements, and for the one I've created ? (I've not done the test yet)

Thanks again for helping me ! :)

[Ian MacLeod]

Oh!

So, I don't think this is a Polymer issue at all :)

I'm assuming that you're viewing it on your phone by navigating to http://vautrinremi.fr/CV? I bet navigating to http://parkourt.free.fr//CV/ works, right? :)

Your outer page lacks the magic incantation to escape desktop emulation mode:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

It so happens that 980px is the default viewport width when displaying desktop-formatted pages (iOS Safari at least). Quirksmode has a great overview if you're unfamiliar w/ it.

On 1404107960057, <vautr...@gmail.com> wrote:

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 polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/77c43572-acc9-4de1-b7a5-2a47c61d7ed4%40googlegroups.com.

[vautr...@gmail.com]

Indeed, at parkourt.free.fr/CV, it works fine...

I think I'll just change of server host, so I wont need to make an old redirection anymore. :) 

I don't know if it has taken you a lot of time to see it, but I have to say a big "Thank you" one more time ! I've been working on it for hours without seeing it...

Sorry about the inconvenience,

Regards,

Rémi