5e7ed2b · elk · git.iko.soy

libraries/Graphics/Input.elm+4−57

compare with master

unifiedsplit

@@ -19,14 +19,15 @@ examples in this library, so just read on to get a better idea of how it works!

19@docs Input, input

20

21# Basic Input Elements

22−Text fields come later.

22+

23+To learn about text fields, see the

24+[`Graphics.Input.Field`](Graphics-Input-Field) library.

25+

23@docs button, customButton, checkbox, dropDown

26@docs button, customButton, checkbox, dropDown

24

27

25# Clicks and Hovers

28# Clicks and Hovers

26@docs clickable, hoverable

29@docs clickable, hoverable

27

30

28−# Text Fields

29−@docs field, password, email, noContent, FieldContent, Selection, Direction

30-}

31-}

31

32

32import Signal (Signal)

33import Signal (Signal)

@@ -175,57 +176,3 @@ distinguished with IDs or more complex data structures.

175-}

176-}

176clickable : Handle a -> a -> Element -> Element

177clickable : Handle a -> a -> Element -> Element

177clickable = Native.Graphics.Input.clickable

178clickable = Native.Graphics.Input.clickable

178−

179−{-| Represents the current content of a text field. For example:

180−

181− FieldContent "She sells sea shells" (Selection 0 3 Backward)

182−

183−This means the user highlighted the substring `"She"` backwards.

184−-}

185−type FieldContent = { string:String, selection:Selection }

186−

187−{-| The selection within a text field. `start` is never greater than `end`:

188−

189− Selection 0 0 Forward -- cursor precedes all characters

190−

191− Selection 5 9 Backward -- highlighting characters starting after

192− -- the 5th and ending after the 9th

193−-}

194−type Selection = { start:Int, end:Int, direction:Direction }

195−

196−{-| The direction of selection.-}

197−data Direction = Forward | Backward

198−

199−{-| A field with no content:

200−

201− FieldContent "" (Selection 0 0 Forward)

202−-}

203−noContent : FieldContent

204−noContent = FieldContent "" (Selection 0 0 Forward)

205−

206−{-| Create a text field. The following example creates a time-varying element

207−called `nameField`. As the user types their name, the field will be updated

208−to match what they have entered.

209−

210− name : Input FieldContent

211− name = input noContent

212−

213− nameField : Signal Element

214− nameField = field name.handle id "Name" <~ name.signal

215−-}

216−field : Handle a -> (FieldContent -> a) -> String -> FieldContent -> Element

217−field = Native.Graphics.Input.field

218−

219−{-| Same as `field` but the UI element blocks out each characters. -}

220−password : Handle a -> (FieldContent -> a) -> String -> FieldContent -> Element

221−password = Native.Graphics.Input.password

222−

223−{-| Same as `field` but it adds an annotation that this field is for email

224−addresses. This is helpful for auto-complete and for mobile users who may

225−get a custom keyboard with an `@` and `.com` button.

226−-}

227−email : Handle a -> (FieldContent -> a) -> String -> FieldContent -> Element

228−email = Native.Graphics.Input.email

229−

230−-- area : Handle a -> (FieldContent -> a) -> Handle b -> ((Int,Int) -> b) -> (Int,Int) -> String -> FieldContent -> Element

231−-- area = Native.Graphics.Input.area

libraries/Graphics/Input/Field.elmnew file+130

@@ -0,0 +1,130 @@

1+module Graphics.Input.Field where

2+{-| This library specifically addresses text fields. It uses the same genral

3+approach as the [`Graphics.Input`](Graphics-Input) module for describing an

4+`Input`, so this library focuses on creating and styling text fields.

5+

6+# Create Fields

7+@docs field, password, email

8+

9+# Field Content

10+@docs Content, Selection, Direction, noContent

11+

12+# Field Style

13+@docs Style, Outline, noOutline, Highlight, noHighlight, Dimensions, uniformly

14+-}

15+

16+import Color (Color)

17+import Color

18+import Graphics.Element (Element)

19+import Graphics.Input (Input, Handle)

20+import Native.Graphics.Input

21+import Text

22+

23+{-| Easily create uniform dimensions:

24+

25+ uniformly 4 == { left=4, right=4, top=4, bottom=4 }

26+-}

27+uniformly : Int -> Dimensions

28+uniformly n = Dimensions n n n n

29+

30+{-| For setting dimensions of a fields padding or border. The left, right, top,

31+and bottom may all have different sizes.

32+-}

33+type Dimensions = { left:Int, right:Int, top:Int, bottom:Int }

34+

35+{-| A field can have a outline around it. This lets you set its color, width,

36+and radius. The radius allows you to round the corners of your field. Set the

37+width to zero to make it invisible.

38+-}

39+type Outline = { color:Color, width:Dimensions, radius:Int }

40+

41+{-| An outline with zero width, so you cannot see it. -}

42+noOutline : Outline

43+noOutline = Outline Color.grey (uniformly 0) 0

44+

45+{-| When a field is selected, it has an highlight around it by default. Set the

46+width of the `Highlight` to zero to make it go away.

47+-}

48+type Highlight = { color:Color, width:Int }

49+

50+{-| An highlight with zero width, so you cannot see it. -}

51+noHighlight : Highlight

52+noHighlight = Highlight Color.blue 0

53+

54+{-| Describes the style of a text box. The `style` field describes the style

55+of the text itself. The `outline` field describes the glowing blue outline that

56+shows up when the field has focus. Turn off `outline` by setting its width to

57+zero. The

58+-}

59+type Style =

60+ { padding : Dimensions

61+ , outline : Outline

62+ , highlight : Highlight

63+ , style : Text.Style

64+ }

65+

66+{-| The default style for a text field. The outline is `Color.grey` with width

67+1 and radius 2. The highlight is `Color.blue` with width 1, and the default

68+text color is black.

69+-}

70+defaultStyle : Style

71+defaultStyle =

72+ { padding = uniformly 4

73+ , outline = Outline Color.grey (uniformly 1) 2

74+ , highlight = Highlight Color.blue 1

75+ , style = Text.defaultStyle

76+ }

77+

78+{-| Represents the current content of a text field. For example:

79+

80+ Content "She sells sea shells" (Selection 0 3 Backward)

81+

82+This means the user highlighted the substring `"She"` backwards.

83+-}

84+type Content = { string:String, selection:Selection }

85+

86+{-| The selection within a text field. `start` is never greater than `end`:

87+

88+ Selection 0 0 Forward -- cursor precedes all characters

89+

90+ Selection 5 9 Backward -- highlighting characters starting after

91+ -- the 5th and ending after the 9th

92+-}

93+type Selection = { start:Int, end:Int, direction:Direction }

94+

95+{-| The direction of selection.-}

96+data Direction = Forward | Backward

97+

98+{-| A field with no content:

99+

100+ Content "" (Selection 0 0 Forward)

101+-}

102+noContent : Content

103+noContent = Content "" (Selection 0 0 Forward)

104+

105+{-| Create a text field. The following example creates a time-varying element

106+called `nameField`. As the user types their name, the field will be updated

107+to match what they have entered.

108+

109+ name : Input Content

110+ name = input noContent

111+

112+ nameField : Signal Element

113+ nameField = field name.handle id "Name" <~ name.signal

114+-}

115+field : Handle a -> (Content -> a) -> Style -> String -> Content -> Element

116+field = Native.Graphics.Input.field

117+

118+{-| Same as `field` but the UI element blocks out each characters. -}

119+password : Handle a -> (Content -> a) -> Style -> String -> Content -> Element

120+password = Native.Graphics.Input.password

121+

122+{-| Same as `field` but it adds an annotation that this field is for email

123+addresses. This is helpful for auto-complete and for mobile users who may

124+get a custom keyboard with an `@` and `.com` button.

125+-}

126+email : Handle a -> (Content -> a) -> Style -> String -> Content -> Element

127+email = Native.Graphics.Input.email

128+

129+-- area : Handle a -> (Content -> a) -> Handle b -> ((Int,Int) -> b) -> (Int,Int) -> String -> Content -> Element

130+-- area = Native.Graphics.Input.area

libraries/Native/Color.js+9−2

@@ -6,6 +6,12 @@ Elm.Native.Color.make = function(elm) {

6

7 var Utils = Elm.Native.Utils.make(elm);

8

9+ function toCss(c) {

10+ return (c._3 === 1)

11+ ? ('rgb(' + c._0 + ', ' + c._1 + ', ' + c._2 + ')')

12+ : ('rgba(' + c._0 + ', ' + c._1 + ', ' + c._2 + ', ' + c._3 + ')');

13+ }

14+

9 function complement(rgb) {

15 function complement(rgb) {

10 var hsv = toHSV(rgb);

16 var hsv = toHSV(rgb);

11 hsv.hue = (hsv.hue + 180) % 360;

17 hsv.hue = (hsv.hue + 180) % 360;

@@ -63,7 +69,8 @@ Elm.Native.Color.make = function(elm) {

63 return elm.Native.Color.values = {

69 return elm.Native.Color.values = {

64 hsva:F4(hsva),

70 hsva:F4(hsva),

65 hsv:F3(hsv),

71 hsv:F3(hsv),

66− complement:complement

72+ complement:complement,

73+ toCss:toCss

67 };

74 };

68

75

69−};

76+};

libraries/Native/Graphics/Input.js+60−8

@@ -8,6 +8,8 @@ Elm.Native.Graphics.Input.make = function(elm) {

8 var Render = ElmRuntime.use(ElmRuntime.Render.Element);

9 var newNode = ElmRuntime.use(ElmRuntime.Render.Utils).newElement;

10

11+ var toCss = Elm.Native.Color.make(elm).toCss;

12+ var Text = Elm.Native.Text.make(elm);

11 var Signal = Elm.Signal.make(elm);

13 var Signal = Elm.Signal.make(elm);

12 var newElement = Elm.Graphics.Element.make(elm).newElement;

14 var newElement = Elm.Graphics.Element.make(elm).newElement;

13 var JS = Elm.Native.JavaScript.make(elm);

15 var JS = Elm.Native.JavaScript.make(elm);

@@ -78,7 +80,7 @@ Elm.Native.Graphics.Input.make = function(elm) {

78

80

79 function updateButton(node, oldModel, newModel) {

81 function updateButton(node, oldModel, newModel) {

80 node.elm_signal = newModel.signal;

82 node.elm_signal = newModel.signal;

81− node.elm_value = nemModel.value;

83+ node.elm_value = newModel.value;

82 var txt = newModel.text;

84 var txt = newModel.text;

83 if (oldModel.text !== txt) node.innerHTML = txt;

85 if (oldModel.text !== txt) node.innerHTML = txt;

84 }

86 }

@@ -215,11 +217,52 @@ Elm.Native.Graphics.Input.make = function(elm) {

215 }

217 }

216 }

218 }

217

219

220+ function updateIfNeeded(css, attribute, latestAttribute) {

221+ if (css[attribute] !== latestAttribute) {

222+ css[attribute] = latestAttribute;

223+ }

224+ }

225+ function cssDimensions(dimensions) {

226+ return dimensions.top + 'px ' +

227+ dimensions.right + 'px ' +

228+ dimensions.bottom + 'px ' +

229+ dimensions.left + 'px';

230+ }

231+ function updateFieldStyle(css, style) {

232+ updateIfNeeded(css, 'padding', cssDimensions(style.padding));

233+

234+ var outline = style.outline;

235+ updateIfNeeded(css, 'border-width', cssDimensions(outline.width));

236+ updateIfNeeded(css, 'border-color', toCss(outline.color));

237+ updateIfNeeded(css, 'border-radius', outline.radius + 'px');

238+

239+ var highlight = style.highlight;

240+ if (highlight.width === 0) {

241+ css.outline = 'none';

242+ } else {

243+ updateIfNeeded(css, 'outline-width', highlight.width + 'px');

244+ updateIfNeeded(css, 'outline-color', toCss(highlight.color));

245+ }

246+

247+ var textStyle = style.style;

248+ updateIfNeeded(css, 'color', toCss(textStyle.color));

249+ if (textStyle.typeface.ctor !== '[]') {

250+ updateIfNeeded(css, 'font-family', Text.toTypefaces(textStyle.typeface));

251+ }

252+ if (textStyle.height.ctor !== "Nothing") {

253+ updateIfNeeded(css, 'font-size', textStyle.height._0 + 'px');

254+ }

255+ updateIfNeeded(css, 'font-weight', textStyle.bold ? 'bold' : 'normal');

256+ updateIfNeeded(css, 'font-style', textStyle.italic ? 'italic' : 'normal');

257+ if (textStyle.line.ctor !== 'Nothing') {

258+ updateIfNeeded(css, 'text-decoration', Text.toLine(textStyle.line._0));

259+ }

260+ }

261+

218 function renderField(model) {

262 function renderField(model) {

219 var field = newNode('input');

263 var field = newNode('input');

220− field.style.border = 'none';

264+ updateFieldStyle(field.style, model.style);

221− field.style.outline = 'none';

265+ field.style.borderStyle = 'solid';

222− field.style.backgroundColor = 'transparent';

223 field.style.pointerEvents = 'auto';

266 field.style.pointerEvents = 'auto';

224

267

225 field.type = model.type;

268 field.type = model.type;

@@ -302,6 +345,9 @@ Elm.Native.Graphics.Input.make = function(elm) {

302 }

345 }

303

346

304 function updateField(field, oldModel, newModel) {

347 function updateField(field, oldModel, newModel) {

348+ if (oldModel.style !== newModel.style) {

349+ updateFieldStyle(field.style, newModel.style);

350+ }

305 field.elm_signal = newModel.signal;

351 field.elm_signal = newModel.signal;

306 field.elm_handler = newModel.handler;

352 field.elm_handler = newModel.handler;

307

353

@@ -316,10 +362,16 @@ Elm.Native.Graphics.Input.make = function(elm) {

316 }

362 }

317

363

318 function mkField(type) {

364 function mkField(type) {

319− function field(signal, handler, placeHolder, content) {

365+ function field(signal, handler, style, placeHolder, content) {

366+ var padding = style.padding;

367+ var outline = style.outline.width;

368+ var adjustWidth = padding.left + padding.right + outline.left + outline.right;

369+ var adjustHeight = padding.top + padding.bottom + outline.top + outline.bottom;

320 return A3(newElement, 200, 30, {

370 return A3(newElement, 200, 30, {

321 ctor: 'Custom',

371 ctor: 'Custom',

322− type: type + 'Input',

372+ type: type + 'Field',

373+ adjustWidth: adjustWidth,

374+ adjustHeight: adjustHeight,

323 render: renderField,

375 render: renderField,

324 update: updateField,

376 update: updateField,

325 model: {

377 model: {

@@ -327,14 +379,14 @@ Elm.Native.Graphics.Input.make = function(elm) {

327 handler:handler,

379 handler:handler,

328 placeHolder:placeHolder,

380 placeHolder:placeHolder,

329 content:content,

381 content:content,

382+ style:style,

330 type:type

383 type:type

331 }

384 }

332 });

385 });

333 }

386 }

334− return F4(field);

387+ return F5(field);

335 }

388 }

336

389

337−

338 function hoverable(signal, handler, elem) {

390 function hoverable(signal, handler, elem) {

339 function onHover(bool) {

391 function onHover(bool) {

340 elm.notify(signal.id, handler(bool));

392 elm.notify(signal.id, handler(bool));

libraries/Native/String.js−2

@@ -10,7 +10,6 @@ Elm.Native.String.make = function(elm) {

10 var Maybe = Elm.Maybe.make(elm);

11 var JS = Elm.JavaScript.make(elm);

12 var Utils = Elm.Native.Utils.make(elm);

13− var show = Elm.Native.Show.make(elm);

14

13

15 function isEmpty(str) {

14 function isEmpty(str) {

16 return str.length === 0;

15 return str.length === 0;

@@ -244,7 +243,6 @@ Elm.Native.String.make = function(elm) {

244 endsWith: F2(endsWith),

243 endsWith: F2(endsWith),

245 indexes: F2(indexes),

244 indexes: F2(indexes),

246

245

247− show:show,

248 toInt: toInt,

246 toInt: toInt,

249 toFloat: toFloat,

247 toFloat: toFloat,

250 toList: toList,

248 toList: toList,

libraries/Native/Text.js+58−42

@@ -4,11 +4,10 @@ Elm.Native.Text.make = function(elm) {

4 elm.Native.Text = elm.Native.Text || {};

5 if (elm.Native.Text.values) return elm.Native.Text.values;

6

7− var JS = Elm.JavaScript.make(elm);

8− var Utils = Elm.Native.Utils.make(elm);

7+ var toCss = Elm.Native.Color.make(elm).toCss;

9− var Color = Elm.Native.Color.make(elm);

10 var Element = Elm.Graphics.Element.make(elm);

8 var Element = Elm.Graphics.Element.make(elm);

11− var show = Elm.Native.Show.make(elm).show;

9+ var List = Elm.Native.List.make(elm);

10+ var Utils = Elm.Native.Utils.make(elm);

12

11

13 function makeSpaces(s) {

12 function makeSpaces(s) {

14 if (s.length == 0) { return s; }

13 if (s.length == 0) { return s; }

@@ -51,13 +50,51 @@ Elm.Native.Text.make = function(elm) {

51 return arr.join(' ');

50 return arr.join(' ');

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+ return ctor === 'Under' ? 'underline' :

69+ ctor === 'Over' ? 'overline' : 'line-through';

70+ }

55

71

72+ // setting styles of Text

73+ function style(style, text) {

74+ var newText = '<span style="color:' + toCss(style.color) + ';'

75+ if (style.typeface.ctor !== '[]') {

76+ newText += 'font-family:' + toTypefaces(style.typeface) + ';'

77+ }

78+ if (style.height.ctor !== "Nothing") {

79+ newText += 'font-size:' + style.height._0 + 'px;';

80+ }

81+ if (style.bold) {

82+ newText += 'font-weight:bold;';

83+ }

84+ if (style.italic) {

85+ newText += 'font-style:italic;';

86+ }

87+ if (style.line.ctor !== 'Nothing') {

88+ newText += 'text-decoration:' + toLine(style.line._0) + ';';

89+ }

90+ newText += '">' + Utils.makeText(text) + ''

91+ return Utils.txt(newText);

92+ }

56 function height(px, text) {

93 function height(px, text) {

57 return { style: 'font-size:' + px + 'px;', text:text }

94 return { style: 'font-size:' + px + 'px;', text:text }

58 }

95 }

59− function typeface(name, text) {

96+ function typeface(names, text) {

60− return { style: 'font-family:' + name + ';', text:text }

97+ return { style: 'font-family:' + toTypefaces(names) + ';', text:text }

61 }

98 }

62 function monospace(text) {

99 function monospace(text) {

63 return { style: 'font-family:monospace;', text:text }

100 return { style: 'font-family:monospace;', text:text }

@@ -71,25 +108,16 @@ Elm.Native.Text.make = function(elm) {

71 function link(href, text) {

108 function link(href, text) {

72 return { href: toText(href), text:text };

109 return { href: toText(href), text:text };

73 }

110 }

74− function underline(text) {

111+ function line(line, text) {

75− return { line: ' underline', text:text };

112+ return { style: 'text-decoration:' + toLine(line) + ';', 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 };

82 }

113 }

83

114

84− function color(c, text) {

115+ function color(color, text) {

85− var color = (c._3 === 1)

86− ? ('rgb(' + c._0 + ', ' + c._1 + ', ' + c._2 + ')')

87− : ('rgba(' + c._0 + ', ' + c._1 + ', ' + c._2 + ', ' + c._3 + ')');

88− return { style: 'color:' + color + ';', text:text };

116+ return { style: 'color:' + toCss(color) + ';', text:text };

89 }

117 }

90

118

91− function position(align) {

119+ function block(align) {

92− function create(text) {

120+ return function(text) {

93 var raw = {

121 var raw = {

94 ctor :'RawHtml',

122 ctor :'RawHtml',

95 html : Utils.makeText(text),

123 html : Utils.makeText(text),

@@ -100,7 +128,6 @@ Elm.Native.Text.make = function(elm) {

100 var pos = A2(Utils.htmlHeight, 0, raw);

128 var pos = A2(Utils.htmlHeight, 0, raw);

101 return A3(Element.newElement, pos._0, pos._1, raw);

129 return A3(Element.newElement, pos._0, pos._1, raw);

102 }

130 }

103− return create;

104 }

131 }

105

132

106 function markdown(text, guid) {

133 function markdown(text, guid) {

@@ -115,36 +142,25 @@ Elm.Native.Text.make = function(elm) {

115 return A3(Element.newElement, pos._0, pos._1, raw);

142 return A3(Element.newElement, pos._0, pos._1, raw);

116 }

143 }

117

144

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 = {

145 return elm.Native.Text.values = {

128 toText: toText,

146 toText: toText,

129

147

130 height : F2(height),

148 height : F2(height),

131 italic : italic,

149 italic : italic,

132 bold : bold,

150 bold : bold,

133− underline : underline,

151+ line : F2(line),

134− overline : overline,

135− strikeThrough : strikeThrough,

136 monospace : monospace,

152 monospace : monospace,

137 typeface : F2(typeface),

153 typeface : F2(typeface),

138 color : F2(color),

154 color : F2(color),

139 link : F2(link),

155 link : F2(link),

140

156

157+ leftAligned : block('left'),

158+ rightAligned : block('right'),

159+ centered : block('center'),

141− justified : position('justify'),

160+ justified : block('justify'),

142− centered : position('center'),

143− righted : position('right'),

144− text : text,

145− plainText : plainText,

146− markdown : markdown,

161+ markdown : markdown,

147

162

148− asText : asText,

163+ toTypefaces:toTypefaces,

164+ toLine:toLine,

149 };

165 };

150};

166};

libraries/Native/Utils.js−7

@@ -76,14 +76,8 @@ Elm.Native.Utils.make = function(elm) {

76

77 function makeText(text) {

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 = '' + text + '';

92 if (style) text = '' + text + '';

100 return text;

93 return text;

101 }

94 }

libraries/String.elm+2−1

@@ -28,6 +28,7 @@ Cosmetic operations such as padding with extra characters or trimming whitespace

28@docs map, filter, foldl, foldr, any, all

29-}

30

31+import Native.Show

31import Native.String

32import Native.String

32import Maybe (Maybe)

33import Maybe (Maybe)

33

34

@@ -284,7 +285,7 @@ indices = Native.String.indexes

284 show [1,2] == "[1,2]"

285 show [1,2] == "[1,2]"

285-}

286-}

286show : a -> String

287show : a -> String

287−show = Native.String.show

288+show = Native.Show.show

288

289

289{-| Try to convert a string into an int, failing on improperly formatted strings.

290{-| Try to convert a string into an int, failing on improperly formatted strings.

290

291

libraries/Text.elm+79−40

@@ -6,94 +6,132 @@ module Text where

6@docs toText

7

8# Creating Elements

9−@docs plainText, asText, text, centered, justified, righted

9+@docs leftAligned, rightAligned, centered, justified

10

11−# Formatting

11+# Links and Style

12−@docs color, typeface, height, link

12+@docs link, Style, style, Line, defaultStyle

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

19import Basics (..)

27import Basics (..)

28+import String

20−import Color (Color)

29+import Color (Color, black)

21import Graphics.Element (Element, Three, Pos, ElementPrim, Properties)

30import Graphics.Element (Element, Three, Pos, ElementPrim, Properties)

22−import Maybe (Maybe)

31+import Maybe (Maybe, Nothing)

23import JavaScript (JSString)

32import JavaScript (JSString)

33+import Native.Show

24import Native.Text

34import Native.Text

25

35

26data Text = Text

36data Text = Text

27

37

38+data Line = Under | Over | Through

39+

40+{-| Representation of all the ways you can style `Text`.

41+-}

42+type Style =

43+ { typeface : [String]

44+ , height : Maybe Float

45+ , color : Color

46+ , bold : Bool

47+ , italic : Bool

48+ , line : Maybe Line

49+ }

50+

51+{-| Plain black text. It uses the browsers default typeface and text height.

52+No decorations are used:

53+

54+ { typeface = []

55+ , height = Nothing

56+ , color = black

57+ , bold = False

58+ , italic = False

59+ , line = Nothing

60+ }

61+-}

62+defaultStyle : Style

63+defaultStyle =

64+ { typeface = []

65+ , height = Nothing

66+ , color = black

67+ , bold = False

68+ , italic = False

69+ , line = Nothing

70+ }

71+

28{-| Convert a string into text which can be styled and displayed. -}

72{-| Convert a string into text which can be styled and displayed. -}

29toText : String -> Text

73toText : String -> Text

30toText = Native.Text.toText

74toText = Native.Text.toText

31

75

32−{-| Set the typeface of some text. The first argument should be a comma

76+{-| Set the style of some text.

33−separated listing of the desired typefaces:

77+-}

78+style : Style -> Text -> Text

79+style = Native.Text.style

80+

81+{-| Provide a list of prefered typefaces for some text.

34

82

35− "helvetica, arial, sans-serif"

83+ ["helvetica","arial","sans-serif"]

36

84

85+Not everyone has access to the same typefaces, so rendering will use the first

86+typeface in the list that is found on the user's computer. If there are no

87+matches, it will use their default typeface. Works the same as the CSS

37−Works the same as the CSS font-family property.

88+font-family property.

38-}

89-}

39−typeface : String -> Text -> Text

90+typeface : [String] -> Text -> Text

40typeface = Native.Text.typeface

91typeface = Native.Text.typeface

41

92

42{-| Switch to a monospace typeface. Good for code snippets. -}

93{-| Switch to a monospace typeface. Good for code snippets. -}

43monospace : Text -> Text

94monospace : Text -> Text

44monospace = Native.Text.monospace

95monospace = Native.Text.monospace

45

96

46−{-| Create a link. -}

97+{-| Create a link.

98+

99+ link "http://elm-lang.org" (toText "Elm Website")

100+-}

47link : String -> Text -> Text

101link : String -> Text -> Text

48link = Native.Text.link

102link = Native.Text.link

49

103

50−{-| Set the height of text in pixels. -}

51height : Float -> Text -> Text

104height : Float -> Text -> Text

52height = Native.Text.height

105height = Native.Text.height

53

106

54−{-| Set the color of a string. -}

55color : Color -> Text -> Text

107color : Color -> Text -> Text

56color = Native.Text.color

108color = Native.Text.color

57

109

58−{-| Make a string bold. -}

59bold : Text -> Text

110bold : Text -> Text

60bold = Native.Text.bold

111bold = Native.Text.bold

61

112

62−{-| Italicize a string. -}

63italic : Text -> Text

113italic : Text -> Text

64italic = Native.Text.italic

114italic = Native.Text.italic

65

115

66−{-| Draw a line above a string. -}

67−overline : Text -> Text

116+line : Line -> Text -> Text

68−overline = Native.Text.overline

117+line = Native.Text.line

69

118

70−{-| Underline a string. -}

119+leftAligned : Text -> Element

71−underline : Text -> Text

120+leftAligned = Native.Text.leftAligned

72−underline = Native.Text.underline

73

121

74−{-| Draw a line through a string. -}

122+rightAligned : Text -> Element

75−strikeThrough : Text -> Text

123+rightAligned = Native.Text.rightAligned

76−strikeThrough = Native.Text.strikeThrough

77

124

78−{-| Display justified, styled text. -}

79−justified : Text -> Element

80−justified = Native.Text.justified

81−

82−{-| Display centered, styled text. -}

83centered : Text -> Element

125centered : Text -> Element

84centered = Native.Text.centered

126centered = Native.Text.centered

85

127

86−{-| Display right justified, styled text. -}

87−righted : Text -> Element

128+justified : Text -> Element

88−righted = Native.Text.righted

129+justified = Native.Text.justified

89−

90−{-| Display styled text. -}

91−text : Text -> Element

92−text = Native.Text.text

93

130

94{-| Display a plain string. -}

131{-| Display a plain string. -}

95plainText : String -> Element

132plainText : String -> Element

96−plainText = Native.Text.plainText

133+plainText str =

134+ leftAligned (toText str)

97

135

98{-| for internal use only -}

136{-| for internal use only -}

99markdown : Element

137markdown : Element

@@ -107,4 +145,5 @@ the browser:

107Excellent for debugging.

145Excellent for debugging.

108-}

146-}

109asText : a -> Element

147asText : a -> Element

110−asText = Native.Text.asText

148+asText value =

149+ leftAligned (monospace (toText (Native.Show.show value)))

runtime/Init.js+1−1

@@ -91,7 +91,7 @@ function init(display, container, module, ports, moduleToReplace) {

91 checkPorts(elm);

92 } catch(e) {

93 var directions = "     Open the developer console for more details."

94− Module.main = Elm.Text.make(elm).text('<code>' + e.message + directions + '</code>');

94+ Module.main = Elm.Text.make(elm).leftAligned('<code>' + e.message + directions + '</code>');

95 reportAnyErrors = function() { throw e; }

96 }

97 inputs = ElmRuntime.filterDeadInputs(inputs);

runtime/Render/Element.js+20−3

@@ -7,7 +7,15 @@ var newElement = Utils.newElement, extract = Utils.extract,

7 addTransform = Utils.addTransform, removeTransform = Utils.removeTransform,

8 fromList = Utils.fromList, eq = Utils.eq;

9

10−function setProps(props, e) {

10+function setProps(elem, e) {

11+ var props = elem.props;

12+ var element = elem.element;

13+ if (element.adjustWidth) {

14+ props.width -= element.adjustWidth;

15+ }

16+ if (element.adjustHeight) {

17+ props.height -= element.adjustHeight;

18+ }

11 e.style.width = (props.width |0) + 'px';

19 e.style.width = (props.width |0) + 'px';

12 e.style.height = (props.height|0) + 'px';

20 e.style.height = (props.height|0) + 'px';

13 if (props.opacity !== 1) { e.style.opacity = props.opacity; }

21 if (props.opacity !== 1) { e.style.opacity = props.opacity; }

@@ -200,7 +208,7 @@ function rawHtml(elem) {

200 return div;

208 return div;

201}

209}

202

210

203−function render(elem) { return setProps(elem.props, makeElement(elem)); }

211+function render(elem) { return setProps(elem, makeElement(elem)); }

204function makeElement(e) {

212function makeElement(e) {

205 var elem = e.element;

213 var elem = e.element;

206 switch(elem.ctor) {

214 switch(elem.ctor) {

@@ -308,7 +316,16 @@ function update(node, curr, next) {

308}

316}

309

317

310function updateProps(node, curr, next) {

318function updateProps(node, curr, next) {

311− var props = next.props, currP = curr.props, e = node;

319+ var props = next.props;

320+ var currP = curr.props;

321+ var e = node;

322+ var element = next.element;

323+ if (element.adjustWidth) {

324+ props.width -= element.adjustWidth;

325+ }

326+ if (element.adjustHeight) {

327+ props.height -= element.adjustHeight;

328+ }

312 if (props.width !== currP.width) e.style.width = (props.width |0) + 'px';

329 if (props.width !== currP.width) e.style.width = (props.width |0) + 'px';

313 if (props.height !== currP.height) e.style.height = (props.height|0) + 'px';

330 if (props.height !== currP.height) e.style.height = (props.height|0) + 'px';

314 if (props.opacity !== 1 && props.opacity !== currP.opacity) {

331 if (props.opacity !== 1 && props.opacity !== currP.opacity) {