Helpviewer/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: -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 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;
    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;
}
</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 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.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><input type="submit" value="' + EDIT + '" onClick="boxEdited()">' +
                         '</div></div>');

        $('#fadeOverlay').css({'filter' : 'alpha(opacity=90)'}).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, 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 {
            $('#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(';','');
            var img = $(this).children('img').first().attr('src').replace('"', '').replace(';','');
            value += 'url:"' + url + '"|title:"' + title + '"|img:"' + 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.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() {
        $('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());

        speeddial.setPagesInRow(MAX_PAGES_ROW);
        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);
    }


    $(document).ready(function () {
      var sdSize = 'DIAL_WIDTH';
      sdSize == '231' ? $('#SdSizeToggle').prop('checked', false) : $('#SdSizeToggle').prop('checked', true)
      $('#SdSizeToggle').is(':checked') ? $('#SdSize').removeAttr('disabled') : $('#SdSize').attr('disabled', 'disabled');
    });

</script>
</head>

<body>
    <div id="quickdial"></div>
    <a onClick="$('#fadeOverlay2').css({'filter' : 'alpha(opacity=90)'}).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" 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()" />&nbsp;<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>
            <input class="button" type="button" value="@APPLY@" onClick="saveSettings();$('#fadeOverlay2').fadeOut('slow');" />
          </p>
        </div>
      </div>
    </div>
</body>
</html>