I have created a youtube element in polymer using the google-youtube library. I used the id of youtube video in the youtube-element and the video was showing but it disappeared.
I checked in console, shows error:
Library Load failed:failed to load Library
Cannot GET /bower_components/polymer/polymer-micro.html.js
I deleted this library and installed this library again using bower install, but I am still getting the same error. I am not able to load the youtube-element.
can anyone help here?
Code for youtube-element.html
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="youtube-element">
<template>
<style>
:host {
display: block;
}
</style>
<h1 class="heading" >MY YouTube Videos</h1>
<paper-material class="mid" elevation="1">
<google-youtube
video-id="HgJ0XCyBwzY"
height="270px"
width="480px"
rel="0"
start="5"
autoplay="0">
</google-youtube>
</paper-material>
</template>
<script>
Polymer({
is: 'youtube-element',
properties: {
foo: {
type: String,
value: 'youtube-element',
notify: true
}
}
});
})();
</script>
</dom-module>
Related
I am new to Polymer and try to create an ajax call by iron-ajax. I run into an error, that generateRequest()is undefined.
Polymer 1 is in use.
I installed iron-ajax with this command: bower install --save PolymerLabs/promise-polyfill#1
And as you can see, I load it with <link rel="import" href="../bower_components/promise-polyfill/promise-polyfill-lite.html">
I compare it with some examples but can not find the mistake.
Does someone has an idea or solution?
this is the code:
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/promise-polyfill/promise-polyfill-lite.html">
<dom-module id="my-view2">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<div class="card">
<div class="circle">2</div>
<h1>View Two</h1>
<p>Demo output</p>
</div>
<template is="dom-repeat" items="[[repos]]">
<span>{{items.name}}</span>
</template>
<button on-click="setajax">Click me</button>
<iron-ajax
id="ajax"
url=""
params='{"type":"all"}'
handle-as="json"
on-response="hresponse"
debounce-duration="300" >
</iron-ajax>
</template>
<script>
Polymer({
is: 'my-view2',
setajax: function () {
this.$.ajax.url = "https://api.github.com/users/burczu/repos";
this.$.ajax.params= {"type":"all"};
this.$.ajax.generateRequest();
},
hresponse: function(request) {
console.log(request.detail.response);
console.log(this.$.ajax.lastResponse);
}
});
</script>
</dom-module>
You need to install iron-ajax:
bower install --save PolymerElements/iron-ajax
Then, you can import using the following code:
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
Your code will work after you do the above things.
How can I manage to use a behavior (Polymer.AppLocalizeBehavior) inside a nested template: the created scope hides the localize() function.
<template>
...
<div class="content">
<div class="card-container">
{{localize('greeting')}} <---- OK!
<div class="layout horizontal wrap">
<template is="dom-repeat" items="{{employees}}">
<paper-card>
<div class="card-content">
<h2>{{localize('greeting')}}</h2> <---- EMPTY....
Example appreciated.
Thanks
--nick
EDIT 2016 May, 05
A small project showing the issue is available here: https://github.com/nocquidant/polymer-intl/
Instructions are in README.md
UPDATE (6/4/16): The <app-localize-behavior> bug was caused by a Polymer core bug, which is now fixed in Polymer 1.5.0 (jsfiddle).
UPDATE (5/20/16): This appears to be a bug in Polymer 1.4.0, as demonstrated in this jsfiddle. My demo from above had worked because I was using Polymer's latest code from master. (Note there are several commits since the v1.4.0 tag.)
As a workaround, use Bower to install a working commit of Polymer (as of 20-May-2016, the master branch is at commit 409ad83, which works properly with <app-localize-behavior>):
bower i -S polymer#409ad83
Bower will prompt you to select a specific Polymer version, in which case you should enter !1.
Unable to find a suitable version for polymer, please choose one by typing one of the numbers below:
1) polymer#409ad83 which resolved to 409ad83
2) polymer#^1.4.0 which resolved to 1.4.0 and is required by polymer-intl
3) polymer#^1.0.0 which resolved to 1.4.0 and is required by iron-media-query#1.0.8
4) polymer#^1.2.1 which resolved to 1.4.0 and is required by paper-behaviors#1.0.11
5) polymer#^1.3.0 which resolved to 1.4.0 and is required by app-localize-behavior#0.9.0
6) polymer#^1.2.0 which resolved to 1.4.0 and is required by iron-selector#1.5.2
7) polymer#^1.1.0 which resolved to 1.4.0 and is required by iron-flex-layout#1.3.1
Prefix the choice with ! to persist it to bower.json
? Answer
I didn't have any trouble using localize('greeting') inside a template repeater. Can you post a jsfiddle of your code?
Here's a working snippet (based on <app-localize-behavior> demo):
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="https://rawgit.com/yahoo/intl-messageformat/d361003/dist/intl-messageformat.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="app-localize-behavior/app-localize-behavior.html">
</head>
<body>
<x-local-translate></x-local-translate>
<dom-module id="x-local-translate">
<template>
<div>
<span title="english">🇬🇧</span>
<paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
<span title="french">🇫🇷</span>
</div>
<div>
<h4>Outside Repeater</h4>
<div>
<div>{{localize('greeting')}}</div>
</div>
<h4>Template Repeater Items</h4>
<template is="dom-repeat" items="{{things}}">
<div>{{localize('greeting')}}</div>
</template>
</div>
</template>
<script>
Polymer({
is: "x-local-translate",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
things: {
type: Array,
value: function() {
return [1, 2, 3];
}
},
/* Overriden from AppLocalizeBehavior */
language: {
value: 'en',
type: String
},
/* Overriden from AppLocalizeBehavior */
resources: {
type: Object,
value: function() {
return {
'en': {
'greeting': 'Hello!'
},
'fr': {
'greeting': 'Bonjour!'
}
};
}
}
},
_toggle: function() {
this.language = this.$.switch.checked ? 'fr' : 'en';
}
});
</script>
</dom-module>
</body>
jsfiddle
I have a Polymer web app which I've generated with Yeoman. The below fragment shows how pages are defined in the index.html:
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<my-greeting></my-greeting>
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h2 class="paper-font-display2">Users</h2>
<p>This is the users section</p>
Rob
</paper-material>
</section>
So basically you define a section for each page.
Is it possible to define these sections as references to some external files? I would not want to add everything in the main index.html as it will get messy pretty soon.
It is possible but not in HTML unless you use ajax/ iFrames(No) to load the content and that would get ugly and would stop crawlers from properly crawling all your pages.
You would need to convert your pages to Java, Python, PHP, .net frameworks.
Since you sound new to this, I would just advise you to use WordPress.
There are many template there and it is easy to create and customise in the future.
Typically client side routing is used in single page applications, where the server-side code is primarily used to provide a RESTful API the client-side code uses via Ajax.
Then you would be look at using Angluar.js
Update:
Here's a cleaner version to do this:
<dom-module id="dyn-import">
<template>
<div id="container">
<link rel="import" href="{{href}}"/>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'dyn-import',
properties: {
href: {
type: String,
notify: true
}
},
attached: function() {
var container = this.$.container;
var link = Polymer.dom(container).querySelector('link[rel="import"]');
link.addEventListener('load', function() {
var importedDoc = link.import;
var importedNode = document.importNode(importedDoc.firstChild, true);
container.innerHTML = importedNode.innerHTML;
});
}
});
})();
The imported HTML can contain Polymer elements, that's working fine. The whole thing doesn't seem to be working on Safari. Also, I still seem to have some issues around relative URLS (say the imported HTML fragment references another Polymer element using HTML import - it does seem to work, but there's an error on the console and the URL in the error seems to have been constructed like this: web appreciation host + relative url which is clearly wrong).
I have finally solved this by writing a Polymer component (well, after all it's a Polymer application :)
<dom-module id="dyn-import">
<template>
<div id="{{id}}">
<link rel="import" href="{{href}}"/>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'dyn-import',
properties: {
href: {
type: String,
notify: true
},
id: {
type: String,
notify: true
}
},
ready: function() {
this.id = "ID_" + new Date().getTime();
},
attached: function() {
var sel = d3.select('#'+this.id);
var link = sel.select('link[rel="import"]');
link[0][0].addEventListener('load', function() {
var importedDoc = link[0][0].import;
var importedNode = document.importNode(importedDoc.firstChild, true);
sel.html(importedNode.innerHTML);
});
}
});
})();
</script>
This can then be used in the index.html as follows:
<section data-route="contact">
<paper-material elevation="1">
<dyn-import href="elements/contacts.html"></dyn-import>
</paper-material>
</section>
I have one further concern, is it a search engine friendly solution?
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
We have a custom element that is making an AJAX call to fetch some html generated on the server side and then injected into its light dom via Polymer.dom(this).innerHTML. The response coming from the server has another custom element in it that exposes a CSS property for theming purposes. On the main page, we're setting the value for the property, but it doesn't appear to be working. How do we get Polymer to style dynamically added light DOM elements that are distributed by another element.
index.html
<style is="custom-style">
x-bar {
--mixin-property: {
background: red;
};
}
</style>
...
<body>
<x-baz>
</x-baz>
</body>
x-baz.html
<dom-module id="x-baz">
<template>
<x-foo></x-foo>
</template>
</dom-module>
<script>
Polymer({
is: "x-baz"
});
</script>
x-foo.html
<dom-module id="x-foo">
<template>
<iron-ajax auto url="..." last-response="{{response}}"></iron-ajax>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: "x-foo",
properties: {
response: {
type: String,
obeserver: 'responseChanged'
}
},
responseChanged: function(newVal)
Polymer.dom(this).innerHTML = newVal;
}
});
</script>
x-bar.html
<dom-module id="x-bar">
<style>
.elementToStyle {
#apply(--mixin-property);
}
</style>
<template>
<div class="elementToStyle">
...
</div>
</template>
</dom-module>
</script>
Polymer({
is: "x-bar"
});
</script>
The iron-ajax call returns <x-bar> ... </x-bar>.
I would expect the div inside the x-bar that comes back from the AJAX response to have a red background, but it doesn't seem to be working. What do we need to adjust to make this work correctly?
Thanks in advance!