Widget:Pinyin chart
<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);
}
</style>
<button id="fullscreen-button">Fullscreen Mode</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();
//Fullscreen mode
$('#fullscreen-button').click(function() {
var e = document.getElementById('pinyin-table-container');
if (e.requestFullscreen) {
e.requestFullscreen();
} else if (e.msRequestFullscreen) {
e.msRequestFullscreen();
} else if (e.mozRequestFullScreen) {
e.mozRequestFullScreen();
} else if (e.webkitRequestFullscreen) {
e.webkitRequestFullscreen();
}
});
//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() {
if ($(this).hasClass('col-a')) { var thClass='col-a'; } else if ($(this).hasClass('col-e')) { var thClass='col-e'; } else if ($(this).hasClass('col-o')) { var thClass='col-o'; } else if ($(this).hasClass('col-i')) { var thClass='col-i'; } else if ($(this).hasClass('col-u')) { var thClass='col-u'; } else if ($(this).hasClass('col-v')) { var thClass='col-v'; }; $('th.'+thClass).addClass('table-selected');
}, function() {
$('.table-selected').removeClass('table-selected');
}).click( function() {
if ($(this).hasClass('col-a')) { var thClass='col-a'; } else if ($(this).hasClass('col-e')) { var thClass='col-e'; } else if ($(this).hasClass('col-o')) { var thClass='col-o'; } else if ($(this).hasClass('col-i')) { var thClass='col-i'; } else if ($(this).hasClass('col-u')) { var thClass='col-u'; } else if ($(this).hasClass('col-v')) { var 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(); }
});
});
</script>
