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

Commit

Permalink
core-overlay updates
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Sep 16, 2014
1 parent f63d14f commit b65c3f1
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 60 deletions.
114 changes: 55 additions & 59 deletions core-dropdown-overlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,44 +56,40 @@
* @type 'top' | 'bottom'
* @default 'top'
*/
valign: 'top',

/**
* A pixel amount around the overlay that will be reserved. It's useful for
* ensuring that, for example, a shadow displayed outside the overlay will
* always be visible.
*
* @attribute margin
* @type number
* @default 0
*/
margin: 0
valign: 'top'

},

updateTargetDimensions: function() {
this.measureTarget();
this.super();
},
measure: function() {
var target = this.target;
// remember position, because core-overlay may have set the property
var pos = target.style.position;

measureTarget: function() {
var sizer = this.sizingTarget || this.target;
// get the size of the target as if it's positioned in the top left
// corner of the screen
target.style.position = 'fixed';
target.style.left = '0px';
target.style.top = '0px';

/* position offscreen if we're auto-positioning to get the natural width and height of the dropdown */
sizer.style.position = 'absolute';
sizer.style.left = '-99999px';
sizer.style.top = '-99999px';
var rect = target.getBoundingClientRect();

var rect = sizer.getBoundingClientRect();
target.style.position = pos;
target.style.left = null;
target.style.top = null;

this._naturalSize = {
width: rect.width,
height: rect.height
};
return rect;
},

sizer.style.position = this.targetStyle.position;
sizer.style.left = null;
sizer.style.top = null;
resetTargetDimensions: function() {
var dims = this.dimensions;
var style = this.target.style;
if (dims.position.h_by === this.localName) {
style[dims.position.h] = null;
}
if (dims.position.v_by === this.localName) {
style[dims.position.v] = null;
}
this.super();
},

positionTarget: function() {
Expand All @@ -102,54 +98,54 @@
return;
}

var t_op = this.target.offsetParent;
var r_op = this.relatedTarget.offsetParent;
var target = this.target;
var related = this.relatedTarget;

// explicitly set width/height, because we don't want it constrained
// to the offsetParent
var rect = this.measure();
target.style.width = rect.width + 'px';
target.style.height = rect.height + 'px';

var t_op = target.offsetParent;
var r_op = related.offsetParent;
if (window.ShadowDOMPolyfill) {
t_op = wrap(t_op);
r_op = wrap(r_op);
}

if (t_op !== r_op && t_op !== this.relatedTarget) {
if (t_op !== r_op && t_op !== related) {
console.warn('core-dropdown-overlay: dropdown\'s offsetParent must be the relatedTarget or the relatedTarget\'s offsetParent!');
}

// Don't use CSS to handle halign/valign here so _shouldPosition still works.
// Don't use CSS to handle halign/valign so we can use
// dimensions.position to detect custom positioning

var inside = t_op === this.relatedTarget;
var ref = this.relatedTarget.getBoundingClientRect();
var dims = this.dimensions;
var margin = dims.margin;
var inside = t_op === related;

if (this._shouldPosition.left) {
var left;
var ml = -1 * ref.left + (inside ? 0 : this.relatedTarget.offsetLeft) + this.margin;
if (!dims.position.h) {
if (this.halign === 'right') {
left = Math.max((inside ? 0 : this.relatedTarget.offsetLeft) + this.relatedTarget.offsetWidth - this._naturalSize.width, ml);
target.style.right = ((inside ? 0 : t_op.offsetWidth - related.offsetLeft - related.offsetWidth) - margin.right) + 'px';
dims.position.h = 'right';
} else {
left = inside ? 0 : this.relatedTarget.offsetLeft;
target.style.left = ((inside ? 0 : related.offsetLeft) - margin.left) + 'px';
dims.position.h = 'left';
}
this.target.style.left = left + 'px';
dims.position.h_by = this.localName;
}

if (this._shouldPosition.top) {
var top;
var mt = -1 * ref.top + (inside ? 0 : this.relatedTarget.offsetTop) + this.margin;
if (!dims.position.v) {
if (this.valign === 'bottom') {
top = Math.max((inside ? 0 : this.relatedTarget.offsetTop) + this.relatedTarget.offsetHeight - this._naturalSize.height, mt);
target.style.bottom = ((inside ? 0 : t_op.offsetHeight - related.offsetTop - related.offsetHeight) - margin.bottom) + 'px';
dims.position.v = 'bottom';
} else {
top = inside ? 0 : this.relatedTarget.offsetTop;
target.style.top = ((inside ? 0 : related.offsetTop) - margin.top) + 'px';
dims.position.v = 'top';
}
this.target.style.top = top + 'px';
dims.position.v_by = this.localName;
}
},

sizeTarget: function() {
var sizer = this.sizingTarget || this.target;

sizer.style.width = this._naturalSize.width + 'px';
sizer.style.height = this._naturalSize.height + 'px';

// XXX: if valign=bottom, maxHeight is too tall

this.super();
}

});
Expand Down
139 changes: 138 additions & 1 deletion demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,12 +77,20 @@
border-radius: 3px;
}

drop-down.margin::shadow core-dropdown {
margin: 12px;
}

drop-down.open-below::shadow core-dropdown {
position: absolute;
top: 38px;
left: 0px;
}

drop-down.constrained::shadow core-dropdown {
max-height: 500px;
}

.dropdown {
padding: 12px;
}
Expand Down Expand Up @@ -161,6 +169,32 @@
</script>
</polymer-element>

<polymer-element name="drop-down-2" attributes="opened halign valign">
<template>
<style>
:host {
display: inline-block;
}
#trigger {
position: relative;
}
</style>
<div id="trigger" on-tap="{{toggle}}">
<content select=".core-dropdown-trigger"></content>
<core-dropdown relatedTarget="{{$.trigger}}" halign="{{halign}}" valign="{{valign}}" opened="{{opened}}" margin="12">
<content></content>
</core-dropdown>
</div>
</template>
<script>
Polymer({
toggle: function() {
this.opened = !this.opened;
}
});
</script>
</polymer-element>

<template is="auto-binding">

<div layout vertical fit>
Expand All @@ -178,6 +212,13 @@ <h2>Hello World!</h2>
</div>
</drop-down>

<drop-down-2 halign="left">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown" layout horizontal center-center>
<h2>I'm a child of the button</h2>
</div>
</drop-down-2>

<drop-down halign="left">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown">
Expand All @@ -188,6 +229,16 @@ <h2>scrollable-vertical</h2>
</div>
</drop-down>

<drop-down class="margin" halign="left">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown">
<h2>margins</h2>
<template repeat="{{countries}}">
<p>{{name}}</p>
</template>
</div>
</drop-down>

<div flex>
</div>

Expand All @@ -201,6 +252,16 @@ <h2>scrollable-vertical</h2>

<div flex></div>

<drop-down class="margin" halign="right">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown">
<h2>margin</h2>
<template repeat="{{countries}}">
<p>{{name}}</p>
</template>
</div>
</drop-down>

<drop-down halign="right">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown">
Expand All @@ -211,6 +272,13 @@ <h2>scrollable-vertical</h2>
</div>
</drop-down>

<drop-down-2 halign="right">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown" layout horizontal center-center>
<h2>I'm a child of the button</h2>
</div>
</drop-down-2>

<drop-down halign="right">
<core-icon-button class="core-dropdown-trigger" icon="more-vert"></core-icon-button>
<div class="dropdown" layout horizontal center-center>
Expand All @@ -235,8 +303,43 @@ <h2>Hello World!</h2>
<h2>Custom positioning</h2>
</div>
</drop-down>

<drop-down class="open-below constrained">
<core-icon-button class="core-dropdown-trigger" icon="social:notifications"></core-icon-button>
<div class="dropdown">
<h2>Scrollable + custom size + custom positioning</h2>
<template repeat="{{countries}}">
<p>{{name}}</p>
</template>
</div>
</drop-down>
</div>
<div style="height:2000px;">I am scrollable...</div>

<p>scroll me...</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="toolbar bottom-toolbar-2" layout horizontal center>
Expand All @@ -252,6 +355,13 @@ <h2>Hello World!</h2>
</div>
</drop-down>

<drop-down-2 halign="left" valign="bottom">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown" layout horizontal center-center>
<h2>I'm a child of the button</h2>
</div>
</drop-down-2>

<drop-down halign="left" valign="bottom">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown">
Expand All @@ -262,6 +372,16 @@ <h2>scrollable-vertical</h2>
</div>
</drop-down>

<drop-down class="margin" halign="left" valign="bottom">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown">
<h2>margin</h2>
<template repeat="{{countries}}">
<p>{{name}}</p>
</template>
</div>
</drop-down>

<div flex>
</div>

Expand All @@ -275,6 +395,16 @@ <h2>scrollable-vertical</h2>

<div flex></div>

<drop-down class="margin" halign="right" valign="bottom">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown">
<h2>margin</h2>
<template repeat="{{countries}}">
<p>{{name}}</p>
</template>
</div>
</drop-down>

<drop-down halign="right" valign="bottom">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown">
Expand All @@ -285,6 +415,13 @@ <h2>scrollable-vertical</h2>
</div>
</drop-down>

<drop-down-2 halign="right" valign="bottom">
<core-icon-button class="core-dropdown-trigger" icon="menu"></core-icon-button>
<div class="dropdown" layout horizontal center-center>
<h2>I'm a child of the button</h2>
</div>
</drop-down-2>

<drop-down halign="right" valign="bottom">
<core-icon-button class="core-dropdown-trigger" icon="more-vert"></core-icon-button>
<div class="dropdown" layout horizontal center-center>
Expand Down

0 comments on commit b65c3f1

Please sign in to comment.