<!-- Speed Dial head template for Midori. Copyright (C) 2009 Jean-François Guchens <zcx000@gmail.com> This file is licensed under the terms of the expat license, see the file EXPAT. --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>{title}</title> <script type="text/javascript" src="{res}/mootools.js"></script> <style> html, body, #content { margin: 0px; padding: 0px } body { text-align: center; background-color: #fefefe; font-family: sans-serif; } #wrap { width: 660px; height: 500px; margin: 0px auto; text-align: center; } #content { margin-top: 40px; } div.shortcut { float: left; border: 1px solid #ccc; position: relative; width: 200px; height: 150px; margin: 20px 20px 0px 0px; background-color: #fff; -webkit-border-radius: 10px; } div.right { margin-right: 0px; margin-left: 0px; } div.top { margin-top: 0px; } h1 { font-size: 50px; font-weight: bold; margin: 0px; height: 30px; padding: 10px 0px 0px 0px; display: block; } h4 { font-size: 11px; font-weight: bold margin: 10px 0px 0px 0px; padding: 10px 5px 0px; display: block; } h4 span:before { content: "{click_to_add}"; font-size: 11px; } h4 span { font-size: 11px; } div.shortcut a { border: 1px solid #ccc; display: block; width: 160px; height: 107px; margin: 15px auto 0px; background-color: #fafafa; color: #aaa; text-decoration: none; } div.shortcut a img { width: 100%; height: 100%; } div.shortcut a:hover { border: 1px solid #999; } div.shortcut p { font-size: 12px; margin: 0px; padding: 5px 0px 0px; color: #222; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } div.clear { clear: both; } div.activated { background-color: #f5f5f5; } .cross { height: 16px; width: 16px; margin-bottom: -17px; margin-left: 180px; margin-top: 2px; background: url({stock}/1/gtk-close) 98% 70% no-repeat; cursor: pointer; z-index: -4; opacity: 0.6; } .cross:hover { opacity: 1; } .activated p { cursor: text; background: url({stock}/1/gtk-edit) 98% 70% no-repeat; opacity: 0.6; color: rgba(0,0,0,1); } .activated p:hover { opacity: 1; color: rgba(0,0,0,0.5); } div.config { position: absolute; top: 0px; padding: 12px; text-align: left; } div.config span { color: #ccc; margin-right: 10px; margin-right: 10px; } div.config span.config_option:hover { color: #999; cursor: pointer; } div.config span.config_label { color: #ccc; cursor: default; margin-right: 0px; } div.config span.config_option { margin-left: 0px; margin-right: 0px; } div.osd { top: 9px; position: fixed; width: 100%; text-align: right; } div.osd span { border: 1px solid #999; background-color: #f5f5f5; padding: 8px; color: #999; -webkit-border-bottom-left-radius: 10px; visibility: hidden; } </style> <script type="text/javascript"> var getAction = function (id) { var a = $(id).getFirst (); if (a.getProperty ('href') != "#" ) return true; var url = prompt ("{enter_shortcut_address}", "http://"); if (!url) return false; if (url.indexOf ("://") == -1) url = "http://" + url; var name = prompt ("{enter_shortcut_name}", ""); if (!name) name = ""; console.log ("speed_dial-save-add " + id + " " + url + " " + name); return false; } var renameShortcut = function (id) { var name = prompt ("{enter_shortcut_name}", $(id).getLast ().get ('html', name)); if (!name) return; $(id).getLast ().set ('html', name); console.log ("speed_dial-save-rename " + id + " " + name); } var clearShortcut = function (id) { if(!confirm("{are_you_sure}")) return; console.log ("speed_dial-save-delete " + id); } var setSize = function () { var size = prompt ("{enter_dial_size}", columns + 'x' + rows); if (!size) return; var pos = size.indexOf('x'); if (pos <= 0) { alert ("{invalid_dial_size}"); return; } var cols = size.substr(0, pos); rows = size.substr(pos+1); if (isNaN (cols) || isNaN (rows) || cols == 0 || rows == 0) { alert ("{invalid_dial_size}"); return; } if (size.indexOf('.') >= 0) { alert ("{invalid_dial_size}"); return; } console.log ("speed_dial-save-size " + cols + " " + rows); } var setThumbSize = function (size) { var i; var rules = document.styleSheets[0].cssRules; var width = columns; var height = Math.round (size / 1.5); $('wrap').style.width = (width * (size + 60)) + 'px'; for (i = 0; i < rules.length; i++) { switch (rules[i].selectorText) { case 'div.shortcut a': rules[i].style.width = size + 'px'; rules[i].style.height = height + 'px'; break; case 'div.shortcut': rules[i].style.width = (size + 40) + 'px'; rules[i].style.height = (height + 43) + 'px'; break; case '.cross': rules[i].style.marginLeft = (size + 20) + 'px'; break; case 'h1': rules[i].style.fontSize = (size / 4 + 10) + 'px'; rules[i].style.height = (size / 4 - 10) + 'px'; break; case 'h4 span::before': rules[i].style.visibility = (size < 160) ? 'hidden' : 'visible'; break; } } console.log ("speed_dial-save-thumbsize " + size); } var key_id = 's'; var key_timeout; document.onkeypress = function () { key_id = key_id + String.fromCharCode (event.which); clearTimeout (key_timeout); $('dialing').innerText = key_id.substr(1); $('dialing').style.visibility = 'visible'; if ($(key_id)) { if (key_id.substr(1) > 9) { if (getAction (key_id)) document.location = $(key_id).children[1]; key_id = 's'; } else key_timeout = setTimeout ('if (getAction (key_id)) document.location = $(key_id).children[1]; key_id = \'s\'', 1000); } else key_id = 's'; if (key_id.length <= 1) $('dialing').style.visibility = 'hidden'; return false; } </script> </head> <body> <div class="osd" > <span id="dialing"></span> </div> <div class="config"> <span onclick="javascript:setSize()" class="config_option">{set_dial_size}</span> <span class="config_label">{set_thumb_size}</span> <span onclick="javascript:setThumbSize(80)" class="config_option">{set_thumb_small}</span> <span onclick="javascript:setThumbSize(160)" class="config_option">{set_thumb_normal}</span> <span onclick="javascript:setThumbSize(240)" class="config_option">{set_thumb_big}</span> </div> <div id="wrap"> <div id="content">