-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(USER_AGENT === MOBILE) {
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(USER_AGENT === MOBILE) {
self.txt.width = stage.width
self.width = stage.width;
} else {
self.width = self.txt.element.offsetWidth;
}
self.height = self.txt.element.offsetHeight;
} 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) || logoHRange
logoVRange = percentToPixels(LAYOUT_MODEL.mobileLogoHeight, stage.height) || logoVRange
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 = STATE.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.setAttribute('class', 'logoImage')
loadImage(src, function(size) {
originalWidth = size.width
originalHeight = size.height
savedSrc = src
self.img.element.src = src;
})
self.img.element.addEventListener('load', logoImgLoaded)
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 = STATE.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 = STATE.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.setAttribute('class', 'logoText')
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 loadImage(src, cb) {
var img = document.createElement('img')
img.addEventListener('load', function(e) {
var width = img.offsetWidth
var height = img.offsetHeight
document.body.removeChild(img)
cb({ width: width, height: height })
})
img.style.opacity = 0
document.body.appendChild(img)
img.src = src
}
function logoImgLoaded() {
logoLoaded = true
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) { // eslint-disable-line
var view = imports.parentView
var sysEvents = imports.siteControllerEvents
var MediaModule = imports.MediaModule
var mediaModules
var currentMediaModule
var lastAddressChange
var currentBuild
var overlayBuild
var _scrollInteraction
var savedSectionDisplayMode
var prevAddressChange = {}
if(/unifiedSiteScroll/.test(STATE.overrides.siteDisplayBehavior)) {
window.addEventListener("scroll", scrollEvents)
}
function scrollStart() {
// sysEvents.dispatchEvent('mediaScrollStart')
}
function scrollStop() {
if(_scrollInteraction) {
getCurrentSectionPosition()
}
if(_scrollInteraction !== false) _scrollInteraction = undefined
}
function scroll() {
if(_scrollInteraction === undefined) _scrollInteraction = true
if(_scrollInteraction) {
getCurrentSectionPosition()
}
}
var scrollTimer
function scrollEvents(e) {
if(!scrollTimer) scrollStart(e)
clearTimeout(scrollTimer)
scroll(e)
scrollTimer = setTimeout(function() {
scrollStop(e)
scrollTimer = null
}, 300)
}
function getCurrentSectionPosition() {
if(mediaModules && layoutCalcs.sectionDisplayMode === 'multiple') {
Object.keys(mediaModules)
.map(function(key) {
return mediaModules[key]
})
.forEach(function(module) {
var moduleY = module.view.y
if(window.scrollY + (window.innerHeight * 0.5) >= moduleY && window.scrollY + (window.innerHeight * 0.5) <= moduleY + module.view.height) {
module.controller.checkCaption()
STATE.section(module.controller.section)
sysEvents.dispatchEvent('cursorAxisUpdate', getCursorAxis(STATE.overrides.transitionType))
sysEvents.dispatchEvent('updateSectionPassive', {
section: module.controller.section,
assetId: module.controller.getCurrentAssetId(),
mode: module.controller.getCurrentMode()
})
}
})
}
}
function isThumbsFirst(section) {
STATE.section(section)
return (!isSlideshowGallery(section) && STATE.overrides.thumbnailDefaultOn && /fill|paginated|vMasonry|hMasonry/i.test(STATE.overrides.thumbnailType) && LAYOUT_MODEL.overlayAlpha === 1) || isIndexSection(section)
}
function getMode(section) {
if(isThumbsFirst(section)) {
return 'thumbs'
} else if(checkThumbsDefaultOn(section) && checkCaptionDefault(section)) {
return 'thumbs-caption'
} else {
if(checkThumbsDefaultOn(section)) return 'thumbs'
if(checkCaptionDefault(section)) return 'caption'
}
return ''
}
function checkThumbsDefaultOn(section) {
STATE.section(section)
return !isSlideshowGallery(section) &&
STATE.overrides.thumbnailType !== 'none' &&
(STATE.overrides.thumbnailDefaultOn || isIndexSection(section)) &&
section && section.media && section.media.length > 1
}
function checkCaptionDefault(section) {
STATE.section(section)
var asset = getMediaById(section.mediaItems[0])
if(!asset) asset = {overrides:{}}
return USER_AGENT !== MOBILE && firstValid(asset.overrides.captionDefault, STATE.overrides.captionDefault)
}
function buildScrollDownIcon(vars) {
var container = new Sprite()
var icon = new Svg()
var iconG = new Svg({type: 'g'})
var iconPath = new Path()
var iconSize = 100 * vars.scale
container.zIndex = 5
container.width = iconSize
container.height = iconSize
container.element.style['mix-blend-mode'] = vars.blendMode
container.alpha = 0
container.addEventListener('click', function() {
var module = mediaModules[1]
if(module) {
var scrollY = module.view.y - STATE.mediaView.y(module.controller.section.key)
Anim.to(window, 0.35, {scrollY:scrollY, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic'})
}
})
var debounceTimer
// 1000ms seems to be the sweet spot for dissallowing the icon alpha until the last layout
container.updatePosition = function(height) {
clearTimeout(debounceTimer)
debounceTimer = setTimeout(function(height) {
container.y = height - iconSize - vars.offsetY
container.x = (stage.width - iconSize) * 0.5
Tween(container, UPDATE_SPEED, {alpha:1})
}, 1000, height)
}
icon.position = 'absolute'
icon.width = iconSize
icon.height = iconSize
container.element.style.transformOrigin = 'center'
iconG.scale = vars.scale
iconPath.d = vars.path
iconPath.fill = 'none'
iconPath.stroke = vars.color
iconPath.strokeWidth = vars.strokeWidth
icon.addChild(iconG)
iconG.addChild(iconPath)
container.addChild(icon)
return container
}
function isRenderableSection(section) {
return !section.hideFromUnifiedSite &&
section.label !== '%SPACER%' &&
section.visible &&
(isIndexSection(section) ? true : section.mediaItems.length) &&
(section.password.length ? STATE.getPassedSection(section.id) : true) &&
!/overlay|none|unifiedPageScrolling/.test(section.displayBehavior) &&
(!firstItemIsLink(section) || section.isIndex)
}
function firstItemIsLink(section) {
var mediaItem = getMediaById(section.media[0])
return mediaItem ? mediaItem.type === 'link' && !section.mediaItems.length : false
}
function buildUnifiedSiteScrollVertical(parentSection) {
var scrollDownIcon
var uriChangeHappening
function build() {
layoutCalcs.sectionDisplayMode = 'multiple'
var sections = parentSection.media
.map(getSectionById)
.filter(isRenderableSection)
if(parentSection.label === 'ROOT_SECTION' && STATE.backgroundImages.length) {
var bgImgs = STATE.backgroundImages.filter(function(id) {
return !!MEDIA_MODEL[id]
})
var landingSection = {
id:LANDING_MEDIA,
key:'/',
label:LANDING_MEDIA,
visible:1,
password:'',
media:bgImgs,
mediaItems:bgImgs,
overrides:{captionDefault: LAYOUT_MODEL.slideshowCaptions}
}
sections = [landingSection].concat(sections)
}
var firstSection = sections[0]
var secondSection = sections[1]
if((parentSection.label === 'ROOT_SECTION' && LAYOUT_MODEL.slideshowScrollDownIcon && isSlideshowGallery(firstSection)) ||
parentSection.scrollDownIcon || (firstSection && firstSection.scrollDownIcon)) {
// build a scrolldown icon
scrollDownIcon = buildScrollDownIcon({
path: svgPaths.arrow3Down,
color: LAYOUT_MODEL.scrollDownIconColor || '#F2F2F2',
strokeWidth: LAYOUT_MODEL.scrollDownIconStrokeWidth || 1,
scale: LAYOUT_MODEL.scrollDownIconScale || 1,
offsetY: LAYOUT_MODEL.scrollDownIconOffsetY || 0,
blendMode: LAYOUT_MODEL.scrollDownIconBlendMode || 'normal'
})
view.addChild(scrollDownIcon)
}
mediaModules = sections
.reduce(function(acc, section, i) {
STATE.section(section)
var state = {
section: section,
mediaToRender: removeLinksFromMedia(section.mediaItems),
path: section.key,
assetId: isThumbsFirst(section) ? -1 : 0,
asset: getMediaById(section.mediaItems[0]),
mode: getMode(section),
info: {
isSectionChange: true,
isAssetChange: true,
isModeChange: false,
isLandingMedia: isSlideshowGallery(section),
mediaViewState: isSlideshowGallery(section) ? 'landingMedia' : 'mediaView',
isDeepLink: false,
isMediaViewStateChange: true,
isIntroGallery: section.isIntroGallery,
flickSpeed: 0.35,
lastUri: '/',
isThumbsFirst: isThumbsFirst(section),
isMobileVideoClick: false,
isBlog: isBlogFeed(section.id)
}
}
layoutCalcs.updateSectionState(section.key, {assetId:state.assetId, mode:state.mode})
var mediaModule = new MediaModule(sysEvents, view, null, {position:i, length:sections.length})
layoutCalcs._uriState = state
mediaModule.controller.build(state)
return acc.concat(mediaModule)
}, [])
window.addEventListener('scroll', lazyLoadModules)
}
// needs to be built before the layout urichange modelchange
build()
// layout each media view
var layoutTimer
function layout(built) {
/*
layout needs to wait for the UPDATE_CONTENT_HEIGHT to be called
lots of figuring to do...
*/
// may have to debounce this
clearTimeout(layoutTimer)
layoutTimer = setTimeout(function() {
var totalHeight = 0
var marginOverlap = LAYOUT_MODEL.marginOverlap || 0
var firstSection = mediaModules[0].controller.section
var sitePaddingTop = percentToPixels(LAYOUT_MODEL.sitePaddingTop, stage.height)
var menuNetHeight = sitePaddingTop
if(isFillSiteSlideshow(firstSection)) {
menuNetHeight = 0
} else if(/top/.test(STATE.menuView.placement()) && !LAYOUT_MODEL.isMenuScrollReveal) {
var menuSize = percentToPixels(LAYOUT_MODEL.menuWidth, stage.height) - percentToPixels(LAYOUT_MODEL.menuOffsetX, stage.height)
menuNetHeight = sitePaddingTop + menuSize - marginOverlap
}
var y = menuNetHeight || 0
var totalMediaItems = 0
mediaModules
.forEach(function(module, i, self) {
STATE.section(module.controller.section)
var prevModule = self[i - 1]
var nextY = prevModule ? prevModule.view.y + (prevModule.view.height || 0) : y
var moduleHeight = module.controller.getTotalHeight()
totalMediaItems += module.controller.section.media.length
var section = module.controller.section
totalHeight += (moduleHeight || 0)
module.view.transition = 0
module.view.x = 0
module.view.y = nextY
module.view.width = stage.width
module.view.height = moduleHeight
module.view.mask.x = STATE.mediaView.x()
module.view.container.y = 0
module.view.mask.transition = 0
module.view.mask.width = STATE.mediaView.width()
// kent added this to get the bounds height from the transition/layout #1313
module.view.mask.height = moduleHeight
})
// view.totalHeight = mediaModules
// .map(function(module) {
// return module.controller.getTotalHeight()
// })
// .reduce(function(x, y) { return x + y }, 0)
view.totalHeight = totalHeight
view.height = totalHeight
layoutCalcs.mediaModules = mediaModules
layoutCalcs.mediaViewsHeight = view.totalHeight
if(scrollDownIcon) {
scrollDownIcon.updatePosition(mediaModules[0].view.height)
}
scrollTo(lastAddressChange, built)
}, 500)
}
function transition() {
// see if we can use existing media view transition types
}
function modelChange() {
destroy()
build()
}
function parentSectionChangeScrollTo(module) {
STATE.section(module.controller.section)
var scrollY = module.view.y - STATE.mediaView.y(module.controller.section.key)
if(module === mediaModules[0]) {
scrollY = 0
} else {
var siteviewdomEl = document.getElementsByClassName('SiteView')[0]
}
window.scrollTo(0, scrollY)
}
function sectionChangeScrollTo(module) {
STATE.section(module.controller.section)
var scrollY = module.view.y - STATE.mediaView.y(module.controller.section.key)
if(module === mediaModules[0]) scrollY = 0
Anim.to(window, 0.35, {scrollY:scrollY, ease:TOUCH_DEVICE ? 'outQuart' : 'inOutCubic'})
}
function scrollTo(e, built) {
if(uriChangeHappening) {
var module = mediaModules.filter(function(m) {
return e.path === m.controller.section.key
})[0]
if(!module) {
module = mediaModules[0]
}
if(e.info.isParentSectionChange || built) {
parentSectionChangeScrollTo(module)
} else if(e.info.isSectionChange) {
sectionChangeScrollTo(module)
} else if(e.info.isModeChange) {
sectionChangeScrollTo(module)
}
uriChangeHappening = false
}
}
// listen for uri change
function uriChange(e, built) {
uriChangeHappening = true
var module = mediaModules.filter(function(m) {
return e.path === m.controller.section.key
})[0]
if(!module) {
module = mediaModules[0]
}
// find the section's media controller
// scroll the mediaView into view
// then call .navigate(e) on the media controller
if(!built || e.info.isParentSectionChange) module.controller.navigate(e)
sysEvents.dispatchEvent('cursorAxisUpdate', module.controller.cursorAxis)
}
function destroy() {
mediaModules.forEach(function(module) {
module.controller.destroy()
})
window.removeEventListener('scroll', lazyLoadModules)
if(scrollDownIcon) view.removeChild(scrollDownIcon)
}
var lazyLoadScrollTimer
function lazyLoadModules() {
clearTimeout(lazyLoadScrollTimer)
lazyLoadScrollTimer = setTimeout(function() {
mediaModules.forEach(function(module) {
if(module.view.lazyLoader) {
module.view.lazyLoader.update()
}
if(module.controller.overlayController) {
module.controller.overlayController.lazyLoaderUpdate()
}
})
}, 10)
}
return {
type: 'unified',
layout: layout,
uriChange: uriChange,
modelChange: modelChange,
scrollTo: scrollTo,
transition: transition,
destroy: destroy
}
}
function buildLegacySite() {
// legacy & unifiedPageScroll
layoutCalcs.sectionDisplayMode = 'single'
var mediaModule = new MediaModule(sysEvents, view)
currentMediaModule = mediaModule
var mediaController = mediaModule.controller
var mediaView = mediaModule.view
// there is only one module to layout here
var layoutTimer
function layout(cb) {
// trigger a resize
// if(!(layoutCalcs._thumbsVisible && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)))
// var totalHeight = STATE.overrides.siteDisplayBehavior === 'none' ?
// STATE.mediaView.height(mediaView.section.key) :
// STATE.siteView.height() // mediaController.getTotalHeight()
clearTimeout(layoutTimer)
layoutTimer = setTimeout(function() {
var totalHeight = mediaController.getTotalHeight()
STATE.section(mediaView.section)
Tween(mediaView, 0, {
x:STATE.mediaView.x(),
y:STATE.mediaView.y(mediaView.section.key),
width:STATE.mediaView.width(),
height: totalHeight
})
// page would not scroll when vScroll in legacy #1339
var maskHeight = STATE.overrides.siteDisplayBehavior === 'none' && /vScroll/.test(STATE.overrides.transitionType) ?
STATE.mediaView.zoneHeight() :
mediaView.container.boundsHeight
Tween(mediaView.mask, 0, {
width:STATE.mediaView.width(),
// kent added this to get the bounds height from the transition/layout #1313
height: maskHeight
// height: totalHeight
})
layoutCalcs._mediaContentHeight = totalHeight
if(mediaView.lazyLoader) mediaView.lazyLoader.update()
// navigating on a vscroll from a deep link needs to navigate after the layout
if(typeof cb === 'function') setTimeout(cb, 500)
}, 500)
}
function transition() {
// no transition - only a single media view here
}
function uriChange(e, built, mediaBehaviorInitInsteadOfTransition) {
if(!built) mediaController.navigate(e, mediaBehaviorInitInsteadOfTransition)
}
function modelChange() {
Tween(mediaView.container, UPDATE_SPEED, {backgroundColor:STATE.mediaView.backgroundColor()})
layout()
mediaController.destroyStaticNav()
mediaController.createStaticNav()
}
return {
type: 'legacy',
module: mediaModule,
layout: layout,
uriChange: uriChange,
modelChange: modelChange,
transition: transition,
destroy: function() {
mediaModule.controller.destroy()
}
}
}
function buildMediaOverlay() {
// legacy & unifiedPageScroll
layoutCalcs.lastSectionDisplayMode = layoutCalcs.sectionDisplayMode
layoutCalcs.sectionDisplayMode =
/unifiedSiteScroll/.test(STATE.overrides.siteDisplayBehavior) ? 'multiple' : 'single'
var isOverlay = true
var mediaModule = new MediaModule(sysEvents, view, isOverlay)
currentMediaModule = mediaModule
var mediaController = mediaModule.controller
var mediaView = mediaModule.view
// there is only one module to layout here
function layout() {
// trigger a resize
// if(!(layoutCalcs._thumbsVisible && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)))
var totalHeight = mediaController.getTotalHeight()
STATE.section(mediaView.section)
mediaView.x = 0
mediaView.y = 0
mediaView.width = stage.width
mediaView.height = stage.height
mediaView.mask.width = STATE.mediaView.width()
// kent added this to get the bounds height from the transition/layout #1313
// mediaView.mask.height = mediaView.container.height
// I think we decided that the media overlay would only be the stage height?
// the fix for #1313 caused #1337 - setting it back didn't seem to affect the
// the thumb strip issue for trevorpaulus.com
mediaView.mask.height = STATE.mediaView.contentHeight()
layoutCalcs._mediaContentHeight = totalHeight
if(mediaView.lazyLoader) mediaView.lazyLoader.update()
}
function transition() {
// no transition - only a single media view here
}
function uriChange(e) {
mediaController.navigate(e)
}
function modelChange() {
STATE.section(mediaView.section)
Tween(mediaView.container, UPDATE_SPEED, {backgroundColor:STATE.mediaView.backgroundColor()})
layout()
mediaController.destroyStaticNav()
mediaController.createStaticNav()
}
return {
type: 'overlay',
module: mediaModule,
layout: layout,
uriChange: uriChange,
modelChange: modelChange,
transition: transition,
destroy: function() {
mediaModule.controller.destroy()
}
}
}
var updateContentHeightDebounce = createDebounce(500)
function deregisterHandlers(handlers) {
sysEvents.removeEventListener('UPDATE_CONTENT_HEIGHT', function() {
updateContentHeightDebounce(handlers.layout)
})
sysEvents.removeEventListener(LAYOUT_MODEL_CHANGE, handlers.modelChange)
sysEvents.removeEventListener(SECTIONS_MODEL_CHANGE, handlers.modelChange)
sysEvents.removeEventListener(SETTINGS_MODEL_CHANGE, function(e) {
if(/backgroundimages|template|staging/.test(e.id)) handlers.modelChange()
})
sysEvents.removeEventListener('mediaOverlayClose', function() {
if(!currentBuild) {
sysEvents.dispatchEvent(ADDRESS_SECTION_CHANGE, {
type:'internal',
path:'',
target:'_self'
})
}
})
}
function registerHandlers(handlers) {
sysEvents.addEventListener('UPDATE_CONTENT_HEIGHT', function() {
updateContentHeightDebounce(handlers.layout)
})
sysEvents.addEventListener(LAYOUT_MODEL_CHANGE, handlers.modelChange)
sysEvents.addEventListener(SECTIONS_MODEL_CHANGE, handlers.modelChange)
sysEvents.addEventListener(SETTINGS_MODEL_CHANGE, function(e) {
if(/backgroundimages|template|staging/.test(e.id)) handlers.modelChange()
})
sysEvents.addEventListener('mediaOverlayClose', function() {
if(prevAddressChange) STATE.section(prevAddressChange.section)
if(!currentBuild) {
sysEvents.dispatchEvent(ADDRESS_SECTION_CHANGE, {
type:'internal',
path:'',
target:'_self'
})
} else {
sysEvents.dispatchEvent('updateSectionPassive', {
section: prevAddressChange.section,
assetId: prevAddressChange.assetId,
mode: prevAddressChange.mode
})
}
})
}
function siteUriChange(e) {
lastAddressChange = e
var built = false
STATE.section(e.section)
switch(STATE.overrides.siteDisplayBehavior) {
case 'unifiedSiteScrollVertical':
// check if need to destroy old site
// if destroy? then unregister handlers
// var sectionHasSubs = !!e.section.media.filter(function(id) { id < 10000 }).length
if(overlayBuild) {
overlayBuild.module.view.close(function() {
if(overlayBuild) overlayBuild.destroy()
overlayBuild = null
})
}
if(!currentBuild) {
currentBuild = buildUnifiedSiteScrollVertical(e.parentSection)
registerHandlers(currentBuild)
built = true
currentBuild.uriChange(e, built)
currentBuild.layout(built)
} else if(e.info.isParentSectionChange || (currentBuild && currentBuild.type === 'legacy') || e.info.isPasswordSection || e.info.isSearchSubmit) {
if(currentBuild) {
deregisterHandlers(currentBuild)
currentBuild.destroy()
}
currentBuild = buildUnifiedSiteScrollVertical(e.parentSection)
registerHandlers(currentBuild)
built = true
currentBuild.uriChange(e, built)
currentBuild.layout(built)
} else if(e.info.isModeChange) {
currentBuild.uriChange(e, built)
currentBuild.layout(built)
} else {
currentBuild.uriChange(e, built)
currentBuild.scrollTo(e, built)
}
break
case 'overlay':
// check if need to destroy old site
// if destroy? then unregister handlers
if(e.info.isSectionChange) {
if(overlayBuild) {
deregisterHandlers(overlayBuild)
overlayBuild.destroy()
overlayBuild = null
}
}
if(!overlayBuild) {
prevAddressChange = e.prevState
overlayBuild = buildMediaOverlay()
registerHandlers(overlayBuild)
built = true
overlayBuild.module.controller.build(e)
}
overlayBuild.uriChange(e, built)
overlayBuild.layout()
overlayBuild.module.view.open()
savedSectionDisplayMode = layoutCalcs.sectionDisplayMode
break
default:
// check if need to destroy old site
// if destroy? then unregister handlers
if(overlayBuild) {
overlayBuild.module.view.close(function() {
if(overlayBuild) overlayBuild.destroy()
overlayBuild = null
})
}
if(e.info.isSectionChange || (currentBuild && currentBuild.type === 'unified')) {
if(currentBuild) {
deregisterHandlers(currentBuild)
currentBuild.destroy()
}
currentBuild = buildLegacySite()
registerHandlers(currentBuild)
currentBuild.module.controller.build(e)
built = true
var mediaBehaviorInitInsteadOfTransition = true
// currentBuild.uriChange(e, built, mediaBehaviorInitInsteadOfTransition)
currentBuild.layout(function() {
// delay navigate until end of layout
var dontNavigate = e.assetId < 1
currentBuild.uriChange(e, dontNavigate, mediaBehaviorInitInsteadOfTransition)
})
} else if(e.info.isModeChange) {
currentBuild.uriChange(e, built)
currentBuild.layout()
} else {
if(currentBuild) currentBuild.uriChange(e, built)
}
break
}
}
function isCurrentSection(section, state) {
return section.key === state.section.key
}
function spacebarPlay(e) {
if(/unifiedSiteScroll/.test(STATE.overrides.siteDisplayBehavior)) {
if(mediaModules) {
Object.keys(mediaModules)
.map(function(key) {
return mediaModules[key]
})
.forEach(function(module) {
var mediaId
// module.controller.updateState(e)
if(isCurrentSection(module.controller.section, e)) {
STATE.section(module.controller.section)
if(!(/fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(e.mode))) {
var child = module.view.container.children[e.assetId]
mediaId = child ? child.id : undefined
}
}
module.events.dispatchEvent('spacebarTogglePlay', mediaId)
})
}
} else if(currentMediaModule){
STATE.section(currentMediaModule.controller.section)
if(!(/fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(e.mode))) {
var child = currentMediaModule.view.container.children[e.assetId]
var mediaId = child ? child.id : undefined
}
currentMediaModule.events.dispatchEvent('spacebarTogglePlay', mediaId)
}
}
function autoplayTarget(e) {
if(/unifiedSiteScroll/.test(STATE.overrides.siteDisplayBehavior)) {
if(mediaModules) {
Object.keys(mediaModules)
.map(function(key) {
return mediaModules[key]
})
.forEach(function(module) {
var mediaId
// module.controller.updateState(e)
if(isCurrentSection(module.controller.section, e)) {
STATE.section(module.controller.section)
if(!(/fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(e.mode))) {
if(STATE.mediaView.videoAutoPlay()) {
var child = module.view.container.children[e.assetId]
mediaId = child ? child.id : undefined
}
}
}
module.events.dispatchEvent('mediaAutoPlay', mediaId)
})
}
} else if(currentMediaModule){
STATE.section(currentMediaModule.controller.section)
if(!(/fill|vMasonry|hMasonry/.test(STATE.overrides.thumbnailType) && /thumbs/.test(e.mode))) {
if(STATE.mediaView.videoAutoPlay()) {
var child = currentMediaModule.view.container.children[e.assetId]
var mediaId = child ? child.id : undefined
}
}
currentMediaModule.events.dispatchEvent('mediaAutoPlay', mediaId)
}
}
sysEvents.addEventListener('autoplayTarget', autoplayTarget)
sysEvents.addEventListener('spacebarPlay', spacebarPlay)
sysEvents.addEventListener(SITE_URI_CHANGE, siteUriChange)
sysEvents.addEventListener(LAYOUT_MODEL_CHANGE, function(e) {
if(/siteDisplayBehavior|transitionType/.test(e.id)) {
if(currentBuild) {
deregisterHandlers(currentBuild)
currentBuild.destroy()
STATE.section(lastAddressChange.section)
if(STATE.overrides.siteDisplayBehavior === 'unifiedSiteScrollVertical') {
currentBuild = buildUnifiedSiteScrollVertical(lastAddressChange.parentSection)
} else {
currentBuild = buildLegacySite()
currentBuild.module.controller.build(lastAddressChange)
}
registerHandlers(currentBuild)
built = true
currentBuild.layout()
}
}
})
sysEvents.addEventListener(SECTIONS_MODEL_CHANGE, function() {
if(currentBuild) {
deregisterHandlers(currentBuild)
currentBuild.destroy()
STATE.section(lastAddressChange.section)
if(STATE.overrides.siteDisplayBehavior === 'unifiedSiteScrollVertical') {
currentBuild = buildUnifiedSiteScrollVertical(lastAddressChange.parentSection)
} else {
currentBuild = buildLegacySite()
currentBuild.module.controller.build(lastAddressChange)
}
registerHandlers(currentBuild)
built = true
currentBuild.layout()
}
})
}
var MediaController = (function() { // eslint-disable-line
function MediaController(localEvents, sysEvents) { // eslint-disable-line
var self = this
var _localEvents = localEvents
var _sysEvents = sysEvents
var navigationMode
var contactSettings = /contactTitleFont|contactTitleFontSize|contactTitleShow|contactFont|contactFontSize|contactFontColor|contactFieldRectColor/
var imageVideoSettings = /containerColor|transitionType|imageAlignHorizontal|imageAlignVertical|imageScaleType|videoScaleType|imageVideoInactiveAlpha|imageVideoMarginTop|imageVideoMarginRight|imageVideoMarginBottom|imageVideoMarginLeft|imageVideoScrollType|imageVideoScrollbarRounded|imageVideoScrollVisibility|imageVideoScrollbarHorizontalOffset|imageVideoScrollbarVerticalOffset/
var textPageSettings = /pageMarginTop|pageMarginRight|pageMarginBottom|pageMarginLeft|pageScrollVerticalMargin|pageTextFont|pageTextKerning|pageTextFontSize|pageTextFontColor|pageTitle|pageTitleFont|pageTitleKerning|pageTitleFontSize|pageTitleFontColor|pageScrollbarAlignment|pageScrollbarHorizontalOffset|pageScrollbarVerticalOffset|pageScrollbarColor|pageScrollbarHover|pageScrollbarBgAlpha|pageScrollbarWidth/
var landingMediaSettings = /landingMediaRandomize|landingMediaTransitionType|landingMediaSpeed|landingMediaTransitionDuration|landingMediaAlignHorizontal|landingMediaAlignVertical|landingMediaScaleType/
var isInit = true
_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)
})
_sysEvents.addEventListener('SITE_URI_CHANGE_PASSIVE', updateCaptions)
_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('siteAnchorCaptionUpdate', function(mediaItem) {
_sysEvents.dispatchEvent('siteAnchorCaptionUpdate', mediaItem)
})
_localEvents.addEventListener('mediaOverlayClose', function() {
_sysEvents.dispatchEvent('mediaOverlayClose')
})
_localEvents.addEventListener('adminPageviewImageSizes', function(pageImageSizes) {
_sysEvents.dispatchEvent('adminPageviewImageSizes', pageImageSizes)
})
_localEvents.addEventListener('lightboxDownloadOverlayOpen', function() {
_sysEvents.dispatchEvent('lightboxDownloadOverlayOpen')
})
_localEvents.addEventListener('lightboxUpdateItem', function(e) {
_sysEvents.dispatchEvent('lightboxUpdateItem', e)
})
_sysEvents.addEventListener(RESIZE_END, function(e) {
STATE.section(self.section)
if(STATE.overrides.thumbnailOnly || isThumbsFirst(self.section)) {
self.overlayController.resize()
}
})
_localEvents.addEventListener('UPDATE_CONTENT_HEIGHT', function(info) {
// save the thumbs height and the gallery height here
// so you can select which one to use for total height
STATE.section(self.section)
if(info.thumbs && self.thumbsTotalHeight !== info.thumbs) {
if(/strip/.test(STATE.overrides.thumbnailType) && /thumbs/.test(self.state.mode)) {
if(/top|bottom/.test(STATE.overrides.thumbnailSide)) {
self.thumbsTotalHeight = Math.round(info.thumbs + self.totalHeight)
} else {
// /left|right/ thumbnailSide
self.thumbsTotalHeight = Math.round(self.totalHeight)
}
} else {
self.thumbsTotalHeight = Math.round(info.thumbs)
}
// for v15 siteView height in layoutCalcs
// overlay view is using legacy stage height for its height
if(!/^overlay/.test(STATE.overrides.siteDisplayBehavior)) {
layoutCalcs._thumbContentHeight = Math.round(info.thumbs)
}
// layoutCalcs.updateSectionState(self.section.key, {thumbsHeight:info.thumbs})
} else if(info.gallery) {
self.totalHeight = Math.round(info.gallery)
self.overlayController.resize()
// layoutCalcs.updateSectionState(self.section.key, {adjustedMediaHeight:info.gallery})
}
// need to make sure zoneHeight is defined before we persist it in the section state
// paginated thumbs was getting the undefined zoneHeight and causing an error
var zoneHeight
if(/thumbs/.test(self.state.mode)) {
if(/strip/.test(STATE.overrides.thumbnailType)) {
zoneHeight = self.totalHeight > 0 && self.totalHeight > self.thumbsTotalHeight ? self.totalHeight : self.thumbsTotalHeight
} else {
zoneHeight = self.thumbsTotalHeight
}
}
var marginOverlap = /top|bottom/.test(STATE.menuView.placement()) && !LAYOUT_MODEL.isMenuScrollReveal ? (LAYOUT_MODEL.marginOverlap || 0) : 0
// mediaView.height is adding marginOverlap to the gallery height causing a iterative increase
if(marginOverlap) zoneHeight -= marginOverlap
var sectionUpdate = {
height:self.totalHeight
}
if(self.mediaView.container.children[0]) {
sectionUpdate.isFullTextHeight = allowPageContentHeight(self.mediaView.container.children[0], self.mediaView.container.children.length)
}
if(zoneHeight) sectionUpdate.zoneHeight = zoneHeight
layoutCalcs.updateSectionState(self.section.key, sectionUpdate)
if(self.staticNav) {
self.staticNav.resize({
x: 0,
y: 0,
width: STATE.mediaView.zoneWidth(),
height: self.getTotalHeight()
})
}
_sysEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT')
})
self.getTotalHeight = function() {
STATE.section(self.section)
if(STATE.overrides.siteDisplayBehavior === 'none') {
// don't need section.key because this is legacy
return STATE.mediaView.zoneHeight()
} else if(isIndexSection(self.section)) {
return self.thumbsTotalHeight ? self.thumbsTotalHeight : STATE.mediaView.zoneHeight(self.section.key)
} else if(!/none/.test(STATE.overrides.thumbnailType) && /thumbs/.test(self.state.mode)) {
return self.thumbsTotalHeight //STATE.mediaView.zoneHeight(self.section.key)
} else if(/unifiedSiteScrollVertical/.test(STATE.overrides.siteDisplayBehavior)) {
var sectionBoundsHeight = self.mediaView.container.boundsHeight
var totalHeight = layoutCalcs.getMaxScrollSectionHeight(self.mediaView)
if(/vScroll/.test(STATE.overrides.transitionType)) {
return sectionBoundsHeight
} else {
return sectionBoundsHeight && (sectionBoundsHeight < totalHeight) ? sectionBoundsHeight : totalHeight
}
} else {
return STATE.mediaView.height(self.section.key)
}
}
self.localEvents = _localEvents
self.sysEvents = _sysEvents
self.buildStaticNav = function() {
STATE.section(self.section)
return new StaticNav({
zIndex: 3,
axis: /^v/.test(STATE.overrides.transitionType) ? 'y' : 'x',
align: LAYOUT_MODEL.staticNavAlignment || 'center',
scale: LAYOUT_MODEL.staticNavIconScale || 1,
zone: {
x: 0,
y: 0,
width: stage.width,
height: self.getTotalHeight()
},
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() {
self.sysEvents.dispatchEvent(NAVBAR_NAV_CLICK, {navDir:'prev'})
},
nextClick: function() {
self.sysEvents.dispatchEvent(NAVBAR_NAV_CLICK, {navDir:'next'})
}
})
}
self.updateStaticNav = function(e) {
STATE.section(self.section)
if(LAYOUT_MODEL.navCursorType === 'static') {
var isGridThumbs = /thumbs/.test(e.mode) && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)
self.staticNav.resize({
x: 0, // STATE.mediaView.x(),
y: 0,
width: STATE.mediaView.zoneWidth(),
height: self.getTotalHeight()
})
e.section.media = e.section.media
.filter(function(m) {
return m !== null // strange situation where null was in media array
})
if(e.info.isLandingMedia || e.section.media.length < 2 || isGridThumbs) {
self.staticNav.hide()
} else if(e.assetId === 0) {
self.staticNav.hide('prev')
self.staticNav.show('next')
} else if(e.assetId === e.section.media.length - 1) {
self.staticNav.hide('next')
self.staticNav.show('prev')
} else {
self.staticNav.show()
}
}
}
function pauseMedia() {
_localEvents.dispatchEvent(PAUSE_MEDIA)
}
function addressAssetChange(e) {
_sysEvents.dispatchEvent(ADDRESS_ASSET_CHANGE, e)
}
function pageLoaded() {
_sysEvents.dispatchEvent(PAGE_LOADED)
}
function layoutModelChange(e) {
_localEvents.dispatchEvent(LAYOUT_MODEL_CHANGE, e)
if(self.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:self.section, media:removeLinksFromMedia(self.section.media)})
_localEvents.dispatchEvent('assetReset')
}
checkCaption(self)
}
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(self.section) {
STATE.section(self.section)
_localEvents.dispatchEvent(SECTIONS_MODEL_CHANGE, e);
if(e.method === 'update' && e.id === self.section.id && !isThumbsOverlay(STATE.overrides.thumbnailType, self.state.mode)) {
if(e.field === 'media') {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section:self.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: self.section, media:removeLinksFromMedia(self.section.media)});
_localEvents.dispatchEvent('assetReset');
} else if(isImageVideoOverride(overrideValue) && /image|video/.test(layoutCalcs._activeMediaType)) {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section: self.section, media:removeLinksFromMedia(self.section.media)});
_localEvents.dispatchEvent('assetReset');
}
} else {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section: self.section, media:removeLinksFromMedia(self.section.media)});
_localEvents.dispatchEvent('assetReset');
if(e.field === 'slideshow') {
var mode = e.value ? 'landingMedia' : 'mediaView'
navigationMode = mode
self.mediaViewBehavior = self.behavior.navigationModeChange(mode)
var state = self.state
state.isLandingMedia = e.value
state.info.mediaViewState = mode
// this breaks due to possible race condition when building the items for the media view
// appears they aren't added yet...
self.mediaViewBehavior.uriChange(state)
}
}
checkCaption(self)
}
}
}
function settingsModelChange(e) {
_localEvents.dispatchEvent(SETTINGS_MODEL_CHANGE, e)
// isIntroGallery here so that you can show landingMedia on update
if(e.method === 'update' && self.section && (self.section.id === 'landingMedia' || self.section.isIntroGallery) && e.id === 'backgroundImages') {
_sysEvents.dispatchEvent('resetUriChange', e)
}
}
function mediaModelChange(e) {
_localEvents.dispatchEvent(MEDIA_MODEL_CHANGE, e)
if(e.method === 'update' && self.section && self.section.media.indexOf(e.id) > -1) {
_localEvents.dispatchEvent('SectionMediaFactory/buildItems', {section:self.section, media:removeLinksFromMedia(self.section.media)})
_localEvents.dispatchEvent('assetReset')
}
checkCaption(self)
}
function mediaBuilt(e) {
_localEvents.dispatchEvent('MediaView/ContentReady', e.media)
}
function layoutMediaView() {
_localEvents.dispatchEvent('layoutMediaView', {section:self.section})
if(isInit) _sysEvents.addEventListener(RESIZE_END, resize)
isInit = false
if(navigationMode === 'landingMedia' || self.mediaToRender.length < 2) {
_localEvents.dispatchEvent('hideCursor')
} else {
_localEvents.dispatchEvent('showCursor')
}
}
function resize() {
_localEvents.dispatchEvent(RESIZE)
STATE.section(self.section)
if(self.staticNav) {
self.staticNav.resize({
x: 0,
y: 0,
width: STATE.mediaView.zoneWidth(),
height: self.getTotalHeight()
})
}
}
function orientationChange() {
_localEvents.dispatchEvent(ORIENTATION_CHANGE)
}
function updateAssetId(e) {
if(self.state && self.state.assetId !== e.id) {
self.state.assetId = e.id
_sysEvents.dispatchEvent('updateAssetId', e)
}
}
function updateCaptions(e) {
// if(self.state.mode !== e.mode) {
self.state.mode = e.mode
_localEvents.dispatchEvent('checkCaption', e)
// }
}
function mediaLoaded(e) {
if(/video|vimeo/.test(e.type)) {
_localEvents.dispatchEvent('mediaSizeUpdate', e)
}
}
function transitionStart() {
_sysEvents.dispatchEvent(TRANSITION_START)
}
function transitionEnd() {
_sysEvents.dispatchEvent(TRANSITION_END)
}
function cursorAxisUpdate(e) {
self.cursorAxis = 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)
}
}
MediaController.prototype = {
checkCaption: function() {
var self = this
checkCaption(self)
},
createStaticNav: function() {
var self = this
if(!isPod() && sectionHasMedia(self.section) && LAYOUT_MODEL.navCursorType === 'static' && !isSlideshowGallery(self.section)) {
self.staticNav = self.buildStaticNav()
self.updateStaticNav(self.state)
self.mediaView.addChild(self.staticNav)
} else if(LAYOUT_MODEL.navCursorType !== 'static' && self.staticNav) {
self.staticNav.hide()
}
},
destroyStaticNav: function() {
var self = this
if(self.staticNav && self.staticNav.element) {
self.mediaView.removeChild(self.staticNav)
}
},
updateState: function(newState) {
var self = this
self.state = newState
if(self.mediaViewBehavior) self.mediaViewBehavior.updateState(newState)
},
build: function(e, mediaBehaviorInitInsteadOfTransition) {
var self = this
// need to duplicate some of the code from navigate in here
// because we were getting sequencing issues
self.mediaView.section = e.section
self.state = e
navigationMode = e.info.mediaViewState
self.section = JSON.parse(JSON.stringify(e.section))
self.mediaToRender = e.mediaToRender
STATE.section(self.section)
if(isSlideshowGallery(self.section) && self.mediaToRender && STATE.overrides.slideshowRandomize) {
self.mediaToRender = shuffleArray(self.mediaToRender)
}
if(e.assetId > -1) {
var activeMediaItem = getMediaById(e.mediaToRender[e.assetId])
layoutCalcs.activeMediaType = activeMediaItem.type
}
self.createStaticNav()
// if(e.info.isMediaViewStateChange) {
self.mediaViewBehavior = self.behavior.navigationModeChange(e.info.mediaViewState)
// }
if(isSlideshowGallery(self.section) || (!STATE.overrides.thumbnailOnly || e.assetId > -1)) {
self.localEvents.dispatchEvent('SectionMediaFactory/buildItems', {
media:self.mediaToRender,
isMobileVideoClick:e.info.isMobileVideoClick,
isBlog:e.info.isBlog,
section:self.section,
state:self.state
})
// } else {
// layoutCalcs._mediaContentHeight = STATE.mediaView.zoneHeight()
// _sysEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT')
}
self.overlayController.uriChange(e)
if(mediaBehaviorInitInsteadOfTransition) {
self.mediaViewBehavior.init(e)
} else if(!/unifiedSiteScroll/.test(STATE.overrides.siteDisplayBehavior) || (USER_AGENT === MOBILE || isPod() || USER_AGENT === TABLET || isPad())) {
// mSlide needs uriChange to define the first viewable media item
self.mediaViewBehavior.uriChange(e)
} else {
self.mediaViewBehavior.init(e)
}
checkCaption(self)
},
getCurrentAssetId: function() {
return this.state ? this.state.assetId : 0
},
getCurrentMode: function() {
return this.state ? this.state.mode : ''
},
navigate: function(e) {
var self = this
self.state = e
self.mediaView.section = e.section
navigationMode = e.info.mediaViewState
self.section = JSON.parse(JSON.stringify(e.section))
self.mediaToRender = e.mediaToRender
STATE.section(self.section)
if(e.assetId > -1 && !(/unifiedSiteScroll/.test(STATE.overrides.siteDisplayBehavior))) {
var activeMediaItem = getMediaById(e.mediaToRender[e.assetId])
layoutCalcs.activeMediaType = activeMediaItem.type
}
// if(e.info.isMediaViewStateChange) {
// this.localEvents.dispatchEvent('MediaViewBehavior/navigationModeChange', e.info.mediaViewState)
// }
if(self.staticNav) self.updateStaticNav(e)
self.overlayController.uriChange(e)
self.mediaViewBehavior.uriChange(e)
self.localEvents.dispatchEvent('siteUriChange', e)
checkCaption(self)
},
destroy: function() {
var self = this
self.localEvents.dispatchEvent('destroy')
self.mediaView.destroy()
self.overlayController.destroy()
self.mediaViewBehavior.destroy()
if(self.staticNav && self.staticNav.element) {
// console.log('remove static nav media controller')
self.mediaView.removeChild(self.staticNav)
}
}
}
function checkCaption(self) {
setTimeout(function() {
if(self.state && self.state.mode.indexOf('caption') > -1 && USER_AGENT !== MOBILE) {
self.localEvents.dispatchEvent('showCaption', self.state)
} else {
self.localEvents.dispatchEvent('hideCaption', self.state)
}
}, 350)
}
return MediaController
}())
var MediaModule = function(imports) {
function MediaModule(siteEvents, siteView, isOverlay, maxScroll) {
var _mediaModuleEvents = new EventSandbox();
var mediaController = new MediaController(_mediaModuleEvents, siteEvents);
var mediaView
if(isOverlay) {
mediaView = new MediaOverlay({localEvents:_mediaModuleEvents, siteView:siteView});
} else {
mediaView = new MediaView({localEvents:_mediaModuleEvents, siteView:siteView});
}
siteView.addChild(mediaView)
if(maxScroll) mediaView.maxScroll = maxScroll
var sectionMediaFactory = new SectionMediaFactory({localEvents:_mediaModuleEvents});
mediaController.behavior = new MediaViewBehavior({localEvents:_mediaModuleEvents, siteView:siteView, mediaView:mediaView});
mediaController.overlayController = new OverlayController({siteEvents:siteEvents, localEvents:_mediaModuleEvents, siteView:siteView, mediaView:mediaView});
mediaController.mediaView = mediaView
return {
controller: mediaController,
view: mediaView,
events: _mediaModuleEvents,
destroy: function() {
mediaViewBehavior.destroy()
_mediaModuleEvents.listeners = null
_mediaModuleEvents = null
}
}
}
return MediaModule;
}({
});
function MediaNavigation(imports) {
var _localEvents = imports.localEvents
var _mediaView = imports.mediaView
var _mediaViewContainer = imports.mediaView.container
var transition
var layoutFn
var layout
var contentIsReady = false
var state = {assetId:0}
var transitionType
var isOrientationChange
var _scrollAssetId = 0
var self = this
_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();
}
if(transitionType === 'mSlide' && !self.touchNav) defineTouchNav()
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 defineTouchNav() {
self.touchNav = new TouchNavMobile({events:_localEvents, mediaViewContainer:_mediaViewContainer});
self.touchNav.section = (state.section && state.section.key) || 'no section'
}
function defineTransition() {
STATE.section(state.section)
if(_mediaView.scroll) {
_mediaView.scroll.destroy();
_mediaView.scroll = null;
}
transitionType = STATE.overrides.transitionType;
// Desktop-Version Mobile/iPad full image nav stuck #1015
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.name = 'mediaView'
if(transition && typeof transition.destroy === 'function') transition.destroy()
_localEvents.dispatchEvent('cursorAxisUpdate', getCursorAxis(transitionType))
var transitionDuration = STATE.mediaView.transitionDuration()
switch(transitionType) {
case 'fade':
layoutFn = new FadeLayout({siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new FadeTransition({transitionDuration: transitionDuration, siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
case 'hSlide':
layoutFn = new SlideLayoutHorizontal({siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new SlideTransitionHorizontal({transitionDuration: transitionDuration, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
case 'vSlide':
layoutFn = new SlideLayoutVertical({siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new SlideTransitionVertical({transitionDuration: transitionDuration, siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
case 'hScroll':
layoutFn = new ScrollLayoutHorizontal({siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
transition = new ScrollTransitionHorizontal({transitionDuration: transitionDuration, siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
break;
case 'hScrollNC':
layoutFn = new ScrollLayoutHorizontalNoCrop({siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
transition = new ScrollTransitionHorizontalNoCrop({transitionDuration: transitionDuration, siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
break;
case 'vScroll':
layoutFn = new ScrollLayoutVertical({siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
transition = new ScrollTransitionVertical({transitionDuration: transitionDuration, siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
break;
case 'vScrollNC':
layoutFn = new ScrollLayoutVerticalNoCrop({siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
transition = new ScrollTransitionVerticalNoCrop({transitionDuration: transitionDuration, siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
break;
case 'grid':
layoutFn = new GridLayout({siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new GridTransition({transitionDuration: transitionDuration, siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
case 'mSlide':
layoutFn = new MobileSlideLayout({siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
transition = new MobileSlideTransition({transitionDuration: transitionDuration, siteView:imports.siteView, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents});
break;
case 'vScrollStatic':
layoutFn = new StaticVLayout({siteView:imports.siteView, mediaView:_mediaView, localEvents:_localEvents});
transition = new StaticVTransition();
break;
}
layout = function() {
STATE.section(state.section)
layoutFn()
}
}
this.init = function(e) {
state = e;
// need to set container to zero so there isn't a flash of the gallery before thumbnail
// overlay shows. #1362
_mediaViewContainer.transition = 0;
_mediaViewContainer.alpha = 0;
// delay here for overlay transition
if(!layout) defineTransition()
if(transitionType === 'mSlide' && !self.touchNav) defineTouchNav()
layout()
// delay of 1000 seemed to do the trick
setTimeout(function() {
Tween(_mediaViewContainer, STATE.mediaView.transitionDuration(), {alpha:1})
}, 1000)
}
this.updateState = function(newState) {
state = newState
}
this.uriChange = function siteUriChange(e, mediaBehaviorInitInsteadOfTransition) {
state = e;
STATE.section(state.section)
var hasContent = _mediaViewContainer.children.length > 0;
if(state.mediaToRender && hasContent) {
if(!mediaBehaviorInitInsteadOfTransition) {
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(STATE.siteView.unifiedPageScroll() && 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(STATE.siteView.unifiedPageScroll()) {
// 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(!transition) defineTransition();
if(transitionType === 'mSlide' && !self.touchNav) defineTouchNav()
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);
}
Tween(_mediaViewContainer, STATE.mediaView.transitionDuration(), {alpha:1})
transition(state.assetId, state.info.flickSpeed, self.touchNav.swipeDirection)
} else if(state.info.isSectionChange) {
_mediaViewContainer.transition = 0;
// if(STATE.overrides.siteDisplayBehavior !== 'unifiedSiteScrollVertical') _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 {
Tween(_mediaViewContainer, STATE.mediaView.transitionDuration(), {alpha:1})
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] && _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 && 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(1, 0);
}
if(layout) layout();
if((state.mediaToRender && state.mediaToRender.length > 0 && state.assetId > -1)) {
if(!transition) defineTransition();
if(transitionType === 'mSlide' && !self.touchNav) defineTouchNav()
// need to figure out a way to prevent resize transition for mobile browsers when browser chrome reduces on scroll
if(!/^unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) 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();
if(transitionType === 'mSlide' && !self.touchNav) defineTouchNav()
layout();
}
function layoutModelChange(e) {
if(e.id === 'siteDisplayBehavior') {
defineTransition()
}
if(transitionType === 'mSlide' && !self.touchNav) defineTouchNav()
if(layout) layout();
}
function isCurrentSection(section, state) {
return section.key === state.section.key
}
var updateAssetIdTimer
function updateAssetId(e) {
var mediaId
clearTimeout(updateAssetIdTimer)
updateAssetIdTimer = setTimeout(function() {
_scrollAssetId = e.id;
if(state && isCurrentSection(_mediaView.section, state)) {
state.assetId = e.id;
}
}, 200)
}
function resetMediaViewContainer() {
_mediaViewContainer.transition = 0;
// setting translate values was causing flickering for video hud #1360 & #1364
// may still be an issue for legacy site on mobile
if(Math.abs(_mediaViewContainer.translateX) > 0) _mediaViewContainer.translateX = 0;
if(Math.abs(_mediaViewContainer.translateY) > 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)
return self
}
function MediaSlideshow(vars) {
var _localEvents = vars.localEvents,
_mediaView = vars.mediaView,
_mediaViewContainer = vars.mediaView.container,
assetLength = 0,
slideShowTimer,
transition,
layout,
_assetId = -1,
landingMediaTransitionType,
randomized = []
var state = {}
_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('assetReset', assetReset)
this.init = function(e) {
this.uriChange(e)
}
this.updateState = function(newState) {
state = newState
}
this.uriChange = function siteUriChange(e) {
state = e
// kent added this !slideShowTimer filter because both .init and uriChange were getting called on site init
// from MediaController
// causing the first slide to not play full timer length and quickly changed to 2nd slide
// may not be the right fix
if(!slideShowTimer) {
assetLength = _mediaViewContainer.children.length
var section = vars.mediaView.section
STATE.section(section)
var mediaItem = getMediaById(section.media[0])
// var mediaViewItem = _mediaViewContainer.children[0]
if(assetLength && (assetLength > 1 || mediaItem.type === 'video')) {
if(slideShowTimer) slideShowTimer.destroy()
initSlideShow()
} else {
singleMediaItem()
}
}
}
function mediaLoaded(e) {
transition(_assetId)
slideShowTimer.resume()
}
function getMediaByAssetId(assetId) {
var mediaViewItem = _mediaViewContainer.children[_assetId]
return mediaViewItem && getMediaById(mediaViewItem.id)
}
function singleMediaItem() {
_assetId = 0
transition(_assetId)
_localEvents.dispatchEvent('siteAnchorCaptionUpdate', getMediaByAssetId(_assetId))
_localEvents.dispatchEvent('showCaption', state)
}
function slideShow() {
_assetId = setAssetId()
state.assetId = _assetId
var mediaViewItem = _mediaViewContainer.children[_assetId]
if(isLogin) {
transition(_assetId)
slideShowTimer.pause()
} else if(mediaViewItem.type === 'video') {
slideShowTimer.pause()
setTimeout(function(){
transition(_assetId)
mediaViewItem.autoPlay()
}, 100)
_localEvents.addEventListener('playbackEnd', playbackEnd)
} else if(/html/.test(mediaViewItem.type)) {
transition(_assetId)
} else if(/image/.test(mediaViewItem.type) && mediaViewItem.loaded) {
transition(_assetId)
} else if(/image/.test(mediaViewItem.type) && !mediaViewItem.loaded) {
slideShowTimer.pause()
mediaViewItem.addEventListener(MEDIA_LOADED, mediaLoaded)
}
_localEvents.dispatchEvent('siteAnchorCaptionUpdate', getMediaByAssetId(_assetId))
if(LAYOUT_MODEL.slideshowCaptions) {
_localEvents.dispatchEvent('showCaption', state)
} else {
_localEvents.dispatchEvent('hideCaption', state)
}
_mediaView.lazyLoader.update()
}
function playbackEnd(e) {
slideShowTimer.resume()
slideShow()
}
function setAssetId() {
return _assetId < assetLength - 1 ? _assetId + 1 : 0
}
function assetReset() {
if(transition) transition(_assetId)
}
function initSlideShow() {
STATE.section(vars.mediaView.section)
slideShowTimer = new Timer(slideShow, STATE.overrides.slideshowSpeed, {loop:true})
slideShowTimer.start()
slideShow()
}
function defineTransition() {
STATE.section(vars.mediaView.section)
transitionType = STATE.overrides.slideshowTransitionType
var lazyLoaderType = transitionType === 'fade' ? 'fade' : 'default'
_mediaView.lazyLoader = new LazyLoader(_mediaView.container, _mediaView.mask, {
type:lazyLoaderType,
property:'translate'
})
// true is 'isSlideShow'
var transitionDuration = STATE.mediaView.transitionDuration(true)
switch(STATE.overrides.slideshowTransitionType) {
case 'fade':
layout = new FadeLayout({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents})
transition = new FadeTransition({transitionDuration: transitionDuration, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents})
break
case 'hSlide':
layout = new SlideLayoutHorizontal({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents})
transition = new SlideTransitionHorizontal({transitionDuration: transitionDuration, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents})
break
case 'vSlide':
layout = new SlideLayoutVertical({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents})
transition = new SlideTransitionVertical({transitionDuration: transitionDuration, mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents})
break
case 'grid':
layout = new GridLayout({mediaView:_mediaView, mediaViewContainer:_mediaViewContainer, localEvents:_localEvents})
transition = new GridTransition({transitionDuration: transitionDuration, 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) {
STATE.section(vars.mediaView.section)
if((e && e.id && /landingMediaRandomize|landingMediaTransitionType|landingMediaSpeed|landingMediaTransitionDuration|landingMediaAlignHorizontal|landingMediaAlignVertical|landingMediaScaleType/.test(e.id)) || transitionType !== STATE.overrides.transitionType || !layout) {
if(slideShowTimer) slideShowTimer.duration = STATE.overrides.slideshowSpeed
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(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()
}
function MediaView(vars) {
var self = new Sprite()
var mask
var container
var _localEvents
self.section = vars.section
self.zIndex = STATE.mediaView.zIndex // ??? zIndex was undefined for mediaView and above logo on v16
mask = new Sprite();
mask.element.setAttribute('class', 'MediaView.mask');
self.overflow = 'hidden';
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;
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.updateStyle = updateStyle
function sectionsModelChange(e) {
updateStyle();
}
function layoutModelChange(e) {
updateStyle();
}
function updateStyle() {
if(self.section) STATE.section(self.section)
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]);
}
_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 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() {
self.close(function() {
_localEvents.dispatchEvent('mediaOverlayClose')
})
})
self.open = function(cb) {
self.display = 'block'
Tween.defer(self, 0.35, {alpha:1, onComplete:function(){
// stage.disableScroll = true
// removed for bug #1517
// safari didnt like resetting the overflow x/y in stage
if(typeof cb === 'function') cb()
}})
}
function getDisplayMode() {
if(/unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) return 'multiple'
return 'single'
}
self.close = function(cb) {
// stage.disableScroll = false
// removed for bug #1517
// safari didnt like resetting the overflow x/y in stage
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;
return {
navigationModeChange: function(mode) {
viewMode = mode;
_mediaViewContainer.transition = 0;
_mediaViewContainer.alpha = 1;
switch(viewMode) {
case 'landingMedia':
behavior = new MediaSlideshow({localEvents:_localEvents, siteView:imports.siteView, mediaView:_mediaView});
break;
case 'mediaView':
behavior = new MediaNavigation({localEvents:_localEvents, siteView:imports.siteView, mediaView:_mediaView});
break;
default:
behavior = new MediaNavigation({localEvents:_localEvents, siteView:imports.siteView, mediaView:_mediaView});
break;
}
return behavior
},
destroy: function() {
if(behavior) behavior.destroy()
// _localEvents.removeEventListener('MediaViewBehavior/navigationModeChange', navigationModeChange);
behavior = null
}
}
}
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 = {
assetId: i,
size:mediaItem.size,
localEvents:_localEvents,
isBlog:e.isBlog,
mediaItem:mediaItem,
section:e.section,
state:e.state
}
STATE.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) { // eslint-disable-line
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'
if(_mediaView.section) STATE.section(_mediaView.section)
var i = 0
var items = _container.children
var length = items.length
var firstItemHeight = 0
var galleryHeight = STATE.mediaView.height(_mediaView.section.key)
var isMaxScroll = _mediaView.maxScroll && /unifiedSite/.test(STATE.overrides.siteDisplayBehavior)
if(isMaxScroll) {
galleryHeight = layoutCalcs.getMaxScrollSectionHeight(_mediaView)
}
for(; i < length; i++) {
var item = items[i]
var margins = isSlideshowGallery(_mediaView.section) && /fillSite/.test(STATE.mediaView.imageScaleType()) ?
{left:0, right:0, top:0, bottom:0} :
getMediaItemMargins(item.mediaItem.type)
if(i === 0) {
item.alpha = 1
// use the first media item to define the height for all the media items for "max scroll"
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:galleryHeight - (margins.top + margins.bottom)
}, true)
} else {
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:(isMaxScroll ? items[0].height : galleryHeight) - (margins.top + margins.bottom)
}, false)
}
item.transition = 0
item.x = 0
item.y = 0
item.zIndex = 0
firstItemHeight = allowPageContentHeight(items[0], length) ? items[0].contentHeight : items[0].height
// firstItemHeight = items[0].height
}
_container.transition = 0
_container.translateX = 0
_container.translateY = 0
_container.x = 0
_container.y = 0
_container.width = STATE.mediaView.width()
_container.height = firstItemHeight || STATE.mediaView.height(_mediaView.section.key)
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update()
// layoutCalcs._mediaContentHeight = _container.height
_container.boundsHeight = _container.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', {gallery: _container.height})
}
function scaleItem(item, margins, range, isFirstItem) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type) || !/unifiedSite/.test(STATE.overrides.siteDisplayBehavior) || isFillSiteSlideshow(_mediaView.section)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height(_mediaView.section.key)
} else {
var scale = ScaleEngine(getScaleVars(item, range, STATE.mediaView.imageScaleType()))
// width of mediaItem has to be full mediaView.width so the item content
// will center
item.width = STATE.mediaView.width()
var scaledHeight = (isFirstItem ? scale.height : range.v)
if(/fitWidth|^fill$/.test(STATE.mediaView.imageScaleType()) && scale.height > range.v) scaledHeight = range.v
item.height = scaledHeight + margins.top + margins.bottom
}
item.updatePosition()
}
return layout
}
function FadeTransition(imports) { // eslint-disable-line
var _container = imports.mediaViewContainer
var _localEvents = imports.localEvents
var _mediaView = imports.mediaView
var _duration = imports.transitionDuration
var ease = TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut
// reset container translateX to 0
Tween(_container, 0, {translateX:0})
function transition(assetId, transitionDuration) {
transitionDuration = transitionDuration !== undefined ? transitionDuration : _duration
var i = 0
var items = _container.children
var 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, _duration, {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() {
// you are a 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'
if(_mediaView.section) STATE.section(_mediaView.section)
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
var items = _container.children
var firstItemHeight
var length = items.length
var galleryHeight = STATE.mediaView.height(_mediaView.section.key)
var isMaxScroll = _mediaView.maxScroll && /unifiedSite/.test(STATE.overrides.siteDisplayBehavior)
if(isMaxScroll) {
galleryHeight = layoutCalcs.getMaxScrollSectionHeight(_mediaView)
}
for(; i < length; i++) {
var item = items[i];
var margins = isSlideshowGallery(_mediaView.section) && /fillSite/.test(STATE.mediaView.imageScaleType()) ?
{left:0, right:0, top:0, bottom:0} :
getMediaItemMargins(item.mediaItem.type)
if(i === 0) {
// use the first media item to define the height for all the media items for "max scroll"
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:galleryHeight - (margins.top + margins.bottom)
}, true)
} else {
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:(isMaxScroll ? items[0].height : galleryHeight) - (margins.top + margins.bottom)
}, false)
}
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = allowPageContentHeight(item, length) ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
firstItemHeight = items[0].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()
_container.boundsHeight = firstItemHeight
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', { gallery: firstItemHeight });
}
function scaleItem(item, margins, range, isFirstItem) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type) || !/unifiedSite/.test(STATE.overrides.siteDisplayBehavior) || isFillSiteSlideshow(_mediaView.section)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height(_mediaView.section.key)
} else {
var scale = ScaleEngine(getScaleVars(item, range, STATE.mediaView.imageScaleType()))
// width of mediaItem has to be full mediaView.width so the item content
// will center
item.width = STATE.mediaView.width()
var scaledHeight = (isFirstItem ? scale.height : range.v)
if(/fitWidth|^fill$/.test(STATE.mediaView.imageScaleType()) && scale.height > range.v) scaledHeight = range.v
item.height = scaledHeight + margins.top + margins.bottom
// item.height = (isFirstItem ? scale.height : range.v) + margins.top + margins.bottom
}
item.updatePosition()
}
return layout;
}
function GridTransition(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
var _duration = imports.transitionDuration
_localEvents.dispatchEvent(TRANSITION_START);
function transition(assetId, transitionDuration) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : _duration
var asset = _container.children[assetId];
if(asset) {
var assetX = asset.x;
var assetY = asset.y;
anime({
targets: _container,
duration: transitionDuration * 1000,
translateX: -assetX,
translateY: -assetY,
easing: TOUCH_DEVICE ? 'easeOutQuart' : 'easeInOutCubic',
complete: function() {
_localEvents.dispatchEvent(TRANSITION_END);
setTimeout(function() {
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 360)
}
})
}
}
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:imports.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 allowPageContentHeight(item, length) {
// limiting use to when page is only item in a horizontal gallery
return item.contentHeight && length === 1
}
function layout() {
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'x';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.height(_mediaView.section.key);
if(_mediaView.section) STATE.section(_mediaView.section)
var galleryHeight = STATE.mediaView.height(_mediaView.section.key)
var isMaxScroll = _mediaView.maxScroll && /unifiedSite/.test(STATE.overrides.siteDisplayBehavior)
if(isMaxScroll) {
galleryHeight = layoutCalcs.getMaxScrollSectionHeight(_mediaView)
}
var i = 0
var items = _container.children
var length = items.length
for(; i < length; i++) {
var item = items[i];
var margins = getMediaItemMargins(item.mediaItem.type)
if(i === 0) {
// use the first media item to define the height for all the media items for "max scroll"
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:galleryHeight - (margins.top + margins.bottom)
}, true)
} else {
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:(isMaxScroll ? items[0].height : galleryHeight) - (margins.top + margins.bottom)
}, false)
}
item.transition = 0;
item.display = 'block';
item.alpha = 1;
// item.contentHeight added for getting page text height from PageView
var height = allowPageContentHeight(item, length) ? item.contentHeight : item.height
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();
}
}, (STATE.mediaView.transitionDuration() * 1000) + 550);
}
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
_container.boundsHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', {gallery: bounds.height})
}
function scaleItem(item, margins, range, isFirstItem) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.overrides.pageMaxWidth || STATE.mediaView.width()
item.height = STATE.mediaView.height(_mediaView.section.key)
} else {
var scale = ScaleEngine(getScaleVars(item, range, STATE.mediaView.imageScaleType()))
item.width = scale.width + margins.left + margins.right
if(/unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
var scaledHeight = (isFirstItem ? scale.height : range.v)
if(/fitWidth|^fill$/.test(STATE.mediaView.imageScaleType()) && scale.height > range.v) scaledHeight = range.v
item.height = scaledHeight + margins.top + margins.bottom
// item.height = (isFirstItem ? scale.height : range.v) + margins.top + margins.bottom
} else {
item.height = STATE.mediaView.height()
}
}
item.updatePosition()
}
return layout;
}
function ScrollTransitionHorizontal(imports) {
var _mediaView = imports.mediaView
var _container = _mediaView.container
var _mask = _mediaView.mask
var _localEvents = imports.localEvents
var _duration = imports.transitionDuration
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 : _duration
_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);
_mask.width = STATE.mediaView.width()
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);
setTimeout(function() {
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 360)
}});
// anime({
// targets: _container,
// duration: transitionDuration * 1000,
// translateX: -assetX,
// translateY: -assetY,
// easing: TOUCH_DEVICE ? 'easeOutQuart' : 'easeInOutCubic',
// complete: function() {
// isScrollAnimation = false
// _scrollInteraction = undefined
// _localEvents.dispatchEvent(TRANSITION_END)
// setTimeout(function() {
// if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
// }, 360)
// }
// })
} 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 if(_mask.element) {
_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
}, 300)
}
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:imports.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(_mediaView.section.key);
if(_mediaView.section) STATE.section(_mediaView.section)
var i = 0
var items = _container.children
var length = items.length
var galleryHeight = STATE.mediaView.height(_mediaView.section.key)
var isMaxScroll = _mediaView.maxScroll && /unifiedSite/.test(STATE.overrides.siteDisplayBehavior)
if(isMaxScroll) {
galleryHeight = layoutCalcs.getMaxScrollSectionHeight(_mediaView)
}
for(; i < length; i++) {
var item = items[i];
var margins = getMediaItemMargins(item.mediaItem.type)
if(i === 0) {
// use the first media item to define the height for all the media items for "max scroll"
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:galleryHeight - (margins.top + margins.bottom)
}, true)
} else {
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:(isMaxScroll ? items[0].height : galleryHeight) - (margins.top + margins.bottom)
}, false)
}
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = allowPageContentHeight(item, length) ? 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();
}
}, (STATE.mediaView.transitionDuration() * 1000) + 550);
}
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
_container.boundsHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', { gallery: bounds.height });
}
function scaleItem(item, margins, range, isFirstItem) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.overrides.pageMaxWidth || STATE.mediaView.width()
item.height = STATE.mediaView.height(_mediaView.section.key)
} else {
var scale = ScaleEngine(getScaleVars(item, range, STATE.mediaView.imageScaleType()))
item.width = scale.width + margins.left + margins.right
if(/unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
var scaledHeight = (isFirstItem ? scale.height : range.v)
if(/fitWidth|^fill$/.test(STATE.mediaView.imageScaleType()) && scale.height > range.v) scaledHeight = range.v
item.height = scaledHeight + margins.top + margins.bottom
// item.height = (isFirstItem ? scale.height : range.v) + margins.top + margins.bottom
} else {
item.height = STATE.mediaView.height()
}
}
item.updatePosition()
}
return layout;
}
function ScrollTransitionHorizontalNoCrop(imports) {
var _mediaView = imports.mediaView
var _container = _mediaView.container
var _mask = _mediaView.mask
var _localEvents = imports.localEvents
var _duration = imports.transitionDuration
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 : _duration
_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);
_mask.width = STATE.mediaView.width()
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);
setTimeout(function() {
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 360)
}});
// anime({
// targets: _container,
// duration: transitionDuration * 1000,
// translateX: -assetX,
// translateY: -assetY,
// easing: TOUCH_DEVICE ? 'easeOutQuart' : 'easeInOutCubic',
// complete: function() {
// isScrollAnimation = false
// _scrollInteraction = undefined
// _localEvents.dispatchEvent(TRANSITION_END)
// setTimeout(function() {
// if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
// }, 360)
// }
// })
} 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 if(_mask.element) {
_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
}, 300)
}
return transition;
}
function ScrollLayoutVertical(imports) {
var _Tile = Tile,
_mediaView = imports.mediaView,
_localEvents = imports.localEvents,
_container = _mediaView.container,
_mask = _mediaView.mask;
if(!STATE.siteView.unifiedPageScroll()) {
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:imports.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);
}
}
var layoutTimer
function layout() {
clearTimeout(layoutTimer)
layoutTimer = setTimeout(function() {
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'y';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.width();
tile.name = 'vScroll'
if(_mediaView.section) STATE.section(_mediaView.section)
var i = 0
var items = _container.children
var length = items.length
for(; i < length; i++) {
var item = items[i];
var margins = getMediaItemMargins(item.mediaItem.type)
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:STATE.mediaView.height(_mediaView.section.key) - (margins.top + margins.bottom)
})
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = 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 = STATE.overrides.siteDisplayBehavior === 'none' ? STATE.mediaView.zoneHeight() : 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
_container.boundsHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', {gallery: bounds.height});
}, 50)
}
function scaleItem(item, margins, range) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.mediaView.width()
item.height = item.contentHeight || STATE.mediaView.height()
} else {
var scale = ScaleEngine(getScaleVars(item, range, 'fit', false))
item.width = scale.width + margins.left + margins.right
item.height = scale.height + margins.top + margins.bottom
}
item.updatePosition()
}
return layout;
}
function ScrollTransitionVertical(imports) {
var _mediaView = imports.mediaView
var _container = _mediaView.container
var _mask = _mediaView.mask
var _localEvents = imports.localEvents
var _duration = imports.transitionDuration
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(STATE.siteView.unifiedPageScroll()) {
window.addEventListener("scroll", scrollEvents)
} else {
_mask.element.addEventListener("scroll", scrollEvents)
}
function transition(assetId, transitionDuration) {
curAssetId = assetId
var transitionDuration = transitionDuration !== undefined ? transitionDuration : _duration
_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(STATE.siteView.unifiedPageScroll()) {
_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(/top/.test(STATE.menuView.placement()) && assetId === 0 && !/unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
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);
setTimeout(function() {
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 360)
}});
// anime({
// targets: _container,
// duration: transitionDuration * 1000,
// translateX: -assetX,
// translateY: -assetY,
// easing: TOUCH_DEVICE ? 'easeOutQuart' : 'easeInOutCubic',
// complete: function() {
// isScrollAnimation = false
// _scrollInteraction = undefined
// _localEvents.dispatchEvent(TRANSITION_END)
// setTimeout(function() {
// if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
// }, 360)
// }
// })
} else if(STATE.siteView.unifiedPageScroll()) {
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(_mediaView.section.key))) && USER_AGENT !== MOBILE ? setActiveAlpha(assetId) : setAllActive()
}
}, BROWSER_NAME === 'Firefox' ? 1000 : 300)
}
transition.destroy = function destroy() {
if(_mediaView.scroll) {
_mediaView.scroll.removeEventListener('scrollStop', scrollStop);
_mediaView.scroll.removeEventListener('scrollStart', scrollStart);
_mediaView.scroll.removeEventListener(SCROLL, scroll);
} else if(STATE.siteView.unifiedPageScroll()) {
window.removeEventListener("scroll", scrollEvents)
} else if(_mask.element) {
_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(isBlogFeed(_mediaView.section.id)) {
return 'top'
} else 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(STATE.siteView.unifiedPageScroll()) {
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
}, 300)
}
return transition;
}
function ScrollLayoutVerticalNoCrop(imports) {
var _Tile = Tile,
_mediaView = imports.mediaView,
_localEvents = imports.localEvents,
_container = _mediaView.container,
_mask = _mediaView.mask;
if(!STATE.siteView.unifiedPageScroll()) {
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:imports.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);
}
}
var layoutTimer
function layout() {
clearTimeout(layoutTimer)
layoutTimer = setTimeout(function() {
var tile = new _Tile();
tile.gap = 0;
tile.axis = 'y';
tile.align = 'left';
tile.wrap = false;
tile.perpLength = STATE.mediaView.width();
if(_mediaView.section) STATE.section(_mediaView.section)
var i = 0,
items = _container.children,
length = items.length;
for(; i < length; i++) {
var item = items[i];
var margins = getMediaItemMargins(item.mediaItem.type)
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:STATE.mediaView.height(_mediaView.section.key) - (margins.top + margins.bottom)
})
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = 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 = STATE.overrides.siteDisplayBehavior === 'none' ? STATE.mediaView.zoneHeight() : 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
_container.boundsHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', { gallery: bounds.height });
}, 50)
}
function scaleItem(item, margins, range) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.mediaView.width()
item.height = item.mediaItem.type === 'html' ? item.contentHeight || stage.height : STATE.mediaView.height()
} else {
// var scale = ScaleEngine(getScaleVars(item, range, 'fit', false))
// width of mediaItem has to be full mediaView.width so the item content
// will center
item.width = STATE.mediaView.width() //scale.width + margins.left + margins.right
item.height = STATE.mediaView.height()
}
item.updatePosition()
}
return layout;
}
function ScrollTransitionVerticalNoCrop(imports) {
var _mediaView = imports.mediaView
var _container = _mediaView.container
var _mask = _mediaView.mask
var _localEvents = imports.localEvents
var _duration = imports.transitionDuration
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(STATE.siteView.unifiedPageScroll()) {
window.addEventListener("scroll", scrollEvents)
} else {
_mask.element.addEventListener("scroll", scrollEvents)
}
function transition(assetId, transitionDuration) {
curAssetId = assetId
var transitionDuration = transitionDuration !== undefined ? transitionDuration : _duration
_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(STATE.siteView.unifiedPageScroll()) {
_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(/top/.test(STATE.menuView.placement()) && assetId === 0 && !/unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
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 = STATE.siteView.unifiedPageScroll() ? 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);
setTimeout(function() {
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 360)
}});
// anime({
// targets: _container,
// duration: transitionDuration * 1000,
// translateX: -assetX,
// translateY: -assetY,
// easing: TOUCH_DEVICE ? 'easeOutQuart' : 'easeInOutCubic',
// complete: function() {
// isScrollAnimation = false
// _scrollInteraction = undefined
// _localEvents.dispatchEvent(TRANSITION_END)
// setTimeout(function() {
// if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
// }, 360)
// }
// })
} else if(STATE.siteView.unifiedPageScroll()) {
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(_mediaView.section.key) ? setActiveAlpha(assetId) : setAllActive()
}
// delay for navigating tall galleries by
}, BROWSER_NAME === 'Firefox' ? 1000 : 300)
}
transition.destroy = function destroy() {
if(_mediaView.scroll) {
_mediaView.scroll.removeEventListener('scrollStop', scrollStop);
_mediaView.scroll.removeEventListener('scrollStart', scrollStart);
_mediaView.scroll.removeEventListener(SCROLL, scroll);
} else if(STATE.siteView.unifiedPageScroll()) {
window.removeEventListener("scroll", scrollEvents)
} else if(_mask.element) {
_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(isBlogFeed(_mediaView.section.id)) {
return 'top'
} else 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(STATE.siteView.unifiedPageScroll()) {
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
}, 300)
}
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(_mediaView.section.key);
if(_mediaView.section) STATE.section(_mediaView.section)
var i = 0
var items = _container.children
var length = items.length
var mediaViewWidth = STATE.mediaView.width()
var galleryHeight = STATE.mediaView.height(_mediaView.section.key)
var isMaxScroll = _mediaView.maxScroll && /unifiedSite/.test(STATE.overrides.siteDisplayBehavior)
if(isMaxScroll) {
galleryHeight = layoutCalcs.getMaxScrollSectionHeight(_mediaView)
}
for(; i < length; i++) {
var item = items[i];
var margins = isSlideshowGallery(_mediaView.section) && /fillSite/.test(STATE.mediaView.imageScaleType()) ?
{left:0, right:0, top:0, bottom:0} :
getMediaItemMargins(item.mediaItem.type)
if(i === 0) {
// use the first media item to define the height for all the media items for "max scroll"
scaleItem(item, margins, {
h:mediaViewWidth - (margins.left + margins.right),
v:galleryHeight - (margins.top + margins.bottom)
}, true)
} else {
scaleItem(item, margins, {
h:mediaViewWidth - (margins.left + margins.right),
v:(isMaxScroll ? items[0].height : galleryHeight) - (margins.top + margins.bottom)
}, false)
}
item.transition = 0;
item.display = 'block';
item.alpha = 1;
var height = allowPageContentHeight(item, length) ? 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
_container.boundsHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', { gallery: bounds.height });
}
function scaleItem(item, margins, range, isFirstItem) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type) || !/unifiedSite/.test(STATE.overrides.siteDisplayBehavior) || isFillSiteSlideshow(_mediaView.section)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height(/*_mediaView.section.key*/)
} else {
var scale = ScaleEngine(getScaleVars(item, range, STATE.mediaView.imageScaleType()))
// width of mediaItem has to be full mediaView.width so the item content
// will center
item.width = STATE.mediaView.width()
var scaledHeight = (isFirstItem ? scale.height : range.v)
if(/fitWidth|^fill$/.test(STATE.mediaView.imageScaleType()) && scale.height > range.v) scaledHeight = range.v
item.height = scaledHeight + margins.top + margins.bottom
// item.height = (isFirstItem ? scale.height : range.v) + margins.top + margins.bottom
}
item.updatePosition()
}
return layout;
}
function SlideTransitionHorizontal(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView;
var _duration = imports.transitionDuration
function transition(assetId, transitionDuration) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : _duration
_localEvents.dispatchEvent(TRANSITION_START);
var asset = _container.children[assetId];
if(asset) {
var assetX = asset.x;
var assetY = asset.y;
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut, onComplete:function(){
_localEvents.dispatchEvent(TRANSITION_END);
setTimeout(function() {
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 360)
}});
// anime({
// targets: _container,
// duration: transitionDuration * 1000,
// translateX: -assetX,
// translateY: -assetY,
// easing: TOUCH_DEVICE ? 'easeOutQuart' : 'easeInOutCubic',
// complete: function() {
// _localEvents.dispatchEvent(TRANSITION_END);
// setTimeout(function() {
// if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
// }, 360)
// }
// })
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) { // eslint-disable-line
var _Tile = Tile
var _container = imports.mediaViewContainer
var _localEvents = imports.localEvents
var _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()
if(_mediaView.section) STATE.section(_mediaView.section)
var i = 0
var items = _container.children
var length = items.length
var firstItemHeight = 0
var galleryHeight = STATE.mediaView.height(_mediaView.section.key)
var isMaxScroll = _mediaView.maxScroll && /unifiedSite/.test(STATE.overrides.siteDisplayBehavior)
if(isMaxScroll) {
galleryHeight = layoutCalcs.getMaxScrollSectionHeight(_mediaView)
}
for(; i < length; i++) {
var item = items[i]
var margins = isSlideshowGallery(_mediaView.section) && /fillSite/.test(STATE.mediaView.imageScaleType()) ?
{left:0, right:0, top:0, bottom:0} :
getMediaItemMargins(item.mediaItem.type)
if(i === 0) {
// use the first media item to define the height for all the media items for "max scroll"
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:galleryHeight - (margins.top + margins.bottom)
}, true)
} else {
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:(isMaxScroll ? items[0].height : galleryHeight) - (margins.top + margins.bottom)
}, false)
}
item.transition = 0
item.display = 'block'
item.alpha = 1
var height = allowPageContentHeight(item, length) ? item.contentHeight : item.height
// item.contentHeight added for getting page text height from PageView
tile.addItem(item.width, height);
firstItemHeight = items[0].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()
_container.boundsHeight = firstItemHeight
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', {gallery: firstItemHeight})
}
function scaleItem(item, margins, range, isFirstItem) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type) || !/unifiedSite/.test(STATE.overrides.siteDisplayBehavior) || isFillSiteSlideshow(_mediaView.section)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height(_mediaView.section.key)
} else {
var scale = ScaleEngine(getScaleVars(item, range, STATE.mediaView.imageScaleType()))
// width of mediaItem has to be full mediaView.width so the item content
// will center
item.width = STATE.mediaView.width()
var scaledHeight = (isFirstItem ? scale.height : range.v)
if(/fitWidth|^fill$/.test(STATE.mediaView.imageScaleType()) && scale.height > range.v) scaledHeight = range.v
item.height = scaledHeight + margins.top + margins.bottom
// item.height = (isFirstItem ? scale.height : range.v) + margins.top + margins.bottom
}
item.updatePosition()
}
return layout
}
function SlideTransitionVertical(imports) {
var _container = imports.mediaViewContainer,
_localEvents = imports.localEvents,
_mediaView = imports.mediaView
var _duration = imports.transitionDuration
function transition(assetId, transitionDuration) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : _duration
_localEvents.dispatchEvent(TRANSITION_START)
var asset = _container.children[assetId]
if(asset) {
var assetX = asset.x
var assetY = asset.y
Tween(_container, transitionDuration, {translateX:-assetX, translateY:-assetY, ease:TOUCH_DEVICE ? EASE.quart.out : EASE.cubic.inOut, onComplete:function(){
_localEvents.dispatchEvent(TRANSITION_END);
setTimeout(function() {
if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
}, 360)
}});
// anime({
// targets: _container,
// duration: transitionDuration * 1000,
// translateX: -assetX,
// translateY: -assetY,
// easing: TOUCH_DEVICE ? 'easeOutQuart' : 'easeInOutCubic',
// complete: function() {
// _localEvents.dispatchEvent(TRANSITION_END);
// setTimeout(function() {
// if(_mediaView.lazyLoader) _mediaView.lazyLoader.update();
// }, 360)
// }
// })
}
}
transition.destroy = function destroy() {
// dummy
}
return transition
}
function MobileSlideLayout(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(_mediaView.section.key);
if(_mediaView.section) STATE.section(_mediaView.section)
var i = 0
var items = _container.children
var length = items.length
var galleryHeight = STATE.mediaView.height(_mediaView.section.key)
var isMaxScroll = _mediaView.maxScroll && /unifiedSite/.test(STATE.overrides.siteDisplayBehavior)
if(isMaxScroll) {
galleryHeight = layoutCalcs.getMaxScrollSectionHeight(_mediaView)
}
for(; i < length; i++) {
var item = items[i];
var margins = isSlideshowGallery(_mediaView.section) && /fillSite/.test(STATE.mediaView.imageScaleType()) ?
{left:0, right:0, top:0, bottom:0} :
getMediaItemMargins(item.mediaItem.type)
if(i === 0) {
// use the first media item to define the height for all the media items for "max scroll"
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:galleryHeight - (margins.top + margins.bottom)
}, true)
} else {
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:(isMaxScroll ? items[0].height : galleryHeight) - (margins.top + margins.bottom)
}, false)
}
item.transition = 0;
item.display = 'block';
item.alpha = 0;
var height = allowPageContentHeight(item, length) ? 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;
}
if(USER_AGENT === MOBILE) {
// var bounds = tile.getBounds();
_container.transition = 0
_container.width = STATE.mediaView.width()
_container.height = STATE.mediaView.height(_mediaView.section.key)
} else {
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
_container.boundsHeight = _container.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', { gallery: _container.height });
}
function scaleItem(item, margins, range, isFirstItem) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type) || !/unifiedSite/.test(STATE.overrides.siteDisplayBehavior) || isFillSiteSlideshow(_mediaView.section)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height(_mediaView.section.key)
} else {
var scale = ScaleEngine(getScaleVars(item, range, STATE.mediaView.imageScaleType()))
// width of mediaItem has to be full mediaView.width so the item content
// will center
item.width = STATE.mediaView.width()
var scaledHeight = (isFirstItem ? scale.height : range.v)
if(/fitWidth|^fill$/.test(STATE.mediaView.imageScaleType()) && scale.height > range.v) scaledHeight = range.v
item.height = scaledHeight + margins.top + margins.bottom
// item.height = (isFirstItem ? scale.height : range.v) + margins.top + margins.bottom
}
item.updatePosition()
}
return layout;
}
function MobileSlideTransition(imports) {
var _container = imports.mediaViewContainer
var _localEvents = imports.localEvents
var _mediaView = imports.mediaView
var _duration = imports.transitionDuration
var mediaDisplayTimer
function transition(assetId, transitionDuration, swipeDirection) {
var transitionDuration = transitionDuration !== undefined ? transitionDuration : _duration
_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() {}
return transition;
}
function StaticVLayout(imports) {
var _Tile = Tile,
_mediaView = imports.mediaView,
_localEvents = imports.localEvents,
_container = _mediaView.container,
_mask = _mediaView.mask;
if(!STATE.siteView.unifiedPageScroll()) {
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:imports.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();
if(_mediaView.section) STATE.section(_mediaView.section)
var i = 0
var items = _container.children
var length = items.length
for(; i < length; i++) {
var item = items[i];
var margins = getMediaItemMargins(item.mediaItem.type)
scaleItem(item, margins, {
h:STATE.mediaView.width() - (margins.left + margins.right),
v:STATE.mediaView.height(_mediaView.section.key) - (margins.top + margins.bottom)
})
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 = STATE.overrides.siteDisplayBehavior === 'none' ? STATE.mediaView.zoneHeight() : 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
_container.boundsHeight = bounds.height
_localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', {gallery: bounds.height});
}
function scaleItem(item, margins, range) {
// we don't add margins to html/contact because they are not scaled
if(/html|contact/.test(item.mediaItem.type)) {
// for html height is ignore and uses item.contentHeight
item.width = STATE.mediaView.width()
item.height = STATE.mediaView.height(_mediaView.section.key)
} else {
var scale = ScaleEngine(getScaleVars(item, range, 'fit', false))
item.width = scale.width + margins.left + margins.right
item.height = scale.height + margins.top + margins.bottom
}
item.updatePosition()
}
return layout;
}
function StaticVTransition() {
// StaticVLayout doesn't need transitions for single media items
// vscroll was interfering with max scroll for single text pages
function transition() {}
transition.destroy = function destroy() {}
return transition
}
var Caption = (function() { // eslint-disable-line
function Caption() { // eslint-disable-line
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(){
if(btn.element.style.opacity != 0) {
btn.element.style.opacity = 0.75
}
})
btn.addEventListener('mouseout', function(){
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(thisCaption.text) {
setTimeout(function() {
thisCaption.container.display = 'block'
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()
Tween(thisCaption.container, 0.35, {alpha:1})
}, 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()) {
if(this.mask.element.offsetHeight < this._properties.height) {
this.mask.element.style.overflowY = 'scroll'
this.mask.element.style.overflowX = 'hidden'
}
this.mask.element.style['-webkit-overflow-scrolling'] = 'touch'
// assume we are filtering this due to caption overlay for mobile
if(USER_AGENT !== MOBILE) {
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') {
if(this.mask.element.offsetHeight < this._properties.height) {
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)) {
if(this.mask.element.offsetHeight < this._properties.height) {
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;
var contactExtraWidth = 0
self.section = imports.section
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 = !isSlideshowGallery(self.section);
self.mediaItem = imports.mediaItem
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 = !isSlideshowGallery(self.section);
}
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(contactExtraWidth > 320) {
contactExtraWidth = 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.element.offsetWidth + 16;
contactLabel.y = percentToPixels(LAYOUT_MODEL.contactTitleFontSize, 100) - 33;
}
formContainer.width = contactExtraWidth + contactFields.width;
responseMessage.alpha = 0;
responseMessage.x = contactExtraWidth + 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);
STATE.section(self.section)
var topMargin = 0;
var btmMargin = 0;
// formHeight = 22;
formHeight = topMargin;
if(LAYOUT_MODEL.contactTitleShow) {
formHeight += contactLabel.y + contactLabel.element.offsetHeight + 16;
}
if(isVerticalPageBuild()) {
formHeight += contactExtra.element.offsetHeight + contactFields.height + 16;
formHeight += submit.element.offsetHeight + 5 + btmMargin;
} else if(contactExtra.element.offsetHeight > contactFields.height) {
formHeight += contactExtra.element.offsetHeight + btmMargin;
} else {
formHeight += contactFields.height;
formHeight += submit.element.offsetHeight + 5 + btmMargin;
}
formContainer.height = formHeight;
}
function updateScroll() {
STATE.section(self.section)
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(STATE.siteView.unifiedPageScroll() && /vScroll/.test(STATE.overrides.transitionType)) {
getContactHeight()
setTimeout(function() {
STATE.section(self.section)
var contentHeight = formHeight
contentHeight = contentHeight > STATE.mediaView.height() ? contentHeight : STATE.mediaView.height()
var heightUpdateRequired = contentHeight !== self.contentHeight
self.contentHeight = contentHeight
self.height = contentHeight
if(heightUpdateRequired) {
_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;
responseMessage.x = contactExtraWidth + 17;
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) {
STATE.section(self.section)
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() {
STATE.section(self.section)
if(USER_AGENT === MOBILE) return true;
if(formContainer.width + 16 > STATE.mediaView.width()) return true
return false;
}
function updatePosition(e) {
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type;
contactExtraWidth = contactExtra.element.offsetWidth
if(contactExtraWidth > 320) {
contactExtraWidth = 320
contactExtra.width = 320;
contactExtra.textWrap = true;
contactExtra.style['word-wrap'] = 'break-word';
}
formContainer.width = contactExtraWidth + contactFields.width + 18;
if(isVerticalPageBuild()) {
contactExtra.x = 8;
contactFields.x = -8;
if(LAYOUT_MODEL.contactTitleShow) {
if(contactLabel) {
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.element.offsetHeight + 16;
} else {
contactExtra.y = 0;
contactFields.y = contactExtra.element.offsetHeight;
}
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 = contactExtraWidth + 16;
contactFields.y = 44;
contactFields.borderLeft = '1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0.3);
contactExtra.textAlign = 'right';
if(LAYOUT_MODEL.contactTitleShow && contactLabel) {
contactLabel.textWrap = true;
contactLabel.x = contactExtraWidth + 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 && !contactFormObj.contactFormExtra) {
if(self.scroll) self.scroll.align = 'top';
contactFields.borderLeft = '1px solid ' + toRgba(LAYOUT_MODEL.contactFieldRectColor, 0);
contactFields.x = -8;
if(contactLabel) 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() {
STATE.section(self.section)
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() {
STATE.section(self.section)
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) { // 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
self.state = imports.state
self.mediaItem = imports.mediaItem
var image = new Bitmap()
var mask = new Sprite()
var caption
var loader
var originalImageWidth = imports.size.content.width
var originalImageHeight = imports.size.content.height
var imageWidth = 0
var imageHeight = 0
var imageX = 0
var imageY = 0
var maskWidth = 0
var maskHeight = 0
var loaded = false
var _captionLocal
var _localEvents = imports.localEvents
var state = imports.state
function hasLightboxButton() {
return STATE.lightboxSection &&
!LAYOUT_MODEL.lightboxGalleryBtnDisable &&
!LAYOUT_MODEL.lightboxImageDisable
}
if(hasLightboxButton() && STATE.lightboxButtonsEnabled()) {
var mediaItemIndex = STATE.lightboxSection.media.indexOf(self.mediaItem.id)
/*
var AlignHorizontal
var AlignVertical
var HorizontalOffset
var VerticalOffset
var BlendMode
var Font
var FontSize
var FontColor
var RemoveText
var AddText
*/
if(!self.mediaItem.disableLightbox) {
var lightboxBtn = buildLightboxButton({
alignHorizontal:LAYOUT_MODEL.lightboxGalleryBtnAlignHorizontal || 'left',
alignVertical:LAYOUT_MODEL.lightboxGalleryBtnAlignVertical || 'top',
horizontalOffset:percentToPixels(LAYOUT_MODEL.lightboxGalleryBtnHorizontalOffset, stage.height),
verticalOffset:percentToPixels(LAYOUT_MODEL.lightboxGalleryBtnVerticalOffset, stage.height),
blendMode:LAYOUT_MODEL.lightboxGalleryBtnBlendMode || 'difference',
font:LAYOUT_MODEL.lightboxGalleryBtnFont || 'Helvetica',
fontSize:LAYOUT_MODEL.lightboxGalleryBtnFontSize || 12,
fontColor:LAYOUT_MODEL.lightboxGalleryBtnFontColor || '#999999'
})
lightboxBtn.zIndex = 1
lightboxBtn.text = mediaItemIndex > -1 ? (LAYOUT_MODEL.lightboxGalleryBtnRemoveText || '- Lightbox') : (LAYOUT_MODEL.lightboxGalleryBtnAddText || '+ Lightbox')
lightboxBtn.addEventListener('click', function(e) {
var idx = STATE.lightboxSection.media.indexOf(self.mediaItem.id)
var action
if(idx > -1) {
lightboxBtn.text = (LAYOUT_MODEL.lightboxGalleryBtnAddText || '+ Lightbox')
action = 'remove'
} else {
lightboxBtn.text = (LAYOUT_MODEL.lightboxGalleryBtnRemoveText || '- Lightbox')
action = 'add'
}
self.events.dispatchEvent('lightboxUpdateItem', {
action:action,
id:self.mediaItem.id
})
lightboxBtn.cursor = 'pointer'
})
self.addChild(lightboxBtn)
if(imports.section.isLightbox && !LAYOUT_MODEL.lightboxGalleryDownloadBtnDisable) {
var downloadBtn = buildLightboxButton({
alignHorizontal:LAYOUT_MODEL.lightboxDownloadBtnAlignHorizontal || 'right',
alignVertical:LAYOUT_MODEL.lightboxDownloadBtnAlignVertical || 'top',
horizontalOffset:percentToPixels(LAYOUT_MODEL.lightboxDownloadBtnHorizontalOffset, stage.height),
verticalOffset:percentToPixels(LAYOUT_MODEL.lightboxDownloadBtnVerticalOffset, stage.height),
blendMode:LAYOUT_MODEL.lightboxDownloadBtnBlendMode || 'difference',
font:LAYOUT_MODEL.lightboxDownloadBtnFont || 'Helvetica',
fontSize:LAYOUT_MODEL.lightboxDownloadBtnFontSize || 12,
fontColor:LAYOUT_MODEL.lightboxDownloadBtnFontColor || '#999999'
})
downloadBtn.zIndex = 1
downloadBtn.text = LAYOUT_MODEL.lightboxDownloadBtnText || '↓'
downloadBtn.addEventListener('click', function(e) {
self.events.dispatchEvent('lightboxDownloadOverlayOpen')
})
self.addChild(downloadBtn)
}
}
}
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)
var captionText = getCaptionText(imports.mediaItem)
if(!caption && captionText !== '') {
caption = new Caption()
_captionLocal = imports.mediaItem.overrides || {}
_localEvents.addEventListener('showCaption', showCaption)
_localEvents.addEventListener('hideCaption', hideCaption)
_localEvents.addEventListener('checkCaption', checkCaptionOnScrollStop)
updateCaptionText(captionText)
}
function childAdded() {
if(!isSlideshowGallery(self.section)) {
self.element.navigationCursor = true
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() {
if(!isSlideshowGallery(self.section)) {
self.element.navigationCursor = true
image.element.navigationCursor = true
mask.element.navigationCursor = true
}
}
function hideCursor() {
self.element.navigationCursor = false
image.element.navigationCursor = false
mask.element.navigationCursor = false
}
function updateStyle() {
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.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()})
}
showCaption(state)
}
function updateCaptionStyle() {
if(/media/.test(_captionLocal.captionAnchorTo) || /media/.test(STATE.overrides.captionAnchorTo)) {
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type
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 = stage.width < LAYOUT_MODEL.screenWidthBreakpoint ?
firstValid(_captionLocal.captionFontSizeBreakpoint, STATE.overrides.captionFontSizeBreakpoint, _captionLocal.captionFontSize, STATE.overrides.captionFontSize) :
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((isSlideshowGallery(self.section) && /fill|fitWidth/.test(STATE.overrides.slideshowScaleType)) || (!isSlideshowGallery(self.section) && /fill/.test(STATE.overrides.imageScaleType))) {
alignVars.hOrigin = 0
alignVars.vOrigin = 0
alignVars.hRange = maskWidth // layoutCalcs.mediaView.width()
alignVars.vRange = maskHeight // layoutCalcs.mediaView.height(self.section.key)
} else if(/unifiedSite/.test(STATE.overrides.siteDisplayBehavior) || /^hScroll/.test(STATE.overrides.transitionType) || _captionLocal.captionAnchorTo === 'media item' || STATE.overrides.captionAnchorTo === 'media item') {
alignVars.hOrigin = STATE.mediaView.maskX() + imageX
alignVars.vOrigin = STATE.mediaView.maskY(self.section.key) + imageY
alignVars.hRange = imageWidth
alignVars.vRange = imageHeight
} else {
alignVars.hOrigin = 0
alignVars.vOrigin = 0
alignVars.hRange = layoutCalcs.mediaView.width()
alignVars.vRange = layoutCalcs.mediaView.height(self.section.key)
}
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) {
if(USER_AGENT !== MOBILE) {
showCaption(e)
} 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 anchorIsMedia(anchor) {
return /media/.test(anchor)
}
function showCaption(newState) {
if(loaded && newState && caption && imports.assetId === newState.assetId) {
state = newState
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type
var captionText = getCaptionText(imports.mediaItem)
caption.text = plainTextToHtml(captionText)
var anchorToMedia = anchorIsMedia(firstValid(imports.mediaItem.overrides.captionAnchorTo, STATE.overrides.captionAnchorTo))
var isSlideshowCaption = isSlideshowGallery(self.section) && LAYOUT_MODEL.slideshowCaptions
if(anchorToMedia && (isSlideshowCaption || (state && state.mode && state.mode.indexOf('caption') > -1))) {
caption.show(updateCaptionStyle)
}
}
}
function hideCaption() {
var isSlideshowCaption = isSlideshowGallery(self.section) && LAYOUT_MODEL.slideshowCaptions
if(!isSlideshowCaption) 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)
// }
if(captionText !== '') {
self.addChild(caption.container)
updateCaptionStyle()
}
}
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() {
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type
maskWidth = STATE.mediaView.maskWidth(self.width)
maskHeight = STATE.mediaView.maskHeight(self.height, self.section.key)
Tween(mask, self.updateSpeed, {x:STATE.mediaView.maskX(), y:STATE.mediaView.maskY(self.section.key), width:maskWidth, height:maskHeight})
positionLoader()
if(loaded) resizeImage()
showCaption(state)
}
self.updatePosition = updatePosition
function imageLoaded() {
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()
showCaption(state)
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() {
STATE.section(self.section)
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:getOrientationCheck()
})
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)
}
})
showCaption(state)
}
function positionLoader() {
if(loader) {
loader.x = (maskWidth - loader.width) * 0.5
loader.y = (maskHeight - loader.height) * 0.5
}
}
function destroy() {
_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(),
originalImageWidth = imports.size.featuredImage.width || 0,
originalImageHeight = imports.size.featuredImage.height || 0,
imageGap = 30,
maskWidth = 0,
maskHeight = 0,
loaded = false,
_thumbState,
_localEvents = imports.localEvents,
placeholderInit,
pageImgs,
pageSrcElements,
responsiveWidthElements,
responsiveElements;
var CDN_SSL_URI = SETTINGS_MODEL.cdnSslUri + '/'
self.mediaItem = imports.mediaItem
self.section = imports.section
var isVerticalPage = isVerticalPageBuild()
self.alpha = 0;
text.alpha = 0;
self.updateSpeed = 0;
self.setClass('dx_page_text');
mask.setClass('pageviewMask');
text.setClass('ql-editor');
self.id = imports.mediaItem.id;
self.type = imports.mediaItem.type;
self.dims = imports.size.content;
self.element.navigationCursor = true;
self.overflow = 'hidden'
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) {
if(!isSlideshowGallery(self.section)) {
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() {
STATE.section(self.section)
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)
if(!isSlideshowGallery(self.section)) {
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=
// except for when lazy loader disabled (e.g. google maps)
var noLazyLoadEls = text.element.getElementsByClassName('no-lazy-load')
if(!noLazyLoadEls.length) {
// disable lazy loader for things like google map pages
// add class='no-lazy-load' to main text page div
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 isSameSrc(filename) {
return function(data) {
// remove non-printing chars from equality check
return filename.replace(/[^ -~]+/g, '') === data.src
}
}
function getOriginalStyleSize(img) {
img.savedOpacity = img.style.opacity
img.style.opacity = 0
img.originalWidth = img.style.width
img.originalHeight = img.style.height
// img.style.width = dims.width + 'px'
// img.style.height = dims.height + 'px'
// if(dims.width > maskWidth || !maxWidth) img.style.maxWidth = '100%'
// placeholder size stuff
// inlineStyle
// if width and no height or height and no width
// set the width and height styles with a ratio
// else do nothing
// widthAttr
// set the width and height styles with a ratio
// neither widthAttr or inlineStyle
// embeddedStyleSheet
// maxWidth
return img
}
function childAdded(child) {
init()
// // set original dims before updatePosition
maskWidth = Math.round(STATE.mediaView.maskWidth(self.element.offsetWidth))
if(STATE.overrides.pageMaxWidth && maskWidth > STATE.overrides.pageMaxWidth) {
maskWidth = STATE.overrides.pageMaxWidth
}
pageSrcElements = getLoadableElements(text.element)
pageImgs = pageSrcElements
.filter(function(el) {
return el.tagName.toLowerCase() === 'img'
})
.map(getOriginalStyleSize)
updateStyle()
updatePosition()
setTimeout(function() {
updateStyle()
updatePosition()
}, 150)
}
function getLoadableElements(element) {
return Array.prototype.slice.apply(element.getElementsByTagName('img'))
.concat(Array.prototype.slice.apply(element.getElementsByTagName('video')))
.concat(Array.prototype.slice.apply(element.getElementsByTagName('iframe')))
.concat(Array.prototype.slice.apply(element.getElementsByTagName('input')))
}
function updateAdminSrcSizes(imgs) {
var pageImages =
imgs
.reduce(function(acc, data) {
if(data.img.tagName.toLowerCase() === 'img') {
var key = data.img.src.replace(CDN_SSL_URI, '')
acc = acc.concat({
src: key,
width: data.img.naturalWidth,
height: data.img.naturalHeight
})
}
return acc
}, [])
if(JSON.stringify(self.mediaItem.size.pageImages) !== JSON.stringify(pageImages)) {
self.mediaItem.size.pageImages = pageImages
_localEvents.dispatchEvent('adminPageviewImageSizes', self.mediaItem);
}
}
function getNaturalSize(img) {
return new Promise(function(resolve, reject) {
var timer
var src = img.getAttribute('data-src')
if(img.tagName.toLowerCase() === 'img') {
timer = setInterval(function() {
if(img.naturalWidth && img.naturalHeight) {
img.metaLoaded = true
clearInterval(timer)
resolve({img:img})
}
}, 10)
img.addEventListener('load', function() {
Tween(img, 0.35, {opacity:img.savedOpacity || 1})
})
img.addEventListener('error', function() {
clearInterval(timer)
})
setTimeout(function() {
if(timer) {
clearInterval(timer)
}
}, 10000)
} else {
resolve({img:img})
}
img.src = src
})
}
function disable(e) {
var disableRightClick = SETTINGS_MODEL.disableRightClick === undefined || SETTINGS_MODEL.disableRightClick
if(disableRightClick) {
e.preventDefault()
}
}
function disableRightClick(imgData) {
imgData.img.oncontextmenu = disable
imgData.img.ondragstart = disable
return imgData
}
function loadPageImages(pageMedia) {
Promise.all(pageMedia.map(getNaturalSize))
.then(function(imgs) {
return imgs.map(disableRightClick)
})
.then(updateAdminSrcSizes)
.then(updatePosition)
.catch(function(e) {
// updatePosition()
console.log('something broke while loading images:', e)
})
}
var debounceTimer
var heightUpdateRequired
function isNativePageScroll() {
return STATE.overrides.pageScrollType === 'native' ||
(MAC_SCROLLBARS && (STATE.overrides.pageScrollType === 'nativeMacOs' || LAYOUT_MODEL.globalSmoothScroll))
}
function updateScroll() {
STATE.section(self.section)
if(USER_AGENT === MOBILE || USER_AGENT === TABLET) mask.element.style['-webkit-overflow-scrolling'] = 'touch'
if(/vScroll/.test(STATE.overrides.transitionType) && STATE.siteView.unifiedPageScroll()) {
mask.element.style.overflow = 'hidden'
mask.element.style['-webkit-overflow-scrolling'] = 'touch'
Tween.defer(text, UPDATE_SPEED, {alpha:1});
} else if(isNativePageScroll() || /unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
mask.element.style.overflowY = 'auto'
mask.element.style.overflowX = 'hidden'
mask.element.style['-webkit-overflow-scrolling'] = 'touch'
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);
});
}
STATE.section(self.section)
var topMargin = percentToPixels(STATE.overrides.pageMarginTop, stage.height);
var btmMargin = percentToPixels(STATE.overrides.pageMarginBottom, stage.height);
var contentHeight = topMargin + text.element.offsetHeight + btmMargin
if(hasFeaturedImage() && !isVerticalPageBuild()) {
contentHeight = contentHeight > topMargin + image.element.offsetHeight + btmMargin ? contentHeight : topMargin + image.element.offsetHeight + btmMargin
}
heightUpdateRequired = contentHeight !== self.contentHeight
self.contentHeight = contentHeight
// return legacy || (section.media.length > 1 && is a horizontal gallery)
if(mediaViewMaskHeightLimit(self.section)) {
layoutCalcs._mediaMarginPrefix = 'page'
mask.height = Math.round(STATE.mediaView.maskHeight(undefined, self.section.key))
self.height = Math.round(STATE.mediaView.height(self.section.key))
} else {
mask.height = contentHeight
self.height = contentHeight
}
// self.width = maskWidth
if(heightUpdateRequired) {
// set to vertical scroll transition
_localEvents.dispatchEvent('MEDIA_HEIGHT_CHANGE');
}
if(self.scroll) self.scroll.resize();
Tween.defer(text, UPDATE_SPEED, {alpha:1});
}
function mediaViewMaskHeightLimit(section) {
STATE.section(self.section)
// removed mobile check due to #1375
// then added back with vScroll check for text pages on mobile
if(USER_AGENT === MOBILE && /vScroll/.test(STATE.overrides.transitionType)) return false
return STATE.overrides.siteDisplayBehavior === 'none' ||
(!/vScroll/.test(STATE.overrides.transitionType) && section.media.length > 1)
}
function isValidPageTitle() {
STATE.section(self.section)
return STATE.overrides.pageTitle && imports.mediaItem.label !== '';
}
function hasFeaturedImage() {
return imports.mediaItem.featuredImage !== '';
}
function updateStyle(e) {
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';
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
if(!text.element.getElementsByClassName('no-lazy-load').length) {
// disable lazy loader for things like google map pages
// add class='no-lazy-load' to main text page div
loadPageImages(pageSrcElements)
}
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) {
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type;
var maskX = Math.round(STATE.mediaView.maskX())
var maskY = Math.round(STATE.mediaView.maskY(self.section.key))
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, self.section.key))
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();
pageSrcElements = getLoadableElements(text.element)
pageImgs = pageSrcElements
.filter(function(el) {
return el.tagName.toLowerCase() === 'img'
})
.map(getOriginalStyleSize)
} else if(isVerticalPage && !isVerticalPageBuild()) {
text.text = '';
init();
pageSrcElements = getLoadableElements(text.element)
pageImgs = pageSrcElements
.filter(function(el) {
return el.tagName.toLowerCase() === 'img'
})
.map(getOriginalStyleSize)
}
Tween(mask, 0, {x:maskX, y:maskY, width:maskWidth, height:maskHeight});
Tween(text, 0, {width:maskWidth});
updateResponsiveElements();
if(responsiveElements && 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() {
if(responsiveElements) {
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';
}
}
if(responsiveWidthElements) {
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];
var filename = img.getAttribute('data-src') ? img.getAttribute('data-src').replace(CDN_SSL_URI, '') : ''
if(filename && self.mediaItem.size.pageImages) {
// save inline style for when natural width/height loads
// then reset back to original w/h style when getNaturalSize fires
// remember that originalWidth/height is different than the natural size
var computedStyle = window.getComputedStyle(img)
var maxWidth = computedStyle.getPropertyValue('max-width')
var widthAttr = img.getAttribute('width')
var heightAttr = img.getAttribute('height')
if(!img.metaLoaded) {
placeholderInit = true
// calc placeholder size for initial load
var size = self.mediaItem.size.pageImages.filter(isSameSrc(filename))
var dims = size[0] || {}
var width = dims.width || img.naturalWidth
var height = dims.height || img.naturalHeight
var computedWidth = parseFloat(computedStyle.getPropertyValue('width'), 10) || widthAttr || width
var styleWidth = (computedWidth > maskWidth ? maskWidth : computedWidth) || maskWidth
var ratio = height / width
// used to set placeholder size before image load
img.style.width = styleWidth + 'px'
img.style.height = (ratio * styleWidth) + 'px'
// } else if(img.offsetWidth > maskWidth) {
// img.style.width = maskWidth + 'px'
} else {
if(img.originalWidth) {
img.style.width = img.originalWidth
} else if(widthAttr) {
img.style.width = widthAttr + 'px'
} else {
img.style.removeProperty('width')
}
if(img.originalHeight) {
img.style.height = img.originalHeight
} else if(heightAttr) {
img.style.height = heightAttr + 'px'
} else {
img.style.removeProperty('height')
}
if(maxWidth === 'none') img.style.maxWidth = '100%'
}
}
}
}
}
}
function imageLoaded(e) {
self.updateSpeed = 0;
loaded = true;
var retinaSize = RetinaResizeEngine({width:image.element.offsetWidth, height:image.element.offsetHeight, 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();
self.events.dispatchEvent(MEDIA_LOADED, {type:'featuredImage', id:imports.mediaItem.id, width:image.width, height:image.height});
}
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;
// this was causing page images to load multiple times ... and extra init()'s to be called
// esp in safari
// if(STATE.mediaView.width() < STATE.mediaView.height(self.section.key)) 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
self.state = imports.state
self.mediaItem = imports.mediaItem
if(!imports.mediaItem.thumb.length) {
MEDIA_MODEL[self.id].size.thumb.width = 1200
MEDIA_MODEL[self.id].size.thumb.height = 800
}
if(/mp4/.test(imports.mediaItem.thumb)) {
// alternative for animated gifs
var poster = new Sprite({type:'video'})
poster.element.setAttribute('muted', true)
poster.element.setAttribute('autoplay', true)
poster.element.setAttribute('loop', true)
poster.element.setAttribute('playsinline', true)
poster.element.setAttribute('type', 'video/mp4')
} else {
var poster = new Bitmap()
}
poster.alpha = 0
poster.zIndex = 1
var autoplay
var mask = new Sprite()
mask.element.className = "video.mask"
var caption
var video
var bigPlayIcon = new Bitmap()
var loader
var originalPosterWidth = imports.size.thumb.width
var originalPosterHeight = imports.size.thumb.height
var posterWidth = 0
var posterHeight = 0
var posterX = 0
var posterY = 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 videoMetadataLoaded = false
var posterLoaded = false
var _captionLocal
var _localEvents = imports.localEvents
var vimeoCursorMask
var state = imports.state
var hudTimeout
function hasLightboxButton() {
return STATE.lightboxSection &&
!LAYOUT_MODEL.lightboxGalleryBtnDisable &&
!LAYOUT_MODEL.lightboxVideoDisable
}
if(hasLightboxButton() && STATE.lightboxButtonsEnabled()) {
/*
var lightboxGalleryBtnAlignHorizontal
var lightboxGalleryBtnAlignVertical
var lightboxGalleryBtnHorizontalOffset
var lightboxGalleryBtnVerticalOffset
var lightboxGalleryBtnBlendMode
var lightboxGalleryBtnFont
var lightboxGalleryBtnFontSize
var lightboxGalleryBtnFontColor
var lightboxGalleryBtnRemoveText
var lightboxGalleryBtnAddText
*/
if(!self.mediaItem.disableLightbox) {
var mediaItemIndex = STATE.lightboxSection.media.indexOf(self.mediaItem.id)
var lightboxBtn = buildLightboxButton({
alignHorizontal:LAYOUT_MODEL.lightboxGalleryBtnAlignHorizontal || 'left',
alignVertical:LAYOUT_MODEL.lightboxGalleryBtnAlignVertical || 'top',
horizontalOffset:percentToPixels(LAYOUT_MODEL.lightboxGalleryBtnHorizontalOffset, stage.height),
verticalOffset:percentToPixels(LAYOUT_MODEL.lightboxGalleryBtnVerticalOffset, stage.height),
blendMode:LAYOUT_MODEL.lightboxGalleryBtnBlendMode || 'difference',
font:LAYOUT_MODEL.lightboxGalleryBtnFont || 'Helvetica',
fontSize:LAYOUT_MODEL.lightboxGalleryBtnFontSize || 12,
fontColor:LAYOUT_MODEL.lightboxGalleryBtnFontColor || '#999999'
})
lightboxBtn.zIndex = 1
lightboxBtn.text = mediaItemIndex > -1 ? (LAYOUT_MODEL.lightboxGalleryBtnRemoveText || '- Lightbox') : (LAYOUT_MODEL.lightboxGalleryBtnAddText || '+ Lightbox')
lightboxBtn.addEventListener('click', function(e) {
var idx = STATE.lightboxSection.media.indexOf(self.mediaItem.id)
var action
if(idx > -1) {
lightboxBtn.text = (LAYOUT_MODEL.lightboxGalleryBtnAddText || '+ Lightbox')
action = 'remove'
} else {
lightboxBtn.text = (LAYOUT_MODEL.lightboxGalleryBtnRemoveText || '- Lightbox')
action = 'add'
}
self.events.dispatchEvent('lightboxUpdateItem', {
action:action,
id:self.mediaItem.id
})
lightboxBtn.cursor = 'pointer'
})
self.addChild(lightboxBtn)
if(imports.section.isLightbox && !LAYOUT_MODEL.lightboxGalleryDownloadBtnDisable) {
var downloadBtn = buildLightboxButton({
alignHorizontal:LAYOUT_MODEL.lightboxDownloadBtnAlignHorizontal || 'right',
alignVertical:LAYOUT_MODEL.lightboxDownloadBtnAlignVertical || 'top',
horizontalOffset:percentToPixels(LAYOUT_MODEL.lightboxDownloadBtnHorizontalOffset, stage.height),
verticalOffset:percentToPixels(LAYOUT_MODEL.lightboxDownloadBtnVerticalOffset, stage.height),
blendMode:LAYOUT_MODEL.lightboxDownloadBtnBlendMode || 'difference',
font:LAYOUT_MODEL.lightboxDownloadBtnFont || 'Helvetica',
fontSize:LAYOUT_MODEL.lightboxDownloadBtnFontSize || 12,
fontColor:LAYOUT_MODEL.lightboxDownloadBtnFontColor || '#999999'
})
downloadBtn.text = LAYOUT_MODEL.lightboxDownloadBtnText || '↓'
downloadBtn.zIndex = 1
downloadBtn.addEventListener('click', function(e) {
self.events.dispatchEvent('lightboxDownloadOverlayOpen')
})
self.addChild(downloadBtn)
}
}
}
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('spacebarTogglePlay', spacebarTogglePlay)
_localEvents.addEventListener('destroy', destroy)
_localEvents.addEventListener('showCursor', showCursor)
_localEvents.addEventListener('hideCursor', hideCursor)
var captionText = getCaptionText(imports.mediaItem)
if(!caption && captionText !== '') {
caption = new Caption()
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)
}
function showCursor() {
if(!isSlideshowGallery(self.section)) {
poster.element.navigationCursor = true
mask.element.navigationCursor = true
}
if(video) video.element.navigationCursor = poster.element.navigationCursor
if(vimeoCursorMask) {
vimeoCursorMask.top.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.right.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.bottom.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.left.element.navigationCursor = poster.element.navigationCursor
}
}
function hideCursor() {
poster.element.navigationCursor = false
mask.element.navigationCursor = false
if(video) video.element.navigationCursor = poster.element.navigationCursor
if(vimeoCursorMask) {
vimeoCursorMask.top.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.right.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.bottom.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.left.element.navigationCursor = poster.element.navigationCursor
}
}
function childAdded() {
STATE.section(self.section)
if(!isSlideshowGallery(self.section)) {
poster.element.navigationCursor = true
mask.element.navigationCursor = true
}
poster.element.addEventListener('contextmenu', disable)
poster.element.addEventListener('dragstart', disable)
self.element.style['user-select'] = 'none'
mask.element.style['user-select'] = 'none'
poster.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(poster)
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'
if(captionText !== '') {
self.addChild(caption.container)
updateCaptionStyle()
}
if(showPosterImage(imports.mediaItem)) {
if(/mp4/.test(imports.mediaItem.thumb)) {
poster.element.addEventListener(METADATA_LOADED, function(e) {
imageLoaded()
this.muted = true
this.play()
})
poster.src = cdnMediaPath(imports.mediaItem.thumb, imports.mediaItem.demoFile)
} else {
poster.addEventListener(LOAD, imageLoaded)
if(imports.mediaItem.thumb.length) {
poster.src = cdnMediaPath(imports.mediaItem.thumb, imports.mediaItem.demoFile)
} else {
poster.src = ICONS + "videoLarge2.png"
}
}
} else if(!video) {
createVideoPlayer()
if(!STATE.overrides.videoAutoPlay || USER_AGENT === MOBILE || USER_AGENT === TABLET) {
video.setSource(imports.mediaItem.content, false)
}
showCaption(state)
}
}
self.unload = function unload() {
// mask.removeChild(video)
// video = null
}
self.play = function(autoplay) {
STATE.section(self.section)
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 if(!video) {
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) {
if(typeof video.disableUnmuteButton === 'function') 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 spacebarTogglePlay(e) {
if(e === self.id) {
if(!video || video.paused) {
self.play(true /* autoplay */)
} else if(video && !video.paused && video.src) {
video.pause()
}
} 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 mediaAutoPlay(e) {
// if((USER_AGENT === MOBILE && STATE.overrides.mobileAutoPlay) || (!isPod() && !isPad())) {
if(e === self.id) {
self.play()
updatePosition()
} 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()
}
// if(e !== self.id && video && video.src && !video.paused) video.pause()
}
function vimeoPointerEventsOff() {
if(isVimeo(imports.mediaItem)) {
video.pointerEvents = 'none'
}
}
function vimeoPointerEventsOn() {
if(isVimeo(imports.mediaItem)) {
video.pointerEvents = 'auto'
}
}
function bigPlayIconLoaded() {
STATE.section(self.section)
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 = poster.x + ((poster.width - 70) * 0.5)
bigPlayIcon.y = poster.y + ((poster.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 = poster.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 = poster.element.navigationCursor
self.video = video
video.addEventListener(VIMEO_METADATA_LOADED, onVimeoMetadataLoaded)
mask.addChild(video)
if(!isPod() && !isSlideshowGallery(self.section)) {
vimeoCursorMask = buildVimeoCursorMask()
mask.addChild(vimeoCursorMask.top)
mask.addChild(vimeoCursorMask.right)
mask.addChild(vimeoCursorMask.bottom)
mask.addChild(vimeoCursorMask.left)
vimeoCursorMask.top.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.right.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.bottom.element.navigationCursor = poster.element.navigationCursor
vimeoCursorMask.left.element.navigationCursor = poster.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({alwaysMuted:isSlideshowGallery(self.section), parent:mask, events:imports.localEvents})
if(/disabled/.test(LAYOUT_MODEL.navCursorType) || 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)
}
})
} else if(isPod() || isPad()) {
video.addEventListener(CLICK, function(e) {
video.hud.show()
clearTimeout(hudTimeout)
hudTimeout = setTimeout(function() {
if(!video.paused) video.hud.hide()
}, 3000)
})
video.hud.addEventListener(CLICK, function(e) {
video.hud.show()
clearTimeout(hudTimeout)
hudTimeout = setTimeout(function() {
if(!video.paused) video.hud.hide()
}, 3000)
})
}
video.element.navigationCursor = poster.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() {
STATE.section(self.section)
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)
// }
if(!isVimeo(imports.mediaItem) && video && (isPod() || isPad())) {
clearTimeout(hudTimeout)
hudTimeout = setTimeout(function() {
if(!video.paused) video.hud.hide()
}, 3000)
}
}
function metadataLoaded(e) {
videoMetadataLoaded = true
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) {
videoMetadataLoaded = true
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(poster, UPDATE_SPEED, {alpha:0, onComplete:function(){
poster.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() {
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type
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 = stage.width < LAYOUT_MODEL.screenWidthBreakpoint ?
firstValid(_captionLocal.captionFontSizeBreakpoint, STATE.overrides.captionFontSizeBreakpoint, _captionLocal.captionFontSize, STATE.overrides.captionFontSize) :
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((isSlideshowGallery(self.section) && /fill|fitWidth/.test(STATE.overrides.slideshowScaleType)) || (!isSlideshowGallery(self.section) && /fill/.test(STATE.overrides.imageScaleType))) {
alignVars.hOrigin = 0
alignVars.vOrigin = 0
alignVars.hRange = maskWidth // layoutCalcs.mediaView.width()
alignVars.vRange = maskHeight // layoutCalcs.mediaView.height(self.section.key)
} else if(/unifiedSite/.test(STATE.overrides.siteDisplayBehavior) || /^hScroll/.test(STATE.overrides.transitionType) || _captionLocal.captionAnchorTo === 'media item' || STATE.overrides.captionAnchorTo === 'media item') {
alignVars.hOrigin = Math.round(STATE.overrides.videoAutoPlay || STATE.overrides.vimeoDefault ? STATE.mediaView.maskX() + videoX : STATE.mediaView.maskX() + posterX)
alignVars.vOrigin = Math.round(STATE.overrides.videoAutoPlay || STATE.overrides.vimeoDefault ? STATE.mediaView.maskY(self.section.key) + videoY : STATE.mediaView.maskY(self.section.key) + posterY)
alignVars.hRange = STATE.overrides.videoAutoPlay || STATE.overrides.vimeoDefault ? videoWidth : posterWidth
alignVars.vRange = STATE.overrides.videoAutoPlay || STATE.overrides.vimeoDefault ? videoHeight : posterHeight
} 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(self.section.key)
}
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(e) {
if(USER_AGENT !== MOBILE) {
updateCaptionStyle()
showCaption(e)
} else {
caption.text = ''
caption.hide()
if(caption.scroll) caption.scroll.destroy()
}
}
function updateCaptionText(e) {
STATE.section(self.section)
if(/media/.test(_captionLocal.captionAnchorTo) || /media/.test(STATE.overrides.captionAnchorTo)) {
caption.text = plainTextToHtml(e)
} else {
caption.hide()
if(caption.scroll) caption.scroll.destroy()
}
}
function anchorIsMedia(anchor) {
return /media/.test(anchor)
}
function showCaption(newState) {
var isSlideshowCaption = isSlideshowGallery(self.section) && LAYOUT_MODEL.slideshowCaptions
if((posterLoaded || !showPosterImage(imports.mediaItem) || (autoplay && videoMetadataLoaded) || isSlideshowCaption) && newState && caption && imports.assetId === newState.assetId) {
state = newState
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type
var captionText = getCaptionText(imports.mediaItem)
caption.text = plainTextToHtml(captionText)
var anchorToMedia = anchorIsMedia(firstValid(imports.mediaItem.overrides.captionAnchorTo, STATE.overrides.captionAnchorTo))
if((!showPosterImage(imports.mediaItem) || posterLoaded) && anchorToMedia && (isSlideshowCaption || (state && state.mode && state.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(poster && LAYOUT_MODEL.imageRendering.optimizeQuality) poster.style['image-rendering'] = 'optimizeQuality'
if(poster && LAYOUT_MODEL.imageRendering.webkitOptimizeContrast) poster.style['image-rendering'] = '-webkit-optimize-contrast'
if(poster && BROWSER_NAME === 'Safari' && LAYOUT_MODEL.imageRendering.webkitBackfaceVisibility) poster.style['-webkit-backface-visibility'] = 'hidden'
layoutCalcs.activeMediaType = self.type
maskWidth = STATE.mediaView.maskWidth(self.width)
maskHeight = STATE.mediaView.maskHeight(self.height, self.section.key)
alignBigPlay()
showCaption(state)
Tween(mask, self.updateSpeed, {x:STATE.mediaView.maskX(), y:STATE.mediaView.maskY(self.section.key), 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) {
resizePoster()
}
if(videoLoaded) {
resizeVideo()
}
}
self.updatePosition = updatePosition
function imageLoaded() {
self.updateSpeed = 0
posterLoaded = true
updatePosition()
resizePoster()
if(loader) {
Tween(loader, UPDATE_SPEED, {alpha:0})
}
self.events.dispatchEvent(MEDIA_LOADED, {type:'posterImage', id:imports.mediaItem.id, width:originalPosterWidth, height:originalPosterHeight})
self.updateSpeed = UPDATE_SPEED
bigPlayIcon.addEventListener(LOAD, bigPlayIconLoaded)
bigPlayIcon.src = ICONS + 'play@2x.png'
showCaption(state)
if(BROWSER_NAME === 'Safari' && /hScroll/.test(STATE.overrides.transitionType)) {
// poster.element.setAttribute('data-pin-no-hover', true)
poster.element.setAttribute('nopin', 'nopin')
}
}
function resizePoster() {
STATE.section(self.section)
layoutCalcs.activeMediaType = self.type
maskWidth = STATE.mediaView.maskWidth(self.width)
maskHeight = STATE.mediaView.maskHeight(self.height, self.section.key)
var resize = Resize({}, 0, {
type:STATE.mediaView.imageScaleType(),
width:originalPosterWidth,
height:originalPosterHeight,
hRange:maskWidth,
vRange:maskHeight,
hAlign:STATE.mediaView.hAlign(),
vAlign:STATE.mediaView.vAlign(),
disableOrientationCheck:getOrientationCheck()
})
posterWidth = Math.ceil(resize.scale.width)
posterHeight = Math.ceil(resize.scale.height)
posterX = Math.floor(resize.align.x)
posterY = Math.floor(resize.align.y)
Tween(poster, self.updateSpeed, {
x: posterX,
y: posterY,
width: posterWidth,
height: posterHeight,
onComplete:function(){
setTimeout(function(){
STATE.section(self.section)
if(isSlideshowGallery(self.section)) {
/*dont show image*/
} else {
Tween(poster, 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, self.section.key)
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:getOrientationCheck()
})
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(undefined, self.section.key)
} else if(videoHeight > STATE.mediaView.maskHeight(undefined, self.section.key)) {
hudY = 0
hudWidth = STATE.mediaView.maskWidth()
hudHeight = STATE.mediaView.maskHeight(undefined, self.section.key)
}
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() {
STATE.section(self.section)
if(loader) {
loader.transition = 0
loader.x = ((STATE.mediaView.maskWidth(self.width) - loader.width) * 0.5)
loader.y = ((STATE.mediaView.maskHeight(self.height, self.section.key) - 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('spacebarTogglePlay', spacebarTogglePlay)
_localEvents.removeEventListener('destroy', destroy)
_localEvents.removeEventListener('showCursor', showCursor)
_localEvents.removeEventListener('hideCursor', hideCursor)
poster.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
var sectionChange = false
var section
var assetId
var path
var settings
var mediaItems
var event
var mouseOverThumbsOnce = false
var isModeChange = false
var _localEvents = vars.localEvents
var thumbsOpen
var savedThumbsPosition
var layoutChange = false
var sectionKey
var scrollbarParent
self.overlayView = new OverlayView(vars);
self.overlayView.zIndex = STATE.overlayView.zIndex;
self.lazyLoaderUpdate = function() {
// this is needed for calling from a scroll event in the section controller
if(self.thumbs && self.thumbs.lazyLoader) self.thumbs.lazyLoader.update()
}
if(/^unifiedSite|overlay/.test(STATE.overrides.siteDisplayBehavior)) {
scrollbarParent = vars.mediaView
vars.mediaView.addChild(self.overlayView)
} else {
scrollbarParent = vars.siteView
vars.siteView.addChild(self.overlayView);
}
_localEvents.addEventListener('UPDATE_CONTENT_HEIGHT', function(info) {
if(section) {
sectionKey = section.key
STATE.section(section)
}
if(STATE.overrides.thumbnailType === 'strip') {
self.overlayView.contentHeight = STATE.mediaView.zoneHeight(sectionKey)
self.overlayView.updatePosition()
} else if(info.thumbs) {
self.overlayView.contentHeight = info.thumbs
self.overlayView.updatePosition()
}
})
vars.siteEvents.addEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
// if(/^unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
// overlayControllerSiteUriChange called directly from MediaController
self.uriChange = overlayControllerSiteUriChange
// vars.siteEvents.addEventListener(SECTIONS_MODEL_CHANGE, unifiedSectionUpdate);
// } else {
// vars.siteEvents.addEventListener(SITE_URI_CHANGE, overlayControllerSiteUriChange);
vars.siteEvents.addEventListener(SECTIONS_MODEL_CHANGE, sectionUpdate);
// }
vars.siteEvents.addEventListener(SETTINGS_MODEL_CHANGE, settingsUpdate);
function updateOverlayViewPosition() {
if(self.thumbs && self.thumbs.getTotalHeight()) self.overlayView.contentHeight = self.thumbs.getTotalHeight()
self.overlayView.updatePosition()
}
function showThumbnails() {
self.overlayView.show()
if(self.thumbs) self.thumbs.show()
// if(/strip/gi.test(STATE.overrides.thumbnailType)) {
// self.thumbs.show()
// } else {
// self.overlayView.show()
// self.thumbs.show()
// }
}
function hideThumbnails() {
self.overlayView.hide()
self.thumbs.hide()
// if(/strip/gi.test(STATE.overrides.thumbnailType)) {
// self.thumbs.hide()
// } else {
// self.overlayView.hide()
// self.thumbs.hide()
// }
}
vars.siteEvents.addEventListener('UPDATE_CONTENT_HEIGHT', updateOverlayViewPosition);
vars.siteEvents.addEventListener('holdersBuilt', function() {
highlightThumb()
setScrollPosition()
})
self.destroy = function() {
if(self.thumbs) {
if(self.thumbs.scroll) self.thumbs.scroll.destroy()
if(self.thumbs.staticNav) self.thumbs.removeStaticNav()
}
if(/^unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
vars.mediaView.mask.removeChild(self.overlayView)
} else {
vars.siteView.removeChild(self.overlayView);
}
vars.siteEvents.removeEventListener(LAYOUT_MODEL_CHANGE, layoutModelChange);
// if(/^unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
// overlayControllerSiteUriChange called directly from MediaController
self.uriChange = overlayControllerSiteUriChange
// vars.siteEvents.removeEventListener(SECTIONS_MODEL_CHANGE, unifiedSectionUpdate);
// } else {
// vars.siteEvents.removeEventListener(SITE_URI_CHANGE, overlayControllerSiteUriChange);
vars.siteEvents.removeEventListener(SECTIONS_MODEL_CHANGE, sectionUpdate);
// }
vars.siteEvents.removeEventListener(SETTINGS_MODEL_CHANGE, settingsUpdate);
vars.siteEvents.removeEventListener('UPDATE_CONTENT_HEIGHT', updateOverlayViewPosition);
vars.siteEvents.removeEventListener('holdersBuilt', function() {
thumbHoldersBuilt()
setScrollPosition()
})
}
function unifiedSectionUpdate(e) {
if(e && e.field === 'thumb') {
sectionChange = true
self.overlayView.updatePosition(e);
checkThumbs({mode:mode, section:section});
if(self.thumbs) self.thumbs.resize();
}
}
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.section = section
self.overlayView.updatePosition(e);
checkThumbs({mode:mode, section:section});
if(self.thumbs) self.thumbs.resize();
}
section = e.section ? e.section : section;
self.overlayView.section = section
} else if(self.thumbs) {
//self.thumbs.hide()
hideThumbnails()
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);
if(e.action === 'changeTemplate') {
// checkThumbs triggerd by SectionController build
} else {
layoutChange = true
checkThumbs({mode:mode, section:section});
}
}
if(e && /paginated|static|thumbnail|menuWidth|menuAlignHorizontal|menuOffsetX|sitePaddingTop|sitePaddingRight|sitePaddingBottom|sitePaddingLeft/i.test(e.id)) {
sectionChange = true;
self.overlayView.updatePosition(e);
if(e.action === 'changeTemplate') {
// checkThumbs triggerd by SectionController build
} else {
layoutChange = true
checkThumbs({mode:mode, section:section});
}
if(self.thumbs) self.thumbs.resize();
}
}
self.resize = function(e) {
self.overlayView.updatePosition(e);
if(self.share) self.share.updatePosition(e);
if(self.inquiry) self.inquiry.updatePosition(e);
if(self.thumbs) self.thumbs.resize();
}
function overlayControllerSiteUriChange(e) {
if(e.info.isMediaViewStateChange || e.info.isModeChange) self.overlayView.updatePosition(e);
if(e.assetId) assetId = e.assetId;
if(e.section) STATE.section(e.section)
if(STATE.siteView.unifiedPageScroll() && /strip/.test(STATE.overrides.thumbnailType)) {
self.overlayView.position = 'fixed'
} else {
self.overlayView.position = 'absolute'
}
if(/inquiry|share|foto/.test(e.mode)) {
self.overlayView.contentHeight = STATE.mediaView.zoneHeight(e.section.key)
self.overlayView.show()
checkShare(e)
checkInquiry(e)
checkFotomoto(e)
} else {
// in case these overlays need to hide
checkShare(e)
checkInquiry(e)
checkFotomoto(e)
}
checkThumbs(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);
return true
}
return false
}
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) STATE.section(self.thumbs.section)
if(STATE.overrides.siteDisplayBehavior !== 'unifiedSiteScrollVertical') {
if(self.thumbs && !self.thumbs.scroll && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType)) {
if(info && info.isSectionChange && !info.isModeChange && hasMode('thumbs', mode)) {
if(STATE.siteView.unifiedPageScroll()) {
window.scrollTo(0, 0)
}
} else if(info && !info.isSectionChange && info.isModeChange && hasMode('thumbs', mode)) {
// console.log('open thumbs, restore thumbs position', savedThumbsPosition)
if(STATE.siteView.unifiedPageScroll()) {
// 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;
self.overlayView.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 || layoutChange)) {
// we only remove if its a section change
// should also be for layout changes??
//
//self.thumbs.hide()
//hideThumbnails()
if(self.thumbs.scroll) self.thumbs.scroll.destroy()
if(self.thumbs.lazyLoader) delete self.thumbs.lazyLoader
self.overlayView.removeChild(self.thumbs);
delete self.thumbs;
}
mediaItems = e.section.media
.filter(function(id) {
return id !== null // strange situation where null was in media array
})
.filter(function(id) {
return !isSpacer(getSectionById(id))
})
.map(function(mediaId) {
var mediaItem = mediaId < 10000 ?
fakeMediaItemFromSub(getSectionById(mediaId)) :
JSON.parse(JSON.stringify(getMediaById(mediaId)))
return mediaItem
})
.filter(function(mediaItem) {
return !!mediaItem && !mediaItem.slideshow
})
// wrong media item comes up when clicking on thumb. #1398
mediaItems.filter(function(mediaItem) {
return mediaItem.type !== 'link'
})
.forEach(function(mediaItem, id) {
mediaItem.assetId = id
})
if(e.section && e.section.thumb) {
settings = e.section.thumb;
if(!self.thumbs && mode.indexOf('thumbs') > -1 && mediaItems.length) {
if(STATE.overrides.thumbnailType === 'hPaginatedGrid') {
self.thumbs = new PaginatedThumbs({
assetId:assetId,
path:path,
mediaItems:mediaItems,
settings:settings,
events:vars.siteEvents,
localEvents:vars.localEvents,
parent:vars.siteView,
scrollbarParent: scrollbarParent,
section:section,
thumbnailOnly: STATE.overrides.thumbnailOnly,
isIndexSection: /*e.info ? e.info.isIndexSection :*/ isIndexSection(section)
})
self.overlayView.contentHeight = STATE.mediaView.zoneHeight(e.section.key)
} else {
self.thumbs = new ThumbsModule({
assetId:assetId,
path:path,
mediaItems:mediaItems,
settings:settings,
events:vars.siteEvents,
localEvents:vars.localEvents,
parent:vars.siteView,
scrollbarParent: scrollbarParent,
section:section,
thumbnailOnly: STATE.overrides.thumbnailOnly,
isIndexSection: /*e.info ? e.info.isIndexSection : */ isIndexSection(section)
});
self.overlayView.contentHeight = STATE.overrides.thumbnailType === 'strip' && STATE.overrides.siteDisplayBehavior === 'unifiedSiteScrollVertical' ?
STATE.mediaView.zoneHeight(e.section.key) :
self.thumbs.getTotalHeight()
}
self.thumbs.section = section;
self.thumbs.settings = settings;
self.overlayView.addChild(self.thumbs);
}
if(self.thumbs && mode.indexOf('thumbs') > -1 && (!self.thumbs.toggleState() || sectionChange)) {
setTimeout(function() {
stripDisplaceChange();
setScrollPosition(e)
// self.thumbs.show();
showThumbnails()
// 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(STATE.siteView.unifiedPageScroll() ||
(/^unifiedSite/.test(STATE.overrides.siteDisplayBehavior) && layoutCalcs.sectionDisplayMode === 'multiple') ||
STATE.overrides.thumbnailType === 'strip') {
// self.thumbs.hide();
hideThumbnails()
} 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 after media jumpToAsset
var hideDelay = UPDATE_SPEED * 500
setTimeout(function() {
// self.thumbs.hide();
hideThumbnails()
// 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
layoutChange = 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();
hideThumbnails()
}
function highlightThumb() {
if(self.thumbs) {
if(assetId > -1) {
self.thumbs.highlight(assetId);
} else {
self.thumbs.highlight(-1);
}
}
}
function checkShare(e) {
if(e.mode.indexOf('share') > -1) {
if(!self.share) {
self.share = new ShareView(Object.assign({}, vars, {section: e.section}))
self.share.pointerEvents = 'auto'
self.overlayView.addChild(self.share)
}
self.share.updateContent(e)
self.share.show()
return true
} else if(self.share) {
self.share.hide()
}
return false
}
function checkInquiry(e) {
if(e.mode.indexOf('inquiry') > -1) {
if(!self.inquiry) {
self.inquiry = new InquiryView(Object.assign({}, vars, {section: e.section}))
self.inquiry.pointerEvents = 'auto'
self.overlayView.addChild(self.inquiry)
}
self.inquiry.updateContent(e)
self.inquiry.show()
return true
} else if(self.inquiry) {
self.inquiry.hide()
}
return false
}
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
//if parent gallery has subTitle attach it to custom link
item.subTitle = sub.subTitle
} else {
item = {
size:{
content:{
width:0,
height:0
},
thumb:{
width:customThumb.size.width,
height:customThumb.size.height
},
featuredImage:{
width:0,
height:0
},
bytes:0
},
slideshow: sub.slideshow,
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;
}
/* global Tween, ViewProxy, STATE, BROWSER_NAME, CHILD_ADDED, UPDATE_SPEED, LAYOUT_MODEL */
function OverlayView(vars) { //eslint-disable-line
var self = new ViewProxy({events:vars.events})
self.zIndex = STATE.overlayView.zIndex
// not sure why this was set to overflow:hidden
// removing for the new paginated thumb nav arrows
self.overflow = /hPaginatedGrid/.test(STATE.overrides.thumbnailType) ? 'initial' : '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() {
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'
}})
}
var UPDATE_CONTENT_HEIGHT_DELAY = 20
self.updatePosition = function() {
setTimeout(function() {
if(self.section) {
self.sectionKey = self.section.key
STATE.section(self.section)
}
self.overflow = /hPaginatedGrid/.test(STATE.overrides.thumbnailType) ? 'initial' : 'hidden'
var overlayHeight =
STATE.overrides.siteDisplayBehavior && /^unifiedSite/.test(STATE.overrides.siteDisplayBehavior)
? self.contentHeight || 0
: STATE.overlayView.zoneHeight()
if(STATE.overrides.siteDisplayBehavior === 'unifiedSiteScrollVertical' && /strip/.test(STATE.overrides.thumbnailType)) {
overlayHeight = STATE.mediaView.zoneHeight(self.sectionKey)
}
Tween.defer(self, 0, {
x:STATE.overlayView.x(),
y:STATE.overlayView.y(self.sectionKey),
width:STATE.overlayView.zoneWidth(),
height:overlayHeight
})
self.updateSpeed = UPDATE_SPEED
}, UPDATE_CONTENT_HEIGHT_DELAY)
}
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'
STATE.section(vars.section)
function getNumberOfColumns(zoneWidth, maxCols, gap) {
var thumbWidth = THUMB_SIZES[STATE.overrides.thumbnailSize].width + gap
var cols = Math.floor((zoneWidth + gap) / thumbWidth)
if(cols < maxCols) maxCols = cols < 1 ? 1 : cols
return maxCols ? maxCols : cols
}
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(vars.section.key) - (verticalMargin * 2)
}
function getTotalThumbs() {
STATE.section(vars.section)
var zoneWidth = getZoneWidth()
var zoneHeight = getZoneHeight()
var gap = STATE.overrides.thumbnailGap
return getNumberOfColumns(zoneWidth, Infinity, gap) * getNumberOfRows(zoneHeight, gap)
}
self.mask = mask
self.section = vars.section
// 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() {
STATE.section(vars.section)
return thumbsModules ? STATE.mediaView.zoneHeight(self.section.key) : STATE.mediaView.height(self.section.key)
}
function handleNavIconDisplay(curPage) {
return function(staticNav) {
if(curPage === 0) {
staticNav.hide('prev')
} else if(curPage === thumbsModules.length - 1) {
staticNav.hide('next')
}
}
}
function buildStaticNav() {
STATE.section(vars.section)
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(self.section.key)
},
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]
if(prevPage) prevPage.push(mediaId)
return acc
}, [])
}
function buildThumbsModules() {
totalThumbs = getTotalThumbs()
pagesItems = getPagesItems(vars.mediaItems)
STATE.section(vars.section)
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,
paginatedHeight: STATE.mediaView.zoneHeight(self.section.key),
isIndexSection: vars.isIndexSection
})
})
}
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.section.key)
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.mediaView.zoneHeight(self.section.key)
})
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()
if(thumbsModules[curPage]) 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]
if(currentPage) 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) {
STATE.section(_mediaView.section)
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"
STATE.section(vars.section)
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.getTotalHeight = function() {
return thumbsStyle ? thumbsStyle.totalHeight : 0
}
self.currentThumb = 1
self.settings = vars.settings
self.section = vars.section
self.tile = tile
self.pointerEvents = 'auto'
self.isInit = true
self.element.setAttribute('class', 'Thumbs.container')
self.selectable = false
self.build = function() {
STATE.section(vars.section)
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|hPaginatedGrid/.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.overflow = '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(STATE.siteView.unifiedPageScroll() && (/native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll) && STATE.overrides.thumbnailType !== 'strip' && BROWSER_NAME !== 'MSIE') {
lazyVars.windowScroll = true
}
if(/slide/.test(LAYOUT_MODEL.thumbLoadEffect)) {
lazyVars.boundaryMultiplier = 0.9
}
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(!/^unified/.test(STATE.overrides.siteDisplayBehavior) || (USER_AGENT === MOBILE || USER_AGENT === TABLET)) {
// dont need scroll for unified page or unified site since the thumbs are full height and the page scrolls
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 - STATE.overlayView.zoneWidth()) {
// 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(STATE.siteView.unifiedPageScroll()) {
window.addEventListener("scroll", function(e){
if(self.lazyLoader) self.lazyLoader.update()
})
}
} else {
if(/^unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
// native scroll bar
window.addEventListener("scroll", function(e){
if(self.lazyLoader) self.lazyLoader.update()
})
} else if(STATE.siteView.unifiedPageScroll() && /fill|hMasonry|vMasonry/.test(STATE.overrides.thumbnailType) && (/native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
// native scroll bar
window.addEventListener("scroll", function(e){
// console.log('window scroll event', !!self.lazyLoader)
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(vars.section.key) + STATE.overrides.thumbnailScrollbarVerticalOffset,
property: 'translate',
rounded: STATE.overrides.thumbnailScrollbarRounded,
visibility: STATE.overrides.thumbnailScrollbarVisibility,
parent: vars.scrollbarParent
}
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(vars.section.key)
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) {
STATE.section(vars.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 hasLightboxButton(type) {
return STATE.lightboxSection &&
!LAYOUT_MODEL.lightboxThumbnailBtnDisable &&
((type === 'image' && !LAYOUT_MODEL.lightboxImageDisable) || (type === 'video' && !LAYOUT_MODEL.lightboxVideoDisable))
}
function makeHolders() {
STATE.section(vars.section)
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() {
STATE.section(vars.section)
var mediaItem = items[i]
if(mediaItem) {
var thumbScaleFactor = !/hPaginatedGrid/.test(STATE.overrides.thumbnailType) && mediaItem.overrides.thumbScaleFactor
var width = getThumbWidth(mediaItem)
var height = getThumbHeight(mediaItem)
var hRange = getHRange(!STATE.overrides.thumbnailMasonryMaintainOrder && thumbScaleFactor, STATE.overrides.thumbnailGap)
var vRange = getVRange(!STATE.overrides.thumbnailMasonryMaintainOrder && 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 && 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(mediaItem.assetId, vars.section.mediaItems.length - 1)
} else {
holder.index = mediaItem.assetId
}
if(/mp4/.test(holder.filename)) {
// alternative for animated gifs
holder.thumb = new Sprite({type:'video'})
holder.thumb.element.setAttribute('muted', true)
holder.thumb.element.setAttribute('autoplay', true)
holder.thumb.element.setAttribute('loop', true)
holder.thumb.element.setAttribute('playsinline', true)
holder.thumb.element.setAttribute('type', 'video/mp4')
} else {
holder.thumb = new Bitmap()
}
// attempts to retry a load after a fail
holder.thumb.attempts = 0
holder.thumb.selectable = false
holder.thumb.zIndex = 1
if(!mediaItem.disableLightbox && hasLightboxButton(mediaItem.type) && STATE.lightboxButtonsEnabled()) {
/*
var lightboxThumbnailBtnAlignHorizontal
var lightboxThumbnailBtnAlignVertical
var lightboxThumbnailBtnHorizontalOffset
var lightboxThumbnailBtnVerticalOffset
var lightboxThumbnailBtnBlendMode
var lightboxThumbnailBtnFont
var lightboxThumbnailBtnFontSize
var lightboxThumbnailBtnFontColor
var lightboxThumbnailBtnRemoveText
var lightboxThumbnailBtnAddText
*/
var mediaItemIndex = STATE.lightboxSection.media.indexOf(mediaItem.id)
var lightboxBtn = buildLightboxButton({
alignHorizontal:LAYOUT_MODEL.lightboxThumbnailBtnAlignHorizontal || 'right',
alignVertical:LAYOUT_MODEL.lightboxThumbnailBtnAlignVertical || 'top',
horizontalOffset:percentToPixels(LAYOUT_MODEL.lightboxThumbnailBtnHorizontalOffset, stage.height),
verticalOffset:percentToPixels(LAYOUT_MODEL.lightboxThumbnailBtnVerticalOffset, stage.height),
blendMode:LAYOUT_MODEL.lightboxThumbnailBtnBlendMode || 'difference',
font:LAYOUT_MODEL.lightboxThumbnailBtnFont || 'Helvetica',
fontSize:LAYOUT_MODEL.lightboxThumbnailBtnFontSize || 12,
fontColor:LAYOUT_MODEL.lightboxThumbnailBtnFontColor || '#999999'
})
lightboxBtn.zIndex = 5
lightboxBtn.text = mediaItemIndex > -1 ? (LAYOUT_MODEL.lightboxThumbnailBtnRemoveText || '- Lightbox') : (LAYOUT_MODEL.lightboxThumbnailBtnAddText || '+ Lightbox')
holder.lightboxBtn = lightboxBtn
holder.lightboxBtn.addEventListener('click', function(e) {
var idx = STATE.lightboxSection.media.indexOf(mediaItem.id)
var action
if(idx > -1) {
lightboxBtn.text = (LAYOUT_MODEL.lightboxThumbnailBtnAddText || '+ Lightbox')
if(self.section.isLightbox) {
holder.thumb.alpha = 0.15
}
action = 'remove'
} else {
lightboxBtn.text = (LAYOUT_MODEL.lightboxThumbnailBtnRemoveText || '- Lightbox')
if(self.section.isLightbox) {
holder.thumb.alpha = 1
}
action = 'add'
}
holder.lightboxBtn.cursor = 'pointer'
self.events.dispatchEvent('lightboxUpdateItem', {
action:action,
id:mediaItem.id
})
})
holder.addChild(lightboxBtn)
if(!LAYOUT_MODEL.lightboxThumbnailDownloadBtnDisable && self.section.isLightbox) {
var downloadBtn = buildLightboxButton({
alignHorizontal:LAYOUT_MODEL.lightboxThumbnailDownloadBtnAlignHorizontal || 'right',
alignVertical:LAYOUT_MODEL.lightboxThumbnailDownloadBtnAlignVertical || 'top',
horizontalOffset:percentToPixels(LAYOUT_MODEL.lightboxThumbnailDownloadBtnHorizontalOffset, stage.height),
verticalOffset:percentToPixels(LAYOUT_MODEL.lightboxThumbnailDownloadBtnVerticalOffset, stage.height),
blendMode:LAYOUT_MODEL.lightboxThumbnailDownloadBtnBlendMode || 'difference',
font:LAYOUT_MODEL.lightboxThumbnailDownloadBtnFont || 'Helvetica',
fontSize:LAYOUT_MODEL.lightboxThumbnailDownloadBtnFontSize || 12,
fontColor:LAYOUT_MODEL.lightboxThumbnailDownloadBtnFontColor || '#999999'
})
downloadBtn.text = LAYOUT_MODEL.lightboxThumbnailDownloadBtnText || '↓'
downloadBtn.zIndex = 5
downloadBtn.addEventListener('click', function(e) {
self.events.dispatchEvent('lightboxDownloadOverlayOpen')
})
holder.addChild(downloadBtn)
}
}
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(STATE.overrides.thumbnailType !== 'strip') {
if(LAYOUT_MODEL.thumbLoadEffect === 'slideUp') {
holder.alpha = 0
holder.translateX = 0
holder.translateY = 70
} else if(LAYOUT_MODEL.thumbLoadEffect === 'slideDown') {
holder.alpha = 0
holder.translateX = 0
holder.translateY = -70
}
}
if(mediaItem.type === VIDEO && STATE.overrides.thumbnailVideoPlayIcon) {
// make sure its not default vimeo
if(!(isVimeo(mediaItem) && STATE.overrides.vimeoDefault && vars.thumbnailOnly)) {
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)
// holder.hit.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 = 0 // 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 ? 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 !== 'link' /* && (mediaItem.type === 'image' || mediaItem.type === 'video')*/) {
// disable click for thumbnail
} else {
if(!isPod() && !isPad()) {
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'
// }
STATE.section(self.section)
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() {
STATE.section(vars.section)
if(/fill|hMasonry|vMasonry|hPaginatedGrid/.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: titleBlock ? titleBlockHeight + percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height) - STATE.overrides.thumbnailTitleBlockTopMargin : percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height),
masonry: STATE.overrides.thumbnailMasonry,
tile: tile,
parent: self,
grid: grid,
gap: STATE.overrides.thumbnailGap,
maxGap: maxGap,
events: vars.events,
localEvents: vars.localEvents,
isIndexSection: vars.isIndexSection,
section: vars.section
})
} 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)
var mediaViewSize = layoutCalcs.mediaView.size
dock = new Dock(
self,
{
get x() {
return mediaViewSize.x()
},
get y() {
return mediaViewSize.y(vars.section.key)
},
get width() {
return mediaViewSize.width()
},
get height() {
// for tomorrow us - sometimes this is getting stage.height from zoneHeight
var height = STATE.mediaView.zoneHeight(vars.section.key)
return height
}
},
{
side:STATE.overrides.thumbnailSide,
align:'left',
pOffset:pOffset,
margin:0,
reveal:reveal,
updateSpeed:UPDATE_SPEED
}
)
thumbsStyle = new ThumbsStrip({
section: vars.section,
dock:dock,
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,
localEvents: vars.localEvents
})
}
}
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) {
STATE.section(vars.section)
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:1})
}
}
Tween(e.target, 0.35, {alpha:getHoverAlpha(), backgroundColor:STATE.overrides.thumbnailHoverColor})
}
function onMouseOut(e) {
STATE.section(vars.section)
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 {
STATE.section(vars.section)
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) {
console.log('load error', 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) {
if(STATE.overrides.vimeoDefault) {
vimeo.zIndex = 5
Tween(vimeo, UPDATE_SPEED, {alpha:1})
Tween(thumb, UPDATE_SPEED, {alpha:0})
vimeo.setSource(mediaItem.content)
} else {
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
STATE.section(vars.section)
if(thumbsStyle && (!holder.loaded || !holder.thumb.src)) {
if(/mp4/.test(holder.filename)) {
holder.thumb.element.addEventListener(METADATA_LOADED, function(e) {
thumbsStyle.thumbLoaded.call(holder.thumb)
this.muted = true
this.play()
})
holder.thumb.src = holder.filename
} else {
holder.thumb.addEventListener(LOAD, thumbsStyle.thumbLoaded)
if(exceedsSizeCheck(holder.thumb) || STATE.overrides.thumbnailFullRes) {
holder.thumb.src = holder.original
} else {
holder.thumb.src = holder.filename
}
}
holder.thumb.addEventListener(ERROR, loadError)
holder.thumb.alpha = 0
holder.loaded = true
holder.addChild(holder.thumb)
}
if(mediaItem.type === VIDEO && !holder.vimeo && !holder.video) {
if(isVimeo(mediaItem) && ((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(isVimeo(holder.mediaItem)) {
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
// }
// STATE.section(vars.section)
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) {
STATE.section(vars.section)
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) {
STATE.section(vars.section)
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
setTimeout(function() {
STATE.section(vars.section)
if(dock) dock.resize(0)
if(dock) dock.show()
self.resize()
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) {
// thumbnails are blank or set to the section height when global thumbs to none and section.thumb.thumbsFirst === true
// having to set defineThumbsStyle because mysterious bug where it was not defined - seems like a race condition of sorts
defineThumbsStyle()
}
if(thumbsStyle) thumbsStyle.resize()
if(self.scroll) {
self.scroll.resize()
}
}
self.build()
return self
}
function getIndexLabelPosition() {
var indexLabelPosition = STATE.overrides.thumbnailLabelPosition
if(isPod()) indexLabelPosition = firstValid(STATE.overrides.thumbnailLabelPositionMobile, STATE.overrides.thumbnailLabelPosition)
if(isPad()) indexLabelPosition = firstValid(STATE.overrides.thumbnailLabelPositionTablet, STATE.overrides.thumbnailLabelPosition)
return indexLabelPosition
}
function getStdLabelPosition() {
var stdLabelPosition = STATE.overrides.thumbnailStdLabelPosition
if(isPod()) stdLabelPosition = firstValid(STATE.overrides.thumbnailStdLabelPositionMobile, STATE.overrides.thumbnailStdLabelPosition)
if(isPad()) 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.overlayView.zoneWidth() - (horizontalMargin * 2)
}
function getNumberOfColumns(zoneWidth, maxCols, gap) {
maxCols = /fill|hPaginatedGrid/.test(STATE.overrides.thumbnailType) ? 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
STATE.section(vars.section)
function arrange() {
STATE.section(vars.section)
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') {
var labelHeight = items[i].label.element.offsetHeight
switch(labelPosition) {
case 'top':
items[i].label.y = firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
items[i].thumb.y = labelHeight + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
items[i].hit.y = labelHeight + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
// #1247 add in label height to total holder height / backgroundColor for top and bottom labels
items[i].height = height + labelHeight + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
break
case 'over':
case 'hover':
items[i].label.y = (height - labelHeight) * 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) - labelHeight + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 0)
} else {
items[i].label.y = (height - labelHeight) * 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 + labelHeight + firstValid(STATE.overrides.thumbnailLabelVerticalOffset, 5)
break
}
}
}
Tween(items[i], vars.parent.updateSpeed, {x:position.x, y:position.y, onComplete:function(){
if(LAYOUT_MODEL.thumbLoadEffect === 'none' || LAYOUT_MODEL.thumbLoadEffect === undefined) Tween(this, UPDATE_SPEED, {alpha:1})
if(this.lastItem && vars.parent.lazyLoader && vars.parent.holdersBuilt) vars.parent.lazyLoader.update()
}})
}
}
this.resize = function(e) {
STATE.section(vars.section)
var titleBlockHeight = 0
var totalHeight
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: titleBlock ? titleBlockHeight + percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height) - STATE.overrides.thumbnailTitleBlockTopMargin : percentToPixels(STATE.overrides.thumbnailVerticalMargin, stage.height),
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 thumbScaleFactor = !/hPaginatedGrid/.test(STATE.overrides.thumbnailType) && mediaItem.overrides.thumbScaleFactor
var width = getThumbWidth(mediaItem)
var height = getThumbHeight(mediaItem)
var hRange = getHRange(!STATE.overrides.thumbnailMasonryMaintainOrder && thumbScaleFactor, STATE.overrides.thumbnailGap)
var vRange = getVRange(!STATE.overrides.thumbnailMasonryMaintainOrder && 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 && 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 ? 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
}
// not sure if this is needed ... but causes problems for paginated thumbs
// container.transition = 0
// container.x = 0
// container.y = 0
if(tile.items.length) arrange()
setTimeout(function() {
STATE.section(vars.section)
var bounds = tile.getBounds()
var align = new AlignEngine({
hRange:STATE.overlayView.zoneWidth(),
vRange:STATE.overrides.thumbnailType === 'hPaginatedGrid' ? STATE.mediaView.zoneHeight(vars.section.key) : STATE.overlayView.zoneHeight(vars.section.key),
width:tile.perpLength,
height:bounds.height,
hAlign:'center',
vAlign:STATE.overrides.thumbnailType === 'hPaginatedGrid' ? 'center' : 'top',
hOffset:0,
vOffset:STATE.overrides.thumbnailType === 'hPaginatedGrid' ? 0 : 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) {
if(STATE.overrides.thumbnailType === 'hPaginatedGrid') {
mask.gridContainer.y = Math.floor(align.y)
} else {
mask.gridContainer.y = 0
mask.grid.y = titleBlockHeight + vars.verticalMargin
}
// }
container.width = STATE.overlayView.zoneWidth()
mask.width = STATE.overlayView.zoneWidth()
mask.grid.width = tile.perpLength
mask.gridContainer.width = tile.perpLength
if(STATE.overrides.thumbnailType === 'hPaginatedGrid') {
var zoneHeight = STATE.mediaView.zoneHeight(vars.section.key)
container.height = zoneHeight
mask.height = zoneHeight
self.height = zoneHeight
mask.grid.height = bounds.height
mask.gridContainer.height = bounds.height
totalHeight = zoneHeight
} else if(/^unifiedSite/.test(STATE.overrides.siteDisplayBehavior)) {
// need the contentHeight to adjust down to the smallest size for content layout higher up
var boundsHeight = !isIndexSection(vars.section) && (STATE.mediaView.height(vars.section.key) > bounds.height) ?
STATE.mediaView.height(vars.section.key) :
bounds.height
var contentHeight = boundsHeight + vars.verticalMargin
totalHeight = titleBlockHeight + (contentHeight + vars.verticalMargin) // + percentToPixels(LAYOUT_MODEL.sitePaddingBottom, stage.height)
container.height = totalHeight
mask.height = totalHeight
mask.grid.height = contentHeight
mask.gridContainer.height = totalHeight
} else if(STATE.siteView.unifiedPageScroll() && ((USER_AGENT !== MOBILE && isPod()) || (USER_AGENT !== TABLET && isPad()) || /native/.test(STATE.overrides.thumbnailScrollType) || LAYOUT_MODEL.globalSmoothScroll)) {
// keeping this for unified page scroll height hacks
// we know its the same as unifiedSite
var contentHeight = bounds.height + vars.verticalMargin
contentHeight = contentHeight > STATE.mediaView.height() ? contentHeight : STATE.mediaView.height()
totalHeight = titleBlockHeight + (contentHeight + vars.verticalMargin) // + percentToPixels(LAYOUT_MODEL.sitePaddingBottom, stage.height)
container.height = totalHeight
mask.height = totalHeight
mask.grid.height = contentHeight
mask.gridContainer.height = totalHeight
} else {
totalHeight = titleBlockHeight + (bounds.height + vars.verticalMargin)
container.height = STATE.overlayView.zoneHeight()
mask.height = container.height
self.height = container.height
mask.grid.height = bounds.height + vars.verticalMargin
mask.gridContainer.height = totalHeight
}
self.totalHeight = totalHeight
vars.localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', { thumbs: totalHeight })
container.resizeThumbVideo()
}, 20)
}
this.thumbLoaded = function(e) {
if(this.parent.loader) this.parent.removeChild(this.parent.loader)
if(LAYOUT_MODEL.thumbLoadEffect === 'slideUp' || LAYOUT_MODEL.thumbLoadEffect === 'slideDown') Tween(this.parent, 0.85, {alpha:1, translateY:0})
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(e) {
STATE.section(vars.section)
if(side === 'top' || side === 'bottom') {
container.width = STATE.overlayView.zoneWidth() - (vars.horizontalMargin * 2)
mask.width = STATE.overlayView.zoneWidth() - (vars.horizontalMargin * 2)
} else {
mask.height = STATE.overlayView.zoneHeight(vars.section.key) - (vars.verticalMargin * 2)
container.height = STATE.overlayView.zoneHeight(vars.section.key) - (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
vars.localEvents.dispatchEvent('UPDATE_CONTENT_HEIGHT', { thumbs: /top|bottom/.test(side) ? bounds.height : mask.height })
// setTimeout(function(){
vars.dock.resize()
// },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 = 400,
inquiry,
title,
line,
info,
preview,
form,
mediaItem,
yourName,
yourEmail,
message,
submit,
closeHit,
responseMessage = new Sprite(),
_localEvents = vars.localEvents;
var previewWidth
var previewHeight
var margin = 10
self.section = vars.section
self.updateSpeed = 0;
self.backgroundColor = toRgba(LAYOUT_MODEL.overlayColor, LAYOUT_MODEL.overlayAlpha);
self.zIndex = 100;
self.alpha = 0;
self.visible = false;
self.element.style.overflowY = 'auto'
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);
STATE.section(self.section)
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.element.offsetHeight + 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.width = submit.element.offsetWidth
submit.x = form.element.offsetWidth - 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.element.offsetHeight + 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();
title.height = title.element.offsetHeight
_localEvents.addEventListener(INQUIRY_FORM_SENT, inquiryResponse);
}
function previewLoaded(e) {
var retinaSize = RetinaResizeEngine({width:this.width, height:this.element.offsetHeight, filename:preview.src});
var resize = Resize(null, 0, {
type:'fit',
width:retinaSize.width,
height:retinaSize.height,
hRange:200,
vRange:isPod() ? 200 : 300,
hAlign:0,
vAlign:0,
disableOrientationCheck:true
})
previewWidth = Math.ceil(resize.scale.width)
previewHeight = Math.ceil(resize.scale.height)
this.width = previewWidth
this.height = previewHeight
Tween(this, UPDATE_SPEED, {alpha:1});
self.updatePosition()
}
function buildFormInput(label) {
STATE.section(self.section)
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;
title.height = title.element.offsetHeight
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) {
STATE.section(self.section)
self.x = 0;
self.y = 0;
width = STATE.mediaView.width() > 573 ? 573 : STATE.mediaView.width();
height = STATE.mediaView.height(self.section.key) > 400 ? 400 : STATE.mediaView.height(self.section.key);
title.height = title.element.offsetHeight
submit.width = submit.element.offsetWidth
line.y = title.height + 10;
if(SETTINGS_MODEL.inquiryInfo) {
info.y = title.height + 20;
preview.x = 2;
preview.y = info.y + info.element.offsetHeight + 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.element.offsetHeight + 10;
} else {
form.x = 222;
form.y = preview.y;
}
} else {
// narrow screen
// probably should center stuff
form.transition = 0
form.x = margin
form.width = STATE.mediaView.width() - (margin * 2)
form.y = preview.y + previewHeight + 10;
preview.x = (layoutCalcs.mediaView.width() - preview.width) * 0.5;
title.x = (layoutCalcs.mediaView.width() - title.element.offsetWidth) * 0.5;
yourName.input.width = form.width * 0.5 - margin;
yourEmail.input.width = form.width * 0.5;
message.input.width = form.width;
yourEmail.x = form.width * 0.5;
line.alpha = 0
}
submit.x = form.element.offsetWidth - submit.width;
if(SETTINGS_MODEL.inquiryInfo) {
responseMessage.x = form.x;
responseMessage.y = info.y + info.element.offsetHeight + 10;
} else {
responseMessage.x = form.x;
responseMessage.y = 40;
}
if(self.updateSpeed === 0) {
self.width = STATE.mediaView.width();
self.height = STATE.mediaView.height(self.section.key);
inquiry.x = ((STATE.mediaView.width() - width) * 0.5);
inquiry.y = ((STATE.mediaView.height(self.section.key) - height) * 0.5);
inquiry.width = width;
inquiry.height = height;
} else {
Tween(self, self.updateSpeed, {
width:STATE.mediaView.width(),
height:STATE.mediaView.height(self.section.key)
});
Tween(inquiry, self.updateSpeed, {
x:(STATE.mediaView.width() - width) * 0.5,
y:(STATE.mediaView.height(self.section.key) - height) * 0.5,
width:width,
height:height
});
}
closeHit.width = STATE.mediaView.width();
closeHit.height = STATE.mediaView.height(self.section.key);
self.updateSpeed = UPDATE_SPEED;
};
self.show = function() {
self.updateSpeed = 0;
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.updatePosition();
};
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.element.offsetHeight + 10;
} else {
preview.x = 2;
preview.y = title.height + 20;
}
preview.src = getThumbQuery(200, 200, 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 = 400,
share,
title,
line,
preview,
form,
mediaItem,
facebookShareBtn,
twitterShareBtn,
emailShareBtn,
closeHit,
responseMessage = new Sprite(),
_localEvents = vars.localEvents;
var previewWidth
var previewHeight
self.section = vars.section
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: 67,
height: 20
}
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);
title.height = title.element.offsetHeight
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.element.offsetHeight, filename:preview.src});
var resize = Resize(null, 0, {
type:'fit',
width:retinaSize.width,
height:retinaSize.height,
hRange:200,
vRange:isPod() ? 200 : 300,
hAlign:0,
vAlign:0,
disableOrientationCheck:true
})
previewWidth = Math.ceil(resize.scale.width)
previewHeight = Math.ceil(resize.scale.height)
this.width = previewWidth
this.height = previewHeight
Tween(this, UPDATE_SPEED, {alpha:1});
self.updatePosition()
}
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) {
STATE.section(self.section)
self.x = 0;
self.y = 0;
width = STATE.mediaView.width() > 573 ? 573 : STATE.mediaView.width();
height = STATE.mediaView.height(self.section.key) > 400 ? 400 : STATE.mediaView.height(self.section.key);
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 {
// narrow screen
// probably should center stuff
form.transition = 0
form.x = (layoutCalcs.mediaView.width() - form.width) * 0.5;
form.y = preview.y + previewHeight + 10;
preview.x = (layoutCalcs.mediaView.width() - preview.width) * 0.5;
title.x = (layoutCalcs.mediaView.width() - title.element.offsetWidth) * 0.5;
facebookShareBtn.x = (form.width - 67) * 0.5
twitterShareBtn.x = (form.width - 20) * 0.5
emailShareBtn.x = (form.width - 20) * 0.5
line.alpha = 0
}
if(self.updateSpeed === 0) {
self.width = STATE.mediaView.width();
self.height = STATE.mediaView.height(self.section.key);
share.x = ((STATE.mediaView.width() - width) * 0.5);
share.y = ((STATE.mediaView.height(self.section.key) - height) * 0.5);
share.width = width;
share.height = height;
} else {
Tween(self, self.updateSpeed, {
width:STATE.mediaView.width(),
height:STATE.mediaView.height(self.section.key)
});
Tween(share, self.updateSpeed, {
x:(STATE.mediaView.width() - width) * 0.5,
y:(STATE.mediaView.height(self.section.key) - height) * 0.5,
width:width,
height:height
});
}
closeHit.width = STATE.mediaView.width();
closeHit.height = STATE.mediaView.height(self.section.key);
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;
var titleHeight = title.element.offsetHeight
if(preview) {
share.removeChild(preview);
}
preview = new Bitmap();
preview.alpha = 0;
preview.x = 2;
preview.y = titleHeight + 20;
preview.width = 200;
preview.src = getThumbQuery(200, 200, mediaItem.thumb||mediaItem.content, mediaItem.demoFile);
form.y = titleHeight + 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) { // eslint-disable-line
var self = new ControllerProxy({parentView:vars.parentView, parentController:vars.parentController, events:vars.siteControllerEvents})
var isInit = true
var isInitUri = true
var isInitResize = true
var initResizeSpeed = 350
var sectionsModelChangeTimer
var isOrientationChange = false
var autoCloseUriTimer
var disableMouseOut = false
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() {
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() {
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(0)
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 {
if(USER_AGENT === MOBILE && (isOrientationChange || isInitResize)) {
self.menuView.menuText.rebuild({model:getMenuData()})
isOrientationChange = false
// } else {
// self.menuView.menuText.display = 'block'
// self.menuView.display = 'block'
}
self.menuView.menuText.updatePosition(0)
self.menuView.updatePosition()
if(USER_AGENT !== MOBILE && USER_AGENT !== TABLET && !self.menuView.dock.toggleState() && !LAYOUT_MODEL.isMenuScrollReveal) {
// some sort of overlay menu glitch hack thing stuff
setTimeout(function() {
self.menuView.display = 'none'
}, initResizeSpeed)
}
}
initResizeSpeed = 50
isInitResize = false
})
self.events.addEventListener(SITE_URI_CHANGE, menuSiteUriChange)
self.events.addEventListener('SITE_URI_CHANGE_PASSIVE', setActiveMenuItem)
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(0)
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() {
self.menuView.menuText.display = 'block'
self.menuView.display = 'block'
self.menuView.menuText.updatePosition(0)
self.menuView.updatePosition()
})
var menuRevealTimer
var windowScrollY = 0
var isScrolling = false
var isInitScroll = true
var scrollOpenDock = LAYOUT_MODEL.menuRevealOnInit !== undefined ? LAYOUT_MODEL.menuRevealOnInit : true
if(LAYOUT_MODEL.menuRevealOnInit === false) {
self.menuView.dock.hide()
}
function getWindowScrollY(docHeight) {
if(window.scrollY > docHeight) {
return docHeight
} else if(window.scrollY < 0) {
return 0
} else {
return window.scrollY
}
}
window.addEventListener("scroll", function() {
disableMouseOut = false
if(LAYOUT_MODEL.isMenuScrollReveal && /top/.test(STATE.menuView.placement())) {
isScrolling = true
clearTimeout(menuRevealTimer)
menuRevealTimer = setTimeout(function() {
// calc scroll percent from window
// if scroll percent matches setting
// then dock.open
var docHeight = STATE.siteView.height() - stage.height
windowScrollY = getWindowScrollY(docHeight)
if(LAYOUT_MODEL.menuRevealOnInit !== true && isInitScroll) {
// for safari, init scroll events firing for page scroll/deeplink
self.menuView.dock.hide()
scrollOpenDock = false
} else if(isRevealMenuOnScrollPercent()) {
disableMouseOut = true
animateScrollReveal(windowScrollY)
} else if(LAYOUT_MODEL.is