Merge pull request #5 from trungjc/v1.3

Add files via upload v1.3
This commit is contained in:
ballantynedewolf 2017-01-31 12:05:22 +11:00 committed by GitHub
commit f5823e9ab1
1 changed files with 74 additions and 48 deletions

116
index.htm
View File

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