rails-iframe-resizer 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 56c7db13cd4aa2a909fb1518cbe9bd5fe737a06d
+  data.tar.gz: e0a26711c2eedae3287c0d2aea8463d9c1540494
+SHA512:
+  metadata.gz: 6289344e72115d546da411897f28bc3c2815b9fe600fb8b540da2fc4ef4ea73f994eb2a017963532ab736e29c573e0327806682381cae4464873a4911734806d
+  data.tar.gz: e4685b0a74377409f40f876832932276789f1b5808d2d4026bf2fe97595a9c9c5d16b8ffb91596eccd04a3cf2bfa86fa5b34f76b1d80e4a97671e26df34056d2

data/Gemfile

@@ -0,0 +1,3 @@
+source 'http://rubygems.org'
+
+gemspec

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2011 Chris Mytton
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,16 @@
+# Iframe Resizer for Rails
+
+Rails wrapping for https://github.com/davidjbradshaw/iframe-resizer
+
+## Usage
+
+Inside application.js, add:
+
+```js
+// for host
+//= require iframeResizer.min
+// for iframe client
+//= require iframeResizer.contentWindow.min
+```
+
+Remove js min file source map comment, it is hard to embed into rails.

data/app/assets/javascripts/iframeResizer.contentWindow.js

@@ -0,0 +1,578 @@
+/*
+ * File: iframeSizer.contentWindow.js
+ * Desc: Include this file in any page being loaded into an iframe
+ *       to force the iframe to resize to the content size.
+ * Requires: iframeResizer.js on host page.
+ * Author: David J. Bradshaw - dave@bradshaw.net
+ * Contributor: Jure Mav - jure.mav@gmail.com
+ */
+
+;(function() {
+	'use strict';
+
+	var
+		autoResize            = true,
+		base                  = 10,
+		bodyBackground        = '',
+		bodyMargin            = 0,
+		bodyMarginStr         = '',
+		bodyPadding           = '',
+		calculateWidth        = false,
+		doubleEventList       = {'resize':1,'click':1},
+		eventCancelTimer      = 128,
+		height                = 1,
+		firstRun              = true,
+		heightCalcModeDefault = 'offset',
+		heightCalcMode        = heightCalcModeDefault,
+		initLock              = true,
+		initMsg               = '',
+		interval              = 32,
+		logging               = false,
+		msgID                 = '[iFrameSizer]',  //Must match host page msg ID
+		msgIdLen              = msgID.length,
+		myID                  = '',
+		publicMethods         = false,
+		resetRequiredMethods  = {max:1,scroll:1,bodyScroll:1,documentElementScroll:1},
+		targetOriginDefault   = '*',
+		target                = window.parent,
+		tolerance             = 0,
+		triggerLocked         = false,
+		triggerLockedTimer    = null,
+		width                 = 1;
+
+
+	function addEventListener(el,evt,func){
+		if ('addEventListener' in window){
+			el.addEventListener(evt,func, false);
+		} else if ('attachEvent' in window){ //IE
+			el.attachEvent('on'+evt,func);
+		}
+	}
+
+	function formatLogMsg(msg){
+		return msgID + '[' + myID + ']' + ' ' + msg;
+	}
+
+	function log(msg){
+		if (logging && ('object' === typeof window.console)){
+			console.log(formatLogMsg(msg));
+		}
+	}
+
+	function warn(msg){
+		if ('object' === typeof window.console){
+			console.warn(formatLogMsg(msg));
+		}
+	}
+
+
+	function init(){
+		log('Initialising iFrame');
+		readData();
+		setMargin();
+		setBodyStyle('background',bodyBackground);
+		setBodyStyle('padding',bodyPadding);
+		injectClearFixIntoBodyElement();
+		checkHeightMode();
+		stopInfiniteResizingOfIFrame();
+		setupPublicMethods();
+		startEventListeners();
+		sendSize('init','Init message from host page');
+	}
+
+	function readData(){
+
+		var data = initMsg.substr(msgIdLen).split(':');
+
+		function strBool(str){
+			return 'true' === str ? true : false;
+		}
+
+		myID             = data[0];
+		bodyMargin       = (undefined !== data[1]) ? Number(data[1])   : bodyMargin; //For V1 compatibility
+		calculateWidth   = (undefined !== data[2]) ? strBool(data[2])  : calculateWidth;
+		logging          = (undefined !== data[3]) ? strBool(data[3])  : logging;
+		interval         = (undefined !== data[4]) ? Number(data[4])   : interval;
+		publicMethods    = (undefined !== data[5]) ? strBool(data[5])  : publicMethods;
+		autoResize       = (undefined !== data[6]) ? strBool(data[6])  : autoResize;
+		bodyMarginStr    = data[7];
+		heightCalcMode   = (undefined !== data[8]) ? data[8]           : heightCalcMode;
+		bodyBackground   = data[9];
+		bodyPadding      = data[10];
+		tolerance        = (undefined !== data[11]) ? Number(data[11]) : tolerance;
+	}
+
+	function chkCSS(attr,value){
+		if (-1 !== value.indexOf('-')){
+			warn('Negative CSS value ignored for '+attr);
+			value='';
+		}
+		return value;
+	}
+
+	function setBodyStyle(attr,value){
+		if ((undefined !== value) && ('' !== value) && ('null' !== value)){
+			document.body.style[attr] = value;
+			log('Body '+attr+' set to "'+value+'"');
+		}
+	}
+
+	function setMargin(){
+		//If called via V1 script, convert bodyMargin from int to str 
+		if (undefined === bodyMarginStr){
+			bodyMarginStr = bodyMargin+'px';
+		}
+		chkCSS('margin',bodyMarginStr);
+		setBodyStyle('margin',bodyMarginStr);
+	}
+
+	function stopInfiniteResizingOfIFrame(){
+		document.documentElement.style.height = '';
+		document.body.style.height = '';
+		log('HTML & body height set to "auto"');
+	}
+
+	function initWindowResizeListener(){
+		addEventListener(window,'resize', function(){
+			sendSize('resize','Window resized');
+		});
+	}
+
+	function initWindowClickListener(){
+		addEventListener(window,'click', function(){
+			sendSize('click','Window clicked');
+		});
+	}
+
+	function checkHeightMode(){
+		if (heightCalcModeDefault !== heightCalcMode){
+			if (!(heightCalcMode in getHeight)){
+				warn(heightCalcMode + ' is not a valid option for heightCalculationMethod.');
+				heightCalcMode='bodyScroll';
+			}
+			log('Height calculation method set to "'+heightCalcMode+'"');
+		}
+	}
+
+	function startEventListeners(){
+		if ( true === autoResize ) {
+			initWindowResizeListener();
+			initWindowClickListener();
+			setupMutationObserver();
+		}
+		else {
+			log('Auto Resize disabled');
+		}
+	}
+
+	function injectClearFixIntoBodyElement(){
+		var clearFix = document.createElement('div');
+		clearFix.style.clear = 'both';
+		clearFix.style.display = 'block'; //Guard against this having been globally redefined in CSS.
+		document.body.appendChild(clearFix);
+	}
+
+	function setupPublicMethods(){
+		if (publicMethods) {
+			log('Enable public methods');
+
+			window.parentIFrame = {
+				close: function closeF(){
+					sendSize('close','parentIFrame.close()', 0, 0);
+				},
+				getId: function getIdF(){
+					return myID;
+				},
+				reset: function resetF(){
+					resetIFrame('parentIFrame.size');
+				},
+				scrollTo: function scrollToF(x,y){
+					sendMsg(y,x,'scrollTo'); // X&Y reversed at sendMsg uses hieght/width
+				},
+				scrollToOffset: function scrollToF(x,y){
+					sendMsg(y,x,'scrollToOffset'); // X&Y reversed at sendMsg uses hieght/width
+				},
+				sendMessage: function sendMessageF(msg,targetOrigin){
+					sendMsg(0,0,'message',JSON.stringify(msg),targetOrigin);
+				},
+				setHeightCalculationMethod: function setHeightCalculationMethodF(heightCalculationMethod){
+					heightCalcMode = heightCalculationMethod;
+					checkHeightMode();
+				},
+				setTargetOrigin: function setTargetOriginF(targetOrigin){
+					log('Set targetOrigin: '+targetOrigin);
+					targetOriginDefault = targetOrigin;
+				},
+				size: function sizeF(customHeight, customWidth){
+					var valString = ''+(customHeight?customHeight:'')+(customWidth?','+customWidth:'');
+					lockTrigger();
+					sendSize('size','parentIFrame.size('+valString+')', customHeight, customWidth);
+				}
+			};
+		}
+	}
+
+	function initInterval(){
+		if ( 0 !== interval ){
+			log('setInterval: '+interval+'ms');
+			setInterval(function(){
+				sendSize('interval','setInterval: '+interval);
+			},Math.abs(interval));
+		}
+	}
+
+	function setupInjectElementLoadListners(mutations){
+		function addLoadListener(element){
+			if (element.height === undefined || element.width === undefined || 0 === element.height || 0 === element.width){
+				log('Attach listerner to '+element.src);
+				addEventListener(element,'load', function imageLoaded(){
+					sendSize('imageLoad','Image loaded');
+				});
+			}
+		}
+
+		mutations.forEach(function (mutation) {
+			if (mutation.type === 'attributes' && mutation.attributeName === 'src'){
+				addLoadListener(mutation.target);
+			} else if (mutation.type === 'childList'){
+				var images = mutation.target.querySelectorAll('img');
+				Array.prototype.forEach.call(images,function (image) {
+					addLoadListener(image);
+				});
+			}
+		});
+	}
+
+	function setupMutationObserver(){
+
+		var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+
+		function createMutationObserver(){
+			var
+				target = document.querySelector('body'),
+
+				config = {
+					attributes            : true,
+					attributeOldValue     : false,
+					characterData         : true,
+					characterDataOldValue : false,
+					childList             : true,
+					subtree               : true
+				},
+
+				observer = new MutationObserver(function(mutations) {
+					sendSize('mutationObserver','mutationObserver: ' + mutations[0].target + ' ' + mutations[0].type);
+					setupInjectElementLoadListners(mutations); //Deal with WebKit asyncing image loading when tags are injected into the page
+				});
+
+			log('Enable MutationObserver');
+			observer.observe(target, config);
+		}
+
+		if (MutationObserver){
+			if (0 > interval) {
+				initInterval();
+			} else {
+				createMutationObserver();
+			}
+		}
+		else {
+			warn('MutationObserver not supported in this browser!');
+			initInterval();
+		}
+	}
+
+
+	// document.documentElement.offsetHeight is not reliable, so
+	// we have to jump through hoops to get a better value.
+	function getBodyOffsetHeight(){
+		function getComputedBodyStyle(prop) {
+			function convertUnitsToPxForIE8(value) {
+				var PIXEL = /^\d+(px)?$/i;
+
+				if (PIXEL.test(value)) {
+					return parseInt(value,base);
+				}
+
+				var
+					style = el.style.left,
+					runtimeStyle = el.runtimeStyle.left;
+
+				el.runtimeStyle.left = el.currentStyle.left;
+				el.style.left = value || 0;
+				value = el.style.pixelLeft;
+				el.style.left = style;
+				el.runtimeStyle.left = runtimeStyle;
+
+				return value;
+			}
+
+			var
+				el = document.body,
+				retVal = 0;
+
+			if (('defaultView' in document) && ('getComputedStyle' in document.defaultView)) {
+				retVal = document.defaultView.getComputedStyle(el, null);
+				retVal = (null !== retVal) ? retVal[prop] : 0;
+			} else {//IE8
+				retVal =  convertUnitsToPxForIE8(el.currentStyle[prop]);
+			}
+
+			return parseInt(retVal,base);
+		}
+
+		return  document.body.offsetHeight +
+				getComputedBodyStyle('marginTop') +
+				getComputedBodyStyle('marginBottom');
+	}
+
+	function getBodyScrollHeight(){
+		return document.body.scrollHeight;
+	}
+
+	function getDEOffsetHeight(){
+		return document.documentElement.offsetHeight;
+	}
+
+	function getDEScrollHeight(){
+		return document.documentElement.scrollHeight;
+	}
+
+	//From https://github.com/guardian/iframe-messenger
+	function getLowestElementHeight() {
+		var
+			allElements       = document.querySelectorAll('body *'),
+			allElementsLength = allElements.length,
+			maxBottomVal      = 0,
+			timer             = new Date().getTime();
+
+		for (var i = 0; i < allElementsLength; i++) {
+			if (allElements[i].getBoundingClientRect().bottom > maxBottomVal) {
+				maxBottomVal = allElements[i].getBoundingClientRect().bottom;
+			}
+		}
+
+		timer = new Date().getTime() - timer;
+
+		log('Parsed '+allElementsLength+' HTML elements');
+		log('LowestElement bottom position calculated in ' + timer + 'ms');
+
+		return maxBottomVal;
+	}
+
+	function getAllHeights(){
+		return [
+			getBodyOffsetHeight(),
+			getBodyScrollHeight(),
+			getDEOffsetHeight(),
+			getDEScrollHeight()
+		];
+	}
+
+	function getMaxHeight(){
+		return Math.max.apply(null,getAllHeights());
+	}
+
+	function getMinHeight(){
+		return Math.min.apply(null,getAllHeights());
+	}
+
+	function getBestHeight(){
+		return Math.max(getBodyOffsetHeight(),getLowestElementHeight());
+	}
+
+	var getHeight = {
+		offset                : getBodyOffsetHeight, //Backward compatability
+		bodyOffset            : getBodyOffsetHeight,
+		bodyScroll            : getBodyScrollHeight,
+		documentElementOffset : getDEOffsetHeight,
+		scroll                : getDEScrollHeight, //Backward compatability
+		documentElementScroll : getDEScrollHeight,
+		max                   : getMaxHeight,
+		min                   : getMinHeight,
+		grow                  : getMaxHeight,
+		lowestElement         : getBestHeight
+	};
+
+	function getWidth(){
+		return Math.max(
+			document.documentElement.scrollWidth,
+			document.body.scrollWidth
+		);
+	}
+
+	function sendSize(triggerEvent, triggerEventDesc, customHeight, customWidth){
+
+		var	currentHeight,currentWidth;
+
+		function recordTrigger(){
+			if (!(triggerEvent in {'reset':1,'resetPage':1,'init':1})){
+				log( 'Trigger event: ' + triggerEventDesc );
+			}
+		}
+
+		function resizeIFrame(){
+			height = currentHeight;
+			width  = currentWidth;
+
+			sendMsg(height,width,triggerEvent);
+		}
+
+		function isDoubleFiredEvent(){
+			return  triggerLocked && (triggerEvent in doubleEventList);
+		}
+
+		function isSizeChangeDetected(){
+			function checkTolarance(a,b){
+				var retVal = Math.abs(a-b) <= tolerance;
+				return !retVal;
+			}
+
+			currentHeight = (undefined !== customHeight)  ? customHeight : getHeight[heightCalcMode]();
+			currentWidth  = (undefined !== customWidth )  ? customWidth  : getWidth();
+
+			return	checkTolarance(height,currentHeight) ||
+					(calculateWidth && checkTolarance(width,currentWidth));
+
+			//return	(height !== currentHeight) ||
+			//		(calculateWidth && width !== currentWidth);
+		}
+
+		function isForceResizableEvent(){
+			return !(triggerEvent in {'init':1,'interval':1,'size':1});
+		}
+
+		function isForceResizableHeightCalcMode(){
+			return (heightCalcMode in resetRequiredMethods);
+		}
+
+		function logIgnored(){
+			log('No change in size detected');
+		}
+
+		function checkDownSizing(){
+			if (isForceResizableEvent() && isForceResizableHeightCalcMode()){
+				resetIFrame(triggerEventDesc);
+			} else if (!(triggerEvent in {'interval':1})){
+				recordTrigger();
+				logIgnored();
+			}
+		}
+
+		if (!isDoubleFiredEvent()){
+			if (isSizeChangeDetected()){
+				recordTrigger();
+				lockTrigger();
+				resizeIFrame();
+			} else {
+				checkDownSizing();
+			}
+		} else {
+			log('Trigger event cancelled: '+triggerEvent);
+		}
+	}
+
+	function lockTrigger(){
+		if (!triggerLocked){
+			triggerLocked = true;
+			log('Trigger event lock on');
+		}
+		clearTimeout(triggerLockedTimer);
+		triggerLockedTimer = setTimeout(function(){
+			triggerLocked = false;
+			log('Trigger event lock off');
+			log('--');
+		},eventCancelTimer);
+	}
+
+	function triggerReset(triggerEvent){
+		height = getHeight[heightCalcMode]();
+		width  = getWidth();
+
+		sendMsg(height,width,triggerEvent);
+	}
+
+	function resetIFrame(triggerEventDesc){
+		var hcm = heightCalcMode;
+		heightCalcMode = heightCalcModeDefault;
+
+		log('Reset trigger event: ' + triggerEventDesc);
+		lockTrigger();
+		triggerReset('reset');
+
+		heightCalcMode = hcm;
+	}
+
+	function sendMsg(height,width,triggerEvent,msg,targetOrigin){
+		function setTargetOrigin(){
+			if (undefined === targetOrigin){
+				targetOrigin = targetOriginDefault;
+			} else {
+				log('Message targetOrigin: '+targetOrigin);
+			}
+		}
+
+		function sendToParent(){
+			var
+				size  = height + ':' + width,
+				message = myID + ':' +  size + ':' + triggerEvent + (undefined !== msg ? ':' + msg : '');
+
+			log('Sending message to host page (' + message + ')');
+			target.postMessage( msgID + message, targetOrigin);
+		}
+
+		setTargetOrigin();
+		sendToParent();
+	}
+
+	function receiver(event) {
+		function isMessageForUs(){
+			return msgID === (''+event.data).substr(0,msgIdLen); //''+ Protects against non-string messages
+		}
+
+		function initFromParent(){
+			initMsg = event.data;
+			target  = event.source;
+
+			init();
+			firstRun = false;
+			setTimeout(function(){ initLock = false;},eventCancelTimer);
+		}
+
+		function resetFromParent(){
+			if (!initLock){
+				log('Page size reset by host page');
+				triggerReset('resetPage');
+			} else {
+				log('Page reset ignored by init');
+			}
+		}
+
+		function getMessageType(){
+			return event.data.split(']')[1];
+		}
+
+		function isMiddleTier(){
+			return ('iFrameResize' in window);
+		}
+
+		function isInitMsg(){
+			//test if this message is from a child below us. This is an ugly test, however, updating
+			//the message format would break backwards compatibity.
+			return event.data.split(':')[2] in {'true':1,'false':1};
+		}
+
+		if (isMessageForUs()){
+			if (firstRun && isInitMsg()){ //Check msg ID
+				initFromParent();
+			} else if ('reset' === getMessageType()){
+				resetFromParent();
+			} else if (event.data !== initMsg && !isMiddleTier()){
+				warn('Unexpected message ('+event.data+')');
+			}
+		}
+	}
+
+	addEventListener(window, 'message', receiver);
+
+})();