I am am trying to create a custom element that plays a youtube video in paper-dialog. So videoPlayer = Polymer.dom(this.root).querySelector('video-player'); inherits/has access to that paper-dialogs open method, I am trying to extend my custom element. It isn't working, but hopefully I am on the right track and someone can show me correctly.
I am using Polymer 1.0, but I only have https://www.polymer-project.org/0.5/docs/polymer/polymer.html#extending-other-elements to go by for extending elements.
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="video-player">
<template>
<div class="layout horizontal">
<paper-button dialog-dismiss>
<paper-icon-button icon="arrow-back"></paper-icon-button>
</paper-button>
</div>
<div style="height: 100%; width: 100%">
<google-youtube style="height: 100%;"
video-id="YMWd7QnXY8E"
rel="1"
start="5"
playsinline="0"
controls="2"
showinfo="0"
width="100%"
height="100%"
autoplay="1">
</google-youtube>
</div>
</template>
<script>
Polymer({
is: "video-player"
});
</script>
<paper-dialog name="video-player" extends="video-player">
<template>
<shadow></shadow>
</template>
<script>
Polymer();
</script>
</paper-dialog>
<video-player></video-player>
As was mentioned in the comments, you can't yet extend custom elements, so the existing pattern (or at least the one I use) is to make use of behaviors wherever possible and wrappers wherever not.
e.g.
<dom-module id="popup-video-player">
<template>
<video-player></video-player>
</template>
<script>
Polymer({
is: 'popup-video-player',
behaviors: [Polymer.PaperDialogBehavior],
...
});
</script>
</dom-module>
Now you can use <popup-video-player> just like a paper-dialog.
I know it stinks because if video-player has a bunch of properties that you want access to, you have to copy them in the popup-video-player element's API, which is not exactly DRY.
If you look at the paper-input source, you'll see them doing the same thing. It's obvious that they want to extend iron-input, but they can't so you get things like this:
<input is="iron-input" id="input"
aria-labelledby$="[[_ariaLabelledBy]]"
aria-describedby$="[[_ariaDescribedBy]]"
disabled$="[[disabled]]"
title$="[[title]]"
... >
As a side note, you could always hook into the <video-player>s "properties" property and make the API additions programatically.
maybe something like this would work: (untested!)
Polymer({
...
properties: (function () {
var prop = {
//special properties specific to the pop up version of video-player
//..obviously be careful to avoid name space conflicts.
};
var video_player = document.createElement('video-player');
video_player.properties.keys().forEach( function(key) {
props[key] = video_player[key];
});
return props;
}()),
});
Related
I would like to apply some stylesheets dynamically using Polymer. The scenario is like this:
<link rel="import" href="themes/red.styles.html" />
<link rel="import" href="themes/indigo.styles.html" />
<dom-module>
<style include="indigo-styles">
<template>
<div class="header">Header</div>
<button on-click="_toggleStylesheet"></button>
</template>
</dom-module>
<script>
Polymer({
_toggleStylesheet: function () {
// remove indigo-styles and apply red-styles and so on
}
})
</script>
Does anyone know how can this be achieved in Polymer?
Thank you in advance!
Use this.updateStyles to change the style of a Polymer.Element.
Use Polymer.updateStyles to apply a change globally:
Polymer.updateStyles({
'--property-one': 'var(--paper-red-900)',
'--property-two': 'var(--paper-indigo-500)',
...
'--property-whatever': 'etc'
})
The below code does not show in the browser. This works in Polymer 0.5. Is there code difference as I am using 1.0?:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-name">
<template>
<h1> Hello {{name}}</h1>
</template>
<script>
Polymer('my-name', {
ready: function() {
this.name = "Brown";
}
});
</script>
</polymer-element>
Basically you need to rewrite your element based on the new requirements. You can easily follow it in the migration guide, registration element section.
You should rewrite it like following:
<dom-module id="my-name">
<template>
<!--Keep in mind in polymer 1.0 you can't have whitespaces in bound tags-->
<h1>Hello <span>{{name}}</span></h1>
</template>
<script>
Polymer({
is: "my-name",
ready: function () {
this.name = "Brown";
}
});
</script>
</dom-module>
I did a Plunker where you can reproduce it.
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-name">
<style>
/*your styles go here*/
<style>
<template>
<!-- Things to show in element view -->
<h1> Hello <span>{{name}}</span></h1>
</template>
<dom-module>
<script>
// Your script goes here
Polymer({
is: 'my-name',
properties: {
name: {
type: String,
value: 'Brown'
}
}
});
</script>
There are many differences when migrating from Polymer 0.5 to Polymer 1.0 +. They changed the old polymer-element to dom-module and name attribute to id. The constructor is also changed as i shown in the example. Read https://www.polymer-project.org/1.0/docs/migration.html to get more info on migrating.
polymer 1.0 changes <polymer-element name="my-name"> to <dom-module id="my-name">.
I think you should follow the documentation of polymer 1.0
Polymer 1.0 documentation
I've created a test polymer element where in I was figuring out how to use use arrays in templates. My code does not work and the documentation for 1.0 doesn't really talk much about how to use repeat in template tags.
my element:
<!-- Imports polymer -->
<link rel="import" href="polymer/polymer.html">
<!-- Defines element markup -->
<dom-module id="my-element" >
<template>
<style>
my-element
</style>
<h2>{{data}}</h2>
<ul>
<template repeat={{column in columns}} bind>
<li>{{column}}</li>
</template>
</ul>
</template>
</dom-module>
<!-- Registers custom element -->
<script>
Polymer({
is: 'my-element',
// Fires when an instance of the element is created
created: function() {
},
// Fires when the local DOM has been fully prepared
ready: function() {},
// Fires when the element was inserted into the document
attached: function() {},
// Fires when the element was removed from the document
detached: function() {},
// Fires when an attribute was added, removed, or updated
attributeChanged: function(name, type) {
alert("changed");
},
properties:{
data :String,
columns:Array
}
});
</script>
and the index.html page where I'm using the element:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><my-repo></title>
<!-- Imports polyfill -->
<script src="webcomponents-lite.min.js"></script>
<!-- Imports
custom element -->
<link rel="import" href="my-element.html">
<!-- Runs custom element -->
<my-element users = '{{[1,2,3,4]}}' data="This is a polymer table"></my-element>
Please let me know what's wrong with my code!!
You have to use
<template is="dom-repeat" items="{{users}}">
<li>{{item}}</li>
</template>
And in main file:
<my-element users="[1,2,3,4]" data="This is a polymer table"></my-element>
You can search Youtube for Polycast, a series by Google Developers where they're talking about Polymer for beginners and showing cool tricks.
Polymer 1.0 does not allow expressions in data binding. The problem is in:
<my-element users = '{{[1,2,3,4]}}' ...>
You need to replace {{[1,2,3,4]}} with a property. Something like this:
<template is="dom-bind">
<my-element users = '{{myarray}}' data="This is a polymer table"></my-element>
</template>
<script>
(function() {
var template = document.querySelector('template[is="dom-bind"]');
template.myarray = [1,2,3,4];
})();
</script>
I am using sample-scaffold from https://github.com/Polymer/sampler-scaffold and define some globale variables using app-globals as described in https://www.polymer-project.org/docs/polymer/polymer.html#global
like
<app-globals myvar="value"></app-globals>
<sampler-scaffold>
<core-item label="Page 1" url="page1.html"></core-item>
</sampler-scaffold>
page1.html contains also the app-globals without values.
<app-globals id="globals"></app-globals>
However, the globals element does not contain any values. Is there a way to define globals across iframes using app-globals?
What about using the Polymer Element extensions? and inheritance to keep the interface of the app-globals object static? My Plunker: http://embed.plnkr.co/uDPTVP/preview
app-config.html
<!-- per https://www.polymer-project.org/docs/polymer/polymer.html#extending-other-elements -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="app-globals.html">
<polymer-element name="app-config" extends="app-globals">
<script>
Polymer({
ready: function () {
this.super();
this.values.GloabalSettingsVal1 = "GDG FTW"
}
});
</script>
</polymer-element>
i want to inject a template into an polymer component like this :
<polymer-element name="foo-bar">
<template>
<content></content>
<!-- content is expected to contain a template with id="layout"-->
<template bind ref="layout">
default content template
</template>
</template>
<script src="index.js"></script>
</polymer-element>
usage of the component :
<foo-bar>
<template id="layout">another content template</template>
</foo-bar>
unfortunately the template provided as content of the element is not taken over for some reason.
when simluate the wished behaviour using
<polymer-element name="foo-bar">
<template>
<template id="layout">
custom content template
</template>
<template bind ref="layout">
default content template
</template>
</template>
<script src="index.js"></script>
</polymer-element>
the referenced template(id="layout") is used as expected.
Any help is appreciated :-)
<template ref="layout"> says use the template#layout for my content. So I would expect the template in your shadow dom to use the content of the light dom template. This is what you see in http://jsbin.com/takipi/1/edit.
However, if you want to use render the light dom <template> the user provides, you must activate it using template.createInstance(). By default, templates are inert. For this use case, you also don't need <content>. That's for rendering and in this case, it doesn't really make sense.
The example below also show how to set things up. It also shows how you can use {{}} bindings in the light dom <template> and fill them when the instance is created.
<div id="container"></div>
<template if="{{showDefault}}">
default content template
</template>
attached: function() {
var template = this.querySelector('template');
if (template) {
this.$.container.appendChild(
template.createInstance({foo: 5}));
this.showDefault = false;
}
}
Full code:
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="foo-bar">
<template>
<div id="container"></div>
<template if="{{showDefault}}">
default content template
</template>
</template>
<script>
Polymer({
showDefault: true,
attached: function() {
var template = this.querySelector('template');
if (template) {
// Allow Polymer expressions in the template's {{}}.
if (!template.bindingDelegate) {
template.bindingDelegate = this.element.syntax;
}
this.$.container.appendChild(
template.createInstance({foo: 5}));
this.showDefault = false;
}
}
});
</script>
</polymer-element>
<foo-bar>
<template>
<b>another</b> content template. Also supports data: {{foo}}
</template>
</foo-bar>