causeway-standard-theme/causeway/js/responsive/responsive.js

(function (window, $) {
  'use strict';

  var siteMenuHolder = $('.navbar.site-menu'),
    siteMenu = $('.nav.navbar-nav', siteMenuHolder),
    breadcumb = $('.breadcrumb', siteMenuHolder),
    additionalInfo= $('.additional-nav-info', siteMenuHolder),
    additionalMenu = $('.additional-nav-info .additional-menu');

  var getBrowserWidth = function () {
    return window.innerWidth;
  };

  var getBrowserHeight = function () {
    return window.innerHeight;
  };

  var moveElement = function ($el, $dest, pre) {
    if (pre) {
      $el.clone(true).prependTo($dest);
    } else {
      $el.clone(true).appendTo($dest);
    }
    $el.remove();
  };

  var wrapElement = function (el, wrapper) {
    el.wrapAll(wrapper);
  };

  var unWrapElement = function (el) {
    el.unwrap();
  };

  var browserWidth = getBrowserWidth(),
    browserHeight = getBrowserHeight();

  if (browserWidth < 992) {

    moveElement(breadcumb, additionalMenu)
    moveElement(siteMenu, additionalMenu);
    wrapElement($('> ol, > ul', additionalMenu), '<div class="site-menu-wrapper" style="height:' + (browserHeight - 80) + 'px">');



    $('a', additionalMenu).removeAttr('data-toggle');
    $('a', additionalMenu).removeAttr('data-hover');

    jQuery(document).on('nf-open', function () {
      additionalMenu.removeClass('open');
      $('.shell-left-navigation').removeClass('open');
      $('body').removeClass('site-menu-open', 'left-nav-open');
      $('.resp-back').removeClass('visible');
      $('body').addClass('notification-content-open');
    });

    jQuery(document).on('nf-close', function () {
      $('body').removeClass('notification-content-open');
    });

    additionalMenu.on('click', function (e) {
     //e.preventDefault();
      if ($('.glyphicon-threeLine-menu', $(this)).is(e.target) || $('> a', additionalMenu).is(e.target)) {
        $(this).toggleClass('open');
        $('body').toggleClass('site-menu-open');
        if ($(this).hasClass('open')) {
          $('.resp-back').addClass('visible');
        } else {
          $('.resp-back').removeClass('visible');
        }
      }
    });

    $('.nav.navbar-nav li.dropdown > a, .breadcrumb li.dropdown > a', additionalMenu).on('click', function (e) {
      var $this = $(this),
        $parent = $this.parent('li.dropdown');
      e.preventDefault();
      $parent.toggleClass('open');
      $('.resp-back > span').text($this.text());
      if ($parent.hasClass('open')) {
        $('.resp-back > a').addClass('visible');
      } else {
        $('.resp-back > a').removeClass('visible');
      }
    });

    $('.nav.navbar-nav li.dropdown-submenu > a', additionalMenu).on('click', function (e) {
      var $this = $(this),
        $parent = $this.parent('li.dropdown-submenu');
      e.preventDefault();
      $('.resp-back > span').text($this.text());
      $parent.toggleClass('open');

    });

    $('.nav.navbar-nav li > a', additionalMenu).not($('.nav.navbar-nav li.dropdown > a', additionalMenu)).not($('.nav.navbar-nav li.dropdown-submenu > a', additionalMenu)).on('click', function () {
      var $this = $(this),
        $parents = $this.parents('li.open', additionalMenu);
      $parents.removeClass('open');
      additionalMenu.removeClass('open');
      $('body').removeClass('site-menu-open');
      window.location = $this.attr('href');
    });

    $('.breadcrumb li > a', additionalMenu).not($('.breadcrumb li.dropdown > a', additionalMenu)).not($('.breadcrumb li.dropdown-submenu > a', additionalMenu)).on('click', function () {
      var $this = $(this),
        $parents = $this.parents('li.open', additionalMenu);
      $parents.removeClass('open');
      additionalMenu.removeClass('open');
      $('body').removeClass('site-menu-open');
      window.location = $this.attr('href');
    });

    $('.resp-back > a').on('click', function () {

      var toBeClosedObject = $('li.dropdown-submenu.open');
      toBeClosedObject = toBeClosedObject.length === 0 ? $('li.dropdown.open') : toBeClosedObject;
      var length = toBeClosedObject.length;
      var toBeClosed = toBeClosedObject[length - 1];
      $(toBeClosed).removeClass('open');

      var title = $('a:first', $('.navbar-nav li.open')).last().text() || 'MENU';
      $('.resp-back > span').text(title);
      if (title === 'MENU') {
        $(this).removeClass('visible');
      }
    });

    //  left navigation
    $('.divider-navigation .handle').on('click', function () {

      $(this).parents('.shell-left-navigation').toggleClass('open');
      $('body').toggleClass('left-nav-open');
    });

  }


  // Wizard
  if(window.Causeway.getDevice() !== 'lg-desktop' && window.Causeway.getDevice() !== 'desktop') {
    var wizard = $('.wizard');
    wizard.each(function() {
      var $this = $(this),
        steps = $('li', $this).not('.wizard-description'),
        noOfSteps = steps.length,
        currentStep = steps.filter('.current'),
        currentStepNo = $('span', currentStep).text();
      currentStep.append($('<span class="step-counter">').text(currentStepNo + '/' + noOfSteps));
    });
  }

  //  Date and Time field
  var datetime = $('.form-group.date, .form-group.time').not('.disabled, .readonly'),
    tField = $('input[type=text]', datetime);

   window.Causeway.readOnlyForDateAndTime = function(field, bw) {
    field.each(function(){
      var $this = $(this);
      if (bw < 992) {
        if (!$this.attr('readonly')) {
          $this.attr('readonly', 'readonly');
          $this.addClass('toggle-device-readonly');
        }
      } else {
        $this.removeAttr('readonly');
        $this.removeClass('toggle-device-readonly');
      }
    })
  };

  window.Causeway.readOnlyForDateAndTime(tField, browserWidth);
  $(window).resize(function () {

    browserWidth = getBrowserWidth();
    browserHeight = getBrowserHeight();

    if (browserWidth < 992) {
      if (additionalMenu.has('.nav.navbar-nav').length === 0 || additionalMenu.has('.breadcrumb').length === 0) {
        var updatedSiteHeader = $('.breadcrumb', siteMenuHolder);
        var updatedSiteMenu = $('.nav.navbar-nav', siteMenuHolder);
        moveElement(updatedSiteHeader, additionalMenu);
        moveElement(updatedSiteMenu, additionalMenu);
        wrapElement($('> ol, > ul', additionalMenu), '<div class="site-menu-wrapper">');
      }

      if ($('.navigation-pane-left').length > 0) {
        //  left navigation reset style on resize
        $('.navigation-pane-left')[0].style.height = '';
        $('.navigation-pane-left')[0].style.width = '';
        $('.divider-navigation')[0].style.left = '';
        $('.navigation-pane-right')[0].style.marginLeft = '';
        //console.log('resize');
      }

      // two Pane Vertical
      if ($('.two-pane-vertical').length > 0) {
        if ($('.two-pane-vertical').find('.tab-pane').length === 0) {
          var pane = $('.pane-left,.pane-right', $('.two-pane-vertical'));
          pane.wrap('<div class=tab-pane>');
          var tabPane = $('.tab-pane', $('.two-pane-vertical'));
          tabPane.first().addClass('active');
          tabPane.wrapAll('<div class=tab-content>');
          $('.nav-tabs a').each(function (i) {
            var idVal = $(this).attr('href').replace('#', '');
            tabPane[i].id = idVal;
          });
        }
      }

      // two Pane Horizontal
      if ($('.two-pane-horizontal').length > 0) {
        if ($('.two-pane-horizontal').find('.tab-pane').length === 0) {
          var paneH = $('.pane-top,.pane-bottom', $('.two-pane-horizontal'));
          paneH.wrap('<div class=tab-pane>');
          var tabPaneH = $('.tab-pane', $('.two-pane-horizontal'));
          tabPaneH.first().addClass('active');
          tabPaneH.wrapAll('<div class=tab-content>');
          $('.nav-tabs a').each(function (i) {
            var idVal = $(this).attr('href').replace('#', '');
            tabPaneH[i].id = idVal;
          });
        }
      }

    } else {
      if (siteMenuHolder.has('>.nav.navbar-nav').length === 0 || siteMenuHolder.has('.breadcrumb').length === 0) {
        var movedSiteHeader = $('.breadcrumb', additionalMenu);
        var movedSiteMenu = $('.nav.navbar-nav', additionalMenu);
        moveElement(movedSiteHeader, additionalInfo, 'pre');
        moveElement(movedSiteMenu, siteMenuHolder, 'pre');
        unWrapElement($('> div > ul.dropdown-menu', additionalMenu));
      }

      // two Pane Vertical
      if ($('.two-pane-vertical').length > 0) {
        if ($('.two-pane-vertical').find('.tab-content').length > 0) {
          var pane1 = $('.pane-left,.pane-right', $('.two-pane-vertical'));
          pane1.unwrap().unwrap();
        }
      }

      // two Pane Horizontal
      if ($('.two-pane-horizontal').length > 0) {
        if ($('.two-pane-horizontal').find('.tab-content').length > 0) {
          var pane2 = $('.pane-top,.pane-bottom', $('.two-pane-horizontal'));
          pane2.unwrap().unwrap();
        }
      }

    }
    $('.site-menu-wrapper').height(browserHeight - 80);

    window.Causeway.readOnlyForDateAndTime(tField, browserWidth);
  });

}(window, jQuery));