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>&nbsp; width <input id="width" style="width:6em;" type="number" onchange="change_w(this.value);"> &nbsp;</span>
43<span>&nbsp; height <input id="height" style="width:6em;" type="number" onchange="change_h(this.value);"> &nbsp;</span>
44<span>&nbsp; <input type="button" value="swap" onclick="swap_wh();"/> &nbsp;</span>
45<span>&nbsp;&nbsp;</span>
46<span>&nbsp; <input type="button" value="2:1" onclick="preselect(2,1);"/> &nbsp;</span>
47<span>&nbsp; <input type="button" value="16:9" onclick="preselect(16,9);"/> &nbsp;</span>
48<span>&nbsp; <input type="button" value="4:3" onclick="preselect(4,3);"/> &nbsp;</span>
49<span>&nbsp; <input type="button" value="1:1" onclick="preselect(1,1);"/> &nbsp;</span>
50<span>&nbsp; <input type="button" value="3:4" onclick="preselect(3,4);"/> &nbsp;</span>
51<span>&nbsp; <input type="button" value="9:16" onclick="preselect(9,16);"/> &nbsp;</span>
52<span>&nbsp; <input type="button" value="1:2" onclick="preselect(1,2);"/> &nbsp;</span>
53<span>&nbsp;&nbsp;</span>
54<span>&nbsp; <input type="button" value="narrow" onclick="modify(1/1.05, 1);"/> &nbsp;</span>
55<span>&nbsp; <input type="button" value="wide" onclick="modify(1.05, 1);"/> &nbsp;</span>
56<span>&nbsp; <input type="button" value="short" onclick="modify(1, 1/1.05);"/> &nbsp;</span>
57<span>&nbsp; <input type="button" value="tall" onclick="modify(1, 1.05);"/> &nbsp;</span>
58<span>&nbsp;&nbsp;</span>
59<span>&nbsp; <input type="button" value="poke" onclick="modify(0, 0);"/>&nbsp;</span>
60<span>&nbsp;&nbsp;</span>
61<span>&nbsp; <input type="button" value="refresh" onclick="frameRefresh();"/> &nbsp;</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