X-Git-Url: http://git.osdn.net/view?p=pettanr%2Fpettanr.git;a=blobdiff_plain;f=app%2Fassets%2Fjavascripts%2Fpeta-common.js;fp=app%2Fassets%2Fjavascripts%2Fpeta-common.js;h=d56c6fd79dc99cfed28b029bfe6e4fb650e146c9;hp=fa8c2c91fa667e957c179e0025897dd3a4e7497c;hb=cc452fd13ae1a8aa987bd9020c553cb4185c40fc;hpb=55a1a3575310582e43c63d75cdd5ff5782e5a84a

diff --git a/app/assets/javascripts/peta-common.js b/app/assets/javascripts/peta-common.js
index fa8c2c91..d56c6fd7 100644
--- a/app/assets/javascripts/peta-common.js
+++ b/app/assets/javascripts/peta-common.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.common.js
- *   version 0.5.49
+ *   version 0.5.50
  * 
  *   author:
  *     itozyun
@@ -110,29 +110,7 @@ pettanr.CONST = ( function(){
 })();
 
 /* ----------------------------------------
- * Vector Support
- * 
- *              __________
- *             /          \
- *            /            \
- *            |,startX,Y    |
- * tailX,Y - <              |
- *            |'endX,Y      |
- *            \            /
- * 	           \__________/
- * 
- * SVG
- * -----------------------
- * ie9, other modern browser
- * 
- * XML
- * -----------------------
- * ie5.5-8
- * 
- * 内部の角度計算は radian で統一したい。
- * 当初 vectorEnabled = true で一度書いてみる。
- * 駄目なら、代替のイメージのsrcの用意もここで担当。
- * 閲覧と編集両方で使う。
+ * old balloon.
  * 
  */
 pettanr.balloon = ( function() {
@@ -331,16 +309,202 @@ pettanr.balloon = ( function() {
 	}
 })();
 
+/* ----------------------------------------
+ * New Balloon
+ * 
+ * Vector : SVG, Canvas, VML, Flash, None
+ * 
+ */
 pettanr.newBalloon = ( function(){
-	return {
-		register : function( className ){
+	var TEMPLETES = {};
+	
+	var STROKE_WIDTH       = 1.2,
+		IS_VML             = UA.isIE === true && UA.ieVersion < 9,
+		ELM_BALLOON_ORIGIN = ( function(){
+			var ret;
+			try {
+				if( IS_VML === true ){
+					ret = document.createElement( 'DIV' );
+					var shape = document.createElement( 'v:shape' );
+					shape.coordorigin  = "0,0";
+					shape.strokecolor  = "black";
+					shape.strokeweight = STROKE_WIDTH;
+					shape.fillcolor    = "white";
+					ret.appendChild( shape);
+				} else {
+					var kSVGNS = 'http://www.w3.org/2000/svg';
+					// http://modernizr.com/downloads/modernizr.js
+					// Thanks to Erik Dahlstrom
+					if( !document.createElementNS || !document.createElementNS(kSVGNS, 'svg' ).createSVGRect ){
+						return null;
+					};
+					ret = document.createElementNS( kSVGNS, 'svg' );
+					var path = document.createElementNS( kSVGNS, 'path' );
+					path.setAttribute( 'fill', "white" );
+					path.setAttribute( 'stroke', "black" );
+					path.setAttribute( 'strokeWidth', STROKE_WIDTH );
+					ret.appendChild( path );
+				};
+				return ret;	
+			} catch( e ){
+				return null;
+			};
+		})(),
+		vectorEnabled = ELM_BALLOON_ORIGIN !== null &&
+						pettanr.URL_PARAMS.vector !== false &&
+						!( IS_VML === true && UA.VML === false ),
+		BalloonClass;
+	
+	if( vectorEnabled === true ){
+		BalloonClass = function( templete ){
+			this.elm     = ELM_BALLOON_ORIGIN.cloneNode( true );
+			this.path    = this.elm.getElementsByTagName( IS_VML === true ? 'shape' : 'path' )[ 0 ];
+			this.klass   = klass;
+			this.getPath = klass.getPath;
+		};
+		BalloonClass.prototype = {
+			elm     : null,
+			path    : null,
+			klass   : null,
+			getPath : null,
+			args    : null,
+			update  : IS_VML === true ?
+				function( /* w, h [, angle, ,,, ] */ ){
+					var w = arguments[ 0 ],
+						h = arguments[ 1 ];
+					var path = this.getPath.call( this.klass, arguments );
+					if( !path ) return false;
+					path = /* SVG2VML */ path;
+					this.path.style.width  = w + 'px';
+					this.path.style.height = h + 'px';
+					this.path.coordsize    = ( w * 10 ) + ',' + ( h * 10 );
+					this.path.path         = path;
+					// this.elm.style.marginTop =  _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;
+					// this.elm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;
+				} :
+				function( /* w, h [, angle, ,,, ] */ ){
+					var w = arguments[ 0 ],
+						h = arguments[ 1 ],
+						d = this.getPath.call( this.klass, arguments );
+					if( !d ) return false;
+					this.elm.width  = w + PADDING_LEFT * 2;
+					this.elm.height = h + PADDING_TOP  * 2;
+					this.path.setAttribute( 'd', d );
+				},
+			destroy : function(){
+				this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+				delete this.elm;
+				delete this.path;
+			}
+		};
+	} else {
+		BalloonClass = function( klass ){
+			// templete の vector の有無
+			this.elm          = document.createElement( 'img' ); // pettanr.imageに変更
+			this.klass        = klass;
+			this.getPictureID = klass.getPictureID;
+		};
+		BalloonClass.prototype = {
+			elm          : null,
+			klass        : null,
+			getPictureID : null,
+			args         : null,
+			update : function( /* w, h [, angle, ,,, ] */ ){
+				var id = this.getPictureID.call( this.klass, arguments );
+				if( id !== 0 && !id ) return false;
+				this.elm.src = pettanr.CONST.SYSTEM_PICTURE_PATH + id + '.gif';
+			},
+			destroy : function(){
+				this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+			}
+		};
+	};
+	
+	/*
+	 * http://sourceforge.jp/projects/pettanr/wiki/HowToMakeSpeechBalloon
+	 */
+	var NonVectorBalloonClass = function( templete ){
+		this.elm       = document.createElement( 'img' ); // pettanr.imageに変更
+		this.size      = this.elm.style;
+		//this.templete  = templete;
+		//this.speech    = templete.speech_template_attributes;
+		//this.defaultW  = templete.default_width;
+		//this.defaultH  = templete.default_height;
+		//this.sizeCount = templete.size_count;
+		this.wOffset   = templete.width_offset;
+		this.hOffset   = templete.height_offset;
+		this.wStep     = templete.width_step;
+		this.hStep     = templete.height_step;
+		// r_offset
+		// r_steps
+		
+		var obj = templete.balloon_template_attributes, v, p;
+		
+		if( templete.size_count && 1 < templete.size_count ){
+			this.picIDs = []; // system picture id list
+			for( p in obj ){
+				v = obj[ v ];
+				this.picIDs[ v.size ] = v.system_picture_id;
+			};			
+		} else {
+			for( p in obj ){
+				v = obj[ v ];
+				this.picID = v.system_picture_id;
+			};
+		};
+	};
+	NonVectorBalloonClass.prototype = {
+		elm      : null,
+		size     : null,
+		templete : null,
+		args     : null,
+		picIDs   : null,
+		picID    : 0,
+		path     : pettanr.CONST.SYSTEM_PICTURE_PATH,
+		update : function( w, h /* [, angle, ,,, ] */ ){
+			var l, id, _w, _h;
+			if( this.picIDs ){
+				_w = ( w - this.wOffset ) / this.wStep;
+				_h = ( h - this.hOffset ) / this.hStep;
+				l  = this.picIDs.length - 1;
+				_w = _w < 0 ? 0 : ( _w > l ? l : _w );
+				_h = _h < 0 ? 0 : ( _h > l ? l : _h );
+				id = this.picIDs[ _w > _h ? _w : _h ];
+			} else {
+				id = this.picID;
+			};
 			
+			this.elm.src     = this.path + id + '.gif';
+			this.size.width  = w + 'px';
+			this.size.height = h + 'px';
 		},
-		isBalloonClass : function(){
-			
+		destory : function(){
+			this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+		}
+	};
+	
+	return {
+		/**
+		 * balloon_templetes.json 取得時に呼ばれる
+		 * className は存在しない場合もある 
+		 */
+		register : function( name, templete ){
+			templete = $.parseJSON( templete );
+			if( !TEMPLETES[ name ] ){
+				TEMPLETES[ name ] = templete.speech_balloon;
+			};
 		},
-		isBalloonInstance : function(){
+		create : function( name ){
+			if( Type.isString( name ) === true && name in window ){
+				return new BalloonClass( window[ name ] );
+			};
+			return new NonVectorBalloonClass( TEMPLETES[ name ] );
+		},
+		isTemplete : function( templete ){
 			
+		},
+		isInstance : function( balloon ){
+			return balloon instanceof BalloonClass || balloon instanceof NonVectorBalloonClass;
 		}
 	}
 })();