Blood Stripes (2024)

'; this.parent.appendChild(this.screen); }, show: function () { gsap.to(this.screen, { duration: 0.3, opacity: 1, ease: 'Power4.easeOut' }); }, exists: function () { return this.screen ? true : false; }, close: function () { if (this.screen) { this.parent.removeChild(this.screen); this.screen = null; } }, init: function (element) { if (!element) return; if (!this.exists()) { this.parent = element; this.append(element); this.show(); } } }; /* GallerySlider - Programmed specifically for the Marines Gallery of Hero images managed by thumbs carousel, all values are set */ var GallerySlider = GallerySlider || function () { var element = document.getElementById('gallery-of-hero-photos'); if (!element) return; var debug = false; var view = document.getElementById('hero-slider'); var views = view.getElementsByClassName('item'); var prevHero = document.getElementById('gallery-control-prev'); var nextHero = document.getElementById('gallery-control-next'); if (!view || !views || views.length === 0) return; var carousel = document.getElementById('carousel-of-thumbs'); var wrapper = document.getElementById('thumbs-slider'); var thumbs = wrapper.getElementsByClassName('item'); var prev = document.getElementById('thumbs-carousel-prev'); var next = document.getElementById('thumbs-carousel-next'); if (!carousel || !wrapper) return; var isAnimating, currentIndex, jump, totalJumps, isPreview = true; function setCurrentState() { isAnimating = false; currentIndex = 0; totalJumps = 0; jump = 0; for (var j = 0, len = views.length; j < len; j++) { if (views[j].classList.contains('current')) { currentIndex = j; jump = Math.floor(currentIndex / 4); break; } } // when we navigated thumbs & destroyed a slider // remember position if (window.galleryStore.jump > 0) { jump = window.galleryStore.jump; } else if (window.galleryStore.jump === -1) { jump = 4; } gsap.set(views[currentIndex], { x: 0, opacity: 1, visibility: 'visible' }); gsap.to(wrapper, { duration: 0.5, x: -(jump * 100) + '%', ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }); } function setCarouselWidth() { if (thumbs && thumbs.length > 0) { totalJumps = Math.ceil(thumbs.length / 4); gsap.set(wrapper, { x: 0, width: (totalJumps * 100) + '%' }); } } function moveThumbsRight() { if (jump > 0) { jump--; gsap.to(wrapper, { duration: 0.5, x: -(jump * 100) + '%', ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }); } else { window.galleryStore.batchBy = 'thumb'; fetchPreviousBatch(); } } function moveThumbsLeft() { if (jump + 1 < totalJumps) { jump++; gsap.to(wrapper, { duration: 0.5, x: -(jump * 100) + '%', ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }); } else { window.galleryStore.batchBy = 'thumb'; fetchNextBatch(); } } function slideIn(e) { if (!isAnimating) { isAnimating = true; scrollToBanner(); var thumb = e.currentTarget; if (thumb.index !== currentIndex) { while (!thumb.classList.contains('item')) { thumb = thumb.parentNode; } if (thumb.index > currentIndex) { slideInFromRight(thumb); } else { slideInFromLeft(thumb); } } isAnimating = false; } } function slideInFromLeft(thumb) { if (debug) console.log('slideInFromLeft > ', thumb); DynamicAnalytics.Send("PHOTO", String(thumb.data.id), thumb.data.caption, thumb.data.share.replace("//", "").replace(window.location.protocol, "").replace(window.location.host, "")); if (debug) console.log('current slide', views[currentIndex]); thumb.classList.add('current'); var timeline = gsap.timeline({ paused: true, onComplete: function () { views[currentIndex].setAttribute('style', ''); thumbs[currentIndex].classList.remove('current'); views[currentIndex].classList.remove('current'); currentIndex = thumb.index; thumb.view.classList.add('current'); GalleryTemplate.update(thumb.view.data); relatedSlider.update(thumb.view.news); isAnimating = false; } }); timeline .addLabel('init') .set(thumb.view, { x: '-100%', opacity: 1, visibility: 'visible' }, 'init') .set(views[currentIndex], { x: '0%', opacity: 1, visibility: 'visible' }, 'init') .addLabel('move') .to(thumb.view, { duration: 0.7, x: '0%', ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }, 0.1, 'move') .to(views[currentIndex], { duration: 0.7, x: '100%', ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }, 0.1, 'move'); timeline.play(); } function slideInFromRight(thumb) { if (debug) console.log('slideInFromRight > ', thumb); DynamicAnalytics.Send("PHOTO", String(thumb.data.id), thumb.data.caption, thumb.data.share.replace("//", "").replace(window.location.protocol, "").replace(window.location.host, "")); if (debug) console.log('current slide', views[currentIndex]); thumb.classList.add('current'); var timeline = gsap.timeline({ paused: true, onComplete: function () { views[currentIndex].setAttribute('style', ''); thumbs[currentIndex].classList.remove('current'); views[currentIndex].classList.remove('current'); currentIndex = thumb.index; thumb.view.classList.add('current'); GalleryTemplate.update(thumb.view.data); relatedSlider.update(thumb.view.news); isAnimating = false; } }); timeline .addLabel('init') .set(thumb.view, { x: '100%', opacity: 1, visibility: 'visible' }, 'init') .set(views[currentIndex], { x: '0%', opacity: 1, visibility: 'visible' }, 'init') .addLabel('move') .to(thumb.view, { duration: 0.7, x: '0%', ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }, 0.1, 'move') .to(views[currentIndex], { duration: 0.7, x: '-100%', ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }, 0.1, 'move'); timeline.play(); } function fetchNextBatch() { if (galleryEndPage471 !== totalpages471) { LoadingScreen.init(view); window.galleryStore.mode = 'next'; window.galleryStore.jump = jump + 1; GalleryLoadNextPage(); } else { if (debug) { console.log('reached the end of next'); } // hide next? } } function fetchPreviousBatch() { if (galleryStartPage471 !== 1) { LoadingScreen.init(view); window.galleryStore.mode = 'prev'; window.galleryStore.jump = -1; GalleryLoadPrevPage(); } else { if (debug) { console.log('reached the beginning of prev'); } // hide prev? } } function moveLeft() { if (debug) console.log('moveLeft()'); if (!isAnimating) { isAnimating = true; if (currentIndex > 0) { var prevIndex = currentIndex - 1; var thumb = thumbs[prevIndex]; slideInFromLeft(thumb); } else { window.galleryStore.batchBy = 'hero'; fetchPreviousBatch(); } isAnimating = false; } } function moveRight() { if (debug) console.log('moveRight()'); if (!isAnimating) { isAnimating = true; if ((currentIndex + 1) < views.length) { var nextIndex = currentIndex + 1; var thumb = thumbs[nextIndex]; slideInFromRight(thumb); } else { window.galleryStore.batchBy = 'hero'; fetchNextBatch(); } isAnimating = false; } } function scrollToBanner() { gsap.to(window, { duration: 0.5, scrollTo: 0, ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)' }); } function removePreview() { if (isPreview) { $('#pre-main-hero').hide(); isPreview = false; } } function thumbClickObserver(e) { e.preventDefault(); e.stopImmediatePropagation(); removePreview(); slideIn(e); } function thumbPrevClickObserver(e) { e.preventDefault(); e.stopImmediatePropagation(); removePreview(); moveThumbsRight(e); } function thumbNextClickObserver(e) { e.preventDefault(); e.stopImmediatePropagation(); removePreview(); moveThumbsLeft(e); } function heroPrevClickObserver(e) { e.preventDefault(); e.stopImmediatePropagation(); removePreview(); moveLeft(); } function heroNextClickObserver(e) { e.preventDefault(); e.stopImmediatePropagation(); removePreview(); moveRight(); } function observe() { for (var idx = 0, len = thumbs.length; idx < len; idx++) { thumbs[idx].view = views[idx]; thumbs[idx].index = idx; thumbs[idx].addEventListener('click', thumbClickObserver, false); } if (!dma.DeviceIsMobile()) { prev.addEventListener('click', thumbPrevClickObserver, false); next.addEventListener('click', thumbNextClickObserver, false); } prevHero.addEventListener('click', heroPrevClickObserver, false); nextHero.addEventListener('click', heroNextClickObserver, false); prevHero.addEventListener('touch', heroPrevClickObserver, false); nextHero.addEventListener('touch', heroNextClickObserver, false); } function destroy() { for (var idx = 0, len = thumbs.length; idx < len; idx++) { thumbs[idx].removeEventListener('click', thumbClickObserver, false); } if (!dma.DeviceIsMobile()) { prev.removeEventListener('click', thumbPrevClickObserver, false); next.removeEventListener('click', thumbNextClickObserver, false); } prevHero.removeEventListener('click', heroPrevClickObserver, false); nextHero.removeEventListener('click', heroNextClickObserver, false); prevHero.removeEventListener('touch', heroPrevClickObserver, false); nextHero.removeEventListener('touch', heroNextClickObserver, false); delete jump; delete totalJumps; delete currentIndex; delete isAnimating; delete prev; delete next; delete thumbs; delete wrapper; delete carousel; delete nextHero; delete prevHero; delete views; delete view; delete element; } function init() { setCurrentState(); setCarouselWidth(); observe(); } init(); return { slideNext: moveRight, slidePrev: moveLeft, destroy: destroy, heros: views.length } }; function GalleryPage() { var heroSlider = document.getElementById('hero-slider'); var thumbSlider = document.getElementById('thumbs-slider'); var currentImageId = "2003073431"; var gallerySlider, isLoading = false; function init() { // LoadingScreen.init(heroSlider); GalleryLoadInitialPage(); observe(); AnimateGalleryImage(); } function isPortrait(w, h) { return w <= h; } function getDimensions(isThumb) { if (isThumb) { return { width: 260, height: 200 }; } else { return { width: dma.DeviceIsMobile() ? 640 : 1088, height: dma.DeviceIsMobile() ? 492 : 820 }; } } function getImageToLoad(imgSizes, isThumb) { var sortedSizes, files, dimensions, portraitFlag; if (imgSizes.length > 0) { portraitFlag = isPortrait(imgSizes[0].Width, imgSizes[0].Height); dimensions = getDimensions(isThumb); if (portraitFlag) { files = imgSizes.filter(function (item) { return (item.ReqHeight == dimensions.height); }); } else { files = imgSizes.filter(function (item) { return (item.ReqWidth == dimensions.width); }); } if (files.length > 0) { // for cut images return files[0]; } else { // when images not cut if (debug) console.log('req size not cut'); if (portraitFlag) { sortedSizes = imgSizes.sort(function (a, b) { return a.Height - b.Height; }); files = sortedSizes.filter(function (item) { return (item.Height >= dimensions.height); }); } else { sortedSizes = imgSizes.sort(function (a, b) { return a.Width - b.Width; }); files = sortedSizes.filter(function (item) { return (item.Width >= dimensions.width); }); } return sortedSizes.pop(); } } else { return null; } } function loadImage(obj, img, mode, template) { if (obj) { if (img) preload(img.ViewUrl, mode); var tmpl = template ? template : 'hero'; var md = mode ? mode : 'next'; var data = { id: obj.FileId, name: obj.FileName, caption: obj.Title, subcaption: "U.S. Marine Corps photo by " + obj.Creator.CreatorName + '/Released ' + obj.FileName, description: obj.Description, author: obj.Creator.CreatorName, date: obj.CreatedOn, download: (img) ? img.DownloadUrl : '#', share: 'https://www.marines.mil/Photos/igphoto/' + obj.FileId + '/', exif: obj.Exif, alt: (obj.AltText) ? obj.AltText : obj.Title }; switch (template) { case 'hero': var item = document.createElement('div'); item.setAttribute('data-id', obj.FileId); item.className = (currentImageId == obj.FileId) ? 'item current' : 'item'; item.className = isPortrait(img.Width, img.Height) ? item.className : item.className + ' landscape'; item.innerHTML = ''; item.data = data; if (mode === 'next') { heroSlider.appendChild(item); } else if (mode === 'prev') { heroSlider.insertBefore(item, heroSlider.firstChild); } if (debug) { console.log('mode = ', mode, ', item: ', item); } break; case 'thumb': var item = document.createElement('div'); item.setAttribute('data-id', obj.FileId); item.setAttribute('role', 'option'); item.className = 'item col-md-3 col-sm-6 col-6 align-self-center'; item.className += (currentImageId == obj.FileId) ? ' current' : ''; item.innerHTML = ''; item.data = data; if (mode === 'next') { thumbSlider.appendChild(item); } else if (mode === 'prev') { thumbSlider.insertBefore(item, thumbSlider.firstChild); } if (debug) console.log('mode = ', mode, ', item: ', item); break; case 'pager': // mobile placeholder for thumbs var item = document.createElement('div'); item.setAttribute('data-id', obj.FileId); item.className = (currentImageId == obj.FileId) ? 'item current' : 'item'; item.data = data; if (mode === 'next') { thumbSlider.appendChild(item); } else if (mode === 'prev') { thumbSlider.insertBefore(item, thumbSlider.firstChild); } break; } return item; } } function preload(imgURL) { var image = new Image(); image.src = imgURL; image.onload = function () { dispatchCrossBrowserDomEvent('gallery-image-preload'); }; image.onerror = function () { window.galleryStore.broken.push(imgURL); // @todo: utilize dispatchCrossBrowserDomEvent('gallery-image-preload'); }; } function loadHero(obj, newsobj, mode) { // mobile + desktop var img = getImageToLoad(obj.FileProperties); if (img) { var item = loadImage(obj, img, mode, 'hero'); item.news = newsobj; // attach / prep news data return true; } return false; } function loadThumb(obj, mode) { // only desktop if (!dma.DeviceIsMobile()) { var img = getImageToLoad(obj.FileProperties, true); if (img) { loadImage(obj, img, mode, 'thumb'); return true; } } else { // placeholder loadImage(obj, null, mode, 'pager'); return true; } return false; } function reduceBySet() { if (dma.DeviceIsMobile()) { // remove what is not a gallery image window.galleryStore.images--; // hero } else { window.galleryStore.images -= 2; // hero + thumb } } function loadBatch(newItems, mode) { window.galleryStore.images = dma.DeviceIsMobile() ? newItems.length : newItems.length * 2; $.each(newItems, function (index, value) { if (value.File !== undefined) { var file = value.File; var news = value.RelatedArticles ? Object.values(value.RelatedArticles) : []; if (file && file.FileProperties !== undefined && file.FileProperties.length > 0) { if (loadHero(file, news, mode)) { loadThumb(file, mode); } else { reduceBySet(); } } else { reduceBySet(); } } }); isLoading = false; // unlock dispatchCrossBrowserDomEvent('gallery-images-preload-done'); } function observe() { document.addEventListener('gallery-images-preload-done', function (e) { e.stopImmediatePropagation(); if (debug) console.log('event: gallery-images-preload-done'); // cleanup(); // @todo: remove broken images, needs work in future gallerySlider = new GallerySlider(); if (window.galleryStore.mode === 'prev' && window.galleryStore.batchBy === 'hero') { gallerySlider.slidePrev(); } else if (window.galleryStore.mode === 'next' && window.galleryStore.batchBy === 'hero') { gallerySlider.slideNext(); } window.galleryStore = { heros: gallerySlider.heros, images: 0, counter: 0, broken: [], mode: '', batchBy: '', }; LoadingScreen.close(); }); document.addEventListener('gallery-load-initial-page', function (e) { e.stopImmediatePropagation(); if (!isLoading) { isLoading = true; loadBatch(Object.values(galleryJSON471), 'next'); } }); document.addEventListener('gallery-load-initial-page-error', function (e) { e.stopImmediatePropagation(); gallerySlider = new GallerySlider(); LoadingScreen.close(); isLoading = false; }); document.addEventListener('gallery-load-prev-page', function (e) { e.stopImmediatePropagation(); if (!isLoading) { isLoading = true; if (gallerySlider) { gallerySlider.destroy(); gallerySlider = null; } var batch = Object.values(galleryJSON471).slice(0, 20); loadBatch(batch, 'prev'); } }); document.addEventListener('gallery-load-prev-page-error', function (e) { e.stopImmediatePropagation(); gallerySlider = new GallerySlider(); LoadingScreen.close(); isLoading = false; }); document.addEventListener('gallery-load-next-page', function (e) { e.stopImmediatePropagation(); if (debug) console.log('loading > gallery-load-next-page'); if (!isLoading) { isLoading = true; if (gallerySlider) { gallerySlider.destroy(); gallerySlider = null; } var batch = Object.values(galleryJSON471).slice( window.galleryStore.heros, window.galleryStore.heros + 20 ); loadBatch(batch, 'next'); } }); document.addEventListener('gallery-load-next-page-error', function (e) { e.stopImmediatePropagation(); gallerySlider = new GallerySlider(); LoadingScreen.close(); isLoading = false; }); } init(); } window.addEventListener('load', function (e) { GalleryPage(); AOS.init(); }); // ie 11 fix dispatchCrossBrowserDomEvent defined in /Templates/All/PrevNextDetailsGalleryJS.html var apiUrl = "/DesktopModules/ImageGallery/Components/IGAPI.ashx?igmode=JSON"; var totalpages471 = 1; var galleryJSON471 = ""; var galleryCurrentPage471 = 1; //this can change as people scroll through and next/previous page gets loaded var galleryStartPage471 = 1; var galleryEndPage471 = 1; var debug = false; var apiUrlRelated = "/DesktopModules/ImageGallery/Components/IGAPI.ashx?igmode=RelatedArticlesJSON"; var chosenImgRelatedJson471 = ""; var chosenImgRelatedItemsCount471 = 0; function BuildPayloadRelated(targetImageId) { var payload = {}; payload["igphoto"] = 2003073431; payload.portalId = 1; payload.moduleId = 471; payload.igphoto = targetImageId; return payload; } function GalleryLoadRelated(targetImageId) { $.ajax({ url: apiUrlRelated, data: BuildPayloadRelated(targetImageId), dataType: "json", success: function (r) { if (r.HadError) { if (debug) { console.log('GalleryLoadRelated(' + targetImageId +') success + error'); } chosenImgRelatedItemsCount471 = r.totalresults; chosenImgRelatedJson471 = r.items; // asynchronous handling dispatchCrossBrowserDomEvent('gallery-load-related'); event.preventDefault(); } else { if (debug) { console.log('GalleryLoadRelated(' + targetImageId +') success '); } event.preventDefault(); } }, error: function (xhr, status, error) { if (debug) { console.log('GalleryLoadRelated(' + targetImageId +') error'); } event.preventDefault(); dispatchCrossBrowserDomEvent('gallery-load-related-error'); console.log(error); } }); } function BuildPayloadPrev() { var payload = {}; payload["igphoto"] = 2003073431; galleryStartPage471--; payload.portalId = 1; payload.moduleId = 471; payload.igpage = galleryStartPage471; payload.isMobile = dma.DeviceIsMobile(); //clear the photo as we already have page item is on payload.igphoto = ""; return payload; } function BuildPayloadNext() { var payload = {}; payload["igphoto"] = 2003073431; galleryEndPage471++; payload.portalId = 1; payload.moduleId = 471; payload.igpage = galleryEndPage471; payload.isMobile = dma.DeviceIsMobile(); //clear the photo as we already have page item is on payload.igphoto = ""; return payload; } function BuildPayloadInitial() { var payload = {}; payload["igphoto"] = 2003073431; payload.portalId = 1; payload.moduleId = 471; payload.igpage = galleryCurrentPage471; payload.isMobile = dma.DeviceIsMobile(); return payload; } function GalleryLoadInitialPage() { $.ajax({ url: apiUrl, data: BuildPayloadInitial(), dataType: "json", success: function (r) { if (r.HadError) { if (debug) { console.log('GalleryLoadInitialPage() success + error'); } event.preventDefault(); } else { if (debug) { console.log('GalleryLoadInitialPage() success '); } //initial the pages to this page galleryCurrentPage471 = r.pagenum; galleryStartPage471 = r.pagenum; galleryEndPage471 = r.pagenum; totalpages471 = r.totalpages; //load the json for the slideshow galleryJSON471 = r.items; dispatchCrossBrowserDomEvent('gallery-load-initial-page'); event.preventDefault(); } }, error: function (xhr, status, error) { if (debug) { console.log('GalleryLoadInitialPage() error'); } event.preventDefault(); // asynchronous handling dispatchCrossBrowserDomEvent('gallery-load-initial-page-error'); console.log(error); } }); } function GalleryLoadNextPage() { $.ajax({ url: apiUrl, data: BuildPayloadNext(), dataType: "json", success: function (r) { if (r.HadError) { if (debug) { console.log('GalleryLoadNextPage() > success + error'); } event.preventDefault(); } else { if (debug) { console.log('GalleryLoadNextPage() > success + append'); } //cool code for the slideshow galleryJSON471 = galleryJSON471.concat(r.items); galleryCurrentPage471++; // asynchronous handling dispatchCrossBrowserDomEvent('gallery-load-next-page'); event.preventDefault(); } }, error: function (xhr, status, error) { if (debug) { console.log('GalleryLoadNextPage() > error'); } event.preventDefault(); // asynchronous handling dispatchCrossBrowserDomEvent('gallery-load-next-page-error'); console.log(error); } }); } function GalleryLoadPrevPage() { $.ajax({ url: apiUrl, data: BuildPayloadPrev(), dataType: "json", success: function (r) { if (r.HadError) { if (debug) { console.log('GalleryLoadPrevPage() < success + error'); } event.preventDefault(); } else { if (debug) { console.log('GalleryLoadPrevPage() < success + append'); } //to take the json and prepend to the galleryJSON471 galleryJSON471 = r.items.concat(galleryJSON471); galleryCurrentPage471++; // asynchronous handling dispatchCrossBrowserDomEvent('gallery-load-prev-page'); event.preventDefault(); } }, error: function (xhr, status, error) { if (debug) { console.log('GalleryLoadPrevPage() < error'); } event.preventDefault(); // asynchronous handling dispatchCrossBrowserDomEvent('gallery-load-prev-page-error'); console.log(error); } }); } //note, this fetches a page worth of data (template/branch driven) and adds it to the embedded json. function dispatchCrossBrowserDomEvent(name) { if(typeof name !== 'string') return; var e; if(typeof (Event) === 'function') { e = new Event(name); } else { e = document.createEvent('Event'); e.initEvent(name, true, true); } document.dispatchEvent(e); }