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
34 pettanr.LINE_FEED_CODE_TEXTAREA = ( function(){
\r
35 var text = document.getElementById( 'shadowTxtarea'),
\r
36 form = text.parentNode;
\r
37 form.parentNode.removeChild( form);
\r
40 pettanr.LINE_FEED_CODE_PRE = ( function(){
\r
41 var pre = document.getElementById( 'shadowPre');
\r
42 pre.parentNode.removeChild( pre);
\r
43 return pettanr.ua.isIE === true ? this.LINE_FEED_CODE_TEXTAREA : pre.innerHTML; // ie ??
\r
46 /* ----------------------------------------
\r
48 * - MENU_BAR_CONTROL
\r
51 * - TEXT_EDITOR_CONTROL
\r
52 * - IMAGE_GROUP_EXPROLER
\r
55 * - INFOMATION_WINDOW
\r
57 * - HELP_DOCUMENTS_WINDOW
\r
60 * - WHITE_GLASS_CONTROL
\r
64 * - PanelResizerClass
\r
65 * - PANEL_RESIZER_TOP
\r
66 * - PANEL_RESIZER_BOTTOM
\r
67 * - CONSOLE_CONTROLER
\r
71 * - POSITION_OPERATOR
\r
72 * - COMIC_ELEMENT_OPERATION_MANAGER
\r
74 * - ImageElementClass
\r
75 * - TextElementClass
\r
77 * - COMIC_ELEMENT_CONTROL
\r
81 pettanr.editor = ( function(){
\r
83 var COMIC_ELEMENT_TYPE_IMAGE = 0,
\r
84 COMIC_ELEMENT_TYPE_TEXT = 1,
\r
85 MOUSE_LISTENER_ARRAY = [],
\r
86 COMIC_ELEMENT_ARRAY = [],
\r
87 ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),
\r
88 MIN_PANEL_HEIGHT = 20,
\r
89 MIN_OBJECT_SIZE = 19,
\r
90 MOUSE_HIT_AREA = 10,
\r
91 jqMouseEventChacher,
\r
94 currentListener = null,
\r
99 /* ----------------------------------------
\r
109 var MENU_BAR_CONTROL = ( function(){
\r
110 var ELM_BAR = document.getElementById( 'menu-bar'),
\r
111 ELM_ITEM_CLASSNAME = 'menu-bar-item',
\r
112 ELM_ITEM_ORIGN = ( function(){
\r
113 var ret = document.createElement( 'div'),
\r
114 div = document.createElement( 'div'),
\r
115 ul = document.createElement( 'ul');
\r
116 ret.className = ELM_ITEM_CLASSNAME;
\r
117 ret.appendChild( div);
\r
118 ret.appendChild( ul);
\r
121 ELM_SELECTION_ORIGN = ( function(){
\r
122 var ret = document.createElement( 'li'),
\r
123 a = document.createElement( 'a'),
\r
124 span = document.createElement( 'span'),
\r
125 key = document.createElement( 'kbd');
\r
126 a.appendChild( span);
\r
127 a.appendChild( key);
\r
128 ret.appendChild( a);
\r
132 EMPTY_FUNCTION = new Function,
\r
134 barH = pettanr.util.getElementSize( ELM_BAR).height,
\r
135 itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,
\r
136 selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width,
\r
138 ELM_BAR.style.top = ( -barH) +'px';
\r
140 var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){
\r
141 var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),
\r
142 ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0],
\r
143 elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0];
\r
146 elmShortcut.innerHTML = shortcut;
\r
148 elmShortcut.parentNode.removeChild( elmShortcut);
\r
150 elmShortcut = null;
\r
152 container.appendChild( ELM_WRAPPER);
\r
154 updateTitle( title);
\r
155 updateVisible( visible);
\r
157 function updateTitle( _title){
\r
158 ELM_TITLE.innerHTML = title = _title;
\r
160 function updateVisible( _visible){
\r
161 if( _visible !== undefined){
\r
162 visible = !!_visible;
\r
163 ELM_WRAPPER.className = visible === true ? '' : 'disabled';
\r
168 title: function( _title){
\r
169 _title !== undefined && updateTitle( _title);
\r
172 visible: function( _visible){
\r
173 visible !== !!_visible && updateVisible( _visible);
\r
176 separateAfter: separateAfter
\r
180 var MenuBarItemClass = function( title, opt_callbackArray){
\r
181 var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),
\r
182 ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],
\r
183 ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],
\r
184 INDEX = ITEM_ARRAY.length,
\r
185 SELECTION_CALLBACK_ARRAY = opt_callbackArray || [],
\r
188 ELM_TITLE.innerHTML = title;
\r
190 ELM_WRAPPER.style.left = ( itemW * INDEX) +'px';
\r
191 ELM_BAR.appendChild( ELM_WRAPPER);
\r
193 function onClick( e){
\r
196 var parent = that.parentNode,
\r
197 children = parent.getElementsByTagName( 'li'),
\r
198 l = children.length;
\r
199 for(var i=0; i<l; ++i){
\r
200 if( children[ i] === that) return i;
\r
204 i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]();
\r
205 e.stopPropagation();
\r
212 $( ELM_SELECTION).children( 'li').click( onClick);
\r
216 if( visible === true) return;
\r
217 jqStage.append( ELM_WRAPPER);
\r
218 ELM_WRAPPER.className = ELM_ITEM_CLASSNAME +'-focus';
\r
219 this.onShow && setTimeout( this.onShow, 0);
\r
223 if( visible === false) return;
\r
224 ELM_BAR.appendChild( ELM_WRAPPER);
\r
225 ELM_WRAPPER.className = ELM_ITEM_CLASSNAME;
\r
226 this.onHide && setTimeout( this.onHide, 0);
\r
229 createSelection: function( title, shortcut, callback, visible, separateBefore, separateAfter){
\r
230 var ret = MenubarSelectionClass.apply( {}, [ ELM_SELECTION, title, shortcut, visible, separateAfter]),
\r
231 before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null;
\r
232 SELECTION_CALLBACK_ARRAY.push( callback);
\r
233 if( before !== null && ( separateBefore === true || before.separateAfter === true)){
\r
234 ret.elm.style.borderTop = '1px solid #ccc';
\r
242 function createMenubarItem( title){
\r
243 var _item = MenuBarItemClass.apply( {}, [ title]);
\r
244 ITEM_ARRAY.push( _item);
\r
249 jqStage = jqEditor;
\r
250 jqBar = $( ELM_BAR).animate( { top: 0});
\r
252 var l = ITEM_ARRAY.length;
\r
253 for( var i=0; i<l; ++i){
\r
254 ITEM_ARRAY[ i].init();
\r
257 delete MENU_BAR_CONTROL.init;
\r
260 onMouseMove: function( _mouseX, _mouseY){
\r
261 if( barH >= _mouseY){
\r
264 var l = ITEM_ARRAY.length;
\r
265 for( var i=0; i<l; ++i){
\r
266 ITEM_ARRAY[ i].hide();
\r
270 onMouseUp: function( _mouseX, _mouseY){
\r
273 onMouseDown: function( _mouseX, _mouseY){
\r
274 var l = ITEM_ARRAY.length;
\r
275 if( barH < _mouseY || itemW * l < _mouseX) return false;
\r
276 for( var i=0; i<l; ++i){
\r
277 if( i * itemW <= _mouseX && _mouseX < ( i +1) * itemW){
\r
278 ITEM_ARRAY[ i].show();
\r
280 ITEM_ARRAY[ i].hide();
\r
285 busy: function( _busy){
\r
288 onWindowResize: function( _windowW, _windowH){
\r
291 QUIT: createMenubarItem( 'Quit'),
\r
292 EDIT: createMenubarItem( 'Edit'),
\r
293 WINDOW: createMenubarItem( 'Window'),
\r
294 HELP: pettanr.util.extend( createMenubarItem( 'Help'), {
\r
295 createAjaxSelection: function( callback){
\r
296 var elmLoading = document.createElement( 'li'),
\r
298 elmSelection = this.elm.getElementsByTagName( 'ul')[ 0];
\r
299 elmSelection.appendChild( elmLoading);
\r
300 elmLoading.className = 'loading';
\r
301 elmLoading.style.height = '90px';
\r
303 this.onShow = callback;
\r
306 delete this.createAjaxSelection;
\r
308 elmSelection.removeChild( elmLoading);
\r
309 $( elmSelection).children( 'li').click( that.onClick);
\r
310 elmLoading = elmSelection = null;
\r
311 delete that.onShow;
\r
320 /* ----------------------------------------
\r
323 var HISTORY = ( function() {
\r
324 var STACK_BACK = [],
\r
325 STACK_FORWARD = [],
\r
326 MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false),
\r
327 MENUBAR_FORWARD = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', forward, false, false, true),
\r
330 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, false, true, back); // ctrl + Z
\r
331 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, true, true, forward); // ctrl + shift + Z
\r
332 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 89, false, true, forward); // ctrl + Y
\r
336 * currentを控えてSTACK_FORWARD.push(current)
\r
337 * STACK_BACK.pop()を実行してcurrentに
\r
339 if( STACK_BACK.length === 0) return;
\r
341 var state = STACK_BACK.pop();
\r
342 state && state.fn( state.argBack);
\r
343 MENUBAR_BACK.visible( STACK_BACK.length !== 0);
\r
344 SAVE_CONTROL.panelUpdated( STACK_BACK.length !== 0);
\r
346 STACK_FORWARD.push( state);
\r
347 MENUBAR_FORWARD.visible( true);
\r
349 function forward(){
\r
350 if( STACK_FORWARD.length === 0) return;
\r
352 var state = STACK_FORWARD.pop();
\r
353 state.fn( state.argForword);
\r
354 MENUBAR_FORWARD.visible( STACK_FORWARD.length !== 0);
\r
356 STACK_BACK.push( state);
\r
357 MENUBAR_BACK.visible( true);
\r
358 SAVE_CONTROL.panelUpdated( true);
\r
362 log = $( '#history-log');
\r
363 delete HISTORY.init;
\r
365 saveState: function( _function, _argBack, _argForword, _destory) {
\r
369 argForword: _argForword,
\r
372 MENUBAR_BACK.visible( true);
\r
373 SAVE_CONTROL.panelUpdated( true);
\r
375 while( STACK_FORWARD.length > 0){
\r
376 var _stack = STACK_FORWARD.shift(),
\r
377 _destroy = _stack.destroy,
\r
379 _argBack = _stack.argBack;
\r
380 _argForword = _stack.argForword;
\r
382 if( typeof _argBack === 'array'){
\r
383 while( _argBack.length > 0){
\r
384 _value = _argBack.shift();
\r
385 _destroy === true && typeof _value.destroy === 'function' && _value.destroy();
\r
388 if( typeof _argForword === 'array'){
\r
389 while( _argForword.length > 0){
\r
390 _value = _argForword.shift();
\r
391 _destroy === true && typeof _value.destroy === 'function' && _value.destroy();
\r
395 MENUBAR_FORWARD.visible( false);
\r
401 /* ----------------------------------------
\r
405 var SAVE_CONTROL = ( function(){
\r
406 var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),
\r
407 SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),
\r
408 SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),
\r
409 SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),
\r
410 QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),
\r
416 function outputAsHtml(){
\r
417 alert( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));
\r
419 function outputAsJsonString(){
\r
420 alert( COMIC_ELEMENT_CONTROL.getAsJsonString());
\r
424 panelUpdated: function( _updated){
\r
425 if( _updated !== undefined && updated !== _updated){
\r
426 SAVE.visible( !!_updated);
\r
427 SAVE_AND_QUIT.visible( !!_updated);
\r
428 updated = !!_updated;
\r
438 /* ----------------------------------------
\r
439 * Text Editor (Overlay)
\r
442 var TEXT_EDITOR_CONTROL = ( function(){
\r
443 var jqWrap, jqTextarea, jqButton,
\r
444 textElement, onUpdateFunction;
\r
446 pettanr.key.addKeyDownEvent( this.ID, 69, false, false, clickOK);
\r
450 textElement = onUpdateFunction = null;
\r
452 function clickOK(){
\r
453 pettanr.overlay.hide();
\r
454 textElement && textElement.text( jqTextarea.val());
\r
455 onUpdateFunction && onUpdateFunction( textElement);
\r
460 this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();
\r
461 jqTextarea = $( '#speach-editor').keydown( function( e){
\r
462 if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){
\r
464 e.preventDefault();
\r
466 e.cancelBubble = true;
\r
467 e.returnValue = false;
\r
471 jqButton = $( '#speach-edit-complete-button').click( clickOK);
\r
472 delete TEXT_EDITOR_CONTROL.init;
\r
475 show: function( _textElement, _onUpdateFunction){
\r
476 textElement = _textElement;
\r
477 onUpdateFunction = _onUpdateFunction || null;
\r
478 pettanr.overlay.show( this);
\r
479 var h = _textElement.h;
\r
480 jqWrap.show().css( {
\r
481 left: _textElement.x +PANEL_CONTROL.x(),
\r
482 top: _textElement.y +PANEL_CONTROL.y(),
\r
483 width: _textElement.w,
\r
486 jqTextarea.val( _textElement.text()).focus();
\r
489 * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。
\r
491 pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){
\r
493 while( jqTextarea.height() < h){
\r
495 jqTextarea.attr( 'rows', rows);
\r
497 rows > 1 && jqTextarea.attr( 'rows', rows -1);
\r
500 onWindowResize: function(){
\r
501 textElement && this.show( textElement);
\r
508 /* ----------------------------------------
\r
509 * Image Group Exproler (Overlay)
\r
511 var IMAGE_GROUP_EXPROLER = ( function(){
\r
512 var ICON_ARRAY = [],
\r
514 containerW, containerH, wrapX,
\r
515 jqWrap, jqContainer, jqItemOrigin,
\r
517 jqName, jqButton, buttonW,
\r
520 onEnterInterval = null;
\r
522 var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/images/' : 'images/',
\r
523 THUMB_PATH = BASE_PATH, // + 'thumbnail/',
\r
524 LIMIT_FILESIZE = 1024 * 10; // 10KB
\r
528 "created_at": "2011-11-13T08:57:39Z",
\r
533 "updated_at": "2011-11-13T08:57:39Z",
\r
537 "created_at": "2011-11-13T08:57:54Z",
\r
542 "updated_at": "2011-11-13T08:57:54Z",
\r
546 "created_at": "2011-11-13T08:58:06Z",
\r
551 "updated_at": "2011-11-13T08:58:06Z",
\r
555 "created_at": "2011-11-13T08:58:23Z",
\r
560 "updated_at": "2011-11-13T08:58:23Z",
\r
564 "created_at": "2011-11-13T08:58:33Z",
\r
566 "filesize": 11061,
\r
569 "updated_at": "2011-11-13T08:58:33Z",
\r
573 "created_at": "2011-11-20T09:50:43Z",
\r
578 "updated_at": "2011-11-20T09:50:43Z",
\r
582 "created_at": "2011-11-20T09:50:55Z",
\r
587 "updated_at": "2011-11-20T09:50:55Z",
\r
591 "created_at": "2011-11-20T11:33:12Z",
\r
593 "filesize": 17919,
\r
596 "updated_at": "2011-11-20T11:33:12Z",
\r
600 "created_at": "2011-11-20T11:33:12Z",
\r
602 "filesize": 17919,
\r
605 "updated_at": "2011-11-20T11:33:12Z",
\r
609 "created_at": "2011-11-20T11:33:12Z",
\r
611 "filesize": 17919,
\r
614 "updated_at": "2011-11-20T11:33:12Z",
\r
618 "created_at": "2011-11-20T11:33:12Z",
\r
620 "filesize": 17919,
\r
623 "updated_at": "2011-11-20T11:33:12Z",
\r
627 "created_at": "2011-11-22T09:17:20Z",
\r
632 "updated_at": "2011-11-22T09:17:20Z",
\r
636 "created_at": "2011-11-22T10:11:07Z",
\r
641 "updated_at": "2011-11-22T10:11:07Z",
\r
645 "created_at": "2011-11-24T09:05:12Z",
\r
650 "updated_at": "2011-11-24T09:05:12Z",
\r
654 "created_at": "2011-11-26T04:52:12Z",
\r
659 "updated_at": "2011-11-26T04:52:12Z",
\r
663 "created_at": "2011-11-26T04:52:12Z",
\r
668 "updated_at": "2011-11-26T04:52:12Z",
\r
672 "created_at": "2011-11-26T04:52:12Z",
\r
677 "updated_at": "2011-11-26T04:52:12Z",
\r
681 "created_at": "2011-11-26T04:52:12Z",
\r
686 "updated_at": "2011-11-26T04:52:12Z",
\r
690 "created_at": "2011-11-26T04:52:12Z",
\r
695 "updated_at": "2011-11-26T04:52:12Z",
\r
701 var ImageGroupIconClass = function( INDEX, data){
\r
702 var JQ_ICON_WRAP = jqItemOrigin.clone( true),
\r
703 SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),
\r
704 LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,
\r
705 reversibleImage = null,
\r
706 onEnterFlag = false;
\r
707 JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');
\r
708 jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));
\r
711 onEnter: function(){
\r
712 if( onEnterFlag === true) return;
\r
713 reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, function( url, imgW, imgH){
\r
714 if( reversibleImage === null) {
\r
721 imgW = imgW || data.width || 64;
\r
722 imgH = imgH || data.height || 64;
\r
723 JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);
\r
724 var zoom = 128 /( imgW > imgH ? imgW : imgH),
\r
725 h = Math.floor( imgH *zoom),
\r
726 w = Math.floor( imgW *zoom);
\r
727 reversibleImage.elm.style.width = w +'px';
\r
728 reversibleImage.elm.style.height = h +'px';
\r
729 reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';
\r
730 reversibleImage.resize( w, h);
\r
731 JQ_ICON_WRAP.click( function( e){
\r
732 pettanr.overlay.hide();
\r
733 if (onUpdateFunction) {
\r
734 if( LOW_SRC === null){
\r
735 onUpdateFunction( SRC, imgW, imgH);
\r
737 ( function( onUpdate){
\r
738 pettanr.util.loadImage( SRC,
\r
739 function( _abspath, imgW, imgH){
\r
740 onUpdate( SRC, imgW, imgH);
\r
743 function( _abspath){
\r
744 onUpdate( SRC, data.width || 64, data.height || 64);
\r
748 })( onUpdateFunction); // close()で値が消えるので、クロージャに保持
\r
754 JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);
\r
755 onEnterFlag = true;
\r
757 destroy: function(){
\r
758 reversibleImage && reversibleImage.destroy();
\r
759 JQ_ICON_WRAP.remove();
\r
760 reversibleImage = JQ_ICON_WRAP = null;
\r
761 delete this.destroy;
\r
767 jqContainer.stop().animate( {
\r
769 top: Math.floor( windowH /2)
\r
773 while( ICON_ARRAY.length > 0){
\r
774 ICON_ARRAY.shift().destroy();
\r
776 onEnterInterval !== null && window.clearTimeout( onEnterInterval);
\r
777 onUpdateFunction = onEnterInterval = null;
\r
779 function onEnterShowImage(){
\r
780 var l = ICON_ARRAY.length,
\r
781 _start = -wrapX /itemW -1,
\r
782 _end = _start + winW /itemW +1;
\r
783 for( var i=0; i<l; ++i){
\r
784 _start < i && i < _end && ICON_ARRAY[ i].onEnter();
\r
786 onEnterInterval !== null && window.clearTimeout( onEnterInterval);
\r
787 onEnterInterval = null;
\r
789 function clickOK(){
\r
790 pettanr.overlay.hide();
\r
791 // onUpdateFunction && onUpdateFunction( textElement);
\r
796 this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();
\r
797 jqContainer = $( '#image-icon-container').mousewheel(
\r
798 function( e, delta){
\r
799 if( winW < containerW){
\r
800 wrapX += delta *WHEEL_DELTA;
\r
801 wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
\r
802 jqContainer.css( { left: wrapX});
\r
804 onEnterInterval !== null && window.clearTimeout( onEnterInterval);
\r
805 onEnterInterval = window.setTimeout( onEnterShowImage, 500);
\r
807 //e.stopPropagation();
\r
810 containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;
\r
811 jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());
\r
812 var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));
\r
813 itemW = itemSize.width;
\r
814 itemH = itemSize.height;
\r
815 jqName = $( '#gruop-name-display');
\r
816 jqButton = $( '#image-gruop-button').click( clickOK);
\r
817 buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;
\r
819 delete IMAGE_GROUP_EXPROLER.init;
\r
822 show: function( _onUpdateFunction){
\r
823 onUpdateFunction = _onUpdateFunction;
\r
824 pettanr.overlay.show( this);
\r
826 var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],
\r
827 l = CURRENT_GROUP_ARRAY.length;
\r
828 for( var i=0; i<l; ++i){
\r
829 ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));
\r
832 containerW = l * itemW;
\r
835 var w = winW > containerW ? winW : containerW,
\r
836 h = windowH > containerH ? containerH : windowH;
\r
843 top: Math.floor( windowH /2)
\r
844 }).stop().animate( {
\r
846 top: Math.floor( windowH /2 -h /2)
\r
850 left: Math.floor( winW /2 -buttonW /2),
\r
851 top: Math.floor( windowH /2 +containerH /2 +10)
\r
854 onEnterShowImage();
\r
856 onWindowResize: function( _windowW, _windowH){
\r
857 var w = _windowW > containerW ? _windowW : containerW,
\r
858 h = _windowH > containerH ? containerH : _windowH,
\r
859 offsetW = Math.floor( _windowW /2 -winW /2);
\r
861 if( offsetW <= 0){ // smaller
\r
867 top: Math.floor( _windowH /2 -h /2)
\r
870 jqContainer.css( { // bigger
\r
873 borderLeftWidth: offsetW
\r
875 top: Math.floor( _windowH /2 -h /2),
\r
880 left: Math.floor( _windowW /2 -buttonW /2),
\r
881 top: Math.floor( _windowH /2 +containerH /2 +10)
\r
883 onEnterShowImage();
\r
886 ID: 'imageGroupExproler'
\r
890 /* ----------------------------------------
\r
893 var WINDOWS_CONTROL = ( function(){
\r
895 * 表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。
\r
897 var DEFAULT_MIN_WINDOW_WIDTH = 200,
\r
898 DEFAULT_MIN_WINDOW_HEIGHT = 200,
\r
900 WINDOW_BODY_BODER_SIZE = 1,
\r
903 currentWindowIndex = -1,
\r
906 var jqWindowOrigin,
\r
908 var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){
\r
909 var MOUSE_CURSOR = updateMouseCursor,
\r
910 MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection(
\r
911 ( visible !== true ? 'show ' : 'hide ') +title,
\r
912 null, onMenuClick, true
\r
915 jqWrapper, jqHeader, jqFooter = null,
\r
916 elmBody, elmBodyStyle,
\r
917 startX, startY, startW, startH,
\r
919 headerH, bodyH, footerH = 0,
\r
920 isDragging = false,
\r
921 isResizing = false,
\r
922 bodyIsTachable = false,
\r
925 function onMenuClick(){
\r
926 visible === true ? instance.close() : instance.open();
\r
928 function update( _x, _y, _w, _h){
\r
929 _x = _x !== undefined ? _x : x;
\r
930 _y = _y !== undefined ? _y : y;
\r
931 _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;
\r
932 _w = _w !== undefined ? _w : w;
\r
933 _h = _h !== undefined ? _h : h;
\r
940 bodyH = _h -headerH -footerH;
\r
941 elmBodyStyle.height = bodyH +'px';
\r
942 ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, bodyH);
\r
948 function bodyBackOrForward( isBack){
\r
949 if( !instance) return;
\r
950 if( bodyIsTachable === !isBack) return;
\r
951 elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';
\r
952 elmBodyStyle.left = isBack === true ? 0 : x +'px';
\r
953 elmBodyStyle.top = isBack === true ? 0 : y +headerH +'px';
\r
954 elmBodyStyle.width = isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px';
\r
955 bodyIsTachable === isBack && isBack === true ? jqHeader.after( elmBody) : jqStage.append( elmBody);
\r
956 bodyIsTachable = !isBack;
\r
958 function onWindowResize( e){
\r
959 bodyBackOrForward( true);
\r
967 MOUSE_CURSOR( 'nw-resize');
\r
968 e.stopPropagation();
\r
972 init: function( jqContainer){
\r
974 * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う.
\r
978 jqWindowOrigin = jqWindowOrigin || ( function(){
\r
979 return $( $( '#windowTemplete').remove().html());
\r
981 closeButtonWidth = closeButtonWidth || ( function(){
\r
982 return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;
\r
985 jqStage = jqEditor;
\r
986 this.$ = jqWrapper = jqWindowOrigin.clone( true);
\r
987 jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);
\r
988 headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;
\r
989 elmBody = jqWrapper.children( '.window-body').get( 0);
\r
990 elmBodyStyle = elmBody.style;
\r
992 if( bodyTempleteID) {
\r
993 jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));
\r
995 jqWrapper.find( '.window-body-insert-position').remove();
\r
997 CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();
\r
999 this.onInit && this.onInit();
\r
1002 x: function(){ return x;},
\r
1003 y: function(){ return y;},
\r
1004 w: function(){ return w;},
\r
1005 h: function(){ return h;},
\r
1007 title: function( _title){
\r
1008 typeof _title === 'string' && jqHeader.html( _title);
\r
1009 title = typeof _title === 'string' ? _title : title;
\r
1013 firstOpen: function(){
\r
1014 if( RESIZE_BUTTON_ENABLED === true){
\r
1015 footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height;
\r
1016 //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);
\r
1018 jqWrapper.find( '.window-footer').remove();
\r
1020 update( x, y, w, h);
\r
1022 this.onFirstOpen && this.onFirstOpen();
\r
1024 delete this.firstOpen;
\r
1027 if( visible === true) return;
\r
1028 instance.visible = visible = true;
\r
1029 openWindow( instance);
\r
1030 MENUBAR_SELWCTION.title( 'hide ' +title);
\r
1032 for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){
\r
1033 if( WINDOW_ARRAY[ i] === instance){
\r
1034 WINDOW_ARRAY.splice( i, 1);
\r
1035 WINDOW_ARRAY.unshift( instance);
\r
1036 currentWindow = null;
\r
1037 currentWindowIndex = -1;
\r
1041 close: function(){
\r
1042 if( visible === false) return;
\r
1043 instance.visible = visible = false;
\r
1044 instance.onClose && setTimeout( instance.onClose, 0);
\r
1045 closeWindow( instance);
\r
1046 MENUBAR_SELWCTION.title( 'show ' +title);
\r
1048 bodyBackOrForward: bodyBackOrForward,
\r
1049 onMouseDown: function( _mouseX, _mouseY){
\r
1050 if( RESIZE_BUTTON_ENABLED === true && x +w -20 <= _mouseX && _mouseX < x +w && y +headerH +bodyH < _mouseY && _mouseY <= y +h){
\r
1051 bodyBackOrForward( true);
\r
1052 isResizing = true;
\r
1057 offsetX = _mouseX;
\r
1058 offsetY = _mouseY;
\r
1059 MOUSE_CURSOR( 'nw-resize');
\r
1063 if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;
\r
1064 if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){
\r
1069 isDragging = true;
\r
1070 MOUSE_CURSOR( 'move');
\r
1075 offsetX = _mouseX;
\r
1076 offsetY = _mouseY;
\r
1078 onMouseUp: function( _mouseX, _mouseY){
\r
1079 isDragging = isResizing = false;
\r
1080 MOUSE_CURSOR( '');
\r
1082 onMouseMove: function( _mouseX, _mouseY){
\r
1083 var _updateX = _mouseX -offsetX,
\r
1084 _updateY = _mouseY -offsetY;
\r
1086 if( isResizing === true){
\r
1087 var _w = startW +_updateX,
\r
1088 _h = startH +_updateY;
\r
1089 update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h);
\r
1092 if( isDragging === true) {
\r
1093 update( startX +_updateX, startY +_updateY);
\r
1096 if( x > _mouseX || x +w < _mouseX ) return;
\r
1098 ( y <= _mouseY && y +headerH >= _mouseY ) ?
\r
1099 MOUSE_CURSOR( 'pointer') : // hit to header
\r
1100 MOUSE_CURSOR( '');
\r
1101 bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY);
\r
1103 onMouseOut: function( _mouseX, _mouseY){
\r
1104 bodyIsTachable === true && bodyBackOrForward( true);
\r
1105 isDragging = false;
\r
1106 MOUSE_CURSOR( '');
\r
1109 return isDragging === true || isResizing === true;
\r
1111 bodyHeight: function(){
\r
1117 function getCurrentWindow( _mouseX, _mouseY){
\r
1118 if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;
\r
1119 var l = WINDOW_ARRAY.length,
\r
1120 _currentWindow = null,
\r
1122 currentWindowIndex = -1;
\r
1123 for( var i=0; i<l; i++){
\r
1124 _win = WINDOW_ARRAY[ i];
\r
1125 if( _win.visible !== true) continue;
\r
1128 if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){
\r
1129 _currentWindow = _win;
\r
1130 currentWindowIndex = i;
\r
1134 currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);
\r
1135 currentWindow = _currentWindow;
\r
1136 return currentWindowIndex;
\r
1138 function openWindow( _window){
\r
1139 if( _window.visible !== true) return;
\r
1140 var _jqWindow = _window.$;
\r
1141 jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない.
\r
1144 _window.firstOpen && _window.firstOpen();
\r
1145 _window.onOpen && setTimeout( _window.onOpen, 0);
\r
1150 function closeWindow( _window){
\r
1151 if( _window.visible !== false) return;
\r
1152 var l = WINDOW_ARRAY.length;
\r
1153 for( var i=0; i<l; ++i){
\r
1154 if( WINDOW_ARRAY[ i] === _window){
\r
1155 //WINDOW_ARRAY.splice( i, 1);
\r
1156 //WINDOW_ARRAY.push( _window);
\r
1157 _window.$.stop().fadeOut( function(){
\r
1158 this.parentNode.removeChild( this);
\r
1167 jqContainer = $( '#window-container');
\r
1169 var l = WINDOW_ARRAY.length,
\r
1171 for( var i=l-1; i >= 0; --i){
\r
1172 _window = WINDOW_ARRAY[ i];
\r
1173 _window.init && _window.init( jqContainer);
\r
1174 _window.visible === true && openWindow( _window);
\r
1176 log = $( '#window-log');
\r
1178 delete WINDOWS_CONTROL.init;
\r
1180 onMouseMove: function( _mouseX, _mouseY){
\r
1181 var _index = getCurrentWindow( _mouseX, _mouseY);
\r
1182 if( _index === 0){
\r
1183 currentWindow.onMouseMove( _mouseX, _mouseY);
\r
1186 if( _index !== -1){ // 先頭のクリックでない場合
\r
1188 WINDOW_ARRAY.splice( currentWindowIndex, 1);
\r
1189 WINDOW_ARRAY.unshift( currentWindow);
\r
1191 jqContainer.append( currentWindow.$);
\r
1192 currentWindowIndex = 0;
\r
1197 onMouseUp: function( _mouseX, _mouseY){
\r
1198 if( getCurrentWindow( _mouseX, _mouseY) === 0){
\r
1199 currentWindow.onMouseUp( _mouseX, _mouseY);
\r
1204 onMouseDown: function( _mouseX, _mouseY){
\r
1205 if( getCurrentWindow( _mouseX, _mouseY) === 0){
\r
1206 currentWindow.onMouseDown( _mouseX, _mouseY);
\r
1212 return currentWindow !== null;
\r
1214 onWindowResize: function( _windowW, _windowH){
\r
1219 createWindow: function( scope, EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){
\r
1220 opt_visible = opt_visible !== false;
\r
1221 opt_closeButtonEnabled = opt_closeButtonEnabled === true;
\r
1222 opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;
\r
1223 opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH;
\r
1224 opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;
\r
1226 var _window = pettanr.util.extend(
\r
1227 WindowClass.apply( scope, [ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH]),
\r
1230 WINDOW_ARRAY.unshift( _window);
\r
1231 WINDOWS_CONTROL.init === undefined && _window.init( jqContainer);
\r
1232 WINDOWS_CONTROL.init === undefined && openWindow( _window);
\r
1238 /* ----------------------------------------
\r
1241 var TOOL_BOX_WINDOW = ( function(){
\r
1242 var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,
\r
1245 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 73, false, true, addImage);
\r
1246 MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);
\r
1248 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 84, false, true, addText);
\r
1249 MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);
\r
1251 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 71, false, true, switchGrid);
\r
1252 MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);
\r
1254 function addImage( e){
\r
1255 setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0);
\r
1256 e && e.preventDefault();
\r
1259 function addText( e){
\r
1260 setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0);
\r
1261 e && e.preventDefault();
\r
1264 function switchGrid( e){
\r
1265 setTimeout( GRID_CONTROL.update, 0);
\r
1266 e && e.preventDefault();
\r
1269 function popupHelp( e){
\r
1270 instance.bodyBackOrForward( true);
\r
1271 setTimeout( HELP_DOCUMENTS_WINDOW.open, 0);
\r
1272 e && e.preventDefault();
\r
1275 function editBG( e){
\r
1276 instance.bodyBackOrForward( true);
\r
1277 setTimeout( INFOMATION_WINDOW.open, 0);
\r
1278 e && e.preventDefault();
\r
1282 return WINDOWS_CONTROL.createWindow(
\r
1285 onInit: function(){
\r
1287 delete this.onInit;
\r
1289 onFirstOpen: function(){
\r
1290 addImageButton = $( '#toolbox-add-image-button').click( addImage);
\r
1291 addTextButton = $( '#toolbox-add-text-button').click( addText);
\r
1292 editBgButton = $( '#toolbox-edit-bg-button').click( editBG);
\r
1293 switchGridButton = $( '#toolbox-switch-grid').click( switchGrid);
\r
1294 popupHelpButton = $( '#toolbox-popup-help-button').click( popupHelp);
\r
1296 postButton = $( '#toolbox-post-button');
\r
1298 delete this.onFirstOpen;
\r
1301 'toolbox-window', 'Tool box', 0, 215, 110, 290, true
\r
1306 /* ----------------------------------------
\r
1309 var IMAGE_EXPLORER_WINDOW = ( function(){
\r
1310 var instance, finder;
\r
1312 return WINDOWS_CONTROL.createWindow(
\r
1315 onInit: function(){
\r
1317 delete this.onInit;
\r
1319 onFirstOpen: function(){
\r
1320 finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE);
\r
1321 delete this.onFirstOpen;
\r
1323 onOpen: function(){
\r
1326 onResize: function( _w, _h){
\r
1327 finder.onWindowResize( _w, _h);
\r
1330 'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300
\r
1335 /* ----------------------------------------
\r
1336 * INFOMATION_WINDOW
\r
1338 var INFOMATION_WINDOW = ( function(){
\r
1339 var FADE_EFFECT_ENABLED = pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,
\r
1340 FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',
\r
1341 FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',
\r
1342 backgroundInfomationElm,
\r
1343 jqComicElementInformation,
\r
1344 elmValueX, elmValueY, elmValueZ, elmValueA, elmValueW, elmValueH, elmAspect,
\r
1345 elmPercentW, elmPercentH,
\r
1346 currentComicElement = null,
\r
1347 currentElementType = -1;
\r
1349 return WINDOWS_CONTROL.createWindow(
\r
1352 onFirstOpen: function(){
\r
1353 backgroundInfomationElm = $( '#panel-background-information');
\r
1355 jqComicElementInformation = $( '#comic-element-infomation').hide().css( {
\r
1356 height: this.bodyHeight()
\r
1358 var TAB_GROUP_ID = 'comic-element-attribute';
\r
1359 var CREATER = pettanr.key.createEditableText;
\r
1360 elmValueX = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID);
\r
1361 elmValueY = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID);
\r
1362 elmValueZ = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID);
\r
1363 elmValueA = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID);
\r
1364 elmValueW = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID);
\r
1365 elmValueH = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);
\r
1366 elmPercentW = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);
\r
1367 elmPercentH = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);
\r
1368 elmAspect = $( '#comic-element-keep-aspect');
\r
1369 delete this.onFirstOpen;
\r
1371 onResize: function( w, h){
\r
1372 jqComicElementInformation && jqComicElementInformation.css( {
\r
1376 update: function( _elementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){
\r
1377 if( !backgroundInfomationElm) return; // なぜか !backgroundInfomationElm が必要
\r
1378 if( currentElementType !== _elementType){
\r
1379 if( _elementType !== -1){
\r
1380 if( _elementType === 1){
\r
1382 elmPercentW.hide();
\r
1383 elmPercentH.hide();
\r
1387 elmPercentW.show();
\r
1388 elmPercentH.show();
\r
1391 currentElementType === -1 && jqComicElementInformation.stop().css( {
\r
1394 })[ FADE_IN_EFFECT]();
\r
1396 currentElementType !== -1 && jqComicElementInformation.stop().css({
\r
1399 })[ FADE_OUT_EFFECT]();
\r
1401 currentElementType = _elementType;
\r
1403 if( currentElementType !== -1){
\r
1404 elmValueX.update( x);
\r
1405 elmValueY.update( y);
\r
1406 elmValueZ.update( z);
\r
1407 _elementType === 1 && elmValueA.update( a);
\r
1408 elmValueW.update( w);
\r
1409 elmValueH.update( h);
\r
1410 _elementType === 0 && elmPercentW.update( wPercent);
\r
1411 _elementType === 0 && elmPercentH.update( hPercent);
\r
1417 'infomation-window', 'Infomation', 0, 30, 200, 180, true
\r
1421 /* ----------------------------------------
\r
1424 var HELP_DOCUMENTS_WINDOW = ( function(){
\r
1425 var visible = true,
\r
1426 hasAjaxContents = false,
\r
1430 HELP = MENU_BAR_CONTROL.HELP,
\r
1431 onLoadFunction = HELP.createAjaxSelection( onFirstOpen),
\r
1433 function jumpPage( _index){
\r
1436 function onFirstOpen( _pageIndex){
\r
1437 _pageIndex = _pageIndex || 0;
\r
1438 if( hasAjaxContents === false){
\r
1440 url: 'help/jp.xml',
\r
1442 success: function( _xml){
\r
1443 var jqXML = $( _xml),
\r
1444 helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),
\r
1445 elmNavi = document.createElement( 'div'),
\r
1446 elmItemOrigin = document.createElement( 'a'),
\r
1447 elmPages = document.createElement( 'div'),
\r
1448 elmPageOrigin = document.createElement( 'div'),
\r
1449 elmTitleOrigin = document.createElement( 'h2'),
\r
1452 elmNavi.className = 'sidenavi';
\r
1453 elmItemOrigin.className = 'sidenavi-item';
\r
1454 elmItemOrigin.href = '#';
\r
1455 elmPages.className = 'page-contents';
\r
1456 elmPageOrigin.className = 'page-content';
\r
1457 elmPageOrigin.appendChild( elmTitleOrigin);
\r
1459 // helpTitle && instance.title( helpTitle);
\r
1461 jqXML.find( 'page').each( function(){
\r
1462 var xmlPage = $( this),
\r
1463 title = xmlPage.attr( 'title'),
\r
1464 content = xmlPage.text();
\r
1466 elmItemOrigin.innerHTML = title;
\r
1467 elmNavi.appendChild( elmItemOrigin.cloneNode( true));
\r
1469 elmTitleOrigin.innerHTML = title;
\r
1470 elmPage = elmPageOrigin.cloneNode( true);
\r
1471 elmPage.innerHTML = content;
\r
1473 pettanr.util.cleanElement( elmPage);
\r
1475 if( elmPage.childNodes.length > 0){
\r
1476 elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]);
\r
1478 elmPage.appendChild( elmTitleOrigin.cloneNode( true));
\r
1480 elmPages.appendChild( elmPage);
\r
1482 HELP.createSelection( title, null, ( function( _pageIndex){
\r
1483 return function(){
\r
1484 HELP_DOCUMENTS_WINDOW.open();
\r
1485 onOpen( _pageIndex);
\r
1487 })( numPage), true);
\r
1491 onLoadFunction = null;
\r
1493 jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);
\r
1495 jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className)
\r
1496 .click( function( e){
\r
1498 parent = this.parentNode,
\r
1500 var children = parent.getElementsByTagName( 'a'),
\r
1501 l = children.length;
\r
1502 for( var i=0; i<l; ++i){
\r
1503 if( children[ i] === that) return i;
\r
1507 e.stopPropagation();
\r
1508 if( i === -1) return false;
\r
1509 jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
\r
1510 jqPages.hide().eq( i).show();
\r
1514 jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a')
\r
1515 .click( function( e){
\r
1518 var href = that.href,
\r
1519 i = href.split( '#jump'),
\r
1521 if( n && '' +parseFloat( n) === n){
\r
1522 return parseFloat( n)
\r
1526 e.stopPropagation();
\r
1527 if( i === -1) return false;
\r
1528 jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
\r
1529 jqPages.hide().eq( i).show();
\r
1533 jqNaviItems.eq( _pageIndex).addClass( 'current');
\r
1534 jqPages = jqAjaxContents.find( '.page-content');
\r
1535 jqPages.eq( _pageIndex).show();
\r
1538 hasAjaxContents = true;
\r
1540 function onOpen( _pageIndex){
\r
1541 _pageIndex = _pageIndex || 0;
\r
1542 jqNaviItems.removeClass( 'current').eq( _pageIndex).addClass( 'current');
\r
1543 jqPages.hide().eq( _pageIndex).show();
\r
1546 return WINDOWS_CONTROL.createWindow(
\r
1549 onInit: function(){
\r
1551 jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});
\r
1552 delete this.onInit;
\r
1554 onFirstOpen: onFirstOpen,
\r
1555 onResize: function( w, h){
\r
1556 jqAjaxContents && jqAjaxContents.css( { height: h});
\r
1558 setAjaxContent: function( html){
\r
1560 delete this.onLoadAjaxContent;
\r
1563 null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300
\r
1567 /* ----------------------------------------
\r
1570 var GRID_CONTROL = ( function(){
\r
1571 var ELM_GRID = document.getElementById( 'grid'),
\r
1577 jqGrid = $( ELM_GRID);
\r
1578 delete GRID_CONTROL.init;
\r
1580 onPanelResize: function( _panelX, _panelY){
\r
1581 ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( '');
\r
1582 ELM_GRID.style.height = windowH +'px';
\r
1584 enabled: function(){
\r
1587 update: function(){
\r
1591 }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();
\r
1593 visible = !visible;
\r
1595 if( visible === true && !ELM_GRID.style.backgroundImage){
\r
1596 ELM_GRID.style.backgroundImage = "url('grid.gif')";
\r
1604 * WHITE_GLASS_CONTROL
\r
1606 var WHITE_GLASS_CONTROL = ( function(){
\r
1607 var styleTop = document.getElementById( 'whiteGlass-top').style,
\r
1608 styleLeft = document.getElementById( 'whiteGlass-left').style,
\r
1609 styleRight = document.getElementById( 'whiteGlass-right').style,
\r
1610 styleBottom = document.getElementById( 'whiteGlass-bottom').style;
\r
1613 onPanelResize: function( _panelX, _panelY, _panelW, _panelH){
\r
1616 marginTop = _panelY,
\r
1617 marginBottom = windowH -_h -marginTop,
\r
1618 marginX = _panelX,
\r
1619 rightWidth = windowW -_w -marginX;
\r
1621 styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';
\r
1623 styleLeft.top = marginTop +'px';
\r
1624 styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';
\r
1625 styleLeft.height = ( _h + marginBottom) +'px';
\r
1627 styleRight.top = marginTop +'px';
\r
1628 styleRight.left = _w +marginX +'px';
\r
1629 styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';
\r
1630 styleRight.height = ( _h + marginBottom) +'px';
\r
1632 styleBottom.top = ( _h +marginTop) +'px';
\r
1633 styleBottom.left = marginX +'px';
\r
1634 styleBottom.width = _w +'px';
\r
1635 styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';
\r
1643 * panel-border の表示と onPanelResize の通知.
\r
1646 var PANEL_CONTROL = ( function(){
\r
1647 var ELM_PANEL = document.getElementById('panel-tools-container'),
\r
1648 ELM_PANEL_STYLE = ELM_PANEL.style,
\r
1649 DEFAULT_PANEL_WIDTH = 400,
\r
1650 DEFAULT_PANEL_HEIGHT = 300,
\r
1652 panelW, panelH, panelX, panelY,
\r
1653 offsetX, offsetY, startX, startY,
\r
1654 isDragging = false,
\r
1655 isDraggable = false;
\r
1657 function onSpaceUpdate(e){
\r
1658 if( e.type === 'keyup'){
\r
1659 currentListener === null && updateMouseCursor( '');
\r
1660 isDraggable = false;
\r
1662 currentListener === null && updateMouseCursor( 'move');
\r
1663 isDraggable = true;
\r
1668 init: function( _panelW, _panelH, _borderSize){
\r
1669 panelW = _panelW || DEFAULT_PANEL_WIDTH;
\r
1670 panelH = _panelH || DEFAULT_PANEL_HEIGHT;
\r
1671 panelX = Math.floor( ( windowW -panelW) /2);
\r
1672 panelY = Math.floor( ( windowH -panelH) /2);
\r
1673 borderSize = _borderSize !== undefined ? _borderSize : borderSize;
\r
1675 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);
\r
1677 setTimeout( PANEL_CONTROL.resize, 0);
\r
1679 delete PANEL_CONTROL.init;
\r
1687 resize: function( isResizerTopAction, _x, _y, _w, _h){
\r
1688 panelX = _x !== undefined ? _x : panelX;
\r
1689 panelY = _y !== undefined ? _y : panelY;
\r
1690 panelW = _w !== undefined ? _w : panelW;
\r
1691 panelH = _h !== undefined ? _h : panelH;
\r
1693 ELM_PANEL_STYLE.left = ( panelX -borderSize) +'px';
\r
1694 ELM_PANEL_STYLE.top = ( panelY -borderSize) +'px';
\r
1695 ELM_PANEL_STYLE.width = panelW +'px';
\r
1696 ELM_PANEL_STYLE.height = panelH +'px';
\r
1698 PANEL_RESIZER_TOP.onPanelResize( panelX, panelY, panelW, panelH);
\r
1699 PANEL_RESIZER_BOTTOM.onPanelResize( panelX, panelY, panelW, panelH);
\r
1700 GRID_CONTROL.onPanelResize( panelX, panelY);
\r
1701 WHITE_GLASS_CONTROL.onPanelResize( panelX, panelY, panelW, panelH);
\r
1702 COMIC_ELEMENT_CONTROL.onPanelResize( panelX, panelY, panelW, panelH, isResizerTopAction === true);
\r
1704 onWindowResize: function( _windowW, _windowH){
\r
1705 panelX = Math.floor(( _windowW - panelW) / 2);
\r
1706 panelY = Math.floor(( _windowH - panelH) / 2);
\r
1707 PANEL_CONTROL.resize();
\r
1709 onMouseMove: function( _mouseX, _mouseY){
\r
1710 if( isDraggable === true && isDragging === true){
\r
1711 PANEL_CONTROL.resize( false, startX +_mouseX -offsetX, startY +_mouseY -offsetY);
\r
1714 onMouseUp: function( _mouseX, _mouseY){
\r
1715 if( isDraggable === true){
\r
1716 isDragging = false;
\r
1717 updateMouseCursor( '');
\r
1720 onMouseDown: function( _mouseX, _mouseY){
\r
1721 if( isDraggable === true){
\r
1722 offsetX = _mouseX;
\r
1723 offsetY = _mouseY;
\r
1726 isDragging = true;
\r
1727 updateMouseCursor( 'move');
\r
1732 return isDragging === true;
\r
1738 * --------------------------------------------------------------------------------------------
\r
1741 var PanelResizerClass = function( ID, isTop){
\r
1742 var ELM = document.getElementById( ID),
\r
1744 RESIZER_HEIGHT = 30,
\r
1745 x = -BORDER_WIDTH /2,
\r
1746 y = isTop === true ? ( -5 -RESIZER_HEIGHT -BORDER_WIDTH) : 0,
\r
1748 h = RESIZER_HEIGHT,
\r
1749 panelX, panelY, panelW, panelH,
\r
1750 offsetY, startY, startH,
\r
1751 isDragging = false,
\r
1752 MOUSE_CURSOR = updateMouseCursor;
\r
1754 function restoreState( arg){
\r
1755 if( arg && arg.length > 3){
\r
1756 PANEL_CONTROL.resize( isTop, arg[ 0] || panelX, arg[ 1] || panelY, arg[ 2] || panelW, arg[ 3] || panelH);
\r
1762 return isDragging;
\r
1764 onMouseDown: function( _mouseX, _mouseY){
\r
1765 var _x = _mouseX -panelX,
\r
1766 _y = _mouseY -panelY;
\r
1767 if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
\r
1771 isDragging = true;
\r
1772 MOUSE_CURSOR( 'n-resize');
\r
1775 onMouseMove: function( _mouseX, _mouseY){
\r
1776 var _x = _mouseX -panelX,
\r
1777 _y = _mouseY -panelY;
\r
1778 if( isDragging !== true){
\r
1779 if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
\r
1780 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
1781 MOUSE_CURSOR( 'pointer');
\r
1784 var move = _y -offsetY;
\r
1785 if( isTop === true){
\r
1786 if( panelH - move < MIN_PANEL_HEIGHT){
\r
1787 move = panelH -MIN_PANEL_HEIGHT;
\r
1789 PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);
\r
1791 var _h = startH +move;
\r
1792 if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){
\r
1793 PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);
\r
1799 onMouseUp: function( _mouseX, _mouseY){
\r
1800 if( isDragging !== true) return;
\r
1801 ( startY !== panelY || startH !== panelH) && HISTORY.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);
\r
1802 isDragging = false;
\r
1803 MOUSE_CURSOR( '');
\r
1808 onPanelResize: function( _x, _y, _w, _h){
\r
1811 if( panelW !== _w){
\r
1812 ELM.style.width = ( _w +2) +'px';
\r
1816 y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);
\r
1821 var PANEL_RESIZER_TOP = PanelResizerClass.apply( {}, [ 'panel-resizer-top', true]),
\r
1822 PANEL_RESIZER_BOTTOM = PanelResizerClass.apply( {}, [ 'panel-resizer-bottom', false]);
\r
1824 PanelResizerClass = undefined;
\r
1827 var CONSOLE_CONTROLER = ( function(){
\r
1828 var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),
\r
1829 LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),
\r
1830 DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),
\r
1831 EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),
\r
1832 CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),
\r
1833 SAVE = HISTORY.saveState,
\r
1838 jqImgConsole, jqTextConsole,
\r
1839 currentElement = null,
\r
1842 imgConsoleWidth, imgConsoleHeight,
\r
1843 textConsoleWidth, textConsoleHeight,
\r
1844 consoleWidth, consoleHeight,
\r
1845 consoleX, consoleY,
\r
1847 buttonClickable = false;
\r
1849 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack);
\r
1850 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward);
\r
1852 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del);
\r
1853 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit);
\r
1854 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change);
\r
1856 function buttonBackOrForward( isBack){
\r
1857 var offest = jqConsoleWrapper.offset();
\r
1858 jqConsoleWrapper.css( {
\r
1859 position: isBack === true ? '' : 'absolute',
\r
1860 left: isBack === true ? consoleX : offest.left,
\r
1861 top: isBack === true ? consoleY : offest.top
\r
1863 buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);
\r
1864 buttonClickable = !isBack;
\r
1866 function layerBack(){
\r
1867 if( currentElement === null) return;
\r
1868 COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, false);
\r
1869 updateInfomation();
\r
1870 SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, true], [ currentElement, false]);
\r
1871 var _z = currentElement.z;
\r
1872 LAYER_BACK_BUTTON.visible( _z > 0);
\r
1873 LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
\r
1875 function layerForward(){
\r
1876 if( currentElement === null) return;
\r
1877 COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, true);
\r
1878 updateInfomation();
\r
1879 SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, false], [ currentElement, true]);
\r
1880 var _z = currentElement.z;
\r
1881 LAYER_BACK_BUTTON.visible( _z > 0);
\r
1882 LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
\r
1885 if( currentElement === null) return;
\r
1886 buttonBackOrForward( true);
\r
1887 COMIC_ELEMENT_CONTROL.removeComicElement( currentElement);
\r
1888 SAVE( COMIC_ELEMENT_CONTROL.restoreComicElement, [ true, currentElement], [ false, currentElement], true);
\r
1889 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
1892 if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;
\r
1893 TEXT_EDITOR_CONTROL.show( currentElement);
\r
1894 buttonBackOrForward( true);
\r
1896 function change(){
\r
1897 if( currentElement === null) return;
\r
1898 buttonBackOrForward( true);
\r
1899 IMAGE_GROUP_EXPROLER.show( currentElement.url);
\r
1903 jqStage = jqEditor;
\r
1904 jqConsoleTail = $( '#comic-element-consol-tail');
\r
1905 jqImgConsole = $( '#image-element-consol').hide();
\r
1906 var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0));
\r
1907 imgConsoleWidth = imgConsoleSize.width;
\r
1908 imgConsoleHeight = imgConsoleSize.height;
\r
1910 jqTextConsole = $( '#text-element-consol').hide();
\r
1911 var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0));
\r
1912 textConsoleWidth = textConsoleSize.width;
\r
1913 textConsoleHeight = textConsoleSize.height;
\r
1915 jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();
\r
1916 jqConsoleParent = jqConsoleWrapper.parent();
\r
1918 $( '#edit-text-button').click( edit);
\r
1919 $( '#delete-image-button, #delete-text-button').click( del);
\r
1920 $( '#change-image-button').click( change);
\r
1921 $( '#layer-forward-button, #forward-text-button').click( layerForward);
\r
1922 $( '#layer-back-button, #back-text-button').click( layerBack);
\r
1924 delete CONSOLE_CONTROLER.init;
\r
1926 show: function( _currentElement, _w, _h){
\r
1927 visible === false && jqConsoleWrapper.show();
\r
1929 currentElement = _currentElement;
\r
1930 var _currentType = _currentElement.type,
\r
1931 _z = _currentElement.z;
\r
1932 if( currentType !== _currentType){
\r
1933 currentType = _currentType;
\r
1934 jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);
\r
1935 jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);
\r
1936 consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
\r
1937 consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
\r
1939 consoleX = Math.floor( ( _w -consoleWidth) /2);
\r
1941 LAYER_BACK_BUTTON.visible( _z > 0);
\r
1942 LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
\r
1943 DELETE_BUTTON.visible( true);
\r
1944 EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);
\r
1945 CHANGE_BUTTON.visible( false);
\r
1947 if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){
\r
1948 consoleY = Math.floor( ( _h -consoleHeight) /2);
\r
1949 jqConsoleWrapper.css( {
\r
1952 }).removeClass( 'console-out');
\r
1954 consoleY = _h +tailSize;
\r
1955 jqConsoleWrapper.css( {
\r
1958 }).addClass( 'console-out');
\r
1961 hide: function (){
\r
1962 visible === true && jqConsoleWrapper.hide();
\r
1964 currentElement = null;
\r
1965 LAYER_BACK_BUTTON.visible( false);
\r
1966 LAYER_FORWARD_BUTTON.visible( false);
\r
1967 DELETE_BUTTON.visible( false);
\r
1968 EDIT_BUTTON.visible( false);
\r
1969 CHANGE_BUTTON.visible( false);
\r
1971 x: function(){ return consoleX;},
\r
1972 y: function(){ return consoleY;},
\r
1973 w: function(){ return consoleWidth;},
\r
1974 h: function(){ return consoleHeight;},
\r
1975 onMouseMove: function( _mouseX, _mouseY){
\r
1976 if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){
\r
1977 buttonClickable === true && buttonBackOrForward( true);
\r
1980 buttonClickable === false && buttonBackOrForward( false);
\r
1983 onMouseOut: function( _mouseX, _mouseY){
\r
1984 buttonClickable === true && buttonBackOrForward( true);
\r
1990 var TAIL_OPERATOR = ( function(){
\r
1991 var MOUSE_CURSOR = updateMouseCursor,
\r
1992 ELM_MOVER = document.getElementById( 'balloon-tail-mover'),
\r
1993 SIZE = pettanr.util.getElementSize( ELM_MOVER).width,
\r
1997 FLOOR = Math.floor,
\r
1998 DEG_TO_RAD = Math.PI / 180,
\r
1999 RAD_TO_DEG = 1 /DEG_TO_RAD,
\r
2000 currentText = null,
\r
2003 balloonW, balloonH, balloonA, radA,
\r
2008 update: function ( _w, _h, _a){
\r
2009 balloonW = _w !== undefined ? _w : balloonW;
\r
2010 balloonH = _h !== undefined ? _h : balloonH;
\r
2011 balloonA = _a !== undefined ? _a : balloonA;
\r
2012 radA = balloonA *DEG_TO_RAD;
\r
2013 tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);
\r
2014 tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);
\r
2015 ELM_MOVER.style.left = tailX +'px';
\r
2016 ELM_MOVER.style.top = tailY +'px';
\r
2017 //log.html( [ balloonW, balloonH, balloonA].join());
\r
2019 show: function( _currentText){
\r
2021 * visibilityのほうがいい, display:none だと ie で描画が狂う
\r
2023 ELM_MOVER.style.visibility = '';
\r
2024 this.update( _currentText.w, _currentText.h, _currentText.angle());
\r
2025 currentText = _currentText;
\r
2027 hitTest: function( _mouseX, _mouseY){
\r
2028 var _x = tailX -SIZE /2,
\r
2029 _y = tailY -SIZE /2;
\r
2030 ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;
\r
2031 ret === true && MOUSE_CURSOR( 'move');
\r
2035 ELM_MOVER.style.visibility = 'hidden';
\r
2036 currentText = null;
\r
2038 onStart: function( _currentText, _mouseX, _mouseY){
\r
2039 if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false;
\r
2040 x = _currentText.x;
\r
2041 y = _currentText.y;
\r
2042 if( this.hitTest( _mouseX -x, _mouseY -y) === true){
\r
2043 w = _currentText.w;
\r
2044 h = _currentText.h;
\r
2045 currentText = _currentText;
\r
2046 startA = _currentText.angle();
\r
2051 onDrag: function( _mouseX, _mouseY){
\r
2052 _mouseX = _mouseX -x -w /2;
\r
2053 _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換
\r
2055 this.update( w, h,
\r
2057 ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :
\r
2058 _mouseY > 0 ? 90 : -90
\r
2060 currentText && currentText.angle( balloonA);
\r
2061 COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( undefined, undefined, undefined, balloonA);
\r
2063 onFinish: function(){
\r
2064 startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);
\r
2065 startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle());
\r
2066 currentText = null;
\r
2068 onCancel: function(){
\r
2069 currentText.angle( startA);
\r
2070 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA);
\r
2071 currentText = null;
\r
2075 RESIZE_OPERATOR = ( function(){
\r
2076 var MOUSE_CURSOR = updateMouseCursor,
\r
2077 GRID_ENABLED = GRID_CONTROL.enabled;
\r
2079 var HIT_AREA = MOUSE_HIT_AREA,
\r
2080 POSITION_ARRAY = [],
\r
2081 FLOOR = Math.floor,
\r
2082 CURSOR_AND_FLIP = [
\r
2083 { cursor: 'n-resize', v: 3},
\r
2084 { cursor: 'e-resize', h: 2},
\r
2085 { cursor: 'e-resize', h: 1},
\r
2086 { cursor: 'n-resize', v: 0},
\r
2087 { cursor: 'nw-resize', h: 5, v: 6, vh: 7},
\r
2088 { cursor: 'ne-resize', h: 4, v: 7, vh: 6},
\r
2089 { cursor: 'ne-resize', h: 7, v: 4, vh: 5},
\r
2090 { cursor: 'nw-resize', h: 6, v: 5, vh: 4}
\r
2092 elmResizerContainer = document.getElementById( 'comic-element-resizer-container'),
\r
2093 elmResizerContainerStyle = elmResizerContainer.style,
\r
2094 elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,
\r
2095 elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,
\r
2096 elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,
\r
2097 elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,
\r
2099 currentIndex = -1,
\r
2101 currentIsTextElement = false;
\r
2103 elmResizerContainerStyle.display = 'none';
\r
2105 var RESIZE_WORK_ARRAY = [
\r
2106 { x: 0, w: 0, y: 1, h: -1}, //top
\r
2107 { x: 1, w: -1, y: 0, h: 0}, //left
\r
2108 { x: 0, w: 1, y: 0, h: 0}, //right
\r
2109 { x: 0, w: 0, y: 0, h: 1}, //bottom
\r
2110 { x: 1, w: -1, y: 1, h: -1}, //top-left
\r
2111 { x: 0, w: 1, y: 1, h: -1}, //top-right
\r
2112 { x: 1, w: -1, y: 0, h: 1}, //bottom-left
\r
2113 { x: 0, w: 1, y: 0, h: 1} //bottom-right
\r
2115 startX, startY, startW, startH, startFilpV, startFilpH, startAspect,
\r
2116 baseX, baseY, baseW, baseH,
\r
2117 currentX, currentY, currentW, currentH,
\r
2121 function draw( _x, _y, _w, _h){
\r
2122 x = _x !== undefined ? _x : x;
\r
2123 y = _y !== undefined ? _y : y;
\r
2124 w = _w !== undefined ? _w : w;
\r
2125 h = _h !== undefined ? _h : h;
\r
2126 elmResizerContainerStyle.left = x +'px';
\r
2127 elmResizerContainerStyle.top = y +'px';
\r
2128 elmResizerContainerStyle.width = w +'px';
\r
2129 elmResizerContainerStyle.height = h +'px';
\r
2130 elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';
\r
2131 elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';
\r
2132 elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';
\r
2133 elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';
\r
2135 POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);
\r
2136 POSITION_ARRAY.push(
\r
2137 {x: x +5, y: y -HIT_AREA, w: w -5 *2, h: HIT_AREA +5},
\r
2138 {x: x -HIT_AREA, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},
\r
2139 {x: x +w -5, y: y +HIT_AREA +5, w: HIT_AREA +5, h: h -5 *2},
\r
2140 {x: x +5, y: y +h -5, w: w -5 *2, h: HIT_AREA +5},
\r
2141 {x: x -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},
\r
2142 {x: x +w -HIT_AREA, y: y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},
\r
2143 {x: x -HIT_AREA, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5},
\r
2144 {x: x +w -5, y: y +h -5, w: HIT_AREA +5, h: HIT_AREA +5}
\r
2148 function update( _x, _y, _w, _h){
\r
2149 x = _x !== undefined ? _x : currentX;
\r
2150 y = _y !== undefined ? _y : currentY;
\r
2151 w = _w !== undefined ? _w : currentW;
\r
2152 h = _h !== undefined ? _h : currentH;
\r
2154 if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){
\r
2155 if( startAspect >= 1){
\r
2157 w = Math.floor( startAspect * h);
\r
2158 x = x +( currentIndex % 2 === 0 ? _w -w : 0);
\r
2161 h = Math.floor( w / startAspect);
\r
2162 y = y + ( currentIndex <= 5 ? _h -h : 0);
\r
2165 draw( x, y, w, h);
\r
2166 currentElement.resize( x, y, w, h);
\r
2167 currentIsTextElement === true && TAIL_OPERATOR.update( w, h);
\r
2168 CONSOLE_CONTROLER.show( currentElement, w, h);
\r
2169 COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y, undefined, undefined, w, h);
\r
2172 function flip( _flipV, _flipH){
\r
2173 var p = CURSOR_AND_FLIP[ currentIndex];
\r
2174 currentIndex = _flipH === true || _flipV === true ? p[
\r
2175 _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')
\r
2177 MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);
\r
2178 elmResizerContainer.className = 'current-resizer-is-' +currentIndex;
\r
2179 currentElement.flip( _flipV, _flipH);
\r
2183 index: function( _mouseX, _mouseY){
\r
2185 for( var i=4; i<8; i++){
\r
2186 p = POSITION_ARRAY[ i];
\r
2187 if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
\r
2188 MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);
\r
2189 elmResizerContainer.className = 'current-resizer-is-' +i;
\r
2190 return currentIndex = i;
\r
2193 for( var i=0; i<4; i++){
\r
2194 p = POSITION_ARRAY[ i];
\r
2195 if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
\r
2196 MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);
\r
2197 elmResizerContainer.className = 'current-resizer-is-' +i;
\r
2198 return currentIndex = i;
\r
2201 MOUSE_CURSOR( '');
\r
2202 elmResizerContainer.className = '';
\r
2205 show: function( _currentElement){
\r
2206 currentElement = _currentElement;
\r
2207 currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;
\r
2208 elmResizerContainerStyle.display = '';
\r
2211 currentElement = null;
\r
2212 elmResizerContainerStyle.display = 'none';
\r
2214 onStart: function( _currentElement, _mouseX, _mouseY){
\r
2215 currentElement = _currentElement;
\r
2216 currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;
\r
2217 if( _currentElement.keepSize === true) return false;
\r
2218 currentIndex = this.index( _mouseX, _mouseY);
\r
2219 if( currentIndex === -1) return false;
\r
2220 offsetX = _mouseX;
\r
2221 offsetY = _mouseY;
\r
2222 startX = baseX = _currentElement.x;
\r
2223 startY = baseY = _currentElement.y;
\r
2224 startW = baseW = _currentElement.w;
\r
2225 startH = baseH = _currentElement.h;
\r
2226 if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){
\r
2227 startFilpV = _currentElement.flipV();
\r
2228 startFilpH = _currentElement.flipH();
\r
2230 startAspect = startW /startH;
\r
2233 onDrag: function( _mouseX, _mouseY){
\r
2234 var com = RESIZE_WORK_ARRAY[ currentIndex],
\r
2235 moveX = _mouseX -offsetX,
\r
2236 moveY = _mouseY -offsetY,
\r
2244 * Opera 11+ often forget values, why ??
2246 while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){
\r
2247 com = RESIZE_WORK_ARRAY[ currentIndex];
\r
2248 moveX = _mouseX -offsetX;
\r
2249 moveY = _mouseY -offsetY;
\r
2250 _x = baseX +moveX *com.x;
\r
2251 _y = baseY +moveY *com.y;
\r
2252 _w = baseW +moveX *com.w;
\r
2253 _h = baseH +moveY *com.h;
\r
2254 _updated = moveX !== 0 || moveY !== 0;
\r
2256 if( _thisError > 9999){
\r
2258 //alert( 'opera error' +error);
\r
2264 if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){
\r
2267 if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){
\r
2269 _w = _w < MIN_OBJECT_SIZE ? MIN_OBJECT_SIZE : _w;
\r
2270 _h = _h < MIN_OBJECT_SIZE ? MIN_OBJECT_SIZE : _h;
\r
2274 if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){
\r
2277 if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){
\r
2279 if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_SIZE){
\r
2282 baseX = _x = _x +_w;
\r
2284 baseW = _w = _memoryX -_x;
\r
2286 flip( false, true);
\r
2287 flipV = currentElement.flipV();
\r
2289 if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){
\r
2293 baseY = _y = _y +_h;
\r
2295 baseH = _h = _memoryY -_y;
\r
2296 flip( true, false);
\r
2297 flipH = currentElement.flipH();
\r
2302 baseX = _x = _x +_w;
\r
2303 baseY = _y = _y +_h;
\r
2304 baseW = _w = _memoryX -_x;
\r
2305 baseH = _h = _memoryY -_y;
\r
2306 flip( true, true);
\r
2307 flipV = currentElement.flipV();
\r
2308 flipH = currentElement.flipH();
\r
2311 offsetX = _mouseX;
\r
2312 offsetY = _mouseY;
\r
2318 _updated === true && update( _x, _y, _w, _h);
\r
2321 'currentIndex:', currentIndex,
\r
2322 'baseW', baseW, 'baseH', baseH,'<br>',
\r
2323 'mouse', _mouseX, _mouseY,'<br>',
\r
2324 'move', moveX, moveY,'<br>',
\r
2325 'xy', _x, _y, 'wh',_w, _h,'<br>',
\r
2326 'com.w', com.w, 'com.h', com.h,'<br>',
\r
2327 'current',currentW, currentH,'<br>',
\r
2332 onFinish: function(){
\r
2333 MOUSE_CURSOR( '');
\r
2334 if( w === startW && h === startH && x === startX && y === startY) return;
\r
2335 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h);
\r
2336 currentElement.resize( x, y, w, h);
\r
2337 COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH);
\r
2339 onCancel: function(){
\r
2340 MOUSE_CURSOR( '');
\r
2341 COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);
\r
2342 currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?
\r
2343 currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
\r
2344 currentElement.animate( startX, startY, startW, startH, angle);
\r
2346 onShiftUpdate: update,
\r
2347 onCtrlUpdate: update
\r
2350 POSITION_OPERATOR = ( function(){
\r
2351 var MOUSE_CURSOR = updateMouseCursor,
\r
2352 GRID_ENABLED = GRID_CONTROL.enabled;
\r
2354 var currentElement,
\r
2360 function update( _x, _y){
\r
2361 x = _x !== undefined ? _x : x;
\r
2362 y = _y !== undefined ? _y : y;
\r
2363 RESIZE_OPERATOR.update( x, y);
\r
2364 currentElement.resize( x, y);
\r
2365 COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y);
\r
2369 onStart: function( _currentElement, _mouseX, _mouseY){
\r
2370 currentElement = _currentElement;
\r
2371 offsetX = _mouseX;
\r
2372 offsetY = _mouseY;
\r
2373 startX = x = _currentElement.x;
\r
2374 startY = y = _currentElement.y;
\r
2375 MOUSE_CURSOR( 'move');
\r
2377 onDrag: function( _mouseX, _mouseY){
\r
2378 var moveX = _mouseX -offsetX,
\r
2379 moveY = _mouseY -offsetY,
\r
2380 _x = startX +moveX,
\r
2381 _y = startY +moveY;
\r
2382 if( GRID_ENABLED() === true){
\r
2383 _x = Math.floor( _x / 10) * 10;
\r
2384 _y = Math.floor( _y / 10) * 10;
\r
2388 onFinish: function(){
\r
2389 MOUSE_CURSOR( '');
\r
2390 if( x === startX && y === startY) return;
\r
2391 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y);
\r
2392 currentElement.resize( x, y);
\r
2393 COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY);
\r
2395 onCancel: function(){
\r
2396 MOUSE_CURSOR( '');
\r
2397 COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY);
\r
2398 currentElement.animate( startX, startY);
\r
2400 onShiftUpdate: update,
\r
2401 onCtrlUpdate: update
\r
2407 * --------------------------------------------------------------------------------------------
\r
2408 * COMIC_ELEMENT_OPERATION_MANAGER
\r
2410 var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){
\r
2411 var MOUSE_CURSOR = updateMouseCursor,
\r
2412 SAVE = HISTORY.saveState,
\r
2413 GRID_ENABLED = GRID_CONTROL.enabled,
\r
2414 HIT_AREA = MOUSE_HIT_AREA,
\r
2415 currentIsTextElement = false,
\r
2416 currentOperator = null,
\r
2417 currentElement = null,
\r
2418 currentx, currenty, currentw, currenth, angle, flipV, flipH;
\r
2420 function resize( _x, _y, _w, _h, _angle){
\r
2421 currentx = _x !== undefined ? _x : currentx;
\r
2422 currenty = _y !== undefined ? _y : currenty;
\r
2423 currentw = _w !== undefined ? _w : currentw;
\r
2424 currenth = _h !== undefined ? _h : currenth;
\r
2425 angle = _angle !== undefined ? _angle : angle;
\r
2427 RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);
\r
2428 currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);
\r
2429 CONSOLE_CONTROLER.show( currentElement, currentw, currenth);
\r
2430 updateInfomation( currentx, currenty, currentElement.z, angle, currentw, currenth);
\r
2432 function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){
\r
2433 _w = _w !== undefined ? _w : currentw;
\r
2434 _h = _h !== undefined ? _h : currenth;
\r
2435 INFOMATION_WINDOW.update(
\r
2436 currentElement === null ? -1 : currentElement.type,
\r
2437 _x !== undefined ? _x : currentx,
\r
2438 _y !== undefined ? _y : currenty,
\r
2439 _z !== undefined ? _z : ( currentElement === null ? '*' : currentElement.z),
\r
2440 _a !== undefined ? Math.floor( _a) : ( currentIsTextElement === true ? Math.floor( angle) : '-'),
\r
2443 currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)),
\r
2444 currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)),
\r
2445 currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect
\r
2448 function show( _currentElement){
\r
2449 currentElement === null && RESIZE_OPERATOR.show( _currentElement);
\r
2450 if( currentElement !== _currentElement){
\r
2451 currentElement = _currentElement;
\r
2453 currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);
\r
2454 currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();
\r
2456 flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;
\r
2457 flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;
\r
2460 _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,
\r
2461 currentIsTextElement === true ? _currentElement.angle() : 0
\r
2466 currentElement !== null && RESIZE_OPERATOR.hide();
\r
2467 currentElement = null;
\r
2468 MOUSE_CURSOR( '');
\r
2469 TAIL_OPERATOR.hide();
\r
2470 CONSOLE_CONTROLER.hide();
\r
2471 updateInfomation();
\r
2473 function restoreState( arg){
\r
2474 if( arg && arg.length !== 8) return;
\r
2475 var _currentElement = arg[ 0],
\r
2476 _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],
\r
2478 _flipV = arg[ 6], _flipH = arg[ 7];
\r
2479 if( !_currentElement && !currentOperator) return;
\r
2480 _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?
\r
2481 _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :
\r
2482 _currentElement.animate( _x, _y, _w, _h, _a);
\r
2483 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
\r
2484 currentOperator = null;
\r
2485 currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);
\r
2487 function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){
\r
2488 startX = startX !== undefined ? startX : currentx;
\r
2489 startY = startY !== undefined ? startY : currenty;
\r
2490 startW = startW !== undefined ? startW : currentw;
\r
2491 startH = startH !== undefined ? startH : currenth;
\r
2492 startA = startA !== undefined ? startA : angle;
\r
2493 startFilpV = startFilpV !== undefined ? startFilpV : flipV;
\r
2494 startFilpH = startFilpH !== undefined ? startFilpH : flipH;
\r
2495 currentElement && SAVE( restoreState,
\r
2496 [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],
\r
2497 [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH]
\r
2500 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){
\r
2501 currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();
\r
2503 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function(){
\r
2504 currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();
\r
2506 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function(){
\r
2507 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
\r
2508 currentOperator = null;
\r
2513 delete COMIC_ELEMENT_OPERATION_MANAGER.init;
\r
2517 restoreState: restoreState,
\r
2518 updateInfomation: updateInfomation,
\r
2519 saveStatus: saveComicElementStatus,
\r
2521 return currentOperator !== null;
\r
2523 hitareaX: function( _comicElement, _x){
\r
2524 if( _comicElement === currentElement){
\r
2525 var _consoleX = CONSOLE_CONTROLER.x();
\r
2526 return currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;
\r
2528 return _x -HIT_AREA;
\r
2530 hitareaY: function( _comicElement, _y){
\r
2531 return _y -HIT_AREA;
\r
2533 hitareaW: function( _comicElement, _w){
\r
2534 if( _comicElement === currentElement){
\r
2535 var _consoleW = CONSOLE_CONTROLER.w();
\r
2536 return ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;
\r
2538 return _w +HIT_AREA *2;
\r
2540 hitareaH: function( _comicElement, _h){
\r
2541 if( _comicElement === currentElement){
\r
2542 var _consoleY = CONSOLE_CONTROLER.y();
\r
2543 return ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;
\r
2545 return _h +HIT_AREA *2;
\r
2547 onMouseDown: function( _currentElement, _mouseX, _mouseY){
\r
2548 //show( _currentElement);
\r
2549 if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
\r
2550 currentOperator = TAIL_OPERATOR;
\r
2552 if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
\r
2553 currentOperator = RESIZE_OPERATOR;
\r
2555 POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)
\r
2556 currentOperator = POSITION_OPERATOR;
\r
2559 onMouseMove: function( _currentElement, _mouseX, _mouseY){
\r
2560 show( _currentElement);
\r
2561 if( currentOperator !== null){
\r
2562 currentOperator.onDrag( _mouseX, _mouseY);
\r
2564 if( currentElement !== null){
\r
2565 CONSOLE_CONTROLER.onMouseMove( _mouseX -currentx, _mouseY -currenty);
\r
2566 if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentx, _mouseY -currenty) === false){
\r
2567 RESIZE_OPERATOR.index( _mouseX, _mouseY);
\r
2571 onMouseUp: function( _currentElement, _mouseX, _mouseY){
\r
2572 currentOperator !== null && currentOperator.onFinish();
\r
2573 currentOperator = null;
\r
2578 * // COMIC_ELEMENT_OPERATION_MANAGER
\r
2581 var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){
\r
2582 var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;
\r
2585 type: COMIC_ELM_TYPE,
\r
2592 hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);},
\r
2593 hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);},
\r
2594 hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);},
\r
2595 hitareaH: function(){ return OPERATOR.hitareaH( this, this.h);},
\r
2596 shift: function( _shiftX, _shiftY){
\r
2597 update( this.x +_shiftX, this.y +_shiftY);
\r
2600 return OPERATOR.busy();
\r
2602 onMouseMove: function( _mouseX, _mouseY){
\r
2603 OPERATOR.onMouseMove( this, _mouseX, _mouseY);
\r
2605 onMouseUp: function( _mouseX, _mouseY){
\r
2606 OPERATOR.onMouseUp( this, _mouseX, _mouseY);
\r
2608 onMouseDown: function( _mouseX, _mouseY){
\r
2609 OPERATOR.onMouseDown( this, _mouseX, _mouseY);
\r
2614 * --------------------------------------------------------------------------------------------
\r
2615 * ImageElementClass
\r
2617 var jqImageElementOrigin;
\r
2618 var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){
\r
2619 jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());
\r
2621 var JQ_WRAPPER = jqImageElementOrigin.clone( true),
\r
2622 OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,
\r
2623 SAVE = HISTORY.saveState,
\r
2624 HIT_AREA = MOUSE_HIT_AREA,
\r
2625 reversibleImage = null,
\r
2626 actualW = 0, actualH = 0,
\r
2627 flipH = w < 0 ? -1 : 1,
\r
2628 flipV = h < 0 ? -1 : 1,
\r
2630 w = Math.floor( w);
\r
2631 h = Math.floor( h);
\r
2633 function update( _x, _y, _w, _h, animate){
\r
2634 instance.x = x = _x !== undefined ? _x : x;
\r
2635 instance.y = y = _y !== undefined ? _y : y;
\r
2636 instance.w = w = _w !== undefined ? _w : w;
\r
2637 instance.h = h = _h !== undefined ? _h : h;
\r
2638 JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {
\r
2643 }, 250, function(){ reversibleImage.resize( flipH * w, flipV * h);});
\r
2644 animate !== true && reversibleImage.resize( flipH * w, flipV * h);
\r
2647 function updateUrl( _url){
\r
2648 if( url === _url) return;
\r
2649 url = _url || url;
\r
2650 var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){
\r
2651 actualW = _actualW;
\r
2652 actualH = _actualH;
\r
2654 if( reversibleImage !== null){
\r
2655 JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);
\r
2656 reversibleImage.destroy();
\r
2658 JQ_WRAPPER.append( _reversibleImage.elm);
\r
2660 reversibleImage = _reversibleImage;
\r
2662 return pettanr.util.extend(
\r
2663 AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing]),
\r
2671 flip: function( _flipH, _flipV){
\r
2672 if( _flipH !== true && _flipV !== true) return;
\r
2673 flipH = _flipH === true ? -flipH : flipH;
\r
2674 flipV = _flipV === true ? -flipV : flipV;
\r
2675 reversibleImage.resize( flipH * w, flipV * h);
\r
2677 flipV: function(){
\r
2680 flipH: function(){
\r
2683 url: function( _url, _actualW, _actualH){
\r
2684 if( _url && _url !== url){
\r
2685 SAVE( updateUrl, url, _url);
\r
2686 actualW = _actualW;
\r
2687 actualH = _actualH;
\r
2692 actualW: function(){ return actualW;},
\r
2693 actualH: function(){ return actualH;},
\r
2696 animate: function ( _x, _y, _w, _h, _flipH, _flipV){
\r
2697 flipH = _flipH !== undefined ? _flipH : flipH;
\r
2698 flipV = _flipV !== undefined ? _flipV : flipV;
\r
2699 update( _x, _y, _w, _h, true);
\r
2701 getAsHTML: function( isAbsoluteUrl, isXHTML){
\r
2704 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',
\r
2705 'width="', w, '" ',
\r
2706 'height="', h, '" ',
\r
2708 'left:', x, 'px;',
\r
2710 'z-index:', this.z, ';',
\r
2712 isXHTML !== true ? '>' : ' \/>'
\r
2715 getAsJsonString: function(){
\r
2716 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
2718 '"new', this.timing, '": {', cr,
\r
2719 '"resource_picture_id": 1,', cr,
\r
2720 '"x": ', x, ',', cr,
\r
2721 '"y": ', y, ',', cr,
\r
2722 '"z": ', this.z, ',', cr,
\r
2723 '"width": ', w, ',', cr,
\r
2724 '"height": ', h, ',', cr,
\r
2725 '"flipv": ', flipV === true ? 1 : 0, ',', cr,
\r
2726 '"fliph": ', flipH === true ? 1 : 0, ',', cr,
\r
2727 '"t": ', this.timing, cr,
\r
2731 destroy: function(){
\r
2732 reversibleImage.destroy();
\r
2733 JQ_WRAPPER.remove();
\r
2734 JQ_WRAPPER = reversibleImage = OPERATOR = null;
\r
2735 delete this.destroy;
\r
2741 * / ImageElementClass
\r
2742 * --------------------------------------------------------------------------------------------
\r
2747 * --------------------------------------------------------------------------------------------
\r
2748 * TextElementClass
\r
2750 * ELM はpettanr.domで書き出したものを突っ込むcreateの場合
\r
2754 * 1.speach balloon
\r
2757 * 4.black-box( dq style)
\r
2758 * 5.blue-box( ff style)
\r
2761 var jqTextElementOrigin;
\r
2762 var TextElementClass = function( type, a, text, x, y, z, w, h, timing){
\r
2763 jqTextElementOrigin = jqTextElementOrigin || ( function(){
\r
2764 var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),
\r
2765 _MODERN = $( $( '#textElementTemplete').remove().html());
\r
2766 return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;
\r
2769 var JQ_WRAPPER = jqTextElementOrigin.clone( true),
\r
2770 XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),
\r
2771 TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),
\r
2772 OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,
\r
2773 HIT_AREA = MOUSE_HIT_AREA,
\r
2774 SAVE = HISTORY.saveState,
\r
2777 JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);
\r
2779 function update( _x, _y, _w, _h, _a, animate){
\r
2780 instance.x = x = _x !== undefined ? _x : x;
\r
2781 instance.y = y = _y !== undefined ? _y : y;
\r
2782 instance.w = w = _w !== undefined ? _w : w;
\r
2783 instance.h = h = _h !== undefined ? _h : h;
\r
2784 a = _a !== undefined ? _a : a;
\r
2786 JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {
\r
2793 XBROWSER_BALLOON.resize( a, w, h);
\r
2796 animate !== true && XBROWSER_BALLOON.resize( a, w, h);
\r
2799 function updateType( _type){
\r
2800 if( type !== _type){
\r
2801 type = _type || type;
\r
2802 XBROWSER_BALLOON.type( type);
\r
2805 function updateAngle( _a){
\r
2806 if( _a !== undefined && a !== _a){
\r
2807 a = _a !== undefined ? _a : a;
\r
2808 XBROWSER_BALLOON.angle( a);
\r
2811 function updateText( _text){
\r
2812 text = _text || text || '';
\r
2813 TEXT_ELM.html( text);
\r
2816 return pettanr.util.extend(
\r
2817 AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing]),
\r
2825 angle: function( _a){
\r
2826 _a !== undefined && update( undefined, undefined, undefined, undefined, _a);
\r
2829 text: function( _text){
\r
2830 if( _text && text !== _text) {
\r
2831 SAVE( updateText, text || '', _text);
\r
2832 updateText( _text);
\r
2837 animate: function ( _x, _y, _w, _h, _a){
\r
2838 update( _x, _y, _w, _h, _a, true);
\r
2840 destroy: function(){
\r
2841 JQ_WRAPPER.remove();
\r
2842 XBROWSER_BALLOON.destroy();
\r
2844 delete this.destroy;
\r
2846 getAsJSON: function(){
\r
2849 getAsJsonString: function(){
\r
2850 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
2852 '"new', this.timing, '": {', cr,
\r
2853 '"balloon_template_id": ', 1, ',', cr,
\r
2854 '"system_picture_id": ', 1, ',', cr,
\r
2855 '"size": ', 1, ',', cr,
\r
2856 '"tail": ', a, ',', cr,
\r
2857 '"x": ', x, ',', cr,
\r
2858 '"y": ', y, ',', cr,
\r
2859 '"z": ', this.z, ',', cr,
\r
2860 '"t": ', this.timing, ',', cr,
\r
2861 '"width": ', w, ',', cr,
\r
2862 '"height": ', h, ',', cr,
\r
2863 '"speaches_attributes": {', cr,
\r
2864 '"newf', this.timing, '": {', cr,
\r
2865 '"content": "', text, '",', cr,
\r
2866 '"x": ', x, ',', cr,
\r
2867 '"y": ', y, ',', cr,
\r
2868 '"t": ', 0, ',', cr,
\r
2869 '"width": ', w, ',', cr,
\r
2870 '"height": ', h, cr,
\r
2876 getAsHTML: function( isAbsoluteUrl, isXHTML){
\r
2877 var url = XBROWSER_BALLOON.getURL();
\r
2880 'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',
\r
2881 'width="', w, '" ',
\r
2882 'height="', h, '" ',
\r
2884 'left:', x, 'px;',
\r
2886 'z-index:', this.z, ';',
\r
2888 isXHTML !== true ? '>' : ' \/>',
\r
2889 pettanr.LINE_FEED_CODE_TEXTAREA,
\r
2890 '<div class="balloon" style="',
\r
2891 'left:', x, 'px;',
\r
2893 'width:', w, 'px;',
\r
2894 'height:', h, 'px;',
\r
2895 'z-index:', this.z,
\r
2896 '"><span>', text, '<\/span>', '<\/div>'
\r
2900 getAsXML: function(){}
\r
2907 var COMIC_ELEMENT_CONTROL = ( function(){
\r
2908 var SAVE = HISTORY.saveState,
\r
2909 ELM_CONTAINER = document.getElementById( 'comic-element-container'),
\r
2910 currentElement = null,
\r
2911 panelX, panelY, panelW, panelH,
\r
2915 * append, remove, replace
\r
2917 * comicElement には、z-position と dom-index がある。
\r
2918 * z-position は 表示上の位置。大きいほど前に表示される( z-index)
\r
2919 * dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。
\r
2921 * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。
\r
2922 * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。
\r
2924 * append comicElement
\r
2925 * 1. 新しい comicElement の z-position を得る
\r
2926 * 2. z の同じ comicElementを見つけ、その前に加える。または一番先頭へ。(COMIC_ELEMENT_ARRAY)
\r
2927 * zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。
\r
2928 * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。
\r
2931 * remove comicElement
\r
2935 function appendComicElement( _comicElement) {
\r
2936 _comicElement.init && _comicElement.init();
\r
2937 var z = _comicElement.z,
\r
2938 l = COMIC_ELEMENT_ARRAY.length,
\r
2939 _jqElm = _comicElement.$.stop().css( {
\r
2943 if( typeof z !== 'number' || z < 0 || z >= l){
\r
2944 COMIC_ELEMENT_ARRAY.unshift( _comicElement);
\r
2945 ELM_CONTAINER.appendChild( _jqElm.get( 0));
\r
2948 var insertIndex = 0;
\r
2949 for( var i = 0; i < l; ++i){
\r
2950 if( COMIC_ELEMENT_ARRAY[ i].z <= z){
\r
2955 COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());
\r
2956 COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);
\r
2958 numberingComicElement();
\r
2960 function removeComicElement( _comicElement) {
\r
2961 var l = COMIC_ELEMENT_ARRAY.length;
\r
2962 for( var i=0; i<l; ++i){
\r
2963 if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){
\r
2964 COMIC_ELEMENT_ARRAY.splice( i, 1);
\r
2965 numberingComicElement();
\r
2966 _comicElement.$.stop().css( {
\r
2969 }).fadeOut( onFadeOut);
\r
2970 currentElement = currentElement === _comicElement ? null : currentElement;
\r
2974 function onFadeOut(){
\r
2975 this.parentNode.removeChild( this);
\r
2978 function restoreComicElement( arg){
\r
2979 var isAppend = arg[ 0],
\r
2980 comicElement = arg[ 1];
\r
2981 isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);
\r
2984 * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算
\r
2987 function numberingComicElement(){
\r
2988 var l = COMIC_ELEMENT_ARRAY.length,
\r
2989 _comicElement, jqElm, jqNext;
\r
2990 for( var i=0; i < l; ++i){
\r
2991 _comicElement = COMIC_ELEMENT_ARRAY[ i];
\r
2992 jqElm = _comicElement.$;
\r
2993 jqNext && jqNext.before( jqElm);
\r
2994 _comicElement.z = l -i -1;
\r
2998 function replaceComicElement( _comicElement, goForward){
\r
2999 // COMIC_ELEMENT_ARRAYの再構築
\r
3000 var l = COMIC_ELEMENT_ARRAY.length,
\r
3002 for( var ret = 0; ret < l; ++ret){
\r
3003 if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement) return ret;
\r
3007 if( i === -1) return;
\r
3008 if( goForward === true){
\r
3009 if( i === 0) return;
\r
3010 COMIC_ELEMENT_ARRAY.splice( i, 1);
\r
3011 COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);
\r
3013 if( i === l -1) return;
\r
3014 COMIC_ELEMENT_ARRAY.splice( i, 1);
\r
3015 COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);
\r
3017 numberingComicElement();
\r
3019 function restoreReplaceObject( arg){
\r
3020 replaceComicElement( arg[ 0], arg[ 1]);
\r
3024 init: function( _x, _y, _w, _h){
\r
3026 appendComicElement( ImageElementClass.apply( {}, [ 'images/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));
\r
3027 appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));
\r
3031 log = $( '#operation-catcher-log');
\r
3033 delete COMIC_ELEMENT_CONTROL.init;
\r
3035 removeComicElement: removeComicElement,
\r
3036 restoreComicElement: restoreComicElement,
\r
3037 replaceComicElement: replaceComicElement,
\r
3038 restoreReplaceObject: restoreReplaceObject,
\r
3039 onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){
\r
3041 * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。
\r
3043 if( isResizerTopAction === true){
\r
3044 var _shiftX = _panelW -panelW,
\r
3045 _shiftY = _panelH -panelH,
\r
3046 l = COMIC_ELEMENT_ARRAY.length;
\r
3047 for( var i = 0; i < l; i++){
\r
3048 COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);
\r
3056 ELM_CONTAINER.style.width = _panelW +'px';
\r
3057 ELM_CONTAINER.style.height = _panelH +'px';
\r
3058 ELM_CONTAINER.style.left = _panelX +'px';
\r
3059 ELM_CONTAINER.style.top = _panelY +'px';
\r
3061 onMouseMove: function( _mouseX, _mouseY){
\r
3062 var l = COMIC_ELEMENT_ARRAY.length,
\r
3063 _X = _mouseX -panelX,
\r
3064 _Y = _mouseY -panelY,
\r
3067 if( currentElement !== null){
\r
3068 if( currentElement.busy() === true){
\r
3069 currentElement.onMouseMove( _X, _Y);
\r
3072 _x = currentElement.hitareaX();
\r
3073 _y = currentElement.hitareaY();
\r
3074 if( _x <= _X && _y <= _Y && _x + currentElement.hitareaW() >= _X && _y +currentElement.hitareaH() >= _Y){
\r
3075 currentElement.onMouseMove( _X, _Y); // cursor
\r
3079 for( var i=0; i<l; i++){
\r
3080 _elm = COMIC_ELEMENT_ARRAY[ i];
\r
3081 _x = _elm.hitareaX();
\r
3082 _y = _elm.hitareaY();
\r
3084 if( _x <= _X && _y <= _Y && _x + _elm.hitareaW() >= _X && _y +_elm.hitareaH() >= _Y){
\r
3085 currentElement = _elm;
\r
3086 currentElement.onMouseMove( _X, _Y); // cursor
\r
3087 log.html( [ _X, _Y, _x, _y, i].join( ','));
\r
3091 currentElement = null;
\r
3092 COMIC_ELEMENT_OPERATION_MANAGER.hide();
\r
3093 log.html( [ _X, _Y, _x, _y].join( ','));
\r
3096 onMouseUp: function( _mouseX, _mouseY){
\r
3097 var ret = currentElement !== null && currentElement.busy() === true;
\r
3098 ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);
\r
3099 startX = startY = NaN;
\r
3102 onMouseDown: function( _mouseX, _mouseY){
\r
3105 currentElement !== null && currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);
\r
3106 return currentElement !== null;
\r
3109 return currentElement !== null;
\r
3111 createImageElement: function( url, imagesetID, x, y, z, w, h){
\r
3112 w = w || 200; //ActualWidth
\r
3113 h = h || 150; //ActualHeight
\r
3114 x = x || Math.floor( panelW /2 -w /2);
\r
3115 y = y || Math.floor( panelH /2 -h /2);
\r
3116 IMAGE_GROUP_EXPROLER.show( function( _url, _w, _h){
\r
3117 var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);
\r
3118 appendComicElement( _comicElement);
\r
3119 _comicElement.animate( undefined, undefined, _w, _h);
\r
3120 SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);
\r
3123 createTextElement: function( type, angle, text, x, y, z, w, h){
\r
3125 angle = angle || 0;
\r
3126 text = text || '';
\r
3129 x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);
\r
3130 y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);
\r
3131 var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);
\r
3132 TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){
\r
3133 appendComicElement( _comicElement);
\r
3134 SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);
\r
3137 getAsHTML: function( isAbsoluteUrl, isXHTML){
\r
3138 var HTML_ARRAY = [],
\r
3139 l = COMIC_ELEMENT_ARRAY.length,
\r
3143 while( HTML_ARRAY.length < l){
\r
3144 _comicElement = getComicElementByTiming();
\r
3145 if( _comicElement === null) break;
\r
3146 HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));
\r
3148 function getComicElementByTiming(){
\r
3149 while( _timing < l *2){
\r
3150 for(var i=0; i<l; ++i){
\r
3151 if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){
\r
3153 return COMIC_ELEMENT_ARRAY[ i];
\r
3160 HTML_ARRAY.unshift(
\r
3162 '<div class="panel" ',
\r
3164 'height:', panelH, 'px;',
\r
3165 'background-color:', ';',
\r
3170 HTML_ARRAY.push( '</div>');
\r
3172 return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);
\r
3174 getAsJsonString: function(){
\r
3175 var JSON_STRING_ARRAY = [],
\r
3177 BALLOON_ARRAY = [],
\r
3178 l = COMIC_ELEMENT_ARRAY.length,
\r
3181 cr = pettanr.LINE_FEED_CODE_TEXTAREA;
\r
3183 while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){
\r
3184 _comicElement = getComicElementByTiming();
\r
3185 if( _comicElement === null) break;
\r
3186 _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ?
\r
3187 IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :
\r
3188 BALLOON_ARRAY.push( _comicElement.getAsJsonString());
\r
3190 function getComicElementByTiming(){
\r
3191 while( _timing < l *2){
\r
3192 for(var i=0; i<l; ++i){
\r
3193 if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){
\r
3195 return COMIC_ELEMENT_ARRAY[ i];
\r
3205 '"border": 1,', cr,
\r
3206 '"comic_id": 5,', cr,
\r
3207 '"resource_picture_id": 1,', cr,
\r
3208 '"x": ', 0, ',', cr,
\r
3209 '"y": ', 0, ',', cr,
\r
3210 '"z": ', 0, ',', cr,
\r
3211 '"t": ', 0, ',', cr,
\r
3212 '"width": ', panelW, ',', cr,
\r
3213 '"height": ', panelH, ',', cr,
\r
3214 '"panel_pictures_attributes": {', cr,
\r
3215 IMAGE_ARRAY.join( ',' +cr), cr,
\r
3217 '"balloons_attributes": {', cr,
\r
3218 BALLOON_ARRAY.join( ',' +cr), cr,
\r
3228 * end of COMIC_ELEMENT_CONTROL
\r
3233 function updateMouseCursor( _cursor){
\r
3234 if( currentCursor !== _cursor){
\r
3235 currentCursor = _cursor;
\r
3236 setTimeout( update, 0);
\r
3238 function update(){
\r
3239 ELM_MOUSE_EVENT_CHATCHER.style.cursor = currentCursor;
\r
3242 function centering(){
\r
3243 pettanr.editor.onWindowResize( windowW, windowH);
\r
3245 function mouseEventRellay( e){
\r
3246 var _mouseX = e.pageX,
\r
3247 _mouseY = e.pageY,
\r
3248 rellayMethod = e.type === 'mousedown' ?
\r
3250 ( e.type === 'mousemove' ? 'onMouseMove' : 'onMouseUp');
\r
3251 if( currentListener !== null && currentListener.busy() === true){
\r
3252 currentListener[ rellayMethod]( _mouseX, _mouseY);
\r
3254 currentListener = null;
\r
3255 var l = MOUSE_LISTENER_ARRAY.length,
\r
3257 for( var i=0; i<l; ++i){
\r
3258 _listener = MOUSE_LISTENER_ARRAY[ i];
\r
3259 if( _listener[ rellayMethod]( _mouseX, _mouseY) === true){
\r
3260 currentListener = _listener;
\r
3266 //!document.selection && window.getSelection().removeAllRanges();
\r
3267 e.stopPropagation();
\r
3272 init: function( _option){
\r
3275 firstOpen: function(){
\r
3276 var jqWindow = pettanr.jqWindow();
\r
3277 windowW = jqWindow.width();
\r
3278 windowH = jqWindow.height();
\r
3280 jqEditor = $( '#editor');
\r
3283 * MOUSE_LISTENER_ARRAY は、表示順に格納.手前の要素が最初
\r
3284 * MENU_BAR_CONTROL,
\r
3286 * COMIC_ELEMENT_CONTROL,
\r
3288 * .busy() === true なら、そのままonMouseMove()にイベントを流す.これはArrayの後ろから、奥の表示要素から
\r
3289 * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す.
\r
3291 MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);
\r
3295 WINDOWS_CONTROL.init();
\r
3297 GRID_CONTROL.init();
\r
3298 PANEL_CONTROL.init();
\r
3299 CONSOLE_CONTROLER.init();
\r
3300 COMIC_ELEMENT_OPERATION_MANAGER.init();
\r
3301 COMIC_ELEMENT_CONTROL.init();
\r
3304 MENU_BAR_CONTROL.init();
\r
3306 TEXT_EDITOR_CONTROL.init();
\r
3307 IMAGE_GROUP_EXPROLER.init();
\r
3312 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering); // ctrl + 0
\r
3313 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering); // ctrl + 0
\r
3314 MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);
\r
3316 * jqMouseEventChacher は透明な要素で、
\r
3317 * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事
\r
3318 * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。
\r
3320 jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)
\r
3321 .mousemove( mouseEventRellay)
\r
3322 .mousedown( mouseEventRellay)
\r
3323 .mouseup( mouseEventRellay)
\r
3324 .mouseout( mouseEventRellay);
\r
3326 delete pettanr.editor.firstOpen;
\r
3328 onOpen: function( _option){
\r
3329 pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();
\r
3331 // HISTORY.onOpen();
\r
3332 // WINDOWS_CONTROL.onOpen();
\r
3333 // COMIC_ELEMENT_CONTROL.onOpen();
\r
3334 // MENU_BAR_CONTROL.onOpen();
\r
3335 // TEXT_EDITOR_CONTROL.onOpen();
\r
3336 // IMAGE_GROUP_EXPROLER.onOpen();
\r
3338 onClose: function(){
\r
3340 onWindowResize: function( _windowW, _windowH){
\r
3341 windowW = _windowW;
\r
3342 windowH = _windowH;
\r
3347 jqEditor.get( 0).style.height = _windowH +'px';
\r
3348 ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';
\r
3350 WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);
\r
3351 MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);
\r
3352 PANEL_CONTROL.onWindowResize( _windowW, _windowH);
\r