2009-05-07 20:22:43 +00:00
|
|
|
<!--
|
|
|
|
|
Speed Dial head template for Midori.
|
|
|
|
|
Copyright (C) 2009 Jean-François Guchens <zcx000@gmail.com>
|
2011-10-14 17:42:29 +00:00
|
|
|
Copyright (C) 2011 Paweł Forysiuk <tuxator@o2.pl>
|
|
|
|
|
Copyright (C) 2011 Cassidy James <email@cassidyjames.com>
|
2009-05-07 20:22:43 +00:00
|
|
|
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>
|
2011-11-17 00:18:03 +00:00
|
|
|
|
|
|
|
|
/* 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 */
|
|
|
|
|
|
2011-10-09 23:38:39 +00:00
|
|
|
* {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #4d4d4d;
|
2015-09-12 00:47:06 +00:00
|
|
|
-webkit-user-select: none;
|
2009-05-13 21:56:55 +00:00
|
|
|
}
|
|
|
|
|
|
2011-10-09 23:38:39 +00:00
|
|
|
html, body {
|
2009-05-07 20:22:43 +00:00
|
|
|
font-family: sans-serif;
|
2011-10-09 23:38:39 +00:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
outline: 0;
|
2015-09-12 00:47:06 +00:00
|
|
|
background: #eee;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
width: 85%;
|
2009-05-07 20:22:43 +00:00
|
|
|
}
|
|
|
|
|
|
2009-05-15 21:47:32 +00:00
|
|
|
#content {
|
2011-11-17 00:19:10 +00:00
|
|
|
width: 96%;
|
|
|
|
|
height: 85%;
|
2011-10-09 23:38:39 +00:00
|
|
|
margin: 0 auto;
|
2011-11-17 00:19:10 +00:00
|
|
|
padding-top: 5%;
|
|
|
|
|
padding-left: 2%;
|
2009-05-15 21:47:32 +00:00
|
|
|
}
|
|
|
|
|
|
2009-05-07 20:22:43 +00:00
|
|
|
div.shortcut {
|
2011-10-09 23:38:39 +00:00
|
|
|
width: 25%;
|
|
|
|
|
height: 33%;
|
2009-05-07 20:22:43 +00:00
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
2011-10-09 23:38:39 +00:00
|
|
|
div.shortcut .preview {
|
2011-11-17 00:19:10 +00:00
|
|
|
width: 85%;
|
|
|
|
|
height: 75%;
|
|
|
|
|
margin: auto;
|
2015-09-12 00:47:06 +00:00
|
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
|
|
|
|
|
0 1px 2px rgba(0,0,0,0.24);
|
2011-10-10 23:52:39 +00:00
|
|
|
position: relative;
|
2015-09-12 00:47:06 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
|
transition: all 200ms ease-in-out;
|
|
|
|
|
outline: none;
|
2011-10-10 23:52:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.shortcut .preview img {
|
|
|
|
|
width: 100%;
|
2011-11-17 00:19:10 +00:00
|
|
|
height: 100%;
|
2011-10-10 23:52:39 +00:00
|
|
|
cursor: pointer;
|
2015-09-12 00:47:06 +00:00
|
|
|
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;
|
2009-05-07 20:22:43 +00:00
|
|
|
}
|
|
|
|
|
|
2011-10-09 23:38:39 +00:00
|
|
|
div.shortcut .preview.new .add {
|
2015-09-12 00:47:06 +00:00
|
|
|
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;
|
2010-06-01 21:56:04 +00:00
|
|
|
}
|
|
|
|
|
|
2011-10-09 23:38:39 +00:00
|
|
|
.title {
|
2015-09-12 00:47:06 +00:00
|
|
|
background: transparent;
|
|
|
|
|
border: 2px solid transparent;
|
|
|
|
|
display: block;
|
2011-10-09 23:38:39 +00:00
|
|
|
text-align: center;
|
2011-11-17 00:19:10 +00:00
|
|
|
margin: 8px;
|
2015-09-12 00:47:06 +00:00
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
2011-03-22 21:59:56 +00:00
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
overflow: hidden;
|
2009-05-09 14:41:01 +00:00
|
|
|
cursor: text;
|
2015-09-12 00:47:06 +00:00
|
|
|
outline: none;
|
|
|
|
|
transition: all 200ms ease-in-out;
|
|
|
|
|
padding-bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.preview.new ~ .title {
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title.active {
|
|
|
|
|
border-bottom-color: #4CAF50;
|
2010-05-16 15:56:22 +00:00
|
|
|
}
|
|
|
|
|
|
2011-10-09 23:38:39 +00:00
|
|
|
.cross {
|
2015-09-12 00:47:06 +00:00
|
|
|
color: #fff;
|
2011-10-09 23:38:39 +00:00
|
|
|
display: block;
|
2015-09-12 00:47:06 +00:00
|
|
|
width: 32px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 32px;
|
2011-10-09 23:38:39 +00:00
|
|
|
top: -14px;
|
2011-10-12 23:40:39 +00:00
|
|
|
right: -14px;
|
2011-10-10 23:52:39 +00:00
|
|
|
position: absolute;
|
2010-05-16 15:56:22 +00:00
|
|
|
cursor: pointer;
|
2011-10-10 23:52:39 +00:00
|
|
|
opacity: 0;
|
2015-09-12 00:47:06 +00:00
|
|
|
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;
|
2011-10-10 23:52:39 +00:00
|
|
|
}
|
|
|
|
|
|
2011-10-14 17:42:29 +00:00
|
|
|
div.shortcut .preview:hover .cross {
|
2011-11-17 00:18:03 +00:00
|
|
|
-webkit-animation: popin 250ms ease-in-out;
|
2011-10-10 23:52:39 +00:00
|
|
|
opacity: 1;
|
2010-05-16 15:56:22 +00:00
|
|
|
}
|
2010-06-01 21:56:04 +00:00
|
|
|
|
2011-10-09 23:38:39 +00:00
|
|
|
.box.added {
|
|
|
|
|
display:none;
|
2010-06-01 21:56:04 +00:00
|
|
|
}
|
|
|
|
|
|
2015-09-12 00:47:06 +00:00
|
|
|
.selectable {
|
|
|
|
|
-webkit-user-select: text;
|
2012-01-05 23:27:07 +00:00
|
|
|
}
|
2009-05-07 20:22:43 +00:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
2015-09-12 00:47:06 +00:00
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
}
|
2009-05-13 21:56:55 +00:00
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
function add_tile (ev) {
|
|
|
|
|
ev.preventDefault();
|
2009-05-07 20:22:43 +00:00
|
|
|
|
|
|
|
|
var url = prompt ("{enter_shortcut_address}", "http://");
|
2013-10-24 03:45:02 +00:00
|
|
|
if (!url)
|
|
|
|
|
return false;
|
|
|
|
|
|
2010-06-06 21:29:08 +00:00
|
|
|
if (url.indexOf ("://") == -1)
|
|
|
|
|
url = "http://" + url;
|
2009-05-07 20:22:43 +00:00
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
var id = ev.target.parentNode.parentNode.id;
|
|
|
|
|
console.log ("speed_dial-save-add " + id + " " + url);
|
2009-05-07 20:22:43 +00:00
|
|
|
}
|
|
|
|
|
|
2015-09-12 00:47:06 +00:00
|
|
|
function done_editing_title (ev) {
|
|
|
|
|
input = ev.target;
|
|
|
|
|
input.className = "title";
|
2009-05-09 21:29:35 +00:00
|
|
|
|
2015-09-12 00:47:06 +00:00
|
|
|
var name = ev.target.value;
|
|
|
|
|
if (name == "")
|
|
|
|
|
name = previousName;
|
2013-10-24 03:45:02 +00:00
|
|
|
var id = ev.target.parentNode.id;
|
2011-03-22 21:59:56 +00:00
|
|
|
console.log ("speed_dial-save-rename " + id + " " + name);
|
2009-05-09 14:41:01 +00:00
|
|
|
}
|
2009-05-07 20:22:43 +00:00
|
|
|
|
2015-09-12 00:47:06 +00:00
|
|
|
function editing_tile (ev) {
|
|
|
|
|
input = ev.target;
|
|
|
|
|
previousName = input.value;
|
|
|
|
|
// indicate to user they are editing the title
|
|
|
|
|
input.className = input.className + " active";
|
|
|
|
|
}
|
|
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
function delete_tile (ev) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
|
|
|
|
|
if (!confirm("{are_you_sure}"))
|
2009-05-07 20:22:43 +00:00
|
|
|
return;
|
|
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
var id = ev.target.parentNode.parentNode.id;
|
2011-03-22 21:59:56 +00:00
|
|
|
console.log ("speed_dial-save-delete " + id);
|
2009-05-09 21:29:35 +00:00
|
|
|
}
|
|
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
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;
|
|
|
|
|
|
2015-09-12 00:47:06 +00:00
|
|
|
/* 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;
|
|
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
ev.preventDefault();
|
|
|
|
|
var ele = ev.target;
|
|
|
|
|
cursor = ele.style.cursor;
|
|
|
|
|
ele.style.cursor = 'move';
|
2011-12-18 00:51:10 +00:00
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
var eparent = get_dial_div (ele);
|
|
|
|
|
if (eparent != undefined) {
|
|
|
|
|
eparent.className = 'shortcut selected';
|
|
|
|
|
firstNode = eparent.id;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function up (ev) {
|
|
|
|
|
if (ev == undefined)
|
|
|
|
|
return;
|
2012-09-14 23:21:52 +00:00
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
ev.preventDefault();
|
|
|
|
|
ele = ev.target;
|
|
|
|
|
var eparent = get_dial_div (ele);
|
|
|
|
|
|
|
|
|
|
ele.style.cursor = cursor;
|
2015-09-12 00:47:06 +00:00
|
|
|
if(eparent != undefined) secondNode = eparent.id;
|
|
|
|
|
else return;
|
2013-10-24 03:45:02 +00:00
|
|
|
|
|
|
|
|
/* ommit just mere clicking the dial */
|
|
|
|
|
if (firstNode != secondNode && firstNode != undefined)
|
|
|
|
|
swap();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function over (ev) {
|
|
|
|
|
if (ev == undefined)
|
|
|
|
|
return;
|
2012-01-10 01:25:22 +00:00
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
ev.preventDefault();
|
|
|
|
|
var ele = ev.target;
|
|
|
|
|
var eparent = get_dial_div (ele);
|
|
|
|
|
|
|
|
|
|
var dial = document.getElementsByClassName("shortcut");
|
|
|
|
|
if (firstNode != undefined)
|
2011-12-18 00:51:10 +00:00
|
|
|
{
|
2013-10-24 03:45:02 +00:00
|
|
|
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';
|
|
|
|
|
}
|
2011-12-18 00:51:10 +00:00
|
|
|
}
|
|
|
|
|
}
|
2013-10-24 03:45:02 +00:00
|
|
|
ele.style.cursor = cursor;
|
|
|
|
|
}
|
2012-09-14 23:21:52 +00:00
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
function swap () {
|
|
|
|
|
console.log ("speed_dial-save-swap " + firstNode + " " + secondNode);
|
|
|
|
|
};
|
2012-09-14 23:21:52 +00:00
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
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++) {
|
2015-09-12 00:47:06 +00:00
|
|
|
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);
|
|
|
|
|
}
|
2013-10-24 03:45:02 +00:00
|
|
|
}
|
2013-10-24 03:26:27 +00:00
|
|
|
|
2013-10-24 03:45:02 +00:00
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2009-05-08 00:56:26 +00:00
|
|
|
</script>
|
2009-05-07 20:22:43 +00:00
|
|
|
</head>
|
2013-10-24 03:45:02 +00:00
|
|
|
<body onload="init ();">
|
2011-10-09 23:38:39 +00:00
|
|
|
<div id="content">
|
