<!-- 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; } .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}/16/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}/16/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); } </style> <script type="text/javascript"> 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; var name = prompt ("{enter_shortcut_name}", ""); if (!name) name = ""; a.setProperty('href', url); a.getNext().set('text', name); var num = id.charAt (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.charAt (1) - 1; sc.shortcuts[num].href = href; sc.shortcuts[num].img = data; console.log ("speed_dial-save '" + encodeSafe (sc) + "'"); } var renameShortcut = function (id) { var name = prompt ("{enter_shortcut_name}", ""); if (!name) return; var num = id.charAt (1) - 1; $(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.charAt (1); var div = $(id); var cross = div.getFirst (); var a = cross.getNext (); var p = a.getNext (); cross.dispose (); div.removeClass ('activated'); a.empty (); 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 () { sc.shortcuts.each (function (item, index, sc) { var cl = "shortcut"; if (index == 0 || index == 1 || index == 2) cl += " top"; if (index == 2 || index == 5 || index == 8) 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.charAt (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); }); } window.addEvent ('domready', function () { buildSpeeddial (); }); </script> </head> <body> <div id="wrap"> <div id="content"> </div> </div> </body> </html>