javascript/makemeahanzi
1
0
Fork 0
mirror of https://github.com/skishore/makemeahanzi.git synced 2025-11-03 13:59:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Get radicals and characters sorted by strokes

Browse Source
This commit is contained in:
Shaunak Kishore
2015-09-14 01:19:48 -04:00
parent 884db12af8
commit 3a21845226
3 changed files with 50 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/gallery.js
View File

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

26
client/index.html
View File

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

20
client/style.css
View File

@ -104,6 +104,26 @@
width: 200px; 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 { #gallery svg.radical {
cursor: pointer; cursor: pointer;
} }