imageData/options.html at master · cubeleco/imageData · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="color-scheme" content="dark">
	<link rel="stylesheet" type="text/css" href="options.css">
	<title>Image Data Options</title>
</head>

<body>
	<div id="optionsNote">
		<button id="factoryReset" class="floatRight" title="Reset all addon options, shortcuts, json, and css to default values. Click twice to confirm.">
			Default options
		</button>
		The following options are saved automatically, but tabs need to be refreshed to apply changes.
	</div>
	<h4>Shortcuts</h4>
	<label title="Keyboard shortcut to show or hide image data for a moment, while held down. Press Escape to disable the shortcut.">
		<input id="holdEnableKey" class="fixedWidth" type="text" readonly="true" placeholder="Type a shortcut">
		<span>Quick toggle</span>
	</label><br>

	<h4>Options</h4>
	<label title="Where the image data div will be placed on the webpage. Over image is placed within the image's parent container (position: absolute). Fixed, Follow cursor, and Tool tip do not scroll with the page (position: fixed). Before and After image are placed inline and shifts other elements on the page (position: static).">
		<div class="fixedWidth"><select id="position">
			<option value="0">Over image</option>
			<option value="1">Fixed</option>
			<option value="2">Follow cursor</option>
			<option value="3">Before image</option>
			<option value="4">After image</option>
			<option value="5">Tool tip</option>
		</select></div>
		<span>Position on web page</span>
	</label><br>
	<label title="How the file size units should be divided. 1024 (default) is often used in file systems. 1000 is often used by hard disks. To display the file size in bytes use a really large number such as 1e+30.">
		<div class="fixedWidth"><input id="fsdivision" type="number" min="3"></div>
		<span>File size divisor</span>
	</label><br>
	<label title="How many digits there should be after the decimal point for the file size. Must be an integer 0-20">
		<div class="fixedWidth"><input id="fsprecision" type="number" min="0" max="20"></div>
		<span>File size precision</span>
	</label><br>
	<label title="How many milliseconds before image data will be shown">
		<div class="fixedWidth"><input id="delay" type="number" min="0" step="100"></div>
		<span>Display delay</span>
	</label><br>
	<label for="minWidth" title="Images smaller than this size will not show image data">
		<div class="fixedWidth"><input id="minWidth" type="number" min="0" step="10"> &times; <input id="minHeight" type="number" min="0" step="10"></div>
		<span>Minimum resolution</span>
	</label><br>
	<label for="offX" title="If using the follow cursor or tooltip positioning, how many pixels the image data div should be offset from the cursor, on the X and Y axes. Negative values move in the opposite direction.">
		<div class="fixedWidth"><input id="offX" type="number"> &times; <input id="offY" type="number"></div>
		<span>Pixel offset from cursor</span>
	</label><br>
	<label for="newtabOnly" class="labelCheckBox" title="Display image data only for images opened in a new tab">
		<div class="fixedWidth"><input id="newtabOnly" type="checkbox"></div>
		<span>Show only in a new tab</span>
	</label><br>

	<h4 title="What image data is displayed, and its order">
		Data JSON
		<a class="helpLink" href="https://github.com/cubeleco/imageData/wiki/Options#data-json">?</a>
	</h4>
	<textarea id="display" rows="4" spellcheck="false"></textarea>

	<h4>
		Custom CSS
		<a class="helpLink" href="https://github.com/cubeleco/imageData/wiki/Options#custom-css">?</a>
		<a class="floatRight" href="https://github.com/cubeleco/imageData/blob/master/presets.css">CSS presets</a>
	</h4>
	<textarea id="style" rows="3" spellcheck="false"></textarea>
	<div id="previewContainer">
		<div class="floatLeft">
			<div id="previewDiv" title="Preview of image data div with Custom CSS">155&times;200 jpg<br>
				<div id="previewAlt">Preview alt text<br></div>
				<div id="previewScale">98&#x2922;126<br></div>
				<div id="previewSize">347 kB</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="defaults.js"></script>
	<script type="text/javascript" src="options.js"></script>
</body>
</html>