I have a paper-dialog in my Polymer element. I want to make the backdrop opaque, right now it is semi-transparent. I would also like to change the color.
Does anyone know how to do it. I have already tried this css in my custom element:
<style is="custom-style">
--iron-overlay-backdrop-opacity:1;
</style>
<paper-dialog modal></paper-dialog>
But it had no effect.
I also tried
<style is="custom-style">
:host {
--iron-overlay-backdrop-opacity:1;
}
</style>
<paper-dialog modal></paper-dialog>
The iron-overlay-backdrop is appended directly to the document body, outside of your custom element, and due to Polymer's CSS encapsulation, you can't style the backdrop with a <style> from within the element.
However, your element could imperatively style the backdrop with Polymer.updateStyles(...), which updates the styles for all custom elements, including the iron-overlay-backdrop outside your element:
Polymer.updateStyles({
'--iron-overlay-backdrop-background-color': 'red',
'--iron-overlay-backdrop-opacity': '1'
});
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
<div>Click button for dialog</div>
<x-demo></x-demo>
<dom-module id="x-demo">
<template>
<x-dialog id="blue" backdrop-color="blue" backdrop-opacity="1"></x-dialog>
<x-dialog id="red" backdrop-color="red" backdrop-opacity="0.2"></x-dialog>
<x-dialog id="green" backdrop-color="green" backdrop-opacity="0.5"></x-dialog>
<paper-button on-tap="_openDialog" data-dialog="blue">Blue (opacity 100%)</paper-button>
<paper-button on-tap="_openDialog" data-dialog="red">Red (opacity 20%)</paper-button>
<paper-button on-tap="_openDialog" data-dialog="green">Green (opacity 50%)</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-demo',
_openDialog: function(e) {
var dialog = e.target.dataset.dialog;
this.$[dialog].opened = true;
}
})
});
</script>
</dom-module>
<dom-module id="x-dialog">
<template>
<paper-dialog modal with-backdrop opened="{{opened}}">
<div class="buttons">
<paper-button dialog-dismiss>Close</paper-button>
</div>
</paper-dialog>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-dialog',
properties: {
backdropColor: {
type: String,
value: 'green'
},
backdropOpacity: {
type: String,
value: '0.6'
},
opened: {
type: Boolean,
value: false
}
},
observers: ['_updateBackdrop(opened, backdropColor, backdropOpacity)'],
_updateBackdrop: function(opened, color, opacity) {
if (opened && color && opacity) {
Polymer.RenderStatus.afterNextRender(this, function() {
this._setBackdropStyles(color, opacity);
});
}
},
_setBackdropStyles: function(color, opacity) {
Polymer.updateStyles({
'--iron-overlay-backdrop-background-color': color,
'--iron-overlay-backdrop-opacity': opacity
});
}
});
});
</script>
</dom-module>
</body>
codepen
Or to set a fixed static style for all backdrops, use <style is="custom-style"> from the body:
<body>
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 1;
--iron-overlay-backdrop-background-color: green;
}
</style>
<x-dialog></x-dialog>
</body>
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 1;
--iron-overlay-backdrop-background-color: green;
}
</style>
<div>Hello world</div>
<x-dialog></x-dialog>
<dom-module id="x-dialog">
<template>
<paper-dialog modal with-backdrop opened>
<div class="buttons">
<paper-button dialog-dismiss>Close</paper-button>
</div>
</paper-dialog>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-dialog' });
});
</script>
</dom-module>
</body>
codepen
Related
I have searched a lot on this, but could not find an answer. I have the following code :
netflix-search:
<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="netflix-search-criteria.html" rel="import">
<link href="netflix-search-result.html" rel="import">
<!-- Element Imports -->
</head>
<dom-module id="netflix-search">
<style>
/* CSS rules for your element */
</style>
<template>
<netflix-search-criteria></netflix-search-criteria>
<h1> here it is + {{criteria}}</h1>
<!--<netflix-search-result content="{{criteria}}"></netflix-search- result>-->
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search",
properties: {
}
},
ready: function(e){
}
});
</script>
The child element is :
<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="../bower_components/paper-material/paper-material.html" rel="import">
<link href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="../bower_components/paper-listbox/paper-listbox.html" rel="import">
<link href="../bower_components/paper-item/paper-item.html" rel="import">
<!-- Element Imports -->
</head>
<dom-module id="netflix-search-criteria">
<style>
/* CSS rules for your element */
</style>
<template>
<paper-material elevation="1">
<paper-dropdown-menu id="mymenu" label="What do you know about the content?" attr-for-selected="value"
selected="{{selItem}}" on-iron-select="_itemSelected">
<paper-listbox class="dropdown-content">
<paper-item>Movie Name</paper-item>
<paper-item>Actor</paper-item>
<paper-item>Director</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<template is="dom-if" if="{{show}}">
<paper-input label="Enter Search content" on-input="_search">
</paper-input>
<h1>{{criteria}}</h1>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search-criteria",
_itemSelected : function(e) {
console.log("Coming here" + e.target.selectedItem.innerText);
this.selItem = e.target.selectedItem.innerText;
if(this.selItem == 'Movie Name' || this.selItem == 'Actor'
|| this.selItem == 'Director')
{
this.show = true;
}
},
_search : function(e) {
var cont = e.target.value;
if(cont.length > 3){
this.criteria = this.selItem + "=" + cont;
console.log("Coming here" + this.criteria);
}
},
properties: {
selItem: {
type: String,
value: ""
},
show: {
type: Boolean,
value: false
},
criteria: {
type: String,
value: "Show",
notify: true,
reflecToAttribute: true
}
},
ready: function(e){
}
});
</script>
I want to pass the value criteria from child element to parent element. But not sure how to do that
Figured it out:
here is the code
parent class
<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="netflix-search-criteria.html" rel="import">
<link href="netflix-search-result.html" rel="import">
<!-- Element Imports -->
</head>
<dom-module id="netflix-search">
<style>
/* CSS rules for your element */
</style>
<template>
<netflix-search-criteria criteria={{content}}></netflix-search-criteria>
<netflix-search-result search="{{content}}"></netflix-search-result>
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search",
properties: {
content: {
type: String,
value: "No",
notify: true,
reflecToAttribute: true
}
},
ready: function(e){
}
});
</script>
child class:
<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="../bower_components/paper-material/paper-material.html" rel="import">
<link href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="../bower_components/paper-listbox/paper-listbox.html" rel="import">
<link href="../bower_components/paper-item/paper-item.html" rel="import">
<!-- Element Imports -->
</head>
<dom-module id="netflix-search-criteria">
<style>
/* CSS rules for your element */
</style>
<template>
<paper-material elevation="1">
<paper-dropdown-menu id="mymenu" label="What do you know about the content?" attr-for-selected="value"
selected="{{selItem}}" on-iron-select="_itemSelected">
<paper-listbox class="dropdown-content">
<paper-item>Movie Name</paper-item>
<paper-item>Actor</paper-item>
<paper-item>Director</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<template is="dom-if" if="{{show}}">
<paper-input label="Enter Search content" on-input="_search">
</paper-input>
<h1>{{content}}</h1>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search-criteria",
_itemSelected : function(e) {
console.log("Coming here" + e.target.selectedItem.innerText);
this.selItem = e.target.selectedItem.innerText;
if(this.selItem == 'Movie Name' || this.selItem == 'Actor'
|| this.selItem == 'Director')
{
this.show = true;
}
},
_search : function(e) {
var cont = e.target.value;
if(cont.length > 3){
this.criteria = this.selItem + "=" + cont;
console.log("Coming here" + this.criteria);
}
},
properties: {
selItem: {
type: String,
value: ""
},
show: {
type: Boolean,
value: false
},
criteria: {
type: String,
value: "Show",
notify: true,
reflecToAttribute: true
}
},
ready: function(e){
}
});
</script>
Using gridstack.io, I want to dynamially have a button that can "add a widget" into a specific area. I have a component "" that I want to add dynamically into the grid.
Given my following definition for my gridstack, How can I make it such that if I add a button that when you click on it, adds a new directive in the top-left corner, how do I accomplish that?
I have the following directive:
grid-stack-directive.ts:
import { Directive, OnInit, Input, ElementRef, Renderer } from '#angular/core';
declare var $: any; // JQuery
#Directive({
selector: '[gridStack]'
})
export class GridStackDirective implements OnInit {
#Input() w: number;
#Input() animate: boolean;
constructor(
private el: ElementRef,
private renderer: Renderer
) {
renderer.setElementAttribute(el.nativeElement, "class", "grid-stack");
}
ngOnInit() {
let renderer = this.renderer;
let nativeElement = this.el.nativeElement;
let animate: string = this.animate ? "yes" : "no";
renderer.setElementAttribute(nativeElement, "data-gs-width", String(this.w));
if(animate == "yes") {
renderer.setElementAttribute(nativeElement, "data-gs-animate", animate);
}
let options = {
cellHeight: 80,
verticalMargin: 10
};
// TODO: listen to an event here instead of just waiting for the time to expire
setTimeout(function () {
$('.grid-stack').gridstack(options);
}, 300);
}
}
grid-stack-item-directive.ts:
import { Directive, ElementRef, Input, Renderer, OnInit } from '#angular/core';
#Directive({
selector: '[gridStackItem]'
})
export class GridStackItemDirective {
#Input() x: number;
#Input() y: number;
#Input() w: number;
#Input() h: number;
#Input() minWidth: number;
#Input() canResize: boolean;
constructor(
private el: ElementRef,
private renderer: Renderer
) {
renderer.setElementAttribute(el.nativeElement, "class", "grid-stack-item");
}
ngOnInit(): void {
let renderer = this.renderer;
let nativeElement = this.el.nativeElement;
let cannotResize: string = this.canResize ? "yes" : "no";
let elementText: string = '<div class="grid-stack-item-content">' + nativeElement.innerHTML + '</div>';
// TODO: Find the Angular(tm) way to do this ...
nativeElement.innerHTML = elementText;
renderer.setElementAttribute(nativeElement, "data-gs-x", String(this.x));
renderer.setElementAttribute(nativeElement, "data-gs-y", String(this.y));
renderer.setElementAttribute(nativeElement, "data-gs-width", String(this.w));
renderer.setElementAttribute(nativeElement, "data-gs-height", String(this.h));
if(this.minWidth) {
renderer.setElementAttribute(nativeElement, "data-gs-min-width", String(this.minWidth));
}
if(cannotResize == "yes") {
renderer.setElementAttribute(nativeElement, "data-gs-no-resize", cannotResize);
}
}
}
app.component.html:
<h1>My First Grid Stack Angular 2 App</h1>
<section id="demo" class="darklue">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Demo</h2>
<hr class="star-light">
</div>
</div>
<div gridStack w="12" animate="true">
<div gridStackItem x="0" y="0" w="4" h="2">1</div>
<div gridStackItem x="4" y="0" w="4" h="4">2</div>
<div gridStackItem x="8" y="0" w="2" h="2" canResize="false" minWidth="2">
<span class="fa fa-hand-o-up"></span> Drag me!
</div>
<div gridStackItem x="10" y="0" w="2" h="2">4</div>
<div gridStackItem x="0" y="2" w="2" h="2">5</div>
<div gridStackItem x="2" y="2" w="2" h="4">6</div>
<div gridStackItem x="8" y="2" w="4" h="2">7</div>
<div gridStackItem x="0" y="4" w="2" h="2">8</div>
<div gridStackItem x="4" y="4" w="4" h="2">9</div>
<div gridStackItem x="8" y="4" w="2" h="2">10</div>
<div gridStackItem x="10" y="4" w="2" h="2">11</div>
</div>
</div>
</section>
index.html:
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel='stylesheet' type='text/css'>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- jquery -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
<script src="node_modules/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<script src="node_modules/jquery-easing/dist/jquery.easing.1.3.umd.min.js"></script>
<!-- underscore and gridstack -->
<script src="node_modules/underscore/underscore-min.js"></script>
<script src="node_modules/gridstack/dist/gridstack.js"></script>
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.min.css">
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack-extra.min.css">
<link rel="stylesheet" href="app/css/gridstack-demo.css">
<!-- bootstrap -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<!-- freelancer stuff -->
<script src="app/js/freelancer.js"></script>
<link rel="stylesheet" href="app/css/freelancer.css">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
you can make a "router" inside your gridStack directive - it will get a string represent the type of the desired component and load the it with ngIf
<div customGridStackItem1 *ngIf="itemType == 'stackItem1'"></div>
<div customGridStackItem2 *ngIf="itemType == 'stackItem2'"></div>
<div anotherGridStackItem *ngIf="itemType == 'anotherStackItem'"></div>
that way you will only load the component you need in each grid item
Is there any event that can be captured by a web component when the page is changed, or even a lifecycle callback?
I tried using the attached callback but it doesn't being fired again..
From the parent element of <iron-pages>, you could observe changes to <iron-pages>.selected to monitor the page index/name:
<head>
<base href="https://polygit.org/polymer+1.9.3/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-pages id="pages" selected="{{selected}}">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
<paper-button on-tap="_prev">Prev</paper-button>
<paper-button on-tap="_next">Next</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties : {
selected: {
type: Number,
value: 0,
observer: '_selectedChanged'
}
},
_selectedChanged: function(newPage, oldPage) {
console.log('<iron-pages>.selected', 'new', newPage, 'old', oldPage);
},
_prev: function() {
this.$.pages.selectPrevious();
},
_next: function() {
this.$.pages.selectNext();
}
});
});
</script>
</dom-module>
</body>
codepen
Or you could setup an event listener for the <iron-pages>.iron-select and <iron-pages>.iron-deselect events in order to watch the selected and deselected elements.
<head>
<base href="https://polygit.org/polymer+1.9.3/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-pages id="pages" selected="0"
on-iron-select="_pageSelected"
on-iron-deselect="_pageDeselected">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
<paper-button on-tap="_prev">Prev</paper-button>
<paper-button on-tap="_next">Next</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
_pageSelected: function(e) {
var page = e.detail.item;
console.log('page selected', page);
},
_pageDeselected: function(e) {
var page = e.detail.item;
console.log('page deselected', page);
},
_prev: function() {
this.$.pages.selectPrevious();
},
_next: function() {
this.$.pages.selectNext();
}
});
});
</script>
</dom-module>
</body>
codepen
Or you could configure <iron-pages>.selectedAttribute so that it sets an attribute on the newly and previously selected pages, which you could observe from within the page itself. When the page selection changes, the previously selected page's attribute is set to false, and the newly selected to true.
<head>
<base href="https://polygit.org/polymer+1.9.3/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-pages id="pages" selected="0" selected-attribute="selected">
<x-page data-name="p1">One</x-page>
<x-page data-name="p2">Two</x-page>
<x-page data-name="p3">Three</x-page>
</iron-pages>
<paper-button on-tap="_prev">Prev</paper-button>
<paper-button on-tap="_next">Next</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
_prev: function() {
this.$.pages.selectPrevious();
},
_next: function() {
this.$.pages.selectNext();
}
});
});
</script>
</dom-module>
<dom-module id="x-page">
<template>
<content id="content"></content>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-page',
properties: {
selected: {
type: Boolean,
value: false,
observer: '_selectedChanged'
}
},
_selectedChanged: function(selected) {
console.log('<x-page>.sel', this.dataset.name, selected);
}
});
});
</script>
</dom-module>
</body>
codepen
Yes there's the 'iron-select' event. You can create a listener on an element and have it listen for this event.
'iron-activate' is triggered right before the item changes, if you prefer.
Here's the link to all the iron-pages events: https://elements.polymer-project.org/elements/iron-pages#event-iron-activate
I don't know what the term would be in Polymer but I want to pass data from one polymer element to another element that it is using inside it.
<dom-module id="bw-boat-form">
<template>
<paper-material class="material-container" elevation="1">
<h2>{{heading}}</h2>
<form is="iron-form">
<bw-image-upload image$="{{ data.image }}" ></bw-image-upload>
</form>
</paper-material>
</template>
<script>
Polymer({
is: 'bw-boat-form',
properties: {
data: {
type: Object
},
save: {
type: Boolean
},
update: {
type: Boolean,
value: false
}
}
});
</script>
</dom-module>
And the image upload element
<dom-module is="bw-image-upload">
<template>
<iron-image class="image" preload placeholder="/images/icons/placeholder.jpg" sizing="cover"></iron-image>
<vaadin-upload
target="{{API_URL}}/images/upload"
max-files="1"
max-file-size="200000"
accept="image/*"
upload-success="uploadResponseHandler"
file-reject="errorHandler"
>
</vaadin-upload>
</template>
<script>
Polymer({
is: 'bw-image-upload',
ready: function() {
console.log(image);
},
uploadResponseHandler: function() {
},
errorHandler: function() {
}
})
</script>
</dom-module>
I want to pass down the value of the {{ data.image }} from the first element into the second element so that I can change the image of the placeholder when needed. How can I achieve this ?
Declare the image property in <bw-image-upload>:
<dom-module is="bw-image-upload">
...
<script>
Polymer({
is: 'bw-image-upload',
properties: {
image: String
}
});
</script>
</dom-module>
Bind that image to iron-image's placeholder property:
<dom-module is="bw-image-upload">
<template>
<iron-image placeholder="[[image]]"></iron-image>
</template>
...
</dom-module>
From your container element, set <bw-image-upload>'s image property with an attribute. Note: Don't use image$= as that syntax is intended for native element attributes, which doesn't apply here.
<dom-module id="bw-boat-form">
<template>
<bw-image-upload image="{{data.image}}"></bw-image-upload>
</template>
...
</dom-module>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-image/iron-image.html">
<link rel="import" href="paper-material/paper-material.html">
</head>
<body>
<template id="app" is="dom-bind">
<bw-boat-form heading="Kitty" data={{boatData}}></bw-boat-form>
</template>
<script>
HTMLImports.whenReady(function() {
console.log('ready');
var t = document.getElementById('app');
var boatData = {};
boatData.image = 'http://placekitten.com/400/200';
t.boatData = boatData;
});
</script>
<dom-module id="bw-boat-form">
<template>
<paper-material class="material-container" elevation="1">
<h2>{{heading}}</h2>
<form is="iron-form">
<bw-image-upload image="{{ data.image }}"></bw-image-upload>
</form>
</paper-material>
</template>
<script>
Polymer({
is: 'bw-boat-form',
properties: {
data: Object
}
});
</script>
</dom-module>
<dom-module is="bw-image-upload">
<template>
<style>
iron-image {
width: 440px;
height: 200px;
}
</style>
<iron-image class="image" preload placeholder="[[image]]" sizing="cover"></iron-image>
</template>
<script>
Polymer({
is: 'bw-image-upload',
properties: {
image: String
},
ready: function() {
console.log('bw-image-upload image', this.image);
}
})
</script>
</dom-module>
</body>
I have some issues with polymer and firebase, I managed to insert data into firebase but it throws an error
FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'updateArticole' of null
Below its my code so far.
<!doctype html>
<!--
#license
Copyright (c) 2015 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
-->
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit" />
<title>Soulmatters</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<link rel="import" href="../bower_components/firebase-element/firebase-auth.html">
<link rel="import" href="../bower_components/firebase-element/firebase.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/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<!-- endreplace-->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles">
body {
font-family: Roboto, sans-serif;
color: #333;
max-width: 700px;
width: 100%;
margin: 0 auto;
}
form {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
paper-button {
flex-shrink: 1;
}
paper-input {
flex-grow: 1;
}
paper-checkbox {
display: inline-block;
margin: 5px 0;
transition: opacity 0.3s;
}
paper-checkbox[checked] {
opacity: 0.5;
}
</style>
</head>
<body unresolved class="fullbleed layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<firebase-auth
auto-login
redirect
location="[[firebaseURL]]"
provider="[[firebaseProvider]]"
on-error="onFirebaseError"
on-login="onFirebaseLogin"></firebase-auth>
<paper-toast id="errorToast"></paper-toast>
<form on-submit="addItem">
<paper-input value="{{articolNou}}"
placeholder="Enter your item here..."></paper-input>
<paper-button on-click="addItem">Add</paper-button>
</form>
<template is="dom-repeat" items="{{articol}}">
<div>
<div>{{articolNou}}</div>
</div>
</template>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
And this is the app.js
(function(document) {
'use strict';
var app = document.querySelector('#app');
app.articole = [];
app.updateArticole = function(snapshot) {
this.articole = ['articole'];
snapshot.forEach(function(childSnapshot) {
var item = childSnapshot.val();
item.uid = childSnapshot.key();
this.push('articole', item);
}.bind(this));
};
app.addItem = function(event) {
event.preventDefault(); // Don't send the form!
this.ref.push({
text: app.articolNou
});
app.articolNou = '';
};
/*app.toggleItem = function(event) {
this.ref.
child(event.model.item.uid).
update({done: event.model.item.done});
};
app.deleteItem = function(event) {
this.ref.child(event.model.item.uid).remove();
};
*/
app.firebaseURL = 'https://soulmatters.firebaseio.com';
app.firebaseProvider = 'google';
app.onFirebaseError = function(event) {
this.$.errorToast.text = event.detail.message;
this.$.errorToast.show();
};
app.onFirebaseLogin = function(event) {
this.ref = new Firebase(this.firebaseURL + '/user/' +
event.detail.user.uid);
this.ref.on('value', function(snapshot) {
this.updateArticole(snapshot);
});
};
})(document);
Try to modify your code like this:
app.onFirebaseLogin = function(event) {
this.ref = new Firebase(this.firebaseURL + '/user/' +
event.detail.user.uid);
var self = this;
this.ref.on('value', function(snapshot) {
self.updateArticole(snapshot);
});
};