forked from ornicar/pgn4web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcollection-example.html
124 lines (93 loc) · 4.13 KB
/
collection-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html>
<!--
pgn4web javascript chessboard
copyright (C) 2009, 2010 Paolo Casaschi
see README file and http://pgn4web.casaschi.net
for credits, license and more details
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>pgn4web games collection example</title>
<style type="text/css">
body
{ color: black; background: white; font-family: sans-serif; padding: 20px; }
a:link, a:visited, a:hover, a:active
{ color: black; text-decoration: none; }
a.linklist:link, a.linklist:visited, a.linklist:hover, a.linklist:active,
a.linkselected:link, a.linkselected:visited, a.linkselected:hover, a.linkselected:active
{ font-size: 80%; color: black; text-decoration: none; }
a.linkselected:link, a.linkselected:visited, a.linkselected:hover, a.linkselected:active
{ color: red; }
table, tr, td
{ border-width: 1px; border-color: gray; border-collapse: collapse; }
</style>
<link rel="shortcut icon" href="pawn.ico" />
</head><body>
<p>
This is an application example showing how to use the pgn4web file collection.html to manage a collection of PGN files.
<br>
Two alternative options are shown.
</p>
<p style="font-size: 200%; font-weight: bold;">
links to the viewer
<p>
A link can be listed for viewing each PGN file in a new browser window:
</p>
<table width=100% cellpadding=20 cellspacing=0 border=1>
<tr>
<td width=50% align=left>2008 World Championship: Anand Kramnik</td>
<td width=25% align=center><a href="collection.html?pgnFile=wch08ak.pgn&title=2008 World Championship: Anand Kramnik" target="viewer">view</a></td>
<td width=25% align=center><a href="wch08ak.pgn">download</a></td>
</tr>
<tr>
<td align=left>The Week In Chess #765</td>
<!-- when present the URL (in this case as part of the title string), the char # needs to be escaped as %23
same would apply to ? (%3F) & (%38) and any other URL special characters -->
<td align=center><a href="collection.html?pgnFile=twic765.pgn&title=The Week In Chess %23765" target="viewer">view</a></td>
<td align=center><a href="twic765.pgn">download</a></td>
</tr>
<tr>
<td align=left>London Chess Classic 2009 round 5</td>
<td align=center><a href="collection.html?pgnFile=lon09r5.pgn&title=London Chess Classic 2009 round 5" target="viewer">view</a></td>
<td align=center><a href="lon09r5.pgn">download</a></td>
</tr>
<tr>
<td align=left>Tilburg Fontys 1998 round 2</td>
<td align=center><a href="collection.html?pgnFile=tilb98r2.pgn&title=Tilburg Fontys 1998 round 2" target="viewer">view</a></td>
<td align=center><a href="tilb98r2.pgn">download</a></td>
</tr>
</table>
<p style="font-size: 200%; font-weight: bold; margin-top: 1em;">
dropdown menu selection
<form style="width:100%;">
<select id="selectmenu" style="width:100%;">
<option value="">select a PGN archive from the chess games collection for display in the inline frame underneath</option>
<option value="wch08ak.pgn">2008 World Championship: Anand Kramnik</option>
<option value="twic765.pgn">The Week In Chess #765</option>
<option value="lon09r5.pgn">London Chess Classic 2009 round 5</option>
<option value="tilb98r2.pgn">Tilburg Fontys 1998 round 2</option>
</select>
</form>
<br/>
<iframe id="inlineframe" name="inlineframe" height="1200" width="100%" frameborder="0" scrolling="auto" marginwidth="0px;" marginheight=0px;" src="collection.html">
your web browser and/or your host do not support iframes as required to display the chessboard
</iframe>
<script type="text/javascript">
var oldChosenoptionValue = "";
var selectmenu=document.getElementById("selectmenu");
selectmenu.onchange = function() {
var chosenoption = this.options[this.selectedIndex];
if ((chosenoption.value !== "") && (chosenoption.value != oldChosenoptionValue)){
oldChosenoptionValue = chosenoption.value;
if (theObject = frames['inlineframe'].document.getElementById('searchPgnExpression')) {
searchPgnString = '&search=' + escape(theObject.value);
} else {
searchPgnString = '';
}
frames['inlineframe'].location.href = "collection.html?pgnFile=" + chosenoption.value + "&title=" + escape(chosenoption.innerHTML) + searchPgnString;
}
this.selectedIndex = 0;
};
</script>
</body>
</html>