shunito/epubcfi_path.html

## epubcfi_path.html
<!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>
	<!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>