${Akamai.Util
.map(json.urls, function(url) { return Spin360._renderImg(url, finalOptions); })
.join("\n")
}
`);
};
/**
* Defines the global default options for all Spin360s on the page
* @static
* @property {Boolean} autoplay.enabled - Enable autoplay (default: false)
* @property {Integer} autoplay.delay - Delay in milliseconds after initialization before spinning begins (default: 1000)
* @property {Boolean} controls.arrows - Render controls to spin left and right (default: false)
* @property {Boolean} controls.play - Render controls to enable and disable automatic spinning (default: false)
* @property {String} controls.text.left - Left rotation control title and text (default: "Rotate Left")
* @property {String} controls.text.right - Right rotation control title and text (default: "Rotate Right")
* @property {String} controls.text.play - Spin control title and text (default: "Spin Object")
* @property {Array} images.widths - list of available widths for an image (to be combined with image.widthParam), Default: ["320","640","800","1024","2048","5000"]
* @property {String} images.sizes - value for image sizes attribute. Default is set dynamically to viewer width when rendered with JS, and updated dynamically. Values: `100vw`, `200px`, `(min-width:1000px) 500px, 100vw`.
* @property {String} images.policy - query param value for policy, appended to &policy= per image url when specified. Values: `foo`. Default: undefined.
* @property {String} images.widthParam - query string name to use for setting each url width. Default urls will be ?imwidth=320 for example. Values: `imwidth` (default), `w`, `width`, etc.
* @property {Integer} interval - The full rotation interval in milliseconds, determines physics, (default: 3000)
* @property {Boolean} reverse - Reverse the direction of the spin (default: false)
* @property {Float} sensitivity - The speed at which the object rotates relative to user input (default: 1). At the default value of `1` the object will complete a full 360 rotation when you drag across the entire width of the spin360 component. To require less effort to complete a rotation, change this value to a higher number. For example, setting `sensitivity: 2` would complete a full 360 rotation by dragging halfway (ex. from the center to the edge).
*/
Spin360.defaultOptions = {
autoplay: {
enabled: false,
delay: 1000
},
controls: {
arrows: false,
play: false,
text: {
left: "Rotate Left",
right: "Rotate Right",
play: "Spin Object"
}
},
// unsupported, the number of frame images to create using the configured
// template
frames: 72,
images: Akamai.Image.defaultConfig,
interval: 3000,
reverse: false,
sensitivity: 1,
// unsupported, template used to generate urls when only one image is
// present in the 360 viewer
template: undefined
};
/**
* Goto to a particular frame of the spining image
* @method
* @param {Integer} index - the frame to advance to
* @param {Function?} callback - callback invoked after the action has completed in the DOM
* @returns {undefined}
*/
Spin360.prototype.goto = function(index, callback){
this._comp.goto(index);
// NOTE goto must come before the callback because the callback will be
// used to trigger the `next` and `previous` events. The order should be
// maintained consistently as `goto` -> `next`/`previous`
this._trigger("goto");
if(callback){ callback(); }
};
/**
* Return the current frame index
* @method
* @returns {Integer}
*/
Spin360.prototype.getIndex = function(){
return this._comp.index;
};
// Extend Carousel with Advanceable interface
Akamai.Advanceable.extend(Spin360);
/**
* Go to the next frame
* @method
* @param {Function?} callback - callback invoked after the action has completed in the DOM
* @returns {undefined}
*/
Spin360.prototype.next;
// required for JSDocs
/**
* Go to the previous frame
* @method
* @param {Function?} callback - callback invoked after the action has completed in the DOM
* @returns {undefined}
*/
Spin360.prototype.previous;
// required for JSDocs
/**
* Begin the automatic rotation of the images
* @todo support passing in an interval or speed?
* @method
* @fires Akamai.Spin360#akamai-spin360-play
* @returns {undefined}
*/
Spin360.prototype.play = function(){
this._comp.autoRotate();
};
/**
* Stop the automatic rotation of the images
* @method
* @fires Akamai.Spin360#akamai-spin360-pause
* @returns {undefined}
*/
Spin360.prototype.pause = function(){
this._comp.stopAutoRotate();
};
Spin360.prototype.getElement = function(){
return this._$el[0];
};
Spin360.States = {
Playing: 0,
Paused: 1
};
/**
* Return the current state of the spin360
* @example
${Carousel.renderMapping[item.type].render(item, options[mappedType])}
`;
};
Carousel._renderThumbnailAnchor = function(item, data, i, options) {
var thumbUrl = "";
var altText = item.alt || "";
// use the video poster, the canonical url, or the first in a sequence
if( item.type === 'video' ){
thumbUrl = item.poster || data.reduce(function(acc, i){
return acc || Carousel._thumbUrl(i);
}, "");
} else {
thumbUrl = Carousel._thumbUrl(item);
}
// TODO this sucks
options.images.policy = options.thumbnail.policy;
var src = Carousel._fallbackSrc( thumbUrl, options.images );
var srcset = Carousel._srcset( thumbUrl, options.images );
var sizes = options.images.sizes;
// if there's a thumbnail policy, the thumbnails will be fresh image requests,
// so they should have better sizes attribute values
if( options.thumbnail.policy ){
sizes = options.thumbnail.sizes;
}
var attrs = [
`${Carousel._dataAttr}-thumb-type="${item.type}"`,
item.type == "video" && !item.poster ? "${Carousel._dataAttr}-thumb-noposter" : ""
];
return `
${Akamai.Util.map(data, function(item, i){
return Carousel._renderThumbnailAnchor(item, data, i, options);
}).join("\n")}
${Akamai.Util.map(data, function(item, i){
return Carousel._renderItem(item, i, carouselOptions);
}).join("\n")}
" );
this._isFullscreen = false;
this.addEvents();
};
Fullscreen.classes = {
btn: "akamai-fullscreen-btn",
btnContainer: "akamai-fullscreen-btncontainer",
enterBtn: "akamai-fullscreen-btn-enter",
exitBtn: "akamai-fullscreen-btn-exit",
active: "akamai-fullscreen-active",
fallback: "akamai-fullscreen-fallback"
};
Fullscreen.attr = {
width: "data-akamai-fullscreen-width",
enterBtn: "data-akamai-fullscreen-btn",
exitBtn: "data-akamai-fullscreen-exit-btn"
};
Fullscreen.defaultOptions = {
enabled: false,
native: false
};
Fullscreen.prototype.addButton = function(){
this._$widthAdjust = this._$fullscreen.children().filter(".focused");
if( !this._$widthAdjust.length ) {
this._$widthAdjust = this._$fullscreen
.children()
.eq(0);
}
if( this._$widthAdjust.attr(Fullscreen.attr.width) === null ){
this._$widthAdjust.attr( Fullscreen.attr.width, "" );
}
if( this._$widthAdjust.find("[" + Fullscreen.attr.enterBtn + "]").length ){
return;
}
// buttons parent
this._$buttonContainer = this._$widthAdjust;
this._$buttonContainer.addClass( Fullscreen.classes.btnContainer );
this._$buttonContainer.append(this.render());
};
Fullscreen.prototype.addEvents = function() {
this._$fullscreen.on( "click", function( e ) {
var $target = $( e.target );
if( !$target.is("[" + Fullscreen.attr.enterBtn + "]") ){
return;
}
this.enter();
e.preventDefault();
}.bind( this ));
this._$fullscreen.on( "click", function( e ) {
var $target = $( e.target );
if( !$target.is( "[" + Fullscreen.attr.exitBtn + "]" ) ){
return;
}
this.exit();
e.preventDefault();
}.bind( this ));
if( this._useNativeApi ) {
document.addEventListener( this._fullscreenApiKeys.onchange, function() {
// exiting fullscreen using native method (ESC or menu option)
if( !document[ this._fullscreenApiKeys.element ] ) {
this._exit();
}
}.bind( this ), false );
}
// ESC to close
$( document ).on( "keydown", function( e ) {
var code = e.keyCode || e.which;
if( code === 27 ) {
this._exit();
}
}.bind( this ));
};
Fullscreen.prototype.render = function() {
return Akamai.Util.trim(`
`);
};
Fullscreen._keyLookup = [
{
enter: "requestFullscreen",
exit: "exitFullscreen",
element: "fullscreenElement",
onchange: "fullscreenchange"
},
{
enter: "webkitRequestFullscreen",
exit: "webkitExitFullscreen",
element: "webkitFullscreenElement",
onchange: "webkitfullscreenchange"
},
{
enter: "webkitRequestFullScreen",
exit: "webkitCancelFullScreen",
element: "webkitCurrentFullScreenElement",
onchange: "webkitfullscreenchange"
},
{
enter: "mozRequestFullScreen",
exit: "mozCancelFullScreen",
element: "mozFullScreenElement",
onchange: "mozfullscreenchange"
},
{
enter: "msRequestFullscreen",
exit: "msExitFullscreen",
element: "msFullscreenElement",
onchange: "MSFullscreenChange"
}
];
Fullscreen._keys = function( el ) {
var keys = Fullscreen._keyLookup;
var el = document.body;
for( var j = 0, k = keys.length; j < k; j++ ) {
if( keys[ j ].enter in el ) {
return keys[ j ];
}
}
};
Fullscreen.prototype._maximizePlacement = function(){
this._fullscreenFallbackEnabled = true;
this._$fullscreen.addClass( Fullscreen.classes.fallback );
this._$placeholder.insertAfter( this._$fullscreen );
this._$fullscreen.appendTo( document.body );
};
Fullscreen.prototype._restorePlacement = function(){
if( !this._fullscreenFallbackEnabled ) {
return;
}
this._fullscreenFallbackEnabled = false;
this._$fullscreen.removeClass( Fullscreen.classes.fallback );
this._$fullscreen.insertAfter( this._$placeholder );
this._$placeholder.remove();
};
Fullscreen.prototype._adjustWidth = function() {
this._$fullscreen.css( "width", "auto !important" );
// wish this could go into the change event above, but alas the dimensions don’t measure right
var widthSmall = this._$fullscreen.width();
var heightSmall = this._$fullscreen.height();
var viewportWidth = this._useNativeApi ? window.screen.width : Math.max( document.documentElement.clientWidth, window.innerWidth || 0 );
var viewportHeight = this._useNativeApi ? window.screen.height : Math.max( document.documentElement.clientHeight, window.innerHeight || 0 );
// calculate the maximum width we can use to fill the viewportHeight
var widthBig = widthSmall * viewportHeight / heightSmall;
// if the width is bigger than the maximum, just set to 100% (won’t fill the entire height, but that’s ok)
if( widthBig > viewportWidth ) {
widthBig = "100%";
}
this._$widthAdjust.width( widthBig );
};
Fullscreen.prototype._revertWidth = function() {
this._$widthAdjust.css( "width", "" );
};
/**
* Enter full screen mode
* @method
* @returns {undefined}
*/
Fullscreen.prototype.enter = function(){
var activeIndex = this._$fullscreen[0].shoestringData.Viewer._carousels[0].getIndex();
this._$fullscreen.addClass( Fullscreen.classes.active );
if( this._useNativeApi ) {
this._$fullscreen[ 0 ][ this._fullscreenApiKeys.enter ]();
this._adjustWidth();
} else {
this._adjustWidth();
this._maximizePlacement();
}
this._isFullscreen = true;
this._$fullscreen[0].shoestringData.Viewer._carousels[0].goto(activeIndex);
this._trigger("enter");
};
Fullscreen.prototype._exit = function(){
var activeIndex = this._$fullscreen[0].shoestringData.Viewer._carousels[0].getIndex();
this._$fullscreen.removeClass( Fullscreen.classes.active );
if( !this._useNativeApi ) {
this._restorePlacement();
}
this._revertWidth();
this._isFullscreen = false;
this._$fullscreen[0].shoestringData.Viewer._carousels[0].goto(activeIndex);
this._trigger("exit");
};
/**
* Exits full screen mode
* @method
* @returns {undefined}
*/
Fullscreen.prototype.exit = function(){
if( this._useNativeApi ) {
// note some close behavior happens in the onchange event handler above
document[ this._fullscreenApiKeys.exit ]();
}
this._exit();
};
Fullscreen.prototype.isFullscreen = function(){
return this._isFullscreen;
};
exports.Akamai = exports.Akamai || {};
exports.Akamai.Fullscreen = Fullscreen;
})(typeof exports === 'undefined'? window : exports, this.jQuery);
(function(exports, $){
/**
* Akamai Viewer omni-component
* @class
* @alias Akamai.Viewer
* @param {HTMLElement} element - the DOM element representing the component markup
* @param {Object} options - configuration options
*
* @example Instatiation
* var element = document.querySelector( "[data-akamai-viewer]" );
* var viewer = Akamai.Viewer( element );
*/
var Viewer = Akamai.Util.component("Viewer", true, function(element, options){
// try to update the carousel and magnifier sizes options to the width of
// the viewer for more accurate srcset selection
this._updateSizesOptions(true);
this._onResizeComplete(this._updateSizesOptions.bind(this));
// move all the flattened component options (spin, zoom, video) onto the carousel
this._options.carousel =
Viewer._extendCarouselOptions(this._options);
this._withData(function(data){
if( data ) {
// check all of the urls agains the hostname and whitelist
this._checkJSONUrls(data);
// prevent XSS / injection attacks by escaping string values
data = Akamai.Util.escapeJSONVals(data);
// store escaped data for later reference
this._options.items.data = data;
}
this._tagMapping = {};
// TODO if the element is empty and/or options has `items` render into element
if( this._$el.children().length == 0 && data ) {
this._tagMapping = this.constructor._tagSplit(data, this._options.items);
this._$el.append(this.constructor.render(data, this._options, true));
}
// intantiate all child carousels
this._carousels = Akamai.Carousel.createMany(element, this._options.carousel);
this._fullscreen = new Akamai.Fullscreen(element, this._options.fullscreen);
// on enter and exit of fullscreen resolve the breakpoints and update options
this._$el.bind( "akamai-fullscreen-enter akamai-fullscreen-exit", function(){
this._updateOptions(this._resolveBreakpointOptions());
}.bind(this));
// use the breakpoints to set match media listeners
this._setBreakpoints();
// have to trigger init explicitly for async constructors
this._trigger("init");
}.bind(this), function(msg){
throw new Error(msg);
});
});
Viewer.prototype._updateSizesOptions = function(localUpdateOnly){
// update sizes option to something more specific if possible
var elWidth = this._$el.width();
if( elWidth && elWidth > 0 ){
elWidth += "px";
this._options = Akamai.Util.extend(true, this._options, {
carousel: {
images: {
sizes: elWidth
}
}
});
}
if( !localUpdateOnly ){
this._updateOptions(this._options);
}
};
Viewer.prototype._withData = function(after, fail){
if(!this._options.items.uri){
if( this._exceedsLimit(this._options.items.data, fail)) {
return;
}
after(this._options.items.data);
}
else if (typeof(this._options.items.uri) !== 'undefined' && this._options.items.uri.length > 0)
{
$.get(this._options.items.uri, function(data){
// make sure the data gets sorted out regardless of `get` impl
data = (typeof data === "string" ? JSON.parse(data) : data);
if( this._exceedsLimit(data.items, fail) ){
return;
}
after(data.items);
}.bind(this));
}
};
// value in kibibytes
Viewer.prototype._exceedsLimit = function(data, fail){
// TODO some tests don't provide data
if( !data ) { return false; }
// 1 unicode character = 4 bytes
// length = # of chars
// kibibyte = 1024 bytes
// # of chars * 4 / 1024
var kb = JSON.stringify(data).length * 4 / 1024;
if( kb > this._options.items.limit ) {
fail = fail || function(){};
fail(`JSON data size exceeds ${this._options.items.limit} KiB. Limit can be configured with items.limit Akamai.Viewer options.`);
return true;
}
return false;
};
Viewer.prototype._setBreakpoints = function(){
this._breakpoints = this._reduceBreakpoints(this._options.breakpoints || {});
this._fullscreenBreakpoints =
this._reduceBreakpoints(this._options.fullscreenBreakpoints || {});
this._bindBreakpoints();
};
Viewer.prototype._reduceBreakpoints = function(breakpoints){
var bps = [];
for( var bp in breakpoints ){
if(breakpoints.hasOwnProperty(bp)){
try {
bps.push(parseInt(bp, 10));
} catch(e){
Akamai.Util.log(e, 'error');
}
}
}
bps.sort(function(a, b){ return b < a;});
return bps;
};
Viewer.prototype._bindBreakpoints = function(){
[this._breakpoints, this._fullscreenBreakpoints].forEach(function(bps){
// bind using the minwidth and the next breakpoint as the maxwidth
// adds a range from 0 to the first breakpoint and from the last
// breakpoint to a very large number
if(!bps.length) { return; }
for( var i = -1; i < bps.length; i++ ){
this._bindMatchMedia(bps[i], bps[i+1]);
}
}.bind(this));
};
// bind a callback to run after resize completes
Viewer.prototype._onResizeComplete = function( callback ){
var cbtimer;
var self = this;
window.addEventListener( "resize", function(){
clearTimeout( cbtimer );
cbtimer = setTimeout( callback, 500 );
});
};
Viewer.prototype._bindMatchMedia = function(minWidth, maxWidth){
minWidth = minWidth || 0;
// large number so we can use one media query template
maxWidth = maxWidth || 1000000000;
if( window.matchMedia ){
// bind using the minwidth and maxwidth so we get the events at the boundaries
// so we can asses which set of options applies.
var query = `(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`;
// create a media list to bind to
var initList = window.matchMedia(query);
if(initList && initList.addListener) {
// handle a match on instantiation
this._mediaMatch(initList, minWidth, true);
// bind for later changes in whether the media query matches
initList.addListener(function(list){
this._mediaMatch(list, minWidth);
}.bind(this));
}
}
};
Viewer.prototype._mediaMatch = function(list, minWidth, ignoreDefault){
// If there is a match for the breakpoint (we're in the bp range)
// Then set the options based on that breakpoint
// Else if there is not a match and the client width is below the
// breakpoint that's being disabled, then use the original options
if(list.matches){
var resolvedOptions = this._resolveBreakpointOptions(minWidth);
this._updateOptions(resolvedOptions);
}
};
// TODO a ton of duplication with bindMatchmedia
Viewer.prototype._getCurrentMinWidth = function(bps){
// bind using the minwidth and the next breakpoint as the maxwidth
// adds a range from 0 to the first breakpoint and from the last
// breakpoint to a very large number
for( var i = -1; i < bps.length; i++ ){
minWidth = bps[i] || 0;
maxWidth = bps[i+1] || 100000000;
if( window.matchMedia ){
// bind using the minwidth and maxwidth so we get the events at the boundaries
// so we can asses which set of options applies.
var query = `(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`;
// create a media list to bind to
var initList = window.matchMedia(query);
if(initList && initList.matches) {
return minWidth;
}
}
}
return false;
};
Viewer.prototype._resolveBreakpointOptions = function(minWidth){
// TODO bind on the reduce callback was not working
var self = this;
var bps, bpConfig;
if( this._fullscreen.isFullscreen() ) {
bps = this._fullscreenBreakpoints;
bpConfig = self._options.fullscreenBreakpoints;
} else {
bps = this._breakpoints;
bpConfig = self._options.breakpoints;
}
if(!minWidth){
minWidth = self._getCurrentMinWidth(bps);
}
// There may be no matching breakpoints when this method is called to
// resolve the current options. If that's the case then we need to default
// to the top level options
if(!bps.length){ return self._originalOptions; }
return bps.reduce(function(acc, bp){
var cloned = Akamai.Util.extend(true, {}, acc);
var ptions;
if(bp <= minWidth){
cloned = Akamai.Util.extend(true, cloned, bpConfig[bp]);
}
return cloned;
}, Akamai.Util.extend(true, {}, this._originalOptions));
};
Viewer._extendCarouselOptions = function(options){
// clone the carousel options for the given breakpoint
var clonedCarousel = Akamai.Util.extend(true, {}, options.carousel || {});
// TODO shared code with constructor
// extend the cloned options with the breakpoint options so that all the
// child component config is attached to the carousel config (also happens
// in the constructor )
return Akamai.Util.extend(true, clonedCarousel, {
magnifier: options.magnifier,
spin360: options.spin360,
video: options.video,
fullscreen: options.fullscreen
});
};
Viewer.prototype._updateOptions = function(options){
this._options = Akamai.Util.extend(true, this._options, options);
// extend the carousel options for the given breakpoint
var carouselOptions = Viewer._extendCarouselOptions(options);
// push the final options down to the dom element so that CSS that keys off
// of the attributes can apply when JS config is used
Akamai.Util.setDataAttrOptions(this._$el, Viewer.defaultOptions, options, "Viewer");
// pass the new options down to all child carousels
this._carousels.forEach(function(comp){
comp._updateOptions(carouselOptions);
}.bind(this));
};
Viewer.prototype._checkJSONUrls = function(obj){
var hostnames = this._options.items.hostnames;
return Akamai.Util.mapJSONVals(obj,function(val, key){
if(key === "url" && !this._urlHostnameMatch(val)){
throw new Error(`The URL \`${val}\` does not match this page's hostname or the whitelist defined in Akamai.Viewer option \`hostnames\` which is:
${hostnames.length ? hostnames.join("\n") : "No hostnames"}
`);
}
return val;
}.bind(this));
};
Viewer.prototype._urlHostnameMatch = function(url){
var parser = document.createElement('a');
parser.href = url;
return parser.hostname === "" || parser.hostname === window.location.hostname ||
this._options.items.hostnames.indexOf(parser.hostname) >= 0;
};
/**
* Defines the global default options for all Viewers on the page
* @static
* @property {Object} breakpoints - configuration changes for child components at breakpoints (no default)
* @property {Object} fullscreenBreakpoints - configuration changes for child components at breakpoints when in fullscreen mode (no default)
* @property {Object[]} items.data - array of items from the Akamai JSON (default: undefined)
* @property {String} items.defaultTag - (default: "akamai-untagged")
* @property {String[]} items.hostnames - whitelist of URL hostnames to check for in JSON, (default: empty array)
* @property {Integer} items.limit - size limit of JSON data in kibibytes (default: 100)
* @property {String} items.renderAll - (default: false)
* @property {String[]} items.tags - Set of tags to match against the Akamai JSON data (default: undefined)
* @property {String} items.uri - URI at which to retrieve the Akamai JSON (default: undefined)
* @property {Object} carousel - child {@link Akamai.Carousel} options
* @property {Object} magnifier - child {@link Akamai.Magnifier} options
* @property {Object} spin360 - child {@link Akamai.Spin360} options
* @property {Object} video - child {@link Akamai.Video} options
* @property {Object} fullscreen - child {@link Akamai.Fullscreen} options
*/
Viewer.defaultOptions = {
breakpoints: {},
items: {
data: undefined,
defaultTag: "akamai-untagged",
hostnames: [],
limit: 100,
renderAll: false,
tags: undefined,
uri: undefined
},
carousel: Akamai.Carousel.defaultOptions,
magnifier: Akamai.Magnifier.defaultOptions,
spin360: Akamai.Spin360.defaultOptions,
video: Akamai.Video.defaultOptions,
fullscreen: Akamai.Fullscreen.defaultOptions
};
Viewer._tagSplit = function(data, options){
var items = options;
// set all items without a tag to the default
data = data.map(function(item){
item.tags = (item.tags && item.tags.length) ? item.tags : [items.defaultTag];
return item;
});
// if the tags option was set, filter items out that don't match
if( items.tags ) {
data = items.data.filter(function(item){
return item.tags.reduce(function(acc, tag){
return acc || items.tags.indexOf(tag) >= 0;
}, false);
});
}
// from the filtered get the first (may be default tag)
var def = data[0].tags[0];
// create a mapping from tags to items in the set
var tagMapping = data.reduce(function(acc, item){
(item.tags || []).forEach(function(tag){
acc[tag] = acc[tag] || [];
acc[tag].push(item);
});
return acc;
}, {});
// set the first (default) object to the first tag
tagMapping[Viewer._firstRenderTag] = tagMapping[def];
return tagMapping;
};
Viewer._firstRenderTag = "akamai-first-render";
Viewer._tagAttr = `${Viewer._dataAttr}-tag`;
Viewer._renderTag = function(data, options){
// get the first item and it's tag
// NOTE this assumes that the data has been normalized to have a default tag
var tag = data[0].tags[0];
// TODO shoestring doesn't treat html correctly unless the leading `<` has
// no whitepsace in front of it:
// shoestring/issues/94
return Akamai.Util.trim(`
${Akamai.Carousel.render(data, options)}
`);
};
/**
* Takes standard options including an `items` attribute and renders HTML
* that conforms to the component expectations
* @method
* @static
* @params {Object[]} json - Akamai JSON data
* @params {Object} options - options object with an `items` attribute, see default options
* @params {Boolean} options.items - configuration for how the items should be
* rendered, see {@link Akamai.Viewer.defaultOptions} default options items sub-configuration
* @returns { String }
*/
Viewer.render = function(json, options, unwrapped){
// NOTE we do not extend the default options here because it has no bearing
// on the rendering of the Viewer markup or child markup. This is contrast
// to the carousel which does extend the passed options with defaults so the
// markup can make use of them
var data = Viewer._tagSplit(json, options.items);
var carouselOptions = Viewer._extendCarouselOptions(options);
var childMarkup;
if( options.items.renderAll ) {
childMarkup = data.map(function(acc, datum){
return Viewer._renderTag(datum, carouselOptions);
}).join(" ");
} else {
childMarkup = Viewer._renderTag(data[Viewer._firstRenderTag], carouselOptions);
}
var wrapped = `
${childMarkup}
`;
return unwrapped ? childMarkup : wrapped ;
};
/**
* Accessor for child carousel components.
* @method
* @returns { Akamai.Carousel[] }
*/
Viewer.prototype.getCarousels = function(){
return this._carousels;
};
/**
* Set the visible carousel based on the tag. Note the method activity does
* not complete until all the images from the relevant viewer have loaded, use
* the `akamai-viewer-switch-tag` event
* @method
* @fires Akamai.Viewer#akamai-viewer-switch-tag
* @params {String} tag - The tag corresponding to the desired carousel
* @returns {undefined}
*/
Viewer.prototype.switchTag = function(tag){
var tags = this.getTags();
// if the passed tag isn't in the data set return early and log an error in
// the console
if( tags.indexOf(tag) == -1){
Akamai.Util.log(`tag: ${tag} is not present in the data for this viewer`, 'error');
return;
}
var selector = `[${this.constructor._tagAttr}="${tag}"]`;
// try to find an existing element with the tag
var $taggedViewer = this._$el.find(selector);
// if there's no element append the newly rendered tag markup
if( !$taggedViewer.length ){
// make sure the config takes into account the current breakpoint
var options = this._resolveBreakpointOptions();
var carouselOptions = Viewer._extendCarouselOptions(options);
// create the markup that will be inserted
var $markup = $(this.constructor._renderTag(this._tagMapping[tag], carouselOptions, true));
var $imgs = $markup.find("img");
var imgCount = $imgs.length;
var loaded = 0;
// hide the new carousel initially
$markup.css("display", "none");
$imgs.bind("load", function(){
if( ++loaded !== imgCount ) {
return;
}
// TODO namespace?
$imgs.unbind("load");
var carousels = Akamai.Carousel.createMany($markup[0], carouselOptions);
carousels.forEach(function(c){
// TODO figure out why the carousel constructor doesn't apply the
// active index class we want on instantiation, likely due to the fact
// that the carousel is hidden so the "getIndex" calc is broken
// mark the carousel item as active
c.goto(c.getIndex());
});
// create and store the new carousels (should be one)
this._carousels = this._carousels.concat(carousels);
this._showViewer($markup, carousels);
}.bind(this));
// append the new markup to the existing viewer
this._$el.append($markup);
} else {
this._showViewer($taggedViewer);
}
};
// TODO should be handled in CSS
Viewer.prototype._showViewer = function($viewer, carousels){
this._$el
.find(`[${this.constructor._tagAttr}]`)
.css("display", "none")
.removeClass("focused");
$viewer
.css("display", "block")
.addClass("focused");
if( carousels ){
carousels.map(function(c) { c.refresh(); });
}
// TODO the placement here seems arbitrary, probably belongs in `_showViewer`
// TODO also sucks to be so tightly coupled
this._fullscreen.addButton();
this._trigger( "switch-tag" );
};
/**
* Accessor for tags derived from Akamai JSON data
* @method
* @returns { String[] }
*/
Viewer.prototype.getTags = function(){
if( this._tags ) {
return this._tags;
};
var tags = [];
// map and store all the carousel tags
for(var tag in this._tagMapping){
if(this._tagMapping.hasOwnProperty(tag) && tag !== Viewer._firstRenderTag ) {
// otherwise grab the list of tags
tags.push(tag);
}
}
return this._tags = tags;
};
/**
* Triggered when the viewer switches tag views. This includes waiting for
* images to load for carousels dedicated to previously unviewed tags.
* {@link Akamai.Viewer#switchTag}.
*
* @event Akamai.Viewer#akamai-viewer-switch-tag
*/
/**
* Triggered when initialization finishes
* {@link Akamai.Viewer}.
*
* @event Akamai.Viewer#akamai-viewer-init
*/
exports.Akamai = exports.Akamai || {};
exports.Akamai.Viewer = Viewer;
})(typeof exports === 'undefined'? window : exports, this.jQuery);
(function(exports, $){
$.fn.akamaiViewer = function(options){
this.each(function(i, element){
new Akamai.Viewer(element, options);
});
};
})(typeof exports === 'undefined'? window : exports, this.jQuery);