yogsototh/elm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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.

Browse source
This commit is contained in:
evancz 2013-03-12 22:59:15 -07:00
parent 609dc36596
commit 3540449119
3 changed files with 36 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
libraries/Graphics/Element.elm
View file

@ -12,7 +12,7 @@ module Graphics.Element (widthOf, heightOf, sizeOf,
spacer, newElement
) where
import Native.Utils (guid, max)
import Native.Utils (guid, max, htmlHeight)
import JavaScript as JS
import List as List
import Graphics.Color as Color
@ -34,8 +34,17 @@ widthOf e = e.props.width
heightOf e = e.props.height
sizeOf e = (e.props.width, e.props.height)
width w e = let p = e.props in { element=e.element, props={p| width <- w} }
height h e = let p = e.props in { element=e.element, props={p| height <- h} }
width nw e = let p = e.props
props = case e.element of
Image _ w h _ -> {p| height <- h/w*nw }
RawHtml html -> {p| height <- htmlHeight nw html }
_ -> p
in { element=e.element, props={props| width <- nw} }
height nh e = let p = e.props
props = case e.element of
Image _ w h _ -> {p| width <- w/h*nh }
_ -> p
in { element=e.element, props={p| height <- nh} }
opacity o e = let p = e.props in { element=e.element, props={p| opacity <- o} }
color c e = let p = e.props in
{ element=e.element, props={p| color <- Just c} }
@ -85,9 +94,9 @@ flow dir es =
DIn -> newFlow (List.maximum ws) (List.maximum hs)
DOut -> newFlow (List.maximum ws) (List.maximum hs)
above hi lo = newElement (Utils.max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
below lo hi = newElement (Utils.max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
beside lft rht = newElement (widthOf lft + widthOf rht) (Utils.max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])
above hi lo = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
below lo hi = newElement (max (widthOf hi) (widthOf lo)) (heightOf hi + heightOf lo) (Flow DDown [hi,lo])
beside lft rht = newElement (widthOf lft + widthOf rht) (max (heightOf lft) (heightOf rht)) (Flow right [lft,rht])
layers es =
let ws = List.map widthOf es

23
libraries/Native/Graphics/Text.js
View file

@ -7,6 +7,7 @@ Elm.Native.Graphics.Text = function(elm) {
if (elm.Native.Graphics.Text) return elm.Native.Graphics.Text;
var JS = Elm.JavaScript(elm);
var htmlHeight = Elm.Native.Utils(elm).htmlHeight;
var Color = Elm.Native.Graphics.Color(elm);
var Element = Elm.Graphics.Element(elm);
@ -82,27 +83,13 @@ Elm.Native.Graphics.Text = function(elm) {
return "<a href='" + toText(href) + "'>" + text + "</a>";
}
function htmlHeight(txt, width) {
var t = document.createElement('div');
t.innerHTML = html;
t.style.width = w + "px";
t.style.visibility = "hidden";
t.style.styleFloat = "left";
t.style.cssFloat = "left";
document.body.appendChild(t);
var h = t.clientHeight
document.body.removeChild(t);
return h;
}
function position(pos) { return function(text) {
var e = {ctor:'RawHtml',
_0: '<div style="padding:0;margin:0;text-align:'+pos+'">'+text+'</div>'
};
_0: '<div style="padding:0;margin:0;text-align:' +
pos + '">' + text + '</div>'
};
var w = elm.node.clientWidth;
return A3(Element.newElement, w, htmlHeight(text, w), e);
return A3(Element.newElement, w, A2(htmlHeight, w, text), e);
}
}

17
libraries/Native/Utils.js
View file

@ -96,6 +96,20 @@ Elm.Native.Utils = function(elm) {
function max(a,b) { return a > b ? a : b }
function min(a,b) { return a < b ? a : b }
function htmlHeight(width, html) {
var t = document.createElement('div');
t.innerHTML = html;
t.style.width = width + "px";
t.style.visibility = "hidden";
t.style.styleFloat = "left";
t.style.cssFloat = "left";
document.body.appendChild(t);
var h = t.clientHeight
document.body.removeChild(t);
return h;
}
return elm.Native.Utils = {
eq:eq,
compare:compare,
@ -107,6 +121,7 @@ Elm.Native.Utils = function(elm) {
insert: insert,
guid: guid,
max : F2(max),
min : F2(min)
min : F2(min),
htmlHeight: F2(htmlHeight)
};
};