/*\r
* pettanR common.js\r
- * version 0.4.25\r
+ * version 0.4.26\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.21',\r
+ version: '0.4.26',\r
init: function(){\r
jqWindow = $( window);\r
jqDocument = $( document);\r
\r
return size;\r
},\r
- loadImage: function( URLorELM, onLoad, onError, delay, timeout){\r
- delay = delay || 250;\r
- timeout = timeout || 5000;\r
- var type = typeof URLorELM,\r
- img, images, src, abstractPath;\r
- if( type === 'string'){\r
- src = URLorELM;\r
- // images = [];\r
- } else\r
- // http://d.hatena.ne.jp/hottolinkblog/20090228/1235823487\r
- if( type === 'object' && typeof URLorELM.hspace !== 'undefined' && typeof URLorELM.vspace !== 'undefined'){\r
- img = URLorELM;\r
- images = [ img];\r
- src = img.src;\r
- } else {\r
- return;\r
- }\r
- abstractPath = this.getAbsolutePath( src);\r
- \r
- loadImage( images, abstractPath, onLoadAsync, onErrorAsync, delay, timeout);\r
- \r
- function onLoadAsync( abspath, actualW, actualH){\r
- if( abstractPath !== abspath) return;\r
- var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onLoad);\r
- _onTimeout = pettanr.util.createGlobalFunc( [\r
- 'function(){',\r
- 'window["', _g_onUpdateFunction, '"]( "', abspath, '", ', actualW, ', ', actualH, ');',\r
- 'window["', _g_onUpdateFunction, '"] = null;',\r
- '}'\r
- ].join( ''));\r
- onLoad && setTimeout( window[ _onTimeout], 0);\r
- window[ _onTimeout] = null;\r
- }\r
- function onErrorAsync( abspath){\r
- if( abstractPath !== abspath) return;\r
- var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onError);\r
- _onTimeout = pettanr.util.createGlobalFunc( [\r
- 'function(){',\r
- 'window["', _g_onUpdateFunction, '"]( "', abspath, '");',\r
- 'window["', _g_onUpdateFunction, '"] = null;',\r
- '}'\r
- ].join( ''));\r
- onError && setTimeout( window[ _onTimeout], 0);\r
- window[ _onTimeout] = null;\r
- }\r
- \r
- /* LICENSE: MIT?\r
- * URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631\r
- * AUTHOR: uupaa.js@gmail.com\r
- * \r
- * fixed for ie6-8 by pettanr\r
- * new Image -> document.createElement( 'img')\r
- */\r
- function loadImage( images, abspath, onLoad, onError, delay, timeout) {\r
- images = images || document.images;\r
- var img,\r
- i = 0, l = images.length,\r
- tick = 0;\r
- for(; i < l; ++i) {\r
- img = images[i];\r
- if ( img.src === abspath && img.complete) {\r
- var size = pettanr.util.getImageSize( img);\r
- onLoad( abspath, size.width, size.height);\r
- return;\r
- }\r
- }\r
- img = document.createElement( 'img'); //var img = new Image(); ではieでimgのsizeが取れない、、、removeChildも失敗し、imgSizeGetterにimgが残る\r
- img.finish = false;\r
- img.onabort = img.onerror = function() {\r
- if (img.finish) { return; }\r
- img.finish = true;\r
- onError(abspath);\r
- img.onload = img.onabort = img.onerror = "";\r
- };\r
- img.onload = function() {\r
- img.finish = true;\r
- if (window.opera && !img.complete) {\r
- onError(abspath);\r
- img.onload = img.onabort = img.onerror = "";\r
- return;\r
- }\r
- var size = pettanr.util.getImageSize( img);\r
- onLoad( abspath, size.width, size.height);\r
- img.onload = img.onabort = img.onerror = "";\r
- //img = void 0;\r
- };\r
- img.src = abspath;\r
- if (!img.finish && timeout) {\r
- setTimeout(function() {\r
- if (img.finish) { return; }\r
- if (img.complete) {\r
- img.finish = true;\r
- if (img.width) { return; }\r
- onError(abspath);\r
- img.onload = img.onabort = img.onerror = "";\r
- return;\r
- }\r
- if ((tick += delay) > timeout) {\r
- img.finish = true;\r
- onError(abspath);\r
- img.onload = img.onabort = img.onerror = "";\r
- return;\r
- }\r
- setTimeout(arguments.callee, delay);\r
- }, 0);\r
- }\r
- }\r
- },\r
getAbsolutePath: function( path) {\r
var e = document.createElement("div");\r
e.innerHTML = '<a href=\"' + path + '\" />';\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
+ if( IS_VML === true && pettanr.ua.VML === false ) vectorEnabled = 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
+ DEG_TO_RAD = Math.PI / 180;\r
\r
var XBROWSER_BALLOON_CLASS = function( w, h, a ){\r
- var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true) : document.createElement( 'img'), // pettanr.imageに変更\r
- path = balloonElm.getElementsByTagName( 'path')[ 0],\r
- shape = balloonElm.getElementsByTagName( 'shape')[ 0],\r
- 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
- DEG_TO_RAD = Math.PI / 180,\r
+ var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true ) : document.createElement( 'img' ), // pettanr.imageに変更\r
+ path = balloonElm.getElementsByTagName( 'path')[ 0 ],\r
+ shape = balloonElm.getElementsByTagName( 'shape')[ 0 ],\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
- w = _w !== undefined ? _w - PADDING_TOP *2 : w;\r
- h = _h !== undefined ? _h - PADDING_LEFT *2 : h;\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
+ balloonElm.setAttribute( 'src', balloonUrlBuilder( a ));\r
return;\r
}\r
\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 ) * cos( tailRad ),\r
+ tailY = ry +( ry +TAIL_HEIGHT ) * sin( tailRad ),\r
startX, startY, endX, endY;\r
/*\r
* tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算\r
tailDeg = 0, d;\r
\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
+ d = ( tailDeg + i ) /2;\r
+ startRad = ( 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 +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
\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
/*\r
* \r
*/ \r
- if( IS_VML === true){\r
+ if( IS_VML === true ){\r
var _tailX = tailX *10,\r
_tailY = tailY *10,\r
__startX = startX *10,\r
__w = w *10,\r
__h = h *10;\r
\r
- shape.style.width = w +'px';\r
- shape.style.height = h +'px';\r
- shape.coordsize = [ __w, __h].join( l);\r
+ shape.style.width = w + 'px';\r
+ shape.style.height = h + 'px';\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
- ' l ', round( _tailX), l, round( _tailY),\r
+ round( __endX ), l, round( __endY ), l,\r
+ round( __startX ), l, round( __startY ),\r
+ ' l ', round( _tailX ), l, round( _tailY ),\r
' x e'\r
].join( '');\r
\r
- balloonElm.style.marginTop = _tailY < 0 ? floor( ( 60 +_tailY) /10) : 10;\r
- balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 +_tailX) /10) : 10;\r
+ balloonElm.style.marginTop = _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;\r
+ balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;\r
} else {\r
- balloonElm.setAttribute( 'width', w +PADDING_LEFT *2);\r
- balloonElm.setAttribute( 'height', h +PADDING_TOP *2);\r
+ balloonElm.setAttribute( 'width', w + PADDING_LEFT *2 );\r
+ balloonElm.setAttribute( 'height', h + PADDING_TOP *2 );\r
path.setAttribute( 'd', [\r
- 'M', cround( tailX + PADDING_LEFT), l, cround( tailY +PADDING_TOP),\r
- 'L', cround( startX +PADDING_LEFT), l, cround( startY +PADDING_TOP),\r
+ 'M', cround( tailX + PADDING_LEFT ), l, cround( tailY + PADDING_TOP ),\r
+ 'L', cround( startX + PADDING_LEFT ), l, cround( startY + PADDING_TOP ),\r
'A', rx, l, ry,\r
'0 1 1', // flag\r
- cround( endX +PADDING_LEFT), l, cround( endY +PADDING_TOP),\r
+ cround( endX + PADDING_LEFT ), l, cround( endY + PADDING_TOP ),\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
+ 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 += 90 +d /2;\r
- return [ 'system_pictures\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');\r
+ var d = 360 / NUM_BALLOON_IMAGE;\r
+ _a += 90 + d / 2;\r
+ return [ 'system_pictures\/_w', _a < 360 - d / 2 ? floor( _a / d ) : 0, '.gif' ].join( '' );\r
}\r
- return {\r
- elm: balloonElm,\r
- resize: draw,\r
- angle: function( _a){\r
- _a !== undefined && _a !== a &&\r
- vectorEnabled === false ? balloonUrlBuilder( _a) : draw( _a);\r
- return a;\r
- },\r
- type: function( _type){\r
- //draw( _a);\r
- },\r
- getURL: function(){\r
- return balloonUrlBuilder( a );\r
- },\r
- destroy: function(){\r
- balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm);\r
- balloonElm = null;\r
- delete this.destroy;\r
- }\r
+ this.elm = balloonElm;\r
+ this.resize = draw;\r
+ this.angle = function( _a ){\r
+ _a !== undefined && _a !== a &&\r
+ vectorEnabled === false ? balloonUrlBuilder( _a ) : draw( _a );\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
\r
IS_VML === false && vectorEnabled === true && ( function(){\r
- var detect = XBROWSER_BALLOON_CLASS.apply( {}, [ 100, 100, 0]),\r
- size = pettanr.util.getElementSize( detect.elm);\r
+ var detect = new XBROWSER_BALLOON_CLASS( 100, 100, 0 ),\r
+ size = pettanr.util.getElementSize( detect.elm );\r
vectorEnabled = size.width !== 0 && size.height !== 0;\r
detect.destroy();\r
detect = size = null;\r
\r
return {\r
createBalloon: function( _w, _h, _a){\r
- return XBROWSER_BALLOON_CLASS.apply( {}, [ _w, _h, _a]);\r
+ return new XBROWSER_BALLOON_CLASS( _w, _h, _a );\r
},\r
TYPE_NONE: 0,\r
TYPE_SPEACH_BALLOON: 1,\r
* -moz-transform:scale( -1, -1);\r
*/\r
pettanr.image = ( function(){\r
+ \r
+ var FetchImageControl = ( function(){\r
+ var TASK_LIST = [];\r
+\r
+ /*
+ * FetchClass original is\r
+ *
+ * LICENSE: MIT?\r
+ * URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631\r
+ * AUTHOR: uupaa.js@gmail.com\r
+ * \r
+ */\r
+\r
+ var FetchClass = function( abspath, onLoadCallback, onErrorCallback, delay, timeout ){\r
+ var img,\r
+ size,\r
+ tick = 0,\r
+ timer = null,\r
+ finish = false;\r
+ /*\r
+ if( pettanr.ua.isIE === false && pettanr.ua.ieVersion < 8 ){\r
+ var images = document.images,\r
+ i=0, l= images.length;\r
+ for( i=0; i<l; ++i ){\r
+ img = images[ i ];\r
+ if( img.src === abspath && img.complete ){\r
+ finish = true;\r
+ size = pettanr.util.getImageSize( img );\r
+ timer = window.setTimeout( asyncCallback, 0 );\r
+ break;\r
+ }\r
+ }\r
+ images = null;\r
+ }*/\r
+ //if( finish === false ){\r
+ img = document.createElement( 'img' ); //var img = new Image(); ではieでimgのsizeが取れない、、、removeChildも失敗し、imgSizeGetterにimgが残る\r
+ img.onabort = img.onerror = onError;\r
+ img.onload = onLoad;\r
+ img.src = abspath;\r
+ finish === false && timeout && detect();\r
+ //}\r
+ \r
+ function onError(){\r
+ if( finish === true ) return;\r
+ finish = true;\r
+ timer = window.setTimeout( asyncCallback, 10 );\r
+ } \r
+ function onLoad(){\r
+ // if( finish === true ) return; // これがあると firefox3.6 で駄目、、、\r
+ // if( timer ) return; // これがあると safari3.2 で駄目、、、\r
+ finish = true;\r
+ timer !== null && window.clearTimeout( timer );\r
+ if( window.opera && !img.complete ){\r
+ timer = window.setTimeout( asyncCallback, 10 );\r
+ return;\r
+ }\r
+ size = pettanr.util.getImageSize( img );\r
+ timer = window.setTimeout( asyncCallback, 10 );\r
+ }\r
+ function detect(){\r
+ if( finish === true ) return;\r
+ if( img.complete ){\r
+ finish = true;\r
+ if( img.width ) return;\r
+ timer = window.setTimeout( asyncCallback, 10 );\r
+ return;\r
+ }\r
+ if( ( tick += delay ) > timeout ){\r
+ finish = true;\r
+ timer = window.setTimeout( asyncCallback, 10 );\r
+ return;\r
+ }\r
+ timer = window.setTimeout( detect, delay );\r
+ }\r
+ \r
+ function asyncCallback(){\r
+ size ? onLoadCallback( abspath, size.width, size.height ) : onErrorCallback( abspath );\r
+ destroy();\r
+ }\r
+ function destroy(){\r
+ finish = true;\r
+ img.src = img.onload = img.onabort = img.onerror = '';\r
+ img = void 0\r
+ size = onLoadCallback = onErrorCallback = timer = null;\r
+ }\r
+ this.stop = function(){\r
+ timer !== null && window.clearTimeout( timer );\r
+ destroy(); \r
+ }\r
+ }\r
+ \r
+ return {\r
+ load: function( URLorELM, onLoad, onError, delay, opt_timeout ){\r
+ var src, fetch;\r
+ if( Type.isString( URLorELM ) === true ){\r
+ src = URLorELM;\r
+ } else\r
+ if( Type.isHTMLElement( URLorELM ) === true && URLorELM.tagName.toLowerCase() === 'img' ){\r
+ src = URLorELM.src;\r
+ } else {\r
+ return;\r
+ }\r
+ \r
+ fetch = new FetchClass(\r
+ pettanr.util.getAbsolutePath( src ),\r
+ onLoad, onError,\r
+ Type.isFinite( delay ) === true ? delay : 250,\r
+ Type.isFinite( opt_timeout ) === true ? opt_timeout : undefined\r
+ );\r
+ // TASK_LIST.push( fetch );\r
+ \r
+ return fetch;\r
+ }\r
+ }\r
+ })();\r
+ \r
var REG_PNG = /\.png?/i,\r
IS_CSS3 = 0,\r
IS_VML = 1,\r
IS_SERVER = 6,\r
IS_ACTIVEX_SERVER = 7,\r
BACKEND = ( function(){\r
- if( pettanr.DEBUG === true && pettanr.URL_PARAMS.rimg){\r
+ if( pettanr.DEBUG === true && pettanr.URL_PARAMS.rimg ){\r
var rimg = pettanr.URL_PARAMS.rimg.toLowerCase();\r
- if( rimg === 'css3') return IS_CSS3;\r
- if( rimg === 'activex') return IS_ACTIVEX;\r
- if( rimg === 'vml') return IS_VML;\r
- }\r
- if( pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 9) return IS_CSS3; // 不十分！\r
- if( pettanr.ua.VML === true) return IS_VML;\r
- if( pettanr.ua.ACTIVEX === true) return IS_ACTIVEX;\r
- if( pettanr.FLASH === true) return IS_FLASH;\r
- if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;\r
+ if( rimg === 'css3' ) return IS_CSS3;\r
+ if( rimg === 'activex' ) return IS_ACTIVEX;\r
+ if( rimg === 'vml' ) return IS_VML;\r
+ }\r
+ if( pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 9 ) return IS_CSS3; // 不十分！\r
+ if( pettanr.ua.VML === true ) return IS_VML;\r
+ if( pettanr.ua.ACTIVEX === true ) return IS_ACTIVEX;\r
+ if( pettanr.FLASH === true ) return IS_FLASH;\r
+ if( pettanr.SILVERLIGHT === true ) return IS_SILVERLIGHT;\r
return IS_SERVER;\r
})(),\r
BACKEND_WHEN_PNG = ( function(){\r
- if( pettanr.ua.isIE === false || pettanr.ua.ieVersion > 6) return BACKEND;\r
- if( pettanr.ua.VML === true) return IS_VML;\r
- if( pettanr.FLASH === true) return IS_FLASH;\r
- if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;\r
- if( pettanr.ua.ACTIVEX === true) return IS_ACTIVEX_SERVER;\r
+ if( pettanr.ua.isIE === false || pettanr.ua.ieVersion > 6 ) return BACKEND;\r
+ if( pettanr.ua.VML === true ) return IS_VML;\r
+ if( pettanr.FLASH === true ) return IS_FLASH;\r
+ if( pettanr.SILVERLIGHT === true ) return IS_SILVERLIGHT;\r
+ if( pettanr.ua.ACTIVEX === true ) return IS_ACTIVEX_SERVER;\r
return IS_SERVER;\r
})(),\r
+ 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
ReversibleImageClass,\r
ReversibleImageClassWithPingfix;\r
\r
- var XBackendReversibleImageClass = ( function(){\r
- var 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
- \r
- var css3Image = function( url, w, h, onLoadCallback){\r
- var elmWrap = document.createElement( 'div'),\r
- elmImg,\r
- loaded = false,\r
- retryTimer = null;\r
+ var css3Image = function( url, w, h, onLoadCallback ){\r
+ var elmWrap = document.createElement( 'div' ),\r
+ elmImg,\r
+ loaded = false,\r
+ retryTimer = null,\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
+ if( elmWrap === null ) return;\r
+ elmImg = new Image; // new Image でないと ie6,7 でクラッシュするかも、、、？\r
+ /*\r
+ * createElement 直後に append しないと、ie(ActiveX)で img が正しく表示されない．\r
+ */\r
+ elmWrap.appendChild( elmImg );\r
+ elmImg.setAttribute( 'src', url );\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
+ if( elmWrap === null ) return;\r
+ elmWrap.className = CLASS_NAME_ERROR;\r
+ retryTimer = window.setTimeout( retry, RETRY_DELAY );\r
+ fetch = null;\r
+ }\r
+ function retry(){\r
elmWrap.className = CLASS_NAME_LOADING;\r
- pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
- function onLoad( _url, _actualW, _actualH){\r
- if( elmWrap === null) return;\r
- elmImg = new Image;\r
- /*\r
- * createElement 直後に append しないと、ie(ActiveX)で img が正しく表示されない．\r
- */\r
- elmWrap.appendChild( elmImg);\r
- elmImg.setAttribute( 'src', url);\r
- elmWrap.className = CLASS_NAME;\r
- onLoadCallback && onLoadCallback( _url, _actualW, _actualH);\r
- onLoadCallback = null;\r
- loaded = true;\r
- resize( w, h);\r
- }\r
- function onError( _url){\r
- if( elmWrap === null) return;\r
- elmWrap.className = CLASS_NAME_ERROR;\r
- retryTimer = setTimeout( function(){\r
- elmWrap.className = CLASS_NAME_LOADING;\r
- pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
- }, RETRY_DELAY);\r
- }\r
- function resize( _w, _h){\r
- w = _w !== undefined ? _w : w;\r
- h = _h !== undefined ? _h : h;\r
- if( loaded === false) return;\r
- elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
- }\r
- return {\r
- elm : elmWrap,\r
- resize: resize,\r
- destroy: function(){\r
- loaded === true && elmWrap.removeChild( elmImg);\r
- retryTimer !== null && clearTimeout( retryTimer);\r
- elmWrap = vmlImg = onLoadCallback = retryTimer = null;\r
- elmWrap = elmImg = onLoadCallback = null;\r
- delete this.destroy;\r
- }\r
- }\r
+ fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 );\r
+ }\r
+\r
+ this.elm = elmWrap;\r
+ this.resize = function( _w, _h ){\r
+ w = _w !== undefined ? _w : w;\r
+ h = _h !== undefined ? _h : h;\r
+ if( loaded === false ) return;\r
+ elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
}\r
- var activexImage = css3Image;\r
- var vmlImage = function( url, w, h, onLoadCallback ){\r
- var elmWrap = document.createElement( 'div'),\r
- vmlImg,\r
- loaded = false,\r
- retryTimer = null;\r
+ this.destroy = function(){\r
+ delete instance.destroy;\r
+ \r
+ loaded === true && elmWrap.removeChild( elmImg );\r
+ retryTimer !== null && window.clearTimeout( retryTimer );\r
+ fetch !== null && fetch.stop();\r
+ elmWrap = elmImg = onLoadCallback = retryTimer = fetch = instance = null;\r
+ }\r
+ }\r
+ \r
+ var activexImage = css3Image;\r
+ \r
+ var vmlImage = function( url, w, h, onLoadCallback ){\r
+ var elmWrap = document.createElement( 'div' ),\r
+ vmlImg,\r
+ loaded = false,\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
+ 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
+ elmWrap.className = CLASS_NAME_ERROR;\r
+ retryTimer = window.setTimeout( retry, RETRY_DELAY );\r
+ fetch = null;\r
+ }\r
+ function retry(){\r
elmWrap.className = CLASS_NAME_LOADING;\r
- pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\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
- loaded = true;\r
- resize( w, h);\r
- onLoadCallback && onLoadCallback( _url, _actualW, _actualH);\r
- onLoadCallback = null;\r
- }\r
- function onError( _url){\r
- if( elmWrap === null) return;\r
- elmWrap.className = CLASS_NAME_ERROR;\r
- retryTimer = setTimeout( function(){\r
- elmWrap.className = CLASS_NAME_LOADING;\r
- pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
- }, RETRY_DELAY);\r
- }\r
- function resize( _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( flipH !== _flipH || flipV !== _flipV){\r
- vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg );\r
- //}\r
- vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
- elmWrap.appendChild( vmlImg);\r
- }\r
- return {\r
- elm : elmWrap,\r
- resize: resize,\r
- destroy: function(){\r
- loaded === true && elmWrap.removeChild( vmlImg);\r
- retryTimer !== null && clearTimeout( retryTimer);\r
- elmWrap = vmlImg = onLoadCallback = retryTimer = null;\r
- delete this.destroy;\r
- }\r
- }\r
+ fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 );\r
}\r
- var serverImage = function( url, w, h, onLoadCallback){\r
+ \r
+ this.elm = elmWrap;\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( flipH !== _flipH || flipV !== _flipV){\r
+ vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg );\r
+ //}\r
+ vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
+ elmWrap.appendChild( vmlImg );\r
+ }\r
+ this.destroy = function(){\r
+ instance.destroy;\r
\r
+ loaded === true && 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
- return function( url, w, h, onLoadCallback ){\r
- var flipH = w < 0,\r
- flipV = h < 0,\r
- onLoadCallbackAsync = onLoadCallback,// ? function(){ setTimeout( onLoadCallback, 0);} : undefined,// 一度読み込んだ画像は即座にonLoadになるため遅延\r
- xBackendImage = ( function( urlIsXDomain ){\r
- if( BACKEND === IS_CSS3) return new css3Image( url, w, h, onLoadCallbackAsync );\r
- if( BACKEND === IS_VML) return new vmlImage( url, w, h, onLoadCallbackAsync );\r
- if( BACKEND === IS_ACTIVEX) return new activexImage( url, w, h, onLoadCallbackAsync );\r
- return new serverImage( url, w, h, onLoadCallbackAsync );\r
- })();\r
- return {\r
- elm: xBackendImage.elm,\r
- w: function( _w){\r
- _w !== undefined && xBackendImage.resize( _w, h);\r
- return w;\r
- },\r
- h: function( _h){\r
- _h !== undefined && xBackendImage.resize( w, _h);\r
- return h;\r
- },\r
- resize: xBackendImage.resize,\r
- destroy: function(){\r
- xBackendImage.destroy && xBackendImage.destroy();\r
- xBackendImage = onLoadCallback = onLoadCallbackAsync = null;\r
- delete this.destroy;\r
- }\r
- }\r
- }\r
- })();\r
+ }\r
+ \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
+ \r
+ css3Image = vmlImage = activexImage = activexImage = null;\r
+ \r
return {\r
createReversibleImage: function( url, w, h, onLoadCallback){\r
- return XBackendReversibleImageClass.apply( {}, [ url, w, h, onLoadCallback]);\r
+ return new ReversibleImageClass( url, w, h, onLoadCallback );\r
}\r
}\r
})();\r
\r
for( var i=0, l=_comicElements.length; i<l; ++i){\r
_comicElement = _comicElements[ i];\r
- if( _comicElement.resource_picture){\r
- _rPic = _comicElement.resource_picture || {};\r
+ _rPic = _comicElement.resource_picture;\r
+ if( _rPic ){\r
_rImg = pettanr.image.createReversibleImage(\r
- [ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext].join( ''),\r
+ [ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext ].join( ''),\r
_comicElement.width, _comicElement.height\r
);\r
_elmImgWrap = document.createElement( 'div');\r
_elmImgWrap.appendChild( _rImg.elm);\r
_elmImgWrap.className = NAMESPACE_CLASSNAME + 'image';\r
_elmImgWrap.style.cssText = [\r
- 'width:', Math.abs( _comicElement.width), 'px;',\r
- 'height:', Math.abs( _comicElement.height), 'px;',\r
- 'left:', _comicElement.x, 'px;',\r
- 'top:', _comicElement.y, 'px;',\r
- 'z-index:', _comicElement.z, ';'\r
+ 'width:', Math.abs( _comicElement.width ), 'px;',\r
+ 'height:', Math.abs( _comicElement.height ), 'px;',\r
+ 'left:', _comicElement.x, 'px;',\r
+ 'top:', _comicElement.y, 'px;',\r
+ 'z-index:',_comicElement.z, ';'\r
].join( '');\r
} else {\r
- _elmBalloonWrap = document.createElement( 'div');\r
- _elmPanel.appendChild( _elmBalloonWrap);\r
+ _elmBalloonWrap = document.createElement( 'div' );\r
+ _elmPanel.appendChild( _elmBalloonWrap );\r
_elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';\r
_elmBalloonWrap.style.cssText = [\r
'width:', _comicElement.width, 'px;',\r
'z-index:', _comicElement.z, ';'\r
].join( '');\r
\r
- _balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail);\r
+ _balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail );\r
_elmBalloonWrap.appendChild( _balloon.elm);\r
\r
_elmText = ELM_TEXT_ORIGN.cloneNode( true);\r
OSDN Git Service
