11 * ----------------------------------------
\r
18 * THIS_IS_CONST = 'this is const';
\r
24 * jqWrapper, JQ_WRAPPER
\r
26 * value of dom element
\r
27 * elmWrapper, ELM_WRAP
\r
29 * value of vml element
\r
35 /* ----------------------------------------
\r
37 * - MENU_BAR_CONTROL
\r
42 * - INFOMATION_WINDOW
\r
44 * - HELP_DOCUMENTS_WINDOW
\r
47 * - WHITE_GLASS_CONTROL
\r
51 * - PanelResizerClass
\r
52 * - PANEL_RESIZER_TOP
\r
53 * - PANEL_RESIZER_BOTTOM
\r
54 * - CONSOLE_CONTROLER
\r
58 * - POSITION_OPERATOR
\r
59 * - COMIC_ELEMENT_OPERATION_MANAGER
\r
61 * - ImageElementClass
\r
62 * - TextElementClass
\r
64 * - COMIC_ELEMENT_CONTROL
\r
68 pettanr.editor = pettanr.view.registerApplication( function(){
\r
70 var PANEL_ELEMENT_TYPE_IMAGE = 0,
\r
71 PANEL_ELEMENT_TYPE_TEXT = 1,
\r
72 MOUSE_LISTENER_ARRAY = [],
\r
73 PANEL_ELEMENT_ARRAY = [],
\r
74 ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),
\r
75 MIN_PANEL_HEIGHT = 20,
\r
76 MIN_ELEMENT_SIZE = 19,
\r
77 MOUSE_HIT_AREA = 10,
\r
78 jqMouseEventChacher,
\r
81 currentListener = null,
\r
91 /* ----------------------------------------
\r
93 * - mouseEventListener
\r
104 var MENU_BAR_CONTROL = ( function(){
\r
105 var ELM_BAR = document.getElementById( 'menu-bar' ),
\r
106 ELM_ITEM_CLASSNAME = 'menu-bar-item',
\r
107 ELM_ITEM_ORIGN = ( function(){
\r
108 var ret = document.createElement( 'div' ),
\r
109 div = document.createElement( 'div' ),
\r
110 ul = document.createElement( 'ul' );
\r
111 ret.className = ELM_ITEM_CLASSNAME;
\r
112 ret.appendChild( div );
\r
113 ret.appendChild( ul );
\r
116 ELM_SELECTION_ORIGN = ( function(){
\r
117 var ret = document.createElement( 'li' ),
\r
118 a = document.createElement( 'a' ),
\r
119 span = document.createElement( 'span' ),
\r
120 key = document.createElement( 'kbd' );
\r
121 a.appendChild( span );
\r
122 a.appendChild( key );
\r
123 ret.appendChild( a );
\r
128 barH = pettanr.util.getElementSize( ELM_BAR ).height,
\r
129 itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN ).width,
\r
130 selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul' )[ 0 ] ).width,
\r
132 ELM_BAR.style.top = ( -barH ) +'px';
\r
134 var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter ){
\r
135 var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true ),
\r
136 ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span' )[ 0 ],
\r
137 elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd' )[ 0 ];
\r
140 elmShortcut.innerHTML = shortcut;
\r
142 elmShortcut.parentNode.removeChild( elmShortcut );
\r
144 elmShortcut = null;
\r
146 container.appendChild( ELM_WRAPPER );
\r
148 this.elm = ELM_WRAPPER;
\r
149 this.title = function( _title ){
\r
150 if( Type.isString( _title ) === true ){
\r
151 ELM_TITLE.innerHTML = title = _title;
\r
155 this.visible = function( _visible ){
\r
156 if( Type.isBoolean( _visible ) === true && visible !== _visible ){
\r
157 visible = _visible;
\r
158 ELM_WRAPPER.className = visible === true ? '' : 'disabled';
\r
162 this.separateAfter = separateAfter;
\r
164 this.title( title );
\r
165 this.visible( visible );
\r
168 var MenuBarItemClass = function( title ){
\r
169 var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true ),
\r
170 ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div' )[ 0 ],
\r
171 ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul' )[ 0 ],
\r
172 INDEX = ITEM_ARRAY.length,
\r
173 SELECTION_CALLBACK_ARRAY = [],
\r
177 ELM_TITLE.innerHTML = title;
\r
179 ELM_WRAPPER.style.left = ( itemW * INDEX ) + 'px';
\r
180 ELM_BAR.appendChild( ELM_WRAPPER );
\r
182 this.elm = ELM_WRAPPER;
\r
183 this.onClick = function( e ){
\r
184 var i = pettanr.util.getChildIndex( this.parentNode, this );
\r
185 i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i ]( i );
\r
186 e.stopPropagation();
\r
189 this.init = function(){
\r
190 $( ELM_SELECTION ).children( 'li' ).click( instance.onClick );
\r
191 delete instance.init;
\r
193 this.show = function(){
\r
194 if( visible === true ) return;
\r
195 jqStage.append( ELM_WRAPPER );
\r
196 ELM_WRAPPER.className = ELM_ITEM_CLASSNAME + '-focus';
\r
197 instance.onShow && setTimeout( instance.onShow, 0 );
\r
200 this.hide = function(){
\r
201 if( visible === false ) return;
\r
202 ELM_BAR.appendChild( ELM_WRAPPER );
\r
203 ELM_WRAPPER.className = ELM_ITEM_CLASSNAME;
\r
204 instance.onHide && setTimeout( instance.onHide, 0 );
\r
207 this.createSelection = function( title, shortcut, callback, visible, separateBefore, separateAfter ){
\r
208 var ret = new MenubarSelectionClass( ELM_SELECTION, title, shortcut, visible, separateAfter ),
\r
209 before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1 ] : null;
\r
210 SELECTION_CALLBACK_ARRAY.push( callback );
\r
211 if( before !== null && ( separateBefore === true || before.separateAfter === true )){
\r
212 ret.elm.style.borderTop = '1px solid #ccc';
\r
219 function createMenubarItem( title ){
\r
220 var _item = new MenuBarItemClass( title );
\r
221 ITEM_ARRAY.push( _item );
\r
226 jqStage = jqEditor;
\r
227 jqBar = $( ELM_BAR).animate( { top: 0});
\r
229 var l = ITEM_ARRAY.length;
\r
230 for( var i=0; i<l; ++i){
\r
231 ITEM_ARRAY[ i].init();
\r
234 delete MENU_BAR_CONTROL.init;
\r
237 MENU_BAR_CONTROL.init && MENU_BAR_CONTROL.init();
\r
238 // ELM_BAR.style.top = ( -barH) +'px';
\r
242 var l = ITEM_ARRAY.length;
\r
243 for( var i=0; i<l; ++i){
\r
244 ITEM_ARRAY[ i].hide();
\r
248 onMouseMove: function( _mouseX, _mouseY){
\r
249 if( barH >= _mouseY){
\r
252 var l = ITEM_ARRAY.length;
\r
253 for( var i=0; i<l; ++i){
\r
254 ITEM_ARRAY[ i].hide();
\r
258 onMouseUp: function( _mouseX, _mouseY){
\r
261 onMouseDown: function( _mouseX, _mouseY){
\r
262 var l = ITEM_ARRAY.length;
\r
263 if( barH < _mouseY || itemW * l < _mouseX) return false;
\r
264 for( var i=0; i<l; ++i){
\r
265 if( i * itemW <= _mouseX && _mouseX < ( i +1) * itemW){
\r
266 ITEM_ARRAY[ i].show();
\r
268 ITEM_ARRAY[ i].hide();
\r
273 busy: function( _busy ){
\r
276 onWindowResize: function( _windowW, _windowH ){
\r
279 QUIT: createMenubarItem( 'Quit' ),
\r
280 EDIT: createMenubarItem( 'Edit' ),
\r
281 WINDOW: createMenubarItem( 'Window' ),
\r
282 HELP: pettanr.util.extend( createMenubarItem( 'Help' ), {
\r
283 createAjaxSelection: function( callback ){
\r
284 var elmLoading = document.createElement( 'li' ),
\r
286 elmSelection = this.elm.getElementsByTagName( 'ul' )[ 0 ];
\r
287 elmSelection.appendChild( elmLoading );
\r
288 elmLoading.className = 'loading';
\r
289 elmLoading.style.height = '90px';
\r
291 this.onShow = callback;
\r
294 delete this.createAjaxSelection;
\r
296 elmSelection.removeChild( elmLoading );
\r
297 $( elmSelection ).children( 'li' ).click( that.onClick );
\r
298 elmLoading = elmSelection = null;
\r
299 delete that.onShow;
\r
308 /* ----------------------------------------
\r
312 var HISTORY_CONTROL = ( function() {
\r
313 var STACK_BACK = [],
\r
314 STACK_FORWARD = [],
\r
315 MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false),
\r
316 MENUBAR_FORWARD = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', forward, false, false, true),
\r
319 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, false, true, back); // ctrl + Z
\r
320 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, true, true, forward); // ctrl + shift + Z
\r
321 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 89, false, true, forward); // ctrl + Y
\r
325 * currentを控えてSTACK_FORWARD.push(current)
\r
326 * STACK_BACK.pop()を実行してcurrentに
\r
328 if( STACK_BACK.length === 0) return;
\r
330 var state = STACK_BACK.pop();
\r
331 state && state.fn( state.argBack);
\r
332 MENUBAR_BACK.visible( STACK_BACK.length !== 0);
\r
333 SAVE_CONTROL.panelUpdated( STACK_BACK.length !== 0);
\r
335 STACK_FORWARD.push( state);
\r
336 MENUBAR_FORWARD.visible( true);
\r
338 function forward(){
\r
339 if( STACK_FORWARD.length === 0) return;
\r
341 var state = STACK_FORWARD.pop();
\r
342 state.fn( state.argForword);
\r
343 MENUBAR_FORWARD.visible( STACK_FORWARD.length !== 0);
\r
345 STACK_BACK.push( state);
\r
346 MENUBAR_BACK.visible( true);
\r
347 SAVE_CONTROL.panelUpdated( true);
\r
349 function destroyStack( _stack, _destroy){
\r
352 var _argBack = _stack.argBack,
\r
353 _argForword = _stack.argForword,
\r
355 if( Type.isArray( _argBack ) === true ){ // isArray
\r
356 while( _argBack.length > 0){
\r
357 _value = _argBack.shift();
\r
358 _destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy();
\r
361 if( Type.isArray( _argForword ) === true ){
\r
362 while( _argForword.length > 0){
\r
363 _value = _argForword.shift();
\r
364 _destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy();
\r
370 log = $( '#history-log');
\r
371 delete HISTORY_CONTROL.init;
\r
374 HISTORY_CONTROL.init && HISTORY_CONTROL.init();
\r
377 MENUBAR_BACK.visible( false);
\r
378 MENUBAR_FORWARD.visible( false);
\r
379 while( STACK_BACK.length > 0){
\r
380 destroyStack( STACK_BACK.shift(), true );
\r
382 while( STACK_FORWARD.length > 0){
\r
383 destroyStack( STACK_FORWARD.shift(), true );
\r
386 saveState: function( _function, _argBack, _argForword, _destroy) {
\r
390 argForword: _argForword,
\r
393 MENUBAR_BACK.visible( true);
\r
394 SAVE_CONTROL.panelUpdated( true);
\r
397 while( STACK_FORWARD.length > 0){
\r
398 _stack = STACK_FORWARD.shift();
\r
399 destroyStack( _stack, _stack.destroy );
\r
401 MENUBAR_FORWARD.visible( false);
\r
406 /* ----------------------------------------
\r
410 var SAVE_CONTROL = ( function(){
\r
411 var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),
\r
412 SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),
\r
413 EXPORT = MENU_BAR_CONTROL.QUIT.createSelection( 'export', null, onExport, true, false, true),
\r
414 QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),
\r
418 pettanr.editor.shutdown();
\r
421 function onExport(){
\r
422 pettanr.outputConsole.bootInOverlay(
\r
423 comicID, panelID, panelTimming,
\r
424 PANEL_CONTROL.w(), PANEL_CONTROL.h(),
\r
425 2, // border, BackgroundImage
\r
426 PANEL_ELEMENT_ARRAY
\r
430 open: function(){},
\r
431 close: function(){},
\r
433 panelUpdated: function( _updated){
\r
434 if( _updated !== undefined && updated !== _updated ){
\r
435 SAVE.visible( !!_updated );
\r
436 SAVE_AND_QUIT.visible( !!_updated );
\r
437 updated = !!_updated;
\r
447 /* ----------------------------------------
\r
450 * - mouseEventListener
\r
452 var WINDOWS_CONTROL = ( function(){
\r
454 * 表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。
\r
456 var DEFAULT_MIN_WINDOW_WIDTH = 200,
\r
457 DEFAULT_MIN_WINDOW_HEIGHT = 200,
\r
459 WINDOW_BODY_BODER_SIZE = 1,
\r
462 currentWindowIndex = -1,
\r
465 var jqWindowOrigin,
\r
467 var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH ){
\r
468 var MOUSE_CURSOR = updateMouseCursor,
\r
469 MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection(
\r
470 ( visible !== true ? 'show ' : 'hide ' ) + title,
\r
471 null, onMenuClick, true
\r
474 jqWrapper, jqHeader, jqFooter = null,
\r
475 elmBody, elmBodyStyle,
\r
476 startX, startY, startW, startH,
\r
478 headerH, bodyH, footerH = 0,
\r
479 isDragging = false,
\r
480 isResizing = false,
\r
481 bodyIsTachable = false,
\r
484 function onMenuClick(){
\r
485 visible === true ? instance.close() : instance.open();
\r
487 function update( _x, _y, _w, _h){
\r
488 _x = _x !== undefined ? _x : x;
\r
489 _y = _y !== undefined ? _y : y;
\r
490 _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;
\r
491 _w = _w !== undefined ? _w : w;
\r
492 _h = _h !== undefined ? _h : h;
\r
499 bodyH = _h -headerH -footerH;
\r
500 elmBodyStyle.height = bodyH +'px';
\r
501 ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, bodyH);
\r
507 function bodyBackOrForward( isBack ){
\r
508 if( !instance) return;
\r
509 if( bodyIsTachable === !isBack) return;
\r
510 elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';
\r
511 elmBodyStyle.left = isBack === true ? 0 : x +'px';
\r
512 elmBodyStyle.top = isBack === true ? 0 : y +headerH +'px';
\r
513 elmBodyStyle.width = isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px';
\r
514 bodyIsTachable === isBack && isBack === true ? jqHeader.after( elmBody) : jqStage.append( elmBody);
\r
515 bodyIsTachable = !isBack;
\r
517 function onWindowResize( e){
\r
518 bodyBackOrForward( true);
\r
526 MOUSE_CURSOR( 'nw-resize');
\r
527 e.stopPropagation();
\r
530 this.init = function( jqContainer ){
\r
531 jqWindowOrigin = jqWindowOrigin || ( function(){
\r
532 return $( $( '#windowTemplete').remove().html());
\r
534 closeButtonWidth = closeButtonWidth || ( function(){
\r
535 return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;
\r
538 jqStage = jqEditor;
\r
539 instance.$ = jqWrapper = jqWindowOrigin.clone( true);
\r
540 jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);
\r
541 headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;
\r
542 elmBody = jqWrapper.children( '.window-body').get( 0);
\r
543 elmBodyStyle = elmBody.style;
\r
545 if( bodyTempleteID) {
\r
546 jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));
\r
548 jqWrapper.find( '.window-body-insert-position').remove();
\r
550 CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();
\r
552 instance.onInit && instance.onInit();
\r
553 delete instance.init;
\r
555 this.x = function(){ return x;};
\r
556 this.y = function(){ return y;};
\r
557 this.w = function(){ return w;};
\r
558 this.h = function(){ return h;};
\r
560 this.title = function( _title ){
\r
561 if( Type.isString( _title ) === true ){
\r
562 jqHeader.html( _title );
\r
567 this.visible = visible;
\r
568 this.firstOpen = function(){
\r
569 if( RESIZE_BUTTON_ENABLED === true){
\r
570 footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer' ).get( 0 ) ).height;
\r
572 jqWrapper.find( '.window-footer').remove();
\r
574 instance.onFirstOpen && instance.onFirstOpen( w, h - headerH - footerH );
\r
576 update( x, y, w, h);
\r
578 delete instance.firstOpen;
\r
580 this.open = function(){
\r
581 if( visible === true) return;
\r
582 instance.visible = visible = true;
\r
583 openWindow( instance);
\r
584 MENUBAR_SELWCTION.title( 'hide ' +title);
\r
586 for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){
\r
587 if( WINDOW_ARRAY[ i] === instance){
\r
588 WINDOW_ARRAY.splice( i, 1);
\r
589 WINDOW_ARRAY.unshift( instance);
\r
590 currentWindow = null;
\r
591 currentWindowIndex = -1;
\r
595 this.onFadeIn = function(){
\r
596 instance.firstOpen && instance.firstOpen();
\r
597 instance.onOpen && setTimeout( callOnOpen, 0);
\r
598 function callOnOpen(){
\r
599 instance.onOpen( w, bodyH );
\r
602 this.onFadeOut = function(){
\r
603 var elmWrapper = jqWrapper.get(0);
\r
604 elmWrapper.parentNode.removeChild( elmWrapper);
\r
605 instance.onClose && setTimeout( instance.onClose, 0);
\r
607 this.close = function(){
\r
608 if( visible === false) return;
\r
609 instance.visible = visible = false;
\r
610 jqWrapper.fadeOut( instance.onFadeOut);
\r
611 MENUBAR_SELWCTION.title( 'show ' +title);
\r
613 this.bodyBackOrForward = bodyBackOrForward;
\r
614 this.onMouseDown = function( _mouseX, _mouseY ){
\r
615 if( RESIZE_BUTTON_ENABLED === true && x + w -20 <= _mouseX && _mouseX < x + w && y + headerH + bodyH < _mouseY && _mouseY <= y + h ){
\r
616 bodyBackOrForward( true);
\r
624 MOUSE_CURSOR( 'nw-resize');
\r
628 if( x > _mouseX || y > _mouseY || x + w < _mouseX || y + headerH < _mouseY ) return;
\r
629 if( CLOSE_BUTTON_ENABLED === true && x + w - closeButtonWidth < _mouseX){
\r
635 MOUSE_CURSOR( 'move');
\r
643 this.onMouseUp = function( _mouseX, _mouseY ){
\r
644 isDragging = isResizing = false;
\r
647 this.onMouseMove = function( _mouseX, _mouseY ){
\r
648 var _updateX = _mouseX - offsetX,
\r
649 _updateY = _mouseY - offsetY;
\r
651 if( isResizing === true){
\r
652 var _w = startW +_updateX,
\r
653 _h = startH +_updateY;
\r
654 update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h );
\r
657 if( isDragging === true) {
\r
658 update( startX + _updateX, startY + _updateY);
\r
661 if( x > _mouseX || x + w < _mouseX ) return;
\r
663 ( y <= _mouseY && y +headerH >= _mouseY ) ?
\r
664 MOUSE_CURSOR( 'pointer') : // hit to header
\r
666 bodyBackOrForward( y + headerH > _mouseY || y + headerH + bodyH < _mouseY);
\r
668 this.onMouseOut = function( _mouseX, _mouseY ){
\r
669 bodyIsTachable === true && bodyBackOrForward( true );
\r
670 isDragging = false;
\r
671 MOUSE_CURSOR( '' );
\r
673 this.busy = function(){
\r
674 return isDragging === true || isResizing === true;
\r
676 this.bodyHeight = function(){
\r
681 function getCurrentIndex( _mouseX, _mouseY ){
\r
682 if( currentWindow && currentWindow.busy() === true ) return currentWindowIndex;
\r
683 var l = WINDOW_ARRAY.length,
\r
684 _currentWindow = null,
\r
686 currentWindowIndex = -1;
\r
687 for( var i=0; i<l; i++){
\r
688 _win = WINDOW_ARRAY[ i];
\r
689 if( _win.visible !== true) continue;
\r
692 if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){
\r
693 _currentWindow = _win;
\r
694 currentWindowIndex = i;
\r
698 currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);
\r
699 currentWindow = _currentWindow;
\r
700 return currentWindowIndex;
\r
702 function openWindow( _window ){
\r
703 if( _window.visible !== true) return;
\r
704 var _jqWindow = _window.$;
\r
705 jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない．
\r
706 _jqWindow.fadeIn( _window.onFadeIn);
\r
712 jqContainer = $( '#window-container');
\r
714 var l = WINDOW_ARRAY.length,
\r
716 for( var i=l-1; i >= 0; --i){
\r
717 _window = WINDOW_ARRAY[ i];
\r
718 _window.init && _window.init( jqContainer);
\r
719 _window.visible === true && openWindow( _window);
\r
721 log = $( '#window-log');
\r
723 delete WINDOWS_CONTROL.init;
\r
726 WINDOWS_CONTROL.init && WINDOWS_CONTROL.init();
\r
731 onMouseMove: function( _mouseX, _mouseY){
\r
732 var _index = getCurrentIndex( _mouseX, _mouseY);
\r
734 currentWindow.onMouseMove( _mouseX, _mouseY);
\r
737 if( _index > 0){ // 先頭のクリックでない場合
\r
739 WINDOW_ARRAY.splice( currentWindowIndex, 1);
\r
740 WINDOW_ARRAY.unshift( currentWindow);
\r
742 jqContainer.append( currentWindow.$);
\r
743 currentWindowIndex = 0;
\r
748 onMouseUp: function( _mouseX, _mouseY){
\r
749 if( getCurrentIndex( _mouseX, _mouseY) === 0){
\r
750 currentWindow.onMouseUp( _mouseX, _mouseY);
\r
755 onMouseDown: function( _mouseX, _mouseY){
\r
756 if( getCurrentIndex( _mouseX, _mouseY) === 0){
\r
757 currentWindow.onMouseDown( _mouseX, _mouseY);
\r
763 return currentWindow !== null;
\r
765 onWindowResize: function( _windowW, _windowH){
\r
770 createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH ){
\r
771 opt_visible = opt_visible !== false;
\r
772 opt_closeButtonEnabled = opt_closeButtonEnabled === true;
\r
773 opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;
\r
774 opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH ) ? w : DEFAULT_MIN_WINDOW_WIDTH;
\r
775 opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT ) ? h : DEFAULT_MIN_WINDOW_HEIGHT;
\r
777 var _window = new WindowClass( bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH );
\r
778 for( var key in EXTENDS ){
\r
779 _window[ key ] = EXTENDS[ key ];
\r
781 WINDOW_ARRAY.unshift( _window );
\r
782 if( Type.isUndefined( WINDOWS_CONTROL.init ) === true ){
\r
783 _window.init( jqContainer );
\r
784 openWindow( _window );
\r
791 /* ----------------------------------------
\r
795 var TOOL_BOX_WINDOW = ( function(){
\r
796 var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,
\r
799 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 73, false, true, addImage);
\r
800 MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);
\r
802 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 84, false, true, addText);
\r
803 MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);
\r
805 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 71, false, true, switchGrid);
\r
806 MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);
\r
808 function addImage( e){
\r
809 IMAGE_EXPLORER_WINDOW.open();// setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);
\r
810 instance.bodyBackOrForward( true );
\r
811 e && e.preventDefault && e.preventDefault();
\r
814 function addText( e){
\r
815 setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0);
\r
816 e && e.preventDefault && e.preventDefault();
\r
819 function switchGrid( e){
\r
820 setTimeout( GRID_CONTROL.update, 0);
\r
821 e && e.preventDefault && e.preventDefault();
\r
824 function popupHelp( e){
\r
825 instance.bodyBackOrForward( true);
\r
826 setTimeout( HELP_DOCUMENTS_WINDOW.open, 0);
\r
827 e && e.preventDefault && e.preventDefault();
\r
830 function editBG( e){
\r
831 instance.bodyBackOrForward( true);
\r
832 setTimeout( INFOMATION_WINDOW.open, 0);
\r
833 e && e.preventDefault && e.preventDefault();
\r
837 return WINDOWS_CONTROL.createWindow(
\r
839 onInit: function(){
\r
841 delete this.onInit;
\r
843 onFirstOpen: function(){
\r
844 addImageButton = $( '#toolbox-add-image-button').click( addImage);
\r
845 addTextButton = $( '#toolbox-add-text-button').click( addText);
\r
846 editBgButton = $( '#toolbox-edit-bg-button').click( editBG);
\r
847 switchGridButton = $( '#toolbox-switch-grid').click( switchGrid);
\r
848 popupHelpButton = $( '#toolbox-popup-help-button').click( popupHelp);
\r
850 postButton = $( '#toolbox-post-button');
\r
852 delete this.onFirstOpen;
\r
855 'toolbox-window', 'Tool box', 0, 215, 110, 290, true
\r
860 /* ----------------------------------------
\r
864 var IMAGE_EXPLORER_WINDOW = ( function(){
\r
865 var instance, finder;
\r
867 function onFileSelect( _file ){
\r
868 // 他の image ファイルも許可する？
\r
869 if( pettanr.driver.isPettanrFileInstance( _file ) === true ){
\r
870 if( _file.getType() === pettanr.driver.FILE_TYPE.PICTURE ){
\r
871 COMIC_ELEMENT_CONTROL.onImageSelect( pettanr.driver._getAPI().getFileData( _file ) );
\r
876 return WINDOWS_CONTROL.createWindow(
\r
878 onInit: function(){
\r
880 delete this.onInit;
\r
882 onOpen: function( _w, _h ){
\r
883 finder = finder || pettanr.finder.createFinder(
\r
885 document.getElementById( 'image-exproler-container'),
\r
886 pettanr.driver.createPictureTree(),
\r
889 COMIC_ELEMENT_CONTROL.onImageSelect
\r
892 finder.resize( _w, _h );
\r
894 onResize: function( _w, _h ){
\r
895 finder.resize( _w, _h );
\r
898 'image-exproler', 'Album', 0, 215, 600, 350, false, true, true, 300, 300
\r
903 /* ----------------------------------------
\r
904 * INFOMATION_WINDOW
\r
907 var INFOMATION_WINDOW = ( function(){
\r
908 var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,
\r
909 FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',
\r
910 FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',
\r
911 backgroundInfomationElm,
\r
912 jqComicElementInformation,
\r
913 inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
\r
914 inputPercentW, inputPercentH,
\r
915 currentComicElement = null,
\r
916 currentElementType = -1,
\r
917 currentLock = false;
\r
919 return WINDOWS_CONTROL.createWindow(
\r
921 onFirstOpen: function( _w, _h){
\r
922 backgroundInfomationElm = $( '#panel-background-information');
\r
924 jqComicElementInformation = $( '#comic-element-infomation').hide().css( {
\r
927 var TAB_GROUP_ID = 'comic-element-attribute';
\r
928 var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;
\r
929 inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID);
\r
930 inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID);
\r
931 inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID);
\r
932 inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID);
\r
933 inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID);
\r
934 inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID);
\r
935 inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID);
\r
936 inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID);
\r
937 inputAspectRatio = $( '#comic-element-keep-aspect');
\r
938 delete INFOMATION_WINDOW.onFirstOpen;
\r
940 onResize: function( _w, _h){
\r
941 jqComicElementInformation.css( {
\r
945 update: function( currentElement ){
\r
947 if( currentLock === true && currentElement === null) return;
\r
949 var _elementType = currentElement === null ? -1 : currentElement.type,
\r
950 x = currentElement !== null ? currentElement.x : 0,
\r
951 y = currentElement !== null ? currentElement.y : 0,
\r
952 z = currentElement !== null ? currentElement.z : 0,
\r
953 a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,
\r
954 w = currentElement !== null ? currentElement.w : 0,
\r
955 h = currentElement !== null ? currentElement.h : 0,
\r
956 actualW = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
\r
957 actualH = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
\r
958 wPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,
\r
959 hPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,
\r
960 keepAspect = currentElement !== null && currentElement.keepAspect === true;
\r
962 if( currentElementType !== _elementType){
\r
963 if( _elementType !== -1){
\r
964 if( _elementType === 1){
\r
965 inputA.visible( true);
\r
966 inputPercentW.visible( false);
\r
967 inputPercentH.visible( false);
\r
968 inputAspectRatio.hide();
\r
970 inputA.visible( false);
\r
971 inputPercentW.visible( true);
\r
972 inputPercentH.visible( true);
\r
973 inputAspectRatio.show();
\r
975 currentElementType === -1 && jqComicElementInformation.stop().css( {
\r
978 })[ FADE_IN_EFFECT]();
\r
980 currentElementType !== -1 && jqComicElementInformation.stop().css({
\r
983 })[ FADE_OUT_EFFECT]();
\r
985 currentElementType = _elementType;
\r
987 if( currentElementType !== -1){
\r
991 _elementType === 1 && inputA.value( a);
\r
994 _elementType === 0 && inputPercentW.value( wPercent );
\r
995 _elementType === 0 && inputPercentH.value( hPercent );
\r
1000 lock: function( _currentLock ){
\r
1001 currentLock = !!_currentLock;
\r
1002 INFOMATION_WINDOW.bodyBackOrForward( !currentLock );
\r
1005 'infomation-window', 'Infomation', 0, 30, 200, 180, true
\r
1009 /* ----------------------------------------
\r
1013 var HELP_DOCUMENTS_WINDOW = ( function(){
\r
1014 var visible = true,
\r
1018 currentPageIndex = 0,
\r
1020 HELP = MENU_BAR_CONTROL.HELP,
\r
1021 onLoadFunction = HELP.createAjaxSelection( onAjaxStart );
\r
1023 function onAjaxStart( _pageIndex ){
\r
1024 currentPageIndex = _pageIndex || currentPageIndex;
\r
1025 if( onHelpLoad !== null ){
\r
1027 url: 'help/jp.xml',
\r
1029 success: onHelpLoad
\r
1031 onHelpLoad = null;
\r
1033 onAjaxStart = new Function;
\r
1035 var onHelpLoad = function( _xml ){
\r
1036 var jqXML = $( _xml ),
\r
1037 helpTitle = jqXML.find( 'pages' ).eq( 0 ).attr( 'title' ),
\r
1038 elmNavi = document.createElement( 'div' ),
\r
1039 elmItemOrigin = document.createElement( 'a' ),
\r
1040 elmPages = document.createElement( 'div' ),
\r
1041 elmPageOrigin = document.createElement( 'div' ),
\r
1042 elmTitleOrigin = document.createElement( 'h2' ),
\r
1044 elmNavi.className = 'sidenavi';
\r
1045 elmItemOrigin.className = 'sidenavi-item';
\r
1046 elmItemOrigin.href = '#';
\r
1047 elmPages.className = 'page-contents';
\r
1048 elmPageOrigin.className = 'page-content main';
\r
1049 elmPageOrigin.appendChild( elmTitleOrigin);
\r
1051 jqXML.find( 'page' ).each( function(){
\r
1052 var xmlPage = $( this ),
\r
1053 title = xmlPage.attr( 'title' ),
\r
1054 content = xmlPage.text();
\r
1056 elmItemOrigin.innerHTML = title;
\r
1057 elmNavi.appendChild( elmItemOrigin.cloneNode( true ));
\r
1059 elmTitleOrigin.innerHTML = title;
\r
1061 elmPage = elmPageOrigin.cloneNode( true );
\r
1062 elmPage.innerHTML = content;
\r
1064 pettanr.util.cleanElement( elmPage);
\r
1066 if( elmPage.childNodes.length > 0 ){
\r
1067 elmPage.insertBefore( elmTitleOrigin.cloneNode( true ), elmPage.childNodes[0]);
\r
1069 elmPage.appendChild( elmTitleOrigin.cloneNode( true ));
\r
1071 elmPages.appendChild( elmPage );
\r
1073 HELP.createSelection( title, null, onSelectionClick, true );
\r
1077 onLoadFunction = null;
\r
1079 jqAjaxContents.removeClass( 'loading' ).append( elmNavi, elmPages );
\r
1081 jqNaviItems = jqAjaxContents.find( 'a.' + elmItemOrigin.className ).click( onNaviClick );
\r
1082 jqPages = jqAjaxContents.find( '.page-content' );
\r
1083 jqPages.find( 'a').click( onInnerLinkClick );
\r
1085 setTimeout( jumpPage, 0 );
\r
1087 function onSelectionClick( _pageIndex ){
\r
1088 HELP_DOCUMENTS_WINDOW.open();
\r
1089 jumpPage( _pageIndex );
\r
1091 function jumpPage( _index ){
\r
1092 if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index ){
\r
1093 currentPageIndex = _index;
\r
1095 jqNaviItems.removeClass( 'current' ).eq( currentPageIndex).addClass( 'current' );
\r
1096 jqPages.hide().eq( currentPageIndex ).show();
\r
1098 function onNaviClick( e ){
\r
1100 jumpPage( pettanr.util.getChildIndex( this.parentNode, this ));
\r
1101 e.stopPropagation();
\r
1104 function onInnerLinkClick( e ){
\r
1105 var jump = ( this.href || '').split( '#jump' ),
\r
1108 jumpPage( '' + parseFloat( n ) === n ? parseFloat( n ) : -1 );
\r
1109 e.stopPropagation();
\r
1112 return WINDOWS_CONTROL.createWindow(
\r
1114 onInit: function(){
\r
1115 jqAjaxContents = HELP_DOCUMENTS_WINDOW.$.find( '.window-body' ).addClass( 'loading' );
\r
1116 delete HELP_DOCUMENTS_WINDOW.onInit;
\r
1118 onFirstOpen: function( _w, _h ){
\r
1119 jqAjaxContents.css( { height: _h });
\r
1121 delete HELP_DOCUMENTS_WINDOW.onFirstOpen;
\r
1123 onResize: function( _w, _h ){
\r
1124 jqAjaxContents && jqAjaxContents.css( { height: _h });
\r
1127 null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300
\r
1131 /* ----------------------------------------
\r
1134 * - panelResizeListener
\r
1136 var GRID_CONTROL = ( function(){
\r
1137 var ELM_GRID = document.getElementById( 'grid' ),
\r
1138 BG_URL = "url('images/grid.gif')",
\r
1144 jqGrid = $( ELM_GRID );
\r
1145 delete GRID_CONTROL.init;
\r
1148 GRID_CONTROL.init && GRID_CONTROL.init();
\r
1150 close: function(){
\r
1153 onPanelResize: function( _panelX, _panelY ){
\r
1154 ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px' ].join( '' );
\r
1155 ELM_GRID.style.height = windowH +'px';
\r
1157 enabled: function(){
\r
1160 update: function(){
\r
1164 }).stop()[ visible === true ? 'fadeOut' : 'fadeIn' ]();
\r
1166 visible = !visible;
\r
1168 if( visible === true && BG_URL !== null){
\r
1169 ELM_GRID.style.backgroundImage = BG_URL;
\r
1177 /* ----------------------------------------
\r
1178 * WHITE_GLASS_CONTROL
\r
1179 * - panelResizeListener
\r
1181 var WHITE_GLASS_CONTROL = ( function(){
\r
1182 var styleTop = document.getElementById( 'whiteGlass-top').style,
\r
1183 styleLeft = document.getElementById( 'whiteGlass-left').style,
\r
1184 styleRight = document.getElementById( 'whiteGlass-right').style,
\r
1185 styleBottom = document.getElementById( 'whiteGlass-bottom').style;
\r
1188 onPanelResize: function( _panelX, _panelY, _panelW, _panelH){
\r
1191 marginTop = _panelY,
\r
1192 marginBottom = windowH -_h -marginTop,
\r
1193 marginX = _panelX,
\r
1194 rightWidth = windowW -_w -marginX;
\r
1196 styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';
\r
1198 styleLeft.top = marginTop +'px';
\r
1199 styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';
\r
1200 styleLeft.height = ( _h + marginBottom) +'px';
\r
1202 styleRight.top = marginTop +'px';
\r
1203 styleRight.left = _w +marginX +'px';
\r
1204 styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';
\r
1205 styleRight.height = ( _h + marginBottom) +'px';
\r
1207 styleBottom.top = ( _h +marginTop) +'px';
\r
1208 styleBottom.left = marginX +'px';
\r
1209 styleBottom.width = _w +'px';
\r
1210 styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';
\r
1216 /* ----------------------------------------
\r
1219 * - mouseEventListener
\r
1221 * panel-border の表示と onPanelResize の通知．
\r
1225 var PANEL_CONTROL = ( function(){
\r
1226 var ELM_PANEL = document.getElementById('panel-tools-container'),
\r
1227 ELM_PANEL_STYLE = ELM_PANEL.style,
\r
1228 DEFAULT_PANEL_WIDTH = 400,
\r
1229 DEFAULT_PANEL_HEIGHT = 300,
\r
1231 panelW, panelH, panelX, panelY,
\r
1232 offsetX, offsetY, startX, startY,
\r
1233 isDragging = false,
\r
1234 isDraggable = false;
\r
1236 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);
\r
1238 function onSpaceUpdate(e){
\r
1239 if( e.type === 'keyup'){
\r
1240 currentListener === null && updateMouseCursor( '');
\r
1241 isDraggable = false;
\r
1243 currentListener === null && updateMouseCursor( 'move');
\r
1244 isDraggable = true;
\r
1249 open: function( _panelW, _panelH, _borderSize ){
\r
1250 panelW = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH;
\r
1251 panelH = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT;
\r
1252 //panelX = Math.floor( ( windowW -panelW) /2);
\r
1253 //panelY = Math.floor( ( windowH -panelH) /2);
\r
1254 borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;
\r
1256 //setTimeout( PANEL_CONTROL.resize, 0);
\r
1258 close: function(){
\r
1273 resize: function( isResizerTopAction, _x, _y, _w, _h){
\r
1274 panelX = _x !== undefined ? _x : panelX;
\r
1275 panelY = _y !== undefined ? _y : panelY;
\r
1276 panelW = _w !== undefined ? _w : panelW;
\r
1277 panelH = _h !== undefined ? _h : panelH;
\r
1279 ELM_PANEL_STYLE.left = ( panelX -borderSize) +'px';
\r
1280 ELM_PANEL_STYLE.top = ( panelY -borderSize) +'px';
\r
1281 ELM_PANEL_STYLE.width = panelW +'px';
\r
1282 ELM_PANEL_STYLE.height = panelH +'px';
\r
1284 PANEL_RESIZER_TOP.onPanelResize( panelX, panelY, panelW, panelH);
\r
1285 PANEL_RESIZER_BOTTOM.onPanelResize( panelX, panelY, panelW, panelH);
\r
1286 GRID_CONTROL.onPanelResize( panelX, panelY);
\r
1287 WHITE_GLASS_CONTROL.onPanelResize( panelX, panelY, panelW, panelH);
\r
1288 COMIC_ELEMENT_CONTROL.onPanelResize( panelX, panelY, panelW, panelH, isResizerTopAction === true);
\r
1290 onWindowResize: function( _windowW, _windowH){
\r
1291 panelX = Math.floor(( _windowW - panelW) / 2);
\r
1292 panelY = Math.floor(( _windowH - panelH) / 2);
\r
1293 PANEL_CONTROL.resize();
\r
1295 onMouseMove: function( _mouseX, _mouseY){
\r
1296 if( isDraggable === true && isDragging === true){
\r
1297 PANEL_CONTROL.resize( false, startX +_mouseX -offsetX, startY +_mouseY -offsetY);
\r
1300 onMouseUp: function( _mouseX, _mouseY){
\r
1301 if( isDraggable === true){
\r
1302 isDragging = false;
\r
1303 updateMouseCursor( '');
\r
1306 onMouseDown: function( _mouseX, _mouseY){
\r
1307 if( isDraggable === true){
\r
1308 offsetX = _mouseX;
\r
1309 offsetY = _mouseY;
\r
1312 isDragging = true;
\r
1313 updateMouseCursor( 'move');
\r
1318 return isDragging === true;
\r
1323 /* --------------------------------------------------------------------------------------------
\r
1324 * PanelResizerClass
\r
1325 * - mouseEventListener
\r
1327 var PanelResizerClass = function( ID, isTop){
\r
1328 var ELM = document.getElementById( ID),
\r
1330 RESIZER_HEIGHT = 30,
\r
1331 x = -BORDER_WIDTH /2,
\r
1332 y = isTop === true ? ( -5 -RESIZER_HEIGHT -BORDER_WIDTH) : 0,
\r
1334 h = RESIZER_HEIGHT,
\r
1335 panelX, panelY, panelW, panelH,
\r
1336 offsetY, startY, startH,
\r
1337 isDragging = false,
\r
1338 MOUSE_CURSOR = updateMouseCursor;
\r
1340 function restoreState( arg){
\r
1341 if( arg && arg.length > 3){
\r
1342 PANEL_CONTROL.resize( isTop, arg[ 0] || panelX, arg[ 1] || panelY, arg[ 2] || panelW, arg[ 3] || panelH);
\r
1346 this.onMouseDown = function( _mouseX, _mouseY){
\r
1347 var _x = _mouseX -panelX,
\r
1348 _y = _mouseY -panelY;
\r
1349 if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
\r
1353 isDragging = true;
\r
1354 MOUSE_CURSOR( 'n-resize');
\r
1357 this.onMouseMove = function( _mouseX, _mouseY){
\r
1358 var _x = _mouseX -panelX,
\r
1359 _y = _mouseY -panelY;
\r
1360 if( isDragging !== true){
\r
1361 if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
\r
1362 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
1363 MOUSE_CURSOR( 'pointer');
\r
1366 var move = _y -offsetY;
\r
1367 if( isTop === true){
\r
1368 if( panelH - move < MIN_PANEL_HEIGHT){
\r
1369 move = panelH -MIN_PANEL_HEIGHT;
\r
1371 PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);
\r
1373 var _h = startH +move;
\r
1374 if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){
\r
1375 PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);
\r
1381 this.onMouseUp = function( _mouseX, _mouseY){
\r
1382 if( isDragging !== true) return;
\r
1383 ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);
\r
1384 isDragging = false;
\r
1385 MOUSE_CURSOR( '');
\r
1387 this.busy = function(){
\r
1390 this.onPanelResize = function( _x, _y, _w, _h){
\r
1393 if( panelW !== _w){
\r
1394 ELM.style.width = ( _w +2) +'px';
\r
1398 y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);
\r
1402 var PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true ),
\r
1403 PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );
\r
1405 PanelResizerClass = undefined;
\r
1407 /* --------------------------------------------------------------------------------------------
\r
1408 * CONSOLE_CONTROLER
\r
1410 var CONSOLE_CONTROLER = ( function(){
\r
1411 var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),
\r
1412 LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),
\r
1413 DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),
\r
1414 EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),
\r
1415 CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),
\r
1416 SAVE = HISTORY_CONTROL.saveState,
\r
1421 jqImgConsole, jqTextConsole,
\r
1422 currentElement = null,
\r
1425 imgConsoleWidth, imgConsoleHeight,
\r
1426 textConsoleWidth, textConsoleHeight,
\r
1427 consoleWidth, consoleHeight,
\r
1428 consoleX, consoleY,
\r
1430 buttonClickable = false;
\r
1432 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack);
\r
1433 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward);
\r
1435 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del);
\r
1436 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit);
\r
1437 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change);
\r
1439 function buttonBackOrForward( isBack){
\r
1440 var offest = jqConsoleWrapper.offset();
\r
1441 jqConsoleWrapper.css( {
\r
1442 position: isBack === true ? '' : 'absolute',
\r
1443 left: isBack === true ? consoleX : offest.left,
\r
1444 top: isBack === true ? consoleY : offest.top
\r
1446 buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);
\r
1447 buttonClickable = !isBack;
\r
1449 function layerBack(){
\r
1450 if( currentElement === null) return;
\r
1451 if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return;
\r
1452 INFOMATION_WINDOW.update( currentElement);
\r
1453 SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);
\r
1454 var _z = currentElement.z;
\r
1455 LAYER_BACK_BUTTON.visible( _z > 0);
\r
1456 LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
\r
1458 function layerForward(){
\r
1459 if( currentElement === null) return;
\r
1460 if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return;
\r
1461 INFOMATION_WINDOW.update( currentElement);
\r
1462 SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);
\r
1463 var _z = currentElement.z;
\r
1464 LAYER_BACK_BUTTON.visible( _z > 0);
\r
1465 LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
\r
1468 if( currentElement === null) return;
\r
1469 buttonBackOrForward( true);
\r
1470 COMIC_ELEMENT_CONTROL.remove( currentElement);
\r
1471 SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true);
\r
1472 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
1475 if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return;
\r
1476 pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), currentElement );
\r
1477 buttonBackOrForward( true );
\r
1479 function change(){
\r
1480 if( currentElement === null) return;
\r
1481 buttonBackOrForward( true);
\r
1482 pettanr.premiumSatge.bootInOverlay( currentElement.getArtistID(), currentElement.resourcePicture );
\r
1484 function onImageSelect( resourcePicture ){
\r
1485 currentElement.resourcePicture( resourcePicture );
\r
1489 jqStage = jqEditor;
\r
1490 jqConsoleTail = $( '#comic-element-consol-tail');
\r
1491 jqImgConsole = $( '#image-element-consol').hide();
\r
1492 var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0));
\r
1493 imgConsoleWidth = imgConsoleSize.width;
\r
1494 imgConsoleHeight = imgConsoleSize.height;
\r
1496 jqTextConsole = $( '#text-element-consol').hide();
\r
1497 var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0));
\r
1498 textConsoleWidth = textConsoleSize.width;
\r
1499 textConsoleHeight = textConsoleSize.height;
\r
1501 jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();
\r
1502 jqConsoleParent = jqConsoleWrapper.parent();
\r
1504 $( '#edit-text-button').click( edit);
\r
1505 $( '#delete-image-button, #delete-text-button').click( del);
\r
1506 $( '#change-image-button').click( change);
\r
1507 $( '#layer-forward-button, #forward-text-button').click( layerForward);
\r
1508 $( '#layer-back-button, #back-text-button').click( layerBack);
\r
1510 delete CONSOLE_CONTROLER.init;
\r
1512 show: function( _currentElement, _w, _h ){
\r
1513 CONSOLE_CONTROLER.init && CONSOLE_CONTROLER.init();
\r
1515 visible === false && jqConsoleWrapper.show();
\r
1517 currentElement = _currentElement;
\r
1518 var _currentType = _currentElement.type,
\r
1519 _z = _currentElement.z;
\r
1520 if( currentType !== _currentType){
\r
1521 currentType = _currentType;
\r
1522 jqImgConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_IMAGE);
\r
1523 jqTextConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_TEXT);
\r
1524 consoleWidth = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
\r
1525 consoleHeight = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
\r
1527 consoleX = Math.floor( ( _w -consoleWidth) /2);
\r
1529 LAYER_BACK_BUTTON.visible( _z > 0);
\r
1530 LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
\r
1531 DELETE_BUTTON.visible( true);
\r
1532 EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT);
\r
1533 CHANGE_BUTTON.visible( false);
\r
1535 if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){
\r
1536 consoleY = Math.floor( ( _h -consoleHeight) /2);
\r
1537 jqConsoleWrapper.css( {
\r
1540 }).removeClass( 'console-out');
\r
1542 consoleY = _h +tailSize;
\r
1543 jqConsoleWrapper.css( {
\r
1546 }).addClass( 'console-out');
\r
1549 hide: function (){
\r
1550 visible === true && jqConsoleWrapper.hide();
\r
1552 currentElement = null;
\r
1553 LAYER_BACK_BUTTON.visible( false);
\r
1554 LAYER_FORWARD_BUTTON.visible( false);
\r
1555 DELETE_BUTTON.visible( false);
\r
1556 EDIT_BUTTON.visible( false);
\r
1557 CHANGE_BUTTON.visible( false);
\r
1559 x: function(){ return consoleX;},
\r
1560 y: function(){ return consoleY;},
\r
1561 w: function(){ return consoleWidth;},
\r
1562 h: function(){ return consoleHeight;},
\r
1563 onMouseMove: function( _mouseX, _mouseY){
\r
1564 if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){
\r
1565 buttonClickable === true && buttonBackOrForward( true);
\r
1568 buttonClickable === false && buttonBackOrForward( false);
\r
1571 onMouseOut: function( _mouseX, _mouseY){
\r
1572 buttonClickable === true && buttonBackOrForward( true);
\r
1577 /* --------------------------------------------------------------------------------------------
\r
1579 * - comicElementOperator
\r
1581 var TAIL_OPERATOR = ( function(){
\r
1582 var MOUSE_CURSOR = updateMouseCursor,
\r
1583 ELM_MOVER = document.getElementById( 'balloon-tail-mover'),
\r
1584 SIZE = pettanr.util.getElementSize( ELM_MOVER).width,
\r
1588 FLOOR = Math.floor,
\r
1589 DEG_TO_RAD = Math.PI / 180,
\r
1590 RAD_TO_DEG = 1 / DEG_TO_RAD,
\r
1591 currentText = null,
\r
1594 balloonW, balloonH, balloonA, radA,
\r
1599 update: function ( _w, _h, _a ){
\r
1600 balloonW = _w !== undefined ? _w : balloonW;
\r
1601 balloonH = _h !== undefined ? _h : balloonH;
\r
1602 balloonA = _a !== undefined ? _a : balloonA;
\r
1603 radA = ( balloonA - 90 ) * DEG_TO_RAD;
\r
1604 tailX = FLOOR( ( ( COS( radA ) / 2 + 0.5 ) * ( balloonW + SIZE )) - SIZE / 2);
\r
1605 tailY = FLOOR( ( ( SIN( radA ) / 2 + 0.5 ) * ( balloonH + SIZE )) - SIZE / 2);
\r
1606 ELM_MOVER.style.left = tailX +'px';
\r
1607 ELM_MOVER.style.top = tailY +'px';
\r
1608 //log.html( [ balloonW, balloonH, balloonA].join());
\r
1610 show: function( _currentText){
\r
1612 * visibilityのほうがいい, display:none だと ie で描画が狂う
\r
1614 ELM_MOVER.style.visibility = '';
\r
1615 TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.angle() );
\r
1616 currentText = _currentText;
\r
1618 hitTest: function( _mouseX, _mouseY){
\r
1619 var _x = tailX -SIZE / 2,
\r
1620 _y = tailY -SIZE / 2;
\r
1621 ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;
\r
1622 ret === true && MOUSE_CURSOR( 'move');
\r
1626 ELM_MOVER.style.visibility = 'hidden';
\r
1627 currentText = null;
\r
1629 onStart: function( _currentText, _mouseX, _mouseY){
\r
1630 if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false;
\r
1631 x = _currentText.x;
\r
1632 y = _currentText.y;
\r
1633 if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true){
\r
1634 w = _currentText.w;
\r
1635 h = _currentText.h;
\r
1636 currentText = _currentText;
\r
1637 startA = _currentText.angle();
\r
1642 onDrag: function( _mouseX, _mouseY){
\r
1643 _mouseX = _mouseX - x - w / 2;
\r
1644 _mouseY = _mouseY - y - h / 2; //Balloonの中心を0,0とする座標系に変換
\r
1645 TAIL_OPERATOR.update( w, h,
\r
1647 ATAN( _mouseY / _mouseX ) * RAD_TO_DEG + ( _mouseX > 0 ? 90 : 270 ) :
\r
1648 _mouseY > 0 ? 180 : 0
\r
1650 currentText && currentText.angle( FLOOR( balloonA + 0.5 ));
\r
1651 INFOMATION_WINDOW.update( currentText );
\r
1653 onFinish: function(){
\r
1654 startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);
\r
1655 startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle());
\r
1656 currentText = null;
\r
1658 onCancel: function(){
\r
1659 currentText.angle( startA);
\r
1660 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA);
\r
1661 currentText = null;
\r
1666 /* --------------------------------------------------------------------------------------------
\r
1668 * - comicElementOperator
\r
1670 var RESIZE_OPERATOR = ( function(){
\r
1671 var MOUSE_CURSOR = updateMouseCursor,
\r
1672 GRID_ENABLED = GRID_CONTROL.enabled;
\r
1674 var HIT_AREA = MOUSE_HIT_AREA,
\r
1675 POSITION_ARRAY = [],
\r
1676 FLOOR = Math.floor,
\r
1677 CURSOR_AND_FLIP = [
\r
1678 { cursor: 'n-resize', v: 3},
\r
1679 { cursor: 'e-resize', h: 2},
\r
1680 { cursor: 'e-resize', h: 1},
\r
1681 { cursor: 'n-resize', v: 0},
\r
1682 { cursor: 'nw-resize', h: 5, v: 6, vh: 7},
\r
1683 { cursor: 'ne-resize', h: 4, v: 7, vh: 6},
\r
1684 { cursor: 'ne-resize', h: 7, v: 4, vh: 5},
\r
1685 { cursor: 'nw-resize', h: 6, v: 5, vh: 4}
\r
1687 elmResizerContainer = document.getElementById( 'comic-element-resizer-container'),
\r
1688 elmResizerContainerStyle = elmResizerContainer.style,
\r
1689 elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,
\r
1690 elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,
\r
1691 elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,
\r
1692 elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,
\r
1694 currentIndex = -1,
\r
1696 currentIsTextElement = false;
\r
1698 elmResizerContainerStyle.display = 'none';
\r
1700 var RESIZE_WORK_ARRAY = [
\r
1701 { x: 0, w: 0, y: 1, h: -1}, //top
\r
1702 { x: 1, w: -1, y: 0, h: 0}, //left
\r
1703 { x: 0, w: 1, y: 0, h: 0}, //right
\r
1704 { x: 0, w: 0, y: 0, h: 1}, //bottom
\r
1705 { x: 1, w: -1, y: 1, h: -1}, //top-left
\r
1706 { x: 0, w: 1, y: 1, h: -1}, //top-right
\r
1707 { x: 1, w: -1, y: 0, h: 1}, //bottom-left
\r
1708 { x: 0, w: 1, y: 0, h: 1} //bottom-right
\r
1710 startX, startY, startW, startH, startFilpV, startFilpH, startAspect,
\r
1711 baseX, baseY, baseW, baseH,
\r
1712 currentX, currentY, currentW, currentH,
\r
1717 function draw( _x, _y, _w, _h){
\r
1718 x = _x !== undefined ? _x : x;
\r
1719 y = _y !== undefined ? _y : y;
\r
1720 w = _w !== undefined ? _w : w;
\r
1721 h = _h !== undefined ? _h : h;
\r
1723 elmResizerContainerStyle.left = x +'px';
\r
1724 elmResizerContainerStyle.top = y +'px';
\r
1725 elmResizerContainerStyle.width = w +'px';
\r
1726 elmResizerContainerStyle.height = h +'px';
\r
1727 elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';
\r
1728 elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';
\r
1729 elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';
\r
1730 elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';
\r
1732 alert( [x, y, w, h].join( ','));
\r
1737 POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);
\r
1738 POSITION_ARRAY.push(
\r
1739 {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5},
\r
1740 {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},
\r
1741 {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},
\r
1742 {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5},
\r
1743 {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},
\r
1744 {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},
\r
1745 {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5},
\r
1746 {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}
\r
1750 function update( _x, _y, _w, _h){
\r
1751 x = _x !== undefined ? _x : currentX;
\r
1752 y = _y !== undefined ? _y : currentY;
\r
1753 w = _w !== undefined ? _w : currentW;
\r
1754 h = _h !== undefined ? _h : currentH;
\r
1756 if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){
\r
1757 if( startAspect >= 1){
\r
1759 w = Math.floor( startAspect * h);
\r
1760 x = x +( currentIndex % 2 === 0 ? _w -w : 0);
\r
1763 h = Math.floor( w / startAspect);
\r
1764 y = y + ( currentIndex <= 5 ? _h -h : 0);
\r
1767 draw( x, y, w, h);
\r
1768 currentElement.resize( x, y, w, h);
\r
1769 currentIsTextElement === true && TAIL_OPERATOR.update( w, h);
\r
1770 CONSOLE_CONTROLER.show( currentElement, w, h);
\r
1771 INFOMATION_WINDOW.update( currentElement);
\r
1774 function flip( _flipH, _flipV){
\r
1775 var p = CURSOR_AND_FLIP[ currentIndex];
\r
1776 currentIndex = _flipH === true || _flipV === true ? p[
\r
1777 _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')
\r
1779 MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);
\r
1780 elmResizerContainer.className = 'current-resizer-is-' +currentIndex;
\r
1781 currentElement.flip( _flipH, _flipV);
\r
1785 index: function( _mouseX, _mouseY){
\r
1787 for( i=4; i<8; i++){
\r
1788 p = POSITION_ARRAY[ i];
\r
1789 if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
\r
1790 MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);
\r
1791 elmResizerContainer.className = 'current-resizer-is-' +i;
\r
1792 return currentIndex = i;
\r
1795 for( i=0; i<4; i++){
\r
1796 p = POSITION_ARRAY[ i];
\r
1797 if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
\r
1798 MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);
\r
1799 elmResizerContainer.className = 'current-resizer-is-' +i;
\r
1800 return currentIndex = i;
\r
1803 MOUSE_CURSOR( '');
\r
1804 elmResizerContainer.className = '';
\r
1807 show: function( _currentElement){
\r
1808 currentElement = _currentElement;
\r
1809 currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
\r
1810 elmResizerContainerStyle.display = '';
\r
1813 currentElement = null;
\r
1814 elmResizerContainerStyle.display = 'none';
\r
1816 onStart: function( _currentElement, _mouseX, _mouseY){
\r
1817 currentElement = _currentElement;
\r
1818 currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
\r
1819 if( _currentElement.keepSize === true) return false;
\r
1820 currentIndex = this.index( _mouseX, _mouseY);
\r
1821 if( currentIndex === -1) return false;
\r
1822 offsetX = _mouseX;
\r
1823 offsetY = _mouseY;
\r
1824 startX = baseX = _currentElement.x;
\r
1825 startY = baseY = _currentElement.y;
\r
1826 startW = baseW = _currentElement.w;
\r
1827 startH = baseH = _currentElement.h;
\r
1828 if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){
\r
1829 startFilpV = _currentElement.flipV();
\r
1830 startFilpH = _currentElement.flipH();
\r
1832 startAspect = startW /startH;
\r
1835 onDrag: function( _mouseX, _mouseY){
\r
1836 var com = RESIZE_WORK_ARRAY[ currentIndex],
\r
1837 moveX = _mouseX -offsetX,
\r
1838 moveY = _mouseY -offsetY,
\r
1839 _updated = moveX !== 0 || moveY !== 0,
\r
1848 * Opera 11+ often forget values, why ??
\r
1850 while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){
\r
1851 _x = _x !== undefined ? _x : baseX +moveX *com.x;
\r
1852 _y = _y !== undefined ? _y : baseY +moveY *com.y;
\r
1853 _w = _w !== undefined ? _w : baseW +moveX *com.w;
\r
1854 _h = _h !== undefined ? _h : baseH +moveY *com.h;
\r
1855 error += _thisError === 0 ? 0 : 1;
\r
1857 if( _thisError > 9999){
\r
1859 //alert( 'opera error' +error);
\r
1865 if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){
\r
1868 if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){
\r
1870 if( _w < MIN_ELEMENT_SIZE){
\r
1871 //_x += Math.abs( MIN_ELEMENT_SIZE -_w);
\r
1873 _w = MIN_ELEMENT_SIZE;
\r
1875 if( _h < MIN_ELEMENT_SIZE){
\r
1876 //_y += Math.abs( MIN_ELEMENT_SIZE -_h);
\r
1878 _h = MIN_ELEMENT_SIZE;
\r
1881 if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){
\r
1884 if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){
\r
1886 if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){
\r
1889 baseX = _x = _x +_w;
\r
1891 baseW = _w = _memoryX -_x;
\r
1893 flip( true, false);
\r
1894 flipV = currentElement.flipV();
\r
1896 if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){
\r
1900 baseY = _y = _y +_h;
\r
1902 baseH = _h = _memoryY -_y;
\r
1903 flip( false, true);
\r
1904 flipH = currentElement.flipH();
\r
1909 baseX = _x = _x +_w;
\r
1910 baseY = _y = _y +_h;
\r
1911 baseW = _w = _memoryX -_x;
\r
1912 baseH = _h = _memoryY -_y;
\r
1913 flip( true, true);
\r
1914 flipV = currentElement.flipV();
\r
1915 flipH = currentElement.flipH();
\r
1918 offsetX = _mouseX;
\r
1919 offsetY = _mouseY;
\r
1925 _updated === true && update( _x, _y, _w, _h);
\r
1928 'currentIndex:', currentIndex,
\r
1929 'baseW', baseW, 'baseH', baseH,'<br>',
\r
1930 'mouse', _mouseX, _mouseY,'<br>',
\r
1931 'move', moveX, moveY,'<br>',
\r
1932 'xy', _x, _y, 'wh',_w, _h,'<br>',
\r
1933 'com.w', com.w, 'com.h', com.h,'<br>',
\r
1934 'current',currentW, currentH,'<br>',
\r
1939 onFinish: function(){
\r
1940 MOUSE_CURSOR( '');
\r
1941 if( w === startW && h === startH && x === startX && y === startY) return;
\r
1942 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h);
\r
1943 currentElement.resize( x, y, w, h);
\r
1944 COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH);
\r
1946 onCancel: function(){
\r
1947 MOUSE_CURSOR( '');
\r
1948 COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);
\r
1949 currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
\r
1950 currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
\r
1951 currentElement.animate( startX, startY, startW, startH, angle);
\r
1953 lock: function( _lock){
\r
1954 if( _lock !== undefined){
\r
1955 elmResizerContainerStyle.borderColor = _lock === true ? 'blue' : '';
\r
1960 onShiftUpdate: update,
\r
1961 onCtrlUpdate: update
\r
1965 /* --------------------------------------------------------------------------------------------
\r
1966 * POSITION_OPERATOR
\r
1967 * - comicElementOperator
\r
1969 var POSITION_OPERATOR = ( function(){
\r
1970 var MOUSE_CURSOR = updateMouseCursor,
\r
1971 GRID_ENABLED = GRID_CONTROL.enabled;
\r
1973 var currentElement,
\r
1979 function update( _x, _y){
\r
1980 x = _x !== undefined ? _x : x;
\r
1981 y = _y !== undefined ? _y : y;
\r
1982 RESIZE_OPERATOR.update( x, y);
\r
1983 currentElement.resize( x, y);
\r
1984 INFOMATION_WINDOW.update( currentElement);
\r
1988 onStart: function( _currentElement, _mouseX, _mouseY){
\r
1989 currentElement = _currentElement;
\r
1990 offsetX = _mouseX;
\r
1991 offsetY = _mouseY;
\r
1992 startX = x = _currentElement.x;
\r
1993 startY = y = _currentElement.y;
\r
1994 MOUSE_CURSOR( 'move');
\r
1996 onDrag: function( _mouseX, _mouseY){
\r
1997 var moveX = _mouseX -offsetX,
\r
1998 moveY = _mouseY -offsetY,
\r
1999 _x = startX +moveX,
\r
2000 _y = startY +moveY;
\r
2001 if( GRID_ENABLED() === true){
\r
2002 _x = Math.floor( _x / 10) * 10;
\r
2003 _y = Math.floor( _y / 10) * 10;
\r
2007 onFinish: function(){
\r
2008 MOUSE_CURSOR( '');
\r
2009 if( x === startX && y === startY) return;
\r
2010 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y);
\r
2011 currentElement.resize( x, y);
\r
2012 COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY);
\r
2014 onCancel: function(){
\r
2015 MOUSE_CURSOR( '');
\r
2016 COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY);
\r
2017 currentElement.animate( startX, startY);
\r
2019 onShiftUpdate: update,
\r
2020 onCtrlUpdate: update
\r
2025 /* --------------------------------------------------------------------------------------------
\r
2026 * COMIC_ELEMENT_OPERATION_MANAGER
\r
2028 var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){
\r
2029 var MOUSE_CURSOR = updateMouseCursor,
\r
2030 SAVE = HISTORY_CONTROL.saveState,
\r
2031 GRID_ENABLED = GRID_CONTROL.enabled,
\r
2032 HIT_AREA = MOUSE_HIT_AREA,
\r
2033 currentIsTextElement = false,
\r
2034 currentOperator = null,
\r
2035 currentElement = null,
\r
2036 currentx, currenty, currentw, currenth, angle, flipV, flipH;
\r
2038 function resize( _x, _y, _w, _h, _angle){
\r
2039 currentx = _x !== undefined ? _x : currentx;
\r
2040 currenty = _y !== undefined ? _y : currenty;
\r
2041 currentw = _w !== undefined ? _w : currentw;
\r
2042 currenth = _h !== undefined ? _h : currenth;
\r
2043 angle = _angle !== undefined ? _angle : angle;
\r
2045 RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);
\r
2046 currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);
\r
2047 CONSOLE_CONTROLER.show( currentElement, currentw, currenth);
\r
2048 INFOMATION_WINDOW.update( currentElement);
\r
2050 function show( _currentElement){
\r
2051 currentElement === null && RESIZE_OPERATOR.show( _currentElement);
\r
2052 if( currentElement !== _currentElement){
\r
2053 currentElement = _currentElement;
\r
2055 currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT);
\r
2056 currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();
\r
2058 flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;
\r
2059 flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;
\r
2062 _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,
\r
2063 currentIsTextElement === true ? _currentElement.angle() : 0
\r
2068 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){
\r
2069 currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();
\r
2071 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function( e){
\r
2072 currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();
\r
2074 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function( e){
\r
2075 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
\r
2076 currentOperator = null;
\r
2082 close: function(){
\r
2086 currentElement !== null && RESIZE_OPERATOR.hide();
\r
2087 currentElement = null;
\r
2088 MOUSE_CURSOR( '');
\r
2089 TAIL_OPERATOR.hide();
\r
2090 CONSOLE_CONTROLER.hide();
\r
2091 INFOMATION_WINDOW.update( null);
\r
2094 restoreState: function( arg){
\r
2095 if( arg && arg.length !== 8) return;
\r
2096 var _currentElement = arg[ 0],
\r
2097 _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],
\r
2099 _flipV = arg[ 6], _flipH = arg[ 7];
\r
2100 if( !_currentElement && !currentOperator) return;
\r
2101 _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
\r
2102 _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :
\r
2103 _currentElement.animate( _x, _y, _w, _h, _a);
\r
2104 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
\r
2105 currentOperator = null;
\r
2106 currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);
\r
2108 saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){
\r
2109 startX = startX !== undefined ? startX : currentx;
\r
2110 startY = startY !== undefined ? startY : currenty;
\r
2111 startW = startW !== undefined ? startW : currentw;
\r
2112 startH = startH !== undefined ? startH : currenth;
\r
2113 startA = startA !== undefined ? startA : angle;
\r
2114 startFilpV = startFilpV !== undefined ? startFilpV : flipV;
\r
2115 startFilpH = startFilpH !== undefined ? startFilpH : flipH;
\r
2116 currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState,
\r
2117 [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],
\r
2118 [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH]
\r
2122 return currentOperator !== null;
\r
2124 hitTest: function( _mouseX, _mouseY, _panelElement ){
\r
2125 var _x, _y, _w, _h;
\r
2126 if( _panelElement === currentElement){
\r
2127 var _consoleX = CONSOLE_CONTROLER.x();
\r
2128 _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;
\r
2129 _y = currenty -HIT_AREA;
\r
2130 var _consoleW = CONSOLE_CONTROLER.w();
\r
2131 _w = ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;
\r
2132 var _consoleY = CONSOLE_CONTROLER.y();
\r
2133 _h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;
\r
2135 _x = _panelElement.x -HIT_AREA;
\r
2136 _y = _panelElement.y -HIT_AREA;
\r
2137 _w = _panelElement.w +HIT_AREA *2;
\r
2138 _h = _panelElement.h +HIT_AREA *2;
\r
2140 log.html( [ _x, _y, _w, _h ].join( ' ') );
\r
2141 return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;
\r
2143 onMouseDown: function( _currentElement, _mouseX, _mouseY){
\r
2144 //show( _currentElement);
\r
2145 if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
\r
2146 currentOperator = TAIL_OPERATOR;
\r
2148 if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
\r
2149 currentOperator = RESIZE_OPERATOR;
\r
2151 POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)
\r
2152 currentOperator = POSITION_OPERATOR;
\r
2155 onMouseMove: function( _currentElement, _mouseX, _mouseY){
\r
2156 show( _currentElement);
\r
2157 if( currentOperator !== null){
\r
2158 currentOperator.onDrag( _mouseX, _mouseY);
\r
2160 if( currentElement !== null){
\r
2161 CONSOLE_CONTROLER.onMouseMove( _mouseX -currentx, _mouseY -currenty);
\r
2162 if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentx, _mouseY -currenty) === false){
\r
2163 RESIZE_OPERATOR.index( _mouseX, _mouseY);
\r
2167 onMouseUp: function( _currentElement, _mouseX, _mouseY){
\r
2168 currentOperator !== null && currentOperator.onFinish();
\r
2169 currentOperator = null;
\r
2174 * // COMIC_ELEMENT_OPERATION_MANAGER
\r
2177 var AbstractComicElement = function( COMIC_ELM_TYPE ){
\r
2178 this.type = COMIC_ELM_TYPE;
\r
2179 this.hitTest = function( _mouseX, _mouseY ){
\r
2180 return COMIC_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this );
\r
2182 this.shift = function( _shiftX, _shiftY ){
\r
2183 this.resize( this.x + _shiftX, this.y + _shiftY);
\r
2185 this.busy = function(){
\r
2186 return COMIC_ELEMENT_OPERATION_MANAGER.busy();
\r
2188 this.onMouseMove = function( _mouseX, _mouseY ){
\r
2189 COMIC_ELEMENT_OPERATION_MANAGER.onMouseMove( this, _mouseX, _mouseY );
\r
2191 this.onMouseUp = function( _mouseX, _mouseY ){
\r
2192 COMIC_ELEMENT_OPERATION_MANAGER.onMouseUp( this, _mouseX, _mouseY );
\r
2194 this.onMouseDown = function( _mouseX, _mouseY ){
\r
2195 COMIC_ELEMENT_OPERATION_MANAGER.onMouseDown( this, _mouseX, _mouseY );
\r
2199 /* --------------------------------------------------------------------------------------------
\r
2200 * ImageElementClass
\r
2202 var jqImageElementOrigin;
\r
2203 var ImageElementClass = function( data ){
\r
2204 jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete' ).remove().html() );
\r
2206 var jqWrap = jqImageElementOrigin.clone( true ),
\r
2207 flipH = data.width < 0 ? -1 : 1,
\r
2208 flipV = data.height < 0 ? -1 : 1,
\r
2209 resourcePicture = data.resource_picture,
\r
2210 actualW = data.resource_picture.width,
\r
2211 actualH = data.resource_picture.height,
\r
2212 reversibleImage = null,
\r
2215 function flipReversibleImage(){
\r
2216 reversibleImage && reversibleImage.resize( flipH * w, flipV * h );
\r
2218 function updateResourcePicture( _resourcePicture ){
\r
2219 resourcePicture = _resourcePicture;
\r
2221 actualW = _resourcePicture.width;
\r
2222 actualH = _resourcePicture.height;
\r
2224 var _reversibleImage = pettanr.image.createReversibleImage(
\r
2225 [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),
\r
2226 flipH * w, flipV * h
\r
2228 if( reversibleImage !== null ){
\r
2229 jqWrap.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );
\r
2230 reversibleImage.destroy();
\r
2232 jqWrap.append( _reversibleImage.elm );
\r
2234 reversibleImage = _reversibleImage;
\r
2236 /* global methods */
\r
2243 this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
\r
2244 this.keepSize = false;
\r
2245 this.init = function(){
\r
2246 updateResourcePicture( data.resource_picture );
\r
2247 instance.resize( data.x, data.y, Math.abs( data.width ), Math.abs( data.height ) );
\r
2248 delete instance.init;
\r
2250 this.flip = function( _updateH, _updateV ){
\r
2251 if( _updateH !== true && _updateV !== true ) return;
\r
2252 flipH = _updateH === true ? -flipH : flipH;
\r
2253 flipV = _updateV === true ? -flipV : flipV;
\r
2254 reversibleImage.resize( flipH * w, flipV * h );
\r
2256 this.flipV = function(){ return flipV;}
\r
2257 this.flipH = function(){ return flipH;}
\r
2258 this.resourcePicture = function( _resourcePicture ){
\r
2259 if( _resourcePicture && _resourcePicture !== resourcePicture ){
\r
2260 HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture );
\r
2261 updateResourcePicture( _resourcePicture );
\r
2263 return resourcePicture;
\r
2265 this.getArtistID = function(){
\r
2266 return resourcePicture.artist_id || resourcePicture.artist.id || -1;
\r
2268 this.actualW = function(){ return actualW;}
\r
2269 this.actualH = function(){ return actualH;}
\r
2270 this.resize = function( _x, _y, _w, _h, animate ){
\r
2271 instance.x = x = Type.isFinite( _x ) === true ? _x : x;
\r
2272 instance.y = y = Type.isFinite( _y ) === true ? _y : y;
\r
2273 instance.w = w = Type.isFinite( _w ) === true ? _w : w;
\r
2274 instance.h = h = Type.isFinite( _h ) === true ? _h : h;
\r
2275 jqWrap[ animate === true ? 'animate' : 'css' ]( {
\r
2280 }, 250, flipReversibleImage );
\r
2281 animate !== true && flipReversibleImage();
\r
2283 this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){
\r
2284 flipH = _flipH !== undefined ? _flipH : flipH;
\r
2285 flipV = _flipV !== undefined ? _flipV : flipV;
\r
2286 instance.resize( _x, _y, _w, _h, true );
\r
2288 this.destroy = function(){
\r
2289 delete instance.destroy;
\r
2291 reversibleImage.destroy();
\r
2292 jqWrap.stop().remove();
\r
2293 jqWrap = reversibleImage = resourcePicture = data = instance = null;
\r
2296 ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );
\r
2298 * / ImageElementClass
\r
2299 * --------------------------------------------------------------------------------------------
\r
2303 /* --------------------------------------------------------------------------------------------
\r
2304 * TextElementClass
\r
2308 * 1.speach balloon
\r
2311 * 4.black-box( dq style)
\r
2312 * 5.blue-box( ff style)
\r
2315 var jqTextElementOrigin;
\r
2316 var TextElementClass = function( data ){
\r
2317 jqTextElementOrigin = jqTextElementOrigin || ( function(){
\r
2318 var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),
\r
2319 _MODERN = $( $( '#textElementTemplete').remove().html());
\r
2320 return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;
\r
2323 var JQ_WRAPPER = jqTextElementOrigin.clone( true ),
\r
2324 elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ),
\r
2325 type = data.balloon_template_id,
\r
2326 text = ( function(){
\r
2327 var _speachs = data.speeches_attributes;
\r
2328 for( var k in _speachs ){
\r
2329 return _speachs[ k ].content || '';
\r
2333 balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),
\r
2337 JQ_WRAPPER.find( 'img' ).eq( 0 ).replaceWith( balloon.elm );
\r
2339 function updateType( _type ){
\r
2340 if( type !== _type ){
\r
2341 type = _type || type;
\r
2342 balloon.type( type );
\r
2345 function updateAngle( _a ){
\r
2346 if( _a !== undefined && a !== _a ){
\r
2347 a = _a !== undefined ? _a : a;
\r
2348 balloon.angle( a );
\r
2351 function updateText( _text ){
\r
2352 text = _text || text || '';
\r
2353 elmText.firstChild.data = text;
\r
2355 function resizeBalloon(){
\r
2356 balloon && balloon.resize( a, w, h );
\r
2359 /* global methods */
\r
2360 this.$ = JQ_WRAPPER;
\r
2366 this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
\r
2367 this.init = function(){
\r
2369 instance.resize( data.x, data.y, data.width, data.height, data.tail );
\r
2370 delete instance.init;
\r
2372 this.angle = function( _a ){
\r
2373 _a !== undefined && instance.resize( x, y, w, h, _a );
\r
2376 this.text = function( _text ){
\r
2377 if( _text && text !== _text) {
\r
2378 HISTORY_CONTROL.saveState( updateText, text || '', _text );
\r
2379 updateText( _text );
\r
2383 this.resize = function( _x, _y, _w, _h, _a, animate ){
\r
2384 instance.x = x = _x !== undefined ? _x : x;
\r
2385 instance.y = y = _y !== undefined ? _y : y;
\r
2386 instance.w = w = _w !== undefined ? _w : w;
\r
2387 instance.h = h = _h !== undefined ? _h : h;
\r
2388 a = _a !== undefined ? _a : a;
\r
2390 JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {
\r
2395 }, 250, resizeBalloon
\r
2397 animate !== true && resizeBalloon();
\r
2399 this.animate = function ( _x, _y, _w, _h, _a ){
\r
2400 instance.resize( _x, _y, _w, _h, _a, true );
\r
2402 this.destroy = function(){
\r
2403 delete instance.destroy;
\r
2405 JQ_WRAPPER.stop().remove();
\r
2406 balloon.destroy();
\r
2407 JQ_WRAPPER = elmText = data = balloon = instance = null;
\r
2410 TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );
\r
2412 /* --------------------------------------------------------------------------------------------
\r
2413 * COMIC_ELEMENT_CONTROL
\r
2414 * - mouseEventListener
\r
2416 var COMIC_ELEMENT_CONTROL = ( function(){
\r
2417 var SAVE = HISTORY_CONTROL.saveState,
\r
2418 ELM_CONTAINER = document.getElementById( 'comic-element-container'),
\r
2419 currentElement = null,
\r
2420 currentLockTest = false,
\r
2421 currentLock = false,
\r
2422 panelX, panelY, panelW, panelH,
\r
2425 * append, remove, replace
\r
2427 * comicElement には、z-position と dom-index がある。
\r
2428 * z-position は 表示上の位置。大きいほど前に表示される（ z-index）
\r
2429 * dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。
\r
2431 * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。
\r
2432 * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。
\r
2434 * append comicElement
\r
2435 * 1. 新しい comicElement の z-position を得る
\r
2436 * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（PANEL_ELEMENT_ARRAY）
\r
2437 * zが大きいほど、PANEL_ELEMENT_ARRAYの先頭へ。
\r
2438 * 3. dom位置は、PANEL_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。
\r
2441 * remove comicElement
\r
2445 function appendComicElement( _panelElement ) {
\r
2446 var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1,
\r
2447 l = PANEL_ELEMENT_ARRAY.length,
\r
2448 _jqElm = _panelElement.$.stop().css( {
\r
2453 PANEL_ELEMENT_ARRAY.unshift( _panelElement );
\r
2454 // ELM_CONTAINER.appendChild( _jqElm.get( 0 ));
\r
2458 for( var i = 0; i < l; ++i ){
\r
2459 if( PANEL_ELEMENT_ARRAY[ i ].z < z ) break;
\r
2462 PANEL_ELEMENT_ARRAY.push( _panelElement );
\r
2463 //ELM_CONTAINER.appendChild( _jqElm.get( 0 ));
\r
2465 PANEL_ELEMENT_ARRAY.splice( i, 0, _panelElement );
\r
2466 //PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm );
\r
2472 function removeComicElement( _panelElement ) {
\r
2473 var l = PANEL_ELEMENT_ARRAY.length;
\r
2474 for( var i=0; i<l; ++i ){
\r
2475 if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){
\r
2476 PANEL_ELEMENT_ARRAY.splice( i, 1 );
\r
2478 _panelElement.$.stop().css( {
\r
2481 }).fadeOut( onFadeOut );
\r
2482 currentElement = currentElement === _panelElement ? null : currentElement;
\r
2487 function onFadeOut(){
\r
2488 this.parentNode.removeChild( this );
\r
2490 function restoreComicElement( arg ){
\r
2491 var isAppend = arg[ 0 ],
\r
2492 comicElement = arg[ 1 ];
\r
2493 isAppend === true ? appendComicElement( comicElement ) : removeComicElement( comicElement );
\r
2496 * PANEL_ELEMENT_ARRAY の順番を基準に、zの再計算
\r
2499 function renumber(){
\r
2500 var l = PANEL_ELEMENT_ARRAY.length,
\r
2501 _panelElement, jqElm, jqNext;
\r
2502 for( var i=0; i < l; ++i){
\r
2503 _panelElement = PANEL_ELEMENT_ARRAY[ i ];
\r
2504 jqElm = _panelElement.$;
\r
2505 i === 0 && ELM_CONTAINER.appendChild( jqElm.get( 0 ));
\r
2506 jqNext && jqNext.before( jqElm );
\r
2507 if( phase === 1 ) _panelElement.z = l - i - 1;
\r
2511 function replaceComicElement( _panelElement, goForward ){
\r
2512 // PANEL_ELEMENT_ARRAYの再構築
\r
2513 var l = PANEL_ELEMENT_ARRAY.length,
\r
2515 for( var j = 0; j < l; ++j ){
\r
2516 if( PANEL_ELEMENT_ARRAY[ j ] === _panelElement ){
\r
2521 if( i === -1) return false;
\r
2522 if( goForward === true ){
\r
2523 if( i === 0 ) return false;
\r
2524 PANEL_ELEMENT_ARRAY.splice( i, 1 );
\r
2525 PANEL_ELEMENT_ARRAY.splice( i - 1, 0, _panelElement );
\r
2527 if( i === l - 1 ) return false;
\r
2528 PANEL_ELEMENT_ARRAY.splice( i, 1 );
\r
2529 PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );
\r
2534 function restoreReplaceElement( arg ){
\r
2535 replaceComicElement( arg[ 0], arg[ 1]);
\r
2537 function onTextInput( _panelElement ){
\r
2538 appendComicElement( _panelElement );
\r
2539 SAVE( restoreComicElement, [ false, _panelElement ], [ true, _panelElement ], true );
\r
2544 log = $( '#operation-catcher-log');
\r
2546 delete COMIC_ELEMENT_CONTROL.init;
\r
2549 COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();
\r
2551 close: function(){
\r
2553 while( PANEL_ELEMENT_ARRAY.length > 0){
\r
2554 _comicElm = PANEL_ELEMENT_ARRAY.shift();
\r
2555 _comicElm.destroy && _comicElm.destroy();
\r
2558 remove: removeComicElement,
\r
2559 restore: restoreComicElement,
\r
2560 replace: replaceComicElement,
\r
2561 restoreReplace: restoreReplaceElement,
\r
2562 onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ){
\r
2564 * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。
\r
2566 if( isResizerTopAction === true){
\r
2567 var _shiftX = _panelW -panelW,
\r
2568 _shiftY = _panelH -panelH,
\r
2569 l = PANEL_ELEMENT_ARRAY.length;
\r
2570 for( var i = 0; i < l; i++){
\r
2571 PANEL_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);
\r
2579 ELM_CONTAINER.style.width = _panelW +'px';
\r
2580 ELM_CONTAINER.style.height = _panelH +'px';
\r
2581 ELM_CONTAINER.style.left = _panelX +'px';
\r
2582 ELM_CONTAINER.style.top = _panelY +'px';
\r
2584 onMouseMove: function( _mouseX, _mouseY ){
\r
2585 var l = PANEL_ELEMENT_ARRAY.length,
\r
2586 _x = _mouseX -panelX,
\r
2587 _y = _mouseY -panelY,
\r
2588 _elm = currentElement;
\r
2590 if( _elm !== null){
\r
2591 currentLockTest = currentLockTest === true && _x === 0 && _y === 0;
\r
2592 if( _elm.busy() === true ){
\r
2593 _elm.onMouseMove( _x, _y);
\r
2596 if( _elm.hitTest( _x, _y) === true ){
\r
2597 _elm.onMouseMove( _x, _y ); // cursor
\r
2600 if( currentLock === true){
\r
2601 currentLockTest = true;
\r
2605 for( var i=0; i<l; i++){
\r
2606 _elm = PANEL_ELEMENT_ARRAY[ i ];
\r
2608 if( _elm.hitTest( _x, _y ) === true ){
\r
2609 _elm.onMouseMove( _x, _y ); // cursor
\r
2610 log.html( [ _x, _y, i].join( ','));
\r
2611 currentElement = _elm;
\r
2614 log.html( [ _elm.x, _elm.y, i].join( ','));
\r
2617 currentElement = null;
\r
2618 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
2621 onMouseUp: function( _mouseX, _mouseY){
\r
2622 var ret = currentElement !== null && currentElement.busy() === true;
\r
2623 ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);
\r
2624 currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY) === true;
\r
2625 RESIZE_OPERATOR.lock( currentLock);
\r
2626 INFOMATION_WINDOW.lock( currentLock);
\r
2629 onMouseDown: function( _mouseX, _mouseY){
\r
2632 if( currentElement === null) return false
\r
2633 currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);
\r
2634 currentLockTest = true;
\r
2638 return currentElement !== null;
\r
2640 createImageElement: function( data ){
\r
2641 if( Type.isObject( data ) === false ){
\r
2642 pettanr.premiumSatge.bootInOverlay( 1, COMIC_ELEMENT_CONTROL.onImageSelect );
\r
2644 COMIC_ELEMENT_CONTROL.onImageSelect( data, true );
\r
2647 onImageSelect: function( data, isPanelPictureData ){
\r
2648 var _panelElement;
\r
2649 if( isPanelPictureData !== true ){
\r
2650 _panelElement = new ImageElementClass( {
\r
2651 resource_picture:data,
\r
2652 x: Math.floor( panelW / 2 - data.width / 2 ),
\r
2653 y: Math.floor( panelH / 2 - data.height / 2 ),
\r
2655 t: PANEL_ELEMENT_ARRAY.length + 1,
\r
2659 _panelElement.init && _panelElement.init();
\r
2660 appendComicElement( _panelElement );
\r
2661 _panelElement.animate( undefined, undefined, Math.abs( data.width ), Math.abs( data.height ) );
\r
2663 _panelElement = new ImageElementClass( data );
\r
2664 _panelElement.init && _panelElement.init();
\r
2665 appendComicElement( _panelElement );
\r
2667 SAVE( restoreComicElement, [ false, _panelElement], [ true, _panelElement ], true );
\r
2669 createTextElement: function( data ){
\r
2670 var _panelElement;
\r
2671 if( Type.isObject( data ) === false ){
\r
2673 balloon_template_id:1,
\r
2676 x: Math.floor( panelW /2 - 100 +Math.random() *10 ),
\r
2677 y: Math.floor( panelH /2 - 100 +Math.random() *10 ),
\r
2679 t: PANEL_ELEMENT_ARRAY.length + 1,
\r
2682 speeches_attributes: {
\r
2688 _panelElement = new TextElementClass( data );
\r
2689 _panelElement.init();
\r
2690 pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), _panelElement, onTextInput );
\r
2692 _panelElement = new TextElementClass( data );
\r
2693 _panelElement.init();
\r
2694 onTextInput( _panelElement );
\r
2701 * end of COMIC_ELEMENT_CONTROL
\r
2706 function updateMouseCursor( _cursor){
\r
2707 if( currentCursor !== _cursor){
\r
2708 currentCursor = _cursor;
\r
2709 setTimeout( update, 0);
\r
2711 function update(){
\r
2712 ELM_MOUSE_EVENT_CHATCHER.style.cursor = currentCursor;
\r
2715 function centering(){
\r
2716 instance.onPaneResize( windowW, windowH);
\r
2718 function mouseEventRellay( e){
\r
2719 var _mouseX = e.pageX,
\r
2720 _mouseY = e.pageY,
\r
2721 rellayMethod = e.type === 'mousedown' ?
\r
2723 ( e.type === 'mousemove' ? 'onMouseMove' : 'onMouseUp');
\r
2724 if( currentListener !== null && currentListener.busy() === true){
\r
2725 currentListener[ rellayMethod]( _mouseX, _mouseY);
\r
2727 currentListener = null;
\r
2728 var l = MOUSE_LISTENER_ARRAY.length,
\r
2730 for( var i=0; i<l; ++i){
\r
2731 _listener = MOUSE_LISTENER_ARRAY[ i];
\r
2732 if( _listener[ rellayMethod]( _mouseX, _mouseY) === true){
\r
2733 currentListener = _listener;
\r
2739 //!document.selection && window.getSelection().removeAllRanges();
\r
2740 e.stopPropagation();
\r
2744 /* grobal method */
\r
2745 this.rootElement = document.getElementById( 'editor' );
\r
2746 this.displayName = pettanr.view.EDITOR;
\r
2747 this.ID = pettanr.view.EDITOR;
\r
2748 this.MIN_WIDTH = 320;
\r
2749 this.MIN_HEIGHT = 320;
\r
2750 this.firstOpen = function(){
\r
2752 * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初
\r
2753 * MENU_BAR_CONTROL,
\r
2755 * COMIC_ELEMENT_CONTROL,
\r
2757 * .busy() === true なら、そのままonMouseMove()にイベントを流す．
\r
2758 * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．
\r
2760 MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);
\r
2764 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering); // ctrl + 0
\r
2765 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering); // ctrl + 0
\r
2766 MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);
\r
2768 * jqMouseEventChacher は透明な要素で、
\r
2769 * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事
\r
2770 * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。
\r
2772 jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)
\r
2773 .mousemove( mouseEventRellay)
\r
2774 .mousedown( mouseEventRellay)
\r
2775 .mouseup( mouseEventRellay)
\r
2776 .mouseout( mouseEventRellay);
\r
2778 delete instance.firstOpen;
\r
2780 this.onOpen = function( _w, _h, _file ){
\r
2783 panelTimming = -1;
\r
2786 var panelW, panelH,
\r
2788 fileData, panelElements, panelElm;
\r
2790 if( pettanr.file.isFileInstance( _file ) === true ){
\r
2791 if( pettanr.driver.isPettanrFileInstance( _file ) === true ){
\r
2792 if( _file.getType() === pettanr.driver.FILE_TYPE.COMIC ){
\r
2793 fileData = _file.read();
\r
2794 panelW = fileData.width;
\r
2795 panelH = fileData.height;
\r
2796 comicID = fileData.id || -1;
\r
2798 if( _file.getType() === pettanr.driver.FILE_TYPE.PANEL ){
\r
2799 fileData = _file.read();
\r
2800 panelW = fileData.width;
\r
2801 panelH = fileData.height;
\r
2802 borderSize = fileData.border;
\r
2803 panelElements = fileData.panel_elements;
\r
2804 comicID = fileData.comic ? fileData.comic.id || -1 : -1;
\r
2805 panelID = fileData.id || -1;
\r
2806 panelTimming = fileData.t || -1;
\r
2807 if( Type.isArray( panelElements ) === true ){
\r
2808 for( var i=0; i<panelElements.length; ++i){
\r
2809 panelElm = panelElements[ i ];
\r
2810 if( panelElm.resource_picture ){
\r
2811 COMIC_ELEMENT_CONTROL.createImageElement( panelElm );
\r
2813 if( panelElm.balloon_template_id ){
\r
2814 COMIC_ELEMENT_CONTROL.createTextElement( panelElm );
\r
2823 jqEditor = jqEditor || $( '#editor');
\r
2825 HISTORY_CONTROL.open();
\r
2827 WINDOWS_CONTROL.open();
\r
2829 GRID_CONTROL.open();
\r
2830 PANEL_CONTROL.open( panelW, panelH, borderSize );
\r
2832 COMIC_ELEMENT_OPERATION_MANAGER.open();
\r
2833 COMIC_ELEMENT_CONTROL.open();
\r
2835 instance.firstOpen !== undefined && instance.firstOpen();
\r
2838 MENU_BAR_CONTROL.open();
\r
2842 instance.onPaneResize( _w, _h );
\r
2846 this.onClose = function(){
\r
2848 HISTORY_CONTROL.close();
\r
2850 WINDOWS_CONTROL.close();
\r
2852 GRID_CONTROL.close();
\r
2853 PANEL_CONTROL.close();
\r
2855 COMIC_ELEMENT_OPERATION_MANAGER.close();
\r
2856 COMIC_ELEMENT_CONTROL.close();
\r
2859 MENU_BAR_CONTROL.open();
\r
2863 this.onPaneResize = function( _windowW, _windowH){
\r
2864 windowW = _windowW || windowW;
\r
2865 windowH = _windowH || windowH;
\r
2869 jqEditor.get( 0).style.height = _windowH +'px';
\r
2870 ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';
\r
2872 WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);
\r
2873 MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);
\r
2874 PANEL_CONTROL.onWindowResize( _windowW, _windowH);
\r
2879 pettanr.comicConsole = pettanr.view.registerApplication( function(){
\r
2881 ID = 'comicConsole',
\r
2882 elmWrap = document.getElementById( 'comic-console-wrapper' ),
\r
2883 elmHeader = document.getElementById( 'comic-console-header' ),
\r
2884 elmProgress = document.getElementById( 'comic-console-progress' ),
\r
2885 inputTitle, inputW, inputH,
\r
2886 comboboxVisible, comboboxEditable,
\r
2887 buttonSubmit, buttonCancel,
\r
2888 elmUploader = null,
\r
2893 isUploading = false,
\r
2895 //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
\r
2897 function clickOK(){
\r
2898 if( !elmForm || !elmIframe || isUploading === true ) return false;
\r
2900 isUploading = true;
\r
2901 elmProgress.innerHTML = '■';
\r
2905 function copyAndSubmit(){
\r
2906 var _inputList = elmForm.getElementsByTagName( 'input' ),
\r
2908 for( var i=0, l= _inputList.length; i<l; ++i){
\r
2909 _input = _inputList[ i ];
\r
2910 _name = _input.name;
\r
2911 if( _name === 'comic[title]'){
\r
2912 _input.value = inputTitle.value();
\r
2914 if( _name === 'comic[width]'){
\r
2915 _input.value = inputW.value();
\r
2917 if( _name === 'comic[height]'){
\r
2918 _input.value = inputH.value();
\r
2921 var _selectList = elmForm.getElementsByTagName( 'select' ),
\r
2922 _select, _optionList;
\r
2923 for( i=0, l= _selectList.length; i<l; ++i){
\r
2924 _select = _selectList[ i ];
\r
2925 _name = _select.name;
\r
2926 _optionList = _select.getElementsByTagName( 'option' )
\r
2927 if( _name === 'comic[visible]'){
\r
2928 _select.selectedIndex = comboboxVisible.selectIndex();
\r
2930 if( _name === 'comic[editable]'){
\r
2931 _select.selectedIndex = comboboxEditable.selectIndex();
\r
2937 elmProgress.innerHTML = 'submit() err..';
\r
2938 isUploading = false;
\r
2939 setTimeout( clickCancel , 3000);
\r
2942 if( pettanr.ua.isIE){
\r
2943 elmIframe.onreadystatechange = detectIframe;
\r
2945 elmIframe.onload = onIframeUpdate;
\r
2947 elmProgress.innerHTML = 'uploading..';
\r
2950 * ie の 場合、readyState をチェック．
\r
2952 function detectIframe(){
\r
2953 if ( elmIframe.readyState === 'complete') {
\r
2954 elmIframe.onreadystatechange = new Function();
\r
2955 elmIframe.onreadystatechange = null;
\r
2959 function onIframeUpdate(){
\r
2960 elmIframe.onload = null;
\r
2961 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
\r
2963 elmProgress.innerHTML = 'success!';
\r
2964 setTimeout( clickCancel , 1000);
\r
2965 isUploading = false;
\r
2968 function clickCancel(){
\r
2969 if( isUploading === true) return false;
\r
2970 pettanr.comicConsole.shutdown();
\r
2972 function detectForm(){
\r
2973 elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];
\r
2975 var selectList = elmForm.getElementsByTagName( 'select' ),
\r
2978 optionList, option;
\r
2979 for( var i=0, l=selectList.length; i<l; ++i ){
\r
2980 select = selectList[ i ];
\r
2981 optionList = select.getElementsByTagName( 'option' );
\r
2982 for( j=0, m=optionList.length; j<m; ++j ){
\r
2983 option = optionList[ j ];
\r
2984 if( select.name === 'comic[visible]' ){
\r
2985 comboboxVisible.createOption( option.innerHTML, option.value, option.selected );
\r
2987 if( select.name === 'comic[editable]' ){
\r
2988 comboboxEditable.createOption( option.innerHTML, option.value, option.selected );
\r
2993 window.clearInterval( timer);
\r
2995 pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );
\r
2996 elmProgress.innerHTML = 'create iframe';
\r
2999 function onCreateIframe( _iframe ){
\r
3000 elmUploader.appendChild( _iframe );
\r
3001 elmIframe = _iframe;
\r
3002 elmForm.target = _iframe.name;
\r
3003 elmProgress.innerHTML = '';
\r
3006 /* grobal method */
\r
3007 this.rootElement = document.getElementById( 'comic-console-wrapper' );
\r
3008 this.displayName = ID;
\r
3010 this.MIN_WIDTH = 320;
\r
3011 this.MIN_HEIGHT = 320;
\r
3012 this.init = function(){
\r
3013 jqWrap = $( '#comic-console-wrapper').hide();
\r
3015 inputTitle = pettanr.form.createInputText( document.getElementById( 'comic-console-title'), null, ID);
\r
3016 inputW = pettanr.form.createInputText( document.getElementById( 'comic-console-width'), null, ID);
\r
3017 inputH = pettanr.form.createInputText( document.getElementById( 'comic-console-height'), null, ID);
\r
3018 comboboxVisible = pettanr.form.createCombobox( document.getElementById( 'comic-console-visible'), null, ID);
\r
3019 comboboxEditable = pettanr.form.createCombobox( document.getElementById( 'comic-console-editable'), null, ID);
\r
3020 buttonSubmit = pettanr.form.createButton( document.getElementById( 'comic-console-post-button'), clickOK, ID);
\r
3021 buttonCancel = pettanr.form.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel, ID);
\r
3023 delete instance.init;
\r
3025 this.onOpen = function( w, h ){
\r
3026 instance.init && instance.init();
\r
3030 inputTitle.focus();
\r
3032 elmUploader = document.createElement( 'div' );
\r
3033 elmUploader.id = 'newcomic';
\r
3034 elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';
\r
3035 elmWrap.appendChild( elmUploader);
\r
3037 var elmScript = document.createElement( 'script');
\r
3038 elmScript.type = 'text\/javascript';
\r
3039 elmScript.src = pettanr.CONST.CREATE_COMIC_JS;
\r
3040 elmWrap.appendChild( elmScript );
\r
3042 elmProgress.innerHTML = 'loading form.';
\r
3044 if( timer === null){
\r
3045 timer = window.setInterval( detectForm, 250);
\r
3048 instance.onPaneResize( w, h );
\r
3050 this.onPaneResize = function( _windowW, _windowH){
\r
3053 left: Math.floor( ( _windowW - jqWrap.width()) /2),
\r
3054 top: Math.floor( ( _windowH - jqWrap.height()) /2)
\r
3058 this.onClose = function(){
\r
3059 elmForm !== null && $( elmUploader ).remove();
\r
3061 isUploading = false;
\r
3063 if( elmScript !== null ){
\r
3064 document.body.removeChild( elmScript);
\r
3065 elmScript = null;
\r
3067 if( timer !== null){
\r
3068 window.clearInterval( timer);
\r
3076 pettanr.uploadConsole = pettanr.view.registerApplication( function(){
\r
3077 var jqWrap, windowW, windowH,
\r
3078 ID = 'uploadConsole',
\r
3079 TARGET_FRAME_NAME = 'targetFrame',
\r
3080 elmContainer = document.getElementById( 'uploader'),
\r
3081 elmProgress = document.getElementById( 'upload-console-progress'),
\r
3087 isUploading = false,
\r
3090 * upload ボタンが押されたらまず iframe をつくる．
\r
3092 function clickOK(){
\r
3093 if( !elmForm || !elmIframe || isUploading === true ) return false;
\r
3094 if( elmFile.value.length === 0) return false;
\r
3095 elmProgress.innerHTML = 'uploading.';
\r
3096 isUploading = true;
\r
3101 * form の target に iframe を指定したのち submit();
\r
3103 function submit(){
\r
3107 elmProgress.innerHTML = 'submit() err..';
\r
3108 isUploading = false;
\r
3109 setTimeout( clickCancel , 3000);
\r
3113 if( pettanr.ua.isIE){
\r
3114 elmIframe.onreadystatechange = detectIframe;
\r
3116 elmIframe.onload = onLoad;
\r
3118 elmProgress.innerHTML = 'uploading..';
\r
3121 * ie の 場合、readyState をチェック．
\r
3123 function detectIframe(){
\r
3124 if ( elmIframe.readyState === 'complete') {
\r
3125 elmIframe.onreadystatechange = new Function();
\r
3126 elmIframe.onreadystatechange = null;
\r
3130 function onLoad(){
\r
3131 elmIframe.onload = null;
\r
3132 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
\r
3133 elmProgress.innerHTML = 'success!';
\r
3134 setTimeout( clickCancel , 1000);
\r
3135 isUploading = false;
\r
3138 function detectForm(){
\r
3139 elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
\r
3141 var _inputList = elmForm.getElementsByTagName( 'input' ),
\r
3143 for( var i=0, l= _inputList.length; i<l; ++i){
\r
3144 _input = _inputList[ i ];
\r
3145 if( _input.type === 'file'){
\r
3148 if( _input.type === 'submit'){
\r
3149 _input.style.display = 'none';
\r
3152 window.clearInterval( timer);
\r
3154 pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
\r
3155 elmProgress.innerHTML = 'create iframe';
\r
3158 function onCreateIframe( _iframe ){
\r
3159 elmContainer.appendChild( _iframe );
\r
3160 elmIframe = _iframe;
\r
3161 elmForm.target = _iframe.name;
\r
3162 elmProgress.innerHTML = '';
\r
3163 instance.onPaneResize( windowW, windowH );
\r
3168 function clickCancel(){
\r
3169 if( isUploading === true) return false;
\r
3170 pettanr.uploadConsole.shutdown();
\r
3174 /* grobal method */
\r
3175 this.rootElement = document.getElementById( 'upload-console-wrapper' );
\r
3176 this.displayName = ID;
\r
3178 this.MIN_WIDTH = 320;
\r
3179 this.MIN_HEIGHT = 320;
\r
3180 this.init = function(){
\r
3181 jqWrap = $( '#upload-console-wrapper').hide();
\r
3182 $( '#upload-console-post-button').click( clickOK );
\r
3183 $( '#upload-console-cancel-button').click( clickCancel );
\r
3185 delete instance.init;
\r
3187 this.onOpen = function( w, h){
\r
3188 instance.init && instance.init();
\r
3190 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
\r
3192 elmScript = document.createElement( 'script');
\r
3193 elmScript.type = 'text\/javascript';
\r
3194 elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;
\r
3195 document.body.appendChild( elmScript);
\r
3199 if( timer === null){
\r
3200 timer = window.setInterval( detectForm, 250);
\r
3203 elmProgress.innerHTML = 'loading form.';
\r
3205 instance.onPaneResize( w, h);
\r
3207 this.onPaneResize = function( _windowW, _windowH){
\r
3208 windowW = _windowW;
\r
3209 windowH = _windowH;
\r
3212 left: Math.floor( ( _windowW -jqWrap.width()) /2),
\r
3213 top: Math.floor( ( _windowH -jqWrap.height()) /2)
\r
3217 this.onClose = function(){
\r
3218 elmForm !== null && $( elmContainer.children ).remove();
\r
3219 elmForm = elmFile = elmIframe = null;
\r
3220 isUploading = false;
\r
3222 if( elmScript !== null ){
\r
3223 document.body.removeChild( elmScript);
\r
3224 elmScript = null;
\r
3226 if( timer !== null){
\r
3227 window.clearInterval( timer);
\r
3234 pettanr.panelConsole = pettanr.view.registerApplication( function(){
\r
3235 var jqWrap, windowW, windowH,
\r
3236 ID = 'panelConsole',
\r
3237 TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',
\r
3238 elmContainer = document.getElementById( 'newpanel'),
\r
3239 elmProgress = document.getElementById( 'panel-console-progress'),
\r
3244 isUploading = false,
\r
3247 * upload ボタンが押されたらまず iframe をつくる．
\r
3249 function clickOK(){
\r
3250 if( !elmForm || !elmIframe || isUploading === true ) return false;
\r
3251 elmProgress.innerHTML = 'uploading.';
\r
3252 isUploading = true;
\r
3257 * form の target に iframe を指定したのち submit();
\r
3259 function submit(){
\r
3263 elmProgress.innerHTML = 'submit() err..';
\r
3264 isUploading = false;
\r
3265 setTimeout( clickCancel , 3000);
\r
3269 if( pettanr.ua.isIE){
\r
3270 elmIframe.onreadystatechange = detectIframe;
\r
3272 elmIframe.onload = onLoad;
\r
3274 elmProgress.innerHTML = 'uploading..';
\r
3277 * ie の 場合、readyState をチェック．
\r
3279 function detectIframe(){
\r
3280 if ( elmIframe.readyState === 'complete') {
\r
3281 elmIframe.onreadystatechange = new Function();
\r
3282 elmIframe.onreadystatechange = null;
\r
3286 function onLoad(){
\r
3287 elmIframe.onload = null;
\r
3288 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
\r
3289 elmProgress.innerHTML = 'success!';
\r
3290 setTimeout( clickCancel , 1000);
\r
3291 isUploading = false;
\r
3294 function detectForm(){
\r
3295 elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
\r
3297 var _inputList = elmForm.getElementsByTagName( 'input' ),
\r
3299 for( var i=0, l= _inputList.length; i<l; ++i){
\r
3300 _input = _inputList[ i ];
\r
3301 if( _input.type === 'submit'){
\r
3302 _input.style.display = 'none';
\r
3305 window.clearInterval( timer);
\r
3307 pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
\r
3308 elmProgress.innerHTML = 'create iframe';
\r
3311 function onCreateIframe( _iframe ){
\r
3312 elmContainer.appendChild( _iframe );
\r
3313 elmIframe = _iframe;
\r
3314 elmForm.target = _iframe.name;
\r
3315 elmProgress.innerHTML = '';
\r
3316 instance.onPaneResize( windowW, windowH );
\r
3321 function clickCancel(){
\r
3322 if( isUploading === true) return false;
\r
3323 pettanr.panelConsole.shutdown();
\r
3327 /* grobal method */
\r
3328 this.rootElement = document.getElementById( 'panel-console-wrapper' );
\r
3329 this.displayName = ID;
\r
3331 this.MIN_WIDTH = 320;
\r
3332 this.MIN_HEIGHT = 320;
\r
3333 this.init = function(){
\r
3334 jqWrap = $( '#panel-console-wrapper').hide();
\r
3335 $( '#panel-console-post-button').click( clickOK );
\r
3336 $( '#panel-console-cancel-button').click( clickCancel );
\r
3338 delete instance.init;
\r
3340 this.onOpen = function( w, h ){
\r
3341 instance.init && instance.init();
\r
3343 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
\r
3345 elmScript = document.createElement( 'script');
\r
3346 elmScript.type = 'text\/javascript';
\r
3347 elmScript.src = pettanr.CONST.CREATE_PANEL_JS;
\r
3348 document.body.appendChild( elmScript);
\r
3352 if( timer === null){
\r
3353 timer = window.setInterval( detectForm, 250 );
\r
3356 elmProgress.innerHTML = 'loading form.';
\r
3358 instance.onPaneResize( w, h );
\r
3360 this.onPaneResize = function( _windowW, _windowH ){
\r
3361 windowW = _windowW;
\r
3362 windowH = _windowH;
\r
3365 left: Math.floor( ( _windowW -jqWrap.width()) /2),
\r
3366 top: Math.floor( ( _windowH -jqWrap.height()) /2)
\r
3370 this.onClose = function(){
\r
3371 elmForm !== null && $( elmContainer.children ).remove();
\r
3372 elmForm = elmIframe = null;
\r
3373 isUploading = false;
\r
3375 if( elmScript !== null ){
\r
3376 document.body.removeChild( elmScript);
\r
3377 elmScript = null;
\r
3379 if( timer !== null){
\r
3380 window.clearInterval( timer);
\r
3387 pettanr.artistConsole = pettanr.view.registerApplication( function(){
\r
3388 var jqWrap, windowW, windowH,
\r
3389 ID = 'artistConsole',
\r
3390 TARGET_FRAME_NAME = 'targetFrameRegisterArtist',
\r
3391 elmContainer = document.getElementById( 'register'),
\r
3392 elmProgress = document.getElementById( 'artist-console-progress'),
\r
3397 isUploading = false,
\r
3400 * upload ボタンが押されたらまず iframe をつくる．
\r
3402 function clickOK(){
\r
3403 if( !elmForm || !elmIframe || isUploading === true ) return false;
\r
3404 elmProgress.innerHTML = 'uploading.';
\r
3405 isUploading = true;
\r
3410 * form の target に iframe を指定したのち submit();
\r
3412 function submit(){
\r
3416 elmProgress.innerHTML = 'submit() err..';
\r
3417 isUploading = false;
\r
3418 setTimeout( clickCancel , 3000);
\r
3422 if( pettanr.ua.isIE){
\r
3423 elmIframe.onreadystatechange = detectIframe;
\r
3425 elmIframe.onload = onLoad;
\r
3427 elmProgress.innerHTML = 'uploading..';
\r
3430 * ie の 場合、readyState をチェック．
\r
3432 function detectIframe(){
\r
3433 if ( elmIframe.readyState === 'complete') {
\r
3434 elmIframe.onreadystatechange = new Function();
\r
3435 elmIframe.onreadystatechange = null;
\r
3439 function onLoad(){
\r
3440 elmIframe.onload = null;
\r
3441 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
\r
3442 elmProgress.innerHTML = 'success!';
\r
3443 setTimeout( clickCancel , 1000);
\r
3444 isUploading = false;
\r
3447 function detectForm(){
\r
3448 elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
\r
3450 var _inputList = elmForm.getElementsByTagName( 'input' ),
\r
3452 for( var i=0, l= _inputList.length; i<l; ++i){
\r
3453 _input = _inputList[ i ];
\r
3454 if( _input.type === 'submit'){
\r
3455 _input.style.display = 'none';
\r
3458 window.clearInterval( timer);
\r
3460 pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
\r
3461 elmProgress.innerHTML = 'create iframe';
\r
3464 function onCreateIframe( _iframe ){
\r
3465 elmContainer.appendChild( _iframe );
\r
3466 elmIframe = _iframe;
\r
3467 elmForm.target = _iframe.name;
\r
3468 elmProgress.innerHTML = '';
\r
3469 instance.onPaneResize( windowW, windowH );
\r
3474 function clickCancel(){
\r
3475 if( isUploading === true) return false;
\r
3476 pettanr.artistConsole.shutdown();
\r
3480 /* grobal method */
\r
3481 this.rootElement = document.getElementById( 'artist-console-wrapper' );
\r
3482 this.displayName = ID;
\r
3484 this.MIN_WIDTH = 320;
\r
3485 this.MIN_HEIGHT = 320;
\r
3486 this.init = function(){
\r
3487 jqWrap = $( '#artist-console-wrapper').hide();
\r
3488 $( '#artist-console-post-button').click( clickOK );
\r
3489 $( '#artist-console-cancel-button').click( clickCancel );
\r
3491 delete instance.init;
\r
3493 this.onOpen = function( w, h ){
\r
3494 instance.init && instance.init();
\r
3496 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
\r
3498 elmScript = document.createElement( 'script' );
\r
3499 elmScript.type = 'text\/javascript';
\r
3500 elmScript.src = pettanr.CONST.REGISTER_ARTIST_JS;
\r
3501 document.body.appendChild( elmScript );
\r
3505 if( timer === null){
\r
3506 timer = window.setInterval( detectForm, 250 );
\r
3509 elmProgress.innerHTML = 'loading form.';
\r
3511 instance.onPaneResize( w, h );
\r
3513 this.onPaneResize = function( _windowW, _windowH ){
\r
3514 windowW = _windowW;
\r
3515 windowH = _windowH;
\r
3518 left: Math.floor( ( _windowW -jqWrap.width()) /2),
\r
3519 top: Math.floor( ( _windowH -jqWrap.height()) /2)
\r
3523 this.onClose = function(){
\r
3524 elmForm !== null && $( elmContainer.children ).remove();
\r
3525 elmForm = elmIframe = null;
\r
3526 isUploading = false;
\r
3528 if( elmScript !== null ){
\r
3529 document.body.removeChild( elmScript);
\r
3530 elmScript = null;
\r
3532 if( timer !== null){
\r
3533 window.clearInterval( timer);
\r
3540 pettanr.outputConsole = pettanr.view.registerApplication( function(){
\r
3541 var FORMAT_LIST = [ 'json[POST]', 'json[GET]', 'XML', 'HTML', 'XHTML', 'MT export', 'Blogger ATOM' ];
\r
3542 var jqWrap, jqOutputArea,
\r
3543 comboboxFormat, inputOption,
\r
3544 buttonGenerate, buttonClose,
\r
3545 ID = 'outputConsole',
\r
3547 comicID, panelID, panelTimming, panelW, panelH, borderSize, panelElementArray,
\r
3549 //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
\r
3551 function clickOK(){
\r
3552 pettanr.outputConsole.shutdown();
\r
3555 function getPanelElementByTiming(){
\r
3556 var i, l = panelElementArray.length;
\r
3557 while( timing < l * 2){
\r
3558 for( i=0; i<l; ++i ){
\r
3559 if( timing === panelElementArray[ i ].timing ){
\r
3561 return panelElementArray[ i ];
\r
3569 function getAsHtmlString( isAbsoluteUrl, isXHTML ){
\r
3572 var HTML_ARRAY = [],
\r
3573 l = panelElementArray.length,
\r
3576 while( HTML_ARRAY.length < l ){
\r
3577 _panelElement = getPanelElementByTiming();
\r
3578 if( _panelElement === null) break;
\r
3579 HTML_ARRAY.push( panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ));
\r
3582 HTML_ARRAY.unshift(
\r
3584 '<div class="panel" ',
\r
3586 'height:', panelH, 'px;',
\r
3587 'background-color:', ';',
\r
3592 HTML_ARRAY.push( '</div>');
\r
3594 return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);
\r
3597 function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){
\r
3599 if( _panelElement.type === 0 ){
\r
3600 url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' );
\r
3603 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',
\r
3604 'width="', _panelElement.w, '" ',
\r
3605 'height="', _panelElement.h, '" ',
\r
3607 'left:', _panelElement.x, 'px;',
\r
3608 'top:', _panelElement.y, 'px;',
\r
3609 'z-index:', _panelElement.z, ';',
\r
3611 isXHTML !== true ? '>' : ' \/>'
\r
3614 url = pettanr.balloon.getBalloonUrl( _panelElement.w, _panelElement.h, _panelElement.angle() );
\r
3617 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',
\r
3618 'width="', _panelElement.w, '" ',
\r
3619 'height="', _panelElement.h, '" ',
\r
3621 'left:', _panelElement.x, 'px;',
\r
3622 'top:', _panelElement.y, 'px;',
\r
3623 'z-index:', _panelElement.z, ';',
\r
3625 isXHTML !== true ? '>' : ' \/>',
\r
3626 pettanr.LINE_FEED_CODE_TEXTAREA,
\r
3627 '<div class="balloon" style="',
\r
3628 'left:', _panelElement.x, 'px;',
\r
3629 'top:', _panelElement.y, 'px;',
\r
3630 'width:', _panelElement.w, 'px;',
\r
3631 'height:', _panelElement.h, 'px;',
\r
3632 'z-index:', _panelElement.z,
\r
3633 '"><span>', _panelElement.text(), '<\/span>', '<\/div>'
\r
3639 function getJsonGetString(){
\r
3642 var JSON_STRING_ARRAY = [],
\r
3643 ELEMENT_ARRAY = [],
\r
3644 l = panelElementArray.length,
\r
3645 cr = pettanr.LINE_FEED_CODE_TEXTAREA,
\r
3648 while( ELEMENT_ARRAY.length <= l){
\r
3649 _panelElement = getPanelElementByTiming();
\r
3650 if( _panelElement === null ) break;
\r
3652 ELEMENT_ARRAY.push( _panelElement.type === 0 ? getImageJsonGET( _panelElement ) : balloonToJson( _panelElement ));
\r
3657 '"id": ', panelID, ',', cr,
\r
3658 '"border": ', borderSize, ',', cr,
\r
3659 '"comic_id": ', comicID, ',', cr,
\r
3660 '"resource_picture_id": 1,', cr,
\r
3661 '"x": ', 0, ',', cr,
\r
3662 '"y": ', 0, ',', cr,
\r
3663 '"z": ', 0, ',', cr,
\r
3664 panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',
\r
3665 '"width": ', panelW, ',', cr,
\r
3666 '"height": ', panelH, ',', cr,
\r
3667 '"panel_elements": [', cr,
\r
3668 ELEMENT_ARRAY.join( ',' + cr ), cr,
\r
3674 function getImageJsonGET( _imageElement ){
\r
3675 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
3678 '"resource_picture": {', cr,
\r
3679 '"id": ', _imageElement.resourcePicture().id, ',', cr,
\r
3680 '"ext": ', '"',_imageElement.resourcePicture().ext, '"', cr,
\r
3682 '"x": ', _imageElement.x, ',', cr,
\r
3683 '"y": ', _imageElement.y, ',', cr,
\r
3684 '"z": ', _imageElement.z, ',', cr,
\r
3685 '"width": ', _imageElement.flipH() * _imageElement.w, ',', cr,
\r
3686 '"height": ', _imageElement.flipV() * _imageElement.h, ',', cr,
\r
3687 '"t": ', timing, cr,
\r
3692 function getJsonPostString(){
\r
3695 var JSON_STRING_ARRAY = [],
\r
3697 BALLOON_ARRAY = [],
\r
3698 l = panelElementArray.length,
\r
3700 cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
3702 while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l){
\r
3703 _panelElement = getPanelElementByTiming();
\r
3704 if( _panelElement === null) break;
\r
3705 _panelElement.type === 0 ?
\r
3706 IMAGE_ARRAY.push( [ '"new', timing, '": ', imageToJson( _panelElement ) ].join( '' )) :
\r
3707 BALLOON_ARRAY.push( [ '"new', timing, '": ', balloonToJson( _panelElement ) ].join( '' ) );
\r
3712 '"id": ', panelID, ',', cr,
\r
3713 '"border": ', borderSize, ',', cr,
\r
3714 '"comic_id": ', comicID, ',', cr,
\r
3715 '"resource_picture_id": 1,', cr,
\r
3716 '"x": ', 0, ',', cr,
\r
3717 '"y": ', 0, ',', cr,
\r
3718 '"z": ', 0, ',', cr,
\r
3719 '"t": ', panelTimming, ',', cr,
\r
3720 '"width": ', panelW, ',', cr,
\r
3721 '"height": ', panelH, ',', cr,
\r
3722 '"panel_pictures_attributes": {', cr,
\r
3723 IMAGE_ARRAY.join( ',' + cr ), cr,
\r
3725 '"balloons_attributes": {', cr,
\r
3726 BALLOON_ARRAY.join( ',' + cr ), cr,
\r
3732 function imageToJson( _imageElement ){
\r
3733 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
3736 '"resource_picture_id": ', _imageElement.resourcePicture().id, ',', cr,
\r
3737 '"x": ', _imageElement.x, ',', cr,
\r
3738 '"y": ', _imageElement.y, ',', cr,
\r
3739 '"z": ', _imageElement.z, ',', cr,
\r
3740 '"width": ', _imageElement.flipH() * _imageElement.w, ',', cr,
\r
3741 '"height": ', _imageElement.flipV() * _imageElement.h, ',', cr,
\r
3742 '"t": ', timing, cr,
\r
3747 function balloonToJson( _textElement ){
\r
3748 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
3751 '"balloon_template_id": ', 1, ',', cr,
\r
3752 '"system_picture_id": ', 1, ',', cr,
\r
3753 '"size": ', 1, ',', cr,
\r
3754 '"tail": ', _textElement.angle(), ',', cr,
\r
3755 '"x": ', _textElement.x, ',', cr,
\r
3756 '"y": ', _textElement.y, ',', cr,
\r
3757 '"z": ', _textElement.z, ',', cr,
\r
3758 '"t": ', timing, ',', cr,
\r
3759 '"width": ', _textElement.w, ',', cr,
\r
3760 '"height": ', _textElement.h, ',', cr,
\r
3761 '"speeches_attributes": {', cr,
\r
3762 '"newf', timing, '": {', cr,
\r
3763 '"content": "', _textElement.text(), '",', cr,
\r
3764 '"x": ', _textElement.x, ',', cr,
\r
3765 '"y": ', _textElement.y, ',', cr,
\r
3766 '"t": ', timing, ',', cr,
\r
3767 '"width": ', _textElement.w, ',', cr,
\r
3768 '"height": ', _textElement.h, cr,
\r
3775 function clickGenerate(){
\r
3776 var i = comboboxFormat.selectIndex(),
\r
3777 text = 'sorry...';
\r
3779 text = getJsonPostString();
\r
3782 text = getJsonGetString();
\r
3785 text = getAsHtmlString( false, false );
\r
3789 jqOutputArea.val( text );
\r
3791 function clickClose(){
\r
3792 pettanr.outputConsole.shutdown();
\r
3796 /* grobal method */
\r
3797 this.rootElement = document.getElementById( 'output-console-wrapper' );
\r
3798 this.displayName = ID;
\r
3801 this.MIN_WIDTH = 320;
\r
3802 this.MIN_HEIGHT = 320;
\r
3803 this.init = function(){
\r
3804 jqWrap = $( '#output-console-wrapper').hide();
\r
3805 jqOutputArea = $( '#output-area');
\r
3807 comboboxFormat = pettanr.form.createCombobox( document.getElementById( 'output-console-format' ), null, ID );
\r
3808 for( var i=0, l = FORMAT_LIST.length; i<l; ++i ){
\r
3809 comboboxFormat.createOption( FORMAT_LIST[ i ], null, i === 0 );
\r
3811 inputOption = pettanr.form.createInputText( document.getElementById( 'output-console-option' ), null, ID );
\r
3812 buttonGenerate = pettanr.form.createButton( document.getElementById( 'output-console-generate-button' ), clickGenerate, ID );
\r
3813 buttonClose = pettanr.form.createButton( document.getElementById( 'output-console-close-button' ), clickClose, ID );
\r
3814 delete instance.init;
\r
3816 this.onOpen = function( _w, _h, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElementArray ){
\r
3817 instance.init && instance.init();
\r
3820 instance.onPaneResize( _w, _h );
\r
3823 comicID = _comicID;
\r
3824 panelID = _panelID;
\r
3825 panelTimming = _panelTimming;
\r
3828 borderSize = _borderSize;
\r
3829 panelElementArray = _panelElementArray;
\r
3833 this.onPaneResize = function( _w, _h){
\r
3836 left: Math.floor( ( _w -jqWrap.width()) /2),
\r
3837 top: Math.floor( ( _h -jqWrap.height()) /2)
\r
3841 this.onClose = function(){
\r
3843 jqOutputArea.val('');
\r
OSDN Git Service
