I want to toggle the open/closed state of the content of a paper-card element by clicking the heading of the paper-card only.
When I click inside the open content, I want the card to remain in the open state. And not toggle to the closed state.
Open this jsBin to read further and demo what I'm describing.
http://jsbin.com/kecemorojo/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">
<link href="iron-collapse/iron-collapse.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-card heading="Click Me to Open" on-tap="_toggleCollapse">
<iron-collapse id="collapse">
<div class="card-content">
I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it.
</div>
</iron-collapse>
</paper-card>
</template>
<script>
(function(){
Polymer({
is: "x-element",
_toggleCollapse: function() {
this.$.collapse.toggle();
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
_toggleCollapse: function(e) {
if (!e.target.classList.contains('card-content')) {
this.$.collapse.toggle();
}
}
In addition to the accepted answer, at least two other solutions also exist:
if (e.target.classList.contains('title-text'))
here
and
if (e.target.classList.contains('title-text', 'style-scope', 'paper-card'))
here
Depending on the situation, one or the other might work better depending on what is being clicked inside the paper-card content section.
http://jsbin.com/kacatozolo/1/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">
<link href="iron-collapse/iron-collapse.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-card heading="Click Me to Open" on-tap="_toggleCollapse">
<iron-collapse id="collapse">
<div class="card-content">
I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it.
</div>
</iron-collapse>
</paper-card>
</template>
<script>
(function(){
Polymer({
is: "x-element",
_toggleCollapse: function(e) {
if (e.target.classList.contains('title-text', 'style-scope', 'paper-card')) {
this.$.collapse.toggle();
}
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
Related
I seem to have misplaced several dozen IQ points....
I'm trying to catch an iron-items-changed event from a paper-dropdown-menu from the host. For the life of me I can't figure out (or find an example of) the syntax.
<paper-listbox .... onclick="doSomething()">
works fine. But oniron-items-changed doesn't. Nor does on-iron-items-changed. Nor onIronItemsChanged. Or any other variation of the event name that I can think of.
Anyway, can someone help? Please???
UPDATE:
I'm beginning to think the problem is that it's an event bubbling issue. I tried moving the attribute up a level to the paper-dropdown-menu element, but that didn't help. Any ideas? Here's the HTML that's being delivered to the browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link href="/Content/site.css" rel="stylesheet"/>
<link rel="import" href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<style>
#pageContent {
margin: 20px;
}
</style>
</head>
<body unresolved>
<app-header-layout>
<app-header slot="header" fixed condenses shadow effects="waterfall">
<app-toolbar>
<div main-title>FTI Calculation Editor</div>
</app-toolbar>
</app-header>
<div id="pageContent">
<paper-dropdown-menu label="Master" id="master" on-selected-item-changed="doSomething" >
<paper-listbox slot="dropdown-content" >
<paper-item>Test One</paper-item>
<paper-item>Test Three</paper-item>
<paper-item>Test Two</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<p></p>
<paper-dropdown-menu label="Child" id="child">
<paper-listbox slot="dropdown-content">
<paper-item>C 1-1</paper-item>
<paper-item>C 1-2</paper-item>
<paper-item>C 1-3</paper-item>
<paper-item>C 2</paper-item>
<paper-item>C 3-1</paper-item>
<paper-item>C 3-3</paper-item>
<paper-item>C 3-4</paper-item>
<paper-item>C-3-2</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</app-header-layout>
<script>
function doSomething(e) {
alert("got here");
}
</script>
</body>
</html>
Probably obvious, but what I'm ultimately trying to achieve is to filter the second dropdown based on the selection in the first. If somebody knows a better/easier way to achieve that, I'd be delighted to know....
Just look into documentation. It points you to a good path. As you can see in documentation, there is -on-iron-items-changed so problem must be somewhere else.
You can't call functions with () at the end. You need to point to some function and not actually call it. So rewrite your code to:
<paper-listbox .... on-iron-items-changed="doSomething">
The way you get the event with onclick="domsomething()" does something because you are not using the actual Polymer syntax, that's the "old" HTML way to catch the click even. But you might not want that, at least because it's not the best when it comes to touch devices support (there's on-tap for tat).
But in your case, now, the other answer was pretty close. First of all you don't need to call a function, you need to pass a name that can be used by the paper-listbox element as a callback.
The only difference is that you are not interested in the event triggered when the items are changed. That would be when the list changes. I am guessing that you are interested in the event triggered when the selected one changes. So on that page you can see that there's an event called selected-item-changed. That would mean that that you can use the on-selected-item-changed attribute to define a callback for that event.
So please try:
<paper-listbox .... on-iron-items-changed="doSomething">
You doSomething method will get one parameter, the event object.
I'm making an SPA website using Polymer. My main HTML page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="/bower_components/system.js/dist/system.js"></script>
<script>
System.config({
map:{
traceur: '/bower_components/traceur/traceur.min.js'
}
});
</script>
<meta charset="UTF-8">
<link rel="import" href="/html/foobar-app.html">
</head>
<body>
<foobar-app></foobar-app>
</body>
</html>
with foobar-app defined as:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">
<link rel="import" href="/html/pages/all-territories.html">
<link rel="import" href="/html/pages/app-login.html">
<dom-module id="foobar-app">
<template>
<style></style>
<iron-pages id="pages" selected="1">
<app-login on-logged-in="onLoggedIn"></app-login>
<all-territories></all-territories>
</iron-pages>
<iron-ajax
url="http://api.foobar.com/data">
</iron-ajax>
</template>
<script>
(function() {
Polymer({
is: 'foobar-app',
// ...
});
})();
</script>
</dom-module>
When I make a change to foobar-app's code everything works fine and updates if I refresh the page. But if I make a change to one of its sub-components or to one of the sub-component's own sub-components, the related html doesn't refresh and I have to manually browse to the related HTML file and press refresh. Else, only the top HTML file is refreshed (foobar-app.html).
How can I ask Chrome to refresh the current page and all its imports, sub-imports etc. whatever the deepness?
I've tried the following without success:
Pressing CTRL + MAJ + R twice
Pressing CTRL + R twice
Try opening the inspector for this page (right click, inspect). Then right click on the refresh icon, finally select "Empty Cache and Hard Reload" from the refresh drop down.
I have had problems with IFrames doing this, but never ajax calls; but this fixed it for me.
Hello
I'm starting with Polymer 1.0 and I'm trying to create my first element and load into an html page. I'm using Chrome Dev Editor, the project was created correctly because I could load all the example. After that I eliminate all the example code and create a:
Folder "elements" into the project
"hello-world.html" with the following code:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" noscript>
<template>
<h1>Hello World</h1>
</template>
Updated the code in the "index.html" file
<!doctype html>
<html>
<head>
<title>PolyExample</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/hello-world.html">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Test Polymer</h1>
<hello-world></hello-world>
</body>
</html>
I will appreciate any help about this
Thanks in advance
Your code has a serious problem in the way you create your element,
You use a dom-module element to create a new element and you need to write some JS to initialize the element. Below is an example
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
The script tag with that code is essential for your element to work.
This is probably as simple as it gets.
To read more on that follow the link:
https://www.polymer-project.org/1.0/docs/start/quick-tour.html
I've been playing with Polymer. I've successfully built a "hello world" app. My app includes the iron-elements. I'm now trying to integrate the paper-elements. Unfortunately, I can't seem to get them to work in my project.
I installed them via bower install PolymerElements/paper-elements. I then imported the .html similar to the way I did for the iron elements. However, the items didn't appear. So, I decided to take a step back and just do a "hello world" with the paper elements. To my surprise, I couldn't figure out how to just display a Button with Paper. Surely I'm not this dumb.
I sought out a basic app I could pull from GitHub and use. However, I didn't have any luck doing that either. Currently, I have the following:
<html>
<head>
<title>Hello</title>
<script src="res/packages/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/packages/polymer/polymer.html">
<!-- Paper Elements -->
<link rel="import" href="res/packages/font-roboto/roboto.html">
<link rel="import" href="res/packages/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/packages/paper-toolbar/paper-toolbar.html">
<link rel="import" href="res/packages/paper-button/paper-button.html">
<!-- End of Paper Elements -->
<!-- End of Polymer -->
</head>
<body unresolved>
<h1>Hello</h1>
<paper-header-panel>
<paper-button raisedButton label="button"></paper-button>
</paper-header-panel>
</body>
</html>
what am I doing wrong? Can someone either tell me what I'm missing or point me to a basic "hello world" app with Paper?
Thank you!
Remove your paper-header-panel and try this:
<paper-button raised>Raised button</paper-button>
Trying to display hello world using elements but nothing happens any help?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
</head>
<body unresolved>
<hello-world></hello-world>
</body>
</html>
hello-world.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" nonscript>
<template>
<h2>Hello World</h2>
</template>
</polymer-element>
Code for "hello-world.html" is now:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer ({ is: "hello-world", });
</script>
</dom-module>
If you are using polymer version 0.8 or 0.9, then <polymer-element ... should be <dom-module ...
See more from polymer site:
https://www.polymer-project.org/0.9/docs/start/quick-tour.html
You have a typo, nonscript needs to be noscript.
<polymer-element name="hello-world" noscript>
I have the same problem and dont find the mistake.
index.html
<html>
<head>
<title>Polymer-Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- file is available, auto completed by api -->
<link rel="import" href="hello/hello.html">
<!-- file is available, auto completed by api -->
<!-- netbeans doesn't know relation import -->
</head>
<body>
<h1>My first Polymer-Application</h1>
<hello></hello>
</body>
</html>
hello/hello.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- file is available, auto complete by api -->
<polymer-element name="hello" noscript>
<template>
<h1>Hello Polymer world</h1>
</template>
</polymer-element>
My platfrom is:
Win 8.1
nodejs
bower
polymer (installed over bower, folders and files are availible)
git
netbeans dev edition (as editor)
xammp (as apache webserver)
tested with chrome, firefox and ie10 and the custom element is not be shown. i don't think it's a browser problem. it's the simpliest element you can write, but why did it not work?
Edit:
tested it on a clean ubuntu installation. and it still does not work?
i also tested original code from the polymer page and this won't work too.
am i to stupid for copy paste?
Edit 2:
i found it an have running my polymer apps. If i use Polymer 1.0.9 i should not read the tutorial for 0.5.0
changes:
index.html:
<!DOCTYPE html>
<html>
<head>
...
<script scr="bower_components/webcomponents-lite.min.js"></script>
<!-- the lite edition is needet since polymer version 0.8 -->
<link rel="import" href="hello/hello.html">
...
</head>
<body>
<hello></hello>
</body>
</html>
hello/hello.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello">
<!-- its not longer a polymer-element. we have to use dom-module and id and the noscript option is not longer supported -->
<template>
<template>
<script>
// everytime you need to initialize a Polymer object
Polymer({
is: 'hello' // must be set now
});
</script>
</dom-module>
if you want to work with parameters you need to set it in the polymer ready function and every placeholder must be surrounded by a html tag like span without any other content in it.
Replace the line
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
with
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
This should fix the issue.