samples/web/Sample/Tizen/Web App/MediaPlayer/project/js/textObject.js

   1 /*
   2  * Copyright (c) 2013, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9 var cancelShadowFlickerInterval = undefined;
  10
  11 TextObject = function(ctx, args)
  12 {
  13         /* General */
  14         this.name = args.name;
  15         this.type = "text";
  16         this.text = args.text ? args.text : "";
  17         this.xLoc = args.xLoc;
  18         this.yLoc = args.yLoc;
  19         this.zLoc = args.zLoc == undefined ? 0 : args.zLoc;
  20         this.width = args.width;
  21         this.height = args.lineHeight;
  22         this.lineHeight = args.lineHeight;
  23         this.wordWrap = args.wordWrap;
  24         this.largeShadow = args.largeShadow;
  25         this.ctx = ctx;
  26         this.visible = args.visible == undefined ? true : args.visible;
  27         this.onClick = undefined;
  28
  29         /* Text styles */
  30         this.font = args.font;
  31         this.fillStyle = args.fillStyle;
  32         this.lineWidth = args.lineWidth;
  33         this.strokeStyle = args.strokeStyle;
  34         this.textAlign = args.textAlign;
  35         this.textBaseline = args.textBaseline;
  36         this.shadowOffsetX = args.shadowOffsetX;
  37         this.shadowOffsetY = args.shadowOffsetY;
  38         this.shadowBlur = args.shadowBlur;
  39         this.shadowColor = args.shadowColor;
  40
  41         if (args.template)
  42                 this.applyTemplate(args.template);
  43
  44         if (this.wordWrap)
  45         {
  46                 var words = this.text.split(" ");
  47                 var line = "";
  48                 var tmpYloc = this.yLoc;
  49
  50                 for(var i = 0; i < words.length; i++)
  51                 {
  52                         var testLine = line + words[i] + " ";
  53                         var metrics = this.ctx.measureText(testLine);
  54                         var testWidth = metrics.width;
  55
  56                         if(testWidth > this.width)
  57                         {
  58                                 line = words[i] + " ";
  59                                 tmpYloc += this.lineHeight;
  60                                 this.height += this.lineHeight;
  61                         }
  62                         else
  63                         {
  64                                 line = testLine;
  65                         }
  66                 }
  67         }
  68 }
  69
  70 TextObject.prototype.update = function(args)
  71 {
  72         /* General */
  73         if (args.name) {this.name = args.name;}
  74         if (args.text) {this.text = args.text;}
  75         if (args.xLoc) {this.xLoc = args.xLoc;}
  76         if (args.yLoc) {this.yLoc = args.yLoc;}
  77         if (args.zLoc) {this.zLoc = args.zLoc;}
  78         if (args.width) {this.width = args.width;}
  79         if (args.lineHeight) {this.height = args.lineHeight;}
  80         if (args.lineHeight) {this.lineHeight = args.lineHeight;}
  81         if (args.wordWrap) {this.wordWrap = args.wordWrap;}
  82         if (args.largeShadow) {this.largeShadow = args.largeShadow;}
  83         if (args.ctx) {this.ctx = ctx;}
  84         if (args.visible) {this.visible = args.visible;}
  85         if (args.onClick) {this.onClick = args.onClick;}
  86
  87         /* Text styles */
  88         if (args.font) {this.font = args.font;}
  89         if (args.fillStyle) {this.fillStyle = args.fillStyle;}
  90         if (args.lineWidth) {this.lineWidth = args.lineWidth;}
  91         if (args.strokeStyle) {this.strokeStyle = args.strokeStyle;}
  92         if (args.textAlign) {this.textAlign = args.textAlign;}
  93         if (args.textBaseline) {this.textBaseline = args.textBaseline;}
  94         if (args.shadowOffsetX) {this.shadowOffsetX = args.shadowOffsetX;}
  95         if (args.shadowOffsetY) {this.shadowOffsetY = args.shadowOffsetY;}
  96         if (args.shadowBlur) {this.shadowBlur = args.shadowBlur;}
  97         if (args.shadowColor) {this.shadowColor = args.shadowColor;}
  98
  99         if (args.template)
 100                 this.applyTemplate(args.template);
 101 }
 102
 103 TextObject.prototype.drawObj = function()
 104 {
 105         if (this.visible)
 106         {
 107                 this.ctx.save();
 108
 109                 this.ctx.font = this.font;
 110                 this.ctx.fillStyle = this.fillStyle;
 111                 this.ctx.lineWidth = this.lineWidth ;
 112                 this.ctx.strokeStyle = this.strokeStyle;
 113                 this.ctx.textAlign = this.textAlign;
 114                 this.ctx.textBaseline = this.textBaseline;
 115                 this.ctx.shadowOffsetX = this.shadowOffsetX;
 116                 this.ctx.shadowOffsetY = this.shadowOffsetY;
 117                 this.ctx.shadowBlur = this.shadowBlur;
 118                 this.ctx.shadowColor = this.shadowColor;
 119
 120                 if (this.wordWrap)
 121                         this.wrapText();
 122                 else
 123                 {
 124
 125                         if (this.strokeStyle)
 126                                 this.ctx.strokeText(this.text, this.xLoc, this.yLoc);
 127
 128                         if (this.fillStyle)
 129                                 this.ctx.fillText(this.text, this.xLoc, this.yLoc);
 130
 131                         this.drawNoShadow();
 132                 }
 133
 134                 this.ctx.restore();
 135         }
 136 }
 137
 138 TextObject.prototype.applyTemplate = function(template)
 139 {
 140         this.font = template.font;
 141         this.fillStyle = template.fillStyle;
 142         this.lineWidth = template.lineWidth;
 143         this.strokeStyle = template.strokeStyle;
 144         this.textAlign = template.textAlign;
 145         this.textBaseline = template.textBaseline;
 146         this.shadowOffsetX = template.shadowOffsetX;
 147         this.shadowOffsetY = template.shadowOffsetY;
 148         this.shadowBlur = template.shadowBlur;
 149         this.shadowColor = template.shadowColor;
 150
 151         if (this.wordWrap)
 152         {
 153                 var words = this.text.split(" ");
 154                 var line = "";
 155                 var tmpYloc = this.yLoc;
 156
 157                 for(var i = 0; i < words.length; i++)
 158                 {
 159                         var testLine = line + words[i] + " ";
 160                         var metrics = this.ctx.measureText(testLine);
 161                         var testWidth = metrics.width;
 162
 163                         if(testWidth > this.width)
 164                         {
 165                                 line = words[i] + " ";
 166                                 tmpYloc += this.lineHeight;
 167                                 this.height += this.lineHeight;
 168                         }
 169                         else
 170                         {
 171                                 line = testLine;
 172                         }
 173                 }
 174         }
 175 }
 176
 177 TextObject.prototype.drawLargeShadow = function()
 178 {
 179         var origX = this.shadowOffsetX;
 180         var origY = this.shadowOffsetY;
 181
 182         this.shadowOffsetX = this.largeShadow;
 183         this.shadowOffsetY = 0;
 184         this.drawObj();
 185         this.shadowOffsetY = this.largeShadow;
 186         this.drawObj();
 187         this.shadowOffsetX = 0;
 188         this.drawObj();
 189         this.shadowOffsetX = -this.largeShadow;
 190         this.drawObj();
 191         this.shadowOffsetY = 0;
 192         this.drawObj();
 193         this.shadowOffsetY = -this.largeShadow;
 194         this.drawObj();
 195         this.shadowOffsetX = -0;
 196         this.drawObj();
 197         this.shadowOffsetX = -this.largeShadow;
 198         this.drawObj();
 199
 200         this.shadowOffsetX = origX;
 201         this.shadowOffsetY = origY;
 202 }
 203
 204 TextObject.prototype.drawNoShadow = function()
 205 {
 206         this.ctx.save();
 207
 208         this.ctx.shadowOffsetX = 0;
 209         this.ctx.shadowOffsetY = 0;
 210         this.ctx.shadowBlur = 0;
 211
 212         if (this.strokeStyle)
 213                 this.ctx.strokeText(this.text, this.xLoc, this.yLoc);
 214
 215         if (this.fillStyle)
 216                 this.ctx.fillText(this.text, this.xLoc, this.yLoc);
 217
 218         this.ctx.restore();
 219
 220 }
 221
 222 TextObject.prototype.wrapText = function()
 223 {
 224         this.ctx.save();
 225
 226         this.ctx.font = this.font;
 227         this.ctx.fillStyle = this.fillStyle;
 228         this.ctx.lineWidth = this.lineWidth ;
 229         this.ctx.strokeStyle = this.strokeStyle;
 230         this.ctx.textAlign = this.textAlign;
 231         this.ctx.textBaseline = this.textBaseline;
 232         this.ctx.shadowOffsetX = this.shadowOffsetX;
 233         this.ctx.shadowOffsetY = this.shadowOffsetY;
 234         this.ctx.shadowBlur = this.shadowBlur;
 235         this.ctx.shadowColor = this.shadowColor;
 236         this.height = this.lineHeight;
 237
 238         var words = this.text.split(" ");
 239         var line = "";
 240         var tmpYloc = this.yLoc;
 241         var lineCount = 1;
 242
 243         for(var i = 0; i < words.length; i++)
 244         {
 245                 var testLine = line + words[i] + " ";
 246                 var metrics = this.ctx.measureText(testLine);
 247                 var testWidth = metrics.width;
 248
 249                 if(testWidth > this.width)
 250                 {
 251                         if (this.strokeStyle)
 252                                 this.ctx.strokeText(line, this.xLoc, tmpYloc);
 253
 254                         if (this.fillStyle)
 255                                 this.ctx.fillText(line, this.xLoc, tmpYloc);
 256
 257                         line = words[i] + " ";
 258                         tmpYloc += this.lineHeight;
 259                         this.height += this.lineHeight;
 260                         lineCount += 1;
 261
 262                         if (lineCount >= 4)
 263                                 break;
 264                 }
 265                 else
 266                 {
 267                         line = testLine;
 268                 }
 269         }
 270
 271         if (this.strokeStyle)
 272                 this.ctx.strokeText(line, this.xLoc, tmpYloc);
 273
 274         if (this.fillStyle)
 275                 this.ctx.fillText(line, this.xLoc, tmpYloc);
 276
 277         this.ctx.restore();
 278 }
 279
 280 function shadowFlicker(obj, min, max, interval)
 281 {
 282         var tmpObj = obj;
 283
 284         if (cancelShadowFlickerInterval)
 285                 clearInterval(cancelShadowFlickerInterval);
 286
 287         cancelShadowFlickerInterval = setInterval(
 288
 289                         function(){
 290
 291                                 if (tmpObj.largeShadow)
 292                                         var shadowOffset = tmpObj.largeShadow;
 293                                 else
 294                                         var shadowOffset = tmpObj.shadowOffsetX;
 295
 296                                 if (shadowOffset > max)
 297                                         shadowOffset -= Math.floor(Math.random()*interval) + 1;
 298                                 else if (shadowOffset <= min)
 299                                         shadowOffset += Math.floor(Math.random()*interval) + 1;
 300                                 else
 301                                 {
 302                                         if (Math.floor(Math.random()*1))
 303                                                 shadowOffset += Math.floor(Math.random()*interval) + 1;
 304                                         else
 305                                                 shadowOffset -= Math.floor(Math.random()*interval) + 1;
 306                                 }
 307
 308                                 if (shadowOffset < 1)
 309                                         shadowOffset = 1;
 310
 311                                 tmpObj.ctx.clearRect(0,0,500,500);
 312
 313
 314                                 if (!tmpObj.largeShadow)
 315                                 {
 316                                         tmpObj.shadowOffsetX = shadowOffset;
 317                                         tmpObj.shadowOffsetY = shadowOffset;
 318                                         tmpObj.drawObj();
 319                                         tmpObj.largeShadow = shadowOffset;
 320                                         tmpObj.drawLargeShadow();
 321                                 }
 322                                 else
 323                                 {
 324                                         tmpObj.largeShadow = shadowOffset;
 325                                         tmpObj.drawLargeShadow();
 326                                 }
 327
 328                         }, 100);
 329 }
 330
 331 function shadowGlow(obj, min, max, speed)
 332 {
 333         var tmpObj = obj;
 334
 335         if (cancelShadowFlickerInterval)
 336                 clearInterval(cancelShadowFlickerInterval);
 337
 338         var direction = "OUT";
 339         cancelShadowFlickerInterval = setInterval(
 340
 341                         function(){
 342
 343
 344                                 if (tmpObj.largeShadow)
 345                                         var shadowOffset = tmpObj.largeShadow;
 346                                 else
 347                                         var shadowOffset = tmpObj.shadowOffsetX;
 348
 349                                 if (shadowOffset > max)
 350                                         direction = "IN";
 351                                 else if (shadowOffset <= min)
 352                                         direction = "OUT";
 353
 354                                 if (direction === "OUT")
 355                                         shadowOffset += 1;
 356                                 else
 357                                         shadowOffset -= 1;
 358
 359                                 if (shadowOffset < 1)
 360                                         shadowOffset = 1;
 361
 362                                 tmpObj.ctx.clearRect(0,0,500,500);
 363
 364
 365                                 if (!tmpObj.largeShadow)
 366                                 {
 367                                         tmpObj.shadowOffsetX = shadowOffset;
 368                                         tmpObj.shadowOffsetY = shadowOffset;
 369                                         tmpObj.drawObj();
 370                                         tmpObj.largeShadow = shadowOffset;
 371                                         tmpObj.drawLargeShadow();
 372                                 }
 373                                 else
 374                                 {
 375                                         tmpObj.largeShadow = shadowOffset;
 376                                         tmpObj.drawLargeShadow();
 377                                 }
 378
 379                         }, 100);
 380 }
 381