雑記帳: 簡易条文ビューア

不具合満載で機能不足だけど、ここで打ち切り。
久しぶりにJavaScriptいじろうとしたらさっぱり忘れてて、
ググッて見つけたコードをコピペしてたら疲れた、もうやめた。

概要：ローカルでWEBブラウザを使って税法の条文を閲覧・編集するためのツール

環境：
Ubuntu
Chromeブラウザ（バージョン51.0 (64-bit)）

---必要なファイル---
bootstrap-3.3.7-dist (http://getbootstrap.com/)
jquery-1.11.3 (https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js)
encoding.js (http://polygon-planet-log.blogspot.jp/2012/04/javascript.html)
消費税法のHTMLファイル（今日現在）
(http://law.e-gov.go.jp/htmldata/S63/S63HO108.html)

準備：

１．bootstrapをダウンロードし、解凍してできたフォルダの中（作業ディレクトリ）へ移動

２．jquery.min.jpをjsフォルダ内にコピー

３．encoding.jsをjsフォルダ内にコピー

４．消費税法のHTMLファイル（消費税法.html）を作業ディレクトリに置く

４．viewer.html（下記参照）を作業ディレクトリに置く

使い方：

１．viewer.htmlをブラウザで開く

２．画面右手の操作パネル内の「ファイルを選択」ボタンをクリックし、消費税法.htmlを読み込む

３．条文が表示されるので、編集

文字列を選択してから、
太字：Ctrl+B
下線：Ctrl+U
斜体：Ctrl+I
コピー：Ctrl+C
貼り付け：Ctrl+V
操作パネル内のマーカーボタンでハイライト

５．操作パネル内の保存ボタンで、編集済みのテキストを保存、のはずなんだどけ、
機能せず。ファイルサイズ（６１４KB）のせい？憲法（５８KB）なら動いた。

viewer.html -------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>簡易条文ビューワ</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/encoding.js"></script>
<style>
.container{
position: fixed;
z-index: 9999;
opacity: 0.8;
}

.row{
margin-top:10px;
margin-left:-30px;
padding: 0 10px;
}

.clickable{
cursor: pointer;
}

.panel-heading span {
margin-top: -20px;
font-size: 15px;
}
</style>
<script>
$(document).on('click', '.panel-heading span.clickable', function(e){
var $this = $(this);
if(!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.parents('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})

function gettext( maintxt ){
var myRe = /(<b>第.*条<\/b>)\s*(<a name="\d*">)(<\/a>)/g ;
var menu = "";

maintxt = maintxt.replace( /<html>[\s|\S]*<body>/ , "" ) ;
maintxt = maintxt.replace( /<\/body>[\s|\S]*<\/html>/ , "" ) ;

while ((myArray = myRe.exec( maintxt )) !== null) {
myArray[2] = myArray[2].replace( /name="/, 'href="#');
menu = menu + myArray[2]+ myArray[1] + myArray[3] + "<br />";
}

document.querySelector("#menu").innerHTML = menu;
document.querySelector("#maintxt").innerHTML = maintxt;
}

window.onload = function(){
document.querySelector("#afile").addEventListener(
'change', afile_changeHandler);

document.querySelector("#markercolor").addEventListener(
'change', markercolor_changeHandler);

document.querySelector("#fontsize").addEventListener(
'change', fontsize_changeHandler);
}

var fontsize = 14;
function fontsize_changeHandler(evt){
fontsize = document.querySelector("#fontsize").value;
$("#maintxt").attr("style", "font-size: " + fontsize + "px;");
};

var markercolor = "#FFFF00";
function markercolor_changeHandler(evt){
markercolor = document.querySelector("#markercolor").value;
};

function afile_changeHandler(evt){
var file = evt.target.files[0];
var reader = new FileReader();

reader.onload = function (e) {
var array = new Uint8Array(e.target.result);
switch (Encoding.detect(array)) {
case 'UTF16':
array = new Uint16Array(e.target.result);
break;
case 'UTF32':
array = new Uint32Array(e.target.result);
break;
}
var unicodeArray = Encoding.convert(array, 'UNICODE');
var text = Encoding.codeToString(unicodeArray);
gettext(text);
}
reader.readAsArrayBuffer(file);
}

jQuery(function($) {
$("#marker").click( function(evt) {
var selObj = window.getSelection();
if (selObj == '') {return false;}
var range = selObj.getRangeAt(0);
var span = document.createElement("span");
span.style.backgroundColor = markercolor;
range.surroundContents(span);
});
});

jQuery(function($) {
$("#savetext").click( function() {
if (typeof Blob == "undefined") {
alert('このブラウザには対応していません');
}

var newtext = document.querySelector("#maintxt").innerHTML;
if ( newtext == "" ) return;
newtext = "<html><body>" + newtext + "</body></html>";
var blob = new Blob([ newtext ], { "type" : "application/x-mssavetext" });

window.URL = window.URL || window.webkitURL;
$("#savetext").attr("href", window.URL.createObjectURL(blob));
$("#savetext").attr("download", "sample.html");
jQuery("#savetext").trigger("click");
});
});
</script>
</head>
<body>
<table width="100%"><tr><td width="50%">

<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">目次</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<div id="menu"></div>
</div>
</div>
</div>
</div>
</div>

</td><td width="50%" style="float:right;">

<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">操作パネル</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<input id="afile" type="file" name="selectfile" accept="text/html" /><br />
<a id="savetext" target="_blank"><input type="button" value="保存" /></a><br /><br />
フォントサイズ<input id="fontsize" type="range" min="10" max="18" step="1" /><br />
<input type="button" value="マーカー色" id="marker" />：<input type="color" id="markercolor" list="markerlist" value="#FFFF00" />
<datalist id="markerlist">
<option value="#FF0000"></option>
<option value="#00FF00"></option>
<option value="#0000FF"></option>
</datalist>
<br /><br />
</div>
</div>
</div>
</div>
</div>

</td></tr></table>

<div id="maintxt" contentEditable="true" style="font-size: 14px;"></div>

</body>
</html>

雑記帳

2016年9月22日木曜日

簡易条文ビューア - 挫折

0 件のコメント:

コメントを投稿