/*\r
* pettanR work.js\r
- * version 0.4.2\r
+ * version 0.4.28\r
* \r
* author:\r
* itozyun\r
* \r
*/\r
\r
- pettanr.LINE_FEED_CODE_TEXTAREA = ( function(){\r
- var text = document.getElementById( 'shadowTxtarea'),\r
- form = text.parentNode;\r
- form.parentNode.removeChild( form);\r
- return text.value;\r
- })();\r
- pettanr.LINE_FEED_CODE_PRE = ( function(){\r
- var pre = document.getElementById( 'shadowPre');\r
- pre.parentNode.removeChild( pre);\r
- return pettanr.ua.isIE === true ? this.LINE_FEED_CODE_TEXTAREA : pre.innerHTML; // ie ?? \r
- })();\r
\r
/* ----------------------------------------\r
* pettanr.editor\r
* - MENU_BAR_CONTROL\r
- * - HISTORY\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
* MENU BAR\r
+ * - mouseEventListener\r
+ * - controler\r
+ * \r
* div\r
* div.title\r
* ul\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 = ( function(){\r
- var parent = that.parentNode,\r
- children = parent.getElementsByTagName( 'li'),\r
- l = children.length;\r
- for(var i=0; i<l; ++i){\r
- if( children[ i] === that) return i;\r
- }\r
- return -1;\r
- })();\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
\r
\r
/* ----------------------------------------\r
- * HISTORY\r
+ * HISTORY_CONTROL\r
+ * - controler\r
*/\r
- var HISTORY = ( function() {\r
+ var HISTORY_CONTROL = ( function() {\r
var STACK_BACK = [],\r
STACK_FORWARD = [],\r
MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, 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
return {\r
init: function(){\r
log = $( '#history-log');\r
- delete HISTORY.init;\r
+ delete HISTORY_CONTROL.init;\r
},\r
open: function(){\r
- HISTORY.init && HISTORY.init();\r
+ HISTORY_CONTROL.init && HISTORY_CONTROL.init();\r
},\r
close: function(){\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
- * Save Control\r
+ * SAVE_CONTROL\r
+ * - controler\r
*/\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
var SAVE_CONTROL = ( function(){\r
var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),\r
SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),\r
SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),\r
SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),\r
- OUTPUT = MENU_BAR_CONTROL.QUIT.createSelection( 'output', null, onOutputClick, true, false, true),\r
QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),\r
updated = false;\r
\r
function quit(){\r
- }\r
- \r
- function onOutputClick(){\r
- // OUTPUT_CONSOLE.show();\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 (Overlay)\r
- */\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 (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 (onUpdateFunction) {\r
- if( LOW_SRC === null){\r
- onUpdateFunction( SRC, imgW, imgH);\r
- } else {\r
- var _onLoad = new Function( [\r
- 'window["', _g_onUpdateFunction, '"]( arguments[ 0], arguments[ 1], arguments[ 2]);',\r
- 'window["', _g_onUpdateFunction, '"] = null'\r
- ].join( '')),\r
- _onError = new Function( [\r
- 'window["', _g_onUpdateFunction, '"]( arguments[ 0], ', data.width || 64 ,', ', data.height || 64,');',\r
- 'window["', _g_onUpdateFunction, '"] = null'\r
- ].join( ''));\r
- pettanr.util.loadImage( SRC, _onLoad, _onError);\r
- /*\r
- ( function( onUpdate){\r
- pettanr.util.loadImage( SRC,\r
- function( _abspath, imgW, imgH){\r
- onUpdate( SRC, imgW, imgH);\r
- onUpdate = null;\r
- },\r
- function( _abspath){\r
- onUpdate( SRC, data.width || 64, data.height || 64);\r
- onUpdate = null;\r
- }\r
- ); \r
- })( onUpdateFunction);*/ // close()で値が消えるので、クロージャに保持\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
- onUpdateFunction = onEnterInterval = null;\r
- }\r
- function onEnterShowImage(){\r
- var l = ICON_ARRAY.length,\r
- _start = -wrapX /itemW -1,\r
- _end = _start + winW /itemW +1;\r
- for( var i=0; i<l; ++i){\r
- _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
- }\r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = null;\r
- }\r
- function clickOK(){\r
- pettanr.overlay.hide();\r
- // onUpdateFunction && onUpdateFunction( textElement);\r
- close();\r
- }\r
- function onMouseWheel( e, delta){\r
- if( winW < containerW){\r
- wrapX += delta *WHEEL_DELTA;\r
- wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
- jqContainer.css( { left: wrapX});\r
- \r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
- }\r
- //e.stopPropagation();\r
- return false; \r
- }\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
- jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);\r
- containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;\r
- jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
- var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));\r
- itemW = itemSize.width;\r
- itemH = itemSize.height;\r
- jqName = $( '#gruop-name-display');\r
- jqButton = $( '#image-gruop-button').click( 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
- }\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
*/ \r
var WINDOWS_CONTROL = ( function(){\r
/*\r
}\r
};\r
\r
- function getCurrentWindow( _mouseX, _mouseY){\r
+ function getCurrentIndex( _mouseX, _mouseY){\r
if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;\r
var l = WINDOW_ARRAY.length,\r
_currentWindow = null,\r
\r
delete WINDOWS_CONTROL.init;\r
},\r
+ open: function(){\r
+ WINDOWS_CONTROL.init && WINDOWS_CONTROL.init();\r
+ },\r
+ close: function(){\r
+ \r
+ },\r
onMouseMove: function( _mouseX, _mouseY){\r
- var _index = getCurrentWindow( _mouseX, _mouseY);\r
+ var _index = getCurrentIndex( _mouseX, _mouseY);\r
if( _index === 0){\r
currentWindow.onMouseMove( _mouseX, _mouseY);\r
return true;\r
} else\r
- if( _index !== -1){ // 先頭のクリックでない場合\r
+ if( _index > 0){ // 先頭のクリックでない場合\r
// Array を前に\r
WINDOW_ARRAY.splice( currentWindowIndex, 1);\r
WINDOW_ARRAY.unshift( currentWindow);\r
return false;\r
},\r
onMouseUp: function( _mouseX, _mouseY){\r
- if( getCurrentWindow( _mouseX, _mouseY) === 0){\r
+ if( getCurrentIndex( _mouseX, _mouseY) === 0){\r
currentWindow.onMouseUp( _mouseX, _mouseY);\r
return true;\r
}\r
return false;\r
},\r
onMouseDown: function( _mouseX, _mouseY){\r
- if( getCurrentWindow( _mouseX, _mouseY) === 0){\r
+ if( getCurrentIndex( _mouseX, _mouseY) === 0){\r
currentWindow.onMouseDown( _mouseX, _mouseY);\r
return true;\r
}\r
* 画面外に出るwindowの移動\r
*/\r
},\r
- createWindow: function( scope, EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
+ createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
opt_visible = opt_visible !== false;\r
opt_closeButtonEnabled = opt_closeButtonEnabled === true;\r
opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;\r
opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
\r
var _window = pettanr.util.extend(\r
- WindowClass.apply( scope, [ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH]),\r
+ new WindowClass(\r
+ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH\r
+ ),\r
EXTENDS\r
);\r
WINDOW_ARRAY.unshift( _window);\r
\r
/* ----------------------------------------\r
* TOOL_BOX_WINDOW\r
+ * - window\r
*/\r
var TOOL_BOX_WINDOW = ( function(){\r
var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,\r
\r
function addImage( e){\r
setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0);\r
- e && e.preventDefault();\r
+ e && e.preventDefault && e.preventDefault();\r
return false;\r
}\r
function addText( e){\r
setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0);\r
- e && e.preventDefault();\r
+ e && e.preventDefault && e.preventDefault();\r
return false;\r
}\r
function switchGrid( e){\r
setTimeout( GRID_CONTROL.update, 0);\r
- e && e.preventDefault();\r
+ e && e.preventDefault && e.preventDefault();\r
return false;\r
}\r
function popupHelp( e){\r
instance.bodyBackOrForward( true);\r
setTimeout( HELP_DOCUMENTS_WINDOW.open, 0);\r
- e && e.preventDefault();\r
+ e && e.preventDefault && e.preventDefault();\r
return false;\r
}\r
function editBG( e){\r
instance.bodyBackOrForward( true);\r
setTimeout( INFOMATION_WINDOW.open, 0); \r
- e && e.preventDefault();\r
+ e && e.preventDefault && e.preventDefault();\r
return false;\r
}\r
\r
return WINDOWS_CONTROL.createWindow(\r
- this,\r
{\r
onInit: function(){\r
instance = this;\r
\r
/* ----------------------------------------\r
* IMAGE_EXPROLER\r
+ * - window\r
*/\r
var IMAGE_EXPLORER_WINDOW = ( function(){\r
var instance, finder;\r
\r
return WINDOWS_CONTROL.createWindow(\r
- this,\r
{\r
onInit: function(){\r
instance = this;\r
delete this.onInit;\r
},\r
- onFirstOpen: function( _w, _h){\r
- finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE);\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.onWindowResize( _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
\r
/* ----------------------------------------\r
* INFOMATION_WINDOW\r
+ * - window\r
*/ \r
var INFOMATION_WINDOW = ( function(){\r
var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,\r
currentLock = false;\r
\r
return WINDOWS_CONTROL.createWindow(\r
- this,\r
{\r
onFirstOpen: function( _w, _h){\r
backgroundInfomationElm = $( '#panel-background-information');\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
currentElementType = _elementType;\r
}\r
if( currentElementType !== -1){\r
- inputX.update( x);\r
- inputY.update( y);\r
- inputZ.update( z);\r
- _elementType === 1 && inputA.update( a);\r
- inputW.update( w);\r
- inputH.update( h);\r
- _elementType === 0 && inputPercentW.update( wPercent);\r
- _elementType === 0 && inputPercentH.update( hPercent); \r
+ inputX.value( x);\r
+ inputY.value( y);\r
+ inputZ.value( z);\r
+ _elementType === 1 && inputA.value( a);\r
+ inputW.value( w);\r
+ inputH.value( h);\r
+ _elementType === 0 && inputPercentW.value( wPercent);\r
+ _elementType === 0 && inputPercentH.value( hPercent); \r
} else {\r
\r
}\r
\r
/* ----------------------------------------\r
* HELP_WINDOW\r
+ * - window\r
*/\r
var HELP_DOCUMENTS_WINDOW = ( function(){\r
var visible = true,\r
jqNaviItems,\r
jqPages,\r
currentPageIndex = 0,\r
+ numPage = 0,\r
HELP = MENU_BAR_CONTROL.HELP,\r
- onLoadFunction = HELP.createAjaxSelection( onFirstOpen),\r
+ onLoadFunction = HELP.createAjaxSelection( onAjaxStart),\r
instance;\r
- function jumpPage( _index){\r
- \r
- }\r
- function onSelectionClick( _pageIndex){\r
- currentPageIndex = _pageIndex || currentPageIndex;\r
- HELP_DOCUMENTS_WINDOW.open();\r
- onOpen();\r
- }\r
- function onOpen(){\r
- jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');\r
- jqPages.hide().eq( currentPageIndex).show();\r
- }\r
- function onFirstOpen( _pageIndex){\r
+\r
+ function onAjaxStart( _pageIndex){\r
currentPageIndex = _pageIndex || currentPageIndex;\r
if( onHelpLoad !== null){\r
$.ajax({\r
});\r
onHelpLoad = null;\r
}\r
+ onAjaxStart = new Function;\r
}\r
var onHelpLoad = function( _xml){\r
var jqXML = $( _xml),\r
elmPages = document.createElement( 'div'),\r
elmPageOrigin = document.createElement( 'div'),\r
elmTitleOrigin = document.createElement( 'h2'),\r
- elmPage,\r
- numPage = 0;\r
+ elmPage;\r
elmNavi.className = 'sidenavi';\r
elmItemOrigin.className = 'sidenavi-item';\r
elmItemOrigin.href = '#';\r
elmPages.className = 'page-contents';\r
- elmPageOrigin.className = 'page-content';\r
+ elmPageOrigin.className = 'page-content main';\r
elmPageOrigin.appendChild( elmTitleOrigin);\r
\r
- // helpTitle && instance.title( helpTitle);\r
+ //helpTitle && instance.title( helpTitle);\r
\r
jqXML.find( 'page').each( function(){\r
var xmlPage = $( this),\r
elmNavi.appendChild( elmItemOrigin.cloneNode( true));\r
\r
elmTitleOrigin.innerHTML = title;\r
+ \r
elmPage = elmPageOrigin.cloneNode( true);\r
elmPage.innerHTML = content;\r
\r
jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);\r
\r
jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);\r
- jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a').click( onInnerLinkClick);\r
jqPages = jqAjaxContents.find( '.page-content');\r
- setTimeout( onOpen, 0);\r
+ jqPages.find( 'a').click( onInnerLinkClick);\r
+ \r
+ setTimeout( jumpPage, 0);\r
+ }\r
+ function onSelectionClick( _pageIndex){\r
+ HELP_DOCUMENTS_WINDOW.open();\r
+ jumpPage( _pageIndex);\r
+ }\r
+ function jumpPage( _index){\r
+ if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index){\r
+ currentPageIndex = _index;\r
+ }\r
+ jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');\r
+ jqPages.hide().eq( currentPageIndex).show();\r
}\r
function onNaviClick( e){\r
// this は <a>\r
- var children = this.parentNode.getElementsByTagName( 'a'),\r
- l = children.length;\r
- for( var i=0; i<l; ++i){\r
- if( children[ i] === this) break;\r
- }\r
+ jumpPage( pettanr.util.getChildIndex( this.parentNode, this));\r
e.stopPropagation();\r
- if( i === l) return false;\r
- jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
- jqPages.hide().eq( i).show();\r
return false;\r
}\r
function onInnerLinkClick( e){\r
- var jump = this.href.split( '#jump'),\r
- n = jump[1],\r
- i = ( n && '' +parseFloat( n) === n) ? parseFloat( n) : -1;\r
+ var jump = ( this.href || '').split( '#jump'),\r
+ n = jump[1];\r
+ if( !n) return;\r
+ jumpPage( '' + parseFloat( n) === n ? parseFloat( n) : -1);\r
e.stopPropagation();\r
- if( i === -1) return false;\r
- jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
- jqPages.hide().eq( i).show();\r
- currentPageIndex = i;\r
return false; \r
}\r
return WINDOWS_CONTROL.createWindow(\r
- this,\r
{\r
onInit: function(){\r
instance = this;\r
- jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});\r
+ jqAjaxContents = this.$.find( '.window-body').addClass( 'loading');\r
delete this.onInit;\r
},\r
- onFirstOpen: function(){\r
- onFirstOpen();\r
- },\r
- onResize: function( w, h){\r
- jqAjaxContents && jqAjaxContents.css( { height: h});\r
+ onFirstOpen: function( _w, _h){\r
+ jqAjaxContents.css( { height: _h});\r
+ onAjaxStart();\r
+ delete this.onFirstOpen;\r
},\r
- setAjaxContent: function( html){\r
- \r
- delete this.onLoadAjaxContent;\r
+ onResize: function( _w, _h){\r
+ jqAjaxContents && jqAjaxContents.css( { height: _h});\r
}\r
},\r
null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300\r
\r
/* ----------------------------------------\r
* GRID_CONTROL\r
+ * - control\r
+ * - panelResizeListener\r
*/\r
var GRID_CONTROL = ( function(){\r
var ELM_GRID = document.getElementById( 'grid'),\r
+ BG_URL = "url('images/grid.gif')",\r
jqGrid,\r
visible = false;\r
\r
jqGrid = $( ELM_GRID);\r
delete GRID_CONTROL.init;\r
},\r
+ open: function(){\r
+ GRID_CONTROL.init && GRID_CONTROL.init();\r
+ },\r
+ close: function(){\r
+ \r
+ },\r
onPanelResize: function( _panelX, _panelY){\r
ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( '');\r
ELM_GRID.style.height = windowH +'px';\r
\r
visible = !visible;\r
\r
- if( visible === true && !ELM_GRID.style.backgroundImage){\r
- ELM_GRID.style.backgroundImage = "url('images/grid.gif')";\r
+ if( visible === true && BG_URL !== null){\r
+ ELM_GRID.style.backgroundImage = BG_URL;\r
+ BG_URL = null;\r
}\r
return visible; \r
}\r
}\r
})();\r
\r
- /*\r
- * WHITE_GLASS_CONTROL\r
- */ \r
+/* ----------------------------------------\r
+ * WHITE_GLASS_CONTROL\r
+ * - panelResizeListener\r
+ */\r
var WHITE_GLASS_CONTROL = ( function(){\r
var styleTop = document.getElementById( 'whiteGlass-top').style,\r
styleLeft = document.getElementById( 'whiteGlass-left').style,\r
})();\r
\r
\r
-/*\r
+/* ----------------------------------------\r
* PANEL_CONTROL\r
+ * - controler\r
+ * - mouseEventListener\r
+ * \r
* panel-border の表示と onPanelResize の通知．\r
* panel drag.\r
* \r
isDragging = false,\r
isDraggable = false;\r
\r
+ pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);\r
+ \r
function onSpaceUpdate(e){\r
if( e.type === 'keyup'){\r
currentListener === null && updateMouseCursor( '');\r
}\r
\r
return {\r
- init: function( _panelW, _panelH, _borderSize){\r
- panelW = _panelW || DEFAULT_PANEL_WIDTH;\r
- panelH = _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
- \r
- pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);\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 = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;\r
\r
- setTimeout( PANEL_CONTROL.resize, 0);\r
+ //setTimeout( PANEL_CONTROL.resize, 0);\r
+ },\r
+ close: function(){\r
\r
- delete PANEL_CONTROL.init;\r
},\r
x: function(){\r
return panelX;\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
-/*\r
- * --------------------------------------------------------------------------------------------\r
- * panel resizer\r
+/* --------------------------------------------------------------------------------------------\r
+ * PanelResizerClass\r
+ * - mouseEventListener\r
*/\r
var PanelResizerClass = function( ID, isTop){\r
var ELM = document.getElementById( ID),\r
}\r
}\r
\r
- return {\r
- busy: function(){\r
- return isDragging;\r
- },\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.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
-\r
+/* --------------------------------------------------------------------------------------------\r
+ * CONSOLE_CONTROLER\r
+ */\r
var CONSOLE_CONTROLER = ( function(){\r
var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
- SAVE = HISTORY.saveState,\r
+ SAVE = HISTORY_CONTROL.saveState,\r
jqStage,\r
jqConsoleParent,\r
jqConsoleWrapper,\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
}\r
})();\r
\r
-\r
+/* --------------------------------------------------------------------------------------------\r
+ * TAIL_OPERATOR\r
+ * - comicElementOperator\r
+ */\r
var TAIL_OPERATOR = ( function(){\r
var MOUSE_CURSOR = updateMouseCursor,\r
ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\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
}\r
}\r
})();\r
- \r
+\r
+/* --------------------------------------------------------------------------------------------\r
+ * RESIZE_OPERATOR\r
+ * - comicElementOperator\r
+ */\r
var RESIZE_OPERATOR = ( function(){\r
var MOUSE_CURSOR = updateMouseCursor,\r
GRID_ENABLED = GRID_CONTROL.enabled;\r
y = _y !== undefined ? _y : y;\r
w = _w !== undefined ? _w : w;\r
h = _h !== undefined ? _h : h;\r
- elmResizerContainerStyle.left = x +'px';\r
- elmResizerContainerStyle.top = y +'px';\r
- elmResizerContainerStyle.width = w +'px';\r
- elmResizerContainerStyle.height = h +'px';\r
- elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
- elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
- elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
- elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';\r
+ try {\r
+ elmResizerContainerStyle.left = x +'px';\r
+ elmResizerContainerStyle.top = y +'px';\r
+ elmResizerContainerStyle.width = w +'px';\r
+ elmResizerContainerStyle.height = h +'px';\r
+ elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
+ elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
+ elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
+ elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px'; \r
+ } catch(e){\r
+ alert( [x, y, w, h].join( ','));\r
+ return;\r
+ }\r
+\r
\r
POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);\r
POSITION_ARRAY.push(\r
INFOMATION_WINDOW.update( currentElement);\r
}\r
\r
- function flip( _flipV, _flipH){\r
+ function flip( _flipH, _flipV){\r
var p = CURSOR_AND_FLIP[ currentIndex];\r
currentIndex = _flipH === true || _flipV === true ? p[\r
_flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')\r
] : currentIndex;\r
MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);\r
elmResizerContainer.className = 'current-resizer-is-' +currentIndex;\r
- currentElement.flip( _flipV, _flipH);\r
+ currentElement.flip( _flipH, _flipV);\r
}\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
baseY = _y;\r
baseW = _w = _memoryX -_x;\r
baseH = _h;\r
- flip( false, true);\r
+ flip( true, false);\r
flipV = currentElement.flipV();\r
} else \r
if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){\r
baseY = _y = _y +_h;\r
baseW = _w;\r
baseH = _h = _memoryY -_y;\r
- flip( true, false);\r
+ flip( false, true);\r
flipH = currentElement.flipH();\r
} else {\r
// flipVH\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
onCtrlUpdate: update\r
}\r
})();\r
- \r
+\r
+/* --------------------------------------------------------------------------------------------\r
+ * POSITION_OPERATOR\r
+ * - comicElementOperator\r
+ */\r
var POSITION_OPERATOR = ( function(){\r
var MOUSE_CURSOR = updateMouseCursor,\r
GRID_ENABLED = GRID_CONTROL.enabled;\r
})();\r
\r
\r
-/*\r
- * --------------------------------------------------------------------------------------------\r
+/* --------------------------------------------------------------------------------------------\r
* COMIC_ELEMENT_OPERATION_MANAGER\r
*/\r
var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){\r
var MOUSE_CURSOR = updateMouseCursor,\r
- SAVE = HISTORY.saveState,\r
+ SAVE = HISTORY_CONTROL.saveState,\r
GRID_ENABLED = GRID_CONTROL.enabled,\r
HIT_AREA = MOUSE_HIT_AREA,\r
currentIsTextElement = false,\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
);\r
}\r
}\r
- function hide(){\r
+\r
+ pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){\r
+ currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();\r
+ });\r
+ pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function( e){\r
+ currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();\r
+ });\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function( e){\r
+ currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
+ currentOperator = null;\r
+ });\r
+ return {\r
+ open: function(){\r
+ this.hide();\r
+ },\r
+ close: function(){\r
+ \r
+ },\r
+ hide: function(){\r
currentElement !== null && RESIZE_OPERATOR.hide();\r
currentElement = null;\r
MOUSE_CURSOR( '');\r
TAIL_OPERATOR.hide();\r
CONSOLE_CONTROLER.hide();\r
INFOMATION_WINDOW.update( null);\r
- }\r
- function restoreState( arg){\r
+ },\r
+ resize: resize,\r
+ restoreState: function( arg){\r
if( arg && arg.length !== 8) return;\r
var _currentElement = arg[ 0],\r
_x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],\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
currentOperator = null;\r
currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);\r
- }\r
- function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
+ },\r
+ saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
startX = startX !== undefined ? startX : currentx;\r
startY = startY !== undefined ? startY : currenty;\r
startW = startW !== undefined ? startW : currentw;\r
startA = startA !== undefined ? startA : angle;\r
startFilpV = startFilpV !== undefined ? startFilpV : flipV;\r
startFilpH = startFilpH !== undefined ? startFilpH : flipH;\r
- currentElement && SAVE( restoreState,\r
+ currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState,\r
[ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],\r
[ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH]\r
);\r
- }\r
- pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){\r
- currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();\r
- });\r
- pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function(){\r
- currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();\r
- });\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function(){\r
- currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
- currentOperator = null;\r
- });\r
- return {\r
- init: function(){\r
- hide();\r
- delete COMIC_ELEMENT_OPERATION_MANAGER.init;\r
},\r
- hide: hide,\r
- resize: resize,\r
- restoreState: restoreState,\r
- saveStatus: saveComicElementStatus,\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
- * --------------------------------------------------------------------------------------------\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.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
\r
-/*\r
- * --------------------------------------------------------------------------------------------\r
+/* --------------------------------------------------------------------------------------------\r
* TextElementClass\r
* \r
- * ELM はpettanr.domで書き出したものを突っ込むcreateの場合\r
- * \r
* type\r
* 0.none\r
* 1.speach balloon\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.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 update( _x, _y, _w, _h, _a, animate){\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
+ /* 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
+ animate !== true && resizeBalloon();\r
}\r
- \r
- function updateType( _type){\r
- if( type !== _type){\r
- type = _type || type;\r
- XBROWSER_BALLOON.type( type);\r
- }\r
+ this.animate = function ( _x, _y, _w, _h, _a ){\r
+ instance.resize( _x, _y, _w, _h, _a, true );\r
}\r
- function updateAngle( _a){\r
- if( _a !== undefined && a !== _a){\r
- a = _a !== undefined ? _a : a;\r
- XBROWSER_BALLOON.angle( a);\r
- }\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
}\r
+ TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );\r
\r
-\r
+/* --------------------------------------------------------------------------------------------\r
+ * COMIC_ELEMENT_CONTROL\r
+ * - mouseEventListener\r
+ */\r
var COMIC_ELEMENT_CONTROL = ( function(){\r
- var SAVE = HISTORY.saveState,\r
+ var SAVE = HISTORY_CONTROL.saveState,\r
ELM_CONTAINER = document.getElementById( 'comic-element-container'),\r
currentElement = null,\r
currentLockTest = false,\r
currentLock = false,\r
panelX, panelY, panelW, panelH,\r
startX, startY;\r
- \r
/*\r
* append, remove, replace\r
* \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
},\r
+ open: function(){\r
+ COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();\r
+ },\r
+ close: function(){\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 = ImageElementClass.apply( {}, [ _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
+ createImageElement: function( data ){\r
+ if( Type.isObject( data ) === false ){\r
+ pettanr.premiumSatge.bootInOverlay( 1, onImageSelect );\r
+ } else {\r
+ onImageSelect( data, 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
+ 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
- firstOpen: function(){\r
- var jqWindow = pettanr.jqWindow();\r
- windowW = jqWindow.width();\r
- windowH = jqWindow.height();\r
- \r
- jqEditor = $( '#editor');\r
-\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
+ this.onOpen = function( _w, _h, _file ){\r
+ comicID = -1;\r
+ panelID = -1;\r
+ panelTimming = -1;\r
+ \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
+ 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
+ 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
+ this.onPaneResize = function( _windowW, _windowH){\r
+ windowW = _windowW || windowW;\r
+ windowH = _windowH || windowH;\r
/*\r
- * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初\r
- * MENU_BAR_CONTROL,\r
- * WINDOW_CONTROL,\r
- * COMIC_ELEMENT_CONTROL,\r
- * PANEL_CONTROL\r
- * .busy() === true なら、そのままonMouseMove()にイベントを流す．これはArrayの後ろから、奥の表示要素から\r
- * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．\r
+ * ieは +'px'が不要みたい\r
*/\r
- MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\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
+});\r
\r
- HISTORY.init();\r
- \r
- WINDOWS_CONTROL.init();\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, _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
+ }\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
+ /*\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
- GRID_CONTROL.init();\r
- PANEL_CONTROL.init();\r
- CONSOLE_CONTROLER.init();\r
- COMIC_ELEMENT_OPERATION_MANAGER.init();\r
- COMIC_ELEMENT_CONTROL.init();\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
\r
- // last\r
- MENU_BAR_CONTROL.init();\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );\r
+ elmProgress.innerHTML = 'create iframe';\r
+ }\r
+ }\r
+ function onCreateIframe( _iframe ){\r
+ elmUploader.appendChild( _iframe );\r
+ elmIframe = _iframe;\r
+ elmForm.target = _iframe.name;\r
+ elmProgress.innerHTML = '';\r
+ }\r
+\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
+ 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
+ if( timer !== null){\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ }\r
+ \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
+ setTimeout( clickCancel , 3000);\r
+ return;\r
+ }\r
\r
- OUTPUT_CONSOLE.init();\r
- TEXT_EDITOR_CONTROL.init();\r
- IMAGE_GROUP_EXPROLER.init();\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
+ }\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
+ }\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
- * 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
+ * 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
+ 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 = elmFile = 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.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
+ setTimeout( clickCancel , 3000);\r
+ return;\r
+ }\r
\r
- delete pettanr.editor.firstOpen;\r
- },\r
- onOpen: function( _option){\r
- pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();\r
-\r
- // HISTORY.onOpen();\r
- // WINDOWS_CONTROL.onOpen();\r
- // COMIC_ELEMENT_CONTROL.onOpen();\r
- // MENU_BAR_CONTROL.onOpen();\r
- // TEXT_EDITOR_CONTROL.onOpen();\r
- // IMAGE_GROUP_EXPROLER.onOpen();\r
- },\r
- onClose: function(){\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- windowW = _windowW;\r
- 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
+ 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
+ }\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
+ }\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
+ /* 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
+ * 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
+ 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
- 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
+ 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
+ }\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
+ }\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 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
+\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
+ if( timer !== null){\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ }\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
+ 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
+ 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
+ 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
+ /* grobal method */\r
+ this.rootElement = document.getElementById( 'output-console-wrapper' );\r
+ this.displayName = ID;\r
+ this.ID = ID;\r
+ \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
-})();\r
+});\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
OSDN Git Service
