/*\r
* pettanR common.js\r
- * version 0.4.15\r
+ * version 0.4.28\r
* \r
* author: itozyun\r
*/\r
\r
/*\r
- * http://pettanr.sourceforge.jp/test/type.html
+ * http://pettanr.sourceforge.jp/test/type.html\r
*/\r
var Type = {\r
isObject : function(v) {\r
- return typeof v === 'object';\r
+ return v !== null && Type.isArray(v) === false && typeof v === 'object';\r
},\r
isFunction : function(v) {\r
return typeof v === 'function';\r
}\r
return {};\r
})(),\r
- IS_DEBUG = typeof URL_PARAMS.debug === 'boolean' ? URL_PARAMS.debug : IS_LOCAL === true,\r
+ IS_DEBUG = Type.isBoolean( URL_PARAMS.debug ) ? URL_PARAMS.debug : IS_LOCAL === true,\r
jqWindow , jqDocument , jqBody;\r
return {\r
- version: '0.4.13',\r
+ version: '0.4.28',\r
init: function(){\r
jqWindow = $( window);\r
jqDocument = $( document);\r
_fn;\r
for( var i=0; i<l; i++){\r
_fn = FUNCTION_ARRAY[ i];\r
- _fn.init && _fn.init( _fn === pettanr.view ? FUNCTION_ARRAY : undefined);\r
+ _fn.init && _fn.init( _fn === pettanr.view ? FUNCTION_ARRAY : undefined );\r
}\r
\r
delete pettanr.init;\r
}\r
var i, l, _children = _elm.childNodes, _array = [];\r
if( _children && typeof _children.length === 'number'){\r
- // liveNode > array\r
+ // liveNode > array\r
for( i=0, l=_children.length; i<l; ++i){\r
_array.push( _children[ i ] );\r
}\r
} else {\r
parentElm && parentElm.appendChild( img);\r
}\r
- return size;\r
\r
/* LICENSE: MIT\r
* AUTHOR: uupaa.js@gmail.com\r
// HTMLCanvasElement\r
return { width: image.width, height: image.height };\r
}\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
+ return size;\r
},\r
getAbsolutePath: function( path) {\r
var e = document.createElement("div");\r
return ret;\r
},\r
getChildIndex: function( _parent, _child){\r
- var _children = _parent.getElementsByTagName( _child.tagName),\r
+ var _children = _parent.getElementsByTagName( _child.tagName ),\r
l = _children.length;\r
for(var i=0; i<l; ++i){\r
if( _children[ i] === _child) return i;\r
}\r
},\r
getIndex: function( _array, _element){\r
- if( Array.prototype.indexof){\r
+ if( Array.prototype.indexof ){\r
pettanr.util.getIndex = function( _array, _element){\r
return _array.indexof( _element);\r
}\r
}\r
return pettanr.util.getIndex( _array, _element);\r
},\r
+ copyArray: function( _array ){\r
+ var ret = new Array( l );\r
+ for(var i=0, l = _array.length; i<l; ++i){\r
+ ret[ i ] = _array[ i ];\r
+ }\r
+ return ret;\r
+ },\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
+ 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
\r
return {\r
PETTANR_ROOT_PATH: PETTANR_ROOT_PATH,\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
NS_PETTANR_COMIC: 'pettanr-comic',\r
- RESOURCE_PICTURE_PATH: ( isLocal === true ? pettanr.ROOT_PATH : PETTANR_ROOT_PATH) + 'resource_pictures\/',\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
/* create iframe overlay for user console */\r
var location = document.location.pathname,\r
isWorkPage = document.location.href.indexOf( 'http:\/\/localhost:3000\/' ) === 0 ||\r
- location.indexOf( pettanr.CONST.PETTANR_ROOT_PATH ) === 0 ||\r
- location.indexOf( '\/work.html') !== -1,\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
+\r
if( isWorkPage === false){\r
LoginUserNavi = {\r
show: function(){\r
LoginUserNavi = {\r
show: function(){\r
var i = pettanr.util.getChildIndex( this.parentNode, this );\r
- i !== -1 && pettanr.view.show( i );\r
+ i !== -1 && bootApplication( i );\r
return false;\r
},\r
hide: function(){}\r
}\r
- \r
- if( pettanr.DEBUG === true){\r
- var elmDl = document.getElementById( 'useragent'),\r
- elmDt, elmDd,\r
- data = {\r
- pettanR: pettanr.version,\r
- ua: navigator.userAgent,\r
- platform: navigator.platform,\r
- appVersion: navigator.appVersion,\r
- appCodeName:navigator.appCodeName,\r
- appName: navigator.appName,\r
- language: navigator.browserLanguage || navigator.language,\r
- ActiveX: pettanr.ua.ACTIVEX\r
- },\r
- ua = pettanr.ua;\r
- if( ua.IE){\r
- //data.ua = 'Internet Explorer';\r
- data.version = ua.IE;\r
- if( ua.ieVersion >= 8) data.RenderingVersion = ua.ieRenderingVersion;\r
- data.browserType = ua.STANDALONE === true ? 'Standalone' : 'bundle';\r
- if( ua.ieVersion < 9) {\r
- data.vml = ua.VML;\r
- } else {\r
- data.svg = ua.SVG;\r
- }\r
- }\r
- data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';\r
- \r
- for( var key in data){\r
- elmDt = document.createElement( 'dt');\r
- elmDt.innerHTML = key;\r
- elmDd = document.createElement( 'dd');\r
- elmDd.innerHTML = '' + data[ key];\r
- if( !data[ key]) elmDd.style.color = 'red';\r
- elmDl.appendChild( elmDt);\r
- elmDl.appendChild( elmDd);\r
- }\r
- } else {\r
- var _debug = document.getElementById( 'debug');\r
- if( _debug){\r
- pettanr.util.removeAllChildren( _debug);\r
- _debug.parentNode.removeChild( _debug);\r
- }\r
- }\r
}\r
\r
- /* global-navi */\r
- var navi = document.getElementById('global-navi'),\r
- origin = document.createElement('a'),\r
- items = ( function(){\r
- var ret = ['Home', 'Comic list', 'Picture', 'Setting'];\r
- pettanr.DEBUG === true && ret.push( 'debug');\r
- return ret;\r
- })(),\r
- item;\r
- origin.href = '#';\r
- for(var i=0, l = items.length; i<l; ++i){\r
- item = origin.cloneNode( true);\r
- item.appendChild( document.createTextNode( items[ i]) );\r
- item.onclick = LoginUserNavi.show;\r
- navi.appendChild( item);\r
- }\r
- navi.style.width = ( ( item.offsetWidth || 80) * l) +'px';\r
- location = origin = item = null;\r
- \r
/* debug info */\r
// ua version, lang, os, plugin ( vml, svg), standerdmode, balloon, rimg\r
\r
*/\r
\r
var jqWindow,\r
- funcArray,\r
- HOME_ID = 'entrance',\r
- VIEW_ID_ARRAY = [ HOME_ID, 'cabinet', 'gallery', 'backyard'],\r
- elmCurrent,\r
- currentView,\r
- currentID = ( function( _view){\r
- var _viewID;\r
- \r
- if( typeof _view === 'number' && _view < VIEW_ID_ARRAY.length){\r
- _viewID = VIEW_ID_ARRAY[ _view];\r
- } else\r
- if( typeof _view === 'string'){\r
- _viewID = _view;\r
- } else {\r
- _viewID = HOME_ID;\r
- }\r
-\r
- if( document.getElementById( _viewID)){\r
- return _viewID;\r
- }\r
- return HOME_ID;\r
- })( pettanr.URL_PARAMS.view);\r
- \r
- pettanr.DEBUG === true && VIEW_ID_ARRAY.push( 'debug');\r
- \r
- open();\r
- \r
- function onWindowResize(){\r
- var _fn,\r
- l = funcArray.length,\r
- w = jqWindow.width(),\r
- h = jqWindow.height();\r
- currentView && currentView.onWindowResize && currentView.onWindowResize( w, h);\r
- pettanr.overlay.currentID !== null && pettanr.overlay.onWindowResize( w, h);\r
- }\r
- function open( _option ){\r
- if( isWorkPage === false) return;\r
- \r
- var _elm = document.getElementById( currentID);\r
- if( elmCurrent) elmCurrent.style.display = 'none';\r
- _elm.style.display = 'block';\r
- elmCurrent = _elm;\r
- \r
- var nodesA = navi.getElementsByTagName( 'a') || [],\r
- l = nodesA.length,\r
- _a;\r
- for(var i=0; i<l; ++i){\r
- if( nodesA[ i]){\r
- nodesA[ i].className = VIEW_ID_ARRAY[ i] === currentID ? 'current' : '';\r
- }\r
- }\r
- \r
- if( !pettanr.view || pettanr.view.init !== undefined) return;\r
- typeof currentView.onClose === 'function' && currentView.onClose();\r
- currentView = pettanr[ currentID ];\r
- typeof currentView.onOpen === 'function' && currentView.onOpen( jqWindow.width(), jqWindow.height(), _option );\r
- // setTimeout( onWindowResize, 0);\r
- }\r
+ APPLICATION_LIST = [],\r
+ LUNCHER_APPLICATION_LIST = [],\r
+ currentApplication = null;\r
\r
var AbstractBasicPane = function(){\r
- this.rootElement = null;\r
- this.onOpen = function( _w, _h, _option ){};\r
- this.onClose = function(){ return true; } // false の場合、close の拒否 \r
this.onPaneResize = function( _w, _h ){}\r
this.resize = function( _w, _h ){\r
if( this.MIN_WIDTH > _w || this.MIN_HEIGHT > _h ){\r
this.MIN_WIDTH = 240;\r
this.MIN_HEIGHT = 240;\r
}\r
+ \r
var AbstractApplication = function(){\r
- this.prototype = new AbstractBasicPane();\r
+ this.displayName = 'app name';\r
+ this.ID = 'app id';\r
+ this.rootElement = null;\r
+ this.parentElement = null;\r
+ this.nextSibling = null;\r
+ this.open = function( _w, _h /*, _option */ ){\r
+ if( this.MIN_WIDTH > _w || this.MIN_HEIGHT > _h ){\r
+ if( Type.isHTMLElement( this.rootElement ) === true ){\r
+ // 小さすぎる！、と表示\r
+ }\r
+ }\r
+ if( arguments.length > 2){\r
+ // argumentsRellay( this.onOpen, arguments );\r
+ this.onOpen.apply( this, arguments );\r
+ } else {\r
+ this.onOpen( _w, _h );\r
+ }\r
+ }\r
+ this.close = function(){\r
+ if( this.onClose() === false ){\r
+ return false;\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
+ }\r
+ AbstractApplication.prototype = new AbstractBasicPane();\r
+ \r
+ var ApplicationReference = function( application ){\r
+ this.inOverlay = false;\r
+ this.getUID = function(){\r
+ return pettanr.util.getIndex( APPLICATION_LIST, application );\r
+ }\r
+ this.boot = function( /* _option */ ){\r
+ if( arguments.length > 0 ){\r
+ bootApplication( application, pettanr.util.copyArray( arguments ) );\r
+ } else {\r
+ bootApplication( application );\r
+ }\r
+ }\r
+ this.bootInOverlay = function( /* _option */ ){\r
+ this.inOverlay = true;\r
+ pettanr.overlay.show( application, pettanr.util.copyArray( arguments ) );\r
+ }\r
+ this.shutdown = function(){\r
+ if( this.inOverlay === true ){\r
+ pettanr.overlay.hide();\r
+ this.inOverlay = false;\r
+ } else {\r
+ bootApplication( 0 );\r
+ }\r
+ }\r
+ this.addToLancher = function(){\r
+ if( pettanr.util.getIndex( LUNCHER_APPLICATION_LIST, application ) !== -1 ) return;\r
+ LUNCHER_APPLICATION_LIST.push( application );\r
+ \r
+ var navi = document.getElementById('global-navi'),\r
+ item = document.createElement('a');\r
+ navi.appendChild( item );\r
+ navi.style.width = ( ( item.offsetWidth || 80 ) * LUNCHER_APPLICATION_LIST.length ) + 'px';\r
+ item.href = '#';\r
+ item.appendChild( document.createTextNode( application.displayName ));\r
+ item.onclick = LoginUserNavi.show;\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
+ _index = -1;\r
+ if( typeof APPLICATIONorINDEX === 'number' && APPLICATIONorINDEX < LUNCHER_APPLICATION_LIST.length){\r
+ _application = LUNCHER_APPLICATION_LIST[ APPLICATIONorINDEX ];\r
+ } else\r
+ if( typeof APPLICATIONorINDEX === 'string' ){\r
+ for( i=0, l=LUNCHER_APPLICATION_LIST.length; i<l; ++i ){\r
+ if( APPLICATIONorINDEX === APPLICATION_LIST[ i ].ID ){\r
+ _application = APPLICATION_LIST[ i ];\r
+ break;\r
+ }\r
+ }\r
+ } else\r
+ if( pettanr.view.isApplicationInstance( APPLICATIONorINDEX ) === true ){\r
+ _application = APPLICATIONorINDEX;\r
+ } else\r
+ if( !currentApplication ){\r
+ _application = LUNCHER_APPLICATION_LIST[ 0 ];\r
+ } else {\r
+ return;\r
+ }\r
+ \r
+ if( !_application ) return;\r
+ \r
+ for( i=0, l=LUNCHER_APPLICATION_LIST.length; i<l; ++i ){\r
+ if( _application === LUNCHER_APPLICATION_LIST[ i ] ){\r
+ for( j=0, l=nodesA.length; j<l; ++j ){\r
+ nodesA[ j ].className = i === j ? 'current' : '';\r
+ } \r
+ break;\r
+ }\r
+ }\r
+ \r
+ if( currentApplication === _application ) return;\r
+ if( currentApplication ){\r
+ currentApplication.close();\r
+ currentApplication.rootElement && currentApplication.rootElement.parentNode &&\r
+ currentApplication.rootElement.parentNode.removeChild( currentApplication.rootElement );\r
+ }\r
+ \r
+ currentApplication = _application;\r
+ \r
+ if( _application.nextSibling && _application.nextSibling.parentNode === _application.parentElement ){\r
+ _application.parentElement.insertBefore( _application.rootElement, _application.nextSibling );\r
+ } else\r
+ if( _application.parentElement ){\r
+ _application.parentElement.appendChild( _application.rootElement );\r
+ } else {\r
+ _application.rootElement && document.body.appendChild( _application.rootElement );\r
+ }\r
+ \r
+ if( _arguments ){\r
+ _arguments.unshift( jqWindow.width(), jqWindow.height() );\r
+ _application.open.apply( _application, _arguments );\r
+ // argumentsRellay( _application.open, _arguments );\r
+ } else {\r
+ _application.open( jqWindow.width(), jqWindow.height() );\r
+ }\r
+ pettanr.view.currentID = _application.ID;\r
+ }\r
+ \r
+ function argumentsRellay( _method, _arguments ){\r
+ alert( typeof _method )\r
+ l = _arguments.length;\r
+ if( l > 0 ){\r
+ var _arg = [];\r
+ for( i=0; i<l; ++i ){\r
+ _arg.push( 'a[' + i + ']' );\r
+ }\r
+ window['_method'] = _method;\r
+ //eval( '_method(' + _arg.join(',') + ')' );\r
+ var f = new Function( 'a', '_method(' + _arg.join(',') + ')' );\r
+ f( _arguments );\r
+ window['_method'] = undefined;\r
+ } else {\r
+ _method();\r
+ } \r
}\r
\r
+ function onWindowResize(){\r
+ var w = jqWindow.width(),\r
+ h = jqWindow.height();\r
+ currentApplication && currentApplication.resize( w, h );\r
+ pettanr.overlay.onWindowResize( w, h );\r
+ pettanr.form.onWindowResize( w, h );\r
+ }\r
+\r
return {\r
- init: function( _funcArray){\r
- funcArray = _funcArray;\r
+ init: function( _funcArray ){\r
jqWindow = pettanr.jqWindow();\r
- jqWindow.resize( onWindowResize);\r
+ jqWindow.resize( onWindowResize );\r
\r
- currentView = currentView || pettanr[ currentID ];\r
var _option = {}; // urlパラメータ\r
- currentView && typeof currentView.onOpen === 'function' && currentView.onOpen( jqWindow.width(), jqWindow.height(), _option );\r
\r
- // setTimeout( onWindowResize, 100);\r
+ onWindowResize();\r
+ \r
+ bootApplication( pettanr.URL_PARAMS.view || 0 );\r
\r
delete pettanr.view.init;\r
},\r
- show: function( _viewID ){\r
- if( typeof _viewID === 'number' && _viewID < VIEW_ID_ARRAY.length){\r
- _viewID = VIEW_ID_ARRAY[ _viewID];\r
- } else\r
- if( typeof _viewID === 'string'){\r
- _viewID = _viewID;\r
- } else {\r
- _viewID = HOME_ID;\r
- }\r
- for( var key in pettanr.view){\r
- if( pettanr.view[ key] === _viewID){\r
- if( currentID !== _viewID && document.getElementById( _viewID)){\r
- this.currentID = currentID = _viewID;\r
- open();\r
- }\r
- return;\r
- }\r
- }\r
- alert( _viewID);\r
+ createBasicPane: function( _class, _options ){\r
+ _class.prototype = new AbstractBasicPane();\r
+ return new _class( _options );\r
},\r
- registerAsBasicPane: function( _basicPane ){\r
- if( pettanr.view.isBasicPaneInstance( _basicPane ) === true ) return;\r
- _basicPane.prototype = new AbstractBasicPane();\r
+ _getAbstractApplication: function(){\r
+ return new AbstractApplication();\r
},\r
- registerApplication: function( _application ){\r
- if( pettanr.view.isApplicationInstance( _application ) === true ) return;\r
- _application.prototype = new AbstractApplication();\r
+ registerApplication: function( _class, _options ){\r
+ _class.prototype = new AbstractApplication();\r
+ _application = new _class( _options );\r
+ \r
+ var elm = _application.rootElement;\r
+ if( Type.isHTMLElement( elm ) === false ) return null;\r
+ \r
+ _application.parentElement = elm.parentNode;\r
+ _application.nextSibling = elm.nextSibling;\r
+ \r
+ if( elm.parentNode ){\r
+ elm.parentNode.removeChild( elm );\r
+ }\r
+ APPLICATION_LIST.push( _application );\r
+ return new ApplicationReference( _application );\r
},\r
isBasicPaneInstance: function( _basicPane ){\r
return _basicPane instanceof AbstractBasicPane;\r
isApplicationInstance: function( _application ){\r
return _application instanceof AbstractApplication;\r
},\r
- currentID: currentID,\r
- HOME: HOME_ID,\r
- COMICS: VIEW_ID_ARRAY[ 1],\r
- IMAGES: VIEW_ID_ARRAY[ 2],\r
- SETTING: VIEW_ID_ARRAY[ 3],\r
- DEBUG: VIEW_ID_ARRAY[ 4],\r
+ isApplicationReference: function( _reference ){\r
+ return _reference instanceof ApplicationReference;\r
+ },\r
+ currentID: null,\r
EDITOR: 'editor',\r
OVERLAY: 'overlay'\r
}\r
\r
pettanr.overlay = ( function(){\r
var SHADOW_OPACITY = 0.5,\r
+ ELM_CONTAINER = document.getElementById( 'overlay-container' ),\r
jqConteiner, jqShadow, jqCloseButton,// jqBody, \r
currentOverlay = null,\r
+ bootParams = null,\r
visible = false,\r
windowW, windowH;\r
\r
- function close(){\r
- currentOverlay && currentOverlay.onClose && currentOverlay.onClose();\r
- pettanr.overlay.hide(); \r
- }\r
function asyncResize(){\r
- currentOverlay.onWindowResize( windowW, windowH);\r
+ currentOverlay.resize( windowW, windowH );\r
}\r
function onCloseClick( e){\r
- close();\r
+ pettanr.overlay.hide();\r
e.preventDefault();\r
return false; \r
}\r
+ function onFadeInComplete(){\r
+\r
+ }\r
+ function onFadeOutComplete(){\r
+ currentOverlay.close();\r
+ currentOverlay.rootElement.style.display = 'none';\r
+ currentOverlay.rootElement.style.visibility = 'hidden';\r
+ currentOverlay = null; \r
+ }\r
return {\r
init: function(){\r
//jqBody = pettanr.jqBody();\r
jqConteiner = $( '#overlay-container');\r
jqShadow = $( '#overlay-shadow');\r
- jqCloseButton = $( '#overlay-close-button').click( onCloseClick);\r
+ jqCloseButton = $( '#overlay-close-button').click( onCloseClick );\r
\r
- pettanr.key.addKeyDownEvent( pettanr.view.OVERLAY, 27, false, false, close); // 27.esc\r
+ pettanr.key.addKeyDownEvent( pettanr.view.OVERLAY, 27, false, false, pettanr.overlay.hide ); // 27.esc\r
\r
delete pettanr.overlay.init;\r
},\r
- show: function( _currentOverlay){\r
- if( visible === true && currentOverlay === _currentOverlay) return;\r
+ show: function( _overlay, _bootParams ){\r
+ if( visible === true && currentOverlay === _overlay ) return;\r
+ if( pettanr.view.isApplicationInstance( _overlay ) === false ) return;\r
+ \r
document.body.style.overflow = 'hidden';\r
+ \r
+ this.visible = visible = true;\r
+ this.currentID = _overlay.ID;\r
+ currentOverlay = _overlay;\r
+ bootParams = _bootParams;\r
+\r
jqConteiner.stop().css( {\r
filter: '',\r
opacity: '',\r
top: document.documentElement.scrollTop || document.body.scrollTop\r
- }).fadeIn();\r
- this.visible = visible = true;\r
- currentOverlay = _currentOverlay;\r
- this.currentID = _currentOverlay.ID;\r
- jqCloseButton.toggle( !!_currentOverlay.onClose);\r
+ }).fadeIn( onFadeInComplete );\r
+ \r
+ currentOverlay.rootElement.style.display = '';\r
+ currentOverlay.rootElement.style.visibility = 'visible';\r
+ \r
+ ELM_CONTAINER.insertBefore( currentOverlay.rootElement, document.getElementById( 'overlay-close-button' ));\r
+ \r
+ if( Type.isArray( bootParams ) === true ){\r
+ bootParams.unshift( windowW, windowH )\r
+ currentOverlay.open.apply( currentOverlay, bootParams );\r
+ } else {\r
+ currentOverlay.open( windowW, windowH, bootParams );\r
+ }\r
},\r
hide: function(){\r
- currentOverlay = null;\r
if( visible === false) return;\r
document.body.style.overflow = '';\r
+ \r
jqConteiner.stop().css( {\r
filter: '',\r
opacity: ''\r
- }).fadeOut();\r
+ }).fadeOut( onFadeOutComplete );\r
this.visible = visible = false;\r
this.currentID = null;\r
},\r
visible: visible,\r
currentID: null,\r
- onWindowResize: function( _windowW, _windowH){\r
+ onWindowResize: function( _windowW, _windowH ){\r
+ windowW = _windowW;\r
+ windowH = _windowH; \r
+ \r
+ if( currentOverlay === null ) return;\r
+ \r
jqConteiner.css({\r
height: _windowH,\r
top: document.documentElement.scrollTop || document.body.scrollTop\r
});\r
- jqShadow.css( { height: _windowH});\r
- windowW = _windowW;\r
- windowH = _windowH;\r
+ jqShadow.css( { height: _windowH });\r
// 先にeditorのcanvasを確定する。\r
- currentOverlay && currentOverlay.onWindowResize && setTimeout( asyncResize, 0);\r
- },\r
- registerOverlay: function( _basicPane){\r
- var _api = pettanr.view.registerAsBasicPane( _basicPane);\r
- // OverlayAPI\r
- return {\r
- show: function( _basicPane ){\r
- \r
- },\r
- hide: function( _basciPane ){\r
- \r
- },\r
- isCurrent: function( _basicPane ){\r
- \r
- }\r
- }\r
- },\r
- isOverlay: function( _basicPane ){\r
- \r
+ setTimeout( asyncResize, 0);\r
}\r
}\r
})();\r
overlayEnabled = pettanr.overlay.visible === true,\r
currentViewID = overlayEnabled === true ? pettanr.overlay.currentID : pettanr.view.currentID;\r
if( callback === 'keypress') callback = 'keydown';\r
- if( pettanr.form.keyEventRellay( e) === false){\r
+ if( pettanr.form.keyEventRellay( e ) === false){\r
var shift = e.shiftKey,\r
ctrl = e.ctrlKey,\r
l = KEYEVENT_ARRAY.length,\r
\r
jqWindow = pettanr.jqWindow().focus();\r
keyOperationChatcher = pettanr.jqDocument()\r
- .keydown( keyHit)\r
- .keyup( keyHit)\r
+ .keydown( keyHit )\r
+ .keyup( keyHit )\r
.mouseenter( function(){\r
jqWindow.focus();\r
});\r
- keyPress && keyOperationChatcher.keypress( keyPress);\r
+ keyPress && keyOperationChatcher.keypress( keyPress );\r
\r
delete pettanr.key.init;\r
},\r
var FORM_GROUP_TABLE = {},\r
currentID = null,\r
currentItem = null,\r
+ CLASSNAME_COMBOBOX_OPTION = 'combobox-option',\r
+ windowW, windowH,\r
ELM_A_ORIGIN = ( function(){\r
var ret = document.createElement( 'a');\r
ret.href = '#';\r
var ret = document.createElement( 'input');\r
ret.type = 'text';\r
return ret;\r
+ })(),\r
+ ELM_COMBOBOX = ( function(){\r
+ var ret = document.createElement( 'a'),\r
+ elmToggle = document.createElement( 'span' ),\r
+ elmValue = document.createElement( 'span' );\r
+ ret.href = '#';\r
+ ret.appendChild( elmToggle );\r
+ ret.appendChild( elmValue );\r
+ elmToggle.className = 'combobox-toggle';\r
+ elmValue.className = 'combobox-value';\r
+ \r
+ elmToggle.appendChild( document.createTextNode( '▼' ));\r
+ elmValue.appendChild( document.createTextNode( 'null' ));\r
+ return ret;\r
})();\r
\r
- var InputTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater){\r
- validater = typeof validater === 'function' ? validater : null;\r
+ var InputTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater ){\r
+ validater = Type.isFunction( validater ) === true ? validater : null;\r
\r
- var elmValue = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'editable-value')[ 0],\r
+ var elmValue = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'editable-value' )[ 0],\r
value,\r
- index = GROUP_ID ? FORM_GROUP_TABLE[ GROUP_ID].length : -1,\r
- instance,\r
+ instance = this,\r
focus = false,\r
visible = true,\r
enabled = true,\r
- elmA = ELM_A_ORIGIN.cloneNode( true);\r
+ elmA = ELM_A_ORIGIN.cloneNode( true );\r
\r
- if( elmValue === undefined){\r
+ if( elmValue === undefined ){\r
alert( 'error!');\r
}\r
value = elmValue.innerHTML;\r
elmValue.innerHTML = '';\r
elmValue.className += ' editable-text';\r
+ try {\r
+ elmA.innerHTML = value;\r
+ } catch(e){\r
+ alert( value )\r
+ }\r
\r
- elmA.innerHTML = value;\r
- elmValue.appendChild( elmA);\r
+ elmValue.appendChild( elmA );\r
WRAPPER_ELM.onclick = onClick;\r
\r
- function onClick( e){\r
+ function onClick(){\r
focus = true;\r
- start( instance);\r
+ start( instance );\r
elmA.style.display = 'none';\r
- elmValue.appendChild( ELM_INPUT_TEXT);\r
+ elmValue.appendChild( ELM_INPUT_TEXT );\r
ELM_INPUT_TEXT.value = value;\r
ELM_INPUT_TEXT.focus();\r
ELM_INPUT_TEXT.select();\r
- e && e.preventDefault();\r
return false;\r
}\r
\r
- return {\r
- init: function(){\r
- instance = this;\r
- delete this.init;\r
- },\r
- value: function( _value){\r
- if( _value !== undefined){\r
- elmA.innerHTML = _value;\r
- value = _value;\r
- \r
- if( focus === true){\r
- ELM_INPUT_TEXT.value = value;\r
- }\r
- }\r
- currentItem === instance && this.finish();\r
- return value;\r
- },\r
- start: function(){\r
- onClick();\r
- },\r
- finish: function( keep){\r
- var _newValue = ELM_INPUT_TEXT.value,\r
- _validated = validater !== null ? '' + validater( _newValue) : _newValue;\r
- _newValue = keep !== true ? _validated : value;\r
-\r
- elmValue.removeChild( ELM_INPUT_TEXT);\r
- \r
- elmA.innerHTML = _newValue;\r
- elmA.style.display = 'block';\r
+ this.value = function( _value ){\r
+ if( _value !== undefined){\r
+ elmA.innerHTML = _value;\r
+ value = _value;\r
\r
- ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);\r
- finish( instance);\r
- value = _newValue;\r
- focus = false;\r
- },\r
- enabled: function(){\r
- return enabled;\r
- },\r
- visible: function( _visible){\r
- if( _visible === true){\r
- WRAPPER_ELM.style.display = '';\r
- visible = true;\r
- } else\r
- if( _visible === false){\r
- WRAPPER_ELM.style.display = 'none';\r
- visible = false;\r
+ if( focus === true){\r
+ ELM_INPUT_TEXT.value = value;\r
}\r
- return visible;\r
- },\r
- index : index,\r
- groupID: GROUP_ID\r
+ }\r
+ currentItem === instance && instance.blur();\r
+ return value;\r
+ }\r
+ this.focus = function(){\r
+ onClick();\r
}\r
+ this.blur = function( keep ){\r
+ var _newValue = ELM_INPUT_TEXT.value,\r
+ _validated = validater !== null ? '' + validater( _newValue ) : _newValue;\r
+ _newValue = keep !== 27 ? _validated : value; // 27:ESC\r
+\r
+ elmValue.removeChild( ELM_INPUT_TEXT );\r
+ \r
+ elmA.innerHTML = _newValue;\r
+ elmA.style.display = 'block';\r
+ \r
+ ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value );\r
+ \r
+ value = _newValue;\r
+ focus = false;\r
+ \r
+ currentItem = null;\r
+ }\r
+ this.enabled = function(){\r
+ return enabled;\r
+ }\r
+ this.visible = function( _visible ){\r
+ if( _visible === true){\r
+ WRAPPER_ELM.style.display = '';\r
+ visible = true;\r
+ } else\r
+ if( _visible === false){\r
+ WRAPPER_ELM.style.display = 'none';\r
+ visible = false;\r
+ }\r
+ return visible;\r
+ }\r
+ this.groupID = GROUP_ID;\r
+ }\r
+ \r
+ var ButtonClass = function( WRAPPER_ELM, ON_CLICK_FUNCTION, GROUP_ID ){\r
+ var className = WRAPPER_ELM.className || '',\r
+ instance = this,\r
+ focus = false,\r
+ visible = true,\r
+ enabled = true;\r
+ \r
+ WRAPPER_ELM.onclick = onClick;\r
+ \r
+ function onClick(){\r
+ focus = true;\r
+ ON_CLICK_FUNCTION();\r
+ return false;\r
+ }\r
+ this.focus = function(){\r
+ focus = true;\r
+ WRAPPER_ELM.className = className + ' button-has-focus';\r
+ start( instance );\r
+ }\r
+ this.blur = function( keyCode ){\r
+ keyCode === 13 && ON_CLICK_FUNCTION();\r
+ WRAPPER_ELM.className = className;\r
+ focus = false;\r
+ finish( instance );\r
+ }\r
+ this.enabled = function(){\r
+ return enabled;\r
+ }\r
+ this.visible = function( _visible ){\r
+ if( _visible === true){\r
+ WRAPPER_ELM.style.display = '';\r
+ visible = true;\r
+ } else\r
+ if( _visible === false){\r
+ WRAPPER_ELM.style.display = 'none';\r
+ visible = false;\r
+ }\r
+ return visible;\r
+ }\r
+ this.groupID = GROUP_ID;\r
}\r
\r
- var FileInputClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater, elmFileInput){\r
+ var FileInputClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater, elmFileInput ){\r
validater = typeof validater === 'function' ? validater : null;\r
\r
var elmFilePath = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'file-path')[ 0],\r
instance,\r
focus = false,\r
visible = true,\r
- enabled = true,\r
- elmFileInput = WRAPPER_ELM.getElementsByTagName('input')[0] || elmFileInput || document.createElement( 'input');\r
+ enabled = true;\r
+ elmFileInput = WRAPPER_ELM.getElementsByTagName('input')[0] || elmFileInput || document.createElement( 'input');\r
elmFileInput.type = 'file';\r
elmFileInput.style.visivility = 'hidden';\r
\r
\r
function onClick( e){\r
focus = true;\r
- start( instance);\r
+ start( instance );\r
elmFileInput.click();\r
return false;\r
}\r
instance = this;\r
delete this.init;\r
},\r
- start: function(){\r
+ focus: function(){\r
onClick();\r
},\r
- finish: function( keep){\r
+ blur: function( keep ){\r
focus = false;\r
},\r
enabled: function(){\r
}\r
}\r
\r
+ var ComboBoxClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID ){\r
+ var elmBox = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'combobox' )[ 0 ],\r
+ elmA = ELM_COMBOBOX.cloneNode( true ),\r
+ elmToggle = pettanr.util.getElementsByClassName( elmA, 'combobox-toggle' )[ 0 ],\r
+ elmValue = pettanr.util.getElementsByClassName( elmA, 'combobox-value' )[ 0 ].firstChild,\r
+ value, index = 0,\r
+ optionList = [],\r
+ instance = this,\r
+ oldBodyMouseupHandler,\r
+ focus = false,\r
+ visible = true,\r
+ enabled = true;\r
+ \r
+ elmBox.appendChild( elmA );\r
+ WRAPPER_ELM.onclick = onClick;\r
+ \r
+ function onClick(){\r
+ WRAPPER_ELM.onclick = null;\r
+ focus = true;\r
+ elmA.className = 'combobox-has-focus';\r
+ start( instance );\r
+ OptionControl.show( instance, optionList );\r
+ return false;\r
+ }\r
+ this.elm = elmBox;\r
+ this.focus = function(){\r
+ onClick();\r
+ }\r
+ this.blur = function( keyCode ){\r
+ OptionControl.hide( instance );\r
+ focus = false;\r
+ elmA.className = '';\r
+ finish( instance );\r
+ WRAPPER_ELM.onclick = onClick;\r
+ }\r
+ this.enabled = function(){\r
+ return enabled;\r
+ }\r
+ this.visible = function( _visible ){\r
+ if( _visible === true){\r
+ WRAPPER_ELM.style.display = '';\r
+ visible = true;\r
+ } else\r
+ if( _visible === false){\r
+ WRAPPER_ELM.style.display = 'none';\r
+ visible = false;\r
+ }\r
+ return visible;\r
+ }\r
+ this.value = function( _value ){\r
+ var i, j,\r
+ l=optionList.length,\r
+ _option;\r
+ if( Type.isString( _value ) === true && value !== _value ){\r
+ for( i=0; i<l; ++i ){\r
+ _option = optionList[ i ];\r
+ if( _value === _option.value ){\r
+ value = _value;\r
+ index = i;\r
+ elmValue.data = _option.displayValue;\r
+ if( focus === true ){\r
+ OptionControl.update( instance, _value );\r
+ }\r
+ break;\r
+ }\r
+ }\r
+ }\r
+ return value;\r
+ }\r
+ this.selectIndex = function(){\r
+ return index;\r
+ }\r
+ this.createOption = function( displayValue, _value, isSelected ){\r
+ var exist = false,\r
+ option = null, _option,\r
+ _index;\r
+ for( var i = 0, l = optionList.length; i < l; ++i ){\r
+ if( _value === optionList[ i ].value ){\r
+ option = optionList[ i ];\r
+ _index = i;\r
+ break;\r
+ }\r
+ }\r
+ if( option === null ){\r
+ option = new OptionClass( instance, displayValue, _value );\r
+ _index = optionList.length;\r
+ optionList.push( option );\r
+ }\r
+ if( isSelected === true ){\r
+ elmValue.data = option.displayValue;\r
+ value = _value;\r
+ index = _index;\r
+ for( i = 0, l = optionList.length; i < l; ++i ){\r
+ _option = optionList[ i ];\r
+ _option.current( _option.value === _value );\r
+ }\r
+ }\r
+ return option;\r
+ }\r
+ this.groupID = GROUP_ID;\r
+ }\r
+ \r
+ var OptionControl = ( function(){\r
+ var ELM_OPTION_WRAPPER = ( function(){\r
+ var ret = document.createElement( 'ul' );\r
+ ret.className = 'option-container';\r
+ return ret;\r
+ })();\r
+ var currentCombobox = null,\r
+ optionList,\r
+ elm,\r
+ value,\r
+ currentOption,\r
+ currentIndex;\r
+ \r
+ function updateCurrrentOption( _value, _updateCombobox ){\r
+ var _option;\r
+ for( var i=0, l=optionList.length; i<l; ++i ){\r
+ _option = optionList[ i ]\r
+ if( _value === _option.value ){\r
+ currentOption && currentOption.current( false );\r
+ _option.current( true );\r
+ currentOption = _option;\r
+ currentIndex = i;\r
+ _updateCombobox === true && currentCombobox.value( _value );\r
+ }\r
+ }\r
+ }\r
+ function bodyMouseupHandler(){\r
+ currentCombobox.blur();\r
+ OptionControl.hide( currentCombobox );\r
+ }\r
+ function updateWrapperPosition(){\r
+ var position = pettanr.util.getAbsolutePosition( elm );\r
+ \r
+ ELM_OPTION_WRAPPER.style.cssText = [\r
+ 'width:', elm.offsetWidth - 2, 'px;',\r
+ 'left:', position.x, 'px;',\r
+ 'top:', position.y + elm.offsetHeight, 'px;'\r
+ ].join(''); \r
+ }\r
+ return {\r
+ show: function( _combobox, _optionList ){\r
+ if( currentItem !== _combobox || currentCombobox === _combobox ) return;\r
+ currentCombobox && currentCombobox.blur();\r
+ \r
+ currentCombobox = _combobox;\r
+ optionList = _optionList;\r
+ elm = _combobox.elm;\r
+ \r
+ updateCurrrentOption( _combobox.value(), false );\r
+ \r
+ for( var i=0, l=optionList.length; i<l; ++i ){\r
+ ELM_OPTION_WRAPPER.appendChild( optionList[ i ].elm );\r
+ }\r
+ \r
+ document.body.appendChild( ELM_OPTION_WRAPPER );\r
+ oldBodyMouseupHandler = document.body.onmouseup;\r
+ document.body.onmouseup = bodyMouseupHandler;\r
+ \r
+ updateWrapperPosition();\r
+ },\r
+ hide: function( _combobox ){\r
+ if( currentCombobox !== _combobox ) return;\r
\r
- function start( _currentItem){\r
- currentItem !== _currentItem && currentItem && currentItem.finish();\r
+ ELM_OPTION_WRAPPER.parentNode && ELM_OPTION_WRAPPER.parentNode.removeChild( ELM_OPTION_WRAPPER );\r
+ while( ELM_OPTION_WRAPPER.firstChild ){\r
+ ELM_OPTION_WRAPPER.removeChild( ELM_OPTION_WRAPPER.firstChild );\r
+ }\r
+ currentCombobox = null;\r
+ currentOption = null;\r
+ currentIndex = 0;\r
+ \r
+ document.body.onmouseup = oldBodyMouseupHandler;\r
+ },\r
+ change: function( down ){\r
+ var l = optionList.length,\r
+ way = down === true ? 1 : -1;\r
+ i = currentIndex + way\r
+ if( currentCombobox === false || l < 2 ) return;\r
+ i = i < 0 ?\r
+ l - 1 :\r
+ i < l ? i : 0;\r
+ updateCurrrentOption( optionList[ i ].value, false );\r
+ },\r
+ update: function( _combobox, _value ){\r
+ if( currentCombobox !== _combobox || currentItem !== _combobox ) return;\r
+ if( currentOption.value === _value ) return;\r
+ updateCurrrentOption( _value, true );\r
+ },\r
+ decide: function(){\r
+ currentCombobox.value( currentOption.value );\r
+ currentCombobox.blur();\r
+ OptionControl.hide( currentCombobox );\r
+ },\r
+ onWindowResize: function( _w, _h ){\r
+ setTimeout( updateWrapperPosition, 0 );\r
+ }\r
+ }\r
+ })();\r
+ \r
+ var OptionClass = function( combobox, displayValue, value ){\r
+ var elm = document.createElement( 'li' ),\r
+ a = document.createElement( 'a' ),\r
+ isCurrent = undefined;\r
+ elm.appendChild( a );\r
+ a.appendChild( document.createTextNode( displayValue ));\r
+ elm.className = CLASSNAME_COMBOBOX_OPTION;\r
+ a.href = '#';\r
+ \r
+ a.onmousedown = onClick; // onclick では 選択ボックス 隠すように body に設定した onmouseup が先に動いてしまう！\r
+ function onClick(){\r
+ OptionControl.update( combobox, value );\r
+ OptionControl.hide( combobox );\r
+ combobox.blur();\r
+ return false;\r
+ }\r
+ this.elm = elm;\r
+ this.displayValue = displayValue;\r
+ this.value = value = value || displayValue;\r
+ this.current = function( _isCurrent ){\r
+ if( Type.isBoolean( _isCurrent ) === true && isCurrent !== _isCurrent ){\r
+ elm.className = CLASSNAME_COMBOBOX_OPTION + ( _isCurrent === true ? ' current-option' : '' );\r
+ isCurrent = _isCurrent;\r
+ }\r
+ return !!isCurrent;\r
+ }\r
+ }\r
+ \r
+\r
+ function start( _currentItem ){\r
+ currentItem !== _currentItem && currentItem && currentItem.blur();\r
currentItem = _currentItem;\r
}\r
- function finish( _currentItem){\r
- if( currentItem !== _currentItem) return;\r
- currentItem = null;\r
+ function finish( _currentItem ){\r
+ currentItem = currentItem === _currentItem ? null : currentItem;\r
}\r
\r
- function tabShift( _groupID, _index, _way){\r
- var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID] || [],\r
+ function tabShift( _groupID, _index, _way ){\r
+ var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID ] || [],\r
l = GROUP_ARRAY.length,\r
- i = _index +_way;\r
- if( l < 2) return;\r
- while( i !== _index){\r
+ i = _index + _way,\r
+ _item;\r
+ if( l < 2 ) return;\r
+ while( i !== _index ){\r
i = i < 0 ?\r
- l -1 :\r
- i === l ? 0 : i; // 0 < i < l\r
- if( GROUP_ARRAY[ i].enabled() === true && GROUP_ARRAY[ i].visible() === true) break;\r
+ l - 1 :\r
+ i < l ? i : 0; // 0 < i < l\r
+ _item = GROUP_ARRAY[ i ];\r
+ if( _item.enabled() === true && _item.visible() === true ){\r
+ setTimeout( _item.focus, 0 );\r
+ return;\r
+ }\r
i += _way;\r
}\r
- if( i === _index) return;\r
- setTimeout( GROUP_ARRAY[ i].start, 0);\r
}\r
\r
return {\r
focus: function(){\r
return currentItem !== null; \r
},\r
- keyEventRellay: function( e){\r
- if( e.type === 'keyup') return false;\r
- if( currentItem === null) return false;\r
+ keyEventRellay: function( e ){\r
+ if( e.type === 'keyup' ) return false;\r
+ if( currentItem === null ) return false;\r
\r
var keyCode = e.keyCode;\r
- if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt\r
- var _groupID = currentItem.groupID,\r
- _index = currentItem.index;\r
- currentItem.finish( keyCode === 27);\r
- keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);\r
- keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);\r
+ var _groupID = currentItem.groupID,\r
+ _index = pettanr.util.getIndex( FORM_GROUP_TABLE[ _groupID ], currentItem );\r
+ if( currentItem instanceof ComboBoxClass ) {\r
+ if( 37 <= keyCode && keyCode <= 40 ){ // ↑38 ←37 →39 ↓40\r
+ OptionControl.change( keyCode === 40 );\r
+ return true;\r
+ } else\r
+ keyCode === 13 && OptionControl.decide();\r
+ }\r
+ if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true ){ // 13.return 27.esc 9.tab 18.alt\r
+ currentItem && currentItem.blur( keyCode );\r
+ keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1 );\r
+ keyCode === 13 && _groupID && tabShift( _groupID, _index, 1 );\r
}\r
return true;\r
},\r
- createInputText: function( _elm, _onUpdate, _groupID, _validater){\r
+ createUIGroup: function( _applicationReferance ){\r
+ \r
+ },\r
+ createInputText: function( _elm, _onUpdate, _groupID, _validater ){\r
if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
FORM_GROUP_TABLE[ _groupID] = [];\r
}\r
- var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater);\r
- ret.init();\r
- _groupID && FORM_GROUP_TABLE[ _groupID].push( ret);\r
+ var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater );\r
+ _groupID && FORM_GROUP_TABLE[ _groupID ].push( ret );\r
+ return ret;\r
+ },\r
+ createButton: function( _elm, _onClick, _groupID ){\r
+ if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
+ FORM_GROUP_TABLE[ _groupID ] = [];\r
+ }\r
+ var ret = new ButtonClass( _elm, _onClick, _groupID );\r
+ _groupID && FORM_GROUP_TABLE[ _groupID ].push( ret );\r
return ret;\r
},\r
- createFileInput: function( _elm, _onUpdate, _groupID, _validater, _elmFileInput){\r
+ createFileInput: function( _elm, _onUpdate, _groupID, _validater, _elmFileInput ){\r
if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
FORM_GROUP_TABLE[ _groupID] = [];\r
}\r
- var ret = FileInputClass( _elm, _onUpdate, _groupID, _validater, _elmFileInput);\r
- ret.init();\r
+ var ret = FileInputClass( _elm, _onUpdate, _groupID, _validater, _elmFileInput );\r
_groupID && FORM_GROUP_TABLE[ _groupID].push( ret);\r
return ret;\r
},\r
+ createCombobox: function( _elm, _onUpdate, _groupID, _optionList ){\r
+ if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
+ FORM_GROUP_TABLE[ _groupID ] = [];\r
+ }\r
+ var ret = new ComboBoxClass( _elm, _onUpdate, _groupID );\r
+ _groupID && FORM_GROUP_TABLE[ _groupID ].push( ret );\r
+ return ret;\r
+ },\r
createCheckBox: function(){\r
\r
},\r
createRadio: function(){\r
\r
},\r
- createButton: function(){\r
- \r
- },\r
- createListBox: function(){\r
- \r
+ onWindowResize: function( w, h ){\r
+ windowW = w;\r
+ windowH = h;\r
+ currentItem instanceof ComboBoxClass && OptionControl.onWindowResize( w, h );\r
}\r
}\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
+ if( IS_VML === true && pettanr.ua.VML === false ) vectorEnabled = false;\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 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
+ instance = this,\r
l = ',';\r
\r
- draw( a, w, h);\r
+ draw( a, w, h );\r
\r
- function draw( _a, _w, _h){\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
+ 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
}\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
+ /* \r
+ * FetchClass original is\r
+ * \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
+ 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
- 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
+ }\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
+ \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
- var serverImage = function( url, w, h, onLoadCallback){\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 css3Image.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
- if( BACKEND === IS_VML) return vmlImage.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
- if( BACKEND === IS_ACTIVEX) return activexImage.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
- return serverImage.apply( {}, [ 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
/*\r
- * bind : 製本
+ * bind : 製本\r
*/\r
pettanr.bind = ( function(){\r
var BIND_WORKER_ARRAY = [],\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
* coputedStyle と一致も削除\r
* updateTraget ととして記録\r
* 初期値を cssObject としてセット\r
- * cssTest にセット zoom もセット
+ * cssTest にセット zoom もセット\r
*/\r
\r
//\r
\r
// IE has trouble with opacity if it does not have layout\r
// Force it by setting the zoom level\r
- style.zoom = 1;
+ style.zoom = 1;\r
*/\r
\r
var _currentParameters = [],\r
_target = _css.substr( 0, _separate +1);\r
_value = _css.substr( _separate +1);\r
/*\r
- * ie filter
+ * ie filter\r
*/\r
if( _target === FILTER){\r
for( j=0; j<_numAttributes; ++j){\r
}\r
}\r
/*\r
- * other
+ * other\r
*/\r
} else {\r
_number = '' + parseFloat( _value);\r
return; \r
}\r
/*\r
- * 一度に update する Attributes が少ない場合、cssText は使用しない.
+ * 一度に update する Attributes が少ない場合、cssText は使用しない.\r
*/\r
}\r
\r
return {\r
elm: ELM,\r
onEnterFrame: function(){\r
- var _updateCss = {};\r
+ var _updateCss = {}, i;\r
if( numFrames === 1){\r
- for( var i=0; i<l; ++i){\r
+ for( i=0; i<l; ++i){\r
_updateCss[ targetAttributes[ i]] = endParameters[ i];\r
++i;\r
}\r
updateCss( ELM, currentParameters, targetAttributes, l);\r
onComplete !== null && onComplete();\r
} else {\r
- for( var i=0; i<l; ++i){\r
+ for( i=0; i<l; ++i){\r
_updateCss[ targetAttributes[ i]] = currentParameters[ i] = Math.floor( currentParameters[ i] + offsetParameters[ i]);\r
++i;\r
}\r
/*
* pettanR system.js
- * version 0.4.15
+ * version 0.4.28
*
* author:
* itozyun
* 3-clause BSD
*/
-
-pettanr.log = ( function(){
- return {
- init: function(){}
- }
-})();
-
-pettanr.io = ( function(){
-
- return {
- init: function(){}
- }
-})();
-
/*
* 画像一覧は
* お気に入り画像一覧 > tag:ペン次郎 > ペン次郎：笑う
var REQUEST_CONTROLER = ( function(){
var REQUEST_TICKET_RESISTER = [],
+ currentTicket = null,
+ currentData = null,
DATA_TYPE_ARRAY = 'json,xml,html,text'.split( ','),
DATA_IS_JSON = 0,
DATA_IS_XML = 1,
};
function request(){
- if( REQUEST_TICKET_RESISTER.length === 0) return;
- var _ticket = REQUEST_TICKET_RESISTER.shift();
+ if( currentTicket !== null ) return;
+ currentTicket = REQUEST_TICKET_RESISTER.shift();
$.ajax({
- url: _ticket.url,
- dataType: _ticket.type,
- success: function( _data){
- _ticket.onLoad( _ticket.data, _data);
- },
- error: function(){
- ++numError;
- _ticket.onError( _ticket.data);
- }
+ url: currentTicket.url,
+ dataType: currentTicket.type,
+ success: onSuccess,
+ error: onError
});
}
+ function onSuccess( _data ){
+ currentData = _data;
+ window.setTimeout( asyncSuccess, 0 );
+ }
+ function asyncSuccess(){
+ currentTicket.onLoad( currentTicket.data, currentData );
+ currentTicket = currentData = null;
+ REQUEST_TICKET_RESISTER.length !== 0 && window.setTimeout( request, 0 );
+ }
+ function onError(){
+ ++numError;
+ window.setTimeout( asyncError, 0 );
+ }
+ function asyncError(){
+ currentTicket.onError( currentTicket.data );
+ currentTicket = null;
+ REQUEST_TICKET_RESISTER.length !== 0 && window.setTimeout( request, 0 );
+ }
return {
getNumTask: function(){
return REQUEST_TICKET_RESISTER.length;
getNumError: function(){
return numError;
},
- getJson: function( _data, _url, _onLoad, _onError){
+ getJson: function( _data, _url, _onLoad, _onError ){
REQUEST_TICKET_RESISTER.push( new RequestTicketClass( DATA_IS_JSON, _data, _url, _onLoad, _onError));
- request();
+ currentTicket === null && request();
}
}
})();
TREE_ARRAY.push( _tree);
return _tree;
},
+ getFileUID: function( FILEDATAorFILE ){
+ if( FILEDATAorFILE instanceof FileClass ){
+ return FILEDATAorFILE.getUID();
+ }
+
+ var uid = pettanr.util.getIndex( FILEDATA_RESITER, FILEDATAorFILE );
+ if( uid === -1){
+ uid = FILEDATA_RESITER.length;
+ FILEDATA_RESITER.push( FILEDATAorFILE );
+ }
+ return uid;
+ },
getFileDataAccess: function( UIDorFILEorFILEDATA){
var _uid, _data, _access;
} else
if( UIDorFILEorFILEDATA instanceof FileClass){
_uid = UIDorFILEorFILEDATA.getUID();
- _data = FILEDATA_RESITER[ _uid] || null;
+ _data = FILEDATA_RESITER[ _uid ] || null;
} else {
_data = UIDorFILEorFILEDATA || null;
}
if( _access.DATA === _data) return _access;
}
return null;
- },
+ },
getFileData: function( UIDorFILEorFILEDATA){
var _access = FILE_CONTROLER.getFileDataAccess( UIDorFILEorFILEDATA);
return _access !== null ? _access.DATA : null;
replace: function( _uid, _file, _newIndex){
},
- addEventListener: function( FILEorNULL, _eventType, _callback){
+ addEventListener: function( FILEorNULL, _eventType, _callback ){
var _uid = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL;
EVENT_LISTENER_REGISTER.push( new FileEventTicketClass( _uid, _eventType, _callback));
},
- removeEventListener: function( FILEorNULL, _eventType, _callback){
+ 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){
}
}
},
- fileEventRellay: function( _targetFile, _targetTree, _event){
- var _uid = _targetTree.getUID(),
- _access = TREE_ACCESS_ARRAY[ _uid ],
- _data = FILE_CONTROLER.getFileData( _targetFile ),
+ getTreeAccess: function(){
+
+ },
+ fileEventRellay: function( _uid, _event ){
+ var _fileAccess = FILE_CONTROLER.getFileDataAccess( _uid );
+ if( _fileAccess === null ) return;
+ var _treeUID = _fileAccess.TREE.getUID(),
+ _treeAccess = TREE_ACCESS_ARRAY[ _treeUID ],
+ _data = _fileAccess.DATA,
_tree;
- _access && _access.dispatchFileEvent( _event );
+ if( !_treeAccess ) return;
+ _treeAccess.dispatchFileEvent( _event );
for( var i=0, l = TREE_ARRAY.length; i<l; ++i){
- if( i !== _uid){
+ if( i !== _treeUID ){
_tree = TREE_ARRAY[ i ];
if( FILE_CONTROLER.getFileData( _tree.getCurrentFile() ) === _data ){
- _access = TREE_ACCESS_ARRAY[ _tree.getUID() ];
- _access && _access.dispatchFileEvent( _event);
+ _treeAccess = TREE_ACCESS_ARRAY[ _tree.getUID() ];
+ _treeAccess && _treeAccess.dispatchFileEvent( _event );
}
}
}
}
}
-
- var TreeClass = function( ROOTFILE_DATA){
- var UID = TREE_ACCESS_ARRAY.length,
- PARENT_FILE_RESITER = [],
+
+ var AsyncEventDispatcher = ( function(){
+ var STACK_LIST = [];
+
+ function dispatch(){
+ var _stack = STACK_LIST.shift();
+ _stack[ 0 ]( _stack[ 1 ], _stack[ 2 ], _stack[ 3 ], _stack[ 4 ] );
+
+ while( _stack.length > 0 ){
+ _stack.shift();
+ }
+ if( STACK_LIST.length !== 0 ){
+ window.setTimeout( dispatch, 0 );
+ }
+ }
+ return {
+ addEvent: function( _callback, _eventType, _targetFile, _key, _value ){
+ if( STACK_LIST.length === 0 ){
+ window.setTimeout( dispatch, 0 );
+ }
+ STACK_LIST.push( [ _callback, _eventType, _targetFile, _key, _value ] );
+ }
+ }
+ })();
+
+ var TreeClass = function( rootFileData ){
+ var PARENT_FILE_RESITER = [],
ACCESS = {
- dispatchFileEvent: dispatchFileEvent,
- destroy: onDestroy
+ dispatchFileEvent: dispatchFileEvent
},
EVENT_LISTENER_ARRAY = [],
rootFile,
- rootFileData,
currentFile,
- currentFileData,
instance;
- TREE_ACCESS_ARRAY.push( ACCESS);
-
- function onDestroy(){
-
- }
+ TREE_ACCESS_ARRAY.push( ACCESS );
- function dispatchFileEvent( e){
+ function dispatchFileEvent( e ){
var _eventType = e.eventType,
_targetFile = e.targetFile,
_uid = _targetFile.getUID(),
_ticket, _type, _callback;
- for(var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i){
- _ticket = EVENT_LISTENER_REGISTER[i];
+ for( var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i ){
+ _ticket = EVENT_LISTENER_REGISTER[ i ];
_type = _ticket.eventType;
_callback = _ticket.callBack;
- if( _eventType === _type && _uid === _ticket.fileUID){
- _callback( _eventType, _targetFile, e.key, e.value);
+ if( _eventType === _type && _uid === _ticket.fileUID ){
+ AsyncEventDispatcher.addEvent( _callback, _eventType, _targetFile, e.key, e.value );
} else
- if( _type === pettanr.file.TREE_EVENT.UPDATE && _eventType === pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES){
- _callback( _eventType, _targetFile);
+ if( _type === pettanr.file.TREE_EVENT.UPDATE && _eventType === pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES ){
+ AsyncEventDispatcher.addEvent( _callback, _eventType, _targetFile );
}
}
}
return {
init: function(){
instance = this;
- currentFile = rootFile = new FileClass( this, null, ROOTFILE_DATA);
+ currentFile = rootFile = new FileClass( instance, null, rootFileData );
// rootFile.init();
currentFile.getSeqentialFiles();
delete this.init;
},
- getUID: function(){ return UID},
+ getUID: function(){
+ return pettanr.util.getIndex( TREE_ACCESS_ARRAY, ACCESS );
+ },
getRootFile : function(){
return rootFile;
},
},
down: function( _index){
if( typeof _index !== 'number' || _index < 0 || _index >= currentFile.getChildFileLength()) return;
- PARENT_FILE_RESITER.unshift( currentFile);
- currentFile = currentFile.getChildFileByIndex( _index);
+ PARENT_FILE_RESITER.unshift( currentFile );
+ currentFile = currentFile.getChildFileByIndex( _index );
currentFile.getSeqentialFiles();
return currentFile;
},
up: function( _index){
var l = PARENT_FILE_RESITER.length;
if( l === 0) return null;
+
+ if( currentFile ){
+ var _currentFile = currentFile;
+ currentFile = null;
+ _currentFile.destroy();
+ }
if( typeof _index === 'number'){
if( _index >= l) return null;
- currentFile = this.getParentFileAt( _index);
+ currentFile = this.getParentFileAt( _index );
PARENT_FILE_RESITER.splice( 0, l -_index);
} else {
currentFile = PARENT_FILE_RESITER.shift();
FILE_CONTROLER.removeEventListener( null, _eventType, _callback);
},
destroy: function(){
- FILE_CONTROLER.destroyTree( UID);
+ FILE_CONTROLER.destroyTree( instance.getUID() );
+ // removeEvent
+ var _currentFile = currentFile;
+ currentFile = rootFile = rootFileData = null;
+ // currentFile, rootFile を null にしないと .File.destroy() ができない.
+ _currentFile.destroy();
+ while( PARENT_FILE_RESITER.length > 0 ){
+ _currentFile = PARENT_FILE_RESITER.shift();
+ _currentFile.destroy();
+ }
+ instance = null;
}
}
};
* fileの変更、それに付随して追加されたイベントは、TreeClassで管理される。
* treeがdestryされると、fileのイベントリスナーも全て削除される。
* 他の tree も data の共通する currentFile に対してのみは、file の変更イベントを受け取って流す．
+ *
+ * parentData のほうがいい！
*/
- var FileClass = function( TREE, parentFile, data){
- var uid = pettanr.util.getIndex( FILEDATA_RESITER, data ),
+ var FileClass = function( tree, parentData, data ){
+ var uid = FILE_CONTROLER.getFileUID( data ),
instance = this;
- if( uid === -1){
- uid = FILEDATA_RESITER.length;
- FILEDATA_RESITER.push( data );
- }
-
FILEDATA_ACCESS.push(
{
+ TREE: tree,
+ parentData: parentData,
DATA: data,
- updateParent: updateParent,
dispatchFileEvent: dispatchEvent
}
);
-
- function updateParent( _parent){
- parentFile = _parent;
- }
- function dispatchEvent( e){
- FILE_CONTROLER.fileEventRellay( instance, TREE, e);
- }
- /* grobal Methods */
-
+ tree = parentData = data = null;
+
+ function dispatchEvent( e ){
+ FILE_CONTROLER.fileEventRellay( uid, e );
+ }
this.getUID = function(){
return uid;
}
- /*
- * ファイル構造は TRON のような ハイパーリンク方式 だが、文脈上の 親ファイルが存在する．その親ファイルを使う操作は.prototype に置く事ができない．
- * 同様に TREE を使う操作も .prototype に置く事ができない．
- */
- this.getChildFileByIndex = function( _index){
- var _children = FILE_CONTROLER.getChildren( instance );
- if( typeof _index !== 'number' || _index < 0 || typeof _children.length !== 'number' || _index >= _children.length) return null;
- var _file = new FileClass( TREE, this, _children[ _index]);
- // _file.init();
- return _file;
- }
- this.move = function( _newFolder, _newIndex, opt_callback){
- TREE.move( parentFile, UID, _newFolder, _newIndex, opt_callback);
- }
- this.replace = function( _newIndex, opt_callback){
- TREE.replace( parentFile, UID, _newIndex, opt_callback);
- }
- this.destroy = function(){
- var _access = FILE_CONTROLER.getFileDataAccess( instance );
- _index = getChildIndex( FILEDATA_ACCESS, _access );
- if( _index === -1 || _access === null) return;
- FILEDATA_ACCESS.splice( _index, 1);
- TREE = parentFile = data = null;
- delete _access.DATA;
- delete _access.updateParent;
- delete _access.dispatchFileEvent;
- }
};
FileClass.prototype = {
},
getSeqentialFiles: function(){
var _driver = FILE_CONTROLER.getDriver( this );
- if( _driver !== null && typeof _driver.getSeqentialFiles === 'function'){
+ if( _driver !== null && typeof _driver.getSeqentialFiles === 'function' ){
_driver.getSeqentialFiles( this );
}
},
- addEventListener: function( _eventType, _callback){
- FILE_CONTROLER.addEventListener( this, _eventType, _callback);
+ addEventListener: function( _eventType, _callback ){
+ FILE_CONTROLER.addEventListener( this, _eventType, _callback );
},
- removeEventListener: function( _eventType, _callback){
- FILE_CONTROLER.removeEventListener( this, _eventType, _callback);
+ removeEventListener: function( _eventType, _callback ){
+ FILE_CONTROLER.removeEventListener( this, _eventType, _callback );
},
getChildFileLength: function(){
- var children = FILE_CONTROLER.getChildren( this);
+ var children = FILE_CONTROLER.getChildren( this );
return Type.isArray( children ) === true ? children.length : -1;
},
- getChildFileIndex: function( _FILEorFILEDATA){
+ getChildFileIndex: function( _FILEorFILEDATA ){
var children = FILE_CONTROLER.getChildren( this);
- if( Type.isArray( children.length ) === false ) return -1;
+ if( Type.isArray( children ) === false ) return -1;
var l = children.length,
- _fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA);
- if( _fileData === null) return -1;
- for(var i=0; i<l; ++i){
- if( children[ i] === _fileData) return i;
+ _fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA );
+ if( _fileData === null ) return -1;
+ for( var i=0; i<l; ++i ){
+ if( children[ i ] === _fileData ) return i;
}
return -1;
},
+ getChildFileByIndex: function( _index ){
+ var _access = FILE_CONTROLER.getFileDataAccess( this ),
+ _children = FILE_CONTROLER.getChildren( this );
+ if( typeof _index !== 'number' || _index < 0 || Type.isArray( _children ) === false || _index >= _children.length) return null;
+ var _file = new FileClass( _access.TREE, _access.DATA, _children[ _index ]);
+ // _file.init();
+ return _file;
+ },
getName: function(){
var driver = FILE_CONTROLER.getDriver( this );
if( typeof driver.getName === 'function'){
return FileDriverBase.getSummary( this);
},
isWritable: function(){
- return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.WRITE);
+ return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.WRITE );
},
isSortable: function(){
- return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.SORT);
+ return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.SORT );
},
isCreatable: function(){
- return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.CREATE);
+ return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.CREATE );
},
isRenamable: function(){
- return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.RENAME);
+ return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.RENAME );
+ },
+ isDeletable: function(){
+ return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.DELETE );
},
read: function(){
// simpleDeepCopy
- return false;
+ var driver = FILE_CONTROLER.getDriver( this );
+ if( typeof driver.read === 'function'){
+ return driver.read( this );
+ }
+ return FileDriverBase.read( this );
},
- write: function( _newName, _newData){
- return false;
+ write: function( _newData, _onUpdateFunction ){
+ var driver = FILE_CONTROLER.getDriver( this );
+ if( typeof driver.write === 'function'){
+ return driver.write( this, _newData, _onUpdateFunction );
+ }
+ return FileDriverBase.write( this, _newData, _onUpdateFunction );
},
- viwerApplicationList: function(){
+ viewerApplicationList: function(){
var driver = FILE_CONTROLER.getDriver( this );
- if( typeof driver.viwerApplicationList === 'function'){
- return driver.viwerApplicationList( this );
+ if( typeof driver.viewerApplicationList === 'function'){
+ return driver.viewerApplicationList( this );
}
- return FileDriverBase.viwerApplicationList( this );
+ return FileDriverBase.viewerApplicationList( this );
},
editorApplicationList: function(){
- var driver = FILE_CONTROLER.editorApplicationList( this );
+ var driver = FILE_CONTROLER.getDriver( this );
if( typeof driver.editorApplicationList === 'function'){
return driver.editorApplicationList( this );
}
},
onDelete: function(){
+ },
+ move: function( _newFolder, _newIndex, opt_callback ){
+ var _access = FILE_CONTROLER.getFileDataAccess( this );
+ _access.TREE.move( _access.parentData, this.getUID(), _newFolder, _newIndex, opt_callback );
+ },
+ replace: function( _newIndex, opt_callback ){
+ var _access = FILE_CONTROLER.getFileDataAccess( this );
+ _access.TREE.replace( _access.parentData, this.getUID(), _newIndex, opt_callback);
+ },
+ /**
+ * サーチ
+ * 探しているファイルの属性と値を指定．一致する child の index を配列で返す．
+ */
+ search: function( obj, rule ){
+ var _children = FILE_CONTROLER.getChildren( this ),
+ _child,
+ ret = [], k, c;
+ for( var i=0, l=_children.length; i<l; ++i ){
+ _child = _children[ i ];
+ c = true;
+ for( k in obj ){
+ if( obj[ k ] !== _child[ k ] ){
+ c = false;
+ break;
+ }
+ }
+ c === true && ret.push( i );
+ }
+ return ret;
+ },
+ destroy: function(){
+ var _access = FILE_CONTROLER.getFileDataAccess( this );
+ var TREE = _access.TREE;
+ if( TREE.getCurrentFile() === this ) return;
+ if( TREE.getRootFile() === this ) return;
+ for( var i=0, l = TREE.hierarchy(); i<l; ++i ){
+ if( TREE.getParentFileAt( i ) === this ){
+ return;
+ }
+ }
+ var _index = pettanr.util.getIndex( FILEDATA_ACCESS, _access );
+ if( _index === -1 || _access === null ) return;
+ // event の 削除
+ FILEDATA_ACCESS.splice( _index, 1 );
+ delete _access.DATA;
+ delete _access.TREE;
+ delete _access.parentData;
+ delete _access.dispatchFileEvent;
}
}
}
return '';
},
- getUpdatePolicy: function( _file){
+ getUpdatePolicy: function( _file ){
// debug用 全てのメニューを許可
- return pettanr.file.FILE_UPDATE_POLICY.SRWC;
+ return pettanr.file.FILE_UPDATE_POLICY.DSRWC;
},
- read: function(){
- return false;
+ read: function( _file ){
+ var data = FILE_CONTROLER.getFileData( _file ),
+ protects = pettanr.file.FILE_DATA_PROPERTY_RESERVED;
+
+ function clone( src ) {
+ var ret;
+ if( Type.isArray(src) === true ){
+ ret = [];
+ } else
+ if( Type.isObject(src) === true ){
+ ret = {};
+ } else
+ if( Type.isNumber(src) === true || Type.isString(src) === true || Type.isBoolean( src ) === true ){
+ return src;
+ } else {
+ return null;
+ }
+ for( var key in src ){
+ if( pettanr.util.getIndex( protects, key ) === -1 ){
+ //alert( key )
+ ret[ key ] = clone( src[ key ]);
+ }
+ }
+ return ret;
+ };
+
+ return clone( data );
},
- write: function( _newName, _newData){
+ write: function( _file, _newData, _onUpdateFunction ){
+ var _data = FILE_CONTROLER.getFileData( _file ),
+ _type = _data.type;
return false;
},
- viwerApplicationList: function(){
+ viewerApplicationList: function(){
return [];
},
editorApplicationList: function(){
//FILE_CONTROLER.init();
delete pettanr.file.init;
},
- registerDriver: function( _driver){
+ registerDriver: function( _driver ){
_driver.prototype = FileDriverBase;
/*
* File API
BROKEN: 4
},
FILE_UPDATE_POLICY: {
- ____: parseInt( '0000', 2),
- ___C: parseInt( '0001', 2), // hasCreateMenu
- __W_: parseInt( '0010', 2), // isWritable
- __WC: parseInt( '0011', 2), // isWritable
- _R__: parseInt( '0000', 2), // isRenamable
- _R_C: parseInt( '0101', 2), // hasCreateMenu
- _RW_: parseInt( '0110', 2), // isWritable
- _RWC: parseInt( '0111', 2), // isWritable
- S___: parseInt( '1000', 2), // childrenIsSortable
- S__C: parseInt( '1001', 2),
- S_W_: parseInt( '1010', 2),
- S_WC: parseInt( '1011', 2),
- SR__: parseInt( '1000', 2),
- SR_C: parseInt( '1101', 2),
- SRW_: parseInt( '1110', 2),
- SRWC: parseInt( '1111', 2),
+ _____: parseInt( '00000', 2),
+ ____C: parseInt( '00001', 2), // hasCreateMenu
+ ___W_: parseInt( '00010', 2), // isWritable
+ ___WC: parseInt( '00011', 2), // isWritable
+ __R__: parseInt( '00100', 2), // isRenamable
+ __R_C: parseInt( '00101', 2), // hasCreateMenu
+ __RW_: parseInt( '00110', 2), // isWritable
+ __RWC: parseInt( '00111', 2), // isWritable
+ _S___: parseInt( '01000', 2), // childrenIsSortable
+ _S__C: parseInt( '01001', 2),
+ _S_W_: parseInt( '01010', 2),
+ _S_WC: parseInt( '01011', 2),
+ _SR__: parseInt( '01100', 2),
+ _SR_C: parseInt( '01101', 2),
+ _SRW_: parseInt( '01110', 2),
+ _SRWC: parseInt( '01111', 2),
+ D____: parseInt( '10000', 2),
+ D___C: parseInt( '10001', 2), // hasCreateMenu
+ D__W_: parseInt( '10010', 2), // isWritable
+ D__WC: parseInt( '10011', 2), // isWritable
+ D_R__: parseInt( '10100', 2), // isRenamable
+ D_R_C: parseInt( '10101', 2), // hasCreateMenu
+ D_RW_: parseInt( '10110', 2), // isWritable
+ D_RWC: parseInt( '10111', 2), // isWritable
+ DS___: parseInt( '11000', 2), // childrenIsSortable
+ DS__C: parseInt( '11001', 2),
+ DS_W_: parseInt( '11010', 2),
+ DS_WC: parseInt( '11011', 2),
+ DSR__: parseInt( '11100', 2),
+ DSR_C: parseInt( '11101', 2),
+ DSRW_: parseInt( '11110', 2),
+ DSRWC: parseInt( '11111', 2),
CREATE: 1,
WRAITE: 2,
RENAME: 4,
- SORT: 8
+ SORT: 8,
+ DELETE: 16
},
TREE_EVENT: {
UPDATE: 'onTreeUpdate'
pettanr.finder = ( function(){
var FINDER_ARRAY = [],
ELM_ORIGIN_FINDER_LOCATION_ITEM = pettanr.util.pullHtmlAsTemplete( 'templete-finder-location-item'),
- ELM_ORIGIN_FINDER_ICON = pettanr.util.pullHtmlAsTemplete( 'templete-finder-icon'),
+ ELM_ORIGIN_FINDER_ICON = ( function(){
+ var forIE = pettanr.util.pullHtmlAsTemplete( 'templete-finder-icon-ie'),
+ modern = pettanr.util.pullHtmlAsTemplete( 'templete-finder-icon');
+ return pettanr.ua.isIE === true && pettanr.ua.ieVersion < 8 ? forIE : modern;
+ })(),
ELM_ORIGIN_CONTAINER = pettanr.util.pullHtmlAsTemplete( 'templete-finder-container'),
ICON_HEIGHT = pettanr.util.getElementSize( ELM_ORIGIN_FINDER_ICON).height,
ICON_CLASSNAME = 'finder-icon-thumbnail',
ELM_THUMBNAIL = pettanr.util.getElementsByClassName( ELM_WRAPPER, ICON_CLASSNAME )[0],
ELM_FILENAME = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-filename' )[0],
ELM_DESCRIPTION = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-summary' )[0],
- file, w, index, style, instansce, callback;
+ ELM_EDITOR_BUTTON = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-console-editor-apps' )[0],
+ ELM_VIEWER_BUTTON = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-console-viewer-apps' )[0],
+ ELM_ACTION_BUTTON = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-console-action' )[0],
+ file, w, index, style, instansce,
+ onDownCallback, onEditorCallback, onViewerCallback, onActionCallback,
+ viewerList, editorList;
- ELM_WRAPPER.onclick = onClick;
- function onClick(){
- callback( index);
+ ELM_WRAPPER.onclick = onDownClick;
+ function onDownClick(){
+ onDownCallback( index);
+ return false;
+ }
+ ELM_EDITOR_BUTTON.onclick = onEditorClick;
+ function onEditorClick(){
+ onEditorCallback( file, editorList[ 0 ] );
+ return false;
+ }
+ ELM_VIEWER_BUTTON.onclick = onViwerClick;
+ function onViwerClick(){
+ onViewerCallback( file, viewerList[ 0 ] );
+ return false;
+ }
+ ELM_ACTION_BUTTON.onclick = onActionClick;
+ function onActionClick(){
+ onActionCallback( file );
+ return false;
}
-
function draw(){
var _thumb = file.getThumbnail();
- if( _thumb.image){
+ if( _thumb.image ){
ELM_THUMBNAIL.className = ICON_CLASSNAME + ' has-thumbnail';
ELM_THUMBNAIL.style.backgroundImage = [ 'url(', _thumb.image, ')'].join( '');
} else {
- ELM_THUMBNAIL.className = ICON_CLASSNAME + ' ' +_thumb.className;
+ ELM_THUMBNAIL.className = ICON_CLASSNAME + ' ' + _thumb.className;
ELM_THUMBNAIL.style.backgroundImage = '';
}
- ELM_FILENAME.innerHTML = file.getName();
- ELM_DESCRIPTION.innerHTML = file.getSummary();
+ ELM_FILENAME.firstChild.data = file.getName();
+ ELM_DESCRIPTION.firstChild.data = file.getSummary();
+
+ if( Type.isArray( viewerList ) === true && viewerList.length > 0 ){
+ ELM_VIEWER_BUTTON.style.display = '';
+ } else {
+ ELM_VIEWER_BUTTON.style.display = 'none';
+ };
+ if( Type.isArray( editorList ) === true && editorList.length > 0 ){
+ ELM_EDITOR_BUTTON.style.display = '';
+ } else {
+ ELM_EDITOR_BUTTON.style.display = 'none';
+ };
}
function resize(){
- ELM_WRAPPER.style.top = (index * ICON_HEIGHT) +'px';
+ // ELM_WRAPPER.style.top = (index * ICON_HEIGHT) +'px';
}
function onCollect(){
- elmContainer.removeChild( ELM_WRAPPER);
+ elmContainer.removeChild( ELM_WRAPPER );
elmContainer = null;
- FINDER_ICON_POOL.push( instansce);
+ FINDER_ICON_POOL.push( instansce );
}
return {
- init: function( _file, _elmContainer, _w, _index, _style, _callback){
+ init: function( _file, _elmContainer, _w, _index, _style, _onDownCallback, _onEditorCallback, _onViewerCallback, _onActionCallback ){
instansce = this;
if( elmContainer !== _elmContainer){
_elmContainer.appendChild( ELM_WRAPPER);
elmContainer = _elmContainer;
}
if( file !== _file){
+ file && file.destroy();
file = _file;
+ viewerList = file.viewerApplicationList();
+ editorList = file.editorApplicationList();
draw();
}
if( index !== _index){
index = _index;
resize();
}
- callback = _callback;
+ onDownCallback = _onDownCallback;
+ onEditorCallback = _onEditorCallback;
+ onViewerCallback = _onViewerCallback;
+ onActionCallback = _onActionCallback;
},
elm: ELM_WRAPPER,
index: function( _index){
return style;
},
- onResize: function( w){
+ onResize: function( w ){
},
destroy: function(){
- elmContainer.removeChild( ELM_WRAPPER);
- file = elmContainer = null;
+ elmContainer.removeChild( ELM_WRAPPER );
+ file && file.destroy();
+ file = elmContainer = onDownCallback = onEditorCallback = onViewerCallback = onActionCallback = viewerList = editorList = null;
FINDER_ICON_POOL.push( instansce);
}
}
}
return {
- init: function( _file, _elmContainer, _index, _callback){
+ init: function( _file, _elmContainer, _index, _callback ){
instansce = this;
- if( elmContainer !== _elmContainer){
+ if( elmContainer !== _elmContainer ){
_elmContainer.appendChild( ELM_WRAPPER);
elmContainer = _elmContainer;
}
destroy: function(){
elmContainer.removeChild( ELM_WRAPPER);
file = elmContainer = null;
- BREAD_OBJECT_POOL.push( this);
+ BREAD_OBJECT_POOL.push( this );
}
}
}
var FinderClass = function( ELM_CONTAINER, tree, header, footer ){
var ICON_ARRAY = [],
BREAD_ARRAY = [],
- elmContainer = ELM_ORIGIN_CONTAINER.cloneNode( true),
- elmLocation = elmContainer.getElementsByTagName( 'ul')[0],
- nodesDiv = elmContainer.getElementsByTagName( 'div'),
+ elmContainer = ELM_ORIGIN_CONTAINER.cloneNode( true ),
+ elmLocation = elmContainer.getElementsByTagName( 'ul' )[0],
+ nodesDiv = elmContainer.getElementsByTagName( 'div' ),
elmSidebarButton = nodesDiv[1],
elmStyleButton = nodesDiv[2],
elmActionButton = nodesDiv[3],
iconW = size.width,
iconH = size.height,
style = 0,
- w, h, bodyH;
+ w, h, bodyH,
+ instance = this;
- tree.addTreeEventListener( pettanr.file.TREE_EVENT.UPDATE, draw);
+ tree.addTreeEventListener( pettanr.file.TREE_EVENT.UPDATE, draw );
+ ELM_CONTAINER.appendChild( elmContainer );
function draw( _w, _h ){
w = Type.isFinite( _w ) === true ? _w : w;
h = Type.isFinite( _h ) === true ? _h : h;
- bodyH = _h - headH;
+ bodyH = h - headH;
var l = tree.hierarchy() +1,
m = BREAD_ARRAY.length,
_file, _bread;
if( i < m){
BREAD_ARRAY[ i].init( _file, elmLocation, i, onHeadClick);
} else {
- BREAD_ARRAY.push( getBreadcrumb( _file, elmLocation, i, onHeadClick));
+ BREAD_ARRAY.push( getBreadcrumb( _file, elmLocation, i, onHeadClick ));
}
}
while( l < BREAD_ARRAY.length){
for( i=0; i<l; ++i){
if( i < m){
- ICON_ARRAY[ i].init( _file.getChildFileByIndex( i), elmBody, w, i, style, onBodyClick);
+ ICON_ARRAY[ i ].init( _file.getChildFileByIndex( i), elmBody, w, i, style, onDown, onEditor, onViwer, onAction );
} else {
- ICON_ARRAY.push( getFinderIcon( _file.getChildFileByIndex( i), elmBody, _w, i, style, onBodyClick));
+ ICON_ARRAY.push( getFinderIcon( _file.getChildFileByIndex( i), elmBody, _w, i, style, onDown, onEditor, onViwer, onAction ));
}
}
if( _file.getState() === pettanr.file.FILE_STATE.LOADING ){
} else {
elmBody.className = 'finder-body';
}
+
elmBody.style.height = bodyH + 'px';
while( l < ICON_ARRAY.length){
}
}
}
- function onBodyClick( i){
- var l = ICON_ARRAY.length;
- if( i < l){
- var _file = tree.getCurrentFile().getChildFileByIndex( i);
+ function onDown( i ){
+ if( i < ICON_ARRAY.length ){
+ var _file = tree.getCurrentFile().getChildFileByIndex( i );
if( _file !== null && ( _file.getChildFileLength() !== -1 || _file.getType() === pettanr.file.FILE_TYPE.FOLDER)){
- tree.down( i);
+ tree.down( i );
draw( w, h );
}
}
}
-
+ function onEditor( _file, _app ){
+ _app.boot( _file );
+ }
+ function onViwer( _file, _app ){
+ _app.bootInOverlay( _file );
+ }
+ function onAction( _file ){
+
+ }
+ this.rootElement = elmContainer;
+ this.parentElement = ELM_CONTAINER;
+ this.displayName = 'finder';
+ this.ID = 'finder';
+ this.MIN_WIDTH = 240;
+ this.MIN_HEIGHT = 240;
this.init = function(){
- ELM_CONTAINER.appendChild( elmContainer);
//$( elmLocation).click( onHeadClick);
//$( elmContainer).click( onBodyClick);
- var position = pettanr.util.getAbsolutePosition( elmLocation);
+ var position = pettanr.util.getAbsolutePosition( elmLocation );
headX = position.x;
headY = position.y;
- bodyY = pettanr.util.getAbsolutePosition( elmBody).y;
- delete this.init;
- }
- this.onOpen = function( _w, _h, _option ){
- this.init !== undefined && this.init();
- draw( _w, _h );
+ bodyY = pettanr.util.getAbsolutePosition( elmBody ).y;
+ delete instance.init;
}
- this.onClose = function(){
- return true;
- }
- this.onPaneResize = function( _w, _h){
+ this.onPaneResize = function( _w, _h ){
+ instance.init && instance.init();
+ draw( _w, _h );
+
w = _w;
h = _h;
elmBody.style.height = ( _h - headH ) + 'px';
ICON_ARRAY[ i].onResize( _w );
}
}
- this.MIN_WIDTH = 240;
- this.MIN_HEIGHT = 240;
}
+ FinderClass.prototype = pettanr.view._getAbstractApplication();
- pettanr.view.registerAsBasicPane( FinderClass );
-
- function getFinderIcon( _file, _elmContainer, w, index, style, callback){
+ function getFinderIcon( _file, _elmContainer, w, index, style, onDown, onEditor, onViwer, onAction){
var _icon;
if( FINDER_ICON_POOL.length > 0){
_icon = FINDER_ICON_POOL.shift();
} else {
_icon = new FinderIconClass();
}
- _icon.init( _file, _elmContainer, w, index, style, callback);
+ _icon.init( _file, _elmContainer, w, index, style, onDown, onEditor, onViwer, onAction );
return _icon;
}
init: function(){
},
- createFinder: function( _elmTarget, _tree, _header, _footer ){
+ createFinder: function( _applicationReference, _elmTarget, _tree, _header, _footer ){
+ if( pettanr.view.isApplicationReference( _applicationReference ) === false ) return;
+
var _finder = new FinderClass( _elmTarget, _tree, _header, _footer );
- FINDER_ARRAY.push( _finder);
+ FINDER_ARRAY.push( _finder );
return _finder;
},
registerFinderHead: function(){
var _data = FileAPI.getFileData( _file),
_json = _data !== null ? _data.json : null;
if( _json === true && _data.type === pettanr.driver.FILE_TYPE.COMIC ){
- _json = [ pettanr.CONST.PETTANR_ROOT_PATH, 'comics\/', _data.id, '.json\/play\/' ].join( '' );
+ if( pettanr.LOCAL === true ){
+ _json = [ 'json\/comics_', _data.id, '.json' ].join( '' );
+ } else {
+ _json = [ pettanr.CONST.PETTANR_ROOT_PATH, 'comics\/', _data.id, '.json\/play\/' ].join( '' );
+ }
}
if( typeof _json === 'string'){
FileAPI.getJson( _file, _json, onLoadJson, onErrorJson);
return _data.title;
} else
if( _type === pettanr.driver.FILE_TYPE.ARTIST ){
- return [ _data.id , ':', _data.name, '画伯' ].join( '');
+ return [ _data.name, '画伯' ].join( '');
} else
if( _type === pettanr.driver.FILE_TYPE.AUTHOR ){
- return [ _data.id , ':', _data.name, '先生' ].join( '');
+ return [ _data.name, '先生' ].join( '');
}
return _data.name;
},
return 'cabinet file';
}
if( _type === pettanr.driver.FILE_TYPE.COMIC){
- return 'comic file';
+ return 'comic file, id:' + _data.id;
}
if( _type === pettanr.driver.FILE_TYPE.PANEL){
return [ _data.width, 'x', _data.height ].join( '' );
}
if( _type === pettanr.driver.FILE_TYPE.AUTHOR){
- return 'author file';
+ return 'author file, id:' + _data.id;
}
if( _type === pettanr.driver.FILE_TYPE.ARTIST){
- return [ 'Email:', _data.email || 'empty' , ', HP:', _data.homepage_url || 'empty' ].join( '' );
+ return [ 'id:', _data.id, ' Email:', _data.email || 'empty' , ', HP:', _data.homepage_url || 'empty' ].join( '' );
}
if( _type === pettanr.file.FILE_TYPE.FOLDER){
return 'pettanR folder';
}
return 'pettanR unknown file';
},
- viwerApplicationList: function( _file ){
+ write: function( _file, _newData, _onUpdateFunction ){
var _data = FileAPI.getFileData( _file ),
_type = _data !== null ? _data.type : null;
+ if( _type === pettanr.driver.FILE_TYPE.COMIC ){
+ }
+ 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 ){
+ }
+ },
+ viewerApplicationList: function( _file ){
+ var _data = FileAPI.getFileData( _file ),
+ _type = _data !== null ? _data.type : null;
+
+ if( _data === FILE_DATA_MY_PICTURES_ROOT ){
+ return [ pettanr.premiumSatge ];
+ }
+ if( _type === pettanr.driver.FILE_TYPE.ARTIST ){
+ return [ pettanr.premiumSatge ];
+ }
return [];
},
editorApplicationList: function( _file ){
var _data = FileAPI.getFileData( _file ),
_type = _data !== null ? _data.type : null;
+ if( _type === pettanr.driver.FILE_TYPE.PANEL ){
+ return [ pettanr.editor ];
+ }
+ if( _type === pettanr.driver.FILE_TYPE.COMIC ){
+ return [ pettanr.editor, pettanr.comicConsole ];
+ }
return [];
}
},
- FileAPI = pettanr.file.registerDriver( Driver),
+ FileAPI = pettanr.file.registerDriver( Driver ),
FILE_DATA_SERVICE_ROOT = {
name: 'PettanR root',
type: pettanr.file.FILE_TYPE.FOLDER,
name: 'My Comics',
type: pettanr.file.FILE_TYPE.FOLDER,
children: [],
- driver: Driver
+ driver: Driver,
+ id: MyAuthorID
},
FILE_DATA_LATEST_COMICS = {
name: 'Latest Comics',
type: pettanr.file.FILE_TYPE.FOLDER,
children: [],
driver: Driver,
- json: pettanr.CONST.URL_ORIGINAL_PICTURES_JSON
+ json: pettanr.CONST.URL_ORIGINAL_PICTURES_JSON,
+ id: MyArtistID
},
FILE_DATA_AUTHOR_ROOT = {
name: 'Authors',
_data.author = getResource( AUTHOR_ARRAY, _data.author_id );
// picture data をファイルに取り出し
- if( Type.isArray( _data.panel_elements ) === true ){
- var _elements,
- _elm, _rpic;
+ var _elements = _data.panel_elements,
+ _elm;
+ if( Type.isArray( _elements ) === true ){
for( i=0, l=_elements.length; i<l; ++i){
_elm = _elements[ i];
if( _elm.resource_picture ){
- _elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT); // 上記参照切れに備えてここで上書き
+ _elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT ); // 上記参照切れに備えてここで上書き
} else {
_elm.resource_picture = getResource( RESOURCE_PICTURE_ARRAY, _elm.resource_picture_id );
}
if( _artist){
_data.artist = _artist = buildFileData( _artist, FILE_DATA_ARTIST_ROOT );
addChildData( _artist, _data );
- _artist.id === MyArtistID && addChildData( FILE_DATA_MY_PICTURES_ROOT, _data );
+ if( _artist.id === MyArtistID ){
+ addChildData( FILE_DATA_MY_PICTURES_ROOT, _data );
+ //FILE_DATA_MY_PICTURES_ROOT.type = pettanr.driver.FILE_TYPE.ARTIST;
+ //FILE_DATA_MY_PICTURES_ROOT.id = MyArtistID;
+ }
}
}
return _data;
return {
createComicTree: function(){
- return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT); //FILE_DATA_COMICS_ROOT);
+ return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT ); //FILE_DATA_COMICS_ROOT);
},
createPictureTree: function(){
- return pettanr.file.createTree( FILE_DATA_PICTURE_ROOT);
+ return pettanr.file.createTree( FILE_DATA_PICTURE_ROOT );
+ },
+ createArtistTree: function(){
+ return pettanr.file.createTree( FILE_DATA_ARTIST_ROOT );
},
createServiceTree: function(){
- return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT);
+ return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT );
},
- isPettanrFileInstance: function( _file){
- if( pettanr.file.isPettanFileInstance( _file) === true){
+ isPettanrFileInstance: function( _file ){
+ if( pettanr.file.isFileInstance( _file ) === true){
var _data = FileAPI.getFileData( _file);
return _data !== null && _data.driver === Driver;
}
return false;
},
+ _getAPI: function(){
+ return FileAPI;
+ },
+ _getPictureRootData: function(){
+ return FILE_DATA_PICTURE_ROOT;
+ },
+ _getMyPicturesData: function(){
+ return FILE_DATA_MY_PICTURES_ROOT;
+ },
FILE_TYPE: {
COMIC: FileAPI.createFileTypeID(),
PANEL: FileAPI.createFileTypeID(),
}
})();
-pettanr.entrance = {
- onOpen: function( _w, _h, _option ){
- var pageHeaderH = pettanr.util.getElementSize( document.getElementById('header') ).height;
- document.getElementById('inner-wrapper').style.height = ( _h - pageHeaderH ) + 'px';
- },
- onClose: function(){
- document.getElementById('inner-wrapper').style.height = '0px';
- },
- onWindowResize: function( _w, _h){
- pettanr.entrance.onOpen( _w, _h );
- }
+pettanr.entrance = pettanr.view.registerApplication( function(){
+ var wrap = document.getElementById('inner-wrapper'),
+ pageHeaderH = pettanr.util.getElementSize( document.getElementById( 'header' ) ).height,
+ instance = this;
+ this.displayName = 'Home';
+ this.ID = 'Home';
+ this.rootElement = document.getElementById('entrance');
+ this.onOpen = function( _w, _h, _option ){
+ wrap.style.display = '';
+ wrap.style.height = ( _h - pageHeaderH ) + 'px';
}
-pettanr.backyard = {
- onOpen: function( _w, _h, _option ){
- },
- onClose: function(){
- },
- onWindowResize: function( _w, _h){
- }
+ this.onClose = function(){
+ wrap.style.display = 'none';
}
-pettanr.debug = {
- onOpen: function( _w, _h, _option ){
- var pageHeaderH = pettanr.util.getElementSize( document.getElementById('header') ).height;
- document.getElementById('inner-wrapper').style.height = ( _h - pageHeaderH ) + 'px';
- },
- onClose: function(){
- document.getElementById('inner-wrapper').style.height = '0px';
- },
- onWindowResize: function( _w, _h){
- pettanr.debug.onOpen( _w, _h );
- }
+ this.onPaneResize = function( _w, _h){
+ instance.onOpen( _w, _h );
}
+});
+pettanr.entrance.addToLancher();
-pettanr.gallery = ( function(){
+pettanr.cabinet = pettanr.view.registerApplication( function(){
var finder,
- elmContainer = document.getElementById( 'gallery'),
+ elmContainer = document.getElementById( 'cabinet'),
option,
- pageHeaderH = pettanr.util.getElementSize( document.getElementById('header') ).height;
- return {
- init: function( _option){
- option = _option;
- delete pettanr.gallery.init;
- },
- firstOpen: function(){
- finder = pettanr.finder.createFinder( elmContainer, pettanr.driver.createPictureTree());
- delete pettanr.gallery.firstOpen;
- },
- onOpen: function( _w, _h, _option ){
- pettanr.gallery.firstOpen !== undefined && pettanr.gallery.firstOpen();
- finder.onOpen( _w, _h - pageHeaderH, _option );
-
- },
- onClose: function(){
- finder.onClose();
- },
- onWindowResize: function( _w, _h){
- finder.resize( _w, _h - pageHeaderH );
- }
+ pageHeaderH = pettanr.util.getElementSize( document.getElementById( 'header' ) ).height;
+
+ this.displayName = 'Comic list';
+ this.ID = 'Comiclist';
+ this.rootElement = elmContainer;
+ this.onOpen = function( _w, _h ){
+ finder = finder || pettanr.finder.createFinder( pettanr.cabinet, elmContainer, pettanr.driver.createComicTree() );
+ finder.resize( _w, _h - pageHeaderH );
}
-})();
+ this.onClose = function(){
+ // finder.close();
+ }
+ this.onPaneResize = function( _w, _h){
+ finder.resize( _w, _h - pageHeaderH );
+ }
+});
+pettanr.cabinet.addToLancher();
-pettanr.cabinet = ( function(){
+pettanr.gallery = pettanr.view.registerApplication( function(){
var finder,
- elmContainer = document.getElementById( 'cabinet'),
+ elmContainer = document.getElementById( 'gallery' ),
option,
- pageHeaderH = pettanr.util.getElementSize( document.getElementById('header') ).height;
+ pageHeaderH = pettanr.util.getElementSize( document.getElementById( 'header' ) ).height;
- return {
- init: function( _option){
- option = _option;
- delete pettanr.cabinet.init;
- },
- firstOpen: function(){
- finder = pettanr.finder.createFinder( elmContainer, pettanr.driver.createComicTree());
- delete pettanr.cabinet.firstOpen;
- },
- onOpen: function( _w, _h, _option ){
- pettanr.cabinet.firstOpen !== undefined && pettanr.cabinet.firstOpen();
- finder.onOpen( _w, _h - pageHeaderH, _option );
+ this.displayName = 'Pictures';
+ this.ID = 'pictures';
+ this.rootElement = elmContainer;
+ this.onOpen = function( _w, _h ){
+ finder = finder || pettanr.finder.createFinder( pettanr.gallery, elmContainer, pettanr.driver.createPictureTree() );
+ finder.resize( _w, _h - pageHeaderH );
+ }
+ this.onClose = function(){
+ // finder.close();
+ }
+ this.onPaneResize = function( _w, _h){
+ finder.resize( _w, _h - pageHeaderH );
+ }
+});
+pettanr.gallery.addToLancher();
+
+pettanr.backyard = pettanr.view.registerApplication( function(){
+ this.displayName = 'Settings';
+ this.ID = 'Settinds';
+ this.rootElement = document.getElementById( 'backyard' );
+ this.onOpen = function( _w, _h, _option ){
+ }
+ this.onClose = function(){
+ }
+ this.onPaneResize = function( _w, _h){
+ }
+});
+pettanr.backyard.addToLancher();
+
+if( pettanr.DEBUG === true){
+ pettanr.debug = pettanr.view.registerApplication( function(){
+ var elmDl = document.getElementById( 'useragent'),
+ elmDt, elmDd,
+ data = {
+ pettanR: pettanr.version,
+ ua: navigator.userAgent,
+ platform: navigator.platform,
+ appVersion: navigator.appVersion,
+ appCodeName:navigator.appCodeName,
+ appName: navigator.appName,
+ language: navigator.browserLanguage || navigator.language,
+ ActiveX: pettanr.ua.ACTIVEX
+ },
+ ua = pettanr.ua;
+ if( ua.IE){
+ //data.ua = 'Internet Explorer';
+ data.version = ua.IE;
+ if( ua.ieVersion >= 8) data.RenderingVersion = ua.ieRenderingVersion;
+ data.browserType = ua.STANDALONE === true ? 'Standalone' : 'bundle';
+ if( ua.ieVersion < 9) {
+ data.vml = ua.VML;
+ } else {
+ data.svg = ua.SVG;
+ }
+ }
+ data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';
+
+ for( var key in data){
+ elmDt = document.createElement( 'dt');
+ elmDt.innerHTML = key;
+ elmDd = document.createElement( 'dd');
+ elmDd.innerHTML = '' + data[ key];
+ if( !data[ key]) elmDd.style.color = 'red';
+ elmDl.appendChild( elmDt);
+ elmDl.appendChild( elmDd);
+ }
+
+ var wrap = document.getElementById('inner-wrapper'),
+ pageHeaderH = pettanr.util.getElementSize( document.getElementById( 'header' )).height,
+ instance = this;
+
+ this.displayName = 'Debug';
+ this.ID = 'debug';
+ this.rootElement = document.getElementById( 'debug' );
+ this.onOpen = function( _w, _h, _option ){
+ wrap.style.display = '';
+ wrap.style.height = ( _h - pageHeaderH ) + 'px';
+ }
+ this.onClose = function(){
+ wrap.style.display = 'none';
+ }
+ this.onPaneResize = function( _w, _h ){
+ instance.onOpen( _w, _h );
+ }
+ });
+ pettanr.debug.addToLancher();
+
+} else {
+ var _debug = document.getElementById( 'debug');
+ if( _debug){
+ pettanr.util.removeAllChildren( _debug);
+ _debug.parentNode.removeChild( _debug);
+ _debug = null;
+ }
+}
+
+/* ----------------------------------------
+ * Image Group Exproler
+ * - overlay
+ */
+pettanr.premiumSatge = pettanr.view.registerApplication( function(){
+ var ICON_ARRAY = [],
+ WHEEL_DELTA = 64,
+ ARTIST_TREE = pettanr.driver.createArtistTree(),
+ ARTIST_ROOT_FILE = ARTIST_TREE.getRootFile(),
+ instance = this,
+ winW, winH,
+ wrapX,
+ elmWrap = document.getElementById( 'image-group-wrapper' ),
+ elmContainer = document.getElementById( 'image-group-icon-container' ),
+ containerW,
+ containerH = pettanr.util.getElementSize( elmContainer ).height,
+ elmIconOrigin = ( function(){
+ var ret = document.createElement( 'div' ),
+ data = document.createElement( 'div' );
+ ret.appendChild( data );
+ ret.className = 'image-group-item';
+ data.className = 'image-group-item-title';
+ return ret;
+ })(),
+ jqContainer,
+ size = pettanr.util.getElementSize( elmIconOrigin ),
+ itemW = size.width,
+ itemH = size.height,
+ elmName = document.getElementById( 'image-group-name' ),
+ elmButton = document.getElementById( 'image-group-button' ),
+ buttonW = pettanr.util.getElementSize( elmButton ).width,
+ //onUpdateFunction,
+ onUpdateFunction = null,
+ onUpdateData = null,
+ artistID = -1,
+ onEnterInterval = null;
+
+ elmButton.onclick = clickOK;
+
+ var BASE_PATH = pettanr.LOCAL === true ? 'resource_pictures\/' : pettanr.CONST.PETTANR_ROOT_PATH + 'resource_pictures\/',
+ THUMB_PATH = BASE_PATH, // + 'thumbnail/',
+ LIMIT_FILESIZE = 1024 * 10; // 10KB
+
+ var ImageGroupIconClass = function( INDEX, data ){
+ var elmIconWrap = elmIconOrigin.cloneNode( true ),
+ elmIconTitle = pettanr.util.getElementsByClassName( elmIconWrap, 'image-group-item-title' )[ 0 ],
+ SRC = [ BASE_PATH, data.id, '.', data.ext ].join( ''),
+ LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext ].join( '') : null,
+ reversibleImage = null,
+ timer = null,
+ onEnterFlag = false,
+ instance = this;
+ elmContainer.appendChild( elmIconWrap );
+ elmIconWrap.style.left = ( INDEX * itemW ) + 'px';
+ elmIconTitle.appendChild( document.createTextNode( data.filesize + 'bytes' ) );
+
+ function onImageLoad( url, _imgW, _imgH ){
+ data.width = _imgW = _imgW || data.width || 64;
+ data.height = _imgH = _imgH || data.height || 64;
+ elmIconTitle.firstChild.data = _imgW + 'x' + _imgH;
+ var zoom = 128 /( _imgW > _imgH ? _imgW : _imgH ),
+ MATH_FLOOR = Math.floor,
+ h = MATH_FLOOR( _imgH * zoom ),
+ w = MATH_FLOOR( _imgW * zoom );
+ reversibleImage.elm.style.cssText = [
+ 'width:', w, 'px;',
+ 'height:', h, 'px;',
+ 'margin:', MATH_FLOOR( itemH / 2 - h / 2 ), 'px ', MATH_FLOOR( itemW / 2 - w / 2 ), 'px 0'
+ ].join('');
+ reversibleImage.resize( w, h );
+ elmIconWrap.onclick = onClick;
+ }
+
+ function onClick(){
+ onUpdateData = data;
+ pettanr.premiumSatge.shutdown();
+ }
+
+ function asyncDraw(){
+ reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad );
+ elmIconWrap.appendChild( reversibleImage.elm );
+ onEnterFlag = true;
+ timer = null;
+ }
+
+ this.onEnter = function( delay ){
+ timer = window.setTimeout( asyncDraw, delay );
+ delete instance.onEnter;
+ }
+ this.destroy = function(){
+ delete instance.destroy;
+ timer && window.clearTimeout( timer );
+ reversibleImage && reversibleImage.destroy();
+ pettanr.util.removeAllChildren( elmIconWrap );
+ elmContainer.removeChild( elmIconWrap );
+ elmIconWrap.onclick = '';
+ reversibleImage = elmIconWrap = elmIconTitle = data = timer = null;
+ }
+ }
+
+ function onEnterShowImage(){
+ var l = ICON_ARRAY.length,
+ _start = -wrapX /itemW -1,
+ _end = _start + winW /itemW +1,
+ _icon;
+ for( var i=0, c = 0; i<l; ++i){
+ _icon = ICON_ARRAY[ i ];
+ if( _start < i && i < _end && _icon.onEnter ){
+ _icon.onEnter( c * 100 );
+ c++;
+ }
+ }
+ onEnterInterval !== null && window.clearTimeout( onEnterInterval );
+ onEnterInterval = null;
+ }
+ function clickOK(){
+ pettanr.premiumSatge.shutdown();
+ }
+ function onMouseWheel( e, delta ){
+ if( winW < containerW){
+ wrapX += delta * WHEEL_DELTA;
+ wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
+ jqContainer.css( { left: wrapX});
- },
- onClose: function(){
- finder.onClose();
- },
- onWindowResize: function( _w, _h){
- finder.resize( _w, _h - pageHeaderH);
+ onEnterInterval !== null && window.clearTimeout( onEnterInterval );
+ onEnterInterval = window.setTimeout( onEnterShowImage, 500 );
}
+ //e.stopPropagation();
+ return false;
}
-})();
+
+ function drawIcons(){
+ while( ICON_ARRAY.length > 0 ){
+ ICON_ARRAY.shift().destroy();
+ }
+
+ var _index = ARTIST_ROOT_FILE.search( {
+ id: artistID,
+ type: pettanr.driver.FILE_TYPE.ARTIST
+ })[ 0 ],
+ _artistFile = ARTIST_ROOT_FILE.getChildFileByIndex( _index ),
+ _file;
+ if( _artistFile !== null ){
+ for(var i=0, l=_artistFile.getChildFileLength(); i<l; ++i ){
+ _file = _artistFile.getChildFileByIndex( i );
+ ICON_ARRAY.push( new ImageGroupIconClass( i, pettanr.driver._getAPI().getFileData( _file ) ));
+ _file.destroy();
+ }
+ elmName.firstChild.data = _artistFile.getName();
+ _artistFile.destroy();
+ }
+ }
+
+ function onFadeout(){
+ while( ICON_ARRAY.length > 0 ){
+ ICON_ARRAY.shift().destroy();
+ }
+ onUpdateFunction !== null && onUpdateData !== null && onUpdateFunction( onUpdateData );
+ onUpdateFunction = onUpdateData = null;
+ }
+
+ /* grobal method */
+ // this.rootElement = elmWrap;
+ this.displayName = 'premiumStage';
+ this.ID = 'premiumStage';
+ this.rootElement = elmWrap;
+ this.MIN_WIDTH = 320;
+ this.MIN_HEIGHT = 320;
+ this.init = function(){
+ jqContainer = $( elmContainer ).mousewheel( onMouseWheel );
+
+ // よくない！ 一時的な処理,,,
+ //var tree = pettanr.driver.createPictureTree();
+ //tree.addTreeEventListener( pettanr.file.TREE_EVENT.UPDATE, drawIcons );
+
+ delete instance.init;
+ }
+ this.onOpen = function( _windowW, _windowH, _ARTISTIDorFILE, _onUpdateFunction ){
+ instance.init && instance.init();
+
+ if( pettanr.driver.isPettanrFileInstance( _ARTISTIDorFILE ) === true ){
+ var _data = pettanr.driver._getAPI().getFileData( _ARTISTIDorFILE );
+ if( _ARTISTIDorFILE.getType() === pettanr.driver.FILE_TYPE.ARTIST || pettanr.driver._getMyPicturesData() === _data ){
+ artistID = _data.id || -1;
+ }
+ } else
+ if( Type.isNumber( _ARTISTIDorFILE ) === true ){
+ artistID = _ARTISTIDorFILE;
+ }
+
+ onUpdateFunction = _onUpdateFunction || null;
+ onUpdateData = null;
+
+ drawIcons();
+
+ wrapX = 0;
+ containerW = ICON_ARRAY.length * itemW;
+
+ winW = _windowW;
+ winH = _windowH;
+ var w = winW > containerW ? winW : containerW,
+ h = _windowH > containerH ? containerH : _windowH,
+ MATH_FLOOR = Math.floor;
+
+ jqContainer.css( {
+ width: w,
+ height: 0,
+ left: 0,
+ top: MATH_FLOOR( _windowH /2)
+ }).stop().animate( {
+ height: h,
+ top: MATH_FLOOR( _windowH /2 -h /2)
+ }, onEnterShowImage );
+
+ elmButton.style.cssText = [
+ 'left:', MATH_FLOOR( winW /2 - buttonW /2), 'px;',
+ 'top:', MATH_FLOOR( _windowH /2 + containerH /2 +10), 'px'
+ ].join('');
+ }
+ this.onPaneResize = function( _windowW, _windowH ){
+ var w = _windowW > containerW ? _windowW : containerW,
+ h = _windowH > containerH ? containerH : _windowH,
+ MATH_FLOOR = Math.floor,
+ offsetW = MATH_FLOOR( _windowW /2 -winW /2);
+
+ winW = _windowW;
+ winH = _windowH;
+ if( offsetW <= 0){ // smaller
+ jqContainer.css( {
+ left: offsetW,
+ width: w
+ }).animate( {
+ left: 0,
+ top: MATH_FLOOR( _windowH /2 -h /2)
+ });
+ } else {
+ jqContainer.css( { // bigger
+ left: 0,
+ width: w,
+ borderLeftWidth: offsetW
+ }).animate( {
+ top: MATH_FLOOR( _windowH /2 -h /2),
+ borderLeftWidth: 0
+ });
+ }
+ elmButton.style.cssText = [
+ 'left:', MATH_FLOOR( _windowW /2 -buttonW /2), 'px;',
+ 'top:', MATH_FLOOR( _windowH /2 +containerH /2 +10), 'px'
+ ].join('');
+ onEnterShowImage();
+ }
+ this.onClose = function(){
+ jqContainer.stop().animate( {
+ height: 0,
+ top: Math.floor( winH /2 )
+ }, onFadeout );
+ onEnterInterval !== null && window.clearTimeout( onEnterInterval );
+ onEnterInterval = null;
+ }
+});
+
+
+/* ----------------------------------------
+ * Text Editor
+ * - overlay
+ */
+pettanr.textEditor = pettanr.view.registerApplication( function(){
+ var jqWrap, jqTextarea, jqButton,
+ textElement, onUpdateFunction,
+ ID = 'textEditor',
+ panelX, panelY,
+ instance = this;
+ //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
+
+ function clickOK(){
+ textElement && textElement.text( jqTextarea.val() );
+ window.setTimeout( asyncCallback, 0 );
+ }
+
+ function asyncCallback(){
+ onUpdateFunction && onUpdateFunction( textElement );
+ onUpdateFunction = textElement = null;
+ pettanr.textEditor.shutdown();
+ }
+
+ function keyCancel( e ){
+ if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){
+ clickOK();
+ e.preventDefault();
+ e.keyCode = 0;
+ e.cancelBubble = true;
+ e.returnValue = false;
+ return false;
+ }
+ }
+ function textareaFitHeight(){
+ var rows = 0;
+ while( jqTextarea.height() < textElement.h ){
+ rows++;
+ jqTextarea.attr( 'rows', rows );
+ }
+ rows > 1 && jqTextarea.attr( 'rows', --rows );
+ }
+
+ /* grobal method */
+ // this.rootElement = elmWrap;
+ this.displayName = 'textEditor';
+ this.ID = 'textEditor';
+ this.rootElement = document.getElementById( 'speach-editor-wrapper' );
+ this.MIN_WIDTH = 320;
+ this.MIN_HEIGHT = 320;
+ this.init = function(){
+ jqWrap = $( '#speach-editor-wrapper' ).hide();
+ jqTextarea = $( '#speach-editor' ).keydown( keyCancel );
+ jqButton = $( '#speach-edit-complete-button').click( clickOK );
+ delete instance.init;
+ }
+ this.onOpen = function( _w, _h, _panelX, _panelY, _textElement, _onUpdateFunction ){
+ instance.init && instance.init();
+
+ panelX = _panelX;
+ panelY = _panelY;
+ textElement = _textElement;
+ onUpdateFunction = _onUpdateFunction || null;
+
+ jqWrap.show();
+ instance.onPaneResize( _w, _h );
+ jqTextarea.val( _textElement.text() ).focus();
+
+ /*
+ * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。
+ */
+ pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( textareaFitHeight, 0);
+ }
+ this.onPaneResize = function( _w, _h ){
+ jqWrap.css( {
+ left: textElement.x + panelX,
+ top: textElement.y + panelY,
+ width: textElement.w,
+ height: textElement.h
+ });
+ }
+ this.onClose = function(){
+ jqWrap.hide();
+ }
+});
// i18n
// login
pettanr.fn( pettanr.balloon);
pettanr.fn( pettanr.editor);
-pettanr.fn( pettanr.comicConsole);
-pettanr.fn( pettanr.uploadConsole);
-pettanr.fn( pettanr.panelConsole);
-pettanr.fn( pettanr.artistConsole);
pettanr.fn( pettanr.file);
pettanr.fn( pettanr.finder);
/*\r
* pettanR work.js\r
- * version 0.4.15\r
+ * version 0.4.28\r
* \r
* author:\r
* itozyun\r
* - MENU_BAR_CONTROL\r
* - HISTORY_CONTROL\r
* - SAVE_CONTROL\r
- * - TEXT_EDITOR_CONTROL\r
- * - IMAGE_GROUP_EXPROLER\r
* - WINDOW_CONTROL\r
* - WindowClass\r
* - INFOMATION_WINDOW\r
* \r
* \r
*/\r
-pettanr.editor = ( function(){\r
+pettanr.editor = pettanr.view.registerApplication( function(){\r
\r
- var COMIC_ELEMENT_TYPE_IMAGE = 0,\r
- COMIC_ELEMENT_TYPE_TEXT = 1,\r
+ var PANEL_ELEMENT_TYPE_IMAGE = 0,\r
+ PANEL_ELEMENT_TYPE_TEXT = 1,\r
MOUSE_LISTENER_ARRAY = [],\r
- COMIC_ELEMENT_ARRAY = [],\r
+ PANEL_ELEMENT_ARRAY = [],\r
ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
MIN_PANEL_HEIGHT = 20,\r
MIN_ELEMENT_SIZE = 19,\r
windowW, windowH,\r
currentListener = null,\r
currentCursor = '',\r
+ instance = this,\r
option,\r
+ comicID = -1,\r
+ panelID = -1,\r
+ panelTimming = -1,\r
log;\r
\r
/* ----------------------------------------\r
jqStage, jqBar;\r
ELM_BAR.style.top = ( -barH) +'px';\r
\r
- var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){\r
+ var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter ){\r
var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),\r
ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0],\r
elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0];\r
ELM_BAR.appendChild( ELM_WRAPPER);\r
\r
function onClick( e){\r
- var that = this,\r
- i = pettanr.util.getChildIndex( this.parentNode, this);\r
+ var i = pettanr.util.getChildIndex( this.parentNode, this);\r
i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);\r
e.stopPropagation();\r
return false;\r
var _argBack = _stack.argBack,\r
_argForword = _stack.argForword,\r
_value;\r
- if( typeof _argBack.length === 'number'){ // isArray\r
+ if( Type.isArray( _argBack ) === true ){ // isArray\r
while( _argBack.length > 0){\r
_value = _argBack.shift();\r
- _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
+ _destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy();\r
}\r
}\r
- if( typeof _argForword.length === 'number'){\r
+ if( Type.isArray( _argForword ) === true ){\r
while( _argForword.length > 0){\r
_value = _argForword.shift();\r
- _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
+ _destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy();\r
} \r
} \r
}\r
MENUBAR_BACK.visible( false);\r
MENUBAR_FORWARD.visible( false);\r
while( STACK_BACK.length > 0){\r
- destroyStack( STACK_BACK.shift(), true);\r
+ destroyStack( STACK_BACK.shift(), true );\r
}\r
while( STACK_FORWARD.length > 0){\r
- destroyStack( STACK_FORWARD.shift(), true);\r
+ destroyStack( STACK_FORWARD.shift(), true );\r
}\r
},\r
saveState: function( _function, _argBack, _argForword, _destroy) {\r
var _stack;\r
while( STACK_FORWARD.length > 0){\r
_stack = STACK_FORWARD.shift();\r
- destroyStack( _stack, _stack.destroy);\r
+ destroyStack( _stack, _stack.destroy );\r
}\r
MENUBAR_FORWARD.visible( false);\r
} \r
}\r
})();\r
\r
-\r
-/* ----------------------------------------\r
- * OUTPUT_CONSOLE\r
- * - overlay\r
- */\r
- var OUTPUT_CONSOLE = ( function(){\r
- var jqWrap, jqOutputArea,\r
- ID = 'outputConsole';\r
- //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
- \r
- function close(){\r
- jqWrap.hide();\r
- jqOutputArea.val('');\r
- }\r
- function clickOK(){\r
- pettanr.overlay.hide();\r
- close(); \r
- }\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();\r
- jqOutputArea = $( '#output-area');\r
- delete OUTPUT_CONSOLE.init;\r
- },\r
- jqWrap: null,\r
- show: function( _text){\r
- jqWrap.show();\r
-\r
- \r
- pettanr.overlay.show( this);\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( windowH -jqWrap.height()) /2)\r
- }\r
- ); \r
- \r
- jqOutputArea.val( _text).focus();\r
- },\r
- onWindowResize: function(){\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( windowH -jqWrap.height()) /2)\r
- }\r
- );\r
- },\r
- onClose: close,\r
- ID: 'textEditor'\r
- }\r
- })();\r
-\r
/* ----------------------------------------\r
* SAVE_CONTROL\r
* - controler\r
updated = false;\r
\r
function quit(){\r
- // 本来は os.application.close();\r
- pettanr.view.show( 'entrance');\r
+ pettanr.editor.shutdown();\r
}\r
\r
function outputAsHtml(){\r
- OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
+ pettanr.outputConsole.bootInOverlay(\r
+ pettanr.outputConsole.HTML,\r
+ comicID, panelID, panelTimming,\r
+ PANEL_CONTROL.w(), PANEL_CONTROL.h(),\r
+ 1, // border, BackgroundImage\r
+ PANEL_ELEMENT_ARRAY\r
+ );\r
}\r
function outputAsJsonString(){\r
- OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
+ pettanr.outputConsole.bootInOverlay(\r
+ pettanr.outputConsole.JSON,\r
+ comicID, panelID, panelTimming,\r
+ PANEL_CONTROL.w(), PANEL_CONTROL.h(),\r
+ 1, // border, BackgroundImage\r
+ PANEL_ELEMENT_ARRAY\r
+ );\r
}\r
return {\r
open: function(){},\r
close: function(){},\r
quit: quit,\r
panelUpdated: function( _updated){\r
- if( _updated !== undefined && updated !== _updated){\r
- SAVE.visible( !!_updated);\r
- SAVE_AND_QUIT.visible( !!_updated);\r
+ if( _updated !== undefined && updated !== _updated ){\r
+ SAVE.visible( !!_updated );\r
+ SAVE_AND_QUIT.visible( !!_updated );\r
updated = !!_updated;\r
}\r
return updated;\r
})();\r
\r
/* ----------------------------------------\r
- * Text Editor\r
- * - overlay\r
- */\r
- var TEXT_EDITOR_CONTROL = ( function(){\r
- var jqWrap, jqTextarea, jqButton,\r
- textElement, onUpdateFunction,\r
- ID = 'textEditor';\r
- //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
- \r
- function close(){\r
- jqWrap.hide();\r
- textElement = onUpdateFunction = null; \r
- }\r
- function clickOK(){\r
- pettanr.overlay.hide();\r
- textElement && textElement.text( jqTextarea.val());\r
- onUpdateFunction && onUpdateFunction( textElement);\r
- close(); \r
- }\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
- jqTextarea = $( '#speach-editor').keydown( function( e){\r
- if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
- clickOK();\r
- e.preventDefault();\r
- e.keyCode = 0;\r
- e.cancelBubble = true;\r
- e.returnValue = false;\r
- return false;\r
- }\r
- });\r
- jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
- delete TEXT_EDITOR_CONTROL.init;\r
- },\r
- jqWrap: null,\r
- show: function( _textElement, _onUpdateFunction){\r
- textElement = _textElement;\r
- onUpdateFunction = _onUpdateFunction || null;\r
- pettanr.overlay.show( this);\r
- var h = _textElement.h;\r
- jqWrap.show().css( {\r
- left: _textElement.x +PANEL_CONTROL.x(),\r
- top: _textElement.y +PANEL_CONTROL.y(),\r
- width: _textElement.w,\r
- height: h\r
- });\r
- jqTextarea.val( _textElement.text()).focus();\r
- \r
- /*\r
- * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。\r
- */\r
- pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){\r
- var rows = 0;\r
- while( jqTextarea.height() < h){\r
- rows++;\r
- jqTextarea.attr( 'rows', rows);\r
- }\r
- rows > 1 && jqTextarea.attr( 'rows', rows -1);\r
- }, 0);\r
- },\r
- onWindowResize: function(){\r
- textElement && this.show( textElement);\r
- },\r
- onClose: close,\r
- ID: ID\r
- }\r
- })();\r
-\r
-/* ----------------------------------------\r
- * Image Group Exproler\r
- * - overlay\r
- */\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
- //onUpdateFunction,\r
- _g_onUpdateFunction,\r
- winW,\r
- onEnterInterval = null;\r
- \r
- var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',\r
- THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
- LIMIT_FILESIZE = 1024 * 10; // 10KB\r
- var IMAGE_DATA = {\r
- pen001: [\r
- {\r
- "created_at": "2011-11-13T08:57:39Z", \r
- "ext": "png", \r
- "filesize": 9969, \r
- "height": 463, \r
- "id": 1, \r
- "updated_at": "2011-11-13T08:57:39Z", \r
- "width": 441\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:57:54Z", \r
- "ext": "gif", \r
- "filesize": 5418, \r
- "height": 500, \r
- "id": 2, \r
- "updated_at": "2011-11-13T08:57:54Z", \r
- "width": 500\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:06Z", \r
- "ext": "gif", \r
- "filesize": 8758, \r
- "height": 464, \r
- "id": 3, \r
- "updated_at": "2011-11-13T08:58:06Z", \r
- "width": 366\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:23Z", \r
- "ext": "gif", \r
- "filesize": 9383, \r
- "height": 480, \r
- "id": 4, \r
- "updated_at": "2011-11-13T08:58:23Z", \r
- "width": 392\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:33Z", \r
- "ext": "gif", \r
- "filesize": 11061, \r
- "height": 500, \r
- "id": 5, \r
- "updated_at": "2011-11-13T08:58:33Z", \r
- "width": 500\r
- }, \r
- {\r
- "created_at": "2011-11-20T09:50:43Z", \r
- "ext": "gif", \r
- "filesize": 1131, \r
- "height": 126, \r
- "id": 6, \r
- "updated_at": "2011-11-20T09:50:43Z", \r
- "width": 259\r
- }, \r
- {\r
- "created_at": "2011-11-20T09:50:55Z", \r
- "ext": "gif", \r
- "filesize": 1125, \r
- "height": 126, \r
- "id": 7, \r
- "updated_at": "2011-11-20T09:50:55Z", \r
- "width": 259\r
- }, \r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 8, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 9, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 10, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 11, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-22T09:17:20Z", \r
- "ext": "gif", \r
- "filesize": 9055, \r
- "height": 473, \r
- "id": 12, \r
- "updated_at": "2011-11-22T09:17:20Z", \r
- "width": 405\r
- }, \r
- {\r
- "created_at": "2011-11-22T10:11:07Z", \r
- "ext": "gif", \r
- "filesize": 8758, \r
- "height": 464, \r
- "id": 13, \r
- "updated_at": "2011-11-22T10:11:07Z", \r
- "width": 366\r
- }, \r
- {\r
- "created_at": "2011-11-24T09:05:12Z", \r
- "ext": "gif", \r
- "filesize": 6431, \r
- "height": 386, \r
- "id": 16, \r
- "updated_at": "2011-11-24T09:05:12Z", \r
- "width": 453\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 17, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 18, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 19, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 20, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 21, \r
- "updated_at": "2011-11-26T04:52:12Z",\r
- "width": 306\r
- }\r
- ]\r
- }\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
- onEnterFlag = false,\r
- imgW, imgH;\r
- JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
- jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
- \r
- function onImageLoad( url, _imgW, _imgH){\r
- if( reversibleImage === null) {\r
- alert( url);\r
- return;\r
- }\r
- imgW = _imgW || data.width || 64;\r
- imgH = _imgH || data.height || 64;\r
- JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
- var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
- h = Math.floor( imgH *zoom),\r
- w = Math.floor( imgW *zoom);\r
- reversibleImage.elm.style.width = w +'px';\r
- reversibleImage.elm.style.height = h +'px';\r
- reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
- reversibleImage.resize( w, h);\r
- JQ_ICON_WRAP.click( onClick);\r
- }\r
- \r
- function onClick( e){\r
- pettanr.overlay.hide();\r
- if( _g_onUpdateFunction) {\r
- if( LOW_SRC === null){\r
- window[ _g_onUpdateFunction]( SRC, imgW, imgH);\r
- window[ _g_onUpdateFunction] = null;\r
- } else {\r
- var _onLoad = pettanr.util.createGlobalFunc( [\r
- 'function( url, w, h){',\r
- 'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,', h || ', data.height,');',\r
- 'window["', _g_onUpdateFunction, '"] = null;',\r
- '}'\r
- ].join( '')),\r
- _onError = pettanr.util.createGlobalFunc( [\r
- 'function( url){',\r
- 'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',\r
- 'window["', _g_onUpdateFunction, '"] = null;',\r
- '}'\r
- ].join( ''));\r
- pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);\r
- window[ _onLoad] = window[ _onError] = undefined;\r
- }\r
- }\r
- close();\r
- }\r
- \r
- return {\r
- onEnter: function(){\r
- if( onEnterFlag === true) return;\r
- reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);\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
- onEnterInterval = _g_onUpdateFunction = 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 clickOK(){\r
- pettanr.overlay.hide();\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( clickOK);\r
- buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;\r
- \r
- delete IMAGE_GROUP_EXPROLER.init;\r
- },\r
- jqWrap: null,\r
- show: function( _onUpdateFunction){\r
- //onUpdateFunction = _onUpdateFunction;\r
- if( _onUpdateFunction){\r
- _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);\r
- } else {\r
- _g_onUpdateFunction = null;\r
- }\r
- pettanr.overlay.show( this);\r
- \r
- var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],\r
- l = CURRENT_GROUP_ARRAY.length;\r
- for( var i=0; i<l; ++i){\r
- ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ 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
* WINDOWS_CONTROL\r
* - contloler\r
* - mouseEventListener\r
instance = this;\r
delete this.onInit;\r
},\r
- onFirstOpen: function( _w, _h){\r
- finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
- delete this.onFirstOpen;\r
- },\r
onOpen: function( _w, _h){\r
- finder.onOpen( _w, _h);\r
+ finder = finder || pettanr.finder.createFinder( pettanr.editor, document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
+ finder.resize( _w, _h );\r
},\r
- onResize: function( _w, _h){\r
- finder.resize( _w, _h);\r
+ onResize: function( _w, _h ){\r
+ finder.resize( _w, _h );\r
}\r
},\r
'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300\r
x = currentElement !== null ? currentElement.x : 0,\r
y = currentElement !== null ? currentElement.y : 0,\r
z = currentElement !== null ? currentElement.z : 0,\r
- a = _elementType === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,\r
+ a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,\r
w = currentElement !== null ? currentElement.w : 0,\r
h = currentElement !== null ? currentElement.h : 0,\r
- actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,\r
- actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,\r
- wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,\r
- hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,\r
+ actualW = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,\r
+ actualH = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,\r
+ wPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,\r
+ hPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,\r
keepAspect = currentElement !== null && currentElement.keepAspect === true;\r
\r
if( currentElementType !== _elementType){\r
}\r
\r
return {\r
- open: function( _panelW, _panelH, _borderSize){\r
- panelW = _panelW || DEFAULT_PANEL_WIDTH;\r
- panelH = _panelH || DEFAULT_PANEL_HEIGHT;\r
+ open: function( _panelW, _panelH, _borderSize ){\r
+ panelW = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH;\r
+ panelH = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT;\r
//panelX = Math.floor( ( windowW -panelW) /2);\r
//panelY = Math.floor( ( windowH -panelH) /2);\r
- borderSize = _borderSize !== undefined ? _borderSize : borderSize;\r
+ borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;\r
\r
//setTimeout( PANEL_CONTROL.resize, 0);\r
},\r
y: function(){\r
return panelY;\r
},\r
+ w: function(){\r
+ return panelW;\r
+ },\r
+ h: function(){\r
+ return panelH;\r
+ },\r
resize: function( isResizerTopAction, _x, _y, _w, _h){\r
panelX = _x !== undefined ? _x : panelX;\r
panelY = _y !== undefined ? _y : panelY;\r
}\r
}\r
\r
- return {\r
- onMouseDown: function( _mouseX, _mouseY){\r
- var _x = _mouseX -panelX,\r
- _y = _mouseY -panelY;\r
+ this.onMouseDown = function( _mouseX, _mouseY){\r
+ var _x = _mouseX -panelX,\r
+ _y = _mouseY -panelY;\r
+ if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
+ offsetY = _y;\r
+ startY = panelY;\r
+ startH = panelH;\r
+ isDragging = true;\r
+ MOUSE_CURSOR( 'n-resize');\r
+ return true;\r
+ }\r
+ this.onMouseMove = function( _mouseX, _mouseY){\r
+ var _x = _mouseX -panelX,\r
+ _y = _mouseY -panelY;\r
+ if( isDragging !== true){\r
if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
- offsetY = _y;\r
- startY = panelY;\r
- startH = panelH;\r
- isDragging = true;\r
- MOUSE_CURSOR( 'n-resize');\r
+ COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
+ MOUSE_CURSOR( 'pointer');\r
return true;\r
- },\r
- onMouseMove: function( _mouseX, _mouseY){\r
- var _x = _mouseX -panelX,\r
- _y = _mouseY -panelY;\r
- if( isDragging !== true){\r
- if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
- COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
- MOUSE_CURSOR( 'pointer');\r
- return true;\r
+ } else {\r
+ var move = _y -offsetY;\r
+ if( isTop === true){\r
+ if( panelH - move < MIN_PANEL_HEIGHT){\r
+ move = panelH -MIN_PANEL_HEIGHT;\r
+ }\r
+ PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
} else {\r
- var move = _y -offsetY;\r
- if( isTop === true){\r
- if( panelH - move < MIN_PANEL_HEIGHT){\r
- move = panelH -MIN_PANEL_HEIGHT;\r
- }\r
- PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
- } else {\r
- var _h = startH +move;\r
- if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
- PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
- }\r
+ var _h = startH +move;\r
+ if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
+ PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
}\r
}\r
- return true;\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- if( isDragging !== true) return;\r
- ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
- isDragging = false;\r
- MOUSE_CURSOR( '');\r
- },\r
- busy: function(){\r
- return isDragging\r
- },\r
- onPanelResize: function( _x, _y, _w, _h){\r
- panelX = _x;\r
- panelY = _y;\r
- if( panelW !== _w){\r
- ELM.style.width = ( _w +2) +'px';\r
- panelW = _w;\r
- }\r
- panelH = _h;\r
- y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
- w = panelW +2;\r
}\r
+ return true;\r
+ }\r
+ this.onMouseUp = function( _mouseX, _mouseY){\r
+ if( isDragging !== true) return;\r
+ ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
+ isDragging = false;\r
+ MOUSE_CURSOR( '');\r
+ }\r
+ this.busy = function(){\r
+ return isDragging\r
+ }\r
+ this.onPanelResize = function( _x, _y, _w, _h){\r
+ panelX = _x;\r
+ panelY = _y;\r
+ if( panelW !== _w){\r
+ ELM.style.width = ( _w +2) +'px';\r
+ panelW = _w;\r
+ }\r
+ panelH = _h;\r
+ y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
+ w = panelW +2;\r
}\r
};\r
- var PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true),\r
- PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false);\r
+ var PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true ),\r
+ PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );\r
\r
PanelResizerClass = undefined;\r
\r
SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);\r
var _z = currentElement.z;\r
LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+ LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);\r
}\r
function layerForward(){\r
if( currentElement === null) return;\r
SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);\r
var _z = currentElement.z;\r
LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+ LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);\r
}\r
function del(){\r
if( currentElement === null) return;\r
COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
}\r
function edit(){\r
- if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;\r
- TEXT_EDITOR_CONTROL.show( currentElement);\r
- buttonBackOrForward( true);\r
+ if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return;\r
+ pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), currentElement );\r
+ buttonBackOrForward( true );\r
}\r
function change(){\r
if( currentElement === null) return;\r
buttonBackOrForward( true);\r
- IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
+ pettanr.premiumSatge.bootInOverlay( currentElement.getArtistID(), currentElement.resourcePicture );\r
+ }\r
+ function onImageSelect( resourcePicture ){\r
+ currentElement.resourcePicture( resourcePicture );\r
}\r
return {\r
init: function(){\r
\r
delete CONSOLE_CONTROLER.init;\r
},\r
- show: function( _currentElement, _w, _h){\r
+ show: function( _currentElement, _w, _h ){\r
+ CONSOLE_CONTROLER.init && CONSOLE_CONTROLER.init();\r
+ \r
visible === false && jqConsoleWrapper.show();\r
visible = true;\r
currentElement = _currentElement;\r
_z = _currentElement.z;\r
if( currentType !== _currentType){\r
currentType = _currentType;\r
- jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
- jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
- consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
- consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
+ jqImgConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_IMAGE);\r
+ jqTextConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_TEXT);\r
+ consoleWidth = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
+ consoleHeight = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
}\r
consoleX = Math.floor( ( _w -consoleWidth) /2);\r
\r
LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
+ LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);\r
DELETE_BUTTON.visible( true);\r
- EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
+ EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT);\r
CHANGE_BUTTON.visible( false);\r
\r
if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
currentText = null;\r
},\r
onStart: function( _currentText, _mouseX, _mouseY){\r
- if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false;\r
+ if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT) return false;\r
x = _currentText.x;\r
y = _currentText.y;\r
if( this.hitTest( _mouseX -x, _mouseY -y) === true){\r
return {\r
update: draw,\r
index: function( _mouseX, _mouseY){\r
- var p;\r
- for( var i=4; i<8; i++){\r
+ var p, i;\r
+ for( i=4; i<8; i++){\r
p = POSITION_ARRAY[ i];\r
if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
return currentIndex = i;\r
}\r
}\r
- for( var i=0; i<4; i++){\r
+ for( i=0; i<4; i++){\r
p = POSITION_ARRAY[ i];\r
if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
},\r
show: function( _currentElement){\r
currentElement = _currentElement;\r
- currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
+ currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;\r
elmResizerContainerStyle.display = '';\r
},\r
hide: function(){\r
},\r
onStart: function( _currentElement, _mouseX, _mouseY){\r
currentElement = _currentElement;\r
- currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
+ currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;\r
if( _currentElement.keepSize === true) return false;\r
currentIndex = this.index( _mouseX, _mouseY);\r
if( currentIndex === -1) return false;\r
startY = baseY = _currentElement.y;\r
startW = baseW = _currentElement.w;\r
startH = baseH = _currentElement.h;\r
- if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){\r
+ if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){\r
startFilpV = _currentElement.flipV();\r
startFilpH = _currentElement.flipH(); \r
}\r
_h = MIN_ELEMENT_SIZE;\r
}\r
} else \r
- if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){\r
+ if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){\r
return;\r
} else \r
if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){\r
onCancel: function(){\r
MOUSE_CURSOR( '');\r
COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);\r
- currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+ currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?\r
currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :\r
currentElement.animate( startX, startY, startW, startH, angle);\r
},\r
if( currentElement !== _currentElement){\r
currentElement = _currentElement;\r
\r
- currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
+ currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT);\r
currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();\r
\r
flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
_a = arg[ 5],\r
_flipV = arg[ 6], _flipH = arg[ 7];\r
if( !_currentElement && !currentOperator) return;\r
- _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+ _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?\r
_currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
_currentElement.animate( _x, _y, _w, _h, _a);\r
currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
busy: function(){\r
return currentOperator !== null;\r
},\r
- hitTest: function( _mouseX, _mouseY, _comicElement){\r
+ hitTest: function( _mouseX, _mouseY, _panelElement ){\r
var _x, _y, _w, _h;\r
- if( _comicElement === currentElement){\r
+ if( _panelElement === currentElement){\r
var _consoleX = CONSOLE_CONTROLER.x();\r
_x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
_y = currenty -HIT_AREA;\r
var _consoleY = CONSOLE_CONTROLER.y();\r
_h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;\r
} else {\r
- _x = _comicElement.x -HIT_AREA;\r
- _y = _comicElement.y -HIT_AREA;\r
- _w = _comicElement.w +HIT_AREA *2;\r
- _h = _comicElement.h +HIT_AREA *2;\r
+ _x = _panelElement.x -HIT_AREA;\r
+ _y = _panelElement.y -HIT_AREA;\r
+ _w = _panelElement.w +HIT_AREA *2;\r
+ _h = _panelElement.h +HIT_AREA *2;\r
}\r
+ log.html( [ _x, _y, _w, _h ].join( ' ') );\r
return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;\r
},\r
onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
* // COMIC_ELEMENT_OPERATION_MANAGER\r
*/\r
\r
- var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){\r
- var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;\r
- return {\r
- $: JQ_WAPPER,\r
- type: COMIC_ELM_TYPE,\r
- x: x,\r
- y: y,\r
- w: w,\r
- h: h, \r
- z: z,\r
- timing: timing,\r
- hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest( _mouseX, _mouseY, this);},\r
- shift: function( _shiftX, _shiftY){\r
- update( this.x +_shiftX, this.y +_shiftY);\r
- },\r
- busy: function(){\r
- return OPERATOR.busy();\r
- },\r
- onMouseMove: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseUp( this, _mouseX, _mouseY);\r
- },\r
- onMouseDown: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseDown( this, _mouseX, _mouseY);\r
- }\r
+ var AbstractComicElement = function( COMIC_ELM_TYPE ){\r
+ this.type = COMIC_ELM_TYPE;\r
+ this.hitTest = function( _mouseX, _mouseY ){\r
+ return COMIC_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this );\r
+ }\r
+ this.shift = function( _shiftX, _shiftY ){\r
+ this.resize( this.x + _shiftX, this.y + _shiftY);\r
+ }\r
+ this.busy = function(){\r
+ return COMIC_ELEMENT_OPERATION_MANAGER.busy();\r
+ }\r
+ this.onMouseMove = function( _mouseX, _mouseY ){\r
+ COMIC_ELEMENT_OPERATION_MANAGER.onMouseMove( this, _mouseX, _mouseY );\r
+ }\r
+ this.onMouseUp = function( _mouseX, _mouseY ){\r
+ COMIC_ELEMENT_OPERATION_MANAGER.onMouseUp( this, _mouseX, _mouseY );\r
+ }\r
+ this.onMouseDown = function( _mouseX, _mouseY ){\r
+ COMIC_ELEMENT_OPERATION_MANAGER.onMouseDown( this, _mouseX, _mouseY );\r
}\r
};\r
\r
* ImageElementClass\r
*/\r
var jqImageElementOrigin;\r
- var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){\r
+ var ImageElementClass = function( data ){\r
jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
\r
- var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
- OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
- SAVE = HISTORY_CONTROL.saveState,\r
- HIT_AREA = MOUSE_HIT_AREA,\r
- reversibleImage = null,\r
- actualW = 0, actualH = 0,\r
+ var JQ_WRAPPER = jqImageElementOrigin.clone( true ),\r
+ w = data.width,\r
+ h = data.height,\r
+ x, y, z,\r
flipH = w < 0 ? -1 : 1,\r
flipV = h < 0 ? -1 : 1,\r
- instance;\r
- w = Math.floor( w);\r
- h = Math.floor( h);\r
- \r
- function update( _x, _y, _w, _h, animate){\r
+ resourcePicture = data.resource_picture,\r
+ actualW = data.resource_picture.width,\r
+ actualH = data.resource_picture.height,\r
+ reversibleImage = null,\r
+ instance = this;\r
+ w = Math.floor( w );\r
+ h = Math.floor( h );\r
+\r
+ function onAnimeComplete(){\r
+ reversibleImage && reversibleImage.resize( flipH * w, flipV * h );\r
+ }\r
+ function updateResourcePicture( _resourcePicture ){\r
+ resourcePicture = _resourcePicture;\r
+ \r
+ actualW = _resourcePicture.width;\r
+ actualH = _resourcePicture.height;\r
+ \r
+ var _reversibleImage = pettanr.image.createReversibleImage( \r
+ [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),\r
+ flipH * w, flipV * h\r
+ );\r
+ if( reversibleImage !== null){\r
+ JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );\r
+ reversibleImage.destroy();\r
+ } else {\r
+ JQ_WRAPPER.append( _reversibleImage.elm );\r
+ }\r
+ reversibleImage = _reversibleImage;\r
+ }\r
+ /* global methods */\r
+ this.$ = JQ_WRAPPER;\r
+ //this.x = x;\r
+ //this.y = y;\r
+ //this.w = w;\r
+ //this.h = h; \r
+ this.z = data.z;\r
+ this.timing = data.t;\r
+ this.init = function(){\r
+ updateResourcePicture( data.resource_picture );\r
+ instance.resize( data.x, data.y, data.width, data.height );\r
+ delete instance.init;\r
+ }\r
+ this.flip = function( _updateH, _updateV ){\r
+ if( _updateH !== true && _updateV !== true ) return;\r
+ flipH = _updateH === true ? -flipH : flipH;\r
+ flipV = _updateV === true ? -flipV : flipV;\r
+ reversibleImage.resize( flipH * w, flipV * h );\r
+ }\r
+ this.flipV = function(){\r
+ return flipV;\r
+ }\r
+ this.flipH = function(){\r
+ return flipH;\r
+ }\r
+ this.resourcePicture = function( _resourcePicture ){\r
+ if( _resourcePicture && _resourcePicture !== resourcePicture ){\r
+ HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture );\r
+ updateResourcePicture( _resourcePicture );\r
+ }\r
+ return resourcePicture;\r
+ }\r
+ this.getArtistID = function(){\r
+ return resourcePicture.artist_id || resourcePicture.artist.id || -1;\r
+ }\r
+ this.actualW = function(){ return actualW;}\r
+ this.actualH = function(){ return actualH;}\r
+ this.keepSize = false;\r
+ this.resize = function( _x, _y, _w, _h, animate ){\r
instance.x = x = _x !== undefined ? _x : x;\r
instance.y = y = _y !== undefined ? _y : y;\r
instance.w = w = _w !== undefined ? _w : w;\r
instance.h = h = _h !== undefined ? _h : h;\r
- JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { \r
+ JQ_WRAPPER[ animate === true ? 'animate' : 'css' ]( { \r
left: x,\r
top: y,\r
width: w,\r
height: h\r
- }, 250, onAnimeComplete);\r
+ }, 250, onAnimeComplete );\r
animate !== true && onAnimeComplete();\r
}\r
- function onAnimeComplete(){\r
- reversibleImage.resize( flipH * w, flipV * h);\r
+ this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){\r
+ flipH = _flipH !== undefined ? _flipH : flipH;\r
+ flipV = _flipV !== undefined ? _flipV : flipV;\r
+ instance.resize( _x, _y, _w, _h, true );\r
}\r
- \r
- function updateUrl( _url){\r
- if( url === _url) return;\r
- url = _url || url;\r
- var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){\r
- actualW = _actualW;\r
- actualH = _actualH;\r
- });\r
- if( reversibleImage !== null){\r
- JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);\r
- reversibleImage.destroy();\r
- } else {\r
- JQ_WRAPPER.append( _reversibleImage.elm);\r
- }\r
- reversibleImage = _reversibleImage;\r
+ this.destroy = function(){\r
+ delete instance.destroy;\r
+ \r
+ reversibleImage.destroy();\r
+ JQ_WRAPPER.stop().remove();\r
+ JQ_WRAPPER = reversibleImage = resourcePicture = data = instance = null;\r
}\r
- return pettanr.util.extend(\r
- new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),\r
- {\r
- init: function(){\r
- instance = this;\r
- updateUrl();\r
- update();\r
- delete this.init;\r
- },\r
- flip: function( _flipH, _flipV){\r
- if( _flipH !== true && _flipV !== true) return;\r
- flipH = _flipH === true ? -flipH : flipH;\r
- flipV = _flipV === true ? -flipV : flipV;\r
- reversibleImage.resize( flipH * w, flipV * h);\r
- },\r
- flipV: function(){\r
- return flipV;\r
- },\r
- flipH: function(){\r
- return flipH;\r
- },\r
- url: function( _url, _actualW, _actualH){\r
- if( _url && _url !== url){\r
- SAVE( updateUrl, url, _url);\r
- actualW = _actualW;\r
- actualH = _actualH;\r
- updateUrl( _url);\r
- }\r
- return url;\r
- },\r
- actualW: function(){ return actualW;},\r
- actualH: function(){ return actualH;},\r
- keepSize: false,\r
- resize: update,\r
- animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
- flipH = _flipH !== undefined ? _flipH : flipH;\r
- flipV = _flipV !== undefined ? _flipV : flipV;\r
- update( _x, _y, _w, _h, true);\r
- },\r
- getAsHTML: function( isAbsoluteUrl, isXHTML){\r
- return [\r
- '<img ',\r
- 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
- 'width="', w, '" ',\r
- 'height="', h, '" ',\r
- 'style="', \r
- 'left:', x, 'px;',\r
- 'top:', y, 'px;',\r
- 'z-index:', this.z, ';',\r
- '"',\r
- isXHTML !== true ? '>' : ' \/>'\r
- ].join( '');\r
- },\r
- getAsJsonString: function(){\r
- var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
- return [\r
- '"new', this.timing, '": {', cr,\r
- '"resource_picture_id": 1,', cr,\r
- '"x": ', x, ',', cr,\r
- '"y": ', y, ',', cr,\r
- '"z": ', this.z, ',', cr,\r
- '"width": ', w, ',', cr,\r
- '"height": ', h, ',', cr,\r
- '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
- '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
- '"t": ', this.timing, cr,\r
- '}'\r
- ].join( '');\r
- },\r
- destroy: function(){\r
- reversibleImage.destroy();\r
- JQ_WRAPPER.remove();\r
- JQ_WRAPPER = reversibleImage = OPERATOR = null;\r
- delete this.destroy;\r
- }\r
- }\r
- );\r
}\r
+ ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );\r
/*\r
* / ImageElementClass\r
* --------------------------------------------------------------------------------------------\r
* \r
*/\r
var jqTextElementOrigin;\r
- var TextElementClass = function( type, a, text, x, y, z, w, h, timing){\r
+ var TextElementClass = function( data ){\r
jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
_MODERN = $( $( '#textElementTemplete').remove().html());\r
return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;\r
})();\r
\r
- var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
- XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),\r
- TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
- OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
- HIT_AREA = MOUSE_HIT_AREA,\r
- SAVE = HISTORY_CONTROL.saveState,\r
- instance;\r
- \r
- JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);\r
+ var JQ_WRAPPER = jqTextElementOrigin.clone( true ),\r
+ elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ),\r
+ type = data.balloon_template_id,\r
+ text = ( function(){\r
+ var _speachs = data.speaches_attributes;\r
+ for( var k in _speachs ){\r
+ return _speachs[ k ].content || '';\r
+ }\r
+ return '';\r
+ })(),\r
+ balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),\r
+ x, y, w, h, a,\r
+ instance = this;\r
+ \r
+ JQ_WRAPPER.find( 'img' ).eq( 0 ).replaceWith( balloon.elm );\r
+ \r
+ function updateType( _type ){\r
+ if( type !== _type ){\r
+ type = _type || type;\r
+ balloon.type( type );\r
+ }\r
+ }\r
+ function updateAngle( _a ){\r
+ if( _a !== undefined && a !== _a ){\r
+ a = _a !== undefined ? _a : a;\r
+ balloon.angle( a );\r
+ }\r
+ }\r
+ function updateText( _text ){\r
+ text = _text || text || '';\r
+ elmText.firstChild.data = text;\r
+ }\r
+ function resizeBalloon(){\r
+ balloon && balloon.resize( a, w, h );\r
+ }\r
\r
- function update( _x, _y, _w, _h, _a, animate){\r
+ /* global methods */\r
+ this.$ = JQ_WRAPPER;\r
+ //this.x = x;\r
+ //this.y = y;\r
+ //this.w = w;\r
+ //this.h = h;\r
+ this.z = data.z;\r
+ this.timing = data.t;\r
+ this.init = function(){\r
+ updateText();\r
+ instance.resize( data.x, data.y, data.width, data.height, data.tail );\r
+ delete instance.init;\r
+ }\r
+ this.angle = function( _a ){\r
+ _a !== undefined && instance.resize( x, y, w, h, _a );\r
+ return a;\r
+ }\r
+ this.text = function( _text ){\r
+ if( _text && text !== _text) {\r
+ HISTORY_CONTROL.saveState( updateText, text || '', _text );\r
+ updateText( _text );\r
+ }\r
+ return text;\r
+ }\r
+ this.getBalloonURL = function(){\r
+ return balloon.getURL();\r
+ }\r
+ this.resize = function( _x, _y, _w, _h, _a, animate ){\r
instance.x = x = _x !== undefined ? _x : x;\r
instance.y = y = _y !== undefined ? _y : y;\r
instance.w = w = _w !== undefined ? _w : w;\r
top: y,\r
width: w,\r
height: h\r
- }, 250,\r
- function(){\r
- XBROWSER_BALLOON.resize( a, w, h);\r
- }\r
+ }, 250, resizeBalloon\r
); \r
- animate !== true && XBROWSER_BALLOON.resize( a, w, h);\r
- }\r
- \r
- function updateType( _type){\r
- if( type !== _type){\r
- type = _type || type;\r
- XBROWSER_BALLOON.type( type);\r
- }\r
+ animate !== true && resizeBalloon();\r
}\r
- function updateAngle( _a){\r
- if( _a !== undefined && a !== _a){\r
- a = _a !== undefined ? _a : a;\r
- XBROWSER_BALLOON.angle( a);\r
- }\r
+ this.animate = function ( _x, _y, _w, _h, _a ){\r
+ instance.resize( _x, _y, _w, _h, _a, true );\r
}\r
- function updateText( _text){\r
- text = _text || text || '';\r
- TEXT_ELM.html( text);\r
+ this.destroy = function(){\r
+ delete instance.destroy;\r
+ \r
+ JQ_WRAPPER.stop().remove();\r
+ balloon.destroy();\r
+ JQ_WRAPPER = elmText = data = balloon = instance = null;\r
}\r
- \r
- return pettanr.util.extend(\r
- new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),\r
- {\r
- init: function(){\r
- instance = this;\r
- updateText();\r
- update();\r
- delete this.init;\r
- },\r
- angle: function( _a){\r
- _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
- return a;\r
- },\r
- text: function( _text){\r
- if( _text && text !== _text) {\r
- SAVE( updateText, text || '', _text);\r
- updateText( _text);\r
- }\r
- return text;\r
- },\r
- resize: update,\r
- animate: function ( _x, _y, _w, _h, _a){\r
- update( _x, _y, _w, _h, _a, true);\r
- },\r
- destroy: function(){\r
- JQ_WRAPPER.remove();\r
- XBROWSER_BALLOON.destroy();\r
- OPERATOR = null;\r
- delete this.destroy;\r
- },\r
- getAsJSON: function(){\r
- \r
- },\r
- getAsJsonString: function(){\r
- var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
- return [\r
- '"new', this.timing, '": {', cr,\r
- '"balloon_template_id": ', 1, ',', cr,\r
- '"system_picture_id": ', 1, ',', cr,\r
- '"size": ', 1, ',', cr,\r
- '"tail": ', a, ',', cr,\r
- '"x": ', x, ',', cr,\r
- '"y": ', y, ',', cr,\r
- '"z": ', this.z, ',', cr,\r
- '"t": ', this.timing, ',', cr,\r
- '"width": ', w, ',', cr,\r
- '"height": ', h, ',', cr,\r
- '"speaches_attributes": {', cr,\r
- '"newf', this.timing, '": {', cr,\r
- '"content": "', text, '",', cr,\r
- '"x": ', x, ',', cr,\r
- '"y": ', y, ',', cr,\r
- '"t": ', 0, ',', cr,\r
- '"width": ', w, ',', cr,\r
- '"height": ', h, cr,\r
- '}', cr,\r
- '}', cr,\r
- '}'\r
- ].join( '');\r
- },\r
- getAsHTML: function( isAbsoluteUrl, isXHTML){\r
- var url = XBROWSER_BALLOON.getURL();\r
- return [\r
- '<img ',\r
- 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
- 'width="', w, '" ',\r
- 'height="', h, '" ',\r
- 'style="', \r
- 'left:', x, 'px;',\r
- 'top:', y, 'px;',\r
- 'z-index:', this.z, ';',\r
- '"',\r
- isXHTML !== true ? '>' : ' \/>',\r
- pettanr.LINE_FEED_CODE_TEXTAREA,\r
- '<div class="balloon" style="',\r
- 'left:', x, 'px;',\r
- 'top:', y, 'px;',\r
- 'width:', w, 'px;',\r
- 'height:', h, 'px;',\r
- 'z-index:', this.z,\r
- '"><span>', text, '<\/span>', '<\/div>'\r
- \r
- ].join( '');\r
- },\r
- getAsXML: function(){}\r
- }\r
- );\r
}\r
+ TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );\r
\r
/* --------------------------------------------------------------------------------------------\r
* COMIC_ELEMENT_CONTROL\r
* \r
* append comicElement\r
* 1. 新しい comicElement の z-position を得る\r
- * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（COMIC_ELEMENT_ARRAY）\r
- * zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。\r
- * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
+ * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（PANEL_ELEMENT_ARRAY）\r
+ * zが大きいほど、PANEL_ELEMENT_ARRAYの先頭へ。\r
+ * 3. dom位置は、PANEL_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
* \r
* \r
* remove comicElement\r
* 1. remove\r
* 2. renumber z\r
*/\r
- function appendComicElement( _comicElement) {\r
- _comicElement.init && _comicElement.init();\r
- var z = _comicElement.z,\r
- l = COMIC_ELEMENT_ARRAY.length,\r
- _jqElm = _comicElement.$.stop().css( {\r
+ function appendComicElement( _panelElement ) {\r
+ var z = _panelElement.z,\r
+ l = PANEL_ELEMENT_ARRAY.length,\r
+ _jqElm = _panelElement.$.stop().css( {\r
filter: '',\r
opacity: ''\r
});\r
- if( typeof z !== 'number' || z < 0 || z >= l){\r
- COMIC_ELEMENT_ARRAY.unshift( _comicElement);\r
- ELM_CONTAINER.appendChild( _jqElm.get( 0));\r
+ if( typeof z !== 'number' || z < 0 || z >= l ){\r
+ PANEL_ELEMENT_ARRAY.unshift( _panelElement );\r
+ ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
_jqElm.fadeIn();\r
+ } else\r
+ if( l === 0 ){\r
+ PANEL_ELEMENT_ARRAY.push( _panelElement );\r
+ ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
} else {\r
var insertIndex = 0;\r
- for( var i = 0; i < l; ++i){\r
- if( COMIC_ELEMENT_ARRAY[ i].z <= z){\r
+ for( var i = 0; i < l; ++i ){\r
+ if( PANEL_ELEMENT_ARRAY[ i ].z <= z ){\r
insertIndex = i;\r
break;\r
}\r
}\r
- COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());\r
- COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
+ PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() );\r
+ PANEL_ELEMENT_ARRAY.splice( insertIndex, 0, _panelElement );\r
}\r
renumber();\r
}\r
- function removeComicElement( _comicElement) {\r
- var l = COMIC_ELEMENT_ARRAY.length;\r
+ function removeComicElement( _panelElement ) {\r
+ var l = PANEL_ELEMENT_ARRAY.length;\r
for( var i=0; i<l; ++i){\r
- if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){\r
- COMIC_ELEMENT_ARRAY.splice( i, 1);\r
+ if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){\r
+ PANEL_ELEMENT_ARRAY.splice( i, 1 );\r
renumber();\r
- _comicElement.$.stop().css( {\r
+ _panelElement.$.stop().css( {\r
filter: '',\r
opacity: ''\r
- }).fadeOut( onFadeOut);\r
- currentElement = currentElement === _comicElement ? null : currentElement;\r
+ }).fadeOut( onFadeOut );\r
+ currentElement = currentElement === _panelElement ? null : currentElement;\r
return;\r
}\r
}\r
function onFadeOut(){\r
- this.parentNode.removeChild( this);\r
+ this.parentNode.removeChild( this );\r
}\r
}\r
- function restoreComicElement( arg){\r
- var isAppend = arg[ 0],\r
- comicElement = arg[ 1];\r
- isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);\r
+ function restoreComicElement( arg ){\r
+ var isAppend = arg[ 0 ],\r
+ comicElement = arg[ 1 ];\r
+ isAppend === true ? appendComicElement( comicElement ) : removeComicElement( comicElement );\r
}\r
/*\r
- * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
+ * PANEL_ELEMENT_ARRAY の順番を基準に、zの再計算\r
* jqElmの並び替え。\r
*/\r
function renumber(){\r
- var l = COMIC_ELEMENT_ARRAY.length,\r
- _comicElement, jqElm, jqNext;\r
+ var l = PANEL_ELEMENT_ARRAY.length,\r
+ _panelElement, jqElm, jqNext;\r
for( var i=0; i < l; ++i){\r
- _comicElement = COMIC_ELEMENT_ARRAY[ i];\r
- jqElm = _comicElement.$;\r
- jqNext && jqNext.before( jqElm);\r
- _comicElement.z = l -i -1;\r
+ _panelElement = PANEL_ELEMENT_ARRAY[ i ];\r
+ jqElm = _panelElement.$;\r
+ jqNext && jqNext.before( jqElm );\r
+ _panelElement.z = l -i -1;\r
jqNext = jqElm;\r
}\r
}\r
- function replaceComicElement( _comicElement, goForward){\r
- // COMIC_ELEMENT_ARRAYの再構築\r
- var l = COMIC_ELEMENT_ARRAY.length,\r
+ function replaceComicElement( _panelElement, goForward ){\r
+ // PANEL_ELEMENT_ARRAYの再構築\r
+ var l = PANEL_ELEMENT_ARRAY.length,\r
i = ( function(){\r
- for( var ret = 0; ret < l; ++ret){\r
- if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement) return ret;\r
+ for( var ret = 0; ret < l; ++ret ){\r
+ if( PANEL_ELEMENT_ARRAY[ ret] === _panelElement ) return ret;\r
}\r
return -1;\r
})();\r
if( i === -1) return false;\r
if( goForward === true){\r
if( i === 0) return false;\r
- COMIC_ELEMENT_ARRAY.splice( i, 1);\r
- COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);\r
+ PANEL_ELEMENT_ARRAY.splice( i, 1);\r
+ PANEL_ELEMENT_ARRAY.splice( i -1, 0, _panelElement);\r
} else {\r
if( i === l -1) return false;\r
- COMIC_ELEMENT_ARRAY.splice( i, 1);\r
- COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
+ PANEL_ELEMENT_ARRAY.splice( i, 1);\r
+ PANEL_ELEMENT_ARRAY.splice( i +1, 0, _panelElement);\r
}\r
renumber();\r
return true;\r
function restoreReplaceElement( arg){\r
replaceComicElement( arg[ 0], arg[ 1]);\r
}\r
- \r
+\r
+ function onImageSelect( data, isPanelPictureData ){\r
+ if( isPanelPictureData !== true ){\r
+ data = {\r
+ resource_picture:data,\r
+ x: Math.floor( panelW /2 - data.width /2 ),\r
+ y: Math.floor( panelH /2 - data.height /2 ),\r
+ z: -1,\r
+ t: PANEL_ELEMENT_ARRAY.length,\r
+ width: data.width,\r
+ height: data.height\r
+ }\r
+ }\r
+ var _panelElement = new ImageElementClass( data );\r
+ _panelElement.init && _panelElement.init();\r
+ appendComicElement( _panelElement );\r
+ _panelElement.animate( undefined, undefined, data.width, data.height );\r
+ SAVE( restoreComicElement, [ false, _panelElement], [ true, _panelElement], true );\r
+ }\r
+ function onTextInput( _panelElement ){\r
+ appendComicElement( _panelElement );\r
+ SAVE( restoreComicElement, [ false, _panelElement ], [ true, _panelElement ], true );\r
+ }\r
+ \r
return {\r
init: function(){\r
- \r
- appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));\r
- appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));\r
- /*\r
- * \r
- */\r
log = $( '#operation-catcher-log');\r
\r
delete COMIC_ELEMENT_CONTROL.init;\r
COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();\r
},\r
close: function(){\r
- while( COMIC_ELEMENT_ARRAY.length > 0){\r
- COMIC_ELEMENT_ARRAY.shift().destroy();\r
+ var _comicElm;\r
+ while( PANEL_ELEMENT_ARRAY.length > 0){\r
+ _comicElm = PANEL_ELEMENT_ARRAY.shift();\r
+ _comicElm.destroy && _comicElm.destroy();\r
}\r
},\r
remove: removeComicElement,\r
restore: restoreComicElement,\r
replace: replaceComicElement,\r
restoreReplace: restoreReplaceElement,\r
- onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){\r
+ onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ){\r
/*\r
* リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。\r
*/ \r
if( isResizerTopAction === true){\r
var _shiftX = _panelW -panelW,\r
_shiftY = _panelH -panelH,\r
- l = COMIC_ELEMENT_ARRAY.length;\r
+ l = PANEL_ELEMENT_ARRAY.length;\r
for( var i = 0; i < l; i++){\r
- COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
+ PANEL_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
}\r
}\r
panelX = _panelX;\r
ELM_CONTAINER.style.left = _panelX +'px';\r
ELM_CONTAINER.style.top = _panelY +'px';\r
},\r
- onMouseMove: function( _mouseX, _mouseY){\r
- var l = COMIC_ELEMENT_ARRAY.length,\r
+ onMouseMove: function( _mouseX, _mouseY ){\r
+ var l = PANEL_ELEMENT_ARRAY.length,\r
_x = _mouseX -panelX,\r
_y = _mouseY -panelY,\r
_elm = currentElement;\r
\r
if( _elm !== null){\r
currentLockTest = currentLockTest === true && _x === 0 && _y === 0;\r
- if( _elm.busy() === true){\r
+ if( _elm.busy() === true ){\r
_elm.onMouseMove( _x, _y);\r
return true;\r
}\r
- if( _elm.hitTest( _x, _y) === true){\r
- _elm.onMouseMove( _x, _y); // cursor\r
+ if( _elm.hitTest( _x, _y) === true ){\r
+ _elm.onMouseMove( _x, _y ); // cursor\r
return true;\r
}\r
if( currentLock === true){\r
}\r
}\r
for( var i=0; i<l; i++){\r
- _elm = COMIC_ELEMENT_ARRAY[ i];\r
+ _elm = PANEL_ELEMENT_ARRAY[ i ];\r
// hitTest\r
- if( _elm.hitTest( _x, _y) === true){\r
- _elm.onMouseMove( _x, _y); // cursor\r
+ if( _elm.hitTest( _x, _y ) === true ){\r
+ _elm.onMouseMove( _x, _y ); // cursor\r
log.html( [ _x, _y, i].join( ','));\r
currentElement = _elm;\r
return true;\r
+ } else {\r
+ log.html( [ _elm.x, _elm.y, i].join( ','));\r
}\r
}\r
currentElement = null; \r
COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
- log.html( [ _x, _y].join( ','));\r
return false;\r
},\r
onMouseUp: function( _mouseX, _mouseY){\r
busy: function(){\r
return currentElement !== null;\r
},\r
- createImageElement: function( url, imagesetID, x, y, z, w, h){\r
- w = w || 200; //ActualWidth\r
- h = h || 150; //ActualHeight\r
- x = x || Math.floor( panelW /2 -w /2);\r
- y = y || Math.floor( panelH /2 -h /2);\r
- function onImageSelect( _url, _w, _h){\r
- var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);\r
- appendComicElement( _comicElement);\r
- _comicElement.animate( undefined, undefined, _w, _h);\r
- SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true); \r
- }\r
- IMAGE_GROUP_EXPROLER.show( onImageSelect);\r
- },\r
- createTextElement: function( type, angle, text, x, y, z, w, h){\r
- type = type || 0;\r
- angle = angle || 0;\r
- text = text || '';\r
- w = w || 200;\r
- h = h || 150;\r
- x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);\r
- y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);\r
- var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);\r
- TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
- appendComicElement( _comicElement);\r
- SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
- });\r
- },\r
- getAsHTML: function( isAbsoluteUrl, isXHTML){\r
- var HTML_ARRAY = [],\r
- l = COMIC_ELEMENT_ARRAY.length,\r
- _timing = 0,\r
- _comicElement;\r
-\r
- while( HTML_ARRAY.length < l){\r
- _comicElement = getComicElementByTiming();\r
- if( _comicElement === null) break;\r
- HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
- }\r
- function getComicElementByTiming(){\r
- while( _timing < l *2){\r
- for(var i=0; i<l; ++i){\r
- if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
- ++_timing;\r
- return COMIC_ELEMENT_ARRAY[ i];\r
- }\r
- }\r
- ++_timing;\r
- }\r
- return null;\r
- }\r
- HTML_ARRAY.unshift(\r
- [\r
- '<div class="panel" ',\r
- 'style="',\r
- 'height:', panelH, 'px;',\r
- 'background-color:', ';',\r
- '"',\r
- '>'\r
- ].join( '')\r
- ); \r
- HTML_ARRAY.push( '</div>');\r
- \r
- return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);\r
- },\r
- getAsJsonString: function(){\r
- var JSON_STRING_ARRAY = [],\r
- IMAGE_ARRAY = [],\r
- BALLOON_ARRAY = [],\r
- l = COMIC_ELEMENT_ARRAY.length,\r
- _timing = 0,\r
- _comicElement,\r
- cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
- \r
- while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){\r
- _comicElement = getComicElementByTiming();\r
- if( _comicElement === null) break;\r
- _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? \r
- IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :\r
- BALLOON_ARRAY.push( _comicElement.getAsJsonString());\r
- }\r
- function getComicElementByTiming(){\r
- while( _timing < l *2){\r
- for(var i=0; i<l; ++i){\r
- if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
- ++_timing;\r
- return COMIC_ELEMENT_ARRAY[ i];\r
+ createImageElement: function( data ){\r
+ if( Type.isObject( data ) === false ){\r
+ pettanr.premiumSatge.bootInOverlay( 1, onImageSelect );\r
+ } else {\r
+ onImageSelect( data, true );\r
+ }\r
+ },\r
+ createTextElement: function( data ){\r
+ var _panelElement;\r
+ if( Type.isObject( data ) === false ){\r
+ data = {\r
+ balloon_template_id:1,\r
+ size: 1,\r
+ tail: 0,\r
+ x: Math.floor( panelW /2 - 100 +Math.random() *10 ),\r
+ y: Math.floor( panelH /2 - 100 +Math.random() *10 ),\r
+ z: -1,\r
+ t: PANEL_ELEMENT_ARRAY.length,\r
+ width: 200,\r
+ height: 200,\r
+ speaches_attributes: {\r
+ text1: {\r
+ content: 'Hello'\r
}\r
}\r
- ++_timing;\r
}\r
- return null;\r
+ _panelElement = new TextElementClass( data );\r
+ _panelElement.init();\r
+ pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), _panelElement, onTextInput );\r
+ } else {\r
+ _panelElement = new TextElementClass( data );\r
+ _panelElement.init();\r
+ onTextInput( _panelElement );\r
}\r
- return [\r
- '{', cr,\r
- '"panel": {', cr,\r
- '"border": 1,', cr,\r
- '"comic_id": 5,', cr,\r
- '"resource_picture_id": 1,', cr,\r
- '"x": ', 0, ',', cr,\r
- '"y": ', 0, ',', cr,\r
- '"z": ', 0, ',', cr,\r
- '"t": ', 0, ',', cr,\r
- '"width": ', panelW, ',', cr,\r
- '"height": ', panelH, ',', cr,\r
- '"panel_pictures_attributes": {', cr,\r
- IMAGE_ARRAY.join( ',' +cr), cr,\r
- '},', cr,\r
- '"balloons_attributes": {', cr,\r
- BALLOON_ARRAY.join( ',' +cr), cr,\r
- '}', cr,\r
- '}', cr,\r
- '}'\r
- ].join( '');\r
}\r
}\r
})();\r
- \r
+\r
/*\r
* end of COMIC_ELEMENT_CONTROL\r
*/\r
}\r
}\r
function centering(){\r
- pettanr.editor.onWindowResize( windowW, windowH);\r
+ instance.onPaneResize( windowW, windowH);\r
} \r
function mouseEventRellay( e){\r
var _mouseX = e.pageX,\r
return false;\r
}\r
\r
- return {\r
- init: function( _option){\r
- option = _option;\r
- \r
- },\r
- firstOpen: function(){\r
- /*\r
- * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初\r
- * MENU_BAR_CONTROL,\r
- * WINDOW_CONTROL,\r
- * COMIC_ELEMENT_CONTROL,\r
- * PANEL_CONTROL\r
- * .busy() === true なら、そのままonMouseMove()にイベントを流す．\r
- * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．\r
- */\r
- MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\r
- \r
- CONSOLE_CONTROLER.init();\r
- \r
- OUTPUT_CONSOLE.init();\r
- TEXT_EDITOR_CONTROL.init();\r
- IMAGE_GROUP_EXPROLER.init();\r
-\r
- /*\r
- * centering\r
- */\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering); // ctrl + 0\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering); // ctrl + 0\r
- MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
- /*\r
- * jqMouseEventChacher は透明な要素で、\r
- * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事\r
- * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。\r
- */ \r
- jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)\r
- .mousemove( mouseEventRellay)\r
- .mousedown( mouseEventRellay)\r
- .mouseup( mouseEventRellay)\r
- .mouseout( mouseEventRellay);\r
- \r
- delete pettanr.editor.firstOpen;\r
- },\r
- onOpen: function( _w, _h, _file){\r
- if( pettanr.file.isFileInstance( _file) === true){\r
- // pettanr.file.isPettanFileInstance( _file) === true\r
- // \r
- }\r
- jqEditor = jqEditor || $( '#editor');\r
- \r
- HISTORY_CONTROL.open();\r
- \r
- WINDOWS_CONTROL.open();\r
- \r
- GRID_CONTROL.open();\r
- PANEL_CONTROL.open();\r
- \r
- COMIC_ELEMENT_OPERATION_MANAGER.open();\r
- COMIC_ELEMENT_CONTROL.open();\r
- \r
- // last\r
- MENU_BAR_CONTROL.open();\r
- \r
- pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();\r
- \r
- windowW = _w;\r
- windowH = _h;\r
- pettanr.editor.onWindowResize( _w, _h );\r
- },\r
- onClose: function(){\r
- HISTORY_CONTROL.close();\r
- \r
- WINDOWS_CONTROL.close();\r
- \r
- GRID_CONTROL.close();\r
- PANEL_CONTROL.close();\r
- \r
- COMIC_ELEMENT_OPERATION_MANAGER.close();\r
- COMIC_ELEMENT_CONTROL.close();\r
- \r
- // last\r
- MENU_BAR_CONTROL.open();\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- windowW = _windowW || windowW;\r
- windowH = _windowH || windowH;\r
- if( pettanr.editor.firstOpen) return;\r
- /*\r
- * ieは +'px'が不要みたい\r
- */\r
- jqEditor.get( 0).style.height = _windowH +'px';\r
- ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\r
- \r
- WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);\r
- MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);\r
- PANEL_CONTROL.onWindowResize( _windowW, _windowH);\r
- },\r
- MIN_WIDTH: 320,\r
- MIN_HEIGHT: 320\r
+ /* grobal method */\r
+ this.rootElement = document.getElementById( 'editor' );\r
+ this.displayName = pettanr.view.EDITOR;\r
+ this.ID = pettanr.view.EDITOR;\r
+ this.MIN_WIDTH = 320;\r
+ this.MIN_HEIGHT = 320;\r
+ this.firstOpen = function(){\r
+ /*\r
+ * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初\r
+ * MENU_BAR_CONTROL,\r
+ * WINDOW_CONTROL,\r
+ * COMIC_ELEMENT_CONTROL,\r
+ * PANEL_CONTROL\r
+ * .busy() === true なら、そのままonMouseMove()にイベントを流す．\r
+ * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．\r
+ */\r
+ MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\r
+ /*\r
+ * centering\r
+ */\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering); // ctrl + 0\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering); // ctrl + 0\r
+ MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
+ /*\r
+ * jqMouseEventChacher は透明な要素で、\r
+ * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事\r
+ * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。\r
+ */ \r
+ jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)\r
+ .mousemove( mouseEventRellay)\r
+ .mousedown( mouseEventRellay)\r
+ .mouseup( mouseEventRellay)\r
+ .mouseout( mouseEventRellay);\r
+ \r
+ delete instance.firstOpen;\r
}\r
-})();\r
-\r
-// create hidden iframe\r
-// write script\r
-// setInterval\r
-pettanr.proxy = ( function(){\r
- \r
- function FormProxy( formJsUrl, callback){\r
- var timer = null,\r
- iWin, idoc;\r
-\r
- pettanr.util.createIframe( 'id00000', onCreateIframe);\r
+ this.onOpen = function( _w, _h, _file ){\r
+ comicID = -1;\r
+ panelID = -1;\r
+ panelTimming = -1;\r
\r
- function onCreateIframe( _iframe){\r
- iWin = _iframe.contentWindow;\r
- idoc = _iframe.contentWindow.document;\r
-\r
- idoc.open();\r
- idoc.write( '<body>');\r
- idoc.writeln( '<script type="text\/javascript" src="' + pettanr.CONST.JQUERY_URL+ '"><\/script>');\r
- idoc.close();\r
-\r
- timer = window.setInterval( detect, 250 );\r
- }\r
- function detect(){\r
- if( iWin.jQuery){\r
- window.clearInterval( timer );\r
- //callback( idoc);\r
- iWin.jQuery( iWin).ready( onJQueryReady );\r
+ var panelW, panelH,\r
+ borderSize,\r
+ fileData, panelElements, panelElm;\r
+ \r
+ if( pettanr.file.isFileInstance( _file ) === true ){\r
+ if( pettanr.driver.isPettanrFileInstance( _file ) === true ){\r
+ if( _file.getType() === pettanr.driver.FILE_TYPE.COMIC ){\r
+ fileData = _file.read();\r
+ panelW = fileData.width;\r
+ panelH = fileData.height;\r
+ comicID = fileData.id || -1;\r
+ } else\r
+ if( _file.getType() === pettanr.driver.FILE_TYPE.PANEL ){\r
+ fileData = _file.read();\r
+ panelW = fileData.width;\r
+ panelH = fileData.height;\r
+ borderSize = fileData.border;\r
+ panelElements = fileData.panel_elements;\r
+ comicID = fileData.comic ? fileData.comic.id || -1 : -1;\r
+ panelID = fileData.id || -1;\r
+ panelTimming = fileData.t || -1;\r
+ if( Type.isArray( panelElements ) === true ){\r
+ for( var i=0; i<panelElements.length; ++i){\r
+ panelElm = panelElements[ i ];\r
+ if( panelElm.resource_picture ){\r
+ COMIC_ELEMENT_CONTROL.createImageElement( panelElm );\r
+ } else\r
+ if( panelElm.balloon_template_id ){\r
+ COMIC_ELEMENT_CONTROL.createTextElement( panelElm );\r
+ }\r
+ } \r
+ }\r
+ }\r
+ } else {\r
+ \r
}\r
}\r
- function onJQueryReady(){\r
- callback( idoc);\r
- }\r
+ jqEditor = jqEditor || $( '#editor');\r
+ \r
+ HISTORY_CONTROL.open();\r
+ \r
+ WINDOWS_CONTROL.open();\r
+ \r
+ GRID_CONTROL.open();\r
+ PANEL_CONTROL.open( panelW, panelH, borderSize );\r
+ \r
+ COMIC_ELEMENT_OPERATION_MANAGER.open();\r
+ COMIC_ELEMENT_CONTROL.open();\r
+ \r
+ instance.firstOpen !== undefined && instance.firstOpen();\r
+ \r
+ // last\r
+ MENU_BAR_CONTROL.open();\r
+ \r
+ windowW = _w;\r
+ windowH = _h;\r
+ instance.onPaneResize( _w, _h );\r
}\r
- \r
- return {\r
- createFormProxy: function( _formJsUrl, _callback){\r
- new FormProxy( _formJsUrl, _callback);\r
- }\r
+ this.onClose = function(){\r
+ HISTORY_CONTROL.close();\r
+ \r
+ WINDOWS_CONTROL.close();\r
+ \r
+ GRID_CONTROL.close();\r
+ PANEL_CONTROL.close();\r
+ \r
+ COMIC_ELEMENT_OPERATION_MANAGER.close();\r
+ COMIC_ELEMENT_CONTROL.close();\r
+ \r
+ // last\r
+ MENU_BAR_CONTROL.open();\r
}\r
- \r
-})();\r
-\r
-\r
-pettanr.comicConsole = ( function(){\r
- var COMIC_CONSOLE = ( function(){\r
- var jqWrap,\r
- ID = 'comicConsole',\r
- elmWrap = document.getElementById( 'comic-console-wrapper' ),\r
- elmHeader = document.getElementById( 'comic-console-header' ),\r
- elmProgress = document.getElementById( 'comic-console-progress' ),\r
- inputTitle, inputW, inputH, inputVisible, inputEditable,\r
- elmUploader = null,\r
- elmScript = null\r
- elmIframe = null,\r
- elmForm = null,\r
- timer = null,\r
- isUploading = false;\r
- //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
+ this.onPaneResize = function( _windowW, _windowH){\r
+ windowW = _windowW || windowW;\r
+ windowH = _windowH || windowH;\r
+ /*\r
+ * ieは +'px'が不要みたい\r
+ */\r
+ jqEditor.get( 0).style.height = _windowH +'px';\r
+ ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\r
\r
- function clickOK(){\r
- if( !elmForm || !elmIframe || isUploading === true ) return false;\r
- // validate\r
- isUploading = true;\r
- elmProgress.innerHTML = '■';\r
- copyAndSubmit();\r
- }\r
+ WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);\r
+ MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);\r
+ PANEL_CONTROL.onWindowResize( _windowW, _windowH);\r
+ }\r
+});\r
+\r
+\r
+pettanr.comicConsole = pettanr.view.registerApplication( function(){\r
+ var jqWrap,\r
+ ID = 'comicConsole',\r
+ elmWrap = document.getElementById( 'comic-console-wrapper' ),\r
+ elmHeader = document.getElementById( 'comic-console-header' ),\r
+ elmProgress = document.getElementById( 'comic-console-progress' ),\r
+ inputTitle, inputW, inputH,\r
+ comboboxVisible, comboboxEditable,\r
+ buttonSubmit, buttonCancel,\r
+ elmUploader = null,\r
+ elmScript = null,\r
+ elmIframe = null,\r
+ elmForm = null,\r
+ timer = null,\r
+ isUploading = false,\r
+ instance = this;\r
+ //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
+ \r
+ function clickOK(){\r
+ if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+ // validate\r
+ isUploading = true;\r
+ elmProgress.innerHTML = '■';\r
+ copyAndSubmit();\r
+ }\r
\r
- function copyAndSubmit(){\r
- var _inputList = elmForm.getElementsByTagName( 'input' ),\r
- _input, _name;\r
- for( var i=0, l= _inputList.length; i<l; ++i){\r
- _input = _inputList[ i ];\r
- _name = _input.name;\r
- if( _name === 'comic[title]'){\r
- _input.value = inputTitle.value();\r
- } else\r
- if( _name === 'comic[width]'){\r
- _input.value = inputW.value();\r
- } else\r
- if( _name === 'comic[height]'){\r
- _input.value = inputH.value();\r
- }\r
- }\r
- var _selectList = elmForm.getElementsByTagName( 'select' ),\r
- _select, _name, _optionList;\r
- for( i=0, l= _selectList.length; i<l; ++i){\r
- _select = _selectList[ i ];\r
- _name = _select.name;\r
- _optionList = _select.getElementsByTagName( 'option' )\r
- if( _name === 'comic[visible]'){\r
- _select.selectedIndex = 1;\r
- } else\r
- if( _name === 'comic[editable]'){\r
- _select.selectedIndex = 0;\r
- }\r
- }\r
- try {\r
- elmForm.submit();\r
- } catch( e){\r
- elmProgress.innerHTML = 'submit() err..';\r
- isUploading = false;\r
- setTimeout( clickCancel , 3000);\r
- return;\r
- }\r
- if( pettanr.ua.isIE){\r
- elmIframe.onreadystatechange = detectIframe;\r
- } else {\r
- elmIframe.onload = onIframeUpdate;\r
+ function copyAndSubmit(){\r
+ var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+ _input, _name;\r
+ for( var i=0, l= _inputList.length; i<l; ++i){\r
+ _input = _inputList[ i ];\r
+ _name = _input.name;\r
+ if( _name === 'comic[title]'){\r
+ _input.value = inputTitle.value();\r
+ } else\r
+ if( _name === 'comic[width]'){\r
+ _input.value = inputW.value();\r
+ } else\r
+ if( _name === 'comic[height]'){\r
+ _input.value = inputH.value();\r
}\r
- elmProgress.innerHTML = 'uploading..';\r
}\r
- /*\r
- * ie の 場合、readyState をチェック．\r
- */\r
- function detectIframe(){\r
- if ( elmIframe.readyState === 'complete') {\r
- elmIframe.onreadystatechange = new Function();\r
- elmIframe.onreadystatechange = null;\r
- onIframeUpdate();\r
- }\r
+ var _selectList = elmForm.getElementsByTagName( 'select' ),\r
+ _select, _optionList;\r
+ for( i=0, l= _selectList.length; i<l; ++i){\r
+ _select = _selectList[ i ];\r
+ _name = _select.name;\r
+ _optionList = _select.getElementsByTagName( 'option' )\r
+ if( _name === 'comic[visible]'){\r
+ _select.selectedIndex = comboboxVisible.selectIndex();\r
+ } else\r
+ if( _name === 'comic[editable]'){\r
+ _select.selectedIndex = comboboxEditable.selectIndex();\r
}\r
- function onIframeUpdate(){\r
- elmIframe.onload = null;\r
- ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
- elmIframe = null;\r
- elmProgress.innerHTML = 'success!';\r
- setTimeout( clickCancel , 1000);\r
- isUploading = false;\r
- }\r
- \r
- function clickCancel(){\r
- if( isUploading === true) return false;\r
- pettanr.overlay.hide();\r
- COMIC_CONSOLE.onClose();\r
- }\r
- function detectForm(){\r
- elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];\r
- if( elmForm){\r
- window.clearInterval( timer);\r
- timer = null;\r
- pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );\r
- elmProgress.innerHTML = 'create iframe';\r
}\r
+ try {\r
+ elmForm.submit();\r
+ } catch( e){\r
+ elmProgress.innerHTML = 'submit() err..';\r
+ isUploading = false;\r
+ setTimeout( clickCancel , 3000);\r
+ return;\r
+ }\r
+ if( pettanr.ua.isIE){\r
+ elmIframe.onreadystatechange = detectIframe;\r
+ } else {\r
+ elmIframe.onload = onIframeUpdate;\r
+ }\r
+ elmProgress.innerHTML = 'uploading..';\r
}\r
- function onCreateIframe( _iframe ){\r
- elmUploader.appendChild( _iframe );\r
- elmIframe = _iframe;\r
- elmForm.target = _iframe.name;\r
- elmProgress.innerHTML = '';\r
- }\r
- \r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();\r
- $( '#comic-console-post-button').click( clickOK );\r
- $( '#comic-console-cancel-button').click( clickCancel );\r
- \r
- var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
- inputTitle = CREATER( document.getElementById( 'comic-console-title'), null, ID);\r
- inputW = CREATER( document.getElementById( 'comic-console-width'), null, ID);\r
- inputH = CREATER( document.getElementById( 'comic-console-height'), null, ID);\r
- inputVisible = CREATER( document.getElementById( 'comic-console-visible'), null, ID);\r
- inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);\r
- \r
- delete COMIC_CONSOLE.init;\r
- },\r
- jqWrap: null,\r
- show: function( w, h){\r
- jqWrap.show();\r
-\r
- pettanr.overlay.show( COMIC_CONSOLE );\r
- \r
- inputTitle.start();\r
- \r
- elmUploader = document.createElement( 'div');\r
- elmUploader.id = "newcomic";\r
- elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';\r
- elmWrap.appendChild( elmUploader);\r
- \r
- var elmScript = document.createElement( 'script');\r
- elmScript.type = 'text\/javascript';\r
- elmScript.src = pettanr.CONST.CREATE_COMIC_JS;\r
- elmWrap.appendChild( elmScript);\r
- \r
- elmProgress.innerHTML = 'loading form.';\r
- \r
- if( timer === null){\r
- timer = window.setInterval( detectForm, 250);\r
+ /*\r
+ * ie の 場合、readyState をチェック．\r
+ */\r
+ function detectIframe(){\r
+ if ( elmIframe.readyState === 'complete') {\r
+ elmIframe.onreadystatechange = new Function();\r
+ elmIframe.onreadystatechange = null;\r
+ onIframeUpdate();\r
+ }\r
+ }\r
+ function onIframeUpdate(){\r
+ elmIframe.onload = null;\r
+ ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+ elmIframe = null;\r
+ elmProgress.innerHTML = 'success!';\r
+ setTimeout( clickCancel , 1000);\r
+ isUploading = false;\r
}\r
- \r
- COMIC_CONSOLE.onWindowResize( w, h);\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
+ \r
+ function clickCancel(){\r
+ if( isUploading === true) return false;\r
+ pettanr.comicConsole.shutdown();\r
+ }\r
+ function detectForm(){\r
+ elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];\r
+ if( elmForm ){\r
+ var selectList = elmForm.getElementsByTagName( 'select' ),\r
+ select,\r
+ j, m,\r
+ optionList, option;\r
+ for( var i=0, l=selectList.length; i<l; ++i ){\r
+ select = selectList[ i ];\r
+ optionList = select.getElementsByTagName( 'option' );\r
+ for( j=0, m=optionList.length; j<m; ++j ){\r
+ option = optionList[ j ];\r
+ if( select.name === 'comic[visible]' ){\r
+ comboboxVisible.createOption( option.innerHTML, option.value, option.selected );\r
+ } else\r
+ if( select.name === 'comic[editable]' ){\r
+ comboboxEditable.createOption( option.innerHTML, option.value, option.selected );\r
}\r
- );\r
- },\r
- onClose: function(){\r
- elmForm !== null && $( elmUploader ).remove();\r
- elmForm = null;\r
- isUploading = false;\r
- \r
- if( elmScript !== null ){\r
- document.body.removeChild( elmScript);\r
- elmScript = null; \r
- }\r
- if( timer !== null){\r
- window.clearInterval( timer);\r
- timer = null;\r
}\r
- \r
- jqWrap.hide();\r
- },\r
- ID: ID\r
- }\r
- })();\r
- \r
- return {\r
- init: function(){\r
- COMIC_CONSOLE.init();\r
- delete pettanr.comicConsole.init;\r
- },\r
- onOpen: function( _w, _h, _file){\r
- if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
- // _data = _file.read();\r
}\r
- },\r
- onClose: function(){\r
\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- },\r
- _quickAccessShow: function(){\r
- jqWindow = pettanr.jqWindow();\r
- var w = jqWindow.width(),\r
- h = jqWindow.height();\r
- COMIC_CONSOLE.show( w, h);\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );\r
+ elmProgress.innerHTML = 'create iframe';\r
}\r
}\r
-})();\r
+ function onCreateIframe( _iframe ){\r
+ elmUploader.appendChild( _iframe );\r
+ elmIframe = _iframe;\r
+ elmForm.target = _iframe.name;\r
+ elmProgress.innerHTML = '';\r
+ }\r
\r
-pettanr.uploadConsole = ( function(){\r
- var UPLOAD_CONSOLE = ( function(){\r
- var jqWrap, windowW, windowH,\r
- ID = 'uploadConsole',\r
- TARGET_FRAME_NAME = 'targetFrame',\r
- elmContainer = document.getElementById( 'uploader'),\r
- elmProgress = document.getElementById( 'upload-console-progress'),\r
- timer = null,\r
- elmScript = null,\r
- elmForm = null,\r
- elmFile = null,\r
- elmIframe = null,\r
- isUploading = false;\r
- /*\r
- * upload ボタンが押されたらまず iframe をつくる．
- */\r
- function clickOK(){\r
- if( !elmForm || !elmIframe || isUploading === true ) return false;\r
- if( elmFile.value.length === 0) return false;\r
- elmProgress.innerHTML = 'uploading.';\r
- isUploading = true;\r
- submit();\r
- return false;\r
+ /* grobal method */\r
+ this.rootElement = document.getElementById( 'comic-console-wrapper' );\r
+ this.displayName = ID;\r
+ this.ID = ID;\r
+ this.MIN_WIDTH = 320;\r
+ this.MIN_HEIGHT = 320;\r
+ this.init = function(){\r
+ jqWrap = $( '#comic-console-wrapper').hide();\r
+ \r
+ inputTitle = pettanr.form.createInputText( document.getElementById( 'comic-console-title'), null, ID);\r
+ inputW = pettanr.form.createInputText( document.getElementById( 'comic-console-width'), null, ID);\r
+ inputH = pettanr.form.createInputText( document.getElementById( 'comic-console-height'), null, ID);\r
+ comboboxVisible = pettanr.form.createCombobox( document.getElementById( 'comic-console-visible'), null, ID);\r
+ comboboxEditable = pettanr.form.createCombobox( document.getElementById( 'comic-console-editable'), null, ID);\r
+ buttonSubmit = pettanr.form.createButton( document.getElementById( 'comic-console-post-button'), clickOK, ID);\r
+ buttonCancel = pettanr.form.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel, ID);\r
+ \r
+ delete instance.init;\r
+ }\r
+ this.onOpen = function( w, h ){\r
+ instance.init && instance.init();\r
+ \r
+ jqWrap.show();\r
+ \r
+ inputTitle.focus();\r
+ \r
+ elmUploader = document.createElement( 'div' );\r
+ elmUploader.id = 'newcomic';\r
+ elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';\r
+ elmWrap.appendChild( elmUploader);\r
+ \r
+ var elmScript = document.createElement( 'script');\r
+ elmScript.type = 'text\/javascript';\r
+ elmScript.src = pettanr.CONST.CREATE_COMIC_JS;\r
+ elmWrap.appendChild( elmScript );\r
+ \r
+ elmProgress.innerHTML = 'loading form.';\r
+ \r
+ if( timer === null){\r
+ timer = window.setInterval( detectForm, 250);\r
}\r
- /*\r
- * form の target に iframe を指定したのち submit();
- */\r
- function submit(){\r
- try {\r
- elmForm.submit();\r
- } catch( e){\r
- elmProgress.innerHTML = 'submit() err..';\r
- isUploading = false;\r
- setTimeout( clickCancel , 3000);\r
- return;\r
- }\r
- \r
- if( pettanr.ua.isIE){\r
- elmIframe.onreadystatechange = detectIframe;\r
- } else {\r
- elmIframe.onload = onLoad;\r
- }\r
- elmProgress.innerHTML = 'uploading..';\r
- }\r
- /*\r
- * ie の 場合、readyState をチェック．
- */\r
- function detectIframe(){\r
- if ( elmIframe.readyState === 'complete') {\r
- elmIframe.onreadystatechange = new Function();\r
- elmIframe.onreadystatechange = null;\r
- onLoad();\r
- }\r
- }\r
- function onLoad(){\r
- elmIframe.onload = null;\r
- ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
- elmProgress.innerHTML = 'success!';\r
- setTimeout( clickCancel , 1000);\r
- isUploading = false;\r
- }\r
\r
- function detectForm(){\r
- elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
- if( elmForm){\r
- var _inputList = elmForm.getElementsByTagName( 'input' ),\r
- _input;\r
- for( var i=0, l= _inputList.length; i<l; ++i){\r
- _input = _inputList[ i ];\r
- if( _input.type === 'file'){\r
- elmFile = _input;\r
- }\r
- if( _input.type === 'submit'){\r
- _input.style.display = 'none';\r
- }\r
- }\r
- window.clearInterval( timer);\r
- timer = null;\r
- pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
- elmProgress.innerHTML = 'create iframe';\r
+ instance.onPaneResize( w, h );\r
+ }\r
+ this.onPaneResize = function( _windowW, _windowH){\r
+ jqWrap.css(\r
+ {\r
+ left: Math.floor( ( _windowW - jqWrap.width()) /2),\r
+ top: Math.floor( ( _windowH - jqWrap.height()) /2)\r
}\r
+ );\r
+ }\r
+ this.onClose = function(){\r
+ elmForm !== null && $( elmUploader ).remove();\r
+ elmForm = null;\r
+ isUploading = false;\r
+ \r
+ if( elmScript !== null ){\r
+ document.body.removeChild( elmScript);\r
+ elmScript = null; \r
}\r
- function onCreateIframe( _iframe ){\r
- elmContainer.appendChild( _iframe );\r
- elmIframe = _iframe;\r
- elmForm.target = _iframe.name;\r
- elmProgress.innerHTML = '';\r
- UPLOAD_CONSOLE.onWindowResize( windowW, windowH );\r
- }\r
- /*\r
- *
- */\r
- function clickCancel(){\r
- if( isUploading === true) return false;\r
- pettanr.overlay.hide();\r
- UPLOAD_CONSOLE.onClose();\r
- return false;\r
+ if( timer !== null){\r
+ window.clearInterval( timer);\r
+ timer = null;\r
}\r
\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();\r
- $( '#upload-console-post-button').click( clickOK );\r
- $( '#upload-console-cancel-button').click( clickCancel );\r
-\r
- delete UPLOAD_CONSOLE.init;\r
- },\r
- jqWrap: null,\r
- show: function( w, h){\r
- /*\r
- * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
- */ \r
- elmScript = document.createElement( 'script');\r
- elmScript.type = 'text\/javascript';\r
- elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
- document.body.appendChild( elmScript);\r
- \r
- jqWrap.show();\r
- pettanr.overlay.show( UPLOAD_CONSOLE );\r
-\r
- if( timer === null){\r
- timer = window.setInterval( detectForm, 250);\r
- }\r
- \r
- elmProgress.innerHTML = 'loading form.';\r
- \r
- UPLOAD_CONSOLE.onWindowResize( w, h);\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- windowW = _windowW;\r
- windowH = _windowH;\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
- }\r
- );\r
- },\r
- onClose: function(){\r
- elmForm !== null && $( elmContainer.children ).remove();\r
- elmForm = elmFile = elmIframe = null;\r
+ jqWrap.hide();\r
+ }\r
+});\r
+\r
+pettanr.uploadConsole = pettanr.view.registerApplication( function(){\r
+ var jqWrap, windowW, windowH,\r
+ ID = 'uploadConsole',\r
+ TARGET_FRAME_NAME = 'targetFrame',\r
+ elmContainer = document.getElementById( 'uploader'),\r
+ elmProgress = document.getElementById( 'upload-console-progress'),\r
+ timer = null,\r
+ elmScript = null,\r
+ elmForm = null,\r
+ elmFile = null,\r
+ elmIframe = null,\r
+ isUploading = false,\r
+ instance = this;\r
+ /*\r
+ * upload ボタンが押されたらまず iframe をつくる．\r
+ */\r
+ function clickOK(){\r
+ if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+ if( elmFile.value.length === 0) return false;\r
+ elmProgress.innerHTML = 'uploading.';\r
+ isUploading = true;\r
+ submit();\r
+ return false;\r
+ }\r
+ /*\r
+ * form の target に iframe を指定したのち submit();\r
+ */\r
+ function submit(){\r
+ try {\r
+ elmForm.submit();\r
+ } catch( e){\r
+ elmProgress.innerHTML = 'submit() err..';\r
isUploading = false;\r
- \r
- if( elmScript !== null ){\r
- document.body.removeChild( elmScript);\r
- elmScript = null; \r
- }\r
- if( timer !== null){\r
- window.clearInterval( timer);\r
- timer = null;\r
- }\r
- jqWrap.hide();\r
- },\r
- ID: ID\r
- }\r
- })();\r
- \r
- return {\r
- init: function(){\r
- UPLOAD_CONSOLE.init();\r
- delete pettanr.comicConsole.init;\r
- },\r
- onOpen: function( _w, _h, _file){\r
- if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
- // _data = _file.read();\r
+ setTimeout( clickCancel , 3000);\r
+ return;\r
}\r
- },\r
- onClose: function(){\r
\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- },\r
- _quickAccessShow: function(){\r
- jqWindow = pettanr.jqWindow();\r
- var w = jqWindow.width(),\r
- h = jqWindow.height();\r
- UPLOAD_CONSOLE.show( w, h);\r
- }\r
- }\r
-})();\r
-\r
-pettanr.panelConsole = ( function(){\r
- var PANEL_CONSOLE = ( function(){\r
- var jqWrap, windowW, windowH,\r
- ID = 'panelConsole',\r
- TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',\r
- elmContainer = document.getElementById( 'newpanel'),\r
- elmProgress = document.getElementById( 'panel-console-progress'),\r
- timer = null,\r
- elmScript = null,\r
- elmForm = null,\r
- elmIframe = null,\r
- isUploading = false;\r
- /*\r
- * upload ボタンが押されたらまず iframe をつくる．\r
- */\r
- function clickOK(){\r
- if( !elmForm || !elmIframe || isUploading === true ) return false;\r
- elmProgress.innerHTML = 'uploading.';\r
- isUploading = true;\r
- submit();\r
- return false;\r
+ if( pettanr.ua.isIE){\r
+ elmIframe.onreadystatechange = detectIframe;\r
+ } else {\r
+ elmIframe.onload = onLoad;\r
+ }\r
+ elmProgress.innerHTML = 'uploading..';\r
}\r
- /*\r
- * form の target に iframe を指定したのち submit();\r
- */\r
- function submit(){\r
- try {\r
- elmForm.submit();\r
- } catch( e){\r
- elmProgress.innerHTML = 'submit() err..';\r
+ /*\r
+ * ie の 場合、readyState をチェック．\r
+ */\r
+ function detectIframe(){\r
+ if ( elmIframe.readyState === 'complete') {\r
+ elmIframe.onreadystatechange = new Function();\r
+ elmIframe.onreadystatechange = null;\r
+ onLoad();\r
+ }\r
+ }\r
+ function onLoad(){\r
+ elmIframe.onload = null;\r
+ ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+ elmProgress.innerHTML = 'success!';\r
+ setTimeout( clickCancel , 1000);\r
isUploading = false;\r
- setTimeout( clickCancel , 3000);\r
- return;\r
}\r
- \r
- if( pettanr.ua.isIE){\r
- elmIframe.onreadystatechange = detectIframe;\r
- } else {\r
- elmIframe.onload = onLoad;\r
+ \r
+ function detectForm(){\r
+ elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
+ if( elmForm){\r
+ var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+ _input;\r
+ for( var i=0, l= _inputList.length; i<l; ++i){\r
+ _input = _inputList[ i ];\r
+ if( _input.type === 'file'){\r
+ elmFile = _input;\r
+ }\r
+ if( _input.type === 'submit'){\r
+ _input.style.display = 'none';\r
}\r
- elmProgress.innerHTML = 'uploading..';\r
}\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
+ elmProgress.innerHTML = 'create iframe';\r
+ }\r
+ }\r
+ function onCreateIframe( _iframe ){\r
+ elmContainer.appendChild( _iframe );\r
+ elmIframe = _iframe;\r
+ elmForm.target = _iframe.name;\r
+ elmProgress.innerHTML = '';\r
+ instance.onPaneResize( windowW, windowH );\r
+ }\r
+ /*\r
+ * \r
+ */\r
+ function clickCancel(){\r
+ if( isUploading === true) return false;\r
+ pettanr.uploadConsole.shutdown();\r
+ return false;\r
+ }\r
+\r
+ /* grobal method */\r
+ this.rootElement = document.getElementById( 'upload-console-wrapper' );\r
+ this.displayName = ID;\r
+ this.ID = ID;\r
+ this.MIN_WIDTH = 320;\r
+ this.MIN_HEIGHT = 320;\r
+ this.init = function(){\r
+ jqWrap = $( '#upload-console-wrapper').hide();\r
+ $( '#upload-console-post-button').click( clickOK );\r
+ $( '#upload-console-cancel-button').click( clickCancel );\r
+\r
+ delete instance.init;\r
+ }\r
+ this.onOpen = function( w, h){\r
+ instance.init && instance.init();\r
/*\r
- * ie の 場合、readyState をチェック．\r
- */\r
- function detectIframe(){\r
- if ( elmIframe.readyState === 'complete') {\r
- elmIframe.onreadystatechange = new Function();\r
- elmIframe.onreadystatechange = null;\r
- onLoad();\r
- }\r
- }\r
- function onLoad(){\r
- elmIframe.onload = null;\r
- ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
- elmProgress.innerHTML = 'success!';\r
- setTimeout( clickCancel , 1000);\r
- isUploading = false;\r
- }\r
+ * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．\r
+ */ \r
+ elmScript = document.createElement( 'script');\r
+ elmScript.type = 'text\/javascript';\r
+ elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
+ document.body.appendChild( elmScript);\r
\r
- function detectForm(){\r
- elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
- if( elmForm){\r
- var _inputList = elmForm.getElementsByTagName( 'input' ),\r
- _input;\r
- for( var i=0, l= _inputList.length; i<l; ++i){\r
- _input = _inputList[ i ];\r
- if( _input.type === 'submit'){\r
- _input.style.display = 'none';\r
- }\r
- }\r
- window.clearInterval( timer);\r
- timer = null;\r
- pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
- elmProgress.innerHTML = 'create iframe';\r
- }\r
+ jqWrap.show();\r
+\r
+ if( timer === null){\r
+ timer = window.setInterval( detectForm, 250);\r
}\r
- function onCreateIframe( _iframe ){\r
- elmContainer.appendChild( _iframe );\r
- elmIframe = _iframe;\r
- elmForm.target = _iframe.name;\r
- elmProgress.innerHTML = '';\r
- PANEL_CONSOLE.onWindowResize( windowW, windowH );\r
+ \r
+ elmProgress.innerHTML = 'loading form.';\r
+ \r
+ instance.onPaneResize( w, h);\r
+ }\r
+ this.onPaneResize = function( _windowW, _windowH){\r
+ windowW = _windowW;\r
+ windowH = _windowH;\r
+ jqWrap.css(\r
+ {\r
+ left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
+ top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
+ }\r
+ );\r
+ }\r
+ this.onClose = function(){\r
+ elmForm !== null && $( elmContainer.children ).remove();\r
+ elmForm = elmFile = elmIframe = null;\r
+ isUploading = false;\r
+ \r
+ if( elmScript !== null ){\r
+ document.body.removeChild( elmScript);\r
+ elmScript = null; \r
}\r
- /*\r
- * \r
- */\r
- function clickCancel(){\r
- if( isUploading === true) return false;\r
- pettanr.overlay.hide();\r
- PANEL_CONSOLE.onClose();\r
- return false;\r
+ if( timer !== null){\r
+ window.clearInterval( timer);\r
+ timer = null;\r
}\r
- \r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#panel-console-wrapper').hide();\r
- $( '#panel-console-post-button').click( clickOK );\r
- $( '#panel-console-cancel-button').click( clickCancel );\r
-\r
- delete PANEL_CONSOLE.init;\r
- },\r
- jqWrap: null,\r
- show: function( w, h){\r
- /*\r
- * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．\r
- */ \r
- elmScript = document.createElement( 'script');\r
- elmScript.type = 'text\/javascript';\r
- elmScript.src = pettanr.CONST.CREATE_PANEL_JS;\r
- document.body.appendChild( elmScript);\r
- \r
- jqWrap.show();\r
- pettanr.overlay.show( PANEL_CONSOLE );\r
-\r
- if( timer === null){\r
- timer = window.setInterval( detectForm, 250 );\r
- }\r
- \r
- elmProgress.innerHTML = 'loading form.';\r
- \r
- PANEL_CONSOLE.onWindowResize( w, h );\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- windowW = _windowW;\r
- windowH = _windowH;\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
- }\r
- );\r
- },\r
- onClose: function(){\r
- elmForm !== null && $( elmContainer.children ).remove();\r
- elmForm = elmIframe = null;\r
+ jqWrap.hide();\r
+ }\r
+});\r
+\r
+pettanr.panelConsole = pettanr.view.registerApplication( function(){\r
+ var jqWrap, windowW, windowH,\r
+ ID = 'panelConsole',\r
+ TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',\r
+ elmContainer = document.getElementById( 'newpanel'),\r
+ elmProgress = document.getElementById( 'panel-console-progress'),\r
+ timer = null,\r
+ elmScript = null,\r
+ elmForm = null,\r
+ elmIframe = null,\r
+ isUploading = false,\r
+ instance = this;\r
+ /*\r
+ * upload ボタンが押されたらまず iframe をつくる．\r
+ */\r
+ function clickOK(){\r
+ if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+ elmProgress.innerHTML = 'uploading.';\r
+ isUploading = true;\r
+ submit();\r
+ return false;\r
+ }\r
+ /*\r
+ * form の target に iframe を指定したのち submit();\r
+ */\r
+ function submit(){\r
+ try {\r
+ elmForm.submit();\r
+ } catch( e){\r
+ elmProgress.innerHTML = 'submit() err..';\r
isUploading = false;\r
- \r
- if( elmScript !== null ){\r
- document.body.removeChild( elmScript);\r
- elmScript = null; \r
- }\r
- if( timer !== null){\r
- window.clearInterval( timer);\r
- timer = null;\r
- }\r
- jqWrap.hide();\r
- },\r
- ID: ID\r
+ setTimeout( clickCancel , 3000);\r
+ return;\r
+ }\r
+ \r
+ if( pettanr.ua.isIE){\r
+ elmIframe.onreadystatechange = detectIframe;\r
+ } else {\r
+ elmIframe.onload = onLoad;\r
+ }\r
+ elmProgress.innerHTML = 'uploading..';\r
}\r
- })();\r
+ /*\r
+ * ie の 場合、readyState をチェック．\r
+ */\r
+ function detectIframe(){\r
+ if ( elmIframe.readyState === 'complete') {\r
+ elmIframe.onreadystatechange = new Function();\r
+ elmIframe.onreadystatechange = null;\r
+ onLoad();\r
+ }\r
+ }\r
+ function onLoad(){\r
+ elmIframe.onload = null;\r
+ ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+ elmProgress.innerHTML = 'success!';\r
+ setTimeout( clickCancel , 1000);\r
+ isUploading = false;\r
+ }\r
\r
- return {\r
- init: function(){\r
- PANEL_CONSOLE.init();\r
- delete pettanr.comicConsole.init;\r
- },\r
- onOpen: function( _w, _h, _file ){\r
- \r
- },\r
- onClose: function(){\r
- \r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- },\r
- _quickAccessShow: function(){\r
- jqWindow = pettanr.jqWindow();\r
- var w = jqWindow.width(),\r
- h = jqWindow.height();\r
- PANEL_CONSOLE.show( w, h);\r
+ function detectForm(){\r
+ elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
+ if( elmForm){\r
+ var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+ _input;\r
+ for( var i=0, l= _inputList.length; i<l; ++i){\r
+ _input = _inputList[ i ];\r
+ if( _input.type === 'submit'){\r
+ _input.style.display = 'none';\r
+ }\r
+ }\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
+ elmProgress.innerHTML = 'create iframe';\r
}\r
}\r
-})();\r
+ function onCreateIframe( _iframe ){\r
+ elmContainer.appendChild( _iframe );\r
+ elmIframe = _iframe;\r
+ elmForm.target = _iframe.name;\r
+ elmProgress.innerHTML = '';\r
+ instance.onPaneResize( windowW, windowH );\r
+ }\r
+ /*\r
+ * \r
+ */\r
+ function clickCancel(){\r
+ if( isUploading === true) return false;\r
+ pettanr.panelConsole.shutdown();\r
+ return false;\r
+ }\r
\r
-pettanr.artistConsole = ( function(){\r
- var ARTIST_CONSOLE = ( function(){\r
- var jqWrap, windowW, windowH,\r
- ID = 'artistConsole',\r
- TARGET_FRAME_NAME = 'targetFrameRegisterArtist',\r
- elmContainer = document.getElementById( 'register'),\r
- elmProgress = document.getElementById( 'artist-console-progress'),\r
- timer = null,\r
- elmScript = null,\r
- elmForm = null,\r
- elmIframe = null,\r
- isUploading = false;\r
+ /* grobal method */\r
+ this.rootElement = document.getElementById( 'panel-console-wrapper' );\r
+ this.displayName = ID;\r
+ this.ID = ID;\r
+ this.MIN_WIDTH = 320;\r
+ this.MIN_HEIGHT = 320;\r
+ this.init = function(){\r
+ jqWrap = $( '#panel-console-wrapper').hide();\r
+ $( '#panel-console-post-button').click( clickOK );\r
+ $( '#panel-console-cancel-button').click( clickCancel );\r
+\r
+ delete instance.init;\r
+ }\r
+ this.onOpen = function( w, h ){\r
+ instance.init && instance.init();\r
/*\r
- * upload ボタンが押されたらまず iframe をつくる．\r
- */\r
- function clickOK(){\r
- if( !elmForm || !elmIframe || isUploading === true ) return false;\r
- elmProgress.innerHTML = 'uploading.';\r
- isUploading = true;\r
- submit();\r
- return false;\r
+ * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．\r
+ */ \r
+ elmScript = document.createElement( 'script');\r
+ elmScript.type = 'text\/javascript';\r
+ elmScript.src = pettanr.CONST.CREATE_PANEL_JS;\r
+ document.body.appendChild( elmScript);\r
+ \r
+ jqWrap.show();\r
+\r
+ if( timer === null){\r
+ timer = window.setInterval( detectForm, 250 );\r
}\r
- /*\r
- * form の target に iframe を指定したのち submit();\r
- */\r
- function submit(){\r
- try {\r
- elmForm.submit();\r
- } catch( e){\r
- elmProgress.innerHTML = 'submit() err..';\r
+ \r
+ elmProgress.innerHTML = 'loading form.';\r
+ \r
+ instance.onPaneResize( w, h );\r
+ }\r
+ this.onPaneResize = function( _windowW, _windowH ){\r
+ windowW = _windowW;\r
+ windowH = _windowH;\r
+ jqWrap.css(\r
+ {\r
+ left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
+ top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
+ }\r
+ );\r
+ }\r
+ this.onClose = function(){\r
+ elmForm !== null && $( elmContainer.children ).remove();\r
+ elmForm = elmIframe = null;\r
+ isUploading = false;\r
+ \r
+ if( elmScript !== null ){\r
+ document.body.removeChild( elmScript);\r
+ elmScript = null; \r
+ }\r
+ if( timer !== null){\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ }\r
+ jqWrap.hide();\r
+ }\r
+});\r
+\r
+pettanr.artistConsole = pettanr.view.registerApplication( function(){\r
+ var jqWrap, windowW, windowH,\r
+ ID = 'artistConsole',\r
+ TARGET_FRAME_NAME = 'targetFrameRegisterArtist',\r
+ elmContainer = document.getElementById( 'register'),\r
+ elmProgress = document.getElementById( 'artist-console-progress'),\r
+ timer = null,\r
+ elmScript = null,\r
+ elmForm = null,\r
+ elmIframe = null,\r
+ isUploading = false,\r
+ instance = this;\r
+ /*\r
+ * upload ボタンが押されたらまず iframe をつくる．\r
+ */\r
+ function clickOK(){\r
+ if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+ elmProgress.innerHTML = 'uploading.';\r
+ isUploading = true;\r
+ submit();\r
+ return false;\r
+ }\r
+ /*\r
+ * form の target に iframe を指定したのち submit();\r
+ */\r
+ function submit(){\r
+ try {\r
+ elmForm.submit();\r
+ } catch( e){\r
+ elmProgress.innerHTML = 'submit() err..';\r
+ isUploading = false;\r
+ setTimeout( clickCancel , 3000);\r
+ return;\r
+ }\r
+ \r
+ if( pettanr.ua.isIE){\r
+ elmIframe.onreadystatechange = detectIframe;\r
+ } else {\r
+ elmIframe.onload = onLoad;\r
+ }\r
+ elmProgress.innerHTML = 'uploading..';\r
+ }\r
+ /*\r
+ * ie の 場合、readyState をチェック．\r
+ */\r
+ function detectIframe(){\r
+ if ( elmIframe.readyState === 'complete') {\r
+ elmIframe.onreadystatechange = new Function();\r
+ elmIframe.onreadystatechange = null;\r
+ onLoad();\r
+ }\r
+ }\r
+ function onLoad(){\r
+ elmIframe.onload = null;\r
+ ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+ elmProgress.innerHTML = 'success!';\r
+ setTimeout( clickCancel , 1000);\r
isUploading = false;\r
- setTimeout( clickCancel , 3000);\r
- return;\r
}\r
- \r
- if( pettanr.ua.isIE){\r
- elmIframe.onreadystatechange = detectIframe;\r
- } else {\r
- elmIframe.onload = onLoad;\r
+ \r
+ function detectForm(){\r
+ elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
+ if( elmForm){\r
+ var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+ _input;\r
+ for( var i=0, l= _inputList.length; i<l; ++i){\r
+ _input = _inputList[ i ];\r
+ if( _input.type === 'submit'){\r
+ _input.style.display = 'none';\r
}\r
- elmProgress.innerHTML = 'uploading..';\r
}\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
+ elmProgress.innerHTML = 'create iframe';\r
+ }\r
+ }\r
+ function onCreateIframe( _iframe ){\r
+ elmContainer.appendChild( _iframe );\r
+ elmIframe = _iframe;\r
+ elmForm.target = _iframe.name;\r
+ elmProgress.innerHTML = '';\r
+ instance.onPaneResize( windowW, windowH );\r
+ }\r
+ /*\r
+ * \r
+ */\r
+ function clickCancel(){\r
+ if( isUploading === true) return false;\r
+ pettanr.artistConsole.shutdown();\r
+ return false;\r
+ }\r
+\r
+ /* grobal method */\r
+ this.rootElement = document.getElementById( 'artist-console-wrapper' );\r
+ this.displayName = ID;\r
+ this.ID = ID;\r
+ this.MIN_WIDTH = 320;\r
+ this.MIN_HEIGHT = 320;\r
+ this.init = function(){\r
+ jqWrap = $( '#artist-console-wrapper').hide();\r
+ $( '#artist-console-post-button').click( clickOK );\r
+ $( '#artist-console-cancel-button').click( clickCancel );\r
+\r
+ delete instance.init;\r
+ }\r
+ this.onOpen = function( w, h ){\r
+ instance.init && instance.init();\r
/*\r
- * ie の 場合、readyState をチェック．\r
- */\r
- function detectIframe(){\r
- if ( elmIframe.readyState === 'complete') {\r
- elmIframe.onreadystatechange = new Function();\r
- elmIframe.onreadystatechange = null;\r
- onLoad();\r
- }\r
- }\r
- function onLoad(){\r
- elmIframe.onload = null;\r
- ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
- elmProgress.innerHTML = 'success!';\r
- setTimeout( clickCancel , 1000);\r
- isUploading = false;\r
- }\r
+ * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．\r
+ */ \r
+ elmScript = document.createElement( 'script' );\r
+ elmScript.type = 'text\/javascript';\r
+ elmScript.src = pettanr.CONST.REGISTER_ARTIST_JS;\r
+ document.body.appendChild( elmScript );\r
\r
- function detectForm(){\r
- elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
- if( elmForm){\r
- var _inputList = elmForm.getElementsByTagName( 'input' ),\r
- _input;\r
- for( var i=0, l= _inputList.length; i<l; ++i){\r
- _input = _inputList[ i ];\r
- if( _input.type === 'submit'){\r
- _input.style.display = 'none';\r
- }\r
- }\r
- window.clearInterval( timer);\r
- timer = null;\r
- pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
- elmProgress.innerHTML = 'create iframe';\r
+ jqWrap.show();\r
+\r
+ if( timer === null){\r
+ timer = window.setInterval( detectForm, 250 );\r
+ }\r
+ \r
+ elmProgress.innerHTML = 'loading form.';\r
+ \r
+ instance.onPaneResize( w, h );\r
+ }\r
+ this.onPaneResize = function( _windowW, _windowH ){\r
+ windowW = _windowW;\r
+ windowH = _windowH;\r
+ jqWrap.css(\r
+ {\r
+ left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
+ top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
}\r
+ );\r
+ }\r
+ this.onClose = function(){\r
+ elmForm !== null && $( elmContainer.children ).remove();\r
+ elmForm = elmIframe = null;\r
+ isUploading = false;\r
+ \r
+ if( elmScript !== null ){\r
+ document.body.removeChild( elmScript);\r
+ elmScript = null; \r
}\r
- function onCreateIframe( _iframe ){\r
- elmContainer.appendChild( _iframe );\r
- elmIframe = _iframe;\r
- elmForm.target = _iframe.name;\r
- elmProgress.innerHTML = '';\r
- ARTIST_CONSOLE.onWindowResize( windowW, windowH );\r
+ if( timer !== null){\r
+ window.clearInterval( timer);\r
+ timer = null;\r
}\r
- /*\r
- * \r
- */\r
- function clickCancel(){\r
- if( isUploading === true) return false;\r
- pettanr.overlay.hide();\r
- ARTIST_CONSOLE.onClose();\r
- return false;\r
+ jqWrap.hide();\r
+ }\r
+});\r
+\r
+pettanr.outputConsole = pettanr.view.registerApplication( function(){\r
+ var jqWrap, jqOutputArea,\r
+ ID = 'outputConsole',\r
+ timing = 0,\r
+ instance = this;\r
+ //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
+ \r
+ function clickOK(){\r
+ pettanr.outputConsole.shutdown();\r
+ }\r
+\r
+ function getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l ){\r
+ while( timing < l * 2){\r
+ for(var i=0; i<l; ++i){\r
+ if( timing === PANEL_ELEMENT_ARRAY[ i ].timing ){\r
+ ++timing;\r
+ return PANEL_ELEMENT_ARRAY[ i ];\r
+ }\r
+ }\r
+ ++timing;\r
}\r
+ return null;\r
+ }\r
+\r
+ function getAsHtmlString( isAbsoluteUrl, isXHTML, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){\r
+ timing = 0;\r
\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#artist-console-wrapper').hide();\r
- $( '#artist-console-post-button').click( clickOK );\r
- $( '#artist-console-cancel-button').click( clickCancel );\r
+ var HTML_ARRAY = [],\r
+ l = PANEL_ELEMENT_ARRAY.length,\r
+ _panelElement;\r
+\r
+ while( HTML_ARRAY.length < l ){\r
+ _panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l );\r
+ if( _panelElement === null) break;\r
+ HTML_ARRAY.push( panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ));\r
+ }\r
+\r
+ HTML_ARRAY.unshift(\r
+ [\r
+ '<div class="panel" ',\r
+ 'style="',\r
+ 'height:', panelH, 'px;',\r
+ 'background-color:', ';',\r
+ '"',\r
+ '>'\r
+ ].join( '')\r
+ ); \r
+ HTML_ARRAY.push( '</div>');\r
+ \r
+ return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);\r
+ }\r
\r
- delete ARTIST_CONSOLE.init;\r
- },\r
- jqWrap: null,\r
- show: function( w, h){\r
- /*\r
- * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．\r
- */ \r
- elmScript = document.createElement( 'script');\r
- elmScript.type = 'text\/javascript';\r
- elmScript.src = pettanr.CONST.REGISTER_ARTIST_JS;\r
- document.body.appendChild( elmScript);\r
- \r
- jqWrap.show();\r
- pettanr.overlay.show( ARTIST_CONSOLE );\r
+ function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){\r
+ var url;\r
+ if( _panelElement.type === 0 ){\r
+ url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' );\r
+ return [\r
+ '<img ',\r
+ 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',\r
+ 'width="', _panelElement.w, '" ',\r
+ 'height="', _panelElement.h, '" ',\r
+ 'style="',\r
+ 'left:', _panelElement.x, 'px;',\r
+ 'top:', _panelElement.y, 'px;',\r
+ 'z-index:', _panelElement.z, ';',\r
+ '"',\r
+ isXHTML !== true ? '>' : ' \/>'\r
+ ].join( ''); \r
+ } else {\r
+ url = _panelElement.getBalloonURL();\r
+ return [\r
+ '<img ',\r
+ 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',\r
+ 'width="', _panelElement.w, '" ',\r
+ 'height="', _panelElement.h, '" ',\r
+ 'style="', \r
+ 'left:', _panelElement.x, 'px;',\r
+ 'top:', _panelElement.y, 'px;',\r
+ 'z-index:', _panelElement.z, ';',\r
+ '"',\r
+ isXHTML !== true ? '>' : ' \/>',\r
+ pettanr.LINE_FEED_CODE_TEXTAREA,\r
+ '<div class="balloon" style="',\r
+ 'left:', _panelElement.x, 'px;',\r
+ 'top:', _panelElement.y, 'px;',\r
+ 'width:', _panelElement.w, 'px;',\r
+ 'height:', _panelElement.h, 'px;',\r
+ 'z-index:', _panelElement.z,\r
+ '"><span>', _panelElement.text(), '<\/span>', '<\/div>'\r
+ \r
+ ].join( ''); \r
+ }\r
+ }\r
\r
- if( timer === null){\r
- timer = window.setInterval( detectForm, 250 );\r
- }\r
- \r
- elmProgress.innerHTML = 'loading form.';\r
- \r
- ARTIST_CONSOLE.onWindowResize( w, h );\r
- },\r
- onWindowResize: function( _windowW, _windowH ){\r
- windowW = _windowW;\r
- windowH = _windowH;\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
- }\r
- );\r
- },\r
- onClose: function(){\r
- elmForm !== null && $( elmContainer.children ).remove();\r
- elmForm = elmIframe = null;\r
- isUploading = false;\r
- \r
- if( elmScript !== null ){\r
- document.body.removeChild( elmScript);\r
- elmScript = null; \r
- }\r
- if( timer !== null){\r
- window.clearInterval( timer);\r
- timer = null;\r
- }\r
- jqWrap.hide();\r
- },\r
- ID: ID\r
+ function getAsJsonString( comicID, panelID, panelTimming, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){\r
+ timing = 0;\r
+ \r
+ var JSON_STRING_ARRAY = [],\r
+ IMAGE_ARRAY = [],\r
+ BALLOON_ARRAY = [],\r
+ l = PANEL_ELEMENT_ARRAY.length,\r
+ _panelElement,\r
+ cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+\r
+ while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l){\r
+ _panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l );\r
+ if( _panelElement === null) break;\r
+ _panelElement.type === 0 ? \r
+ IMAGE_ARRAY.push( imageToJson( _panelElement )) :\r
+ BALLOON_ARRAY.push( balloonToJson( _panelElement ) );\r
+ }\r
+ return [\r
+ '{', cr,\r
+ '"panel": {', cr,\r
+ '"id": ', panelID, ',', cr,\r
+ '"border": ', border, ',', cr,\r
+ '"comic_id": ', comicID, ',', cr,\r
+ '"resource_picture_id": 1,', cr,\r
+ '"x": ', 0, ',', cr,\r
+ '"y": ', 0, ',', cr,\r
+ '"z": ', 0, ',', cr,\r
+ panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',\r
+ '"width": ', panelW, ',', cr,\r
+ '"height": ', panelH, ',', cr,\r
+ '"panel_pictures_attributes": {', cr,\r
+ IMAGE_ARRAY.join( ',' + cr ), cr,\r
+ '},', cr,\r
+ '"balloons_attributes": {', cr,\r
+ BALLOON_ARRAY.join( ',' + cr ), cr,\r
+ '}', cr,\r
+ '}', cr,\r
+ '}'\r
+ ].join( '' );\r
+ }\r
+ function imageToJson( _imageElement ){\r
+ var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+ return [\r
+ '"new', timing, '": {', cr,\r
+ '"resource_picture_id": ', _imageElement.resourcePicture().id, ',', cr,\r
+ '"x": ', _imageElement.x, ',', cr,\r
+ '"y": ', _imageElement.y, ',', cr,\r
+ '"z": ', _imageElement.z, ',', cr,\r
+ '"width": ', _imageElement.flipH() * _imageElement.w, ',', cr,\r
+ '"height": ', _imageElement.flipV() * _imageElement.h, ',', cr,\r
+ '"t": ', timing, cr,\r
+ '}'\r
+ ].join( '');\r
+ }\r
+\r
+ function balloonToJson( _textElement ){\r
+ var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+ return [\r
+ '"new', timing, '": {', cr,\r
+ '"balloon_template_id": ', 1, ',', cr,\r
+ '"system_picture_id": ', 1, ',', cr,\r
+ '"size": ', 1, ',', cr,\r
+ '"tail": ', _textElement.angle(), ',', cr,\r
+ '"x": ', _textElement.x, ',', cr,\r
+ '"y": ', _textElement.y, ',', cr,\r
+ '"z": ', _textElement.z, ',', cr,\r
+ '"t": ', timing, ',', cr,\r
+ '"width": ', _textElement.w, ',', cr,\r
+ '"height": ', _textElement.h, ',', cr,\r
+ '"speaches_attributes": {', cr,\r
+ '"newf', timing, '": {', cr,\r
+ '"content": "', _textElement.text(), '",', cr,\r
+ '"x": ', _textElement.x, ',', cr,\r
+ '"y": ', _textElement.y, ',', cr,\r
+ '"t": ', timing, ',', cr,\r
+ '"width": ', _textElement.w, ',', cr,\r
+ '"height": ', _textElement.h, cr,\r
+ '}', cr,\r
+ '}', cr,\r
+ '}'\r
+ ].join( '');\r
}\r
- })();\r
+\r
+\r
+ /* grobal method */\r
+ this.rootElement = document.getElementById( 'output-console-wrapper' );\r
+ this.displayName = ID;\r
+ this.ID = ID;\r
\r
- return {\r
- init: function(){\r
- ARTIST_CONSOLE.init();\r
- delete pettanr.comicConsole.init;\r
- },\r
- onOpen: function( _w, _h, _option ){\r
- \r
- },\r
- onClose: function(){\r
- \r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- },\r
- _quickAccessShow: function(){\r
- jqWindow = pettanr.jqWindow();\r
- var w = jqWindow.width(),\r
- h = jqWindow.height();\r
- ARTIST_CONSOLE.show( w, h);\r
+ this.MIN_WIDTH = 320;\r
+ this.MIN_HEIGHT = 320;\r
+ this.init = function(){\r
+ jqWrap = $( '#output-console-wrapper').hide();\r
+ jqOutputArea = $( '#output-area');\r
+ delete instance.init;\r
+ }\r
+ this.onOpen = function( _w, _h, _dataType, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements ){\r
+ instance.init && instance.init();\r
+ \r
+ jqWrap.show();\r
+ instance.onPaneResize( _w, _h );\r
+ var text;\r
+ if( _dataType === pettanr.outputConsole.JSON ){\r
+ text = getAsJsonString( _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements );\r
+ } else {\r
+ text = getAsHtmlString( false, false, _panelW, _panelH, _borderSize, _panelElements );\r
}\r
+ jqOutputArea.val( text ).focus();\r
+ }\r
+ this.onPaneResize = function( _w, _h){\r
+ jqWrap.css(\r
+ {\r
+ left: Math.floor( ( _w -jqWrap.width()) /2),\r
+ top: Math.floor( ( _h -jqWrap.height()) /2)\r
+ }\r
+ );\r
+ }\r
+ this.onClose = function(){\r
+ jqWrap.hide();\r
+ jqOutputArea.val('');\r
}\r
-})();
\ No newline at end of file
+});\r
+pettanr.outputConsole.JSON = 0;\r
+pettanr.outputConsole.HTML = 1;\r
+pettanr.outputConsole.XML = 2;\r
+pettanr.outputConsole.SHORT_URL = 3;\r
+pettanr.outputConsole.MOVERBLE_TYPE = 4;\r
+pettanr.outputConsole.BLOGGER = 5;\r
-$("#newcomic").html("<form accept-charset=\"UTF-8\" action=\"/comics\" class=\"new_comic\" id=\"new_comic\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"
4SZnMe0yBUXVlpJ6MZ/2jKZns64P6XtmJ1KUeuNQcY0=\" /><\/div>\n\n <div class=\"field\">\n <label for=\"comic_title\">Title<\/label><br />\n <input id=\"comic_title\" name=\"comic[title]\" size=\"30\" type=\"text\" />\n <\/div>\n <div class=\"field\">\n <label for=\"comic_width\">Width<\/label><br />\n <input id=\"comic_width\" name=\"comic[width]\" size=\"30\" type=\"number\" />\n <\/div>\n <div class=\"field\">\n <label for=\"comic_height\">Height<\/label><br />\n <input id=\"comic_height\" name=\"comic[height]\" size=\"30\" type=\"number\" />\n <\/div>\n <div class=\"field\">\n <label for=\"comic_visible\">Visible<\/label><br />\n <select id=\"comic_visible\" name=\"comic[visible]\"><option value=\"0\" selected=\"selected\">only me<\/option>\n<option value=\"3\">everyone<\/option><\/select>\n <\/div>\n <div class=\"field\">\n <label for=\"comic_editable\">Editable<\/label><br />\n <select id=\"comic_editable\" name=\"comic[editable]\"><option value=\"0\" selected=\"selected\">only me<\/option>\n<option value=\"3\">everyone<\/option><\/select>\n <\/div>\n\n <div class=\"actions\">\n <input name=\"commit\" type=\"submit\" value=\"Create Comic\" />\n <\/div>\n<\/form>");
\r+$("#newcomic").html("<form accept-charset=\"UTF-8\" action=\"/comics\" class=\"new_comic\" id=\"new_comic\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"
ZzG8yZTOuJw403o7g1M33i8EnWvg+fSBXdTTagvsUtg=\" /><\/div>\n\n <div class=\"field\">\n <label for=\"comic_title\">Title<\/label><br />\n <input id=\"comic_title\" name=\"comic[title]\" size=\"30\" type=\"text\" />\n <\/div>\n <div class=\"field\">\n <label for=\"comic_width\">Width<\/label><br />\n <input id=\"comic_width\" name=\"comic[width]\" size=\"30\" type=\"number\" />\n <\/div>\n <div class=\"field\">\n <label for=\"comic_height\">Height<\/label><br />\n <input id=\"comic_height\" name=\"comic[height]\" size=\"30\" type=\"number\" />\n <\/div>\n <div class=\"field\">\n <label for=\"comic_visible\">Visible<\/label><br />\n <select id=\"comic_visible\" name=\"comic[visible]\"><option value=\"0\" selected=\"selected\">only me<\/option>\n<option value=\"3\">everyone<\/option><\/select>\n <\/div>\n <div class=\"field\">\n <label for=\"comic_editable\">Editable<\/label><br />\n <select id=\"comic_editable\" name=\"comic[editable]\"><option value=\"0\" selected=\"selected\">only me<\/option>\n<option value=\"3\">everyone<\/option><\/select>\n <\/div>\n\n <div class=\"actions\">\n <input name=\"commit\" type=\"submit\" value=\"Create Comic\" />\n <\/div>\n<\/form>");
\r
* \r
* common.css\r
* \r
- * version 0.4.1\r
+ * version 0.4.23\r
*\r
*/\r
\r
\r
/* Reset\r
--------------------------------------------------------------------------------------*/\r
- html, body {\r
- margin: 0;\r
- padding: 0;\r
- }\r
-\r
-/* Reset\r
---------------------------------------------------------------------------------------*/\r
/*\r
Copyright (c) 2009, Yahoo! Inc. All rights reserved.\r
Code licensed under the BSD License:\r
\r
/* http://e2designer.seesaa.net/article/152168876.html */\r
/* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
- pre {\r
+ pre,\r
+ .break-word {\r
white-space: pre; /* CSS 2.0 */\r
white-space: pre-wrap; /* CSS 2.1 */\r
white-space: pre-line; /* CSS 3.0 */\r
line-height: 1.4em;\r
margin: 0 2px 1em;\r
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);\r
+ -moz-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);\r
+ -webkit-text-shadow:1px 1px 3px rgba(0, 0, 0, 0.6);\r
}\r
\r
h3 {\r
-moz-border-radius: 3px;\r
-webkit-border-radius: 3px;\r
}\r
+ .button-has-focus {\r
+ border-color: #4D90FE;\r
+ }\r
\r
/* Loading\r
--------------------------------------------------------------------------------------*/\r
font-size: 1.4em;\r
font-weight: normal;\r
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);\r
+ -moz-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);\r
+ -webkit-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);\r
} \r
\r
/* base-content-width\r
margin: 0 auto;\r
}\r
\r
+/* breadcrumb\r
+--------------------------------------------------------------------------------------*/\r
+ #breadcrumb {\r
+ font-size: 12px;\r
+ color: #666;\r
+ margin: 0 0 10px 20px;\r
+ line-height: 1.2em;\r
+ text-align: right;\r
+ }\r
/* main\r
--------------------------------------------------------------------------------------*/\r
#main {\r
left: 0;\r
top: 0;\r
}\r
+ .pettanr-comic-panel img {\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ }\r
.pettanr-comic-balloon .pettanr-comic-speach {\r
position: absolute;\r
top: 0;\r
text-align: center;\r
vertical-align: middle;\r
}\r
+ .pettanr-comic-speach td {\r
+ padding: 16.66%;\r
+ }\r
.pettanr-comic-speach {\r
table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */\r
}
\ No newline at end of file
* \r
* work.css\r
* \r
- * version 0.4.1\r
+ * version 0.4.23\r
*\r
*/\r
html, body {\r
\r
/* View Container\r
--------------------------------------------------------------------------------------*/ \r
- #editor {\r
- display: none;\r
- position: absolute;\r
- left: 0;\r
- top: 0;\r
- width: 100%;\r
- height: 100%;\r
- }\r
.console-page {\r
- display: none;\r
+\r
}\r
\r
+ \r
+\r
/*--------------------------------------------------------------------------------------\r
* \r
* overlay\r
#comic-console-title-value { width: 180px; text-align:left;}\r
#comic-console-height-value {}\r
#comic-console-width-value {}\r
- #comic-console-editable-value {}\r
- #comic-console-visible-value {}\r
+ #comic-console-editable-value,\r
+ #comic-console-visible-value {\r
+ width: 180px;\r
+ text-align: center;\r
+ }\r
\r
#comic-console-button-container {\r
margin-top: 20px;\r
* \r
-------------------------------------------------------------------------------------*/\r
#editor {\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ width: 100%;\r
+ height: 100%;\r
overflow: hidden;\r
background-color: #f5f5f5;\r
}\r
\r
/* Image Group\r
--------------------------------------------------------------------------------------*/\r
- #image-gruop-wrapper {\r
+ #image-group-wrapper {\r
position: absolute;\r
top: 0;\r
left: 0;\r
}\r
- #image-icon-container {\r
+ #image-group-icon-container {\r
position: absolute;\r
top: 0;\r
left: 0;\r
border: #fff solid;\r
border-width: 0; \r
}\r
- #image-gruop-button {\r
- width: 200px;\r
- position: absolute;\r
- left: 0;\r
- bottom: -40px;\r
- _bottom: 0;\r
+ #image-group-name {\r
+ padding: 20px 0 10px 20px;\r
+ border-bottom: 1px solid #eee;\r
+ color: #eee;\r
+ font-size: 20px;\r
+ line-height: 20px;\r
+ font-weight: bold;\r
+ text-shadow: 1px 1px 3px #ccc;\r
+ -moz-text-shadow: 1px 1px 3px #ccc;\r
+ -webkit-text-shadow:1px 1px 3px #ccc;\r
+ box-shadow: 0 4px 9px #333;\r
+ -moz-box-shadow: 0 4px 9px #333;\r
+ -webkit-box-shadow: 0 4px 9px #333;\r
}\r
- .image-gruop-item {\r
- width: 150px;\r
- height: 200px;\r
- position: absolute;\r
- top: 0;\r
- left: 0;\r
- text-align: center;\r
+ #image-group-button {\r
+ width: 200px;\r
+ position: absolute;\r
+ left: 0;\r
+ bottom: -40px;\r
+ _bottom: 0;\r
}\r
- .image-gruop-item .reversible-image-container {\r
- width: 150px;\r
- height: 200px;\r
+ .image-group-item {\r
+ width: 150px;\r
+ height: 200px;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ text-align: center;\r
}\r
- .image-gruop-item .reversible-image-container img {\r
- width: 100%;\r
- height: 100%;\r
+ .image-group-item .reversible-image-container {\r
+ width: 150px;\r
+ height: 200px;\r
}\r
- .image-gruop-item-title {\r
- position: absolute;\r
- bottom: 0;\r
- left: 0;\r
- text-align: center;\r
- width: 100%;\r
- height: 30px;\r
+ .image-group-item .reversible-image-container img {\r
+ width: 100%;\r
+ height: 100%;\r
+ }\r
+ .image-group-item-title {\r
+ position: absolute;\r
+ bottom: 0;\r
+ left: 0;\r
+ text-align: center;\r
+ width: 100%;\r
+ height: 30px;\r
}\r
\r
\r
color: #333;\r
text-decoration: none;\r
display: block;\r
+ zoom: 1;\r
outline: 0;\r
background-color: #fff;\r
}\r
margin: 0;\r
outline: 0;\r
}\r
- \r
+ \r
+ /* combobox\r
+ --------------------------------------------------------------------------------------*/ \r
+ .combobox {\r
+ display: inline-block;\r
+ color: #333;\r
+ }\r
+ .combobox a,\r
+ .combobox a:link,\r
+ .combobox a:visited,\r
+ .combobox a:hover,\r
+ .combobox a:active {\r
+ border: 1px solid #ccc;\r
+ font-size: 14px;\r
+ line-height: 16px; \r
+ padding: 3px;\r
+ color: #333;\r
+ text-decoration: none;\r
+ display: block;\r
+ zoom: 1;\r
+ outline: 0;\r
+ background-color: #fff;\r
+ position: relative;\r
+ }\r
+ .combobox a:hover {\r
+ background-color: #ccf;\r
+ }\r
+ .combobox a:active {\r
+ outline: 0;\r
+ }\r
+ .combobox-toggle {\r
+ position: absolute;\r
+ right: 5px;\r
+ top: 0;\r
+ display: block;\r
+ font-family: Arial,Helvetica,sans-serif;\r
+ font-size: 12px;\r
+ line-height: 20px;\r
+ color: #999;\r
+ }\r
+ .combobox a.combobox-has-focus .combobox-toggle {\r
+ color: #4D90FE;\r
+ } \r
+ \r
+ \r
+ .option-container {\r
+ position: absolute;\r
+ list-style: none;\r
+ top: 30px;\r
+ width: 200px;\r
+ margin: 0;\r
+ padding: 0;\r
+ background-color: #fff;\r
+ opacity: 0.9;\r
+ -moz-opacity: 0.9;\r
+ -khtml-opacity: 0.9;\r
+ color: #666;\r
+ border: 1px solid #ccc;\r
+ box-shadow: 1px 4px 9px #333;\r
+ -moz-box-shadow: 1px 4px 9px #333;\r
+ -webkit-box-shadow: 1px 4px 9px #333;\r
+ filter: alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
+ -ms-filter: alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
+ }\r
+ .option-container li {\r
+ display: block;\r
+ cursor: pointer;\r
+ height: 30px;\r
+ line-height: 30px;\r
+ }\r
+ .option-container a,\r
+ .option-container a:link,\r
+ .option-container a:visited {\r
+ color: #666;\r
+ position: relative;\r
+ display: block;\r
+ padding: 0 10px;\r
+ height: 30px;\r
+ line-height: 30px;\r
+ *cursor: pointer;\r
+ }\r
+ .current-option a,\r
+ .current-option a:link,\r
+ .current-option a:visited {\r
+ color: #e6e6ef;\r
+ background-color: #66f;\r
+ text-decoration: none;\r
+ }\r
+ .option-container a:hover {\r
+ color: #333;\r
+ background-color: #ccf;\r
+ text-decoration: none;\r
+ *cursor: pointer;\r
+ }\r
\r
/* Information Window\r
--------------------------------------------------------------------------------------*/\r
/* Finder Icon\r
--------------------------------------------------------------------------------------*/\r
.finder-icon {\r
- position: absolute;\r
- top: 0;\r
- left: 0;\r
+ position: relative;\r
height: 74px;\r
- width: 100%;\r
border-bottom: 1px solid #ccc;\r
clear: both;\r
+ overflow: hidden; /* for webkit */\r
+ }\r
+ .finder-icon:hover {\r
+ background-color: #eee;\r
+ cursor: pointer;\r
}\r
- .finder-icon a,\r
- .finder-icon a:link,\r
- .finder-icon a:visited,\r
- .finder-icon a:active {\r
- display: block;\r
+ .fnder-icon-modern .finder-icon-handle,\r
+ .fnder-icon-modern .finder-icon-thumbnail,\r
+ .fnder-icon-modern .finder-icon-filename,\r
+ .fnder-icon-modern .finder-icon-summary {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ line-height: 1.3em;\r
+ }\r
+ \r
+ .finder-icon-handle {\r
+ width: 20px;\r
+ height: 74px;\r
+ }\r
+ \r
+ .finder-icon-thumbnail {\r
+ width: 64px;\r
height: 74px;\r
- text-decoration: none;\r
- *background: #fff;\r
+ cursor: pointer;\r
+ background-repeat: no-repeat;\r
+ background-position: 50% 50%;\r
+ background-image: url('../images/sprite.gif');\r
}\r
- .finder-icon a:hover {\r
- background-color: #eee;\r
+ \r
+ .finder-icon .file-type-folder {\r
+ background-position: 0 -75px;\r
}\r
- .finder-icon-handle,\r
- .finder-icon-thumbnail,\r
- .finder-icon-filename,\r
- .finder-icon-summary {\r
- display: table-cell;\r
- vertical-align: middle;\r
- height: 74px;\r
- *height: 64px;\r
- line-height: 1.3em;\r
- }\r
- /* IE 6 */\r
- .finder-icon-handle,\r
- .finder-icon-thumbnail,\r
- .finder-icon-filename,\r
- .finder-icon-summary {\r
- *display: inline;\r
- zoom: 1;\r
- }\r
- /*\*//*/\r
- * html .finder-icon span {\r
- display: inline-block;\r
- }\r
- /**/\r
- \r
- .finder-icon-handle {\r
- width: 20px;\r
- }\r
- \r
- .finder-icon-thumbnail {\r
- width: 64px;\r
- cursor: pointer;\r
- background-repeat: no-repeat;\r
- }\r
- .finder-icon-thumbnail {\r
- background-image: url('../images/sprite.gif');\r
+ .finder-icon .file-type-album {\r
+ }\r
+ .finder-icon .file-type-author {\r
+ background-position: -70px -75px;\r
+ } \r
+ .finder-icon .file-type-comic {\r
+ background-position: 0 -145px;\r
+ }\r
+ .finder-icon .file-type-cabinet {\r
+ background-position: -70px -145px;\r
+ }\r
+ .finder-icon .file-type-panel {\r
+ background-position: 0 -215px;\r
+ }\r
+ .finder-icon .file-type-artist {\r
+ background-position: -70px -215px;\r
+ }\r
+ .finder-icon .file-type-balloon {\r
+ background-position: 0 -285px;\r
+ }\r
+ .finder-icon .file-type-charactor {\r
+ background-position: -70px -285px;\r
+ } \r
+ .has-thumbnail {\r
+ }\r
+ .fnder-icon-modern .finder-icon-filename {\r
+ width: 200px;\r
+ padding: 5px 10px;\r
+ height: 64px;\r
+ font-weight: bold;\r
+ color: #333;\r
+ }\r
+ .fnder-icon-modern .finder-icon-summary {\r
+ width: 300px;\r
+ padding: 5px 10px;\r
+ height: 64px;\r
+ color: #666;\r
+ }\r
+\r
+ /* Finder Icon ie7-\r
+ --------------------------------------------------------------------------------------*/\r
+ .finder-icon a,\r
+ .finder-icon a:link,\r
+ .finder-icon a:visited,\r
+ .finder-icon a:active {\r
+ display: block;\r
+ height: 74px;\r
+ text-decoration: none;\r
+ zoom: 1;\r
+ cursor: pointer;\r
+ }\r
+ .finder-icon a:hover {\r
+ _background-color: #eee;\r
+ color: #333;\r
+ }\r
+ .fnder-icon-ie7 .finder-icon-handle,\r
+ .fnder-icon-ie7 .finder-icon-thumbnail {\r
+ zoom: 1;\r
+ line-height: 1.3em;\r
+ }\r
+ .finder-icon-cell {\r
+ display: inline;\r
+ zoom: 1;\r
+ }\r
+ .finder-icon-vertical-middle-outer {\r
+ display: block;\r
+ height: 74px;\r
+ position: relative;\r
}\r
- \r
- .finder-icon .file-type-folder {\r
- background-position: 0 -75px;\r
- }\r
- .finder-icon .file-type-album {\r
- }\r
- .finder-icon .file-type-author {\r
- background-position: -70px -75px;\r
- } \r
- .finder-icon .file-type-comic {\r
- background-position: 0 -145px;\r
- }\r
- .finder-icon .file-type-cabinet {\r
- background-position: -70px -145px;\r
- }\r
- .finder-icon .file-type-panel {\r
- background-position: 0 -215px;\r
- }\r
- .finder-icon .file-type-artist {\r
- background-position: -70px -215px;\r
- }\r
- .finder-icon .file-type-balloon {\r
- background-position: 0 -285px;\r
- }\r
- .finder-icon .file-type-charactor {\r
- background-position: -70px -285px;\r
- } \r
- .has-thumbnail {\r
- }\r
- /*\r
- * http://www.iconfinder.com/icondetails/18336/64/folder_image_photo_icon\r
- * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon\r
- * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon\r
- * http://www.iconfinder.com/icondetails/3659/64/broken_file_icon\r
- * http://www.iconfinder.com/icondetails/44733/64/address_book_icon
- */\r
- .finder-icon-filename {\r
+ .finder-icon-ie-filename .finder-icon-vertical-middle-outer {\r
width: 200px;\r
- padding: 5px;\r
font-weight: bold;\r
color: #333;\r
}\r
- a:hover .finder-icon-filename {\r
- color: #000;\r
- }\r
- .finder-icon-summary {\r
+ .finder-icon-ie-summary .finder-icon-vertical-middle-outer {\r
width: 300px;\r
- padding: 5px;\r
color: #666;\r
}\r
+ .finder-icon-vertical-middle-inner {\r
+ display: block;\r
+ position: absolute;\r
+ top: 50%;\r
+ margin: 0 5px;\r
+ }\r
+ .fnder-icon-ie7 .finder-icon-filename,\r
+ .fnder-icon-ie7 .finder-icon-summary {\r
+ position: relative;\r
+ top: -50%;\r
+ }\r
+ \r
+ /* Finder Icon Console\r
+ --------------------------------------------------------------------------------------*/ \r
.finder-icon-console {\r
position: absolute;\r
top: 0;\r
right: 0;\r
}\r
- .finder-icon-console div {\r
+ .finder-icon-console a {\r
+ display: block;\r
width: 74px;\r
height: 74px;\r
border-left: 1px solid #ccc;\r
float: right;\r
- cursor: pointer;\r
- background-position: 50% 50%;\r
+ background-image: url('../images/sprite.gif') !important;\r
background-repeat: no-repeat;\r
}\r
+ .finder-icon-console a:hover {\r
+ background-color: #ccc !important;\r
+ }\r
.finder-icon-console-action {\r
-\r
+ background-position: 0px -355px;\r
}\r
.finder-icon-console-editor-apps {\r
-\r
+ background-position: -70px -355px;\r
}\r
.finder-icon-console-viewer-apps {\r
+ background-position: 0px -425px;\r
+ }\r
+\r
+\r
\r
- }
\ No newline at end of file
+
\ No newline at end of file
<div id="inner-wrapper" class="base-content-width">\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > ActiveX</div>\r
<h2>ActiveX が有効か？ を js から調べる</h2>\r
<p>このページは ie8 以下用の テストページです．</p>\r
<p>\r
- ActiveX が有効か？ 調べるために以下のような script を使用していましたが、<strong>ie の設定によっては警告が出てしまうためよろしくないみたいです．</strong>(ie7 で遭遇)\r
+ ActiveX が有効か？ 調べるために以下のような script を使用していましたが、<code>new ActiveXObject</code> の辺りで <strong>ie の設定によっては警告が出てしまうためよろしくないみたいです．</strong>(ie7 で遭遇)\r
</p>\r
<p>ActiveX が使えなくても他の手段でユーザーのサポートは行える（はずな）ので、警告を表示しない方法で ActiveX が有効か？ 取得したいところです．</p>\r
<pre><code>\r
<title>Comic 用 html構造テスト | pettanR</title>\r
<!-- InstanceEndEditable -->\r
<!-- InstanceBeginEditable name="head" -->\r
+ <style type="text/css">\r
+/* PettanR Comic\r
+--------------------------------------------------------------------------------------*/\r
+.test1-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
+ .test1-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test1-pettanr-comic-panel img,\r
+ .test1-pettanr-comic-balloon {\r
+ position: absolute;\r
+ }\r
+ .test1-pettanr-comic-balloon img {\r
+ width: 100%;\r
+ height: 100%;\r
+ } \r
+ .test1-pettanr-comic-balloon .test1-pettanr-comic-speach {\r
+ position: absolute;\r
+ table-layout: fixed;\r
+ top: 0;\r
+ left: 16.6%;\r
+ width: 66.6%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0 !important;\r
+ }\r
+ .test1-pettanr-comic-speach tbody,\r
+ .test1-pettanr-comic-speach tr,\r
+ .test1-pettanr-comic-speach td {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0 !important;\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ }\r
+ \r
+ \r
+/* PettanR Comic\r
+--------------------------------------------------------------------------------------*/\r
+.test2-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
+ .test2-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test2-pettanr-comic-panel img {\r
+ position: absolute;\r
+ }\r
+ .test2-pettanr-comic-balloon {\r
+ position: absolute;\r
+ }\r
+ .test2-pettanr-comic-balloon img {\r
+ position: absolute;\r
+ width: 100%;\r
+ height: 100%;\r
+ }\r
+ .test2-pettanr-comic-balloon div {\r
+ position: relative;\r
+ display: table;\r
+ padding: 0 16.6%;\r
+ width: 66.6%;\r
+ height: 100%;\r
+ } \r
+ .test2-pettanr-comic-balloon div p {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ margin: 0 !important;\r
+ padding: 0 !important;\r
+ *position: absolute;\r
+ *top: 50%;\r
+ }\r
+ .test2-pettanr-comic-balloon div p span {\r
+ *display: block;\r
+ zoom: 1;\r
+ *position: relative;\r
+ *top: -50%;\r
+ } \r
+/* PettanR Comic\r
+--------------------------------------------------------------------------------------*/\r
+.test3-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
+ .test3-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test3-pettanr-comic-panel img {\r
+ position: absolute;\r
+\r
+ }\r
+ .test3-pettanr-comic-balloon {\r
+ position: absolute;\r
+ }\r
+ .test3-pettanr-comic-balloon img {\r
+ position: absolute;\r
+ width: 100%;\r
+ height: 100%; \r
+ }\r
+ .test3-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
+ .test3-pettanr-comic-balloon p span {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ *display: block;\r
+ zoom: 1;\r
+ *position: relative;\r
+ *top: -50%; \r
+ } \r
+ </style>\r
<!-- InstanceEndEditable -->\r
</head>\r
\r
<div id="inner-wrapper" class="base-content-width">\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
- <h2>コミック用 html 構造のテスト</h2>\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > コミック用 html 構造のテスト</div>\r
+ <h2>マンガ状コンテンツを表示するための html + css の調査</h2>\r
<p>html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです．</p>\r
- <p>html は js で動的に描画されるため、js の関連部分のテストも兼ねます．</p>\r
- <p>js による 動的な html の書き出しは、ブログ等への外部サイト表示 script と ログイン後のユーザーのコミック・パネル閲覧に使われます．</p>\r
- \r
- <h3>動的書き出しテスト</h3>\r
- <p>以下のテキストエリアに パネルの json データを入力することで、動的書き出しのテストを行えます．</p>\r
- <form name="htmlTest" class="block-element-item">\r
- <textarea name="jsonString" style="width:100%" rows="20" cols="100">\r
-{\r
- "border": 1,\r
- "comic_id": 5,\r
- "resource_picture_id": 1,\r
- "x": 0,\r
- "y": 0,\r
- "z": 0,\r
- "t": 0,\r
- "width": 400,\r
- "height": 235,\r
- "panel_elements": [\r
- {\r
- "resource_picture": {"id":1,"ext":'png'},\r
- "x": 178,\r
- "y": -2,\r
- "z": 0,\r
- "width": 166,\r
- "height": 252\r
- },\r
- {\r
- "balloon_template_id": 1,\r
- "system_picture_id": 1,\r
- "size": 1,\r
- "tail": -14,\r
- "x": -29,\r
- "y": 39,\r
- "z": 1,\r
- "width": 200,\r
- "height": 160,\r
- "speaches_attributes": {\r
- "newf1": {\r
- "content": "Hello",\r
- "x": -29,\r
- "y": 39,\r
- "width": 200,\r
- "height": 160\r
- }\r
- }\r
- }\r
- ]\r
-}\r
- </textarea>\r
- <input type="button" value="print" name="bindButton" class="button">\r
- </form>\r
- <p id="invalidJsonAlert" style="color:red;display:none;font-weight:bold;">json is invalid !</p>\r
- <div id="outputHere"></div>\r
+ <p>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどれか？このページを表示させつつ判断します．</p>\r
+ <p>このページでは js を使用していないため ベクター画像の置き換えは行われず、反転画像はサーバのものが読み込まれます．</p>\r
\r
+ <h2><table> を使ったテキストの上下中央配置</h2>\r
+ <p><table> タグを使ったレイアウトは多くのブラウザで意図した表示が期待できるが、html 文書としてはよろしくない．</p>\r
+ <div class="test1-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test1-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test1-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <table class="test1-pettanr-comic-speach"><tr><td>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</td></tr></table>\r
+ </div>\r
+ <div class="test1-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <table class="test1-pettanr-comic-speach"><tr><td>さて？</td></tr></table>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <h3>対応ブラウザ</h3>\r
+ <p>NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8</p>\r
<h3>source</h3>\r
- <p>pettanr.bind は pettanR コミック用の html エレメントを制作するときに使用する．外部サイト張り出し用 script や ユーザーコンソールの コミックビューワーから使われる．</p>\r
- <p>pettanr.bind.createBindWorker で BindWorker インスタンスを作って使用する．bind の意味は 製本 ．jQuery.bind とは関係ないので注意．</p>\r
+ <h4>html 部分</h4>\r
+ <p>パネルピクチャはひとつの <img> タグで表示されます．</p>\r
+ <p>バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <table> からなる．</p>\r
<pre><code>\r
-var jsonArea = document.htmlTest.jsonString,\r
- button = document.htmlTest.bindButton,\r
- bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
- elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
- json = null;\r
-button.onclick = function(){\r
- try {\r
- eval( 'json = ' + jsonArea.value);\r
- elmAlertStyle.display = 'none';\r
- } catch(e){\r
- elmAlertStyle.display = 'block';\r
+<div class="test1-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test1-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test1-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <table class="test1-pettanr-comic-speach"><tr><td>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</td></tr></table>\r
+ </div>\r
+ <div class="test1-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <table class="test1-pettanr-comic-speach"><tr><td>さて？</td></tr></table>\r
+ </div>\r
+ </div>\r
+</div>\r
+ </code></pre>\r
+ <h4>css 部分</h4>\r
+ <pre><code>\r
+.test1-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
+}\r
+ .test1-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
}\r
- json !== null && bindWorker.json( json);\r
- json = null;\r
+ .test1-pettanr-comic-panel img,\r
+ .test1-pettanr-comic-balloon {\r
+ position: absolute;\r
+ } \r
+ .test1-pettanr-comic-balloon .test1-pettanr-comic-speach {\r
+ position: absolute;\r
+ table-layout: fixed;\r
+ top: 16.6%;\r
+ left: 16.6%;\r
+ width: 66.6%;\r
+ height: 66.6%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0 !important;\r
+ }\r
+ .test1-pettanr-comic-speach tbody,\r
+ .test1-pettanr-comic-speach tr,\r
+ .test1-pettanr-comic-speach td {\r
+ width: 100%;\r
+ height: 100%;\r
+ border: 0;\r
+ padding: 0;\r
+ margin: 0 !important;\r
+ vertical-align: middle;\r
+ }\r
+ </code></pre>\r
+\r
+\r
+ <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応 タグの少ないバージョン</h2>\r
+ <p>html タグ構造は 先の <table> レイアウトに比べて自然．しかし <code>display:table-cell</code> などを使うため、より広範なブラウザに対応する、という点で不安が残る．</p>\r
+ <div class="test3-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test3-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test3-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>\r
+ </div>\r
+ <div class="test3-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <p><span>さて？</span></p>\r
+ </div>\r
+ </div>\r
+ </div> \r
+ <h3>対応ブラウザ</h3>\r
+ <p>NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8</p>\r
+ <h3>source</h3>\r
+ <h4>html 部分</h4>\r
+ <p>パネルピクチャはひとつの <img> タグで表示されます．</p>\r
+ <p>バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <p> と <span> からなる．</p>\r
+ <pre><code>\r
+<div class="test3-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test3-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test3-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>\r
+ </div>\r
+ <div class="test3-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <p><span>さて？</span></p>\r
+ </div>\r
+ </div>\r
+</div>\r
+ </code></pre>\r
+ <h4>css 部分</h4>\r
+ <pre><code>\r
+.test3-pettanr-comic-wrapper {\r
+ margin: 1em auto;\r
}\r
+ .test3-pettanr-comic-panel {\r
+ border-style: solid;\r
+ border-color: #111;\r
+ position: relative;\r
+ margin: 1em 0;\r
+ overflow: hidden;\r
+ }\r
+ .test3-pettanr-comic-panel img {\r
+ position: absolute;\r
+\r
+ }\r
+ .test3-pettanr-comic-balloon {\r
+ position: absolute;\r
+ }\r
+ .test3-pettanr-comic-balloon img {\r
+ position: absolute;\r
+ width: 100%;\r
+ height: 100%; \r
+ }\r
+ .test3-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
+ .test3-pettanr-comic-balloon p span {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ text-align: center;\r
+ *display: block;\r
+ zoom: 1;\r
+ *position: relative;\r
+ *top: -50%; \r
+ } \r
</code></pre>\r
- <h3>js による動的な書き出しの利点</h3>\r
- <p>js による動的な書き出しには以下にあげる利点がある．最後のもの以外はサーバへの画像リクエストを抑えるものになります．</p>\r
- <ul>\r
- <li>吹き出しをベジェ曲線で書き出すことで美しい描画ができ、吹き出し画像へのリクエストを抑止できる</li>\r
- <li>反転画像をブラウザ側で用意することで、flipH, flipV, flipVH といった反転画像へのリクエストを抑止できる．</li>\r
- <li>ブラウザの表示エリアに入らない画像について、表示エリアに入るまでリクエストを行わないようにできる</li>\r
- <li>コマのズーム機能が利用できる．ただしリサイズを禁止された画像を含むコマに対してはできない．</li>\r
- </ul>\r
+ \r
+ \r
+ <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応</h2>\r
+ <p>table-cell 及び クロスブラウザ対応</p>\r
+ <div class="test2-pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test2-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
+ <div class="test2-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
+ <img src="../system_pictures/_w5.gif">\r
+ <div><p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p></div>\r
+ </div>\r
+ <div class="test2-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
+ <img src="../system_pictures/_w19.gif">\r
+ <div><p><span>さて？</span></p></div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <h3>対応ブラウザ</h3>\r
+ <p>NN9, firefox 3.6, ie6</p>\r
+ \r
</div>\r
<!-- InstanceEndEditable -->\r
</div>\r
</div>\r
<script type="text/javascript" src="../javascripts/common.js"></script>\r
<!-- InstanceBeginEditable name="script" -->\r
- <script type="text/javascript">\r
- var jsonArea = document.htmlTest.jsonString,\r
- button = document.htmlTest.bindButton,\r
- bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
- elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
- json = null;\r
- button.onclick = function(){\r
- try {\r
- eval( 'json = ' + jsonArea.value);\r
- elmAlertStyle.display = 'none';\r
- } catch(e){\r
- elmAlertStyle.display = 'block';\r
- }\r
- json !== null && bindWorker.json( json);\r
- json = null;\r
- }\r
- </script>\r
<!-- InstanceEndEditable -->\r
</body>\r
<!-- InstanceEnd --></html>\r
--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<head>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Language" content="ja">\r
+ <meta http-equiv="Content-Script-Type" content="text/javascript">\r
+ <meta http-equiv="Content-Style-Type" content="text/css">\r
+ <meta http-equiv="imagetoolbar" content="no">\r
+ <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
+ <!-- InstanceBeginEditable name="doctitle" -->\r
+ <title>Comic 用 html構造テスト | pettanR</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <!-- InstanceEndEditable -->\r
+</head>\r
+\r
+<body>\r
+ <div id="general-content">\r
+ <div id="outer-wrapper">\r
+ \r
+ <div id="header">\r
+ <div class="base-content-width" style="position:relative;">\r
+ <h1><a href="../index.html">pettanR</a></h1>\r
+ <!-- global navi -->\r
+ <div id="global-navi">\r
+ <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="inner-wrapper" class="base-content-width">\r
+ <!-- InstanceBeginEditable name="main_content" -->\r
+ <div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > コミック用 html 構造のテスト</div>\r
+ <h2>コミック用 html 構造のテスト</h2>\r
+ <p>html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです．</p>\r
+ <p>html は js で動的に描画されるため、js の関連部分のテストも兼ねます．</p>\r
+ <p>js による 動的な html の書き出しは、ブログ等への外部サイト表示 script と ログイン後のユーザーのコミック・パネル閲覧に使われます．</p>\r
+ \r
+ <h3>動的書き出しテスト</h3>\r
+ <p>以下のテキストエリアに パネルの json データを入力することで、動的書き出しのテストを行えます．</p>\r
+ <form name="htmlTest" class="block-element-item">\r
+ <textarea name="jsonString" style="width:100%" rows="20" cols="100">\r
+{\r
+ "border": 1,\r
+ "comic_id": 5,\r
+ "resource_picture_id": 1,\r
+ "x": 0,\r
+ "y": 0,\r
+ "z": 0,\r
+ "t": 0,\r
+ "width": 400,\r
+ "height": 235,\r
+ "panel_elements": [\r
+ {\r
+ "resource_picture": {"id":1,"ext":'png'},\r
+ "x": 178,\r
+ "y": -2,\r
+ "z": 0,\r
+ "width": 166,\r
+ "height": 252\r
+ },\r
+ {\r
+ "balloon_template_id": 1,\r
+ "system_picture_id": 1,\r
+ "size": 1,\r
+ "tail": -14,\r
+ "x": -29,\r
+ "y": 39,\r
+ "z": 1,\r
+ "width": 200,\r
+ "height": 160,\r
+ "speaches_attributes": {\r
+ "newf1": {\r
+ "content": "Hello",\r
+ "x": -29,\r
+ "y": 39,\r
+ "width": 200,\r
+ "height": 160\r
+ }\r
+ }\r
+ }\r
+ ]\r
+}\r
+ </textarea>\r
+ <input type="button" value="print" name="bindButton" class="button">\r
+ </form>\r
+ <p id="invalidJsonAlert" style="color:red;display:none;font-weight:bold;">json is invalid !</p>\r
+ <div id="outputHere"></div>\r
+ \r
+ <h3>source</h3>\r
+ <p>pettanr.bind は pettanR コミック用の html エレメントを制作するときに使用する．外部サイト張り出し用 script や ユーザーコンソールの コミックビューワーから使われる．</p>\r
+ <p>pettanr.bind.createBindWorker で BindWorker インスタンスを作って使用する．bind の意味は 製本 ．jQuery.bind とは関係ないので注意．</p>\r
+ <pre><code>\r
+var jsonArea = document.htmlTest.jsonString,\r
+ button = document.htmlTest.bindButton,\r
+ bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
+ elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
+ json = null;\r
+button.onclick = function(){\r
+ try {\r
+ eval( 'json = ' + jsonArea.value);\r
+ elmAlertStyle.display = 'none';\r
+ } catch(e){\r
+ elmAlertStyle.display = 'block';\r
+ }\r
+ json !== null && bindWorker.json( json);\r
+ json = null;\r
+}\r
+ </code></pre>\r
+ <h3>js による動的な書き出しの利点</h3>\r
+ <p>js による動的な書き出しには以下にあげる利点がある．最後のもの以外はサーバへの画像リクエストを抑えるものになります．</p>\r
+ <ul>\r
+ <li>吹き出しをベジェ曲線で書き出すことで美しい描画ができ、吹き出し画像へのリクエストを抑止できる</li>\r
+ <li>反転画像をブラウザ側で用意することで、flipH, flipV, flipVH といった反転画像へのリクエストを抑止できる．</li>\r
+ <li>ブラウザの表示エリアに入らない画像について、表示エリアに入るまでリクエストを行わないようにできる</li>\r
+ <li>コマのズーム機能が利用できる．ただしリサイズを禁止された画像を含むコマに対してはできない．</li>\r
+ </ul>\r
+ </div>\r
+ <!-- InstanceEndEditable -->\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
+\r
+ <div id="footer">\r
+ <div id="footer-item-container" class="base-content-width clearfix">\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ぺったんR にようこそ</h2>\r
+ <ul>\r
+ <li>サンプル</li>\r
+ <li>ぺったんRの特徴</li>\r
+ <li>沿革</li>\r
+ </ul>\r
+ <h2>Test</h2>\r
+ <ul>\r
+ <li><a href="index.html">Test Index</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ドキュメント</h2>\r
+ <ul>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
+ <li>絵師向けドキュメント</li> \r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>プロトタイプ</h2>\r
+ <ul>\r
+ <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
+ <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
+ </ul>\r
+ <h2>Ajax contents</h2>\r
+ <ul>\r
+ <li><a href="../help/jp.xml">help | jp</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper" style="width:170px;">\r
+ <div class="footer-item" style="padding-right:0;">\r
+ <h2>ぺったんRチーム</h2>\r
+ <ul>\r
+ <li>わたしたちについて</li>\r
+ <li>ミッション</li>\r
+ <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
+ <li>個人情報保護方針</li>\r
+ <li>作品の取り扱い</li>\r
+ <li>お問い合わせ</li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
+ </div><!-- #EndLibraryItem -->\r
+ </div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" -->\r
+ <script type="text/javascript">\r
+ var jsonArea = document.htmlTest.jsonString,\r
+ button = document.htmlTest.bindButton,\r
+ bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
+ elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
+ json = null;\r
+ button.onclick = function(){\r
+ try {\r
+ eval( 'json = ' + jsonArea.value);\r
+ elmAlertStyle.display = 'none';\r
+ } catch(e){\r
+ elmAlertStyle.display = 'block';\r
+ }\r
+ json !== null && bindWorker.json( json);\r
+ json = null;\r
+ }\r
+ </script>\r
+<!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
-<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><image x="0" y="0" width="200" height="200" xlink:href="http://static.sourceforge.jp/thumb/g/2/930/640x640_0.png" transform="scale(-1,1) translate(-200,0)" /></svg>
\ No newline at end of file
+<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" /></svg>
\ No newline at end of file
<div id="inner-wrapper" class="base-content-width">\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
- <h2>Tests</h2>\r
+ <h2>テストインデックス</h2>\r
+ <h3>html テスト</h3>\r
<dl class="dl-table clearfix">\r
<dt><a href="comic-html-structure.html">html structure</a></dt>\r
+ <dd>ぺったんRコミックの html 構造のテスト．</dd>\r
+ <dt><a href="dynamic-comic-html.html">dynamic html</a></dt>\r
<dd>ぺったんRコミックの html 構造のテスト．js による動的書き出しテスト．</dd>\r
+ <dt><a href="vertical-center.html">vertical center</a></dt>\r
+ <dd>上下中央配置テスト</dd>\r
+ <dt><a href="pettanr.xml">xml & xslt -> html</a></dt>\r
+ <dd>pettanR コミックを xml で定義．xslt で html 化する．</dd> \r
+ </dl>\r
+ <h3>反転画像テスト</h3>\r
+ <dl class="dl-table clearfix">\r
<dt><a href="transform.html">css3 transform</a></dt>\r
<dd>css3 による画像反転（ ie8 以下用の filter のテストも）</dd>\r
<dt><a href="svg.html">svg test</a></dt>\r
<dd>svg による画像反転のテスト</dd>\r
+ </dl>\r
+ <h3>javascript テスト</h3>\r
+ <dl class="dl-table clearfix">\r
<dt><a href="activex.html">detect activex</a></dt>\r
<dd>ActiveX が有効か？を js で調べる．</dd>\r
- <dt><a href="pettanr.xml">xml & xslt -> html</a></dt>\r
- <dd>pettanR コミックを xml で定義．xslt で html 化する．</dd>\r
<dt><a href="type.html">[js] Type</a></dt>\r
<dd>javascript の型判定のテスト</dd>\r
</dl>\r
\r
<div id="inner-wrapper" class="base-content-width">\r
<div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > xml テスト</div>\r
<h2><xsl:value-of select="@title" /></h2>\r
<h3><xsl:value-of select="@episode" /></h3>\r
<p class='author'>author:<xsl:value-of select="@author" /></p>\r
<!-- InstanceBeginEditable name="main_content" -->\r
\r
<div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > svg を使った画像の反転テスト</div>\r
<h2>svg を使った画像の反転テスト</h2>\r
<div class="clearfix">\r
<img src="1.gif" class="float-left" width="200" height="200">\r
<div id="inner-wrapper" class="base-content-width">\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > css3 transform による 画像の水平・垂直反転のテストページ</div>\r
<h2>css3 transform による 画像の水平・垂直反転のテストページ</h2>\r
<p>このページは css3 transform による画像反転のためのテストページです．</p>\r
<p>ブラウザによる画像の反転方法は、Web標準を使うもの、非Web標準な独自実装やプラグインを使うものなどいくつかあります．</p>\r
<!-- InstanceBeginEditable name="main_content" -->\r
\r
<div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > javascript のための型判定</div>\r
<h2>javascript のための型判定</h2>\r
<p>以下の表は js によっ書き出されています．Array 型 と HTMLElement 型 の判定が面倒です．また、NodeList 型が返るか？はブラウザ毎の実装差があるようです．</p>\r
<dl id="output" class="dl-table clearfix"></dl>\r
--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
+<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
+<head>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Language" content="ja">\r
+ <meta http-equiv="Content-Script-Type" content="text/javascript">\r
+ <meta http-equiv="Content-Style-Type" content="text/css">\r
+ <meta http-equiv="imagetoolbar" content="no">\r
+ <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
+ <!-- InstanceBeginEditable name="doctitle" -->\r
+ <title>上下中央配置テスト vertical-align:middle</title>\r
+ <!-- InstanceEndEditable -->\r
+ <!-- InstanceBeginEditable name="head" -->\r
+ <style type="text/css">\r
+ .test-wrapper {\r
+ margin: 20px auto;\r
+ }\r
+ \r
+ div.outer {\r
+ display: table; /* ① */\r
+ height: 100px;\r
+ width: 100px; /* ② */\r
+ background: #E3F2DA;\r
+ color: #5C5C5C;\r
+ border: 1px solid #003366;\r
+ }\r
+ * html div.outer {\r
+ position: relative; /* ③ */\r
+ }\r
+ *+html div.outer {\r
+ position: relative; /* ③ */\r
+ }\r
+ div.vertical_middle {\r
+ display: table-cell; /* ④ */\r
+ vertical-align: middle; /* ⑤ */\r
+ }\r
+ * html div.vertical_middle {\r
+ position: absolute; /* ⑥ */\r
+ top: 50%; /* ⑥ */\r
+ }\r
+ *+html div.vertical_middle {\r
+ position: absolute; /* ⑥ */\r
+ top: 50%; /* ⑥ */\r
+ }\r
+ div.vertical_middle p.inner {\r
+ margin: 0 !important;\r
+ padding: 0 !important;\r
+ }\r
+ * html div.vertical_middle p.inner {\r
+ position: relative; /* ⑦ */\r
+ top: -50%; /* ⑦ */\r
+ }\r
+ *+html div.vertical_middle p.inner {\r
+ position: relative; /* ⑦ */\r
+ top: -50%; /* ⑦ */\r
+ }\r
+ \r
+ div.table {\r
+ display: table;\r
+ height: 100px;\r
+ background: #E3F2DA;\r
+ color: #5C5C5C;\r
+ }\r
+ div.table-cell {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ width: 100px;\r
+ border: 1px solid #003366;\r
+ padding: 5px;\r
+ }\r
+ div.table-cell span.inner {\r
+ display: block;\r
+ }\r
+ \r
+ div.table-ie {\r
+ height: 100px;\r
+ background: #E3F2DA;\r
+ color: #5C5C5C;\r
+ }\r
+ div.table-cell-ie {\r
+ display: inline;\r
+ zoom: 1;\r
+ }\r
+ div.middle-outer {\r
+ height: 100px;\r
+ width: 100px;\r
+ position: relative;\r
+ border: 1px solid #003366;\r
+ }\r
+ div.middle-inner {\r
+ position: absolute;\r
+ top: 50%;\r
+ }\r
+ div.middle-inner span.inner {\r
+ display: inline;\r
+ position: relative;\r
+ top: -50%; \r
+ }\r
+ \r
+ \r
+ /* http://e2designer.seesaa.net/article/152168876.html */\r
+ /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
+ .word-wrap {\r
+ white-space: pre; /* CSS 2.0 */\r
+ white-space: pre-wrap; /* CSS 2.1 */\r
+ white-space: pre-line; /* CSS 3.0 */\r
+ white-space: -pre-wrap; /* Opera 4-6 */\r
+ white-space: -o-pre-wrap; /* Opera 7 */\r
+ white-space: -moz-pre-wrap; /* Mozilla */\r
+ white-space: -hp-pre-wrap; /* HP Printers */\r
+ word-wrap: break-word; /* IE 5+ */\r
+ }\r
+ div.table-cell span.word-wrap {\r
+ width: 100px;\r
+ }\r
+ \r
+ \r
+ div.wrap {\r
+ border: 1px solid #666666;\r
+ width: 350px;\r
+ }\r
+ \r
+ div.wrap div {\r
+ display: table-cell;\r
+ width: 100px;\r
+ vertical-align: middle; \r
+ font-size: 0.8em;\r
+ }\r
+ div.wrap div.box1 {\r
+ background-color: #FFDDDD;\r
+ }\r
+ div.wrap div.box2 {\r
+ background-color: #DDFFDD;\r
+ }\r
+ \r
+ /* IE 6 */\r
+ * html div.wrap div {\r
+ display: inline;\r
+ zoom: 1;\r
+ }\r
+ \r
+ /* IE 7 */\r
+ *:first-child+html div.wrap div {\r
+ display: inline;\r
+ zoom: 1;\r
+ }\r
+ \r
+ /*\*//*/\r
+ * html div.wrap div {\r
+ display:inline-block;\r
+ }\r
+ /**/\r
+ \r
+ </style>\r
+ <!-- InstanceEndEditable -->\r
+</head>\r
+\r
+<body>\r
+ <div id="general-content">\r
+ <div id="outer-wrapper">\r
+ \r
+ <div id="header">\r
+ <div class="base-content-width" style="position:relative;">\r
+ <h1><a href="../index.html">pettanR</a></h1>\r
+ <!-- global navi -->\r
+ <div id="global-navi">\r
+ <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="inner-wrapper" class="base-content-width">\r
+ <!-- InstanceBeginEditable name="main_content" -->\r
+ <div id="main">\r
+ <div id="breadcrumb"><a href="index.html">テスト インデックス</a> > 上下中央配置テスト vertical-align:middle</div>\r
+ <h2>上下中央配置テスト vertical-align:middle</h2>\r
+ <p>上下中央配置をクロスブラウザで table タグ無しで行うテストhttp://scuderia-web.com/tips/xhtml_css/div_vertical_align.php</p>\r
+ <h3>1行で中央配置</h3>\r
+ <div class="test-wrapper clearfix">\r
+ <div class="outer"> \r
+ <div class="vertical_middle"> \r
+ <p class="inner">テキスト</p> \r
+ </div> \r
+ </div>\r
+ </div>\r
+ <div class="test-wrapper clearfix">\r
+ <div class="outer"> \r
+ <div class="vertical_middle"> \r
+ <p class="inner">テキスト<br>テキスト</p> \r
+ </div> \r
+ </div>\r
+ </div>\r
+ <div class="test-wrapper clearfix">\r
+ <div class="outer"> \r
+ <div class="vertical_middle"> \r
+ <p class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</p> \r
+ </div> \r
+ </div> \r
+ </div>\r
+\r
+ <h2>上下中央配置テスト</h2>\r
+ \r
+ <h3>上下中央配置したブロックを横に並べる for modern browser</h3>\r
+ <p>ie8, firefox3.6, </p>\r
+ <div class="test-wrapper">\r
+ <div class="table"> \r
+ <div class="table-cell"> \r
+ <span class="inner">テキスト</span> \r
+ </div>\r
+ <div class="table-cell"> \r
+ <span class="inner">テキスト<br>テキスト</span> \r
+ </div>\r
+ <div class="table-cell"> \r
+ <span class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</span> \r
+ </div>\r
+ <div class="table-cell"> \r
+ <span class="inner word-wrap">word-break, word-wrap text. 1111111111111111111111111111111111111111111111111111111111111111111111111</span>\r
+ </div>\r
+ <div class="table-cell"> \r
+ <span class="inner">this cell will break. 11111111111111111111111111111111111</span>\r
+ </div> \r
+ </div>\r
+ </div>\r
+ <h3>上下中央配置したブロックを横に並べる for IE</h3>\r
+ <p>ie5.5, ie6, ie7</p>\r
+ <div class="test-wrapper">\r
+ <div class="table-ie">\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner">テキスト</span> \r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner">テキスト<br>テキスト</span> \r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner">テキスト<br>テキスト<br>テキスト<br>テキスト<br>テキスト</span>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner word-wrap">word-break, word-wrap text. 1111111111111111111111111111111111111111111111111111111111111111111111111</span>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div class="table-cell-ie">\r
+ <div class="middle-outer"> \r
+ <div class="middle-inner"> \r
+ <span class="inner">this cell will break. 11111111111111111111111111111111111</span>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <h2>上下中央配置テスト</h2>\r
+ http://www.webbibo.com/blog/htmlcss/vertical/125.html\r
+ <div class="wrap">\r
+ <div class="box1">\r
+ ボックス1<br>\r
+ ボックス1<br>\r
+ ボックス1<br>\r
+ ボックス1<br>\r
+ ボックス1\r
+ </div>\r
+ <div class="box2">\r
+ ボックス2<br>\r
+ ボックス2\r
+ </div>\r
+ </div>\r
+\r
+ </div>\r
+ <!-- InstanceEndEditable -->\r
+ </div>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
+\r
+ <div id="footer">\r
+ <div id="footer-item-container" class="base-content-width clearfix">\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ぺったんR にようこそ</h2>\r
+ <ul>\r
+ <li>サンプル</li>\r
+ <li>ぺったんRの特徴</li>\r
+ <li>沿革</li>\r
+ </ul>\r
+ <h2>Test</h2>\r
+ <ul>\r
+ <li><a href="index.html">Test Index</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ドキュメント</h2>\r
+ <ul>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
+ <li>絵師向けドキュメント</li> \r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>プロトタイプ</h2>\r
+ <ul>\r
+ <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
+ <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
+ </ul>\r
+ <h2>Ajax contents</h2>\r
+ <ul>\r
+ <li><a href="../help/jp.xml">help | jp</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ <div class="footer-item-wrapper" style="width:170px;">\r
+ <div class="footer-item" style="padding-right:0;">\r
+ <h2>ぺったんRチーム</h2>\r
+ <ul>\r
+ <li>わたしたちについて</li>\r
+ <li>ミッション</li>\r
+ <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
+ <li>個人情報保護方針</li>\r
+ <li>作品の取り扱い</li>\r
+ <li>お問い合わせ</li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
+ </div><!-- #EndLibraryItem --></div>\r
+ <script type="text/javascript" src="../javascripts/common.js"></script>\r
+<!-- InstanceBeginEditable name="script" --><!-- InstanceEndEditable -->\r
+</body>\r
+<!-- InstanceEnd --></html>\r
<p>Hello, xxxxx.</p>\r
<p>This page is login user console.</p>\r
<h3>クイックアクセス</h3>\r
- <p><a href="#" onclick="pettanr.view.show('editor');return false;">新しいコマを描く(いまだけ)</a></p>\r
- <p><a href="#" onclick="pettanr.comicConsole._quickAccessShow();return false;">新しいコミックをつくる</a></p>\r
- <p><a href="#" onclick="pettanr.uploadConsole._quickAccessShow();return false;">画像のアップロード</a></p>\r
- <p><a href="#" onclick="pettanr.panelConsole._quickAccessShow();return false;">コマの追加（開発用）</a></p>\r
- <p><a href="#" onclick="pettanr.artistConsole._quickAccessShow();return false;">アーティスト登録（すでに登録している場合も操作可能）</a></p>\r
+ <p><a href="#" onclick="pettanr.editor.boot();return false;">新しいコマを描く(開発用)</a></p>\r
+ <p><a href="#" onclick="pettanr.comicConsole.bootInOverlay();return false;">新しいコミックをつくる</a></p>\r
+ <p><a href="#" onclick="pettanr.uploadConsole.bootInOverlay();return false;">画像のアップロード</a></p>\r
+ <p><a href="#" onclick="pettanr.panelConsole.bootInOverlay();return false;">コマの追加（開発用）</a></p>\r
+ <p><a href="#" onclick="pettanr.artistConsole.bootInOverlay();return false;">アーティスト登録（今はすでに登録している場合も操作可能です、、、、）</a></p>\r
<h3>座長からのお知らせ</h3>\r
<p>メンテナンスについて</p>\r
</div>\r
<div class="comic-element-wrapper text-element">\r
<img>\r
<div class="speach">\r
- <div class="speach-inner"></div>\r
+ <div class="speach-inner"> </div>\r
</div>\r
</div>\r
</script>\r
<div class="comic-element-wrapper text-element">\r
<img>\r
<div class="speach">\r
- <table><tr><td></td></tr></table>\r
+ <table><tr><td> </td></tr></table>\r
</div>\r
</div>\r
</script>\r
\r
- <script id="imageGruopItemTemplete" type="text/x-jquery-tmpl">\r
- <div class="image-gruop-item">\r
- <img width="0" height="0">\r
- <div class="image-gruop-item-title">img-title</div>\r
+ <script id="imageGroupItemTemplete" type="text/x-jquery-tmpl">\r
+ <div class="image-group-item">\r
+ <div class="image-group-item-title">img-title</div>\r
</div> \r
</script>\r
\r
<!-- オーバーレイ -->\r
<div id="overlay-container" style="display: none;">\r
<div id="overlay-shadow"></div>\r
+ <div id="overlay-close-button">x</div>\r
+ </div>\r
+\r
+ <!-- アウトプットコンソール -->\r
+ <div id="output-console-wrapper">\r
+ <textarea id="output-area" readonly></textarea>\r
+ </div>\r
\r
- <!-- アウトプットコンソール -->\r
- <div id="output-console-wrapper" style="display: none;">\r
- <textarea id="output-area" readonly></textarea>\r
- </div>\r
- \r
- <!-- テキスト エディタ -->\r
- <div id="speach-editor-wrapper" style="display: none;">\r
- <textarea id="speach-editor"></textarea>\r
- <div id="speach-edit-complete-button" class="button">OK</div>\r
- </div>\r
+ <!-- テキスト エディタ -->\r
+ <div id="speach-editor-wrapper">\r
+ <textarea id="speach-editor"></textarea>\r
+ <div id="speach-edit-complete-button" class="button">OK</div>\r
+ </div>\r
\r
- <!-- 画像グループから画像を選択 -->\r
- <div id="image-gruop-wrapper" style="display: none;">\r
- <div id="image-icon-container"></div>\r
- <div id="gruop-name-display">Group Name</div>\r
- <div id="image-gruop-button" class="button">cancel</div>\r
- </div>\r
+ <!-- 画像グループから画像を選択 -->\r
+ <div id="image-group-wrapper">\r
+ <div id="image-group-icon-container"></div>\r
+ <div id="image-group-name">NO DATA...</div>\r
+ <div id="image-group-button" class="button">close</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 id="artist-console" class="console-inner">\r
- <div id="register"></div>\r
- <div class="console-button-container">\r
- <div id="artist-console-post-button" class="button console-submit-button">register</div>\r
- <div id="artist-console-cancel-button" class="button console-cancel-button">cancel</div>\r
- </div>\r
- <div id="artist-console-progress" class="console-progress"> </div> \r
+ <!-- 作家登録 -->\r
+ <div id="artist-console-wrapper" class="console-wrapper">\r
+ <div id="artist-console-header" class="console-header">Register Artist</div>\r
+ <div id="artist-console" class="console-inner">\r
+ <div id="register"></div>\r
+ <div class="console-button-container">\r
+ <div id="artist-console-post-button" class="button console-submit-button">register</div>\r
+ <div id="artist-console-cancel-button" class="button console-cancel-button">cancel</div>\r
</div>\r
+ <div id="artist-console-progress" class="console-progress"> </div> \r
</div>\r
+ </div>\r
\r
- <!-- パネルのポスト（テスト） -->\r
- <div id="panel-console-wrapper" class="console-wrapper">\r
- <div id="panel-console-header" class="console-header">Create New Panel (dev)</div>\r
- <div id="panel-console" class="console-inner">\r
- <div id="newpanel"></div>\r
- <div class="console-button-container">\r
- <div id="panel-console-post-button" class="button console-submit-button">post</div>\r
- <div id="panel-console-cancel-button" class="button console-cancel-button">cancel</div>\r
- </div>\r
- <div id="panel-console-progress" class="console-progress"> </div> \r
+ <!-- パネルのポスト（テスト） -->\r
+ <div id="panel-console-wrapper" class="console-wrapper">\r
+ <div id="panel-console-header" class="console-header">Create New Panel (dev)</div>\r
+ <div id="panel-console" class="console-inner">\r
+ <div id="newpanel"></div>\r
+ <div class="console-button-container">\r
+ <div id="panel-console-post-button" class="button console-submit-button">post</div>\r
+ <div id="panel-console-cancel-button" class="button console-cancel-button">cancel</div>\r
</div>\r
+ <div id="panel-console-progress" class="console-progress"> </div> \r
</div>\r
+ </div>\r
\r
- <!-- 画像のアップロード-->\r
- <div id="upload-console-wrapper" class="console-wrapper">\r
- <div id="upload-console-header" class="console-header">Upload Picture</div>\r
- <div id="upload-console" class="console-inner">\r
- <div id="uploader"></div>\r
- <div class="console-button-container">\r
- <div id="upload-console-post-button" class="button console-submit-button">upload</div>\r
- <div id="upload-console-cancel-button" class="button console-cancel-button">cancel</div>\r
- </div>\r
- <div id="upload-console-progress" class="console-progress"> </div> \r
+ <!-- 画像のアップロード-->\r
+ <div id="upload-console-wrapper" class="console-wrapper">\r
+ <div id="upload-console-header" class="console-header">Upload Picture</div>\r
+ <div id="upload-console" class="console-inner">\r
+ <div id="uploader"></div>\r
+ <div class="console-button-container">\r
+ <div id="upload-console-post-button" class="button console-submit-button">upload</div>\r
+ <div id="upload-console-cancel-button" class="button console-cancel-button">cancel</div>\r
</div>\r
+ <div id="upload-console-progress" class="console-progress"> </div> \r
</div>\r
+ </div>\r
\r
- <!-- コミックの新規作成・編集・削除 -->\r
- <div id="comic-console-wrapper" class="console-wrapper">\r
- <div id="comic-console-header" class="console-header">Create New Comic</div>\r
- <div id="comic-console" class="console-inner">\r
- <div id="comic-console-title" class="comic-console-line">\r
- <span class="comic-console-label">Title:</span>\r
- <span id="comic-console-title-value" class="comic-console-value editable-value">No Title</span>\r
- </div>\r
- <div id="comic-console-width" class="comic-console-line">\r
- <span class="comic-console-label">Default Width:</span>\r
- <span id="comic-console-width-value" class="comic-console-value editable-value">300</span>\r
- </div>\r
- <div id="comic-console-height" class="comic-console-line">\r
- <span class="comic-console-label">Default Height:</span>\r
- <span id="comic-console-height-value" class="comic-console-value editable-value">200</span>\r
- </div>\r
- <div id="comic-console-visible" class="comic-console-line">\r
- <span class="comic-console-label">Visible:</span>\r
- <span id="comic-console-visible-value" class="comic-console-value editable-value">1</span>\r
- </div>\r
- <div id="comic-console-editable" class="comic-console-line">\r
- <span class="comic-console-label">Editable:</span>\r
- <span id="comic-console-editable-value" class="comic-console-value editable-value">1</span>\r
- </div>\r
- <div class="console-button-container">\r
- <div id="comic-console-post-button" class="button console-submit-button">post(update)</div>\r
- <div id="comic-console-cancel-button" class="button console-cancel-button">cancel</div>\r
- </div>\r
- <div id="comic-console-progress" class="console-progress"> </div>\r
+ <!-- コミックの新規作成・編集・削除 -->\r
+ <div id="comic-console-wrapper" class="console-wrapper">\r
+ <div id="comic-console-header" class="console-header">Create New Comic</div>\r
+ <div id="comic-console" class="console-inner">\r
+ <div id="comic-console-title" class="comic-console-line">\r
+ <span class="comic-console-label">Title:</span>\r
+ <span id="comic-console-title-value" class="comic-console-value editable-value">No Title</span>\r
+ </div>\r
+ <div id="comic-console-width" class="comic-console-line">\r
+ <span class="comic-console-label">Default Width:</span>\r
+ <span id="comic-console-width-value" class="comic-console-value editable-value">300</span>\r
+ </div>\r
+ <div id="comic-console-height" class="comic-console-line">\r
+ <span class="comic-console-label">Default Height:</span>\r
+ <span id="comic-console-height-value" class="comic-console-value editable-value">200</span>\r
+ </div>\r
+ <div id="comic-console-visible" class="comic-console-line">\r
+ <span class="comic-console-label">Visible:</span>\r
+ <span id="comic-console-visible-value" class="comic-console-value combobox"></span>\r
</div>\r
+ <div id="comic-console-editable" class="comic-console-line">\r
+ <span class="comic-console-label">Editable:</span>\r
+ <span id="comic-console-editable-value" class="comic-console-value combobox"></span>\r
+ </div>\r
+ <div class="console-button-container">\r
+ <div id="comic-console-post-button" class="button console-submit-button">create</div>\r
+ <div id="comic-console-cancel-button" class="button console-cancel-button">cancel</div>\r
+ </div>\r
+ <div id="comic-console-progress" class="console-progress"> </div>\r
</div>\r
- \r
- <div id="overlay-close-button">x</div>\r
</div>\r
\r
<!-- Templete Container -->\r
- <div id="templete-container">\r
+ <div id="templete-container" style="display: none;">\r
\r
<!-- Finder -->\r
<div id="templete-finder-container" class="finder-container">\r
\r
<div class="finder-body">\r
<!-- Finder icon -->\r
- <div id="templete-finder-icon" class="finder-icon">\r
- <div class="finder-icon-handle"></div>\r
- <div class="finder-icon-thumbnail"></div>\r
- <div class="finder-icon-filename"></div>\r
- <div class="finder-icon-summary">file descriptiion</div>\r
+ <div id="templete-finder-icon" class="finder-icon fnder-icon-modern">\r
+ <span class="finder-icon-handle"></span>\r
+ <span class="finder-icon-thumbnail"></span>\r
+ <span class="finder-icon-filename break-word">file name</span>\r
+ <span class="finder-icon-summary break-word">file descriptiion</span>\r
+ <div class="finder-icon-console">\r
+ <a href="#" class="finder-icon-console-action"></a>\r
+ <a href="#" class="finder-icon-console-editor-apps"></a>\r
+ <a href="#" class="finder-icon-console-viewer-apps"></a>\r
+ </div>\r
+ </div>\r
+ \r
+ <div id="templete-finder-icon-ie" class="finder-icon fnder-icon-ie7">\r
+ <a href="#" class="finder-icon-main">\r
+ <span class="finder-icon-handle"></span>\r
+ <span class="finder-icon-thumbnail"></span>\r
+ <span class="finder-icon-cell finder-icon-ie-filename">\r
+ <span class="finder-icon-vertical-middle-outer"> \r
+ <span class="finder-icon-vertical-middle-inner"> \r
+ <span class="finder-icon-filename break-word">file name</span> \r
+ </span>\r
+ </span>\r
+ </span>\r
+ <span class="finder-icon-cell finder-icon-ie-summary">\r
+ <span class="finder-icon-vertical-middle-outer"> \r
+ <span class="finder-icon-vertical-middle-inner"> \r
+ <span class="finder-icon-summary break-word">file descriptiion</span>\r
+ </span>\r
+ </span>\r
+ </span>\r
+ </a>\r
<div class="finder-icon-console">\r
- <div class="finder-icon-console-action"></div>\r
- <div class="finder-icon-console-editor-apps"></div>\r
- <div class="finder-icon-console-viwer-apps"></div>\r
+ <a href="#" class="finder-icon-console-action"></a>\r
+ <a href="#" class="finder-icon-console-editor-apps"></a>\r
+ <a href="#" class="finder-icon-console-viewer-apps"></a>\r
</div>\r
</div>\r
\r
</div>\r
\r
<script type="text/javascript" src="javascripts/common.js"></script>\r
- <script type="text/javascript" src="javascripts/jquery-1.6.2.min.js"></script>\r
+ <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>\r
<script type="text/javascript" src="javascripts/work.js"></script>\r
<script type="text/javascript" src="javascripts/system.js"></script>\r
</body>\r
OSDN Git Service
