midori/data/speeddial-head.html
Paweł Forysiuk b74d00abe6 Set speed dial size without javascript
So the layout is right with and without javascript. And we
also hide the Edit and Remove buttons and options appropriately.
2011-05-04 22:45:00 +02:00

310 lines
6.8 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: 40px;
}
div.shortcut {
float: left;
border: 1px solid #ccc;
position: relative;
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;
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;
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-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)
{
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">