2011-12-02 23:25:27 +01:00
|
|
|
<html><head>
|
2012-01-15 17:15:48 +01:00
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
2011-12-02 23:25:27 +01:00
|
|
|
<title>%SITE-TITLE%</title>
|
|
|
|
|
<link rel="icon" href="%FAVICON%" type="image/x-icon" />
|
|
|
|
|
<style type="text/css" media="screen">
|
2014-05-29 19:04:02 +02:00
|
|
|
html { background: #dddddd url("%IMG_BACKGROUND%") no-repeat center center; background-size: %B_SIZE%; }
|
|
|
|
|
body { font-family: sans-serif; color: #525c66; direction: %DIRECTION%; }
|
|
|
|
|
body * { -webkit-user-select: none; font-size: 100%; line-height: 1.6; margin: 0; }
|
|
|
|
|
.add { %RIGHT_STR%: 6px; background: url(%IMG_PLUS%); }
|
|
|
|
|
.sett { %RIGHT_STR%: 40px; background: url(%IMG_SETTINGS%); }
|
|
|
|
|
.add, .sett { position: absolute; top: 10px; width: 32px; height: 32px; cursor: pointer; border-radius: 2px; }
|
|
|
|
|
.add:hover, .sett:hover { box-shadow: 0 0 1px 2px rgba(255,255,255, 0.5); }
|
|
|
|
|
#quickdial { margin: auto; text-align: center; }
|
2014-05-29 20:53:38 +02:00
|
|
|
#quickdial div.entry { background-color: #ffffff; position: relative; float: %LEFT_STR%; margin: 5px; border-radius: 7px; border: 1px solid rgba(0,0,0, 0.3); background-clip: padding-box; box-shadow: 0 0 1px 1px rgba(0,0,0, 0.2); }
|
|
|
|
|
#quickdial div.entry:hover { box-shadow: 0 0 0 4px rgba(255,255,255, 0.6); }
|
|
|
|
|
#quickdial img { display: block; margin: auto; border-radius: 7px 7px 0 0; }
|
2015-08-29 19:40:49 +02:00
|
|
|
#quickdial img[src="%LOADING-IMG%"]{height:60px;width:60px}
|
2014-05-29 19:04:02 +02:00
|
|
|
#quickdial a { position: absolute; %LEFT_STR%: 0; top: 0; width: 100%; height: 87%; }
|
2015-08-29 19:40:49 +02:00
|
|
|
span.boxTitle { width: 88%; position: absolute; %LEFT_STR%: 0; bottom: 1px; max-height: 20px; margin: 0 6%; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: default; }
|
2014-05-29 19:04:02 +02:00
|
|
|
span.edit, span.close, span.reload { width: 16px; height: 16px; position: absolute; background-position: center; border: 1px solid transparent; display: none; }
|
|
|
|
|
span.edit { %LEFT_STR%: 1px; bottom: 1px; background: url(%IMG_EDIT%) no-repeat; }
|
|
|
|
|
span.close { %RIGHT_STR%: 1px; bottom: 1px; background: url(%IMG_CLOSE%) no-repeat; }
|
|
|
|
|
span.reload { %RIGHT_STR%: 1px; top: 1px; background: url(%IMG_RELOAD%) no-repeat; }
|
|
|
|
|
span.edit:hover, span.close:hover, span.reload:hover { border-color: grey; border-radius: 5px; }
|
|
|
|
|
div.entry:hover .edit, div.entry:hover .close, div.entry:hover .reload { display: inline; }
|
2014-05-29 20:53:38 +02:00
|
|
|
#overlay-edit { width: 380px; margin-%LEFT_STR%: auto; margin-%RIGHT_STR%: auto; margin-top: 5%; background-color: #ffffff; border-radius: 7px; border: 1px solid rgba(0,0,0, 0.3); box-shadow: 0 0 0 5px rgba(255,255,255, 0.6); padding: 15px; padding-bottom: 0; }
|
2014-05-29 19:04:02 +02:00
|
|
|
#overlay-edit img { display: block; margin-%LEFT_STR%: auto; margin-%RIGHT_STR%: auto; max-width: 100%; max-height: auto; }
|
|
|
|
|
#overlay-edit img[src*=".gif"] { width: 54px; height: 55px; }
|
|
|
|
|
#overlay-edit .buttonbox input { margin-%RIGHT_STR%: 0; margin-%LEFT_STR%: 3px; }
|
|
|
|
|
#overlay-edit table { width: 100%; margin-%LEFT_STR%: auto; margin-%RIGHT_STR%: auto; }
|
|
|
|
|
#overlay-edit table input[type="text"] { width: 100%; -webkit-user-select: auto; background-color: #eeeeee; border-radius: 5px; }
|
2014-05-29 20:53:38 +02:00
|
|
|
#settingsBox { margin-%LEFT_STR%: auto; margin-%RIGHT_STR%: auto; margin-top: 5%; width: 350px; height: auto; padding: 15px 20px 0; background-color: #ffffff; border-radius: 7px; border: 1px solid rgba(0,0,0, 0.3); box-shadow: 0 0 0 5px rgba(255,255,255, 0.6); }
|
2014-05-29 19:04:02 +02:00
|
|
|
#settingsBox .content { margin-%LEFT_STR%: auto; margin-%RIGHT_STR%: auto; padding-bottom: 5px; border-bottom: 1px solid #888; }
|
|
|
|
|
#settingsBox .thumbhold { margin-%LEFT_STR%: auto; margin-%RIGHT_STR%: auto; margin-bottom: 5px; border-radius: 10px; text-align: center; width: 180px; height: 100px; background: #AAA; }
|
|
|
|
|
#settingsBox .thumbhold p { padding: 0; background: #ffffff url("%IMG_BACKGROUND%") no-repeat center center; background-size: %B_SIZE%; width: 178px; height: 98px; border-radius: 10px; position: relative; %LEFT_STR%: 1px; top: 1px; line-height: 98px; cursor: default; }
|
|
|
|
|
#settingsBox p label { margin: 2px; padding: 1px; text-align: center; }
|
|
|
|
|
#settingsBox p select { margin: 2px; padding: 1px; text-align: center; width: auto; }
|
|
|
|
|
#settingsBox p select option { text-align: center; }
|
|
|
|
|
#settingsBox .togop { margin-bottom: 1px; padding-bottom: 2px; }
|
|
|
|
|
#settingsBox .button { margin: 2px; padding: 1px; text-align:center; width: 98%; }
|
|
|
|
|
#settingsBox .rowsel { margin: 2px; padding: 3px 0; border-bottom: 1px solid #888; }
|
|
|
|
|
#settingsBox .rowsel input { text-align: center; width: 80%; height: 12px; margin: 0; padding-bottom: 0; }
|
|
|
|
|
#settingsBox .rowsel span { font-weight: bold; text-align: center; margin: 2px; margin-%RIGHT_STR%: 7px; display: inline-block; width: 25px; }
|
|
|
|
|
.buttonbox { margin: 7px 0; text-align: %RIGHT_STR%; }
|
|
|
|
|
.overlay { background: rgba(128,128,128,0.8); background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),rgba(127, 127, 127, 0.5) 35%,rgba(0, 0, 0, 0.7)); bottom: 0; %LEFT_STR%: 0; padding: 20px; padding-bottom: 130px; position: fixed; %RIGHT_STR%: 0; top: 0; }
|
2011-12-02 23:25:27 +01:00
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript" src="%JQUERY%"></script>
|
|
|
|
|
<script type="text/javascript" src="%JQUERY-UI%"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var LOADING_IMAGE = '%LOADING-IMG%';
|
|
|
|
|
var URL = '%URL%';
|
|
|
|
|
var TITLE = '%TITLE%';
|
2012-01-18 21:09:27 +01:00
|
|
|
var EDIT = '%APPLY%';
|
2011-12-02 23:25:27 +01:00
|
|
|
var NEW_PAGE = '%NEW-PAGE%';
|
|
|
|
|
var TITLE_EDIT = '%TITLE-EDIT%';
|
|
|
|
|
var TITLE_REMOVE = '%TITLE-REMOVE%';
|
|
|
|
|
var TITLE_RELOAD = '%TITLE-RELOAD%';
|
2011-12-23 13:47:38 +01:00
|
|
|
var TITLE_FETCHTITLE = '%TITLE-FETCHTITLE%';
|
2012-01-18 21:09:27 +01:00
|
|
|
var MAX_PAGES_ROW = %ROW-PAGES%;
|
2012-01-20 13:10:05 +01:00
|
|
|
var DIAL_WIDTH = %SD-SIZE%;
|
2012-01-19 18:05:21 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
var editingId = -1;
|
|
|
|
|
|
2014-01-04 22:37:18 +01:00
|
|
|
function addSpeedDial()
|
|
|
|
|
{
|
|
|
|
|
onEditClick(addBox('', NEW_PAGE, ''));
|
|
|
|
|
alignPage();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function configureSpeedDial()
|
|
|
|
|
{
|
|
|
|
|
$('#fadeOverlay2').css({'filter' : 'alpha(opacity=100)'}).fadeIn();
|
|
|
|
|
$('#fadeOverlay2').click(function() { $(this).fadeOut('slow'); });
|
|
|
|
|
$('#settingsBox').click(function(event) { event.stopPropagation(); });
|
|
|
|
|
}
|
|
|
|
|
|
2012-07-14 16:19:33 +02:00
|
|
|
function escapeTitle(title) {
|
|
|
|
|
title = title.replace(/"/g, '"');
|
|
|
|
|
title = title.replace(/'/g, ''');
|
|
|
|
|
return title;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function unescapeTitle(title) {
|
|
|
|
|
title = title.replace(/"/g, '"');
|
|
|
|
|
title = title.replace(/'/g, '\'');
|
|
|
|
|
return title;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function escapeUrl(url) {
|
|
|
|
|
url = url.replace(/"/g, '');
|
|
|
|
|
url = url.replace(/'/g, '');
|
|
|
|
|
return url;
|
|
|
|
|
}
|
|
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function onRemoveClick(box) {
|
|
|
|
|
removeBox($(box).index());
|
|
|
|
|
}
|
2011-12-22 21:58:13 +01:00
|
|
|
|
|
|
|
|
function onEditKeyPress(e) {
|
|
|
|
|
if (e.keyCode == 13) {
|
|
|
|
|
boxEdited();
|
|
|
|
|
return false;
|
|
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
else if (e.keyCode == 27) {
|
|
|
|
|
$('#fadeOverlay').click();
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
2011-12-22 21:58:13 +01:00
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-23 13:47:38 +01:00
|
|
|
function onFetchTitleClick(checkbox) {
|
|
|
|
|
var displayStyle;
|
|
|
|
|
checkbox.checked ? displayStyle = 'hidden' : displayStyle = 'visible';
|
|
|
|
|
$('#titleLine').css({'visibility' : displayStyle });
|
|
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2012-03-17 16:01:12 +01:00
|
|
|
function hideEditBox() {
|
|
|
|
|
$('#fadeOverlay').fadeOut("slow", function() {$("#fadeOverlay").remove();});
|
|
|
|
|
}
|
|
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function onEditClick(box) {
|
|
|
|
|
editingId = $(box).index();
|
|
|
|
|
var boxUrl = $(box).children('a').first().attr('href');
|
2012-07-14 16:19:33 +02:00
|
|
|
var boxTitle = escapeTitle($(box).children('span').first().text());
|
2011-12-03 14:43:13 +01:00
|
|
|
if (boxUrl === '')
|
|
|
|
|
boxUrl = 'http://';
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2012-03-17 16:01:12 +01:00
|
|
|
$('body').append('<div id="fadeOverlay" class="overlay" style="display:none;">' +
|
|
|
|
|
'<div id="overlay-edit" onkeypress="return onEditKeyPress(event)">' +
|
|
|
|
|
'<img src="' + $(box).children('img').first().attr('src') + '"> ' +
|
2014-05-29 19:04:02 +02:00
|
|
|
'<table><tr><td>' + URL + ': </td><td>' +
|
2012-03-17 16:01:12 +01:00
|
|
|
'<input type="text" id="formUrl" value="' + boxUrl + '"></td></tr>' +
|
|
|
|
|
'<tr id="titleLine"><td>' + TITLE + ': </td><td>' +
|
|
|
|
|
'<input type="text" id="formTitle" value="' + boxTitle + '"></td></tr>' +
|
|
|
|
|
'<tr><td></td><td><input type="checkbox" id="fetchTitle" onclick="onFetchTitleClick(this)">' +
|
|
|
|
|
'<label for="fetchTitle"> ' + TITLE_FETCHTITLE + ' </label></td></tr>' +
|
2012-04-07 18:41:16 +02:00
|
|
|
'</table><p class="buttonbox"><input type="button" value=" %CLOSE% " onClick="hideEditBox();">' +
|
2012-03-17 16:01:12 +01:00
|
|
|
'<input type="button" value=" ' + EDIT + ' " onClick="boxEdited()"></p>' +
|
|
|
|
|
'</div></div>');
|
|
|
|
|
|
|
|
|
|
$('#fadeOverlay').css({'filter' : 'alpha(opacity=100)'}).fadeIn();
|
|
|
|
|
$('#fadeOverlay').click(function() {hideEditBox()});
|
2011-12-02 23:25:27 +01:00
|
|
|
$('#overlay-edit').click(function(event) { event.stopPropagation(); });
|
2011-12-05 19:54:17 +01:00
|
|
|
$('#formUrl').focus();
|
2011-12-02 23:25:27 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onReloadClick(box) {
|
|
|
|
|
var url = $(box).children('a').first().attr('href');
|
|
|
|
|
var img = $(box).children('img').first();
|
|
|
|
|
|
|
|
|
|
if (url === '')
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
|
|
$(img).attr('src', LOADING_IMAGE);
|
2015-08-28 20:43:37 +02:00
|
|
|
external.speedDial.loadThumbnail(url, false);
|
2011-12-02 23:25:27 +01:00
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function boxEdited() {
|
|
|
|
|
if (editingId == -1)
|
|
|
|
|
return;
|
2011-12-23 13:47:38 +01:00
|
|
|
|
2015-08-28 19:25:45 +02:00
|
|
|
external.speedDial.urlFromUserInput($('#formUrl').attr("value"), function(newUrl) {
|
|
|
|
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[editingId];
|
|
|
|
|
var a = box.getElementsByTagName('a')[0];
|
|
|
|
|
var originalUrl = a.getAttribute('href');
|
|
|
|
|
setBoxUrl(editingId, newUrl);
|
|
|
|
|
setBoxTitle(editingId, $('#formTitle').attr("value"));
|
|
|
|
|
var changedUrl = a.getAttribute('href');
|
|
|
|
|
var fetchTitleChecked = document.getElementById('fetchTitle').checked;
|
|
|
|
|
|
2015-08-28 20:43:37 +02:00
|
|
|
var pages = allPages();
|
|
|
|
|
|
2015-08-28 19:25:45 +02:00
|
|
|
if (fetchTitleChecked || (originalUrl != changedUrl && changedUrl !== '') ) {
|
|
|
|
|
var img = box.getElementsByTagName('img')[0];
|
|
|
|
|
img.setAttribute('src', LOADING_IMAGE);
|
|
|
|
|
|
|
|
|
|
$('#fadeOverlay').fadeOut("slow", function() {
|
|
|
|
|
$("#fadeOverlay").remove();
|
|
|
|
|
});
|
2015-08-28 20:43:37 +02:00
|
|
|
external.speedDial.loadThumbnail(a.getAttribute('href'), fetchTitleChecked);
|
2015-08-28 19:25:45 +02:00
|
|
|
} else {
|
|
|
|
|
hideEditBox();
|
|
|
|
|
}
|
2015-08-28 20:43:37 +02:00
|
|
|
external.speedDial.changed(pages);
|
2015-08-28 19:25:45 +02:00
|
|
|
});
|
2011-12-02 23:25:27 +01:00
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function allPages() {
|
|
|
|
|
var urls = $('a[class="boxUrl"]');
|
|
|
|
|
var titles = $('span[class="boxTitle"]');
|
|
|
|
|
var value = "";
|
|
|
|
|
$('div.entry').each(function(i) {
|
2012-07-14 16:19:33 +02:00
|
|
|
var url = $(this).children('a').first().attr('href');
|
|
|
|
|
var title = $(this).children('span[class="boxTitle"]').first().text();
|
|
|
|
|
|
|
|
|
|
value += 'url:"' + escapeUrl(url) + '"|title:"' + escapeTitle(title) + '";';
|
2011-12-02 23:25:27 +01:00
|
|
|
});
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
return value;
|
|
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2014-05-30 15:12:36 +02:00
|
|
|
function reloadAll() {
|
|
|
|
|
if (confirm("%TITLE-WARN-REL%"))
|
|
|
|
|
$('div.entry').each(function(i) {
|
|
|
|
|
onReloadClick($(this));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function addBox(url, title, img_source) {
|
|
|
|
|
var div = document.createElement('div');
|
|
|
|
|
div.setAttribute('class', 'entry');
|
|
|
|
|
var img = document.createElement('img');
|
|
|
|
|
img.setAttribute('src', img_source);
|
|
|
|
|
var a = document.createElement('a');
|
|
|
|
|
a.setAttribute('href', url);
|
|
|
|
|
a.setAttribute('class', 'boxUrl');
|
|
|
|
|
var span1 = document.createElement('span');
|
|
|
|
|
span1.setAttribute('class', 'boxTitle');
|
2014-05-29 19:04:02 +02:00
|
|
|
span1.setAttribute('title', unescapeTitle(title));
|
2012-07-14 16:19:33 +02:00
|
|
|
span1.innerText = unescapeTitle(title);
|
2011-12-02 23:25:27 +01:00
|
|
|
var span2 = document.createElement('span');
|
|
|
|
|
span2.setAttribute('class', 'edit');
|
|
|
|
|
span2.setAttribute('onClick', 'onEditClick(parentNode)');
|
|
|
|
|
span2.setAttribute('title', TITLE_EDIT);
|
|
|
|
|
var span3 = document.createElement('span');
|
|
|
|
|
span3.setAttribute('class', 'close');
|
|
|
|
|
span3.setAttribute('onClick', 'onRemoveClick(parentNode)');
|
|
|
|
|
span3.setAttribute('title', TITLE_REMOVE);
|
|
|
|
|
var span4 = document.createElement('span');
|
|
|
|
|
span4.setAttribute('class', 'reload');
|
|
|
|
|
span4.setAttribute('onClick', 'onReloadClick(parentNode)');
|
|
|
|
|
span4.setAttribute('title', TITLE_RELOAD);
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
div.appendChild(img);
|
|
|
|
|
div.appendChild(img);
|
|
|
|
|
div.appendChild(a);
|
|
|
|
|
div.appendChild(span1);
|
|
|
|
|
div.appendChild(span2);
|
|
|
|
|
div.appendChild(span3);
|
|
|
|
|
div.appendChild(span4);
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
document.getElementById("quickdial").appendChild(div);
|
2012-01-15 11:48:15 +01:00
|
|
|
|
2014-02-03 23:50:53 +01:00
|
|
|
if (img_source == LOADING_IMAGE) {
|
2015-08-28 20:43:37 +02:00
|
|
|
external.speedDial.loadThumbnail(url, false);
|
2014-02-03 23:50:53 +01:00
|
|
|
}
|
|
|
|
|
|
2012-01-15 11:48:15 +01:00
|
|
|
return div;
|
2011-12-02 23:25:27 +01:00
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function setBoxImage(id, img_source) {
|
|
|
|
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
|
|
|
|
|
if (box === undefined)
|
|
|
|
|
return;
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
var img = box.getElementsByTagName('img')[0];
|
2011-12-04 20:09:44 +01:00
|
|
|
img.setAttribute('src', img_source + '?' + new Date());
|
2011-12-02 23:25:27 +01:00
|
|
|
}
|
2011-12-23 13:47:38 +01:00
|
|
|
|
|
|
|
|
function setTitleToUrl(url, title) {
|
|
|
|
|
var boxes = document.getElementById('quickdial').getElementsByTagName('div');
|
|
|
|
|
for (i = 0; i < boxes.length; ++i) {
|
|
|
|
|
var box = boxes[i];
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-23 13:47:38 +01:00
|
|
|
if (box === undefined)
|
|
|
|
|
continue;
|
2012-01-14 09:54:51 +01:00
|
|
|
|
|
|
|
|
var boxUrl = box.getElementsByTagName('a')[0].getAttribute('href');
|
|
|
|
|
if (url != boxUrl)
|
|
|
|
|
continue;
|
|
|
|
|
|
2011-12-23 13:47:38 +01:00
|
|
|
var span = box.getElementsByTagName('span')[0];
|
|
|
|
|
span.innerText = title;
|
|
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2014-02-03 23:50:53 +01:00
|
|
|
external.speedDial.changed(allPages());
|
2011-12-23 13:47:38 +01:00
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function setImageToUrl(url, img_source) {
|
|
|
|
|
var aElement = $('a[href="' + url + '"]');
|
|
|
|
|
$(aElement).each(function() {
|
|
|
|
|
var box = $(this).parent();
|
|
|
|
|
var imgElement = $(box).children("img").first();
|
|
|
|
|
if ($(imgElement).size() == 0)
|
|
|
|
|
return;
|
|
|
|
|
|
2015-08-28 20:43:37 +02:00
|
|
|
$(imgElement).attr('src', img_source/* + '?' + new Date()*/);
|
2011-12-02 23:25:27 +01:00
|
|
|
});
|
|
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function setBoxUrl(id, url) {
|
|
|
|
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
|
|
|
|
|
if (box === undefined)
|
|
|
|
|
return;
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
var a = box.getElementsByTagName('a')[0];
|
|
|
|
|
a.setAttribute('href', url);
|
|
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function setBoxTitle(id, title) {
|
|
|
|
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
|
|
|
|
|
if (box === undefined)
|
|
|
|
|
return;
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
var span = box.getElementsByTagName('span')[0];
|
|
|
|
|
span.innerText = title;
|
|
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function removeBox(id) {
|
2012-07-26 13:23:10 +02:00
|
|
|
if (confirm("%TITLE-WARN%"))
|
2011-12-02 23:25:27 +01:00
|
|
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
|
|
|
|
|
if (box === undefined)
|
|
|
|
|
return;
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
var url = box.getElementsByTagName('a')[0].getAttribute('href');
|
|
|
|
|
document.getElementById("quickdial").removeChild(box);
|
|
|
|
|
alignPage();
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2014-02-03 23:50:53 +01:00
|
|
|
external.speedDial.removeImageForUrl(url);
|
|
|
|
|
external.speedDial.changed(allPages());
|
2011-12-02 23:25:27 +01:00
|
|
|
}
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
function alignPage() {
|
2015-08-28 20:43:37 +02:00
|
|
|
$('head').append('<style>#quickdial img{height:auto;width:'+DIAL_WIDTH+'px}</style>');
|
2012-01-20 13:10:05 +01:00
|
|
|
$('#quickdial div.entry').css({'width' : DIAL_WIDTH + 'px',
|
|
|
|
|
'height' : Math.round(DIAL_WIDTH / 1.54) + 'px'});
|
|
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
var width = $(window).width();
|
|
|
|
|
var height = $(window).height();
|
2014-05-30 14:55:17 +02:00
|
|
|
var boxWidth = Math.floor(DIAL_WIDTH + 12);
|
|
|
|
|
var boxHeight = Math.floor(Math.round(DIAL_WIDTH / 1.54) + 22);
|
2011-12-02 23:25:27 +01:00
|
|
|
|
2012-01-19 18:05:21 +01:00
|
|
|
var maxBoxes = Math.floor(width / boxWidth);
|
2012-01-18 21:09:27 +01:00
|
|
|
if (maxBoxes > MAX_PAGES_ROW) maxBoxes = MAX_PAGES_ROW;
|
2011-12-02 23:25:27 +01:00
|
|
|
if (maxBoxes < 1) maxBoxes = 1;
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2012-01-19 18:05:21 +01:00
|
|
|
var maxwidth = maxBoxes * boxWidth;
|
2011-12-02 23:25:27 +01:00
|
|
|
$("#quickdial").css('width', maxwidth + 'px');
|
2012-01-14 09:54:51 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
var boxesCount = $("#quickdial").children("div").size();
|
|
|
|
|
var rows = Math.ceil(boxesCount / maxBoxes);
|
2012-01-19 18:05:21 +01:00
|
|
|
var margintop = (height - rows * boxHeight) / 2;
|
2012-01-20 13:10:05 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
if (margintop < 0) margintop = 0;
|
2012-01-20 13:10:05 +01:00
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
$("#quickdial").css('margin-top', margintop + 'px');
|
|
|
|
|
}
|
2012-01-18 20:10:04 +01:00
|
|
|
|
|
|
|
|
function bgImageSel() {
|
2015-08-28 19:25:45 +02:00
|
|
|
external.speedDial.getOpenFileName(function(img) {
|
|
|
|
|
if (img) {
|
|
|
|
|
document.getElementById('BgImgHold').value = img;
|
|
|
|
|
}
|
|
|
|
|
});
|
2012-01-18 20:10:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function saveSettings() {
|
2012-01-20 13:10:05 +01:00
|
|
|
MAX_PAGES_ROW = $('#PgInRow').val();
|
|
|
|
|
DIAL_WIDTH = parseInt($('#SdSize').val());
|
2012-07-29 20:58:23 +02:00
|
|
|
SD_CNTR = ($('#SdCntrToggle').attr('checked') ? 1 : 0 );
|
2012-01-19 18:05:21 +01:00
|
|
|
|
2014-02-03 23:50:53 +01:00
|
|
|
external.speedDial.setBackgroundImage($('#BgImgHold').val());
|
|
|
|
|
external.speedDial.setBackgroundImageSize($('#BgImgSelSiz').val());
|
|
|
|
|
external.speedDial.setPagesInRow(MAX_PAGES_ROW);
|
|
|
|
|
external.speedDial.setSdSize(DIAL_WIDTH);
|
|
|
|
|
external.speedDial.setSdCentered(SD_CNTR);
|
2012-01-20 13:10:05 +01:00
|
|
|
|
|
|
|
|
alignPage();
|
2012-01-18 20:10:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function bgImgToggle() {
|
|
|
|
|
var check = document.getElementById('BgImgToggle');
|
|
|
|
|
var BgImgSel = document.getElementById('BgImgSel');
|
|
|
|
|
var BgImgHold = document.getElementById('BgImgHold');
|
|
|
|
|
var BgImgSz = document.getElementById('BgImgSelSiz');
|
2012-01-19 23:30:00 +01:00
|
|
|
|
|
|
|
|
BgImgSel.disabled = (check.checked ? false : true);
|
|
|
|
|
BgImgHold.disabled = (check.checked ? false : true);
|
|
|
|
|
BgImgSz.disabled = (check.checked ? false : true);
|
2012-07-14 16:19:33 +02:00
|
|
|
BgImgHold.value = (check.checked ? "%IMG_BACKGROUND%" : '');
|
2012-01-19 23:30:00 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function sdSizeToggle() {
|
|
|
|
|
var check = document.getElementById('SdSizeToggle');
|
|
|
|
|
var SdSize = document.getElementById('SdSize');
|
|
|
|
|
var SdSizeSl = document.getElementById('sliderValueSd');
|
2012-04-25 11:20:41 +02:00
|
|
|
|
2012-01-19 23:30:00 +01:00
|
|
|
SdSize.disabled = (check.checked ? false : true);
|
2014-05-29 19:04:02 +02:00
|
|
|
SdSize.value = (check.checked ? SdSize.value : 240);
|
|
|
|
|
SdSizeSl.innerHTML = (check.checked ? DIAL_WIDTH : 240);
|
2012-01-18 20:10:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function bgImgUpdate() {
|
|
|
|
|
var imgUrl = document.getElementById('BgImgHold').value;
|
|
|
|
|
var imgSize = document.getElementById('BgImgSelSiz').value;
|
|
|
|
|
var imgThumb = document.getElementById('thumb');
|
2012-04-25 11:20:41 +02:00
|
|
|
|
2012-01-18 20:10:04 +01:00
|
|
|
imgThumb.style.backgroundImage = 'url("' + imgUrl + '")';
|
|
|
|
|
imgThumb.title = imgUrl.substring(imgUrl.lastIndexOf('/')+1);
|
|
|
|
|
imgThumb.style.backgroundSize = imgSize;
|
2012-04-25 11:20:41 +02:00
|
|
|
|
2013-01-27 13:29:35 +01:00
|
|
|
document.documentElement.style.backgroundImage = 'url("' + imgUrl + '")';
|
|
|
|
|
document.documentElement.style.backgroundSize = imgSize;
|
2012-01-18 20:10:04 +01:00
|
|
|
}
|
|
|
|
|
|
2012-01-19 23:30:00 +01:00
|
|
|
$(document).ready(function () {
|
|
|
|
|
$('#BgImgSelSiz').val('%B_SIZE%').attr('selected','selected');
|
2012-07-14 16:19:33 +02:00
|
|
|
var bgImg = "%IMG_BACKGROUND%";
|
2012-01-20 13:10:05 +01:00
|
|
|
var sdSize = 'DIAL_WIDTH';
|
2012-07-29 20:58:23 +02:00
|
|
|
var sdCntr = "%SD-CNTR%";
|
|
|
|
|
|
2012-01-19 23:30:00 +01:00
|
|
|
bgImg == '' ? $('#BgImgToggle').prop('checked', false) : $('#BgImgToggle').prop('checked', true)
|
2014-05-29 19:04:02 +02:00
|
|
|
sdSize == '240' ? $('#SdSizeToggle').prop('checked', false) : $('#SdSizeToggle').prop('checked', true)
|
2012-01-19 23:30:00 +01:00
|
|
|
$('#BgImgToggle').is(':checked') ? $('#BgImgSel').removeAttr('disabled') : $('#BgImgSel').attr('disabled', 'disabled');
|
|
|
|
|
$('#BgImgToggle').is(':checked') ? $('#BgImgSelSiz').removeAttr('disabled') : $('#BgImgSelSiz').attr('disabled', 'disabled');
|
|
|
|
|
$('#SdSizeToggle').is(':checked') ? $('#SdSize').removeAttr('disabled') : $('#SdSize').attr('disabled', 'disabled');
|
2012-07-29 20:58:23 +02:00
|
|
|
sdCntr == 0 ? $('#SdCntrToggle').prop('checked', false) : $('#SdCntrToggle').prop('checked', true);
|
2012-07-29 22:12:44 +02:00
|
|
|
sdCntr == 0 ? '' : $('#quickdial div.entry').css({'float':'none', 'display':'inline-block'});
|
2012-01-19 23:30:00 +01:00
|
|
|
});
|
|
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="quickdial"></div>
|
2014-01-04 22:37:18 +01:00
|
|
|
<a onClick="configureSpeedDial()" title="%SETTINGS-TITLE%" class="sett"></a>
|
|
|
|
|
<a onClick="addSpeedDial()" title="%ADD-TITLE%" class="add"></a>
|
2011-12-02 23:25:27 +01:00
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
2015-08-28 19:25:45 +02:00
|
|
|
|
|
|
|
|
function init()
|
|
|
|
|
{
|
|
|
|
|
%INITIAL-SCRIPT%
|
2015-08-28 20:43:37 +02:00
|
|
|
|
2015-08-28 19:25:45 +02:00
|
|
|
external.speedDial.pagesChanged.connect(function() {
|
|
|
|
|
window.location.reload();
|
|
|
|
|
});
|
|
|
|
|
|
2015-08-28 20:43:37 +02:00
|
|
|
external.speedDial.thumbnailLoaded.connect(setImageToUrl);
|
|
|
|
|
external.speedDial.pageTitleLoaded.connect(setTitleToUrl);
|
2015-08-28 19:25:45 +02:00
|
|
|
|
|
|
|
|
$(window).resize(function() { alignPage(); });
|
|
|
|
|
$("div").disableSelection();
|
|
|
|
|
$("#quickdial").sortable({
|
|
|
|
|
revert: true,
|
|
|
|
|
cursor: 'move',
|
|
|
|
|
containment: 'document',
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
distance: 40,
|
|
|
|
|
update: function(event, ui) {
|
|
|
|
|
external.speedDial.changed(allPages());
|
|
|
|
|
}
|
|
|
|
|
});
|
2015-08-28 20:43:37 +02:00
|
|
|
|
|
|
|
|
alignPage();
|
2015-08-28 19:25:45 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Initialize
|
|
|
|
|
if (window.external) {
|
|
|
|
|
init();
|
|
|
|
|
} else {
|
|
|
|
|
document.addEventListener('qz_external_created', init);
|
|
|
|
|
}
|
|
|
|
|
|
2011-12-02 23:25:27 +01:00
|
|
|
</script>
|
2012-03-17 16:01:12 +01:00
|
|
|
<div id="fadeOverlay2" class="overlay" style="display:none;">
|
2012-01-19 18:05:21 +01:00
|
|
|
<div id="settingsBox">
|
2012-01-19 23:30:00 +01:00
|
|
|
<div class="togop">
|
|
|
|
|
<label for="PgInRow">%TXT_NRROWS%</label>
|
2012-01-19 18:05:21 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="rowsel">
|
|
|
|
|
<span id="sliderValuePg">%ROW-PAGES%</span>
|
2014-05-29 19:04:02 +02:00
|
|
|
<input id="PgInRow" type="range" min="2" max="10" value="%ROW-PAGES%" step="1" onchange="$('#sliderValuePg').html(this.value);" />
|
2012-01-19 23:30:00 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="togop">
|
2012-07-29 20:58:23 +02:00
|
|
|
<input type="checkbox" name="sdcntrt" id="SdCntrToggle" /> <label for="SdCntrToggle">%TXT_CNTRDLS%</label><br />
|
2012-01-19 23:30:00 +01:00
|
|
|
<input type="checkbox" name="sdsizet" id="SdSizeToggle" onchange="sdSizeToggle()" /> <label for="SdSizeToggle">%TXT_SDSIZE%</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rowsel">
|
|
|
|
|
<span id="sliderValueSd">%SD-SIZE%</span>
|
2014-05-29 19:04:02 +02:00
|
|
|
<input id="SdSize" type="range" min="100" max="500" value="%SD-SIZE%" step="1" onchange="$('#sliderValueSd').html(this.value);" />
|
2012-01-19 23:30:00 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="togop">
|
|
|
|
|
<input type="checkbox" name="sdbackimg" id="BgImgToggle" onchange="bgImgToggle();bgImgUpdate()" /> <label for="BgImgToggle">%TXT_NOTE%</label>
|
2012-01-19 18:05:21 +01:00
|
|
|
</div>
|
2012-03-17 16:01:12 +01:00
|
|
|
<div id="BgImgSel" class="thumbhold" onclick="if($('#BgImgSelSiz').attr('disabled')!='disabled') {bgImageSel();bgImgUpdate();}" disabled="disabled"><p id="thumb">%TXT_SELECTIMAGE%</p></div>
|
2012-01-19 18:05:21 +01:00
|
|
|
<div class="content">
|
|
|
|
|
<p>
|
|
|
|
|
<input id="BgImgHold" type="hidden" value="%IMG_BACKGROUND%" />
|
|
|
|
|
</p>
|
2012-03-17 16:01:12 +01:00
|
|
|
<center><p>
|
|
|
|
|
<label for="BgImgSelSiz">%TXT_PLACEMENT%</label>
|
2012-01-19 18:05:21 +01:00
|
|
|
<select id="BgImgSelSiz" name="imgselsize" onchange="bgImgUpdate()">
|
|
|
|
|
<option value="auto">%TXT_AUTO%</option>
|
|
|
|
|
<option value="cover">%TXT_COVER%</option>
|
|
|
|
|
<option value="contain">%TXT_FIT%</option>
|
|
|
|
|
<option value="100% auto">%TXT_FWIDTH%</option>
|
|
|
|
|
<option value="auto 100%">%TXT_FHEIGHT%</option>
|
|
|
|
|
</select>
|
2012-03-17 16:01:12 +01:00
|
|
|
</p></center>
|
2012-01-19 18:05:21 +01:00
|
|
|
</div>
|
2012-03-17 16:01:12 +01:00
|
|
|
<p class="buttonbox">
|
2014-02-15 23:50:54 +01:00
|
|
|
<input type="button" value=" %CLOSE% " onClick="$('#fadeOverlay2').fadeOut('slow');" />
|
|
|
|
|
<input type="button" value=" %APPLY% " onClick="saveSettings();$('#fadeOverlay2').fadeOut('slow');"/>
|
|
|
|
|
</p>
|
2012-01-19 01:10:01 +01:00
|
|
|
</div>
|
2012-01-18 20:10:04 +01:00
|
|
|
</div>
|
2011-12-02 23:25:27 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
