How to build polymer app with some paper element example - javascript

I'am newbie in Polymer and Paper-Elements. I just make new blank polymer application, and try to run some example from paper-elements.
I created my blank polymer app using this.
Then I added paper-elements using bower - bower install --save PolymerElements/paper-elements
Then I copy paste this code:
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
</paper-input>
So my whole element.html looks like this:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html" >
<link rel="import" href="/bower_components/paper-input/paper-input.html" >
<link rel="import" href="/bower_components/iron-icons/iron-icons.html" >
<dom-module id="allegro-combo-box">
<template>
<style>
:host {
display: block;
}
paper-input {
max-width: 400px;
margin: auto;
}
iron-icon, div[suffix] {
color: hsl(0, 0%, 50%);
margin-right: 12px;
}
</style>
<h2>Hello [[prop1]]!</h2>
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
</paper-input>
</template>
<script>
/** #polymerElement */
class Mextends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-element'
}
};
}
}
window.customElements.define(MyElement.is, MyElement );
</script>
</dom-module>
Unfortunately this code won't work. Only <h2>Hello [[prop1]]!</h2> is working, the elements from paper doesn't.
How to fix it?
I tried to add "async" in imports but this doesn't helped.
Please help.
This are some errors in console:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
Uncaught TypeError: Cannot read property 'nativeMethods' of undefined

It looks like your import statements for the paper elements don't have the correct path. Try changing the path as follows:
<link rel="import" href="../../bower_components/paper-button/paper-button.html" >
<link rel="import" href="../../bower_components/paper-input/paper-input.html" >
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html" >

Related

Polymer - app-storage: Remove entry and update storage

I ran into a problem when trying to update the value of an array inside my .
I've been searching on google since last 4 hours, but no luck
I have the follwing 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-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
<dom-module id="my-view1">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
.form {
display: flex;
flex-direction: column;
}
.form paper-input {
flex: 1;
margin-right: 10px;
}
.form vaadin-date-picker {
flex: 1;
margin-top: 10px;
}
.form paper-button {
margin-top: 10px;
align-self: flex-end;
}
</style>
<div class="card">
<div class="form">
<paper-input label="Sum" value="{{todo.task}}" auto-validate placeholder="Suma" required=true pattern="[0-9]*" error-message="Numbers only"></paper-input>
<vaadin-date-picker label="Date" value="{{todo.due}}"></vaadin-date-picker>
<paper-button raised on-tap="_addToDo">Add</paper-button>
</div>
<br>
<vaadin-grid id="grid" items={{todos}}>
<vaadin-grid-column width="calc(50% - 100px)">
<template class="header">Sum</template>
<template>{{item.task}}</template>
</vaadin-grid-column>
<vaadin-grid-column width="calc(50% - 100px)">
<template class="header">Date</template>
<template>{{item.due}}</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template>
<div style="display: flex; justify-content: flex-end;">
<paper-button raised on-tap="_remove">remove</paper-button>
</div>
</template>
</vaadin-grid-column>
</vaadin-grid>
</div>
<app-localstorage-document key="todos" data="{{todos}}">
</app-localstorage-document>
</template>
<script>
class MyView1 extends Polymer.Element {
static get is() { return 'my-view1'; }
static get properties() {
return {
todo: {
type: Object,
value: () => { return {} }
},
todos: {
type: Array,
value: () => []
}
};
}
_addToDo() {
this.push('todos', this.todo);
this.todo = {};
};
_remove(e) {
var index = this.todos.indexOf(e.model.item);
this.todos.splice(index, 1);
this.$.grid.clearCache();
};
}
window.customElements.define(MyView1.is, MyView1);
</script>
</dom-module>
I'm trying to update localStorage after removing one of the items.
I have no idea how to "commit the update". Is there any way to update the localStorage after removing the item? Thanks!
If you manipulate an array using the native methods (like Array.prototype.splice), you must notify Polymer after the fact.
So, you can notify using notifySplices. More about notifySplices.
OR, use the Polymer methods for array mutations.
Every Polymer element has the following array mutation methods available:
push(path, item1, [..., itemN])
pop(path)
unshift(path, item1, [...,
itemN])
shift(path)
splice(path, index, removeCount, [item1, ..., itemN])
You are not required to notify if you are using Polymer array mutation method.
So, use this.splice('todos', index, 1) instead of this.todos.splice(index, 1);, this will notify changes made in the array todos which will reflect changes in the localstorage as well.

Polymer 1.0 how to show the value of paper input in vaadin grid after pushing button?

I am trying to create some paper input in Polymer. When I click the "calculate" icon next to the item, it doesn't show the value or the result of paper input. It looks like it's getting the wrong in calling the value (?), and I'm not sure how to fix it? Thanks!
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html">
<dom-module id="my-view2">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
.form paper-icon-button{
left: 45%;
height: 120px;
width: 120px;
}
.form paper-input{
margin-left: 150px;
margin-right: 150px;
}
</style>
<div class="card">
<div class="form">
<paper-input type="number" name="satu" label="BLABLABLA1" value="{{todo.satu}}"></paper-input>
<paper-input type="number" name="dua"label="BLABLABLA2" value="{{todo.dua}}"></paper-input>
<paper-input type="number" name="tiga"label="BLABLABLA3" value="{{todo.tiga}}"></paper-input>
<paper-icon-button src="calculator.ico" on-tap="_addTodo"></paper-icon-button>
</div>
<vaadin-grid item="{todos}">
<table>
<colgroup>
<col name="satu">
<col name="dua">
<col name="tiga">
</colgroup>
</table>
</vaadin-grid>
</div>
</template>
<script>
Polymer({
is: 'my-view2',
properties: {
todo: {
type: Object,
value: function() {
return {};
}
},
todos: {
type: Array,
value: function() {
return [];
}
}
},
_addTodo: function() {
this.push('todos', this.todo);
this.todo = {};
}
});
</script>
</dom-module>
your binding to item property of vaadin grid is invalid. You are missing one more brackets {}, plus property should be called items not item (according to documentation).

How to implement a paper-styled "<select multiple>" box with Polymer, without "paper-dropdown-menu"?

I'm working on a Polymer application that uses iron-form to submit a form to a back-end web-service. One of the elements in the form is a box where the user can select multiple elements.
Using the paper-dropdown-menu with a paper-listbox with multi set works, but the UX is horrible because the user can't see which elements are selected without opening the dropdown (and blocking other elements). Also - it requires more clicks to operate.
Ideally we'd just use the paper-listbox without the paper-dropdown-menu, as that is exactly the UI that we need - similar to HTML's classic <select multiple> but with a Material Design sheen. But without the paper-dropdown-menu wrapper, iron-form doesn't pick up on the paper-listbox selected values and will not submit those.
I've noticed that iron-form support classic HTML <select> (and even support the multiple behavior), but the UI for that is jarring in contrast with the rest of the form.
Is there something else that we can wrap around the paper-listbox to get the form to behave without modifying the original paper-listbox UI, or get paper-dropdown-menu to have an "always open" mode? If neither of those work (and I couldn't get either to work, BTW), what else can we do?
You could wrap the <paper-listbox> in a custom element that implements <iron-form-element-behavior>. The behavior exposes a value property, which could be bound to <paper-listbox>.selectedValues, allowing <iron-form> to submit the multiple listbox values:
<dom-module id="multi-listbox">
<template>
<paper-listbox multi selected-values="{{value}}">
<content></content>
</paper-listbox>
</template>
<script>
Polymer({
is: 'multi-listbox',
behaviors: [Polymer.IronFormElementBehavior]
});
</script>
</dom-module>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_onResponse: function(e) {
this._response = JSON.stringify(e.detail.response, null, 2);
},
_submit: function() {
this._response = null;
this.$.form.submit();
}
});
Polymer({
is: 'multi-listbox',
behaviors: [
Polymer.IronFormElementBehavior
],
properties: {
value: {
type: Array,
value: () => [],
notify: true
},
invalid: {
type: Boolean,
reflectToAttribute: true
}
},
validate: function() {
const isValid = !this.required || !!(this.value && this.value.length > 0);
this.invalid = !isValid;
console.log('invalid', this.invalid);
return isValid;
},
_clearError: function() {
this.invalid = false;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="iron-validatable-behavior/iron-validatable-behavior.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
multi-listbox,
paper-checkbox,
paper-button {
margin: 0.5em;
}
</style>
<paper-checkbox active="{{_required}}">Required</paper-checkbox>
<form is="iron-form"
id="form"
action="//httpbin.org/get"
on-iron-form-response="_onResponse">
<multi-listbox name="listbox-values" required="[[_required]]">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
<paper-item>Item 4</paper-item>
</multi-listbox>
<paper-button raised
on-tap="_submit">Submit</paper-button>
</form>
<pre>[[_response]]</pre>
</template>
</dom-module>
<dom-module id="multi-listbox">
<template>
<style>
:host {
display: block;
}
paper-listbox {
border: solid 2px lightgray;
}
:host([invalid]) paper-listbox {
border: solid 2px var(--error-color, red);
}
</style>
<paper-listbox multi
selected-values="{{value}}"
on-iron-activate="_clearError">
<content></content>
</paper-listbox>
</template>
</dom-module>
</body>
codepen

polymer could not style custom tag in repeat template

trying to style the paper-button inside the template, I've tried different sectors and only one is worked so how can i do the styling correctly.
so in the index.html i call iron-ajax element and one the last-response i call a dom-repeat template
<iron-ajax id="aj" auto
url="url"
handle-as="json"
last-response="{{ajaxResponse}}"
contentType="text/HTML"
debounce-duration="300"></iron-ajax>
<div class="video">
<template is="dom-repeat" items="[[ajaxResponse]]" >
<paper-card image="[[item.fields.image]]">
<feed-bdy items="[[item]]"></feed-bdy>
and in the feed-bdy.html :
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<dom-module is="feed-bdy">
<style >
:host{
--paper-button-ink-color: var(--paper-pink-a200);
paper-button.custom:hover{ background-color: var(--paper-indigo-100) !import; }
}
:host paper-button.rea:hover{
--paper-button-ink-color: var(--paper-pink-a200);
color: red
}
--paper-button.custom:hover {
background-color: var(--paper-indigo-100) !import;
color: white !important;
}
paper-button:hover{
background-color:red !important;
}
</style>
<template id="repeater" is="dom-repeat" items="{{items}}">
<div class="card-content">
<div class="ar-header">
<h3> [[items.fields.title]]</h3>
</div>
<div class="content-bdy"></div>
</div>
[[_renderHTML(items)]]
<div class="card-actions">
<paper-button class="custom">إقراء المزيد !</paper-button>
<paper-button>
شارك
<iron-icon icon="reply"></iron-icon>
</paper-button>
</div>
</template>
<script>
Polymer({
is: 'feed-bdy',
properties: {
artId:{
type : String,
observer: '_renderHTML'
}
},
listeners :{
},
_renderHTML: function(items) {
// firstp to get only the first pargarph to put in the home page
var ss= items.fields.body;
//console.log(this.$$(".card-content"));
var firstp = ss.substring(0,ss.search("</p>")+4);
this.$$(".content-bdy").innerHTML += firstp;
},
_toggle : function(e){
var id = Polymer.dom(e).localTarget.title;
//console.log(id);
var moreInfo = document.getElementById(id);
// console.log(moreInfo);
var iconButton = Polymer.dom(e).localTarget;
iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-up'
: 'hardware:keyboard-arrow-down';
moreInfo.toggle();
}
});
</script>
</dom-module>
There are a few issues with your CSS:
import! should be important!
Mixins and custom properties need to be defined within a selector:
INCORRECT
<style>
--paper-button: {
/** Some styles */
}
--paper-button-ink-color: blue;
</style>
CORRECT
<style>
:host {
--paper-button: {
/** Some styles */
}
--paper-button-ink-color: blue;
}
</style>
Mixins and custom properties are not selectors:
INCORRECT
<style>
--paper-button.special-css-class {
/** Some styles */
}
</style>
Instead, you can use the .special-css-class as your selector, and define your mixin/custom property for any element that matches:
CORRECT
<template>
<style>
.special-css-class {
--paper-button: {
/** Some styles */
}
--paper-button-ink-color: blue;
}
</style>
<paper-button class="special-css-class"></paper-button>
<!-- This button won't have your custom styles! -->
<paper-button></paper-button>
</template>
At least for paper-button, you need not use custom properties/mixins if you just want to specify the color and background color:
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-button {
background-color: purple;
color: red;
}
</style>
<template is="dom-repeat" items="{{items}}">
<paper-button>Click Me</paper-button>
</template>
</template>
<script>
Polymer({
is: 'x-foo',
properties: {
items: {
value: [1, 2, 3, 4]
}
}
});
</script>
</dom-module>

Custom Menu element click event for Polymerjs

I have created one simple polymer custom element for menu.
I know, already polymer is having element for creating menu, but I am creating one component which will show menu on your website.
Now, here is my menu.html (custom element)
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<polymer-element name="my-menu">
<template>
<style>
core-header-panel {
background: white;
}
core-toolbar {
background-color: #03A9F4;
}
#navheader {
background-color: #56BA89;
}
.content {
padding: 20px;
}
/* drawer is always visible on a wide screen
so menu button isn't required */
core-drawer-panel:not([narrow]) #navicon {
display: none;
}
</style>
<core-drawer-panel id="drawerPanel">
<core-header-panel drawer>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel main>
<core-toolbar id="mainheader">
<paper-icon-button id="navicon" icon="menu" on-click="{{togglemenu}}"></paper-icon-button>
<span flex>Title</span>
</core-toolbar>
<div class="content">
If drawer is hidden, press button to display drawer.
</div>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
Polymer('my-menu', {
ready: function () {
// alert("hello");
},
togglemenu: function () {
var drawerPanel = document.getElementById('drawerPanel');
// drawerPanel.togglePanel();
console.log(drawerPanel);
}
});
</script>
</polymer-element>
Now,
As you can seen till now, that when togglemenu function is called, i want to togglepanel, but i am not able to do that.
anyway to achieve this ?
when you are working inside a custom element you can use the polymer selector to select the element in the shadow dom. that would make your togglemenu function look more like
togglemenu: function () {
var drawerPanel = this.$.drawerPanel;
drawerPanel.togglePanel();
}
in this function this.$.drawerPanel is selecting the same way as document.getElementById('drawerPanel') except getElementById is looking on the document level and not this elements shadow dom.

Categories

Resources