Add files via upload

ver1.3 includes duochrome function toggled on any chart with shortcut key that you set in the config form.
duochrome background is stored as a base64 encoded .png image 2000x1px in the css, uses css3 background properties to stretch to 100%x100%
Updated help accordingly.
Cleaned up some spelling mistakes
This commit is contained in:
ballantynedewolf 2017-01-31 12:04:28 +11:00 committed by GitHub
parent 53db737ae0
commit dd2bd38180
1 changed files with 74 additions and 48 deletions

122
index.htm
View File

@ -445,17 +445,25 @@
#displaySetting .character-line {
position: relative;
line-height: 0;
font-size: 0;
font-size: 0;
}
#displaySetting .duo {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAABCAIAAAAJn6IqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUM0RUZGMDRERUNGMTFFNjg4QUZEQ0MwRDg2MzY5M0MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUM0RUZGMDVERUNGMTFFNjg4QUZEQ0MwRDg2MzY5M0MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQzRFRkYwMkRFQ0YxMUU2ODhBRkRDQzBEODYzNjkzQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQzRFRkYwM0RFQ0YxMUU2ODhBRkRDQzBEODYzNjkzQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsIzWMAAAAAmSURBVHja7NAxAQAACAMg17+anbTGDohAbgAAgHZZBwAA0O4FGADq3gHOIgDUAwAAAABJRU5ErkJggg==");/*red and green stripe*/
background-size: 100% 100%;
background-repeat: no-repeat;
}
#displaySetting .char-line {
display: inline-block;
}
#displaySetting .scroll-div {
#displaySetting .scroll-div {
height: 100vh;
}
.clear-both {
height: 0;
clear: both;
@ -1022,6 +1030,14 @@
<span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="unShuffle" maxlength="1">
</div>
</div>
<div class="form-group">
<label class="col-2">Duochrome</label>
<div class="col-8 ">
<span class="keyboard">Shift + </span><input type="text" class="form-control input-sm" id="duoBG" maxlength="1">
</div>
</div>
</fieldset>
<fieldset class="footer-fieldset">
<div class="action-button">
@ -1174,6 +1190,9 @@
<li>
<strong>Shuffle/Unshuffle:</strong>: Shuffle randomises the letters normally shown on a chart line into a different order. You can shuffle as many times as you like. Unshuffle returns the letter order to the default.
</li>
<li>
<strong>Duochrome:</strong>: Toggles a red/green background on any version of the chart.
</li>
</ul>
</div>
</div>
@ -1223,8 +1242,9 @@
<div class="char-line" id="line-13"></div>
</div>
<div data-line="14" class="character-line">
<div class="char-line" id="line-14"></div>
<div class="char-line" id="line-14"></div>
</div>
</div>
<div style="display:none;" id="list-character">
<!--new Snellen-->
@ -1649,25 +1669,25 @@
$('#line-' + (i + 1)).find('svg').show();
}
else if (convertViewWidth >= svgWidth * 4) {
console.log('4');
//console.log('4');
$('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide();
}
else if (convertViewWidth >= svgWidth * 3) {
console.log('3');
//console.log('3');
$('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide();
fifthChartRemove.hide();
}
else if (convertViewWidth >= svgWidth * 2) {
console.log('2');
//console.log('2');
$('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide();
secondChartRemove.hide();
fifthChartRemove.hide();
}
else if (convertViewWidth >= svgWidth) {
console.log('1');
//console.log('1');
$('#line-' + (i + 1)).find('svg').show();
firstChartRemove.hide();
secondChartRemove.hide();
@ -1675,7 +1695,7 @@
fifthChartRemove.hide();
}
else {
console.log('0');
//console.log('0');
$('#line-' + (i + 1)).find('svg').hide();
$('#line-' + (i + 1)).parent().find('.scoreBox').hide();
$('#line-' + (i + 1)).parent().addClass('display-none');
@ -1699,15 +1719,17 @@
// }
//});
};
/*this.ShuffleFunction = function (selector) {
$(selector).parent().each(function () {
$(this).children(selector).sort(function () {
return Math.random() - 0.5;
}).detach().appendTo(this);
});
return this;
};*/
this.YatesShuffle = function (array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * i); // no +1 here!
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
};
this.UnShuffleFunction = function (oldCharacter) {
//$('#displaySetting').html(oldCharacter);
for (i = 0; i < oldCharacter.length; i++) {
@ -1717,22 +1739,9 @@
};
};
this.YatesShuffle = function (array) {
//var m = array.length, t, i;
//while (m) {
// i = Math.floor(Math.random() * m--);
// t = array[m];
// array[m] = array[i];
// array[i] = t;
//}
//return array;
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * i); // no +1 here!
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
this.duoBGFunction = function () {
//alert("duochrome function");
$('.character-line').toggleClass('duo');
};
this.SortCharacterOption = function () {
@ -1755,7 +1764,7 @@
}
};
};
this.ShortCutKey = function (pageUp, padeDown, shuffle, unShuffle) {
this.ShortCutKey = function (pageUp, padeDown, shuffle, unShuffle, duoBG) {
var callBack = this;
document.body.onkeydown = function (e) {
if (e.keyCode == 38) {
@ -1810,29 +1819,29 @@
fifthChartRemove = $(this).find('svg:nth-child(5)');
var convertViewWidth = callBack.ConvertMMToPixel(viewWidth);
if (convertViewWidth >= svgWidth * 5) {
console.log('show all');
//console.log('show all');
$(this).find('svg').show();
}
else if (convertViewWidth >= svgWidth * 4) {
console.log('4');
//console.log('4');
$(this).find('svg').show();
firstChartRemove.hide();
}
else if (convertViewWidth >= svgWidth * 3) {
console.log('3');
//console.log('3');
$(this).find('svg').show();
firstChartRemove.hide();
fifthChartRemove.hide();
}
else if (convertViewWidth >= svgWidth * 2) {
console.log('2');
//console.log('2');
$(this).find('svg').show();
firstChartRemove.hide();
secondChartRemove.hide();
fifthChartRemove.hide();
}
else if (convertViewWidth >= svgWidth) {
console.log('1');
//console.log('1');
$(this).find('svg').show();
firstChartRemove.hide();
secondChartRemove.hide();
@ -1840,7 +1849,7 @@
fifthChartRemove.hide();
}
else {
console.log('0');
//console.log('0');
$(this).find('svg').hide();
$(this).parent().find('.scoreBox').hide();
$(this).parent().addClass('display-none');
@ -1861,6 +1870,13 @@
e.preventDefault();
};
};
if (duoBG != "") {
if ((e.shiftKey && e.keyCode == duoBG)) {
callBack.duoBGFunction();
e.preventDefault();
};
};
};
};
this.ValidateFunction = function () {
@ -1899,7 +1915,7 @@
}
else if (distance < 3000) {
result = true;
message = "Distance must be larger or equal to 3000.";
message = "Distance must be greater than or equal to 3000.";
}
if (result) {
$('#iDistance').parent().append('<span class="errorMsg errorDistance">' + message + '</span>');
@ -1985,6 +2001,7 @@
localStorage.setItem("PageDown", localPageDown);
localStorage.setItem("Shuffle", localShuffle);
localStorage.setItem("Unshuffle", localUnShuffle);
localStorage.setItem("duoBG", localduoBG);
};
this.SetPositionScore = function (isSmall) {
//set margin for score text
@ -2026,7 +2043,7 @@
var setConfigDefault = this;
$('#reset').on('click', function () {
setConfigDefault.SetConfingDefault();
//set varible for local storage
//set variable for local storage
notation = $('#sNotation').val(),
localOptotype = $('#sOptotype').val(),
localsMirrored = $('#sMirrored').val(),
@ -2034,6 +2051,7 @@
localPageDown = $('#pageDown').val(),
localShuffle = $('#shuffle').val(),
localUnShuffle = $('#unShuffle').val(),
localduoBG = $('#duoBG').val(),
localDistance = $('#iDistance').val().trim(),
viewWidth = $('#iViewWidth').val().trim(),
viewHight = $('#iViewHeight').val().trim(),
@ -2043,9 +2061,11 @@
sPageUp = $('#pageUp').val().trim().toUpperCase().charCodeAt(0),
sPageDown = $('#pageDown').val().trim().toUpperCase().charCodeAt(0),
sShuffle = $('#shuffle').val().trim().toUpperCase().charCodeAt(0),
sduoBG = $('#duoBG').val().trim().toUpperCase().charCodeAt(0);
lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(),
sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0);
sduoBG = $('#duoBG').val().trim().toUpperCase().charCodeAt(0);
setConfigDefault.SetLocalStorage();
$('#displaySetting > div').find('.char-line').html('');
$('#displaySetting > div').find('.scoreBox').remove();
@ -2074,7 +2094,8 @@
gPageUp = localStorage.getItem("PageUp"),
gPageDown = localStorage.getItem("PageDown"),
gShuffle = localStorage.getItem("Shuffle"),
gUnshuffle = localStorage.getItem("Unshuffle");
gUnshuffle = localStorage.getItem("Unshuffle"),
gduoBG = localStorage.getItem("duoBG");
//set value for input
$('#sOptotype').val(gOptotype).change();
$('#sAlphabet').val(gAlphabet);
@ -2092,6 +2113,7 @@
$('#pageDown').val(gPageDown);
$('#shuffle').val(gShuffle);
$('#unShuffle').val(gUnshuffle);
$('#duoBG').val(gduoBG);
};
this.SetConfingDefault = function () {
var functionColorPicker = this;
@ -2112,6 +2134,7 @@
$('#pageDown').val('');
$('#shuffle').val('');
$('#unShuffle').val('');
$('#duoBG').val('');
};
this.SetColorPicker = function (color) {
$('#cp3').colorpicker({
@ -2270,7 +2293,7 @@
}
});
};
this.charaterCLick = function () {
this.characterClick = function () {
$(document).on('click', '.char-line svg', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
@ -2281,6 +2304,7 @@
}
})
};
this.UpdateSetting = function () {
var callBackFunction = this;
$('#updateSetting').on('click', function () {
@ -2292,6 +2316,7 @@
localPageDown = $('#pageDown').val(),
localShuffle = $('#shuffle').val(),
localUnShuffle = $('#unShuffle').val(),
localduoBG = $('#duoBG').val(),
localDistance = $('#iDistance').val().trim(),
viewWidth = $('#iViewWidth').val().trim(),
viewHight = $('#iViewHeight').val().trim(),
@ -2304,6 +2329,7 @@
lenghOfline = $('#iLengOfLine').val().trim(),
displayOrder = $('#display').val(),
sUnShuffle = $('#unShuffle').val().trim().toUpperCase().charCodeAt(0);
sduoBG = $('#duoBG').val().trim().toUpperCase().charCodeAt(0);
//reset div
$('#displaySetting').html('<div data-line="1" class="character-line"><div class="char-line" id="line-1"></div></div><div data-line="2" class="character-line"><div class="char-line" id="line-2"></div></div>'
+ '<div data-line="3" class="character-line"><div class="char-line" id="line-3"></div></div><div data-line="4" class="character-line"><div class="char-line" id="line-4"></div></div>'
@ -2339,7 +2365,7 @@
callBackFunction.GenerateCharacter(alphabetType);
//set shorcut
callBackFunction.ShortCutKey(sPageUp, sPageDown, sShuffle, sUnShuffle);
callBackFunction.ShortCutKey(sPageUp, sPageDown, sShuffle, sUnShuffle, sduoBG);
//close setting bar
$('.setting-bar').removeClass('active');
$('.guide-section').removeClass('active');
@ -2500,7 +2526,7 @@
//console.log(e.color.toString('rgba'));
});
this.ScrollOnClick();
this.charaterCLick();
this.characterClick();
// this.ValidateFunction();
};
};