jszhuyin
Version:
Smart Chinese Zhuyin Input Method in JavaScript.
383 lines (337 loc) • 12.3 kB
HTML
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JS 注音：線上注音輸入 – Bopomofo Input Online in JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//timc.idv.tw/matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '11']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<style type="text/css">
@media screen and (min-width: 768px) {
body {
padding: 70px 0;
}
*[hidden] {
display: none;
}
#inputarea {
min-height: 8em;
}
.navbar select {
display: none;
}
}
@media (max-width: 767px) {
body > .container {
margin: 10px 5px 70px;
}
#inputarea {
min-height: 3em;
}
.navbar .nav, .navbar .navbar-brand {
display: none;
}
.navbar select {
margin: 10px 0;
display: block;
}
}
body.distraction-free > .container > *:not(#inputarea):not(#panel),
body.distraction-free > *:not(.container):not(#appcache_info) {
opacity: 0;
-webkit-transition: opacity 3s ease;
-ms-transition: opacity 3s ease;
transition: opacity 3s ease;
}
body > .container > *:not(#inputarea):not(#panel),
body > *:not(.container) {
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
}
#inputarea {
font-size: 140%;
outline: none;
}
@media screen and (min-width: 768px) {
#panel {
position: absolute;
z-index: 2000;
max-width: 50%;
margin: 5px 10px 10px 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
body {
margin-bottom: 40%;
}
}
#panel .panel-heading {
margin-bottom: 0;
}
#panel .pagination {
margin: 2px 1px -2px 1px;
}
#composition {
font-family: '標楷體', 'UKai', 'Kai', serif;
}
#candidates {
counter-reset: candidates;
font-size: 120%;
}
#candidates li {
cursor: pointer;
}
#candidates::before,
#candidates::after,
#candidates li span::before {
display: block;
color: #fff;
border-radius: 0.5em;
background-color: rgb(66, 139, 202);
font-size: 80%;
line-height: 20px;
height: 20px;
text-align: center;
}
#candidates::before,
#candidates::after {
margin: 8px;
padding: 0 0.5em;
}
#candidates::before {
content: 'Shift +';
float: left;
}
#candidates::after {
float: right;
}
#candidates.can-go-left:not(.can-go-right)::after {
content: '←';
}
#candidates.can-go-right:not(.can-go-left)::after {
content: '→';
float: right;
}
#candidates.can-go-left.can-go-right::after {
content: '↔';
float: right;
}
#candidates li span::before {
content: counter(candidates);
counter-increment: candidates 1;
float: left;
margin-right: 0.5em;
margin-top: 3px;
width: 1.5em;
}
@media screen and (min-width: 768px) {
#candidates,
#candidates li {
display: block;
clear: both;
}
#panel {
padding-bottom: 8px;
}
#candidates::after {
margin-bottom: 0;
}
#candidates li {
padding-left: 2em;
}
#candidates li:hover {
background-color: #eee;
}
#candidates li span {
float: none;
border: none;
background: none;
padding-left: 0;
}
#candidates li span::before {
margin: 1px 8px 0 -2em;
}
}
/* Config */
.modal-dialog {
height: 100%;
}
.modal-content {
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.modal-body {
/* Workaround iOS scrolling perfromance issue */
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.modal-footer {
margin-top: 0;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
.checkbox label {
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<a class="navbar-brand" href="./">JS 注音</a>
<select class="form-control" id="mobile-nav">
<option value="./" selected>線上注音輸入</option>
<option value="https://github.com/timdream/jszhuyin">GitHub</option>
<option value="https://github.com/timdream/jszhuyin/blob/master/README.md">README</option>
<option value="https://github.com/timdream/jszhuyin/blob/master/API.md">API</option>
<option value="http://timdream.org/">timdream</option>
</select>
<ul class="nav navbar-nav">
<li class="active"><a href="./">線上注音輸入</a></li>
<li><a href="https://github.com/timdream/jszhuyin">GitHub</a></li>
<li><a href="https://github.com/timdream/jszhuyin/blob/master/README.md">README</a></li>
<li><a href="https://github.com/timdream/jszhuyin/blob/master/API.md">API</a></li>
<li><a href="http://timdream.org/">timdream</a></li>
</ul>
</div>
</div>
<div class="container">
<p class="lead">
<button id="config-btn" class="pull-right btn btn-default disabled"><span class="glyphicon glyphicon-wrench"></span></button>
<strong>JS 注音</strong>為使用 Web 技術開發的自動選字注音輸入法。<br /><small>Type Chinese in Bopomofo with <strong>JSZhuyin</strong>, powered entirely by the Web.</small>
</p>
<p>您可以在此處線上輸入中文，不需安裝任何程式。</p>
<!-- We would need a <br> here to make sure we can get the client rect we could work with -->
<div id="inputarea" class="well well-sm"><br/></div>
<div class="panel panel-primary" id="panel" hidden>
<div class="panel-heading"><span id="composition"></span></div>
<ul class="pagination" id="candidates"></ul>
</div>
<p><span id="status">...</span></p>
</div>
<div id="config-dialog-dialog" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h4>一般設定</h4>
<p>已經輸入的注音符號不一定會適用。</p>
<form role="form">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="reorder-symbols">
重排注音符號順序（例如，將 <code>ㄨㄇ</code> 修正為 <code>ㄇㄨ</code>）
</label>
<span class="help-block">
當輸入的注音順序對調時，盡量將符號排進同一個字，而不是推到下一個。
開啟此功能可輔助硬體鍵盤輸入，關閉則符合螢幕虛擬鍵盤的行為。</span>
</div>
</div>
</form>
<h4>容錯搜尋</h4>
<p>找字時考慮下列拼音錯誤。</p>
<form role="form" id="interchangable-pairs-config">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄣㄥ">
<code>ㄣ</code>/<code>ㄥ</code>，例如「<strong>新</strong>」與「<strong>星</strong>」。
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄢㄤ">
<code>ㄢ</code>/<code>ㄤ</code>，例如「<strong>觀</strong>」與「<strong>光</strong>」。
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄡㄨㄛ">
<code>ㄡ</code>/<code>ㄨㄛ</code>，例如「<strong>後</strong>」與「<strong>或</strong>」。
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄜㄦ">
<code>ㄜ</code>/<code>ㄦ</code>，例如「<strong>噁</strong>」與「<strong>耳</strong>」。
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄈㄏ">
<code>ㄈ</code>/<code>ㄏ</code>，例如「<strong>發</strong>」與「<strong>哈</strong>」。
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄋㄌ">
<code>ㄋ</code>/<code>ㄌ</code>，例如「<strong>年</strong>」與「<strong>連</strong>」。
</label>
</div>
<!-- 捲舌音 -->
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄓㄗ">
<code>ㄓ</code>/<code>ㄗ</code>，例如「<strong>債</strong>」與「<strong>在</strong>」。
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄔㄘ">
<code>ㄔ</code>/<code>ㄘ</code>，例如「<strong>重</strong>」與「<strong>從</strong>」。
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄕㄙ">
<code>ㄕ</code>/<code>ㄙ</code>，例如「<strong>師</strong>」與「<strong>司</strong>」。
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-pair="ㄖㄌ">
<code>ㄖ</code>/<code>ㄌ</code>，例如「<strong>熱</strong>」與「<strong>樂</strong>」。
</label>
</div>
</div>
</form>
<h4>離線使用</h4>
<p class="sw-status" hidden id="sw-status-installed">網站資料已下載，可供離線使用。<button id="sw-remove" class="btn btn-default">移除</button></p>
<p class="sw-status" hidden id="sw-status-uninstalled">下載資料供離線使用。<button id="sw-install" class="btn btn-default">下載</button></p>
<p class="sw-status" hidden id="sw-status-installing">安裝中⋯⋯</p>
<p class="sw-status" hidden id="sw-status-removing">移除中⋯⋯</p>
<p class="sw-status" id="sw-status-notsupported">瀏覽器目前的設定禁止網站儲存離線資料，或是不支援。</p>
</div>
<div class="modal-footer">
<button type="button" id="config-dialog-close" class="btn btn-primary">關閉</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript" src="lib/client.js"></script>
<script type="text/javascript" src="lib/web.js"></script>
<script type="text/javascript" src="assets/index.js?_=1"></script>
</body>
</html>