-\r
- var IMAGE_GROUP_EXPROLER = ( function(){\r
- var ICON_ARRAY = [],\r
- WHEEL_DELTA = 64,\r
- containerW, containerH, wrapX,\r
- jqWrap, jqContainer, jqItemOrigin,\r
- itemW, itemH,\r
- jqName, jqButton, buttonW,\r
- folder, onUpdateFunction,\r
- winW,\r
- onEnterInterval = null;\r
- \r
- var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/images/' : 'images/',\r
- THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
- LIMIT_FILESIZE = 1024 * 10; // 10KB\r
- var IMAGE_DATA = 0;\r
- \r
- var ImageGroupIconClass = function( INDEX, data){\r
- var JQ_ICON_WRAP = jqItemOrigin.clone( true),\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
- actualW, actualH,\r
- onEnterFlag = false;\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 onLoad( url, _imgW, _imgH){\r
- if( reversibleImage === null) {\r
- alert( url);\r
- return;\r
- }\r
- actualW = _imgW || 64;\r
- actualH = _imgH || 64;\r
- JQ_ICON_WRAP.children( 'div').eq( 1).html( actualW +'x' +actualH);\r
- var zoom = 128 /( actualW > actualH ? actualW : actualH),\r
- _h = Math.floor( actualH *zoom),\r
- _w = Math.floor( actualW *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, actualW, actualH);\r
- } else {\r
- onCloseUpdate( onUpdateFunction); // close()で値が消えるので、クロージャに保持\r
- }\r
- }\r
- close(); \r
- }\r
- \r
- function onCloseUpdate( 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
- }\r
- \r
- return {\r
- onEnter: function(){\r
- if( onEnterFlag === true) return;\r
- reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onLoad);\r
- JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
- onEnterFlag = true; \r
- },\r
- destroy: function(){\r
- reversibleImage && reversibleImage.destroy();\r
- JQ_ICON_WRAP.remove();\r
- reversibleImage = JQ_ICON_WRAP = null;\r
- delete this.destroy;\r
- }\r
- }\r
- }\r
- \r
- function close(){\r
- jqContainer.stop().animate( {\r
- height: 0,\r
- top: Math.floor( windowH /2)\r
- }, function(){\r
- jqWrap.hide()\r
- });\r
- while( ICON_ARRAY.length > 0){\r
- ICON_ARRAY.shift().destroy();\r
- }\r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onUpdateFunction = onEnterInterval = null;\r
- }\r
- function onEnterShowImage(){\r
- var l = ICON_ARRAY.length,\r
- _start = -wrapX /itemW -1,\r
- _end = _start + winW /itemW +1;\r
- for( var i=0; i<l; ++i){\r
- _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
- }\r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = null;\r
- }\r
- function onCloseClick(){\r
- pettanr.overlay.hide();\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( 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
- itemW = itemSize.width;\r
- itemH = itemSize.height;\r
- jqName = $( '#gruop-name-display');\r
- jqButton = $( '#image-gruop-button').click( onCloseClick);\r
- buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;\r
- \r
- delete IMAGE_GROUP_EXPROLER.init;\r
- },\r
- jqWrap: null,\r
- show: function( _folder, _onUpdateFunction){\r
- this.init !== undefined && this.init();\r
- \r
- folder = _folder;\r
- onUpdateFunction = _onUpdateFunction;\r
- pettanr.overlay.show( this);\r
- \r
- var l = _folder.getChildFileLength();\r
- for( var i=0; i<l; ++i){\r
- ICON_ARRAY.push( new ImageGroupIconClass( i, _folder.getChildFileByIndex( i)));\r
- }\r
- wrapX = 0;\r
- containerW = l * itemW;\r
- \r
- winW = windowW;\r
- var w = winW > containerW ? winW : containerW,\r
- h = windowH > containerH ? containerH : windowH;\r
- \r
- jqWrap.show();\r
- jqContainer.css( {\r
- width: w,\r
- height: 0,\r
- left: 0,\r
- top: Math.floor( windowH /2)\r
- }).stop().animate( {\r
- height: h,\r
- top: Math.floor( windowH /2 -h /2)\r
- });\r
- \r
- jqButton.css( {\r
- left: Math.floor( winW /2 -buttonW /2),\r
- top: Math.floor( windowH /2 +containerH /2 +10)\r
- });\r
- \r
- onEnterShowImage();\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- var w = _windowW > containerW ? _windowW : containerW,\r
- h = _windowH > containerH ? containerH : _windowH,\r
- offsetW = Math.floor( _windowW /2 -winW /2);\r
- winW = _windowW;\r
- if( offsetW <= 0){ // smaller\r
- jqContainer.css( {\r
- left: offsetW,\r
- width: w\r
- }).animate( {\r
- left: 0,\r
- top: Math.floor( _windowH /2 -h /2)\r
- }); \r
- } else {\r
- jqContainer.css( { // bigger\r
- left: 0,\r
- width: w,\r
- borderLeftWidth: offsetW\r
- }).animate( {\r
- top: Math.floor( _windowH /2 -h /2),\r
- borderLeftWidth: 0\r
- });\r
- }\r
- jqButton.css( {\r
- left: Math.floor( _windowW /2 -buttonW /2),\r
- top: Math.floor( _windowH /2 +containerH /2 +10)\r
- });\r
- onEnterShowImage();\r
- },\r
- onClose: close,\r
- ID: 'imageGroupExproler'\r
- }\r
- })();\r
- /*\r
- * \r
- */\r
-\r