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
40 * - TEXT_EDITOR_CONTROL
\r
41 * - IMAGE_GROUP_EXPROLER
\r
44 * - INFOMATION_WINDOW
\r
46 * - HELP_DOCUMENTS_WINDOW
\r
49 * - WHITE_GLASS_CONTROL
\r
53 * - PanelResizerClass
\r
54 * - PANEL_RESIZER_TOP
\r
55 * - PANEL_RESIZER_BOTTOM
\r
56 * - CONSOLE_CONTROLER
\r
60 * - POSITION_OPERATOR
\r
61 * - COMIC_ELEMENT_OPERATION_MANAGER
\r
63 * - ImageElementClass
\r
64 * - TextElementClass
\r
66 * - COMIC_ELEMENT_CONTROL
\r
70 pettanr.editor = pettanr.view.createApplication( function(){
\r
72 var COMIC_ELEMENT_TYPE_IMAGE = 0,
\r
73 COMIC_ELEMENT_TYPE_TEXT = 1,
\r
74 MOUSE_LISTENER_ARRAY = [],
\r
75 COMIC_ELEMENT_ARRAY = [],
\r
76 ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),
\r
77 MIN_PANEL_HEIGHT = 20,
\r
78 MIN_ELEMENT_SIZE = 19,
\r
79 MOUSE_HIT_AREA = 10,
\r
80 jqMouseEventChacher,
\r
83 currentListener = null,
\r
88 /* ----------------------------------------
\r
90 * - mouseEventListener
\r
101 var MENU_BAR_CONTROL = ( function(){
\r
102 var ELM_BAR = document.getElementById( 'menu-bar'),
\r
103 ELM_ITEM_CLASSNAME = 'menu-bar-item',
\r
104 ELM_ITEM_ORIGN = ( function(){
\r
105 var ret = document.createElement( 'div'),
\r
106 div = document.createElement( 'div'),
\r
107 ul = document.createElement( 'ul');
\r
108 ret.className = ELM_ITEM_CLASSNAME;
\r
109 ret.appendChild( div);
\r
110 ret.appendChild( ul);
\r
113 ELM_SELECTION_ORIGN = ( function(){
\r
114 var ret = document.createElement( 'li'),
\r
115 a = document.createElement( 'a'),
\r
116 span = document.createElement( 'span'),
\r
117 key = document.createElement( 'kbd');
\r
118 a.appendChild( span);
\r
119 a.appendChild( key);
\r
120 ret.appendChild( a);
\r
125 barH = pettanr.util.getElementSize( ELM_BAR).height,
\r
126 itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,
\r
127 selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width,
\r
129 ELM_BAR.style.top = ( -barH) +'px';
\r
131 var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){
\r
132 var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),
\r
133 ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0],
\r
134 elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0];
\r
137 elmShortcut.innerHTML = shortcut;
\r
139 elmShortcut.parentNode.removeChild( elmShortcut);
\r
141 elmShortcut = null;
\r
143 container.appendChild( ELM_WRAPPER);
\r
145 updateTitle( title);
\r
146 updateVisible( visible);
\r
148 function updateTitle( _title){
\r
149 ELM_TITLE.innerHTML = title = _title;
\r
151 function updateVisible( _visible){
\r
152 if( _visible !== undefined){
\r
153 visible = !!_visible;
\r
154 ELM_WRAPPER.className = visible === true ? '' : 'disabled';
\r
159 title: function( _title){
\r
160 _title !== undefined && updateTitle( _title);
\r
163 visible: function( _visible){
\r
164 visible !== !!_visible && updateVisible( _visible);
\r
167 separateAfter: separateAfter
\r
171 var MenuBarItemClass = function( title){
\r
172 var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),
\r
173 ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],
\r
174 ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],
\r
175 INDEX = ITEM_ARRAY.length,
\r
176 SELECTION_CALLBACK_ARRAY = [],
\r
179 ELM_TITLE.innerHTML = title;
\r
181 ELM_WRAPPER.style.left = ( itemW * INDEX) +'px';
\r
182 ELM_BAR.appendChild( ELM_WRAPPER);
\r
184 function onClick( e){
\r
186 i = pettanr.util.getChildIndex( this.parentNode, this);
\r
187 i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);
\r
188 e.stopPropagation();
\r
195 $( ELM_SELECTION).children( 'li').click( onClick);
\r
199 if( visible === true) return;
\r
200 jqStage.append( ELM_WRAPPER);
\r
201 ELM_WRAPPER.className = ELM_ITEM_CLASSNAME +'-focus';
\r
202 this.onShow && setTimeout( this.onShow, 0);
\r
206 if( visible === false) return;
\r
207 ELM_BAR.appendChild( ELM_WRAPPER);
\r
208 ELM_WRAPPER.className = ELM_ITEM_CLASSNAME;
\r
209 this.onHide && setTimeout( this.onHide, 0);
\r
212 createSelection: function( title, shortcut, callback, visible, separateBefore, separateAfter){
\r
213 var ret = MenubarSelectionClass.apply( {}, [ ELM_SELECTION, title, shortcut, visible, separateAfter]),
\r
214 before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null;
\r
215 SELECTION_CALLBACK_ARRAY.push( callback);
\r
216 if( before !== null && ( separateBefore === true || before.separateAfter === true)){
\r
217 ret.elm.style.borderTop = '1px solid #ccc';
\r
225 function createMenubarItem( title){
\r
226 var _item = new MenuBarItemClass( title);
\r
227 ITEM_ARRAY.push( _item);
\r
232 jqStage = jqEditor;
\r
233 jqBar = $( ELM_BAR).animate( { top: 0});
\r
235 var l = ITEM_ARRAY.length;
\r
236 for( var i=0; i<l; ++i){
\r
237 ITEM_ARRAY[ i].init();
\r
240 delete MENU_BAR_CONTROL.init;
\r
243 MENU_BAR_CONTROL.init && MENU_BAR_CONTROL.init();
\r
244 // ELM_BAR.style.top = ( -barH) +'px';
\r
248 var l = ITEM_ARRAY.length;
\r
249 for( var i=0; i<l; ++i){
\r
250 ITEM_ARRAY[ i].hide();
\r
254 onMouseMove: function( _mouseX, _mouseY){
\r
255 if( barH >= _mouseY){
\r
258 var l = ITEM_ARRAY.length;
\r
259 for( var i=0; i<l; ++i){
\r
260 ITEM_ARRAY[ i].hide();
\r
264 onMouseUp: function( _mouseX, _mouseY){
\r
267 onMouseDown: function( _mouseX, _mouseY){
\r
268 var l = ITEM_ARRAY.length;
\r
269 if( barH < _mouseY || itemW * l < _mouseX) return false;
\r
270 for( var i=0; i<l; ++i){
\r
271 if( i * itemW <= _mouseX && _mouseX < ( i +1) * itemW){
\r
272 ITEM_ARRAY[ i].show();
\r
274 ITEM_ARRAY[ i].hide();
\r
279 busy: function( _busy){
\r
282 onWindowResize: function( _windowW, _windowH){
\r
285 QUIT: createMenubarItem( 'Quit'),
\r
286 EDIT: createMenubarItem( 'Edit'),
\r
287 WINDOW: createMenubarItem( 'Window'),
\r
288 HELP: pettanr.util.extend( createMenubarItem( 'Help'), {
\r
289 createAjaxSelection: function( callback){
\r
290 var elmLoading = document.createElement( 'li'),
\r
292 elmSelection = this.elm.getElementsByTagName( 'ul')[ 0];
\r
293 elmSelection.appendChild( elmLoading);
\r
294 elmLoading.className = 'loading';
\r
295 elmLoading.style.height = '90px';
\r
297 this.onShow = callback;
\r
300 delete this.createAjaxSelection;
\r
302 elmSelection.removeChild( elmLoading);
\r
303 $( elmSelection).children( 'li').click( that.onClick);
\r
304 elmLoading = elmSelection = null;
\r
305 delete that.onShow;
\r
314 /* ----------------------------------------
\r
318 var HISTORY_CONTROL = ( function() {
\r
319 var STACK_BACK = [],
\r
320 STACK_FORWARD = [],
\r
321 MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false),
\r
322 MENUBAR_FORWARD = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', forward, false, false, true),
\r
325 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, false, true, back); // ctrl + Z
\r
326 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, true, true, forward); // ctrl + shift + Z
\r
327 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 89, false, true, forward); // ctrl + Y
\r
331 * currentを控えてSTACK_FORWARD.push(current)
\r
332 * STACK_BACK.pop()を実行してcurrentに
\r
334 if( STACK_BACK.length === 0) return;
\r
336 var state = STACK_BACK.pop();
\r
337 state && state.fn( state.argBack);
\r
338 MENUBAR_BACK.visible( STACK_BACK.length !== 0);
\r
339 SAVE_CONTROL.panelUpdated( STACK_BACK.length !== 0);
\r
341 STACK_FORWARD.push( state);
\r
342 MENUBAR_FORWARD.visible( true);
\r
344 function forward(){
\r
345 if( STACK_FORWARD.length === 0) return;
\r
347 var state = STACK_FORWARD.pop();
\r
348 state.fn( state.argForword);
\r
349 MENUBAR_FORWARD.visible( STACK_FORWARD.length !== 0);
\r
351 STACK_BACK.push( state);
\r
352 MENUBAR_BACK.visible( true);
\r
353 SAVE_CONTROL.panelUpdated( true);
\r
355 function destroyStack( _stack, _destroy){
\r
358 var _argBack = _stack.argBack,
\r
359 _argForword = _stack.argForword,
\r
361 if( typeof _argBack.length === 'number'){ // isArray
\r
362 while( _argBack.length > 0){
\r
363 _value = _argBack.shift();
\r
364 _destroy === true && typeof _value.destroy === 'function' && _value.destroy();
\r
367 if( typeof _argForword.length === 'number'){
\r
368 while( _argForword.length > 0){
\r
369 _value = _argForword.shift();
\r
370 _destroy === true && typeof _value.destroy === 'function' && _value.destroy();
\r
376 log = $( '#history-log');
\r
377 delete HISTORY_CONTROL.init;
\r
380 HISTORY_CONTROL.init && HISTORY_CONTROL.init();
\r
383 MENUBAR_BACK.visible( false);
\r
384 MENUBAR_FORWARD.visible( false);
\r
385 while( STACK_BACK.length > 0){
\r
386 destroyStack( STACK_BACK.shift(), true);
\r
388 while( STACK_FORWARD.length > 0){
\r
389 destroyStack( STACK_FORWARD.shift(), true);
\r
392 saveState: function( _function, _argBack, _argForword, _destroy) {
\r
396 argForword: _argForword,
\r
399 MENUBAR_BACK.visible( true);
\r
400 SAVE_CONTROL.panelUpdated( true);
\r
403 while( STACK_FORWARD.length > 0){
\r
404 _stack = STACK_FORWARD.shift();
\r
405 destroyStack( _stack, _stack.destroy);
\r
407 MENUBAR_FORWARD.visible( false);
\r
413 /* ----------------------------------------
\r
417 var OUTPUT_CONSOLE = ( function(){
\r
418 var jqWrap, jqOutputArea,
\r
419 ID = 'outputConsole';
\r
420 //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
\r
424 jqOutputArea.val('');
\r
426 function clickOK(){
\r
427 pettanr.overlay.hide();
\r
432 this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();
\r
433 jqOutputArea = $( '#output-area');
\r
434 delete OUTPUT_CONSOLE.init;
\r
437 show: function( _text){
\r
441 pettanr.overlay.show( this);
\r
444 left: Math.floor( ( windowW -jqWrap.width()) /2),
\r
445 top: Math.floor( ( windowH -jqWrap.height()) /2)
\r
449 jqOutputArea.val( _text).focus();
\r
451 onWindowResize: function(){
\r
454 left: Math.floor( ( windowW -jqWrap.width()) /2),
\r
455 top: Math.floor( ( windowH -jqWrap.height()) /2)
\r
464 /* ----------------------------------------
\r
468 var SAVE_CONTROL = ( function(){
\r
469 var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),
\r
470 SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),
\r
471 SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),
\r
472 SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),
\r
473 QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),
\r
477 // 本来は os.application.close();
\r
478 pettanr.view.show( 0 );
\r
481 function outputAsHtml(){
\r
482 OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));
\r
484 function outputAsJsonString(){
\r
485 OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());
\r
488 open: function(){},
\r
489 close: function(){},
\r
491 panelUpdated: function( _updated){
\r
492 if( _updated !== undefined && updated !== _updated){
\r
493 SAVE.visible( !!_updated);
\r
494 SAVE_AND_QUIT.visible( !!_updated);
\r
495 updated = !!_updated;
\r
505 /* ----------------------------------------
\r
509 var TEXT_EDITOR_CONTROL = ( function(){
\r
510 var jqWrap, jqTextarea, jqButton,
\r
511 textElement, onUpdateFunction,
\r
513 //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
\r
517 textElement = onUpdateFunction = null;
\r
519 function clickOK(){
\r
520 pettanr.overlay.hide();
\r
521 textElement && textElement.text( jqTextarea.val());
\r
522 onUpdateFunction && onUpdateFunction( textElement);
\r
527 this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();
\r
528 jqTextarea = $( '#speach-editor').keydown( function( e){
\r
529 if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){
\r
531 e.preventDefault();
\r
533 e.cancelBubble = true;
\r
534 e.returnValue = false;
\r
538 jqButton = $( '#speach-edit-complete-button').click( clickOK);
\r
539 delete TEXT_EDITOR_CONTROL.init;
\r
542 show: function( _textElement, _onUpdateFunction){
\r
543 textElement = _textElement;
\r
544 onUpdateFunction = _onUpdateFunction || null;
\r
545 pettanr.overlay.show( this);
\r
546 var h = _textElement.h;
\r
547 jqWrap.show().css( {
\r
548 left: _textElement.x +PANEL_CONTROL.x(),
\r
549 top: _textElement.y +PANEL_CONTROL.y(),
\r
550 width: _textElement.w,
\r
553 jqTextarea.val( _textElement.text()).focus();
\r
556 * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。
\r
558 pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){
\r
560 while( jqTextarea.height() < h){
\r
562 jqTextarea.attr( 'rows', rows);
\r
564 rows > 1 && jqTextarea.attr( 'rows', rows -1);
\r
567 onWindowResize: function(){
\r
568 textElement && this.show( textElement);
\r
575 /* ----------------------------------------
\r
576 * Image Group Exproler
\r
579 var IMAGE_GROUP_EXPROLER = ( function(){
\r
580 var ICON_ARRAY = [],
\r
582 containerW, containerH, wrapX,
\r
583 jqWrap, jqContainer, jqItemOrigin,
\r
585 jqName, jqButton, buttonW,
\r
586 //onUpdateFunction,
\r
587 _g_onUpdateFunction,
\r
589 onEnterInterval = null;
\r
591 var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',
\r
592 THUMB_PATH = BASE_PATH, // + 'thumbnail/',
\r
593 LIMIT_FILESIZE = 1024 * 10; // 10KB
\r
597 "created_at": "2011-11-13T08:57:39Z",
\r
602 "updated_at": "2011-11-13T08:57:39Z",
\r
606 "created_at": "2011-11-13T08:57:54Z",
\r
611 "updated_at": "2011-11-13T08:57:54Z",
\r
615 "created_at": "2011-11-13T08:58:06Z",
\r
620 "updated_at": "2011-11-13T08:58:06Z",
\r
624 "created_at": "2011-11-13T08:58:23Z",
\r
629 "updated_at": "2011-11-13T08:58:23Z",
\r
633 "created_at": "2011-11-13T08:58:33Z",
\r
635 "filesize": 11061,
\r
638 "updated_at": "2011-11-13T08:58:33Z",
\r
642 "created_at": "2011-11-20T09:50:43Z",
\r
647 "updated_at": "2011-11-20T09:50:43Z",
\r
651 "created_at": "2011-11-20T09:50:55Z",
\r
656 "updated_at": "2011-11-20T09:50:55Z",
\r
660 "created_at": "2011-11-20T11:33:12Z",
\r
662 "filesize": 17919,
\r
665 "updated_at": "2011-11-20T11:33:12Z",
\r
669 "created_at": "2011-11-20T11:33:12Z",
\r
671 "filesize": 17919,
\r
674 "updated_at": "2011-11-20T11:33:12Z",
\r
678 "created_at": "2011-11-20T11:33:12Z",
\r
680 "filesize": 17919,
\r
683 "updated_at": "2011-11-20T11:33:12Z",
\r
687 "created_at": "2011-11-20T11:33:12Z",
\r
689 "filesize": 17919,
\r
692 "updated_at": "2011-11-20T11:33:12Z",
\r
696 "created_at": "2011-11-22T09:17:20Z",
\r
701 "updated_at": "2011-11-22T09:17:20Z",
\r
705 "created_at": "2011-11-22T10:11:07Z",
\r
710 "updated_at": "2011-11-22T10:11:07Z",
\r
714 "created_at": "2011-11-24T09:05:12Z",
\r
719 "updated_at": "2011-11-24T09:05:12Z",
\r
723 "created_at": "2011-11-26T04:52:12Z",
\r
728 "updated_at": "2011-11-26T04:52:12Z",
\r
732 "created_at": "2011-11-26T04:52:12Z",
\r
737 "updated_at": "2011-11-26T04:52:12Z",
\r
741 "created_at": "2011-11-26T04:52:12Z",
\r
746 "updated_at": "2011-11-26T04:52:12Z",
\r
750 "created_at": "2011-11-26T04:52:12Z",
\r
755 "updated_at": "2011-11-26T04:52:12Z",
\r
759 "created_at": "2011-11-26T04:52:12Z",
\r
764 "updated_at": "2011-11-26T04:52:12Z",
\r
770 var ImageGroupIconClass = function( INDEX, data){
\r
771 var JQ_ICON_WRAP = jqItemOrigin.clone( true),
\r
772 SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),
\r
773 LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,
\r
774 reversibleImage = null,
\r
775 onEnterFlag = false,
\r
777 JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');
\r
778 jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));
\r
780 function onImageLoad( url, _imgW, _imgH){
\r
781 if( reversibleImage === null) {
\r
785 imgW = _imgW || data.width || 64;
\r
786 imgH = _imgH || data.height || 64;
\r
787 JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);
\r
788 var zoom = 128 /( imgW > imgH ? imgW : imgH),
\r
789 h = Math.floor( imgH *zoom),
\r
790 w = Math.floor( imgW *zoom);
\r
791 reversibleImage.elm.style.width = w +'px';
\r
792 reversibleImage.elm.style.height = h +'px';
\r
793 reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';
\r
794 reversibleImage.resize( w, h);
\r
795 JQ_ICON_WRAP.click( onClick);
\r
798 function onClick( e){
\r
799 pettanr.overlay.hide();
\r
800 if( _g_onUpdateFunction) {
\r
801 if( LOW_SRC === null){
\r
802 window[ _g_onUpdateFunction]( SRC, imgW, imgH);
\r
803 window[ _g_onUpdateFunction] = null;
\r
805 var _onLoad = pettanr.util.createGlobalFunc( [
\r
806 'function( url, w, h){',
\r
807 'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,', h || ', data.height,');',
\r
808 'window["', _g_onUpdateFunction, '"] = null;',
\r
811 _onError = pettanr.util.createGlobalFunc( [
\r
813 'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',
\r
814 'window["', _g_onUpdateFunction, '"] = null;',
\r
817 pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);
\r
818 window[ _onLoad] = window[ _onError] = undefined;
\r
825 onEnter: function(){
\r
826 if( onEnterFlag === true) return;
\r
827 reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);
\r
828 JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);
\r
829 onEnterFlag = true;
\r
831 destroy: function(){
\r
832 reversibleImage && reversibleImage.destroy();
\r
833 JQ_ICON_WRAP.remove();
\r
834 reversibleImage = JQ_ICON_WRAP = null;
\r
835 delete this.destroy;
\r
841 jqContainer.stop().animate( {
\r
843 top: Math.floor( windowH /2)
\r
847 while( ICON_ARRAY.length > 0){
\r
848 ICON_ARRAY.shift().destroy();
\r
850 onEnterInterval !== null && window.clearTimeout( onEnterInterval);
\r
851 onEnterInterval = _g_onUpdateFunction = null;
\r
853 function onEnterShowImage(){
\r
854 var l = ICON_ARRAY.length,
\r
855 _start = -wrapX /itemW -1,
\r
856 _end = _start + winW /itemW +1;
\r
857 for( var i=0; i<l; ++i){
\r
858 _start < i && i < _end && ICON_ARRAY[ i].onEnter();
\r
860 onEnterInterval !== null && window.clearTimeout( onEnterInterval);
\r
861 onEnterInterval = null;
\r
863 function clickOK(){
\r
864 pettanr.overlay.hide();
\r
867 function onMouseWheel( e, delta){
\r
868 if( winW < containerW){
\r
869 wrapX += delta *WHEEL_DELTA;
\r
870 wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
\r
871 jqContainer.css( { left: wrapX});
\r
873 onEnterInterval !== null && window.clearTimeout( onEnterInterval);
\r
874 onEnterInterval = window.setTimeout( onEnterShowImage, 500);
\r
876 //e.stopPropagation();
\r
881 this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();
\r
882 jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);
\r
883 containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;
\r
884 jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());
\r
885 var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));
\r
886 itemW = itemSize.width;
\r
887 itemH = itemSize.height;
\r
888 jqName = $( '#gruop-name-display');
\r
889 jqButton = $( '#image-gruop-button').click( clickOK);
\r
890 buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;
\r
892 delete IMAGE_GROUP_EXPROLER.init;
\r
895 show: function( _onUpdateFunction){
\r
896 //onUpdateFunction = _onUpdateFunction;
\r
897 if( _onUpdateFunction){
\r
898 _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);
\r
900 _g_onUpdateFunction = null;
\r
902 pettanr.overlay.show( this);
\r
904 var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],
\r
905 l = CURRENT_GROUP_ARRAY.length;
\r
906 for( var i=0; i<l; ++i){
\r
907 ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));
\r
910 containerW = l * itemW;
\r
913 var w = winW > containerW ? winW : containerW,
\r
914 h = windowH > containerH ? containerH : windowH;
\r
921 top: Math.floor( windowH /2)
\r
922 }).stop().animate( {
\r
924 top: Math.floor( windowH /2 -h /2)
\r
928 left: Math.floor( winW /2 -buttonW /2),
\r
929 top: Math.floor( windowH /2 +containerH /2 +10)
\r
932 onEnterShowImage();
\r
934 onWindowResize: function( _windowW, _windowH){
\r
935 var w = _windowW > containerW ? _windowW : containerW,
\r
936 h = _windowH > containerH ? containerH : _windowH,
\r
937 offsetW = Math.floor( _windowW /2 -winW /2);
\r
939 if( offsetW <= 0){ // smaller
\r
945 top: Math.floor( _windowH /2 -h /2)
\r
948 jqContainer.css( { // bigger
\r
951 borderLeftWidth: offsetW
\r
953 top: Math.floor( _windowH /2 -h /2),
\r
958 left: Math.floor( _windowW /2 -buttonW /2),
\r
959 top: Math.floor( _windowH /2 +containerH /2 +10)
\r
961 onEnterShowImage();
\r
964 ID: 'imageGroupExproler'
\r
968 /* ----------------------------------------
\r
971 * - mouseEventListener
\r
973 var WINDOWS_CONTROL = ( function(){
\r
975 * 表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。
\r
977 var DEFAULT_MIN_WINDOW_WIDTH = 200,
\r
978 DEFAULT_MIN_WINDOW_HEIGHT = 200,
\r
980 WINDOW_BODY_BODER_SIZE = 1,
\r
983 currentWindowIndex = -1,
\r
986 var jqWindowOrigin,
\r
988 var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){
\r
989 var MOUSE_CURSOR = updateMouseCursor,
\r
990 MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection(
\r
991 ( visible !== true ? 'show ' : 'hide ') +title,
\r
992 null, onMenuClick, true
\r
995 jqWrapper, jqHeader, jqFooter = null,
\r
996 elmBody, elmBodyStyle,
\r
997 startX, startY, startW, startH,
\r
999 headerH, bodyH, footerH = 0,
\r
1000 isDragging = false,
\r
1001 isResizing = false,
\r
1002 bodyIsTachable = false,
\r
1005 function onMenuClick(){
\r
1006 visible === true ? instance.close() : instance.open();
\r
1008 function update( _x, _y, _w, _h){
\r
1009 _x = _x !== undefined ? _x : x;
\r
1010 _y = _y !== undefined ? _y : y;
\r
1011 _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;
\r
1012 _w = _w !== undefined ? _w : w;
\r
1013 _h = _h !== undefined ? _h : h;
\r
1020 bodyH = _h -headerH -footerH;
\r
1021 elmBodyStyle.height = bodyH +'px';
\r
1022 ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, bodyH);
\r
1028 function bodyBackOrForward( isBack){
\r
1029 if( !instance) return;
\r
1030 if( bodyIsTachable === !isBack) return;
\r
1031 elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';
\r
1032 elmBodyStyle.left = isBack === true ? 0 : x +'px';
\r
1033 elmBodyStyle.top = isBack === true ? 0 : y +headerH +'px';
\r
1034 elmBodyStyle.width = isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px';
\r
1035 bodyIsTachable === isBack && isBack === true ? jqHeader.after( elmBody) : jqStage.append( elmBody);
\r
1036 bodyIsTachable = !isBack;
\r
1038 function onWindowResize( e){
\r
1039 bodyBackOrForward( true);
\r
1040 isResizing = true;
\r
1045 offsetX = e.pageX;
\r
1046 offsetY = e.pageY;
\r
1047 MOUSE_CURSOR( 'nw-resize');
\r
1048 e.stopPropagation();
\r
1052 init: function( jqContainer){
\r
1054 * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う.
\r
1058 jqWindowOrigin = jqWindowOrigin || ( function(){
\r
1059 return $( $( '#windowTemplete').remove().html());
\r
1061 closeButtonWidth = closeButtonWidth || ( function(){
\r
1062 return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;
\r
1065 jqStage = jqEditor;
\r
1066 this.$ = jqWrapper = jqWindowOrigin.clone( true);
\r
1067 jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);
\r
1068 headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;
\r
1069 elmBody = jqWrapper.children( '.window-body').get( 0);
\r
1070 elmBodyStyle = elmBody.style;
\r
1072 if( bodyTempleteID) {
\r
1073 jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));
\r
1075 jqWrapper.find( '.window-body-insert-position').remove();
\r
1077 CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();
\r
1079 this.onInit && this.onInit();
\r
1082 x: function(){ return x;},
\r
1083 y: function(){ return y;},
\r
1084 w: function(){ return w;},
\r
1085 h: function(){ return h;},
\r
1087 title: function( _title){
\r
1088 typeof _title === 'string' && jqHeader.html( _title);
\r
1089 title = typeof _title === 'string' ? _title : title;
\r
1093 firstOpen: function(){
\r
1094 if( RESIZE_BUTTON_ENABLED === true){
\r
1095 footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height;
\r
1096 //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);
\r
1098 jqWrapper.find( '.window-footer').remove();
\r
1100 this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH);
\r
1102 update( x, y, w, h);
\r
1104 delete this.firstOpen;
\r
1107 if( visible === true) return;
\r
1108 instance.visible = visible = true;
\r
1109 openWindow( instance);
\r
1110 MENUBAR_SELWCTION.title( 'hide ' +title);
\r
1112 for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){
\r
1113 if( WINDOW_ARRAY[ i] === instance){
\r
1114 WINDOW_ARRAY.splice( i, 1);
\r
1115 WINDOW_ARRAY.unshift( instance);
\r
1116 currentWindow = null;
\r
1117 currentWindowIndex = -1;
\r
1121 onFadeIn: function(){
\r
1122 instance.firstOpen && instance.firstOpen();
\r
1123 instance.onOpen && setTimeout( callOnOpen, 0);
\r
1124 function callOnOpen(){
\r
1125 instance.onOpen( w, bodyH);
\r
1128 onFadeOut: function(){
\r
1129 var elmWrapper = jqWrapper.get(0);
\r
1130 elmWrapper.parentNode.removeChild( elmWrapper);
\r
1131 instance.onClose && setTimeout( instance.onClose, 0);
\r
1133 close: function(){
\r
1134 if( visible === false) return;
\r
1135 instance.visible = visible = false;
\r
1136 jqWrapper.fadeOut( instance.onFadeOut);
\r
1137 MENUBAR_SELWCTION.title( 'show ' +title);
\r
1139 bodyBackOrForward: bodyBackOrForward,
\r
1140 onMouseDown: function( _mouseX, _mouseY){
\r
1141 if( RESIZE_BUTTON_ENABLED === true && x +w -20 <= _mouseX && _mouseX < x +w && y +headerH +bodyH < _mouseY && _mouseY <= y +h){
\r
1142 bodyBackOrForward( true);
\r
1143 isResizing = true;
\r
1148 offsetX = _mouseX;
\r
1149 offsetY = _mouseY;
\r
1150 MOUSE_CURSOR( 'nw-resize');
\r
1154 if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;
\r
1155 if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){
\r
1160 isDragging = true;
\r
1161 MOUSE_CURSOR( 'move');
\r
1166 offsetX = _mouseX;
\r
1167 offsetY = _mouseY;
\r
1169 onMouseUp: function( _mouseX, _mouseY){
\r
1170 isDragging = isResizing = false;
\r
1171 MOUSE_CURSOR( '');
\r
1173 onMouseMove: function( _mouseX, _mouseY){
\r
1174 var _updateX = _mouseX -offsetX,
\r
1175 _updateY = _mouseY -offsetY;
\r
1177 if( isResizing === true){
\r
1178 var _w = startW +_updateX,
\r
1179 _h = startH +_updateY;
\r
1180 update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h);
\r
1183 if( isDragging === true) {
\r
1184 update( startX +_updateX, startY +_updateY);
\r
1187 if( x > _mouseX || x +w < _mouseX ) return;
\r
1189 ( y <= _mouseY && y +headerH >= _mouseY ) ?
\r
1190 MOUSE_CURSOR( 'pointer') : // hit to header
\r
1191 MOUSE_CURSOR( '');
\r
1192 bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY);
\r
1194 onMouseOut: function( _mouseX, _mouseY){
\r
1195 bodyIsTachable === true && bodyBackOrForward( true);
\r
1196 isDragging = false;
\r
1197 MOUSE_CURSOR( '');
\r
1200 return isDragging === true || isResizing === true;
\r
1202 bodyHeight: function(){
\r
1208 function getCurrentIndex( _mouseX, _mouseY){
\r
1209 if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;
\r
1210 var l = WINDOW_ARRAY.length,
\r
1211 _currentWindow = null,
\r
1213 currentWindowIndex = -1;
\r
1214 for( var i=0; i<l; i++){
\r
1215 _win = WINDOW_ARRAY[ i];
\r
1216 if( _win.visible !== true) continue;
\r
1219 if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){
\r
1220 _currentWindow = _win;
\r
1221 currentWindowIndex = i;
\r
1225 currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);
\r
1226 currentWindow = _currentWindow;
\r
1227 return currentWindowIndex;
\r
1229 function openWindow( _window){
\r
1230 if( _window.visible !== true) return;
\r
1231 var _jqWindow = _window.$;
\r
1232 jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない.
\r
1233 _jqWindow.fadeIn( _window.onFadeIn);
\r
1239 jqContainer = $( '#window-container');
\r
1241 var l = WINDOW_ARRAY.length,
\r
1243 for( var i=l-1; i >= 0; --i){
\r
1244 _window = WINDOW_ARRAY[ i];
\r
1245 _window.init && _window.init( jqContainer);
\r
1246 _window.visible === true && openWindow( _window);
\r
1248 log = $( '#window-log');
\r
1250 delete WINDOWS_CONTROL.init;
\r
1253 WINDOWS_CONTROL.init && WINDOWS_CONTROL.init();
\r
1255 close: function(){
\r
1258 onMouseMove: function( _mouseX, _mouseY){
\r
1259 var _index = getCurrentIndex( _mouseX, _mouseY);
\r
1260 if( _index === 0){
\r
1261 currentWindow.onMouseMove( _mouseX, _mouseY);
\r
1264 if( _index > 0){ // 先頭のクリックでない場合
\r
1266 WINDOW_ARRAY.splice( currentWindowIndex, 1);
\r
1267 WINDOW_ARRAY.unshift( currentWindow);
\r
1269 jqContainer.append( currentWindow.$);
\r
1270 currentWindowIndex = 0;
\r
1275 onMouseUp: function( _mouseX, _mouseY){
\r
1276 if( getCurrentIndex( _mouseX, _mouseY) === 0){
\r
1277 currentWindow.onMouseUp( _mouseX, _mouseY);
\r
1282 onMouseDown: function( _mouseX, _mouseY){
\r
1283 if( getCurrentIndex( _mouseX, _mouseY) === 0){
\r
1284 currentWindow.onMouseDown( _mouseX, _mouseY);
\r
1290 return currentWindow !== null;
\r
1292 onWindowResize: function( _windowW, _windowH){
\r
1297 createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){
\r
1298 opt_visible = opt_visible !== false;
\r
1299 opt_closeButtonEnabled = opt_closeButtonEnabled === true;
\r
1300 opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;
\r
1301 opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH;
\r
1302 opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;
\r
1304 var _window = pettanr.util.extend(
\r
1306 bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH
\r
1310 WINDOW_ARRAY.unshift( _window);
\r
1311 WINDOWS_CONTROL.init === undefined && _window.init( jqContainer);
\r
1312 WINDOWS_CONTROL.init === undefined && openWindow( _window);
\r
1318 /* ----------------------------------------
\r
1322 var TOOL_BOX_WINDOW = ( function(){
\r
1323 var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,
\r
1326 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 73, false, true, addImage);
\r
1327 MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);
\r
1329 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 84, false, true, addText);
\r
1330 MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);
\r
1332 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 71, false, true, switchGrid);
\r
1333 MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);
\r
1335 function addImage( e){
\r
1336 setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0);
\r
1337 e && e.preventDefault && e.preventDefault();
\r
1340 function addText( e){
\r
1341 setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0);
\r
1342 e && e.preventDefault && e.preventDefault();
\r
1345 function switchGrid( e){
\r
1346 setTimeout( GRID_CONTROL.update, 0);
\r
1347 e && e.preventDefault && e.preventDefault();
\r
1350 function popupHelp( e){
\r
1351 instance.bodyBackOrForward( true);
\r
1352 setTimeout( HELP_DOCUMENTS_WINDOW.open, 0);
\r
1353 e && e.preventDefault && e.preventDefault();
\r
1356 function editBG( e){
\r
1357 instance.bodyBackOrForward( true);
\r
1358 setTimeout( INFOMATION_WINDOW.open, 0);
\r
1359 e && e.preventDefault && e.preventDefault();
\r
1363 return WINDOWS_CONTROL.createWindow(
\r
1365 onInit: function(){
\r
1367 delete this.onInit;
\r
1369 onFirstOpen: function(){
\r
1370 addImageButton = $( '#toolbox-add-image-button').click( addImage);
\r
1371 addTextButton = $( '#toolbox-add-text-button').click( addText);
\r
1372 editBgButton = $( '#toolbox-edit-bg-button').click( editBG);
\r
1373 switchGridButton = $( '#toolbox-switch-grid').click( switchGrid);
\r
1374 popupHelpButton = $( '#toolbox-popup-help-button').click( popupHelp);
\r
1376 postButton = $( '#toolbox-post-button');
\r
1378 delete this.onFirstOpen;
\r
1381 'toolbox-window', 'Tool box', 0, 215, 110, 290, true
\r
1386 /* ----------------------------------------
\r
1390 var IMAGE_EXPLORER_WINDOW = ( function(){
\r
1391 var instance, finder;
\r
1393 return WINDOWS_CONTROL.createWindow(
\r
1395 onInit: function(){
\r
1397 delete this.onInit;
\r
1399 onFirstOpen: function( _w, _h){
\r
1400 finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());
\r
1401 delete this.onFirstOpen;
\r
1403 onOpen: function( _w, _h){
\r
1404 finder.onOpen( _w, _h);
\r
1406 onResize: function( _w, _h){
\r
1407 finder.resize( _w, _h);
\r
1410 'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300
\r
1415 /* ----------------------------------------
\r
1416 * INFOMATION_WINDOW
\r
1419 var INFOMATION_WINDOW = ( function(){
\r
1420 var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,
\r
1421 FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',
\r
1422 FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',
\r
1423 backgroundInfomationElm,
\r
1424 jqComicElementInformation,
\r
1425 inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
\r
1426 inputPercentW, inputPercentH,
\r
1427 currentComicElement = null,
\r
1428 currentElementType = -1,
\r
1429 currentLock = false;
\r
1431 return WINDOWS_CONTROL.createWindow(
\r
1433 onFirstOpen: function( _w, _h){
\r
1434 backgroundInfomationElm = $( '#panel-background-information');
\r
1436 jqComicElementInformation = $( '#comic-element-infomation').hide().css( {
\r
1439 var TAB_GROUP_ID = 'comic-element-attribute';
\r
1440 var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;
\r
1441 inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID);
\r
1442 inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID);
\r
1443 inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID);
\r
1444 inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID);
\r
1445 inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID);
\r
1446 inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID);
\r
1447 inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID);
\r
1448 inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID);
\r
1449 inputAspectRatio = $( '#comic-element-keep-aspect');
\r
1450 delete this.onFirstOpen;
\r
1452 onResize: function( _w, _h){
\r
1453 jqComicElementInformation.css( {
\r
1457 update: function( currentElement){
\r
1459 if( currentLock === true && currentElement === null) return;
\r
1461 var _elementType = currentElement === null ? -1 : currentElement.type,
\r
1462 x = currentElement !== null ? currentElement.x : 0,
\r
1463 y = currentElement !== null ? currentElement.y : 0,
\r
1464 z = currentElement !== null ? currentElement.z : 0,
\r
1465 a = _elementType === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,
\r
1466 w = currentElement !== null ? currentElement.w : 0,
\r
1467 h = currentElement !== null ? currentElement.h : 0,
\r
1468 actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
\r
1469 actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
\r
1470 wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,
\r
1471 hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,
\r
1472 keepAspect = currentElement !== null && currentElement.keepAspect === true;
\r
1474 if( currentElementType !== _elementType){
\r
1475 if( _elementType !== -1){
\r
1476 if( _elementType === 1){
\r
1477 inputA.visible( true);
\r
1478 inputPercentW.visible( false);
\r
1479 inputPercentH.visible( false);
\r
1480 inputAspectRatio.hide();
\r
1482 inputA.visible( false);
\r
1483 inputPercentW.visible( true);
\r
1484 inputPercentH.visible( true);
\r
1485 inputAspectRatio.show();
\r
1487 currentElementType === -1 && jqComicElementInformation.stop().css( {
\r
1490 })[ FADE_IN_EFFECT]();
\r
1492 currentElementType !== -1 && jqComicElementInformation.stop().css({
\r
1495 })[ FADE_OUT_EFFECT]();
\r
1497 currentElementType = _elementType;
\r
1499 if( currentElementType !== -1){
\r
1503 _elementType === 1 && inputA.value( a);
\r
1506 _elementType === 0 && inputPercentW.value( wPercent);
\r
1507 _elementType === 0 && inputPercentH.value( hPercent);
\r
1512 lock: function( _currentLock){
\r
1513 currentLock = !!_currentLock;
\r
1514 this.bodyBackOrForward( !currentLock);
\r
1517 'infomation-window', 'Infomation', 0, 30, 200, 180, true
\r
1521 /* ----------------------------------------
\r
1525 var HELP_DOCUMENTS_WINDOW = ( function(){
\r
1526 var visible = true,
\r
1530 currentPageIndex = 0,
\r
1532 HELP = MENU_BAR_CONTROL.HELP,
\r
1533 onLoadFunction = HELP.createAjaxSelection( onAjaxStart),
\r
1536 function onAjaxStart( _pageIndex){
\r
1537 currentPageIndex = _pageIndex || currentPageIndex;
\r
1538 if( onHelpLoad !== null){
\r
1540 url: 'help/jp.xml',
\r
1542 success: onHelpLoad
\r
1544 onHelpLoad = null;
\r
1546 onAjaxStart = new Function;
\r
1548 var onHelpLoad = function( _xml){
\r
1549 var jqXML = $( _xml),
\r
1550 helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),
\r
1551 elmNavi = document.createElement( 'div'),
\r
1552 elmItemOrigin = document.createElement( 'a'),
\r
1553 elmPages = document.createElement( 'div'),
\r
1554 elmPageOrigin = document.createElement( 'div'),
\r
1555 elmTitleOrigin = document.createElement( 'h2'),
\r
1557 elmNavi.className = 'sidenavi';
\r
1558 elmItemOrigin.className = 'sidenavi-item';
\r
1559 elmItemOrigin.href = '#';
\r
1560 elmPages.className = 'page-contents';
\r
1561 elmPageOrigin.className = 'page-content main';
\r
1562 elmPageOrigin.appendChild( elmTitleOrigin);
\r
1564 //helpTitle && instance.title( helpTitle);
\r
1566 jqXML.find( 'page').each( function(){
\r
1567 var xmlPage = $( this),
\r
1568 title = xmlPage.attr( 'title'),
\r
1569 content = xmlPage.text();
\r
1571 elmItemOrigin.innerHTML = title;
\r
1572 elmNavi.appendChild( elmItemOrigin.cloneNode( true));
\r
1574 elmTitleOrigin.innerHTML = title;
\r
1576 elmPage = elmPageOrigin.cloneNode( true);
\r
1577 elmPage.innerHTML = content;
\r
1579 pettanr.util.cleanElement( elmPage);
\r
1581 if( elmPage.childNodes.length > 0){
\r
1582 elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]);
\r
1584 elmPage.appendChild( elmTitleOrigin.cloneNode( true));
\r
1586 elmPages.appendChild( elmPage);
\r
1588 HELP.createSelection( title, null, onSelectionClick, true);
\r
1592 onLoadFunction = null;
\r
1594 jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);
\r
1596 jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);
\r
1597 jqPages = jqAjaxContents.find( '.page-content');
\r
1598 jqPages.find( 'a').click( onInnerLinkClick);
\r
1600 setTimeout( jumpPage, 0);
\r
1602 function onSelectionClick( _pageIndex){
\r
1603 HELP_DOCUMENTS_WINDOW.open();
\r
1604 jumpPage( _pageIndex);
\r
1606 function jumpPage( _index){
\r
1607 if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index){
\r
1608 currentPageIndex = _index;
\r
1610 jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');
\r
1611 jqPages.hide().eq( currentPageIndex).show();
\r
1613 function onNaviClick( e){
\r
1615 jumpPage( pettanr.util.getChildIndex( this.parentNode, this));
\r
1616 e.stopPropagation();
\r
1619 function onInnerLinkClick( e){
\r
1620 var jump = ( this.href || '').split( '#jump'),
\r
1623 jumpPage( '' + parseFloat( n) === n ? parseFloat( n) : -1);
\r
1624 e.stopPropagation();
\r
1627 return WINDOWS_CONTROL.createWindow(
\r
1629 onInit: function(){
\r
1631 jqAjaxContents = this.$.find( '.window-body').addClass( 'loading');
\r
1632 delete this.onInit;
\r
1634 onFirstOpen: function( _w, _h){
\r
1635 jqAjaxContents.css( { height: _h});
\r
1637 delete this.onFirstOpen;
\r
1639 onResize: function( _w, _h){
\r
1640 jqAjaxContents && jqAjaxContents.css( { height: _h});
\r
1643 null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300
\r
1647 /* ----------------------------------------
\r
1650 * - panelResizeListener
\r
1652 var GRID_CONTROL = ( function(){
\r
1653 var ELM_GRID = document.getElementById( 'grid'),
\r
1654 BG_URL = "url('images/grid.gif')",
\r
1660 jqGrid = $( ELM_GRID);
\r
1661 delete GRID_CONTROL.init;
\r
1664 GRID_CONTROL.init && GRID_CONTROL.init();
\r
1666 close: function(){
\r
1669 onPanelResize: function( _panelX, _panelY){
\r
1670 ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( '');
\r
1671 ELM_GRID.style.height = windowH +'px';
\r
1673 enabled: function(){
\r
1676 update: function(){
\r
1680 }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();
\r
1682 visible = !visible;
\r
1684 if( visible === true && BG_URL !== null){
\r
1685 ELM_GRID.style.backgroundImage = BG_URL;
\r
1693 /* ----------------------------------------
\r
1694 * WHITE_GLASS_CONTROL
\r
1695 * - panelResizeListener
\r
1697 var WHITE_GLASS_CONTROL = ( function(){
\r
1698 var styleTop = document.getElementById( 'whiteGlass-top').style,
\r
1699 styleLeft = document.getElementById( 'whiteGlass-left').style,
\r
1700 styleRight = document.getElementById( 'whiteGlass-right').style,
\r
1701 styleBottom = document.getElementById( 'whiteGlass-bottom').style;
\r
1704 onPanelResize: function( _panelX, _panelY, _panelW, _panelH){
\r
1707 marginTop = _panelY,
\r
1708 marginBottom = windowH -_h -marginTop,
\r
1709 marginX = _panelX,
\r
1710 rightWidth = windowW -_w -marginX;
\r
1712 styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';
\r
1714 styleLeft.top = marginTop +'px';
\r
1715 styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';
\r
1716 styleLeft.height = ( _h + marginBottom) +'px';
\r
1718 styleRight.top = marginTop +'px';
\r
1719 styleRight.left = _w +marginX +'px';
\r
1720 styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';
\r
1721 styleRight.height = ( _h + marginBottom) +'px';
\r
1723 styleBottom.top = ( _h +marginTop) +'px';
\r
1724 styleBottom.left = marginX +'px';
\r
1725 styleBottom.width = _w +'px';
\r
1726 styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';
\r
1732 /* ----------------------------------------
\r
1735 * - mouseEventListener
\r
1737 * panel-border の表示と onPanelResize の通知.
\r
1741 var PANEL_CONTROL = ( function(){
\r
1742 var ELM_PANEL = document.getElementById('panel-tools-container'),
\r
1743 ELM_PANEL_STYLE = ELM_PANEL.style,
\r
1744 DEFAULT_PANEL_WIDTH = 400,
\r
1745 DEFAULT_PANEL_HEIGHT = 300,
\r
1747 panelW, panelH, panelX, panelY,
\r
1748 offsetX, offsetY, startX, startY,
\r
1749 isDragging = false,
\r
1750 isDraggable = false;
\r
1752 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);
\r
1754 function onSpaceUpdate(e){
\r
1755 if( e.type === 'keyup'){
\r
1756 currentListener === null && updateMouseCursor( '');
\r
1757 isDraggable = false;
\r
1759 currentListener === null && updateMouseCursor( 'move');
\r
1760 isDraggable = true;
\r
1765 open: function( _panelW, _panelH, _borderSize ){
\r
1766 panelW = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH;
\r
1767 panelH = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT;
\r
1768 //panelX = Math.floor( ( windowW -panelW) /2);
\r
1769 //panelY = Math.floor( ( windowH -panelH) /2);
\r
1770 borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;
\r
1772 //setTimeout( PANEL_CONTROL.resize, 0);
\r
1774 close: function(){
\r
1783 resize: function( isResizerTopAction, _x, _y, _w, _h){
\r
1784 panelX = _x !== undefined ? _x : panelX;
\r
1785 panelY = _y !== undefined ? _y : panelY;
\r
1786 panelW = _w !== undefined ? _w : panelW;
\r
1787 panelH = _h !== undefined ? _h : panelH;
\r
1789 ELM_PANEL_STYLE.left = ( panelX -borderSize) +'px';
\r
1790 ELM_PANEL_STYLE.top = ( panelY -borderSize) +'px';
\r
1791 ELM_PANEL_STYLE.width = panelW +'px';
\r
1792 ELM_PANEL_STYLE.height = panelH +'px';
\r
1794 PANEL_RESIZER_TOP.onPanelResize( panelX, panelY, panelW, panelH);
\r
1795 PANEL_RESIZER_BOTTOM.onPanelResize( panelX, panelY, panelW, panelH);
\r
1796 GRID_CONTROL.onPanelResize( panelX, panelY);
\r
1797 WHITE_GLASS_CONTROL.onPanelResize( panelX, panelY, panelW, panelH);
\r
1798 COMIC_ELEMENT_CONTROL.onPanelResize( panelX, panelY, panelW, panelH, isResizerTopAction === true);
\r
1800 onWindowResize: function( _windowW, _windowH){
\r
1801 panelX = Math.floor(( _windowW - panelW) / 2);
\r
1802 panelY = Math.floor(( _windowH - panelH) / 2);
\r
1803 PANEL_CONTROL.resize();
\r
1805 onMouseMove: function( _mouseX, _mouseY){
\r
1806 if( isDraggable === true && isDragging === true){
\r
1807 PANEL_CONTROL.resize( false, startX +_mouseX -offsetX, startY +_mouseY -offsetY);
\r
1810 onMouseUp: function( _mouseX, _mouseY){
\r
1811 if( isDraggable === true){
\r
1812 isDragging = false;
\r
1813 updateMouseCursor( '');
\r
1816 onMouseDown: function( _mouseX, _mouseY){
\r
1817 if( isDraggable === true){
\r
1818 offsetX = _mouseX;
\r
1819 offsetY = _mouseY;
\r
1822 isDragging = true;
\r
1823 updateMouseCursor( 'move');
\r
1828 return isDragging === true;
\r
1833 /* --------------------------------------------------------------------------------------------
\r
1834 * PanelResizerClass
\r
1835 * - mouseEventListener
\r
1837 var PanelResizerClass = function( ID, isTop){
\r
1838 var ELM = document.getElementById( ID),
\r
1840 RESIZER_HEIGHT = 30,
\r
1841 x = -BORDER_WIDTH /2,
\r
1842 y = isTop === true ? ( -5 -RESIZER_HEIGHT -BORDER_WIDTH) : 0,
\r
1844 h = RESIZER_HEIGHT,
\r
1845 panelX, panelY, panelW, panelH,
\r
1846 offsetY, startY, startH,
\r
1847 isDragging = false,
\r
1848 MOUSE_CURSOR = updateMouseCursor;
\r
1850 function restoreState( arg){
\r
1851 if( arg && arg.length > 3){
\r
1852 PANEL_CONTROL.resize( isTop, arg[ 0] || panelX, arg[ 1] || panelY, arg[ 2] || panelW, arg[ 3] || panelH);
\r
1857 onMouseDown: function( _mouseX, _mouseY){
\r
1858 var _x = _mouseX -panelX,
\r
1859 _y = _mouseY -panelY;
\r
1860 if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
\r
1864 isDragging = true;
\r
1865 MOUSE_CURSOR( 'n-resize');
\r
1868 onMouseMove: function( _mouseX, _mouseY){
\r
1869 var _x = _mouseX -panelX,
\r
1870 _y = _mouseY -panelY;
\r
1871 if( isDragging !== true){
\r
1872 if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
\r
1873 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
1874 MOUSE_CURSOR( 'pointer');
\r
1877 var move = _y -offsetY;
\r
1878 if( isTop === true){
\r
1879 if( panelH - move < MIN_PANEL_HEIGHT){
\r
1880 move = panelH -MIN_PANEL_HEIGHT;
\r
1882 PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);
\r
1884 var _h = startH +move;
\r
1885 if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){
\r
1886 PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);
\r
1892 onMouseUp: function( _mouseX, _mouseY){
\r
1893 if( isDragging !== true) return;
\r
1894 ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);
\r
1895 isDragging = false;
\r
1896 MOUSE_CURSOR( '');
\r
1901 onPanelResize: function( _x, _y, _w, _h){
\r
1904 if( panelW !== _w){
\r
1905 ELM.style.width = ( _w +2) +'px';
\r
1909 y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);
\r
1914 var PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true),
\r
1915 PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false);
\r
1917 PanelResizerClass = undefined;
\r
1919 /* --------------------------------------------------------------------------------------------
\r
1920 * CONSOLE_CONTROLER
\r
1922 var CONSOLE_CONTROLER = ( function(){
\r
1923 var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),
\r
1924 LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),
\r
1925 DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),
\r
1926 EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),
\r
1927 CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),
\r
1928 SAVE = HISTORY_CONTROL.saveState,
\r
1933 jqImgConsole, jqTextConsole,
\r
1934 currentElement = null,
\r
1937 imgConsoleWidth, imgConsoleHeight,
\r
1938 textConsoleWidth, textConsoleHeight,
\r
1939 consoleWidth, consoleHeight,
\r
1940 consoleX, consoleY,
\r
1942 buttonClickable = false;
\r
1944 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack);
\r
1945 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward);
\r
1947 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del);
\r
1948 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit);
\r
1949 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change);
\r
1951 function buttonBackOrForward( isBack){
\r
1952 var offest = jqConsoleWrapper.offset();
\r
1953 jqConsoleWrapper.css( {
\r
1954 position: isBack === true ? '' : 'absolute',
\r
1955 left: isBack === true ? consoleX : offest.left,
\r
1956 top: isBack === true ? consoleY : offest.top
\r
1958 buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);
\r
1959 buttonClickable = !isBack;
\r
1961 function layerBack(){
\r
1962 if( currentElement === null) return;
\r
1963 if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return;
\r
1964 INFOMATION_WINDOW.update( currentElement);
\r
1965 SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);
\r
1966 var _z = currentElement.z;
\r
1967 LAYER_BACK_BUTTON.visible( _z > 0);
\r
1968 LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
\r
1970 function layerForward(){
\r
1971 if( currentElement === null) return;
\r
1972 if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return;
\r
1973 INFOMATION_WINDOW.update( currentElement);
\r
1974 SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);
\r
1975 var _z = currentElement.z;
\r
1976 LAYER_BACK_BUTTON.visible( _z > 0);
\r
1977 LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
\r
1980 if( currentElement === null) return;
\r
1981 buttonBackOrForward( true);
\r
1982 COMIC_ELEMENT_CONTROL.remove( currentElement);
\r
1983 SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true);
\r
1984 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
1987 if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;
\r
1988 TEXT_EDITOR_CONTROL.show( currentElement);
\r
1989 buttonBackOrForward( true);
\r
1991 function change(){
\r
1992 if( currentElement === null) return;
\r
1993 buttonBackOrForward( true);
\r
1994 IMAGE_GROUP_EXPROLER.show( currentElement.url);
\r
1998 jqStage = jqEditor;
\r
1999 jqConsoleTail = $( '#comic-element-consol-tail');
\r
2000 jqImgConsole = $( '#image-element-consol').hide();
\r
2001 var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0));
\r
2002 imgConsoleWidth = imgConsoleSize.width;
\r
2003 imgConsoleHeight = imgConsoleSize.height;
\r
2005 jqTextConsole = $( '#text-element-consol').hide();
\r
2006 var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0));
\r
2007 textConsoleWidth = textConsoleSize.width;
\r
2008 textConsoleHeight = textConsoleSize.height;
\r
2010 jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();
\r
2011 jqConsoleParent = jqConsoleWrapper.parent();
\r
2013 $( '#edit-text-button').click( edit);
\r
2014 $( '#delete-image-button, #delete-text-button').click( del);
\r
2015 $( '#change-image-button').click( change);
\r
2016 $( '#layer-forward-button, #forward-text-button').click( layerForward);
\r
2017 $( '#layer-back-button, #back-text-button').click( layerBack);
\r
2019 delete CONSOLE_CONTROLER.init;
\r
2021 show: function( _currentElement, _w, _h){
\r
2022 visible === false && jqConsoleWrapper.show();
\r
2024 currentElement = _currentElement;
\r
2025 var _currentType = _currentElement.type,
\r
2026 _z = _currentElement.z;
\r
2027 if( currentType !== _currentType){
\r
2028 currentType = _currentType;
\r
2029 jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);
\r
2030 jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);
\r
2031 consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
\r
2032 consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
\r
2034 consoleX = Math.floor( ( _w -consoleWidth) /2);
\r
2036 LAYER_BACK_BUTTON.visible( _z > 0);
\r
2037 LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
\r
2038 DELETE_BUTTON.visible( true);
\r
2039 EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);
\r
2040 CHANGE_BUTTON.visible( false);
\r
2042 if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){
\r
2043 consoleY = Math.floor( ( _h -consoleHeight) /2);
\r
2044 jqConsoleWrapper.css( {
\r
2047 }).removeClass( 'console-out');
\r
2049 consoleY = _h +tailSize;
\r
2050 jqConsoleWrapper.css( {
\r
2053 }).addClass( 'console-out');
\r
2056 hide: function (){
\r
2057 visible === true && jqConsoleWrapper.hide();
\r
2059 currentElement = null;
\r
2060 LAYER_BACK_BUTTON.visible( false);
\r
2061 LAYER_FORWARD_BUTTON.visible( false);
\r
2062 DELETE_BUTTON.visible( false);
\r
2063 EDIT_BUTTON.visible( false);
\r
2064 CHANGE_BUTTON.visible( false);
\r
2066 x: function(){ return consoleX;},
\r
2067 y: function(){ return consoleY;},
\r
2068 w: function(){ return consoleWidth;},
\r
2069 h: function(){ return consoleHeight;},
\r
2070 onMouseMove: function( _mouseX, _mouseY){
\r
2071 if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){
\r
2072 buttonClickable === true && buttonBackOrForward( true);
\r
2075 buttonClickable === false && buttonBackOrForward( false);
\r
2078 onMouseOut: function( _mouseX, _mouseY){
\r
2079 buttonClickable === true && buttonBackOrForward( true);
\r
2084 /* --------------------------------------------------------------------------------------------
\r
2086 * - comicElementOperator
\r
2088 var TAIL_OPERATOR = ( function(){
\r
2089 var MOUSE_CURSOR = updateMouseCursor,
\r
2090 ELM_MOVER = document.getElementById( 'balloon-tail-mover'),
\r
2091 SIZE = pettanr.util.getElementSize( ELM_MOVER).width,
\r
2095 FLOOR = Math.floor,
\r
2096 DEG_TO_RAD = Math.PI / 180,
\r
2097 RAD_TO_DEG = 1 /DEG_TO_RAD,
\r
2098 currentText = null,
\r
2101 balloonW, balloonH, balloonA, radA,
\r
2106 update: function ( _w, _h, _a){
\r
2107 balloonW = _w !== undefined ? _w : balloonW;
\r
2108 balloonH = _h !== undefined ? _h : balloonH;
\r
2109 balloonA = _a !== undefined ? _a : balloonA;
\r
2110 radA = balloonA *DEG_TO_RAD;
\r
2111 tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);
\r
2112 tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);
\r
2113 ELM_MOVER.style.left = tailX +'px';
\r
2114 ELM_MOVER.style.top = tailY +'px';
\r
2115 //log.html( [ balloonW, balloonH, balloonA].join());
\r
2117 show: function( _currentText){
\r
2119 * visibilityのほうがいい, display:none だと ie で描画が狂う
\r
2121 ELM_MOVER.style.visibility = '';
\r
2122 this.update( _currentText.w, _currentText.h, _currentText.angle());
\r
2123 currentText = _currentText;
\r
2125 hitTest: function( _mouseX, _mouseY){
\r
2126 var _x = tailX -SIZE /2,
\r
2127 _y = tailY -SIZE /2;
\r
2128 ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;
\r
2129 ret === true && MOUSE_CURSOR( 'move');
\r
2133 ELM_MOVER.style.visibility = 'hidden';
\r
2134 currentText = null;
\r
2136 onStart: function( _currentText, _mouseX, _mouseY){
\r
2137 if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false;
\r
2138 x = _currentText.x;
\r
2139 y = _currentText.y;
\r
2140 if( this.hitTest( _mouseX -x, _mouseY -y) === true){
\r
2141 w = _currentText.w;
\r
2142 h = _currentText.h;
\r
2143 currentText = _currentText;
\r
2144 startA = _currentText.angle();
\r
2149 onDrag: function( _mouseX, _mouseY){
\r
2150 _mouseX = _mouseX -x -w /2;
\r
2151 _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換
\r
2153 this.update( w, h,
\r
2155 ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :
\r
2156 _mouseY > 0 ? 90 : -90
\r
2158 currentText && currentText.angle( balloonA);
\r
2159 INFOMATION_WINDOW.update( currentText);
\r
2161 onFinish: function(){
\r
2162 startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);
\r
2163 startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle());
\r
2164 currentText = null;
\r
2166 onCancel: function(){
\r
2167 currentText.angle( startA);
\r
2168 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA);
\r
2169 currentText = null;
\r
2174 /* --------------------------------------------------------------------------------------------
\r
2176 * - comicElementOperator
\r
2178 var RESIZE_OPERATOR = ( function(){
\r
2179 var MOUSE_CURSOR = updateMouseCursor,
\r
2180 GRID_ENABLED = GRID_CONTROL.enabled;
\r
2182 var HIT_AREA = MOUSE_HIT_AREA,
\r
2183 POSITION_ARRAY = [],
\r
2184 FLOOR = Math.floor,
\r
2185 CURSOR_AND_FLIP = [
\r
2186 { cursor: 'n-resize', v: 3},
\r
2187 { cursor: 'e-resize', h: 2},
\r
2188 { cursor: 'e-resize', h: 1},
\r
2189 { cursor: 'n-resize', v: 0},
\r
2190 { cursor: 'nw-resize', h: 5, v: 6, vh: 7},
\r
2191 { cursor: 'ne-resize', h: 4, v: 7, vh: 6},
\r
2192 { cursor: 'ne-resize', h: 7, v: 4, vh: 5},
\r
2193 { cursor: 'nw-resize', h: 6, v: 5, vh: 4}
\r
2195 elmResizerContainer = document.getElementById( 'comic-element-resizer-container'),
\r
2196 elmResizerContainerStyle = elmResizerContainer.style,
\r
2197 elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,
\r
2198 elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,
\r
2199 elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,
\r
2200 elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,
\r
2202 currentIndex = -1,
\r
2204 currentIsTextElement = false;
\r
2206 elmResizerContainerStyle.display = 'none';
\r
2208 var RESIZE_WORK_ARRAY = [
\r
2209 { x: 0, w: 0, y: 1, h: -1}, //top
\r
2210 { x: 1, w: -1, y: 0, h: 0}, //left
\r
2211 { x: 0, w: 1, y: 0, h: 0}, //right
\r
2212 { x: 0, w: 0, y: 0, h: 1}, //bottom
\r
2213 { x: 1, w: -1, y: 1, h: -1}, //top-left
\r
2214 { x: 0, w: 1, y: 1, h: -1}, //top-right
\r
2215 { x: 1, w: -1, y: 0, h: 1}, //bottom-left
\r
2216 { x: 0, w: 1, y: 0, h: 1} //bottom-right
\r
2218 startX, startY, startW, startH, startFilpV, startFilpH, startAspect,
\r
2219 baseX, baseY, baseW, baseH,
\r
2220 currentX, currentY, currentW, currentH,
\r
2225 function draw( _x, _y, _w, _h){
\r
2226 x = _x !== undefined ? _x : x;
\r
2227 y = _y !== undefined ? _y : y;
\r
2228 w = _w !== undefined ? _w : w;
\r
2229 h = _h !== undefined ? _h : h;
\r
2231 elmResizerContainerStyle.left = x +'px';
\r
2232 elmResizerContainerStyle.top = y +'px';
\r
2233 elmResizerContainerStyle.width = w +'px';
\r
2234 elmResizerContainerStyle.height = h +'px';
\r
2235 elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';
\r
2236 elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';
\r
2237 elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';
\r
2238 elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';
\r
2240 alert( [x, y, w, h].join( ','));
\r
2245 POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);
\r
2246 POSITION_ARRAY.push(
\r
2247 {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5},
\r
2248 {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},
\r
2249 {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},
\r
2250 {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5},
\r
2251 {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},
\r
2252 {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},
\r
2253 {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5},
\r
2254 {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}
\r
2258 function update( _x, _y, _w, _h){
\r
2259 x = _x !== undefined ? _x : currentX;
\r
2260 y = _y !== undefined ? _y : currentY;
\r
2261 w = _w !== undefined ? _w : currentW;
\r
2262 h = _h !== undefined ? _h : currentH;
\r
2264 if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){
\r
2265 if( startAspect >= 1){
\r
2267 w = Math.floor( startAspect * h);
\r
2268 x = x +( currentIndex % 2 === 0 ? _w -w : 0);
\r
2271 h = Math.floor( w / startAspect);
\r
2272 y = y + ( currentIndex <= 5 ? _h -h : 0);
\r
2275 draw( x, y, w, h);
\r
2276 currentElement.resize( x, y, w, h);
\r
2277 currentIsTextElement === true && TAIL_OPERATOR.update( w, h);
\r
2278 CONSOLE_CONTROLER.show( currentElement, w, h);
\r
2279 INFOMATION_WINDOW.update( currentElement);
\r
2282 function flip( _flipH, _flipV){
\r
2283 var p = CURSOR_AND_FLIP[ currentIndex];
\r
2284 currentIndex = _flipH === true || _flipV === true ? p[
\r
2285 _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')
\r
2287 MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);
\r
2288 elmResizerContainer.className = 'current-resizer-is-' +currentIndex;
\r
2289 currentElement.flip( _flipH, _flipV);
\r
2293 index: function( _mouseX, _mouseY){
\r
2295 for( var i=4; i<8; i++){
\r
2296 p = POSITION_ARRAY[ i];
\r
2297 if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
\r
2298 MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);
\r
2299 elmResizerContainer.className = 'current-resizer-is-' +i;
\r
2300 return currentIndex = i;
\r
2303 for( var i=0; i<4; i++){
\r
2304 p = POSITION_ARRAY[ i];
\r
2305 if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
\r
2306 MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);
\r
2307 elmResizerContainer.className = 'current-resizer-is-' +i;
\r
2308 return currentIndex = i;
\r
2311 MOUSE_CURSOR( '');
\r
2312 elmResizerContainer.className = '';
\r
2315 show: function( _currentElement){
\r
2316 currentElement = _currentElement;
\r
2317 currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;
\r
2318 elmResizerContainerStyle.display = '';
\r
2321 currentElement = null;
\r
2322 elmResizerContainerStyle.display = 'none';
\r
2324 onStart: function( _currentElement, _mouseX, _mouseY){
\r
2325 currentElement = _currentElement;
\r
2326 currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;
\r
2327 if( _currentElement.keepSize === true) return false;
\r
2328 currentIndex = this.index( _mouseX, _mouseY);
\r
2329 if( currentIndex === -1) return false;
\r
2330 offsetX = _mouseX;
\r
2331 offsetY = _mouseY;
\r
2332 startX = baseX = _currentElement.x;
\r
2333 startY = baseY = _currentElement.y;
\r
2334 startW = baseW = _currentElement.w;
\r
2335 startH = baseH = _currentElement.h;
\r
2336 if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){
\r
2337 startFilpV = _currentElement.flipV();
\r
2338 startFilpH = _currentElement.flipH();
\r
2340 startAspect = startW /startH;
\r
2343 onDrag: function( _mouseX, _mouseY){
\r
2344 var com = RESIZE_WORK_ARRAY[ currentIndex],
\r
2345 moveX = _mouseX -offsetX,
\r
2346 moveY = _mouseY -offsetY,
\r
2347 _updated = moveX !== 0 || moveY !== 0,
\r
2356 * Opera 11+ often forget values, why ??
\r
2358 while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){
\r
2359 _x = _x !== undefined ? _x : baseX +moveX *com.x;
\r
2360 _y = _y !== undefined ? _y : baseY +moveY *com.y;
\r
2361 _w = _w !== undefined ? _w : baseW +moveX *com.w;
\r
2362 _h = _h !== undefined ? _h : baseH +moveY *com.h;
\r
2363 error += _thisError === 0 ? 0 : 1;
\r
2365 if( _thisError > 9999){
\r
2367 //alert( 'opera error' +error);
\r
2373 if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){
\r
2376 if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){
\r
2378 if( _w < MIN_ELEMENT_SIZE){
\r
2379 //_x += Math.abs( MIN_ELEMENT_SIZE -_w);
\r
2381 _w = MIN_ELEMENT_SIZE;
\r
2383 if( _h < MIN_ELEMENT_SIZE){
\r
2384 //_y += Math.abs( MIN_ELEMENT_SIZE -_h);
\r
2386 _h = MIN_ELEMENT_SIZE;
\r
2389 if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){
\r
2392 if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){
\r
2394 if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){
\r
2397 baseX = _x = _x +_w;
\r
2399 baseW = _w = _memoryX -_x;
\r
2401 flip( true, false);
\r
2402 flipV = currentElement.flipV();
\r
2404 if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){
\r
2408 baseY = _y = _y +_h;
\r
2410 baseH = _h = _memoryY -_y;
\r
2411 flip( false, true);
\r
2412 flipH = currentElement.flipH();
\r
2417 baseX = _x = _x +_w;
\r
2418 baseY = _y = _y +_h;
\r
2419 baseW = _w = _memoryX -_x;
\r
2420 baseH = _h = _memoryY -_y;
\r
2421 flip( true, true);
\r
2422 flipV = currentElement.flipV();
\r
2423 flipH = currentElement.flipH();
\r
2426 offsetX = _mouseX;
\r
2427 offsetY = _mouseY;
\r
2433 _updated === true && update( _x, _y, _w, _h);
\r
2436 'currentIndex:', currentIndex,
\r
2437 'baseW', baseW, 'baseH', baseH,'<br>',
\r
2438 'mouse', _mouseX, _mouseY,'<br>',
\r
2439 'move', moveX, moveY,'<br>',
\r
2440 'xy', _x, _y, 'wh',_w, _h,'<br>',
\r
2441 'com.w', com.w, 'com.h', com.h,'<br>',
\r
2442 'current',currentW, currentH,'<br>',
\r
2447 onFinish: function(){
\r
2448 MOUSE_CURSOR( '');
\r
2449 if( w === startW && h === startH && x === startX && y === startY) return;
\r
2450 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h);
\r
2451 currentElement.resize( x, y, w, h);
\r
2452 COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH);
\r
2454 onCancel: function(){
\r
2455 MOUSE_CURSOR( '');
\r
2456 COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);
\r
2457 currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?
\r
2458 currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
\r
2459 currentElement.animate( startX, startY, startW, startH, angle);
\r
2461 lock: function( _lock){
\r
2462 if( _lock !== undefined){
\r
2463 elmResizerContainerStyle.borderColor = _lock === true ? 'blue' : '';
\r
2468 onShiftUpdate: update,
\r
2469 onCtrlUpdate: update
\r
2473 /* --------------------------------------------------------------------------------------------
\r
2474 * POSITION_OPERATOR
\r
2475 * - comicElementOperator
\r
2477 var POSITION_OPERATOR = ( function(){
\r
2478 var MOUSE_CURSOR = updateMouseCursor,
\r
2479 GRID_ENABLED = GRID_CONTROL.enabled;
\r
2481 var currentElement,
\r
2487 function update( _x, _y){
\r
2488 x = _x !== undefined ? _x : x;
\r
2489 y = _y !== undefined ? _y : y;
\r
2490 RESIZE_OPERATOR.update( x, y);
\r
2491 currentElement.resize( x, y);
\r
2492 INFOMATION_WINDOW.update( currentElement);
\r
2496 onStart: function( _currentElement, _mouseX, _mouseY){
\r
2497 currentElement = _currentElement;
\r
2498 offsetX = _mouseX;
\r
2499 offsetY = _mouseY;
\r
2500 startX = x = _currentElement.x;
\r
2501 startY = y = _currentElement.y;
\r
2502 MOUSE_CURSOR( 'move');
\r
2504 onDrag: function( _mouseX, _mouseY){
\r
2505 var moveX = _mouseX -offsetX,
\r
2506 moveY = _mouseY -offsetY,
\r
2507 _x = startX +moveX,
\r
2508 _y = startY +moveY;
\r
2509 if( GRID_ENABLED() === true){
\r
2510 _x = Math.floor( _x / 10) * 10;
\r
2511 _y = Math.floor( _y / 10) * 10;
\r
2515 onFinish: function(){
\r
2516 MOUSE_CURSOR( '');
\r
2517 if( x === startX && y === startY) return;
\r
2518 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y);
\r
2519 currentElement.resize( x, y);
\r
2520 COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY);
\r
2522 onCancel: function(){
\r
2523 MOUSE_CURSOR( '');
\r
2524 COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY);
\r
2525 currentElement.animate( startX, startY);
\r
2527 onShiftUpdate: update,
\r
2528 onCtrlUpdate: update
\r
2533 /* --------------------------------------------------------------------------------------------
\r
2534 * COMIC_ELEMENT_OPERATION_MANAGER
\r
2536 var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){
\r
2537 var MOUSE_CURSOR = updateMouseCursor,
\r
2538 SAVE = HISTORY_CONTROL.saveState,
\r
2539 GRID_ENABLED = GRID_CONTROL.enabled,
\r
2540 HIT_AREA = MOUSE_HIT_AREA,
\r
2541 currentIsTextElement = false,
\r
2542 currentOperator = null,
\r
2543 currentElement = null,
\r
2544 currentx, currenty, currentw, currenth, angle, flipV, flipH;
\r
2546 function resize( _x, _y, _w, _h, _angle){
\r
2547 currentx = _x !== undefined ? _x : currentx;
\r
2548 currenty = _y !== undefined ? _y : currenty;
\r
2549 currentw = _w !== undefined ? _w : currentw;
\r
2550 currenth = _h !== undefined ? _h : currenth;
\r
2551 angle = _angle !== undefined ? _angle : angle;
\r
2553 RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);
\r
2554 currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);
\r
2555 CONSOLE_CONTROLER.show( currentElement, currentw, currenth);
\r
2556 INFOMATION_WINDOW.update( currentElement);
\r
2558 function show( _currentElement){
\r
2559 currentElement === null && RESIZE_OPERATOR.show( _currentElement);
\r
2560 if( currentElement !== _currentElement){
\r
2561 currentElement = _currentElement;
\r
2563 currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);
\r
2564 currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();
\r
2566 flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;
\r
2567 flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;
\r
2570 _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,
\r
2571 currentIsTextElement === true ? _currentElement.angle() : 0
\r
2576 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){
\r
2577 currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();
\r
2579 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function( e){
\r
2580 currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();
\r
2582 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function( e){
\r
2583 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
\r
2584 currentOperator = null;
\r
2590 close: function(){
\r
2594 currentElement !== null && RESIZE_OPERATOR.hide();
\r
2595 currentElement = null;
\r
2596 MOUSE_CURSOR( '');
\r
2597 TAIL_OPERATOR.hide();
\r
2598 CONSOLE_CONTROLER.hide();
\r
2599 INFOMATION_WINDOW.update( null);
\r
2602 restoreState: function( arg){
\r
2603 if( arg && arg.length !== 8) return;
\r
2604 var _currentElement = arg[ 0],
\r
2605 _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],
\r
2607 _flipV = arg[ 6], _flipH = arg[ 7];
\r
2608 if( !_currentElement && !currentOperator) return;
\r
2609 _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?
\r
2610 _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :
\r
2611 _currentElement.animate( _x, _y, _w, _h, _a);
\r
2612 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
\r
2613 currentOperator = null;
\r
2614 currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);
\r
2616 saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){
\r
2617 startX = startX !== undefined ? startX : currentx;
\r
2618 startY = startY !== undefined ? startY : currenty;
\r
2619 startW = startW !== undefined ? startW : currentw;
\r
2620 startH = startH !== undefined ? startH : currenth;
\r
2621 startA = startA !== undefined ? startA : angle;
\r
2622 startFilpV = startFilpV !== undefined ? startFilpV : flipV;
\r
2623 startFilpH = startFilpH !== undefined ? startFilpH : flipH;
\r
2624 currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState,
\r
2625 [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],
\r
2626 [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH]
\r
2630 return currentOperator !== null;
\r
2632 hitTest: function( _mouseX, _mouseY, _comicElement){
\r
2633 var _x, _y, _w, _h;
\r
2634 if( _comicElement === currentElement){
\r
2635 var _consoleX = CONSOLE_CONTROLER.x();
\r
2636 _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;
\r
2637 _y = currenty -HIT_AREA;
\r
2638 var _consoleW = CONSOLE_CONTROLER.w();
\r
2639 _w = ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;
\r
2640 var _consoleY = CONSOLE_CONTROLER.y();
\r
2641 _h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;
\r
2643 _x = _comicElement.x -HIT_AREA;
\r
2644 _y = _comicElement.y -HIT_AREA;
\r
2645 _w = _comicElement.w +HIT_AREA *2;
\r
2646 _h = _comicElement.h +HIT_AREA *2;
\r
2648 return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;
\r
2650 onMouseDown: function( _currentElement, _mouseX, _mouseY){
\r
2651 //show( _currentElement);
\r
2652 if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
\r
2653 currentOperator = TAIL_OPERATOR;
\r
2655 if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
\r
2656 currentOperator = RESIZE_OPERATOR;
\r
2658 POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)
\r
2659 currentOperator = POSITION_OPERATOR;
\r
2662 onMouseMove: function( _currentElement, _mouseX, _mouseY){
\r
2663 show( _currentElement);
\r
2664 if( currentOperator !== null){
\r
2665 currentOperator.onDrag( _mouseX, _mouseY);
\r
2667 if( currentElement !== null){
\r
2668 CONSOLE_CONTROLER.onMouseMove( _mouseX -currentx, _mouseY -currenty);
\r
2669 if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentx, _mouseY -currenty) === false){
\r
2670 RESIZE_OPERATOR.index( _mouseX, _mouseY);
\r
2674 onMouseUp: function( _currentElement, _mouseX, _mouseY){
\r
2675 currentOperator !== null && currentOperator.onFinish();
\r
2676 currentOperator = null;
\r
2681 * // COMIC_ELEMENT_OPERATION_MANAGER
\r
2684 var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){
\r
2685 var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;
\r
2688 type: COMIC_ELM_TYPE,
\r
2695 hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest( _mouseX, _mouseY, this);},
\r
2696 shift: function( _shiftX, _shiftY){
\r
2697 update( this.x +_shiftX, this.y +_shiftY);
\r
2700 return OPERATOR.busy();
\r
2702 onMouseMove: function( _mouseX, _mouseY){
\r
2703 OPERATOR.onMouseMove( this, _mouseX, _mouseY);
\r
2705 onMouseUp: function( _mouseX, _mouseY){
\r
2706 OPERATOR.onMouseUp( this, _mouseX, _mouseY);
\r
2708 onMouseDown: function( _mouseX, _mouseY){
\r
2709 OPERATOR.onMouseDown( this, _mouseX, _mouseY);
\r
2714 /* --------------------------------------------------------------------------------------------
\r
2715 * ImageElementClass
\r
2717 var jqImageElementOrigin;
\r
2718 var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){
\r
2719 jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());
\r
2721 var JQ_WRAPPER = jqImageElementOrigin.clone( true),
\r
2722 OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,
\r
2723 SAVE = HISTORY_CONTROL.saveState,
\r
2724 HIT_AREA = MOUSE_HIT_AREA,
\r
2725 reversibleImage = null,
\r
2726 actualW = 0, actualH = 0,
\r
2727 flipH = w < 0 ? -1 : 1,
\r
2728 flipV = h < 0 ? -1 : 1,
\r
2730 w = Math.floor( w);
\r
2731 h = Math.floor( h);
\r
2733 function update( _x, _y, _w, _h, animate){
\r
2734 instance.x = x = _x !== undefined ? _x : x;
\r
2735 instance.y = y = _y !== undefined ? _y : y;
\r
2736 instance.w = w = _w !== undefined ? _w : w;
\r
2737 instance.h = h = _h !== undefined ? _h : h;
\r
2738 JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {
\r
2743 }, 250, onAnimeComplete);
\r
2744 animate !== true && onAnimeComplete();
\r
2746 function onAnimeComplete(){
\r
2747 reversibleImage.resize( flipH * w, flipV * h);
\r
2750 function updateUrl( _url){
\r
2751 if( url === _url) return;
\r
2752 url = _url || url;
\r
2753 var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){
\r
2754 actualW = _actualW;
\r
2755 actualH = _actualH;
\r
2757 if( reversibleImage !== null){
\r
2758 JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);
\r
2759 reversibleImage.destroy();
\r
2761 JQ_WRAPPER.append( _reversibleImage.elm);
\r
2763 reversibleImage = _reversibleImage;
\r
2765 return pettanr.util.extend(
\r
2766 new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),
\r
2774 flip: function( _flipH, _flipV){
\r
2775 if( _flipH !== true && _flipV !== true) return;
\r
2776 flipH = _flipH === true ? -flipH : flipH;
\r
2777 flipV = _flipV === true ? -flipV : flipV;
\r
2778 reversibleImage.resize( flipH * w, flipV * h);
\r
2780 flipV: function(){
\r
2783 flipH: function(){
\r
2786 url: function( _url, _actualW, _actualH){
\r
2787 if( _url && _url !== url){
\r
2788 SAVE( updateUrl, url, _url);
\r
2789 actualW = _actualW;
\r
2790 actualH = _actualH;
\r
2795 actualW: function(){ return actualW;},
\r
2796 actualH: function(){ return actualH;},
\r
2799 animate: function ( _x, _y, _w, _h, _flipH, _flipV){
\r
2800 flipH = _flipH !== undefined ? _flipH : flipH;
\r
2801 flipV = _flipV !== undefined ? _flipV : flipV;
\r
2802 update( _x, _y, _w, _h, true);
\r
2804 getAsHTML: function( isAbsoluteUrl, isXHTML){
\r
2807 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',
\r
2808 'width="', w, '" ',
\r
2809 'height="', h, '" ',
\r
2811 'left:', x, 'px;',
\r
2813 'z-index:', this.z, ';',
\r
2815 isXHTML !== true ? '>' : ' \/>'
\r
2818 getAsJsonString: function(){
\r
2819 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
2821 '"new', this.timing, '": {', cr,
\r
2822 '"resource_picture_id": 1,', cr,
\r
2823 '"x": ', x, ',', cr,
\r
2824 '"y": ', y, ',', cr,
\r
2825 '"z": ', this.z, ',', cr,
\r
2826 '"width": ', w, ',', cr,
\r
2827 '"height": ', h, ',', cr,
\r
2828 '"flipv": ', flipV === true ? 1 : 0, ',', cr,
\r
2829 '"fliph": ', flipH === true ? 1 : 0, ',', cr,
\r
2830 '"t": ', this.timing, cr,
\r
2834 destroy: function(){
\r
2835 reversibleImage.destroy();
\r
2836 JQ_WRAPPER.remove();
\r
2837 JQ_WRAPPER = reversibleImage = OPERATOR = null;
\r
2838 delete this.destroy;
\r
2844 * / ImageElementClass
\r
2845 * --------------------------------------------------------------------------------------------
\r
2849 /* --------------------------------------------------------------------------------------------
\r
2850 * TextElementClass
\r
2854 * 1.speach balloon
\r
2857 * 4.black-box( dq style)
\r
2858 * 5.blue-box( ff style)
\r
2861 var jqTextElementOrigin;
\r
2862 var TextElementClass = function( type, a, text, x, y, z, w, h, timing){
\r
2863 jqTextElementOrigin = jqTextElementOrigin || ( function(){
\r
2864 var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),
\r
2865 _MODERN = $( $( '#textElementTemplete').remove().html());
\r
2866 return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;
\r
2869 var JQ_WRAPPER = jqTextElementOrigin.clone( true),
\r
2870 XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),
\r
2871 TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),
\r
2872 OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,
\r
2873 HIT_AREA = MOUSE_HIT_AREA,
\r
2874 SAVE = HISTORY_CONTROL.saveState,
\r
2877 JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);
\r
2879 function update( _x, _y, _w, _h, _a, animate){
\r
2880 instance.x = x = _x !== undefined ? _x : x;
\r
2881 instance.y = y = _y !== undefined ? _y : y;
\r
2882 instance.w = w = _w !== undefined ? _w : w;
\r
2883 instance.h = h = _h !== undefined ? _h : h;
\r
2884 a = _a !== undefined ? _a : a;
\r
2886 JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {
\r
2893 XBROWSER_BALLOON.resize( a, w, h);
\r
2896 animate !== true && XBROWSER_BALLOON.resize( a, w, h);
\r
2899 function updateType( _type){
\r
2900 if( type !== _type){
\r
2901 type = _type || type;
\r
2902 XBROWSER_BALLOON.type( type);
\r
2905 function updateAngle( _a){
\r
2906 if( _a !== undefined && a !== _a){
\r
2907 a = _a !== undefined ? _a : a;
\r
2908 XBROWSER_BALLOON.angle( a);
\r
2911 function updateText( _text){
\r
2912 text = _text || text || '';
\r
2913 TEXT_ELM.html( text);
\r
2916 return pettanr.util.extend(
\r
2917 new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),
\r
2925 angle: function( _a){
\r
2926 _a !== undefined && update( undefined, undefined, undefined, undefined, _a);
\r
2929 text: function( _text){
\r
2930 if( _text && text !== _text) {
\r
2931 SAVE( updateText, text || '', _text);
\r
2932 updateText( _text);
\r
2937 animate: function ( _x, _y, _w, _h, _a){
\r
2938 update( _x, _y, _w, _h, _a, true);
\r
2940 destroy: function(){
\r
2941 JQ_WRAPPER.remove();
\r
2942 XBROWSER_BALLOON.destroy();
\r
2944 delete this.destroy;
\r
2946 getAsJSON: function(){
\r
2949 getAsJsonString: function(){
\r
2950 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
2952 '"new', this.timing, '": {', cr,
\r
2953 '"balloon_template_id": ', 1, ',', cr,
\r
2954 '"system_picture_id": ', 1, ',', cr,
\r
2955 '"size": ', 1, ',', cr,
\r
2956 '"tail": ', a, ',', cr,
\r
2957 '"x": ', x, ',', cr,
\r
2958 '"y": ', y, ',', cr,
\r
2959 '"z": ', this.z, ',', cr,
\r
2960 '"t": ', this.timing, ',', cr,
\r
2961 '"width": ', w, ',', cr,
\r
2962 '"height": ', h, ',', cr,
\r
2963 '"speaches_attributes": {', cr,
\r
2964 '"newf', this.timing, '": {', cr,
\r
2965 '"content": "', text, '",', cr,
\r
2966 '"x": ', x, ',', cr,
\r
2967 '"y": ', y, ',', cr,
\r
2968 '"t": ', 0, ',', cr,
\r
2969 '"width": ', w, ',', cr,
\r
2970 '"height": ', h, cr,
\r
2976 getAsHTML: function( isAbsoluteUrl, isXHTML){
\r
2977 var url = XBROWSER_BALLOON.getURL();
\r
2980 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',
\r
2981 'width="', w, '" ',
\r
2982 'height="', h, '" ',
\r
2984 'left:', x, 'px;',
\r
2986 'z-index:', this.z, ';',
\r
2988 isXHTML !== true ? '>' : ' \/>',
\r
2989 pettanr.LINE_FEED_CODE_TEXTAREA,
\r
2990 '<div class="balloon" style="',
\r
2991 'left:', x, 'px;',
\r
2993 'width:', w, 'px;',
\r
2994 'height:', h, 'px;',
\r
2995 'z-index:', this.z,
\r
2996 '"><span>', text, '<\/span>', '<\/div>'
\r
3000 getAsXML: function(){}
\r
3005 /* --------------------------------------------------------------------------------------------
\r
3006 * COMIC_ELEMENT_CONTROL
\r
3007 * - mouseEventListener
\r
3009 var COMIC_ELEMENT_CONTROL = ( function(){
\r
3010 var SAVE = HISTORY_CONTROL.saveState,
\r
3011 ELM_CONTAINER = document.getElementById( 'comic-element-container'),
\r
3012 currentElement = null,
\r
3013 currentLockTest = false,
\r
3014 currentLock = false,
\r
3015 panelX, panelY, panelW, panelH,
\r
3018 * append, remove, replace
\r
3020 * comicElement には、z-position と dom-index がある。
\r
3021 * z-position は 表示上の位置。大きいほど前に表示される( z-index)
\r
3022 * dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。
\r
3024 * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。
\r
3025 * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。
\r
3027 * append comicElement
\r
3028 * 1. 新しい comicElement の z-position を得る
\r
3029 * 2. z の同じ comicElementを見つけ、その前に加える。または一番先頭へ。(COMIC_ELEMENT_ARRAY)
\r
3030 * zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。
\r
3031 * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。
\r
3034 * remove comicElement
\r
3038 function appendComicElement( _comicElement) {
\r
3039 _comicElement.init && _comicElement.init();
\r
3040 var z = _comicElement.z,
\r
3041 l = COMIC_ELEMENT_ARRAY.length,
\r
3042 _jqElm = _comicElement.$.stop().css( {
\r
3046 if( typeof z !== 'number' || z < 0 || z >= l){
\r
3047 COMIC_ELEMENT_ARRAY.unshift( _comicElement);
\r
3048 ELM_CONTAINER.appendChild( _jqElm.get( 0));
\r
3051 var insertIndex = 0;
\r
3052 for( var i = 0; i < l; ++i){
\r
3053 if( COMIC_ELEMENT_ARRAY[ i].z <= z){
\r
3058 COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());
\r
3059 COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);
\r
3063 function removeComicElement( _comicElement) {
\r
3064 var l = COMIC_ELEMENT_ARRAY.length;
\r
3065 for( var i=0; i<l; ++i){
\r
3066 if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){
\r
3067 COMIC_ELEMENT_ARRAY.splice( i, 1);
\r
3069 _comicElement.$.stop().css( {
\r
3072 }).fadeOut( onFadeOut);
\r
3073 currentElement = currentElement === _comicElement ? null : currentElement;
\r
3077 function onFadeOut(){
\r
3078 this.parentNode.removeChild( this);
\r
3081 function restoreComicElement( arg){
\r
3082 var isAppend = arg[ 0],
\r
3083 comicElement = arg[ 1];
\r
3084 isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);
\r
3087 * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算
\r
3090 function renumber(){
\r
3091 var l = COMIC_ELEMENT_ARRAY.length,
\r
3092 _comicElement, jqElm, jqNext;
\r
3093 for( var i=0; i < l; ++i){
\r
3094 _comicElement = COMIC_ELEMENT_ARRAY[ i];
\r
3095 jqElm = _comicElement.$;
\r
3096 jqNext && jqNext.before( jqElm);
\r
3097 _comicElement.z = l -i -1;
\r
3101 function replaceComicElement( _comicElement, goForward){
\r
3102 // COMIC_ELEMENT_ARRAYの再構築
\r
3103 var l = COMIC_ELEMENT_ARRAY.length,
\r
3105 for( var ret = 0; ret < l; ++ret){
\r
3106 if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement) return ret;
\r
3110 if( i === -1) return false;
\r
3111 if( goForward === true){
\r
3112 if( i === 0) return false;
\r
3113 COMIC_ELEMENT_ARRAY.splice( i, 1);
\r
3114 COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);
\r
3116 if( i === l -1) return false;
\r
3117 COMIC_ELEMENT_ARRAY.splice( i, 1);
\r
3118 COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);
\r
3123 function restoreReplaceElement( arg){
\r
3124 replaceComicElement( arg[ 0], arg[ 1]);
\r
3129 log = $( '#operation-catcher-log');
\r
3131 delete COMIC_ELEMENT_CONTROL.init;
\r
3134 COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();
\r
3136 close: function(){
\r
3138 while( COMIC_ELEMENT_ARRAY.length > 0){
\r
3139 _comicElm = COMIC_ELEMENT_ARRAY.shift();
\r
3140 _comicElm.destroy && _comicElm.destroy();
\r
3143 remove: removeComicElement,
\r
3144 restore: restoreComicElement,
\r
3145 replace: replaceComicElement,
\r
3146 restoreReplace: restoreReplaceElement,
\r
3147 onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){
\r
3149 * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。
\r
3151 if( isResizerTopAction === true){
\r
3152 var _shiftX = _panelW -panelW,
\r
3153 _shiftY = _panelH -panelH,
\r
3154 l = COMIC_ELEMENT_ARRAY.length;
\r
3155 for( var i = 0; i < l; i++){
\r
3156 COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);
\r
3164 ELM_CONTAINER.style.width = _panelW +'px';
\r
3165 ELM_CONTAINER.style.height = _panelH +'px';
\r
3166 ELM_CONTAINER.style.left = _panelX +'px';
\r
3167 ELM_CONTAINER.style.top = _panelY +'px';
\r
3169 onMouseMove: function( _mouseX, _mouseY){
\r
3170 var l = COMIC_ELEMENT_ARRAY.length,
\r
3171 _x = _mouseX -panelX,
\r
3172 _y = _mouseY -panelY,
\r
3173 _elm = currentElement;
\r
3175 if( _elm !== null){
\r
3176 currentLockTest = currentLockTest === true && _x === 0 && _y === 0;
\r
3177 if( _elm.busy() === true){
\r
3178 _elm.onMouseMove( _x, _y);
\r
3181 if( _elm.hitTest( _x, _y) === true){
\r
3182 _elm.onMouseMove( _x, _y); // cursor
\r
3185 if( currentLock === true){
\r
3186 currentLockTest = true;
\r
3190 for( var i=0; i<l; i++){
\r
3191 _elm = COMIC_ELEMENT_ARRAY[ i];
\r
3193 if( _elm.hitTest( _x, _y) === true){
\r
3194 _elm.onMouseMove( _x, _y); // cursor
\r
3195 log.html( [ _x, _y, i].join( ','));
\r
3196 currentElement = _elm;
\r
3200 currentElement = null;
\r
3201 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
3202 log.html( [ _x, _y].join( ','));
\r
3205 onMouseUp: function( _mouseX, _mouseY){
\r
3206 var ret = currentElement !== null && currentElement.busy() === true;
\r
3207 ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);
\r
3208 currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY) === true;
\r
3209 RESIZE_OPERATOR.lock( currentLock);
\r
3210 INFOMATION_WINDOW.lock( currentLock);
\r
3213 onMouseDown: function( _mouseX, _mouseY){
\r
3216 if( currentElement === null) return false
\r
3217 currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);
\r
3218 currentLockTest = true;
\r
3222 return currentElement !== null;
\r
3224 createImageElement: function( url, imagesetID, x, y, z, w, h){
\r
3225 w = w || 200; //ActualWidth
\r
3226 h = h || 150; //ActualHeight
\r
3227 x = x || Math.floor( panelW /2 -w /2);
\r
3228 y = y || Math.floor( panelH /2 -h /2);
\r
3229 function onImageSelect( _url, _w, _h){
\r
3230 var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);
\r
3231 appendComicElement( _comicElement);
\r
3232 _comicElement.animate( undefined, undefined, _w, _h);
\r
3233 SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);
\r
3235 IMAGE_GROUP_EXPROLER.show( onImageSelect);
\r
3237 createTextElement: function( type, angle, text, x, y, z, w, h){
\r
3239 angle = angle || 0;
\r
3240 text = text || '';
\r
3243 x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);
\r
3244 y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);
\r
3245 var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);
\r
3246 TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){
\r
3247 appendComicElement( _comicElement);
\r
3248 SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);
\r
3251 getAsHTML: function( isAbsoluteUrl, isXHTML){
\r
3252 var HTML_ARRAY = [],
\r
3253 l = COMIC_ELEMENT_ARRAY.length,
\r
3257 while( HTML_ARRAY.length < l){
\r
3258 _comicElement = getComicElementByTiming();
\r
3259 if( _comicElement === null) break;
\r
3260 HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));
\r
3262 function getComicElementByTiming(){
\r
3263 while( _timing < l *2){
\r
3264 for(var i=0; i<l; ++i){
\r
3265 if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){
\r
3267 return COMIC_ELEMENT_ARRAY[ i];
\r
3274 HTML_ARRAY.unshift(
\r
3276 '<div class="panel" ',
\r
3278 'height:', panelH, 'px;',
\r
3279 'background-color:', ';',
\r
3284 HTML_ARRAY.push( '</div>');
\r
3286 return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);
\r
3288 getAsJsonString: function(){
\r
3289 var JSON_STRING_ARRAY = [],
\r
3291 BALLOON_ARRAY = [],
\r
3292 l = COMIC_ELEMENT_ARRAY.length,
\r
3295 cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
3297 while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){
\r
3298 _comicElement = getComicElementByTiming();
\r
3299 if( _comicElement === null) break;
\r
3300 _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ?
\r
3301 IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :
\r
3302 BALLOON_ARRAY.push( _comicElement.getAsJsonString());
\r
3304 function getComicElementByTiming(){
\r
3305 while( _timing < l *2){
\r
3306 for(var i=0; i<l; ++i){
\r
3307 if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){
\r
3309 return COMIC_ELEMENT_ARRAY[ i];
\r
3319 '"border": 1,', cr,
\r
3320 '"comic_id": 5,', cr,
\r
3321 '"resource_picture_id": 1,', cr,
\r
3322 '"x": ', 0, ',', cr,
\r
3323 '"y": ', 0, ',', cr,
\r
3324 '"z": ', 0, ',', cr,
\r
3325 '"t": ', 0, ',', cr,
\r
3326 '"width": ', panelW, ',', cr,
\r
3327 '"height": ', panelH, ',', cr,
\r
3328 '"panel_pictures_attributes": {', cr,
\r
3329 IMAGE_ARRAY.join( ',' +cr), cr,
\r
3331 '"balloons_attributes": {', cr,
\r
3332 BALLOON_ARRAY.join( ',' +cr), cr,
\r
3342 * end of COMIC_ELEMENT_CONTROL
\r
3347 function updateMouseCursor( _cursor){
\r
3348 if( currentCursor !== _cursor){
\r
3349 currentCursor = _cursor;
\r
3350 setTimeout( update, 0);
\r
3352 function update(){
\r
3353 ELM_MOUSE_EVENT_CHATCHER.style.cursor = currentCursor;
\r
3356 function centering(){
\r
3357 pettanr.editor.onWindowResize( windowW, windowH);
\r
3359 function mouseEventRellay( e){
\r
3360 var _mouseX = e.pageX,
\r
3361 _mouseY = e.pageY,
\r
3362 rellayMethod = e.type === 'mousedown' ?
\r
3364 ( e.type === 'mousemove' ? 'onMouseMove' : 'onMouseUp');
\r
3365 if( currentListener !== null && currentListener.busy() === true){
\r
3366 currentListener[ rellayMethod]( _mouseX, _mouseY);
\r
3368 currentListener = null;
\r
3369 var l = MOUSE_LISTENER_ARRAY.length,
\r
3371 for( var i=0; i<l; ++i){
\r
3372 _listener = MOUSE_LISTENER_ARRAY[ i];
\r
3373 if( _listener[ rellayMethod]( _mouseX, _mouseY) === true){
\r
3374 currentListener = _listener;
\r
3380 //!document.selection && window.getSelection().removeAllRanges();
\r
3381 e.stopPropagation();
\r
3385 /* grobal method */
\r
3386 this.rootElement = document.getElementById( 'editor' );
\r
3387 this.displayName = pettanr.view.EDITOR;
\r
3388 this.ID = pettanr.view.EDITOR;
\r
3389 this.MIN_WIDTH = 320;
\r
3390 this.MIN_HEIGHT = 320;
\r
3391 this.firstOpen = function(){
\r
3393 * MOUSE_LISTENER_ARRAY は、表示順に格納.手前の要素が最初
\r
3394 * MENU_BAR_CONTROL,
\r
3396 * COMIC_ELEMENT_CONTROL,
\r
3398 * .busy() === true なら、そのままonMouseMove()にイベントを流す.
\r
3399 * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す.
\r
3401 MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);
\r
3403 CONSOLE_CONTROLER.init();
\r
3405 OUTPUT_CONSOLE.init();
\r
3406 TEXT_EDITOR_CONTROL.init();
\r
3407 IMAGE_GROUP_EXPROLER.init();
\r
3412 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering); // ctrl + 0
\r
3413 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering); // ctrl + 0
\r
3414 MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);
\r
3416 * jqMouseEventChacher は透明な要素で、
\r
3417 * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事
\r
3418 * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。
\r
3420 jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)
\r
3421 .mousemove( mouseEventRellay)
\r
3422 .mousedown( mouseEventRellay)
\r
3423 .mouseup( mouseEventRellay)
\r
3424 .mouseout( mouseEventRellay);
\r
3426 delete pettanr.editor.firstOpen;
\r
3428 this.onOpen = function( _w, _h, _file ){
\r
3429 var panelW, panelH, borderSize, fileData, _childFile;
\r
3430 if( pettanr.file.isFileInstance( _file ) === true ){
\r
3431 if( pettanr.driver.isPettanrFileInstance( _file ) === true ){
\r
3432 if( _file.getType() === pettanr.driver.FILE_TYPE.COMIC ){
\r
3433 fileData = _file.read();
\r
3434 panelW = fileData.width;
\r
3435 panelH = fileData.height;
\r
3437 if( _file.getType() === pettanr.driver.FILE_TYPE.PANEL ){
\r
3438 fileData = _file.read();
\r
3439 panelW = fileData.width;
\r
3440 panelH = fileData.height;
\r
3441 borderSize = fileData.border;
\r
3443 for( var i=0; i<_file.getChildFileLength(); ++i){
\r
3444 _childFile = _file.getChildFileAt( i );
\r
3445 if( _file.getType() === pettanr.driver.FILE_TYPE.PANEL_PICTURE ){
\r
3446 COMIC_ELEMENT_CONTROL.appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));
\r
3448 if( _file.getType() === pettanr.driver.FILE_TYPE.BALLOON ){
\r
3449 COMIC_ELEMENT_CONTROL.appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));
\r
3457 jqEditor = jqEditor || $( '#editor');
\r
3459 HISTORY_CONTROL.open();
\r
3461 WINDOWS_CONTROL.open();
\r
3463 GRID_CONTROL.open();
\r
3464 PANEL_CONTROL.open( panelW, panelH, borderSize );
\r
3466 COMIC_ELEMENT_OPERATION_MANAGER.open();
\r
3467 COMIC_ELEMENT_CONTROL.open();
\r
3470 MENU_BAR_CONTROL.open();
\r
3472 pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();
\r
3476 pettanr.editor.onPaneResize( _w, _h );
\r
3478 this.onClose = function(){
\r
3479 HISTORY_CONTROL.close();
\r
3481 WINDOWS_CONTROL.close();
\r
3483 GRID_CONTROL.close();
\r
3484 PANEL_CONTROL.close();
\r
3486 COMIC_ELEMENT_OPERATION_MANAGER.close();
\r
3487 COMIC_ELEMENT_CONTROL.close();
\r
3490 MENU_BAR_CONTROL.open();
\r
3492 this.onPaneResize = function( _windowW, _windowH){
\r
3493 windowW = _windowW || windowW;
\r
3494 windowH = _windowH || windowH;
\r
3495 if( pettanr.editor.firstOpen) return;
\r
3499 jqEditor.get( 0).style.height = _windowH +'px';
\r
3500 ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';
\r
3502 WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);
\r
3503 MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);
\r
3504 PANEL_CONTROL.onWindowResize( _windowW, _windowH);
\r
3508 pettanr.view.registerApplication( pettanr.editor );
\r
3511 pettanr.comicConsole = ( function(){
\r
3512 var COMIC_CONSOLE = pettanr.view.createApplication( function(){
\r
3514 ID = 'comicConsole',
\r
3515 elmWrap = document.getElementById( 'comic-console-wrapper' ),
\r
3516 elmHeader = document.getElementById( 'comic-console-header' ),
\r
3517 elmProgress = document.getElementById( 'comic-console-progress' ),
\r
3518 inputTitle, inputW, inputH, inputVisible, inputEditable,
\r
3519 elmUploader = null,
\r
3524 isUploading = false;
\r
3525 //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
\r
3527 function clickOK(){
\r
3528 if( !elmForm || !elmIframe || isUploading === true ) return false;
\r
3530 isUploading = true;
\r
3531 elmProgress.innerHTML = '■';
\r
3535 function copyAndSubmit(){
\r
3536 var _inputList = elmForm.getElementsByTagName( 'input' ),
\r
3538 for( var i=0, l= _inputList.length; i<l; ++i){
\r
3539 _input = _inputList[ i ];
\r
3540 _name = _input.name;
\r
3541 if( _name === 'comic[title]'){
\r
3542 _input.value = inputTitle.value();
\r
3544 if( _name === 'comic[width]'){
\r
3545 _input.value = inputW.value();
\r
3547 if( _name === 'comic[height]'){
\r
3548 _input.value = inputH.value();
\r
3551 var _selectList = elmForm.getElementsByTagName( 'select' ),
\r
3552 _select, _name, _optionList;
\r
3553 for( i=0, l= _selectList.length; i<l; ++i){
\r
3554 _select = _selectList[ i ];
\r
3555 _name = _select.name;
\r
3556 _optionList = _select.getElementsByTagName( 'option' )
\r
3557 if( _name === 'comic[visible]'){
\r
3558 _select.selectedIndex = 1;
\r
3560 if( _name === 'comic[editable]'){
\r
3561 _select.selectedIndex = 0;
\r
3567 elmProgress.innerHTML = 'submit() err..';
\r
3568 isUploading = false;
\r
3569 setTimeout( clickCancel , 3000);
\r
3572 if( pettanr.ua.isIE){
\r
3573 elmIframe.onreadystatechange = detectIframe;
\r
3575 elmIframe.onload = onIframeUpdate;
\r
3577 elmProgress.innerHTML = 'uploading..';
\r
3580 * ie の 場合、readyState をチェック.
\r
3582 function detectIframe(){
\r
3583 if ( elmIframe.readyState === 'complete') {
\r
3584 elmIframe.onreadystatechange = new Function();
\r
3585 elmIframe.onreadystatechange = null;
\r
3589 function onIframeUpdate(){
\r
3590 elmIframe.onload = null;
\r
3591 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
\r
3593 elmProgress.innerHTML = 'success!';
\r
3594 setTimeout( clickCancel , 1000);
\r
3595 isUploading = false;
\r
3598 function clickCancel(){
\r
3599 if( isUploading === true) return false;
\r
3600 pettanr.overlay.hide();
\r
3601 COMIC_CONSOLE.onClose();
\r
3603 function detectForm(){
\r
3604 elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];
\r
3606 window.clearInterval( timer);
\r
3608 pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );
\r
3609 elmProgress.innerHTML = 'create iframe';
\r
3612 function onCreateIframe( _iframe ){
\r
3613 elmUploader.appendChild( _iframe );
\r
3614 elmIframe = _iframe;
\r
3615 elmForm.target = _iframe.name;
\r
3616 elmProgress.innerHTML = '';
\r
3619 this.init = function(){
\r
3620 this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();
\r
3621 $( '#comic-console-post-button').click( clickOK );
\r
3622 $( '#comic-console-cancel-button').click( clickCancel );
\r
3624 var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;
\r
3625 inputTitle = CREATER( document.getElementById( 'comic-console-title'), null, ID);
\r
3626 inputW = CREATER( document.getElementById( 'comic-console-width'), null, ID);
\r
3627 inputH = CREATER( document.getElementById( 'comic-console-height'), null, ID);
\r
3628 inputVisible = CREATER( document.getElementById( 'comic-console-visible'), null, ID);
\r
3629 inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);
\r
3631 delete COMIC_CONSOLE.init;
\r
3633 this.jqWrap = null;
\r
3635 this.show = function( w, h){
\r
3638 pettanr.overlay.show( COMIC_CONSOLE );
\r
3640 inputTitle.start();
\r
3642 elmUploader = document.createElement( 'div');
\r
3643 elmUploader.id = "newcomic";
\r
3644 elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';
\r
3645 elmWrap.appendChild( elmUploader);
\r
3647 var elmScript = document.createElement( 'script');
\r
3648 elmScript.type = 'text\/javascript';
\r
3649 elmScript.src = pettanr.CONST.CREATE_COMIC_JS;
\r
3650 elmWrap.appendChild( elmScript);
\r
3652 elmProgress.innerHTML = 'loading form.';
\r
3654 if( timer === null){
\r
3655 timer = window.setInterval( detectForm, 250);
\r
3658 COMIC_CONSOLE.onWindowResize( w, h);
\r
3660 this.onWindowResize = function( _windowW, _windowH){
\r
3663 left: Math.floor( ( _windowW -jqWrap.width()) /2),
\r
3664 top: Math.floor( ( _windowH -jqWrap.height()) /2)
\r
3668 this.onClose = function(){
\r
3669 elmForm !== null && $( elmUploader ).remove();
\r
3671 isUploading = false;
\r
3673 if( elmScript !== null ){
\r
3674 document.body.removeChild( elmScript);
\r
3675 elmScript = null;
\r
3677 if( timer !== null){
\r
3678 window.clearInterval( timer);
\r
3688 COMIC_CONSOLE.init();
\r
3689 delete pettanr.comicConsole.init;
\r
3691 onOpen: function( _w, _h, _file){
\r
3692 if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){
\r
3693 // _data = _file.read();
\r
3696 onClose: function(){
\r
3699 onWindowResize: function( _windowW, _windowH){
\r
3701 _quickAccessShow: function(){
\r
3702 jqWindow = pettanr.jqWindow();
\r
3703 var w = jqWindow.width(),
\r
3704 h = jqWindow.height();
\r
3705 COMIC_CONSOLE.show( w, h);
\r
3710 pettanr.uploadConsole = ( function(){
\r
3711 var UPLOAD_CONSOLE = ( function(){
\r
3712 var jqWrap, windowW, windowH,
\r
3713 ID = 'uploadConsole',
\r
3714 TARGET_FRAME_NAME = 'targetFrame',
\r
3715 elmContainer = document.getElementById( 'uploader'),
\r
3716 elmProgress = document.getElementById( 'upload-console-progress'),
\r
3722 isUploading = false;
\r
3724 * upload ボタンが押されたらまず iframe をつくる.
3726 function clickOK(){
\r
3727 if( !elmForm || !elmIframe || isUploading === true ) return false;
\r
3728 if( elmFile.value.length === 0) return false;
\r
3729 elmProgress.innerHTML = 'uploading.';
\r
3730 isUploading = true;
\r
3735 * form の target に iframe を指定したのち submit();
3737 function submit(){
\r
3741 elmProgress.innerHTML = 'submit() err..';
\r
3742 isUploading = false;
\r
3743 setTimeout( clickCancel , 3000);
\r
3747 if( pettanr.ua.isIE){
\r
3748 elmIframe.onreadystatechange = detectIframe;
\r
3750 elmIframe.onload = onLoad;
\r
3752 elmProgress.innerHTML = 'uploading..';
\r
3755 * ie の 場合、readyState をチェック.
3757 function detectIframe(){
\r
3758 if ( elmIframe.readyState === 'complete') {
\r
3759 elmIframe.onreadystatechange = new Function();
\r
3760 elmIframe.onreadystatechange = null;
\r
3764 function onLoad(){
\r
3765 elmIframe.onload = null;
\r
3766 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
\r
3767 elmProgress.innerHTML = 'success!';
\r
3768 setTimeout( clickCancel , 1000);
\r
3769 isUploading = false;
\r
3772 function detectForm(){
\r
3773 elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
\r
3775 var _inputList = elmForm.getElementsByTagName( 'input' ),
\r
3777 for( var i=0, l= _inputList.length; i<l; ++i){
\r
3778 _input = _inputList[ i ];
\r
3779 if( _input.type === 'file'){
\r
3782 if( _input.type === 'submit'){
\r
3783 _input.style.display = 'none';
\r
3786 window.clearInterval( timer);
\r
3788 pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
\r
3789 elmProgress.innerHTML = 'create iframe';
\r
3792 function onCreateIframe( _iframe ){
\r
3793 elmContainer.appendChild( _iframe );
\r
3794 elmIframe = _iframe;
\r
3795 elmForm.target = _iframe.name;
\r
3796 elmProgress.innerHTML = '';
\r
3797 UPLOAD_CONSOLE.onWindowResize( windowW, windowH );
\r
3802 function clickCancel(){
\r
3803 if( isUploading === true) return false;
\r
3804 pettanr.overlay.hide();
\r
3805 UPLOAD_CONSOLE.onClose();
\r
3811 this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();
\r
3812 $( '#upload-console-post-button').click( clickOK );
\r
3813 $( '#upload-console-cancel-button').click( clickCancel );
\r
3815 delete UPLOAD_CONSOLE.init;
\r
3818 show: function( w, h){
\r
3820 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.
3822 elmScript = document.createElement( 'script');
\r
3823 elmScript.type = 'text\/javascript';
\r
3824 elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;
\r
3825 document.body.appendChild( elmScript);
\r
3828 pettanr.overlay.show( UPLOAD_CONSOLE );
\r
3830 if( timer === null){
\r
3831 timer = window.setInterval( detectForm, 250);
\r
3834 elmProgress.innerHTML = 'loading form.';
\r
3836 UPLOAD_CONSOLE.onWindowResize( w, h);
\r
3838 onWindowResize: function( _windowW, _windowH){
\r
3839 windowW = _windowW;
\r
3840 windowH = _windowH;
\r
3843 left: Math.floor( ( _windowW -jqWrap.width()) /2),
\r
3844 top: Math.floor( ( _windowH -jqWrap.height()) /2)
\r
3848 onClose: function(){
\r
3849 elmForm !== null && $( elmContainer.children ).remove();
\r
3850 elmForm = elmFile = elmIframe = null;
\r
3851 isUploading = false;
\r
3853 if( elmScript !== null ){
\r
3854 document.body.removeChild( elmScript);
\r
3855 elmScript = null;
\r
3857 if( timer !== null){
\r
3858 window.clearInterval( timer);
\r
3869 UPLOAD_CONSOLE.init();
\r
3870 delete pettanr.comicConsole.init;
\r
3872 onOpen: function( _w, _h, _file){
\r
3873 if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){
\r
3874 // _data = _file.read();
\r
3877 onClose: function(){
\r
3880 onWindowResize: function( _windowW, _windowH){
\r
3882 _quickAccessShow: function(){
\r
3883 jqWindow = pettanr.jqWindow();
\r
3884 var w = jqWindow.width(),
\r
3885 h = jqWindow.height();
\r
3886 UPLOAD_CONSOLE.show( w, h);
\r
3891 pettanr.panelConsole = ( function(){
\r
3892 var PANEL_CONSOLE = ( function(){
\r
3893 var jqWrap, windowW, windowH,
\r
3894 ID = 'panelConsole',
\r
3895 TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',
\r
3896 elmContainer = document.getElementById( 'newpanel'),
\r
3897 elmProgress = document.getElementById( 'panel-console-progress'),
\r
3902 isUploading = false;
\r
3904 * upload ボタンが押されたらまず iframe をつくる.
\r
3906 function clickOK(){
\r
3907 if( !elmForm || !elmIframe || isUploading === true ) return false;
\r
3908 elmProgress.innerHTML = 'uploading.';
\r
3909 isUploading = true;
\r
3914 * form の target に iframe を指定したのち submit();
\r
3916 function submit(){
\r
3920 elmProgress.innerHTML = 'submit() err..';
\r
3921 isUploading = false;
\r
3922 setTimeout( clickCancel , 3000);
\r
3926 if( pettanr.ua.isIE){
\r
3927 elmIframe.onreadystatechange = detectIframe;
\r
3929 elmIframe.onload = onLoad;
\r
3931 elmProgress.innerHTML = 'uploading..';
\r
3934 * ie の 場合、readyState をチェック.
\r
3936 function detectIframe(){
\r
3937 if ( elmIframe.readyState === 'complete') {
\r
3938 elmIframe.onreadystatechange = new Function();
\r
3939 elmIframe.onreadystatechange = null;
\r
3943 function onLoad(){
\r
3944 elmIframe.onload = null;
\r
3945 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
\r
3946 elmProgress.innerHTML = 'success!';
\r
3947 setTimeout( clickCancel , 1000);
\r
3948 isUploading = false;
\r
3951 function detectForm(){
\r
3952 elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
\r
3954 var _inputList = elmForm.getElementsByTagName( 'input' ),
\r
3956 for( var i=0, l= _inputList.length; i<l; ++i){
\r
3957 _input = _inputList[ i ];
\r
3958 if( _input.type === 'submit'){
\r
3959 _input.style.display = 'none';
\r
3962 window.clearInterval( timer);
\r
3964 pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
\r
3965 elmProgress.innerHTML = 'create iframe';
\r
3968 function onCreateIframe( _iframe ){
\r
3969 elmContainer.appendChild( _iframe );
\r
3970 elmIframe = _iframe;
\r
3971 elmForm.target = _iframe.name;
\r
3972 elmProgress.innerHTML = '';
\r
3973 PANEL_CONSOLE.onWindowResize( windowW, windowH );
\r
3978 function clickCancel(){
\r
3979 if( isUploading === true) return false;
\r
3980 pettanr.overlay.hide();
\r
3981 PANEL_CONSOLE.onClose();
\r
3987 this.jqWrap = jqWrap = $( '#panel-console-wrapper').hide();
\r
3988 $( '#panel-console-post-button').click( clickOK );
\r
3989 $( '#panel-console-cancel-button').click( clickCancel );
\r
3991 delete PANEL_CONSOLE.init;
\r
3994 show: function( w, h){
\r
3996 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.
\r
3998 elmScript = document.createElement( 'script');
\r
3999 elmScript.type = 'text\/javascript';
\r
4000 elmScript.src = pettanr.CONST.CREATE_PANEL_JS;
\r
4001 document.body.appendChild( elmScript);
\r
4004 pettanr.overlay.show( PANEL_CONSOLE );
\r
4006 if( timer === null){
\r
4007 timer = window.setInterval( detectForm, 250 );
\r
4010 elmProgress.innerHTML = 'loading form.';
\r
4012 PANEL_CONSOLE.onWindowResize( w, h );
\r
4014 onWindowResize: function( _windowW, _windowH){
\r
4015 windowW = _windowW;
\r
4016 windowH = _windowH;
\r
4019 left: Math.floor( ( _windowW -jqWrap.width()) /2),
\r
4020 top: Math.floor( ( _windowH -jqWrap.height()) /2)
\r
4024 onClose: function(){
\r
4025 elmForm !== null && $( elmContainer.children ).remove();
\r
4026 elmForm = elmIframe = null;
\r
4027 isUploading = false;
\r
4029 if( elmScript !== null ){
\r
4030 document.body.removeChild( elmScript);
\r
4031 elmScript = null;
\r
4033 if( timer !== null){
\r
4034 window.clearInterval( timer);
\r
4045 PANEL_CONSOLE.init();
\r
4046 delete pettanr.comicConsole.init;
\r
4048 onOpen: function( _w, _h, _file ){
\r
4051 onClose: function(){
\r
4054 onWindowResize: function( _windowW, _windowH){
\r
4056 _quickAccessShow: function(){
\r
4057 jqWindow = pettanr.jqWindow();
\r
4058 var w = jqWindow.width(),
\r
4059 h = jqWindow.height();
\r
4060 PANEL_CONSOLE.show( w, h);
\r
4065 pettanr.artistConsole = ( function(){
\r
4066 var ARTIST_CONSOLE = pettanr.view.createApplication( function(){
\r
4067 var jqWrap, windowW, windowH,
\r
4068 ID = 'artistConsole',
\r
4069 TARGET_FRAME_NAME = 'targetFrameRegisterArtist',
\r
4070 elmContainer = document.getElementById( 'register'),
\r
4071 elmProgress = document.getElementById( 'artist-console-progress'),
\r
4076 isUploading = false;
\r
4078 * upload ボタンが押されたらまず iframe をつくる.
\r
4080 function clickOK(){
\r
4081 if( !elmForm || !elmIframe || isUploading === true ) return false;
\r
4082 elmProgress.innerHTML = 'uploading.';
\r
4083 isUploading = true;
\r
4088 * form の target に iframe を指定したのち submit();
\r
4090 function submit(){
\r
4094 elmProgress.innerHTML = 'submit() err..';
\r
4095 isUploading = false;
\r
4096 setTimeout( clickCancel , 3000);
\r
4100 if( pettanr.ua.isIE){
\r
4101 elmIframe.onreadystatechange = detectIframe;
\r
4103 elmIframe.onload = onLoad;
\r
4105 elmProgress.innerHTML = 'uploading..';
\r
4108 * ie の 場合、readyState をチェック.
\r
4110 function detectIframe(){
\r
4111 if ( elmIframe.readyState === 'complete') {
\r
4112 elmIframe.onreadystatechange = new Function();
\r
4113 elmIframe.onreadystatechange = null;
\r
4117 function onLoad(){
\r
4118 elmIframe.onload = null;
\r
4119 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
\r
4120 elmProgress.innerHTML = 'success!';
\r
4121 setTimeout( clickCancel , 1000);
\r
4122 isUploading = false;
\r
4125 function detectForm(){
\r
4126 elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
\r
4128 var _inputList = elmForm.getElementsByTagName( 'input' ),
\r
4130 for( var i=0, l= _inputList.length; i<l; ++i){
\r
4131 _input = _inputList[ i ];
\r
4132 if( _input.type === 'submit'){
\r
4133 _input.style.display = 'none';
\r
4136 window.clearInterval( timer);
\r
4138 pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
\r
4139 elmProgress.innerHTML = 'create iframe';
\r
4142 function onCreateIframe( _iframe ){
\r
4143 elmContainer.appendChild( _iframe );
\r
4144 elmIframe = _iframe;
\r
4145 elmForm.target = _iframe.name;
\r
4146 elmProgress.innerHTML = '';
\r
4147 ARTIST_CONSOLE.onWindowResize( windowW, windowH );
\r
4152 function clickCancel(){
\r
4153 if( isUploading === true) return false;
\r
4154 pettanr.overlay.hide();
\r
4155 ARTIST_CONSOLE.onClose();
\r
4159 this.init = function(){
\r
4160 this.jqWrap = jqWrap = $( '#artist-console-wrapper').hide();
\r
4161 $( '#artist-console-post-button').click( clickOK );
\r
4162 $( '#artist-console-cancel-button').click( clickCancel );
\r
4164 delete ARTIST_CONSOLE.init;
\r
4166 this.jqWrap = null;
\r
4168 this.show = function( w, h){
\r
4170 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.
\r
4172 elmScript = document.createElement( 'script');
\r
4173 elmScript.type = 'text\/javascript';
\r
4174 elmScript.src = pettanr.CONST.REGISTER_ARTIST_JS;
\r
4175 document.body.appendChild( elmScript);
\r
4178 pettanr.overlay.show( ARTIST_CONSOLE );
\r
4180 if( timer === null){
\r
4181 timer = window.setInterval( detectForm, 250 );
\r
4184 elmProgress.innerHTML = 'loading form.';
\r
4186 ARTIST_CONSOLE.onWindowResize( w, h );
\r
4188 this.onWindowResize = function( _windowW, _windowH ){
\r
4189 windowW = _windowW;
\r
4190 windowH = _windowH;
\r
4193 left: Math.floor( ( _windowW -jqWrap.width()) /2),
\r
4194 top: Math.floor( ( _windowH -jqWrap.height()) /2)
\r
4198 this.onClose = function(){
\r
4199 elmForm !== null && $( elmContainer.children ).remove();
\r
4200 elmForm = elmIframe = null;
\r
4201 isUploading = false;
\r
4203 if( elmScript !== null ){
\r
4204 document.body.removeChild( elmScript);
\r
4205 elmScript = null;
\r
4207 if( timer !== null){
\r
4208 window.clearInterval( timer);
\r
4217 ARTIST_CONSOLE.init();
\r
4218 delete pettanr.comicConsole.init;
\r
4220 onOpen: function( _w, _h, _option ){
\r
4223 onClose: function(){
\r
4226 onWindowResize: function( _windowW, _windowH){
\r
4228 _quickAccessShow: function(){
\r
4229 jqWindow = pettanr.jqWindow();
\r
4230 var w = jqWindow.width(),
\r
4231 h = jqWindow.height();
\r
4232 ARTIST_CONSOLE.show( w, h);
\r