mirror of
https://invent.kde.org/network/falkon.git
synced 2024-12-23 20:26:34 +01:00
400 lines
15 KiB
HTML
400 lines
15 KiB
HTML
<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;}
|
|
#quickdial div.entry {position: relative;width: 231px;height: 150px;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: 231px;height: 130px;}
|
|
|
|
div.entry:hover .edit, div.entry:hover .close, div.entry:hover .reload{display: inline;}
|
|
span.boxTitle {width:231px;max-height: 20px; position: absolute;top: 133px;left: 0px;text-align: center;overflow:hidden;}
|
|
span.close {width: 14px;height: 14px;position: absolute;left: 215px;top: 135px;
|
|
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: 135px;
|
|
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: 213px;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;}
|
|
#overlay-edit img {display: block;margin-left: auto;margin-right: auto;}
|
|
#overlay-edit input[type="submit"] {margin-left: auto;margin-right: auto;margin-top: 10px;display: block;width: 200px;}
|
|
|
|
.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 {position: absolute;right:58px;top:25px;width: 240px;height: 135px;background: #eeeeee;margin: 5px;-webkit-box-shadow: 0 0 6px 6px#888;box-shadow: 0 0 6px 6px #888;border-radius: 15px;display: none;padding:8px 20px;border: 1px solid transparent;}
|
|
#settingsBox .title {margin-bottom: 1px;padding-bottom:2px;}
|
|
#settingsBox .content {float:right;}
|
|
#settingsBox .thumbhold {margin: 2px;padding: 1px;border-radius: 10px;text-align:center;width: 100px; height: 100px;background: #AAA;}
|
|
#settingsBox .thumbhold p {margin: 0;padding: 0;background: #eeeeee url(%IMG_BACKGROUND%) no-repeat center center;background-size: %B_SIZE%;width: 98px;height:98px;border-radius: 10px;position: relative;left: 1px;top: 1px;}
|
|
#settingsBox p label {margin: 2px;padding: 1px;text-align: center;}
|
|
#settingsBox p select {margin: 2px;padding: 1px;text-align: center;width: 100px;}
|
|
#settingsBox p select option {text-align: center;}
|
|
#settingsBox .button {margin: 2px;padding: 1px;text-align:center;width: 100px;}
|
|
</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 editingId = -1;
|
|
|
|
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 onEditClick(box) {
|
|
editingId = $(box).index();
|
|
var boxUrl = $(box).children('a').first().attr('href');
|
|
var boxTitle = $(box).children('span').first().text();
|
|
if (boxUrl === '')
|
|
boxUrl = 'http://';
|
|
|
|
$('body').append('<div id="fadeOverlay" style="opacity:0.95;display:none;position:fixed;left:0;' +
|
|
'top:0;width:100%;height:100%;z-index:9999;background:grey;">' +
|
|
'<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><input type="submit" value="' + EDIT + '" onClick="boxEdited()">' +
|
|
'</div></div>');
|
|
|
|
$('#fadeOverlay').css({'filter' : 'alpha(opacity=95)'}).fadeIn();
|
|
$('#fadeOverlay').click(function() { $(this).fadeOut("slow", function() {$("#fadeOverlay").remove();}); });
|
|
$('#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, $('#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 {
|
|
$('#fadeOverlay').fadeOut("slow", function() {$("#fadeOverlay").remove();});
|
|
}
|
|
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').replace('"', '').replace(';','');
|
|
var title = $(this).children('span[class="boxTitle"]').first().text().replace('"', '').replace(';','');
|
|
value += 'url:"' + url + '"|title:"' + 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.appendChild( document.createTextNode(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() {
|
|
var width = $(window).width();
|
|
var height = $(window).height();
|
|
|
|
// 1 box width: 262px
|
|
var maxBoxes = Math.floor(width / 262);
|
|
if (maxBoxes > MAX_PAGES_ROW) maxBoxes = MAX_PAGES_ROW;
|
|
if (maxBoxes < 1) maxBoxes = 1;
|
|
|
|
var maxwidth = maxBoxes * 262;
|
|
$("#quickdial").css('width', maxwidth + 'px');
|
|
|
|
var boxesCount = $("#quickdial").children("div").size();
|
|
var rows = Math.ceil(boxesCount / maxBoxes);
|
|
var margintop = (height - rows * 190) / 2;
|
|
if (margintop < 0) margintop = 0;
|
|
$("#quickdial").css('margin-top', margintop + 'px');
|
|
}
|
|
|
|
function toggleDisplay(id) {
|
|
var div = document.getElementById(id);
|
|
div.style.display = (div.style.display == 'block' ? 'none' : 'block');
|
|
}
|
|
|
|
function checkSet() {
|
|
var checkb = document.getElementById('BgImgToggle');
|
|
var BgImgSel = document.getElementById('BgImgSel');
|
|
var BgImgSz = document.getElementById('BgImgSelSiz');
|
|
var bgImg = '%IMG_BACKGROUND%';
|
|
checkb.checked = (bgImg == '' ? false : true);
|
|
BgImgSel.disabled = (bgImg == '' ? true : false);
|
|
BgImgSz.disabled = (bgImg == '' ? true : false);
|
|
}
|
|
|
|
function bgImageSel() {
|
|
var img = speeddial.getOpenFileName();
|
|
if (img) {
|
|
document.getElementById('BgImgHold').value = 'file://' + img;
|
|
}
|
|
}
|
|
|
|
function saveSettings() {
|
|
var BgImg = document.getElementById('BgImgHold').value;
|
|
var BgImgSz = document.getElementById('BgImgSelSiz').value;
|
|
speeddial.setBackgroundImage(BgImg);
|
|
speeddial.setBackgroundImageSize(BgImgSz);
|
|
}
|
|
|
|
function bgImgToggle() {
|
|
var check = document.getElementById('BgImgToggle');
|
|
var BgImgSel = document.getElementById('BgImgSel');
|
|
var BgImgHold = document.getElementById('BgImgHold');
|
|
var BgImgSz = document.getElementById('BgImgSelSiz');
|
|
if (check.checked) {
|
|
BgImgSel.disabled = false;
|
|
BgImgHold.disabled = false;
|
|
BgImgSz.disabled = false;
|
|
BgImgHold.value = '%IMG_BACKGROUND%';
|
|
}
|
|
else {
|
|
BgImgSel.disabled = true;
|
|
BgImgHold.disabled = true;
|
|
BgImgSz.disabled = true;
|
|
BgImgHold.value = '';
|
|
}
|
|
}
|
|
|
|
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.addEventListener("DOMContentLoaded", checkSet, false);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="quickdial"></div>
|
|
<a onClick="toggleDisplay('settingsBox');" 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="settingsBox">
|
|
<div class="title"><input type="checkbox" name="sdbackimg" id="BgImgToggle" onchange="bgImgToggle();bgImgUpdate()" /> <label for="BgImgToggle">%TXT_NOTE%</label></div>
|
|
<div class="content">
|
|
<p>
|
|
<input id="BgImgSel" type="button" class="button" value="%TXT_SELECTIMAGE%" onclick="bgImageSel();bgImgUpdate()" />
|
|
<input id="BgImgHold" type="hidden" value="%IMG_BACKGROUND%" />
|
|
</p>
|
|
<p>
|
|
<label for="BgImgSelSiz">%TXT_PLACEMENT%</label><br />
|
|
<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>
|
|
<p>
|
|
<input class="button" type="button" value="%APPLY%" onClick="saveSettings();document.getElementById('settingsBox').style.display = 'none';" />
|
|
</p>
|
|
</div>
|
|
<div class="thumbhold"><p id="thumb" ></p></div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|