How to set iron-icon size inside paper-badge? - polymer

I have a paper-badge with an icon attribute set. I am able to change the size of the badge, but I also want to change the size of the icon inside it.
How can I do that? Thanks


The <paper-badge> currently doesn't support CSS properties to modify the icon's size (it's hard-coded to 12x12). However, you could change icon's size in JavaScript by selecting the badge's <iron-icon> and setting its style.width and style.height:
// template
<paper-badge id="badge"></paper-badge>
// script
const icon = this.$.badge.$$('iron-icon');
icon.style.width = '20px';
icon.style.height = '20px';
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
attached: function() {
const icon = this.$.badge.$$('iron-icon');
icon.style.width = '20px';
icon.style.height = '20px';
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-badge/paper-badge.html">
<link rel="import" href="iron-icons/iron-icons.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-badge {
--paper-badge-margin-bottom: -40px;
}
</style>
<div>
<paper-button id="btn">Status</paper-button>
<paper-badge id="badge" icon="favorite" for="btn" label="favorite icon"></paper-badge>
</div>
</template>
</dom-module>
</body>

Related

Polymer 1.x: Imperatively accessing DOM nodes inside a dom-if template

Here is my jsBin.
I want to access by its id a DOM node inside a dom-if template. With my existing code, I expect to see true when attempting to cast these nodes to Booleans, but instead I get false (i.e., undefined).
Steps to recreate the problem:
Open this jsBin.
Understand that the HTML pane on the right is working correctly by showing Foo and Bar and not showing Baz.
Observe the console and understand the id="foo" node is accessible but the id="bar" and id="baz" elements are not. And this is my problem.
How can I access those nodes imperatively?
http://jsbin.com/kemoravote/1/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-form/iron-form.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<div id="foo">Foo</div>
<template is="dom-if" if="{{show}}">
<div id="bar">Bar</div>
</template>
<template is="dom-if" if="{{!show}}">
<div id="baz">Baz</div>
</template>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
show: {
type: Boolean,
value: function() {
return true;
}
}
},
attached: function() {
console.log('foo', !!this.$.foo);
console.log('bar', !!this.$.bar);
console.log('baz', !!this.$.baz);
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>

The $ selector won't work. You have to use $$ as follows:
console.log('baz', !!this.$$('#baz'));
Here is the jsBin.
http://jsbin.com/xogediyato/1/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-form/iron-form.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<div id="foo">Foo</div>
<template is="dom-if" if="{{show}}">
<div id="bar">Bar</div>
</template>
<template is="dom-if" if="{{!show}}">
<div id="baz">Baz</div>
</template>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
show: {
type: Boolean,
value: function() {
return true;
}
}
},
attached: function() {
console.log('foo', !!this.$.foo);
console.log('bar', !!this.$.bar);
console.log('baz', !!this.$.baz);
console.log('bar', !!this.$$('#bar'));
console.log('baz', !!this.$$('#baz'));
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>

Using withBackdrop for paper-dialog prevents controls from being focused via tabbing

I have a paper-dialog that uses the with-backdrop property. I've noticed that after clicking anywhere within a paper-dialog that does not use the with-backdrop property, I can hit the tab key and the browser will focus the input element:
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
ready: function() {
this.$$('paper-dialog').open();
}
});
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<paper-dialog>
<h2 class="header">Hello</h2>
<paper-input
label="Focusable input"
tabindex
type="text">
</paper-input>
</paper-dialog>
</template>
</dom-module>
<x-example></x-example>
If I set the with-backdrop property, however, the browser will not focus the input element:
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
ready: function() {
this.$$('paper-dialog').open();
}
});
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<paper-dialog with-backdrop>
<h2 class="header">Hello</h2>
<paper-input
label="Focusable input"
tabindex
type="text">
</paper-input>
</paper-dialog>
</template>
</dom-module>
<x-example></x-example>
Is there a way to have a backdrop and still allow the dialog to navigatable via the keyboard?
Device info: I am experiencing this issue running Chrome v50 on OSX.

Seems to be issue with versions that you are using. I tried it on Polymer's website and my local and this seems to be working fine. Below are the versions that i used:
Paper-dialog: 1.0.4
Polymer: 1.3.2
Paper-input: 1.0.18
I'll also recommend you to open up an issue on Github for the same

In the demo, I included the tabindex attribute in my input element without specifying a value. Removing this property allowed the input to be focused:
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
ready: function() {
this.$$('paper-dialog').open();
}
});
});
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style>
:host {
display: block;
}
</style>
<template>
<paper-dialog with-backdrop>
<h2 class="header">Hello</h2>
<paper-input
label="Focusable input"
type="text">
</paper-input>
</paper-dialog>
</template>
</dom-module>
<x-example></x-example>

Autosize the paper-dropdown-menu width

I have the following
<!doctype html>
<html>
<head>
<script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
</head>
<body unresolved>
<dom-module id='base-page'>
<template>
<paper-dropdown-menu>
<paper-listbox class='dropdown-content' selected='0'>
<paper-item>This is a very long text that I have in my paper drop down</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {Polymer({
is: 'base-page',
properties: {
}
});});
</script>
<base-page></base-page>
</body>
The selected text is "This is a very long text that I have in my paper drop Down", but it gets cut off. Is there a way that I can get the paper-dropdown-menu to autosize the Width?
Placed something here to play with: http://jsbin.com/dejukufaqe/edit?html,output
Cheers

To accomplish this, you'd have to calculate the pixel width of each string in the paper-list in a given font, get the maximum of the widths, and set the paper-dropdown-menu's width to that value.
See the demo below. The width is limited to the container's width so that it doesn't expand off the page.
<head>
<meta charset="utf-8">
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
</head>
<body>
<base-page></base-page>
<dom-module id='base-page'>
<style>
paper-dropdown-menu {
max-width: 100%;
}
</style>
<template>
<paper-dropdown-menu id="menu">
<paper-listbox id="list" class='dropdown-content' selected='0'>
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>This is a very very long long text that I have in my paper drop down</paper-item>
<paper-item>Baz</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: 'base-page',
ready: function() {
this.$.menu.style.width = this.maxTextWidth() + 'px';
},
maxTextWidth: function() {
var font = 'normal 13pt Roboto,Arial';
var widths = this.$.list.items.map(function(item) {
var text = item.textContent && item.textContent.trim();
return text ? getTextWidth(text, font) : 0;
});
return Math.max.apply(Math, widths);
}
});
// http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
function getTextWidth(text, font) {
// if given, use cached canvas for better performance
// else, create new canvas
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}
</script>
</dom-module>
</body>
jsbin

Polymer 1.0 Child element not firing to parent

I'm having trouble trying to fire an event from a child element to its parent on Polymer 1.0, and I can't see what am I doing wrong.
EDITED: Add more code
Child's code:
<link rel="import" href="../components/polymer/polymer.html" />
<link rel="import" href="../components/iron-input/iron-input.html" />
<link rel="import" href="../components/iron-icon/iron-icon.html" />
<link rel="import" href="../components/paper-input/paper-input container.html" />
<link rel="import" href="../components/paper-input/paper-input-error.html" />
<link rel="import" href="../components/iron-input/iron-input.html" />
<link rel="import" href="custom-table.html" />
<dom-module id="master-admin">
<style is="custom-style">
[...]
</style>
<template>
<custom-table selectable collist="{{columns}}" data="{{data}}">
</custom-table>
<div id="newrow" class="horizontal layout" hidden>
<template is="dom-repeat" items="{{columns}}" as="col">
<paper-input-container class="container flex">
<label class="label">{{col.name}}</label>
<input class="input" id="input" is="iron-input">
</paper-input-container>
</template>
</div>
<div id="iconsdiv" class="horizontal layout">
<iron-icon id="adicon" icon="add-circle" on-click="addrow"></iron-icon>
<div class="flex"></div>
<iron-icon id="delicon" icon="cancel" on-click="delrow"></iron-icon>
<iron-icon id="edicon" icon="create" on-click="editrow"></iron-icon>
</div>
</template>
<script>
Polymer({
is: 'master-admin',
properties: {
doctype: String,
columns: Array,
data: Array
},
datachanged: function () {
debugger;
var updatedata = {
data: this.data,
doctype: this.doctype
};
this.fire('data-updated', updatedata);
},
addrow: function (e) {
[...]
this.datachanged();
},
delrow: function (e) {
[...]
this.datachanged();
},
editrow: function (e) {
[...]
this.datachanged();
}
});
</script>
</dom-module>
On parent:
<master-admin
doctype="{{master.DocumentalTypeId}}"
columns="{{master.Columns}}"
data="{{master.Data}}"
on-data-updated="masterupdated">
</master-admin>
masterupdated: function () {
alert('updated master!');
}
Just to be clear, datachanged works just fine and it's called when it should. masterupdated on the parent does not.
The alert is never firing, nor the code gives any error. I guess is just something with Polymer 1.0 that works different.

The basic setup you describe does work, there must be a problem in the details somewhere. Here is an example:
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://milestech.net/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<x-parent></x-parent>
<hr>
<dom-module id="master-admin">
<template>
<button on-tap="updateData">Update Data</button>
</template>
<script>
// only need this when both (1) in the main document and (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'master-admin',
updateData: function() {
this.fire('data-updated');
}
});
});
</script>
</dom-module>
<dom-module id="x-parent">
<style>
</style>
<template>
<master-admin on-data-updated="masterupdated"></master-admin>
</template>
<script>
// only need this when both (1) in the main document and (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-parent',
masterupdated: function() {
document.body.appendChild(this.create('h3', {textContent: 'data-updated!'}));
}
});
});
</script>
</dom-module>
</body>

Can you try this?
<template is="dom-bind" id="t">
<master-admin
doctype="{{master.DocumentalTypeId}}"
columns="{{master.Columns}}"
data="{{master.Data}}"
on-data-updated="masterupdated">
</master-admin>
</template>
<script>
var template = document.querySelector('#t');
template.masterupdated= function () {
consloe.log("MASTER UPDATED!!");
};
</script>

Setting the height of core-pages elements?

I'm having a lot of trouble getting a core-pages element to have a non-zero height within my custom element. What is the best practice for having the core-pages height be the same as its selected content. Here's a trivial example which clearly breaks:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
</head>
<body>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">
<polymer-element name="x-foo">
<template>
<core-pages id="pages" selected="{{selected}}">
<content></content>
</core-pages>
</template>
<script>
Polymer('x-foo', {
ready: function() {
this.selected = 0;
}
});
</script>
</polymer-element>
<polymer-element name="x-bar">
<template>
<div><content></content></div>
</template>
<script>
Polymer('x-bar', {});
</script>
</polymer-element>
<p>BEFORE</p>
<x-foo>
<x-bar>some text here</x-bar>
<x-bar>some other text here</x-bar>
</x-foo>
<p>AFTER</p>
</body>
</html>
And the jsbin to see the results: http://jsbin.com/xowoxakuwu/1/edit (notice how the core pages content overlaps with the next element)
This example shows a core-pages element within a custom element. The content that gets injected into the core-pages are also custom elements.
Whats the best practice here?

You can apply a style to the currently selected page in the x-foo element which sets display: block and position: relative so x-bar will inherit the height of it's content.
I've also added the "block" attribute to the x-foo element so it too inherits the height of the selected page. Other general attributes are here -> https://www.polymer-project.org/docs/polymer/layout-attrs.html#general-purpose-attributes
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">
<polymer-element name="x-foo" block>
<template>
<style>
::content > .core-selected {
position: relative;
display: block;
}
</style>
<core-pages id="pages" selected="{{selected}}">
<content></content>
</core-pages>
</template>
<script>
Polymer('x-foo', {
ready: function() {
this.selected = 0;
}
});
</script>
</polymer-element>
<polymer-element name="x-bar">
<template>
<div>
<content></content>
</div>
</template>
<script>
Polymer('x-bar', {});
</script>
</polymer-element>
<p>BEFORE</p>
<x-foo>
<x-bar>some text here</x-bar>
<x-bar>some other text here</x-bar>
</x-foo>
<p>AFTER</p>