ndwarshuis
/
wolfchart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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();
};
};