git.iko.soy/elk
on master help sign in
Fix behavior of width and height to maintain the dimensions of images when resizing. Move htmlHeight into Utils so it can be used by both Element and Text.
3540449evancz
libraries/Graphics/Element.elm+15−6
compare with master
unifiedsplit
@@ -12,7 +12,7 @@ module Graphics.Element (widthOf, heightOf, sizeOf,
12 spacer, newElement
12 spacer, newElement
13 ) where
13 ) where
14
14
15−import Native.Utils (guid, max)
15+import Native.Utils (guid, max, htmlHeight)
16import JavaScript as JS
16import JavaScript as JS
17import List as List
17import List as List
18import Graphics.Color as Color
18import Graphics.Color as Color
@@ -34,8 +34,17 @@ widthOf e = e.props.width
34heightOf e = e.props.height
34heightOf e = e.props.height
35sizeOf e = (e.props.width, e.props.height)
35sizeOf e = (e.props.width, e.props.height)
36
36
37+width nw e = let p = e.props
38+ props = case e.element of
39+ Image _ w h _ -> {p| height <- h/w*nw }
40+ RawHtml html -> {p| height <- htmlHeight nw html }
41+ _ -> p
37−width w e = let p = e.props in { element=e.element, props={p| width <- w} }
42+ in { element=e.element, props={props| width <- nw} }
43+height nh e = let p = e.props
44+ props = case e.element of
45+ Image _ w h _ -> {p| width <- w/h*nh }
46+ _ -> p
38−height h e = let p = e.props in { element=e.element, props={p| height <- h} }
47+ in { element=e.element, props={p| height <- nh} }
39opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
48opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
40color c e = let p = e.props in
49color c e = let p = e.props in
41 { element=e.element, props={p| color <- Just c} }
50 { element=e.element, props={p| color <- Just c} }
@@ -85,9 +94,9 @@ flow dir es =
85 DIn -> newFlow (List.maximum ws) (List.maximum hs)
94 DIn -> newFlow (List.maximum ws) (List.maximum hs)
86 DOut -> newFlow (List.maximum ws) (List.maximum hs)
95 DOut -> newFlow (List.maximum ws) (List.maximum hs)
87
96
88−above hi lo = newElement (Utils.max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
97+above hi lo = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
89−below lo hi = newElement (Utils.max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
98+below lo hi = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
90−beside lft rht = newElement (widthOf lft + widthOf rht) (Utils.max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])
99+beside lft rht = newElement (widthOf lft + widthOf rht) (max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])
91
100
92layers es =
101layers es =
93 let ws = List.map widthOf es
102 let ws = List.map widthOf es
libraries/Native/Graphics/Text.js+5−18
@@ -7,6 +7,7 @@ Elm.Native.Graphics.Text = function(elm) {
7 if (elm.Native.Graphics.Text) return elm.Native.Graphics.Text;
7 if (elm.Native.Graphics.Text) return elm.Native.Graphics.Text;
8
8
9 var JS = Elm.JavaScript(elm);
9 var JS = Elm.JavaScript(elm);
10+ var htmlHeight = Elm.Native.Utils(elm).htmlHeight;
10 var Color = Elm.Native.Graphics.Color(elm);
11 var Color = Elm.Native.Graphics.Color(elm);
11 var Element = Elm.Graphics.Element(elm);
12 var Element = Elm.Graphics.Element(elm);
12
13
@@ -82,27 +83,13 @@ Elm.Native.Graphics.Text = function(elm) {
82 return "<a href='" + toText(href) + "'>" + text + "</a>";
83 return "<a href='" + toText(href) + "'>" + text + "</a>";
83 }
84 }
84
85
85− function htmlHeight(txt, width) {
86− var t = document.createElement('div');
87− t.innerHTML = html;
88− t.style.width = w + "px";
89− t.style.visibility = "hidden";
90− t.style.styleFloat = "left";
91− t.style.cssFloat = "left";
92−
93− document.body.appendChild(t);
94− var h = t.clientHeight
95− document.body.removeChild(t);
96−
97− return h;
98− }
99−
100 function position(pos) { return function(text) {
86 function position(pos) { return function(text) {
101 var e = {ctor:'RawHtml',
87 var e = {ctor:'RawHtml',
102− _0: '<div style="padding:0;margin:0;text-align:'+pos+'">'+text+'</div>'
88+ _0: '<div style="padding:0;margin:0;text-align:' +
89+ pos + '">' + text + '</div>'
103− };
90+ };
104 var w = elm.node.clientWidth;
91 var w = elm.node.clientWidth;
105− return A3(Element.newElement, w, htmlHeight(text, w), e);
92+ return A3(Element.newElement, w, A2(htmlHeight, w, text), e);
106 }
93 }
107 }
94 }
108
95
libraries/Native/Utils.js+16−1
@@ -96,6 +96,20 @@ Elm.Native.Utils = function(elm) {
96 function max(a,b) { return a > b ? a : b }
96 function max(a,b) { return a > b ? a : b }
97 function min(a,b) { return a < b ? a : b }
97 function min(a,b) { return a < b ? a : b }
98
98
99+ function htmlHeight(width, html) {
100+ var t = document.createElement('div');
101+ t.innerHTML = html;
102+ t.style.width = width + "px";
103+ t.style.visibility = "hidden";
104+ t.style.styleFloat = "left";
105+ t.style.cssFloat = "left";
106+
107+ document.body.appendChild(t);
108+ var h = t.clientHeight
109+ document.body.removeChild(t);
110+ return h;
111+ }
112+
99 return elm.Native.Utils = {
113 return elm.Native.Utils = {
100 eq:eq,
114 eq:eq,
101 compare:compare,
115 compare:compare,
@@ -107,6 +121,7 @@ Elm.Native.Utils = function(elm) {
107 insert: insert,
121 insert: insert,
108 guid: guid,
122 guid: guid,
109 max : F2(max),
123 max : F2(max),
110− min : F2(min)
124+ min : F2(min),
125+ htmlHeight: F2(htmlHeight)
111 };
126 };
112};
127};