0
0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-12-23 05:33:49 +01:00
doodle3d-client/js/init_layout.js

198 lines
7.5 KiB
JavaScript

var imgDims = [320, 320]; // width and height of image
function doClientAndOrientationStuff() {
console.log("doClientAndOrientationStuff");
$(".agentInfo").text("");
/*
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
if (window.orientation == -90 || window.orientation == 90) {
// landscape
// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
} else {
// portrait
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
}
}
return;
//*/
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
if (window.orientation == -90 || window.orientation == 90) {
// landscape
// var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
var ww = 0; //get proper width
if (window.screen.availWidth) {
ww = window.screen.availWidth;
// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
// ww = window.innerWidth;
// }
} else if($(window).width()) {
ww = $(window).width();
} else {
}
// ww = 480;
var mw = imgDims[0]; // min width of site
//*
if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
var mw = imgDims[1]; // in landscape: min-width is image width
}
//*/
var ratio = ww / mw; //calculate ratio
$('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=no,width='+mw);
if( ww < mw){ //smaller than minimum size
// $(".colmask").css("background-color", "#ff0");
// $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
}else{ //regular size
// $(".colmask").css("background-color", "#0ff");
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
}
$(".agentInfo").append("ww: " + ww + ", mw: " + mw + "<br/>");
$(".agentInfo").append("ratio: " + ratio + "<br/>");
$(".agentInfo").append("<br/>");
} else {
// portrait
// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no');
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no');
}
} else {
// console.log("else");
$(".colmask").css("background-color", "#f80");
}
$(".agentInfo").append("$(window).width(): " + $(window).width() + "<br/>");
$(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
$(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("window.innerWidth: " + window.innerWidth + "<br/>");
$(".agentInfo").append("window.innerHeight: " + window.innerHeight + "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("$(window).height(): " + $(window).height() + "<br/>");
$(".agentInfo").append("window.screen.height: " + window.screen.height+ "<br/>");
$(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "<br/>");
$(".agentInfo").append("<br/>");
$(".agentInfo").append("user agent: " + navigator.userAgent + "<br/>");
};
function doOnOrientationChange() {
console.log("doOnOrientationChange");
doClientAndOrientationStuff();
// switch(window.orientation) {
// case -90:
// case 90:
// alert('landscape');
// break;
// default:
// alert('portrait');
// break;
// }
}
var drawAreaContainerMinHeight = 300;
var drawAreaContainerMaxHeight = 450;
function doOnResize() {
// console.log("doOnResize() >> " + new Date().getTime());
// $(".container").css("height", window.innerHeight);
doClientAndOrientationStuff() // <-- is this necessary in this method?
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
if (window.innerHeight < 768) {
// $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
var newVal = window.innerHeight - $("#drawAreaContainer").offset().top - 100; // what's the 70 ??
newVal = Math.max(newVal, drawAreaContainerMinHeight);
newVal = Math.min(newVal, drawAreaContainerMaxHeight);
$('#drawAreaContainer').innerHeight(newVal);
// canvas drawing area
$canvas.css("height", newVal);
canvas.height = newVal;
canvasWidth = canvas.width;
canvasHeight = canvas.height;
// preview area
$preview.css("height", newVal);
preview.height = newVal;
layerOffsetY = preview.height - 1.75 * layerCY;
yStep = preview.height / 150;
redrawDoodle();
redrawPreview();
}
}
function initLayouting() {
console.log("f:initLayouting()");
// first set the css width/height and actual width/height of the drawing area
<!--div drawAreaContainer 650,450-->
<!--canvas mycanvas 500, 450-->
<!--canvas preview 150, 450-->
$("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
$("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
canvas.width = parseInt($canvas.css("width"), 10);
canvas.height = parseInt($canvas.css("height"), 10);
preview.width = parseInt($preview.css("width"), 10);
preview.height = parseInt($preview.css("height"), 10);
canvasWidth = canvas.width;
canvasHeight = canvas.height;
// console.log("f:initLayouting() >> canvas height: " + canvas.height);
// imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
// imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
imgDims = [1024, 768];
/*
if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
} else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
} else {
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
}
//*/
// $(".container").css("height", window.innerHeight);
// Initial execution if needed
//* 2013-07-26 not doing this resizing stuff now, it's not working well yet
if (!window.addEventListener) {
window.attachEvent('orientationchange', doOnOrientationChange);
window.attachEvent('resize', doOnResize)
} else {
window.addEventListener('orientationchange', doOnOrientationChange);
window.addEventListener('resize', doOnResize)
}
//*/
doClientAndOrientationStuff();
doOnResize();
// doOnOrientationChange();
// window.innerHeight
console.log("window.innerHeight: " + window.innerHeight);
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
/* 2013-07-26 not doing this resizing stuff now, it's not working well yet
if (window.innerHeight < 768) {
$('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
}
//*/
}