chrome/browser/resources/security_warnings/interstitial_v2_mobile.js

   1 // Copyright 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 var mobileNav = false;
   6
   7 /**
   8  * For small screen mobile the navigation buttons are moved
   9  * below the advanced text.
  10  */
  11 function onResize() {
  12   var helpOuterBox = document.querySelector('#details');
  13   var mainContent = document.querySelector('#main-content');
  14   var mediaQuery = '(min-width: 240px) and (max-width: 420px) and ' +
  15       '(orientation: portrait), (max-width: 736px) and ' +
  16       '(max-height: 420px) and (orientation: landscape)';
  17   var detailsHidden = helpOuterBox.classList.contains('hidden');
  18   var runnerContainer = document.querySelector('.runner-container');
  19
  20   // Check for change in nav status.
  21   if (mobileNav != window.matchMedia(mediaQuery).matches) {
  22     mobileNav = !mobileNav;
  23
  24     // Handle showing the top content / details sections according to state.
  25     if (mobileNav) {
  26       mainContent.classList.toggle('hidden', !detailsHidden);
  27       helpOuterBox.classList.toggle('hidden', detailsHidden);
  28       if (runnerContainer) {
  29         runnerContainer.classList.toggle('hidden', !detailsHidden);
  30       }
  31     } else if (!detailsHidden) {
  32       // Non mobile nav with visible details.
  33       mainContent.classList.remove('hidden');
  34       helpOuterBox.classList.remove('hidden');
  35       if (runnerContainer) {
  36         runnerContainer.classList.remove('hidden');
  37       }
  38     }
  39   }
  40 }
  41
  42 function setupMobileNav() {
  43   window.addEventListener('resize', onResize);
  44   onResize();
  45 }
  46
  47 document.addEventListener('DOMContentLoaded', setupMobileNav);