+/*\r
+ * pettanR work.js\r
+ * version 0.4.19\r
+ * \r
+ * author:\r
+ * itozyun\r
+ * licence:\r
+ * 3-clause BSD\r
+ *\r
+ * \r
+ * ----------------------------------------\r
+ * naming rules\r
+ * \r
+ * Class\r
+ * ThisIsClass\r
+ * \r
+ * const\r
+ * THIS_IS_CONST = 'this is const';\r
+ * \r
+ * var\r
+ * thisIsVar\r
+ * \r
+ * value of jquery\r
+ * jqWrapper, JQ_WRAPPER\r
+ * \r
+ * value of dom element\r
+ * elmWrapper, ELM_WRAP\r
+ * \r
+ * value of vml element\r
+ * vmlImg, VML_SHAPE\r
+ * \r
+ */\r
+\r
+\r
+/* ----------------------------------------\r
+ * pettanr.editor\r
+ * - MENU_BAR_CONTROL\r
+ * - HISTORY_CONTROL\r
+ * - SAVE_CONTROL\r
+ * - WINDOW_CONTROL\r
+ * - WindowClass\r
+ * - INFOMATION_WINDOW\r
+ * - TOOL_BOX_WINDOW\r
+ * - HELP_DOCUMENTS_WINDOW\r
+ * - PANEL_CONTROL\r
+ * - GRID_CONTROL\r
+ * - WHITE_GLASS_CONTROL\r
+ * - PANEL_CONTROL\r
+ * \r
+ * \r
+ * - PanelResizerClass\r
+ * - PANEL_RESIZER_TOP\r
+ * - PANEL_RESIZER_BOTTOM\r
+ * - CONSOLE_CONTROLER\r
+ * \r
+ * - TAIL_OPERATOR\r
+ * - RESIZE_OPERATOR\r
+ * - POSITION_OPERATOR\r
+ * - COMIC_ELEMENT_OPERATION_MANAGER\r
+ * \r
+ * - ImageElementClass\r
+ * - TextElementClass\r
+ * \r
+ * - COMIC_ELEMENT_CONTROL\r
+ * \r
+ * \r
+ */\r
+pettanr.editor = pettanr.view.registerApplication( function(){\r
+\r
+ var PANEL_ELEMENT_TYPE_IMAGE = 0,\r
+ PANEL_ELEMENT_TYPE_TEXT = 1,\r
+ MOUSE_LISTENER_ARRAY = [],\r
+ COMIC_ELEMENT_ARRAY = [],\r
+ ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
+ MIN_PANEL_HEIGHT = 20,\r
+ MIN_ELEMENT_SIZE = 19,\r
+ MOUSE_HIT_AREA = 10,\r
+ jqMouseEventChacher,\r
+ jqEditor,\r
+ windowW, windowH,\r
+ currentListener = null,\r
+ currentCursor = '',\r
+ instance = this,\r
+ option,\r
+ log;\r
+\r
+/* ----------------------------------------\r
+ * MENU BAR\r
+ * - mouseEventListener\r
+ * - controler\r
+ * \r
+ * div\r
+ * div.title\r
+ * ul\r
+ * li\r
+ * a\r
+ * span\r
+ * kbd shortcut\r
+ */\r
+ var MENU_BAR_CONTROL = ( function(){\r
+ var ELM_BAR = document.getElementById( 'menu-bar'),\r
+ ELM_ITEM_CLASSNAME = 'menu-bar-item',\r
+ ELM_ITEM_ORIGN = ( function(){\r
+ var ret = document.createElement( 'div'),\r
+ div = document.createElement( 'div'),\r
+ ul = document.createElement( 'ul');\r
+ ret.className = ELM_ITEM_CLASSNAME;\r
+ ret.appendChild( div);\r
+ ret.appendChild( ul);\r
+ return ret;\r
+ })(),\r
+ ELM_SELECTION_ORIGN = ( function(){\r
+ var ret = document.createElement( 'li'),\r
+ a = document.createElement( 'a'),\r
+ span = document.createElement( 'span'),\r
+ key = document.createElement( 'kbd');\r
+ a.appendChild( span);\r
+ a.appendChild( key);\r
+ ret.appendChild( a);\r
+ a.href = '#';\r
+ return ret;\r
+ })(),\r
+ ITEM_ARRAY = [],\r
+ barH = pettanr.util.getElementSize( ELM_BAR).height,\r
+ itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,\r
+ selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width,\r
+ jqStage, jqBar;\r
+ ELM_BAR.style.top = ( -barH) +'px';\r
+\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
+ \r
+ if( shortcut){\r
+ elmShortcut.innerHTML = shortcut;\r
+ } else {\r
+ elmShortcut.parentNode.removeChild( elmShortcut);\r
+ }\r
+ elmShortcut = null;\r
+ \r
+ container.appendChild( ELM_WRAPPER);\r
+ \r
+ updateTitle( title);\r
+ updateVisible( visible);\r
+ \r
+ function updateTitle( _title){\r
+ ELM_TITLE.innerHTML = title = _title;\r
+ }\r
+ function updateVisible( _visible){\r
+ if( _visible !== undefined){\r
+ visible = !!_visible;\r
+ ELM_WRAPPER.className = visible === true ? '' : 'disabled';\r
+ };\r
+ }\r
+ return {\r
+ elm: ELM_WRAPPER,\r
+ title: function( _title){\r
+ _title !== undefined && updateTitle( _title);\r
+ return title;\r
+ },\r
+ visible: function( _visible){\r
+ visible !== !!_visible && updateVisible( _visible);\r
+ return visible;\r
+ },\r
+ separateAfter: separateAfter\r
+ }\r
+ }\r
+\r
+ var MenuBarItemClass = function( title){\r
+ var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),\r
+ ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],\r
+ ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],\r
+ INDEX = ITEM_ARRAY.length,\r
+ SELECTION_CALLBACK_ARRAY = [],\r
+ numSelection = 0,\r
+ visible = false;\r
+ ELM_TITLE.innerHTML = title;\r
+ \r
+ ELM_WRAPPER.style.left = ( itemW * INDEX) +'px';\r
+ ELM_BAR.appendChild( ELM_WRAPPER);\r
+ \r
+ function onClick( e){\r
+ var that = this,\r
+ 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
+ return {\r
+ elm: ELM_WRAPPER,\r
+ onClick: onClick,\r
+ init: function(){\r
+ $( ELM_SELECTION).children( 'li').click( onClick);\r
+ delete this.init;\r
+ },\r
+ show: function(){\r
+ if( visible === true) return;\r
+ jqStage.append( ELM_WRAPPER);\r
+ ELM_WRAPPER.className = ELM_ITEM_CLASSNAME +'-focus';\r
+ this.onShow && setTimeout( this.onShow, 0);\r
+ visible = true;\r
+ },\r
+ hide: function(){\r
+ if( visible === false) return;\r
+ ELM_BAR.appendChild( ELM_WRAPPER);\r
+ ELM_WRAPPER.className = ELM_ITEM_CLASSNAME;\r
+ this.onHide && setTimeout( this.onHide, 0);\r
+ visible = false;\r
+ },\r
+ createSelection: function( title, shortcut, callback, visible, separateBefore, separateAfter){\r
+ var ret = MenubarSelectionClass.apply( {}, [ ELM_SELECTION, title, shortcut, visible, separateAfter]),\r
+ before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null;\r
+ SELECTION_CALLBACK_ARRAY.push( callback);\r
+ if( before !== null && ( separateBefore === true || before.separateAfter === true)){\r
+ ret.elm.style.borderTop = '1px solid #ccc';\r
+ }\r
+ return ret;\r
+ }\r
+ }\r
+ }\r
+\r
+ \r
+ function createMenubarItem( title){\r
+ var _item = new MenuBarItemClass( title);\r
+ ITEM_ARRAY.push( _item);\r
+ return _item;\r
+ }\r
+ return {\r
+ init: function(){\r
+ jqStage = jqEditor;\r
+ jqBar = $( ELM_BAR).animate( { top: 0});\r
+\r
+ var l = ITEM_ARRAY.length;\r
+ for( var i=0; i<l; ++i){\r
+ ITEM_ARRAY[ i].init();\r
+ }\r
+\r
+ delete MENU_BAR_CONTROL.init;\r
+ },\r
+ open: function(){\r
+ MENU_BAR_CONTROL.init && MENU_BAR_CONTROL.init();\r
+ // ELM_BAR.style.top = ( -barH) +'px';\r
+ // anime\r
+ },\r
+ close: function(){\r
+ var l = ITEM_ARRAY.length;\r
+ for( var i=0; i<l; ++i){\r
+ ITEM_ARRAY[ i].hide();\r
+ }\r
+ },\r
+ h: barH,\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ if( barH >= _mouseY){\r
+ return true;\r
+ }\r
+ var l = ITEM_ARRAY.length;\r
+ for( var i=0; i<l; ++i){\r
+ ITEM_ARRAY[ i].hide();\r
+ }\r
+ return false;\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ return false;\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ var l = ITEM_ARRAY.length;\r
+ if( barH < _mouseY || itemW * l < _mouseX) return false;\r
+ for( var i=0; i<l; ++i){\r
+ if( i * itemW <= _mouseX && _mouseX < ( i +1) * itemW){\r
+ ITEM_ARRAY[ i].show();\r
+ } else {\r
+ ITEM_ARRAY[ i].hide();\r
+ }\r
+ }\r
+ return true;\r
+ },\r
+ busy: function( _busy){\r
+ return false;\r
+ },\r
+ onWindowResize: function( _windowW, _windowH){\r
+ \r
+ },\r
+ QUIT: createMenubarItem( 'Quit'),\r
+ EDIT: createMenubarItem( 'Edit'),\r
+ WINDOW: createMenubarItem( 'Window'),\r
+ HELP: pettanr.util.extend( createMenubarItem( 'Help'), {\r
+ createAjaxSelection: function( callback){\r
+ var elmLoading = document.createElement( 'li'),\r
+ that = this,\r
+ elmSelection = this.elm.getElementsByTagName( 'ul')[ 0];\r
+ elmSelection.appendChild( elmLoading);\r
+ elmLoading.className = 'loading';\r
+ elmLoading.style.height = '90px'; \r
+\r
+ this.onShow = callback;\r
+ callback = null;\r
+ \r
+ delete this.createAjaxSelection;\r
+ return function(){\r
+ elmSelection.removeChild( elmLoading);\r
+ $( elmSelection).children( 'li').click( that.onClick);\r
+ elmLoading = elmSelection = null;\r
+ delete that.onShow;\r
+ that = null;\r
+ }\r
+ }\r
+ })\r
+ }\r
+ })();\r
+\r
+\r
+/* ----------------------------------------\r
+ * HISTORY_CONTROL\r
+ * - controler\r
+ */\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
+ MENUBAR_FORWARD = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', forward, false, false, true),\r
+ log;\r
+ \r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, false, true, back); // ctrl + Z\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, true, true, forward); // ctrl + shift + Z\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 89, false, true, forward); // ctrl + Y\r
+\r
+ function back(){\r
+ /*\r
+ * currentを控えてSTACK_FORWARD.push(current)\r
+ * STACK_BACK.pop()を実行してcurrentに\r
+ */\r
+ if( STACK_BACK.length === 0) return;\r
+\r
+ var state = STACK_BACK.pop();\r
+ state && state.fn( state.argBack);\r
+ MENUBAR_BACK.visible( STACK_BACK.length !== 0);\r
+ SAVE_CONTROL.panelUpdated( STACK_BACK.length !== 0);\r
+ \r
+ STACK_FORWARD.push( state);\r
+ MENUBAR_FORWARD.visible( true);\r
+ }\r
+ function forward(){\r
+ if( STACK_FORWARD.length === 0) return;\r
+ \r
+ var state = STACK_FORWARD.pop();\r
+ state.fn( state.argForword);\r
+ MENUBAR_FORWARD.visible( STACK_FORWARD.length !== 0);\r
+ \r
+ STACK_BACK.push( state);\r
+ MENUBAR_BACK.visible( true);\r
+ SAVE_CONTROL.panelUpdated( true);\r
+ }\r
+ function destroyStack( _stack, _destroy){\r
+ _stack.fn = null;\r
+ \r
+ var _argBack = _stack.argBack,\r
+ _argForword = _stack.argForword,\r
+ _value;\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
+ }\r
+ }\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
+ } \r
+ } \r
+ }\r
+ return {\r
+ init: function(){\r
+ log = $( '#history-log');\r
+ delete HISTORY_CONTROL.init;\r
+ },\r
+ open: function(){\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
+ }\r
+ while( STACK_FORWARD.length > 0){\r
+ destroyStack( STACK_FORWARD.shift(), true);\r
+ }\r
+ },\r
+ saveState: function( _function, _argBack, _argForword, _destroy) {\r
+ STACK_BACK.push( {\r
+ fn: _function,\r
+ argBack: _argBack,\r
+ argForword: _argForword,\r
+ destroy: _destroy\r
+ });\r
+ MENUBAR_BACK.visible( true);\r
+ SAVE_CONTROL.panelUpdated( true);\r
+ \r
+ var _stack;\r
+ while( STACK_FORWARD.length > 0){\r
+ _stack = STACK_FORWARD.shift();\r
+ destroyStack( _stack, _stack.destroy);\r
+ }\r
+ MENUBAR_FORWARD.visible( false);\r
+ } \r
+ }\r
+ })();\r
+\r
+/* ----------------------------------------\r
+ * SAVE_CONTROL\r
+ * - controler\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
+ QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),\r
+ updated = false;\r
+ \r
+ function quit(){\r
+ // 本来は os.application.close();\r
+ pettanr.editor.shutdown();\r
+ }\r
+ \r
+ function outputAsHtml(){\r
+ pettanr.outputConsole.bootInOverlay( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
+ }\r
+ function outputAsJsonString(){\r
+ pettanr.outputConsole.bootInOverlay( COMIC_ELEMENT_CONTROL.getAsJsonString());\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
+ updated = !!_updated;\r
+ }\r
+ return updated;\r
+ },\r
+ save: function(){\r
+ \r
+ }\r
+ }\r
+ })();\r
+\r
+/* ----------------------------------------\r
+ * WINDOWS_CONTROL\r
+ * - contloler\r
+ * - mouseEventListener\r
+ */ \r
+ var WINDOWS_CONTROL = ( function(){\r
+ /*\r
+ * 表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。\r
+ */\r
+ var DEFAULT_MIN_WINDOW_WIDTH = 200,\r
+ DEFAULT_MIN_WINDOW_HEIGHT = 200,\r
+ WINDOW_ARRAY = [],\r
+ WINDOW_BODY_BODER_SIZE = 1,\r
+ jqContainer,\r
+ currentWindow,\r
+ currentWindowIndex = -1,\r
+ log;\r
+\r
+ var jqWindowOrigin,\r
+ closeButtonWidth;\r
+ var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){\r
+ var MOUSE_CURSOR = updateMouseCursor,\r
+ MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( \r
+ ( visible !== true ? 'show ' : 'hide ') +title,\r
+ null, onMenuClick, true\r
+ ),\r
+ jqStage,\r
+ jqWrapper, jqHeader, jqFooter = null,\r
+ elmBody, elmBodyStyle,\r
+ startX, startY, startW, startH,\r
+ offsetX, offsetY,\r
+ headerH, bodyH, footerH = 0,\r
+ isDragging = false,\r
+ isResizing = false,\r
+ bodyIsTachable = false,\r
+ instance;\r
+\r
+ function onMenuClick(){\r
+ visible === true ? instance.close() : instance.open();\r
+ }\r
+ function update( _x, _y, _w, _h){\r
+ _x = _x !== undefined ? _x : x;\r
+ _y = _y !== undefined ? _y : y;\r
+ _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;\r
+ _w = _w !== undefined ? _w : w;\r
+ _h = _h !== undefined ? _h : h;\r
+ jqWrapper.css( {\r
+ left: _x,\r
+ top: _y,\r
+ width: _w,\r
+ height: _h\r
+ });\r
+ bodyH = _h -headerH -footerH;\r
+ elmBodyStyle.height = bodyH +'px';\r
+ ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, bodyH);\r
+ x = _x;\r
+ y = _y;\r
+ w = _w;\r
+ h = _h;\r
+ }\r
+ function bodyBackOrForward( isBack){\r
+ if( !instance) return;\r
+ if( bodyIsTachable === !isBack) return;\r
+ elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';\r
+ elmBodyStyle.left = isBack === true ? 0 : x +'px';\r
+ elmBodyStyle.top = isBack === true ? 0 : y +headerH +'px';\r
+ elmBodyStyle.width = isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px';\r
+ bodyIsTachable === isBack && isBack === true ? jqHeader.after( elmBody) : jqStage.append( elmBody);\r
+ bodyIsTachable = !isBack;\r
+ }\r
+ function onWindowResize( e){\r
+ bodyBackOrForward( true);\r
+ isResizing = true;\r
+ startX = x;\r
+ startY = y;\r
+ startW = w;\r
+ startH = h;\r
+ offsetX = e.pageX;\r
+ offsetY = e.pageY;\r
+ MOUSE_CURSOR( 'nw-resize');\r
+ e.stopPropagation();\r
+ return false;\r
+ }\r
+ return {\r
+ init: function( jqContainer){\r
+ /*\r
+ * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う.\r
+ */\r
+ instance = this;\r
+ \r
+ jqWindowOrigin = jqWindowOrigin || ( function(){\r
+ return $( $( '#windowTemplete').remove().html());\r
+ })();\r
+ closeButtonWidth = closeButtonWidth || ( function(){\r
+ return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;\r
+ })();\r
+ \r
+ jqStage = jqEditor;\r
+ this.$ = jqWrapper = jqWindowOrigin.clone( true);\r
+ jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);\r
+ headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;\r
+ elmBody = jqWrapper.children( '.window-body').get( 0);\r
+ elmBodyStyle = elmBody.style;\r
+ \r
+ if( bodyTempleteID) {\r
+ jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));\r
+ } else {\r
+ jqWrapper.find( '.window-body-insert-position').remove();\r
+ }\r
+ CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();\r
+ \r
+ this.onInit && this.onInit();\r
+ delete this.init;\r
+ },\r
+ x: function(){ return x;},\r
+ y: function(){ return y;},\r
+ w: function(){ return w;},\r
+ h: function(){ return h;},\r
+ $: null,\r
+ title: function( _title){\r
+ typeof _title === 'string' && jqHeader.html( _title);\r
+ title = typeof _title === 'string' ? _title : title;\r
+ return title;\r
+ },\r
+ visible: visible,\r
+ firstOpen: function(){\r
+ if( RESIZE_BUTTON_ENABLED === true){\r
+ footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height;\r
+ //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);\r
+ } else {\r
+ jqWrapper.find( '.window-footer').remove();\r
+ }\r
+ this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH);\r
+ \r
+ update( x, y, w, h);\r
+ \r
+ delete this.firstOpen;\r
+ },\r
+ open: function(){\r
+ if( visible === true) return;\r
+ instance.visible = visible = true;\r
+ openWindow( instance);\r
+ MENUBAR_SELWCTION.title( 'hide ' +title);\r
+ \r
+ for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){\r
+ if( WINDOW_ARRAY[ i] === instance){\r
+ WINDOW_ARRAY.splice( i, 1);\r
+ WINDOW_ARRAY.unshift( instance);\r
+ currentWindow = null;\r
+ currentWindowIndex = -1;\r
+ }\r
+ }\r
+ },\r
+ onFadeIn: function(){\r
+ instance.firstOpen && instance.firstOpen();\r
+ instance.onOpen && setTimeout( callOnOpen, 0);\r
+ function callOnOpen(){\r
+ instance.onOpen( w, bodyH);\r
+ }\r
+ },\r
+ onFadeOut: function(){\r
+ var elmWrapper = jqWrapper.get(0);\r
+ elmWrapper.parentNode.removeChild( elmWrapper);\r
+ instance.onClose && setTimeout( instance.onClose, 0);\r
+ },\r
+ close: function(){\r
+ if( visible === false) return;\r
+ instance.visible = visible = false;\r
+ jqWrapper.fadeOut( instance.onFadeOut);\r
+ MENUBAR_SELWCTION.title( 'show ' +title);\r
+ },\r
+ bodyBackOrForward: bodyBackOrForward,\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ if( RESIZE_BUTTON_ENABLED === true && x +w -20 <= _mouseX && _mouseX < x +w && y +headerH +bodyH < _mouseY && _mouseY <= y +h){\r
+ bodyBackOrForward( true);\r
+ isResizing = true;\r
+ startX = x;\r
+ startY = y;\r
+ startW = w;\r
+ startH = h;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ MOUSE_CURSOR( 'nw-resize');\r
+ return;\r
+ }\r
+ \r
+ if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
+ if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){\r
+ instance.close();\r
+ return;\r
+ }\r
+ \r
+ isDragging = true;\r
+ MOUSE_CURSOR( 'move'); \r
+ startX = x;\r
+ startY = y;\r
+ startW = w;\r
+ startH = h;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ isDragging = isResizing = false;\r
+ MOUSE_CURSOR( '');\r
+ },\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ var _updateX = _mouseX -offsetX,\r
+ _updateY = _mouseY -offsetY;\r
+ \r
+ if( isResizing === true){\r
+ var _w = startW +_updateX,\r
+ _h = startH +_updateY;\r
+ update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h);\r
+ return;\r
+ } else\r
+ if( isDragging === true) {\r
+ update( startX +_updateX, startY +_updateY);\r
+ return;\r
+ } else\r
+ if( x > _mouseX || x +w < _mouseX ) return;\r
+ \r
+ ( y <= _mouseY && y +headerH >= _mouseY ) ?\r
+ MOUSE_CURSOR( 'pointer') : // hit to header\r
+ MOUSE_CURSOR( '');\r
+ bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY);\r
+ },\r
+ onMouseOut: function( _mouseX, _mouseY){\r
+ bodyIsTachable === true && bodyBackOrForward( true);\r
+ isDragging = false;\r
+ MOUSE_CURSOR( '');\r
+ },\r
+ busy: function(){\r
+ return isDragging === true || isResizing === true;\r
+ },\r
+ bodyHeight: function(){\r
+ return bodyH;\r
+ }\r
+ }\r
+ };\r
+ \r
+ function getCurrentIndex( _mouseX, _mouseY){\r
+ if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;\r
+ var l = WINDOW_ARRAY.length,\r
+ _currentWindow = null,\r
+ _win, _x, _y;\r
+ currentWindowIndex = -1;\r
+ for( var i=0; i<l; i++){\r
+ _win = WINDOW_ARRAY[ i];\r
+ if( _win.visible !== true) continue;\r
+ _x = _win.x();\r
+ _y = _win.y();\r
+ if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){\r
+ _currentWindow = _win;\r
+ currentWindowIndex = i;\r
+ break;\r
+ }\r
+ }\r
+ currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);\r
+ currentWindow = _currentWindow;\r
+ return currentWindowIndex;\r
+ }\r
+ function openWindow( _window){\r
+ if( _window.visible !== true) return;\r
+ var _jqWindow = _window.$;\r
+ jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない．\r
+ _jqWindow.fadeIn( _window.onFadeIn);\r
+ return;\r
+ }\r
+ \r
+ return {\r
+ init: function(){\r
+ jqContainer = $( '#window-container');\r
+ \r
+ var l = WINDOW_ARRAY.length,\r
+ _window;\r
+ for( var i=l-1; i >= 0; --i){\r
+ _window = WINDOW_ARRAY[ i];\r
+ _window.init && _window.init( jqContainer);\r
+ _window.visible === true && openWindow( _window);\r
+ }\r
+ log = $( '#window-log');\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 = getCurrentIndex( _mouseX, _mouseY);\r
+ if( _index === 0){\r
+ currentWindow.onMouseMove( _mouseX, _mouseY);\r
+ return true;\r
+ } else\r
+ if( _index > 0){ // 先頭のクリックでない場合\r
+ // Array を前に\r
+ WINDOW_ARRAY.splice( currentWindowIndex, 1);\r
+ WINDOW_ARRAY.unshift( currentWindow);\r
+ // Domを最後に\r
+ jqContainer.append( currentWindow.$);\r
+ currentWindowIndex = 0;\r
+ return true;\r
+ }\r
+ return false;\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\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( getCurrentIndex( _mouseX, _mouseY) === 0){\r
+ currentWindow.onMouseDown( _mouseX, _mouseY);\r
+ return true;\r
+ }\r
+ return false;\r
+ },\r
+ busy: function(){\r
+ return currentWindow !== null;\r
+ },\r
+ onWindowResize: function( _windowW, _windowH){\r
+ /*\r
+ * 画面外に出るwindowの移動\r
+ */\r
+ },\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_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH;\r
+ opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
+ \r
+ var _window = pettanr.util.extend(\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
+ WINDOWS_CONTROL.init === undefined && _window.init( jqContainer);\r
+ WINDOWS_CONTROL.init === undefined && openWindow( _window);\r
+ return _window;\r
+ }\r
+ }\r
+ })();\r
+\r
+/* ----------------------------------------\r
+ * TOOL_BOX_WINDOW\r
+ * - window\r
+ */\r
+ var TOOL_BOX_WINDOW = ( function(){\r
+ var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,\r
+ instance;\r
+ \r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 73, false, true, addImage);\r
+ MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);\r
+ \r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 84, false, true, addText);\r
+ MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);\r
+\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 71, false, true, switchGrid);\r
+ MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);\r
+\r
+ function addImage( e){\r
+ setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0);\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 && e.preventDefault();\r
+ return false;\r
+ }\r
+ function switchGrid( e){\r
+ setTimeout( GRID_CONTROL.update, 0);\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 && e.preventDefault();\r
+ return false;\r
+ }\r
+ function editBG( e){\r
+ instance.bodyBackOrForward( true);\r
+ setTimeout( INFOMATION_WINDOW.open, 0); \r
+ e && e.preventDefault && e.preventDefault();\r
+ return false;\r
+ }\r
+ \r
+ return WINDOWS_CONTROL.createWindow(\r
+ {\r
+ onInit: function(){\r
+ instance = this;\r
+ delete this.onInit;\r
+ },\r
+ onFirstOpen: function(){\r
+ addImageButton = $( '#toolbox-add-image-button').click( addImage);\r
+ addTextButton = $( '#toolbox-add-text-button').click( addText);\r
+ editBgButton = $( '#toolbox-edit-bg-button').click( editBG);\r
+ switchGridButton = $( '#toolbox-switch-grid').click( switchGrid);\r
+ popupHelpButton = $( '#toolbox-popup-help-button').click( popupHelp);\r
+ \r
+ postButton = $( '#toolbox-post-button');\r
+ \r
+ delete this.onFirstOpen;\r
+ }\r
+ },\r
+ 'toolbox-window', 'Tool box', 0, 215, 110, 290, true\r
+ );\r
+ })();\r
+ \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
+ {\r
+ onInit: function(){\r
+ instance = this;\r
+ delete this.onInit;\r
+ },\r
+ onOpen: function( _w, _h){\r
+ finder = finder || pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
+ finder.open( _w, _h );\r
+ },\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
+ \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
+ FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',\r
+ FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',\r
+ backgroundInfomationElm,\r
+ jqComicElementInformation,\r
+ inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,\r
+ inputPercentW, inputPercentH,\r
+ currentComicElement = null,\r
+ currentElementType = -1,\r
+ currentLock = false;\r
+\r
+ return WINDOWS_CONTROL.createWindow(\r
+ {\r
+ onFirstOpen: function( _w, _h){\r
+ backgroundInfomationElm = $( '#panel-background-information');\r
+ \r
+ jqComicElementInformation = $( '#comic-element-infomation').hide().css( {\r
+ height: _h\r
+ });\r
+ var TAB_GROUP_ID = 'comic-element-attribute';\r
+ var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
+ inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID);\r
+ inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID);\r
+ inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID);\r
+ inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID);\r
+ inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID);\r
+ inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID);\r
+ inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID);\r
+ inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID);\r
+ inputAspectRatio = $( '#comic-element-keep-aspect');\r
+ delete this.onFirstOpen;\r
+ },\r
+ onResize: function( _w, _h){\r
+ jqComicElementInformation.css( {\r
+ height: _h\r
+ });\r
+ },\r
+ update: function( currentElement){\r
+ \r
+ if( currentLock === true && currentElement === null) return;\r
+ \r
+ var _elementType = currentElement === null ? -1 : currentElement.type,\r
+ x = currentElement !== null ? currentElement.x : 0,\r
+ y = currentElement !== null ? currentElement.y : 0,\r
+ z = currentElement !== null ? currentElement.z : 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 === 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
+ if( _elementType !== -1){\r
+ if( _elementType === 1){\r
+ inputA.visible( true);\r
+ inputPercentW.visible( false);\r
+ inputPercentH.visible( false);\r
+ inputAspectRatio.hide();\r
+ } else {\r
+ inputA.visible( false);\r
+ inputPercentW.visible( true);\r
+ inputPercentH.visible( true);\r
+ inputAspectRatio.show();\r
+ }\r
+ currentElementType === -1 && jqComicElementInformation.stop().css( {\r
+ filter: '',\r
+ opacity: ''\r
+ })[ FADE_IN_EFFECT]();\r
+ } else {\r
+ currentElementType !== -1 && jqComicElementInformation.stop().css({\r
+ filter: '',\r
+ opacity: ''\r
+ })[ FADE_OUT_EFFECT]();\r
+ }\r
+ currentElementType = _elementType;\r
+ }\r
+ if( currentElementType !== -1){\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
+ lock: function( _currentLock){\r
+ currentLock = !!_currentLock;\r
+ this.bodyBackOrForward( !currentLock);\r
+ }\r
+ },\r
+ 'infomation-window', 'Infomation', 0, 30, 200, 180, true\r
+ );\r
+ })();\r
+\r
+/* ----------------------------------------\r
+ * HELP_WINDOW\r
+ * - window\r
+ */\r
+ var HELP_DOCUMENTS_WINDOW = ( function(){\r
+ var visible = true,\r
+ jqAjaxContents,\r
+ jqNaviItems,\r
+ jqPages,\r
+ currentPageIndex = 0,\r
+ numPage = 0,\r
+ HELP = MENU_BAR_CONTROL.HELP,\r
+ onLoadFunction = HELP.createAjaxSelection( onAjaxStart),\r
+ instance;\r
+\r
+ function onAjaxStart( _pageIndex){\r
+ currentPageIndex = _pageIndex || currentPageIndex;\r
+ if( onHelpLoad !== null){\r
+ $.ajax({\r
+ url: 'help/jp.xml',\r
+ dataType: 'xml',\r
+ success: onHelpLoad\r
+ });\r
+ onHelpLoad = null;\r
+ }\r
+ onAjaxStart = new Function;\r
+ }\r
+ var onHelpLoad = function( _xml){\r
+ var jqXML = $( _xml),\r
+ helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),\r
+ elmNavi = document.createElement( 'div'),\r
+ elmItemOrigin = document.createElement( 'a'),\r
+ elmPages = document.createElement( 'div'),\r
+ elmPageOrigin = document.createElement( 'div'),\r
+ elmTitleOrigin = document.createElement( 'h2'),\r
+ elmPage;\r
+ elmNavi.className = 'sidenavi';\r
+ elmItemOrigin.className = 'sidenavi-item';\r
+ elmItemOrigin.href = '#';\r
+ elmPages.className = 'page-contents';\r
+ elmPageOrigin.className = 'page-content main';\r
+ elmPageOrigin.appendChild( elmTitleOrigin);\r
+ \r
+ //helpTitle && instance.title( helpTitle);\r
+ \r
+ jqXML.find( 'page').each( function(){\r
+ var xmlPage = $( this),\r
+ title = xmlPage.attr( 'title'),\r
+ content = xmlPage.text();\r
+ \r
+ elmItemOrigin.innerHTML = title;\r
+ elmNavi.appendChild( elmItemOrigin.cloneNode( true));\r
+ \r
+ elmTitleOrigin.innerHTML = title;\r
+ \r
+ elmPage = elmPageOrigin.cloneNode( true);\r
+ elmPage.innerHTML = content;\r
+ \r
+ pettanr.util.cleanElement( elmPage);\r
+ \r
+ if( elmPage.childNodes.length > 0){\r
+ elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]);\r
+ } else {\r
+ elmPage.appendChild( elmTitleOrigin.cloneNode( true));\r
+ }\r
+ elmPages.appendChild( elmPage);\r
+ \r
+ HELP.createSelection( title, null, onSelectionClick, true);\r
+ ++numPage;\r
+ });\r
+ onLoadFunction();\r
+ onLoadFunction = null;\r
+ \r
+ jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);\r
+ \r
+ jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);\r
+ jqPages = jqAjaxContents.find( '.page-content');\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
+ jumpPage( pettanr.util.getChildIndex( this.parentNode, this));\r
+ e.stopPropagation();\r
+ return false;\r
+ }\r
+ function onInnerLinkClick( e){\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
+ return false; \r
+ }\r
+ return WINDOWS_CONTROL.createWindow(\r
+ {\r
+ onInit: function(){\r
+ instance = this;\r
+ jqAjaxContents = this.$.find( '.window-body').addClass( 'loading');\r
+ delete this.onInit;\r
+ },\r
+ onFirstOpen: function( _w, _h){\r
+ jqAjaxContents.css( { height: _h});\r
+ onAjaxStart();\r
+ delete this.onFirstOpen;\r
+ },\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
+\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
+ return {\r
+ init: function(){\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
+ enabled: function(){\r
+ return visible;\r
+ },\r
+ update: function(){\r
+ jqGrid.css( {\r
+ opacity: '',\r
+ fliter: ''\r
+ }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();\r
+ \r
+ visible = !visible;\r
+ \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
+ * - panelResizeListener\r
+ */\r
+ var WHITE_GLASS_CONTROL = ( function(){\r
+ var styleTop = document.getElementById( 'whiteGlass-top').style,\r
+ styleLeft = document.getElementById( 'whiteGlass-left').style,\r
+ styleRight = document.getElementById( 'whiteGlass-right').style,\r
+ styleBottom = document.getElementById( 'whiteGlass-bottom').style;\r
+\r
+ return {\r
+ onPanelResize: function( _panelX, _panelY, _panelW, _panelH){\r
+ var _w = _panelW,\r
+ _h = _panelH,\r
+ marginTop = _panelY,\r
+ marginBottom = windowH -_h -marginTop,\r
+ marginX = _panelX,\r
+ rightWidth = windowW -_w -marginX;\r
+ \r
+ styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';\r
+ \r
+ styleLeft.top = marginTop +'px';\r
+ styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';\r
+ styleLeft.height = ( _h + marginBottom) +'px';\r
+ \r
+ styleRight.top = marginTop +'px';\r
+ styleRight.left = _w +marginX +'px';\r
+ styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';\r
+ styleRight.height = ( _h + marginBottom) +'px';\r
+ \r
+ styleBottom.top = ( _h +marginTop) +'px';\r
+ styleBottom.left = marginX +'px';\r
+ styleBottom.width = _w +'px';\r
+ styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';\r
+ }\r
+ }\r
+ })();\r
+\r
+\r
+/* ----------------------------------------\r
+ * PANEL_CONTROL\r
+ * - controler\r
+ * - mouseEventListener\r
+ * \r
+ * panel-border の表示と onPanelResize の通知．\r
+ * panel drag.\r
+ * \r
+ */\r
+ var PANEL_CONTROL = ( function(){\r
+ var ELM_PANEL = document.getElementById('panel-tools-container'),\r
+ ELM_PANEL_STYLE = ELM_PANEL.style,\r
+ DEFAULT_PANEL_WIDTH = 400,\r
+ DEFAULT_PANEL_HEIGHT = 300,\r
+ borderSize = 2,\r
+ panelW, panelH, panelX, panelY,\r
+ offsetX, offsetY, startX, startY,\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
+ isDraggable = false;\r
+ } else {\r
+ currentListener === null && updateMouseCursor( 'move');\r
+ isDraggable = true;\r
+ }\r
+ }\r
+ \r
+ return {\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
+ },\r
+ close: function(){\r
+ \r
+ },\r
+ x: function(){\r
+ return panelX;\r
+ },\r
+ y: function(){\r
+ return panelY;\r
+ },\r
+ resize: function( isResizerTopAction, _x, _y, _w, _h){\r
+ panelX = _x !== undefined ? _x : panelX;\r
+ panelY = _y !== undefined ? _y : panelY;\r
+ panelW = _w !== undefined ? _w : panelW;\r
+ panelH = _h !== undefined ? _h : panelH;\r
+ \r
+ ELM_PANEL_STYLE.left = ( panelX -borderSize) +'px';\r
+ ELM_PANEL_STYLE.top = ( panelY -borderSize) +'px';\r
+ ELM_PANEL_STYLE.width = panelW +'px';\r
+ ELM_PANEL_STYLE.height = panelH +'px';\r
+ \r
+ PANEL_RESIZER_TOP.onPanelResize( panelX, panelY, panelW, panelH);\r
+ PANEL_RESIZER_BOTTOM.onPanelResize( panelX, panelY, panelW, panelH);\r
+ GRID_CONTROL.onPanelResize( panelX, panelY);\r
+ WHITE_GLASS_CONTROL.onPanelResize( panelX, panelY, panelW, panelH);\r
+ COMIC_ELEMENT_CONTROL.onPanelResize( panelX, panelY, panelW, panelH, isResizerTopAction === true);\r
+ },\r
+ onWindowResize: function( _windowW, _windowH){\r
+ panelX = Math.floor(( _windowW - panelW) / 2);\r
+ panelY = Math.floor(( _windowH - panelH) / 2);\r
+ PANEL_CONTROL.resize();\r
+ },\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ if( isDraggable === true && isDragging === true){\r
+ PANEL_CONTROL.resize( false, startX +_mouseX -offsetX, startY +_mouseY -offsetY);\r
+ }\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ if( isDraggable === true){\r
+ isDragging = false;\r
+ updateMouseCursor( '');\r
+ }\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ if( isDraggable === true){\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ startX = panelX;\r
+ startY = panelY;\r
+ isDragging = true;\r
+ updateMouseCursor( 'move');\r
+ return true;\r
+ }\r
+ },\r
+ busy: function(){\r
+ return isDragging === true;\r
+ } \r
+ }\r
+ })();\r
+\r
+/* --------------------------------------------------------------------------------------------\r
+ * PanelResizerClass\r
+ * - mouseEventListener\r
+ */\r
+ var PanelResizerClass = function( ID, isTop){\r
+ var ELM = document.getElementById( ID),\r
+ BORDER_WIDTH = 2,\r
+ RESIZER_HEIGHT = 30,\r
+ x = -BORDER_WIDTH /2,\r
+ y = isTop === true ? ( -5 -RESIZER_HEIGHT -BORDER_WIDTH) : 0,\r
+ w,\r
+ h = RESIZER_HEIGHT,\r
+ panelX, panelY, panelW, panelH,\r
+ offsetY, startY, startH,\r
+ isDragging = false,\r
+ MOUSE_CURSOR = updateMouseCursor;\r
+ \r
+ function restoreState( arg){\r
+ if( arg && arg.length > 3){\r
+ PANEL_CONTROL.resize( isTop, arg[ 0] || panelX, arg[ 1] || panelY, arg[ 2] || panelW, arg[ 3] || panelH);\r
+ }\r
+ }\r
+ \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
+ 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 _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
+ }\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
+ \r
+ PanelResizerClass = undefined;\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_CONTROL.saveState,\r
+ jqStage,\r
+ jqConsoleParent,\r
+ jqConsoleWrapper,\r
+ jqConsoleTail,\r
+ jqImgConsole, jqTextConsole,\r
+ currentElement = null,\r
+ currentType = -1,\r
+ visible = false,\r
+ imgConsoleWidth, imgConsoleHeight,\r
+ textConsoleWidth, textConsoleHeight,\r
+ consoleWidth, consoleHeight,\r
+ consoleX, consoleY,\r
+ tailSize = 10,\r
+ buttonClickable = false;\r
+ \r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack);\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward);\r
+ \r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del);\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit);\r
+ pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change);\r
+ \r
+ function buttonBackOrForward( isBack){\r
+ var offest = jqConsoleWrapper.offset();\r
+ jqConsoleWrapper.css( {\r
+ position: isBack === true ? '' : 'absolute',\r
+ left: isBack === true ? consoleX : offest.left,\r
+ top: isBack === true ? consoleY : offest.top\r
+ });\r
+ buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);\r
+ buttonClickable = !isBack;\r
+ }\r
+ function layerBack(){\r
+ if( currentElement === null) return;\r
+ if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return;\r
+ INFOMATION_WINDOW.update( currentElement);\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
+ }\r
+ function layerForward(){\r
+ if( currentElement === null) return;\r
+ if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return;\r
+ INFOMATION_WINDOW.update( currentElement);\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
+ }\r
+ function del(){\r
+ if( currentElement === null) return;\r
+ buttonBackOrForward( true);\r
+ COMIC_ELEMENT_CONTROL.remove( currentElement);\r
+ SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
+ }\r
+ function edit(){\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
+ pettanr.premiumSatge.bootInOverlay( currentElement.getArtistID(), currentElement.resourcePicture );\r
+ }\r
+ function onImageSelect( resourcePicture ){\r
+ currentElement.resourcePicture( resourcePicture );\r
+ }\r
+ return {\r
+ init: function(){\r
+ jqStage = jqEditor;\r
+ jqConsoleTail = $( '#comic-element-consol-tail');\r
+ jqImgConsole = $( '#image-element-consol').hide();\r
+ var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0));\r
+ imgConsoleWidth = imgConsoleSize.width;\r
+ imgConsoleHeight = imgConsoleSize.height;\r
+ \r
+ jqTextConsole = $( '#text-element-consol').hide();\r
+ var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0));\r
+ textConsoleWidth = textConsoleSize.width;\r
+ textConsoleHeight = textConsoleSize.height;\r
+ \r
+ jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();\r
+ jqConsoleParent = jqConsoleWrapper.parent();\r
+ \r
+ $( '#edit-text-button').click( edit);\r
+ $( '#delete-image-button, #delete-text-button').click( del);\r
+ $( '#change-image-button').click( change);\r
+ $( '#layer-forward-button, #forward-text-button').click( layerForward);\r
+ $( '#layer-back-button, #back-text-button').click( layerBack);\r
+ \r
+ delete CONSOLE_CONTROLER.init;\r
+ },\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
+ var _currentType = _currentElement.type,\r
+ _z = _currentElement.z;\r
+ if( currentType !== _currentType){\r
+ currentType = _currentType;\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
+ DELETE_BUTTON.visible( true);\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
+ consoleY = Math.floor( ( _h -consoleHeight) /2);\r
+ jqConsoleWrapper.css( {\r
+ left: consoleX,\r
+ top: consoleY\r
+ }).removeClass( 'console-out');\r
+ } else {\r
+ consoleY = _h +tailSize;\r
+ jqConsoleWrapper.css( {\r
+ left: consoleX,\r
+ top: consoleY\r
+ }).addClass( 'console-out');\r
+ }\r
+ },\r
+ hide: function (){\r
+ visible === true && jqConsoleWrapper.hide();\r
+ visible = false;\r
+ currentElement = null;\r
+ LAYER_BACK_BUTTON.visible( false);\r
+ LAYER_FORWARD_BUTTON.visible( false);\r
+ DELETE_BUTTON.visible( false);\r
+ EDIT_BUTTON.visible( false);\r
+ CHANGE_BUTTON.visible( false);\r
+ },\r
+ x: function(){ return consoleX;},\r
+ y: function(){ return consoleY;},\r
+ w: function(){ return consoleWidth;},\r
+ h: function(){ return consoleHeight;},\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){\r
+ buttonClickable === true && buttonBackOrForward( true);\r
+ return false;\r
+ }\r
+ buttonClickable === false && buttonBackOrForward( false);\r
+ return true;\r
+ },\r
+ onMouseOut: function( _mouseX, _mouseY){\r
+ buttonClickable === true && buttonBackOrForward( true);\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
+ SIZE = pettanr.util.getElementSize( ELM_MOVER).width,\r
+ SIN = Math.sin,\r
+ COS = Math.cos,\r
+ ATAN = Math.atan,\r
+ FLOOR = Math.floor,\r
+ DEG_TO_RAD = Math.PI / 180,\r
+ RAD_TO_DEG = 1 /DEG_TO_RAD,\r
+ currentText = null,\r
+ tailX, tailY,\r
+ x, y, w, h,\r
+ balloonW, balloonH, balloonA, radA,\r
+ visible = false,\r
+ startA;\r
+ \r
+ return {\r
+ update: function ( _w, _h, _a){\r
+ balloonW = _w !== undefined ? _w : balloonW;\r
+ balloonH = _h !== undefined ? _h : balloonH;\r
+ balloonA = _a !== undefined ? _a : balloonA;\r
+ radA = balloonA *DEG_TO_RAD;\r
+ tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);\r
+ tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);\r
+ ELM_MOVER.style.left = tailX +'px';\r
+ ELM_MOVER.style.top = tailY +'px';\r
+ //log.html( [ balloonW, balloonH, balloonA].join());\r
+ },\r
+ show: function( _currentText){\r
+ /*\r
+ * visibilityのほうがいい, display:none だと ie で描画が狂う\r
+ */\r
+ ELM_MOVER.style.visibility = '';\r
+ this.update( _currentText.w, _currentText.h, _currentText.angle());\r
+ currentText = _currentText;\r
+ },\r
+ hitTest: function( _mouseX, _mouseY){\r
+ var _x = tailX -SIZE /2,\r
+ _y = tailY -SIZE /2;\r
+ ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
+ ret === true && MOUSE_CURSOR( 'move');\r
+ return ret;\r
+ },\r
+ hide: function(){\r
+ ELM_MOVER.style.visibility = 'hidden';\r
+ currentText = null;\r
+ },\r
+ onStart: function( _currentText, _mouseX, _mouseY){\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
+ w = _currentText.w;\r
+ h = _currentText.h;\r
+ currentText = _currentText;\r
+ startA = _currentText.angle();\r
+ return true;\r
+ }\r
+ return false;\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ _mouseX = _mouseX -x -w /2;\r
+ _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換\r
+ \r
+ this.update( w, h,\r
+ _mouseX !== 0 ?\r
+ ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :\r
+ _mouseY > 0 ? 90 : -90\r
+ );\r
+ currentText && currentText.angle( balloonA);\r
+ INFOMATION_WINDOW.update( currentText);\r
+ },\r
+ onFinish: function(){\r
+ startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);\r
+ startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle());\r
+ currentText = null;\r
+ },\r
+ onCancel: function(){\r
+ currentText.angle( startA);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA);\r
+ currentText = null;\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
+ \r
+ var HIT_AREA = MOUSE_HIT_AREA,\r
+ POSITION_ARRAY = [],\r
+ FLOOR = Math.floor,\r
+ CURSOR_AND_FLIP = [\r
+ { cursor: 'n-resize', v: 3},\r
+ { cursor: 'e-resize', h: 2},\r
+ { cursor: 'e-resize', h: 1},\r
+ { cursor: 'n-resize', v: 0},\r
+ { cursor: 'nw-resize', h: 5, v: 6, vh: 7},\r
+ { cursor: 'ne-resize', h: 4, v: 7, vh: 6},\r
+ { cursor: 'ne-resize', h: 7, v: 4, vh: 5},\r
+ { cursor: 'nw-resize', h: 6, v: 5, vh: 4}\r
+ ],\r
+ elmResizerContainer = document.getElementById( 'comic-element-resizer-container'),\r
+ elmResizerContainerStyle = elmResizerContainer.style,\r
+ elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,\r
+ elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,\r
+ elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,\r
+ elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,\r
+ x, y, w, h,\r
+ currentIndex = -1,\r
+ currentElement,\r
+ currentIsTextElement = false;\r
+ \r
+ elmResizerContainerStyle.display = 'none';\r
+ \r
+ var RESIZE_WORK_ARRAY = [\r
+ { x: 0, w: 0, y: 1, h: -1}, //top\r
+ { x: 1, w: -1, y: 0, h: 0}, //left\r
+ { x: 0, w: 1, y: 0, h: 0}, //right\r
+ { x: 0, w: 0, y: 0, h: 1}, //bottom\r
+ { x: 1, w: -1, y: 1, h: -1}, //top-left\r
+ { x: 0, w: 1, y: 1, h: -1}, //top-right\r
+ { x: 1, w: -1, y: 0, h: 1}, //bottom-left\r
+ { x: 0, w: 1, y: 0, h: 1} //bottom-right\r
+ ],\r
+ startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
+ baseX, baseY, baseW, baseH,\r
+ currentX, currentY, currentW, currentH,\r
+ offsetX, offsetY,\r
+ lock = false,\r
+ error = 0;\r
+ \r
+ function draw( _x, _y, _w, _h){\r
+ x = _x !== undefined ? _x : x;\r
+ y = _y !== undefined ? _y : y;\r
+ w = _w !== undefined ? _w : w;\r
+ h = _h !== undefined ? _h : h;\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
+ {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
+ {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
+ {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}\r
+ );\r
+ }\r
+ \r
+ function update( _x, _y, _w, _h){\r
+ x = _x !== undefined ? _x : currentX;\r
+ y = _y !== undefined ? _y : currentY;\r
+ w = _w !== undefined ? _w : currentW;\r
+ h = _h !== undefined ? _h : currentH;\r
+ \r
+ if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){\r
+ if( startAspect >= 1){\r
+ _w = w;\r
+ w = Math.floor( startAspect * h);\r
+ x = x +( currentIndex % 2 === 0 ? _w -w : 0);\r
+ } else {\r
+ _h = h;\r
+ h = Math.floor( w / startAspect);\r
+ y = y + ( currentIndex <= 5 ? _h -h : 0);\r
+ }\r
+ }\r
+ draw( x, y, w, h);\r
+ currentElement.resize( x, y, w, h);\r
+ currentIsTextElement === true && TAIL_OPERATOR.update( w, h);\r
+ CONSOLE_CONTROLER.show( currentElement, w, h);\r
+ INFOMATION_WINDOW.update( currentElement);\r
+ }\r
+ \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( _flipH, _flipV);\r
+ }\r
+ return {\r
+ update: draw,\r
+ index: function( _mouseX, _mouseY){\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
+ elmResizerContainer.className = 'current-resizer-is-' +i;\r
+ return currentIndex = i;\r
+ }\r
+ }\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
+ elmResizerContainer.className = 'current-resizer-is-' +i;\r
+ return currentIndex = i;\r
+ }\r
+ }\r
+ MOUSE_CURSOR( '');\r
+ elmResizerContainer.className = '';\r
+ return -1;\r
+ },\r
+ show: function( _currentElement){\r
+ currentElement = _currentElement;\r
+ currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;\r
+ elmResizerContainerStyle.display = '';\r
+ },\r
+ hide: function(){\r
+ currentElement = null;\r
+ elmResizerContainerStyle.display = 'none';\r
+ },\r
+ onStart: function( _currentElement, _mouseX, _mouseY){\r
+ currentElement = _currentElement;\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
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ startX = baseX = _currentElement.x;\r
+ startY = baseY = _currentElement.y;\r
+ startW = baseW = _currentElement.w;\r
+ startH = baseH = _currentElement.h;\r
+ if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){\r
+ startFilpV = _currentElement.flipV();\r
+ startFilpH = _currentElement.flipH(); \r
+ }\r
+ startAspect = startW /startH;\r
+ return true;\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ var com = RESIZE_WORK_ARRAY[ currentIndex],\r
+ moveX = _mouseX -offsetX,\r
+ moveY = _mouseY -offsetY,\r
+ _updated = moveX !== 0 || moveY !== 0,\r
+ _x, _y, _w, _h,\r
+ _thisError = 0;\r
+ \r
+ var _memoryX = 0,\r
+ _memoryY = 0,\r
+ _momoryW = 0,\r
+ _momoryH = 0;\r
+ /*\r
+ * Opera 11+ often forget values, why ??\r
+ */\r
+ while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){\r
+ _x = _x !== undefined ? _x : baseX +moveX *com.x;\r
+ _y = _y !== undefined ? _y : baseY +moveY *com.y;\r
+ _w = _w !== undefined ? _w : baseW +moveX *com.w;\r
+ _h = _h !== undefined ? _h : baseH +moveY *com.h;\r
+ error += _thisError === 0 ? 0 : 1;\r
+ ++_thisError;\r
+ if( _thisError > 9999){\r
+ ++error\r
+ //alert( 'opera error' +error);\r
+ this.onCancel;\r
+ return;\r
+ }\r
+ }\r
+ \r
+ if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){\r
+ \r
+ } else \r
+ if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){\r
+ //return;\r
+ if( _w < MIN_ELEMENT_SIZE){\r
+ //_x += Math.abs( MIN_ELEMENT_SIZE -_w);\r
+ _x = currentX;\r
+ _w = MIN_ELEMENT_SIZE;\r
+ }\r
+ if( _h < MIN_ELEMENT_SIZE){\r
+ //_y += Math.abs( MIN_ELEMENT_SIZE -_h);\r
+ _y = currentY;\r
+ _h = MIN_ELEMENT_SIZE;\r
+ }\r
+ } else \r
+ if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){\r
+ return;\r
+ } else \r
+ if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){\r
+\r
+ if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){\r
+ // flipH\r
+ _memoryX = _x;\r
+ baseX = _x = _x +_w;\r
+ baseY = _y;\r
+ baseW = _w = _memoryX -_x;\r
+ baseH = _h;\r
+ flip( true, false);\r
+ flipV = currentElement.flipV();\r
+ } else \r
+ if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){\r
+ // flipV\r
+ _memoryY = _y;\r
+ baseX = _x;\r
+ baseY = _y = _y +_h;\r
+ baseW = _w;\r
+ baseH = _h = _memoryY -_y;\r
+ flip( false, true);\r
+ flipH = currentElement.flipH();\r
+ } else {\r
+ // flipVH\r
+ _memoryX = _x;\r
+ _memoryY = _y;\r
+ baseX = _x = _x +_w;\r
+ baseY = _y = _y +_h;\r
+ baseW = _w = _memoryX -_x;\r
+ baseH = _h = _memoryY -_y;\r
+ flip( true, true);\r
+ flipV = currentElement.flipV();\r
+ flipH = currentElement.flipH();\r
+ }\r
+ _updated = true;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY; \r
+ }\r
+ currentX = _x;\r
+ currentY = _y;\r
+ currentW = _w;\r
+ currentH = _h;\r
+ _updated === true && update( _x, _y, _w, _h);\r
+ \r
+ log.html( [\r
+ 'currentIndex:', currentIndex, \r
+ 'baseW', baseW, 'baseH', baseH,'<br>',\r
+ 'mouse', _mouseX, _mouseY,'<br>',\r
+ 'move', moveX, moveY,'<br>',\r
+ 'xy', _x, _y, 'wh',_w, _h,'<br>',\r
+ 'com.w', com.w, 'com.h', com.h,'<br>',\r
+ 'current',currentW, currentH,'<br>',\r
+ 'result', y, h,\r
+ 'err', error\r
+ ].join( ' , '));\r
+ },\r
+ onFinish: function(){\r
+ MOUSE_CURSOR( '');\r
+ if( w === startW && h === startH && x === startX && y === startY) return;\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h);\r
+ currentElement.resize( x, y, w, h);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH);\r
+ },\r
+ onCancel: function(){\r
+ MOUSE_CURSOR( '');\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);\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
+ lock: function( _lock){\r
+ if( _lock !== undefined){\r
+ elmResizerContainerStyle.borderColor = _lock === true ? 'blue' : '';\r
+ lock = _lock;\r
+ }\r
+ return lock;\r
+ },\r
+ onShiftUpdate: update,\r
+ onCtrlUpdate: update\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
+ var currentElement,\r
+ startX, startY,\r
+ x, y,\r
+ offsetX, offsetY,\r
+ isCopy = false;\r
+ \r
+ function update( _x, _y){\r
+ x = _x !== undefined ? _x : x;\r
+ y = _y !== undefined ? _y : y;\r
+ RESIZE_OPERATOR.update( x, y);\r
+ currentElement.resize( x, y);\r
+ INFOMATION_WINDOW.update( currentElement);\r
+ }\r
+ \r
+ return {\r
+ onStart: function( _currentElement, _mouseX, _mouseY){\r
+ currentElement = _currentElement;\r
+ offsetX = _mouseX;\r
+ offsetY = _mouseY;\r
+ startX = x = _currentElement.x;\r
+ startY = y = _currentElement.y;\r
+ MOUSE_CURSOR( 'move');\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ var moveX = _mouseX -offsetX,\r
+ moveY = _mouseY -offsetY,\r
+ _x = startX +moveX,\r
+ _y = startY +moveY;\r
+ if( GRID_ENABLED() === true){\r
+ _x = Math.floor( _x / 10) * 10;\r
+ _y = Math.floor( _y / 10) * 10;\r
+ }\r
+ update( _x, _y);\r
+ },\r
+ onFinish: function(){\r
+ MOUSE_CURSOR( '');\r
+ if( x === startX && y === startY) return;\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y);\r
+ currentElement.resize( x, y);\r
+ COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY);\r
+ },\r
+ onCancel: function(){\r
+ MOUSE_CURSOR( '');\r
+ COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY);\r
+ currentElement.animate( startX, startY);\r
+ },\r
+ onShiftUpdate: update,\r
+ onCtrlUpdate: update\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_CONTROL.saveState,\r
+ GRID_ENABLED = GRID_CONTROL.enabled,\r
+ HIT_AREA = MOUSE_HIT_AREA,\r
+ currentIsTextElement = false,\r
+ currentOperator = null,\r
+ currentElement = null,\r
+ currentx, currenty, currentw, currenth, angle, flipV, flipH;\r
+\r
+ function resize( _x, _y, _w, _h, _angle){\r
+ currentx = _x !== undefined ? _x : currentx;\r
+ currenty = _y !== undefined ? _y : currenty;\r
+ currentw = _w !== undefined ? _w : currentw;\r
+ currenth = _h !== undefined ? _h : currenth;\r
+ angle = _angle !== undefined ? _angle : angle;\r
+\r
+ RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);\r
+ currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);\r
+ CONSOLE_CONTROLER.show( currentElement, currentw, currenth);\r
+ INFOMATION_WINDOW.update( currentElement);\r
+ }\r
+ function show( _currentElement){\r
+ currentElement === null && RESIZE_OPERATOR.show( _currentElement);\r
+ if( currentElement !== _currentElement){\r
+ currentElement = _currentElement;\r
+ \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
+ flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
+ \r
+ resize(\r
+ _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,\r
+ currentIsTextElement === true ? _currentElement.angle() : 0\r
+ );\r
+ }\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( 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
+ 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 === 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
+ 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
+ startH = startH !== undefined ? startH : currenth;\r
+ startA = startA !== undefined ? startA : angle;\r
+ startFilpV = startFilpV !== undefined ? startFilpV : flipV;\r
+ startFilpH = startFilpH !== undefined ? startFilpH : flipH;\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
+ busy: function(){\r
+ return currentOperator !== null;\r
+ },\r
+ hitTest: function( _mouseX, _mouseY, _comicElement ){\r
+ var _x, _y, _w, _h;\r
+ if( _comicElement === currentElement){\r
+ var _consoleX = CONSOLE_CONTROLER.x();\r
+ _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
+ _y = currenty -HIT_AREA;\r
+ var _consoleW = CONSOLE_CONTROLER.w();\r
+ _w = ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;\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
+ }\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
+ //show( _currentElement);\r
+ if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){\r
+ currentOperator = TAIL_OPERATOR;\r
+ } else\r
+ if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){\r
+ currentOperator = RESIZE_OPERATOR;\r
+ } else {\r
+ POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)\r
+ currentOperator = POSITION_OPERATOR;\r
+ }\r
+ },\r
+ onMouseMove: function( _currentElement, _mouseX, _mouseY){\r
+ show( _currentElement);\r
+ if( currentOperator !== null){\r
+ currentOperator.onDrag( _mouseX, _mouseY); \r
+ } else\r
+ if( currentElement !== null){\r
+ CONSOLE_CONTROLER.onMouseMove( _mouseX -currentx, _mouseY -currenty);\r
+ if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentx, _mouseY -currenty) === false){\r
+ RESIZE_OPERATOR.index( _mouseX, _mouseY);\r
+ }\r
+ }\r
+ },\r
+ onMouseUp: function( _currentElement, _mouseX, _mouseY){\r
+ currentOperator !== null && currentOperator.onFinish();\r
+ currentOperator = null;\r
+ }\r
+ }\r
+ })();\r
+ /*\r
+ * // COMIC_ELEMENT_OPERATION_MANAGER\r
+ */\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
+ * ImageElementClass\r
+ */\r
+ var jqImageElementOrigin;\r
+ var ImageElementClass = function( data ){\r
+ jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
+ \r
+ var JQ_WRAPPER = jqImageElementOrigin.clone( true ),\r
+ SAVE = HISTORY_CONTROL.saveState,\r
+ HIT_AREA = MOUSE_HIT_AREA,\r
+ w = data.width,\r
+ h = data.height,\r
+ x, y, z, timing,\r
+ flipH = w < 0 ? -1 : 1,\r
+ flipV = h < 0 ? -1 : 1,\r
+ resourcePicture,\r
+ actualW,\r
+ actualH,\r
+ reversibleImage = null,\r
+ instance = this;\r
+ w = Math.floor( w );\r
+ h = Math.floor( h );\r
+\r
+ function onAnimeComplete(){\r
+ 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 = timing;\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
+ SAVE( 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
+ left: x,\r
+ top: y,\r
+ width: w,\r
+ height: h\r
+ }, 250, onAnimeComplete );\r
+ animate !== true && onAnimeComplete();\r
+ }\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
+ this.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
+ this.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
+ this.destroy = function(){\r
+ reversibleImage.destroy();\r
+ JQ_WRAPPER.remove();\r
+ JQ_WRAPPER = reversibleImage = resourcePicture = data = instance = SAVE = null;\r
+ delete this.destroy;\r
+ }\r
+ }\r
+ ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );\r
+/*\r
+ * / ImageElementClass\r
+ * --------------------------------------------------------------------------------------------\r
+ */\r
+\r
+\r
+/* --------------------------------------------------------------------------------------------\r
+ * TextElementClass\r
+ * \r
+ * type\r
+ * 0.none\r
+ * 1.speach balloon\r
+ * 2.think\r
+ * 3.bom\r
+ * 4.black-box( dq style)\r
+ * 5.blue-box( ff style)\r
+ * \r
+ */\r
+ var jqTextElementOrigin;\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
+ TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
+ HIT_AREA = MOUSE_HIT_AREA,\r
+ SAVE = HISTORY_CONTROL.saveState,\r
+ type = data.balloon_template_id,\r
+ text = ( function(){\r
+ var _speachs = data.speaches_attributes;\r
+ for( var k in _speachs ){\r
+ return _speachs[ k ].content || '';\r
+ }\r
+ return '';\r
+ }),\r
+ balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),\r
+ x, y, w, h, a,\r
+ instance = this;\r
+ \r
+ JQ_WRAPPER.find( 'img').eq( 0).replaceWith( balloon.elm );\r
+ \r
+ function updateType( _type ){\r
+ if( type !== _type ){\r
+ type = _type || type;\r
+ balloon.type( type );\r
+ }\r
+ }\r
+ function updateAngle( _a){\r
+ if( _a !== undefined && a !== _a ){\r
+ a = _a !== undefined ? _a : a;\r
+ balloon.angle( a );\r
+ }\r
+ }\r
+ function updateText( _text){\r
+ text = _text || text || '';\r
+ TEXT_ELM.html( text );\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( undefined, undefined, undefined, undefined, _a);\r
+ return a;\r
+ }\r
+ this.text = function( _text){\r
+ if( _text && text !== _text) {\r
+ SAVE( updateText, text || '', _text);\r
+ updateText( _text);\r
+ }\r
+ return text;\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
+ instance.h = h = _h !== undefined ? _h : h;\r
+ a = _a !== undefined ? _a : a;\r
+ \r
+ JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {\r
+ left: x,\r
+ top: y,\r
+ width: w,\r
+ height: h\r
+ }, 250,\r
+ function(){\r
+ balloon.resize( a, w, h);\r
+ }\r
+ ); \r
+ animate !== true && balloon.resize( a, w, h);\r
+ }\r
+ this.animate = function ( _x, _y, _w, _h, _a ){\r
+ instance.resize( _x, _y, _w, _h, _a, true);\r
+ }\r
+ this.destroy = function(){\r
+ JQ_WRAPPER.remove();\r
+ balloon.destroy();\r
+ balloon = null;\r
+ delete instance.destroy;\r
+ }\r
+ this.getAsJSON = function(){\r
+ \r
+ }\r
+ this.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
+ this.getAsHTML = function( isAbsoluteUrl, isXHTML){\r
+ var url = 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
+ this.getAsXML = function(){}\r
+ }\r
+ TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );\r
+\r
+/* --------------------------------------------------------------------------------------------\r
+ * COMIC_ELEMENT_CONTROL\r
+ * - mouseEventListener\r
+ */\r
+ var COMIC_ELEMENT_CONTROL = ( function(){\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
+ * append, remove, replace\r
+ * \r
+ * comicElement には、z-position と dom-index がある。\r
+ * z-position は 表示上の位置。大きいほど前に表示される（ z-index）\r
+ * dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。\r
+ * \r
+ * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。\r
+ * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。\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
+ * \r
+ * \r
+ * remove comicElement\r
+ * 1. remove\r
+ * 2. renumber z\r
+ */\r
+ function appendComicElement( _comicElement ) {\r
+ var z = _comicElement.z,\r
+ l = COMIC_ELEMENT_ARRAY.length,\r
+ _jqElm = _comicElement.$.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
+ _jqElm.fadeIn();\r
+ } else {\r
+ var insertIndex = 0;\r
+ for( var i = 0; i < l; ++i ){\r
+ if( COMIC_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
+ }\r
+ renumber();\r
+ }\r
+ function removeComicElement( _comicElement ) {\r
+ var l = COMIC_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
+ renumber();\r
+ _comicElement.$.stop().css( {\r
+ filter: '',\r
+ opacity: ''\r
+ }).fadeOut( onFadeOut );\r
+ currentElement = currentElement === _comicElement ? null : currentElement;\r
+ return;\r
+ }\r
+ }\r
+ function onFadeOut(){\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
+ }\r
+ /*\r
+ * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
+ * jqElmの並び替え。\r
+ */\r
+ function renumber(){\r
+ var l = COMIC_ELEMENT_ARRAY.length,\r
+ _comicElement, 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
+ jqNext = jqElm;\r
+ }\r
+ }\r
+ function replaceComicElement( _comicElement, goForward ){\r
+ // COMIC_ELEMENT_ARRAYの再構築\r
+ var l = COMIC_ELEMENT_ARRAY.length,\r
+ i = ( function(){\r
+ for( var ret = 0; ret < l; ++ret ){\r
+ if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement ) 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
+ } 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
+ }\r
+ renumber();\r
+ return true;\r
+ }\r
+ function restoreReplaceElement( arg){\r
+ replaceComicElement( arg[ 0], arg[ 1]);\r
+ }\r
+ \r
+ return {\r
+ init: function(){\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( COMIC_ELEMENT_ARRAY.length > 0){\r
+ _comicElm = COMIC_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
+ /*\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
+ for( var i = 0; i < l; i++){\r
+ COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
+ }\r
+ }\r
+ panelX = _panelX;\r
+ panelY = _panelY;\r
+ panelW = _panelW;\r
+ panelH = _panelH;\r
+ \r
+ ELM_CONTAINER.style.width = _panelW +'px';\r
+ ELM_CONTAINER.style.height = _panelH +'px';\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
+ _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
+ _elm.onMouseMove( _x, _y);\r
+ return true;\r
+ }\r
+ if( _elm.hitTest( _x, _y) === true ){\r
+ _elm.onMouseMove( _x, _y ); // cursor\r
+ return true;\r
+ }\r
+ if( currentLock === true){\r
+ currentLockTest = true;\r
+ return true;\r
+ }\r
+ }\r
+ for( var i=0; i<l; i++){\r
+ _elm = COMIC_ELEMENT_ARRAY[ i ];\r
+ // hitTest\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
+ return false;\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ var ret = currentElement !== null && currentElement.busy() === true;\r
+ ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);\r
+ currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY) === true;\r
+ RESIZE_OPERATOR.lock( currentLock);\r
+ INFOMATION_WINDOW.lock( currentLock);\r
+ return ret;\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ startX = panelX;\r
+ startY = panelY;\r
+ if( currentElement === null) return false\r
+ currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);\r
+ currentLockTest = true;\r
+ return true;\r
+ },\r
+ busy: function(){\r
+ return currentElement !== null;\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
+ 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: COMIC_ELEMENT_ARRAY.length,\r
+ width: data.width,\r
+ height: data.height\r
+ }\r
+ }\r
+ var _comicElement = new ImageElementClass( data );\r
+ _comicElement.init && _comicElement.init();\r
+ appendComicElement( _comicElement );\r
+ _comicElement.animate( undefined, undefined, data.width, data.height );\r
+ SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true );\r
+ }\r
+ },\r
+ createTextElement: function( data ){\r
+ var _comicElement;\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: COMIC_ELEMENT_ARRAY.length,\r
+ width: 200,\r
+ height: 200,\r
+ speaches_attributes: {\r
+ text1: {\r
+ content: 'Hello'\r
+ }\r
+ }\r
+ }\r
+ _comicElement = new TextElementClass( data );\r
+ _comicElement.init();\r
+ pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), _comicElement, onTextInput );\r
+ } else {\r
+ _comicElement = new TextElementClass( data );\r
+ _comicElement.init();\r
+ onTextInput( _comicElement );\r
+ }\r
+ function onTextInput( _comicElement ){\r
+ appendComicElement( _comicElement );\r
+ SAVE( restoreComicElement, [ false, _comicElement ], [ true, _comicElement ], true );\r
+ }\r
+ },\r
+ getAsHTML: function( isAbsoluteUrl, isXHTML){\r
+ var HTML_ARRAY = [],\r
+ l = COMIC_ELEMENT_ARRAY.length,\r
+ _timing = 0,\r
+ _comicElement;\r
+\r
+ while( HTML_ARRAY.length < l){\r
+ _comicElement = getComicElementByTiming();\r
+ if( _comicElement === null) break;\r
+ HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
+ }\r
+ function getComicElementByTiming(){\r
+ while( _timing < l *2){\r
+ for(var i=0; i<l; ++i){\r
+ if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
+ ++_timing;\r
+ return COMIC_ELEMENT_ARRAY[ i];\r
+ }\r
+ }\r
+ ++_timing;\r
+ }\r
+ return null;\r
+ }\r
+ HTML_ARRAY.unshift(\r
+ [\r
+ '<div class="panel" ',\r
+ 'style="',\r
+ 'height:', panelH, 'px;',\r
+ 'background-color:', ';',\r
+ '"',\r
+ '>'\r
+ ].join( '')\r
+ ); \r
+ HTML_ARRAY.push( '</div>');\r
+ \r
+ return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);\r
+ },\r
+ getAsJsonString: function(){\r
+ var JSON_STRING_ARRAY = [],\r
+ IMAGE_ARRAY = [],\r
+ BALLOON_ARRAY = [],\r
+ l = COMIC_ELEMENT_ARRAY.length,\r
+ _timing = 0,\r
+ _comicElement,\r
+ cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+ \r
+ while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){\r
+ _comicElement = getComicElementByTiming();\r
+ if( _comicElement === null) break;\r
+ _comicElement.type === PANEL_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
+ }\r
+ }\r
+ ++_timing;\r
+ }\r
+ return null;\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
+ * end of COMIC_ELEMENT_CONTROL\r
+ */\r
+\r
+\r
+\r
+ function updateMouseCursor( _cursor){\r
+ if( currentCursor !== _cursor){\r
+ currentCursor = _cursor;\r
+ setTimeout( update, 0);\r
+ }\r
+ function update(){\r
+ ELM_MOUSE_EVENT_CHATCHER.style.cursor = currentCursor;\r
+ }\r
+ }\r
+ function centering(){\r
+ instance.onPaneResize( windowW, windowH);\r
+ } \r
+ function mouseEventRellay( e){\r
+ var _mouseX = e.pageX,\r
+ _mouseY = e.pageY,\r
+ rellayMethod = e.type === 'mousedown' ?\r
+ 'onMouseDown' :\r
+ ( e.type === 'mousemove' ? 'onMouseMove' : 'onMouseUp');\r
+ if( currentListener !== null && currentListener.busy() === true){\r
+ currentListener[ rellayMethod]( _mouseX, _mouseY);\r
+ } else {\r
+ currentListener = null;\r
+ var l = MOUSE_LISTENER_ARRAY.length,\r
+ _listener;\r
+ for( var i=0; i<l; ++i){\r
+ _listener = MOUSE_LISTENER_ARRAY[ i];\r
+ if( _listener[ rellayMethod]( _mouseX, _mouseY) === true){\r
+ currentListener = _listener;\r
+ break;\r
+ }\r
+ }\r
+ }\r
+ // 文字選択の禁止\r
+ //!document.selection && window.getSelection().removeAllRanges();\r
+ e.stopPropagation();\r
+ return false;\r
+ }\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
+ var panelW, panelH,\r
+ borderSize,\r
+ fileData, panelElements, panelElm;\r
+ \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
+ } 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
+ \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
+ if( instance.firstOpen) return;\r
+ /*\r
+ * ieは +'px'が不要みたい\r
+ */\r
+ jqEditor.get( 0).style.height = _windowH +'px';\r
+ ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\r
+ \r
+ WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);\r
+ MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);\r
+ PANEL_CONTROL.onWindowResize( _windowW, _windowH);\r
+ }\r
+});\r
+\r
+\r
+pettanr.comicConsole = pettanr.view.registerApplication( function(){\r
+ var jqWrap,\r
+ ID = 'comicConsole',\r
+ elmWrap = document.getElementById( 'comic-console-wrapper' ),\r
+ elmHeader = document.getElementById( 'comic-console-header' ),\r
+ elmProgress = document.getElementById( 'comic-console-progress' ),\r
+ inputTitle, inputW, inputH, inputVisible, inputEditable,\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 = 1;\r
+ } else\r
+ if( _name === 'comic[editable]'){\r
+ _select.selectedIndex = 0;\r
+ }\r
+ }\r
+ try {\r
+ elmForm.submit();\r
+ } catch( e){\r
+ elmProgress.innerHTML = 'submit() err..';\r
+ isUploading = false;\r
+ setTimeout( clickCancel , 3000);\r
+ return;\r
+ }\r
+ if( pettanr.ua.isIE){\r
+ elmIframe.onreadystatechange = detectIframe;\r
+ } else {\r
+ elmIframe.onload = onIframeUpdate;\r
+ }\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
+ 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
+ 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
+ instance.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();\r
+ $( '#comic-console-post-button').click( clickOK );\r
+ $( '#comic-console-cancel-button').click( clickCancel );\r
+ \r
+ var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
+ inputTitle = CREATER( document.getElementById( 'comic-console-title'), null, ID);\r
+ inputW = CREATER( document.getElementById( 'comic-console-width'), null, ID);\r
+ inputH = CREATER( document.getElementById( 'comic-console-height'), null, ID);\r
+ inputVisible = CREATER( document.getElementById( 'comic-console-visible'), null, ID);\r
+ inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);\r
+ \r
+ delete instance.init;\r
+ }\r
+ this.jqWrap = null;\r
+ this.onOpen = function( w, h ){\r
+ instance.init && instance.init();\r
+ \r
+ jqWrap.show();\r
+ \r
+ inputTitle.start();\r
+ \r
+ elmUploader = document.createElement( 'div' );\r
+ elmUploader.id = 'newcomic';\r
+ elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';\r
+ elmWrap.appendChild( elmUploader);\r
+ \r
+ var elmScript = document.createElement( 'script');\r
+ elmScript.type = 'text\/javascript';\r
+ elmScript.src = pettanr.CONST.CREATE_COMIC_JS;\r
+ elmWrap.appendChild( elmScript);\r
+ \r
+ elmProgress.innerHTML = 'loading form.';\r
+ \r
+ if( timer === null){\r
+ timer = window.setInterval( detectForm, 250);\r
+ }\r
+ \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
+ 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
+ function submit(){\r
+ try {\r
+ elmForm.submit();\r
+ } catch( e){\r
+ elmProgress.innerHTML = 'submit() err..';\r
+ isUploading = false;\r
+ setTimeout( clickCancel , 3000);\r
+ return;\r
+ }\r
+ \r
+ if( pettanr.ua.isIE){\r
+ elmIframe.onreadystatechange = detectIframe;\r
+ } else {\r
+ elmIframe.onload = onLoad;\r
+ }\r
+ elmProgress.innerHTML = 'uploading..';\r
+ }\r
+ /*\r
+ * ie の 場合、readyState をチェック．
+ */\r
+ function detectIframe(){\r
+ if ( elmIframe.readyState === 'complete') {\r
+ elmIframe.onreadystatechange = new Function();\r
+ elmIframe.onreadystatechange = null;\r
+ onLoad();\r
+ }\r
+ }\r
+ function onLoad(){\r
+ elmIframe.onload = null;\r
+ ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+ elmProgress.innerHTML = 'success!';\r
+ setTimeout( clickCancel , 1000);\r
+ isUploading = false;\r
+ }\r
+ \r
+ function detectForm(){\r
+ elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
+ if( elmForm){\r
+ var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+ _input;\r
+ for( var i=0, l= _inputList.length; i<l; ++i){\r
+ _input = _inputList[ i ];\r
+ if( _input.type === 'file'){\r
+ elmFile = _input;\r
+ }\r
+ if( _input.type === 'submit'){\r
+ _input.style.display = 'none';\r
+ }\r
+ }\r
+ window.clearInterval( timer);\r
+ timer = null;\r
+ pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
+ elmProgress.innerHTML = 'create iframe';\r
+ }\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
+ 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
+ instance.jqWrap = 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.jqWrap = null;\r
+ this.onOpen = function( w, h){\r
+ instance.init && instance.init();\r
+ /*\r
+ * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
+ */ \r
+ elmScript = document.createElement( 'script');\r
+ elmScript.type = 'text\/javascript';\r
+ elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
+ document.body.appendChild( elmScript);\r
+ \r
+ jqWrap.show();\r
+\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
+ 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
+ instance.jqWrap = 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.jqWrap = null;\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
+ 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
+ instance.jqWrap = 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.jqWrap = null;\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
+ instance = this;\r
+ //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
+ \r
+ function clickOK(){\r
+ pettanr.overlay.hide();\r
+ pettanr.outputConsole.shutdown();\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
+ instance.jqWrap = jqWrap = $( '#output-console-wrapper').hide();\r
+ jqOutputArea = $( '#output-area');\r
+ delete instance.init;\r
+ }\r
+ this.jqWrap = null;\r
+ this.onOpen = function( _w, _h, _text ){\r
+ instance.init && instance.init();\r
+ \r
+ jqWrap.show();\r
+ instance.onWindowResize( _w, _h );\r
+ jqOutputArea.val( _text).focus();\r
+ }\r
+ this.onWindowResize = 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
OSDN Git Service
