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);
}
/* FullScreen modal styling */ .pinyin-chart-modal {
box-sizing: border-box; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; padding: 20px; overflow: auto;
} .hidden-by-pinyin-chart-modal {
display: none !important;
} .pinyin-chart-modal-active {
width: 100% !important; height: 100% !important; overflow: hidden !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>
function defer(method) {
if (window.jQuery) { method(); } else { setTimeout(function() { defer(method) }, 50); }
}
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*/ var createTable = 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'); $('html, body').removeClass('pinyin-chart-modal-active'); $('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'); $('html, body').addClass('pinyin-chart-modal-active'); $('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')); } });
}
defer(createTable); </script>