Browse Source

Refactor text-wrapper.js, now that we have a signer. Closes #4.

parisminton 7 years ago
parent
commit
2cbc40b606
1 changed files with 47 additions and 174 deletions
  1. 47 174
      renderer/text-wrapper.js

+ 47 - 174
renderer/text-wrapper.js View File

@@ -2,48 +2,42 @@ var smartquotes = require("smartquotes").string;
2 2
 
3 3
 module.exports = function(theme) {
4 4
 
5
-  // Do some typechecking
6
-  var left = ifNumeric(theme.captionLeft, 0),
7
-      right = ifNumeric(theme.captionRight, theme.width),
8
-      bottom = ifNumeric(theme.captionBottom, null),
9
-      top = ifNumeric(theme.captionTop, null),
10
-      citationLeft = ifNumeric(theme.citationLeft, 0),
11
-      citationRight = ifNumeric(theme.citationRight, theme.width),
12
-      citationBottom = ifNumeric(theme.citationBottom, null),
13
-      citationTop = ifNumeric(theme.citationTop, null),
14
-      labelLeft = ifNumeric(theme.labelLeft, 0),
15
-      labelRight = ifNumeric(theme.labelRight, theme.width),
16
-      labelBottom = ifNumeric(theme.labelBottom, null),
17
-      labelTop = ifNumeric(theme.labelTop, null),
18
-
19
-      renderfunctions ;
20
-
21
-  if (bottom === null && top === null) {
22
-    top = 0;
23
-  }
24
-
25
-  if (labelBottom === null && labelTop === null) {
26
-    labelTop = 0;
27
-  }
28
-
29
-  var captionWidth = right - left,
30
-      citationWidth = citationRight - citationLeft;
31
-      labelWidth = labelRight - labelLeft;
32
-
33
-  return function(context, caption, type) {
34
-
35
-    if (!caption) {
5
+  return function(context, language, type) {
6
+    // Do some typechecking
7
+    var left = ifNumeric(theme[type + 'Left'], 0),
8
+        right = ifNumeric(theme[type + 'Right'], theme.width),
9
+        bottom = ifNumeric(theme[type + 'Bottom'], null),
10
+        top = ifNumeric(theme[type + 'Top'], null);
11
+
12
+    if (!language || language === 'None') {
36 13
       return;
37 14
     }
38 15
 
39
-    if (type === 'caption') {
16
+    calculate(language, type);
17
+
18
+    function calculate (txt, type) {
40 19
       var lines = [[]],
41
-          maxWidth = 0,
42
-          words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
20
+          wrap_width = right - left,
21
+          max_width = 0,
22
+          words = smartquotes(txt + "").trim().replace(/\s\s+/g, " \n").split(/ /g),
23
+          indent;
24
+
25
+      if (type === 'caption') {
26
+        // negative indentation for opening quotes
27
+        indent = 20;
28
+      }
29
+      else if (type === 'citation') {
30
+        // negative indentation for opening em dash
31
+        indent = 50;
32
+      }
43 33
 
44
-      context.font = theme.captionFont;
34
+      if (bottom === null && top === null) {
35
+        top = 0;
36
+      }
37
+
38
+      context.font = theme[type + 'Font'];
45 39
       context.textBaseline = "top";
46
-      context.textAlign = theme.captionAlign || "center";
40
+      context.textAlign = theme[type + 'Align'] || "center";
47 41
 
48 42
       // Check whether each word exceeds the width limit
49 43
       // Wrap onto next line as needed
@@ -51,7 +45,7 @@ module.exports = function(theme) {
51 45
 
52 46
         var width = context.measureText(lines[lines.length - 1].concat([word]).join(" ")).width;
53 47
 
54
-        if (word[0] === "\n" || (lines[lines.length - 1].length && width > captionWidth)) {
48
+        if (word[0] === "\n" || (lines[lines.length - 1].length && width > wrap_width)) {
55 49
 
56 50
           word = word.trim();
57 51
           lines.push([word]);
@@ -59,18 +53,20 @@ module.exports = function(theme) {
59 53
 
60 54
         } else {
61 55
 
56
+          // automatically prepend em dash to citation
57
+          word = (type === 'citation' && i === 0) ? '— ' + word : word;
62 58
           lines[lines.length - 1].push(word);
63 59
 
64 60
         }
65 61
 
66
-        maxWidth = Math.max(maxWidth,width);
62
+        max_width = Math.max(max_width, width);
67 63
 
68 64
       });
69 65
 
70
-      var totalHeight = lines.length * theme.captionLineHeight + (lines.length - 1) * theme.captionLineSpacing;
66
+      var totalHeight = lines.length * theme[type + 'LineHeight'] + (lines.length - 1) * theme[type + 'LineSpacing'];
71 67
 
72 68
       // horizontal alignment
73
-      var x = theme.captionAlign === "left" ? left : theme.captionAlign === "right" ? right : (left + right) / 2;
69
+      var x = theme[type + 'Align'] === "left" ? left : theme[type + 'Align'] === "right" ? right : (left + right) / 2;
74 70
 
75 71
       // Vertical alignment
76 72
       var y;
@@ -86,146 +82,23 @@ module.exports = function(theme) {
86 82
         y = top;
87 83
       }
88 84
 
89
-      // draw caption
90
-      context.fillStyle = theme.captionColor;
91
-      lines.forEach(function(line, i){
92
-
93
-        // negative indentation for opening quotes
94
-        var indented_x = (x + 28);
95
-
96
-        if (i === 0 && /^“/.test(line[0])) {
97
-          context.fillText(line.join(" "), x, y + i * (theme.captionLineHeight + theme.captionLineSpacing));
98
-        }
99
-        else {
100
-          context.fillText(line.join(" "), indented_x, y + i * (theme.captionLineHeight + theme.captionLineSpacing));
101
-        }
102
-      });
103
-    } // end if caption
104
-
105
-
106
-    if (type === 'citation') {
107
-      var lines = [[]],
108
-          maxWidth = 0,
109
-          words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
110
-
111
-      context.font = theme.citationFont;
112
-      context.textBaseline = "top";
113
-      context.textAlign = theme.citationAlign || "center";
114
-
115
-      // Check whether each word exceeds the width limit
116
-      // Wrap onto next line as needed
117
-      words.forEach(function(word,i){
118
-
119
-        var width = context.measureText(lines[lines.length - 1].concat([word]).join(" ")).width;
120
-
121
-        if (word[0] === "\n" || (lines[lines.length - 1].length && width > citationWidth)) {
122
-
123
-          word = word.trim();
124
-          lines.push([word]);
125
-          width = context.measureText(word).width;
126
-
127
-        } else {
128
-
129
-          word = (i === 0) ? '— ' + word : word;
130
-          lines[lines.length - 1].push(word);
131
-
132
-        }
133
-
134
-        maxWidth = Math.max(maxWidth,width);
135
-
136
-      });
137
-
138
-      var totalHeight = lines.length * theme.citationLineHeight + (lines.length - 1) * theme.citationLineSpacing;
139
-
140
-      // horizontal alignment
141
-      var x = theme.citationAlign === "left" ? left : theme.citationAlign === "right" ? right : (left + right) / 2;
142
-
143
-      // Vertical alignment
144
-      var y;
145
-
146
-      if (citationTop !== null && citationBottom !== null) {
147
-        // Vertical center
148
-        y = (citationBottom + citationTop - totalHeight) / 2;
149
-      } else if (citationBottom !== null) {
150
-        // Vertical align bottom
151
-        y = citationBottom - totalHeight;
152
-      } else {
153
-        // Vertical align top
154
-        y = citationTop;
155
-      }
156
-
157
-      // draw citation
158
-      context.fillStyle = theme.citationColor;
85
+      // draw text
86
+      context.fillStyle = theme[type + 'Color'];
159 87
       lines.forEach(function(line, i){
160 88
 
161
-        // negative indentation for opening em dash
162
-        var indented_x = (x + 50);
163
-
164
-        if (i === 0 && /^—/.test(line[0])) {
165
-          context.fillText(line.join(" "), x, y + i * (theme.citationLineHeight + theme.citationLineSpacing));
89
+        if (/caption|citation/.test(type)) {
90
+          if (i === 0 && /^“|^—/.test(line[0])) {
91
+            context.fillText(line.join(" "), x, y + i * (theme[type + 'LineHeight'] + theme[type + 'LineSpacing']));
92
+          }
93
+          else {
94
+            context.fillText(line.join(" "), (x + indent), y + i * (theme[type + 'LineHeight'] + theme[type + 'LineSpacing']));
95
+          }
166 96
         }
167
-        else {
168
-          context.fillText(line.join(" "), indented_x, y + i * (theme.citationLineHeight + theme.citationLineSpacing));
97
+        else { // you're a label
98
+          context.fillText(line.join(" "), x, y + i * (theme[type + 'LineHeight'] + theme[type + 'LineSpacing']));
169 99
         }
170 100
       });
171
-    } // end if citation
172
-
173
-
174
-    if (type === 'label' && caption != 'None') {
175
-      var lines = [[]],
176
-          maxWidth = 0,
177
-          words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
178
-
179
-      context.font = theme.labelFont;
180
-      context.textBaseline = "top";
181
-      context.textAlign = theme.labelAlign || "center";
182
-
183
-      // Check whether each word exceeds the width limit
184
-      // Wrap onto next line as needed
185
-      words.forEach(function(word,i){
186
-
187
-        var width = context.measureText(lines[lines.length - 1].concat([word]).join(" ")).width;
188
-
189
-        if (word[0] === "\n" || (lines[lines.length - 1].length && width > labelWidth)) {
190
-
191
-          word = word.trim();
192
-          lines.push([word]);
193
-          width = context.measureText(word).width;
194 101
 
195
-        } else {
196
-
197
-          lines[lines.length - 1].push(word);
198
-
199
-        }
200
-
201
-        maxWidth = Math.max(maxWidth,width);
202
-
203
-      });
204
-
205
-      var totalHeight = lines.length * theme.labelLineHeight + (lines.length - 1) * theme.labelLineSpacing;
206
-
207
-      // horizontal alignment
208
-      var x = theme.labelAlign === "left" ? labelLeft : theme.labelAlign === "right" ? labelRight : (labelLeft + labelRight) / 2;
209
-
210
-      // Vertical alignment
211
-      var y;
212
-
213
-      if (labelTop !== null && labelBottom !== null) {
214
-        // Vertical center
215
-        y = (labelBottom + labelTop - totalHeight) / 2;
216
-      } else if (labelBottom !== null) {
217
-        // Vertical align bottom
218
-        y = labelBottom - totalHeight;
219
-      } else {
220
-        // Vertical align top
221
-        y = labelTop;
222
-      }
223
-
224
-      // draw label
225
-      context.fillStyle = theme.labelColor;
226
-      lines.forEach(function(line, i){
227
-        context.fillText(line.join(" "), x, y + i * (theme.labelLineHeight + theme.labelLineSpacing));
228
-      });
229 102
     }
230 103
 
231 104
  };