src/eric7/WebBrowser/data/html/speeddialPage.html

<!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: linear-gradient(#85784A, #fdfdfd, #fdfdfd);
    background-repeat: repeat-x;
    font: 13px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #525c66;
}
body * {
    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;
    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;
    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;
    color: #ffffff;
}
.formTable input[type="text"] {
    width: 100%;
    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">@JQUERY@</script>
<script type="text/javascript">@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, '&quot;');
    title = title.replace(/'/g, '&apos;');
    return title;
}

function unescapeTitle(title) {
    title = title.replace(/&quot;/g, '"');
    title = title.replace(/&apos;/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 = 'https://';

    $('body').append('<div id="fadeOverlay" style="opacity:1.0;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=" @CANCEL@ " 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').val(), 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').val());
        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.setAttribute('title', unescapeTitle(title));
    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;
        }
    }

    if (changed)
      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() {
    var dialWidth = parseInt(DIAL_WIDTH);
    var dialHeight = Math.floor(Math.round(dialWidth / 1.54));
    $('head').append('<style>#quickdial img[src*=".png"]{height:auto;width:'+dialWidth+'px}</style>');
    $('#quickdial div.entry').css({'width' : dialWidth + 'px',
                                   'height' : dialHeight + 'px'});

    var width = $(window).width();
    var height = $(window).height();
    var boxWidth = Math.floor(dialWidth + 30);
    var boxHeight = dialHeight + 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").length;
    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 : 240);
    SdSizeSl.innerHTML = (check.checked ? DIAL_WIDTH : 240);
}

function configureSpeedDial() {
    // Load settings
    $('#PgInRow').val(MAX_PAGES_ROW);
    $('#sliderValuePg').html(MAX_PAGES_ROW);
    $('#SdSize').val(DIAL_WIDTH);
    $('#SdSizeToggle').prop('checked', DIAL_WIDTH != 240);
    $('#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());
            }
        });

      document.getElementById("PgInRow").oninput = function() {
          $('#sliderValuePg').html(this.value);
      };
      document.getElementById("SdSize").oninput = function() {
          $('#sliderValueSd').html(this.value);
      };
    }

    </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"></span>
          <input id="PgInRow" type="range" min="2" max="10" step="1" />
        </div>
        <div class="togop">
          <input type="checkbox" name="sdsizet" id="SdSizeToggle" onchange="sdSizeToggle()" />&nbsp;<label for="SdSizeToggle">@TXT_SDSIZE@</label>
        </div>
        <div class="rowsel">
          <span id="sliderValueSd"></span>
          <input id="SdSize" type="range" min="100" max="500" step="1" />
        </div>
        <div class="content">
          <p class="buttonbox">
            <input type="button" value=" @CANCEL@ " 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>