Light Mode on Steriods; Move JS to files

1 files changed, 158 insertions, 0 deletions

diff --git a/static/js/postHandler.js b/static/js/postHandler.js
new file mode 100644
index 00000000..c6f169b3
--- /dev/null
+++ b/static/js/postHandler.js
@@ -0,0 +1,158 @@
+function editComment(id) {
+    document.getElementById('comment-body-' + id).style.display = 'none';
+    document.getElementById('edit-form-' + id).style.display = 'block';
+}
+
+function cancelEdit(id) {
+    document.getElementById('comment-body-' + id).style.display = 'block';
+    document.getElementById('edit-form-' + id).style.display = 'none';
+}
+
+function cd() {
+    // we will clear the user cookies
+    document.cookie = 'anonymous_name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'anonymous_email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'anonymous_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    window.location.reload();
+}
+
+function toggleTips() {
+    var tips = document.getElementById('tips');
+    $('#tips').slideToggle('fast');
+}
+
+function toggleGotchas() {
+    var gotchas = document.getElementById('gotchas');
+    $('#gotchas').slideToggle('fast');
+}
+
+function toggleAnon() {
+    $('#ancmClick').toggle();
+    $('#anonymous-comment-form').slideToggle('fast');
+};
+
+function toggleCreds() {
+    $('#creds').slideToggle('fast');
+};
+
+function lightsOff() {
+    // #overlay. Go from 0.8 -> 0.9 opacity
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    var windowWidth = document.documentElement.clientWidth;
+    if (currentStatus == 'off') {
+        $('#overlay').fadeTo('fast', 0.8);
+        if (windowWidth > 480) {
+            $('#sidebar').children().fadeTo('fast', 1);
+            $('#header').fadeTo('fast', 1);
+            $('#footer').fadeTo('fast', 1);
+        }
+        $('#lightsStatus').attr('data-status', 'on');
+        $('#lightsStatus').attr('src', onImage);
+    } else {
+        $('#overlay').fadeTo('fast', 0.9);
+        if (windowWidth > 480) {
+            $('#sidebar').children().fadeTo('fast', 0.2);
+            $('#header').fadeTo('fast', 0.2);
+            $('#footer').fadeTo('fast', 0.2);
+        }
+        $('#lightsStatus').attr('data-status', 'off');
+        $('#lightsStatus').attr('src', offImage);
+    }
+}
+
+function blindMode() {
+    var articleBody = $('#article-body');
+    var currentStatus = $('#blindStatus').attr('data-status');
+    var windowWidth = document.documentElement.clientWidth;
+    if (currentStatus == 'off') {
+        // turn on. On phones set font-size to 16px (<480 units), on desktop set font-size to 13px
+        if (windowWidth < 480) {
+            articleBody.animate({
+                fontSize: '15px'
+              }, 100);             
+        } else {
+            articleBody.animate({
+                fontSize: '13px'
+              }, 100);
+           
+        }
+        $('#blindStatus').attr('data-status', 'on');
+        $('#blindStatus').attr('src', onImage);
+    } else {
+        // turn off. Phones - 12px, Desktop - 11px
+        if (windowWidth < 480) {
+            articleBody.animate({
+                fontSize: '13px'
+            }, 100);
+        } else {
+            articleBody.animate({
+                fontSize: '11px'
+            }, 100);
+        }
+        $('#blindStatus').attr('data-status', 'off');
+        $('#blindStatus').attr('src', offImage);
+    }
+}
+
+var allInputElementsOnPage = $('input');
+
+// If lights are off, then on hover on sidebar .children(), fadeTo 1 for currently hovered child
+$('#sidebar').children().hover(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        $(this).fadeTo('fast', 0.85);
+    }
+}, function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    // if none of the input elements are focused, then fadeTo 0.2
+    if (currentStatus == 'off' && allInputElementsOnPage.is(':focus') == false) {
+        $(this).fadeTo('fast', 0.2);
+    }
+});
+
+// same for header and footer
+$('#header').hover(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        $(this).fadeTo('fast', 0.85);
+    }
+}, function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off' && allInputElementsOnPage.is(':focus') == false) {
+        $(this).fadeTo('fast', 0.2);
+    }
+});
+
+$('#search-form > input[type=text]').blur(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        var isHovered = $('#header').is(':hover');
+        if (isHovered == false) {
+            $('#header').fadeTo('fast', 0.2);
+        }
+    }
+});
+
+$('#login-form > input').blur(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        var isHovered = $('#login-area').is(':hover');
+        if (isHovered == false) {
+            $('#login-area').fadeTo('fast', 0.2);
+        }
+    }
+});
+
+$('#footer').hover(function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        $(this).fadeTo('fast', 0.85);
+    }
+}, function() {
+    var currentStatus = $('#lightsStatus').attr('data-status');
+    if (currentStatus == 'off') {
+        $(this).fadeTo('fast', 0.2);
+    }
+});
+
+