I have the following page defined
<!DOCTYPE html>
<html>
<head>
<title>Practice List</title>
<link rel="import" href="elements/elements.html" />
<link rel="stylesheet" type="text/css" href="Styles/styles.css" />
<!-- google fonts definitions -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body unresolved class="fullbleed layout vertical">
<dom-module id="app">
<template>
<paper-drawer-panel>
<paper-header-panel main mode="waterfall-tall">
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>
<input type="text" id="searchText" style="width:200px; background:#3180ed;line-height:20px;border:solid 1px #4d90eb; border-radius:6px; padding:3px;color:#fff;" />
<div class="middle paper-font-display2 app-name ident">Practice List</div>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "app",
ready: function () {
alert('Ready!!!!');
},
srchandler: function () {
alert('Search clicked');
}
});
</script>
</dom-module>
</body>
</html>
For completeness here is the elements.html file
<!-- Iron -->
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<!-- Paper Elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.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-input/paper-input.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
I am moving to Polymer 1.0 and have just created the page above. The 'script handler called' alert is showing but the ready callback is not firing and when I click on the search button the searchhandler function is not being called.
Can anyone give me an idea where I am going wrong?
See here for the migration guide. For your event not firing see here
Curly brackets ({{}}) are not used for declarative event handlers in the template.
Your code should be:
<paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>
Your element registration needs to also now change. See here
<body unresolved class="fullbleed layout vertical">
<dom-module id="my-app">
<template>
<!-- your template here -->
<paper-drawer-panel>
<paper-header-panel main mode="waterfall-tall">
<paper-toolbar id="mainToolbar">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>
<input type="text" id="searchText" style="width:0px;visibility:hidden;" />
<div class="middle paper-font-display2 app-name ident">Practice List</div>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "my-app",
ready: function () {
alert('Ready!!!!');
},
srchandler: function () {
alert('Search clicked');
}
});
</script>
</dom-module>
<my-app></my-app>
</body>
Related
I have some simple code (Angular2 + Polymer) that creates a paper-input with a iron-icon as a suffix icon:
<paper-input type="text" [control]="email" label="Email">
<iron-icon suffix icon="mail"></iron-icon>
</paper-input>
Here is the full page, note that the materialize grid and row classes are the only materialize classes I brought into the project:
<div class="section">
<h1 class="paper-font-headline">Admin Registration</h1>
<div class="row">
<div class="col s12 m6 6">
<p class="paper-font-body2">some stuff here</p>
</div>
<div class="col s12 m6 6">
<paper-card class="stretch">
<div class="sub-section">
<form>
<paper-input type="text"
[control]="email"
label="Email">
<iron-icon suffix icon="mail"></iron-icon>
</paper-input>
</form>
</div>
</paper-card>
</div>
</div>
</div>
This looks pretty good on page load:
When I navigate away from the page and back, however, the icon falls below the input:
In the html you can clearly see that the icon is placed outside of the paper-input-container on navigation.
Has anyone seen this before? I am at a loss. One thing to note is this only happens when I use webcomponents-lite.js in my index.html file. webcomponents.js has other issues when used (shouldn't be used) but this is not one of them. This is Polymer 1.0. Thanks!
Edit:
This is not an issue in Chrome, but in the other major browsers.
Here are my imports in case they are relevant:
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<link rel="import" href="bower_components/paper-styles/classes/global.html">
<link rel="import" href="bower_components/paper-styles/classes/shadow.html">
<link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html">
<link rel="import" href="bower_components/paper-styles/classes/typography.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.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/paper-ripple/paper-ripple.html">
<link rel="import" href="bower_components/paper-card/paper-card.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
Here are my bower.json dependencies:
"dependencies": {
"webcomponentsjs": "~0.7.21",
"polymer": "Polymer/polymer#~1.3.0",
"paper-elements": "PolymerElements/paper-elements#~1.0.7"
}
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icon/core-icon.html">
<polymer-element name="my-element">
<template>
<style>
#paper_input {
left: 380px;
top: 380px;
position: absolute;
}
#core_icon {
left: 530px;
top: 390px;
position: absolute;
}
</style>
<paper-input label="Type something..." id="paper_input"></paper-input>
<core-icon icon="mail" id="core_icon"></core-icon>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
When I try to run the following code in Laravel with vue.js:
<html>
<head>
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Locaties </h2>
</div>
<data list="{{ json_encode($locations) }}"></data>
</div>
</div>
<template id="ln-data">
<ul>
<li v-for="item in list">#{{ item.name }}</li>
</ul>
</template>
<script>
new Vue({
el: 'body'
})
Vue.component('data', {
template: '#ln-data',
props:['list']
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.common.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<style>
.newclient {
display:none;
}
</style>
</body>
</html>
I receive the following errors in the console:
Uncaught ReferenceError: process is not defined(anonymous function) #
vue.common.js:981 vue.common.js:9157 Uncaught TypeError: this._init is
not a function
What am I doing wrong?
Try this:
Changes to your version:
vue.js imported instead of vue.common.js
moved your own <script>...</script to the bottom of the imports because it depends on the vue.js import
activate the vue debug mode while developping makes it easier to find errors.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="/css/roboto.min.css" rel="stylesheet">
<link href="/css/material.min.css" rel="stylesheet">
<link href="/css/ripples.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Locaties </h2>
</div>
<data list="{{ json_encode($locations) }}"></data>
</div>
</div>
<template id="ln-data">
<ul>
<li v-for="item in list">#{{ item.name }}</li>
</ul>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/js/ripples.min.js"></script>
<script src="/js/material.min.js"></script>
<script>
// vuejs debug mode
Vue.config.debug = true; //TODO: Remove in production
new Vue({
el: 'body'
})
Vue.component('data', {
template: '#ln-data',
props:['list']
})
</script>
<style>
.newclient {
display:none;
}
</style>
</body>
</html>
I followed the steps in the following video
https://www.youtube.com/watch?v=ZDjiUmx51y8
and created my custom input-header Polymer element as below
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="input-header">
<template>
<style>
.dropdown-content {
padding: 0px;
}
</style>
<paper-toolbar>
<paper-icon-button icon="mail"></paper-icon-button>
<div class="title">{{label}}</div>
<paper-menu-button horizontal-align="right" vertical-align="top">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<div class="dropdown-content">
<paper-input label="Thread name:" value="{{label}}"></paper-input>
</div>
</paper-menu-button>
</paper-toolbar>
</template>
<script>
Polymer({
is: 'input-header',
properties: {
label: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
Then I called it in my index.html as follows
<input-header label="{{label}}"></input-header>
But I am not getting the behavior shown in the video
https://www.youtube.com/watch?v=ZDjiUmx51y8
where the input field appears when he clicks on the menu button.
Infact, nothing happens when I click on the menu button.
I am using the 1.2.1 version of polymer so I think I am on the latest version.
Any help would be appreciated.
As #GunterZochbauer pointed out, this was fixed by importing the paper elements in elements.html used in the input-header as follows
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-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-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
I've been playing with Polymer for a few days and I want to do a menu, that will appear/disappear after clicking on the menu button. The problem is that I can't figure out why my code doesn't work.
Here it is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Title</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/core-icons/core-icons.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-meta/core-meta.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/core-transition/core-transition.html">
<link rel="import" href="bower_components/core-media-query/core-media-query.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
</style>
</head>
<body unresolved>
<core-header-panel flex>
<paper-shadow z="1">
<core-toolbar>
<paper-icon-button icon="menu" onclick="handleMenu()"></paper-icon-button>
<div flex>Project Management System</div>
</core-toolbar>
</paper-shadow>
</core-header-panel>
<div id="menu" class="core-menu">
<core-item icon="settings" label="Settings"></core-item>
</div>
</body>
</html>
and the Javascript
<script>
document.addEventListener('polymer-ready', function() {
console.log('Polymer Ready');
});
var meta;
var transition;
function handleMenu() {
var menu = document.getElementById('menu');
meta = document.createElement('core-meta');
meta.type = 'transition';
console.log(meta.list);
console.log(transition);
transition.teardown(menu);
transition = getMeta().byId('core-transition-left');
transition.setup(menu);
transition.go(menu, true);
console.log('Tap');
}
</script>
When I click on the menu button an error will appear:
Uncaught TypeError: Cannot read property 'teardown' of undefined
I've done everything as it was on demo page, I've been searching for the correct solution or some answers but nothing... does any one have an idea? Thanks
Its not working because mainly your were missing the https://www.polymer-project.org/components/core-transition/core-transition-css.html from the demo page.
After that the getMeta() method was also missing and the menu element needed to have the transition setup applied to it.
See and try the example below:
document.addEventListener('polymer-ready', function() {
console.log('Polymer Ready');
setup();
});
var meta;
var transition;
var state = {
opened: false
};
function setup() {
var target = document.getElementById('menu');
if (transition) {
transition.teardown(target);
}
transition = getMeta().byId('core-transition-left');
transition.setup(target);
}
function getMeta() {
if (!meta) {
meta = document.createElement('core-meta');
meta.type = 'transition';
}
return meta;
}
function handleMenu() {
var target = document.getElementById('menu');
state.opened = !state.opened;
transition.go(target, state);
}
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="https://www.polymer-project.org/components/core-meta/core-meta.html">
<link rel="import" href="https://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition.html">
<link rel="import" href="https://www.polymer-project.org/components/core-media-query/core-media-query.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition-css.html">
<body unresolved>
<core-header-panel flex>
<paper-shadow z="1">
<core-toolbar>
<paper-icon-button icon="menu" onclick="handleMenu()"></paper-icon-button>
<div flex>Project Management System</div>
</core-toolbar>
</paper-shadow>
</core-header-panel>
<div id="menu" class="core-menu">
<core-item icon="settings" label="Settings"></core-item>
</div>
I was writing a Polymer app when I realized my paper-dropdown-menu element was not working on updated Firefox but giving no problems in Chrome.
All bower components are correctly installed and accessible.There is no console errors on any of the browsers.
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<style>
paper-dropdown-menu {
left: 24px;
width: 180px;
}
</style>
<paper-dropdown-menu label="Your favorite food">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Pasta</paper-item>
<paper-item>Pizza</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-button raised>CLICK ME</paper-button>
</body>
</html>
UPDATE: I tried downloading the paper-dropdown-menu demo and running it in localhost. Installed all components using bower but still don't work in Firefox. In Chrome runs fine.
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link href="bower_components/core-collapse/core-collapse.html" rel="import">
<link href="bower_components/core-menu/core-menu.html" rel="import">
<link href="bower_components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="bower_components/paper-item/paper-item.html" rel="import">
<link href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
</head>
<body>
<template is="auto-binding">
<paper-dropdown-menu label="Your favorite pastry">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.pastries = [
'Apple fritter',
'Croissant',
'Donut'
];
</script>
</body>
</html>
For some reason it would not work on localhost port 8000 but works great on localhost port 80.
Just had to run the local server like this:
sudo python -m SimpleHTTPServer 80