script.js

/*
 * jQuery v1.9.1 included
 */

$(document).ready(function() {

    $body = $('body');
    $article_sidebar = $body.find('#switchable');
    $btnRecentArticles = $('#closeRecentArticles');

    if (typeof(Storage) !== "undefined") {
        // Code for localStorage/sessionStorage.
        if ( localStorage.view_recent == "false" ) {
            $article_sidebar.addClass("inactive");
            $btnRecentArticles.addClass("inactive");
        }
    }

    $btnRecentArticles.on('click', function() {
        $this = $(this);

        if (!localStorage.view_recent || localStorage.view_recent == "false" ) {
            localStorage.setItem("view_recent", "true");
            $article_sidebar.removeClass("inactive");
            $this.removeClass('inactive');
        } else {
            localStorage.setItem("view_recent", "false");
            $article_sidebar.addClass("inactive");
            $this.addClass('inactive');
        }
    });


    // Smooth scroll
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body,main').animate({
                scrollTop: target.offset().top
            }, 500);
            return false;
        }
    });

    $('.navbar-toggle').on('click', function(){
        $(this).toggleClass('collapsed');
        $('body').toggleClass('sidepanel');
    });

    $('.sidepanel-overlay').on('click', function(){
        $('.navbar-toggle').toggleClass('collapsed');
        $('body').toggleClass('sidepanel');
    });

    $related_article = $body.find('footer').find('.article-related');
    if( $related_article.children().length > 0 ) {
        $related_article.addClass('has-child');
    }

    $('img.img-svg').each(function(){
        var $img = $(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = $(data).find('svg');
            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }
            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');
            // Check if the viewport is set, else we gonna set it if we can.
            if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
                $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
            }
            // Replace image with new SVG
            $img.replaceWith($svg);
        }, 'xml');
    });


    $('.drawer-menu-button').click(function(){
        $('.drawer-menu-button').toggleClass('active');
        $('#drawerMenu').toggleClass('open');
    });

    // Get the modal
    $modal = $('#myModal');
    $modalOverlay = $('#myOverlay');
    $modalButton = $('#myBtn');
    $modalCloseButton = $('#myClose');

    $modalButton.on('click', function(){
        $modal.addClass('on');
        $body.addClass('on-modal');
    })
    $modalCloseButton.on('click', function(){
        $modal.removeClass("on");
        $body.removeClass('on-modal');
    });

    $modalOverlay.on('click', function(){
        $modal.removeClass("on");
        $body.removeClass('on-modal');
    });

  // social share popups
  $(".share a").click(function(e) {
    e.preventDefault();
    window.open(this.href, "", "height = 500, width = 500");
  });


  // show form controls when the textarea receives focus or backbutton is used and value exists
  var $commentContainerTextarea = $(".comment-container textarea"),
    $commentContainerFormControls = $(".comment-form-controls, .comment-ccs");

  $commentContainerTextarea.one("focus", function() {
    $commentContainerFormControls.show();
  });

  if ($commentContainerTextarea.val() !== "") {
    $commentContainerFormControls.show();
  }

  // Expand Request comment form when Add to conversation is clicked
  var $showRequestCommentContainerTrigger = $(".request-container .comment-container .comment-show-container"),
    $requestCommentFields = $(".request-container .comment-container .comment-fields"),
    $requestCommentSubmit = $(".request-container .comment-container .request-submit-comment");

  $showRequestCommentContainerTrigger.on("click", function() {
    $showRequestCommentContainerTrigger.hide();
    $requestCommentFields.show();
    $requestCommentSubmit.show();
    $commentContainerTextarea.focus();
  });

  // Mark as solved button
  var $requestMarkAsSolvedButton = $(".request-container .mark-as-solved:not([data-disabled])"),
    $requestMarkAsSolvedCheckbox = $(".request-container .comment-container input[type=checkbox]"),
    $requestCommentSubmitButton = $(".request-container .comment-container input[type=submit]");

  $requestMarkAsSolvedButton.on("click", function () {
    $requestMarkAsSolvedCheckbox.attr("checked", true);
    $requestCommentSubmitButton.prop("disabled", true);
    $(this).attr("data-disabled", true).closest("form").submit();
  });

  // Change Mark as solved text according to whether comment is filled
  var $requestCommentTextarea = $(".request-container .comment-container textarea");

  $requestCommentTextarea.on("keyup", function() {
    if ($requestCommentTextarea.val() !== "") {
      $requestMarkAsSolvedButton.text($requestMarkAsSolvedButton.data("solve-and-submit-translation"));
      $requestCommentSubmitButton.prop("disabled", false);
    } else {
      $requestMarkAsSolvedButton.text($requestMarkAsSolvedButton.data("solve-translation"));
      $requestCommentSubmitButton.prop("disabled", true);
    }
  });

  // Disable submit button if textarea is empty
  if ($requestCommentTextarea.val() === "") {
    $requestCommentSubmitButton.prop("disabled", true);
  }

  // Submit requests filter form in the request list page
  $("#request-status-select, #request-organization-select")
    .on("change", function() {
      search();
    });

  // Submit requests filter form in the request list page
  $("#quick-search").on("keypress", function(e) {
    if (e.which === 13) {
      search();
    }
  });

  function search() {
    window.location.search = $.param({
      query: $("#quick-search").val(),
      status: $("#request-status-select").val(),
      organization_id: $("#request-organization-select").val()
    });
  }

  $(".header .icon-menu").on("click", function(e) {
    e.stopPropagation();
    var menu = document.getElementById("user-nav");
    var isExpanded = menu.getAttribute("aria-expanded") === "true";
    menu.setAttribute("aria-expanded", !isExpanded);
  });

  if ($("#user-nav").children().length === 0) {
    $(".header .icon-menu").hide();
  }

  // Submit organization form in the request page
  $("#request-organization select").on("change", function() {
    this.form.submit();
  });

  // Toggles expanded aria to collapsible elements
  $(".collapsible-nav, .collapsible-sidebar").on("click", function(e) {
    e.stopPropagation();
    var isExpanded = this.getAttribute("aria-expanded") === "true";
    this.setAttribute("aria-expanded", !isExpanded);
  });
});