Skip to content

Polymer 3 support and fixes #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DragonEyes7 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Polymer 3 support and fixes #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 2 additions & 13 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,6 @@
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "Polymer/polymer#1.9 - 2",
"iron-icon": "#1 - 2",
"iron-icons": "#1 - 2",
"paper-item": "#1 - 2",
"paper-listbox": "#1 - 2",
"paper-input": "#1 - 2",
"paper-dropdown-menu": "#1 - 2",
"iron-input": "#1 - 2",
"paper-icon-button": "#1 - 2",
"web-animations-js": "web-animations/web-animations-js#^2.3.1"
}
]
}

55 changes: 55 additions & 0 deletions demo/dinosaur-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
Polymer({
_template: html`
<style>
:host {
display: block;
border-bottom: 1px solid #E8E8E8;
}
[horizontal][layout] {
width: 400px;
display: flex;
flex-direction: row;
}
img {
width: 100px;
height: 100px;
min-width: 100px;
min-height: 100px;
padding: 5px;
border-radius: 100px;
}
</style>

<div horizontal="" layout="">
<img src="[[data.avatar]]" alt="[[data.name]]">
<div>
<h3>[[data.value]]</h3>
<p>[[data.description]]</p>
</div>
</div>
`,

is: 'dinosaur-card',

properties: {
data: Object,
label: {
type: String,
computed: "_getLabel(data)"
}
},

listeners: {
"tap": "dinotap"
},

dinotap: function(event) {
console.log("dinotap", this);
},

_getLabel: function(data) {
return data.dinoName;
}
});
151 changes: 78 additions & 73 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../../polymer/polymer.html">
<!-- <link rel="import" href="../../polymer/lib/elements/dom-bind.html"> -->
<link rel="import" href="../paper-dropdown-input.html">
<link rel="import" href="dinosaur-card.html">
<script type="module" src="@polymer/polymer/polymer-legacy.js"></script>
<script src="@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="paper-dropdown-input.js"></script>
<script type="module" src="dinosaur-card.js"></script>
<style>
h3, p {
font-family: Roboto;
Expand Down Expand Up @@ -81,80 +81,85 @@ <h3>Fancy input</h3>
</template>
</dom-bind>

<script>
<script type="module">
if (Polymer.version) {
setupDemo();
}
else {
window.addEventListener('WebComponentsReady', setupDemo);
}
function setupDemo() {
var template = Polymer.version[0] === "1" ? document.querySelector("template[is='dom-bind']") : document.querySelector("dom-bind");
template._getCarnivores = items => items.filter( item => item.type == "carnivore" );
template._getHerbivores = items => items.filter( item => item.type == "herbivore" );
// auto-binding template is ready.
template.simpleItems = [
"Velociraptor",
"Deinonychus",
"Allosaurus",
"Brontosaurus",
"Carcharodontosaurus",
"Diplodocus",
"T-Rex"
];
template.complexItems = [{
dinoName: "Velociraptor",
avatar: "velociraptor.png",
type: "carnivore",
description: "Velociraptor is a genus of dromaeosaurid theropod dinosaur that lived approximately 75 to 71 million years ago during the later part of the Cretaceous Period. Two species are currently recognized, although others have been assigned in the past. The type species is V. mongoliensis; fossils of this species have been discovered in Mongolia. A second species, V. osmolskae, was named in 2008 for skull material from Inner Mongolia, China."
}, {
dinoName: "Deinonychus",
avatar: "deinonychus.png",
type: "carnivore",
description: "Deinonychus is a genus of carnivorous dromaeosaurid coelurosaurian dinosaurs, with one described species, Deinonychus antirrhopus. This species, which could grow up to 3.4 metres (11 ft) long, lived during the early Cretaceous Period, about 115–108 million years ago (from the mid-Aptian to early Albian stages). Fossils have been recovered from the U.S. states of Montana, Utah, Wyoming, and Oklahoma, in rocks of the Cloverly Formation, Cedar Mountain Formation and Antlers Formation, though teeth that may belong to Deinonychus have been found much farther east in Maryland."
}, {
dinoName: "Allosaurus",
avatar: "allosaurus.png",
type: "carnivore",
description: "Allosaurus is a genus of large theropod dinosaur that lived 155 to 150 million years ago during the late Jurassic period (Kimmeridgian to early Tithonian)."
}, {
dinoName: "Brontosaurus",
avatar: "brontosaurus.png",
type: "herbivore",
description: "Brontosaurus , meaning 'thunder lizard', is a genus of sauropod dinosaurs. Originally named by its discoverer Othniel Charles Marsh in 1879, Brontosaurus had long been considered a junior synonym of Apatosaurus; its original species Brontosaurus excelsus was reclassified as A. excelsus in 1903. However, an extensive study published in 2015 by a joint British-Portuguese research team concluded that Brontosaurus was a valid genus of sauropod distinct from Apatosaurus."
}, {
dinoName: "Carcharodontosaurus",
avatar: "carcharodontosaurus.png",
type: "herbivore",
description: "Carcharodontosaurus is a genus of carnivorous carcharodontosaurid dinosaurs that existed between 100 and 93 million years ago, during the late Albian to early Cenomanian stages of the mid-Cretaceous Period. It is currently known to include two species, C.saharicus and C.iguidensis, which were among the larger theropods, as large as or slightly bigger than Tyrannosaurus and possibly slightly larger than Giganotosaurus, but not quite as large as Spinosaurus."
}, {
dinoName: "Diplodocus",
avatar: "diplodocus.png",
type: "herbivore",
description: "Diplodocus is an extinct genus of diplodocid sauropod dinosaurs whose fossils were first discovered in 1877 by S. W. Williston. The generic name, coined by Othniel Charles Marsh in 1878 in reference to its double-beamed chevron bones located in the underside of the tail. Chevron bones of this particular form were initially believed to be unique to Diplodocus; however, since then they have been discovered in other members of the diplodocid family as well as in nondiplodocid sauropods, such as Mamenchisaurus. It is now common scientific opinion that Seismosaurus hallorum is a species of Diplodocus."
}, {
dinoName: "T-Rex",
avatar: "t-rex.png",
type: "carnivore",
description: "Tyrannosaurus, meaning 'tyrant lizard', is a genus of coelurosaurian theropod dinosaur. The species Tyrannosaurus rex (rex meaning 'king' in Latin), is one of the most well-represented of the large theropods. Tyrannosaurus lived throughout what is now western North America, on what was then an island continent known as Laramidia. Tyrannosaurus had a much wider range than other tyrannosaurids. Fossils are found in a variety of rock formations dating to the Maastrichtian age of the upper Cretaceous Period, 68 to 66 million years ago. It was the last known member of the tyrannosaurids, and among the last non-avian dinosaurs to exist before the Cretaceous–Paleogene extinction event."
}];
template.filterfn = function(items, searchValue) {
if (!searchValue) {
return items;
} else {
var _searchValue = searchValue.toLowerCase();
return items.filter( function(item) {
if (!item.dinoName && typeof item != "string") {
console.error("paper-dropdown-input: item in `items`:", item, " is not a string or does not contain `value` property");
return true; // everything goes through
} else {
return (item.dinoName || item).toLowerCase().indexOf(_searchValue) > -1;
}
});
if (Polymer.version) {
setupDemo();
}
else {
window.addEventListener('WebComponentsReady', setupDemo);
}
function setupDemo() {
var template = Polymer.version[0] === "1" ? document.querySelector("template[is='dom-bind']") : document.querySelector("dom-bind");
template._getCarnivores = items => items.filter( item => item.type == "carnivore" );
template._getHerbivores = items => items.filter( item => item.type == "herbivore" );
// auto-binding template is ready.
template.simpleItems = [
"Velociraptor",
"Deinonychus",
"Allosaurus",
"Brontosaurus",
"Carcharodontosaurus",
"Diplodocus",
"T-Rex"
];
template.complexItems = [{
dinoName: "Velociraptor",
avatar: "velociraptor.png",
type: "carnivore",
description: "Velociraptor is a genus of dromaeosaurid theropod dinosaur that lived approximately 75 to 71 million years ago during the later part of the Cretaceous Period. Two species are currently recognized, although others have been assigned in the past. The type species is V. mongoliensis; fossils of this species have been discovered in Mongolia. A second species, V. osmolskae, was named in 2008 for skull material from Inner Mongolia, China."
}, {
dinoName: "Deinonychus",
avatar: "deinonychus.png",
type: "carnivore",
description: "Deinonychus is a genus of carnivorous dromaeosaurid coelurosaurian dinosaurs, with one described species, Deinonychus antirrhopus. This species, which could grow up to 3.4 metres (11 ft) long, lived during the early Cretaceous Period, about 115–108 million years ago (from the mid-Aptian to early Albian stages). Fossils have been recovered from the U.S. states of Montana, Utah, Wyoming, and Oklahoma, in rocks of the Cloverly Formation, Cedar Mountain Formation and Antlers Formation, though teeth that may belong to Deinonychus have been found much farther east in Maryland."
}, {
dinoName: "Allosaurus",
avatar: "allosaurus.png",
type: "carnivore",
description: "Allosaurus is a genus of large theropod dinosaur that lived 155 to 150 million years ago during the late Jurassic period (Kimmeridgian to early Tithonian)."
}, {
dinoName: "Brontosaurus",
avatar: "brontosaurus.png",
type: "herbivore",
description: "Brontosaurus , meaning 'thunder lizard', is a genus of sauropod dinosaurs. Originally named by its discoverer Othniel Charles Marsh in 1879, Brontosaurus had long been considered a junior synonym of Apatosaurus; its original species Brontosaurus excelsus was reclassified as A. excelsus in 1903. However, an extensive study published in 2015 by a joint British-Portuguese research team concluded that Brontosaurus was a valid genus of sauropod distinct from Apatosaurus."
}, {
dinoName: "Carcharodontosaurus",
avatar: "carcharodontosaurus.png",
type: "herbivore",
description: "Carcharodontosaurus is a genus of carnivorous carcharodontosaurid dinosaurs that existed between 100 and 93 million years ago, during the late Albian to early Cenomanian stages of the mid-Cretaceous Period. It is currently known to include two species, C.saharicus and C.iguidensis, which were among the larger theropods, as large as or slightly bigger than Tyrannosaurus and possibly slightly larger than Giganotosaurus, but not quite as large as Spinosaurus."
}, {
dinoName: "Diplodocus",
avatar: "diplodocus.png",
type: "herbivore",
description: "Diplodocus is an extinct genus of diplodocid sauropod dinosaurs whose fossils were first discovered in 1877 by S. W. Williston. The generic name, coined by Othniel Charles Marsh in 1878 in reference to its double-beamed chevron bones located in the underside of the tail. Chevron bones of this particular form were initially believed to be unique to Diplodocus; however, since then they have been discovered in other members of the diplodocid family as well as in nondiplodocid sauropods, such as Mamenchisaurus. It is now common scientific opinion that Seismosaurus hallorum is a species of Diplodocus."
}, {
dinoName: "T-Rex",
avatar: "t-rex.png",
type: "carnivore",
description: "Tyrannosaurus, meaning 'tyrant lizard', is a genus of coelurosaurian theropod dinosaur. The species Tyrannosaurus rex (rex meaning 'king' in Latin), is one of the most well-represented of the large theropods. Tyrannosaurus lived throughout what is now western North America, on what was then an island continent known as Laramidia. Tyrannosaurus had a much wider range than other tyrannosaurids. Fossils are found in a variety of rock formations dating to the Maastrichtian age of the upper Cretaceous Period, 68 to 66 million years ago. It was the last known member of the tyrannosaurids, and among the last non-avian dinosaurs to exist before the Cretaceous–Paleogene extinction event."
}];
template.filterfn = function(items, searchValue) {
if (!searchValue) {
return items;
} else {
var _searchValue = searchValue.toLowerCase();
return items.filter( function(item) {
if (!item.dinoName && typeof item != "string") {
console.error("paper-dropdown-input: item in `items`:", item, " is not a string or does not contain `value` property");
return true; // everything goes through
} else {
return (item.dinoName || item).toLowerCase().indexOf(_searchValue) > -1;
}
});
}
}
}
}
</script>
</body>

</html>
}
</script>
11 changes: 3 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,10 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="../webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="iron-component-page/iron-component-page.html">

</head>
<body unresolved>
<!-- Note: if the main element for this repository doesn't
match the folder name, add a src="<main-component>.html" attribute,
where <main-component>.html" is a file that imports all of the
components you want documented. -->
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<iron-component-page></iron-component-page>

</body>
Expand Down
Loading