You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
458 lines
18 KiB
458 lines
18 KiB
<html><head> |
|
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
<title>%SITE-TITLE%</title> |
|
<link rel="icon" href="%FAVICON%" type="image/x-icon" /> |
|
<style type="text/css" media="screen"> |
|
body {background: #eeeeee url("%IMG_BACKGROUND%") no-repeat center center;background-size: %B_SIZE%;font: 13px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;color: #525c66;} |
|
body * {-webkit-user-select: none;font-size: 100%;line-height: 1.6;margin: 0px;} |
|
.add {position: absolute;right:10px;top:10px;width: 24px;height: 24px;background: url(%IMG_PLUS%); cursor: pointer;} |
|
|
|
#quickdial {margin: auto;text-align: center;} |
|
#quickdial div.entry {position: relative; float: left;border-width: 10px; |
|
-webkit-border-image: url(%BOX-BORDER%) 10;margin: 5px;} |
|
#quickdial img {display: block;margin: auto;} |
|
#quickdial a {position: absolute;left: 0px;top: 0px;width: 100%;height: 87%;} |
|
|
|
div.entry:hover .edit, div.entry:hover .close, div.entry:hover .reload{display: inline;} |
|
span.boxTitle {width:100%;max-height: 20px; position: absolute;top: 88%;left: 0px;text-align: center;overflow:hidden;} |
|
span.close {width: 14px;height: 14px;position: absolute;left: 92%;top: 90%; |
|
background: url(%IMG_CLOSE%) no-repeat;background-position: center;border: 1px solid transparent;display: none;} |
|
span.close:hover {border-color: grey; border-radius: 3px;} |
|
span.edit {width: 14px;height: 14px;position: absolute;left: 0px;top: 90%; |
|
background: url(%IMG_EDIT%) no-repeat;background-position: center;border: 1px solid transparent;display: none;} |
|
span.edit:hover {border-color: grey; border-radius: 3px;} |
|
span.reload {width: 16px;height: 16px;position: absolute;left: 92%;top: 0px;background: url(%IMG_RELOAD%) no-repeat;background-position: center;border: 1px solid transparent;display: none;} |
|
span.reload:hover {border-color: grey; border-radius: 4px;} |
|
|
|
#overlay-edit {width: 380px;max-height: 265px;border-width: 20px;margin-left:auto;margin-right: auto;margin-top: 100px;-webkit-border-image: url(%BOX-BORDER%) 25;-webkit-box-shadow: 0px 5px 80px #505050;border-radius:10px;} |
|
#overlay-edit img {display: block;margin-left: auto;margin-right: auto;} |
|
#overlay-edit .buttonbox input {margin-right:0px;margin-left:3px;} |
|
|
|
.formTable {width: 350px;margin-left: auto;margin-right: auto;margin-top: 15px;} |
|
.formTable input[type="text"] {width: 100%;-webkit-user-select: auto;} |
|
|
|
.sett {position: absolute;right:36px;top:10px;width: 24px;height: 24px;background: url(%IMG_SETTINGS%); cursor: pointer;} |
|
#settingsBox {margin-left:auto;margin-right: auto;margin-top: 100px;width: 350px;height: auto;padding:0 8px;-webkit-border-image: url(%BOX-BORDER%) 25;-webkit-box-shadow: 0px 5px 80px #505050;border-radius:10px;border-width: 20px;} |
|
#settingsBox .content {margin-left:auto;margin-right:auto;padding-bottom:2px;border-bottom: 1px solid #888;} |
|
#settingsBox .thumbhold {margin-left:auto;margin-right:auto;margin-bottom: 5px;padding: 1px;border-radius: 10px;text-align:center;width:180px;height:100px;background: #AAA;} |
|
#settingsBox .thumbhold p {padding: 0;background: #eeeeee url("%IMG_BACKGROUND%") no-repeat center center;background-size: %B_SIZE%;width: 178px;height:98px;border-radius: 10px;position: relative;left: 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: 0px;padding-bottom: 0;} |
|
#settingsBox .rowsel span {font-weight: bold;text-align: center;margin: 2px;margin-right: 7px;display: inline-block;width: 25px;} |
|
|
|
.buttonbox {margin-top: 5px;margin-bottom:-5px;text-align:right;} |
|
.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: 0;padding: 20px;padding-bottom: 130px;position: fixed;right:0;top:0;} |
|
</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%'; |
|
var EDIT = '%APPLY%'; |
|
var NEW_PAGE = '%NEW-PAGE%'; |
|
var TITLE_EDIT = '%TITLE-EDIT%'; |
|
var TITLE_REMOVE = '%TITLE-REMOVE%'; |
|
var TITLE_RELOAD = '%TITLE-RELOAD%'; |
|
var TITLE_FETCHTITLE = '%TITLE-FETCHTITLE%'; |
|
var MAX_PAGES_ROW = %ROW-PAGES%; |
|
var DIAL_WIDTH = %SD-SIZE%; |
|
|
|
var editingId = -1; |
|
|
|
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; |
|
} |
|
|
|
function onRemoveClick(box) { |
|
removeBox($(box).index()); |
|
} |
|
|
|
function onEditKeyPress(e) { |
|
if (e.keyCode == 13) { |
|
boxEdited(); |
|
return false; |
|
} |
|
else if (e.keyCode == 27) { |
|
$('#fadeOverlay').click(); |
|
return false; |
|
} |
|
return true; |
|
} |
|
|
|
function onFetchTitleClick(checkbox) { |
|
var displayStyle; |
|
checkbox.checked ? displayStyle = 'hidden' : displayStyle = 'visible'; |
|
$('#titleLine').css({'visibility' : displayStyle }); |
|
} |
|
|
|
function hideEditBox() { |
|
$('#fadeOverlay').fadeOut("slow", function() {$("#fadeOverlay").remove();}); |
|
} |
|
|
|
function onEditClick(box) { |
|
editingId = $(box).index(); |
|
var boxUrl = $(box).children('a').first().attr('href'); |
|
var boxTitle = escapeTitle($(box).children('span').first().text()); |
|
if (boxUrl === '') |
|
boxUrl = 'http://'; |
|
|
|
$('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') + '"> ' + |
|
'<table class="formTable"><tr><td>' + URL + ': </td><td>' + |
|
'<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>' + |
|
'</table><p class="buttonbox"><input type="button" value=" %CLOSE% " onClick="hideEditBox();">' + |
|
'<input type="button" value=" ' + EDIT + ' " onClick="boxEdited()"></p>' + |
|
'</div></div>'); |
|
|
|
$('#fadeOverlay').css({'filter' : 'alpha(opacity=100)'}).fadeIn(); |
|
$('#fadeOverlay').click(function() {hideEditBox()}); |
|
$('#overlay-edit').click(function(event) { event.stopPropagation(); }); |
|
$('#formUrl').focus(); |
|
} |
|
|
|
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); |
|
speeddial.loadThumbnail(url); |
|
} |
|
|
|
function boxEdited() { |
|
if (editingId == -1) |
|
return; |
|
|
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[editingId]; |
|
var a = box.getElementsByTagName('a')[0]; |
|
var originalUrl = a.getAttribute('href'); |
|
setBoxUrl(editingId, speeddial.urlFromUserInput($('#formUrl').attr("value"))); |
|
setBoxTitle(editingId, $('#formTitle').attr("value")); |
|
var changedUrl = a.getAttribute('href'); |
|
var fetchTitleChecked = document.getElementById('fetchTitle').checked; |
|
|
|
if (fetchTitleChecked || (originalUrl != changedUrl && changedUrl !== '') ) { |
|
var img = box.getElementsByTagName('img')[0]; |
|
img.setAttribute('src', LOADING_IMAGE); |
|
|
|
$('#fadeOverlay').fadeOut("slow", function() { |
|
$("#fadeOverlay").remove(); |
|
speeddial.loadThumbnail(a.getAttribute('href'), fetchTitleChecked); |
|
speeddial.removeImageForUrl(a.getAttribute('href')); |
|
}); |
|
} else { |
|
hideEditBox(); |
|
} |
|
speeddial.changed(allPages()); |
|
} |
|
|
|
function allPages() { |
|
var urls = $('a[class="boxUrl"]'); |
|
var titles = $('span[class="boxTitle"]'); |
|
var value = ""; |
|
$('div.entry').each(function(i) { |
|
var url = $(this).children('a').first().attr('href'); |
|
var title = $(this).children('span[class="boxTitle"]').first().text(); |
|
|
|
value += 'url:"' + escapeUrl(url) + '"|title:"' + escapeTitle(title) + '";'; |
|
}); |
|
|
|
return value; |
|
} |
|
|
|
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'); |
|
span1.innerText = unescapeTitle(title); |
|
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); |
|
|
|
div.appendChild(img); |
|
div.appendChild(img); |
|
div.appendChild(a); |
|
div.appendChild(span1); |
|
div.appendChild(span2); |
|
div.appendChild(span3); |
|
div.appendChild(span4); |
|
|
|
document.getElementById("quickdial").appendChild(div); |
|
|
|
return div; |
|
} |
|
|
|
function setBoxImage(id, img_source) { |
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[id]; |
|
if (box === undefined) |
|
return; |
|
|
|
var img = box.getElementsByTagName('img')[0]; |
|
img.setAttribute('src', img_source + '?' + new Date()); |
|
} |
|
|
|
function setTitleToUrl(url, title) { |
|
var boxes = document.getElementById('quickdial').getElementsByTagName('div'); |
|
for (i = 0; i < boxes.length; ++i) { |
|
var box = boxes[i]; |
|
|
|
if (box === undefined) |
|
continue; |
|
|
|
var boxUrl = box.getElementsByTagName('a')[0].getAttribute('href'); |
|
console.log(boxUrl + " > " + url); |
|
if (url != boxUrl) |
|
continue; |
|
|
|
var span = box.getElementsByTagName('span')[0]; |
|
span.innerText = title; |
|
} |
|
|
|
speeddial.changed(allPages()); |
|
} |
|
|
|
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; |
|
|
|
$(imgElement).attr('src', img_source + '?' + new Date()); |
|
}); |
|
} |
|
|
|
function setBoxUrl(id, url) { |
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[id]; |
|
if (box === undefined) |
|
return; |
|
|
|
var a = box.getElementsByTagName('a')[0]; |
|
a.setAttribute('href', url); |
|
} |
|
|
|
function setBoxTitle(id, title) { |
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[id]; |
|
if (box === undefined) |
|
return; |
|
|
|
var span = box.getElementsByTagName('span')[0]; |
|
span.innerText = title; |
|
} |
|
|
|
function removeBox(id) { |
|
var box = document.getElementById('quickdial').getElementsByTagName('div')[id]; |
|
if (box === undefined) |
|
return; |
|
|
|
var url = box.getElementsByTagName('a')[0].getAttribute('href'); |
|
document.getElementById("quickdial").removeChild(box); |
|
alignPage(); |
|
|
|
speeddial.removeImageForUrl(url); |
|
speeddial.changed(allPages()); |
|
} |
|
|
|
function alignPage() { |
|
$('head').append('<style>#quickdial img[src*=".png"]{height:auto;width:'+DIAL_WIDTH+'px}</style>'); |
|
$('#quickdial div.entry').css({'width' : DIAL_WIDTH + 'px', |
|
'height' : Math.round(DIAL_WIDTH / 1.54) + 'px'}); |
|
|
|
var width = $(window).width(); |
|
var height = $(window).height(); |
|
var boxWidth = Math.floor(DIAL_WIDTH + 30); |
|
var boxHeight = Math.floor(Math.round(DIAL_WIDTH / 1.54) + 40); |
|
|
|
var maxBoxes = Math.floor(width / boxWidth); |
|
if (maxBoxes > MAX_PAGES_ROW) maxBoxes = MAX_PAGES_ROW; |
|
if (maxBoxes < 1) maxBoxes = 1; |
|
|
|
var maxwidth = maxBoxes * boxWidth; |
|
$("#quickdial").css('width', maxwidth + 'px'); |
|
|
|
var boxesCount = $("#quickdial").children("div").size(); |
|
var rows = Math.ceil(boxesCount / maxBoxes); |
|
var margintop = (height - rows * boxHeight) / 2; |
|
|
|
if (margintop < 0) margintop = 0; |
|
|
|
$("#quickdial").css('margin-top', margintop + 'px'); |
|
} |
|
|
|
function bgImageSel() { |
|
var img = speeddial.getOpenFileName(); |
|
if (img) { |
|
document.getElementById('BgImgHold').value = img; |
|
} |
|
} |
|
|
|
function saveSettings() { |
|
MAX_PAGES_ROW = $('#PgInRow').val(); |
|
DIAL_WIDTH = parseInt($('#SdSize').val()); |
|
|
|
speeddial.setBackgroundImage($('#BgImgHold').val()); |
|
speeddial.setBackgroundImageSize($('#BgImgSelSiz').val()); |
|
speeddial.setPagesInRow(MAX_PAGES_ROW); |
|
speeddial.setSdSize(DIAL_WIDTH); |
|
|
|
alignPage(); |
|
} |
|
|
|
function bgImgToggle() { |
|
var check = document.getElementById('BgImgToggle'); |
|
var BgImgSel = document.getElementById('BgImgSel'); |
|
var BgImgHold = document.getElementById('BgImgHold'); |
|
var BgImgSz = document.getElementById('BgImgSelSiz'); |
|
|
|
BgImgSel.disabled = (check.checked ? false : true); |
|
BgImgHold.disabled = (check.checked ? false : true); |
|
BgImgSz.disabled = (check.checked ? false : true); |
|
BgImgHold.value = (check.checked ? "%IMG_BACKGROUND%" : ''); |
|
} |
|
|
|
function sdSizeToggle() { |
|
var check = document.getElementById('SdSizeToggle'); |
|
var SdSize = document.getElementById('SdSize'); |
|
var SdSizeSl = document.getElementById('sliderValueSd'); |
|
|
|
SdSize.disabled = (check.checked ? false : true); |
|
SdSize.value = (check.checked ? SdSize.value : 231); |
|
SdSizeSl.innerHTML = (check.checked ? DIAL_WIDTH : 231); |
|
} |
|
|
|
function bgImgUpdate() { |
|
var imgUrl = document.getElementById('BgImgHold').value; |
|
var imgSize = document.getElementById('BgImgSelSiz').value; |
|
var imgThumb = document.getElementById('thumb'); |
|
|
|
imgThumb.style.backgroundImage = 'url("' + imgUrl + '")'; |
|
imgThumb.title = imgUrl.substring(imgUrl.lastIndexOf('/')+1); |
|
imgThumb.style.backgroundSize = imgSize; |
|
|
|
document.body.style.backgroundImage = 'url("' + imgUrl + '")'; |
|
document.body.style.backgroundSize = imgSize; |
|
} |
|
|
|
$(document).ready(function () { |
|
$('#BgImgSelSiz').val('%B_SIZE%').attr('selected','selected'); |
|
var bgImg = "%IMG_BACKGROUND%"; |
|
var sdSize = 'DIAL_WIDTH'; |
|
bgImg == '' ? $('#BgImgToggle').prop('checked', false) : $('#BgImgToggle').prop('checked', true) |
|
sdSize == '231' ? $('#SdSizeToggle').prop('checked', false) : $('#SdSizeToggle').prop('checked', true) |
|
$('#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'); |
|
}); |
|
|
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div id="quickdial"></div> |
|
<a onClick="$('#fadeOverlay2').css({'filter' : 'alpha(opacity=100)'}).fadeIn();$('#fadeOverlay2').click(function() { $(this).fadeOut('slow'); });$('#settingsBox').click(function(event) { event.stopPropagation(); });" title="%SETTINGS-TITLE%" class="sett"></a> |
|
<a onClick="onEditClick(addBox('', NEW_PAGE, '')); alignPage();" title="%ADD-TITLE%" class="add"></a> |
|
|
|
<script type="text/javascript"> |
|
%INITIAL-SCRIPT% |
|
|
|
alignPage(); |
|
|
|
$(window).resize(function() { alignPage(); }); |
|
$("div").disableSelection(); |
|
$("#quickdial").sortable({ |
|
revert: true, |
|
cursor: 'move', |
|
containment: 'document', |
|
opacity: 0.8, |
|
distance: 40, |
|
update: function(event, ui) { |
|
speeddial.changed(allPages()); |
|
} |
|
}); |
|
</script> |
|
<div id="fadeOverlay2" class="overlay" style="display:none;"> |
|
<div id="settingsBox"> |
|
<div class="togop"> |
|
<label for="PgInRow">%TXT_NRROWS%</label> |
|
</div> |
|
<div class="rowsel"> |
|
<span id="sliderValuePg">%ROW-PAGES%</span> |
|
<input id="PgInRow" type="range" min="2" max="8" value="%ROW-PAGES%" step="1" onchange="$('#sliderValuePg').html(this.value);" /> |
|
</div> |
|
<div class="togop"> |
|
<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> |
|
<input id="SdSize" type="range" min="145" max="280" value="%SD-SIZE%" step="1" onchange="$('#sliderValueSd').html(this.value);" /> |
|
</div> |
|
<div class="togop"> |
|
<input type="checkbox" name="sdbackimg" id="BgImgToggle" onchange="bgImgToggle();bgImgUpdate()" /> <label for="BgImgToggle">%TXT_NOTE%</label> |
|
</div> |
|
<div id="BgImgSel" class="thumbhold" onclick="if($('#BgImgSelSiz').attr('disabled')!='disabled') {bgImageSel();bgImgUpdate();}" disabled="disabled"><p id="thumb">%TXT_SELECTIMAGE%</p></div> |
|
<div class="content"> |
|
<p> |
|
<input id="BgImgHold" type="hidden" value="%IMG_BACKGROUND%" /> |
|
</p> |
|
<center><p> |
|
<label for="BgImgSelSiz">%TXT_PLACEMENT%</label> |
|
<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> |
|
</p></center> |
|
</div> |
|
<p class="buttonbox"> |
|
<input type="button" value=" %CLOSE% " onClick="$('#fadeOverlay2').fadeOut('slow');" /> |
|
<input type="button" value=" %APPLY% " onClick="saveSettings();$('#fadeOverlay2').fadeOut('slow');"/> |
|
</p> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|