<!-- 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%; } .waiter img { margin-top: 38px; } div.shortcut a:hover { border: 1px solid #999; } div.shortcut p { font-size: 12px; margin: 0px; padding: 5px 0px 0px; color: #222; } 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 sc = JSON.decode ({json_data}); var encodeSafe = function (obj) { var str = JSON.encode (obj); str = str.replace (/\'/g, '\\\''); return str; } 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 = ""; a.setProperty('href', url); a.getNext().set('text', name); var num = id.substr (1) - 1; sc.shortcuts[num].title = name; a.empty(); var im = new Element('img', { src: '{stock}/image-loading' }); a.addClass ('waiter'); a.grab (im); getThumbnail (id, url); return false; } var getThumbnail = function (id, url) { console.log ("speed_dial-get-thumbnail " + id + " " + url); return false; } var setThumbnail = function (id, data, href) { var a = $(id).getFirst (); var im = new Element ('img', { src: 'data:image/png;base64,' + data }); a.empty ().removeClass ('waiter').grab (im); a.setProperty ('href', href); var cross = new Element ('div', { 'html': '' }); cross.setProperty ('onclick', 'clearShortcut("' + id + '");'); cross.addClass ('cross'); cross.inject ($(id), 'top'); $(id).addClass ('activated'); var p = a.getNext (); p.setProperty('onclick', 'javascript:renameShortcut("' + id + '");'); var num = id.substr (1) - 1; sc.shortcuts[num].href = href; sc.shortcuts[num].img = data; console.log ("speed_dial-save '" + encodeSafe (sc) + "'"); } var renameShortcut = function (id) { var num = id.substr (1) - 1; var name = prompt ("{enter_shortcut_name}", sc.shortcuts[num].title); if (!name) return; $(id).getLast ().set ('html', name); sc.shortcuts[num].title = name; console.log ("speed_dial-save '" + encodeSafe (sc) + "'"); } var clearShortcut = function (id) { if(!confirm("{are_you_sure}")) return; var num = id.substr (1); var div = $(id); var cross = div.getFirst (); var a = cross.getNext (); var p = a.getNext (); cross.dispose (); div.removeClass ('activated'); a.empty ().set ('html', '<h1>' + num + '</h1><h4><span/></h4>'); a.setProperty ('href', '#'); p.empty ().removeProperty ('onclick'); num -= 1; sc.shortcuts[num].href = "#"; sc.shortcuts[num].title = ""; sc.shortcuts[num].img = ""; console.log ("speed_dial-save '" + encodeSafe (sc) + "'"); } var buildSpeeddial = function () { var width = 3; var thumb = 160; if (sc.thumb) { thumb = sc.thumb; setThumbSize(thumb); } if (sc.width) { width = sc.width; $('wrap').style.width = (width * (thumb + 60)) + 'px'; } sc.shortcuts.each (function (item, index, sc) { var cl = "shortcut"; if (index < width) cl += " top"; if ((index % width) == (width - 1)) cl += " right"; var div = new Element ('div', { 'class': cl, 'id': item.id }); var a = new Element ('a', { 'href': item.href, 'events': { 'click': function () { return getAction (item.id); } } }); var p = new Element ('p', { 'text': item.title }); if (item.href == "#") a.set ('html', '<h1>' + item.id.substr (1) + '</h1><h4><span/></h4>'); else { div.addClass ('activated'); var im = new Element ('img', { src: 'data:image/png;base64,' + item.img }); var cross = new Element ('div', { 'html': '' }); cross.setProperty ('onclick', 'clearShortcut("' + item.id + '");'); cross.addClass ('cross'); cross.inject (div, 'top'); a.grab (im); p.setProperty('onclick', 'javascript:renameShortcut("' + item.id + '");'); } div.grab (a); div.grab (p); $('content').grab (div); }); } var setSize = function () { var rows = Math.ceil (sc.shortcuts.length / sc.width); var size = prompt ("{enter_dial_size}", sc.width + '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; } sc.width = cols; var count = cols * rows; sc.shortcuts = sc.shortcuts.slice (0, count); var i = sc.shortcuts.length; while (i < count) { i++; sc.shortcuts.push ({"id" : "s" + i, "href" : "#", "title" : "", "img" : ""}); } $('content').empty (); buildSpeeddial (); console.log ("speed_dial-save '" + encodeSafe (sc) + "'"); } var setThumbSize = function (size) { var i; var rules = document.styleSheets[0].cssRules; var width = 3; if (sc.width) width = sc.width; 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; } } if (sc.thumb != size) { sc.thumb = size; console.log ("speed_dial-save '" + encodeSafe (sc) + "'"); } } window.addEvent ('domready', function () { buildSpeeddial (); }); 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) * 10 > sc.shortcuts.length) { 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\'', 3000); } 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"> </div> </div> </body> </html>