1<!DOCTYPE HTML> 2<html> 3 4<!-- 5 pgn4web javascript chessboard 6 copyright (C) 2009-2014 Paolo Casaschi 7 see README file and http://pgn4web.casaschi.net 8 for credits, license and more details 9--> 10 11<head> 12 13<title>dynamic frame test</title> 14 15<link rel="icon" sizes="16x16" href="pawn.ico" /> 16 17<style type="text/css"> 18 19html, body { 20 margin: 0px; 21 padding: 0px; 22} 23 24span { 25 white-space:nowrap; 26} 27 28input { 29 height:20px; 30 font-size:9px; 31} 32 33</style> 34 35</head> 36 37<body style="overflow:hidden; font-size:9px; font-family:sans-serif;" onload="atLoad();"> 38 39<center> 40 41<div style="padding:10px;" id="header"> 42<span> width <input id="width" style="width:6em;" type="number" onchange="change_w(this.value);"> </span> 43<span> height <input id="height" style="width:6em;" type="number" onchange="change_h(this.value);"> </span> 44<span> <input type="button" value="swap" onclick="swap_wh();"/> </span> 45<span> </span> 46<span> <input type="button" value="2:1" onclick="preselect(2,1);"/> </span> 47<span> <input type="button" value="16:9" onclick="preselect(16,9);"/> </span> 48<span> <input type="button" value="4:3" onclick="preselect(4,3);"/> </span> 49<span> <input type="button" value="1:1" onclick="preselect(1,1);"/> </span> 50<span> <input type="button" value="3:4" onclick="preselect(3,4);"/> </span> 51<span> <input type="button" value="9:16" onclick="preselect(9,16);"/> </span> 52<span> <input type="button" value="1:2" onclick="preselect(1,2);"/> </span> 53<span> </span> 54<span> <input type="button" value="narrow" onclick="modify(1/1.05, 1);"/> </span> 55<span> <input type="button" value="wide" onclick="modify(1.05, 1);"/> </span> 56<span> <input type="button" value="short" onclick="modify(1, 1/1.05);"/> </span> 57<span> <input type="button" value="tall" onclick="modify(1, 1.05);"/> </span> 58<span> </span> 59<span> <input type="button" value="poke" onclick="modify(0, 0);"/> </span> 60<span> </span> 61<span> <input type="button" value="refresh" onclick="frameRefresh();"/> </span> 62</div> 63 64<iframe id="frame" src="" height="" width="" style="margin:10px;" frameborder="no" scrolling='no' marginheight='0' marginwidth='0'></iframe> 65 66</center> 67 68<script type="text/javascript"> 69"use strict"; 70 71var thisRegExp; 72var minBoardSize = 200; 73 74var frameWidth = ""; 75thisRegExp = /(&|\?)(frameWidth|fw)=([^&]*)(&|$)/i; 76if (window.location.search.match(thisRegExp) !== null) { 77 frameWidth = unescape(window.location.search.match(thisRegExp)[3]); 78} 79 80var frameHeight = ""; 81thisRegExp = /(&|\?)(frameHeight|fh)=([^&]*)(&|$)/i; 82if (window.location.search.match(thisRegExp) !== null) { 83 frameHeight = unescape(window.location.search.match(thisRegExp)[3]); 84} 85 86try { 87 document.getElementById("width").min = minBoardSize; 88 document.getElementById("height").min = minBoardSize; 89} catch(e) {} 90 91function atLoad() { 92 if (frameHeight || frameWidth) { 93 if (frameWidth && !frameHeight) { try { frameHeight = Math.floor(frameWidth * 9 / 16); } catch(e) {} } 94 if (frameHeight && !frameWidth) { try { frameWidth = Math.ceil(frameHeight / 9 * 16); } catch(e) {} } 95 change_w(frameWidth); 96 change_h(frameHeight); 97 } else { preselect(16, 9); } 98 frameRefresh(); 99} 100 101var frameUrlSearch = location.search.replace(/(&|\?)(frameWidth|fw|frameHeight|fh)=([^&]*)/ig, "$1").replace(/(&|\?)&+/ig, "$1"); 102function frameRefresh() { 103 document.getElementById("frame").src = "dynamic-frame.html" + frameUrlSearch; 104} 105 106function preselect(w, h) { 107 var ww, wh, aw, ah, fw, fh; 108 if (window.innerWidth && window.innerHeight) { ww = window.innerWidth; wh = window.innerHeight; } 109 else if (document.documentElement && document.documentElement.clientWidth) { ww = document.documentElement.clientWidth; wh = document.documentElement.clientHeight; } 110 else if (document.body && document.body.clientWidth) { ww = document.body.clientWidth; wh = document.body.clientHeight; } 111 else { throw("failed to get window size"); } 112 aw = ww - 20; 113 ah = wh - document.getElementById("header").offsetHeight - 20; 114 if (w > h) { 115 fw = Math.ceil(Math.min(aw, ah * w / h)); 116 fh = Math.floor(fw * h / w); 117 } else if (w < h) { 118 fw = Math.floor(Math.min(aw, ah * w / h)); 119 fh = Math.ceil(fw * h / w); 120 } else { 121 fw = fh = Math.floor(Math.min(aw, ah)); 122 } 123 change_w(fw); 124 change_h(fh); 125} 126 127function change_w(w) { 128 if (isNaN(w) || (w < minBoardSize)) { w = document.getElementById("width").value = minBoardSize; } 129 document.getElementById("frame").width = w; 130 if (w !== document.getElementById("width").value) { document.getElementById("width").value = w; } 131} 132 133function change_h(h) { 134 if (isNaN(h) || (h < minBoardSize)) { h = document.getElementById("height").value = minBoardSize; } 135 document.getElementById("frame").height = h; 136 if (h !== document.getElementById("height").value) { document.getElementById("height").value = h; } 137} 138 139function modify(dw, dh) { 140 if (dw === 0) { dw = (95 + 10 * Math.random()) / 100; } 141 if (dh === 0) { dh = (95 + 10 * Math.random()) / 100; } 142 if (dw != 1) { change_w(Math.round(document.getElementById("width").value * dw)); } 143 if (dh != 1) { change_h(Math.round(document.getElementById("height").value * dh)); } 144} 145 146function swap_wh() { 147 var fw = document.getElementById("height").value; 148 var fh = document.getElementById("width").value; 149 change_w(fw); 150 change_h(fh); 151} 152 153</script> 154 155</body> 156 157</html> 158 159