this branch should be dependant of master

This commit is contained in:
Luke Evers 2015-07-02 11:56:56 -04:00
parent 61fc7a8e38
commit 5569077384
7 changed files with 3 additions and 167 deletions

View file

@ -1,50 +1,3 @@
# Contain Element # Contain Element GH-Pages
A JavaScript plugin to contain an element within its parent element.
## Description
The plugin scales an element to the minimum size required for it to be completely contained within its parent, and retains its original aspect ratio by cropping portions that don't fit based on its vertical and horizontal alignment (by default both are set to: `center`).
[Demo](http://williamsny.github.io/contain-element/)
## Features
* Pure JavaScript with no dependencies
* Configures the horizontal and vertical alignment of the contained element
* Can detect the native size or have it specified at runtime
* Includes function to update the size and position
## Usage
```javascript
window.onload = function() {
var contain = new ContainElement({
id: 'element', // the id of the element to be contained
width: '100', // (optional) element width in pixels (unset: element width)
height: '100', // (optional) element height in pixels (unset: element height)
valign: 'top', // (optional) vertical alignment: top|bottom (unset: center)
halign: 'left' // (optional) horizontal alignment: left|right (unset: center)
});
// (example) update the size and positioning on window resize
window.onresize = contain.update;
// (example) update the size and positioning on orientation change
screen.addEventListener('orientationchange', contain.update);
};
```
## Credits
Written by [Williams New York](http://williamsnewyork.com)
### Authors
* [Kevin MacMartin](https://github.com/prurigro/)
* [Luke Evers](https://github.com/lukevers/)
## LICENSE
Licensed under the [MIT license](http://opensource.org/licenses/MIT).
View the master branch to view the actual code!

View file

@ -1,17 +0,0 @@
{
"name": "contain-element",
"description": "A JavaScript plugin to contain an element within its parent element",
"authors": [
"Kevin MacMartin",
"Luke Evers"
],
"license": "MIT",
"main": "./contain-element.min.js",
"ignore": [
"**/.*"
],
"repository": {
"type": "git",
"url": "git://github.com/WilliamsNY/contain-element.git"
}
}

View file

@ -1,80 +0,0 @@
function ContainElement(options) {
var scaleFactor = 1;
var element = document.getElementById(options.id);
var elementWidth = options.width || element.offsetWidth;
var elementHeight = options.height || element.offsetHeight;
// Apply required attributes to the element and its parents if they aren't already set
if (element.style.position != 'absolute')
element.style.position = 'absolute';
if (element.parentElement.style.overflow != 'hidden')
element.parentElement.style.overflow = 'hidden';
if (element.parentElement.style.position != 'relative' && element.parentElement.style.position != 'absolute' && element.parentElement.style.position != 'fixed')
element.parentElement.style.position = 'relative';
function updateContain() {
var parentWidth = element.parentElement.offsetWidth;
var parentHeight = element.parentElement.offsetHeight;
// Run the scale/position functionality if able to determine the document width and height
if ((parentWidth) && (parentHeight)) {
// Calculate the scale factor
if (parentWidth > ((parentHeight / (elementHeight * scaleFactor)) * (elementWidth * scaleFactor)))
scaleFactor = (parentWidth / elementWidth);
else
scaleFactor = (parentHeight / elementHeight);
// Scale the element using the scale factor
element.style.width = (elementWidth * scaleFactor) + 'px';
element.style.height = (elementHeight * scaleFactor) + 'px';
// Anchor the element horizontally to the left/middle/right
if (parentWidth < (elementWidth * scaleFactor)) {
switch(options.halign) {
case 'left':
// anchor horizontally to the left of the parent element
element.style.left = 0 + 'px';
break;
case 'right':
// anchor horizontally to the right of the parent element
element.style.left = (0 - ((elementWidth * scaleFactor) - parentWidth)) + 'px';
break;
default:
// anchor horizontally to the center of the parent element
element.style.left = (0 - (((elementWidth * scaleFactor) - parentWidth) / 2 )) + 'px';
}
} else {
element.style.left = 0 + 'px';
}
// Anchor the element vertically to the top/middle/bottom
if ((elementHeight * scaleFactor) > parentHeight) {
switch(options.valign) {
case 'top':
// anchor vertically to the top of the parent element
element.style.top = 0 + 'px';
break;
case 'bottom':
// anchor veritcally to the bottom of the parent element
element.style.top = (0 - ((elementHeight * scaleFactor) - parentHeight)) + 'px';
break;
default:
// anchor vertically to the center of the parent element
element.style.top = (0 - (((elementHeight * scaleFactor) - parentHeight) / 2 )) + 'px';
}
} else {
element.style.top = 0 + 'px';
}
} else {
// Try again in 30ms if the document didn't load enough to determine its width and height yet
window.setTimeout(updateContain, 30);
}
}
// Run the scale function and bind it to various window-size-changing events
updateContain();
// Add scale function to the library
this.update = updateContain;
}

View file

@ -1 +0,0 @@
function ContainElement(e){function t(){var o=s.parentElement.offsetWidth,p=s.parentElement.offsetHeight;if(o&&p){if(l=o>p/(n*l)*i*l?o/i:p/n,s.style.width=i*l+"px",s.style.height=n*l+"px",i*l>o)switch(e.halign){case"left":s.style.left="0px";break;case"right":s.style.left=0-(i*l-o)+"px";break;default:s.style.left=0-(i*l-o)/2+"px"}else s.style.left="0px";if(n*l>p)switch(e.valign){case"top":s.style.top="0px";break;case"bottom":s.style.top=0-(n*l-p)+"px";break;default:s.style.top=0-(n*l-p)/2+"px"}else s.style.top="0px"}else window.setTimeout(t,30)}var l=1,s=document.getElementById(e.id),i=e.width||s.offsetWidth,n=e.height||s.offsetHeight;"absolute"!=s.style.position&&(s.style.position="absolute"),"hidden"!=s.parentElement.style.overflow&&(s.parentElement.style.overflow="hidden"),"relative"!=s.parentElement.style.position&&"absolute"!=s.parentElement.style.position&&"fixed"!=s.parentElement.style.position&&(s.parentElement.style.position="relative"),t(),this.update=t}

View file

@ -1,12 +0,0 @@
var gulp = require('gulp');
var ugly = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('min', function() {
return gulp.src('contain-element.js')
.pipe(ugly())
.pipe(concat('contain-element.min.js'))
.pipe(gulp.dest('./'));
});
gulp.task('default', ['min']);

View file

@ -3,7 +3,7 @@
<head> <head>
<title>Contain Element - Examples</title> <title>Contain Element - Examples</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src="contain-element.min.js"></script> <script src="https://raw.githubusercontent.com/WilliamsNY/contain-element/master/contain-element.min.js"></script>
<style> <style>
html, html,
body { body {

View file

@ -1,7 +0,0 @@
{
"devDependencies": {
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-uglify": "^1.2.0"
}
}