X-Git-Url: http://git.osdn.net/view?a=blobdiff_plain;f=app%2Fassets%2Fjavascripts%2Fwork.js;fp=app%2Fassets%2Fjavascripts%2Fwork.js;h=0000000000000000000000000000000000000000;hb=9c5ada11dfaeed33da94d11badfa5dbecf28f7a3;hp=91fa9eed0f5ed70622d468274329eb15da5563de;hpb=cb0fdc92f7c9fba15907f13c4c4d31ac99525fda;p=pettanr%2Fpettanr.git diff --git a/app/assets/javascripts/work.js b/app/assets/javascripts/work.js deleted file mode 100644 index 91fa9eed..00000000 --- a/app/assets/javascripts/work.js +++ /dev/null @@ -1,3800 +0,0 @@ -/* - * pettanR work.js - * version 0.4.5 - * - * author: - * itozyun - * licence: - * 3-clause BSD - * - * - * ---------------------------------------- - * naming rules - * - * Class - * ThisIsClass - * - * const - * THIS_IS_CONST = 'this is const'; - * - * var - * thisIsVar - * - * value of jquery - * jqWrapper, JQ_WRAPPER - * - * value of dom element - * elmWrapper, ELM_WRAP - * - * value of vml element - * vmlImg, VML_SHAPE - * - */ - - -/* ---------------------------------------- - * pettanr.editor - * - MENU_BAR_CONTROL - * - HISTORY_CONTROL - * - SAVE_CONTROL - * - TEXT_EDITOR_CONTROL - * - IMAGE_GROUP_EXPROLER - * - WINDOW_CONTROL - * - WindowClass - * - INFOMATION_WINDOW - * - TOOL_BOX_WINDOW - * - HELP_DOCUMENTS_WINDOW - * - PANEL_CONTROL - * - GRID_CONTROL - * - WHITE_GLASS_CONTROL - * - PANEL_CONTROL - * - * - * - PanelResizerClass - * - PANEL_RESIZER_TOP - * - PANEL_RESIZER_BOTTOM - * - CONSOLE_CONTROLER - * - * - TAIL_OPERATOR - * - RESIZE_OPERATOR - * - POSITION_OPERATOR - * - COMIC_ELEMENT_OPERATION_MANAGER - * - * - ImageElementClass - * - TextElementClass - * - * - COMIC_ELEMENT_CONTROL - * - * - */ -pettanr.editor = ( function(){ - - var COMIC_ELEMENT_TYPE_IMAGE = 0, - COMIC_ELEMENT_TYPE_TEXT = 1, - MOUSE_LISTENER_ARRAY = [], - COMIC_ELEMENT_ARRAY = [], - ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'), - MIN_PANEL_HEIGHT = 20, - MIN_ELEMENT_SIZE = 19, - MOUSE_HIT_AREA = 10, - jqMouseEventChacher, - jqEditor, - windowW, windowH, - currentListener = null, - currentCursor = '', - option, - log; - -/* ---------------------------------------- - * MENU BAR - * - mouseEventListener - * - controler - * - * div - * div.title - * ul - * li - * a - * span - * kbd shortcut - */ - var MENU_BAR_CONTROL = ( function(){ - var ELM_BAR = document.getElementById( 'menu-bar'), - ELM_ITEM_CLASSNAME = 'menu-bar-item', - ELM_ITEM_ORIGN = ( function(){ - var ret = document.createElement( 'div'), - div = document.createElement( 'div'), - ul = document.createElement( 'ul'); - ret.className = ELM_ITEM_CLASSNAME; - ret.appendChild( div); - ret.appendChild( ul); - return ret; - })(), - ELM_SELECTION_ORIGN = ( function(){ - var ret = document.createElement( 'li'), - a = document.createElement( 'a'), - span = document.createElement( 'span'), - key = document.createElement( 'kbd'); - a.appendChild( span); - a.appendChild( key); - ret.appendChild( a); - a.href = '#'; - return ret; - })(), - ITEM_ARRAY = [], - barH = pettanr.util.getElementSize( ELM_BAR).height, - itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width, - selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width, - jqStage, jqBar; - ELM_BAR.style.top = ( -barH) +'px'; - - 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]; - - if( shortcut){ - elmShortcut.innerHTML = shortcut; - } else { - elmShortcut.parentNode.removeChild( elmShortcut); - } - elmShortcut = null; - - container.appendChild( ELM_WRAPPER); - - updateTitle( title); - updateVisible( visible); - - function updateTitle( _title){ - ELM_TITLE.innerHTML = title = _title; - } - function updateVisible( _visible){ - if( _visible !== undefined){ - visible = !!_visible; - ELM_WRAPPER.className = visible === true ? '' : 'disabled'; - }; - } - return { - elm: ELM_WRAPPER, - title: function( _title){ - _title !== undefined && updateTitle( _title); - return title; - }, - visible: function( _visible){ - visible !== !!_visible && updateVisible( _visible); - return visible; - }, - separateAfter: separateAfter - } - } - - 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 = [], - numSelection = 0, - visible = false; - ELM_TITLE.innerHTML = title; - - ELM_WRAPPER.style.left = ( itemW * INDEX) +'px'; - ELM_BAR.appendChild( ELM_WRAPPER); - - function onClick( e){ - var that = this, - i = pettanr.util.getChildIndex( this.parentNode, this); - i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i); - e.stopPropagation(); - return false; - } - return { - elm: ELM_WRAPPER, - onClick: onClick, - init: function(){ - $( ELM_SELECTION).children( 'li').click( onClick); - delete this.init; - }, - show: function(){ - if( visible === true) return; - jqStage.append( ELM_WRAPPER); - ELM_WRAPPER.className = ELM_ITEM_CLASSNAME +'-focus'; - this.onShow && setTimeout( this.onShow, 0); - visible = true; - }, - hide: function(){ - if( visible === false) return; - ELM_BAR.appendChild( ELM_WRAPPER); - ELM_WRAPPER.className = ELM_ITEM_CLASSNAME; - this.onHide && setTimeout( this.onHide, 0); - visible = false; - }, - createSelection: function( title, shortcut, callback, visible, separateBefore, separateAfter){ - var ret = MenubarSelectionClass.apply( {}, [ ELM_SELECTION, title, shortcut, visible, separateAfter]), - before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null; - SELECTION_CALLBACK_ARRAY.push( callback); - if( before !== null && ( separateBefore === true || before.separateAfter === true)){ - ret.elm.style.borderTop = '1px solid #ccc'; - } - return ret; - } - } - } - - - function createMenubarItem( title){ - var _item = new MenuBarItemClass( title); - ITEM_ARRAY.push( _item); - return _item; - } - return { - init: function(){ - jqStage = jqEditor; - jqBar = $( ELM_BAR).animate( { top: 0}); - - var l = ITEM_ARRAY.length; - for( var i=0; i= _mouseY){ - return true; - } - var l = ITEM_ARRAY.length; - for( var i=0; i 0){ - _value = _argBack.shift(); - _destroy === true && typeof _value.destroy === 'function' && _value.destroy(); - } - } - if( typeof _argForword.length === 'number'){ - while( _argForword.length > 0){ - _value = _argForword.shift(); - _destroy === true && typeof _value.destroy === 'function' && _value.destroy(); - } - } - } - return { - init: function(){ - log = $( '#history-log'); - delete HISTORY_CONTROL.init; - }, - 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, - argForword: _argForword, - destroy: _destroy - }); - MENUBAR_BACK.visible( true); - SAVE_CONTROL.panelUpdated( true); - - var _stack; - while( STACK_FORWARD.length > 0){ - _stack = STACK_FORWARD.shift(); - destroyStack( _stack, _stack.destroy); - } - MENUBAR_FORWARD.visible( false); - } - } - })(); - - -/* ---------------------------------------- - * OUTPUT_CONSOLE - * - overlay - */ - var OUTPUT_CONSOLE = ( function(){ - var jqWrap, jqOutputArea, - ID = 'outputConsole'; - //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK); - - function close(){ - jqWrap.hide(); - jqOutputArea.val(''); - } - function clickOK(){ - pettanr.overlay.hide(); - close(); - } - return { - init: function(){ - this.jqWrap = jqWrap = $( '#output-console-wrapper').hide(); - jqOutputArea = $( '#output-area'); - delete OUTPUT_CONSOLE.init; - }, - jqWrap: null, - show: function( _text){ - jqWrap.show(); - - - pettanr.overlay.show( this); - jqWrap.css( - { - left: Math.floor( ( windowW -jqWrap.width()) /2), - top: Math.floor( ( windowH -jqWrap.height()) /2) - } - ); - - jqOutputArea.val( _text).focus(); - }, - onWindowResize: function(){ - jqWrap.css( - { - left: Math.floor( ( windowW -jqWrap.width()) /2), - top: Math.floor( ( windowH -jqWrap.height()) /2) - } - ); - }, - onClose: close, - ID: 'textEditor' - } - })(); - -/* ---------------------------------------- - * 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), - SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true), - SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true), - QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true), - updated = false; - - function quit(){ - // 本来は os.application.close(); - pettanr.view.show( 'entrance'); - } - - function outputAsHtml(){ - OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false)); - } - function outputAsJsonString(){ - OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString()); - } - return { - open: function(){}, - close: function(){}, - quit: quit, - panelUpdated: function( _updated){ - if( _updated !== undefined && updated !== _updated){ - SAVE.visible( !!_updated); - SAVE_AND_QUIT.visible( !!_updated); - updated = !!_updated; - } - return updated; - }, - save: function(){ - - } - } - })(); - -/* ---------------------------------------- - * Text Editor - * - overlay - */ - var TEXT_EDITOR_CONTROL = ( function(){ - var jqWrap, jqTextarea, jqButton, - textElement, onUpdateFunction, - ID = 'textEditor'; - //pettanr.key.addKeyDownEvent( 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: ID - } - })(); - -/* ---------------------------------------- - * 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, - _g_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, - imgW, imgH; - JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes'); - jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW})); - - function onImageLoad( url, _imgW, _imgH){ - if( reversibleImage === null) { - alert( url); - return; - } - 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( onClick); - } - - function onClick( e){ - pettanr.overlay.hide(); - if( _g_onUpdateFunction) { - if( LOW_SRC === null){ - window[ _g_onUpdateFunction]( SRC, imgW, imgH); - window[ _g_onUpdateFunction] = null; - } else { - var _onLoad = pettanr.util.createGlobalFunc( [ - 'function( url, w, h){', - 'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,', h || ', data.height,');', - 'window["', _g_onUpdateFunction, '"] = null;', - '}' - ].join( '')), - _onError = pettanr.util.createGlobalFunc( [ - 'function( url){', - 'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');', - 'window["', _g_onUpdateFunction, '"] = null;', - '}' - ].join( '')); - pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]); - window[ _onLoad] = window[ _onError] = undefined; - } - } - close(); - } - - return { - onEnter: function(){ - if( onEnterFlag === true) return; - reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad); - 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); - onEnterInterval = _g_onUpdateFunction = 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; - } - return { - init: function(){ - this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide(); - jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel); - 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; - if( _onUpdateFunction){ - _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction); - } else { - _g_onUpdateFunction = null; - } - 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(){ - /* - * 表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。 - */ - var DEFAULT_MIN_WINDOW_WIDTH = 200, - DEFAULT_MIN_WINDOW_HEIGHT = 200, - WINDOW_ARRAY = [], - WINDOW_BODY_BODER_SIZE = 1, - jqContainer, - currentWindow, - currentWindowIndex = -1, - log; - - var jqWindowOrigin, - closeButtonWidth; - var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){ - var MOUSE_CURSOR = updateMouseCursor, - MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( - ( visible !== true ? 'show ' : 'hide ') +title, - null, onMenuClick, true - ), - jqStage, - jqWrapper, jqHeader, jqFooter = null, - elmBody, elmBodyStyle, - startX, startY, startW, startH, - offsetX, offsetY, - headerH, bodyH, footerH = 0, - isDragging = false, - isResizing = false, - bodyIsTachable = false, - instance; - - function onMenuClick(){ - visible === true ? instance.close() : instance.open(); - } - function update( _x, _y, _w, _h){ - _x = _x !== undefined ? _x : x; - _y = _y !== undefined ? _y : y; - _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h; - _w = _w !== undefined ? _w : w; - _h = _h !== undefined ? _h : h; - jqWrapper.css( { - left: _x, - top: _y, - width: _w, - height: _h - }); - bodyH = _h -headerH -footerH; - elmBodyStyle.height = bodyH +'px'; - ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, bodyH); - x = _x; - y = _y; - w = _w; - h = _h; - } - function bodyBackOrForward( isBack){ - if( !instance) return; - if( bodyIsTachable === !isBack) return; - elmBodyStyle.position = isBack === true ? 'relative' : 'absolute'; - elmBodyStyle.left = isBack === true ? 0 : x +'px'; - elmBodyStyle.top = isBack === true ? 0 : y +headerH +'px'; - elmBodyStyle.width = isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px'; - bodyIsTachable === isBack && isBack === true ? jqHeader.after( elmBody) : jqStage.append( elmBody); - bodyIsTachable = !isBack; - } - function onWindowResize( e){ - bodyBackOrForward( true); - isResizing = true; - startX = x; - startY = y; - startW = w; - startH = h; - offsetX = e.pageX; - offsetY = e.pageY; - MOUSE_CURSOR( 'nw-resize'); - e.stopPropagation(); - return false; - } - return { - init: function( jqContainer){ - /* - * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う. - */ - instance = this; - - jqWindowOrigin = jqWindowOrigin || ( function(){ - return $( $( '#windowTemplete').remove().html()); - })(); - closeButtonWidth = closeButtonWidth || ( function(){ - return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width; - })(); - - jqStage = jqEditor; - this.$ = jqWrapper = jqWindowOrigin.clone( true); - jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title); - headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height; - elmBody = jqWrapper.children( '.window-body').get( 0); - elmBodyStyle = elmBody.style; - - if( bodyTempleteID) { - jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html())); - } else { - jqWrapper.find( '.window-body-insert-position').remove(); - } - CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove(); - - this.onInit && this.onInit(); - delete this.init; - }, - x: function(){ return x;}, - y: function(){ return y;}, - w: function(){ return w;}, - h: function(){ return h;}, - $: null, - title: function( _title){ - typeof _title === 'string' && jqHeader.html( _title); - title = typeof _title === 'string' ? _title : title; - return title; - }, - visible: visible, - firstOpen: function(){ - if( RESIZE_BUTTON_ENABLED === true){ - footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height; - //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize); - } else { - jqWrapper.find( '.window-footer').remove(); - } - this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH); - - update( x, y, w, h); - - delete this.firstOpen; - }, - open: function(){ - if( visible === true) return; - instance.visible = visible = true; - openWindow( instance); - MENUBAR_SELWCTION.title( 'hide ' +title); - - for( var i=0, l = WINDOW_ARRAY.length; i _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return; - if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){ - instance.close(); - return; - } - - isDragging = true; - MOUSE_CURSOR( 'move'); - startX = x; - startY = y; - startW = w; - startH = h; - offsetX = _mouseX; - offsetY = _mouseY; - }, - onMouseUp: function( _mouseX, _mouseY){ - isDragging = isResizing = false; - MOUSE_CURSOR( ''); - }, - onMouseMove: function( _mouseX, _mouseY){ - var _updateX = _mouseX -offsetX, - _updateY = _mouseY -offsetY; - - if( isResizing === true){ - var _w = startW +_updateX, - _h = startH +_updateY; - update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h); - return; - } else - if( isDragging === true) { - update( startX +_updateX, startY +_updateY); - return; - } else - if( x > _mouseX || x +w < _mouseX ) return; - - ( y <= _mouseY && y +headerH >= _mouseY ) ? - MOUSE_CURSOR( 'pointer') : // hit to header - MOUSE_CURSOR( ''); - bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY); - }, - onMouseOut: function( _mouseX, _mouseY){ - bodyIsTachable === true && bodyBackOrForward( true); - isDragging = false; - MOUSE_CURSOR( ''); - }, - busy: function(){ - return isDragging === true || isResizing === true; - }, - bodyHeight: function(){ - return bodyH; - } - } - }; - - function getCurrentIndex( _mouseX, _mouseY){ - if( currentWindow && currentWindow.busy() === true) return currentWindowIndex; - var l = WINDOW_ARRAY.length, - _currentWindow = null, - _win, _x, _y; - currentWindowIndex = -1; - for( var i=0; i= _mouseX && _y +_win.h() >= _mouseY){ - _currentWindow = _win; - currentWindowIndex = i; - break; - } - } - currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY); - currentWindow = _currentWindow; - return currentWindowIndex; - } - function openWindow( _window){ - if( _window.visible !== true) return; - var _jqWindow = _window.$; - jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない． - _jqWindow.fadeIn( _window.onFadeIn); - return; - } - - return { - init: function(){ - jqContainer = $( '#window-container'); - - var l = WINDOW_ARRAY.length, - _window; - for( var i=l-1; i >= 0; --i){ - _window = WINDOW_ARRAY[ i]; - _window.init && _window.init( jqContainer); - _window.visible === true && openWindow( _window); - } - log = $( '#window-log'); - - delete WINDOWS_CONTROL.init; - }, - open: function(){ - WINDOWS_CONTROL.init && WINDOWS_CONTROL.init(); - }, - close: function(){ - - }, - onMouseMove: function( _mouseX, _mouseY){ - var _index = getCurrentIndex( _mouseX, _mouseY); - if( _index === 0){ - currentWindow.onMouseMove( _mouseX, _mouseY); - return true; - } else - if( _index > 0){ // 先頭のクリックでない場合 - // Array を前に - WINDOW_ARRAY.splice( currentWindowIndex, 1); - WINDOW_ARRAY.unshift( currentWindow); - // Domを最後に - jqContainer.append( currentWindow.$); - currentWindowIndex = 0; - return true; - } - return false; - }, - onMouseUp: function( _mouseX, _mouseY){ - if( getCurrentIndex( _mouseX, _mouseY) === 0){ - currentWindow.onMouseUp( _mouseX, _mouseY); - return true; - } - return false; - }, - onMouseDown: function( _mouseX, _mouseY){ - if( getCurrentIndex( _mouseX, _mouseY) === 0){ - currentWindow.onMouseDown( _mouseX, _mouseY); - return true; - } - return false; - }, - busy: function(){ - return currentWindow !== null; - }, - onWindowResize: function( _windowW, _windowH){ - /* - * 画面外に出るwindowの移動 - */ - }, - 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; - opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH; - opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT; - - var _window = pettanr.util.extend( - new WindowClass( - bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH - ), - EXTENDS - ); - WINDOW_ARRAY.unshift( _window); - WINDOWS_CONTROL.init === undefined && _window.init( jqContainer); - WINDOWS_CONTROL.init === undefined && openWindow( _window); - return _window; - } - } - })(); - -/* ---------------------------------------- - * TOOL_BOX_WINDOW - * - window - */ - var TOOL_BOX_WINDOW = ( function(){ - var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton, - instance; - - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 73, false, true, addImage); - MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false); - - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 84, false, true, addText); - MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true); - - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 71, false, true, switchGrid); - MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true); - - function addImage( e){ - setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0); - e && e.preventDefault && e.preventDefault(); - return false; - } - function addText( e){ - setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0); - e && e.preventDefault && e.preventDefault(); - return false; - } - function switchGrid( e){ - setTimeout( GRID_CONTROL.update, 0); - e && e.preventDefault && e.preventDefault(); - return false; - } - function popupHelp( e){ - instance.bodyBackOrForward( true); - setTimeout( HELP_DOCUMENTS_WINDOW.open, 0); - e && e.preventDefault && e.preventDefault(); - return false; - } - function editBG( e){ - instance.bodyBackOrForward( true); - setTimeout( INFOMATION_WINDOW.open, 0); - e && e.preventDefault && e.preventDefault(); - return false; - } - - return WINDOWS_CONTROL.createWindow( - { - onInit: function(){ - instance = this; - delete this.onInit; - }, - onFirstOpen: function(){ - addImageButton = $( '#toolbox-add-image-button').click( addImage); - addTextButton = $( '#toolbox-add-text-button').click( addText); - editBgButton = $( '#toolbox-edit-bg-button').click( editBG); - switchGridButton = $( '#toolbox-switch-grid').click( switchGrid); - popupHelpButton = $( '#toolbox-popup-help-button').click( popupHelp); - - postButton = $( '#toolbox-post-button'); - - delete this.onFirstOpen; - } - }, - 'toolbox-window', 'Tool box', 0, 215, 110, 290, true - ); - })(); - - -/* ---------------------------------------- - * IMAGE_EXPROLER - * - window - */ - var IMAGE_EXPLORER_WINDOW = ( function(){ - var instance, finder; - - return WINDOWS_CONTROL.createWindow( - { - onInit: function(){ - instance = this; - delete this.onInit; - }, - onFirstOpen: function( _w, _h){ - finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree()); - delete this.onFirstOpen; - }, - onOpen: function( _w, _h){ - finder.onOpen( _w, _h); - }, - onResize: function( _w, _h){ - finder.onWindowResize( _w, _h); - } - }, - 'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300 - ); - })(); - - -/* ---------------------------------------- - * INFOMATION_WINDOW - * - window - */ - var INFOMATION_WINDOW = ( function(){ - 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, - inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio, - inputPercentW, inputPercentH, - currentComicElement = null, - currentElementType = -1, - currentLock = false; - - return WINDOWS_CONTROL.createWindow( - { - onFirstOpen: function( _w, _h){ - backgroundInfomationElm = $( '#panel-background-information'); - - jqComicElementInformation = $( '#comic-element-infomation').hide().css( { - height: _h - }); - var TAB_GROUP_ID = 'comic-element-attribute'; - 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.css( { - height: _h - }); - }, - 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 === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0, - w = currentElement !== null ? currentElement.w : 0, - h = currentElement !== null ? currentElement.h : 0, - actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1, - actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1, - wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0, - hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0, - keepAspect = currentElement !== null && currentElement.keepAspect === true; - - if( currentElementType !== _elementType){ - if( _elementType !== -1){ - if( _elementType === 1){ - inputA.visible( true); - inputPercentW.visible( false); - inputPercentH.visible( false); - inputAspectRatio.hide(); - } else { - inputA.visible( false); - inputPercentW.visible( true); - inputPercentH.visible( true); - inputAspectRatio.show(); - } - currentElementType === -1 && jqComicElementInformation.stop().css( { - filter: '', - opacity: '' - })[ FADE_IN_EFFECT](); - } else { - currentElementType !== -1 && jqComicElementInformation.stop().css({ - filter: '', - opacity: '' - })[ FADE_OUT_EFFECT](); - } - currentElementType = _elementType; - } - if( currentElementType !== -1){ - inputX.update( x); - inputY.update( y); - inputZ.update( z); - _elementType === 1 && inputA.update( a); - inputW.update( w); - inputH.update( h); - _elementType === 0 && inputPercentW.update( wPercent); - _elementType === 0 && inputPercentH.update( hPercent); - } else { - - } - }, - lock: function( _currentLock){ - currentLock = !!_currentLock; - this.bodyBackOrForward( !currentLock); - } - }, - 'infomation-window', 'Infomation', 0, 30, 200, 180, true - ); - })(); - -/* ---------------------------------------- - * HELP_WINDOW - * - window - */ - var HELP_DOCUMENTS_WINDOW = ( function(){ - var visible = true, - jqAjaxContents, - jqNaviItems, - jqPages, - currentPageIndex = 0, - numPage = 0, - HELP = MENU_BAR_CONTROL.HELP, - onLoadFunction = HELP.createAjaxSelection( onAjaxStart), - instance; - - function onAjaxStart( _pageIndex){ - currentPageIndex = _pageIndex || currentPageIndex; - if( onHelpLoad !== null){ - $.ajax({ - url: 'help/jp.xml', - dataType: 'xml', - success: onHelpLoad - }); - onHelpLoad = null; - } - onAjaxStart = new Function; - } - var onHelpLoad = 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; - elmNavi.className = 'sidenavi'; - elmItemOrigin.className = 'sidenavi-item'; - elmItemOrigin.href = '#'; - elmPages.className = 'page-contents'; - elmPageOrigin.className = 'page-content main'; - 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, 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( - { - onInit: function(){ - instance = this; - jqAjaxContents = this.$.find( '.window-body').addClass( 'loading'); - delete this.onInit; - }, - onFirstOpen: function( _w, _h){ - jqAjaxContents.css( { height: _h}); - onAjaxStart(); - delete this.onFirstOpen; - }, - onResize: function( _w, _h){ - jqAjaxContents && jqAjaxContents.css( { height: _h}); - } - }, - null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300 - ); - })(); - -/* ---------------------------------------- - * GRID_CONTROL - * - control - * - panelResizeListener - */ - var GRID_CONTROL = ( function(){ - var ELM_GRID = document.getElementById( 'grid'), - BG_URL = "url('images/grid.gif')", - jqGrid, - visible = false; - - return { - init: 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'; - }, - enabled: function(){ - return visible; - }, - update: function(){ - jqGrid.css( { - opacity: '', - fliter: '' - }).stop()[ visible === true ? 'fadeOut' : 'fadeIn'](); - - visible = !visible; - - if( visible === true && BG_URL !== null){ - ELM_GRID.style.backgroundImage = BG_URL; - BG_URL = null; - } - return visible; - } - } - })(); - -/* ---------------------------------------- - * WHITE_GLASS_CONTROL - * - panelResizeListener - */ - var WHITE_GLASS_CONTROL = ( function(){ - var styleTop = document.getElementById( 'whiteGlass-top').style, - styleLeft = document.getElementById( 'whiteGlass-left').style, - styleRight = document.getElementById( 'whiteGlass-right').style, - styleBottom = document.getElementById( 'whiteGlass-bottom').style; - - return { - onPanelResize: function( _panelX, _panelY, _panelW, _panelH){ - var _w = _panelW, - _h = _panelH, - marginTop = _panelY, - marginBottom = windowH -_h -marginTop, - marginX = _panelX, - rightWidth = windowW -_w -marginX; - - styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px'; - - styleLeft.top = marginTop +'px'; - styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px'; - styleLeft.height = ( _h + marginBottom) +'px'; - - styleRight.top = marginTop +'px'; - styleRight.left = _w +marginX +'px'; - styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px'; - styleRight.height = ( _h + marginBottom) +'px'; - - styleBottom.top = ( _h +marginTop) +'px'; - styleBottom.left = marginX +'px'; - styleBottom.width = _w +'px'; - styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px'; - } - } - })(); - - -/* ---------------------------------------- - * PANEL_CONTROL - * - controler - * - mouseEventListener - * - * panel-border の表示と onPanelResize の通知． - * panel drag. - * - */ - var PANEL_CONTROL = ( function(){ - var ELM_PANEL = document.getElementById('panel-tools-container'), - ELM_PANEL_STYLE = ELM_PANEL.style, - DEFAULT_PANEL_WIDTH = 400, - DEFAULT_PANEL_HEIGHT = 300, - borderSize = 2, - panelW, panelH, panelX, panelY, - offsetX, offsetY, startX, startY, - isDragging = false, - isDraggable = false; - - pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate); - - function onSpaceUpdate(e){ - if( e.type === 'keyup'){ - currentListener === null && updateMouseCursor( ''); - isDraggable = false; - } else { - currentListener === null && updateMouseCursor( 'move'); - isDraggable = true; - } - } - - return { - open: 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; - - //setTimeout( PANEL_CONTROL.resize, 0); - }, - close: function(){ - - }, - x: function(){ - return panelX; - }, - y: function(){ - return panelY; - }, - resize: function( isResizerTopAction, _x, _y, _w, _h){ - panelX = _x !== undefined ? _x : panelX; - panelY = _y !== undefined ? _y : panelY; - panelW = _w !== undefined ? _w : panelW; - panelH = _h !== undefined ? _h : panelH; - - ELM_PANEL_STYLE.left = ( panelX -borderSize) +'px'; - ELM_PANEL_STYLE.top = ( panelY -borderSize) +'px'; - ELM_PANEL_STYLE.width = panelW +'px'; - ELM_PANEL_STYLE.height = panelH +'px'; - - PANEL_RESIZER_TOP.onPanelResize( panelX, panelY, panelW, panelH); - PANEL_RESIZER_BOTTOM.onPanelResize( panelX, panelY, panelW, panelH); - GRID_CONTROL.onPanelResize( panelX, panelY); - WHITE_GLASS_CONTROL.onPanelResize( panelX, panelY, panelW, panelH); - COMIC_ELEMENT_CONTROL.onPanelResize( panelX, panelY, panelW, panelH, isResizerTopAction === true); - }, - onWindowResize: function( _windowW, _windowH){ - panelX = Math.floor(( _windowW - panelW) / 2); - panelY = Math.floor(( _windowH - panelH) / 2); - PANEL_CONTROL.resize(); - }, - onMouseMove: function( _mouseX, _mouseY){ - if( isDraggable === true && isDragging === true){ - PANEL_CONTROL.resize( false, startX +_mouseX -offsetX, startY +_mouseY -offsetY); - } - }, - onMouseUp: function( _mouseX, _mouseY){ - if( isDraggable === true){ - isDragging = false; - updateMouseCursor( ''); - } - }, - onMouseDown: function( _mouseX, _mouseY){ - if( isDraggable === true){ - offsetX = _mouseX; - offsetY = _mouseY; - startX = panelX; - startY = panelY; - isDragging = true; - updateMouseCursor( 'move'); - return true; - } - }, - busy: function(){ - return isDragging === true; - } - } - })(); - -/* -------------------------------------------------------------------------------------------- - * PanelResizerClass - * - mouseEventListener - */ - var PanelResizerClass = function( ID, isTop){ - var ELM = document.getElementById( ID), - BORDER_WIDTH = 2, - RESIZER_HEIGHT = 30, - x = -BORDER_WIDTH /2, - y = isTop === true ? ( -5 -RESIZER_HEIGHT -BORDER_WIDTH) : 0, - w, - h = RESIZER_HEIGHT, - panelX, panelY, panelW, panelH, - offsetY, startY, startH, - isDragging = false, - MOUSE_CURSOR = updateMouseCursor; - - function restoreState( arg){ - if( arg && arg.length > 3){ - PANEL_CONTROL.resize( isTop, arg[ 0] || panelX, arg[ 1] || panelY, arg[ 2] || panelW, arg[ 3] || panelH); - } - } - - return { - 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; - }, - 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 _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_CONTROL.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; - } - } - }; - 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_CONTROL.saveState, - jqStage, - jqConsoleParent, - jqConsoleWrapper, - jqConsoleTail, - jqImgConsole, jqTextConsole, - currentElement = null, - currentType = -1, - visible = false, - imgConsoleWidth, imgConsoleHeight, - textConsoleWidth, textConsoleHeight, - consoleWidth, consoleHeight, - consoleX, consoleY, - tailSize = 10, - buttonClickable = false; - - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack); - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward); - - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del); - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit); - pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change); - - function buttonBackOrForward( isBack){ - var offest = jqConsoleWrapper.offset(); - jqConsoleWrapper.css( { - position: isBack === true ? '' : 'absolute', - left: isBack === true ? consoleX : offest.left, - top: isBack === true ? consoleY : offest.top - }); - buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper); - buttonClickable = !isBack; - } - function layerBack(){ - if( currentElement === null) return; - 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); - } - function layerForward(){ - if( currentElement === null) return; - 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); - } - function del(){ - if( currentElement === null) return; - buttonBackOrForward( 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); - } - function change(){ - if( currentElement === null) return; - buttonBackOrForward( true); - IMAGE_GROUP_EXPROLER.show( currentElement.url); - } - return { - init: function(){ - jqStage = jqEditor; - jqConsoleTail = $( '#comic-element-consol-tail'); - jqImgConsole = $( '#image-element-consol').hide(); - var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0)); - imgConsoleWidth = imgConsoleSize.width; - imgConsoleHeight = imgConsoleSize.height; - - jqTextConsole = $( '#text-element-consol').hide(); - var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0)); - textConsoleWidth = textConsoleSize.width; - textConsoleHeight = textConsoleSize.height; - - jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide(); - jqConsoleParent = jqConsoleWrapper.parent(); - - $( '#edit-text-button').click( edit); - $( '#delete-image-button, #delete-text-button').click( del); - $( '#change-image-button').click( change); - $( '#layer-forward-button, #forward-text-button').click( layerForward); - $( '#layer-back-button, #back-text-button').click( layerBack); - - delete CONSOLE_CONTROLER.init; - }, - show: function( _currentElement, _w, _h){ - visible === false && jqConsoleWrapper.show(); - visible = true; - currentElement = _currentElement; - var _currentType = _currentElement.type, - _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; - } - consoleX = Math.floor( ( _w -consoleWidth) /2); - - LAYER_BACK_BUTTON.visible( _z > 0); - LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1); - DELETE_BUTTON.visible( true); - EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT); - CHANGE_BUTTON.visible( false); - - if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){ - consoleY = Math.floor( ( _h -consoleHeight) /2); - jqConsoleWrapper.css( { - left: consoleX, - top: consoleY - }).removeClass( 'console-out'); - } else { - consoleY = _h +tailSize; - jqConsoleWrapper.css( { - left: consoleX, - top: consoleY - }).addClass( 'console-out'); - } - }, - hide: function (){ - visible === true && jqConsoleWrapper.hide(); - visible = false; - currentElement = null; - LAYER_BACK_BUTTON.visible( false); - LAYER_FORWARD_BUTTON.visible( false); - DELETE_BUTTON.visible( false); - EDIT_BUTTON.visible( false); - CHANGE_BUTTON.visible( false); - }, - x: function(){ return consoleX;}, - y: function(){ return consoleY;}, - w: function(){ return consoleWidth;}, - h: function(){ return consoleHeight;}, - onMouseMove: function( _mouseX, _mouseY){ - if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){ - buttonClickable === true && buttonBackOrForward( true); - return false; - } - buttonClickable === false && buttonBackOrForward( false); - return true; - }, - onMouseOut: function( _mouseX, _mouseY){ - buttonClickable === true && buttonBackOrForward( true); - } - } - })(); - -/* -------------------------------------------------------------------------------------------- - * TAIL_OPERATOR - * - comicElementOperator - */ - var TAIL_OPERATOR = ( function(){ - var MOUSE_CURSOR = updateMouseCursor, - ELM_MOVER = document.getElementById( 'balloon-tail-mover'), - SIZE = pettanr.util.getElementSize( ELM_MOVER).width, - SIN = Math.sin, - COS = Math.cos, - ATAN = Math.atan, - FLOOR = Math.floor, - DEG_TO_RAD = Math.PI / 180, - RAD_TO_DEG = 1 /DEG_TO_RAD, - currentText = null, - tailX, tailY, - x, y, w, h, - balloonW, balloonH, balloonA, radA, - visible = false, - startA; - - return { - update: function ( _w, _h, _a){ - balloonW = _w !== undefined ? _w : balloonW; - balloonH = _h !== undefined ? _h : balloonH; - balloonA = _a !== undefined ? _a : balloonA; - radA = balloonA *DEG_TO_RAD; - tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2); - tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2); - ELM_MOVER.style.left = tailX +'px'; - ELM_MOVER.style.top = tailY +'px'; - //log.html( [ balloonW, balloonH, balloonA].join()); - }, - show: function( _currentText){ - /* - * visibilityのほうがいい, display:none だと ie で描画が狂う - */ - ELM_MOVER.style.visibility = ''; - this.update( _currentText.w, _currentText.h, _currentText.angle()); - currentText = _currentText; - }, - hitTest: function( _mouseX, _mouseY){ - var _x = tailX -SIZE /2, - _y = tailY -SIZE /2; - ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY; - ret === true && MOUSE_CURSOR( 'move'); - return ret; - }, - hide: function(){ - ELM_MOVER.style.visibility = 'hidden'; - currentText = null; - }, - onStart: function( _currentText, _mouseX, _mouseY){ - if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false; - x = _currentText.x; - y = _currentText.y; - if( this.hitTest( _mouseX -x, _mouseY -y) === true){ - w = _currentText.w; - h = _currentText.h; - currentText = _currentText; - startA = _currentText.angle(); - return true; - } - return false; - }, - onDrag: function( _mouseX, _mouseY){ - _mouseX = _mouseX -x -w /2; - _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換 - - this.update( w, h, - _mouseX !== 0 ? - ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) : - _mouseY > 0 ? 90 : -90 - ); - currentText && currentText.angle( balloonA); - INFOMATION_WINDOW.update( currentText); - }, - onFinish: function(){ - startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA); - startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle()); - currentText = null; - }, - onCancel: function(){ - currentText.angle( startA); - COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA); - currentText = null; - } - } - })(); - -/* -------------------------------------------------------------------------------------------- - * RESIZE_OPERATOR - * - comicElementOperator - */ - var RESIZE_OPERATOR = ( function(){ - var MOUSE_CURSOR = updateMouseCursor, - GRID_ENABLED = GRID_CONTROL.enabled; - - var HIT_AREA = MOUSE_HIT_AREA, - POSITION_ARRAY = [], - FLOOR = Math.floor, - CURSOR_AND_FLIP = [ - { cursor: 'n-resize', v: 3}, - { cursor: 'e-resize', h: 2}, - { cursor: 'e-resize', h: 1}, - { cursor: 'n-resize', v: 0}, - { cursor: 'nw-resize', h: 5, v: 6, vh: 7}, - { cursor: 'ne-resize', h: 4, v: 7, vh: 6}, - { cursor: 'ne-resize', h: 7, v: 4, vh: 5}, - { cursor: 'nw-resize', h: 6, v: 5, vh: 4} - ], - elmResizerContainer = document.getElementById( 'comic-element-resizer-container'), - elmResizerContainerStyle = elmResizerContainer.style, - elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style, - elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style, - elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style, - elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style, - x, y, w, h, - currentIndex = -1, - currentElement, - currentIsTextElement = false; - - elmResizerContainerStyle.display = 'none'; - - var RESIZE_WORK_ARRAY = [ - { x: 0, w: 0, y: 1, h: -1}, //top - { x: 1, w: -1, y: 0, h: 0}, //left - { x: 0, w: 1, y: 0, h: 0}, //right - { x: 0, w: 0, y: 0, h: 1}, //bottom - { x: 1, w: -1, y: 1, h: -1}, //top-left - { x: 0, w: 1, y: 1, h: -1}, //top-right - { x: 1, w: -1, y: 0, h: 1}, //bottom-left - { x: 0, w: 1, y: 0, h: 1} //bottom-right - ], - startX, startY, startW, startH, startFilpV, startFilpH, startAspect, - baseX, baseY, baseW, baseH, - currentX, currentY, currentW, currentH, - offsetX, offsetY, - lock = false, - error = 0; - - function draw( _x, _y, _w, _h){ - x = _x !== undefined ? _x : x; - y = _y !== undefined ? _y : y; - w = _w !== undefined ? _w : w; - h = _h !== undefined ? _h : h; - 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( - {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5}, - {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2}, - {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2}, - {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5}, - {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5}, - {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5}, - {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}, - {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5} - ); - } - - function update( _x, _y, _w, _h){ - x = _x !== undefined ? _x : currentX; - y = _y !== undefined ? _y : currentY; - w = _w !== undefined ? _w : currentW; - h = _h !== undefined ? _h : currentH; - - if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){ - if( startAspect >= 1){ - _w = w; - w = Math.floor( startAspect * h); - x = x +( currentIndex % 2 === 0 ? _w -w : 0); - } else { - _h = h; - h = Math.floor( w / startAspect); - y = y + ( currentIndex <= 5 ? _h -h : 0); - } - } - draw( x, y, w, h); - currentElement.resize( x, y, w, h); - currentIsTextElement === true && TAIL_OPERATOR.update( w, h); - CONSOLE_CONTROLER.show( currentElement, w, h); - INFOMATION_WINDOW.update( currentElement); - } - - 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( _flipH, _flipV); - } - return { - update: draw, - index: function( _mouseX, _mouseY){ - var p; - for( var 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); - elmResizerContainer.className = 'current-resizer-is-' +i; - return currentIndex = i; - } - } - for( var 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); - elmResizerContainer.className = 'current-resizer-is-' +i; - return currentIndex = i; - } - } - MOUSE_CURSOR( ''); - elmResizerContainer.className = ''; - return -1; - }, - show: function( _currentElement){ - currentElement = _currentElement; - currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT; - elmResizerContainerStyle.display = ''; - }, - hide: function(){ - currentElement = null; - elmResizerContainerStyle.display = 'none'; - }, - onStart: function( _currentElement, _mouseX, _mouseY){ - currentElement = _currentElement; - currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT; - if( _currentElement.keepSize === true) return false; - currentIndex = this.index( _mouseX, _mouseY); - if( currentIndex === -1) return false; - offsetX = _mouseX; - offsetY = _mouseY; - startX = baseX = _currentElement.x; - startY = baseY = _currentElement.y; - startW = baseW = _currentElement.w; - startH = baseH = _currentElement.h; - if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){ - startFilpV = _currentElement.flipV(); - startFilpH = _currentElement.flipH(); - } - startAspect = startW /startH; - return true; - }, - onDrag: function( _mouseX, _mouseY){ - var com = RESIZE_WORK_ARRAY[ currentIndex], - moveX = _mouseX -offsetX, - moveY = _mouseY -offsetY, - _updated = moveX !== 0 || moveY !== 0, - _x, _y, _w, _h, - _thisError = 0; - - var _memoryX = 0, - _memoryY = 0, - _momoryW = 0, - _momoryH = 0; - /* - * Opera 11+ often forget values, why ?? - */ - while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){ - _x = _x !== undefined ? _x : baseX +moveX *com.x; - _y = _y !== undefined ? _y : baseY +moveY *com.y; - _w = _w !== undefined ? _w : baseW +moveX *com.w; - _h = _h !== undefined ? _h : baseH +moveY *com.h; - error += _thisError === 0 ? 0 : 1; - ++_thisError; - if( _thisError > 9999){ - ++error - //alert( 'opera error' +error); - this.onCancel; - return; - } - } - - if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){ - - } else - if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){ - //return; - if( _w < MIN_ELEMENT_SIZE){ - //_x += Math.abs( MIN_ELEMENT_SIZE -_w); - _x = currentX; - _w = MIN_ELEMENT_SIZE; - } - if( _h < MIN_ELEMENT_SIZE){ - //_y += Math.abs( MIN_ELEMENT_SIZE -_h); - _y = currentY; - _h = MIN_ELEMENT_SIZE; - } - } else - if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){ - return; - } else - if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_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( true, false); - flipV = currentElement.flipV(); - } else - 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( false, true); - flipH = currentElement.flipH(); - } else { - // flipVH - _memoryX = _x; - _memoryY = _y; - baseX = _x = _x +_w; - baseY = _y = _y +_h; - baseW = _w = _memoryX -_x; - baseH = _h = _memoryY -_y; - flip( true, true); - flipV = currentElement.flipV(); - flipH = currentElement.flipH(); - } - _updated = true; - offsetX = _mouseX; - offsetY = _mouseY; - } - currentX = _x; - currentY = _y; - currentW = _w; - currentH = _h; - _updated === true && update( _x, _y, _w, _h); - - log.html( [ - 'currentIndex:', currentIndex, - 'baseW', baseW, 'baseH', baseH,'
', - 'mouse', _mouseX, _mouseY,'
', - 'move', moveX, moveY,'
', - 'xy', _x, _y, 'wh',_w, _h,'
', - 'com.w', com.w, 'com.h', com.h,'
', - 'current',currentW, currentH,'
', - 'result', y, h, - 'err', error - ].join( ' , ')); - }, - onFinish: function(){ - MOUSE_CURSOR( ''); - if( w === startW && h === startH && x === startX && y === startY) return; - COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h); - currentElement.resize( x, y, w, h); - COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH); - }, - onCancel: function(){ - MOUSE_CURSOR( ''); - COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH); - currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ? - currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) : - currentElement.animate( startX, startY, startW, startH, angle); - }, - lock: function( _lock){ - if( _lock !== undefined){ - elmResizerContainerStyle.borderColor = _lock === true ? 'blue' : ''; - lock = _lock; - } - return lock; - }, - onShiftUpdate: update, - onCtrlUpdate: update - } - })(); - -/* -------------------------------------------------------------------------------------------- - * POSITION_OPERATOR - * - comicElementOperator - */ - var POSITION_OPERATOR = ( function(){ - var MOUSE_CURSOR = updateMouseCursor, - GRID_ENABLED = GRID_CONTROL.enabled; - - var currentElement, - startX, startY, - x, y, - offsetX, offsetY, - isCopy = false; - - function update( _x, _y){ - x = _x !== undefined ? _x : x; - y = _y !== undefined ? _y : y; - RESIZE_OPERATOR.update( x, y); - currentElement.resize( x, y); - INFOMATION_WINDOW.update( currentElement); - } - - return { - onStart: function( _currentElement, _mouseX, _mouseY){ - currentElement = _currentElement; - offsetX = _mouseX; - offsetY = _mouseY; - startX = x = _currentElement.x; - startY = y = _currentElement.y; - MOUSE_CURSOR( 'move'); - }, - onDrag: function( _mouseX, _mouseY){ - var moveX = _mouseX -offsetX, - moveY = _mouseY -offsetY, - _x = startX +moveX, - _y = startY +moveY; - if( GRID_ENABLED() === true){ - _x = Math.floor( _x / 10) * 10; - _y = Math.floor( _y / 10) * 10; - } - update( _x, _y); - }, - onFinish: function(){ - MOUSE_CURSOR( ''); - if( x === startX && y === startY) return; - COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y); - currentElement.resize( x, y); - COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY); - }, - onCancel: function(){ - MOUSE_CURSOR( ''); - COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY); - currentElement.animate( startX, startY); - }, - onShiftUpdate: update, - onCtrlUpdate: update - } - })(); - - -/* -------------------------------------------------------------------------------------------- - * COMIC_ELEMENT_OPERATION_MANAGER - */ - var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){ - var MOUSE_CURSOR = updateMouseCursor, - SAVE = HISTORY_CONTROL.saveState, - GRID_ENABLED = GRID_CONTROL.enabled, - HIT_AREA = MOUSE_HIT_AREA, - currentIsTextElement = false, - currentOperator = null, - currentElement = null, - currentx, currenty, currentw, currenth, angle, flipV, flipH; - - function resize( _x, _y, _w, _h, _angle){ - currentx = _x !== undefined ? _x : currentx; - currenty = _y !== undefined ? _y : currenty; - currentw = _w !== undefined ? _w : currentw; - currenth = _h !== undefined ? _h : currenth; - angle = _angle !== undefined ? _angle : angle; - - RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth); - currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle); - CONSOLE_CONTROLER.show( currentElement, currentw, currenth); - 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 === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide(); - - flipV = currentIsTextElement === false ? _currentElement.flipV() : 0; - flipH = currentIsTextElement === false ? _currentElement.flipH() : 0; - - resize( - _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h, - currentIsTextElement === true ? _currentElement.angle() : 0 - ); - } - } - - 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(); - 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.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); - }, - saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){ - startX = startX !== undefined ? startX : currentx; - startY = startY !== undefined ? startY : currenty; - startW = startW !== undefined ? startW : currentw; - startH = startH !== undefined ? startH : currenth; - startA = startA !== undefined ? startA : angle; - startFilpV = startFilpV !== undefined ? startFilpV : flipV; - startFilpH = startFilpH !== undefined ? startFilpH : flipH; - currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState, - [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH], - [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH] - ); - }, - busy: function(){ - return currentOperator !== null; - }, - hitTest: function( _mouseX, _mouseY, _comicElement){ - var _x, _y, _w, _h; - if( _comicElement === currentElement){ - var _consoleX = CONSOLE_CONTROLER.x(); - _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA; - _y = currenty -HIT_AREA; - var _consoleW = CONSOLE_CONTROLER.w(); - _w = ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2; - 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; - } - return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h; - }, - onMouseDown: function( _currentElement, _mouseX, _mouseY){ - //show( _currentElement); - if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){ - currentOperator = TAIL_OPERATOR; - } else - if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){ - currentOperator = RESIZE_OPERATOR; - } else { - POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) - currentOperator = POSITION_OPERATOR; - } - }, - onMouseMove: function( _currentElement, _mouseX, _mouseY){ - show( _currentElement); - if( currentOperator !== null){ - currentOperator.onDrag( _mouseX, _mouseY); - } else - if( currentElement !== null){ - CONSOLE_CONTROLER.onMouseMove( _mouseX -currentx, _mouseY -currenty); - if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentx, _mouseY -currenty) === false){ - RESIZE_OPERATOR.index( _mouseX, _mouseY); - } - } - }, - onMouseUp: function( _currentElement, _mouseX, _mouseY){ - currentOperator !== null && currentOperator.onFinish(); - currentOperator = null; - } - } - })(); - /* - * // 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, - 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); - } - } - }; - -/* -------------------------------------------------------------------------------------------- - * ImageElementClass - */ - var jqImageElementOrigin; - var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){ - jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html()); - - var JQ_WRAPPER = jqImageElementOrigin.clone( true), - OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER, - SAVE = HISTORY_CONTROL.saveState, - HIT_AREA = MOUSE_HIT_AREA, - reversibleImage = null, - actualW = 0, actualH = 0, - 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){ - 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']( { - left: x, - top: y, - width: w, - height: h - }, 250, onAnimeComplete); - animate !== true && onAnimeComplete(); - } - function onAnimeComplete(){ - reversibleImage.resize( flipH * w, flipV * h); - } - - 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; - } - 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 - * -------------------------------------------------------------------------------------------- - */ - - -/* -------------------------------------------------------------------------------------------- - * TextElementClass - * - * type - * 0.none - * 1.speach balloon - * 2.think - * 3.bom - * 4.black-box( dq style) - * 5.blue-box( ff style) - * - */ - var jqTextElementOrigin; - var TextElementClass = function( type, a, text, x, y, z, w, h, timing){ - 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_CONTROL.saveState, - instance; - - JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm); - - function update( _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; - instance.h = h = _h !== undefined ? _h : h; - a = _a !== undefined ? _a : a; - - JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { - left: x, - top: y, - width: w, - height: h - }, 250, - function(){ - XBROWSER_BALLOON.resize( a, w, h); - } - ); - animate !== true && XBROWSER_BALLOON.resize( a, w, h); - } - - function updateType( _type){ - if( type !== _type){ - type = _type || type; - XBROWSER_BALLOON.type( type); - } - } - 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); - } - - 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(){} - } - ); - } - -/* -------------------------------------------------------------------------------------------- - * COMIC_ELEMENT_CONTROL - * - mouseEventListener - */ - var COMIC_ELEMENT_CONTROL = ( function(){ - 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 - * - * comicElement には、z-position と dom-index がある。 - * z-position は 表示上の位置。大きいほど前に表示される（ z-index） - * dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。 - * - * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。 - * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。 - * - * append comicElement - * 1. 新しい comicElement の z-position を得る - * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（COMIC_ELEMENT_ARRAY） - * zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。 - * 3. dom位置は、COMIC_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( { - filter: '', - opacity: '' - }); - if( typeof z !== 'number' || z < 0 || z >= l){ - COMIC_ELEMENT_ARRAY.unshift( _comicElement); - ELM_CONTAINER.appendChild( _jqElm.get( 0)); - _jqElm.fadeIn(); - } else { - var insertIndex = 0; - for( var i = 0; i < l; ++i){ - if( COMIC_ELEMENT_ARRAY[ i].z <= z){ - insertIndex = i; - break; - } - } - COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn()); - COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement); - } - renumber(); - } - function removeComicElement( _comicElement) { - var l = COMIC_ELEMENT_ARRAY.length; - for( var i=0; i 0){ - COMIC_ELEMENT_ARRAY.shift().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; - for( var i = 0; i < l; i++){ - COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY); - } - } - panelX = _panelX; - panelY = _panelY; - panelW = _panelW; - panelH = _panelH; - - ELM_CONTAINER.style.width = _panelW +'px'; - ELM_CONTAINER.style.height = _panelH +'px'; - ELM_CONTAINER.style.left = _panelX +'px'; - ELM_CONTAINER.style.top = _panelY +'px'; - }, - onMouseMove: function( _mouseX, _mouseY){ - var l = COMIC_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){ - _elm.onMouseMove( _x, _y); - return true; - } - if( _elm.hitTest( _x, _y) === true){ - _elm.onMouseMove( _x, _y); // cursor - return true; - } - if( currentLock === true){ - currentLockTest = true; - return true; - } - } - 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