Polymer 1.0: Styling <paper-toolbar> - polymer

Please provide a working JSBin that makes this <paper-toolbar> "look pretty" as follows:
Vertically center the <paper-input> and <paper-dropdown-menu> elements to the middle of the <paper-toolbar>.
Vertically align the <paper-input> and <paper-dropdown-menu> horizontal input field lines with each other.
Horizontally space the <paper-input> and <paper-dropdown-menu> elements between each other by at least 20px.
Link to JSBin
http://jsbin.com/hiwoqapawu/edit?html,output
<html>
<head>
<title>My Element</title>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
<base href="http://element-party.xyz/" />
<link rel="import" href="all-elements.html" />
</head>
<body>
<dom-module id="my-element">
<style>
paper-toolbar {
background: var(--paper-blue-100);
}
</style>
<template>
<paper-toolbar>
<paper-input id="search" label="Search">
<iron-icon icon="search" prefix></iron-icon>
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>Qux</paper-item>
</paper-menu>
</paper-dropdown-menu>
</paper-toolbar>
</template>
<script>
Polymer({
is: "my-element"
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>

Link to JSBin
http://jsbin.com/bumisimali/edit?html,output
<html>
<head>
<title>My Element</title>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer#*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
<base href="http://element-party.xyz/" />
<link rel="import" href="all-elements.html" />
</head>
<body>
<dom-module id="my-element">
<style>
paper-toolbar {
background: var(--paper-blue-100);
#apply(--layout-around-justified);
}
paper-dropdown-menu, paper-input {
#apply(--layout-self-end);
}
</style>
<template>
<paper-toolbar>
<div class="flex"></div>
<paper-input id="search" label="Search">
<iron-icon icon="search" prefix></iron-icon>
<paper-icon-button suffix icon="clear"></paper-icon-button>
</paper-input>
<div class="flex"></div>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content">
<paper-item>Foo</paper-item>
<paper-item>Bar</paper-item>
<paper-item>Qux</paper-item>
</paper-menu>
</paper-dropdown-menu>
<div class="flex"></div>
</paper-toolbar>
</template>
<script>
Polymer({
is: "my-element"
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>

Related

Polymer 1.0 paper-menu with recursive template

This must be a useful and widely applied design to stack menus dynamically and from a custom element. I spent hours debugging this and come so far as some events (iron-select) are not being propagated [correctly].
In short
<paper-menu>
<mycustommenu data="menuJsonDefinition"></mycustommenu>
<paper-menu>
where mycustommenu renders paper-item or paper-submenu recursively,
so in the end it looks like
<PAPER-MENU>
<mycustommenu>
<PAPER-SUBMENU>
<PAPER-ITEM class="menu-trigger">submenutrigger</PAPER-ITEM>
<PAPER-MENU class="menu-content">
<PAPER-ITEM>xx</PAPER-ITEM>
</PAPER-MENU>
</PAPER-SUBMENU>
</mycustommenu>
</PAPER-MENU>
It WORKS so far. But as soon as we add recursion and replace inner
<PAPER-ITEM>xx</PAPER-ITEM>
with <mycustommenu> which renders to
<mycustommenu><PAPER-ITEM>xx</PAPER-ITEM></mycustommenu>
it doesn't click/select anymore
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
</head>
<body>
<dom-module id="paper-treeitem">
<template>
<template is="dom-if" if="{{data.folder}}">
<paper-submenu>
<paper-item class="menu-trigger">{{data.name}}</paper-item>
<paper-menu class="menu-content" multi>
<template is="dom-repeat" items="{{data.children}}">
<!-- WORKING -->
<!-- COMMENT THIS LINE -->
<paper-item>{{item.name}}</paper-item>
<!-- NOT WORKING -->
<!-- UNCOMMENT THIS LINE -->
<!-- <paper-treeitem data="{{item}}"></paper-treeitem> -->
</template>
</paper-menu>
</paper-submenu>
</template>
<template is="dom-if" if="{{!data.folder}}">
<paper-item>{{data.name}}</paper-item>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'paper-treeitem',
properties: {
data: {
type: Object,
value: function() {
return {};
}
}
},
ready: function(){
console.log(this, this.data)
}
});
});
</script>
</dom-module>
<paper-menu>
<paper-treeitem id="tRootTreeItem"></paper-treeitem>
</paper-menu>
<script>
(function() {
window.z = document.querySelector("#tRootTreeItem");
z.data = {
name: "Root",
folder: true,
children: [{
name: "File 1"
}]
};
})()
</script>
</body>
</html>
I posted it at github as well https://github.com/PolymerElements/paper-menu/issues/93

Dropdown menu alwways opened

I'm learning Polymer and I encountered a little problem while doing the menu. Apparently, when I add the dropdown menu it displays opened always, it doesn't close and open at will. Also, I checked the code at the github repo from Polymer and its demos and can't find out what am I doing wrong.
<paper-toolbar>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
<paper-menu-button>
</paper-menu-button>
<div class="title">Title</div>
<paper-icon-button icon="refresh"></paper-icon-button>
</paper-toolbar>
You are having an extra <paper-menu-button> before
</paper-menu-button>
<div class="title">Title</div>
This is how your code should looks
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="paper-slider/paper-slider.html" rel="import">
<link href="paper-toolbar/paper-toolbar.html" rel="import">
<link href="paper-menu/paper-menu.html" rel="import">
<link href="paper-menu-button/paper-menu-button.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link rel="import" href="iron-icons/iron-icons.html">
<dom-module id="my-app">
<template>
<paper-toolbar>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger">+</paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</paper-menu>
</paper-menu-button>
<div class="title">Title</div>
<paper-icon-button icon="refresh"></paper-icon-button>
</paper-toolbar>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'my-app',
properties: {
}
});
});
</script>
</dom-module>
<my-app></my-app>
I don't know if you have imported all the required imports, but here is a Plunkr , you can see it in action

Polymer using webcomponents.js instead of webcomponents-lite.js breaks app

Hi I am trying to vulcanize my app but using webcomponents-lite.js doesnt seem to polyfill correctly and reading up I found a suggestion that says to use webcomponents.js, problem there is when I use that i get these errors:
Unable to get property 'mousedown' of undefined or null reference
Unable to get property 'click' of undefined or null reference
and thats if I vulcanize or not. Must say I am having more issues using Polymer than I think I should. Works no problem with Chrome but other browsers fight me at every turn.
here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/elements.html">
<link rel="import" href="css/main.html">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="fullbleed">
<template id="app" is="dom-bind">
<paper-drawer-panel>
<paper-header-panel main>
<paper-toolbar>
<div>Toolbar</div>
<paper-icon-button icon="menu" paper-drawer-toggle>
</paper-icon-button>
<span class="flex"></span>
<paper-button onclick="_logout()">
<div>Log out</div>
</paper-button>
</paper-toolbar>
<neon-animated-pages class="flex" selected="{{selected}}">
<view-profile></view-profile>
<add-skill></add-skill>
<search-skill></search-skill>
<view-users></view-users>
</neon-animated-pages>
</paper-header-panel>
<paper-header-panel drawer>
<paper-toolbar>
</paper-toolbar>
<paper-menu class="list" selected="{{selected}}">
<paper-item>
<iron-icon icon="account-circle"></iron-icon>
<span>Profile</span>
</paper-item>
<paper-item>
<iron-icon icon="add" on-click="showAddSkill"></iron-icon>
<span>Add Skills</span>
</paper-item>
<paper-item>
<iron-icon icon="search"></iron-icon>
<span>Search</span>
</paper-item>
<paper-item>
<iron-icon icon="android"></iron-icon>
<span>Users</span>
</paper-item>
</paper-menu>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
this is my elements.html:
<!-- Iron -->
<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<!-- Neon -->
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">
<!-- Routing -->
<link rel="import" href="routing.html">
and this is the custom element that throws the error:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../elements/elements.html">
<dom-module id="add-skill">
<style>
paper-dropdown-menu{
width: 20%;
--paper-input-container-label:{
color: red;
};
--paper-input-container-focus-color: red;
}
paper-input{
--paper-input-container-label:{
color: red;
};
--paper-input-container-label-focus:{
color: red;
};
--paper-input-container-underline:{
color: red;
};
--paper-input-container-focus-color: red;
}
form{
margin: 0px 0px 0px 100px;
}
paper-input{
width: 100px;
}
paper-button{
color: red;
}
paper-menu-button{
width: 100%;
}
</style>
<template id="skillForm">
<paper-material elevation="1">
<form is="iron-form "id="formPost" method="POST" action="../../scripts/insertSkill.php" onSubmit="window.location='skills.integr8it.local'">
<paper-dropdown-menu id="vendorMenu" label="Vendor" selected-item-label="{{vendorSelected}}">
<paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="itemSelected">
<template is="dom-repeat" items="{{vendorList}}">
<paper-item id="vendorName" value="[[item]]">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input id="selectedVendorName" name="selectedVendorName" value="[[vendorSelected]]" type="hidden">[[vendorSelected]]</input>
<br />
<paper-dropdown-menu id="certificationMenu" label="Certification" selected-item-label="{{certificationSelected}}">
<paper-menu class="dropdown-content" id="certificationSelect">
<template is="dom-repeat" items="{{certificationList}}">
<paper-item id="certificationName" value="item">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input name="selectedCertificationName" value="[[certificationSelected]]" type="hidden"></input>
<br />
<paper-dropdown-menu id="classMenu" label="Class" selected-item-label="{{classSelected}}">
<paper-menu class="dropdown-content" id="classSelect">
<template is="dom-repeat" items="{{classesList}}">
<paper-item id="className" value="{{item}}">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input id="selectedClassName" name="selectedClassName" value="[[classSelected]]" type="hidden">[[classSelected]]</input>
<br />
<paper-input name="year" label="Year" type="number" maxlength="4" max="2000" min="1990" auto-Validate required error-message="Year must be entered" value="{{year}}}">
{{year}}
</paper-input>
<br />
<paper-button class="primary" id="submitButton" raised onclick="clickHandler(event)" disabled>Submit</paper-button>
<paper-item id="error"></paper-item>
</form>
</paper-material>
<iron-ajax
id="vendorSubmit"
method="POST"
url="../../scripts/addskill.php"
handle-as="json"
on-response="handleVendorResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="certificationSubmit"
method="POST"
url="../../scripts/getCertification.php"
handle-as="json"
on-response="handleCertificationResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="classSubmit"
method="POST"
url="../../scripts/getClass.php"
handle-as="json"
on-response="handleClassResponse"
debounce-duration="300">
</iron-ajax>
</template>
<script>
function clickHandler(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
Polymer({
is:'add-skill',
behaviors:[Polymer.NeonAnimatableBehavior],
properties:{
animationConfig:{
value:function(){
return{
'entry':{
name:'slide-from-right-animation',
node:this
},
'exit':{
name:'slide-left-animation',
node:this
}
};
}
}
},
ready:function(){
this.sendVendorRequest();
this.vendorList = [];
this.certificationList = [];
this.sendClassRequest();
this.classesList = [];
var cookie = document.cookie;
},
sendVendorRequest:function(){
var datalist = 'vendor='+encodeURIComponent('1');
this.$.vendorSubmit.body = datalist;
this.$.vendorSubmit.generateRequest();
},
handleVendorResponse:function(request){
var response = request.detail.response;
for(var i = 0; i < response.length;i++){
this.push('vendorList', response[i].name);
}
},
submitForm:function(event){
Polymer.dom(event).localTarget.parentElement.submit();
},
sendCertificationRequest:function(vendor){
var datalist = 'vendorName='+encodeURIComponent(vendor);
this.$.certificationSubmit.body = datalist;
this.$.certificationSubmit.generateRequest();
},
handleCertificationResponse:function(request){
this.splice('certificationList', 0, this.certificationList.length);
var response = request.detail.response;
for(var i = 0; i < response.length;i++){
this.push('certificationList', response[i].name);
}
},
sendClassRequest:function(className){
var datalist = 'class='+encodeURIComponent('1');
this.$.classSubmit.body = datalist;
this.$.classSubmit.generateRequest();
},
handleClassResponse:function(request){
var response = request.detail.response;
for(var i = 0; i < response.length; i++){
this.push('classesList', response[i].name);
}
},
itemSelected : function(e) {
var selectedItem = e.target.selectedItem;
if (selectedItem) {
this.sendCertificationRequest(selectedItem.innerText);
console.log("selected: " + selectedItem.innerText);
}
this.validate();
},
listeners:{
'iron-form-submit': '_redirect',
'iron-form-response': '_redirect'
},
validate:function(){
var selectedVendor = document.getElementById('selectedVendorName');
if(selectedVendor.text !== null){
this.$.submitButton.disabled = false;
}
},
showIndex:function(){
this.$.skillForm.render();
this.fire('_showIndex');
},
});
</script>
</dom-module>
the app loads slowly which makes sense as I am importing alot so the vulcanize was suggested to sort that out. And I get a random hierarchy message on IE. if I reload the page a few time it foes away. Again vulcanize was suggested to fix that as well
The issue is caused by the ShadowDOM polyfill.
If webcomponents-lite.js, which doesn't have ShadowDOM, is used instead of webcomponents.js then all will work correctly.
Since 0.8-preview polymer only depends on webcomponents-lite.js, so you can use this instead of webcomponents.js without any problem: ShadowDom polyfill will definitely be unnecessary since polymer 0.8-preview
Personally, I have not needed to use the Shadow DOM so far...
Example of Shadow DOM:
<dom-module id="my-webcomponent">
<style>
...
</style>
<!-- //////////// Content of <template> will be appended to the <my-webcomponent> tag (works perfectly with webcomponents-lite.js) -->
<template>
<h1>Shadow Root!</h1>
</template>
<!-- //////////// This is Shadow DOM (doesn't work with webcomponents-lite.js) -->
<div id="outsideTemplate">
<h1>Shadow DOM!</h1>
</div>
<script>
Polymer({
is: "my-webcomponent",
...
...
...
});
</script>
</dom-module>
More information:
https://github.com/webcomponents/webcomponentsjs/issues/75
https://github.com/webcomponents/webcomponentsjs/issues/89
If you still want to use webcomponents.js and have problems with JQuery, perhaps (I have not tried it) there are one "solution":
You could wrap all your JQuery stuff inside this IIFE:
(function(document) {
// JQuery code here
})(wrap(document));
NOTE:
Firefox team are (still) working on it: https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

Polymer 1.0: paper-tooltip not working

I can't seem to get <paper-tooltip> element to work for me.
Here is my JSBin.
What am I doing wrong?
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<style></style>
<div class="with-tooltip" tabindex="0">
<input type="checkbox">Oxygen
<paper-tooltip>Atomic number: 8</paper-tooltip>
</div>
<paper-icon-button id="heart" icon="favorite" alt="heart"></paper-icon-button>
<paper-icon-button id="back" icon="arrow-back" alt="go back"></paper-icon-button>
<paper-icon-button id="fwd" icon="arrow-forward" alt="go forward"></paper-icon-button>
<paper-tooltip for="heart" margin-top="0"><3 <3 <3 </paper-tooltip>
<paper-tooltip for="back" margin-top="0">halp I am trapped in a tooltip</paper-tooltip>
<paper-tooltip for="fwd" margin-top="0">back to the future</paper-tooltip>
</template>
<script>
// only need this when both (1) in the main document and
// (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: "x-foo"
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Summary from comments:
Per #kevinashcraft:
You have to import paper-icon-button, iron-icons, and paper-tooltip. Here's a working JSBin.

Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code below you can see my commented section in which the paper-items are hard-coded. This works fine.
My next step was to try and build my menu dynamically by using the <template is="dom-repeat"> element to iterate over an arbitrary array of menu items. The menu is rendered correctly (I can see all the menu items that are bound to the array), but I cannot click on the items and no iron-pages are displayed. It seems that the data-category attribute which is used for attr-for-selected is not working inside <template is="dom-repeat">.
In what ways can I get this to work?
Edit: Removing the attr-for-selected attributes and switching the iron-pages using the index work, but relying on the index of the array is not an option in my situation.
My index.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
<paper-header-panel drawer class="fit">
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
<!-- This works -->
<!--
<paper-item data-category="item1" label="item1">
<span>John Smith</span>
</paper-item>
<paper-item data-category="item2" label="item2">
<span>Jane Doe</span>
</paper-item>
-->
<!-- This does not work -->
<template is="dom-repeat" items="{{names}}">
<paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
<span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
</paper-item>
</template>
</paper-menu>
</paper-header-panel>
<paper-header-panel main class="fit">
<paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex">Main Content</div>
</paper-toolbar>
<iron-pages selected="{{page}}" attr-for-selected="data-category">
<section data-category="item1">
<h1>Item 1</h1>
<div>Item 1 content...</div>
</section>
<section data-category="item2">
<h1>Item 2</h1>
<div>Item 2 content...</div>
</section>
</iron-pages>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function() {
this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
}
});
</script>
</dom-module>
</body>
</html>
Try <paper-item data-category$="{{item.itemNum}}" label$="{{item.itemNum}}">, from the docs, that will call paper-item.setAttribute('data-category', itemNum) instead of paper-item.data-category = itemNum.
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding