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:
parent
53db737ae0
commit
dd2bd38180
122
index.htm
122
index.htm
|
@ -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();
|
||||
};
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue