updating the-grid to support Polymer 3.0#34
Conversation
|
@vpusher are you still maintaining this? or you will not give more support ? |
|
Yes I still maintain this component but as a best effort basis. I already planned to migrate the component to Polymer 3. Just waiting for the official release. In the meantime, feel free to PR for any needs 😉 |
|
awesome XD i think @aveiga needs to rebase 👍 |
vpusher
left a comment
There was a problem hiding this comment.
Do we style need bower.json ? I don't think so. Please update README also. Thx.
| @@ -1,3 +1,4 @@ | |||
| bower_components/ | |||
| $_documentContainer.setAttribute('style', 'display: none;'); | ||
|
|
||
| <dom-module id="grid-styles"> | ||
| $_documentContainer.innerHTML = `<dom-module id="grid-styles"> |
There was a problem hiding this comment.
Okay, I had a look. It looks like we should get rid of the styles modules. Let's go back to the basics. Create a simple stylesheet and import it as usual CSS.
| See: https://github.com/Polymer/polymer-modulizer/issues/154 | ||
| --> | ||
| <script type="module"> | ||
| const $_documentContainer = document.createElement('div'); |
| "main": "the-grid.html", | ||
| "homepage": "https://github.com/vpusher/the-grid", | ||
| "dependencies": { | ||
| "@polymer/polymer": "^3.0.0-pre.1" |
| "web-component", | ||
| "web-components", | ||
| "polymer", | ||
| "polymer2" |
| }, | ||
| "devDependencies": { | ||
| "@polymer/iron-component-page": "^3.0.0-pre.19", | ||
| "@polymer/iron-demo-helpers": "^3.0.0-pre.19", |
| @demo demo/playground.html Playground | ||
| @demo demo/responsive.html Responsiveness | ||
| */ | ||
| class TheGrid extends GestureEventListeners(PolymerElement) { |
There was a problem hiding this comment.
I am wondering if we should go LitElement of not ?
| <tile col="3" row="1" height="2" width="1"></tile> | ||
| <tile col="4" row="0" height="3" width="2"></tile> | ||
| <div placeholder></div> | ||
| <div placeholder=""></div> |
There was a problem hiding this comment.
There is no way we can declare an attribute without value ? The syntax is is bit ugly...
| return Math.round(Math.random() * 15); | ||
| } | ||
| </script> | ||
| </script> |
| <script type="module"> | ||
| const $_documentContainer = document.createElement('div'); | ||
|
|
||
| $_documentContainer.innerHTML = `<custom-style> |
There was a problem hiding this comment.
Please use classic stylesheet here.
|
@aveiga Will you have time to do then changes and fix the conflict ? |
|
Made a Polymer3 working version (used in a lit-element project) https://gist.github.com/Ghostfly/ed0839700f0a53e7fbeecad128cfb2e7 I think it's better in Polymer3 as gestures event listeners are really great |
Polymer 3 has just been released.
I've run the polymer-modulizer and made the necessary changes to migrate the-grid to Polymer 3.0. The demo is working flawlessly but there's still some problems:
What's still not working:
As these don't seem to affect general functionality I think we can create the relevant issues and deal with them later.
Note: This is a breaking change! Hence, this should bump the major version.