JAVASCRIPT 30
Slideshow.js Guest on 27th April 2021 07:52:46 PM
  1. //
  2. //  iWeb - Slideshow.js
  3. //  Copyright (c) 2007-2008 Apple Inc. All rights reserved.
  4. //
  5. var DidStartLoadingImagesNotification = "DidStartLoadingImages";
  6. var SlideshowGlue = Class.create(Widget, {
  7.     widgetIdentifier: "com-apple-iweb-widget-slideshow",
  8.     initialize: function($super, instanceID, widgetPath, sharedPath, sitePath, preferences, runningInApp) {
  9.         if (instanceID) {
  10.             $super(instanceID, widgetPath, sharedPath, sitePath, preferences, runningInApp);
  11.             this.mInstanceID = instanceID;
  12.             this.updateFromPreferences();
  13.         }
  14.     },
  15.     onload: function() {},
  16.     onunload: function() {},
  17.     loadFromStream: function(mediaStream) {
  18.         if (this.p_enabled()) {
  19.             if (this.runningInApp) {
  20.                 var slideshowDiv = this.getElementById("slideshow_placeholder");
  21.                 slideshowDiv.onmouseover = function() {
  22.                     mediaStream.load(this.p_baseURL(), this.onStreamLoad.bind(this));
  23.                 }.bind(this);
  24.             } else {
  25.                 mediaStream.load(this.p_baseURL(), this.onStreamLoad.bind(this));
  26.             }
  27.         } else {}
  28.     },
  29.     onStreamLoad: function(imageStream) {
  30.         var slideshowDiv = this.getElementById("slideshow_placeholder");
  31.         if (this.mSlideshow != null) {
  32.             this.mSlideshow.pause();
  33.             slideshowDiv.innerHTML = "";
  34.         }
  35.         var skipStride = 0;
  36.         var nextToSkip = 999999999;
  37.         var transitionIndex = this.p_transitionIndex();
  38.         var scrub = (transitionIndex == 255);
  39.         if (scrub) {
  40.             var numberToSkip = imageStream.length - 50;
  41.             if (numberToSkip > 0) {
  42.                 skipStride = imageStream.length / numberToSkip;
  43.                 nextToSkip = 0;
  44.             }
  45.         }
  46.         var photos = [];
  47.         var imageType = this.p_imageType();
  48.         for (var i = 0; i < imageStream.length; ++i) {
  49.             if (i > nextToSkip) {
  50.                 nextToSkip += skipStride;
  51.             } else {
  52.                 photos.push(imageStream[i].slideshowValue(imageType));
  53.             }
  54.         }
  55.         var options = {
  56.             backgroundColor: this.p_backgroundColor(),
  57.             scaleMode: this.p_scaleMode(),
  58.             movieMode: this.p_movieMode(),
  59.             shouldTighten: false
  60.         };
  61.         this.mSlideshow = new Slideshow(slideshowDiv, photos, function() {}, options);
  62.         if (scrub) {
  63.             this.mSlideshow.setTransitionIndex(1, 0);
  64.         } else {
  65.             this.mSlideshow.setTransitionIndex(transitionIndex, 0);
  66.         }
  67.         this.mSlideshow.pause();
  68.         this.mSlideshow.photoDuration = this.p_photoDuration();
  69.         var startIndex = this.p_startIndex();
  70.         if (startIndex >= imageStream.length) {
  71.             startIndex = 0;
  72.         }
  73.         this.mSlideshow.showPhotoNumber(startIndex);
  74.         if (this.runningInApp) {
  75.             window.onresize = function() {
  76.                 this.p_onResize();
  77.             }.bind(this)
  78.         }
  79.         if (scrub) {
  80.             var heightPct = "100%";
  81.             for (var i = 0; i < photos.length; ++i) {
  82.                 var div = $(document.createElement("div"));
  83.                 div.className = "scrubBand";
  84.                 div.setStyle({
  85.                     position: "absolute",
  86.                     top: 0,
  87.                     height: heightPct,
  88.                     zIndex: 100,
  89.                     backgroundImage: "url(" + transparentGifURL() + ")"
  90.                 });
  91.                 div.onmouseover = this.p_scrub.bind(this, slideshowDiv, i);
  92.                 slideshowDiv.appendChild(div);
  93.             }
  94.             this.p_positionScrubBands();
  95.         }
  96.         slideshowDiv.onmouseover = null;
  97.         if (this.p_showOnMouseOver()) {
  98.             IWSetDivOpacity(slideshowDiv, 0.0);
  99.             if (scrub) {
  100.                 var self = this;
  101.                 slideshowDiv.onmouseover = function() {
  102.                     self.mLoadingImages = true;
  103.                     self.p_startLoadingImages();
  104.                     slideshowDiv.onmouseout = function() {
  105.                         self.mLoadingImages = false;
  106.                         IWSetDivOpacity(slideshowDiv, 0.0);
  107.                     }
  108.                 }
  109.             } else {
  110.                 var self = this;
  111.                 slideshowDiv.onmouseover = function() {
  112.                     self.p_startSlideshow(slideshowDiv);
  113.                     slideshowDiv.onmouseout = function() {
  114.                         self.p_pauseSlideshow(slideshowDiv);
  115.                     }
  116.                 }
  117.             }
  118.         } else {
  119.             if (scrub) {
  120.                 slideshowDiv.onmouseout = function() {
  121.                     this.mSlideshow.showPhotoNumber(0);
  122.                 }.bind(this);
  123.             } else {
  124.                 this.p_startSlideshow(slideshowDiv);
  125.             }
  126.         }
  127.     },
  128.     p_didStartLoadingImages: function(notification) {
  129.         if (notification.object() !== this) {
  130.             this.p_unloadImages();
  131.         }
  132.     },
  133.     p_startLoadingImages: function() {
  134.         if (this.runningInApp) {
  135.             this.preferences.postCrossWidgetNotification(DidStartLoadingImagesNotification, {});
  136.         } else {
  137.             NotificationCenter.postNotification(new IWNotification(DidStartLoadingImagesNotification, this, {}));
  138.         }
  139.         if (!this.mListeningForNotifications) {
  140.             this.mListeningForNotifications = true;
  141.             NotificationCenter.addObserver(null, this.p_didStartLoadingImages.bind(this), DidStartLoadingImagesNotification, null);
  142.         }
  143.         if (this.mCurrentLoadingImageIndex === undefined) {
  144.             this.mCurrentLoadingImageIndex = 0;
  145.         }
  146.         var loadImage = function() {
  147.             if (this.mLoadingImages) {
  148.                 var index = this.mCurrentLoadingImageIndex;
  149.                 var photos = this.mSlideshow.photos;
  150.                 if (index < photos.length) {
  151.                     var image = photos[index].image;
  152.                     image.load(function(image) {
  153.                         if (this.mCurrentLoadingImageIndex < photos.length && image === photos[this.mCurrentLoadingImageIndex].image) {
  154.                             image.preventUnloading();
  155.                             ++this.mCurrentLoadingImageIndex;
  156.                             loadImage();
  157.                         }
  158.                     }.bind(this, image), true);
  159.                 }
  160.             }
  161.         }.bind(this);
  162.         loadImage();
  163.     },
  164.     p_unloadImages: function() {
  165.         var photos = this.mSlideshow.photos;
  166.         for (var index = 0; index < this.mCurrentLoadingImageIndex; ++index) {
  167.             var image = photos[index].image;
  168.             image.allowUnloading();
  169.             image.unload(true);
  170.         }
  171.         this.mCurrentLoadingImageIndex = 0;
  172.     },
  173.     p_scrub: function(slideshowDiv, index) {
  174.         this.mSlideshow.showPhotoNumber(index);
  175.         IWSetDivOpacity(slideshowDiv, 1.0);
  176.         this.mLoadingImages = true;
  177.     },
  178.     p_positionScrubBands: function() {
  179.         var slideshowDiv = this.getElementById("slideshow_placeholder");
  180.         var left = 0;
  181.         var totalWidth = slideshowDiv.offsetWidth;
  182.         var bands = slideshowDiv.select(".scrubBand");
  183.         for (var i = 0; i < bands.length; ++i) {
  184.             var right = Math.round((i + 1) * totalWidth / bands.length);
  185.             var div = bands[i];
  186.             $(div).setStyle({
  187.                 left: px(left),
  188.                 width: px(right - left)
  189.             });
  190.             left = right;
  191.         }
  192.     },
  193.     p_onResize: function() {
  194.         if (this.mSlideshow) {
  195.             var slideshowDiv = this.getElementById("slideshow_placeholder");
  196.             if (slideshowDiv.offsetWidth != this.mSlideshowOffsetWidth) {
  197.                 this.mSlideshowOffsetWidth = slideshowDiv.offsetWidth;
  198.                 this.mSlideshow.updateSize();
  199.                 this.p_positionScrubBands();
  200.             }
  201.         }
  202.     },
  203.     changedPreferenceForKey: function(key) {
  204.         if (key == "mediaStream") {
  205.             var mediaStream = this.p_mediaStream();
  206.             if (mediaStream !== null) {
  207.                 this.loadFromStream(mediaStream);
  208.             }
  209.         }
  210.     },
  211.     updateFromPreferences: function() {
  212.         var mediaStream = this.p_mediaStream();
  213.         this.loadFromStream(mediaStream);
  214.     },
  215.     p_mediaStream: function() {
  216.         var mediaStream = null;
  217.         if (this.preferences) {
  218.             mediaStream = this.preferenceForKey("mediaStreamObject");
  219.             if (mediaStream == null || mediaStream == undefined) {
  220.                 var mediaStreamCode = this.preferenceForKey("mediaStream");
  221.                 if (mediaStreamCode != null && mediaStreamCode.length > 0) {
  222.                     mediaStream = eval(mediaStreamCode);
  223.                 }
  224.             }
  225.         }
  226.         return mediaStream;
  227.     },
  228.     p_backgroundColor: function() {
  229.         var backgroundColor = null;
  230.         if (this.preferences) {
  231.             backgroundColor = this.preferenceForKey("color");
  232.         }
  233.         if (backgroundColor === undefined) {
  234.             backgroundColor = "black";
  235.         }
  236.         return backgroundColor;
  237.     },
  238.     p_baseURL: function() {
  239.         return this.preferenceForKey("baseURL");
  240.     },
  241.     p_enabled: function() {
  242.         var enabled = null;
  243.         if (this.preferences) {
  244.             enabled = this.preferenceForKey("slideshowEnabled");
  245.         }
  246.         if (enabled === undefined) {
  247.             enabled = false;
  248.         }
  249.         return enabled;
  250.     },
  251.     p_fadeIn: function() {
  252.         var fadeIn = null;
  253.         if (this.preferences) {
  254.             fadeIn = this.preferenceForKey("fadeIn");
  255.         }
  256.         if (fadeIn === undefined) {
  257.             fadeIn = false;
  258.         }
  259.         return fadeIn;
  260.     },
  261.     p_showOnMouseOver: function() {
  262.         var showOnMouseOver = null;
  263.         if (this.preferences) {
  264.             showOnMouseOver = this.preferenceForKey("showOnMouseOver");
  265.         }
  266.         if (showOnMouseOver === null || showOnMouseOver == undefined) {
  267.             showOnMouseOver = false;
  268.         }
  269.         return showOnMouseOver;
  270.     },
  271.     p_photoDuration: function() {
  272.         var photoDuration = null;
  273.         if (this.preferences) {
  274.             photoDuration = this.preferenceForKey("photoDuration") * 1000;
  275.         }
  276.         if (photoDuration === null) {
  277.             photoDuration = 5000;
  278.         }
  279.         return photoDuration;
  280.     },
  281.     p_startIndex: function() {
  282.         var startIndex = null;
  283.         if (this.preferences) {
  284.             startIndex = this.preferenceForKey("startIndex");
  285.         }
  286.         if (startIndex === undefined) {
  287.             startIndex = 0;
  288.         }
  289.         return startIndex;
  290.     },
  291.     p_scaleMode: function() {
  292.         var scaleMode = null;
  293.         if (this.preferences) {
  294.             scaleMode = this.preferenceForKey("scaleMode");
  295.         }
  296.         if (scaleMode === undefined) {
  297.             scaleMode = "fit";
  298.         }
  299.         return scaleMode;
  300.     },
  301.     p_transitionIndex: function() {
  302.         var transitionIndex = null;
  303.         if (this.preferences) {
  304.             transitionIndex = this.preferenceForKey("transitionIndex");
  305.         }
  306.         if (transitionIndex === undefined) {
  307.             transitionIndex = 0;
  308.         }
  309.         return transitionIndex;
  310.     },
  311.     p_imageType: function() {
  312.         var imageType = null;
  313.         if (this.preferences) {
  314.             imageType = this.preferenceForKey("imageType");
  315.         }
  316.         if (imageType === null || imageType == undefined) {
  317.             imageType = "image";
  318.         }
  319.         return imageType;
  320.     },
  321.     p_movieMode: function() {
  322.         var movieMode = null;
  323.         if (this.preferences) {
  324.             movieMode = this.preferenceForKey("movieMode");
  325.         }
  326.         if (movieMode === null || movieMode == undefined) {
  327.             movieMode = kShowMovie;
  328.         }
  329.         return movieMode;
  330.     },
  331.     p_startSlideshow: function(slideshowDiv) {
  332.         if (this.mSlideshow && this.p_enabled()) {
  333.             if (this.p_fadeIn()) {
  334.                 var self = this;
  335.                 var startOpacity = slideshowDiv.getStyle("opacity");
  336.                 if (this.mFadeAnimation) {
  337.                     this.mFadeAnimation.stop();
  338.                 }
  339.                 this.mFadeAnimation = new SimpleAnimation(function() {
  340.                     delete self.mFadeAnimation;
  341.                     self.mSlideshow.resume();
  342.                 });
  343.                 this.mFadeAnimation.pre = function() {
  344.                     IWSetDivOpacity(slideshowDiv, startOpacity);
  345.                 }
  346.                 this.mFadeAnimation.post = function() {
  347.                     IWSetDivOpacity(slideshowDiv, 1.0);
  348.                 }
  349.                 this.mFadeAnimation.update = function(now) {
  350.                     IWSetDivOpacity(slideshowDiv, startOpacity + now * (1.0 - startOpacity));
  351.                 }
  352.                 this.mFadeAnimation.start();
  353.             } else {
  354.                 this.mSlideshow.resume();
  355.             }
  356.         }
  357.     },
  358.     p_pauseSlideshow: function(slideshowDiv) {
  359.         if (this.mSlideshow) {
  360.             this.mSlideshow.pause();
  361.             if (this.p_fadeIn()) {
  362.                 var startOpacity = slideshowDiv.getStyle("opacity");
  363.                 if (this.mFadeAnimation) {
  364.                     this.mFadeAnimation.stop();
  365.                 }
  366.                 var self = this;
  367.                 this.mFadeAnimation = new SimpleAnimation(function() {
  368.                     delete self.mFadeAnimation;
  369.                     var startIndex = self.p_startIndex();
  370.                     if (self.mSlideshow.currentPhotoNumber == startIndex - 1 && startIndex < self.mSlideshow.photos.length) {
  371.                         self.mSlideshow.showPhotoNumber(startIndex, true);
  372.                     }
  373.                 });
  374.                 this.mFadeAnimation.pre = function() {
  375.                     IWSetDivOpacity(slideshowDiv, startOpacity);
  376.                 }
  377.                 this.mFadeAnimation.post = function() {
  378.                     IWSetDivOpacity(slideshowDiv, 0);
  379.                 }
  380.                 this.mFadeAnimation.update = function(now) {
  381.                     IWSetDivOpacity(slideshowDiv, startOpacity * (1.0 - now));
  382.                 }
  383.                 this.mFadeAnimation.start();
  384.             }
  385.         }
  386.     }
  387. });

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.