My index.html is like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard</title>
<!-- 1. Load webcomponent support before any code that touches the DOM -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/each-key.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style>
#keyboard-layout {
#apply(--layout-horizontal);
}
</style>
</head>
<body>
<div id="keyboard-layout">
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
<each-key english="A" shiftup="ꯃ" shiftdown="ꯝ"></each-key>
</div>
</body>
</html>
I'm expecting each-key will be arranged side by side (like float:left); however it is not (and each-key still behaves like display:block). I've my each-key.html as
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">
<dom-module id="each-key">
<style>
.key{
min-height: 50px;
max-height: 80px;
border: 1px solid rgba(0,0,0,.6);
position: relative;
}
paper-ripple {
color: #4285f4;
}
.key>div { position: absolute; }
.top-left { left: 4px; top: 4px; }
.top-right { right: 4px; top: 0; }
.bottom-left { left: 4px; bottom: 4px; }
.bottom-right { right: 4px; bottom: 0; }
</style>
<template>
<div class="key" >
<div class="top-left"></div>
<div class="top-right">{{shiftdown}}</div>
<div class="bottom-left">{{english}}</div>
<div class="bottom-right">{{shiftup}}</div>
<paper-ripple fit></paper-ripple>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'each-key',
properties: {
'english' : String,
'shiftup': String,
'shiftdown': String
}
});
</script>
Is there something I'm missing here?
In the documentation, https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes, in the <style> section, what what does it mean by /*layout properties for the host element */ (what is a host element?) and /* layout properties for a local DOM element */ (what is a local DOM in this context? local DOM === shadow DOM?) ?
The CSS mixins only work inside dom-module's, the classes work outside as well - I don't know why, I had to try it out as well...
This would work:
<body class="layout horizontal">
But the more polymeric way would probably be to wrap the complete thing inside a dom-module:
<dom-module id="all-keys">
<style>
#keyboard-layout {
#apply(--layout);
#apply(--layout-horizontal);
}
</style>
<template>
<div id="keyboard-layout" >
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
</div>
</template>
<script>
Polymer({is: 'all-keys'});
</script>
</dom-module>
If you also add a min-width to your each-key then this works ok:
<dom-module id="each-key">
<style>
:host {
min-width: 50px;
}
or alternatively:
<dom-module id="each-key">
<style>
:host {
#apply(--layout-flex);
}
This also answers your question two: :host is to determine the attributes of the dom-module instance.
In other words, you can leave the <div id="keyboard-layout" > away:
<dom-module id="all-keys">
<style>
:host {
#apply(--layout);
#apply(--layout-horizontal);
}
</style>
<template>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
<each-key english="A" shiftup="U" shiftdown="D"></each-key>
</template>
<script>
Polymer({is: 'all-keys'});
</script>
</dom-module>
The complete working source is on: http://jsbin.com/qanesapupo/1/edit?html,output
Related
I am trying to create a simple app. It has a profile button, and when the profile button is pressed I would like it to be routed to the Userprofile page. I am quite new to Polymer and routing in general, and would appreciate if some could advice what I am doing wrong. Here is my code snippet. I am using polymer 1.6, and using app-route, app-location. I have defined them, and am using iron-pages to select the route (NOT SURE IF THAT IS CORRECT).
cst-tririga-ux.html
<!-- POLYMER IMPORTS -->
<link rel='import' href='../paper-icon-button/paper-icon-button.html'>
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-badge/paper-badge.html">
<!-- APP TOOLBAR -->
<link rel="import" href='app-layout.html'>
<!-- IRON IMPORTS -->
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<!-- TRIRIGA IMPORTS -->
<link rel="import" href="../triplat-view-behavior/triplat-view-behavior.html">
<link rel="import" href="../triplat-signout-button/triplat-signout-button.html">
<link rel="import" href="../triplat-ds/triplat-ds.html">
<!-- CUSTOM COMPONENTS -->
<link rel="import" href="profile/user-profile.html">
<link rel="import" href="notifications/notifications-view.html">
<dom-module id="cst-tririga-ux">
<template>
<style>
paper-input-container.my-class {
--paper-input-container-color: red;
--paper-input-container-focus-color: blue;
--paper-input-container-invalid-color: green;
--paper-input-container-input-color: black;
}
paper-badge {
--paper-badge-margin-left: -8px;
--paper-badge-margin-bottom: -12px;
--paper-badge-background: #D50000;
};
html, body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
background: #f1f1f1;
max-height: 368px;
}
paper-icon-button {
--paper-icon-button-ink-color: white;
}
paper-icon-button + [main-title] {
margin-left: 24px;
}
app-header {
#apply(--layout-fixed-top);
color: #fff;
--app-header-background-rear-layer: {
background-color: #ef6c00;
};
}
app-drawer {
--app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
--app-drawer-content-container: {
background-color: #f4f6f7;
}
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
<!-- DECLARATIONS -->
<triplat-ds id="currentDS" name="currentUser" data="{{currentUser}}"></triplat-ds>
<triplat-ds id="myNotificationsDS" name="myNotifications" data="{{myNotifications}}"></triplat-ds>
<app-location use-hash-as-path route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/:view" data="{{routeData}}" tail="{{subroute}}"></app-route>
<body>
<app-header reveals>
<app-toolbar>
<paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
<div main-title>Spork</div>
<paper-icon-button icon="account-circle" id="profile" on-tap="redirectToProfile"></paper-icon-button>
<paper-icon-button icon="mail" id="notifications"></paper-icon-button>
<paper-badge for="notifications" label="{{myNotifications.length}}"></paper-badge>
<triplat-signout-button></triplat-signout-button>
</app-toolbar>
<iron-pages selected="[[routeData.view]]" attr-for-selected="name">
<user-profile name="profile" route="{{subroute}}"></user-profile>
<notifications-view name="notifications" route="{{subroute}}"></notifications-view>
</iron-pages>
</app-header>
<app-drawer id="drawer" swipe-open>
<paper-menu selected="0">
<paper-item>Item One</paper-item>
<paper-item>Item Two</paper-item>
<paper-item>Item Three</paper-item>
</paper-menu>
</app-drawer>
</body>
</template>
<dom-module>
<script>
Polymer({
is: "cst-tririga-ux",
behaviors: [TriPlatViewBehavior],
// Display in browser title.
ready: function() {
var __dictionary__title = "Prudential CRE";
document.title = __dictionary__title;
},
redirectToProfile : function(el) {
var currUser = this.currentUser;
location.pathname = "/#/profile"
}
});
</script>
The user-profile and the notifications-view are just templates. Currently, when I am clicking on the my-profile button. Nothing seems to be happening. Not sure what I am doing wrong. Here is my user-profile.html
<dom-module id="user-profile">
<template>
<div>My user page</div>
</template>
</dom-module>
<script>
Polymer({
is: "user-profile",
});
</script>
I want this...
Below is a paper-dialog implementation. It contains whitespace at the top and bottom of the dialog element. I want to eliminate the white space.
http://jsbin.com/bupicetoma/1/edit?html,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="paper-dialog/paper-dialog.html" rel="import">
<link href="paper-menu/paper-menu.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
--paper-menu {
margin: 0 !important;
padding: 0 !important;
}
paper-menu {
padding: 0 !important;
}
paper-item:hover {
background-color: red;
}
paper-item {
--paper-item: {
cursor: pointer;
margin: 0;
};
}
</style>
<button on-tap="show">Show</button>
<paper-dialog id="dia">
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
</paper-menu>
</paper-dialog>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {},
show: function() {
this.$.dia.open();
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
... to resemble this.
I want the paper-menu inside the dialog to look like the following paper-menu without any whitespace.
http://jsbin.com/hovayitela/1/edit?html,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="paper-menu/paper-menu.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style>
--paper-menu {
margin: 0 !important;
padding: 0 !important;
}
paper-menu {
padding: 0 !important;
}
paper-item:hover {
background-color: red;
}
paper-item {
--paper-item: {
cursor: pointer;
margin: 0;
};
}
</style>
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
</paper-menu>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {},
show: function() {
this.$.dia.open();
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
How can I accomplish this?
Your CSS mixin (--paper-menu) should be declared inside a rule (it's currently outside any rules). I would move that into the paper-menu rule:
paper-menu {
margin: 0 !important;
padding: 0 !important;
}
jsbin
FYI, that whitespace is from paper-dialog-shared-styles.html.
In my custom element's definition, I have the following code:
<dom-module id="dom-element">
<style>
p {
--test: brown;
color: var(--test);
}
</style>
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
<script>
Polymer({
is: "dom-element"
});
</script>
</dom-module>
However, the CSS custom property isn't working. Polymer just turns this:
p {
--test: brown;
color: var(--test);
}
into this:
p {
color: ;
}
But I want the output to be:
p {
color: brown;
}
The demo can be found here: http://plnkr.co/edit/ogMVPKNvc7SYISomWPWm?p=preview
If I don't use Polymer, and create the custom element in pure JavaScript, the CSS custom property works as expected.
I have searched Google, but didn't find something related. What's the problem here? How can I use the CSS custom property with Polymer?
Polymer 1's CSS shim (enabled by default) apparently doesn't handle the CSS variable declaration in the same rule that uses it, so you'd have to move the declaration to :host in this scenario.
<!-- inside dom-module's template -->
<style>
:host {
--test: brown;
}
p {
color: var(--test);
}
</style>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<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">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
:host {
--test: brown;
}
p {
color: var(--test);
}
</style>
<p>Hello world</p>
</template>
</dom-module>
</body>
However, you can enable native CSS properties in Polymer with a global setting (useNativeCSSProperties) declared before importing polymer.html, which would allow your code to work as-is:
<script>window.Polymer = {lazyRegister: true, useNativeCSSProperties: true};</script>
<!-- import polymer.html here -->
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<script>window.Polymer = {dom: 'shadow', lazyRegister: 'max', useNativeCSSProperties: true};</script>
<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">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
p {
--test: brown;
color: var(--test);
}
</style>
<p>Hello world</p>
</template>
</dom-module>
</body>
codepen
I don't want to use JQuery to do this. Currently, I've created a listview using Polymer. I'm using <template is="dom-repeat"> inside a parent div with a class of list.
The CSS is as follows. As I add new items to the list, I would like the list to scroll to the bottom automatically. Is that possible?
.list {
#apply(--layout-flex);
#apply(--layout-vertical);
position: relative;
overflow: auto;
}
You can set the div's scrollTop to scrollHeight in order to automatically scroll to the bottom:
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: () => []
}
},
_addItem: function() {
this.push('items', this.items.length+1);
Polymer.RenderStatus.afterNextRender(this, () => {
this.$.list.scrollTop = this.$.list.scrollHeight;
});
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
#list {
border: solid 1px gray;
width: 100%;
height: 100px;
overflow: auto;
}
</style>
<button on-tap="_addItem">Add item</button>
<div id="list">
<template is="dom-repeat" items="[[items]]">
<div>[[item]]</div>
</template>
</div>
</template>
</dom-module>
</body>
codepen
Here is my layout. Without iron-list it works, but with it it gives me the error
Uncaught TypeError: this.$.selector.clearSelection is not a function
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../common-settings-service/common-settings-service.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="common-settings">
<style>
:host {
display: block;
}
paper-material {
background: #FFFFFF;
}
.container {
#apply(--layout-horizontal);
}
.windowItem {
#apply(--layout-horizontal);
}
.list {
#apply(--layout-flex);
#apply(--layout-vertical);
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
</style>
<template>
<common-settings-service
id="commonSettings"
url="/board_service/common_settings/"
settings="{{settings}}"/>
<paper-material elevation="1">
<div class="container">
<h3> Настройки обработки</h3>
<h4>Окна</h4>
<div class="list">
<iron-list items="[[settings.timeWindows]]" as="item">
<template>
<div class="item">
Name: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
While I don't know how to show you live demo I've been able to debug a little iron-list code. The problem is with the last line.
clearSelection: function() {
function unselect(item) {
var model = this._getModelFromItem(item);
if (model) {
model[this.selectedAs] = false;
}
}
if (Array.isArray(this.selectedItems)) {
this.selectedItems.forEach(unselect, this);
} else if (this.selectedItem) {
unselect.call(this, this.selectedItem);
}
this.$.selector.clearSelection();
},
Debugging shows that there is really no such function in selector. And this selector is actually array-selector element from polymer library. And it have such function in the source code.
Ok, so I've found the reason for this. They've changed API beetween 1.0.9 and 1.1.1. My polymer was version 1.0.9 and that's why it haven't worked.
I've updated all polymer elements to the latest version and now it works.