Added alphabetical sorting by title, see #7

kezz · Sep 9, 2017 · e71a8fb · e71a8fb
1 parent ca53503
commit e71a8fb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 32 deletions.
diff --git a/src/js/card-compiled.js b/src/js/card-compiled.js
@@ -19,99 +19,104 @@
     return "width: "
       + alias2(alias1((depth0 != null ? depth0.width : depth0), depth0))
       + "; height: "
-      + alias2(alias1((depth0 != null ? depth0.height : depth0), depth0));
+      + alias2(alias1((depth0 != null ? depth0.height : depth0), depth0))
+      + ";";
   },"10":function(container,depth0,helpers,partials,data) {
     return container.escapeExpression(container.lambda((depth0 != null ? depth0.style : depth0), depth0));
   },"12":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+    return container.escapeExpression(container.lambda(((stack1 = (depth0 != null ? depth0.title : depth0)) != null ? stack1.text : stack1), depth0));
+  },"14":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
 
     return "    <div class=\"card-image\">\r\n      "
-      + ((stack1 = helpers["with"].call(alias1,(depth0 != null ? depth0.image : depth0),{"name":"with","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["with"].call(alias1,(depth0 != null ? depth0.image : depth0),{"name":"with","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\r\n      "
-      + ((stack1 = helpers["if"].call(alias1,((stack1 = (data && data.root)) && stack1.title),{"name":"if","hash":{},"fn":container.program(16, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(alias1,((stack1 = (data && data.root)) && stack1.title),{"name":"if","hash":{},"fn":container.program(18, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\r\n    </div>\r\n";
-  },"13":function(container,depth0,helpers,partials,data) {
+  },"15":function(container,depth0,helpers,partials,data) {
     var stack1;
 
     return "<img src=\""
       + container.escapeExpression(container.lambda((depth0 != null ? depth0.src : depth0), depth0))
       + "\""
-      + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.style : depth0),{"name":"if","hash":{},"fn":container.program(14, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.style : depth0),{"name":"if","hash":{},"fn":container.program(16, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + ">";
-  },"14":function(container,depth0,helpers,partials,data) {
+  },"16":function(container,depth0,helpers,partials,data) {
     return " style=\""
       + container.escapeExpression(container.lambda((depth0 != null ? depth0.style : depth0), depth0))
       + "\"";
-  },"16":function(container,depth0,helpers,partials,data) {
+  },"18":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=container.lambda, alias2=container.escapeExpression;
 
     return "<span class=\"card-title "
       + alias2(alias1(((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.colour), depth0))
       + "-text "
-      + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.brightness),{"name":"if","hash":{},"fn":container.program(17, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.brightness),{"name":"if","hash":{},"fn":container.program(19, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\">"
       + alias2(alias1(((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.text), depth0))
       + "</span>";
-  },"17":function(container,depth0,helpers,partials,data) {
+  },"19":function(container,depth0,helpers,partials,data) {
     var stack1;
 
     return "text-"
       + container.escapeExpression(container.lambda(((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.brightness), depth0));
-  },"19":function(container,depth0,helpers,partials,data) {
+  },"21":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-    return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.title : depth0),{"name":"if","hash":{},"fn":container.program(20, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
-  },"20":function(container,depth0,helpers,partials,data) {
+    return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.title : depth0),{"name":"if","hash":{},"fn":container.program(22, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+  },"22":function(container,depth0,helpers,partials,data) {
     var stack1;
 
-    return ((stack1 = helpers["with"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.title : depth0),{"name":"with","hash":{},"fn":container.program(21, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
-  },"21":function(container,depth0,helpers,partials,data) {
+    return ((stack1 = helpers["with"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.title : depth0),{"name":"with","hash":{},"fn":container.program(23, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+  },"23":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=container.lambda, alias2=container.escapeExpression;
 
     return "<span class=\"card-title "
       + alias2(alias1((depth0 != null ? depth0.colour : depth0), depth0))
       + "-text "
-      + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.brightness : depth0),{"name":"if","hash":{},"fn":container.program(22, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.brightness : depth0),{"name":"if","hash":{},"fn":container.program(24, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\">"
       + alias2(alias1((depth0 != null ? depth0.text : depth0), depth0))
       + "</span>";
-  },"22":function(container,depth0,helpers,partials,data) {
+  },"24":function(container,depth0,helpers,partials,data) {
     return "text-"
       + container.escapeExpression(container.lambda((depth0 != null ? depth0.brightness : depth0), depth0));
-  },"24":function(container,depth0,helpers,partials,data) {
+  },"26":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=container.lambda, alias2=container.escapeExpression;
 
     return "<p class=\""
       + alias2(alias1((depth0 != null ? depth0.colour : depth0), depth0))
       + "-text "
-      + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.brightness : depth0),{"name":"if","hash":{},"fn":container.program(22, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.brightness : depth0),{"name":"if","hash":{},"fn":container.program(24, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\">"
       + alias2(alias1((depth0 != null ? depth0.text : depth0), depth0))
       + "</p>";
-  },"26":function(container,depth0,helpers,partials,data) {
+  },"28":function(container,depth0,helpers,partials,data) {
     var stack1;
 
     return "    <div class=\"card-action\">\r\n      "
-      + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? depth0.actions : depth0)) != null ? stack1.urls : stack1),{"name":"each","hash":{},"fn":container.program(27, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? depth0.actions : depth0)) != null ? stack1.urls : stack1),{"name":"each","hash":{},"fn":container.program(29, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\r\n    </div>\r\n";
-  },"27":function(container,depth0,helpers,partials,data) {
+  },"29":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=container.lambda, alias2=container.escapeExpression, alias3=depth0 != null ? depth0 : (container.nullContext || {});
 
     return "<a href=\""
       + alias2(alias1((depth0 != null ? depth0.url : depth0), depth0))
       + "\">\r\n        <span class=\""
-      + ((stack1 = helpers["if"].call(alias3,((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.colour),{"name":"if","hash":{},"fn":container.program(28, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-      + ((stack1 = helpers["if"].call(alias3,((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.brightness),{"name":"if","hash":{},"fn":container.program(30, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(alias3,((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.colour),{"name":"if","hash":{},"fn":container.program(30, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(alias3,((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.brightness),{"name":"if","hash":{},"fn":container.program(32, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\">"
       + alias2(alias1((depth0 != null ? depth0.text : depth0), depth0))
       + "</span>\r\n      </a>";
-  },"28":function(container,depth0,helpers,partials,data) {
+  },"30":function(container,depth0,helpers,partials,data) {
     var stack1;
 
     return " "
       + container.escapeExpression(container.lambda(((stack1 = ((stack1 = (data && data.root)) && stack1.title)) && stack1.colour), depth0))
       + "-text";
-  },"30":function(container,depth0,helpers,partials,data) {
+  },"32":function(container,depth0,helpers,partials,data) {
     var stack1;
 
     return " text-"
@@ -127,14 +132,16 @@
       + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.size : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + " "
       + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.style : depth0),{"name":"if","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + "\"\r\n     data-name=\""
+      + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.title : depth0),{"name":"if","hash":{},"fn":container.program(12, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\">\r\n"
-      + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.image : depth0),{"name":"if","hash":{},"fn":container.program(12, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.image : depth0),{"name":"if","hash":{},"fn":container.program(14, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\r\n  <div class=\"card-content\">\r\n    "
-      + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.image : depth0),{"name":"unless","hash":{},"fn":container.program(19, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.image : depth0),{"name":"unless","hash":{},"fn":container.program(21, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\r\n    "
-      + ((stack1 = helpers["with"].call(alias1,(depth0 != null ? depth0.content : depth0),{"name":"with","hash":{},"fn":container.program(24, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["with"].call(alias1,(depth0 != null ? depth0.content : depth0),{"name":"with","hash":{},"fn":container.program(26, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "\r\n  </div>\r\n\r\n"
-      + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.actions : depth0),{"name":"if","hash":{},"fn":container.program(26, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+      + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.actions : depth0),{"name":"if","hash":{},"fn":container.program(28, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
       + "</div>";
   },"useData":true});
 })();
diff --git a/src/js/loader.js b/src/js/loader.js
@@ -14,7 +14,11 @@ $(document).ready(function () {
       layoutMode: "packery",
       filter: function() {
         return qsRegex ? $(this).text().match( qsRegex ) : true;
-      }
+      },
+      getSortData: {
+        name: "[data-name]"
+      },
+      sortBy: "name"
     });
 
     // layout Isotope after each image loads
@@ -24,7 +28,7 @@ $(document).ready(function () {
 
     json.forEach(function (obj) {
       var data = $(Handlebars.templates.card(obj));
-      grid.append(data).isotope("appended", data);
+      grid.append(data).isotope("appended", data).isotope("updateSortData").isotope();
     });
   });
 

diff --git a/src/misc/card.hbs b/src/misc/card.hbs
@@ -1,5 +1,6 @@
 <div class="card{{#if colour}} {{colour}}{{/if}}{{#if brightness}} {{brightness}}{{/if}}{{#each tags}} {{this}}{{/each}}"
-     style="{{#if size}}{{#with size}}width: {{width}}; height: {{height}};{{/with}}{{/if}} {{#if style}}{{style}}{{/if}}">
+     style="{{#if size}}{{#with size}}width: {{width}}; height: {{height}};{{/with}}{{/if}} {{#if style}}{{style}}{{/if}}"
+     data-name="{{#if title}}{{title.text}}{{/if}}">
   {{#if image}}
     <div class="card-image">
       {{#with image}}<img src="{{src}}"{{#if style}} style="{{style}}"{{/if}}>{{/with}}