/*\r
- * html2comic Javascript Editor -\r
- * \r
- * main.js\r
- * \r
+ * pettanR work.js\r
* version 0.3.0\r
+ * \r
* author:\r
* itozyun\r
* licence:\r
* 3.img\r
* \r
* \r
- * ----------------------------------------
+ * ----------------------------------------\r
* window\r
* +----------------------------+\r
* | CANVAS_CONTROL | \r
* \r
* value of vml element\r
* vmkImg, VML_SHAPE\r
- *
+ * \r
*/\r
\r
var h2c = ( function(){\r
ret.id = 'imgSizeGetter';\r
document.body.appendChild( ret);\r
return ret;\r
- })();\r
+ })(),\r
+ CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame'.split( ',');\r
return {\r
extend: function( baseInstance, extend){\r
for( var key in extend){\r
}\r
return baseInstance;\r
},\r
+ cleanElement: function( _targetElm){\r
+ var l = CLEAN_TARGET_ELEMENT.length,\r
+ elms, elm, j;\r
+ for( var i=0; i<l; ++i){\r
+ elms = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ 0]);\r
+ if( elms.length > 0){\r
+ for( j=0; i<elms.length; ++j){\r
+ elm = elms[ 0];\r
+ elm.parentNode && elm.parentNode.removeChild( elm);\r
+ }\r
+ }\r
+ }\r
+ },\r
getElementSize: function( _elm){\r
if( !_elm){\r
return {\r
* window resize event, overlay と currentなviewに流す\r
* view modeの保持\r
* editor, overlay, comic-viewer, image-explorer\r
- * fadeIn, faseOut
+ * fadeIn, faseOut\r
*/\r
h2c.view = ( function(){\r
var jqWindow,\r
HOME_ID = 'home',\r
elmCurrent,\r
viewID = ( function(){\r
- var _viewID = h2c.URL_PARAMS.view || HOME_ID\r
+ var _viewID = h2c.URL_PARAMS.view || HOME_ID,\r
_elmView = document.getElementById( _viewID),\r
_elmHome = document.getElementById( HOME_ID);\r
if( _elmView){\r
h2c.key = ( function(){\r
var log,\r
jqWindow,\r
- keyOperationChatcher;\r
+ keyOperationChatcher,\r
KEYEVENT_ARRAY = [],\r
shiftEnabled = false,\r
ctrlEnabled = false;\r
barH = h2c.util.getElementSize( ELM_BAR).height;\r
ELM_BAR.style.top = ( -barH) +'px';\r
\r
+ var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){\r
+ var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),\r
+ ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'SPAN')[ 0];\r
+ updateTitle( title);\r
+ updateVisible( visible);\r
+ \r
+ ( function(){\r
+ var ELM_SHORTCUT = ELM_WRAPPER.getElementsByTagName( 'KBD')[ 0];\r
+ if( shortcut){\r
+ ELM_SHORTCUT.innerHTML = shortcut;\r
+ } else {\r
+ ELM_SHORTCUT.parentNode.removeChild( ELM_SHORTCUT);\r
+ } \r
+ })();\r
+\r
+ container.appendChild( ELM_WRAPPER);\r
+ \r
+ function updateTitle( _title){\r
+ ELM_TITLE.innerHTML = title = _title;\r
+ }\r
+ function updateVisible( _visible){\r
+ _visible !== undefined && ( function(){\r
+ visible = !!_visible;\r
+ ELM_WRAPPER.className = visible === true ? '' : 'disabled';\r
+ })();\r
+ }\r
+ return {\r
+ elm: ELM_WRAPPER,\r
+ title: function( _title){\r
+ _title !== undefined && updateTitle( _title);\r
+ return title;\r
+ },\r
+ visible: function( _visible){\r
+ visible !== !!_visible && updateVisible( _visible);\r
+ return visible;\r
+ },\r
+ separateAfter: separateAfter\r
+ }\r
+ }\r
+\r
var MenuBarItemClass = function( title){\r
var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),\r
ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'DIV')[ 0],\r
}\r
}\r
}\r
- var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){\r
- var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),\r
- ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'SPAN')[ 0];\r
- updateTitle( title);\r
- updateVisible( visible);\r
- \r
- ( function(){\r
- var ELM_SHORTCUT = ELM_WRAPPER.getElementsByTagName( 'KBD')[ 0];\r
- if( shortcut){\r
- ELM_SHORTCUT.innerHTML = shortcut;\r
- } else {\r
- ELM_SHORTCUT.parentNode.removeChild( ELM_SHORTCUT);\r
- } \r
- })();\r
\r
- container.appendChild( ELM_WRAPPER);\r
- \r
- function updateTitle( _title){\r
- ELM_TITLE.innerHTML = title = _title;\r
- }\r
- function updateVisible( _visible){\r
- _visible !== undefined && ( function(){\r
- visible = !!_visible;\r
- ELM_WRAPPER.className = visible === true ? '' : 'disabled';\r
- })();\r
- }\r
- return {\r
- elm: ELM_WRAPPER,\r
- title: function( _title){\r
- _title !== undefined && updateTitle( _title);\r
- return title;\r
- },\r
- visible: function( _visible){\r
- visible !== !!_visible && updateVisible( _visible);\r
- return visible;\r
- },\r
- separateAfter: separateAfter\r
- }\r
- }\r
\r
function createMenubarItem( title){\r
var _item = MenuBarItemClass.apply( {}, [ title]);\r
* HISTORY\r
*/\r
var HISTORY = ( function() {\r
- var STACK_BACK = [], STACK_FORWARD = [],\r
+ var STACK_BACK = [],\r
+ STACK_FORWARD = [],\r
MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false),\r
MENUBAR_FORWARD = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', forward, false, false, true),\r
log;\r
MENUBAR_BACK.visible( true);\r
\r
while( STACK_FORWARD.length > 0){\r
+ _argBack = _stack.argBack;\r
+ _argForword = _stack.argForword; \r
var _stack = STACK_FORWARD.shift(),\r
- _argBack = _stack.argBack,\r
- _argForword = _stack.argForword,\r
_destroy = _stack.destroy,\r
_value;\r
_stack.fn = null;\r
}\r
})();\r
\r
-\r
/* ----------------------------------------\r
- * WINDOWS_CONTROL\r
- */ \r
- var WINDOWS_CONTROL = ( function(){\r
- /*\r
- * 表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。\r
- */\r
- var DEFAULT_MIN_WINDOW_WIDTH = 200,\r
- DEFAULT_MIN_WINDOW_HEIGHT = 200,\r
- WINDOW_ARRAY = [],\r
- jqContainer,\r
- currentWindow,\r
- currentWindowIndex = -1,\r
- log;\r
-\r
- var jqWindowOrigin,\r
- windowCloseButtonWidth;\r
- var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){\r
- var MOUSE_CURSOR = updateMouseCursor,\r
- MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( \r
- ( visible !== true ? 'show ' : 'hide ') +title,\r
- null,\r
- function(){\r
- visible === true ? instance.close() : instance.open();\r
- }, true\r
- ),\r
- jqStage,\r
- jqWrapper, jqHeader, elmBody, elmBodyStyle,\r
- startX, startY, startW, startH,\r
- xOffset, yOffset,\r
- headerH, bodyH,\r
- isDragging = false,\r
- isResizing = false,\r
- bodyIsTachable = false,\r
- instance;\r
- \r
- function update( _x, _y, _w, _h){\r
- ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, _h);\r
- x = _x || x;\r
- y = _y || y;\r
- w = _w || w;\r
- h = _h || h;\r
- jqWrapper.css( {\r
- left: x,\r
- top: y,\r
- width: w,\r
- height: h\r
- });\r
- bodyH = h -headerH;\r
- elmBodyStyle.height = bodyH +'px';\r
- }\r
- function bodyBackOrForward( isBack){\r
- if( bodyIsTachable === !isBack) return;\r
- elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';\r
- elmBodyStyle.left = isBack === true ? 0 : x +'px';\r
- elmBodyStyle.top = isBack === true ? 0 : y +headerH +'px';\r
- elmBodyStyle.width = isBack === true ? '' : w +'px';\r
- bodyIsTachable === isBack && isBack === true ? jqWrapper.append( elmBody) : jqStage.append( elmBody);\r
- bodyIsTachable = !isBack;\r
- }\r
- \r
- return {\r
- setInstance: function(){\r
- instance = this;\r
- delete this.setInstance;\r
- },\r
- init: function( jqContainer){\r
- jqWindowOrigin = jqWindowOrigin || ( function(){\r
- return $( $( '#windowTemplete').remove().html());\r
- })();\r
- windowCloseButtonWidth = windowCloseButtonWidth || ( function(){\r
- return h2c.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;\r
- })();\r
- \r
- \r
- jqStage = jqEditor;\r
- this.$ = jqWrapper = jqWindowOrigin.clone( true);\r
- jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);\r
- headerH = h2c.util.getElementSize( jqHeader.get( 0)).height;\r
- elmBody = jqWrapper.children( '.window-body').get( 0);\r
- elmBodyStyle = elmBody.style;\r
- if( bodyTempleteID) {\r
- jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));\r
- } else {\r
- jqWrapper.find( '.window-body-insert-position').remove();\r
+ * Text Editor (Overlay)\r
+ */\r
+ \r
+ var TEXT_EDITOR_CONTROL = ( function(){\r
+ var jqWrap, jqTextarea, jqButton,\r
+ textElement, onUpdateFunction;\r
+ \r
+ h2c.key.addKeyDownEvent( this.ID, 69, false, false, clickOK);\r
+ \r
+ function close(){\r
+ jqWrap.hide();\r
+ textElement = onUpdateFunction = null; \r
+ }\r
+ function clickOK(){\r
+ h2c.overlay.hide();\r
+ textElement && textElement.text( jqTextarea.val());\r
+ onUpdateFunction && onUpdateFunction( textElement);\r
+ close(); \r
+ }\r
+ return {\r
+ init: function(){\r
+ this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
+ jqTextarea = $( '#speach-editor').keydown( function( e){\r
+ if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
+ clickOK();\r
+ e.preventDefault();\r
+ e.keyCode = 0;\r
+ e.cancelBubble = true;\r
+ e.returnValue = false;\r
+ return false;\r
}\r
- CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();\r
- \r
- jqContainer.append( jqWrapper); // domに追加しないと、this.onInit()が正しく動かない．\r
- jqWrapper.fadeIn(); // appendした後に fadeIn() しないと ie で filterが適用されない．\r
- if( RESIZE_BUTTON_ENABLED === true){\r
- jqWrapper.find( '.window-resize-button').eq( 0)\r
- .mousedown( function( e){\r
- bodyBackOrForward( true);\r
- isResizing = true;\r
- startX = x;\r
- startY = y;\r
- startW = w;\r
- startH = h;\r
- xOffset = e.pageX;\r
- yOffset = e.pageY;\r
- MOUSE_CURSOR( 'nw-resize');\r
- e.stopPropagation();\r
- return false;\r
- });\r
- } else {\r
- jqWrapper.find( '.window-resize-button').remove();\r
+ });\r
+ jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
+ delete TEXT_EDITOR_CONTROL.init;\r
+ },\r
+ jqWrap: null,\r
+ show: function( _textElement, _onUpdateFunction){\r
+ textElement = _textElement;\r
+ onUpdateFunction = _onUpdateFunction || null;\r
+ h2c.overlay.show( this);\r
+ var h = _textElement.h;\r
+ jqWrap.show().css( {\r
+ left: _textElement.x +CANVAS_CONTROL.x(),\r
+ top: _textElement.y +CANVAS_CONTROL.y(),\r
+ width: _textElement.w,\r
+ height: h\r
+ });\r
+ jqTextarea.val( _textElement.text()).focus();\r
+ \r
+ /*\r
+ * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。\r
+ */\r
+ h2c.isIE === true && h2c.ieVersion <= 7 && setTimeout( function(){\r
+ var rows = 0;\r
+ while( jqTextarea.height() < h){\r
+ rows++;\r
+ jqTextarea.attr( 'rows', rows);\r
}\r
- update( x, y, w, h);\r
- this.onInit && this.onInit();\r
- delete this.init;\r
- },\r
- x: function(){ return x;},\r
- y: function(){ return y;},\r
- w: function(){ return w;},\r
- h: function(){ return h;},\r
- $: null,\r
- title: function( _title){\r
- _title !== undefined && jqHeader.html( _title);\r
- title = _title || title;\r
- return title;\r
- },\r
- visible: visible,\r
- open: function(){\r
- if( visible === true) return;\r
- this.visible = visible = true;\r
- this.onOpen && setTimeout( this.onOpen, 0);\r
- openWindow( this);\r
- MENUBAR_SELWCTION.title( 'hide ' +title);\r
- },\r
- close: function(){\r
- if( visible === false) return;\r
- this.visible = visible = false;\r
- this.onClose && setTimeout( this.onClose, 0);\r
- closeWindow( this);\r
- MENUBAR_SELWCTION.title( 'show ' +title);\r
- },\r
- onMouseDown: function( _mouseX, _mouseY){\r
- if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
- if( CLOSE_BUTTON_ENABLED === true && x +w -windowCloseButtonWidth < _mouseX){\r
- this.close();\r
- return;\r
- }\r
- isDragging = true;\r
- MOUSE_CURSOR( 'move'); \r
- startX = x;\r
- startY = y;\r
- startW = w;\r
- startH = h;\r
- xOffset = _mouseX;\r
- yOffset = _mouseY;\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- isDragging = isResizing = false;\r
- MOUSE_CURSOR( '');\r
- },\r
- onMouseMove: function( _mouseX, _mouseY){\r
- var _updateX = _mouseX -xOffset,\r
- _updateY = _mouseY -yOffset;\r
- \r
- if( isResizing === true){\r
- var _w = startW +_updateX,\r
- _h = startH +_updateY;\r
- update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h);\r
- return;\r
- } else\r
- if( isDragging === true) {\r
- update( startX +_updateX, startY +_updateY);\r
- return;\r
- } else\r
- if( x > _mouseX || x +w < _mouseX ) return;\r
- \r
- ( y <= _mouseY && y +headerH >= _mouseY ) ?\r
- MOUSE_CURSOR( 'pointer') : // hit to header\r
- MOUSE_CURSOR( '');\r
- bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY);\r
- },\r
- onMouseOut: function( _mouseX, _mouseY){\r
- bodyIsTachable === true && bodyBackOrForward( true);\r
- isDragging = false;\r
- MOUSE_CURSOR( '');\r
- },\r
- busy: function(){\r
- return isDragging === true || isResizing === true;\r
- },\r
- bodyHeight: function(){\r
- return bodyH;\r
- }\r
- }\r
- };\r
- \r
- function getCurrentWindow( _mouseX, _mouseY){\r
- if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;\r
- var l = WINDOW_ARRAY.length,\r
- _currentWindow = null,\r
- _win, _x, _y;\r
- currentWindowIndex = -1;\r
- for( var i=0; i<l; i++){\r
- _win = WINDOW_ARRAY[ i];\r
- _x = _win.x();\r
- _y = _win.y();\r
- if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){\r
- _currentWindow = _win;\r
- currentWindowIndex = i;\r
- break;\r
- }\r
- }\r
- currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);\r
- currentWindow = _currentWindow;\r
- return currentWindowIndex;\r
- }\r
- function openWindow( _window){\r
- if( _window.visible !== true) return;\r
- WINDOW_ARRAY.unshift( _window);\r
- WINDOWS_CONTROL.init === undefined &&\r
- ( _window.init === undefined ?\r
- jqContainer.append( _window.$.stop().fadeIn()) :\r
- _window.init( jqContainer)\r
- );\r
- }\r
- function closeWindow( _window){\r
- var l = WINDOW_ARRAY.length;\r
- for( var i=0; i<l; ++i){\r
- if( WINDOW_ARRAY[ i] === _window){\r
- WINDOW_ARRAY.splice( i, 1);\r
- _window.$.stop().fadeOut( function(){\r
- this.parentNode.removeChild( this);\r
- });\r
- return;\r
- }\r
- }\r
- }\r
- \r
- return {\r
- init: function(){\r
- jqContainer = $( '#window-container');\r
- \r
- var l = WINDOW_ARRAY.length,\r
- _window;\r
- for( var i=l-1; i >= 0; --i){\r
- _window = WINDOW_ARRAY[ i];\r
- _window.visible === true && _window.init && _window.init( jqContainer);\r
- }\r
- log = $( '#window-log');\r
- \r
- delete WINDOWS_CONTROL.init;\r
- },\r
- onMouseMove: function( _mouseX, _mouseY){\r
- var _index = getCurrentWindow( _mouseX, _mouseY);\r
- if( _index === 0){\r
- currentWindow.onMouseMove( _mouseX, _mouseY);\r
- return true;\r
- } else\r
- if( _index !== -1){ // 先頭のクリックでない場合\r
- // Array を前に\r
- WINDOW_ARRAY.splice( currentWindowIndex, 1);\r
- WINDOW_ARRAY.unshift( currentWindow);\r
- // Domを最後に\r
- jqContainer.append( currentWindow.$);\r
- currentWindowIndex = 0;\r
- return true;\r
- }\r
- return false;\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- if( getCurrentWindow( _mouseX, _mouseY) === 0){\r
- currentWindow.onMouseUp( _mouseX, _mouseY);\r
- return true;\r
- }\r
- return false;\r
- },\r
- onMouseDown: function( _mouseX, _mouseY){\r
- if( getCurrentWindow( _mouseX, _mouseY) === 0){\r
- currentWindow.onMouseDown( _mouseX, _mouseY);\r
- return true;\r
- }\r
- return false;\r
- },\r
- onMouseClick: function( _mouseX, _mouseY){\r
- return false;\r
- },\r
- busy: function(){\r
- return currentWindow !== null;\r
+ rows > 1 && jqTextarea.attr( 'rows', rows -1);\r
+ }, 0);\r
},\r
- onWindowResize: function( _windowW, _windowH){\r
- /*\r
- * 画面外に出るwindowの移動
- */\r
+ onWindowResize: function(){\r
+ textElement && this.show( textElement);\r
},\r
- createWindow: function( scope, EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
- opt_visible = opt_visible !== false;\r
- opt_closeButtonEnabled = opt_closeButtonEnabled === true;\r
- opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;\r
- opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH;\r
- opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
- \r
- var _window = h2c.util.extend(\r
- WindowClass.apply( scope, [ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH]),\r
- EXTENDS\r
- );\r
- _window.setInstance();\r
- opt_visible === true && openWindow( _window);\r
- return _window;\r
- }\r
+ onClose: close,\r
+ ID: 'textEditor'\r
}\r
})();\r
\r
/* ----------------------------------------\r
- * TOOL_BOX_WINDOW\r
+ * Image Group Exproler (Overlay)\r
*/\r
- var TOOL_BOX_WINDOW = ( function(){\r
- var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, publishButton,\r
- gridSwitchFunction;\r
- \r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 73, false, true, addImage);\r
- MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);\r
- \r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 84, false, true, addText);\r
- MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);\r
-\r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 71, false, true, switchGrid);\r
- MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);\r
-\r
- function addImage(){\r
- setTimeout( function(){ CANVAS_CONTROL.createImageElement();}, 0); \r
- }\r
- function addText(){\r
- setTimeout( function(){ CANVAS_CONTROL.createTextElement();}, 0); \r
- }\r
- function switchGrid(){\r
- setTimeout( gridSwitchFunction, 0);\r
- }\r
- function popupHelp(){\r
- setTimeout( function(){ HELP_DOCUMENTS_WINDOW.open();}, 0); \r
- }\r
+ var IMAGE_GROUP_EXPROLER = ( function(){\r
+ var ICON_ARRAY = [],\r
+ WHEEL_DELTA = 64,\r
+ containerW, containerH, wrapX,\r
+ jqWrap, jqContainer, jqItemOrigin,\r
+ itemW, itemH,\r
+ jqName, jqButton, buttonW,\r
+ onUpdateFunction,\r
+ winW,\r
+ onEnterInterval = null;\r
\r
- return WINDOWS_CONTROL.createWindow(\r
- this,\r
- {\r
- onInit: function(){\r
- addImageButton = $( '#toolbox-add-image-button').click( function(e){\r
- addImage();\r
- e.preventDefault();\r
- return false;\r
- });\r
-\r
- addTextButton = $( '#toolbox-add-text-button').click( function(e){\r
- addText();\r
- e.preventDefault();\r
- return false;\r
- });\r
- \r
- editBgButton = $( '#toolbox-edit-bg-button').click( function( e){\r
- setTimeout( function(){\r
- INFOMATION_WINDOW.open();\r
- }, 0); \r
- e.preventDefault();\r
- return false;\r
- });;\r
- \r
- switchGridButton = $( '#toolbox-switch-grid').click( function( e){\r
- switchGrid();\r
- e.preventDefault();\r
- return false;\r
- });\r
- \r
- popupHelpButton = $( '#toolbox-popup-help-button').click( function( e){\r
- popupHelp();\r
- e.preventDefault();\r
- return false;\r
+ var BASE_PATH = h2c.LOCAL === false ? 'http://pettan.heroku.com/images/' : 'images/',\r
+ THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
+ LIMIT_FILESIZE = 1024 * 10; // 10KB\r
+ var IMAGE_DATA = {\r
+ pen001: [\r
+ {\r
+ "created_at": "2011-11-13T08:57:39Z", \r
+ "ext": "png", \r
+ "filesize": 9969, \r
+ "height": 463, \r
+ "id": 1, \r
+ "updated_at": "2011-11-13T08:57:39Z", \r
+ "width": 441\r
+ }, \r
+ {\r
+ "created_at": "2011-11-13T08:57:54Z", \r
+ "ext": "gif", \r
+ "filesize": 5418, \r
+ "height": 500, \r
+ "id": 2, \r
+ "updated_at": "2011-11-13T08:57:54Z", \r
+ "width": 500\r
+ }, \r
+ {\r
+ "created_at": "2011-11-13T08:58:06Z", \r
+ "ext": "gif", \r
+ "filesize": 8758, \r
+ "height": 464, \r
+ "id": 3, \r
+ "updated_at": "2011-11-13T08:58:06Z", \r
+ "width": 366\r
+ }, \r
+ {\r
+ "created_at": "2011-11-13T08:58:23Z", \r
+ "ext": "gif", \r
+ "filesize": 9383, \r
+ "height": 480, \r
+ "id": 4, \r
+ "updated_at": "2011-11-13T08:58:23Z", \r
+ "width": 392\r
+ }, \r
+ {\r
+ "created_at": "2011-11-13T08:58:33Z", \r
+ "ext": "gif", \r
+ "filesize": 11061, \r
+ "height": 500, \r
+ "id": 5, \r
+ "updated_at": "2011-11-13T08:58:33Z", \r
+ "width": 500\r
+ }, \r
+ {\r
+ "created_at": "2011-11-20T09:50:43Z", \r
+ "ext": "gif", \r
+ "filesize": 1131, \r
+ "height": 126, \r
+ "id": 6, \r
+ "updated_at": "2011-11-20T09:50:43Z", \r
+ "width": 259\r
+ }, \r
+ {\r
+ "created_at": "2011-11-20T09:50:55Z", \r
+ "ext": "gif", \r
+ "filesize": 1125, \r
+ "height": 126, \r
+ "id": 7, \r
+ "updated_at": "2011-11-20T09:50:55Z", \r
+ "width": 259\r
+ }, \r
+ {\r
+ "created_at": "2011-11-20T11:33:12Z", \r
+ "ext": "gif", \r
+ "filesize": 17919, \r
+ "height": 600, \r
+ "id": 8, \r
+ "updated_at": "2011-11-20T11:33:12Z", \r
+ "width": 800\r
+ },\r
+ {\r
+ "created_at": "2011-11-20T11:33:12Z", \r
+ "ext": "gif", \r
+ "filesize": 17919, \r
+ "height": 600, \r
+ "id": 9, \r
+ "updated_at": "2011-11-20T11:33:12Z", \r
+ "width": 800\r
+ },\r
+ {\r
+ "created_at": "2011-11-20T11:33:12Z", \r
+ "ext": "gif", \r
+ "filesize": 17919, \r
+ "height": 600, \r
+ "id": 10, \r
+ "updated_at": "2011-11-20T11:33:12Z", \r
+ "width": 800\r
+ },\r
+ {\r
+ "created_at": "2011-11-20T11:33:12Z", \r
+ "ext": "gif", \r
+ "filesize": 17919, \r
+ "height": 600, \r
+ "id": 11, \r
+ "updated_at": "2011-11-20T11:33:12Z", \r
+ "width": 800\r
+ },\r
+ {\r
+ "created_at": "2011-11-22T09:17:20Z", \r
+ "ext": "gif", \r
+ "filesize": 9055, \r
+ "height": 473, \r
+ "id": 12, \r
+ "updated_at": "2011-11-22T09:17:20Z", \r
+ "width": 405\r
+ }, \r
+ {\r
+ "created_at": "2011-11-22T10:11:07Z", \r
+ "ext": "gif", \r
+ "filesize": 8758, \r
+ "height": 464, \r
+ "id": 13, \r
+ "updated_at": "2011-11-22T10:11:07Z", \r
+ "width": 366\r
+ }, \r
+ {\r
+ "created_at": "2011-11-24T09:05:12Z", \r
+ "ext": "gif", \r
+ "filesize": 6431, \r
+ "height": 386, \r
+ "id": 16, \r
+ "updated_at": "2011-11-24T09:05:12Z", \r
+ "width": 453\r
+ }, \r
+ {\r
+ "created_at": "2011-11-26T04:52:12Z",\r
+ "ext": "gif", \r
+ "filesize": 6421, \r
+ "height": 426, \r
+ "id": 17, \r
+ "updated_at": "2011-11-26T04:52:12Z", \r
+ "width": 306\r
+ }, \r
+ {\r
+ "created_at": "2011-11-26T04:52:12Z",\r
+ "ext": "gif", \r
+ "filesize": 6421, \r
+ "height": 426, \r
+ "id": 18, \r
+ "updated_at": "2011-11-26T04:52:12Z", \r
+ "width": 306\r
+ }, \r
+ {\r
+ "created_at": "2011-11-26T04:52:12Z",\r
+ "ext": "gif", \r
+ "filesize": 6421, \r
+ "height": 426, \r
+ "id": 19, \r
+ "updated_at": "2011-11-26T04:52:12Z", \r
+ "width": 306\r
+ }, \r
+ {\r
+ "created_at": "2011-11-26T04:52:12Z",\r
+ "ext": "gif", \r
+ "filesize": 6421, \r
+ "height": 426, \r
+ "id": 20, \r
+ "updated_at": "2011-11-26T04:52:12Z", \r
+ "width": 306\r
+ }, \r
+ {\r
+ "created_at": "2011-11-26T04:52:12Z",\r
+ "ext": "gif", \r
+ "filesize": 6421, \r
+ "height": 426, \r
+ "id": 21, \r
+ "updated_at": "2011-11-26T04:52:12Z",\r
+ "width": 306\r
+ }\r
+ ]\r
+ }\r
+ \r
+ var ImageGroupIconClass = function( INDEX, data){\r
+ var JQ_ICON_WRAP = jqItemOrigin.clone( true),\r
+ SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),\r
+ LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,\r
+ reversibleImage = null,\r
+ onEnterFlag = false;\r
+ JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
+ jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
+ \r
+ return {\r
+ onEnter: function(){\r
+ if( onEnterFlag === true) return;\r
+ reversibleImage = h2c.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, function( url, imgW, imgH){\r
+ if( reversibleImage === null) {\r
+ alert( url);\r
+ return;\r
+ }\r
+ /*\r
+ * ieでサイズが取れない、、、\r
+ */\r
+ imgW = imgW || data.width || 64;\r
+ imgH = imgH || data.height || 64;\r
+ JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
+ var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
+ h = Math.floor( imgH *zoom),\r
+ w = Math.floor( imgW *zoom);\r
+ reversibleImage.elm.style.width = w +'px';\r
+ reversibleImage.elm.style.height = h +'px';\r
+ reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
+ reversibleImage.resize( w, h);\r
+ JQ_ICON_WRAP.click( function( e){\r
+ h2c.overlay.hide();\r
+ if (onUpdateFunction) {\r
+ if( LOW_SRC === null){\r
+ onUpdateFunction( SRC, imgW, imgH);\r
+ } else {\r
+ ( function( onUpdate){\r
+ h2c.util.loadImage( SRC,\r
+ function( _abspath, imgW, imgH){\r
+ onUpdate( SRC, imgW, imgH);\r
+ onUpdate = null;\r
+ },\r
+ function( _abspath){\r
+ onUpdate( SRC, data.width || 64, data.height || 64);\r
+ onUpdate = null;\r
+ }\r
+ ); \r
+ })( onUpdateFunction); // close()で値が消えるので、クロージャに保持\r
+ }\r
+ }\r
+ close();\r
+ });\r
});\r
- \r
- publishButton = $( '#toolbox-publish-button');\r
- \r
- delete this.onInit;\r
+ JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
+ onEnterFlag = true; \r
},\r
- setGridSwitchFunction: function( _gridSwitchFunction){\r
- gridSwitchFunction = _gridSwitchFunction || gridSwitchFunction;\r
+ destroy: function(){\r
+ reversibleImage && reversibleImage.destroy();\r
+ JQ_ICON_WRAP.remove();\r
+ reversibleImage = JQ_ICON_WRAP = null;\r
+ delete this.destroy;\r
}\r
- },\r
- 'toolbox-window', 'Tool box', 0, 215, 110, 290, true\r
- );\r
- })();\r
-\r
-/* ----------------------------------------\r
- * INFOMATION_WINDOW\r
- */ \r
- var INFOMATION_WINDOW = ( function(){\r
- var FADE_EFFECT_ENABLED = h2c.isIE === false || h2c.ieVersion >= 8,\r
- FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',\r
- FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',\r
- backgroundInfomationElm,\r
- jqComicElementInformation,\r
- xValueElm, yValueElm, zValueElm, aValueElm, wValueElm, hValueElm, aspectElm,\r
- wPercentElm, hPercentElm,\r
- currentComicElement = null,\r
- currentElementType = -1;\r
-\r
- return WINDOWS_CONTROL.createWindow(\r
- this,\r
- {\r
- onInit: function(){\r
- backgroundInfomationElm = $( '#panel-background-information');\r
- \r
- jqComicElementInformation = $( '#comic-element-infomation').hide().css( {\r
- height: this.bodyHeight()\r
+ }\r
+ }\r
+ \r
+ function close(){\r
+ jqContainer.stop().animate( {\r
+ height: 0,\r
+ top: Math.floor( windowH /2)\r
+ }, function(){\r
+ jqWrap.hide()\r
+ });\r
+ while( ICON_ARRAY.length > 0){\r
+ ICON_ARRAY.shift().destroy();\r
+ }\r
+ onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
+ onUpdateFunction = onEnterInterval = null;\r
+ }\r
+ function onEnterShowImage(){\r
+ var l = ICON_ARRAY.length,\r
+ _start = -wrapX /itemW -1,\r
+ _end = _start + winW /itemW +1;\r
+ for( var i=0; i<l; ++i){\r
+ _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
+ }\r
+ onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
+ onEnterInterval = null;\r
+ }\r
+ function clickOK(){\r
+ h2c.overlay.hide();\r
+ // onUpdateFunction && onUpdateFunction( textElement);\r
+ close();\r
+ }\r
+ return {\r
+ init: function(){\r
+ this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
+ jqContainer = $( '#image-icon-container').mousewheel(\r
+ function( e, delta){\r
+ if( winW < containerW){\r
+ wrapX += delta *WHEEL_DELTA;\r
+ wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
+ jqContainer.css( { left: wrapX});\r
+ \r
+ onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
+ onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
+ }\r
+ //e.stopPropagation();\r
+ return false;\r
});\r
- var TAB_GROUP_ID = 'comic-element-attribute';\r
- var CREATER = h2c.key.createEditableText;\r
- xValueElm = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID);\r
- yValueElm = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID);\r
- zValueElm = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID);\r
- aValueElm = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID);\r
- wValueElm = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID);\r
- hValueElm = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);\r
- wPercentElm = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);\r
- hPercentElm = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);\r
- aspectElm = $( '#comic-element-keep-aspect');\r
- delete this.onInit;\r
- },\r
- onResize: function( w, h){\r
- jqComicElementInformation && jqComicElementInformation.css( {\r
- height: this.bodyHeight()\r
+ containerH = h2c.util.getElementSize( jqContainer.get( 0)).height;\r
+ jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
+ var itemSize = h2c.util.getElementSize( jqItemOrigin.get( 0));\r
+ itemW = itemSize.width;\r
+ itemH = itemSize.height;\r
+ jqName = $( '#gruop-name-display');\r
+ jqButton = $( '#image-gruop-button').click( clickOK);\r
+ buttonW = h2c.util.getElementSize( jqButton.get( 0)).width;\r
+ \r
+ delete IMAGE_GROUP_EXPROLER.init;\r
+ },\r
+ jqWrap: null,\r
+ show: function( _onUpdateFunction){\r
+ onUpdateFunction = _onUpdateFunction;\r
+ h2c.overlay.show( this);\r
+ \r
+ var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],\r
+ l = CURRENT_GROUP_ARRAY.length;\r
+ for( var i=0; i<l; ++i){\r
+ ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));\r
+ }\r
+ wrapX = 0;\r
+ containerW = l * itemW;\r
+ \r
+ winW = windowW;\r
+ var w = winW > containerW ? winW : containerW,\r
+ h = windowH > containerH ? containerH : windowH;\r
+ \r
+ jqWrap.show();\r
+ jqContainer.css( {\r
+ width: w,\r
+ height: 0,\r
+ left: 0,\r
+ top: Math.floor( windowH /2)\r
+ }).stop().animate( {\r
+ height: h,\r
+ top: Math.floor( windowH /2 -h /2)\r
+ });\r
+ \r
+ jqButton.css( {\r
+ left: Math.floor( winW /2 -buttonW /2),\r
+ top: Math.floor( windowH /2 +containerH /2 +10)\r
+ });\r
+ \r
+ onEnterShowImage();\r
+ },\r
+ onWindowResize: function( _windowW, _windowH){\r
+ var w = _windowW > containerW ? _windowW : containerW,\r
+ h = _windowH > containerH ? containerH : _windowH,\r
+ offsetW = Math.floor( _windowW /2 -winW /2);\r
+ winW = _windowW;\r
+ if( offsetW <= 0){ // smaller\r
+ jqContainer.css( {\r
+ left: offsetW,\r
+ width: w\r
+ }).animate( {\r
+ left: 0,\r
+ top: Math.floor( _windowH /2 -h /2)\r
+ }); \r
+ } else {\r
+ jqContainer.css( { // bigger\r
+ left: 0,\r
+ width: w,\r
+ borderLeftWidth: offsetW\r
+ }).animate( {\r
+ top: Math.floor( _windowH /2 -h /2),\r
+ borderLeftWidth: 0\r
});\r
- },\r
- update: function( _currentElementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){\r
- if( currentElementType !== _currentElementType){\r
- if( _currentElementType !== -1){\r
- if( _currentElementType === 1){\r
- aValueElm.show();\r
- wPercentElm.hide();\r
- hPercentElm.hide();\r
- aspectElm.hide();\r
- } else {\r
- aValueElm.hide();\r
- wPercentElm.show();\r
- hPercentElm.show();\r
- aspectElm.show();\r
- }\r
- currentElementType === -1 && jqComicElementInformation.stop().css( {\r
- filter: '',\r
- opacity: ''\r
- })[ FADE_IN_EFFECT]();\r
- } else {\r
- currentElementType !== -1 && jqComicElementInformation.stop().css({\r
- filter: '',\r
- opacity: ''\r
- })[ FADE_OUT_EFFECT]();\r
- }\r
- currentElementType = _currentElementType;\r
- }\r
- if( currentElementType !== -1){\r
- xValueElm.update( x);\r
- yValueElm.update( y);\r
- zValueElm.update( z);\r
- _currentElementType === 1 && aValueElm.update( a);\r
- wValueElm.update( w);\r
- hValueElm.update( h);\r
- _currentElementType === 0 && wPercentElm.update( wPercent);\r
- _currentElementType === 0 && hPercentElm.update( hPercent); \r
- } else {\r
- \r
- }\r
}\r
+ jqButton.css( {\r
+ left: Math.floor( _windowW /2 -buttonW /2),\r
+ top: Math.floor( _windowH /2 +containerH /2 +10)\r
+ });\r
+ onEnterShowImage();\r
},\r
- 'infomation-window', 'Infomation', 0, 30, 200, 180, true\r
- );\r
+ onClose: close,\r
+ ID: 'imageGroupExproler'\r
+ }\r
})();\r
\r
/* ----------------------------------------\r
- * HELP_WINDOW\r
- */\r
- var HELP_DOCUMENTS_WINDOW = ( function(){\r
- var visible = true,\r
- hasAjaxContents = false,\r
- jqAjaxContents,\r
- jqNaviItems,\r
- jqPages;\r
- function jumpPage( _index){\r
+ * WINDOWS_CONTROL\r
+ */ \r
+ var WINDOWS_CONTROL = ( function(){\r
+ /*\r
+ * 表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。\r
+ */\r
+ var DEFAULT_MIN_WINDOW_WIDTH = 200,\r
+ DEFAULT_MIN_WINDOW_HEIGHT = 200,\r
+ WINDOW_ARRAY = [],\r
+ jqContainer,\r
+ currentWindow,\r
+ currentWindowIndex = -1,\r
+ log;\r
+\r
+ var jqWindowOrigin,\r
+ windowCloseButtonWidth;\r
+ var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){\r
+ var MOUSE_CURSOR = updateMouseCursor,\r
+ MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( \r
+ ( visible !== true ? 'show ' : 'hide ') +title,\r
+ null,\r
+ function(){\r
+ visible === true ? instance.close() : instance.open();\r
+ }, true\r
+ ),\r
+ jqStage,\r
+ jqWrapper, jqHeader, elmBody, elmBodyStyle,\r
+ startX, startY, startW, startH,\r
+ xOffset, yOffset,\r
+ headerH, bodyH,\r
+ isDragging = false,\r
+ isResizing = false,\r
+ bodyIsTachable = false,\r
+ instance;\r
\r
- }\r
- function onOpen( _pageIndex){\r
- _pageIndex = _pageIndex || 0;\r
- if( hasAjaxContents === false){\r
- $.ajax({\r
- url: 'help/jp.html',\r
- dataType: 'html',\r
- success: function( html){\r
- $( html).find( 'script,style,object,applet,embed,iframe,frame').remove();\r
- jqNaviItems = jqAjaxContents.removeClass( 'loading').append( html)\r
- .find( 'a.sidenavi-item').attr( 'href', '#')\r
- .click( function( e){\r
- var that = this,\r
- parent = this.parentNode,\r
- i = ( function(){\r
- var children = parent.getElementsByTagName( 'A'),\r
- l = children.length;\r
- for( var i=0; i<l; ++i){\r
- if( children[ i] === that) return i;\r
- }\r
- return -1;\r
- })();\r
+ function update( _x, _y, _w, _h){\r
+ ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, _h);\r
+ x = _x || x;\r
+ y = _y || y;\r
+ w = _w || w;\r
+ h = _h || h;\r
+ jqWrapper.css( {\r
+ left: x,\r
+ top: y,\r
+ width: w,\r
+ height: h\r
+ });\r
+ bodyH = h -headerH;\r
+ elmBodyStyle.height = bodyH +'px';\r
+ }\r
+ function bodyBackOrForward( isBack){\r
+ if( bodyIsTachable === !isBack) return;\r
+ elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';\r
+ elmBodyStyle.left = isBack === true ? 0 : x +'px';\r
+ elmBodyStyle.top = isBack === true ? 0 : y +headerH +'px';\r
+ elmBodyStyle.width = isBack === true ? '' : w +'px';\r
+ bodyIsTachable === isBack && isBack === true ? jqWrapper.append( elmBody) : jqStage.append( elmBody);\r
+ bodyIsTachable = !isBack;\r
+ }\r
+ \r
+ return {\r
+ setInstance: function(){\r
+ instance = this;\r
+ delete this.setInstance;\r
+ },\r
+ init: function( jqContainer){\r
+ jqWindowOrigin = jqWindowOrigin || ( function(){\r
+ return $( $( '#windowTemplete').remove().html());\r
+ })();\r
+ windowCloseButtonWidth = windowCloseButtonWidth || ( function(){\r
+ return h2c.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;\r
+ })();\r
+ \r
+ \r
+ jqStage = jqEditor;\r
+ this.$ = jqWrapper = jqWindowOrigin.clone( true);\r
+ jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);\r
+ headerH = h2c.util.getElementSize( jqHeader.get( 0)).height;\r
+ elmBody = jqWrapper.children( '.window-body').get( 0);\r
+ elmBodyStyle = elmBody.style;\r
+ if( bodyTempleteID) {\r
+ jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));\r
+ } else {\r
+ jqWrapper.find( '.window-body-insert-position').remove();\r
+ }\r
+ CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();\r
+ \r
+ jqContainer.append( jqWrapper); // domに追加しないと、this.onInit()が正しく動かない．\r
+ jqWrapper.fadeIn(); // appendした後に fadeIn() しないと ie で filterが適用されない．\r
+ if( RESIZE_BUTTON_ENABLED === true){\r
+ jqWrapper.find( '.window-resize-button').eq( 0)\r
+ .mousedown( function( e){\r
+ bodyBackOrForward( true);\r
+ isResizing = true;\r
+ startX = x;\r
+ startY = y;\r
+ startW = w;\r
+ startH = h;\r
+ xOffset = e.pageX;\r
+ yOffset = e.pageY;\r
+ MOUSE_CURSOR( 'nw-resize');\r
e.stopPropagation();\r
- if( i === -1) return false;\r
- jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
- jqPages.hide().eq( i).show();\r
- \r
return false;\r
});\r
- jqNaviItems.eq( _pageIndex).addClass( 'current');\r
- jqPages = jqAjaxContents.find( '.page-content');\r
- jqPages.eq( _pageIndex).show();\r
+ } else {\r
+ jqWrapper.find( '.window-resize-button').remove();\r
}\r
- });\r
- hasAjaxContents = true;\r
- } else {\r
- jqNaviItems.removeClass( 'current').eq( _pageIndex).addClass( 'current');\r
- jqPages.hide().eq( _pageIndex).show();\r
- }\r
- }\r
- return WINDOWS_CONTROL.createWindow(\r
- this,\r
- {\r
- onInit: function(){\r
- jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});\r
- onOpen( 0);\r
- delete this.onInit;\r
+ update( x, y, w, h);\r
+ this.onInit && this.onInit();\r
+ delete this.init;\r
},\r
- onResize: function( w, h){\r
- jqAjaxContents && jqAjaxContents.css( { height: this.bodyHeight()});\r
+ x: function(){ return x;},\r
+ y: function(){ return y;},\r
+ w: function(){ return w;},\r
+ h: function(){ return h;},\r
+ $: null,\r
+ title: function( _title){\r
+ _title !== undefined && jqHeader.html( _title);\r
+ title = _title || title;\r
+ return title;\r
},\r
- setAjaxContent: function( html){\r
+ visible: visible,\r
+ open: function(){\r
+ if( visible === true) return;\r
+ this.visible = visible = true;\r
+ this.onOpen && setTimeout( this.onOpen, 0);\r
+ openWindow( this);\r
+ MENUBAR_SELWCTION.title( 'hide ' +title);\r
+ },\r
+ close: function(){\r
+ if( visible === false) return;\r
+ this.visible = visible = false;\r
+ this.onClose && setTimeout( this.onClose, 0);\r
+ closeWindow( this);\r
+ MENUBAR_SELWCTION.title( 'show ' +title);\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
+ if( CLOSE_BUTTON_ENABLED === true && x +w -windowCloseButtonWidth < _mouseX){\r
+ this.close();\r
+ return;\r
+ }\r
+ isDragging = true;\r
+ MOUSE_CURSOR( 'move'); \r
+ startX = x;\r
+ startY = y;\r
+ startW = w;\r
+ startH = h;\r
+ xOffset = _mouseX;\r
+ yOffset = _mouseY;\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ isDragging = isResizing = false;\r
+ MOUSE_CURSOR( '');\r
+ },\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ var _updateX = _mouseX -xOffset,\r
+ _updateY = _mouseY -yOffset;\r
\r
- delete this.onLoadAjaxContent;\r
- }\r
- },\r
- null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300\r
- );\r
- })();\r
-\r
-/* ----------------------------------------\r
- * - CANVAS_CONTROL\r
- * - GRID_CONTROL\r
- * - WHITE_GLASS_CONTROL\r
- * - PANEL_BORDER_CONTROL\r
- * - COMIC_ELEMENT_CONTROL\r
- * - PanelResizerClass\r
- * - COMIC_ELEMENT_OPERATOR\r
- * - ImageElementClass\r
- * - TextElementClass
- */ \r
- var CANVAS_CONTROL = ( function(){\r
- var DEFAULT_PANEL_WIDTH = 400,\r
- DEFAULT_PANEL_HEIGHT = 300,\r
- MIN_PANEL_HEIGHT = 20,\r
- BORDER_WIDTH = 2,\r
- RESIZER_BORDER_WIDTH = 1,\r
- SPACE_ENABLED = h2c.key.spaceEnabled,\r
- canvasW, canvasH, canvasX, canvasY,\r
- xOffset, yOffset, startCanvasX, startCanvasY,\r
- isDragging = false,\r
- isCanvasDraggble = false;\r
- \r
- var GRID_CONTROL = ( function(){\r
- var elmGrid = document.getElementById( 'grid'),\r
- jQGrid,\r
- visible = false;\r
- \r
- function update(){\r
- jQGrid.css( {\r
- opacity: '',\r
- fliter: ''\r
- }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();\r
- visible = !visible;\r
- if( visible === true){\r
- elmGrid.style.backgroundImage = "url('grid.gif')";\r
- }\r
- return visible;\r
- }\r
- return {\r
- init: function(){\r
- jQGrid = $( elmGrid);\r
- this.resize();\r
- TOOL_BOX_WINDOW.setGridSwitchFunction( update);\r
- delete GRID_CONTROL.init;\r
+ if( isResizing === true){\r
+ var _w = startW +_updateX,\r
+ _h = startH +_updateY;\r
+ update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h);\r
+ return;\r
+ } else\r
+ if( isDragging === true) {\r
+ update( startX +_updateX, startY +_updateY);\r
+ return;\r
+ } else\r
+ if( x > _mouseX || x +w < _mouseX ) return;\r
+ \r
+ ( y <= _mouseY && y +headerH >= _mouseY ) ?\r
+ MOUSE_CURSOR( 'pointer') : // hit to header\r
+ MOUSE_CURSOR( '');\r
+ bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY);\r
},\r
- resize: function(){\r
- elmGrid.style.backgroundPosition = [ canvasX % 10, 'px ', canvasY % 10, 'px'].join( ''),\r
- elmGrid.style.height = windowH +'px'; \r
+ onMouseOut: function( _mouseX, _mouseY){\r
+ bodyIsTachable === true && bodyBackOrForward( true);\r
+ isDragging = false;\r
+ MOUSE_CURSOR( '');\r
},\r
- enabled: function(){\r
- return visible;\r
+ busy: function(){\r
+ return isDragging === true || isResizing === true;\r
+ },\r
+ bodyHeight: function(){\r
+ return bodyH;\r
}\r
}\r
- })();\r
+ };\r
\r
- /*\r
- * WHITE_GLASS_CONTROL
- */ \r
- var WHITE_GLASS_CONTROL = ( function(){\r
- var styleTop = document.getElementById( 'whiteGlass-top').style,\r
- styleLeft = document.getElementById( 'whiteGlass-left').style,\r
- styleRight = document.getElementById( 'whiteGlass-right').style,\r
- styleBottom = document.getElementById( 'whiteGlass-bottom').style;\r
- function resize(){\r
- var _w = canvasW,\r
- _h = canvasH,\r
- marginTop = canvasY,\r
- marginBottom = windowH -_h -marginTop,\r
- marginX = canvasX,\r
- rightWidth = windowW -_w -marginX;\r
- \r
- styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';\r
- \r
- styleLeft.top = marginTop +'px';\r
- styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';\r
- styleLeft.height = ( _h + marginBottom) +'px';\r
- \r
- styleRight.top = marginTop +'px';\r
- styleRight.left = _w +marginX +'px';\r
- styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';\r
- styleRight.height = ( _h + marginBottom) +'px';\r
- \r
- styleBottom.top = ( _h +marginTop) +'px';\r
- styleBottom.left = marginX +'px';\r
- styleBottom.width = _w +'px';\r
- styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';\r
- }\r
- return {\r
- resize: resize\r
- }\r
- })();\r
-\r
- /*\r
- * PANEL_BORDER_CONTROL
- */\r
- var PANEL_BORDER_CONTROL = ( function(){\r
- var panelElm, borderWidth;\r
- \r
- function resize(){\r
- panelElm.css( {\r
- left: canvasX -BORDER_WIDTH,\r
- top: canvasY -BORDER_WIDTH,\r
- width: canvasW,\r
- height: canvasH\r
- });\r
+ function getCurrentWindow( _mouseX, _mouseY){\r
+ if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;\r
+ var l = WINDOW_ARRAY.length,\r
+ _currentWindow = null,\r
+ _win, _x, _y;\r
+ currentWindowIndex = -1;\r
+ for( var i=0; i<l; i++){\r
+ _win = WINDOW_ARRAY[ i];\r
+ _x = _win.x();\r
+ _y = _win.y();\r
+ if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){\r
+ _currentWindow = _win;\r
+ currentWindowIndex = i;\r
+ break;\r
+ }\r
}\r
- \r
- return {\r
- init: function(){\r
- panelElm = $( '#panel-border'),\r
- borderWidth = panelElm.css( 'border-width');\r
- \r
- delete PANEL_BORDER_CONTROL.init;\r
- },\r
- resize: resize\r
+ currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);\r
+ currentWindow = _currentWindow;\r
+ return currentWindowIndex;\r
+ }\r
+ function openWindow( _window){\r
+ if( _window.visible !== true) return;\r
+ WINDOW_ARRAY.unshift( _window);\r
+ WINDOWS_CONTROL.init === undefined &&\r
+ ( _window.init === undefined ?\r
+ jqContainer.append( _window.$.stop().fadeIn()) :\r
+ _window.init( jqContainer)\r
+ );\r
+ }\r
+ function closeWindow( _window){\r
+ var l = WINDOW_ARRAY.length;\r
+ for( var i=0; i<l; ++i){\r
+ if( WINDOW_ARRAY[ i] === _window){\r
+ WINDOW_ARRAY.splice( i, 1);\r
+ _window.$.stop().fadeOut( function(){\r
+ this.parentNode.removeChild( this);\r
+ });\r
+ return;\r
+ }\r
}\r
- })();\r
- \r
- /*\r
- * COMIC_ELEMENT_CONTROL\r
- * - PanelResizerClass\r
- * - COMIC_ELEMENT_OPERATOR\r
- * - ImageElementClass\r
- * - TextElementClass
- */\r
- var COMIC_ELEMENT_CONTROL = ( function( _onResizeFunction){\r
- var MIN_OBJECT_SIZE = 19,\r
- log,\r
- currentElement = null,\r
- _canvasX, _canvasY, _canvasW, _canvasH,\r
- MOUSE_HIT_AREA = 10,\r
- SAVE = HISTORY.saveState;\r
- /*\r
- * --------------------------------------------------------------------------------------------\r
- * panel resizer\r
- */\r
- var PanelResizerClass = function( ELM, onPanelResizeFunction, isTop){\r
- var BORDER_WIDTH = 2,\r
- yOffset, y, _canvasY, _canvasH,\r
- RESIZER_HEIGHT = 30,\r
- isDragging = false,\r
- SAVE = HISTORY.saveState,\r
- MOUSE_CURSOR = updateMouseCursor;\r
- \r
- function restoreState( arg){\r
- if( arg && arg.length > 3){\r
- canvasX = arg[ 0] || canvasX;\r
- canvasY = arg[ 1] || canvasY;\r
- canvasW = arg[ 2] || canvasW;\r
- canvasH = arg[ 3] || canvasH;\r
- onPanelResizeFunction( isTop);\r
- }\r
+ }\r
+ \r
+ return {\r
+ init: function(){\r
+ jqContainer = $( '#window-container');\r
+ \r
+ var l = WINDOW_ARRAY.length,\r
+ _window;\r
+ for( var i=l-1; i >= 0; --i){\r
+ _window = WINDOW_ARRAY[ i];\r
+ _window.visible === true && _window.init && _window.init( jqContainer);\r
}\r
- \r
- return {\r
- init: function( _elm){\r
- this.$ = $( ELM);\r
- ELM.style.width = ( canvasW +2)+'px';\r
- },\r
- $: null,\r
- hitareaX: function(){ return -1;},\r
- hitareaY: function(){ return isTop === true ? ( -35 -BORDER_WIDTH) : ( canvasH +5 +BORDER_WIDTH);},\r
- hitareaW: function(){ return canvasW +2;},\r
- hitareaH: function(){ return RESIZER_HEIGHT;},\r
- resize: resize,\r
- busy: function(){\r
- return isDragging;\r
- },\r
- onMouseDown: function( _mouseX, _mouseY){\r
- yOffset = _mouseY;\r
- _canvasY = canvasY;\r
- _canvasH = canvasH;\r
- isDragging = true;\r
- },\r
- onMouseMove: function( _mouseX, _mouseY){\r
- if( isDragging !== true){\r
- COMIC_ELEMENT_OPERATOR.hide();\r
- MOUSE_CURSOR( 'n-resize');\r
- } else {\r
- var move = _mouseY -yOffset;\r
- if( isTop === true){ \r
- //if( 0 < _canvasH - move){\r
- if( _canvasH - move < MIN_PANEL_HEIGHT){\r
- move = _canvasH -MIN_PANEL_HEIGHT;\r
- }\r
- canvasY = _canvasY +move;\r
- canvasH = _canvasH -move;\r
- log.html( move)\r
- onPanelResizeFunction( true);\r
- //} \r
- } else {\r
- var _h = _canvasH +move;\r
- if( 0 < _h && _h < windowH -canvasY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
- if( _h < MIN_PANEL_HEIGHT){\r
- _h = MIN_PANEL_HEIGHT;\r
- }\r
- canvasH = _h;\r
- onPanelResizeFunction( false);\r
- }\r
- }\r
- }\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- ( _canvasY !== canvasY || _canvasH !== canvasH) && SAVE( restoreState, [ NaN, _canvasY, NaN, _canvasH], [ NaN, canvasY, NaN, canvasH]);\r
- isDragging = false;\r
- }\r
+ log = $( '#window-log');\r
+ \r
+ delete WINDOWS_CONTROL.init;\r
+ },\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ var _index = getCurrentWindow( _mouseX, _mouseY);\r
+ if( _index === 0){\r
+ currentWindow.onMouseMove( _mouseX, _mouseY);\r
+ return true;\r
+ } else\r
+ if( _index !== -1){ // 先頭のクリックでない場合\r
+ // Array を前に\r
+ WINDOW_ARRAY.splice( currentWindowIndex, 1);\r
+ WINDOW_ARRAY.unshift( currentWindow);\r
+ // Domを最後に\r
+ jqContainer.append( currentWindow.$);\r
+ currentWindowIndex = 0;\r
+ return true;\r
}\r
- };\r
- \r
- var PANEL_RESIZER_TOP = PanelResizerClass.apply( {}, [ document.getElementById( 'panel-resizer-top'), _onResizeFunction, true]),\r
- PANEL_RESIZER_BOTTOM = PanelResizerClass.apply( {}, [ document.getElementById( 'panel-resizer-bottom'), _onResizeFunction, false]),\r
- DRAGGABLE_ELEMENT_ARRAY = [ PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM],\r
- NUM_RESIZER = DRAGGABLE_ELEMENT_ARRAY.length;\r
+ return false;\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ if( getCurrentWindow( _mouseX, _mouseY) === 0){\r
+ currentWindow.onMouseUp( _mouseX, _mouseY);\r
+ return true;\r
+ }\r
+ return false;\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ if( getCurrentWindow( _mouseX, _mouseY) === 0){\r
+ currentWindow.onMouseDown( _mouseX, _mouseY);\r
+ return true;\r
+ }\r
+ return false;\r
+ },\r
+ onMouseClick: function( _mouseX, _mouseY){\r
+ return false;\r
+ },\r
+ busy: function(){\r
+ return currentWindow !== null;\r
+ },\r
+ onWindowResize: function( _windowW, _windowH){\r
+ /*\r
+ * 画面外に出るwindowの移動\r
+ */\r
+ },\r
+ createWindow: function( scope, EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
+ opt_visible = opt_visible !== false;\r
+ opt_closeButtonEnabled = opt_closeButtonEnabled === true;\r
+ opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;\r
+ opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH;\r
+ opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
+ \r
+ var _window = h2c.util.extend(\r
+ WindowClass.apply( scope, [ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH]),\r
+ EXTENDS\r
+ );\r
+ _window.setInstance();\r
+ opt_visible === true && openWindow( _window);\r
+ return _window;\r
+ }\r
+ }\r
+ })();\r
+\r
+/* ----------------------------------------\r
+ * TOOL_BOX_WINDOW\r
+ */\r
+ var TOOL_BOX_WINDOW = ( function(){\r
+ var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, publishButton,\r
+ gridSwitchFunction;\r
\r
- _onResizeFunction = PanelResizerClass = undefined;\r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 73, false, true, addImage);\r
+ MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);\r
\r
- /*\r
- * --------------------------------------------------------------------------------------------\r
- * COMIC_ELEMENT_OPERATOR
- */\r
- var COMIC_ELEMENT_OPERATOR = ( function(){\r
- var MOUSE_CURSOR = updateMouseCursor,\r
- SAVE = HISTORY.saveState,\r
- INFOMATION = INFOMATION_WINDOW.update,\r
- GRID_ENABLED = GRID_CONTROL.enabled,\r
- HIT_AREA = MOUSE_HIT_AREA,\r
- RESIZER = ( function( HIT_AREA){\r
- var POSITION_ARRAY = [],\r
- FLOOR = Math.floor,\r
- CURSOR_AND_FLIP = [\r
- { cursor: 'n-resize', v: 3},\r
- { cursor: 'e-resize', h: 2},\r
- { cursor: 'e-resize', h: 1},\r
- { cursor: 'n-resize', v: 0},\r
- { cursor: 'nw-resize', h: 5, v: 6, vh: 7},\r
- { cursor: 'ne-resize', h: 4, v: 7, vh: 6},\r
- { cursor: 'ne-resize', h: 7, v: 4, vh: 5},\r
- { cursor: 'nw-resize', h: 6, v: 5, vh: 4}\r
- ], \r
- elmResizerContainerStyle = document.getElementById( 'comic-element-resizer-container').style,\r
- elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,\r
- elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,\r
- elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,\r
- elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,\r
- x, y, w, h,\r
- currentIndex;\r
- elmResizerContainerStyle.display = 'none';\r
- return {\r
- x: function(){ return x;},\r
- y: function(){ return y;},\r
- w: function(){ return w;},\r
- h: function(){ return h;},\r
- update: function( _x, _y, _w, _h){\r
- x = _x !== undefined ? _x : x;\r
- y = _y !== undefined ? _y : y;\r
- w = _w !== undefined ? _w : w;\r
- h = _h !== undefined ? _h : h;\r
- elmResizerContainerStyle.left = x +'px';\r
- elmResizerContainerStyle.top = y +'px';\r
- elmResizerContainerStyle.width = w +'px';\r
- elmResizerContainerStyle.height = h +'px';\r
- elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
- elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
- elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
- elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';\r
- \r
- POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);\r
- POSITION_ARRAY.push(\r
- {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5},\r
- {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
- {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
- {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5},\r
- {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
- {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
- {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5},\r
- {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}\r
- );\r
- },\r
- index: function( _mouseX, _mouseY){\r
- var p,\r
- l = POSITION_ARRAY.length;\r
- for( var i=0; i<l; i++){\r
- p = POSITION_ARRAY[ i];\r
- if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
- MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
- return currentIndex = i;\r
- }\r
- }\r
- return -1;\r
- },\r
- flip: function( _flipV, _flipH){\r
- var p = CURSOR_AND_FLIP[ currentIndex];\r
- currentIndex = _flipH === true || _flipV === true ? p[\r
- _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')\r
- ] : currentIndex;\r
- MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);\r
- return currentIndex;\r
- },\r
- show: function(){\r
- elmResizerContainerStyle.display = '';\r
- },\r
- hide: function(){\r
- elmResizerContainerStyle.display = 'none';\r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 84, false, true, addText);\r
+ MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);\r
+\r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 71, false, true, switchGrid);\r
+ MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);\r
+\r
+ function addImage(){\r
+ setTimeout( function(){ CANVAS_CONTROL.createImageElement();}, 0); \r
+ }\r
+ function addText(){\r
+ setTimeout( function(){ CANVAS_CONTROL.createTextElement();}, 0); \r
+ }\r
+ function switchGrid(){\r
+ setTimeout( gridSwitchFunction, 0);\r
+ }\r
+ function popupHelp(){\r
+ setTimeout( function(){ HELP_DOCUMENTS_WINDOW.open();}, 0); \r
+ }\r
+ \r
+ return WINDOWS_CONTROL.createWindow(\r
+ this,\r
+ {\r
+ onInit: function(){\r
+ addImageButton = $( '#toolbox-add-image-button').click( function(e){\r
+ addImage();\r
+ e.preventDefault();\r
+ return false;\r
+ });\r
+\r
+ addTextButton = $( '#toolbox-add-text-button').click( function(e){\r
+ addText();\r
+ e.preventDefault();\r
+ return false;\r
+ });\r
+ \r
+ editBgButton = $( '#toolbox-edit-bg-button').click( function( e){\r
+ setTimeout( function(){\r
+ INFOMATION_WINDOW.open();\r
+ }, 0); \r
+ e.preventDefault();\r
+ return false;\r
+ });\r
+ \r
+ switchGridButton = $( '#toolbox-switch-grid').click( function( e){\r
+ switchGrid();\r
+ e.preventDefault();\r
+ return false;\r
+ });\r
+ \r
+ popupHelpButton = $( '#toolbox-popup-help-button').click( function( e){\r
+ popupHelp();\r
+ e.preventDefault();\r
+ return false;\r
+ });\r
+ \r
+ publishButton = $( '#toolbox-publish-button');\r
+ \r
+ delete this.onInit;\r
+ },\r
+ setGridSwitchFunction: function( _gridSwitchFunction){\r
+ gridSwitchFunction = _gridSwitchFunction || gridSwitchFunction;\r
+ }\r
+ },\r
+ 'toolbox-window', 'Tool box', 0, 215, 110, 290, true\r
+ );\r
+ })();\r
+\r
+/* ----------------------------------------\r
+ * INFOMATION_WINDOW\r
+ */ \r
+ var INFOMATION_WINDOW = ( function(){\r
+ var FADE_EFFECT_ENABLED = h2c.isIE === false || h2c.ieVersion >= 8,\r
+ FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',\r
+ FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',\r
+ backgroundInfomationElm,\r
+ jqComicElementInformation,\r
+ xValueElm, yValueElm, zValueElm, aValueElm, wValueElm, hValueElm, aspectElm,\r
+ wPercentElm, hPercentElm,\r
+ currentComicElement = null,\r
+ currentElementType = -1;\r
+\r
+ return WINDOWS_CONTROL.createWindow(\r
+ this,\r
+ {\r
+ onInit: function(){\r
+ backgroundInfomationElm = $( '#panel-background-information');\r
+ \r
+ jqComicElementInformation = $( '#comic-element-infomation').hide().css( {\r
+ height: this.bodyHeight()\r
+ });\r
+ var TAB_GROUP_ID = 'comic-element-attribute';\r
+ var CREATER = h2c.key.createEditableText;\r
+ xValueElm = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID);\r
+ yValueElm = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID);\r
+ zValueElm = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID);\r
+ aValueElm = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID);\r
+ wValueElm = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID);\r
+ hValueElm = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);\r
+ wPercentElm = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);\r
+ hPercentElm = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);\r
+ aspectElm = $( '#comic-element-keep-aspect');\r
+ delete this.onInit;\r
+ },\r
+ onResize: function( w, h){\r
+ jqComicElementInformation && jqComicElementInformation.css( {\r
+ height: this.bodyHeight()\r
+ });\r
+ },\r
+ update: function( _currentElementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){\r
+ if( currentElementType !== _currentElementType){\r
+ if( _currentElementType !== -1){\r
+ if( _currentElementType === 1){\r
+ aValueElm.show();\r
+ wPercentElm.hide();\r
+ hPercentElm.hide();\r
+ aspectElm.hide();\r
+ } else {\r
+ aValueElm.hide();\r
+ wPercentElm.show();\r
+ hPercentElm.show();\r
+ aspectElm.show();\r
}\r
+ currentElementType === -1 && jqComicElementInformation.stop().css( {\r
+ filter: '',\r
+ opacity: ''\r
+ })[ FADE_IN_EFFECT]();\r
+ } else {\r
+ currentElementType !== -1 && jqComicElementInformation.stop().css({\r
+ filter: '',\r
+ opacity: ''\r
+ })[ FADE_OUT_EFFECT]();\r
}\r
- })( HIT_AREA),\r
- TAIL_MOVER = ( function(){\r
- var ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
- SIZE = h2c.util.getElementSize( ELM_MOVER).width,\r
- SIN = Math.sin,\r
- COS = Math.cos,\r
- ATAN = Math.atan,\r
- FLOOR = Math.floor,\r
- DEG_TO_RAD = Math.PI / 180,\r
- RAD_TO_DEG = 1 /DEG_TO_RAD,\r
- currentText = null,\r
- x, y, w, h, a, radA;\r
- \r
- function draw( _w, _h, _a){\r
- w = _w !== undefined ? _w : w;\r
- h = _h !== undefined ? _h : h;\r
- a = _a !== undefined ? _a : a;\r
- radA = a *DEG_TO_RAD;\r
- x = FLOOR( ( ( COS( radA) /2 +0.5) *( w +SIZE)) -SIZE /2);\r
- y = FLOOR( ( ( SIN( radA) /2 +0.5) *( h +SIZE)) -SIZE /2);\r
- ELM_MOVER.style.left = x +'px';\r
- ELM_MOVER.style.top = y +'px';\r
- log.html( [ w, h, a].join());\r
- }\r
+ currentElementType = _currentElementType;\r
+ }\r
+ if( currentElementType !== -1){\r
+ xValueElm.update( x);\r
+ yValueElm.update( y);\r
+ zValueElm.update( z);\r
+ _currentElementType === 1 && aValueElm.update( a);\r
+ wValueElm.update( w);\r
+ hValueElm.update( h);\r
+ _currentElementType === 0 && wPercentElm.update( wPercent);\r
+ _currentElementType === 0 && hPercentElm.update( hPercent); \r
+ } else {\r
\r
- return {\r
- update: draw,\r
- show: function( _currentText){\r
- /*\r
- * visibilityのほうがいい, display:none だと ie で描画が狂う
- */\r
- ELM_MOVER.style.visibility = '';\r
- draw( _currentText.w, _currentText.h, _currentText.angle());\r
- currentText = _currentText;\r
- },\r
- hide: function(){\r
- ELM_MOVER.style.visibility = 'hidden';\r
- currentText = null;\r
- },\r
- hitTest: function( _mouseX, _mouseY){\r
- var _x = x -SIZE /2,\r
- _y = y -SIZE /2;\r
- ret = currentIsTextElement === true && _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
- ret === true && MOUSE_CURSOR( 'move');\r
- return ret;\r
- },\r
- onDrag: function( _mouseX, _mouseY){\r
- draw( w, h,\r
- _mouseX !== 0 ?\r
- ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :\r
- _mouseY > 0 ? 0 : 180\r
- );\r
- currentText && currentText.angle( a);\r
- updateInfomation( undefined, undefined, undefined, a);\r
- }\r
- }\r
- })(),\r
- COMIC_ELEMENT_CONSOLE = ( function(){\r
- var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
- LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
- DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
- EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
- CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
- jqStage,\r
- jqConsoleParent,\r
- jqConsoleWrapper,\r
- jqConsoleTail,\r
- jqImgConsole, jqTextConsole,\r
- currentElement = null,\r
- currentType = -1,\r
- visible = false,\r
- imgConsoleWidth, imgConsoleHeight,\r
- textConsoleWidth, textConsoleHeight,\r
- consoleWidth, consoleHeight,\r
- consoleX, consoleY,\r
- tailSize = 10,\r
- buttonClickable = false;\r
- \r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 66, false, true, layerBack);\r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 70, false, true, layerForward);\r
+ }\r
+ }\r
+ },\r
+ 'infomation-window', 'Infomation', 0, 30, 200, 180, true\r
+ );\r
+ })();\r
+\r
+/* ----------------------------------------\r
+ * HELP_WINDOW\r
+ */\r
+ var HELP_DOCUMENTS_WINDOW = ( function(){\r
+ var visible = true,\r
+ hasAjaxContents = false,\r
+ jqAjaxContents,\r
+ jqNaviItems,\r
+ jqPages;\r
+ function jumpPage( _index){\r
+ \r
+ }\r
+ function onOpen( _pageIndex){\r
+ _pageIndex = _pageIndex || 0;\r
+ if( hasAjaxContents === false){\r
+ $.ajax({\r
+ url: 'help/jp.xml',\r
+ dataType: 'xml',\r
+ success: function( xml){\r
+ var elmNavi = document.createElement( 'DIV'),\r
+ elmItemOrigin = document.createElement( 'A'),\r
+ elmPages = document.createElement( 'DIV'),\r
+ elmPageOrigin = document.createElement( 'DIV'),\r
+ elmTitleOrigin = document.createElement( 'H2'),\r
+ elmPage;\r
+ elmNavi.className = 'sidenavi';\r
+ elmItemOrigin.className = 'sidenavi-item';\r
+ elmItemOrigin.href = '#';\r
+ elmPages.className = 'page-contents';\r
+ elmPageOrigin.className = 'page-content';\r
+ elmPageOrigin.appendChild( elmTitleOrigin);\r
\r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 68, false, true, del);\r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 69, false, true, edit);\r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 85, false, true, change);\r
+ $( xml).find( 'page').each( function(){\r
+ var xmlPage = $( this),\r
+ title = xmlPage.attr( 'title'),\r
+ content = xmlPage.text();\r
+ \r
+ elmItemOrigin.innerHTML = title;\r
+ elmNavi.appendChild( elmItemOrigin.cloneNode( true));\r
+ \r
+ elmTitleOrigin.innerHTML = title;\r
+ elmPage = elmPageOrigin.cloneNode( true);\r
+ elmPage.innerHTML = content;\r
+ \r
+ h2c.util.cleanElement( elmPage);\r
+ \r
+ if( elmPage.childNodes.length > 0){\r
+ elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]);\r
+ } else {\r
+ elmPage.appendChild( elmTitleOrigin.cloneNode( true));\r
+ }\r
+ elmPages.appendChild( elmPage);\r
+ });\r
+ jqAjaxContents.append( elmNavi, elmPages);\r
\r
- function buttonBackOrForward( isBack){\r
- var offest = jqConsoleWrapper.offset();\r
- jqConsoleWrapper.css( {\r
- position: isBack === true ? '' : 'absolute',\r
- left: isBack === true ? consoleX : offest.left,\r
- top: isBack === true ? consoleY : offest.top\r
- });\r
- buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);\r
- buttonClickable = !isBack;\r
- }\r
- function layerBack(){\r
- if( currentElement === null) return;\r
- replaceComicElement( currentElement, false);\r
- updateInfomation();\r
- SAVE( restoreReplaceObject, [ currentElement, true], [ currentElement, false]);\r
- var _z = currentElement.z;\r
- LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
- }\r
- function layerForward(){\r
- if( currentElement === null) return;\r
- replaceComicElement( currentElement, true);\r
- updateInfomation();\r
- SAVE( restoreReplaceObject, [ currentElement, false], [ currentElement, true]);\r
- var _z = currentElement.z;\r
- LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
- }\r
- function del(){\r
- if( currentElement === null) return;\r
- buttonBackOrForward( true);\r
- removeComicElement( currentElement);\r
- SAVE( restoreComicElement, [ true, currentElement], [ false, currentElement], true);\r
- COMIC_ELEMENT_OPERATOR.hide();\r
- }\r
- function edit(){\r
- if( currentElement === null) return;\r
- TEXT_EDITOR_CONTROL.show( currentElement);\r
- buttonBackOrForward( true);\r
- }\r
- function change(){\r
- if( currentElement === null) return;\r
- buttonBackOrForward( true);\r
- IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
- }\r
- return {\r
- init: function(){\r
- jqStage = jqEditor;\r
- jqConsoleTail = $( '#comic-element-consol-tail');\r
- jqImgConsole = $( '#image-element-consol').hide();\r
- var imgConsoleSize = h2c.util.getElementSize( jqImgConsole.get( 0));\r
- imgConsoleWidth = imgConsoleSize.width;\r
- imgConsoleHeight = imgConsoleSize.height;\r
- \r
- jqTextConsole = $( '#text-element-consol').hide();\r
- var textConsoleSize = h2c.util.getElementSize( jqTextConsole.get( 0));\r
- textConsoleWidth = textConsoleSize.width;\r
- textConsoleHeight = textConsoleSize.height;\r
- \r
- jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();\r
- jqConsoleParent = jqConsoleWrapper.parent();\r
- \r
- $( '#edit-text-button').click( edit);\r
- $( '#delete-image-button, #delete-text-button').click( del);\r
- $( '#change-image-button').click( change);\r
- $( '#layer-forward-button, #forward-text-button').click( layerForward);\r
- $( '#layer-back-button, #back-text-button').click( layerBack);\r
- \r
- delete COMIC_ELEMENT_CONSOLE.init;\r
- },\r
- show: function( _currentElement, _w, _h){\r
- visible === false && jqConsoleWrapper.show();\r
- visible = true;\r
- currentElement = _currentElement;\r
- var _currentType = _currentElement.type,\r
- _z = _currentElement.z;\r
- if( currentType !== _currentType){\r
- currentType = _currentType;\r
- jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
- jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
- consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
- consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
- }\r
- consoleX = Math.floor( ( _w -consoleWidth) /2);\r
+ jqNaviItems = jqAjaxContents.removeClass( 'loading')\r
+ .find( 'a.' +elmItemOrigin.className)\r
+ .click( function( e){\r
+ var that = this,\r
+ parent = this.parentNode,\r
+ i = ( function(){\r
+ var children = parent.getElementsByTagName( 'A'),\r
+ l = children.length;\r
+ for( var i=0; i<l; ++i){\r
+ if( children[ i] === that) return i;\r
+ }\r
+ return -1;\r
+ })();\r
+ e.stopPropagation();\r
+ if( i === -1) return false;\r
+ jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
+ jqPages.hide().eq( i).show();\r
\r
- LAYER_BACK_BUTTON.visible( _z > 0);\r
- LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
- DELETE_BUTTON.visible( true);\r
- EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
- CHANGE_BUTTON.visible( false);\r
+ return false;\r
+ });\r
+ jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a')\r
+ .click( function( e){\r
+ var that = this,\r
+ i = ( function(){\r
+ var href = that.href,\r
+ i = href.split( '#jump'),\r
+ n = i[1]\r
+ if( n && '' +parseFloat( n) === n){\r
+ return parseFloat( n)\r
+ }\r
+ return -1;\r
+ })();\r
+ e.stopPropagation();\r
+ if( i === -1) return false;\r
+ jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
+ jqPages.hide().eq( i).show();\r
\r
- if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
- consoleY = Math.floor( ( _h -consoleHeight) /2);\r
- jqConsoleWrapper.css( {\r
- left: consoleX,\r
- top: consoleY\r
- }).removeClass( 'console-out');\r
- } else {\r
- consoleY = _h +tailSize;\r
- jqConsoleWrapper.css( {\r
- left: consoleX,\r
- top: consoleY\r
- }).addClass( 'console-out');\r
- }\r
- },\r
- hide: function (){\r
- visible === true && jqConsoleWrapper.hide();\r
- visible = false;\r
- currentElement = null;\r
- LAYER_BACK_BUTTON.visible( false);\r
- LAYER_FORWARD_BUTTON.visible( false);\r
- DELETE_BUTTON.visible( false);\r
- EDIT_BUTTON.visible( false);\r
- CHANGE_BUTTON.visible( false);\r
- },\r
- x: function(){ return consoleX;},\r
- y: function(){ return consoleY;},\r
- w: function(){ return consoleWidth;},\r
- h: function(){ return consoleHeight;},\r
- onMouseMove: function( _mouseX, _mouseY){\r
- if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){\r
- buttonClickable === true && buttonBackOrForward( true);\r
- return false;\r
- }\r
- buttonClickable === false && buttonBackOrForward( false);\r
- return true;\r
- },\r
- onMouseOut: function( _mouseX, _mouseY){\r
- buttonClickable === true && buttonBackOrForward( true);\r
- }\r
- }\r
- })(),\r
- TAIL_CONTROLER = ( function(){\r
- var startA;\r
- return {\r
- onStart: function( _mouseX, _mouseY){\r
- if( TAIL_MOVER.hitTest( _mouseX -x, _mouseY -y) === true){\r
- startA = currentElement.angle();\r
- return true;\r
- }\r
return false;\r
- },\r
- onDrag: function( _mouseX, _mouseY){\r
- TAIL_MOVER.onDrag( _mouseX -x -w /2, _mouseY -y -h /2); //Balloonの中心を0,0とする座標系に変換\r
- },\r
- onFinish: function(){\r
- if( startA === currentElement.angle()) return;\r
- // resize( x, y, w, h, currentElement.angle());\r
- saveComicElementStatus( x, y, w, h, startA);\r
- },\r
- onCancel: function(){\r
- resize( undefined, undefined, undefined, undefined, startA);\r
- }\r
- }\r
- })(),\r
- RESIZE_CONTROLER = ( function(){\r
- var RESIZE_COMMAND_ARRAY = [\r
- { x: 0, w: 0, y: 1, h: -1}, //top\r
- { x: 1, w: -1, y: 0, h: 0}, //left\r
- { x: 0, w: 1, y: 0, h: 0}, //right\r
- { x: 0, w: 0, y: 0, h: 1}, //bottom\r
- { x: 1, w: -1, y: 1, h: -1}, //top-left\r
- { x: 0, w: 1, y: 1, h: -1}, //top-right\r
- { x: 1, w: -1, y: 0, h: 1}, //bottom-left\r
- { x: 0, w: 1, y: 0, h: 1} //bottom-right\r
- ],\r
- currentResizerIndex = -1,\r
- startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
- baseX, baseY, baseW, baseH,\r
- currentX, currentY, currentW, currentH,\r
- transX, transY, transW, transH,\r
- xOffset, yOffset;\r
- \r
- function update( _x, _y, _w, _h){\r
- _x = _x !== undefined ? _x : currentX;\r
- _y = _y !== undefined ? _y : currentY;\r
- _w = _w !== undefined ? _w : currentW;\r
- _h = _h !== undefined ? _h : currentH;\r
- \r
- if( currentIsTextElement === false && currentResizerIndex > 3 && h2c.key.shiftEnabled() === true){\r
- if( startAspect >= 1){\r
- var __w = _w;\r
- _w = Math.floor( startAspect * _h);\r
- _x += currentResizerIndex % 2 === 0 ? __w -_w : 0;\r
- } else {\r
- var __h = _h;\r
- _h = Math.floor( _w / startAspect);\r
- _y += currentResizerIndex <= 5 ? __h -_h : 0;\r
+ });\r
+ jqNaviItems.eq( _pageIndex).addClass( 'current');\r
+ jqPages = jqAjaxContents.find( '.page-content');\r
+ jqPages.eq( _pageIndex).show();\r
+ }\r
+ });\r
+ hasAjaxContents = true;\r
+ } else {\r
+ jqNaviItems.removeClass( 'current').eq( _pageIndex).addClass( 'current');\r
+ jqPages.hide().eq( _pageIndex).show();\r
+ }\r
+ }\r
+ return WINDOWS_CONTROL.createWindow(\r
+ this,\r
+ {\r
+ onInit: function(){\r
+ jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});\r
+ onOpen( 0);\r
+ delete this.onInit;\r
+ },\r
+ onResize: function( w, h){\r
+ jqAjaxContents && jqAjaxContents.css( { height: this.bodyHeight()});\r
+ },\r
+ setAjaxContent: function( html){\r
+ \r
+ delete this.onLoadAjaxContent;\r
+ }\r
+ },\r
+ null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300\r
+ );\r
+ })();\r
+\r
+/* ----------------------------------------\r
+ * - CANVAS_CONTROL\r
+ * - GRID_CONTROL\r
+ * - WHITE_GLASS_CONTROL\r
+ * - PANEL_BORDER_CONTROL\r
+ * - COMIC_ELEMENT_CONTROL\r
+ * - PanelResizerClass\r
+ * - COMIC_ELEMENT_OPERATOR\r
+ * - ImageElementClass\r
+ * - TextElementClass\r
+ */ \r
+ var CANVAS_CONTROL = ( function(){\r
+ var DEFAULT_PANEL_WIDTH = 400,\r
+ DEFAULT_PANEL_HEIGHT = 300,\r
+ MIN_PANEL_HEIGHT = 20,\r
+ BORDER_WIDTH = 2,\r
+ RESIZER_BORDER_WIDTH = 1,\r
+ SPACE_ENABLED = h2c.key.spaceEnabled,\r
+ canvasW, canvasH, canvasX, canvasY,\r
+ xOffset, yOffset, startCanvasX, startCanvasY,\r
+ isDragging = false,\r
+ isCanvasDraggble = false;\r
+ \r
+ var GRID_CONTROL = ( function(){\r
+ var elmGrid = document.getElementById( 'grid'),\r
+ jQGrid,\r
+ visible = false;\r
+ \r
+ function update(){\r
+ jQGrid.css( {\r
+ opacity: '',\r
+ fliter: ''\r
+ }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();\r
+ visible = !visible;\r
+ if( visible === true){\r
+ elmGrid.style.backgroundImage = "url('grid.gif')";\r
+ }\r
+ return visible;\r
+ }\r
+ return {\r
+ init: function(){\r
+ jQGrid = $( elmGrid);\r
+ this.resize();\r
+ TOOL_BOX_WINDOW.setGridSwitchFunction( update);\r
+ delete GRID_CONTROL.init;\r
+ },\r
+ resize: function(){\r
+ elmGrid.style.backgroundPosition = [ canvasX % 10, 'px ', canvasY % 10, 'px'].join( '');\r
+ elmGrid.style.height = windowH +'px'; \r
+ },\r
+ enabled: function(){\r
+ return visible;\r
+ }\r
+ }\r
+ })();\r
+ \r
+ /*\r
+ * WHITE_GLASS_CONTROL\r
+ */ \r
+ var WHITE_GLASS_CONTROL = ( function(){\r
+ var styleTop = document.getElementById( 'whiteGlass-top').style,\r
+ styleLeft = document.getElementById( 'whiteGlass-left').style,\r
+ styleRight = document.getElementById( 'whiteGlass-right').style,\r
+ styleBottom = document.getElementById( 'whiteGlass-bottom').style;\r
+ function resize(){\r
+ var _w = canvasW,\r
+ _h = canvasH,\r
+ marginTop = canvasY,\r
+ marginBottom = windowH -_h -marginTop,\r
+ marginX = canvasX,\r
+ rightWidth = windowW -_w -marginX;\r
+ \r
+ styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';\r
+ \r
+ styleLeft.top = marginTop +'px';\r
+ styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';\r
+ styleLeft.height = ( _h + marginBottom) +'px';\r
+ \r
+ styleRight.top = marginTop +'px';\r
+ styleRight.left = _w +marginX +'px';\r
+ styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';\r
+ styleRight.height = ( _h + marginBottom) +'px';\r
+ \r
+ styleBottom.top = ( _h +marginTop) +'px';\r
+ styleBottom.left = marginX +'px';\r
+ styleBottom.width = _w +'px';\r
+ styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';\r
+ }\r
+ return {\r
+ resize: resize\r
+ }\r
+ })();\r
+\r
+ /*\r
+ * PANEL_BORDER_CONTROL\r
+ */\r
+ var PANEL_BORDER_CONTROL = ( function(){\r
+ var panelElm, borderWidth;\r
+ \r
+ function resize(){\r
+ panelElm.css( {\r
+ left: canvasX -BORDER_WIDTH,\r
+ top: canvasY -BORDER_WIDTH,\r
+ width: canvasW,\r
+ height: canvasH\r
+ });\r
+ }\r
+ \r
+ return {\r
+ init: function(){\r
+ panelElm = $( '#panel-border');\r
+ borderWidth = panelElm.css( 'border-width');\r
+ \r
+ delete PANEL_BORDER_CONTROL.init;\r
+ },\r
+ resize: resize\r
+ }\r
+ })();\r
+ \r
+ /*\r
+ * COMIC_ELEMENT_CONTROL\r
+ * - PanelResizerClass\r
+ * - COMIC_ELEMENT_OPERATOR\r
+ * - ImageElementClass\r
+ * - TextElementClass\r
+ */\r
+ var COMIC_ELEMENT_CONTROL = ( function( _onResizeFunction){\r
+ var MIN_OBJECT_SIZE = 19,\r
+ log,\r
+ currentElement = null,\r
+ _canvasX, _canvasY, _canvasW, _canvasH,\r
+ MOUSE_HIT_AREA = 10,\r
+ SAVE = HISTORY.saveState;\r
+ /*\r
+ * --------------------------------------------------------------------------------------------\r
+ * panel resizer\r
+ */\r
+ var PanelResizerClass = function( ELM, onPanelResizeFunction, isTop){\r
+ var BORDER_WIDTH = 2,\r
+ yOffset, y, _canvasY, _canvasH,\r
+ RESIZER_HEIGHT = 30,\r
+ isDragging = false,\r
+ SAVE = HISTORY.saveState,\r
+ MOUSE_CURSOR = updateMouseCursor;\r
+ \r
+ function restoreState( arg){\r
+ if( arg && arg.length > 3){\r
+ canvasX = arg[ 0] || canvasX;\r
+ canvasY = arg[ 1] || canvasY;\r
+ canvasW = arg[ 2] || canvasW;\r
+ canvasH = arg[ 3] || canvasH;\r
+ onPanelResizeFunction( isTop);\r
+ }\r
+ }\r
+ \r
+ return {\r
+ init: function( _elm){\r
+ this.$ = $( ELM);\r
+ ELM.style.width = ( canvasW +2)+'px';\r
+ },\r
+ $: null,\r
+ hitareaX: function(){ return -1;},\r
+ hitareaY: function(){ return isTop === true ? ( -35 -BORDER_WIDTH) : ( canvasH +5 +BORDER_WIDTH);},\r
+ hitareaW: function(){ return canvasW +2;},\r
+ hitareaH: function(){ return RESIZER_HEIGHT;},\r
+ resize: resize,\r
+ busy: function(){\r
+ return isDragging;\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ yOffset = _mouseY;\r
+ _canvasY = canvasY;\r
+ _canvasH = canvasH;\r
+ isDragging = true;\r
+ },\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ if( isDragging !== true){\r
+ COMIC_ELEMENT_OPERATOR.hide();\r
+ MOUSE_CURSOR( 'n-resize');\r
+ } else {\r
+ var move = _mouseY -yOffset;\r
+ if( isTop === true){ \r
+ //if( 0 < _canvasH - move){\r
+ if( _canvasH - move < MIN_PANEL_HEIGHT){\r
+ move = _canvasH -MIN_PANEL_HEIGHT;\r
+ }\r
+ canvasY = _canvasY +move;\r
+ canvasH = _canvasH -move;\r
+ log.html( move)\r
+ onPanelResizeFunction( true);\r
+ //} \r
+ } else {\r
+ var _h = _canvasH +move;\r
+ if( 0 < _h && _h < windowH -canvasY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
+ if( _h < MIN_PANEL_HEIGHT){\r
+ _h = MIN_PANEL_HEIGHT;\r
+ }\r
+ canvasH = _h;\r
+ onPanelResizeFunction( false);\r
}\r
}\r
- transX = _x;\r
- transY = _y;\r
- transW = _w;\r
- transH = _h;\r
- RESIZER.update( _x, _y, _w, _h);\r
- currentElement.resize( _x, _y, _w, _h);\r
- currentIsTextElement === true && TAIL_MOVER.update( _w, _h);\r
- COMIC_ELEMENT_CONSOLE.show( currentElement, _w, _h);\r
- updateInfomation( _x, _y, undefined, undefined, _w, _h);\r
}\r
- \r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ ( _canvasY !== canvasY || _canvasH !== canvasH) && SAVE( restoreState, [ NaN, _canvasY, NaN, _canvasH], [ NaN, canvasY, NaN, canvasH]);\r
+ isDragging = false;\r
+ }\r
+ }\r
+ };\r
+ \r
+ var PANEL_RESIZER_TOP = PanelResizerClass.apply( {}, [ document.getElementById( 'panel-resizer-top'), _onResizeFunction, true]),\r
+ PANEL_RESIZER_BOTTOM = PanelResizerClass.apply( {}, [ document.getElementById( 'panel-resizer-bottom'), _onResizeFunction, false]),\r
+ DRAGGABLE_ELEMENT_ARRAY = [ PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM],\r
+ NUM_RESIZER = DRAGGABLE_ELEMENT_ARRAY.length;\r
+ \r
+ _onResizeFunction = PanelResizerClass = undefined;\r
+ \r
+ /*\r
+ * --------------------------------------------------------------------------------------------\r
+ * COMIC_ELEMENT_OPERATOR\r
+ */\r
+ var COMIC_ELEMENT_OPERATOR = ( function(){\r
+ var MOUSE_CURSOR = updateMouseCursor,\r
+ SAVE = HISTORY.saveState,\r
+ INFOMATION = INFOMATION_WINDOW.update,\r
+ GRID_ENABLED = GRID_CONTROL.enabled,\r
+ HIT_AREA = MOUSE_HIT_AREA,\r
+ currentIsTextElement = false,\r
+ currentControler = null,\r
+ currentElement = null,\r
+ x, y, w, h, angle, flipV, flipH, \r
+ RESIZER = ( function( HIT_AREA){\r
+ var POSITION_ARRAY = [],\r
+ FLOOR = Math.floor,\r
+ CURSOR_AND_FLIP = [\r
+ { cursor: 'n-resize', v: 3},\r
+ { cursor: 'e-resize', h: 2},\r
+ { cursor: 'e-resize', h: 1},\r
+ { cursor: 'n-resize', v: 0},\r
+ { cursor: 'nw-resize', h: 5, v: 6, vh: 7},\r
+ { cursor: 'ne-resize', h: 4, v: 7, vh: 6},\r
+ { cursor: 'ne-resize', h: 7, v: 4, vh: 5},\r
+ { cursor: 'nw-resize', h: 6, v: 5, vh: 4}\r
+ ], \r
+ elmResizerContainerStyle = document.getElementById( 'comic-element-resizer-container').style,\r
+ elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,\r
+ elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,\r
+ elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,\r
+ elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,\r
+ x, y, w, h,\r
+ currentIndex;\r
+ elmResizerContainerStyle.display = 'none';\r
return {\r
- onStart: function( _mouseX, _mouseY){\r
- if( currentElement.keepSize === true) return false;\r
- currentResizerIndex = RESIZER.index( _mouseX, _mouseY);\r
- if( currentResizerIndex === -1) return false;\r
- xOffset = _mouseX;\r
- yOffset = _mouseY;\r
- startX = baseX = x;\r
- startY = baseY = y;\r
- startW = baseW = w;\r
- startH = baseH = h;\r
- startFilpV = flipV;\r
- startFilpH = flipH;\r
- startAspect = startW /startH;\r
- return true;\r
+ x: function(){ return x;},\r
+ y: function(){ return y;},\r
+ w: function(){ return w;},\r
+ h: function(){ return h;},\r
+ update: function( _x, _y, _w, _h){\r
+ x = _x !== undefined ? _x : x;\r
+ y = _y !== undefined ? _y : y;\r
+ w = _w !== undefined ? _w : w;\r
+ h = _h !== undefined ? _h : h;\r
+ elmResizerContainerStyle.left = x +'px';\r
+ elmResizerContainerStyle.top = y +'px';\r
+ elmResizerContainerStyle.width = w +'px';\r
+ elmResizerContainerStyle.height = h +'px';\r
+ elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
+ elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
+ elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
+ elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';\r
+ \r
+ POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);\r
+ POSITION_ARRAY.push(\r
+ {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
+ {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},\r
+ {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5},\r
+ {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}\r
+ );\r
},\r
- onDrag: function( _mouseX, _mouseY){\r
- var com = RESIZE_COMMAND_ARRAY[ currentResizerIndex],\r
- moveX = _mouseX -xOffset,\r
- moveY = _mouseY -yOffset,\r
- _x = baseX +moveX *com.x,\r
- _y = baseY +moveY *com.y,\r
- _w = baseW +moveX *com.w,\r
- _h = baseH +moveY *com.h,\r
- _updated = moveX !== 0 || moveY !== 0;\r
-\r
- if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){\r
- \r
- } else \r
- if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){\r
- return;\r
- } else \r
- if( currentIsTextElement === true){\r
- \r
- } else \r
- if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){\r
- if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
- // flipH\r
- var __x = _x;\r
- baseX = _x = _x +_w;\r
- baseY = _y;\r
- baseW = _w = __x -_x;\r
- baseH = _h;\r
- currentElement.flip( false, true);\r
- currentResizerIndex = RESIZER.flip( false, true);\r
- flipV = currentElement.flipV();\r
- } else \r
- if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){\r
- // flipV\r
- var __y = _y;\r
- baseX = _x;\r
- baseY = _y = _y +_h;\r
- baseW = _w;\r
- baseH = _h = __y -_y;\r
- currentElement.flip( true, false);\r
- currentResizerIndex = RESIZER.flip( true, false);\r
- flipH = currentElement.flipH();\r
- } else {\r
- // flipVH\r
- var __x = _x,\r
- __y = _y;\r
- baseX = _x = _x +_w;\r
- baseY = _y = _y +_h;\r
- baseW = _w = __x -_x;\r
- baseH = _h = __y -_y;\r
- currentElement.flip( true, true);\r
- currentResizerIndex = RESIZER.flip( true, true);\r
- flipV = currentElement.flipV();\r
- flipH = currentElement.flipH();\r
+ index: function( _mouseX, _mouseY){\r
+ var p,\r
+ l = POSITION_ARRAY.length;\r
+ for( var i=0; i<l; i++){\r
+ p = POSITION_ARRAY[ i];\r
+ if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
+ MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
+ return currentIndex = i;\r
}\r
- _updated = true;\r
- xOffset = _mouseX;\r
- yOffset = _mouseY; \r
}\r
- currentX = _x;\r
- currentY = _y;\r
- currentW = _w;\r
- currentH = _h;\r
- _updated === true && update( _x, _y, _w, _h);\r
+ return -1;\r
},\r
- onFinish: function(){\r
- MOUSE_CURSOR( '');\r
- if( currentW === w && currentH === h && currentX === x && currentY === y) return;\r
- resize( transX, transY, transW, transH);\r
- currentElement.resize( transX, transY, transW, transH);\r
- saveComicElementStatus( startX, startY, startW, startH, angle, startFilpV, startFilpH);\r
+ flip: function( _flipV, _flipH){\r
+ var p = CURSOR_AND_FLIP[ currentIndex];\r
+ currentIndex = _flipH === true || _flipV === true ? p[\r
+ _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')\r
+ ] : currentIndex;\r
+ MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);\r
+ return currentIndex;\r
},\r
- onCancel: function(){\r
- MOUSE_CURSOR( '');\r
- resize( startX, startY, startW, startH);\r
- currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
- currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :\r
- currentElement.animate( startX, startY, startW, startH, angle);\r
+ show: function(){\r
+ elmResizerContainerStyle.display = '';\r
},\r
- onShiftUpdate: update,\r
- onCtrlUpdate: update\r
+ hide: function(){\r
+ elmResizerContainerStyle.display = 'none';\r
+ }\r
}\r
- })(),\r
- POSITION_CONTROLER = ( function(){\r
- var startX, startY,\r
- currentX, currentY,\r
- xOffset, yOffset,\r
- isCopy = false;\r
+ })( HIT_AREA),\r
+ TAIL_MOVER = ( function(){\r
+ var ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
+ SIZE = h2c.util.getElementSize( ELM_MOVER).width,\r
+ SIN = Math.sin,\r
+ COS = Math.cos,\r
+ ATAN = Math.atan,\r
+ FLOOR = Math.floor,\r
+ DEG_TO_RAD = Math.PI / 180,\r
+ RAD_TO_DEG = 1 /DEG_TO_RAD,\r
+ currentText = null,\r
+ x, y, w, h, a, radA;\r
\r
- function update( _x, _y){\r
- _x = currentX = _x !== undefined ? _x : currentX;\r
- _y = currentY = _y !== undefined ? _y : currentY;\r
- RESIZER.update( _x, _y);\r
- currentElement.resize( _x, _y);\r
- updateInfomation( _x, _y); \r
+ function draw( _w, _h, _a){\r
+ w = _w !== undefined ? _w : w;\r
+ h = _h !== undefined ? _h : h;\r
+ a = _a !== undefined ? _a : a;\r
+ radA = a *DEG_TO_RAD;\r
+ x = FLOOR( ( ( COS( radA) /2 +0.5) *( w +SIZE)) -SIZE /2);\r
+ y = FLOOR( ( ( SIN( radA) /2 +0.5) *( h +SIZE)) -SIZE /2);\r
+ ELM_MOVER.style.left = x +'px';\r
+ ELM_MOVER.style.top = y +'px';\r
+ log.html( [ w, h, a].join());\r
}\r
\r
return {\r
- onStart: function( _mouseX, _mouseY){\r
- xOffset = _mouseX;\r
- yOffset = _mouseY;\r
- startX = currentX = x;\r
- startY = currentY = y;\r
- MOUSE_CURSOR( 'move');\r
- },\r
- onDrag: function( _mouseX, _mouseY){\r
- var moveX = _mouseX -xOffset,\r
- moveY = _mouseY -yOffset,\r
- _x = x +moveX,\r
- _y = y +moveY;\r
- if( GRID_ENABLED() === true){\r
- _x = Math.floor( _x / 10) * 10;\r
- _y = Math.floor( _y / 10) * 10;\r
- }\r
- update( _x, _y);\r
+ update: draw,\r
+ show: function( _currentText){\r
+ /*\r
+ * visibilityのほうがいい, display:none だと ie で描画が狂う\r
+ */\r
+ ELM_MOVER.style.visibility = '';\r
+ draw( _currentText.w, _currentText.h, _currentText.angle());\r
+ currentText = _currentText;\r
},\r
- onFinish: function(){\r
- MOUSE_CURSOR( '');\r
- if( currentX === startX && currentY === startY) return;\r
- resize( currentX, currentY);\r
- currentElement.resize( currentX, currentY);\r
- saveComicElementStatus( startX, startY);\r
+ hide: function(){\r
+ ELM_MOVER.style.visibility = 'hidden';\r
+ currentText = null;\r
},\r
- onCancel: function(){\r
- MOUSE_CURSOR( '');\r
- resize( startX, startY);\r
- currentElement.animate( startX, startY);\r
+ hitTest: function( _mouseX, _mouseY){\r
+ var _x = x -SIZE /2,\r
+ _y = y -SIZE /2;\r
+ ret = currentIsTextElement === true && _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
+ ret === true && MOUSE_CURSOR( 'move');\r
+ return ret;\r
},\r
- onShiftUpdate: update,\r
- onCtrlUpdate: update\r
+ onDrag: function( _mouseX, _mouseY){\r
+ draw( w, h,\r
+ _mouseX !== 0 ?\r
+ ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :\r
+ _mouseY > 0 ? 0 : 180\r
+ );\r
+ currentText && currentText.angle( a);\r
+ updateInfomation( undefined, undefined, undefined, a);\r
+ }\r
}\r
})(),\r
- currentIsTextElement = false,\r
- currentControler = null,\r
- currentElement = null,\r
- x, y, w, h, angle, flipV, flipH;\r
-\r
- function resize( _x, _y, _w, _h, _angle){\r
- x = _x !== undefined ? _x : x;\r
- y = _y !== undefined ? _y : y;\r
- w = _w !== undefined ? _w : w;\r
- h = _h !== undefined ? _h : h;\r
- angle = _angle !== undefined ? _angle : angle;\r
-\r
- RESIZER.update( x, y, w, h);\r
- currentIsTextElement === true && TAIL_MOVER.update( w, h, angle);\r
- COMIC_ELEMENT_CONSOLE.show( currentElement, w, h);\r
- updateInfomation( x, y, currentElement.z, angle, w, h);\r
- }\r
- function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){\r
- _w = _w !== undefined ? _w : w;\r
- _h = _h !== undefined ? _h : h;\r
- INFOMATION(\r
- currentElement === null ? -1 : currentElement.type,\r
- _x !== undefined ? _x : x,\r
- _y !== undefined ? _y : y,\r
- _z !== undefined ? _z : ( currentElement === null ? '*' : currentElement.z),\r
- _a !== undefined ? Math.floor( _a) : ( currentIsTextElement === true ? Math.floor( angle) : '-'),\r
- _w,\r
- _h,\r
- currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)),\r
- currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)),\r
- currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect\r
- );\r
- }\r
- function show( _currentElement){\r
- currentElement === null && RESIZER.show();\r
- if( currentElement !== _currentElement){\r
- currentElement = _currentElement;\r
- \r
- currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
- currentIsTextElement === true ? TAIL_MOVER.show( _currentElement) : TAIL_MOVER.hide();\r
- \r
- flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
- flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
- \r
- resize(\r
- _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,\r
- currentIsTextElement === true ? _currentElement.angle() : 0\r
- );\r
- }\r
- }\r
- function hide(){\r
- currentElement !== null && RESIZER.hide();\r
- currentElement = null;\r
- MOUSE_CURSOR( '');\r
- TAIL_MOVER.hide();\r
- COMIC_ELEMENT_CONSOLE.hide();\r
- updateInfomation();\r
- }\r
- function restoreState( arg){\r
- if( arg && arg.length !== 8) return;\r
- var _currentElement = arg[ 0],\r
- _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],\r
- _a = arg[ 5],\r
- _flipV = arg[ 6], _flipH = arg[ 7];\r
- if( !_currentElement) return;\r
- _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
- _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
- _currentElement.animate( _x, _y, _w, _h, _a);\r
- currentControler = null;\r
- currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);\r
- }\r
- function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
- startX = startX !== undefined ? startX : x;\r
- startY = startY !== undefined ? startY : y;\r
- startW = startW !== undefined ? startW : w;\r
- startH = startH !== undefined ? startH : h;\r
- startA = startA !== undefined ? startA : angle;\r
- startFilpV = startFilpV !== undefined ? startFilpV : flipV;\r
- startFilpH = startFilpH !== undefined ? startFilpH : flipH;\r
- currentElement && SAVE( restoreState,\r
- [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],\r
- [ currentElement, x, y, w, h, angle, flipV, flipH]\r
- );\r
- }\r
- h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 16, true, undefined, function(){\r
- currentControler !== null && currentControler.onShiftUpdate && currentControler.onShiftUpdate();\r
- });\r
- h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 17, undefined, true, function(){\r
- currentControler !== null && currentControler.onCtrlUpdate && currentControler.onCtrlUpdate();\r
- });\r
- h2c.key.addKeyDownEvent( h2c.view.EDITOR, 27, false, false, function(){\r
- currentControler !== null && currentControler.onCancel && currentControler.onCancel();\r
- currentControler = null;\r
- });\r
- return {\r
- init: function(){\r
- COMIC_ELEMENT_CONSOLE.init();\r
- hide();\r
- delete COMIC_ELEMENT_OPERATOR.init;\r
- },\r
- hide: hide,\r
- busy: function(){\r
- return currentControler !== null;\r
- },\r
- hitareaX: function( _comicElement, _x){\r
- if( _comicElement === currentElement){\r
- var _consoleX = COMIC_ELEMENT_CONSOLE.x();\r
- return x +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
+ COMIC_ELEMENT_CONSOLE = ( function(){\r
+ var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
+ LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
+ DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
+ EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
+ CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
+ jqStage,\r
+ jqConsoleParent,\r
+ jqConsoleWrapper,\r
+ jqConsoleTail,\r
+ jqImgConsole, jqTextConsole,\r
+ currentElement = null,\r
+ currentType = -1,\r
+ visible = false,\r
+ imgConsoleWidth, imgConsoleHeight,\r
+ textConsoleWidth, textConsoleHeight,\r
+ consoleWidth, consoleHeight,\r
+ consoleX, consoleY,\r
+ tailSize = 10,\r
+ buttonClickable = false;\r
+ \r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 66, false, true, layerBack);\r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 70, false, true, layerForward);\r
+ \r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 68, false, true, del);\r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 69, false, true, edit);\r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 85, false, true, change);\r
+ \r
+ function buttonBackOrForward( isBack){\r
+ var offest = jqConsoleWrapper.offset();\r
+ jqConsoleWrapper.css( {\r
+ position: isBack === true ? '' : 'absolute',\r
+ left: isBack === true ? consoleX : offest.left,\r
+ top: isBack === true ? consoleY : offest.top\r
+ });\r
+ buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);\r
+ buttonClickable = !isBack;\r
}\r
- return _x -HIT_AREA;\r
- },\r
- hitareaY: function( _comicElement, _y){\r
- return _y -HIT_AREA;\r
- },\r
- hitareaW: function( _comicElement, _w){\r
- if( _comicElement === currentElement){\r
- var _consoleW = COMIC_ELEMENT_CONSOLE.w();\r
- return ( _consoleW < w ? w : _consoleW) +HIT_AREA *2;\r
+ function layerBack(){\r
+ if( currentElement === null) return;\r
+ replaceComicElement( currentElement, false);\r
+ updateInfomation();\r
+ SAVE( restoreReplaceObject, [ currentElement, true], [ currentElement, false]);\r
+ var _z = currentElement.z;\r
+ LAYER_BACK_BUTTON.visible( _z > 0);\r
+ LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
}\r
- return _w +HIT_AREA *2;\r
- },\r
- hitareaH: function( _comicElement, _h){\r
- if( _comicElement === currentElement){\r
- var _consoleY = COMIC_ELEMENT_CONSOLE.y();\r
- return ( _consoleY < h ? h : _consoleY +COMIC_ELEMENT_CONSOLE.h()) +HIT_AREA *2;\r
+ function layerForward(){\r
+ if( currentElement === null) return;\r
+ replaceComicElement( currentElement, true);\r
+ updateInfomation();\r
+ SAVE( restoreReplaceObject, [ currentElement, false], [ currentElement, true]);\r
+ var _z = currentElement.z;\r
+ LAYER_BACK_BUTTON.visible( _z > 0);\r
+ LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
}\r
- return _h +HIT_AREA *2;\r
- },\r
- onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
- //show( _currentElement);\r
- if( currentIsTextElement === true && TAIL_CONTROLER.onStart( _mouseX, _mouseY) === true){\r
- currentControler = TAIL_CONTROLER;\r
- } else\r
- if( RESIZE_CONTROLER.onStart( _mouseX, _mouseY) === true){\r
- currentControler = RESIZE_CONTROLER;\r
- } else {\r
- POSITION_CONTROLER.onStart( _mouseX, _mouseY)\r
- currentControler = POSITION_CONTROLER;\r
+ function del(){\r
+ if( currentElement === null) return;\r
+ buttonBackOrForward( true);\r
+ removeComicElement( currentElement);\r
+ SAVE( restoreComicElement, [ true, currentElement], [ false, currentElement], true);\r
+ COMIC_ELEMENT_OPERATOR.hide();\r
}\r
- },\r
- onMouseMove: function( _currentElement, _mouseX, _mouseY){\r
- show( _currentElement);\r
- if( currentControler !== null){\r
- currentControler.onDrag( _mouseX, _mouseY); \r
- } else {\r
- currentElement && COMIC_ELEMENT_CONSOLE.onMouseMove( _mouseX -x, _mouseY -y);\r
- TAIL_MOVER.hitTest( _mouseX -x, _mouseY -y) === false && RESIZER.index( _mouseX, _mouseY) === -1 && MOUSE_CURSOR( '');\r
+ function edit(){\r
+ if( currentElement === null) return;\r
+ TEXT_EDITOR_CONTROL.show( currentElement);\r
+ buttonBackOrForward( true);\r
}\r
- },\r
- onMouseUp: function( _currentElement, _mouseX, _mouseY){\r
- currentControler !== null && currentControler.onFinish();\r
- currentControler = null;\r
- },\r
- onMouseClick: function( _mouseX, _mouseY){\r
- //return currentElement ? COMIC_ELEMENT_CONSOLE.onMouseClick( _mouseX -x, _mouseY -y) : false;\r
- }\r
- }\r
- })();\r
- /*\r
- * // COMIC_ELEMENT_OPERATOR
- */\r
- \r
- var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, domIndex){\r
- var OPERATOR = COMIC_ELEMENT_OPERATOR;\r
- return {\r
- $: JQ_WAPPER,\r
- type: COMIC_ELM_TYPE,\r
- x: x,\r
- y: y,\r
- w: w,\r
- h: h, \r
- z: z,\r
- domIndex: domIndex,\r
- hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);},\r
- hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);},\r
- hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);},\r
- hitareaH: function(){ return OPERATOR.hitareaH( this, this.h);},\r
- shift: function( _shiftX, _shiftY){\r
- update( this.x +_shiftX, this.y +_shiftY);\r
- },\r
- busy: function(){\r
- return OPERATOR.busy();\r
- },\r
- onMouseMove: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseUp( this, _mouseX, _mouseY);\r
- },\r
- onMouseDown: function( _mouseX, _mouseY){\r
- OPERATOR.onMouseDown( this, _mouseX, _mouseY);\r
- }\r
- }\r
- };\r
- /*\r
- * --------------------------------------------------------------------------------------------\r
- * ImageElementClass
- */\r
- var jqImageElementOrigin;\r
- var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, domIndex){\r
- jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
- \r
- var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
- OPERATOR = COMIC_ELEMENT_OPERATOR,\r
- SAVE = HISTORY.saveState,\r
- HIT_AREA = MOUSE_HIT_AREA,\r
- reversibleImage = null,\r
- actualW = 0, actualH = 0,\r
- flipH = w < 0 ? -1 : 1,\r
- flipV = h < 0 ? -1 : 1,\r
- instance;\r
- w = Math.floor( w);\r
- h = Math.floor( h);\r
- \r
- function update( _x, _y, _w, _h, animate){\r
- instance.x = x = _x !== undefined ? _x : x;\r
- instance.y = y = _y !== undefined ? _y : y;\r
- instance.w = w = _w !== undefined ? _w : w;\r
- instance.h = h = _h !== undefined ? _h : h;\r
- JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { \r
- left: x,\r
- top: y,\r
- width: w,\r
- height: h\r
- }, 250, function(){ reversibleImage.resize( flipH * w, flipV * h);});\r
- animate !== true && reversibleImage.resize( flipH * w, flipV * h);\r
- }\r
- \r
- function updateUrl( _url){\r
- if( url === _url) return;\r
- url = _url || url;\r
- var _reversibleImage = h2c.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){\r
- actualW = _actualW;\r
- actualH = _actualH;\r
- });\r
- if( reversibleImage !== null){\r
- JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);\r
- reversibleImage.destroy();\r
- } else {\r
- JQ_WRAPPER.append( _reversibleImage.elm);\r
- }\r
- reversibleImage = _reversibleImage;\r
- }\r
- return h2c.util.extend(\r
- AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, domIndex]),\r
- {\r
- init: function(){\r
- instance = this;\r
- updateUrl();\r
- update();\r
- delete this.init;\r
- },\r
- flip: function( _flipH, _flipV){\r
- if( _flipH !== true && _flipV !== true) return;\r
- flipH = _flipH === true ? -flipH : flipH;\r
- flipV = _flipV === true ? -flipV : flipV;\r
- reversibleImage.resize( flipH * w, flipV * h);\r
- },\r
- flipV: function(){\r
- return flipV;\r
- },\r
- flipH: function(){\r
- return flipH;\r
- },\r
- url: function( _url, _actualW, _actualH){\r
- if( _url && _url !== url){\r
- SAVE( updateUrl, url, _url);\r
- actualW = _actualW;\r
- actualH = _actualH;\r
- updateUrl( _url);\r
+ function change(){\r
+ if( currentElement === null) return;\r
+ buttonBackOrForward( true);\r
+ IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
+ }\r
+ return {\r
+ init: function(){\r
+ jqStage = jqEditor;\r
+ jqConsoleTail = $( '#comic-element-consol-tail');\r
+ jqImgConsole = $( '#image-element-consol').hide();\r
+ var imgConsoleSize = h2c.util.getElementSize( jqImgConsole.get( 0));\r
+ imgConsoleWidth = imgConsoleSize.width;\r
+ imgConsoleHeight = imgConsoleSize.height;\r
+ \r
+ jqTextConsole = $( '#text-element-consol').hide();\r
+ var textConsoleSize = h2c.util.getElementSize( jqTextConsole.get( 0));\r
+ textConsoleWidth = textConsoleSize.width;\r
+ textConsoleHeight = textConsoleSize.height;\r
+ \r
+ jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();\r
+ jqConsoleParent = jqConsoleWrapper.parent();\r
+ \r
+ $( '#edit-text-button').click( edit);\r
+ $( '#delete-image-button, #delete-text-button').click( del);\r
+ $( '#change-image-button').click( change);\r
+ $( '#layer-forward-button, #forward-text-button').click( layerForward);\r
+ $( '#layer-back-button, #back-text-button').click( layerBack);\r
+ \r
+ delete COMIC_ELEMENT_CONSOLE.init;\r
+ },\r
+ show: function( _currentElement, _w, _h){\r
+ visible === false && jqConsoleWrapper.show();\r
+ visible = true;\r
+ currentElement = _currentElement;\r
+ var _currentType = _currentElement.type,\r
+ _z = _currentElement.z;\r
+ if( currentType !== _currentType){\r
+ currentType = _currentType;\r
+ jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
+ jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
+ consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
+ consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
+ }\r
+ consoleX = Math.floor( ( _w -consoleWidth) /2);\r
+ \r
+ LAYER_BACK_BUTTON.visible( _z > 0);\r
+ LAYER_FORWARD_BUTTON.visible( _z < DRAGGABLE_ELEMENT_ARRAY.length -NUM_RESIZER -1);\r
+ DELETE_BUTTON.visible( true);\r
+ EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
+ CHANGE_BUTTON.visible( false);\r
+ \r
+ if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
+ consoleY = Math.floor( ( _h -consoleHeight) /2);\r
+ jqConsoleWrapper.css( {\r
+ left: consoleX,\r
+ top: consoleY\r
+ }).removeClass( 'console-out');\r
+ } else {\r
+ consoleY = _h +tailSize;\r
+ jqConsoleWrapper.css( {\r
+ left: consoleX,\r
+ top: consoleY\r
+ }).addClass( 'console-out');\r
+ }\r
+ },\r
+ hide: function (){\r
+ visible === true && jqConsoleWrapper.hide();\r
+ visible = false;\r
+ currentElement = null;\r
+ LAYER_BACK_BUTTON.visible( false);\r
+ LAYER_FORWARD_BUTTON.visible( false);\r
+ DELETE_BUTTON.visible( false);\r
+ EDIT_BUTTON.visible( false);\r
+ CHANGE_BUTTON.visible( false);\r
+ },\r
+ x: function(){ return consoleX;},\r
+ y: function(){ return consoleY;},\r
+ w: function(){ return consoleWidth;},\r
+ h: function(){ return consoleHeight;},\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){\r
+ buttonClickable === true && buttonBackOrForward( true);\r
+ return false;\r
+ }\r
+ buttonClickable === false && buttonBackOrForward( false);\r
+ return true;\r
+ },\r
+ onMouseOut: function( _mouseX, _mouseY){\r
+ buttonClickable === true && buttonBackOrForward( true);\r
}\r
- return url\r
- },\r
- actualW: function(){ return actualW;},\r
- actualH: function(){ return actualH;},\r
- keepSize: false,\r
- resize: update,\r
- animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
- flipH = _flipH !== undefined ? _flipH : flipH;\r
- flipV = _flipV !== undefined ? _flipV : flipV;\r
- update( _x, _y, _w, _h, true);\r
- },\r
- getAsHtml: function(){\r
+ }\r
+ })(),\r
+ TAIL_CONTROLER = ( function(){\r
+ var startA;\r
+ return {\r
+ onStart: function( _mouseX, _mouseY){\r
+ if( TAIL_MOVER.hitTest( _mouseX -x, _mouseY -y) === true){\r
+ startA = currentElement.angle();\r
+ return true;\r
+ }\r
+ return false;\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ TAIL_MOVER.onDrag( _mouseX -x -w /2, _mouseY -y -h /2); //Balloonの中心を0,0とする座標系に変換\r
+ },\r
+ onFinish: function(){\r
+ if( startA === currentElement.angle()) return;\r
+ // resize( x, y, w, h, currentElement.angle());\r
+ saveComicElementStatus( x, y, w, h, startA);\r
+ },\r
+ onCancel: function(){\r
+ resize( undefined, undefined, undefined, undefined, startA);\r
+ }\r
+ }\r
+ })(),\r
+ RESIZE_CONTROLER = ( function(){\r
+ var RESIZE_COMMAND_ARRAY = [\r
+ { x: 0, w: 0, y: 1, h: -1}, //top\r
+ { x: 1, w: -1, y: 0, h: 0}, //left\r
+ { x: 0, w: 1, y: 0, h: 0}, //right\r
+ { x: 0, w: 0, y: 0, h: 1}, //bottom\r
+ { x: 1, w: -1, y: 1, h: -1}, //top-left\r
+ { x: 0, w: 1, y: 1, h: -1}, //top-right\r
+ { x: 1, w: -1, y: 0, h: 1}, //bottom-left\r
+ { x: 0, w: 1, y: 0, h: 1} //bottom-right\r
+ ],\r
+ currentResizerIndex = -1,\r
+ startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
+ baseX, baseY, baseW, baseH,\r
+ currentX, currentY, currentW, currentH,\r
+ transX, transY, transW, transH,\r
+ xOffset, yOffset;\r
\r
- },\r
- getAsJson: function(){\r
+ function update( _x, _y, _w, _h){\r
+ _x = _x !== undefined ? _x : currentX;\r
+ _y = _y !== undefined ? _y : currentY;\r
+ _w = _w !== undefined ? _w : currentW;\r
+ _h = _h !== undefined ? _h : currentH;\r
\r
- },\r
- destroy: function(){\r
- reversibleImage.destroy();\r
- JQ_WRAPPER.remove();\r
- JQ_WRAPPER = reversibleImage = OPERATOR = null;\r
- delete this.destroy;\r
+ if( currentIsTextElement === false && currentResizerIndex > 3 && h2c.key.shiftEnabled() === true){\r
+ if( startAspect >= 1){\r
+ var __w = _w;\r
+ _w = Math.floor( startAspect * _h);\r
+ _x += currentResizerIndex % 2 === 0 ? __w -_w : 0;\r
+ } else {\r
+ var __h = _h;\r
+ _h = Math.floor( _w / startAspect);\r
+ _y += currentResizerIndex <= 5 ? __h -_h : 0;\r
+ }\r
+ }\r
+ transX = _x;\r
+ transY = _y;\r
+ transW = _w;\r
+ transH = _h;\r
+ RESIZER.update( _x, _y, _w, _h);\r
+ currentElement.resize( _x, _y, _w, _h);\r
+ currentIsTextElement === true && TAIL_MOVER.update( _w, _h);\r
+ COMIC_ELEMENT_CONSOLE.show( currentElement, _w, _h);\r
+ updateInfomation( _x, _y, undefined, undefined, _w, _h);\r
}\r
- }\r
- );\r
- }\r
- /*\r
- * / ImageElementClass\r
- * --------------------------------------------------------------------------------------------\r
- */\r
-\r
+ \r
+ return {\r
+ onStart: function( _mouseX, _mouseY){\r
+ if( currentElement.keepSize === true) return false;\r
+ currentResizerIndex = RESIZER.index( _mouseX, _mouseY);\r
+ if( currentResizerIndex === -1) return false;\r
+ xOffset = _mouseX;\r
+ yOffset = _mouseY;\r
+ startX = baseX = x;\r
+ startY = baseY = y;\r
+ startW = baseW = w;\r
+ startH = baseH = h;\r
+ startFilpV = flipV;\r
+ startFilpH = flipH;\r
+ startAspect = startW /startH;\r
+ return true;\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ var com = RESIZE_COMMAND_ARRAY[ currentResizerIndex],\r
+ moveX = _mouseX -xOffset,\r
+ moveY = _mouseY -yOffset,\r
+ _x = baseX +moveX *com.x,\r
+ _y = baseY +moveY *com.y,\r
+ _w = baseW +moveX *com.w,\r
+ _h = baseH +moveY *com.h,\r
+ _updated = moveX !== 0 || moveY !== 0;\r
\r
- /*\r
- * --------------------------------------------------------------------------------------------\r
- * TextElementClass\r
- * \r
- * ELM はh2c.domで書き出したものを突っ込むcreateの場合\r
- * \r
- * type\r
- * 0.none\r
- * 1.speach balloon\r
- * 2.think\r
- * 3.bom\r
- * 4.black-box( dq style)\r
- * 5.blue-box( ff style)\r
- * \r
- */\r
- var jqTextElementOrigin;\r
- var TextElementClass = function( type, a, text, x, y, z, w, h, domIndex){\r
- jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
- var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
- _MODERN = $( $( '#textElementTemplete').remove().html());\r
- return h2c.isIE === true && h2c.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;\r
- })();\r
- \r
- var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
- XBROWSER_BALLOON = h2c.balloon.createBalloon( w, h, a, type),\r
- TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
- OPERATOR = COMIC_ELEMENT_OPERATOR,\r
- HIT_AREA = MOUSE_HIT_AREA,\r
- SAVE = HISTORY.saveState,\r
- instance;\r
- \r
- JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);\r
- \r
- function update( _x, _y, _w, _h, _a, animate){\r
- instance.x = x = _x !== undefined ? _x : x;\r
- instance.y = y = _y !== undefined ? _y : y;\r
- instance.w = w = _w !== undefined ? _w : w;\r
- instance.h = h = _h !== undefined ? _h : h;\r
- a = _a !== undefined ? _a : a;\r
- \r
- JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {\r
- left: x,\r
- top: y,\r
- width: w,\r
- height: h\r
- }, 250,\r
- function(){\r
- XBROWSER_BALLOON.resize( a, w, h);\r
+ if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){\r
+ \r
+ } else \r
+ if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){\r
+ return;\r
+ } else \r
+ if( currentIsTextElement === true){\r
+ \r
+ } else \r
+ if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){\r
+ var __x, __y;\r
+ if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){\r
+ // flipH\r
+ __x = _x;\r
+ baseX = _x = _x +_w;\r
+ baseY = _y;\r
+ baseW = _w = __x -_x;\r
+ baseH = _h;\r
+ currentElement.flip( false, true);\r
+ currentResizerIndex = RESIZER.flip( false, true);\r
+ flipV = currentElement.flipV();\r
+ } else \r
+ if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){\r
+ // flipV\r
+ __y = _y;\r
+ baseX = _x;\r
+ baseY = _y = _y +_h;\r
+ baseW = _w;\r
+ baseH = _h = __y -_y;\r
+ currentElement.flip( true, false);\r
+ currentResizerIndex = RESIZER.flip( true, false);\r
+ flipH = currentElement.flipH();\r
+ } else {\r
+ // flipVH\r
+ __x = _x;\r
+ __y = _y;\r
+ baseX = _x = _x +_w;\r
+ baseY = _y = _y +_h;\r
+ baseW = _w = __x -_x;\r
+ baseH = _h = __y -_y;\r
+ currentElement.flip( true, true);\r
+ currentResizerIndex = RESIZER.flip( true, true);\r
+ flipV = currentElement.flipV();\r
+ flipH = currentElement.flipH();\r
+ }\r
+ _updated = true;\r
+ xOffset = _mouseX;\r
+ yOffset = _mouseY; \r
+ }\r
+ currentX = _x;\r
+ currentY = _y;\r
+ currentW = _w;\r
+ currentH = _h;\r
+ _updated === true && update( _x, _y, _w, _h);\r
+ },\r
+ onFinish: function(){\r
+ MOUSE_CURSOR( '');\r
+ if( currentW === w && currentH === h && currentX === x && currentY === y) return;\r
+ resize( transX, transY, transW, transH);\r
+ currentElement.resize( transX, transY, transW, transH);\r
+ saveComicElementStatus( startX, startY, startW, startH, angle, startFilpV, startFilpH);\r
+ },\r
+ onCancel: function(){\r
+ MOUSE_CURSOR( '');\r
+ resize( startX, startY, startW, startH);\r
+ currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+ currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :\r
+ currentElement.animate( startX, startY, startW, startH, angle);\r
+ },\r
+ onShiftUpdate: update,\r
+ onCtrlUpdate: update\r
}\r
- ); \r
- animate !== true && XBROWSER_BALLOON.resize( a, w, h);\r
- }\r
- \r
- function updateType( _type){\r
- if( type !== _type){\r
- type = _type || type;\r
- XBROWSER_BALLOON.type( type);\r
- }\r
- }\r
- function updateAngle( _a){\r
- if( _a !== undefined && a !== _a){\r
- a = _a !== undefined ? _a : a;\r
- XBROWSER_BALLOON.angle( a);\r
- }\r
- }\r
- function updateText( _text){\r
- text = _text || text || '';\r
- TEXT_ELM.html( text);\r
- }\r
- \r
- return h2c.util.extend(\r
- AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, domIndex]),\r
- {\r
- init: function(){\r
- instance = this;\r
- updateText();\r
- update();\r
- delete this.init;\r
- },\r
- angle: function( _a){\r
- _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
- return a;\r
- },\r
- text: function( _text){\r
- if( _text && text !== _text) {\r
- SAVE( updateText, text || '', _text);\r
- updateText( _text);\r
- }\r
- return text;\r
- },\r
- resize: update,\r
- animate: function ( _x, _y, _w, _h, _a){\r
- update( _x, _y, _w, _h, _a, true);\r
- },\r
- destroy: function(){\r
- JQ_WRAPPER.remove();\r
- XBROWSER_BALLOON.destroy();\r
- OPERATOR = null;\r
- delete this.destroy;\r
- },\r
- getAsJSON: function(){\r
- \r
- },\r
- getAsJsonString: function(){\r
- \r
- },\r
- getAsHTML: function(){},\r
- getAsXML: function(){}\r
+ })(),\r
+ POSITION_CONTROLER = ( function(){\r
+ var startX, startY,\r
+ currentX, currentY,\r
+ xOffset, yOffset,\r
+ isCopy = false;\r
\r
- }\r
- );\r
- }\r
- /*\r
- * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。
- */ \r
- function resize( isResizerTopAction){\r
- if( isResizerTopAction === true){\r
- var _shiftX = canvasW -_canvasW,\r
- _shiftY = canvasH -_canvasH,\r
- l = DRAGGABLE_ELEMENT_ARRAY.length;\r
- for( var i = NUM_RESIZER; i < l; i++){\r
- DRAGGABLE_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
- }\r
- }\r
- _canvasW = canvasW;\r
- _canvasH = canvasH;\r
- \r
- comicElementContainer.css( {\r
- width: _canvasW,\r
- height: _canvasH,\r
- top: canvasY,\r
- left: canvasX\r
- });\r
- }\r
- \r
- /*\r
- * append, remove, replace\r
- * \r
- * comicElement には、z-position と dom-index がある。\r
- * z-position は 表示上の位置。大きいほど前に表示される（ z-index）\r
- * dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。\r
- * \r
- * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。\r
- * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。\r
- * \r
- * append comicElement\r
- * 1. 新しい comicElement の z-position を得る\r
- * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（DRAGGABLE_ELEMENT_ARRAY）\r
- * zが大きいほど、DRAGGABLE_ELEMENT_ARRAYの先頭へ。但しNUM_RESIZER番目より下。\r
- * 3. dom位置は、DRAGGABLE_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
- * \r
- * \r
- * remove comicElement\r
- * 1. remove\r
- * 2. renumber z
- */\r
- function appendComicElement( _comicElement) {\r
- _comicElement.init && _comicElement.init();\r
- var z = _comicElement.z,\r
- l = DRAGGABLE_ELEMENT_ARRAY.length;\r
- _comicElement.$.stop().css( {\r
- filter: '',\r
- opacity: ''\r
- });\r
- if( z === undefined || z === NaN || z < 0 || z >= l -NUM_RESIZER){\r
- DRAGGABLE_ELEMENT_ARRAY.splice( NUM_RESIZER, 0, _comicElement);\r
- comicElementContainer.append( _comicElement.$.fadeIn());\r
- } else {\r
- var insertIndex = ( function(){\r
- for( var ret = NUM_RESIZER; ret < l; ++ret){\r
- if( DRAGGABLE_ELEMENT_ARRAY[ ret].z <= z) return ret +1;\r
- }\r
- return NUM_RESIZER;\r
- })();\r
- DRAGGABLE_ELEMENT_ARRAY[ insertIndex -1].$.after( _comicElement.$.fadeIn());\r
- DRAGGABLE_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
- }\r
- sortComicElement();\r
- }\r
- function removeComicElement( _comicElement) {\r
- var l = DRAGGABLE_ELEMENT_ARRAY.length;\r
- for( var i=NUM_RESIZER; i<l; ++i){\r
- if( DRAGGABLE_ELEMENT_ARRAY[ i] === _comicElement){\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
- sortComicElement();\r
- _comicElement.$.stop().css( {\r
- filter: '',\r
- opacity: ''\r
- }).fadeOut( function(){\r
- this.parentNode.removeChild( this);\r
- });\r
- currentElement = currentElement === _comicElement ? null : currentElement;\r
- return;\r
- }\r
- }\r
- }\r
- function restoreComicElement( arg){\r
- var isAppend = arg[ 0],\r
- comicElement = arg[ 1];\r
- isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);\r
- }\r
- /*\r
- * DRAGGABLE_ELEMENT_ARRAY の順番を基準に、zの再計算\r
- * jqElmの並び替え。
- */\r
- function sortComicElement(){\r
- var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
- _comicElement, jqElm, jqNext;\r
- for( var i=NUM_RESIZER; i < l; ++i){\r
- _comicElement = DRAGGABLE_ELEMENT_ARRAY[ i];\r
- jqElm = _comicElement.$;\r
- jqNext && jqNext.before( jqElm);\r
- _comicElement.z = l -i -NUM_RESIZER +1;\r
- jqNext = jqElm;\r
- }\r
- }\r
- function replaceComicElement( _comicElement, goForward){\r
- // DRAGGABLE_ELEMENT_ARRAYの再構築\r
- var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
- i = ( function(){\r
- for( var ret = NUM_RESIZER; ret < l; ++ret){\r
- if( DRAGGABLE_ELEMENT_ARRAY[ ret] === _comicElement) return ret;\r
+ function update( _x, _y){\r
+ _x = currentX = _x !== undefined ? _x : currentX;\r
+ _y = currentY = _y !== undefined ? _y : currentY;\r
+ RESIZER.update( _x, _y);\r
+ currentElement.resize( _x, _y);\r
+ updateInfomation( _x, _y); \r
+ }\r
+ \r
+ return {\r
+ onStart: function( _mouseX, _mouseY){\r
+ xOffset = _mouseX;\r
+ yOffset = _mouseY;\r
+ startX = currentX = x;\r
+ startY = currentY = y;\r
+ MOUSE_CURSOR( 'move');\r
+ },\r
+ onDrag: function( _mouseX, _mouseY){\r
+ var moveX = _mouseX -xOffset,\r
+ moveY = _mouseY -yOffset,\r
+ _x = x +moveX,\r
+ _y = y +moveY;\r
+ if( GRID_ENABLED() === true){\r
+ _x = Math.floor( _x / 10) * 10;\r
+ _y = Math.floor( _y / 10) * 10;\r
+ }\r
+ update( _x, _y);\r
+ },\r
+ onFinish: function(){\r
+ MOUSE_CURSOR( '');\r
+ if( currentX === startX && currentY === startY) return;\r
+ resize( currentX, currentY);\r
+ currentElement.resize( currentX, currentY);\r
+ saveComicElementStatus( startX, startY);\r
+ },\r
+ onCancel: function(){\r
+ MOUSE_CURSOR( '');\r
+ resize( startX, startY);\r
+ currentElement.animate( startX, startY);\r
+ },\r
+ onShiftUpdate: update,\r
+ onCtrlUpdate: update\r
}\r
- return -1;\r
})();\r
- if( i === -1) return;\r
- if( goForward === true){\r
- if( i === NUM_RESIZER) return;\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);\r
- } else {\r
- if( i === l -1) return;\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
- DRAGGABLE_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
- }\r
- sortComicElement();\r
- }\r
- function restoreReplaceObject( arg){\r
- replaceComicElement( arg[ 0], arg[ 1]);\r
- }\r
- \r
- return {\r
- init: function(){\r
- /*\r
- * Resizer\r
- */ \r
- PANEL_RESIZER_TOP.init();\r
- PANEL_RESIZER_BOTTOM.init();\r
- /*\r
- * comic-element
- */\r
- comicElementContainer = $( '#comic-element-container');\r
- \r
- appendComicElement( ImageElementClass.apply( {}, [ 'images/13.gif', 'penchan', 10, 10, 0, 100, 140]));\r
- appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160]));\r
- \r
- COMIC_ELEMENT_OPERATOR.init( updateMouseCursor);\r
- /*\r
- *
- */\r
- log = $( '#operation-catcher-log');\r
\r
- resize();\r
- log.html( 'vector' +h2c.balloon.enabled());\r
- delete COMIC_ELEMENT_CONTROL.init;\r
- },\r
- resize: resize,\r
- onMouseMove: function( _mouseX, _mouseY){\r
- var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
- _X = _mouseX -( _canvasX || canvasX),\r
- _Y = _mouseY -( _canvasY || canvasY),\r
- _elm, _x, _y;\r
- \r
- if( currentElement !== null && currentElement.busy() === true){\r
- currentElement.onMouseMove( _X, _Y);\r
- return true;\r
+ function resize( _x, _y, _w, _h, _angle){\r
+ x = _x !== undefined ? _x : x;\r
+ y = _y !== undefined ? _y : y;\r
+ w = _w !== undefined ? _w : w;\r
+ h = _h !== undefined ? _h : h;\r
+ angle = _angle !== undefined ? _angle : angle;\r
+\r
+ RESIZER.update( x, y, w, h);\r
+ currentIsTextElement === true && TAIL_MOVER.update( w, h, angle);\r
+ COMIC_ELEMENT_CONSOLE.show( currentElement, w, h);\r
+ updateInfomation( x, y, currentElement.z, angle, w, h);\r
}\r
- if( currentElement !== null){\r
- _x = currentElement.hitareaX();\r
- _y = currentElement.hitareaY();\r
- if( _x <= _X && _y <= _Y && _x + currentElement.hitareaW() >= _X && _y +currentElement.hitareaH() >= _Y){\r
- currentElement.onMouseMove( _X, _Y); // cursor\r
- return true;\r
- }\r
+ function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){\r
+ _w = _w !== undefined ? _w : w;\r
+ _h = _h !== undefined ? _h : h;\r
+ INFOMATION(\r
+ currentElement === null ? -1 : currentElement.type,\r
+ _x !== undefined ? _x : x,\r
+ _y !== undefined ? _y : y,\r
+ _z !== undefined ? _z : ( currentElement === null ? '*' : currentElement.z),\r
+ _a !== undefined ? Math.floor( _a) : ( currentIsTextElement === true ? Math.floor( angle) : '-'),\r
+ _w,\r
+ _h,\r
+ currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)),\r
+ currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)),\r
+ currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect\r
+ );\r
}\r
- for( var i=0; i<l; i++){\r
- _elm = DRAGGABLE_ELEMENT_ARRAY[ i];\r
- _x = _elm.hitareaX();\r
- _y = _elm.hitareaY();\r
- // hitTest\r
- if( _x <= _X && _y <= _Y && _x + _elm.hitareaW() >= _X && _y +_elm.hitareaH() >= _Y){\r
- currentElement = _elm;\r
- currentElement.onMouseMove( _X, _Y); // cursor\r
- log.html( [ _X, _Y, _x, _y, i].join( ','));\r
- return true;\r
+ function show( _currentElement){\r
+ currentElement === null && RESIZER.show();\r
+ if( currentElement !== _currentElement){\r
+ currentElement = _currentElement;\r
+ \r
+ currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
+ currentIsTextElement === true ? TAIL_MOVER.show( _currentElement) : TAIL_MOVER.hide();\r
+ \r
+ flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
+ flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
+ \r
+ resize(\r
+ _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,\r
+ currentIsTextElement === true ? _currentElement.angle() : 0\r
+ );\r
}\r
}\r
- currentElement = null; \r
- COMIC_ELEMENT_OPERATOR.hide();\r
- log.html( [ _X, _Y, _x, _y].join( ','));\r
- return false;\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- var ret = currentElement !== null && currentElement.busy() === true;\r
- ret === true && currentElement.onMouseUp( _mouseX -_canvasX || canvasX, _mouseY -_canvasY || canvasY);\r
- _canvasX = _canvasY = NaN;\r
- return ret;\r
- },\r
- onMouseDown: function( _mouseX, _mouseY){\r
- _canvasX = canvasX;\r
- _canvasY = canvasY;\r
- currentElement !== null && currentElement.onMouseDown( _mouseX -canvasX, _mouseY -canvasY);\r
- return currentElement !== null;\r
- },\r
- onMouseClick: function( _mouseX, _mouseY){\r
- return currentElement !== null &&\r
- currentElement !== PANEL_RESIZER_TOP &&\r
- currentElement !== PANEL_RESIZER_BOTTOM &&\r
- COMIC_ELEMENT_OPERATOR.onMouseClick( _mouseX -canvasX, _mouseY -canvasY);\r
- },\r
- onMouseOut: function( _mouseX, _mouseY){\r
- currentElement !== null && currentElement.busy() === true && currentElement.onMouseUp( _mouseX -canvasX, _mouseY -canvasY);\r
- _canvasX = _canvasY = NaN;\r
- currentElement = null;\r
- COMIC_ELEMENT_OPERATOR.hide();\r
- return false;\r
- },\r
- busy: function(){\r
- return currentElement !== null ? currentElement.busy() : false;\r
- },\r
- createImageElement: function( url, imagesetID, x, y, z, w, h){\r
- w = w || 200; //ActualWidth\r
- h = h || 150; //ActualHeight\r
- x = x || Math.floor( canvasW /2 -w /2);\r
- y = y || Math.floor( canvasH /2 -h /2);\r
- IMAGE_GROUP_EXPROLER.show( function( _url, _w, _h){\r
- var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h]);\r
- appendComicElement( _comicElement);\r
- _comicElement.animate( undefined, undefined, _w, _h);\r
- SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
+ function hide(){\r
+ currentElement !== null && RESIZER.hide();\r
+ currentElement = null;\r
+ MOUSE_CURSOR( '');\r
+ TAIL_MOVER.hide();\r
+ COMIC_ELEMENT_CONSOLE.hide();\r
+ updateInfomation();\r
+ }\r
+ function restoreState( arg){\r
+ if( arg && arg.length !== 8) return;\r
+ var _currentElement = arg[ 0],\r
+ _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],\r
+ _a = arg[ 5],\r
+ _flipV = arg[ 6], _flipH = arg[ 7];\r
+ if( !_currentElement) return;\r
+ _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+ _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
+ _currentElement.animate( _x, _y, _w, _h, _a);\r
+ currentControler = null;\r
+ currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);\r
+ }\r
+ function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
+ startX = startX !== undefined ? startX : x;\r
+ startY = startY !== undefined ? startY : y;\r
+ startW = startW !== undefined ? startW : w;\r
+ startH = startH !== undefined ? startH : h;\r
+ startA = startA !== undefined ? startA : angle;\r
+ startFilpV = startFilpV !== undefined ? startFilpV : flipV;\r
+ startFilpH = startFilpH !== undefined ? startFilpH : flipH;\r
+ currentElement && SAVE( restoreState,\r
+ [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],\r
+ [ currentElement, x, y, w, h, angle, flipV, flipH]\r
+ );\r
+ }\r
+ h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 16, true, undefined, function(){\r
+ currentControler !== null && currentControler.onShiftUpdate && currentControler.onShiftUpdate();\r
});\r
- },\r
- createTextElement: function( type, angle, text, x, y, z, w, h){\r
- type = type || 0;\r
- angle = angle || 0;\r
- text = text || '';\r
- w = w || 200;\r
- h = h || 150;\r
- x = x || Math.floor( canvasW /2 -w /2 +Math.random() *10);\r
- y = y || Math.floor( canvasH /2 -h /2 +Math.random() *10);\r
- var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h]);\r
- TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
- appendComicElement( _comicElement);\r
- SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
+ h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 17, undefined, true, function(){\r
+ currentControler !== null && currentControler.onCtrlUpdate && currentControler.onCtrlUpdate();\r
+ });\r
+ h2c.key.addKeyDownEvent( h2c.view.EDITOR, 27, false, false, function(){\r
+ currentControler !== null && currentControler.onCancel && currentControler.onCancel();\r
+ currentControler = null;\r
});\r
+ return {\r
+ init: function(){\r
+ COMIC_ELEMENT_CONSOLE.init();\r
+ hide();\r
+ delete COMIC_ELEMENT_OPERATOR.init;\r
+ },\r
+ hide: hide,\r
+ busy: function(){\r
+ return currentControler !== null;\r
+ },\r
+ hitareaX: function( _comicElement, _x){\r
+ if( _comicElement === currentElement){\r
+ var _consoleX = COMIC_ELEMENT_CONSOLE.x();\r
+ return x +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
+ }\r
+ return _x -HIT_AREA;\r
+ },\r
+ hitareaY: function( _comicElement, _y){\r
+ return _y -HIT_AREA;\r
+ },\r
+ hitareaW: function( _comicElement, _w){\r
+ if( _comicElement === currentElement){\r
+ var _consoleW = COMIC_ELEMENT_CONSOLE.w();\r
+ return ( _consoleW < w ? w : _consoleW) +HIT_AREA *2;\r
+ }\r
+ return _w +HIT_AREA *2;\r
+ },\r
+ hitareaH: function( _comicElement, _h){\r
+ if( _comicElement === currentElement){\r
+ var _consoleY = COMIC_ELEMENT_CONSOLE.y();\r
+ return ( _consoleY < h ? h : _consoleY +COMIC_ELEMENT_CONSOLE.h()) +HIT_AREA *2;\r
+ }\r
+ return _h +HIT_AREA *2;\r
+ },\r
+ onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
+ //show( _currentElement);\r
+ if( currentIsTextElement === true && TAIL_CONTROLER.onStart( _mouseX, _mouseY) === true){\r
+ currentControler = TAIL_CONTROLER;\r
+ } else\r
+ if( RESIZE_CONTROLER.onStart( _mouseX, _mouseY) === true){\r
+ currentControler = RESIZE_CONTROLER;\r
+ } else {\r
+ POSITION_CONTROLER.onStart( _mouseX, _mouseY)\r
+ currentControler = POSITION_CONTROLER;\r
+ }\r
+ },\r
+ onMouseMove: function( _currentElement, _mouseX, _mouseY){\r
+ show( _currentElement);\r
+ if( currentControler !== null){\r
+ currentControler.onDrag( _mouseX, _mouseY); \r
+ } else {\r
+ currentElement && COMIC_ELEMENT_CONSOLE.onMouseMove( _mouseX -x, _mouseY -y);\r
+ TAIL_MOVER.hitTest( _mouseX -x, _mouseY -y) === false && RESIZER.index( _mouseX, _mouseY) === -1 && MOUSE_CURSOR( '');\r
+ }\r
+ },\r
+ onMouseUp: function( _currentElement, _mouseX, _mouseY){\r
+ currentControler !== null && currentControler.onFinish();\r
+ currentControler = null;\r
+ },\r
+ onMouseClick: function( _mouseX, _mouseY){\r
+ //return currentElement ? COMIC_ELEMENT_CONSOLE.onMouseClick( _mouseX -x, _mouseY -y) : false;\r
+ }\r
+ }\r
+ })();\r
+ /*\r
+ * // COMIC_ELEMENT_OPERATOR\r
+ */\r
+ \r
+ var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, domIndex){\r
+ var OPERATOR = COMIC_ELEMENT_OPERATOR;\r
+ return {\r
+ $: JQ_WAPPER,\r
+ type: COMIC_ELM_TYPE,\r
+ x: x,\r
+ y: y,\r
+ w: w,\r
+ h: h, \r
+ z: z,\r
+ domIndex: domIndex,\r
+ hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);},\r
+ hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);},\r
+ hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);},\r
+ hitareaH: function(){ return OPERATOR.hitareaH( this, this.h);},\r
+ shift: function( _shiftX, _shiftY){\r
+ update( this.x +_shiftX, this.y +_shiftY);\r
+ },\r
+ busy: function(){\r
+ return OPERATOR.busy();\r
+ },\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ OPERATOR.onMouseUp( this, _mouseX, _mouseY);\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ OPERATOR.onMouseDown( this, _mouseX, _mouseY);\r
+ }\r
}\r
- }\r
- })( resize);\r
- \r
- /*\r
- *
- */\r
- function resize( isResizerTopAction){\r
- GRID_CONTROL.resize();\r
- WHITE_GLASS_CONTROL.resize();\r
- PANEL_BORDER_CONTROL.resize();\r
- COMIC_ELEMENT_CONTROL.resize( isResizerTopAction);\r
- }\r
- return {\r
- init: function( _canvasW, _canvasH){\r
- canvasW = _canvasW || DEFAULT_PANEL_WIDTH;\r
- canvasH = _canvasH || DEFAULT_PANEL_HEIGHT;\r
- canvasX = Math.floor( ( windowW -canvasW) /2);\r
- canvasY = Math.floor( ( windowH -canvasH) /2);\r
+ };\r
+ /*\r
+ * --------------------------------------------------------------------------------------------\r
+ * ImageElementClass\r
+ */\r
+ var jqImageElementOrigin;\r
+ var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, domIndex){\r
+ jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
\r
- GRID_CONTROL.init();\r
- // WHITE_GLASS_CONTROL.init();\r
- PANEL_BORDER_CONTROL.init();\r
- COMIC_ELEMENT_CONTROL.init();\r
+ var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
+ OPERATOR = COMIC_ELEMENT_OPERATOR,\r
+ SAVE = HISTORY.saveState,\r
+ HIT_AREA = MOUSE_HIT_AREA,\r
+ reversibleImage = null,\r
+ actualW = 0, actualH = 0,\r
+ flipH = w < 0 ? -1 : 1,\r
+ flipV = h < 0 ? -1 : 1,\r
+ instance;\r
+ w = Math.floor( w);\r
+ h = Math.floor( h);\r
\r
- resize();\r
+ function update( _x, _y, _w, _h, animate){\r
+ instance.x = x = _x !== undefined ? _x : x;\r
+ instance.y = y = _y !== undefined ? _y : y;\r
+ instance.w = w = _w !== undefined ? _w : w;\r
+ instance.h = h = _h !== undefined ? _h : h;\r
+ JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { \r
+ left: x,\r
+ top: y,\r
+ width: w,\r
+ height: h\r
+ }, 250, function(){ reversibleImage.resize( flipH * w, flipV * h);});\r
+ animate !== true && reversibleImage.resize( flipH * w, flipV * h);\r
+ }\r
\r
- h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 32, false, false, function( e){\r
- if( e.type === 'keyup'){\r
- currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && updateMouseCursor( ''); \r
- isCanvasDraggble = false;\r
+ function updateUrl( _url){\r
+ if( url === _url) return;\r
+ url = _url || url;\r
+ var _reversibleImage = h2c.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){\r
+ actualW = _actualW;\r
+ actualH = _actualH;\r
+ });\r
+ if( reversibleImage !== null){\r
+ JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);\r
+ reversibleImage.destroy();\r
} else {\r
- currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && updateMouseCursor( 'move');\r
- isCanvasDraggble = true;\r
+ JQ_WRAPPER.append( _reversibleImage.elm);\r
}\r
- });\r
- delete CANVAS_CONTROL.init;\r
- },\r
- x: function(){ return canvasX;},\r
- y: function(){ return canvasY;},\r
- onWindowResize: function( _windowW, _windowH){\r
- canvasX = Math.floor(( _windowW - canvasW) / 2);\r
- canvasY = Math.floor(( _windowH - canvasH) / 2);\r
- resize();\r
- },\r
- onMouseMove: function( _mouseX, _mouseY){\r
- if( currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && isCanvasDraggble === true && isDragging === true){\r
- canvasX = startCanvasX +_mouseX -xOffset;\r
- canvasY = startCanvasY +_mouseY -yOffset;\r
- resize();\r
- } else {\r
- COMIC_ELEMENT_CONTROL.onMouseMove( _mouseX, _mouseY)\r
- }\r
- },\r
- onMouseUp: function( _mouseX, _mouseY){\r
- if( COMIC_ELEMENT_CONTROL.onMouseUp( _mouseX, _mouseY) === false && isCanvasDraggble === true){\r
- isDragging = false;\r
- updateMouseCursor( '');\r
- }\r
- },\r
- onMouseDown: function( _mouseX, _mouseY){\r
- if( COMIC_ELEMENT_CONTROL.onMouseDown( _mouseX, _mouseY) === false && isCanvasDraggble === true){\r
- xOffset = _mouseX;\r
- yOffset = _mouseY;\r
- startCanvasX = canvasX;\r
- startCanvasY = canvasY;\r
- isDragging = true;\r
- updateMouseCursor( 'move');\r
- }\r
- },\r
- onMouseClick: function( _mouseX, _mouseY){\r
- COMIC_ELEMENT_CONTROL.onMouseClick( _mouseX, _mouseY)\r
- },\r
- onMouseOut: function( _mouseX, _mouseY){\r
- if( COMIC_ELEMENT_CONTROL.onMouseOut( _mouseX, _mouseY) === false){\r
- \r
+ reversibleImage = _reversibleImage;\r
}\r
- },\r
- busy: function(){\r
- return isDragging === true || COMIC_ELEMENT_CONTROL.busy();\r
- },\r
- createImageElement: function( url, imagesetID, x, y, z, w, h){\r
- COMIC_ELEMENT_CONTROL.createImageElement( url, imagesetID, x, y, z, w, h);\r
- },\r
- createTextElement: function( type, angle, text, x, y, w, h, z){\r
- COMIC_ELEMENT_CONTROL.createTextElement( type, angle, text, x, y, w, h, z);\r
+ return h2c.util.extend(\r
+ AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, domIndex]),\r
+ {\r
+ init: function(){\r
+ instance = this;\r
+ updateUrl();\r
+ update();\r
+ delete this.init;\r
+ },\r
+ flip: function( _flipH, _flipV){\r
+ if( _flipH !== true && _flipV !== true) return;\r
+ flipH = _flipH === true ? -flipH : flipH;\r
+ flipV = _flipV === true ? -flipV : flipV;\r
+ reversibleImage.resize( flipH * w, flipV * h);\r
+ },\r
+ flipV: function(){\r
+ return flipV;\r
+ },\r
+ flipH: function(){\r
+ return flipH;\r
+ },\r
+ url: function( _url, _actualW, _actualH){\r
+ if( _url && _url !== url){\r
+ SAVE( updateUrl, url, _url);\r
+ actualW = _actualW;\r
+ actualH = _actualH;\r
+ updateUrl( _url);\r
+ }\r
+ return url;\r
+ },\r
+ actualW: function(){ return actualW;},\r
+ actualH: function(){ return actualH;},\r
+ keepSize: false,\r
+ resize: update,\r
+ animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
+ flipH = _flipH !== undefined ? _flipH : flipH;\r
+ flipV = _flipV !== undefined ? _flipV : flipV;\r
+ update( _x, _y, _w, _h, true);\r
+ },\r
+ getAsHtml: function(){\r
+ \r
+ },\r
+ getAsJson: function(){\r
+ \r
+ },\r
+ destroy: function(){\r
+ reversibleImage.destroy();\r
+ JQ_WRAPPER.remove();\r
+ JQ_WRAPPER = reversibleImage = OPERATOR = null;\r
+ delete this.destroy;\r
+ }\r
+ }\r
+ );\r
}\r
- }\r
- })();\r
+ /*\r
+ * / ImageElementClass\r
+ * --------------------------------------------------------------------------------------------\r
+ */\r
\r
-/* ----------------------------------------\r
- * Text Editor (Overlay)
- */\r
- \r
- var TEXT_EDITOR_CONTROL = ( function(){\r
- var jqWrap, jqTextarea, jqButton,\r
- textElement, onUpdateFunction;\r
- \r
- h2c.key.addKeyDownEvent( this.ID, 69, false, false, clickOK);\r
- \r
- function close(){\r
- jqWrap.hide();\r
- textElement = onUpdateFunction = null; \r
- }\r
- function clickOK(){\r
- h2c.overlay.hide();\r
- textElement && textElement.text( jqTextarea.val());\r
- onUpdateFunction && onUpdateFunction( textElement);\r
- close(); \r
- }\r
- return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
- jqTextarea = $( '#speach-editor').keydown( function( e){\r
- if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
- clickOK();\r
- e.preventDefault();\r
- e.keyCode = 0;\r
- e.cancelBubble = true;\r
- e.returnValue = false;\r
- return false;\r
- }\r
- });\r
- jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
- delete TEXT_EDITOR_CONTROL.init;\r
- },\r
- jqWrap: null,\r
- show: function( _textElement, _onUpdateFunction){\r
- textElement = _textElement;\r
- onUpdateFunction = _onUpdateFunction || null;\r
- h2c.overlay.show( this);\r
- var h = _textElement.h;\r
- jqWrap.show().css( {\r
- left: _textElement.x +CANVAS_CONTROL.x(),\r
- top: _textElement.y +CANVAS_CONTROL.y(),\r
- width: _textElement.w,\r
- height: h\r
- });\r
- jqTextarea.val( _textElement.text()).focus();\r
+\r
+ /*\r
+ * --------------------------------------------------------------------------------------------\r
+ * TextElementClass\r
+ * \r
+ * ELM はh2c.domで書き出したものを突っ込むcreateの場合\r
+ * \r
+ * type\r
+ * 0.none\r
+ * 1.speach balloon\r
+ * 2.think\r
+ * 3.bom\r
+ * 4.black-box( dq style)\r
+ * 5.blue-box( ff style)\r
+ * \r
+ */\r
+ var jqTextElementOrigin;\r
+ var TextElementClass = function( type, a, text, x, y, z, w, h, domIndex){\r
+ jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
+ var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
+ _MODERN = $( $( '#textElementTemplete').remove().html());\r
+ return h2c.isIE === true && h2c.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;\r
+ })();\r
\r
- /*\r
- * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。
- */\r
- h2c.isIE === true && h2c.ieVersion <= 7 && setTimeout( function(){\r
- var rows = 0;\r
- while( jqTextarea.height() < h){\r
- rows++;\r
- jqTextarea.attr( 'rows', rows);\r
+ var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
+ XBROWSER_BALLOON = h2c.balloon.createBalloon( w, h, a, type),\r
+ TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
+ OPERATOR = COMIC_ELEMENT_OPERATOR,\r
+ HIT_AREA = MOUSE_HIT_AREA,\r
+ SAVE = HISTORY.saveState,\r
+ instance;\r
+ \r
+ JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);\r
+ \r
+ function update( _x, _y, _w, _h, _a, animate){\r
+ instance.x = x = _x !== undefined ? _x : x;\r
+ instance.y = y = _y !== undefined ? _y : y;\r
+ instance.w = w = _w !== undefined ? _w : w;\r
+ instance.h = h = _h !== undefined ? _h : h;\r
+ a = _a !== undefined ? _a : a;\r
+ \r
+ JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {\r
+ left: x,\r
+ top: y,\r
+ width: w,\r
+ height: h\r
+ }, 250,\r
+ function(){\r
+ XBROWSER_BALLOON.resize( a, w, h);\r
+ }\r
+ ); \r
+ animate !== true && XBROWSER_BALLOON.resize( a, w, h);\r
+ }\r
+ \r
+ function updateType( _type){\r
+ if( type !== _type){\r
+ type = _type || type;\r
+ XBROWSER_BALLOON.type( type);\r
}\r
- rows > 1 && jqTextarea.attr( 'rows', rows -1);\r
- }, 0);\r
- },\r
- onWindowResize: function(){\r
- textElement && this.show( textElement);\r
- },\r
- onClose: close,\r
- ID: 'textEditor'\r
- }\r
- })();\r
-\r
-/* ----------------------------------------\r
- * Image Group Exproler (Overlay)\r
- */\r
- var IMAGE_GROUP_EXPROLER = ( function(){\r
- var ICON_ARRAY = [],\r
- WHEEL_DELTA = 64,\r
- containerW, containerH, wrapX,\r
- jqWrap, jqContainer, jqItemOrigin,\r
- itemW, itemH,\r
- jqName, jqButton, buttonW,\r
- onUpdateFunction,\r
- winW,\r
- onEnterInterval = null;\r
- \r
- var BASE_PATH = h2c.LOCAL === false ? 'http://pettan.heroku.com/images/' : 'images/',\r
- THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
- LIMIT_FILESIZE = 1024 * 10; // 10KB\r
- var IMAGE_DATA = {\r
- pen001: [\r
- {\r
- "created_at": "2011-11-13T08:57:39Z", \r
- "ext": "png", \r
- "filesize": 9969, \r
- "height": 463, \r
- "id": 1, \r
- "updated_at": "2011-11-13T08:57:39Z", \r
- "width": 441\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:57:54Z", \r
- "ext": "gif", \r
- "filesize": 5418, \r
- "height": 500, \r
- "id": 2, \r
- "updated_at": "2011-11-13T08:57:54Z", \r
- "width": 500\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:06Z", \r
- "ext": "gif", \r
- "filesize": 8758, \r
- "height": 464, \r
- "id": 3, \r
- "updated_at": "2011-11-13T08:58:06Z", \r
- "width": 366\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:23Z", \r
- "ext": "gif", \r
- "filesize": 9383, \r
- "height": 480, \r
- "id": 4, \r
- "updated_at": "2011-11-13T08:58:23Z", \r
- "width": 392\r
- }, \r
- {\r
- "created_at": "2011-11-13T08:58:33Z", \r
- "ext": "gif", \r
- "filesize": 11061, \r
- "height": 500, \r
- "id": 5, \r
- "updated_at": "2011-11-13T08:58:33Z", \r
- "width": 500\r
- }, \r
- {\r
- "created_at": "2011-11-20T09:50:43Z", \r
- "ext": "gif", \r
- "filesize": 1131, \r
- "height": 126, \r
- "id": 6, \r
- "updated_at": "2011-11-20T09:50:43Z", \r
- "width": 259\r
- }, \r
- {\r
- "created_at": "2011-11-20T09:50:55Z", \r
- "ext": "gif", \r
- "filesize": 1125, \r
- "height": 126, \r
- "id": 7, \r
- "updated_at": "2011-11-20T09:50:55Z", \r
- "width": 259\r
- }, \r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 8, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 9, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 10, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-20T11:33:12Z", \r
- "ext": "gif", \r
- "filesize": 17919, \r
- "height": 600, \r
- "id": 11, \r
- "updated_at": "2011-11-20T11:33:12Z", \r
- "width": 800\r
- },\r
- {\r
- "created_at": "2011-11-22T09:17:20Z", \r
- "ext": "gif", \r
- "filesize": 9055, \r
- "height": 473, \r
- "id": 12, \r
- "updated_at": "2011-11-22T09:17:20Z", \r
- "width": 405\r
- }, \r
- {\r
- "created_at": "2011-11-22T10:11:07Z", \r
- "ext": "gif", \r
- "filesize": 8758, \r
- "height": 464, \r
- "id": 13, \r
- "updated_at": "2011-11-22T10:11:07Z", \r
- "width": 366\r
- }, \r
- {\r
- "created_at": "2011-11-24T09:05:12Z", \r
- "ext": "gif", \r
- "filesize": 6431, \r
- "height": 386, \r
- "id": 16, \r
- "updated_at": "2011-11-24T09:05:12Z", \r
- "width": 453\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 17, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 18, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 19, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 20, \r
- "updated_at": "2011-11-26T04:52:12Z", \r
- "width": 306\r
- }, \r
- {\r
- "created_at": "2011-11-26T04:52:12Z",\r
- "ext": "gif", \r
- "filesize": 6421, \r
- "height": 426, \r
- "id": 21, \r
- "updated_at": "2011-11-26T04:52:12Z",\r
- "width": 306\r
- }\r
- ]\r
+ }\r
+ function updateAngle( _a){\r
+ if( _a !== undefined && a !== _a){\r
+ a = _a !== undefined ? _a : a;\r
+ XBROWSER_BALLOON.angle( a);\r
+ }\r
+ }\r
+ function updateText( _text){\r
+ text = _text || text || '';\r
+ TEXT_ELM.html( text);\r
+ }\r
+ \r
+ return h2c.util.extend(\r
+ AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, domIndex]),\r
+ {\r
+ init: function(){\r
+ instance = this;\r
+ updateText();\r
+ update();\r
+ delete this.init;\r
+ },\r
+ angle: function( _a){\r
+ _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
+ return a;\r
+ },\r
+ text: function( _text){\r
+ if( _text && text !== _text) {\r
+ SAVE( updateText, text || '', _text);\r
+ updateText( _text);\r
+ }\r
+ return text;\r
+ },\r
+ resize: update,\r
+ animate: function ( _x, _y, _w, _h, _a){\r
+ update( _x, _y, _w, _h, _a, true);\r
+ },\r
+ destroy: function(){\r
+ JQ_WRAPPER.remove();\r
+ XBROWSER_BALLOON.destroy();\r
+ OPERATOR = null;\r
+ delete this.destroy;\r
+ },\r
+ getAsJSON: function(){\r
+ \r
+ },\r
+ getAsJsonString: function(){\r
+ \r
+ },\r
+ getAsHTML: function(){},\r
+ getAsXML: function(){}\r
+ \r
+ }\r
+ );\r
+ }\r
+ /*\r
+ * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。\r
+ */ \r
+ function resize( isResizerTopAction){\r
+ if( isResizerTopAction === true){\r
+ var _shiftX = canvasW -_canvasW,\r
+ _shiftY = canvasH -_canvasH,\r
+ l = DRAGGABLE_ELEMENT_ARRAY.length;\r
+ for( var i = NUM_RESIZER; i < l; i++){\r
+ DRAGGABLE_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
+ }\r
+ }\r
+ _canvasW = canvasW;\r
+ _canvasH = canvasH;\r
+ \r
+ comicElementContainer.css( {\r
+ width: _canvasW,\r
+ height: _canvasH,\r
+ top: canvasY,\r
+ left: canvasX\r
+ });\r
}\r
\r
- var ImageGroupIconClass = function( INDEX, data){\r
- var JQ_ICON_WRAP = jqItemOrigin.clone( true),\r
- SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),\r
- LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,\r
- reversibleImage = null,\r
- onEnterFlag = false;\r
- JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
- jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
+ /*\r
+ * append, remove, replace\r
+ * \r
+ * comicElement には、z-position と dom-index がある。\r
+ * z-position は 表示上の位置。大きいほど前に表示される（ z-index）\r
+ * dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。\r
+ * \r
+ * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。\r
+ * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。\r
+ * \r
+ * append comicElement\r
+ * 1. 新しい comicElement の z-position を得る\r
+ * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（DRAGGABLE_ELEMENT_ARRAY）\r
+ * zが大きいほど、DRAGGABLE_ELEMENT_ARRAYの先頭へ。但しNUM_RESIZER番目より下。\r
+ * 3. dom位置は、DRAGGABLE_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
+ * \r
+ * \r
+ * remove comicElement\r
+ * 1. remove\r
+ * 2. renumber z\r
+ */\r
+ function appendComicElement( _comicElement) {\r
+ _comicElement.init && _comicElement.init();\r
+ var z = _comicElement.z,\r
+ l = DRAGGABLE_ELEMENT_ARRAY.length;\r
+ _comicElement.$.stop().css( {\r
+ filter: '',\r
+ opacity: ''\r
+ });\r
+ if( z === undefined || z === NaN || z < 0 || z >= l -NUM_RESIZER){\r
+ DRAGGABLE_ELEMENT_ARRAY.splice( NUM_RESIZER, 0, _comicElement);\r
+ comicElementContainer.append( _comicElement.$.fadeIn());\r
+ } else {\r
+ var insertIndex = ( function(){\r
+ for( var ret = NUM_RESIZER; ret < l; ++ret){\r
+ if( DRAGGABLE_ELEMENT_ARRAY[ ret].z <= z) return ret +1;\r
+ }\r
+ return NUM_RESIZER;\r
+ })();\r
+ DRAGGABLE_ELEMENT_ARRAY[ insertIndex -1].$.after( _comicElement.$.fadeIn());\r
+ DRAGGABLE_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
+ }\r
+ sortComicElement();\r
+ }\r
+ function removeComicElement( _comicElement) {\r
+ var l = DRAGGABLE_ELEMENT_ARRAY.length;\r
+ for( var i=NUM_RESIZER; i<l; ++i){\r
+ if( DRAGGABLE_ELEMENT_ARRAY[ i] === _comicElement){\r
+ DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
+ sortComicElement();\r
+ _comicElement.$.stop().css( {\r
+ filter: '',\r
+ opacity: ''\r
+ }).fadeOut( function(){\r
+ this.parentNode.removeChild( this);\r
+ });\r
+ currentElement = currentElement === _comicElement ? null : currentElement;\r
+ return;\r
+ }\r
+ }\r
+ }\r
+ function restoreComicElement( arg){\r
+ var isAppend = arg[ 0],\r
+ comicElement = arg[ 1];\r
+ isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);\r
+ }\r
+ /*\r
+ * DRAGGABLE_ELEMENT_ARRAY の順番を基準に、zの再計算\r
+ * jqElmの並び替え。\r
+ */\r
+ function sortComicElement(){\r
+ var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ _comicElement, jqElm, jqNext;\r
+ for( var i=NUM_RESIZER; i < l; ++i){\r
+ _comicElement = DRAGGABLE_ELEMENT_ARRAY[ i];\r
+ jqElm = _comicElement.$;\r
+ jqNext && jqNext.before( jqElm);\r
+ _comicElement.z = l -i -NUM_RESIZER +1;\r
+ jqNext = jqElm;\r
+ }\r
+ }\r
+ function replaceComicElement( _comicElement, goForward){\r
+ // DRAGGABLE_ELEMENT_ARRAYの再構築\r
+ var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ i = ( function(){\r
+ for( var ret = NUM_RESIZER; ret < l; ++ret){\r
+ if( DRAGGABLE_ELEMENT_ARRAY[ ret] === _comicElement) return ret;\r
+ }\r
+ return -1;\r
+ })();\r
+ if( i === -1) return;\r
+ if( goForward === true){\r
+ if( i === NUM_RESIZER) return;\r
+ DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
+ DRAGGABLE_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);\r
+ } else {\r
+ if( i === l -1) return;\r
+ DRAGGABLE_ELEMENT_ARRAY.splice( i, 1);\r
+ DRAGGABLE_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
+ }\r
+ sortComicElement();\r
+ }\r
+ function restoreReplaceObject( arg){\r
+ replaceComicElement( arg[ 0], arg[ 1]);\r
+ }\r
\r
return {\r
- onEnter: function(){\r
- if( onEnterFlag === true) return;\r
- reversibleImage = h2c.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, function( url, imgW, imgH){\r
- if( reversibleImage === null) {\r
- alert( url);\r
- return;\r
+ init: function(){\r
+ /*\r
+ * Resizer\r
+ */ \r
+ PANEL_RESIZER_TOP.init();\r
+ PANEL_RESIZER_BOTTOM.init();\r
+ /*\r
+ * comic-element\r
+ */\r
+ comicElementContainer = $( '#comic-element-container');\r
+ \r
+ appendComicElement( ImageElementClass.apply( {}, [ 'images/13.gif', 'penchan', 10, 10, 0, 100, 140]));\r
+ appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160]));\r
+ \r
+ COMIC_ELEMENT_OPERATOR.init( updateMouseCursor);\r
+ /*\r
+ * \r
+ */\r
+ log = $( '#operation-catcher-log');\r
+\r
+ resize();\r
+ log.html( 'vector' +h2c.balloon.enabled());\r
+ delete COMIC_ELEMENT_CONTROL.init;\r
+ },\r
+ resize: resize,\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ var l = DRAGGABLE_ELEMENT_ARRAY.length,\r
+ _X = _mouseX -( _canvasX || canvasX),\r
+ _Y = _mouseY -( _canvasY || canvasY),\r
+ _elm, _x, _y;\r
+ \r
+ if( currentElement !== null && currentElement.busy() === true){\r
+ currentElement.onMouseMove( _X, _Y);\r
+ return true;\r
+ }\r
+ if( currentElement !== null){\r
+ _x = currentElement.hitareaX();\r
+ _y = currentElement.hitareaY();\r
+ if( _x <= _X && _y <= _Y && _x + currentElement.hitareaW() >= _X && _y +currentElement.hitareaH() >= _Y){\r
+ currentElement.onMouseMove( _X, _Y); // cursor\r
+ return true;\r
}\r
- /*\r
- * ieでサイズが取れない、、、
- */\r
- imgW = imgW || data.width || 64;\r
- imgH = imgH || data.height || 64;\r
- JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
- var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
- h = Math.floor( imgH *zoom),\r
- w = Math.floor( imgW *zoom);\r
- reversibleImage.elm.style.width = w +'px';\r
- reversibleImage.elm.style.height = h +'px';\r
- reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
- reversibleImage.resize( w, h);\r
- JQ_ICON_WRAP.click( function( e){\r
- h2c.overlay.hide();\r
- if (onUpdateFunction) {\r
- if( LOW_SRC === null){\r
- onUpdateFunction( SRC, imgW, imgH);\r
- } else {\r
- ( function( onUpdate){\r
- h2c.util.loadImage( SRC,\r
- function( _abspath, imgW, imgH){\r
- onUpdate( SRC, imgW, imgH);\r
- onUpdate = null;\r
- },\r
- function( _abspath){\r
- onUpdate( SRC, data.width || 64, data.height || 64);\r
- onUpdate = null;\r
- }\r
- ); \r
- })( onUpdateFunction); // close()で値が消えるので、クロージャに保持\r
- }\r
- }\r
- close();\r
- });\r
+ }\r
+ for( var i=0; i<l; i++){\r
+ _elm = DRAGGABLE_ELEMENT_ARRAY[ i];\r
+ _x = _elm.hitareaX();\r
+ _y = _elm.hitareaY();\r
+ // hitTest\r
+ if( _x <= _X && _y <= _Y && _x + _elm.hitareaW() >= _X && _y +_elm.hitareaH() >= _Y){\r
+ currentElement = _elm;\r
+ currentElement.onMouseMove( _X, _Y); // cursor\r
+ log.html( [ _X, _Y, _x, _y, i].join( ','));\r
+ return true;\r
+ }\r
+ }\r
+ currentElement = null; \r
+ COMIC_ELEMENT_OPERATOR.hide();\r
+ log.html( [ _X, _Y, _x, _y].join( ','));\r
+ return false;\r
+ },\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ var ret = currentElement !== null && currentElement.busy() === true;\r
+ ret === true && currentElement.onMouseUp( _mouseX -_canvasX || canvasX, _mouseY -_canvasY || canvasY);\r
+ _canvasX = _canvasY = NaN;\r
+ return ret;\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ _canvasX = canvasX;\r
+ _canvasY = canvasY;\r
+ currentElement !== null && currentElement.onMouseDown( _mouseX -canvasX, _mouseY -canvasY);\r
+ return currentElement !== null;\r
+ },\r
+ onMouseClick: function( _mouseX, _mouseY){\r
+ return currentElement !== null &&\r
+ currentElement !== PANEL_RESIZER_TOP &&\r
+ currentElement !== PANEL_RESIZER_BOTTOM &&\r
+ COMIC_ELEMENT_OPERATOR.onMouseClick( _mouseX -canvasX, _mouseY -canvasY);\r
+ },\r
+ onMouseOut: function( _mouseX, _mouseY){\r
+ currentElement !== null && currentElement.busy() === true && currentElement.onMouseUp( _mouseX -canvasX, _mouseY -canvasY);\r
+ _canvasX = _canvasY = NaN;\r
+ currentElement = null;\r
+ COMIC_ELEMENT_OPERATOR.hide();\r
+ return false;\r
+ },\r
+ busy: function(){\r
+ return currentElement !== null ? currentElement.busy() : false;\r
+ },\r
+ createImageElement: function( url, imagesetID, x, y, z, w, h){\r
+ w = w || 200; //ActualWidth\r
+ h = h || 150; //ActualHeight\r
+ x = x || Math.floor( canvasW /2 -w /2);\r
+ y = y || Math.floor( canvasH /2 -h /2);\r
+ IMAGE_GROUP_EXPROLER.show( function( _url, _w, _h){\r
+ var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h]);\r
+ appendComicElement( _comicElement);\r
+ _comicElement.animate( undefined, undefined, _w, _h);\r
+ SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
});\r
- JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
- onEnterFlag = true; \r
},\r
- destroy: function(){\r
- reversibleImage && reversibleImage.destroy();\r
- JQ_ICON_WRAP.remove();\r
- reversibleImage = JQ_ICON_WRAP = null;\r
- delete this.destroy;\r
+ createTextElement: function( type, angle, text, x, y, z, w, h){\r
+ type = type || 0;\r
+ angle = angle || 0;\r
+ text = text || '';\r
+ w = w || 200;\r
+ h = h || 150;\r
+ x = x || Math.floor( canvasW /2 -w /2 +Math.random() *10);\r
+ y = y || Math.floor( canvasH /2 -h /2 +Math.random() *10);\r
+ var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h]);\r
+ TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
+ appendComicElement( _comicElement);\r
+ SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
+ });\r
}\r
}\r
- }\r
- \r
- function close(){\r
- jqContainer.stop().animate( {\r
- height: 0,\r
- top: Math.floor( windowH /2)\r
- }, function(){\r
- jqWrap.hide()\r
- });\r
- while( ICON_ARRAY.length > 0){\r
- ICON_ARRAY.shift().destroy();\r
- }\r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onUpdateFunction = onEnterInterval = null;\r
- }\r
- function onEnterShowImage(){\r
- var l = ICON_ARRAY.length,\r
- _start = -wrapX /itemW -1,\r
- _end = _start + winW /itemW +1;\r
- for( var i=0; i<l; ++i){\r
- _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
- }\r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = null;\r
- }\r
- function clickOK(){\r
- h2c.overlay.hide();\r
- // onUpdateFunction && onUpdateFunction( textElement);\r
- close();\r
+ })( resize);\r
+ \r
+ /*\r
+ * \r
+ */\r
+ function resize( isResizerTopAction){\r
+ GRID_CONTROL.resize();\r
+ WHITE_GLASS_CONTROL.resize();\r
+ PANEL_BORDER_CONTROL.resize();\r
+ COMIC_ELEMENT_CONTROL.resize( isResizerTopAction);\r
}\r
return {\r
- init: function(){\r
- this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
- jqContainer = $( '#image-icon-container').mousewheel(\r
- function( e, delta){\r
- if( winW < containerW){\r
- wrapX += delta *WHEEL_DELTA;\r
- wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
- jqContainer.css( { left: wrapX});\r
- \r
- onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
- onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
- }\r
- //e.stopPropagation();\r
- return false;\r
- });\r
- containerH = h2c.util.getElementSize( jqContainer.get( 0)).height;\r
- jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
- var itemSize = h2c.util.getElementSize( jqItemOrigin.get( 0));\r
- itemW = itemSize.width;\r
- itemH = itemSize.height;\r
- jqName = $( '#gruop-name-display');\r
- jqButton = $( '#image-gruop-button').click( clickOK);\r
- buttonW = h2c.util.getElementSize( jqButton.get( 0)).width;\r
- \r
- delete IMAGE_GROUP_EXPROLER.init;\r
- },\r
- jqWrap: null,\r
- show: function( _onUpdateFunction){\r
- onUpdateFunction = _onUpdateFunction;\r
- h2c.overlay.show( this);\r
- \r
- var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],\r
- l = CURRENT_GROUP_ARRAY.length;\r
- for( var i=0; i<l; ++i){\r
- ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));\r
- }\r
- wrapX = 0;\r
- containerW = l * itemW;\r
+ init: function( _canvasW, _canvasH){\r
+ canvasW = _canvasW || DEFAULT_PANEL_WIDTH;\r
+ canvasH = _canvasH || DEFAULT_PANEL_HEIGHT;\r
+ canvasX = Math.floor( ( windowW -canvasW) /2);\r
+ canvasY = Math.floor( ( windowH -canvasH) /2);\r
\r
- winW = windowW;\r
- var w = winW > containerW ? winW : containerW,\r
- h = windowH > containerH ? containerH : windowH;\r
+ GRID_CONTROL.init();\r
+ // WHITE_GLASS_CONTROL.init();\r
+ PANEL_BORDER_CONTROL.init();\r
+ COMIC_ELEMENT_CONTROL.init();\r
\r
- jqWrap.show();\r
- jqContainer.css( {\r
- width: w,\r
- height: 0,\r
- left: 0,\r
- top: Math.floor( windowH /2)\r
- }).stop().animate( {\r
- height: h,\r
- top: Math.floor( windowH /2 -h /2)\r
- });\r
+ resize();\r
\r
- jqButton.css( {\r
- left: Math.floor( winW /2 -buttonW /2),\r
- top: Math.floor( windowH /2 +containerH /2 +10)\r
+ h2c.key.addKeyUpdateEvent( h2c.view.EDITOR, 32, false, false, function( e){\r
+ if( e.type === 'keyup'){\r
+ currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && updateMouseCursor( ''); \r
+ isCanvasDraggble = false;\r
+ } else {\r
+ currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && updateMouseCursor( 'move');\r
+ isCanvasDraggble = true;\r
+ }\r
});\r
- \r
- onEnterShowImage();\r
+ delete CANVAS_CONTROL.init;\r
},\r
+ x: function(){ return canvasX;},\r
+ y: function(){ return canvasY;},\r
onWindowResize: function( _windowW, _windowH){\r
- var w = _windowW > containerW ? _windowW : containerW,\r
- h = _windowH > containerH ? containerH : _windowH,\r
- offsetW = Math.floor( _windowW /2 -winW /2);\r
- winW = _windowW;\r
- if( offsetW <= 0){ // smaller\r
- jqContainer.css( {\r
- left: offsetW,\r
- width: w\r
- }).animate( {\r
- left: 0,\r
- top: Math.floor( _windowH /2 -h /2)\r
- }); \r
+ canvasX = Math.floor(( _windowW - canvasW) / 2);\r
+ canvasY = Math.floor(( _windowH - canvasH) / 2);\r
+ resize();\r
+ },\r
+ onMouseMove: function( _mouseX, _mouseY){\r
+ if( currentListener === null && COMIC_ELEMENT_CONTROL.busy() === false && isCanvasDraggble === true && isDragging === true){\r
+ canvasX = startCanvasX +_mouseX -xOffset;\r
+ canvasY = startCanvasY +_mouseY -yOffset;\r
+ resize();\r
} else {\r
- jqContainer.css( { // bigger\r
- left: 0,\r
- width: w,\r
- borderLeftWidth: offsetW\r
- }).animate( {\r
- top: Math.floor( _windowH /2 -h /2),\r
- borderLeftWidth: 0\r
- });\r
+ COMIC_ELEMENT_CONTROL.onMouseMove( _mouseX, _mouseY)\r
}\r
- jqButton.css( {\r
- left: Math.floor( _windowW /2 -buttonW /2),\r
- top: Math.floor( _windowH /2 +containerH /2 +10)\r
- });\r
- onEnterShowImage();\r
},\r
- onClose: close,\r
- ID: 'imageGroupExproler'\r
+ onMouseUp: function( _mouseX, _mouseY){\r
+ if( COMIC_ELEMENT_CONTROL.onMouseUp( _mouseX, _mouseY) === false && isCanvasDraggble === true){\r
+ isDragging = false;\r
+ updateMouseCursor( '');\r
+ }\r
+ },\r
+ onMouseDown: function( _mouseX, _mouseY){\r
+ if( COMIC_ELEMENT_CONTROL.onMouseDown( _mouseX, _mouseY) === false && isCanvasDraggble === true){\r
+ xOffset = _mouseX;\r
+ yOffset = _mouseY;\r
+ startCanvasX = canvasX;\r
+ startCanvasY = canvasY;\r
+ isDragging = true;\r
+ updateMouseCursor( 'move');\r
+ }\r
+ },\r
+ onMouseClick: function( _mouseX, _mouseY){\r
+ COMIC_ELEMENT_CONTROL.onMouseClick( _mouseX, _mouseY)\r
+ },\r
+ onMouseOut: function( _mouseX, _mouseY){\r
+ if( COMIC_ELEMENT_CONTROL.onMouseOut( _mouseX, _mouseY) === false){\r
+ \r
+ }\r
+ },\r
+ busy: function(){\r
+ return isDragging === true || COMIC_ELEMENT_CONTROL.busy();\r
+ },\r
+ createImageElement: function( url, imagesetID, x, y, z, w, h){\r
+ COMIC_ELEMENT_CONTROL.createImageElement( url, imagesetID, x, y, z, w, h);\r
+ },\r
+ createTextElement: function( type, angle, text, x, y, w, h, z){\r
+ COMIC_ELEMENT_CONTROL.createTextElement( type, angle, text, x, y, w, h, z);\r
+ }\r
}\r
})();\r
\r
+\r
function updateMouseCursor( _cursor){\r
if( currentCursor !== _cursor){\r
currentCursor = _cursor;\r
windowH = _windowH;\r
\r
/*\r
- * ieは +'px'が不要みたい
+ * ieは +'px'が不要みたい\r
*/\r
jqEditor.get( 0).style.height = _windowH +'px';\r
ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\r
* 効果画像庫 >\r
* アイテム画像庫 >\r
* \r
- * 画像一覧を読み込むタイミング
+ * 画像一覧を読み込むタイミング\r
*/\r
h2c.file = ( function(){\r
var TREE_TYPE_IS_COMIC = 1,\r
ROLE_IS_ARTIST = 2^1,\r
ROLE_IS_VISITOR = 2^0,\r
ROLE_IS_UNKROWN = 2^-1,\r
- UPDATE_POLICY_SOCAV = 11111,// s: super user\r
- UPDATE_POLICY_SOCA_ = 11110,// o: owner\r
- UPDATE_POLICY_SOC__ = 11100,// c: creator\r
- UPDATE_POLICY_SO_A_ = 11010,// a: artist\r
- UPDATE_POLICY_SO___ = 11000,// v: visitor\r
- UPDATE_POLICY__O___ = 01000,\r
- UPDATE_POLICY_S____ = 10000,\r
- UPDATE_POLICY______ = 00000,\r
+ UPDATE_POLICY_SOCAV = 0x11111,// s: super user\r
+ UPDATE_POLICY_SOCA_ = 0x11110,// o: owner( comic || panel || picture )\r
+ UPDATE_POLICY_SOC__ = 0x11100,// c: creator\r
+ UPDATE_POLICY_SO_A_ = 0x11010,// a: artist\r
+ UPDATE_POLICY_SO___ = 0x11000,// v: visitor\r
+ UPDATE_POLICY__O___ = 0x01000,// l: lisence manager\r
+ UPDATE_POLICY_S____ = 0x10000,\r
+ UPDATE_POLICY______ = 0x00000,\r
FILEDATA_RESITER = [],\r
FILEDATA_ACCESS = [];\r
\r
* fileのdataはobjectで保持している。\r
* h2c.file.の外からファイルをみるときは、FileClassを通して操作する。\r
* fileの変更、それに付随して追加されたイベントは、treeで管理される。\r
- * treeがdestryされると、fileのイベントリスナーも全て削除される。
+ * treeがdestryされると、fileのイベントリスナーも全て削除される。\r
*/\r
\r
var FileClass = function( TREE, PARENT_FILE, DATA){\r
OSDN Git Service
