/*
* pettanR peta.apps.js
- * version 0.5.48
+ * version 0.5.49
*
* author:
* itozyun
case FILE_DATA_BALLOON_ROOT :
case BALLOON_TEMPLETE_ARRAY :
json.type = FILE_TYPE.BALLOON_TEMPLETE;
+ // register pettanr.balloon
+ pettanr.newBalloon.register( json.settings );
data = createFileData( json, BALLOON_TEMPLETE_ARRAY, 'name,caption,classname,settings' );
addChildData( FILE_DATA_BALLOON_ROOT, data );
break;
this.$ = jqImageElementOrigin.clone( true );
this.data = data;
this.z = data.z;
- this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
+ this.timing = data.t || PANEL_ELEMENT_ARRAY.length;
this.keepSize = false;
this.flipV = data.height < 0 ? -1 : 1;
this.flipH = data.width < 0 ? -1 : 1;
})();
this.balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, this.type );
this.z = data.z;
- this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
+ this.timing = data.t || PANEL_ELEMENT_ARRAY.length;
this.$.find( 'img' ).eq( 0 ).replaceWith( this.balloon.elm );
x : Math.floor( panelW / 2 - data.width / 2 ),
y : Math.floor( panelH / 2 - data.height / 2 ),
z : -1,
- t : PANEL_ELEMENT_ARRAY.length + 1,
+ t : 0,
width : 1,
height : 1
});
x: Math.floor( panelW / 2 - 100 + Math.random() * 10 ),
y: Math.floor( panelH / 2 - 100 + Math.random() * 10 ),
z: -1,
- t: PANEL_ELEMENT_ARRAY.length + 1,
+ t: 0,
width: 200,
height: 200,
speeches_attributes: {
'}'
].join( '');
};
- function imageToJson( _imageElement, _timing ){
+ function imageToJson( _imageElement, t ){
var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
return [
'{', cr,
'"x": ', _imageElement.x, ',', cr,
'"y": ', _imageElement.y, ',', cr,
'"z": ', _imageElement.z + 1, ',', cr,
- '"t": ', _timing, ',', cr,
+ '"t": ', t, ',', cr,
'"width": ', _imageElement.flipH * _imageElement.w, ',', cr,
'"height": ', _imageElement.flipV * _imageElement.h, cr,
'}'
].join( '');
};
- function balloonToJson( _textElement, _timing ){
+ function balloonToJson( _textElement, t ){
var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
return [
'{', cr,
- '"balloon_template_id": ', 1, ',', cr,
- '"system_picture_id": ', 1, ',', cr,
- '"size": ', 1, ',', cr,
- '"tail": ', _textElement.a, ',', cr,
- '"x": ', _textElement.x, ',', cr,
- '"y": ', _textElement.y, ',', cr,
- '"z": ', _textElement.z + 1, ',', cr,
- '"t": ', timing, ',', cr,
- '"width": ', _textElement.w, ',', cr,
- '"height": ', _textElement.h, ',', cr,
- '"speeches_attributes": {', cr,
- '"newf', timing, '": {', cr,
- '"content": "', _textElement.content, '",', cr,
+ '"speech_balloon_template_id": ', 1, ',', cr,
+ '"classname": "Square",',
+ '"z": ', _textElement.z + 1, ',', cr,
+ '"t": ', t, ',', cr,
+ '"settings": "{\'tail\':' + _textElement.a + '}",',
+ '"balloons_attributes": {', cr,
+ '"newb', t, '": {', cr,
+ '"system_picture_id": ', 2, ',', cr,
+ '"caption": "alt text",', cr,
'"x": ', _textElement.x, ',', cr,
'"y": ', _textElement.y, ',', cr,
- '"t": ', timing, ',', cr,
'"width": ', _textElement.w, ',', cr,
'"height": ', _textElement.h, cr,
'}', cr,
+ '},', cr,
+ '"speeches_attributes": {', cr,
+ '"news', t, '": {', cr,
+ '"content": "', _textElement.content, '",', cr,
+ '"x": ', Math.floor( _textElement.w * 0.16 ), ',', cr,
+ '"y": ', Math.floor( _textElement.w * 0.16 ), ',', cr,
+ '"width": ', Math.floor( _textElement.w * 0.66 ), ',', cr,
+ '"height": ', Math.floor( _textElement.h * 0.66 ), cr,
+ '}', cr,
'}', cr,
'}'
].join( '');
comboboxFormat, inputOption,
buttonSubmit, buttonClose,
windowW, windowH,
- timing = 0,
comicID, panelID, panelTimming, panelW, panelH, borderSize, panelElementArray,
app = this,
model = null;
/*\r
* pettanR peta.common.js\r
- * version 0.5.48\r
+ * version 0.5.49\r
* \r
* author:\r
* itozyun\r
})();\r
\r
/* ----------------------------------------\r
- * Vector Support\r
- * \r
- * __________\r
- * / \\r
- * / \\r
- * |,startX,Y |\r
- * tailX,Y - < |\r
- * |'endX,Y |\r
- * \ /\r
- * \__________/\r
- * \r
- * SVG\r
- * -----------------------\r
- * ie9, other modern browser\r
- * \r
- * XML\r
- * -----------------------\r
- * ie5.5-8\r
- * \r
- * 内部の角度計算は radian で統一したい。\r
- * 当初 vectorEnabled = true で一度書いてみる。\r
- * 駄目なら、代替のイメージのsrcの用意もここで担当。\r
- * 閲覧と編集両方で使う。\r
+ * old balloon.\r
* \r
*/\r
pettanr.balloon = ( function() {\r
}\r
})();\r
\r
+/* ----------------------------------------\r
+ * New Balloon\r
+ * \r
+ * Vector : SVG, Canvas, VML, Flash, None\r
+ * \r
+ */\r
pettanr.newBalloon = ( function(){\r
- return {\r
- register : function( className ){\r
+ var TEMPLETES = {};\r
+ \r
+ var STROKE_WIDTH = 1.2,\r
+ IS_VML = UA.isIE === true && UA.ieVersion < 9,\r
+ ELM_BALLOON_ORIGIN = ( function(){\r
+ var ret;\r
+ try {\r
+ if( IS_VML === true ){\r
+ ret = document.createElement( 'DIV' );\r
+ var shape = document.createElement( 'v:shape' );\r
+ shape.coordorigin = "0,0";\r
+ shape.strokecolor = "black";\r
+ shape.strokeweight = STROKE_WIDTH;\r
+ shape.fillcolor = "white";\r
+ ret.appendChild( shape);\r
+ } else {\r
+ var kSVGNS = 'http://www.w3.org/2000/svg';\r
+ // http://modernizr.com/downloads/modernizr.js\r
+ // Thanks to Erik Dahlstrom\r
+ if( !document.createElementNS || !document.createElementNS(kSVGNS, 'svg' ).createSVGRect ){\r
+ return null;\r
+ };\r
+ ret = document.createElementNS( kSVGNS, 'svg' );\r
+ var path = document.createElementNS( kSVGNS, 'path' );\r
+ path.setAttribute( 'fill', "white" );\r
+ path.setAttribute( 'stroke', "black" );\r
+ path.setAttribute( 'strokeWidth', STROKE_WIDTH );\r
+ ret.appendChild( path );\r
+ };\r
+ return ret; \r
+ } catch( e ){\r
+ return null;\r
+ };\r
+ })(),\r
+ vectorEnabled = ELM_BALLOON_ORIGIN !== null &&\r
+ pettanr.URL_PARAMS.vector !== false &&\r
+ !( IS_VML === true && UA.VML === false ),\r
+ BalloonClass;\r
+ \r
+ if( vectorEnabled === true ){\r
+ BalloonClass = function( templete ){\r
+ this.elm = ELM_BALLOON_ORIGIN.cloneNode( true );\r
+ this.path = this.elm.getElementsByTagName( IS_VML === true ? 'shape' : 'path' )[ 0 ];\r
+ this.klass = klass;\r
+ this.getPath = klass.getPath;\r
+ };\r
+ BalloonClass.prototype = {\r
+ elm : null,\r
+ path : null,\r
+ klass : null,\r
+ getPath : null,\r
+ args : null,\r
+ update : IS_VML === true ?\r
+ function( /* w, h [, angle, ,,, ] */ ){\r
+ var w = arguments[ 0 ],\r
+ h = arguments[ 1 ];\r
+ var path = this.getPath.call( this.klass, arguments );\r
+ if( !path ) return false;\r
+ path = /* SVG2VML */ path;\r
+ this.path.style.width = w + 'px';\r
+ this.path.style.height = h + 'px';\r
+ this.path.coordsize = ( w * 10 ) + ',' + ( h * 10 );\r
+ this.path.path = path;\r
+ // this.elm.style.marginTop = _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;\r
+ // this.elm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;\r
+ } :\r
+ function( /* w, h [, angle, ,,, ] */ ){\r
+ var w = arguments[ 0 ],\r
+ h = arguments[ 1 ],\r
+ d = this.getPath.call( this.klass, arguments );\r
+ if( !d ) return false;\r
+ this.elm.width = w + PADDING_LEFT * 2;\r
+ this.elm.height = h + PADDING_TOP * 2;\r
+ this.path.setAttribute( 'd', d );\r
+ },\r
+ destroy : function(){\r
+ this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );\r
+ delete this.elm;\r
+ delete this.path;\r
+ }\r
+ };\r
+ } else {\r
+ BalloonClass = function( klass ){\r
+ // templete の vector の有無\r
+ this.elm = document.createElement( 'img' ); // pettanr.imageに変更\r
+ this.klass = klass;\r
+ this.getPictureID = klass.getPictureID;\r
+ };\r
+ BalloonClass.prototype = {\r
+ elm : null,\r
+ klass : null,\r
+ getPictureID : null,\r
+ args : null,\r
+ update : function( /* w, h [, angle, ,,, ] */ ){\r
+ var id = this.getPictureID.call( this.klass, arguments );\r
+ if( id !== 0 && !id ) return false;\r
+ this.elm.src = pettanr.CONST.SYSTEM_PICTURE_PATH + id + '.gif';\r
+ },\r
+ destroy : function(){\r
+ this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );\r
+ }\r
+ };\r
+ };\r
+ \r
+ /*\r
+ * http://sourceforge.jp/projects/pettanr/wiki/HowToMakeSpeechBalloon\r
+ */\r
+ var NonVectorBalloonClass = function( templete ){\r
+ this.elm = document.createElement( 'img' ); // pettanr.imageに変更\r
+ this.size = this.elm.style;\r
+ //this.templete = templete;\r
+ //this.speech = templete.speech_template_attributes;\r
+ //this.defaultW = templete.default_width;\r
+ //this.defaultH = templete.default_height;\r
+ //this.sizeCount = templete.size_count;\r
+ this.wOffset = templete.width_offset;\r
+ this.hOffset = templete.height_offset;\r
+ this.wStep = templete.width_step;\r
+ this.hStep = templete.height_step;\r
+ // r_offset\r
+ // r_steps\r
+ \r
+ var obj = templete.balloon_template_attributes, v, p;\r
+ \r
+ if( templete.size_count && 1 < templete.size_count ){\r
+ this.picIDs = []; // system picture id list\r
+ for( p in obj ){\r
+ v = obj[ v ];\r
+ this.picIDs[ v.size ] = v.system_picture_id;\r
+ }; \r
+ } else {\r
+ for( p in obj ){\r
+ v = obj[ v ];\r
+ this.picID = v.system_picture_id;\r
+ };\r
+ };\r
+ };\r
+ NonVectorBalloonClass.prototype = {\r
+ elm : null,\r
+ size : null,\r
+ templete : null,\r
+ args : null,\r
+ picIDs : null,\r
+ picID : 0,\r
+ path : pettanr.CONST.SYSTEM_PICTURE_PATH,\r
+ update : function( w, h /* [, angle, ,,, ] */ ){\r
+ var l, id, _w, _h;\r
+ if( this.picIDs ){\r
+ _w = ( w - this.wOffset ) / this.wStep;\r
+ _h = ( h - this.hOffset ) / this.hStep;\r
+ l = this.picIDs.length - 1;\r
+ _w = _w < 0 ? 0 : ( _w > l ? l : _w );\r
+ _h = _h < 0 ? 0 : ( _h > l ? l : _h );\r
+ id = this.picIDs[ _w > _h ? _w : _h ]; \r
+ } else {\r
+ id = this.picID;\r
+ };\r
\r
+ this.elm.src = this.path + id + '.gif';\r
+ this.size.width = w + 'px';\r
+ this.size.height = h + 'px';\r
},\r
- isBalloonClass : function(){\r
- \r
+ destory : function(){\r
+ this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );\r
+ }\r
+ };\r
+ \r
+ return {\r
+ /**\r
+ * balloon_templetes.json 取得時に呼ばれる\r
+ * className は存在しない場合もある \r
+ */\r
+ register : function( templete ){\r
+ templete = $.parseJSON( templete );\r
+ if( templete.classname && !TEMPLETES[ templete.classname ] ){\r
+ TEMPLETES[ templete.classname ] = templete;\r
+ delete templete.classname;\r
+ };\r
},\r
- isBalloonInstance : function(){\r
+ create : function( name ){\r
+ if( Type.isString( name ) === true && name in window ){\r
+ return new BalloonClass( window[ name ] );\r
+ };\r
+ return new NonVectorBalloonClass( TEMPLETES[ name ] );\r
+ },\r
+ isTemplete : function( templete ){\r
\r
+ },\r
+ isInstance : function( balloon ){\r
+ return balloon instanceof BalloonClass || balloon instanceof NonVectorBalloonClass;\r
}\r
}\r
})();\r
OSDN Git Service
