/*\r
* pettanR common.js\r
- * version 0.4.34\r
+ * version 0.4.35\r
* \r
* author: itozyun\r
*/\r
IS_DEBUG = Type.isBoolean( URL_PARAMS.debug ) ? URL_PARAMS.debug : IS_LOCAL === true,\r
jqWindow , jqDocument , jqBody;\r
return {\r
- version: '0.4.33',\r
+ version: '0.4.35',\r
init: function(){\r
jqWindow = $( window );\r
jqDocument = $( document );\r
\r
pettanr.overlay = ( function(){\r
var SHADOW_OPACITY = 0.5,\r
- ELM_CONTAINER = document.getElementById( 'overlay-container' ),\r
- jqConteiner, jqShadow, jqCloseButton,// jqBody, \r
+ ELM_CONTAINER = document.getElementById( 'overlay-container' ),\r
currentOverlay = null,\r
- bootParams = null,\r
- visible = false,\r
+ bootParams = null,\r
+ visible = false,\r
+ jqConteiner, jqShadow, jqCloseButton,// jqBody, \r
windowW, windowH;\r
\r
function asyncResize(){\r
function onCloseClick( e){\r
pettanr.overlay.hide();\r
e.preventDefault();\r
- return false; \r
+ return false;\r
}\r
function onFadeInComplete(){\r
\r
return {\r
init: function(){\r
//jqBody = pettanr.jqBody();\r
- jqConteiner = $( '#overlay-container');\r
- jqShadow = $( '#overlay-shadow');\r
+ jqConteiner = $( '#overlay-container');\r
+ jqShadow = $( '#overlay-shadow');\r
jqCloseButton = $( '#overlay-close-button').click( onCloseClick );\r
\r
pettanr.key.addKeyDownEvent( pettanr.view.OVERLAY, 27, false, false, pettanr.overlay.hide ); // 27.esc\r
if( pettanr.view.isApplicationInstance( _overlay ) === false ) return;\r
\r
document.body.style.overflow = 'hidden';\r
+ document.body.appendChild( ELM_CONTAINER ); // ie6-8 で必要、なんで、、、?\r
\r
this.visible = visible = true;\r
this.currentID = _overlay.ID;\r
var ret = document.createElement( 'div');\r
ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';\r
return ret;\r
+ })(),\r
+ ELM_TITLE_ORIGN = ( function(){\r
+ \r
})();\r
\r
/*\r
var size = getInnerSize();\r
if (_size.w !== size.w || _size.h !== size.h) { // resized\r
_size = size; // update\r
- onResizeFunction( _size);\r
+ onResizeFunction( _size );\r
}\r
setTimeout( unlock, 0); // delay unlock\r
}\r
}\r
\r
\r
- var ElementBuilder = ( function(){\r
- var ELM_TITLE_ORIGN = ( function(){\r
- \r
- })(),\r
- ELM_TEXT_ORIGN = ( function(){\r
- var _table = document.createElement( 'table'),\r
- _tr = document.createElement( 'tr');\r
- _table.appendChild( _tr);\r
- _tr.appendChild( document.createElement( 'td'));\r
- _table.cellspacing = '0';\r
- return _table;\r
- })();\r
+ var ElementBuilderClass = function( elmTarget, noClassnameMode ){\r
+ var RIMG_ARRAY = [],\r
+ BALLOON_ARRAY = [];\r
\r
function buildComicElement(){\r
\r
}\r
\r
- function buildPanelElement( elmTarget, json, noClassnameMode){\r
- var _elmPanel = document.createElement( 'div'),\r
+ function buildPanelElement( json, zoom ){\r
+ var _elmPanel = document.createElement( 'div' ),\r
_style = {\r
- "border-width": typeof json.border === 'number' ? json.border + 'px' : 0,\r
+ 'border-width': typeof json.border === 'number' ? json.border + 'px' : 0,\r
width: json.width + 'px',\r
height: json.height + 'px'\r
},\r
_cssText = [],\r
_comicElements = json.panel_elements || [],\r
- _comicElement, _elmImgWrap, _rImg, _rPic, _balloon, _elmBalloonWrap, _elmText;\r
- if( noClassnameMode === true){\r
+ _comicElement, _elmImg, _rImg, _rPic,\r
+ _balloon, _elmBalloonWrap, _elmText, _text, _speachesAttributes, _key;\r
+ if( noClassnameMode === true ){\r
\r
} else {\r
_elmPanel.className = NAMESPACE_CLASSNAME + 'panel';\r
}\r
- for( var _key in _style){\r
- _cssText.push( _key + ':' + _style[ _key]);\r
+ for( var _key in _style ){\r
+ _cssText.push( _key + ':' + _style[ _key ] );\r
}\r
_elmPanel.style.cssText = _cssText.join( ';');\r
- elmTarget.appendChild( _elmPanel);\r
+ elmTarget.appendChild( _elmPanel );\r
\r
- for( var i=0, l=_comicElements.length; i<l; ++i){\r
- _comicElement = _comicElements[ i];\r
+ for( var i=0, l=_comicElements.length; i<l; ++i ){\r
+ _comicElement = _comicElements[ i ];\r
_rPic = _comicElement.resource_picture;\r
if( _rPic ){\r
_rImg = pettanr.image.createReversibleImage(\r
[ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext ].join( ''),\r
_comicElement.width, _comicElement.height\r
);\r
- _elmImgWrap = document.createElement( 'div');\r
- _elmPanel.appendChild( _elmImgWrap);\r
- _elmImgWrap.appendChild( _rImg.elm);\r
- _elmImgWrap.className = NAMESPACE_CLASSNAME + 'image';\r
- _elmImgWrap.style.cssText = [\r
- 'width:', Math.abs( _comicElement.width ), 'px;',\r
- 'height:', Math.abs( _comicElement.height ), 'px;',\r
+ _elmImg = _rImg.elm;\r
+ _elmPanel.appendChild( _elmImg );\r
+ _elmImg.className = NAMESPACE_CLASSNAME + 'image';\r
+ _elmImg.style.cssText = [\r
'left:', _comicElement.x, 'px;',\r
'top:', _comicElement.y, 'px;',\r
'z-index:',_comicElement.z, ';'\r
- ].join( '');\r
+ ].join( ''); \r
+ if( _elmImg.tagName === 'img' ){\r
+ _elmImg.width = Math.abs( _comicElement.width );\r
+ _elmImg.height = Math.abs( _comicElement.height );\r
+ } else {\r
+ _elmImg.style.width = Math.abs( _comicElement.width ) + 'px';\r
+ _elmImg.style.height = Math.abs( _comicElement.height ) + 'px';\r
+ }\r
+ \r
+ RIMG_ARRAY.push( _rImg );\r
} else {\r
_elmBalloonWrap = document.createElement( 'div' );\r
_elmPanel.appendChild( _elmBalloonWrap );\r
_elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';\r
_elmBalloonWrap.style.cssText = [\r
- 'width:', _comicElement.width, 'px;',\r
- 'height:', _comicElement.height, 'px;',\r
- 'left:', _comicElement.x, 'px;',\r
- 'top:', _comicElement.y, 'px;',\r
+ 'width:', _comicElement.width, 'px;',\r
+ 'height:', _comicElement.height, 'px;',\r
+ 'left:', _comicElement.x, 'px;',\r
+ 'top:', _comicElement.y, 'px;',\r
'z-index:', _comicElement.z, ';'\r
].join( '');\r
\r
_balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail );\r
- _elmBalloonWrap.appendChild( _balloon.elm);\r
+ _elmBalloonWrap.appendChild( _balloon.elm );\r
\r
- _elmText = ELM_TEXT_ORIGN.cloneNode( true);\r
- _elmBalloonWrap.appendChild( _elmText);\r
- _elmText.className = NAMESPACE_CLASSNAME + 'speach';\r
- _elmText.getElementsByTagName( 'td')[ 0].appendChild( document.createTextNode( 'hello'));\r
+ _elmText = document.createElement( 'p' );\r
+ _elmBalloonWrap.appendChild( _elmText );\r
+ \r
+ _elmText.appendChild( document.createElement( 'span' ) );\r
+ \r
+ _text = '';\r
+ _speachesAttributes = _comicElement.speaches_attributes;\r
+ if( _speachesAttributes ){\r
+ for( _key in _speachesAttributes ){\r
+ _text += _speachesAttributes[ _key ] && _speachesAttributes[ _key ].content ? _speachesAttributes[ _key ].content : '';\r
+ }\r
+ }\r
+ _elmText.firstChild.appendChild( document.createTextNode( _text ));\r
+ BALLOON_ARRAY.push( _balloon );\r
}\r
}\r
}\r
\r
- return {\r
- build: function( elmTarget, json, zoom, noClassnameMode){\r
- // clean elmTarget\r
- pettanr.util.removeAllChildren( elmTarget);\r
- \r
- // json is Comic ? Panel ?\r
- if( json.panels){\r
- // comic\r
- \r
- } else\r
- if( json.panel_elements){\r
- // panel\r
- buildPanelElement( elmTarget, json, noClassnameMode);\r
- } else {\r
- // invalid json\r
+ function clean(){\r
+ // clean elmTarget\r
+ while( RIMG_ARRAY.length > 0 ){\r
+ RIMG_ARRAY.shift().destroy();\r
+ }\r
+ while( BALLOON_ARRAY.length > 0 ){\r
+ BALLOON_ARRAY.shift().destroy();\r
+ }\r
+ pettanr.util.removeAllChildren( elmTarget ); \r
+ }\r
+ \r
+ this.build = function( json, zoom ){\r
+ clean();\r
+ \r
+ // json is Comic ? Panel ?\r
+ var panels = json.panels;\r
+ if( Type.isArray( panels ) === true ){\r
+ // comic\r
+ for( var i=0, l=panels.length; i<l; ++i ){\r
+ buildPanelElement( panels[ i ], zoom );\r
}\r
+ } else\r
+ if( json.panel_elements ){\r
+ // panel\r
+ buildPanelElement( json, zoom );\r
+ } else {\r
+ // invalid json\r
}\r
}\r
- })();\r
+ this.zoom = function(){\r
+ \r
+ }\r
+ this.destroy = function(){\r
+ clean();\r
+ }\r
+ };\r
\r
- var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode){\r
- typeof json === 'object' && build( elmTarget, json);\r
- \r
- var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false)\r
+ var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode ){\r
+ var builder = new ElementBuilderClass( elmTarget, noClassnameMode );\r
+ var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false );\r
+ var resizer = null;\r
\r
if( zoomSelfEnabled === true){\r
- elmTarget.parentNode.insertBefore( elmDetectW, elmTarget);\r
- new ResizeAgentClass( onResize, elmDetectW);\r
+ elmTarget.parentNode.insertBefore( elmDetectW, elmTarget );\r
+ resizer = new ResizeAgentClass( onResize, elmDetectW );\r
}\r
function onResize(){\r
\r
}\r
- json && ElementBuilder.build( elmTarget, json, zoomSelfEnabled, noClassnameMode);\r
+ json && typeof json === 'object' && builder.build( json );\r
\r
- return {\r
- init: function(){\r
- \r
- },\r
- zoom: function(){\r
+ this.init = function(){\r
\r
- },\r
- json: function( _json){\r
- json = _json;\r
- ElementBuilder.build( elmTarget, _json, zoomSelfEnabled, noClassnameMode);\r
- },\r
- targetElement: function(){\r
- \r
- },\r
- layput: function(){\r
+ }\r
+ this.zoom = function(){\r
+ builder.zoom();\r
+ }\r
+ this.json = function( _json ){\r
+ json = _json;\r
+ builder.build( _json );\r
+ }\r
+ this.targetElement = function(){\r
\r
- },\r
- destroy: function(){\r
+ }\r
+ this.layout = function(){\r
\r
- }\r
+ }\r
+ this.destroy = function(){\r
+ builder.destroy();\r
+ elmTarget = json = builder = null;\r
}\r
}\r
\r
return {\r
- createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode){\r
+ createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode ){\r
var ret = new BindWorkerClass( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode);\r
- BIND_WORKER_ARRAY.push( ret);\r
+ BIND_WORKER_ARRAY.push( ret );\r
return ret;\r
},\r
- isBindWorkerInstance: function( _bindWorker){\r
- \r
+ isBindWorkerInstance: function( _bindWorker ){\r
+ return _bindWorker instanceof BindWorkerClass;\r
}\r
}\r
})();\r
/*
* pettanR system.js
- * version 0.4.33
+ * version 0.4.35
*
* author:
* itozyun
var _uid, _data, _access;
if( typeof UIDorFILEorFILEDATA === 'number'){
- _data = FILEDATA_RESITER[ UIDorFILEorFILEDATA] || null;
+ _data = FILEDATA_RESITER[ UIDorFILEorFILEDATA ] || null;
} else
if( UIDorFILEorFILEDATA instanceof FileClass){
_uid = UIDorFILEorFILEDATA.getUID();
var _data = FILE_CONTROLER.getFileData( _file);
return _data !== null && _data.driver ? _data.driver : FileDriverBase;
},
- getUpdateFlag: function( _file, _bit){
+ getUpdateFlag: function( _file, _bit ){
var _driver = FILE_CONTROLER.getDriver( _file ),
_policy;
if( typeof _driver.getUpdatePolicy === 'function'){
removeEventListener: function( FILEorNULL, _eventType, _callback ){
var _uid = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL,
_ticket;
- for(var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i){
- _ticket = EVENT_LISTENER_REGISTER[i];
- if( _ticket.fileUID === _uid && _ticket.eventType === _eventType && _ticket.callBack === _callback){
- EVENT_LISTENER_REGISTER.splice( i, 1);
+ for(var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i ){
+ _ticket = EVENT_LISTENER_REGISTER[ i ];
+ if( _ticket.fileUID === _uid && _ticket.eventType === _eventType && _ticket.callBack === _callback ){
+ EVENT_LISTENER_REGISTER.splice( i, 1 );
_ticket.destroy();
}
}
}
};
- var FileEventTicketClass = function( UID, _eventType, _callback){
- this.fileUID = UID;
+ var FileEventTicketClass = function( _uid, _eventType, _callback ){
+ this.fileUID = _uid;
this.eventType = _eventType;
- this.callBack = _callback;
- this.destroy = function(){
- this.callBack = _callback = null;
- }
+ this.callBack = _callback;
+ this.destroy = function(){
+ delete this.fileUID;
+ delete this.eventType;
+ delete this.destroy;
+ delete this.callBack;
+ }
+ _uid = _eventType = _callback = undefined;
}
var FileEventClass = function( eventType, file, key, value){
},
read: function(){
// simpleDeepCopy
- var driver = FILE_CONTROLER.getDriver( this );
+ var driver = FILE_CONTROLER.getDriver( this ),
+ data;
if( typeof driver.read === 'function'){
- return driver.read( this );
+ data = driver.read( this );
}
- return FileDriverBase.read( this );
+ return data || FileDriverBase.read( this );
},
write: function( _newData, _onUpdateFunction ){
var driver = FILE_CONTROLER.getDriver( this );
// debug用 全てのメニューを許可
return pettanr.file.FILE_UPDATE_POLICY.DSRWC;
},
- read: function( _file ){
- var data = FILE_CONTROLER.getFileData( _file ),
- protects = pettanr.file.FILE_DATA_PROPERTY_RESERVED;
-
+ read: function( _FILEorDATA ){
+ var data,
+ protects = pettanr.file.FILE_DATA_PROPERTY_RESERVED;
+ if( _FILEorDATA instanceof FileClass ){
+ data = FILE_CONTROLER.getFileData( _FILEorDATA )
+ } else {
+ data = _FILEorDATA;
+ }
+
function clone( src ) {
var ret;
if( Type.isArray(src) === true ){
}
var BreadcrumbClass = function(){
var elmContainer,
- ELM_WRAPPER = ELM_ORIGIN_FINDER_LOCATION_ITEM.cloneNode( true),
+ ELM_WRAPPER = ELM_ORIGIN_FINDER_LOCATION_ITEM.cloneNode( true ),
ELM_FILENAME = ELM_WRAPPER.getElementsByTagName( 'a')[0],
file, w, index, instansce,
callback;
ELM_WRAPPER.onclick = onClick;
function draw(){
- ELM_FILENAME.className = 'file-icon-' +file.getType();
+ ELM_FILENAME.className = 'file-icon-' + file.getType();
ELM_FILENAME.innerHTML = file.getName();
}
function resize( index){
return { className: 'file-type-broken'};
},
getSummary: function( _file ){
- var _data = FileAPI.getFileData( _file),
+ var _data = FileAPI.getFileData( _file ),
_type = _data !== null ? _data.type : null;
if( _type === pettanr.driver.FILE_TYPE.PICTURE){
return [ _data.width, 'x', _data.height, ', filesize:', _data.filesize, ', lisence:', _data.license ].join( '' );
}
return 'pettanR unknown file';
},
+ read: function( _file ){
+ var _data = FileAPI.getFileData( _file ),
+ _type = _data !== null ? _data.type : null,
+ ret;
+ if( _type === pettanr.driver.FILE_TYPE.COMIC ){
+ // children を panels に deepcopy
+ ret = {};
+ for( var key in _data ){
+ ret[ key ] = _data[ key ]
+ }
+ ret.panels = _data.children;
+ return ret;
+ }
+ if( _type === pettanr.driver.FILE_TYPE.PANEL ){
+ }
+ if( _type === pettanr.driver.FILE_TYPE.PANEL_PICTURE ){
+
+ }
+ if( _type === pettanr.driver.FILE_TYPE.BALLOON ){
+ }
+ if( _type === pettanr.driver.FILE_TYPE.PICTURE ){
+ }
+ },
write: function( _file, _newData, _onUpdateFunction ){
var _data = FileAPI.getFileData( _file ),
_type = _data !== null ? _data.type : null;
viewerApplicationList: function( _file ){
var _data = FileAPI.getFileData( _file ),
_type = _data !== null ? _data.type : null;
-
+ if( _type === pettanr.driver.FILE_TYPE.PANEL ){
+ return [ pettanr.reader ];
+ }
+ if( _type === pettanr.driver.FILE_TYPE.COMIC ){
+ return [ pettanr.reader ];
+ }
if( _data === FILE_DATA_MY_PICTURES_ROOT ){
return [ pettanr.premiumSatge ];
}
// よくない! 一時的な処理,,,
//var tree = pettanr.driver.createPictureTree();
//tree.addTreeEventListener( pettanr.file.TREE_EVENT.UPDATE, drawIcons );
-
+ // pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES
delete instance.init;
}
this.onOpen = function( _windowW, _windowH, _ARTISTIDorFILE, _onUpdateFunction ){
}
});
+
+pettanr.reader = pettanr.view.registerApplication( function(){
+ var jqWrap, jqPanelContainer,
+ windowW, windowH,
+ headerH = pettanr.util.getElementSize( document.getElementById( 'comic-reader-header' ) ).height,
+ consoleH = pettanr.util.getElementSize( document.getElementById( 'comic-reader-console' ) ).height,
+ panelMargin,
+ elmContainer = document.getElementById( 'comic-reader-panel-container' ),
+ elmTitle = document.getElementById( 'comic-reader-title' ).firstChild,
+ elmAuthor = document.getElementById( 'comic-reader-author' ).firstChild,
+ elmBackButton = document.getElementById( 'comic-reader-back-button' ),
+ elmNextButton = document.getElementById( 'comic-reader-forward-button' ),
+ ID = 'comicReader',
+ bindWorker = null,
+ currentFile = null;
+ comicData = null,
+ currentPanel = null,
+ currentIndex = 0,
+ numPanel = 0,
+ instance = this;
+
+ function onBackClick(){
+ currentIndex -= ( currentIndex > 0 ? 1 : 0 );
+ slide();
+ return false;
+ }
+ function onNextClick(){
+ currentIndex += ( currentIndex < numPanel - 1 ? 1 : 0 );
+ slide();
+ return false;
+ }
+ function slide(){
+ var elm = elmContainer.childNodes[ currentIndex ],
+ h = windowH - headerH - consoleH,
+ top = headerH;
+ if( elm ){
+ top = headerH - elm.offsetTop + Math.floor( ( h - elm.offsetHeight ) / 2 );
+ }
+
+ jqPanelContainer.stop().animate( {
+ top: top
+ });
+ }
+ function getCurrentTopPosition(){
+
+ }
+ function draw(){
+ var fileData, title, author;
+
+ if( pettanr.driver.isPettanrFileInstance( currentFile ) === true ){
+ if( currentFile.getType() === pettanr.driver.FILE_TYPE.COMIC ){
+ fileData = currentFile.read();
+ title = fileData.title;
+ author = fileData.author.name;
+ comicData = fileData;
+ numPanel = currentFile.getChildFileLength();
+ } else
+ if( currentFile.getType() === pettanr.driver.FILE_TYPE.PANEL ){
+ fileData = currentFile.read();
+ title = fileData.comic.title;
+ author = fileData.comic.author.name;
+ comicData = fileData;
+ numPanel = 1;
+ }
+ } else {
+
+ }
+
+ if( comicData !== null ){
+ elmTitle.data = title;
+ elmAuthor.data = author;
+ bindWorker.json( comicData );
+ window.setTimeout( asyncResize, 0 );
+ }
+ }
+ function asyncResize(){
+ instance.onPaneResize( windowW, windowH );
+ }
+
+ /* grobal method */
+ // this.rootElement = elmWrap;
+ this.displayName = ID;
+ this.ID = ID;
+ this.rootElement = document.getElementById( 'comic-reader-wrapper' );
+ this.MIN_WIDTH = 320;
+ this.MIN_HEIGHT = 320;
+ this.init = function(){
+ jqWrap = $( instance.rootElement );
+ jqPanelContainer = $( elmContainer );
+
+ elmBackButton.onclick = onBackClick;
+ elmNextButton.onclick = onNextClick;
+
+ bindWorker = pettanr.bind.createBindWorker( elmContainer, null, false, false );
+
+ delete instance.init;
+ }
+ this.onOpen = function( _w, _h, _file ){
+ instance.init && instance.init();
+ numPanel = currentIndex = 0;
+
+ jqWrap.show();
+ jqPanelContainer.css({
+ left: _w / 2,
+ top: _h
+ });
+ windowW = _w;
+ windowH = _h;
+ if( pettanr.file.isFileInstance( _file ) === true ){
+ currentFile = _file;
+ _file.addEventListener( pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES, draw );
+ draw();
+ }
+ }
+ this.onPaneResize = function( _windowW, _windowH ){
+ windowW = _windowW;
+ windowH = _windowH;
+ var panelH = elmContainer.offsetHeight,
+ panelW = elmContainer.offsetWidth,
+ h = _windowH - headerH - consoleH;
+ jqPanelContainer.stop().animate(
+ {
+ left: Math.floor( ( _windowW - panelW ) / 2 ),
+ top: headerH + ( panelH < h ? Math.floor( ( h - panelH ) / 2 ) : 0 )
+ }
+ );
+ }
+ this.onClose = function(){
+ jqWrap.hide();
+ currentFile.addEventListener( pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES, draw );
+ currentFile = comicData = currentPanel = null;
+ }
+});
+
// i18n
// login
// lib
/*\r
* pettanR work.js\r
- * version 0.4.33\r
+ * version 0.4.35\r
* \r
* author:\r
* itozyun\r
"z":0,\r
"width":400,\r
"height":362,\r
+ "t":1,\r
"panel_elements":[{\r
"resource_picture":{\r
"id":122,\r
"z":0,\r
"width":300,\r
"height":335,\r
+ "t":2,\r
"panel_elements":[{\r
"resource_picture":{\r
"id":42,\r
\r
/* PettanR Comic\r
--------------------------------------------------------------------------------------*/\r
+.pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
.pettanr-comic-panel {\r
border-style: solid;\r
border-color: #111;\r
margin: 1em auto;\r
overflow: hidden;\r
}\r
- .pettanr-comic-image,\r
- .pettanr-comic-balloon {\r
- position: absolute;\r
- }\r
- .pettanr-comic-image img {\r
- position: absolute;\r
- height: 100%;\r
- width: 100%;\r
- left: 0;\r
- top: 0;\r
- }\r
- .pettanr-comic-panel img {\r
- position: absolute;\r
- left: 0;\r
- top: 0;\r
+ .pettanr-comic-panel img,\r
+ .pettanr-comic-panel .reversible-image-container {\r
+ position: absolute;\r
}\r
- .pettanr-comic-balloon .pettanr-comic-speach {\r
+ .pettanr-comic-balloon {\r
position: absolute;\r
- top: 0;\r
- left: 0;\r
}\r
- .pettanr-comic-speach,\r
- .pettanr-comic-speach tbody,\r
- .pettanr-comic-speach tr,\r
- .pettanr-comic-speach td {\r
- width: 100%;\r
- height: 100%;\r
- border: 0;\r
- padding: 0;\r
- margin: 0 !important;\r
- text-align: center;\r
- vertical-align: middle;\r
+ .pettanr-comic-panel .reversible-image-container img,\r
+ .pettanr-comic-balloon img {\r
+ width: 100%;\r
+ height: 100%; \r
}\r
- .pettanr-comic-speach td {\r
- padding: 16.66%;\r
+ .pettanr-comic-balloon p {\r
+ margin: 0 !important;\r
+ padding: 0 !important; \r
+ display: table;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 16.6%;\r
+ width: 66.6%;\r
+ height: 100%;\r
+ *height: auto;\r
+ *top: 50% !important;\r
}\r
- .pettanr-comic-speach {\r
- table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */\r
- }
\ No newline at end of file
+ .pettanr-comic-balloon p span,\r
+ .pettanr-comic-balloon p strong,\r
+ .pettanr-comic-balloon p em,\r
+ .pettanr-comic-balloon p i,\r
+ .pettanr-comic-balloon p samp,\r
+ .pettanr-comic-balloon p code {\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ font-size: 14px; /* opera6 で使用 13px は不可 */\r
+ display: table-cell;\r
+ *display: block;\r
+ zoom: 1;\r
+ *position: relative;\r
+ *top: -50%;\r
+ }\r
+ .pettanr-comic-balloon p strong {\r
+ font-weight: bold;\r
+ }\r
+ .pettanr-comic-balloon p em,\r
+ .pettanr-comic-balloon p i {\r
+ font-style: italic;\r
+ }\r
+ .pettanr-comic-balloon p samp,\r
+ .pettanr-comic-balloon p code {\r
+ font-family: monospace;\r
+ }
\ No newline at end of file
position: absolute;\r
top: 9px;\r
right: 9px;\r
+ z-index: 9999;\r
border-radius: 5px;\r
-o-border-radius: 5px;\r
-ms-border-radius: 5px;\r
width: 180px;\r
text-align: center;\r
}\r
- \r
-\r
+ /* Comic Reader\r
+ --------------------------------------------------------------------------------------*/\r
+ #comic-reader-wrapper {}\r
+ #comic-reader-panel-container {\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ }\r
+ #comic-reader-header,\r
+ #comic-reader-console {\r
+ position: absolute;\r
+ left; 0;\r
+ width: 100%;\r
+ z-index: 9998;\r
+ }\r
+ #comic-reader-header {\r
+ top: 0;\r
+ height: 40px;\r
+ }\r
+ .comic-reader-shadow {\r
+ z-index: 9997;\r
+ position: absolute;\r
+ width: 100%;\r
+ left; 0;\r
+ width: 100%;\r
+ height: 40px;\r
+ background: #000;\r
+ opacity: 0.5;\r
+ -moz-opacity: 0.5;\r
+ -khtml-opacity: 0.5;\r
+ }\r
+ .pettanr-ActiveX-enabled .comic-reader-shadow {\r
+ filter: alpha(opacity=50);\r
+ -ms-filter: alpha(opacity=50); \r
+ }\r
+ .pettanr-ActiveX-disabled .comic-reader-shadow {\r
+ background: transparent url( black_50pct.png) repeat 0 0;\r
+ _background: url( black_50pct.gif) repeat 0 0;\r
+ }\r
+ #comic-reader-header-content {\r
+ height: 24px;\r
+ padding-top: 16px;\r
+ border-bottom: 1px solid #fff;\r
+ }\r
+ #comic-reader-title {\r
+ font-size: 20px;\r
+ line-height: 24px;\r
+ color: #fff;\r
+ font-weight: bold;\r
+ }\r
+ #comic-reader-author {\r
+ font-size: 18px;\r
+ line-height: 24px;\r
+ color: #ddd;\r
+ text-indent: 1em;\r
+ }\r
+ #comic-reader-console {\r
+ bottom: 0;\r
+ height: 100px;\r
+ border-top: 1px solid #fff;\r
+ }\r
+ #comic-reader-button-centering {\r
+ position: relative;\r
+ margin: 0 auto;\r
+ width: 399px;\r
+ }\r
+ #comic-reader-back-button,\r
+ #comic-reader-forward-button,\r
+ #comic-reader-back-button:link,\r
+ #comic-reader-forward-button:link {\r
+ display: block;\r
+ zoom: 1;\r
+ position: absolute;\r
+ top: 0;\r
+ height: 100px;\r
+ line-height: 100px;\r
+ color: #ddd;\r
+ width: 198px;\r
+ border-left: 1px solid #999;\r
+ border-right: 1px solid #999;\r
+ text-align: center;\r
+ font-size: 30px;\r
+ }\r
+ #comic-reader-back-button:hover,\r
+ #comic-reader-forward-button:hover {\r
+ background-color: #111;\r
+ color: #fff;\r
+ font-size: 34px;\r
+ text-decoration: none;\r
+ }\r
+ #comic-reader-back-button {\r
+ left: 0;\r
+ border-right: 1px solid #ccc;\r
+ }\r
+ #comic-reader-forward-button {\r
+ right: 0;\r
+ }\r
\r
/* Output Console\r
--------------------------------------------------------------------------------------*/\r
\r
/* PettanR Comic\r
--------------------------------------------------------------------------------------*/\r
-.pettanr-comic-wrapper {\r
+.test_pettanr-comic-wrapper {\r
margin: 1em auto;\r
}\r
- .pettanr-comic-panel {\r
+ .test_pettanr-comic-panel {\r
border-style: solid;\r
border-color: #111;\r
position: relative;\r
margin: 1em 0;\r
overflow: hidden;\r
}\r
- .pettanr-comic-panel img {\r
+ .test_pettanr-comic-panel img {\r
position: absolute;\r
}\r
- .pettanr-comic-balloon {\r
+ .test_pettanr-comic-balloon {\r
position: absolute;\r
}\r
- .pettanr-comic-balloon img {\r
+ .test_pettanr-comic-balloon img {\r
width: 100%;\r
height: 100%; \r
}\r
- .pettanr-comic-balloon p {\r
+ .test_pettanr-comic-balloon p {\r
margin: 0 !important;\r
padding: 0 !important; \r
display: table;\r
*top: 50% !important;\r
\r
}\r
- .pettanr-comic-balloon p span,\r
- .pettanr-comic-balloon p strong,\r
- .pettanr-comic-balloon p em,\r
- .pettanr-comic-balloon p i,\r
- .pettanr-comic-balloon p samp,\r
- .pettanr-comic-balloon p code {\r
+ .test_pettanr-comic-balloon p span,\r
+ .test_pettanr-comic-balloon p strong,\r
+ .test_pettanr-comic-balloon p em,\r
+ .test_pettanr-comic-balloon p i,\r
+ .test_pettanr-comic-balloon p samp,\r
+ .test_pettanr-comic-balloon p code {\r
vertical-align: middle;\r
text-align: center;\r
font-size: 14px; /* opera6 で使用 13px は不可 */\r
*position: relative;\r
*top: -50%;\r
}\r
- .pettanr-comic-balloon p strong {\r
+ .test_pettanr-comic-balloon p strong {\r
font-weight: bold;\r
}\r
- .pettanr-comic-balloon p em,\r
- .pettanr-comic-balloon p i {\r
+ .test_pettanr-comic-balloon p em,\r
+ .test_pettanr-comic-balloon p i {\r
font-style: italic;\r
}\r
- .pettanr-comic-balloon p samp,\r
- .pettanr-comic-balloon p code {\r
+ .test_pettanr-comic-balloon p samp,\r
+ .test_pettanr-comic-balloon p code {\r
font-family: monospace;\r
} \r
\r
- .show-border .pettanr-comic-balloon {\r
+ .show-border .test_pettanr-comic-balloon {\r
border: 1px solid green;\r
} \r
- .show-border .pettanr-comic-balloon p {\r
+ .show-border .test_pettanr-comic-balloon p {\r
border: 1px solid red;\r
}\r
- .show-border .pettanr-comic-balloon p span,\r
- .show-border .pettanr-comic-balloon p strong,\r
- .show-border .pettanr-comic-balloon p em,\r
- .show-border .pettanr-comic-balloon p i,\r
- .show-border .pettanr-comic-balloon p samp,\r
- .show-border .pettanr-comic-balloon p code {\r
+ .show-border .test_pettanr-comic-balloon p span,\r
+ .show-border .test_pettanr-comic-balloon p strong,\r
+ .show-border .test_pettanr-comic-balloon p em,\r
+ .show-border .test_pettanr-comic-balloon p i,\r
+ .show-border .test_pettanr-comic-balloon p samp,\r
+ .show-border .test_pettanr-comic-balloon p code {\r
border: 1px solid blue;\r
}\r
</style>\r
<div id="swbutton" class="button" onclick="switchBorder();" style="width:100px;margin:10px auto;">show border</div>\r
\r
<div id="html2comic">\r
- <div class="pettanr-comic-wrapper" style="width: 400px;">\r
- <div class="pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <div class="test_pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
<img src="../resource_pictures/1.png"\r
alt="目の血走ったペンギンが拳を握り締めている"\r
title="キャラクター名:キンイチ, 絵師:yas"\r
width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
>\r
- <div class="pettanr-comic-balloon"\r
+ <div class="test_pettanr-comic-balloon"\r
style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;"\r
>\r
<img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
<p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か?</span></p>\r
</div>\r
- <div class="pettanr-comic-balloon"\r
+ <div class="test_pettanr-comic-balloon"\r
style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;"\r
>\r
<img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
<p>パネルピクチャはひとつの <img> タグで表示されます.</p>\r
<p>バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <p> と <span> からなる.</p>\r
<pre class="brush: xml;">\r
-<div class="pettanr-comic-wrapper" style="width: 400px;">\r
- <div class="pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+<div class="test_pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
<img src="../resource_pictures/1.png"\r
alt="目の血走ったペンギンが拳を握り締めている"\r
title="キャラクター名:キンイチ, 絵師:yas"\r
width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
>\r
- <div class="pettanr-comic-balloon"\r
+ <div class="test_pettanr-comic-balloon"\r
style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;"\r
>\r
<img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
<p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か?</span></p>\r
</div>\r
- <div class="pettanr-comic-balloon"\r
+ <div class="test_pettanr-comic-balloon"\r
style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;"\r
>\r
<img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
<p>css2 の <code>display: table, display: table-cell</code> を使って吹き出し内のテキストの上下中央配置を行う.</p>\r
<p><code>display: table</code> をサポートしない ie7 以下は、入れ子になった要素を上下に 50% ずらす、という手法で上下中央配置している.その様子を、show border ボタンを使って確認されたし.( 参考 <a href="http://scuderia-web.com/tips/xhtml_css/div_vertical_align.php" target="_blank">tableを使わずdivで縦位置を指定</a> )</p>\r
<pre class="brush: css;">\r
-.pettanr-comic-wrapper {\r
+.test_pettanr-comic-wrapper {\r
margin: 1em auto;\r
}\r
- .pettanr-comic-panel {\r
+ .test_pettanr-comic-panel {\r
border-style: solid;\r
border-color: #111;\r
position: relative;\r
margin: 1em 0;\r
overflow: hidden;\r
}\r
- .pettanr-comic-panel img {\r
+ .test_pettanr-comic-panel img {\r
position: absolute;\r
}\r
- .pettanr-comic-balloon {\r
+ .test_pettanr-comic-balloon {\r
position: absolute;\r
}\r
- .pettanr-comic-balloon img {\r
+ .test_pettanr-comic-balloon img {\r
width: 100%;\r
height: 100%; \r
}\r
- .pettanr-comic-balloon p {\r
+ .test_pettanr-comic-balloon p {\r
margin: 0 !important;\r
padding: 0 !important; \r
display: table;\r
*top: 50% !important;\r
\r
}\r
- .pettanr-comic-balloon p span,\r
- .pettanr-comic-balloon p strong,\r
- .pettanr-comic-balloon p em,\r
- .pettanr-comic-balloon p i,\r
- .pettanr-comic-balloon p samp,\r
- .pettanr-comic-balloon p code {\r
+ .test_pettanr-comic-balloon p span,\r
+ .test_pettanr-comic-balloon p strong,\r
+ .test_pettanr-comic-balloon p em,\r
+ .test_pettanr-comic-balloon p i,\r
+ .test_pettanr-comic-balloon p samp,\r
+ .test_pettanr-comic-balloon p code {\r
vertical-align: middle;\r
text-align: center;\r
font-size: 14px; /* opera6 で使用 13px は不可 */\r
*position: relative;\r
*top: -50%;\r
}\r
- .pettanr-comic-balloon p strong {\r
+ .test_pettanr-comic-balloon p strong {\r
font-weight: bold;\r
}\r
- .pettanr-comic-balloon p em,\r
- .pettanr-comic-balloon p i {\r
+ .test_pettanr-comic-balloon p em,\r
+ .test_pettanr-comic-balloon p i {\r
font-style: italic;\r
}\r
- .pettanr-comic-balloon p samp,\r
- .pettanr-comic-balloon p code {\r
+ .test_pettanr-comic-balloon p samp,\r
+ .test_pettanr-comic-balloon p code {\r
font-family: monospace;\r
} \r
</pre>\r
<div id="image-group-button" class="button">close</div>\r
</div>\r
\r
+ <!-- コミック リーダー -->\r
+ <div id="comic-reader-wrapper">\r
+ <div id="comic-reader-panel-container"></div>\r
+ <div class="comic-reader-shadow" style="top:0;height:40px;"></div>\r
+ <div id="comic-reader-header">\r
+ <div id="comic-reader-header-content">\r
+ <span id="comic-reader-title">NO DATA...</span>\r
+ <span id="comic-reader-author">NO DATA...</span>\r
+ </div>\r
+ </div>\r
+ <div class="comic-reader-shadow" style="bottom:0;height:100px;"></div>\r
+ <div id="comic-reader-console">\r
+ <div id="comic-reader-button-centering">\r
+ <a href="#" id="comic-reader-back-button">▲</da>\r
+ <a href="#" id="comic-reader-forward-button">▼</a>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
<!-- 作家登録 -->\r
<div id="artist-console-wrapper" class="console-wrapper">\r
<div id="artist-console-header" class="console-header">Register Artist</div>\r
</div>\r
\r
</div>\r
+\r
<script type="text/javascript">\r
var has_server_support = false;\r
</script>\r