<!-- Speed Dial head template for Midori. Copyright (C) 2009 Jean-François Guchens <zcx000@gmail.com> Copyright (C) 2011 Paweł Forysiuk <tuxator@o2.pl> Copyright (C) 2011 Cassidy James <email@cassidyjames.com> This file is licensed under the terms of the expat license, see the file EXPAT. --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>{title}</title> <style> /* Animations */ @-webkit-keyframes popin { 0% { opacity: 0.0; -webkit-transform: scale(0.00); } 75% { opacity: 0.5; -webkit-transform: scale(1.15); } 100% { opacity: 1.0; -webkit-transform: scale(1.00); } } /* Styles */ * { margin: 0; padding: 0; cursor: default; font-size: 13px; color: #4d4d4d; } html, body { font-family: sans-serif; width: 100%; height: 100%; outline: 0; background: #E1E1E1; } #content { width: 96%; height: 85%; margin: 0 auto; padding-top: 5%; padding-left: 2%; } div.shortcut { width: 25%; height: 33%; float: left; } div.shortcut .preview { width: 85%; height: 75%; margin: auto; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.3), 0 0 0px #fff inset; border: 1px solid #bcbcbc; border-bottom-color: #a0a0a0; position: relative; -webkit-border-radius: 3px; } div.shortcut .preview img { width: 100%; height: 100%; cursor: pointer; -webkit-border-radius: 3px; } div.shortcut .preview.new .add { display: block; height: 100%; width: 100%; margin: 0 auto; cursor: pointer; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.3), 0 0 0px #fff inset; background-image: -webkit-gradient( linear, center top, center bottom, from(#f6f6f6), to(#e3e3e3)); background-repeat: repeat-x; -webkit-border-radius: 3px; } .title { text-align: center; margin: 8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: text; text-shadow: 0 1px 0 rgba(255,255,255,0.5); } .cross { display: block; width: 27px; height: 27px; top: -14px; right: -14px; background: url(res://close.png); position: absolute; cursor: pointer; opacity: 0; } div.shortcut .preview:hover .cross { -webkit-animation: popin 250ms ease-in-out; opacity: 1; } .box.added { display:none; } 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; } .selected { outline: 1px dotted black; background-color: #eef; } </style> <script type="text/javascript"> var getAction = function (id) { var s = document.getElementById(id).childNodes[0]; if (s.className == 'preview') return true; var url = prompt ("{enter_shortcut_address}", "http://"); if (!url) return false; if (url.indexOf ("://") == -1) url = "http://" + url; console.log ("speed_dial-save-add " + id + " " + url + " "); return false; } var renameShortcut = function (id) { var old_name = document.getElementById(id).childNodes[1].textContent; var name = prompt ("{enter_shortcut_name}", old_name); if (!name) return; 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 key_id = 's'; var key_timeout; document.onkeypress = function () { key_id = key_id + String.fromCharCode (event.which); clearTimeout (key_timeout); document.getElementById('dialing').innerText = key_id.substr(1); document.getElementById('dialing').style.visibility = 'visible'; var div = document.getElementById(key_id); if (div) { if (key_id.substr(1) > 9) { if (getAction (key_id)) document.location = div.childNodes[0].childNodes[1].href; key_id = 's'; } else key_timeout = setTimeout ('if (getAction (key_id)) document.location = document.getElementById(key_id).childNodes[0].childNodes[1].href; key_id = \'s\'', 1000); } else key_id = 's'; if (key_id.length <= 1) document.getElementById('dialing').style.visibility = 'hidden'; return false; } var firstNode, secondNode; var cursor; var dial = document.getElementsByClassName("shortcut"); var get_dial_div = function (ele) { var dial_div; if (ele.nodeName == 'IMG') dial_div = ele.parentNode.parentNode.parentNode; if (ele.className == 'title') dial_div = ele.parentNode; if (ele.className.indexOf ('shortcut') != -1) dial_dir = ele; return dial_div; } var click = function (ev) { ev.preventDefault(); var ele = ev.target; cursor = ele.style.cursor; ele.style.cursor = 'move'; var eparent = get_dial_div (ele); if (eparent != undefined) { eparent.className = 'shortcut selected'; firstNode = eparent.id; } document.RemoveEventListener('click', click, false); }; var up = function (ev) { ele = ev.target; var eparent = get_dial_div (ele); ele.style.cursor = cursor; secondNode = eparent.id; /* ommit just mere clicking the dial */ if (firstNode != secondNode && firstNode != undefined) swap(); }; var over = function (ev) { if (ev == undefined) return; var ele = ev.target; var eparent = get_dial_div (ele); if (firstNode != undefined) { eparent.className = 'shortcut selected'; for (var i = 0; i <= dial.length; i++) { if (eparent.id != firstNode.id && dial[i].id != eparent.id) { dial[i].className = 'shortcut'; } } } ele.style.cursor = cursor; } function swap () { console.log ("speed_dial-save-swap " + firstNode + " " + secondNode); }; document.addEventListener('mousedown', click, false); document.addEventListener('mouseup', up, false); document.addEventListener('mouseover', over, false); </script> </head> <body> <div class="osd" > <span id="dialing"></span> </div> <div id="content">