support sorting

rebuild.php

@@ -151,6 +151,7 @@ class CProject {
 	public $projname;
 	public $shortdesc = '(no description)';
 	public $subtag = '';
+	public $lastupdate = 0;
 	private $longdesc = '';
 	private $images = array();
 	private $downloads = array();
@@ -169,6 +170,8 @@ class CProject {
 			if ($file[0] == '.') continue;
 			
 			if ($file == 'README.txt') {
+				$this->lastupdate = max($this->lastupdate, filectime($this->dir.$file)); // don't count README updates
+				
 				$this->longdesc = file_get_contents($this->dir.'README.txt');
 				$matches = array();
 				if (preg_match('~Written in ([^\\r\\n]+)~', $this->longdesc, $matches)) {
@@ -184,7 +187,13 @@ class CProject {
 				$this->shortdesc[0] = strtolower($this->shortdesc[0]); // cosmetic lowercase
 				continue;
 			}
-			
+						
+			$this->lastupdate = max(
+				$this->lastupdate,
+				filemtime($this->dir.$file),
+				filectime($this->dir.$file)
+			);
+						
 			if (is_image($file)) {
 				$this->images[] = $file;
 			} else {
@@ -360,6 +369,8 @@ function buildcommon() {
 	$handles = array();
 	$handle_lookup = array();
 	
+	$alphasort = [];
+	
 	foreach($projects as $dirname => $projectname) {
 
 		$pr = new CProject($dirname, $projectname);
@@ -373,6 +384,18 @@ function buildcommon() {
 			$handle_lookup[$projectname] = count($handles);
 			$handles[] = $pr->homeimage;
 		}
+		
+		$alphasort[] = [$pr->projname, count($plist)-1];
+	}
+	
+	usort($alphasort, function($a, $b) {
+		return strcasecmp($a[0], $b[0]);
+	});
+	
+	$alphaidx = [];
+	
+	foreach($alphasort as $a) {
+		$alphaidx[ $a[1] ] = count($alphaidx);
 	}
 
 	// Build homepage spritesheet
@@ -391,9 +414,13 @@ function buildcommon() {
 		<!-- }} --> 
 	<?php } ?> 
 		
-		<table class="projtable">
+		<table id="projtable-main" class="projtable">
-	<?php foreach ($plist as $pr) { ?> 
+	<?php foreach ($plist as $i => $pr) { ?> 
-			<tr class="<?=$pr->getClassAttr()?>">
+			<tr class="<?=$pr->getClassAttr()?>"
+				data-sort-mt="-<?=$pr->lastupdate?>"
+				data-sort-ct="<?=$i?>"
+				data-sort-al="<?=$alphaidx[$i]?>"
+			>
 				<td>
 					<a href="<?=hesc(urlencode($pr->projname))?>.html"><?=(is_null($handle_lookup[$pr->projname]) ? '<div class="no-image"></div>' : '<div class="homeimage homeimage-sprite" style="background-position:0 -'.($handle_lookup[$pr->projname]*INDEX_THUMB_H).'px"></div>')?></a>
 				</td>

sites/code.ivysaur.me/homepage_blurb.htm

@@ -16,5 +16,11 @@
 </p>
 
 <p>
+	<select id="sortorder" style="float:right;">
+		<option value="a">Youngest project first</option>
+		<option value="b">Recent updates first</option>
+		<option value="c">Alphabetical</option>
+	</select>
+	
 	<strong>PROJECTS</strong>
 </p>

sites/codesite.example.com/homepage_blurb.htm

@@ -4,5 +4,11 @@
 </p>
 
 <p>
+	<select id="sortorder" style="float:right;">
+		<option value="a">Youngest project first</option>
+		<option value="b">Recent updates first</option>
+		<option value="c">Alphabetical</option>
+	</select>
+	
 	<strong>PROJECTS</strong>
-</p>
+</p>

static_global/site.js

@@ -33,14 +33,65 @@
 	};
 
 	var get_show_tag = function(tag) {
-		return function() { show_tag(tag); return false; };
+		return function() {
+			show_tag(tag);
+			return false;
+		};
 	};
 
+	var sort_rows = function(cb) {
+		var tr = document.querySelectorAll(".projtable tr");
+		var items = [];
+		for (var i = 0, e = tr.length; i !== e; ++i) {
+			items.push([i, cb(tr[i])]);
+		}
+		items.sort(function(a, b) {
+			return (a[1] - b[1]);
+		});
+		for (var i = 0, e = items.length; i !== e; ++i) {
+			var el = tr[items[i][0]];
+			var parent = el.parentElement;
+			parent.removeChild(el);
+			parent.appendChild(el);
+		}
+	};
+	
+	var sort_update = function() {
+		var cb;
+		switch(document.getElementById('sortorder').value) {
+			case 'a':
+			default: {
+				cb = function(el) {
+					return el.getAttribute('data-sort-ct');
+				};
+			} break;
+			
+			case 'b': {
+				cb = function(el) {
+					return el.getAttribute('data-sort-mt');
+				}
+			} break;
+			
+			case 'c': {
+				cb = function(el) {
+					return el.getAttribute('data-sort-al');
+				}
+			} break;
+		};
+		sort_rows(cb);
+	};
+	
 	window.addEventListener('load', function() {
 		var taglinks = document.querySelectorAll(".tag-link");
 		for (var i = 0, e = taglinks.length; i !== e; ++i) {
 			var tag = taglinks[i].getAttribute("data-tag");
 			taglinks[i].addEventListener('click', get_show_tag(tag));
 		}
+		
+		var so = document.getElementById('sortorder');
+		if (so) {
+			so.addEventListener('change', sort_update);
+			sort_update();
+		}
 	});
-})();
+})();