git.iko.soy/elk
on master help sign in
Revamp the Text library so that there is an explicit Text.Style record
9723d2dEvan Czaplicki
libraries/Native/Text.js+60−37
compare with master
unifiedsplit
@@ -4,10 +4,9 @@ Elm.Native.Text.make = function(elm) {
4 elm.Native.Text = elm.Native.Text || {};
4 elm.Native.Text = elm.Native.Text || {};
5 if (elm.Native.Text.values) return elm.Native.Text.values;
5 if (elm.Native.Text.values) return elm.Native.Text.values;
6
6
7− var JS = Elm.JavaScript.make(elm);
8− var Utils = Elm.Native.Utils.make(elm);
9− var Color = Elm.Native.Color.make(elm);
10 var Element = Elm.Graphics.Element.make(elm);
7 var Element = Elm.Graphics.Element.make(elm);
8+ var List = Elm.Native.List.make(elm);
9+ var Utils = Elm.Native.Utils.make(elm);
11 var show = Elm.Native.Show.make(elm).show;
10 var show = Elm.Native.Show.make(elm).show;
12
11
13 function makeSpaces(s) {
12 function makeSpaces(s) {
@@ -51,13 +50,58 @@ Elm.Native.Text.make = function(elm) {
51 return arr.join('<br/>');
50 return arr.join('<br/>');
52 }
51 }
53
52
54− function toText(str) { return Utils.txt(properEscape(JS.fromString(str))); }
53+ function toText(str) { return Utils.txt(properEscape(str)); }
54+
55+ // conversions from Elm values to CSS
56+ function toTypefaces(list) {
57+ var typefaces = List.toArray(list);
58+ for (var i = typefaces.length; i--; ) {
59+ var typeface = typefaces[i];
60+ if (typeface.contains(' ')) {
61+ typefaces[i] = "'" + typeface + "'";
62+ }
63+ }
64+ return typefaces.join(',');
65+ }
66+ function toLine(line) {
67+ var ctor = line.ctor;
68+ var decoration = ctor === 'Under' ? 'underline' :
69+ ctor === 'Over' ? 'overline' : 'line-through';
70+ return 'text-decoration:' + decoration + ';';
71+ }
72+ function toColor(c) {
73+ var color = (c._3 === 1)
74+ ? ('rgb(' + c._0 + ', ' + c._1 + ', ' + c._2 + ')')
75+ : ('rgba(' + c._0 + ', ' + c._1 + ', ' + c._2 + ', ' + c._3 + ')');
76+ return 'color:' + color + ';';
77+ }
55
78
79+ // setting styles of Text
80+ function style(style, text) {
81+ var newText = '<span style="' + toColor(style.color);
82+ if (style.typeface.ctor !== '[]') {
83+ newText += 'font-family:' + toTypefaces(style.typeface) + ';'
84+ }
85+ if (style.height.ctor !== "Nothing") {
86+ newText += 'font-size:' + style.height._0 + 'px;';
87+ }
88+ if (style.bold) {
89+ newText += 'font-weight:bold;';
90+ }
91+ if (style.italic) {
92+ newText += 'font-style:italic;';
93+ }
94+ if (style.line.ctor !== 'Nothing') {
95+ newText += toLine(style.line._0);
96+ }
97+ newText += '">' + Utils.makeText(text) + '</span>'
98+ return Utils.txt(newText);
99+ }
56 function height(px, text) {
100 function height(px, text) {
57 return { style: 'font-size:' + px + 'px;', text:text }
101 return { style: 'font-size:' + px + 'px;', text:text }
58 }
102 }
59− function typeface(name, text) {
103+ function typeface(names, text) {
60− return { style: 'font-family:' + name + ';', text:text }
104+ return { style: 'font-family:' + toTypefaces(names) + ';', text:text }
61 }
105 }
62 function monospace(text) {
106 function monospace(text) {
63 return { style: 'font-family:monospace;', text:text }
107 return { style: 'font-family:monospace;', text:text }
@@ -71,14 +115,8 @@ Elm.Native.Text.make = function(elm) {
71 function link(href, text) {
115 function link(href, text) {
72 return { href: toText(href), text:text };
116 return { href: toText(href), text:text };
73 }
117 }
74− function underline(text) {
118+ function line(line, text) {
75− return { line: ' underline', text:text };
76− }
77− function overline(text) {
78− return { line: ' overline', text:text };
79− }
80− function strikeThrough(text) {
81− return { line: ' line-through', text:text };
119+ return { style: toLine(line), text:text };
82 }
120 }
83
121
84 function color(c, text) {
122 function color(c, text) {
@@ -88,8 +126,8 @@ Elm.Native.Text.make = function(elm) {
88 return { style: 'color:' + color + ';', text:text };
126 return { style: 'color:' + color + ';', text:text };
89 }
127 }
90
128
91− function position(align) {
129+ function block(align) {
92− function create(text) {
130+ return function(text) {
93 var raw = {
131 var raw = {
94 ctor :'RawHtml',
132 ctor :'RawHtml',
95 html : Utils.makeText(text),
133 html : Utils.makeText(text),
@@ -100,7 +138,6 @@ Elm.Native.Text.make = function(elm) {
100 var pos = A2(Utils.htmlHeight, 0, raw);
138 var pos = A2(Utils.htmlHeight, 0, raw);
101 return A3(Element.newElement, pos._0, pos._1, raw);
139 return A3(Element.newElement, pos._0, pos._1, raw);
102 }
140 }
103− return create;
104 }
141 }
105
142
106 function markdown(text, guid) {
143 function markdown(text, guid) {
@@ -115,36 +152,22 @@ Elm.Native.Text.make = function(elm) {
115 return A3(Element.newElement, pos._0, pos._1, raw);
152 return A3(Element.newElement, pos._0, pos._1, raw);
116 }
153 }
117
154
118− var text = position('left');
119− function asText(v) {
120− return text(monospace(toText(show(v))));
121− }
122−
123− function plainText(v) {
124− return text(toText(v));
125− }
126−
127 return elm.Native.Text.values = {
155 return elm.Native.Text.values = {
128 toText: toText,
156 toText: toText,
129
157
130 height : F2(height),
158 height : F2(height),
131 italic : italic,
159 italic : italic,
132 bold : bold,
160 bold : bold,
133− underline : underline,
161+ line : F2(line),
134− overline : overline,
135− strikeThrough : strikeThrough,
136 monospace : monospace,
162 monospace : monospace,
137 typeface : F2(typeface),
163 typeface : F2(typeface),
138 color : F2(color),
164 color : F2(color),
139 link : F2(link),
165 link : F2(link),
140
166
167+ leftAligned : block('left'),
168+ rightAligned : block('right'),
169+ centered : block('center'),
141− justified : position('justify'),
170+ justified : block('justify'),
142− centered : position('center'),
143− righted : position('right'),
144− text : text,
145− plainText : plainText,
146− markdown : markdown,
171+ markdown : markdown,
147−
148− asText : asText,
149 };
172 };
150};
173};
libraries/Native/Utils.js−7
@@ -76,14 +76,8 @@ Elm.Native.Utils.make = function(elm) {
76
76
77 function makeText(text) {
77 function makeText(text) {
78 var style = '';
78 var style = '';
79− var line = '';
80 var href = '';
79 var href = '';
81 while (true) {
80 while (true) {
82− if (text.line) {
83− line += text.line;
84− text = text.text;
85− continue;
86− }
87 if (text.style) {
81 if (text.style) {
88 style += text.style;
82 style += text.style;
89 text = text.text;
83 text = text.text;
@@ -95,7 +89,6 @@ Elm.Native.Utils.make = function(elm) {
95 continue;
89 continue;
96 }
90 }
97 if (href) text = '<a href="' + href + '">' + text + '</a>';
91 if (href) text = '<a href="' + href + '">' + text + '</a>';
98− if (line) style += 'text-decoration:' + line + ';';
99 if (style) text = '<span style="' + style + '">' + text + '</span>';
92 if (style) text = '<span style="' + style + '">' + text + '</span>';
100 return text;
93 return text;
101 }
94 }
libraries/Text.elm+54−38
@@ -6,13 +6,21 @@ module Text where
6@docs toText
6@docs toText
7
7
8# Creating Elements
8# Creating Elements
9−@docs plainText, asText, text, centered, justified, righted
9+@docs leftAligned, rightAligned, centered, justified
10
10
11−# Formatting
11+# Style and Links
12−@docs color, typeface, height, link
12+@docs Style, style, Line, link
13
13
14−# Simple Formatting
14+# Convenience Functions
15−@docs monospace, bold, italic, underline, overline, strikeThrough
15+
16+There are two convenience functions for creating an `Element` which can be
17+useful when debugging or prototyping:
18+
19+@docs plainText, asText
20+
21+There are also a bunch of functions to set parts of a `Style` individually:
22+
23+@docs typeface, monospace, height, color, bold, italic, line
16
24
17-}
25-}
18
26
@@ -25,75 +33,82 @@ import Native.Text
25
33
26data Text = Text
34data Text = Text
27
35
36+data Line = Under | Over | Through
37+
38+{-| Representation of all the ways you can style `Text`.
39+-}
40+type Style =
41+ { typeface : [String]
42+ , height : Maybe Float
43+ , color : Color
44+ , bold : Bool
45+ , italic : Bool
46+ , line : Maybe Line
47+ }
48+
28{-| Convert a string into text which can be styled and displayed. -}
49{-| Convert a string into text which can be styled and displayed. -}
29toText : String -> Text
50toText : String -> Text
30toText = Native.Text.toText
51toText = Native.Text.toText
31
52
32−{-| Set the typeface of some text. The first argument should be a comma
53+{-| Set the style of some text.
33−separated listing of the desired typefaces:
54+-}
55+style : Style -> Text -> Text
56+style = Native.Text.style
57+
58+{-| Provide a list of prefered typefaces for some text.
34
59
35− "helvetica, arial, sans-serif"
60+ ["helvetica","arial","sans-serif"]
36
61
62+Not everyone has access to the same typefaces, so rendering will use the first
63+typeface in the list that is found on the user's computer. If there are no
64+matches, it will use their default typeface. Works the same as the CSS
37−Works the same as the CSS font-family property.
65+font-family property.
38-}
66-}
39−typeface : String -> Text -> Text
67+typeface : [String] -> Text -> Text
40typeface = Native.Text.typeface
68typeface = Native.Text.typeface
41
69
42{-| Switch to a monospace typeface. Good for code snippets. -}
70{-| Switch to a monospace typeface. Good for code snippets. -}
43monospace : Text -> Text
71monospace : Text -> Text
44monospace = Native.Text.monospace
72monospace = Native.Text.monospace
45
73
46−{-| Create a link. -}
74+{-| Create a link.
75+
76+ link "http://elm-lang.org" (toText "Elm Website")
77+-}
47link : String -> Text -> Text
78link : String -> Text -> Text
48link = Native.Text.link
79link = Native.Text.link
49
80
50−{-| Set the height of text in pixels. -}
51height : Float -> Text -> Text
81height : Float -> Text -> Text
52height = Native.Text.height
82height = Native.Text.height
53
83
54−{-| Set the color of a string. -}
55color : Color -> Text -> Text
84color : Color -> Text -> Text
56color = Native.Text.color
85color = Native.Text.color
57
86
58−{-| Make a string bold. -}
59bold : Text -> Text
87bold : Text -> Text
60bold = Native.Text.bold
88bold = Native.Text.bold
61
89
62−{-| Italicize a string. -}
63italic : Text -> Text
90italic : Text -> Text
64italic = Native.Text.italic
91italic = Native.Text.italic
65
92
66−{-| Draw a line above a string. -}
67−overline : Text -> Text
93+line : Line -> Text -> Text
68−overline = Native.Text.overline
94+line = Native.Text.line
69
95
70−{-| Underline a string. -}
96+leftAligned : Text -> Element
71−underline : Text -> Text
97+leftAligned = Native.Text.leftAligned
72−underline = Native.Text.underline
73
98
74−{-| Draw a line through a string. -}
75−strikeThrough : Text -> Text
76−strikeThrough = Native.Text.strikeThrough
77−
78−{-| Display justified, styled text. -}
79−justified : Text -> Element
99+rightAligned : Text -> Element
80−justified = Native.Text.justified
100+rightAligned = Native.Text.rightAligned
81
101
82−{-| Display centered, styled text. -}
83centered : Text -> Element
102centered : Text -> Element
84centered = Native.Text.centered
103centered = Native.Text.centered
85
104
86−{-| Display right justified, styled text. -}
87−righted : Text -> Element
105+justified : Text -> Element
88−righted = Native.Text.righted
106+justified = Native.Text.justified
89−
90−{-| Display styled text. -}
91−text : Text -> Element
92−text = Native.Text.text
93
107
94{-| Display a plain string. -}
108{-| Display a plain string. -}
95plainText : String -> Element
109plainText : String -> Element
96−plainText = Native.Text.plainText
110+plainText str =
111+ leftAligned (toText str)
97
112
98{-| for internal use only -}
113{-| for internal use only -}
99markdown : Element
114markdown : Element
@@ -107,4 +122,5 @@ the browser:
107Excellent for debugging.
122Excellent for debugging.
108-}
123-}
109asText : a -> Element
124asText : a -> Element
110−asText = Native.Text.asText
125+asText value =
126+ leftAligned (monospace (toText (show value)))