1(function() { 2 var bz_name_space = "com_aquafadas_bz_html5"; 3 var bz = window[bz_name_space]; 4 if (!bz) { 5 bz = {}; 6 window[bz_name_space] = bz; 7 } 8 if (!bz.MediaFrameFactoryPlugin) { 9 (function() { 10 var _NAME = "media"; 11 bz.MediaFrameFactoryPlugin = function() { 12 this.enableMediaSize = true; 13 this.enableMediaScaleMode = true; 14 this.enableReflection = false; 15 this.nestImgDiv = false; 16 this.name = _NAME; 17 }; 18 bz.MediaFrameFactoryPlugin.NAME = _NAME; 19 bz.BZPlugin.extend(bz.MediaFrameFactoryPlugin); 20 var p = bz.MediaFrameFactoryPlugin.prototype; 21 var REFLECTION_FLAG = "reflection"; 22 p.initOnce = function() { 23 this._frames = []; 24 this._cachedFrames = []; 25 this.settings = { 26 div: { 27 defaultValue: null, 28 type: bz.Types.DIV_STYLE, 29 title: "" 30 } 31 }; 32 if (this.enableMediaSize) { 33 this.settings.width = { 34 defaultValue: 120, 35 type: bz.Types.INTEGER, 36 min: 1, 37 max: 1280, 38 flags: [bz.Flags.SIZE], 39 title: "Media Width" 40 }; 41 this.settings.height = { 42 defaultValue: 90, 43 type: bz.Types.INTEGER, 44 min: 1, 45 max: 1280, 46 flags: [bz.Flags.SIZE], 47 title: "Media Height" 48 }; 49 } 50 if (this.enableMediaScaleMode) { 51 this.settings.scaleMode = { 52 defaultValue: bz.ImageMode.RECT, 53 type: bz.Types.ENUM, 54 possibleValues: [bz.ImageMode.RECT, bz.ImageMode.SCALE], 55 flags: [bz.Flags.SIZE], 56 title: "Scale Mode", 57 possibleTitles: ["Rectangle", "Scale"] 58 }; 59 } else { 60 this.props.scaleMode = bz.ImageMode.RECT; 61 } 62 if (this.enableReflection) { 63 this.nestImgDiv = true; 64 this.settings.reflection = { 65 defaultValue: bz.ImageMode.RECT, 66 type: bz.Types.BOOL, 67 flags: [REFLECTION_FLAG], 68 title: "Reflection" 69 }; 70 this.settings.reflectionRatio = { 71 defaultValue: 0.5, 72 type: bz.Types.FLOAT, 73 min: 0, 74 max: 1, 75 flags: [REFLECTION_FLAG], 76 title: "Spread" 77 }; 78 this.settings.reflectionAlpha = { 79 defaultValue: 0.3, 80 type: bz.Types.FLOAT, 81 min: 0, 82 max: 1, 83 flags: [REFLECTION_FLAG], 84 title: "Opacity" 85 }; 86 } 87 }; 88 p.startOnce = function() {}; 89 p.update = function(flags) { 90 var bgColor = this.getThemeBgColor(); 91 for (var iFrame = 0, lenFrame = this._frames.length; iFrame < lenFrame; iFrame++) { 92 var frame = this._frames[iFrame]; 93 if (!flags || flags[bz.Flags.STYLE] || flags[bz.Flags.DIV_STYLE]) { 94 frame.updateStyle(); 95 } 96 if (!flags || flags[bz.Flags.SIZE] || flags[bz.Flags.DIV_STYLE]) { 97 frame.setFrameSize(this.props.width, this.props.height, this.props.scaleMode); 98 } 99 if (this.enableReflection) { 100 if (!flags || flags[bz.Flags.SIZE] || flags[bz.Flags.STYLE] || flags[REFLECTION_FLAG]) { 101 frame.updateReflection(bgColor); 102 } 103 } 104 } 105 }; 106 p.onParamChanged = function(settingObject) { 107 if (this.enableReflection && settingObject.propertyName == "div_bgColor" && settingObject.plugin == this.theme.getPlugin(bz.ThemePlugin)) { 108 this.update(); 109 } 110 }; 111 p.getThemeBgColor = function() { 112 var plugin = this.theme.getPlugin(bz.ThemePlugin); 113 return plugin.props.div_bgColor; 114 }; 115 p.getFrame = function() { 116 var frame; 117 if (this._cachedFrames.length > 0) { 118 frame = this._cachedFrames.pop(); 119 } else { 120 frame = new bz.MediaFrame(this.theme, this.nestImgDiv); 121 frame.props = this.props; 122 } 123 this._frames.push(frame); 124 frame.updateStyle(this.props); 125 if (this.props.width && this.props.height) { 126 frame.setFrameSize(this.props.width, this.props.height, this.props.scaleMode); 127 if (!this.props.scaleMode) throw new Error(); 128 } 129 if (this.enableReflection) frame.updateReflection(this.getThemeBgColor()); 130 return frame; 131 }; 132 p.releaseFrame = function(frame) { 133 frame.setMedia(null); 134 bz.ArrayUtils.removeItem(this._frames, frame); 135 this._cachedFrames.push(frame); 136 }; 137 p.fillFrameArray = function(array, length, addToThemeDiv) { 138 var frame; 139 if (array.length < length) { 140 while (array.length < length) { 141 frame = this.getFrame(); 142 array.push(frame); 143 if (addToThemeDiv) { 144 this.theme.animationDiv.appendChild(frame.div); 145 } 146 } 147 } else { 148 while (array.length > length) { 149 frame = array.pop();
150 this.releaseFrame(frame); 151 if (addToThemeDiv) { 152 this.theme.animationDiv.removeChild(frame.div); 153 } 154 } 155 } 156 }; 157 bz.MediaFrame = function(theme, nestImgDiv) { 158 this.nestImgDiv = nestImgDiv; 159 this.theme = theme; 160 this.media = null; 161 this.mediaUseCountEnabled = false; 162 this.frameWidth = 0; 163 this.frameHeight = 0; 164 this.width = 0; 165 this.height = 0; 166 this.scaleMode = bz.ImageMode.RECT; 167 this.div = document.createElement("div"); 168 this.div.style.position = "absolute"; 169 this.div.style.top = "0px"; 170 this.div.style.left = "0px"; 171 if (nestImgDiv) { 172 this.imgDiv = document.createElement("div"); 173 this.imgDiv.style.position = "absolute"; 174 this.imgDiv.style.top = "0px"; 175 this.imgDiv.style.left = "0px"; 176 this.div.appendChild(this.imgDiv); 177 } else { 178 this.imgDiv = this.div; 179 } 180 this.reflectionCanvas = null; 181 var self = this; 182 this.div.onclick = function() { 183 theme.onMediaClick(self.media, self.frame); 184 }; 185 }; 186 p = bz.MediaFrame.prototype; 187 p.setMedia = function(media) { 188 if (this.media == media) return; 189 if (this.media) { 190 this.media.onLoadSignal.remove(this._onMediaLoaded, this); 191 if (this.mediaUseCountEnabled) { 192 this.media.decrUseCount(); 193 } 194 } 195 this.media = media; 196 if (this.media && this.mediaUseCountEnabled) { 197 this.media.incrUseCount(); 198 } 199 this.imgDiv.style.backgroundImage = null; 200 if (this.reflectionCanvas) { 201 this.div.removeChild(this.reflectionCanvas); 202 this.reflectionCanvas = null; 203 } 204 if (media) { 205 if (media.loaded) { 206 this._onMediaLoaded(null); 207 } else { 208 if (media.sizeDefined) { 209 this._updateSize(); 210 } 211 media.onLoadSignal.add(this._onMediaLoaded, this, 1); 212 media.load(); 213 } 214 } 215 if (media && media.url) { 216 bz.CSS.setButtonMode(this.div, true); 217 } else { 218 bz.CSS.setButtonMode(this.div, false); 219 } 220 }; 221 p._onMediaLoaded = function(eventTarget) { 222 this.imgDiv.style.backgroundImage = "url('" + this.media.path + "')"; 223 this._updateSize(); 224 this.updateReflection(); 225 }; 226 p.setFrameSize = function(width, height, scaleMode) { 227 this.frameWidth = width; 228 this.frameHeight = height; 229 this.scaleMode = scaleMode; 230 if (this.media && this.media.sizeDefined) { 231 this._updateSize(); 232 } else { 233 this._setSize(width, height); 234 } 235 }; 236 p._updateSize = function() { 237 var borderWidth = this.props.div_borderWidth; 238 var scaleX = (this.frameWidth - 2 * borderWidth) / this.media.width; 239 var scaleY = (this.frameHeight - 2 * borderWidth) / this.media.height; 240 var scale; 241 if (this.scaleMode == bz.ImageMode.RECT) { 242 scale = Math.max(scaleX, scaleY); 243 } else { 244 scale = Math.min(scaleX, scaleY); 245 } 246 var imgW = Math.round(this.media.width * scale); 247 var imgH = Math.round(this.media.height * scale); 248 if (this.scaleMode == bz.ImageMode.RECT) { 249 this._setSize(this.frameWidth, this.frameHeight); 250 } else { 251 this._setSize(imgW + 2 * borderWidth, imgH + 2 * borderWidth); 252 } 253 var x = Math.round((this.innerWidth - imgW) / 2); 254 var y = Math.round((this.innerHeight - imgH) / 2); 255 this.imgDiv.style.backgroundSize = imgW + "px " + imgH + "px"; 256 this.imgDiv.style.backgroundPosition = x + "px " + y + "px"; 257 this.bgX = x; 258 this.bgY = y; 259 this.bgW = imgW; 260 this.bgH = imgH; 261 this.imgW = imgW; 262 this.imgH = imgH; 263 this.imgX = x; 264 this.imgY = y; 265 }; 266 p._setSize = function(width, height) { 267 var borderWidth = this.props.div_borderWidth; 268 this.width = width; 269 this.height = height; 270 this.innerWidth = width - 2 * borderWidth; 271 this.innerHeight = height - 2 * borderWidth; 272 if (this.nestImgDiv) bz.CSS.setSize(this.imgDiv, this.innerWidth, this.innerHeight); 273 bz.CSS.setSize(this.div, this.innerWidth, this.innerHeight); 274 }; 275 p.updateStyle = function() { 276 bz.CSS.divStyle(this.imgDiv, this.props); 277 }; 278 p.updateReflection = function(bgColor) { 279 if (arguments.length == 0) { 280 bgColor = this._bgColor; 281 } else { 282 this._bgColor = bgColor; 283 } 284 if (!this.imgW || !this.imgH) return; 285 if (this.props.reflection && this.media) { 286 if (!this.reflectionCanvas) { 287 this.reflectionCanvas = document.createElement("canvas"); 288 this.div.appendChild(this.reflectionCanvas); 289 this.reflectionCanvas.style.position = "absolute"; 290 this._updateZIndexes(); 291 } 292 var ctx; 293 var ratio = this.props.reflectionRatio; 294 var bw = this.props.div_borderWidth; 295 var w = this.width, 296 h = this.height;
297 var hb = Math.ceil(bw / 2); 298 var tempCanvas = document.createElement("canvas"); 299 ctx = tempCanvas.getContext('2d'); 300 tempCanvas.width = this.imgW + 2 * this.imgX + 2 * hb; 301 tempCanvas.height = this.imgH + 2 * this.imgY + 2 * hb; 302 ctx.translate(this.imgX, this.imgY + this.imgH); 303 ctx.scale(1, -1); 304 ctx.drawImage(this.media.img, 0, 0, this.imgW + 2 * hb, this.imgH + 2 * hb); 305 var c = this.reflectionCanvas; 306 ctx = c.getContext('2d'); 307 c.width = w; 308 c.height = h * ratio; 309 c.style.top = h + "px"; 310 var ptrn = ctx.createPattern(tempCanvas, 'no-repeat'); 311 ctx.fillStyle = ptrn; 312 ctx.strokeStyle = bz.CSS.colorRGB(this.props.div_borderColor); 313 ctx.lineWidth = bw; 314 var bOffset = bw / 2; 315 ctx.translate(bOffset, bOffset); 316 bz.CanvasUtils.drawRoundRect(ctx, w - bw, h - bw, this.props.div_borderRadius, true, bw > 0); 317 var grad = ctx.createLinearGradient(0, 0, 0, c.height); 318 grad.addColorStop(0, bz.CSS.colorRGB(bgColor, 1 - this.props.reflectionAlpha)); 319 grad.addColorStop(1, bz.CSS.colorRGB(bgColor, 1)); 320 ctx.setTransform(1, 0, 0, 1, 0, 0); 321 ctx.fillStyle = grad; 322 ctx.globalCompositeOperation = "source-atop"; 323 ctx.rect(0, 0, c.width, c.height); 324 ctx.fill(); 325 } else { 326 if (this.reflectionCanvas) { 327 this.div.removeChild(this.reflectionCanvas); 328 this.reflectionCanvas = null; 329 } 330 } 331 }; 332 p.setZindexes = function(zIndex, reflectionZIndex) { 333 this.zIndex = zIndex; 334 this.reflectionZIndex = reflectionZIndex; 335 this._updateZIndexes(); 336 }; 337 p._updateZIndexes = function() { 338 if (this.zIndex !== undefined) { 339 this.imgDiv.style.zIndex = this.zIndex; 340 if (this.reflectionCanvas) { 341 this.reflectionCanvas.style.zIndex = this.reflectionZIndex; 342 } 343 } 344 }; 345 })(); 346 } 347 if (!bz.MediaTextFactoryPlugin) { 348 (function() { 349 bz.MediaTextFactoryPlugin = function(title) { 350 if (title) { 351 this.name = "title"; 352 } else { 353 this.name = "date"; 354 } 355 }; 356 bz.MediaTextFactoryPlugin.NAME = "text"; 357 bz.BZPlugin.extend(bz.MediaTextFactoryPlugin); 358 var p = bz.MediaTextFactoryPlugin.prototype; 359 p.initOnce = function() { 360 this._texts = []; 361 this._cachedTexts = []; 362 this.settings = { 363 size: { 364 defaultValue: 12, 365 type: bz.Types.INTEGER, 366 min: 0, 367 max: 64, 368 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 369 title: "Size" 370 }, 371 color: { 372 defaultValue: 0x0, 373 type: bz.Types.COLOR, 374 flags: [bz.Flags.STYLE], 375 title: "Color" 376 }, 377 fontType: { 378 defaultValue: bz.FontTypes.GOOGLE_FONT, 379 type: bz.Types.ENUM, 380 possibleValues: bz.FontTypesArray, 381 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 382 title: "Font Type" 383 }, 384 font: { 385 defaultValue: bz.Fonts.ARIAL, 386 type: bz.Types.FONT, 387 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 388 title: "Font" 389 }, 390 googleFont: { 391 defaultValue: bz.GoogleFonts.CONDIMENT, 392 type: bz.Types.ENUM, 393 possibleValues: bz.GoogleFontsArray, 394 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 395 title: "Google Font" 396 }, 397 customFont: { 398 defaultValue: bz.GoogleFonts.CONDIMENT, 399 type: bz.Types.TEXT, 400 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 401 title: "Custom Font" 402 }, 403 align: { 404 defaultValue: bz.Align.LEFT, 405 type: bz.Types.TEXT_ALIGN, 406 flags: [bz.Flags.STYLE], 407 title: "Align" 408 }, 409 visible: { 410 defaultValue: true, 411 type: bz.Types.BOOL, 412 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 413 title: "Visible" 414 }, 415 div: { 416 defaultValue: { 417 bgAlpha: 0 418 }, 419 type: bz.Types.DIV_STYLE, 420 title: "" 421 }, 422 paddingLeft: { 423 defaultValue: 5, 424 type: bz.Types.INTEGER, 425 min: 0, 426 max: 800, 427 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 428 title: "Padding Left" 429 }, 430 paddingRight: { 431 defaultValue: 5, 432 type: bz.Types.INTEGER, 433 min: 0, 434 max: 800, 435 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 436 title: "Padding Right" 437 }, 438 paddingTop: { 439 defaultValue: 5, 440 type: bz.Types.INTEGER, 441 min: 0, 442 max: 800, 443 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 444 title: "Padding Top" 445 }, 446 paddingBottom: { 447 defaultValue: 5, 448 type: bz.Types.INTEGER, 449 min: 0, 450 max: 800, 451 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 452 title: "Padding Bottom" 453 } 454 }; 455 }; 456 p.startOnce = function() {}; 457 p.update = function(flags) { 458 if (!flags || flags[bz.Flags.STYLE] || flags[bz.Flags.SIZE]) { 459 for (var iText = 0, lenFrame = this._texts.length; iText < lenFrame; iText++) { 460 var text = this._texts[iText];
461 text.update(); 462 } 463 if (this.onResize) this.onResize(); 464 } 465 }; 466 p.getText = function() { 467 var text; 468 if (this._cachedTexts.length > 0) { 469 text = this._cachedTexts.pop(); 470 } else { 471 text = new bz.MediaText(this.theme, this.name == "title"); 472 text.props = this.props; 473 } 474 this._texts.push(text); 475 text.update(); 476 return text; 477 }; 478 p.releaseText = function(text) { 479 text.setMedia(null); 480 bz.ArrayUtils.removeItem(this._texts, text); 481 this._cachedTexts.push(text); 482 }; 483 bz.MediaText = function(theme, isTitle) { 484 this.theme = theme; 485 this.media = null; 486 this.isTitle = isTitle; 487 this.div = document.createElement("div"); 488 bz.CSS.setBoxSizing(this.div); 489 this.div.style.position = "absolute"; 490 this.div.style.top = "0px"; 491 this.div.style.left = "0px"; 492 this.span = document.createElement("span"); 493 this.div.appendChild(this.span); 494 var self = this; 495 this.div.onclick = function() { 496 self.theme.onMediaClick(self.media, self); 497 }; 498 this.onResize = null; 499 }; 500 p = bz.MediaText.prototype; 501 p.setMedia = function(media) { 502 this.media = media; 503 if (media) { 504 if (this.isTitle) { 505 this.span.innerHTML = media.title; 506 } else { 507 this.span.innerHTML = media.date; 508 } 509 } else { 510 this.span.innerHTML = null; 511 } 512 this.div.style.display = (media && this.props.visible) ? "block" : "none"; 513 if (media && media.url) { 514 bz.CSS.setButtonMode(this.div, true); 515 } else { 516 bz.CSS.setButtonMode(this.div, false); 517 } 518 if (this.onResize) this.onResize(); 519 }; 520 p.update = function() { 521 this.div.style.paddingLeft = this.props.paddingLeft + "px"; 522 this.div.style.paddingRight = this.props.paddingRight + "px"; 523 this.div.style.paddingTop = this.props.paddingTop + "px"; 524 this.div.style.paddingBottom = this.props.paddingBottom + "px"; 525 bz.CSS.textStyle(this.div, this.span, this.props, this.onResize); 526 bz.CSS.divStyle(this.div, this.props); 527 this.div.style.display = (this.media && this.props.visible) ? "block" : "none"; 528 if (this.onResize) this.onResize(); 529 }; 530 })(); 531 } 532 if (!bz.FreePositionPlugin) { 533 (function() { 534 var _NAME = "free"; 535 bz.FreePositionPlugin = function(target, enableWidth, enableHeight) { 536 this.targetName = target; 537 this.name = _NAME + target; 538 this.enableWidth = enableWidth; 539 this.enableHeight = enableHeight; 540 }; 541 bz.FreePositionPlugin.NAME = _NAME; 542 bz.BZPlugin.extend(bz.FreePositionPlugin); 543 var p = bz.FreePositionPlugin.prototype; 544 p.initOnce = function() { 545 this.settings = { 546 xOffset: { 547 defaultValue: 0, 548 type: bz.Types.INTEGER, 549 flags: [bz.Flags.SIZE], 550 min: -1000, 551 max: 1000, 552 title: "X Offset:" 553 }, 554 yOffset: { 555 defaultValue: 0, 556 type: bz.Types.INTEGER, 557 flags: [bz.Flags.SIZE], 558 min: -1000, 559 max: 1000, 560 title: "Y Offset:" 561 }, 562 xPosition: { 563 defaultValue: 70, 564 unit: "%", 565 type: bz.Types.FLOAT, 566 flags: [bz.Flags.SIZE], 567 min: 0, 568 max: 100, 569 title: "X Position:" 570 }, 571 yPosition: { 572 defaultValue: 70, 573 unit: "%", 574 type: bz.Types.FLOAT, 575 flags: [bz.Flags.SIZE], 576 min: 0, 577 max: 100, 578 title: "Y Position:" 579 }, 580 xAlign: { 581 defaultValue: bz.Pos.CENTER, 582 type: bz.Types.ENUM, 583 flags: [bz.Flags.SIZE], 584 possibleValues: [bz.Pos.LEFT, bz.Pos.RIGHT, bz.Pos.CENTER], 585 title: "X Align:" 586 }, 587 yAlign: { 588 defaultValue: bz.Pos.CENTER, 589 type: bz.Types.ENUM, 590 flags: [bz.Flags.SIZE], 591 possibleValues: [bz.Pos.TOP, bz.Pos.BOTTOM, bz.Pos.CENTER], 592 title: "Y Align:" 593 }, 594 zIndex: { 595 defaultValue: 0, 596 type: bz.Types.INTEGER, 597 flags: [bz.Flags.SIZE], 598 min: 0, 599 max: 10, 600 title: "Z-index:" 601 }, 602 includeIn3DSpace: { 603 defaultValue: false, 604 type: bz.Types.BOOL, 605 flags: ["parent"], 606 title: "Include in 3D space:" 607 } 608 }; 609 if (this.enableWidth) { 610 this.settings.manualWidth = { 611 defaultValue: false, 612 type: bz.Types.BOOL, 613 flags: [bz.Flags.SIZE], 614 title: "Manual Width:" 615 }; 616 this.settings.width = { 617 defaultValue: 50, 618 type: bz.Types.INTEGER, 619 min: 1, 620 max: 1000, 621 flags: [bz.Flags.SIZE], 622 title: "Width:" 623 }; 624 } 625 if (this.enableHeight) { 626 this.settings.manualHeight = { 627 defaultValue: false, 628 type: bz.Types.BOOL, 629 flags: [bz.Flags.SIZE], 630 title: "Manual Height:" 631 }; 632 this.settings.height = { 633 defaultValue: 50, 634 type: bz.Types.INTEGER, 635 min: 1, 636 max: 1000, 637 flags: [bz.Flags.SIZE], 638 title: "Height:" 639 }; 640 } 641 }; 642 p.startOnce = function() { 643 var div = document.createElement("div"); 644 s = div.style; 645 s.position = "absolute"; 646 s.whiteSpace = "nowrap"; 647 this.div = div; 648 this.updateParent(); 649 }; 650 p.updateParent = function() { 651 if (this.div) { 652 if (this.props.includeIn3DSpace) { 653 this.theme.animationDiv.appendChild(this.div); 654 } else { 655 this.theme.div.appendChild(this.div); 656 } 657 } 658 }; 659 p.update = function(flags) { 660 if (!flags || flags[bz.Flags.SIZE] || flags[bz.Flags.THEME_SIZE]) { 661 this.updatePosition(); 662 } 663 if (!flags || flags["parent"]) { 664 this.updateParent(); 665 } 666 }; 667 p.setContentElement = function(contentElement) { 668 this.contentElement = contentElement; 669 this.contentElement.style.position = "relative"; 670 this.div.appendChild(this.contentElement); 671 this.updatePosition(); 672 }; 673 p.updatePosition = function() { 674 if (this.contentElement) { 675 var p = this.props; 676 this.div.style.zIndex = this.props.zIndex; 677 this.setPosition(this.div, this.contentElement, p.xPosition, p.yPosition, p.xAlign, p.yAlign, p.xOffset, p.yOffset); 678 } 679 }; 680 p.setPosition = function(holder, div, xPos, yPos, xAlign, yAlign, xOffset, yOffset) { 681 if (this.enableWidth) { 682 div.style.width = this.props.manualWidth ? this.props.width + "px" : "auto"; 683 } 684 if (this.enableHeight) { 685 div.style.height = this.props.manualHeight ? this.props.height + "px" : "auto"; 686 } 687 holder.style.left = xPos + "%"; 688 holder.style.top = yPos + "%"; 689 holder.style.marginLeft = xOffset + "px"; 690 holder.style.marginTop = yOffset + "px"; 691 var pos; 692 if (xAlign == bz.Pos.LEFT) { 693 pos = -100; 694 } else if (xAlign == bz.Pos.RIGHT) { 695 pos = 0; 696 } else { 697 pos = -50; 698 } 699 div.style.left = pos + "%"; 700 if (yAlign == bz.Pos.TOP) { 701 pos = -100; 702 } else if (yAlign == bz.Pos.BOTTOM) { 703 pos = 0; 704 } else { 705 pos = -50; 706 } 707 div.style.top = Math.round((pos / 100) * div.offsetHeight) + "px"; 708 }; 709 })(); 710 } 711 if (!bz.ArrowsPlugin) { 712 (function() { 713 var _NAME = "arrows"; 714 bz.ArrowsPlugin = function() { 715 this.name = _NAME; 716 }; 717 bz.ArrowsPlugin.NAME = _NAME; 718 bz.BZPlugin.extend(bz.ArrowsPlugin); 719 var p = bz.ArrowsPlugin.prototype; 720 var assetArray = [{ 721 name: "Arrow", 722 path: "arrow", 723 width: 100, 724 height: 20, 725 svg: 1 726 }, { 727 name: "Bold 1", 728 path: "bold1", 729 width: 50, 730 height: 50, 731 svg: 1 732 }, { 733 name: "Bold 2", 734 path: "bold2", 735 width: 50, 736 height: 50, 737 svg: 1 738 }, { 739 name: "Bold 3", 740 path: "bold3", 741 width: 50, 742 height: 50, 743 svg: 1 744 }, { 745 name: "Dotted 1", 746 path: "dotted1", 747 width: 50, 748 height: 50, 749 svg: 1 750 }, { 751 name: "Dotted 2", 752 path: "dotted2", 753 width: 50, 754 height: 50, 755 svg: 1 756 }, { 757 name: "Double 1", 758 path: "double1", 759 width: 50, 760 height: 50, 761 svg: 1 762 }, { 763 name: "Double 2", 764 path: "double2", 765 width: 50, 766 height: 50, 767 svg: 1 768 }, { 769 name: "Light 1", 770 path: "light1", 771 width: 50, 772 height: 50, 773 svg: 1 774 }, { 775 name: "Light 2", 776 path: "light2", 777 width: 50, 778 height: 50, 779 svg: 1 780 }, { 781 name: "Light 3", 782 path: "light3", 783 width: 50, 784 height: 50, 785 svg: 1 786 }, { 787 name: "Medium 1",
788 path: "medium1", 789 width: 50, 790 height: 50, 791 svg: 1 792 }, { 793 name: "Medium 2", 794 path: "medium2", 795 width: 50, 796 height: 50, 797 svg: 1 798 }, { 799 name: "Sketched", 800 path: "sketched", 801 width: 80, 802 height: 40, 803 svg: 1 804 }]; 805 var assetsPossibleValues = []; 806 var assetMap = {}; 807 for (var i = 0; i < assetArray.length; i++) { 808 assetsPossibleValues.push(assetArray[i].name); 809 assetMap[assetArray[i].name] = assetArray[i]; 810 } 811 var HORIZONTAL = "Horizontal"; 812 var VERTICAL = "Vertical"; 813 var CORNER = "Corner"; 814 var TOP = "Top"; 815 var CENTER = "Center"; 816 var BOTTOM = "Bottom"; 817 p.initOnce = function() { 818 this.settings = { 819 style: { 820 defaultValue: "Bold 1", 821 type: bz.Types.ENUM, 822 flags: [bz.Flags.SIZE, bz.Flags.STYLE, "content"], 823 title: "Style", 824 possibleValues: assetsPossibleValues 825 }, 826 color: { 827 defaultValue: 0x7777FF, 828 type: bz.Types.COLOR, 829 flags: [bz.Flags.STYLE], 830 title: "Color" 831 }, 832 size: { 833 defaultValue: 100, 834 min: 1, 835 max: 500, 836 type: bz.Types.INTEGER, 837 unit: "%", 838 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 839 title: "Size" 840 }, 841 hMargin: { 842 defaultValue: 5, 843 type: bz.Types.INTEGER, 844 min: -200, 845 max: 200, 846 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 847 title: "Horizontal Margin" 848 }, 849 vMargin: { 850 defaultValue: 5, 851 type: bz.Types.INTEGER, 852 min: -200, 853 max: 200, 854 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 855 title: "Vertical Margin" 856 }, 857 gap: { 858 defaultValue: 5, 859 type: bz.Types.INTEGER, 860 min: 0, 861 max: 64, 862 flags: [bz.Flags.STYLE, bz.Flags.SIZE], 863 title: "Gap:" 864 }, 865 direction: { 866 defaultValue: HORIZONTAL, 867 type: bz.Types.ENUM, 868 flags: [bz.Flags.SIZE], 869 title: "Direction", 870 possibleValues: [HORIZONTAL, VERTICAL] 871 }, 872 position: { 873 defaultValue: CENTER, 874 type: bz.Types.ENUM, 875 flags: [bz.Flags.SIZE], 876 title: "Position", 877 possibleValues: [CENTER, TOP, BOTTOM, CORNER] 878 }, 879 loop: { 880 defaultValue: true, 881 type: bz.Types.BOOL, 882 flags: [bz.Flags.SIZE], 883 title: "Loop" 884 }, 885 visible: { 886 defaultValue: true, 887 type: bz.Types.BOOL, 888 flags: [bz.Flags.SIZE], 889 title: "Visible" 890 } 891 }; 892 }; 893 p.startOnce = function() { 894 var self = this; 895 this.prevDiv = document.createElement("div"); 896 this.prevDiv.onclick = function() { 897 self.prev() 898 }; 899 this.prevDiv.style.cssText = "z-index:10000; position:absolute;"; 900 bz.CSS.backfaceVisibility(this.prevDiv, false); 901 this.theme.div.appendChild(this.prevDiv); 902 this.nextDiv = document.createElement("div"); 903 this.nextDiv.onclick = function() { 904 self.next() 905 }; 906 this.nextDiv.style.cssText = "z-index:10000; position:absolute;"; 907 bz.CSS.backfaceVisibility(this.nextDiv, false); 908 this.theme.div.appendChild(this.nextDiv); 909 bz.CSS.setButtonMode(this.prevDiv, true); 910 bz.CSS.setButtonMode(this.nextDiv, true); 911 this.setMedia(null); 912 }; 913 p.getPath = function(asset, left) { 914 var path = "arrows/" + asset.path; 915 if (left) { 916 path += "L"; 917 } else { 918 path += "R"; 919 } 920 if (!asset.svg) { 921 path += ".png"; 922 } else { 923 path += ".svg"; 924 } 925 return this.theme.getAssetPath(path); 926 }; 927 p.update = function(flags) { 928 var asset = assetMap[this.props.style]; 929 if (!flags || flags["content"]) { 930 this.createImage(asset, this.getPath(asset, true), this.prevDiv); 931 this.createImage(asset, this.getPath(asset, false), this.nextDiv); 932 } 933 this.updateImage(this.prevDiv); 934 this.updateImage(this.nextDiv); 935 if (this._media) this.setMedia(this._media); 936 this.layoutArrows(); 937 }; 938 p.layoutArrows = function() { 939 var size1, size2, pos1, pos2, themeSize1, themeSize2, pos1Value, pos2Value, margin, cssMargin; 940 var oppositeMargin = this.props.position == BOTTOM || this.props.position == CORNER; 941 if (this.props.direction == HORIZONTAL) { 942 size1 = "width"; 943 size2 = "height"; 944 pos1 = "left"; 945 pos2 = "top"; 946 themeSize1 = "innerWidth";
947 themeSize2 = "innerHeight"; 948 margin = this.props.hMargin; 949 if (oppositeMargin) { 950 cssMargin = -this.props.vMargin + "px 0"; 951 } else { 952 cssMargin = this.props.vMargin + "px 0"; 953 } 954 } else { 955 size1 = "height"; 956 size2 = "width"; 957 pos1 = "top"; 958 pos2 = "left"; 959 themeSize1 = "innerHeight"; 960 themeSize2 = "innerWidth"; 961 margin = this.props.vMargin; 962 if (oppositeMargin) { 963 cssMargin = "0 -" + this.props.hMargin + "px"; 964 } else { 965 cssMargin = "0 " + this.props.hMargin + "px"; 966 } 967 } 968 var assetSize = { 969 width: this.nextDiv._w, 970 height: this.nextDiv._h 971 }; 972 pos1Value = (this.theme[themeSize1] - margin - assetSize.width); 973 this.nextDiv.style[pos1] = pos1Value + "px"; 974 if (this.props.position == CORNER) { 975 this.prevDiv.style[pos1] = (pos1Value - assetSize.width - this.props.gap) + "px"; 976 } else { 977 this.prevDiv.style[pos1] = margin + "px"; 978 } 979 switch (this.props.position) { 980 case TOP: 981 pos2Value = 0; 982 break; 983 case CENTER: 984 pos2Value = ~~((this.theme[themeSize2] - assetSize.height) / 2); 985 break; 986 case BOTTOM: 987 case CORNER: 988 pos2Value = this.theme[themeSize2] - assetSize.height; 989 break; 990 } 991 this.nextDiv.style[pos2] = pos2Value + "px"; 992 this.prevDiv.style[pos2] = pos2Value + "px"; 993 if (this.props.direction == HORIZONTAL) { 994 bz.CSS.transform(this.nextDiv, null); 995 bz.CSS.transform(this.prevDiv, null); 996 } else { 997 bz.CSS.transformOrigin(this.nextDiv, "0 0"); 998 bz.CSS.transformOrigin(this.prevDiv, "0 0"); 999 var rotateTransform = "rotate(90deg) translateY(-" + assetSize.height + "px)"; 1000 bz.CSS.transform(this.nextDiv, rotateTransform); 1001 bz.CSS.transform(this.prevDiv, rotateTransform); 1002 } 1003 this.nextDiv.style.margin = cssMargin; 1004 this.prevDiv.style.margin = cssMargin; 1005 }; 1006 p.createImage = function(asset, path, div) { 1007 while (div.firstChild) { 1008 div.removeChild(div.firstChild); 1009 } 1010 div._bz_asset = asset; 1011 div._bz_svg = false; 1012 var img; 1013 if (asset.svg) { 1014 img = document.createElement("object"); 1015 var self = this; 1016 img.onload = function() { 1017 console.log("svg loaded"); 1018 div._bz_svg = true; 1019 self.updateImage(div); 1020 self.layoutArrows(); 1021 }; 1022 img.type = "image/svg+xml"; 1023 img.data = path; 1024 } else { 1025 img = document.createElement("img"); 1026 img.src = path; 1027 } 1028 div.appendChild(img); 1029 if (asset.svg) { 1030 var d = document.createElement("div"), 1031 s = d.style; 1032 s.position = "absolute"; 1033 s.left = "0"; 1034 s.right = "0"; 1035 s.top = "0"; 1036 s.bottom = "0"; 1037 s.buttonMode = true; 1038 div.appendChild(d); 1039 } 1040 }; 1041 p.updateImage = function(div) { 1042 var w = div._bz_asset.width, 1043 h = div._bz_asset.height; 1044 if (div._bz_svg) { 1045 w *= this.props.size / 100; 1046 h *= this.props.size / 100; 1047 } 1048 div.style.width = w + "px"; 1049 div.style.height = h + "px"; 1050 div.firstChild.width = w; 1051 div.firstChild.height = h; 1052 div._w = w; 1053 div._h = h; 1054 if (div._bz_svg) { 1055 try { 1056 var svgObject = div.firstChild; 1057 var svgDoc = svgObject.contentDocument || svgObject.getSVGDocument(); 1058 if (svgDoc) { 1059 _setStyleRecursively(svgDoc, bz.CSS.colorHex(this.props.color)); 1060 } 1061 } catch (e) { 1062 console.warn(e); 1063 } 1064 } 1065 }; 1066 var _setStyleRecursively = function(node, color) { 1067 if (node.getAttribute) { 1068 var a = node.getAttribute("fill"); 1069 if (a && a != "none") node.setAttribute("fill", color); 1070 a = node.getAttribute("stroke"); 1071 if (a && a != "none") node.setAttribute("stroke", color); 1072 } 1073 if (node.childNodes) { 1074 for (var i = 0; i < node.childNodes.length; i++) { 1075 _setStyleRecursively(node.childNodes[i], color); 1076 } 1077 } 1078 };
1079 p.setCallback = function(changeCallBack, changeScope) { 1080 this._changeCallBack = changeCallBack; 1081 this._changeScope = changeScope; 1082 }; 1083 p.setMedia = function(media) { 1084 this._media = media; 1085 if (!media || !this.props.visible || (media.isFirst && !this.props.loop)) { 1086 bz.CSS.setVisible(this.prevDiv, false); 1087 } else { 1088 bz.CSS.setVisible(this.prevDiv, true); 1089 } 1090 if (!media || !this.props.visible || (media.isLast && !this.props.loop)) { 1091 bz.CSS.setVisible(this.nextDiv, false); 1092 } else { 1093 bz.CSS.setVisible(this.nextDiv, true); 1094 } 1095 }; 1096 p.next = function() { 1097 if (this._changeCallBack) { 1098 this._changeCallBack.apply(this._changeScope, [true]); 1099 } 1100 }; 1101 p.prev = function() { 1102 if (this._changeCallBack) { 1103 this._changeCallBack.apply(this._changeScope, [false]); 1104 } 1105 }; 1106 })(); 1107 } 1108 if (!bz.MultiImagesPlugin) { 1109 (function() { 1110 var _NAME = "multi"; 1111 bz.MultiImagesPlugin = function(centerImages) { 1112 this.name = _NAME; 1113 this.log = true; 1114 this.centerImages = centerImages; 1115 }; 1116 bz.MultiImagesPlugin.NAME = _NAME; 1117 bz.BZPlugin.extend(bz.MultiImagesPlugin); 1118 var p = bz.MultiImagesPlugin.prototype; 1119 var CONSTANT = "Constant", 1120 LINEAR = "Linear", 1121 LOG = "Log", 1122 BACK = "Back", 1123 LOOP = "Loop", 1124 FAST_REWIND = "Fast rewind", 1125 OPEN_URL = "Open URL", 1126 DISPLAY_IMAGE = "Display Image", 1127 BOTH = "Both"; 1128 p.initOnce = function() { 1129 this.settings = { 1130 animDuration: { 1131 defaultValue: 1, 1132 type: bz.Types.TIME, 1133 flags: [bz.Flags.TIMER], 1134 min: 0.1, 1135 max: 60, 1136 title: "Duration" 1137 }, 1138 animDurationScaling: { 1139 defaultValue: LOG, 1140 type: bz.Types.ENUM, 1141 possibleValues: [CONSTANT, LINEAR, LOG], 1142 flags: [bz.Flags.TIMER], 1143 title: "Loop speed:" 1144 }, 1145 progressEasing: { 1146 defaultValue: ["easeout", "linear"], 1147 type: bz.Types.EASING, 1148 flags: [bz.Flags.TIMER], 1149 title: "Progress Easing" 1150 }, 1151 pauseDuration: { 1152 defaultValue: 2, 1153 type: bz.Types.TIME, 1154 flags: [bz.Flags.TIMER], 1155 min: 0, 1156 max: 60, 1157 title: "Pause:" 1158 }, 1159 autoAnim: { 1160 defaultValue: false, 1161 type: bz.Types.BOOL, 1162 flags: [bz.Flags.TIMER], 1163 title: "Auto:" 1164 }, 1165 onEndMethod: { 1166 defaultValue: BACK, 1167 type: bz.Types.ENUM, 1168 possibleValues: [LOOP, BACK, FAST_REWIND], 1169 flags: [bz.Flags.SIZE, bz.Flags.TIMER], 1170 title: "End Method:" 1171 }, 1172 allImages: { 1173 defaultValue: false, 1174 type: bz.Types.BOOL, 1175 flags: [bz.Flags.SIZE], 1176 title: "All Images:" 1177 }, 1178 numImages: { 1179 defaultValue: 5, 1180 min: 1, 1181 max: 100, 1182 type: bz.Types.INTEGER, 1183 flags: [bz.Flags.SIZE], 1184 title: "Num Images:" 1185 }, 1186 clickAction: { 1187 defaultValue: BOTH, 1188 type: bz.Types.ENUM, 1189 possibleValues: [OPEN_URL, DISPLAY_IMAGE, BOTH], 1190 title: "Click Action:" 1191 } 1192 }; 1193 }; 1194 p.startOnce = function() { 1195 var self = this; 1196 this.arrowsPlugin = this.theme.getPlugin(bz.ArrowsPlugin); 1197 var titleFactory = this.theme.getPlugin("title"); 1198 var dateFactory = this.theme.getPlugin("date"); 1199 this.title = titleFactory.getText(); 1200 this.date = dateFactory.getText(); 1201 this.freeTitlePlugin = this.theme.getPlugin(bz.FreePositionPlugin.NAME + "Title"); 1202 this.freeTitlePlugin.setContentElement(this.title.div); 1203 this.title.onResize = function() { 1204 self.freeTitlePlugin.update({ 1205 size: 1 1206 }) 1207 }; 1208 this.freeDatePlugin = this.theme.getPlugin(bz.FreePositionPlugin.NAME + "Date"); 1209 this.freeDatePlugin.setContentElement(this.date.div); 1210 this.date.onResize = function() { 1211 self.freeDatePlugin.update({ 1212 size: 1 1213 }) 1214 }; 1215 this.numMedia = this.theme.mediaArray.length; 1216 this.mediaArray = this.theme.mediaArray; 1217 }; 1218 p.update = function(flags) { 1219 if (flags && flags[bz.Flags.SIZE]) { 1220 if (this._started) { 1221 this.createImages(); 1222 } 1223 } 1224 if (flags && flags[bz.Flags.TIMER]) { 1225 if (this.arrowsPlugin) { 1226 this.updateArrows(); 1227 } 1228 } 1229 if (this._started) { 1230 this.updateAnim(); 1231 } 1232 }; 1233 p.onParamChanged = function(setting, value) { 1234 if (this._started && setting.plugin.name == "media") { 1235 this.updateAnim(); 1236 } 1237 }; 1238 p.createImages = function() { 1239 if (!this.mediaFrames) this.mediaFrames = []; 1240 var frameFactory = this.theme.getPlugin(bz.MediaFrameFactoryPlugin); 1241 if (!this.centerImages) { 1242 if (this.props.allImages) { 1243 this.numImages = this.numMedia; 1244 } else { 1245 this.numImages = Math.min(this.props.numImages, this.numMedia); 1246 } 1247 this.centerIndex = 0; 1248 } else { 1249 if (this.props.allImages) { 1250 this.numImages = this.numMedia * 2 - 1; 1251 this.centerIndex = ~~(this.numImages * 0.5); 1252 } else { 1253 this.numImages = Math.min(this.props.numImages + 1, this.numMedia * 2 - 1); 1254 this.centerIndex = ~~(this.numImages * 0.5) - 1; 1255 } 1256 } 1257 if (this.log) console.log("numImages", this.numImages, "centerIndex", this.centerIndex); 1258 if (this.log) console.log("create images", this.numImages); 1259 frameFactory.fillFrameArray(this.mediaFrames, this.numImages, true); 1260 this.updateMedia(true); 1261 for (var i = 0, len = this.mediaFrames.length; i < len; i++) { 1262 this.buildClickCallback(this.mediaFrames[i]); 1263 } 1264 if (this.animPlugin.onImagesCreated) { 1265 this.animPlugin.onImagesCreated(this.mediaFrames); 1266 } 1267 }; 1268 p.buildClickCallback = function(frame) { 1269 if (!frame.__clickChanged) { 1270 frame.__clickChanged = true; 1271 var self = this; 1272 frame.div.onclick = function() { 1273 if (frame.media) { 1274 var action = self.props.clickAction; 1275 var index = self.mediaFrames.indexOf(frame); 1276 if (action == OPEN_URL || action == BOTH || index == self.centerIndex) { 1277 self.theme.onMediaClick(frame.media, frame); 1278 } 1279 if (action == DISPLAY_IMAGE || action == BOTH) { 1280 self.jumpToFrame(frame); 1281 } 1282 } 1283 } 1284 } 1285 }; 1286 p.animPluginStart = function(animPlugin) { 1287 if (this.log) console.log("animPluginStart", animPlugin); 1288 this.animPlugin = animPlugin; 1289 this._started = true; 1290 this.targetIndex = 0; 1291 this.index = 0; 1292 this.progress = 0; 1293 this.startProgress = 0; 1294 this._startAnimTime = Date.now(); 1295 this.createImages(); 1296 this.updateAnim(); 1297 if (this.arrowsPlugin) { 1298 this.arrowsPlugin.setCallback(this.onArrow, this); 1299 } 1300 this.startTicking(); 1301 this.updateTargetChange(); 1302 }; 1303 p.updateTargetChange = function() { 1304 this.updateArrows(); 1305 if (this.title) { 1306 this.title.setMedia(this.mediaArray[this.targetIndex]); 1307 } 1308 if (this.date) { 1309 this.date.setMedia(this.mediaArray[this.targetIndex]); 1310 } 1311 }; 1312 p.onArrow = function(next) { 1313 this._arrowInterrupt = true; 1314 if (next) { 1315 this.animateNext(); 1316 } else { 1317 this.animatePrev(); 1318 } 1319 this._arrowInterrupt = false;
1320 }; 1321 p.animateNext = function() { 1322 this.next = true; 1323 var newIndex = this.targetIndex + 1; 1324 if (newIndex == this.numMedia) { 1325 if (this.props.onEndMethod == LOOP) { 1326 newIndex = 0; 1327 } else if (this.props.onEndMethod == BACK) { 1328 this.next = false; 1329 newIndex = this.numMedia - 2; 1330 } else if (this.props.onEndMethod == FAST_REWIND) { 1331 this.next = false; 1332 newIndex = 0; 1333 } 1334 } 1335 this._animateTo(newIndex); 1336 }; 1337 p.animatePrev = function() { 1338 this.next = false; 1339 var newIndex; 1340 newIndex = this.targetIndex - 1; 1341 if (newIndex < 0) { 1342 if (this.props.onEndMethod == LOOP) { 1343 newIndex = this.numMedia - 1; 1344 } else if (this.props.onEndMethod == BACK) { 1345 this.next = true; 1346 newIndex = 1; 1347 } else if (this.props.onEndMethod == FAST_REWIND) { 1348 this.next = true; 1349 newIndex = this.numMedia - 1; 1350 } 1351 } 1352 this._animateTo(newIndex); 1353 }; 1354 p.jumpToFrame = function(frame) { 1355 if (this.log) console.log("jumpToFrame", frame.index); 1356 if (frame.index > this.centerIndex) { 1357 this.next = true; 1358 } else { 1359 this.next = false; 1360 } 1361 this._animateTo(frame.media.index); 1362 }; 1363 p._animateTo = function(index) { 1364 // if (this.log) console.log("_animateTo:", this.progress.toFixed(2), "=>", index, this.next); 1365 if (this.targetIndex != index) { 1366 if (this._arrowInterrupt) { 1367 this.progress = this.targetIndex; 1368 } 1369 var prevTargetIndex = this.targetIndex; 1370 this.targetIndex = index; 1371 if (this.next && this.progress < this.targetIndex || !this.next && this.progress > this.targetIndex) {} else { 1372 if (this.next) { 1373 this.progress -= this.mediaArray.length; 1374 } else { 1375 this.progress += this.mediaArray.length; 1376 } 1377 } 1378 var duration = 0; 1379 var delta = Math.abs(this.progress - this.targetIndex); 1380 switch (this.props.animDurationScaling) { 1381 case LINEAR: 1382 duration = this.props.animDuration * delta; 1383 break; 1384 case LOG: 1385 if (delta < 1) { 1386 duration = this.props.animDuration * delta; 1387 } else { 1388 delta = Math.round(delta); 1389 while (delta > 0) { 1390 duration += this.props.animDuration * 1 / Math.pow(2, delta - 1); 1391 delta--; 1392 } 1393 } 1394 break; 1395 default: 1396 duration = this.props.animDuration; 1397 } 1398 // if (this.log) console.log("ANIM:", duration * 1000, this.progress, this.targetIndex, this.props); 1399 this._startAnimTime = Date.now(); 1400 this._animDuration = duration * 1000; 1401 this.startProgress = this.progress; 1402 this.updateTargetChange(); 1403 } 1404 if (this.log) console.log("_animateTo =>", this.progress, this.next, this.targetIndex); 1405 }; 1406 p.startTicking = function() { 1407 if (!this._ticking) { 1408 if (this.log) console.log("startTicking"); 1409 if (!this._autoTic) { 1410 var self = this; 1411 this._autoTic = (function() { 1412 self._rafId = bz.requestAnimationFrame(function() { 1413 self.tic(); 1414 if (self._ticking) { 1415 self._autoTic(); 1416 } 1417 }); 1418 }); 1419 } 1420 this._ticking = true; 1421 this._autoTic(); 1422 } 1423 }; 1424 p.tic = function() { 1425 var now = Date.now(); 1426 var dt = (now - this._prevNow); 1427 this._prevNow = now; 1428 var animating = false;
1429 var goNext = false; 1430 if (!this._prevNow) { 1431 return; 1432 } else { 1433 if (!this._animDuration) { 1434 if (this.props.autoAnim && now - this._startAnimTime > this.props.pauseDuration * 1000) { 1435 goNext = true; 1436 } 1437 } else { 1438 if (now >= this._startAnimTime && now - dt <= this._startAnimTime + this._animDuration) { 1439 animating = true; 1440 } else { 1441 if (now > this._startAnimTime + this._animDuration + this.props.pauseDuration * 1000) { 1442 if (this.props.autoAnim) { 1443 goNext = true; 1444 } 1445 } 1446 } 1447 } 1448 } 1449 if (animating || goNext) { 1450 var tweenProgress = (now - this._startAnimTime) / this._animDuration; 1451 if (isNaN(tweenProgress)) tweenProgress = 0; 1452 if (tweenProgress > 1) { 1453 if (this.props.pauseDuration == 0 && this.props.autoAnim && !(!this.next && this.targetIndex == 0) && !(this.next && this.targetIndex == this.numMedia - 1)) {} else { 1454 tweenProgress = 1; 1455 } 1456 } 1457 var newProgress; 1458 if (tweenProgress == 1) { 1459 newProgress = this.targetIndex; 1460 } else { 1461 newProgress = this.startProgress * (1 - tweenProgress) + this.targetIndex * tweenProgress; 1462 if (newProgress < 0) { 1463 newProgress += this.numMedia; 1464 } else if (newProgress >= this.numMedia) { 1465 newProgress -= this.numMedia; 1466 } 1467 } 1468 if (newProgress != this.progress) { 1469 this.progress = newProgress; 1470 this.index = ~~this.progress; 1471 this.updateAnim(); 1472 } 1473 } 1474 this._animating = animating; 1475 if (goNext) { 1476 if (this.props.onEndMethod == BACK && !this.next) { 1477 this.animatePrev(); 1478 } else { 1479 this.animateNext(); 1480 } 1481 } 1482 }; 1483 p.updateAnim = function() { 1484 this.updateMedia(); 1485 var p = this.progress - this.index; 1486 if (this.next) { 1487 p = bz.getPluginEasing("progressEasing", this)(p); 1488 } else { 1489 p = bz.getPluginEasing("progressEasing", this)(1 - p); 1490 p = 1 - p; 1491 } 1492 this.animPlugin.setProgress(this.index, p); 1493 }; 1494 p.updateMedia = function(force) { 1495 var mediaIndex = ~~this.progress; 1496 if (!force && this.hasOwnProperty("_lastMediaIndex") && this._lastMediaIndex == mediaIndex) { 1497 return; 1498 } 1499 var iMedia, i, j, len = this.mediaFrames.length; 1500 var newArray = []; 1501 for (i = 0; i < len; i++) { 1502 iMedia = mediaIndex + i; 1503 if (this.centerImages) { 1504 iMedia -= this.centerIndex; 1505 } 1506 if (this.props.onEndMethod == LOOP) { 1507 iMedia = this.checkIndex(iMedia); 1508 } 1509 for (j = 0; j < len; j++) { 1510 if (this.mediaFrames[j] && this.mediaFrames[j].media && this.mediaFrames[j].media.index == iMedia) { 1511 newArray[i] = this.mediaFrames[j]; 1512 this.mediaFrames[j] = null; 1513 break; 1514 } 1515 } 1516 if (j == len) { 1517 newArray[i] = iMedia; 1518 } else {} 1519 } 1520 for (i = 0; i < len; i++) { 1521 if (typeof newArray[i] == "number") {
1522 iMedia = newArray[i]; 1523 for (var j = 0; j < len; j++) { 1524 if (this.mediaFrames[j]) { 1525 newArray[i] = this.mediaFrames[j]; 1526 this.mediaFrames[j] = null; 1527 var media = this.mediaArray[iMedia]; 1528 if (!media) { 1529 newArray[i].setMedia(null); 1530 bz.CSS.setVisible(newArray[i].div, false); 1531 } else { 1532 newArray[i].setMedia(media); 1533 bz.CSS.setVisible(newArray[i].div, true); 1534 } 1535 break; 1536 } 1537 } 1538 } 1539 newArray[i].index = i; 1540 if (this.props.clickAction == DISPLAY_IMAGE || this.props.clickAction == BOTH || (this.props.clickAction == OPEN_URL && newArray[i].media && newArray[i].media.url)) { 1541 bz.CSS.setButtonMode(newArray[i].div, true); 1542 // log des urls 1543 // if (this.log) console.log("url =>", newArray[i].media.url); 1544 } else { 1545 bz.CSS.setButtonMode(newArray[i].div, false); 1546 } 1547 } 1548 this.mediaFrames = newArray; 1549 this._lastMediaIndex = mediaIndex; 1550 }; 1551 p.checkIndex = function(index) { 1552 while (index >= this.numMedia) { 1553 index -= this.numMedia; 1554 } 1555 while (index < 0) { 1556 index += this.numMedia; 1557 } 1558 return index; 1559 }; 1560 p.updateArrows = function() { 1561 if (this.arrowsPlugin && this.arrowsPlugin.nextDiv && this._started) { 1562 this.arrowsPlugin.setMedia({}); 1563 var next = true; 1564 var prev = true; 1565 if (this.props.onEndMethod != LOOP) { 1566 if (this.targetIndex <= 0) { 1567 prev = false; 1568 } else { 1569 prev = true; 1570 } 1571 if (this.targetIndex >= this.numMedia - 1) { 1572 next = false; 1573 } else { 1574 next = true; 1575 } 1576 } 1577 this.arrowsPlugin.nextDiv.style.display = next ? "block" : "none"; 1578 this.arrowsPlugin.prevDiv.style.display = prev ? "block" : "none"; 1579 } 1580 } 1581 })(); 1582 } 1583 if (!bz.CoverflowTheme) { 1584 (function() { 1585 bz.CoverflowTheme = function() {}; 1586 bz.BZTheme.extend(bz.CoverflowTheme); 1587 var p = bz.CoverflowTheme.prototype; 1588 p.addPlugins = function() { 1589 this.frameFactory = new bz.MediaFrameFactoryPlugin(); 1590 this.frameFactory.enableReflection = false; 1591 this.frameFactory.enableMediaScaleMode = false; 1592 this.plug(this.frameFactory); 1593 this.plug(new bz.PreloaderPlugin()); 1594 this.plug(new bz.ArrowsPlugin()); 1595 this.plug(new bz.MediaTextFactoryPlugin(true)); 1596 this.plug(new bz.MediaTextFactoryPlugin(false)); 1597 this.plug(new bz.FreePositionPlugin("Title", true, true)); 1598 this.plug(new bz.FreePositionPlugin("Date", true, true)); 1599 this.plug(new bz.MultiImagesPlugin(true)); 1600 this.plug(new bz.CoverflowThemePlugin()); 1601 }; 1602 p.overrideSettings = function() { 1603 var settings; 1604 this.updateSetting("theme", "themeWidth", 600, 100, 900); 1605 this.updateSetting("theme", "themeHeight", 600, 100, 900); 1606 this.updateSettings("media", { 1607 width: 250, 1608 height: 250 1609 }); 1610 this.updateSetting("multi", "onEndMethod", "Loop"); 1611 this.updateSetting("theme3D", "enabled3D", false); 1612 }; 1613 p.start = function() {}; 1614 var _NAME = "coverflow"; 1615 bz.CoverflowThemePlugin = function() { 1616 this.name = _NAME; 1617 }; 1618 bz.CoverflowThemePlugin.NAME = _NAME; 1619 bz.BZPlugin.extend(bz.CoverflowThemePlugin); 1620 var p = bz.CoverflowThemePlugin.prototype; 1621 p.initOnce = function() { 1622 this.settings = { 1623 sideGap: { 1624 defaultValue: 50, 1625 min: 0, 1626 max: 1000, 1627 type: bz.Types.INTEGER, 1628 flags: [bz.Flags.SIZE], 1629 title: "Side Gap" 1630 }, 1631 centerGap: { 1632 defaultValue: 100, 1633 min: 0, 1634 max: 1000, 1635 type: bz.Types.INTEGER, 1636 flags: [bz.Flags.SIZE], 1637 title: "Center Gap" 1638 }, 1639 centerSpin: { 1640 defaultValue: 0, 1641 min: -180, 1642 max: 180, 1643 type: bz.Types.INTEGER, 1644 flags: [bz.Flags.SIZE], 1645 title: "Center Spin" 1646 }, 1647 sideSpin: { 1648 defaultValue: 0, 1649 min: -180, 1650 max: 180, 1651 type: bz.Types.INTEGER, 1652 flags: [bz.Flags.SIZE], 1653 title: "Side Spin" 1654 }, 1655 centerRotation: { 1656 defaultValue: 0, 1657 min: -180, 1658 max: 180, 1659 type: bz.Types.INTEGER, 1660 flags: [bz.Flags.SIZE], 1661 title: "Center Rotation" 1662 }, 1663 sideRotation: { 1664 defaultValue: 45, 1665 min: -180, 1666 max: 180, 1667 type: bz.Types.INTEGER, 1668 flags: [bz.Flags.SIZE], 1669 title: "Side Rotation" 1670 }, 1671 sideInclination: { 1672 defaultValue: 20, 1673 min: -180, 1674 max: 180, 1675 type: bz.Types.INTEGER, 1676 flags: [bz.Flags.SIZE], 1677 title: "Side Inclination" 1678 },
1679 centerInclination: { 1680 defaultValue: 0, 1681 min: -180, 1682 max: 180, 1683 type: bz.Types.INTEGER, 1684 flags: [bz.Flags.SIZE], 1685 title: "Center Inclination" 1686 }, 1687 sideZ: { 1688 defaultValue: -200, 1689 min: 0, 1690 max: 1000, 1691 type: bz.Types.INTEGER, 1692 flags: [bz.Flags.SIZE], 1693 title: "Side Z" 1694 }, 1695 horizontal: { 1696 defaultValue: true, 1697 type: bz.Types.BOOL, 1698 flags: [bz.Flags.SIZE], 1699 title: "Horizontal" 1700 } 1701 }; 1702 }; 1703 p.startOnce = function() { 1704 var preloader = this.theme.getPlugin("preloader"); 1705 preloader.startLoading(this.startAnim, this); 1706 var self = this; 1707 if (this.theme.mode == "bz") { 1708 self.theme.animationDiv.style.visibility = "visible"; 1709 setTimeout(function() { 1710 self.theme.animationDiv.style.visibility = "hidden"; 1711 }, 300); 1712 } else { 1713 self.theme.animationDiv.style.visibility = "hidden"; 1714 } 1715 }; 1716 p.startAnim = function() { 1717 this._started = true; 1718 this.multiImagesPlugin = this.theme.getPlugin(bz.MultiImagesPlugin); 1719 this.multiImagesPlugin.animPluginStart(this); 1720 }; 1721 p.update = function(flags) { 1722 if (this._started && this.hasOwnProperty("_index")) { 1723 this.setProgress(this._index, this._p); 1724 } 1725 }; 1726 p.onImagesCreated = function(frames) { 1727 for (var i = 0, len = frames.length; i < len; i++) { 1728 var frame = frames[i]; 1729 bz.CSS.setPrefixedProp(frame.div, "transformOrigin", "center center"); 1730 bz.CSS.setPrefixedProp(frame.div, "backfaceVisibility", "visible"); 1731 frame.div.style.zIndex = 1; 1732 frame.div.style.opacity = 1; 1733 } 1734 } 1735 p.setProgress = function(index, p) { 1736 if (!this._started) return; 1737 this._index = index; 1738 this._p = p; 1739 var frames = this.multiImagesPlugin.mediaFrames, 1740 doFade = frames.length != this.theme.mediaArray.length * 2 - 1 1741 var centerIndex = this.multiImagesPlugin.centerIndex; 1742 var gap = this.props.sideGap; 1743 var centerGap = this.props.centerGap; 1744 var sideRotation = this.props.sideRotation; 1745 var sideZ = this.props.sideZ; 1746 var sideInclination = this.props.sideInclination;
1747 var centerInclination = this.props.centerInclination; 1748 var centerRotation = this.props.centerRotation; 1749 var centerSpin = this.props.centerSpin; 1750 var sideSpin = this.props.sideSpin; 1751 var size, pos, rotation, prevPos, prevRot, transform, newPos, newRot, prevZ, newZ, sign, inclination, newInclination, prevInclination, spin, newSpin, prevSpin; 1752 if (this.props.horizontal) { 1753 size = frames[0].width; 1754 sign = 1; 1755 } else { 1756 size = frames[0].height; 1757 sign = -1; 1758 } 1759 var x = (this.theme.innerWidth - frames[0].width) / 2, 1760 y = (this.theme.innerHeight - frames[0].height) / 2, 1761 z; 1762 for (var i = 0, len = frames.length; i < len; i++) { 1763 var frame = frames[i]; 1764 if (i == centerIndex) { 1765 newPos = 0; 1766 newRot = centerRotation; 1767 newZ = 0; 1768 newInclination = centerInclination; 1769 newSpin = centerSpin; 1770 } else { 1771 var sign2; 1772 if (i < centerIndex) { 1773 newPos = -(size / 2 + centerGap + (centerIndex - i - 1) * gap); 1774 newRot = sideRotation; 1775 sign2 = 1; 1776 } else { 1777 newPos = size / 2 + centerGap + (i - centerIndex - 1) * gap; 1778 newRot = -sideRotation; 1779 sign2 = -1; 1780 } 1781 newZ = sideZ; 1782 newInclination = sideInclination; 1783 newSpin = sideSpin * sign2; 1784 } 1785 if (i == 0) { 1786 pos = newPos - p * gap; 1787 rotation = newRot; 1788 z = newZ; 1789 inclination = newInclination; 1790 spin = newSpin 1791 } else { 1792 pos = (1 - p) * newPos + p * prevPos; 1793 rotation = (1 - p) * newRot + p * prevRot; 1794 z = (1 - p) * newZ + p * prevZ; 1795 inclination = (1 - p) * newInclination + p * prevInclination; 1796 spin = (1 - p) * newSpin + p * prevSpin; 1797 } 1798 if (doFade) { 1799 if (i == 0) { 1800 frame.div.style.opacity = 1 - p; 1801 } else if (i == len - 1) { 1802 frame.div.style.opacity = p; 1803 } else { 1804 frame.div.style.opacity = 1; 1805 } 1806 } else { 1807 frame.div.style.opacity = 1; 1808 } 1809 if (this.props.horizontal) { 1810 transform = "translate3d(" + (x + pos) + "px," + y + "px , " + z + "px) rotateY(" + sign * rotation + "deg) rotateX(" + inclination + "deg) rotateZ(" + spin + "deg)"; 1811 } else { 1812 transform = "translate3d(" + x + "px," + (y + pos) + "px , " + z + "px) rotateX(" + sign * rotation + "deg) rotateY(" + inclination + "deg) rotateZ(" + spin + "deg)"; 1813 } 1814 bz.CSS.setPrefixedProp(frame.div, "transform", transform); 1815 prevPos = newPos; 1816 prevRot = newRot; 1817 prevZ = newZ; 1818 prevInclination = newInclination; 1819 prevSpin = newSpin; 1820 } 1821 }; 1822 })(); 1823 } 1824})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.