Files
ionic-framework/js/utils/viewport.js
2014-12-03 01:04:40 -06:00

139 lines
3.4 KiB
JavaScript

var viewportTag;
var viewportProperties = {};
ionic.viewport = {
orientation: function() {
// 0 = Portrait
// 90 = Landscape
// not using window.orientation because each device has a different implementation
return (window.innerWidth > window.innerHeight ? 90 : 0);
}
};
function viewportLoadTag() {
var x;
for (x = 0; x < document.head.children.length; x++) {
if (document.head.children[x].name == 'viewport') {
viewportTag = document.head.children[x];
break;
}
}
if (viewportTag) {
var props = viewportTag.content.toLowerCase().replace(/\s+/g, '').split(',');
var keyValue;
for (x = 0; x < props.length; x++) {
if (props[x]) {
keyValue = props[x].split('=');
viewportProperties[ keyValue[0] ] = (keyValue.length > 1 ? keyValue[1] : '_');
}
}
viewportUpdate();
}
}
function viewportUpdate() {
// unit tests in viewport.unit.js
var initWidth = viewportProperties.width;
var initHeight = viewportProperties.height;
var p = ionic.Platform;
var version = p.version();
var DEVICE_WIDTH = 'device-width';
var DEVICE_HEIGHT = 'device-height';
var orientation = ionic.viewport.orientation();
// Most times we're removing the height and adding the width
// So this is the default to start with, then modify per platform/version/oreintation
delete viewportProperties.height;
viewportProperties.width = DEVICE_WIDTH;
if (p.isIPad()) {
// iPad
if (version > 7) {
// iPad >= 7.1
// https://issues.apache.org/jira/browse/CB-4323
delete viewportProperties.width;
} else {
// iPad <= 7.0
if (p.isWebView()) {
// iPad <= 7.0 WebView
if (orientation == 90) {
// iPad <= 7.0 WebView Landscape
viewportProperties.height = '0';
} else if (version == 7) {
// iPad <= 7.0 WebView Portait
viewportProperties.height = DEVICE_HEIGHT;
}
} else {
// iPad <= 6.1 Browser
if (version < 7) {
viewportProperties.height = '0';
}
}
}
} else if (p.isIOS()) {
// iPhone
if (p.isWebView()) {
// iPhone WebView
if (version > 7) {
// iPhone >= 7.1 WebView
delete viewportProperties.width;
} else if (version < 7) {
// iPhone <= 6.1 WebView
// if height was set it needs to get removed with this hack for <= 6.1
if (initHeight) viewportProperties.height = '0';
} else if (version == 7) {
//iPhone == 7.0 WebView
viewportProperties.height = DEVICE_HEIGHT;
}
} else {
// iPhone Browser
if (version < 7) {
// iPhone <= 6.1 Browser
// if height was set it needs to get removed with this hack for <= 6.1
if (initHeight) viewportProperties.height = '0';
}
}
}
// only update the viewport tag if there was a change
if (initWidth !== viewportProperties.width || initHeight !== viewportProperties.height) {
viewportTagUpdate();
}
}
function viewportTagUpdate() {
var key, props = [];
for (key in viewportProperties) {
if (viewportProperties[key]) {
props.push(key + (viewportProperties[key] == '_' ? '' : '=' + viewportProperties[key]));
}
}
viewportTag.content = props.join(', ');
}
ionic.Platform.ready(function() {
viewportLoadTag();
window.addEventListener("orientationchange", function() {
setTimeout(viewportUpdate, 1000);
}, false);
});