6c4d94942f
Stock icons do not match filenames in many icon themes and the appropriate sizes may not be available. Thus we now always render the icon through the theme engine and encode it as a data URI with BASE64/ PNG. As a side effect, we use stock sizes now instead of pixel sizes, where 1 means menu size, 4 means button size and 6 dialog size; the value 16 is translated to 4 to keep existing files working.
386 lines
8.9 KiB
HTML
386 lines
8.9 KiB
HTML
<!--
|
|
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: 10px;
|
|
}
|
|
|
|
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}/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 {
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
div.config span {
|
|
color: #ccc;
|
|
}
|
|
|
|
div.config span:hover {
|
|
color: #999;
|
|
cursor: pointer;
|
|
}
|
|
</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.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 name = prompt ("{enter_shortcut_name}", "");
|
|
if (!name) return;
|
|
|
|
var num = id.substr (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.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;
|
|
if (sc.width)
|
|
{
|
|
width = sc.width;
|
|
$('wrap').style.width = (width * 220) + '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 setWidth = function ()
|
|
{
|
|
var width = prompt ("{enter_dial_width}", "");
|
|
if (!width || isNaN (width)) return;
|
|
|
|
sc.width = width;
|
|
|
|
$('content').empty ();
|
|
buildSpeeddial ();
|
|
|
|
console.log ("speed_dial-save '" + encodeSafe (sc) + "'");
|
|
}
|
|
|
|
var setCount = function ()
|
|
{
|
|
var count = prompt ("{enter_shortcut_count}", "");
|
|
if (!count || isNaN (count)) return;
|
|
|
|
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) + "'");
|
|
}
|
|
|
|
window.addEvent ('domready', function () {
|
|
buildSpeeddial ();
|
|
});
|
|
|
|
document.onkeypress = function ()
|
|
{
|
|
var id = $('s' + String.fromCharCode (event.which));
|
|
|
|
if ($(id))
|
|
{
|
|
if (getAction (id))
|
|
document.location = $(id).children[1];
|
|
return false;
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="config">
|
|
<span onclick="javascript:setWidth()">{set_dial_width}</span>
|
|
<span onclick="javascript:setCount()">{set_shortcut_count}</span>
|
|
</div>
|
|
<div id="wrap">
|
|
<div id="content">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|