URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : RETTANR_ROOOT_PATH) + 'original_pictures.json',\r
URL_PANELS_JSON: ( isLocal === true ? 'json\/' : RETTANR_ROOOT_PATH) + 'panels.json',\r
NS_PETTANR_COMIC: 'pettanr-comic',\r
- RESOURCE_PICTURE_PATH: ( isLocal === true ? pettanr.ROOT_PATH : RETTANR_ROOOT_PATH) + 'resource_pictures\/',\r
+ RESOURCE_PICTURE_PATH: ( isLocal === true ? pettanr.ROOT_PATH : RETTANR_ROOOT_PATH) + 'resource_pictures\/'\r
}\r
})();\r
\r
}\r
})();\r
\r
+var VisualEffect = ( function(){\r
+ \r
+ var ANIMATION_TICKET_ARRAY = [],\r
+ fpms = 50,\r
+ TIMER = null,\r
+ FILTER = 'filter',\r
+ OPACITY = 'opacity',\r
+ CORON = ':',\r
+ EMPTY = '',\r
+ SEMICORON = ';';\r
+ \r
+ function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames){\r
+ var _ticket;\r
+ for( var i=0, l=ANIMATION_TICKET_ARRAY.length; i<l; ++i){\r
+ _ticket = ANIMATION_TICKET_ARRAY[ i];\r
+ if( _ticket.elm === _elm) {\r
+ _ticket.destroy();\r
+ break;\r
+ }\r
+ }\r
+ // coputedStyle と _cssObject を比較して , 一致及び非数は削除しつつ コピー\r
+ //\r
+ var _currentParameters = [],\r
+ _offsetParameters = [],\r
+ _endParameters = [],\r
+ _targetAttributes = [];\r
+ \r
+ ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(\r
+ _elm,\r
+ _currentParameters, _offsetParameters, _endParameters, _targetAttributes,\r
+ typeof _onComplete === 'function' ? _onComplete : null,\r
+ typeof _onEnterFrame === 'function' ? _onEnterFrame : null,\r
+ _numFrames\r
+ ));\r
+ \r
+ if( TIMER === null){\r
+ TIMER = window.setInterval( onEnterFrame, fpms);\r
+ }\r
+ }\r
+ function onEnterFrame(){\r
+ var _ticket,\r
+ i = 0;\r
+ while( i<ANIMATION_TICKET_ARRAY.length){\r
+ _ticket = ANIMATION_TICKET_ARRAY[ i];\r
+ if( _ticket.onEnterFrame() === true){\r
+ _ticket.destroy();\r
+ ANIMATION_TICKET_ARRAY.splice( i, 1);\r
+ } else {\r
+ ++i;\r
+ }\r
+ }\r
+ if( ANIMATION_TICKET_ARRAY.length === 0){\r
+ window.clearInterval( TIMER);\r
+ TIMER = null;\r
+ }\r
+ }\r
+ function updateCss( _elm, _updateParameters, _targetAttributes, _numAttributes){\r
+ if( _numAttributes > 1){\r
+ var _cssTexts = _elm.style.cssText.split( ';'), _css,\r
+ _separate,\r
+ _cssObject = {}, _target, _value, _number, _type, _new,\r
+ j;\r
+ for(var i=0, l=_cssTexts.length; i<l; ++i){\r
+ _css = _cssTexts[ i];\r
+ _separate = _css.indexOf( ':');\r
+ if( _separate >= 3){\r
+ _target = _css.substr( 0, _separate +1);\r
+ _value = _css.substr( _separate +1);\r
+ /*\r
+ * ie filter
+ */\r
+ if( _target === FILTER){\r
+ for( j=0; j<_numAttributes; ++j){\r
+ if( _targetAttributes[ j] === OPACITY){\r
+ \r
+ \r
+ \r
+ break;\r
+ }\r
+ }\r
+ /*\r
+ * other
+ */\r
+ } else {\r
+ _number = '' + parseFloat( _value);\r
+ _type = _value.indexOf( _number);\r
+ _type = _type > 0 ? _value.substr( _type + _number.length) : '';\r
+ for( j=0; j<_numAttributes; ++j){\r
+ if( _targetAttributes[ j] === _target){\r
+ _cssTexts[ i] = [ _target, ':', _updateParameters[ j], _type].join( '');\r
+ break;\r
+ }\r
+ } \r
+ }\r
+ }\r
+ }\r
+ _elm.style.cssText = _cssTexts.join( ';');\r
+ return; \r
+ }\r
+ /*\r
+ * 一度に update する Attributes が少ない場合、cssText は使用しない.
+ */\r
+ \r
+ }\r
+ \r
+ var AnimationTaskClass = function( ELM, currentParameters, offsetParameters, endParameters, targetAttributes, onComplete, onEnterFrame, numFrames){\r
+ var l = targetAttributes.length;\r
+ return {\r
+ elm: ELM,\r
+ onEnterFrame: function(){\r
+ var _updateCss = {};\r
+ if( numFrames === 1){\r
+ for( var i=0; i<l; ++i){\r
+ _updateCss[ targetAttributes[ i]] = endParameters[ i];\r
+ ++i;\r
+ }\r
+ updateCss( ELM, currentParameters, targetAttributes, l);\r
+ onComplete !== null && onComplete();\r
+ } else {\r
+ for( var i=0; i<l; ++i){\r
+ _updateCss[ targetAttributes[ i]] = currentParameters[ i] = Math.floor( currentParameters[ i] + offsetParameters[ i]);\r
+ ++i;\r
+ }\r
+ updateCss( ELM, currentParameters, targetAttributes, l);\r
+ onEnterFrame !== null && onEnterFrame( _updateCss);\r
+ }\r
+ --numFrames;\r
+ return numFrames === 0;\r
+ },\r
+ destroy: function(){\r
+ ELM = onComplete = onEnterFrame = null;\r
+ }\r
+ }\r
+ }\r
+ \r
+ var VisualEffectClass = function( ELM){\r
+ var isHtmlElement;\r
+ \r
+ function resisterAnime( _cssObject, _onComplete, _onEnterFrame, _time){\r
+ var _numFrames = Math.floor( _time / fpms);\r
+ startAnimation( ELM, _cssObject, _onComplete, _onEnterFrame, _numFrames);\r
+ }\r
+ function startFadeIn(){\r
+ \r
+ }\r
+ function startFadeOut(){\r
+ \r
+ }\r
+ function update( _x, _y, _w, _h){\r
+ var _cssText = ELM.style.cssText;\r
+ \r
+ }\r
+ \r
+ this.anime = resisterAnime;\r
+ this.fadeIn = startFadeIn;\r
+ this.fadeOut = startFadeOut;\r
+ this.update = update;\r
+ }\r
+ \r
+ return {\r
+ createVisualEffect: function( _elm){\r
+ return new VisualEffectClass( _elm);\r
+ },\r
+ isInstanceOfVisualEffect: function( _instance){\r
+ return _instance instanceof VisualEffectClass;\r
+ }\r
+ }\r
+})();\r
\r
\r
\r
elmItemOrigin.className = 'sidenavi-item';\r
elmItemOrigin.href = '#';\r
elmPages.className = 'page-contents';\r
- elmPageOrigin.className = 'page-content';\r
+ elmPageOrigin.className = 'page-content main';\r
elmPageOrigin.appendChild( elmTitleOrigin);\r
\r
// helpTitle && instance.title( helpTitle);\r
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",sans-serif;\r
}\r
\r
- dt {\r
- margin-left: 1em;\r
- font-weight: bold;\r
- }\r
- dd {\r
- margin-left: 2em;\r
- }\r
-\r
/* ClearFix\r
--------------------------------------------------------------------------------------*/\r
/* for modern brouser */\r
margin-left: 2em;\r
}\r
\r
- p, ul, ol, dl, blockquote, pre, table {\r
- margin: 0 0 1em 2em;\r
- }\r
- .block-element-item {\r
- display: block;\r
- margin: 0 0 1em 2em;\r
- }\r
- \r
- pre,\r
- blockquote {\r
- border: 1px solid;\r
- overflow: auto;\r
- padding: 4px 0.5em;\r
- margin: 0.8em 0 1em 2em;\r
- line-height: 1.4em;\r
- white-space: pre-wrap;\r
- word-wrap: break-word;\r
- font-size: 12px;\r
- }\r
- pre {\r
- border-color: #ccc;\r
- background-color: #f0f0f0;\r
- }\r
- blockquote {\r
- border-color: #e9f;\r
- background-color: #ecf;\r
- }\r
- \r
blockquote, cite {}\r
em {}\r
\r
\r
/* main\r
--------------------------------------------------------------------------------------*/\r
- #main,\r
- .main {\r
+ #main {\r
padding: 20px 10px;\r
}\r
#main p,\r
+ #main dl,\r
#main pre,\r
+ #main table,\r
#main blockquote,\r
.main p,\r
+ .main dl,\r
.main pre,\r
+ .main table,\r
.main blockquote {\r
- line-height: 1.6em;\r
+ line-height: 1.6em;\r
+ margin: 0 0 1em 2em;\r
+ }\r
+ #main ul,\r
+ #main ol, \r
+ .main ul,\r
+ .main ol {\r
+ line-height: 1.6em;\r
+ margin: 0 0 1em 2.8em;\r
+ }\r
+ \r
+ #main .block-element-item,\r
+ .main .block-element-item {\r
+ display: block;\r
+ margin: 0 0 1em 2em;\r
+ }\r
+\r
+ pre,\r
+ blockquote {\r
+ border: 1px solid;\r
+ overflow: auto;\r
+ padding: 4px 0.5em;\r
+ margin: 0.8em 0 1em 2em;\r
+ line-height: 1.4em;\r
+ white-space: pre-wrap;\r
+ word-wrap: break-word;\r
+ font-size: 12px;\r
+ }\r
+ pre {\r
+ border-color: #ccc;\r
+ background-color: #f0f0f0;\r
+ }\r
+ blockquote {\r
+ border-color: #e9f;\r
+ background-color: #ecf;\r
}\r
\r
/* footer-content\r
.dl-table-small dt {\r
clear: left;\r
float: left;\r
- height: 1.8em;\r
- line-height: 1.8em;\r
+ height: 1.6em;\r
+ line-height: 1.6em;\r
overflow: hidden;\r
margin: 0;\r
padding: 0 0 0 0.2em;\r
.dl-table dd,\r
.dl-table-small dd {\r
margin: 0 0 0.5em;\r
- line-height: 1.8em;\r
+ line-height: 1.6em;\r
border-bottom: 1px solid #ccc;\r
}\r
.dl-table dt {\r
width: 140px;\r
}\r
.dl-table-small dd {\r
- padding: 0 0 0 150px;\r
+ padding: 0 0 0 160px;\r
}\r
\r
/* Reversible Image\r
--------------------------------------------------------------------------------------*/ \r
img.img-flip-v { /* 上下反転 */\r
transform: scale( 1, -1);\r
- -o-transform: rotate(180deg) scale(-1);\r
+ -o-transform: scale( 1, -1);\r
-ms-transform: scale( 1, -1);\r
-moz-transform: scale( 1, -1);\r
-webkit-transform: scale( 1, -1);\r
- /*filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
- -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);*/\r
+ }\r
+ .pettanr-ActiveX-enabled img.img-flip-v {\r
filter: flipv();\r
- -ms-filter: flipv();\r
+ -ms-filter: flipv(); \r
}\r
v\:image.img-flip-v {\r
flip: y; /* vml */\r
\r
img.img-flip-h { /* 左右反転 */\r
transform: scale( -1, 1);\r
- -o-transform: scale(-1);\r
+ -o-transform: scale( -1, 1);\r
-ms-transform: scale( -1, 1);\r
-moz-transform: scale( -1, 1);\r
-webkit-transform: scale( -1, 1);\r
- /*filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
- -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);*/\r
+ }\r
+ .pettanr-ActiveX-enabled img.img-flip-h {\r
filter: fliph();\r
-ms-filter: fliph();\r
}\r
-ms-transform: scale( -1, -1);\r
-moz-transform: scale( -1, -1);\r
-webkit-transform: scale( -1, -1);\r
- /*filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
- -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);*/\r
+ }\r
+ .pettanr-ActiveX-enabled img.img-flip-vh {\r
filter: flipv() fliph();\r
-ms-filter: flipv() fliph();\r
}\r
background-color: #000;\r
opacity: 0.5;\r
-moz-opacity: 0.5;\r
+ -khtml-opacity: 0.5;\r
+ }\r
+ .pettanr-ActiveX-Enabled #overlay-shadow {\r
filter: alpha(opacity=50);\r
-ms-filter: alpha(opacity=50); \r
}\r
background-color: #fff;\r
opacity: 0.7;\r
-moz-opacity: 0.7;\r
+ -khtml-opacity: 0.7;\r
+ }\r
+ .pettanr-ActiveX-disabled #whiteGlass-container div {\r
filter: alpha(opacity=70);\r
- -ms-filter: alpha(opacity=70);\r
+ -ms-filter: alpha(opacity=70); \r
}\r
.pettanr-ActiveX-disabled #whiteGlass-container div {\r
background: transparent url( white-70pct.png) repeat 0 0;\r
top: 0;\r
left: 0;\r
width: 100%;\r
- height: 100%; /* 100% don't work for ie6, so ie6 need to set height-'px' by js */\r
+ height: 100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */\r
}\r
.pettanr-ActiveX-enabled #mouse-operation-catcher {\r
background-color: #fff;\r
- filter: alpha(opacity=0);\r
- -ms-filter: alpha(opacity=0);\r
+ filter: alpha( opacity=0);\r
+ -ms-filter: alpha( opacity=0);\r
}\r
/*\r
- * ieでは、背景を設定しないと、mouse-operation-catcherが働かない。\r
- * activeX有効の場合は背景を着色してfilterで透明に。\r
- * activeX無効の場合は透明gifを使用\r
+ * ie では、背景を設定しないと、 mousemove が働かない。\r
+ * activeX 有効の場合は背景を着色して filter で透明に。\r
+ * activeX 無効の場合は透明 gif を使用\r
* background: url(4x4.gif) fixed repeat;\r
*/\r
.pettanr-ActiveX-disabled #mouse-operation-catcher {\r
- background: url(opacity0.gif) fixed repeat;\r
+ background: url( opacity0.gif) fixed repeat;\r
}\r
\r
\r
.page-content {\r
display: none;\r
}\r
- .page-content p,\r
- .page-content pre {\r
- line-height: 1.6em;\r
- }\r
\r
/* editable-text\r
--------------------------------------------------------------------------------------*/\r
<h4>ActiveX が切られている場合の影響</h4>\r
<p>ActiveX が切られている場合、 filter 指定による css3 相当のデザインが使えなくなるほかに、ActiveX オブジェクトとして提供される Flash が使えなくなる．これにより pettanR にとって重要な機能、画像の反転や ie6 以下への pngfix が難しくなる．</p>\r
<p>さらに、ie6 以下では ActiveX オブジェクトとして提供される XmlHttpRequest も使えなくなる．（ この場合サーバとの通信手段は、動的に生成したフォーム部品によるもの などに限られてくる ）</p>\r
- <p>Silverlight や VML がどうなるか？は不勉強．（おそらく VML は ActiveX と無関係、Silverlight も同様なら Silverlight の重要度が少し上がる）</p>\r
+ <p><del>Silverlight や VML がどうなるか？は不勉強．（おそらく VML は ActiveX と無関係、Silverlight も同様なら Silverlight の重要度が少し上がる）</del></p>\r
+ <p>ActiveX が切られている場合、Silverlight や VML も使えなくなり かなり難しい状況になる．サーバーの画像変換機能の助けを借りてなんとか表示している状態になってしまう．</p>\r
+ <p>VBscript に使える機能ないかな？？</p>\r
<h4>【一応】js が有効だからといって ActiveX も有効とは限らない</h4>\r
<p>ActiveX は js と同時に切られることが多いが、これは ie のデフォルトのセキュリティ設定のためで、ActiveX と js はそれぞれ独立して on / off ができる．</p>\r
<p>そのため js が有効だからといって ActiveX も有効とは限らない．</p> \r
<p>html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです．</p>\r
<p>html は js で動的に描画されるため、js の関連部分のテストも兼ねます．</p>\r
<p>js による 動的な html の書き出しは、ブログ等への外部サイト表示 script と ログイン後のユーザーのコミック・パネル閲覧に使われます．</p>\r
- <p>js による動的な書き出しは、吹き出し画像のリクエストを抑止でき、またブラウザの表示エリア外の画像へのアクセスを行わなくて済むので システムへの負荷を抑えることができます．</p>\r
+ \r
+ <h3>動的書き出しテスト</h3>\r
+ <p>以下のテキストエリアに パネルの json データを入力することで、動的書き出しのテストを行えます．</p>\r
<form name="htmlTest" class="block-element-item">\r
- <textarea name="jsonString" style="width:100%" rows="30" cols="100">\r
+ <textarea name="jsonString" style="width:100%" rows="20" cols="100">\r
{\r
"border": 1,\r
"comic_id": 5,\r
]\r
}\r
</textarea>\r
- <input type="button" value="print" name="bindButton">\r
+ <input type="button" value="print" name="bindButton" class="button">\r
</form>\r
+ <p id="invalidJsonAlert" style="color:red;display:none;font-weight:bold;">json is invalid !</p>\r
<div id="outputHere"></div>\r
+ \r
+ <h3>source</h3>\r
+ <p>pettanr.bind は pettanR コミック用の html エレメントを制作するときに使用する．外部サイト張り出し用 script や ユーザーコンソールの コミックビューワーから使われる．</p>\r
+ <p>pettanr.bind.createBindWorker で BindWorker インスタンスを作って使用する．bind の意味は 製本 ．jQuery.bind とは関係ないので注意．</p>\r
+ <pre><code>\r
+var jsonArea = document.htmlTest.jsonString,\r
+ button = document.htmlTest.bindButton,\r
+ bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
+ elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
+ json = null;\r
+button.onclick = function(){\r
+ try {\r
+ eval( 'json = ' + jsonArea.value);\r
+ elmAlertStyle.display = 'none';\r
+ } catch(e){\r
+ elmAlertStyle.display = 'block';\r
+ }\r
+ json !== null && bindWorker.json( json);\r
+ json = null;\r
+}\r
+ </code></pre>\r
+ <h3>js による動的な書き出しの利点</h3>\r
+ <p>js による動的な書き出しには以下にあげる利点がある．最後のもの以外はサーバへの画像リクエストを抑えるものになります．</p>\r
+ <ul>\r
+ <li>吹き出しをベジェ曲線で書き出すことで美しい描画ができ、吹き出し画像へのリクエストを抑止できる</li>\r
+ <li>反転画像をブラウザ側で用意することで、flipH, flipV, flipVH といった反転画像へのリクエストを抑止できる．</li>\r
+ <li>ブラウザの表示エリアに入らない画像について、表示エリアに入るまでリクエストを行わないようにできる</li>\r
+ <li>コマのズーム機能が利用できる．ただしリサイズを禁止された画像を含むコマに対してはできない．</li>\r
+ </ul>\r
</div>\r
<!-- InstanceEndEditable -->\r
</div>\r
var jsonArea = document.htmlTest.jsonString,\r
button = document.htmlTest.bindButton,\r
bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
- json;\r
+ elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
+ json = null;\r
button.onclick = function(){\r
try {\r
eval( 'json = ' + jsonArea.value);\r
- bindWorker.json( json); \r
+ elmAlertStyle.display = 'none';\r
} catch(e){\r
+ elmAlertStyle.display = 'block';\r
}\r
+ json !== null && bindWorker.json( json);\r
+ json = null;\r
}\r
</script>\r
<!-- InstanceEndEditable -->\r
<ul>\r
<li><a href="activex.html">activex test</a></li>\r
</ul>\r
+ <h2>XSLT text</h2>\r
+ <ul>\r
+ <li><a href="pettanr.xml">xml & xslt -> html</a> pettanR コミックを xml で定義．xslt で html 化する．</li>\r
+ </ul>\r
</div>\r
<!-- InstanceEndEditable -->\r
</div>\r
--- /dev/null
+@charset "utf-8";\r
+\r
+/* \r
+--------------------------------------------------------------------------------------*/\r
+ \r
+ #panelContainer {\r
+ margin: 0 auto;\r
+ _text-align: left; /* ie5.5+6 */\r
+ \r
+ } \r
+\r
+/* Panel\r
+--------------------------------------------------------------------------------------*/\r
+ .panel-wrapper {\r
+ margin: 10px 0;\r
+ position: relative;\r
+ }\r
+ .panel {\r
+ border: 2px solid #333;\r
+ overflow: hidden;\r
+ position: relative;\r
+ top: 0;\r
+ left: 0;\r
+ }\r
+ .panel img,\r
+ .panel .speach {\r
+ position: absolute;\r
+ margin: 0;\r
+ }\r
+ \r
+/* Panel > speach\r
+--------------------------------------------------------------------------------------*/\r
+ .speach {\r
+ text-align: center;\r
+ display: table;\r
+ }\r
+ .speach span {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ padding: 16.66%;\r
+ }\r
+ \r
+ /* fix for ie */ \r
+ .speach table,\r
+ .speach tbody,\r
+ .speach tr,\r
+ .speach td {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0;\r
+ text-align: center;\r
+ vertical-align: middle;\r
+ }\r
+ .speach td {\r
+ padding: 16.66%;\r
+ }\r
+ \r
+\r
+/* Panel > tooltip contain Image's Title & Author\r
+--------------------------------------------------------------------------------------*/\r
+ .tooltip-container {\r
+ font-size: 12px;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ *width: 200%; /* ie7 */\r
+ _width: 200%; /* ie5.5+6 */\r
+ }\r
+ .tooltip {\r
+ position: absolute;\r
+ color: #999;\r
+ background-color: rgba( 255, 255, 255, 0.8);\r
+ border: 1px solid #999;\r
+ padding: 1em 2em;\r
+ border-radius: 10px;\r
+ -moz-border-radius: 10px;\r
+ -opera-border-radius: 10px;\r
+ -webkit-border-radius: 10px;\r
+ box-shadow: 2px 2px 1px #999;\r
+ -moz-box-shadow: 2px 2px 1px #999;\r
+ -opera-box-shadow: 2px 2px 1px #999;\r
+ -webkit-box-shadow: 2px 2px 1px #999;\r
+ }\r
+ .image-shadow {\r
+ position: absolute;\r
+ margin: 0;\r
+ }\r
+ \r
+ /* fix for ie */\r
+ .tooltip {\r
+ *background-color: #fff;\r
+ _background-color: #fff; \r
+ }\r
+ html>/**/body .tooltip { \r
+ background-color/*\**/: #fff\9; /* ie8(ie8 mode) */\r
+ }\r
+ \r
+ /* hover */\r
+ .tooltip-container a:hover, \r
+ .tooltip-container:hover {\r
+ z-index: 9999;\r
+ _zoom: 1; /* ie5.5+6 */\r
+ }\r
+ .tooltip-container a:hover .image-shadow,\r
+ .tooltip-container:hover .image-shadow {\r
+ border: 2px solid #666;\r
+ }\r
+ .tooltip-container a:hover .tooltip, \r
+ .tooltip-container:hover .tooltip {\r
+ background-color: #ffc;\r
+ border-color: #333;\r
+ color: #333;\r
+ box-shadow: 2px 2px 3px #666;\r
+ -moz-box-shadow: 2px 2px 3px #666;\r
+ -opera-box-shadow: 2px 2px 3px #666;\r
+ -webkit-box-shadow: 2px 2px 3px #666;\r
+ }\r
+\r
+ /* fix for ie */\r
+ .tooltip-container a {\r
+ text-decoration: none; /* ie6 */\r
+ color: #333; /* ie6 */ \r
+ } \r
+ \r
+ .tooltip-container table,\r
+ .tooltip-container tbody,\r
+ .tooltip-container tr,\r
+ .tooltip-container td {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0;\r
+ position: relative; /* ie5.5でなぜかtooltipがhoverで消えるのを防ぐ */\r
+ } \r
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" ?>\r
+<?xml-stylesheet type="text/xsl" href="pettanr.xsl"?>\r
+\r
+<!-- <series> -->\r
+<comic title="testコミック"\r
+ episode="第一話 testの巻"\r
+ author="pettan復活チーム"\r
+ w="400"\r
+ published="2011/08/08 00:00:00"\r
+ updated="2011/08/09 12:12:12"\r
+>\r
+\r
+ <panel h="200" bgcolor="#ccc">\r
+ <picture url="../resource_pictures/3.png" x="20" y="40" w="267" h="292" name="ペン次郎・フム" author="yas" site="http://www.pen-chan.jp/"/>\r
+ <balloon type="0" tail="5" w="150" h="140" x="240" y="-10" size="16" bold="1">こんちにわ</balloon>\r
+ </panel>\r
+\r
+ <panel h="300" bgcolor="#fcc">\r
+ <picture url="../resource_pictures/2277.gif" x="300" y="40" w="200" h="153" name="うさたろう：睡眠中" author="yuji" site="yuji.com"/>\r
+ <picture url="../resource_pictures/6.gif" x="200" y="150" w="138" h="183" name="ペン次郎・ラジャ" author="yas" site="http://www.pen-chan.jp/"/>\r
+ <picture url="../resource_pictures/6.gif" x="-20" y="30" w="138" h="183" name="ペン次郎・ラジャ～～～～～～～～～～～～～～～" author="yas" site="http://www.pen-chan.jp/"/>\r
+ <balloon type="1" tail="1" w="200" h="100" x="20" y="20">こんばんわ</balloon>\r
+ <balloon type="0" tail="2" w="150" h="100" x="80" y="180" size="20" bold="1">フギャー</balloon>\r
+ </panel>\r
+ \r
+ <panel h="100" bgcolor="#fcc">\r
+ <balloon type="1" tail="1" w="200" h="100" x="20" y="20">こんばんわぁっぁｌｌっぁぁぁぁぁｌ</balloon>\r
+ <balloon type="0" tail="2" w="150" h="100" x="80" y="180" size="20" bold="1">フギャーぁぁぁぁぁぁぁっぁぁぁぁ</balloon>\r
+ </panel>\r
+</comic>\r
+\r
+<!-- </series> -->
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>\r
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" \r
+ xmlns="http://www.w3.org/1999/xhtml"> \r
+ <xsl:output \r
+ omit-xml-declaration="no" \r
+ encoding="utf-8" \r
+ method="html" \r
+ version="1.0" \r
+ doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" \r
+ doctype-system="http://www.w3.org/TR/html4/loose.dtd" \r
+ indent="yes" /> \r
+ <xsl:template match="/">\r
+ <xsl:apply-templates/>\r
+ </xsl:template>\r
+\r
+<xsl:template match="comic">\r
+ <html xmlns:v="urn:schemas-microsoft-com:vml">\r
+ <head>\r
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />\r
+ <meta http-equiv="Content-Style-Type" content="text/css" />\r
+ <meta http-equiv="imagetoolbar" content="no" />\r
+ <meta name="description">\r
+ <xsl:attribute name="content">\r
+ <xsl:value-of select="@description" />\r
+ </xsl:attribute>\r
+ </meta>\r
+ <title>\r
+ <xsl:if test="@subtitle">\r
+ <xsl:value-of select="concat(@episode,' | ')"/>\r
+ </xsl:if>\r
+ <xsl:value-of select="@title" />\r
+ <xsl:if test="@author">\r
+ <xsl:value-of select="concat(' | ',@author)"/>\r
+ </xsl:if>\r
+ </title>\r
+ <link rel='index' title='index | pettanR' href='http://pettanr.sourceforge.jp/index.html' />\r
+ <link rel='start' title='pettanR' href='http://pettanr.sourceforge.jp/' />\r
+ <link rel="stylesheet" type="text/css" href="../stylesheets/common.css" />\r
+ <link rel="stylesheet" type="text/css" href="pettanr.css" />\r
+ </head>\r
+ <body>\r
+ <div id="general-content">\r
+ <div id="outer-wrapper">\r
+ \r
+ <div id="header">\r
+ <div class="base-content-width" style="position:relative;">\r
+ <h1><a href="http://pettanr.sourceforge.jp/">pettanR</a></h1>\r
+ <div id="global-navi">\r
+ <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="inner-wrapper" class="base-content-width">\r
+ <div id="main">\r
+ <h2><xsl:value-of select="@title" /></h2>\r
+ <h3><xsl:value-of select="@episode" /></h3>\r
+ <p class='author'>author:<xsl:value-of select="@author" /></p>\r
+ <div id="panelContainer">\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat('width:',@w,'px;')"/>\r
+ </xsl:attribute>\r
+ \r
+ <xsl:apply-templates/>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
+\r
+ <div id="footer">\r
+ <div id="footer-item-container" class="base-content-width clearfix">\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ぺったんR にようこそ</h2>\r
+ <ul>\r
+ <li>サンプル</li>\r
+ <li>ぺったんRの特徴</li>\r
+ <li>沿革</li>\r
+ </ul>\r
+ <h2>Test</h2>\r
+ <ul>\r
+ <li><a href="../test/index.html">Test Index</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ドキュメント</h2>\r
+ <ul>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
+ <li>絵師向けドキュメント</li> \r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>プロトタイプ</h2>\r
+ <ul>\r
+ <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
+ <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
+ </ul>\r
+ <h2>Ajax contents</h2>\r
+ <ul>\r
+ <li><a href="jp.xml">help | jp</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper" style="width:170px;">\r
+ <div class="footer-item" style="padding-right:0;">\r
+ <h2>ぺったんRチーム</h2>\r
+ <ul>\r
+ <li>わたしたちについて</li>\r
+ <li>ミッション</li>\r
+ <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
+ <li>個人情報保護方針</li>\r
+ <li>作品の取り扱い</li>\r
+ <li>お問い合わせ</li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div id="copyright">Copyright (c) <xsl:value-of select="/comic/@author" />, comic publishing system 'pettanR' is powered by pettanR team.</div>\r
+ </div><!-- #EndLibraryItem --></div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+ </body>\r
+ </html>\r
+</xsl:template>\r
+\r
+ <xsl:template match="panel">\r
+ <div class="panel-wrapper">\r
+ <xsl:for-each select=".">\r
+ <div class="panel">\r
+ <xsl:variable name="height" select="concat('height:',@h,'px;')" />\r
+ <xsl:variable name="bgcolor" select="concat('background-color:',@bgcolor,';')" />\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat($height,$bgcolor)"/>\r
+ </xsl:attribute>\r
+ <xsl:apply-templates/>\r
+ </div>\r
+ </xsl:for-each>\r
+ <xsl:for-each select="./picture">\r
+ <xsl:if test="@name">\r
+ \r
+ <div class="tooltip-container">\r
+ <xsl:comment><![CDATA[[if lte IE 6]><a href="#"><table><tr><td><![endif]]]></xsl:comment>\r
+ <img src="4x4.gif" class="image-shadow"><!-- 当初divで書いていたら、ie5.5～8で正しくレンダリングできない。なぜかDomが狂う、、、xsl:attribute name="style"が頭にきたせい? -->\r
+ <xsl:attribute name="width">\r
+ <xsl:value-of select="@w"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="height">\r
+ <xsl:value-of select="@h"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat('left:',@x,'px;','top:',@y,'px;')"/>\r
+ </xsl:attribute>\r
+ </img>\r
+ <dl class="tooltip">\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat('margin-left:',position(),'9px;left:',/comic/@w,'px;','top:',@y,'px;')"/><!-- 要素が完全に重なることを防ぐためにposition()で要素のindexを取ってmargin-leftしている -->\r
+ </xsl:attribute>\r
+ <dt>作品名</dt>\r
+ <dd><xsl:value-of select="@name" /></dd>\r
+ <dt>作者</dt>\r
+ <dd><xsl:value-of select="@author" /></dd>\r
+ <dt>サイト</dt>\r
+ <dd><xsl:value-of select="@site" /></dd>\r
+ </dl>\r
+ <xsl:comment><![CDATA[[if lte IE 6]></td></tr></table></a><![endif]]]></xsl:comment>\r
+ </div>\r
+ \r
+ </xsl:if>\r
+ </xsl:for-each>\r
+ </div>\r
+ </xsl:template>\r
+\r
+ <xsl:template match="picture">\r
+ <xsl:for-each select=".">\r
+ <img>\r
+ <xsl:attribute name="src">\r
+ <xsl:value-of select="@url"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="width">\r
+ <xsl:value-of select="@w"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="height">\r
+ <xsl:value-of select="@h"/>\r
+ </xsl:attribute>\r
+ <xsl:variable name="left" select="concat('left:',@x,'px;')" /> \r
+ <xsl:variable name="top" select="concat('top:',@y,'px;')" /> \r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat($left,$top)"/>\r
+ </xsl:attribute>\r
+ </img>\r
+ </xsl:for-each> \r
+ </xsl:template>\r
+\r
+ <xsl:template match="balloon">\r
+ <xsl:for-each select=".">\r
+ <img>\r
+ <xsl:variable name="type">\r
+ <xsl:if test="contains(@type,'0')">../system_pictures/_w</xsl:if>\r
+ <xsl:if test="contains(@type,'1')">../system_pictures/think</xsl:if>\r
+ </xsl:variable>\r
+ <xsl:attribute name="src">\r
+ <xsl:value-of select="concat($type,@tail,'.gif')"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="width">\r
+ <xsl:value-of select="@w"/>\r
+ </xsl:attribute>\r
+ <xsl:attribute name="height">\r
+ <xsl:value-of select="@h"/>\r
+ </xsl:attribute>\r
+ <xsl:variable name="left" select="concat('left:',@x,'px;')" /> \r
+ <xsl:variable name="top" select="concat('top:',@y,'px;')" />\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat($top,$left)"/>\r
+ </xsl:attribute>\r
+ </img>\r
+ \r
+ <div class="speach">\r
+ <xsl:variable name="width" select="concat('width:',@w,'px;')" /> \r
+ <xsl:variable name="height" select="concat('height:',@h,'px;')" />\r
+ <xsl:variable name="left2" select="concat('left:',@x,'px;')" /> \r
+ <xsl:variable name="top2" select="concat('top:',@y,'px;')" /> \r
+ <xsl:variable name="fontsize">\r
+ <xsl:if test="@size">\r
+ <xsl:value-of select="concat('font-size:',@size,'px;')"/>\r
+ </xsl:if>\r
+ </xsl:variable>\r
+ <xsl:variable name="fontbold">\r
+ <xsl:if test="@bold">font-weight:bold;</xsl:if>\r
+ </xsl:variable>\r
+ <xsl:attribute name="style">\r
+ <xsl:value-of select="concat($width,$height,$top2,$left2,$fontsize,$fontbold)"/>\r
+ </xsl:attribute>\r
+ <xsl:comment><![CDATA[[if lte IE 7]><table><tr><td><![endif]]]></xsl:comment>\r
+ <span>\r
+ <xsl:apply-templates/>\r
+ </span>\r
+ <xsl:comment><![CDATA[[if lte IE 7]></td></tr></table><![endif]]]></xsl:comment>\r
+ </div>\r
+ </xsl:for-each> \r
+ </xsl:template>\r
+\r
+</xsl:stylesheet>
\ No newline at end of file
<div id="inner-wrapper" class="base-content-width">\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
+ <h2>css3 transform による 画像の水平・垂直反転のテストページ</h2>\r
+ <p>このページは css3 transform による画像反転のためのテストページです．</p>\r
+ <p>ブラウザによる画像の反転方法は、Web標準を使うもの、非Web標準な独自実装やプラグインを使うものなどいくつかあります．</p>\r
+ <p>このなかで transform による画像反転が（おそらく）もっとも平易なもので、 ぺったんR での画像反転表示の本命となります．</p>\r
+ \r
+ <h3>filter 指定に関する注意</h3>\r
+ <p>ie9 以下で ActiveX が有効の場合に使用できる filter 指定による 画像反転も併記されています．filter 指定は ie の独自実装のため使用の際には注意が必要です．</p>\r
+ \r
+ <h3>Opera に関する注意</h3>\r
+ <p>Opera の transform のサポート開始は 10.5 以降とされますが、scale( -1, -1) については Opera 11.5 以降となるみたいです．その間は rotate(180deg) によって flip-vh ( 水平垂直方向に反転 ) のみ transform で行えるようです．</p>\r
<h2>Original Image</h2>\r
<div class="clearfix">\r
<img src="1.gif" class="float-left" width="200" height="200" alt="" title="">\r
<p>オリジナルの画像です．</p>\r
- <p>flip が Opera11.5 以上でないと動いていない、、、</p>\r
</div>\r
+ \r
<h2>flip-h 水平方向に反転</h2>\r
<div class="clearfix">\r
<img src="1.gif" class="img-flip-h float-left" width="200" height="200" alt="" title="">\r
<pre><code>\r
.img-flip-h {\r
transform: scale( -1, 1);\r
- -o-transform: scale(-1);\r
+ -o-transform: scale( -1, 1);\r
-ms-transform: scale( -1, 1);\r
-moz-transform: scale( -1, 1);\r
-webkit-transform: scale( -1, 1);\r
-ms-filter: fliph();\r
}\r
</code></pre>\r
- \r
+ <p>ie では このほかに以下のような書き方もある．</p>\r
+ <pre><code>\r
+ filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
+ -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);\r
+ </code></pre>\r
+ \r
<h2>flip-v 垂直方向に反転</h2>\r
<div class="clearfix">\r
<img src="1.gif" class="img-flip-v float-left" width="200" height="200" alt="" title="">\r
-ms-filter: flipv();\r
}\r
</code></pre>\r
+ <p>ie では このほかに以下のような書き方もある．</p>\r
+ <pre><code>\r
+ filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
+ -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);\r
+ </code></pre>\r
\r
<h2>flip-vh 水平垂直方向に反転 または 180度回転</h2>\r
<div class="clearfix">\r
filter: flipv() fliph();\r
-ms-filter: flipv() fliph();\r
}\r
- </code></pre> \r
+ </code></pre>\r
+ <p>ie では このほかに以下のような書き方もある．</p>\r
+ <pre><code>\r
+ filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
+ -ms-filter: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);\r
+ </code></pre> \r
</div>\r
<!-- InstanceEndEditable -->\r
</div>\r
+/**\r
+ * sourceforge wiki.xml to multi page html\r
+ * version 1.1.0\r
+ */\r
+\r
#wiki-container {\r
margin: 1em 0 3em;\r
}\r
+\r
+/* navi\r
+--------------------------------------------------------------------------------------*/\r
#page-navi-container {\r
width: 180px;\r
float: left;\r
}\r
+ #page-navi-container li,\r
+ #page-navi-container a {\r
+ display: block;\r
+ }\r
+ \r
#page-total {\r
height: 12px;\r
font-size: 12px;\r
height: 24px;\r
border-bottom: 1px solid #ccc;\r
}\r
+ li .page-navi,\r
+ li .page-navi-current {\r
+ border-bottom: 0;\r
+ border-top: 1px solid #ccc;\r
+ }\r
+ \r
+ .expander-open,\r
+ .expander-close {\r
+ border-bottom: 1px solid #ccc;\r
+ }\r
+ .expander-close ul {\r
+ display: none;\r
+ }\r
+ #page-navi-container dl {\r
+ cursor: pointer;\r
+ }\r
+ #page-navi-container dt {\r
+ width: 12px;\r
+ float: left;\r
+ }\r
+ #page-navi-container .group-count {\r
+ width: 16px;\r
+ float: right;\r
+ text-align: right;\r
+ color: #999 !important;\r
+ padding: 6px 4px 4px 0 !important;\r
+ }\r
+ #page-navi-container .group-title {\r
+ width: 160px;\r
+ }\r
+ #page-navi-container li ul {\r
+ clear: both;\r
+ }\r
+ #page-navi-container .group-count,\r
+ #page-navi-container dl a,\r
+ #page-navi-container dl a:link,\r
+ #page-navi-container dt,\r
.page-navi a,\r
.page-navi a:link,\r
.page-navi-current a,\r
.page-navi-current a:link {\r
- display: block;\r
- font-size: 14px;\r
- line-height: 14px;\r
+ font-size: 12px;\r
+ line-height: 12px;\r
padding: 6px 0 4px 0.5em;\r
color: #333;\r
text-decoration: none;\r
overflow: hidden;\r
}\r
+ #page-navi-container dl {\r
+ background-color: #eee;\r
+ }\r
+ #page-navi-container li ul a {\r
+ padding-left: 2em;\r
+ } \r
+ #page-navi-container dl a:hover,\r
.page-navi a:hover {\r
background-color: #ccc;\r
} \r
background-color: #444;\r
}\r
\r
+/* page\r
+--------------------------------------------------------------------------------------*/\r
#page-body-container {\r
width: 580px;\r
float: right;\r
text-align: right;\r
}\r
\r
-\r
+/* Typography\r
+--------------------------------------------------------------------------------------*/\r
#wiki-container h1 {\r
text-align: left;\r
margin: 1em 0 2em;\r
/**
- * @author Administrator
+ * sourceforge wiki.xml to multi page html
+ * version 1.1.0
*/
+
( function(){
var CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame,base,bgsound,frameset,listing'.split( ','),
root = document.getElementById('wiki-container'),
navi = document.getElementById('page-navi-container'),
ELM_BODY_CONTAINER = document.getElementById('page-body-container'),
titleArray = [],
+ anchorArray = [],
elmBuilder = document.createElement( 'div'),
- wikiPageClass = function( id, title, elmNavi, elmAnchor, elmWrapper, elmBody){
+ WikiPageClass = function( id, title, elmNavi, elmAnchor, elmWrapper, elmBody){
var visible = false;
+
titleArray.push( title);
+ anchorArray.push( elmAnchor);
elmAnchor.onclick = jumpPage;
+ setTimeout( buildInnerLink, 0);
+
+ function buildInnerLink(){
+ var _nodes = elmBody.getElementsByTagName( 'a'),
+ i, l = _nodes.length,
+ _array = [],
+ _jump, _index;
+ for( i=0; i<l; ++i){
+ _array.push( _nodes[ i]);
+ }
+ while( _array.length > 0){
+ _jump = _array.shift();
+ _index = getPageIndexByTitle( _jump.childNodes[0].nodeValue);
+ if( _index !== -1){
+ _jump.href = '#page' +( _index +1);
+ _jump.onclick = jumpPage;
+ _jump.className += ' internalLink';
+ } else {
+ _jump.target = '_blank';
+ _jump.className += ' externalLink';
+ }
+ }
+ }
+
return {
fixCommentToHtml: function(){
elmBuilder.innerHTML = elmBody.childNodes[0].nodeValue.replace( /\[\[BR\]\]/g, '');
cleanElement( elmBuilder);
- moveElement( elmBody);
- delete this.fixCommentToHtml;
- },
- buildInnerLink: function(){
- var jumpArray = elmBody.getElementsByTagName( 'a'),
- l = jumpArray.length,
- _jump, _index;
- for(var i=0; i<l; ++i){
- _jump = jumpArray[i];
- _index = getPageIndexByTitle( _jump.childNodes[0].nodeValue);
- if( _index === -1) continue;
- _jump.href = '#page' +( _index +1);
- _jump.onclick = jumpPage;
- _jump.className += ' internalLink';
+
+ var _fragment = document.createDocumentFragment();
+ while( elmBody.firstChild){
+ elmBody.removeChild( elmBody.firstChild);
}
- delete this.buildInnerLink;
+ while( elmBuilder.firstChild){
+ _fragment.appendChild( elmBuilder.firstChild);
+ }
+ elmBody.appendChild( _fragment);
+ delete this.fixCommentToHtml;
},
show: function( _id){
if( id === _id && visible === false){
}
}
},
+ hierarchyTmp = {},
wikiPageArray = ( function(){
var ret = [],
_body = document.body,
- _children = navi.getElementsByTagName( 'div'),
+ _children = ( function(){
+ var _ret = [],
+ _nodes = navi.getElementsByTagName( 'li');
+ for( var i=0, l=_nodes.length; i<l; ++i){
+ _ret.push( _nodes[ i]);
+ }
+ return _ret;
+ })(),
l = _children.length,
_child, _a, _title, _id, _wrap,
- _page;
+ _page,
+ _group,
+ _regTitle2 = /(^[A-Z][a-z0-9]+[A-Z][a-z0-9]+)\w+/;
+ _regTitle1 = /(^[A-Z][a-z0-9]+)\w+/;
_body.appendChild( elmBuilder);
_child = _children[i];
if( _child.className.indexOf( 'page-navi') !== -1){
_a = _child.getElementsByTagName( 'a')[0];
- _title = _a ? _a.childNodes[0].nodeValue : null;
+ _title = _a ? _a.firstChild.nodeValue : null;
_id = _a ? _a.href.split('#')[1] : null;
_wrap = document.getElementById( _id);
- _page = new wikiPageClass( _id, _title, _child, _a, _wrap, _wrap.getElementsByTagName( 'div')[1]);
+ _page = new WikiPageClass( _id, _title, _child, _a, _wrap, _wrap.getElementsByTagName( 'div')[1]);
!document.all && _page.fixCommentToHtml();
ret.push( _page);
+
+ if( _title.match( _regTitle2)){
+ _group = _title.replace( _regTitle2, '$1');
+ if( !hierarchyTmp[ _group]){
+ hierarchyTmp[ _group] = [];
+ }
+ hierarchyTmp[ _group].push( _title);
+
+ if( hierarchyTmp[ _group].length === 1){
+ if( _title.match( _regTitle1)){
+ _group = _title.replace( _regTitle1, '$1');
+ if( !hierarchyTmp[ _group]){
+ hierarchyTmp[ _group] = [];
+ }
+ hierarchyTmp[ _group].push( _title);
+ }
+ }
+ }
}
}
_body.removeChild( elmBuilder);
NUM_PAGE = wikiPageArray.length,
FRONT_ID = 'FrontPage',
FRONT_INDEX = getPageIndexByTitle( FRONT_ID) +1,
- jumpArray = root.getElementsByTagName('a'),
+ CLASS_OPEN = 'expander-open',
+ CLASS_CLOSE = 'expander-close',
+ ANGLE_OPEN = String.fromCharCode( 9660),
+ ANGLE_CLOSE = String.fromCharCode( 9658),
hash = document.location.href.split('#')[1],
- _jump, i;
-
- //
- if( !document.all){
- cleanElement( root);
- }
- root = navi = elmBuilder = null;
-
- // build inner link
- for( i=0; i<NUM_PAGE; ++i){
- wikiPageArray[i].buildInnerLink();
- }
+ i, l, _array,
+ _fragment = document.createDocumentFragment(),
+ _elmOrign = ( function(){
+ var ret = document.createElement( 'li'),
+ ul = document.createElement( 'ul'),
+ li = document.createElement( 'li'),
+ dl = document.createElement( 'dl'),
+ dt = document.createElement( 'dt'),
+ dd = document.createElement( 'dd'),
+ c = document.createElement( 'dd'),
+ a = document.createElement( 'a');
+ ret.appendChild( dl);
+ ret.appendChild( ul);
+ ret.className = CLASS_CLOSE;
+ dl.appendChild( dt);
+ dl.appendChild( c);
+ c.className = 'group-count';
+ dl.appendChild( dd);
+ dd.className = 'group-title';
+ dd.appendChild( a);
+ a.href = '#';
+ dt.appendChild( document.createTextNode( ANGLE_CLOSE));
+ return ret;
+ })(),
+ _elmLi, _index;
+
+ document.all && cleanElement( ELM_BODY_CONTAINER);
- // externalLink
- for( i=0, l = jumpArray.length; i<l; ++i){
- _jump = jumpArray[i];
- if( _jump.href.indexOf('#page') === -1 ){
- _jump.target = '_blank';
- _jump.className += ' externalLink';
+ // build hierarchy to navi
+ for( var _group in hierarchyTmp){
+ _array = hierarchyTmp[ _group];
+ if( _array.length > 1){
+ _elmLi = _elmOrign.cloneNode( true);
+ _elmLi.getElementsByTagName( 'dl')[ 0].onclick = switchExpander;
+ l=_array.length;
+ _elmLi.getElementsByTagName( 'dd')[ 0].appendChild( document.createTextNode( l));
+ _elmLi.getElementsByTagName( 'a')[ 0].appendChild( document.createTextNode( _group));
+ for( i=0; i<l; ++i){
+ _index = getPageIndexByTitle( _array[ i]);
+ _index !== -1 && _elmLi.getElementsByTagName( 'ul')[ 0].appendChild( anchorArray[ _index].parentNode);
+ }
+ _fragment.appendChild( _elmLi);
}
}
- jumpArray = _jump = null;
+ navi.appendChild( _fragment);
+ _array = _fragment = _elmOrign = _elmLi = _group = hierarchyTmp = root = navi = elmBuilder = _jump = null;
// show current
setTimeout(
function(){
- jumpPage( hash && hash.match( /page\d/) ? hash : 'page' +FRONT_INDEX);
+ jumpPage( hash && hash.match( /page\d/) ? hash : 'page' + FRONT_INDEX);
hash = null;
- }
+ }, 0
);
- function moveElement( _targetElm){
- var _elms = _targetElm.childNodes;
- while( _elms.length > 0){
- _targetElm.removeChild( _elms[ 0]);
- }
-
- _elms = elmBuilder.childNodes;
- while( _elms.length > 0){
- _targetElm.appendChild( _elms[0]);
- }
- cleanElement( elmBuilder);
- }
function cleanElement( _targetElm){
var l = CLEAN_TARGET_ELEMENT.length,
- elms, elm, i;
+ elms, array, elm, i, j, m;
for( i=0; i<l; ++i){
elms = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);
- while( elms.length > 0){
- elm = elms[ 0];
+ array = [];
+ for( j=0, m = elms.length; j<m; ++j){
+ array.push( elms[ j]);
+ }
+ while( array.length > 0){
+ elm = array.shift();
elm.parentNode && elm.parentNode.removeChild( elm);
}
}
- if( !document.all) return;
- elms = _targetElm.getElementsByName( '*');
- l = elms.length;
- for(i=0; i<l; ++i){
- elm = elms[ i];
- elm.style.filter = elm.style.behavior = '';
+ elms = _targetElm.getElementsByTagName( '*');
+ array = [];
+ for( i=0, l = elms.length; i<l; ++i){
+ array.push( elms[ i]);
+ }
+ while( array.length > 0){
+ elm = array.shift();
+ if( elm.nodeType === 3){
+ elm.parentNode && elm.parentNode.removeChild( elm);
+ }
+ if( elm.style.filter || elm.style.filter !== ''){
+ elm.style.filter = '';
+ }
+ if( elm.style.behavior || elm.style.behavior !== ''){
+ elm.style.behavior = '';
+ }
}
}
function getPageIndexByTitle( _title){
}
return false;
}
+ function switchExpander(){
+ var _elmLi = this.parentNode
+ _open = _elmLi.className.indexOf( CLASS_CLOSE) !== -1;
+ _elmLi.className = _open ? CLASS_OPEN : CLASS_CLOSE;
+ this.getElementsByTagName( 'dt')[ 0].firstChild.data = _open ? ANGLE_OPEN : ANGLE_CLOSE;
+ return false;
+ }
})();
\r
<div id="inner-wrapper" class="base-content-width"> \r
<div id="wiki-container" class="clearfix">\r
- <div id="page-navi-container">\r
- <div id="page-total">\r
+ <ul id="page-navi-container">\r
+ <li id="page-total">\r
<xsl:value-of select="count(rss:item)"/> pages\r
- </div>\r
+ </li>\r
<xsl:for-each select="./rss:item">\r
<xsl:variable name="index" select="position()"/>\r
<xsl:variable name="top" select="25*$index"/>\r
- <div class="page-navi">\r
- <xsl:attribute name="style">\r
- <xsl:value-of select="concat('top:',$top,'px;')"/>\r
- </xsl:attribute>\r
+ <li class="page-navi">\r
<a>\r
<xsl:attribute name="href">\r
<xsl:value-of select="concat('#page',$index)"/>\r
</xsl:attribute> \r
<xsl:value-of select="rss:title"/>\r
</a>\r
- </div> \r
+ </li> \r
</xsl:for-each>\r
- </div>\r
+ </ul>\r
<div id="page-body-container">\r
<xsl:for-each select="./rss:item">\r
<div class="page-wrapper">\r
<span class="page-date"><xsl:value-of select="substring(dc:date, 1, 10)" /></span>\r
</div>\r
\r
- <div class="page-body clearfix">\r
+ <div class="page-body main clearfix">\r
<xsl:value-of select="content:encoded" disable-output-escaping="yes"/>\r
</div>\r
<a class="jump-to-top">\r
\r
\r
<div id="footer-content">\r
+ <!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
<div id="footer">\r
- <div id="footer-item-container" class="base-content-width clearfix">\r
- <div class="footer-item-wrapper">\r
- <div class="footer-item">\r
- <h2>ぺったんR にようこそ</h2>\r
- <ul>\r
- <li>サンプル</li>\r
- <li>ぺったんRの特徴</li>\r
- <li>沿革</li>\r
- </ul>\r
- </div>\r
- </div>\r
- <div class="footer-item-wrapper">\r
- <div class="footer-item">\r
- <h2>ドキュメント</h2>\r
- <ul>\r
- <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
- <li>絵師向けドキュメント</li> \r
- <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
- <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
- </ul>\r
- </div>\r
- </div>\r
- <div class="footer-item-wrapper">\r
- <div class="footer-item">\r
- <h2>プロトタイプ</h2>\r
- <ul>\r
- <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
- <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
- </ul>\r
- <h2>Ajax contents</h2>\r
- <ul>\r
- <li><a href="jp.xml">help | jp</a></li>\r
- </ul>\r
- </div>\r
- </div>\r
- <div class="footer-item-wrapper" style="width:170px;">\r
- <div class="footer-item" style="padding-right:0;">\r
- <h2>ぺったんRチーム</h2>\r
- <ul>\r
- <li>わたしたちについて</li>\r
- <li>ミッション</li>\r
- <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
- <li>個人情報保護方針</li>\r
- <li>作品の取り扱い</li>\r
- <li>お問い合わせ</li>\r
- </ul>\r
- </div>\r
+ <div id="footer-item-container" class="base-content-width clearfix">\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ぺったんR にようこそ</h2>\r
+ <ul>\r
+ <li>サンプル</li>\r
+ <li>ぺったんRの特徴</li>\r
+ <li>沿革</li>\r
+ </ul>\r
+ <h2>Test</h2>\r
+ <ul>\r
+ <li><a href="../test/index.html">Test Index</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ドキュメント</h2>\r
+ <ul>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
+ <li>絵師向けドキュメント</li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>プロトタイプ</h2>\r
+ <ul>\r
+ <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
+ <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
+ </ul>\r
+ <h2>Ajax contents</h2>\r
+ <ul>\r
+ <li><a href="../help/jp.xml">help | jp</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper" style="width:170px;">\r
+ <div class="footer-item" style="padding-right:0;">\r
+ <h2>ぺったんRチーム</h2>\r
+ <ul>\r
+ <li>わたしたちについて</li>\r
+ <li>ミッション</li>\r
+ <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
+ <li>個人情報保護方針</li>\r
+ <li>作品の取り扱い</li>\r
+ <li>お問い合わせ</li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
</div>\r
- </div>\r
- <div id="copyright">\r
- Copyright (c) 2011-2012 pettanR team, some rights reserved.\r
- </div>\r
+ <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
</div>\r
+ <!-- #EndLibraryItem -->\r
</div>\r
\r
- <script type="text/javascript" src="wiki.js"></script>\r
- <script type="text/javascript" src="../javascripts/common.js"></script>\r
- </body>\r
- </html>\r
+ <script type="text/javascript" src="wiki.js"></script>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+ </body>\r
+ </html>\r
</xsl:template>\r
\r
</xsl:stylesheet>
\ No newline at end of file
OSDN Git Service
