I am trying to fire an event from a polymer element, and listen for that event in an element that is inside of it.
These are the four files of consequence:
main_app.html
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<link rel="import" href="canvas_container.html">;
<polymer-element name="main-app">
<template>
<paper-button on-click="{{onButtonClicked}}">text</paper-button>
<canvas-container"></canvas-container>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
main_app.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
#CustomTag('main-app')
class MainApp extends PolymerElement {
MainApp.created() : super.created();
onButtonClicked(Event event, var detail, Node sender) {
print('button clicked');
fire('test');
}
ready() {
super.ready();
}
}
canvas_container.html
<polymer-element name="canvas-container">
<div on-test="{{testAction}}">
<template>
<div>
<canvas id="canvas"></canvas>
</div>
</template>
</div>
<script type="application/dart" src="canvas_container.dart"></script>
</polymer-element>
canvas_container.dart
import 'dart:html';
import 'package:Compbook/stave.dart';
import 'package:Compbook/clef.dart';
import 'package:polymer/polymer.dart';
#CustomTag('canvas-container')
class CanvasContainer extends PolymerElement {
CanvasElement canvas;
CanvasRenderingContext2D context;
CanvasContainer.created() : super.created();
ready() {
this.canvas = $['canvas'];
canvas.width = 1000;
canvas.height = 1000;
context = canvas.context2D;
testAction(Event e, var detail, Node sender) {
print('event has been received');
}
}
When I click the paper-button, the event trigger correctly, but it is not being received by the canvas-container at all. Any insight into the problem is appreciated
The Polymer documentation has a section about this topic https://www.polymer-project.org/0.5/articles/communication.html#sending-messages-to-siblingschildren
Subscribe to the event on the parent and re-fire it on each child.
Related
My custom validation on my paper-input does not work anymore since the new paper-input / paper-input-decorator components.
I have the following but the validation is not triggered.
.dart
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_input_decorator.dart';
import 'package:paper_elements/paper_button.dart';
import 'package:core_elements/core_input.dart';
import 'package:core_elements/core_icon.dart';
import 'package:epimss_reg/epimss_reg.dart' show Language;
import 'package:epimss_shared/epimss_shared.dart';
import 'dart:html';
/// A Polymer `<main-app>` element.
#CustomTag('main-app')
class MainApp extends PolymerElement {
PaperButton pprBtn;
CoreIcon coreIcon;
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created();
void onInputHandler(e)
{
var decorator = $['first-input-decor'] as PaperInputDecorator;
var input = $['first'] as CoreInput;
//bool invalid = decorator.isInvalid = !input.validity.valid;
print(input.value.length);
if (input.value.length <= 6 )
{
input.setCustomValidity("Give me more!");
}
else
{
input.setCustomValidity('');
}
}
#override
void attached()
{
super.attached();
pprBtn = $['ppr-btn'];
coreIcon = $['core-icon'];
}
}
.html
<!-- import polymer-element's definition -->
<link rel='import' href='../../packages/polymer/polymer.html'>
<link rel='import' href='../../packages/paper_elements/paper_button.html'>
<link rel='import' href='../../packages/paper_elements/paper_input.html'>
<link rel='import' href='../../packages/paper_elements/paper_input_decorator.html'>
<link rel='import' href='../../packages/core_elements/core_icons.html'>
<link rel='import' href='../../packages/core_elements/core_icon.html'>
<polymer-element name='main-app'>
<template>
<style>
:host {
display: block;
}
</style>
<p>
<paper-button
id='ppr-btn'
label='button'>
<core-icon
id='core-icon'
icon='refresh'></core-icon>
My Button</paper-button>
</p>
<p>
<paper-input-decorator floatingLabel validateImmediately
id='first-input-decor'
label='First'>
<input required is='core-input'
id='first'
value='{{language.first}}'
on-input='{{onInputHandler}}'
error='Input is requried'>
</paper-input-decorator>
</p>
</template>
<script type='application/dart' src='main_app.dart'></script>
</polymer-element>
I cannot seem to associate the validation on the decorator with the input.
Thanks
Hello:
I have a paper-dialog element in a page:
<paper-dialog ... id="autom_desc_dialog" autoCloseDisabled>
...
<paper-button ... id="automatizar" affirmative autofocus disabled></paper-button>
</paper-dialog>
and I have an event listener that handles the paper-button click:
var auto_btn = querySelector('#automatizar');
auto_btn.on["click"].listen((Event e) {
// Some AJAX stuff
});
What I want is that in some cases, to be able to prevent the dialog from closing, I've tried event.preventDefault(), event.stopImmediatePropagation(), event.stopPropagation() but no success.
Thanks in advance.
You don't need to remove affirmative/dismissive attributes as they are used for layout. Polymer dialog docs are wrong (I've opened a GH issue) the default value for closeSelector is '[dismissive],[affirmative]' and not "", you just need to set closeSelector to "" and it won't close the dialog on clicking the buttons.
You just need to remove the affirmative attribute from the button then you have full control of the behavior.
app-element.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';
/**
* A Polymer app-element element.
*/
#CustomTag('app-element')
class AppElement extends PolymerElement {
/// Constructor used to create instance of AppElement.
AppElement.created() : super.created() {
}
void openClickHandler(Event e) {
print(e);
($['autom_desc_dialog'] as PaperDialog).opened = true;
}
void closeClickHandler(Event e){
if(true /* some condition */) {
($['autom_desc_dialog'] as PaperDialog).opened = false;
}
}
}
app_element.html
<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<polymer-element name="app-element">
<template>
<style>
:host {
display: block;
}
</style>
<paper-dialog id="autom_desc_dialog" autoCloseDisabled>
<div>paper dialog</div>
<paper-button id="automatizar" autofocus label="close" on-click="{{closeClickHandler}}"></paper-button>
</paper-dialog>
<paper-button id="open" autofocus label="open" on-click="{{openClickHandler}}"></paper-button>
</template>
<script type="application/dart" src="app_element.dart"></script>
</polymer-element>
I'm looking for a way to access light DOM inside a custom Polymer.dart element.
my_element.html
<link rel="import" href="../../../../packages/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<content></content>
</template>
<script type="application/dart" src="my_element.dart"></script>
</polymer-element>
my_element.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('my-element')
class MyElement extends PolymerElement {
MyElement.created() : super.created() {}
void attached() {
// How to access the light DOM of this element?
}
}
To access light DOM simply call this.querySelector('<your-selector>')
To access the shadow DOM call shadowRoot.querySelector('<your-selector>')
For the past few hours I have been struggling to refer to a sibling element within my Polymer project. Imagine the following setup:
/* main.html */
<link rel="import" href="siblingA.html">
<link rel="import" href="siblingB.html">
<polymer-element name="app-main">
<template>
<app-siblingA></app-siblingA>
<app-siblingB></app-siblingB>
</template>
<script type="application/dart" src="main.dart"></script>
</polymer-element>
/* siblingA.html, nothing special about it */
<polymer-element name="app-siblingA">
<template>
<button on-click="{{doSomething))">Do something</button>
</template>
<script type="application/dart" src="siblingA.dart"></script>
</polymer-element>
/* siblingA.dart */
import 'package:polymer/polymer.dart';
import 'dart:html';
#CustomTag('app-siblingA')
class SiblingA extends PolymerElement {
bool get applyAuthorStyles => true;
SiblingA.created() : super.created() {
}
void doSomething(MouseEvent e, var detail, Node target) {
var profile = document.querySelector('app-siblingB');
print(profile); // This is always null, why?
}
}
Now I can get my app-main node from the document, but it fails on getting sibling elements. I have tried getting the sibling element via the shadowRoot without success.
How can I get a sibling element, in this case app-siblingB, from the document or shadowRoot?
Your siblings are within the shadowDOM of <app-main>. document.querySelector() doesn't reach into the shadowDOM of an element.
This should work
(parentNode as ShadowRoot).querySelector('app-siblingB');
I want a child element to dispatch a custom event and the parent element to listen for it, and take some action. How do I do this when working with Polymer?
You can dispatch a custom event from a polymer-element like this:
dispatchEvent(new CustomEvent('nameOfEvent'));
Then, parent element can listen for the custom event like this:
<child-element on-childspeaks="fireAway"></child-element>
Here is a more complete example showing how this works. First, here is the code for the child element:
<!DOCTYPE html>
<polymer-element name="child-element">
<template>
<div on-click="dispatch">I am a child</div>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';
#CustomTag('child-element')
class ChildElement extends PolymerElement with ObservableMixin {
dispatch(Event e, var detail, Node sender) {
print('dispatching from child');
dispatchEvent(new CustomEvent('childspeaks'));
}
}
</script>
</polymer-element>
And here is the code for the parent element:
<!DOCTYPE html>
<link rel="import" href="child_element.html">
<polymer-element name="parent-element">
<template>
<div>I am the parent</div>
<child-element on-childspeaks="fireAway"></child-element>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';
#CustomTag('parent-element')
class ParentElement extends PolymerElement with ObservableMixin {
void fireAway() {
window.alert('The child spoke, I hear');
}
}
</script>
</polymer-element>