mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-11-23 06:14:09 -05:00
this branch should be dependant of master
This commit is contained in:
parent
61fc7a8e38
commit
5569077384
7 changed files with 3 additions and 167 deletions
51
README.md
51
README.md
|
@ -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!
|
||||||
|
|
17
bower.json
17
bower.json
|
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
1
contain-element.min.js
vendored
1
contain-element.min.js
vendored
|
@ -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}
|
|
12
gulpfile.js
12
gulpfile.js
|
@ -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']);
|
|
|
@ -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 {
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
{
|
|
||||||
"devDependencies": {
|
|
||||||
"gulp": "^3.9.0",
|
|
||||||
"gulp-concat": "^2.6.0",
|
|
||||||
"gulp-uglify": "^1.2.0"
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in a new issue