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>
Related
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.
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
The subject line of the question is a bit ambiguous. I have an main entry file to load (entry.html) which uses a entry.dart script. In the entry.html, I use a custom polymer element card-table. cardtable.html is a simple list. When I load the entry.html first time, everything is good.. I see multiple rows of text printed with static data in my model list. My entry.html has a button, clicking which changes the data model (through entry.dart, I invoke the cardtable.dart). I see the right methods being called and data model change is confirmed, but UI is not updated.
entry.html
<link rel="import" href="cardtable.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<script async src="packages/browser/dart.js"></script>
<script async type="application/dart" src="entry.dart"></script>
<link rel="stylesheet" href="entry.css">
</head>
<body>
<paper-button id="inc_btn" label="+" raisedButton></paper-button>
<paper-button id="dec_btn" label="-" raisedButton></paper-button>
<card-table></card-table>
</body>
entry.dart
var tablec;
void main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
tablec = new Element.tag('card-table');
var incBtn = querySelector('#inc_btn');
incBtn.onClick.listen(increment);
});
}
void increment(Event e) {
new Future(() {
tablec.increment();
});
}
}
card-table.html
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="card-table">
<template>
<style>
:host {
display: block;
color: green;
}
</style>
<content>
<div id="dynamic_area">
<template repeat="{{item in list}}">
<span>ABCD : {{item}}</span>
</template>
</div>
</content>
</template>
<script type="application/dart" src="cardtable.dart"></script>
</polymer-element>
cardtable.dart
#CustomTag('card-table')
class CardTable extends PolymerElement {
#observable List list = toObservable(['a', 'b', 'c']);
CardTable.created() : super.created() {
polymerCreated();
}
void increment() {
print('INCREMENT'); //is called on clicking + button on entry.html
list.add('d');
}
}
You call increment on a new <card-table> you reference using a variable, not the one inside your <body> tag.
Instead of
tablec = new Element.tag('card-table');
you use use
tablec = querySelector('card-table');
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 am trying to change the default web application that uses the polymer library so that the polymer element is created and added to the DOM from DART code rather than including in the HTML. I have succeeded in adding the element to the DOM, but my observable variable are not being updated on the DOM. The events are being fired, and the values are changing. I have got the DOM to update using Observable.dirtyCheck(), however, this is apparently expensive, so am trying to figure out how to get polymer to update dom without dirtyCheck().
So, In short, how to I get rid of Observable.dirtyCheck()???
dynamiccreate.dart
library dynamiccreate;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer();
//create click-counter element at runtime from DART, not HTML
var NewElement = new Element.tag('click-counter');
NewElement.setAttribute("count", "5");
//Add to DOM
querySelector('#sample_container_id').children.add(NewElement);
}
dynamiccreate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="dynamiccreate.css">
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<!-- <script type="application/dart">export 'package:polymer/init.dart';</script> -->
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>DynamicCreate</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<!-- <click-counter count="5"></click-counter> -->
</div>
<script src="dynamiccreate.dart" type="application/dart"></script>
</body>
</html>
clickcounter.dart
import 'package:polymer/polymer.dart';
/**
* A Polymer click counter element.
*/
#CustomTag('click-counter')
class ClickCounter extends PolymerElement {
#published int count = 0;
ClickCounter.created() : super.created() {
}
//increment gets called when dynamically adding object at runtime
//But does not update count on DOM
void increment() {
count++;
//Have to add this to update count in DOM
Observable.dirtyCheck(); //<<<---How do I get rid of this???
}
}
clickcounter.html
<polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
Change your dynamiccreate.dart file to look like this, and the counter starts incrementing in the UI:
library dynamiccreate;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer().run(() {
var newElement = new Element.tag('click-counter');
newElement.setAttribute("count", "15");
querySelector('#sample_container_id').children.add(newElement);
});
}
Nit: name your variable newElement, not NewElement. Fixed here.