I created a dialog and it renders. However, it can be hidden by its parent if the window is small. I tried the layered attribute on PaperDialog layered attribute it does not seem to help.
others.html
<!DOCTYPE html>
<link href='../../../../packages/polymer/polymer.html' rel='import' >
<link href='../../../../packages/bwu_datagrid/bwu_datagrid.html' rel='import' >
<link href='../../../../packages/paper_elements/paper_input.html' rel='import' >
<polymer-element name='others-form'>
<template>
<paper-input floatinglabel multiline
id = 'description'>
</paper-input>
</template>
<script type='application/dart' src='others_form.dart'></script>
</polymer-element>
others.dart
import 'package:polymer/polymer.dart';
import 'package:vacuum_persistent/persistent.dart' show PersistentMap;
import 'package:clean_data/clean_data.dart' show DataMap;
import 'package:epimss_shared/shared_event.dart' show eventBus,
PersistentMapEvent;
#CustomTag( 'others-form' )
class OthersForm extends PolymerElement
{
#observable String z = '3';
#observable DataMap<String, dynamic> selections;
String errorMsg;
OthersForm.created() : super.created();
#override
void attached()
{
super.attached();
selections = new DataMap<String, dynamic>.from({});
eventBus.on( PersistentMapEvent, ( event )
{
switch( event.topic )
{
case 'shared|description-form --> lab|routine-culture-rqst':
selections[ 'other' ] = event.pmap[ 'description' ];
break;
}
});
/*
selections.onChange.listen( (changeset)
{
if ((selections.length == 1 && !selections.containsKey( 'other' )) ||
selections.containsKey( 'other' ))
{
eventBus.signal(
new PersistentMapEvent (
new PersistentMap<String, String>.fromMap( selections ))
..topic = this.dataset[ 'topic' ]);
}
});
*
*/
}
}
ssss_form.html
<!DOCTYPE html>
<link href='../../../../packages/polymer/polymer.html' rel='import'>
<link href='../../../../packages/paper_elements/paper_icon_button.html' rel='import' >
<link href='../../../../packages/paper_elements/paper_shadow.html' rel='import'>
<link href='../../../../packages/paper_elements/paper_button.html' rel='import'>
<link href='../../../../packages/paper_elements/paper_dialog_transition.html' rel='import'>
<link href='../../../../packages/paper_elements/paper_dialog.html' rel='import'>
<link href='../../../../packages/html_components/input/select_item.html' rel='import'>
<link href='../../../../packages/html_components/input/select_checkbox_menu.html' rel='import'>
<link href='others_form.html' rel='import'>
<polymer-element name='ssss-form'>
<template>
<div layout horizontal>
<div layout vertical
id='specimen-div'
class='card'>
<h-select-checkbox-menu
label='Specimen'
on-selectionchanged='{{onSelectionChangedFiredSpecimen}}'>
<template repeat='{{key in specimens.keys}}'>
<h-select-item
label='{{key}}'
value='{{specimens[key]}}'>
</h-select-item>
</template>
</h-select-checkbox-menu>
</div>
<paper-shadow z='{{z}}'></paper-shadow>
</div>
<paper-dialog
id='other-dialog'
heading='Other'
transition='paper-dialog-transition-center'>
<others-form> </others-form>
<paper-button dismissive
label='More Info...' >
</paper-button>
<paper-button affirmative
label='Cancel'>
</paper-button>
<paper-button affirmative autofocus
label='Accept'>
</paper-button>
</paper-dialog>
</template>
<script type='application/dart' src='ssss_form.dart'></script>
</polymer-element>
ssss_form.dart
import '
package:polymer/polymer.dart';
import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';
import 'package:html_components/html_components.dart' show SelectCheckboxMenuComponent;
import 'package:vacuum_persistent/persistent.dart' show PersistentMap;
import 'package:clean_data/clean_data.dart';
import 'package:epimss_shared/shared_transformers.dart' show CheckboxMenuItemsConverter;
#CustomTag( 'ssss-form' )
class SsssForm extends PolymerElement with CheckboxMenuItemsConverter
{
DataSet<DataMap> selections;
DataMap<String, dynamic> specimenSelections;
PersistentMap<String, Map> pmap;
#observable
Map<String, dynamic> specimens = toObservable(
{
'CSF': 'CSF',
'Other': 'Other'
});
#observable String specimen = '';
#observable String z = '3';
var sideForm;
SsssForm.created() : super.created();
void onSelectionChangedFiredSpecimen( Event event, var detail,
SelectCheckboxMenuComponent target)
{
var list = getItemModels( target.selectedItems );
specimenSelections.clear();
list.forEach( (item)
{
specimenSelections[item.label] = item.selected;
/// Checks if [item] selected is equal to 'Other' and if so creates a
/// a dialogue to make the selection
if ( item.label == 'Other')
{ toggleDialog( 'paper-dialog-transition-center' ); }
});
}
toggleDialog( transition ) => $['other-dialog'].toggle();
#override
void attached()
{
super.attached();
specimenSelections = new DataMap<String, dynamic>.from({});
selections = new DataSet<DataMap>.from( [specimenSelections] );
}
}
others.html is the contents of the dialog - the latter is hosted in the ssss_form.html file. When the 'Others' checkbox in the 'Specimen' dropdown is clicked, this triggers the dialog.
I also get the following when the application is run
Attributes on ssss-form were data bound prior to Polymer upgrading the element. This may result in incorrect binding types. (:1)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
The "label" property is deprecated. (http://localhost:8080/polymer_bug.html:7467)
Please see attached graphic.
Thanks
I think you just need to set a higher value for the zIndex CSS property than every other HTML element on that page.
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>
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');
When I have a reference to an element that was produced by a <template>, in Polymer.js such elements have an attribute templateInstance that provides a references to its template like it's used here:
https://github.com/PolymerLabs/polymer-selector/blob/master/polymer-selector.html#L286
Polymer >= 1.0.0
#reflectable
void someClickHandler(dom.Event event, [_]) {
// for native events (like on-click)
var model = new DomRepeatModel.fromEvent(event);
// or for custom events (like on-tap, works also for native events)
var model = new DomRepeatModel.fromEvent(convertToJs(event));
var value = model.jsElement['items'];
// or
var value = model.jsElement[$['mylist'].attributes['as']];
// if you used the `as="somename"`
// in your <core-list> or <template is="dom-repeat">
}
There is an open issue related to custom events: https://github.com/dart-lang/polymer-dart/issues/624
Polymer <= 0.16.0
EDIT
The example below needs only this 3 lines, the other code is just for demonstration purposes
import 'package:template_binding/template_binding.dart' as tb;
tb.TemplateInstance ti = tb.nodeBind(e.target).templateInstance;
var value = ti.model.value as Inner;
EDIT END
This functionality was added recently (see https://code.google.com/p/dart/issues/detail?id=17462)
I created an example to test how it works:
index.html
<!DOCTYPE html>
<html>
<head>
<title>nested-repeat</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="nested_templates.html">
</head>
<body>
<nested-templates></nested-templates>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
nested_templates.html
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="nested-templates">
<template>
<style>
:host { display: block; height: 100%; }
ul { margin: 0; padding: 0; }
li { font-size: 0.85rem; padding-left: 0.75rem; }
li:hover { background: lightgrey; cursor: pointer; }
li.selected { color: red; }
</style>
<div>
<template repeat="{{o in outer}}">
<strong>{{o.name}}</strong>
<ul>
<template repeat="{{i in o.inner}}">
<li id="{{i.name}}" on-click="{{innerClickHandler}}" template-value='{{i}}'>{{i.name}}</li>
</template>
</ul>
</template>
</div>
</template>
<script type="application/dart" src="nested_templates.dart"></script>
</polymer-element>
nested_templates.dart
import 'dart:html' as dom;
import 'package:polymer/polymer.dart';
import 'package:template_binding/template_binding.dart' as tb;
#CustomTag('nested-templates')
class NestedTemplates extends PolymerElement {
NestedTemplates.created() : super.created();
#observable List<Outer> outer = toObservable([new Outer('o1', toObservable(
[new Inner('a'), new Inner('b')])), new Outer('o2', toObservable([new Inner(
'c'), new Inner('d')]))], deep: true);
void innerClickHandler(dom.Event e) {
shadowRoot.querySelectorAll('li.selected').forEach((e) => (e as
dom.HtmlElement).classes.remove('selected'));
(e.target as dom.HtmlElement).classes.add('selected');
tb.TemplateInstance ti = tb.nodeBind(e.target).templateInstance; // get access to the TemplateInstance of the element
// TemplateInstance provides access to the model and the actual value
var value = ti.model.value as Inner;
print('name: ${value.name}'); // works
print('equals: ${value == (e.target as dom.HtmlElement).attributes['template-value']}'); // prints "false"
print(
'${(e.target as dom.HtmlElement).attributes['template-value']}'); // prints "Instance of 'Inner'"
// shows that the attribute only has the result of 'toString()' but not the actual value of type 'Inner'
print(
'${(e.target as dom.HtmlElement).attributes['template-value'].runtimeType}'); // prints "String"
}
}
class Inner extends Observable {
#observable String name;
Inner(this.name);
}
class Outer extends Observable {
#observable String name;
List<Inner> inner;
Outer(this.name, this.inner);
}
I would like to add a published attribute to a dynamically created component. The code for the component is shown below:
<!DOCTYPE html>
<link rel="import" href="name-form.html">
<link rel="import" href="../../shared/red-asterisk.html">
<polymer-element name='name-view'>
<template>
<div id='name-view' class='flex-row-container view'>
<section id='row0' class='flex-row' >
<button id='add-name-btn'
class='button add-button'
on-click='{{addName}}'
autofocus>Add Name</button>
<red-asterisk></red-asterisk>
</section >
<section id='names' class='flex-column'>
</section>
</div>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'dart:html' show Event, Node, Element;
#CustomTag( 'name-view' )
class NameViewForm extends PolymerEment
{
#published String receiver = '';
NameViewForm.created() : super.created();
void addName( Event e, var detail, Node target )
{
if( $[ 'names' ].children.length < 1 )
{
$[ 'names' ].children
.add( new Element.tag( 'name-form' ) );
}
$['names'].on["deleteDispatch"]
.listen( (Event e)
{
(e.target as Element).remove();
});
}
}
</script>
</polymer-element>
It is the element ('name-form' created by
$[ 'names' ].children
.add( new Element.tag( 'name-form' ) );
to which I would like to add an attribute receiver='patient'.
Thanks
Is this a follow up question to Custom Events in Nested Polymer Dart UI?. In this case it would not be necessary to create a published attribute. You can just add a field like role in the class and set this field to 'nok-form' or 'patient-form'.
Element nameForm = new Element.tag( 'name-form' )
nameForm.role = 'nok-form';
$[ 'names' ].children
.add(nameForm);
You only need a published attribute when you want to set the value in markup (HTML).