OSDN Git Service

add new sample images of sawarabi-mincho and sawarabi-gothic
[sawarabi-fonts/sawarabi-fonts.git] / html / js / doc-header.js
1 $(document).ready(function() {
2     function DocHeaderScreen(canvasElement, langKey, kanjiCounts) {
3         var TEXTS = {
4             ja: {
5                 title: ['漢字収録進捗状況(さわらびゴシック)',
6                         '漢字収録進捗状況(さわらび明朝)',
7                        ],
8                 kyoikuKanji: '教育漢字',
9                 level1st: '第一水準漢字',
10                 level2nd: '第二水準漢字',
11                 level3rd: '第三水準漢字',
12                 level4th: '第四水準漢字',
13             },
14             en: {
15                 title: ['Kanji Coverage (Sawarabi Gothic)',
16                         'Kanji Coverage (Sawarabi Mincho)',
17                        ],
18                 kyoikuKanji: 'Kyoiku Kanji',
19                 level1st: 'JIS 1st Level',
20                 level2nd: 'JIS 2nd Level',
21                 level3rd: 'JIS 3rd Level',
22                 level4th: 'JIS 4th Level',
23             },
24             de: {
25                 title: ['Kanji Coverage (Sawarabi Gothic)',
26                         'Kanji Coverage (Sawarabi Mincho)',
27                        ],
28                 kyoikuKanji: 'Kyoiku Kanji',
29                 level1st: 'Niveau 1.',
30                 level2nd: 'Niveau 2.',
31                 level3rd: 'Niveau 3.',
32                 level4th: 'Niveau 4.',
33             },
34         };
35         var texts = TEXTS[langKey];
36
37         function Label(text) {
38             this.text = text;
39             this.font = '10px sans';
40             this.color = 'white';
41             this.x = 0;
42             this.y = 0;
43         }
44         Label.prototype = {
45             setPosition: function(x, y) {
46                 this.x = x;
47                 this.y = y;
48             },
49             getWidth: function() {
50                 ctx.font = this.font;
51                 var measure = ctx.measureText(this.text);
52                 return measure.width;
53             },
54             draw: function() {
55                 var x = this.getX();
56                 var y = this.getY();
57                 ctx.font = this.font;
58                 ctx.fillStyle = this.color;
59                 ctx.fillText(this.text, x, y);
60             },
61             getX: function() {
62                 return screen.content.left + this.x;
63             },
64             getY: function() {
65                 return screen.content.top + this.y;
66             },
67         };
68
69         function GraphBar(height, max, performance) {
70             this.x = 0;
71             this.y = 0;
72             this.height = height;
73             this.max = max;
74             this.performance = performance;
75             this.frameColor = 'white';
76             this.fillColor = '#088a29';
77         }
78         GraphBar.prototype = {
79             draw: function(frame, frames) {
80                 if (this.performance == 0) return;
81                 var rate = (frame || 1) / (frames || 1);
82                 var value = this.performance * rate;
83                 var width = this.__calcWidth(value);
84                 if (width <= 1) return;
85                 ctx.fillStyle = this.fillColor;
86                 ctx.fillRect(this.getX() + 1, this.getY(), width - 1, this.height);
87             },
88             drawFrame: function() {
89                 var width = screen.content.width - this.x;
90                 ctx.strokeStyle = this.frameColor;
91                 ctx.beginPath()
92                 var x1 = this.getX() + 1;
93                 var y1 = this.getY() - 1;
94                 var x2 = this.getX() + width + 1;
95                 var y2 = this.getY() + this.height + 2;
96                 ctx.moveTo(x1, y1);
97                 ctx.lineTo(x2, y1);
98                 ctx.lineTo(x2, y2);
99                 ctx.lineTo(x1, y2);
100                 ctx.stroke();
101             },
102             drawRate: function() {
103                 var rate = this.performance * 1.0 / this.max;
104                 var caption = Math.round(rate * 10000) / 100 + '%';
105                 var label = new Label(caption);
106                 label.font = '10pt Arial';
107                 var width = this.__calcWidth();
108                 var x = this.x + 
109                     (width > label.getWidth() ? 
110                      (width - label.getWidth()) / 2 : (width + 10));
111                 label.setPosition(x, this.y + 14);
112                 label.draw();
113             },
114             setPosition: function(x, y) {
115                 this.x = x;
116                 this.y = y;
117             },
118             getX: function() {
119                 return screen.content.left + this.x;
120             },
121             getY: function() {
122                 return screen.content.top + this.y;
123             },
124             __calcWidth: function(performance) {
125                 var width = screen.content.width - this.x;
126                 var value = performance || this.performance;
127                 var rate = (value * 1.0) / this.max;
128                 return parseInt(width * 1.0 * rate);
129             },
130         };
131
132         function KanjiCoverageGraphPage(title, data) {
133             this.title = this.createTitle(title);
134             this.data = data;
135             this.captions = [];
136             this.graphs = [];
137             this.__setupGraphs();
138             this.pageLock = false;
139         }
140         KanjiCoverageGraphPage.prototype = {
141             draw: function() {
142                 screen.clear();
143                 this.title.draw();
144                 for (var n in this.captions) {
145                     this.captions[n].draw();
146                     this.graphs[n].drawFrame();
147                 }
148                 var x = screen.content.left + this.graphs[0].x;
149                 var y = screen.content.top + this.graphs[0].y;
150                 ctx.strokeStyle = 'white';
151                 ctx.moveTo(x, y - 10);
152                 var lastGraph = this.graphs[this.graphs.length - 1];
153                 y = screen.content.top + lastGraph.y + lastGraph.height;
154                 ctx.lineTo(x, y + 10);
155                 ctx.stroke();
156                 this.__drawAnimation();
157             },
158             createTitle: function(caption) {
159                 var title = new Label(caption);
160                 title.font = '21px Sans';
161                 return title;
162             },
163             __addGraph: function(caption, graphBar) {
164                 this.captions.push(caption);
165                 this.graphs.push(graphBar);
166             },
167             __setupGraphs: function() {
168                 var kanjis = {
169                     kyoikuKanji: 1006,
170                     level1st: 2965,
171                     level2nd: 3390,
172                     level3rd: 1259,
173                     level4th: 2436,
174                 }
175                 var y = 45;
176                 for (var key in kanjis) {
177                     var label = new Label(texts[key]);
178                     label.font = "16px Sans";
179                     label.setPosition(0, y + 15);
180                     var graph = new GraphBar(18, kanjis[key], this.data[key]);
181                     graph.setPosition(130, y);
182                     this.__addGraph(label, graph);
183                     y += 30;
184                 }
185             },
186             __beforeAnimation: function() {
187                 this.pageLock = true;
188             },
189             __afterAnimation: function() {
190                 this.pageLock = false;
191             },
192             __drawAnimation: function() {
193                 var frame = 1;
194                 var frames = 16;
195                 var that = this;
196                 var scenario = function() {
197                     for (var n in that.graphs)
198                         that.graphs[n].draw(frame, frames);
199                     if (frame++ < frames) {
200                         setTimeout(scenario, 25);
201                     } else {
202                         for (var n in that.graphs) 
203                             that.graphs[n].drawRate();
204                         that.__afterAnimation();
205                     }
206                 };
207                 this.__beforeAnimation();
208                 setTimeout(scenario, 100);
209             },
210         };
211
212         function Screen() {
213             this.width = parseInt($(canvasElement).css('width'));
214             this.height = parseInt($(canvasElement).css('height'));
215             this.margin = {
216                 top: 55,
217                 left: 30,
218                 bottom: 65,
219                 right: 30,
220             };
221             this.content = {
222                 top: this.margin.top,
223                 left: this.margin.left,
224                 bottom: this.height - this.margin.bottom,
225                 right: this.width - this.margin.right,
226             };
227             this.content.width = this.content.right - this.content.left;
228             this.content.height = this.content.bottom - this.content.top;
229         }
230         Screen.prototype.clear = function() {
231             ctx.clearRect(0, 0, this.width, this.height);
232         };
233
234         var ctx = canvasElement.getContext('2d');
235         var screen = new Screen();
236         this.pages = [
237             new KanjiCoverageGraphPage(texts.title[0], kanjiCounts['gothic']),
238             new KanjiCoverageGraphPage(texts.title[1], kanjiCounts['mincho']),
239         ];
240     }
241
242     function getNumOfKanjis() {
243       var url = '/cgi-bin/num-of-kanjis.cgi';
244       var fontTypes = ['gothic', 'mincho'];
245       var result = {};
246       for (var n in fontTypes) {
247         $.ajax({
248           type: 'GET',
249           url: url,
250           data: "type=" + fontTypes[n],
251           dataType: 'json',
252           success: function(data, dataType) {
253             result[fontTypes[n]] = data;
254           },
255           error: function(request, textStatus, errorThrown) {
256             alert(textStatus);
257           },
258           async: false,
259         });
260       }
261       return result;
262     }
263
264
265     (function() {
266         var canvas = $("canvas#header-canvas").get(0);
267         if (! canvas || ! canvas.getContext) return false;
268
269         var kanjiCounts = getNumOfKanjis();
270         var key = $('#current-lang').attr('data-key');
271         var headerScreen = new DocHeaderScreen(canvas, key, kanjiCounts);
272         var container = $("#docs-header .buttons-container .inner-container");
273         var buttons = [];
274         for (var n in headerScreen.pages) {
275             var button = document.createElement("div");
276             $(button).addClass("button").text(parseInt(n) + 1);
277             container.append(button);
278             buttons.push(button);
279         }
280         headerScreen.pages[0].draw();
281         var pageIndex = 0;
282         $(buttons[0]).addClass('pressed');
283         for (var n in buttons) {
284             $(buttons[n]).click(function() {
285                 var index = parseInt($(this).text()) - 1;
286                 if (index != pageIndex) {
287                     headerScreen.pages[index].draw();
288                     for (var i in buttons) $(buttons[i]).removeClass('pressed');
289                     $(this).addClass('pressed');
290                     pageIndex = index;
291                 }
292             });
293         }
294     })();
295 });