</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="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">\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="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 --></div>\r
<script type="text/javascript" src="../javascripts/common.js"></script>\r
</body>\r
</html>\r
<!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">\r
- <head>\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
- <title>pettanR</title>\r
- <link rel="stylesheet" type="text/css" href="stylesheets/common.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>pettanR</h1>\r
- <!-- global navi -->\r
- <div id="global-navi">\r
- <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
- </div>\r
+<html><!-- 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>pettanR</title>\r
+<!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+<!-- InstanceEndEditable -->\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('<body>');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="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
+ <div style="padding:50px;text-align:center;">\r
+ <p style="font-size:2em;font-weight:bold;color:#666;line-height:1.6em;">\r
+ もうしばらくしたら、いつもと同じ一日が、<br>\r
+ 忘れられない一日になります。\r
+ </p>\r
+ <p style="text-align:center;color:#999;">\r
+ ぺったんRからの特別な発表を、もうちょっとまっててね。\r
+ </p>\r
+ <img src="http://static.sourceforge.jp/thumb/g/2/930/640x640_0.png" width="200" height="200" alt="ぺったんR">\r
</div>\r
</div>\r
- \r
- <div id="inner-wrapper" class="base-content-width">\r
- <div id="main">\r
- <div style="padding:50px;text-align:center;">\r
- <p style="font-size:2em;font-weight:bold;color:#666;line-height:1.6em;">\r
- もうしばらくしたら、いつもと同じ一日が、<br>\r
- 忘れられない一日になります。\r
- </p>\r
- <p style="text-align:center;color:#999;">\r
- ぺったんRからの特別な発表を、もうちょっとまっててね。\r
- </p>\r
- <img src="http://static.sourceforge.jp/thumb/g/2/930/640x640_0.png" width="200" height="200" alt="ぺったんR">\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- \r
- <!-- footer -->\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="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 © 2011-2012 pettanR team, some rights reserved.</div>\r
- </div>\r
- </div>\r
- <script type="text/javascript" src="javascripts/common.js"></script>\r
- </body>\r
-</html>
\ No newline at end of file
+ <!-- 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="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 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
+<!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
/*\r
* pettanR common.js\r
- * version 0.4.1\r
+ * version 0.4.2\r
* \r
* author: itozyun\r
*/\r
}\r
return {};\r
})(),\r
- IS_DEBUG = IS_LOCAL === true || URL_PARAMS.debug === true,\r
+ IS_DEBUG = typeof URL_PARAMS.debug === 'boolean' ? URL_PARAMS.debug : IS_LOCAL === true,\r
jqWindow , jqDocument , jqBody;\r
return {\r
- version: '0.4.1',\r
+ version: '0.4.2',\r
init: function(){\r
jqWindow = $( window);\r
jqDocument = $( document);\r
nodeNoscript = noscript = null;\r
\r
function cleanCommnetNode( _targetElm){\r
- var _elms = ( _targetElm || document).getElementsByTagName( '*'),\r
- _elm,\r
- i = 0;\r
- while( i < _elms.length){\r
- _elm = _elms[ i];\r
- if( _elm.nodeType === 8 && _elm.parentNode){\r
- _elm.parentNode.removeChild( _elm);\r
- } else {\r
- ++i;\r
- }\r
+ _targetElm = _targetElm || document;\r
+ var _nodes = _targetElm.all || _targetElm.getElementsByTagName( '*'),\r
+ _array = [],\r
+ _elm;\r
+ for(var i=0, l = _nodes.length; i<l; ++i){\r
+ _array.push( _nodes[ i]);\r
+ }\r
+ for( i=0; i<l; ++i){\r
+ _elm = _array[ i];\r
+ _elm.nodeType === 8 && _elm.parentNode && _elm.parentNode.removeChild( _elm);\r
}\r
}\r
return {\r
extend: function( baseInstance, extend){\r
for( var key in extend){\r
- baseInstance[ key] = extend[ key];\r
+ if( typeof baseInstance[ key] === 'undefined'){\r
+ baseInstance[ key] = extend[ key];\r
+ } else\r
+ if( typeof baseInstance[ key] === typeof extend[ key]){\r
+ baseInstance[ key] = extend[ key];\r
+ } else {\r
+ alert( 'extend error');\r
+ }\r
}\r
return baseInstance;\r
},\r
}, \r
cleanCommnetNode: cleanCommnetNode,\r
cleanElement: function( _targetElm){\r
- var l = CLEAN_TARGET_ELEMENT.length,\r
- elms, elm, j;\r
- for( var i=0; i<l; ++i){\r
- elms = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);\r
- if( elms.length > 0){\r
- for( j=0; i<elms.length; ++j){\r
- elm = elms[ 0];\r
- elm.parentNode && elm.parentNode.removeChild( elm);\r
- }\r
+ var _nodes, _elm, _array, j, m;\r
+ for( var i=0, l=CLEAN_TARGET_ELEMENT.length; i<l; ++i){\r
+ _nodes = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);\r
+ _array = [];\r
+ for( j=0, m = _nodes.length; j<m; ++j){\r
+ _array.push( _nodes[ j]);\r
+ }\r
+ for( j=0, m = _array.length; j<m; ++j){\r
+ _elm = _nodes[ j];\r
+ _elm.parentNode && _elm.parentNode.removeChild( _elm);\r
}\r
}\r
cleanCommnetNode( _targetElm);\r
if( pettanr.ua.isIE === false) return;\r
- elms = document.getElementsByName( '*');\r
- l = elms.length;\r
- for(i=0; i<l; ++i){\r
- elm = elms[ i];\r
- elm.style.filter = '';\r
- elm.style.behavior = '';\r
+ _nodes = _targetElm.all || _targetElm.getElementsByName( '*');\r
+ for( i=0, l = _nodes.length; i<l; ++i){\r
+ _elm = _nodes[ i];\r
+ _elm.style.filter = '';\r
+ _elm.style.behavior = '';\r
}\r
},\r
getElementSize: function( _elm){\r
IDorELM.id = '';\r
}\r
return IDorELM;\r
+ },\r
+ getElementsByClassName: function( _elm, _className, opt_tagName){\r
+ var _all = !opt_tagName || opt_tagName === '*',\r
+ _nodes = _all === true ? ( _elm.all || _elm.getElementsByTagName( '*')) : _elm.getElementsByTagName( opt_tagName),\r
+ _node, _classes, ret = [];\r
+ for( var i=0, l = _nodes.length; i<l; ++i){\r
+ _node = _nodes[ i];\r
+ if( _node.nodeType === 1){\r
+ _classes = _node.className.split( ' ');\r
+ for( var j=0, m=_classes.length; j<m; ++j){\r
+ if( _classes[ j] === _className){\r
+ ret.push( _node);\r
+ break;\r
+ }\r
+ }\r
+ }\r
+ }\r
+ return ret;\r
+ },\r
+ hasClassName: function( _elm, _className){\r
+ var _classes = _elm.className.split( ' ');\r
+ for( var i=0, l=_classes.length; i<l; ++i){\r
+ if( _classes[ i] === _className) return true;\r
+ }\r
+ return false;\r
+ },\r
+ removeAllChildren: function ( _elm){\r
+ while( _elm.firstChild){\r
+ remove( _elm.firstChild);\r
+ }\r
+ function remove( _node){\r
+ while( _node.firstChild){\r
+ remove( _node.firstChild);\r
+ }\r
+ _node.parentNode && _node.parentNode.removeChild( _node);\r
+ }\r
+ },\r
+ /*\r
+ *
+ */\r
+ createGlobalFunction: function( _func) {\r
+ var randomKey = null;\r
+ while( true) {\r
+ randomKey = '_glovalFunction_' + ( '' + Math.random()).replace( /\./,'');\r
+ if( eval( 'typeof '+randomKey) === 'undefined') {\r
+ break;\r
+ }\r
+ }\r
+ window[ randomKey] = _func;\r
+ return randomKey;\r
}\r
}\r
})();\r
})(),\r
ACTIVEX: ( function(){\r
if( isIE === false || ieVersion > 8) return false;\r
- var className = document.body.className,\r
- test;\r
- if( className && className.indexOf( 'pettanr-ActiveX-enabled') !== -1) return true;\r
- if( className && className.indexOf( 'pettanr-ActiveX-disabled') !== -1) return false;\r
- try {\r
- test = new ActiveXObject('DXImageTransform.Microsoft.gradient');\r
- } catch( e){\r
- return false;\r
+ var b = document.body,\r
+ c = b.className || '',\r
+ x,\r
+ ret = pettanr.URL_PARAMS.ActiveX;\r
+ if( ret === undefined){\r
+ if( pettanr.util.hasClassName( b, 'pettanr-ActiveX-enabled') === true) return true;\r
+ if( pettanr.util.hasClassName( b, 'pettanr-ActiveX-disabled') === true) return false;\r
+ x = document.createElement('div');\r
+ b.appendChild(x);\r
+ x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
+ ret = x.offsetHeight > 1;\r
+ b.removeChild(x);\r
}\r
- return !!test;\r
+ b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', ret === true ? 'enabled' : 'disabled'].join( '');\r
+ return ret;\r
})(),\r
VML: VML,\r
STANDALONE: isStandAloneMode,\r
LoginUserNavi = ( function(){\r
return {\r
show: function(){\r
- var index = ( function( a){\r
- var node = a.parentNode.getElementsByTagName( 'a'),\r
- l = node.length;\r
- for( var i=0; i<l; ++i){\r
- if( node[ i] === a) return i\r
+ var _nodes = this.parentNode.getElementsByTagName( 'a');\r
+ for( var i=0, l=_nodes.length; i<l; ++i){\r
+ if( _nodes[ i] === this){\r
+ pettanr.view.show( i);\r
+ break;\r
}\r
- return -1;\r
- })( this);\r
- if( index === -1) return false;\r
- \r
- pettanr.view.show( index);\r
+ }\r
return false;\r
},\r
hide: function(){}\r
}\r
})();\r
- \r
- var elmDl = document.getElementById( 'useragent'),\r
- elmDt, elmDd,\r
- data = {\r
- ua: navigator.userAgent,\r
- platform: navigator.platform,\r
- appVersion: navigator.appVersion,\r
- appCodeName:navigator.appCodeName,\r
- appName: navigator.appName,\r
- language: navigator.browserLanguage || navigator.language\r
- },\r
- ua = pettanr.ua;\r
- if( ua.IE){\r
- //data.ua = 'Internet Explorer';\r
- data.version = ua.IE;\r
- if( ua.ieVersion >= 8) data.RenderingVersion = ua.ieRenderingVersion;\r
- data.browserType = ua.STANDALONE === true ? 'Standalone' : 'bundle';\r
- if( ua.ieVersion < 9) {\r
- data.vml = ua.VML;\r
- } else {\r
- data.svg = ua.SVG;\r
+ if( pettanr.DEBUG === true){\r
+ var elmDl = document.getElementById( 'useragent'),\r
+ elmDt, elmDd,\r
+ data = {\r
+ pettanR: pettanr.version,\r
+ ua: navigator.userAgent,\r
+ platform: navigator.platform,\r
+ appVersion: navigator.appVersion,\r
+ appCodeName:navigator.appCodeName,\r
+ appName: navigator.appName,\r
+ language: navigator.browserLanguage || navigator.language,\r
+ ActiveX: pettanr.ua.ACTIVEX\r
+ },\r
+ ua = pettanr.ua;\r
+ if( ua.IE){\r
+ //data.ua = 'Internet Explorer';\r
+ data.version = ua.IE;\r
+ if( ua.ieVersion >= 8) data.RenderingVersion = ua.ieRenderingVersion;\r
+ data.browserType = ua.STANDALONE === true ? 'Standalone' : 'bundle';\r
+ if( ua.ieVersion < 9) {\r
+ data.vml = ua.VML;\r
+ } else {\r
+ data.svg = ua.SVG;\r
+ }\r
+ }\r
+ data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';\r
+ \r
+ for( var key in data){\r
+ elmDt = document.createElement( 'dt');\r
+ elmDt.innerHTML = key;\r
+ elmDd = document.createElement( 'dd');\r
+ elmDd.innerHTML = '' + data[ key];\r
+ if( !data[ key]) elmDd.style.color = 'red';\r
+ elmDl.appendChild( elmDt);\r
+ elmDl.appendChild( elmDd);\r
+ }\r
+ } else {\r
+ var _debug = document.getElementById( 'debug');\r
+ if( _debug){\r
+ pettanr.util.removeAllChildren( _debug);\r
+ _debug.parentNode.removeChild( _debug);\r
}\r
- }\r
- data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';\r
- \r
- for( var key in data){\r
- elmDt = document.createElement( 'dt');\r
- elmDt.innerHTML = key;\r
- elmDd = document.createElement( 'dd');\r
- elmDd.innerHTML = '' + data[ key];\r
- if( !data[ key]) elmDd.style.color = 'red';\r
- elmDl.appendChild( elmDt);\r
- elmDl.appendChild( elmDd);\r
}\r
}\r
\r
origin = document.createElement('a'),\r
items = ( function(){\r
var ret = ['Home', 'Comic list', 'Picture', 'Setting'];\r
- if( pettanr.DEBUG === true) {\r
- ret.push( 'debug');\r
- navi.style.width = '400px';\r
- } \r
+ pettanr.DEBUG === true && ret.push( 'debug');\r
return ret;\r
})(),\r
l = items.length,\r
item.onclick = LoginUserNavi.show;\r
navi.appendChild( item);\r
}\r
+ navi.style.width = ( item.offsetWidth * l) +'px';\r
location = origin = item = null;\r
\r
/* debug info */\r
* KEY\r
* \r
* - EDITABLE_TEXT_CONTROL\r
- * - EditableTextClass\r
- * .update: function,\r
- * .show: function,\r
- * .hide: function,\r
- * .start: function,\r
- * .finish: finish,\r
- * .enabled: function,\r
- * .index: function,\r
- * .instance: function\r
* \r
* .SHIFT_DOWN_EVENT: 'shiftDown',\r
* .SHIFT_UP_EVENT: 'shiftUp',\r
* .SPACE_DOWN_EVENT: 'spaceDown',\r
* .SPACE_UP_EVENT: 'spaceUp',\r
* .init: function,\r
- * .addKeyDownEvent: function,\r
+ * .addKeyDownEvent: function,\r
* .keyEventDispatcher: function,\r
- * .createEditableText: function,\r
* \r
* ショートカットキーの監視とテキスト入力(input, textarea)、チェックボックスを管理する。\r
* キー入力はdocumentで受けて、テキスト編集中(input, textarea)はそちらにキーイベント流す。\r
shiftEnabled = false,\r
ctrlEnabled = false;\r
\r
- var EDITABLE_TEXT_CONTROL = ( function(){\r
- var EDITABLE_TEXT_TABLE = {},\r
- currentText = null;\r
-\r
- var EditableTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
- var ELM = WRAPPER_ELM.children( '.editable-value').eq( 0),\r
- value = ELM.html(),\r
- jqInput,\r
- index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,\r
- instance,\r
- enabled = true,\r
- A = $( '<a href="#"></a>').html( value).click( function(e){\r
- instance = instance || EDITABLE_TEXT_TABLE[ GROUP_ID][ index];\r
- EDITABLE_TEXT_CONTROL.start( instance); \r
- A.hide();\r
- jqInput = $( '<input type="text"/>').val( value);\r
- ELM.append( jqInput);\r
- jqInput.focus().select();\r
- e.preventDefault();\r
- return false;\r
- });\r
- ELM.addClass( 'editable-text').html( A);\r
- \r
- return {\r
- update: function( _value){\r
- value = _value !== undefined ? _value : value;\r
- A.html( value);\r
- jqInput && jqInput.val( value);\r
- currentText === instance && this.finish();\r
- },\r
- show: function(){\r
- enabled === false && WRAPPER_ELM.show();\r
- enabled= true;\r
- },\r
- hide: function(){\r
- enabled === true && WRAPPER_ELM.hide();\r
- enabled = false;\r
- },\r
- start: function(){\r
- !jqInput && A.click();\r
- },\r
- finish: function( keep){\r
- var _newValue = keep === true ? value : jqInput.val();\r
- A.html( _newValue).show();\r
- jqInput.remove();\r
- jqInput = null;\r
- ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);\r
- EDITABLE_TEXT_CONTROL.finish( instance); \r
- },\r
- enabled: function(){\r
- return enabled;\r
- },\r
- index : index,\r
- groupID: GROUP_ID\r
- }\r
- }\r
- var CheckboxClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
- var ELM = WRAPPER_ELM.children( '.checkbox-value').eq( 0),\r
- value = ELM.html(),\r
- jqInput,\r
- index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,\r
- instance,\r
- enabled = true,\r
- A = $( '<a href="#" onclick="return false;"></a>').html( value).click( function(e){\r
- instance = instance || EDITABLE_TEXT_TABLE[ GROUP_ID][ index];\r
- EDITABLE_TEXT_CONTROL.start( instance); \r
- A.hide();\r
- jqInput = $( '<input type="text"/>').val( value);\r
- ELM.append( jqInput);\r
- jqInput.focus().select();\r
- e.preventDefault();\r
- return false;\r
- });\r
- ELM.addClass( 'editable-text').html( A);\r
- \r
- function finish(keep){\r
- if(keep === true){\r
-\r
- } else {\r
- _finish( jqInput.val());\r
- }\r
- function _finish( VALUE_NEW){\r
- value = VALUE_NEW;\r
- A.html( VALUE_NEW).show();\r
- jqInput.remove();\r
- jqInput = null;\r
- ON_UPDATE_FUNCTION && VALUE_NEW !== value && ON_UPDATE_FUNCTION( VALUE_NEW, value);\r
- EDITABLE_TEXT_CONTROL.finish( instance);\r
- }\r
- }\r
- return {\r
- update: function( _value){\r
- value = _value !== undefined ? _value : value;\r
- A.html( value);\r
- jqInput && jqInput.val( value);\r
- currentText === instance && finish();\r
- },\r
- show: function(){\r
- enabled === false && WRAPPER_ELM.show();\r
- enabled= true;\r
- },\r
- hide: function(){\r
- enabled === true && WRAPPER_ELM.hide();\r
- enabled = false;\r
- },\r
- start: function(){\r
- !jqInput && A.click();\r
- },\r
- finish: finish,\r
- enabled: function(){\r
- return enabled;\r
- },\r
- groupID: GROUP_ID\r
- }\r
- }\r
- return {\r
- createEditableText: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
- if( GROUP_ID && !EDITABLE_TEXT_TABLE[ GROUP_ID]) EDITABLE_TEXT_TABLE[ GROUP_ID] = [];\r
- var ret = EditableTextClass.apply( {}, [ ELM, ON_UPDATE_FUNCTION, GROUP_ID]);\r
- GROUP_ID && EDITABLE_TEXT_TABLE[ GROUP_ID].push( ret);\r
- return ret;\r
- },\r
- createCheckbox: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){\r
- \r
- },\r
- start: function( _currentText){\r
- currentText !== _currentText && currentText && currentText.finish();\r
- currentText = _currentText;\r
- },\r
- finish: function( _currentText){\r
- if( currentText !== _currentText) return;\r
- currentText = null \r
- },\r
- keyEventRellay: function( e){\r
- if( e.type === 'keyup') return false;\r
- if( currentText === null) return false;\r
- \r
- var keyCode = e.keyCode;\r
- if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt\r
- var _groupID = currentText.groupID,\r
- _index = currentText.index;\r
- currentText.finish( keyCode === 27);\r
- keyCode === 9 && _groupID && EDITABLE_TEXT_CONTROL.tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);\r
- keyCode === 13 && _groupID && EDITABLE_TEXT_CONTROL.tabShift( _groupID, _index, 1);\r
- }\r
- return true;\r
- },\r
- tabShift: function( _groupID, _index, _way){\r
- var GROUP_ARRAY = EDITABLE_TEXT_TABLE[ _groupID] || [],\r
- l = GROUP_ARRAY.length,\r
- i = _index +_way;\r
- if( l < 2) return;\r
- while( i !== _index){\r
- i = i < 0 ?\r
- l -1 :\r
- i === l ? 0 : i; // 0 < i < l\r
- if( GROUP_ARRAY[ i].enabled() === true) break;\r
- i += _way;\r
- }\r
- if( i === _index) return;\r
- setTimeout( function(){ GROUP_ARRAY[ i].start();}, 0);\r
- }\r
- }\r
- })();\r
- \r
function keyHit( e){\r
log.html( [ e.keyCode, e.shiftKey, e.ctrlKey, e.altKey, e.type].join( ','));\r
//keyOperationChatcher.val( '');\r
overlayEnabled = pettanr.overlay.visible === true,\r
currentViewID = overlayEnabled === true ? pettanr.overlay.currentID : pettanr.view.currentID;\r
if( callback === 'keypress') callback = 'keydown';\r
- if( EDITABLE_TEXT_CONTROL.keyEventRellay( e) === false){\r
+ if( pettanr.form.keyEventRellay( e) === false){\r
var shift = e.shiftKey,\r
ctrl = e.ctrlKey,\r
l = KEYEVENT_ARRAY.length,\r
keyEventDispatcher: function(){\r
return keyOperationChatcher;\r
},\r
- createEditableText: EDITABLE_TEXT_CONTROL.createEditableText,\r
- createCheckbox: EDITABLE_TEXT_CONTROL.createCheckbox,\r
shiftEnabled: function(){\r
return shiftEnabled;\r
},\r
var FORM_GROUP_TABLE = {},\r
currentID = null,\r
currentItem = null,\r
- ELM_INPUT_TEXT = document.createElement( 'input');\r
- ELM_INPUT_TEXT.type = 'text';\r
+ ELM_A_ORIGIN = ( function(){\r
+ var ret = document.createElement( 'a');\r
+ ret.href = '#';\r
+ return ret;\r
+ })(),\r
+ ELM_INPUT_TEXT = ( function(){\r
+ var ret = document.createElement( 'input');\r
+ ret.type = 'text';\r
+ return ret;\r
+ })();\r
\r
var InputTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater){\r
validater = typeof validater === 'function' ? validater : null;\r
\r
- var elmValue,\r
+ var elmValue = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'editable-value')[ 0],\r
value,\r
- index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,\r
+ index = GROUP_ID ? FORM_GROUP_TABLE[ GROUP_ID].length : -1,\r
instance,\r
focus = false,\r
visible = true,\r
enabled = true,\r
- elmA;\r
- var _nodes = WRAPPER_ELM.getElementsByTagName('*'),\r
- l = nodes.length,\r
- _elm;\r
- for(var i=0; i<l; ++i){\r
- _elm = _nodes[ i];\r
- if( _elm.nodeType === 1 && _elm.className.indexof('editable-value') !== -1){\r
- elmValue = _elm;\r
- }\r
- }\r
+ elmA = ELM_A_ORIGIN.cloneNode( true);\r
+ \r
if( elmValue === undefined){\r
alert( 'error!');\r
}\r
value = elmValue.innerHTML;\r
+ elmValue.innerHTML = '';\r
elmValue.className += ' editable-text';\r
\r
- elmA = elmAOrigin.cloneNode( true);\r
+ elmA.innerHTML = value;\r
elmValue.appendChild( elmA);\r
- elmA.onclick = onClick;\r
+ WRAPPER_ELM.onclick = onClick;\r
\r
- function onClick(){\r
+ function onClick( e){\r
+ focus = true;\r
start( instance);\r
elmA.style.display = 'none';\r
elmValue.appendChild( ELM_INPUT_TEXT);\r
ELM_INPUT_TEXT.value = value;\r
ELM_INPUT_TEXT.focus();\r
ELM_INPUT_TEXT.select();\r
+ e && e.preventDefault();\r
return false;\r
}\r
\r
delete this.init;\r
},\r
update: function( _value){\r
- value = _value !== undefined ? _value : value;\r
- //A.html( value);\r
- //jqInput && jqInput.val( value);\r
- currentText === instance && this.finish();\r
+ if( _value !== undefined){\r
+ elmA.innerHTML = _value;\r
+ value = _value;\r
+ \r
+ if( focus === true){\r
+ ELM_INPUT_TEXT.value = value;\r
+ }\r
+ }\r
+ currentItem === instance && this.finish();\r
},\r
start: function(){\r
onClick();\r
elmA.style.display = 'block';\r
\r
ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);\r
- finish( instance); \r
+ finish( instance);\r
+ \r
+ focus = false;\r
},\r
enabled: function(){\r
return enabled;\r
},\r
+ visible: function( _visible){\r
+ if( _visible === true){\r
+ WRAPPER_ELM.style.display = '';\r
+ visible = true;\r
+ } else\r
+ if( _visible === false){\r
+ WRAPPER_ELM.style.display = 'none';\r
+ visible = false;\r
+ }\r
+ return visible;\r
+ },\r
index : index,\r
groupID: GROUP_ID\r
}\r
if( currentItem !== _currentItem) return;\r
currentItem = null;\r
}\r
- function keyEventRellay( e){\r
- if( e.type === 'keyup') return false;\r
- if( currentItem === null) return false;\r
- \r
- var keyCode = e.keyCode;\r
- if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt\r
- var _groupID = currentItem.groupID,\r
- _index = currentItem.index;\r
- currentItem.finish( keyCode === 27);\r
- keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);\r
- keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);\r
- }\r
- return true;\r
- }\r
+\r
function tabShift( _groupID, _index, _way){\r
- var GROUP_ARRAY = EDITABLE_TEXT_TABLE[ _groupID] || [],\r
+ var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID] || [],\r
l = GROUP_ARRAY.length,\r
i = _index +_way;\r
if( l < 2) return;\r
i = i < 0 ?\r
l -1 :\r
i === l ? 0 : i; // 0 < i < l\r
- if( GROUP_ARRAY[ i].enabled() === true) break;\r
+ if( GROUP_ARRAY[ i].enabled() === true && GROUP_ARRAY[ i].visible() === true) break;\r
i += _way;\r
}\r
if( i === _index) return;\r
focus: function(){\r
return currentItem !== null; \r
},\r
+ keyEventRellay: function( e){\r
+ if( e.type === 'keyup') return false;\r
+ if( currentItem === null) return false;\r
+ \r
+ var keyCode = e.keyCode;\r
+ if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt\r
+ var _groupID = currentItem.groupID,\r
+ _index = currentItem.index;\r
+ currentItem.finish( keyCode === 27);\r
+ keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);\r
+ keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);\r
+ }\r
+ return true;\r
+ },\r
createInputText: function( _elm, _onUpdate, _groupID, _validater){\r
- if( _groupID && !FORM_GROUP_TABLE[ _groupID]){\r
+ if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
FORM_GROUP_TABLE[ _groupID] = [];\r
}\r
var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater);\r
createCheckBox: function(){\r
\r
},\r
+ createRadio: function(){\r
+ \r
+ },\r
createButton: function(){\r
\r
},\r
function balloonUrlBuilder( _a){\r
var d = 360 /NUM_BALLOON_IMAGE;\r
_a += 90 +d /2;\r
- return [ 'system_picture\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');\r
+ return [ 'system_pictures\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');\r
}\r
return {\r
elm: balloonElm,\r
UPDATE_POLICY__O___ = 0x01000,// l: lisence manager
UPDATE_POLICY_S____ = 0x10000,
UPDATE_POLICY______ = 0x00000,
- FILEDATA_RESITER = [],
+ FILEDATA_RESITER = [], // store all of fileData( json object )
FILEDATA_HAS_domainID_RESISTER = {},
- FILEDATA_ACCESS = [],
+ FILEDATA_ACCESS = [], // file operations for Kernel only ! hide from Out of pettanr.file
FILE_OBJECT_POOL = [];
var REQUEST_CONTROLER = ( function(){
_uid = UIDorFILEorFILEDATA.getUID();
_data = FILEDATA_RESITER[ _uid] || null;
} else {
- _data = UIDorFILEorFILEDATA;
+ _data = UIDorFILEorFILEDATA || null;
}
if( _data === null || !_data) return null;
}
function getChildren( UIDorFILE){
var _access = getFileDataAccess( UIDorFILE);
- return _access !== null ? _access.CHILDREN : null
+ return _access !== null ? _access.DATA.CHILDREN : null
}
function onLoadJson( _file, _json){
var _access = getFileDataAccess( _file),
{
TYPE: TYPE,
DATA: data,
- CHILDREN: CHILDREN,
destroy: destroy,
updateParent: updateParent,
fileEventChatcher: dispatchEvent
},
getChildFileIndex: function( _FILEorFILEDATA){
if( !CHILDREN || typeof CHILDREN.length !== 'number') return -1;
- var l = FILEDATA_RESITER.length,
- _fileData = null;
- for( var i=0; i<l; ++i){
- if( _FILEorFILEDATA === FILEDATA_RESITER[ i]){
- _fileData = _FILEorFILEDATA;
- break;
- };
- }
- if( _fileData === null){
+ var l = CHILDREN.length,
_fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA);
- }
if( _fileData === null) return -1;
-
- l = CHILDREN.length
- for( var i=0; i<l; ++i){
+ for(var i=0; i<l; ++i){
if( CHILDREN[ i] === _fileData) return i;
}
return -1;
var _rootFile;
if( _treeType === TREE_TYPE_IS_COMIC) _rootFile = COMIC_FILEDATA;
if( _treeType === TREE_TYPE_IS_IMAGE) _rootFile = IMAGE_FILEDATA;
- if( _rootFile === undefined) return;
+ if( !_rootFile) return null;
return FILE_CONTROLER.createTree( _rootFile);
},
TREE_TYPE_IS_COMIC: 1,
var FinderIconClass = function(){
var elmContainer,
ELM_WRAPPER = ELM_ORIGIN_FINDER_ICON.cloneNode( true),
- ELM_THUMBNAIL = ELM_WRAPPER.getElementsByTagName( 'div')[0],
- ELM_FILENAME = ELM_WRAPPER.getElementsByTagName( 'div')[1],
+ ELM_THUMBNAIL = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-thumbnail', 'div')[0],
+ ELM_FILENAME = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-filename', 'div')[0],
file, w, index, style, instansce, callback;
ELM_WRAPPER.onclick = onClick;
callback( index);
}
-
function draw(){
var _thumb = file.getThumbnail();
if( _thumb !== null){
collect: function(){
elmContainer.removeChild( ELM_WRAPPER);
file = elmContainer = null;
- FINDER_ICON_POOL.push( this);
+ FINDER_ICON_POOL.push( instansce);
}
}
}
COMIC_ELEMENT_ARRAY = [],\r
ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
MIN_PANEL_HEIGHT = 20,\r
- MIN_OBJECT_SIZE = 19,\r
+ MIN_ELEMENT_SIZE = 19,\r
MOUSE_HIT_AREA = 10,\r
jqMouseEventChacher,\r
jqEditor,\r
a.href = '#';\r
return ret;\r
})(),\r
- EMPTY_FUNCTION = new Function,\r
ITEM_ARRAY = [],\r
barH = pettanr.util.getElementSize( ELM_BAR).height,\r
itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,\r
}\r
}\r
\r
- var MenuBarItemClass = function( title, opt_callbackArray){\r
+ var MenuBarItemClass = function( title){\r
var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),\r
ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],\r
ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],\r
INDEX = ITEM_ARRAY.length,\r
- SELECTION_CALLBACK_ARRAY = opt_callbackArray || [],\r
+ SELECTION_CALLBACK_ARRAY = [],\r
numSelection = 0,\r
visible = false;\r
ELM_TITLE.innerHTML = title;\r
}\r
return -1;\r
})();\r
- i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]();\r
+ i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);\r
e.stopPropagation();\r
- return false; \r
+ return false;\r
}\r
return {\r
elm: ELM_WRAPPER,\r
\r
\r
function createMenubarItem( title){\r
- var _item = MenuBarItemClass.apply( {}, [ title]);\r
+ var _item = new MenuBarItemClass( title);\r
ITEM_ARRAY.push( _item);\r
return _item;\r
}\r
\r
delete MENU_BAR_CONTROL.init;\r
},\r
+ open: function(){\r
+ MENU_BAR_CONTROL.init && MENU_BAR_CONTROL.init();\r
+ // ELM_BAR.style.top = ( -barH) +'px';\r
+ // anime\r
+ },\r
+ close: function(){\r
+ var l = ITEM_ARRAY.length;\r
+ for( var i=0; i<l; ++i){\r
+ ITEM_ARRAY[ i].hide();\r
+ }\r
+ },\r
h: barH,\r
onMouseMove: function( _mouseX, _mouseY){\r
if( barH >= _mouseY){\r
MENUBAR_BACK.visible( true);\r
SAVE_CONTROL.panelUpdated( true);\r
}\r
+ function destroyStack( _stack, _destroy){\r
+ _stack.fn = null;\r
+ \r
+ var _argBack = _stack.argBack,\r
+ _argForword = _stack.argForword,\r
+ _value;\r
+ if( typeof _argBack.length === 'number'){ // isArray\r
+ while( _argBack.length > 0){\r
+ _value = _argBack.shift();\r
+ _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
+ }\r
+ }\r
+ if( typeof _argForword.length === 'number'){\r
+ while( _argForword.length > 0){\r
+ _value = _argForword.shift();\r
+ _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
+ } \r
+ } \r
+ }\r
return {\r
init: function(){\r
log = $( '#history-log');\r
delete HISTORY.init;\r
},\r
- saveState: function( _function, _argBack, _argForword, _destory) {\r
+ open: function(){\r
+ HISTORY.init && HISTORY.init();\r
+ },\r
+ close: function(){\r
+ MENUBAR_BACK.visible( false);\r
+ MENUBAR_FORWARD.visible( false);\r
+ while( STACK_BACK.length > 0){\r
+ destroyStack( STACK_BACK.shift(), true);\r
+ }\r
+ while( STACK_FORWARD.length > 0){\r
+ destroyStack( STACK_FORWARD.shift(), true);\r
+ }\r
+ },\r
+ saveState: function( _function, _argBack, _argForword, _destroy) {\r
STACK_BACK.push( {\r
fn: _function,\r
argBack: _argBack,\r
});\r
MENUBAR_BACK.visible( true);\r
SAVE_CONTROL.panelUpdated( true);\r
-\r
+ \r
+ var _stack;\r
while( STACK_FORWARD.length > 0){\r
- var _stack = STACK_FORWARD.shift(),\r
- _destroy = _stack.destroy,\r
- _value;\r
- _argBack = _stack.argBack;\r
- _argForword = _stack.argForword;\r
- _stack.fn = null;\r
- if( typeof _argBack === 'array'){\r
- while( _argBack.length > 0){\r
- _value = _argBack.shift();\r
- _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
- }\r
- }\r
- if( typeof _argForword === 'array'){\r
- while( _argForword.length > 0){\r
- _value = _argForword.shift();\r
- _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
- } \r
- }\r
+ _stack = STACK_FORWARD.shift();\r
+ destroyStack( _stack, _stack.destroy);\r
}\r
MENUBAR_FORWARD.visible( false);\r
} \r
* Save Control\r
*/\r
\r
+ var OUTPUT_CONSOLE = ( function(){\r
+ var jqWrap, jqOutputArea,\r
+ ID = 'outputConsole';\r
+ //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
+ \r
+ function close(){\r
+ jqWrap.hide();\r
+ jqOutputArea.val('');\r
+ }\r
+ function clickOK(){\r
+ pettanr.overlay.hide();\r
+ close(); \r
+ }\r
+ return {\r
+ init: function(){\r
+ this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();\r
+ jqOutputArea = $( '#output-area');\r
+ delete OUTPUT_CONSOLE.init;\r
+ },\r
+ jqWrap: null,\r
+ show: function( _text){\r
+ jqWrap.show();\r
+\r
+ \r
+ pettanr.overlay.show( this);\r
+ jqWrap.css(\r
+ {\r
+ left: Math.floor( ( windowW -jqWrap.width()) /2),\r
+ top: Math.floor( ( windowH -jqWrap.height()) /2)\r
+ }\r
+ ); \r
+ \r
+ jqOutputArea.val( _text).focus();\r
+ },\r
+ onWindowResize: function(){\r
+ jqWrap.css(\r
+ {\r
+ left: Math.floor( ( windowW -jqWrap.width()) /2),\r
+ top: Math.floor( ( windowH -jqWrap.height()) /2)\r
+ }\r
+ );\r
+ },\r
+ onClose: close,\r
+ ID: 'textEditor'\r
+ }\r
+ })();\r
+\r
var SAVE_CONTROL = ( function(){\r
var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),\r
SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),\r
SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),\r
SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),\r
+ OUTPUT = MENU_BAR_CONTROL.QUIT.createSelection( 'output', null, onOutputClick, true, false, true),\r
QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),\r
updated = false;\r
\r
function quit(){\r
}\r
\r
+ function onOutputClick(){\r
+ // OUTPUT_CONSOLE.show();\r
+ }\r
+ \r
function outputAsHtml(){\r
- alert( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
+ OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
}\r
function outputAsJsonString(){\r
- alert( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
+ OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
}\r
return {\r
quit: quit,\r
\r
var TEXT_EDITOR_CONTROL = ( function(){\r
var jqWrap, jqTextarea, jqButton,\r
- textElement, onUpdateFunction;\r
- \r
- pettanr.key.addKeyDownEvent( this.ID, 69, false, false, clickOK);\r
+ textElement, onUpdateFunction,\r
+ ID = 'textEditor';\r
+ //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
\r
function close(){\r
jqWrap.hide();\r
textElement && this.show( textElement);\r
},\r
onClose: close,\r
- ID: 'textEditor'\r
+ ID: ID\r
}\r
})();\r
\r
itemW, itemH,\r
jqName, jqButton, buttonW,\r
onUpdateFunction,\r
+ _g_onUpdateFunction,\r
winW,\r
onEnterInterval = null;\r
\r
SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),\r
LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,\r
reversibleImage = null,\r
- onEnterFlag = false;\r
+ onEnterFlag = false,\r
+ imgW, imgH;\r
JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
\r
+ function onImageLoad( url, _imgW, _imgH){\r
+ if( reversibleImage === null) {\r
+ alert( url);\r
+ return;\r
+ }\r
+ imgW = _imgW || data.width || 64;\r
+ imgH = _imgH || data.height || 64;\r
+ JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
+ var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
+ h = Math.floor( imgH *zoom),\r
+ w = Math.floor( imgW *zoom);\r
+ reversibleImage.elm.style.width = w +'px';\r
+ reversibleImage.elm.style.height = h +'px';\r
+ reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
+ reversibleImage.resize( w, h);\r
+ JQ_ICON_WRAP.click( onClick);\r
+ }\r
+ \r
+ function onClick( e){\r
+ pettanr.overlay.hide();\r
+ if (onUpdateFunction) {\r
+ if( LOW_SRC === null){\r
+ onUpdateFunction( SRC, imgW, imgH);\r
+ } else {\r
+ var _onLoad = new Function( [\r
+ 'window["', _g_onUpdateFunction, '"]( arguments[ 0], arguments[ 1], arguments[ 2]);',\r
+ 'window["', _g_onUpdateFunction, '"] = null'\r
+ ].join( '')),\r
+ _onError = new Function( [\r
+ 'window["', _g_onUpdateFunction, '"]( arguments[ 0], ', data.width || 64 ,', ', data.height || 64,');',\r
+ 'window["', _g_onUpdateFunction, '"] = null'\r
+ ].join( ''));\r
+ pettanr.util.loadImage( SRC, _onLoad, _onError);\r
+ /*\r
+ ( function( onUpdate){\r
+ pettanr.util.loadImage( SRC,\r
+ function( _abspath, imgW, imgH){\r
+ onUpdate( SRC, imgW, imgH);\r
+ onUpdate = null;\r
+ },\r
+ function( _abspath){\r
+ onUpdate( SRC, data.width || 64, data.height || 64);\r
+ onUpdate = null;\r
+ }\r
+ ); \r
+ })( onUpdateFunction);*/ // close()で値が消えるので、クロージャに保持\r
+ }\r
+ }\r
+ close();\r
+ }\r
+ \r
return {\r
onEnter: function(){\r
if( onEnterFlag === true) return;\r
- reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, function( url, imgW, imgH){\r
- if( reversibleImage === null) {\r
- alert( url);\r
- return;\r
- }\r
- /*\r
- * ieでサイズが取れない、、、\r
- */\r
- imgW = imgW || data.width || 64;\r
- imgH = imgH || data.height || 64;\r
- JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
- var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
- h = Math.floor( imgH *zoom),\r
- w = Math.floor( imgW *zoom);\r
- reversibleImage.elm.style.width = w +'px';\r
- reversibleImage.elm.style.height = h +'px';\r
- reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
- reversibleImage.resize( w, h);\r
- JQ_ICON_WRAP.click( function( e){\r
- pettanr.overlay.hide();\r
- if (onUpdateFunction) {\r
- if( LOW_SRC === null){\r
- onUpdateFunction( SRC, imgW, imgH);\r
- } else {\r
- ( function( onUpdate){\r
- pettanr.util.loadImage( SRC,\r
- function( _abspath, imgW, imgH){\r
- onUpdate( SRC, imgW, imgH);\r
- onUpdate = null;\r
- },\r
- function( _abspath){\r
- onUpdate( SRC, data.width || 64, data.height || 64);\r
- onUpdate = null;\r
- }\r
- ); \r
- })( onUpdateFunction); // close()で値が消えるので、クロージャに保持\r
- }\r
- }\r
- close();\r
- });\r
- });\r
+ reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);\r
JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
- onEnterFlag = true; \r
+ onEnterFlag = true; \r
},\r
destroy: function(){\r
reversibleImage && reversibleImage.destroy();\r
// onUpdateFunction && onUpdateFunction( textElement);\r
close();\r
}\r
+ function onMouseWheel( e, delta){\r
+ if( winW < containerW){\r
+ wrapX += delta *WHEEL_DELTA;\r
+ wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
+ jqContainer.css( { left: wrapX});\r
+ \r
+ onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
+ onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
+ }\r
+ //e.stopPropagation();\r
+ return false; \r
+ }\r
return {\r
init: function(){\r
this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
- jqContainer = $( '#image-icon-container').mousewheel(\r
- function( e, delta){\r
- if( winW < containerW){\r
- wrapX += delta *WHEEL_DELTA;\r
- wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
- jqContainer.css( { left: wrapX});\r
- \r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
- }\r
- //e.stopPropagation();\r
- return false;\r
- });\r
+ jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);\r
containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;\r
jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));\r
jqWrap: null,\r
show: function( _onUpdateFunction){\r
onUpdateFunction = _onUpdateFunction;\r
+ if( onUpdateFunction){\r
+ _g_onUpdateFunction = pettanr.util.createGlobalFunction( onUpdateFunction);\r
+ }\r
pettanr.overlay.show( this);\r
\r
var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],\r
} else {\r
jqWrapper.find( '.window-footer').remove();\r
}\r
- update( x, y, w, h);\r
+ this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH);\r
\r
- this.onFirstOpen && this.onFirstOpen();\r
+ update( x, y, w, h);\r
\r
delete this.firstOpen;\r
},\r
}\r
}\r
},\r
+ onFadeIn: function(){\r
+ instance.firstOpen && instance.firstOpen();\r
+ instance.onOpen && setTimeout( callOnOpen, 0);\r
+ function callOnOpen(){\r
+ instance.onOpen( w, bodyH);\r
+ }\r
+ },\r
+ onFadeOut: function(){\r
+ var elmWrapper = jqWrapper.get(0);\r
+ elmWrapper.parentNode.removeChild( elmWrapper);\r
+ instance.onClose && setTimeout( instance.onClose, 0);\r
+ },\r
close: function(){\r
if( visible === false) return;\r
instance.visible = visible = false;\r
- instance.onClose && setTimeout( instance.onClose, 0);\r
- closeWindow( instance);\r
+ jqWrapper.fadeOut( instance.onFadeOut);\r
MENUBAR_SELWCTION.title( 'show ' +title);\r
},\r
bodyBackOrForward: bodyBackOrForward,\r
\r
if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){\r
- this.close();\r
+ instance.close();\r
return;\r
}\r
\r
if( _window.visible !== true) return;\r
var _jqWindow = _window.$;\r
jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない．\r
- _jqWindow.fadeIn(\r
- function(){\r
- _window.firstOpen && _window.firstOpen();\r
- _window.onOpen && setTimeout( _window.onOpen, 0);\r
- }\r
- );\r
+ _jqWindow.fadeIn( _window.onFadeIn);\r
return;\r
}\r
- function closeWindow( _window){\r
- if( _window.visible !== false) return;\r
- var l = WINDOW_ARRAY.length;\r
- for( var i=0; i<l; ++i){\r
- if( WINDOW_ARRAY[ i] === _window){\r
- //WINDOW_ARRAY.splice( i, 1);\r
- //WINDOW_ARRAY.push( _window);\r
- _window.$.stop().fadeOut( function(){\r
- this.parentNode.removeChild( this);\r
- });\r
- return;\r
- }\r
- }\r
- }\r
\r
return {\r
init: function(){\r
instance = this;\r
delete this.onInit;\r
},\r
- onFirstOpen: function(){\r
+ onFirstOpen: function( _w, _h){\r
finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE);\r
delete this.onFirstOpen;\r
},\r
- onOpen: function(){\r
- finder.onOpen();\r
+ onOpen: function( _w, _h){\r
+ finder.onOpen( _w, _h);\r
},\r
onResize: function( _w, _h){\r
finder.onWindowResize( _w, _h);\r
* INFOMATION_WINDOW\r
*/ \r
var INFOMATION_WINDOW = ( function(){\r
- var FADE_EFFECT_ENABLED = pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,\r
+ var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,\r
FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',\r
FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',\r
backgroundInfomationElm,\r
jqComicElementInformation,\r
- elmValueX, elmValueY, elmValueZ, elmValueA, elmValueW, elmValueH, elmAspect,\r
- elmPercentW, elmPercentH,\r
+ inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,\r
+ inputPercentW, inputPercentH,\r
currentComicElement = null,\r
- currentElementType = -1;\r
+ currentElementType = -1,\r
+ currentLock = false;\r
\r
return WINDOWS_CONTROL.createWindow(\r
this,\r
{\r
- onFirstOpen: function(){\r
+ onFirstOpen: function( _w, _h){\r
backgroundInfomationElm = $( '#panel-background-information');\r
\r
jqComicElementInformation = $( '#comic-element-infomation').hide().css( {\r
- height: this.bodyHeight()\r
+ height: _h\r
});\r
var TAB_GROUP_ID = 'comic-element-attribute';\r
- var CREATER = pettanr.key.createEditableText;\r
- elmValueX = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID);\r
- elmValueY = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID);\r
- elmValueZ = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID);\r
- elmValueA = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID);\r
- elmValueW = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID);\r
- elmValueH = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);\r
- elmPercentW = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);\r
- elmPercentH = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);\r
- elmAspect = $( '#comic-element-keep-aspect');\r
+ var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
+ inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID);\r
+ inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID);\r
+ inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID);\r
+ inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID);\r
+ inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID);\r
+ inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID);\r
+ inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID);\r
+ inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID);\r
+ inputAspectRatio = $( '#comic-element-keep-aspect');\r
delete this.onFirstOpen;\r
},\r
- onResize: function( w, h){\r
- jqComicElementInformation && jqComicElementInformation.css( {\r
- height: h\r
+ onResize: function( _w, _h){\r
+ jqComicElementInformation.css( {\r
+ height: _h\r
});\r
},\r
- update: function( _elementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){\r
- if( !backgroundInfomationElm) return; // なぜか !backgroundInfomationElm が必要\r
+ update: function( currentElement){\r
+ \r
+ if( currentLock === true && currentElement === null) return;\r
+ \r
+ var _elementType = currentElement === null ? -1 : currentElement.type,\r
+ x = currentElement !== null ? currentElement.x : 0,\r
+ y = currentElement !== null ? currentElement.y : 0,\r
+ z = currentElement !== null ? currentElement.z : 0,\r
+ a = _elementType === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,\r
+ w = currentElement !== null ? currentElement.w : 0,\r
+ h = currentElement !== null ? currentElement.h : 0,\r
+ actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,\r
+ actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,\r
+ wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,\r
+ hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,\r
+ keepAspect = currentElement !== null && currentElement.keepAspect === true;\r
+ \r
if( currentElementType !== _elementType){\r
if( _elementType !== -1){\r
if( _elementType === 1){\r
- elmValueA.show();\r
- elmPercentW.hide();\r
- elmPercentH.hide();\r
- elmAspect.hide();\r
+ inputA.visible( true);\r
+ inputPercentW.visible( false);\r
+ inputPercentH.visible( false);\r
+ inputAspectRatio.hide();\r
} else {\r
- elmValueA.hide();\r
- elmPercentW.show();\r
- elmPercentH.show();\r
- elmAspect.show();\r
+ inputA.visible( false);\r
+ inputPercentW.visible( true);\r
+ inputPercentH.visible( true);\r
+ inputAspectRatio.show();\r
}\r
currentElementType === -1 && jqComicElementInformation.stop().css( {\r
filter: '',\r
currentElementType = _elementType;\r
}\r
if( currentElementType !== -1){\r
- elmValueX.update( x);\r
- elmValueY.update( y);\r
- elmValueZ.update( z);\r
- _elementType === 1 && elmValueA.update( a);\r
- elmValueW.update( w);\r
- elmValueH.update( h);\r
- _elementType === 0 && elmPercentW.update( wPercent);\r
- _elementType === 0 && elmPercentH.update( hPercent); \r
+ inputX.update( x);\r
+ inputY.update( y);\r
+ inputZ.update( z);\r
+ _elementType === 1 && inputA.update( a);\r
+ inputW.update( w);\r
+ inputH.update( h);\r
+ _elementType === 0 && inputPercentW.update( wPercent);\r
+ _elementType === 0 && inputPercentH.update( hPercent); \r
} else {\r
\r
}\r
+ },\r
+ lock: function( _currentLock){\r
+ currentLock = !!_currentLock;\r
+ this.bodyBackOrForward( !currentLock);\r
}\r
},\r
'infomation-window', 'Infomation', 0, 30, 200, 180, true\r
*/\r
var HELP_DOCUMENTS_WINDOW = ( function(){\r
var visible = true,\r
- hasAjaxContents = false,\r
jqAjaxContents,\r
jqNaviItems,\r
jqPages,\r
+ currentPageIndex = 0,\r
HELP = MENU_BAR_CONTROL.HELP,\r
onLoadFunction = HELP.createAjaxSelection( onFirstOpen),\r
instance;\r
function jumpPage( _index){\r
\r
}\r
+ function onSelectionClick( _pageIndex){\r
+ currentPageIndex = _pageIndex || currentPageIndex;\r
+ HELP_DOCUMENTS_WINDOW.open();\r
+ onOpen();\r
+ }\r
+ function onOpen(){\r
+ jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');\r
+ jqPages.hide().eq( currentPageIndex).show();\r
+ }\r
function onFirstOpen( _pageIndex){\r
- _pageIndex = _pageIndex || 0;\r
- if( hasAjaxContents === false){\r
+ currentPageIndex = _pageIndex || currentPageIndex;\r
+ if( onHelpLoad !== null){\r
$.ajax({\r
url: 'help/jp.xml',\r
dataType: 'xml',\r
- success: function( _xml){\r
- var jqXML = $( _xml),\r
- helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),\r
- elmNavi = document.createElement( 'div'),\r
- elmItemOrigin = document.createElement( 'a'),\r
- elmPages = document.createElement( 'div'),\r
- elmPageOrigin = document.createElement( 'div'),\r
- elmTitleOrigin = document.createElement( 'h2'),\r
- elmPage,\r
- numPage = 0;\r
- elmNavi.className = 'sidenavi';\r
- elmItemOrigin.className = 'sidenavi-item';\r
- elmItemOrigin.href = '#';\r
- elmPages.className = 'page-contents';\r
- elmPageOrigin.className = 'page-content';\r
- elmPageOrigin.appendChild( elmTitleOrigin);\r
- \r
- // helpTitle && instance.title( helpTitle);\r
- \r
- jqXML.find( 'page').each( function(){\r
- var xmlPage = $( this),\r
- title = xmlPage.attr( 'title'),\r
- content = xmlPage.text();\r
- \r
- elmItemOrigin.innerHTML = title;\r
- elmNavi.appendChild( elmItemOrigin.cloneNode( true));\r
- \r
- elmTitleOrigin.innerHTML = title;\r
- elmPage = elmPageOrigin.cloneNode( true);\r
- elmPage.innerHTML = content;\r
- \r
- pettanr.util.cleanElement( elmPage);\r
- \r
- if( elmPage.childNodes.length > 0){\r
- elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]);\r
- } else {\r
- elmPage.appendChild( elmTitleOrigin.cloneNode( true));\r
- }\r
- elmPages.appendChild( elmPage);\r
- \r
- HELP.createSelection( title, null, ( function( _pageIndex){\r
- return function(){\r
- HELP_DOCUMENTS_WINDOW.open();\r
- onOpen( _pageIndex); \r
- }\r
- })( numPage), true);\r
- ++numPage;\r
- });\r
- onLoadFunction();\r
- onLoadFunction = null;\r
- \r
- jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);\r
- \r
- jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className)\r
- .click( function( e){\r
- var that = this,\r
- parent = this.parentNode,\r
- i = ( function(){\r
- var children = parent.getElementsByTagName( 'a'),\r
- l = children.length;\r
- for( var i=0; i<l; ++i){\r
- if( children[ i] === that) return i;\r
- }\r
- return -1;\r
- })();\r
- e.stopPropagation();\r
- if( i === -1) return false;\r
- jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
- jqPages.hide().eq( i).show();\r
- \r
- return false;\r
- });\r
- jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a')\r
- .click( function( e){\r
- var that = this,\r
- i = ( function(){\r
- var href = that.href,\r
- i = href.split( '#jump'),\r
- n = i[1]\r
- if( n && '' +parseFloat( n) === n){\r
- return parseFloat( n)\r
- }\r
- return -1;\r
- })();\r
- e.stopPropagation();\r
- if( i === -1) return false;\r
- jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
- jqPages.hide().eq( i).show();\r
- \r
- return false;\r
- });\r
- jqNaviItems.eq( _pageIndex).addClass( 'current');\r
- jqPages = jqAjaxContents.find( '.page-content');\r
- jqPages.eq( _pageIndex).show();\r
- }\r
+ success: onHelpLoad\r
});\r
- hasAjaxContents = true;\r
+ onHelpLoad = null;\r
}\r
- function onOpen( _pageIndex){\r
- _pageIndex = _pageIndex || 0;\r
- jqNaviItems.removeClass( 'current').eq( _pageIndex).addClass( 'current');\r
- jqPages.hide().eq( _pageIndex).show();\r
+ }\r
+ var onHelpLoad = function( _xml){\r
+ var jqXML = $( _xml),\r
+ helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),\r
+ elmNavi = document.createElement( 'div'),\r
+ elmItemOrigin = document.createElement( 'a'),\r
+ elmPages = document.createElement( 'div'),\r
+ elmPageOrigin = document.createElement( 'div'),\r
+ elmTitleOrigin = document.createElement( 'h2'),\r
+ elmPage,\r
+ numPage = 0;\r
+ elmNavi.className = 'sidenavi';\r
+ elmItemOrigin.className = 'sidenavi-item';\r
+ elmItemOrigin.href = '#';\r
+ elmPages.className = 'page-contents';\r
+ elmPageOrigin.className = 'page-content';\r
+ elmPageOrigin.appendChild( elmTitleOrigin);\r
+ \r
+ // helpTitle && instance.title( helpTitle);\r
+ \r
+ jqXML.find( 'page').each( function(){\r
+ var xmlPage = $( this),\r
+ title = xmlPage.attr( 'title'),\r
+ content = xmlPage.text();\r
+ \r
+ elmItemOrigin.innerHTML = title;\r
+ elmNavi.appendChild( elmItemOrigin.cloneNode( true));\r
+ \r
+ elmTitleOrigin.innerHTML = title;\r
+ elmPage = elmPageOrigin.cloneNode( true);\r
+ elmPage.innerHTML = content;\r
+ \r
+ pettanr.util.cleanElement( elmPage);\r
+ \r
+ if( elmPage.childNodes.length > 0){\r
+ elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]);\r
+ } else {\r
+ elmPage.appendChild( elmTitleOrigin.cloneNode( true));\r
+ }\r
+ elmPages.appendChild( elmPage);\r
+ \r
+ HELP.createSelection( title, null, onSelectionClick, true);\r
+ ++numPage;\r
+ });\r
+ onLoadFunction();\r
+ onLoadFunction = null;\r
+ \r
+ jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);\r
+ \r
+ jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);\r
+ jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a').click( onInnerLinkClick);\r
+ jqPages = jqAjaxContents.find( '.page-content');\r
+ setTimeout( onOpen, 0);\r
+ }\r
+ function onNaviClick( e){\r
+ // this は <a>\r
+ var children = this.parentNode.getElementsByTagName( 'a'),\r
+ l = children.length;\r
+ for( var i=0; i<l; ++i){\r
+ if( children[ i] === this) break;\r
}\r
+ e.stopPropagation();\r
+ if( i === l) return false;\r
+ jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
+ jqPages.hide().eq( i).show();\r
+ return false;\r
+ }\r
+ function onInnerLinkClick( e){\r
+ var jump = this.href.split( '#jump'),\r
+ n = jump[1],\r
+ i = ( n && '' +parseFloat( n) === n) ? parseFloat( n) : -1;\r
+ e.stopPropagation();\r
+ if( i === -1) return false;\r
+ jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
+ jqPages.hide().eq( i).show();\r
+ currentPageIndex = i;\r
+ return false; \r
}\r
return WINDOWS_CONTROL.createWindow(\r
this,\r
jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});\r
delete this.onInit;\r
},\r
- onFirstOpen: onFirstOpen,\r
+ onFirstOpen: function(){\r
+ onFirstOpen();\r
+ },\r
onResize: function( w, h){\r
jqAjaxContents && jqAjaxContents.css( { height: h});\r
},\r
}\r
function layerBack(){\r
if( currentElement === null) return;\r
- COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, false);\r
- updateInfomation();\r
- SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, true], [ currentElement, false]);\r
+ if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return;\r
+ INFOMATION_WINDOW.update( currentElement);\r
+ SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);\r
var _z = currentElement.z;\r
LAYER_BACK_BUTTON.visible( _z > 0);\r
LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
}\r
function layerForward(){\r
if( currentElement === null) return;\r
- COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, true);\r
- updateInfomation();\r
- SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, false], [ currentElement, true]);\r
+ if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return;\r
+ INFOMATION_WINDOW.update( currentElement);\r
+ SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);\r
var _z = currentElement.z;\r
LAYER_BACK_BUTTON.visible( _z > 0);\r
LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
function del(){\r
if( currentElement === null) return;\r
buttonBackOrForward( true);\r
- COMIC_ELEMENT_CONTROL.removeComicElement( currentElement);\r
- SAVE( COMIC_ELEMENT_CONTROL.restoreComicElement, [ true, currentElement], [ false, currentElement], true);\r
+ COMIC_ELEMENT_CONTROL.remove( currentElement);\r
+ SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true);\r
COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
}\r
function edit(){\r
_mouseY > 0 ? 90 : -90\r
);\r
currentText && currentText.angle( balloonA);\r
- COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( undefined, undefined, undefined, balloonA);\r
+ INFOMATION_WINDOW.update( currentText);\r
},\r
onFinish: function(){\r
startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);\r
currentText = null;\r
}\r
}\r
- })(),\r
- RESIZE_OPERATOR = ( function(){\r
+ })();\r
+ \r
+ var RESIZE_OPERATOR = ( function(){\r
var MOUSE_CURSOR = updateMouseCursor,\r
GRID_ENABLED = GRID_CONTROL.enabled;\r
\r
currentElement.resize( x, y, w, h);\r
currentIsTextElement === true && TAIL_OPERATOR.update( w, h);\r
CONSOLE_CONTROLER.show( currentElement, w, h);\r
- COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y, undefined, undefined, w, h);\r
+ INFOMATION_WINDOW.update( currentElement);\r
}\r
\r
function flip( _flipV, _flipH){\r
}\r
}\r
\r
- if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){\r
+ if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){\r
\r
} else \r
- if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){\r
+ if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){\r
//return;\r
- if( _w < MIN_OBJECT_SIZE){\r
- //_x += Math.abs( MIN_OBJECT_SIZE -_w);\r
+ if( _w < MIN_ELEMENT_SIZE){\r
+ //_x += Math.abs( MIN_ELEMENT_SIZE -_w);\r
_x = currentX;\r
- _w = MIN_OBJECT_SIZE;\r
+ _w = MIN_ELEMENT_SIZE;\r
}\r
- if( _h < MIN_OBJECT_SIZE){\r
- //_y += Math.abs( MIN_OBJECT_SIZE -_h);\r
+ if( _h < MIN_ELEMENT_SIZE){\r
+ //_y += Math.abs( MIN_ELEMENT_SIZE -_h);\r
_y = currentY;\r
- _h = MIN_OBJECT_SIZE;\r
+ _h = MIN_ELEMENT_SIZE;\r
}\r
} else \r
if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){\r
return;\r
} else \r
- if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){\r
+ if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){\r
\r
- if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
+ if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){\r
// flipH\r
_memoryX = _x;\r
baseX = _x = _x +_w;\r
flip( false, true);\r
flipV = currentElement.flipV();\r
} else \r
- if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){\r
+ if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){\r
// flipV\r
_memoryY = _y;\r
baseX = _x;\r
onShiftUpdate: update,\r
onCtrlUpdate: update\r
}\r
- })(),\r
- POSITION_OPERATOR = ( function(){\r
+ })();\r
+ \r
+ var POSITION_OPERATOR = ( function(){\r
var MOUSE_CURSOR = updateMouseCursor,\r
GRID_ENABLED = GRID_CONTROL.enabled;\r
\r
y = _y !== undefined ? _y : y;\r
RESIZE_OPERATOR.update( x, y);\r
currentElement.resize( x, y);\r
- COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y);\r
+ INFOMATION_WINDOW.update( currentElement);\r
}\r
\r
return {\r
RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);\r
currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);\r
CONSOLE_CONTROLER.show( currentElement, currentw, currenth);\r
- updateInfomation( currentx, currenty, currentElement.z, angle, currentw, currenth);\r
- }\r
- function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){\r
- _w = _w !== undefined ? _w : currentw;\r
- _h = _h !== undefined ? _h : currenth;\r
- INFOMATION_WINDOW.update(\r
- currentElement === null ? -1 : currentElement.type,\r
- _x !== undefined ? _x : currentx,\r
- _y !== undefined ? _y : currenty,\r
- _z !== undefined ? _z : ( currentElement === null ? '*' : currentElement.z),\r
- _a !== undefined ? Math.floor( _a) : ( currentIsTextElement === true ? Math.floor( angle) : '-'),\r
- _w,\r
- _h,\r
- currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)),\r
- currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)),\r
- currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect\r
- );\r
+ INFOMATION_WINDOW.update( currentElement);\r
}\r
function show( _currentElement){\r
currentElement === null && RESIZE_OPERATOR.show( _currentElement);\r
MOUSE_CURSOR( '');\r
TAIL_OPERATOR.hide();\r
CONSOLE_CONTROLER.hide();\r
- updateInfomation();\r
+ INFOMATION_WINDOW.update( null);\r
}\r
function restoreState( arg){\r
if( arg && arg.length !== 8) return;\r
hide: hide,\r
resize: resize,\r
restoreState: restoreState,\r
- updateInfomation: updateInfomation,\r
saveStatus: saveComicElementStatus,\r
busy: function(){\r
return currentOperator !== null;\r
},\r
- hitareaX: function( _comicElement, _x){\r
- if( _comicElement === currentElement){\r
- var _consoleX = CONSOLE_CONTROLER.x();\r
- return currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
- }\r
- return _x -HIT_AREA;\r
- },\r
- hitareaY: function( _comicElement, _y){\r
- return _y -HIT_AREA;\r
- },\r
- hitareaW: function( _comicElement, _w){\r
- if( _comicElement === currentElement){\r
- var _consoleW = CONSOLE_CONTROLER.w();\r
- return ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;\r
- }\r
- return _w +HIT_AREA *2;\r
- },\r
- hitareaH: function( _comicElement, _h){\r
- if( _comicElement === currentElement){\r
- var _consoleY = CONSOLE_CONTROLER.y();\r
- return ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;\r
- }\r
- return _h +HIT_AREA *2;\r
- },\r
hitTest: function( _mouseX, _mouseY, _comicElement){\r
var _x, _y, _w, _h;\r
if( _comicElement === currentElement){\r
h: h, \r
z: z,\r
timing: timing,\r
- hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);},\r
- hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);},\r
- hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);},\r
- hitareaH: function(){ return OPERATOR.hitareaH( this, this.h);},\r
hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest( _mouseX, _mouseY, this);},\r
shift: function( _shiftX, _shiftY){\r
update( this.x +_shiftX, this.y +_shiftY);\r
COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());\r
COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
}\r
- numberingComicElement();\r
+ renumber();\r
}\r
function removeComicElement( _comicElement) {\r
var l = COMIC_ELEMENT_ARRAY.length;\r
for( var i=0; i<l; ++i){\r
if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){\r
COMIC_ELEMENT_ARRAY.splice( i, 1);\r
- numberingComicElement();\r
+ renumber();\r
_comicElement.$.stop().css( {\r
filter: '',\r
opacity: ''\r
* COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
* jqElmの並び替え。\r
*/\r
- function numberingComicElement(){\r
+ function renumber(){\r
var l = COMIC_ELEMENT_ARRAY.length,\r
_comicElement, jqElm, jqNext;\r
for( var i=0; i < l; ++i){\r
}\r
return -1;\r
})();\r
- if( i === -1) return;\r
+ if( i === -1) return false;\r
if( goForward === true){\r
- if( i === 0) return;\r
+ if( i === 0) return false;\r
COMIC_ELEMENT_ARRAY.splice( i, 1);\r
COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);\r
} else {\r
- if( i === l -1) return;\r
+ if( i === l -1) return false;\r
COMIC_ELEMENT_ARRAY.splice( i, 1);\r
COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
}\r
- numberingComicElement();\r
+ renumber();\r
+ return true;\r
}\r
- function restoreReplaceObject( arg){\r
+ function restoreReplaceElement( arg){\r
replaceComicElement( arg[ 0], arg[ 1]);\r
}\r
\r
\r
delete COMIC_ELEMENT_CONTROL.init;\r
},\r
- removeComicElement: removeComicElement,\r
- restoreComicElement: restoreComicElement,\r
- replaceComicElement: replaceComicElement,\r
- restoreReplaceObject: restoreReplaceObject,\r
+ remove: removeComicElement,\r
+ restore: restoreComicElement,\r
+ replace: replaceComicElement,\r
+ restoreReplace: restoreReplaceElement,\r
onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){\r
/*\r
* リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。\r
onMouseUp: function( _mouseX, _mouseY){\r
var ret = currentElement !== null && currentElement.busy() === true;\r
ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);\r
- RESIZE_OPERATOR.lock( currentLockTest);\r
- currentLock = currentLockTest;\r
+ currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY) === true;\r
+ RESIZE_OPERATOR.lock( currentLock);\r
+ INFOMATION_WINDOW.lock( currentLock);\r
return ret;\r
},\r
onMouseDown: function( _mouseX, _mouseY){\r
h = h || 150; //ActualHeight\r
x = x || Math.floor( panelW /2 -w /2);\r
y = y || Math.floor( panelH /2 -h /2);\r
- IMAGE_GROUP_EXPROLER.show( function( _url, _w, _h){\r
+ function onImageSelect( _url, _w, _h){\r
var _comicElement = ImageElementClass.apply( {}, [ _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
- });\r
+ SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true); \r
+ }\r
+ IMAGE_GROUP_EXPROLER.show( onImageSelect);\r
},\r
createTextElement: function( type, angle, text, x, y, z, w, h){\r
type = type || 0;\r
// last\r
MENU_BAR_CONTROL.init();\r
\r
+ OUTPUT_CONSOLE.init();\r
TEXT_EDITOR_CONTROL.init();\r
IMAGE_GROUP_EXPROLER.init();\r
\r
onWindowResize: function( _windowW, _windowH){\r
windowW = _windowW;\r
windowH = _windowH;\r
- \r
+ if( pettanr.editor.firstOpen) return;\r
/*\r
* ieは +'px'が不要みたい\r
*/\r
\r
pre, code, kbd, samp, tt {\r
font-family: monospace;\r
- line-height: 100%;\r
*font-size: 108%;\r
- margin-bottom: 1em;\r
}\r
\r
/* http://e2designer.seesaa.net/article/152168876.html */\r
p, ul, ol, dl, blockquote, pre, table {\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
border-width: 0 0 1px 1px;\r
}\r
\r
+/* image layout\r
+--------------------------------------------------------------------------------------*/\r
+ .float-left {\r
+ float: left;\r
+ margin: 0 1em 1em 0;\r
+ }\r
+ .float-right {\r
+ float: right;\r
+ margin: 0 0 1em 1em;\r
+ }\r
+\r
/* Button\r
--------------------------------------------------------------------------------------*/\r
.button {\r
/* Loading\r
--------------------------------------------------------------------------------------*/\r
.loading {\r
- background-image: url( images/loading.gif);\r
+ background-image: url( ../images/loading.gif);\r
background-position: 50% 50%;\r
background-repeat: no-repeat;\r
}\r
.error {\r
- background-image: url( images/error.png);\r
+ background-image: url( ../images/error.png);\r
background-position: 50% 50%;\r
background-repeat: no-repeat;\r
}\r
position: absolute;\r
right: 0;\r
top: 0;\r
- width: 320px;\r
text-align: right;\r
height: 30px;\r
border-right: 1px solid #666;\r
}\r
#main p,\r
#main pre,\r
+ #main blockquote,\r
.main p,\r
- .main pre {\r
+ .main pre,\r
+ .main blockquote {\r
line-height: 1.6em;\r
}\r
\r
--------------------------------------------------------------------------------------*/ \r
img.img-flip-v { /* 上下反転 */\r
transform: scale( 1, -1);\r
- -o-transform: scale( 1, -1);\r
+ -o-transform: rotate(180deg) scale(-1);\r
-ms-transform: scale( 1, -1);\r
-moz-transform: scale( 1, -1);\r
-webkit-transform: scale( 1, -1);\r
\r
img.img-flip-h { /* 左右反転 */\r
transform: scale( -1, 1);\r
- -o-transform: scale( -1, 1);\r
+ -o-transform: scale(-1);\r
-ms-transform: scale( -1, 1);\r
-moz-transform: scale( -1, 1);\r
-webkit-transform: scale( -1, 1);\r
\r
img.img-flip-vh { /* 上下左右反転 */\r
transform: scale( -1, -1);\r
- -o-transform: scale( -1, -1);\r
+ -o-transform: rotate(180deg);\r
-ms-transform: scale( -1, -1);\r
-moz-transform: scale( -1, -1);\r
-webkit-transform: scale( -1, -1);\r
v\:image.img-flip-vh {\r
rotation : 180; /* vml */\r
}\r
-\r
-/* Reversible Image with png-fix\r
---------------------------------------------------------------------------------------*/\r
- .img-flip-v .img-flip-with-pngfix-v {\r
- filter: flipv();\r
- }\r
- .img-flip-h .img-flip-with-pngfix-h {\r
- filter: fliph();\r
- }\r
- .img-flip-vh .img-flip-with-pngfix-h {\r
- filter: flipv() fliph();\r
- }
\ No newline at end of file
display: none;\r
}\r
\r
- /* Overlay\r
- --------------------------------------------------------------------------------------*/\r
- #overlay-container,\r
+/*--------------------------------------------------------------------------------------\r
+ * \r
+ * overlay\r
+ * \r
+ -------------------------------------------------------------------------------------*/\r
+ #overlay-container,\r
+ #overlay-shadow {\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ width: 100%;\r
+ height: 100%;\r
+ overflow: hidden;\r
+ }\r
#overlay-shadow {\r
- position: absolute;\r
- left: 0;\r
- top: 0;\r
- width: 100%;\r
- height: 100%;\r
- overflow: hidden;\r
+ background-color: #000;\r
+ opacity: 0.5;\r
+ -moz-opacity: 0.5;\r
+ filter: alpha(opacity=50);\r
+ -ms-filter: alpha(opacity=50); \r
}\r
- #overlay-shadow {\r
- background-color: #000;\r
- opacity: 0.5;\r
- -moz-opacity: 0.5;\r
- filter: alpha(opacity=50);\r
- -ms-filter: alpha(opacity=50);\r
- }\r
- .h2c-ActiveX-disabled #overlay-shadow {\r
- \r
- }\r
- \r
- #overlay-close-button {\r
- border: 2px solid #f00;\r
- color: #f00;\r
- font-weight: bold;\r
- font-size: 16px;\r
- line-height: 16px;\r
- text-align: center;\r
- cursor: pointer;\r
- overflow: hidden;\r
- width: 20px;\r
- height: 20px;\r
- padding: 2px;\r
+ .pettanr-ActiveX-disabled #overlay-shadow {\r
+ background: transparent url( black-50pct.png) repeat 0 0;\r
+ _background: #000;\r
+ }\r
+ \r
+ #overlay-close-button {\r
+ border: 2px solid #f00;\r
+ color: #f00;\r
+ font-weight: bold;\r
+ font-size: 16px;\r
+ line-height: 16px;\r
+ text-align: center;\r
+ cursor: pointer;\r
+ overflow: hidden;\r
+ width: 20px;\r
+ height: 20px;\r
+ padding: 2px;\r
+ position: absolute;\r
+ top: 9px;\r
+ right: 9px;\r
+ border-radius: 5px;\r
+ -o-border-radius: 5px;\r
+ -ms-border-radius: 5px;\r
+ -moz-border-radius: 5px;\r
+ -webkit-border-radius: 5px;\r
+ }\r
+\r
+ /* Output Console\r
+ --------------------------------------------------------------------------------------*/\r
+ #output-console-wrapper {\r
position: absolute;\r
- top: 9px;\r
- right: 9px;\r
- border-radius: 5px;\r
- -o-border-radius: 5px;\r
- -ms-border-radius: 5px;\r
- -moz-border-radius: 5px;\r
- -webkit-border-radius: 5px;\r
+ width: 80%;\r
+ height: 80%;\r
+ background-color: #fff;\r
}\r
+ #output-area {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 1px outset #ccc;\r
+ outline: 1px;\r
+ }\r
\r
/*--------------------------------------------------------------------------------------\r
* \r
width: 200px;\r
height: 30px;\r
line-height: 30px;\r
- *cursor: pointer;\r
+ *cursor: pointer;\r
}\r
.menu-bar-item-focus a:hover {\r
color: #333;\r
}\r
.menu-bar-item-focus kbd {\r
position: absolute;\r
- top: 11px;\r
+ top: 0;\r
left: 140px;\r
display: block;\r
font-size: 10px;\r
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
+ _background: #fff;\r
+ }\r
+ \r
#whiteGlass-top {\r
top: 0;\r
left: 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
- *background-color: #fff;\r
+ }\r
+ .pettanr-ActiveX-enabled #mouse-operation-catcher {\r
+ background-color: #fff;\r
filter: alpha(opacity=0);\r
+ -ms-filter: alpha(opacity=0);\r
}\r
- html>/**/body #mouse-operation-catcher { \r
- background-color /***/: #fff\9; \r
- -ms-filter /***/: alpha(opacity=0)\9;\r
- } \r
/*\r
* ieでは、背景を設定しないと、mouse-operation-catcherが働かない。\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
+ }\r
+ \r
\r
/* comic-element\r
--------------------------------------------------------------------------------------*/\r
text-align: center;\r
cursor: pointer;\r
}\r
- \r
- /*\r
- * page contents\r
- */\r
- .sidenavi {\r
- width: 100px;\r
- float: left;\r
- }\r
- .sidenavi-item,\r
- .sidenavi-item:link {\r
- display: block;\r
- border-bottom: 1px solid #666;\r
- padding: 1em;\r
- text-decoration: none;\r
- }\r
- .sidenavi-item:hover {\r
- background-color: #ccc;\r
- text-decoration: none;\r
- }\r
- .sidenavi .current {\r
- background-color: #666;\r
- color: #eee;\r
- }\r
- .page-contents {\r
- _position: relative; /* for ie6 */\r
- margin-left: 100px;\r
- padding: 1em 1em 2em 1em;\r
+\r
+ /* page contents\r
+ --------------------------------------------------------------------------------------*/\r
+ .sidenavi {\r
+ width: 100px;\r
+ float: left;\r
+ }\r
+ .sidenavi-item,\r
+ .sidenavi-item:link {\r
+ display: block;\r
+ border-bottom: 1px solid #666;\r
+ padding: 1em;\r
+ text-decoration: none;\r
+ zoom: 1;\r
+ }\r
+ .sidenavi-item:hover {\r
+ background-color: #ccc;\r
+ text-decoration: none;\r
+ }\r
+ .sidenavi .current {\r
+ background-color: #666;\r
+ color: #eee;\r
+ }\r
+ .page-contents {\r
+ _position: relative; /* for ie6 */\r
+ margin-left: 100px;\r
+ padding: 1em 1em 2em 1em;\r
+ }\r
+ .page-content {\r
+ display: none;\r
+ }\r
+ .page-content p,\r
+ .page-content pre {\r
+ line-height: 1.6em;\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
display: inline-block;\r
width: 14px;\r
line-height: 22px;\r
- *line-height: 22px; /* ie用 input周りのサイズあわせ、よく分からない。 */\r
color: #666;\r
text-align: center;\r
+ cursor: pointer;\r
}\r
.comic-element-attribute-value {\r
width: 40px;\r
#bg-color,\r
#select-bg-color-button,\r
#reset-bg-color-button {\r
- position: absolute;\r
- text-align: center;\r
- cursor: pointer;\r
+ position: absolute;\r
+ text-align: center;\r
+ cursor: pointer;\r
}\r
\r
#bg-pattern,\r
top: 15px;\r
}\r
#bg-pattern {\r
- left: 15px;\r
- width: 100px;\r
+ left: 15px;\r
+ width: 100px;\r
}\r
#select-bg-pattern-button,\r
#reset-bg-pattern-button,\r
#select-bg-color-button,\r
#reset-bg-color-button {\r
- border: 1px outset #666;\r
- height: 20px;\r
- top: 115px;\r
- line-height: 20px;\r
+ border: 1px outset #666;\r
+ height: 20px;\r
+ top: 115px;\r
+ line-height: 20px;\r
}\r
#select-bg-pattern-button {\r
- left: 15px;\r
- width: 80px;\r
+ left: 15px;\r
+ width: 80px;\r
}\r
#reset-bg-pattern-button {\r
- left: 95px;\r
- width: 20px;\r
+ left: 95px;\r
+ width: 20px;\r
}\r
\r
#bg-color {\r
background-color: #66f;\r
}\r
#select-bg-color-button {\r
- left: 125px;\r
- width: 40px;\r
+ left: 125px;\r
+ width: 40px;\r
}\r
#reset-bg-color-button {\r
- left: 165px;\r
- width: 20px;\r
+ left: 165px;\r
+ width: 20px;\r
}\r
\r
\r
* \r
-------------------------------------------------------------------------------------*/\r
.finder-body {\r
- position:relative;\r
+ position: relative;\r
}\r
\r
.finder-header {\r
--- /dev/null
+<!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
+<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>ActiveX | pettanR</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <!-- InstanceEndEditable -->\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('<body>');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="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>ActiveX が有効か？ を js から調べる</h2>\r
+ <p>このページは ie8 以下用の テストページです．</p>\r
+ <p>\r
+ ActiveX が有効か？ 調べるために以下のような script を使用していましたが、<strong>ie の設定によっては警告が出てしまうためよろしくないみたいです．</strong>(ie7 で遭遇)\r
+ </p>\r
+ <p>ActiveX が使えなくても他の手段でユーザーのサポートは行える（はずな）ので、警告を表示しない方法で ActiveX が有効か？ 取得したいところです．</p>\r
+ <pre><code>\r
+<!--[if lt IE 9]>\r
+ <script type="text/javascript">\r
+ (function(){\r
+ var b = document.body || (function(){document.write('<body>');return document.body;})(),\r
+ x = (function(){\r
+ try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}\r
+ return 'pettanr-ActiveX-' +( t ? 'enabled' : 'disabled');\r
+ })();\r
+ if( !b.className.match(x)) b.className += ( b.className.length === 0 ? '' : ' ') +x;\r
+ })(); \r
+ </script>\r
+<![endif]-->\r
+ </code></pre>\r
+ <p>ちなみに上記のコードは <body> の直下に書かれていて、domReady イベントすら待たずに、即座にActiveX の有無を調べて <body> にクラスをセットします．</p>\r
+ <p>基本的に スクリプトは html の最後の方に書いて、domReady イベント後に動作するようにしているので、これは異例です．</p>\r
+ <p>ActiveX が有効時・無効時で css 指定から読み込まれる画像が異なる場合に、不要な画像へのアクセスを避けるためにこのようなタイミングにしています．（でも実は未検証）</p>\r
+ \r
+ <h3>filter 指定による html 要素のサイズ変化を調べる</h3>\r
+ <div id="box-container" style="height:200px;position:relative;">\r
+ <div id="red-box" style="width:100px;height:60px;border:1px solid red; position:absolute;top:10px;left:150px;">1:red</div>\r
+ <div id="blue-box" style="width:100px;height:60px;border:1px solid blue;position:absolute;top:90px;left:250px;">2:blue</div>\r
+ </div>\r
+ <p>filter で影を追加した要素の offsetHeight が大きくなっている場合、ActiveX が有効になっている、といえる．</p>\r
+ <pre><code>\r
+blue.style.filter = 'progid:DXImageTransform.Microsoft.Shadow()';\r
+ </code></pre>\r
+ \r
+ <h3>以上を元にした ActiveX チェック用のスクリプト</h3>\r
+ <pre><code>\r
+<!--[if lt IE 9]>\r
+ <script type="text/javascript">\r
+ (function(){\r
+ var b = document.body || (function(){document.write('<body>');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
+ </code></pre>\r
+ \r
+ <h3>付録</h3>\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
+ <h4>【一応】js が有効だからといって ActiveX も有効とは限らない</h4>\r
+ <p>ActiveX は js と同時に切られることが多いが、これは ie のデフォルトのセキュリティ設定のためで、ActiveX と js はそれぞれ独立して on / off ができる．</p>\r
+ <p>そのため js が有効だからといって ActiveX も有効とは限らない．</p> \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 --></div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" -->\r
+ <script type="text/javascript">\r
+ var container = document.getElementById( 'box-container'),\r
+ red = document.getElementById( 'red-box'),\r
+ blue = document.getElementById( 'blue-box'),\r
+ result = document.createElement( 'p');\r
+ blue.style.filter = 'progid:DXImageTransform.Microsoft.Shadow()';\r
+ result.innerHTML = [\r
+ red.id, ':', red.offsetWidth, 'x', red.offsetHeight, '<br>',\r
+ blue.id, ':', blue.offsetWidth, 'x', blue.offsetHeight\r
+ ].join( '');\r
+ container.appendChild( result);\r
+ </script>\r
+<!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
+++ /dev/null
-/**
- * @author Administrator
- */
-
-/** * ドキュメント内のSVGを別ウィンドウで出力する。
- * 引数svgIndexには、ドキュメント内のSVG要素のインデックスを指定すること。
- * * （指定しない場合は0。最初のSVG要素とみなされる） */
-function exportSVG(svgIndex){
- if (!svgIndex) { svgIndex = 0; }
- // SVG要素を取得。
- var svgNode = document.getElementsByTagName("svg")[svgIndex];
- // 生成されるXMLにSVGのネームスペースを指定。
- svgNode.setAttribute("xmlns", "http://www.w3.org/2000/svg");
- // XMLドキュメント宣言
- var svgText = "\n";
- // 出力するXML（テキスト）SVG要素を追加する。
- svgText += svgNode.parentNode.innerHTML;
- //alert(svgText);
- // SVG-XMLを文字列化したものをdataスキームで生成
- // エスケープ（UTF-16文字列はエスケープ解除）
- var data = "data:image/svg+xml;charset=UTF-8," + UnescapeUTF16Only(escape(svgText));
- // 別ウィンドウ（_blank）に出力
- var svgWindow = window.open(data, "SVG", "_blank");
-}
-function UnescapeUTF16Only(s) {
- return s.replace(/%u\w\w\w\w/g, UnescapeUTF16);
-}
-function UnescapeUTF16(s) {
- return unescape(s);
-}
\ No newline at end of file
--- /dev/null
+<!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
+<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>Test Index | PettanR</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <!-- InstanceEndEditable -->\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('<body>');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="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>flip image test</h2>\r
+ <ul>\r
+ <li><a href="transform.html">css3 transform</a></li>\r
+ <li><a href="svg.html">svg test</a></li>\r
+ </ul>\r
+ <h2>Support</h2>\r
+ <ul>\r
+ <li><a href="activex.html">activex test</a></li>\r
+ </ul>\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 --></div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
<!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">\r
- <head>\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
- <title>pettanR</title>\r
- <link rel="stylesheet" type="text/css" href="common.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>pettanR</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
- <div id="main">\r
-<img src="flip.svg">\r
+<html><!-- 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>svg | pettanR</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <!-- InstanceEndEditable -->\r
+</head>\r
\r
-<img src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e">\r
-<img src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e">\r
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">\r
-<image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
-</svg>\r
+<body>\r
+ <!--[if lt IE 9]>\r
+ <script type="text/javascript">\r
+ (function(){\r
+ var b = document.body || (function(){document.write('<body>');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="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
+\r
+ <div id="main">\r
+ <h2>svg を使った画像の反転テスト</h2>\r
+ <div class="clearfix">\r
+ <img src="1.gif" class="float-left" width="200" height="200">\r
+ <p>svg を 使った画像の反転のためのテストページです．</p>\r
+ <p>css3 の transform をサポートしないが、svg をサポートするモダンブラウザに対して svg による反転画像機能を付与することを目指します．</p>\r
+ <p>この画像は元画像になります．</p>\r
</div>\r
- </div>\r
- </div>\r
- </div>\r
- \r
- <!-- footer -->\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
+ <h3>firefox3.6 の svg サポートに関する注意</h3>\r
+ <p>3.5 から svg のサポートを開始した firefox ですが、3.6 までは javascript からの操作でしか svg を描画することができません．</p>\r
+ <p>そのため html文書中に svg タグを発見すると、それを読み込んで svg エレメントを生成し直すことで svg を描画する fix ライブラリも存在します．</p>\r
+ \r
+ <h2>img の src に flip.svg を指定</h2>\r
+ <div class="clearfix">\r
+ <img src="flip.svg" class="float-left">\r
+ <p>このようなかたちで別ファイルを用意することは、サーバ側でファイルデータを用意することになってしまうため早計です．</p>\r
+ <p>続いて、この .svg を データスキーム化することが本テストの狙いです．</p>\r
</div>\r
- <div class="footer-item-wrapper">\r
- <div class="footer-item">\r
- <h2>ドキュメント</h2>\r
- <ul>\r
- <li>作家向けドキュメント</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
+ <h3>source</h3>\r
+ <pre><code><img src="flip.svg"></code></pre>\r
+ <h4>flip.svg の 内容</h4>\r
+ <pre><code><?xml version="1.0"?>\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">\r
+ <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
+</svg></code></pre>\r
+ \r
+ <h2>img の src に flip.svg を data スキーム化したものを指定</h2>\r
+ <img src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e">\r
+ <h3>source</h3>\r
+ <pre><code><img src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e"></code></pre>\r
+\r
+ <h2>js で data スキームを作成し img にセット</h2>\r
+ <div class="clearfix">\r
+ <img id="output" class="float-left">\r
+ <p>Opera9.6, 10.1, 10.5, 11.1, 11.5 で動作が確認できました．</p>\r
+ <p>画像の url は絶対指定にする必要があります．またローカルにファイル一式を置いた場合に、画像を表示させることができませんでした．</p>\r
+ </div>\r
+ <pre><code id="outputSrc"></code></pre>\r
+ \r
+ <h2>iframe 内に flip.svg を表示</h2>\r
+ <div class="clearfix">\r
+ <iframe src="flip.svg" width="200" height="200" class="float-left"></iframe>\r
+ <p>Opera9.6 で動作．firefox3.6でも表示されています．</p>\r
</div>\r
- <div class="footer-item-wrapper">\r
- <div class="footer-item">\r
- <h2>プロトタイプ</h2>\r
- <ul>\r
- <li>pettanr</li>\r
- <li><a href="work.html" rel="editor">js editor</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
+ <h3>source</h3>\r
+ <pre><code><iframe src="flip.svg" width="200" height="200"></code></pre>\r
+ \r
+ <h2>iframe の src に flip.svg を data スキーム化したものを指定</h2>\r
+ <div class="clearfix">\r
+ <iframe width="200" height="200" class="float-left" src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e"></iframe>\r
+ <p>さて、どうなるでしょう？？</p>\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
+ <h3>source</h3>\r
+ <pre><code><iframe width="200" height="200" src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e"></code></pre> \r
+ \r
+ <h2>インラインSVG</h2>\r
+ <div class="clearfix">\r
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="float-left">\r
+ <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
+ </svg>\r
+ <p>インライン SVG をサポートするブラウザに対しては SVG な xml文書 を html 中に直接記述することができます．</p>\r
+ <p>仮にブラウザが css3 transform をサポートしていなくてもインラインSVG をサポートしていれば、とてもシンプルな記述で画像の反転は可能です．</p>\r
+ <p>しかし、インライン SVG は外部 SVG に比べてサポートが遅れたため、インライン SVG をサポートするブラウザの多くは css3 transform のサポートを済ませています．</p>\r
</div>\r
+ \r
+ <h3>source</h3>\r
+ <pre><code><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">\r
+ <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />\r
+</svg></code></pre>\r
+ \r
</div>\r
- <div id="copyright">Copyright © 2011-2012 pettanR team, some rights reserved.</div>\r
- </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 --></div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" -->\r
<script type="text/javascript">\r
- function exportSVG(){\r
- var svgText = "\n";\r
- // 出力するXML（テキスト）SVG要素を追加する。 \r
- svgText += document.svgtext.value;\r
- //alert(svgText);\r
- // SVG-XMLを文字列化したものをdataスキームで生成 \r
- // エスケープ（UTF-16文字列はエスケープ解除） \r
- var data = "data:image/svg+xml;charset=UTF-8," + UnescapeUTF16Only(escape(svgText));\r
- // 別ウィンドウ（_blank）に出力 \r
- var svgWindow = window.open(data, "SVG", "_blank");\r
- }\r
- function UnescapeUTF16Only(s) {\r
- return s.replace(/%u\w\w\w\w/g, UnescapeUTF16);\r
+ function createSVG( _src){\r
+ var charset = ( document.charset || document.characterSet).toLowerCase();\r
+ var svgText = [\r
+ '<?xml version="1.0"?>',\r
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',\r
+ '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">',\r
+ '<image x="0" y="0" width="200" height="200" xlink:href="', _src, '" transform="scale(-1,1) translate(-200,0)" />',\r
+ '</svg>' ].join('');\r
+\r
+ var data = [ 'data:image/svg+xml;charset=', charset, ',', unescapeForData( svgText)].join( '');\r
+ \r
+ document.getElementById( 'output').src = data;\r
+ document.getElementById( 'outputSrc').innerHTML = [ '<img src="', data, '">'].join( '');\r
+ // return data;\r
}\r
- function UnescapeUTF16(s) {\r
- return unescape(s);\r
+ function unescapeForData( _data){\r
+ return _data.replace( / /g, '%20')\r
+ .replace( /"/g, '%22')\r
+ .replace( /,/g, '%2c')\r
+ .replace( /\//g, '%2f')\r
+ .replace( /:/g, '%3a')\r
+ .replace( /</g, '%3c')\r
+ .replace( /=/g, '%3d')\r
+ .replace( />/g, '%3e')\r
+ .replace( /\?/g, '%3f');\r
}\r
+ var _path = pettanr.util.getAbsolutePath( '1.gif');\r
+ createSVG( _path);\r
</script>\r
- </body>\r
-</html>\r
\r
+<!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
--- /dev/null
+<!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
+<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>css3 transform | pettanR</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <!-- InstanceEndEditable -->\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('<body>');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="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>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
+ <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
+ <p>transform をサポートしない ie8 以下でも、filter の指定で反転画像が表示されます．ただし ActiveX が切られている場合は反転表示されません．</p>\r
+ </div>\r
+ <h3>css source</h3>\r
+ <pre><code>\r
+ .img-flip-h {\r
+ transform: scale( -1, 1);\r
+ -o-transform: scale(-1);\r
+ -ms-transform: scale( -1, 1);\r
+ -moz-transform: scale( -1, 1);\r
+ -webkit-transform: scale( -1, 1);\r
+ filter: fliph();\r
+ -ms-filter: fliph();\r
+ }\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
+ <p></p>\r
+ </div>\r
+ <h3>css source</h3>\r
+ <pre><code>\r
+ .img-flip-v {\r
+ transform: scale( 1, -1);\r
+ -o-transform: rotate(180deg) scale(-1);\r
+ -ms-transform: scale( 1, -1);\r
+ -moz-transform: scale( 1, -1);\r
+ -webkit-transform: scale( 1, -1);\r
+ filter: flipv();\r
+ -ms-filter: flipv();\r
+ }\r
+ </code></pre>\r
+ \r
+ <h2>flip-vh 水平垂直方向に反転 または 180度回転</h2>\r
+ <div class="clearfix">\r
+ <img src="1.gif" class="img-flip-vh float-left" width="200" height="200" alt="" title="">\r
+ <p></p>\r
+ </div>\r
+ <h3>css source</h3>\r
+ <pre><code>\r
+ .img-flip-vh {\r
+ transform: scale( -1, -1);\r
+ -o-transform: rotate(180deg);\r
+ -ms-transform: scale( -1, -1);\r
+ -moz-transform: scale( -1, -1);\r
+ -webkit-transform: scale( -1, -1);\r
+ filter: flipv() fliph();\r
+ -ms-filter: flipv() fliph();\r
+ }\r
+ </code></pre> \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 --></div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
-#wiki-container {
- margin: 1em 0 3em;
-}
- #page-navi-container {
- width: 180px;
- float: left;
- }
- #page-total {
- height: 12px;
- font-size: 12px;
- line-height: 12px;
- padding: 8px 1em;
- color: #999;
- border-top: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
- }
- .page-navi,
- .page-navi-current {
- height: 24px;
- border-bottom: 1px solid #ccc;
- }
- .page-navi a,
- .page-navi a:link,
- .page-navi-current a,
- .page-navi-current a:link {
- display: block;
- font-size: 14px;
- line-height: 14px;
- padding: 6px 0 4px 0.5em;
- color: #333;
- text-decoration: none;
- overflow: hidden;
- }
- .page-navi a:hover {
- background-color: #ccc;
- }
-
- .page-navi-current {
- background-color: #333;
- }
- .page-navi-current a:link,
- .page-navi-current a:visited {
- color: #eee;
- }
- .page-navi-current a:hover {
- background-color: #444;
- }
-
- #page-body-container {
- width: 580px;
- float: right;
- }
- .page-wrapper {
- display: none;
- }
- .page-wrapper:target,
- .page-wrapper-current {
- display: block !important;
- }
- .page-header {
- position: relative;
- line-height: 56px;
- background-color: #ddd;
- margin-bottom: 1em;
- height: 56px;
- }
- .page-title {
- position: absolute;
- top: 0;
- left: -5px;
- font-size: 56px;
- font-weight: bold;
- line-height: 56px;
- height: 56px;
- padding-left: 0;
- overflow: hidden;
- display: block;
- color: #fff;
- width: 580px;
- }
- .page-title:first-letter {
- font-size: 76px;
- line-height: 56px;
- color: #666;
- }
- .page-date {
- position: absolute;
- top: 28px;
- right: 0;
- display: block;
- color: #666;
- font-size: 12px;
- font-weight: bold;
- line-height: 12px;
- width: 80px;
- }
-
-
- .internalLink {
- border-bottom: 1px solid green;
- }
- .externalLink {
- border-bottom: 1px solid red;
- }
- .internalLink:hover,
- .externalLink:hover {
- text-decoration: none;
- }
- .jump-to-top {
- display: block;
- text-align: right;
- }
-
-
-#wiki-container h1 {
- text-align: left;
- margin: 1em 0 2em;
- font-size: 2em;
-}
-
-#wiki-container h2 {
- text-align: left;
- margin: 2em 0 1em 0;
-}
-#wiki-container h3,
-#wiki-container h4,
-#wiki-container h5,
-#wiki-container h6 {
- text-align: left;
- margin: 2em 0 1em;
-}
-
-img.embed-image {
- margin: 0 0 1em;
- max-width: 550px;
-}
-#wiki-container {
- line-height: 1.6em;
-}
-
- #wiki-container pre,
- #wiki-container blockquote {
- border: 1px solid;
- overflow: auto;
- padding: 4px 0.5em;
- margin: 0.8em 0 1em 2em;
- line-height: 1.4em;
- white-space: pre-wrap;
- word-wrap: break-word;
- font-size: 12px;
- }
- #wiki-container pre {
- border-color: #ccc;
- background-color: #f0f0f0;
- }
- #wiki-container blockquote {
- border-color: #e9f;
- background-color: #ecf;
- }
-
- #page-body-container ul,
- #page-body-container ol {
- margin-bottom: 1em;
- }
- #page-body-container ul ul, #page-body-container ol ul {margin: 0 0 0 1.2em; font-size: 0.95em;}
- #page-body-container ul ol, #page-body-container ol ol {margin: 0 0 0 1.6em; font-size: 0.95em;}
+#wiki-container {\r
+ margin: 1em 0 3em;\r
+}\r
+ #page-navi-container {\r
+ width: 180px;\r
+ float: left;\r
+ }\r
+ #page-total {\r
+ height: 12px;\r
+ font-size: 12px;\r
+ line-height: 12px;\r
+ padding: 8px 1em;\r
+ color: #999;\r
+ border-top: 1px solid #ccc;\r
+ border-bottom: 1px solid #ccc;\r
+ }\r
+ .page-navi,\r
+ .page-navi-current {\r
+ height: 24px;\r
+ border-bottom: 1px solid #ccc;\r
+ }\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
+ padding: 6px 0 4px 0.5em;\r
+ color: #333;\r
+ text-decoration: none;\r
+ overflow: hidden;\r
+ }\r
+ .page-navi a:hover {\r
+ background-color: #ccc;\r
+ } \r
+ \r
+ .page-navi-current {\r
+ background-color: #333;\r
+ }\r
+ .page-navi-current a:link,\r
+ .page-navi-current a:visited {\r
+ color: #eee;\r
+ }\r
+ .page-navi-current a:hover {\r
+ background-color: #444;\r
+ }\r
+\r
+ #page-body-container {\r
+ width: 580px;\r
+ float: right;\r
+ }\r
+ .page-wrapper {\r
+ display: none;\r
+ }\r
+ .page-wrapper:target,\r
+ .page-wrapper-current {\r
+ display: block !important;\r
+ }\r
+ .page-header {\r
+ position: relative;\r
+ line-height: 56px;\r
+ background-color: #ddd;\r
+ margin-bottom: 1em;\r
+ height: 56px;\r
+ }\r
+ .page-title {\r
+ position: absolute;\r
+ top: 0;\r
+ left: -5px;\r
+ font-size: 56px;\r
+ font-weight: bold;\r
+ line-height: 56px;\r
+ height: 56px;\r
+ padding-left: 0;\r
+ overflow: hidden;\r
+ display: block;\r
+ color: #fff;\r
+ width: 580px;\r
+ }\r
+ .page-title:first-letter {\r
+ font-size: 76px;\r
+ line-height: 56px;\r
+ color: #666;\r
+ }\r
+ .page-date {\r
+ position: absolute;\r
+ top: 28px;\r
+ right: 0;\r
+ display: block;\r
+ color: #666;\r
+ font-size: 12px;\r
+ font-weight: bold;\r
+ line-height: 12px;\r
+ width: 80px;\r
+ }\r
+ \r
+ \r
+ .internalLink {\r
+ border-bottom: 1px solid green;\r
+ } \r
+ .externalLink {\r
+ border-bottom: 1px solid red;\r
+ }\r
+ .internalLink:hover, \r
+ .externalLink:hover {\r
+ text-decoration: none;\r
+ } \r
+ .jump-to-top {\r
+ display: block;\r
+ text-align: right;\r
+ }\r
+ \r
+\r
+#wiki-container h1 {\r
+ text-align: left;\r
+ margin: 1em 0 2em;\r
+ font-size: 2em;\r
+}\r
+\r
+#wiki-container h2 {\r
+ text-align: left;\r
+ margin: 2em 0 1em 0;\r
+}\r
+#wiki-container h3,\r
+#wiki-container h4,\r
+#wiki-container h5,\r
+#wiki-container h6 {\r
+ text-align: left;\r
+ margin: 2em 0 1em;\r
+}\r
+\r
+img.embed-image {\r
+ margin: 0 0 1em;\r
+ max-width: 580px;\r
+}\r
+#wiki-container {\r
+ line-height: 1.6em;\r
+}\r
+\r
+ #page-body-container ul,\r
+ #page-body-container ol {\r
+ margin-bottom: 1em;\r
+ }\r
+ #page-body-container ul ul, #page-body-container ol ul {margin: 0 0 0 1.2em; font-size: 0.95em;}\r
+ #page-body-container ul ol, #page-body-container ol ol {margin: 0 0 0 1.6em; font-size: 0.95em;}\r
<link rel="stylesheet" type="text/css" href="stylesheets/work.css">\r
</head>\r
<body>\r
- <!--[if lt IE 9]>\r
- <script type="text/javascript">\r
- (function(){\r
- var b = document.body || (function(){document.write('<body>');return document.body;})(),\r
- x = (function(){\r
- try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}\r
- return 'pettanr-ActiveX-' +( t ? 'enabled' : 'disabled');\r
- })();\r
- if( !b.className.match(x)) b.className += ( b.className.length === 0 ? '' : ' ') +x;\r
- })(); \r
- </script>\r
- <![endif]-->\r
+\r
\r
<!-- 改行コード 取得用 -->\r
<form>\r
\r
<div id="header">\r
<div class="base-content-width" style="position:relative;">\r
- <h1>pettanR</h1>\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
<dd><a href="work.html?view=editor&rimg=ActiveX">Backend is ActiveX</a></dd>\r
<dt>Balloon test</dt>\r
<dd><a href="work.html?view=editor&vector=false">Vector Disabled</a></dd>\r
+ <dt>ActiveX test</dt>\r
+ <dd><a href="work.html?ActiveX=true">ActiveX Enabled</a></dd>\r
+ <dd><a href="work.html?ActiveX=false">ActiveX Disabled</a></dd>\r
+ <dt>Debug mode</dt>\r
+ <dd><a href="work.html?debug=true">Debug Enabled</a></dd>\r
+ <dd><a href="work.html?debug=false">Debug Disabled</a></dd>\r
</dl>\r
\r
<h2>XML + XSLT pages</h2>\r
<div id="image-exproler-container" class="finder-container"></div>\r
</script>\r
</div>\r
- <!-- Editor -->\r
+ <!-- / Editor -->\r
\r
\r
<!-- オーバーレイ -->\r
<div id="overlay-container" style="display: none;">\r
<div id="overlay-shadow"></div>\r
+ \r
+ <!-- アウトプットコンソール -->\r
+ <div id="output-console-wrapper">\r
+ <textarea id="output-area" readonly></textarea>\r
+ </div>\r
\r
<!-- テキスト エディタ -->\r
<div id="speach-editor-wrapper">\r
OSDN Git Service
