From a79f18a74888636e32033c3b373a4ff6f85a0d9f Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Thu, 24 Nov 2022 23:28:24 -0600
Subject: [PATCH] Make three col pages only reload middle-right content

---
 resources/blog.scss                 |   1 +
 resources/common.js                 | 267 ++++++++++++++--------------
 templates/three-column-content.html | 176 +++++++++++++++++-
 3 files changed, 300 insertions(+), 144 deletions(-)

diff --git a/resources/blog.scss b/resources/blog.scss
index 4883eff..465f058 100644
--- a/resources/blog.scss
+++ b/resources/blog.scss
@@ -267,6 +267,7 @@
 
     #three-col-container {
         display: flex;
+        flex-direction: column;
     }
 
     .middle-content {
diff --git a/resources/common.js b/resources/common.js
index ca30d2b..a4bfb73 100644
--- a/resources/common.js
+++ b/resources/common.js
@@ -28,46 +28,6 @@ if (!String.prototype.endsWith) {
     };
 }
 
-// http://stackoverflow.com/a/1060034/1090657
-$(function () {
-    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);
-    }
-
-    // set the initial state (but only if browser supports the Page Visibility API)
-    if (document[hidden] !== undefined)
-        onchange({type: document[hidden] ? 'blur' : 'focus'});
-});
 
 function register_toggle(link) {
     link.click(function () {
@@ -121,70 +81,6 @@ window.fix_div = function (div, height) {
     });
 };
 
-$(function () {
-    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');
-        });
-    }
-
-    var $nav_list = $('#nav-list');
-    $('#navicon').click(function (event) {
-        event.stopPropagation();
-        $nav_list.toggle();
-        if ($nav_list.is(':hidden'))
-            $(this).blur().removeClass('hover');
-        else {
-            $(this).addClass('hover');
-            $nav_list.find('li ul').css('left', $('#nav-list').width()).hide();
-        }
-    }).hover(function () {
-        $(this).addClass('hover');
-    }, function () {
-        $(this).removeClass('hover');
-    });
-
-    $nav_list.find('li a .nav-expand').click(function (event) {
-        event.preventDefault();
-        $(this).parent().siblings('ul').css('display', 'block');
-    });
-
-    $nav_list.find('li a').each(function () {
-        if (!$(this).siblings('ul').length)
-            return;
-        $(this).on('contextmenu', function (event) {
-            event.preventDefault();
-        }).on('taphold', function () {
-            $(this).siblings('ul').css('display', 'block');
-        });
-    });
-
-    $nav_list.click(function (event) {
-        event.stopPropagation();
-    });
-
-    $('html').click(function () {
-        $nav_list.hide();
-    });
-
-    $.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");
-});
-
 if (!Date.now) {
     Date.now = function () {
         return new Date().getTime();
@@ -251,15 +147,6 @@ function register_time(elems, limit) { // in hours
     });
 }
 
-$(function () {
-    register_time($('.time-with-rel'));
-
-    $('form').submit(function (evt) {
-        // Prevent multiple submissions of forms, see #565
-        $("input[type='submit']").prop('disabled', true);
-    });
-});
-
 window.notification_template = {
     icon: '/logo.png'
 };
@@ -355,14 +242,6 @@ window.register_contest_notification = function(url) {
     setInterval(get_clarifications, 60 * 1000);
 }
 
-$(function () {
-    // Close dismissable boxes
-    $("a.close").click(function () {
-        var $closer = $(this);
-        $closer.parent().fadeOut(200);
-    });
-});
-
 $.fn.textWidth = function () {
     var html_org = $(this).html();
     var html_calc = '<span style="white-space: nowrap;">' + html_org + '</span>';
@@ -372,20 +251,6 @@ $.fn.textWidth = function () {
     return width;
 };
 
-$(function () {
-    $('.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();
-    });
-});
-
 function registerPopper($trigger, $dropdown) {
     const popper = Popper.createPopper($trigger[0], $dropdown[0]);
     $trigger.click(function(e) {
@@ -402,7 +267,132 @@ function registerPopper($trigger, $dropdown) {
     })
 }
 
-$(function() {
+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');
+        });
+    }
+
+    var $nav_list = $('#nav-list');
+    $('#navicon').click(function (event) {
+        event.stopPropagation();
+        $nav_list.toggle();
+        if ($nav_list.is(':hidden'))
+            $(this).blur().removeClass('hover');
+        else {
+            $(this).addClass('hover');
+            $nav_list.find('li ul').css('left', $('#nav-list').width()).hide();
+        }
+    }).hover(function () {
+        $(this).addClass('hover');
+    }, function () {
+        $(this).removeClass('hover');
+    });
+
+    $nav_list.find('li a .nav-expand').click(function (event) {
+        event.preventDefault();
+        $(this).parent().siblings('ul').css('display', 'block');
+    });
+
+    $nav_list.find('li a').each(function () {
+        if (!$(this).siblings('ul').length)
+            return;
+        $(this).on('contextmenu', function (event) {
+            event.preventDefault();
+        }).on('taphold', function () {
+            $(this).siblings('ul').css('display', 'block');
+        });
+    });
+
+    $nav_list.click(function (event) {
+        event.stopPropagation();
+    });
+
+    $('html').click(function () {
+        $nav_list.hide();
+    });
+
+    $.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() {
@@ -410,7 +400,10 @@ $(function() {
         $('#form-lang').submit();
     })
     $('#logout').on('click', () => $('#logout-form').submit());
+}
 
+$(function() {
+    onWindowReady();
     $('#nav-darkmode-icon').on('click', function() {
         if (localStorage.getItem("darkmode") === "true") {
             localStorage.setItem("darkmode", "false");
@@ -421,4 +414,4 @@ $(function() {
             DarkReader.enable();   
         }
     })
-});
\ No newline at end of file
+});
diff --git a/templates/three-column-content.html b/templates/three-column-content.html
index 11a7d0a..73471c0 100644
--- a/templates/three-column-content.html
+++ b/templates/three-column-content.html
@@ -16,17 +16,176 @@
                 margin-left: 0;
             }
         }
+        
+        /* TODO: remove this       */
+        #three-col-container {
+            display: flex;
+            flex-direction: column;
+        }
     </style>
-    {% block three_col_media %}{% endblock %}
 {% 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');
+                });
+            }
+
+            var $nav_list = $('#nav-list');
+            $('#navicon').click(function (event) {
+                event.stopPropagation();
+                $nav_list.toggle();
+                if ($nav_list.is(':hidden'))
+                    $(this).blur().removeClass('hover');
+                else {
+                    $(this).addClass('hover');
+                    $nav_list.find('li ul').css('left', $('#nav-list').width()).hide();
+                }
+            }).hover(function () {
+                $(this).addClass('hover');
+            }, function () {
+                $(this).removeClass('hover');
+            });
+
+            $nav_list.find('li a .nav-expand').click(function (event) {
+                event.preventDefault();
+                $(this).parent().siblings('ul').css('display', 'block');
+            });
+
+            $nav_list.find('li a').each(function () {
+                if (!$(this).siblings('ul').length)
+                    return;
+                $(this).on('contextmenu', function (event) {
+                    event.preventDefault();
+                }).on('taphold', function () {
+                    $(this).siblings('ul').css('display', 'block');
+                });
+            });
+
+            $nav_list.click(function (event) {
+                event.stopPropagation();
+            });
+
+            $('html').click(function () {
+                $nav_list.hide();
+            });
+
+            $.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());
+        }
         $(document).ready(function () {
+            window.addEventListener('popstate', (e) => {
+                window.location.href = e.currentTarget.location.href;
+            });
+
             $('.left-sidebar-item').on('click', function() {
                 var url = $(this).attr('data-href');
+
                 if (url === '#') return;
-                window.location.href = url;
+                $('.left-sidebar-item').removeClass('active');
+                $(this).addClass('active');
+                $.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();
+                    }
+                    else {
+                        window.location.href = url;
+                    }
+                });
             });
             $('.blog-box').on('click', function() {
                 var $description = $(this).children('.blog-description');
@@ -45,7 +204,6 @@
             });
         });
     </script>
-    {% block three_col_js %}{% endblock %}
 {% endblock %}
 
 {% macro make_tab_item(name, fa, url, text) %}
@@ -59,11 +217,15 @@
     {% block before_posts %}{% endblock %}
     <div id="three-col-container">
         {% block left_sidebar %}{% endblock %}
-        <div class="middle-content">
-            {% block middle_title %}{% endblock %}
-            {% block middle_content %}{% endblock %}
+        <div class="middle-right-content" style="display: inline-flex;">
+            {% 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>
-        {% block right_sidebar %}{% endblock %}
     </div>
     {% block after_posts %}{% endblock %}
 {% endblock %}