Unit Home

[]

쉬운 목차

01

U.S. Marines with Headquarters Battalion, Marine Corps Base Hawaii, provide security during a patrol as part of a HQBN field exercise (FEX) at MCBH,…

View Details

02

U.S. Marines with Headquarters Battalion, Marine Corps Base Hawaii, stand in formation during the 2023 Klipper Ceremony, MCBH, Dec. 7, 2023. The…

View Details

03

U.S. Navy Sailors tow a U.S. Navy P-8A Poseidon to a designated wash area after extraction from waters just off the runway at Marine Corps Air…

View Details

04

U.S. Marines with Headquarters Battalion (HQBN), Marine Corps Base Hawaii, participate in a pugil stick competition during HQBN’s 1st annual Turkey…

View Details

05

Steve Tome, a planner with Marine Corps Base Hawaii Environmental Compliance and Protection Division, identifies and explains the historical…

View Details ‘; html += ‘

Your browser does not support HTML5 videos, view video here’; html += ”; } return html; }, getTemplate:function(dvidsobject) { var template = “No video found”; try { if (dvidsobject.video && dvidsobject.video.files && dvidsobject.video.files.length > 0) { var selectedfile = this.selectVideoFile(dvidsobject.video.files); template = this.templateHTML(selectedfile, dvidsobject); } } catch (error) { if (Config.Debug) console.log(error); } return template; } }; /* Modal – load videos via means of a modal @var id – String */ function Modal(id, onShowCallback, onCloseCallback) { if (!id) return; var element = document.getElementById(id); if (Config.Debug) console.log(‘Modal > videomodal’, id, ‘@DEBUG element:’, element); var bg = document.querySelector(‘.toprotatorfull-video-background’) || (function() { var el = document.createElement(‘div’); el.className = ‘toprotatorfull-video-background video-bg dark’; el.style.display = ‘none’; document.body.appendChild(el); return el; })(); var btn = document.querySelector(‘.toprotatorfull-video-modal-close-icon’) || (function() { var el = document.createElement(‘div’); el.className = ‘toprotatorfull-video-modal-close-icon icon light’; el.style.display = ‘none’; document.body.appendChild(el); return el; })(); var hide = function() { if (Config.Debug) console.log(‘Modal > hide videomodal’, id); bg.style.display = ‘none’; btn.style.display = ‘none’; element.style.display = ‘none’; element.classList.remove(‘show’); if (Config.Platform.isMobile) btn.style.display = ‘none’; document.body.classList.remove(‘noscroll’); }; var show = function() { if (Config.Debug) console.log(‘Modal > show videomodal’, id); document.body.classList.add(‘noscroll’); bg.style.display = ‘block’; btn.style.display = ‘block’; element.style.display = ‘block’; element.classList.add(‘show’); if (Config.Platform.isMobile) btn.style.display = ‘block’; window.setTimeout(function() { if (onShowCallback) onShowCallback(); }, 185); }; // UI Pattern:click outside of modal to close on desktop var close = function(e) { if (Config.Debug) console.log(‘Modal > closing’, e); e.preventDefault(); e.stopPropagation(); if (!element.contains(e.target) || e.code === ‘Escape’) { if (onCloseCallback) onCloseCallback(); hide(); document.removeEventListener(‘click’, close); document.removeEventListener(‘touch’, close); document.removeEventListener(‘keydown’, event => { if (event.code === ‘Escape’) { close(event); } }); } }; var observers = function() { document.addEventListener(‘click’, close); document.addEventListener(‘touch’, close); document.addEventListener(‘keydown’, event => { if (event.code === ‘Escape’) { close(event); } }); }; var init = function() { if (Config.Debug) console.log(‘Modal > initializing’); element.classList.add(‘fade’); observers(); }; if (element) { if (Config.Debug) console.log(‘Modal > ‘, element); init(); } return { show:show, }; } /* VideoFactory – assign modal loading to triggers go over video modals and load appropariate videos based on data */ function VideoModalFactory(slideshowInstance) { if (Config.Debug) console.log(‘VideoModalFactory >>>’); var currentVideo, currentModal, currentOverlay; // videoOverlay; var currentSlideshow = slideshowInstance; var modalDvidsTemplate = function(obj) { var html = ”; html += ”; html += ”; html += DvidsAPI.getTemplate(obj); html += ‘]]>

‘; return html; }; var modalYouTubeTemplate = function(obj) { var html = ”; html += ”;
return html;
};

function handleStartMobileVideo(player) {
goFullScreen(player);
goLandscape();
}

function handleEndMobileVideo() {
exitFullScreen();
exitLandscape();
currentModal.close();
}

}, function() { // close modal callback
var pausepromise = currentVideo.pause();
currentVideo.currentTime = 0.1; // ios 3.2 issue
if (pausepromise) {
pausepromise.then(function() {
currentSlideshow.resume();
})
.catch(function(error) {
if (Config.Debug) console.log(error);
currentSlideshow.resume();
currentVideo.load();
});
}
});
} else {
// YouTube Video Modal
currentVideo = document.querySelector(‘#’ + attr + ‘ iframe’);
if (currentVideo) {
var playerID = Config.Video.VIDEO_TAG.concat(slideid);
currentModal = new Modal(attr, function() { // open modal callback
currentSlideshow.pause();
if (Config.Platform.isMobile) handleStartMobileVideo(currentVideo);
playerYT[playerID].playVideo();
}, function() { // close modal callback
if (Config.Platform.isMobile) handleEndMobileVideo(currentVideo);
currentSlideshow.resume();
playerYT[playerID].stopVideo();
});
}
}
if (currentModal) currentModal.show();
};

if (typeof VideoObjectsArray124548 !== undefined && VideoObjectsArray124548.length > 0) {
if (Config.Debug) console.log(‘VideoObjectsArray124548 > ‘, VideoObjectsArray124548);
for (var i = 0, len = VideoObjectsArray124548.length; i < len; i++) { var data = VideoObjectsArray124548[i]; if (data) { var id = data.slideid ? data.slideid :i; var modalHTML = document.getElementById('videomodal' + id) || createModalAsElement(id); switch (data.format) { case 'dvids': modalHTML.innerHTML = modalDvidsTemplate(data); break; case 'youtube': modalHTML.innerHTML = modalYouTubeTemplate(data); break; } } } // create video triggers var videotriggers = document.body.querySelectorAll('.video-trigger'); for (var t = 0, tlen = videotriggers.length; t < tlen; t++) { videotriggers[t].addEventListener('click', load, false); videotriggers[t].addEventListener('touch', load, false); videotriggers[t].addEventListener('keydown', event => { if (event.code === “Space”) { load(event) } }, false);
}
}
}

/*
Slideshow – create a slideshow from loaded slides using jquery.cycle.slider
@return – methods
*/
function SlideShow() {
var $window = jQuery(window);
var slideContainer = moduleContainer.find(“.slides”);
var slides = slideContainer.children(“.slide”);
var pagerContainer = moduleContainer.find(“.pager-circles”);
var pagerGroups = pagerContainer.find(“.wrapper”);
var pagerAnchors = pagerGroups.find(“a”);
var prevLinkAnchor = moduleContainer.find(“a.previous”);
var nextLinkAnchor = moduleContainer.find(“a.next”);
var prevTitle = prevLinkAnchor.children(“span”);
var nextTitle = nextLinkAnchor.children(“span”);
var activePagerGroup = pagerGroups.eq(0);
var isSlideDetailsVisible = false;
var windowResizeTimeout = null;
var windowResizeTimeoutInterval = 500;

function changePagerGroup(destinationIndex) {
var goToNext = activePagerGroup.index() < destinationIndex; activePagerGroup = pagerGroups.eq(destinationIndex); } function setNextPrevAnchorLinks(counter) { var nexttitle, prevtitle, maxchars = 24; var shorten = function(str) { return str.length > maxchars ? str.substr(0, 22) + ‘…’ :str;
}

switch (counter) {
case 0:
nexttitle = jQuery(slides[counter + 1]).attr(‘data-imagetitle’);
prevtitle = jQuery(slides[slides.length – 1]).attr(‘data-imagetitle’);
break;
case (slides.length – 1):
nexttitle = jQuery(slides[0]).attr(‘data-imagetitle’);
prevtitle = jQuery(slides[counter – 1]).attr(‘data-imagetitle’);
break;
default:
nexttitle = jQuery(slides[counter + 1]).attr(‘data-imagetitle’);
prevtitle = jQuery(slides[counter – 1]).attr(‘data-imagetitle’);
}

prevTitle.html(shorten(prevtitle));
nextTitle.html(shorten(nexttitle));
}

if (slides.length > 0) {
pagerAnchors.eq(0).addClass(“activeSlide”);
slideContainer
.cycle({
slides:”> .slide”,
fx:”fadeout”,
speed:500,
timeout:5000,
swipe:true,
pauseOnHover:true,
prev:prevLinkAnchor,
next:nextLinkAnchor,
log:false
})
.on(“cycle-before”, function(evt, options, currentSlide, nextSlide) {
slideContainer.find(‘.slideshow-img-holder’).fadeOut();
})
.on(“cycle-after”, function(evt, options, currentSlide, nextSlide) {
var current = parseInt(options.slideNum) – 1;

initImageScrollForSlide();

pagerAnchors.removeClass(“activeSlide”);
pagerAnchors.eq(current).addClass(“activeSlide”);

if (activePagerGroup.children(“a.activeSlide”).length === 0) {
var destinationPagerGroup = pagerGroups.find(“a.activeSlide”).parent(“div.group”);
changePagerGroup(destinationPagerGroup.index());
}

setNextPrevAnchorLinks(current);
});

if (false) {
slideContainer.on(‘cycle-next’, function(event, opts) {
slideContainer.cycle(‘pause’);
});

slideContainer.on(‘cycle-prev’, function(event, opts) {
slideContainer.cycle(‘pause’);
});
}

slideContainer.data(“paused”, false);

pagerAnchors.on(“click”, function() {
var destinationSlideIndex = $(this).index() + ($(this).parent(“div.wrapper”).index() * 13);
slideContainer.cycle(“goto”, destinationSlideIndex);
return false;
});

moduleContainer.hover(function() {
slideContainer.cycle(“pause”);
var activeIndex = pagerGroups.find(“a.activeSlide”).index();
isSlideDetailsVisible = true;
}, function() {
isSlideDetailsVisible = false;
slideContainer.cycle(“resume”);
});
}

return {
init:function() {
moduleContainer.find(“.toprotatorfull”).css(“visibility”, “visible”);
},
pause:function() {
slideContainer.cycle(‘pause’);
},
resume:function() {
slideContainer.cycle(“resume”);
}
};
}

function initImageScrollForSlide() {
var currentImage = moduleContainer.find(‘.cycle-slide-active’).attr(‘data-image’);
var currentImgAlt = moduleContainer.find(‘.cycle-slide-active’).attr(‘data-imagetitle’);
var width = moduleContainer.find(‘.cycle-slide-active’).attr(‘data-width’);
if (currentImage.toLowerCase().indexOf(“dvidshub.”) != -1) width = 1.3 * width;
var height = moduleContainer.find(‘.cycle-slide-active’).attr(‘data-height’);

moduleContainer.find(‘.slideshow-img-holder’).imageScroll(‘destroy’);

moduleContainer.find(‘.slideshow-img-holder’).imageScroll({
image: currentImage,
container: moduleContainer.find(‘.toprotatorfull .slides’),
coverRatio: 1,
parallax: false,
mediaWidth: width,
mediaHeight: height,
});

moduleContainer.find(‘.img-holder-img’).attr(‘alt’, currentImgAlt);

moduleContainer.find(‘.slideshow-img-holder’).fadeIn(500);
}

/*
Custom Animation for Banner (non-AOS)
To ensure correct sequencing of animations
*/

function AnimateTopRotatorFull() {
var num = document.getElementById(‘toprotatorfull-number-title-124548’);
var title = document.getElementById(‘toprotatorfull-title-124548’);
var desc = document.getElementById(‘toprotatorfull-description-124548’);
var aside = document.getElementById(‘toprotatorfull-aside-links-124548’);
var pager = document.getElementById(‘toprotatorfull-pager-124548’);
var prev = document.getElementById(‘toprotatorfull-prev-124548’);
var next = document.getElementById(‘toprotatorfull-next-124548’);

if (!num || !title || !desc || !aside || !pager || !prev || !next) return;

var timeline = gsap.timeline({
delay:0.9,
paused:true
});

timeline
.addLabel(‘caption’)
.staggerTo([num, title, desc, aside], 0.6, {
opacity:1,
x:0,
ease:’cubic-bezier(0.4, 0.0, 0.2, 1)’
}, 0.2, ‘caption’)
.addLabel(‘pager’)
.to(pager, 0.8, {
opacity:1,
y:0,
ease:’cubic-bezier(0.4, 0.0, 0.2, 1)’
}, ‘pager’)
.addLabel(‘footer’)
.to([prev, next], 0.8, {
opacity:1,
x:0,
ease:’cubic-bezier(0.4, 0.0, 0.2, 1)’
}, ‘footer’);
timeline.play();
}

jQuery(document).ready(function () {
moduleContainer = jQuery(“#dnn_ctr124548_ModuleContent”);
var slideshow124548 = new SlideShow();
slideshow124548.init();
VideoModalFactory(slideshow124548);

$(‘#toprotatorfull-124548’).on(‘inview’, function(event, isInView) {
if (isInView) {
AnimateTopRotatorFull();
}
});

var screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var minHeight = 400;

//fix small viewports in landscape mode
if (screenHeight < minHeight) { $('#toprotatorfull-124548').css('min-height', minHeight); } //add aria for screen reader $("#toprotatorfull-pager-124548 .wrapper a").each(function (i) { $(this).attr("aria-label", "Slide " + ++i + " of " + "5"); }); initImageScrollForSlide(); }); })(); //IIFE Marine Corps Base Hawaii home page