Get radicals and characters sorted by strokes

client/gallery.js

@@ -4,8 +4,8 @@ var COLORS = ['#0074D9', '#2ECC40', '#FFDC00', '#FF4136', '#7FDBFF',
 var subscription = undefined;
 
 function comparison(glyph1, glyph2) {
-  if (glyph1.index.strokes !== glyph2.index.strokes) {
-    return glyph1.index.strokes - glyph2.index.strokes;
+  if (glyph1.derived.strokes.length !== glyph2.derived.strokes.length) {
+    return glyph1.derived.strokes.length - glyph2.derived.strokes.length;
   } else if (glyph1.index.radical !== glyph2.index.radical) {
     return glyph1.index.radical - glyph2.index.radical;
   }
@@ -19,12 +19,13 @@ Template.gallery.events({
 });
 
 Template.gallery.helpers({
-  glyphs: function() {
+  blocks: function() {
     if (!Session.get('gallery.ready')) {
       return [];
     }
     var glyphs = Glyphs.find().fetch().sort(comparison);
     var on_radicals_page = Session.get('gallery.radical') === undefined;
+    var last_num_strokes = -1;
     var result = [];
     for (var i = 0; i < glyphs.length; i++) {
       var glyph = glyphs[i];
@@ -39,13 +40,20 @@ Template.gallery.helpers({
           strokes.push({color: COLORS[j % COLORS.length], stroke: stroke});
         }
       }
-      result.push({
+      var data = {
         class: (on_radicals_page ? 'radical' : 'character'),
         d: Glyphs.get_svg_path(glyph),
         name: glyph.name,
         radical: glyph.index.radical,
         strokes: strokes
-      });
+      };
+      var num_strokes =
+          on_radicals_page ? glyph.derived.strokes.length : glyph.index.strokes;
+      if (num_strokes != last_num_strokes) {
+        result.push({glyphs: [], count: num_strokes});
+        last_num_strokes = num_strokes;
+      }
+      result[result.length - 1].glyphs.push(data);
     }
     return result;
   },

client/index.html

@@ -96,16 +96,24 @@
 
 <template name="gallery">
   <div id="gallery">
-    {{#each glyphs}}
-      <svg viewbox="0 0 1024 1024" class="{{class}}" data-name="{{name}}">
-        <g transform="scale(1, -1) translate(0, -900)">
-          <path d="{{d}}"></path>
-          {{#each strokes}}
-            <path class="stroke" fill="{{color}}"
-                  stroke="black" d="{{stroke}}"></path>
+    {{#each blocks}}
+      <div class="gallery-block">
+        <div class="block-header">{{count}}</div>
+        <div class="block-values">
+          {{#each glyphs}}
+            <svg viewbox="0 0 1024 1024"
+                 class="{{class}}" data-name="{{name}}">
+              <g transform="scale(1, -1) translate(0, -900)">
+                <path d="{{d}}"></path>
+                {{#each strokes}}
+                  <path class="stroke" fill="{{color}}"
+                        stroke="black" d="{{stroke}}"></path>
+                {{/each}}
+              </g>
+            </svg>
           {{/each}}
-        </g>
-      </svg>
+        </div>
+      </div>
     {{/each}}
   </div>
   {{#if loading}}

client/style.css

@@ -104,6 +104,26 @@
   width: 200px;
 }
 
+#gallery .gallery-block {
+  display: inline-block;
+  margin: 60px auto;
+  text-align: left;
+}
+
+#gallery .gallery-block .block-header {
+  float: left;
+  font-size: 60px;
+  line-height: 200px;
+  margin-right: 80px;
+  text-align: right;
+  width: 80px;
+}
+
+#gallery .gallery-block .block-values {
+  float: left;
+  width: 1020px;
+}
+
 #gallery svg.radical {
   cursor: pointer;
 }