-
Notifications
You must be signed in to change notification settings - Fork 16
/
exolve-embedder.html
84 lines (60 loc) · 2.62 KB
/
exolve-embedder.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
<!--
MIT License
Copyright (c) 2023 Viresh Ratnakar
See the full license notice in exolve-m.js.
Usage:
Host this file on your web server. Then, you can serve interactively solvable
crosswords from crossword files in any of these supported formats:
Exolve, .puz, .ipuz.
Let's say you have file named my-puzzle.puz that you are serving from the same
directory as this exolve-embedder.html file. Then, this is the URL for the
interactive crossword:
exolve-embedder.html?crossword=my-puzzle.puz
You can wrap this inside an iframe tag, to embed a crossword in any web page:
<iframe height="780px" width="100%" allowfullscreen="true"
style="border:none; width: 100% !important; position: static;display: block !important; margin: 0 !important;"
src="exolve-embedder.html?crossword=my-puzzle.puz">
</iframe>
Any other URL parameters get appended to the Exolve specs. "key=value" becomes the line:
exolve-key: value
For example, you can override the color used in the buttons, as well as the
font used in the clues, like this:
exolve-embedder.html?crossword=my-puzzle.puz&option=color-button:blue font-family:monospace
There are a *lot* of customizations that can be done like this. See details
in the Exolve documentation:
https://github.com/viresh-ratnakar/exolve#exolve-option
Every URL parameter value is first decoded (using decodeURIComponent()), including
the value of the crossword parameter.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="https://viresh-ratnakar.github.io/exolve-m.css"/>
<script src="https://viresh-ratnakar.github.io/exolve-m.js"></script>
<script src="https://viresh-ratnakar.github.io/exolve-from-ipuz.js"></script>
<script src="https://viresh-ratnakar.github.io/exolve-from-puz.js"></script>
<script src="https://viresh-ratnakar.github.io/exolve-embedder.js"></script>
<!--
You can get rid of depending on my site for serving the above files by serving
your own copies of them. Download them all into the same dir as this file, from:
https://github.com/viresh-ratnakar/exolve
Then, replace each 'src="https://viresh-ratnakar.github.io/' above with just 'src="'.
If you do that, do update your copies of these files periodically, to pick up
bug fixes and new features.
-->
<title>Exolve Embedder</title>
</head>
<body>
<div id="xlv-embedder">
</div>
<script>
try {
const exolveEmbedder = new ExolveEmbedder();
} catch (err) {
document.getElementById('xlv-embedder').innerHTML = err;
}
</script>
</body>
</html>