Falkon/falkonOfficial
Falkon/falkonOfficial
1
Fork 0
mirror of https://invent.kde.org/network/falkon.git synced 2024-12-23 12:16:34 +01:00
Code Releases Activity
3e62bee69d
falkonOfficial/src/data/html/speeddial.html

255 lines
9.3 KiB
HTML
Raw Normal View History

Added Speed Dial. Closes #36 - first version of speed dial - showing pages in maximum 4 columns (unlimited rows) - option in preferences to open speed dial on new tab - almost all implemented in js and jQuery, hope it won't be slow. It loads in about 240ms on my machine and in 2s on my Toshiba netbook (very very old Intel Atom) - currently, there is no possibility to change backgroung and keyboard shortcuts (need to figure out problems with laptop keyboards (no numerical block => Ctrl + 1 fires Ctrl + + and so on)
2011-12-02 23:25:27 +01:00
<html><head>
<title>%SITE-TITLE%</title>
<link rel="icon" href="%FAVICON%" type="image/x-icon" />
<style type="text/css" media="screen">
Edited Speed Dial to work in Windows. - prepending file:/// instead of file:// - also disabled user selection in all page (selection in inputs allowed)
2011-12-03 15:33:23 +01:00
html {background: #eeeeee;font: 13px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;color: #525c66;}
html * {-webkit-user-select: none;font-size: 100%;line-height: 1.6;margin: 0px;}
Added Speed Dial. Closes #36 - first version of speed dial - showing pages in maximum 4 columns (unlimited rows) - option in preferences to open speed dial on new tab - almost all implemented in js and jQuery, hope it won't be slow. It loads in about 240ms on my machine and in 2s on my Toshiba netbook (very very old Intel Atom) - currently, there is no possibility to change backgroung and keyboard shortcuts (need to figure out problems with laptop keyboards (no numerical block => Ctrl + 1 fires Ctrl + + and so on)
2011-12-02 23:25:27 +01:00
.add {position: absolute;right:10px;top:10px;width: 24px;height: 24px;background: url(%IMG_PLUS%); cursor: pointer;}
#quickdial {max-width: 1044px;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;position: absolute;top: 133px;left: 0px;text-align: center;}
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;}
Edited Speed Dial to work in Windows. - prepending file:/// instead of file:// - also disabled user selection in all page (selection in inputs allowed)
2011-12-03 15:33:23 +01:00
.formTable input[type="text"] {width: 100%;-webkit-user-select: auto;}
Added Speed Dial. Closes #36 - first version of speed dial - showing pages in maximum 4 columns (unlimited rows) - option in preferences to open speed dial on new tab - almost all implemented in js and jQuery, hope it won't be slow. It loads in about 240ms on my machine and in 2s on my Toshiba netbook (very very old Intel Atom) - currently, there is no possibility to change backgroung and keyboard shortcuts (need to figure out problems with laptop keyboards (no numerical block => Ctrl + 1 fires Ctrl + + and so on)
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%';
var EDIT = '%EDIT%';
var NEW_PAGE = '%NEW-PAGE%';
var TITLE_EDIT = '%TITLE-EDIT%';
var TITLE_REMOVE = '%TITLE-REMOVE%';
var TITLE_RELOAD = '%TITLE-RELOAD%';
var editingId = -1;
function onRemoveClick(box) {
removeBox($(box).index());
}
function onEditClick(box) {
editingId = $(box).index();
var boxUrl = $(box).children('a').first().attr('href');
var boxTitle = $(box).children('span').first().text();
Image previeweing in Site Informations now supports file and qrc scheme - also updated slovakia translation - fixed image showing on adblocked page(regression from previous commit) - SpeedDial: when adding new page and then editing, http:// will be shown instead of empty url
2011-12-03 14:43:13 +01:00
if (boxUrl === '')
boxUrl = 'http://';
Added Speed Dial. Closes #36 - first version of speed dial - showing pages in maximum 4 columns (unlimited rows) - option in preferences to open speed dial on new tab - almost all implemented in js and jQuery, hope it won't be slow. It loads in about 240ms on my machine and in 2s on my Toshiba netbook (very very old Intel Atom) - currently, there is no possibility to change backgroung and keyboard shortcuts (need to figure out problems with laptop keyboards (no numerical block => Ctrl + 1 fires Ctrl + + and so on)
2011-12-02 23:25:27 +01:00
$('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"><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><td>' + TITLE + ': </td><td><input maxlength="25" type="text" id="formTitle" value="' + boxTitle +
'"></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(); });
Focus improvements in locationbar and speed dial. - when you start browser (or open new window) and you have open speed dial or empty page set, locationbar will now be focused so you can start writing address - when editing page in speed dial, after clicking on edit, url field will be automatically selected + focused
2011-12-05 19:54:17 +01:00
$('#formUrl').focus();
Added Speed Dial. Closes #36 - first version of speed dial - showing pages in maximum 4 columns (unlimited rows) - option in preferences to open speed dial on new tab - almost all implemented in js and jQuery, hope it won't be slow. It loads in about 240ms on my machine and in 2s on my Toshiba netbook (very very old Intel Atom) - currently, there is no possibility to change backgroung and keyboard shortcuts (need to figure out problems with laptop keyboards (no numerical block => Ctrl + 1 fires Ctrl + + and so on)
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);
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');
if (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'));
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');
var title = $(this).children('span[class="boxTitle"]').first().text();
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);
}
function setBoxImage(id, img_source) {
var box = document.getElementById('quickdial').getElementsByTagName('div')[id];
if (box === undefined)
return;
var img = box.getElementsByTagName('img')[0];
Global cleanup of objects deletion. Using deleteLater when useful. - also fixed image refreshion in speed dial (when you refresh page thumbnail, new image was created but the image in page won't change until reload. it is because page caching. fixed by appending date to image url: file://foo.png?Date)
2011-12-04 20:09:44 +01:00
img.setAttribute('src', img_source + '?' + new Date());
Added Speed Dial. Closes #36 - first version of speed dial - showing pages in maximum 4 columns (unlimited rows) - option in preferences to open speed dial on new tab - almost all implemented in js and jQuery, hope it won't be slow. It loads in about 240ms on my machine and in 2s on my Toshiba netbook (very very old Intel Atom) - currently, there is no possibility to change backgroung and keyboard shortcuts (need to figure out problems with laptop keyboards (no numerical block => Ctrl + 1 fires Ctrl + + and so on)
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;
Global cleanup of objects deletion. Using deleteLater when useful. - also fixed image refreshion in speed dial (when you refresh page thumbnail, new image was created but the image in page won't change until reload. it is because page caching. fixed by appending date to image url: file://foo.png?Date)
2011-12-04 20:09:44 +01:00
$(imgElement).attr('src', img_source + '?' + new Date());
Added Speed Dial. Closes #36 - first version of speed dial - showing pages in maximum 4 columns (unlimited rows) - option in preferences to open speed dial on new tab - almost all implemented in js and jQuery, hope it won't be slow. It loads in about 240ms on my machine and in 2s on my Toshiba netbook (very very old Intel Atom) - currently, there is no possibility to change backgroung and keyboard shortcuts (need to figure out problems with laptop keyboards (no numerical block => Ctrl + 1 fires Ctrl + + and so on)
2011-12-02 23:25:27 +01:00
});
}
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: 261px
var maxBoxes = Math.floor(width / 261);
if (maxBoxes > 4) maxBoxes = 4;
if (maxBoxes < 1) maxBoxes = 1;
var maxwidth = maxBoxes * 261;
$("#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');
}
</script>
</head>
<body>
<div id="quickdial"></div>
<a onClick="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,
update: function(event, ui) {
speeddial.changed(allPages());
}
});
</script>
</body>
</html>
Copy Permalink