https://www.nsu.edu/App_Themes/NSU/js/boxes.js

1//'use strict';
2/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. MIT license */
3
4window.matchMedia || (window.matchMedia = function () {
5    "use strict";
6
7    // For browsers that support matchMedium api such as IE 9 and webkit
8    var styleMedia = (window.styleMedia || window.media);
9
10    // For those that don't support matchMedium
11    if (!styleMedia) {
12        var style = document.createElement('style'),
13            script = document.getElementsByTagName('script')[0],
14            info = null;
15
16        style.type = 'text/css';
17        style.id = 'matchmediajs-test';
18
19        if (!script) {
20            document.head.appendChild(style);
21        } else {
22            script.parentNode.insertBefore(style, script);
23        }
24
25        // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
26        info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
27
28        styleMedia = {
29            matchMedium: function (media) {
30                var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
31
32                // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
33                if (style.styleSheet) {
34                    style.styleSheet.cssText = text;
35                } else {
36                    style.textContent = text;
37                }
38
39                // Test if media query is true or false
40                return info.width === '1px';
41            }
42        };
43    }
44
45    return function (media) {
46        return {
47            matches: styleMedia.matchMedium(media || 'all'),
48            media: media || 'all'
49        };
50    };
51}());
52
53/*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. MIT license */
54(function () {
55    // Bail out for browsers that have addListener support
56    if (window.matchMedia && window.matchMedia('all').addListener) {
57        return false;
58    }
59
60    var localMatchMedia = window.matchMedia,
61        hasMediaQueries = localMatchMedia('only all').matches,
62        isListening = false,
63        timeoutID = 0,    // setTimeout for debouncing 'handleChange'
64        queries = [],   // Contains each 'mql' and associated 'listeners' if 'addListener' is used
65        handleChange = function (evt) {
66            // Debounce
67            clearTimeout(timeoutID);
68
69            timeoutID = setTimeout(function () {
70                for (var i = 0, il = queries.length; i < il; i++) {
71                    var mql = queries[i].mql,
72                        listeners = queries[i].listeners || [],
73                        matches = localMatchMedia(mql.media).matches;
74
75                    // Update mql.matches value and call listeners
76                    // Fire listeners only if transitioning to or from matched state
77                    if (matches !== mql.matches) {
78                        mql.matches = matches;
79
80                        for (var j = 0, jl = listeners.length; j < jl; j++) {
81                            listeners[j].call(window, mql);
82                        }
83                    }
84                }
85            }, 30);
86        };
87
88    window.matchMedia = function (media) {
89        var mql = localMatchMedia(media),
90            listeners = [],
91            index = 0;
92
93        mql.addListener = function (listener) {
94            // Changes would not occur to css media type so return now (Affects IE <= 8)
95            if (!hasMediaQueries) {
96                return;
97            }
98
99            // Set up 'resize' listener for browsers that support CSS3 media queries (Not for IE <= 8)
100            // There should only ever be 1 resize listener running for performance
101            if (!isListening) {
102                isListening = true;
103                window.addEventListener('resize', handleChange, true);
104            }
105
106            // Push object only if it has not been pushed already
107            if (index === 0) {
108                index = queries.push({
109                    mql: mql,
110                    listeners: listeners
111                });
112            }
113
114            listeners.push(listener);
115        };
116
117        mql.removeListener = function (listener) {
118            for (var i = 0, il = listeners.length; i < il; i++) {
119                if (listeners[i] === listener) {
120                    listeners.splice(i, 1);
121                }
122            }
123        };
124
125        return mql;
126    };
127}());
128
129(function ($, ScrollMagic, TweenMax, TimelineMax, window, document, undefined) {
130    var querySwitch = window.matchMedia('(max-width: 900px)'),
131        mobileProcessed = false,
132        desktopProcessed = false,
133        factoids = $('.box-circle-factoids'),
134        desktopFactoids = factoids.children('.box-desktop'),
135        mobileFactoids = null,
136        desktopNewsCarousel = $('#hp-news-events .owl-carousel'),
137        homepageSlideshow = $('#hp-slideshow'),
138        hpSlideshowTexts = $('#hp-slideshow-text li'),
139        pageMenu = $('#page-menu'),
140        desktopHeaderLinks = $('#page-header-links'),
141        desktopRightLinks = $('#nav-right'),
142        mobileHeaderLinks = null,
143        mobileRightLinks = null,
144        desktopSearch = $('#page-search');
145
146    var scrollMagic, factoidsTimeline, factoidScene;
147
148    desktopSearch.on('click', function (e) {
149        e.stopPropagation();
150
151        desktopSearch.addClass('opened');
152        desktopSearch.find('input[type=search]').focus();
153    });

154
155    $('.homepageSlideshow').on('mouseover', function (e) {
156        owl.trigger('stop.owl.autoplay');
157    });
158
159    $('.hpSlideshowTexts').on('mouseover', function (e) {
160        owl.trigger('stop.owl.autoplay');
161    });
162
163    $('.desktopNewsCarousel').on('mouseover', function (e) {
164        owl.trigger('stop.owl.autoplay');
165    });
166
167
168
169    $(document).ready(function () {
170        $('#page-menu-back').keyup(function (e) {
171            var code = (e.keyCode ? e.keyCode : e.which);
172            if (code == 13) {
173                updateTabIndex();
174            }
175        });
176
177        $('.inner').keyup(function (e) {
178            $("#page-menu.open .inner > #mobile-right-links li a").css("border", "none");
179            var self = this;
180            var code = (e.keyCode ? e.keyCode : e.which);
181            if (code == 27 && pageMenu.hasClass('open')) {
182                toggleMenu();
183            }
184            if (code == 9) {
185                e.preventDefault();
186                e.stopPropagation();
187                var tabables = $('.inner').find("*[tabindex != '-1']:visible");
188
189                $.each(tabables, function (i) {
190
191
192                    if ($(this).css('opacity') == '0' || $(this).parent().css('max-height') == '0px' || $(this).parent().id == 'page-menu-background') {
193                        /* $(this).remove();*/
194                        $(this).prop("tabindex", '-1');
195                    }
196                    else {
197                        /* $(this).remove();*/
198                        /*    $(this).prop("tabindex", '-1');*/
199                        $(this).removeProp("tabindex");
200                    }
201                });
202                var index = tabables.index(e.target);
203                //console.log(index);
204                //console.log(tabables.eq(index + 1));
205                //console.log(tabables.eq(index));
206                //tabables.eq(index + 1).focus();
207                /* tabables.eq(index - 1).css("border", "none");*/
208                tabables.css("border", "none");
209                tabables.eq(index).css("border", "none");
210                tabables.css('outline', 'none');
211                tabables.eq(index).css('border', '2px solid #fcca03');
212
213            }
214        });
215    });
216
217
218
219    $(document).on('click', function () {
220        desktopSearch.removeClass('opened');
221    });
222
223    $(function () {
224        querySwitch.addListener(widthChange);
225        widthChange(querySwitch);
226    });
227
228    function updateTabIndex() {
229        var tabables = $('.inner').find("*");
230
231        $.each(tabables, function (i) {
232
233            //if ($(this).css('opacity') == '0' || $(this).parent().css('max-height') == '0px' || $(this).parent().id == 'page-menu-background') {
234            //    /* $(this).remove();*/
235            //    $(this).prop("tabindex", '-1');
236            //}
237            //else {
238            /* $(this).remove();*/
239            /*    $(this).prop("tabindex", '-1');*/
240
241            $(this).removeProp("tabindex");
242            /*}*/
243        });
244    }
245
246    function widthChange(mq) {
247        if (mq.matches) {
248            if (!mobileProcessed) {
249                mobileHeaderLinks = desktopHeaderLinks.find('ul').clone().attr('id', 'mobile-header-links');
250                mobileRightLinks = desktopRightLinks.find('ul').clone().attr('id', 'mobile-right-links');
251
252                mobileRightLinks.find('li a').each(function (index, element) {
253                    $(element).addClass('btn');
254                });
255
256                homepageSlideshow.find('.cycle-slideshow')
257                    .on('cycle-initialized', function (e, hash) {
258                        alert("Slider Testing")
259                        if (mq.matches) {
260                            var slide = $(hash.slides).first();
261                            cloneSlideshowTitle(slide.data('class'));
262
263                        }
264                    }).on('cycle-before', function (e, hash, outgoing, incoming) {
265                        if (mq.matches) {
266                            var slide = $(incoming);
267                            cloneSlideshowTitle(slide.data('class'));
268                        }
269                    });
270
271                factoids.each(function (index, box) {
272                    var mobile = $('<ul class="owl-carousel box-mobile inner"></ul>'),
273                        allItems = $(box).find('li').clone().appendTo(mobile);
274                    $(factoids[index]).append(mobile);
275                });
276
277                mobileFactoids = $('.box-circle-factoids .box-mobile');
278
279                mobileFactoids.owlCarousel({
280                    loop: false,
281                    margin: 0,
282                    autoplay: false,
283                    dots: false,
284                    nav: true,
285                    navText: ['<span>Previous</span>', '<span>Next</span>'],
286                    items: 1
287                });
288            }
289
290            mobileHeaderLinks.appendTo(pageMenu.find('.inner'));
291            mobileRightLinks.appendTo(pageMenu.find('.inner'));
292            desktopSearch.prependTo(pageMenu.children('.inner'));
293
294            mobileFactoids.each(function (index, box) {
295                $(factoids[index]).append($(box));
296            });
297
298            desktopFactoids.detach();
299            desktopNewsCarousel.trigger('destroy.owl.carousel').removeClass('owl-carousel');
300
301            mobileProcessed = true;
302        } else {
303            if (mobileProcessed) {
304                desktopFactoids.each(function (index, box) {
305                    $(factoids[index]).append($(box));
306                });
307
308                homepageSlideshow.children('h2').remove();
309                homepageSlideshow.find('h2').removeAttr('style');
310
311                mobileFactoids.detach();
312                mobileHeaderLinks.detach();
313                mobileRightLinks.detach();
314                desktopSearch.appendTo(desktopHeaderLinks);
315            }
316
317            if (!desktopProcessed) {
318                if (scrollMagic === null) {
319                    scrollMagic = new ScrollMagic.Controller();
320
321                    factoidsTimeline = new TimelineMax();
322                    factoidsTimeline.add(TweenMax.fromTo('.factoid-line', 5, { drawSVG: '0%' }, { drawSVG: '100%' }, 0))
323                        .add(TweenMax.fromTo('.factoid-line-circle-1', 1, { attr: { r: 0 } }, { attr: { r: 11 } }), '-=4.9')
324                        .add(TweenMax.fromTo('.factoid-circle-1', 1, { backgroundSize: 0 }, { backgroundSize: '100%' }), '-=4.7')
325                        .add(TweenMax.fromTo('.factoid-circle-1 div', 1.5, { opacity: 0 }, { opacity: 1 }), '-=4.2')
326                        .add(TweenMax.fromTo('.factoid-line-circle-2', 1, { attr: { r: 0 } }, { attr: { r: 11 } }), '-=3.8')
327                        .add(TweenMax.fromTo('.factoid-circle-2', 1, { backgroundSize: 0 }, { backgroundSize: '100%' }), '-=4')
328                        .add(TweenMax.fromTo('.factoid-circle-2 div', 1.5, { opacity: 0 }, { opacity: 1 }), '-=3.5')
329                        .add(TweenMax.fromTo('.factoid-line-circle-3', 1, { attr: { r: 0 } }, { attr: { r: 11 } }), '-=3.1')
330                        .add(TweenMax.fromTo('.factoid-circle-3', 1, { backgroundSize: 0 }, { backgroundSize: '100%' }), '-=3.3')
331                        .add(TweenMax.fromTo('.factoid-circle-3 div', 1.5, { opacity: 0 }, { opacity: 1 }), '-=2.8')
332                        .add(TweenMax.fromTo('.factoid-line-circle-4', 1, { attr: { r: 0 } }, { attr: { r: 11 } }), '-=2.1')
333                        .add(TweenMax.fromTo('.factoid-circle-4', 1, { backgroundSize: 0 }, { backgroundSize: '100%' }), '-=2.3')
334                        .add(TweenMax.fromTo('.factoid-circle-4 div', 1.5, { opacity: 0 }, { opacity: 1 }), '-=1.8')
335                        .add(TweenMax.fromTo('.factoid-line-circle-5', 1, { attr: { r: 0 } }, { attr: { r: 11 } }), '-=1');
336
337                    factoidScene = new ScrollMagic.Scene({
338                        triggerElement: '.box-circle-factoids',
339                        triggerHook: 0.5,
340                        reverse: false
341                    }).setTween(factoidsTimeline).addTo(scrollMagic);
342                }
343
344                desktopFactoids.owlCarousel({
345                    loop: false,
346                    margin: 0,
347                    autoplay: false,
348                    dots: false,
349                    nav: true,
350                    navText: ['<span>Previous</span>', '<span>Next</span>'],
351                    items: 1
352                });
353
354                desktopNewsCarousel.addClass('owl-carousel');
355                desktopNewsCarousel.owlCarousel({
356                    loop: false,
357                    margin: 0,
358                    autoplay: false,
359                    dots: false,
360                    nav: true,
361                    navText: ['<span>Previous</span>', '<span>Next</span>'],
362                    responsive: {
363                        0: {
364                            items: 1
365                        },
366                        1000: {
367                            items: 3
368                        }
369                    }
370                });
371            }
372
373            desktopProcessed = true;
374        }
375    }
376
377    function cloneSlideshowTitle(className) {
378        var title = hpSlideshowTexts.filter('.' + className).children('h2');
379
380        homepageSlideshow.children('h2').remove();
381
382        title.show();
383        title.clone().prependTo(homepageSlideshow);
384        title.hide();
385    }
386}(jQuery, ScrollMagic, TweenMax, TimelineMax, window, document));