Skip to content

Instantly share code, notes, and snippets.

@shunito
Last active August 29, 2015 14:14
Show Gist options
  • Save shunito/42e47bfaf28e212ea694 to your computer and use it in GitHub Desktop.
Save shunito/42e47bfaf28e212ea694 to your computer and use it in GitHub Desktop.
選択したNodeからEPUBCFIのPath文字列作るテスト
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Node to EPUBCFI path</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body id="chap01">
<div id="article1">
<p id="p1">牛耕式(ぎゅうこうしき)、または<span>ブストロフェドン</span><span>(ギリシャ語:βουστροφηδόν、“耕す牛のように引き返す”の意)</span>とは、写本や銘文の書記に用いられた古代の筆記方式。現代英語のように左から右へ、またヘブライ語やアラビア語のように右から左へ文字が並ぶのとは異なり、一行ずつ交互に逆方向へ読み進める。「ブストロフェドン」の名はギリシャ語に由来する。この語源はβους(牛) + στρεφειν(引き返す)で、書き手の手が前後に行ったり来たりするのが、畑の上で鋤を引く牛が一列の終わりで引き返すのに似ていることから来ている。</p>
<p id="p2">Safaiticなど多くの古代の文書には、牛耕式が頻繁に使用されたか、あるいは常用された。しかしギリシャでは先史時代の古い銘文に見られるのがほとんどで、ヘレニック時代には次第に使用されなくなっていった。</p>
<p id="p3">ラパ・ヌイの木版や他の陰刻の施された加工物にも、ロンゴロンゴと呼ばれる未解読の文字が牛耕式で書かれている。ロンゴロンゴでは、文章は一行ごとに180度回転させて書かれており、鏡文字にはなっていない。これは特にリバース・ブストロフェドン(reverse boustrophedon)と呼ばれる。</p>
</div>
<div id="article2">
<p id="p4">牛耕式(ぎゅうこうしき)、またはブストロフェドン(ギリシャ語:βουστροφηδόν、“耕す牛のように引き返す”の意)とは、写本や銘文の書記に用いられた古代の筆記方式。現代英語のように左から右へ、またヘブライ語やアラビア語のように右から左へ文字が並ぶのとは異なり、一行ずつ交互に逆方向へ読み進める。「ブストロフェドン」の名はギリシャ語に由来する。この語源はβους(牛) + στρεφειν(引き返す)で、書き手の手が前後に行ったり来たりするのが、畑の上で鋤を引く牛が一列の終わりで引き返すのに似ていることから来ている。</p>
<p id="p5">Safaiticなど多くの古代の文書には、牛耕式が頻繁に使用されたか、あるいは常用された。しかしギリシャでは先史時代の古い銘文に見られるのがほとんどで、ヘレニック時代には次第に使用されなくなっていった。</p>
<p id="p6">ラパ・ヌイの木版や他の陰刻の施された加工物にも、ロンゴロンゴと呼ばれる未解読の文字が牛耕式で書かれている。ロンゴロンゴでは、文章は一行ごとに180度回転させて書かれており、鏡文字にはなっていない。これは特にリバース・ブストロフェドン(reverse boustrophedon)と呼ばれる。</p>
</div>
<script type="text/javascript">
$( document ).ready(function() {
function makeRangePath( anchorPath, focusPath ){
var i,l ,count =0, path = [];
var anc = anchorPath.split('/'),
foc = focusPath.split('/');
for(i=0; l=anc.length , i<l; i++){
if( anc[i] === foc[i] ){
count++;
path.push( anc[i] );
}
else{
break;
}
}
anc.splice(0,count);
foc.splice(0,count);
return {
parent: path.join('/'),
start: '/' + anc.join('/'),
end: '/' + foc.join('/')
};
}
function objtoCFIpath(obj){
var o = obj,
p = o.parentNode,
txtNodeCount = 0,
c, i ,count ,str;
var list = [];
c = p.childNodes;
i = 0;
while( c[i] && c[i] != o ){
if( c[i].nodeType === 3 ){ txtNodeCount++; } // 3 = TEXT_NODE
i++;
}
// 奇数カウント
list.push( (txtNodeCount *2) +1 );
while (p != document) {
//console.log( 'parentNode:' , p.nodeName );
c = p.childNodes;
i = count = 0;
while( c[i] ){
if( c[i].nodeType === 1){ count++; } // 1 = ELEMENT_NODE
//console.log('cNode:',i, c[i].nodeName);
if( c[i] == o ){
//console.log('--match--:',count);
if( count === 0 ){
// テキストノードのみ
break;
}
else if( $(c[i]).attr('id')){
str = [ count*2, '[' , $(c[i]).attr('id') ,']' ].join('');
list.push( str );
}
else {
str = count *2;
list.push( str );
}
break;
}
i++;
}
o = p;
p = p.parentNode;
}
list.reverse();
return list.join('/');
}
document.addEventListener('mouseup', function(){
var range = window.getSelection(); // 選択範囲(selectionオブジェクト)の取得
var dom = range.getRangeAt(0).cloneContents(); // 1つ目の選択範囲のDocumentFragmentをコピー
var anchorPath, focusPath;
var path;
if( $(dom).text().length === 0 ){ return null; }
console.log($(dom).text());
anchorPath = objtoCFIpath( range.anchorNode ) +':'+ range.anchorOffset;
focusPath = objtoCFIpath( range.focusNode ) +':'+ range.focusOffset;
console.log( 'anchorNodePath: ', anchorPath );
console.log( 'focusNodePath : ', focusPath );
path = makeRangePath( anchorPath, focusPath );
console.log( 'Path Object :', path );
}, false);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment