b74d00abe6
So the layout is right with and without javascript. And we also hide the Edit and Remove buttons and options appropriately.
310 lines
6.8 KiB
HTML
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">
|