From 37288bbf111c53d613fc18f79fd6ffc97d42a0e4 Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Tue, 30 Jun 2015 16:10:22 -0400
Subject: [PATCH] Add a working implementation of the library and a README

---
 README.md          | 36 +++++++++++++++++++++
 contain-element.js | 80 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 README.md
 create mode 100644 contain-element.js

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d0bf707
--- /dev/null
+++ b/README.md
@@ -0,0 +1,36 @@
+# Contain Element
+
+A JavaScript plugin to contain an element within its parent 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
+
+## Usage
+
+```
+window.onload = function() {
+    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: middle)
+        halign: 'left' // (optional) horizontal alignment: left|right (unset: middle)
+    });
+};
+```
+
+## Credits
+
+Written by [Williams New York](http://williamsnewyork.com)
+
+### Authors
+
+* Kevin MacMartin
+
+## LICENSE
+
+Licensed under the [MIT license](http://opensource.org/licenses/MIT).
+
diff --git a/contain-element.js b/contain-element.js
new file mode 100644
index 0000000..3f6d66a
--- /dev/null
+++ b/contain-element.js
@@ -0,0 +1,80 @@
+function containElement(options) {
+	var scaleFactor = 1;
+	var element = document.getElementById(options.id);
+	var elementWidth = options.width ? options.width : element.offsetWidth;
+	var elementHeight = options.height ? 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 scaleElement() {
+		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 middle 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 middle 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(scaleElement, 30);
+		}
+	}
+
+	// Run the scale function and bind it to various window-size-changing events
+	scaleElement();
+	window.onload = function(event) { scaleElement(); };
+	window.onresize = function(event) { scaleElement(); };
+	screen.addEventListener('orientationchange', function() { scaleElement(); });
+}
+