--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/eric6/WebBrowser/data/html/speeddialPage.html Sun Apr 14 15:09:21 2019 +0200
@@ -0,0 +1,639 @@
+<!DOCTYPE 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: -webkit-gradient(linear, left top, left bottom, from(#85784A), to(#FDFDFD), color-stop(0.5, #FDFDFD));
+ background-repeat: repeat-x;
+ 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;
+ font-weight: bold;
+}
+#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;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 100px;
+ border-width: 20px;
+ -webkit-border-image: url(@BOX-BORDER@) 25;
+}
+#overlay-edit img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+#overlay-edit .buttonbox input {
+ margin-right: 3px;
+ 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 {
+ position: absolute;
+ right: 58px;
+ top: 25px;
+ min-width: 250px;
+ width: auto;
+ height: auto;
+ background: #EDECE6;
+ margin: 5px;
+ border-radius: 15px;
+ padding: 8px 15px;
+ border: 1px solid transparent;
+ opacity: 1;
+ z-index: 200;
+}
+#settingsBox .content {
+ float: right;
+ margin-left: 115px;
+}
+#settingsBox p label {
+ margin: 2px;
+ padding: 1px;
+ 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;
+}
+</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;
+var ignoreNextChanged = false;
+
+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() - 1);
+}
+
+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 emitChanged(pages) {
+ ignoreNextChanged = true;
+ external.speedDial.changed(pages);
+}
+
+function addSpeedDial() {
+ onEditClick(addBox('', NEW_PAGE, ''));
+ alignPage();
+}
+
+function onEditClick(box) {
+ editingId = $(box).index() - 1;
+ 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" style="opacity:0.9;display:none;position:fixed;left:0;' +
+ 'top:0;width:100%;height:100%;z-index:9999;background:#85784A;">' +
+ '<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=90)'}).fadeIn();
+ $('#fadeOverlay').click(function() {hideEditBox()});
+ $('#overlay-edit').click(function(event) { event.stopPropagation(); });
+
+ var temp = $('#formUrl').val();
+ $('#formUrl').focus().val('').val(temp); // focus and move cursor to end
+}
+
+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);
+ external.speedDial.loadThumbnail(url, false);
+}
+
+function boxEdited() {
+ if (editingId == -1)
+ return;
+
+ 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;
+
+ var pages = allPages()
+
+ if (fetchTitleChecked || (originalUrl != changedUrl && changedUrl !== '') ) {
+ var img = box.getElementsByTagName('img')[0];
+ img.setAttribute('src', LOADING_IMAGE);
+
+ $('#fadeOverlay').fadeOut("slow", function() {
+ $("#fadeOverlay").remove();
+ });
+ external.speedDial.loadThumbnail(a.getAttribute('href'), fetchTitleChecked);
+ external.speedDial.removeImageForUrl(a.getAttribute('href'));
+ } else {
+ hideEditBox();
+ }
+ emitChanged(pages);
+ });
+}
+
+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();
+ var img = $(this).children('img').first().attr('src');
+ value += 'url:"' + escapeUrl(url) + '"|title:"' + escapeTitle(title) + '"|img:"' + escapeUrl(img) + '";';
+ });
+
+ 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);
+
+ if (img_source == LOADING_IMAGE) {
+ external.speedDial.loadThumbnail(url, false);
+ }
+
+ 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 changed = false;
+ 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');
+ if (url != boxUrl)
+ continue;
+
+ var span = box.getElementsByTagName('span')[0];
+ if (span.innerText != title) {
+ changed = true;
+ span.innerText = title;
+ }
+ }
+
+ emitChanged(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);
+ });
+}
+
+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) {
+ if (confirm("@TITLE-WARN@"))
+ 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();
+
+ external.speedDial.removeImageForUrl(url);
+ emitChanged(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 saveSettings() {
+ MAX_PAGES_ROW = $('#PgInRow').val();
+ DIAL_WIDTH = parseInt($('#SdSize').val());
+
+ external.speedDial.setPagesInRow(MAX_PAGES_ROW);
+ external.speedDial.setSdSize(DIAL_WIDTH);
+
+ alignPage();
+}
+
+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 configureSpeedDial() {
+ // Load settings
+ $('#PgInRow').val(MAX_PAGES_ROW);
+ $('#sliderValuePg').html(MAX_PAGES_ROW);
+ $('#SdSize').val(DIAL_WIDTH);
+ $('#SdSizeToggle').prop('checked', DIAL_WIDTH != 231);
+ $('#sliderValueSd').html(DIAL_WIDTH);
+ $('#SdSizeToggle').is(':checked') ? $('#SdSize').removeAttr('disabled') : $('#SdSize').attr('disabled', 'disabled');
+
+ // Show dialog
+ $('#fadeOverlay2').css({'filter' : 'alpha(opacity=100)'}).fadeIn();
+ $('#fadeOverlay2').click(function() { $(this).fadeOut('slow'); });
+ $('#settingsBox').click(function(event) { event.stopPropagation(); });
+}
+
+function reloadAll() {
+ if (confirm("@TITLE-WARN-REL@"))
+ $('div.entry').each(function(i) {
+ onReloadClick($(this));
+ });
+}
+</script>
+</head>
+
+<body>
+ <div id="quickdial">
+ <noscript>@JAVASCRIPT_DISABLED@</noscript>
+ </div>
+ <a onClick="configureSpeedDial();" title="@SETTINGS-TITLE@" class="sett"></a>
+ <a onClick="addSpeedDial();" title="@ADD-TITLE@" class="add"></a>
+
+ <script type="text/javascript">
+ function init() {
+ @INITIAL-SCRIPT@
+
+ external.speedDial.pagesChanged.connect(function() {
+ if (ignoreNextChanged) {
+ ignoreNextChanged = false;
+ return;
+ }
+ window.location.reload();
+ });
+
+ external.speedDial.thumbnailLoaded.connect(setImageToUrl);
+ external.speedDial.pageTitleLoaded.connect(setTitleToUrl);
+
+ alignPage();
+ $(window).resize(function() { alignPage(); });
+ $("div").disableSelection();
+ $("#quickdial").sortable({
+ revert: true,
+ cursor: 'move',
+ containment: 'document',
+ opacity: 0.8,
+ distance: 40,
+ update: function(event, ui) {
+ emitChanged(allPages());
+ }
+ });
+ }
+
+ </script>
+ <div id="fadeOverlay2" style="opacity:0.9;display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:100;background:#85784A;">
+ <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="360" value="@SD-SIZE@" step="1" onchange="$('#sliderValueSd').html(this.value);" />
+ </div>
+ <div class="content">
+ <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>
+ </div>
+</body>
+
+<script type="text/javascript">
+
+// Initialize
+if (window._eric_external) {
+ init();
+} else {
+ document.addEventListener('_eric_external_created', init);
+}
+
+</script>
+
+</html>
