Refactor main pages: extract inline JS

author: yo momma <shutup@oops.wtf> 2026-02-03 02:19:19 +0000
committer: yo momma <shutup@oops.wtf> 2026-02-03 02:19:19 +0000
commit: 8004c1fc7957397577f51a409ec2c504c81d7e85 (patch)
tree: 299f62c7512e45d491dc282784031a770f04abad
parent: c69b6626358052f175543cad0daa3f4aa54046b8 (diff)
9 files changed, 181 insertions, 116 deletions
diff --git a/static/js/pages/frontpage_refresh.js b/static/js/pages/frontpage_refresh.js
new file mode 100644
index 0000000..aa31cc2
--- /dev/null
+++ b/static/js/pages/frontpage_refresh.js
@@ -0,0 +1,11 @@
+// Frontpage-only helper.
+// The legacy frontpage HTML calls `refreshing()` via <body onload="refreshing()">.
+
+if (typeof window.refreshing !== 'function') {
+  window.refreshing = function refreshing() {
+    var el = document.getElementsByName('posts')[0];
+    if (el) { el.src = el.src; }
+    setTimeout(refreshing, 300000);
+  };
+}
+
diff --git a/static/js/pages/fullscreen_front_init.js b/static/js/pages/fullscreen_front_init.js
new file mode 100644
index 0000000..a1a87a5
--- /dev/null
+++ b/static/js/pages/fullscreen_front_init.js
@@ -0,0 +1,18 @@
+// Shared initializer for fullscreen feed pages.
+// Keeps template inline JS mostly data-only (LoggedIn, Timestamp).
+
+(function($){
+  function defaultPop(url) {
+    var newwindow = window.open(
+      url,
+      'name',
+      'height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0'
+    );
+    if (window.focus && newwindow) { newwindow.focus(); }
+    return newwindow;
+  }
+
+  if (typeof window.pop !== 'function') { window.pop = defaultPop; }
+
+  if (typeof window.startChatUpdater === 'function') { $(window.startChatUpdater); }
+})(jQuery);
diff --git a/static/js/pages/fullscreen_init.js b/static/js/pages/fullscreen_init.js
new file mode 100644
index 0000000..a7f8bb7
--- /dev/null
+++ b/static/js/pages/fullscreen_init.js
@@ -0,0 +1,55 @@
+// Initializer for `/fullscreen` (login/register overlays + fullscreen feed).
+// Goal: reduce template inline JS without changing behavior.
+
+(function($){
+  function choice(a) { return a[Math.floor(Math.random() * a.length)]; }
+
+  function defaultPop(url) {
+    var newwindow = window.open(
+      url,
+      'name',
+      'height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0'
+    );
+    if (window.focus && newwindow) { newwindow.focus(); }
+    return newwindow;
+  }
+
+  if (typeof window.pop !== 'function') { window.pop = defaultPop; }
+
+  var urls = [
+    'https://archive.hump.fm/images/20100601/1275428508049-dumpfm-foot-oie_oie_overlay-1.gif',
+    'https://archive.hump.fm/images/20100928/1285728674225-dumpfm-timb-running.unicorn.gif',
+    'https://archive.hump.fm/images/20100726/1280119193796-dumpfm-enso-human-condition.gif',
+    'https://archive.hump.fm/images/20100521/1274415795577-dumpfm-ucnv-mx.gif',
+    'https://archive.hump.fm/images/20100912/1284315873224-dumpfm-Neontoast-1283990707508-dumpfm-crunkus-crabtoon.gif',
+    'https://archive.hump.fm/images/20110927/1317105622918-dumpfm-peachfist-test8scam.gif',
+    'https://archive.hump.fm/images/20110323/1300915179773-dumpfm-blingscience-fishtank.gif',
+    'https://archive.hump.fm/images/20110418/1303108538834-dumpfm-LAVARLAMAR-lettuce_lavarlamar.gif',
+    'https://s3.amazonaws.com/i.asdf.us/im/84/gradient_horse_1318306378_1322355741_ryz_1337322355_ryz.gif',
+    'https://archive.hump.fm/images/20110724/1311552093462-dumpfm-hologrampa-1291586335941-dumpfm-jeeeelings-cat_face_wink_hologrampa-lettuce.gif',
+    'https://s3.amazonaws.com/i.asdf.us/im/be/tt7620731fltt_1315431978.gif'
+  ];
+
+  // Legacy behavior: register these on DOM-ready (historically done via `jQuery(initLogin)`).
+  if (typeof window.initLogin === 'function') { $(window.initLogin); }
+  if (typeof window.startChatUpdater === 'function') { $(window.startChatUpdater); }
+
+  if (window.location && window.location.href.indexOf('nologin') !== -1) {
+    $('#loginbox').hide();
+  }
+
+  var bigImage = document.getElementById('big-image');
+  if (bigImage) { bigImage.innerHTML = "<img src='" + choice(urls) + "'>"; }
+
+  if (typeof window.initFullscreen === 'function') { window.initFullscreen(); }
+  if (typeof window.initRegister === 'function') { window.initRegister(); }
+
+  $('#reglink').click(function(e){
+    e.preventDefault();
+    $('#loginbox').hide();
+    $('#registerbox').show().addClass('b');
+    return false;
+  });
+
+  $('#nickInput').focus();
+})(jQuery);
diff --git a/static/js/pages/log_init.js b/static/js/pages/log_init.js
new file mode 100644
index 0000000..93d27b0
--- /dev/null
+++ b/static/js/pages/log_init.js
@@ -0,0 +1,58 @@
+// Shared initializer for log-like pages (frontpage/log views) that include pichat.js.
+// Keeps templates mostly data-only (Recips, MasonryColumnWidth).
+
+(function($){
+  function initLogIfPresent() {
+    if (typeof window.Recips === 'undefined') { window.Recips = []; }
+    if (typeof window.initLog === 'function') { window.initLog(window.Recips); }
+  }
+
+  function initMasonryIfPresent() {
+    var $posts = $('#posts');
+    if (!$posts.length) { return; }
+    if (typeof $posts.masonry !== 'function') { return; }
+
+    var colWidth = typeof window.MasonryColumnWidth !== 'undefined' ? window.MasonryColumnWidth : 275;
+
+    $posts.masonry({ columnWidth: colWidth });
+    $posts.masonry({ singleMode: true });
+    $posts.masonry({ resizeable: true });
+    $posts.masonry({ animate: true });
+  }
+
+  $(initLogIfPresent);
+  $(window).load(initMasonryIfPresent);
+})(jQuery);
+
+if (typeof window.images_loading_bar !== 'function') {
+  window.images_loading_bar = function images_loading_bar() {
+    try {
+      var imgs = document.getElementsByTagName('img');
+      var total = imgs.length;
+
+      if (!total) {
+        var lb0 = document.getElementById('LB0');
+        if (lb0) { lb0.style.display = 'none'; }
+        return;
+      }
+
+      var loaded = 0;
+      for (var i = 0; i < total; i++) {
+        loaded += imgs[i].complete ? 1 : 0;
+      }
+
+      var lb1 = document.getElementById('LB1');
+      if (lb1) { lb1.style.width = Math.round((loaded / total) * 100) + 'px'; }
+
+      if (loaded === total) {
+        setTimeout(function() {
+          var lb0Done = document.getElementById('LB0');
+          if (lb0Done) { lb0Done.style.display = 'none'; }
+        }, 128);
+      } else {
+        setTimeout(images_loading_bar, 64);
+      }
+    } catch (e) {}
+  };
+}
+
diff --git a/template/frontpage.st b/template/frontpage.st
index efb433c..88c0e25 100755
--- a/template/frontpage.st
+++ b/template/frontpage.st
@@ -1,13 +1,5 @@
 <html>
   <head>
-  <script type="text/javascript">
-function refreshing()
-{
-frm=document.getElementsByName("posts")[0];
-frm.src=frm.src;
-setTimeout("refreshing()",300000);
-}
-</script>
   <title>dump.fm</title>
     <!---HEAD --->
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -27,34 +19,22 @@ setTimeout("refreshing()",300000);
 	    <link href="/static/css/front.css?v=20260130.2" media="screen, projection" rel="stylesheet" type="text/css">
 	    <link href="/static/css/frontpage_legacy.css?v=20260130" media="screen, projection" rel="stylesheet" type="text/css">
 
-    $if(!logged_in)$
-    <script type="text/javascript" src="/static/js/popup.js"></script>
-    $endif$
-
-    <link rel="shortcut icon" href="/static/favicon.ico">
-    
-    <!--END HEAD-->
-	    <script>
-      var Recips = [];
-      jQuery(function() {
-          initLog(Recips)
-      });
-    </script>
-
-  <script> 
-jQuery(window).load(function(){
-		jQuery('#posts').masonry({ columnWidth: 275 });
-		jQuery('#posts').masonry({ singleMode: true });
-			jQuery('#posts').masonry({  resizeable: true });
-				jQuery('#posts').masonry({ animate: true});
+	    $if(!logged_in)$
+	    <script type="text/javascript" src="/static/js/popup.js"></script>
+	    $endif$
 
+	    <link rel="shortcut icon" href="/static/favicon.ico">
+	    
+	    <!--END HEAD-->
+		    <script>
+	      var Recips = [];
+	      var MasonryColumnWidth = 275;
+	    </script>
+		    <script type="text/javascript" src="/static/js/pages/log_init.js?v=20260203"></script>
+		    <script type="text/javascript" src="/static/js/pages/frontpage_refresh.js?v=20260203"></script>
 
-	});
-
-</script> 
-
-    
-        
+	    
+	        
 
     
   </head>
@@ -199,6 +179,6 @@ $debug_log()$
   <span class="loading-bar-label">Loading...</span>
   <span class="loading-bar-track"><span id="LB1" class="loading-bar-fill"></span></span>
 </span>
-<script type="text/javascript">m00=document.getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script> 
+<script type="text/javascript">if (typeof images_loading_bar === "function") { images_loading_bar(); }</script>
   </body>
 </html>
diff --git a/template/fullscreen.st b/template/fullscreen.st
index 5879804..54960fc 100755
--- a/template/fullscreen.st
+++ b/template/fullscreen.st
@@ -5,23 +5,17 @@
 	    <script src="/static/js/pichat.js?v=20260130"></script>
 	    <script src="/static/js/fullscreen.js?v=20260126"></script>
 	    $if(user_nick)$
-	    $else$
-	    <script src="/static/js/register.js"></script>
-	    $endif$
-    <script>
-      var LoggedIn = $if(user_nick)$true$else$false$endif$;
-      var Timestamp = $timestamp$;
-      var newwindow;
-      function pop(url) {
-      newwindow=window.open(url,'name','height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0');
-      if (window.focus) {newwindow.focus()}
-      }
-    </script>
- 
-    <link rel="stylesheet" type="text/css" href="/static/css/fullscreen_box.css?v=20260131">
-    <script>jQuery(initLogin)</script>
-  </head>
-  <body>
+		    $else$
+		    <script src="/static/js/register.js"></script>
+		    $endif$
+	    <script>
+	      var LoggedIn = $if(user_nick)$true$else$false$endif$;
+	      var Timestamp = $timestamp$;
+	    </script>
+	 
+	    <link rel="stylesheet" type="text/css" href="/static/css/fullscreen_box.css?v=20260131">
+	  </head>
+	  <body>
 
 
       $if(user_nick)$
@@ -75,40 +69,8 @@
       </div>
       $endif$
 
-    <div id="big-image"></div>
-    <script>
-      function choice(a) { return a[Math.floor(Math.random()*a.length)] }
-      var urls = [
-        "https://archive.hump.fm/images/20100601/1275428508049-dumpfm-foot-oie_oie_overlay-1.gif",
-        "https://archive.hump.fm/images/20100928/1285728674225-dumpfm-timb-running.unicorn.gif",
-        "https://archive.hump.fm/images/20100726/1280119193796-dumpfm-enso-human-condition.gif",
-        "https://archive.hump.fm/images/20100521/1274415795577-dumpfm-ucnv-mx.gif",
-        "https://archive.hump.fm/images/20100912/1284315873224-dumpfm-Neontoast-1283990707508-dumpfm-crunkus-crabtoon.gif",
-        "https://archive.hump.fm/images/20110927/1317105622918-dumpfm-peachfist-test8scam.gif",
-        "https://archive.hump.fm/images/20110323/1300915179773-dumpfm-blingscience-fishtank.gif",
-        "https://archive.hump.fm/images/20110418/1303108538834-dumpfm-LAVARLAMAR-lettuce_lavarlamar.gif",
-        "https://s3.amazonaws.com/i.asdf.us/im/84/gradient_horse_1318306378_1322355741_ryz_1337322355_ryz.gif",
-        "https://archive.hump.fm/images/20110724/1311552093462-dumpfm-hologrampa-1291586335941-dumpfm-jeeeelings-cat_face_wink_hologrampa-lettuce.gif",
-        "https://s3.amazonaws.com/i.asdf.us/im/be/tt7620731fltt_1315431978.gif"
-      ]
-      if (window.location.href.indexOf("nologin") != -1) {
-        jQuery("#loginbox").hide();
-      }
-      document.getElementById("big-image").innerHTML = "<img src='" + choice(urls) + "'>"
-      initFullscreen()
-      initRegister()
-      jQuery(startChatUpdater)
-      jQuery("#reglink").click(function(e){
-        e.preventDefault();
-        jQuery("#loginbox").hide();
-        jQuery("#registerbox").show().addClass("b");
-        return false;
-      });
-      jQuery("#nickInput").focus();
-      $if(user_nick)$
-      $else$
-      $endif$
-    </script>
-    $google_analytics()$
-  </body>
-</html>
+	    <div id="big-image"></div>
+	    <script type="text/javascript" src="/static/js/pages/fullscreen_init.js?v=20260203"></script>
+	    $google_analytics()$
+	  </body>
+	</html>
diff --git a/template/fullscreen_front.st b/template/fullscreen_front.st
index b0bfb4d..9f0e869 100755
--- a/template/fullscreen_front.st
+++ b/template/fullscreen_front.st
@@ -7,14 +7,9 @@
     <script>
       var LoggedIn = $if(user_nick)$true$else$false$endif$;
       var Timestamp = $timestamp$;
-      var newwindow;
-      function pop(url) {
-      newwindow=window.open(url,'name','height=50,width=400,left=20,top=20,location=0,status=0,scrollbar=0,resizable=0');
-      if (window.focus) {newwindow.focus()}
-      }
-      jQuery(startChatUpdater);
     </script>
-	    <link rel="stylesheet" type="text/css" href="/static/css/fullscreen_base.css?v=20260131">
+    <script type="text/javascript" src="/static/js/pages/fullscreen_front_init.js?v=20260203"></script>
+		    <link rel="stylesheet" type="text/css" href="/static/css/fullscreen_base.css?v=20260131">
     <link rel="stylesheet" type="text/css" href="/static/css/fullscreen_bigtext.css?v=20260129">
   </head>
   <body>
diff --git a/template/newlog.st b/template/newlog.st
index 19b4481..e1f987a 100755
--- a/template/newlog.st
+++ b/template/newlog.st
@@ -43,10 +43,8 @@ window.location = "/error/ie";
 <!--END HEAD-->
 <script>
       var Recips = [];
-      jQuery(function() {
-          initLog(Recips)
-      });
     </script>
+<script type="text/javascript" src="/static/js/pages/log_init.js?v=20260203"></script>
   </head>
  <body>
  
diff --git a/template/simplerlog.st b/template/simplerlog.st
index 7e68473..9acc742 100755
--- a/template/simplerlog.st
+++ b/template/simplerlog.st
@@ -41,24 +41,12 @@ $endif$
 <!--END HEAD-->
 <script>
       var Recips = [];
-      jQuery(function() {
-          initLog(Recips)
-      });
+      var MasonryColumnWidth = 270;
     </script>
+<script type="text/javascript" src="/static/js/pages/log_init.js?v=20260203"></script>
 
-  <script> 
-jQuery(window).load(function(){
-		jQuery('#posts').masonry({ columnWidth: 270 });
-		jQuery('#posts').masonry({ singleMode: true });
-			jQuery('#posts').masonry({  resizeable: true });
-				jQuery('#posts').masonry({ animate: true});
-
-
-	});
-</script> 
-
-    
-        
+	    
+	        
 
     
   </head>
@@ -216,6 +204,6 @@ $debug_log()$
   <span class="loading-bar-label">Loading...</span>
   <span class="loading-bar-track"><span id="LB1" class="loading-bar-fill"></span></span>
 </span>
-<script type="text/javascript">m00=document.getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script> 
+<script type="text/javascript">if (typeof images_loading_bar === "function") { images_loading_bar(); }</script>
   </body>
 </html>
author	yo momma <shutup@oops.wtf>	2026-02-03 02:19:19 +0000
committer	yo momma <shutup@oops.wtf>	2026-02-03 02:19:19 +0000
commit	8004c1fc7957397577f51a409ec2c504c81d7e85 (patch)
tree	299f62c7512e45d491dc282784031a770f04abad
parent	c69b6626358052f175543cad0daa3f4aa54046b8 (diff)