https://www.starkey.com/sites/starkey2015/branded-sites/shared/js/main.js

1// script to display navigaion on scrollUp
2// https://codemyui.com/hide-header-navigation-on-scroll-down-and-show-on-scroll-up/
3$(document).ready(function () {
4
5    'use strict';
6
7    var c, currentScrollTop = 0,
8        navbar = $('header');
9
10    $(window).scroll(function () {
11        var a = $(window).scrollTop();
12        var b = navbar.height();
13
14        currentScrollTop = a;
15
16        if (c < currentScrollTop && a > b + b) {
17            navbar.addClass("scrollUp");
18        } else if (c > currentScrollTop && !(a <= b)) {
19            navbar.removeClass("scrollUp");
20        }
21        c = currentScrollTop;
22    });
23
24
25    // script to pause/play background video
26    var vid = document.getElementById("bgvideo"),
27        pauseButton = document.getElementById("bgvideo-pause");
28
29    // vid and paudeButton are used for the large background video in mega banner
30    // These elements don't always exist. If they do, move along.
31    if (vid && pauseButton) {
32        // Check browser settings and turn off autoplay is set to
33        if (window.matchMedia('(prefers-reduced-motion)').matches) {
34            vid.removeAttribute("autoplay");
35            vid.pause();
36            pauseButton.innerHTML = "Play <span class='glyphicon glyphicon-play' aria-hidden='true'></span>";
37        }
38
39        pauseButton.addEventListener("click", function () {
40            if (vid.paused) {
41                vid.play();
42                pauseButton.classList.add('paused');
43            } else {
44                vid.pause();
45                pauseButton.classList.remove('paused');
46            }
47        });
48
49        // if video is non-looping and ends, change button to play icon
50        vid.addEventListener("ended", function () {
51            // pauseButton.classList.remove('paused');
52        });
53    } // end pause/play background video
54
55    // check page to find circle class and if it exists, rotate the circle image mask div
56    var circle = document.querySelector('.circle');
57    if (circle) {
58        window.addEventListener('scroll', function (event) {
59            var theta = $(window).scrollTop() / 1000 % Math.PI;
60            $('.circle .cta-banner-image .image-mask').css({ transform: 'rotate(' + theta + 'rad)' });
61        }, false);
62    }
63
64});
65
66(function ($,d,w) {
67
68    popupVideo = function (modalId, vidContainerId, vidId, usingBootstrap = true) {
69
70        var parentID = '#vid-container' + vidId;
71
72        $(vidContainerId).empty();
73        $(vidContainerId).append("<video id='" + vidId + "' data-video-id='" + vidId + "' data-account='2566261597001' data-player='i8tIKNh2lm' data-embed='default' class='video-js video-display' controls></video>");
74
75        $.getScript("//players.brightcove.net/2566261597001/i8tIKNh2lm_default/index.min.js", function (data, textStatus, jqxhr) {
76
77            var script = document.createElement('script');
78            script.type = 'text/javascript';
79            script.text = 'videojs("' + vidId + '").ready(function () { var myPlayer = this; \n myPlayer.on("loadedmetadata",function(){ \n lang = $("html").attr("lang") == "undefined" ? "en" : $("html").attr("lang"); \n lang = lang.substr(0, $.inArray("-", lang) != -1 ? $.inArray("-", lang) : lang.length); \n for (var i = 0; i < (myPlayer.textTracks().length) ; i++) { \n if (myPlayer.textTracks()[i].language == lang && lang !== "en") { \n myPlayer.textTracks()[i].mode = "showing"; } else { myPlayer.textTracks()[i].mode = "hidden"; }; } window.currentPlayer = myPlayer; myPlayer.play(); }); })';
80            $(vidContainerId).append(script);
81        });
82
83        if(usingBootstrap) { // Some modals are using HTMLDialogElement.showModal()
84            $(modalId).modal('show');
85        }
86
87        // clear out modal contents to reset video modal
88        $(modalId).on('hidden.bs.modal', function (e) {
89            $(vidContainerId).empty();
90        })
91
92        // DJ 12/16/22
93        // Brightcove Analytics
94        w.mileStones = [10, 25, 50, 75, 90];
95        w.videoplayers = [];
96        function init() {
97            var videos = d.getElementsByTagName('video');
98            for (var i = 0; i < videos.length; i++) {
99
100                var id = videos[i].id;
101                if (id === null || id === undefined) {
102                    videos[i].id = "tl_video_" + i
103                }
104                videos[i].addEventListener('ended', videoEnd, false);
105                videos[i].addEventListener('timeupdate', videoTimeUpdate, false);
106                videos[i].addEventListener('play', videoPlay, false);
107                videos[i].addEventListener('pause', videoPause, false);
108
109                w.videoplayers.push({
110                    playerId: videos[i].id,
111                    mileStones: JSON.parse(JSON.stringify(w.mileStones))
112                });
113            }
114        }
115
116        function buildTrackableVideoInfoEvent(e) {
117
118            return {
119                "event": "video",
120                "baseURI": e.currentTarget.baseURI,
121                "currentSrc": e.currentTarget.currentSrc,
122                "id": e.currentTarget.id,
123                "volume": e.currentTarget.volume,
124                "action": e.type === "timeupdate" ? "percentageComplete" : e.type,
125                "currentTime": e.currentTarget.currentTime,
126                "duration": e.currentTarget.duration,
127                // new payload object data here
128                "event_category": "video",
129                "event_type": "video",
130                "event_action": e.type,
131                "event_label": window.currentPlayer.titleBar.state.t

131itle + " (" + e.target.playerId + ")",
132                "page_type": utag.data['page_type'],
133                "page_name": utag.data['dom.title'],
134                "event_name": e.type
135            };
136        }
137
138        function videoTimeUpdate(e) {
139            var t = buildTrackableVideoInfoEvent(e);
140            var obj;
141
142            for (var i = 0; i < w.videoplayers.length; i++) {
143                if (w.videoplayers[i].playerId === t.id.substring(0,13)) {
144                    obj = w.videoplayers[i];
145                    break;
146                }
147            }
148
149            var duration = t.duration;
150            var playhead = t.currentTime;
151            var percComplete = (playhead / duration) * 100;
152            var ms_len = obj.mileStones.length;
153            if (ms_len > 0) {
154                var next_ms = obj.mileStones[0];
155                if (next_ms <= percComplete) {
156                    obj.mileStones.shift();
157                    t.percComplete = next_ms;
158                    utag.link(t);
159                }
160            }
161        }
162
163        function videoEnd(e) {
164            var t = buildTrackableVideoInfoEvent(e);
165            for (var i = 0; i < w.videoplayers.length; i++) {
166                if (w.videoplayers[i].playerId === t.id) {
167                    w.videoplayers[i].mileStones = JSON.parse(JSON.stringify(w.mileStones))
168                    break;
169                }
170            }
171            utag.link(t);
172        }
173
174        function videoPlay(e) {
175            var t = buildTrackableVideoInfoEvent(e);
176            utag.link(t);
177        }
178
179        function videoPause(e) {
180            var t = buildTrackableVideoInfoEvent(e);
181            utag.link(t);
182        }
183        
184        init();
185        
186        // Brightcove Analytics END
187    };
188}(jQuery,document,window));
189
190
191// Sweet Scroll - smooth scroll to anchor
192// This is put in a variable in case it needs to be
193// re-initialized via a callback from another plugin.
194// - DJ 11/8/19
195var sweetScroll = (function ($, window) {
196
197    var ss = {};
198    var mq = window.matchMedia( "(min-width: 992px)" );
199    var addOffset = (mq.matches ? 150 : 100);
200
201    ss.init = function() {
202    
203        $('.sweet-scroll').on('click',function(event){
204            event.preventDefault();
205    
206            var targetOffset = $(this.hash).offset().top;
207            var distance = targetOffset - addOffset;
208    
209            $('html, body').stop().animate({
210                scrollTop: distance
211            }, 400);
212        });
213    }
214
215    return ss;
216
217}(jQuery, window));
218
219sweetScroll.init();
220
221// pop a video based on a url param
222var getURLParameter = function (sParam) {
223    var sPageURL = window.location.search.substring(1);
224    var sURLVariables = sPageURL.split('&');
225    for (var i = 0; i < sURLVariables.length; i++) {
226        var sParameterName = sURLVariables[i].split('=');
227        if (sParameterName[0] == sParam) {
228            return sParameterName[1];
229        }
230    }
231};
232
233var videoPopupHandler = function(){
234    // A solution to pop a video based on a url param
235    // There are some videos that have a random number appended to their id value.
236    
237    // Check for the url param
238    if (window.location.search.indexOf("vidid=") > -1) {
239        var vidid = getURLParameter('vidid'); 
240        var getModalId = '#vid-modal' + vidid;
241        var getvidContainerId = '#vid-container' + vidid;
242        var videoModalEl = document.getElementById('vid-modal' + vidid);
243
244        if(!videoModalEl) {
245            // If the video modal doesn't exists then it probably means the video id has a random number appended to it.
246            // The base of the video id is correct so we can use that to build out a dynamic modal to play the video in.
247
248            // Look on the page for the following id
249            var vidIdElem = document.querySelector('[id^="vid-container'+ vidid +'-"]');
250
251            // If the video id doesn't exist on the page, exit.
252            if (!vidIdElem) {
253                console.warn('Specified video does not exist. Please check url param \'vidid\'');
254                return false;
255            }
256
257            // Build out a modal
258            var modalHolder = document.createElement("div");
259            modalHolder.innerHTML = '<div class="modal fade show" id="vid-modal' + vidid + '" tabindex="-1" role="dialog" aria-modal="true" aria-label="Video modal" aria-hidden="true">' +
260                                        '<div class="modal-dialog" role="document">' +
261                                            '<div class="modal-content">' +
262                                                '<div class="modal-body">' +
263                                                    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
264                                                        '<span aria-hidden="true">&times;</span>' +
265                                                    '</button>' +
266                                                    '<div class="vid-container" id="vid-container' + vidid + '" style="width: 800px !important;height: 445px !important;margin: auto !important;background-color: black;"></div>' +
267                                                '</div>' +
268                                            '</div>' +
269                                        '</div>' +
270                                    '</div>';
271            // Append the modal html to the end of the document
272            document.body.appendChild(modalHolder);
273        }
274
275        // if the video is inside an accordion, then the section that contains the video must be open by adding the 'show' class
276        if($(getModalId).closest(".collapse")){
277            $(getModalId).closest(".collapse").addClass("show");
278        }
279
280        // Finally, call the popupVideo function
281        popupVideo(getModalId, getvidContainerId, vidid);
282    }
283}
284// Call the popup handler as soon as this file loads
285videoPopupHandler();
286
287
288// Get cookie function
289function getCookie(cname) {
290    var name = cname + "=";
291    var decodedCookie = decodeURIComponent(document.cookie);
292    var ca = decodedCookie.split(';');
293    for(var i = 0; i <ca.length; i++) {
294        var c = ca[i];
295        while (c.charAt(0) == ' ') {
296            c = c.substring(1);
297        }
298        if (c.indexOf(name) == 0) {
299            return c.substring(name.length, c.length);
300        }
301    }
302    return "";
303}
304
305// Set cookie function
306function setCookie(cname, cvalue, exdays) {
307    var d = new Date();
308    d.setTime(d.getTime() + (exdays*24*60*60*1000));
309    var expires = "expires="+ d.toUTCString();
310    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
311}
312

313/* Get Google click id - GCLID - Start  */
314function getParam(p) {
315	var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);
316	return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
317}
318
319function getExpiryRecord(value) {
320	var expiryPeriod = 90 * 24 * 60 * 60 * 1000; // 90 day expiry in milliseconds
321
322	var expiryDate = new Date().getTime() + expiryPeriod;
323	return {
324		value: value,
325		expiryDate: expiryDate
326	};
327}
328
329function addGclid() {
330	var gclidParam = getParam('gclid');
331	var gclidFormFields = ['gclid_field']; // all possible gclid form field ids here
332	var gclidRecord = null;
333	var currGclidFormField;
334
335	var gclsrcParam = getParam('gclsrc');
336	var isGclsrcValid = !gclsrcParam || gclsrcParam.indexOf('aw') !== -1;
337
338	gclidFormFields.forEach(function (field) {
339		if (document.getElementById(field)) {
340			currGclidFormField = document.getElementById(field);
341		}
342	});
343
344	if (gclidParam && isGclsrcValid) {
345		gclidRecord = getExpiryRecord(gclidParam);
346		localStorage.setItem('gclid', JSON.stringify(gclidRecord));
347	}
348
349	var gclid = gclidRecord || JSON.parse(localStorage.getItem('gclid'));
350	var isGclidValid = gclid && new Date().getTime() < gclid.expiryDate;
351
352	if (currGclidFormField && isGclidValid) {
353		currGclidFormField.value = gclid.value;
354	}
355}
356/* Get Google click id - GCLID - END  */
357
358window.addEventListener('load', addGclid);
359
360// Pop video based on url param "videoId"
361// This works for any Brightcove video id in the Starkey account
362(function (window) {
363    if (window.location.search.indexOf("videoId=") > -1) {
364        const videoId = getURLParameter("videoId");
365        const mainEl = document.querySelector("main");
366
367        const dialogNode = document.createElement("dialog");
368        dialogNode.id = "param-video-modal";
369        dialogNode.classList.add("param-video-modal");
370        const dialogInnerHtml = '<div id="param-video-container"></div>' +
371                                '<button id="close-param-video-dialog" class="close-param-video-dialog" aria-label="Close video popup">' +
372                                    '<span aria-hidden="true">×</span>' +
373                                '</button>';
374        dialogNode.innerHTML = dialogInnerHtml;
375        mainEl.prepend(dialogNode);
376
377        const videoDialogEl = document.querySelector("#param-video-modal");
378        const bodyEl = document.querySelector("body");
379
380        setTimeout(function() {
381            videoDialogEl.showModal();
382            bodyEl.style.overflow = "hidden";
383            popupVideo("#param-video-modal", "#param-video-container", videoId, false);
384        }, 500);
385
386        function closeParamVideoDialog() {
387            bodyEl.style.overflow = "";
388            document.querySelector("#param-video-container").innerHTML = "";
389            document.querySelector("#param-video-modal").close();
390        }
391    
392        function handleEscKey(e) {
393            if (e.key === "Escape") {
394                closeParamVideoDialog();
395            }
396        }
397
398        const closeDialogBtn = document.querySelector("#close-param-video-dialog");
399        closeDialogBtn.addEventListener("click", closeParamVideoDialog);
400        window.addEventListener("keydown", handleEscKey);
401        videoDialogEl.addEventListener('mousedown', function(e) {
402            if (e.target === e.currentTarget) {
403                closeParamVideoDialog()
404            }
405        })
406    }
407}(window));