Skip to content

Instantly share code, notes, and snippets.

@mhulse

mhulse/README.md

Last active December 22, 2015 22:26
Show Gist options
  • Save mhulse/a2be7bd829464056ff59 to your computer and use it in GitHub Desktop.
Save mhulse/a2be7bd829464056ff59 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript solution to rotate html page (<body>...</body>) based on attribute; updates on window resize. Designed for use with digital signage HDTV displays. Currently only tested via Chrome OS X.
Raw
README.md

Kiosk rotate script

Assuming you have styles similar to this:

html {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
body {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

… and HTML like this:

<!doctype html>
<html>
	<head>
		...
	</head>
	<body>
		...
	</body>
</html>

The kiosk-rotate JS looks for a value-less layout attribute on the body tag (e.g., <body layout>…</body>.

The default rotation is 90º.

The default rotation can be overridden if you provide a numeric attribute value:

layout=-90

Enjoy!

Raw
kiosk-rotate.js
/* https://gist.github.com/mhulse/a2be7bd829464056ff59 */
(function(window, document) {
'use-strict';
var $flag;
var timeout = false;
var attr = 'layout';
var rotation = 90;
var methods = {
init: function() {
window.addEventListener('resize', methods.listen);
methods.options();
methods.update();
},
options: function() {
rotation = ($flag.getAttribute(attr) || rotation);
},
listen: function() {
clearTimeout(timeout);
timeout = setTimeout(methods.update, 250);
},
update: function() {
var w = window.innerWidth;
var wh = (w / 2);
var h = window.innerHeight;
var hh = (h / 2);
var origin = ((rotation >= 0) ? wh : hh);
$flag.setAttribute(
'style',
[
'width:' + h + 'px',
'height:' + w + 'px',
'transform:' + 'rotate(' + rotation + 'deg)',
'transform-origin:' + (origin + 'px ' + origin + 'px')
].join(';')
);
}
};
window.addEventListener('DOMContentLoaded', function() {
$flag = document.querySelector('body[' + attr + ']');
$flag && methods.init();
});
})(window, document);
Raw
kiosk-rotate.min.js
/*! https://gist.github.com/mhulse/a2be7bd829464056ff59 */!function(t,e){var n,i=!1,o="layout",r=90,u={init:function(){t.addEventListener("resize",u.listen),u.options(),u.update()},options:function(){r=n.getAttribute(o)||r},listen:function(){clearTimeout(i),i=setTimeout(u.update,250)},update:function(){var e=t.innerWidth,i=e/2,o=t.innerHeight,u=o/2,d=r>=0?i:u;n.setAttribute("style",["width:"+o+"px","height:"+e+"px","transform:rotate("+r+"deg)","transform-origin:"+(d+"px "+d+"px")].join(";"))}};t.addEventListener("DOMContentLoaded",function(){n=e.querySelector("body["+o+"]"),n&&u.init()})}(window,document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment