1

268 views
195 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
268
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

1

  1. 1. /** * @class Base Class for Slides * @param {Object} config An options hash with settings for the Slide */ function SSSlide(config){ if (typeof config === "undefined"){ return; } this.index = config.index; this.realIndex = config.realIndex; // set Content Dimensions this.setContentDimensions(config.contentWidth, config.contentHeight); delete(config.contentWidth); delete(config.contentHeight); } this.config = config; this._init(); SSSlide.prototype.setContentDimensions = function(width, height){ this.contentWidth = width; this.contentHeight = height; }; /** * Initializes the slide object * @private */ SSSlide.prototype._init = function(){ this.status = 'initialized'; // make constants? this.controller = $.slideshareEventManager.getController(); this.playerContainer = "#" + this.controller.config.container; this.$stage = $(this.playerContainer + ' .stage'); this.$slide = this.$stage.find('.slide').eq(this.index - 1); this.$imageEle = this.$slide.children('.slide_image'); this.viewModes = {}; this.resources = {}; this._createResources(); this._bindEvents(); }; SSSlide.prototype.stop = function() { // }; /** * Constructs urls for slide resources * @private */ SSSlide.prototype._createResources = function(){ // this is for the standalone player, which doesn't necessarily have a // timestamp (in contrast to the webapp) if (typeof this.config.timestamp === 'undefined') { this.config.timestamp = (new Date()).getTime(); } switch (this.config.slideMode){ case 'image':
  2. 2. var signature_hash = {}; this.resources.image = new SSFallbackImageResource({ baseUrl : this.config.bucketLocation, timestamp : this.config.timestamp, resourceKey : 'image', indexGenerator : this.config.indexGenerator, playerWidth : this.config.playerWidth, slideIndex : this.index, realIndex : this.realIndex, is_private : this.config.is_private, signatures : signature_hash, availableSizes : this.config.availableSizes, contentWidth : this.contentWidth, privateImageSignatures : this.config.privateImageSignatures , conversionVersion : this.config.conversionVersion, isFullscreen : this.isFullscreen(), show_image_player : this.config.show_image_player }); break; case 'html': this.resources.image = new SSBgImageResource({ baseUrl : this.config.bucketLocation, availableSizes : this.config.availableSizes, timestamp : this.config.timestamp, resourceKey : 'image', indexGenerator : this.config.indexGenerator, playerWidth : this.config.playerWidth, slideIndex : this.index, realIndex : this.realIndex, is_private : this.config.is_private, contentWidth : this.contentWidth, conversionVersion : this.config.conversionVersion, privateImageSignatures : this.config.privateImageSignatures, isFullscreen : this.isFullscreen(), show_image_player : this.config.show_image_player }); this.resources.html = new SSHtmlResource({ baseUrl : this.config.bucketLocation, timestamp : this.config.timestamp, resourceKey : 'html', indexGenerator : this.config.indexGenerator, slideIndex : this.index, realIndex : this.realIndex, is_private : this.config.is_private , conversionVersion: this.config.conversionVersion, signature : this.config.htmlResourceSignature }); break; } // delete(this.config.availableSizes); }; /** * Call this to reset the Slide and its resources to its preloaded state. * For per slide reloading * @public */ SSSlide.prototype.reset = function(){ this.status='initialized'; var reskey; for (reskey in this.resources){ resource = this.resources[reskey].reset(); }
  3. 3. }; /** * Call this to load the Slide and its resources. * @note Is safe to call multiple times * @public */ SSSlide.prototype.load = function(){ if (this.status === 'cached'){ // already have this in cache // fire off a call to image resource to update its versions this._getNewResourceVersions(this.currentViewMode.wrapperWidth); $.slideshareEventManager.trigger('slideloaded', {index : this.index }); return; } if (this.status === 'loading'){ $.slideshareEventManager.trigger('slideloading', {index : this.index }); return; } if (this.status === 'failed'){ // this slide has failed loading in the previous try. $.slideshareEventManager.trigger('slideloadfailed', {index : this.index }); return; } // start the caching phase this.status = 'loading'; $.slideshareEventManager.trigger('slideloading', {index : this.index }); var that = this; var reskey; for (reskey in this.resources){ resource = this.resources[reskey]; resource.status = 'loading'; resource.load(); } }; /** * Set the status for a resource * @param {String} reskey The key for the resource out of the set of resources available to the slide * @param {Object} values Set of key/value pairs for properties of the resource to update */ SSSlide.prototype.updateResource = function(reskey, values){ if (typeof this.resources[reskey] === 'undefined'){ return; } this.resources[reskey].update(values); }; /** * Updates the Slide Display Container with information that there was an error * @private */ SSSlide.prototype.displayError = function(jQueryDomObject, noRetry){ this.empty(); jQueryDomObject.appendTo(this.currentViewMode.wrapper); var that=this; var button = jQueryDomObject.find('input'); if (noRetry){ button.hide();
  4. 4. } else { button.bind('click', function(e){ e.preventDefault(); e.stopPropagation(); that.reset(); that.load(); }); } }; /** * Updates display with Slide contents. To be called once slide has finished loading * @private */ SSSlide.prototype.paint = function(){ if (typeof this.currentViewMode.imageElement === 'undefined'){ this.render(); } // Height is set to auto in the render function. this.currentViewMode.imageElement.css({ width: this.currentViewMode.width }); var var var var var viewPort = $('#svPlayerId'); origwidth, origheight, contentAspect, relaxedContentAspect, contentDiv; viewWidth = viewPort.width(); viewHeight = viewPort.height() - 38; viewAspect = viewWidth/viewHeight; if(this.currentViewMode.contentElement){ //Hack to get orignal size of the image from html content of the slide( ssml_div has the same width and height) contentDiv = this.currentViewMode.contentElement.children('.ssml_div'); origwidth = contentDiv.width(); origheight = contentDiv.height(); contentAspect = origwidth/origheight; relaxedContentAspect = origwidth/(origheight-20); // ignoring divide by zero possibility var scale, contentScale, fontscale, width, height; var top, left; if (relaxedContentAspect>viewAspect ){ //perform width based manipulations contentScale = viewWidth/origwidth; width = viewWidth; scale = viewAspect/contentAspect; left = 0; top = 0; height = scale * viewHeight; } else { contentScale = viewHeight/origheight; scale = contentAspect/viewAspect; top = 0; left = ((1-scale)/2*100) + '%' ; width = scale * viewWidth; height = viewHeight; } if(this.config.playerType === "document"){ contentScale = viewWidth/origwidth;
  5. 5. fontscale = contentScale*16; width = viewWidth; scale = viewAspect/contentAspect; // top = this.PADDING; height = scale * viewHeight; top = ($('.slide').eq(this.index -1).height() + 10)* (this.index - 1) ; width = parseInt(width, 10); height = parseInt(height, 10); left = 0; } this.currentViewMode.contentScale = contentScale; if (this.config.slideMode === 'html' && this.index !== 1){ var zoomStyles; if (Modernizr.csstransforms){ ')', zoomStyles = { '-moz-transform' : 'scale(' + this.currentViewMode.contentScale + ')', '-webkit-transform' : 'scale(' + this.currentViewMode.contentScale + '-o-transform' : 'scale(' + this.currentViewMode.contentScale + ')', 'msTransform' : 'scale(' + this.currentViewMode.contentScale + ')', '-moz-transform-origin' : '0 0', '-webkit-transform-origin' : '0 0', '-o-transform-origin' : '0 0', 'msTransformOrigin' : '0 0' }; } else { zoomStyles = { 'zoom' : this.currentViewMode.contentScale }; } this.slideContainer = $('.slide').eq(this.index - 1); //top = $('.slide').eq(this.index -1).height() * (this.index - 1) ; this.isFullscreen() && this.slideContainer.css({ 'width' : width, 'height' : height, 'left' : left, 'position' : 'absolute', 'top' : top }); this.currentViewMode.contentElement.children('.ssml_div').css(zoomStyles); } } if(this.config.slideMode === 'image') { this._updateLinks(); } }; SSSlide.prototype.isFullscreen = function(){ return this.currentMode === 'fullscreen' || this.currentMode === 'nativefullscreen'; }; /** * Renders the contents of the slide into the Slide Display Container. * Adds/Removes contents from Dom. Performance penalty when called repeatedly.
  6. 6. * Avoid using this where {@link paint()} would do * @private */ SSSlide.prototype.render = function() { this.empty(); var imageEle, srcValue; var that =this; var currentPosition = $.slideshareEventManager.getCurrentPosition(); var controller = $.slideshareEventManager.getController(); var playerContainer = "#" + controller.config.container; if (!this.config.show_image_player) { imageEle = $('<img/>').css({ height: 'auto', position: 'absolute', top: 0, left: 0, margin: 0, padding: 0 }); srcValue = this.resources.image.getContent(); } else { imageEle = $('.slide_image').eq(this.index - 1); this.currentViewMode.imageElement = imageEle; if (this.isFullscreen() || this.$stage.width() > 638) { srcValue = this.$imageEle.data('full'); imageEle.removeAttr("width"); } else if (this.$stage.width() <= 320) { srcValue = this.$imageEle.data('small'); } else { srcValue =this.resources.image._generateUrlV2(this.resources.image.indexString, 638 , 95); //srcValue = this.$imageEle.data('normal'); } } this.currentViewMode.imageElement = imageEle; // Load image. var image = new Image(); image.onload = function () { var currentPosition = that.controller.currentPosition; var oldHeight = that.$slide.height(); var currentScrollTop = that.$stage.scrollTop(); that.$slide.css("min-height", 0); if (typeof that.controller.firstLoad === "undefined") { that.controller.firstLoad = true; } else { that.controller.firstLoad = false; } that.currentViewMode.imageElement.attr({ src: srcValue }); // If document, the new image may change the height of the slide... we need to add the // height difference if the slide is before the current slide to avoid
  7. 7. shifting. if (that.config.playerType === "document") { var heightDiff = that.$slide.height() - oldHeight; // If first image to load, set the default height for all slides to this // slide height. if (that.controller.firstLoad) { that.$slide.css("min-height", that.$slide.height()); currentScrollTop += heightDiff * (currentPosition - 3); } if (that.index < currentPosition) { that.$stage.scrollTop(currentScrollTop + heightDiff); } } // Postload var imageLoadedCallback = function(){ that.loadLinks(); that.config.slideMode === 'html' && that.loadHtmlMeta(); $(window).trigger('resize'); }; if (that.config.show_image_player) { if (document.readyState === 'complete') { imageLoadedCallback(); } else { if(window.addEventListener) { window.addEventListener('load', imageLoadedCallback, false); } else if (window.attachEvent) { window.attachEvent('onload', imageLoadedCallback); } } } // Without this images flicker when animation ends in ios (for css3 animation) if(typeof isIos === 'function' && isIos()){ $(this).css('-webkit-backface-visibility', 'hidden'); } { // Only fire resize events on the slideview page (not slideshelf or embed) if (that.config.hosted_in === 'slideview' && !that.config.show_image_player) // Remove the height CSS on the image, so it'll revert to its natural size. // If the CSS height differs from the natural height, // then we know that the browser has resized the image. var cssHeight = $(this).height(); $(this).css('height', 'auto'); var naturalHeight = $(this).height(); // // If the browser resizes the image, and we haven't already fired a GA alert, // // we should fire a GA alert. if (cssHeight !== naturalHeight && !window.slideResizeEventFired) { window.slideResizeEventFired = true; var preso_id = that.config.ssid;
  8. 8. var slide_number = '00'; var slideRegex = /slide-(d+)-.*/; if (slideRegex.test(this.src)) { slide_number = this.src.match(slideRegex)[1]; } var label = preso_id + '_slide_' + slide_number; $.slideshareEventManager.trackRawEvent('jsplayer_debug', 'slideresize', label); } // // Revert to the CSS height $(this).css('height', 'auto'); } }; image.src = srcValue; if (!this.config.show_image_player) { imageEle.appendTo(this.currentViewMode.wrapper); } //The first slide is rendered in image mode in html player if(this.index !== 1) { image.src = srcValue; this.currentViewMode.imageElement.attr({ src: srcValue }); } var styleData; if (this.config.show_image_player && this.config.slideMode === 'html' && this.index !== 1){ var slideElement = $('.slide').eq(this.index - 1); styleData = '<style>' + this.resources.html.getContent().style + '</style>'; if(slideElement.children('style').length === 0){ $(styleData).appendTo(slideElement); } if(slideElement.children('.content_container').children('div').length){ //For fullscreen this.currentViewMode.contentElement = slideElement.children('.content_container') ; } else { this.currentViewMode.contentElement = slideElement.children('.content_container').html(this.resources.html.getContent( ).html); this.currentViewMode.contentElement.appendTo(slideElement); } } if(!this.config.show_image_player && this.config.slideMode === 'html'){ styleData = '<style>' + this.resources.html.getContent().style + '</style>'; $(styleData).appendTo(this.currentViewMode.wrapper); this.currentViewMode.contentElement = $('<div/>').css({ position: 'absolute', overflow: 'hidden' }).html(this.resources.html.getContent().html); this.currentViewMode.contentElement.appendTo(this.currentViewMode.wrapper); }
  9. 9. }; SSSlide.prototype.loadLinks = function () { var that = this; var controller = $.slideshareEventManager.getController(); if(controller.linksLoaded === true){ this.renderLinksForSlide(); return; } $.jsonp({ url : that.config.bucketLocation + '/meta.js?' + this.config.timestamp, callback : 'slideshare_jsonp_meta_hook_trigger', cache : true, timeout : 10000, success : function(meta) { controller.links = meta.links; controller.linksLoaded = true; that.renderLinksForSlide(); } }); }; SSSlide.prototype.loadHtmlMeta = function(){ if(player.metaLoaded === true){ return; } player.metaLoaded = true; $.jsonp({ url: player.config.bucket_location + (this.config.is_private ? 'meta.js': '/meta.js'), callback: 'slideshare_jsonp_meta_hook_trigger', cache : true, timeout : 10000, success: function(meta){ player.metaLoaded = true; var commonStyle = "n.ssml_div span {line-height:normal;} " + "n.ssml_div div {line-height:normal;}n.ssml_div{font-size:16px;}"; var finalResetStyleTag = '<style>' + (meta.global_styles_css) + commonStyle + '</style>'; $(finalResetStyleTag).appendTo($('.lightPlayer')); $.slideshareEventManager.trigger('htmlmetadataloaded', { 'json' : meta }); //Todo: Error Score stuff } }); }; SSSlide.prototype.renderLinksForSlide = function(){ var controller = $.slideshareEventManager.getController(); var playerContainer = "#" + controller.config.container; if (typeof controller.links === 'undefined' || typeof controller.links[this.index] === 'undefined') { return; } var var var var var var slideImage = this.currentViewMode.imageElement; width = slideImage[0].naturalWidth; height = slideImage[0].naturalHeight; slideLinks = controller.links[this.index].links; linkCount = slideLinks.length, i, j, linkObj, coords; imageMapId = 'image_map_' + this.index + '_' + (new Date().getTime());
  10. 10. if (this.currentViewMode.imageMapId !== undefined){ $('#' + this.currentViewMode.imageMapId).remove(); } this.currentViewMode.imageMapId = imageMapId; var mapContent = '<map id="'+ imageMapId + '" name="'+ imageMapId +'">'; for (i = 0; i < linkCount; i++) { linkObj = slideLinks[i]; coords = [ parseInt((linkObj.box[0] || 0) * width / 100, 10), parseInt((linkObj.box[3] || 0) * height / 100, 10), parseInt((linkObj.box[2] || 0) * width / 100, 10), parseInt((linkObj.box[1] || 0) * height / 100, 10) ]; coords = coords.join(','); mapContent = mapContent + '<area shape="rect" target="_blank" coords="'+ coords +'" href="'+ linkObj.url +'" rel="nofollow" />'; } mapContent = mapContent + '</map>'; $(mapContent).appendTo(playerContainer + " .image_maps"); slideImage.attr('usemap', '#' + imageMapId); slideImage.rwdImageMaps(); }; SSSlide.prototype._updateLinks = function(){ if (this.currentViewMode.imageMapId !== undefined){ $('#' + this.currentViewMode.imageMapId).remove(); } this._renderLinks(); }; SSSlide.prototype._renderLinks = function(){ var links = this.resources.image.links; if (links === undefined){ // nothing to do here return; } var width = this.currentViewMode.width; var height = this.currentViewMode.height; var linkCount = links.length, i,j, linkObj, coords; var mapId = 'image_map_' + this.currentMode + '_' + this.index parseInt(Math.random() * 2500,10) ; var mapContent = '<map id="'+ mapId + '" name="'+ mapId +'">'; for(i=0;i<linkCount;i++){ linkObj = links[i]; + coords = [ parseInt((linkObj.box[0] || 0) * width / 100,10), parseInt((linkObj.box[3] || 0) * height / 100,10), parseInt((linkObj.box[2] || 0) * width / 100,10), parseInt((linkObj.box[1] || 0) * height / 100,10) ]; coords = coords.join(','); mapContent = mapContent + '<area shape="rect" coords="'+ coords +'" href="'+ linkObj.url +'" rel="nofollow" />'; }; } mapContent = mapContent + '</map>'; $(mapContent).appendTo(this.currentViewMode.wrapper); this.currentViewMode.imageElement.attr('usemap', '#' + mapId); this.currentViewMode.imageMapId = mapId;
  11. 11. SSSlide.prototype._getNewResourceVersions = function(){ // resource version to be done only for images this.resources.image._tryLoad(this.currentViewMode.wrapperWidth); }; SSSlide.prototype.updateRenderedResourceVersion = function(resourceKey){ if (!this.currentViewMode.rendered){ return; } // resource version to be done only for images if (resourceKey === 'image' && this.currentViewMode.imageElement !== undefined){ this.currentViewMode.imageElement.attr({ src : this.resources.image.getContent() }); } }; /** * Binds EventHandlers to the Slide. * @private * @note Call only once per slide */ SSSlide.prototype._bindEvents = function(){ // noop };

×