Difference between revisions of "Widget:Pinyin chart"
Mscottmoore (talk | contribs) (Undo revision 3499 by Mscottmoore (talk)) |
Mscottmoore (talk | contribs) (testing fullscreen) |
||
| Line 198: | Line 198: | ||
} | } | ||
| + | /* FullScreen modal styling */ | ||
| + | .pinyin-chart-modal-backdrop { | ||
| + | position: fixed; | ||
| + | left: 0px; | ||
| + | top: 0px; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | background-color: rgba(0,0,0,0.5); | ||
| + | } | ||
| + | .pinyin-chart-modal { | ||
| + | box-sizing: border-box; | ||
| + | width: 90%; | ||
| + | height: 90%; | ||
| + | background-color: white; | ||
| + | margin-left: 5%; | ||
| + | margin-top: 5%; | ||
| + | padding: 20px; | ||
| + | } | ||
</style> | </style> | ||
<div id="pinyin-chart-settings"> | <div id="pinyin-chart-settings"> | ||
<p> | <p> | ||
| + | <button id="table-toggle-large-modal">Enter FullScreen</button> | ||
<span class="tone-option-label"><strong>Tone:</strong></span> | <span class="tone-option-label"><strong>Tone:</strong></span> | ||
<span class="tone-option"><input type="radio" name="tone" value="1" /> 1 </span> | <span class="tone-option"><input type="radio" name="tone" value="1" /> 1 </span> | ||
| Line 1,373: | Line 1,392: | ||
var $audioDiv = $('.pinyin-table-audio-container'); | var $audioDiv = $('.pinyin-table-audio-container'); | ||
if ($audioDiv.children().length>1) { | if ($audioDiv.children().length>1) { | ||
| − | + | $audioDiv.children().get(1).play(); | |
} | } | ||
$(this).remove(); | $(this).remove(); | ||
if ($audioDiv.children().length>1) { | if ($audioDiv.children().length>1) { | ||
| − | + | $audioDiv.children().get(1).pause(); | |
| − | + | $audioDiv.children().get(1).load(); | |
} else { | } else { | ||
| − | + | $('.playing-audio').removeClass('playing-audio'); | |
} | } | ||
}; | }; | ||
var audioCanPlayListener = function() { | var audioCanPlayListener = function() { | ||
if (this===$('.pinyin-table-audio-container audio:last-child').get(0)) { | if (this===$('.pinyin-table-audio-container audio:last-child').get(0)) { | ||
| − | + | console.log('Removing loading-audio class'); | |
| − | + | $('.pinyin-table').removeClass('loading-audio'); | |
} | } | ||
}; | }; | ||
| Line 1,393: | Line 1,412: | ||
var vowelAddTone = function(vowel,number) { | var vowelAddTone = function(vowel,number) { | ||
var tones = ['āēīōūǖ', | var tones = ['āēīōūǖ', | ||
| − | + | 'áéíóúǘ', | |
| − | + | 'ǎěǐǒǔǚ', | |
| − | + | 'àèìòùǜ'][number-1] | |
return tones['aeiouü'.indexOf(vowel)] | return tones['aeiouü'.indexOf(vowel)] | ||
}; | }; | ||
var syllableAddTone = function(syllable,number) { | var syllableAddTone = function(syllable,number) { | ||
if (syllable.indexOf("a")!==-1) { | 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) { | } 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) { | } 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 { | } 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); | |
| − | + | } | |
} | } | ||
}; | }; | ||
| Line 1,444: | Line 1,463: | ||
//Toggle additional settings | //Toggle additional settings | ||
$('#pinyin-chart-settings #additional-settings-collapse').click( function(e) { | $('#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 | //highlight row and col of hovered cell | ||
$('#pinyin-table td').hover( function() { | $('#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() { | }, function() { | ||
| − | + | $(this).removeClass('table-extra-highlight') | |
| − | + | $('.table-highlight').removeClass('table-highlight'); | |
}).click( function() { | }).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 | //collapse column groups | ||
$('th.col-a, th.col-e, th.col-o, th.col-i, th.col-u, th.col-v').hover( function() { | $('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() { | }, function() { | ||
| − | + | $('.table-selected').removeClass('table-selected'); | |
}).click( function() { | }).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 | //change text size | ||
$('div#pinyin-chart-settings div.additional-settings input[name="text-size"]').click( function() { | $('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); | |
}); | }); | ||
| Line 1,530: | Line 1,565: | ||
//change chart mode | //change chart mode | ||
$('div#pinyin-chart-settings div.additional-settings input[name="chart-mode"]').click( function() { | $('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 | //toggle showing ipa, zhuyin, wade-giles | ||
| − | $('#table-toggle-ipa').click( function() { | + | $('#table-toggle-ipa').click(function() { |
| − | + | if ($(this).prop('checked')) { | |
| − | + | $('.table-ipa').show(); | |
| − | + | } else { | |
| − | + | $('.table-ipa').hide(); | |
| − | + | } | |
}); | }); | ||
| − | $('#table-toggle-zhuyin').click( function() { | + | $('#table-toggle-zhuyin').click(function() { |
| − | + | if ($(this).prop('checked')) { | |
| − | + | $('.table-zhuyin').show(); | |
| − | + | } else { | |
| − | + | $('.table-zhuyin').hide(); | |
| − | + | } | |
}); | }); | ||
| − | $('#table-toggle-wade-giles').click( function() { | + | $('#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-backdrop').length) { | ||
| + | //already in fullscreen mode, so disable | ||
| + | $(this).text('Enter FullScreen'); | ||
| + | var $mwContentText = ('#mw-content-text'); | ||
| + | $mwContentText.prepend($('.table-container')); | ||
| + | $mwContentText.prepend($('.pinyin-table-audio-container')); | ||
| + | $mwContentText.prepend($('#pinyin-chart-settings')); | ||
| + | $('.pinyin-chart-modal-backdrop').remove(); | ||
| + | } else { | ||
| + | //enable fullscreen mode | ||
| + | $(this).text('Exit FullScreen'); | ||
| + | var $backdrop = $('body').prepend('div').addClass('pinyin-chart-modal-backdrop'); | ||
| + | var $modal = $backdrop.append('div').addClass('pinyin-chart-modal'); | ||
| + | $modal.append($('#pinyin-chart-settings')); | ||
| + | $modal.append($('.pinyin-table-audio-container')); | ||
| + | $modal.append($('.table-container')); | ||
| + | } | ||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
Revision as of 04:00, 14 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; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);
} .pinyin-chart-modal {
box-sizing: border-box; width: 90%; height: 90%; background-color: white; margin-left: 5%; margin-top: 5%; padding: 20px;
} </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-backdrop').length) {
//already in fullscreen mode, so disable
$(this).text('Enter FullScreen');
var $mwContentText = ('#mw-content-text');
$mwContentText.prepend($('.table-container'));
$mwContentText.prepend($('.pinyin-table-audio-container'));
$mwContentText.prepend($('#pinyin-chart-settings'));
$('.pinyin-chart-modal-backdrop').remove();
} else {
//enable fullscreen mode
$(this).text('Exit FullScreen');
var $backdrop = $('body').prepend('div').addClass('pinyin-chart-modal-backdrop');
var $modal = $backdrop.append('div').addClass('pinyin-chart-modal');
$modal.append($('#pinyin-chart-settings'));
$modal.append($('.pinyin-table-audio-container'));
$modal.append($('.table-container'));
}
});
});
</script>
