11 ( function( pettanr, gOS, window, document, undefined ){
13 * PettanR service driver.
15 var MyAuthorID = 'current_author' in window ? current_author.id : ( pettanr.CONST.SERVER_SUPPORT === false ? 1 : -1 ),
16 MyArtistID = 'current_artist' in window ? current_artist.id : ( pettanr.CONST.SERVER_SUPPORT === false ? 1 : -1 ),
18 FileAPI = gOS.registerDriver( function(){
19 var self = Driver = this;
21 function onLoadJson( _file, _json ){
22 var _access = FileAPI.getFileDataAccess( _file ),
23 _data = _access !== null ? _access.DATA : null;
28 _data.state = Const.FILE.STATE.OK;
30 if( Type.isArray( _json ) === true ){
31 for( var i=0, l = _json.length; i<l; ++i ){
32 buildFileData( _json[ i ], _data );
35 if( Type.isNumber( _json.id ) === true ){
36 buildFileData( _json, _data );
38 _file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, _file, 'children', null ) );
40 function onErrorJson( _file ){
41 var _data = FileAPI.getFileData( _file);
43 _data.state = Const.FILE.STATE.ERROR;
45 _file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, _file, 'children', null ) );
47 function buildFileData( _data, _parent ){
50 if( _parent === FILE_DATA_PANELS_ROOT || _parent === FILE_DATA_MY_PANELS_ROOT ){
51 _data.type = FILE_TYPE.PANEL;
55 if( _parent === FILE_DATA_COMICS_ROOT ){
56 _data.type = FILE_TYPE.COMIC;
59 if( _parent.type === FILE_TYPE.COMIC ){
63 if( _parent === FILE_DATA_LISENCE_ROOT ){
64 _data.type = FILE_TYPE.LICENSE;
65 _array = ORIGINAL_LICENSE_ARRAY;
68 if( _parent === FILE_DATA_AUTHOR_ROOT ){
69 _data.type = FILE_TYPE.AUTHOR;
70 _array = AUTHOR_ARRAY;
73 if( _parent === FILE_DATA_ARTIST_ROOT ){
74 _data.type = FILE_TYPE.ARTIST;
75 _array = ARTIST_ARRAY;
78 if( _parent === FILE_DATA_PICTURE_ROOT || _parent === FILE_DATA_MY_PICTURES_ROOT ){
79 _data.type = FILE_TYPE.PICTURE;
80 _array = RESOURCE_PICTURE_ARRAY;
81 // original_license を含まなければ、license object を削除して ビットデータ で保持
82 // original_license なら ファイルを作る buildFileData( _license, FILE_DATA_LISENCE_ROOT)
83 var _license = _data.license,
87 if( typeof _license === 'object' ){
88 for( i=0, l=BASIC_LICENSES.length; i<l; ++i ){
89 _rule = _license[ BASIC_LICENSES[ i]];
90 if( typeof _rule === 'number' && _rule === 1 ){
91 _bits += _Math_pow( 2, i );
94 _data.license = _bits;
100 _data.driver = Driver;
101 // alert( ' _array ' + _data.id + Type.isNumber( _data.id ) );
102 // _array に _data を格納 または 上書き
103 if( Type.isNumber( _data.id ) === true && _data.id > 0 ){
104 var _id = _data.id - 1,
105 __data = _array[ _id ],
106 _reserved = Const.FILE.DATA_PROPERTY_RESERVED.join( ', ' );
108 for( var key in _data ){
109 if( _reserved.indexOf( key ) === -1 ){
110 __data[ key ] = _data[ key ];
113 _data = __data; // このタイミングで参照が切れるので注意!!
115 _array[ _id ] = _data;
118 // alert( 'error' + _parent.name + ' ' + _data.id );
123 if( _parent === FILE_DATA_AUTHOR_ROOT || _parent === FILE_DATA_ARTIST_ROOT ){
124 addChildData( _parent, _data );
127 if( _parent.type === FILE_TYPE.COMIC || _parent === FILE_DATA_COMICS_ROOT ){
128 var _panels = _data.stories,
130 if( Type.isArray( _panels ) === true ){
132 for( i=0, l=_panels.length; i<l; ++i ){
133 _panel = buildFileData( _panels[ i ], FILE_DATA_PANELS_ROOT );
137 addChildData( _data, _panel );
139 delete _data.stories;
141 if( _data.json !== null ){
144 if( Type.isArray( _data.children ) === false ){
148 var _author = _data.author || getResource( AUTHOR_ARRAY, _data.author_id );
150 _data.author = _author = buildFileData( _author, FILE_DATA_AUTHOR_ROOT );
151 addChildData( _author, _data );
152 _author.id === MyAuthorID && addChildData( FILE_DATA_MY_COMICS_ROOT, _data );
154 if( _parent === FILE_DATA_COMICS_ROOT ){
155 addChildData( FILE_DATA_LATEST_COMICS, _data );
159 if( _parent === FILE_DATA_PANELS_ROOT || _parent === FILE_DATA_MY_PANELS_ROOT ){
160 _data.comic && buildFileData( _data.comic, FILE_DATA_COMICS_ROOT );
161 _data.author && buildFileData( _data.author, FILE_DATA_AUTHOR_ROOT );
163 _data.comic = getResource( COMIC_ARRAY, _data.comic_id );
164 _data.author = getResource( AUTHOR_ARRAY, _data.author_id );
166 // picture data をファイルに取り出し
167 var _elements = _data.panel_elements,
169 if( Type.isArray( _elements ) === true ){
170 for( i=0, l=_elements.length; i<l; ++i ){
171 _elm = _elements[ i];
172 if( _elm.resource_picture ){
173 _elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT ); // 上記参照切れに備えてここで上書き
175 _elm.resource_picture = getResource( RESOURCE_PICTURE_ARRAY, _elm.picture_id );
179 _data.publish === 1 && addChildData( FILE_DATA_LATEST_PANELS, _data );
180 _data.author_id === MyAuthorID && addChildData( FILE_DATA_MY_PANELS_ROOT, _data );
183 if( _data.type == FILE_TYPE.PICTURE ){
184 var _artist = _data.artist || getResource( ARTIST_ARRAY, _data.artist_id );
186 _data.artist = _artist = buildFileData( _artist, FILE_DATA_ARTIST_ROOT );
187 addChildData( _artist, _data );
188 if( _artist.id === MyArtistID ){
189 addChildData( FILE_DATA_MY_PICTURES_ROOT, _data );
190 //FILE_DATA_MY_PICTURES_ROOT.type = FILE_TYPE.ARTIST;
191 //FILE_DATA_MY_PICTURES_ROOT.id = MyArtistID;
197 function addChildData( _parent, _child ){
198 if( Type.isArray( _parent.children ) === false ){
199 _parent.children = [];
201 Util.getIndex( _parent.children, _child ) === -1 && _parent.children.push( _child );
203 function getResource( _array, _id ){
204 if( Type.isArray( _array ) === false || Type.isNumber( _id ) === false || _id < 1 ) return null;
205 var _data = _array[ _id - 1 ];
207 _data = _array[ _id - 1 ] = {};
212 this.getSeqentialFiles = function( _file ){
213 var _data = FileAPI.getFileData( _file ),
214 _json = _data !== null ? _data.json : null;
215 if( _json === true && _data.type === FILE_TYPE.COMIC ){
216 if( pettanr.CONST.SERVER_SUPPORT === false ){
217 _json = [ 'json\/comics_', _data.id, '.json' ].join( '' );
219 _json = [ pettanr.CONST.PETTANR_ROOT_PATH, 'comics\/', _data.id, '.json' ].join( '' );
222 if( typeof _json === 'string' ){
223 FileAPI.getJson( _file, _json, onLoadJson, onErrorJson );
224 _data.state = Const.FILE.STATE.LOADING;
229 this.getName = function( _file ){
230 var _data = FileAPI.getFileData( _file ),
231 _type = _data !== null ? _data.type : null;
232 if( _type === FILE_TYPE.PICTURE ){
233 return [ _data.id, _data.ext ].join( '.' );
235 if( _type === FILE_TYPE.PANEL ){
236 return [ 'id:' + _data.id + ', ' + ( _data.t || '' ) + ':', _data.comic ? _data.comic.title : 'no comic' ].join( '' );
238 if( _type === FILE_TYPE.COMIC ){
241 if( _type === FILE_TYPE.ARTIST ){
242 return [ _data.name, '画伯' ].join( '' );
244 if( _type === FILE_TYPE.AUTHOR ){
245 return [ _data.name, '先生' ].join( '' );
249 this.getThumbnail = function( _file ){
250 var _data = FileAPI.getFileData( _file ),
251 _type = _data !== null ? _data.type : null;
252 if( _type === FILE_TYPE.PICTURE ){
253 return { image: [ pettanr.CONST.THUMBNAIL_PATH, _data.id, '.', _data.ext ].join( '' )};
255 if( _data === FILE_DATA_COMICS_ROOT ){
256 return { className: 'file-type-cabinet' };
258 if( _type === FILE_TYPE.COMIC ){
259 return { className: 'file-type-comic' };
261 if( _type === FILE_TYPE.PANEL ){
262 return { className: 'file-type-panel' };
264 if( _type === FILE_TYPE.AUTHOR ){
265 return { className: 'file-type-author' };
267 if( _type === FILE_TYPE.ARTIST ){
268 return { className: 'file-type-artist' };
270 if( _type === FILE_TYPE.FOLDER){
271 return { className: 'file-type-folder' };
273 return { className: 'file-type-broken' };
275 this.getSummary = function( _file ){
276 var _data = FileAPI.getFileData( _file ),
277 _type = _data !== null ? _data.type : null;
278 if( _type === FILE_TYPE.PICTURE ){
279 return [ _data.width, 'x', _data.height, ', filesize:', _data.filesize, ', lisence:', _data.license ].join( '' );
281 if( _data === FILE_DATA_COMICS_ROOT ){
282 return 'cabinet file';
284 if( _type === FILE_TYPE.COMIC ){
285 return 'comic file, id:' + _data.id;
287 if( _type === FILE_TYPE.PANEL ){
288 return [ _data.width, 'x', _data.height ].join( '' );
290 if( _type === FILE_TYPE.AUTHOR ){
291 return 'author file, id:' + _data.id;
293 if( _type === FILE_TYPE.ARTIST ){
294 return [ 'id:', _data.id, ' Email:', _data.email || 'empty' , ', HP:', _data.homepage_url || 'empty' ].join( '' );
296 if( _type === FILE_TYPE.FOLDER ){
297 return 'pettanR folder';
299 return 'pettanR unknown file';
301 this.read = function( _file ){
302 var _data = FileAPI.getFileData( _file ),
303 _type = _data !== null ? _data.type : null,
305 if( _type === FILE_TYPE.COMIC ){
306 // children を panels に deepcopy
308 for( var key in _data ){
309 ret[ key ] = _data[ key ]
311 ret.stories = _data.children;
314 if( _type === FILE_TYPE.PANEL ){
316 if( _type === FILE_TYPE.PANEL_PICTURE ){
319 if( _type === FILE_TYPE.BALLOON ){
321 if( _type === FILE_TYPE.PICTURE ){
324 this.write = function( _file, _newData, _onUpdate ){
325 var _data = FileAPI.getFileData( _file ),
326 _type = _data !== null ? _data.type : null;
327 if( _type === FILE_TYPE.COMIC ){
329 if( _type === FILE_TYPE.PANEL ){
331 if( _type === FILE_TYPE.PANEL_PICTURE ){
334 if( _type === FILE_TYPE.BALLOON ){
336 if( _type === FILE_TYPE.PICTURE ){
339 this.viewerApplicationList = function( _file ){
340 var _data = FileAPI.getFileData( _file ),
341 _type = _data !== null ? _data.type : null;
342 if( _type === FILE_TYPE.PANEL ){
345 if( _type === FILE_TYPE.COMIC ){
348 if( _data === FILE_DATA_MY_PICTURES_ROOT ){
349 return [ PremiumSatge ];
351 if( _type === FILE_TYPE.ARTIST ){
352 return [ PremiumSatge ];
356 this.editorApplicationList = function( _file ){
357 var _data = FileAPI.getFileData( _file ),
358 _type = _data !== null ? _data.type : null;
359 if( _type === FILE_TYPE.PANEL ){
362 if( _type === FILE_TYPE.COMIC ){
363 return [Editor, ComicConsole ];
368 Const = FileAPI.getConst(),
369 FILE_TYPE = Util.extend(
372 COMIC: FileAPI.createFileTypeID(),
373 PANEL: FileAPI.createFileTypeID(),
374 PICTURE: FileAPI.createFileTypeID(),
375 PANEL_PICTURE: FileAPI.createFileTypeID(),
376 BALLOON: FileAPI.createFileTypeID(),
377 AUTHOR: FileAPI.createFileTypeID(),
378 ARTIST: FileAPI.createFileTypeID(),
379 LICENSE: FileAPI.createFileTypeID()
382 FILE_DATA_SERVICE_ROOT = {
383 name: 'PettanR root',
384 type: FILE_TYPE.FOLDER,
387 FILE_DATA_COMICS_ROOT = {
389 type: FILE_TYPE.FOLDER,
392 json: pettanr.CONST.URL_COMICS_JSON
394 FILE_DATA_PANELS_ROOT = {
396 type: FILE_TYPE.FOLDER,
399 json: pettanr.CONST.URL_PANELS_JSON
401 FILE_DATA_PICTURE_ROOT = {
403 type: FILE_TYPE.FOLDER,
406 json: pettanr.CONST.URL_RESOURCE_PICTURES_JSON
408 FILE_DATA_MY_COMICS_ROOT = {
410 type: FILE_TYPE.FOLDER,
415 FILE_DATA_LATEST_COMICS = {
416 name: 'Latest Comics',
417 type: FILE_TYPE.FOLDER,
420 FILE_DATA_LATEST_PANELS = {
421 name: 'Latest Panels',
422 type: FILE_TYPE.FOLDER,
425 FILE_DATA_MY_PANELS_ROOT = {
427 type: FILE_TYPE.FOLDER,
430 json: pettanr.CONST.URL_MY_PANELS_JSON
432 FILE_DATA_MY_PICTURES_ROOT = {
434 type: FILE_TYPE.FOLDER,
437 json: pettanr.CONST.URL_ORIGINAL_PICTURES_JSON,
440 FILE_DATA_AUTHOR_ROOT = {
442 type: FILE_TYPE.FOLDER,
445 FILE_DATA_ARTIST_ROOT = {
447 type: FILE_TYPE.FOLDER,
450 FILE_DATA_LISENCE_ROOT = {
451 name: 'Original Lisences',
452 type: FILE_TYPE.FOLDER,
455 FILE_DATA_BALLOON_ROOT = {
456 name: 'Balloon templetes',
457 type: FILE_TYPE.FOLDER,
464 RESOURCE_PICTURE_ARRAY = [],
465 BALLOON_TEMPLETE_ARRAY = [],
466 ORIGINAL_LICENSE_ARRAY = [],
467 BASIC_LICENSES = 'cc_by,cc_nc,cc_nd,cc_sa,keep_aspect_ratio,no_convert,no_flip,no_resize'.split( ',');
468 FILE_DATA_SERVICE_ROOT.children.push( FILE_DATA_COMICS_ROOT, FILE_DATA_PICTURE_ROOT, FILE_DATA_PANELS_ROOT, FILE_DATA_LISENCE_ROOT, FILE_DATA_BALLOON_ROOT );
469 FILE_DATA_COMICS_ROOT.children.push( FILE_DATA_MY_COMICS_ROOT, FILE_DATA_LATEST_COMICS, FILE_DATA_AUTHOR_ROOT );
470 FILE_DATA_PANELS_ROOT.children.push( FILE_DATA_LATEST_PANELS, FILE_DATA_MY_PANELS_ROOT );
471 FILE_DATA_PICTURE_ROOT.children.push( FILE_DATA_MY_PICTURES_ROOT, FILE_DATA_ARTIST_ROOT );
473 FileAPI.createFolderUnderRoot( FILE_DATA_SERVICE_ROOT );
475 Driver.isPettanrFileInstance = function( _file ){
476 if( FileAPI.isFileInstance( _file ) === true ){
477 var _data = FileAPI.getFileData( _file.getUID() );// _file でなく _file.getUID()
478 return _data !== null && _data.driver === Driver;
483 var Cabinet = gOS.registerApplication( function(){
489 this.bgColor = '#FFFFFF';
490 this.MIN_WIDTH = 500;
491 this.MIN_HEIGHT = 300;
492 this.onInit = function(){
493 self.rootElement.id = 'cabinet-root';
494 self.rootElement.innerHTML = [
495 '<div id="cabinet-header">Cabinet<div id="cabinet-close-button">x</div></div>',
496 '<div id="cabinet-container" class="finder-container"></div>'
499 self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
501 tree = FileAPI.createTree( FILE_DATA_SERVICE_ROOT );
505 this.onOpen = function( _w, _h ){
506 headerH = Util.getElementSize( document.getElementById( 'cabinet-header' ) ).height;
508 self.addEventListener( document.getElementById( 'cabinet-close-button' ), 'click', Cabinet.shutdown );
510 finder = self.createFinder( self.rootElement, tree );
511 self.onPaneResize( _w, _h );
513 this.onClose = function(){
516 finder = tree = null;
518 this.onPaneResize = function( _w, _h ){
519 finder.resize( _w, _h - headerH );
521 }, false, true, 'Cabinet', 'cabinet', null, '#1C1C1C' );
523 var Gallery = gOS.registerApplication( function(){
529 this.bgColor = '#FFFFFF';
530 this.MIN_WIDTH = 500;
531 this.MIN_HEIGHT = 300;
532 this.onInit = function(){
533 self.rootElement.id = 'gallery-root';
534 self.rootElement.innerHTML = [
535 '<div id="gallery-header">Cabinet<div id="gallery-close-button">x</div></div>',
536 '<div id="gallery-container" class="finder-container"></div>'
539 self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
541 tree = FileAPI.createTree( FILE_DATA_PICTURE_ROOT );
542 var _root = tree.getRootFile(),
543 _myPic = _root.getChildFileByIndex( 0 ),
544 _pic = _root.getChildFileByIndex( 1 );
545 _myPic.getSeqentialFiles();
546 _pic.getSeqentialFiles();
550 this.onOpen = function( _w, _h ){
551 headerH = Util.getElementSize( document.getElementById( 'gallery-header' ) ).height;
553 self.addEventListener( document.getElementById( 'gallery-close-button' ), 'click', Gallery.shutdown );
555 finder = self.createFinder( self.rootElement, tree );
556 self.onPaneResize( _w, _h );
558 this.onClose = function(){
561 finder = tree = null;
563 this.onPaneResize = function( _w, _h ){
564 finder.resize( _w, _h - headerH );
566 }, false, true, 'Gallery', 'gallery', null, '#01A31C' );
568 var Backyard = gOS.registerApplication( function(){
571 this.bgColor = '#FFFFFF';
572 this.MIN_WIDTH = 500;
573 this.MIN_HEIGHT = 300;
574 this.onInit = function(){
576 this.onOpen = function( _w, _h, _option ){
578 this.onClose = function(){
580 this.onPaneResize = function( _w, _h){
582 }, false, false, 'Settings', 'settings', null, '#DDDDDD' );
584 if( pettanr.DEBUG === true){
585 var Debug = gOS.registerApplication( function(){
590 pettanR: pettanr.version,
591 ua: navigator.userAgent,
592 platform: navigator.platform,
593 appVersion: navigator.appVersion,
594 appCodeName: navigator.appCodeName,
595 appName: navigator.appName,
596 language: navigator.browserLanguage || navigator.language,
598 RenderingMode: UA.isStanderdMode === true ? 'Standerd' : 'Quirks'
601 data.version = UA.IE;
602 if( UA.ieVersion >= 8 ) data.RenderingVersion = UA.ieRenderingVersion;
603 data.browserType = UA.STANDALONE === true ? 'Standalone' : 'bundle';
604 if( UA.ieVersion < 9 ) {
613 this.bgColor = '#FFFFFF';
614 this.MIN_WIDTH = 500;
615 this.MIN_HEIGHT = 300;
616 this.onInit = function(){
617 self.rootElement.id = 'debug-root';
618 self.rootElement.innerHTML = '<dl id="useragent" class="dl-table clearfix"></dl>';
620 this.onOpen = function( _w, _h, _option ){
621 elmDl = document.getElementById( 'useragent' );
623 for( var key in data ){
624 elmDt = document.createElement( 'dt' );
625 elmDt.innerHTML = key;
626 elmDd = document.createElement( 'dd' );
627 elmDd.innerHTML = '' + data[ key];
628 if( !data[ key ] ) elmDd.style.color = 'red';
629 elmDl.appendChild( elmDt );
630 elmDl.appendChild( elmDd );
633 this.onClose = function(){
636 this.onPaneResize = function( _w, _h ){
639 }, false, true, 'Debug', 'debug', null, '#01A31C' );
642 /* ----------------------------------------
643 * Image Group Exproler
646 var PremiumSatge = gOS.registerApplication( function(){
647 var BASE_PATH = pettanr.CONST.RESOURCE_PICTURE_PATH,
648 THUMB_PATH = pettanr.CONST.THUMBNAIL_PATH,
649 LIMIT_FILESIZE = 1024 * 100,
655 elmContainer, elmIconOrigin, elmName, elmButton,
656 containerW, containerH,
657 itemW, itemH, buttonW,
662 var ImageGroupIconClass = function( index, data ){
663 var elmIconWrap = elmIconOrigin.cloneNode( true ),
664 elmIconTitle = Util.getElementsByClassName( elmIconWrap, 'image-group-item-title' )[ 0 ],
665 SRC = [ BASE_PATH, data.id, '.', data.ext ].join( ''),
666 LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext ].join( '') : null,
667 reversibleImage = null,
671 elmContainer.appendChild( elmIconWrap );
672 elmIconWrap.style.left = ( index * itemW ) + 'px';
673 elmIconTitle.appendChild( document.createTextNode( data.filesize + 'bytes' ) );
675 function onImageLoad( url, _imgW, _imgH ){
676 data.width = _imgW = _imgW || data.width || 64;
677 data.height = _imgH = _imgH || data.height || 64;
678 elmIconTitle.firstChild.data = _imgW + 'x' + _imgH;
679 var zoom = 128 /( _imgW > _imgH ? _imgW : _imgH ),
680 MATH_FLOOR = Math.floor,
681 h = MATH_FLOOR( _imgH * zoom ),
682 w = MATH_FLOOR( _imgW * zoom );
683 reversibleImage.elm.style.cssText = [
686 'margin:', MATH_FLOOR( itemH / 2 - h / 2 ), 'px ', MATH_FLOOR( itemW / 2 - w / 2 ), 'px 0'
688 reversibleImage.resize( w, h );
689 self.addEventListener( elmIconWrap, 'click', onClick );
694 PremiumSatge.shutdown();
697 function asyncDraw(){
698 reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad );
699 elmIconWrap.appendChild( reversibleImage.elm );
704 this.onEnter = function( delay ){
705 self.addTimer( asyncDraw, delay, true );
706 delete instance.onEnter;
708 this.destroy = function(){
709 delete instance.destroy;
710 // timer && window.clearTimeout( timer );
711 self.removeTimer( asyncDraw );
712 self.removeMouseEventListener( elmIconWrap );
713 reversibleImage !== null && reversibleImage.destroy();
714 // Util.removeAllChildren( elmIconWrap );
715 // elmContainer.removeChild( elmIconWrap );
716 reversibleImage = elmIconWrap = elmIconTitle = data = timer = null;
720 function onEnterShowImage(){
721 var l = ICON_ARRAY.length,
722 _start = -wrapX /itemW -1,
723 _end = _start + winW /itemW +1,
725 for( var i=0, c = 0; i<l; ++i){
726 _icon = ICON_ARRAY[ i ];
727 if( _start < i && i < _end && _icon.onEnter ){
728 _icon.onEnter( c * 100 );
732 //onEnterInterval !== null && window.clearTimeout( onEnterInterval );
733 //onEnterInterval = null;
734 self.removeTimer( onEnterShowImage );
736 function clickClose(){
737 PremiumSatge.shutdown();
739 function onMouseWheel( e ){
740 if( winW < containerW ){
741 wrapX += e.wheelDelta / 2;
742 wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
743 elmContainer.style.left = wrapX + 'px';
745 self.removeTimer( onEnterShowImage );
746 self.addTimer( onEnterShowImage, 500 );
751 function drawIcons(){
752 while( ICON_ARRAY.length > 0 ){
753 ICON_ARRAY.shift().destroy();
755 var _index = rootFile.search( {
757 type: FILE_TYPE.ARTIST
759 _artistFile = rootFile.getChildFileByIndex( _index ),
761 if( _artistFile !== null ){
762 for(var i=0, l=_artistFile.getChildFileLength(); i<l; ++i ){
763 _file = _artistFile.getChildFileByIndex( i );
764 ICON_ARRAY.push( new ImageGroupIconClass( i, FileAPI.getFileData( _file ) ));
767 elmName.firstChild.data = _artistFile.getName();
768 _artistFile.destroy();
772 function onFadeout(){
773 while( ICON_ARRAY.length > 0 ){
774 ICON_ARRAY.shift().destroy();
776 onUpdate !== null && onUpdateData !== null && onUpdate( onUpdateData );
777 onUpdate = onUpdateData = null;
778 PremiumSatge.shutdown();
782 this.MIN_WIDTH = 320;
783 this.MIN_HEIGHT = 320;
784 this.onInit = function(){
785 self.rootElement.id = 'image-group-wrapper';
787 self.rootElement.innerHTML = [
788 '<div id="image-group-icon-container"></div>',
789 '<div id="image-group-name">NO DATA...</div>',
790 '<div id="image-group-button" class="button">close</div>'
793 self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
795 tree = FileAPI.createTree( FILE_DATA_ARTIST_ROOT );
796 rootFile = tree.getRootFile();
798 this.onOpen = function( _windowW, _windowH, _ARTISTIDorFILE, _onUpdate ){
799 elmContainer = document.getElementById( 'image-group-icon-container' );
800 containerH = Util.getElementSize( elmContainer ).height;
802 elmIconOrigin = ( function(){
803 var ret = document.createElement( 'div' ),
804 data = document.createElement( 'div' );
805 ret.appendChild( data );
806 ret.className = 'image-group-item';
807 data.className = 'image-group-item-title';
811 var size = Util.getElementSize( elmIconOrigin );
815 elmName = document.getElementById( 'image-group-name' );
816 elmButton = document.getElementById( 'image-group-button' );
818 buttonW = Util.getElementSize( elmButton ).width;
820 self.addEventListener( elmContainer, 'mousewheel', onMouseWheel );
821 self.addEventListener( elmButton, 'click', clickClose );
822 tree.addTreeEventListener( Const.TREE.EVENT.UPDATE, drawIcons );
824 if( Driver.isPettanrFileInstance( _ARTISTIDorFILE ) === true ){
825 var _data = FileAPI.getFileData( _ARTISTIDorFILE );
826 if( _ARTISTIDorFILE.getType() === FILE_TYPE.ARTIST || FILE_DATA_MY_PICTURES_ROOT === _data ){
827 artistID = _data.id || -1;
830 if( Type.isNumber( _ARTISTIDorFILE ) === true ){
831 artistID = _ARTISTIDorFILE;
834 onUpdate = _onUpdate || null;
840 containerW = ICON_ARRAY.length * itemW;
844 var w = winW > containerW ? winW : containerW,
845 h = _windowH > containerH ? containerH : _windowH,
846 MATH_FLOOR = Math.floor;
848 $( elmContainer ).css( {
852 top: MATH_FLOOR( _windowH /2 )
855 top: MATH_FLOOR( _windowH /2 - h /2 )
856 }, onEnterShowImage );
858 elmButton.style.cssText = [
859 'left:', MATH_FLOOR( _windowW /2 - buttonW /2 ), 'px;',
860 'top:', MATH_FLOOR( _windowH /2 + containerH /2 +10 ), 'px'
863 this.onPaneResize = function( _windowW, _windowH ){
864 var w = _windowW > containerW ? _windowW : containerW,
865 h = _windowH > containerH ? containerH : _windowH,
866 MATH_FLOOR = Math.floor,
867 offsetW = MATH_FLOOR( _windowW /2 -winW /2 );
871 if( offsetW <= 0 ){ // smaller
872 $( elmContainer ).stop().css( {
877 top: MATH_FLOOR( _windowH /2 -h /2 )
880 $( elmContainer ).stop().css( { // bigger
883 borderLeftWidth: offsetW
885 top: MATH_FLOOR( _windowH /2 -h /2 ),
889 elmButton.style.cssText = [
890 'left:', MATH_FLOOR( _windowW /2 -buttonW /2 ), 'px;',
891 'top:', MATH_FLOOR( _windowH /2 +containerH /2 + 10 ), 'px'
895 this.onClose = function(){
896 if( tree === null ) return true;
897 $( elmContainer ).stop().animate( {
899 top: Math.floor( winH /2 )
901 // onEnterInterval !== null && window.clearTimeout( onEnterInterval );
902 // onEnterInterval = null;
905 tree.removeTreeEventListener( Const.TREE.EVENT.UPDATE, drawIcons );
907 tree = rootFile = null;
911 }, true, true, 'Premium Stage', 'premiumStage', null, '#C3325F' );
914 /* ----------------------------------------
918 var TextEditor = gOS.registerApplication( function(){
919 var elmTextarea, elmButton,
920 textElement, onUpdate,
926 textElement && textElement.text( elmTextarea.value );
927 self.addAsyncCall( asyncCallback );
930 function asyncCallback(){
931 onUpdate && onUpdate( textElement );
932 onUpdate = textElement = null;
933 TextEditor.shutdown();
937 function textareaFitHeight(){
939 while( elmTextarea.offsetHeight < textElement.h ){
941 elmTextarea.rows = rows;
943 if( rows > 1 ) elmTextarea.rows = --rows;
948 this.MIN_WIDTH = 320;
949 this.MIN_HEIGHT = 320;
950 this.onInit = function(){
951 self.rootElement.id = 'speach-editor-wrapper';
952 self.rootElement.innerHTML = '<textarea id="speach-editor"></textarea><div id="speach-edit-complete-button" class="button">OK</div>';
954 this.onOpen = function( _w, _h, _panelX, _panelY, _textElement, _onUpdate ){
955 elmTextarea = document.getElementById( 'speach-editor' );
956 elmButton = document.getElementById( 'speach-edit-complete-button' );
958 self.addKeyEventListener( 'keydown', new Function( 'return false' ), 69, false, true );
959 self.addEventListener( elmButton, 'click', clickOK );
963 textElement = _textElement;
964 onUpdate = _onUpdate || null;
966 self.onPaneResize( _w, _h );
967 elmTextarea.value = _textElement.text()
971 * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。
973 UA.isIE === true && UA.ieVersion <= 7 && self.addAsyncCall( textareaFitHeight );
975 this.onPaneResize = function( _w, _h ){
976 self.rootElement.style.cssText = [
977 'left:', textElement.x + panelX, 'px;',
978 'top:', textElement.y + panelY, 'px;',
979 'width:', textElement.w, 'px;',
980 'height:', textElement.h, 'px;'
983 this.onClose = function(){
984 self.removeKeyEventListener();
985 self.removeMouseEventListener( elmButton );
987 elmTextarea = elmButton = onUpdate = textElement = self = null;
989 }, true, false, 'Tetxt Editor', 'texteditor', null, '#DDDDDD' );
992 var Reader = gOS.registerApplication( function(){
993 var windowW, windowH,
997 elmContainer, elmTitle, elmAuthor, elmBackButton, elmNextButton,
1001 currentPanel = null,
1006 function onBackClick(){
1007 currentIndex -= ( currentIndex > 0 ? 1 : 0 );
1011 function onNextClick(){
1012 currentIndex += ( currentIndex < numPanel - 1 ? 1 : 0 );
1017 var elm = elmContainer.childNodes[ currentIndex ],
1018 h = windowH - headerH - consoleH,
1021 top = headerH - elm.offsetTop + Math.floor( ( h - elm.offsetHeight ) / 2 );
1024 $( elmContainer ).stop().animate( {
1028 function getCurrentTopPosition(){
1032 var fileData, title, author;
1034 if( Driver.isPettanrFileInstance( currentFile ) === true ){
1035 if( currentFile.getType() === FILE_TYPE.COMIC ){
1036 fileData = currentFile.read();
1037 title = fileData.title;
1038 author = fileData.author.name;
1039 comicData = fileData;
1040 numPanel = currentFile.getChildFileLength();
1042 if( currentFile.getType() === FILE_TYPE.PANEL ){
1043 fileData = currentFile.read();
1044 title = fileData.comic.title;
1045 author = fileData.comic.author.name;
1046 comicData = fileData;
1052 if( comicData !== null ){
1053 elmTitle.data = title;
1054 elmAuthor.data = author;
1055 bindWorker.json( comicData );
1056 self.addAsyncCall( asyncResize );
1059 function asyncResize(){
1060 self.onPaneResize( windowW, windowH );
1065 this.MIN_WIDTH = 320;
1066 this.MIN_HEIGHT = 320;
1067 this.onInit = function(){
1068 self.rootElement.id = 'comic-reader-wrapper';
1069 self.rootElement.innerHTML = [
1070 '<div id="comic-reader-panel-container"></div>',
1071 '<div class="comic-reader-shadow" style="top:0;height:40px;"></div>',
1072 '<div id="comic-reader-header">',
1073 '<div id="comic-reader-header-content">',
1074 '<span id="comic-reader-title">NO DATA...</span>',
1075 '<span id="comic-reader-author">NO DATA...</span>',
1078 '<div class="comic-reader-shadow" style="bottom:0;height:100px;"></div>',
1079 '<div id="comic-reader-console">',
1080 '<div id="comic-reader-button-centering">',
1081 '<a href="#" id="comic-reader-back-button">▲</da>',
1082 '<a href="#" id="comic-reader-forward-button">▼</a>',
1087 self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
1090 this.onOpen = function( _w, _h, _file ){
1091 headerH = Util.getElementSize( document.getElementById( 'comic-reader-header' ) ).height;
1092 consoleH = Util.getElementSize( document.getElementById( 'comic-reader-console' ) ).height;
1093 elmContainer = document.getElementById( 'comic-reader-panel-container' );
1094 elmTitle = document.getElementById( 'comic-reader-title' ).firstChild;
1095 elmAuthor = document.getElementById( 'comic-reader-author' ).firstChild;
1096 elmBackButton = document.getElementById( 'comic-reader-back-button' );
1097 elmNextButton = document.getElementById( 'comic-reader-forward-button' );
1099 bindWorker = pettanr.bind.createBindWorker( elmContainer, null, false, false );
1101 self.addEventListener( elmBackButton, 'click', onBackClick );
1102 self.addEventListener( elmNextButton, 'click', onNextClick );
1104 numPanel = currentIndex = 0;
1106 elmContainer.style.cssText = 'left:' + ( _w / 2 ) + 'px;' + 'top:' + _h + 'px;';
1110 if( FileAPI.isFileInstance( _file ) === true ){
1111 currentFile = _file;
1112 _file.addEventListener( Const.FILE.EVENT.GET_SEQENTIAL_FILES, draw );
1113 _file.getSeqentialFiles();
1117 this.onPaneResize = function( _windowW, _windowH ){
1120 var panelH = elmContainer.offsetHeight,
1121 panelW = elmContainer.offsetWidth,
1122 h = _windowH - headerH - consoleH;
1123 $( elmContainer ).stop().animate(
1125 left: Math.floor( ( _windowW - panelW ) / 2 ),
1126 top: headerH + ( panelH < h ? Math.floor( ( h - panelH ) / 2 ) : 0 )
1130 this.onClose = function(){
1131 self.removeMouseEventListener( elmBackButton );
1132 self.removeMouseEventListener( elmNextButton );
1134 bindWorker.destroy();
1137 currentFile && currentFile.removeEventListener( Const.FILE.EVENT.GET_SEQENTIAL_FILES, draw );
1138 currentFile = comicData = currentPanel = null;
1140 elmContainer = elmTitle = elmAuthor = elmBackButton = elmNextButton = null;
1142 }, true, true, 'Comic Reader', 'comicreader', null, '#01A31C' );
1145 var Editor = gOS.registerApplication( function(){
1147 var PANEL_ELEMENT_TYPE_IMAGE = 0,
1148 PANEL_ELEMENT_TYPE_TEXT = 1,
1150 MOUSE_LISTENER_ARRAY = [],
1151 PANEL_ELEMENT_ARRAY = [],
1152 MIN_PANEL_HEIGHT = 20,
1153 MIN_ELEMENT_SIZE = 19,
1154 MOUSE_HIT_AREA = 10,
1155 elmMouseEventChatcher,
1156 jqMouseEventChacher,
1159 currentListener = null,
1170 var kill = function(){
1173 if( o.hasOwnProperty && !o.hasOwnProperty( p ) ) continue;
1190 destroy: function(){
1195 register: function( _class ){
1196 _class.prototype = TMP.abstractModule;
1198 MODULE_ARRAY.push( ret );
1202 /* ----------------------------------------
1204 * - mouseEventListener
1215 var MENU_BAR_CONTROL = ( function(){
1216 var ELM_ITEM_CLASSNAME = 'menu-bar-item',
1219 elmItemOrigin, elmSelectionOrigin,
1220 barH, itemW, selectionW;
1222 var MenubarOptionClass = function( callback, separateAfter ){
1223 this.callback = callback;
1224 this.separateAfter = separateAfter;
1226 MenubarOptionClass.prototype = {
1229 title: function( _title ){
1230 if( Type.isString( _title ) === true ){
1231 this.elmTitle.innerHTML = _title;
1233 return this.elmTitle.innerHTML;
1236 visible: function( _visible ){
1237 if( Type.isBoolean( _visible ) === true && this._visible !== _visible ){
1238 this._visible = _visible;
1239 this.elm.className = _visible === true ? '' : 'disabled';
1241 return this._visible;
1243 _init: function( elmParent, _title, _shortcut, _visible ){
1244 this.elm = elmSelectionOrigin.cloneNode( true );
1245 this.elmTitle = this.elm.getElementsByTagName( 'span' )[ 0 ];
1247 elmParent.appendChild( this.elm );
1249 this.title( _title );
1250 this.visible( !!_visible );
1252 var elmShortcut = this.elm.getElementsByTagName( 'kbd' )[ 0 ];
1254 elmShortcut.innerHTML = _shortcut;
1256 elmShortcut.parentNode.removeChild( elmShortcut );
1262 var MenuBarItemClass = function( title ){
1263 this.elm = elmItemOrigin.cloneNode( true );
1264 elmBar.appendChild( this.elm );
1265 this.elm.style.left = ( itemW * itemList.length ) + 'px';
1267 this.elm.getElementsByTagName( 'div' )[ 0 ].innerHTML = title;
1269 this.elmUl = this.elm.getElementsByTagName( 'ul' )[ 0 ];
1270 this.optionList = [];
1271 this.visible = false;
1273 var optionList = this.optionList;
1275 this.onClick = function( e ){
1276 var i = Util.getChildIndex( this.parentNode, this );
1277 i !== -1 && this.className !== 'disabled' && optionList[ i ].callback( i );
1280 this._onClose = function(){
1284 MenuBarItemClass.prototype = {
1286 if( this.visible === true ) return;
1287 elmRoot.appendChild( this.elm );
1288 this.elm.className = ELM_ITEM_CLASSNAME + '-focus';
1289 this.onShow && app.addAsyncCall( this.onShow, null, this );
1290 this.visible = true;
1293 if( this.visible === false ) return;
1294 elmBar.appendChild( this.elm );
1295 this.elm.className = ELM_ITEM_CLASSNAME;
1296 this.onHide && app.addAsyncCall( this.onHide, null, this );
1297 this.visible = false;
1299 createOption: function( title, shortcut, callback, visible, separateBefore, separateAfter ){
1300 var ret = new MenubarOptionClass( callback, separateAfter ),
1301 before = this.optionList[ this.optionList.length -1 ];
1302 ret._init( this.elmUl, title, shortcut, visible );
1304 this.optionList.push( ret );
1305 if( before && ( separateBefore === true || before.separateAfter === true )){
1306 ret.elm.style.borderTop = '1px solid #ccc';
1311 for( var lis = this.optionList, i = lis.length; i; ){
1312 app.addEventListener( lis[ --i ].elm, 'click', this.onClick );
1318 while( o = this.optionList.shift() ) o._kill();
1324 function createMenubarItem( title ){
1325 itemList.push( new MenuBarItemClass( title ) );
1326 return itemList[ itemList.length - 1 ];
1330 elmRoot = app.rootElement;
1331 elmBar = document.getElementById( 'menu-bar' );
1332 elmItemOrigin = ( function(){
1333 var ret = document.createElement( 'div' ),
1334 div = document.createElement( 'div' ),
1335 ul = document.createElement( 'ul' );
1336 ret.className = ELM_ITEM_CLASSNAME;
1337 ret.appendChild( div );
1338 ret.appendChild( ul );
1341 elmSelectionOrigin = ( function(){
1342 var ret = document.createElement( 'li' ),
1343 a = document.createElement( 'a' ),
1344 span = document.createElement( 'span' ),
1345 key = document.createElement( 'kbd' );
1346 a.appendChild( span );
1347 a.appendChild( key );
1348 ret.appendChild( a );
1352 barH = Util.getElementSize( elmBar ).height;
1353 MENU_BAR_CONTROL.h = barH;
1354 itemW = Util.getElementSize( elmItemOrigin ).width;
1355 selectionW = Util.getElementSize( elmItemOrigin.getElementsByTagName( 'ul' )[ 0 ] ).width;
1357 MENU_BAR_CONTROL.QUIT = createMenubarItem( 'Quit' );
1358 MENU_BAR_CONTROL.EDIT = createMenubarItem( 'Edit' );
1359 MENU_BAR_CONTROL.WINDOW = createMenubarItem( 'Window' );
1360 MENU_BAR_CONTROL.HELP = Util.extend(
1361 createMenubarItem( 'Help' ),
1363 createAjaxSelection: function( callback ){
1364 var elmLoading = document.createElement( 'li' ),
1366 this.elmUl.appendChild( elmLoading );
1367 elmLoading.className = 'loading';
1368 elmLoading.style.height = '90px';
1370 this.onShow = callback;
1373 delete this.createAjaxSelection;
1375 that.elmUl.removeChild( elmLoading );
1378 elmLoading = that = null;
1385 elmBar.style.top = ( -barH ) + 'px';
1386 $( elmBar ).animate( { top: 0 });
1388 delete MENU_BAR_CONTROL.init;
1391 for( var i = itemList.length; i; ) itemList[ --i ]._open();
1392 delete MENU_BAR_CONTROL.open;
1396 while( s = itemList.shift() ) s._close();
1397 itemList = elmRoot = elmBar = elmItemOrigin = elmSelectionOrigin = null;
1398 MENU_BAR_CONTROL.kill = kill;
1399 MENU_BAR_CONTROL.kill();
1402 mousemove: function( _mouseX, _mouseY ){
1403 if( barH >= _mouseY ) return true;
1405 for( var i = itemList.length; i; ) itemList[ --i ].hide();
1408 mouseup: function( _mouseX, _mouseY ){
1411 mousedown: function( _mouseX, _mouseY ){
1412 var l = itemList.length;
1413 if( barH < _mouseY || itemW * l < _mouseX ) return false;
1416 itemList[ l ][ l * itemW <= _mouseX && _mouseX < ( l + 1 ) * itemW ? 'show' : 'hide' ]();
1420 busy: function( _busy ){
1423 onWindowResize: function( _windowW, _windowH ){
1434 /* ----------------------------------------
1438 var HISTORY_CONTROL = ( function() {
1446 * currentを控えてstackForward.push(current)
1447 * stackBack.pop()を実行してcurrentに
1449 if( stackBack.length === 0 ) return;
1451 var s = stackBack.pop();
1452 s.fn.apply( {}, s.argBack );
1453 menubarBack.visible( stackBack.length !== 0 );
1454 SAVE_CONTROL.panelUpdated( stackBack.length !== 0 );
1456 stackForward.push( s );
1457 menubarForward.visible( true );
1460 if( stackForward.length === 0 ) return;
1462 var s = stackForward.pop();
1463 s.fn.apply( {}, s.argForword );
1464 menubarForward.visible( stackForward.length !== 0 );
1466 stackBack.push( s );
1467 menubarBack.visible( true );
1468 SAVE_CONTROL.panelUpdated( true );
1470 var RecordClass = function( _function, _argBack, _argForword, _destroy ){
1471 this.fn = _function;
1472 this.argBack = _argBack;
1473 this.argForword = _argForword;
1474 this.destroy = _destroy;
1476 RecordClass.prototype.kill = function( _callDestroy ){
1477 var _argBack = this.argBack,
1478 _argForword = this.argForword,
1483 if( _callDestroy !== true ) return;
1485 if( Type.isArray( _argBack ) === true ){ // isArray
1486 while( v = _argBack.shift() ){
1487 _callDestroy === true && Type.isFunction( v.destroy ) === true && v.destroy();
1490 if( Type.isArray( _argForword ) === true ){
1491 while( v = _argForword.shift() ){
1492 _callDestroy === true && Type.isFunction( v.destroy ) === true && v.destroy();
1498 app.addKeyEventListener( 'keydown', back, 90, false, true ); // ctrl + Z
1499 app.addKeyEventListener( 'keydown', forward, 90, true, true ); // ctrl + shift + Z
1500 app.addKeyEventListener( 'keydown', forward, 89, false, true ); // ctrl + Y
1502 delete HISTORY_CONTROL.init;
1505 menubarBack = MENU_BAR_CONTROL.EDIT.createOption( 'back', 'ctrl + z', back, false );
1506 menubarForward = MENU_BAR_CONTROL.EDIT.createOption( 'forward', 'ctrl + y', forward, false, false, true );
1508 delete HISTORY_CONTROL.open;
1512 while( s = stackBack.shift() ) s.kill( true );
1513 while( s = stackForward.shift() ) s.kill( true );
1514 menubarBack = menubarForward = stackBack = stackForward = null;
1516 saveState: function( _function, _argBack, _argForword, _onRecordDestroy ){
1517 stackBack.push( new RecordClass( _function, _argBack, _argForword, _onRecordDestroy ));
1518 menubarBack.visible( true );
1519 SAVE_CONTROL.panelUpdated( true );
1522 while( s = stackForward.shift() ) s.kill( s.destroy );
1523 menubarForward.visible( false );
1528 /* ----------------------------------------
1532 var SAVE_CONTROL = ( function(){
1533 var save, saveQuit, eXport, quit,
1540 PanelConsole.boot( Model.createPanel( {
1543 panelTimming : panelTimming,
1544 panelW : PANEL_CONTROL.w,
1545 panelH : PANEL_CONTROL.h,
1547 panelElementArray : PANEL_ELEMENT_ARRAY,
1551 function onSaveQuit(){
1552 // Editor.shutdown();
1555 function onExport(){
1557 comicID, panelID, panelTimming,
1558 PANEL_CONTROL.w, PANEL_CONTROL.h,
1559 2, // border, BackgroundImage
1565 delete SAVE_CONTROL.init;
1568 save = MENU_BAR_CONTROL.QUIT.createOption( 'save', 'ctrl + S', onSave, false );
1569 saveQuit = MENU_BAR_CONTROL.QUIT.createOption( 'save & quit', null, onSaveQuit, false, false, true );
1570 eXport = MENU_BAR_CONTROL.QUIT.createOption( 'export', null, onExport, true, false, true );
1571 quit = MENU_BAR_CONTROL.QUIT.createOption( 'quit', null, quit, true, true );
1573 delete SAVE_CONTROL.open;
1576 save = saveQuit = eXport = quit = null;
1577 SAVE_CONTROL.kill = kill;
1578 SAVE_CONTROL.kill();
1581 panelUpdated: function( _updated ){
1582 if( Type.isBoolean( _updated ) === true ){
1583 save.visible( _updated );
1584 saveQuit.visible( _updated );
1595 /* ----------------------------------------
1598 * - mouseEventListener
1600 var WINDOWS_CONTROL = ( function(){
1602 * 表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。
1604 var DEFAULT_MIN_WINDOW_WIDTH = 200,
1605 DEFAULT_MIN_WINDOW_HEIGHT = 200,
1607 WINDOW_BODY_BODER_SIZE = 1,
1608 currentWindowIndex = -1,
1614 var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH ){
1616 elmHeader, elmFooter = null,
1617 elmBody, elmBodyStyle,
1618 startX, startY, startW, startH,
1620 headerH, bodyH, footerH = 0,
1623 bodyIsTachable = false,
1626 function update( _x, _y, _w, _h ){
1627 _x = _x !== undefined ? _x : x;
1628 _y = _y !== undefined ? _y : y;
1629 _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;
1630 _w = _w !== undefined ? _w : w;
1631 _h = _h !== undefined ? _h : h;
1632 self.elm.style.cssText = [
1635 'width:', _w, 'px;',
1636 'height:', _h, 'px;'
1638 bodyH = _h - headerH - footerH;
1639 elmBodyStyle.height = bodyH + 'px';
1640 ( w !== _w || h !== _h) && self.onResize && self.onResize( _w, bodyH );
1646 function bodyBackOrForward( isBack ){
1648 if( bodyIsTachable === !isBack ) return;
1649 elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';
1650 elmBodyStyle.left = isBack === true ? 0 : x +'px';
1651 elmBodyStyle.top = isBack === true ? 0 : y + headerH + 'px';
1652 elmBodyStyle.width = isBack === true ? '' : ( w - WINDOW_BODY_BODER_SIZE * 2 ) + 'px';
1653 bodyIsTachable === isBack && isBack === true ? elmHeader.parentNode.insertBefore( elmBody, elmHeader.nextSibling ) : app.rootElement.appendChild( elmBody );
1654 bodyIsTachable = !isBack;
1657 this.init = function(){
1658 self.elm = elmWindowOrigin.cloneNode( true );
1659 menubarOption = MENU_BAR_CONTROL.WINDOW.createOption(
1660 ( visible !== true ? 'show ' : 'hide ' ) + title,
1661 null, function(){ visible === true ? self.close() : self.open(); }, true
1663 elmHeader = Util.getElementsByClassName( self.elm, 'window-header' )[ 0 ];
1664 elmHeader.innerHTML = title;
1665 headerH = Util.getElementSize( elmHeader ).height;
1666 elmBody = Util.getElementsByClassName( self.elm, 'window-body' )[ 0 ];
1667 elmBodyStyle = elmBody.style;
1669 self.onInit && self.onInit();
1672 this.x = function(){ return x;};
1673 this.y = function(){ return y;};
1674 this.w = function(){ return w;};
1675 this.h = function(){ return h;};
1676 this.title = function( _title ){
1677 if( Type.isString( _title ) === true ){
1678 jqHeader.html( _title );
1683 this.visible = visible;
1684 this.firstOpen = function(){
1685 var elmReplace = Util.getElementsByClassName( self.elm, 'window-body-insert-position' )[ 0 ];
1687 if( bodyTempleteID ){
1688 elmReplace.parentNode.replaceChild( document.getElementById( bodyTempleteID ), elmReplace );
1690 elmReplace.parentNode.removeChild( elmReplace );
1693 if( CLOSE_BUTTON_ENABLED !== true ){
1694 var elmClose = Util.getElementsByClassName( self.elm, 'window-close-button' )[ 0 ];
1695 elmClose.parentNode.removeChild( elmClose );
1699 var elmFooter = Util.getElementsByClassName( self.elm, 'window-footer' )[ 0 ];
1700 if( RESIZE_BUTTON_ENABLED === true ){
1701 footerH = Util.getElementSize( elmFooter ).height;
1703 elmFooter.parentNode.removeChild( elmFooter );
1705 self.onFirstOpen && self.onFirstOpen( w, h - headerH - footerH );
1707 update( x, y, w, h );
1709 delete self.firstOpen;
1711 this.open = function(){
1712 if( visible === true )return;
1713 self.visible = visible = true;
1715 menubarOption.title( 'hide ' + title );
1717 for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i ){
1718 if( WINDOW_ARRAY[ i ] === self ){
1719 WINDOW_ARRAY.splice( i, 1 );
1720 WINDOW_ARRAY.unshift( self );
1721 currentWindow = null;
1722 currentWindowIndex = -1;
1726 this.onFadeIn = function(){
1727 self.firstOpen && self.firstOpen();
1728 self.onOpen && self.onOpen( w, bodyH );
1730 this.onFadeOut = function(){
1731 self.elm.parentNode.removeChild( self.elm );
1732 self.onClose && app.addAsyncCall( self.onClose, null, self );
1734 this.close = function(){
1735 if( visible === false) return;
1736 self.visible = visible = false;
1737 $( self.elm ).fadeOut( self.onFadeOut );
1738 menubarOption.title( 'show ' + title );
1740 this.bodyBackOrForward = bodyBackOrForward;
1741 this.mousedown = function( _mouseX, _mouseY ){
1742 if( RESIZE_BUTTON_ENABLED === true && x + w -20 <= _mouseX && _mouseX < x + w && y + headerH + bodyH < _mouseY && _mouseY <= y + h ){
1743 bodyBackOrForward( true);
1751 updateMouseCursor( 'nw-resize');
1755 if( x > _mouseX || y > _mouseY || x + w < _mouseX || y + headerH < _mouseY ) return;
1756 if( CLOSE_BUTTON_ENABLED === true && x + w - closeButtonWidth < _mouseX){
1762 updateMouseCursor( 'move');
1770 this.mouseup = function( _mouseX, _mouseY ){
1771 isDragging = isResizing = false;
1772 updateMouseCursor( '');
1774 this.mousemove = function( _mouseX, _mouseY ){
1775 var _updateX = _mouseX - offsetX,
1776 _updateY = _mouseY - offsetY;
1778 if( isResizing === true){
1779 var _w = startW +_updateX,
1780 _h = startH +_updateY;
1781 update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h );
1784 if( isDragging === true) {
1785 update( startX + _updateX, startY + _updateY);
1788 if( x > _mouseX || x + w < _mouseX ) return;
1790 ( y <= _mouseY && y +headerH >= _mouseY ) ?
1791 updateMouseCursor( 'pointer') : // hit to header
1792 updateMouseCursor( '');
1793 bodyBackOrForward( y + headerH > _mouseY || y + headerH + bodyH < _mouseY);
1795 this.onMouseOut = function( _mouseX, _mouseY ){
1796 bodyIsTachable === true && bodyBackOrForward( true );
1798 updateMouseCursor( '' );
1800 this.busy = function(){
1801 return isDragging === true || isResizing === true;
1805 function getCurrentIndex( _mouseX, _mouseY ){
1806 if( currentWindow && currentWindow.busy() === true ) return currentWindowIndex;
1807 var l = WINDOW_ARRAY.length,
1808 _currentWindow = null,
1810 currentWindowIndex = -1;
1811 for( var i=0; i<l; i++){
1812 _win = WINDOW_ARRAY[ i];
1813 if( _win.visible !== true ) continue;
1816 if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){
1817 _currentWindow = _win;
1818 currentWindowIndex = i;
1822 currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);
1823 currentWindow = _currentWindow;
1824 return currentWindowIndex;
1826 function openWindow( _window ){
1827 if( _window.visible !== true ) return;
1828 elmRoot.appendChild( _window.elm );// appendした後に fadeIn() しないと ie で filterが適用されない.
1829 $( _window.elm ).fadeIn( _window.onFadeIn );
1835 elmRoot = document.getElementById( 'window-container' );
1836 elmWindowOrigin = app.fetchHTMLElement( 'windowTemplete' );
1837 closeButtonWidth = Util.getElementSize( Util.getElementsByClassName( elmWindowOrigin, 'window-close-button' )[ 0 ] ).width;
1839 delete WINDOWS_CONTROL.init;
1842 for( var i = WINDOW_ARRAY.length, _window; i; ){
1843 _window = WINDOW_ARRAY[ --i ];
1844 _window.init && _window.init();
1845 _window.visible === true && openWindow( _window );
1848 delete WINDOWS_CONTROL.open;
1852 mousemove: function( _mouseX, _mouseY ){
1853 var _index = getCurrentIndex( _mouseX, _mouseY );
1855 currentWindow.mousemove( _mouseX, _mouseY );
1858 if( _index > 0 ){ // 先頭のクリックでない場合
1860 WINDOW_ARRAY.splice( currentWindowIndex, 1 );
1861 WINDOW_ARRAY.unshift( currentWindow );
1863 elmRoot.appendChild( currentWindow.elm );
1864 currentWindowIndex = 0;
1869 mouseup: function( _mouseX, _mouseY ){
1870 if( getCurrentIndex( _mouseX, _mouseY) === 0){
1871 currentWindow.mouseup( _mouseX, _mouseY);
1876 mousedown: function( _mouseX, _mouseY ){
1877 if( getCurrentIndex( _mouseX, _mouseY) === 0){
1878 currentWindow.mousedown( _mouseX, _mouseY);
1884 return currentWindow !== null;
1886 onWindowResize: function( _windowW, _windowH ){
1891 createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH ){
1892 opt_visible = opt_visible !== false;
1893 opt_closeButtonEnabled = opt_closeButtonEnabled === true;
1894 opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;
1895 opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH ) ? w : DEFAULT_MIN_WINDOW_WIDTH;
1896 opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT ) ? h : DEFAULT_MIN_WINDOW_HEIGHT;
1898 var _window = new WindowClass( bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH );
1899 for( var key in EXTENDS ){
1900 _window[ key ] = EXTENDS[ key ];
1902 WINDOW_ARRAY.unshift( _window );
1903 if( Type.isUndefined( WINDOWS_CONTROL.init ) === true ){
1905 openWindow( _window );
1912 /* ----------------------------------------
1916 var TOOL_BOX_WINDOW = ( function(){
1918 app.addKeyEventListener( 'keydown', addImage, 73, false, true );
1919 app.addKeyEventListener( 'keydown', addText, 84, false, true );
1920 app.addKeyEventListener( 'keydown', switchGrid, 71, false, true );
1922 function addImage(){
1923 IMAGE_EXPLORER_WINDOW.open();// setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);
1924 TOOL_BOX_WINDOW.bodyBackOrForward( true );
1927 app.addAsyncCall( PANEL_ELEMENT_CONTROL.createTextElement );
1929 function switchGrid(){
1930 app.addAsyncCall( GRID_CONTROL.update );
1932 function popupHelp(){
1933 TOOL_BOX_WINDOW.bodyBackOrForward( true );
1934 app.addAsyncCall( HELP_DOCUMENTS_WINDOW.open );
1936 function editBG( e ){
1937 TOOL_BOX_WINDOW.bodyBackOrForward( true );
1938 app.addAsyncCall( INFOMATION_WINDOW.open );
1941 return WINDOWS_CONTROL.createWindow(
1944 MENU_BAR_CONTROL.EDIT.createOption( 'Add Image', 'ctrl + I', addImage, true, true, false);
1945 MENU_BAR_CONTROL.EDIT.createOption( 'Add Text', 'ctrl + T', addText, true, false, true);
1946 MENU_BAR_CONTROL.EDIT.createOption( 'show Grid', 'ctrl + G', switchGrid, true, true, true);
1948 delete TOOL_BOX_WINDOW.onInit;
1950 onFirstOpen: function(){
1951 app.addEventListener( document.getElementById( 'toolbox-add-image-button'), 'click', addImage );
1952 app.addEventListener( document.getElementById( 'toolbox-add-text-button'), 'click', addText );
1953 app.addEventListener( document.getElementById( 'toolbox-edit-bg-button'), 'click', editBG );
1954 app.addEventListener( document.getElementById( 'toolbox-switch-grid'), 'click', switchGrid );
1955 app.addEventListener( document.getElementById( 'toolbox-popup-help-button'), 'click', popupHelp );
1957 // postButton = $( '#toolbox-post-button');
1959 delete TOOL_BOX_WINDOW.onFirstOpen;
1962 'toolbox-window', 'Tool box', 0, 215, 110, 290, true
1967 /* ----------------------------------------
1971 var IMAGE_EXPLORER_WINDOW = ( function(){
1974 function onFileSelect( _file ){
1975 // 他の image ファイルも許可する?
1976 if( Driver.isPettanrFileInstance( _file ) === true ){
1977 if( _file.getType() === FILE_TYPE.PICTURE ){
1978 PANEL_ELEMENT_CONTROL.onImageSelect( FileAPI.getFileData( _file ) );
1983 return WINDOWS_CONTROL.createWindow(
1986 delete IMAGE_EXPLORER_WINDOW.onInit;
1988 onFirstOpen: function( _w, _h ){
1989 tree = FileAPI.createTree( FILE_DATA_PICTURE_ROOT );
1990 var _root = tree.getRootFile(),
1991 _myPic = _root.getChildFileByIndex( 0 ),
1992 _pic = _root.getChildFileByIndex( 1 );
1993 _myPic.getSeqentialFiles();
1994 _pic.getSeqentialFiles();
1998 finder = app.createFinder(
1999 document.getElementById( 'image-exproler-container' ),
2003 PANEL_ELEMENT_CONTROL.onImageSelect
2006 delete IMAGE_EXPLORER_WINDOW.onFirstOpen;
2008 onOpen: function( _w, _h ){
2009 finder.resize( _w, _h );
2011 onResize: function( _w, _h ){
2012 finder.resize( _w, _h );
2015 'image-exproler', 'Album', 0, 215, 600, 350, false, true, true, 300, 300
2020 /* ----------------------------------------
2024 var INFOMATION_WINDOW = ( function(){
2025 var FADE_EFFECT_ENABLED = true, //UA.isIE === false || UA.ieVersion >= 8,
2026 FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',
2027 FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',
2028 backgroundInfomationElm,
2029 jqPanelElementInformation,
2030 ui, inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
2031 inputPercentW, inputPercentH,
2032 currentPanelElement = null,
2033 currentElementType = -1;
2035 return WINDOWS_CONTROL.createWindow(
2037 onFirstOpen: function( _w, _h ){
2038 backgroundInfomationElm = $( '#panel-background-information');
2040 jqPanelElementInformation = $( '#comic-element-infomation').hide().css( {
2043 ui = app.createUIGroup();
2044 inputX = ui.createInputText( document.getElementById( 'comic-element-x' ), null );
2045 inputY = ui.createInputText( document.getElementById( 'comic-element-y' ), null );
2046 inputZ = ui.createInputText( document.getElementById( 'comic-element-z' ), null );
2047 inputA = ui.createInputText( document.getElementById( 'comic-element-a' ), null );
2048 inputW = ui.createInputText( document.getElementById( 'comic-element-w' ), null );
2049 inputH = ui.createInputText( document.getElementById( 'comic-element-h' ), null );
2050 inputPercentW = ui.createInputText( document.getElementById( 'comic-element-w-percent' ), null );
2051 inputPercentH = ui.createInputText( document.getElementById( 'comic-element-h-percent' ), null );
2052 inputAspectRatio = $( '#comic-element-keep-aspect' );
2053 delete INFOMATION_WINDOW.onFirstOpen;
2055 onResize: function( _w, _h ){
2056 jqPanelElementInformation.css( {
2060 update: function( currentElement ){
2061 var _elementType = currentElement === null ? -1 : currentElement.type,
2062 x = currentElement !== null ? currentElement.x : 0,
2063 y = currentElement !== null ? currentElement.y : 0,
2064 z = currentElement !== null ? currentElement.z : 0,
2065 a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle() ) : 0,
2066 w = currentElement !== null ? currentElement.w : 0,
2067 h = currentElement !== null ? currentElement.h : 0,
2068 actualW = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
2069 actualH = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
2070 wPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100 ) : 0,
2071 hPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100 ) : 0,
2072 keepAspect = currentElement !== null && currentElement.keepAspect === true;
2074 if( currentElementType !== _elementType ){
2075 if( _elementType !== -1 ){
2076 if( _elementType === 1 ){
2077 inputA.visible( true );
2078 inputPercentW.visible( false );
2079 inputPercentH.visible( false );
2080 inputAspectRatio.hide();
2082 inputA.visible( false );
2083 inputPercentW.visible( true );
2084 inputPercentH.visible( true );
2085 inputAspectRatio.show();
2087 currentElementType === -1 && jqPanelElementInformation.stop().css( {
2090 })[ FADE_IN_EFFECT ]();
2092 currentElementType !== -1 && jqPanelElementInformation.stop().css({
2095 })[ FADE_OUT_EFFECT ]();
2097 currentElementType = _elementType;
2099 if( currentElementType !== -1){
2103 _elementType === 1 && inputA.value( a );
2106 _elementType === 0 && inputPercentW.value( wPercent );
2107 _elementType === 0 && inputPercentH.value( hPercent );
2113 'infomation-window', 'Infomation', 0, 30, 200, 180, true
2117 /* ----------------------------------------
2121 var HELP_DOCUMENTS_WINDOW = ( function(){
2126 currentPageIndex = 0,
2129 onLoadFunction = null;
2131 function onAjaxStart( _pageIndex ){
2132 currentPageIndex = _pageIndex || currentPageIndex;
2133 if( onHelpLoad !== null ){
2141 onAjaxStart = new Function;
2143 var onHelpLoad = function( _xml ){
2144 var jqXML = $( _xml ),
2145 helpTitle = jqXML.find( 'pages' ).eq( 0 ).attr( 'title' ),
2146 elmNavi = document.createElement( 'div' ),
2147 elmItemOrigin = document.createElement( 'a' ),
2148 elmPages = document.createElement( 'div' ),
2149 elmPageOrigin = document.createElement( 'div' ),
2150 elmTitleOrigin = document.createElement( 'h2' ),
2152 elmNavi.className = 'sidenavi';
2153 elmItemOrigin.className = 'sidenavi-item';
2154 elmItemOrigin.href = '#';
2155 elmPages.className = 'page-contents';
2156 elmPageOrigin.className = 'page-content main';
2157 elmPageOrigin.appendChild( elmTitleOrigin);
2159 jqXML.find( 'page' ).each( function(){
2160 var xmlPage = $( this ),
2161 title = xmlPage.attr( 'title' ),
2162 content = xmlPage.text();
2164 elmItemOrigin.innerHTML = title;
2165 elmNavi.appendChild( elmItemOrigin.cloneNode( true ));
2167 elmTitleOrigin.innerHTML = title;
2169 elmPage = elmPageOrigin.cloneNode( true );
2170 elmPage.innerHTML = content;
2172 Util.cleanElement( elmPage);
2174 if( elmPage.childNodes.length > 0 ){
2175 elmPage.insertBefore( elmTitleOrigin.cloneNode( true ), elmPage.childNodes[0]);
2177 elmPage.appendChild( elmTitleOrigin.cloneNode( true ));
2179 elmPages.appendChild( elmPage );
2181 help.createOption( title, null, onSelectionClick, true );
2185 onLoadFunction = null;
2187 jqAjaxContents.removeClass( 'loading' ).append( elmNavi, elmPages );
2189 jqNaviItems = jqAjaxContents.find( 'a.' + elmItemOrigin.className ).click( onNaviClick );
2190 jqPages = jqAjaxContents.find( '.page-content' );
2191 jqPages.find( 'a' ).click( onInnerLinkClick );
2193 app.addAsyncCall( jumpPage );
2195 function onSelectionClick( _pageIndex ){
2196 HELP_DOCUMENTS_WINDOW.open();
2197 jumpPage( _pageIndex );
2199 function jumpPage( _index ){
2200 if( Type.isNumber( _index ) === true && 0 <= _index && _index < numPage && currentPageIndex !== _index ){
2201 currentPageIndex = _index;
2203 jqNaviItems.removeClass( 'current' ).eq( currentPageIndex ).addClass( 'current' );
2204 jqPages.hide().eq( currentPageIndex ).show();
2206 function onNaviClick( e ){
2208 jumpPage( Util.getChildIndex( this.parentNode, this ) );
2211 function onInnerLinkClick( e ){
2212 var jump = ( this.href || '' ).split( '#jump' ),
2215 jumpPage( '' + parseFloat( n ) === n ? parseFloat( n ) : -1 );
2218 return WINDOWS_CONTROL.createWindow(
2221 help = MENU_BAR_CONTROL.HELP;
2222 onLoadFunction = help.createAjaxSelection( onAjaxStart );
2223 jqAjaxContents = $( HELP_DOCUMENTS_WINDOW.elm ).find( '.window-body' ).addClass( 'loading' ).css( { overflow: 'auto' } );
2224 delete HELP_DOCUMENTS_WINDOW.onInit;
2226 onFirstOpen: function( _w, _h ){
2227 jqAjaxContents.css( { height: _h } );
2229 delete HELP_DOCUMENTS_WINDOW.onFirstOpen;
2231 onResize: function( _w, _h ){
2232 jqAjaxContents && jqAjaxContents.css( { height: _h });
2235 null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300
2239 /* ----------------------------------------
2242 * - panelResizeListener
2244 var GRID_CONTROL = ( function(){
2246 urlBG = "url('images/grid.gif')",
2251 elmGrid = document.getElementById( 'grid' );
2252 delete GRID_CONTROL.init;
2255 delete GRID_CONTROL.open;
2260 onPanelResize: function( _panelX, _panelY ){
2261 elmGrid.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px' ].join( '' );
2262 elmGrid.style.height = windowH +'px';
2264 enabled: function(){
2268 $( elmGrid ).stop().css( {
2271 })[ visible === true ? 'fadeOut' : 'fadeIn' ]();
2275 if( visible === true && urlBG !== null ){
2276 elmGrid.style.backgroundImage = urlBG;
2284 /* ----------------------------------------
2285 * WHITE_GLASS_CONTROL
2286 * - panelResizeListener
2288 var WHITE_GLASS_CONTROL = ( function(){
2289 var styleTop, styleLeft, styleRight, styleBottom;
2293 styleTop = document.getElementById( 'whiteGlass-top' ).style;
2294 styleLeft = document.getElementById( 'whiteGlass-left' ).style;
2295 styleRight = document.getElementById( 'whiteGlass-right' ).style;
2296 styleBottom = document.getElementById( 'whiteGlass-bottom' ).style;
2297 delete WHITE_GLASS_CONTROL.init;
2299 onPanelResize: function( _panelX, _panelY, _panelW, _panelH ){
2302 marginTop = _panelY,
2303 marginBottom = windowH -_h -marginTop,
2305 rightWidth = windowW -_w -marginX;
2307 styleTop.height = ( marginTop < 0 ? 0 : marginTop ) + 'px';
2309 styleLeft.top = marginTop + 'px';
2310 styleLeft.width = ( marginX < 0 ? 0 : marginX ) + 'px';
2311 styleLeft.height = ( _h + marginBottom ) + 'px';
2313 styleRight.top = marginTop + 'px';
2314 styleRight.left = _w +marginX + 'px';
2315 styleRight.width = ( rightWidth < 0 ? 0 : rightWidth ) + 'px';
2316 styleRight.height = ( _h + marginBottom ) + 'px';
2318 styleBottom.top = ( _h +marginTop ) + 'px';
2319 styleBottom.left = marginX + 'px';
2320 styleBottom.width = _w + 'px';
2321 styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom ) + 'px';
2327 /* --------------------------------------------------------------------------------------------
2329 * - mouseEventListener
2331 var PanelResizerClass = function( id, isTop ){
2332 var style = document.getElementById( id ).style,
2334 RESIZER_HEIGHT = 30,
2335 x = -BORDER_WIDTH / 2,
2336 y = isTop === true ? ( -5 - RESIZER_HEIGHT - BORDER_WIDTH ) : 0,
2339 panelX, panelY, panelW, panelH,
2340 offsetY, startY, startH,
2343 function restoreState( x, y, w, h ){
2344 if( arguments.length > 3){
2345 PANEL_CONTROL.resize( isTop, x || panelX, y || panelY, w || panelW, h || panelH );
2349 this.mousedown = function( _mouseX, _mouseY ){
2350 var _x = _mouseX -panelX,
2351 _y = _mouseY -panelY;
2352 if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
2357 updateMouseCursor( 'n-resize' );
2360 this.mousemove = function( _mouseX, _mouseY ){
2361 var _x = _mouseX - panelX,
2362 _y = _mouseY - panelY;
2363 if( isDragging !== true ){
2364 if( _x < x || x + w < _x || _y < y || y + h < _y ) return false;
2365 PANEL_ELEMENT_OPERATION_MANAGER.hide();
2366 updateMouseCursor( 'pointer' );
2369 var move = _y -offsetY;
2370 if( isTop === true){
2371 if( panelH - move < MIN_PANEL_HEIGHT ){
2372 move = panelH -MIN_PANEL_HEIGHT;
2374 PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move );
2376 var _h = startH + move;
2377 if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH ){
2378 PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h );
2384 this.mouseup = function( _mouseX, _mouseY ){
2385 if( isDragging !== true ) return;
2386 ( startY !== panelY || startH !== panelH ) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH ] );
2388 updateMouseCursor( '');
2390 this.busy = function(){
2393 this.onPanelResize = function( _x, _y, _w, _h ){
2396 if( panelW !== _w ){
2397 style.width = ( _w + 2 ) + 'px';
2401 y = isTop === true ? y : ( panelH + 5 + BORDER_WIDTH );
2405 var PANEL_RESIZER_TOP,
2406 PANEL_RESIZER_BOTTOM;
2408 /* ----------------------------------------
2411 * - mouseEventListener
2413 * panel-border の表示と onPanelResize の通知.
2417 var PANEL_CONTROL = ( function(){
2418 var elmPanel, stylePanel,
2419 DEFAULT_PANEL_WIDTH = 400,
2420 DEFAULT_PANEL_HEIGHT = 300,
2422 offsetX, offsetY, startX, startY,
2424 isDraggable = false;
2426 app.addKeyEventListener( 'keychange', onSpaceUpdate, 32, false, false );
2428 function onSpaceUpdate( e ){
2429 if( e.type === 'keyup' ){
2430 currentListener === null && updateMouseCursor( '' );
2431 isDraggable = false;
2433 currentListener === null && updateMouseCursor( 'move' );
2445 elmPanel = document.getElementById( 'panel-tools-container' );
2446 stylePanel = elmPanel.style;
2448 PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true );
2449 PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );
2450 PanelResizerClass = null;
2452 delete PANEL_CONTROL.init;
2454 open: function( _panelW, _panelH, _borderSize ){
2455 PANEL_CONTROL.w = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH;
2456 PANEL_CONTROL.h = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT;
2457 borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;
2459 delete PANEL_CONTROL.open;
2464 resize: function( isResizerTopAction, _x, _y, _w, _h ){
2465 PANEL_CONTROL.x = _x = _x !== undefined ? _x : PANEL_CONTROL.x;
2466 PANEL_CONTROL.y = _y = _y !== undefined ? _y : PANEL_CONTROL.y;
2467 PANEL_CONTROL.w = _w = _w !== undefined ? _w : PANEL_CONTROL.w;
2468 PANEL_CONTROL.h = _h = _h !== undefined ? _h : PANEL_CONTROL.h;
2470 stylePanel.left = ( _x - borderSize ) + 'px';
2471 stylePanel.top = ( _y - borderSize ) + 'px';
2472 stylePanel.width = _w + 'px';
2473 stylePanel.height = _h + 'px';
2475 PANEL_RESIZER_TOP.onPanelResize( _x, _y, _w, _h );
2476 PANEL_RESIZER_BOTTOM.onPanelResize( _x, _y, _w, _h );
2477 GRID_CONTROL.onPanelResize( _x, _y );
2478 WHITE_GLASS_CONTROL.onPanelResize( _x, _y, _w, _h );
2479 PANEL_ELEMENT_CONTROL.onPanelResize( _x, _y, _w, _h, isResizerTopAction === true );
2481 onWindowResize: function( _windowW, _windowH ){
2482 PANEL_CONTROL.x = Math.floor( ( _windowW - PANEL_CONTROL.w ) / 2 );
2483 PANEL_CONTROL.y = Math.floor( ( _windowH - PANEL_CONTROL.h ) / 2 );
2484 PANEL_CONTROL.resize();
2486 mousemove: function( _mouseX, _mouseY ){
2487 if( isDraggable === true && isDragging === true ){
2488 PANEL_CONTROL.resize( false, startX + _mouseX - offsetX, startY + _mouseY - offsetY );
2491 mouseup: function( _mouseX, _mouseY ){
2492 if( isDraggable === true ){
2494 updateMouseCursor( '' );
2497 mousedown: function( _mouseX, _mouseY ){
2498 if( isDraggable === true ){
2501 startX = PANEL_CONTROL.x;
2502 startY = PANEL_CONTROL.y;
2504 updateMouseCursor( 'move' );
2509 return isDragging === true;
2515 /* --------------------------------------------------------------------------------------------
2518 var CONSOLE_CONTROLER = ( function(){
2519 var LAYER_BACK_BUTTON, LAYER_FORWARD_BUTTON, DELETE_BUTTON, EDIT_BUTTON, CHANGE_BUTTON,
2520 elmConsoleWrapper, styleConsoleWrapper,
2522 styleImgConsole, styleTextConsole,
2523 currentElement = null,
2526 imgConsoleWidth, imgConsoleHeight,
2527 textConsoleWidth, textConsoleHeight,
2529 buttonClickable = false;
2531 function buttonBackOrForward( isBack ){
2532 var offset = Util.getAbsolutePosition( elmConsoleWrapper );
2533 styleConsoleWrapper.position = isBack === true ? '' : 'absolute';
2534 styleConsoleWrapper.left = ( isBack === true ? CONSOLE_CONTROLER.x : offset.x ) + 'px';
2535 styleConsoleWrapper.top = ( isBack === true ? CONSOLE_CONTROLER.y : offset.y ) + 'px';
2536 buttonClickable === isBack && ( isBack === true ? elmConsoleParent : app.rootElement ).appendChild( elmConsoleWrapper );
2537 buttonClickable = !isBack;
2539 function layerBack(){
2540 if( currentElement === null) return;
2541 if( PANEL_ELEMENT_CONTROL.replace( currentElement, false ) === false ) return;
2542 INFOMATION_WINDOW.update( currentElement );
2543 HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.resplace, [ currentElement, true ], [ currentElement, false ] );
2544 var _z = currentElement.z;
2545 LAYER_BACK_BUTTON.visible( _z > 0 );
2546 LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1 );
2548 function layerForward(){
2549 if( currentElement === null) return;
2550 if( PANEL_ELEMENT_CONTROL.replace( currentElement, true ) === false) return;
2551 INFOMATION_WINDOW.update( currentElement);
2552 HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.replace, [ currentElement, false], [ currentElement, true ] );
2553 var _z = currentElement.z;
2554 LAYER_BACK_BUTTON.visible( _z > 0 );
2555 LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
2558 if( currentElement === null) return;
2559 buttonBackOrForward( true );
2560 HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ true, currentElement ], [ false, currentElement ], false ); // true
2561 PANEL_ELEMENT_CONTROL.remove( currentElement );
2562 PANEL_ELEMENT_OPERATION_MANAGER.hide();
2565 if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return;
2566 TextEditor.boot( PANEL_CONTROL.x, PANEL_CONTROL.y, currentElement );
2567 buttonBackOrForward( true );
2570 if( currentElement === null) return;
2571 buttonBackOrForward( true );
2572 PremiumSatge.boot( currentElement.getArtistID(), currentElement.resourcePicture );
2574 function onImageSelect( resourcePicture ){
2575 currentElement.resourcePicture( resourcePicture );
2583 app.addKeyEventListener( 'keydown', layerBack, 66, false, true );
2584 app.addKeyEventListener( 'keydown', layerForward, 70, false, true );
2585 app.addKeyEventListener( 'keydown', del, 68, false, true );
2586 app.addKeyEventListener( 'keydown', edit, 69, false, true );
2587 app.addKeyEventListener( 'keydown', change, 85, false, true );
2589 var elmImgConsole = document.getElementById( 'image-element-consol' ),
2590 imgConsoleSize = Util.getElementSize( elmImgConsole );
2591 imgConsoleWidth = imgConsoleSize.width;
2592 imgConsoleHeight = imgConsoleSize.height;
2593 styleImgConsole = elmImgConsole.style;
2594 elmImgConsole.style.display = 'none';
2596 var elmTextConsole = document.getElementById( 'text-element-consol' ),
2597 textConsoleSize = Util.getElementSize( elmTextConsole );
2598 textConsoleWidth = textConsoleSize.width;
2599 textConsoleHeight = textConsoleSize.height;
2600 styleTextConsole = elmTextConsole.style;
2601 styleTextConsole.display = 'none';
2603 elmConsoleWrapper = document.getElementById( 'comic-element-consol-wrapper' );
2604 styleConsoleWrapper = elmConsoleWrapper.style;
2605 elmConsoleParent = elmConsoleWrapper.parentNode;
2606 styleConsoleWrapper.display = 'none';
2608 app.addEventListener( document.getElementById( 'edit-text-button' ), 'click', edit );
2609 app.addEventListener( document.getElementById( 'delete-image-button' ), 'click', del );
2610 app.addEventListener( document.getElementById( 'delete-text-button' ), 'click', del );
2611 app.addEventListener( document.getElementById( 'change-image-button' ), 'click', change );
2612 app.addEventListener( document.getElementById( 'layer-forward-button' ), 'click', layerForward );
2613 app.addEventListener( document.getElementById( 'forward-text-button' ), 'click', layerForward );
2614 app.addEventListener( document.getElementById( 'layer-back-button' ), 'click', layerBack );
2615 app.addEventListener( document.getElementById( 'back-text-button' ), 'click', layerBack );
2617 delete CONSOLE_CONTROLER.init;
2620 LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createOption( 'layer back', 'ctrl + B', layerBack, false, true, false );
2621 LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createOption( 'layer forward', 'ctrl + F', layerForward, false, false, false );
2622 DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createOption( 'delete', 'ctrl + D', del, false, true, true );
2623 EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createOption( 'Edit Text', 'ctrl + E', edit, false, true, false );
2624 CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createOption( 'change', 'ctrl + U', change, false, false, true );
2626 delete CONSOLE_CONTROLER.open;
2628 show: function( _currentElement, _w, _h ){
2629 if( visible === false ) styleConsoleWrapper.display = '';
2631 currentElement = _currentElement;
2632 var _currentType = _currentElement.type,
2633 _z = _currentElement.z;
2634 if( currentType !== _currentType ){
2635 currentType = _currentType;
2636 styleImgConsole.display = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? '' : 'none';
2637 styleTextConsole.display = _currentType === PANEL_ELEMENT_TYPE_TEXT ? '' : 'none';
2638 CONSOLE_CONTROLER.w = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
2639 CONSOLE_CONTROLER.h = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
2641 CONSOLE_CONTROLER.x = Math.floor( ( _w - CONSOLE_CONTROLER.w ) / 2 );
2643 LAYER_BACK_BUTTON.visible( _z > 0 );
2644 LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
2645 DELETE_BUTTON.visible( true);
2646 EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT );
2647 CHANGE_BUTTON.visible( false);
2649 if( _w > CONSOLE_CONTROLER.w * 1.5 && _h > CONSOLE_CONTROLER.h * 1.5 ){
2650 CONSOLE_CONTROLER.y = Math.floor( ( _h - CONSOLE_CONTROLER.h ) / 2 );
2651 elmConsoleWrapper.className = '';
2653 CONSOLE_CONTROLER.y = _h + tailSize;
2654 elmConsoleWrapper.className = 'console-out';
2656 styleConsoleWrapper.left = CONSOLE_CONTROLER.x + 'px';
2657 styleConsoleWrapper.top = CONSOLE_CONTROLER.y + 'px';
2660 if( visible === true ) styleConsoleWrapper.display = 'none';
2662 currentElement = null;
2663 LAYER_BACK_BUTTON.visible( false);
2664 LAYER_FORWARD_BUTTON.visible( false);
2665 DELETE_BUTTON.visible( false);
2666 EDIT_BUTTON.visible( false);
2667 CHANGE_BUTTON.visible( false);
2669 mousemove: function( _mouseX, _mouseY ){
2670 if( CONSOLE_CONTROLER.x > _mouseX || CONSOLE_CONTROLER.y > _mouseY || CONSOLE_CONTROLER.x + CONSOLE_CONTROLER.w < _mouseX || CONSOLE_CONTROLER.y + CONSOLE_CONTROLER.h < _mouseY ){
2671 buttonClickable === true && buttonBackOrForward( true );
2674 buttonClickable === false && buttonBackOrForward( false );
2680 /* --------------------------------------------------------------------------------------------
2682 * - panelElementOperator
2684 var TAIL_OPERATOR = ( function(){
2691 DEG_TO_RAD = Math.PI / 180,
2692 RAD_TO_DEG = 1 / DEG_TO_RAD,
2696 balloonW, balloonH, balloonA, radA,
2702 var elm = document.getElementById( 'balloon-tail-mover' );
2703 SIZE = Util.getElementSize( elm ).width;
2704 styleMover = elm.style;
2705 delete TAIL_OPERATOR.init;
2707 update: function ( _w, _h, _a ){
2708 balloonW = _w !== undefined ? _w : balloonW;
2709 balloonH = _h !== undefined ? _h : balloonH;
2710 balloonA = _a !== undefined ? _a : balloonA;
2711 radA = ( balloonA - 90 ) * DEG_TO_RAD;
2712 tailX = FLOOR( ( ( COS( radA ) / 2 + 0.5 ) * ( balloonW + SIZE )) - SIZE / 2 );
2713 tailY = FLOOR( ( ( SIN( radA ) / 2 + 0.5 ) * ( balloonH + SIZE )) - SIZE / 2 );
2714 styleMover.left = tailX +'px';
2715 styleMover.top = tailY +'px';
2716 //log.html( [ balloonW, balloonH, balloonA].join());
2718 show: function( _currentText ){
2720 * visibilityのほうがいい, display:none だと ie で描画が狂う
2722 styleMover.visibility = '';
2723 TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.angle() );
2724 currentText = _currentText;
2726 hitTest: function( _mouseX, _mouseY ){
2727 var _x = tailX -SIZE / 2,
2728 _y = tailY -SIZE / 2;
2729 ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;
2730 ret === true && updateMouseCursor( 'move' );
2734 styleMover.visibility = 'hidden';
2737 onStart: function( _currentText, _mouseX, _mouseY ){
2738 if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false;
2741 if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true){
2744 currentText = _currentText;
2745 startA = _currentText.angle();
2750 onDrag: function( _mouseX, _mouseY ){
2751 _mouseX = _mouseX - x - w / 2;
2752 _mouseY = _mouseY - y - h / 2; //Balloonの中心を0,0とする座標系に変換
2753 TAIL_OPERATOR.update( w, h,
2755 ATAN( _mouseY / _mouseX ) * RAD_TO_DEG + ( _mouseX > 0 ? 90 : 270 ) :
2756 _mouseY > 0 ? 180 : 0
2758 currentText && currentText.angle( FLOOR( balloonA + 0.5 ));
2759 INFOMATION_WINDOW.update( currentText );
2761 onFinish: function(){
2762 startA !== currentText.angle() && PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA );
2763 startA !== currentText.angle() && PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle() );
2766 onCancel: function(){
2767 currentText.angle( startA);
2768 PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA );
2774 /* --------------------------------------------------------------------------------------------
2776 * - panelElementOperator
2778 var RESIZE_OPERATOR = ( function(){
2779 var HIT_AREA = MOUSE_HIT_AREA,
2780 POSITION_ARRAY = [],
2783 { cursor: 'n-resize', v: 3 },
2784 { cursor: 'e-resize', h: 2 },
2785 { cursor: 'e-resize', h: 1 },
2786 { cursor: 'n-resize', v: 0 },
2787 { cursor: 'nw-resize', h: 5, v: 6, vh: 7 },
2788 { cursor: 'ne-resize', h: 4, v: 7, vh: 6 },
2789 { cursor: 'ne-resize', h: 7, v: 4, vh: 5 },
2790 { cursor: 'nw-resize', h: 6, v: 5, vh: 4 }
2792 elmResizerContainer,
2793 elmResizerContainerStyle,
2795 elmResizerLeftStyle,
2796 elmResizerRightStyle,
2797 elmResizerBottomStyle,
2801 currentIsTextElement = false;
2803 var RESIZE_WORK_ARRAY = [
2804 { x: 0, w: 0, y: 1, h: -1}, //top
2805 { x: 1, w: -1, y: 0, h: 0}, //left
2806 { x: 0, w: 1, y: 0, h: 0}, //right
2807 { x: 0, w: 0, y: 0, h: 1}, //bottom
2808 { x: 1, w: -1, y: 1, h: -1}, //top-left
2809 { x: 0, w: 1, y: 1, h: -1}, //top-right
2810 { x: 1, w: -1, y: 0, h: 1}, //bottom-left
2811 { x: 0, w: 1, y: 0, h: 1} //bottom-right
2813 startX, startY, startW, startH, startFilpV, startFilpH, startAspect,
2814 baseX, baseY, baseW, baseH,
2815 currentX, currentY, currentW, currentH,
2819 function draw( _x, _y, _w, _h ){
2820 x = _x = _x !== undefined ? _x : x;
2821 y = _y = _y !== undefined ? _y : y;
2822 w = _w = _w !== undefined ? _w : w;
2823 h = _h = _h !== undefined ? _h : h;
2825 elmResizerContainerStyle.left = _x + 'px';
2826 elmResizerContainerStyle.top = _y + 'px';
2827 elmResizerContainerStyle.width = _w + 'px';
2828 elmResizerContainerStyle.height = _h + 'px';
2829 elmResizerTopStyle.left = elmResizerBottomStyle.left = FLOOR( _w / 2 - 5 ) + 'px';
2830 elmResizerLeftStyle.top = elmResizerRightStyle.top = FLOOR( _h / 2 - 5 ) + 'px';
2832 alert( [x, y, w, h].join( ','));
2836 POSITION_ARRAY.splice( 0, POSITION_ARRAY.length );
2837 POSITION_ARRAY.push(
2838 {x: _x +5, y: _y -HIT_AREA, w: _w -5 *2, h: HIT_AREA +5},
2839 {x: _x -HIT_AREA, y: _y +HIT_AREA +5, w: HIT_AREA +5, h: _h -5 *2},
2840 {x: _x + _w -5, y: _y +HIT_AREA +5, w: HIT_AREA +5, h: _h -5 *2},
2841 {x: _x +5, y: _y +_h -5, w: _w -5 *2, h: HIT_AREA +5},
2842 {x: _x -HIT_AREA, y: _y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},
2843 {x: _x + _w -HIT_AREA, y: _y -HIT_AREA, w: HIT_AREA +5, h: HIT_AREA +5},
2844 {x: _x -HIT_AREA, y: _y +_h -5, w: HIT_AREA +5, h: HIT_AREA +5},
2845 {x: _x +_w -5, y: _y +_h -5, w: HIT_AREA +5, h: HIT_AREA +5}
2849 function update( _x, _y, _w, _h ){
2851 _x = _x !== undefined ? _x : currentX;
2852 _y = _y !== undefined ? _y : currentY;
2853 _w = _w !== undefined ? _w : currentW;
2854 _h = _h !== undefined ? _h : currentH;
2856 if( currentIsTextElement === false && currentIndex > 3 && app.shiftEnabled() === true){
2857 if( startAspect >= 1 ){
2859 _w = FLOOR( startAspect * _h );
2860 _x = _x +( currentIndex % 2 === 0 ? __w - _w : 0);
2863 _h = FLOOR( _w / startAspect );
2864 _y = _y + ( currentIndex <= 5 ? __h - _h : 0);
2867 draw( x = _x, y = _y, w = _w, h = _h );
2868 currentElement.resize( _x, _y, _w, _h );
2869 currentIsTextElement === true && TAIL_OPERATOR.update( _w, _h );
2870 CONSOLE_CONTROLER.show( currentElement, _w, _h );
2871 INFOMATION_WINDOW.update( currentElement);
2874 function flip( _flipH, _flipV ){
2875 var p = CURSOR_AND_FLIP[ currentIndex ];
2876 currentIndex = _flipH === true || _flipV === true ? p[
2877 _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v' )
2879 updateMouseCursor( CURSOR_AND_FLIP[ currentIndex ].cursor );
2880 elmResizerContainer.className = 'current-resizer-is-' + currentIndex;
2881 currentElement.flip( _flipH, _flipV );
2885 elmResizerContainer = document.getElementById( 'comic-element-resizer-container');
2886 elmResizerContainerStyle = elmResizerContainer.style;
2887 elmResizerContainerStyle.display = 'none';
2889 elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style;
2890 elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style;
2891 elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style;
2892 elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style;
2894 delete RESIZE_OPERATOR.init;
2897 index: function( _mouseX, _mouseY ){
2899 for( i=4; i<8; i++ ){
2900 p = POSITION_ARRAY[ i ];
2901 if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY ){
2902 updateMouseCursor( CURSOR_AND_FLIP[ i].cursor);
2903 elmResizerContainer.className = 'current-resizer-is-' +i;
2904 return currentIndex = i;
2907 for( i=0; i<4; i++ ){
2908 p = POSITION_ARRAY[ i ];
2909 if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
2910 updateMouseCursor( CURSOR_AND_FLIP[ i].cursor);
2911 elmResizerContainer.className = 'current-resizer-is-' +i;
2912 return currentIndex = i;
2915 updateMouseCursor( '' );
2916 elmResizerContainer.className = '';
2919 show: function( _currentElement ){
2920 currentElement = _currentElement;
2921 currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
2922 elmResizerContainerStyle.display = '';
2925 currentElement = null;
2926 elmResizerContainerStyle.display = 'none';
2928 onStart: function( _currentElement, _mouseX, _mouseY ){
2929 currentElement = _currentElement;
2930 currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
2931 if( _currentElement.keepSize === true) return false;
2932 currentIndex = this.index( _mouseX, _mouseY);
2933 if( currentIndex === -1) return false;
2936 startX = baseX = _currentElement.x;
2937 startY = baseY = _currentElement.y;
2938 startW = baseW = _currentElement.w;
2939 startH = baseH = _currentElement.h;
2940 if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){
2941 startFilpV = _currentElement.flipV();
2942 startFilpH = _currentElement.flipH();
2944 startAspect = startW /startH;
2947 onDrag: function( _mouseX, _mouseY ){
2948 var com = RESIZE_WORK_ARRAY[ currentIndex],
2949 moveX = _mouseX -offsetX,
2950 moveY = _mouseY -offsetY,
2951 _updated = moveX !== 0 || moveY !== 0,
2960 * Opera 11+ often forget values, why ??
2962 while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){
2963 _x = _x !== undefined ? _x : baseX +moveX *com.x;
2964 _y = _y !== undefined ? _y : baseY +moveY *com.y;
2965 _w = _w !== undefined ? _w : baseW +moveX *com.w;
2966 _h = _h !== undefined ? _h : baseH +moveY *com.h;
2967 error += _thisError === 0 ? 0 : 1;
2969 if( _thisError > 9999 ){
2971 //alert( 'opera error' +error);
2977 if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){
2980 if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){
2982 if( _w < MIN_ELEMENT_SIZE){
2983 //_x += Math.abs( MIN_ELEMENT_SIZE -_w);
2985 _w = MIN_ELEMENT_SIZE;
2987 if( _h < MIN_ELEMENT_SIZE){
2988 //_y += Math.abs( MIN_ELEMENT_SIZE -_h);
2990 _h = MIN_ELEMENT_SIZE;
2993 if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){
2996 if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){
2998 if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){
3001 baseX = _x = _x +_w;
3003 baseW = _w = _memoryX -_x;
3006 flipV = currentElement.flipV();
3008 if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){
3012 baseY = _y = _y +_h;
3014 baseH = _h = _memoryY -_y;
3016 flipH = currentElement.flipH();
3021 baseX = _x = _x +_w;
3022 baseY = _y = _y +_h;
3023 baseW = _w = _memoryX -_x;
3024 baseH = _h = _memoryY -_y;
3026 flipV = currentElement.flipV();
3027 flipH = currentElement.flipH();
3037 _updated === true && update( _x, _y, _w, _h );
3040 'currentIndex:', currentIndex,
3041 'baseW', baseW, 'baseH', baseH,'<br>',
3042 'mouse', _mouseX, _mouseY,'<br>',
3043 'move', moveX, moveY,'<br>',
3044 'xy', _x, _y, 'wh',_w, _h,'<br>',
3045 'com.w', com.w, 'com.h', com.h,'<br>',
3046 'current',currentW, currentH,'<br>',
3051 onFinish: function(){
3052 updateMouseCursor( '');
3053 if( w === startW && h === startH && x === startX && y === startY ) return;
3054 PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h );
3055 currentElement.resize( x, y, w, h);
3056 PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH );
3058 onCancel: function(){
3059 updateMouseCursor( '');
3060 PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH );
3061 currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
3062 currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
3063 currentElement.animate( startX, startY, startW, startH, angle);
3065 onShiftUpdate: update,
3066 onCtrlUpdate: update
3070 /* --------------------------------------------------------------------------------------------
3072 * - panelElementOperator
3074 var POSITION_OPERATOR = ( function(){
3080 function update( _x, _y ){
3081 x = _x !== undefined ? _x : x;
3082 y = _y !== undefined ? _y : y;
3083 RESIZE_OPERATOR.update( x, y );
3084 currentElement.resize( x, y );
3085 INFOMATION_WINDOW.update( currentElement );
3089 delete POSITION_OPERATOR.init;
3091 onStart: function( _currentElement, _mouseX, _mouseY ){
3092 currentElement = _currentElement;
3095 startX = x = _currentElement.x;
3096 startY = y = _currentElement.y;
3097 updateMouseCursor( 'move' );
3099 onDrag: function( _mouseX, _mouseY ){
3100 var moveX = _mouseX - offsetX,
3101 moveY = _mouseY - offsetY,
3102 _x = startX + moveX,
3103 _y = startY + moveY;
3104 if( GRID_CONTROL.enabled() === true ){
3105 _x = Math.floor( _x / 10 ) * 10;
3106 _y = Math.floor( _y / 10 ) * 10;
3110 onFinish: function(){
3111 updateMouseCursor( '' );
3112 if( x === startX && y === startY ) return;
3113 PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y );
3114 currentElement.resize( x, y );
3115 PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY );
3117 onCancel: function(){
3118 updateMouseCursor( '' );
3119 PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY );
3120 currentElement.animate( startX, startY );
3122 onShiftUpdate: update,
3123 onCtrlUpdate: update
3128 /* --------------------------------------------------------------------------------------------
3129 * PANEL_ELEMENT_OPERATION_MANAGER
3131 var PANEL_ELEMENT_OPERATION_MANAGER = ( function(){
3132 var HIT_AREA = MOUSE_HIT_AREA,
3133 currentIsTextElement = false,
3134 currentOperator = null,
3135 currentElement = null,
3136 currentX, currentY, currentW, currentH, angle, flipV, flipH;
3138 function show( _currentElement ){
3139 currentElement === null && RESIZE_OPERATOR.show( _currentElement );
3140 if( currentElement !== _currentElement ){
3141 currentElement = _currentElement;
3143 currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT );
3144 currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement ) : TAIL_OPERATOR.hide();
3146 flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;
3147 flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;
3149 PANEL_ELEMENT_OPERATION_MANAGER.resize(
3150 _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,
3151 currentIsTextElement === true ? _currentElement.angle() : 0
3158 TAIL_OPERATOR.init();
3159 RESIZE_OPERATOR.init();
3160 POSITION_OPERATOR.init();
3162 app.addKeyEventListener( 'keychange', function( e ){
3163 currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();
3166 app.addKeyEventListener( 'keychange', function( e ){
3167 currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();
3170 app.addKeyEventListener( 'keydown', function( e ){
3171 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
3172 currentOperator = null;
3174 }, 27, false, false );
3176 delete PANEL_ELEMENT_OPERATION_MANAGER.init;
3179 PANEL_ELEMENT_OPERATION_MANAGER.hide();
3181 delete PANEL_ELEMENT_OPERATION_MANAGER.open;
3187 currentElement !== null && RESIZE_OPERATOR.hide();
3188 currentElement = null;
3189 updateMouseCursor( '' );
3190 TAIL_OPERATOR.hide();
3191 CONSOLE_CONTROLER.hide();
3192 INFOMATION_WINDOW.update( null );
3194 resize: function( _x, _y, _w, _h, _angle ){
3195 currentX = _x = _x !== undefined ? _x : currentX;
3196 currentY = _y = _y !== undefined ? _y : currentY;
3197 currentW = _w = _w !== undefined ? _w : currentW;
3198 currentH = _h = _h !== undefined ? _h : currentH;
3199 angle = _angle = _angle !== undefined ? _angle : angle;
3201 RESIZE_OPERATOR.update( _x, _y, _w, _h );
3202 currentIsTextElement === true && TAIL_OPERATOR.update( _w, _h, angle );
3203 CONSOLE_CONTROLER.show( currentElement, _w, _h );
3204 INFOMATION_WINDOW.update( currentElement );
3207 restoreState: function( _currentElement, _x, _y, _w, _h, _a, _flipV, _flipH ){
3208 if( arguments.length !== 8 ) return;
3209 if( !_currentElement && !currentOperator ) return;
3210 _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
3211 _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH ) :
3212 _currentElement.animate( _x, _y, _w, _h, _a );
3213 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
3214 currentOperator = null;
3215 currentElement === _currentElement ? PANEL_ELEMENT_OPERATION_MANAGER.resize( _x, _y, _w, _h, _a ) : show( _currentElement );
3217 saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH ){
3218 startX = startX !== undefined ? startX : currentX;
3219 startY = startY !== undefined ? startY : currentY;
3220 startW = startW !== undefined ? startW : currentW;
3221 startH = startH !== undefined ? startH : currentH;
3222 startA = startA !== undefined ? startA : angle;
3223 startFilpV = startFilpV !== undefined ? startFilpV : flipV;
3224 startFilpH = startFilpH !== undefined ? startFilpH : flipH;
3225 currentElement && HISTORY_CONTROL.saveState( PANEL_ELEMENT_OPERATION_MANAGER.restoreState,
3226 [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],
3227 [ currentElement, currentX, currentY, currentW, currentH, angle, flipV, flipH]
3231 return currentOperator !== null;
3233 hitTest: function( _mouseX, _mouseY, _panelElement ){
3235 if( _panelElement === currentElement ){
3236 var _consoleX = CONSOLE_CONTROLER.x;
3237 _x = currentX +( _consoleX < 0 ? _consoleX : 0 ) - HIT_AREA;
3238 _y = currentY - HIT_AREA;
3239 var _consoleW = CONSOLE_CONTROLER.w;
3240 _w = ( _consoleW < currentW ? currentW : _consoleW ) + HIT_AREA * 2;
3241 var _consoleY = CONSOLE_CONTROLER.y;
3242 _h = ( _consoleY < currentH ? currentH : _consoleY + CONSOLE_CONTROLER.h ) + HIT_AREA * 2;
3244 _x = _panelElement.x - HIT_AREA;
3245 _y = _panelElement.y - HIT_AREA;
3246 _w = _panelElement.w + HIT_AREA *2;
3247 _h = _panelElement.h + HIT_AREA *2;
3249 return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;
3251 mousedown: function( _currentElement, _mouseX, _mouseY ){
3252 //show( _currentElement);
3253 if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
3254 currentOperator = TAIL_OPERATOR;
3256 if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
3257 currentOperator = RESIZE_OPERATOR;
3259 POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)
3260 currentOperator = POSITION_OPERATOR;
3263 mousemove: function( _currentElement, _mouseX, _mouseY ){
3264 show( _currentElement);
3265 if( currentOperator !== null){
3266 currentOperator.onDrag( _mouseX, _mouseY );
3268 if( currentElement !== null){
3269 CONSOLE_CONTROLER.mousemove( _mouseX - currentX, _mouseY - currentY );
3270 if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentX, _mouseY -currentY) === false){
3271 RESIZE_OPERATOR.index( _mouseX, _mouseY);
3275 mouseup: function( _currentElement, _mouseX, _mouseY ){
3276 currentOperator !== null && currentOperator.onFinish();
3277 currentOperator = null;
3282 * // PANEL_ELEMENT_OPERATION_MANAGER
3285 var AbstractPanelElement = function( COMIC_ELM_TYPE ){
3286 this.type = COMIC_ELM_TYPE;
3287 this.hitTest = function( _mouseX, _mouseY ){
3288 return PANEL_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this );
3290 this.shift = function( _shiftX, _shiftY ){
3291 this.resize( this.x + _shiftX, this.y + _shiftY);
3293 this.busy = function(){
3294 return PANEL_ELEMENT_OPERATION_MANAGER.busy();
3296 this.mousemove = function( _mouseX, _mouseY ){
3297 PANEL_ELEMENT_OPERATION_MANAGER.mousemove( this, _mouseX, _mouseY );
3299 this.mouseup = function( _mouseX, _mouseY ){
3300 PANEL_ELEMENT_OPERATION_MANAGER.mouseup( this, _mouseX, _mouseY );
3302 this.mousedown = function( _mouseX, _mouseY ){
3303 PANEL_ELEMENT_OPERATION_MANAGER.mousedown( this, _mouseX, _mouseY );
3307 /* --------------------------------------------------------------------------------------------
3310 var jqImageElementOrigin;
3311 var ImageElementClass = function( data ){
3312 jqImageElementOrigin = jqImageElementOrigin || $( app.fetchHTMLElement( 'imgElementTemplete' ) );
3314 var jqWrap = jqImageElementOrigin.clone( true ),
3315 flipH = data.width < 0 ? -1 : 1,
3316 flipV = data.height < 0 ? -1 : 1,
3317 resourcePicture = data.resource_picture,
3318 actualW = data.resource_picture.width,
3319 actualH = data.resource_picture.height,
3320 reversibleImage = null,
3323 function flipReversibleImage(){
3324 reversibleImage && reversibleImage.resize( flipH * w, flipV * h );
3327 function updateResourcePicture( _resourcePicture ){
3328 resourcePicture = _resourcePicture;
3330 actualW = _resourcePicture.width;
3331 actualH = _resourcePicture.height;
3333 var _reversibleImage = pettanr.image.createReversibleImage(
3334 [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),
3335 flipH * w, flipV * h
3337 if( reversibleImage !== null ){
3338 jqWrap.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );
3339 reversibleImage.destroy();
3341 jqWrap.append( _reversibleImage.elm );
3343 reversibleImage = _reversibleImage;
3345 /* global methods */
3352 this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
3353 this.keepSize = false;
3354 this.init = function(){
3355 updateResourcePicture( data.resource_picture );
3356 self.resize( data.x, data.y, Math.abs( data.width ), Math.abs( data.height ) );
3359 this.flip = function( _updateH, _updateV ){
3360 if( _updateH !== true && _updateV !== true ) return;
3361 flipH = _updateH === true ? -flipH : flipH;
3362 flipV = _updateV === true ? -flipV : flipV;
3363 reversibleImage.resize( flipH * w, flipV * h );
3365 this.flipV = function(){ return flipV;}
3366 this.flipH = function(){ return flipH;}
3367 this.resourcePicture = function( _resourcePicture ){
3368 if( _resourcePicture && _resourcePicture !== resourcePicture ){
3369 HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture );
3370 updateResourcePicture( _resourcePicture );
3372 return resourcePicture;
3374 this.getArtistID = function(){
3375 return resourcePicture.artist_id || resourcePicture.artist.id || -1;
3377 this.actualW = function(){ return actualW;}
3378 this.actualH = function(){ return actualH;}
3379 this.resize = function( _x, _y, _w, _h, animate ){
3380 self.x = x = Type.isFinite( _x ) === true ? _x : x;
3381 self.y = y = Type.isFinite( _y ) === true ? _y : y;
3382 self.w = w = Type.isFinite( _w ) === true ? _w : w;
3383 self.h = h = Type.isFinite( _h ) === true ? _h : h;
3384 jqWrap[ animate === true ? 'animate' : 'css' ]( {
3389 }, 250, flipReversibleImage );
3390 animate !== true && flipReversibleImage();
3392 this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){
3393 flipH = _flipH !== undefined ? _flipH : flipH;
3394 flipV = _flipV !== undefined ? _flipV : flipV;
3395 self.resize( _x, _y, _w, _h, true );
3397 this.destroy = function(){
3398 delete self.destroy;
3400 reversibleImage.destroy();
3401 jqWrap.stop().remove();
3402 jqWrap = reversibleImage = resourcePicture = data = self = null;
3405 ImageElementClass.prototype = new AbstractPanelElement( PANEL_ELEMENT_TYPE_IMAGE );
3407 * / ImageElementClass
3408 * --------------------------------------------------------------------------------------------
3412 /* --------------------------------------------------------------------------------------------
3420 * 4.black-box( dq style)
3421 * 5.blue-box( ff style)
3424 var jqTextElementOrigin;
3425 var TextElementClass = function( data ){
3426 jqTextElementOrigin = jqTextElementOrigin || ( function(){
3427 var _OLD_IE = $( app.fetchHTMLElement( 'textElementTempleteForOldIE' ) ),
3428 _MODERN = $( app.fetchHTMLElement( 'textElementTemplete' ) );
3429 return UA.isIE === true && UA.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;
3432 var JQ_WRAPPER = jqTextElementOrigin.clone( true ),
3433 elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ),
3434 type = data.balloon_template_id,
3435 text = ( function(){
3436 var _speachs = data.speeches_attributes;
3437 for( var k in _speachs ){
3438 return _speachs[ k ].content || '';
3442 balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),
3446 JQ_WRAPPER.find( 'img' ).eq( 0 ).replaceWith( balloon.elm );
3448 function updateType( _type ){
3449 if( type !== _type ){
3450 type = _type || type;
3451 balloon.type( type );
3454 function updateAngle( _a ){
3455 if( _a !== undefined && a !== _a ){
3456 a = _a !== undefined ? _a : a;
3461 function updateText( _text ){
3462 text = _text || text || '';
3463 elmText.firstChild.data = text;
3465 function resizeBalloon(){
3466 balloon && balloon.resize( a, w, h );
3469 /* global methods */
3470 this.$ = JQ_WRAPPER;
3476 this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
3477 this.init = function(){
3479 self.resize( data.x, data.y, data.width, data.height, data.tail );
3482 this.angle = function( _a ){
3483 _a !== undefined && self.resize( x, y, w, h, _a );
3486 this.text = function( _text ){
3487 if( _text && text !== _text) {
3488 HISTORY_CONTROL.saveState( updateText, text || '', _text );
3489 updateText( _text );
3493 this.resize = function( _x, _y, _w, _h, _a, animate ){
3494 self.x = x = _x !== undefined ? _x : x;
3495 self.y = y = _y !== undefined ? _y : y;
3496 self.w = w = _w !== undefined ? _w : w;
3497 self.h = h = _h !== undefined ? _h : h;
3498 a = _a !== undefined ? _a : a;
3500 JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {
3505 }, 250, resizeBalloon
3507 animate !== true && resizeBalloon();
3509 this.animate = function ( _x, _y, _w, _h, _a ){
3510 self.resize( _x, _y, _w, _h, _a, true );
3512 this.destroy = function(){
3513 delete self.destroy;
3515 JQ_WRAPPER.stop().remove();
3517 JQ_WRAPPER = elmText = data = balloon = self = null;
3520 TextElementClass.prototype = new AbstractPanelElement( PANEL_ELEMENT_TYPE_TEXT );
3522 /* --------------------------------------------------------------------------------------------
3523 * PANEL_ELEMENT_CONTROL
3524 * - mouseEventListener
3526 var PANEL_ELEMENT_CONTROL = ( function(){
3528 currentElement = null,
3529 panelX, panelY, panelW, panelH,
3532 * append, remove, replace
3534 * panelElement には、z-position と dom-index がある。
3535 * z-position は 表示上の位置。大きいほど前に表示される( z-index)
3536 * dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。
3538 * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。
3539 * dom-index は、数値のみ保持して、投稿時にpanelElementを適宜に並び替える。
3541 * append panelElement
3542 * 1. 新しい panelElement の z-position を得る
3543 * 2. z の同じ panelElementを見つけ、その前に加える。または一番先頭へ。(PANEL_ELEMENT_ARRAY)
3544 * zが大きいほど、PANEL_ELEMENT_ARRAYの先頭へ。
3545 * 3. dom位置は、PANEL_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。
3548 * remove panelElement
3552 function appendPanelElement( _panelElement ) {
3553 var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1,
3554 l = PANEL_ELEMENT_ARRAY.length,
3555 _jqElm = _panelElement.$.stop().css( {
3560 PANEL_ELEMENT_ARRAY.unshift( _panelElement );
3562 for( var i = 0; i < l; ++i ){
3563 if( PANEL_ELEMENT_ARRAY[ i ].z < z ) break;
3566 PANEL_ELEMENT_ARRAY.push( _panelElement );
3568 PANEL_ELEMENT_ARRAY.splice( i, 0, _panelElement );
3575 function onFadeOut(){
3576 this.parentNode.removeChild( this );
3579 * PANEL_ELEMENT_ARRAY の順番を基準に、zの再計算
3582 function renumber(){
3583 var _panelElement, jqElm, jqNext;
3584 for( var i = 0, l = PANEL_ELEMENT_ARRAY.length; i < l; ++i ){
3585 _panelElement = PANEL_ELEMENT_ARRAY[ i ];
3586 jqElm = _panelElement.$;
3587 i === 0 && elmContainer.appendChild( jqElm.get( 0 ) );
3588 jqNext && jqNext.before( jqElm );
3589 if( phase === 1 ) _panelElement.z = l - i - 1;
3593 function onTextInput( _panelElement ){
3594 appendPanelElement( _panelElement );
3595 HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement ], [ true, _panelElement ], true );
3600 elmContainer = document.getElementById( 'comic-element-container' );
3601 delete PANEL_ELEMENT_CONTROL.init;
3608 while( PANEL_ELEMENT_ARRAY.length > 0 ){
3609 _comicElm = PANEL_ELEMENT_ARRAY.shift();
3610 _comicElm.destroy && _comicElm.destroy();
3613 remove: function( _panelElement ){
3614 var l = PANEL_ELEMENT_ARRAY.length;
3615 for( var i=0; i<l; ++i ){
3616 if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){
3617 PANEL_ELEMENT_ARRAY.splice( i, 1 );
3619 _panelElement.$.stop().css( {
3622 }).fadeOut( onFadeOut );
3623 if( currentElement === _panelElement ) currentElement = null;
3629 restore: function( isAppend, panelElement ){
3630 isAppend === true ? appendPanelElement( panelElement ) : PANEL_ELEMENT_CONTROL.remove( panelElement );
3632 replace: function( _panelElement, goForward ){
3633 // PANEL_ELEMENT_ARRAYの再構築
3634 var l = PANEL_ELEMENT_ARRAY.length,
3636 for( var j = 0; j < l; ++j ){
3637 if( PANEL_ELEMENT_ARRAY[ j ] === _panelElement ){
3642 if( i === -1) return false;
3643 if( goForward === true ){
3644 if( i === 0 ) return false;
3645 PANEL_ELEMENT_ARRAY.splice( i, 1 );
3646 PANEL_ELEMENT_ARRAY.splice( i - 1, 0, _panelElement );
3648 if( i === l - 1 ) return false;
3649 PANEL_ELEMENT_ARRAY.splice( i, 1 );
3650 PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );
3655 onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ){
3657 * リサイズが、ResizerTopによって行われた場合、panelElementのyを動かして見かけ上動かないようにする。
3659 if( isResizerTopAction === true ){
3660 var _shiftX = _panelW - panelW,
3661 _shiftY = _panelH - panelH;
3662 for( var i = PANEL_ELEMENT_ARRAY.length; i; ){
3663 PANEL_ELEMENT_ARRAY[ --i ].shift( _shiftX, _shiftY );
3666 elmContainer.style.cssText = [
3667 'width:', panelW = _panelW, 'px;',
3668 'height:', panelH = _panelH, 'px;',
3669 'left:', panelX = _panelX, 'px;',
3670 'top:', panelY = _panelY, 'px'
3673 mousemove: function( _mouseX, _mouseY ){
3674 var l = PANEL_ELEMENT_ARRAY.length,
3675 _x = _mouseX - panelX,
3676 _y = _mouseY - panelY,
3677 _elm = currentElement;
3679 if( _elm !== null ){
3680 if( _elm.busy() === true ){
3681 _elm.mousemove( _x, _y );
3684 if( _elm.hitTest( _x, _y ) === true ){
3685 _elm.mousemove( _x, _y ); // cursor
3689 for( var i=0; i<l; ++i ){
3690 _elm = PANEL_ELEMENT_ARRAY[ i ];
3692 if( _elm.hitTest( _x, _y ) === true ){
3693 _elm.mousemove( _x, _y ); // cursor
3694 currentElement = _elm;
3698 currentElement = null;
3699 PANEL_ELEMENT_OPERATION_MANAGER.hide();
3702 mouseup: function( _mouseX, _mouseY ){
3703 var ret = currentElement !== null && currentElement.busy() === true;
3704 ret === true && currentElement.mouseup( _mouseX -startX || panelX, _mouseY -startY || panelY );
3707 mousedown: function( _mouseX, _mouseY ){
3710 if( currentElement === null) return false
3711 currentElement.mousedown( _mouseX -startX, _mouseY -startY);
3715 return currentElement !== null;
3717 createImageElement: function( data ){
3718 if( Type.isObject( data ) === false ){
3719 PremiumSatge.boot( 1, PANEL_ELEMENT_CONTROL.onImageSelect );
3721 PANEL_ELEMENT_CONTROL.onImageSelect( data, true );
3724 onImageSelect: function( data, isPanelPictureData ){
3726 if( isPanelPictureData !== true ){
3727 _panelElement = new ImageElementClass( {
3728 resource_picture:data,
3729 x: Math.floor( panelW / 2 - data.width / 2 ),
3730 y: Math.floor( panelH / 2 - data.height / 2 ),
3732 t: PANEL_ELEMENT_ARRAY.length + 1,
3736 _panelElement.init();
3737 appendPanelElement( _panelElement );
3738 _panelElement.animate( undefined, undefined, Math.abs( data.width ), Math.abs( data.height ) );
3740 _panelElement = new ImageElementClass( data );
3741 _panelElement.init();
3742 appendPanelElement( _panelElement );
3744 HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement], [ true, _panelElement ], true );
3746 createTextElement: function( data ){
3748 if( Type.isObject( data ) === false ){
3750 balloon_template_id:1,
3753 x: Math.floor( panelW / 2 - 100 + Math.random() * 10 ),
3754 y: Math.floor( panelH / 2 - 100 + Math.random() * 10 ),
3756 t: PANEL_ELEMENT_ARRAY.length + 1,
3759 speeches_attributes: {
3765 _panelElement = new TextElementClass( data );
3766 _panelElement.init();
3767 TextEditor.boot( PANEL_CONTROL.x, PANEL_CONTROL.y, _panelElement, onTextInput );
3769 _panelElement = new TextElementClass( data );
3770 _panelElement.init();
3771 onTextInput( _panelElement );
3778 * end of PANEL_ELEMENT_CONTROL
3781 function updateMouseCursor( _cursor ){
3782 if( currentCursor !== _cursor ){
3783 currentCursor = _cursor;
3784 app.addAsyncCall( update );
3787 elmMouseEventChatcher.style.cursor = currentCursor;
3790 function centering(){
3791 app.onPaneResize( windowW, windowH );
3793 function mouseEventRellay( e ){
3794 var _mouseX = e.clientX,
3795 _mouseY = e.clientY,
3796 rellayMethod = e.type === 'mouseout' ? 'mouseup' : e.type;
3797 if( currentListener !== null && currentListener.busy() === true ){
3798 currentListener[ rellayMethod ]( _mouseX, _mouseY );
3800 currentListener = null;
3801 var l = MOUSE_LISTENER_ARRAY.length,
3803 for( var i=0; i<l; ++i ){
3804 _listener = MOUSE_LISTENER_ARRAY[ i ];
3805 if( _listener[ rellayMethod ]( _mouseX, _mouseY ) === true ){
3806 currentListener = _listener;
3812 //!document.selection && window.getSelection().removeAllRanges();
3818 this.MIN_WIDTH = 320;
3819 this.MIN_HEIGHT = 320;
3820 this.onInit = function(){
3821 app.rootElement.id = 'editor';
3822 app.rootElement.innerHTML = [
3823 '<div id="grid" style="display:none;"></div>',
3824 '<div id="comic-element-container"></div>',
3825 '<div id="whiteGlass-container">',
3826 '<div id="whiteGlass-top"></div>',
3827 '<div id="whiteGlass-left"></div>',
3828 '<div id="whiteGlass-right"></div>',
3829 '<div id="whiteGlass-bottom"></div>',
3831 '<div id="panel-tools-container">',
3832 '<div id="panel-resizer-top">▲</div>',
3833 '<div id="panel-resizer-bottom">▼</div>',
3834 '<div id="comic-element-resizer-container">',
3835 '<div class="comic-element-resizer" id="comic-element-resizer-top"></div>',
3836 '<div class="comic-element-resizer" id="comic-element-resizer-left"></div>',
3837 '<div class="comic-element-resizer" id="comic-element-resizer-right"></div>',
3838 '<div class="comic-element-resizer" id="comic-element-resizer-bottom"></div>',
3839 '<div class="comic-element-resizer" id="comic-element-resizer-top-left"></div>',
3840 '<div class="comic-element-resizer" id="comic-element-resizer-top-right"></div>',
3841 '<div class="comic-element-resizer" id="comic-element-resizer-bottom-left"></div>',
3842 '<div class="comic-element-resizer" id="comic-element-resizer-bottom-right"></div>',
3843 '<div id="balloon-tail-mover"></div>',
3844 '<div id="comic-element-consol-wrapper">',
3845 '<div id="comic-element-consol-tail"></div>',
3846 '<div id="comic-element-consol-wrapper-when-out">',
3847 '<div id="image-element-consol">',
3848 '<div id="change-image-button"></div>',
3849 '<div id="layer-back-button"></div>',
3850 '<div id="delete-image-button"></div>',
3851 '<div id="layer-forward-button"></div>',
3853 '<div id="text-element-consol">',
3854 '<div id="edit-text-button"></div>',
3855 '<div id="change-text-style-button"></div>',
3856 '<div id="back-text-button"></div>',
3857 '<div id="delete-text-button"></div>',
3858 '<div id="hide-text-tail-button"></div>',
3859 '<div id="forward-text-button"></div>',
3865 '<div id="window-container"></div>',
3866 '<div id="menu-bar"></div>',
3867 '<div id="mouse-operation-catcher" unselectable="on"></div>',
3869 '<div id="templete-container" style="display: none;">',
3871 '<div id="imgElementTemplete" class="comic-element-wrapper image-element"></div>',
3873 '<div id="textElementTemplete" class="comic-element-wrapper text-element">',
3875 '<div class="speach">',
3876 '<div class="speach-inner"> </div>',
3880 '<div id="textElementTempleteForOldIE" class="comic-element-wrapper text-element">',
3882 '<div class="speach">',
3883 '<table><tr><td> </td></tr></table>',
3887 '<div id="imageGroupItemTemplete" class="image-group-item">',
3888 '<div class="image-group-item-title">img-title</div>',
3891 '<div id="windowTemplete" class="window-wrapper">',
3892 '<div class="window-header">window title</div>',
3893 '<div class="window-close-button">x</div>',
3894 '<div class="window-body clearfix">',
3895 '<div class="window-body-insert-position"></div>',
3897 '<div class="window-footer">',
3898 '<div class="window-resize-button">/</div>',
3902 '<div id="infomation-window">',
3903 '<div id="panel-background-information">',
3904 '<div id="bg-pattern"></div>',
3905 '<div id="select-bg-pattern-button">pattern</div>',
3906 '<div id="reset-bg-pattern-button">x</div>',
3907 '<div id="bg-color"></div>',
3908 '<div id="select-bg-color-button">color</div>',
3909 '<div id="reset-bg-color-button">x</div>',
3910 '<!-- <div id="bg-pattern-x"></div>',
3911 '<div id="bg-pattern-y"></div>',
3912 '<div id="bg-pattern-repeat-x"></div>',
3913 '<div id="bg-pattern-repeat-y"></div> -->',
3916 '<div id="comic-element-infomation">',
3917 '<div id="comic-element-x">',
3918 '<span class="comic-element-attribute-label">x:</span>',
3919 '<span id="comic-element-x-value" class="comic-element-attribute-value editable-value">0</span>',
3921 '<div id="comic-element-y">',
3922 '<span class="comic-element-attribute-label">y:</span>',
3923 '<span id="comic-element-y-value" class="comic-element-attribute-value editable-value">0</span>',
3925 '<div id="comic-element-z">',
3926 '<span class="comic-element-attribute-label">z:</span>',
3927 '<span id="comic-element-z-value" class="comic-element-attribute-value editable-value">0</span>',
3929 '<div id="comic-element-a">',
3930 '<span id="comic-element-a-value" class="comic-element-attribute-value editable-value">0</span>',
3931 '<span class="comic-element-attribute-label">°</span>',
3933 '<div id="comic-element-w">',
3934 '<span class="comic-element-attribute-label">w:</span>',
3935 '<span id="comic-element-w-value" class="comic-element-attribute-value editable-value">0</span>',
3937 '<div id="comic-element-h">',
3938 '<span class="comic-element-attribute-label">h:</span>',
3939 '<span id="comic-element-h-value" class="comic-element-attribute-value editable-value">0</span>',
3941 '<div id="comic-element-w-percent">',
3942 '<span id="comic-element-w-percent-value" class="comic-element-attribute-value editable-value">0</span>',
3943 '<span class="comic-element-attribute-label">%</span>',
3945 '<div id="comic-element-h-percent">',
3946 '<span id="comic-element-h-percent-value" class="comic-element-attribute-value editable-value">0</span>',
3947 '<span class="comic-element-attribute-label">%</span>',
3949 '<div id="comic-element-keep-aspect"></div>',
3953 '<div id="toolbox-window">',
3954 '<div id="toolbox-add-image-button">add image</div>',
3955 '<div id="toolbox-add-text-button">add text</div>',
3956 '<div id="toolbox-edit-bg-button">edit bg</div>',
3957 '<div id="toolbox-switch-grid">grid</div>',
3958 '<div id="toolbox-popup-help-button">?</div>',
3959 '<div id="toolbox-post-button">post</div>',
3962 '<div id="image-exproler"><div id="image-exproler-container"></div></div>',
3967 app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
3971 this.onOpen = function( _w, _h, _file ){
3972 elmMouseEventChatcher = document.getElementById( 'mouse-operation-catcher' );
3974 MENU_BAR_CONTROL.init();
3975 HISTORY_CONTROL.init();
3976 SAVE_CONTROL.init();
3977 WINDOWS_CONTROL.init();
3978 GRID_CONTROL.init();
3979 WHITE_GLASS_CONTROL.init();
3980 PANEL_CONTROL.init();
3981 CONSOLE_CONTROLER.init();
3982 PANEL_ELEMENT_OPERATION_MANAGER.init();
3983 PANEL_ELEMENT_CONTROL.init();
3986 * MOUSE_LISTENER_ARRAY は、表示順に格納.手前の要素が最初
3989 * PANEL_ELEMENT_CONTROL,
3991 * .busy() === true なら、そのままmousemove()にイベントを流す.
3992 * mousemove()に流してみて、false が帰れば、次のリスナーにも流す.
3994 MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, PANEL_ELEMENT_CONTROL, PANEL_CONTROL );
4003 fileData, panelElements, panelElm;
4005 if( FileAPI.isFileInstance( _file ) === true ){
4006 if( Driver.isPettanrFileInstance( _file ) === true ){
4007 if( _file.getType() === FILE_TYPE.COMIC ){
4008 fileData = _file.read();
4009 panelW = fileData.width;
4010 panelH = fileData.height;
4011 comicID = fileData.id || -1;
4013 if( _file.getType() === FILE_TYPE.PANEL ){
4014 fileData = _file.read();
4015 panelW = fileData.width;
4016 panelH = fileData.height;
4017 borderSize = fileData.border;
4018 panelElements = fileData.panel_elements;
4019 comicID = fileData.comic ? fileData.comic.id || -1 : -1;
4020 panelID = fileData.id || -1;
4021 panelTimming = fileData.t || -1;
4028 HISTORY_CONTROL.open();
4029 SAVE_CONTROL.open();
4030 WINDOWS_CONTROL.open();
4032 GRID_CONTROL.open();
4033 PANEL_CONTROL.open( panelW, panelH, borderSize );
4034 CONSOLE_CONTROLER.open();
4035 PANEL_ELEMENT_OPERATION_MANAGER.open();
4036 PANEL_ELEMENT_CONTROL.open();
4039 MENU_BAR_CONTROL.open();
4043 self.onPaneResize( _w, _h );
4046 if( Type.isArray( panelElements ) === true ){
4047 for( var i=0; i<panelElements.length; ++i ){
4048 panelElm = panelElements[ i ];
4049 if( panelElm.resource_picture ){
4050 PANEL_ELEMENT_CONTROL.createImageElement( panelElm );
4052 if( panelElm.balloon_template_id ){
4053 PANEL_ELEMENT_CONTROL.createTextElement( panelElm );
4061 self.addKeyEventListener( 'keydown', centering, 96, false, true ); // ctrl + 0
4062 self.addKeyEventListener( 'krydown', centering, 48, false, true ); // ctrl + 0
4063 MENU_BAR_CONTROL.EDIT.createOption( 'centering', 'ctrl + 0', centering, true, true, true);
4065 * jqMouseEventChacher は透明な要素で、
4066 * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事
4067 * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。
4069 self.addEventListener( elmMouseEventChatcher, 'mousemove', mouseEventRellay );
4070 self.addEventListener( elmMouseEventChatcher, 'mousedown', mouseEventRellay );
4071 self.addEventListener( elmMouseEventChatcher, 'mouseup', mouseEventRellay );
4072 //self.addEventListener( elmMouseEventChatcher, 'mouseout', mouseEventRellay );
4078 this.onClose = function(){
4080 HISTORY_CONTROL.close();
4082 WINDOWS_CONTROL.close();
4084 GRID_CONTROL.close();
4085 PANEL_CONTROL.close();
4087 PANEL_ELEMENT_OPERATION_MANAGER.close();
4088 PANEL_ELEMENT_CONTROL.close();
4091 MENU_BAR_CONTROL.close();
4095 this.onPaneResize = function( _windowW, _windowH ){
4096 windowW = _windowW || windowW;
4097 windowH = _windowH || windowH;
4101 self.rootElement.style.height = _windowH + 'px';
4102 elmMouseEventChatcher.style.height = _windowH + 'px';
4104 WINDOWS_CONTROL.onWindowResize( _windowW, _windowH );
4105 MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH );
4106 PANEL_CONTROL.onWindowResize( _windowW, _windowH );
4108 }, false, true, 'Panel Editor', 'paneleditor', null, '#2D89F0' );
4110 var FormApplicationHelper = function( app ){
4111 app.isUploading = false;
4112 app.elmProgress = null;
4113 app.elmUploader = null;
4114 app.elmScript = null;
4115 app.elmIframe = null;
4117 app.fetchScript = function(){
4118 app.elmProgress = document.getElementById( app.elmProgressID );
4120 if( !( app.elmUploader = document.getElementById( app.elmUploaderID ) ) ){
4121 app.elmUploader = document.createElement( 'div' );
4122 app.rootElement.appendChild( app.elmUploader );
4123 app.elmUploader.id = app.elmUploaderID;
4124 if( app.hideUploader === true ){
4125 app.elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';
4129 app.elmScript = document.createElement( 'script' );
4130 document.body.appendChild( app.elmScript );
4131 app.elmScript.type = 'text\/javascript';
4132 app.elmScript.src = app.scriptSrc;
4134 app.elmProgress.innerHTML = 'loading form.';
4136 app.addTimer( app.detectForm, 250 );
4138 delete app.fetchScript;
4140 app.detectForm = function(){
4141 app.elmForm = app.elmUploader.getElementsByTagName( 'form' )[ 0 ];
4142 if( !app.elmForm ) return;
4144 app.removeTimer( app.detectForm );
4145 Util.createIframe( 'targetFrame', app.onCreateIframe );
4146 app.elmProgress.innerHTML = 'create iframe';
4148 delete app.detectForm;
4150 app.onCreateIframe = function( _iframe ){
4151 app.elmUploader.appendChild( _iframe );
4152 app.elmIframe = _iframe;
4153 app.elmForm.target = _iframe.name;
4154 app.elmProgress.innerHTML = '';
4155 app.onFormReady && app.onFormReady();
4157 delete app.onCreateIframe;
4159 app.submit = function(){
4160 app.elmProgress.innerHTML = 'submit!';
4162 app.elmForm.submit();
4163 app.isUploading = true;
4165 app.elmProgress.innerHTML = 'submit err..';
4166 app.submitError && app.submitError();
4169 if( app.detectIframe ){
4170 app.elmIframe.onreadystatechange = app.detectIframe;
4172 app.elmIframe.onload = app.onIframeUpdate;
4174 app.elmProgress.innerHTML = 'uploading..';
4179 app.detectIframe = function(){
4180 if ( this.readyState !== 'complete' ) return;
4181 this.onreadystatechange = new Function();
4182 this.onreadystatechange = null;
4183 app.onIframeUpdate();
4184 delete app.detectIframe;
4187 app.onIframeUpdate = function(){
4188 app.elmIframe.onload = null;
4190 console.log( ( app.elmIframe.contentWindow || app.elmIframe.contentDocument.parentWindow ).document.body.innerHTML );
4191 console.log( ( app.elmIframe.contentWindow || app.elmIframe.contentDocument.parentWindow )[ 'current_author' ] );
4195 ( app.elmIframe.contentWindow || app.elmIframe.contentDocument.parentWindow ).close();
4196 app.elmIframe = null;
4197 app.elmProgress.innerHTML = 'success!';
4198 app.isUploading = false;
4199 app.submitSuccess && app.submitSuccess();
4200 delete app.onIframeUpdate;
4202 app.destroyHelper = function(){
4207 var ComicConsole = gOS.registerApplication( function(){
4208 var elmHeader, elmProgress,
4210 inputTitle, inputW, inputH,
4211 comboboxVisible, // comboboxEditable,
4212 buttonSubmit, buttonCancel,
4216 if( !app.elmForm || !app.elmIframe || app.isUploading === true ) return false;
4219 var _inputList = app.elmForm.getElementsByTagName( 'input' ),
4221 for( var i = _inputList.length; i; ){
4222 _input = _inputList[ --i ];
4223 _name = _input.name;
4224 if( _name === 'comic[title]' ){
4225 _input.value = inputTitle.value();
4227 if( _name === 'comic[width]' ){
4228 _input.value = inputW.value();
4230 if( _name === 'comic[height]' ){
4231 _input.value = inputH.value();
4234 var _selectList = app.elmForm.getElementsByTagName( 'select' ),
4235 _select, _optionList;
4236 for( i = _selectList.length; i; ){
4237 _select = _selectList[ --i ];
4238 _name = _select.name;
4239 _optionList = _select.getElementsByTagName( 'option' )
4240 if( _name === 'comic[visible]' ){
4241 _select.selectedIndex = comboboxVisible.selectIndex();
4243 if( _name === 'comic[editable]' ){
4244 // _select.selectedIndex = comboboxEditable.selectIndex();
4249 function clickCancel(){
4250 if( app.isUploading === true ) return false;
4251 ComicConsole.shutdown();
4255 this.MIN_WIDTH = 320;
4256 this.MIN_HEIGHT = 320;
4257 this.onInit = function(){
4258 app.rootElement.id = 'comic-console-wrapper';
4259 app.rootElement.className = 'console-wrapper';
4260 app.rootElement.innerHTML = [
4261 '<div id="comic-console-header" class="console-header">Create New Comic</div>',
4262 '<div id="comic-console" class="console-inner">',
4263 '<div id="comic-console-title" class="field">',
4264 '<span class="field-label">Title:</span>',
4265 '<span id="comic-console-title-value" class="comic-console-value editable-value">No Title</span>',
4267 '<div id="comic-console-width" class="field">',
4268 '<span class="field-label">Default Width:</span>',
4269 '<span id="comic-console-width-value" class="comic-console-value editable-value">300</span>',
4271 '<div id="comic-console-height" class="field">',
4272 '<span class="field-label">Default Height:</span>',
4273 '<span id="comic-console-height-value" class="comic-console-value editable-value">200</span>',
4275 '<div id="comic-console-visible" class="field">',
4276 '<span class="field-label">Visible:</span>',
4277 '<span id="comic-console-visible-value" class="comic-console-value combobox"></span>',
4279 //'<div id="comic-console-editable" class="field">',
4280 // '<span class="field-label">Editable:</span>',
4281 // '<span id="comic-console-editable-value" class="comic-console-value combobox"></span>',
4283 '<div class="console-button-container">',
4284 '<div id="comic-console-post-button" class="button console-submit-button">create</div>',
4285 '<div id="comic-console-cancel-button" class="button console-cancel-button">cancel</div>',
4287 '<div id="comic-console-progress" class="console-progress"> </div>',
4291 app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
4295 this.elmProgressID = 'comic-console-progress';
4296 this.elmUploaderID = 'newcomic';
4297 this.elmIframeName = 'targetFrameCreateComic'
4298 this.scriptSrc = pettanr.CONST.CREATE_COMIC_JS;
4299 this.hideUploader = true;
4300 FormApplicationHelper( this );
4301 this.onFormReady = function(){
4302 app.onPaneResize( windowW, windowH );
4304 var selectList = app.elmForm.getElementsByTagName( 'select' ),
4308 for( var i=0, l=selectList.length; i<l; ++i ){
4309 select = selectList[ i ];
4310 optionList = select.getElementsByTagName( 'option' );
4311 for( j=0, m=optionList.length; j<m; ++j ){
4312 option = optionList[ j ];
4313 if( select.name === 'comic[visible]' ){
4314 comboboxVisible.createOption( option.innerHTML, option.value, option.selected );
4316 if( select.name === 'comic[editable]' ){
4317 // comboboxEditable.createOption( option.innerHTML, option.value, option.selected );
4323 delete app.onFoemReady;
4325 this.submitError = function(){
4326 app.addTimer( clickCancel , 5000, true );
4328 this.submitSuccess = function(){
4329 app.addTimer( clickCancel , 5000, true );
4331 this.onOpen = function( w, h ){
4332 var ui = app.createUIGroup();
4334 inputTitle = ui.createInputText( document.getElementById( 'comic-console-title') );
4335 inputW = ui.createInputText( document.getElementById( 'comic-console-width') );
4336 inputH = ui.createInputText( document.getElementById( 'comic-console-height') );
4337 comboboxVisible = ui.createCombobox( document.getElementById( 'comic-console-visible') );
4338 // comboboxEditable = ui.createCombobox( document.getElementById( 'comic-console-editable') );
4339 buttonSubmit = ui.createButton( document.getElementById( 'comic-console-post-button'), clickOK );
4340 buttonCancel = ui.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel );
4342 app.onPaneResize( w, h );
4346 this.onPaneResize = function( _w, _h ){
4349 app.rootElement.style.cssText = [
4350 'left:', Math.floor( ( _w - app.rootElement.offsetWidth ) /2 ), 'px;',
4351 'top:', Math.floor( ( _h- app.rootElement.offsetHeight ) /2 ), 'px;'
4354 this.onClose = function(){
4355 app.destroyHelper();
4356 app = inputTitle = inputW = inputH = comboboxVisible = buttonSubmit = buttonCancel = null;
4358 }, true, true, 'Comic Console', 'comicConsole', null, '#D44A26' );
4360 var UploadConsole = gOS.registerApplication( function(){
4361 var windowW, windowH,
4362 buttonSubmit, buttonCancel,
4367 if( !app.elmForm || !app.elmIframe || app.isUploading === true ) return false;
4368 if( elmFile.value.length === 0 ) return false;
4372 function clickCancel(){
4373 if( app.isUploading === true ) return false;
4374 UploadConsole.shutdown();
4379 this.MIN_WIDTH = 320;
4380 this.MIN_HEIGHT = 320;
4381 this.onInit = function(){
4382 app.rootElement.id = 'upload-console-wrapper';
4383 app.rootElement.className = 'console-wrapper';
4384 app.rootElement.innerHTML = [
4385 '<div id="upload-console-header" class="console-header">Upload Picture</div>',
4386 '<div id="upload-console" class="console-inner">',
4387 '<div id="uploader"></div>',
4388 '<div class="console-button-container">',
4389 '<div id="upload-console-post-button" class="button console-submit-button">upload</div>',
4390 '<div id="upload-console-cancel-button" class="button console-cancel-button">cancel</div>',
4392 '<div id="upload-console-progress" class="console-progress"> </div>',
4396 app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
4400 this.elmProgressID = 'upload-console-progress';
4401 this.elmUploaderID = 'uploader';
4402 this.elmIframeName = 'targetFrameUpload'
4403 this.scriptSrc = pettanr.CONST.UPLOAD_PICTURE_JS;
4404 this.hideUploader = false;
4405 FormApplicationHelper( this );
4406 this.onFormReady = function(){
4407 app.onPaneResize( windowW, windowH );
4409 var _inputList = app.elmForm.getElementsByTagName( 'input' ),
4411 for( var i = _inputList.length; i; ){
4412 _input = _inputList[ --i ];
4413 if( _input.type === 'file' ){
4416 if( _input.type === 'submit' ){
4417 _input.style.display = 'none';
4420 delete app.onFoemReady;
4422 this.submitError = function(){
4423 app.addTimer( clickCancel , 5000, true );
4425 this.submitSuccess = function(){
4426 app.addTimer( clickCancel , 5000, true );
4428 this.onOpen = function( w, h ){
4429 var ui = app.createUIGroup();
4430 buttonSubmit = ui.createButton( document.getElementById( 'upload-console-post-button'), clickOK );
4431 buttonCancel = ui.createButton( document.getElementById( 'upload-console-cancel-button'), clickCancel );
4433 app.onPaneResize( w, h );
4436 this.onPaneResize = function( _windowW, _windowH){
4439 app.rootElement.style.cssText = [
4440 'left:', Math.floor( ( _windowW - app.rootElement.offsetWidth ) /2 ), 'px;',
4441 'top:', Math.floor( ( _windowH - app.rootElement.offsetHeight ) /2 ), 'px;'
4444 this.onClose = function(){
4445 app.destroyHelper();
4446 app = elmFile = buttonSubmit = buttonCancel = null;
4448 }, true, true, 'Upload Console', 'uploadConsole', null, '#01A31C' );
4450 var ArtistConsole = gOS.registerApplication( function(){
4451 var windowW, windowH,
4452 buttonSubmit, buttonCancel,
4456 if( !app.elmForm || !app.elmIframe || app.isUploading === true ) return false;
4460 function clickCancel(){
4461 if( app.isUploading === true) return false;
4462 ArtistConsole.shutdown();
4467 this.MIN_WIDTH = 320;
4468 this.MIN_HEIGHT = 320;
4469 this.onInit = function(){
4470 app.rootElement.id = 'artist-console-wrapper';
4471 app.rootElement.className = 'console-wrapper';
4472 app.rootElement.innerHTML = [
4473 '<div id="artist-console-header" class="console-header">Register Artist</div>',
4474 '<div id="artist-console" class="console-inner">',
4475 '<div id="register"></div>',
4476 '<div class="console-button-container">',
4477 '<div id="artist-console-post-button" class="button console-submit-button">register</div>',
4478 '<div id="artist-console-cancel-button" class="button console-cancel-button">cancel</div>',
4480 '<div id="artist-console-progress" class="console-progress"> </div>',
4484 app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
4488 this.elmProgressID = 'artist-console-progress';
4489 this.elmUploaderID = 'register';
4490 this.elmIframeName = 'targetFrameArtistRegister'
4491 this.scriptSrc = pettanr.CONST.REGISTER_ARTIST_JS;
4492 this.hideUploader = false;
4493 FormApplicationHelper( this );
4494 this.onFormReady = function(){
4495 app.onPaneResize( windowW, windowH );
4497 var _inputList = app.elmForm.getElementsByTagName( 'input' ),
4499 for( var i = _inputList.length; i; ){
4500 _input = _inputList[ --i ];
4501 if( _input.type === 'submit' ){
4502 _input.style.display = 'none';
4505 delete app.onFoemReady;
4507 this.submitError = function(){
4508 app.addTimer( clickCancel , 5000, true );
4510 this.submitSuccess = function(){
4511 app.addTimer( clickCancel , 5000, true );
4513 this.onOpen = function( w, h ){
4514 var ui = app.createUIGroup();
4515 buttonSubmit = ui.createButton( document.getElementById( 'artist-console-post-button'), clickOK );
4516 buttonCancel = ui.createButton( document.getElementById( 'artist-console-cancel-button'), clickCancel );
4518 app.onPaneResize( w, h );
4521 this.onPaneResize = function( _windowW, _windowH ){
4524 app.rootElement.style.cssText = [
4525 'left:', Math.floor( ( _windowW - app.rootElement.offsetWidth ) /2 ), 'px;',
4526 'top:', Math.floor( ( _windowH - app.rootElement.offsetHeight ) /2 ), 'px;'
4529 this.onClose = function(){
4530 app.destroyHelper();
4531 app = buttonSubmit = buttonCancel = null;
4533 }, true, true, 'Artist Console', 'artistConsole', null, '#FFC40D' );
4536 var Model = ( function(){
4538 var PanelModelClass = function( panel ){
4539 var comicID = panel.comicID || -1,
4540 panelID = panel.panelID || -1,
4541 panelTimming = panel.panelTimming || -1,
4542 panelW = panel.panelW,
4543 panelH = panel.panelH,
4544 borderSize = panel.borderSize,
4545 panelElementArray = panel.panelElementArray,
4546 publish = panel.publish,
4549 function getPanelElementByTiming(){
4550 var i, l = panelElementArray.length;
4551 while( timing < l * 2 ){
4552 for( i=0; i<l; ++i ){
4553 if( timing === panelElementArray[ i ].timing ){
4554 // console.log( timing + ' , ' + panelElementArray[ i ].timing );
4556 return panelElementArray[ i ];
4563 function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){
4565 if( _panelElement.type === 0 ){
4566 url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' );
4569 'src="', isAbsoluteUrl !== true ? url : Util.getAbsolutePath( url ), '" ',
4570 'width="', _panelElement.w, '" ',
4571 'height="', _panelElement.h, '" ',
4573 'left:', _panelElement.x, 'px;',
4574 'top:', _panelElement.y, 'px;',
4575 'z-index:', _panelElement.z, ';',
4577 isXHTML !== true ? '>' : ' \/>'
4580 url = pettanr.balloon.getBalloonUrl( _panelElement.w, _panelElement.h, _panelElement.angle() );
4583 'src="', isAbsoluteUrl !== true ? url : Util.getAbsolutePath( url ), '" ',
4584 'width="', _panelElement.w, '" ',
4585 'height="', _panelElement.h, '" ',
4587 'left:', _panelElement.x, 'px;',
4588 'top:', _panelElement.y, 'px;',
4589 'z-index:', _panelElement.z, ';',
4591 isXHTML !== true ? '>' : ' \/>',
4592 pettanr.LINE_FEED_CODE_TEXTAREA,
4593 '<div class="balloon" style="',
4594 'left:', _panelElement.x, 'px;',
4595 'top:', _panelElement.y, 'px;',
4596 'width:', _panelElement.w, 'px;',
4597 'height:', _panelElement.h, 'px;',
4598 'z-index:', _panelElement.z,
4599 '"><span>', _panelElement.text(), '<\/span>', '<\/div>'
4604 function getImageJsonGET( _imageElement ){
4605 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
4608 '"resource_picture": {', cr,
4609 '"id": ', _imageElement.resourcePicture().id, ',', cr,
4610 '"ext": ', '"',_imageElement.resourcePicture().ext, '"', cr,
4612 '"x": ', _imageElement.x, ',', cr,
4613 '"y": ', _imageElement.y, ',', cr,
4614 '"z": ', _imageElement.z, ',', cr,
4615 '"width": ', _imageElement.flipH() * _imageElement.w, ',', cr,
4616 '"height": ', _imageElement.flipV() * _imageElement.h, ',', cr,
4617 '"t": ', timing, cr,
4621 function imageToJson( _imageElement, _timing ){
4622 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
4625 '"picture_id": ', _imageElement.resourcePicture().id, ',', cr,
4626 '"x": ', _imageElement.x, ',', cr,
4627 '"y": ', _imageElement.y, ',', cr,
4628 '"z": ', _imageElement.z + 1, ',', cr,
4629 '"t": ', _timing, ',', cr,
4630 '"width": ', _imageElement.flipH() * _imageElement.w, ',', cr,
4631 '"height": ', _imageElement.flipV() * _imageElement.h, cr,
4636 function balloonToJson( _textElement, _timing ){
4637 var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
4640 '"balloon_template_id": ', 1, ',', cr,
4641 '"system_picture_id": ', 1, ',', cr,
4642 '"size": ', 1, ',', cr,
4643 '"tail": ', _textElement.angle(), ',', cr,
4644 '"x": ', _textElement.x, ',', cr,
4645 '"y": ', _textElement.y, ',', cr,
4646 '"z": ', _textElement.z + 1, ',', cr,
4647 '"t": ', _timing, ',', cr,
4648 '"width": ', _textElement.w, ',', cr,
4649 '"height": ', _textElement.h, ',', cr,
4650 '"speeches_attributes": {', cr,
4651 '"newf', timing, '": {', cr,
4652 '"content": "', _textElement.text(), '",', cr,
4653 '"x": ', _textElement.x, ',', cr,
4654 '"y": ', _textElement.y, ',', cr,
4655 '"t": ', timing, ',', cr,
4656 '"width": ', _textElement.w, ',', cr,
4657 '"height": ', _textElement.h, cr,
4664 this.getJsonPostString = function(){
4667 var JSON_STRING_ARRAY = [],
4670 l = panelElementArray.length,
4672 cr = pettanr.LINE_FEED_CODE_TEXTAREA;
4674 while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l ){
4675 _panelElement = getPanelElementByTiming();
4676 if( _panelElement === null) break;
4677 n = IMAGE_ARRAY.length + BALLOON_ARRAY.length;
4678 _panelElement.type === 0 ?
4679 IMAGE_ARRAY.push( [ '"new', n, '": ', imageToJson( _panelElement, n ) ].join( '' ) ) :
4680 BALLOON_ARRAY.push( [ '"new', n, '": ', balloonToJson( _panelElement, n ) ].join( '' ) );
4684 panelID !== -1 ? ( '"id": ' + panelID + ',' + cr ) : '',
4685 comicID !== -1 ? ( '"comic_id": ' + comicID + ',' + cr ) : '',
4686 '"width": ', panelW, ',', cr,
4687 '"height": ', panelH, ',', cr,
4688 '"border": ', borderSize, ',', cr,
4690 // '"picture_id": 1,', cr,
4691 '"x": ', 0, ',', cr,
4692 '"y": ', 0, ',', cr,
4693 '"z": ', 1, ',', cr,
4694 panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',
4695 '"panel_pictures_attributes": {', cr,
4696 IMAGE_ARRAY.join( ',' + cr ), cr,
4698 '"speech_balloons_attributes": {', cr,
4699 BALLOON_ARRAY.join( ',' + cr ), cr,
4701 '"publish": ', ( publish === true ? 1 : 0 ), cr,
4705 this.getJsonGetString = function(){
4708 var JSON_STRING_ARRAY = [],
4710 l = panelElementArray.length,
4711 cr = pettanr.LINE_FEED_CODE_TEXTAREA,
4714 while( ELEMENT_ARRAY.length <= l){
4715 _panelElement = getPanelElementByTiming();
4716 if( _panelElement === null ) break;
4718 ELEMENT_ARRAY.push( _panelElement.type === 0 ? getImageJsonGET( _panelElement ) : balloonToJson( _panelElement ));
4723 //'"id": ', panelID, ',', cr,
4724 '"border": ', borderSize, ',', cr,
4725 // '"comic_id": ', comicID, ',', cr,
4726 // '"picture_id": 1,', cr,
4727 '"x": ', 0, ',', cr,
4728 '"y": ', 0, ',', cr,
4729 '"z": ', 1, ',', cr,
4730 // panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',
4731 '"width": ', panelW, ',', cr,
4732 '"height": ', panelH, ',', cr,
4733 '"panel_elements": [', cr,
4734 ELEMENT_ARRAY.join( ',' + cr ), cr,
4740 this.getAsHtmlString = function( isAbsoluteUrl, isXHTML ){
4743 var HTML_ARRAY = [],
4744 l = panelElementArray.length,
4747 while( HTML_ARRAY.length < l ){
4748 _panelElement = getPanelElementByTiming();
4749 if( _panelElement === null) break;
4750 HTML_ARRAY.push( panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ));
4755 '<div class="panel" ',
4757 'height:', panelH, 'px;',
4758 'background-color:', ';',
4763 HTML_ARRAY.push( '</div>');
4765 return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA );
4767 this.publish = function( v ){
4768 return publish = Type.isBoolean( v ) === true ? v : publish;
4770 this.destroy = function(){
4771 panel = panelElementArray = null;
4776 createPanel: function( panelData ){
4777 return new PanelModelClass( panelData );
4783 var OutputConsole = gOS.registerApplication( function(){
4784 var FORMAT_LIST = [ 'json[POST]', 'json[GET]', 'XML', 'HTML', 'XHTML', 'MT export', 'Blogger ATOM' ];
4786 comboboxFormat, inputOption,
4787 buttonPost, buttonClose,
4790 comicID, panelID, panelTimming, panelW, panelH, borderSize, panelElementArray,
4795 OutputConsole.shutdown();
4798 function formatUpdate(){
4799 var i = comboboxFormat.selectIndex(),
4801 // buttonPost.enabled( false );
4803 text = model.getJsonPostString();
4804 // buttonPost.enabled( true );
4807 text = model.getJsonGetString();
4810 text = model.getAsHtmlString( false, false );
4814 elmOutputArea.value = text;
4816 function clickClose(){
4817 OutputConsole.shutdown();
4821 function clickPost(){
4822 // PanelConsole.boot( elmOutputArea.value );
4827 this.MIN_WIDTH = 320;
4828 this.MIN_HEIGHT = 320;
4829 this.onInit = function(){
4830 app.rootElement.id = 'output-console-wrapper';
4831 app.rootElement.className = 'console-wrapper';
4832 app.rootElement.innerHTML = [
4833 '<div id="output-console-header" class="console-header">Output Console</div>',
4834 '<div id="output-console" class="console-inner">',
4835 '<div id="output-console-format" class="field">',
4836 '<span class="field-label">Format:</span>',
4837 '<span id="output-console-format-value" class="output-console-value combobox"></span>',
4839 '<div id="output-console-option" class="field">',
4840 '<span class="field-label">Options:</span>',
4841 '<span id="output-console-option-value" class="output-console-value editable-value">absolute-path</span>',
4843 '<textarea id="output-area" readonly></textarea>',
4844 '<div id="output-console-close-button" class="button">close</div>',
4848 app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
4852 this.onOpen = function( _w, _h, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElementArray ){
4853 elmOutputArea = document.getElementById( 'output-area' );
4855 var ui = app.createUIGroup();
4856 comboboxFormat = ui.createCombobox( document.getElementById( 'output-console-format' ), formatUpdate );
4858 for( var i=0; FORMAT_LIST[ 0 ]; ++i ){
4859 comboboxFormat.createOption( FORMAT_LIST.shift(), null, i === 0 );
4861 inputOption = ui.createInputText( document.getElementById( 'output-console-option' ), null );
4862 // buttonPost = ui.createButton( document.getElementById( 'output-console-post-button' ), clickPost );
4863 buttonClose = ui.createButton( document.getElementById( 'output-console-close-button' ), clickClose );
4865 app.onPaneResize( _w, _h );
4867 comboboxFormat.focus( true );
4869 model = Model.createPanel( {
4872 panelTimming : _panelTimming,
4875 borderSize : _borderSize,
4876 panelElementArray : _panelElementArray,
4882 this.onPaneResize = function( _windowW, _windowH ){
4885 app.rootElement.style.cssText = [
4886 'left:', Math.floor( ( _windowW - app.rootElement.offsetWidth ) /2 ), 'px;',
4887 'top:', Math.floor( ( _windowH - app.rootElement.offsetHeight ) /2 ), 'px;'
4890 this.onClose = function(){
4891 elmOutputArea.value = '';
4893 elmOutputArea = comboboxFormat = inputOption = buttonPost = buttonClose = panelElementArray = instance = model = null;
4895 }, true, false, 'Output Console', 'outputConsole', null, '#2D89F0' );
4898 var PanelConsole = gOS.registerApplication( function(){
4899 var windowW, windowH,
4900 comboboxPublish, buttonPost, buttonClose,
4906 * upload ボタンが押されたらまず iframe をつくる.
4909 if( !app.elmForm || !app.elmIframe || app.isUploading === true ) return false;
4914 function clickCancel(){
4915 if( app.isUploading === true ) return false;
4916 PanelConsole.shutdown();
4919 function publishUpdate(){
4921 model.publish( comboboxPublish.selectIndex() === 1 );
4922 elmInput.value = model.getJsonPostString().replace( /\n/g, '' );
4927 this.MIN_WIDTH = 320;
4928 this.MIN_HEIGHT = 320;
4929 this.onInit = function(){
4930 app.rootElement.id = 'panel-console-wrapper';
4931 app.rootElement.className = 'console-wrapper';
4932 app.rootElement.innerHTML = [
4933 '<div id="panel-console-header" class="console-header">Create New Panel (dev)</div>',
4934 '<div id="panel-console" class="console-inner">',
4935 '<div id="newpanel"></div>',
4936 '<div id="panel-console-publish" class="field">',
4937 '<span class="field-label">Publish:</span>',
4938 '<span id="panel-console-publish-value" class="combobox"></span>',
4940 '<div class="console-button-container">',
4941 '<div id="panel-console-post-button" class="button console-submit-button">post</div>',
4942 '<div id="panel-console-cancel-button" class="button console-cancel-button">cancel</div>',
4944 '<div id="panel-console-progress" class="console-progress"> </div>',
4948 app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
4952 this.elmProgressID = 'panel-console-progress';
4953 this.elmUploaderID = 'newpanel';
4954 this.elmIframeName = 'targetFrameNewPanel'
4955 this.scriptSrc = pettanr.CONST.CREATE_PANEL_JS;
4956 this.hideUploader = false;
4957 FormApplicationHelper( this );
4958 this.onFormReady = function(){
4959 app.onPaneResize( windowW, windowH );
4961 var _inputList = app.elmForm.getElementsByTagName( 'input' ),
4963 for( var i = _inputList.length; i; ){
4964 _input = _inputList[ --i ];
4965 if( _input.type === 'submit' ){
4966 _input.style.display = 'none';
4968 if( _input.name === 'json' ){
4974 delete app.onFoemReady;
4976 this.submitError = function(){
4977 app.addTimer( clickCancel , 5000, true );
4979 this.submitSuccess = function(){
4980 app.addTimer( clickCancel , 5000, true );
4982 this.onOpen = function( w, h, _model ){
4983 var ui = app.createUIGroup(),
4984 elm = document.getElementById( 'panel-console-publish' );
4986 comboboxPublish = ui.createCombobox( elm, publishUpdate );
4987 comboboxPublish.createOption( 'only me', '0', _model.publish() === false );
4988 comboboxPublish.createOption( 'publish', '1', _model.publish() === true );
4991 elm.parentNode.removeChild( elm );
4994 buttonPost = ui.createButton( document.getElementById( 'panel-console-post-button' ), clickOK );
4995 buttonClose = ui.createButton( document.getElementById( 'panel-console-cancel-button' ), clickCancel );
4997 app.onPaneResize( w, h );
5000 this.onPaneResize = function( _windowW, _windowH ){
5003 app.rootElement.style.cssText = [
5004 'left:', Math.floor( ( _windowW - app.rootElement.offsetWidth ) /2 ), 'px;',
5005 'top:', Math.floor( ( _windowH - app.rootElement.offsetHeight ) /2 ), 'px;'
5008 this.onClose = function(){
5009 app.destroyHelper();
5010 model && model.destroy();
5011 app = model = comboboxPublish = buttonPost = buttonClose = elmInput = null;
5013 }, true, true, 'Panel Console', 'panelConsole', null, '#603CBA' );
5016 })( pettanr, gOS, window, document );