Skip to content

Commit

Permalink
Format HTML, CSS and JS files and generally clean up code
Browse files Browse the repository at this point in the history
  • Loading branch information
@richtr
richtr committed Jul 8, 2015
1 parent a5ccd03 commit 885db82
Show file tree
Hide file tree
Showing 10 changed files with 465 additions and 476 deletions.
141 changes: 72 additions & 69 deletions DeviceOrientationEmulator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,95 +12,98 @@
*
*/

(function() {
( function() {

var rootUrl = 'https://richtr.github.io/deviceorientationemulator';
var emulatorUrl = new URL('https://richtr.github.io/deviceorientationemulator/emulator');

function runDetection() {
function runDetection() {

var checkTimeout = 1000;
var checkTimeout = 1000;

var deviceOrientationCheck = window.setTimeout(function() {
var deviceOrientationCheck = window.setTimeout( function() {

var swalCSSEl = document.createElement('link');
swalCSSEl.href = 'https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.0.1/sweetalert.min.css';
swalCSSEl.type = 'text/css';
swalCSSEl.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(swalCSSEl);
var swalCSSEl = document.createElement( 'link' );
swalCSSEl.href = 'https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.0.1/sweetalert.min.css';
swalCSSEl.type = 'text/css';
swalCSSEl.rel = 'stylesheet';
document.getElementsByTagName( 'head' )[ 0 ].appendChild( swalCSSEl );

var swalJSEl = document.createElement('script');
swalJSEl.src = 'https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.0.1/sweetalert.min.js';
swalJSEl.type = 'text/javascript';
var swalJSEl = document.createElement( 'script' );
swalJSEl.src = 'https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.0.1/sweetalert.min.js';
swalJSEl.type = 'text/javascript';

swalJSEl.onload = function() {
swal({
title: "No compass detected.",
text: "This page is built for devices that emit device orientation events. If you would still like to try this page you can use an emulator.",
type: "error",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Open in the emulator",
cancelButtonText: "Cancel",
closeOnConfirm: true
},
function(){
// Open the mobile emulator with the current URL
var selfUrl = encodeURIComponent(window.location);
window.location = rootUrl + '/emulator/?url=' + selfUrl;
});
};
swalJSEl.onload = function() {
swal( {
title: "No compass detected.",
text: "This page is built for devices that emit device orientation events. If you would still like to try this page you can use an emulator.",
type: "error",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Open in the emulator",
cancelButtonText: "Cancel",
closeOnConfirm: true
},
function() {
// Open the mobile emulator with the current URL
var pageUrl = encodeURIComponent( window.location );
window.location = emulatorUrl.toString() + '/?url=' + pageUrl;
} );
};

document.getElementsByTagName('head')[0].appendChild(swalJSEl);
document.getElementsByTagName( 'head' )[ 0 ].appendChild( swalJSEl );

}, checkTimeout);
}, checkTimeout );

var isFirstEvent = true;
var isFirstEvent = true;

window.addEventListener('deviceorientation', function check() {
// Discard first event (false positive on Chromium Desktop browsers)
if (isFirstEvent) {
isFirstEvent = false;
return;
}
window.addEventListener( 'deviceorientation', function check() {
// Discard first event (false positive on Chromium Desktop browsers)
if ( isFirstEvent ) {
isFirstEvent = false;
return;
}

// Prevent emulator from kicking in
window.clearTimeout(deviceOrientationCheck);
// Remove self
window.removeEventListener('deviceorientation', check, false);
}, false);
// Prevent emulator alert from kicking in
window.clearTimeout( deviceOrientationCheck );
// Remove this device orientation check
window.removeEventListener( 'deviceorientation', check, false );
}, false );

}
}

function runEmulation() {
var url = new URL(rootUrl);
function runEmulation() {

var listener = function(event) {
if (event.origin !== url.origin) return;
var listener = function( event ) {
if ( event.origin !== emulatorUrl.origin ) return;

try {
var json = JSON.parse(event.data);
try {
var json = JSON.parse( event.data );

var event = document.createEvent('Event');
event.initEvent('deviceorientation', true, true);
var event = document.createEvent( 'Event' );
event.initEvent( 'deviceorientation', true, true );

for(var key in json) event[key] = json[key];
event['simulation'] = true; // add 'simulated event' flag
for ( var key in json ) event[ key ] = json[ key ];
event[ 'simulation' ] = true; // add 'simulated event' flag

window.dispatchEvent(event);
} catch(e) {
console[console.error ? 'error' : 'log'](e);
}
};
window.dispatchEvent( event );
} catch ( e ) {
console[ console.error ? 'error' : 'log' ]( e );
}
};

window.addEventListener('message', listener, false);
}
window.addEventListener( 'message', listener, false );

runEmulation();
}

if (document.readyState === 'complete') {
runDetection();
} else {
window.addEventListener('load', runDetection, false);
}
// Listen for proxied device orientation events
runEmulation();

})();
// Check if device orientation events are supported.
// If not, show the emulator alert message.
if ( document.readyState === 'complete' ) {
runDetection();
} else {
window.addEventListener( 'load', runDetection, false );
}

} )();
157 changes: 73 additions & 84 deletions emulator/css/resizer.css
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,101 @@
html, body {
width: 100%;
height: 100%;
text-align: center;
background: #333 url('../images/black_linen_v2.png') center repeat;
overflow: hidden;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
text-align: center;
background: #333 url('../images/black_linen_v2.png') center repeat;
overflow: hidden;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
}
.resizer-page {
display: block;
height: 100%;
}

.resizer-page { display: block; height: 100%; }

a, a:visited {
color: inherit;
color: inherit;
}

#resizerFrame {
width: 100%;
max-width: 320px;
height: 100%;
max-height: 640px;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 50px #000;
border-top: 20px solid #008000;
border-bottom: 20px solid #CC0000;
width: 100%;
max-width: 320px;
height: 100%;
max-height: 640px;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 50px #000;
border-top: 20px solid #008000;
border-bottom: 20px solid #CC0000;
}

#resizerFrame::before {
content: "TOP";
margin-top: -1em;
content: "TOP";
margin-top: -1em;
}

#resizerFrameWrapper {
position: relative;
height: 100%;
position: relative;
height: 100%;
}

#resizer {
text-align: center;
line-height: 1;
position: fixed;
top: 0;
right: 0;
text-align: center;
line-height: 1;
position: fixed;
top: 0;
right: 0;
}

#controller {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 300px;
text-align: center;
background: #383636;
z-index:3;
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 300px;
text-align: center;
background: #383636;
z-index: 3;
}

#resizer ul {
font-size: 13px;
display: inline-block;
margin: -0.2em auto 0.2em;
-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.25));
-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.25));
-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.25));
-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.25));
filter: drop-shadow(0 1px 5px rgba(0,0,0,.25));
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
font-size: 13px;
display: inline-block;
margin: -0.2em auto 0.2em;
-webkit-filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .25));
-moz-filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .25));
-ms-filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .25));
-o-filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .25));
filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .25));
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

button.rotate i:before, button[data-rotate] i:before {
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}

.landscape i:before {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}

[data-max="150"] {
font-size: 150px;
font-size: 150px;
}

[data-max="95"] {
font-size: 95px;
font-size: 95px;
}

[data-max="30"] {
font-size: 30px;
font-size: 30px;
}

@media (max-width: 480px) {
[data-min="60"] {
font-size: 60px;
}
[data-min="52"] {
font-size: 52px;
}
[data-min="20"] {
font-size: 20px;
}
[data-min="60"] {
font-size: 60px;
}
[data-min="52"] {
font-size: 52px;
}
[data-min="20"] {
font-size: 20px;
}
}
Loading

0 comments on commit 885db82

Please sign in to comment.