OSDN Git Service

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