Difference between revisions of "Widget:Pinyin chart"
Mscottmoore (talk | contribs) (testing fullscreen) |
Mscottmoore (talk | contribs) (fullscreen testing) |
||
| Line 218: | Line 218: | ||
overflow: auto; | overflow: auto; | ||
} | } | ||
| + | .hidden-by-pinyin-chart-modal { | ||
| + | display: none !important; | ||
| + | } | ||
| + | |||
</style> | </style> | ||
<div id="pinyin-chart-settings"> | <div id="pinyin-chart-settings"> | ||
| Line 1,605: | Line 1,609: | ||
//already in fullscreen mode, so disable | //already in fullscreen mode, so disable | ||
$(this).text('Enter FullScreen'); | $(this).text('Enter FullScreen'); | ||
| + | $('body').children().removeClass('hidden-by-pinyin-chart-modal'); | ||
var $mwContentText = $('#mw-content-text'); | var $mwContentText = $('#mw-content-text'); | ||
$mwContentText.prepend($('.table-container')); | $mwContentText.prepend($('.table-container')); | ||
| Line 1,613: | Line 1,618: | ||
//enable fullscreen mode | //enable fullscreen mode | ||
$(this).text('Exit FullScreen'); | $(this).text('Exit FullScreen'); | ||
| − | + | $('body').children().addClass('hidden-by-pinyin-chart-modal'); | |
$('body').append('<div class="pinyin-chart-modal"></div>'); | $('body').append('<div class="pinyin-chart-modal"></div>'); | ||
var $modal = $('.pinyin-chart-modal'); | var $modal = $('.pinyin-chart-modal'); | ||
| Line 1,622: | Line 1,627: | ||
}); | }); | ||
}); | }); | ||
| − | |||
</script> | </script> | ||
Revision as of 02:52, 15 July 2015
<style> /* Pinyin Table */
div.table-container {
display: inline-block; border-color: rgba(0,0,0,.15); border-width: 1px; border-style: solid; border-radius: 4px; max-width: 100%; overflow: auto; margin-bottom: 1.5em;
}
- pinyin-chart-settings .additional-settings-label {
background-color:#F5F5F5; border-color: rgba(0,0,0,0.15); border-width: 1px; border-style: solid; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 6px; font-size:13pt;
}
- pinyin-chart-settings .additional-settings-content {
border-color: rgba(0,0,0,0.15); border-width: 1px; border-top-width: 0px; border-style: solid; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; padding: 6px;
}
- pinyin-chart-settings .tone-option-label,
- pinyin-chart-settings .tone-option {
padding-right: 10px;
}
- pinyin-chart-settings .settings-collapse {
float: right;
} .pinyin-table {
background-color: #a9d0f5; table-layout: fixed; width: 0px; text-align: center;
}
.pinyin-table.small .table-pinyin, .pinyin-table.small .table-link, .pinyin-table.small th {
font-size: 13px;
} .pinyin-table.medium .table-pinyin, .pinyin-table.medium .table-link, .pinyin-table.medium th {
font-size: 16px;
} .pinyin-table.large .table-pinyin, .pinyin-table.large .table-link, .pinyin-table.large th {
font-size: 24px;
}
.pinyin-table.small th, .pinyin-table.small td {
width: 40px;
} .pinyin-table.medium th, .pinyin-table.medium td {
width: 50px;
} .pinyin-table.large th, .pinyin-table.large td {
width: 70px;
}
.pinyin-table.small .table-ipa, .pinyin-table.small .table-zhuyin, .pinyin-table.small .table-wade-giles {
font-size: 10px;
} .pinyin-table.medium .table-ipa, .pinyin-table.medium .table-zhuyin, .pinyin-table.medium .table-wade-giles {
font-size: 12px;
} .pinyin-table.large .table-ipa, .pinyin-table.large .table-zhuyin, .pinyin-table.large .table-wade-giles {
font-size: 16px;
}
.pinyin-table th.table-selected {
background: #DDD; cursor: pointer;
}
.pinyin-table th {
border-style: solid; border-color: rgb(205,205,205); border-width: 0px;
} th.first-row:not(.first-col):not(.last-col) {
border-bottom-width: 1px;
} th.last-row:not(.first-col):not(.last-col) {
border-top-width: 1px;
} th.first-col:not(.first-row):not(.last-row) {
border-right-width: 1px;
} th.last-col:not(.first-row):not(.last-row) {
border-left-width: 1px;
} .table-highlight {
cursor: pointer;
} .pinyin-table.loading-audio td {
cursor: wait;
} td.playing-audio * {
font-weight: bold;
} .col-a.row-null, .col-a.row-dtnl, .col-a.row-zhchshr, .col-a.row-gkh, .col-o.row-null, .col-o.row-dtnl, .col-o.row-zhchshr, .col-o.row-gkh, .col-u.row-null, .col-u.row-dtnl, .col-u.row-zhchshr, .col-u.row-gkh {
background: rgb(255,255,255);
} .col-a.row-null.table-highlight, .col-a.row-dtnl.table-highlight, .col-a.row-zhchshr.table-highlight, .col-a.row-gkh.table-highlight, .col-o.row-null.table-highlight, .col-o.row-dtnl.table-highlight, .col-o.row-zhchshr.table-highlight, .col-o.row-gkh.table-highlight, .col-u.row-null.table-highlight, .col-u.row-dtnl.table-highlight, .col-u.row-zhchshr.table-highlight, .col-u.row-gkh.table-highlight {
background: rgba(255,255,255,0.7);
} .col-a.row-null.table-extra-highlight, .col-a.row-dtnl.table-extra-highlight, .col-a.row-zhchshr.table-extra-highlight, .col-a.row-gkh.table-extra-highlight, .col-o.row-null.table-extra-highlight, .col-o.row-dtnl.table-extra-highlight, .col-o.row-zhchshr.table-extra-highlight, .col-o.row-gkh.table-extra-highlight, .col-u.row-null.table-extra-highlight, .col-u.row-dtnl.table-extra-highlight, .col-u.row-zhchshr.table-extra-highlight, .col-u.row-gkh.table-extra-highlight {
background: rgba(255,255,255,0.4);
} .col-a.row-bpmf, .col-a.row-zcs, .col-a.row-jqx, .col-o.row-bpmf, .col-o.row-zcs, .col-o.row-jqx, .col-u.row-bpmf, .col-u.row-zcs, .col-u.row-jqx, .col-e.row-null, .col-e.row-dtnl, .col-e.row-zhchshr, .col-e.row-gkh, .col-i.row-null, .col-i.row-dtnl, .col-i.row-zhchshr, .col-i.row-gkh, .col-v.row-null, .col-v.row-dtnl, .col-v.row-zhchshr, .col-v.row-gkh {
background: rgb(240,240,240);
} .col-a.row-bpmf.table-highlight, .col-a.row-zcs.table-highlight, .col-a.row-jqx.table-highlight, .col-o.row-bpmf.table-highlight, .col-o.row-zcs.table-highlight, .col-o.row-jqx.table-highlight, .col-u.row-bpmf.table-highlight, .col-u.row-zcs.table-highlight, .col-u.row-jqx.table-highlight, .col-e.row-null.table-highlight, .col-e.row-dtnl.table-highlight, .col-e.row-zhchshr.table-highlight, .col-e.row-gkh.table-highlight, .col-i.row-null.table-highlight, .col-i.row-dtnl.table-highlight, .col-i.row-zhchshr.table-highlight, .col-i.row-gkh.table-highlight, .col-v.row-null.table-highlight, .col-v.row-dtnl.table-highlight, .col-v.row-zhchshr.table-highlight, .col-v.row-gkh.table-highlight {
background: rgba(240,240,240,0.7);
} .col-a.row-bpmf.table-extra-highlight, .col-a.row-zcs.table-extra-highlight, .col-a.row-jqx.table-extra-highlight, .col-o.row-bpmf.table-extra-highlight, .col-o.row-zcs.table-extra-highlight, .col-o.row-jqx.table-extra-highlight, .col-u.row-bpmf.table-extra-highlight, .col-u.row-zcs.table-extra-highlight, .col-u.row-jqx.table-extra-highlight, .col-e.row-null.table-extra-highlight, .col-e.row-dtnl.table-extra-highlight, .col-e.row-zhchshr.table-extra-highlight, .col-e.row-gkh.table-extra-highlight, .col-i.row-null.table-extra-highlight, .col-i.row-dtnl.table-extra-highlight, .col-i.row-zhchshr.table-extra-highlight, .col-i.row-gkh.table-extra-highlight, .col-v.row-null.table-extra-highlight, .col-v.row-dtnl.table-extra-highlight, .col-v.row-zhchshr.table-extra-highlight, .col-v.row-gkh.table-extra-highlight {
background: rgba(240,240,240,0.4);
} .col-e.row-bpmf, .col-e.row-zcs, .col-e.row-jqx, .col-i.row-bpmf, .col-i.row-zcs, .col-i.row-jqx, .col-v.row-bpmf, .col-v.row-zcs, .col-v.row-jqx {
background: rgb(234,234,238);
} .col-e.row-bpmf.table-highlight, .col-e.row-zcs.table-highlight, .col-e.row-jqx.table-highlight, .col-i.row-bpmf.table-highlight, .col-i.row-zcs.table-highlight, .col-i.row-jqx.table-highlight, .col-v.row-bpmf.table-highlight, .col-v.row-zcs.table-highlight, .col-v.row-jqx.table-highlight {
background: rgba(234,234,238,0.7);
} .col-e.row-bpmf.table-extra-highlight, .col-e.row-zcs.table-extra-highlight, .col-e.row-jqx.table-extra-highlight, .col-i.row-bpmf.table-extra-highlight, .col-i.row-zcs.table-extra-highlight, .col-i.row-jqx.table-extra-highlight, .col-v.row-bpmf.table-extra-highlight, .col-v.row-zcs.table-extra-highlight, .col-v.row-jqx.table-extra-highlight {
background: rgba(234,234,238,0.4);
} .first-row.first-col, .first-row.last-col, .last-row.first-col, .last-row.last-col, .first-row.col-a, .first-row.col-o, .first-row.col-u, .last-row.col-a, .last-row.col-o, .last-row.col-u, .first-col.row-null, .first-col.row-dtnl, .first-col.row-zhchshr, .first-col.row-gkh, .last-col.row-null, .last-col.row-dtnl, .last-col.row-zhchshr, .last-col.row-gkh {
background: rgb(255,255,255);
} .first-row.col-a.table-highlight, .first-row.col-o.table-highlight, .first-row.col-u.table-highlight, .last-row.col-a.table-highlight, .last-row.col-o.table-highlight, .last-row.col-u.table-highlight, .first-col.row-null.table-highlight, .first-col.row-dtnl.table-highlight, .first-col.row-zhchshr.table-highlight, .first-col.row-gkh.table-highlight, .last-col.row-null.table-highlight, .last-col.row-dtnl.table-highlight, .last-col.row-zhchshr.table-highlight, .last-col.row-gkh.table-highlight {
background: rgba(255,255,255,0.7);
} .first-row.col-e, .first-row.col-i, .first-row.col-v, .last-row.col-e, .last-row.col-i, .last-row.col-v, .first-col.row-bpmf, .first-col.row-zcs, .first-col.row-jqx, .last-col.row-bpmf, .last-col.row-zcs, .last-col.row-jqx {
background: rgb(245,245,248);
} .first-row.col-e.table-highlight, .first-row.col-i.table-highlight, .first-row.col-v.table-highlight, .last-row.col-e.table-highlight, .last-row.col-i.table-highlight, .last-row.col-v.table-highlight, .first-col.row-bpmf.table-highlight, .first-col.row-zcs.table-highlight, .first-col.row-jqx.table-highlight, .last-col.row-bpmf.table-highlight, .last-col.row-zcs.table-highlight, .last-col.row-jqx.table-highlight {
background: rgba(245,245,248,0.7);
}
/* FullScreen modal styling */ .pinyin-chart-modal-backdrop {
position: fixed; left: 0px; top: 0px; z-index: 1000; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.5);
} .pinyin-chart-modal {
position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; background-color: white; padding: 20px; overflow: auto;
} .hidden-by-pinyin-chart-modal {
display: none !important;
}
</style>
<button id="table-toggle-large-modal">Enter FullScreen</button> Tone: <input type="radio" name="tone" value="1" /> 1 <input type="radio" name="tone" value="2" /> 2 <input type="radio" name="tone" value="3" /> 3 <input type="radio" name="tone" value="4" /> 4 <input type="radio" name="tone" value="1234" checked />1234 [<a id="additional-settings-collapse" href="#">Show more Settings</a>]
Show Text: <input type="checkbox" id="table-toggle-ipa" /> IPA <input type="checkbox" id="table-toggle-zhuyin" /> Zhuyin <input type="checkbox" id="table-toggle-wade-giles" /> Wade-Giles
Text Size: <input type="radio" name="text-size" value="small"/> Small <input type="radio" name="text-size" value="medium" checked/> Medium <input type="radio" name="text-size" value="large"/> Large
Chart Mode: <input type="radio" name="chart-mode" value="audio" checked/> Audio <input type="radio" name="chart-mode" value="link"/> Links (disables audio)
<script> var audioEndedListener = function() {
var $audioDiv = $('.pinyin-table-audio-container');
if ($audioDiv.children().length>1) {
$audioDiv.children().get(1).play();
}
$(this).remove();
if ($audioDiv.children().length>1) {
$audioDiv.children().get(1).pause();
$audioDiv.children().get(1).load();
} else {
$('.playing-audio').removeClass('playing-audio');
}
}; var audioCanPlayListener = function() {
if (this===$('.pinyin-table-audio-container audio:last-child').get(0)) {
console.log('Removing loading-audio class');
$('.pinyin-table').removeClass('loading-audio');
}
};
/* Add tone marks */ var vowelAddTone = function(vowel,number) {
var tones = ['āēīōūǖ',
'áéíóúǘ',
'ǎěǐǒǔǚ',
'àèìòùǜ'][number-1]
return tones['aeiouü'.indexOf(vowel)]
}; var syllableAddTone = function(syllable,number) {
if (syllable.indexOf("a")!==-1) {
return syllable.substr(0,syllable.indexOf("a")) + vowelAddTone('a',number) + syllable.substr(syllable.indexOf("a")+1,syllable.length);
} else if (syllable.indexOf("e")!==-1) {
return syllable.substr(0,syllable.indexOf("e")) + vowelAddTone('e',number) + syllable.substr(syllable.indexOf("e")+1,syllable.length);
} else if (syllable.indexOf("ou")!==-1) {
return syllable.substr(0,syllable.indexOf("o")) + vowelAddTone('e',number) + syllable.substr(syllable.indexOf("o")+1,syllable.length);
} else {
var vowels = 'aeiouü';
var vowelCount = 0
for (var i=0; i<syllable.length; i++) {
if (vowels.indexOf(syllable[i])!==-1) {
vowelCount++;
}
}
if (vowelCount===1) {
for (var i=0; i<vowels.length; i++) {
if (syllable.indexOf(vowels[i])!==-1) {
return syllable.substr(0,syllable.indexOf(vowels[i])) + vowelAddTone(syllable[syllable.indexOf(vowels[i])],number) + syllable.substr(syllable.indexOf(vowels[i])+1,syllable.length);
}
}
} else {
var first_vowel_index = 1000;
for (var i=0; i<vowels.length; i++) {
if (syllable.indexOf(vowels[i])!==-1 && syllable.indexOf(vowels[i])<first_vowel_index) {
first_vowel_index = syllable.indexOf(vowels[i])
}
}
return syllable.substr(0,first_vowel_index+1) + vowelAddTone(syllable[first_vowel_index+1],number) + syllable.substr(first_vowel_index+2,syllable.length);
}
}
};
/*pinyin table scripts*/ $(document).ready( function() {
$('.table-link').hide();
$('.table-ipa').hide();
$('.table-zhuyin').hide();
$('.table-wade-giles').hide();
$('.col-placeholder').hide();
$('#pinyin-chart-settings .additional-settings').hide();
//Toggle additional settings
$('#pinyin-chart-settings #additional-settings-collapse').click( function(e) {
e.preventDefault();
if ($(this).text()==="Show more Settings") {
$(this).text("Show less Settings");
$('#pinyin-chart-settings .additional-settings').slideDown();
} else {
$(this).text("Show more Settings");
$('#pinyin-chart-settings .additional-settings').slideUp();
}
});
//highlight row and col of hovered cell
$('#pinyin-table td').hover( function() {
if ($(this).children('div.table-pinyin').length && $('input[name="chart-mode"]:checked').val()==="audio") {
$(this).addClass('table-extra-highlight');
$(this).siblings().addClass('table-highlight');
var rowIndex = $(this).prevAll().length+1;
$('#pinyin-table tr :nth-child('+rowIndex+')').addClass('table-highlight');
};
}, function() {
$(this).removeClass('table-extra-highlight')
$('.table-highlight').removeClass('table-highlight');
}).click( function() {
if ($(this).children('div.table-pinyin').length && $('input[name="chart-mode"]:checked').val()==="audio") {
var tones=$('input[name=\'tone\']:checked').val();
var $audioDiv = $('.pinyin-table-audio-container');
$audioDiv.empty();
for (var i=0; i<tones.length; i++) {
var sound_url = "http://resources.allsetlearning.com/pronwiki/resources/pinyin-audio/" + $(this).attr('id') + tones[i] + ".mp3"
sound_url = sound_url.replace('ü', 'u%CC%88');
$audioDiv.append("<audio src=\"" + sound_url + "\" type=\"audio/mpeg\"></audio>");
};
for (var i=0; i<$audioDiv.children().length; i++) {
$audioDiv.children().get(i).addEventListener("ended",audioEndedListener);
$audioDiv.children().get(i).addEventListener("canplay",audioCanPlayListener);
};
$audioDiv.children().get(0).pause();
$audioDiv.children().get(0).load();
$('.pinyin-table').addClass('loading-audio');
$('.playing-audio').removeClass('playing-audio');
$(this).addClass('playing-audio');
$audioDiv.children().get(0).play();
if ($audioDiv.children().length>1) {
$audioDiv.children().get(1).pause();
$audioDiv.children().get(1).load();
};
};
});
//collapse column groups
$('th.col-a, th.col-e, th.col-o, th.col-i, th.col-u, th.col-v').hover( function() {
var thClass;
if ($(this).hasClass('col-a')) {
thClass='col-a';
} else if ($(this).hasClass('col-e')) {
thClass='col-e';
} else if ($(this).hasClass('col-o')) {
thClass='col-o';
} else if ($(this).hasClass('col-i')) {
thClass='col-i';
} else if ($(this).hasClass('col-u')) {
thClass='col-u';
} else if ($(this).hasClass('col-v')) {
thClass='col-v';
}
$('th.'+thClass).addClass('table-selected');
}, function() {
$('.table-selected').removeClass('table-selected');
}).click( function() {
var thClass;
if ($(this).hasClass('col-a')) {
thClass='col-a';
} else if ($(this).hasClass('col-e')) {
thClass='col-e';
} else if ($(this).hasClass('col-o')) {
thClass='col-o';
} else if ($(this).hasClass('col-i')) {
thClass='col-i';
} else if ($(this).hasClass('col-u')) {
thClass='col-u';
} else if ($(this).hasClass('col-v')) {
thClass='col-v';
}
if ($(this).hasClass('col-placeholder')) {
$('#pinyin-table .'+thClass).show();
$('#pinyin-table .'+thClass+'.col-placeholder').hide();
} else {
$('#pinyin-table .'+thClass).hide();
$('#pinyin-table .'+thClass+'.col-placeholder').show();
}
});
//change text size
$('div#pinyin-chart-settings div.additional-settings input[name="text-size"]').click( function() {
var new_size = $('input[name="text-size"]:checked').val();
console.log('Changing table size to '+new_size);
$('.pinyin-table').removeClass('small').removeClass('medium').removeClass('large');
$('.pinyin-table').addClass(new_size);
});
//change chart mode
$('div#pinyin-chart-settings div.additional-settings input[name="chart-mode"]').click( function() {
var new_mode = $('input[name="chart-mode"]:checked').val();
if (new_mode==="link") {
$('.table-pinyin').hide();
$('.table-link').show();
} else {
$('.table-pinyin').show();
$('.table-link').hide();
}
});
//toggle showing ipa, zhuyin, wade-giles
$('#table-toggle-ipa').click(function() {
if ($(this).prop('checked')) {
$('.table-ipa').show();
} else {
$('.table-ipa').hide();
}
});
$('#table-toggle-zhuyin').click(function() {
if ($(this).prop('checked')) {
$('.table-zhuyin').show();
} else {
$('.table-zhuyin').hide();
}
});
$('#table-toggle-wade-giles').click(function() {
if ($(this).prop('checked')) {
$('.table-wade-giles').show();
} else {
$('.table-wade-giles').hide();
}
});
//toggle large modal "fullscreen" mode
$('#table-toggle-large-modal').click(function() {
if ($('.pinyin-chart-modal').length) {
//already in fullscreen mode, so disable
$(this).text('Enter FullScreen');
$('body').children().removeClass('hidden-by-pinyin-chart-modal');
var $mwContentText = $('#mw-content-text');
$mwContentText.prepend($('.table-container'));
$mwContentText.prepend($('.pinyin-table-audio-container'));
$mwContentText.prepend($('#pinyin-chart-settings'));
$('.pinyin-chart-modal').remove();
} else {
//enable fullscreen mode
$(this).text('Exit FullScreen');
$('body').children().addClass('hidden-by-pinyin-chart-modal');
$('body').append('
');
var $modal = $('.pinyin-chart-modal');
$modal.append($('#pinyin-chart-settings'));
$modal.append($('.pinyin-table-audio-container'));
$modal.append($('.table-container'));
}
});
}); </script>
