<!--
Speed Dial head template for Midori.
Copyright (C) 2009 Jean-François Guchens <zcx000@gmail.com>
Copyright (C) 2011 Paweł Forysiuk <tuxator@o2.pl>
Copyright (C) 2011 Cassidy James <email@cassidyjames.com>
This file is licensed under the terms of the expat license, see the file EXPAT.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<style>
/* Animations */
@-webkit-keyframes popin {
0% { opacity: 0.0; -webkit-transform: scale(0.00); }
75% { opacity: 0.5; -webkit-transform: scale(1.15); }
100% { opacity: 1.0; -webkit-transform: scale(1.00); }
}
/* Styles */
* {
margin: 0;
padding: 0;
cursor: default;
font-size: 13px;
color: #4d4d4d;
-webkit-user-select: none;
}
html, body {
font-family: sans-serif;
width: 100%;
height: 100%;
outline: 0;
background: #eee;
}
input {
width: 85%;
}
#content {
width: 96%;
height: 85%;
margin: 0 auto;
padding-top: 5%;
padding-left: 2%;
}
div.shortcut {
width: 25%;
height: 33%;
float: left;
}
div.shortcut .preview {
width: 85%;
height: 75%;
margin: auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
position: relative;
border-radius: 3px;
transition: all 200ms ease-in-out;
outline: none;
}
div.shortcut .preview img {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 3px;
}
div.shortcut .preview.new {
background-color: rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.15);
box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.05),
0 1px 0 0 rgba(255,255,255,0.40);
overflow: hidden;
}
div.shortcut .preview.new .add {
background-color: #777;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
border-radius: 32px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px;
margin-top: -32px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
outline: none;
}
div.shortcut .preview.new .add:after {
content: "+";
color: #fff;
font-size: 48px;
display: inline-block;
}
.title {
background: transparent;
border: 2px solid transparent;
display: block;
text-align: center;
margin: 8px;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: text;
outline: none;
transition: all 200ms ease-in-out;
padding-bottom: 6px;
}
.preview.new ~ .title {
cursor: default;
}
.title.active {
border-bottom-color: #4CAF50;
}
.cross {
color: #fff;
display: block;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
top: -14px;
right: -14px;
position: absolute;
cursor: pointer;
opacity: 0;
background-color: #555;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
}
.cross:after {
content: '+';
-webkit-transform: rotate(45deg);
font-size: 22px;
display: inline-block;
}
div.shortcut .preview:hover .cross {
-webkit-animation: popin 250ms ease-in-out;
opacity: 1;
}
.box.added {
display:none;
}
.selectable {
-webkit-user-select: text;
}
</style>
<script type="text/javascript">
var previousName = "";
function input_key_down (ev) {
// 13 is the key code for enter
if(ev.keyCode == 13) ev.target.blur();
// 27 is the key code for escape
if(ev.keyCode == 27) {
ev.target.value = previousName;
ev.target.blur();
}
}
function add_tile (ev) {
ev.preventDefault();
var url = prompt ("{enter_shortcut_address}", "http://");
if (!url)
return false;
if (url.indexOf ("://") == -1)
url = "http://" + url;
var id = ev.target.parentNode.parentNode.id;
console.log ("speed_dial-save-add " + id + " " + url);
}
function done_editing_title (ev) {
input = ev.target;
input.className = "title";
var name = ev.target.value;
if (name == "")
name = previousName;
var id = ev.target.parentNode.id;
console.log ("speed_dial-save-rename " + id + " " + name);
}
function editing_tile (ev) {
input = ev.target;
previousName = input.value;
// indicate to user they are editing the title
input.className = input.className + " active";
}
function delete_tile (ev) {
ev.preventDefault();
if (!confirm("{are_you_sure}"))
return;
var id = ev.target.parentNode.parentNode.id;
console.log ("speed_dial-save-delete " + id);
}
var firstNode, secondNode;
var cursor;
var get_dial_div = function (ele) {
var dial_div;
if (ele.nodeName == 'IMG')
dial_div = ele.parentNode.parentNode.parentNode;
if (ele.className == 'title')
dial_div = ele.parentNode;
if (ele.className.indexOf ('shortcut') != -1)
dial_div = ele;
return dial_div;
}
function click (ev) {
if (ev == undefined)
return;
/* If the target of the event is an element of class title
* and not also of class add-shortcut we are editing title
*/
var classes = ev.target.className.split(" ");
var edit_title = false;
for (var i = 0; i < classes.length; i++) {
if(classes[i] == "add-shortcut") {
edit_title = false;
break;
}
if(classes[i] == "title")
edit_title = true;
}
if(edit_title)
return;
ev.preventDefault();
var ele = ev.target;
cursor = ele.style.cursor;
ele.style.cursor = 'move';
var eparent = get_dial_div (ele);
if (eparent != undefined) {
eparent.className = 'shortcut selected';
firstNode = eparent.id;
}
};
function up (ev) {
if (ev == undefined)
return;
ev.preventDefault();
ele = ev.target;
var eparent = get_dial_div (ele);
ele.style.cursor = cursor;
if(eparent != undefined) secondNode = eparent.id;
else return;
/* ommit just mere clicking the dial */
if (firstNode != secondNode && firstNode != undefined)
swap();
};
function over (ev) {
if (ev == undefined)
return;
ev.preventDefault();
var ele = ev.target;
var eparent = get_dial_div (ele);
var dial = document.getElementsByClassName("shortcut");
if (firstNode != undefined)
{
eparent.className = 'shortcut selected';
for (var i = 0; i < dial.length; i++) {
if (eparent.id != firstNode.id && dial[i].id != eparent.id) {
dial[i].className = 'shortcut';
}
}
}
ele.style.cursor = cursor;
}
function swap () {
console.log ("speed_dial-save-swap " + firstNode + " " + secondNode);
};
function init () {
var new_tile = document.getElementsByClassName ("preview new");
new_tile[0].addEventListener ('click', add_tile, false);
var titles = document.getElementsByClassName ("title");
var len = titles.length;
for (var i = 0; i < len; i++) {
if (titles[i].parentNode.childNodes[0].className != "preview new") {
titles[i].addEventListener ('click', editing_tile, false);
titles[i].addEventListener ('blur', done_editing_title, false);
titles[i].addEventListener ('keydown', input_key_down, false);
}
}
var crosses = document.getElementsByClassName ("cross");
var len = crosses.length;
for (var i = 0; i < len; i++)
crosses[i].addEventListener ('click', delete_tile, false);
var occupied_tiles = document.getElementsByClassName ("shortcut");
var len = occupied_tiles.length;
for (var i = 0; i < len; i++) {
if (occupied_tiles[i].childNodes[0].className != "preview new") {
occupied_tiles[i].addEventListener('mousedown', click, false);
occupied_tiles[i].addEventListener('mouseover', over, false);
occupied_tiles[i].addEventListener('mouseup', up, false);
}
}
}
</script>
</head>
<body onload="init ();">
<div id="content">