Difference between revisions of "Widget:Pinyin chart"
Mscottmoore (talk | contribs) (Combining various pinyin chart widgets) |
Mscottmoore (talk | contribs) (Testing combined widget) |
||
Line 1: | Line 1: | ||
− | {{# | + | <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> | ||
+ | <div id="pinyin-chart-settings"> | ||
+ | <p> | ||
+ | <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="2" /> 2 </span> | ||
+ | <span class="tone-option"><input type="radio" name="tone" value="3" /> 3 </span> | ||
+ | <span class="tone-option"><input type="radio" name="tone" value="4" /> 4 </span> | ||
+ | <span class="tone-option"><input type="radio" name="tone" value="1234" checked />1234 </span> | ||
+ | <span class="settings-collapse">[<a id="additional-settings-collapse" href="#">Show more Settings</a>]</span> | ||
+ | </p> | ||
+ | <div class="additional-settings"> | ||
+ | <div class="additional-settings-label">Additional Settings</div> | ||
+ | <div class="additional-settings-content"> | ||
+ | <p> | ||
+ | <span class="show-text-option-label"><strong>Show Text:</strong></span> | ||
+ | <span class="show-text-option"><input type="checkbox" id="table-toggle-ipa" /> IPA</span> | ||
+ | <span class="show-text-option"><input type="checkbox" id="table-toggle-zhuyin" /> Zhuyin</span> | ||
+ | <span class="show-text-option"><input type="checkbox" id="table-toggle-wade-giles" /> Wade-Giles</span> | ||
+ | </p> | ||
+ | <p> | ||
+ | <span class="text-size-option-label"><strong>Text Size:</strong></span> | ||
+ | <span class="text-size-option"><input type="radio" name="text-size" value="small"/> Small </span> | ||
+ | <span class="text-size-option"><input type="radio" name="text-size" value="medium" checked/> Medium </span> | ||
+ | <span class="text-size-option"><input type="radio" name="text-size" value="large"/> Large </span> | ||
+ | </p> | ||
+ | <p> | ||
+ | <span class="chart-mode-option-label"><strong>Chart Mode:</strong></span> | ||
+ | <span class="chart-mode-option"><input type="radio" name="chart-mode" value="audio" checked/> Audio </span> | ||
+ | <span class="chart-mode-option"><input type="radio" name="chart-mode" value="link"/> Links (disables audio) </span> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
<div class="pinyin-table-audio-container"></div> | <div class="pinyin-table-audio-container"></div> | ||
Line 1,138: | Line 1,369: | ||
</tr><!--{/if}--> | </tr><!--{/if}--> | ||
</table></div> | </table></div> | ||
− | {{# | + | <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" | ||
+ | if (sound_url.indexOf('.C3.BC')!==-1) { | ||
+ | sound_url = sound_url.substr(0,sound_url.indexOf('.C3.BC'))+'u%CC%88'+sound_url.substr(sound_url.indexOf('.C3.BC')+6,sound_url.length); | ||
+ | }; | ||
+ | $audioDiv.append("<audio src=\"" + sound_url + "\" type=\"audio/mpeg\"></audio>"); | ||
+ | console.log(sound_url,0); | ||
+ | }; | ||
+ | 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> |
Revision as of 02:43, 10 June 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);
}
</style>
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" if (sound_url.indexOf('.C3.BC')!==-1) { sound_url = sound_url.substr(0,sound_url.indexOf('.C3.BC'))+'u%CC%88'+sound_url.substr(sound_url.indexOf('.C3.BC')+6,sound_url.length); }; $audioDiv.append("<audio src=\"" + sound_url + "\" type=\"audio/mpeg\"></audio>"); console.log(sound_url,0); }; 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>