/*\r
* pettanR common.js\r
- * version 0.4.29\r
+ * version 0.4.37\r
* \r
* author: itozyun\r
*/\r
\r
var pettanr = ( function(){\r
var FUNCTION_ARRAY = [],\r
- URL = document.location.href.split( '#')[ 0],\r
+ URL = document.location.href.split( '#')[ 0 ],\r
IS_LOCAL = URL.indexOf( 'file:') === 0,\r
URL_PARAMS = ( function(){\r
var search = document.location.search,\r
IS_DEBUG = Type.isBoolean( URL_PARAMS.debug ) ? URL_PARAMS.debug : IS_LOCAL === true,\r
jqWindow , jqDocument , jqBody;\r
return {\r
- version: '0.4.28',\r
+ version: '0.4.36',\r
init: function(){\r
- jqWindow = $( window);\r
- jqDocument = $( document);\r
- jqBody = $( document.body);\r
+ jqWindow = $( window );\r
+ jqDocument = $( document );\r
+ jqBody = $( document.body );\r
\r
var l = FUNCTION_ARRAY.length,\r
_fn;\r
var pre = document.createElement('pre');\r
pre.appendChild( document.createTextNode('\n'));\r
return pre.firstChild.data;\r
- })(),\r
- IS_IFRAME: !!window.parent\r
+ })()\r
}\r
})();\r
\r
}\r
}\r
return {\r
- extend: function( baseInstance, extend){\r
- for( var key in extend){\r
- if( typeof baseInstance[ key] === 'undefined'){\r
- baseInstance[ key] = extend[ key];\r
+ extend: function( baseInstance, extend ){\r
+ for( var key in extend ){\r
+ if( Type.isUndefined( baseInstance[ key ] ) === true ){\r
+ baseInstance[ key ] = extend[ key ];\r
} else\r
- if( typeof baseInstance[ key] === typeof extend[ key]){\r
- baseInstance[ key] = extend[ key];\r
+ if( typeof baseInstance[ key ] === typeof extend[ key ] ){\r
+ baseInstance[ key ] = extend[ key ];\r
} else {\r
- alert( 'extend error');\r
+ alert( 'extend error' );\r
}\r
}\r
return baseInstance;\r
_elm.style.behavior = '';\r
}\r
},\r
- getElementSize: function( _elm){\r
- if( !_elm){\r
+ getElementSize: function( _elm ){\r
+ if( Type.isHTMLElement( _elm ) === false ){\r
return {\r
width: 0,\r
height: 0\r
- }\r
- }\r
- var parentElm = _elm.parentNode,\r
- prevElm = _elm.previousSibling,\r
- nextElm = _elm.nextSibling,\r
+ };\r
+ };\r
+ var parentElm = _elm.parentNode,\r
+ prevElm = _elm.previousSibling,\r
+ nextElm = _elm.nextSibling,\r
displayNone = _elm.style.display === 'none';\r
- if( displayNone === true) _elm.style.display = '';\r
- ELM_SIZE_GETTER.appendChild( _elm);\r
+ if( displayNone === true ) _elm.style.display = '';\r
+ ELM_SIZE_GETTER.appendChild( _elm );\r
var ret = {\r
width: _elm.offsetWidth,\r
height: _elm.offsetHeight\r
}\r
- if( displayNone === true) _elm.style.display = 'none';\r
- if( nextElm){\r
- parentElm.insertBefore( _elm, nextElm);\r
+ if( displayNone === true ) _elm.style.display = 'none';\r
+ if( nextElm ){\r
+ parentElm.insertBefore( _elm, nextElm );\r
} else \r
- if( prevElm && prevElm.nextSibling){\r
- parentElm.insertBefore( _elm, prevElm.nextSibling);\r
+ if( prevElm && prevElm.nextSibling ){\r
+ parentElm.insertBefore( _elm, prevElm.nextSibling );\r
} else {\r
- parentElm && parentElm.appendChild( _elm);\r
+ parentElm && parentElm.appendChild( _elm );\r
} \r
return ret;\r
},\r
\r
\r
pettanr.CONST = ( function(){\r
- var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false,\r
- isLocalhost = document.location.href.indexOf( 'http:\/\/localhost:3000\/' ) === 0,\r
- PETTANR_ROOT_PATH = isLocalhost === true ? 'http:\/\/localhost:3000\/' : 'http:\/\/pettanr.heroku.com\/',\r
- location = document.location.pathname,\r
- deep = location.indexOf( '\/diary\/' ) !== -1 ||\r
- location.indexOf( '\/test\/' ) !== -1 ||\r
- location.indexOf( '\/help\/' ) !== -1 ||\r
- location.indexOf( '\/sitemap\/' ) !== -1 ||\r
- location.indexOf( '\/wiki\/' ) !== -1;\r
+ var SERVER_SUPPORT = !( 'has_server_support' in window && has_server_support === false ),\r
+ PETTANR_ROOT_PATH = ( function(){\r
+ if( SERVER_SUPPORT === false ){\r
+ var h1 = document.getElementsByTagName( 'h1' )[ 0 ];\r
+ if( h1 ){\r
+ var a = h1.getElementsByTagName( 'a' )[ 0 ];\r
+ return a ? a.href : '';\r
+ }\r
+ return '';\r
+ }\r
+ var loc = document.location;\r
+ return [ loc.protocol, '\/\/', loc.host, '\/' ].join( '' );\r
+ })(),\r
+ RELATIVE = ( function(){\r
+ var ret = '',\r
+ loc = document.location,\r
+ path = [ loc.protocol, '\/', loc.host, '\/', loc.pathname.split( '\\' ).join( '\/' ) ].join( '' ),\r
+ l = path.split( '\/' ).length - PETTANR_ROOT_PATH.split( '\/' ).length;\r
+ for( var i=0; i<l; ++i ){\r
+ ret += '..\/';\r
+ }\r
+ return ret;\r
+ })();\r
\r
return {\r
PETTANR_ROOT_PATH: PETTANR_ROOT_PATH,\r
- URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'original_pictures.json',\r
- URL_RESOURCE_PICTURES_JSON: ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'resource_pictures.json',\r
- URL_COMICS_JSON: ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'comics.json',\r
- URL_PANELS_JSON: ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'panels.json',\r
+ URL_ORIGINAL_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'original_pictures.json',\r
+ URL_RESOURCE_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'resource_pictures.json',\r
+ URL_COMICS_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'comics.json',\r
+ URL_PANELS_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'panels.json',\r
NS_PETTANR_COMIC: 'pettanr-comic',\r
- RESOURCE_PICTURE_PATH: ( isLocal === true ? ( deep === true ? '..\/' : '' ) : PETTANR_ROOT_PATH ) + 'resource_pictures\/',\r
- CREATE_COMIC_JS: isLocal === true ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',\r
- CREATE_PANEL_JS: isLocal === true ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',\r
- UPLOAD_PICTURE_JS: isLocal === true ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',\r
- REGISTER_ARTIST_JS: isLocal === true ? 'js\/register_artist.js' : PETTANR_ROOT_PATH + 'artists\/new.js',\r
- JQUERY_URL: isLocal === true ? 'javascripts\/jquery-1.6.2.min.js' : PETTANR_ROOT_PATH + 'assets\/jquery-162_min.js'\r
+ RESOURCE_PICTURE_PATH: ( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'resource_pictures\/',\r
+ SYSTEM_PICTURE_PATH: ( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'system_pictures\/',\r
+ CREATE_COMIC_JS: SERVER_SUPPORT === false ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',\r
+ CREATE_PANEL_JS: SERVER_SUPPORT === false ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',\r
+ UPLOAD_PICTURE_JS: SERVER_SUPPORT === false ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',\r
+ REGISTER_ARTIST_JS: SERVER_SUPPORT === false ? 'js\/register_artist.js' : PETTANR_ROOT_PATH + 'artists\/new.js',\r
+ JQUERY_URL: SERVER_SUPPORT === false ? 'javascripts\/jquery-1.6.2.min.js' : PETTANR_ROOT_PATH + 'assets\/jquery-162_min.js',\r
+ SERVER_SUPPORT: SERVER_SUPPORT\r
}\r
})();\r
\r
pettanr.view = ( function(){\r
/* create iframe overlay for user console */\r
- var location = document.location.pathname,\r
- isWorkPage = document.location.href.indexOf( 'http:\/\/localhost:3000\/' ) === 0 ||\r
- document.location.href.indexOf( pettanr.CONST.PETTANR_ROOT_PATH ) === 0 ||\r
- location.indexOf( '\/work.html') !== -1 ||\r
- location.indexOf( '\work.html') !== -1, // for ie6\r
- deep = location.indexOf( '\/diary\/') !== -1 ||\r
- location.indexOf( '\/test\/') !== -1 ||\r
- location.indexOf( '\/help\/') !== -1 ||\r
- location.indexOf( '\/sitemap\/') !== -1 ||\r
- location.indexOf( '\/wiki\/') !== -1,\r
- LoginUserNavi;\r
-\r
- if( isWorkPage === false){\r
- LoginUserNavi = {\r
- show: function(){\r
- var i = pettanr.util.getChildIndex( this.parentNode, this );\r
- document.location.href = [\r
- deep === true ? '../' : '',\r
- 'work.html',\r
- typeof i === 'number' ? '?view=' + i : ''\r
- ].join( '');\r
- return false;\r
- },\r
- hide: function(){}\r
- }\r
- } else {\r
- LoginUserNavi = {\r
+ var LoginUserNavi = {\r
show: function(){\r
var i = pettanr.util.getChildIndex( this.parentNode, this );\r
i !== -1 && bootApplication( i );\r
},\r
hide: function(){}\r
}\r
- }\r
\r
/* debug info */\r
// ua version, lang, os, plugin ( vml, svg), standerdmode, balloon, rimg\r
if( this.MIN_WIDTH > _w || this.MIN_HEIGHT > _h ){\r
if( Type.isHTMLElement( this.rootElement ) === true ){\r
// 小さすぎる！、と表示\r
- }\r
+ };\r
return;\r
- }\r
+ };\r
this.onPaneResize( _w, _h );\r
- }\r
+ };\r
this.MIN_WIDTH = 240;\r
this.MIN_HEIGHT = 240;\r
}\r
this.rootElement = null;\r
this.parentElement = null;\r
this.nextSibling = null;\r
+ this.getUID = function(){\r
+ return pettanr.util.getIndex( APPLICATION_LIST, instance );\r
+ }\r
this.open = function( _w, _h /*, _option */ ){\r
instance = this;\r
if( this.MIN_WIDTH > _w || this.MIN_HEIGHT > _h ){\r
} else {\r
this.onOpen( _w, _h );\r
}\r
- }\r
+ };\r
this.close = function(){\r
if( this.onClose() === false ){\r
return false;\r
}\r
- }\r
+ };\r
this.onOpen = function( _w, _h /*, _option */ ){\r
// overrride\r
};\r
this.onClose = function(){\r
// overrride\r
return true;\r
- } // false の場合、close の拒否 \r
- this.addEventListener = function(){\r
- \r
- }\r
+ }; // false の場合、close の拒否 \r
+ this.addMouseEventListener = function( _element, _eventType, _handler ){\r
+ MouseEventManager.add( instance, _element, _eventType, _handler );\r
+ };\r
}\r
AbstractApplication.prototype = new AbstractBasicPane();\r
\r
}\r
\r
function bootApplication( APPLICATIONorINDEX, _arguments ){\r
- if( isWorkPage === false ) return;\r
-\r
var _application,\r
i, j, l, \r
nodesA = document.getElementById('global-navi').getElementsByTagName( 'a') || [],\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
* \r
*/\r
pettanr.balloon = ( function() {\r
- var MIN_BALLOON_WIDTH = 30,\r
+ var MIN_BALLOON_WIDTH = 30,\r
MIN_BALLOON_HEIGHT = 30,\r
- TAIL_WIDTH = 6,\r
- TAIL_HEIGHT = 10,\r
- STROKE_WIDTH = 1.2,\r
- PADDING_TOP = TAIL_HEIGHT,\r
- PADDING_LEFT = TAIL_HEIGHT,\r
- ACCURACY = 1, // 有効少数桁 \r
- IS_VML = pettanr.ua.isIE === true && pettanr.ua.ieVersion < 9,\r
+ NUM_BALLOON_IMAGE = 24,\r
+ TAIL_WIDTH = 6,\r
+ TAIL_HEIGHT = 10,\r
+ STROKE_WIDTH = 1.2,\r
+ PADDING_TOP = TAIL_HEIGHT,\r
+ PADDING_LEFT = TAIL_HEIGHT,\r
+ IS_VML = pettanr.ua.isIE === true && pettanr.ua.ieVersion < 9,\r
ELM_BALLOON_ORIGIN = ( function(){\r
var ret;\r
try {\r
return null;\r
}\r
})(),\r
- NUM_BALLOON_IMAGE = 24,\r
- vectorEnabled = ELM_BALLOON_ORIGIN !== null && pettanr.URL_PARAMS.vector !== false;\r
- if( IS_VML === true && pettanr.ua.VML === false ) vectorEnabled = false;\r
+ vectorEnabled = ELM_BALLOON_ORIGIN !== null &&\r
+ pettanr.URL_PARAMS.vector !== false &&\r
+ !( IS_VML === true && pettanr.ua.VML === false );\r
\r
- var cos = Math.cos, sin = Math.sin,\r
- abs = Math.abs, pow = Math.pow,\r
- round = Math.round,\r
- floor = Math.floor,\r
- TARGET = TAIL_WIDTH * TAIL_WIDTH,\r
+ var cos = Math.cos,\r
+ sin = Math.sin,\r
+ abs = function(v){ return v >= 0 ? v : -1; },\r
+ pow = Math.pow,\r
+ round = Math.round,\r
+ floor = Math.floor,\r
+ TARGET = TAIL_WIDTH * TAIL_WIDTH,\r
+ isFinit = Type.isFinite,\r
+ ACCURACY = 1, // 有効少数桁 \r
+ cround = function ( v, r ){\r
+ r = r || ACCURACY;\r
+ return round( v * pow( 10.0, r )) / pow( 10.0, r );\r
+ },\r
DEG_TO_RAD = Math.PI / 180;\r
\r
var XBROWSER_BALLOON_CLASS = function( w, h, a ){\r
instance = this,\r
l = ',';\r
\r
- draw( a, w, h );\r
- \r
- function draw( _a, _w, _h ){\r
- a = _a !== undefined ? _a : a;\r
- _a = a;// - 90;\r
- w = _w !== undefined ? _w - PADDING_TOP * 2 : w;\r
- h = _h !== undefined ? _h - PADDING_LEFT * 2 : h;\r
-\r
- if( vectorEnabled === false){\r
- balloonElm.setAttribute( 'src', balloonUrlBuilder( _a ));\r
- return;\r
- }\r
- \r
- var rx = w /2,\r
- ry = h /2,\r
+ function draw( _a ){\r
+ var rx = w / 2,\r
+ ry = h / 2,\r
tailRad = _a * DEG_TO_RAD,\r
- tailX = rx +( rx +TAIL_HEIGHT ) * cos( tailRad ),\r
- tailY = ry +( ry +TAIL_HEIGHT ) * sin( tailRad ),\r
+ tailX = rx + ( rx + TAIL_HEIGHT ) * sin( tailRad ),\r
+ tailY = ry - ( ry + TAIL_HEIGHT ) * cos( tailRad ),\r
startX, startY, endX, endY;\r
/*\r
* tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算\r
for( var i = 45; i > 0.01; i /= 2){\r
d = ( tailDeg + i ) /2;\r
startRad = ( _a + d ) * DEG_TO_RAD;\r
- endRad = ( _a - d ) * DEG_TO_RAD;\r
+ endRad = ( _a - d ) * DEG_TO_RAD;\r
\r
- _startX = rx +cos( startRad ) * rx;\r
- _startY = ry +sin( startRad ) * ry;\r
- _endX = rx +cos( endRad) * rx;\r
- _endY = ry +sin( endRad) * ry; //円弧上のY位置＝円中心Y＋sin(角度×PI÷180)×円半径\r
+ _startX = rx + sin( startRad ) * rx;\r
+ _startY = ry - cos( startRad ) * ry;\r
+ _endX = rx + sin( endRad ) * rx;\r
+ _endY = ry - cos( endRad ) * ry; //円弧上のY位置＝円中心Y＋sin(角度×PI÷180)×円半径\r
\r
- if( pow( ( _startX - _endX), 2 ) + pow( ( _startY - _endY ), 2 ) < TARGET ){\r
+ if( pow( ( _startX - _endX ), 2 ) + pow( ( _startY - _endY ), 2 ) < TARGET ){\r
tailDeg += i;\r
- startX = _startX;\r
- startY = _startY;\r
- endX = _endX;\r
- endY = _endY; \r
+ startX = _startX;\r
+ startY = _startY;\r
+ endX = _endX;\r
+ endY = _endY;\r
}\r
}\r
\r
if( IS_VML === true ){\r
var _tailX = tailX *10,\r
_tailY = tailY *10,\r
- __startX = startX *10,\r
- __startY = startY *10,\r
- __endX = endX *10,\r
- __endY = endY *10,\r
__w = w *10,\r
__h = h *10;\r
\r
shape.coordsize = [ __w, __h ].join( l );\r
shape.path = [\r
' ar ', 0, l, 0, l, __w, l, __h, l,\r
- round( __endX ), l, round( __endY ), l,\r
- round( __startX ), l, round( __startY ),\r
+ round( endX * 10 ), l, round( endY * 10 ), l,\r
+ round( startX * 10 ), l, round( startY * 10 ),\r
' l ', round( _tailX ), l, round( _tailY ),\r
' x e'\r
].join( '');\r
'z'\r
].join( ' '));\r
}\r
- function cround( v, r){\r
- r = r || ACCURACY;\r
- return round( v * pow( 10.0, r )) / pow( 10.0, r );\r
- }\r
}\r
\r
- function balloonUrlBuilder( _a ){\r
- var d = 360 / NUM_BALLOON_IMAGE;\r
- _a = ( _a >= _a ? _a : _a + 360 ) + d / 2;\r
- return [ 'system_pictures\/_w', _a < 360 - d / 2 ? floor( _a / d ) : 0, '.gif' ].join( '' );\r
- }\r
this.elm = balloonElm;\r
- this.resize = draw;\r
+ this.resize = function ( _a, _w, _h ){\r
+ w = isFinit( _w ) === true ? _w - PADDING_TOP * 2 : w;\r
+ h = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : h;\r
+ // ie6 でリサイズが反応しない対策\r
+ if( vectorEnabled === false && pettanr.ua.isIE === true && pettanr.ua.ieVersion < 7 ){\r
+ var parent = balloonElm.parentNode;\r
+ parent.removeChild( balloonElm );\r
+ parent.insertBefore( balloonElm, parent.firstChild );\r
+ }\r
+ instance.angle( _a );\r
+ };\r
this.angle = function( _a ){\r
- _a !== undefined && _a !== a &&\r
- vectorEnabled === false ? balloonUrlBuilder( _a ) : draw( _a );\r
+ if( isFinit( _a ) === true ){\r
+ a = _a;\r
+ if( vectorEnabled === false ){\r
+ balloonElm.src = pettanr.balloon.getBalloonUrl( w, h, _a );\r
+ } else {\r
+ draw( _a );\r
+ }\r
+ }\r
return a;\r
}\r
this.type = function( _type ){\r
//draw( _a);\r
}\r
- this.getURL = function(){\r
- return balloonUrlBuilder( a );\r
- }\r
this.destroy = function(){\r
delete instance.destroy;\r
balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm );\r
balloonElm = path = shape = instance = null;\r
}\r
+ \r
+ instance.resize( a, w, h );\r
};\r
\r
IS_VML === false && vectorEnabled === true && ( function(){\r
})();\r
\r
return {\r
- createBalloon: function( _w, _h, _a){\r
+ createBalloon: function( _w, _h, _a ){\r
return new XBROWSER_BALLOON_CLASS( _w, _h, _a );\r
},\r
+ isBalloonInstance: function( _ballon ){\r
+ \r
+ },\r
+ getBalloonUrl: function( _w, _h, _a ){\r
+ var d = 360 / NUM_BALLOON_IMAGE;\r
+ _a = _a + d / 2;\r
+ return [\r
+ pettanr.CONST.SYSTEM_PICTURE_PATH, '_w',\r
+ _a < 360 - d / 2 ? floor( _a / d ) : 0,\r
+ _w <= 400 || _h <= 400 ? '_b1' : '',\r
+ '.gif' ].join( '' );\r
+ },\r
TYPE_NONE: 0,\r
TYPE_SPEACH_BALLOON: 1,\r
TYPE_THINKING: 2,\r
destroy();\r
}\r
function destroy(){\r
- finish = true;\r
+ finish = true;\r
img.src = img.onload = img.onabort = img.onerror = '';\r
- img = void 0\r
- size = onLoadCallback = onErrorCallback = timer = null;\r
+ img = void 0;\r
+ size = onLoadCallback = onErrorCallback = timer = null;\r
}\r
this.stop = function(){\r
timer !== null && window.clearTimeout( timer );\r
}\r
})();\r
\r
- var REG_PNG = /\.png?/i,\r
- IS_CSS3 = 0,\r
- IS_VML = 1,\r
- IS_ACTIVEX = 2,\r
- IS_CANVAS = 3,\r
- IS_FLASH = 4,\r
- IS_SILVERLIGHT = 5,\r
- IS_SERVER = 6,\r
+ var REG_PNG = /\.png?/i,\r
+ IS_CSS3 = 0,\r
+ IS_VML = 1,\r
+ IS_ACTIVEX = 2,\r
+ IS_CANVAS = 3,\r
+ IS_FLASH = 4,\r
+ IS_SILVERLIGHT = 5,\r
+ IS_SERVER = 6,\r
IS_ACTIVEX_SERVER = 7,\r
BACKEND = ( function(){\r
if( pettanr.DEBUG === true && pettanr.URL_PARAMS.rimg ){\r
if( pettanr.ua.ACTIVEX === true ) return IS_ACTIVEX_SERVER;\r
return IS_SERVER;\r
})(),\r
- CLASS_NAME = 'reversible-image-container',\r
+ CLASS_NAME = 'reversible-image-container',\r
CLASS_NAME_LOADING = CLASS_NAME + ' loading',\r
- CLASS_NAME_ERROR = CLASS_NAME +' error',\r
- RETRY_DELAY = 5000,\r
- NUM_RETRY = 3,\r
+ CLASS_NAME_ERROR = CLASS_NAME +' error',\r
+ RETRY_DELAY = 5000,\r
+ NUM_RETRY = 3,\r
ReversibleImageClass,\r
ReversibleImageClassWithPingfix;\r
\r
var css3Image = function( url, w, h, onLoadCallback ){\r
- var elmWrap = document.createElement( 'div' ),\r
- elmImg,\r
- loaded = false,\r
+ var elmWrap = document.createElement( 'div' ),\r
+ elmImg = null,\r
retryTimer = null,\r
- fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),\r
- instance = this;\r
+ fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),\r
+ instance = this;\r
elmWrap.className = CLASS_NAME_LOADING;\r
\r
function onLoad( _url, _actualW, _actualH ){\r
elmWrap.className = CLASS_NAME;\r
onLoadCallback && onLoadCallback( _url, _actualW, _actualH );\r
onLoadCallback = fetch = null;\r
- loaded = true;\r
instance.resize( w, h );\r
}\r
function onError( _url ){\r
this.resize = function( _w, _h ){\r
w = _w !== undefined ? _w : w;\r
h = _h !== undefined ? _h : h;\r
- if( loaded === false ) return;\r
+ if( elmImg === null ) return;\r
elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
}\r
this.destroy = function(){\r
delete instance.destroy;\r
\r
- loaded === true && elmWrap.removeChild( elmImg );\r
+ elmImg !== null && elmWrap.removeChild( elmImg );\r
retryTimer !== null && window.clearTimeout( retryTimer );\r
fetch !== null && fetch.stop();\r
elmWrap = elmImg = onLoadCallback = retryTimer = fetch = instance = null;\r
\r
var vmlImage = function( url, w, h, onLoadCallback ){\r
var elmWrap = document.createElement( 'div' ),\r
- vmlImg,\r
- loaded = false,\r
+ vmlImg = null,\r
retryTimer = null,\r
fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),\r
instance = this;\r
elmWrap.className = CLASS_NAME_LOADING;\r
- function onLoad( _url, _actualW, _actualH){\r
+ function onLoad( _url, _actualW, _actualH ){\r
if( elmWrap === null ) return;\r
elmWrap.className = CLASS_NAME;\r
vmlImg = document.createElement( 'v:image' );\r
vmlImg.src = url;\r
onLoadCallback && onLoadCallback( _url, _actualW, _actualH );\r
onLoadCallback = fetch = null;\r
- loaded = true;\r
instance.resize( w, h );\r
}\r
function onError( _url ){\r
- if( elmWrap === null) return;\r
+ if( elmWrap === null ) return;\r
elmWrap.className = CLASS_NAME_ERROR;\r
retryTimer = window.setTimeout( retry, RETRY_DELAY );\r
fetch = null;\r
this.resize = function( _w, _h ){\r
w = _w !== undefined ? _w : w;\r
h = _h !== undefined ? _h : h;\r
- if( loaded !== true ) return;\r
- vmlImg.style.width = w < 0 ? -w : w +'px';\r
- vmlImg.style.height = h < 0 ? -h : h +'px';\r
+ if( vmlImg === null ) return;\r
+ vmlImg.style.width = ( w < 0 ? -w : w ) + 'px';\r
+ vmlImg.style.height = ( h < 0 ? -h : h ) + 'px';\r
//if( flipH !== _flipH || flipV !== _flipV){\r
vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg );\r
//}\r
this.destroy = function(){\r
instance.destroy;\r
\r
- loaded === true && elmWrap.removeChild( vmlImg );\r
+ vmlImg !== null && elmWrap.removeChild( vmlImg );\r
retryTimer !== null && window.clearTimeout( retryTimer );\r
fetch !== null && fetch.stop();\r
elmWrap = vmlImg = onLoadCallback = retryTimer = fetch = instance = null;\r
}\r
}\r
\r
- var serverImage = function( url, w, h, onLoadCallback ){\r
- \r
- }\r
+ var serverImage = css3Image; // function( url, w, h, onLoadCallback ){}\r
\r
- if( BACKEND === IS_CSS3 ) ReversibleImageClass = css3Image;\r
- if( BACKEND === IS_VML ) ReversibleImageClass = vmlImage;\r
+ if( BACKEND === IS_CSS3 ) ReversibleImageClass = css3Image;\r
+ if( BACKEND === IS_VML ) ReversibleImageClass = vmlImage;\r
if( BACKEND === IS_ACTIVEX ) ReversibleImageClass = activexImage;\r
- if( BACKEND === IS_SERVER ) ReversibleImageClass = activexImage;\r
+ if( BACKEND === IS_SERVER ) ReversibleImageClass = activexImage;\r
\r
css3Image = vmlImage = activexImage = activexImage = null;\r
\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, _speechesAttributes, _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 = document.createElement( 'p' );\r
+ _elmBalloonWrap.appendChild( _elmText );\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.appendChild( document.createElement( 'span' ) );\r
+ \r
+ _text = '';\r
+ _speechesAttributes = _comicElement.speeches_attributes;\r
+ if( _speechesAttributes ){\r
+ for( _key in _speechesAttributes ){\r
+ _text += _speechesAttributes[ _key ] && _speechesAttributes[ _key ].content ? _speechesAttributes[ _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
OSDN Git Service
