X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.5.x%2Fjavascripts%2Fpeta-common.js;h=13a424412bcc1eca1af9b0e70b1c45d814f20bdf;hb=2621070c032954702155d4a315535b8b1aafd616;hp=8b49c555d37c8ffa15ae60d846f629c61380df95;hpb=c684a38e0f7b7202c4d26afe429a98bbfa85a77f;p=pettanr%2FclientJs.git

diff --git a/0.5.x/javascripts/peta-common.js b/0.5.x/javascripts/peta-common.js
index 8b49c55..13a4244 100644
--- a/0.5.x/javascripts/peta-common.js
+++ b/0.5.x/javascripts/peta-common.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.common.js
- *   version 0.5.47
+ *   version 0.5.49
  * 
  *   author:
  *     itozyun
@@ -93,6 +93,7 @@ pettanr.CONST = ( function(){
 		URL_MY_COMICS_JSON            :	( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/comic.json',
 		URL_PANELS_JSON               : ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'panels.json',
 		URL_MY_PANELS_JSON            : ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/panel.json',
+		SPEECH_BALOON_TEMPLETE        : ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'speech_balloon_templates.json\/',
 		NS_PETTANR_COMIC              : 'pettanr-comic',
 		THUMBNAIL_PATH                : SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/thumbnail\/' : PETTANR_ROOT_PATH + 'resource_pictures\/',
 		RESOURCE_PICTURE_PATH         : SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/' : PETTANR_ROOT_PATH + 'resource_pictures\/full\/',
@@ -109,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() {
@@ -147,7 +126,7 @@ pettanr.balloon = ( function() {
 		ELM_BALLOON_ORIGIN = ( function(){
 			var ret;
 			try {
-				if( IS_VML === true){
+				if( IS_VML === true ){
 					ret = document.createElement( 'DIV');
 					var shape = document.createElement( 'v:shape');
 					shape.coordorigin = "0,0";
@@ -187,22 +166,57 @@ pettanr.balloon = ( function() {
 		TARGET     = TAIL_WIDTH * TAIL_WIDTH,
 		isFinit    = Type.isFinite,
 		ACCURACY   = 1, // 有効少数桁	
-		cround     = function ( v, r ){
+		cround     = function( v, r ){
 						r = r || ACCURACY;
 						return round( v * pow( 10.0, r )) / pow( 10.0, r );
 					},
 		DEG_TO_RAD = Math.PI / 180;
 
 	var XBROWSER_BALLOON_CLASS = function( w, h, a ){
-		var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true ) : document.createElement( 'img' ), // pettanr.imageに変更
-			path = balloonElm.getElementsByTagName( 'path' )[ 0 ],
-			shape = balloonElm.getElementsByTagName( 'shape' )[ 0 ],
-			instance = this,
-			l = ',';
-		
-		function draw( _a ){
-			var rx      = w / 2,
-				ry      = h / 2,
+		this.elm   = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true ) : document.createElement( 'img' ); // pettanr.imageに変更
+		this.path  = this.elm.getElementsByTagName( IS_VML === true ? 'shape' : 'path' )[ 0 ];
+		this.resize( a, w, h );
+	};
+	XBROWSER_BALLOON_CLASS.prototype = {
+		elm   : null,
+		path  : null,
+		w     : 0,
+		h     : 0,
+		a     : 0,
+		resize : function ( _a, _w, _h ){
+			this.w  = isFinit( _w ) === true ? _w - PADDING_TOP  * 2 : this.w;
+			this.h  = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : this.h;
+			// ie6 でリサイズが反応しない対策
+			if( vectorEnabled === false && UA.isIE === true && UA.ieVersion < 7 ){
+				var parent = this.elm.parentNode;
+				parent.removeChild( this.elm );
+				parent.insertBefore( this.elm, parent.firstChild );
+			};
+			this.angle( _a );
+		},
+		angle : function( _a ){
+			if( isFinit( _a ) === true ){
+				this.a = _a;
+				if( vectorEnabled === false ){
+					this.elm.src = pettanr.balloon.getBalloonUrl( this.w, this.h, _a );
+				} else {
+					this.draw( _a );
+				};
+			};
+			return this.a;
+		},
+		type : function( _type ){
+			//draw( _a);
+		},
+		destroy : function(){
+			this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+			delete this.elm;
+			delete this.path;
+		},
+		draw : function( _a ){
+			var rx      = this.w / 2,
+				ry      = this.h / 2,
+				l       = ',',
 				tailRad = _a * DEG_TO_RAD,
 				tailX   = rx + ( rx + TAIL_HEIGHT ) * sin( tailRad ),
 				tailY   = ry - ( ry + TAIL_HEIGHT ) * cos( tailRad ),
@@ -215,7 +229,7 @@ pettanr.balloon = ( function() {
 				tailDeg = 0, d;
 			
 			for( var i = 45; i > 0.01; i /= 2){
-				d = ( tailDeg + i ) /2;
+				d = ( tailDeg + i ) / 2;
 				startRad = ( _a + d ) * DEG_TO_RAD;
 				endRad   = ( _a - d ) * DEG_TO_RAD;
 				
@@ -239,27 +253,27 @@ pettanr.balloon = ( function() {
 			if( IS_VML === true ){
 				var _tailX = tailX *10,
 					_tailY = tailY *10,
-					__w = w *10,
-					__h = h *10;
+					__w = this.w *10,
+					__h = this.h *10;
 				
-				shape.style.width = w + 'px';
-				shape.style.height = h + 'px';
-				shape.coordsize = [ __w, __h ].join( l );
-				shape.path = [
+				this.path.style.width  = this.w + 'px';
+				this.path.style.height = this.h + 'px';
+				this.path.coordsize = [ __w, __h ].join( l );
+				this.path.path = [
 					' ar ', 0, l, 0, l, __w, l, __h, l,
 					round( endX * 10 ), l, round( endY * 10 ), l,
 					round( startX * 10 ), l, round( startY * 10 ),
 					' l ', round( _tailX ), l, round( _tailY ),
 					' x e'
-				].join( '');
+				].join( '' );
 
-				balloonElm.style.marginTop =  _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;
-				balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;
+				this.elm.style.marginTop =  _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;
+				this.elm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;
 			} else {
-				balloonElm.setAttribute( 'width', w + PADDING_LEFT *2 );
-				balloonElm.setAttribute( 'height', h + PADDING_TOP *2 );
-				path.setAttribute( 'd', [
-					'M', cround( tailX + PADDING_LEFT ), l, cround( tailY + PADDING_TOP ),
+				this.elm.setAttribute( 'width',  this.w + PADDING_LEFT *2 );
+				this.elm.setAttribute( 'height', this.h + PADDING_TOP *2 );
+				this.path.setAttribute( 'd', [
+					'M', cround( tailX + PADDING_LEFT ),  l, cround( tailY  + PADDING_TOP ),
 					'L', cround( startX + PADDING_LEFT ), l, cround( startY + PADDING_TOP ),
 					'A', rx, l, ry,
 					'0 1 1',			// flag
@@ -268,40 +282,6 @@ pettanr.balloon = ( function() {
 				].join( ' '));
 			}
 		}
-		
-		this.elm = balloonElm;
-		this.resize = function ( _a, _w, _h ){
-			w  = isFinit( _w ) === true ? _w - PADDING_TOP * 2 : w;
-			h  = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : h;
-			// ie6 でリサイズが反応しない対策
-			if( vectorEnabled === false && UA.isIE === true && UA.ieVersion < 7 ){
-				var parent = balloonElm.parentNode;
-				parent.removeChild( balloonElm );
-				parent.insertBefore( balloonElm, parent.firstChild );
-			}
-			instance.angle( _a );
-		};
-		this.angle = function( _a ){
-			if( isFinit( _a ) === true ){
-				a = _a;
-				if( vectorEnabled === false ){
-					balloonElm.src = pettanr.balloon.getBalloonUrl( w, h, _a );
-				} else {
-					draw( _a );
-				}
-			}
-			return a;
-		}
-		this.type = function( _type ){
-			//draw( _a);
-		}
-		this.destroy = function(){
-			delete instance.destroy;
-			balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm );
-			balloonElm = path = shape = instance = null;
-		}
-		
-		instance.resize( a, w, h );
 	};
 	
 	return {
@@ -330,6 +310,207 @@ pettanr.balloon = ( function() {
 })();
 
 /* ----------------------------------------
+ * New Balloon
+ * 
+ * Vector : SVG, Canvas, VML, Flash, None
+ * 
+ */
+pettanr.newBalloon = ( function(){
+	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';
+		},
+		destory : function(){
+			this.elm.parentNode && this.elm.parentNode.removeChild( this.elm );
+		}
+	};
+	
+	return {
+		/**
+		 * balloon_templetes.json 取得時に呼ばれる
+		 * className は存在しない場合もある 
+		 */
+		register : function( templete ){
+			templete = $.parseJSON( templete );
+			if( templete.classname && !TEMPLETES[ templete.classname ] ){
+				TEMPLETES[ templete.classname ] = templete;
+				delete templete.classname;
+			};
+		},
+		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;
+		}
+	}
+})();
+
+/* ----------------------------------------
  *  pettanr.image
  *  
  *   xBackendな画像反転、画像描画機能。
@@ -348,7 +529,8 @@ pettanr.balloon = ( function() {
  *     - VML
  *     - flash(lite)
  *     - silverlight
- *     
+ *     - pettan server
+ * 
  *     -moz-transform:scale( -1, -1);
  */
 pettanr.image = ( function(){