2233 lines
104 KiB
HTML
2233 lines
104 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<!--
|
|
pgn4web javascript chessboard
|
|
copyright (C) 2009-2014 Paolo Casaschi
|
|
see README file and http://pgn4web.casaschi.net
|
|
for credits, license and more details
|
|
-->
|
|
|
|
<head>
|
|
|
|
<title>pgn4web board generator</title>
|
|
|
|
<style type="text/css">
|
|
|
|
html,
|
|
body {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
color: black;
|
|
background: white;
|
|
padding: 10px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.helptext, .helplink {
|
|
color: gray;
|
|
}
|
|
|
|
.helplink {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.labeltext, .largeDropdown, .configtext {
|
|
margin-right: 1.0em;
|
|
}
|
|
|
|
.labeltext {
|
|
margin-left: 1.3em;
|
|
}
|
|
|
|
.helptext {
|
|
font-size: 80%;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.input, .textbox {
|
|
border-width: 1px;
|
|
border-style: inset;
|
|
border-color: #CCCCCC;
|
|
}
|
|
|
|
.input, .checkbox, .dropdown, .largeDropdown, .configtext {
|
|
/* if the margin-left value below is changed from 22px
|
|
then the corresponding value at the end of the file needs changing accordingly */
|
|
margin-left: 22px;
|
|
}
|
|
|
|
.input, .checkbox, .checkbox {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.textbox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box; /* remove when non-prefixed option supported by firefox */
|
|
-webkit-box-sizing: border-box; /* remove when non-prefixed option supported by safari */
|
|
}
|
|
|
|
.shortUrl {
|
|
font-weight: bold;
|
|
color: goldenrod;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
</style>
|
|
|
|
<link rel="shortcut icon" href="pawn.ico" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<script type="text/javascript" src="libs/jscolor/jscolor.js"></script>
|
|
<script src="pgn4web-server-config.js" type="text/javascript"></script>
|
|
<script src="pgn4web.js" type="text/javascript"></script>
|
|
|
|
<script src="pgn-decoder.js" type="text/javascript"></script>
|
|
<script src="pgn-encoder.js" type="text/javascript"></script>
|
|
<script src="crc32.js" type="text/javascript"></script>
|
|
|
|
<script type="text/javascript">
|
|
"use strict";
|
|
|
|
// this should have been defined in pgn4web-server-config.js
|
|
// setting default value here just in case
|
|
var pgn4web_bitly_login;
|
|
if (pgn4web_bitly_login === undefined) { pgn4web_bitly_login = ""; }
|
|
var pgn4web_bitly_apiKey;
|
|
if (pgn4web_bitly_apiKey === undefined) { pgn4web_bitly_apiKey = ""; }
|
|
|
|
var shorturlWin = null;
|
|
function shorten_pgn4web_url() {
|
|
if (!document.board.useTextarea.checked) {
|
|
//
|
|
// pick the short URL service: bitly is used if login/key pair
|
|
// is defined in pgn4web-server-config.js, tinyurl otherwise
|
|
//
|
|
if (pgn4web_bitly_login && pgn4web_bitly_apiKey) {
|
|
shorten_url_with_bitly(pgn4web_bitly_login, pgn4web_bitly_apiKey);
|
|
} else { shorten_url_with_tinyurl(); }
|
|
} else {
|
|
alert('URL sharing creation unavailable when useTextarea is enabled');
|
|
}
|
|
}
|
|
|
|
// use this in shorten_pgn4web_url() to generate short urls with bitly
|
|
// using bitly apis version 3, correct here if apis are changed
|
|
function shorten_url_with_bitly(bitly_login, bitly_apiKey) {
|
|
var bitly_post_request = "http://api.bitly.com/v3/shorten";
|
|
var bitly_params = "login=" + bitly_login + "&apiKey=" + bitly_apiKey + "&format=txt" + "&longUrl=" + encodeURIComponent(iframeUrl);
|
|
var bitly_get_request = bitly_post_request + "?" + bitly_params;
|
|
|
|
var bitly_link = null;
|
|
try {
|
|
document.getElementById("shorturl_link_separator").innerHTML = "<b>:</b> ";
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", bitly_post_request);
|
|
xhr.setRequestHeader("Content-type", "text/plain");
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4) {
|
|
if (xhr.status==200) {
|
|
if (xhr.responseText.match(/^http/)) {
|
|
bitly_link = xhr.responseText;
|
|
}
|
|
}
|
|
bitly_link = bitly_link.replace(/\s/g, "");
|
|
if (bitly_link) {
|
|
document.getElementById("html_code").value = document.getElementById("html_code").value.replace(/src='.+?'/, "src='" + bitly_link + "'");
|
|
document.getElementById("shorturl_link_pointer").innerHTML = bitly_link;
|
|
document.getElementById("shorturl_link_pointer").href = bitly_link;
|
|
document.getElementById("shorturl_link_pointer").target = "_blank";
|
|
document.getElementById("shorturl_link_pointer").title = "right-click, copy and share the chessboard short url";
|
|
} else {
|
|
document.getElementById("shorturl_link_pointer").innerHTML = "failed generating short url";
|
|
document.getElementById("shorturl_link_pointer").href = "";
|
|
document.getElementById("shorturl_link_pointer").target = "";
|
|
document.getElementById("shorturl_link_pointer").title = "possible failure causes: url shortening service unavailable, network error, outdated login/apiKey pair, outdated apis or something else; try again later and eventually file a pgn4web board generator bug report";
|
|
}
|
|
}
|
|
};
|
|
xhr.send(bitly_params);
|
|
} catch(e) {
|
|
document.getElementById('bitly_form_login').value = bitly_login;
|
|
document.getElementById('bitly_form_apiKey').value = bitly_apiKey;
|
|
document.getElementById('bitly_form_longUrl').value = iframeUrl;
|
|
document.getElementById('bitly_form_format').value = "txt";
|
|
|
|
shorturl_window_close();
|
|
shorturlWin = window.open('', 'pgn4web_shorturl_window');
|
|
|
|
document.forms['bitly_form_shorturl'].submit();
|
|
|
|
document.getElementById("shorturl_link_pointer").innerHTML = "see pb.casaschi.net window";
|
|
document.getElementById("shorturl_link_pointer").href = "javascript:shorturl_window_focus();";
|
|
document.getElementById("shorturl_link_pointer").target = "";
|
|
document.getElementById("shorturl_link_pointer").title = "the chessboard short url should be available in a separate browser window from pb.casaschi.net";
|
|
|
|
shorturl_window_focus();
|
|
}
|
|
|
|
}
|
|
|
|
// use this in shorten_pgn4web_url() to generate short urls with tinyurl
|
|
function shorten_url_with_tinyurl() {
|
|
document.getElementById("shorturl_link_separator").innerHTML = "<b>:</b> ";
|
|
|
|
var thisShortUrlCrc32 = printHex(crc32(iframeUrl));
|
|
document.getElementById('tinyurl_form_shorturl_url').value = iframeUrl;
|
|
document.getElementById('tinyurl_form_shorturl_alias').value = "pgn4web-" + thisShortUrlCrc32;
|
|
document.getElementById('shorturl_link').title = "pgn4web board short url #" + thisShortUrlCrc32;
|
|
|
|
shorturl_window_close();
|
|
shorturlWin = window.open('', 'pgn4web_shorturl_window');
|
|
|
|
document.forms['tinyurl_form_shorturl'].submit();
|
|
|
|
document.getElementById("shorturl_link_pointer").innerHTML = "see tinyurl window";
|
|
document.getElementById("shorturl_link_pointer").href = "javascript:shorturl_window_focus();";
|
|
document.getElementById("shorturl_link_pointer").target = "";
|
|
document.getElementById("shorturl_link_pointer").title = "the chessboard short url should be available in a separate browser window from tinyurl.com";
|
|
|
|
shorturl_window_focus();
|
|
}
|
|
|
|
function shorturl_window_focus() {
|
|
try {
|
|
if (shorturlWin && window.focus) { shorturlWin.focus(); }
|
|
} catch(e) { }
|
|
}
|
|
|
|
function shorturl_window_close() {
|
|
try {
|
|
if (shorturlWin && !shorturlWin.closed) { shorturlWin.close(); }
|
|
shorturlWin = null;
|
|
} catch(e) { }
|
|
}
|
|
|
|
function shorturl_link_clean() {
|
|
document.getElementById("shorturl_link_separator").innerHTML = "";
|
|
document.getElementById("shorturl_link_pointer").innerHTML = "";
|
|
document.getElementById("shorturl_link_pointer").href = "";
|
|
document.getElementById("shorturl_link_pointer").target = "";
|
|
document.getElementById("shorturl_link_pointer").title = "";
|
|
}
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
"use strict";
|
|
|
|
// this should have been defined in pgn4web-server-config.js
|
|
// setting default value here just in case
|
|
var pgn4web_board_url;
|
|
if (pgn4web_board_url == undefined) { pgn4web_board_url = location.protocol + "//" + location.hostname + location.pathname.substr(0, location.pathname.lastIndexOf("/")) + "/board.html"; }
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
"use strict";
|
|
|
|
// CUSTOMIZATION INSTRUCTIONS
|
|
// if you customize the board-generator.html file for your site
|
|
// you probably want to customize the default values
|
|
|
|
var pgnText_default = emptyPgnHeader + '\n';
|
|
var encodePgn_default = "t";
|
|
var autoplayMode_default = "game";
|
|
var delay_default = 3000;
|
|
var initialGame_default = "first";
|
|
var initialVariation_default = "";
|
|
var initialHalfmove_default = "start";
|
|
var initialHalfmoveSelect_default = initialHalfmove_default;
|
|
var initialHalfmoveNumber_default = "0";
|
|
var pieceFont_default = "default";
|
|
var pieceSize_default = "default";
|
|
var squareSize_default = 40;
|
|
var lightColorHex_default = "EFF4EC";
|
|
var darkColorHex_default = "C6CEC3";
|
|
var boardBorderColorHex_default = "000000";
|
|
var boardShadowColorHex_default = "transparent";
|
|
var highlightMode_default = "square";
|
|
var highlightColorHex_default = "DAF4D7";
|
|
var buttonsDisplay_default = "hidden";
|
|
var controlBackgroundColorHex_default = "EFF4EC";
|
|
var controlTextColorHex_default = "000000";
|
|
var textMargin_default = 0;
|
|
var headerDisplay_default = "justified";
|
|
var movesDisplay_default = "figurine";
|
|
var horizontalLayout_default = "f";
|
|
var frameHeight_default = "";
|
|
var frameWidth_default = "";
|
|
var framePadding_default = 0;
|
|
var commentsDisplay_default = "inline";
|
|
var fontHeaderColorHex_default = "000000";
|
|
var fontMovesColorHex_default = "000000";
|
|
var fontCommentsColorHex_default = "808080";
|
|
var fontVariationsColorHex_default = "comments";
|
|
var highlightMoveColorHex_default = "DAF4D7";
|
|
var fontHeaderSize_default = "16";
|
|
var fontMovesSize_default = "16";
|
|
var fontCommentsSize_default = "moves";
|
|
var fontVariationsSize_default = "comments";
|
|
var backgroundColorHex_default = "FFFFFF";
|
|
var previewBackgroundColorHex_default = "DDDDDD";
|
|
var boardUrl_default = pgn4web_board_url;
|
|
var useTextarea_default = "f";
|
|
|
|
// end of default values
|
|
|
|
var pgnText_value;
|
|
var encodePgn_value;
|
|
var autoplayMode_value;
|
|
var delay_value;
|
|
var initialGame_value;
|
|
var initialVariation_value;
|
|
var initialHalfmove_value;
|
|
var initialHalfmoveSelect_value;
|
|
var initialHalfmoveNumber_value;
|
|
var pieceFont_value;
|
|
var pieceSize_value;
|
|
var squareSize_value;
|
|
var lightColorHex_value;
|
|
var darkColorHex_value;
|
|
var boardBorderColorHex_value;
|
|
var boardShadowColorHex_value;
|
|
var highlightMode_value;
|
|
var highlightColorHex_value;
|
|
var buttonsDisplay_value;
|
|
var controlBackgroundColorHex_value;
|
|
var controlTextColorHex_value;
|
|
var textMargin_value;
|
|
var headerDisplay_value;
|
|
var movesDisplay_value;
|
|
var horizontalLayout_value;
|
|
var frameHeight_value;
|
|
var frameWidth_value;
|
|
var framePadding_value;
|
|
var commentsDisplay_value;
|
|
var fontHeaderColorHex_value;
|
|
var fontMovesColorHex_value;
|
|
var fontCommentsColorHex_value;
|
|
var fontVariationsColorHex_value;
|
|
var highlightMoveColorHex_value;
|
|
var fontHeaderSize_value;
|
|
var fontMovesSize_value;
|
|
var fontCommentsSize_value;
|
|
var fontVariationsSize_value;
|
|
var backgroundColorHex_value;
|
|
var previewBackgroundColorHex_value;
|
|
var boardUrl_value;
|
|
var useTextarea_value;
|
|
|
|
var pgnTextEncoded;
|
|
var previousPgnTextToEncode;
|
|
|
|
var iframeUrl;
|
|
|
|
// max length of the iframeUrl, if this is exceeded a warning is issued
|
|
var iframeUrl_max = 2000;
|
|
|
|
var suggested_frameHeight;
|
|
var suggested_frameWidth;
|
|
var min_frameHeight;
|
|
var min_frameWidth;
|
|
|
|
var pgnId;
|
|
|
|
|
|
function gup(name) {
|
|
|
|
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
|
|
var regexS = "[\\?&]"+name+"=([^&#]*)";
|
|
regexS = regexS+"(?!.*"+regexS+")"; // matches the LAST occurrence
|
|
var regex = new RegExp( regexS, "i" );
|
|
var results = regex.exec( window.location.href );
|
|
if (results !== null) { return decodeURIComponent(results[1]); }
|
|
|
|
// allows for short version of the URL parameters, for instance sC matches squareColor
|
|
var compact_name = name.charAt(0);
|
|
for (var i=1; i<name.length; i++) {
|
|
if (name.charAt(i).match(/[A-Z]/)) { compact_name = compact_name + name.charAt(i).toLowerCase(); }
|
|
}
|
|
name = compact_name;
|
|
|
|
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
|
|
regexS = "[\\?&]"+name+"=([^&#]*)";
|
|
regexS = regexS+"(?!.*"+regexS+")"; // matches the LAST occurrence
|
|
regex = new RegExp( regexS, "i" );
|
|
results = regex.exec( window.location.href );
|
|
if (results !== null) { return decodeURIComponent(results[1]); }
|
|
|
|
return "";
|
|
}
|
|
|
|
var newStyleSheet = '<style type="text/css"> \n';
|
|
if ((gup("extendedOptions") == "true") || (gup("extendedOptions") == "t")) {
|
|
newStyleSheet += '.extendedOption { display: inline; } \n';
|
|
newStyleSheet += '.noExtendedOption { display: none; } \n';
|
|
} else {
|
|
newStyleSheet += '.extendedOption { display: none; } \n';
|
|
newStyleSheet += '.noExtendedOption { display: inline; } \n';
|
|
}
|
|
newStyleSheet += '</style> \n';
|
|
document.write(newStyleSheet);
|
|
|
|
function new_onLoad() {
|
|
jscolor.bind(); // needed to cope with IE bug
|
|
set_defaults();
|
|
}
|
|
|
|
function set_defaults() {
|
|
|
|
load_templates();
|
|
document.getElementById('templatesList').options[1].value = location.search.replace(/&(pe|pt)=.*(&|$)/,"");
|
|
|
|
document.getElementById('html_code').value = '';
|
|
document.getElementById('html_code_status').innerHTML = ' ';
|
|
|
|
if ((pgnTextEncoded = gup("pgnEncoded")) !== "") {
|
|
pgnText_value = DecodePGN(pgnTextEncoded);
|
|
previousPgnTextToEncode = pgnText_value;
|
|
} else {
|
|
if ((pgnText_value = gup("pgnText")) === "") { pgnText_value = pgnText_default; }
|
|
previousPgnTextToEncode = "";
|
|
}
|
|
document.getElementById('pgnText').value = pgnText_value;
|
|
update_pgnTextLength();
|
|
|
|
if ((encodePgn_value = gup("encodePgn")) === "") { encodePgn_value = encodePgn_default; }
|
|
document.board.encodePgn.checked = (encodePgn_value == "t");
|
|
|
|
var oldAutoplayMode_value = "";
|
|
//kept for backward compatibility
|
|
if ((gup("loop") == "true") || (gup("loop") == "t")) { oldAutoplayMode_value = "loop"; }
|
|
//kept for backward compatibility
|
|
if ((gup("auto") == "false") || (gup("loop") == "f")) { oldAutoplayMode_value = "none"; }
|
|
|
|
if ((autoplayMode_value = gup("autoplayMode")) === "") {
|
|
autoplayMode_value = oldAutoplayMode_value === "" ? autoplayMode_default : oldAutoplayMode_value;
|
|
}
|
|
if (autoplayMode_value == "g") { autoplayMode_value = "game"; }
|
|
if (autoplayMode_value == "l") { autoplayMode_value = "loop"; }
|
|
if (autoplayMode_value == "n") { autoplayMode_value = "none"; }
|
|
document.board.autoplayMode.value = autoplayMode_value;
|
|
if (!((autoplayMode_value == "game") || (autoplayMode_value == "loop") ||
|
|
(autoplayMode_value == "none")) ) {
|
|
alert("error: autoplay mode must be either 'game', 'loop', 'none' or their initials");
|
|
document.board.autoplayMode.value = autoplayMode_value = autoplayMode_default;
|
|
}
|
|
|
|
if ((delay_value = gup("delay")) === "") { delay_value = delay_default; }
|
|
document.board.delay.value = delay_value;
|
|
|
|
if ((initialGame_value = gup("initialGame")) === "") { initialGame_value = initialGame_default; }
|
|
if ((initialGame_value == "f") || (initialGame_value == "false")) { initialGame_value = "first"; }
|
|
if (initialGame_value == "l") { initialGame_value = "last"; }
|
|
if (initialGame_value == "r") { initialGame_value = "random"; }
|
|
document.board.initialGame.value = initialGame_value;
|
|
if (!((initialGame_value == "first") || (initialGame_value == "last") ||
|
|
(initialGame_value == "random")) ) {
|
|
alert("error: initial game must be either 'first', 'last', 'random' or their initials");
|
|
document.board.initialGame.value = initialGame_value = initialGame_default;
|
|
}
|
|
|
|
if ((initialVariation_value = gup("initialVariation")) === "") { initialVariation_value = initialVariation_default; }
|
|
|
|
if ((initialHalfmove_value = gup("initialHalfmove")) === "") { initialHalfmove_value = initialHalfmove_default; }
|
|
if (initialHalfmove_value == "s") { initialHalfmove_value = "start"; }
|
|
if (initialHalfmove_value == "e") { initialHalfmove_value = "end"; }
|
|
if (initialHalfmove_value == "r") { initialHalfmove_value = "random"; }
|
|
if (initialHalfmove_value == "c") { initialHalfmove_value = "comment"; }
|
|
if (initialHalfmove_value == "v") { initialHalfmove_value = "variation"; }
|
|
document.board.initialHalfmove.value = initialHalfmove_value;
|
|
checkInitialHalfmove();
|
|
|
|
if ((pieceFont_value = gup("pieceFont")) === "") { pieceFont_value = pieceFont_default; }
|
|
if (pieceFont_value == "a") { pieceFont_value = "alpha"; }
|
|
if (pieceFont_value == "m") { pieceFont_value = "merida"; }
|
|
if (pieceFont_value == "u") { pieceFont_value = "uscf"; }
|
|
if (pieceFont_value == "r") { pieceFont_value = "random"; }
|
|
if (pieceFont_value == "d") { pieceFont_value = "default"; }
|
|
document.board.pieceFont.value = pieceFont_value;
|
|
if (!((pieceFont_value == "alpha") || (pieceFont_value == "merida") ||
|
|
(pieceFont_value == "uscf") || (pieceFont_value == "random") ||
|
|
(pieceFont_value == "default")) ) {
|
|
alert("error: piece font must be either 'alpha', 'merida', 'uscf', 'random', 'default' or their initials");
|
|
document.board.pieceFont.value = pieceFont_value = pieceFont_default;
|
|
}
|
|
|
|
if ((squareSize_value = gup("squareSize")) === "") { squareSize_value = squareSize_default; }
|
|
document.getElementById('squareSize').value = squareSize_value = parseInt(squareSize_value, 10);
|
|
// value validation done later in validate_ss_ps_hm();
|
|
|
|
if ((pieceSize_value = gup("pieceSize")) === "") { pieceSize_value = pieceSize_default; }
|
|
if (pieceSize_value == "d") { pieceSize_value = "default"; }
|
|
if (pieceSize_value == "default") {
|
|
document.getElementById('pieceSize').value = pieceSize_value;
|
|
} else {
|
|
document.getElementById('pieceSize').value = pieceSize_value = parseInt(pieceSize_value, 10);
|
|
}
|
|
// value validation done later in validate_ss_ps_hm();
|
|
|
|
if ((lightColorHex_value = gup("lightColorHex")) === "") {
|
|
if ((lightColorHex_value = sex2hex(gup("lightColorSex"), 'light squares color')) === "") {
|
|
lightColorHex_value = lightColorHex_default;
|
|
}
|
|
}
|
|
document.board.lightColorHex.color.fromString(lightColorHex_value);
|
|
validate_color(document.board.lightColorHex, 'light squares color', lightColorHex_default);
|
|
|
|
if ((darkColorHex_value = gup("darkColorHex")) === "") {
|
|
if ((darkColorHex_value = sex2hex(gup("darkColorSex"), 'dark squares color')) === "") {
|
|
darkColorHex_value = darkColorHex_default;
|
|
}
|
|
}
|
|
document.board.darkColorHex.color.fromString(darkColorHex_value);
|
|
validate_color(document.board.darkColorHex, 'dark squares color', darkColorHex_default);
|
|
|
|
if ((boardBorderColorHex_value = gup("boardBorderColorHex")) === "") {
|
|
if ((boardBorderColorHex_value = sex2hex(gup("boardBorderColorSex"), 'board border color')) === "") {
|
|
boardBorderColorHex_value = boardBorderColorHex_default;
|
|
}
|
|
}
|
|
document.board.boardBorderColorHex.color.fromString(boardBorderColorHex_value);
|
|
validate_color(document.board.boardBorderColorHex, 'board border color', boardBorderColorHex_default);
|
|
|
|
if ((highlightMode_value = gup("highlightMode")) === "") { highlightMode_value = highlightMode_default; }
|
|
if (highlightMode_value == "b") { highlightMode_value = "border"; }
|
|
if (highlightMode_value == "n") { highlightMode_value = "none"; }
|
|
if (highlightMode_value == "s") { highlightMode_value = "square"; }
|
|
document.board.highlightMode.value = highlightMode_value;
|
|
if (!((highlightMode_value == "border") || (highlightMode_value == "none") ||
|
|
(highlightMode_value == "square")) ) {
|
|
alert("error: highlight mode must be either 'border', 'square', 'none' or their initials");
|
|
document.board.highlightMode.value = highlightMode_value = highlightMode_default;
|
|
}
|
|
validate_ss_ps_hm();
|
|
|
|
if ((highlightColorHex_value = gup("highlightColorHex")) === "") {
|
|
if ((highlightColorHex_value = sex2hex(gup("highlightColorSex"), 'highlight squares color')) === "") {
|
|
highlightColorHex_value = highlightColorHex_default;
|
|
}
|
|
}
|
|
if (highlightColorHex_value == 'n') { highlightColorHex_value = 'none'; }
|
|
if (highlightColorHex_value == 'none') {
|
|
document.board.highlightMode.value = highlightMode_value = "none";
|
|
highlightColorHex_value = highlightColorHex_default;
|
|
}
|
|
document.board.highlightColorHex.color.fromString(highlightColorHex_value);
|
|
validate_color(document.board.highlightColorHex, 'highlight squares color', highlightColorHex_default);
|
|
|
|
var oldButtonsDisplay_value = "";
|
|
//kept for backward compatibility
|
|
if (gup("showButtons") == "t") { oldButtonsDisplay_value = "custom"; }
|
|
//kept for backward compatibility
|
|
if (gup("showButtons") == "f") { oldButtonsDisplay_value = "hidden"; }
|
|
|
|
if ((buttonsDisplay_value = gup("buttonsDisplay")) === "") {
|
|
buttonsDisplay_value = oldButtonsDisplay_value === "" ? buttonsDisplay_default : oldButtonsDisplay_value;
|
|
}
|
|
if (buttonsDisplay_value == "c") { buttonsDisplay_value = "custom"; }
|
|
if (buttonsDisplay_value == "h") { buttonsDisplay_value = "hidden"; }
|
|
if (buttonsDisplay_value == "s") { buttonsDisplay_value = "standard"; }
|
|
document.board.buttonsDisplay.value = buttonsDisplay_value;
|
|
if (!((buttonsDisplay_value == "custom") || (buttonsDisplay_value == "hidden") ||
|
|
(buttonsDisplay_value == "standard")) ) {
|
|
alert("error: buttons display must be either 'custom', 'hidden', 'standard' or their initials");
|
|
document.board.buttonsDisplay.value = buttonsDisplay_value = buttonsDisplay_default;
|
|
}
|
|
|
|
if ((controlBackgroundColorHex_value = gup("controlBackgroundColorHex")) === "") {
|
|
var controlBackgroundColorSex = gup("controlBackgroundColorSex");
|
|
if ((controlBackgroundColorHex_value = sex2hex(controlBackgroundColorSex, 'control buttons background color')) === "") {
|
|
controlBackgroundColorHex_value = controlBackgroundColorHex_default;
|
|
}
|
|
}
|
|
if (controlBackgroundColorHex_value == 'd') { controlBackgroundColorHex_value = 'default'; }
|
|
if (controlBackgroundColorHex_value == 'default') {
|
|
document.board.buttonsDisplay.value = buttonsDisplay_value = "standard";
|
|
controlBackgroundColorHex_value = controlBackgroundColorHex_default;
|
|
}
|
|
document.board.controlBackgroundColorHex.color.fromString(controlBackgroundColorHex_value);
|
|
validate_color(document.board.controlBackgroundColorHex, 'control buttons background color', 'default');
|
|
|
|
if ((controlTextColorHex_value = gup("controlTextColorHex")) === "") {
|
|
if ((controlTextColorHex_value = sex2hex(gup("controlTextColorSex"), 'control buttons text color')) === "") {
|
|
controlTextColorHex_value = controlTextColorHex_default;
|
|
}
|
|
}
|
|
document.board.controlTextColorHex.color.fromString(controlTextColorHex_value);
|
|
validate_color(document.board.controlTextColorHex, 'control buttons text color', controlTextColorHex_default);
|
|
|
|
if ((textMargin_value = gup("textMargin")) === "") { textMargin_value = textMargin_default; }
|
|
document.getElementById('textMargin').value = textMargin_value;
|
|
validate_number(document.getElementById('textMargin'), 'text margin', textMargin_default);
|
|
|
|
var oldHeaderDisplay_value = "";
|
|
//kept for backward compatibility
|
|
if (gup("showHeader") == "t") { oldHeaderDisplay_value = "justified"; }
|
|
//kept for backward compatibility
|
|
if (gup("showHeader") == "f") { oldHeaderDisplay_value = "hidden"; }
|
|
|
|
if ((headerDisplay_value = gup("headerDisplay")) === "") {
|
|
headerDisplay_value = oldHeaderDisplay_value === "" ? headerDisplay_default : oldHeaderDisplay_value;
|
|
}
|
|
if (headerDisplay_value == "c") { headerDisplay_value = "centered"; }
|
|
if (headerDisplay_value == "h") { headerDisplay_value = "hidden"; }
|
|
if (headerDisplay_value == "j") { headerDisplay_value = "justified"; }
|
|
if (headerDisplay_value == "l") { headerDisplay_value = "live"; }
|
|
if (headerDisplay_value == "v") { headerDisplay_value = "variations"; }
|
|
document.board.headerDisplay.value = headerDisplay_value;
|
|
if (!((headerDisplay_value == "centered") || (headerDisplay_value == "hidden") ||
|
|
(headerDisplay_value == "justified") || (headerDisplay_value == "live") ||
|
|
(headerDisplay_value == "variations")) ) {
|
|
alert("error: header display must be either 'centered', 'hidden', 'justified', 'live', 'variations' or their initials");
|
|
document.board.headerDisplay.value = headerDisplay_value = headerDisplay_default;
|
|
}
|
|
|
|
var oldMovesDisplay_value = "";
|
|
//kept for backward compatibility
|
|
if (gup("showMoves") === "t") { oldMovesDisplay_value = "figurine"; }
|
|
//kept for backward compatibility
|
|
if (gup("showMoves") === "f") { oldMovesDisplay_value = "hidden"; }
|
|
|
|
if ((movesDisplay_value = gup("movesDisplay")) === "") {
|
|
movesDisplay_value = oldMovesDisplay_value === "" ? movesDisplay_default : oldMovesDisplay_value;
|
|
}
|
|
if (movesDisplay_value == "h") { movesDisplay_value = "hidden"; }
|
|
if (movesDisplay_value == "f") { movesDisplay_value = "figurine"; }
|
|
if (movesDisplay_value == "t") { movesDisplay_value = "text"; }
|
|
// "nosymbols" option is undocumented
|
|
if (movesDisplay_value == "n") { movesDisplay_value = "nosymbols"; }
|
|
if (movesDisplay_value == "p") { movesDisplay_value = "puzzle"; }
|
|
//kept for backward compatibility
|
|
if ((movesDisplay_value == "justified") || (movesDisplay_value == "j")) { movesDisplay_value = "figurine"; }
|
|
document.board.movesDisplay.value = movesDisplay_value;
|
|
if (!((movesDisplay_value == "hidden") || (movesDisplay_value == "figurine") || (movesDisplay_value == "nosymbols") || (movesDisplay_value == "puzzle") || (movesDisplay_value == "text"))) {
|
|
alert("error: moves display must be either 'hidden', 'figurine', 'puzzle', 'text' or their initials");
|
|
document.board.movesDisplay.value = movesDisplay_value = movesDisplay_default;
|
|
}
|
|
|
|
var oldCommentsDisplay_value = "";
|
|
//kept for backward compatibility
|
|
if (gup("showCommentsOnSeparateLines") === "t") { oldCommentsDisplay_value = "newline"; }
|
|
//kept for backward compatibility
|
|
if (gup("showComments") === "f") { oldCommentsDisplay_value = "hidden"; }
|
|
|
|
if ((commentsDisplay_value = gup("commentsDisplay")) === "") {
|
|
commentsDisplay_value = oldCommentsDisplay_value === "" ? commentsDisplay_default : oldCommentsDisplay_value;
|
|
}
|
|
if (commentsDisplay_value == "h") { commentsDisplay_value = "hidden"; }
|
|
if (commentsDisplay_value == "i") { commentsDisplay_value = "inline"; }
|
|
if (commentsDisplay_value == "n") { commentsDisplay_value = "newline"; }
|
|
document.board.commentsDisplay.value = commentsDisplay_value;
|
|
if (!((commentsDisplay_value == "hidden") || (commentsDisplay_value == "inline") ||
|
|
(commentsDisplay_value == "newline")) ) {
|
|
alert("error: comment display must be either 'hidden', 'inline', 'newline' or their initials");
|
|
document.board.commentsDisplay.value = commentsDisplay_value = commentsDisplay_default;
|
|
}
|
|
|
|
if ((fontHeaderColorHex_value = gup("fontHeaderColorHex")) === "") {
|
|
if ((fontHeaderColorHex_value = sex2hex(gup("fontHeaderColorSex"), 'header font color')) === "") {
|
|
fontHeaderColorHex_value = fontHeaderColorHex_default;
|
|
}
|
|
}
|
|
document.board.fontHeaderColorHex.color.fromString(fontHeaderColorHex_value);
|
|
validate_color(document.board.fontHeaderColorHex, 'header font color', fontHeaderColorHex_default);
|
|
|
|
if ((fontMovesColorHex_value = gup("fontMovesColorHex")) === "") {
|
|
if ((fontMovesColorHex_value = sex2hex(gup("fontMovesColorSex"), 'moves font color')) === "") {
|
|
fontMovesColorHex_value = fontMovesColorHex_default;
|
|
}
|
|
}
|
|
document.board.fontMovesColorHex.color.fromString(fontMovesColorHex_value);
|
|
validate_color(document.board.fontMovesColorHex, 'moves font color', fontMovesColorHex_default);
|
|
|
|
if ((fontCommentsColorHex_value = gup("fontCommentsColorHex")) === "") {
|
|
if ((fontCommentsColorHex_value = sex2hex(gup("fontCommentsColorSex"), 'comments font color')) === "") {
|
|
fontCommentsColorHex_value = fontCommentsColorHex_default;
|
|
}
|
|
}
|
|
document.board.fontCommentsColorHex.color.fromString(fontCommentsColorHex_value);
|
|
validate_color(document.board.fontCommentsColorHex, 'comments font color', fontCommentsColorHex_default);
|
|
|
|
if ((fontVariationsColorHex_value = gup("fontVariationsColorHex")) === "") {
|
|
var fontVariationsColorSex = gup("fontVariationsColorSex");
|
|
if ((fontVariationsColorSex == "comments") || (fontVariationsColorSex == "c")) {
|
|
fontVariationsColorHex_value = "comments";
|
|
} else {
|
|
if ((fontVariationsColorHex_value = sex2hex(fontVariationsColorSex, 'font variations color')) === "") {
|
|
fontVariationsColorHex_value = fontVariationsColorHex_default;
|
|
}
|
|
}
|
|
}
|
|
if (fontVariationsColorHex_value == "c") {
|
|
fontVariationsColorHex_value = "comments";
|
|
}
|
|
if (fontVariationsColorHex_value == "comments") {
|
|
document.board.fontVariationsColorHex.value = fontVariationsColorHex_value;
|
|
} else {
|
|
document.board.fontVariationsColorHex.color.fromString(fontVariationsColorHex_value);
|
|
}
|
|
|
|
if ((highlightMoveColorHex_value = gup("highlightMoveColorHex")) === "") {
|
|
var highlightMoveColorSex = gup("highlightMoveColorSex");
|
|
if ((highlightMoveColorSex == "background") || (highlightMoveColorSex == "b")) {
|
|
highlightMoveColorHex_value = "background";
|
|
} else {
|
|
if ((highlightMoveColorHex_value = sex2hex(highlightMoveColorSex, 'move highlight color')) === "") {
|
|
highlightMoveColorHex_value = highlightMoveColorHex_default;
|
|
}
|
|
}
|
|
}
|
|
if (highlightMoveColorHex_value == "b") { highlightMoveColorHex_value = "background"; }
|
|
if (highlightMoveColorHex_value == "background") {
|
|
document.board.highlightMoveColorHex.value = highlightMoveColorHex_value;
|
|
} else {
|
|
document.board.highlightMoveColorHex.color.fromString(highlightMoveColorHex_value);
|
|
validate_color(document.board.highlightMoveColorHex, 'move highlight color', highlightMoveColorHex_default);
|
|
}
|
|
|
|
if ((fontHeaderSize_value = percentFixFromUrl( gup("fontHeaderSize") )) === "") { fontHeaderSize_value = fontHeaderSize_default; }
|
|
document.board.fontHeaderSize.value = fontHeaderSize_value;
|
|
validate_number_percentage(document.board.fontHeaderSize, 'header font size', fontHeaderSize_default);
|
|
|
|
if ((fontMovesSize_value = percentFixFromUrl( gup("fontMovesSize") )) === "") { fontMovesSize_value = fontMovesSize_default; }
|
|
document.board.fontMovesSize.value = fontMovesSize_value;
|
|
validate_number_percentage(document.board.fontMovesSize, 'moves font size', fontMovesSize_default);
|
|
|
|
if ((fontCommentsSize_value = percentFixFromUrl( gup("fontCommentsSize") )) === "") { fontCommentsSize_value = fontCommentsSize_default; }
|
|
if (fontCommentsSize_value == "m") { fontCommentsSize_value = "moves"; }
|
|
document.board.fontCommentsSize.value = fontCommentsSize_value;
|
|
validate_fontCommentsSize();
|
|
|
|
if ((fontVariationsSize_value = percentFixFromUrl( gup("fontVariationsSize") )) === "") { fontVariationsSize_value = fontVariationsSize_default; }
|
|
if (fontVariationsSize_value == "c") { fontVariationsSize_value = "comments"; }
|
|
document.board.fontVariationsSize.value = fontVariationsSize_value;
|
|
validate_fontVariationsSize();
|
|
|
|
if ((backgroundColorHex_value = gup("backgroundColorHex")) === "") {
|
|
var backgroundColorSex = gup("backgroundColorSex");
|
|
if ((backgroundColorSex == "transparent") || (backgroundColorSex == "t")) {
|
|
backgroundColorHex_value = "transparent";
|
|
} else {
|
|
if ((backgroundColorHex_value = sex2hex(backgroundColorSex, 'background color')) === "") {
|
|
backgroundColorHex_value = backgroundColorHex_default;
|
|
}
|
|
}
|
|
}
|
|
if (backgroundColorHex_value == "t") {
|
|
backgroundColorHex_value = "transparent";
|
|
}
|
|
if (backgroundColorHex_value == "transparent") {
|
|
document.board.backgroundColorHex.value = backgroundColorHex_value;
|
|
} else {
|
|
document.board.backgroundColorHex.color.fromString(backgroundColorHex_value);
|
|
validate_color(document.board.backgroundColorHex, 'background color', backgroundColorHex_default);
|
|
}
|
|
|
|
if ((boardShadowColorHex_value = gup("boardShadowColorHex")) === "") {
|
|
var boardShadowColorSex = gup("boardShadowColorSex");
|
|
if ((boardShadowColorSex == "transparent") || (boardShadowColorSex == "t")) {
|
|
boardShadowColorHex_value = "transparent";
|
|
} else if ((boardShadowColorSex == "border") || (boardShadowColorSex == "b")) {
|
|
boardShadowColorHex_value = "border";
|
|
} else {
|
|
if ((boardShadowColorHex_value = sex2hex(boardShadowColorSex, 'board shadow color')) === "") {
|
|
boardShadowColorHex_value = boardShadowColorHex_default;
|
|
}
|
|
}
|
|
}
|
|
if (boardShadowColorHex_value == "t") {
|
|
boardShadowColorHex_value = "transparent";
|
|
}
|
|
if (boardShadowColorHex_value == "b") {
|
|
boardShadowColorHex_value = "border";
|
|
}
|
|
if ((boardShadowColorHex_value == "transparent") || (boardShadowColorHex_value == "border")) {
|
|
document.board.boardShadowColorHex.value = boardShadowColorHex_value;
|
|
} else {
|
|
document.board.boardShadowColorHex.color.fromString(boardShadowColorHex_value);
|
|
}
|
|
|
|
if ((horizontalLayout_value = gup("horizontalLayout")) === "") { horizontalLayout_value = horizontalLayout_default; }
|
|
document.board.horizontalLayout.value = horizontalLayout_value == "t" ? "t" : "f";
|
|
|
|
if ((frameHeight_value = gup("frameHeight")) === "") { frameHeight_value = frameHeight_default; }
|
|
if (frameHeight_value == "b") { frameHeight_value = "board"; }
|
|
document.board.frameHeight.value = frameHeight_value;
|
|
validate_frameHeight();
|
|
|
|
if ((frameWidth_value = gup("frameWidth")) === "") { frameWidth_value = frameWidth_default; }
|
|
if (frameWidth_value == "p") { frameWidth_value = "page"; }
|
|
if (frameWidth_value == "b") { frameWidth_value = "board"; }
|
|
document.board.frameWidth.value = frameWidth_value;
|
|
validate_frameWidth();
|
|
|
|
if ((framePadding_value = gup("framePadding")) === "") { framePadding_value = framePadding_default; }
|
|
document.board.framePadding.value = framePadding_value;
|
|
validate_number(document.board.framePadding, 'frame padding', framePadding_default);
|
|
|
|
if ((previewBackgroundColorHex_value = gup("previewBackgroundColorHex")) === "") {
|
|
if ((previewBackgroundColorHex_value = sex2hex(gup("previewBackgroundColorSex"), 'preview background color')) === "") {
|
|
previewBackgroundColorHex_value = previewBackgroundColorHex_default;
|
|
}
|
|
}
|
|
document.board.previewBackgroundColorHex.color.fromString(previewBackgroundColorHex_value);
|
|
validate_color(document.board.previewBackgroundColorHex, 'preview background color', previewBackgroundColorHex_default);
|
|
|
|
if ((boardUrl_value = gup("boardUrl")) === "") { boardUrl_value = boardUrl_default; }
|
|
document.board.boardUrl.value = boardUrl_value;
|
|
|
|
if ((useTextarea_value = gup("useTextarea")) === "") { useTextarea_value = useTextarea_default; }
|
|
document.board.useTextarea.checked = ((useTextarea_value == "t") || (useTextarea_value == "true"));
|
|
validate_useTextarea();
|
|
|
|
generate_html_code();
|
|
update_controls();
|
|
}
|
|
|
|
function reset_form() {
|
|
if (confirm("do you really want to reset the board generator to the default values?\nAll your settings including the PGN text might be lost!")) { set_defaults(); }
|
|
}
|
|
|
|
function update_controls() {
|
|
update_disabled_controls();
|
|
update_suggested_iframe_dimensions();
|
|
}
|
|
|
|
function update_disabled_controls() {
|
|
|
|
document.board.highlightColorHex.disabled = (document.board.highlightMode.value == 'none');
|
|
|
|
document.board.controlBackgroundColorHex.disabled = document.board.controlTextColorHex.disabled = (document.board.buttonsDisplay.value != 'custom');
|
|
|
|
document.board.textMargin.disabled = ((document.board.movesDisplay.value == 'hidden') && (document.board.headerDisplay.value == 'hidden'));
|
|
|
|
document.board.fontHeaderSize.disabled = document.board.fontHeaderColorHex.disabled = (document.board.headerDisplay.value == 'hidden');
|
|
|
|
document.board.fontMovesSize.disabled = document.board.fontMovesColorHex.disabled = document.board.highlightMoveColorHex.disabled = document.getElementById('highlightMoveColor_background').disabled = ((document.board.movesDisplay.value == 'hidden') && (document.board.headerDisplay.value != 'live') && (document.board.headerDisplay.value != 'variations'));
|
|
|
|
document.board.commentsDisplay.disabled = document.getElementById('commentsDisplay_inline').disabled = document.getElementById('commentsDisplay_newline').disabled = document.getElementById('commentsDisplay_hidden').disabled = ((document.board.movesDisplay.value == 'hidden') && (document.board.headerDisplay.value != 'live') && (document.board.headerDisplay.value != 'variations'));
|
|
|
|
document.board.fontCommentsSize.disabled = document.getElementById('fontCommentsSize_moves').disabled = document.board.fontCommentsColorHex.disabled = (((document.board.movesDisplay.value == 'hidden') || (document.board.commentsDisplay.value == 'hidden')) && (document.board.headerDisplay.value != 'live') && (document.board.headerDisplay.value != 'variations'));
|
|
|
|
document.board.fontVariationsSize.disabled = document.getElementById('fontVariationsSize_comments').disabled = document.board.fontVariationsColorHex.disabled = document.getElementById('fontVariationsColor_comments').disabled = (((document.board.movesDisplay.value == 'hidden') && (document.board.headerDisplay.value != 'live') && (document.board.headerDisplay.value != 'variations')) || (document.board.commentsDisplay.value == 'hidden') || (!document.board.useTextarea.checked));
|
|
|
|
document.board.encodePgn.disabled = document.getElementById('encodePgn_enabled').disabled = document.board.useTextarea.checked;
|
|
|
|
}
|
|
|
|
function update_suggested_iframe_dimensions() {
|
|
|
|
var boardWidth = 8 * document.board.squareSize.value + 6;
|
|
var estimated_boardHeight = boardWidth;
|
|
|
|
var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
|
|
var selectDropdownShown = multiGamesRegexp.test(pgnTextFixFromInput(document.getElementById('pgnText').value));
|
|
|
|
if (document.board.buttonsDisplay.value != 'hidden') {
|
|
if (document.board.buttonsDisplay.value == "standard") {
|
|
// in this case control padding grows with squareSize
|
|
// while the size of the controls cant be predicted, so a safe number is set
|
|
estimated_boardHeight += selectDropdownShown ?
|
|
2 * (25 + parseInt(document.board.squareSize.value, 10) / 2) :
|
|
25 + parseInt(document.board.squareSize.value, 10) / 2;
|
|
} else {
|
|
// in this case both control size and control padding grow with squareSize
|
|
estimated_boardHeight += selectDropdownShown ?
|
|
2 * (5 + 1.1 * parseInt(document.board.squareSize.value, 10)) :
|
|
5 + 1.1 * parseInt(document.board.squareSize.value, 10);
|
|
}
|
|
}
|
|
estimated_boardHeight = Math.floor(estimated_boardHeight);
|
|
|
|
min_frameWidth = boardWidth + 2 * parseInt(document.board.framePadding.value, 10);
|
|
min_frameHeight = estimated_boardHeight + 2 * parseInt(document.board.framePadding.value, 10);
|
|
|
|
if (document.board.horizontalLayout.value == "t") {
|
|
suggested_frameHeight = "board";
|
|
suggested_frameWidth = "page";
|
|
document.getElementById('frameHeight_helpText').innerHTML = "a number or <a id='frameHeight_board' class='helplink' href='' onClick='if (!this.disabled) { document.board.frameHeight.value = \"board\"; update_controls(); } return false;'>board</a>; min " + min_frameHeight + "; when <a id='frameHeight_blank' class='helplink' href='' onClick='if (!this.disabled) { document.board.frameHeight.value = \"\"; update_controls(); } return false;'>blank</a>, assigned to " + suggested_frameHeight;
|
|
document.getElementById('frameWidth_helpText').innerHTML = "a number or <a id='frameWidth_page' class='helplink' href='' onClick='if (!this.disabled) { document.board.frameWidth.value = \"page\"; update_controls(); } return false;'>page</a>; min " + min_frameWidth + "; when <a id='frameWidth_blank' class='helplink' href='' onClick='if (!this.disabled) { document.board.frameWidth.value = \"\"; update_controls(); } return false;'>blank</a>, assigned to " + suggested_frameWidth + "; board width is " + boardWidth;
|
|
} else {
|
|
suggested_frameWidth = boardWidth;
|
|
suggested_frameHeight = estimated_boardHeight;
|
|
if (document.board.headerDisplay.value != 'hidden') {
|
|
suggested_frameHeight += Math.max(100, Math.round(0.2 * boardWidth));
|
|
}
|
|
if (document.board.movesDisplay.value != 'hidden') {
|
|
suggested_frameHeight += Math.max(300, Math.round(0.8 * boardWidth));
|
|
}
|
|
if ((document.board.headerDisplay.value != 'hidden') || (document.board.movesDisplay.value != 'hidden')) {
|
|
suggested_frameWidth = Math.max(400, Math.round(1.5 * boardWidth));
|
|
}
|
|
suggested_frameWidth += 2 * parseInt(document.board.framePadding.value, 10);
|
|
suggested_frameHeight += 2 * parseInt(document.board.framePadding.value, 10);
|
|
document.getElementById('frameHeight_helpText').innerHTML = "a number; min " + min_frameHeight + "; when <a id='frameHeight_blank' class='helplink' href='' onClick='if (!this.disabled) { document.board.frameHeight.value = \"\"; update_controls(); } return false;'>blank</a>, assigned to " + suggested_frameHeight;
|
|
document.getElementById('frameWidth_helpText').innerHTML = "a number or <a id='frameWidth_board' class='helplink' href='' onClick='if (!this.disabled) { document.board.frameWidth.value = \"board\"; update_controls(); } return false;'>board</a> or <a id='frameWidth_page' class='helplink' href='' onClick='if (!this.disabled) { document.board.frameWidth.value = \"page\"; update_controls(); } return false;'>page</a>; min " + min_frameWidth + "; when <a id='frameWidth_blank' class='helplink' href='' onClick='if (!this.disabled) { document.board.frameWidth.value = \"\"; update_controls(); } return false;'>blank</a>, assigned to " + suggested_frameWidth + "; board width is " + boardWidth;
|
|
}
|
|
|
|
if (theObj = document.getElementById('frameWidth')) {
|
|
if (theObj.value !== "") {
|
|
if (!theObj.value.match('/^[^0-9]$/')) {
|
|
if (theObj.value < min_frameWidth) {
|
|
alert('error: iFrame width too small');
|
|
theObj.value = "";
|
|
}
|
|
} else { alert('error: invalid iFrame width value'); }
|
|
}
|
|
}
|
|
|
|
if (theObj = document.getElementById('frameHeight')) {
|
|
if (theObj.value !== "") {
|
|
if (!theObj.value.match('/^[^0-9]$/')) {
|
|
if (theObj.value < min_frameHeight) {
|
|
alert('error: iFrame height too small');
|
|
theObj.value = "";
|
|
}
|
|
} else { alert('error: invalid iFrame height value'); }
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function update_pgnTextLength() {
|
|
document.getElementById('pgnTextLength').innerHTML = " " + document.getElementById('pgnText').value.replace(/\r\n/g,'\n').length + "p";
|
|
}
|
|
|
|
function calculate_html_code() {
|
|
|
|
// this must be the firts item
|
|
boardUrl_value = document.board.boardUrl.value;
|
|
iframeUrl = boardUrl_value + "?";
|
|
|
|
autoplayMode_value = document.board.autoplayMode.value;
|
|
delay_value = parseInt(document.board.delay.value, 10);
|
|
iframeUrl += "&am=" + autoplayMode_value.charAt(0) + "&d=" + delay_value;
|
|
|
|
initialGame_value = document.board.initialGame.value;
|
|
if (initialGame_value != "first") { iframeUrl += "&ig=" + initialGame_value.charAt(0); }
|
|
|
|
initialVariation_value = document.board.initialVariation.value;
|
|
if (!isNaN(parseInt(initialVariation_value, 10)) && parseInt(initialVariation_value, 10) > 0) { iframeUrl += "&iv=" + initialVariation_value; }
|
|
|
|
initialHalfmove_value = document.board.initialHalfmove.value;
|
|
if (initialHalfmove_value != "start") {
|
|
iframeUrl += "&ih=" + (isNaN(parseInt(initialHalfmove_value, 10)) ?
|
|
initialHalfmove_value.charAt(0) :
|
|
initialHalfmove_value);
|
|
}
|
|
|
|
pieceFont_value = document.board.pieceFont.value;
|
|
squareSize_value = parseInt(document.board.squareSize.value, 10);
|
|
if (document.board.pieceSize.value == "default") {
|
|
pieceSize_value = document.board.pieceSize.value;
|
|
iframeUrl += "&ss=" + squareSize_value + "&ps=" + pieceSize_value.charAt(0) + "&pf=" + pieceFont_value.charAt(0);
|
|
} else {
|
|
pieceSize_value = parseInt(document.board.pieceSize.value, 10);
|
|
if (pieceSize_value > squareSize_value) { alert("error: the piece size (" + pieceSize_value + ") can not be bigger than the square size (" + squareSize_value + ")"); }
|
|
iframeUrl += "&ss=" + squareSize_value + "&ps=" + pieceSize_value + "&pf=" + pieceFont_value.charAt(0);
|
|
}
|
|
|
|
lightColorHex_value = document.board.lightColorHex.value;
|
|
iframeUrl += "&lcs=" + hex2sex(lightColorHex_value);
|
|
darkColorHex_value = document.board.darkColorHex.value;
|
|
iframeUrl += "&dcs=" + hex2sex(darkColorHex_value);
|
|
boardBorderColorHex_value = document.board.boardBorderColorHex.value;
|
|
iframeUrl += "&bbcs=" + hex2sex(boardBorderColorHex_value);
|
|
boardShadowColorHex_value = document.board.boardShadowColorHex.value;
|
|
if (boardShadowColorHex_value != "transparent") {
|
|
if (boardShadowColorHex_value == "border") { iframeUrl += "&bscs=b"; }
|
|
else { iframeUrl += "&bscs=" + hex2sex(boardShadowColorHex_value); }
|
|
}
|
|
|
|
highlightMode_value = document.board.highlightMode.value;
|
|
iframeUrl += "&hm=" + highlightMode_value.charAt(0);
|
|
highlightColorHex_value = document.board.highlightColorHex.value;
|
|
iframeUrl += "&hcs=" + hex2sex(highlightColorHex_value);
|
|
|
|
buttonsDisplay_value = document.board.buttonsDisplay.value;
|
|
iframeUrl += "&bd=" + buttonsDisplay_value.charAt(0);
|
|
|
|
if ((document.board.buttonsDisplay.value != "hidden") && (document.board.controlBackgroundColorHex.value != "default")) {
|
|
controlBackgroundColorHex_value = document.board.controlBackgroundColorHex.value;
|
|
iframeUrl += "&cbcs=" + hex2sex(controlBackgroundColorHex_value);
|
|
controlTextColorHex_value = document.board.controlTextColorHex.value;
|
|
iframeUrl += "&ctcs=" + hex2sex(controlTextColorHex_value);
|
|
}
|
|
|
|
headerDisplay_value = document.board.headerDisplay.value;
|
|
iframeUrl += "&hd=" + headerDisplay_value.charAt(0);
|
|
movesDisplay_value = document.board.movesDisplay.value;
|
|
iframeUrl += "&md=" + movesDisplay_value.charAt(0);
|
|
|
|
if ((document.board.headerDisplay.value != "hidden") || (document.board.movesDisplay.value != "hidden")) {
|
|
textMargin_value = parseInt(document.board.textMargin.value, 10);
|
|
iframeUrl += "&tm=" + textMargin_value;
|
|
}
|
|
|
|
if (document.board.headerDisplay.value != "hidden") {
|
|
|
|
fontHeaderColorHex_value = document.board.fontHeaderColorHex.value;
|
|
iframeUrl += "&fhcs=" + hex2sex(fontHeaderColorHex_value);
|
|
|
|
fontHeaderSize_value = document.board.fontHeaderSize.value;
|
|
iframeUrl += "&fhs=" + percentFixForUrl( fontHeaderSize_value );
|
|
|
|
}
|
|
|
|
if ((document.board.movesDisplay.value != "hidden") || (document.board.headerDisplay.value == "live") || (document.board.headerDisplay.value == "variations")) {
|
|
|
|
fontMovesColorHex_value = document.board.fontMovesColorHex.value;
|
|
iframeUrl += "&fmcs=" + hex2sex(fontMovesColorHex_value);
|
|
fontCommentsColorHex_value = document.board.fontCommentsColorHex.value;
|
|
iframeUrl += "&fccs=" + hex2sex(fontCommentsColorHex_value);
|
|
fontVariationsColorHex_value = document.board.fontVariationsColorHex.value;
|
|
if (fontVariationsColorHex_value != "comments") {
|
|
iframeUrl += "&fvcs=" + hex2sex(fontVariationsColorHex_value);
|
|
}
|
|
highlightMoveColorHex_value = document.board.highlightMoveColorHex.value;
|
|
if (highlightMoveColorHex_value == "background" ) { iframeUrl += "&hmcs=b"; }
|
|
else { iframeUrl += "&hmcs=" + hex2sex(highlightMoveColorHex_value); }
|
|
|
|
fontMovesSize_value = document.board.fontMovesSize.value;
|
|
iframeUrl += "&fms=" + percentFixForUrl( fontMovesSize_value );
|
|
fontCommentsSize_value = document.board.fontCommentsSize.value;
|
|
if (fontCommentsSize_value == "moves") { iframeUrl += "&fcs=m"; }
|
|
else { iframeUrl += "&fcs=" + percentFixForUrl( fontCommentsSize_value ); }
|
|
fontVariationsSize_value = document.board.fontVariationsSize.value;
|
|
if (fontVariationsSize_value != "comments") {
|
|
iframeUrl += "&fvs=" + percentFixForUrl( fontVariationsSize_value );
|
|
}
|
|
|
|
commentsDisplay_value = document.board.commentsDisplay.value;
|
|
iframeUrl += "&cd=" + commentsDisplay_value.charAt(0);
|
|
|
|
}
|
|
|
|
backgroundColorHex_value = document.board.backgroundColorHex.value;
|
|
if (backgroundColorHex_value == "transparent") {
|
|
iframeUrl += "&bcs=" + backgroundColorHex_value.charAt(0);
|
|
} else {
|
|
iframeUrl += "&bcs=" + hex2sex(backgroundColorHex_value);
|
|
}
|
|
|
|
// this does not go in the iframe
|
|
previewBackgroundColorHex_value = document.board.previewBackgroundColorHex.value;
|
|
|
|
framePadding_value = parseInt(document.board.framePadding.value, 10);
|
|
iframeUrl += "&fp=" + framePadding_value;
|
|
|
|
horizontalLayout_value = document.board.horizontalLayout.value;
|
|
iframeUrl += "&hl=" + horizontalLayout_value;
|
|
|
|
update_suggested_iframe_dimensions();
|
|
|
|
if ((frameHeight_value = document.board.frameHeight.value) === "") { frameHeight_value = suggested_frameHeight; }
|
|
if ((frameWidth_value = document.board.frameWidth.value) === "") { frameWidth_value = suggested_frameWidth; }
|
|
|
|
if (frameHeight_value == "board") {
|
|
iframeUrl += "&fh=" + frameHeight_value.charAt(0);
|
|
} else {
|
|
iframeUrl += "&fh=" + frameHeight_value;
|
|
}
|
|
if ((frameWidth_value == "page") || (frameWidth_value == "board")) {
|
|
iframeUrl += "&fw=" + frameWidth_value.charAt(0);
|
|
} else {
|
|
iframeUrl += "&fw=" + frameWidth_value;
|
|
}
|
|
|
|
pgnText_value = pgnTextFixFromInput(document.getElementById('pgnText').value);
|
|
if (document.board.useTextarea.checked) {
|
|
pgnId = "pgn4web_" + printHex(crc32(pgnText_value));
|
|
iframeUrl += "&pi=" + pgnId;
|
|
} else {
|
|
if ((document.board.encodePgn.checked) && (pgnText_value != previousPgnTextToEncode)) {
|
|
previousPgnTextToEncode = pgnText_value;
|
|
pgnTextEncoded = EncodePGN(pgnText_value.replace(/\r\n/g,'\n'));
|
|
}
|
|
if (document.board.encodePgn.checked) { iframeUrl += "&pe=" + pgnTextEncoded; }
|
|
else { iframeUrl += "&pt=" + pgnTextFixForUrl(pgnText_value.replace(/\r\n/g,'\n')); }
|
|
}
|
|
|
|
// every parameter had an &xxx= format,now we need to remove the first &
|
|
iframeUrl = iframeUrl.replace(/\?&/,"?");
|
|
}
|
|
|
|
function pgnTextFixFromInput( text ) {
|
|
|
|
text = fixCommonPgnMistakes(text);
|
|
if (document.board.useTextarea.checked) {
|
|
text = simpleHtmlentities(text);
|
|
} else {
|
|
text = text.replace(/[\u0100-\uFFFF]/g,"*"); // replace all chars with code greather than 255 with *
|
|
}
|
|
return text;
|
|
}
|
|
|
|
function pgnTextFixForUrl( text ) {
|
|
|
|
// escaped lines starting with % are removed till end of line
|
|
text = text.replace(/^%.*$/mg,"");
|
|
// we need everything on a single line, please note this breaks the ";" comment detection leading to threat everything after a ";" as comment
|
|
text = text.replace(/\s/g," ");
|
|
|
|
// some chars dont work well in URLs
|
|
text = text.replace(/%/g,"%25");
|
|
text = text.replace(/#/g,"%23");
|
|
text = text.replace(/&/g,"%26");
|
|
text = text.replace(/\?/g,"%3F");
|
|
|
|
// the "'" char is used in the iframe statement
|
|
text = text.replace(/'/g,"%27");
|
|
|
|
return text;
|
|
}
|
|
|
|
function percentFixForUrl( text ) {
|
|
text += ''; // makes sure text is a string
|
|
return text.replace(/%$/,'p');
|
|
}
|
|
|
|
function percentFixFromUrl( text ) {
|
|
text += ''; // makes sure text is a string
|
|
return text.replace(/pct$/,'%').replace(/p$/,'%'); // 100pct and 100p both mean 100%
|
|
}
|
|
|
|
var html_code_string = "";
|
|
function generate_html_code() {
|
|
var outerFrameWidth, outerFrameHeight;
|
|
|
|
// cleans the short url stuff
|
|
shorturl_link_clean();
|
|
shorturl_window_close();
|
|
html_code_string = "";
|
|
|
|
calculate_html_code();
|
|
|
|
switch (frameWidth_value) {
|
|
case "board":
|
|
outerFrameWidth = min_frameWidth;
|
|
break;
|
|
case "page":
|
|
outerFrameWidth = "100%";
|
|
break;
|
|
default:
|
|
outerFrameWidth = frameWidth_value;
|
|
break;
|
|
}
|
|
|
|
switch (frameHeight_value) {
|
|
case "board":
|
|
outerFrameHeight = min_frameHeight;
|
|
break;
|
|
default:
|
|
outerFrameHeight = frameHeight_value;
|
|
break;
|
|
}
|
|
|
|
if (document.getElementById('useTextarea').checked) {
|
|
html_code_string += "<textarea id='" + pgnId + "' style='display: none;'>\n\n" + pgnText_value + "\n\n</textarea>\n\n";
|
|
}
|
|
html_code_string += "<iframe height='" + outerFrameHeight + "' width='" + outerFrameWidth + "' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'";
|
|
if (document.getElementById('backgroundColorHex').value == 'transparent') {
|
|
html_code_string += " allowtransparency='true'";
|
|
}
|
|
html_code_string += " src='" + iframeUrl.replace(/&/g, '&') + "'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>";
|
|
|
|
document.getElementById('html_code').value = html_code_string;
|
|
|
|
boardUrl_value = document.board.boardUrl.value;
|
|
var thisBookmarkUrl = iframeUrl;
|
|
thisBookmarkUrl = thisBookmarkUrl.replace(boardUrl_value, pgn4web_generator_url);
|
|
thisBookmarkUrl = thisBookmarkUrl.replace(/&(pe|pt)=.*(&|$)/,"");
|
|
|
|
if (document.getElementById('encodePgn').checked) { encodePgn_value = "t"; }
|
|
else { encodePgn_value = "f"; }
|
|
if (encodePgn_value != encodePgn_default) { thisBookmarkUrl += "&ep=" + encodePgn_value; }
|
|
|
|
if (boardUrl_value != boardUrl_default) { thisBookmarkUrl += "&bu=" + boardUrl_value; }
|
|
|
|
if (document.getElementById('useTextarea').checked) { useTextarea_value = "t"; }
|
|
else { useTextarea_value = "f"; }
|
|
if (useTextarea_value != useTextarea_default) { thisBookmarkUrl += "&ut=" + useTextarea_value; }
|
|
|
|
previewBackgroundColorHex_value = document.board.previewBackgroundColorHex.value;
|
|
if (previewBackgroundColorHex_value != previewBackgroundColorHex_default) {
|
|
thisBookmarkUrl += "&pbcs=" + hex2sex(previewBackgroundColorHex_value);
|
|
}
|
|
|
|
if ((gup("extendedOptions") == "true") || (gup("extendedOptions") == "t")) {
|
|
thisBookmarkUrl += "&eo=t";
|
|
}
|
|
|
|
document.getElementById('thisConfigBookmark').href = thisBookmarkUrl;
|
|
var thisBookmarkCrc32 = printHex(crc32(thisBookmarkUrl));
|
|
document.getElementById('thisConfigBookmark').title = "right-click, copy and save pgn4web board generator custom template link #" + thisBookmarkCrc32;
|
|
document.getElementById('bookmarkCrc32').innerHTML = "#" + thisBookmarkCrc32;
|
|
|
|
document.getElementById('preview').innerHTML = "<table border='0' bgcolor='#" + previewBackgroundColorHex_value + "' width='100%' cellpadding='25'><tr><td align='center' valign='middle'> " + html_code_string + "</td></tr></table>";
|
|
|
|
var html_code_status_string = "<table width='100%' cellspacing='0' cellpadding='0'><tr><td align='left' valign='top'>";
|
|
if (iframeUrl.length <= iframeUrl_max) {
|
|
html_code_status_string += "<span class='helptext'>HTML code ready to cut and paste in your web page or blog</span>";
|
|
} else {
|
|
html_code_status_string += "<a class='helptext' style='color: red; font-weight: bold; text-decoration: none;' href='#pgn_form' onclick='if (confirm(\"board-generator error\\n\\nthe generated iFrame URL is \" + iframeUrl.length + \" chars long and exceeds the " + iframeUrl_max + " chars max URL length limit as enforced by some web browsers and by some web servers\\n\\neven if the chessboard looks properly in the preview window below, some users will not view the chessboard as intended\\n\\nthe URL length needs to be reduced within the allowed \" + iframeUrl_max + \" chars limit by shortening the input PGN data in the green textbox below and generating an updated iFrame URL\\n\\nclick OK to reach the green textbox with the PGN data to be shortened\")) { document.location.hash = \"#pgn_form\"; }; return false;' title='click here for more info'>error: " + iframeUrl.length + " chars URL exceeds " + iframeUrl_max + " chars limit, please shorten the PGN data; click here for more info</a>";
|
|
}
|
|
html_code_status_string += "</td><td align=right valign=top>";
|
|
html_code_status_string += "<span class='helptext'> " + document.getElementById('pgnText').value.replace(/\r\n/g,'\n').length + "p";
|
|
if (document.board.encodePgn.checked) { html_code_status_string += " " + pgnTextEncoded.length + "e"; }
|
|
html_code_status_string += " " + iframeUrl.length + "u</span>";
|
|
|
|
html_code_status_string += "</td></tr></table>";
|
|
document.getElementById('html_code_status').innerHTML = html_code_status_string;
|
|
|
|
if (firstLoad) { firstLoad = false; return; }
|
|
if (iframeUrl.length <= iframeUrl_max) { location.href='#game_preview'; return; }
|
|
location.href='#generate'; return;
|
|
}
|
|
|
|
function validate_color(object, name, def) {
|
|
if (object.value.match(/^[0-9A-Fa-f]{6}$/)) {
|
|
return true;
|
|
} else {
|
|
alert('error: the ' + name + ' must be a six digits hexadecimal color code, like FF0000');
|
|
object.color.fromString(def);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_highlightMoveColorHex() {
|
|
object = document.getElementById('highlightMoveColorHex');
|
|
if (object.value == 'background') { return true; }
|
|
if (object.value.match(/^[0-9A-Fa-f]{6}$/)) {
|
|
return true;
|
|
} else {
|
|
alert('error: the move highlight color must be \'background\' or a six digits hexadecimal color code, like FF0000');
|
|
if (highlightMoveColorHex_default == 'background') { object.value = highlightMoveColorHex_default; }
|
|
else { object.color.fromString(highlightMoveColorHex_default); }
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_boardShadowColorHex() {
|
|
object = document.getElementById('boardShadowColorHex');
|
|
if (object.value == 'transparent') { return true; }
|
|
if (object.value == 'border') { return true; }
|
|
if (object.value.match(/^[0-9A-Fa-f]{6}$/)) {
|
|
return true;
|
|
} else {
|
|
alert('error: the board shadow color must be \'transparent\' or \'border\' or a six digits hexadecimal color code, like FF0000');
|
|
if ((boardShadowColorHex_default == 'transparent') || (boardShadowColorHex_default == 'border')) {
|
|
object.value = boardShadowColorHex_default;
|
|
} else { object.color.fromString(boardShadowColorHex_default); }
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_fontVariationsColorHex() {
|
|
object = document.getElementById('fontVariationsColorHex');
|
|
if (object.value == 'comments') { return true; }
|
|
if (object.value.match(/^[0-9A-Fa-f]{6}$/)) {
|
|
return true;
|
|
} else {
|
|
alert('error: the font variations color must be \'comments\' or a six digits hexadecimal color code, like FF0000');
|
|
if (fontVariationsColorHex_default == 'comments') {
|
|
object.value = fontVariationsColorHex_default;
|
|
} else { object.color.fromString(fontVariationsColorHex_default); }
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_backgroundColorHex() {
|
|
object = document.getElementById('backgroundColorHex');
|
|
if (object.value == 'transparent') { return true; }
|
|
if (object.value.match(/^[0-9A-Fa-f]{6}$/)) {
|
|
return true;
|
|
} else {
|
|
alert('error: the move highlight color must be \'transparent\' or a six digits hexadecimal color code, like FF0000');
|
|
if (backgroundColorHex_default == 'transparent') { object.value = backgroundColorHex_default; }
|
|
else { object.color.fromString(backgroundColorHex_default); }
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_number(object, name, def) {
|
|
var vv = object.value.match(/^([0-9]+)(px$|$)/);
|
|
if (vv) {
|
|
object.value = vv[1];
|
|
return true;
|
|
} else {
|
|
alert('error: the ' + name + ' must be a non negative integer');
|
|
object.value = def;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_number_blank(object, name, def) {
|
|
if (object.value === "") { return true; }
|
|
var vv = object.value.match(/^([0-9]+)(px$|$)/);
|
|
if (vv) {
|
|
object.value = vv[1];
|
|
return true;
|
|
} else {
|
|
alert('error: the ' + name + ' must be blank or a non negative integer');
|
|
object.value = def;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_number_percentage(object, name, def) {
|
|
var vv = object.value.match(/^([0-9]+)(%$|p$|pct$|px$|$)/);
|
|
if (vv) {
|
|
if (vv[2] == "px") { object.value = vv[1]; }
|
|
return true;
|
|
} else {
|
|
alert('error: the ' + name + ' must be a non negative integer or percentage');
|
|
object.value = def;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_number_percentage_blank(object, name, def) {
|
|
if (object.value === "") { return true; }
|
|
var vv = object.value.match(/^([0-9]+)(%$|p$|pct$|px$|$)/);
|
|
if (vv) {
|
|
if (vv[2] == "px") { object.value = vv[1]; }
|
|
return true;
|
|
} else {
|
|
alert('error: the ' + name + ' must be blank or a non negative integer or percentage');
|
|
object.value = def;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_fontCommentsSize() {
|
|
var object = document.getElementById('fontCommentsSize');
|
|
if (object.value == "moves") { return true; }
|
|
var vv = object.value.match(/^([0-9]+)(%$|p$|pct$|px$|$)/);
|
|
if (vv) {
|
|
if (vv[2] == "px") { object.value = vv[1]; }
|
|
return true;
|
|
} else {
|
|
alert('error: the comments font size must be \'moves\' or a non integer number or (deprecated) a percentage');
|
|
object.value = fontCommentsSize_default;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_fontVariationsSize() {
|
|
var object = document.getElementById('fontVariationsSize');
|
|
if (object.value == "comments") { return true; }
|
|
var vv = object.value.match(/^([0-9]+)(%$|p$|pct$|px$|$)/);
|
|
if (vv) {
|
|
if (vv[2] == "px") { object.value = vv[1]; }
|
|
return true;
|
|
} else {
|
|
alert('error: the variations font size must be \'comments\' or a non integer number or (deprecated) a percentage');
|
|
object.value = fontVariationsSize_default;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_frameWidth() {
|
|
var object = document.getElementById('frameWidth');
|
|
if (object.value === '') { return true; }
|
|
if ((object.value == 'board') && (document.getElementById('horizontalLayout').value == "f")) { return true; }
|
|
if (object.value == 'page') { return true; }
|
|
var vv = object.value.match(/^([0-9]+)(px$|$)/);
|
|
if (vv) {
|
|
object.value = vv[1];
|
|
return true;
|
|
} else {
|
|
if (document.getElementById('horizontalLayout').value == "t") {
|
|
alert('error: in the horizontal layout the iFrame width must be a non negative integer or \'page\'');
|
|
} else {
|
|
alert('error: in the vertical layout the iFrame width must be a non negative integer, \'board\' or \'page\'');
|
|
}
|
|
object.value = "";
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_frameHeight() {
|
|
var object = document.getElementById('frameHeight');
|
|
if (object.value === '') { return true; }
|
|
if ((object.value == 'board') && (document.getElementById('horizontalLayout').value == "t")) { return true; }
|
|
var vv = object.value.match(/^([0-9]+)(px$|$)/);
|
|
if (vv) {
|
|
object.value = vv[1];
|
|
return true;
|
|
} else {
|
|
if (document.getElementById('horizontalLayout').value == "t") {
|
|
alert('error: in the horizontal layout the iFrame height must be a non negative integer or \'board\'');
|
|
} else {
|
|
alert('error: in the vertical layout the iFrame height must be a non negative integer');
|
|
}
|
|
object.value = "";
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function validate_ss_ps_hm() {
|
|
var retVal = true, maxPieceSize;
|
|
var minSquareSize = (document.getElementById('highlightMode').value == 'border') ? 22 : 20;
|
|
if (document.getElementById('squareSize').value < minSquareSize) {
|
|
alert('error: square size must be at least ' + minSquareSize +
|
|
', resetting to ' + minSquareSize +
|
|
'\n' + '(squareSize=' + document.getElementById('squareSize').value +
|
|
' pieceSize=' + document.getElementById('pieceSize').value +
|
|
' highlightMode=' + document.getElementById('highlightMode').value + ')');
|
|
document.getElementById('squareSize').value = minSquareSize;
|
|
retVal = false;
|
|
}
|
|
if (document.getElementById('pieceSize').value != "default") {
|
|
if (document.getElementById('highlightMode').value == "border") {
|
|
maxPieceSize = document.getElementById('squareSize').value -
|
|
2 * Math.floor(0.05 * document.getElementById('squareSize').value);
|
|
} else {
|
|
maxPieceSize = document.getElementById('squareSize').value;
|
|
}
|
|
if (document.getElementById('pieceSize').value > maxPieceSize) {
|
|
alert('error: piece size must be no bigger than ' + maxPieceSize +
|
|
', resetting to default' +
|
|
'\n' + '(squareSize=' + document.getElementById('squareSize').value +
|
|
' pieceSize=' + document.getElementById('pieceSize').value +
|
|
' highlightMode=' + document.getElementById('highlightMode').value + ')');
|
|
document.getElementById('pieceSize').value = "default";
|
|
retVal = false;
|
|
}
|
|
}
|
|
return retVal;
|
|
}
|
|
|
|
function validate_useTextarea() {
|
|
if ((!document.board.useTextarea.checked) && (document.board.fontVariationsSize.value != "comments")) {
|
|
alert("warning: when use text area is disabled, font variations size defaults to 'comments'");
|
|
document.board.fontVariationsSize.value = "comments";
|
|
}
|
|
if ((!document.board.useTextarea.checked) && (document.board.fontVariationsColorHex.value != "comments")) {
|
|
alert("warning: when use text area is disabled, font variations color defaults to 'comments'");
|
|
document.board.fontVariationsColorHex.color.fromString("FFFFFF");
|
|
document.board.fontVariationsColorHex.value = "comments";
|
|
}
|
|
}
|
|
|
|
function checkInitialHalfmove() {
|
|
var retVal = false;
|
|
initialHalfmove_value = document.board.initialHalfmove.value;
|
|
switch (initialHalfmove_value) {
|
|
case "":
|
|
case "start":
|
|
case "end":
|
|
case "random":
|
|
case "comment":
|
|
case "variation":
|
|
document.board.initialHalfmoveSelect.value = document.board.initialHalfmove.value;
|
|
document.board.initialHalfmoveNumber.value = initialHalfmoveNumber_default;
|
|
retVal = true;
|
|
break;
|
|
default:
|
|
if (initialHalfmove_value.match(/^[+-]?[0-9]+$/)) {
|
|
document.board.initialHalfmoveSelect.value = "number";
|
|
document.board.initialHalfmoveNumber.value = initialHalfmove_value;
|
|
retVal = true;
|
|
} else {
|
|
alert("error: initial halfmove (as URL parameter) must be either a number or 'start', 'end', 'random', 'comment', 'variation' or their initials");
|
|
document.board.initialHalfmove.value = initialHalfmove_value = initialHalfmove_default;
|
|
document.board.initialHalfmoveSelect.value = initialHalfmoveSelect_default;
|
|
document.board.initialHalfmoveNumber.value = initialHalfmoveNumber_default;
|
|
}
|
|
break;
|
|
}
|
|
document.board.initialHalfmoveNumber.disabled = (document.board.initialHalfmoveSelect.value != "number");
|
|
return retVal;
|
|
}
|
|
|
|
function setInitialHalfmove() {
|
|
if (document.board.initialHalfmoveSelect.value == "number") {
|
|
document.board.initialHalfmoveNumber.disabled = false;
|
|
if (document.board.initialHalfmoveNumber.value === "") { document.board.initialHalfmoveNumber.value = 0; }
|
|
if (document.board.initialHalfmoveNumber.value.match(/^[+-]?[0-9]+$/)) {
|
|
document.board.initialHalfmove.value = initialHalfmove_value = document.board.initialHalfmoveNumber.value;
|
|
} else {
|
|
alert("error: initial halfmove number must be an integer");
|
|
document.board.initialHalfmove.value = initialHalfmove_value = document.board.initialHalfmoveNumber.value = initialHalfmoveNumber_default;
|
|
}
|
|
} else {
|
|
document.board.initialHalfmoveNumber.disabled = true;
|
|
document.board.initialHalfmove.value = initialHalfmove_value = document.board.initialHalfmoveSelect.value;
|
|
}
|
|
}
|
|
|
|
function add_option(selectObject, newText, newValue) {
|
|
var newOpt = document.createElement('option');
|
|
newOpt.text = newText;
|
|
newOpt.value = newValue;
|
|
try { selectObject.add(newOpt, null); } // any decent browser
|
|
catch(e) { selectObject.add(newOpt); } // IE only
|
|
}
|
|
|
|
// template patterns
|
|
var common_template = "?am=l&d=3000&fh=&fw=";
|
|
|
|
// color template array (description, general settings, highlight square color, highlight border color);
|
|
var color_template = new Array();
|
|
color_template[0] = new Array("blue ", "&lcs=VdyD&dcs=LHCg&bbcs=LHCg&bd=c&cbcs=PYGy&ctcs=l4It&fhcs=$$$$&fmcs=$$$$&fccs=v71$&hmcs=M___&bcs=VdyD", "&hcs=QtmS", "&hcs=s8pI");
|
|
color_template[1] = new Array("brown", "&lcs=XItn&dcs=NpQK&bbcs=NpQK&bd=c&cbcs=__iz&ctcs=NpQK&fhcs=k03b&fmcs=k03b&fccs=DRYC&hmcs=__X$&bcs=____", "&hcs=MWVi", "&hcs=__X$");
|
|
color_template[2] = new Array("gray ", "&lcs=YeiP&dcs=Qcij&bbcs=D91v&bscs=Lb2$&bd=s&cbcs=YeiP&ctcs=$$$$&fhcs=$$$$&fmcs=$$$$&fccs=v71$&hmcs=Qcij&bcs=____", "&hcs=Udiz", "&hcs=s6gP");
|
|
color_template[3] = new Array("green", "&lcs=W_iH&dcs=MHW2&bbcs=MHW2&bd=c&cbcs=UtKy&ctcs=x7x7&fhcs=g3g3&fmcs=7x7x&fccs=v71$&hmcs=RKim&bcs=W_iH", "&hcs=RKim", "&hcs=waRy");
|
|
color_template[4] = new Array("pink ", "&lcs=Wtyk&dcs=OXJO&bbcs=OXJO&bd=c&cbcs=UJ2e&ctcs=nkYj&fhcs=nkYi&fmcs=nkYi&fccs=DoRa&hmcs=ZbNv&bcs=Wtyk", "&hcs=UIFV", "&hcs=ZbNv");
|
|
color_template[5] = new Array("wood ", "&lcs=_XNo&dcs=O8AB&bbcs=O8AB&bscs=b&bd=s&cbcs=YeiP&ctcs=$$$$&fhcs=$$$$&fmcs=$$$$&fccs=v71$&hmcs=_XNo&bcs=____", "&hcs=r4fT", "&hcs=r4fT");
|
|
|
|
// size template array
|
|
var size_template = new Array();
|
|
size_template[0] = new Array("small ", "&ss=26&ps=d&pf=d&hm=s&tm=13&fhs=14&fms=14&fcs=m&fp=13");
|
|
size_template[1] = new Array("medium", "&ss=36&ps=d&pf=d&hm=s&tm=18&fhs=16&fms=16&fcs=m&fp=18");
|
|
size_template[2] = new Array("large ", "&ss=50&ps=d&pf=d&hm=b&tm=25&fhs=19&fms=19&fcs=m&fp=25");
|
|
|
|
// layout template array
|
|
var layout_template = new Array();
|
|
layout_template[0] = new Array("vertical ", "&hl=f&hd=c&md=f&cd=i");
|
|
layout_template[1] = new Array("horizontal", "&hl=t&hd=j&md=f&cd=i");
|
|
|
|
function load_templates() {
|
|
|
|
var theObj = document.getElementById('templatesList');
|
|
|
|
for (var cc=0; cc<color_template.length; cc++) {
|
|
for (var ss=0; ss<size_template.length; ss++) {
|
|
for (var ll=0; ll<layout_template.length; ll++) {
|
|
var template_text = "";
|
|
template_text += color_template[cc][0] + " ";
|
|
template_text += size_template[ss][0] + " ";
|
|
template_text += layout_template[ll][0] + " ";
|
|
template_text += "template";
|
|
// replace spaces with (ascii code 160)
|
|
template_text = template_text.replace(/ /g,String.fromCharCode(160));
|
|
var template_value = common_template;
|
|
template_value += layout_template[ll][1];
|
|
template_value += size_template[ss][1];
|
|
template_value += color_template[cc][1];
|
|
template_value += template_value.match("&hm=b") ? color_template[cc][3] : color_template[cc][2];
|
|
if (color_template[cc][0].match("(gray|wood)")) {
|
|
template_value = template_value.replace(/hm=(s|b)/,"hm=n");
|
|
}
|
|
add_option(theObj, template_text, template_value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function template_selected() {
|
|
if (document.getElementById('templatesList').value == "heading") { return; }
|
|
|
|
var selectedIndex = document.getElementById('templatesList').value == "random" ?
|
|
3 + Math.floor((document.getElementById('templatesList').length - 3) * Math.random()) :
|
|
document.getElementById('templatesList').selectedIndex;
|
|
|
|
if (confirm("do you really want to load the selected board generator template?" +
|
|
"\n\n" + document.getElementById('templatesList').options[selectedIndex].text +
|
|
"\n\nAll your settings besides the PGN text might be lost!")) {
|
|
|
|
var newLocationSearch = document.getElementById('templatesList').options[selectedIndex].value;
|
|
|
|
if (( document.getElementById('useTextarea').checked && (useTextarea_default != "t")) ||
|
|
(!document.getElementById('useTextarea').checked && (useTextarea_default != "f")) ) {
|
|
newLocationSearch += "&ut=" + (document.board.useTextarea.checked ? "t" : "f");
|
|
}
|
|
|
|
if (( document.getElementById('encodePgn').checked && (encodePgn_default != "t")) ||
|
|
(!document.getElementById('encodePgn').checked && (encodePgn_default != "f")) ) {
|
|
newLocationSearch += "&ep=" + (document.board.encodePgn.checked ? "t" : "f");
|
|
}
|
|
|
|
if (document.board.boardUrl.value != boardUrl_default) {
|
|
newLocationSearch += "&bu=" + document.board.boardUrl.value;
|
|
}
|
|
|
|
if ((gup("extendedOptions") == "true") || (gup("extendedOptions") == "t")) {
|
|
newLocationSearch += "&eo=t";
|
|
}
|
|
|
|
pgnText_value = document.getElementById('pgnText').value;
|
|
if ((document.board.encodePgn.checked) && (pgnText_value != previousPgnTextToEncode)) {
|
|
previousPgnTextToEncode = pgnText_value;
|
|
pgnTextEncoded = EncodePGN(pgnText_value);
|
|
}
|
|
newLocationSearch += document.board.encodePgn.checked ?
|
|
"&pe=" + pgnTextEncoded :
|
|
"&pt=" + pgnTextFixForUrl(pgnText_value);
|
|
newLocationSearch = newLocationSearch.replace(/^&/,"\?");
|
|
|
|
shorturl_window_close();
|
|
if (newLocationSearch != location.search) {
|
|
location.href = location.pathname + newLocationSearch + "#game_preview";
|
|
} else {
|
|
location.reload(true);
|
|
location.hash = "#game_preview";
|
|
}
|
|
}
|
|
document.getElementById('templatesList').value = "heading";
|
|
}
|
|
|
|
function oneClickPuzzleSetup() {
|
|
if (confirm("the one click optimized puzzle setup will set\n \nmoves display to 'puzzle'\nheader display to 'variations'\nbuttons display to 'none'\nautoplay mode to 'none'\n \nproceed?")) {
|
|
document.board.movesDisplay.value = movesDisplay_value = "puzzle";
|
|
document.board.headerDisplay.value = headerDisplay_value = "variations";
|
|
document.board.buttonsDisplay.value = buttonsDisplay_value = "hidden";
|
|
document.board.autoplayMode.value = autoplayMode_value = "none";
|
|
}
|
|
}
|
|
|
|
var sexEncodingCharSet = "$0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_";
|
|
|
|
function sex2hex(sex, name) {
|
|
if (sex === "") { return ""; }
|
|
if (!sex.match(/^[0-9a-zA-z_\$]{4}$/)) {
|
|
alert('error: the ' + name + ' must be a 4 digits color code in the proprietary format, like _L$$');
|
|
return "";
|
|
}
|
|
sex += "";
|
|
var dec = 0;
|
|
var cnt;
|
|
for (cnt=0; cnt<sex.length; cnt++) {
|
|
dec <<= 6;
|
|
dec += sexEncodingCharSet.indexOf(sex.charAt(cnt));
|
|
}
|
|
var hex = dec.toString(16).toUpperCase() + "";
|
|
while (hex.length < 6) { hex = "0" + hex; }
|
|
return hex;
|
|
}
|
|
|
|
function hex2sex(hex) {
|
|
var sex = "";
|
|
var dec = parseInt(hex,16);
|
|
while (dec>0) {
|
|
sex = sexEncodingCharSet.charAt(dec % 64) + sex;
|
|
dec >>= 6;
|
|
}
|
|
while (sex.length < 4) { sex = sexEncodingCharSet.charAt(0) + sex; }
|
|
return sex;
|
|
}
|
|
|
|
var bugWin=null;
|
|
function bug_report() {
|
|
var email = pgn4web_project_email;
|
|
var subject = "pgn4web board generator bug report";
|
|
var bug_info = "pgn4web board generator bug report\n\n-------- automatically generated debug info: start --------\n\ndate: " + (new Date()).toUTCString() + "\n\nURL: " + window.location + "\n\nuser agent: " + window.navigator.userAgent+ "\n\npgn4web version: " + pgn4web_version + "\n\niFrame HTML code:\n\n" + html_code_string + "\n\nPGN input:\n\n" + document.getElementById('pgnText').value + "\n\n-------- automatically generated debug info: end --------\n\nPlease add below a description of the bug and attach a screenshot if possible.\n\n\n";
|
|
var mailto_link = 'mailto:' + email + '?subject=' + subject + '&body=' + escape(bug_info);
|
|
|
|
if (bugWin && !bugWin.closed) { bugWin.close(); }
|
|
bugWin = window.open("", "pgn4web_bug_report", "resizable=yes,scrollbars=yes,toolbar=no,location=no,menubar=no,status=no");
|
|
if (bugWin !== null) {
|
|
bugWin.document.open("text/html", "replace");
|
|
bugWin.document.write("<html>");
|
|
bugWin.document.write("<head><title>pgn4web board generator bug report</title><link rel='shortcut icon' href='pawn.ico' /><style type='text/css'> html, body { font-family: sans-serif; color: black; background: white; padding: 10px; } a {text-decoration: none; color: black; } </style></head>");
|
|
bugWin.document.write("<body style='text-align: justify;'>");
|
|
bugWin.document.write("<h1 style='margin-top:0px; padding-top:0px; text-align:right;'><span style='float:left; color:black;'>pgn4web board generator bug report</span><span style='width:49px; height:29px; background:url(pawns.png) -47px -15px; vertical-align:baseline; display:inline-block;'></span></h1><div style='height:1em;'></div>Please make sure that:<ul type='square'><li>you are using the same web browser where you noticed the bug in the pgn4web board generator</li><li>you opened this bug report window from the pgn4web board generator page configured with all the parameter that result in the bug condition</li></ul>Then please email ALL the the debug information below and possibly a screenshot to <i><a href=mailto:" + pgn4web_project_email + ">" + pgn4web_project_email + "</a></i> (if your email client is properly configured, you can try to <i><a href='" + mailto_link + "'>click here and automatically compose the email in your default client</a></i>)<p></p><br/>");
|
|
bugWin.document.write("<div style='background: #F4F4F4; scrollbar-base-color: #F4F4F4; padding: 20px; overflow: auto;'><pre><code>" + simpleHtmlentities(bug_info) + "</code></pre></div>");
|
|
bugWin.document.write("</body>");
|
|
bugWin.document.write("<html>");
|
|
bugWin.document.close();
|
|
if (window.focus) { bugWin.focus(); }
|
|
}
|
|
}
|
|
|
|
function print_menu( item, level, title ) {
|
|
var menu = '<div style="height:1em;">';
|
|
if (item) { menu += '<a name=' + item + '> </a>'; }
|
|
menu += '</div>';
|
|
menu += '<table width=100% cellspacing=0 cellpadding=0><tr><td td valign=middle align=left>';
|
|
if (title) { menu += '<h' + level + '>' + title + '</h' + level + '>'; }
|
|
menu += '</td><td valign=top align=right>';
|
|
menu += '<div style="font-size: 70%;">';
|
|
menu += '<a href=#top>instructions</a>';
|
|
menu += '<br>';
|
|
menu += ' <span style="color:gray">actions:</span>';
|
|
menu += ' <a href=#generate>copy output</a>';
|
|
menu += ' <a href=#game_preview>preview</a>';
|
|
menu += ' <a href="javascript:generate_html_code()">generate</a>';
|
|
menu += '<br>';
|
|
menu += ' <span style="color:gray">config:</span>';
|
|
menu += ' <a href=#pgn_form>PGN</a>';
|
|
menu += ' <a href=#templates>templates</a>';
|
|
menu += ' <a href=#replay_options>replay</a>';
|
|
menu += ' <a href=#board_options>board</a>';
|
|
menu += ' <a href=#header_moves_options>header and moves</a>';
|
|
menu += ' <a href=#page_options>page</a>';
|
|
menu += '<span class="extendedOption"> <a href=#url_options>URL</a></span>';
|
|
menu += '</div>';
|
|
menu += '</td></tr></table>';
|
|
document.write(menu);
|
|
}
|
|
|
|
var firstLoad = true;
|
|
window.onload = new_onLoad;
|
|
|
|
</script>
|
|
|
|
<h1 style="text-align:right;">
|
|
<span style="float:left; color:red;">
|
|
pgn4web board generator
|
|
</span>
|
|
<a href="." onfocus="this.blur();" style="width:49px; height:29px; background:url(pawns.png) -47px -15px; vertical-align:baseline; display:inline-block;"></a>
|
|
</h1>
|
|
|
|
<div style="height: 1em"></div>
|
|
<script type="text/javascript">print_menu("instructions", 2, "instructions");</script>
|
|
|
|
<ul type="square" style="text-align: justify; font-size: smaller;">
|
|
|
|
<li>
|
|
<a href=#pgn_form><b>enter your PGN text</b> in the green textbox below</a>
|
|
<ul type="square">
|
|
<li>keep PGN data short: due to a limitation of web browsers and web servers with the URL length, only short PGN texts are allowed, usually up to four games without comments; an error message shows when the max URL length limit is exceeded, in case try removing unnecessary header tags and comments/variations or try reducing the number of games per chessboard</li>
|
|
<li>by default the PGN data is compressed and encoded, with characters outside the 255 characters ascii set rejected and replaced with stars "*"; this might affect some non English text and names</li>
|
|
<li>in case of errors in the supplied PGN data, the chessboard squares starts flashing at regular intervals to signal the exception; detailed debug information is available clicking the top left chessboard square (A8 assuming White on bottom, H1 otherwise)</li>
|
|
</ul>
|
|
</li>
|
|
<div style="line-height: 0.5em;"> </div>
|
|
|
|
<li>
|
|
<b><a href=#templates>select a predefined settings template</a></b> and/or <b><a href=#replay_options>modify any of the configuration options</a></b>, layout, colors and fonts
|
|
</li>
|
|
<div style="line-height: 0.5em;"> </div>
|
|
|
|
<li>
|
|
<b><a href=#generate>generate the HTML code</a></b> and <b><a href=#game_preview>preview your chessboard</a></b>
|
|
</li>
|
|
<div style="line-height: 0.5em;"> </div>
|
|
|
|
<li>
|
|
<b><a href=#replay_options>fine tune configuration options</a></b> to your liking
|
|
<ul type="square">
|
|
<li><a href=#page_options>check carefully the frame height/width values</a>: different browsers might render some items slightly bigger or smaller, so <a href=#page_options>leave some empty space at the bottom of the frame by increasing the height</a></li>
|
|
</ul>
|
|
</li>
|
|
<div style="line-height: 0.5em;"> </div>
|
|
|
|
<li>
|
|
once happy with <a href=#game_preview>the preview chessboard</a>, just <a href=#generate><b>cut and paste the HTML code</b> from the yellow box</a> into your web page or your blog; when entering the code in your website or blog, please make sure you are using the HTML editing option, otherwise an enhanced editor might alter the code you enter; you can also <a href=#generate><b>generate a short url</b></a> for sharing the board via email, instant messaging or social networking sites
|
|
</li>
|
|
<div style="line-height: 0.5em;"> </div>
|
|
|
|
<li>
|
|
if you plan to reuse similar settings for other chessboards, you can <b><a href=#templates>bookmark a custom template</a></b> into your web browser bookmarks
|
|
</li>
|
|
<div style="line-height: 0.5em;"> </div>
|
|
|
|
<li>
|
|
email to <i><script type="text/javascript">document.write('<a href=mailto:' + pgn4web_project_email + '>' + pgn4web_project_email + '</a>');</script></i> the address of your website or your blog
|
|
</li>
|
|
<div style="line-height: 0.5em;"> </div>
|
|
|
|
<li>
|
|
if something goes wrong, you might want to <i><a href="javascript:bug_report()">click here and file a bug report</a></i>
|
|
</li>
|
|
<div style="line-height: 0.5em;"> </div>
|
|
|
|
<li>
|
|
<b>service availability disclaimer</b>: the pgn4web board generator on this site is intended for chess enthusiasts to easily add chess games with a dynamic chessboard to their personal blogs and websites; this online service is provided on a best effort basis with no guarantee of future availability; if you publish chess games as part of a professional site and need continued server availability and high network performance, you are strongly recommended to evaluate the code from <script type="text/javascript">document.write('<a href=' + pgn4web_project_url + '>the pgn4web site</a>');</script> and install the tool on your own servers; for more details see the board widget generator pages of the pgn4web wiki at <script type="text/javascript">document.write('<a href=' + pgn4web_project_url + '>the pgn4web site</a>');</script>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- hidden elements for the short url generation -->
|
|
|
|
<form id="tinyurl_form_shorturl" action="http://tinyurl.com/create.php" method="post" target="pgn4web_shorturl_window" style="display:inline;">
|
|
<input id="tinyurl_form_shorturl_url" type="hidden" name="url">
|
|
<input id="tinyurl_form_shorturl_alias" type="hidden" name="alias">
|
|
</form>
|
|
|
|
<!-- using bitly apis version 3, correct here if apis are changed -->
|
|
<form id="bitly_form_shorturl" action="http://api.bitly.com/v3/shorten" method="post" target="pgn4web_shorturl_window" style="display:inline;">
|
|
<input id="bitly_form_login" type="hidden" name="login">
|
|
<input id="bitly_form_apiKey" type="hidden" name="apiKey">
|
|
<input id="bitly_form_longUrl" type="hidden" name="longUrl">
|
|
<input id="bitly_form_format" type="hidden" name="format">
|
|
</form>
|
|
|
|
<!-- end of hidden elements for the short url generation -->
|
|
|
|
<form id="board" name="board" style="display:inline;" action="javascript:generate_html_code()">
|
|
|
|
<div style="height: 3em"> </div>
|
|
<script type="text/javascript">print_menu("generate", 2, "generate and copy iFrame and URL");</script>
|
|
|
|
<div style="height: 1em"> </div>
|
|
|
|
<div style="font-weight: bold; margin-bottom:6px;">automatically generated HTML code for your web page or blog</div>
|
|
<textarea readonly id="html_code" name="html_code" rows=15 class="textbox" style="background-color: #FFFFCC; scrollbar-base-color: #FFFFCC;"></textarea>
|
|
<div id="html_code_status"> </div>
|
|
<div style="margin-top:1em;"><a id="shorturl_link" title="generate a short url for sharing the chessboard via email, instant messaging or social networking sites" style="font-weight: bold;" href="javascript:shorten_pgn4web_url();">click here to create a short url for sharing the chessboard</a><span id="shorturl_link_separator"></span><a id="shorturl_link_pointer" class="shortUrl"></a></div>
|
|
<p></p>
|
|
<br>
|
|
|
|
<table width=100% cellspacing=0 cellpadding=0><tr>
|
|
<td align=left valign=middle width="50%">
|
|
<input type="button" id="generate_html_code_button" name="generate_html_code_button" value="generate HTML code and update preview" onClick="generate_html_code()" style="width: 100%;"/>
|
|
</td><td width="25%">
|
|
</td><td align=right valign=middle width="25%">
|
|
<input type="button" id="reset_defaults_button" name="reset_defaults_button" value="reset form to default values" onClick="reset_form()" style="width: 100%;"/>
|
|
</td></tr></table>
|
|
<p></p>
|
|
<br>
|
|
|
|
<div style="height: 2em"> </div>
|
|
<script type="text/javascript">print_menu("game_preview", 2, "preview");</script>
|
|
<div style="height: 1em"> </div>
|
|
|
|
<center>
|
|
<div class="textbox" id=preview> </div>
|
|
</center>
|
|
|
|
<div style="height: 4em"> </div>
|
|
<h2>configuration options</h2>
|
|
|
|
<script type="text/javascript">print_menu("pgn_form", 3, "chess games notation in PGN format");</script>
|
|
|
|
<div style="height: 1em"> </div>
|
|
|
|
<textarea id=pgnText class="textbox" style="background-color: #DDFFDD; scrollbar-base-color: #DDFFDD;" rows=15 onChange="update_pgnTextLength(); update_suggested_iframe_dimensions();"></textarea>
|
|
<table cellspacing="0" cellpadding="0" width="100%"><tr>
|
|
<td align="left"><div class="helptext">enter PGN data</div></td>
|
|
<td align="right"><div class="helptext" id="pgnTextLength"></div></td>
|
|
</tr></table>
|
|
<p></p>
|
|
|
|
<div style="height: 3em"> </div>
|
|
<script type="text/javascript">print_menu("templates", 3, "templates");</script>
|
|
<div style="height: 1em"> </div>
|
|
|
|
<select class="largeDropdown" id="templatesList" name="largeDropdown" onChange="template_selected();" style="font-family: monospace; font-weight: bold; white-space: pre;">
|
|
<option value="heading" selected="selected">apply a built-in template...</option>
|
|
<option value="reapply">- reapply last loaded template</option>
|
|
<option value="random">- apply random template</option>
|
|
</select>
|
|
<span class="helptext">select from preset board generator settings templates</span>
|
|
<p></p>
|
|
|
|
<a class="configtext" id="thisConfigBookmark" title=""><b>pgn4web board generator custom template link<span id="bookmarkCrc32" style="display: none;"></span></b></a>
|
|
<span class="helptext">add link into the browser bookmarks, saving current board settings</span>
|
|
<p></p>
|
|
|
|
<div style="height: 3em"> </div>
|
|
<script type="text/javascript">print_menu("replay_options", 3, "game replay options");</script>
|
|
<div style="height: 1em"> </div>
|
|
|
|
<select class="dropdown" id="autoplayMode" name="dropdown">
|
|
<option value="game" selected="selected">game</option>
|
|
<option value="loop">loop</option>
|
|
<option value="none">none</option>
|
|
</select>
|
|
<span class="labeltext">autoplay games</span>
|
|
<span class="helptext">autoplay first
|
|
<a id="autopplayMode_game" class="helplink" href="" onClick="if (!this.disabled) { document.board.autoplayMode.value = 'game'; } return false;">game</a>
|
|
once, or
|
|
<a id="autopplayMode_loop" class="helplink" href="" onClick="if (!this.disabled) { document.board.autoplayMode.value = 'loop'; } return false;">loop</a>
|
|
continiously, or autoplay
|
|
<a id="autopplayMode_none" class="helplink" href="" onClick="if (!this.disabled) { document.board.autoplayMode.value = 'none'; } return false;">none</a>
|
|
</span>
|
|
<p></p>
|
|
|
|
<select class="dropdown" id="delay" name="dropdown">
|
|
<option value="1000"> 1 second</option>
|
|
<option value="2000"> 2 seconds</option>
|
|
<option value="3000" selected="selected"> 3 seconds</option>
|
|
<option value="5000"> 5 seconds</option>
|
|
<option value="10000">10 seconds</option>
|
|
<option value="30000">30 seconds</option>
|
|
</select>
|
|
<span class="labeltext">autoplay delay</span>
|
|
<p></p>
|
|
<br>
|
|
|
|
<select class="dropdown" id="initialGame" name="dropdown">
|
|
<option value="first" selected="selected">first</option>
|
|
<option value="last">last</option>
|
|
<option value="random">random</option>
|
|
</select>
|
|
<span class="labeltext">initial game</span>
|
|
<p></p>
|
|
|
|
<input class="input" type="text" id="initialVariation" name="input" value="" size="12" onChange="validate_number(this, 'initial variation', initialVariation_default);">
|
|
<span class="labeltext">initial variation</span>
|
|
<span class="helptext">a number; applies only at the first game load; when
|
|
<a id="initialVariation_blank" class="helplink" href="" onClick="if (!this.disabled) { document.board.initialVariation.value = ''; } return false;">blank</a>,
|
|
defaults to the main variation</span>
|
|
<p></p>
|
|
|
|
<input type="hidden" id="initialHalfmove" value="">
|
|
|
|
<select class="dropdown" id="initialHalfmoveSelect" name="dropdown" onChange="javascript:setInitialHalfmove();">
|
|
<option value="start" selected="selected">start</option>
|
|
<option value="end">end</option>
|
|
<option value="random">random</option>
|
|
<option value="comment">comment</option>
|
|
<option value="variation">variation</option>
|
|
<option value="number">custom number</option>
|
|
</select>
|
|
<span class="labeltext">initial halfmove</span>
|
|
<span class="helptext"><i>start, end, random and comment</i> settings apply at every game load, <i>custom number</i> only at the first load</span>
|
|
<p></p>
|
|
|
|
<input class="input" type="text" id="initialHalfmoveNumber" name="input" value="" size="12" onChange="javascript:setInitialHalfmove();">
|
|
<span class="labeltext">initial halfmove number</span>
|
|
<span class="helptext">actual halfmove number when the setting above is
|
|
<a id="initialHalfmove_customNumber" class="helplink" href="" onClick="if (!this.disabled) { document.board.initialHalfmoveSelect.value = 'number'; setInitialHalfmove(); } return false;">custom number</a>
|
|
</span>
|
|
|
|
<div style="height: 3em"> </div>
|
|
<script type="text/javascript">print_menu("board_options", 3, "chessboard options");</script>
|
|
<div style="height: 1em"> </div>
|
|
|
|
<input class="input" type="text" id="squareSize" name="input" value="" size="12" onChange="validate_ss_ps_hm(); update_suggested_iframe_dimensions();">
|
|
<span class="labeltext">square size</span>
|
|
<span class="helptext">a number; must be larger than the piece size plus the highlight border if any</span>
|
|
<p></p>
|
|
|
|
<select class="dropdown" id="pieceSize" name="dropdown" onChange="validate_ss_ps_hm();">
|
|
<option value="default" selected="selected">default</option>
|
|
<option value="20">20</option>
|
|
<option value="21">21</option>
|
|
<option value="22">22</option>
|
|
<option value="23">23</option>
|
|
<option value="24">24</option>
|
|
<option value="25">25</option>
|
|
<option value="26">26</option>
|
|
<option value="27">27</option>
|
|
<option value="28">28</option>
|
|
<option value="29">29</option>
|
|
<option value="30">30</option>
|
|
<option value="31">31</option>
|
|
<option value="32">32</option>
|
|
<option value="33">33</option>
|
|
<option value="34">34</option>
|
|
<option value="35">35</option>
|
|
<option value="36">36</option>
|
|
<option value="37">37</option>
|
|
<option value="38">38</option>
|
|
<option value="39">39</option>
|
|
<option value="40">40</option>
|
|
<option value="41">41</option>
|
|
<option value="42">42</option>
|
|
<option value="43">43</option>
|
|
<option value="44">44</option>
|
|
<option value="45">45</option>
|
|
<option value="46">46</option>
|
|
<option value="47">47</option>
|
|
<option value="48">48</option>
|
|
<option value="52">52</option>
|
|
<option value="56">56</option>
|
|
<option value="60">60</option>
|
|
<option value="64">64</option>
|
|
<option value="72">72</option>
|
|
<option value="80">80</option>
|
|
<option value="88">88</option>
|
|
<option value="96">96</option>
|
|
<option value="112">112</option>
|
|
<option value="128">128</option>
|
|
<option value="144">144</option>
|
|
<option value="300">300</option>
|
|
</select>
|
|
<span class="labeltext">piece size</span>
|
|
<span class="helptext">
|
|
<a id="pieceSize_default" class="helplink" href="" onClick="if (!this.disabled) { document.board.pieceSize.value = 'default'; } return false;">default</a>
|
|
selects piece size based on square size</span>
|
|
<p></p>
|
|
|
|
<select class="dropdown" id="pieceFont" name="dropdown">
|
|
<option value="default" selected="selected">default</option>
|
|
<option value="alpha">alpha</option>
|
|
<option value="merida">merida</option>
|
|
<option value="uscf">uscf</option>
|
|
<option value="random">random</option>
|
|
</select>
|
|
<span class="labeltext">piece font</span>
|
|
<span class="helptext">
|
|
<a id="pieceFont_default" class="helplink" href="" onClick="if (!this.disabled) { document.board.pieceFont.value = 'default'; } return false;">default</a>
|
|
selects piece font based on piece size</span>
|
|
<p></p>
|
|
<br>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="lightColorHex" name="input" value="" size="12" onChange="validate_color(this, 'light squares color', lightColorHex_default)">
|
|
<span class="labeltext">light squares color</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="darkColorHex" name="input" value="" size="12" onChange="validate_color(this, 'dark squares color', darkColorHex_default)">
|
|
<span class="labeltext">dark squares color</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="boardBorderColorHex" name="input" value="" size="12" onChange="validate_color(this, 'board border color', boardBorderColorHex_default)">
|
|
<span class="labeltext">board border color</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="boardShadowColorHex" name="input" value="" size="12" onChange="validate_boardShadowColorHex()">
|
|
<span class="labeltext">board shadow color</span>
|
|
<span class="helptext">a color;
|
|
<a id="boardShadowColor_transparent" class="helplink" href="" onClick="if (!this.disabled) { document.board.boardShadowColorHex.color.fromString('FFFFFF'); document.board.boardShadowColorHex.value = 'transparent'; } return false;">transparent</a>
|
|
disables the shadow,
|
|
<a id="boardShadowColor_border" class="helplink" href="" onClick="if (!this.disabled) { document.board.boardShadowColorHex.color.fromString('FFFFFF'); document.board.boardShadowColorHex.value = 'border'; } return false;">border</a>
|
|
copies the board border color
|
|
</span>
|
|
<p></p>
|
|
|
|
<select class="dropdown" id="highlightMode" name="dropdown" onChange="validate_ss_ps_hm(); update_controls();">
|
|
<option value="border">border</option>
|
|
<option value="square" selected="selected">square</option>
|
|
<option value="none">none</option>
|
|
</select>
|
|
<span class="labeltext">square highlight mode</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="highlightColorHex" name="input" value="" size="12" onChange="validate_color(this, 'highlight squares color', highlightColorHex_default)">
|
|
<span class="labeltext">highlight squares color</span>
|
|
<p></p>
|
|
<br>
|
|
|
|
<select class="dropdown" id="buttonsDisplay" name="dropdown" onChange="update_controls()">
|
|
<option value="hidden" selected="selected">hidden</option>
|
|
<option value="standard">standard</option>
|
|
<option value="custom">custom</option>
|
|
</select>
|
|
<span class="labeltext">how to show control buttons</span>
|
|
<span class="helptext">browser's
|
|
<a id="buttonsDisplay_standard" class="helplink" href="" onClick="if (!this.disabled) { document.board.buttonsDisplay.value = 'standard'; update_controls(); } return false;">standard</a>
|
|
buttons, or
|
|
<a id="buttonsDisplay_custom" class="helplink" href="" onClick="if (!this.disabled) { document.board.buttonsDisplay.value = 'custom'; update_controls(); } return false;">custom</a>
|
|
colors below, or
|
|
<a id="buttonsDisplay_hidden" class="helplink" href="" onClick="if (!this.disabled) { document.board.buttonsDisplay.value = 'hidden'; update_controls(); } return false;">hidden</a>
|
|
buttons</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="controlBackgroundColorHex" name="input" value="" size="12" onChange="validate_color(this, 'control buttons background color', controlBackgroundColorHex_default); update_controls()">
|
|
<span class="labeltext">custom control buttons background color</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="controlTextColorHex" name="input" value="" size="12" onChange="validate_color(this, 'control buttons text color', controlTextColorHex_default)">
|
|
<span class="labeltext">custom control buttons text color</span>
|
|
|
|
<div style="height: 3em"> </div>
|
|
<script type="text/javascript">print_menu("header_moves_options", 3, "header and moves options");</script>
|
|
<div style="height: 1em"> </div>
|
|
|
|
<input class="input" type="text" id="textMargin" name="input" value="" size="12" onChange="validate_number(this, 'text margin', textMargin_default);">
|
|
<span class="labeltext">text margin</span>
|
|
<span class="helptext">a number; header/moves margin, nice to have when text overflows with scrollbars</span>
|
|
<p></p>
|
|
<br>
|
|
|
|
<select class="dropdown" id="headerDisplay" name="dropdown" onChange="update_controls()">
|
|
<option value="centered">centered</option>
|
|
<option value="justified" selected="selected">justified</option>
|
|
<option value="hidden">hidden</option>
|
|
<option value="live">live</option>
|
|
<option value="variations">variations</option>
|
|
</select>
|
|
<span class="labeltext"><b>how to show game header</b></span>
|
|
<p></p>
|
|
|
|
<input class="input" type="text" id="fontHeaderSize" name="input" value="" size="12" onChange="validate_number_percentage(this, 'header font size', fontHeaderSize_default);">
|
|
<span class="labeltext">header font size</span>
|
|
<span class="helptext">a number</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="fontHeaderColorHex" name="input" value="" size="12" onChange="validate_color(this, 'header font color', fontHeaderColorHex_default)">
|
|
<span class="labeltext">header font color</span>
|
|
<p></p>
|
|
<br>
|
|
|
|
<select class="dropdown" id="movesDisplay" name="dropdown" onChange="update_controls()">
|
|
<option value="figurine" selected="selected">figurine</option>
|
|
<option value="text">text</option>
|
|
<option value="puzzle">puzzle</option>
|
|
<option value="hidden">hidden</option>
|
|
</select>
|
|
<span class="labeltext"><b>how to show game moves</b></span>
|
|
<span class="helptext">select a game moves display option or use <a id="movesDisplay_oneClickOptimizedPuzzleSetup" class="helplink" href="" onClick="if (!this.disabled) { oneClickPuzzleSetup(); update_controls(); } return false;">the one click optimized puzzle setup</a></span>
|
|
<p></p>
|
|
|
|
<input class="input" type="text" id="fontMovesSize" name="input" value="" size="12" onChange="validate_number_percentage(this, 'moves font size', fontMovesSize_default);">
|
|
<span class="labeltext">moves font size</span>
|
|
<span class="helptext">a number</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="fontMovesColorHex" name="input" value="" size="12" onChange="validate_color(this, 'moves font color', fontMovesColorHex_default)">
|
|
<span class="labeltext">moves font color</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="highlightMoveColorHex" name="input" value="" size="12" onChange="validate_highlightMoveColorHex()">
|
|
<span class="labeltext">highlight move color</span>
|
|
<span class="helptext">a color;
|
|
<a id="highlightMoveColor_background" class="helplink" href="" onClick="if (!this.disabled) { document.board.highlightMoveColorHex.color.fromString('FFFFFF'); document.board.highlightMoveColorHex.value = 'background'; } return false;">background</a>
|
|
copies the background color</span>
|
|
<p></p>
|
|
<br>
|
|
|
|
<select class="dropdown" id="commentsDisplay" name="dropdown" onChange="update_controls()">
|
|
<option value="inline" selected="selected">inline</option>
|
|
<option value="newline">newline</option>
|
|
<option value="hidden">hidden</option>
|
|
</select>
|
|
<span class="labeltext">how to show move comments and variations</span>
|
|
<span class="helptext">
|
|
<a id="commentsDisplay_inline" class="helplink" href="" onClick="if (!this.disabled) { document.board.commentsDisplay.value = 'inline'; update_controls(); } return false;">inline</a>
|
|
inbetween game moves, or on a
|
|
<a id="commentsDisplay_newline" class="helplink" href="" onClick="if (!this.disabled) { document.board.commentsDisplay.value = 'newline'; update_controls(); } return false;">newline</a>
|
|
, or
|
|
<a id="commentsDisplay_hidden" class="helplink" href="" onClick="if (!this.disabled) { document.board.commentsDisplay.value = 'hidden'; update_controls(); } return false;">hidden</a>
|
|
</span>
|
|
<p></p>
|
|
|
|
<input class="input" type="text" id="fontCommentsSize" name="input" value="" size="12" onChange="validate_fontCommentsSize();">
|
|
<span class="labeltext">comments <span class="noExtendedOption">and variations </span>font size</span>
|
|
<span class="helptext">a number;
|
|
<a id="fontCommentsSize_moves" class="helplink" href="" onClick="if (!this.disabled) { document.board.fontCommentsSize.value = 'moves'; } return false;">moves</a>
|
|
copies the moves font size</span>
|
|
<p></p>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="fontCommentsColorHex" name="input" value="" size="12" onChange="validate_color(this, 'comments font color', fontCommentsColorHex_default)">
|
|
<span class="labeltext">comments <span class="noExtendedOption">and variations </span>font color</span>
|
|
|
|
<!-- hiding variations font size and color -->
|
|
<span class="extendedOption">
|
|
|
|
<p></p>
|
|
<input class="input" type="text" id="fontVariationsSize" name="input" value="" size="12" onChange="validate_fontVariationsSize();">
|
|
<span class="labeltext">variations font size</span>
|
|
<span class="helptext">a number;
|
|
<a id="fontVariationsSize_comments" class="helplink" href="" onClick="if (!this.disabled) { document.board.fontVariationsSize.value = 'comments'; } return false;">comments</a>
|
|
copies the comments font size</span>
|
|
|
|
<p></p>
|
|
<input class="color {adjust:false} input" type="text" id="fontVariationsColorHex" name="input" value="" size="12" onChange="validate_color(this, 'variations font color', fontVariationsColorHex_default)">
|
|
<span class="labeltext">variations font color</span>
|
|
<span class="helptext">a number;
|
|
<a id="fontVariationsColor_comments" class="helplink" href="" onClick="if (!this.disabled) { document.board.fontVariationsColorHex.color.fromString('FFFFFF'); document.board.fontVariationsColorHex.value = 'comments'; } return false;">comments</a>
|
|
copies the comments font color</span>
|
|
|
|
</span>
|
|
|
|
<div style="height: 3em"> </div>
|
|
<script type="text/javascript">print_menu("page_options", 3, "web page options");</script>
|
|
<div style="height: 1em"> </div>
|
|
|
|
<select class="dropdown" id="horizontalLayout" name="dropdown" onChange="validate_frameHeight(); validate_frameWidth(); update_suggested_iframe_dimensions();">
|
|
<option value="t">horizontal</option>
|
|
<option value="f" selected="selected">vertical</option>
|
|
</select>
|
|
<span class="labeltext">chessboard and header/moves layout</span>
|
|
<p></p>
|
|
<br>
|
|
|
|
<input class="input" type="text" id="frameHeight" name="input" value="" size="12" onChange="validate_frameHeight(); update_suggested_iframe_dimensions();">
|
|
<span class="labeltext">iFrame height</span>
|
|
<span id="frameHeight_helpText" class="helptext"></span>
|
|
<p></p>
|
|
|
|
<input class="input" type="text" id="frameWidth" name="input" value="" size="12" onChange="validate_frameWidth(); update_suggested_iframe_dimensions();">
|
|
<span class="labeltext">iFrame width</span>
|
|
<span id="frameWidth_helpText" class="helptext"></span>
|
|
<p></p>
|
|
|
|
<input class="input" type="text" id="framePadding" name="input" value="" size="12" onChange="validate_number(this, 'frame padding', framePadding_default); update_suggested_iframe_dimensions();">
|
|
<span class="labeltext">iFrame padding</span>
|
|
<span class="helptext">a number; border padding around the iframe, included within the iFrame width value</span>
|
|
<p></p>
|
|
<br>
|
|
|
|
<input class="color {adjust:false} input" type="text" id="backgroundColorHex" name="input" value="" size="12" onChange="validate_backgroundColorHex()">
|
|
<span class="labeltext">background color</span>
|
|
<span class="helptext">a color;
|
|
<a id="backgroundColor_transparent" class="helplink" href="" onClick="if (!this.disabled) { document.board.backgroundColorHex.color.fromString('FFFFFF'); document.board.backgroundColorHex.value = 'transparent'; } return false;">transparent</a>
|
|
uses the parent's background color</span>
|
|
<p></p>
|
|
|
|
<!-- hiding preview background color -->
|
|
<span class="extendedOption">
|
|
|
|
<input class="color {adjust:false} input" type="text" id="previewBackgroundColorHex" name="input" value="" size="12" onChange="validate_color(this, 'preview background color', previewBackgroundColorHex_default)">
|
|
<span class="labeltext">preview background color</span>
|
|
<span class="helptext">not actually used in the HTML code, just for the preview</span>
|
|
<p></p>
|
|
|
|
</span>
|
|
<!-- end hiding preview background color -->
|
|
|
|
<!-- hiding URL options -->
|
|
<span class="extendedOption">
|
|
|
|
<div style="height: 2em"> </div>
|
|
<script type="text/javascript">print_menu("url_options", 3, "URL options");</script>
|
|
<div style="height: 1em"> </div>
|
|
|
|
<input class="checkbox" type="checkbox" id="useTextarea" name="checkbox" onChange="validate_useTextarea(); update_controls();">
|
|
<span class="labeltext">use HTML textarea</span>
|
|
<span class="helptext">normally
|
|
<a id="useTextarea_disabled" class="helplink" href="" onClick="if (!this.disabled) { document.board.useTextarea.checked = false; update_controls(); } return false;">disabled</a>;
|
|
use only for deployment on a page from the same domain as the <i>board URL</i></span>
|
|
<p></p>
|
|
|
|
<input class="checkbox" type="checkbox" id="encodePgn" name="checkbox">
|
|
<span class="labeltext">encode PGN text</span>
|
|
<span class="helptext">normally
|
|
<a id="encodePgn_enabled" class="helplink" href="" onClick="if (!this.disabled) { document.board.encodePgn.checked = true; } return false;">enabled</a>
|
|
</span>
|
|
<p></p>
|
|
|
|
<input class="input" type="text" id="boardUrl" name="boardUrl" value="" size="12">
|
|
<span class="labeltext">board URL</span>
|
|
<span class="helptext">normally as
|
|
<a id="boardUrl_default" class="helplink" href="" onClick="if (!this.disabled) { document.board.boardUrl.value = boardUrl_default; } return false;">default</a>
|
|
unless <i>use HTML textarea</i> is enabled or for deployment on a page from a different domain</span>
|
|
<p></p>
|
|
|
|
</span>
|
|
<!-- end hiding URL options -->
|
|
|
|
<!-- hidden checkbox for calculating width -->
|
|
<input class="checkbox" type="checkbox" id="hiddenCheckbox" name="checkbox" style="height: 1px; visibility: hidden;" />
|
|
|
|
<div style="height: 1em"> </div>
|
|
<script type="text/javascript">print_menu("", 2, "");</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
inputWidth = document.getElementById('squareSize').offsetWidth;
|
|
theObj = document.getElementsByName('dropdown');
|
|
for (ii = 0; ii < theObj.length; ii++) {
|
|
theObj[ii].style.width = inputWidth + 'px';
|
|
}
|
|
|
|
checkboxWidth = document.getElementById('hiddenCheckbox').offsetWidth;
|
|
// the last number added to marginLeft should be equal to the value of the .checkbox style at the top
|
|
theObj = document.getElementsByName('checkbox');
|
|
for (ii = 0; ii < theObj.length; ii++) {
|
|
theObj[ii].style.marginLeft += (inputWidth - checkboxWidth + 22) + 'px';
|
|
}
|
|
|
|
</script>
|
|
|
|
</form>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|