// (c) Copyright Microsoft Corporation. // This source is subject to the Microsoft Permissive License. // See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx. // All other rights reserved. /// /// /// /// /// /// Type.registerNamespace('AjaxControlToolkit'); AjaxControlToolkit.SlideShowBehavior = function(element) { /// /// creates a new slide show behavior /// /// /// AjaxControlToolkit.SlideShowBehavior.initializeBase(this, [element]); // Properties this._nextButtonID = null; this._previousButtonID = null; this._imageDescriptionLabelID = null; this._imageTitleLabelID = null; this._playButtonID = null; this._playButtonValue = '||>'; this._stopButtonValue = '[]'; this._slideShowServicePath = null; this._slideShowServiceMethod = null; this._contextKey = null; this._useContextKey = false; this._playInterval = 3000; this._tickHandler = null; this._loop = false; this._autoPlay = false; // Variables this._inPlayMode = false; this._elementImage = null; this._bNext = null; this._bPrevious = null; this._currentIndex = -1; this._currentValue = null; this._imageDescriptionLabel = null; this._imageTitleLabel = null; this._bPlay = null; this._slides = null; this._timer = null; this._currentImageElement = null; this._images = null; this._cachedImageIndex = -1; // Delegates this._clickNextHandler = null; this._clickPreviousHandler = null; this._clickPlayHandler = null; this._tickHandler = null; this._imageLoadedHandler = null; } AjaxControlToolkit.SlideShowBehavior.prototype = { initialize : function() { /// /// Initialize the slide show. /// /// AjaxControlToolkit.SlideShowBehavior.callBaseMethod(this, 'initialize'); var e = this.get_element(); this._elementImage = e; // create an invisible img element this._currentImageElement = document.createElement('IMG'); this._currentImageElement.style.display = 'none'; document.body.appendChild(this._currentImageElement); //Create a new parent for Image var _divContent = document.createElement('DIV'); e.parentNode.insertBefore(_divContent, e); e.parentNode.removeChild(e); _divContent.appendChild(e); _divContent.align = 'center'; this.controlsSetup(); // Create handlers for slide show buttons clicks events and for image loaded events. if (this._bNext) { this._clickNextHandler = Function.createDelegate(this, this._onClickNext); $addHandler(this._bNext, 'click', this._clickNextHandler); } if (this._bPrevious) { this._clickPreviousHandler = Function.createDelegate(this, this._onClickPrevious); $addHandler(this._bPrevious, 'click', this._clickPreviousHandler); } if (this._bPlay) { this._clickPlayHandler = Function.createDelegate(this, this._onClickPlay); $addHandler(this._bPlay, 'click', this._clickPlayHandler); } this._imageLoadedHandler = Function.createDelegate(this, this._onImageLoaded); $addHandler(this._currentImageElement, 'load', this._imageLoadedHandler); // init slide show this._slideShowInit(); }, dispose : function() { /// /// Dispose the handlers and perform other slide show cleanup. /// /// if (this._clickNextHandler) { $removeHandler(this._bNext, 'click', this._clickNextHandler); this._clickNextHandler = null; } if (this._clickPreviousHandler) { $removeHandler(this._bPrevious, 'click', this._clickPreviousHandler); this._clickPreviousHandler = null; } if (this._clickPlayHandler) { $removeHandler(this._bPlay, 'click', this._clickPlayHandler); this._clickPlayHandler = null; } if (this._imageLoadedHandler) { $removeHandler(this._currentImageElement, 'load', this._imageLoadedHandler); this._imageLoadedHandler = null; } if (this._timer) { this._timer.dispose(); this._timer = null; } AjaxControlToolkit.SlideShowBehavior.callBaseMethod(this, 'dispose'); }, add_slideChanged : function(handler) { /// /// Add handler for the slideChanged Event. /// /// /// this.get_events().addHandler('slideChanged', handler); }, remove_slideChanged : function(handler) { /// /// Remove handler for the slideChanged Event. /// /// /// this.get_events().removeHandler('slideChanged', handler); }, raiseSlideChanged : function(eventArgs) { /// /// Raise the slideChanged Event. /// /// /// var handler = this.get_events().getHandler('slideChanged'); if (handler) { if (!eventArgs) { eventArgs = Sys.EventArgs.Empty; } handler(this, eventArgs); } }, add_slideChanging : function(handler) { /// /// Add handler for the slideChanging Event. /// /// /// this.get_events().addHandler('slideChanging', handler); }, remove_slideChanging : function(handler) { /// /// Remove handler for the slideChanging Event. /// /// /// this.get_events().removeHandler('slideChanging', handler); }, raiseSlideChanging : function(previousSlide, newSlide) { /// /// Raise the slideChanging Event. /// /// /// /// var handler = this.get_events().getHandler('slideChanging'); if (handler) { var eventArgs = new AjaxControlToolkit.SlideShowEventArgs(previousSlide, newSlide, this._currentIndex); handler(this, eventArgs); return eventArgs.get_cancel(); } return false; }, get_contextKey : function() { /// /// User/page specific context provided to an optional overload of the /// web method described by ServiceMethod/ServicePath. If the context /// key is used, it should have the same signature with an additional /// parameter named contextKey of type string. /// return this._contextKey; }, set_contextKey : function(value) { if (this._contextKey != value) { this._contextKey = value; this.set_useContextKey(true); // if initialize has not been called // then do not reset the slideshow. if(this._elementImage) { this._slideShowInit(); } this.raisePropertyChanged('contextKey'); } }, get_useContextKey : function() { /// /// Whether or not the ContextKey property should be used. This will be /// automatically enabled if the ContextKey property is ever set /// (on either the client or the server). If the context key is used, /// it should have the same signature with an additional parameter /// named contextKey of type string. /// return this._useContextKey; }, set_useContextKey : function(value) { if (this._useContextKey != value) { this._useContextKey = value; this.raisePropertyChanged('useContextKey'); } }, get_enableCaching: function() { /// Get or sets whether suggestions retrieved from the webservice should be cached. return this._enableCaching; }, set_enableCaching: function(value) { this._enableCaching = value; }, get_completionListElementID: function() { /// ID of the completion div element. return this._completionListElementID; }, set_completionListElementID: function(value) { this._completionListElementID = value; }, get_completionListCssClass : function() { /// Css class name that will be used to style the completion list element. this._completionListCssClass; }, set_completionListCssClass : function(value) { if(this._completionListCssClass != value) { this._completionListCssClass = value; this.raisePropertyChanged('completionListCssClass'); } }, get_completionListItemCssClass : function() { /// Css class name that will be used to style an item in the completion list. this._completionListItemCssClass; }, set_completionListItemCssClass : function(value) { if(this._completionListItemCssClass != value) { this._completionListItemCssClass = value; this.raisePropertyChanged('completionListItemCssClass'); } }, get_highlightedItemCssClass : function() { /// Css class name that will be used to style a highlighted item in the list. this._highlightedItemCssClass; }, set_highlightedItemCssClass : function(value) { if(this._highlightedItemCssClass != value) { this._highlightedItemCssClass = value; this.raisePropertyChanged('highlightedItemCssClass'); } }, get_delimiterCharacters: function() { /// Gets or sets the character(s) used to seperate words for autocomplete. return this._delimiterCharacters; }, set_delimiterCharacters: function(value) { this._delimiterCharacters = value; }, controlsSetup : function() { /// /// Get handles to various slide show controls if specified. /// /// if (this._previousButtonID) { this._bPrevious = document.getElementById(this._previousButtonID); } if (this._imageDescriptionLabelID) { this._imageDescriptionLabel = document.getElementById(this._imageDescriptionLabelID); } if (this._imageTitleLabelID) { this._imageTitleLabel = document.getElementById(this._imageTitleLabelID); } if (this._nextButtonID) { this._bNext = document.getElementById(this._nextButtonID); } if (this._playButtonID) { this._bPlay = document.getElementById(this._playButtonID); this._bPlay.value = this._playButtonValue; } }, resetButtons : function() { /// /// Maintain the various buttons states. /// /// if (!this._loop) { // at the last slide if (this._slides.length <= this._currentIndex + 1 ) { if (this._bNext) this._bNext.disabled = true; if (this._bPlay) this._bPlay.disabled = true; if (this._bPrevious) this._bPrevious.disabled = false; // turn off play mode if on this._inPlayMode = false; if (this._timer) { this._timer.set_enabled(false); } if (this._bPlay) this._bPlay.value = this._playButtonValue; } else { if (this._bNext) this._bNext.disabled = false; if (this._bPlay) this._bPlay.disabled = false; } // at the first slide if (this._currentIndex <= 0) { if (this._bPrevious) this._bPrevious.disabled = true; } else { if (this._bPrevious) this._bPrevious.disabled = false; } } else { if (this._slides.length == 0) { if (this._bPrevious) this._bPrevious.disabled = true; if (this._bNext) this._bNext.disabled = true; if (this._bPlay) this._bPlay.disabled = true; } } if (this._inPlayMode) { // restart timer this._timer.set_enabled(false); this._timer.set_enabled(true); } }, resetSlideShowButtonState : function() { /// /// Maintain the play button state to reflect whether the slide show is in play mode. /// /// if (this._inPlayMode) { if (this._bPlay) this._bPlay.value = this._stopButtonValue; } else { this.resetButtons(); if (this._bPlay) this._bPlay.value = this._playButtonValue; } }, setCurrentImage : function() { /// /// Retrieve the current image. /// /// if (this._slides[this._currentIndex]) { this._currentImageElement.src = this._slides[this._currentIndex].ImagePath; } else { this._currentImageElement.src = ''; } if(Sys.Browser.agent == Sys.Browser.Opera) { // call the handler explicitly for opera this._onImageLoaded(true); } }, updateImage : function(value) { /// /// Set current image to be the specified Slide. /// /// /// if (value) { if (this.raiseSlideChanging(this._currentValue, value)) { return; } this._currentValue = value; this._elementImage.src = value.ImagePath; this._elementImage.alt = value.Name; if (this._imageDescriptionLabel) { this._imageDescriptionLabel.innerHTML = value.Description ? value.Description : ""; } if (this._imageTitleLabel) { this._imageTitleLabel.innerHTML = value.Name ? value.Name : ""; } this.raiseSlideChanged(value); this.resetButtons(); } }, get_imageDescriptionLabelID : function() { /// /// ID of the label that describes the current slide. /// return this._imageDescriptionLabelID; }, set_imageDescriptionLabelID : function(value) { if (this._imageDescriptionLabelID != value) { this._imageDescriptionLabelID = value; this.raisePropertyChanged('imageDescriptionLabelID'); } }, get_imageTitleLabelID : function() { /// /// ID of the label that shows the title of the current slide. /// return this._imageTitleLabelID; }, set_imageTitleLabelID : function(value) { if (this._imageTitleLabelID != value) { this._imageTitleLabelID = value; this.raisePropertyChanged('imageTitleLabelID'); } }, get_nextButtonID : function() { /// /// ID on the next button. /// return this._nextButtonID; }, set_nextButtonID : function(value) { if (this._nextButtonID != value) { this._nextButtonID = value; this.raisePropertyChanged('nextButtonID'); } }, get_playButtonID : function() { /// /// ID on the play button. /// return this._playButtonID; }, set_playButtonID : function(value) { if (this._playButtonID != value) { this._playButtonID = value; this.raisePropertyChanged('playButtonID'); } }, get_playButtonText : function() { /// /// Text in play button to play the slide show when it is not playing. /// return this._playButtonValue; }, set_playButtonText : function(value) { if (this._playButtonValue != value) { this._playButtonValue = value; this.raisePropertyChanged('playButtonText'); } }, get_stopButtonText : function() { /// /// Text in play button to stop the slide show when it is playing. /// return this._stopButtonValue; }, set_stopButtonText : function(value) { if (this._stopButtonValue != value) { this._stopButtonValue = value; this.raisePropertyChanged('stopButtonText'); } }, get_playInterval : function() { /// /// Interval in milliseconds between slide switches. /// return this._playInterval; }, set_playInterval : function(value) { if (this._playInterval != value) { this._playInterval = value; this.raisePropertyChanged('playInterval'); } }, get_previousButtonID : function() { /// /// ID of the previous button. /// return this._previousButtonID; }, set_previousButtonID : function(value) { if (this._previousButtonID != value) { this._previousButtonID = value; this.raisePropertyChanged('previousButtonID'); } }, get_slideShowServicePath : function() { /// /// Slide show webservice path to pull the images. /// return this._slideShowServicePath; }, set_slideShowServicePath : function(value) { if (this._slideShowServicePath != value) { this._slideShowServicePath = value; this.raisePropertyChanged('slideShowServicePath'); } }, get_slideShowServiceMethod : function() { /// /// Slide show webservice methods that will return the slide images. /// return this._slideShowServiceMethod; }, set_slideShowServiceMethod : function(value) { if (this._slideShowServiceMethod != value) { this._slideShowServiceMethod = value; this.raisePropertyChanged('slideShowServiceMethod'); } }, get_loop : function() { /// /// boolean to detect if slideshow should wrap around on hitting the first/last slides. /// return this._loop; }, set_loop : function(value) { if (this._loop != value) { this._loop = value; this.raisePropertyChanged('loop'); } }, get_autoPlay : function() { /// /// boolean to detect if slide show should start playing on render. /// return this._autoPlay; }, set_autoPlay : function(value) { if (this._autoPlay != value) { this._autoPlay = value; this.raisePropertyChanged('autoPlay'); } }, _onClickNext : function(e) { /// /// Next button click handler. /// /// /// // prevent server post-back for asp.net buttons. e.preventDefault(); e.stopPropagation(); this._clickNext(); }, _onImageLoaded : function(e) { /// /// Image loaded handler. /// /// /// this.updateImage(this._slides[this._currentIndex]); this.resetButtons(); this._cacheImages(); }, _clickNext : function() { /// /// Switches slide show to displaying the next slide. /// /// if (this._slides) { if ((this._currentIndex + 1) < this._slides.length) { ++this._currentIndex; } else if (this._loop) { this._currentIndex = 0; } else { return false; } this.setCurrentImage(); return true; } return false; }, _onClickPrevious : function(e) { /// /// Previous button click handler. /// /// /// // prevent server post-back for asp.net buttons. e.preventDefault(); e.stopPropagation(); this._clickPrevious(); }, _clickPrevious : function() { /// /// Switches slide show to displaying the previous slide. /// /// if (this._slides) { if ((this._currentIndex - 1) >= 0) { --this._currentIndex; } else if (this._loop) { this._currentIndex = this._slides.length - 1; } else { return false; } this.setCurrentImage(); return true; } return false; }, _onClickPlay : function(e) { /// /// Play button click handler. /// /// /// // prevent server post-back for asp.net buttons. e.preventDefault(); e.stopPropagation(); this._play(); }, _play : function() { /// /// Maintains timer state/slide show buttons state and creates handler to switch images in play mode /// if not already in play mode. /// /// if (this._inPlayMode) { this._inPlayMode = false; this._timer.set_enabled(false); this.resetSlideShowButtonState(); } else { // play the side show this._inPlayMode = true; if (!this._timer) { this._timer = new Sys.Timer(); this._timer.set_interval(this._playInterval); this._tickHandler = Function.createDelegate(this, this._onPlay); this._timer.add_tick(this._tickHandler); } this.resetSlideShowButtonState(); this._timer.set_enabled(true); } }, _onPlay : function(e) { /// /// Sets the slide show to the current image in play mode and maintains button state. /// /// /// if (this._slides) { if ((this._currentIndex + 1) < this._slides.length) { ++this._currentIndex; this.setCurrentImage(); return true; } else if (this._loop) { this._currentIndex = 0; this.setCurrentImage(); return true; } else { this._inPlayMode = false; this.resetSlideShowButtonState(); } } return false; }, _slideShowInit : function() { /// /// Initializes the slide show by invoking the webservice to retrieve the slides /// and sets the first slide. /// /// // clear the state of the slideshow this._currentIndex = -1; this._cachedImageIndex = -1; this._inPlayMode = false; this._currentValue = null; // clear the cache this._images = null; // Create the service parameters and optionally add the context parameter // (thereby determining which method signature we're expecting...) var params = null; if (this._useContextKey) { params = { contextKey : this._contextKey }; } Sys.Net.WebServiceProxy.invoke( this._slideShowServicePath, this._slideShowServiceMethod, false, params, Function.createDelegate(this, this._initSlides), null, null); }, _initSlides : function(sender, eventArgs) { /// /// Initializes the slide show with the first image and configures the specified play settings. /// /// /// /// this._slides = sender; if (this._slides) { this._images = new Array(); this._clickNext(); if (this._autoPlay) { this._play(); } } }, _cacheImages : function() { /// /// Caches 4 more slides periodically. /// /// // cache if current index is divisible by 3 if ((this._currentIndex) % 3 == 0) { var oldCachedImageIndex = this._cachedImageIndex; for (var i = this._cachedImageIndex + 1; i < this._slides.length; i++) { if (this._slides[i]) { this._images[i] = new Image(); this._images[i].src = this._slides[i].ImagePath; this._cachedImageIndex = i; if((oldCachedImageIndex + 4) <= i ) { // cached 4 slides break; } } } } } } AjaxControlToolkit.SlideShowBehavior.registerClass('AjaxControlToolkit.SlideShowBehavior', AjaxControlToolkit.BehaviorBase); AjaxControlToolkit.SlideShowEventArgs = function(previousSlide, nextSlide, slideIndex) { /// /// Event arguments for the SlideShowBehavior's slideChanging event /// /// /// /// /// AjaxControlToolkit.SlideShowEventArgs.initializeBase(this); this._previousSlide = previousSlide; this._nextSlide = nextSlide; this._slideIndex = slideIndex; } AjaxControlToolkit.SlideShowEventArgs.prototype = { get_previousSlide : function() { /// /// PreviousSlide /// return this._previousSlide; }, get_nextSlide : function() { /// /// NextSlide /// return this._nextSlide; }, get_slideIndex : function () { /// /// SlideIndex /// return this._slideIndex; } } AjaxControlToolkit.SlideShowEventArgs.registerClass('AjaxControlToolkit.SlideShowEventArgs', Sys.CancelEventArgs);