Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
core-popup-overlay: support _shouldPosition
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Sep 3, 2014
1 parent 3b6a061 commit 333230e
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 62 deletions.
62 changes: 32 additions & 30 deletions core-popup-overlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,31 +28,34 @@
publish: {

/**
* The `relatedTarget` is an element used to position the overlay, for example a
* button the user taps to show a menu.
* The `relatedTarget` is an element used to position the overlay.
*
* @attribute relatedTarget
* @type Element
* @type Node
*/
relatedTarget: null,

/**
* The horizontal alignment of the overlay relative to the `relatedTarget`.
* `left` means the left edges are aligned together and `right` means the right
* edges are aligned together.
*
* @attribute halign
* @type 'left'|'right'
* @type 'left' | 'right'
* @default 'auto'
*/
halign: 'left',

/**
* The vertical alignment of the overlay relative to the `relatedTarget`.
* The vertical alignment of the overlay relative to the `relatedTarget`. `top`
* means the top edges are aligned together and `bottom` means the bottom edges
* are aligned together.
*
* @attribute valign
* @type 'top'|'bottom'
* @default 'bottom'
* @type 'top' | 'bottom'
* @default 'top'
*/
valign: 'bottom',
valign: 'top',

margin: 12

Expand All @@ -67,23 +70,30 @@
var top, left, bottom, right;
var ref = this.relatedTarget.getBoundingClientRect();

// if (this._shouldPosition.left) {
if (this._shouldPosition.left) {
this.target.style.left = '-99999px';
}
if (this._shouldPosition.top) {
this.target.style.top = '-99999px';
}

if (this._shouldPosition.left) {
if (this.halign === 'left') {
left = ref.left;
} else if (this.halign === 'right') {
left = Math.max(ref.right - this.target.offsetWidth, this.margin);
}
this.target.style.left = left + 'px';
// }
}

// if (this._shouldPosition.top) {
if (this.valign === 'bottom') {
if (this._shouldPosition.top) {
if (this.valign === 'top') {
top = ref.top;
} else {
top = Math.max(ref.bottom - this.target.offsetHeight, this.margin)
}
this.target.style.top = top + 'px';
// }
}

},

Expand All @@ -99,27 +109,19 @@

var maxW, maxH;

// if (this._shouldPosition.left) {
if (this.halign === 'left') {
maxW = window.innerWidth - rect.left - this.margin;
} else {
maxW = ref.right - rect.left;
}
if (this._shouldPosition.left) {
maxW = window.innerWidth - rect.left - this.margin;
sizer.style.maxWidth = maxW + 'px';
// }
}

// if (this._shouldPosition.top) {
if (this.valign === 'bottom') {
maxH = window.innerHeight - rect.top - this.margin;
} else {
maxH = ref.bottom - rect.top;
}
if (this._shouldPosition.top) {
maxH = window.innerHeight - rect.top - this.margin;
sizer.style.maxHeight = maxH + 'px';
// }
}

// if (!this._shouldPosition.left && !this._shouldPosition.top) {
// this.super();
// }
if (!this._shouldPosition.left && !this._shouldPosition.top) {
this.super();
}
}

});
Expand Down
4 changes: 0 additions & 4 deletions core-popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,5 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
display: block;
border-radius: 3px;
color: #000;
max-height: inherit;
overflow: auto;
/* initially position offscreen to get the natural offsetWidth and offsetHeight */
left: -99999px;
top: -99999px;
}
68 changes: 53 additions & 15 deletions core-popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,50 @@

<!--
`core-popup` is a popup that can be positioned relative to another element, usually the element
that opens or closes the popup. It can be used to implement various kinds of popup menus.
`core-popup` is an element that is positioned relatively to another element, usually the
element that triggers the popup. The popup and the triggering element should be children
of the same element that has a CSS `position`.
Example:
<template is="auto-binding">
<div relative>
<div id="trigger">Your favorite pastry:</div>
<core-popup relatedTarget="{{$.trigger}}">
<core-menu>
<core-item label="Churro"></core-item>
<core-item label="Donut"></core-item>
<core-item label="Macaron"></core-item>
</core-menu>
</core-popup>
</div>
</template>
Positioning
-----------
By default, the popup is positioned on top of the `relatedTarget` with the top and left edges aligned.
The `halign` and `valign` properties controls the various alignments. The size of the popup is
automatically restrained such that it is entirely visible on the screen.
If you need more control over the popup's position, use CSS. The `halign` and `valign` properties are
ignored if either `top` or `left` are set on the popup.
The popup is positioned with `position: absolute` by default.
Example:
<style>
/* manually position the popup with position: absolute in a container with position: relative so it scrolls with #control */
core-popup {
position: absolute;
top: 0;
left: 0;
}
</style>
<template is="auto-binding">
<div relative>
<div id="control">Your favorite pastry:</div>
<core-popup relatedTarget="{{$.control}}">
<core-menu>
Expand All @@ -23,6 +61,7 @@
<core-item label="Macaron"></core-item>
</core-menu>
</core-popup>
</div>
</template>
@group Polymer Core Elements
Expand Down Expand Up @@ -61,8 +100,8 @@
publish: {

/**
* The element associated with this menu, usually the element that
* causes the menu the open.
* The element associated with this menu, usually the element that triggers
* the menu.
*
* @attribute relatedTarget
* @type Node
Expand All @@ -79,27 +118,26 @@
opened: false,

/**
* The horizontal alignment of the pulldown menu relative to the button.
* If set to `auto`, the popup will be positioned the same as `left` if its
* natural width can fit in the viewport, otherwise it will be positioned as
* `right`.
* The horizontal alignment of the popup relative to `relatedTarget`. `left`
* means the left edges are aligned together. `right` means the right edges
* are aligned together.
*
* @attribute halign
* @type 'left' | 'right'
* @default 'auto'
* @default 'left'
*/
halign: 'left',

/**
* The vertical alignment of the pulldown menu relative to the button. If set
* to `auto`, the popup will be positioned the same as `bottom` if its natural
* height can fit in the viewport, otherwise it will be positioned as `top`.
* The vertical alignment of the popup relative to `relatedTarget`. `top` means
* the top edges are aligned together. `bottom` means the bottom edges are
* aligned together.
*
* @attribute valign
* @type 'bottom' | 'top'
* @default 'bottom'
* @type 'top' | 'bottom'
* @default 'top'
*/
valign: 'bottom',
valign: 'top',

/**
* The transition property specifies a string which identifies a
Expand Down
35 changes: 22 additions & 13 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,18 +59,26 @@
}

.toolbar-1 {
background-color: #4285f4;
background-color: #3b78e7;
}

.toolbar-2 {
background-color: #5e97f6;
background-color: #4285f4;
}

.toolbar-3 {
background-color: #5e97f6;
}

.bottom-toolbar-1 {
background-color: #0d904f;
}

.bottom-toolbar-2 {
background-color: #0f9d58;
}

.toolbar-4 {
.bottom-toolbar-3 {
background-color: #33ac71;
}

Expand Down Expand Up @@ -101,6 +109,7 @@
<style>
:host {
display: inline-block;
position: relative;
}
</style>

Expand Down Expand Up @@ -166,7 +175,7 @@
<div class="toolbar toolbar-1" layout horizontal center>

<div class="toolbar-label">
halign=left
halign=left valign=top
</div>

<pop-up halign="left">
Expand Down Expand Up @@ -194,7 +203,7 @@ <h2>scrollable-vertical</h2>
<div class="toolbar toolbar-2" layout horizontal center>

<div class="toolbar-label">
halign=right
halign=right valign=top
</div>

<div flex></div>
Expand Down Expand Up @@ -230,20 +239,20 @@ <h2>Hello World!</h2>
<div style="height:2000px;">I am scrollable...</div>
</div>

<div class="toolbar toolbar-4" layout horizontal center>
<div class="toolbar bottom-toolbar-2" layout horizontal center>

<div class="toolbar-label">
halign=left
halign=left valign=bottom
</div>

<pop-up halign="left" valign="top">
<pop-up halign="left" valign="bottom">
<core-icon-button class="control" icon="menu"></core-icon-button>
<div class="popup" layout horizontal center-center>
<h2>Hello World!</h2>
</div>
</pop-up>

<pop-up halign="left" valign="top">
<pop-up halign="left" valign="bottom">
<core-icon-button class="control" icon="menu"></core-icon-button>
<div class="popup">
<h2>scrollable-vertical</h2>
Expand All @@ -258,15 +267,15 @@ <h2>scrollable-vertical</h2>

</div>

<div class="toolbar toolbar-3" layout horizontal center>
<div class="toolbar bottom-toolbar-1" layout horizontal center>

<div class="toolbar-label">
halign=right
halign=right valign=bottom
</div>

<div flex></div>

<pop-up halign="right" valign="top">
<pop-up halign="right" valign="bottom">
<core-icon-button class="control" icon="menu"></core-icon-button>
<div class="popup">
<h2>scrollable-vertical</h2>
Expand All @@ -276,7 +285,7 @@ <h2>scrollable-vertical</h2>
</div>
</pop-up>

<pop-up halign="right" valign="top">
<pop-up halign="right" valign="bottom">
<core-icon-button class="control" icon="more-vert"></core-icon-button>
<div class="popup" layout horizontal center-center>
<h2>Hello World!</h2>
Expand Down

0 comments on commit 333230e

Please sign in to comment.