I'm having a hard time understanding how to create Web Components using Polymer. My purpose is just to display a string, an input-text and a button, when the button is clicked; the String is updated with the actual value of the input text.
Here is my first try :
<link rel="import" href="./../bower_components/polymer/polymer.html">
<dom-module id="neito-sidebar">
<template>
<style>
</style>
<label for="test">Name : </label>
<input type="text" name="test" id="test">
<button on-tap="_updateSpan">Valider</button>
<span>[[mot]]</span>
</template>
<script>
Polymer({
is: 'neito-sidebar',
properties: {
mot: String,
notify: true
},
_updateSpan: function()
{
this.mot = $('#test').val();
}
});
</script>
</dom-module>
Am I close to the result or do I have everything wrong ?
Oh I forgot, here the index.html that call my components :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="import" href="./components/neito-sidebar.html">
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/jquery/dist/jquery.js">
<title>Polymer Element</title>
</head>
<body>
<neito-sidebar></neito-sidebar>
</body>
</html>
And here is the structure of the project :
Actually, if you like to do with Polymer way, it's so easy, and even you don't need any js code either any button. What you input, will be appearing in the span.
<link rel="import" href="./../bower_components/polymer/polymer.html">
<link rel="import" href="./../bower_components/iron-input/iron-input.html">
<dom-module id="neito-sidebar">
<template>
<style></style>
<iron-input bind-value="{{mot}}">
<label for="test">Name : </label>
<input id="test" type="text" value="{{mot::input}}">
</iron-input>
<span>[[mot]]</span>
</template>
<script>
Polymer({is: 'neito-sidebar' });
</script>
</dom-module>
<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="iron-input/iron-input.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
:host {
display: block;
height: 100%;
}
span {
color:red;
}
</style>
<iron-input bind-value="{{mot}}">
<label for="test">Name : </label>
<input id="test" type="text" value="{{mot::input}}">
</iron-input>
<br/>
<span>[[mot]]</span>
</template>
<script>
HTMLImports.whenReady(function() {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() { return {
}};
static get observers() { return []}
}
customElements.define(XFoo.is, XFoo);
});
</script>
</dom-module>
</body>
</html>
I don't have the rights/points to comment on the previous solution, but you probably just need to make sure you have the polymer components that HakanC has suggested installed in the root directory of your app:
bower install --save PolymerElements/iron-input
Related
I'm writing a very basic WYSIWYG rich editor using Polymer 2.0 and contenteditable attribute of a div but experiencing issues with document.execCommand and executing the command insertunorderedlist. If you select and highlight the text you want to insert an unordered list and click button then it either fails to work correctly using Chrome (latest version) or if using Safari (latest version High Sierra), just hangs. If you try this outside of Polymer (plain old html and javascript) it works fine. Any ideas how to get this working with Polymer 2.0? Here's my code:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="polymerbasic-app">
<template>
<style>
:host {
display: block;
}
</style>
<button on-click="_insertunorderedlist" type="button">Insert Unordered List</button>
<div id="textBox" contenteditable="true">
Bullet One
<br> Bullet Two
<br> Bullet Three
</div>
</template>
<script>
/**
* #customElement
* #polymer
*/
class PolymerbasicApp extends Polymer.Element {
static get is() { return 'polymerbasic-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'polymerbasic-app'
}
};
}
_insertunorderedlist() {
document.execCommand("insertunorderedlist", false, null); this.$.textBox.focus();
}
}
window.customElements.define(PolymerbasicApp.is, PolymerbasicApp);
</script>
</dom-module>
And index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymerbasic</title>
<meta name="description" content="polymerbasic description">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/polymerbasic-app/polymerbasic-app.html">
</head>
<body>
<polymerbasic-app></polymerbasic-app>
</body>
</html>
I'm building a custom element. this is my code:
<!DOCTYPE html>
<html>
<template>
<link rel="stylesheet" type="text/css" href="pols-notifier.css">
<div class="body">
<button class="close"></button>
<div class="content"></div>
</div>
</template>
<script>
class PolsNotifier extends HTMLElement {
constructor() {
super();
this.currentDocument = document.currentScript.ownerDocument;
}
connectedCallback() {
const instance = this.currentDocument.querySelector('template').content.cloneNode(true);
this.attachShadow({mode: 'open'}).appendChild(instance);
}
}
window.customElements.define('pols-notifier', PolsNotifier);
</script>
</html>
And the page is:
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="http://localhost:8080/assets/pols-notifier/pols-notifier.html">
<body>
<pols-notifier></pols-notifier>
</body>
</html>
The console show an error when try load the stylesheet. The file of custom element and the stylesheet are in /assets/pols-notifier directory in my project but the navigator is looking /pols-notifier.css.
Why is looking there?
Greeting. Thanks.
I am working on building some pages in polymer to use in android web view.
demo code below
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
</head>
<body>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="trail-app">
<template>
<style>
</style>
<div id="content"></div>
</template>
<script>
Polymer({
is: "trail-app",
loadDataOne:function(data){
document.getElementById("content").innerHTML = data;
},
});
</script>
<script type="text/javascript">
function loadDataTwo(data) {
document.getElementById("content").innerHTML = data;
}
</script>
</dom-module>
<trail-app></trail-app>
</body>
</html>
So my problem here is if the function loadDataTwo is called like this myWebView.loadUrl("javascript:loadDataTwo('Hello World!')"); it is working fine.
But if the function loadDataOne is called same way its not working.How to resolve.
I tried myWebView.loadUrl("javascript:var temp = document.querySelector('trail-app');temp.loadDataOne('Hello World!')"); it worked fine.
I am working through some demo in Polymer. This one here:
https://www.polymer-project.org/components/core-ajax/demo.html
The code that works looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax this.</title>
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
</head>
<body>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</body>
</html>
Which works quite fine. But I want to encapsulate this demo inside of a polymer element, called "test-element.html", but it doesn't work:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="test-element">
<template>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</template>
<script>
Polymer('test-element', {
});
</script>
</polymer-element>
Nothing is beeing displayed, when I use the element and import in inside my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Playground</title>
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="test-element.html">
<link rel="import" href="ajax-feedback.html">
</head>
<body>
<style>
* {margin: 0; padding: 0;}
</style>
<h1>Hello World</h1>
<test-element></test-element>
<ajax-feedback></ajax-feedback>
</body>
</html>
Please can someone explain to me, why I can't just put the code of the demo inside a polymer element and then reimport it inside my index.html?
Thank you very much.
George.
Two things: document.querySelector() won't work here: polymer elements use the shadow dom, which will hide the elements from CSS and querySelector(), and you've done this the hard way. You shouldn't need <script> tags inside <template>, and you don't need to hard code JS to carry the response to where it's going to be used.
This is the easy way:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-ajax/core-ajax.html">
<polymer-element name="test-element" attributes="q">
<template>
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"{{q}}"}'
handleAs="json" response="{{response}}"></core-ajax>
<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>
</template>
<script>
Polymer({
response: null,
});
</script>
</polymer-element>
And then to use it:
<test-element q="chrome"></test-element>
I put a core-ajax element in a new polymer element but instead of a response I get an Access Control error. When I use the element alone in my index.html on the same url, I get a regular response. Any idea why this is happening?
Polymer Element:
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/core-ajax/core-ajax.html">
<polymer-element name="reddit-service" attributes="posts subreddit">
<template>
<style>
:host {
display: block;
}
</style>
<core-ajax
auto
url="http://reddit.com/.json"
on-core-response="{{ajaxResponse}}"
handleAs="json"></core-ajax>
</template>
<script>
Polymer('reddit-service', {
created: function() {
this.posts = [];
},
ajaxResponse: function(event, response) {
console.log(event);
}
});
</script>
</polymer-element>
index.html:
<!DOCTYPE html>
<html>
<head>
<!-- META AND STUFF -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Polymer Reddit App</title>
<!-- POLYMER -->
<script src="components/platform/platform.js"></script>
<link rel="import" href="components/core-ajax/core-ajax.html">
<link rel="import" href="components/core-header-panel/core-header-panel.html">
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="reddit-list.html">
</head>
<body unresolved>
<core-toolbar>Reddit with Polymer</core-toolbar>
<core-ajax
auto
url="http://www.reddit.com/.json"
handleAs="json"></core-ajax>
<script>
function handle(event, response) {
console.log(event);
}
document.addEventListener('core-response', handle, false);
</script>
</body>
</html>
In your custom element you're missing the www subdomain which seems to be required for it to work correctly.