NDOJ/templates/three-column-content.html

{% set layout = 'no_wrapper' %}
{% extends "base.html" %}
{% block title_row %}{% endblock %}
{% block title_ruler %}{% endblock %}

{% block media %}
  <style>
    #content {
      width: 100%;
      margin-left: 0;
    }

    @media(min-width: 800px) {
      .middle-right-content {
        margin-left: 13%;
        display: flex;
        margin-right: 2%;
      }
    }

    @media(max-width: 799px) {
      .middle-right-content {
        display: block;
      }
    }
  </style>
{% endblock %}

{% block js_media %}
  <script type="text/javascript">
    let loadingPage;

    function activateBlogBoxOnClick() {
      $('.blog-box').on('click', function () {
        var $description = $(this).children('.blog-description');
        var max_height = $description.css('max-height');
        if (max_height !== 'fit-content') {
          $description.css('max-height', 'fit-content');
          $(this).css('cursor', 'auto');
          $(this).removeClass('pre-expand-blog');
          $(this).children().children('.show-more').hide();
        }
      });

      $('.blog-box').each(function () {
        var $precontent = $(this).children('.blog-description').height();
        var $content = $(this).children().children('.content-description').height();
        if ($content == undefined) {
          $content = $(this).children().children('.md-typeset').height()
        }
        if ($content > $precontent - 30) {
          $(this).addClass('pre-expand-blog');
          $(this).css('cursor', 'pointer');
        } else {
          $(this).children().children('.show-more').hide();
        }
      });
    }

    function navigateTo($elem, update_sidebar = false) {
      var url = $elem.attr('href');

      if (url === '#') return;
      if (update_sidebar) {
        $('.left-sidebar-item').removeClass('active');
        $elem.addClass('active');
      }
      $(window).off("scroll");
      $('.middle-right-content').html(loadingPage);
      $.get(url, function (data) {
        var reload_content = $(data).find('.middle-right-content');
        var bodyend_script = $(data).find('#extra_js');
        if (reload_content.length) {
          window.history.pushState("", "", url);
          $('html, body').animate({scrollTop: 0}, 'fast');
          $('.middle-right-content').html(reload_content.first().html());
          $('#extra_js').html(bodyend_script.first().html());
          $("#loading-bar").hide().css({ width: 0});
          if (reload_content.hasClass("wrapper")) {
            $('.middle-right-content').addClass("wrapper");
          }
          else {
            $('.middle-right-content').removeClass("wrapper");
          }
          $(document).prop('title', $(data).filter('title').text());
          renderKatex($('.middle-right-content')[0]);
          onWindowReady();
          activateBlogBoxOnClick();
          $('.xdsoft_datetimepicker').hide();
          registerNavigation();
        }
        else {
          window.location.href = url;
        }
      });
    }

    function registerNavigation() {
      const links = ['.pagination a', '.tabs li a'];
      for (link of links) {
        $(link).on('click', function (e) {
          e.preventDefault();
          navigateTo($(this));
        })
      }
    }

    $(function () {
      window.addEventListener('popstate', (e) => {
        window.location.href = e.currentTarget.location.href;
      });
      activateBlogBoxOnClick();

      $('.left-sidebar-item').on('click', function (e) {
        e.preventDefault();
        navigateTo($(this), true);
      });
      registerNavigation();
      $.get("{{static('html/loading-page.html')}}", function(data) {
        loadingPage = data;
      });
    });
  </script>
{% endblock %}

{% macro make_tab_item(name, fa, url, text) %}
  <a class="left-sidebar-item {% if page_type == name %}active{% endif %}" href="{{ url }}" id="{{ name }}-tab">
    <span class="sidebar-icon"><i class="{{ fa }}"></i></span>
    <span class="sidebar-text">{{ text }}</span>
  </a>
{% endmacro %}

{% block body %}
  {% block before_posts %}{% endblock %}
  <div id="three-col-container">
    {% block left_sidebar %}{% endblock %}
    <div class="middle-right-content {{'wrapper' if is_two_column}}">
      {% block three_col_media %}{% endblock %}
      <div class="middle-content">
        {% block middle_title %}{% endblock %}
        {% block middle_content %}{% endblock %}
      </div>
      {% block right_sidebar %}{% endblock %}
    </div>
  </div>
  {% block after_posts %}{% endblock %}
{% endblock %}

{% block extra_js %}
  {% block three_col_js %}{% endblock %}
{% endblock %}

{% block bodyend %}
  {{ super() }}
  {% include "comments/math.html" %}
{% endblock %}