-1) {
/*html content*/
} else {
var navEvent = {
type:'internal',
path:'',
target:'_self'
};
self.events.dispatchEvent(LOGO_CLICK, navEvent);
}
}
return self;
}
function LogoView(vars) {
var self = new ViewProxy({events:vars.events});
var src;
var savedSrc;
var originalWidth
var originalHeight
var logoLoaded
if(isPod()) {
self.textWrap = true;
} else {
self.textWrap = false;
}
self.zIndex = STATE.logoView.zIndex();
// self.x = 0
// self.y = 0
if(USER_AGENT !== MOBILE && USER_AGENT !== TABLET) self.position = LAYOUT_MODEL.logoPositionFixed ? 'fixed' : 'absolute'
self.updateSpeed = 0;
self.events.addEventListener('fillSiteMode', setSafariHack);
self.events.addEventListener('nonFillSiteMode', removeSafariHack);
self.element.addEventListener('contextmenu', disable);
self.element.addEventListener('dragstart', disable);
function disable(e) {
var disableRightClick = SETTINGS_MODEL.disableRightClick === undefined || SETTINGS_MODEL.disableRightClick
if(disableRightClick) {
e.preventDefault();
}
}
function setSafariHack(e) {
if(BROWSER_NAME === 'Safari') self.translateZ = 0;
}
function removeSafariHack(e) {
if(BROWSER_NAME === 'Safari') {
self.style['-webkit-transform'] = 'none';
self.style['-ms-transform'] = 'none';
self.style['transform'] = 'none';
}
}
self.addEventListener(CHILD_ADDED, function(child) {
self.updatePosition();
setTimeout(function(){
self.updatePosition();
self.updateSpeed = UPDATE_SPEED;
}, 500);
self.events.dispatchEvent('LOGO_CHILD_ADDED');
});
self.addEventListener(MOUSE_OVER, overLogo);
function overLogo(e) {
self.events.dispatchEvent('OVER_LOGO');
}
function getLogoFontSize() {
if(USER_AGENT === MOBILE) {
return firstValid(LAYOUT_MODEL.mobileLogoFontSize, LAYOUT_MODEL.logoFontSize)
} else if(USER_AGENT === TABLET) {
return firstValid(LAYOUT_MODEL.tabletLogoFontSize, LAYOUT_MODEL.logoFontSize)
}
return LAYOUT_MODEL.logoFontSize
}
function getLogoFontColor() {
if(USER_AGENT === MOBILE) {
return firstValid(LAYOUT_MODEL.mobileLogoFontColor, LAYOUT_MODEL.logoFontColor)
} else if(USER_AGENT === TABLET) {
return firstValid(LAYOUT_MODEL.tabletLogoFontColor, LAYOUT_MODEL.logoFontColor)
}
return LAYOUT_MODEL.logoFontColor
}
function getLogoFont() {
if(USER_AGENT === MOBILE) {
return firstValid(LAYOUT_MODEL.mobileLogoFont, LAYOUT_MODEL.logoFont)
} else if(USER_AGENT === TABLET) {
return firstValid(LAYOUT_MODEL.tabletLogoFont, LAYOUT_MODEL.logoFont)
}
return LAYOUT_MODEL.logoFont
}
function getLogoKerning() {
if(USER_AGENT === MOBILE) {
return firstValid(LAYOUT_MODEL.mobileLogoKerning, LAYOUT_MODEL.logoKerning)
} else if(USER_AGENT === TABLET) {
return firstValid(LAYOUT_MODEL.tabletLogoKerning, LAYOUT_MODEL.logoKerning)
}
return LAYOUT_MODEL.logoKerning
}
self.updatePosition = function(e) {
self.zIndex = STATE.logoView.zIndex();
if(USER_AGENT !== MOBILE && USER_AGENT !== TABLET) self.position = LAYOUT_MODEL.logoPositionFixed ? 'fixed' : 'absolute'
self.transition = 0;
if(self.txt) {
if(isPod()) {
self.txt.width = stage.width
self.width = stage.width;
} else {
self.width = self.txt.width;
}
self.height = self.txt.height;
} else if(self.img && logoLoaded && !(e && e.action && e.action === 'changeTemplate')) {
if((USER_AGENT === MOBILE && (LAYOUT_MODEL.mobileLogoWidth || LAYOUT_MODEL.mobileLogoHeight)) || (LAYOUT_MODEL.logoWidth || LAYOUT_MODEL.logoHeight)) {
var logoHRange = percentToPixels(LAYOUT_MODEL.logoWidth, stage.width) || 2000
var logoVRange = percentToPixels(LAYOUT_MODEL.logoHeight, stage.height) || 2000
if(USER_AGENT === MOBILE) {
logoHRange = (percentToPixels(LAYOUT_MODEL.mobileLogoWidth, stage.width) || percentToPixels(LAYOUT_MODEL.logoWidth, stage.width) || 2000) > (stage.width - (percentToPixels(LAYOUT_MODEL.mobileLogoOffsetX, stage.width) * 2)) ?
(stage.width - (percentToPixels(LAYOUT_MODEL.mobileLogoOffsetX, stage.width) * 2)) :
logoHRange
logoVRange = percentToPixels(LAYOUT_MODEL.mobileLogoHeight, stage.height) || percentToPixels(LAYOUT_MODEL.logoHeight, stage.height) || 2000
}
var scaleVars = {
type:'fit',
hRange:logoHRange,
vRange:logoVRange,
width:originalWidth,
height:originalHeight,
disableOrientationCheck:true
}
var scale = ScaleEngine(scaleVars);
self.img.width = scale.width
self.img.height = scale.height
self.width = scale.width;
self.height = scale.height;
} else if(!(e && e.action && e.action === 'changeTemplate')) {
var logoObj = {width:originalWidth, height:originalHeight, filename:src};
var retinaSize = RetinaResizeEngine(logoObj);
var logoHRange = retinaSize.width
if(USER_AGENT === MOBILE) {
logoHRange = retinaSize.width > (stage.width - (percentToPixels(LAYOUT_MODEL.mobileLogoOffsetX, stage.width) * 2)) ?
(stage.width - (percentToPixels(LAYOUT_MODEL.mobileLogoOffsetX, stage.width) * 2)) :
logoHRange
}
var scale = ScaleEngine({
type:'fit',
hRange:logoHRange,
vRange:retinaSize.height,
width:originalWidth,
height:originalHeight,
disableOrientationCheck:true
});
self.img.width = scale.width
self.img.height = scale.height
self.width = scale.width;
self.height = scale.height;
}
}
Tween.defer(self, 0, {x:layoutCalcs.logoView.x(self.width), y:layoutCalcs.logoView.y(self.height)});
};
self.updateStyle = function(e) {
if(e && e.id && /logo|layoutModelInit/i.test(e.id)){
var blendMode = (USER_AGENT === MOBILE || USER_AGENT === TABLET || !LAYOUT_MODEL.logoBlendMode) ? 'normal' : LAYOUT_MODEL.logoBlendMode
self.element.style['mix-blend-mode'] = blendMode
var logoFile = SETTINGS_MODEL.logoFile || LAYOUT_MODEL.logoFile || ''
if(USER_AGENT === MOBILE) logoFile = SETTINGS_MODEL.mobileLogoFile || LAYOUT_MODEL.mobileLogoFile || logoFile
if(USER_AGENT === TABLET) logoFile = SETTINGS_MODEL.tabletLogoFile || LAYOUT_MODEL.tabletLogoFile || logoFile
if(logoFile.indexOf('dxlogo1__at__2x.png') > -1 || logoFile.indexOf('dxlogo2__at__2x.png') > -1) {
src = CDN_PF_SSL_URI + '/media/' + logoFile;
} else if(logoFile !== '') {
src = SETTINGS_MODEL.cdnSslUri + '/' + logoFile;
} else {
src = undefined
}
if(self.txt) {
self.removeChild(self.txt);
self.txt = undefined;
}
if(src && src !== savedSrc) {
if(self.img) {
self.removeChild(self.img);
self.img = undefined;
}
self.img = new Bitmap();
self.img.element.style['user-select'] = 'none'
self.img.alpha = 0;
self.img.element.addEventListener(LOAD, logoImgLoaded);
savedSrc = src
self.img.element.src = src;
self.addChild(self.img);
self.img.element.style.cursor = 'pointer'
} else if(!src) {
if(self.img) {
self.removeChild(self.img);
self.img = undefined;
}
src = undefined
savedSrc = undefined
logoLoaded = false
var logoText = SETTINGS_MODEL.logoText || LAYOUT_MODEL.logoText || ''
// if(USER_AGENT === MOBILE) logoText = SETTINGS_MODEL.mobileLogoText || LAYOUT_MODEL.mobileLogoText || ''
// if(USER_AGENT === TABLET) logoText = SETTINGS_MODEL.tabletLogoText || LAYOUT_MODEL.tabletLogoText || ''
var logoHtml = SETTINGS_MODEL.logoHtml || LAYOUT_MODEL.logoHtml || ''
// if(USER_AGENT === MOBILE) logoHtml = SETTINGS_MODEL.mobileLogoHtml || LAYOUT_MODEL.mobileLogoHtml || ''
// if(USER_AGENT === TABLET) logoHtml = SETTINGS_MODEL.tabletLogoHtml || LAYOUT_MODEL.tabletLogoHtml || ''
self.txt = new Sprite();
self.txt.text = logoHtml.replace(/(\\*'|\\*")/g, "'") || logoText.replace(/(\\*'|\\*")/g, "'");
self.txt.element.style['user-select'] = 'none'
self.addChild(self.txt);
self.txt.element.style.cursor = 'pointer'
if(USER_AGENT === MOBILE) {
self.txt.textAlign = LAYOUT_MODEL.mobileLogoAlignHorizontal || 'left'
}
var logoFontSize = getLogoFontSize()
var logoFontColor = getLogoFontColor()
var logoFont = getLogoFont()
var logoKerning = getLogoKerning()
if(logoFontSize !== self.txt.fontSize) {
self.txt.fontSize = logoFontSize;
}
if(logoFontColor !== self.txt.fontColor) {
Tween(self.txt, vars.parentController.updateSpeed, {fontColor:logoFontColor});
}
if(logoFont !== self.txt.fontFamily) {
self.txt.fontFamily = logoFont;
}
if(logoKerning !== self.txt.letterSpacing) {
self.txt.letterSpacing = logoKerning;
}
if(LAYOUT_MODEL.logoTextTransform && LAYOUT_MODEL.logoTextTransform !== self.txt.textTransform) {
self.txt.textTransform = LAYOUT_MODEL.logoTextTransform;
}
}
}
};
function logoImgLoaded(e) {
logoLoaded = true
originalWidth = e.target.width
originalHeight = e.target.height
setTimeout(function() {
// delay to allow for element offset size info
self.updatePosition();
self.events.dispatchEvent(LOGO_LOADED);
Tween.defer(self.img, UPDATE_SPEED, {alpha:1});
self.events.dispatchEvent('LOGO_LOADED');
}, 10)
self.img.element.removeEventListener(LOAD, logoImgLoaded);
}
return self;
}
function SectionController(imports) {
var view = imports.parentView
var sysEvents = imports.siteControllerEvents
var MediaModule = imports.MediaModule
var sections = SECTIONS_MODEL
// event handlers
var uriChange
var resize
var layoutModelChange
var sectionsModelChange
// default doesn't do anything - only overwritten by new unifiedSiteScroll behavior
var layout
var transition
var modulesBuilt = false
// set site view to allow scrolling for this behavior
// this should be handled elsewhere
view.style.overflow = 'auto'
switch(LAYOUT_MODEL.siteDisplayBehavior) {
case 'unifiedSiteScrollVertical':
// loop over sections
// create a media module for each section
var mediaModules = SECTIONS_MODEL.ROOT_SECTION.media
.map(getSectionById)
.filter(function(section) {
return section.visible
})
.reduce(function(acc, section) {
var state = {
section:section,
mediaToRender:removeLinksFromMedia(section.mediaItems),
path:section.key,
assetId:0,
asset:getMediaById(section.mediaItems[0]),
mode:'',
info:{
isSectionChange: true,
isAssetChange: true,
isModeChange: false,
isLandingMedia: section.label === LANDING_MEDIA,
mediaViewState: section.label === LANDING_MEDIA ? 'landingMedia' : 'mediaView',
isDeepLink: false,
isMediaViewStateChange: true,
isIntroGallery:section.isIntroGallery,
flickSpeed: 0.35,
lastUri: '/',
isThumbsFirst: false,
isMobileVideoClick: false,
isBlog: false
}
};
STATE.uri = state
acc[section.key] = new MediaModule(sysEvents, view)
acc[section.key].controller.build(state)
return acc
}, {})
// layout each media view
layout = function(e) {
Object.keys(mediaModules)
.forEach(function(key, i) {
var module = mediaModules[key]
Tween(module.view.mask, 0, {
x:STATE.mediaView.x(),
y:STATE.mediaView.y() + (i * stage.height),
width:STATE.mediaView.width(),
height:STATE.mediaView.height()
})
})
}
// listen for uri change
uriChange = function(e) {
var module = mediaModules[e.path]
// find the section's media controller
// scroll the mediaView into view
// then call .navigate(e) on the media controller
module.controller.navigate(e)
}
transition = function(e) {
// see if we can use existing media view transition types
}
modelChange = function(e) {
// loop over the sections model
// use the key to find the media module
// for each module:
// Tween(module.view.container, UPDATE_SPEED, {backgroundColor:STATE.mediaView.backgroundColor(section)})
layout()
}
break
case 'unifiedSiteScrollHorizontal':
uriChange = function(e) { }
layout = function(e) { /* layout media views */ }
transition = function(e) { /* transition behavior */ }
modelChange = function(e) { }
break
default:
// legacy & unifiedPageScroll
console.log('why are you here?')
var mediaModule = new MediaModule(sysEvents, view)
var mediaController = mediaModule.controller
var mediaView = mediaModule.view
// there is only one module to layout here
layout = function() {
Tween(mediaView.mask, 0, {
x:STATE.mediaView.x(),
y:STATE.mediaView.y(),
width:STATE.mediaView.width(),
height:STATE.mediaView.contentHeight()
})
}
transition = function(e) {
// no transition - only a single media view here
}
uriChange = function(e) {
if(e.info.isSectionChange) {
mediaController.destroy()
mediaController.build(e)
} else {
mediaController.navigate(e)
}
}
modelChange = function(e) {
Tween(mediaView.container, UPDATE_SPEED, {backgroundColor:STATE.mediaView.backgroundColor()})
layout()
}
break
}
sysEvents.addEventListener(SITE_URI_CHANGE, uriChange)
sysEvents.addEventListener(RESIZE_END, layout)
sysEvents.addEventListener(LAYOUT_MODEL_CHANGE, modelChange)
sysEvents.addEventListener(SECTIONS_MODEL_CHANGE, modelChange)
layout()
}
var MediaController = function(imports) {
var _localEvents,
_sysEvents,
navigationMode,
section,
mediaToRender,
contactSettings = /contactTitleFont|contactTitleFontSize|contactTitleShow|contactFont|contactFontSize|contactFontColor|contactFieldRectColor/,
imageVideoSettings = /containerColor|transitionType|imageAlignHorizontal|imageAlignVertical|imageScaleType|videoScaleType|imageVideoInactiveAlpha|imageVideoMarginTop|imageVideoMarginRight|imageVideoMarginBottom|imageVideoMarginLeft|imageVideoScrollType|imageVideoScrollbarRounded|imageVideoScrollVisibility|imageVideoScrollbarHorizontalOffset|imageVideoScrollbarVerticalOffset/,
textPageSettings = /pageMarginTop|pageMarginRight|pageMarginBottom|pageMarginLeft|pageScrollVerticalMargin|pageTextFont|pageTextKerning|pageTextFontSize|pageTextFontColor|pageTitle|pageTitleFont|pageTitleKerning|pageTitleFontSize|pageTitleFontColor|pageScrollbarAlignment|pageScrollbarHorizontalOffset|pageScrollbarVerticalOffset|pageScrollbarColor|pageScrollbarHover|pageScrollbarBgAlpha|pageScrollbarWidth/,
landingMediaSettings = /landingMediaRandomize|landingMediaTransitionType|landingMediaSpeed|landingMediaTransitionDuration|landingMediaAlignHorizontal|landingMediaAlignVertical|landingMediaScaleType/,
state;
function MediaController(localEvents, sysEvents) {
_localEvents = localEvents;
_sysEvents = sysEvents;
_sysEvents.addEventListener(SITE_URI_CHANGE, uriChange);
_sysEvents.addEventListener(RESIZE_END, resize);
_sysEvents.addEventListener(ORIENTATION_CHANGE, orientationChange);
_sysEvents.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_sysEvents.addEventListener(SECTIONS_MODEL_CHANGE, sectionsModelChange);
_sysEvents.addEventListener(SETTINGS_MODEL_CHANGE, settingsModelChange);
_sysEvents.addEventListener(MEDIA_MODEL_CHANGE, mediaModelChange);
_sysEvents.addEventListener(PAUSE_MEDIA, pauseMedia);
_sysEvents.addEventListener(CONTACT_FORM_SENT, contactFormSent);
_sysEvents.addEventListener(SHARE_FORM_SENT, shareFormSent);
_sysEvents.addEventListener(INQUIRY_FORM_SENT, inquiryFormSent);
_sysEvents.addEventListener('thumbStripDisplaceChange', resize);
_sysEvents.addEventListener(MENU_DOCK_CLOSE, function(e){
_localEvents.dispatchEvent(MENU_DOCK_CLOSE, e)
});
_sysEvents.addEventListener(MENU_DOCK_OPEN, function(e){
_localEvents.dispatchEvent(MENU_DOCK_OPEN, e)
});
_localEvents.addEventListener('SectionMediaFactory/mediaBuilt', mediaBuilt);
_localEvents.addEventListener('MediaView/ContentAdded', layoutMediaView);
_localEvents.addEventListener('ScrollTransition/updateAssetId', updateAssetId);
_localEvents.addEventListener(MEDIA_LOADED, mediaLoaded);
_localEvents.addEventListener(TRANSITION_START, transitionStart);
_localEvents.addEventListener(TRANSITION_END, transitionEnd);
_localEvents.addEventListener('cursorAxisUpdate', cursorAxisUpdate);
_localEvents.addEventListener(ADDRESS_ASSET_CHANGE, addressAssetChange);
_localEvents.addEventListener(CONTACT_FORM_SUBMIT, contactFormSubmit);
_localEvents.addEventListener(SHARE_FORM_SUBMIT, shareFormSubmit);
_localEvents.addEventListener(INQUIRY_FORM_SUBMIT, inquiryFormSubmit);
_localEvents.addEventListener(NAVBAR_OVERLAY_BTN_CLICK, overlayBtnClick);
_localEvents.addEventListener(TOUCH_NAVIGATION_END, touchNavEnd);
_localEvents.addEventListener(PAGE_LOADED, pageLoaded);
_localEvents.addEventListener('UPDATE_CONTENT_HEIGHT', function() {
_sysEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT')
});
}
function uriChange(e) {
state = e;
navigationMode = e.info.mediaViewState;
section = e.section;
mediaToRender = e.mediaToRender;
if(e.info.isSectionChange) {
_localEvents.dispatchEvent('destroy');
}
if(e.info.isMediaViewStateChange) {
_localEvents.dispatchEvent('MediaViewBehavior/navigationModeChange', e.info.mediaViewState);
}
if(e.assetId > -1) {
var activeMediaItem = getMediaById(e.mediaToRender[e.assetId]);
layoutCalcs.activeMediaType = activeMediaItem.type;
}
// added isLandingMedia check because items weren't being built in landing media if thumbnailOnly was true
if(layoutCalcs.isLandingMedia || (!STATE.overrides.thumbnailOnly || e.assetId > -1)) {
if(e.info.isSectionChange) {
// _localEvents.dispatchEvent('destroy');
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {
media:mediaToRender,
isMobileVideoClick:e.info.isMobileVideoClick,
isBlog:e.info.isBlog,
section:section
});
}
} else {
layoutCalcs._mediaContentHeight = STATE.mediaView.zoneHeight()
_sysEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT')
}
_localEvents.dispatchEvent('siteUriChange', e);
checkCaption();
}
function pauseMedia(e) {
_localEvents.dispatchEvent(PAUSE_MEDIA);
}
function addressAssetChange(e) {
_sysEvents.dispatchEvent(ADDRESS_ASSET_CHANGE, e);
}
function pageLoaded(e) {
_sysEvents.dispatchEvent(PAGE_LOADED);
}
function layoutModelChange(e) {
if(section) STATE.section(section)
_localEvents.dispatchEvent(LAYOUT_MODEL_CHANGE, e);
if(section && e.id !== 'layoutModelInit' && (contactSettings.test(e.id) || imageVideoSettings.test(e.id) || textPageSettings.test(e.id) || landingMediaSettings.test(e.id))) {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section:section, media:removeLinksFromMedia(section.media)});
_localEvents.dispatchEvent('assetReset');
}
checkCaption();
}
function isPageOverride(value) {
return /page/.test(value)
}
function isImageVideoOverride(value) {
return /imageVideo|caption/.test(value)
}
function isThumbsOverlay(thumbnailType, mode) {
return /thumb/.test(mode) && thumbnailType !== 'strip'
}
function sectionsModelChange(e) {
if(section) {
_localEvents.dispatchEvent(SECTIONS_MODEL_CHANGE, e);
if(e.method === 'update' && e.id === section.id && !isThumbsOverlay(STATE.overrides.thumbnailType, state.mode)) {
if(e.field === 'media') {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section:section, media:e.value ? removeLinksFromMedia(e.value) : []});
_localEvents.dispatchEvent('assetReset');
} else if(e.field === 'overrides') {
// that the current media item is a type of the override change
// if we want to filter more accurately we would need to know the actual override that changed
// this would require sending that info from higher up in the app
var overrideValue = JSON.stringify(e.value)
if(isPageOverride(overrideValue) && layoutCalcs._activeMediaType === 'html') {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section:section, media:removeLinksFromMedia(section.media)});
_localEvents.dispatchEvent('assetReset');
} else if(isImageVideoOverride(overrideValue) && /image|video/.test(layoutCalcs._activeMediaType)) {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section:section, media:removeLinksFromMedia(section.media)});
_localEvents.dispatchEvent('assetReset');
}
} else {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section:section, media:removeLinksFromMedia(section.media)});
_localEvents.dispatchEvent('assetReset');
}
}
checkCaption();
}
}
function settingsModelChange(e) {
_localEvents.dispatchEvent(SETTINGS_MODEL_CHANGE, e);
if(e.method === 'update' && (section.id === 'landingMedia' || section.isIntroGallery) && e.id === 'backgroundImages') {
_sysEvents.dispatchEvent('resetUriChange', e);
}
}
function mediaModelChange(e) {
_localEvents.dispatchEvent(MEDIA_MODEL_CHANGE, e);
if(e.method === 'update' && section && section.media.indexOf(e.id) > -1) {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section:section, media:removeLinksFromMedia(section.media)});
_localEvents.dispatchEvent('assetReset');
}
checkCaption();
}
function checkCaption() {
if(state && state.mode.indexOf('caption') > -1 && USER_AGENT !== MOBILE) {
_localEvents.dispatchEvent('showCaption');
} else {
_localEvents.dispatchEvent('hideCaption');
}
}
function mediaBuilt(e) {
_localEvents.dispatchEvent('MediaView/ContentReady', e.media);
}
function layoutMediaView(e) {
_localEvents.dispatchEvent('layoutMediaView', {section:section});
if(navigationMode === 'landingMedia' || mediaToRender.length < 2) {
_localEvents.dispatchEvent('hideCursor');
} else {
_localEvents.dispatchEvent('showCursor');
}
}
function resize(e) {
_localEvents.dispatchEvent(RESIZE);
}
function orientationChange(e) {
_localEvents.dispatchEvent(ORIENTATION_CHANGE);
}
function updateAssetId(e) {
if(state && state.assetId !== e.id) {
state.assetId = e.id;
_sysEvents.dispatchEvent('updateAssetId', e);
_localEvents.dispatchEvent('checkCaption', state);
}
}
function mediaLoaded(e) {
if(/video|vimeo/.test(e.type)) {
_localEvents.dispatchEvent('mediaSizeUpdate', e);
}
}
function transitionStart(e) {
_sysEvents.dispatchEvent(TRANSITION_START);
}
function transitionEnd(e) {
_sysEvents.dispatchEvent(TRANSITION_END);
}
function cursorAxisUpdate(e) {
_sysEvents.dispatchEvent('cursorAxisUpdate', e);
}
function contactFormSubmit(e) {
_sysEvents.dispatchEvent(CONTACT_FORM_SUBMIT, e);
}
function shareFormSubmit(e) {
_sysEvents.dispatchEvent(SHARE_FORM_SUBMIT, e);
}
function inquiryFormSubmit(e) {
_sysEvents.dispatchEvent(INQUIRY_FORM_SUBMIT, e);
}
function contactFormSent(e) {
_localEvents.dispatchEvent(CONTACT_FORM_SENT, e);
}
function shareFormSent(e) {
_localEvents.dispatchEvent(SHARE_FORM_SENT, e);
}
function inquiryFormSent(e) {
_localEvents.dispatchEvent(INQUIRY_FORM_SENT, e);
}
function overlayBtnClick(e) {
_sysEvents.dispatchEvent(NAVBAR_OVERLAY_BTN_CLICK, e);
}
function touchNavEnd(e) {
_sysEvents.dispatchEvent(TOUCH_NAVIGATION_END, e);
}
return MediaController;
}({});
var MediaModule = function(imports) {
var _mediaModuleEvents = new EventSandbox();
function MediaModule(siteEvents, siteView) {
var mediaController = new MediaController(_mediaModuleEvents, siteEvents);
var mediaView = new MediaView({localEvents:_mediaModuleEvents, siteView:siteView});
new SectionMediaFactory({localEvents:_mediaModuleEvents});
var mediaViewBehavior = new MediaViewBehavior({localEvents:_mediaModuleEvents, mediaView:mediaView});
var overlayController = new OverlayController({siteEvents:siteEvents, localEvents:_mediaModuleEvents, siteView:siteView, mediaView:mediaView});
}
return MediaModule;
}({
});
function MediaNavigation(imports) {
var _localEvents = imports.localEvents,
_mediaView = imports.mediaView,
_mediaViewContainer = imports.mediaView.container,
transition,
layout,
contentIsReady = false,
state = {assetId:0},
transitionType,
isOrientationChange,
_scrollAssetId = 0;
_localEvents.addEventListener('layoutMediaView', layoutMediaView);
_localEvents.addEventListener(SECTIONS_MODEL_CHANGE, layoutModelChange);
_localEvents.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.addEventListener(RESIZE, mediaNavigationResize);
_localEvents.addEventListener(ORIENTATION_CHANGE, orientationChange);
_localEvents.addEventListener('mediaSizeUpdate', mediaSizeUpdate);
_localEvents.addEventListener('MEDIA_HEIGHT_CHANGE', mediaSizeUpdate);
_localEvents.addEventListener('siteUriChange', siteUriChange);
_localEvents.addEventListener('assetReset', assetReset);
_localEvents.addEventListener(TOUCH_NAVIGATION_MOVE, function(e) {
if(isStartOfGallery() && e === 'prev') {
if(self.touchNav) self.touchNav.disabled = true
// } else {
// if(self.touchNav) self.touchNav.disabled = false
}
});
_localEvents.addEventListener(MENU_DOCK_CLOSE, function(e) {
if(self.touchNav) self.touchNav.disabled = false
});
_localEvents.addEventListener(TOUCH_NAVIGATION_END, touchNavEnd);
_localEvents.addEventListener('ScrollTransition/updateAssetId', updateAssetId);
function touchNavEnd(e) {
if(state.assetId === 1 && e.swipeDirection === 'right') {
// to allow menu open swipe
if(self.touchNav) self.touchNav.disabled = true
} else {
if(self.touchNav) self.touchNav.disabled = false
}
if(e.isMove) {
if(isStartOfGallery() && e.swipeDirection === 'right') {
assetReset();
} else if(isEndOfGallery() && e.swipeDirection === 'left') {
assetReset();
} else if(e.swipeDirection === 'left' || e.swipeDirection === 'right') {
e.navDir = e.swipeDirection === 'left' ? 'next' : 'prev';
_localEvents.dispatchEvent(ADDRESS_ASSET_CHANGE, e);
} else {
assetReset();
}
} else if(e.isMove && /left|right/.test(e.swipeDirection)) {
assetReset();
}
}
function mediaSizeUpdate(){
if(!layout) {
defineTransition();
}
layout();
if(!/scroll/i.test(transitionType)) assetReset();
}
function isStartOfGallery() {
return state.assetId === 0;
}
function isEndOfGallery() {
return state.assetId === csvToArray(state.section.media).length - 1;
}
function defineTransition() {
if(_mediaView.scroll) {
_mediaView.scroll.destroy();
_mediaView.scroll = null;
}
transitionType = STATE.overrides.transitionType;
// Desktop-Version Mobile/iPad full image nav stuck #1015
if(transitionType === 'mSlide' && !self.touchNav) {
self.touchNav = new TouchNavMobile({events:_localEvents, mediaViewContainer:_mediaViewContainer});
}
var lazyLoaderType = transitionType === 'fade' || transitionType === 'mSlide' ? 'fade' : 'default';
var container = _mediaView.container
var mask = _mediaView.mask
_mediaView.lazyLoader = new LazyLoader(container, mask, {
type:lazyLoaderType,
property:'translate'
});
_mediaView.lazyLoader.windowScroll = /vScroll/.test(transitionType) && LAYOUT_MODEL.unifiedPageScrolling && BROWSER_NAME !== 'MSIE'
if(transition) transition.destroy()
switch(transitionType) {
case 'fade':
layout = new FadeLayout({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new FadeTransition({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'x');
break;
case 'hSlide':
layout = new SlideLayoutHorizontal({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new SlideTransitionHorizontal({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'x');
break;
case 'vSlide':
layout = new SlideLayoutVertical({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new SlideTransitionVertical({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'y');
break;
case 'hScroll':
layout = new ScrollLayoutHorizontal({mediaView:_mediaView, localEvents:_localEvents});
transition = new ScrollTransitionHorizontal({mediaView:_mediaView, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'x');
break;
case 'hScrollNC':
layout = new ScrollLayoutHorizontalNoCrop({mediaView:_mediaView, localEvents:_localEvents});
transition = new ScrollTransitionHorizontalNoCrop({mediaView:_mediaView, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'x');
break;
case 'vScroll':
layout = new ScrollLayoutVertical({mediaView:_mediaView, localEvents:_localEvents});
transition = new ScrollTransitionVertical({mediaView:_mediaView, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'y');
break;
case 'vScrollNC':
layout = new ScrollLayoutVerticalNoCrop({mediaView:_mediaView, localEvents:_localEvents});
transition = new ScrollTransitionVerticalNoCrop({mediaView:_mediaView, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'y');
break;
case 'grid':
layout = new GridLayout({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new GridTransition({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'x');
break;
case 'mSlide':
layout = new MobileSlideLayout({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer});
transition = new MobileSlideTransition({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
_localEvents.dispatchEvent('cursorAxisUpdate', 'x');
break;
}
}
function siteUriChange(e) {
state = e;
var hasContent = _mediaViewContainer.children.length > 0;
if(state.mediaToRender && hasContent) {
if(state.mode.indexOf('thumbs') !== -1 && state.assetId === -1) {
_mediaViewContainer.transition = 0;
_mediaViewContainer.alpha = 0;
} else if(_mediaViewContainer.alpha !== 1) {
_mediaViewContainer.transition = 0;
_mediaViewContainer.alpha = 1;
}
if(state.assetId > -1) {
if(state.info.isDeeplink) {
jumpToAsset(state.assetId);
} else if(LAYOUT_MODEL.unifiedPageScrolling && state.info.isModeChange && /fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(state.mode)) {
_mediaViewContainer.transition = 0;
_mediaViewContainer.alpha = 0;
// delay here for overlay transition
setTimeout(function() {
Tween(_mediaViewContainer, STATE.mediaView.transitionDuration(), {alpha:1})
}, UPDATE_SPEED * 1000 + 10)
} else if(state.info.isModeChange && /fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(state.info.lastUri)) {
// prevent animated scroll for this situation
// this setTimeout is here because of the delay in OverlayController for setScrollPosition on thumbs
// we need this to fire after setScrollPosition
_mediaViewContainer.transition = 0;
_mediaViewContainer.alpha = 0;
if(LAYOUT_MODEL.unifiedPageScrolling) {
// delay here for overlay transition
setTimeout(function() {
jumpToAsset(state.assetId);
Tween(_mediaViewContainer, STATE.mediaView.transitionDuration(), {alpha:1})
}, UPDATE_SPEED * 1000 + 10)
} else {
// Image Flickering when making new image selection from thumbs #1052
// jumpToAsset then
// wait for thumbnail grid fade out before
// fade in mediaViewContainer
jumpToAsset(state.assetId);
setTimeout(function() {
Tween(_mediaViewContainer, STATE.mediaView.transitionDuration(), {alpha:1})
}, UPDATE_SPEED * 500)
}
} else if(state.info.isModeChange && /fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(state.mode)) {
// capturing this situation to not fire a transition
} else {
if(self.touchNav) {
if(stage.zoom === 1 && USER_AGENT === MOBILE && !SETTINGS_MODEL.podUseDesktop) {
// fix for text on mobile with images #1214
// not sure if the check should be isPod or USER_AGENT/Mobile
_mediaView.mask.element.scrollTo(0, 0);
}
transition(state.assetId, state.info.flickSpeed, self.touchNav.swipeDirection)
} else if(state.info.isSectionChange) {
_mediaViewContainer.transition = 0;
_mediaViewContainer.alpha = 0;
transition(state.assetId, state.info.flickSpeed)
// delay here for overlay transition
setTimeout(function() {
Tween(_mediaViewContainer, STATE.mediaView.transitionDuration(), {alpha:1})
}, UPDATE_SPEED * 1000 + 10)
} else {
transition(state.assetId, state.info.flickSpeed)
}
}
}
if(state.assetId > -1 && !(/fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(e.mode)) && STATE.mediaView.videoAutoPlay()) {
var mediaId = _mediaViewContainer.children[state.assetId].id;
_localEvents.dispatchEvent('mediaAutoPlay', mediaId);
} else if(!(/fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(e.mode)) && USER_AGENT === MOBILE) {
var mediaId = _mediaViewContainer.children[state.assetId] && _mediaViewContainer.children[state.assetId].id;
var mediaItem = MEDIA_MODEL[mediaId]
if(mediaItem && mediaItem.type === 'video' && mediaItem.content.indexOf('vimeo') !== 0 && STATE.mediaView.videoAutoPlay()) {
_localEvents.dispatchEvent('mediaAutoPlay', mediaId);
}
}
if(state.assetId > -1 && _mediaViewContainer.children[state.assetId] && _mediaViewContainer.children[state.assetId].type === 'html') {
_localEvents.dispatchEvent(PAGE_LOADED);
}
if(self.touchNav) self.touchNav.assetId = e.assetId
}
}
function assetReset() {
var transitionSpeed = isPod() || isPad() ? 0 : 0.85
if(stage.zoom === 1) {
if(state.mediaToRender.length > state.assetId && transition) {
if(state.assetId > -1) transition(state.assetId, transitionSpeed);
} else if(transition) {
transition(0, transitionSpeed);
}
}
}
function jumpToAsset(assetId) {
transition(assetId, 0);
}
function mediaNavigationResize() {
if(stage.zoom === 1 && isAppleMobile() && !SETTINGS_MODEL.podUseDesktop) {
window.scrollTo(0, 0);
}
if(layout) layout();
if((state.mediaToRender && state.mediaToRender.length > 0 && state.assetId > -1)) {
if(!transition) defineTransition();
// need to figure out a way to prevent resize transition for mobile browsers when browser chrome reduces on scroll
jumpToAsset(state.assetId);
}
isOrientationChange = false;
if(_mediaView && _mediaView.lazyLoader) _mediaView.lazyLoader.update()
}
function orientationChange(e) {
isOrientationChange = true;
}
function layoutMediaView(e) {
layoutContent(e);
resetMediaViewContainer();
}
function layoutContent() {
defineTransition();
layout();
}
function layoutModelChange(e) {
if(e.id === 'unifiedPageScrolling' && /vScroll/.test(STATE.overrides.transitionType)) {
defineTransition()
}
if(layout) layout();
}
function updateAssetId(e) {
_scrollAssetId = e.id;
if(state) {
state.assetId = e.id;
if(!(/fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(e.mode)) && STATE.mediaView.videoAutoPlay()) {
var mediaId = _mediaViewContainer.children[state.assetId].id;
_localEvents.dispatchEvent('mediaAutoPlay', mediaId);
} else if(!(/fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(e.mode)) && USER_AGENT === MOBILE) {
var mediaId = _mediaViewContainer.children[state.assetId].id;
var mediaItem = MEDIA_MODEL[mediaId]
if(mediaItem.type === 'video' && mediaItem.content.indexOf('vimeo') !== 0 && STATE.mediaView.videoAutoPlay()) {
_localEvents.dispatchEvent('mediaAutoPlay', mediaId);
}
}
}
}
function resetMediaViewContainer() {
_mediaViewContainer.transition = 0;
_mediaViewContainer.translateX = 0;
_mediaViewContainer.translateY = 0;
_mediaViewContainer.x = 0;
_mediaViewContainer.y = 0;
Tween(_mediaViewContainer, UPDATE_SPEED, {backgroundColor:STATE.mediaView.backgroundColor()});
}
function destroy() {
if(transition && transition.destroy) transition.destroy();
layout = undefined;
transition = undefined;
_localEvents.removeEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.removeEventListener(SECTIONS_MODEL_CHANGE, layoutModelChange);
_localEvents.removeEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.removeEventListener(RESIZE, mediaNavigationResize);
_localEvents.removeEventListener(ORIENTATION_CHANGE, orientationChange);
_localEvents.removeEventListener('siteUriChange', siteUriChange);
_localEvents.removeEventListener('layoutMediaView', layoutMediaView);
_localEvents.removeEventListener('mediaSizeUpdate', mediaSizeUpdate);
_localEvents.removeEventListener('MEDIA_HEIGHT_CHANGE', mediaSizeUpdate);
_localEvents.removeEventListener('assetReset', assetReset);
_localEvents.removeEventListener(TOUCH_NAVIGATION_END, touchNavEnd);
_localEvents.removeEventListener('ScrollTransition/updateAssetId', updateAssetId);
if(_mediaView.scroll) _mediaView.scroll.destroy();
if(self.touchNav) self.touchNav.destroy();
self.touchNav = null;
_mediaView.scroll = null;
}
this.destroy = destroy
// _localEvents.addEventListener('destroy', destroy)
}
function MediaSlideshow(vars) {
var _localEvents = vars.localEvents,
_mediaView = vars.mediaView,
_mediaViewContainer = vars.mediaView.container,
assetLength = 0,
slideShowTimer,
transition,
layout,
_assetId = -1,
_assetNum = -1,
landingMediaTransitionType,
randomized = [];
_localEvents.addEventListener('layoutMediaView', layoutMediaView);
_localEvents.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.addEventListener(SETTINGS_MODEL_CHANGE, settingsModelChange);
_localEvents.addEventListener(RESIZE, mediaSlideshowResize);
_localEvents.addEventListener('mediaSizeUpdate', layoutContent);
_localEvents.addEventListener('siteUriChange', siteUriChange);
_localEvents.addEventListener('assetReset', assetReset);
function siteUriChange(e) {
assetLength = _mediaViewContainer.children.length;
if(assetLength && (assetLength > 1 || _mediaViewContainer.children[0].type === 'video')) {
if(slideShowTimer) slideShowTimer.destroy()
initSlideShow();
} else {
singleMediaItem();
}
}
function mediaLoaded(e) {
slideShowTimer.resume();
}
function singleMediaItem() {
_assetId = 0;
transition(_assetId);
}
function slideShow() {
_assetId = setAssetId();
var mediaViewItem = _mediaViewContainer.children[_assetId];
if(isLogin) {
slideShowTimer.pause();
} else if(mediaViewItem.type === 'video') {
slideShowTimer.pause();
setTimeout(function(){
mediaViewItem.autoPlay();
}, 100)
_localEvents.addEventListener('playbackEnd', playbackEnd);
} else if(mediaViewItem.type === 'image' && !mediaViewItem.loaded) {
slideShowTimer.pause();
mediaViewItem.addEventListener(MEDIA_LOADED, mediaLoaded);
}
transition(_assetId);
}
function playbackEnd(e) {
slideShowTimer.resume();
slideShow();
}
function setAssetId() {
_assetNum = _assetNum < assetLength - 1 ? _assetNum + 1 : 0
if(LAYOUT_MODEL.landingMediaRandomize) {
return randomized[_assetNum]
} else {
return _assetId < assetLength - 1 ? _assetId + 1 : 0
}
}
function assetReset() {
if(transition) transition(_assetId);
}
function numArray(max) {
var arr = []
var i = 0
for(;i < max; i++) {
arr.push(i)
}
return arr
}
function initSlideShow() {
slideShowTimer = new Timer(slideShow, LAYOUT_MODEL.landingMediaSpeed, {loop:true});
randomized = shuffle(numArray(assetLength))
slideShowTimer.start();
slideShow();
}
function defineTransition() {
transitionType = LAYOUT_MODEL.landingMediaTransitionType;
var lazyLoaderType = transitionType === 'fade' ? 'fade' : 'default';
_mediaView.lazyLoader = new LazyLoader(_mediaView.container, _mediaView.mask, {
type:lazyLoaderType,
property:'translate'
});
switch(LAYOUT_MODEL.landingMediaTransitionType) {
case 'fade':
layout = new FadeLayout({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new FadeTransition({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
case 'hSlide':
layout = new SlideLayoutHorizontal({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new SlideTransitionHorizontal({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
case 'vSlide':
layout = new SlideLayoutVertical({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new SlideTransitionVertical({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
case 'grid':
layout = new GridLayout({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new GridTransition({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
}
layoutContent();
}
function mediaSlideshowResize(e) {
layoutContent(e);
assetReset();
}
function layoutMediaView(e) {
layoutContent(e);
}
function layoutContent(e) {
if(!layout) defineTransition();
layout();
}
function layoutModelChange(e) {
if((e && e.id && /landingMediaRandomize|landingMediaTransitionType|landingMediaSpeed|landingMediaTransitionDuration|landingMediaAlignHorizontal|landingMediaAlignVertical|landingMediaScaleType/.test(e.id)) || transitionType !== STATE.overrides.transitionType || !layout) {
if(slideShowTimer) slideShowTimer.duration = LAYOUT_MODEL.landingMediaSpeed;
defineTransition();
transition(_assetId);
layout();
}
}
function settingsModelChange(e) {
}
function shuffle(array) {
var i = array.length,
j = 0,
temp;
while (i--) {
j = Math.floor(Math.random() * (i+1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
this.destroy = function() {
layout = undefined;
transition = undefined;
_localEvents.removeEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.removeEventListener('siteUriChange', siteUriChange);
_localEvents.removeEventListener(RESIZE, mediaSlideshowResize);
_localEvents.removeEventListener('layoutMediaView', layoutMediaView);
_localEvents.removeEventListener(SETTINGS_MODEL_CHANGE, settingsModelChange);
_localEvents.removeEventListener('mediaSizeUpdate', layoutContent);
_localEvents.removeEventListener('assetReset', assetReset);
if(slideShowTimer) slideShowTimer.destroy();
};
defineTransition();
}
var MediaView = function(imports) {
var self,
mask,
container,
_localEvents;
function MediaView(vars) {
self = this;
mask = new Sprite();
mask.element.setAttribute('class', 'MediaView.mask');
mask.overflow = 'hidden';
container = new Sprite();
if(BROWSER_NAME === 'Chrome') {
container.selectable = true
mask.selectable = true
}
container.element.setAttribute('class', 'MediaView.container');
mask.addChild(container);
_localEvents = vars.localEvents;
updatePosition();
updateStyle();
_localEvents.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.addEventListener(SECTIONS_MODEL_CHANGE, sectionsModelChange);
_localEvents.addEventListener(RESIZE, updatePosition);
_localEvents.addEventListener('MediaView/ContentReady', updateContent);
_localEvents.addEventListener('UPDATE_CONTENT_HEIGHT', updatePosition);
mask.addEventListener(CHILD_ADDED, childAdded);
this.mask = mask;
this.container = container;
vars.siteView.addChild(mask);
}
function childAdded(child) {
}
function sectionsModelChange(e) {
updateStyle();
updatePosition();
}
function layoutModelChange(e) {
updateStyle();
updatePosition();
}
function updateStyle() {
Tween(container, UPDATE_SPEED, {backgroundColor:STATE.mediaView.backgroundColor()});
}
function updateContent(items) {
container.removeChildren(container);
var i = 0,
l = items.length;
for(; i < l; i++) {
container.addChild(items[i]);
}
updatePosition();
_localEvents.dispatchEvent('MediaView/ContentAdded', container);
}
function updatePosition() {
Tween(mask, 0, {
x:STATE.mediaView.x(),
y:STATE.mediaView.y(),
width:STATE.mediaView.width(),
height:STATE.mediaView.contentHeight()
});
}
return MediaView;
}({
});
function MediaOverlay(vars) {
var self = new Sprite()
var mask
var container
var _localEvents
self.section = vars.section
self.zIndex = 100
self.alpha = 0
mask = new Sprite();
mask.element.setAttribute('class', 'MediaOverlay.mask');
mask.overflowX = 'hidden';
mask.overflowY = 'auto';
container = new Sprite();
if(BROWSER_NAME === 'Chrome') {
container.selectable = true
mask.selectable = true
}
container.element.setAttribute('class', 'MediaOverlay.container');
mask.element.style['-webkit-overflow-scrolling'] = 'touch'
self.position = 'fixed'
var closeBtn = new Svg();
closeBtn.element.style.zIndex = 500
var icon = new Path();
icon.d = svgPaths.bigX;
icon.fill = 'none';
closeBtn.addChild(icon)
closeBtn.icon = icon;
function updateCloseBtn() {
closeBtn.width = (LAYOUT_MODEL.mediaOverlayIconSize || 36)
closeBtn.height = (LAYOUT_MODEL.mediaOverlayIconSize || 36)
icon.strokeWidth = LAYOUT_MODEL.mediaOverlayIconLineWidth || 1;
icon.stroke = LAYOUT_MODEL.mediaOverlayIconColor || '#FFF';
icon.scale = closeBtn.width / 40
if(LAYOUT_MODEL.mediaOverlayIconSide === 'right') {
closeBtn.right = LAYOUT_MODEL.mediaOverlayIconHOffset || 30
} else {
closeBtn.left = LAYOUT_MODEL.mediaOverlayIconHOffset || 30
}
closeBtn.y = LAYOUT_MODEL.mediaOverlayIconVOffset || 20
}
updateCloseBtn()
closeBtn.addEventListener('mouseover', function() {
Tween(closeBtn, 0.2, {alpha:0.8})
})
closeBtn.addEventListener('mouseout', function() {
Tween(closeBtn, 0.2, {alpha:1})
})
closeBtn.addEventListener('click', function() {
_localEvents.dispatchEvent('mediaOverlayClose')
self.close()
})
self.open = function(cb) {
self.display = 'block'
Tween.defer(self, 0.35, {alpha:1, onComplete:function(){
stage.disableScroll = true
if(typeof cb === 'function') cb()
}})
}
function getDisplayMode() {
if(/unifiedSite/.test(LAYOUT_MODEL.siteDisplayBehavior)) return 'multiple'
return 'single'
}
self.close = function(cb) {
stage.disableScroll = false
layoutCalcs.sectionDisplayMode = (layoutCalcs.lastSectionDisplayMode || getDisplayMode())
Tween(self, 0.35, {alpha:0, onComplete:function(){
self.display = 'none'
if(typeof cb === 'function') cb()
}})
}
mask.addChild(container);
_localEvents = vars.localEvents;
updateStyle();
_localEvents.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.addEventListener(SECTIONS_MODEL_CHANGE, sectionsModelChange);
_localEvents.addEventListener('MediaView/ContentReady', updateContent);
self.mask = mask;
self.container = container;
self.destroy = destroy
self.addChild(mask)
self.addChild(closeBtn)
self.updateStyle = updateStyle
function sectionsModelChange(e) {
updateStyle();
}
function layoutModelChange(e) {
updateCloseBtn()
updateStyle();
}
function updateStyle() {
if(self.section) STATE.section(self.section)
Tween(self, UPDATE_SPEED, {backgroundColor:LAYOUT_MODEL.mediaOverlayColor || '#000'});
}
function updateContent(items) {
container.removeChildren(container);
var i = 0,
l = items.length;
for(; i < l; i++) {
container.addChild(items[i]);
}
_localEvents.dispatchEvent('MediaView/ContentAdded', container);
}
function destroy() {
container.removeChildren(container)
mask.removeChild(container)
vars.siteView.removeChild(self)
_localEvents.removeEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.removeEventListener(SECTIONS_MODEL_CHANGE, sectionsModelChange);
_localEvents.removeEventListener('MediaView/ContentReady', updateContent);
}
return self
}
function MediaViewBehavior(imports) {
var _localEvents = imports.localEvents,
_mediaView = imports.mediaView,
_mediaViewContainer = imports.mediaView.container,
viewMode,
behavior,
init;
_localEvents.addEventListener('MediaViewBehavior/navigationModeChange', navigationModeChange);
function defineNavigation() {
if(behavior) behavior.destroy();
_mediaViewContainer.transition = 0;
_mediaViewContainer.alpha = 1;
switch(viewMode) {
case 'landingMedia':
behavior = new MediaSlideshow({localEvents:_localEvents, mediaView:_mediaView});
break;
case 'mediaView':
behavior = new MediaNavigation({localEvents:_localEvents, mediaView:_mediaView});
break;
}
}
function navigationModeChange(mode) {
viewMode = mode;
defineNavigation();
}
}
function SectionMediaFactory(imports) {
var _localEvents = imports.localEvents;
_localEvents.addEventListener('SectionMediaFactory/buildItems', buildItems);
function buildItems(e) {
var i = 0,
media = e.media,
l = media.length,
mediaItems = [];
for(; i < l; i++) {
var mediaItem = getMediaById(media[i])
var item
var mediaVars = {
size:mediaItem.size,
localEvents:_localEvents,
isBlog:e.isBlog,
mediaItem:mediaItem,
section:e.section
}
if(USER_AGENT === MOBILE) {
mediaVars.loaderColor = getLoaderColor(LAYOUT_MODEL.containerColorMobile || STATE.mediaView.backgroundColor())
} else if(USER_AGENT === TABLET) {
mediaVars.loaderColor = getLoaderColor(LAYOUT_MODEL.containerColorTablet || STATE.mediaView.backgroundColor())
} else {
mediaVars.loaderColor = getLoaderColor(STATE.mediaView.backgroundColor())
}
switch(mediaItem.type) {
case IMAGE:
item = new ImageView(mediaVars);
break;
case VIDEO:
mediaVars.isMobileVideoClick = e.isMobileVideoClick
item = new VideoView(mediaVars);
break;
case HTML:
item = new PageView(mediaVars);
break;
case CONTACT:
item = new ContactView(mediaVars);
break;
default:
break;
}
if(item) mediaItems.push(item);
}
_localEvents.dispatchEvent('SectionMediaFactory/mediaBuilt', {media:mediaItems});
}
}
function FadeLayout(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
function layout() {
_mediaView.mask.element.scrollLeft = 0
_mediaView.mask.element.scrollTop = 0
_mediaView.mask.element.style.overflow = 'hidden'
var i = 0,
items = _container.children,
length = items.length,
maxWidth = 0,
maxHeight = 0;
for(; i < length; i++) {
var item = items[i];
scaleItem(item);
item.transition = 0;
item.x = 0;
item.y = 0;
item.zIndex = 0;
// chrome emulator blank when vimeo on landing media
// if(BROWSER_NAME === 'Mobile Safari') item.visibility = 'hidden';
// maxHeight calc for unifiedPageScroll
var height = item.contentHeight ? item.contentHeight : item.height
if(maxHeight < height) maxHeight = height
}
_container.transition = 0;
_container.translateX = 0;
_container.translateY = 0;
_container.x = 0;
_container.y = 0;
_container.width = STATE.mediaView.width();
_container.height = maxHeight || STATE.mediaView.height();
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
layoutCalcs._mediaContentHeight = _container.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
function scaleItem(item) {
item.width = STATE.mediaView.width();
item.height = STATE.mediaView.height();
}
return layout;
}
function FadeTransition(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView,
timeout,
currentIndex,
transitionDuration;
var ease = TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut;
function transition(assetId, transitionDuration) {
transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
var i = 0,
items = _container.children,
length = items.length;
_localEvents.dispatchEvent(TRANSITION_START);
for(; i < length; i++) {
var item = items[i];
item.i = i;
if(i === assetId) {
currentIndex = i;
if(item.x !== 0) {
item.transition = 0;
item.x = 0;
}
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update(assetId);
if(BROWSER_NAME === 'Mobile Safari') item.visibility = 'visible';
item.pointerEvents = 'auto';
item.zIndex = 100;
Tween.defer(item, STATE.mediaView.transitionDuration(), {alpha:1, ease:ease, onComplete:function(){
_localEvents.dispatchEvent(TRANSITION_END);
}});
} else {
item.pointerEvents = 'none';
item.zIndex = 0;
if(item.alpha !== 0) new Tween(item, transitionDuration, {alpha:0, ease:ease});
}
}
}
transition.destroy = function destroy() {
// dummy
}
return transition;
}
function GridLayout(imports) {
var _Tile = Tile,
_container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
function layout() {
_mediaView.mask.element.scrollLeft = 0
_mediaView.mask.element.scrollTop = 0
_mediaView.mask.element.style.overflow = 'hidden'
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'y';
tile.align = 'left';
tile.wrap = true;
tile.perpLength = STATE.mediaView.width() * 4;
var i = 0,
items = _container.children,
length = items.length;
for(; i < length; i++) {
var item = items[i];
scaleItem(item);
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = item.contentHeight ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
items[i].x = position.x;
items[i].y = position.y;
}
var bounds = tile.getBounds();
_container.transition = 0;
_container.width = bounds.width;
_container.height = bounds.height;
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
layoutCalcs._mediaContentHeight = STATE.mediaView.zoneHeight()
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
function scaleItem(item) {
item.width = STATE.mediaView.width();
item.height = STATE.mediaView.height();
}
return layout;
}
function GridTransition(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
_localEvents.dispatchEvent(TRANSITION_START);
var ease = TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut;
function transition(assetId, transitionDuration) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
var asset = _container.children[assetId];
if(asset) {
var assetX = asset.x;
var assetY = asset.y;
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:ease, onComplete:function(){
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
}
}
transition.destroy = function destroy() {
// dummy
}
return transition;
}
function ScrollLayoutHorizontal(imports) {
var _Tile = Tile,
_mediaView = imports.mediaView,
_localEvents = imports.localEvents,
_container = _mediaView.container,
_mask = _mediaView.mask;
if(STATE.overrides.imageVideoScrollType === 'native') {
_mask.element.style.overflowY = 'hidden'
_mask.element.style.overflowX = 'scroll'
} else if(MAC_SCROLLBARS && (STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll)) {
_mask.element.style.overflowY = 'hidden'
_mask.element.style.overflowX = 'scroll'
} else {
if(_mediaView.scroll) _mediaView.scroll.destroy()
var scrollProps = {
name: 'horiz scroll',
types:['bar','wheel','touch'],
axis:'x',
align:'left',
color:STATE.overrides.imageVideoScrollbarColor,
hover:STATE.overrides.imageVideoScrollbarHover,
side:STATE.overrides.imageVideoScrollbarAlignment,
alpha:STATE.overrides.imageVideoScrollbarBgTransparency,
width:STATE.overrides.imageVideoScrollbarWidth,
offsetX:STATE.overrides.imageVideoScrollbarHorizontalOffset,
offsetY:STATE.overrides.imageVideoScrollbarVerticalOffset,
topPad:0,
parent:dx.site.siteView,
property:'translate',
zIndex:STATE.mediaView.zIndex,
rounded:STATE.overrides.imageVideoScrollbarRounded,
visibility:STATE.overrides.imageVideoScrollbarVisibility
}
if(STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll) {
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'bottom'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = 0
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
_mediaView.scroll = new Scroll(_container, _mask, scrollProps);
}
function layout() {
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'x';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.height();
var i = 0,
items = _container.children,
length = items.length;
for(; i < length; i++) {
var item = items[i];
scaleItem(item);
item.transition = 0;
item.display = 'block';
item.alpha = 1;
// var height = item.contentHeight ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, item.height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
items[i].x = position.x;
items[i].y = position.y;
}
var bounds = tile.getBounds();
_container.transition = 0;
_container.width = bounds.width;
_container.height = bounds.height;
if(_mediaView.scroll) {
setTimeout(function(){
if(_mediaView.scroll) _mediaView.scroll.resize();
}, UPDATE_SPEED * 1000);
}
if(_mediaView.lazyLoader) {
if(isPod() || isPad()) {
_mediaView.lazyLoader.domElementScroll = true
} else if(MAC_SCROLLBARS && (/native/.test(STATE.overrides.imageVideoScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
_mediaView.lazyLoader.domElementScroll = true
}
if(!_mediaView.scroll) {
_mediaView.lazyLoader.property = false
}
_mediaView.lazyLoader.update();
}
layoutCalcs._mediaContentHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
function scaleItem(item) {
var mediaTypePrefix = formatMediaType(MEDIA_MODEL[item.id].type)
var leftMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginLeft'], stage.width)
var rightMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginRight'], stage.width)
var topMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginTop'], stage.height)
var bottomMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginBottom'], stage.height)
var mediaItem = MEDIA_MODEL[item.id]
var type = 'fit' // STATE.overrides.imageScaleType
var width = mediaItem.size.content.width || 1200
var height = mediaItem.size.content.height || 800
var hRange = STATE.mediaView.width() * 4
var vRange = STATE.mediaView.height() - (topMargin + bottomMargin)
if(mediaItem.type === 'video' && !item.videoLoaded && showPosterImage(mediaItem)) {
width = mediaItem.size.thumb.width
height = mediaItem.size.thumb.height
}
var scale = ScaleEngine({
type:type,
hRange:hRange,
vRange:vRange,
width:width,
height:height,
disableOrientationCheck:false
})
if(/html|contact/.test(mediaItem.type)) {
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height()
} else {
item.width = Math.floor(scale.width + leftMargin + rightMargin)
item.height = STATE.mediaView.height()
}
}
return layout;
}
function ScrollTransitionHorizontal(imports) {
var _mediaView = imports.mediaView
var _container = _mediaView.container
var _mask = _mediaView.mask
var _localEvents = imports.localEvents
var _scrollInteraction
var scrollTimer
var isScrollAnimation
var curAssetId
var anim
if(_mediaView.scroll) {
_mediaView.scroll.addEventListener('scrollStop', scrollStop);
_mediaView.scroll.addEventListener('scrollStart', scrollStart);
_mediaView.scroll.addEventListener(SCROLL, scroll);
} else {
_mask.element.addEventListener("scroll", scrollEvents)
}
function transition(assetId, transitionDuration) {
curAssetId = assetId
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
_localEvents.dispatchEvent(TRANSITION_START);
var asset = _container.children[assetId];
if(asset) {
var assetX = asset.x;
var assetY = asset.y;
var alignBehavior = getAlignBehavior(assetId, _container.children.length);
var hAlign = AlignEngine({width:asset.width, hRange:_mask.width, hAlign:alignBehavior});
assetX = asset.x - hAlign.x;
isScrollAnimation = true
_scrollInteraction = false
if(_mediaView.scroll) {
var scollDist = _container.width - _mask.width;
var percent = assetX / scollDist;
_mediaView.scroll.percent = percent;
_mediaView.scroll.bar.moveHandle(STATE.mediaView.transitionDuration());
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut, onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else {
if(transitionDuration) {
if(anim) anim.kill()
anim = Anim.to(_mask, transitionDuration, {scrollLeft:assetX, scrollTop:assetY, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else {
setTimeout(function() {
_mask.scrollLeft = assetX
_mask.scrollTop = assetY
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 10)
}
}
isScrollAnimation ? setActiveAlpha(assetId) : setAllActive()
}
}
transition.destroy = function destroy() {
if(_mediaView.scroll) {
_mediaView.scroll.removeEventListener('scrollStop', scrollStop);
_mediaView.scroll.removeEventListener('scrollStart', scrollStart);
_mediaView.scroll.removeEventListener(SCROLL, scroll);
} else {
_mask.element.removeEventListener("scroll", scrollEvents)
}
};
function setActiveAlpha(activeIndex) {
var i = _container.children.length;
while(i--) {
var child = _container.children[i]
var alpha = activeIndex === undefined || (!isNaN(activeIndex) && activeIndex === i) ? 1 : STATE.overrides.imageVideoInactiveAlpha
Tween(child, STATE.mediaView.transitionDuration(), {alpha:alpha});
}
}
function setAllActive() {
var i = _container.children.length;
while(i--) {
Tween(_container.children[i], STATE.mediaView.transitionDuration(), {alpha:1});
}
}
function getAlignBehavior(assetId, arrLen) {
if(assetId === 0) {
return 'left';
} else if(assetId === arrLen - 1) {
return 'right';
}
return STATE.mediaView.hAlign();
}
function getCurrentAssetPosition() {
var i = _container.children.length;
while(i--) {
var child = _container.children[i];
var mediaViewCenter = _mask.width * 0.5;
if(_mediaView.scroll) {
if(-_container.translateX + mediaViewCenter >= child.x && -_container.translateX + mediaViewCenter <= child.x + child.width) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
} else {
if(_mask.scrollLeft + mediaViewCenter >= child.x && _mask.scrollLeft + mediaViewCenter <= child.x + child.width) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
}
}
}
function scrollStart(e) {
_localEvents.dispatchEvent('mediaScrollStart')
if(_scrollInteraction !== false) _localEvents.dispatchEvent('pauseMedia')
// if(_scrollInteraction === false && anim) {
// anim.kill()
// }
isScrollAnimation ? setActiveAlpha(curAssetId) : setAllActive()
}
function scrollStop(e) {
if(_scrollInteraction) {
getCurrentAssetPosition()
}
if(_scrollInteraction !== false) _scrollInteraction = undefined
}
function scroll(e) {
if(_scrollInteraction === undefined) _scrollInteraction = true
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update()
if(_scrollInteraction) {
getCurrentAssetPosition()
}
}
function scrollEvents(e) {
if(!scrollTimer) scrollStart(e)
clearTimeout(scrollTimer)
scroll(e)
scrollTimer = setTimeout(function() {
scrollStop(e)
scrollTimer = null
}, 150)
}
return transition;
}
function ScrollLayoutHorizontalNoCrop(imports) {
var _Tile = Tile,
_mediaView = imports.mediaView,
_localEvents = imports.localEvents,
_container = _mediaView.container,
_mask = _mediaView.mask;
if(STATE.overrides.imageVideoScrollType === 'native') {
_mask.element.style.overflowY = 'hidden'
_mask.element.style.overflowX = 'scroll'
} else if(MAC_SCROLLBARS && (STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll)) {
_mask.element.style.overflowY = 'hidden'
_mask.element.style.overflowX = 'scroll'
} else {
if(_mediaView.scroll) _mediaView.scroll.destroy()
var scrollProps = {
name: 'horiz scroll',
types:['bar','wheel','touch'],
axis:'x',
align:'left',
color:STATE.overrides.imageVideoScrollbarColor,
hover:STATE.overrides.imageVideoScrollbarHover,
side:STATE.overrides.imageVideoScrollbarAlignment,
alpha:STATE.overrides.imageVideoScrollbarBgTransparency,
width:STATE.overrides.imageVideoScrollbarWidth,
offsetX:STATE.overrides.imageVideoScrollbarHorizontalOffset,
offsetY:STATE.overrides.imageVideoScrollbarVerticalOffset,
topPad:0,
parent:dx.site.siteView,
property:'translate',
zIndex:STATE.mediaView.zIndex,
rounded:STATE.overrides.imageVideoScrollbarRounded,
visibility:STATE.overrides.imageVideoScrollbarVisibility
}
if(STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll) {
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'bottom'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = 0
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
_mediaView.scroll = new Scroll(_container, _mask, scrollProps);
}
function layout() {
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'x';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.height();
var i = 0,
items = _container.children,
length = items.length;
for(; i < length; i++) {
var item = items[i];
scaleItem(item);
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = item.contentHeight ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
items[i].x = position.x;
items[i].y = position.y;
}
var bounds = tile.getBounds();
_container.transition = 0;
_container.width = bounds.width;
_container.height = bounds.height;
if(_mediaView.scroll) {
setTimeout(function(){
if(_mediaView.scroll) _mediaView.scroll.resize();
}, UPDATE_SPEED * 1000);
}
if(_mediaView.lazyLoader) {
if(isPod() || isPad()) {
_mediaView.lazyLoader.domElementScroll = true
} else if(MAC_SCROLLBARS && (/native/.test(STATE.overrides.imageVideoScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
_mediaView.lazyLoader.domElementScroll = true
}
if(!_mediaView.scroll) {
_mediaView.lazyLoader.property = false
}
_mediaView.lazyLoader.update();
}
layoutCalcs._mediaContentHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
function scaleItem(item) {
var mediaTypePrefix = formatMediaType(MEDIA_MODEL[item.id].type)
var leftMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginLeft'], stage.width)
var rightMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginRight'], stage.width)
var topMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginTop'], stage.height)
var bottomMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginBottom'], stage.height)
var mediaItem = MEDIA_MODEL[item.id]
var type = STATE.overrides.imageScaleType
var width = mediaItem.size.content.width || 1200
var height = mediaItem.size.content.height || 800
var hRange = STATE.mediaView.width() * 4
var vRange = STATE.mediaView.height() - (topMargin + bottomMargin)
if(mediaItem.type === 'video' && !item.videoLoaded && showPosterImage(mediaItem)) {
width = mediaItem.size.thumb.width
height = mediaItem.size.thumb.height
}
var scale = ScaleEngine({
type:type,
hRange:hRange,
vRange:vRange,
width:width,
height:height,
disableOrientationCheck:false
})
if(/html|contact/.test(mediaItem.type)) {
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height()
} else {
var scaleWidth = Mth.floor(scale.width + leftMargin + rightMargin)
item.width = Math.floor(scaleWidth > STATE.mediaView.width() ? STATE.mediaView.width() : scaleWidth)
item.height = STATE.mediaView.height()
}
}
return layout;
}
function ScrollTransitionHorizontalNoCrop(imports) {
var _mediaView = imports.mediaView
var _container = _mediaView.container
var _mask = _mediaView.mask
var _localEvents = imports.localEvents
var _scrollInteraction
var scrollTimer
var isScrollAnimation
var curAssetId
var anim
if(_mediaView.scroll) {
_mediaView.scroll.addEventListener('scrollStop', scrollStop);
_mediaView.scroll.addEventListener('scrollStart', scrollStart);
_mediaView.scroll.addEventListener(SCROLL, scroll);
} else {
_mask.element.addEventListener("scroll", scrollEvents)
}
function transition(assetId, transitionDuration) {
curAssetId = assetId
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
_localEvents.dispatchEvent(TRANSITION_START);
var asset = _container.children[assetId];
if(asset) {
var assetX = asset.x;
var assetY = asset.y;
var alignBehavior = getAlignBehavior(assetId, _container.children.length);
var hAlign = AlignEngine({width:asset.width, hRange:_mask.width, hAlign:alignBehavior});
assetX = asset.x - hAlign.x;
isScrollAnimation = true
_scrollInteraction = false
if(_mediaView.scroll) {
var scollDist = _container.width - _mask.width;
var percent = assetX / scollDist;
_mediaView.scroll.percent = percent;
_mediaView.scroll.bar.moveHandle(STATE.mediaView.transitionDuration());
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut, onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else {
if(transitionDuration) {
if(anim) anim.kill()
anim = Anim.to(_mask, transitionDuration, {scrollLeft:assetX, scrollTop:assetY, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else {
setTimeout(function() {
_mask.scrollLeft = assetX
_mask.scrollTop = assetY
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 10)
}
}
isScrollAnimation ? setActiveAlpha(assetId) : setAllActive()
}
}
transition.destroy = function destroy() {
if(_mediaView.scroll) {
_mediaView.scroll.removeEventListener('scrollStop', scrollStop);
_mediaView.scroll.removeEventListener('scrollStart', scrollStart);
_mediaView.scroll.removeEventListener(SCROLL, scroll);
} else {
_mask.element.removeEventListener("scroll", scrollEvents)
}
};
function setActiveAlpha(activeIndex) {
var i = _container.children.length;
while(i--) {
var child = _container.children[i]
var alpha = activeIndex === undefined || (!isNaN(activeIndex) && activeIndex === i) ? 1 : STATE.overrides.imageVideoInactiveAlpha
Tween(child, STATE.mediaView.transitionDuration(), {alpha:alpha});
}
}
function setAllActive() {
var i = _container.children.length;
while(i--) {
Tween(_container.children[i], STATE.mediaView.transitionDuration(), {alpha:1});
}
}
function getAlignBehavior(assetId, arrLen) {
if(assetId === 0) {
return 'left';
} else if(assetId === arrLen - 1) {
return 'right';
}
return STATE.mediaView.hAlign();
}
function getCurrentAssetPosition() {
var i = _container.children.length;
while(i--) {
var child = _container.children[i];
var mediaViewCenter = _mask.width * 0.5;
if(_mediaView.scroll) {
if(-_container.translateX + mediaViewCenter >= child.x && -_container.translateX + mediaViewCenter <= child.x + child.width) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
} else {
if(_mask.scrollLeft + mediaViewCenter >= child.x && _mask.scrollLeft + mediaViewCenter <= child.x + child.width) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
}
}
}
function scrollStart(e) {
_localEvents.dispatchEvent('mediaScrollStart')
if(_scrollInteraction !== false) _localEvents.dispatchEvent('pauseMedia')
// if(_scrollInteraction === false && anim) {
// anim.kill()
// }
isScrollAnimation ? setActiveAlpha(curAssetId) : setAllActive()
}
function scrollStop(e) {
if(_scrollInteraction) {
getCurrentAssetPosition()
}
if(_scrollInteraction !== false) _scrollInteraction = undefined
}
function scroll(e) {
if(_scrollInteraction === undefined) _scrollInteraction = true
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update()
if(_scrollInteraction) {
getCurrentAssetPosition()
}
}
function scrollEvents(e) {
if(!scrollTimer) scrollStart(e)
clearTimeout(scrollTimer)
scroll(e)
scrollTimer = setTimeout(function() {
scrollStop(e)
scrollTimer = null
}, 150)
}
return transition;
}
function ScrollLayoutVertical(imports) {
var _Tile = Tile,
_mediaView = imports.mediaView,
_localEvents = imports.localEvents,
_container = _mediaView.container,
_mask = _mediaView.mask;
if(!LAYOUT_MODEL.unifiedPageScrolling) {
if(STATE.overrides.imageVideoScrollType === 'native' || USER_AGENT === MOBILE || USER_AGENT === TABLET) {
_mask.element.style.overflowX = 'hidden'
_mask.element.style.overflowY = 'scroll'
_mask.element.style['-webkit-overflow-scrolling'] = 'touch'
} else if(MAC_SCROLLBARS && (STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll)) {
_mask.element.style.overflowX = 'hidden'
_mask.element.style.overflowY = 'scroll'
} else {
if(_mediaView.scroll) _mediaView.scroll.destroy()
var scrollProps = {
name: 'horiz scroll',
types:['bar','wheel','touch'],
axis:'y',
align:'left',
color:STATE.overrides.imageVideoScrollbarColor,
hover:STATE.overrides.imageVideoScrollbarHover,
side:STATE.overrides.imageVideoScrollbarAlignment,
alpha:STATE.overrides.imageVideoScrollbarBgTransparency,
width:STATE.overrides.imageVideoScrollbarWidth,
offsetX:STATE.overrides.imageVideoScrollbarHorizontalOffset,
offsetY:STATE.overrides.imageVideoScrollbarVerticalOffset,
topPad:0,
parent:dx.site.siteView,
property:'translate',
zIndex:STATE.mediaView.zIndex,
rounded:STATE.overrides.imageVideoScrollbarRounded,
visibility:STATE.overrides.imageVideoScrollbarVisibility
}
if(STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll) {
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'bottom'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = -10
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
_mediaView.scroll = new Scroll(_container, _mask, scrollProps);
}
}
function layout() {
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'y';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.width();
var i = 0,
items = _container.children,
length = items.length;
for(; i < length; i++) {
var item = items[i];
scaleItem(item);
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = item.contentHeight ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
items[i].x = position.x;
items[i].y = position.y;
}
var bounds = tile.getBounds();
_container.transition = 0;
_container.width = bounds.width;
_container.height = bounds.height;
if(_mediaView.scroll) {
setTimeout(function(){
if(_mediaView.scroll) _mediaView.scroll.resize();
}, UPDATE_SPEED * 1000);
}
if(_mediaView.lazyLoader) {
if(isPod() || isPad()) {
_mediaView.lazyLoader.domElementScroll = true
} else if(MAC_SCROLLBARS && (/native/.test(STATE.overrides.imageVideoScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
_mediaView.lazyLoader.domElementScroll = true
}
_mediaView.lazyLoader.update();
}
layoutCalcs._mediaContentHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
function scaleItem(item) {
var mediaTypePrefix = formatMediaType(MEDIA_MODEL[item.id].type)
var leftMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginLeft'], stage.width)
var rightMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginRight'], stage.width)
var topMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginTop'], stage.height)
var bottomMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginBottom'], stage.height)
var mediaItem = MEDIA_MODEL[item.id]
var type = 'fit' // STATE.overrides.imageScaleType
var width = mediaItem.size.content.width || 1200
var height = mediaItem.size.content.height || 800
var hRange = STATE.mediaView.width() - (leftMargin + rightMargin)
var vRange = STATE.mediaView.height() * 4
if(MEDIA_MODEL[item.id].type === 'video' && !item.videoLoaded && showPosterImage(mediaItem)) {
width = mediaItem.size.thumb.width
height = mediaItem.size.thumb.height
}
var scale = ScaleEngine({
type:type,
hRange:hRange,
vRange:vRange,
width:width,
height:height,
disableOrientationCheck:false
})
if(/html|contact/.test(mediaItem.type)) {
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height()
} else {
item.width = STATE.mediaView.width()
item.height = Math.round(scale.height) + (topMargin + bottomMargin)
}
}
return layout;
}
function ScrollTransitionVertical(imports) {
var _mediaView = imports.mediaView
var _container = _mediaView.container
var _mask = _mediaView.mask
var _localEvents = imports.localEvents
var _scrollInteraction
var scrollTimer
var isScrollAnimation
var curAssetId
var anim
if(_mediaView.scroll) {
_mediaView.scroll.addEventListener('scrollStop', scrollStop);
_mediaView.scroll.addEventListener('scrollStart', scrollStart);
_mediaView.scroll.addEventListener(SCROLL, scroll);
} else if(LAYOUT_MODEL.unifiedPageScrolling) {
window.addEventListener("scroll", scrollEvents)
} else {
_mask.element.addEventListener("scroll", scrollEvents)
}
function transition(assetId, transitionDuration) {
curAssetId = assetId
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
_localEvents.dispatchEvent(TRANSITION_START);
// setTimeout is for delaying the transition when the site is rendering vertical text pages
// (possibly due to using offsetHeight because of the varying text page height)
setTimeout(function() {
var asset = _container.children[assetId];
if(asset) {
if(LAYOUT_MODEL.unifiedPageScrolling) {
_mask = document.body
var assetX = asset.absX;
var assetY = asset.absY;
var alignBehavior = getAlignBehavior(assetId, _container.children.length);
// if(LAYOUT_MODEL.menuAlignHorizontal === 'top' && assetId === 0) {
// offset for menu when in this situation
// assetY = STATE.mediaView.maskY()
// }
if(assetId === 0) {
assetY = 0
// if(window.scrollY === 0) {
// prevent tween when already at the top of page
// a better solution would be a Tween interupt for user scroll
transitionDuration = 0
// }
} else {
var vAlign = AlignEngine({height:asset.height, vRange:_mask.offsetHeight, vAlign:alignBehavior});
assetY = Math.round(asset.absY - vAlign.y);
}
} else {
var assetX = asset.x;
var assetY = asset.y;
var alignBehavior = getAlignBehavior(assetId, _container.children.length);
var vAlign = AlignEngine({height:asset.height, vRange:_mask.height, vAlign:alignBehavior});
assetY = Math.round(asset.y - vAlign.y);
}
isScrollAnimation = true
_scrollInteraction = false
if(_mediaView.scroll) {
var scollDist = _container.height - _mask.height;
var percent = assetY / scollDist;
_mediaView.scroll.percent = percent;
_mediaView.scroll.bar.moveHandle(STATE.mediaView.transitionDuration());
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut, onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else if(LAYOUT_MODEL.unifiedPageScrolling) {
if(transitionDuration) {
if(anim) anim.kill()
anim = Anim.to(window, transitionDuration, {scrollY:assetY, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else {
setTimeout(function() {
window.scrollTo(0, assetY)
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 10)
}
} else {
if(transitionDuration) {
if(anim) anim.kill()
anim = Anim.to(_mask, transitionDuration, {scrollLeft:assetX, scrollTop:assetY, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else {
setTimeout(function() {
_mask.scrollLeft = assetX
_mask.scrollTop = assetY
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 10)
}
}
// to prevent reduced opacity when all media items fit on the screen
(isScrollAnimation && (layoutCalcs._mediaContentHeight > STATE.mediaView.zoneHeight())) && USER_AGENT !== MOBILE ? setActiveAlpha(assetId) : setAllActive()
}
}, 20)
}
transition.destroy = function destroy() {
if(_mediaView.scroll) {
_mediaView.scroll.removeEventListener('scrollStop', scrollStop);
_mediaView.scroll.removeEventListener('scrollStart', scrollStart);
_mediaView.scroll.removeEventListener(SCROLL, scroll);
} else if(LAYOUT_MODEL.unifiedPageScrolling) {
window.removeEventListener("scroll", scrollEvents)
} else {
_mask.element.removeEventListener("scroll", scrollEvents)
}
};
function setActiveAlpha(activeIndex) {
var i = _container.children.length;
while(i--) {
var child = _container.children[i]
var alpha = activeIndex === undefined || (!isNaN(activeIndex) && activeIndex === i) ? 1 : STATE.overrides.imageVideoInactiveAlpha
Tween(child, STATE.mediaView.transitionDuration(), {alpha:alpha});
}
}
function setAllActive() {
var i = _container.children.length;
while(i--) {
Tween(_container.children[i], STATE.mediaView.transitionDuration(), {alpha:1});
}
}
function getAlignBehavior(assetId, arrLen) {
if(assetId === 0) {
return 'top';
} else if(assetId === arrLen - 1) {
return 'bottom';
}
return STATE.mediaView.vAlign();
}
function getCurrentAssetPosition() {
var i = _container.children.length;
while(i--) {
var child = _container.children[i];
var mediaViewCenter = _mask.height * 0.5;
if(_mediaView.scroll) {
if(-_container.translateY + mediaViewCenter >= child.y && -_container.translateY + mediaViewCenter <= child.y + child.height) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
} else if(LAYOUT_MODEL.unifiedPageScrolling) {
if(window.scrollY + (window.innerHeight * 0.5) >= child.absY && window.scrollY + (window.innerHeight * 0.5) <= child.absY + child.height) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
} else {
if(_mask.scrollTop + mediaViewCenter >= child.y && _mask.scrollTop + mediaViewCenter <= child.y + child.height) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
}
}
}
function scrollStart(e) {
_localEvents.dispatchEvent('mediaScrollStart')
if(_scrollInteraction !== false) {
_localEvents.dispatchEvent('pauseMedia')
}
// if(_scrollInteraction === false && anim) {
// anim.kill()
// }
isScrollAnimation ? setActiveAlpha(curAssetId) : setAllActive()
}
function scrollStop(e) {
if(_scrollInteraction) {
getCurrentAssetPosition()
}
if(_scrollInteraction !== false) _scrollInteraction = undefined
}
function scroll(e) {
if(_scrollInteraction === undefined) _scrollInteraction = true
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update()
if(_scrollInteraction) {
getCurrentAssetPosition()
}
}
function scrollEvents(e) {
if(!scrollTimer) scrollStart(e)
clearTimeout(scrollTimer)
scroll(e)
scrollTimer = setTimeout(function() {
scrollStop(e)
scrollTimer = null
}, 150)
}
return transition;
}
function ScrollLayoutVerticalNoCrop(imports) {
var _Tile = Tile,
_mediaView = imports.mediaView,
_localEvents = imports.localEvents,
_container = _mediaView.container,
_mask = _mediaView.mask;
if(!LAYOUT_MODEL.unifiedPageScrolling) {
if(STATE.overrides.imageVideoScrollType === 'native') {
_mask.element.style.overflowX = 'hidden'
_mask.element.style.overflowY = 'scroll'
} else if(MAC_SCROLLBARS && (STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll)) {
_mask.element.style.overflowX = 'hidden'
_mask.element.style.overflowY = 'scroll'
} else {
if(_mediaView.scroll) _mediaView.scroll.destroy()
var scrollProps = {
name: 'horiz scroll',
types:['bar','wheel','touch'],
axis:'y',
align:'left',
color:STATE.overrides.imageVideoScrollbarColor,
hover:STATE.overrides.imageVideoScrollbarHover,
side:STATE.overrides.imageVideoScrollbarAlignment,
alpha:STATE.overrides.imageVideoScrollbarBgTransparency,
width:STATE.overrides.imageVideoScrollbarWidth,
offsetX:STATE.overrides.imageVideoScrollbarHorizontalOffset,
offsetY:STATE.overrides.imageVideoScrollbarVerticalOffset,
topPad:0,
parent:dx.site.siteView,
property:'translate',
zIndex:STATE.mediaView.zIndex,
rounded:STATE.overrides.imageVideoScrollbarRounded,
visibility:STATE.overrides.imageVideoScrollbarVisibility
}
if(STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll) {
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'bottom'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = -10
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
_mediaView.scroll = new Scroll(_container, _mask, scrollProps);
}
}
function layout() {
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'y';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.width();
var i = 0,
items = _container.children,
length = items.length;
for(; i < length; i++) {
var item = items[i];
scaleItem(item);
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = item.contentHeight ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
items[i].x = position.x;
items[i].y = position.y;
}
var bounds = tile.getBounds();
_container.transition = 0;
_container.width = bounds.width;
_container.height = bounds.height;
if(_mediaView.scroll) {
setTimeout(function(){
if(_mediaView.scroll) _mediaView.scroll.resize();
}, UPDATE_SPEED * 1000);
}
if(_mediaView.lazyLoader) {
if(isPod() || isPad()) {
_mediaView.lazyLoader.domElementScroll = true
} else if(MAC_SCROLLBARS && (/native/.test(STATE.overrides.imageVideoScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
_mediaView.lazyLoader.domElementScroll = true
}
_mediaView.lazyLoader.update();
}
layoutCalcs._mediaContentHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
function scaleItem(item) {
var mediaTypePrefix = formatMediaType(MEDIA_MODEL[item.id].type)
var leftMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginLeft'], stage.width)
var rightMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginRight'], stage.width)
var topMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginTop'], stage.height)
var bottomMargin = percentToPixels(STATE.overrides[mediaTypePrefix + 'MarginBottom'], stage.height)
var mediaItem = MEDIA_MODEL[item.id]
var type = 'fit' // STATE.overrides.imageScaleType
var width = mediaItem.size.content.width || 1200
var height = mediaItem.size.content.height || 800
var hRange = STATE.mediaView.width() - (leftMargin + rightMargin)
var vRange = STATE.mediaView.height() * 4
if(mediaItem.type === 'video' && !item.videoLoaded && showPosterImage(mediaItem)) {
width = mediaItem.size.thumb.width
height = mediaItem.size.thumb.height
}
var scale = ScaleEngine({
type:type,
hRange:hRange,
vRange:vRange,
width:width,
height:height,
disableOrientationCheck:false
})
if(/html|contact/.test(mediaItem.type)) {
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height()
} else {
item.width = STATE.mediaView.width()
var scaleHeight = Math.round(scale.height) + (topMargin + bottomMargin)
item.height = scaleHeight > STATE.mediaView.height() ? STATE.mediaView.height() : scaleHeight
}
}
return layout;
}
function ScrollTransitionVerticalNoCrop(imports) {
var _mediaView = imports.mediaView
var _container = _mediaView.container
var _mask = _mediaView.mask
var _localEvents = imports.localEvents
var _scrollInteraction
var scrollTimer
var isScrollAnimation
var curAssetId
var anim
if(_mediaView.scroll) {
_mediaView.scroll.addEventListener('scrollStop', scrollStop);
_mediaView.scroll.addEventListener('scrollStart', scrollStart);
_mediaView.scroll.addEventListener(SCROLL, scroll);
} else if(LAYOUT_MODEL.unifiedPageScrolling) {
window.addEventListener("scroll", scrollEvents)
} else {
_mask.element.addEventListener("scroll", scrollEvents)
}
function transition(assetId, transitionDuration) {
curAssetId = assetId
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
_localEvents.dispatchEvent(TRANSITION_START);
var ease = TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut;
// setTimeout is for delaying the transition when the site is rendering vertical text pages
// (possibly due to using offsetHeight because of the varying text page height)
setTimeout(function() {
var asset = _container.children[assetId];
if(asset) {
if(LAYOUT_MODEL.unifiedPageScrolling) {
_mask = document.body
var assetX = asset.absX;
var assetY = asset.absY;
var alignBehavior = getAlignBehavior(assetId, _container.children.length);
// if(LAYOUT_MODEL.menuAlignHorizontal === 'top' && assetId === 0) {
// offset for menu when in this situation
// assetY = STATE.mediaView.maskY()
// }
if(assetId === 0) {
assetY = 0
// if(window.scrollY === 0) {
// prevent tween when already at the top of page
// a better solution would be a Tween interupt for user scroll
transitionDuration = 0
// }
} else {
var vAlign = AlignEngine({height:asset.height, vRange:_mask.offsetHeight, vAlign:alignBehavior});
assetY = Math.round(asset.absY - vAlign.y);
}
} else {
var assetX = asset.x;
var assetY = LAYOUT_MODEL.unifiedPageScrolling ? asset.absY : asset.y;
var alignBehavior = getAlignBehavior(assetId, _container.children.length);
var vAlign = AlignEngine({height:asset.height, vRange:_mask.height, vAlign:alignBehavior});
assetY = Math.round(asset.y - vAlign.y);
}
isScrollAnimation = true
_scrollInteraction = false
if(_mediaView.scroll) {
var scollDist = _container.height - _mask.height;
var percent = assetY / scollDist;
_mediaView.scroll.percent = percent;
_mediaView.scroll.bar.moveHandle(STATE.mediaView.transitionDuration());
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut, onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else if(LAYOUT_MODEL.unifiedPageScrolling) {
if(transitionDuration) {
if(anim) anim.kill()
anim = Anim.to(window, transitionDuration, {scrollY:assetY, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else {
setTimeout(function() {
window.scrollTo(0, assetY)
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 10)
}
} else {
if(transitionDuration) {
if(anim) anim.kill()
anim = Anim.to(_mask, transitionDuration, {scrollLeft:assetX, scrollTop:assetY, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
} else {
setTimeout(function() {
_mask.scrollLeft = assetX
_mask.scrollTop = assetY
isScrollAnimation = false
_scrollInteraction = undefined
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 10)
}
}
// to prevent reduced opacity when all media items fit on the screen
isScrollAnimation && layoutCalcs._mediaContentHeight > STATE.mediaView.zoneHeight() ? setActiveAlpha(assetId) : setAllActive()
}
}, 20)
}
transition.destroy = function destroy() {
if(_mediaView.scroll) {
_mediaView.scroll.removeEventListener('scrollStop', scrollStop);
_mediaView.scroll.removeEventListener('scrollStart', scrollStart);
_mediaView.scroll.removeEventListener(SCROLL, scroll);
} else if(LAYOUT_MODEL.unifiedPageScrolling) {
window.removeEventListener("scroll", scrollEvents)
} else {
_mask.element.removeEventListener("scroll", scrollEvents)
}
};
function setActiveAlpha(activeIndex) {
var i = _container.children.length;
while(i--) {
var child = _container.children[i]
var alpha = activeIndex === undefined || (!isNaN(activeIndex) && activeIndex === i) ? 1 : STATE.overrides.imageVideoInactiveAlpha
Tween(child, STATE.mediaView.transitionDuration(), {alpha:alpha});
}
}
function setAllActive() {
var i = _container.children.length;
while(i--) {
Tween(_container.children[i], STATE.mediaView.transitionDuration(), {alpha:1});
}
}
function getAlignBehavior(assetId, arrLen) {
if(assetId === 0) {
return 'top';
} else if(assetId === arrLen - 1) {
return 'bottom';
}
return STATE.mediaView.vAlign();
}
function getCurrentAssetPosition() {
var i = _container.children.length;
while(i--) {
var child = _container.children[i];
var mediaViewCenter = _mask.height * 0.5;
if(_mediaView.scroll) {
if(-_container.translateY + mediaViewCenter >= child.y && -_container.translateY + mediaViewCenter <= child.y + child.height) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
} else if(LAYOUT_MODEL.unifiedPageScrolling) {
if(window.scrollY + (window.innerHeight * 0.5) >= child.absY && window.scrollY + (window.innerHeight * 0.5) <= child.absY + child.height) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
} else {
if(_mask.scrollTop + mediaViewCenter >= child.y && _mask.scrollTop + mediaViewCenter <= child.y + child.height) {
_localEvents.dispatchEvent('ScrollTransition/updateAssetId', {id:i});
}
}
}
}
function scrollStart(e) {
_localEvents.dispatchEvent('mediaScrollStart')
if(_scrollInteraction !== false) _localEvents.dispatchEvent('pauseMedia')
// if(_scrollInteraction === false && anim) {
// anim.kill()
// }
isScrollAnimation ? setActiveAlpha(curAssetId) : setAllActive()
}
function scrollStop(e) {
if(_scrollInteraction) {
getCurrentAssetPosition()
}
if(_scrollInteraction !== false) _scrollInteraction = undefined
}
function scroll(e) {
if(_scrollInteraction === undefined) _scrollInteraction = true
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update()
if(_scrollInteraction) {
getCurrentAssetPosition()
}
}
function scrollEvents(e) {
if(!scrollTimer) scrollStart(e)
clearTimeout(scrollTimer)
scroll(e)
scrollTimer = setTimeout(function() {
scrollStop(e)
scrollTimer = null
}, 150)
}
return transition;
}
function SlideLayoutHorizontal(imports) {
var _Tile = Tile,
_container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
function layout() {
_mediaView.mask.element.scrollLeft = 0
_mediaView.mask.element.scrollTop = 0
_mediaView.mask.element.style.overflow = 'hidden'
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'x';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.height();
var i = 0,
items = _container.children,
length = items.length;
for(; i < length; i++) {
var item = items[i];
scaleItem(item);
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = item.contentHeight ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
items[i].x = position.x;
items[i].y = position.y;
}
var bounds = tile.getBounds();
_container.transition = 0;
_container.width = bounds.width;
_container.height = bounds.height;
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
layoutCalcs._mediaContentHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
function scaleItem(item) {
item.width = STATE.mediaView.width();
item.height = STATE.mediaView.height();
}
return layout;
}
function SlideTransitionHorizontal(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
function transition(assetId, transitionDuration) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
_localEvents.dispatchEvent(TRANSITION_START);
var ease = TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut;
var asset = _container.children[assetId];
if(asset) {
var assetX = asset.x;
var assetY = asset.y;
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:ease, onComplete:function(){
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
if(USER_AGENT === MOBILE) {
var items = _container.children
for(var i = 0; i < items.length; i++) {
var item = items[i];
item.i = i;
if(i === assetId || i === assetId -1 || i === assetId + 1) {
item.element.style.visibility = 'visible';
} else {
item.element.style.visibility = 'hidden';
}
}
}
}
}
transition.destroy = function destroy() {
// dummy
}
return transition;
}
function SlideLayoutVertical(imports) {
var _Tile = Tile,
_container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
function layout() {
_mediaView.mask.element.scrollLeft = 0
_mediaView.mask.element.scrollTop = 0
_mediaView.mask.element.style.overflow = 'hidden'
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'y';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.width();
var i = 0,
items = _container.children,
length = items.length;
for(; i < length; i++) {
var item = items[i];
scaleItem(item);
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = item.contentHeight ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
items[i].x = position.x;
items[i].y = position.y;
}
var bounds = tile.getBounds();
_container.transition = 0;
_container.width = bounds.width;
_container.height = bounds.height;
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
layoutCalcs._mediaContentHeight = STATE.mediaView.zoneHeight()
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
function scaleItem(item) {
item.width = STATE.mediaView.width();
item.height = STATE.mediaView.height();
}
return layout;
}
function SlideTransitionVertical(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
function transition(assetId, transitionDuration) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
_localEvents.dispatchEvent(TRANSITION_START);
var ease = TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut;
var asset = _container.children[assetId];
if(asset) {
var assetX = asset.x;
var assetY = asset.y;
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:ease, onComplete:function(){
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
}
}
transition.destroy = function destroy() {
// dummy
}
return transition;
}
function MobileSlideLayout(imports) {
var _Tile = Tile,
_container = imports.mediaViewContainer,
_mediaView = imports.mediaView,
_mask = _mediaView.mask;
if(!LAYOUT_MODEL.unifiedPageScrolling) {
if(STATE.overrides.imageVideoScrollType === 'native' || USER_AGENT === MOBILE || USER_AGENT === TABLET) {
_mask.element.style.overflowX = 'hidden'
_mask.element.style.overflowY = 'scroll'
_mask.element.style['-webkit-overflow-scrolling'] = 'touch'
} else if(MAC_SCROLLBARS && (STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll)) {
_mask.element.style.overflowX = 'hidden'
_mask.element.style.overflowY = 'scroll'
} else {
if(_mediaView.scroll) _mediaView.scroll.destroy()
var scrollProps = {
name: 'horiz scroll',
types:['bar','wheel','touch'],
axis:'y',
align:'left',
color:STATE.overrides.imageVideoScrollbarColor,
hover:STATE.overrides.imageVideoScrollbarHover,
side:STATE.overrides.imageVideoScrollbarAlignment,
alpha:STATE.overrides.imageVideoScrollbarBgTransparency,
width:STATE.overrides.imageVideoScrollbarWidth,
offsetX:STATE.overrides.imageVideoScrollbarHorizontalOffset,
offsetY:STATE.overrides.imageVideoScrollbarVerticalOffset,
topPad:0,
parent:dx.site.siteView,
property:'translate',
zIndex:STATE.mediaView.zIndex,
rounded:STATE.overrides.imageVideoScrollbarRounded,
visibility:STATE.overrides.imageVideoScrollbarVisibility
}
if(STATE.overrides.imageVideoScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll) {
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'bottom'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = -10
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
_mediaView.scroll = new Scroll(_container, _mask, scrollProps);
}
}
function layout() {
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'x';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.height();
var i = 0
var items = _container.children
var length = items.length
for(; i < length; i++) {
var item = items[i]
scaleItem(item)
item.transition = 0
item.display = 'none'
item.alpha = 0
var height = item.contentHeight ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
items[i].translateX = position.x;
items[i].translateY = position.y;
}
// var bounds = tile.getBounds();
_container.transition = 0
_container.width = STATE.mediaView.width()
_container.height = STATE.mediaView.height()
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}
return layout;
}
function scaleItem(item) {
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height()
}
function MobileSlideTransition(imports) {
var _container = imports.mediaViewContainer
var _localEvents = imports.localEvents
var _mediaView = imports.mediaView
var mediaDisplayTimer
function transition(assetId, transitionDuration, swipeDirection) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration()
_localEvents.dispatchEvent(TRANSITION_START)
var ease = EASE.quart.out
var items = _container.children
var prevAsset = items[assetId - 1]
var curAsset = items[assetId]
var nextAsset = items[assetId + 1]
if(prevAsset) {
setTimeout(function() {
prevAsset.transition = 0
if(swipeDirection === 'right') prevAsset.translateX = -STATE.mediaView.width()
prevAsset.display = 'block'
prevAsset.updateSpeed = 0
prevAsset.updatePosition()
if(!prevAsset.loaded) prevAsset.load()
Tween.defer(prevAsset, transitionDuration, {translateX:-STATE.mediaView.width(), alpha:1, ease:ease});
}, 0)
}
if(curAsset) {
curAsset.transition = 0
curAsset.display = 'block'
curAsset.updateSpeed = 0
curAsset.updatePosition()
if(!curAsset.loaded) curAsset.load()
clearTimeout(mediaDisplayTimer)
mediaDisplayTimer = setTimeout(function(){
items
.filter(function(item) {
return item !== curAsset && item !== prevAsset && item !== nextAsset
})
.forEach(function(item) {
item.display = 'none'
})
}, 200)
Tween.defer(curAsset, transitionDuration, {translateX:0, alpha:1, ease:ease, onComplete:function(){
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
}
if(nextAsset) {
setTimeout(function() {
nextAsset.transition = 0
if(swipeDirection === 'left') nextAsset.translateX = STATE.mediaView.width()
nextAsset.display = 'block'
nextAsset.updateSpeed = 0
nextAsset.updatePosition()
if(!nextAsset.loaded) nextAsset.load()
Tween.defer(nextAsset, transitionDuration, {translateX:STATE.mediaView.width(), alpha:1, ease:ease});
}, 0)
}
}
transition.destroy = function destroy() {
// dummy
}
return transition;
}
var Caption = (function() {
function Caption() {
this._properties = {};
this.container = new Sprite();
var blendMode = (USER_AGENT === MOBILE || USER_AGENT === TABLET || !LAYOUT_MODEL.captionBlendMode) ? 'normal' : LAYOUT_MODEL.captionBlendMode
this.container.element.style['mix-blend-mode'] = blendMode
this.container.element.style['border-radius'] = '2px'
this.mask = new Sprite();
this.container.addChild(this.mask);
this.hide();
this.content = new Sprite();
this.mask.addChild(this.content);
this.mask.overflow = 'hidden';
this.container.selectable = true
this.content.selectable = true
this.mask.selectable = true
var self = this
this.closeBtn = makeCloseBtn(function() { self.hide() })
this.closeBtn.x = this.width - 9
this.closeBtn.y = -9
this.closeBtn.element.style.zIndex = 10
this.container.addChild(this.closeBtn)
if(!LAYOUT_MODEL.captionCloseButton) {
setTimeout(function() {
self.hideCloseButton()
}, 0)
}
}
function makeCloseBtn(action) {
var btn = new Svg()
btn.width = 18
btn.height = 18
btn.cursor = 'pointer'
var circ = new Circle()
circ.r = 9
circ.cx = 9
circ.cy = 9
circ.fill = LAYOUT_MODEL.captionBackgroundRectColor
circ.element.style.opacity = LAYOUT_MODEL.captionBackgroundAlpha
circ.stroke = 'none'
var icon = new Path()
icon.id = 'icon'
icon.d = 'M5,5l8,8 M5,13l8-8'
icon.strokeWidth = 1.5
icon.fill = 'none'
icon.stroke = LAYOUT_MODEL.captionFontColor
btn.addEventListener('click', action)
btn.addEventListener('mouseover', function(e){
if(btn.element.style.opacity != 0) {
btn.element.style.opacity = 0.75
}
})
btn.addEventListener('mouseout', function(e){
if(btn.element.style.opacity != 0) {
btn.element.style.opacity = 1
}
})
btn.addChild(circ)
btn.addChild(icon)
return btn
}
Caption.prototype = {
get text() {
return this._properties.text;
},
set text(value) {
this._properties.text = value;
this.content.text = value;
},
get backgroundColor() {
return this._properties.backgroundColor;
},
set backgroundColor(value) {
this._properties.backgroundColor = value;
this.container.backgroundColor = value;
},
hideCloseButton: function() {
this.closeBtn.element.style.pointerEvents = 'none'
this.closeBtn.alpha = 0
this.closeBtn.display = 'none'
},
showCloseButton: function() {
this.closeBtn.element.style.pointerEvents = 'auto'
this.closeBtn.alpha = 1
this.closeBtn.display = 'block'
},
get fontFamily() {
return this._properties.fontFamily;
},
set fontFamily(value) {
this._properties.fontFamily = value;
this.content.fontFamily = value;
},
get fontColor() {
return this._properties.fontColor;
},
set fontColor(value) {
this._properties.fontColor = value;
this.content.fontColor = value;
},
get fontSize() {
return this._properties.fontSize;
},
set fontSize(value) {
this._properties.fontSize = value;
this.content.fontSize = value;
},
get textAlign() {
return this._properties.textAlign;
},
set textAlign(value) {
this._properties.textAlign = value;
this.content.textAlign = value;
},
get paddingTop() {
return this._properties.paddingTop;
},
set paddingTop(value) {
this._properties.paddingTop = value;
this.content.paddingTop = value;
},
get paddingRight() {
return this._properties.paddingRight;
},
set paddingRight(value) {
this._properties.paddingRight = value;
this.content.paddingRight = value;
this.width = this._properties.width;
},
get paddingBottom() {
return this._properties.paddingBottom;
},
set paddingBottom(value) {
this._properties.paddingBottom = value;
this.content.paddingBottom = value;
},
get paddingLeft() {
return this._properties.paddingLeft;
},
set paddingLeft(value) {
this._properties.paddingLeft = value;
this.content.paddingLeft = value;
this.width = this._properties.width;
},
get width() {
return this._properties.width;
},
set width(value) {
this._properties.width = value;
if(this.closeBtn) {
this.closeBtn.x = value - 9
}
this.container.width = value;
this.mask.width = value;
this.content.width = value - (this._properties.paddingLeft + this._properties.paddingRight);
},
get height() {
return this._properties.height;
},
set height(value) {
this._properties.height = value;
this.container.height = value;
this.mask.height = value;
},
show:function show(cb) {
var thisCaption = this;
if(this.text) {
setTimeout(function() {
thisCaption.container.display = 'block';
Tween(thisCaption.container, 0.35, {alpha:1});
if(thisCaption.scroll) {
// changed this for git issue ** caption placement shifts down #1087
// dont know why the timeout was UPDATE_SPEED * 1000 before back from
// v12 release https://github.com/photofolio/designx/commit/82e4638e0f5bfdf7532d89a5f4230874e2565f80#diff-66a8f5645e99fa559db9b9922267e525
setTimeout(thisCaption.scroll.resize, 0);
}
if(typeof cb === 'function') cb()
}, LAYOUT_MODEL.transitionDuration * 1000);
}
},
hide:function hide() {
this.container.alpha = 0;
this.container.display = 'none';
},
buildScroll:function buildScroll(scrollVars) {
// not getting this.content.element.offsetHeight
// per this issue - caption text placement on initial load is off #1156
// https://github.com/photofolio/designx/issues/1156
// console.log(this._properties.height, this.content.element.offsetHeight)
if(isPod() || isPad()) {
this.mask.element.style.overflowY = 'scroll'
this.mask.element.style.overflowX = 'hidden'
this.mask.element.style['-webkit-overflow-scrolling'] = 'touch'
if(isPad()) {
switch(scrollVars.align) {
case 'top':
this.content.element.style.top = '0px'
this.content.element.style.bottom = ''
break;
case 'center':
this.content.element.style.top = (this._properties.height - this.content.element.offsetHeight) * 0.5 + 'px'
this.content.element.style.bottom = ''
break;
case 'bottom':
this.content.element.style.bottom = '0px'
this.content.element.style.top = ''
break;
}
}
} else if(LAYOUT_MODEL.captionScrollType === 'native') {
this.mask.element.style.overflowY = 'scroll'
this.mask.element.style.overflowX = 'hidden'
switch(scrollVars.align) {
case 'top':
this.content.element.style.top = '0px'
this.content.element.style.bottom = ''
break;
case 'center':
this.content.element.style.top = (this._properties.height - this.content.element.offsetHeight) * 0.5 + 'px'
this.content.element.style.bottom = ''
break;
case 'bottom':
this.content.element.style.bottom = '0px'
this.content.element.style.top = ''
break;
}
} else if(MAC_SCROLLBARS && (LAYOUT_MODEL.captionScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll)) {
this.mask.element.style.overflowY = 'scroll'
this.mask.element.style.overflowX = 'hidden'
switch(scrollVars.align) {
case 'top':
this.content.element.style.top = '0px'
this.content.element.style.bottom = ''
break;
case 'center':
this.content.element.style.top = (this._properties.height - this.content.element.offsetHeight) * 0.5 + 'px'
this.content.element.style.bottom = ''
break;
case 'bottom':
this.content.element.style.bottom = '0px'
this.content.element.style.top = ''
break;
}
} else {
if(this.scroll) this.scroll.destroy();
var scrollProps = {
types:['bar','wheel','touch'],
axis:'y',
align:scrollVars.align,
margin:0,
color:scrollVars.color,
hover:scrollVars.hover,
side:scrollVars.side,
alpha:scrollVars.alpha,
width:scrollVars.width,
offsetX:scrollVars.offsetX,
offsetY:scrollVars.offsetY,
property:'translate',
rounded: LAYOUT_MODEL.captionScrollbarRounded,
visibility: LAYOUT_MODEL.captionScrollbarVisibility,
zIndex:2
}
// if(LAYOUT_MODEL.pageScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll) {
if(/native/.test(STATE.overrides.captionScrollType) || LAYOUT_MODEL.globalSmoothScroll) {
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'right'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = -9
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
this.scroll = new Scroll(this.content, this.mask, scrollProps);
this.scroll.captionScroll = true;
}
}
};
return Caption;
})();
function ContactView(imports) {
var self = new Sprite({events:imports.events}),
formContainer = new Sprite(),
contactExtra = new Sprite(),
contactFields = new Sprite(),
responseMessage = new Sprite(),
contactFormObj,
contentHeight,
formHeight,
formFieldsArr,
contactLabel,
_thumbState,
_localEvents = imports.localEvents,
submit;
self.alpha = 0;
formContainer.alpha = 0;
formContainer.selectable = true
self.updateSpeed = 0;
self.id = imports.mediaItem.id;
self.type = imports.mediaItem.type;
self.dims = imports.size.content;
self.element.navigationCursor = true;
self.addEventListener(CHILD_ADDED, childAdded);
_localEvents.addEventListener(RESIZE, updatePosition);
_localEvents.addEventListener(LAYOUT_MODEL_CHANGE, updatePosition);
_localEvents.addEventListener('destroy', destroy);
_localEvents.addEventListener('showCursor', showCursor);
_localEvents.addEventListener('hideCursor', hideCursor);
function showCursor(e) {
self.element.navigationCursor = true;
}
function hideCursor(e) {
self.element.navigationCursor = false;
}
function childAdded(child) {
self.addChild(formContainer);
contactFormObj = imports.mediaItem.content;
formFieldsArr = csvToArray(contactFormObj.contactFormFields);
contactExtra.text = contactFormObj.contactFormExtra.replace(/\r\n/g, '
').replace(/\\r\\n/g, '
').replace(/\n\r/g, '
').replace(/\\n\\r/g, '
').replace(/\r/g, '
').replace(/\\r/g, '
').replace(/\n/g, '
').replace(/\\n/g, '
').replace(/\\/g, '');
contactExtra.selectable = true
contactExtra.setClass('dx_page_text ql-editor');
contactExtra.fontFamily = LAYOUT_MODEL.contactFont;
contactExtra.fontSize = LAYOUT_MODEL.contactFontSize;
contactExtra.fontColor = LAYOUT_MODEL.contactFontColor;
contactExtra.textAlign = 'right';
contactExtra.textWrap = false;
formContainer.addChild(contactExtra);
formContainer.addChild(contactFields);
var contactImgs = formContainer.element.getElementsByTagName('img'),
i = contactImgs.length;
if(contactImgs.length > 0) {
while(i--) {
var img = contactImgs[i];
img.addEventListener(LOAD, function(e) {
updatePosition();
});
}
}
if(contactExtra.width > 320) {
contactExtra.width = 320;
contactExtra.textWrap = true;
contactExtra.style['word-wrap'] = 'break-word';
}
var i = 0,
length = formFieldsArr.length,
fieldY = 0;
for(;i < length; i++) {
var input = buildFormInput(formFieldsArr[i]);
input.x = 16;
input.y = fieldY;
contactFields.addChild(input);
fieldY += formFieldsArr[i] === 'Comments' ? 180 : 50;
}
submit = new Button();
submit.text = 'Submit';
submit.x = 16;
submit.y = fieldY + 5;
submit.fontSize = 12;
submit.fontColor = LAYOUT_MODEL.contactFontColor;
submit.backgroundColor = LAYOUT_MODEL.contactFieldRectColor;
submit.paddingTop = 2;
submit.paddingRight = 14;
submit.paddingBottom = 2;
submit.paddingLeft = 14;
submit.selectable = false
contactFields.addChild(submit);
submit.addEventListener(FOCUS, onFocusSubmit);
submit.addEventListener(BLUR, onBlurSubmit);
submit.addEventListener(MOUSE_OVER, onFocusSubmit);
submit.addEventListener(MOUSE_OUT, onBlurSubmit);
submit.addEventListener(CLICK, onSubmit);
_localEvents.addEventListener('destroy', destroy);
function destroy(e) {
_localEvents.removeEventListener('destroy', destroy);
submit.removeEventListener(FOCUS, onFocusSubmit);
submit.removeEventListener(BLUR, onBlurSubmit);
submit.removeEventListener(MOUSE_OVER, onFocusSubmit);
submit.removeEventListener(MOUSE_OUT, onBlurSubmit);
submit.removeEventListener(CLICK, onSubmit);
}
fieldY += 25;
contactFields.width = 318;
contactFields.height = fieldY;
contactFields.borderLeft = '1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.3);
if(LAYOUT_MODEL.contactTitleShow) {
contactLabel = new TextField();
contactLabel.text = imports.mediaItem.label;
formContainer.addChild(contactLabel);
contactLabel.fontFamily = LAYOUT_MODEL.contactTitleFont;
contactLabel.fontSize = LAYOUT_MODEL.contactTitleFontSize;
contactLabel.fontColor = LAYOUT_MODEL.contactFontColor;
contactLabel.textWrap = false;
contactLabel.selectable = false
contactLabel.x = contactExtra.width + 16;
contactLabel.y = percentToPixels(LAYOUT_MODEL.contactTitleFontSize, 100) - 33;
}
formContainer.width = contactExtra.width + contactFields.width;
responseMessage.alpha = 0;
responseMessage.x = contactExtra.width + 17;
responseMessage.y = 44;
responseMessage.fontSize = 14;
formContainer.addChild(responseMessage);
_localEvents.addEventListener(CONTACT_FORM_SENT, contactResponse);
updateStyle()
updatePosition()
}
function getContactHeight() {
// var topMargin = percentToPixels(STATE.overrides.pageMarginTop, stage.height);
// var btmMargin = percentToPixels(STATE.overrides.pageMarginBottom, stage.height);
var topMargin = 0;
var btmMargin = 0;
// formHeight = 22;
formHeight = topMargin;
if(LAYOUT_MODEL.contactTitleShow) {
formHeight += contactLabel.height;
}
if(isVerticalPageBuild()) {
formHeight += contactExtra.element.offsetHeight + contactFields.height + 16;
formHeight += submit.height + 5 + btmMargin;
} else if(contactExtra.element.offsetHeight > contactFields.height) {
formHeight += contactExtra.element.offsetHeight + btmMargin;
} else {
formHeight += contactFields.height;
formHeight += submit.height + 5 + btmMargin;
}
formContainer.height = formHeight;
}
function updateScroll() {
if(USER_AGENT === MOBILE || USER_AGENT === TABLET) {
self.element.style.overflowY = 'scroll'
self.element.style.overflowX = 'hidden'
self.element.style['-webkit-overflow-scrolling'] = 'touch'
} else if(LAYOUT_MODEL.unifiedPageScrolling && /vScroll/.test(STATE.overrides.transitionType)) {
setTimeout(function() {
getContactHeight()
var contentHeight = formHeight
contentHeight = contentHeight > STATE.mediaView.height() ? contentHeight : STATE.mediaView.height()
self.contentHeight = contentHeight
self.height = contentHeight
_localEvents.dispatchEvent('MEDIA_HEIGHT_CHANGE');
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}, 30);
} else {
if(LAYOUT_MODEL.pageScrollType === 'native') {
self.element.style.overflowY = 'scroll'
self.element.style.overflowX = 'hidden'
} else if(OS === 'Macintosh' && LAYOUT_MODEL.pageScrollType === 'nativeMacOs') {
self.element.style.overflowY = 'scroll'
self.element.style.overflowX = 'hidden'
} else {
if(self.scroll) {
self.scroll.destroy();
}
var scrollBarWidth = LAYOUT_MODEL.pageScrollbarWidth;
var scrollBarOffsetXDevice = USER_AGENT === MOBILE ? -(scrollBarWidth + 5) : LAYOUT_MODEL.pageScrollbarHorizontalOffset;
var scrollBarOffsetX = LAYOUT_MODEL.pageScrollbarAlignment === 'right' ? -scrollBarOffsetXDevice - scrollBarWidth : scrollBarOffsetXDevice + scrollBarWidth;
var scrollProps = {
name:'text page',
types:['bar','wheel','touch'],
axis:'y',
align:'top',
margin:LAYOUT_MODEL.pageScrollVerticalMargin,
color:LAYOUT_MODEL.pageScrollbarColor,
hover:LAYOUT_MODEL.pageScrollbarHover,
side:LAYOUT_MODEL.pageScrollbarAlignment,
alpha:LAYOUT_MODEL.pageScrollbarBgAlpha,
width:scrollBarWidth,
offsetX:scrollBarOffsetX,
offsetY:LAYOUT_MODEL.pageScrollbarVerticalOffset,
property:'translate',
rounded: LAYOUT_MODEL.pageScrollbarRounded,
visibility: LAYOUT_MODEL.pageScrollbarVisibility,
scrollTopCheck:true,
parent:self
}
if(LAYOUT_MODEL.pageScrollType === 'nativeMacOs') {
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'right'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = 0
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
self.scroll = new Scroll(formContainer, self, scrollProps);
self.scroll.addEventListener('WINDOW_SCROLL_TOP', function(){
self.scroll.percent = 0;
self.scroll.update(UPDATE_SPEED);
});
}
}
}
function buildFormInput(label) {
var holder = new Sprite();
holder.width = 300;
var title = new TextField();
title.fontFamily = LAYOUT_MODEL.contactTitleFont;
title.fontColor = LAYOUT_MODEL.contactFontColor;
title.fontSize = 11;
title.text = label;
title.selectable = false
holder.addChild(title);
var input = label === 'Comments' ? new TextArea() : new Input();
input.backgroundColor = toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.1);
input.border = '1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.3);
input.fontFamily = LAYOUT_MODEL.contactTitleFont;
input.fontColor = LAYOUT_MODEL.contactFontColor;
input.fontSize = 16;
input.height = label === 'Comments' ? 150 : 20;
input.width = 300;
input.y = 17;
input.addEventListener(FOCUS, onFocus);
input.addEventListener(BLUR, onBlur);
_localEvents.addEventListener('destroy', destroy);
function destroy(e) {
_localEvents.removeEventListener('destroy', destroy);
input.removeEventListener(FOCUS, onFocus);
input.removeEventListener(BLUR, onBlur);
}
holder.addChild(input);
holder.id = label;
holder.input = input;
return holder;
}
function onFocus(e) {
// not sure if this is needed anymore
// for resetting scroll on contact form input
// if(USER_AGENT === MOBILE || USER_AGENT === TABLET) {
// window.scrollTo(0, 0)
// }
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.2), border:'1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.7)});
}
function onBlur(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.1), border:'1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.3)});
}
function onFocusSubmit(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.8)});
}
function onBlurSubmit(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(LAYOUT_MODEL.contactFieldRectColor, 1)});
}
function contactResponse(e) {
responseMessage.text = e.response;
Tween(contactFields, UPDATE_SPEED, {alpha:0, onComplete:function(e){
contactFields.display = 'none';
}});
Tween(responseMessage, UPDATE_SPEED, {alpha:1});
}
function onSubmit(e) {
var mediaItem = MEDIA_MODEL[self.id]
var fields = [].slice.apply(contactFields.children)
.filter(function(val) {
return val.id
})
.reduce(function(emailObj, fieldSprite) {
if(emailObj) {
emailObj[fieldSprite.id] = fieldSprite.input.value || ''
if(fieldSprite.id === 'Name' && fieldSprite.input.value === '') {
alert('Name field cannot be blank.');
return false;
} else if(fieldSprite.id === 'Email' && (fieldSprite.input.value.indexOf("@") === -1 || fieldSprite.input.value.indexOf(".") === -1)) {
alert('Please enter valid email address.');
return false;
} else if(fieldSprite.id === 'Comments' && fieldSprite.input.value === '') {
alert('Comments field cannot be blank.');
return false;
}
}
return emailObj
}, {})
fields.Title = mediaItem.label
fields.toEmail = mediaItem.content.contactFormEmail
fields.subject = mediaItem.content.contactFormSubject
if(fields) _localEvents.dispatchEvent(CONTACT_FORM_SUBMIT, fields);
}
function updateStyle(e) {
Tween(self, self.updateSpeed, {backgroundColor:STATE.mediaView.backgroundColor()});
}
self.load = function load() {
self.loaded = true;
};
self.unload = function unload() {
};
self.show = function() {
self.display = 'block';
Tween(self, UPDATE_SPEED, {alpha:1});
};
self.hide = function() {
Tween(self, UPDATE_SPEED, {alpha:0,onComplete:function() {
self.display = 'none';
}});
};
function isVerticalPageBuild() {
if(USER_AGENT === MOBILE) return true;
if(formContainer.width + 16 > STATE.mediaView.width()) return true
return false;
}
function updatePosition(e) {
layoutCalcs.activeMediaType = self.type;
formContainer.width = contactExtra.width + contactFields.width + 18;
if(isVerticalPageBuild()) {
contactExtra.x = 8;
contactFields.x = -8;
if(LAYOUT_MODEL.contactTitleShow) {
contactLabel.x = 8;
contactLabel.y = percentToPixels(LAYOUT_MODEL.contactTitleFontSize, 100);
contactExtra.y = contactLabel.y + percentToPixels(LAYOUT_MODEL.contactTitleFontSize, 100) + 16;
contactFields.y = contactExtra.y + contactExtra.height + 16;
} else {
contactExtra.y = 0;
contactFields.y = contactExtra.height;
}
if(self.scroll) self.scroll.align = 'top';
contactFields.borderLeft = '1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0);
contactExtra.textAlign = 'left';
} else {
contactExtra.x = 0;
contactExtra.y = 0;
contactFields.x = contactExtra.width + 16;
contactFields.y = 44;
contactFields.borderLeft = '1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.3);
contactExtra.textAlign = 'right';
if(LAYOUT_MODEL.contactTitleShow) {
contactLabel.textWrap = true;
contactLabel.x = contactExtra.width + 32;
contactLabel.y = percentToPixels(LAYOUT_MODEL.contactTitleFontSize, 100) - 33;
}
// #990 - scroll.align = 'center' was pushing form to bottom of screen
if(self.scroll) self.scroll.align = 'top';
}
if(!contactFormObj.contactFormExtra) {
if(self.scroll) self.scroll.align = 'top';
contactFields.borderLeft = '1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0);
contactFields.x = -8;
contactLabel.x = 8;
}
formContainer.transition = 0;
getContactHeight()
Tween.defer(formContainer, self.updateSpeed, {x:getFormX(), y:getFormY(), onComplete:function(){
if(self.scroll) self.scroll.resize();
Tween(formContainer, UPDATE_SPEED, {alpha:1});
}});
self.updateSpeed = UPDATE_SPEED;
isInit = false;
updateScroll()
}
self.updatePosition = updatePosition
function getFormX() {
layoutCalcs._activeView = 'contact';
if(formContainer.width + 16 > STATE.mediaView.width()) {
var left = Math.round((STATE.mediaView.width() - contactFields.width) * 0.5)
return left;
} else {
var left = Math.round((STATE.mediaView.width() - formContainer.width) * 0.5)
return left;
}
}
function getFormY() {
layoutCalcs._activeView = 'contact';
if(formHeight > STATE.mediaView.height()) {
if(USER_AGENT === MOBILE || USER_AGENT === TABLET) {
return 40
} else {
return 22
}
} else {
return Math.round((STATE.mediaView.height() - formHeight) * 0.5);
}
}
function destroy(e) {
_localEvents.removeEventListener(RESIZE, updatePosition);
_localEvents.removeEventListener(LAYOUT_MODEL_CHANGE, updatePosition);
_localEvents.removeEventListener('destroy', destroy);
_localEvents.removeEventListener('showCursor', showCursor);
_localEvents.removeEventListener('hideCursor', hideCursor);
_localEvents.removeEventListener(CONTACT_FORM_SENT, contactResponse);
self.removeEventListener(CHILD_ADDED, childAdded);
}
return self;
}
function ImageView(imports) {
var self = new Sprite({events:imports.localEvents});
self.alpha = 0;
self.updateSpeed = 0;
self.overflow = 'hidden';
self.id = imports.mediaItem.id;
self.type = imports.mediaItem.type;
self.dims = imports.size.content;
self.element.navigationCursor = true;
var image = new Bitmap(),
mask = new Sprite(),
caption,
loader,
originalImageWidth = imports.size.content.width,
originalImageHeight = imports.size.content.height,
imageWidth = 0,
imageHeight = 0,
imageX = 0,
imageY = 0,
maskWidth = 0,
maskHeight = 0,
loaded = false,
_thumbState,
_captionLocal,
_localEvents = imports.localEvents;
image.alpha = 0;
image.selectable = false;
mask.overflow = 'hidden';
_localEvents.addEventListener(RESIZE, updatePosition);
_localEvents.addEventListener(LAYOUT_MODEL_CHANGE, updatePosition);
_localEvents.addEventListener('destroy', destroy);
_localEvents.addEventListener('showCursor', showCursor);
_localEvents.addEventListener('hideCursor', hideCursor);
self.addEventListener(CHILD_ADDED, childAdded);
function childAdded(child) {
image.element.navigationCursor = true;
mask.element.navigationCursor = true;
image.element.addEventListener('contextmenu', disable);
image.element.addEventListener('dragstart', disable);
self.element.style['user-select'] = 'none'
mask.element.style['user-select'] = 'none'
image.element.style['user-select'] = 'none'
self.addChild(mask);
mask.addChild(image);
if(STATE.overrides.imageVideoLoaderType === 'spinner') {
loader = new LoadingIndicator({color:imports.loaderColor});
mask.addChild(loader);
}
updateStyle();
updatePosition();
}
function disable(e) {
var disableRightClick = SETTINGS_MODEL.disableRightClick === undefined || SETTINGS_MODEL.disableRightClick
if(disableRightClick) {
e.preventDefault();
}
}
function showCursor(e) {
self.element.navigationCursor = true;
image.element.navigationCursor = true;
mask.element.navigationCursor = true;
}
function hideCursor(e) {
self.element.navigationCursor = false;
image.element.navigationCursor = false;
mask.element.navigationCursor = false;
}
function updateStyle(e) {
if(image && LAYOUT_MODEL.imageRendering.optimizeQuality) image.style['image-rendering'] = 'optimizeQuality';
if(image && LAYOUT_MODEL.imageRendering.webkitOptimizeContrast) image.style['image-rendering'] = '-webkit-optimize-contrast';
if(image && BROWSER_NAME === 'Safari' && LAYOUT_MODEL.imageRendering.webkitBackfaceVisibility) image.element.style['-webkit-backface-visibility'] = 'hidden';
if(image && USER_AGENT === MOBILE) image.element.style['-webkit-backface-visibility'] = 'hidden';
if(USER_AGENT === MOBILE) {
Tween(self, self.updateSpeed, {backgroundColor:LAYOUT_MODEL.containerColorMobile || STATE.mediaView.backgroundColor()});
} else if(USER_AGENT === TABLET) {
Tween(self, self.updateSpeed, {backgroundColor:LAYOUT_MODEL.containerColorTablet || STATE.mediaView.backgroundColor()});
} else {
Tween(self, self.updateSpeed, {backgroundColor:STATE.mediaView.backgroundColor()});
}
if(caption) setTimeout(updateCaptionStyle, self.updateSpeed * 1000);
}
function updateCaptionStyle(e) {
caption.container.transition = 0;
if(firstValid(_captionLocal.captionCloseButton, STATE.overrides.captionCloseButton)) {
caption.showCloseButton()
} else {
caption.hideCloseButton()
}
var alignVars = {
onInit:function() {
if(caption.scroll) {
caption.scroll.hide();
}
},
onComplete:function() {
if(caption.scroll) {
caption.scroll.show();
caption.scroll.resize();
}
}
};
var bgColor = _captionLocal.captionBackgroundRectColor || STATE.overrides.captionBackgroundRectColor;
var bgAlpha = firstValid(_captionLocal.captionBackgroundAlpha, STATE.overrides.captionBackgroundAlpha);
caption.backgroundColor = toRgba(bgColor, bgAlpha);
caption.fontFamily = _captionLocal.captionFont || STATE.overrides.captionFont;
caption.fontSize = firstValid(_captionLocal.captionFontSize, STATE.overrides.captionFontSize);
caption.fontColor = _captionLocal.captionFontColor || STATE.overrides.captionFontColor;
if(firstValid(_captionLocal.captionAutoPosition, STATE.overrides.captionAutoPosition) !== false) {
var padding = 10;
var captionText = getCaptionText(imports.mediaItem)
layoutCalcs.captionView.size(captionText);
caption.width = layoutCalcs.captionView.width + (padding * 2);
caption.height = layoutCalcs.captionView.height + (padding * 2);
alignVars.width = layoutCalcs.captionView.width + (padding * 2);
alignVars.height = layoutCalcs.captionView.height + (padding * 2);
alignVars.hRange = self.width;
alignVars.vRange = self.height;
alignVars.hAlign = 'center';
alignVars.vAlign = 'bottom';
alignVars.hOffset = 0;
alignVars.vOffset = 33;
caption.textAlign = 'center';
caption.paddingTop = padding;
caption.paddingRight = 0;
caption.paddingBottom = padding;
caption.paddingLeft = 0;
caption.buildScroll({
color:STATE.overrides.captionScrollbarColor,
hover:STATE.overrides.captionScrollbarHover,
align:STATE.overrides.captionTextAlignVertical,
side:STATE.overrides.captionScrollbarAlignment,
alpha:STATE.overrides.captionScrollbarBgAlpha,
width:STATE.overrides.captionScrollbarWidth,
offsetX:STATE.overrides.captionScrollbarHorizontalOffset,
offsetY:STATE.overrides.captionScrollbarVerticalOffset
});
} else {
caption.width = firstValid(_captionLocal.captionWidth, STATE.overrides.captionWidth);
caption.height = firstValid(_captionLocal.captionHeight, STATE.overrides.captionHeight);
alignVars.width = firstValid(_captionLocal.captionWidth, STATE.overrides.captionWidth);
alignVars.height = firstValid(_captionLocal.captionHeight, STATE.overrides.captionHeight);
if(_captionLocal.captionAnchorTo === 'media item' || STATE.overrides.captionAnchorTo === 'media item' || /^hScroll/.test(STATE.overrides.transitionType)) {
alignVars.hOrigin = STATE.mediaView.maskX() + imageX;
alignVars.vOrigin = STATE.mediaView.maskY() + imageY;
alignVars.hRange = imageWidth;
alignVars.vRange = imageHeight;
} else if(_captionLocal.captionAnchorTo === 'media area' || STATE.overrides.captionAnchorTo === 'media area') {
alignVars.hOrigin = 0;
alignVars.vOrigin = 0;
alignVars.hRange = layoutCalcs.mediaView.width();
alignVars.vRange = layoutCalcs.mediaView.height();
}
alignVars.hAlign = _captionLocal.captionAlignHorizontal || STATE.overrides.captionAlignHorizontal;
alignVars.vAlign = _captionLocal.captionAlignVertical || STATE.overrides.captionAlignVertical;
alignVars.hOffset = firstValid(_captionLocal.captionOffsetX, STATE.overrides.captionOffsetX);
alignVars.vOffset = firstValid(_captionLocal.captionOffsetY, STATE.overrides.captionOffsetY);
caption.textAlign = _captionLocal.captionTextAlign || STATE.overrides.captionTextAlign;
caption.paddingTop = firstValid(_captionLocal.captionPaddingTop, STATE.overrides.captionPaddingTop);
caption.paddingRight = firstValid(_captionLocal.captionPaddingRight, STATE.overrides.captionPaddingRight);
caption.paddingBottom = firstValid(_captionLocal.captionPaddingBottom, STATE.overrides.captionPaddingBottom);
caption.paddingLeft = firstValid(_captionLocal.captionPaddingLeft, STATE.overrides.captionPaddingLeft);
caption.buildScroll({
color:_captionLocal.captionScrollbarColor || STATE.overrides.captionScrollbarColor,
hover:_captionLocal.captionScrollbarHover || STATE.overrides.captionScrollbarHover,
align:_captionLocal.captionTextAlignVertical || STATE.overrides.captionTextAlignVertical,
side:_captionLocal.captionScrollbarAlignment || STATE.overrides.captionScrollbarAlignment,
alpha:firstValid(_captionLocal.captionScrollbarBgAlpha, STATE.overrides.captionScrollbarBgAlpha),
width:firstValid(_captionLocal.captionScrollbarWidth, STATE.overrides.captionScrollbarWidth),
offsetX:firstValid(_captionLocal.captionScrollbarHorizontalOffset, STATE.overrides.captionScrollbarHorizontalOffset),
offsetY:firstValid(_captionLocal.captionScrollbarVerticalOffset, STATE.overrides.captionScrollbarVerticalOffset)
});
}
Align(caption.container, 0, alignVars);
}
function checkCaptionOnScrollStop(e) {
var mediaToRender = removeLinksFromMedia(e.section.mediaItems);
var mediaItem = imports.mediaItem;
var anchorTo = firstValid(mediaItem.overrides.captionAnchorTo, STATE.overrides.captionAnchorTo);
var captionDefault = firstValid(mediaItem.overrides.captionDefault, STATE.overrides.captionDefault);
if((captionDefault || e.mode.indexOf('caption') > -1) && USER_AGENT !== MOBILE && mediaItem.caption && anchorTo !== 'site') {
caption.show(updateCaptionStyle);
} else {
caption.text = '';
caption.hide();
if(caption.scroll) caption.scroll.destroy();
}
}
function updateCaptionText(e) {
if(/media/.test(_captionLocal.captionAnchorTo) || /media/.test(STATE.overrides.captionAnchorTo)) {
caption.text = plainTextToHtml(e);
} else {
caption.hide();
if(caption.scroll) caption.scroll.destroy();
}
}
function showCaption() {
var anchorTo = firstValid(imports.mediaItem.overrides.captionAnchorTo, STATE.overrides.captionAnchorTo);
var captionText = getCaptionText(imports.mediaItem)
if(!captionText) caption.text = plainTextToHtml(captionText);
// bug #756
// if(anchorTo !== 'site') caption.show();
if(anchorTo === 'media area' || (anchorTo === 'media item' && loaded)) {
caption.show(updateCaptionStyle);
}
}
function hideCaption() {
caption.hide();
// if(caption.scroll) caption.scroll.destroy();
}
self.load = function load() {
self.loaded = true;
// if(USER_AGENT === MOBILE) {
// image.src = getThumbQuery(1000, 1000, imports.mediaItem.content, imports.mediaItem.demoFile);
// } else {
image.addEventListener(LOAD, imageLoaded);
image.src = cdnMediaPath(imports.mediaItem.content, imports.mediaItem.demoFile);
// }
var captionText = getCaptionText(imports.mediaItem)
if(!caption && captionText !== '') {
caption = new Caption();
self.addChild(caption.container);
_captionLocal = imports.mediaItem.overrides || {};
_localEvents.addEventListener('showCaption', showCaption);
_localEvents.addEventListener('hideCaption', hideCaption);
_localEvents.addEventListener('checkCaption', checkCaptionOnScrollStop);
updateCaptionText(captionText);
// bug #756
// if(STATE.uri.mode.indexOf('caption') > -1) caption.show();
}
};
self.unload = function unload() {
};
self.hide = function() {
if(self.alpha === 1) {
Tween(self, UPDATE_SPEED, {alpha:0, onComplete:function(){
self.display = 'none';
}});
}
};
self.show = function() {
if(self.alpha === 0) {
self.display = 'block';
Tween(self, UPDATE_SPEED, {alpha:1});
}
};
function updatePosition(e) {
layoutCalcs.activeMediaType = self.type;
maskWidth = STATE.mediaView.maskWidth(self.width);
maskHeight = STATE.mediaView.maskHeight(self.height);
Tween(mask, self.updateSpeed, {x:STATE.mediaView.maskX(), y:STATE.mediaView.maskY(), width:maskWidth, height:maskHeight});
positionLoader();
if(loaded) resizeImage();
if(caption) updateCaptionStyle();
}
self.updatePosition = updatePosition
function imageLoaded(e) {
self.updateSpeed = 0;
loaded = true;
if(this.width && originalImageWidth !== this.width) originalImageWidth = this.width;
if(this.height && originalImageHeight !== this.height) originalImageHeight = this.height;
if(loader) {
loader.removeLoader();
mask.removeChild(loader);
}
updatePosition();
var anchorTo = firstValid(imports.mediaItem.overrides.captionAnchorTo, STATE.overrides.captionAnchorTo);
// bug #756
// added !isLandingMedia bug #787
if(loaded && (anchorTo === 'media area' || anchorTo === 'media item')) {
if(caption && STATE.uri.mode.indexOf('caption') > -1 && !layoutCalcs.isLandingMedia) {
caption.show(updateCaptionStyle);
}
}
self.dispatchEvent(MEDIA_LOADED, {type:'image', id:imports.mediaItem.id, width:this.width, height:this.height});
self.events.dispatchEvent(MEDIA_LOADED, {type:'image', id:imports.mediaItem.id, width:this.width, height:this.height});
self.updateSpeed = UPDATE_SPEED;
if(BROWSER_NAME === 'Safari' && /hScroll/.test(STATE.overrides.transitionType)) {
// image.element.setAttribute('data-pin-no-hover', true)
image.element.setAttribute('nopin', 'nopin')
}
}
function resizeImage() {
var resize = Resize(null, 0, {
type:STATE.mediaView.imageScaleType(),
width:originalImageWidth,
height:originalImageHeight,
hRange:maskWidth,
vRange:maskHeight,
hAlign:STATE.mediaView.hAlign(),
vAlign:STATE.mediaView.vAlign(),
disableOrientationCheck: !!(USER_AGENT === MOBILE && LAYOUT_MODEL.landingMediaScaleTypeMobile) || !!(USER_AGENT === TABLET && LAYOUT_MODEL.landingMediaScaleTypeTablet)
});
imageWidth = Math.ceil(resize.scale.width);
imageHeight = Math.ceil(resize.scale.height);
imageX = Math.floor(resize.align.x);
imageY = Math.floor(resize.align.y);
Tween(image, self.updateSpeed, {
x: imageX,
y: imageY,
width: imageWidth,
height: imageHeight,
onComplete:function(){
setTimeout(function(){
Tween(image, STATE.mediaView.transitionDuration(), {alpha:1, ease:'cubic-bezier(0.7, 0, 0.3, 1)'});
}, 0);
}
});
if(caption) updateCaptionStyle();
}
function positionLoader() {
if(loader) {
loader.x = (maskWidth - loader.width) * 0.5;
loader.y = (maskHeight - loader.height) * 0.5;
}
}
function destroy(e) {
_localEvents.removeEventListener('destroy', destroy);
_localEvents.removeEventListener(RESIZE, updatePosition);
_localEvents.removeEventListener(LAYOUT_MODEL_CHANGE, updatePosition);
_localEvents.removeEventListener('showCursor', showCursor);
_localEvents.removeEventListener('hideCursor', hideCursor);
image.removeEventListener(LOAD, imageLoaded);
self.removeEventListener(CHILD_ADDED, childAdded);
}
return self;
}
function PageView(imports) {
var self = new Sprite({events:imports.events}),
text = new Sprite(),
image,
mask = new Sprite(),
loader,
originalImageWidth = imports.size.featuredImage.width || 0,
originalImageHeight = imports.size.featuredImage.height || 0,
imageGap = 30,
maskWidth = 0,
maskHeight = 0,
loaded = false,
isVerticalPage = isVerticalPageBuild(),
_thumbState,
_localEvents = imports.localEvents,
pageImgs,
responsiveWidthElements,
responsiveElements;
self.alpha = 0;
text.alpha = 0;
self.updateSpeed = 0;
self.setClass('dx_page_text');
text.setClass('ql-editor');
self.id = imports.mediaItem.id;
self.type = imports.mediaItem.type;
self.dims = imports.size.content;
self.element.navigationCursor = true;
mask.overflow = 'hidden'
text.selectable = true
self.selectable = true
mask.selectable = true
text.selectable = true
_localEvents.addEventListener(RESIZE, updatePosition);
_localEvents.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
_localEvents.addEventListener('destroy', destroy);
_localEvents.addEventListener('showCursor', showCursor);
_localEvents.addEventListener('hideCursor', hideCursor);
self.addEventListener(CHILD_ADDED, childAdded);
function showCursor(e) {
self.element.navigationCursor = true;
if(image) image.element.navigationCursor = true;
mask.element.navigationCursor = true;
}
function hideCursor(e) {
self.element.navigationCursor = false;
if(image) image.element.navigationCursor = false;
mask.element.navigationCursor = false;
}
function layoutModelChange(e) {
if(/page|imageRendering/.test(e.id)) {
updateStyle();
updatePosition();
}
}
function init() {
imports.mediaItem.content = unescapeScriptTags(imports.mediaItem.content)
self.loaded = false
var retinaSize = RetinaResizeEngine({width:originalImageWidth, height:originalImageHeight, filename:imports.mediaItem.featuredImage});
originalImageWidth = Math.round(retinaSize.width)
originalImageHeight = Math.round(retinaSize.height)
if(hasFeaturedImage() && !isVerticalPageBuild()) {
image = new Bitmap();
image.dataSrc = cdnMediaPath(imports.mediaItem.featuredImage, imports.mediaItem.demoFile)
image.element.navigationCursor = true;
mask.element.navigationCursor = true;
image.addEventListener(LOAD, imageLoaded);
image.alpha = 0;
self.addChild(image);
} else {
self.events.dispatchEvent(MEDIA_LOADED, {});
setTimeout(function(){
self.updateSpeed = STATE.mediaView.transitionDuration();
}, 0);
}
var textContent = "";
if(isValidPageTitle()) {
var fontProps = STATE.overrides.pageTitleFont.split(':')
var fontName = fontProps[0]
var fontWeight = fontProps[1]
var titleFontSize = percentToPixels(STATE.overrides.pageTitleFontSize, 22);
textContent += "" + imports.mediaItem.label + "
";
}
// if(imports.isBlog && imports.mediaItem.postDate) {
// var fontProps = STATE.overrides.pageTitleFont.split(':')
// var fontName = fontProps[0]
// var fontWeight = fontProps[1]
// var titleFontSize = percentToPixels(STATE.overrides.pageTitleFontSize, 22);
// text.text += "" + new Date(imports.mediaItem.postDate).toLocaleString() + "
";
// }
isVerticalPage = isVerticalPageBuild()
if(isVerticalPageBuild() && hasFeaturedImage()) {
textContent += " + ")
";
}
textContent += plainTextToHtml(imports.mediaItem.content);
// do this on self.load or something
// loadPageImages()
// before inserting into mask - collect all imgs
// unset the src and attach src value to data-src='...'
// find and replace src= with data-src=
text.text = textContent.replace(/src\=/g, 'data-src=')
mask.addChild(text);
self.addChild(mask);
responsiveElements = text.element.getElementsByClassName('responsive');
responsiveWidthElements = text.element.getElementsByClassName('responsive-width');
}
function childAdded(child) {
init()
updateStyle()
updatePosition()
}
function loadPageImages() {
/*this is to prevent page images from being cropped when browser is small*/
// must be converted to Array from NodeList for IE/Edge
pageImgs = Array.prototype.slice.apply(text.element.getElementsByTagName('img'))
var pageIframes = Array.prototype.slice.apply(text.element.getElementsByTagName('iframe'))
pageImgs = pageImgs.concat(pageIframes)
var pageInputs = Array.prototype.slice.apply(text.element.getElementsByTagName('input'))
pageImgs = pageImgs.concat(pageInputs)
var i = pageImgs.length;
if(i > 0) {
while(i--) {
(function(img) {
var src = img.getAttribute('data-src')
img.addEventListener(LOAD, function(e) {
setTimeout(function() {
if(img.width) img.originalWidth = img.width
updatePosition()
}, 100)
});
img.src = src
}(pageImgs[i]))
}
}
}
var debounceTimer
var heightUpdateRequired
function updateScroll() {
if(USER_AGENT === MOBILE || USER_AGENT === TABLET) {
mask.element.style.overflowY = 'scroll'
mask.element.style.overflowX = 'hidden'
mask.element.style['-webkit-overflow-scrolling'] = 'touch'
Tween.defer(text, UPDATE_SPEED, {alpha:1});
clearTimeout(debounceTimer)
debounceTimer = setTimeout(function() {
var topMargin = percentToPixels(STATE.overrides.pageMarginTop, stage.height);
var btmMargin = percentToPixels(STATE.overrides.pageMarginBottom, stage.height);
var contentHeight = topMargin + text.element.offsetHeight + btmMargin
// contentHeight = contentHeight > STATE.mediaView.height() ? contentHeight : STATE.mediaView.height()
heightUpdateRequired = contentHeight !== self.contentHeight
self.contentHeight = contentHeight
mask.height = contentHeight //text.element.offsetHeight
self.height = contentHeight
if(text.element.offsetHeight <= mask.element.offsetHeight) {
// the overflow scroll was causing strange touch bounce issue on mobile
// Built-in Blog Scroll Issue on Mobile #1204
mask.element.style.overflowX = 'hidden'
mask.element.style.overflowY = 'hidden'
}
if(heightUpdateRequired) {
// filtering here due to infinite loop for sites not
// set to vertical scroll transition
// not sure why yet
_localEvents.dispatchEvent('MEDIA_HEIGHT_CHANGE');
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
Tween.defer(text, UPDATE_SPEED, {alpha:1});
}, 20);
} else if(LAYOUT_MODEL.unifiedPageScrolling && /vScroll/.test(STATE.overrides.transitionType)) {
clearTimeout(debounceTimer)
debounceTimer = setTimeout(function() {
var topMargin = percentToPixels(STATE.overrides.pageMarginTop, stage.height);
var btmMargin = percentToPixels(STATE.overrides.pageMarginBottom, stage.height);
var contentHeight = topMargin + text.element.offsetHeight + btmMargin
// contentHeight = contentHeight > STATE.mediaView.height() ? contentHeight : STATE.mediaView.height()
heightUpdateRequired = contentHeight !== self.contentHeight
self.contentHeight = contentHeight
mask.height = contentHeight //text.element.offsetHeight
self.height = contentHeight
if(heightUpdateRequired) {
_localEvents.dispatchEvent('MEDIA_HEIGHT_CHANGE');
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT');
}
Tween.defer(text, UPDATE_SPEED, {alpha:1});
}, 20);
} else {
if(STATE.overrides.pageScrollType === 'native') {
mask.element.style.overflowY = 'scroll'
mask.element.style.overflowX = 'hidden'
Tween.defer(text, UPDATE_SPEED, {alpha:1});
} else if(MAC_SCROLLBARS && (STATE.overrides.pageScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll)) {
mask.element.style.overflowY = 'scroll'
mask.element.style.overflowX = 'hidden'
Tween.defer(text, UPDATE_SPEED, {alpha:1});
} else {
if(self.scroll) {
self.scroll.destroy();
}
var scrollBarWidth = STATE.overrides.pageScrollbarWidth;
var scrollBarOffsetXDevice = USER_AGENT === MOBILE ? -(scrollBarWidth + 5) : STATE.overrides.pageScrollbarHorizontalOffset;
var scrollBarOffsetX = STATE.overrides.pageScrollbarAlignment === 'right' ? -scrollBarOffsetXDevice - scrollBarWidth : scrollBarOffsetXDevice + scrollBarWidth;
var scrollProps = {
name:'text page',
types:['bar','wheel','touch'],
axis:'y',
align:'top',
margin:STATE.overrides.pageScrollVerticalMargin,
color:STATE.overrides.pageScrollbarColor,
hover:STATE.overrides.pageScrollbarHover,
side:STATE.overrides.pageScrollbarAlignment,
alpha:STATE.overrides.pageScrollbarBgAlpha,
width:scrollBarWidth,
offsetX:scrollBarOffsetX,
offsetY:STATE.overrides.pageScrollbarVerticalOffset,
property:'translate',
rounded: STATE.overrides.pageScrollbarRounded,
visibility: STATE.overrides.pageScrollbarVisibility,
scrollTopCheck:true
}
if(STATE.overrides.pageScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll) {
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'right'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = 0
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
self.scroll = new Scroll(text, mask, scrollProps);
self.scroll.addEventListener('WINDOW_SCROLL_TOP', function(){
self.scroll.percent = 0;
self.scroll.update(UPDATE_SPEED);
});
setTimeout(function() {
self.scroll.resize();
/*make sure scroll is resized before showing text*/
Tween.defer(text, UPDATE_SPEED, {alpha:1});
}, 0);
}
}
}
function isValidPageTitle() {
return STATE.overrides.pageTitle && imports.mediaItem.label !== '';
}
function hasFeaturedImage() {
return imports.mediaItem.featuredImage !== '';
}
function updateStyle(e) {
if(image && LAYOUT_MODEL.imageRendering.optimizeQuality) image.style['image-rendering'] = 'optimizeQuality';
if(image && LAYOUT_MODEL.imageRendering.webkitOptimizeContrast) image.style['image-rendering'] = '-webkit-optimize-contrast';
if(image && BROWSER_NAME === 'Safari' && LAYOUT_MODEL.imageRendering.webkitBackfaceVisibility) image.style['-webkit-backface-visibility'] = 'hidden';
text.fontFamily = STATE.overrides.pageTextFont;
text.fontColor = STATE.overrides.pageTextFontColor;
text.fontSize = STATE.overrides.pageTextFontSize;
text.letterSpacing = STATE.overrides.pageTextKerning;
Tween(self, self.updateSpeed, {backgroundColor:STATE.mediaView.backgroundColor()});
};
self.load = function load() {
if(hasFeaturedImage() && !isVerticalPageBuild() && image && image.dataSrc) {
image.src = image.dataSrc
}
self.loaded = true
loadPageImages()
updatePosition()
};
self.unload = function unload() {
};
self.show = function() {
self.display = 'block';
Tween(self, UPDATE_SPEED, {alpha:1});
};
self.hide = function() {
Tween(self, UPDATE_SPEED, {alpha:0,onComplete:function() {
self.display = 'none';
}});
};
function updatePosition(e) {
layoutCalcs.activeMediaType = self.type;
var maskX = Math.round(STATE.mediaView.maskX())
var maskY = Math.round(STATE.mediaView.maskY())
var fullMaskWidth = STATE.mediaView.maskWidth(self.element.offsetWidth);
maskWidth = Math.round(STATE.mediaView.maskWidth(self.element.offsetWidth))
maskHeight = Math.round(STATE.mediaView.maskHeight(self.element.offsetHeight))
if(STATE.overrides.pageMaxWidth && maskWidth > STATE.overrides.pageMaxWidth) {
maskWidth = STATE.overrides.pageMaxWidth
switch(STATE.overrides.pageMaxAlign) {
case 'center':
maskX += Math.round((fullMaskWidth - maskWidth) * 0.5)
break
case 'right':
maskX += Math.round(fullMaskWidth - maskWidth)
break
default:
// pass maskX thru
break
}
}
if(image && hasFeaturedImage() && !isVerticalPageBuild()) {
maskX += originalImageWidth + imageGap;
maskWidth -= (originalImageWidth + imageGap);
Tween(image, self.updateSpeed, {x:maskX - originalImageWidth - imageGap, y:maskY});
}
if(!isVerticalPage && isVerticalPageBuild()) {
if(image) {
self.removeChild(image);
image = undefined;
}
init();
} else if(isVerticalPage && !isVerticalPageBuild()) {
text.text = '';
init();
}
Tween(mask, 0, {x:maskX, y:maskY, width:maskWidth, height:maskHeight});
Tween(text, 0, {width:maskWidth});
// if(MAC_SCROLLBARS && (/native/.test(STATE.overrides.pageScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
// need positive value for padding-right for native scrollbar
// text.paddingRight = Math.abs(STATE.overrides.pageScrollbarHorizontalOffset) || 20
// }
// this was causing random padding-right issues on text pages... which are noticeble for responsive-width pages
// dont think we need this since mac scrollbars dissapear after use
// and if no trackpad then the innerWidth will be bumped over for the native scrollbars anyways
updateResponsiveElements();
if(responsiveElements.length > 0) {
if(isPod() || isPad()) {
mask.style.overflow = 'auto';
mask.style['-webkit-overflow-scrolling'] = 'touch';
}
Tween.defer(text, UPDATE_SPEED, {alpha:1});
} else {
updateScroll();
}
};
self.updatePosition = updatePosition
function updateResponsiveElements() {
var el = responsiveElements[0];
if(el) {
el.style.overflow = 'hidden';
el.style.width = (maskWidth - el.offsetLeft) + 'px';
el.style.height = (maskHeight - el.offsetTop) + 'px';
el.style.border = 'none';
}
var el2 = responsiveWidthElements[0];
if(el2) {
el2.style.overflow = 'hidden';
el2.style.width = (maskWidth - el2.offsetLeft) + 'px';
el2.style.border = 'none';
}
if(pageImgs) {
var i = pageImgs.length;
if(i > 0) {
while(i--) {
var img = pageImgs[i];
if(img.offsetLeft === 0) {
if(img.originalWidth && img.originalWidth > maskWidth) {
img.width = maskWidth
} else if(img.originalWidth) {
img.width = img.originalWidth
}
}
}
}
}
}
function imageLoaded(e) {
self.updateSpeed = 0;
loaded = true;
var retinaSize = RetinaResizeEngine({width:image.width, height:image.height, filename:image.src});
originalImageWidth = Math.round(retinaSize.width)
originalImageHeight = Math.round(retinaSize.height)
image.width = originalImageWidth;
image.height = originalImageHeight;
Tween(image, 1, {alpha:1});
self.updateSpeed = STATE.mediaView.transitionDuration();
updatePosition();
self.events.dispatchEvent(MEDIA_LOADED, {type:'featuredImage', id:imports.mediaItem.id, width:image.width, height:image.height});
}
function positionLoader() {
if(loader) {
Tween(loader, self.updateSpeed, {x:(maskWidth - loader.width) * 0.5, y:(maskHeight - loader.height) * 0.5});
}
}
function destroy(e) {
_localEvents.removeEventListener(RESIZE, updatePosition);
_localEvents.removeEventListener(LAYOUT_MODEL_CHANGE, updatePosition);
_localEvents.removeEventListener('destroy', destroy);
_localEvents.removeEventListener('showCursor', showCursor);
_localEvents.removeEventListener('hideCursor', hideCursor);
if(image) image.removeEventListener(LOAD, imageLoaded);
self.removeEventListener(CHILD_ADDED, childAdded);
}
function isVerticalPageBuild() {
if(USER_AGENT === MOBILE) return true;
if(STATE.mediaView.width() < STATE.mediaView.height()) return true;
if(stage.width < (LAYOUT_MODEL.screenWidthBreakpoint || 800)) return true;
if(originalImageWidth && STATE.mediaView.maskWidth(self.width) < STATE.mediaView.maskX() + originalImageWidth + imageGap + 250) return true;
return false;
}
return self;
}
function VideoView(imports) { // eslint-disable-line
var self = new Sprite({events:imports.localEvents})
self.alpha = 0
self.updateSpeed = 0
self.overflow = 'hidden'
self.id = imports.mediaItem.id
self.type = imports.mediaItem.type
self.dims = imports.size.content
self.section = imports.section
if(!imports.mediaItem.thumb.length) {
MEDIA_MODEL[self.id].size.thumb.width = 1200
MEDIA_MODEL[self.id].size.thumb.height = 800
}
var image = new Bitmap()
var mask = new Sprite()
mask.element.className = "video.mask"
var caption
var video
var bigPlayIcon = new Bitmap()
var loader
var originalImageWidth = imports.size.thumb.width
var originalImageHeight = imports.size.thumb.height
var imageWidth = 0
var imageHeight = 0
var imageX = 0
var imageY = 0
var maskWidth = 0
var maskHeight = 0
var originalVideoWidth = imports.size.content.width
var originalVideoHeight = imports.size.content.height
var videoWidth = 0
var videoHeight = 0
var videoX = 0
var videoY = 0
var videoLoaded = false
var posterLoaded = false
var _captionLocal
var _localEvents = imports.localEvents
var vimeoCursorMask
image.alpha = 0
image.zIndex = 1
mask.overflow = 'hidden'
bigPlayIcon.width = 70
bigPlayIcon.height = 70
bigPlayIcon.alpha = 0
bigPlayIcon.zIndex = 4
self.addEventListener(CHILD_ADDED, childAdded)
self.events.addEventListener(PAUSE_MEDIA, pauseMedia)
self.events.addEventListener(DESTROY_MEDIA, destroyMedia)
self.events.addEventListener(ADMIN_MOUSE_DOWN, vimeoPointerEventsOff)
self.events.addEventListener(ADMIN_MOUSE_UP, vimeoPointerEventsOn)
_localEvents.addEventListener(RESIZE, updatePosition)
_localEvents.addEventListener(LAYOUT_MODEL_CHANGE, function() {
if(video) {
if(isVimeo(imports.mediaItem)) {
if(STATE.overrides.videoLoop) {
video.setLoop('true')
} else {
video.setLoop('false')
}
} else if(STATE.overrides.videoLoop) {
video.element.setAttribute("loop", true)
} else {
video.element.removeAttribute("loop")
}
}
updatePosition()
})
_localEvents.addEventListener('mediaSizeUpdate', updatePosition)
_localEvents.addEventListener(MEDIA_MODEL_CHANGE, updateMedia)
_localEvents.addEventListener('mediaAutoPlay', mediaAutoPlay)
_localEvents.addEventListener('destroy', destroy)
_localEvents.addEventListener('showCursor', showCursor)
_localEvents.addEventListener('hideCursor', hideCursor)
function showCursor() {
image.element.navigationCursor = true
mask.element.navigationCursor = true
if(video) video.element.navigationCursor = image.element.navigationCursor
if(vimeoCursorMask) {
vimeoCursorMask.top.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.right.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.bottom.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.left.element.navigationCursor = image.element.navigationCursor
}
}
function hideCursor() {
image.element.navigationCursor = false
mask.element.navigationCursor = false
if(video) video.element.navigationCursor = image.element.navigationCursor
if(vimeoCursorMask) {
vimeoCursorMask.top.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.right.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.bottom.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.left.element.navigationCursor = image.element.navigationCursor
}
}
function childAdded() {
image.element.navigationCursor = true
mask.element.navigationCursor = true
image.element.addEventListener('contextmenu', disable)
image.element.addEventListener('dragstart', disable)
self.element.style['user-select'] = 'none'
mask.element.style['user-select'] = 'none'
image.element.style['user-select'] = 'none'
bigPlayIcon.addEventListener(CLICK, bigPlayClick)
if(STATE.overrides.imageVideoLoaderType === 'spinner') {
loader = new LoadingIndicator({color:imports.loaderColor})
loader.zIndex = 2
mask.addChild(loader)
}
self.addChild(mask)
mask.addChild(image)
mask.addChild(bigPlayIcon)
}
function disable(e) {
var disableRightClick = SETTINGS_MODEL.disableRightClick === undefined || SETTINGS_MODEL.disableRightClick
if(disableRightClick) {
e.preventDefault()
}
}
self.load = function load() {
STATE.section(self.section)
self.loaded = true
self.playState = STATE.overrides.videoAutoPlay ? 'playing' : 'paused'
var captionText = getCaptionText(imports.mediaItem)
if(!caption && captionText !== '') {
caption = new Caption()
self.addChild(caption.container)
caption.container.zIndex = 3
_captionLocal = imports.mediaItem.overrides || {}
_localEvents.addEventListener('showCaption', showCaption)
_localEvents.addEventListener('hideCaption', hideCaption)
_localEvents.addEventListener('checkCaption', checkCaptionOnScrollStop)
updateCaptionText(captionText)
// setTimeout(updateCaptionStyle, self.updateSpeed * 1000)
}
if(showPosterImage(imports.mediaItem)) {
image.addEventListener(LOAD, imageLoaded)
if(imports.mediaItem.thumb.length) {
image.src = cdnMediaPath(imports.mediaItem.thumb, imports.mediaItem.demoFile)
} else {
image.src = ICONS + "videoLarge2.png"
}
} else if(!video) {
createVideoPlayer()
if(!STATE.overrides.videoAutoPlay) video.setSource(imports.mediaItem.content, STATE.overrides.videoAutoPlay)
showCaption()
}
}
self.unload = function unload() {
// mask.removeChild(video)
// video = null
}
self.play = function(autoplay) {
autoplay = autoplay !== undefined ? autoplay : STATE.overrides.videoAutoPlay
if(video && video.src) {
video.play()
} else if(video && !video.src) {
video.setSource(imports.mediaItem.content, autoplay)
if(isPod() || isPad()) video.play()
} else {
createVideoPlayer()
video.setSource(imports.mediaItem.content, autoplay)
}
if(loader) {
loader.removeLoader()
loader.zIndex = 0
}
// if(STATE.overrides.videoAutoPlay) {
Tween(bigPlayIcon, UPDATE_SPEED, {alpha:0, onComplete:function(){
bigPlayIcon.display = 'none'
}})
// }
if(isSlideshowGallery(self.section) && !LAYOUT_MODEL.landingMediaUnmuteBtn) {
video.disableUnmuteButton()
if(!isVimeo(imports.mediaItem)) video.hud.disable()
}
}
self.pause = function() {
if(video) video.pause()
}
self.destroy = function() {
destroyMedia()
}
self.autoPlay = function() {
// if((USER_AGENT === MOBILE && STATE.overrides.mobileAutoPlay) || (!isPod() && !isPad())) {
self.play(true)
if(USER_AGENT !== MOBILE) updatePosition()
// }
}
function mediaAutoPlay(e) {
// if((USER_AGENT === MOBILE && STATE.overrides.mobileAutoPlay) || (!isPod() && !isPad())) {
if(e === self.id) {
setTimeout(function(){
self.play()
}, 1000)
setTimeout(function(){
updatePosition()
}, 1200)
} else if(video && video.src) {
// not sure if this is needed
// legacy and causing issues with vimeo "postMessage"
// trying to set "pause" before the iframe loads
if(!video.paused) video.pause()
}
// }
}
function vimeoPointerEventsOff() {
if(isVimeo(imports.mediaItem)) {
video.pointerEvents = 'none'
}
}
function vimeoPointerEventsOn() {
if(isVimeo(imports.mediaItem)) {
video.pointerEvents = 'auto'
}
}
function bigPlayIconLoaded() {
bigPlayIcon.transition = 0
bigPlayIcon.width = 70
bigPlayIcon.height = 70
alignBigPlay()
if(!STATE.overrides.videoAutoPlay) {
setTimeout(function() {
Tween(bigPlayIcon, UPDATE_SPEED, {alpha:1})
}, 10)
}
}
function alignBigPlay() {
bigPlayIcon.transition = 0
setTimeout(function() {
bigPlayIcon.x = image.x + ((image.width - 70) * 0.5)
bigPlayIcon.y = image.y + ((image.height - 70) * 0.5)
}, 10)
}
function pauseMedia() {
if(videoLoaded && !video.paused && !isSlideshowGallery(self.section)) {
self.events.removeEventListener(TRANSITION_END, createVideoPlayer)
video.pause()
if(isVimeo(imports.mediaItem)) {
bigPlayIcon.display = 'block'
}
video.removeKeyListener()
}
}
function destroyMedia(e) {
if(video) {
pauseMedia(e)
self.events.removeEventListener(PAUSE_MEDIA, pauseMedia)
mask.removeChild(video)
video.destroy()
self.events.removeEventListener(DESTROY_MEDIA, destroyMedia)
}
}
function buildMask() {
var _mask = new Sprite()
_mask.element.className = "vimeoMask"
_mask.element.navigationCursor = image.element.navigationCursor
// mask.backgroundColor = 'rgba(255,0,0,0.3)'
return _mask
}
function buildVimeoCursorMask() {
return {
top:buildMask(),
right:buildMask(),
bottom:buildMask(),
left:buildMask()
}
}
function createVideoPlayer() {
STATE.section(self.section)
var vimeoOpts = {
events:_localEvents
}
if(USER_AGENT === MOBILE && STATE.overrides.mobileAutoPlay) {
vimeoOpts.thumbBuild = true
}
if(isVimeo(imports.mediaItem) && !video) {
video = new VimeoPlayer(vimeoOpts)
video.element.navigationCursor = image.element.navigationCursor
self.video = video
video.addEventListener(VIMEO_METADATA_LOADED, onVimeoMetadataLoaded)
mask.addChild(video)
if(!isPod()) {
vimeoCursorMask = buildVimeoCursorMask()
mask.addChild(vimeoCursorMask.top)
mask.addChild(vimeoCursorMask.right)
mask.addChild(vimeoCursorMask.bottom)
mask.addChild(vimeoCursorMask.left)
vimeoCursorMask.top.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.right.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.bottom.element.navigationCursor = image.element.navigationCursor
vimeoCursorMask.left.element.navigationCursor = image.element.navigationCursor
}
// hack to get user to click vimeo vid on mobile
if(USER_AGENT === MOBILE) {
video.zIndex = 20
video.alpha = 0.01
} else {
video.alpha = 0.01
}
} else if(!video) {
video = new VideoPlayer({parent:mask, events:imports.localEvents})
if(/disabled/.test(LAYOUT_MODEL.cursorIconStyle) || isSlideshowGallery(self.section)) {
video.addEventListener(CLICK, function(e) {
if(!video.element.paused && video.element.muted && video.unmuteBtn.display === 'block') {
video.unmuteClick()
} else if(!video.element.paused && video.element.muted) {
video.hud.unmute()
} else {
video.togglePlay(e)
}
})
}
video.element.navigationCursor = image.element.navigationCursor
self.video = video
video.addEventListener(METADATA_LOADED, metadataLoaded, false)
video.addEventListener(ERROR, loadError, false)
mask.addChild(video)
video.display = 'none'
video.alpha = 0
if(STATE.overrides.videoLoop && !isSlideshowGallery(self.section)) video.element.setAttribute("loop", true)
}
video.addEventListener(PAUSED, paused)
video.addEventListener(PLAY, playEvent)
video.addEventListener('playbackEnd', playbackEnd)
}
function paused() {
if(isPod()) {
video.display = 'none'
}
resizeVideo('paused')
}
function playEvent() {
if(USER_AGENT === MOBILE && STATE.overrides.mobileAutoPlay) {
video.display = 'block'
video.alpha = 0.01
} else if(isPod()) {
video.display = 'block'
video.alpha = 1
}
resizeVideo('playing')
self.events.dispatchEvent(PLAY)
}
function playbackEnd() {
if(isVimeo(imports.mediaItem)) {
bigPlayIcon.display = 'block'
resizeVideo('ended')
}
self.events.dispatchEvent('playbackEnd')
}
function bigPlayClick() {
if(loader) {
Tween(loader, UPDATE_SPEED, {alpha:1})
}
createVideoPlayer()
// autoplay true
self.play(true)
// if(isPod() || isPad()) {
// video.element.addEventListener('webkitendfullscreen', playbackEnd)
// }
}
function metadataLoaded(e) {
if(!isSlideshowGallery(self.section)) video.hud.enable()
video.removeEventListener(METADATA_LOADED, metadataLoaded, false)
video.removeEventListener(ERROR, loadError, false)
initializePlay(e.target)
video.display = 'block'
originalVideoWidth = e.target.videoWidth
originalVideoHeight = e.target.videoHeight
MEDIA_MODEL[self.id].size.content.width = e.target.videoWidth
MEDIA_MODEL[self.id].size.content.height = e.target.videoHeight
self.events.dispatchEvent(MEDIA_LOADED, {type:'video', id:imports.mediaItem.id, width:e.target.videoWidth, height:e.target.videoHeight})
}
function onVimeoMetadataLoaded(e) {
video.removeEventListener(VIMEO_METADATA_LOADED, onVimeoMetadataLoaded)
originalVideoWidth = this.videoWidth
originalVideoHeight = this.videoHeight
MEDIA_MODEL[self.id].size.content.width = this.videoWidth
MEDIA_MODEL[self.id].size.content.height = this.videoHeight
initializePlay(this)
setTimeout(function(){
updatePosition(e)
// ***** removed this MEDIA_LOADED event *****
// because it was eventually firing another updatePosition
// not sure if it's still needed for something
self.events.dispatchEvent(MEDIA_LOADED, {type:'vimeo', id:imports.mediaItem.id, width:originalVideoWidth, height:originalVideoHeight})
}, 200)
}
function loadError() {
if(loader) {
loader.removeLoader()
mask.removeChild(loader)
}
}
function initializePlay(reference) {
videoLoaded = true
self.videoLoaded = true
self.updateSpeed = 0
if(originalVideoWidth !== reference.videoWidth) originalVideoWidth = reference.videoWidth
if(originalVideoHeight !== reference.videoHeight) originalVideoHeight = reference.videoHeight
updatePosition()
updateStyle()
if(loader) {
loader.removeLoader()
mask.removeChild(loader)
}
Tween(image, UPDATE_SPEED, {alpha:0, onComplete:function(){
image.display = 'none'
}})
}
function updateStyle() {
STATE.section(self.section)
if(USER_AGENT === MOBILE) {
Tween(self, self.updateSpeed, {backgroundColor:LAYOUT_MODEL.containerColorMobile || STATE.mediaView.backgroundColor()})
} else if(USER_AGENT === TABLET) {
Tween(self, self.updateSpeed, {backgroundColor:LAYOUT_MODEL.containerColorTablet || STATE.mediaView.backgroundColor()})
} else {
Tween(self, self.updateSpeed, {backgroundColor:STATE.mediaView.backgroundColor()})
}
if(caption) setTimeout(updateCaptionStyle, self.updateSpeed * 1000)
}
function updateCaptionStyle() {
caption.container.transition = 0
if(firstValid(_captionLocal.captionCloseButton, STATE.overrides.captionCloseButton)) {
caption.showCloseButton()
} else {
caption.hideCloseButton()
}
var alignVars = {
onInit:function() {
if(caption.scroll) {
caption.scroll.hide()
}
},
onComplete:function() {
if(caption.scroll) {
caption.scroll.show()
caption.scroll.resize()
}
}
}
var bgColor = _captionLocal.captionBackgroundRectColor || STATE.overrides.captionBackgroundRectColor
var bgAlpha = firstValid(_captionLocal.captionBackgroundAlpha, STATE.overrides.captionBackgroundAlpha)
caption.backgroundColor = toRgba(bgColor, bgAlpha)
caption.fontFamily = _captionLocal.captionFont || STATE.overrides.captionFont
caption.fontSize = firstValid(_captionLocal.captionFontSize, STATE.overrides.captionFontSize)
caption.fontColor = _captionLocal.captionFontColor || STATE.overrides.captionFontColor
if(firstValid(_captionLocal.captionAutoPosition, STATE.overrides.captionAutoPosition) !== false) {
var padding = 10
var captionText = getCaptionText(imports.mediaItem)
layoutCalcs.captionView.size(captionText)
caption.width = layoutCalcs.captionView.width + (padding * 2)
caption.height = layoutCalcs.captionView.height + (padding * 2)
alignVars.width = layoutCalcs.captionView.width + (padding * 2)
alignVars.height = layoutCalcs.captionView.height + (padding * 2)
alignVars.hRange = self.width
alignVars.vRange = self.height
alignVars.hAlign = 'center'
alignVars.vAlign = 'bottom'
alignVars.hOffset = 0
alignVars.vOffset = 33
caption.textAlign = 'center'
caption.paddingTop = padding
caption.paddingRight = 0
caption.paddingBottom = padding
caption.paddingLeft = 0
caption.buildScroll({
color:STATE.overrides.captionScrollbarColor,
hover:STATE.overrides.captionScrollbarHover,
align:STATE.overrides.captionTextAlignVertical,
side:STATE.overrides.captionScrollbarAlignment,
alpha:STATE.overrides.captionScrollbarBgAlpha,
width:STATE.overrides.captionScrollbarWidth,
offsetX:STATE.overrides.captionScrollbarHorizontalOffset,
offsetY:STATE.overrides.captionScrollbarVerticalOffset
})
} else {
caption.width = firstValid(_captionLocal.captionWidth, STATE.overrides.captionWidth)
caption.height = firstValid(_captionLocal.captionHeight, STATE.overrides.captionHeight)
alignVars.width = firstValid(_captionLocal.captionWidth, STATE.overrides.captionWidth)
alignVars.height = firstValid(_captionLocal.captionHeight, STATE.overrides.captionHeight)
if(_captionLocal.captionAnchorTo === 'media item' || STATE.overrides.captionAnchorTo === 'media item' || STATE.overrides.transitionType === 'hScroll') {
alignVars.hOrigin = Math.round(STATE.overrides.videoAutoPlay ? STATE.mediaView.maskX() + videoX : STATE.mediaView.maskX() + imageX)
alignVars.vOrigin = Math.round(STATE.overrides.videoAutoPlay ? STATE.mediaView.maskY() + videoY : STATE.mediaView.maskY() + imageY)
alignVars.hRange = STATE.overrides.videoAutoPlay ? videoWidth : imageWidth
alignVars.vRange = STATE.overrides.videoAutoPlay ? videoHeight : imageHeight
} else if(_captionLocal.captionAnchorTo === 'media area' || STATE.overrides.captionAnchorTo === 'media area') {
alignVars.hOrigin = 0
alignVars.vOrigin = 0
alignVars.hRange = layoutCalcs.mediaView.width()
alignVars.vRange = layoutCalcs.mediaView.height()
}
alignVars.hAlign = _captionLocal.captionAlignHorizontal || STATE.overrides.captionAlignHorizontal
alignVars.vAlign = _captionLocal.captionAlignVertical || STATE.overrides.captionAlignVertical
alignVars.hOffset = firstValid(_captionLocal.captionOffsetX, STATE.overrides.captionOffsetX)
alignVars.vOffset = firstValid(_captionLocal.captionOffsetY, STATE.overrides.captionOffsetY)
caption.textAlign = _captionLocal.captionTextAlign || STATE.overrides.captionTextAlign
caption.paddingTop = firstValid(_captionLocal.captionPaddingTop, STATE.overrides.captionPaddingTop)
caption.paddingRight = firstValid(_captionLocal.captionPaddingRight, STATE.overrides.captionPaddingRight)
caption.paddingBottom = firstValid(_captionLocal.captionPaddingBottom, STATE.overrides.captionPaddingBottom)
caption.paddingLeft = firstValid(_captionLocal.captionPaddingLeft, STATE.overrides.captionPaddingLeft)
caption.buildScroll({
color:_captionLocal.captionScrollbarColor || STATE.overrides.captionScrollbarColor,
hover:_captionLocal.captionScrollbarHover || STATE.overrides.captionScrollbarHover,
align:_captionLocal.captionTextAlignVertical || STATE.overrides.captionTextAlignVertical,
side:_captionLocal.captionScrollbarAlignment || STATE.overrides.captionScrollbarAlignment,
alpha:firstValid(_captionLocal.captionScrollbarBgAlpha, STATE.overrides.captionScrollbarBgAlpha),
width:firstValid(_captionLocal.captionScrollbarWidth, STATE.overrides.captionScrollbarWidth),
offsetX:firstValid(_captionLocal.captionScrollbarHorizontalOffset, STATE.overrides.captionScrollbarHorizontalOffset),
offsetY:firstValid(_captionLocal.captionScrollbarVerticalOffset, STATE.overrides.captionScrollbarVerticalOffset)
})
}
Align(caption.container, self.updateSpeed, alignVars)
}
function checkCaptionOnScrollStop() {
if(USER_AGENT !== MOBILE) {
updateCaptionStyle()
showCaption()
} else {
caption.text = ''
caption.hide()
if(caption.scroll) caption.scroll.destroy()
}
}
function updateCaptionText(e) {
if(/media/.test(_captionLocal.captionAnchorTo) || /media/.test(STATE.overrides.captionAnchorTo)) {
caption.text = plainTextToHtml(e)
} else {
caption.hide()
if(caption.scroll) caption.scroll.destroy()
}
}
function showCaption() {
if(caption) {
var captionText = getCaptionText(imports.mediaItem)
caption.text = plainTextToHtml(captionText)
var anchorTo = firstValid(imports.mediaItem.overrides.captionAnchorTo, STATE.overrides.captionAnchorTo)
var captionDefault = firstValid(imports.mediaItem.overrides.captionDefault, STATE.overrides.captionDefault)
if((!showPosterImage(imports.mediaItem) || posterLoaded) && (anchorTo === 'media area' || anchorTo === 'media item')) {
if(isSlideshowGallery(self.section) && STATE.overrides.slideshowCaptions) {
caption.show(updateCaptionStyle)
} else if(caption && (captionDefault || STATE.uri.mode.indexOf('caption') > -1)) {
caption.show(updateCaptionStyle)
}
}
}
}
function hideCaption() {
caption.hide()
if(caption.scroll) caption.scroll.destroy()
}
self.hide = function() {
if(self.alpha === 1) {
Tween(self, UPDATE_SPEED, {alpha:0, onComplete:function(){
self.display = 'none'
}})
}
}
self.show = function() {
if(self.alpha === 0) {
self.display = 'block'
Tween(self, UPDATE_SPEED, {alpha:1})
}
}
function updatePosition() {
STATE.section(self.section)
if(image && LAYOUT_MODEL.imageRendering.optimizeQuality) image.style['image-rendering'] = 'optimizeQuality'
if(image && LAYOUT_MODEL.imageRendering.webkitOptimizeContrast) image.style['image-rendering'] = '-webkit-optimize-contrast'
if(image && BROWSER_NAME === 'Safari' && LAYOUT_MODEL.imageRendering.webkitBackfaceVisibility) image.style['-webkit-backface-visibility'] = 'hidden'
layoutCalcs.activeMediaType = self.type
maskWidth = STATE.mediaView.maskWidth(self.width)
maskHeight = STATE.mediaView.maskHeight(self.height)
alignBigPlay()
Tween(mask, self.updateSpeed, {x:STATE.mediaView.maskX(), y:STATE.mediaView.maskY(), width:maskWidth, height:maskHeight, onComplete:function(){
alignBigPlay()
}})
if(loader) {
positionLoader()
}
if(isVimeo(imports.mediaItem) && isPod()) {
/*dont do nuthin*/
} else if(!posterLoaded) {
if(loader) {
Tween(loader, UPDATE_SPEED, {alpha:1})
}
}
if(posterLoaded && !videoLoaded) {
resizeImage()
}
if(videoLoaded) {
resizeVideo()
}
}
self.updatePosition = updatePosition
function imageLoaded() {
self.updateSpeed = 0
posterLoaded = true
updatePosition()
resizeImage()
if(loader) {
Tween(loader, UPDATE_SPEED, {alpha:0})
}
self.events.dispatchEvent(MEDIA_LOADED, {type:'posterImage', id:imports.mediaItem.id, width:originalImageWidth, height:originalImageHeight})
self.updateSpeed = UPDATE_SPEED
bigPlayIcon.addEventListener(LOAD, bigPlayIconLoaded)
bigPlayIcon.src = ICONS + 'play@2x.png'
showCaption()
if(BROWSER_NAME === 'Safari' && /hScroll/.test(STATE.overrides.transitionType)) {
// image.element.setAttribute('data-pin-no-hover', true)
image.element.setAttribute('nopin', 'nopin')
}
}
function resizeImage() {
layoutCalcs.activeMediaType = self.type
maskWidth = STATE.mediaView.maskWidth(self.width)
maskHeight = STATE.mediaView.maskHeight(self.height)
var resize = Resize({}, 0, {
type:STATE.mediaView.imageScaleType(),
width:originalImageWidth,
height:originalImageHeight,
hRange:maskWidth,
vRange:maskHeight,
hAlign:STATE.mediaView.hAlign(),
vAlign:STATE.mediaView.vAlign(),
disableOrientationCheck:!!(USER_AGENT === MOBILE && LAYOUT_MODEL.landingMediaScaleTypeMobile) || !!(USER_AGENT === TABLET && LAYOUT_MODEL.landingMediaScaleTypeTablet)
})
imageWidth = Math.ceil(resize.scale.width)
imageHeight = Math.ceil(resize.scale.height)
imageX = Math.floor(resize.align.x)
imageY = Math.floor(resize.align.y)
Tween(image, self.updateSpeed, {
x: imageX,
y: imageY,
width: imageWidth,
height: imageHeight,
onComplete:function(){
setTimeout(function(){
if(isSlideshowGallery(self.section)) {
/*dont show image*/
} else {
Tween(image, STATE.mediaView.transitionDuration(), {alpha:1, ease:'cubic-bezier(0.7, 0, 0.3, 1)'})
}
}, 1000)
}
})
if(caption) updateCaptionStyle()
}
function resizeVideo(state) {
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type
if(state) self.playState = state
video.display = 'block'
setTimeout(function() {
video.display = 'block'
}, 1000)
maskWidth = STATE.mediaView.maskWidth(self.width)
maskHeight = STATE.mediaView.maskHeight(self.height)
var resize = Resize({}, 0, {
type:STATE.mediaView.videoScaleType(isVimeo(imports.mediaItem)),
width:originalVideoWidth,
height:originalVideoHeight,
hRange:maskWidth,
vRange:maskHeight,
hAlign:STATE.mediaView.hAlign(),
vAlign:STATE.mediaView.vAlign(),
disableOrientationCheck:!!(USER_AGENT === MOBILE && LAYOUT_MODEL.landingMediaScaleTypeMobile) || !!(USER_AGENT === TABLET && LAYOUT_MODEL.landingMediaScaleTypeTablet)
})
videoX = Math.floor(resize.align.x)
videoY = Math.floor(resize.align.y)
videoWidth = Math.ceil(resize.scale.width)
videoHeight = Math.ceil(resize.scale.height)
if(videoWidth && videoHeight) {
Tween(video, self.updateSpeed, {
x: videoX,
y: videoY,
width: videoWidth,
height: videoHeight,
onComplete:function(){
setTimeout(function(){
Tween(video, UPDATE_SPEED, {alpha:1, ease:'cubic-bezier(0.7, 0, 0.3, 1)'})
}, 1000)
}
})
video.setSize(videoWidth, videoHeight, self.updateSpeed)
resizeVimeoMask(resize)
if(video.hud) {
var hudX = Math.floor(resize.align.x)
var hudY = Math.floor(resize.align.y)
var hudWidth = videoWidth
var hudHeight = videoHeight
if(videoWidth > STATE.mediaView.maskWidth() && STATE.overrides.transitionType !== 'hScroll') {
hudX = 0
hudWidth = STATE.mediaView.maskWidth()
hudHeight = STATE.mediaView.maskHeight()
} else if(videoHeight > STATE.mediaView.maskHeight()) {
hudY = 0
hudWidth = STATE.mediaView.maskWidth()
hudHeight = STATE.mediaView.maskHeight()
}
video.hud.resize(self.updateSpeed, hudX, hudY, hudWidth, hudHeight)
var unmuteBtnX = resize.align.x > 0 ? resize.align.x : 0
var unmuteBtnY = resize.align.y > 0 ? resize.align.y : 0
video.unmuteBtn.x = Math.round(unmuteBtnX) + 20
video.unmuteBtn.y = Math.round(unmuteBtnY) + 20
}
if(caption) updateCaptionStyle()
}
}
function vimeoPlayMask() {
return {
banner: {width:0, height:0},
hdpopup: {width:170, height:180},
shareCtrls: {width:50, height:180},
videoCtrls: {width:videoWidth, height:50}
}
}
function vimeoPauseMask() {
return {
banner: {width:550, height:180},
hdpopup: {width:170, height:180},
shareCtrls: {width:50, height:180},
videoCtrls: {width:videoWidth, height:50}
}
}
function vimeoEndMask() {
return {
banner: {width:550, height:180},
hdpopup: {width:170, height:180},
shareCtrls: {width:50, height:180},
videoCtrls: {width:videoWidth, height:50}
}
}
function getVimeoMask() {
if(self.playState === 'ended') {
return vimeoEndMask()
}
if(self.playState === 'paused') {
return vimeoPauseMask()
}
return vimeoPlayMask()
}
function resizeVimeoMask(resize) {
if(vimeoCursorMask) {
var vimeoHud = getVimeoMask()
if(isPad()) {
// due to mobile behavior the play api call does not work
// so the mask size for this play state was wrong
vimeoHud.banner.width = 540
vimeoHud.banner.height = 170
}
var cMaskW = (videoWidth - vimeoHud.banner.width) * 0.5
var cMaskH = (videoHeight - vimeoHud.banner.height) * 0.5
vimeoCursorMask.top.x = resize.align.x
vimeoCursorMask.top.y = resize.align.y
vimeoCursorMask.top.width = videoWidth - vimeoHud.shareCtrls.width
vimeoCursorMask.top.height = cMaskH
vimeoCursorMask.right.x = resize.align.x + videoWidth - cMaskW
vimeoCursorMask.right.y = resize.align.y + vimeoHud.shareCtrls.height
vimeoCursorMask.right.width = cMaskW
vimeoCursorMask.right.height = videoHeight - vimeoHud.shareCtrls.height - vimeoHud.hdpopup.height
vimeoCursorMask.bottom.x = resize.align.x
vimeoCursorMask.bottom.y = resize.align.y + videoHeight - cMaskH
vimeoCursorMask.bottom.width = videoWidth - vimeoHud.hdpopup.width
vimeoCursorMask.bottom.height = cMaskH - vimeoHud.videoCtrls.height
vimeoCursorMask.left.x = resize.align.x
vimeoCursorMask.left.y = resize.align.y
vimeoCursorMask.left.width = cMaskW
vimeoCursorMask.left.height = videoHeight - vimeoHud.videoCtrls.height
}
}
function updateMedia(e) {
if(e.id === imports.mediaItem.id) {
if(imports.mediaItem.thumb !== e.thumb) {
console.log('posterImage changed!')
}
if(imports.mediaItem.content !== e.content) {
console.log('src changed!')
}
}
}
function positionLoader() {
if(loader) {
loader.transition = 0
loader.x = ((STATE.mediaView.maskWidth(self.width) - loader.width) * 0.5)
loader.y = ((STATE.mediaView.maskHeight(self.height) - loader.height) * 0.5)
}
}
function destroy() {
self.events.removeEventListener(PAUSE_MEDIA, pauseMedia)
self.events.removeEventListener(DESTROY_MEDIA, destroyMedia)
self.events.removeEventListener(TRANSITION_END, createVideoPlayer)
self.events.removeEventListener(ADMIN_MOUSE_DOWN, vimeoPointerEventsOff)
self.events.removeEventListener(ADMIN_MOUSE_UP, vimeoPointerEventsOn)
_localEvents.removeEventListener(RESIZE, updatePosition)
_localEvents.removeEventListener(LAYOUT_MODEL_CHANGE, updatePosition)
_localEvents.removeEventListener('mediaSizeUpdate', updatePosition)
_localEvents.removeEventListener(MEDIA_MODEL_CHANGE, updateMedia)
_localEvents.removeEventListener('mediaAutoPlay', mediaAutoPlay)
_localEvents.removeEventListener('destroy', destroy)
_localEvents.removeEventListener('showCursor', showCursor)
_localEvents.removeEventListener('hideCursor', hideCursor)
image.removeEventListener(LOAD, imageLoaded)
if(video) {
video.element.removeEventListener('webkitendfullscreen', playbackEnd)
if(isVimeo(imports.mediaItem)) {
video.removeEventListener(VIMEO_METADATA_LOADED, onVimeoMetadataLoaded)
} else {
video.element.removeEventListener(METADATA_LOADED, metadataLoaded, false)
}
video.destroy()
}
self.removeEventListener(CHILD_ADDED, childAdded)
}
return self
}
function OverlayController(vars) {
var self = new ControllerProxy({parentView:vars.mediaView.mask, parentController:vars.parentController, events:vars.siteEvents});
var mode,
sectionChange = false,
section,
assetId,
path,
settings,
mediaItems,
event,
mouseOverThumbsOnce = false,
isModeChange = false,
_localEvents = vars.localEvents,
thumbsOpen,
savedThumbsPosition;
self.overlayView = new OverlayView(vars);
self.overlayView.zIndex = STATE.overlayView.zIndex;
vars.siteView.addChild(self.overlayView);
vars.siteEvents.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
vars.siteEvents.addEventListener(SITE_URI_CHANGE, overlayControllerSiteUriChange);
vars.siteEvents.addEventListener(SECTIONS_MODEL_CHANGE, sectionUpdate);
vars.siteEvents.addEventListener(SETTINGS_MODEL_CHANGE, settingsUpdate);
vars.siteEvents.addEventListener(RESIZE_END, resizeEnd);
vars.siteEvents.addEventListener('UPDATE_CONTENT_HEIGHT', function() {
self.overlayView.updatePosition()
});
vars.siteEvents.addEventListener('holdersBuilt', function() {
highlightThumb()
setScrollPosition()
})
function sectionUpdate(e) {
if(section) {
var updateSection = getSectionById(e.id)
var isSubSectionOfParent = updateSection && updateSection.key.indexOf(section.key) > -1
if(e && e.field === 'thumb' || e.section === section || isSubSectionOfParent) {
sectionChange = true
section = e.section ? e.section : section;
self.overlayView.updatePosition(e);
checkThumbs({mode:mode, section:section});
if(self.thumbs) self.thumbs.resize();
}
section = e.section ? e.section : section;
} else if(self.thumbs) {
self.thumbs.hide()
if(self.thumbs.scroll) self.thumbs.scroll.destroy()
self.overlayView.removeChild(self.thumbs);
delete self.thumbs;
}
}
function settingsUpdate(e) {
if(self.inquiry) {
self.inquiry.updateInquiryInfo();
}
}
function layoutModelChange(e) {
if(e && self.share) {
self.share.updateStyle(e);
self.share.updatePosition(e);
}
if(e && self.inquiry) {
self.inquiry.updateStyle(e);
self.inquiry.updatePosition(e);
}
if(e && /overlay/.test(e.id) && (STATE.overrides.thumbnailDock === 'overlay' || /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType))) {
sectionChange = true;
self.overlayView.updatePosition(e);
checkThumbs({mode:mode, section:section});
}
if(e && /thumbnail|menuWidth|menuAlignHorizontal|menuOffsetX|sitePaddingTop|sitePaddingRight|sitePaddingBottom|sitePaddingLeft/.test(e.id)) {
sectionChange = true;
self.overlayView.updatePosition(e);
checkThumbs({mode:mode, section:section});
if(self.thumbs) self.thumbs.resize();
}
}
function resizeEnd(e) {
self.overlayView.updatePosition(e);
if(self.share) self.share.updatePosition(e);
if(self.inquiry) self.inquiry.updatePosition(e);
resizeThumbs(e);
}
function overlayControllerSiteUriChange(e) {
if(e.info.isMediaViewStateChange || e.info.isModeChange) self.overlayView.updatePosition(e);
if(e.assetId) assetId = e.assetId;
if(USER_AGENT !== MOBILE && USER_AGENT !== TABLET) {
self.overlayView.position = layoutCalcs._thumbsVisible && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) ? 'absolute' : 'fixed'
}
checkThumbs(e);
checkShare(e);
checkInquiry(e);
checkFotomoto(e);
}
function checkFotomoto(e) {
if(e.section && e.mode.indexOf('fotomoto') > -1) {
var media = csvToArray(e.section.media);
var mediaItem = getMediaById(media[e.assetId]);
if(window.FOTOMOTO && mediaItem && mediaItem.type === IMAGE) {
window.FOTOMOTO.API.showWindow(10, SETTINGS_MODEL.cdnSslUri + '/' + mediaItem.content);
}
setTimeout(function() {
vars.siteEvents.dispatchEvent('clearFotomotoMode', 'fotomoto');
}, 100);
}
}
function hasMode(value, mode) {
return mode ? mode.indexOf(value) !== -1 : false;
}
function getScrollPosition(e) {
if(self.thumbs && !self.thumbs.scroll && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
if(e.info && e.info.isModeChange && hasMode('thumbs', e.mode)) {
// do nothing
// console.log('do nothing')
} else if(e.info && !e.info.isSectionChange && e.info.isModeChange && hasMode('thumbs', e.info.lastUri)) {
savedThumbsPosition = self.thumbs.mask.scrollY || window.scrollY
// console.log('close thumbs, save scroll position', self.thumbs.mask.scrollY, window.scrollY)
} else if(e.info && e.info.isSectionChange) {
savedThumbsPosition = undefined
// console.log('self.thumbs reset scroll position')
}
} else {
savedThumbsPosition = undefined
// console.log('reset scroll position')
}
}
function setScrollPosition(e) {
// console.log('setScrollPosition', savedThumbsPosition, window.scrollY, e)
if(self.thumbs && !self.thumbs.scroll && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
if(info && info.isSectionChange && !info.isModeChange && hasMode('thumbs', mode)) {
if(LAYOUT_MODEL.unifiedPageScrolling) {
window.scrollTo(0, 0)
}
} else if(info && !info.isSectionChange && info.isModeChange && hasMode('thumbs', mode)) {
// console.log('open thumbs, restore thumbs position', savedThumbsPosition)
if(LAYOUT_MODEL.unifiedPageScrolling) {
// console.log(savedThumbsPosition)
window.scrollTo(0, savedThumbsPosition || 0)
// Anim.to(window, 0, {scrollY:savedThumbsPosition || 0, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
// onComplete
// }});
} else {
self.thumbs.mask.scrollY = savedThumbsPosition || 0
// Anim.to(self.thumbs.mask, 0, {scrollLeft:0, scrollTop:savedThumbsPosition || 0, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
// onComplete
// }});
}
}
}
if(self.thumbs && /strip/.test(STATE.overrides.thumbnailType) && hasMode('thumbs', mode)) {
if(self.thumbs.scroll && !self.thumbs.mouseHover) {
self.thumbs.scroll.percent = assetId / (mediaItems.length - 1);
self.thumbs.scroll.update(UPDATE_SPEED);
if(self.thumbs.lazyLoader) self.thumbs.lazyLoader.update()
} else if(STATE.overrides.thumbnailType === 'strip') {
var percent = assetId / (mediaItems.length - 1)
if(/top|bottom/.test(STATE.overrides.thumbnailSide)) {
var scrollRange = self.thumbs.mask.grid.width - self.thumbs.mask.width
Anim.to(self.thumbs.mask, UPDATE_SPEED, {scrollLeft:Math.round(scrollRange * percent), scrollTop:0, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
// onComplete
if(self.thumbs && self.thumbs.lazyLoader) self.thumbs.lazyLoader.update()
}});
} else {
var scrollRange = self.thumbs.mask.grid.height - self.thumbs.mask.height
Anim.to(self.thumbs.mask, UPDATE_SPEED, {scrollLeft:0, scrollTop:Math.round(scrollRange * percent), ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic', onComplete:function(){
// onComplete
if(self.thumbs && self.thumbs.lazyLoader) self.thumbs.lazyLoader.update()
}});
}
}
}
}
function checkThumbs(e) {
/*
this function needs to be extremely simple
and merely obey the uri
if thumbs is in the uri then you build and turn them on
else you turn them off
*/
// if(mode !== e.mode && section === e.section) {
// isModeChange = true;
// }
mode = e.mode || '';
section = e.section || section;
isModeChange = e.info ? e.info.isModeChange : mode !== e.mode && section === e.section
info = e.info ? e.info : {}
if(e.assetId > -1) assetId = e.assetId;
path = e.path || path;
if(e.section) mediaItems = e.section.mediaItems || mediaItems;
if(/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(mode)) {
vars.siteEvents.dispatchEvent(PAUSE_MEDIA);
setTimeout(function(){
if(vars.mediaView.scroll) {
vars.mediaView.scroll.hide();
}
}, 20)
} else if(/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
setTimeout(function(){
if(vars.mediaView.scroll) {
vars.mediaView.scroll.show();
//vars.mediaView.scroll.update();
}
}, 0)
}
if(self.thumbs && self.thumbs.section !== section) {
savedThumbsPosition = undefined
}
if(self.thumbs && (self.thumbs.section !== section || sectionChange)) {
self.thumbs.hide()
if(self.thumbs.scroll) self.thumbs.scroll.destroy()
if(self.thumbs.lazyLoader) delete self.thumbs.lazyLoader
self.overlayView.removeChild(self.thumbs);
delete self.thumbs;
}
if(e.section && e.section.isIndex) {
mediaItems = e.section.media
.map(function(mediaId) {
return mediaId < 9999 ?
fakeMediaItemFromSub(getSectionById(mediaId)) :
getMediaById(mediaId)
})
.filter(function(mediaItem) {
return !!mediaItem
})
}
if(e.section && e.section.thumb) {
settings = e.section.thumb;
if(!self.thumbs && mode.indexOf('thumbs') > -1) {
self.thumbs = new ThumbsModule({
assetId: assetId,
path: path,
mediaItems: mediaItems,
settings: settings,
events: vars.siteEvents,
parent: vars.siteView,
section: section,
thumbnailOnly: STATE.overrides.thumbnailOnly,
isIndexSection: e.info ? e.info.isIndexSection : isIndexSection(section)
});
self.thumbs.section = section;
self.thumbs.settings = settings;
self.overlayView.addChild(self.thumbs);
}
if(self.thumbs && mode.indexOf('thumbs') > -1 && !self.thumbs.toggleState()) {
setTimeout(function() {
stripDisplaceChange();
setScrollPosition(e)
self.thumbs.show();
// this is set to UPDATE_SPEED intentionally
// window scroll cannot work until siteview height has been set
// was also set to 0 due to some image flash issue that mattsarr reported but did not have a git issue for
}, UPDATE_SPEED * 1000)
} else if(self.thumbs && self.thumbs.toggleState() && mode.indexOf('thumbs') === -1) {
if(isModeChange) {
stripDisplaceChange();
if(LAYOUT_MODEL.unifiedPageScrolling || STATE.overrides.thumbnailType === 'strip') {
self.thumbs.hide();
} else {
// Image Flickering when making new image selection from thumbs #1052
// does not work for unifiedPageScroll due to scrolling entire site before overlay close
// arbitrary delay for hiding the thumbnails before media jumpToAsset
var hideDelay = UPDATE_SPEED * 500
setTimeout(function() {
self.thumbs.hide();
// wait till jumpToAsset happens in MediaNavigation
// dont need to honor transitionDuration since this is from thumbs to gallery
// instead of image to image
}, hideDelay)
// }, STATE.mediaView.transitionDuration() * 1000)
}
} else {
vars.siteEvents.addEventListener(TRANSITION_START, mediaTransitionStart);
}
}
}
getScrollPosition(e)
setTimeout(function() {
highlightThumb(e)
if(mode.indexOf('thumbs') > -1) setScrollPosition(e)
}, 20)
isModeChange = false;
sectionChange = false;
}
function stripDisplaceChange() {
if(STATE.overrides.thumbnailType === 'strip' && STATE.overrides.thumbnailDock === 'displace') {
vars.siteEvents.dispatchEvent('thumbStripDisplaceChange');
}
}
function mediaTransitionStart() {
vars.siteEvents.removeEventListener(TRANSITION_START, mediaTransitionStart);
if(LAYOUT_MODEL.overlayAlpha === 1) {
vars.siteEvents.dispatchEvent('OPAQUE_OVERLAY_CLOSE');
}
self.thumbs.hide();
}
function highlightThumb() {
if(self.thumbs) {
if(assetId > -1) {
self.thumbs.highlight(assetId);
} else {
self.thumbs.highlight(-1);
}
}
}
function resizeThumbs() {
if(self.thumbs) {
self.thumbs.resize();
}
}
function checkShare(e) {
if(!self.share && e.mode.indexOf('share') > -1) {
self.share = new ShareView(vars);
self.share.pointerEvents = 'auto';
self.overlayView.addChild(self.share);
self.share.updateContent(e);
} else if(self.share && e.mode.indexOf('share') > -1) {
self.share.updateContent(e);
self.share.show();
} else if(self.share && e.mode.indexOf('share') === -1) {
self.share.hide();
}
}
function checkInquiry(e) {
if(!self.inquiry && e.mode.indexOf('inquiry') > -1) {
self.inquiry = new InquiryView(vars);
self.inquiry.pointerEvents = 'auto';
self.overlayView.addChild(self.inquiry);
self.inquiry.updateContent(e);
} else if(self.inquiry && e.mode.indexOf('inquiry') > -1) {
self.inquiry.updateContent(e);
self.inquiry.show();
} else if(self.inquiry && e.mode.indexOf('inquiry') === -1) {
self.inquiry.hide();
}
}
function getFirstThumb(sub) {
if(sub.customThumb) {
return {name:sub.customThumb, size:sub.customThumbSize}
} else if(sub.media) {
for(var i = 0; i < sub.media.length; i++) {
if(sub.media[i] > 9999) {
var firstItem = getMediaById(sub.media[i])
if(firstItem.thumb) {
return {name:firstItem.thumb, size:firstItem.size.thumb, demoFile:firstItem.demoFile}
} else if(firstItem.type === 'image') {
return {name:firstItem.content, size:firstItem.size.content, demoFile:firstItem.demoFile}
}
}
}
}
return {name:'', size:{width:0, height:0}}
}
function fakeMediaItemFromSub(sub) {
var item
if(sub) {
var mediaItem = getMediaById(sub.media[0])
var customThumb = getFirstThumb(sub)
if(isOnlyLinkItem(mediaItem, sub)) {
// for legacy custom first link in new index galleries
// bubbles first link media items up to thumbnails
item = JSON.parse(JSON.stringify(mediaItem))
item.size.thumb = customThumb.size
item.thumb = customThumb.name
item.demoFile = customThumb.demoFile
} else {
item = {
size:{
content:{
width:0,
height:0
},
thumb:{
width:customThumb.size.width,
height:customThumb.size.height
},
featuredImage:{
width:0,
height:0
},
bytes:0
},
label:sub.label,
subTitle:sub.subTitle,
alias:sub.alias,
title:'',
type:'link',
content:sub.indexLink || sub.key.replace(/ /g, '-'),
thumb:customThumb.name,
linkTarget:sub.linkTarget || '_self',
caption:'',
overrides:{
thumbScaleFactor: sub.overrides.thumbScaleFactor
},
featuredImage:'',
filters:[],
dateAdded: new Date().toISOString(),
demoFile:customThumb.demoFile
}
}
}
return sub && sub.visible ? item : false
}
return self;
}
function OverlayView(vars) {
var self = new ViewProxy({events:vars.events});
self.zIndex = STATE.overlayView.zIndex;
self.overflow = 'hidden';
self.pointerEvents = 'none';
self.updateSpeed = 0;
if(BROWSER_NAME === 'Safari') {
// to prevent transition flicker in Safari #1052
self.style['-webkit-backface-visibility'] = 'hidden';
self.style.transform = 'translateZ(0)'
}
self.element.setAttribute('class', 'OverlayView');
self.addEventListener(CHILD_ADDED, function(child) {
self.updatePosition();
});
self.show = function() {
self.display = 'block';
Tween(self, UPDATE_SPEED, {alpha:1});
};
self.hide = function() {
Tween(self, UPDATE_SPEED, {alpha:0,onComplete:function() {
self.display = 'none';
}});
};
self.updatePosition = function(e) {
var overlayHeight = STATE.overlayView.zoneHeight()
if(LAYOUT_MODEL.unifiedPageScrolling && layoutCalcs._thumbsVisible && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
overlayHeight += percentToPixels(LAYOUT_MODEL.sitePaddingBottom, stage.height)
}
Tween.defer(self, 0, {
x:STATE.mediaView.zoneX(),
y:STATE.mediaView.zoneY(),
width:STATE.overlayView.zoneWidth(),
height:overlayHeight
});
self.updateSpeed = UPDATE_SPEED;
};
return self;
}
// public methods
// .resize
// .show
// .hide
// .lazyLoader
// .toggleState
// .highlight
// pub prop
// .mask <- just the sprite
// .section
function PaginatedThumbs(vars) {
// curPage <- index of the array
// mask <- sprite (public)
// calculate how many thumbs fit per "page"
// divide thumbs into an array of arrays where
// each nested array represents the content of
// a single thumbs page
//
// create a page for the thumbsmodule to sit in
//
// get static nav instantiation from site controller
// create a prev/next navigation to transition the pages
var self = new Sprite()
var mask = new Sprite()
var container
var thumbsModules
var totalThumbs
var curPage = 0
var pagesItems
var toggleState
self.pointerEvents = 'auto'
function getNumberOfColumns(zoneWidth, gap) {
var thumbWidth = THUMB_SIZES[STATE.overrides.thumbnailSize].width + gap
return Math.floor((zoneWidth + gap) / thumbWidth)
}
function getNumberOfRows(zoneHeight, gap) {
var thumbHeight = THUMB_SIZES[STATE.overrides.thumbnailSize].height + gap
return Math.floor((zoneHeight + gap) / thumbHeight)
}
function getZoneWidth() {
var horizontalMargin = percentToPixels(STATE.overrides.thumbnailHorizontalMargin, stage.width)
return STATE.mediaView.zoneWidth() - (horizontalMargin * 2)
}
function getZoneHeight() {
var verticalMargin = percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height)
return STATE.mediaView.zoneHeight() - (verticalMargin * 2)
}
function getTotalThumbs() {
var zoneWidth = getZoneWidth()
var zoneHeight = getZoneHeight()
var gap = STATE.overrides.thumbnailGap
return getNumberOfColumns(zoneWidth, gap) * getNumberOfRows(zoneHeight, gap)
}
// facade layer to map to current thumbsModule lazyloader
self.lazyLoader = {
update: function() {
var curThumbsModule = thumbsModules[curPage]
if(curThumbsModule.lazyLoader) curThumbsModule.lazyLoader.update()
}
}
self.getTotalHeight = function() {
thumbsModules ? thumbsModules[0].totalHeight : STATE.mediaView.zoneHeight()
}
self.mask = mask
self.section = vars.section
function handleNavIconDisplay(curPage) {
return function(staticNav) {
if(curPage === 0) {
staticNav.hide('prev')
} else if(curPage === thumbsModules.length - 1) {
staticNav.hide('next')
}
}
}
function buildStaticNav() {
return new StaticNav({
zIndex: 201,
axis: 'x',
align: LAYOUT_MODEL.staticNavAlignment || 'center',
scale: LAYOUT_MODEL.staticNavIconScale || 1,
zone: {
x: 0, //STATE.mediaView.zoneX(),
y: 0, //STATE.mediaView.zoneY(),
width: STATE.mediaView.zoneWidth(),
height: STATE.mediaView.zoneHeight()
},
offset: {
prevX: LAYOUT_MODEL.staticNavPrevOffsetX || 0,
prevY: LAYOUT_MODEL.staticNavPrevOffsetY || 0,
nextX: LAYOUT_MODEL.staticNavNextOffsetX || 0,
nextY: LAYOUT_MODEL.staticNavNextOffsetY || 0
},
paths: {
prev: {
d: svgPaths.arrow3Left,
fill: 'none',
stroke: LAYOUT_MODEL.cursorColor || '#333',
strokeWidth: LAYOUT_MODEL.staticNavStrokeWidth || 1
},
next: {
d: svgPaths.arrow3Right,
fill: 'none',
stroke: LAYOUT_MODEL.cursorColor || '#333',
strokeWidth: LAYOUT_MODEL.staticNavStrokeWidth || 1
}
},
prevClick: function(staticNav) {
curPage = curPage - 1 > 0 ? curPage - 1 : 0
var prevPage = thumbsModules[curPage]
// tweening 'translateX' causes strange behavior in Safari where the thumbs hide when outside
// the viewport and show all-at-once when the container has finished it's transition
Tween(container, 0.35, { x: -prevPage.x, ease:EASE.cubic.inOut, onComplete: function() {
if(curPage === 0) {
staticNav.hide('prev')
staticNav.show('next')
} else if(curPage === thumbsModules.length - 1) {
staticNav.hide('next')
staticNav.show('prev')
} else {
staticNav.show()
}
prevPage.lazyLoader.update()
}})
},
nextClick: function(staticNav) {
curPage = curPage + 1 < thumbsModules.length ? curPage + 1 : thumbsModules.length - 1
var nextPage = thumbsModules[curPage]
// tweening 'translateX' causes strange behavior in Safari where the thumbs hide when outside
// the viewport and show all-at-once when the container has finished it's transition
Tween(container, 0.35, { x: -nextPage.x, ease:EASE.cubic.inOut, onComplete: function() {
if(curPage === 0) {
staticNav.hide('prev')
staticNav.show('next')
} else if(curPage === thumbsModules.length - 1) {
staticNav.hide('next')
staticNav.show('prev')
} else {
staticNav.show()
}
nextPage.lazyLoader.update()
}})
}
})
}
function getPagesItems(mediaItems) {
return mediaItems
.reduce(function(acc, mediaId, i) {
if(i % totalThumbs === 0) acc.push([])
var prevPage = acc[acc.length - 1]
prevPage.push(mediaId)
return acc
}, [])
}
function buildThumbsModules() {
totalThumbs = getTotalThumbs()
pagesItems = getPagesItems(vars.mediaItems)
return pagesItems
.map(function(mediaItems) {
return new ThumbsModule({
path:vars.path,
mediaItems:mediaItems,
settings:vars.settings,
events:vars.events,
localEvents:vars.localEvents,
parent:vars.parent,
section:vars.section
})
})
}
function build(container) {
thumbsModules = buildThumbsModules()
container.removeChildren(container)
container.x = 0
return thumbsModules
.reduce(function(el, thumbsModule) {
thumbsModule.show()
el.addChild(thumbsModule)
return el
}, container)
}
if(vars.mediaItems.length > 0) {
// initial build needs "new Sprite" for container
container = build(new Sprite())
container.zIndex = 1
container.element.className = 'paginated container'
self.mask.element.className = 'paginated mask'
self.mask.width = STATE.mediaView.zoneWidth()
self.mask.height = STATE.mediaView.zoneHeight()
self.layout = function() {
thumbsModules.forEach(function(module, i) {
module.resize()
module.x = i * STATE.mediaView.zoneWidth()
})
}
self.transition = new PaginatedSlideTransition({mediaView:self, mediaViewContainer:container, event:vars.events})
self.resize = function() {
build(container)
if(curPage > thumbsModules.length - 1) curPage = thumbsModules.length - 1
if(self.staticNav) {
self.staticNav.resize({
x: 0, //STATE.overlayView.x(),
y: 0, //STATE.overlayView.y(),
width: STATE.overlayView.zoneWidth(),
height: STATE.overlayView.zoneHeight()
})
if(!thumbsModules.length || thumbsModules.length === 1) {
self.staticNav.hide()
} else if(curPage === 0) {
self.staticNav.hide('prev')
self.staticNav.show('next')
} else if(curPage === thumbsModules.length - 1) {
self.staticNav.hide('next')
self.staticNav.show('prev')
} else {
self.staticNav.show()
}
}
self.layout()
Tween(container, 0.35, { x: -thumbsModules[curPage].x })
}
self.removeStaticNav = function() {
self.removeChild(self.staticNav)
}
self.staticNav = buildStaticNav()
if(!thumbsModules.length || thumbsModules.length === 1) {
self.staticNav.hide()
} else if(curPage === 0) {
self.staticNav.hide('prev')
self.staticNav.show('next')
} else if(curPage === thumbsModules.length - 1) {
self.staticNav.hide('next')
self.staticNav.show('prev')
} else {
self.staticNav.show()
}
self.resize()
}
self.show = function() {
// show arrows
self.display = 'block'
thumbsModules.forEach(function(module, i) {
module.show()
})
toggleState = true
}
self.hide = function() {
// hide arrows
thumbsModules.forEach(function(module) {
module.hide()
})
setTimeout(function() {
self.display = 'none'
}, UPDATE_SPEED * 1000)
toggleState = false
}
self.toggleState = function() {
return toggleState
}
self.highlight = function() {
if(container) {
var currentPage = container.children[curPage]
currentPage.highlight()
}
}
self.mask.addChild(container)
self.addChild(self.mask)
self.addChild(self.staticNav)
return self
}
function PaginatedSlideTransition(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
function transition(assetId, transitionDuration) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : STATE.mediaView.transitionDuration();
_localEvents.dispatchEvent(TRANSITION_START);
var ease = TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut;
var asset = _container.children[assetId];
if(asset) {
var assetX = asset.x;
var assetY = asset.y;
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:ease, onComplete:function(){
_localEvents.dispatchEvent(TRANSITION_END);
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}});
if(USER_AGENT === MOBILE) {
var items = _container.children
for(var i = 0; i < items.length; i++) {
var item = items[i];
item.i = i;
if(i === assetId || i === assetId -1 || i === assetId + 1) {
item.element.style.visibility = 'visible';
} else {
item.element.style.visibility = 'hidden';
}
}
}
}
}
transition.destroy = function destroy() {
// dummy
}
return transition;
}
function ThumbsModule(vars) {
"use strict";
var self = new Sprite({events:vars.events}),
mask,
grid,
gridContainer,
axis = STATE.overrides.thumbnailSide === 'left' || STATE.overrides.thumbnailSide === 'right' || /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) ? 'y' : 'x',
align = axis === 'y' ? 'top' : 'left',
thumbArr = [],
thumbsStyle,
titleBlockHeight = 0,
titleBlock,
toggle,
dock,
maxGap = STATE.overrides.thumbnailGap,
tile = new Tile({
name:'thumbs',
type:STATE.overrides.thumbnailType,
marginHorizontal: percentToPixels(STATE.overrides.thumbnailHorizontalMargin, stage.width),
marginVertical: percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height),
maintainOrder:/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryMaintainOrder,
horizontalMasonry:/hMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryEvenRowHeight,
masonryFill:/hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryFill,
gap: STATE.overrides.thumbnailGap
}),
assetId;
self.currentThumb = 1;
self.settings = vars.settings;
self.tile = tile;
self.pointerEvents = 'auto';
self.isInit = true;
self.element.setAttribute('class', 'Thumbs.container');
self.selectable = false
self.build = function() {
self.updateSpeed = 0;
self.holdersBuilt = false;
self.id = 'thumbs';
self.overflow = 'hidden';
self.zIndex = 200;
self.alpha = 0;
mask = self.mask = new Sprite();
mask.id = 'mask';
mask.overflow = 'hidden';
mask.zIndex = 1;
mask.element.setAttribute('class', 'Thumbs.mask');
if(STATE.overrides.thumbnailDock === 'overlay' || /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
mask.backgroundColor = toRgba(LAYOUT_MODEL.overlayColor, LAYOUT_MODEL.overlayAlpha);
}
self.addChild(mask);
self.mask = mask;
grid = new Sprite();
grid.id = 'grid';
grid.element.setAttribute('class', 'Thumbs.grid');
grid.element.style.transform = 'translateZ(0)'
if(/hMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryFill) {
grid.overflowX = 'hidden'
}
mask.grid = grid
gridContainer = new Sprite();
gridContainer.id = 'grid-container';
gridContainer.element.setAttribute('class', 'Thumbs.grid.container');
gridContainer.element.style.transform = 'translateZ(0)'
mask.gridContainer = gridContainer;
mask.addChild(gridContainer)
// setup Containerlazy loContainerader
var lazyVars = {Containername:'thumbs'}
if(isPod() || isPad()) {
lazyVars.domElementScroll = true
}
if(LAYOUT_MODEL.unifiedPageScrolling && (/native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll) && STATE.overrides.thumbnailType !== 'strip' && BROWSER_NAME !== 'MSIE') {
lazyVars.windowScroll = true
}
if(MAC_SCROLLBARS && (/native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
lazyVars.domElementScroll = true
} else {
lazyVars.property = 'translate'
}
lazyVars.targetChildren = grid.children
var gridHolder = STATE.overrides.thumbnailType === 'strip' ? grid : gridContainer
self.lazyLoader = new LazyLoader(gridHolder, mask, lazyVars);
self.lazyLoader.name = 'thumbs'
toggle = new Toggle({
target: self,
on: self.hide,
off: self.show
});
var moveDistanceX = 0
var moveDistanceY = 0
var touchStartPointX = 0
var touchStartPointY = 0
var swiping
var scrolling
if(/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && vars.section.thumb && vars.section.thumb.titleBlock) {
titleBlock = buildTitleBlock(vars.section)
//titleBlock.y = percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height)
titleBlockHeight = STATE.overrides.thumbnailTitleBlockTopMargin + titleBlock.element.offsetHeight
titleBlock.y = STATE.overrides.thumbnailTitleBlockTopMargin
mask.gridContainer.addChild(titleBlock)
}
if(isPod() || isPad()) {
if(axis === 'y') {
mask.element.style.overflowY = 'scroll'
mask.element.style.overflowX = 'hidden'
} else {
mask.element.style.overflowY = 'hidden'
mask.element.style.overflowX = 'scroll'
}
mask.element.style['-webkit-overflow-scrolling'] = 'touch'
grid.element.addEventListener('touchstart', function(e) {
moveDistanceX = 0;
moveDistanceY = 0;
touchStartPointX = e.touches[0].pageX;
touchStartPointY = e.touches[0].pageY;
})
grid.element.addEventListener('touchmove', function(e) {
moveDistanceX = e.touches[0].pageX - touchStartPointX;
moveDistanceY = e.touches[0].pageY - touchStartPointY;
if(Mth.abs(moveDistanceX) > Mth.abs(moveDistanceY)) {
if(moveDistanceX > 0) {
// swiping right
if(mask.element.scrollLeft > 0 && mask.element.scrollLeft <= grid.width - layoutCalcs.mediaView.width()) {
// prevent menu touch events from listening to thumbs touch moves
// when in scrolling limits
e.stopPropagation()
}
} else {
// swiping left
if(axis === 'x') {
// prevent menu touch events from listening to thumbs touch moves
// when in scrolling limits
e.stopPropagation()
}
}
swiping = true;
scrolling = false;
} else {
scrolling = true;
swiping = false;
}
if(self.lazyLoader) self.lazyLoader.update();
})
grid.element.addEventListener('touchend', function(e) {
if(self.lazyLoader) self.lazyLoader.update();
})
mask.element.addEventListener("scroll", function(){
if(self.lazyLoader) self.lazyLoader.update();
})
if(LAYOUT_MODEL.unifiedPageScrolling) {
window.addEventListener("scroll", function(e){
if(self.lazyLoader) self.lazyLoader.update();
})
}
} else {
if(LAYOUT_MODEL.unifiedPageScrolling && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && (/native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
// native scroll bar
window.addEventListener("scroll", function(e){
if(self.lazyLoader) self.lazyLoader.update();
})
} else if(MAC_SCROLLBARS && (/native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
// native scroll bar
// this overflow doesnt apply for unified page scroll because
// the page height is getting set to the content height
mask.element.addEventListener("scroll", function(){
if(self.lazyLoader) self.lazyLoader.update();
})
if(axis === 'y') {
mask.element.style.overflowY = 'scroll'
mask.element.style.overflowX = 'hidden'
} else {
mask.element.style.overflowY = 'hidden'
mask.element.style.overflowX = 'scroll'
}
} else {
makeCloseHit();
var scrollBarWidth = STATE.overrides.thumbnailType === 'strip' ? 0 : STATE.overrides.thumbnailScrollbarWidth;
var scrollBarOffsetX = STATE.overrides.thumbnailScrollbarAlignment === 'right' ? -STATE.overrides.thumbnailScrollbarHorizontalOffset - scrollBarWidth : STATE.overrides.thumbnailScrollbarHorizontalOffset + scrollBarWidth;
var scrollAxis = isHorizontalStrip() ? 'x' : 'y'
if(STATE.overrides.thumbnailType === 'strip') {
align = axis === 'y' ? STATE.overrides.thumbnailAlignVertical || 'center' : STATE.overrides.thumbnailAlignHorizontal || 'center'
}
var scrollProps = {
name:'thumbs',
types: ['bar','wheel','touch'],
axis: scrollAxis,
align: align,
zIndex: STATE.overlayView.zIndex + 1,
// margin: percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height),
// marginTop: titleBlock ? 0 : percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height),
// marginBottom: percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height),
color: STATE.overrides.thumbnailScrollbarColor,
hover: STATE.overrides.thumbnailScrollbarHover,
side: STATE.overrides.thumbnailScrollbarAlignment,
alpha: STATE.overrides.thumbnailScrollbarBgAlpha,
width: scrollBarWidth,
offsetX: STATE.overlayView.x() + scrollBarOffsetX,
offsetY: STATE.overlayView.y() + STATE.overrides.thumbnailScrollbarVerticalOffset,
property: 'translate',
rounded: STATE.overrides.thumbnailScrollbarRounded,
visibility: STATE.overrides.thumbnailScrollbarVisibility,
parent: vars.parent
}
if(/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
scrollProps.marginTop = titleBlock ? STATE.overrides.thumbnailTitleBlockTopMargin : percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height)
scrollProps.marginBottom = percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height)
} else {
scrollProps.margin = 0
}
if(/native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll) {
// simulated native scroll bar
scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'right'
scrollProps.alpha = 0
scrollProps.width = scrollBarWidth
scrollProps.offsetX = STATE.overlayView.x() - 10
scrollProps.offsetY = STATE.overlayView.y()
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
// gridContainer is a problem for thumb strip
// so we are bypassing is for now since thumb desc isnt used there
// if it is needed then the bounds stuff needs to be applied to
// the ThumbStrip module below ... similar to how it was done for grid
var gridHolder = STATE.overrides.thumbnailType === 'strip' ? grid : gridContainer
self.scroll = new Scroll(gridHolder, mask, scrollProps);
}
}
if(self.scroll) {
self.scroll.addEventListener(SCROLL, function(){
if(self.lazyLoader) self.lazyLoader.update();
});
self.scroll.addEventListener('WINDOW_SCROLL_TOP', function(){
self.scroll.percent = 0;
self.scroll.update(UPDATE_SPEED);
});
}
if(vars.mediaItems.length > 0) makeHolders()
toggle.state = true
self.resize()
toggle.state = false
self.isInit = false
};
function buildTitleBlock(section) {
var titleBlock = new Sprite()
titleBlock.selectable = true
titleBlock.text = section.thumb.titleBlock
titleBlock.fontFamily = LAYOUT_MODEL.thumbnailTitleBlockFont || STATE.overrides.thumbnailTitleFont
titleBlock.fontColor = LAYOUT_MODEL.thumbnailTitleBlockFontColor || STATE.overrides.thumbnailTitleFontColor
titleBlock.fontSize = LAYOUT_MODEL.thumbnailTitleBlockFontSize || STATE.overrides.thumbnailTitleFontSize
titleBlock.textAlign = LAYOUT_MODEL.thumbnailTitleBlockJustification || 'left'
titleBlock.width = getZoneWidth()
document.body.appendChild(titleBlock.element)
document.body.removeChild(titleBlock.element)
return titleBlock
}
function makeCloseHit() {
var firstMediaItem = typeof vars.mediaItems[0] === 'object' ? vars.mediaItems[0] : getMediaById(vars.mediaItems[0])
// var firstMediaItem = getMediaById(vars.mediaItems[0]);
if(!(firstMediaItem.type === 'link' && firstMediaItem.thumb)) {
if(!vars.thumbnailOnly) {
mask.addEventListener(CLICK, closeOverlay);
}
}
}
function getFilename(mediaItem, width, height) {
var filename = '';
if(mediaItem.type === 'image') filename = mediaItem.content;
if(mediaItem.thumb) filename = mediaItem.thumb;
if(mediaItem.thumb && mediaItem.demoFile) {
return CDN_PF_SSL_URI + '/media/' + mediaItem.thumb;
} else if(mediaItem.thumb) {
return SETTINGS_MODEL.cdnSslUri + '/' + mediaItem.thumb;
} else if(getExt(filename) === 'gif') {
return SETTINGS_MODEL.cdnSslUri + '/' + mediaItem.content;
} else if(filename) {
return getThumbQuery(width, height, filename, mediaItem.demoFile);
}
return getDefaultThumb(mediaItem.type);
}
function getOriginalFilename(mediaItem, width, height) {
var filename = '';
if(mediaItem.type === 'image') filename = mediaItem.content;
if(mediaItem.thumb) filename = mediaItem.thumb;
if(mediaItem.thumb && mediaItem.demoFile) {
return CDN_PF_SSL_URI + '/media/' + filename;
} else if(mediaItem.thumb) {
return SETTINGS_MODEL.cdnSslUri + '/' + filename;
} else if(getExt(filename) === 'gif') {
return SETTINGS_MODEL.cdnSslUri + '/' + filename;
} else if(filename) {
// return getThumbQuery(width, height, filename, mediaItem.demoFile);
return cdnMediaPath(filename, mediaItem.demoFile)
}
return getDefaultThumb(mediaItem.type);
}
function getHoverAlpha() {
if(USER_AGENT === MOBILE) {
return firstValid(STATE.overrides.thumbnailHoverAlphaMobile, STATE.overrides.thumbnailHoverAlpha)
} else if(USER_AGENT === TABLET) {
return firstValid(STATE.overrides.thumbnailHoverAlphaTablet, STATE.overrides.thumbnailHoverAlpha)
} else {
return STATE.overrides.thumbnailHoverAlpha
}
}
function getSelectedAlpha() {
if(USER_AGENT === MOBILE) {
return firstValid(STATE.overrides.thumbnailSelectedAlpha, STATE.overrides.thumbnailHoverAlphaMobile, STATE.overrides.thumbnailHoverAlpha)
} else if(USER_AGENT === TABLET) {
return firstValid(STATE.overrides.thumbnailSelectedAlpha, STATE.overrides.thumbnailHoverAlphaTablet, STATE.overrides.thumbnailHoverAlpha)
} else {
return firstValid(STATE.overrides.thumbnailSelectedAlpha, STATE.overrides.thumbnailHoverAlpha)
}
}
function getLoaderColor() {
var c1, avg, tint;
if(/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && !STATE.overrides.thumbnailMasonry) {
c1 = parseColor(LAYOUT_MODEL.overlayColor);
avg = (c1[0] + c1[1] + c1[2]) * 0.33;
return avg < 128 ? '#FFFFFF' : '#000000';
}
c1 = parseColor(LAYOUT_MODEL.containerColor);
avg = (c1[0] + c1[1] + c1[2]) * 0.33;
return avg < 128 ? '#FFFFFF' : '#000000';
}
function makeHolders() {
var items = vars.mediaItems
var assetIndex = 0
var l = items.length
var i = 0
var numberOfColumns = getNumberOfColumns(getZoneWidth(), STATE.overrides.thumbnailMaxCols, STATE.overrides.thumbnailGap)
for(; i < l; i++) {
(function(i) {
setTimeout(function() {
var mediaItem = typeof items[i] === 'object' ? items[i] : getMediaById(items[i])
if(mediaItem) {
var width = getThumbWidth(mediaItem)
var height = getThumbHeight(mediaItem)
var hRange = getHRange(!STATE.overrides.thumbnailMasonryMaintainOrder && mediaItem.overrides.thumbScaleFactor, STATE.overrides.thumbnailGap)
var vRange = getVRange(!STATE.overrides.thumbnailMasonryMaintainOrder && mediaItem.overrides.thumbScaleFactor, STATE.overrides.thumbnailGap)
var holder = new Sprite()
holder.alpha = 0;
holder.mediaItem = mediaItem;
holder.backgroundColor = toRgba(firstValid(STATE.overrides.thumbnailGridColor, LAYOUT_MODEL.overlayColor), STATE.overrides.thumbnailGridTransparency);
if(/strip|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
var scale = ScaleEngine({
type:'fit',
hRange:hRange,
vRange:vRange,
width:width,
height:height,
disableOrientationCheck:true
});
width = Math.ceil(scale.width);
height = Math.ceil(scale.height);
} else if(!STATE.overrides.thumbnailMasonryMaintainOrder && mediaItem.overrides.thumbScaleFactor && numberOfColumns > 1) {
width = (THUMB_SIZES[STATE.overrides.thumbnailSize].width * 2) + STATE.overrides.thumbnailGap
height = (THUMB_SIZES[STATE.overrides.thumbnailSize].height * 2) + STATE.overrides.thumbnailGap
hRange = (THUMB_SIZES[STATE.overrides.thumbnailSize].width * 2) + STATE.overrides.thumbnailGap
vRange = (THUMB_SIZES[STATE.overrides.thumbnailSize].height * 2) + STATE.overrides.thumbnailGap
} else {
width = THUMB_SIZES[STATE.overrides.thumbnailSize].width
height = THUMB_SIZES[STATE.overrides.thumbnailSize].height
hRange = THUMB_SIZES[STATE.overrides.thumbnailSize].width
vRange = THUMB_SIZES[STATE.overrides.thumbnailSize].height
}
var widthFloor = width
var heightFloor = height
holder.width = widthFloor;
holder.height = heightFloor;
holder.filename = getFilename(mediaItem, width, height);
holder.original = getOriginalFilename(mediaItem, width, height);
if(isBlogFeed(vars.section.id)) {
holder.index = inverseAssetId(assetIndex, vars.section.mediaItems.length - 1);
} else {
holder.index = assetIndex;
}
if(mediaItem.type !== 'link') assetIndex ++
holder.thumb = new Bitmap();
// attempts to retry a load after a fail
holder.thumb.attempts = 0
holder.thumb.selectable = false
var thumbScale = ScaleEngine({
type:'fit',
hRange:hRange,
vRange:vRange,
width:mediaItem.size.thumb.width || mediaItem.size.content.width || THUMB_SIZES[STATE.overrides.thumbnailSize].width,
height:mediaItem.size.thumb.height || mediaItem.size.content.height || THUMB_SIZES[STATE.overrides.thumbnailSize].height,
disableOrientationCheck:true
});
var align = new AlignEngine({
hRange:width,
vRange:height,
hAlign:STATE.overrides.thumbnailAlignHorizontal || 'center',
vAlign:STATE.overrides.thumbnailAlignVertical || 'center',
width:thumbScale.width,
height:thumbScale.height
});
// set width/height to Math.ceil and x/y to Math.foor
// for alignment issues, possibly a better solotion would be
// doing the Math rounding input for the Scale and Align Engines
holder.thumb.width = Math.ceil(thumbScale.width);
holder.thumb.height = Math.ceil(thumbScale.height);
holder.thumb.x = Math.floor(align.x);
holder.thumb.y = Math.floor(align.y);
if(mediaItem.type === VIDEO && STATE.overrides.thumbnailVideoPlayIcon) {
buildPlayIcon(holder, width, height);
}
if(holder.playBtn) {
holder.playBtn.x = Math.round((width - 50) * 0.5);
holder.playBtn.y = Math.round((height - 50) * 0.5);
}
var labelPosition = getLabelPosition(vars.isIndexSection)
holder.selectable = true
if(labelPosition && labelPosition !== 'none') {
holder.label = new TextField();
holder.label.selectable = true
var labelText = mediaItem.alias || mediaItem.label
if(mediaItem.subTitle) labelText += "
" + mediaItem.subTitle + "
"
holder.label.text = labelText
holder.label.element.style.wordBreak = 'break-word';
holder.label.fontFamily = STATE.overrides.thumbnailTitleFont;
holder.label.fontColor = STATE.overrides.thumbnailTitleFontColor;
holder.label.fontSize = STATE.overrides.thumbnailTitleFontSize;
holder.label.width = width;
holder.label.textAlign = getLabelJustification(vars.isIndexSection);
holder.label.zIndex = 5;
var textDims = getSpriteDims(holder.label);
switch(labelPosition) {
case 'top':
// if(holder.playBtn) {
// holder.playBtn.x = Math.round((width - 50) * 0.5);
// holder.playBtn.y = Math.round((height - 50) * 0.5) + 10 + textDims.height;
// }
holder.label.y = firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
// holder.height = height + 10 + textDims.height
// heightFloor = Math.round(height + 10 + textDims.height)
holder.thumb.y = textDims.height + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
maxGap = textDims.height + (firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5) * 2) > maxGap ? textDims.height + (firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5) * 2) : maxGap
// #1247 add in label height to total holder height / backgroundColor for top and bottom labels
holder.height = height + maxGap
break
case 'over':
case 'hover':
if(mediaItem.type === VIDEO && STATE.overrides.thumbnailVideoPlayIcon) {
// offset the label to the top of the video play icon
holder.label.y = ((height - 50) * 0.5) - textDims.height + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 0)
} else {
holder.label.y = (height - textDims.height) * 0.5 + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 0)
}
// holder.height = height + 10 + textDims.height
// heightFloor = height
holder.label.pointerEvents = 'none'
if(USER_AGENT === MOBILE || isPod()) {
holder.label.alpha = 1
} else if(USER_AGENT === TABLET || isPad()) {
holder.label.alpha = 1
} else if(labelPosition === 'over') {
holder.label.alpha = 1
} else {
holder.label.alpha = 0
}
break
case 'bottom':
default:
// default is bottom
holder.label.y = height + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
// holder.height = height + 10 + textDims.height
// heightFloor = Math.round(height + 10 + textDims.height)
maxGap = textDims.height + (firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5) * 2) > maxGap ? textDims.height + (firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5) * 2) : maxGap
// #1247 add in label height to total holder height / backgroundColor for top and bottom labels
holder.height = height + maxGap
break
}
holder.addChild(holder.label);
}
if(STATE.overrides.thumbnailLoaderType === 'spinner') {
holder.loader = new LoadingIndicator({type:'spinner', alpha:0.65, color:getLoaderColor()});
holder.addChild(holder.loader);
holder.loader.x = (width - holder.loader.width) * 0.5;
holder.loader.y = (height - holder.loader.height) * 0.5;
}
var hit = new Sprite();
hit.id = 'hit';
hit.zIndex = 4;
if(USER_AGENT === MOBILE && labelPosition === 'hover') {
hit.alpha = firstValid(STATE.overrides.thumbnailHoverAlphaMobile, STATE.overrides.thumbnailHoverAlpha)
} else if(USER_AGENT === TABLET && labelPosition === 'hover') {
hit.alpha = firstValid(STATE.overrides.thumbnailHoverAlphaTablet, STATE.overrides.thumbnailHoverAlpha)
} else {
hit.alpha = 0
}
hit.y = holder.thumb.y
hit.width = widthFloor;
hit.height = heightFloor;
hit.backgroundColor = STATE.overrides.thumbnailHoverColor;
if(BROWSER_NAME === 'Safari') {
// to prevent transition flicker in Safari #1052
hit.style['-webkit-backface-visibility'] = 'hidden';
hit.style.transform = 'translateZ(0px)';
}
holder.addChild(hit);
holder.hit = hit;
var zoneWidth = getZoneWidth()
var numberOfColumns = getNumberOfColumns(zoneWidth, STATE.overrides.thumbnailMaxCols, STATE.overrides.thumbnailGap)
var thumbnailMaintainOrder = /hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryMaintainOrder
var isDoubleSize = numberOfColumns > 1 && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && !thumbnailMaintainOrder ? mediaItem.overrides.thumbScaleFactor : false
tile.addItem(width, holder.height, isDoubleSize);
holder.defaultWidth = widthFloor
holder.defaultHeight = heightFloor
grid.addChild(holder);
thumbArr.push(holder);
if(vars.thumbnailOnly && (mediaItem.type === 'image' || mediaItem.type === 'video')) {
// disable click for thumbnail
} else {
hit.addEventListener(MOUSE_OVER, onMouseOver);
hit.addEventListener(MOUSE_OUT, onMouseOut);
hit.addEventListener(CLICK, select);
}
hit.element.addEventListener('contextmenu', disable);
hit.element.addEventListener('dragstart', disable);
function disable(e) {
var disableRightClick = SETTINGS_MODEL.disableRightClick === undefined || SETTINGS_MODEL.disableRightClick
if(disableRightClick) {
e.preventDefault();
}
}
holder.load = load;
holder.unload = unload;
if(i === l - 1) {
setTimeout(function() {
mask.gridContainer.addChild(grid);
self.holdersBuilt = true;
self.updateSpeed = UPDATE_SPEED;
// if(self.scroll && STATE.overrides.thumbnailType === 'strip') {
// self.scroll.align = 'center';
// }
self.events.dispatchEvent('holdersBuilt')
defineThumbsStyle()
self.resize();
}, 0);
}
}
}, 0);
})(i);
}
// setTimeout(function() {
// mask.addChild(grid);
// self.holdersBuilt = true;
// self.updateSpeed = UPDATE_SPEED;
// if(self.scroll && STATE.overrides.thumbnailType === 'strip') {
// self.scroll.align = 'center';
// }
// self.resize();
// }, 100);
}
function getDefaultThumb(type) {
var link = ICONS;
switch(type) {
case VIDEO:
link += 'video2@2x.png';
break;
case HTML:
link += 'text3@2x.png';
break;
case SWF:
link += 'swf@2x.png';
break;
case LINK:
link += 'link@2x.png';
break;
case PDF:
link += 'pdf@2x.png';
break;
case CONTACT:
link += 'contact@2x.png';
break;
}
return link;
}
function defineThumbsStyle() {
if(/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
thumbsStyle = new ThumbsFill({
titleBlock: titleBlock,
container: self,
mask: mask,
items: thumbArr,
side: STATE.overrides.thumbnailSide,
size: STATE.overrides.thumbnailSize,
horizontalMargin: percentToPixels(STATE.overrides.thumbnailHorizontalMargin, stage.width),
verticalMargin: titleBlockHeight + percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height) - STATE.overrides.thumbnailTitleBlockTopMargin,
masonry: STATE.overrides.thumbnailMasonry,
tile: tile,
parent: self,
grid: grid,
gap: STATE.overrides.thumbnailGap,
maxGap: maxGap,
events: vars.events,
isIndexSection: vars.isIndexSection
});
} else if(STATE.overrides.thumbnailType === 'strip') {
var reveal = STATE.overrides.thumbnailDock === 'displace' ? 0 : 24;
if(BROWSER_NAME === 'Safari') self.style['-webkit-backface-visibility'] = 'hidden';
var pOffset = isHorizontalStrip() ? percentToPixels(STATE.overrides.thumbnailHorizontalMargin, stage.width) : percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height)
dock = new Dock(self, layoutCalcs.mediaView.size, {
side:STATE.overrides.thumbnailSide,
align:'left',
pOffset:pOffset,
margin:0,
reveal:reveal,
updateSpeed:UPDATE_SPEED
});
thumbsStyle = new ThumbsStrip({
container: self,
mask: mask,
items: thumbArr,
side: STATE.overrides.thumbnailSide,
size: STATE.overrides.thumbnailSize,
horizontalMargin: percentToPixels(STATE.overrides.thumbnailHorizontalMargin, stage.width),
verticalMargin: percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height),
tile: tile,
parent: self
});
}
}
function buildPlayIcon(holder, width, height) {
var playBtn = new Bitmap();
playBtn.src = ICONS + 'play@2x.png';
playBtn.width = 50;
playBtn.height = 50;
playBtn.alpha = 0;
playBtn.zIndex = 3;
playBtn.thumbHolder = holder;
playBtn.index = holder.index;
Tween(playBtn, 1, {alpha:0.85});
holder.playBtn = playBtn;
holder.addChild(playBtn);
}
function onMouseOver(e) {
if(e.target.parent.label) {
Tween(e.target.parent.label, 0.35, {alpha:1})
}
Tween(e.target, 0.35, {alpha:getHoverAlpha(), backgroundColor:STATE.overrides.thumbnailHoverColor});
}
function onMouseOut(e) {
if(e.target.parent.mediaItem.type === 'link' || assetId !== e.target.parent.index || getSelectedAlpha() === 0) {
Tween(e.target, 0.2, {alpha:0});
} else {
Tween(e.target, 0.2, {alpha:getSelectedAlpha(), backgroundColor:STATE.overrides.thumbnailSelectedColor});
}
if(e.target.parent.label) {
var isIndex = isIndexSection(vars.section)
if((isIndex && STATE.overrides.thumbnailLabelPosition === 'hover') || (!isIndex && STATE.overrides.thumbnailStdLabelPosition === 'hover')) {
Tween(e.target.parent.label, 0.35, {alpha:0})
}
}
}
function select(e) {
e.stopPropagation();
var mediaItem = e.target.parent.mediaItem;
if(typeof mediaItem.content === 'string' && mediaItem.content.indexOf('vimeo:') === 0 && e.target.parent.vimeo) {
e.target.parent.vimeo.setSource(mediaItem.content)
e.target.parent.vimeo.element.style.zIndex = 5
Tween(e.target.parent.vimeo, UPDATE_SPEED, {alpha:1})
} else if(mediaItem.type === 'link') {
self.events.dispatchEvent(THUMB_CLICK, {
nothumbs:/nothumbs(\/|)$/.test(mediaItem.content),
type:'internal',
path:mediaItem.content.replace(/nothumbs(\/|)/i, ''),
linkTarget:mediaItem.linkTarget,
isThumbClick:false
});
} else {
self.events.dispatchEvent(THUMB_CLICK, {
assetId:Number(e.target.parent.index),
type:'internal',
path:vars.path,
linkTarget:'_self',
isThumbClick:true,
isMobileVideoClick: mediaItem.type === 'video' && USER_AGENT === MOBILE && STATE.overrides.mobileAutoPlay
});
}
}
function closeOverlay(e) {
vars.events.dispatchEvent(NAVBAR_OVERLAY_BTN_CLICK, "thumbs");
}
function loadError(e) {
var thumb = e.target
if(thumb.attempts < 2 && thumb.parent.mediaItem.thumb) {
// error loading thumb, falling back to demo content container
thumb.src = CDN_PF_SSL_URI + '/media/' + thumb.parent.mediaItem.thumb
thumb.attempts ++
} else {
thumb.removeEventListener(ERROR, loadError)
}
}
function exceedsSizeCheck(thumb) {
if(RETINA) {
return (thumb.width > 500 || thumb.height > 500)
} else {
return (thumb.width > 1000 || thumb.height > 1000)
}
}
function loadVimeoPlayer(holder) {
var thumb = holder.thumb
var mediaItem = holder.mediaItem
var vimeo = new VimeoPlayer({
parent: holder,
thumbBuild: true,
width:Math.floor(holder.width),
height:Math.floor(holder.height)
})
vimeo.setSize(Math.floor(holder.width), Math.floor(holder.height))
vimeo.zIndex = -2
vimeo.alpha = 0
holder.addChild(vimeo)
holder.vimeo = vimeo
vimeo.addEventListener(VIMEO_METADATA_LOADED, function(e) {
vimeo.play()
})
if(vars.thumbnailOnly) {
holder.hit.element.onclick = function(e) {
vimeo.zIndex = 5
Tween(vimeo, UPDATE_SPEED, {alpha:1})
Tween(thumb, UPDATE_SPEED, {alpha:0})
vimeo.setSource(mediaItem.content)
}
}
vimeo.onplay = function() {
pauseThumbVideos(vimeo)
// Tween(vimeo, UPDATE_SPEED, {alpha:1})
// Tween(thumb, UPDATE_SPEED, {alpha:0})
}
vimeo.onpause = function() {
// vimeo.element.style.zIndex = -2
// Tween(vimeo, UPDATE_SPEED, {alpha:0})
}
}
function loadVideoPlayer(holder) {
var thumb = holder.thumb
var mediaItem = holder.mediaItem
var video = new VideoPlayer({
parent:holder,
thumbBuild: true,
width:Math.floor(holder.hit.width),
height:Math.floor(holder.hit.height)
})
video.alpha = 0
holder.addChild(video)
holder.video = video
holder.hit.element.onclick = function() {
pauseThumbVideos(video)
video.setSource(mediaItem.content)
video.play()
video.element.style.zIndex = 5
Tween(video, UPDATE_SPEED, {alpha:1})
Tween(thumb, UPDATE_SPEED, {alpha:0})
}
video.element.onclick = function() {
if(video.paused) {
pauseThumbVideos(video)
video.play()
} else {
video.pause()
}
}
}
function load() {
var holder = this
var thumb = holder.thumb
var mediaItem = holder.mediaItem
if(thumbsStyle && (!holder.loaded || !holder.thumb.src)) {
holder.thumb.addEventListener(LOAD, thumbsStyle.thumbLoaded);
holder.thumb.addEventListener(ERROR, loadError);
if(exceedsSizeCheck(holder.thumb) || STATE.overrides.thumbnailFullRes) {
holder.thumb.src = holder.original;
} else {
holder.thumb.src = holder.filename;
}
holder.thumb.alpha = 0;
holder.loaded = true;
holder.addChild(holder.thumb);
}
if(holder.mediaItem.type === VIDEO && !holder.vimeo && !holder.video) {
if(holder.mediaItem.content.indexOf('vimeo') === 0 && ((USER_AGENT === MOBILE && STATE.overrides.mobileAutoPlay) || vars.thumbnailOnly)) {
loadVimeoPlayer(holder)
} else if(vars.thumbnailOnly) {
loadVideoPlayer(holder)
}
}
}
function filterVideo(holder) {
return holder.mediaItem.type === 'video' && (holder.vimeo || holder.video)
}
function pauseThumbVideos(thisVideo) {
self.mask.grid.children
.filter(filterVideo)
.forEach(function(holder) {
if(holder.mediaItem.content.indexOf('vimeo') === 0) {
if(holder.vimeo !== thisVideo) {
holder.vimeo.pause()
}
} else if(holder.video !== thisVideo) {
holder.video.pause()
}
})
}
self.resizeThumbVideo = function resizeThumbVideos() {
self.mask.grid.children
.filter(filterVideo)
.forEach(function(holder) {
if(holder.video) {
holder.video.setSize(holder.width, holder.height)
} else if(holder.vimeo) {
holder.vimeo.setSize(holder.width, holder.height)
}
})
}
function unload() {
// if(this.thumb) {
// this.loaded = false;
// this.removeChild(this.thumb);
// delete this.thumb;
// }
if(this.mediaItem.type === VIDEO && this.vimeo && this.mediaItem.content.indexOf('vimeo') === 0 && USER_AGENT === MOBILE && STATE.overrides.mobileAutoPlay) {
this.removeChild(this.vimeo);
}
}
self.highlight = function(value) {
if(USER_AGENT !== MOBILE && !vars.thumbnailOnly) {
var i = thumbArr.length
assetId = Number(value !== undefined ? value : vars.assetId)
while(i--) {
if(i !== assetId) {
var mediaItem = thumbArr[i].hit.parent.mediaItem
var labelPosition = getLabelPosition(vars.isIndexSection)
if(!isThumbLink(mediaItem) && USER_AGENT !== MOBILE && USER_AGENT !== TABLET) {
Tween(thumbArr[i].hit, UPDATE_SPEED, {alpha:0})
if(thumbArr[i].hit.parent.label && labelPosition === 'hover' && USER_AGENT !== MOBILE && USER_AGENT !== TABLET) {
Tween(thumbArr[i].hit.parent.label, 0.35, {alpha:0})
}
}
}
}
if(assetId > -1 && thumbArr[assetId] && thumbArr[assetId].hit.parent.mediaItem.type !== 'link') {
self.currentThumb = assetId + 1
var mediaItem = thumbArr[assetId].hit.parent.mediaItem
var labelPosition = getLabelPosition(vars.isIndexSection)
Tween(thumbArr[assetId].hit, UPDATE_SPEED, {alpha:getSelectedAlpha(), backgroundColor:STATE.overrides.thumbnailSelectedColor})
// #1070 - don't want to leave the label selected
if(thumbArr[assetId].hit.parent.label && labelPosition === 'hover' && USER_AGENT !== MOBILE && USER_AGENT !== TABLET) {
Tween(thumbArr[assetId].hit.parent.label, 0.35, {alpha:0})
}
}
}
};
self.hide = function() {
if(toggle.state) {
Tween(self, UPDATE_SPEED, {alpha:0, onComplete:function() {
self.display = 'none';
self.updateSpeed = 0;
toggle.state = false;
}});
if(STATE.overrides.thumbnailType === 'strip') {
if(dock) dock.hide();
}
if(self.scroll) {
self.scroll.disable()
self.scroll.hide()
}
}
};
self.show = function() {
if(!toggle.state) {
self.display = 'block';
self.alpha = 0;
if(dock) dock.resize(0);
setTimeout(function() {
if(dock) dock.show();
Tween(self, UPDATE_SPEED, {alpha:1, onComplete:showComplete});
if(STATE.overrides.thumbnailScrollType === 'scrollbar' && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
if(self.scroll) self.scroll.enable()
}
if(self.scroll) {
self.scroll.show()
self.scroll.update()
}
}, 0);
}
};
function showComplete() {
toggle.state = true;
if(self.holdersBuilt) self.updateSpeed = UPDATE_SPEED;
}
self.toggle = function() {
toggle.flip();
if(STATE.overrides.thumbnailType === 'strip') {
dock.toggle();
}
if(toggle.state) {
self.show();
} else {
self.hide();
}
};
self.toggleState = function() {
return toggle.state;
};
self.resize = function() {
if(thumbsStyle) {
thumbsStyle.resize();
}
if(self.scroll) {
self.scroll.resize();
}
};
self.build();
return self;
}
function getIndexLabelPosition() {
var indexLabelPosition = STATE.overrides.thumbnailLabelPosition
if(USER_AGENT === MOBILE) indexLabelPosition = firstValid(STATE.overrides.thumbnailLabelPositionMobile, STATE.overrides.thumbnailLabelPosition)
if(USER_AGENT === TABLET) indexLabelPosition = firstValid(STATE.overrides.thumbnailLabelPositionTablet, STATE.overrides.thumbnailLabelPosition)
return indexLabelPosition
}
function getStdLabelPosition() {
var stdLabelPosition = STATE.overrides.thumbnailStdLabelPosition
if(USER_AGENT === MOBILE) stdLabelPosition = firstValid(STATE.overrides.thumbnailStdLabelPositionMobile, STATE.overrides.thumbnailStdLabelPosition)
if(USER_AGENT === TABLET) stdLabelPosition = firstValid(STATE.overrides.thumbnailStdLabelPositionTablet, STATE.overrides.thumbnailStdLabelPosition)
return stdLabelPosition
}
function getLabelPosition(isIndexSection) {
var indexLabelPosition = getIndexLabelPosition()
var stdLabelPosition = getStdLabelPosition()
if(isIndexSection) {
if(indexLabelPosition) return indexLabelPosition
} else {
if(stdLabelPosition) return stdLabelPosition
}
return false
}
function getIndexLabelJustification() {
var indexLabelJustification = STATE.overrides.thumbnailLabelJustification
// if(USER_AGENT === MOBILE) indexLabelJustification = firstValid(STATE.overrides.thumbnailLabelJustificationMobile, STATE.overrides.thumbnailLabelJustification)
// if(USER_AGENT === TABLET) indexLabelJustification = firstValid(STATE.overrides.thumbnailLabelJustificationTablet, STATE.overrides.thumbnailLabelJustification)
return indexLabelJustification
}
function getStdLabelJustification() {
var stdLabelJustification = STATE.overrides.thumbnailStdLabelJustification
// if(USER_AGENT === MOBILE) stdLabelJustification = firstValid(STATE.overrides.thumbnailStdLabelJustificationMobile, STATE.overrides.thumbnailStdLabelJustification)
// if(USER_AGENT === TABLET) stdLabelJustification = firstValid(STATE.overrides.thumbnailStdLabelJustificationTablet, STATE.overrides.thumbnailStdLabelJustification)
return stdLabelJustification
}
function getLabelJustification(isIndexSection) {
var indexLabelJustification = getIndexLabelJustification()
var stdLabelJustification = getStdLabelJustification()
if(isIndexSection) {
if(indexLabelJustification) return indexLabelJustification
} else {
if(stdLabelJustification) return stdLabelJustification
}
return 'center'
}
function isHorizontalStrip() {
return STATE.overrides.thumbnailType === 'strip' && (STATE.overrides.thumbnailSide === 'top' || STATE.overrides.thumbnailSide === 'bottom');
}
function isVerticalStrip() {
return STATE.overrides.thumbnailType === 'strip' && (STATE.overrides.thumbnailSide === 'left' || STATE.overrides.thumbnailSide === 'right');
}
function isMasonryGrid() {
return /hMasonry|vMasonry/.test(STATE.overrides.thumbnailType);
}
function getThumbWidth(mediaItem) {
return !isDefaultThumb(mediaItem) && (isHorizontalStrip() || isMasonryGrid() || isVerticalStrip()) ? mediaItem.size.thumb.width || mediaItem.size.content.width : THUMB_SIZES[STATE.overrides.thumbnailSize].width;
}
function getThumbHeight(mediaItem) {
return !isDefaultThumb(mediaItem) && (isHorizontalStrip() || isMasonryGrid() || isVerticalStrip()) ? mediaItem.size.thumb.height || mediaItem.size.content.height : THUMB_SIZES[STATE.overrides.thumbnailSize].height;
}
function getHRange(isDoubleSize, gap) {
if(/hMasonry/.test(STATE.overrides.thumbnailType) || (/vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryFill)) {
return getGridFillWidth(isDoubleSize, gap)
}
var hRange = THUMB_SIZES[STATE.overrides.thumbnailSize].width
var numberOfColumns = getNumberOfColumns(getZoneWidth(), STATE.overrides.thumbnailMaxCols, gap)
if(/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && isDoubleSize && numberOfColumns > 1) {
return (hRange * 2) + gap
}
return isHorizontalStrip() ? hRange * 10 : hRange
}
function getVRange(isDoubleSize, gap) {
var vRange = THUMB_SIZES[STATE.overrides.thumbnailSize].height;
var numberOfColumns = getNumberOfColumns(getZoneWidth(), STATE.overrides.thumbnailMaxCols, gap)
if(/fill|hMasonry/.test(STATE.overrides.thumbnailType) && isDoubleSize && numberOfColumns > 1) {
return (vRange * 2) + gap
}
return (isMasonryGrid() && !STATE.overrides.thumbnailMasonryEvenRowHeight) || isVerticalStrip() ? vRange * 10 : vRange;
}
function getZoneWidth() {
var horizontalMargin = percentToPixels(STATE.overrides.thumbnailHorizontalMargin, stage.width)
return STATE.mediaView.zoneWidth() - (horizontalMargin * 2)
}
function getNumberOfColumns(zoneWidth, maxCols, gap) {
maxCols = STATE.overrides.thumbnailType === 'fill' ? Infinity : maxCols
// scale thumb here to see if it fits
// for masonry fill fixed height
var thumbWidth = THUMB_SIZES[STATE.overrides.thumbnailSize].width + gap
// adding gap to zoneWidth because thumbWidth has one too many gaps
// Math.floor is correct, but using Math.round to match legacy vMasonry fill
var toInt = (/vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryFill) ? Math.round : Math.floor
var cols = toInt((zoneWidth + gap) / thumbWidth)
if(cols < maxCols) maxCols = cols < 1 ? 1 : cols
return maxCols ? maxCols : cols
}
function getGridFillWidth(isDoubleSize, gap) {
// thumb width for vertical masonry
if(STATE.overrides.thumbnailMasonryEvenRowHeight) return stage.width
var zoneWidth = getZoneWidth()
var numberOfColumns = getNumberOfColumns(zoneWidth, STATE.overrides.thumbnailMaxCols, gap)
var gaps = STATE.overrides.thumbnailGap * (numberOfColumns - 1)
var width = ((zoneWidth - gaps) / numberOfColumns)
if(/fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && isDoubleSize && numberOfColumns > 1) {
return (Math.round(width) * 2) + gap
}
return Math.round(width)
}
function isThumbLink(mediaItem) {
return mediaItem.type === 'link' && !!mediaItem.thumb;
}
function isDefaultThumb(mediaItem) {
return !mediaItem.thumb && mediaItem.type !== 'image';
}
function ThumbsFill(vars) {
var self = this,
container = vars.container,
mask = vars.mask,
side = vars.side,
size = vars.size,
masonry = vars.masonry,
grid = vars.grid,
titleBlock = vars.titleBlock,
tile = vars.tile;
tile.axis = 'y';
tile.align = 'left';
tile.wrap = true;
function arrange() {
if(/hMasonry/.test(STATE.overrides.thumbnailType) || (/vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryFill)) {
// for masonryFill set perpLength to total available zone width
tile.perpLength = getZoneWidth()
} else {
// for non-masonryFill set corrected perpLength to comp for max cols
var numberOfColumns = getNumberOfColumns(getZoneWidth(), STATE.overrides.thumbnailMaxCols, STATE.overrides.thumbnailGap)
var columnWidths = getHRange(false, STATE.overrides.thumbnailGap)
var gaps = STATE.overrides.thumbnailGap * (numberOfColumns - 1)
tile.perpLength = (columnWidths * numberOfColumns) + gaps
}
tile.layoutItems();
var items = mask.grid.children;
var i = 0,
l = items.length;
for(; i < l; i++) {
var position = tile.getPosition(i);
if(i === items.length - 1) {
items[i].lastItem = true;
}
var labelPosition = getLabelPosition(vars.isIndexSection)
var width = Math.round(position.width);
var height = Math.round(position.height);
items[i].width = width
items[i].height = height
if(STATE.overrides.thumbnailMasonryFill) {
items[i].thumb.width = width;
items[i].thumb.height = height;
}
items[i].hit.width = width;
items[i].hit.height = height;
if(items[i].playBtn) {
items[i].playBtn.x = Math.round((width - 50) * 0.5);
items[i].playBtn.y = Math.round((height -50) * 0.5);
}
if(items[i].label) {
items[i].label.width = width;
if(labelPosition && labelPosition !== 'none') {
switch(labelPosition) {
case 'top':
items[i].label.y = firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
items[i].thumb.y = items[i].label.height + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
// #1247 add in label height to total holder height / backgroundColor for top and bottom labels
items[i].height = height + items[i].label.height + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
break
case 'over':
case 'hover':
items[i].label.y = (height - items[i].label.height) * 0.5
if(items[i].mediaItem.type === VIDEO && STATE.overrides.thumbnailVideoPlayIcon) {
// offset the label to the top of the video play icon
items[i].label.y = ((height - 50) * 0.5) - items[i].label.height + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 0)
} else {
items[i].label.y = (height - items[i].label.height) * 0.5 + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 0)
}
break
case 'bottom':
default:
items[i].label.y = height + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
// #1247 add in label height to total holder height / backgroundColor for top and bottom labels
items[i].height = height + items[i].label.height + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
break
}
}
}
Tween(items[i], vars.parent.updateSpeed, {x:position.x, y:position.y, onComplete:function(){
Tween(this, UPDATE_SPEED, {alpha:1});
if(this.lastItem && vars.parent.lazyLoader && vars.parent.holdersBuilt) vars.parent.lazyLoader.update();
}});
}
}
this.resize = function() {
var titleBlockHeight = 0
if(titleBlock) {
titleBlock.width = getZoneWidth()
titleBlockHeight = STATE.overrides.thumbnailTitleBlockTopMargin + titleBlock.element.offsetHeight
}
var isBottomLabel = getLabelPosition(vars.isIndexSection) === 'bottom'
tile = new Tile({
name:'thumbs',
type:STATE.overrides.thumbnailType,
marginHorizontal: percentToPixels(STATE.overrides.thumbnailHorizontalMargin, stage.width),
marginVertical: titleBlockHeight + percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height) - STATE.overrides.thumbnailTitleBlockTopMargin,
gap: vars.gap,
vGap: STATE.overrides.thumbnailGapVertical || vars.maxGap,
lastRowGap: isBottomLabel,
axis: 'y',
align: 'left',
maintainOrder:STATE.overrides.thumbnailMasonryMaintainOrder,
horizontalMasonry:STATE.overrides.thumbnailMasonryEvenRowHeight,
masonryFill:/hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryFill,
wrap: true
})
var items = mask.grid.children;
var i = 0
var l = items.length
var zoneWidth = getZoneWidth()
var numberOfColumns = getNumberOfColumns(zoneWidth, STATE.overrides.thumbnailMaxCols, STATE.overrides.thumbnailGap)
for(; i < l; i++) {
var mediaItem = items[i].mediaItem
var width = getThumbWidth(mediaItem)
var height = getThumbHeight(mediaItem)
var hRange = getHRange(!STATE.overrides.thumbnailMasonryMaintainOrder && mediaItem.overrides.thumbScaleFactor, STATE.overrides.thumbnailGap)
var vRange = getVRange(!STATE.overrides.thumbnailMasonryMaintainOrder && mediaItem.overrides.thumbScaleFactor, STATE.overrides.thumbnailGap)
if(isMasonryGrid()) {
var scale = ScaleEngine({
type:'fit',
hRange:hRange,
vRange:vRange,
width:width,
height:height,
disableOrientationCheck:true
});
width = Math.ceil(scale.width);
height = Math.ceil(scale.height);
} else if(!STATE.overrides.thumbnailMasonryMaintainOrder && mediaItem.overrides.thumbScaleFactor && numberOfColumns > 1) {
width = (THUMB_SIZES[STATE.overrides.thumbnailSize].width * 2) + STATE.overrides.thumbnailGap
height = (THUMB_SIZES[STATE.overrides.thumbnailSize].height * 2) + STATE.overrides.thumbnailGap
hRange = (THUMB_SIZES[STATE.overrides.thumbnailSize].width * 2) + STATE.overrides.thumbnailGap
vRange = (THUMB_SIZES[STATE.overrides.thumbnailSize].height * 2) + STATE.overrides.thumbnailGap
} else {
width = THUMB_SIZES[STATE.overrides.thumbnailSize].width
height = THUMB_SIZES[STATE.overrides.thumbnailSize].height
hRange = THUMB_SIZES[STATE.overrides.thumbnailSize].width
vRange = THUMB_SIZES[STATE.overrides.thumbnailSize].height
}
var thumbScale = ScaleEngine({
type:'fit',
hRange:hRange,
vRange:vRange,
width:mediaItem.size.thumb.width || mediaItem.size.content.width || THUMB_SIZES[STATE.overrides.thumbnailSize].width,
height:mediaItem.size.thumb.height || mediaItem.size.content.height || THUMB_SIZES[STATE.overrides.thumbnailSize].height,
disableOrientationCheck:true
});
var align = new AlignEngine({
hRange:width,
vRange:height,
hAlign:STATE.overrides.thumbnailAlignHorizontal || 'center',
vAlign:STATE.overrides.thumbnailAlignVertical || 'center',
width:thumbScale.width,
height:thumbScale.height
});
// set width/height to Math.ceil and x/y to Math.foor
// for alignment issues, possibly a better solotion would be
// doing the Math rounding input for the Scale and Align Engines
items[i].thumb.width = Math.ceil(thumbScale.width);
items[i].thumb.height = Math.ceil(thumbScale.height);
items[i].thumb.x = Math.round(align.x);
items[i].thumb.y = Math.round(align.y);
// items[i].overflow = 'hidden'
// Math.ceil added to fill random gaps on mobile due to rounding issues
if(items[i].playBtn) {
items[i].playBtn.x = Math.round((width - 50) * 0.5);
items[i].playBtn.y = Math.round((height - 50) * 0.5);
}
items[i].width = width;
items[i].height = height;
items[i].hit.width = width;
items[i].hit.height = height;
var thumbnailMaintainOrder = /hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryMaintainOrder
var isDoubleSize = numberOfColumns > 1 && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && !thumbnailMaintainOrder ? items[i].mediaItem.overrides.thumbScaleFactor : false
tile.addItem(width, height, isDoubleSize);
}
if(/fill|vMasonry/.test(STATE.overrides.thumbnailType)) {
tile.gridWidths = getHRange(false, STATE.overrides.thumbnailGap)
tile.lastColumnWidth = /vMasonry/.test(STATE.overrides.thumbnailType) && STATE.overrides.thumbnailMasonryFill ? zoneWidth - ((tile.gridWidths + STATE.overrides.thumbnailGap) * (numberOfColumns - 1)) : tile.gridWidths
tile.numberOfColumns = numberOfColumns
}
container.transition = 0;
container.x = 0;
container.y = 0;
if(tile.items.length) arrange();
setTimeout(function() {
var bounds = tile.getBounds();
var align = new AlignEngine({
hRange:STATE.mediaView.zoneWidth(),
vRange:STATE.mediaView.zoneHeight(),
width:tile.perpLength,
height:bounds.height,
hAlign:'center',
vAlign:'top',
hOffset:0,
vOffset:vars.verticalMargin
});
if((STATE.overrides.thumbnailMasonryFill || STATE.overrides.thumbnailMasonryEvenRowHeight) && /hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
mask.gridContainer.x = vars.horizontalMargin
} else {
mask.gridContainer.x = Math.floor(align.x);
if(titleBlock) {
// redefine titleBlock width in this case since thumbs are center aligned
titleBlock.width = tile.perpLength
titleBlockHeight = STATE.overrides.thumbnailTitleBlockTopMargin + titleBlock.element.offsetHeight
titleBlock.y = STATE.overrides.thumbnailTitleBlockTopMargin
}
}
// if(!self.scroll) {
mask.gridContainer.y = 0
mask.grid.y = titleBlockHeight + vars.verticalMargin
// console.log(titleBlockHeight, vars.verticalMargin)
// }
container.width = STATE.mediaView.zoneWidth();
mask.width = STATE.mediaView.zoneWidth();
mask.grid.width = tile.perpLength
mask.gridContainer.width = tile.perpLength
if(LAYOUT_MODEL.unifiedPageScrolling && (/native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
var contentHeight = bounds.height > STATE.mediaView.zoneHeight() ? bounds.height : STATE.mediaView.zoneHeight()
contentHeight += vars.verticalMargin
container.height = titleBlockHeight + contentHeight + vars.verticalMargin + percentToPixels(LAYOUT_MODEL.sitePaddingBottom, stage.height)
mask.height = titleBlockHeight + contentHeight + vars.verticalMargin + percentToPixels(LAYOUT_MODEL.sitePaddingBottom, stage.height)
mask.grid.height = contentHeight
mask.gridContainer.height = titleBlockHeight + (contentHeight + vars.verticalMargin)
layoutCalcs._thumbContentHeight = titleBlockHeight + contentHeight + vars.verticalMargin
} else {
container.height = STATE.mediaView.zoneHeight();
mask.height = container.height;
self.height = container.height;
mask.grid.height = bounds.height + vars.verticalMargin
mask.gridContainer.height = titleBlockHeight + (bounds.height + vars.verticalMargin)
}
vars.events.dispatchEvent('UPDATE_CONTENT_HEIGHT');
container.resizeThumbVideo()
}, 20)
};
this.thumbLoaded = function(e) {
if(this.parent.loader) this.parent.removeChild(this.parent.loader);
Tween(this, 0.25, {alpha:1});
};
}
function ThumbsStrip(vars) {
var self = this,
container = vars.container,
mask = vars.mask,
side = vars.side,
size = vars.size,
tile = vars.tile;
tile.align = 'bottom';
tile.wrap = true;
function Const() {
switch(side) {
case 'top':
tile.axis = 'x';
tile.perpLength = THUMB_SIZES[size].height;
container.height = THUMB_SIZES[size].height;
mask.height = THUMB_SIZES[size].height;
break;
case 'right':
tile.axis = 'y';
tile.perpLength = THUMB_SIZES[size].width;
container.width = THUMB_SIZES[size].width;
mask.width = THUMB_SIZES[size].width;
break;
case 'bottom':
tile.axis = 'x';
tile.perpLength = THUMB_SIZES[size].height;
container.height = THUMB_SIZES[size].height;
mask.height = THUMB_SIZES[size].height;
break;
case 'left':
tile.axis = 'y';
tile.perpLength = THUMB_SIZES[size].width;
container.width = THUMB_SIZES[size].width;
mask.width = THUMB_SIZES[size].width;
break;
}
}
function arrange() {
tile.layoutItems();
items = mask.grid.children;
var i = 0,
l = items.length;
for(; i < l; i++) {
var position = tile.getPosition(i);
items[i].transition = 0;
items[i].alpha = 1;
items[i].x = position.x;
items[i].y = position.y;
if(i === items.length - 1) {
if(vars.parent.lazyLoader && vars.parent.holdersBuilt) vars.parent.lazyLoader.update();
}
}
}
this.resize = function() {
if(side === 'top' || side === 'bottom') {
container.width = STATE.mediaView.zoneWidth() - (vars.horizontalMargin * 2);
mask.width = STATE.mediaView.zoneWidth() - (vars.horizontalMargin * 2);
} else {
mask.height = STATE.mediaView.zoneHeight() - (vars.verticalMargin * 2);
container.height = STATE.mediaView.zoneHeight() - (vars.verticalMargin * 2);
}
arrange();
var bounds = tile.getBounds();
mask.grid.width = bounds.width;
mask.grid.height = bounds.height;
var updateSpeed = vars.parent.isInit ? 0 : UPDATE_SPEED;
container.transition = 0;
setTimeout(function(){
Docks.resize(updateSpeed);
},0);
};
this.thumbLoaded = function(e) {
if(this.parent.loader) this.parent.removeChild(this.parent.loader);
Tween(this, 0.25, {alpha:1});
};
Const.call(this);
}
function InquiryView(vars) {
var self = new Sprite(vars);
var width = 573,
height = 225,
inquiry,
title,
line,
info,
preview,
form,
mediaItem,
yourName,
yourEmail,
message,
submit,
closeHit,
responseMessage = new Sprite(),
_localEvents = vars.localEvents;
self.updateSpeed = 0;
self.backgroundColor = toRgba(LAYOUT_MODEL.overlayColor, LAYOUT_MODEL.overlayAlpha);
self.zIndex = 100;
self.alpha = 0;
self.visible = false;
function init() {
closeHit = new Sprite();
closeHit.backgroundColor = '#cccccc';
closeHit.alpha = 0;
closeHit.addEventListener(MOUSE_DOWN, closeOverlay);
self.addChild(closeHit);
inquiry = new Sprite();
inquiry.width = width;
inquiry.height = height;
self.addChild(inquiry);
title = new TextField();
title.text = SETTINGS_MODEL.inquiryTitle ? decodeURIComponent(SETTINGS_MODEL.inquiryTitle) : 'Inquire about this image';
title.fontFamily = STATE.overrides.overlayTitleFont;
title.fontColor = STATE.overrides.overlayTitleFontColor;
title.fontSize = STATE.overrides.overlayTitleFontSize;
inquiry.addChild(title);
line = new Sprite();
line.backgroundColor = toRgba(STATE.overrides.overlayTitleFontColor, 0.35);
line.width = width;
line.height = 1;
line.y = title.height + 10;
inquiry.addChild(line);
if(SETTINGS_MODEL.inquiryInfo) {
info = new TextField();
info.text = SETTINGS_MODEL.inquiryInfo;
info.fontFamily = STATE.overrides.overlayTitleFont;
info.fontColor = STATE.overrides.overlayTitleFontColor;
info.x = 2;
info.y = title.height + 20;
info.fontSize = 13;
inquiry.addChild(info);
}
preview = new Bitmap();
preview.alpha = 0;
inquiry.addChild(preview);
preview.addEventListener(LOAD, previewLoaded);
form = new Sprite();
if(SETTINGS_MODEL.inquiryInfo) {
form.x = 222;
form.y = info.y + info.height + 10;
} else {
form.x = 222;
form.y = 40;
}
form.width = width - form.x;
form.height = height - form.y;
inquiry.addChild(form);
yourName = buildFormInput("Your Name");
yourName.x = 0;
yourName.y = 0;
form.addChild(yourName);
yourEmail = buildFormInput('Your Email');
yourEmail.x = 180;
yourEmail.y = 0;
form.addChild(yourEmail);
message = buildFormInput("Message");
message.x = 0;
message.y = 50;
form.addChild(message);
submit = new Button();
submit.text = 'Submit';
submit.y = 135;
submit.fontSize = 12;
submit.fontColor = LAYOUT_MODEL.overlayColor;
submit.backgroundColor = STATE.overrides.overlayTitleFontColor;
submit.paddingTop = 2;
submit.paddingRight = 14;
submit.paddingBottom = 2;
submit.paddingLeft = 14;
form.addChild(submit);
submit.x = form.width - submit.width;
submit.addEventListener(FOCUS, onFocusSubmit);
submit.addEventListener(BLUR, onBlurSubmit);
submit.addEventListener(MOUSE_OVER, onFocusSubmit);
submit.addEventListener(MOUSE_OUT, onBlurSubmit);
if(TOUCH_DEVICE) {
submit.addEventListener(TOUCH_END, onSubmit);
} else {
submit.addEventListener(CLICK, onSubmit);
}
responseMessage.alpha = 0;
if(SETTINGS_MODEL.inquiryInfo) {
responseMessage.x = form.x;
responseMessage.y = info.y + info.height + 10;
} else {
responseMessage.x = form.x;
responseMessage.y = 40;
}
responseMessage.fontFamily = STATE.overrides.overlayTitleFont;
responseMessage.fontColor = STATE.overrides.overlayTitleFontColor;
responseMessage.fontSize = 14;
inquiry.addChild(responseMessage);
self.updateStyle();
self.updatePosition();
self.show();
_localEvents.addEventListener(INQUIRY_FORM_SENT, inquiryResponse);
}
function previewLoaded(e) {
var retinaSize = RetinaResizeEngine({width:this.width, height:this.height, filename:preview.src});
this.width = retinaSize.width;
this.height = retinaSize.height;
Tween(this, UPDATE_SPEED, {alpha:1});
}
function buildFormInput(label) {
var holder = new Sprite();
holder.width = 168;
var title = new TextField();
title.fontFamily = STATE.overrides.overlayTitleFont;
title.fontColor = STATE.overrides.overlayTitleFontColor;
title.fontSize = 11;
title.text = label;
holder.addChild(title);
var input = label === 'Message' ? new TextArea() : new Input();
input.backgroundColor = toRgba(STATE.overrides.overlayTitleFontColor, 0.1);
input.border = '1px solid ' + toRgba(STATE.overrides.overlayTitleFontColor, 0.3);
input.fontFamily = STATE.overrides.overlayTitleFont;
input.fontColor = STATE.overrides.overlayTitleFontColor;
input.fontSize = 14;
input.height = label === 'Message' ? 55 : 20;
input.width = label === 'Message' ? (holder.width * 2) + 12 : 168;
input.y = 17;
input.addEventListener(FOCUS, onFocus);
input.addEventListener(BLUR, onBlur);
holder.addChild(input);
holder.id = label;
holder.input = input;
holder.title = title;
return holder;
}
function onFocus(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.2), border:'1px solid ' + toRgba(STATE.overrides.overlayTitleFontColor, 0.7)});
}
function onBlur(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.1), border:'1px solid ' + toRgba(STATE.overrides.overlayTitleFontColor, 0.3)});
}
function onFocusSubmit(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.8)});
}
function onBlurSubmit(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 1)});
}
function onSubmit(e) {
if(yourName.input.value === '') {
alert('Name field cannot be blank.');
return false;
} else if(yourEmail.input.value === '' || !isValidEmail(yourEmail.input.value)) {
alert('Please enter valid email address.');
return false;
}
var inquiryData = {
inquiryItem: cdnMediaPath(mediaItem.content, mediaItem.demoFile),
toEmail: SETTINGS_MODEL.generalEmail,
fromName: yourName.input.value,
fromEmail: yourEmail.input.value,
message: message.input.value
}
_localEvents.dispatchEvent(INQUIRY_FORM_SUBMIT, inquiryData);
}
function isValidEmail(str) {
return /[-0-9a-zA-Z.+_]+@[-0-9a-zA-Z.+_]+\.[a-zA-Z]{2,4}/g.test(str);
}
function inquiryResponse(e) {
responseMessage.text = e.response;
Tween(form, UPDATE_SPEED, {alpha:0});
Tween(responseMessage, UPDATE_SPEED, {alpha:1});
self.addEventListener(MOUSE_DOWN, closeOverlay);
}
function closeOverlay(e) {
if(e.target === self) self.removeEventListener(MOUSE_DOWN, closeOverlay);
_localEvents.dispatchEvent(NAVBAR_OVERLAY_BTN_CLICK, "inquiry");
}
self.updateStyle = function(e) {
if(STATE.overrides.overlayTitleFont !== title.fontFamily) {
title.fontFamily = STATE.overrides.overlayTitleFont;
if(SETTINGS_MODEL.inquiryInfo) info.fontFamily = STATE.overrides.overlayTitleFont;
yourName.title.fontFamily = STATE.overrides.overlayTitleFont;
yourEmail.title.fontFamily = STATE.overrides.overlayTitleFont;
message.title.fontFamily = STATE.overrides.overlayTitleFont;
submit.fontFamily = STATE.overrides.overlayTitleFont;
}
if(STATE.overrides.overlayTitleFontSize !== title.fontSize) {
Tween(title, UPDATE_SPEED, {fontSize:STATE.overrides.overlayTitleFontSize, onComplete:function() {
self.updatePosition(e);
}});
}
if(STATE.overrides.overlayTitleFontColor !== title.fontColor) {
Tween(title, UPDATE_SPEED, {fontColor:STATE.overrides.overlayTitleFontColor});
if(SETTINGS_MODEL.inquiryInfo) Tween(info, UPDATE_SPEED, {fontColor:STATE.overrides.overlayTitleFontColor});
Tween(line, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
Tween(yourName.title, UPDATE_SPEED, {fontColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
Tween(yourEmail.title, UPDATE_SPEED, {fontColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
Tween(message.title, UPDATE_SPEED, {fontColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
Tween(submit, UPDATE_SPEED, {fontColor:toRgba(LAYOUT_MODEL.overlayColor, 0.35)});
Tween(submit, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
}
if(toRgba(LAYOUT_MODEL.overlayColor, LAYOUT_MODEL.overlayAlpha) !== self.backgroundColor) {
Tween(self, UPDATE_SPEED, {backgroundColor:toRgba(LAYOUT_MODEL.overlayColor, LAYOUT_MODEL.overlayAlpha)});
}
};
self.updatePosition = function(e) {
self.x = 0;
self.y = 0;
width = STATE.mediaView.width() > 573 ? 573 : STATE.mediaView.width();
height = STATE.mediaView.height() > 225 ? 225 : STATE.mediaView.height();
line.y = title.height + 10;
if(SETTINGS_MODEL.inquiryInfo) {
info.y = title.height + 20;
preview.x = 2;
preview.y = info.y + info.height + 10;
} else {
preview.x = 2;
preview.y = title.height + 20;
}
if(layoutCalcs.mediaView.width() > 573) {
if(SETTINGS_MODEL.inquiryInfo) {
form.x = 222;
form.y = info.y + info.height + 10;
} else {
form.x = 222;
form.y = preview.y;
}
} else {
form.x = 2;
form.y = preview.y + preview.height + 10;
}
if(SETTINGS_MODEL.inquiryInfo) {
responseMessage.x = form.x;
responseMessage.y = info.y + info.height + 10;
} else {
responseMessage.x = form.x;
responseMessage.y = 40;
}
if(self.updateSpeed === 0) {
self.width = STATE.mediaView.width();
self.height = STATE.mediaView.height();
inquiry.x = ((STATE.mediaView.width() - width) * 0.5);
inquiry.y = ((STATE.mediaView.height() - height) * 0.5);
inquiry.width = width;
inquiry.height = height;
} else {
Tween(self, self.updateSpeed, {
width:STATE.mediaView.width(),
height:STATE.mediaView.height()
});
Tween(inquiry, self.updateSpeed, {
x:(STATE.mediaView.width() - width) * 0.5,
y:(STATE.mediaView.height() - height) * 0.5,
width:width,
height:height
});
}
closeHit.width = STATE.mediaView.width();
closeHit.height = STATE.mediaView.height();
self.updateSpeed = UPDATE_SPEED;
};
self.show = function() {
self.updateSpeed = 0;
self.updatePosition();
if(!self.visible) {
self.visible = true;
self.display = 'block';
Tween(self, UPDATE_SPEED, {alpha:1});
Tween(form, UPDATE_SPEED, {alpha:1});
Tween(responseMessage, UPDATE_SPEED, {alpha:0});
}
};
self.hide = function() {
if(self.visible) {
self.visible = false;
Tween(self, UPDATE_SPEED, {alpha:0, onComplete:function(){
this.display = 'none';
}});
}
};
self.updateInquiryInfo = function() {
title.text = SETTINGS_MODEL.inquiryTitle ? SETTINGS_MODEL.inquiryTitle : 'Inquire about this image';
if(SETTINGS_MODEL.inquiryInfo) {
info.text = SETTINGS_MODEL.inquiryInfo;
}
self.updatePosition();
};
self.updateContent = function(e) {
var mediaItems = csvToArray(e.section.media);
mediaItem = getMediaById(mediaItems[e.assetId]);
if(preview) {
inquiry.removeChild(preview);
}
preview = new Bitmap();
preview.alpha = 0;
if(SETTINGS_MODEL.inquiryInfo) {
preview.x = 2;
preview.y = info.y + info.height + 10;
} else {
preview.x = 2;
preview.y = title.height + 20;
}
if(USER_AGENT !== MOBILE) preview.src = getThumbQuery(200, 300, mediaItem.thumb||mediaItem.content, mediaItem.demoFile);
preview.width = 200;
inquiry.addChild(preview);
preview.addEventListener(LOAD, previewLoaded);
};
self.addEventListener(CHILD_ADDED, function(child) {
init.call(self);
});
return self;
}
function ShareView(vars) {
var self = new Sprite(vars);
var width = 573,
height = 225,
share,
title,
line,
preview,
form,
mediaItem,
facebookShareBtn,
twitterShareBtn,
emailShareBtn,
closeHit,
responseMessage = new Sprite(),
_localEvents = vars.localEvents;
var fbOpts = {
layout: "button", // standard | box_count | button_count
size: 'small', // large
showFaces: false, // show faces of people who liked?
showShareButton: true, // show the share button
width: 120,
height: 35
}
self.updateSpeed = 0;
self.backgroundColor = toRgba(LAYOUT_MODEL.overlayColor, LAYOUT_MODEL.overlayAlpha);
self.zIndex = 100;
self.alpha = 0;
self.visible = false;
function init() {
closeHit = new Sprite();
closeHit.backgroundColor = '#cccccc';
closeHit.alpha = 0;
closeHit.addEventListener(MOUSE_DOWN, closeOverlay);
self.addChild(closeHit);
share = new Sprite();
share.width = width;
share.height = height;
self.addChild(share);
title = new TextField();
title.text = "Share this item:";
title.fontFamily = STATE.overrides.overlayTitleFont;
title.fontColor = STATE.overrides.overlayTitleFontColor;
title.fontSize = STATE.overrides.overlayTitleFontSize;
share.addChild(title);
line = new Sprite();
line.backgroundColor = toRgba(STATE.overrides.overlayTitleFontColor, 0.35);
line.width = width;
line.height = 1;
line.y = STATE.overrides.overlayTitleFontSize + 10;
share.addChild(line);
preview = new Bitmap();
preview.alpha = 0;
share.addChild(preview);
preview.addEventListener(LOAD, previewLoaded);
form = new Sprite();
form.x = 222;
form.y = title.height + 20;
form.width = width - form.x;
form.height = height - form.y;
share.addChild(form);
var url = 'https://' + window.location.host + window.location.pathname.split('/').slice(0, -1).join('/')
facebookShareBtn = new Sprite({type:'iframe'})
facebookShareBtn.src = "https://www.facebook.com/plugins/share_button.php?href=" + encodeURIComponent(url) + "&width=" + fbOpts.width + "&layout=" + fbOpts.layout + "&action=like&size=" + fbOpts.size + "&show_faces=" + fbOpts.showFaces + "&share=" + fbOpts.showShareButton + "&height=" + fbOpts.height
facebookShareBtn.width = fbOpts.width
facebookShareBtn.height = fbOpts.height
facebookShareBtn.element.setAttribute('scrolling', 'no')
facebookShareBtn.element.setAttribute('frameborder', '0')
facebookShareBtn.element.setAttribute('allowTransparency', 'true')
twitterShareBtn = new Button()
twitterShareBtn.addEventListener('click', function() {
// window.location.href = "https://twitter.com/intent/tweet?text=" + encodeURI(url)
var url = 'https://' + window.location.host + window.location.pathname.split('/').slice(0, -1).join('/')
window.open(
"https://twitter.com/intent/tweet?text=" + encodeURI(url),
'_blank' // <- This is what makes it open in a new window.
);
})
var twitterIcon = new Bitmap()
twitterIcon.position = 'relative'
twitterIcon.width = 20
twitterIcon.height = 20
twitterIcon.src = 'https://33acda504924667afc4c-95ab99cbba1f87315d458f4e201677b2.ssl.cf1.rackcdn.com/icon/twitter@2x.png'
twitterShareBtn.addChild(twitterIcon)
emailShareBtn = new Button()
emailShareBtn.addEventListener('click', function() {
var url = 'https://' + window.location.host + window.location.pathname.split('/').slice(0, -1).join('/')
window.location.href = 'mailto:?subject=Shared item from ' + window.location.host + '&body=' + SETTINGS_MODEL.portfolioEmailMessage + '%0A%0A' + url
})
var emailIcon = new Bitmap()
emailIcon.position = 'relative'
emailIcon.width = 20
emailIcon.height = 20
emailIcon.src = 'https://33acda504924667afc4c-95ab99cbba1f87315d458f4e201677b2.ssl.cf1.rackcdn.com/icon/email@2x.png'
emailShareBtn.addChild(emailIcon)
facebookShareBtn.y = 0
twitterShareBtn.y = 30
emailShareBtn.y = 60
form.addChild(facebookShareBtn)
form.addChild(twitterShareBtn)
form.addChild(emailShareBtn)
responseMessage.alpha = 0;
responseMessage.x = form.x;
responseMessage.y = 40;
responseMessage.fontFamily = STATE.overrides.overlayTitleFont;
responseMessage.fontColor = STATE.overrides.overlayTitleFontColor;
responseMessage.fontSize = 14;
share.addChild(responseMessage);
self.updateStyle();
self.updatePosition();
self.show();
_localEvents.addEventListener(SHARE_FORM_SENT, shareResponse);
}
function createShareButton(label, action) {
var btn = new Button()
btn = new Button();
btn.text = label
btn.x = 0;
btn.fontSize = 12;
btn.fontColor = LAYOUT_MODEL.overlayColor;
btn.backgroundColor = STATE.overrides.overlayTitleFontColor;
btn.paddingTop = 2;
btn.paddingRight = 14;
btn.paddingBottom = 2;
btn.paddingLeft = 14;
btn.addEventListener(FOCUS, onFocusSubmit)
btn.addEventListener(BLUR, onBlurSubmit);
btn.addEventListener(MOUSE_OVER, onFocusSubmit);
btn.addEventListener(MOUSE_OUT, onBlurSubmit);
btn.addEventListener(CLICK, action);
return btn
}
function previewLoaded(e) {
var retinaSize = RetinaResizeEngine({width:this.width, height:this.height, filename:preview.src});
this.width = retinaSize.width;
this.height = retinaSize.height;
Tween(this, UPDATE_SPEED, {alpha:1});
}
function onFocusSubmit(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.8)});
}
function onBlurSubmit(e) {
Tween(this, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 1)});
}
function onSubmit(e) {
/*
var shareForm = {
shareItem: cdnMediaPath(mediaItem.content, mediaItem.demoFile),
toName: friendsName.input.value,
toEmail: friendsEmail.input.value,
fromName: yourName.input.value,
fromEmail: yourEmail.input.value,
message: message.input.value
}
_localEvents.dispatchEvent(SHARE_FORM_SUBMIT, shareForm);
*/
console.log('do stuff here!!!!')
}
function isValidEmail(str) {
return /[-0-9a-zA-Z.+_]+@[-0-9a-zA-Z.+_]+\.[a-zA-Z]{2,4}/g.test(str);
}
function shareResponse(e) {
responseMessage.text = e.response;
Tween(form, UPDATE_SPEED, {alpha:0});
Tween(responseMessage, UPDATE_SPEED, {alpha:1});
self.addEventListener(MOUSE_DOWN, closeOverlay);
}
function closeOverlay(e) {
if(e.target === self) self.removeEventListener(MOUSE_DOWN, closeOverlay);
_localEvents.dispatchEvent(NAVBAR_OVERLAY_BTN_CLICK, "share");
}
self.updateStyle = function(e) {
if(STATE.overrides.overlayTitleFont !== title.fontFamily) {
title.fontFamily = STATE.overrides.overlayTitleFont;
facebookShareBtn.fontFamily = STATE.overrides.overlayTitleFont;
twitterShareBtn.fontFamily = STATE.overrides.overlayTitleFont;
emailShareBtn.fontFamily = STATE.overrides.overlayTitleFont;
}
if(STATE.overrides.overlayTitleFontSize !== title.fontSize) {
Tween(title, UPDATE_SPEED, {fontSize:STATE.overrides.overlayTitleFontSize, onComplete:function(){
self.updatePosition(e);
}});
}
if(STATE.overrides.overlayTitleFontColor !== title.fontColor) {
Tween(title, UPDATE_SPEED, {fontColor:STATE.overrides.overlayTitleFontColor});
Tween(line, UPDATE_SPEED, {backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
Tween(facebookShareBtn, UPDATE_SPEED, {fontColor:toRgba(LAYOUT_MODEL.overlayColor, 0.35), backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
Tween(twitterShareBtn, UPDATE_SPEED, {fontColor:toRgba(LAYOUT_MODEL.overlayColor, 0.35), backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
Tween(emailShareBtn, UPDATE_SPEED, {fontColor:toRgba(LAYOUT_MODEL.overlayColor, 0.35), backgroundColor:toRgba(STATE.overrides.overlayTitleFontColor, 0.35)});
}
if(toRgba(LAYOUT_MODEL.overlayColor, LAYOUT_MODEL.overlayAlpha) !== self.backgroundColor) {
Tween(self, UPDATE_SPEED, {backgroundColor:toRgba(LAYOUT_MODEL.overlayColor, LAYOUT_MODEL.overlayAlpha)});
}
};
self.updatePosition = function(e) {
self.x = 0;
self.y = 0;
width = STATE.mediaView.width() > 573 ? 573 : STATE.mediaView.width();
height = STATE.mediaView.height() > 225 ? 225 : STATE.mediaView.height();
preview.x = 2;
preview.y = title.height + 20;
line.y = STATE.overrides.overlayTitleFontSize + 10;
if(layoutCalcs.mediaMask.width() > 573) {
form.x = 222;
form.y = title.height + 20;
} else {
form.x = 2;
form.y = preview.y + preview.height + 10;
}
if(self.updateSpeed === 0) {
self.width = STATE.mediaView.width();
self.height = STATE.mediaView.height();
share.x = ((STATE.mediaView.width() - width) * 0.5);
share.y = ((STATE.mediaView.height() - height) * 0.5);
share.width = width;
share.height = height;
} else {
Tween(self, self.updateSpeed, {
width:STATE.mediaView.width(),
height:STATE.mediaView.height()
});
Tween(share, self.updateSpeed, {
x:(STATE.mediaView.width() - width) * 0.5,
y:(STATE.mediaView.height() - height) * 0.5,
width:width,
height:height
});
}
closeHit.width = STATE.mediaView.width();
closeHit.height = STATE.mediaView.height();
self.updateSpeed = UPDATE_SPEED;
};
self.show = function() {
self.updateSpeed = 0;
self.updatePosition();
if(!self.visible) {
self.visible = true;
self.display = 'block';
Tween(self, UPDATE_SPEED, {alpha:1});
Tween(form, UPDATE_SPEED, {alpha:1});
Tween(responseMessage, UPDATE_SPEED, {alpha:0});
}
};
self.hide = function(e) {
if(self.visible) {
self.visible = false;
Tween(self, UPDATE_SPEED, {alpha:0, onComplete:function(){
this.display = 'none';
}});
}
};
self.updateContent = function(e) {
var mediaItems = csvToArray(e.section.media);
mediaItem = getMediaById(mediaItems[e.assetId]);
title.text = "Share this " + mediaItem.type + ':';
if(preview) {
share.removeChild(preview);
}
preview = new Bitmap();
preview.alpha = 0;
preview.x = 2;
preview.y = title.height + 20;
preview.width = 200;
preview.src = getThumbQuery(200, 300, mediaItem.thumb||mediaItem.content, mediaItem.demoFile);
form.y = title.height + 20;
var url = 'https://' + window.location.host + window.location.pathname.split('/').slice(0, -1).join('/')
facebookShareBtn.src = "https://www.facebook.com/plugins/share_button.php?href=" + encodeURIComponent(url) + "&width=" + fbOpts.width + "&layout=" + fbOpts.layout + "&action=like&size=" + fbOpts.size + "&show_faces=" + fbOpts.showFaces + "&share=" + fbOpts.showShareButton + "&height=" + fbOpts.height
share.addChild(preview);
preview.addEventListener(LOAD, previewLoaded);
};
self.addEventListener(CHILD_ADDED, function(child) {
init.call(self);
});
return self;
}
function MenuController(vars) {
var self = new ControllerProxy({parentView:vars.parentView, parentController:vars.parentController, events:vars.siteControllerEvents}),
isInit = true,
isInitUri = true,
isInitResize = true,
initResizeSpeed = 350,
sectionsModelChangeTimer,
isOrientationChange = false,
autoCloseUriTimer;
self.updateSpeed = 0;
self.menuView = new vars.MenuView(vars);
self.menuView.alpha = 0;
if(USER_AGENT === MOBILE && STATE.overrides.menuDisplaceMobile) {
stage.addChild(self.menuView);
self.menuView.addChild(vars.parentView);
} else if(USER_AGENT === TABLET && STATE.overrides.menuDisplaceTablet) {
stage.addChild(self.menuView);
self.menuView.addChild(vars.parentView);
} else {
self.parentView.addChild(self.menuView);
}
vars.model = SECTIONS_MODEL
self.menuView.menuText = new MenuText(vars);
self.menuView.menuText.element.setAttribute('class', 'menuText');
self.menuView.addContent(self.menuView.menuText);
self.events.addEventListener('menuUpdatePosition', function(navbarVisible) {
self.menuView.updatePosition()
});
self.events.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
self.events.addEventListener(MEDIA_MODEL_CHANGE, mediaModelChange);
self.events.addEventListener(SECTIONS_MODEL_CHANGE, sectionsModelChangeCheck);
self.events.addEventListener(ORIENTATION_CHANGE, function(e) {
isOrientationChange = true;
});
self.events.addEventListener(RESIZE_END, function(){
if(layoutCalcs.isMenuOverlayStateChange) {
self.menuView.transition = 0
self.menuView.alpha = 0
setTimeout(function() {
if(layoutCalcs.isMenuResponsiveOverlay && USER_AGENT !== MOBILE) {
self.menuView.closeDock(0)
} else {
self.menuView.openDock(0)
}
self.menuView.menuText.display = 'block'
self.menuView.display = 'block'
self.menuView.menuText.rebuild({model:getMenuData()});
self.menuView.menuText.updatePosition();
self.menuView.updatePosition(0);
self.menuView.updateStyle(0);
self.menuView.updateScroll()
if(self.menuView.dock.toggleState()) {
setTimeout(function() {
self.menuView.transition = 0
self.menuView.alpha = 1
}, 350)
}
}, initResizeSpeed)
} else {
self.menuView.menuText.display = 'block'
self.menuView.display = 'block'
if(isOrientationChange || isInitResize) {
self.menuView.menuText.rebuild({model:getMenuData()});
isOrientationChange = false;
}
self.menuView.menuText.updatePosition();
self.menuView.updatePosition();
if(USER_AGENT !== MOBILE && USER_AGENT !== TABLET && !self.menuView.dock.toggleState()) {
setTimeout(function() {
self.menuView.display = 'none'
}, initResizeSpeed)
}
}
initResizeSpeed = 50
isInitResize = false
});
self.events.addEventListener('mobile_scroll_resize', function(){
// self.menuView.updatePosition();
});
self.events.addEventListener(SITE_URI_CHANGE, menuSiteUriChange);
self.events.addEventListener(TOUCH_NAVIGATION_END, touchNavigationEnd);
self.events.addEventListener(MENU_BUILT, function(){
sectionsModelChangeTimer = setTimeout(function(){
if(self.menuView.dock.toggleState()) {
self.menuView.menuText.display = 'block'
self.menuView.display = 'block'
}
self.menuView.menuText.updatePosition();
self.menuView.updatePosition();
}, 0);
});
self.events.addEventListener(MENU_SIZE_CHANGE, self.menuView.updatePosition);
self.events.addEventListener('fillSiteMode', setSafariHack);
self.events.addEventListener('nonFillSiteMode', removeSafariHack);
self.events.addEventListener('LOGO_LOADED', function(e) {
self.menuView.menuText.display = 'block'
self.menuView.display = 'block'
self.menuView.menuText.updatePosition();
self.menuView.updatePosition();
});
function setSafariHack(e) {
if(BROWSER_NAME === 'Safari') self.menuView.menuText.translateZ = 0;
}
function removeSafariHack(e) {
if(BROWSER_NAME === 'Safari') {
self.menuView.menuText.style['-webkit-transform'] = 'none';
self.menuView.menuText.style['-ms-transform'] = 'none';
self.menuView.menuText.style['transform'] = 'none';
}
}
function touchNavigationEnd(e) {
if(self.menuView.dock.toggleState()) self.menuView.closeDock();
}
// this was closing the menu before the intro was complete for menu auto-close on init
// if(self.menuView.dock && (SETTINGS_MODEL.introFile || LAYOUT_MODEL.introFile)) self.menuView.closeDock()
var isDeepLink = function(e) { return e.path }
function menuSiteUriChange(e) {
self.menuView.isInitUri = false
if(USER_AGENT === MOBILE || USER_AGENT === TABLET) {
var autoClose = e.info.isDeepLink || LAYOUT_MODEL.menuAutoCloseMobile === '' || LAYOUT_MODEL.menuAutoCloseMobile === undefined || LAYOUT_MODEL.menuAutoCloseMobile
if((SETTINGS_MODEL.introFile !== '' || LAYOUT_MODEL.introFile !== '') && !e.path) {
// this will fire after intro complete time elapsed
if(!self.menuView.dock.toggleState()) self.menuView.openDock()
if(autoClose) {
setTimeout(self.menuView.closeDock, 2000);
}
} else if(!isInitUri && isDeepLink(e) && self.menuView.dock.toggleState()) {
setTimeout(self.menuView.closeDock, 200);
} else if(isInitUri || autoClose) {
if(autoClose && self.menuView.dock.toggleState()) setTimeout(self.menuView.closeDock, 2000);
} else if(self.menuView.dock.toggleState()) {
clearTimeout(autoCloseUriTimer);
autoCloseUriTimer = setTimeout(self.menuView.closeDock, 200);
}
} else if(STATE.menuView.placement() === 'overlay') {
// close dock on navigate
if(!isInitUri && self.menuView.dock.toggleState()) self.menuView.closeDock()
if(isInitUri) {
if(LAYOUT_MODEL.menuOpenOverlayOnInit) {
self.menuView.openDock()
} else {
self.menuView.closeDock()
}
// this is to show icon after introComplete after first uri change
self.menuView.dock.toggleState() ? self.menuView.showCloseButton() : self.menuView.showMenuIcon()
}
}
self.menuView.menuText.setActiveMenuItem(e);
isInitUri = false;
}
function isAddIconLink(e) {
var media = csvToArray(e.value);
return e.field === 'media' && e.method === 'update' && media.length === 1 && getMediaById(media[0]).type === 'link';
}
function isRemoveIconLink(e) {
return e.field === 'media' && e.method === 'update' && e.value === '';
}
function sectionsModelChangeCheck(e) {
if(sectionsModelChangeTimer) {
clearTimeout(sectionsModelChangeTimer);
}
sectionsModelChangeTimer = setTimeout(function(){
if(e.action && e.action === 'sectionReorder') {
/*dont rebuild menu*/
} else if(e.action && e.action === "remove") {
/*dont rebuild menu*/
/*allowed this to rebuild because of custom and social icons on menu*/
if(isRemoveIconLink(e)) {
self.menuView.menuText.rebuild({model:getMenuData()});
}
} else if(e.action && e.action === "addMediaToSection") {
/*dont rebuild menu*/
} else if(e.action && e.action === "addSelectionToSection") {
/*dont rebuild menu*/
/*allowed this to rebuild because of custom and social icons on menu*/
if(isAddIconLink(e)) {
self.menuView.menuText.rebuild({model:getMenuData()});
}
} else {
self.menuView.menuText.rebuild({model:getMenuData()});
}
}, 0);
}
function getMenuData() {
var output = {}
for(var key in SECTIONS_MODEL) {
if(!SECTIONS_MODEL[key].media) continue
if(!SECTIONS_MODEL[key].mediaItems) continue
if(SECTIONS_MODEL.hasOwnProperty(key)) {
output[key] = {
id:SECTIONS_MODEL[key].id,
key:SECTIONS_MODEL[key].key,
customLink:SECTIONS_MODEL[key].customLink,
isIndex:SECTIONS_MODEL[key].isIndex,
indexLink:SECTIONS_MODEL[key].indexLink,
linkTarget:SECTIONS_MODEL[key].linkTarget,
isOpen:SECTIONS_MODEL[key].isOpen,
hideSubs:SECTIONS_MODEL[key].hideSubs,
label:SECTIONS_MODEL[key].label,
alias:SECTIONS_MODEL[key].alias,
media:SECTIONS_MODEL[key].media.slice(0),
mediaItems:SECTIONS_MODEL[key].mediaItems.slice(0),
overrides:SECTIONS_MODEL[key].overrides,
password:SECTIONS_MODEL[key].password,
thumb:SECTIONS_MODEL[key].thumb,
visible:SECTIONS_MODEL[key].visible
}
}
}
if(USER_AGENT === MOBILE || (USER_AGENT === TABLET && LAYOUT_MODEL.footerOnMenuTablet)) {
SETTINGS_MODEL.socialLinks.forEach(function(mediaId) {
var mediaItem = MEDIA_MODEL[mediaId]
var mockSectionId = getNextId(output)
output[mediaId] = {
id:mockSectionId,
key:mediaItem.label,
label:mediaItem.label,
// alias:mediaItem.alias,
media:[mediaId],
mediaItems:[],
overrides:{},
password:'',
thumb:{},
visible:true
}
output.ROOT_SECTION.media.push(mockSectionId)
})
if(SETTINGS_MODEL.copyright) {
var copyrightSectionId = getNextId(output)
output.copyright = {
id:copyrightSectionId,
key:'copyright',
label:SETTINGS_MODEL.copyright,
media:[],
mediaItems:[],
overrides:{},
password:'',
thumb:{},
visible:true
}
output.ROOT_SECTION.media.push(copyrightSectionId)
}
}
return output
}
function layoutModelChange(e) {
if(isInit || e && /menu|marginOverlap|dropdownSubMenu|sitePaddingTop|sitePaddingRight|sitePaddingBottom|sitePaddingLeft|footerIcon/.test(e.id)) {
self.menuView.updateStyle();
var sections = getMenuData()
self.menuView.menuText.display = 'block'
self.menuView.display = 'block'
self.menuView.menuText.rebuild({model:sections});
self.menuView.menuText.updatePosition();
self.menuView.updatePosition('layoutModelChange');
self.menuView.updateScroll();
isInit = false;
setTimeout(function() {
// added this little hack due to an issue with
// the right alignment on the menu and loading
// certain custom fonts
self.menuView.menuText.display = 'block'
self.menuView.display = 'block'
self.menuView.menuText.rebuild({model:sections});
}, 400)
}
}
function mediaModelChange(e) {
if(e.type === 'link' && e.filters !== 'Footer Links') {
self.menuView.updateStyle();
self.menuView.menuText.display = 'block'
self.menuView.display = 'block'
self.menuView.menuText.rebuild({model:getMenuData()});
self.menuView.menuText.updatePosition();
self.menuView.updatePosition();
self.menuView.updateScroll();
}
}
return self;
}
function MenuView(vars) {
var self = new ViewProxy({events:vars.events});
self.isInitUri = true
self.alpha = 0;
self.updateSpeed = 0;
self.zIndex = STATE.menuView.zIndex;
self.style.pointerEvents = 'none';
self.x = 0
self.y = 0
self.position = LAYOUT_MODEL.menuPositionFixed || STATE.menuView.placement() === 'overlay' ? 'fixed' : 'absolute'
var blendMode = (USER_AGENT === MOBILE || USER_AGENT === TABLET || !LAYOUT_MODEL.menuBlendMode) ? 'normal' : LAYOUT_MODEL.menuBlendMode
self.element.style['mix-blend-mode'] = blendMode
var siteView = vars.parentView
var mask = new Sprite();
mask.element.setAttribute('class', 'mask');
mask.backgroundColor = toRgba('#FF0000', 0);
mask.width = layoutCalcs.menuView.width();
self.mask = mask;
self.addChild(mask);
var isInit = true,
menuToggleBtn,
menuToggleToggleState = false,
menuButtonCheck,
touchTimeStart,
touchTimeEnd,
moveDistanceX = 0,
moveDistanceY = 0,
touchStartPointX = 0,
touchStartPointY = 0,
originX = 0,
menuDir = 'open',
lastMenuX = 0,
menuScrolling = false,
menuTouched = false,
menuSwiping = false,
align = isVerticalMenu() ? 'top' : 'left',
margin = isHorizontalMenu() ? layoutCalcs.menuView.y() : layoutCalcs.menuView.x(),
pOffset = isHorizontalMenu() ? layoutCalcs.menuView.x() : layoutCalcs.menuView.y();
var dummyMask = {
width:stage.width,
height:stage.height
};
self.addEventListener(CHILD_ADDED, function(child) {
self.updatePosition();
if(STATE.menuView.placement() === 'overlay') {
// self.dock.hide(0, function(dockEl) {
// dockEl.display = 'none'
// });
isInit = false;
} else {
Tween(self, UPDATE_SPEED, {delay:UPDATE_SPEED, alpha:1, onComplete:function(){
isInit = false;
}});
}
});
self.dock = new Dock(self, dummyMask, {
side:(USER_AGENT === TABLET || USER_AGENT === MOBILE) ? 'left' : STATE.menuView.placement(),
align:align,
margin:margin,
pOffset:pOffset,
reveal:0,
disableResize: STATE.menuView.placement() === 'overlay'
});
function getMenuIconGeometry(zoneSize) {
var topMargin = Math.floor(zoneSize / 4)
var leftMargin = Math.floor((topMargin / 3) * 2)
var width = zoneSize - (leftMargin * 2)
var height = zoneSize - (topMargin * 2)
return {
zoneSize: zoneSize,
topMargin: topMargin,
leftMargin: leftMargin,
width: width,
height: height,
diagonal: getRectDiagonal(width, height)
}
}
self.showCloseButton = function() {
var menuIconColorOpen = STATE.menuView.menuIconOverlayColor()
var zoneSize = Number(LAYOUT_MODEL.menuIconSize || 36)
var menuIconSettings = getMenuIconGeometry(zoneSize)
menuIconSettings.isClosed = false
menuIconSettings.color = menuIconColorOpen
menuIconSettings.rotate = -180
menuIconSettings.line1Y = (menuIconSettings.topMargin * 2) - (Number(LAYOUT_MODEL.menuIconLineWidth || 1) + 1)
menuIconSettings.line3Y = (menuIconSettings.topMargin * 2) - (Number(LAYOUT_MODEL.menuIconLineWidth || 1) + 1)
menuIconSettings.leftMargin = menuIconSettings.leftMargin * 0.5
setMenuIconState(menuIconSettings)
}
self.showMenuIcon = function() {
var zoneSize = Number(LAYOUT_MODEL.menuIconSize || 36)
var menuIconSettings = getMenuIconGeometry(zoneSize)
menuIconSettings.isClosed = true
menuIconSettings.color = LAYOUT_MODEL.menuIconColor || '#333333'
menuIconSettings.rotate = 0
menuIconSettings.line1Y = menuIconSettings.topMargin
menuIconSettings.line3Y = menuIconSettings.topMargin * 3
menuIconSettings.diagonal = menuIconSettings.width
menuIconSettings.leftMargin = menuIconSettings.leftMargin
setMenuIconState(menuIconSettings)
}
function updateMenuIcon() {
var menuIconHorizontalOffset = LAYOUT_MODEL.menuIconHOffset || 30
var menuIconVerticalOffset = LAYOUT_MODEL.menuIconVOffset || 20
var menuIconColor = LAYOUT_MODEL.menuIconColor || '#333333'
var menuIconSide = LAYOUT_MODEL.menuIconSide || 'right'
var menuIconOppositeSide = menuIconSide === 'right' ? 'left' : 'right'
var zoneSize = Number(LAYOUT_MODEL.menuIconSize || 36)
var menuIconGeometry = getMenuIconGeometry(zoneSize)
if(!menuToggleBtn) {
// holder
menuToggleBtn = new Sprite();
menuToggleBtn.position = 'fixed'
menuToggleBtn.zIndex = 9;
menuToggleBtn.style.pointerEvents = 'auto';
if(/overlay/.test(STATE.menuView.placement())) {
stage.addChild(menuToggleBtn);
} else {
vars.parentView.addChild(menuToggleBtn);
}
menuToggleBtn.addEventListener(CLICK, toggleDock);
// lines
menuToggleBtn.line1 = new Sprite()
menuToggleBtn.addChild(menuToggleBtn.line1)
menuToggleBtn.line2 = new Sprite()
menuToggleBtn.addChild(menuToggleBtn.line2)
menuToggleBtn.line3 = new Sprite()
menuToggleBtn.addChild(menuToggleBtn.line3)
}
menuToggleBtn.width = menuIconGeometry.zoneSize
menuToggleBtn.height = menuIconGeometry.zoneSize
menuToggleBtn.y = menuIconVerticalOffset
menuToggleBtn.element.style[menuIconOppositeSide] = ''
menuToggleBtn.element.style[menuIconSide] = menuIconHorizontalOffset + 'px'
menuToggleBtn.line1.backgroundColor = menuIconColor
menuToggleBtn.line1.width = menuIconGeometry.width
menuToggleBtn.line1.x = menuIconGeometry.leftMargin
menuToggleBtn.line1.y = menuIconGeometry.topMargin
menuToggleBtn.line1.height = LAYOUT_MODEL.menuIconLineWidth || 1
menuToggleBtn.line2.backgroundColor = menuIconColor
menuToggleBtn.line2.width = menuIconGeometry.width
menuToggleBtn.line2.x = menuIconGeometry.leftMargin
menuToggleBtn.line2.y = menuIconGeometry.topMargin * 2
menuToggleBtn.line2.height = LAYOUT_MODEL.menuIconLineWidth || 1
menuToggleBtn.line3.backgroundColor = menuIconColor
menuToggleBtn.line3.width = menuIconGeometry.width
menuToggleBtn.line3.x = menuIconGeometry.leftMargin
menuToggleBtn.line3.y = menuIconGeometry.topMargin * 3
menuToggleBtn.line3.height = LAYOUT_MODEL.menuIconLineWidth || 1
// so that when called from updatePosition line1 and line3 positions are updated
self.dock.toggleState() ? self.showCloseButton() : self.showMenuIcon()
}
if(USER_AGENT === TABLET || USER_AGENT === MOBILE) {
var menuToggleBtn = new Sprite();
menuToggleBtn.svg = new Svg();
menuToggleBtn.path = new Path();
menuToggleBtn.width = 20;
menuToggleBtn.height = 20;
menuToggleBtn.svg.width = 20;
menuToggleBtn.svg.height = 20;
menuToggleBtn.path.d = svgPaths.menuIconMobile;
menuToggleBtn.path.strokeWidth = 0;
menuToggleBtn.path.stroke = 'none';
menuToggleBtn.path.fill = LAYOUT_MODEL.menuIconColor || STATE.overrides.overlayTitleFontColor || '#606060';
menuToggleBtn.addChild(menuToggleBtn.svg)
menuToggleBtn.svg.addChild(menuToggleBtn.path)
// menuToggleBtn = new Bitmap();
menuToggleBtn.zIndex = 50;
// menuToggleBtn.width = 20;
// menuToggleBtn.height = 16;
menuToggleBtn.padding = 8;
menuToggleBtn.alpha = 1;
menuToggleBtn.style.pointerEvents = 'auto';
// if(RETINA) {
// menuToggleBtn.src = ICONS + 'menu@2x.png';
// } else {
// menuToggleBtn.src = ICONS + 'menu.png';
// }
menuToggleBtn.y = 16;
self.addChild(menuToggleBtn);
menuToggleBtn.addEventListener(CLICK, toggleDock);
self.events.addEventListener(TOUCH_NAVIGATION_END, checkMenuToggle);
// self.events.addEventListener(INTRO_COMPLETE, closeDockIntroCompete);
self.addEventListener(TOUCH_START, menuTouchStart);
self.style.pointerEvents = 'auto';
} else if(STATE.menuView.placement() === 'overlay') {
updateMenuIcon()
}
function setMenuIconState(state) {
// css rotate causes something weird in Chrome
siteView.overflow = 'visible'
if(menuToggleBtn) {
var lineRotation = state.isClosed ? 0 : 45
var alpha = state.isClosed ? 1 : 0
if(!self.isInitUri) {
menuToggleBtn.alpha = 1
Tween.defer(menuToggleBtn.line1, UPDATE_SPEED, {width:state.diagonal, x:state.leftMargin, y:state.line1Y, rotate:-lineRotation, backgroundColor:state.color});
Tween.defer(menuToggleBtn.line2, UPDATE_SPEED * 0.5, {alpha:alpha});
Tween.defer(menuToggleBtn.line3, UPDATE_SPEED, {width:state.diagonal, x:state.leftMargin, y:state.line3Y, rotate:lineRotation, backgroundColor:state.color});
Tween.defer(menuToggleBtn, UPDATE_SPEED, {rotate:state.rotate, onComplete:function() {
if(USER_AGENT !== TABLET) {
// css rotate causes something weird in Chrome
siteView.overflow = 'hidden';
}
}});
} else {
menuToggleBtn.alpha = 0
}
}
}
function getRectDiagonal(width, height) {
return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
}
var userInterrupt = false;
function checkMenuToggle(e) {
if(!e.isMove && !self.dock.toggleState()) {
toggleMenuToggleBtn();
} else if(!userInterrupt) {
self.closeDock();
}
}
self.openDock = function(speed) {
speed = isNaN(speed) ? UPDATE_SPEED : speed
if(stage.zoom <= 1 && (USER_AGENT === MOBILE || USER_AGENT === TABLET)) {
self.events.dispatchEvent(MENU_DOCK_OPEN);
self.dock.show(speed)
// hideMenuToggleBtn();
clearInterval(menuButtonCheck);
} else if (STATE.menuView.placement() === 'overlay') {
self.showCloseButton()
self.dock.show(0, function(dockEl) {
dockEl.display = 'block'
Tween(dockEl, speed, {delay:0.05, alpha:1})
});
}
};
self.closeDock = function(speed) {
speed = isNaN(speed) ? UPDATE_SPEED : speed
if(stage.zoom <= 1 && !menuTouched && (USER_AGENT === MOBILE || USER_AGENT === TABLET)) {
if(self.dock.toggleState()) self.events.dispatchEvent(MENU_DOCK_CLOSE);
self.dock.hide(speed)
// menuIconCheckInterval();
} else if (STATE.menuView.placement() === 'overlay') {
self.showMenuIcon()
self.dock.hide(0, function(dockEl) {
Tween(dockEl, speed, {delay:0.05, alpha: 0, onComplete:function(){
dockEl.display = 'none'
}})
});
}
};
function menuTouchStart(e) {
if(e.touches.length === 1 && stage.zoom <= 1) {
touchTimeStart = Date.now();
moveDistanceX = 0;
moveDistanceY = 0;
originX = self.translateX;
touchStartPointX = e.touches[0].pageX;
touchStartPointY = e.touches[0].pageY;
menuTouched = true
self.addEventListener(TOUCH_MOVE, menuTouchMove);
self.addEventListener(TOUCH_END, menuTouchEnd);
self.addEventListener(TOUCH_CANCEL, menuTouchEnd);
}
}
function menuTouchMove(e) {
if(e.touches.length === 1 && stage.zoom <= 1) {
if(!(USER_AGENT === MOBILE || USER_AGENT === TABLET)) {
e.preventDefault();
}
moveDistanceX = e.touches[0].pageX - touchStartPointX;
moveDistanceY = e.touches[0].pageY - touchStartPointY;
if(Mth.abs(moveDistanceX) > Mth.abs(moveDistanceY)) {
menuSwiping = true;
menuScrolling = false;
e.stopPropagation()
} else {
menuScrolling = true;
if(USER_AGENT === MOBILE) {
if(self.dock.toggleState()) {
self.dock.show(0);
} else {
self.dock.hide(0);
}
}
menuSwiping = false;
}
if((USER_AGENT === MOBILE || USER_AGENT === TABLET) && menuSwiping) {
e.preventDefault();
}
var dockSide = /left|top|bottom/.test(STATE.menuView.placement()) ? 'left' : 'right';
if(USER_AGENT === TABLET || USER_AGENT === MOBILE) dockSide = 'left'
if(menuSwiping) {
self.transition = 0;
var newPosition = moveDistanceX + originX;
if(dockSide === 'left') {
if(self.dock.toggleState()) {
self.translateX = newPosition > 0 ? 0 : newPosition;
} else {
self.translateX = newPosition < -layoutCalcs.menuView.width() ? -layoutCalcs.menuView.width() : newPosition;
}
} else {
self.translateX = newPosition < stage.width - layoutCalcs.menuView.width() ? stage.width - layoutCalcs.menuView.width() : newPosition;
}
}
if(!menuScrolling && lastMenuX <= e.touches[0].pageX) {
menuDir = dockSide === 'left' ? 'open' : 'close';
lastMenuX = e.touches[0].pageX;
} else if(!menuScrolling && lastMenuX >= e.touches[0].pageX) {
menuDir = dockSide === 'left' ? 'close' : 'open';
lastMenuX = e.touches[0].pageX;
}
}
}
function menuTouchEnd(e) {
if(menuSwiping && menuDir === 'close') {
menuTouched = false
if(self.dock.toggleState()) self.closeDock();
} else if(menuSwiping && menuDir === 'open') {
menuTouched = false
if(!self.dock.toggleState()) self.openDock();
}
menuTouched = false
menuSwiping = false
self.removeEventListener(TOUCH_MOVE, menuTouchMove);
self.removeEventListener(TOUCH_END, menuTouchEnd);
self.removeEventListener(TOUCH_CANCEL, menuTouchEnd);
}
function menuIconCheckInterval() {
clearInterval(menuButtonCheck);
menuButtonCheck = setInterval(function(){
if(!self.dock.toggleState()) {
showMenuToggleBtn();
}
}, 100);
}
function toggleDock() {
if(self.dock.toggleState()) {
userInterrupt = false;
self.closeDock();
} else {
userInterrupt = true;
self.openDock();
}
}
function toggleMenuToggleBtn() {
if(menuToggleToggleState) {
showMenuToggleBtn();
} else {
showMenuToggleBtn();
}
}
function showMenuToggleBtn() {
menuToggleToggleState = true;
Tween(menuToggleBtn, UPDATE_SPEED, {alpha:1});
}
function hideMenuToggleBtn() {
menuToggleToggleState = false;
Tween(menuToggleBtn, UPDATE_SPEED, {alpha:0});
}
function mouseOverDock(e) {
if(self.hitTestPoint(e.clientX, e.clientY) && !self.dock.toggleState()) {
self.openDock();
} else if(!self.hitTestPoint(e.clientX, e.clientY) && self.dock.toggleState()) {
self.closeDock();
}
}
self.updateStyle = function(e) {
if(USER_AGENT === MOBILE) {
Tween(self, self.updateSpeed, {
backgroundColor: toRgba(LAYOUT_MODEL.menuBgColorMobile || LAYOUT_MODEL.menuBgColor, LAYOUT_MODEL.menuBgAlphaMobile || LAYOUT_MODEL.menuBgAlpha)
});
} else if(USER_AGENT === TABLET) {
Tween(self, self.updateSpeed, {
backgroundColor: toRgba(LAYOUT_MODEL.menuBgColorTablet || LAYOUT_MODEL.menuBgColor, LAYOUT_MODEL.menuBgAlphaTablet || LAYOUT_MODEL.menuBgAlpha)
});
} else {
Tween(self, 0, {
backgroundColor: toRgba(STATE.menuView.menuBgColor(), STATE.menuView.menuBgAlpha())
});
}
};
self.updatePosition = function(e) {
var isLayoutChange = e === 'layoutModelChange'
var speed = isNaN(e) ? self.updateSpeed : e
self.position = LAYOUT_MODEL.menuPositionFixed || STATE.menuView.placement() === 'overlay' ? 'fixed' : 'absolute'
var blendMode = (USER_AGENT === MOBILE || USER_AGENT === TABLET || !LAYOUT_MODEL.menuBlendMode) ? 'normal' : LAYOUT_MODEL.menuBlendMode
self.element.style['mix-blend-mode'] = blendMode
var menuTextHeight = exists(self, 'menuText.height') || 0;
var maskHeight = layoutCalcs.menuView.height() - layoutCalcs.menuText.y(menuTextHeight)
var menuY = layoutCalcs.menuText.y(menuTextHeight);
if(USER_AGENT === MOBILE) {
if(!layoutCalcs._footerHeight) {
maskHeight = layoutCalcs.menuView.height() - layoutCalcs.menuText.y(menuTextHeight);
} else {
maskHeight = layoutCalcs.menuView.height() - layoutCalcs.menuText.y(menuTextHeight) - layoutCalcs._footerHeight - (layoutCalcs.mobileFooterPadding * 2);
}
} else if(maskHeight > layoutCalcs.menuView.height()) {
maskHeight = layoutCalcs.menuView.height();
menuY = 0;
}
if((USER_AGENT !== TABLET && USER_AGENT !== MOBILE) &&
LAYOUT_MODEL.navbarAlignHorizontal === STATE.menuView.placement() &&
LAYOUT_MODEL.navbarAlignVertical === 'bottom' &&
layoutCalcs._navbarVisible) {
// for menu and navbar overlap issues
var navbarPad = 12
maskHeight = layoutCalcs.navbarView.y() - percentToPixels(LAYOUT_MODEL.sitePaddingTop, stage.height) - menuY - LAYOUT_MODEL.menuOffsetY - navbarPad
}
if(USER_AGENT === TABLET || USER_AGENT === MOBILE) {
// if(STATE.menuView.placement() === 'right') {
// menuToggleBtn.x = - 16 - menuToggleBtn.width;
// } else {
menuToggleBtn.x = layoutCalcs.menuView.width() + 16;
// }
menuToggleBtn.y = 16;
} else if(STATE.menuView.placement() === 'overlay') {
if(!menuToggleBtn || isLayoutChange) updateMenuIcon()
} else if(menuToggleBtn) {
// if live updating from 'overlay' menu mode
// need to reset menu/dock and menuToggleBtn
// self.dock.show(0, function(dockEl) {
// dockEl.display = 'block'
// Tween(dockEl, speed, { alpha: 1 })
// });
// if(/overlay/.test(STATE.menuView.placement())) {
// stage.removeChild(menuToggleBtn);
// } else {
// vars.parentView.removeChild(menuToggleBtn);
// }
// menuToggleBtn = null
}
// extend menu height below stage.height for mobile
// because after scrolling the browser bars minimize
var browserBarComp = isPod() && STATE.menuView.placement() === 'overlay' ? 250 : 0
Tween(self, speed, {
width:layoutCalcs.menuView.width(),
height:layoutCalcs.menuView.height() + browserBarComp
});
if(USER_AGENT === MOBILE) {
Tween(mask, speed, {
width:layoutCalcs.menuView.width(),
height:layoutCalcs.menuView.height(),
y:0
});
if(self.menuText) {
Tween(self.menuText, speed, {
y:menuY
});
}
} else {
Tween(mask, speed, {
width:layoutCalcs.menuView.width(),
height:maskHeight,
y:menuY
});
}
self.updateSpeed = UPDATE_SPEED;
dummyMask.width = stage.width;
dummyMask.height = stage.height;
if(USER_AGENT === TABLET || USER_AGENT === MOBILE) {
self.dock.side = 'left' ///left|top|bottom/.test(STATE.menuView.placement()) ? 'left' : 'right';
} else {
self.dock.side = STATE.menuView.placement();
}
self.dock.align = isVerticalMenu() ? 'top' : 'left';
self.dock.margin = isHorizontalMenu() ? layoutCalcs.menuView.y() : layoutCalcs.menuView.x();
self.dock.pOffset = isHorizontalMenu() ? layoutCalcs.menuView.x() : layoutCalcs.menuView.y();
self.dock.disableResize = STATE.menuView.placement() === 'overlay'
self.dock.resize(isInit ? 0 : UPDATE_SPEED);
setTimeout(function() {
if(self.scroll) {
self.scroll.resize();
}
}, UPDATE_SPEED * 1000);
}
self.addContent = function(value) {
self.mask.addChild(value);
setTimeout(function() {
self.updateScroll();
}, UPDATE_SPEED * 1000);
};
self.updateScroll = function() {
if(isPod() || isPad()) mask.element.style['-webkit-overflow-scrolling'] = 'touch'
if(LAYOUT_MODEL.menuScrollType === 'native') {
self.style.pointerEvents = 'auto';
if((!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu)) {
mask.element.style.overflow = 'visible';
} else if(isVerticalMenu()) {
mask.element.style.overflowY = 'scroll'
mask.element.style.overflowX = 'hidden'
} else {
mask.element.style.overflowY = 'hidden'
mask.element.style.overflowX = 'scroll'
}
} else if(MAC_SCROLLBARS && (LAYOUT_MODEL.menuScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll || USER_AGENT === MOBILE)) {
// added || USER_AGENT === MOBILE --- to encapsulate logo overlap issue
// https://aphotofolio.slack.com/archives/C024LMJKT/p1529506454000502
self.style.pointerEvents = 'auto';
if((!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu)) {
mask.element.style.overflow = 'visible';
} else if(isVerticalMenu()) {
mask.element.style.overflowY = 'scroll'
mask.element.style.overflowX = 'hidden'
} else {
mask.element.style.overflow = 'auto'
}
} else if(!(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu)) {
if(self.scroll) self.scroll.destroy();
mask.overflow = 'hidden';
var scrollBarWidth = LAYOUT_MODEL.menuScrollbarWidth
var scrollBarOffsetX = LAYOUT_MODEL.menuScrollbarAlign === 'right' ? -scrollBarWidth : -percentToPixels(LAYOUT_MODEL.menuWidth, stage.width)
var types = ['bar','wheel','touch']
var scrollMarginX = percentToPixels(STATE.menuView.menuTextPaddingHorizontal(), stage.width)
var scrollProps = {
name: 'menu',
types:types,
axis: isVerticalMenu() ? 'y' : 'x',
align: isVerticalMenu() ? 'top' : STATE.menuView.menuTextAlignHorizontal(),
alpha:LAYOUT_MODEL.menuScrollbarBgAlpha,
color:LAYOUT_MODEL.menuScrollbarColor,
hover:LAYOUT_MODEL.menuScrollbarHover,
side:LAYOUT_MODEL.menuScrollbarAlignment,
width:scrollBarWidth,
topPad:0,
margin: isVerticalMenu() ? 2 : scrollMarginX,
offsetX: isVerticalMenu() ? scrollBarOffsetX : 0,
zIndex:500,
rounded: STATE.overrides.thumbnailScrollbarRounded,
visibility: STATE.overrides.thumbnailScrollbarVisibility
}
if(LAYOUT_MODEL.menuScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll) {
// scrollProps.margin = 0
scrollProps.color = '#000000'
scrollProps.hover = '#000000'
scrollProps.side = 'right'
scrollProps.alpha = 0
scrollProps.width = 7
scrollProps.offsetX = -10
scrollProps.offsetY = 0
scrollProps.rounded = true
scrollProps.visibility = 'when scrolling'
}
self.scroll = new Scroll(self.menuText, mask, scrollProps);
} else {
self.style.pointerEvents = 'auto';
mask.element.style.overflow = 'visible';
}
};
self.updateStyle();
return self;
}
function MenuText(vars) {
var self = new ViewProxy({events:vars.events});
self.zIndex = 5;
self.style.pointerEvents = 'auto';
var model = vars.model
var rootSections = model.ROOT_SECTION.media,
subMenus = [];
var menuBtns = {};
var selectedBtn;
var oldBtn;
var menuAccordion;
var path;
var initTime = 100;
if(USER_AGENT === MOBILE) {
self.updateSpeed = 1
} else {
self.updateSpeed = 0.35
}
function init() {
self.text = '';
self.children = [];
menuAccordion = new Accordion(vars);
menuAccordion.alpha = 0;
if(USER_AGENT === MOBILE) {
menuAccordion.gap = 0
} else if(USER_AGENT === TABLET) {
menuAccordion.gap = percentToPixels(firstValid(LAYOUT_MODEL.menuTextGapTablet, STATE.menuView.menuTextGap()), 100)
} else {
menuAccordion.gap = percentToPixels(STATE.menuView.menuTextGap(), 100)
}
if(/*USER_AGENT === MOBILE || */ LAYOUT_MODEL.menuExpandAll) {
menuAccordion.expand = 'all';
} else {
menuAccordion.expand = 'single';
}
menuAccordion.toggle = false;
menuAccordion.wrap = false;
var justification = USER_AGENT === TABLET ? LAYOUT_MODEL.menuTextAlignHorizontalTablet || 'left' : STATE.menuView.menuTextAlignHorizontal()
var align = justification
if(USER_AGENT === MOBILE) {
align = 'left'
} else if(/top|bottom/.test(STATE.menuView.placement()) && USER_AGENT !== TABLET) {
align = 'top'
}
menuAccordion.align = align
menuAccordion.updateSpeed = self.updateSpeed;
menuAccordion.axis = isVerticalMenu() ? 'y' : 'x';
menuAccordion.perpLength = isVerticalMenu() ? self.height : self.width;
menuAccordion.animate = false;
buildMenu(rootSections, false, menuAccordion, false);
self.addChild(menuAccordion);
self.width = menuAccordion.width;
self.height = menuAccordion.height;
menuAccordion.addEventListener(ACCORDION_SIZE_CHANGE, updateMenuSize);
updateMenuSize();
menuAccordion.layout();
if(selectedBtn) {
self.selectMenuItem();
}
setTimeout(function() {
initLayout();
alphaIn();
self.events.dispatchEvent(MENU_BUILT);
initTime = 0;
}, initTime);
}
function initLayout() {
layoutSubMenus();
menuAccordion.perpLength = isVerticalMenu() ? self.height : self.width;
menuAccordion.layout();
}
function alphaIn() {
setTimeout(function() {
Tween(menuAccordion, UPDATE_SPEED, {alpha:1});
}, 350);
}
function updateMenuSize(e) {
if(e) {
self.width = e.width;
self.height = e.height;
}
self.x = Math.round(layoutCalcs.menuText.x(self.width));
self.events.dispatchEvent(MENU_SIZE_CHANGE);
}
self.updatePosition = function(e) {
if(self.updateSpeed === 0) {
self.x = Math.round(layoutCalcs.menuText.x(self.width));
} else {
Tween(self, self.updateSpeed, {x:Math.round(layoutCalcs.menuText.x(self.width))});
}
menuAccordion.layout();
};
self.rebuild = function(e) {
model = e.model
rootSections = model.ROOT_SECTION.media;
init();
self.updateSpeed = 0;
menuAccordion.updateSpeed = 0;
self.selectMenuItem();
setTimeout(function() {
if(USER_AGENT === MOBILE) {
self.updateSpeed = 1
menuAccordion.updateSpeed = 1
} else {
self.updateSpeed = 0.35
menuAccordion.updateSpeed = 0.35
}
}, 0)
};
self.setActiveMenuItem = function(e) {
path = e.path;
if(menuAccordion) menuAccordion.updateSpeed = UPDATE_SPEED;
self.selectMenuItem();
};
self.selectMenuItem = function() {
oldBtn = selectedBtn;
if(path && (menuBtns[path] || menuBtns[removeDashes(path)])) {
if(menuBtns[path]) {
selectedBtn = menuBtns[path].label;
} else {
selectedBtn = menuBtns[removeDashes(path)].label;
}
selected.call(selectedBtn);
setTimeout(function() {
selected.call(selectedBtn);
}, 300)
selectedBtn.parentAccordion = selectedBtn.parent.parent.parent;
if(selectedBtn.parentAccordion) {
menuAccordion.select.call(selectedBtn.parentAccordion.label);
}
} else {
selectedBtn = undefined;
}
if(oldBtn) {
out.call(oldBtn);
if(!selectedBtn && oldBtn.parentAccordion) {
menuAccordion.select(oldBtn.parentAccordion.label);
}
}
};
function buildMenu(sections, isSub, parent, parentLabel) {
parent.parentLabel = parentLabel;
var i = 0,
length = sections.length;
for(;i < length; i++) {
var label,
content = undefined,
container = new Sprite(),
section = getObjById(model, Number(sections[i]))
if(section && isValidSection(section)) {
label = buildButton(section, isSub, parentLabel);
label.bullet = buildBullet(isSub);
if(isSub) {
menuBtns[label.path] = container;
parent.addChild(container);
} else {
menuBtns[label.path] = container;
if(hasSubMenu(section)) {
content = buildSubMenu(section, label);
if(content) {
container.hasSubs = true;
container.parentAccordion = parent;
container.parentAccordion.label = label;
container.addChild(content);
}
}
parent.addItem(container, label, content, false);
}
container.label = label;
container.addChild(label);
if(USER_AGENT !== MOBILE && section.label.toLowerCase() !== '%spacer%') container.addChild(label.bullet);
}
}
return parent;
}
function buildSubMenu(section, label) {
var content = buildMenu(csvToArray(section.media), true, buildSubMenuHolder(), label);
var firstSub = getFirstValidSub(section);
var firstMO = getMediaById(csvToArray(firstSub.media)[0]);
if(section.isIndex && !section.hideSubs) {
label.path = section.label;
label.section = section;
subMenus.push(content);
return content;
} else if(firstMO.type === "link" && (!firstMO.thumb || isSocialIcon(firstMO))) {
label.path = "";
subMenus.push(content);
return content;
} else if(section.label.toLowerCase() === '%spacer%') {
label.path = false;
return content;
} else if(!firstSub.label) {
return false;
} else if(USER_AGENT === MOBILE && !LAYOUT_MODEL.menuExpandAll) {
// to allow menu expand/toggle on mobile
label.path = section.key;
label.section = section;
subMenus.push(content);
return content;
} else if(label && content.children[0]) {
label.path = section.label + '/' + firstSub.label;
label.section = section;
subMenus.push(content);
return content;
}
return false;
}
function isValidSection(section) {
if(USER_AGENT === MOBILE && section.label.toLowerCase() === '%spacer%') {
return false;
}
return section.visible;
}
function buildButton(section, isSub, parentLabel) {
var label = buildLabel(section.alias || section.label, isSub);
var mediaItem = getMediaById(getFirstMediaId(section.media));
if(mediaItem.type === 'link') {
if(isCustomIcon(mediaItem)) {
label = loadCustomIcon(mediaItem);
label.y = (LAYOUT_MODEL.menuIconVerticalOffset || 0)
} else if(isSocialIcon(mediaItem)) {
if(LAYOUT_MODEL.footerIconType === 'png') {
label = loadSocialIcon(mediaItem);
label.y = (LAYOUT_MODEL.menuIconVerticalOffset || 0)
} else if(LAYOUT_MODEL.footerIconType === 'vector') {
label = createVectorIcon(mediaItem);
label.y = (LAYOUT_MODEL.menuIconVerticalOffset || 0)
}
}
}
if(USER_AGENT === MOBILE) {
label = buildPodLabel(label, isSub);
}
label.section = section;
function isSocialLink(mediaItem) {
return mediaItem && mediaItem.type === 'link' && isSocialIcon(mediaItem)
}
if(isOnlyLinkItem(mediaItem, section) || isSocialLink(mediaItem)) {
// for legacy custom first link in subs
// bubbles first link media items up to menu button
label.nothumbs = /nothumbs(\/|)$/.test(mediaItem.content)
label.type = 'external';
label.path = mediaItem.content;
label.linkTarget = mediaItem.linkTarget;
} else {
var path = '';
if(isSub && exists(parentLabel, 'label') && exists(label, 'label')) {
path = parentLabel.section.label + '/' + label.section.label;
} else if(exists(label, 'label')) {
path = label.section.label;
}
label.type = 'internal';
label.path = path;
label.linkTarget = '_self';
}
if(label.path.toLowerCase() !== '%spacer%') {
label.addEventListener(MOUSE_OVER, over);
label.addEventListener(MOUSE_OUT, out)
if(section.key !== 'copyright') {
label.addEventListener(CLICK, function(e) {
e.preventDefault()
menuAccordion.animate = true;
var navEvent = {
nothumbs:label.nothumbs,
section:label.section,
type:label.type,
path:label.path,
label:mediaItem.label,
linkTarget:label.linkTarget
};
if(label.section.indexLink) {
// for new style index gallery custom links
var navEvent = {
section:label.section,
type:'link',
path:label.section.indexLink,
label:label.section.label,
linkTarget:label.section.linkTarget || '_self'
};
}
if(label.path !== "" || label.socialLabel || label.customLabel) {
if((USER_AGENT === MOBILE || USER_AGENT === TABLET || STATE.menuView.placement() === 'overlay') && !LAYOUT_MODEL.menuExpandAll) {
// label is index thumbs && subs are visible
// - close menu nav to index gallery
// label is not index gallery && subs are visible
// - toggle sub menu open / leave menu open
if(label.section.isIndex) {
self.events.dispatchEvent(MENU_CLICK, navEvent);
} else if(sectionHasSubs(label.section) && !label.section.hideSubs) {
// toggle sub menu open
} else {
self.events.dispatchEvent(MENU_CLICK, navEvent);
}
/*
// prevent click for mobile expand/toggle subs
if(!sectionHasSubs(label.section) || (label.section.isIndex && label.section.hideSubs)) {
self.events.dispatchEvent(MENU_CLICK, navEvent);
}
*/
} else {
self.events.dispatchEvent(MENU_CLICK, navEvent);
}
}
})
}
}
// console.log(label.path, label.type, label.section.isIndex, label.section.indexLink, label.section)
// need to do more here to get the correct path
// maybe attach the navEvent obj to the label
// instead of waiting until the click event
// then possibly share some functions from AddressController to get the overlay states
//
label.element.href = '/' + label.path + '/'
label.element.style.textDecoration = 'none'
return label;
}
function isCustomIcon(mediaItem) {
return /src=/.test(mediaItem.label);
}
function isSocialIcon(mediaItem) {
return !!socialIcons[mediaItem.label.toLowerCase()];
}
function parseIconData(str) {
str = str.replace(/\[|\]|\s+/g, '')
var src = ''
var width = 20
var height = 20
if(str.indexOf(',') > -1) {
// has size info probably
var parts = str.split(',')
src = parts[0].split('=')[1]
var size = parts[1].split('x')
width = Number(size[0].split('=')[1])
height = Number(size[1])
} else {
// default to 20x20 size
src = str.split('=')[1]
}
return {
path: src,
width: width,
height: height
}
}
function loadCustomIcon(mediaItem) {
var iconData = parseIconData(mediaItem.label)
var icon = new Bitmap()
icon.src = SETTINGS_MODEL.cdnSslUri + '/' + iconData.path
icon.width = iconData.width
icon.height = iconData.height
//icon.style.padding = '2px 0'
icon.customLabel = mediaItem.label.toLowerCase()
icon.cursor = 'pointer'
return icon
}
function loadSocialIcon(mediaItem) {
var socialIcon = socialIcons[mediaItem.label.toLowerCase()];
var icon = new Bitmap();
icon.src = ICONS + socialIcon.filename;
icon.width = socialIcon.width;
icon.height = socialIcon.height;
icon.style.padding = '2px 0';
icon.socialLabel = mediaItem.label.toLowerCase();
icon.cursor = 'pointer'
return icon;
}
function getIconPath(socialIcon) {
switch(LAYOUT_MODEL.footerIconShape) {
case 'standard':
return socialIcon.svgStdPath
case 'rectangle':
return socialIcon.svgRectPath
case 'circle':
return socialIcon.svgCircPath
}
}
function createVectorIcon(mediaItem) {
var socialIcon = socialIcons[mediaItem.label.toLowerCase()];
var icon = new Svg()
var group = new Svg({type:'g'})
var path = new Path()
var scale = USER_AGENT === TABLET || USER_AGENT === MOBILE ? 1 : LAYOUT_MODEL.footerIconScale
group.scale = scale
if(/circle|rectangle/.test(LAYOUT_MODEL.footerIconShape)) {
var bg = new Rect()
bg.rx = LAYOUT_MODEL.footerIconShape === 'circle' ? socialIcon.bgCircRadius : socialIcon.bgRectRadius
bg.width = socialIcon.width
bg.height = socialIcon.height
bg.fill = LAYOUT_MODEL.footerIconColor
group.addChild(bg)
}
path.d = getIconPath(socialIcon)
path.fill = LAYOUT_MODEL.footerIconShape === 'standard' ? LAYOUT_MODEL.footerIconColor : LAYOUT_MODEL.footerIconBgColor
path.fillRule = 'evenodd'
group.addChild(path)
icon.addChild(group)
icon.width = socialIcon.width * scale
icon.height = socialIcon.height * scale
icon.socialLabel = mediaItem.label.toLowerCase()
return icon
}
function buildLabel(name, isSub) {
var type = name.toLowerCase() === '%spacer%' ? 'span' : 'a'
var label = new Sprite({type:type})
label.element.style['user-select'] = 'none'
if(USER_AGENT === MOBILE) {
if(isSub) {
label.fontFamily = LAYOUT_MODEL.menuSubFontMobile || LAYOUT_MODEL.menuFontMobile || LAYOUT_MODEL.menuFont
label.fontSize = LAYOUT_MODEL.menuSubFontSizeMobile || LAYOUT_MODEL.menuFontSizeMobile || LAYOUT_MODEL.menuSubFontSize
label.textTransform = LAYOUT_MODEL.menuSubTextTransform || 'none'
} else {
label.fontFamily = LAYOUT_MODEL.menuFontMobile || LAYOUT_MODEL.menuFont
label.fontSize = LAYOUT_MODEL.menuFontSizeMobile || LAYOUT_MODEL.menuFontSize
label.textTransform = LAYOUT_MODEL.menuTextTransform || 'none'
}
label.fontColor = LAYOUT_MODEL.menuFontColorMobile || LAYOUT_MODEL.menuFontColor
} else if(USER_AGENT === TABLET) {
if(isSub) {
label.fontFamily = LAYOUT_MODEL.menuSubFontTablet || LAYOUT_MODEL.menuFontTablet || LAYOUT_MODEL.menuFont
label.fontSize = LAYOUT_MODEL.menuSubFontSizeTablet || LAYOUT_MODEL.menuFontSizeTablet || LAYOUT_MODEL.menuSubFontSize
label.textTransform = LAYOUT_MODEL.menuSubTextTransform || 'none'
} else {
label.fontFamily = LAYOUT_MODEL.menuFontTablet || LAYOUT_MODEL.menuFont
label.fontSize = LAYOUT_MODEL.menuFontSizeTablet || LAYOUT_MODEL.menuFontSize
label.textTransform = LAYOUT_MODEL.menuTextTransform || 'none'
}
label.fontColor = LAYOUT_MODEL.menuFontColorTablet || LAYOUT_MODEL.menuFontColor
} else {
if(isSub) {
label.fontFamily = LAYOUT_MODEL.menuSubFont || LAYOUT_MODEL.menuFont
label.fontSize = STATE.menuView.menuSubFontSize()
label.textTransform = LAYOUT_MODEL.menuSubTextTransform || 'none'
} else {
label.fontFamily = LAYOUT_MODEL.menuFont
label.fontSize = STATE.menuView.menuFontSize()
label.textTransform = LAYOUT_MODEL.menuTextTransform || 'none'
}
label.fontColor = STATE.menuView.menuFontColor()
}
label.fontStyle = LAYOUT_MODEL.menuFontStyle || 'normal'
label.letterSpacing = LAYOUT_MODEL.menuKerning
label.textWrap = USER_AGENT === MOBILE
label.text = name.toLowerCase() === '%spacer%' ? " " : name
label.label = label
if(name.toLowerCase() !== '%spacer%') label.cursor = 'pointer'
// var blendMode = (USER_AGENT === MOBILE || USER_AGENT === TABLET || !LAYOUT_MODEL.menuBlendMode) ? 'normal' : LAYOUT_MODEL.menuBlendMode
// label.element.style['mix-blend-mode'] = blendMode
return label
}
function getIndentMobile(isSub) {
var indent = !isNaN(LAYOUT_MODEL.menuIndentMobile) ? LAYOUT_MODEL.menuIndentMobile : 20
var subIndent = !isNaN(LAYOUT_MODEL.menuSubIndentMobile) ? indent + LAYOUT_MODEL.menuSubIndentMobile : indent + 10
return isSub ? subIndent : indent
}
function buildPodLabel(label, isSub) {
var halign = LAYOUT_MODEL.menuTextAlignHorizontalMobile ? LAYOUT_MODEL.menuTextAlignHorizontalMobile : 'left'
var indent = getIndentMobile(isSub)
var isIcon = (label instanceof Svg) || label.type === 'img'
var isLineSeparator = LAYOUT_MODEL.menuLinesMobile === '' || LAYOUT_MODEL.menuLinesMobile === undefined || LAYOUT_MODEL.menuLinesMobile
var menuLineHeight = LAYOUT_MODEL.menuLineHeightMobile || 60
var justifyContent
switch(halign) {
case 'left':
justifyContent = 'flex-start'
break
case 'center':
justifyContent = 'center'
break
case 'right':
justifyContent = 'flex-end'
break
}
var bg = new Sprite();
bg.addChild(label);
bg.label = label;
bg.width = layoutCalcs.menuView.width();
bg.minHeight = menuLineHeight;
bg.position = 'relative'
bg.display = 'flex'
bg.style.justifyContent = justifyContent
bg.style.alignItems = 'center'
// bg.backgroundColor = toRgba(STATE.menuView.menuBgColor(), STATE.menuView.menuBgAlpha());
if(isLineSeparator) {
bg.borderBottom = '1px solid ' + toRgba(STATE.menuView.menuFontColor(), STATE.menuView.menuBgAlpha() + 0.15);
}
label.position = 'relative'
layoutCalcs.menuBullet.updateSize(isSub);
label.x = 0;
label.y = isLineSeparator ? 1 : 0;
label.textAlign = halign
label.paddingLeft = indent;
label.paddingRight = indent;
return bg;
}
function buildBullet(isSub) {
if(LAYOUT_MODEL.menuBulletType === 'custom_png') {
var bullet = new Bitmap()
bullet.isSub = isSub
layoutCalcs.menuBullet.updateSize(isSub);
bullet.alpha = 0;
self.addChild(bullet);
bullet.element.addEventListener(LOAD, function(e) {
var bulletObj = {width:e.target.offsetWidth, height:e.target.offsetHeight, filename:this.src};
setTimeout(function() {
var retinaSize = RetinaResizeEngine(bulletObj);
bullet.width = retinaSize.width;
bullet.height = retinaSize.height;
layoutCalcs.menuBullet.width = retinaSize.width;
layoutCalcs.menuBullet.height = retinaSize.height;
// Tween(bullet, UPDATE_SPEED, {alpha:1});
bullet.width = layoutCalcs.menuBullet.width;
if(isSub) {
bullet.x = Math.round(-(bullet.width + 15) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal);
bullet.y = 0 + LAYOUT_MODEL.menuSubBulletOffsetVertical;
} else {
bullet.x = Math.round(-(bullet.width + 15) + LAYOUT_MODEL.menuBulletOffsetHorizontal);
bullet.y = 0 + LAYOUT_MODEL.menuBulletOffsetVertical;
}
}, 10);
});
bullet.src = SETTINGS_MODEL.cdnSslUri + '/' + 'menu-bullet__at__2x.png'
} else if(/^underline/.test(LAYOUT_MODEL.menuBulletType)) {
var thickness = Number(LAYOUT_MODEL.menuBulletType.split('_')[1])
var bullet = new Sprite();
bullet.isSub = isSub
bullet.backgroundColor = toRgba(STATE.menuView.menuFontColor(), 0);
bullet.width = 0;
bullet.height = thickness;
// var blendMode = (USER_AGENT === MOBILE || USER_AGENT === TABLET || !LAYOUT_MODEL.menuBlendMode) ? 'normal' : LAYOUT_MODEL.menuBlendMode
// bullet.element.style['mix-blend-mode'] = blendMode
} else {
var bullet = new Sprite();
bullet.isSub = isSub
layoutCalcs.menuBullet.updateSize(isSub);
bullet.fontFamily = LAYOUT_MODEL.menuFont;
bullet.fontColor = toRgba(STATE.menuView.menuFontColor(), 0);
bullet.fontSize = isSub ? STATE.menuView.menuSubFontSize() : STATE.menuView.menuFontSize();
bullet.width = layoutCalcs.menuBullet.width;
bullet.text = menuBullet[LAYOUT_MODEL.menuBulletType];
// var blendMode = (USER_AGENT === MOBILE || USER_AGENT === TABLET || !LAYOUT_MODEL.menuBlendMode) ? 'normal' : LAYOUT_MODEL.menuBlendMode
// bullet.element.style['mix-blend-mode'] = blendMode
if(isSub) {
bullet.x = Math.round(-(bullet.width + 15) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal);
bullet.y = 0 + LAYOUT_MODEL.menuSubBulletOffsetVertical;
} else {
bullet.x = Math.round(-(bullet.width + 15) + LAYOUT_MODEL.menuBulletOffsetHorizontal);
bullet.y = 0 + LAYOUT_MODEL.menuBulletOffsetVertical;
}
}
return bullet;
}
function getSubAlign() {
var textAlign = STATE.menuView.menuSubTextAlignHorizontal() === 'inherit' ? STATE.menuView.menuTextAlignHorizontal() : STATE.menuView.menuSubTextAlignHorizontal()
if(USER_AGENT === MOBILE) {
return LAYOUT_MODEL.menuTextAlignHorizontalMobile || 'left'
}
if(USER_AGENT === TABLET) {
return LAYOUT_MODEL.menuTextAlignHorizontalTablet || 'left'
}
return textAlign
}
function layoutSubMenus() {
var i = 0
var length = subMenus.length
var subAlign = getSubAlign()
var subHPadding = firstValid(LAYOUT_MODEL.menuSubTextPaddingHorizontal, 5)
for(;i < length; i++) {
var subMenu = subMenus[i];
jLength = subMenu.children.length;
for(j = 0; j < jLength; j++) {
subMenu.tile.perpLength = subMenu.children[j].label.width > subMenu.tile.perpLength ? subMenu.children[j].label.width : subMenu.tile.perpLength;
subMenu.tile.addItem(subMenu.children[j].label.width, subMenu.children[j].label.height);
}
subMenu.tile.layoutItems();
var subTextGap = STATE.menuView.menuSubTextGap()
if(USER_AGENT === TABLET) {
subTextGap = firstValid(LAYOUT_MODEL.menuTextGapTablet, STATE.menuView.menuSubTextGap())
}
subTextGap = percentToPixels(subTextGap, 100)
for(var k = 0; k < jLength; k++) {
var position = subMenu.tile.getPosition(k);
var alignX = position.x
if(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu) {
// half of padding
alignX = position.x + subHPadding
}
subMenu.children[k].x = Math.round(alignX);
if(USER_AGENT === MOBILE) {
subMenu.children[k].x = position.x;
subMenu.children[k].y = position.y;
} else {
subMenu.children[k].y = position.y + LAYOUT_MODEL.menuSubGapLeading;
}
}
var bounds = subMenu.tile.getBounds();
if(USER_AGENT === MOBILE) {
subMenu.height = bounds.height;
} else {
subMenu.height = bounds.height + LAYOUT_MODEL.menuSubGapLeading + LAYOUT_MODEL.menuSubGapTrailing;
if(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu) {
// dropdown menu sub container needs gap subtracted for multiple subs only
// because tile is already subtracting the gap for single row
// left a comment in Tile.js to reference this...
// if(jLength > 1) subMenu.height -= subTextGap
}
}
if(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu) {
// make 5 pixel padding all around
subMenu.width = bounds.width + (subHPadding * 2)
} else {
subMenu.width = isVerticalMenu() ? subMenu.tile.perpLength : bounds.width - subTextGap;
}
function getSubIndent() {
if(USER_AGENT === MOBILE) {
return 0
} else if(USER_AGENT === TABLET) {
return firstValid(LAYOUT_MODEL.menuSubIndentTablet, LAYOUT_MODEL.menuSubIndent)
}
return LAYOUT_MODEL.menuSubIndent
}
switch(subAlign) {
case 'left':
subMenu.x = getSubIndent();
if(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu) {
// half of padding
subMenu.x -= subHPadding
}
break;
case 'center':
var centerPointComp = LAYOUT_MODEL.dropdownSubMenu ? 0 : Math.round((self.width * 0.5) - (subMenu.parent.x + (subMenu.parent.width * 0.5)))
subMenu.x = Math.round((subMenu.parent.width - subMenu.width) * 0.5) + centerPointComp;
break;
case 'right':
subMenu.x = Math.round(subMenu.parentLabel.width - subMenu.width - (getSubIndent() * 2));
if(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu) {
// half of padding
subMenu.x += subHPadding
}
break;
}
subMenu.y = subMenu.parentLabel.height;
}
}
function mouseEvents(hit) {
hit.addEventListener(MOUSE_OVER, over);
hit.addEventListener(MOUSE_OUT, out);
hit.addEventListener(CLICK, click);
}
function hasSubs(path, label) {
return path !== label && path.split('/')[0] === label
}
var lastBtnOver
function over(e) {
if(!(this.bullet && this.bullet.src) && (this.src || this instanceof Svg)) {
Tween(this, UPDATE_SPEED, {alpha:0.65});
} else {
if(this !== selectedBtn) {
this.label.transition = 0;
Tween(this.label, UPDATE_SPEED, {fontColor:STATE.menuView.menuFontColorHover()});
if(this.bullet && /^underline/.test(LAYOUT_MODEL.menuBulletType)) {
this.bullet.transition = 0;
this.bullet.x = 0;
this.bullet.y = this.label.height;
Tween(this.bullet, 0.25, {width: (this.label.width - LAYOUT_MODEL.menuKerning), backgroundColor:toRgba(STATE.menuView.menuFontColorHover(), 1)});
} else if(this.bullet && this.bullet.src) {
this.bullet.transition = 0;
var bulletX;
if(this.bullet.isSub) {
this.bullet.x = -(this.bullet.width + 15) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal;
bulletX = -(this.bullet.width + 4) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal;
} else {
this.bullet.x = -(this.bullet.width + 15) + LAYOUT_MODEL.menuBulletOffsetHorizontal;
bulletX = -(this.bullet.width + 4) + LAYOUT_MODEL.menuBulletOffsetHorizontal;
}
this.bullet.isHover = true;
Tween(this.bullet, UPDATE_SPEED, {alpha:1, x:bulletX});
} else if(this.bullet) {
this.bullet.transition = 0;
var bulletX;
if(this.bullet.isSub) {
this.bullet.x = -(this.bullet.width + 15) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal;
bulletX = -(this.bullet.width + 4) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal;
} else {
this.bullet.x = -(this.bullet.width + 15) + LAYOUT_MODEL.menuBulletOffsetHorizontal;
bulletX = -(this.bullet.width + 4) + LAYOUT_MODEL.menuBulletOffsetHorizontal;
}
this.bullet.fontColor = STATE.menuView.menuFontColorHover();
this.bullet.isHover = true;
Tween(this.bullet, UPDATE_SPEED, {fontColor:toRgba(STATE.menuView.menuFontColorHover(), 1), x:bulletX});
}
}
}
if(lastBtnOver && lastBtnOver.scope !== this) {
out.call(lastBtnOver.scope, lastBtnOver.events)
lastBtnOver = {scope:this, events:e}
}
}
function out(e) {
if(!(this.bullet && this.bullet.src) && (this.src || this instanceof Svg)) {
Tween(this, UPDATE_SPEED, {alpha:1});
} else {
if(this !== selectedBtn) {
this.label.transition = 0;
Tween(this.label, UPDATE_SPEED, {fontColor:STATE.menuView.menuFontColor()});
if(/^underline/.test(LAYOUT_MODEL.menuBulletType)) {
Tween(this.bullet, 0.15, {width: 0});
} else if(this.bullet && this.bullet.src) {
this.bullet.transition = 0;
var bulletX;
if(this.bullet.isSub) {
bulletX = -(this.bullet.width + 15) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal;
} else {
bulletX = -(this.bullet.width + 15) + LAYOUT_MODEL.menuBulletOffsetHorizontal;
}
this.bullet.isHover = false;
Tween(this.bullet, UPDATE_SPEED, {alpha:0, x:bulletX, onComplete:function(){
if(!this.isHover) {
this.transition = 0;
this.x = -200;
}
}});
} else if(this.bullet) {
this.bullet.transition = 0;
this.bullet.isHover = false;
var bulletX;
if(this.bullet.isSub) {
bulletX = -(this.bullet.width + 15) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal;
} else {
bulletX = -(this.bullet.width + 15) + LAYOUT_MODEL.menuBulletOffsetHorizontal;
}
Tween(this.bullet, UPDATE_SPEED, {fontColor:toRgba(STATE.menuView.menuBgColor(), 0), x:bulletX, onComplete:function(){
if(!this.isHover) {
this.transition = 0;
this.x = -200;
}
}});
}
}
}
}
function selected(e) {
if(this.label) {
this.label.transition = 0;
this.label.fontColor = STATE.menuView.menuFontColorSelected();
}
if(this.bullet && this.bullet.src) {
this.bullet.alpha = 1;
}
if(this.bullet) {
this.bullet.transition = 0;
if(this.bullet.isSub) {
this.bullet.x = Math.round(-(this.bullet.width + 4) + LAYOUT_MODEL.menuSubBulletOffsetHorizontal);
} else {
this.bullet.x = Math.round(-(this.bullet.width + 4) + LAYOUT_MODEL.menuBulletOffsetHorizontal);
}
this.bullet.fontColor = toRgba(STATE.menuView.menuFontColorSelected(), 1);
if(/^underline/.test(LAYOUT_MODEL.menuBulletType)) {
this.bullet.transition = 0;
this.bullet.x = 0;
this.bullet.y = this.label.height;
this.bullet.backgroundColor = toRgba(STATE.menuView.menuFontColorSelected(), 1);
this.bullet.width = (this.label.width - LAYOUT_MODEL.menuKerning)
}
}
}
function getFirstMediaId(media) {
return csvToArray(media)[0];
}
function hasSubMenu(section) {
var media = csvToArray(section.media);
var i; for(i in media) {
if(isSection(media[i]) && !(section.isIndex && section.hideSubs)) {
return true;
}
}
return false;
}
function buildSubMenuHolder() {
var subTextGap = STATE.menuView.menuSubTextGap()
if(USER_AGENT === TABLET) {
subTextGap = firstValid(LAYOUT_MODEL.menuTextGapTablet, STATE.menuView.menuSubTextGap())
}
subTextGap = percentToPixels(subTextGap, 100)
var content = new Sprite()
if(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu) {
content.backgroundColor = toRgba(LAYOUT_MODEL.menuSubBgColor || STATE.menuView.menuBgColor(), firstValid(LAYOUT_MODEL.menuSubBgAlpha, STATE.menuView.menuBgAlpha()))
if(LAYOUT_MODEL.menuSubDropShadowAlpha) content.boxShadow = LAYOUT_MODEL.menuSubDropShadowAlpha ? 'rgba(0, 0, 0, ' + LAYOUT_MODEL.menuSubDropShadowAlpha + ') 0px 15px 20px' : 'rgba(0, 0, 0, 0.05) 0px 15px 20px'
}
var perpLength = isVerticalMenu() ? layoutCalcs.menuView.width() : layoutCalcs.menuView.height()
if(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu) {
perpLength = content.width
}
var subAlign = getSubAlign()
content.tile = new Tile()
if(!isVerticalMenu() && LAYOUT_MODEL.dropdownSubMenu) {
content.tile.hGap = 0
content.tile.vGap = subTextGap
} else {
content.tile.gap = USER_AGENT === MOBILE ? 0 : subTextGap
}
content.tile.axis = isVerticalMenu() || LAYOUT_MODEL.dropdownSubMenu ? 'y' : 'x'
content.tile.align = (!isVerticalMenu() && USER_AGENT !== TABLET && !LAYOUT_MODEL.dropdownSubMenu) || USER_AGENT === MOBILE ? 'left' : subAlign
content.tile.wrap = USER_AGENT === MOBILE
content.tile.perpLength = perpLength
return content
}
self.addEventListener(CHILD_ADDED, function(child) {
});
return self;
}
var menuBullet = {
'':'',
'none':'',
'arrow':'›',
'arrow2':'»',
'bullet':'•',
'bullet2':'·',
'dash':'-'
};
function NavbarController(vars) {
var self = new ControllerProxy({parentView:vars.parentView, parentController:vars.parentController, events:vars.siteControllerEvents});
self.updateSpeed = 0;
self.navbarView = new vars.NavbarView(vars);
self.navbarView.alpha = 0;
self.parentView.addChild(self.navbarView);
var initTime = 1000,
state;
self.events.addEventListener(NAVBAR_MODEL_CHANGE, self.navbarView.buildNavBtns);
self.events.addEventListener(LAYOUT_MODEL_CHANGE, self.navbarView.updateStyle);
self.events.addEventListener(SITE_URI_CHANGE, updateNavbarInfo);
self.events.addEventListener(SECTIONS_MODEL_CHANGE, updateNavbarInfo);
self.events.addEventListener(RESIZE_END, self.navbarView.resize);
self.events.addEventListener('updateAssetId', updateNavbarInfo);
self.events.addEventListener('UPDATE_CONTENT_HEIGHT', function() {
self.navbarView.updateSpeed = 0;
self.navbarView.updatePosition();
});
function updateNavbarInfo(e) {
if(e.section) {
state = e;
} else if(state) {
state.assetId = e.id;
}
setTimeout(function(){
if(state) {
self.navbarView.updateSpeed = 0;
self.navbarView.updateCount(state);
if(LAYOUT_MODEL.unifiedPageScrolling) {
self.navbarView.updateSpeed = 0;
self.navbarView.updatePosition();
}
}
initTime = 0;
}, initTime);
}
return self;
}
function NavbarView(vars) {
var self = new ViewProxy({events:vars.events}),
tile;
self.alpha = 0;
self.zIndex = STATE.navbarView.zIndex();
self.updateSpeed = 0;
self.x = 0
self.y = 0
if(USER_AGENT === MOBILE || USER_AGENT === TABLET) {
self.position = 'absolute'
} else {
self.position = LAYOUT_MODEL.navbarPositionFixed ? 'fixed' : 'absolute'
}
var childAdded = false,
assetId = 0,
sectionLength = 0,
thumbsMode = false,
count,
curMediaItem,
isBuildFotomoto = false,
navbarFontSize = percentToPixels(LAYOUT_MODEL.navbarFontSize, 100),
isMobileCaptionBuild,
mode;
self.addEventListener(CHILD_ADDED, function(child) {
childAdded = true;
});
self.updateStyle = function(e) {
if(childAdded) {
self.buildNavBtns();
var blendMode = (USER_AGENT === MOBILE || USER_AGENT === TABLET || !LAYOUT_MODEL.navbarBlendMode) ? 'normal' : LAYOUT_MODEL.navbarBlendMode
self.element.style['mix-blend-mode'] = blendMode
}
};
self.resize = function() {
self.updateSpeed = UPDATE_SPEED;
self.updatePosition();
};
self.updatePosition = function(e) {
if(USER_AGENT === TABLET) {
self.position = 'absolute'
} else {
self.position = USER_AGENT === MOBILE || LAYOUT_MODEL.navbarPositionFixed ? 'fixed' : 'absolute'
}
Tween(self, 0, {
x:layoutCalcs.navbarView.x(self.width),
y:layoutCalcs.navbarView.y(self.height)
});
};
self.hide = function() {
layoutCalcs._navbarVisible = false
Tween(self, UPDATE_SPEED, {alpha:0,onComplete:function(){
self.display = 'none';
}});
self.events.dispatchEvent('menuUpdatePosition', false)
};
self.show = function() {
layoutCalcs._navbarVisible = true
self.display = 'block';
Tween(self, UPDATE_SPEED, {alpha:1});
self.events.dispatchEvent('menuUpdatePosition', true)
};
self.updateCount = function(e) {
if(e && e.mediaToRender && typeof e.assetId === 'number') {
curMediaItem = getMediaById(e.mediaToRender[e.assetId]);
var hasInquiry = !!NAVBAR_MODEL.filter(function(button) {
return button.type === 'inquiry'
})[0]
isMobileCaptionBuild = USER_AGENT === MOBILE && (curMediaItem.caption !== '' || hasInquiry);
}
mode = e.mode ? e.mode : ''
sectionLength = removeLinksFromMedia(e.section.mediaItems).length;
thumbsMode = STATE.overrides.thumbnailType;
if(/fill|hMasonry|vMasonry/.test(thumbsMode) && /thumbs/.test(mode)) {
self.hide()
} else if(e.section.id === LANDING_MEDIA && childAdded) {
self.hide();
} else if(isMediaItem(e.section.mediaItems) && childAdded) {
// 6-26-15 bug #726 (navbar was hiding on single image in gallery for mobile)
if(USER_AGENT === MOBILE && isMobileCaptionBuild) {
self.buildNavBtns();
self.show();
} else {
self.hide();
}
} else if(e.assetId > -1 && childAdded) {
assetId = e.assetId;
if(sectionLength > 1) {
self.show();
if(window.FOTOMOTO && curMediaItem && curMediaItem.type === 'image') {
checkFotomotoProductAvailability(curMediaItem.content);
} else {
self.buildNavBtns();
}
} else {
self.hide();
}
} else {
/*update count on media add/remove in section*/
if(e.assetId === -1) assetId = 0
if(sectionLength > 1) {
self.show();
if(window.FOTOMOTO && curMediaItem && curMediaItem.type === 'image') {
checkFotomotoProductAvailability(curMediaItem.content);
} else {
self.buildNavBtns();
}
} else {
self.hide();
}
}
};
self.buildNavBtns = function() {
navbarFontSize = percentToPixels(LAYOUT_MODEL.navbarFontSize, 100);
self.parent.removeChildren(self);
for(var i in NAVBAR_MODEL) {
if(NAVBAR_MODEL.hasOwnProperty(i)) {
if(NAVBAR_MODEL[i].type === 'fullscreen' && !isFullscreenCapable()) continue;
if(NAVBAR_MODEL[i].type === 'thumbs' && thumbsMode === 'none') continue;
if(NAVBAR_MODEL[i].type === 'fotomoto' && !isBuildFotomoto) continue;
if(!/caption|inquiry/.test(NAVBAR_MODEL[i].type) && USER_AGENT === MOBILE) continue;
if(USER_AGENT === MOBILE && !isMobileCaptionBuild) continue;
var btn = new Sprite();
self.addChild(btn);
if(NAVBAR_MODEL[i].type === 'caption' && curMediaItem) {
btn.alpha = curMediaItem.caption === '' ? 0.35 : 1
}
if(USER_AGENT === MOBILE && mode && mode === 'caption' && NAVBAR_MODEL[i].type === 'caption' && curMediaItem && curMediaItem.caption) {
btn.label = buildLabel('×', navbarFontSize + 20);
btn.addChild(btn.label);
btn.width = btn.label.width;
btn.height = navbarFontSize + 10;
btn.label.x = 0;
btn.label.y = (navbarFontSize - btn.label.height) * 0.5;
} else if(NAVBAR_MODEL[i].type === 'spacer') {
btn.label = buildLabel(" ");
btn.addChild(btn.label);
btn.width = btn.label.width;
btn.height = navbarFontSize;
btn.label.x = 0;
btn.label.y = (navbarFontSize - btn.label.height) * 0.5;
} else if(NAVBAR_MODEL[i].iconType === 'label' || NAVBAR_MODEL[i].type === 'count') {
btn.label = buildLabel(NAVBAR_MODEL[i].name);
btn.addChild(btn.label);
btn.width = btn.label.width;
btn.height = navbarFontSize;
btn.label.x = 0;
btn.label.y = (navbarFontSize - btn.label.height) * 0.5;
} else if(NAVBAR_MODEL[i].iconType === 'icon') {
btn.icon = makeIcon(NAVBAR_MODEL[i].type);
btn.addChild(btn.icon);
btn.width = btn.icon.width;
btn.height = navbarFontSize;
btn.icon.left = 0;
btn.icon.top = Math.round((navbarFontSize - btn.icon.height) * 0.5) + LAYOUT_MODEL.navbarIconOffsetY;
} else if(NAVBAR_MODEL[i].iconType === 'both') {
btn.icon = makeIcon(NAVBAR_MODEL[i].type);
btn.addChild(btn.icon);
btn.label = buildLabel(NAVBAR_MODEL[i].name);
btn.addChild(btn.label);
if(NAVBAR_MODEL[i].type === 'next') {
if(LAYOUT_MODEL.navbarLayout === 'vertical') {
btn.label.x = -3;
btn.icon.left = Math.round(btn.label.width - LAYOUT_MODEL.navbarIconOffsetX);
} else {
btn.label.x = 0;
btn.icon.left = Math.round(btn.label.width - LAYOUT_MODEL.navbarIconOffsetX + 3);
}
btn.label.y = (navbarFontSize - btn.label.height) * 0.5;
btn.icon.top = Math.round(((navbarFontSize - btn.icon.height) * 0.5) + LAYOUT_MODEL.navbarIconOffsetY);
btn.width = btn.icon.width + btn.label.width - LAYOUT_MODEL.navbarIconOffsetX;
} else {
btn.icon.left = 0;
btn.icon.top = Math.round(((navbarFontSize - btn.icon.height) * 0.5) + LAYOUT_MODEL.navbarIconOffsetY);
btn.label.x = btn.icon.width - LAYOUT_MODEL.navbarIconOffsetX + 3;
btn.label.y = (navbarFontSize - btn.label.height) * 0.5;
btn.width = btn.icon.width + btn.label.width - LAYOUT_MODEL.navbarIconOffsetX + 3;
}
btn.height = navbarFontSize;
}
var hit = new Sprite();
hit.width = btn.width;
hit.height = btn.height;
hit.type = NAVBAR_MODEL[i].type;
hit.tooltip = NAVBAR_MODEL[i].tooltip;
if(btn.label) {
hit.label = btn.label;
}
if(btn.icon) {
hit.icon = btn.icon;
}
btn.addChild(hit);
btn.hit = hit;
if(NAVBAR_MODEL[i].type === 'count') {
count = btn;
count.label.text = assetId + 1 + ' of ' + sectionLength;
count.width = count.label.element.offsetWidth;
hit.width = count.label.element.offsetWidth;
} else if(NAVBAR_MODEL[i].type === 'spacer') {
/*no listeners*/
} else {
hit.addEventListener(MOUSE_OVER, over);
hit.addEventListener(MOUSE_OUT, out);
hit.addEventListener(CLICK, click);
}
if(btn.label) btn.label.element.style['user-select'] = 'none'
}
}
if(Object.keys(NAVBAR_MODEL).length > 0) {
layoutBtns();
self.updatePosition();
}
};
var clickTimer
function click(e) {
clearTimeout(clickTimer)
clickTimer = setTimeout(function(ths) {
if(ths.type === 'fullscreen') {
self.events.dispatchEvent(NAVBAR_FULLSCREEN);
} else if(ths.type === 'prev' || ths.type === 'next') {
self.events.dispatchEvent(NAVBAR_NAV_CLICK, {navDir:ths.type});
} else if(ths.type === 'email') {
self.events.dispatchEvent(NAVBAR_OVERLAY_BTN_CLICK, 'share');
} else {
self.events.dispatchEvent(NAVBAR_OVERLAY_BTN_CLICK, ths.type);
}
}, 200, this)
}
function over(e) {
if(this.label) {
Tween(this.label, UPDATE_SPEED, {fontColor:LAYOUT_MODEL.navbarColorHover});
}
if(this.icon && this.icon.path && this.icon.path.stroke !== 'none') {
Tween(this.icon.path, UPDATE_SPEED, {stroke:LAYOUT_MODEL.navbarColorHover});
}
if(this.icon && this.icon.path && this.icon.path.fill !== 'none') {
Tween(this.icon.path, UPDATE_SPEED, {fill:LAYOUT_MODEL.navbarColorHover});
}
if(!isPad() && !isPod()) vars.parentController.tooltip.show(e);
}
function out(e) {
if(this.label) {
Tween(this.label, UPDATE_SPEED, {fontColor:LAYOUT_MODEL.navbarColor});
}
if(this.icon && this.icon.path && this.icon.path.stroke !== 'none') {
Tween(this.icon.path, UPDATE_SPEED, {stroke:LAYOUT_MODEL.navbarColor});
}
if(this.icon && this.icon.path && this.icon.path.fill !== 'none') {
Tween(this.icon.path, UPDATE_SPEED, {fill:LAYOUT_MODEL.navbarColor});
}
}
function buildLabel(name, size) {
var label = new Button();
label.fontFamily = LAYOUT_MODEL.navbarFont;
label.fontSize = size || navbarFontSize;
label.fontColor = LAYOUT_MODEL.navbarColor;
label.letterSpacing = LAYOUT_MODEL.navbarKerning;
label.textTransform = LAYOUT_MODEL.navbarTextTransform || 'none';
label.backgroundColor = 'transparent';
label.cursor = 'pointer'
label.textWrap = false;
label.text = name;
return label;
}
function makeIcon(type) {
var scale = LAYOUT_MODEL.navbarIconScale;
var icon = new Svg();
icon.left = 0;
icon.top = 0;
icon.rotate = 0;
icon.path = new Path();
icon.path.scale = scale;
switch(type) {
case 'prev':
icon.width = 8 * scale;
icon.height = 15 * scale;
icon.path.d = svgPaths.navArrowLeft['default'];
icon.path.strokeWidth = LAYOUT_MODEL.navbarIconSet === 'thin' ? 1 : 3;
icon.path.fill = 'none';
icon.path.stroke = LAYOUT_MODEL.navbarColor;
break;
case 'next':
icon.width = 8 * scale;
icon.height = 15 * scale;
icon.path.d = svgPaths.navArrowRight['default'];
icon.path.strokeWidth = LAYOUT_MODEL.navbarIconSet === 'thin' ? 1 : 3;
icon.path.fill = 'none';
icon.path.stroke = LAYOUT_MODEL.navbarColor;
break;
case 'email':
case 'share':
icon.width = 15 * scale;
icon.height = 15 * scale;
icon.path.d = svgPaths.navShare[LAYOUT_MODEL.navbarIconSet];
icon.path.strokeWidth = LAYOUT_MODEL.navbarIconSet === 'thin' ? 1 : 0;
icon.path.fill = LAYOUT_MODEL.navbarIconSet === 'thin' ? 'none' : LAYOUT_MODEL.navbarColor;
icon.path.stroke = LAYOUT_MODEL.navbarIconSet === 'thin' ? LAYOUT_MODEL.navbarColor : 'none';
break;
case 'inquiry':
icon.width = 14 * scale;
icon.height = 9 * scale;
icon.path.d = svgPaths.navCart[LAYOUT_MODEL.navbarIconSet];
icon.path.strokeWidth = LAYOUT_MODEL.navbarIconSet === 'thin' ? 1 : 0;
icon.path.fill = LAYOUT_MODEL.navbarIconSet === 'thin' ? 'none' : LAYOUT_MODEL.navbarColor;
icon.path.stroke = LAYOUT_MODEL.navbarIconSet === 'thin' ? LAYOUT_MODEL.navbarColor : 'none';
break;
case 'fotomoto':
icon.width = 14 * scale;
icon.height = 9 * scale;
icon.path.d = svgPaths.navCart[LAYOUT_MODEL.navbarIconSet];
icon.path.strokeWidth = LAYOUT_MODEL.navbarIconSet === 'thin' ? 1 : 0;
icon.path.fill = LAYOUT_MODEL.navbarIconSet === 'thin' ? 'none' : LAYOUT_MODEL.navbarColor;
icon.path.stroke = LAYOUT_MODEL.navbarIconSet === 'thin' ? LAYOUT_MODEL.navbarColor : 'none';
break;
case 'thumbs':
icon.width = 15 * scale;
icon.height = 15 * scale;
icon.path.d = svgPaths.navThumbs[LAYOUT_MODEL.navbarIconSet];
icon.path.strokeWidth = LAYOUT_MODEL.navbarIconSet === 'thin' ? 1 : 0;
icon.path.fill = LAYOUT_MODEL.navbarIconSet === 'thin' ? 'none' : LAYOUT_MODEL.navbarColor;
icon.path.stroke = LAYOUT_MODEL.navbarIconSet === 'thin' ? LAYOUT_MODEL.navbarColor : 'none';
break;
case 'caption':
icon.width = 15 * scale;
icon.height = 15 * scale;
icon.path.d = svgPaths.navInfo[LAYOUT_MODEL.navbarIconSet];
icon.path.strokeWidth = LAYOUT_MODEL.navbarIconSet === 'thin' ? 1 : 0;
icon.path.fill = LAYOUT_MODEL.navbarIconSet === 'thin' ? 'none' : LAYOUT_MODEL.navbarColor;
icon.path.stroke = LAYOUT_MODEL.navbarIconSet === 'thin' ? LAYOUT_MODEL.navbarColor : 'none';
break;
case 'fullscreen':
icon.width = 15 * scale;
icon.height = 9 * scale;
icon.path.d = svgPaths.navFullscreen[LAYOUT_MODEL.navbarIconSet];
icon.path.strokeWidth = LAYOUT_MODEL.navbarIconSet === 'thin' ? 1 : 0;
icon.path.fill = LAYOUT_MODEL.navbarIconSet === 'thin' ? 'none' : LAYOUT_MODEL.navbarColor;
icon.path.stroke = LAYOUT_MODEL.navbarIconSet === 'thin' ? LAYOUT_MODEL.navbarColor : 'none';
break;
}
icon.addChild(icon.path);
return icon;
}
function checkFotomotoProductAvailability(imageId) {
window.FOTOMOTO.API.getImageProducts(SETTINGS_MODEL.cdnSslUri + '/' + imageId, fotomotoResponse);
}
function fotomotoResponse(response) {
if(response && (response[100] || response[101] || response[102] || response[103] || response[104] || response[105] || response[200] || response[300] || response[400])) {
isBuildFotomoto = true;
self.buildNavBtns();
} else {
isBuildFotomoto = false;
self.buildNavBtns();
}
}
function layoutBtns() {
var btns = self.children,
i,
length = btns.length;
if(length > 0) {
tile = new Tile({id:'nav'});
tile.gap = LAYOUT_MODEL.navbarGap + 2;
tile.axis = LAYOUT_MODEL.navbarLayout === 'horizontal' ? 'x' : 'y';
tile.align = LAYOUT_MODEL.navbarLayout === 'vertical' ? LAYOUT_MODEL.navbarJustification : 'left';
tile.wrap = false;
tile.perpLength = tile.axis === 'x' ? btns[0].height : btns[0].width;
for(i = 0; i < length; i++) {
if(tile.axis === 'x') {
if(btns[i].height > tile.perpLength) {
tile.perpLength = btns[i].height;
}
} else {
if(btns[i].width > tile.perpLength) {
tile.perpLength = btns[i].width;
}
}
tile.addItem(btns[i].width, btns[i].height);
}
tile.layoutItems();
for(i = 0; i < length; i++) {
var position = tile.getPosition(i);
btns[i].x = position.x;
btns[i].y = position.y;
}
self.transition = 0;
var bounds = tile.getBounds();
self.width = bounds.width;
self.height = bounds.height;
}
}
return self;
}
function IntroView(vars) {
var self = new Sprite({events:vars.events}),
duration = 1.4,
parentView = vars.parentView,
background,
image,
updateSpeed = 0;
self.zIndex = STATE.introView.zIndex;
vars.events.addEventListener('introFadeOut', fade)
self.addEventListener(CHILD_ADDED, function(child) {
buildBackground();
loadFile();
});
function buildBackground() {
background = new Sprite();
background.backgroundColor = LAYOUT_MODEL.siteBackgroundColor;
background.width = stage.width;
background.height = stage.height;
self.addChild(background);
}
function readTextFile(file, cb) {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if(xhr.readyState === 4) {
if(xhr.status === 200 || xhr.status == 0) {
cb(xhr.responseText);
} else if(xhr.status === 404) {
self.events.dispatchEvent(INTRO_COMPLETE);
}
}
}
xhr.open("GET", file, true);
xhr.send(null);
}
function loadFile() {
var introFile = /https/.test(SETTINGS_MODEL.introFile || LAYOUT_MODEL.introFile) ? (SETTINGS_MODEL.introFile || LAYOUT_MODEL.introFile) : SETTINGS_MODEL.cdnSslUri + '/' + (SETTINGS_MODEL.introFile || LAYOUT_MODEL.introFile)
if(/jpeg$|jpg$|gif$|png$/.test(SETTINGS_MODEL.introFile || LAYOUT_MODEL.introFile)) {
image = new Bitmap();
image.alpha = 0;
image.addEventListener(LOAD, imageLoaded);
image.addEventListener('error', function(){
console.warn('Intro File not found:', introFile)
self.events.dispatchEvent(INTRO_COMPLETE);
});
image.src = introFile;
self.addChild(image);
} else if(/htm$|html$/.test(SETTINGS_MODEL.introFile || LAYOUT_MODEL.introFile)) {
image = new Sprite();
image.alpha = 0;
image.width = stage.width
image.height = stage.height
image.overflow = 'auto'
readTextFile(introFile, function(contents) {
Tween(image, 1, {alpha:1});
updateSpeed = UPDATE_SPEED;
image.text = contents;
})
self.addChild(image);
}
}
function fade(fadeOutDuration) {
if(fadeOutDuration === false || fadeOutDuration === undefined || fadeOutDuration === null) fadeOutDuration = 1.5
setTimeout(function() {
Tween(image, fadeOutDuration, {alpha:0, onComplete:function() {
self.events.dispatchEvent(INTRO_COMPLETE);
}});
}, (LAYOUT_MODEL.introDuration || duration) * 1000);
}
function getIntroScaleType() {
if(USER_AGENT === MOBILE) {
return LAYOUT_MODEL.introScaleTypeMobile || LAYOUT_MODEL.introScaleType
} else if(USER_AGENT === TABLET) {
return LAYOUT_MODEL.introScaleTypeTablet || LAYOUT_MODEL.introScaleType
}
return LAYOUT_MODEL.introScaleType
}
function imageLoaded(e) {
var retinaSize = RetinaResizeEngine({width:image.width, height:image.height, filename:(SETTINGS_MODEL.introFile || LAYOUT_MODEL.introFile)});
Resize(image, 0, {
type:getIntroScaleType(),
width:retinaSize.width,
height:retinaSize.height,
hRange:stage.width,
vRange:stage.height,
hAlign:'center',
vAlign:'center',
disableOrientationCheck:true,
onComplete:function(){
Tween(image, 1, {alpha:1, onComplete:fade});
updateSpeed = UPDATE_SPEED;
}
});
}
self.updatePosition = function(e) {
background.width = stage.width;
background.height = stage.height;
if(/htm$|html$/.test(SETTINGS_MODEL.introFile || LAYOUT_MODEL.introFile)) {
image.width = stage.width
image.height = stage.height
}
if(image) Tween(image, updateSpeed, {x:(stage.width - image.width) * 0.5 , y:(stage.height - image.height) * 0.5});
};
return self;
}
var lightSkin = {
bgColor:"#EFEFEF",
bgColorLight:"#FCFCFC",
bgColorLighter:"#FFFFFF",
bgColorDark:"#EAEAEA",
bgColorDarker:"