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

Commit

Permalink
Merge pull request #24 from ebidel/fixesfordocs
Browse files Browse the repository at this point in the history 
Format fixes for docs so markdown generator doesn't barf
  • Loading branch information
@frankiefu
frankiefu committed Aug 20, 2013
2 parents 0624d06 + 16dd3cf commit fd06654
Show file tree
Hide file tree
Showing 2 changed files with 175 additions and 175 deletions.
316 changes: 158 additions & 158 deletions polymer-anchor-point/polymer-anchor-point.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,181 +14,181 @@
* Note: The target node is positioned with position: fixed, and will not
* scroll with the page.
*
* Note: This is meant to polyfill the <dialog> positioning behavior when
* Note: This is meant to polyfill the `<dialog>` positioning behavior when
* an anchor is provided. Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
*
* Example:
*
* <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>
* <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-point
*/
-->
<polymer-element name="polymer-anchor-point" attributes="target anchor">
<script>
(function() {
var DEFAULT_ANCHOR_POINT = 'center center';
<script>
(function() {
var DEFAULT_ANCHOR_POINT = 'center center';

function getAnchorPoint(node) {
var anchorPt = node.getAttribute('anchor-point');
if (!anchorPt || anchorPt === 'none') {
anchorPt = DEFAULT_ANCHOR_POINT;
}
return anchorPt;
};
function getAnchorPoint(node) {
var anchorPt = node.getAttribute('anchor-point');
if (!anchorPt || anchorPt === 'none') {
anchorPt = DEFAULT_ANCHOR_POINT;
}
return anchorPt;
};

function lengthIsPx(length) {
return length.slice(-2) === 'px';
};
function lengthIsPx(length) {
return length.slice(-2) === 'px';
};

function lengthIsPercent(length) {
return length.slice(-1) === '%';
};
function lengthIsPercent(length) {
return length.slice(-1) === '%';
};

function computeLength(length, ref) {
var computed = 0;
if (lengthIsPx(length)) {
computed = length.slice(0, -2);
} else if (lengthIsPercent(length)) {
computed = ref * length.slice(0, -1) / 100;
}
return computed;
};
function computeLength(length, ref) {
var computed = 0;
if (lengthIsPx(length)) {
computed = length.slice(0, -2);
} else if (lengthIsPercent(length)) {
computed = ref * length.slice(0, -1) / 100;
}
return computed;
};

function partIsX(part) {
return part === 'left' || part === 'right' || part === 'center';
};
function partIsX(part) {
return part === 'left' || part === 'right' || part === 'center';
};

function partIsY(part) {
return part === 'top' || part === 'bottom' || part === 'center';
};
function partIsY(part) {
return part === 'top' || part === 'bottom' || part === 'center';
};

function partIsKeyword(part) {
return part.slice(-1) !== '%' && part.slice(-2) !== 'px';
};
function partIsKeyword(part) {
return part.slice(-1) !== '%' && part.slice(-2) !== 'px';
};

function parsePosition(position) {
var parsed = {};
var parts = position.split(' ');
var i = 0;
var lastEdgeX = true;
do {
if (partIsX(parts[i])) {
parsed.x = parts[i];
lastEdgeX = parts[i] !== 'center';
} else if (partIsY(parts[i])) {
parsed.y = parts[i];
lastEdgeX = false;
} else if (lastEdgeX) {
parsed.xOffset = parts[i];
lastEdgeX = false;
} else {
parsed.yOffset = parts[i];
}
} while (++i < parts.length);
return parsed;
};
function parsePosition(position) {
var parsed = {};
var parts = position.split(' ');
var i = 0;
var lastEdgeX = true;
do {
if (partIsX(parts[i])) {
parsed.x = parts[i];
lastEdgeX = parts[i] !== 'center';
} else if (partIsY(parts[i])) {
parsed.y = parts[i];
lastEdgeX = false;
} else if (lastEdgeX) {
parsed.xOffset = parts[i];
lastEdgeX = false;
} else {
parsed.yOffset = parts[i];
}
} while (++i < parts.length);
return parsed;
};

function computeAnchorOffset(rect, anchorPt) {
var offset = {
left: 0,
top: 0
};
var parsed = parsePosition(anchorPt);
if (!parsed.x && !parsed.xOffset) {
offset.left = rect.width / 2;
} else if (parsed.x && !parsed.xOffset) {
switch (parsed.x) {
case 'left':
offset.left = 0;
break;
case 'right':
offset.left = rect.width;
break;
case 'center':
offset.left = rect.width / 2;
break;
}
} else {
var computed = computeLength(parsed.xOffset, rect.width);
if (parsed.x === 'right') {
offset.left = rect.width - computed;
} else if (!parsed.x || parsed.x === 'left') {
offset.left = computed;
}
}
if (!parsed.y && !parsed.yOffset) {
offset.top = rect.height / 2;
} else if (parsed.y && !parsed.yOffset) {
switch (parsed.y) {
case 'top':
offset.top = 0;
break;
case 'bottom':
offset.top = rect.height;
break;
case 'center':
offset.top = rect.height / 2;
break;
}
} else {
var computed = computeLength(parsed.yOffset, rect.height);
if (parsed.y === 'bottom') {
offset.top = rect.height - computed;
} else if (!parsed.y || parsed.y === 'top') {
offset.top = computed;
}
}
return offset;
};
function computeAnchorOffset(rect, anchorPt) {
var offset = {
left: 0,
top: 0
};
var parsed = parsePosition(anchorPt);
if (!parsed.x && !parsed.xOffset) {
offset.left = rect.width / 2;
} else if (parsed.x && !parsed.xOffset) {
switch (parsed.x) {
case 'left':
offset.left = 0;
break;
case 'right':
offset.left = rect.width;
break;
case 'center':
offset.left = rect.width / 2;
break;
}
} else {
var computed = computeLength(parsed.xOffset, rect.width);
if (parsed.x === 'right') {
offset.left = rect.width - computed;
} else if (!parsed.x || parsed.x === 'left') {
offset.left = computed;
}
}
if (!parsed.y && !parsed.yOffset) {
offset.top = rect.height / 2;
} else if (parsed.y && !parsed.yOffset) {
switch (parsed.y) {
case 'top':
offset.top = 0;
break;
case 'bottom':
offset.top = rect.height;
break;
case 'center':
offset.top = rect.height / 2;
break;
}
} else {
var computed = computeLength(parsed.yOffset, rect.height);
if (parsed.y === 'bottom') {
offset.top = rect.height - computed;
} else if (!parsed.y || parsed.y === 'top') {
offset.top = computed;
}
}
return offset;
};

Polymer('polymer-anchor-point', {
/**
* The node to be positioned.
* @attribute target
* @type Node
*/
target: null,
/**
* The node to align the target to.
* @attribute anchor
* @type node
*/
anchor: null,
canPosition: function() {
return this.target && this.anchor;
},
apply: function() {
if (!this.canPosition()) {
return;
}
var pos = this.computePosition();
this.target.style.position = 'fixed';
this.target.style.top = pos.top + 'px';
this.target.style.left = pos.left + 'px';
},
computePosition: function() {
var rect = this.anchor.getBoundingClientRect();
var anchorPt = getAnchorPoint(this.anchor);
var anchorOffset = computeAnchorOffset(rect, anchorPt);
var targetRect = this.target.getBoundingClientRect();
var targetAnchorPt = getAnchorPoint(this.target);
var targetOffset = computeAnchorOffset(targetRect, targetAnchorPt);
var pos = {
left: rect.left + anchorOffset.left - targetOffset.left,
top: rect.top + anchorOffset.top - targetOffset.top
};
return pos;
}
});
})();
</script>
Polymer('polymer-anchor-point', {
/**
* The node to be positioned.
* @attribute target
* @type Node
*/
target: null,
/**
* The node to align the target to.
* @attribute anchor
* @type node
*/
anchor: null,
canPosition: function() {
return this.target && this.anchor;
},
apply: function() {
if (!this.canPosition()) {
return;
}
var pos = this.computePosition();
this.target.style.position = 'fixed';
this.target.style.top = pos.top + 'px';
this.target.style.left = pos.left + 'px';
},
computePosition: function() {
var rect = this.anchor.getBoundingClientRect();
var anchorPt = getAnchorPoint(this.anchor);
var anchorOffset = computeAnchorOffset(rect, anchorPt);
var targetRect = this.target.getBoundingClientRect();
var targetAnchorPt = getAnchorPoint(this.target);
var targetOffset = computeAnchorOffset(targetRect, targetAnchorPt);
var pos = {
left: rect.left + anchorOffset.left - targetOffset.left,
top: rect.top + anchorOffset.top - targetOffset.top
};
return pos;
}
});
})();
</script>
</polymer-element>
Loading

0 comments on commit fd06654

Please sign in to comment.