OSDN Git Service

pettanr.bind, etc
authoritozyun <itozyun@git.sourceforge.jp>
Sat, 25 Feb 2012 12:37:46 +0000 (21:37 +0900)
committeritozyun <itozyun@git.sourceforge.jp>
Sat, 25 Feb 2012 12:37:46 +0000 (21:37 +0900)
14 files changed:
0.4.x/diary/diary.xsl
0.4.x/help/help.xsl
0.4.x/index.html
0.4.x/javascripts/common.js
0.4.x/javascripts/system.js
0.4.x/javascripts/work.js
0.4.x/stylesheets/common.css
0.4.x/test/activex.html
0.4.x/test/comic-html-structure.html [new file with mode: 0644]
0.4.x/test/index.html
0.4.x/test/svg.html
0.4.x/test/transform.html
0.4.x/wiki/wiki.xsl
0.4.x/work.html

index 95e2221..ffc2abb 100644 (file)
@@ -14,7 +14,7 @@
     </xsl:template>\r
        \r
 <xsl:template match="diary">\r
-       <html>\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
                                </div>\r
                        </div>\r
                        \r
-                       <div id="footer-content">\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="../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="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">\r
-                                               Copyright (c) 2011-2012 pettanR team, some rights reserved.\r
-                                       </div>\r
-                               </div>\r
-                       </div>\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="../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="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) 2011-2012 pettanR team, some rights reserved.</div>\r
+        </div><!-- #EndLibraryItem --></div>\r
                        <script type="text/javascript" src="../javascripts/common.js"></script>\r
                </body>\r
        </html>\r
index 2bdbf1d..fb6f6ef 100644 (file)
@@ -14,7 +14,7 @@
     </xsl:template>\r
        \r
 <xsl:template match="pages">\r
-       <html>\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
index f31dcbe..e639684 100644 (file)
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
-<html><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
 <head>\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
 </head>\r
 \r
 <body>\r
-       <!--[if lt IE 9]>\r
-               <script type="text/javascript">\r
-                               (function(){\r
-                                       var     b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),\r
-                                               c = b.className || '',\r
-                                               x = document.createElement('div');\r
-                                       b.appendChild(x);\r
-                                       x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
-                                       b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', x.offsetHeight > 1 ? 'enabled' : 'disabled'].join( '');\r
-                                       b.removeChild(x);\r
-                               })();\r
-               </script>\r
-       <![endif]-->\r
-\r
     <div id="general-content">\r
         <div id="outer-wrapper">\r
             \r
index 3ee257c..663641d 100644 (file)
@@ -69,8 +69,32 @@ var pettanr = ( function(){
                        return jqBody;\r
                },\r
                URL_PARAMS: URL_PARAMS,\r
+               ROOT_PATH: ( function(){\r
+                       // script と html の ドメインが一致\r
+                       var _h1 = document.getElementsByTagName( 'h1')[ 0],\r
+                               _a = _h1.getElementsByTagName( 'a')[ 0],\r
+                               _root = _a.href.split( '\/'),\r
+                               _current = document.location.href.split( '\/'),\r
+                               ret = '.\/';\r
+                       for( var i=0, l=_current.length - _root.length; i<l; ++i){\r
+                               ret = '.' + ret;\r
+                       }\r
+                       return ret;\r
+                       // script と html の ドメインが不一致\r
+               })(),\r
                LOCAL: IS_LOCAL,\r
-               DEBUG: IS_DEBUG\r
+               DEBUG: IS_DEBUG,\r
+               LINE_FEED_CODE_TEXTAREA: ( function(){\r
+                       var text = document.createElement('textarea');\r
+                       text.value = '\n';\r
+                       return text.value;\r
+               })(),\r
+               LINE_FEED_CODE_PRE: ( function(){\r
+                       var pre = document.createElement('pre');\r
+                       pre.appendChild( document.createTextNode('\n'));\r
+                       return pre.firstChild.data;\r
+               })(),\r
+               IS_IFRAME: !!window.parent\r
        }\r
 })();\r
 \r
@@ -144,16 +168,6 @@ pettanr.util = ( function(){
                                }\r
                        }\r
                        return baseInstance;\r
-               },\r
-               createGlobalUniqueName: function(){\r
-                       var randomKey = null;\r
-                       while(true) {\r
-                               randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');\r
-                               if( window[randomKey] === undefined){\r
-                                       break;\r
-                               }\r
-                       }\r
-                       return randomKey;\r
                },      \r
                cleanCommnetNode: cleanCommnetNode,\r
                cleanElement: function( _targetElm){\r
@@ -301,27 +315,39 @@ pettanr.util = ( function(){
                        }\r
                        abstractPath = this.getAbsolutePath( src);\r
                        \r
-                       loadImage( images, abstractPath,\r
-                               function( abspath, actualW, actualH){\r
-                                       if( abstractPath !== abspath) return;\r
-                                       onLoad && setTimeout( function(){ // 一度読み込まれた画像は即座にonLoadされてしまうので遅延\r
-                                               onLoad( src, actualW, actualH);\r
-                                       }, 0);\r
-                               },\r
-                               function( abspath){\r
-                                       if( abstractPath !== abspath) return;\r
-                                       onError && setTimeout( function(){\r
-                                               onError( src);\r
-                                       }, 0);\r
-                               }, delay, timeout\r
-                       );\r
+                       loadImage( images, abstractPath, onLoadAsync, onErrorAsync, delay, timeout);\r
+                       \r
+                       function onLoadAsync( abspath, actualW, actualH){\r
+                               if( abstractPath !== abspath) return;\r
+                               var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onLoad);\r
+                                       _onTimeout = pettanr.util.createGlobalFunc( [\r
+                                               'function(){',\r
+                                                       'window["', _g_onUpdateFunction, '"]( "', abspath, '", ', actualW, ',  ', actualH, ');',\r
+                                                       'window["', _g_onUpdateFunction, '"] = null;',\r
+                                               '}'\r
+                                       ].join( ''));\r
+                               onLoad && setTimeout( window[ _onTimeout], 0);\r
+                               window[ _onTimeout] = null;\r
+                       }\r
+                       function onErrorAsync( abspath){\r
+                               if( abstractPath !== abspath) return;\r
+                               var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onError);\r
+                                       _onTimeout = pettanr.util.createGlobalFunc( [\r
+                                               'function(){',\r
+                                                       'window["', _g_onUpdateFunction, '"]( "', abspath, '");',\r
+                                                       'window["', _g_onUpdateFunction, '"] = null;',\r
+                                               '}'\r
+                                       ].join( ''));\r
+                               onError && setTimeout( window[ _onTimeout], 0);\r
+                               window[ _onTimeout] = null;\r
+                       }\r
                        \r
                /*  LICENSE: MIT?\r
                 *  URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631\r
                 *  AUTHOR: uupaa.js@gmail.com\r
                 * \r
                 *  fixed for ie6-8 by pettanr\r
-                *   new Image -> document.createElement( 'IMG')\r
+                *   new Image -> document.createElement( 'img')\r
                 */\r
                        function loadImage( images, abspath, onLoad, onError, delay, timeout) {\r
                                images = images || document.images;\r
@@ -459,6 +485,39 @@ pettanr.util = ( function(){
                        }\r
                        window[ randomKey] = _func;\r
                        return randomKey;\r
+               },\r
+               createGlobalFunc: function( func){\r
+                       var randomKey = null;\r
+                       while(true) {\r
+                               randomKey = 'hogeGlovalFunc_'+(''+Math.random()).replace(/\./,'');\r
+                               if(eval('typeof '+randomKey) == 'undefined') {\r
+                                       break;\r
+                               }\r
+                       }\r
+                       eval(randomKey+'='+((typeof func=='string') ? func : func.toString()));\r
+                       return randomKey;\r
+               },\r
+               createGlobalVar: function( obj){\r
+                       var randomKey = null;\r
+                       while(true) {\r
+                               randomKey = 'hogeGlovalVar_'+(''+Math.random()).replace(/\./,'');\r
+                               if(eval('typeof '+randomKey+'') == 'undefined') {\r
+                                       break;\r
+                               }\r
+                       }\r
+                       var globalObj = eval(randomKey+'={}');\r
+                       globalObj.value = obj;\r
+                       return randomKey;\r
+               },\r
+               createGlobalUniqueName: function(){\r
+                       var randomKey = null;\r
+                       while(true) {\r
+                               randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');\r
+                               if( typeof window[randomKey] === 'undefined'){\r
+                                       break;\r
+                               }\r
+                       }\r
+                       return randomKey;\r
                }\r
        }\r
 })();\r
@@ -584,10 +643,14 @@ pettanr.ua = ( function(){
 \r
 \r
 pettanr.CONST = ( function(){\r
-       var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false;\r
+       var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false,\r
+               RETTANR_ROOOT_PATH = 'http:\/\/pettanr.heroku.com\/';\r
        return {\r
-               URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : 'http:\/\/pettanr.heroku.com\/') + 'original_pictures.json',\r
-               URL_PANELS_JSON:                        ( isLocal === true ? 'json\/' : 'http:\/\/pettanr.heroku.com\/') + 'panels.json'\r
+               PETTANR_ROOT_PATH:                      RETTANR_ROOOT_PATH,\r
+               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
        }\r
 })();\r
 \r
@@ -729,6 +792,17 @@ pettanr.view = ( function(){
                                hide: function(){}\r
                        }\r
                })();\r
+\r
+               if( pettanr.IS_IFRAME === true){\r
+                       var _nodes = document.getElementsByTagName( 'a'),\r
+                               _a, _href;\r
+                       for(var i=0, l = _nodes.length; i<l; i++){\r
+                               _a = _nodes[ i];\r
+                               _href = _a.href.split('?')[0].split('#')[0];\r
+                               if( pettanr.util.getAbsolutePath( _href) !== location) _a.target = '_parent';\r
+                       }\r
+               }\r
+               \r
                if( pettanr.DEBUG === true){\r
                        var elmDl = document.getElementById( 'useragent'),\r
                                elmDt, elmDd,\r
@@ -1763,14 +1837,16 @@ pettanr.image = ( function(){
                        if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;\r
                        return IS_SERVER;\r
                })(),\r
-               PNG_FIX = pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 6,\r
-               BACKEND_WHEN_PNG = PNG_FIX === false ? BACKEND : ( function(){\r
+               BACKEND_WHEN_PNG = ( function(){\r
+                       if( pettanr.ua.isIE === false || pettanr.ua.ieVersion > 6) return BACKEND;\r
                        if( pettanr.ua.VML === true) return IS_VML;\r
                        if( pettanr.FLASH === true) return IS_FLASH;\r
                        if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;\r
                        if( pettanr.ua.ACTIVEX === true) return IS_ACTIVEX_SERVER;\r
                        return IS_SERVER;\r
-               })();\r
+               })(),\r
+               ReversibleImageClass,\r
+               ReversibleImageClassWithPingfix;\r
        \r
        var XBackendReversibleImageClass = ( function(){\r
                var CLASS_NAME = 'reversible-image-container',\r
@@ -1812,7 +1888,7 @@ pettanr.image = ( function(){
                                w = _w !== undefined ? _w : w;\r
                                h = _h !== undefined ? _h : h;\r
                                if( loaded === false) return;\r
-                               elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'v' : 'h'))) : '';\r
+                               elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
                        }\r
                        return {\r
                                elm : elmWrap,\r
@@ -1861,7 +1937,7 @@ pettanr.image = ( function(){
                                //if( flipH !== _flipH || flipV !== _flipV){\r
                                        vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg);\r
                                //}\r
-                                       vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'v' : 'h'))) : '';\r
+                                       vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
                                        elmWrap.appendChild( vmlImg);\r
                        }\r
                        return {\r
@@ -1915,6 +1991,205 @@ pettanr.image = ( function(){
        }\r
 })();\r
 \r
+/*\r
+ * bind : 出版
+ */\r
+pettanr.bind = ( function(){\r
+       var BIND_WORKER_ARRAY = [],\r
+               NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',\r
+               RESOURCE_PICTURE_PATH = pettanr.CONST.RESOURCE_PICTURE_PATH,\r
+               ELM_DETECT_WIDTH = ( function(){\r
+                       var ret = document.createElement( 'div');\r
+                       ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';\r
+                       return ret;\r
+               })();\r
+\r
+       /*\r
+        * original\r
+        *   http://d.hatena.ne.jp/uupaa/20090720/1248097177\r
+        */\r
+       var ResizeAgentClass = function( onResizeFunction, opt_elmCheck){\r
+               var     _globalLock = 0,\r
+                       _size = { w: 0, h: 0 };\r
+                       _ie = !!document.all,\r
+                       _quirks = (document.compatMode || "") !== "CSS1Compat",\r
+                       _ieroot = _quirks ? "body" : "documentElement";\r
+                       _root = opt_elmCheck ? opt_elmCheck : ( _ie ? document[_ieroot] : window);\r
+\r
+               function getInnerSize() {\r
+                       return {\r
+                               w: _root.innerWidth  || _root.clientWidth,\r
+                               h: _root.innerHeight || _root.clientHeight\r
+                       };\r
+               }\r
+\r
+               function loop() {\r
+                       if (!_globalLock++) {\r
+                               var size = getInnerSize();\r
+                               if (_size.w !== size.w || _size.h !== size.h) { // resized\r
+                                       _size = size; // update\r
+                                       onResizeFunction( _size);\r
+                               }\r
+                               setTimeout( unlock, 0); // delay unlock\r
+                       }\r
+                       setTimeout(loop, 500);\r
+               }\r
+               function unlock(){\r
+                       _globalLock = 0;\r
+               }\r
+               loop();\r
+       }\r
+       \r
+       \r
+       var ElementBuilder = ( function(){\r
+               var ELM_TITLE_ORIGN = ( function(){\r
+                               \r
+                       })(),\r
+                       ELM_TEXT_ORIGN = ( function(){\r
+                               var _table = document.createElement( 'table'),\r
+                                       _tr = document.createElement( 'tr');\r
+                               _table.appendChild( _tr);\r
+                               _tr.appendChild( document.createElement( 'td'));\r
+                               _table.cellspacing = '0';\r
+                               return _table;\r
+                       })();\r
+               \r
+               function buildComicElement(){\r
+                       \r
+               }\r
+               \r
+               function buildPanelElement( elmTarget, json, noClassnameMode){\r
+                       var _elmPanel = document.createElement( 'div'),\r
+                               _style = {\r
+                                               "border-width":         typeof json.border === 'number' ? json.border + 'px' : 0,\r
+                                               width:                          json.width + 'px',\r
+                                               height:                         json.height + 'px'\r
+                               },\r
+                               _cssText = [],\r
+                               _comicElements = json.panel_elements || [],\r
+                               _comicElement, _elmImgWrap, _rImg, _rPic, _balloon, _elmBalloonWrap, _elmText;\r
+                       if( noClassnameMode === true){\r
+                               \r
+                       } else {\r
+                               _elmPanel.className = NAMESPACE_CLASSNAME + 'panel';\r
+                       }\r
+                       for( var _key in _style){\r
+                               _cssText.push( _key + ':' + _style[ _key]);\r
+                       }\r
+                       _elmPanel.style.cssText = _cssText.join( ';');\r
+                       elmTarget.appendChild( _elmPanel);\r
+                       \r
+                       for( var i=0, l=_comicElements.length; i<l; ++i){\r
+                               _comicElement = _comicElements[ i];\r
+                               if( _comicElement.resource_picture){\r
+                                       _rPic = _comicElement.resource_picture || {};\r
+                                       _rImg = pettanr.image.createReversibleImage(\r
+                                                       [ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext].join( ''),\r
+                                                       _comicElement.width, _comicElement.height\r
+                                               );\r
+                                       _elmImgWrap = document.createElement( 'div');\r
+                                       _elmPanel.appendChild( _elmImgWrap);\r
+                                       _elmImgWrap.appendChild( _rImg.elm);\r
+                                       _elmImgWrap.className = NAMESPACE_CLASSNAME + 'image';\r
+                                       _elmImgWrap.style.cssText = [\r
+                                               'width:', Math.abs( _comicElement.width), 'px;',\r
+                                               'height:', Math.abs( _comicElement.height), 'px;',\r
+                                               'left:', _comicElement.x, 'px;',\r
+                                               'top:', _comicElement.y, 'px;',\r
+                                               'z-index:', _comicElement.z, ';'\r
+                                       ].join( '');\r
+                               } else {\r
+                                       _elmBalloonWrap = document.createElement( 'div');\r
+                                       _elmPanel.appendChild( _elmBalloonWrap);\r
+                                       _elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';\r
+                                       _elmBalloonWrap.style.cssText = [\r
+                                               'width:', _comicElement.width, 'px;',\r
+                                               'height:', _comicElement.height, 'px;',\r
+                                               'left:', _comicElement.x, 'px;',\r
+                                               'top:', _comicElement.y, 'px;',\r
+                                               'z-index:', _comicElement.z, ';'\r
+                                       ].join( '');\r
+\r
+                                       _balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail);\r
+                                       _elmBalloonWrap.appendChild( _balloon.elm);\r
+                                       \r
+                                       _elmText = ELM_TEXT_ORIGN.cloneNode( true);\r
+                                       _elmBalloonWrap.appendChild( _elmText);\r
+                                       _elmText.className = NAMESPACE_CLASSNAME + 'speach';\r
+                                       _elmText.getElementsByTagName( 'td')[ 0].appendChild( document.createTextNode( 'hello'));\r
+                               }\r
+                       }\r
+               }\r
+               \r
+               return {\r
+                       build: function( elmTarget, json, zoom, noClassnameMode){\r
+                               // clean elmTarget\r
+                               pettanr.util.removeAllChildren( elmTarget);\r
+                               \r
+                               // json is Comic ? Panel ?\r
+                               if( json.panels){\r
+                                       // comic\r
+                                       \r
+                               } else\r
+                               if( json.panel_elements){\r
+                                       // panel\r
+                                       buildPanelElement( elmTarget, json, noClassnameMode);\r
+                               } else {\r
+                                       // invalid json\r
+                               }\r
+                       }\r
+               }\r
+       })();\r
+       \r
+       var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode){\r
+               typeof json === 'object' && build( elmTarget, json);\r
+               \r
+               var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false)\r
+               \r
+               if( zoomSelfEnabled === true){\r
+                       elmTarget.parentNode.insertBefore( elmDetectW, elmTarget);\r
+                       new ResizeAgentClass( onResize, elmDetectW);\r
+               }\r
+               function onResize(){\r
+                       \r
+               }\r
+               json && ElementBuilder.build( elmTarget, json, zoomSelfEnabled, noClassnameMode);\r
+               \r
+               return {\r
+                       init: function(){\r
+                               \r
+                       },\r
+                       zoom: function(){\r
+                               \r
+                       },\r
+                       json: function( _json){\r
+                               json = _json;\r
+                               ElementBuilder.build( elmTarget, _json, zoomSelfEnabled, noClassnameMode);\r
+                       },\r
+                       targetElement: function(){\r
+                               \r
+                       },\r
+                       layput: function(){\r
+                               \r
+                       },\r
+                       destroy: function(){\r
+                               \r
+                       }\r
+               }\r
+       }\r
+       \r
+       return {\r
+               createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode){\r
+                       var ret = new BindWorkerClass( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode);\r
+                       BIND_WORKER_ARRAY.push( ret);\r
+                       return ret;\r
+               },\r
+               isBindWorkerInstance: function( _bindWorker){\r
+                       \r
+               }\r
+       }\r
+})();\r
+\r
 \r
 \r
 \r
@@ -1922,12 +2197,14 @@ pettanr.image = ( function(){
  *  Google Analytics\r
  */\r
 \r
-var _gaq = _gaq || [];\r
-_gaq.push(['_setAccount', 'UA-28023955-1']);\r
-_gaq.push(['_trackPageview']);\r
-\r
-(function() {\r
-       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
-       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
-       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
-})();
\ No newline at end of file
+if( pettanr.LOCAL === false){\r
+       var _gaq = _gaq || [];\r
+       _gaq.push(['_setAccount', 'UA-28023955-1']);\r
+       _gaq.push(['_trackPageview']);\r
+       \r
+       (function() {\r
+               var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
+               ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
+               var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
+       })();   \r
+}
\ No newline at end of file
index 9f60325..88a4ac3 100644 (file)
@@ -58,19 +58,19 @@ pettanr.file = ( function(){
                ROLE_IS_ARTIST = 2^1,
                ROLE_IS_VISITOR = 2^0,
                ROLE_IS_UNKROWN = 2^-1,
-               UPDATE_POLICY_SOCAV = 0x11111,// s: super user
-               UPDATE_POLICY_SOCA_ = 0x11110,// o: owner( comic || panel || picture )
-               UPDATE_POLICY_SOC__ = 0x11100,// c: creator
-               UPDATE_POLICY_SO_A_ = 0x11010,// a: artist
-               UPDATE_POLICY_SO___ = 0x11000,// v: visitor
-               UPDATE_POLICY__O___ = 0x01000,// l: lisence manager
-               UPDATE_POLICY_S____ = 0x10000,
-               UPDATE_POLICY______ = 0x00000,
+               UPDATE_POLICY_SOCAV = parseInt( '11111', 2),// s: super user
+               UPDATE_POLICY_SOCA_ = parseInt( '11110', 2),// o: owner( comic || panel || picture )
+               UPDATE_POLICY_SOC__ = parseInt( '11100', 2),// c: creator
+               UPDATE_POLICY_SO_A_ = parseInt( '11010', 2),// a: artist
+               UPDATE_POLICY_SO___ = parseInt( '11000', 2),// v: visitor
+               UPDATE_POLICY__O___ = parseInt( '01000', 2),// l: lisence manager
+               UPDATE_POLICY_S____ = parseInt( '10000', 2),
+               UPDATE_POLICY______ = parseInt( '00000', 2),
                FILEDATA_RESITER = [],                  // store all of fileData( json object )
                FILEDATA_HAS_domainID_RESISTER = {},
                FILEDATA_ACCESS = [],                   // file operations for Kernel only ! hide from Out of pettanr.file
                FILE_OBJECT_POOL = [];
-               
+       
        var REQUEST_CONTROLER = ( function(){
                var REQUEST_TICKET_RESISTER = [],
                        DATA_TYPE_ARRAY = 'json,xml,html,text'.split( ','),
@@ -240,7 +240,7 @@ pettanr.file = ( function(){
                        if( typeof UIDorFILEorFILEDATA === 'number'){
                                _data = FILEDATA_RESITER[ UIDorFILEorFILEDATA] || null;
                        } else
-                       if( UIDorFILEorFILEDATA.getUID){
+                       if( UIDorFILEorFILEDATA instanceof FileClass){
                                _uid = UIDorFILEorFILEDATA.getUID();
                                _data = FILEDATA_RESITER[ _uid] || null;
                        } else {
@@ -533,84 +533,86 @@ pettanr.file = ( function(){
                function dispatchEvent( e){
                        FILE_CONTROLER.fileEventRellay( instance, TREE, e);
                }
-               return {
-                       init: function(){
-                               instance = this;
-                               delete this.init;
-                       },
-                       TYPE: function(){ return TYPE;},
-                       getName: function(){
-                               if( name !== null) return name;
-                               if( data.name){
-                                       return data.name;
-                               }
-                               if( TYPE === FILE_TYPE_IS_IMAGE){
-                                       name = [ data.id, data.ext].join( '.');
-                               } else
-                               if( TYPE === FILE_TYPE_IS_PANEL){
-                                       name = data.comic.title + ' | ' +data.t;
-                               }
-                               return name || 'no_name';
-                       },
-                       getThumbnail: function(){
-                               if( thumbnail !== null) return thumbnail;
-                               if( TYPE === FILE_TYPE_IS_IMAGE){
-                                       thumbnail = [ 'thumbnail/', data.id, '.', data.ext].join( '');
-                               }
-                               return thumbnail || null;
-                       },
-                       getUID: function(){
-                               return uid;
-                       },
-                       getState: function(){
-                               return data.state !== undefined ? data.state : FILE_STATE_IS_OK;
-                       },
-                       getChildFileLength: function(){
-                               return CHILDREN && typeof CHILDREN.length === 'number' ? CHILDREN.length : 0;
-                       },
-                       getChildFileByIndex: function( _index){
-                               if( typeof _index !== 'number' || _index < 0 || typeof CHILDREN.length !== 'number' || _index >= CHILDREN.length) return null;
-                               _file = new FileClass( TREE, this, CHILDREN[ _index]);
-                               _file.init();
-                               return _file;
-                       },
-                       getChildFileIndex: function( _FILEorFILEDATA){
-                               if( !CHILDREN || typeof CHILDREN.length !== 'number') return -1;
-                               var l = CHILDREN.length,
-                                       _fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA);
-                               if( _fileData === null) return -1;
-                               for(var i=0; i<l; ++i){
-                                       if( CHILDREN[ i] === _fileData) return i;
-                               }
-                               return -1;
-                       },
-                       isChildFile: function( _FILEorFILEDATA){
-                               return this.getChildFileIndex( _FILEorFILEDATA) !== -1;
-                       },                      
-                       getAttribute: function( KEYorKEYARRAY){
-                               return FILE_CONTROLER.getFileAttribute( UID, KEYorKEYARRAY);
-                       },
-                       getSeqentialFiles: function(){
-                               FILE_CONTROLER.getSeqentialFiles( this);
-                       },
-                       updateAttribute: function( key, value, opt_callback){
-                               TREE.updateFileAttribute( UID, key, value, opt_callback);
-                       },
-                       move: function( _newFolder, _newIndex, opt_callback){
-                               TREE.move( parentFile, UID, _newFolder, _newIndex, opt_callback);
-                       },
-                       replace: function( _newIndex, opt_callback){
-                               TREE.replace( parentFile, UID, _newIndex, opt_callback);
-                       },
-                       addEventListener: function( _eventType, _callback){
-                               FILE_CONTROLER.addEventListener( UID, _eventType, _callback);
-                       },
-                       removeEventListener: function( _eventType, _callback){
-                               FILE_CONTROLER.removeEventListener( UID, _eventType, _callback);
-                       },
-                       collect: function(){
-                               
+               
+               /* grobal Methods */
+               this.init = function(){
+                       instance = this;
+                       delete this.init;
+               }
+               this.TYPE = function(){
+                       return TYPE;
+               }
+               this.getName = function(){
+                       if( name !== null) return name;
+                       if( data.name){
+                               return data.name;
+                       }
+                       if( TYPE === FILE_TYPE_IS_IMAGE){
+                               name = [ data.id, data.ext].join( '.');
+                       } else
+                       if( TYPE === FILE_TYPE_IS_PANEL){
+                               name = data.comic.title + ' | ' +data.t;
+                       }
+                       return name || 'no_name';
+               }
+               this.getThumbnail = function(){
+                       if( thumbnail !== null) return thumbnail;
+                       if( TYPE === FILE_TYPE_IS_IMAGE){
+                               thumbnail = [ 'thumbnail/', data.id, '.', data.ext].join( '');
                        }
+                       return thumbnail || null;
+               }
+               this.getUID = function(){
+                       return uid;
+               }
+               this.getState = function(){
+                       return data.state !== undefined ? data.state : FILE_STATE_IS_OK;
+               }
+               this.getChildFileLength = function(){
+                       return CHILDREN && typeof CHILDREN.length === 'number' ? CHILDREN.length : 0;
+               }
+               this.getChildFileByIndex = function( _index){
+                       if( typeof _index !== 'number' || _index < 0 || typeof CHILDREN.length !== 'number' || _index >= CHILDREN.length) return null;
+                       _file = new FileClass( TREE, this, CHILDREN[ _index]);
+                       _file.init();
+                       return _file;
+               }
+               this.getChildFileIndex = function( _FILEorFILEDATA){
+                       if( !CHILDREN || typeof CHILDREN.length !== 'number') return -1;
+                       var l = CHILDREN.length,
+                               _fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA);
+                       if( _fileData === null) return -1;
+                       for(var i=0; i<l; ++i){
+                               if( CHILDREN[ i] === _fileData) return i;
+                       }
+                       return -1;
+               }
+               this.isChildFile = function( _FILEorFILEDATA){
+                       return this.getChildFileIndex( _FILEorFILEDATA) !== -1;
+               }
+               this.getAttribute = function( KEYorKEYARRAY){
+                       return FILE_CONTROLER.getFileAttribute( UID, KEYorKEYARRAY);
+               }
+               this.getSeqentialFiles = function(){
+                       FILE_CONTROLER.getSeqentialFiles( this);
+               }
+               this.updateAttribute = function( key, value, opt_callback){
+                       TREE.updateFileAttribute( UID, key, value, opt_callback);
+               }
+               this.move = function( _newFolder, _newIndex, opt_callback){
+                       TREE.move( parentFile, UID, _newFolder, _newIndex, opt_callback);
+               }
+               this.replace = function( _newIndex, opt_callback){
+                       TREE.replace( parentFile, UID, _newIndex, opt_callback);
+               }
+               this.addEventListener = function( _eventType, _callback){
+                       FILE_CONTROLER.addEventListener( UID, _eventType, _callback);
+               }
+               this.removeEventListener = function( _eventType, _callback){
+                       FILE_CONTROLER.removeEventListener( UID, _eventType, _callback);
+               }
+               this.collect = function(){
+                       
                }
        };
        function getFileObject( TREE, parentFile, data){
index 7960fda..ceb2b3d 100644 (file)
  * \r
  */\r
 \r
-               pettanr.LINE_FEED_CODE_TEXTAREA = ( function(){\r
-                       var text = document.getElementById( 'shadowTxtarea'),\r
-                               form = text.parentNode;\r
-                       form.parentNode.removeChild( form);\r
-                       return text.value;\r
-               })();\r
-               pettanr.LINE_FEED_CODE_PRE = ( function(){\r
-                       var pre = document.getElementById( 'shadowPre');\r
-                       pre.parentNode.removeChild( pre);\r
-                       return pettanr.ua.isIE === true ? this.LINE_FEED_CODE_TEXTAREA : pre.innerHTML; // ie ??                                \r
-               })();\r
 \r
 /* ----------------------------------------\r
  *   pettanr.editor\r
@@ -594,7 +583,7 @@ pettanr.editor = ( function(){
                        jqWrap, jqContainer, jqItemOrigin,\r
                        itemW, itemH,\r
                        jqName, jqButton, buttonW,\r
-                       onUpdateFunction,\r
+                       //onUpdateFunction,\r
                        _g_onUpdateFunction,\r
                        winW,\r
                        onEnterInterval = null;\r
@@ -808,19 +797,25 @@ pettanr.editor = ( function(){
                        \r
                        function onClick( e){\r
                                pettanr.overlay.hide();\r
-                               if (onUpdateFunction) {\r
+                               if( _g_onUpdateFunction) {\r
                                        if( LOW_SRC === null){\r
-                                               onUpdateFunction( SRC, imgW, imgH);\r
+                                               window[ _g_onUpdateFunction]( SRC, imgW, imgH);\r
+                                               window[ _g_onUpdateFunction] = null;\r
                                        } else {\r
-                                               var _onLoad = new Function( [\r
-                                                               'window["', _g_onUpdateFunction, '"]( arguments[ 0], arguments[ 1],  arguments[ 2]);',\r
-                                                               'window["', _g_onUpdateFunction, '"] = null'\r
+                                               var _onLoad = pettanr.util.createGlobalFunc( [\r
+                                                               'function( url, w, h){',\r
+                                                                       'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,',  h || ', data.height,');',\r
+                                                                       'window["', _g_onUpdateFunction, '"] = null;',\r
+                                                               '}'\r
                                                        ].join( '')),\r
-                                                       _onError = new Function( [\r
-                                                               'window["', _g_onUpdateFunction, '"]( arguments[ 0], ', data.width || 64 ,', ', data.height || 64,');',\r
-                                                               'window["', _g_onUpdateFunction, '"] = null'\r
+                                                       _onError = pettanr.util.createGlobalFunc( [\r
+                                                               'function( url){',\r
+                                                                       'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',\r
+                                                                       'window["', _g_onUpdateFunction, '"] = null;',\r
+                                                               '}'\r
                                                        ].join( ''));\r
-                                               pettanr.util.loadImage( SRC, _onLoad, _onError);\r
+                                               pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);\r
+                                               window[ _onLoad] = window[ _onError] = undefined;\r
                                                /*\r
                                                ( function( onUpdate){\r
                                                        pettanr.util.loadImage( SRC,\r
@@ -866,7 +861,7 @@ pettanr.editor = ( function(){
                                ICON_ARRAY.shift().destroy();\r
                        }\r
                        onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                       onUpdateFunction = onEnterInterval = null;\r
+                       onEnterInterval = null;// onUpdateFunction = \r
                }\r
                function onEnterShowImage(){\r
                        var l = ICON_ARRAY.length,\r
@@ -912,9 +907,11 @@ pettanr.editor = ( function(){
                        },\r
                        jqWrap: null,\r
                        show: function( _onUpdateFunction){\r
-                               onUpdateFunction = _onUpdateFunction;\r
-                               if( onUpdateFunction){\r
-                                       _g_onUpdateFunction = pettanr.util.createGlobalFunction( onUpdateFunction);\r
+                               //onUpdateFunction = _onUpdateFunction;\r
+                               if( _onUpdateFunction){\r
+                                       _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);\r
+                               } else {\r
+                                       _g_onUpdateFunction = null;\r
                                }\r
                                pettanr.overlay.show( this);\r
                                \r
@@ -2222,14 +2219,20 @@ pettanr.editor = ( function(){
                        y = _y !== undefined ? _y : y;\r
                        w = _w !== undefined ? _w : w;\r
                        h = _h !== undefined ? _h : h;\r
-                       elmResizerContainerStyle.left = x +'px';\r
-                       elmResizerContainerStyle.top = y +'px';\r
-                       elmResizerContainerStyle.width = w +'px';\r
-                       elmResizerContainerStyle.height = h +'px';\r
-                       elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
-                       elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
-                       elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
-                       elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';\r
+                       try {\r
+                               elmResizerContainerStyle.left = x +'px';\r
+                               elmResizerContainerStyle.top = y +'px';\r
+                               elmResizerContainerStyle.width = w +'px';\r
+                               elmResizerContainerStyle.height = h +'px';\r
+                               elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
+                               elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
+                               elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
+                               elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';                         \r
+                       } catch(e){\r
+                               alert( [x, y, w, h].join( ','));\r
+                               return;\r
+                       }\r
+\r
                        \r
                        POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);\r
                        POSITION_ARRAY.push(\r
@@ -2268,14 +2271,14 @@ pettanr.editor = ( function(){
                        INFOMATION_WINDOW.update( currentElement);\r
                }\r
                \r
-               function flip( _flipV, _flipH){\r
+               function flip( _flipH, _flipV){\r
                        var p = CURSOR_AND_FLIP[ currentIndex];\r
                        currentIndex = _flipH === true || _flipV === true ? p[\r
                                        _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')\r
                                ] : currentIndex;\r
                        MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);\r
                        elmResizerContainer.className = 'current-resizer-is-' +currentIndex;\r
-                       currentElement.flip( _flipV, _flipH);\r
+                       currentElement.flip( _flipH, _flipV);\r
                }\r
                return {\r
                        update: draw,\r
@@ -2387,7 +2390,7 @@ pettanr.editor = ( function(){
                                                baseY = _y;\r
                                                baseW = _w = _memoryX -_x;\r
                                                baseH = _h;\r
-                                               flip( false, true);\r
+                                               flip( true, false);\r
                                                flipV = currentElement.flipV();\r
                                        } else \r
                                        if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){\r
@@ -2397,7 +2400,7 @@ pettanr.editor = ( function(){
                                                baseY = _y = _y +_h;\r
                                                baseW = _w;\r
                                                baseH = _h = _memoryY -_y;\r
-                                               flip( true, false);\r
+                                               flip( false, true);\r
                                                flipH = currentElement.flipH();\r
                                        } else {\r
                                        // flipVH\r
@@ -3211,7 +3214,7 @@ pettanr.editor = ( function(){
                                x = x || Math.floor( panelW /2 -w /2);\r
                                y = y || Math.floor( panelH /2 -h /2);\r
                                function onImageSelect( _url, _w, _h){\r
-                                       var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);\r
+                                       var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);\r
                                        appendComicElement( _comicElement);\r
                                        _comicElement.animate( undefined, undefined, _w, _h);\r
                                        SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);                                      \r
index f2a93b1..e43623e 100644 (file)
@@ -107,7 +107,7 @@ version: 2.7.0
 /*  ClearFix\r
 --------------------------------------------------------------------------------------*/\r
        /* for modern brouser */\r
-       claerfix:after {   \r
+       .claerfix:after {\r
                content: ".";   \r
                display: block;   \r
                visibility: hidden;   \r
@@ -194,6 +194,10 @@ version: 2.7.0
        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
@@ -477,6 +481,7 @@ version: 2.7.0
        .dl-table-small dd {\r
                padding:                0 0 0 150px;\r
        }\r
+\r
 /*  Reversible Image\r
 --------------------------------------------------------------------------------------*/       \r
        img.img-flip-v { /* 上下反転 */\r
@@ -523,3 +528,44 @@ version: 2.7.0
        v\:image.img-flip-vh {\r
                rotation :                              180; /* vml */\r
        }\r
+\r
+/*  PettanR Comic\r
+--------------------------------------------------------------------------------------*/\r
+       .pettanr-comic-panel {\r
+               border-style:                   solid;\r
+               border-color:                   #111;\r
+               position:                               relative;\r
+               margin:                                 1em auto;\r
+               overflow:                               hidden;\r
+       }\r
+       .pettanr-comic-image,\r
+       .pettanr-comic-balloon {\r
+               position:                               absolute;\r
+       }\r
+               .pettanr-comic-image img {\r
+                       position:                       absolute;\r
+                   height:                             100%;\r
+                   width:                              100%;\r
+                   left:                               0;\r
+                   top:                                0;\r
+               }\r
+               .pettanr-comic-balloon .pettanr-comic-speach {\r
+                       position:                               absolute;\r
+                       top:                                    0;\r
+                       left:                                   0;\r
+               }\r
+                       .pettanr-comic-speach,\r
+                       .pettanr-comic-speach tbody,\r
+                       .pettanr-comic-speach tr,\r
+                       .pettanr-comic-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
+                       .pettanr-comic-speach {\r
+                               table-layout:           fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */\r
+                       }
\ No newline at end of file
index 328032e..9e4ab47 100644 (file)
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
-<html><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
 <head>\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
 </head>\r
 \r
 <body>\r
-       <!--[if lt IE 9]>\r
-               <script type="text/javascript">\r
-                               (function(){\r
-                                       var     b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),\r
-                                               c = b.className || '',\r
-                                               x = document.createElement('div');\r
-                                       b.appendChild(x);\r
-                                       x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
-                                       b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', x.offsetHeight > 1 ? 'enabled' : 'disabled'].join( '');\r
-                                       b.removeChild(x);\r
-                               })();\r
-               </script>\r
-       <![endif]-->\r
-\r
     <div id="general-content">\r
         <div id="outer-wrapper">\r
             \r
  &lt;/script&gt;\r
 &lt;![endif]--&gt;\r
                                        </code></pre>\r
-                                       <p>ちなみに上記のコードは &lt;body&gt; の直下に書かれていて、domReady イベントすら待たずに、即座にActiveX の有無を調べて &lt;body&gt; にクラスをセットします.</p>\r
-                                       <p>基本的に スクリプトは html の最後の方に書いて、domReady イベント後に動作するようにしているので、これは異例です.</p>\r
-                                       <p>ActiveX が有効時・無効時で css 指定から読み込まれる画像が異なる場合に、不要な画像へのアクセスを避けるためにこのようなタイミングにしています.(でも実は未検証)</p>\r
+                                       <p>css の書き方を見直して ie については ActiveX のチェックが済むまで画像を読み込まないようにした.これにより domReady 前のチェックは取りやめ、domReady 後に行うことで十分になった.併せて ie 専用となるコードを html から減らせた.</p>\r
+                                       <p><del>ちなみに上記のコードは &lt;body&gt; の直下に書かれていて、domReady イベントすら待たずに、即座にActiveX の有無を調べて &lt;body&gt; にクラスをセットします.</del></p>\r
+                                       <p><del>基本的に スクリプトは html の最後の方に書いて、domReady イベント後に動作するようにしているので、これは異例です.</del></p>\r
+                                       <p><del>ActiveX が有効時・無効時で css 指定から読み込まれる画像が異なる場合に、不要な画像へのアクセスを避けるためにこのようなタイミングにしています.(でも実は未検証)</del></p>\r
                                        \r
                                        <h3>filter 指定による html 要素のサイズ変化を調べる</h3>\r
                                        <div id="box-container" style="height:200px;position:relative;">\r
@@ -81,6 +68,7 @@ blue.style.filter = 'progid:DXImageTransform.Microsoft.Shadow()';
                                        </code></pre>\r
                                        \r
                                        <h3>以上を元にした ActiveX チェック用のスクリプト</h3>\r
+                                       <p>上記の理由のため以下のコードは ぺったんクライアントでは現在、使われていない.以下のコードを元にしたものが pettanr.ua.ACTIVEX で使われていて ActiveX が有効か? 判定を行っている.</p>\r
                                        <pre><code>\r
 &lt;!--[if lt IE 9]&gt;\r
   &lt;script type=&quot;text/javascript&quot;&gt;\r
@@ -99,9 +87,9 @@ blue.style.filter = 'progid:DXImageTransform.Microsoft.Shadow()';
                                        \r
                                        <h3>付録</h3>\r
                                        <h4>ActiveX が切られている場合の影響</h4>\r
-                                       <p>ActiveX ã\81\8cå\88\87ã\82\89ã\82\8cã\81¦ã\81\84ã\82\8bå ´å\90\88ã\80\81 filter æ\8c\87å®\9aã\81«ã\82\88ã\82\8b css3 ç\9b¸å½\93ã\81®ã\83\87ã\82¶ã\82¤ã\83³ã\81\8c使ã\81\88ã\81ªã\81\8fã\81ªã\82\8bã\81»ã\81\8bã\81«ã\80\81ActiveX ã\83\97ã\83­ã\82°ã\83©ã\83  ã\81¨ã\81\97ã\81¦æ\8f\90ä¾\9bã\81\95ã\82\8cã\81¦ã\81\84る Flash が使えなくなる.これにより pettanR にとって重要な機能、画像の反転や ie6 以下への pngfix が難しくなる.</p>\r
+                                       <p>ActiveX ã\81\8cå\88\87ã\82\89ã\82\8cã\81¦ã\81\84ã\82\8bå ´å\90\88ã\80\81 filter æ\8c\87å®\9aã\81«ã\82\88ã\82\8b css3 ç\9b¸å½\93ã\81®ã\83\87ã\82¶ã\82¤ã\83³ã\81\8c使ã\81\88ã\81ªã\81\8fã\81ªã\82\8bã\81»ã\81\8bã\81«ã\80\81ActiveX ã\82ªã\83\96ã\82¸ã\82§ã\82¯ã\83\88ã\81¨ã\81\97ã\81¦æ\8f\90ä¾\9bã\81\95ã\82\8cる Flash が使えなくなる.これにより pettanR にとって重要な機能、画像の反転や ie6 以下への pngfix が難しくなる.</p>\r
                                        <p>さらに、ie6 以下では ActiveX オブジェクトとして提供される XmlHttpRequest も使えなくなる.( この場合サーバとの通信手段は、動的に生成したフォーム部品によるもの などに限られてくる )</p>\r
-                                       <p>Silverlight や VML がどうなるか?は未チェック.(おそらく VML は ActiveX と無関係、Silverlight も同様なら Silverlight の重要度が少し上がる)</p>\r
+                                       <p>Silverlight や VML がどうなるか?は不勉強.(おそらく VML は ActiveX と無関係、Silverlight も同様なら Silverlight の重要度が少し上がる)</p>\r
                                        <h4>【一応】js が有効だからといって ActiveX も有効とは限らない</h4>\r
                                        <p>ActiveX は js と同時に切られることが多いが、これは ie のデフォルトのセキュリティ設定のためで、ActiveX と js はそれぞれ独立して on / off ができる.</p>\r
                                        <p>そのため js が有効だからといって ActiveX も有効とは限らない.</p>                                  \r
diff --git a/0.4.x/test/comic-html-structure.html b/0.4.x/test/comic-html-structure.html
new file mode 100644 (file)
index 0000000..22a51a9
--- /dev/null
@@ -0,0 +1,169 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<head>\r
+       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+       <meta http-equiv="Content-Language" content="ja">\r
+       <meta http-equiv="Content-Script-Type" content="text/javascript">\r
+       <meta http-equiv="Content-Style-Type" content="text/css">\r
+       <meta http-equiv="imagetoolbar" content="no">\r
+       <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
+       <!-- InstanceBeginEditable name="doctitle" -->\r
+       <title>Comic 用 html構造テスト | pettanR</title>\r
+       <!-- InstanceEndEditable -->\r
+       <!-- InstanceBeginEditable name="head" -->\r
+       <!-- InstanceEndEditable -->\r
+</head>\r
+\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="../index.html">pettanR</a></h1>\r
+                <!-- global navi -->\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
+                               <!-- InstanceBeginEditable name="main_content" -->\r
+                               <div id="main">\r
+                                       <h2>コミック用 html 構造のテスト</h2>\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
+                                       <form name="htmlTest" class="block-element-item">\r
+                                               <textarea name="jsonString" style="width:100%" rows="30" cols="100">\r
+{\r
+       "border":                       1,\r
+       "comic_id":                     5,\r
+       "resource_picture_id":          1,\r
+       "x":                            0,\r
+       "y":                            0,\r
+       "z":                            0,\r
+       "t":                            0,\r
+       "width":                        400,\r
+       "height":                       235,\r
+       "panel_elements":               [\r
+               {\r
+                       "resource_picture":     {"id":1,"ext":'png'},\r
+                       "x":                    178,\r
+                       "y":                    -2,\r
+                       "z":                    0,\r
+                       "width":                166,\r
+                       "height":               252\r
+               },\r
+               {\r
+                       "balloon_template_id":  1,\r
+                       "system_picture_id":    1,\r
+                       "size":                 1,\r
+                       "tail":                 -14,\r
+                       "x":                    -29,\r
+                       "y":                    39,\r
+                       "z":                    1,\r
+                       "width":                200,\r
+                       "height":               160,\r
+                       "speaches_attributes":  {\r
+                               "newf1":        {\r
+                                       "content":      "Hello",\r
+                                       "x":            -29,\r
+                                       "y":            39,\r
+                                       "width":        200,\r
+                                       "height":       160\r
+                               }\r
+                       }\r
+               }\r
+       ]\r
+}\r
+                                               </textarea>\r
+                                               <input type="button" value="print" name="bindButton">\r
+                                       </form>\r
+                                       <div id="outputHere"></div>\r
+                               </div>\r
+                               <!-- InstanceEndEditable -->\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="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 id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
+        </div><!-- #EndLibraryItem -->\r
+       </div>\r
+       <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" -->\r
+       <script type="text/javascript">\r
+               var jsonArea = document.htmlTest.jsonString,\r
+                       button = document.htmlTest.bindButton,\r
+                       bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
+                       json;\r
+               button.onclick = function(){\r
+                       try {\r
+                               eval( 'json = ' + jsonArea.value);\r
+                               bindWorker.json( json);                         \r
+                       } catch(e){\r
+                       }\r
+               }\r
+       </script>\r
+<!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
index 35a6764..3dfa360 100644 (file)
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
-<html><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
 <head>\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
 </head>\r
 \r
 <body>\r
-       <!--[if lt IE 9]>\r
-               <script type="text/javascript">\r
-                               (function(){\r
-                                       var     b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),\r
-                                               c = b.className || '',\r
-                                               x = document.createElement('div');\r
-                                       b.appendChild(x);\r
-                                       x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
-                                       b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', x.offsetHeight > 1 ? 'enabled' : 'disabled'].join( '');\r
-                                       b.removeChild(x);\r
-                               })();\r
-               </script>\r
-       <![endif]-->\r
-\r
     <div id="general-content">\r
         <div id="outer-wrapper">\r
             \r
             <div id="inner-wrapper" class="base-content-width">\r
                                <!-- InstanceBeginEditable name="main_content" -->\r
                                <div id="main">\r
+                                       <h2>html test</h2>\r
+                                       <ul>\r
+                                       <li><a href="comic-html-structure.html">comic html structure</a></li>\r
+                                       </ul>\r
                                        <h2>flip image test</h2>\r
                                        <ul>\r
                                        <li><a href="transform.html">css3 transform</a></li>\r
index 7ca6ef9..4b6c354 100644 (file)
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
-<html><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
 <head>\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
 </head>\r
 \r
 <body>\r
-       <!--[if lt IE 9]>\r
-               <script type="text/javascript">\r
-                               (function(){\r
-                                       var     b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),\r
-                                               c = b.className || '',\r
-                                               x = document.createElement('div');\r
-                                       b.appendChild(x);\r
-                                       x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
-                                       b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', x.offsetHeight > 1 ? 'enabled' : 'disabled'].join( '');\r
-                                       b.removeChild(x);\r
-                               })();\r
-               </script>\r
-       <![endif]-->\r
-\r
     <div id="general-content">\r
         <div id="outer-wrapper">\r
             \r
index 6d2538a..a96ec6b 100644 (file)
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
-<html><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
 <head>\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
 </head>\r
 \r
 <body>\r
-       <!--[if lt IE 9]>\r
-               <script type="text/javascript">\r
-                               (function(){\r
-                                       var     b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),\r
-                                               c = b.className || '',\r
-                                               x = document.createElement('div');\r
-                                       b.appendChild(x);\r
-                                       x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
-                                       b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', x.offsetHeight > 1 ? 'enabled' : 'disabled'].join( '');\r
-                                       b.removeChild(x);\r
-                               })();\r
-               </script>\r
-       <![endif]-->\r
-\r
     <div id="general-content">\r
         <div id="outer-wrapper">\r
             \r
index 2007c5d..3e5e228 100644 (file)
@@ -18,7 +18,7 @@
         indent="yes" />\r
         \r
 <xsl:template match="rdf:RDF">\r
-  <html xml:lang="ja" lang="ja">\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
index 7f74b0a..aa00723 100644 (file)
                <link rel="stylesheet" type="text/css" href="stylesheets/work.css">\r
     </head>\r
     <body>\r
-\r
-               \r
-               <!-- 改行コード 取得用 -->\r
-<form>\r
-<textarea id="shadowTxtarea" style="display:none;">\r
-\r
-</textarea>\r
-</form>\r
-<pre id="shadowPre" style="display:none;">\r
-\r
-</pre>\r
-\r
                <div id="header">\r
                        <div class="base-content-width" style="position:relative;">\r
                                <h1><a href="index.html">pettanR</a></h1>\r
@@ -42,7 +30,7 @@
                                        <p>This page is login user console.</p>\r
                                        <h3>クイックアクセス</h3>\r
                                        <p>新しいコミックをつくる</p>\r
-                                       <p><a href="#" onclick="pettanr.view.show('editor')">新しいコマを描く</a></p>\r
+                                       <p><a href="#" onclick="pettanr.view.show('editor');return false;">新しいコマを描く</a></p>\r
                                        <p>画像のアップロード</p>\r
                                        <h3>編集長からのお知らせ</h3>\r
                                        <p>メンテナンスについて</p>\r