b247e46 · elk · git.iko.soy

git.iko.soy/elk

on master help sign in

Add tiled image to the kinds of possible images.

b247e46evancz13 years ago

libraries/Graphics/Element.elm+6−2

compare with master

unifiedsplit

@@ -1,7 +1,7 @@

2module Graphics.Element (widthOf, heightOf, sizeOf,

3 width, height, opacity, color, tag, link,

4− image, fittedImage, croppedImage,

4+ image, fittedImage, croppedImage, tiledImage,

5 flow, up, down, left, right, inward, outward,

6 above, below, beside, layers,

7 container, absolute, relative,

@@ -93,7 +93,7 @@ data ElementPrim

93 | RawHtml JSString

94 | Custom -- for custom Elements implemented in JS, see collage for example

96−data ImageStyle = Plain | Fitted | Cropped (Int,Int)

96+data ImageStyle = Plain | Fitted | Cropped (Int,Int) | Tiled

98-- Create an image given a width, height, and image source.

99image : Int -> Int -> String -> Element

@@ -113,6 +113,10 @@ croppedImage : Int -> Int -> (Int,Int) -> String -> Element

113croppedImage w h pos src =

114 newElement w h (Image (Cropped pos) w h (JS.fromString src))

115

116+tiledImage : Int -> Int -> String -> Element

117+tiledImage w h src =

118+ newElement w h (Image Tiled w h (JS.fromString src))

119+

116data Three = P | Z | N

120data Three = P | Z | N

117data Pos = Absolute Int | Relative Float

121data Pos = Absolute Int | Relative Float

118type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }

122type Position = { horizontal : Three, vertical : Three, x : Pos, y : Pos }

runtime/Render/Element.js+15−25

@@ -29,6 +29,7 @@ function image(props, img) {

29 case 'Plain': return plainImage(img._3);

30 case 'Fitted': return fittedImage(props.width, props.height, img._3);

31 case 'Cropped': return croppedImage(img,props.width,props.height,img._3);

32+ case 'Tiled': return tiledImage(img._3);

32 }

33 }

33}

34}

@@ -40,31 +41,20 @@ function plainImage(src) {

40 return img;

41 return img;

41}

42}

43−function fittedImage(w, h, src) {

44+function tiledImage(src) {

44− var e = newElement('div');

45+ var div = newElement('div');

45− e.style.position = "relative";

46+ div.style.backgroundImage = 'url(' + src + ')';

46− e.style.overflow = "hidden";

47+ return div;

47−

48+}

48− var img = newElement('img');

49− img.onload = function() {

50− img.style.position = 'absolute';

51− img.style.margin = 'auto';

53− var sw = w, sh = h;

50+function fittedImage(w, h, src) {

54− if (w / h > this.width / this.height) {

51+ var div = newElement('div');

55− sh = Math.round(this.height * w / this.width);

52+ div.style.background = 'url(' + src + ') no-repeat center center fixed';

56− } else {

53+ div.style.webkitBackgroundSize = 'cover';

57− sw = Math.round(this.width * h / this.height);

54+ div.style.MozBackgroundSize = 'cover';

58− }

55+ div.style.OBackgroundSize = 'cover';

59− img.style.width = sw + 'px';

56+ div.style.backgroundSize = 'cover';

60− img.style.height = sh + 'px';

61− img.style.left = ((w - sw) / 2) + 'px';

62− img.style.top = ((h - sh) / 2) + 'px';

63− };

64− img.src = src;

65− img.name = src;

66− e.appendChild(img);

67− return e;

57+ return div;

68}

58}

70function croppedImage(elem, w, h, src) {

60function croppedImage(elem, w, h, src) {

@@ -180,7 +170,7 @@ function update(node, curr, next) {

180 if (nextE._0 !== currE._0) node.innerHTML = nextE._0;

170 if (nextE._0 !== currE._0) node.innerHTML = nextE._0;

181 break;

171 break;

182 case "Image":

172 case "Image":

183− if (nextE._0.ctor === 'Plain') {

173+ if (nextE._0.ctor !== 'Plain') {

184 if (nextE._3 !== currE._3) node.src = nextE._3;

174 if (nextE._3 !== currE._3) node.src = nextE._3;

185 } else if (!eq(nextE,currE) ||

175 } else if (!eq(nextE,currE) ||

186 next.props.width !== curr.props.width ||

176 next.props.width !== curr.props.width ||