NDOJ/templates/three-column-content.html

{% extends "base.html" %}
{% block title_row %}{% endblock %}
{% block title_ruler %}{% endblock %}

{% block media %}
    <style>
        @media(min-width: 800px) {
            #content {
                width: 98%;
                margin-left: 0;
            }
            .middle-right-content {
                margin-left: 13%;
                display: inline-flex;
            }
            
            /* TODO: remove this */
            .middle-content {
                margin-left: 0;
                max-width: 75%;
                width: -webkit-fill-available;
            }
            .blog-sidebar, .right-sidebar {
                width: 25%;
            }
        }
        @media(max-width: 799px) {
            #content {
                width: 100%;
                margin-left: 0;
            }
            .middle-right-content {
                display: block;
            }
        }

        /* TODO: remove this       */
        #three-col-container {
            display: flex;
            flex-direction: column;
        }
    </style>
{% endblock %}

{% block js_media %}
    <script type="text/javascript">
        // TODO: remove this 
        function onWindowReady() {
            // http://stackoverflow.com/a/1060034/1090657
            var hidden = 'hidden';

            // Standards:
            if (hidden in document)
                document.addEventListener('visibilitychange', onchange);
            else if ((hidden = 'mozHidden') in document)
                document.addEventListener('mozvisibilitychange', onchange);
            else if ((hidden = 'webkitHidden') in document)
                document.addEventListener('webkitvisibilitychange', onchange);
            else if ((hidden = 'msHidden') in document)
                document.addEventListener('msvisibilitychange', onchange);
            // IE 9 and lower:
            else if ('onfocusin' in document)
                document.onfocusin = document.onfocusout = onchange;
            // All others:
            else
                window.onpageshow = window.onpagehide
                    = window.onfocus = window.onblur = onchange;

            function onchange(evt) {
                var v = 'window-visible', h = 'window-hidden', evtMap = {
                    focus: v, focusin: v, pageshow: v, blur: h, focusout: h, pagehide: h
                };

                evt = evt || window.event;
                if (evt.type in evtMap)
                    document.body.className = evtMap[evt.type];
                else
                    document.body.className = this[hidden] ? 'window-hidden' : 'window-visible';

                if ('$' in window)
                    $(window).trigger('dmoj:' + document.body.className);
            }

            $('.tabs').each(function () {
                var $this = $(this), $h2 = $(this).find('h2'), $ul = $(this).find('ul');
                var cutoff = ($h2.textWidth() || 400) + 20, handler;
                $ul.children().each(function () {
                    cutoff += $(this).width();
                });
                $(window).resize(handler = function () {
                    $this.toggleClass('tabs-no-flex', $this.width() < cutoff);
                });
                handler();
            });

            // set the initial state (but only if browser supports the Page Visibility API)
            if (document[hidden] !== undefined)
                onchange({type: document[hidden] ? 'blur' : 'focus'});

            $("a.close").click(function () {
                var $closer = $(this);
                $closer.parent().fadeOut(200);
            });

            register_time($('.time-with-rel'));

            if (typeof window.orientation !== 'undefined') {
                $(window).resize(function () {
                    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                    // $('#viewport').attr('content', width > 480 ? 'initial-scale=1' : 'width=480');
                });
            }

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!(/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type)) && !this.crossDomain)
                        xhr.setRequestHeader('X-CSRFToken', $.cookie('csrftoken'));
                }
            });

            setTimeout(() => {
                $("[data-src]img").each(function() {
                    $(this).attr("src", $(this).attr("data-src"));
                })
                $("[data-src]iframe").each(function() {
                    $(this).attr("src", $(this).attr("data-src"));
                })
            }, "100");

            $('form').submit(function (evt) {
                // Prevent multiple submissions of forms, see #565
                $("input[type='submit']").prop('disabled', true);
            });

            registerPopper($('#nav-lang-icon'), $('#lang-dropdown'));
            registerPopper($('#user-links'), $('#userlink_dropdown'));
            $('.lang-dropdown-item').click(function() {
                $('select[name="language"]').val($(this).attr('value'));
                $('#form-lang').submit();
            })
            $('#logout').on('click', () => $('#logout-form').submit());
        }

        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');
                }
            })
            $('.blog-box').each(function() {
                if ($(this).prop('scrollHeight') > $(this).height() ) {
                    $(this).addClass('pre-expand-blog');
                    $(this).css('cursor', 'pointer');
                }
            });
        }

        function navigateTo($elem) {
            var url = $elem.attr('data-href') || $elem.attr('href');

            if (url === '#') return;
            $('.left-sidebar-item').removeClass('active');
            $elem.addClass('active');
            $('.middle-right-content').html(loading_page);
            $.get(url, function(data) {
                var reload_content = $(data).find('.middle-right-content');

                if (reload_content.length) {
                    window.history.pushState("", "", url);
                    $('.middle-right-content').html(reload_content.first().html());
                    MathJax.typeset($('.middle-right-content')[0]);
                    onWindowReady();
                    activateBlogBoxOnClick();
                    $('.xdsoft_datetimepicker').hide();
                }
                else {
                    window.location.href = url;
                }
            });
        }

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

            $('.left-sidebar-item').on('click', function() {
                navigateTo($(this));
            });
        });
    </script>
{% endblock %}

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

{% block body %}
    {% block before_posts %}{% endblock %}
    <div id="three-col-container">
        {% block left_sidebar %}{% endblock %}
        <div class="middle-right-content">
            {% block three_col_media %}{% endblock %}
            {% block three_col_js %}{% 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 bodyend %}
    {{ super() }}
    {% if REQUIRE_JAX %}
        {% include "mathjax-load.html" %}
    {% endif %}
    {% include "comments/math.html" %}
{% endblock %}