JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires

JavaScript APIs -
The Web is the
Platform

<button id="view-fullscreen">Fullscreen</button>

<script type="text/javascript">
(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();
</script>

html:-moz-full-screen {
background: red;
}

html:-webkit-full-screen {
background: red;
}

takePicture.onchange = function (event) {
// Get a reference to the taken picture or chosen file
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
// Get window.URL object
var URL = window.URL || window.webkitURL;

// Create ObjectURL
var imgURL = URL.createObjectURL(file);

// Set img src to ObjectURL
showPicture.src = imgURL;

// Revoke ObjectURL
URL.revokeObjectURL(imgURL);
}
};

var docElm = document.documentElement;

// Requesting Pointer Lock
docElm.requestPointerLock = elem.requestPointerLock ||
elem.mozRequestPointerLock ||
elem.webkitRequestPointerLock;
docElm.requestPointerLock();

document.addEventListener("mousemove", function(e) {
var movementX = e.movementX ||
e.mozMovementX ||
e.webkitMovementX ||
0,
movementY = e.movementY ||
e.mozMovementY ||
e.webkitMovementY ||
0;

// Print the mouse movement delta values
console.log("movementX=" + movementX, "movementY="
+ movementY);
}, false);

// IndexedDB
var indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.OIDBTransaction ||
window.msIDBTransaction,
dbVersion = 1;

// Create/open database
var request = indexedDB.open("elephantFiles", dbVersion);

createObjectStore = function (dataBase) {
// Create an objectStore
dataBase.createObjectStore("elephants");
}

// Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
createObjectStore(event.target.result);
};

request.onsuccess = function (event) {
// Create XHR
var xhr = new XMLHttpRequest(),
blob;

xhr.open("GET", "elephant.png", true);

// Set the responseType to blob
xhr.responseType = "blob";

xhr.addEventListener("load", function () {
if (xhr.status === 200) {
// Blob as response
blob = xhr.response;

// Put the received blob into IndexedDB
putElephantInDb(blob);
}
}, false);
// Send XHR
xhr.send();
}

putElephantInDb = function (blob) {
// Open a transaction to the database
var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);

// Put the blob into the dabase
var put = transaction.objectStore("elephants").put(blob, "image");

// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
var imgFile = event.target.result;

// Get window.URL object
var URL = window.URL || window.webkitURL;

// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(imgFile);

// Set img src to ObjectURL
var imgElephant = document.getElementById("elephant");
imgElephant.setAttribute("src", imgURL);

// Revoking ObjectURL
URL.revokeObjectURL(imgURL);
};
};

// Get battery level in percentage
var batteryLevel = battery.level * 100 + "%";

// Get whether device is charging or not
var chargingStatus = battery.charging;

// Time until the device is fully charged
var batteryCharged = battery.chargingTime;

// Time until the device is discharged
var batteryDischarged = battery.dischargingTime;

battery.addEventLister("levelchange", function () {
// Device's battery level changed
}, false);

battery.addEventListener("chargingchange", function () {
// Device got plugged in to power, or unplugged
}, false);

battery.addEventListener("chargingtimechange", function () {
// Device's charging time changed
}, false);

battery.addEventListener("dischargingtimechange", function () {
// Device's discharging time changed
}, false);

https://github.com/andreasgal/B2G

https://github.com/andreasgal/gaia

// Telephony object
var tel = navigator.mozTelephony;

// Check if the phone is muted (read/write property)
console.log(tel.muted);

// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);

// Place a call
var call = tel.dial("123456789");

// Receiving a call
tel.onincoming = function (event) {
var incomingCall = event.call;

// Get the number of the incoming call
console.log(incomingCall.number);

// Answer the call
incomingCall.answer();
};

// Disconnect a call
call.hangUp();

// SMS object
var sms = navigator.mozSMS;

// Send a message
sms.send("123456789", "Hello world!");

// Recieve a message
sms.onrecieved = function (event) {
// Read message
console.log(event.message);
};

"So we saved the world
together for a while,
and that was lovely."
-Lost

Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/

JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires

More Related Content

What's hot (20)

Similar to JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires (20)

More from Robert Nyman (20)

Recently uploaded (20)

JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires