See the component page for more information.
googlearchive / core-overlay Goto Github PK
View Code? Open in Web Editor NEWA custom element that renders on top of other content.
A custom element that renders on top of other content.
See the component page for more information.
I'm using a paper-action-dialog
with input fields.
When using the app on mobile, opening the dialog and focusing in an input field brings up the on-screen keyboard, which compresses the dialog while "trying" to keep the original positioning.
It does trigger a resize-event (calling resizeHandler) but I suspect that it fires too early and the resizeHandler gets the wrong dimensions for calculating the new size.
Flipping the phone to landscape and back to portrait properly resizes the core-overlay, though.
JSBin at http://jsbin.com/teragoxibu/2
Opening a dialog with input:
Focus in an input:
Flip phone landscale and back again:
When using pointerevents.js every click inside a paper-dialog closes it.
From what I see, the problem is that pointerevents translates the mouseup event to pointerup that is captured by the #document.captureHandler of the overlay but not by the dialog.tapHandler so the close job is not cancelled.
Changing the 'captureEventName' to 'pointerup' and 'tap': 'tapHandler' to 'pointerup': 'tapHandler' in targetListeners fixes the issue, but then when not using pointerevents.js the dialog never closes...
I have two templates within my custom element which change each other. And when changing happens, core-overlay stops working. So, in my situation it sets 'opened' property to true and thats it. Nothing happens next.
If showing a paper-toast from a paper-dialog and then calling .opened=false on the dialog before the toast disappears a stack overflow occurs.
This happens in core-overlay:
The use case is I want to size a core-dropdown
to be as wide as the widest item in the dropdown menu.
The overlay maintains its centered position when closed. An overlay centers if it does not have already set positioning. Therefore, if the window is resized after closing, then the overlay will not be centered when re-opened. To fix this, a centered overlay's position should be reset when it is closed.
I'm trying to change the dimensions of an overlay and still keep it centered. The contents can be changed to affect the dimensions, but firing core-overlay-position
as the documentation suggests seems to do nothing:
overlay.dispatchEvent(new CustomEvent('core-overlay-position', {target: overlay, sizingTarget: overlay, opened: true}));
And I cannot debug since I can't see a handler for the event in this repository. ๐
https://dl.dropboxusercontent.com/u/5739705/polymer/broken/index.html
I got reproduces on Chrome and Chrome Canary (Windows).
I think a condition for the broken....
<core-overlay>
<paper-checkbox>
(the element that has animation?) in <core-overlay>
<core-overlay>
has the attribute layered
<core-overlay>
has the CSS property transform: none;
This issue can be fixed by changing transform: none;
to transform: scale(1);
at https://github.com/Polymer/core-transition/blob/master/core-transition-overlay.css#L19
But this issue may be a bug of Chrome...
When an overlay is open, only controls within that overlay should be focusable. It would be nice if the core-overlay could trap the tab key so users don't have to write their own tab handlers. Also if it provided an escape key listener as a exit, that would be good too.
In depth explanation: https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/
jsbin: http://jsbin.com/tudiso/1
Click the button a bunch of times and the overlay will keep getting smaller and smaller.
I updated to the latest core-overlay
and polymer
, and now I'm getting this error:
TypeError: Polymer.flush is not a function
Cannot read property 'removeChild' of nul when it was toggled
The documentation for this event (here) claims that the boolean opened state can be found in event.detail.opened
:
Fired when the `core-overlay`'s `opened` property changes.
@event core-overlay-open
@param {Object} detail
@param {Object} detail.opened the opened state
However it's actually placed in event.detail
itself (here):
this.fire('core-overlay-open', this.opened);
One of these should be changed to match the other.
The core-overlay seems to assume that it should overlay the entire window. In my application, we want it to only overlay one part of the window (it's essentially split into two parts, each is a different application and the dialog only applies to one of them).
Please consider adding an attribute so that the user can specify the parent element so that the target is 'copied' into that instead of the main body, and it 'grey out' only that element's extent and center the target dialog in that area (vertically and horizontally, of course).
Hi
I am trying to open a core-dropdown below the trigger element. The doc says that this can be achived via css. But the _shouldPosition is always true so my custom css positioning is overwritten.
I see 2 ways to solve this
Cheers
Bernd
The demo.html doesn't work on IE 11.
There seems to be an issue with closing core overlays when the tab is not focused. The overlay itself is not visible (opacity: 0), but both it and the core-overlay-backdrop still cover the page and prevent page interaction. The problem happens regardless of whether layered is set.
To reproduce, go to the core-overlay demo and open dev tools. In the console, paste:
var overlay = document.querySelector('html /deep/ #overlay');
window.setTimeout(function() { overlay.opened = true; }, 10000);
window.setTimeout(function() { overlay.opened = false; }, 20000);
Then switch tabs. Come back to the tab 20 seconds later and the improperly closed overlay and overlay backdrop block page interaction.
When a core-overlay is opened, focus should be moved to the first focusable child within the overlay. This is to prevent screen readers from interacting with background content.
ex: http://accessibility.oit.ncsu.edu/training/aria/modal-window/
I have a problem core-overlay + incorrect application code..
But I still think core overlay should handle this case.
under some circumstances tapHandler receive event with element which does not have hasAttribute method
I find the place where it can be fixed https://github.com/Polymer/core-overlay/blob/master/core-overlay.html#L600
When I do something like this http://joxi.ru/bmo6DYWhbJVlry .. error disappear.. in fact getAttribute does not fix an issue.
Here is console.log output http://joxi.ru/Y2LpdeXhNBKz26
it's hard to debug the problem because I do not understand how webcomponents polyfills working. maybe this problem can be addressed to webcomponentsjs
code which produce this error here:
<div id="inputContentContainer">
<div id="inputContent" relative on-click="{{open}}" >
<button on-click="{{open}}"
id="trigger"
disabled?="{{disabled}}"
type="button"
class="btn btn-default {{ {dropup: $.dropdown.opened} | tokenList }}">
<span class="caret pull-right"></span>
{{ $.menu.selectedItem.textContent || prompt }}
</button>
<core-dropdown id="dropdown" opened="{{opened}}">
<core-menu on-core-select="{{close}}"
id="menu"
class="list-group"
notap
selected="{{value}}"
selectedClass="active">
<template if="{{allowBlank}}">
<core-item class="list-group-item" name="" on-click="{{clear}}">
{{prompt}}
</core-item>
</template>
<template repeat="{{option in options}}" bind="{{}}">
<core-item class="list-group-item"
name="{{option.value}}"
optionElement="{{option}}"
on-click="{{selectItem}}"
disabled?="{{option.disabled}}">
[[option.text]]
</core-item>
</template>
</core-menu>
</core-dropdown>
</div>
</div>
e.g. close the overlay
For example:
<polymer-element name="paidtasks-edit-dialog" attributes="opened errorMessage heading">
<template>
<paper-action-dialog id="dialog" heading="{{heading}}">
<content select="#editor"></content>
<div class="error-text">{{errorMessage}}</div>
<paper-button dismissive>cancel</paper-button>
<paper-button id="saveButton" affirmative>Save</paper-button>
</paper-action-dialog>
</template>
</polymer-element>
#editor
gets appended to paper-action-dialog
so it shows up after .error-text
.
I have an animation (CSS)
transform: translateX(0%);
transition: 0.6s;
to 50%
this is for paper menu it will be positioned far away from the element that is clicked on in this case paper menu. It seems to set left top incorrectly.
if I turn the transform off it positions fine.
"Current core-overlay is attempting to focus itself as next! (bug)"
Use case:
I am trying to display a series of queued <paper-toast>
s in succession.
I am doing this by listening to the close event of the currently open toast and triggering to the opening of the next toast in the queue.
Problem:
When the last toast in the queue is closed, I see a console warning "Current core-overlay is attempting to focus itself as next! (bug)"
There doesn't appear to be anything wrong outside of the warning appearing; all the toasts appear and disappear as expected.
Workaround:
I can trivially cause the warning to go away by introducing a few hundred ms of delay between the closing of the previous toast and the opening of the next one.
This seems hacky and doesn't appear to achieve anything besides suppressing the console warning.
I am using <paper-toast>
s in an AngularDart component.
Example component.dart file:
@Component
class ToastComponent {
bool _show = false;
bool get show => _show;
void set show(bool show) {
_show = show;
if (!show) {
//new Timer(Duration.ZERO, _displayNextNotification); // Causes warning to appear.
new Timer(new Duration(milliseconds: 300), _displayNextNotification); // No warning.
}
}
}
Example component.html file:
<paper-toast text="foobar" opened="{{show}}"></paper-toast>
316c491#diff-7dcd7d7c71a725a967337f190e8f0966R494 added support for closeSelector
, but if the click on the element matching the selector explicitly sets opened = false
, the this.toggle()
call in tapHandler
will re-open the dialog.
It wasn't happening before but can't figure out what triggers this error, this is the JS console output:
Uncaught TypeError: Cannot read property 'removeChild' of null
core-overlay.html:458 Polymer.mixin.completeBackdrop
core-overlay.html:424 Polymer.mixin.transitionend
core-overlay.html:689 Polymer.mixin._makeBoundListener.(anonymous function)
utils.js:80 utils.fire
core-transition.html:117 Polymer.complete
core-transition-css.html:205 (anonymous function)
core-transition.html:132 listener
Change this:
457 if (getBackdrops().length === 0) {
458 this.scrim.parentNode.removeChild(this.scrim);
459 }
to:
457 if (getBackdrops().length === 0 && this.scrim.parentNode) {
458 this.scrim.parentNode.removeChild(this.scrim);
459 }
solves the problem, may not be the best solution, but it works.
Often time we want to know when core-overlay is completely opened/closed.
Right now core-overlay always try to switch focus to target element. There should be an option to not do that. For example, if using core-overlay for alert message it should not be focused.
With the addition of the layered propery, any attempt to style the children (which works without the layered property) wont work..
This also happens with things like core-dialog (which has layered by default).
Eg. the style
paper-action-dialog {
width: 40%;
min-width: 430px;
}
paper-action-dialog paper-button {
font-weight: bold;
}
paper-button[affirmative] {
color: #4285f4;
}
will not apply if the layered="true", which is the default for paper-action-dialog, when set to false, it styles as it used to.
Also with layered=true, the paper-dropdown layer is below the dialog layer, but it must be layered itself to appear outside the dialog to stop scroll-bars showing.
<paper-action-dialog id="edit_sensor_dialog" heading="{{dialogSensor.id == null ? 'New' : 'Edit'}} Sensor" transition="paper-transition-center" layered="false">
<div id="sensor_edit_form" layout vertical>
<paper-input-decorator label="Name" floatingLabel>
<input is="core-input" id="input_sensor_name" floatingLabel value="{{dialogSensor.name}}" required></input>
</paper-input-decorator>
<paper-dropdown-menu id="input_sensor_type" label="Sensor Type" >
<paper-dropdown class="dropdown" layered>
<core-menu class="menu" selected="{{dialogSensor.type}}" valueattr="id">
<template repeat="{{type in sensorTypes}}">
<paper-item id="{{type.name}}">{{type.caption}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</div>
<paper-button id="buttonCancel" dismissive>Cancel</paper-button>
<paper-button id="buttonOk" affirmative on-tap="{{sensorButtonOkTapped}}">Ok</paper-button>
</paper-action-dialog>
Launch core-overlay's demo page. Click the button to open the dialog. Then click outside the dialog and it should close the dialog but it didn't.
I am building a simple web app that involves using a core-overlay to create a post to a news feed. On Mobile (Safari/Chrome on iOS) when I click the + button to add a post the overlay does not have the same design as on desktop and when I try to click on the paper inputs it justs closes the overlay.
The whole process works fine on desktop so Im not sure if it is a mobile browser compatibility issue or something else.
core-overlay doesn't enable scrolling when the content overflows.
From @dgrasberger on December 3, 2014 23:12
Using .51 and noticed the problem. Pointed firefox at demo page (https://www.polymer-project.org/components/core-overlay/demo.html -- try it to reproduce the bug) and overlay never opened -- my experience was that overlay would open but not close.
Copied from original issue: Polymer/polymer#993
In Polymer 0.5.1, if I have more than one dialog with a backdrop open, at least one backdrop gets left behind when the dialogs are closed, and I often (but not always) get a Current core-overlay is attempting to focus itself as next! (bug)
error message in the console, on line 506 of core-overlay.html
.
Because the backdrop sits on top of everything, this makes it impossible to interact with the UI unless I go into the dev tools and remove the <div class="core-overlay-backdrop">
element(s). If there are multiple such elements, one of them will also have the core-opened
class, but not the others.
This is with non-layered overlays, I haven't tried it with layered overlays, so I don't know if that makes a difference.
Using TAB keys, I can highlight a "close" button, or link for example in an overlay, bind a key event to any elements that contain this attribute, so I can hit enter on that element to close the overlay.
Similar to ESC ( which is easier by the way ) but it's a missing action that is useful.
e.g.
< core-overlay >
< button core-overlay-toggle >close< /button > <-- auto bind enter key event to this element
< /core-overlay >
It's common to need to resize an overlay based on element size changing.
On core-overlay in iOS 8, the content in the overlay appears as if it's beneath the overlay (greyed out like the rest of the page).
This is resolved if I set layered
but I'm mostly concerned about the different behavior compared to Safari on Mac OS X and Chrome.
Repro, on iOS (i.e. mobile Safari): Goto http://mycommunity.org and tap the top right add button. Fill it out and tap Send. Note how the overlay changes position and just stays there.
Similar, on Chrome or any browser on desktop itself: the overlay changes position each time it's opened. It seems to move a little lower or higher each time it's opened.
Bug w/ core-overlay or something else? I want to solve this. Thank you!
If no role has been set, it would be useful for the core-overlay to specify a role of dialog
. Chrome seems to behave very badly if this role is missing.
I have a handsontable (html spreadsheet) which has some items that have a default z-index over 100. When the paper-dialog pops up on the page, those items with the high z-index don't get caught by the backdrop and keep their colors.
Second, if layered="true", dropdown boxes within the paper-dialog are hidden. For example, a google maps places.Autocomplete
field. It'd make sense that things embedded within the paper-dialog should be higher than the paper-dialog itself.
If you load the page at a screen size with a media query that affects the position, even if you resize the window, the element will not be re-positioned. It would make more sense to me if it always set the position regardless off the CSS, and it's the developer's responsibility to override the style attribute with !important
. Thoughts?
http://jsbin.com/sebege/1/edit
Is this a known limitation?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.