Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Commit

Permalink
Merge pull request #1 from PolymerElements/initial-impl
Browse files Browse the repository at this point in the history
initial impl
  • Loading branch information
Yvonne Yip committed Apr 28, 2015
2 parents b3abbca + badf100 commit a48fd98
Show file tree
Hide file tree
Showing 10 changed files with 713 additions and 1 deletion.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
bower_components
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# iron-fit-behavior
Fits an element into another element

Fits an element in the window, or another element.
19 changes: 19 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "iron-fit-behavior",
"version": "0.8.0",
"private": true,
"main": "iron-fit-behavior",
"authors": "The Polymer Authors",
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-fit-behavior.git"
},
"dependencies": {
"polymer": "Polymer/polymer#v0.8.0-rc.7"
},
"devDependencies": {
"test-fixture": "PolymerElements/test-fixture#^0.8.0",
"web-component-tester": "*",
"webcomponentsjs": "^0.6.0"
}
}
43 changes: 43 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>

<title>iron-fit-behavior demo</title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="simple-fit.html">

<style>

.sized {
position: relative;
width: 50%;
height: 50%;
}

</style>

</head>
<body>

<simple-fit auto-fit class="sized">
centered in window
</simple-fit>


</body>
</html>
42 changes: 42 additions & 0 deletions demo/simple-fit.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-fit-behavior.html">

<dom-module id="simple-fit">

<style>
:host {
display: block;
background: black;
color: white;
padding: 8px;
}
</style>

<template>
<content></content>
</template>

</dom-module>

<script>

Polymer({

is: 'simple-fit',

behaviors: [
Polymer.IronFitBehavior
]

});

</script>
30 changes: 30 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

<title>iron-fit-behavior</title>

<script src="../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-doc-viewer/iron-doc-viewer.html">

</head>
<body>

<iron-doc-viewer></iron-doc-viewer>

</body>
</html>
198 changes: 198 additions & 0 deletions iron-fit-behavior.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">

<!--
Fits an element in another element using `max-height` and `max-width`, and optionally centers it.
-->
<script>

Polymer.IronFitBehavior = {

properties: {

/**
* The element that will receive a `max-height`/`width`. By default it is the same as `this`,
* but it can be set to a child element. This is useful, for example, for implementing a
* scrolling region inside the element.
*/
sizingTarget: {
type: Object,
value: function() {
return this;
}
},

/**
* The element to fit `this` into.
*/
fitInto: {
type: Object,
value: window
},

/**
* Set to true to auto-fit on attach.
*/
autoFit: {
type: Boolean,
value: false
},

_fitInfo: {
type: Object
}

},

get _fitWidth() {
var fitWidth;
if (this.fitInto === window) {
fitWidth = this.fitInto.innerWidth;
} else {
fitWidth = this.fitInto.getBoundingClientRect().width;
}
return fitWidth;
},

get _fitHeight() {
var fitHeight;
if (this.fitInto === window) {
fitHeight = this.fitInto.innerHeight;
} else {
fitHeight = this.fitInto.getBoundingClientRect().height;
}
return fitHeight;
},

attached: function() {
if (this.autoFit) {
if (window.getComputedStyle(this).display === 'none') {
setTimeout(function() {
this.fit();
}.bind(this));
} else {
this.fit();
}
}
},

fit: function() {
this._discoverInfo();
this.constrain();
this.center();
},

/**
* Memoize information needed to position and size the target element.
*/
_discoverInfo: function() {
if (this._fitInfo) {
return;
}
var target = window.getComputedStyle(this);
var sizer = window.getComputedStyle(this.sizingTarget);
this._fitInfo = {
positionedBy: {
vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
'bottom' : null),
horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
'right' : null),
css: target.position
},
sizedBy: {
height: sizer.maxHeight !== 'none',
width: sizer.maxWidth !== 'none'
},
margin: {
top: parseInt(target.marginTop, 10) || 0,
right: parseInt(target.marginRight, 10) || 0,
bottom: parseInt(target.marginBottom, 10) || 0,
left: parseInt(target.marginLeft, 10) || 0
}
};
},

/**
* Resets the target element's position and size constraints, and clear
* the memoized data.
*/
resetFit: function() {
if (!this._fitInfo || !this._fitInfo.sizedBy.height) {
this.sizingTarget.style.maxHeight = '';
this.style.top = '';
}
if (!this._fitInfo || !this._fitInfo.sizedBy.width) {
this.sizingTarget.style.maxWidth = '';
this.style.left = '';
}
this.style.position = this._fitInfo.css;
this._fitInfo = null;
},

refit: function() {
this.resetFit();
this.fit();
},

constrain: function() {
var info = this._fitInfo;
// position at (0px, 0px) if not already positioned, so we can measure the natural size.
if (!this._fitInfo.positionedBy.vertically) {
this.style.top = '0px';
}
if (!this._fitInfo.positionedBy.horizontally) {
this.style.left = '0px';
}
// need border-box for margin/padding
this.sizingTarget.style.boxSizing = 'border-box';
// constrain the width and height if not already set
var rect = this.getBoundingClientRect();
if (!info.sizedBy.height) {
this._sizeDimension(rect, info.positionedBy.vertically, 'top', 'bottom', 'Height');
}
if (!info.sizedBy.width) {
this._sizeDimension(rect, info.positionedBy.horizontally, 'left', 'right', 'Width');
}
},

_sizeDimension: function(rect, positionedBy, start, end, extent) {
var info = this._fitInfo;
var max = extent === 'Width' ? this._fitWidth : this._fitHeight;
var flip = (positionedBy === end);
var offset = flip ? max - rect[end] : rect[start];
var margin = info.margin[flip ? start : end];
var offsetExtent = 'offset' + extent;
var sizingOffset = this[offsetExtent] - this.sizingTarget[offsetExtent];
this.sizingTarget.style['max' + extent] = (max - margin - offset - sizingOffset) + 'px';
},

/**
* Centers horizontally and vertically if not already positioned.
*/
center: function() {
// only center if position fixed.
this.style.position = 'fixed';
if (!this._fitInfo.positionedBy.vertically) {
var top = (this._fitHeight - this.offsetHeight) / 2;
top -= this._fitInfo.margin.top;
this.style.top = top + 'px';
}
if (!this._fitInfo.positionedBy.horizontally) {
var left = (this._fitWidth - this.offsetWidth) / 2;
left -= this._fitInfo.margin.left;
this.style.left = left + 'px';
}
}

};

</script>
34 changes: 34 additions & 0 deletions test/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>

<title>iron-fit-behavior tests</title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

<script src="../../web-component-tester/browser.js"></script>

</head>
<body>

<script>

WCT.loadSuites([
'iron-fit-behavior.html'
]);

</script>

</body>
</html>
Loading

0 comments on commit a48fd98

Please sign in to comment.