+++ /dev/null
-/*\r
- * pettanR work.js\r
- * version 0.4.5\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
- * - TEXT_EDITOR_CONTROL\r
- * - IMAGE_GROUP_EXPROLER\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 = ( function(){\r
-\r
- var COMIC_ELEMENT_TYPE_IMAGE = 0,\r
- COMIC_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
- 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( typeof _argBack.length === 'number'){ // isArray\r
- while( _argBack.length > 0){\r
- _value = _argBack.shift();\r
- _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
- }\r
- }\r
- if( typeof _argForword.length === 'number'){\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
-/* ----------------------------------------\r
- * OUTPUT_CONSOLE\r
- * - overlay\r
- */\r
- var OUTPUT_CONSOLE = ( function(){\r
- var jqWrap, jqOutputArea,\r
- ID = 'outputConsole';\r
- //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
- \r
- function close(){\r
- jqWrap.hide();\r
- jqOutputArea.val('');\r
- }\r
- function clickOK(){\r
- pettanr.overlay.hide();\r
- close(); \r
- }\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();\r
- jqOutputArea = $( '#output-area');\r
- delete OUTPUT_CONSOLE.init;\r
- },\r
- jqWrap: null,\r
- show: function( _text){\r
- jqWrap.show();\r
-\r
- \r
- pettanr.overlay.show( this);\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( windowH -jqWrap.height()) /2)\r
- }\r
- ); \r
- \r
- jqOutputArea.val( _text).focus();\r
- },\r
- onWindowResize: function(){\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( windowH -jqWrap.height()) /2)\r
- }\r
- );\r
- },\r
- onClose: close,\r
- ID: 'textEditor'\r
- }\r
- })();\r
-\r
-/* ----------------------------------------\r
- * SAVE_CONTROL\r
- * - controler\r
- */\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.view.show( 'entrance');\r
- }\r
- \r
- function outputAsHtml(){\r
- OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
- }\r
- function outputAsJsonString(){\r
- OUTPUT_CONSOLE.show( 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
- * Text Editor\r
- * - overlay\r
- */\r
- var TEXT_EDITOR_CONTROL = ( function(){\r
- var jqWrap, jqTextarea, jqButton,\r
- textElement, onUpdateFunction,\r
- ID = 'textEditor';\r
- //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
- \r
- function close(){\r
- jqWrap.hide();\r
- textElement = onUpdateFunction = null; \r
- }\r
- function clickOK(){\r
- pettanr.overlay.hide();\r
- textElement && textElement.text( jqTextarea.val());\r
- onUpdateFunction && onUpdateFunction( textElement);\r
- close(); \r
- }\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
- jqTextarea = $( '#speach-editor').keydown( function( e){\r
- if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
- clickOK();\r
- e.preventDefault();\r
- e.keyCode = 0;\r
- e.cancelBubble = true;\r
- e.returnValue = false;\r
- return false;\r
- }\r
- });\r
- jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
- delete TEXT_EDITOR_CONTROL.init;\r
- },\r
- jqWrap: null,\r
- show: function( _textElement, _onUpdateFunction){\r
- textElement = _textElement;\r
- onUpdateFunction = _onUpdateFunction || null;\r
- pettanr.overlay.show( this);\r
- var h = _textElement.h;\r
- jqWrap.show().css( {\r
- left: _textElement.x +PANEL_CONTROL.x(),\r
- top: _textElement.y +PANEL_CONTROL.y(),\r
- width: _textElement.w,\r
- height: h\r
- });\r
- jqTextarea.val( _textElement.text()).focus();\r
- \r
- /*\r
- * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。\r
- */\r
- pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){\r
- var rows = 0;\r
- while( jqTextarea.height() < h){\r
- rows++;\r
- jqTextarea.attr( 'rows', rows);\r
- }\r
- rows > 1 && jqTextarea.attr( 'rows', rows -1);\r
- }, 0);\r
- },\r
- onWindowResize: function(){\r
- textElement && this.show( textElement);\r
- },\r
- onClose: close,\r
- ID: ID\r
- }\r
- })();\r
-\r
-/* ----------------------------------------\r
- * Image Group Exproler\r
- * - overlay\r
- */\r
- var IMAGE_GROUP_EXPROLER = ( function(){\r
- var ICON_ARRAY = [],\r
- WHEEL_DELTA = 64,\r
- containerW, containerH, wrapX,\r
- jqWrap, jqContainer, jqItemOrigin,\r
- itemW, itemH,\r
- jqName, jqButton, buttonW,\r
- //onUpdateFunction,\r
- _g_onUpdateFunction,\r
- winW,\r
- onEnterInterval = null;\r
- \r
- var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',\r
- THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
- LIMIT_FILESIZE = 1024 * 10; // 10KB\r
- var IMAGE_DATA = {\r
- pen001: [\r
- {\r
- "created_at": "2011-11-13T08:57:39Z", \r
- "ext": "png", \r
- "filesize": 9969, \r
- "height": 463, \r
- "id": 1, \r
- "updated_at": "2011-11-13T08:57:39Z", \r
- "width": 441\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:57:54Z", \r
- "ext": "gif", \r
- "filesize": 5418, \r
- "height": 500, \r
- "id": 2, \r
- "updated_at": "2011-11-13T08:57:54Z", \r
- "width": 500\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:06Z", \r
- "ext": "gif", \r
- "filesize": 8758, \r
- "height": 464, \r
- "id": 3, \r
- "updated_at": "2011-11-13T08:58:06Z", \r
- "width": 366\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:23Z", \r
- "ext": "gif", \r
- "filesize": 9383, \r
- "height": 480, \r
- "id": 4, \r
- "updated_at": "2011-11-13T08:58:23Z", \r
- "width": 392\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:33Z", \r
- "ext": "gif", \r
- "filesize": 11061, \r
- "height": 500, \r
- "id": 5, \r
- "updated_at": "2011-11-13T08:58:33Z", \r
- "width": 500\r
- }, \r
- {\r
- "created_at": "2011-11-20T09:50:43Z", \r
- "ext": "gif", \r
- "filesize": 1131, \r
- "height": 126, \r
- "id": 6, \r
- "updated_at": "2011-11-20T09:50:43Z", \r
- "width": 259\r
- }, \r
- {\r
- "created_at": "2011-11-20T09:50:55Z", \r
- "ext": "gif", \r
- "filesize": 1125, \r
- "height": 126, \r
- "id": 7, \r
- "updated_at": "2011-11-20T09:50:55Z", \r
- "width": 259\r
- }, \r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 8, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 9, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 10, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 11, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-22T09:17:20Z", \r
- "ext": "gif", \r
- "filesize": 9055, \r
- "height": 473, \r
- "id": 12, \r
- "updated_at": "2011-11-22T09:17:20Z", \r
- "width": 405\r
- }, \r
- {\r
- "created_at": "2011-11-22T10:11:07Z", \r
- "ext": "gif", \r
- "filesize": 8758, \r
- "height": 464, \r
- "id": 13, \r
- "updated_at": "2011-11-22T10:11:07Z", \r
- "width": 366\r
- }, \r
- {\r
- "created_at": "2011-11-24T09:05:12Z", \r
- "ext": "gif", \r
- "filesize": 6431, \r
- "height": 386, \r
- "id": 16, \r
- "updated_at": "2011-11-24T09:05:12Z", \r
- "width": 453\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 17, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 18, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 19, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 20, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 21, \r
- "updated_at": "2011-11-26T04:52:12Z",\r
- "width": 306\r
- }\r
- ]\r
- }\r
- \r
- var ImageGroupIconClass = function( INDEX, data){\r
- var JQ_ICON_WRAP = jqItemOrigin.clone( true),\r
- SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),\r
- LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,\r
- reversibleImage = null,\r
- onEnterFlag = false,\r
- imgW, imgH;\r
- JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
- jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
- \r
- function onImageLoad( url, _imgW, _imgH){\r
- if( reversibleImage === null) {\r
- alert( url);\r
- return;\r
- }\r
- imgW = _imgW || data.width || 64;\r
- imgH = _imgH || data.height || 64;\r
- JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
- var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
- h = Math.floor( imgH *zoom),\r
- w = Math.floor( imgW *zoom);\r
- reversibleImage.elm.style.width = w +'px';\r
- reversibleImage.elm.style.height = h +'px';\r
- reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
- reversibleImage.resize( w, h);\r
- JQ_ICON_WRAP.click( onClick);\r
- }\r
- \r
- function onClick( e){\r
- pettanr.overlay.hide();\r
- if( _g_onUpdateFunction) {\r
- if( LOW_SRC === null){\r
- window[ _g_onUpdateFunction]( SRC, imgW, imgH);\r
- window[ _g_onUpdateFunction] = null;\r
- } else {\r
- var _onLoad = pettanr.util.createGlobalFunc( [\r
- 'function( url, w, h){',\r
- 'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,', h || ', data.height,');',\r
- 'window["', _g_onUpdateFunction, '"] = null;',\r
- '}'\r
- ].join( '')),\r
- _onError = pettanr.util.createGlobalFunc( [\r
- 'function( url){',\r
- 'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',\r
- 'window["', _g_onUpdateFunction, '"] = null;',\r
- '}'\r
- ].join( ''));\r
- pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);\r
- window[ _onLoad] = window[ _onError] = undefined;\r
- }\r
- }\r
- close();\r
- }\r
- \r
- return {\r
- onEnter: function(){\r
- if( onEnterFlag === true) return;\r
- reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);\r
- JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
- onEnterFlag = true; \r
- },\r
- destroy: function(){\r
- reversibleImage && reversibleImage.destroy();\r
- JQ_ICON_WRAP.remove();\r
- reversibleImage = JQ_ICON_WRAP = null;\r
- delete this.destroy;\r
- }\r
- }\r
- }\r
- \r
- function close(){\r
- jqContainer.stop().animate( {\r
- height: 0,\r
- top: Math.floor( windowH /2)\r
- }, function(){\r
- jqWrap.hide()\r
- });\r
- while( ICON_ARRAY.length > 0){\r
- ICON_ARRAY.shift().destroy();\r
- }\r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = _g_onUpdateFunction = null;\r
- }\r
- function onEnterShowImage(){\r
- var l = ICON_ARRAY.length,\r
- _start = -wrapX /itemW -1,\r
- _end = _start + winW /itemW +1;\r
- for( var i=0; i<l; ++i){\r
- _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
- }\r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = null;\r
- }\r
- function clickOK(){\r
- pettanr.overlay.hide();\r
- close();\r
- }\r
- function onMouseWheel( e, delta){\r
- if( winW < containerW){\r
- wrapX += delta *WHEEL_DELTA;\r
- wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
- jqContainer.css( { left: wrapX});\r
- \r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
- }\r
- //e.stopPropagation();\r
- return false; \r
- }\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
- jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);\r
- containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;\r
- jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
- var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));\r
- itemW = itemSize.width;\r
- itemH = itemSize.height;\r
- jqName = $( '#gruop-name-display');\r
- jqButton = $( '#image-gruop-button').click( clickOK);\r
- buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;\r
- \r
- delete IMAGE_GROUP_EXPROLER.init;\r
- },\r
- jqWrap: null,\r
- show: function( _onUpdateFunction){\r
- //onUpdateFunction = _onUpdateFunction;\r
- if( _onUpdateFunction){\r
- _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);\r
- } else {\r
- _g_onUpdateFunction = null;\r
- }\r
- pettanr.overlay.show( this);\r
- \r
- var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],\r
- l = CURRENT_GROUP_ARRAY.length;\r
- for( var i=0; i<l; ++i){\r
- ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));\r
- }\r
- wrapX = 0;\r
- containerW = l * itemW;\r
- \r
- winW = windowW;\r
- var w = winW > containerW ? winW : containerW,\r
- h = windowH > containerH ? containerH : windowH;\r
- \r
- jqWrap.show();\r
- jqContainer.css( {\r
- width: w,\r
- height: 0,\r
- left: 0,\r
- top: Math.floor( windowH /2)\r
- }).stop().animate( {\r
- height: h,\r
- top: Math.floor( windowH /2 -h /2)\r
- });\r
- \r
- jqButton.css( {\r
- left: Math.floor( winW /2 -buttonW /2),\r
- top: Math.floor( windowH /2 +containerH /2 +10)\r
- });\r
- \r
- onEnterShowImage();\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- var w = _windowW > containerW ? _windowW : containerW,\r
- h = _windowH > containerH ? containerH : _windowH,\r
- offsetW = Math.floor( _windowW /2 -winW /2);\r
- winW = _windowW;\r
- if( offsetW <= 0){ // smaller\r
- jqContainer.css( {\r
- left: offsetW,\r
- width: w\r
- }).animate( {\r
- left: 0,\r
- top: Math.floor( _windowH /2 -h /2)\r
- }); \r
- } else {\r
- jqContainer.css( { // bigger\r
- left: 0,\r
- width: w,\r
- borderLeftWidth: offsetW\r
- }).animate( {\r
- top: Math.floor( _windowH /2 -h /2),\r
- borderLeftWidth: 0\r
- });\r
- }\r
- jqButton.css( {\r
- left: Math.floor( _windowW /2 -buttonW /2),\r
- top: Math.floor( _windowH /2 +containerH /2 +10)\r
- });\r
- onEnterShowImage();\r
- },\r
- onClose: close,\r
- ID: 'imageGroupExproler'\r
- }\r
- })();\r
-\r
-/* ----------------------------------------\r
- * WINDOWS_CONTROL\r
- * - contloler\r
- * - mouseEventListener\r
- */ \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
- onFirstOpen: function( _w, _h){\r
- finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
- delete this.onFirstOpen;\r
- },\r
- onOpen: function( _w, _h){\r
- finder.onOpen( _w, _h);\r
- },\r
- onResize: function( _w, _h){\r
- finder.onWindowResize( _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 === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,\r
- w = currentElement !== null ? currentElement.w : 0,\r
- h = currentElement !== null ? currentElement.h : 0,\r
- actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,\r
- actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,\r
- wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,\r
- hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,\r
- 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.update( x);\r
- inputY.update( y);\r
- inputZ.update( z);\r
- _elementType === 1 && inputA.update( a);\r
- inputW.update( w);\r
- inputH.update( h);\r
- _elementType === 0 && inputPercentW.update( wPercent);\r
- _elementType === 0 && inputPercentH.update( hPercent); \r
- } 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 = _panelW || DEFAULT_PANEL_WIDTH;\r
- panelH = _panelH || DEFAULT_PANEL_HEIGHT;\r
- //panelX = Math.floor( ( windowW -panelW) /2);\r
- //panelY = Math.floor( ( windowH -panelH) /2);\r
- borderSize = _borderSize !== undefined ? _borderSize : borderSize;\r
- \r
- //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
- return {\r
- 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
- 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
- onMouseUp: function( _mouseX, _mouseY){\r
- if( isDragging !== true) return;\r
- ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
- isDragging = false;\r
- MOUSE_CURSOR( '');\r
- },\r
- busy: function(){\r
- return isDragging\r
- },\r
- onPanelResize: function( _x, _y, _w, _h){\r
- panelX = _x;\r
- panelY = _y;\r
- if( panelW !== _w){\r
- ELM.style.width = ( _w +2) +'px';\r
- panelW = _w;\r
- }\r
- panelH = _h;\r
- y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
- w = panelW +2;\r
- }\r
- }\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 !== COMIC_ELEMENT_TYPE_TEXT) return;\r
- TEXT_EDITOR_CONTROL.show( currentElement);\r
- buttonBackOrForward( true);\r
- }\r
- function change(){\r
- if( currentElement === null) return;\r
- buttonBackOrForward( true);\r
- IMAGE_GROUP_EXPROLER.show( currentElement.url);\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
- 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 === COMIC_ELEMENT_TYPE_IMAGE);\r
- jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
- consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
- consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
- }\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 === COMIC_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 !== COMIC_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;\r
- for( var 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( var 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 === COMIC_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 === COMIC_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 === COMIC_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 === COMIC_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 === COMIC_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 === COMIC_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 === COMIC_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
- 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( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){\r
- var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;\r
- return {\r
- $: JQ_WAPPER,\r
- type: COMIC_ELM_TYPE,\r
- x: x,\r
- y: y,\r
- w: w,\r
- h: h, \r
- z: z,\r
- timing: timing,\r
- hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest( _mouseX, _mouseY, this);},\r
- shift: function( _shiftX, _shiftY){\r
- update( this.x +_shiftX, this.y +_shiftY);\r
- },\r
- busy: function(){\r
- return OPERATOR.busy();\r
- },\r
- onMouseMove: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseUp( this, _mouseX, _mouseY);\r
- },\r
- onMouseDown: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseDown( this, _mouseX, _mouseY);\r
- }\r
- }\r
- };\r
-\r
-/* --------------------------------------------------------------------------------------------\r
- * ImageElementClass\r
- */\r
- var jqImageElementOrigin;\r
- var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){\r
- jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
- \r
- var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
- OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
- SAVE = HISTORY_CONTROL.saveState,\r
- HIT_AREA = MOUSE_HIT_AREA,\r
- reversibleImage = null,\r
- actualW = 0, actualH = 0,\r
- flipH = w < 0 ? -1 : 1,\r
- flipV = h < 0 ? -1 : 1,\r
- instance;\r
- w = Math.floor( w);\r
- h = Math.floor( h);\r
- \r
- function update( _x, _y, _w, _h, animate){\r
- 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
- function onAnimeComplete(){\r
- reversibleImage.resize( flipH * w, flipV * h);\r
- }\r
- \r
- function updateUrl( _url){\r
- if( url === _url) return;\r
- url = _url || url;\r
- var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){\r
- actualW = _actualW;\r
- actualH = _actualH;\r
- });\r
- if( reversibleImage !== null){\r
- JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);\r
- reversibleImage.destroy();\r
- } else {\r
- JQ_WRAPPER.append( _reversibleImage.elm);\r
- }\r
- reversibleImage = _reversibleImage;\r
- }\r
- return pettanr.util.extend(\r
- new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),\r
- {\r
- init: function(){\r
- instance = this;\r
- updateUrl();\r
- update();\r
- delete this.init;\r
- },\r
- flip: function( _flipH, _flipV){\r
- if( _flipH !== true && _flipV !== true) return;\r
- flipH = _flipH === true ? -flipH : flipH;\r
- flipV = _flipV === true ? -flipV : flipV;\r
- reversibleImage.resize( flipH * w, flipV * h);\r
- },\r
- flipV: function(){\r
- return flipV;\r
- },\r
- flipH: function(){\r
- return flipH;\r
- },\r
- url: function( _url, _actualW, _actualH){\r
- if( _url && _url !== url){\r
- SAVE( updateUrl, url, _url);\r
- actualW = _actualW;\r
- actualH = _actualH;\r
- updateUrl( _url);\r
- }\r
- return url;\r
- },\r
- actualW: function(){ return actualW;},\r
- actualH: function(){ return actualH;},\r
- keepSize: false,\r
- resize: update,\r
- animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
- flipH = _flipH !== undefined ? _flipH : flipH;\r
- flipV = _flipV !== undefined ? _flipV : flipV;\r
- update( _x, _y, _w, _h, true);\r
- },\r
- getAsHTML: function( isAbsoluteUrl, isXHTML){\r
- return [\r
- '<img ',\r
- 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
- 'width="', w, '" ',\r
- 'height="', h, '" ',\r
- 'style="', \r
- 'left:', x, 'px;',\r
- 'top:', y, 'px;',\r
- 'z-index:', this.z, ';',\r
- '"',\r
- isXHTML !== true ? '>' : ' \/>'\r
- ].join( '');\r
- },\r
- getAsJsonString: function(){\r
- var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
- return [\r
- '"new', this.timing, '": {', cr,\r
- '"resource_picture_id": 1,', cr,\r
- '"x": ', x, ',', cr,\r
- '"y": ', y, ',', cr,\r
- '"z": ', this.z, ',', cr,\r
- '"width": ', w, ',', cr,\r
- '"height": ', h, ',', cr,\r
- '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
- '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
- '"t": ', this.timing, cr,\r
- '}'\r
- ].join( '');\r
- },\r
- destroy: function(){\r
- reversibleImage.destroy();\r
- JQ_WRAPPER.remove();\r
- JQ_WRAPPER = reversibleImage = OPERATOR = null;\r
- delete this.destroy;\r
- }\r
- }\r
- );\r
- }\r
-/*\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( type, a, text, x, y, z, w, h, timing){\r
- jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
- var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
- _MODERN = $( $( '#textElementTemplete').remove().html());\r
- return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;\r
- })();\r
- \r
- var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
- XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),\r
- TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
- OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
- HIT_AREA = MOUSE_HIT_AREA,\r
- SAVE = HISTORY_CONTROL.saveState,\r
- instance;\r
- \r
- JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);\r
- \r
- function update( _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
- XBROWSER_BALLOON.resize( a, w, h);\r
- }\r
- ); \r
- animate !== true && XBROWSER_BALLOON.resize( a, w, h);\r
- }\r
- \r
- function updateType( _type){\r
- if( type !== _type){\r
- type = _type || type;\r
- XBROWSER_BALLOON.type( type);\r
- }\r
- }\r
- function updateAngle( _a){\r
- if( _a !== undefined && a !== _a){\r
- a = _a !== undefined ? _a : a;\r
- XBROWSER_BALLOON.angle( a);\r
- }\r
- }\r
- function updateText( _text){\r
- text = _text || text || '';\r
- TEXT_ELM.html( text);\r
- }\r
- \r
- return pettanr.util.extend(\r
- new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),\r
- {\r
- init: function(){\r
- instance = this;\r
- updateText();\r
- update();\r
- delete this.init;\r
- },\r
- angle: function( _a){\r
- _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
- return a;\r
- },\r
- text: function( _text){\r
- if( _text && text !== _text) {\r
- SAVE( updateText, text || '', _text);\r
- updateText( _text);\r
- }\r
- return text;\r
- },\r
- resize: update,\r
- animate: function ( _x, _y, _w, _h, _a){\r
- update( _x, _y, _w, _h, _a, true);\r
- },\r
- destroy: function(){\r
- JQ_WRAPPER.remove();\r
- XBROWSER_BALLOON.destroy();\r
- OPERATOR = null;\r
- delete this.destroy;\r
- },\r
- getAsJSON: function(){\r
- \r
- },\r
- getAsJsonString: function(){\r
- var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
- return [\r
- '"new', this.timing, '": {', cr,\r
- '"balloon_template_id": ', 1, ',', cr,\r
- '"system_picture_id": ', 1, ',', cr,\r
- '"size": ', 1, ',', cr,\r
- '"tail": ', a, ',', cr,\r
- '"x": ', x, ',', cr,\r
- '"y": ', y, ',', cr,\r
- '"z": ', this.z, ',', cr,\r
- '"t": ', this.timing, ',', cr,\r
- '"width": ', w, ',', cr,\r
- '"height": ', h, ',', cr,\r
- '"speaches_attributes": {', cr,\r
- '"newf', this.timing, '": {', cr,\r
- '"content": "', text, '",', cr,\r
- '"x": ', x, ',', cr,\r
- '"y": ', y, ',', cr,\r
- '"t": ', 0, ',', cr,\r
- '"width": ', w, ',', cr,\r
- '"height": ', h, cr,\r
- '}', cr,\r
- '}', cr,\r
- '}'\r
- ].join( '');\r
- },\r
- getAsHTML: function( isAbsoluteUrl, isXHTML){\r
- var url = XBROWSER_BALLOON.getURL();\r
- return [\r
- '<img ',\r
- 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
- 'width="', w, '" ',\r
- 'height="', h, '" ',\r
- 'style="', \r
- 'left:', x, 'px;',\r
- 'top:', y, 'px;',\r
- 'z-index:', this.z, ';',\r
- '"',\r
- isXHTML !== true ? '>' : ' \/>',\r
- pettanr.LINE_FEED_CODE_TEXTAREA,\r
- '<div class="balloon" style="',\r
- 'left:', x, 'px;',\r
- 'top:', y, 'px;',\r
- 'width:', w, 'px;',\r
- 'height:', h, 'px;',\r
- 'z-index:', this.z,\r
- '"><span>', text, '<\/span>', '<\/div>'\r
- \r
- ].join( '');\r
- },\r
- getAsXML: function(){}\r
- }\r
- );\r
- }\r
-\r
-/* --------------------------------------------------------------------------------------------\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
- _comicElement.init && _comicElement.init();\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
- \r
- appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));\r
- appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));\r
- /*\r
- * \r
- */\r
- log = $( '#operation-catcher-log');\r
- \r
- delete COMIC_ELEMENT_CONTROL.init;\r
- },\r
- open: function(){\r
- COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();\r
- },\r
- close: function(){\r
- while( COMIC_ELEMENT_ARRAY.length > 0){\r
- COMIC_ELEMENT_ARRAY.shift().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
- }\r
- }\r
- currentElement = null; \r
- COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
- log.html( [ _x, _y].join( ','));\r
- return false;\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- 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( url, imagesetID, x, y, z, w, h){\r
- w = w || 200; //ActualWidth\r
- h = h || 150; //ActualHeight\r
- x = x || Math.floor( panelW /2 -w /2);\r
- y = y || Math.floor( panelH /2 -h /2);\r
- function onImageSelect( _url, _w, _h){\r
- var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);\r
- appendComicElement( _comicElement);\r
- _comicElement.animate( undefined, undefined, _w, _h);\r
- SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true); \r
- }\r
- IMAGE_GROUP_EXPROLER.show( onImageSelect);\r
- },\r
- createTextElement: function( type, angle, text, x, y, z, w, h){\r
- type = type || 0;\r
- angle = angle || 0;\r
- text = text || '';\r
- w = w || 200;\r
- h = h || 150;\r
- x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);\r
- y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);\r
- var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);\r
- TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
- appendComicElement( _comicElement);\r
- SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
- });\r
- },\r
- getAsHTML: function( isAbsoluteUrl, isXHTML){\r
- var HTML_ARRAY = [],\r
- l = COMIC_ELEMENT_ARRAY.length,\r
- _timing = 0,\r
- _comicElement;\r
-\r
- while( HTML_ARRAY.length < l){\r
- _comicElement = getComicElementByTiming();\r
- if( _comicElement === null) break;\r
- HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
- }\r
- function getComicElementByTiming(){\r
- while( _timing < l *2){\r
- for(var i=0; i<l; ++i){\r
- if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
- ++_timing;\r
- return COMIC_ELEMENT_ARRAY[ i];\r
- }\r
- }\r
- ++_timing;\r
- }\r
- return null;\r
- }\r
- HTML_ARRAY.unshift(\r
- [\r
- '<div class="panel" ',\r
- 'style="',\r
- 'height:', panelH, 'px;',\r
- 'background-color:', ';',\r
- '"',\r
- '>'\r
- ].join( '')\r
- ); \r
- HTML_ARRAY.push( '</div>');\r
- \r
- return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);\r
- },\r
- getAsJsonString: function(){\r
- var JSON_STRING_ARRAY = [],\r
- IMAGE_ARRAY = [],\r
- BALLOON_ARRAY = [],\r
- l = COMIC_ELEMENT_ARRAY.length,\r
- _timing = 0,\r
- _comicElement,\r
- cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
- \r
- while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){\r
- _comicElement = getComicElementByTiming();\r
- if( _comicElement === null) break;\r
- _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? \r
- IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :\r
- BALLOON_ARRAY.push( _comicElement.getAsJsonString());\r
- }\r
- function getComicElementByTiming(){\r
- while( _timing < l *2){\r
- for(var i=0; i<l; ++i){\r
- if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
- ++_timing;\r
- return COMIC_ELEMENT_ARRAY[ i];\r
- }\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
- pettanr.editor.onWindowResize( 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
- return {\r
- init: function( _option){\r
- option = _option;\r
- \r
- },\r
- firstOpen: function(){\r
- /*\r
- * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初\r
- * MENU_BAR_CONTROL,\r
- * WINDOW_CONTROL,\r
- * COMIC_ELEMENT_CONTROL,\r
- * PANEL_CONTROL\r
- * .busy() === true なら、そのままonMouseMove()にイベントを流す．\r
- * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．\r
- */\r
- MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\r
- \r
- CONSOLE_CONTROLER.init();\r
- \r
- OUTPUT_CONSOLE.init();\r
- TEXT_EDITOR_CONTROL.init();\r
- IMAGE_GROUP_EXPROLER.init();\r
-\r
- /*\r
- * centering\r
- */\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering); // ctrl + 0\r
- pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering); // ctrl + 0\r
- MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
- /*\r
- * jqMouseEventChacher は透明な要素で、\r
- * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事\r
- * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。\r
- */ \r
- jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)\r
- .mousemove( mouseEventRellay)\r
- .mousedown( mouseEventRellay)\r
- .mouseup( mouseEventRellay)\r
- .mouseout( mouseEventRellay);\r
- \r
- delete pettanr.editor.firstOpen;\r
- },\r
- onOpen: function( _file){\r
- if( pettanr.file.isFileInstance( _file) === true){\r
- // pettanr.file.isPettanFileInstance( _file) === true\r
- // \r
- }\r
- jqEditor = jqEditor || $( '#editor');\r
- \r
- HISTORY_CONTROL.open();\r
- \r
- WINDOWS_CONTROL.open();\r
- \r
- GRID_CONTROL.open();\r
- PANEL_CONTROL.open();\r
- \r
- COMIC_ELEMENT_OPERATION_MANAGER.open();\r
- COMIC_ELEMENT_CONTROL.open();\r
- \r
- // last\r
- MENU_BAR_CONTROL.open();\r
- \r
- pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();\r
- },\r
- onClose: function(){\r
- HISTORY_CONTROL.close();\r
- \r
- WINDOWS_CONTROL.close();\r
- \r
- GRID_CONTROL.close();\r
- PANEL_CONTROL.close();\r
- \r
- COMIC_ELEMENT_OPERATION_MANAGER.close();\r
- COMIC_ELEMENT_CONTROL.close();\r
- \r
- // last\r
- MENU_BAR_CONTROL.open();\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- windowW = _windowW;\r
- windowH = _windowH;\r
- if( pettanr.editor.firstOpen) return;\r
- /*\r
- * ieは +'px'が不要みたい\r
- */\r
- jqEditor.get( 0).style.height = _windowH +'px';\r
- ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\r
- \r
- WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);\r
- MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);\r
- PANEL_CONTROL.onWindowResize( _windowW, _windowH);\r
- },\r
- MIN_WIDTH: 320,\r
- MIN_HEIGHT: 320\r
- }\r
-})();\r
-\r
-// create hidden iframe\r
-// write script\r
-// setInterval\r
-pettanr.proxy = ( function(){\r
- \r
- function FormProxy( formJsUrl, callback){\r
- var timer = null,\r
- iWin, idoc;\r
-\r
- pettanr.util.createIframe( 'id00000', onCreateIframe);\r
- \r
- function onCreateIframe( _iframe){\r
- iWin = _iframe.contentWindow;\r
- idoc = _iframe.contentWindow.document;\r
-\r
- idoc.open();\r
- idoc.write( '<body>');\r
- idoc.writeln( '<script type="text\/javascript" src="' + pettanr.CONST.JQUERY_URL+ '"><\/script>');\r
- idoc.close();\r
-\r
- timer = window.setInterval( detect, 250 );\r
- }\r
- function detect(){\r
- if( iWin.jQuery){\r
- window.clearInterval( timer );\r
- //callback( idoc);\r
- iWin.jQuery( iWin).ready( onJQueryReady );\r
- }\r
- }\r
- function onJQueryReady(){\r
- callback( idoc);\r
- }\r
- }\r
- \r
- return {\r
- createFormProxy: function( _formJsUrl, _callback){\r
- new FormProxy( _formJsUrl, _callback);\r
- }\r
- }\r
- \r
-})();\r
-\r
-\r
-pettanr.comicConsole = ( function(){\r
- var COMIC_CONSOLE = ( function(){\r
- var jqWrap,\r
- ID = 'comicConsole',\r
- elmProgress = document.getElementById( 'comic-console-progress'),\r
- inputTitle, inputW, inputH, inputVisible, inputEditable,\r
- elmUploader = null;\r
- //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
- \r
- function clickOK(){\r
- // clickCancel();\r
- // pettanr.proxy.createFormProxy( pettanr.CONST.UPLOAD_PICTURE_JS, onCreateForm);\r
- elmProgress.innerHTML = '■';\r
- // set values\r
- // submit\r
- }\r
- function onCreateForm( iDocument){\r
- var div = iDocument.createElement( 'div');\r
- div.id = "uploader";\r
- iDocument.body.appendChild( div);\r
- \r
- var script = iDocument.createElement( 'script');\r
- script.type = 'text\/javascript';\r
- script.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
- iDocument.body.appendChild( script);\r
- \r
- elmProgress.innerHTML = '■■';\r
- \r
- var form = iDocument.forms[ 0 ];\r
- \r
- }\r
- \r
- function clickCancel(){\r
- pettanr.overlay.hide();\r
- COMIC_CONSOLE.onClose();\r
- }\r
- \r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();\r
- $( '#comic-console-post-button').click( clickOK );\r
- $( '#comic-console-cancel-button').click( clickCancel );\r
- \r
- var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
- inputTitle = CREATER( document.getElementById( 'comic-console-title'), null, ID);\r
- inputW = CREATER( document.getElementById( 'comic-console-width'), null, ID);\r
- inputH = CREATER( document.getElementById( 'comic-console-height'), null, ID);\r
- inputVisible = CREATER( document.getElementById( 'comic-console-visible'), null, ID);\r
- inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);\r
- \r
- delete COMIC_CONSOLE.init;\r
- },\r
- jqWrap: null,\r
- show: function( w, h){\r
- jqWrap.show();\r
-\r
- pettanr.overlay.show( COMIC_CONSOLE );\r
- \r
- inputTitle.start();\r
- COMIC_CONSOLE.onWindowResize( w, h);\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
- }\r
- );\r
- },\r
- onClose: function(){\r
- jqWrap.hide();\r
- },\r
- ID: ID\r
- }\r
- })();\r
- \r
- return {\r
- init: function(){\r
- COMIC_CONSOLE.init();\r
- delete pettanr.comicConsole.init;\r
- },\r
- onOpen: function( _file){\r
- if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
- // _data = _file.read();\r
- }\r
- },\r
- onClose: function(){\r
- \r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- },\r
- _quickAccessShow: function(){\r
- jqWindow = pettanr.jqWindow();\r
- var w = jqWindow.width(),\r
- h = jqWindow.height();\r
- COMIC_CONSOLE.show( w, h);\r
- }\r
- }\r
-})();\r
-\r
-pettanr.uploadConsole = ( function(){\r
- var UPLOAD_CONSOLE = ( function(){\r
- var jqWrap,\r
- ID = 'uploadConsole',\r
- TARGET_FRAME_NAME = 'targetFrame',\r
- elmContainer = document.getElementById( 'uploader'),\r
- elmProgress = document.getElementById( 'upload-console-progress'),\r
- timer = null,\r
- elmScript = null,\r
- elmForm = null,\r
- elmFile = null,\r
- elmIframe = null,\r
- isUploading = false;\r
- /*\r
- * upload ボタンが押されたらまず iframe をつくる．
- */\r
- function clickOK(){\r
- if( !elmForm || elmFile.value.length === 0) return false;\r
- pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
- elmProgress.innerHTML = 'uploading.';\r
- isUploading = true;\r
- return false;\r
- }\r
- /*\r
- * form の target に iframe を指定したのち submit();
- */\r
- function onCreateIframe( iframe ){\r
- elmContainer.appendChild( iframe );\r
- elmForm.target = iframe.name;\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
- \r
- if( pettanr.ua.isIE){\r
- iframe.onreadystatechange = detectIframe;\r
- } else {\r
- iframe.onload = onIframeUpdate;\r
- }\r
- elmIframe = iframe;\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
- 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 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
- }\r
- }\r
- /*\r
- *
- */\r
- function clickCancel(){\r
- if( isUploading === true) return false;\r
- pettanr.overlay.hide();\r
- UPLOAD_CONSOLE.onClose();\r
- return false;\r
- }\r
- \r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();\r
- $( '#upload-console-post-button').click( clickOK );\r
- $( '#upload-console-cancel-button').click( clickCancel );\r
-\r
- delete UPLOAD_CONSOLE.init;\r
- },\r
- jqWrap: null,\r
- show: function( w, h){\r
- /*\r
- * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
- */ \r
- elmScript = document.createElement( 'script');\r
- elmScript.type = 'text\/javascript';\r
- elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
- document.body.appendChild( elmScript);\r
- \r
- jqWrap.show();\r
- pettanr.overlay.show( UPLOAD_CONSOLE );\r
-\r
- if( timer === null){\r
- timer = window.setInterval( detectForm, 250);\r
- }\r
- \r
- elmProgress.innerHTML = '';\r
- \r
- UPLOAD_CONSOLE.onWindowResize( w, h);\r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- jqWrap.css(\r
- {\r
- left: Math.floor( ( _windowW -jqWrap.width()) /2),\r
- top: Math.floor( ( _windowH -jqWrap.height()) /2)\r
- }\r
- );\r
- },\r
- onClose: function(){\r
- elmForm !== null && $( elmContainer.children ).remove();\r
- elmForm = elmFile = null;\r
- isUploading = false;\r
- \r
- document.body.removeChild( elmScript);\r
- elmScript = null;\r
- \r
- if( timer !== null){\r
- window.clearInterval( timer);\r
- timer = null;\r
- }\r
- jqWrap.hide();\r
- },\r
- ID: ID\r
- }\r
- })();\r
- \r
- return {\r
- init: function(){\r
- UPLOAD_CONSOLE.init();\r
- delete pettanr.comicConsole.init;\r
- },\r
- onOpen: function( _file){\r
- if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
- // _data = _file.read();\r
- }\r
- },\r
- onClose: function(){\r
- \r
- },\r
- onWindowResize: function( _windowW, _windowH){\r
- },\r
- _quickAccessShow: function(){\r
- jqWindow = pettanr.jqWindow();\r
- var w = jqWindow.width(),\r
- h = jqWindow.height();\r
- UPLOAD_CONSOLE.show( w, h);\r
- }\r
- }\r
-})();
\ No newline at end of file
OSDN Git Service
