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

Commit

Permalink
polymer-anchor-position -> polymer-anchor-point
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Aug 14, 2013
1 parent a859e35 commit f0d6941
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 38 deletions.
24 changes: 12 additions & 12 deletions polymer-anchor-position/index.html → polymer-anchor-point/index.html
View file
@@ -1,10 +1,10 @@
<!doctype html>
<html>
<head>
<title>polymer-anchor-position</title>
<title>polymer-anchor-point</title>
<link rel="import" href="../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
<link rel="import" href="../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
<link rel="import" href="polymer-anchor-position.html">
<link rel="import" href="polymer-anchor-point.html">
<script src="../../polymer/polymer.js"></script>
<link rel="stylesheet" href="../../polymer-ui-elements/basic.css">
<style>
Expand All @@ -29,22 +29,22 @@
<div id="container">
<polymer-flex-layout vertical="true"></polymer-flex-layout>
<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
<polymer-ui-icon-button icon="menu" anchor-position="bottom left" target-anchor-position="top left"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="menu" anchor-point="bottom left" target-anchor-point="top left"></polymer-ui-icon-button>
<div flex></div>
<polymer-ui-icon-button icon="refresh" anchor-position="bottom center" target-anchor-position="top center"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="refresh" anchor-point="bottom center" target-anchor-point="top center"></polymer-ui-icon-button>
<div flex></div>
<polymer-ui-icon-button icon="add" anchor-position="bottom right" target-anchor-position="top right"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="add" anchor-point="bottom right" target-anchor-point="top right"></polymer-ui-icon-button>
</polymer-ui-toolbar>
<div flex></div>
<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
<polymer-ui-icon-button icon="drawer" anchor-position="top left" target-anchor-position="bottom left"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dots" anchor-position="top center" target-anchor-position="bottom center"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="drawer" anchor-point="top left" target-anchor-point="bottom left"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="dots" anchor-point="top center" target-anchor-point="bottom center"></polymer-ui-icon-button>
<div flex></div>
<polymer-ui-icon-button icon="search" anchor-position="top right" target-anchor-position="bottom right"></polymer-ui-icon-button>
<polymer-ui-icon-button icon="search" anchor-point="top right" target-anchor-point="bottom right"></polymer-ui-icon-button>
</polymer-ui-toolbar>
</div>
<div id="target"></div>
<polymer-anchor-position id="anchorable"></polymer-anchor-position>
<polymer-anchor-point id="anchorable"></polymer-anchor-point>
<script>
function toggle(e) {
var anchorable = document.querySelector('#anchorable');
Expand All @@ -53,9 +53,9 @@
if (target.classList.contains('active')) {
target.classList.remove('active');
} else {
var targetAnchorPos = anchor.getAttribute('target-anchor-position');
target.setAttribute('anchor-position', targetAnchorPos);
target.innerHTML = 'anchor-position: ' + anchor.getAttribute('anchor-position') + '<br>' + 'target anchor-position: ' + targetAnchorPos;
var targetAnchorPos = anchor.getAttribute('target-anchor-point');
target.setAttribute('anchor-point', targetAnchorPos);
target.innerHTML = 'anchor-point: ' + anchor.getAttribute('anchor-point') + '<br>' + 'target anchor-point: ' + targetAnchorPos;
anchorable.target = target;
anchorable.anchor = anchor;
target.classList.add('active');
Expand Down
52 changes: 26 additions & 26 deletions ...hor-position/polymer-anchor-position.html → ...er-anchor-point/polymer-anchor-point.html
View file
Expand Up @@ -3,42 +3,42 @@
* @module Polymer Elements
*/
/**
* polymer-anchor-position can be used to align two nodes. The node to
* polymer-anchor-point can be used to align two nodes. The node to
* use as the reference position is the anchor node, and the node to
* be positioned is the target node.
*
* Both the anchor and target nodes should have an anchor-position
* attribute. The target node is positioned such that its anchor-position
* aligns with the anchor node's anchor-position.
* Both the anchor and target nodes should have an anchor-point
* attribute. The target node is positioned such that its anchor-point
* aligns with the anchor node's anchor-point.
*
* Note: The target node is positioned with position: fixed, and will not
* scroll with the page.
*
* Example:
*
* <div id="anchor" anchor-position="bottom left"></div>
* <div id="target" anchor-position="top left"></div>
* <polymer-anchor-position id="anchor-helper"></polymer-anchor-position>
* <div id="anchor" anchor-point="bottom left"></div>
* <div id="target" anchor-point="top left"></div>
* <polymer-anchor-point id="anchor-helper"></polymer-anchor-point>
* <script>
* var helper = document.querySelector('#anchor-helper');
* helper.anchor = document.querySelector('#anchor');
* helper.target = document.querySelector('#target');
* helper.apply();
* </script>
*
* @class polymer-anchor-position
* @class polymer-anchor-point
*/
-->
<polymer-element name="polymer-anchor-position" attributes="target anchor">
<polymer-element name="polymer-anchor-point" attributes="target anchor">
<script>
var DEFAULT_ANCHOR_POSITION = 'center center';
var DEFAULT_ANCHOR_POINT = 'center center';

function getAnchorPosition(node) {
return node.getAttribute('anchor-position') || DEFAULT_ANCHOR_POSITION;
function getAnchorPoint(node) {
return node.getAttribute('anchor-point') || DEFAULT_ANCHOR_POSITION;
};

(function() {
Polymer('polymer-anchor-position', {
Polymer('polymer-anchor-point', {
/**
* The node to be positioned.
* @attribute target
Expand All @@ -58,27 +58,27 @@
if (!this.canPosition()) {
return;
}
var pos = this.getAnchorPosition();
var pos = this.computePosition();
this.target.style.position = 'fixed';
this.target.style.top = pos.top + 'px';
this.target.style.left = pos.left + 'px';
},
getAnchorPosition: function() {
computePosition: function() {
var pos;
var rect = this.anchor.getBoundingClientRect();
var anchorPos = getAnchorPosition(this.anchor);
if (anchorPos) {
var anchorPt = getAnchorPoint(this.anchor);
if (anchorPt) {
pos = {};
if (anchorPos.indexOf('top') != -1) {
if (anchorPt.indexOf('top') != -1) {
pos.top = rect.top;
} else if (anchorPos.indexOf('bottom') != -1) {
} else if (anchorPt.indexOf('bottom') != -1) {
pos.top = rect.bottom;
} else {
pos.top = rect.top + rect.height / 2;
}
if (anchorPos.indexOf('left') != -1) {
if (anchorPt.indexOf('left') != -1) {
pos.left = rect.left;
} else if (anchorPos.indexOf('right') != -1) {
} else if (anchorPt.indexOf('right') != -1) {
pos.left = rect.right;
} else {
pos.left = rect.left + rect.width / 2;
Expand All @@ -92,15 +92,15 @@
// adjust by this element's target anchor pos
if (this.target) {
var targetRect = this.target.getBoundingClientRect();
var targetAnchorPos = getAnchorPosition(this.target);
if (targetAnchorPos.indexOf('bottom') != -1) {
var targetAnchorPt = getAnchorPoint(this.target);
if (targetAnchorPt.indexOf('bottom') != -1) {
pos.top -= targetRect.height;
} else if (targetAnchorPos.indexOf('top') === -1) {
} else if (targetAnchorPt.indexOf('top') === -1) {
pos.top -= targetRect.height / 2;
}
if (targetAnchorPos.indexOf('right') != -1) {
if (targetAnchorPt.indexOf('right') != -1) {
pos.left -= targetRect.width;
} else if (targetAnchorPos.indexOf('left') === -1) {
} else if (targetAnchorPt.indexOf('left') === -1) {
pos.left -= targetRect.width / 2;
}
}
Expand Down

0 comments on commit f0d6941

Please sign in to comment.