opera-subdials/subdial.html at master · schweickism/opera-subdials · 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
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
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="icon" href="icon.png" />
  <title>Sub-Dials</title>
  <style>
body{padding:0 20px;font-size:200%;color:#FFF;text-shadow:0 1px 3px #222;background:url('background.png') repeat;}
a img{border:0;}
.dial{display:block;float:left;margin:10px 20px;padding:5px 7px 7px 5px;width:320px;height:200px;color:#999;text-decoration:none;text-shadow:none;border:1px solid rgba(0,0,0,0.0);border-radius:9px;transition:0.3s;}
.dial:hover{background:rgba(0,0,0,0.2);border:1px solid rgba(0,0,0,0.3);box-shadow:0 0 3px rgba(255,255,255,0.5) inset;transition:0.3s;}
.dial .inner{margin:1px;width:320px;height:200px;overflow:hidden;background:#FFF no-repeat 50% 50%;border-radius:5px;box-shadow:0 0 1px rgba(0,0,0,1),0 1px 2px rgba(0,0,0,0.5);transition:box-shadow 0.1s,border 0.3s,margin 0.3s;}
.dial:hover .inner{margin:0;border:1px solid #FFF;box-shadow:none;transition:0.2s;}
.dial h2{text-align:center;}
#content{margin:6% 5% 0;}
#speeddial-preview{display:none;}
@media screen and (view-mode:minimized) {
	html,body{margin:0;padding:0;}
	#content{display:none;}
	#speeddial-preview{display:block;height:210px;font-size:100%;text-align:center;}
	#speeddial-preview h1{position:absolute;top:0;left:0;z-index:2;margin:40px;text-shadow:0 1px 8px rgba(0,0,0,0.8);}
	#speeddial-preview .thumb{display:block;float:left;margin:0;padding:0;opacity:0.8;}
}
  </style>
 </head>
 <body>
  <div id="speeddial-preview">
  </div>
  <div id="content">
  </div>
  <script src="config.js"></script>
  <script>
var preview = document.getElementById("speeddial-preview"), content = document.getElementById("content"), dial;
function populateContent() {
	dial = (location.hash == "") ? "" : decodeURIComponent(document.location.hash.substr(1));
	if(dial == "" || subdial[dial] === undefined) {
		dial = "";

		preview.innerHTML = content.innerHTML = '<h1>Sub-Dials</h1>';

		// Show list of categories
		var dialList = Object.keys(subdial);
		for(var i = 0, len = dialList.length; i < len; i ++) {
			var a = document.createElement("a");
			a.className = "dial";
			a.href = '#' + encodeURIComponent(dialList[i]);
			a.title = dialList[i];
			a.setAttribute("onclick", "window.location='" + a.href + "';populateContent()");
			var d = document.createElement("div");
			d.className = "inner";
			var h = document.createElement("h2");
			h.innerText = dialList[i];
			d.appendChild(h);
			a.appendChild(d);
			content.appendChild(a);
		}
	}
	else {
		document.title = "Sub-Dial | " + dial;

		content.innerHTML = "";

		var h = document.createElement("h1");
		h.innerText = dial;
		content.appendChild(h);

		// Show links in current dial
		var len = subdial[dial].length;
		var cols = Math.ceil(Math.sqrt(len));
		var mosaicThumbSize = 100 / cols;
		for(var i = 0; i < len; i ++) {
			var a = document.createElement("a");
			a.className = "dial";
			a.href = subdial[dial][i][0];
			a.title = subdial[dial][i][((subdial[dial][i][1] === undefined || subdial[dial][i][1] == "") ? 0 : 1)];
			var bg = (subdial[dial][i][2] === undefined || subdial[dial][i][2] == "") ? 'http://api.webthumbnail.org?width=320&height=200&url=' + encodeURIComponent(subdial[dial][i][0]) : subdial[dial][i][2];
			a.innerHTML = '<div class="inner" style="background-image:url(\'' + bg + '\');"></div>';
			content.appendChild(a);

			// Preview thumbnail background mosaic (on the real speed dial)
			a = document.createElement("div");
			a.className = "thumb";
			a.style = "width:" + mosaicThumbSize + "%;height:" + mosaicThumbSize + "%;background-image:url('" + bg + "');";
			preview.appendChild(a);
		}

		// Finish up preview view
		//repeat mosaic to fill any remaining space (sqrt is ceil'd so we get every bg at least once)
		preview.innerHTML += preview.innerHTML;
		//add preview header
		h = h.cloneNode();
		preview.appendChild(h);
	}
}
populateContent();
function shortcut(e) {
	if(e.keyCode >= 48 && e.keyCode < 58) {
		var key = e.keyCode - 49;
		if(key == -1)
			key = 9;
		var links = content.getElementsByTagName("a");
		if(key < links.length)
			window.location = links[key].href;
		if(dial == "")
			populateContent();
	}
}
document.onkeypress = shortcut;
  </script>
 </body>
</html>