X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;ds=sidebyside;f=0.4.x%2Fjavascripts%2Fwork.js;h=8565e27d39a6119e2d8b3234ec3d50b96af3aa5f;hb=fbc8e8aa4dc1607d4b8812dd8e923bc22b50e723;hp=a56e152b936d2fde3d55ba724c6391fd5b8478a8;hpb=d832988712abc5e8baa2ea0f43f1db1f8fced762;p=pettanr%2FclientJs.git diff --git a/0.4.x/javascripts/work.js b/0.4.x/javascripts/work.js index a56e152..8565e27 100644 --- a/0.4.x/javascripts/work.js +++ b/0.4.x/javascripts/work.js @@ -1,6 +1,6 @@ /* * pettanR work.js - * version 0.4.1 + * version 0.4.28 * * author: * itozyun @@ -31,25 +31,12 @@ * */ - pettanr.LINE_FEED_CODE_TEXTAREA = ( function(){ - var text = document.getElementById( 'shadowTxtarea'), - form = text.parentNode; - form.parentNode.removeChild( form); - return text.value; - })(); - pettanr.LINE_FEED_CODE_PRE = ( function(){ - var pre = document.getElementById( 'shadowPre'); - pre.parentNode.removeChild( pre); - return pettanr.ua.isIE === true ? this.LINE_FEED_CODE_TEXTAREA : pre.innerHTML; // ie ?? - })(); /* ---------------------------------------- * pettanr.editor * - MENU_BAR_CONTROL - * - HISTORY + * - HISTORY_CONTROL * - SAVE_CONTROL - * - TEXT_EDITOR_CONTROL - * - IMAGE_GROUP_EXPROLER * - WINDOW_CONTROL * - WindowClass * - INFOMATION_WINDOW @@ -78,26 +65,33 @@ * * */ -pettanr.editor = ( function(){ +pettanr.editor = pettanr.view.registerApplication( function(){ - var COMIC_ELEMENT_TYPE_IMAGE = 0, - COMIC_ELEMENT_TYPE_TEXT = 1, + var PANEL_ELEMENT_TYPE_IMAGE = 0, + PANEL_ELEMENT_TYPE_TEXT = 1, MOUSE_LISTENER_ARRAY = [], - COMIC_ELEMENT_ARRAY = [], + PANEL_ELEMENT_ARRAY = [], ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'), MIN_PANEL_HEIGHT = 20, - MIN_OBJECT_SIZE = 19, + MIN_ELEMENT_SIZE = 19, MOUSE_HIT_AREA = 10, jqMouseEventChacher, jqEditor, windowW, windowH, currentListener = null, currentCursor = '', + instance = this, option, + comicID = -1, + panelID = -1, + panelTimming = -1, log; /* ---------------------------------------- * MENU BAR + * - mouseEventListener + * - controler + * * div * div.title * ul @@ -129,7 +123,6 @@ pettanr.editor = ( function(){ a.href = '#'; return ret; })(), - EMPTY_FUNCTION = new Function, ITEM_ARRAY = [], barH = pettanr.util.getElementSize( ELM_BAR).height, itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width, @@ -137,7 +130,7 @@ pettanr.editor = ( function(){ jqStage, jqBar; ELM_BAR.style.top = ( -barH) +'px'; - var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){ + var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter ){ var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true), ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0], elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0]; @@ -177,12 +170,12 @@ pettanr.editor = ( function(){ } } - var MenuBarItemClass = function( title, opt_callbackArray){ + var MenuBarItemClass = function( title){ var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true), ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0], ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0], INDEX = ITEM_ARRAY.length, - SELECTION_CALLBACK_ARRAY = opt_callbackArray || [], + SELECTION_CALLBACK_ARRAY = [], numSelection = 0, visible = false; ELM_TITLE.innerHTML = title; @@ -191,19 +184,10 @@ pettanr.editor = ( function(){ ELM_BAR.appendChild( ELM_WRAPPER); function onClick( e){ - var that = this, - i = ( function(){ - var parent = that.parentNode, - children = parent.getElementsByTagName( 'li'), - l = children.length; - for(var i=0; i= _mouseY){ @@ -318,9 +313,10 @@ pettanr.editor = ( function(){ /* ---------------------------------------- - * HISTORY + * HISTORY_CONTROL + * - controler */ - var HISTORY = ( function() { + var HISTORY_CONTROL = ( function() { var STACK_BACK = [], STACK_FORWARD = [], MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false), @@ -357,12 +353,44 @@ pettanr.editor = ( function(){ MENUBAR_BACK.visible( true); SAVE_CONTROL.panelUpdated( true); } + function destroyStack( _stack, _destroy){ + _stack.fn = null; + + var _argBack = _stack.argBack, + _argForword = _stack.argForword, + _value; + if( Type.isArray( _argBack ) === true ){ // isArray + while( _argBack.length > 0){ + _value = _argBack.shift(); + _destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy(); + } + } + if( Type.isArray( _argForword ) === true ){ + while( _argForword.length > 0){ + _value = _argForword.shift(); + _destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy(); + } + } + } return { init: function(){ log = $( '#history-log'); - delete HISTORY.init; + delete HISTORY_CONTROL.init; }, - saveState: function( _function, _argBack, _argForword, _destory) { + open: function(){ + HISTORY_CONTROL.init && HISTORY_CONTROL.init(); + }, + close: function(){ + MENUBAR_BACK.visible( false); + MENUBAR_FORWARD.visible( false); + while( STACK_BACK.length > 0){ + destroyStack( STACK_BACK.shift(), true ); + } + while( STACK_FORWARD.length > 0){ + destroyStack( STACK_FORWARD.shift(), true ); + } + }, + saveState: function( _function, _argBack, _argForword, _destroy) { STACK_BACK.push( { fn: _function, argBack: _argBack, @@ -371,37 +399,21 @@ pettanr.editor = ( function(){ }); MENUBAR_BACK.visible( true); SAVE_CONTROL.panelUpdated( true); - + + var _stack; while( STACK_FORWARD.length > 0){ - var _stack = STACK_FORWARD.shift(), - _destroy = _stack.destroy, - _value; - _argBack = _stack.argBack; - _argForword = _stack.argForword; - _stack.fn = null; - if( typeof _argBack === 'array'){ - while( _argBack.length > 0){ - _value = _argBack.shift(); - _destroy === true && typeof _value.destroy === 'function' && _value.destroy(); - } - } - if( typeof _argForword === 'array'){ - while( _argForword.length > 0){ - _value = _argForword.shift(); - _destroy === true && typeof _value.destroy === 'function' && _value.destroy(); - } - } + _stack = STACK_FORWARD.shift(); + destroyStack( _stack, _stack.destroy ); } MENUBAR_FORWARD.visible( false); } } })(); - /* ---------------------------------------- - * Save Control + * SAVE_CONTROL + * - controler */ - var SAVE_CONTROL = ( function(){ var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false), SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true), @@ -411,20 +423,35 @@ pettanr.editor = ( function(){ updated = false; function quit(){ + pettanr.editor.shutdown(); } function outputAsHtml(){ - alert( COMIC_ELEMENT_CONTROL.getAsHTML( true, false)); + pettanr.outputConsole.bootInOverlay( + pettanr.outputConsole.HTML, + comicID, panelID, panelTimming, + PANEL_CONTROL.w(), PANEL_CONTROL.h(), + 1, // border, BackgroundImage + PANEL_ELEMENT_ARRAY + ); } function outputAsJsonString(){ - alert( COMIC_ELEMENT_CONTROL.getAsJsonString()); + pettanr.outputConsole.bootInOverlay( + pettanr.outputConsole.JSON, + comicID, panelID, panelTimming, + PANEL_CONTROL.w(), PANEL_CONTROL.h(), + 1, // border, BackgroundImage + PANEL_ELEMENT_ARRAY + ); } return { + open: function(){}, + close: function(){}, quit: quit, panelUpdated: function( _updated){ - if( _updated !== undefined && updated !== _updated){ - SAVE.visible( !!_updated); - SAVE_AND_QUIT.visible( !!_updated); + if( _updated !== undefined && updated !== _updated ){ + SAVE.visible( !!_updated ); + SAVE_AND_QUIT.visible( !!_updated ); updated = !!_updated; } return updated; @@ -436,459 +463,9 @@ pettanr.editor = ( function(){ })(); /* ---------------------------------------- - * Text Editor (Overlay) - */ - - var TEXT_EDITOR_CONTROL = ( function(){ - var jqWrap, jqTextarea, jqButton, - textElement, onUpdateFunction; - - pettanr.key.addKeyDownEvent( this.ID, 69, false, false, clickOK); - - function close(){ - jqWrap.hide(); - textElement = onUpdateFunction = null; - } - function clickOK(){ - pettanr.overlay.hide(); - textElement && textElement.text( jqTextarea.val()); - onUpdateFunction && onUpdateFunction( textElement); - close(); - } - return { - init: function(){ - this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide(); - jqTextarea = $( '#speach-editor').keydown( function( e){ - if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){ - clickOK(); - e.preventDefault(); - e.keyCode = 0; - e.cancelBubble = true; - e.returnValue = false; - return false; - } - }); - jqButton = $( '#speach-edit-complete-button').click( clickOK); - delete TEXT_EDITOR_CONTROL.init; - }, - jqWrap: null, - show: function( _textElement, _onUpdateFunction){ - textElement = _textElement; - onUpdateFunction = _onUpdateFunction || null; - pettanr.overlay.show( this); - var h = _textElement.h; - jqWrap.show().css( { - left: _textElement.x +PANEL_CONTROL.x(), - top: _textElement.y +PANEL_CONTROL.y(), - width: _textElement.w, - height: h - }); - jqTextarea.val( _textElement.text()).focus(); - - /* - * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。 - */ - pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){ - var rows = 0; - while( jqTextarea.height() < h){ - rows++; - jqTextarea.attr( 'rows', rows); - } - rows > 1 && jqTextarea.attr( 'rows', rows -1); - }, 0); - }, - onWindowResize: function(){ - textElement && this.show( textElement); - }, - onClose: close, - ID: 'textEditor' - } - })(); - -/* ---------------------------------------- - * Image Group Exproler (Overlay) - */ - var IMAGE_GROUP_EXPROLER = ( function(){ - var ICON_ARRAY = [], - WHEEL_DELTA = 64, - containerW, containerH, wrapX, - jqWrap, jqContainer, jqItemOrigin, - itemW, itemH, - jqName, jqButton, buttonW, - onUpdateFunction, - winW, - onEnterInterval = null; - - var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/', - THUMB_PATH = BASE_PATH, // + 'thumbnail/', - LIMIT_FILESIZE = 1024 * 10; // 10KB - var IMAGE_DATA = { - pen001: [ - { - "created_at": "2011-11-13T08:57:39Z", - "ext": "png", - "filesize": 9969, - "height": 463, - "id": 1, - "updated_at": "2011-11-13T08:57:39Z", - "width": 441 - }, - { - "created_at": "2011-11-13T08:57:54Z", - "ext": "gif", - "filesize": 5418, - "height": 500, - "id": 2, - "updated_at": "2011-11-13T08:57:54Z", - "width": 500 - }, - { - "created_at": "2011-11-13T08:58:06Z", - "ext": "gif", - "filesize": 8758, - "height": 464, - "id": 3, - "updated_at": "2011-11-13T08:58:06Z", - "width": 366 - }, - { - "created_at": "2011-11-13T08:58:23Z", - "ext": "gif", - "filesize": 9383, - "height": 480, - "id": 4, - "updated_at": "2011-11-13T08:58:23Z", - "width": 392 - }, - { - "created_at": "2011-11-13T08:58:33Z", - "ext": "gif", - "filesize": 11061, - "height": 500, - "id": 5, - "updated_at": "2011-11-13T08:58:33Z", - "width": 500 - }, - { - "created_at": "2011-11-20T09:50:43Z", - "ext": "gif", - "filesize": 1131, - "height": 126, - "id": 6, - "updated_at": "2011-11-20T09:50:43Z", - "width": 259 - }, - { - "created_at": "2011-11-20T09:50:55Z", - "ext": "gif", - "filesize": 1125, - "height": 126, - "id": 7, - "updated_at": "2011-11-20T09:50:55Z", - "width": 259 - }, - { - "created_at": "2011-11-20T11:33:12Z", - "ext": "gif", - "filesize": 17919, - "height": 600, - "id": 8, - "updated_at": "2011-11-20T11:33:12Z", - "width": 800 - }, - { - "created_at": "2011-11-20T11:33:12Z", - "ext": "gif", - "filesize": 17919, - "height": 600, - "id": 9, - "updated_at": "2011-11-20T11:33:12Z", - "width": 800 - }, - { - "created_at": "2011-11-20T11:33:12Z", - "ext": "gif", - "filesize": 17919, - "height": 600, - "id": 10, - "updated_at": "2011-11-20T11:33:12Z", - "width": 800 - }, - { - "created_at": "2011-11-20T11:33:12Z", - "ext": "gif", - "filesize": 17919, - "height": 600, - "id": 11, - "updated_at": "2011-11-20T11:33:12Z", - "width": 800 - }, - { - "created_at": "2011-11-22T09:17:20Z", - "ext": "gif", - "filesize": 9055, - "height": 473, - "id": 12, - "updated_at": "2011-11-22T09:17:20Z", - "width": 405 - }, - { - "created_at": "2011-11-22T10:11:07Z", - "ext": "gif", - "filesize": 8758, - "height": 464, - "id": 13, - "updated_at": "2011-11-22T10:11:07Z", - "width": 366 - }, - { - "created_at": "2011-11-24T09:05:12Z", - "ext": "gif", - "filesize": 6431, - "height": 386, - "id": 16, - "updated_at": "2011-11-24T09:05:12Z", - "width": 453 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 17, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 18, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 19, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 20, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - }, - { - "created_at": "2011-11-26T04:52:12Z", - "ext": "gif", - "filesize": 6421, - "height": 426, - "id": 21, - "updated_at": "2011-11-26T04:52:12Z", - "width": 306 - } - ] - } - - var ImageGroupIconClass = function( INDEX, data){ - var JQ_ICON_WRAP = jqItemOrigin.clone( true), - SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''), - LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null, - reversibleImage = null, - onEnterFlag = false; - JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes'); - jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW})); - - return { - onEnter: function(){ - if( onEnterFlag === true) return; - reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, function( url, imgW, imgH){ - if( reversibleImage === null) { - alert( url); - return; - } - /* - * ieでサイズが取れない、、、 - */ - imgW = imgW || data.width || 64; - imgH = imgH || data.height || 64; - JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH); - var zoom = 128 /( imgW > imgH ? imgW : imgH), - h = Math.floor( imgH *zoom), - w = Math.floor( imgW *zoom); - reversibleImage.elm.style.width = w +'px'; - reversibleImage.elm.style.height = h +'px'; - reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0'; - reversibleImage.resize( w, h); - JQ_ICON_WRAP.click( function( e){ - pettanr.overlay.hide(); - if (onUpdateFunction) { - if( LOW_SRC === null){ - onUpdateFunction( SRC, imgW, imgH); - } else { - ( function( onUpdate){ - pettanr.util.loadImage( SRC, - function( _abspath, imgW, imgH){ - onUpdate( SRC, imgW, imgH); - onUpdate = null; - }, - function( _abspath){ - onUpdate( SRC, data.width || 64, data.height || 64); - onUpdate = null; - } - ); - })( onUpdateFunction); // close()で値が消えるので、クロージャに保持 - } - } - close(); - }); - }); - JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm); - onEnterFlag = true; - }, - destroy: function(){ - reversibleImage && reversibleImage.destroy(); - JQ_ICON_WRAP.remove(); - reversibleImage = JQ_ICON_WRAP = null; - delete this.destroy; - } - } - } - - function close(){ - jqContainer.stop().animate( { - height: 0, - top: Math.floor( windowH /2) - }, function(){ - jqWrap.hide() - }); - while( ICON_ARRAY.length > 0){ - ICON_ARRAY.shift().destroy(); - } - onEnterInterval !== null && window.clearTimeout( onEnterInterval); - onUpdateFunction = onEnterInterval = null; - } - function onEnterShowImage(){ - var l = ICON_ARRAY.length, - _start = -wrapX /itemW -1, - _end = _start + winW /itemW +1; - for( var i=0; i 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX; - jqContainer.css( { left: wrapX}); - - onEnterInterval !== null && window.clearTimeout( onEnterInterval); - onEnterInterval = window.setTimeout( onEnterShowImage, 500); - } - //e.stopPropagation(); - return false; - }); - containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height; - jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html()); - var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0)); - itemW = itemSize.width; - itemH = itemSize.height; - jqName = $( '#gruop-name-display'); - jqButton = $( '#image-gruop-button').click( clickOK); - buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width; - - delete IMAGE_GROUP_EXPROLER.init; - }, - jqWrap: null, - show: function( _onUpdateFunction){ - onUpdateFunction = _onUpdateFunction; - pettanr.overlay.show( this); - - var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [], - l = CURRENT_GROUP_ARRAY.length; - for( var i=0; i containerW ? winW : containerW, - h = windowH > containerH ? containerH : windowH; - - jqWrap.show(); - jqContainer.css( { - width: w, - height: 0, - left: 0, - top: Math.floor( windowH /2) - }).stop().animate( { - height: h, - top: Math.floor( windowH /2 -h /2) - }); - - jqButton.css( { - left: Math.floor( winW /2 -buttonW /2), - top: Math.floor( windowH /2 +containerH /2 +10) - }); - - onEnterShowImage(); - }, - onWindowResize: function( _windowW, _windowH){ - var w = _windowW > containerW ? _windowW : containerW, - h = _windowH > containerH ? containerH : _windowH, - offsetW = Math.floor( _windowW /2 -winW /2); - winW = _windowW; - if( offsetW <= 0){ // smaller - jqContainer.css( { - left: offsetW, - width: w - }).animate( { - left: 0, - top: Math.floor( _windowH /2 -h /2) - }); - } else { - jqContainer.css( { // bigger - left: 0, - width: w, - borderLeftWidth: offsetW - }).animate( { - top: Math.floor( _windowH /2 -h /2), - borderLeftWidth: 0 - }); - } - jqButton.css( { - left: Math.floor( _windowW /2 -buttonW /2), - top: Math.floor( _windowH /2 +containerH /2 +10) - }); - onEnterShowImage(); - }, - onClose: close, - ID: 'imageGroupExproler' - } - })(); - -/* ---------------------------------------- * WINDOWS_CONTROL + * - contloler + * - mouseEventListener */ var WINDOWS_CONTROL = ( function(){ /* @@ -1017,9 +594,9 @@ pettanr.editor = ( function(){ } else { jqWrapper.find( '.window-footer').remove(); } - update( x, y, w, h); + this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH); - this.onFirstOpen && this.onFirstOpen(); + update( x, y, w, h); delete this.firstOpen; }, @@ -1038,11 +615,22 @@ pettanr.editor = ( function(){ } } }, + onFadeIn: function(){ + instance.firstOpen && instance.firstOpen(); + instance.onOpen && setTimeout( callOnOpen, 0); + function callOnOpen(){ + instance.onOpen( w, bodyH); + } + }, + onFadeOut: function(){ + var elmWrapper = jqWrapper.get(0); + elmWrapper.parentNode.removeChild( elmWrapper); + instance.onClose && setTimeout( instance.onClose, 0); + }, close: function(){ if( visible === false) return; instance.visible = visible = false; - instance.onClose && setTimeout( instance.onClose, 0); - closeWindow( instance); + jqWrapper.fadeOut( instance.onFadeOut); MENUBAR_SELWCTION.title( 'show ' +title); }, bodyBackOrForward: bodyBackOrForward, @@ -1062,7 +650,7 @@ pettanr.editor = ( function(){ if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return; if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){ - this.close(); + instance.close(); return; } @@ -1114,7 +702,7 @@ pettanr.editor = ( function(){ } }; - function getCurrentWindow( _mouseX, _mouseY){ + function getCurrentIndex( _mouseX, _mouseY){ if( currentWindow && currentWindow.busy() === true) return currentWindowIndex; var l = WINDOW_ARRAY.length, _currentWindow = null, @@ -1139,28 +727,9 @@ pettanr.editor = ( function(){ if( _window.visible !== true) return; var _jqWindow = _window.$; jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない． - _jqWindow.fadeIn( - function(){ - _window.firstOpen && _window.firstOpen(); - _window.onOpen && setTimeout( _window.onOpen, 0); - } - ); + _jqWindow.fadeIn( _window.onFadeIn); return; } - function closeWindow( _window){ - if( _window.visible !== false) return; - var l = WINDOW_ARRAY.length; - for( var i=0; i 0){ // 先頭のクリックでない場合 // Array を前に WINDOW_ARRAY.splice( currentWindowIndex, 1); WINDOW_ARRAY.unshift( currentWindow); @@ -1195,14 +770,14 @@ pettanr.editor = ( function(){ return false; }, onMouseUp: function( _mouseX, _mouseY){ - if( getCurrentWindow( _mouseX, _mouseY) === 0){ + if( getCurrentIndex( _mouseX, _mouseY) === 0){ currentWindow.onMouseUp( _mouseX, _mouseY); return true; } return false; }, onMouseDown: function( _mouseX, _mouseY){ - if( getCurrentWindow( _mouseX, _mouseY) === 0){ + if( getCurrentIndex( _mouseX, _mouseY) === 0){ currentWindow.onMouseDown( _mouseX, _mouseY); return true; } @@ -1216,7 +791,7 @@ pettanr.editor = ( function(){ * 画面外に出るwindowの移動 */ }, - createWindow: function( scope, EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){ + createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){ opt_visible = opt_visible !== false; opt_closeButtonEnabled = opt_closeButtonEnabled === true; opt_resizeButtonEnabled = opt_resizeButtonEnabled === true; @@ -1224,7 +799,9 @@ pettanr.editor = ( function(){ opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT; var _window = pettanr.util.extend( - WindowClass.apply( scope, [ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH]), + new WindowClass( + bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH + ), EXTENDS ); WINDOW_ARRAY.unshift( _window); @@ -1237,6 +814,7 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * TOOL_BOX_WINDOW + * - window */ var TOOL_BOX_WINDOW = ( function(){ var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton, @@ -1253,34 +831,33 @@ pettanr.editor = ( function(){ function addImage( e){ setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } function addText( e){ setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } function switchGrid( e){ setTimeout( GRID_CONTROL.update, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } function popupHelp( e){ instance.bodyBackOrForward( true); setTimeout( HELP_DOCUMENTS_WINDOW.open, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } function editBG( e){ instance.bodyBackOrForward( true); setTimeout( INFOMATION_WINDOW.open, 0); - e && e.preventDefault(); + e && e.preventDefault && e.preventDefault(); return false; } return WINDOWS_CONTROL.createWindow( - this, { onInit: function(){ instance = this; @@ -1305,26 +882,23 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * IMAGE_EXPROLER + * - window */ var IMAGE_EXPLORER_WINDOW = ( function(){ var instance, finder; return WINDOWS_CONTROL.createWindow( - this, { onInit: function(){ instance = this; delete this.onInit; }, - onFirstOpen: function(){ - finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE); - delete this.onFirstOpen; + onOpen: function( _w, _h){ + finder = finder || pettanr.finder.createFinder( pettanr.editor, document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree()); + finder.resize( _w, _h ); }, - onOpen: function(){ - finder.onOpen(); - }, - onResize: function( _w, _h){ - finder.onWindowResize( _w, _h); + onResize: function( _w, _h ){ + finder.resize( _w, _h ); } }, 'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300 @@ -1334,59 +908,75 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * INFOMATION_WINDOW + * - window */ var INFOMATION_WINDOW = ( function(){ - var FADE_EFFECT_ENABLED = pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8, + var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8, FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show', FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide', backgroundInfomationElm, jqComicElementInformation, - elmValueX, elmValueY, elmValueZ, elmValueA, elmValueW, elmValueH, elmAspect, - elmPercentW, elmPercentH, + inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio, + inputPercentW, inputPercentH, currentComicElement = null, - currentElementType = -1; + currentElementType = -1, + currentLock = false; return WINDOWS_CONTROL.createWindow( - this, { - onFirstOpen: function(){ + onFirstOpen: function( _w, _h){ backgroundInfomationElm = $( '#panel-background-information'); jqComicElementInformation = $( '#comic-element-infomation').hide().css( { - height: this.bodyHeight() + height: _h }); var TAB_GROUP_ID = 'comic-element-attribute'; - var CREATER = pettanr.key.createEditableText; - elmValueX = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID); - elmValueY = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID); - elmValueZ = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID); - elmValueA = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID); - elmValueW = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID); - elmValueH = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID); - elmPercentW = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID); - elmPercentH = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID); - elmAspect = $( '#comic-element-keep-aspect'); + var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText; + inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID); + inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID); + inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID); + inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID); + inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID); + inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID); + inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID); + inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID); + inputAspectRatio = $( '#comic-element-keep-aspect'); delete this.onFirstOpen; }, - onResize: function( w, h){ - jqComicElementInformation && jqComicElementInformation.css( { - height: h + onResize: function( _w, _h){ + jqComicElementInformation.css( { + height: _h }); }, - update: function( _elementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){ - if( !backgroundInfomationElm) return; // なぜか !backgroundInfomationElm が必要 + update: function( currentElement){ + + if( currentLock === true && currentElement === null) return; + + var _elementType = currentElement === null ? -1 : currentElement.type, + x = currentElement !== null ? currentElement.x : 0, + y = currentElement !== null ? currentElement.y : 0, + z = currentElement !== null ? currentElement.z : 0, + a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0, + w = currentElement !== null ? currentElement.w : 0, + h = currentElement !== null ? currentElement.h : 0, + actualW = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1, + actualH = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1, + wPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0, + hPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0, + keepAspect = currentElement !== null && currentElement.keepAspect === true; + if( currentElementType !== _elementType){ if( _elementType !== -1){ if( _elementType === 1){ - elmValueA.show(); - elmPercentW.hide(); - elmPercentH.hide(); - elmAspect.hide(); + inputA.visible( true); + inputPercentW.visible( false); + inputPercentH.visible( false); + inputAspectRatio.hide(); } else { - elmValueA.hide(); - elmPercentW.show(); - elmPercentH.show(); - elmAspect.show(); + inputA.visible( false); + inputPercentW.visible( true); + inputPercentH.visible( true); + inputAspectRatio.show(); } currentElementType === -1 && jqComicElementInformation.stop().css( { filter: '', @@ -1401,17 +991,21 @@ pettanr.editor = ( function(){ currentElementType = _elementType; } if( currentElementType !== -1){ - elmValueX.update( x); - elmValueY.update( y); - elmValueZ.update( z); - _elementType === 1 && elmValueA.update( a); - elmValueW.update( w); - elmValueH.update( h); - _elementType === 0 && elmPercentW.update( wPercent); - _elementType === 0 && elmPercentH.update( hPercent); + inputX.value( x); + inputY.value( y); + inputZ.value( z); + _elementType === 1 && inputA.value( a); + inputW.value( w); + inputH.value( h); + _elementType === 0 && inputPercentW.value( wPercent); + _elementType === 0 && inputPercentH.value( hPercent); } else { } + }, + lock: function( _currentLock){ + currentLock = !!_currentLock; + this.bodyBackOrForward( !currentLock); } }, 'infomation-window', 'Infomation', 0, 30, 200, 180, true @@ -1420,144 +1014,124 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * HELP_WINDOW + * - window */ var HELP_DOCUMENTS_WINDOW = ( function(){ var visible = true, - hasAjaxContents = false, jqAjaxContents, jqNaviItems, jqPages, + currentPageIndex = 0, + numPage = 0, HELP = MENU_BAR_CONTROL.HELP, - onLoadFunction = HELP.createAjaxSelection( onFirstOpen), + onLoadFunction = HELP.createAjaxSelection( onAjaxStart), instance; - function jumpPage( _index){ - - } - function onFirstOpen( _pageIndex){ - _pageIndex = _pageIndex || 0; - if( hasAjaxContents === false){ + + function onAjaxStart( _pageIndex){ + currentPageIndex = _pageIndex || currentPageIndex; + if( onHelpLoad !== null){ $.ajax({ url: 'help/jp.xml', dataType: 'xml', - success: function( _xml){ - var jqXML = $( _xml), - helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'), - elmNavi = document.createElement( 'div'), - elmItemOrigin = document.createElement( 'a'), - elmPages = document.createElement( 'div'), - elmPageOrigin = document.createElement( 'div'), - elmTitleOrigin = document.createElement( 'h2'), - elmPage, - numPage = 0; - elmNavi.className = 'sidenavi'; - elmItemOrigin.className = 'sidenavi-item'; - elmItemOrigin.href = '#'; - elmPages.className = 'page-contents'; - elmPageOrigin.className = 'page-content'; - elmPageOrigin.appendChild( elmTitleOrigin); - - // helpTitle && instance.title( helpTitle); - - jqXML.find( 'page').each( function(){ - var xmlPage = $( this), - title = xmlPage.attr( 'title'), - content = xmlPage.text(); - - elmItemOrigin.innerHTML = title; - elmNavi.appendChild( elmItemOrigin.cloneNode( true)); - - elmTitleOrigin.innerHTML = title; - elmPage = elmPageOrigin.cloneNode( true); - elmPage.innerHTML = content; - - pettanr.util.cleanElement( elmPage); - - if( elmPage.childNodes.length > 0){ - elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]); - } else { - elmPage.appendChild( elmTitleOrigin.cloneNode( true)); - } - elmPages.appendChild( elmPage); - - HELP.createSelection( title, null, ( function( _pageIndex){ - return function(){ - HELP_DOCUMENTS_WINDOW.open(); - onOpen( _pageIndex); - } - })( numPage), true); - ++numPage; - }); - onLoadFunction(); - onLoadFunction = null; - - jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages); - - jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className) - .click( function( e){ - var that = this, - parent = this.parentNode, - i = ( function(){ - var children = parent.getElementsByTagName( 'a'), - l = children.length; - for( var i=0; i 0){ + elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]); + } else { + elmPage.appendChild( elmTitleOrigin.cloneNode( true)); + } + elmPages.appendChild( elmPage); + + HELP.createSelection( title, null, onSelectionClick, true); + ++numPage; + }); + onLoadFunction(); + onLoadFunction = null; + + jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages); + + jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick); + jqPages = jqAjaxContents.find( '.page-content'); + jqPages.find( 'a').click( onInnerLinkClick); + + setTimeout( jumpPage, 0); + } + function onSelectionClick( _pageIndex){ + HELP_DOCUMENTS_WINDOW.open(); + jumpPage( _pageIndex); + } + function jumpPage( _index){ + if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index){ + currentPageIndex = _index; } + jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current'); + jqPages.hide().eq( currentPageIndex).show(); + } + function onNaviClick( e){ + // this は + jumpPage( pettanr.util.getChildIndex( this.parentNode, this)); + e.stopPropagation(); + return false; + } + function onInnerLinkClick( e){ + var jump = ( this.href || '').split( '#jump'), + n = jump[1]; + if( !n) return; + jumpPage( '' + parseFloat( n) === n ? parseFloat( n) : -1); + e.stopPropagation(); + return false; } return WINDOWS_CONTROL.createWindow( - this, { onInit: function(){ instance = this; - jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()}); + jqAjaxContents = this.$.find( '.window-body').addClass( 'loading'); delete this.onInit; }, - onFirstOpen: onFirstOpen, - onResize: function( w, h){ - jqAjaxContents && jqAjaxContents.css( { height: h}); + onFirstOpen: function( _w, _h){ + jqAjaxContents.css( { height: _h}); + onAjaxStart(); + delete this.onFirstOpen; }, - setAjaxContent: function( html){ - - delete this.onLoadAjaxContent; + onResize: function( _w, _h){ + jqAjaxContents && jqAjaxContents.css( { height: _h}); } }, null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300 @@ -1566,9 +1140,12 @@ pettanr.editor = ( function(){ /* ---------------------------------------- * GRID_CONTROL + * - control + * - panelResizeListener */ var GRID_CONTROL = ( function(){ var ELM_GRID = document.getElementById( 'grid'), + BG_URL = "url('images/grid.gif')", jqGrid, visible = false; @@ -1577,6 +1154,12 @@ pettanr.editor = ( function(){ jqGrid = $( ELM_GRID); delete GRID_CONTROL.init; }, + open: function(){ + GRID_CONTROL.init && GRID_CONTROL.init(); + }, + close: function(){ + + }, onPanelResize: function( _panelX, _panelY){ ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( ''); ELM_GRID.style.height = windowH +'px'; @@ -1592,17 +1175,19 @@ pettanr.editor = ( function(){ visible = !visible; - if( visible === true && !ELM_GRID.style.backgroundImage){ - ELM_GRID.style.backgroundImage = "url('images/grid.gif')"; + if( visible === true && BG_URL !== null){ + ELM_GRID.style.backgroundImage = BG_URL; + BG_URL = null; } return visible; } } })(); - /* - * WHITE_GLASS_CONTROL - */ +/* ---------------------------------------- + * WHITE_GLASS_CONTROL + * - panelResizeListener + */ var WHITE_GLASS_CONTROL = ( function(){ var styleTop = document.getElementById( 'whiteGlass-top').style, styleLeft = document.getElementById( 'whiteGlass-left').style, @@ -1638,8 +1223,11 @@ pettanr.editor = ( function(){ })(); -/* +/* ---------------------------------------- * PANEL_CONTROL + * - controler + * - mouseEventListener + * * panel-border の表示と onPanelResize の通知． * panel drag. * @@ -1655,6 +1243,8 @@ pettanr.editor = ( function(){ isDragging = false, isDraggable = false; + pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate); + function onSpaceUpdate(e){ if( e.type === 'keyup'){ currentListener === null && updateMouseCursor( ''); @@ -1666,18 +1256,17 @@ pettanr.editor = ( function(){ } return { - init: function( _panelW, _panelH, _borderSize){ - panelW = _panelW || DEFAULT_PANEL_WIDTH; - panelH = _panelH || DEFAULT_PANEL_HEIGHT; - panelX = Math.floor( ( windowW -panelW) /2); - panelY = Math.floor( ( windowH -panelH) /2); - borderSize = _borderSize !== undefined ? _borderSize : borderSize; - - pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate); + open: function( _panelW, _panelH, _borderSize ){ + panelW = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH; + panelH = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT; + //panelX = Math.floor( ( windowW -panelW) /2); + //panelY = Math.floor( ( windowH -panelH) /2); + borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize; - setTimeout( PANEL_CONTROL.resize, 0); + //setTimeout( PANEL_CONTROL.resize, 0); + }, + close: function(){ - delete PANEL_CONTROL.init; }, x: function(){ return panelX; @@ -1685,6 +1274,12 @@ pettanr.editor = ( function(){ y: function(){ return panelY; }, + w: function(){ + return panelW; + }, + h: function(){ + return panelH; + }, resize: function( isResizerTopAction, _x, _y, _w, _h){ panelX = _x !== undefined ? _x : panelX; panelY = _y !== undefined ? _y : panelY; @@ -1735,9 +1330,9 @@ pettanr.editor = ( function(){ } })(); -/* - * -------------------------------------------------------------------------------------------- - * panel resizer +/* -------------------------------------------------------------------------------------------- + * PanelResizerClass + * - mouseEventListener */ var PanelResizerClass = function( ID, isTop){ var ELM = document.getElementById( ID), @@ -1758,80 +1353,77 @@ pettanr.editor = ( function(){ } } - return { - busy: function(){ - return isDragging; - }, - onMouseDown: function( _mouseX, _mouseY){ - var _x = _mouseX -panelX, - _y = _mouseY -panelY; + this.onMouseDown = function( _mouseX, _mouseY){ + var _x = _mouseX -panelX, + _y = _mouseY -panelY; + if( _x < x || x + w < _x || _y < y || y + h < _y) return false; + offsetY = _y; + startY = panelY; + startH = panelH; + isDragging = true; + MOUSE_CURSOR( 'n-resize'); + return true; + } + this.onMouseMove = function( _mouseX, _mouseY){ + var _x = _mouseX -panelX, + _y = _mouseY -panelY; + if( isDragging !== true){ if( _x < x || x + w < _x || _y < y || y + h < _y) return false; - offsetY = _y; - startY = panelY; - startH = panelH; - isDragging = true; - MOUSE_CURSOR( 'n-resize'); + COMIC_ELEMENT_OPERATION_MANAGER.hide(); + MOUSE_CURSOR( 'pointer'); return true; - }, - onMouseMove: function( _mouseX, _mouseY){ - var _x = _mouseX -panelX, - _y = _mouseY -panelY; - if( isDragging !== true){ - if( _x < x || x + w < _x || _y < y || y + h < _y) return false; - COMIC_ELEMENT_OPERATION_MANAGER.hide(); - MOUSE_CURSOR( 'pointer'); - return true; + } else { + var move = _y -offsetY; + if( isTop === true){ + if( panelH - move < MIN_PANEL_HEIGHT){ + move = panelH -MIN_PANEL_HEIGHT; + } + PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move); } else { - var move = _y -offsetY; - if( isTop === true){ - if( panelH - move < MIN_PANEL_HEIGHT){ - move = panelH -MIN_PANEL_HEIGHT; - } - PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move); - } else { - var _h = startH +move; - if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){ - PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h); - } + var _h = startH +move; + if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){ + PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h); } } - return true; - }, - onMouseUp: function( _mouseX, _mouseY){ - if( isDragging !== true) return; - ( startY !== panelY || startH !== panelH) && HISTORY.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]); - isDragging = false; - MOUSE_CURSOR( ''); - }, - busy: function(){ - return isDragging - }, - onPanelResize: function( _x, _y, _w, _h){ - panelX = _x; - panelY = _y; - if( panelW !== _w){ - ELM.style.width = ( _w +2) +'px'; - panelW = _w; - } - panelH = _h; - y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH); - w = panelW +2; } + return true; + } + this.onMouseUp = function( _mouseX, _mouseY){ + if( isDragging !== true) return; + ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]); + isDragging = false; + MOUSE_CURSOR( ''); + } + this.busy = function(){ + return isDragging + } + this.onPanelResize = function( _x, _y, _w, _h){ + panelX = _x; + panelY = _y; + if( panelW !== _w){ + ELM.style.width = ( _w +2) +'px'; + panelW = _w; + } + panelH = _h; + y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH); + w = panelW +2; } }; - var PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true), - PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false); + var PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true ), + PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false ); PanelResizerClass = undefined; - +/* -------------------------------------------------------------------------------------------- + * CONSOLE_CONTROLER + */ var CONSOLE_CONTROLER = ( function(){ var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false), LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false), DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true), EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false), CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true), - SAVE = HISTORY.saveState, + SAVE = HISTORY_CONTROL.saveState, jqStage, jqConsoleParent, jqConsoleWrapper, @@ -1866,38 +1458,41 @@ pettanr.editor = ( function(){ } function layerBack(){ if( currentElement === null) return; - COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, false); - updateInfomation(); - SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, true], [ currentElement, false]); + if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return; + INFOMATION_WINDOW.update( currentElement); + SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]); var _z = currentElement.z; LAYER_BACK_BUTTON.visible( _z > 0); - LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1); + LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1); } function layerForward(){ if( currentElement === null) return; - COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, true); - updateInfomation(); - SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, false], [ currentElement, true]); + if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return; + INFOMATION_WINDOW.update( currentElement); + SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]); var _z = currentElement.z; LAYER_BACK_BUTTON.visible( _z > 0); - LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1); + LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1); } function del(){ if( currentElement === null) return; buttonBackOrForward( true); - COMIC_ELEMENT_CONTROL.removeComicElement( currentElement); - SAVE( COMIC_ELEMENT_CONTROL.restoreComicElement, [ true, currentElement], [ false, currentElement], true); + COMIC_ELEMENT_CONTROL.remove( currentElement); + SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true); COMIC_ELEMENT_OPERATION_MANAGER.hide(); } function edit(){ - if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return; - TEXT_EDITOR_CONTROL.show( currentElement); - buttonBackOrForward( true); + if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return; + pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), currentElement ); + buttonBackOrForward( true ); } function change(){ if( currentElement === null) return; buttonBackOrForward( true); - IMAGE_GROUP_EXPROLER.show( currentElement.url); + pettanr.premiumSatge.bootInOverlay( currentElement.getArtistID(), currentElement.resourcePicture ); + } + function onImageSelect( resourcePicture ){ + currentElement.resourcePicture( resourcePicture ); } return { init: function(){ @@ -1924,7 +1519,9 @@ pettanr.editor = ( function(){ delete CONSOLE_CONTROLER.init; }, - show: function( _currentElement, _w, _h){ + show: function( _currentElement, _w, _h ){ + CONSOLE_CONTROLER.init && CONSOLE_CONTROLER.init(); + visible === false && jqConsoleWrapper.show(); visible = true; currentElement = _currentElement; @@ -1932,17 +1529,17 @@ pettanr.editor = ( function(){ _z = _currentElement.z; if( currentType !== _currentType){ currentType = _currentType; - jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE); - jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT); - consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth; - consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight; + jqImgConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_IMAGE); + jqTextConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_TEXT); + consoleWidth = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth; + consoleHeight = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight; } consoleX = Math.floor( ( _w -consoleWidth) /2); LAYER_BACK_BUTTON.visible( _z > 0); - LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1); + LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1); DELETE_BUTTON.visible( true); - EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT); + EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT); CHANGE_BUTTON.visible( false); if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){ @@ -1987,7 +1584,10 @@ pettanr.editor = ( function(){ } })(); - +/* -------------------------------------------------------------------------------------------- + * TAIL_OPERATOR + * - comicElementOperator + */ var TAIL_OPERATOR = ( function(){ var MOUSE_CURSOR = updateMouseCursor, ELM_MOVER = document.getElementById( 'balloon-tail-mover'), @@ -2037,7 +1637,7 @@ pettanr.editor = ( function(){ currentText = null; }, onStart: function( _currentText, _mouseX, _mouseY){ - if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false; + if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT) return false; x = _currentText.x; y = _currentText.y; if( this.hitTest( _mouseX -x, _mouseY -y) === true){ @@ -2059,7 +1659,7 @@ pettanr.editor = ( function(){ _mouseY > 0 ? 90 : -90 ); currentText && currentText.angle( balloonA); - COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( undefined, undefined, undefined, balloonA); + INFOMATION_WINDOW.update( currentText); }, onFinish: function(){ startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA); @@ -2072,8 +1672,13 @@ pettanr.editor = ( function(){ currentText = null; } } - })(), - RESIZE_OPERATOR = ( function(){ + })(); + +/* -------------------------------------------------------------------------------------------- + * RESIZE_OPERATOR + * - comicElementOperator + */ + var RESIZE_OPERATOR = ( function(){ var MOUSE_CURSOR = updateMouseCursor, GRID_ENABLED = GRID_CONTROL.enabled; @@ -2125,14 +1730,20 @@ pettanr.editor = ( function(){ y = _y !== undefined ? _y : y; w = _w !== undefined ? _w : w; h = _h !== undefined ? _h : h; - elmResizerContainerStyle.left = x +'px'; - elmResizerContainerStyle.top = y +'px'; - elmResizerContainerStyle.width = w +'px'; - elmResizerContainerStyle.height = h +'px'; - elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px'; - elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px'; - elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px'; - elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px'; + try { + elmResizerContainerStyle.left = x +'px'; + elmResizerContainerStyle.top = y +'px'; + elmResizerContainerStyle.width = w +'px'; + elmResizerContainerStyle.height = h +'px'; + elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px'; + elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px'; + elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px'; + elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px'; + } catch(e){ + alert( [x, y, w, h].join( ',')); + return; + } + POSITION_ARRAY.splice( 0, POSITION_ARRAY.length); POSITION_ARRAY.push( @@ -2168,23 +1779,23 @@ pettanr.editor = ( function(){ currentElement.resize( x, y, w, h); currentIsTextElement === true && TAIL_OPERATOR.update( w, h); CONSOLE_CONTROLER.show( currentElement, w, h); - COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y, undefined, undefined, w, h); + INFOMATION_WINDOW.update( currentElement); } - function flip( _flipV, _flipH){ + function flip( _flipH, _flipV){ var p = CURSOR_AND_FLIP[ currentIndex]; currentIndex = _flipH === true || _flipV === true ? p[ _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v') ] : currentIndex; MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor); elmResizerContainer.className = 'current-resizer-is-' +currentIndex; - currentElement.flip( _flipV, _flipH); + currentElement.flip( _flipH, _flipV); } return { update: draw, index: function( _mouseX, _mouseY){ - var p; - for( var i=4; i<8; i++){ + var p, i; + for( i=4; i<8; i++){ p = POSITION_ARRAY[ i]; if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){ MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor); @@ -2192,7 +1803,7 @@ pettanr.editor = ( function(){ return currentIndex = i; } } - for( var i=0; i<4; i++){ + for( i=0; i<4; i++){ p = POSITION_ARRAY[ i]; if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){ MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor); @@ -2206,7 +1817,7 @@ pettanr.editor = ( function(){ }, show: function( _currentElement){ currentElement = _currentElement; - currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT; + currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT; elmResizerContainerStyle.display = ''; }, hide: function(){ @@ -2215,7 +1826,7 @@ pettanr.editor = ( function(){ }, onStart: function( _currentElement, _mouseX, _mouseY){ currentElement = _currentElement; - currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT; + currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT; if( _currentElement.keepSize === true) return false; currentIndex = this.index( _mouseX, _mouseY); if( currentIndex === -1) return false; @@ -2225,7 +1836,7 @@ pettanr.editor = ( function(){ startY = baseY = _currentElement.y; startW = baseW = _currentElement.w; startH = baseH = _currentElement.h; - if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){ + if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){ startFilpV = _currentElement.flipV(); startFilpH = _currentElement.flipH(); } @@ -2245,7 +1856,7 @@ pettanr.editor = ( function(){ _momoryW = 0, _momoryH = 0; /* - * Opera 11+ often forget values, why ?? + * Opera 11+ often forget values, why ?? */ while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){ _x = _x !== undefined ? _x : baseX +moveX *com.x; @@ -2262,45 +1873,45 @@ pettanr.editor = ( function(){ } } - if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){ + if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){ } else - if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){ + if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){ //return; - if( _w < MIN_OBJECT_SIZE){ - //_x += Math.abs( MIN_OBJECT_SIZE -_w); + if( _w < MIN_ELEMENT_SIZE){ + //_x += Math.abs( MIN_ELEMENT_SIZE -_w); _x = currentX; - _w = MIN_OBJECT_SIZE; + _w = MIN_ELEMENT_SIZE; } - if( _h < MIN_OBJECT_SIZE){ - //_y += Math.abs( MIN_OBJECT_SIZE -_h); + if( _h < MIN_ELEMENT_SIZE){ + //_y += Math.abs( MIN_ELEMENT_SIZE -_h); _y = currentY; - _h = MIN_OBJECT_SIZE; + _h = MIN_ELEMENT_SIZE; } } else - if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){ + if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){ return; } else - if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){ + if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){ - if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){ + if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){ // flipH _memoryX = _x; baseX = _x = _x +_w; baseY = _y; baseW = _w = _memoryX -_x; baseH = _h; - flip( false, true); + flip( true, false); flipV = currentElement.flipV(); } else - if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){ + if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){ // flipV _memoryY = _y; baseX = _x; baseY = _y = _y +_h; baseW = _w; baseH = _h = _memoryY -_y; - flip( true, false); + flip( false, true); flipH = currentElement.flipH(); } else { // flipVH @@ -2346,7 +1957,7 @@ pettanr.editor = ( function(){ onCancel: function(){ MOUSE_CURSOR( ''); COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH); - currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ? + currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) : currentElement.animate( startX, startY, startW, startH, angle); }, @@ -2360,8 +1971,13 @@ pettanr.editor = ( function(){ onShiftUpdate: update, onCtrlUpdate: update } - })(), - POSITION_OPERATOR = ( function(){ + })(); + +/* -------------------------------------------------------------------------------------------- + * POSITION_OPERATOR + * - comicElementOperator + */ + var POSITION_OPERATOR = ( function(){ var MOUSE_CURSOR = updateMouseCursor, GRID_ENABLED = GRID_CONTROL.enabled; @@ -2376,7 +1992,7 @@ pettanr.editor = ( function(){ y = _y !== undefined ? _y : y; RESIZE_OPERATOR.update( x, y); currentElement.resize( x, y); - COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y); + INFOMATION_WINDOW.update( currentElement); } return { @@ -2417,13 +2033,12 @@ pettanr.editor = ( function(){ })(); -/* - * -------------------------------------------------------------------------------------------- +/* -------------------------------------------------------------------------------------------- * COMIC_ELEMENT_OPERATION_MANAGER */ var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){ var MOUSE_CURSOR = updateMouseCursor, - SAVE = HISTORY.saveState, + SAVE = HISTORY_CONTROL.saveState, GRID_ENABLED = GRID_CONTROL.enabled, HIT_AREA = MOUSE_HIT_AREA, currentIsTextElement = false, @@ -2441,30 +2056,14 @@ pettanr.editor = ( function(){ RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth); currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle); CONSOLE_CONTROLER.show( currentElement, currentw, currenth); - updateInfomation( currentx, currenty, currentElement.z, angle, currentw, currenth); - } - function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){ - _w = _w !== undefined ? _w : currentw; - _h = _h !== undefined ? _h : currenth; - INFOMATION_WINDOW.update( - currentElement === null ? -1 : currentElement.type, - _x !== undefined ? _x : currentx, - _y !== undefined ? _y : currenty, - _z !== undefined ? _z : ( currentElement === null ? '*' : currentElement.z), - _a !== undefined ? Math.floor( _a) : ( currentIsTextElement === true ? Math.floor( angle) : '-'), - _w, - _h, - currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)), - currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)), - currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect - ); + INFOMATION_WINDOW.update( currentElement); } function show( _currentElement){ currentElement === null && RESIZE_OPERATOR.show( _currentElement); if( currentElement !== _currentElement){ currentElement = _currentElement; - currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT); + currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT); currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide(); flipV = currentIsTextElement === false ? _currentElement.flipV() : 0; @@ -2476,29 +2075,48 @@ pettanr.editor = ( function(){ ); } } - function hide(){ + + pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){ + currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate(); + }); + pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function( e){ + currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate(); + }); + pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function( e){ + currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel(); + currentOperator = null; + }); + return { + open: function(){ + this.hide(); + }, + close: function(){ + + }, + hide: function(){ currentElement !== null && RESIZE_OPERATOR.hide(); currentElement = null; MOUSE_CURSOR( ''); TAIL_OPERATOR.hide(); CONSOLE_CONTROLER.hide(); - updateInfomation(); - } - function restoreState( arg){ + INFOMATION_WINDOW.update( null); + }, + resize: resize, + restoreState: function( arg){ if( arg && arg.length !== 8) return; var _currentElement = arg[ 0], _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4], _a = arg[ 5], _flipV = arg[ 6], _flipH = arg[ 7]; if( !_currentElement && !currentOperator) return; - _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ? + _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ? _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) : _currentElement.animate( _x, _y, _w, _h, _a); currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel(); currentOperator = null; currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement); - } - function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){ + }, + saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){ startX = startX !== undefined ? startX : currentx; startY = startY !== undefined ? startY : currenty; startW = startW !== undefined ? startW : currentw; @@ -2506,61 +2124,17 @@ pettanr.editor = ( function(){ startA = startA !== undefined ? startA : angle; startFilpV = startFilpV !== undefined ? startFilpV : flipV; startFilpH = startFilpH !== undefined ? startFilpH : flipH; - currentElement && SAVE( restoreState, + currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState, [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH], [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH] ); - } - pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){ - currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate(); - }); - pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function(){ - currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate(); - }); - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function(){ - currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel(); - currentOperator = null; - }); - return { - init: function(){ - hide(); - delete COMIC_ELEMENT_OPERATION_MANAGER.init; }, - hide: hide, - resize: resize, - restoreState: restoreState, - updateInfomation: updateInfomation, - saveStatus: saveComicElementStatus, busy: function(){ return currentOperator !== null; }, - hitareaX: function( _comicElement, _x){ - if( _comicElement === currentElement){ - var _consoleX = CONSOLE_CONTROLER.x(); - return currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA; - } - return _x -HIT_AREA; - }, - hitareaY: function( _comicElement, _y){ - return _y -HIT_AREA; - }, - hitareaW: function( _comicElement, _w){ - if( _comicElement === currentElement){ - var _consoleW = CONSOLE_CONTROLER.w(); - return ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2; - } - return _w +HIT_AREA *2; - }, - hitareaH: function( _comicElement, _h){ - if( _comicElement === currentElement){ - var _consoleY = CONSOLE_CONTROLER.y(); - return ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2; - } - return _h +HIT_AREA *2; - }, - hitTest: function( _mouseX, _mouseY, _comicElement){ - var _x, _y, _w, _h; - if( _comicElement === currentElement){ + hitTest: function( _mouseX, _mouseY, _panelElement ){ + var _x, _y, _w, _h; + if( _panelElement === currentElement){ var _consoleX = CONSOLE_CONTROLER.x(); _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA; _y = currenty -HIT_AREA; @@ -2569,11 +2143,12 @@ pettanr.editor = ( function(){ var _consoleY = CONSOLE_CONTROLER.y(); _h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2; } else { - _x = _comicElement.x -HIT_AREA; - _y = _comicElement.y -HIT_AREA; - _w = _comicElement.w +HIT_AREA *2; - _h = _comicElement.h +HIT_AREA *2; + _x = _panelElement.x -HIT_AREA; + _y = _panelElement.y -HIT_AREA; + _w = _panelElement.w +HIT_AREA *2; + _h = _panelElement.h +HIT_AREA *2; } + log.html( [ _x, _y, _w, _h ].join( ' ') ); return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h; }, onMouseDown: function( _currentElement, _mouseX, _mouseY){ @@ -2610,181 +2185,144 @@ pettanr.editor = ( function(){ * // COMIC_ELEMENT_OPERATION_MANAGER */ - var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){ - var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER; - return { - $: JQ_WAPPER, - type: COMIC_ELM_TYPE, - x: x, - y: y, - w: w, - h: h, - z: z, - timing: timing, - hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);}, - hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);}, - hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);}, - hitareaH: function(){ return OPERATOR.hitareaH( this, this.h);}, - hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest( _mouseX, _mouseY, this);}, - shift: function( _shiftX, _shiftY){ - update( this.x +_shiftX, this.y +_shiftY); - }, - busy: function(){ - return OPERATOR.busy(); - }, - onMouseMove: function( _mouseX, _mouseY){ - OPERATOR.onMouseMove( this, _mouseX, _mouseY); - }, - onMouseUp: function( _mouseX, _mouseY){ - OPERATOR.onMouseUp( this, _mouseX, _mouseY); - }, - onMouseDown: function( _mouseX, _mouseY){ - OPERATOR.onMouseDown( this, _mouseX, _mouseY); - } + var AbstractComicElement = function( COMIC_ELM_TYPE ){ + this.type = COMIC_ELM_TYPE; + this.hitTest = function( _mouseX, _mouseY ){ + return COMIC_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this ); + } + this.shift = function( _shiftX, _shiftY ){ + this.resize( this.x + _shiftX, this.y + _shiftY); + } + this.busy = function(){ + return COMIC_ELEMENT_OPERATION_MANAGER.busy(); + } + this.onMouseMove = function( _mouseX, _mouseY ){ + COMIC_ELEMENT_OPERATION_MANAGER.onMouseMove( this, _mouseX, _mouseY ); + } + this.onMouseUp = function( _mouseX, _mouseY ){ + COMIC_ELEMENT_OPERATION_MANAGER.onMouseUp( this, _mouseX, _mouseY ); + } + this.onMouseDown = function( _mouseX, _mouseY ){ + COMIC_ELEMENT_OPERATION_MANAGER.onMouseDown( this, _mouseX, _mouseY ); } }; -/* - * -------------------------------------------------------------------------------------------- + +/* -------------------------------------------------------------------------------------------- * ImageElementClass */ var jqImageElementOrigin; - var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){ + var ImageElementClass = function( data ){ jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html()); - var JQ_WRAPPER = jqImageElementOrigin.clone( true), - OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER, - SAVE = HISTORY.saveState, - HIT_AREA = MOUSE_HIT_AREA, - reversibleImage = null, - actualW = 0, actualH = 0, + var JQ_WRAPPER = jqImageElementOrigin.clone( true ), + w = data.width, + h = data.height, + x, y, z, flipH = w < 0 ? -1 : 1, flipV = h < 0 ? -1 : 1, - instance; - w = Math.floor( w); - h = Math.floor( h); - - function update( _x, _y, _w, _h, animate){ + resourcePicture = data.resource_picture, + actualW = data.resource_picture.width, + actualH = data.resource_picture.height, + reversibleImage = null, + instance = this; + w = Math.floor( w ); + h = Math.floor( h ); + + function onAnimeComplete(){ + reversibleImage && reversibleImage.resize( flipH * w, flipV * h ); + } + function updateResourcePicture( _resourcePicture ){ + resourcePicture = _resourcePicture; + + actualW = _resourcePicture.width; + actualH = _resourcePicture.height; + + var _reversibleImage = pettanr.image.createReversibleImage( + [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''), + flipH * w, flipV * h + ); + if( reversibleImage !== null){ + JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm ); + reversibleImage.destroy(); + } else { + JQ_WRAPPER.append( _reversibleImage.elm ); + } + reversibleImage = _reversibleImage; + } + /* global methods */ + this.$ = JQ_WRAPPER; + //this.x = x; + //this.y = y; + //this.w = w; + //this.h = h; + this.z = data.z; + this.timing = data.t; + this.init = function(){ + updateResourcePicture( data.resource_picture ); + instance.resize( data.x, data.y, data.width, data.height ); + delete instance.init; + } + this.flip = function( _updateH, _updateV ){ + if( _updateH !== true && _updateV !== true ) return; + flipH = _updateH === true ? -flipH : flipH; + flipV = _updateV === true ? -flipV : flipV; + reversibleImage.resize( flipH * w, flipV * h ); + } + this.flipV = function(){ + return flipV; + } + this.flipH = function(){ + return flipH; + } + this.resourcePicture = function( _resourcePicture ){ + if( _resourcePicture && _resourcePicture !== resourcePicture ){ + HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture ); + updateResourcePicture( _resourcePicture ); + } + return resourcePicture; + } + this.getArtistID = function(){ + return resourcePicture.artist_id || resourcePicture.artist.id || -1; + } + this.actualW = function(){ return actualW;} + this.actualH = function(){ return actualH;} + this.keepSize = false; + this.resize = function( _x, _y, _w, _h, animate ){ instance.x = x = _x !== undefined ? _x : x; instance.y = y = _y !== undefined ? _y : y; instance.w = w = _w !== undefined ? _w : w; instance.h = h = _h !== undefined ? _h : h; - JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { + JQ_WRAPPER[ animate === true ? 'animate' : 'css' ]( { left: x, top: y, width: w, height: h - }, 250, onAnimeComplete); + }, 250, onAnimeComplete ); animate !== true && onAnimeComplete(); } - function onAnimeComplete(){ - reversibleImage.resize( flipH * w, flipV * h); + this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){ + flipH = _flipH !== undefined ? _flipH : flipH; + flipV = _flipV !== undefined ? _flipV : flipV; + instance.resize( _x, _y, _w, _h, true ); } - - function updateUrl( _url){ - if( url === _url) return; - url = _url || url; - var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){ - actualW = _actualW; - actualH = _actualH; - }); - if( reversibleImage !== null){ - JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm); - reversibleImage.destroy(); - } else { - JQ_WRAPPER.append( _reversibleImage.elm); - } - reversibleImage = _reversibleImage; + this.destroy = function(){ + delete instance.destroy; + + reversibleImage.destroy(); + JQ_WRAPPER.stop().remove(); + JQ_WRAPPER = reversibleImage = resourcePicture = data = instance = null; } - return pettanr.util.extend( - new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing), - { - init: function(){ - instance = this; - updateUrl(); - update(); - delete this.init; - }, - flip: function( _flipH, _flipV){ - if( _flipH !== true && _flipV !== true) return; - flipH = _flipH === true ? -flipH : flipH; - flipV = _flipV === true ? -flipV : flipV; - reversibleImage.resize( flipH * w, flipV * h); - }, - flipV: function(){ - return flipV; - }, - flipH: function(){ - return flipH; - }, - url: function( _url, _actualW, _actualH){ - if( _url && _url !== url){ - SAVE( updateUrl, url, _url); - actualW = _actualW; - actualH = _actualH; - updateUrl( _url); - } - return url; - }, - actualW: function(){ return actualW;}, - actualH: function(){ return actualH;}, - keepSize: false, - resize: update, - animate: function ( _x, _y, _w, _h, _flipH, _flipV){ - flipH = _flipH !== undefined ? _flipH : flipH; - flipV = _flipV !== undefined ? _flipV : flipV; - update( _x, _y, _w, _h, true); - }, - getAsHTML: function( isAbsoluteUrl, isXHTML){ - return [ - '' : ' \/>' - ].join( ''); - }, - getAsJsonString: function(){ - var cr = pettanr.LINE_FEED_CODE_TEXTAREA; - return [ - '"new', this.timing, '": {', cr, - '"resource_picture_id": 1,', cr, - '"x": ', x, ',', cr, - '"y": ', y, ',', cr, - '"z": ', this.z, ',', cr, - '"width": ', w, ',', cr, - '"height": ', h, ',', cr, - '"flipv": ', flipV === true ? 1 : 0, ',', cr, - '"fliph": ', flipH === true ? 1 : 0, ',', cr, - '"t": ', this.timing, cr, - '}' - ].join( ''); - }, - destroy: function(){ - reversibleImage.destroy(); - JQ_WRAPPER.remove(); - JQ_WRAPPER = reversibleImage = OPERATOR = null; - delete this.destroy; - } - } - ); } + ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE ); /* * / ImageElementClass * -------------------------------------------------------------------------------------------- */ -/* - * -------------------------------------------------------------------------------------------- +/* -------------------------------------------------------------------------------------------- * TextElementClass * - * ELM はpettanr.domで書き出したものを突っ込むcreateの場合 - * * type * 0.none * 1.speach balloon @@ -2795,24 +2333,77 @@ pettanr.editor = ( function(){ * */ var jqTextElementOrigin; - var TextElementClass = function( type, a, text, x, y, z, w, h, timing){ + var TextElementClass = function( data ){ jqTextElementOrigin = jqTextElementOrigin || ( function(){ var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()), _MODERN = $( $( '#textElementTemplete').remove().html()); return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN; })(); - var JQ_WRAPPER = jqTextElementOrigin.clone( true), - XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type), - TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0), - OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER, - HIT_AREA = MOUSE_HIT_AREA, - SAVE = HISTORY.saveState, - instance; - - JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm); + var JQ_WRAPPER = jqTextElementOrigin.clone( true ), + elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ), + type = data.balloon_template_id, + text = ( function(){ + var _speachs = data.speaches_attributes; + for( var k in _speachs ){ + return _speachs[ k ].content || ''; + } + return ''; + })(), + balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ), + x, y, w, h, a, + instance = this; - function update( _x, _y, _w, _h, _a, animate){ + JQ_WRAPPER.find( 'img' ).eq( 0 ).replaceWith( balloon.elm ); + + function updateType( _type ){ + if( type !== _type ){ + type = _type || type; + balloon.type( type ); + } + } + function updateAngle( _a ){ + if( _a !== undefined && a !== _a ){ + a = _a !== undefined ? _a : a; + balloon.angle( a ); + } + } + function updateText( _text ){ + text = _text || text || ''; + elmText.firstChild.data = text; + } + function resizeBalloon(){ + balloon && balloon.resize( a, w, h ); + } + + /* global methods */ + this.$ = JQ_WRAPPER; + //this.x = x; + //this.y = y; + //this.w = w; + //this.h = h; + this.z = data.z; + this.timing = data.t; + this.init = function(){ + updateText(); + instance.resize( data.x, data.y, data.width, data.height, data.tail ); + delete instance.init; + } + this.angle = function( _a ){ + _a !== undefined && instance.resize( x, y, w, h, _a ); + return a; + } + this.text = function( _text ){ + if( _text && text !== _text) { + HISTORY_CONTROL.saveState( updateText, text || '', _text ); + updateText( _text ); + } + return text; + } + this.getBalloonURL = function(){ + return balloon.getURL(); + } + this.resize = function( _x, _y, _w, _h, _a, animate ){ instance.x = x = _x !== undefined ? _x : x; instance.y = y = _y !== undefined ? _y : y; instance.w = w = _w !== undefined ? _w : w; @@ -2824,131 +2415,35 @@ pettanr.editor = ( function(){ top: y, width: w, height: h - }, 250, - function(){ - XBROWSER_BALLOON.resize( a, w, h); - } + }, 250, resizeBalloon ); - animate !== true && XBROWSER_BALLOON.resize( a, w, h); + animate !== true && resizeBalloon(); } - - function updateType( _type){ - if( type !== _type){ - type = _type || type; - XBROWSER_BALLOON.type( type); - } + this.animate = function ( _x, _y, _w, _h, _a ){ + instance.resize( _x, _y, _w, _h, _a, true ); } - function updateAngle( _a){ - if( _a !== undefined && a !== _a){ - a = _a !== undefined ? _a : a; - XBROWSER_BALLOON.angle( a); - } - } - function updateText( _text){ - text = _text || text || ''; - TEXT_ELM.html( text); + this.destroy = function(){ + delete instance.destroy; + + JQ_WRAPPER.stop().remove(); + balloon.destroy(); + JQ_WRAPPER = elmText = data = balloon = instance = null; } - - return pettanr.util.extend( - new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing), - { - init: function(){ - instance = this; - updateText(); - update(); - delete this.init; - }, - angle: function( _a){ - _a !== undefined && update( undefined, undefined, undefined, undefined, _a); - return a; - }, - text: function( _text){ - if( _text && text !== _text) { - SAVE( updateText, text || '', _text); - updateText( _text); - } - return text; - }, - resize: update, - animate: function ( _x, _y, _w, _h, _a){ - update( _x, _y, _w, _h, _a, true); - }, - destroy: function(){ - JQ_WRAPPER.remove(); - XBROWSER_BALLOON.destroy(); - OPERATOR = null; - delete this.destroy; - }, - getAsJSON: function(){ - - }, - getAsJsonString: function(){ - var cr = pettanr.LINE_FEED_CODE_TEXTAREA; - return [ - '"new', this.timing, '": {', cr, - '"balloon_template_id": ', 1, ',', cr, - '"system_picture_id": ', 1, ',', cr, - '"size": ', 1, ',', cr, - '"tail": ', a, ',', cr, - '"x": ', x, ',', cr, - '"y": ', y, ',', cr, - '"z": ', this.z, ',', cr, - '"t": ', this.timing, ',', cr, - '"width": ', w, ',', cr, - '"height": ', h, ',', cr, - '"speaches_attributes": {', cr, - '"newf', this.timing, '": {', cr, - '"content": "', text, '",', cr, - '"x": ', x, ',', cr, - '"y": ', y, ',', cr, - '"t": ', 0, ',', cr, - '"width": ', w, ',', cr, - '"height": ', h, cr, - '}', cr, - '}', cr, - '}' - ].join( ''); - }, - getAsHTML: function( isAbsoluteUrl, isXHTML){ - var url = XBROWSER_BALLOON.getURL(); - return [ - '' : ' \/>', - pettanr.LINE_FEED_CODE_TEXTAREA, - '
', text, '<\/span>', '<\/div>' - - ].join( ''); - }, - getAsXML: function(){} - - } - ); } + TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT ); - +/* -------------------------------------------------------------------------------------------- + * COMIC_ELEMENT_CONTROL + * - mouseEventListener + */ var COMIC_ELEMENT_CONTROL = ( function(){ - var SAVE = HISTORY.saveState, + var SAVE = HISTORY_CONTROL.saveState, ELM_CONTAINER = document.getElementById( 'comic-element-container'), currentElement = null, currentLockTest = false, currentLock = false, panelX, panelY, panelW, panelH, startX, startY; - /* * append, remove, replace * @@ -2961,129 +2456,160 @@ pettanr.editor = ( function(){ * * append comicElement * 1. 新しい comicElement の z-position を得る - * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（COMIC_ELEMENT_ARRAY） - * zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。 - * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。 + * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（PANEL_ELEMENT_ARRAY） + * zが大きいほど、PANEL_ELEMENT_ARRAYの先頭へ。 + * 3. dom位置は、PANEL_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。 * * * remove comicElement * 1. remove * 2. renumber z */ - function appendComicElement( _comicElement) { - _comicElement.init && _comicElement.init(); - var z = _comicElement.z, - l = COMIC_ELEMENT_ARRAY.length, - _jqElm = _comicElement.$.stop().css( { + function appendComicElement( _panelElement ) { + var z = _panelElement.z, + l = PANEL_ELEMENT_ARRAY.length, + _jqElm = _panelElement.$.stop().css( { filter: '', opacity: '' }); - if( typeof z !== 'number' || z < 0 || z >= l){ - COMIC_ELEMENT_ARRAY.unshift( _comicElement); - ELM_CONTAINER.appendChild( _jqElm.get( 0)); + if( typeof z !== 'number' || z < 0 || z >= l ){ + PANEL_ELEMENT_ARRAY.unshift( _panelElement ); + ELM_CONTAINER.appendChild( _jqElm.get( 0 )); _jqElm.fadeIn(); + } else + if( l === 0 ){ + PANEL_ELEMENT_ARRAY.push( _panelElement ); + ELM_CONTAINER.appendChild( _jqElm.get( 0 )); } else { var insertIndex = 0; - for( var i = 0; i < l; ++i){ - if( COMIC_ELEMENT_ARRAY[ i].z <= z){ + for( var i = 0; i < l; ++i ){ + if( PANEL_ELEMENT_ARRAY[ i ].z <= z ){ insertIndex = i; break; } } - COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn()); - COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement); + PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() ); + PANEL_ELEMENT_ARRAY.splice( insertIndex, 0, _panelElement ); } - numberingComicElement(); + renumber(); } - function removeComicElement( _comicElement) { - var l = COMIC_ELEMENT_ARRAY.length; + function removeComicElement( _panelElement ) { + var l = PANEL_ELEMENT_ARRAY.length; for( var i=0; i 0){ + _comicElm = PANEL_ELEMENT_ARRAY.shift(); + _comicElm.destroy && _comicElm.destroy(); + } + }, + remove: removeComicElement, + restore: restoreComicElement, + replace: replaceComicElement, + restoreReplace: restoreReplaceElement, + onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ){ /* * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。 */ if( isResizerTopAction === true){ var _shiftX = _panelW -panelW, _shiftY = _panelH -panelH, - l = COMIC_ELEMENT_ARRAY.length; + l = PANEL_ELEMENT_ARRAY.length; for( var i = 0; i < l; i++){ - COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY); + PANEL_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY); } } panelX = _panelX; @@ -3096,20 +2622,20 @@ pettanr.editor = ( function(){ ELM_CONTAINER.style.left = _panelX +'px'; ELM_CONTAINER.style.top = _panelY +'px'; }, - onMouseMove: function( _mouseX, _mouseY){ - var l = COMIC_ELEMENT_ARRAY.length, + onMouseMove: function( _mouseX, _mouseY ){ + var l = PANEL_ELEMENT_ARRAY.length, _x = _mouseX -panelX, _y = _mouseY -panelY, _elm = currentElement; if( _elm !== null){ currentLockTest = currentLockTest === true && _x === 0 && _y === 0; - if( _elm.busy() === true){ + if( _elm.busy() === true ){ _elm.onMouseMove( _x, _y); return true; } - if( _elm.hitTest( _x, _y) === true){ - _elm.onMouseMove( _x, _y); // cursor + if( _elm.hitTest( _x, _y) === true ){ + _elm.onMouseMove( _x, _y ); // cursor return true; } if( currentLock === true){ @@ -3118,25 +2644,27 @@ pettanr.editor = ( function(){ } } for( var i=0; i' - ].join( '') - ); - HTML_ARRAY.push( '
'); - - return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA); - }, - getAsJsonString: function(){ - var JSON_STRING_ARRAY = [], - IMAGE_ARRAY = [], - BALLOON_ARRAY = [], - l = COMIC_ELEMENT_ARRAY.length, - _timing = 0, - _comicElement, - cr = pettanr.LINE_FEED_CODE_TEXTAREA; - - while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){ - _comicElement = getComicElementByTiming(); - if( _comicElement === null) break; - _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? - IMAGE_ARRAY.push( _comicElement.getAsJsonString()) : - BALLOON_ARRAY.push( _comicElement.getAsJsonString()); - } - function getComicElementByTiming(){ - while( _timing < l *2){ - for(var i=0; i' + ].join( '') + ); + HTML_ARRAY.push( ''); + + return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA); + } + + function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){ + var url; + if( _panelElement.type === 0 ){ + url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' ); + return [ + '' : ' \/>' + ].join( ''); + } else { + url = _panelElement.getBalloonURL(); + return [ + '' : ' \/>', + pettanr.LINE_FEED_CODE_TEXTAREA, + '
', _panelElement.text(), '<\/span>', '<\/div>' + + ].join( ''); + } + } + + function getAsJsonString( comicID, panelID, panelTimming, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){ + timing = 0; + + var JSON_STRING_ARRAY = [], + IMAGE_ARRAY = [], + BALLOON_ARRAY = [], + l = PANEL_ELEMENT_ARRAY.length, + _panelElement, + cr = pettanr.LINE_FEED_CODE_TEXTAREA; + + while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l){ + _panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l ); + if( _panelElement === null) break; + _panelElement.type === 0 ? + IMAGE_ARRAY.push( imageToJson( _panelElement )) : + BALLOON_ARRAY.push( balloonToJson( _panelElement ) ); + } + return [ + '{', cr, + '"panel": {', cr, + '"id": ', panelID, ',', cr, + '"border": ', border, ',', cr, + '"comic_id": ', comicID, ',', cr, + '"resource_picture_id": 1,', cr, + '"x": ', 0, ',', cr, + '"y": ', 0, ',', cr, + '"z": ', 0, ',', cr, + panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '', + '"width": ', panelW, ',', cr, + '"height": ', panelH, ',', cr, + '"panel_pictures_attributes": {', cr, + IMAGE_ARRAY.join( ',' + cr ), cr, + '},', cr, + '"balloons_attributes": {', cr, + BALLOON_ARRAY.join( ',' + cr ), cr, + '}', cr, + '}', cr, + '}' + ].join( '' ); + } + function imageToJson( _imageElement ){ + var cr = pettanr.LINE_FEED_CODE_TEXTAREA; + return [ + '"new', timing, '": {', cr, + '"resource_picture_id": ', _imageElement.resourcePicture().id, ',', cr, + '"x": ', _imageElement.x, ',', cr, + '"y": ', _imageElement.y, ',', cr, + '"z": ', _imageElement.z, ',', cr, + '"width": ', _imageElement.flipH() * _imageElement.w, ',', cr, + '"height": ', _imageElement.flipV() * _imageElement.h, ',', cr, + '"t": ', timing, cr, + '}' + ].join( ''); + } + + function balloonToJson( _textElement ){ + var cr = pettanr.LINE_FEED_CODE_TEXTAREA; + return [ + '"new', timing, '": {', cr, + '"balloon_template_id": ', 1, ',', cr, + '"system_picture_id": ', 1, ',', cr, + '"size": ', 1, ',', cr, + '"tail": ', _textElement.angle(), ',', cr, + '"x": ', _textElement.x, ',', cr, + '"y": ', _textElement.y, ',', cr, + '"z": ', _textElement.z, ',', cr, + '"t": ', timing, ',', cr, + '"width": ', _textElement.w, ',', cr, + '"height": ', _textElement.h, ',', cr, + '"speaches_attributes": {', cr, + '"newf', timing, '": {', cr, + '"content": "', _textElement.text(), '",', cr, + '"x": ', _textElement.x, ',', cr, + '"y": ', _textElement.y, ',', cr, + '"t": ', timing, ',', cr, + '"width": ', _textElement.w, ',', cr, + '"height": ', _textElement.h, cr, + '}', cr, + '}', cr, + '}' + ].join( ''); + } + + + /* grobal method */ + this.rootElement = document.getElementById( 'output-console-wrapper' ); + this.displayName = ID; + this.ID = ID; + + this.MIN_WIDTH = 320; + this.MIN_HEIGHT = 320; + this.init = function(){ + jqWrap = $( '#output-console-wrapper').hide(); + jqOutputArea = $( '#output-area'); + delete instance.init; + } + this.onOpen = function( _w, _h, _dataType, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements ){ + instance.init && instance.init(); + + jqWrap.show(); + instance.onPaneResize( _w, _h ); + var text; + if( _dataType === pettanr.outputConsole.JSON ){ + text = getAsJsonString( _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements ); + } else { + text = getAsHtmlString( false, false, _panelW, _panelH, _borderSize, _panelElements ); + } + jqOutputArea.val( text ).focus(); + } + this.onPaneResize = function( _w, _h){ + jqWrap.css( + { + left: Math.floor( ( _w -jqWrap.width()) /2), + top: Math.floor( ( _h -jqWrap.height()) /2) + } + ); + } + this.onClose = function(){ + jqWrap.hide(); + jqOutputArea.val(''); } -})(); +}); +pettanr.outputConsole.JSON = 0; +pettanr.outputConsole.HTML = 1; +pettanr.outputConsole.XML = 2; +pettanr.outputConsole.SHORT_URL = 3; +pettanr.outputConsole.MOVERBLE_TYPE = 4; +pettanr.outputConsole.BLOGGER = 5;