|
|
|
|
@ -7,21 +7,22 @@ body {background: #eeeeee url(%IMG_BACKGROUND%) no-repeat center center;backgrou |
|
|
|
|
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; |
|
|
|
|
#quickdial {margin: auto;text-align: center;} |
|
|
|
|
#quickdial div.entry {position: relative;width: %SD-SIZE%px;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;} |
|
|
|
|
#quickdial img[src*=".png"] {width: %SD-SIZE%px;height: 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: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; |
|
|
|
|
span.boxTitle {width:100%;max-height: 20px; position: absolute;top: 89%;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: 135px; |
|
|
|
|
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: 213px;top: 0px;background: url(%IMG_RELOAD%) no-repeat;background-position: center;border: 1px solid transparent;display: none;} |
|
|
|
|
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;border-width: 20px;margin-left: auto;margin-right: auto;margin-top: 100px; |
|
|
|
|
@ -33,7 +34,7 @@ span.reload:hover {border-color: grey; border-radius: 4px;} |
|
|
|
|
.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: 245px;height: auto;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 {position: absolute;right:58px;top:25px;width: auto;height: auto;background: #eeeeee;margin: 5px;-webkit-box-shadow: 0 0 6px 6px#888;box-shadow: 0 0 6px 6px #888;border-radius: 15px;padding: 8px 15px;border: 1px solid transparent;opacity: 1;z-index:200} |
|
|
|
|
#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;} |
|
|
|
|
@ -42,10 +43,10 @@ span.reload:hover {border-color: grey; border-radius: 4px;} |
|
|
|
|
#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;} |
|
|
|
|
#settingsBox .rowsel {margin: 2px;padding: 1px;border-bottom: 1px solid #888;} |
|
|
|
|
#settingsBox .rowsel label {width: 130px;} |
|
|
|
|
#settingsBox .rowsel input {text-align:center;width: 75px;margin-bottom: 6px;margin-right: 4px;float: right;} |
|
|
|
|
#settingsBox .rowsel span {font-weight: bold;text-align: center;float: right;margin-left: 2px;} |
|
|
|
|
#settingsBox .rowsel {margin: 2px;padding: 3px 0;border-bottom: 1px solid #888;} |
|
|
|
|
#settingsBox .rowsel label {width: 140px;display: inline-block;} |
|
|
|
|
#settingsBox .rowsel input {text-align: center;width: 80px;height: 15px;margin: 0px;padding-bottom: 0;} |
|
|
|
|
#settingsBox .rowsel span {font-weight: bold;text-align: right;margin: 2px;padding-right: 2px;} |
|
|
|
|
</style> |
|
|
|
|
<script type="text/javascript" src="%JQUERY%"></script> |
|
|
|
|
<script type="text/javascript" src="%JQUERY-UI%"></script> |
|
|
|
|
@ -61,6 +62,10 @@ var TITLE_RELOAD = '%TITLE-RELOAD%'; |
|
|
|
|
var TITLE_FETCHTITLE = '%TITLE-FETCHTITLE%'; |
|
|
|
|
var MAX_PAGES_ROW = %ROW-PAGES%; |
|
|
|
|
|
|
|
|
|
$(document).ready(function () { |
|
|
|
|
$('head').append('<style type="text/css" media="screen">#quickdial div.entry {height: ' + Math.round(%SD-SIZE% / 1.54) + 'px;}</style>'); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
var editingId = -1; |
|
|
|
|
|
|
|
|
|
function onRemoveClick(box) { |
|
|
|
|
@ -274,27 +279,23 @@ function removeBox(id) { |
|
|
|
|
function alignPage() { |
|
|
|
|
var width = $(window).width(); |
|
|
|
|
var height = $(window).height(); |
|
|
|
|
var boxWidth = Math.floor(%SD-SIZE% + 30); |
|
|
|
|
var boxHeight = Math.floor(Math.round(%SD-SIZE% / 1.54) + 40); |
|
|
|
|
|
|
|
|
|
// 1 box width: 262px |
|
|
|
|
var maxBoxes = Math.floor(width / 262); |
|
|
|
|
var maxBoxes = Math.floor(width / boxWidth); |
|
|
|
|
if (maxBoxes > MAX_PAGES_ROW) maxBoxes = MAX_PAGES_ROW; |
|
|
|
|
if (maxBoxes < 1) maxBoxes = 1; |
|
|
|
|
|
|
|
|
|
var maxwidth = maxBoxes * 262; |
|
|
|
|
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 * 190) / 2; |
|
|
|
|
var margintop = (height - rows * boxHeight) / 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'); |
|
|
|
|
@ -303,7 +304,6 @@ function checkSet() { |
|
|
|
|
checkb.checked = (bgImg == '' ? false : true); |
|
|
|
|
BgImgSel.disabled = (bgImg == '' ? true : false); |
|
|
|
|
BgImgSz.disabled = (bgImg == '' ? true : false); |
|
|
|
|
BgImgSz.selectedIndex |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function bgImageSel() { |
|
|
|
|
@ -317,9 +317,11 @@ function saveSettings() { |
|
|
|
|
var BgImg = document.getElementById('BgImgHold').value; |
|
|
|
|
var BgImgSz = document.getElementById('BgImgSelSiz').value; |
|
|
|
|
var PgInRow = document.getElementById('PgInRow').value; |
|
|
|
|
var SdSize = document.getElementById('SdSize').value; |
|
|
|
|
speeddial.setBackgroundImage(BgImg); |
|
|
|
|
speeddial.setBackgroundImageSize(BgImgSz); |
|
|
|
|
speeddial.setPagesInRow(PgInRow); |
|
|
|
|
speeddial.setSdSize(SdSize); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function bgImgToggle() { |
|
|
|
|
@ -358,7 +360,7 @@ document.addEventListener("DOMContentLoaded", checkSet, false); |
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
<div id="quickdial"></div> |
|
|
|
|
<a onClick="toggleDisplay('settingsBox');" title="%SETTINGS-TITLE%" class="sett"></a> |
|
|
|
|
<a onClick="$('#fadeOverlay2').css({'filter' : 'alpha(opacity=95)'}).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"> |
|
|
|
|
@ -378,34 +380,40 @@ $("#quickdial").sortable({ |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
<div id="settingsBox"> |
|
|
|
|
<div class="rowsel"> |
|
|
|
|
<span id="sliderValue">%ROW-PAGES%</span> |
|
|
|
|
<input id="PgInRow" type="range" min="2" max="8" value="%ROW-PAGES%" step="1" onchange="document.getElementById('sliderValue').innerHTML = this.value;" /> |
|
|
|
|
<label for="PgInRow">%TXT_NRROWS%</label> |
|
|
|
|
</div> |
|
|
|
|
<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 id="fadeOverlay2" style="opacity:0.95;display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:100;background:grey;"> |
|
|
|
|
<div id="settingsBox"> |
|
|
|
|
<div class="rowsel"> |
|
|
|
|
<label for="SdSize">%TXT_SDSIZE%</label> |
|
|
|
|
<input id="SdSize" type="range" min="145" max="280" value="%SD-SIZE%" step="1" onchange="document.getElementById('sliderValueSd').innerHTML = this.value;" /> |
|
|
|
|
<span id="sliderValueSd">%SD-SIZE%</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="rowsel"> |
|
|
|
|
<label for="PgInRow">%TXT_NRROWS%</label> |
|
|
|
|
<input id="PgInRow" type="range" min="2" max="8" value="%ROW-PAGES%" step="1" onchange="document.getElementById('sliderValuePg').innerHTML = this.value;" /> |
|
|
|
|
<span id="sliderValuePg">%ROW-PAGES%</span> |
|
|
|
|
</div> |
|
|
|
|
<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();$('#fadeOverlay2').fadeOut('slow');" /> |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="thumbhold"><p id="thumb" ></p></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="thumbhold"><p id="thumb" ></p></div> |
|
|
|
|
</div> |
|
|
|
|
</body> |
|
|
|
|
</html> |
|
|
|
|
|
|
|
|
|
|