b247e46 · elk · git.iko.soy

git.iko.soy/elk

Add tiled image to the kinds of possible images.

commitb247e4663bee214c54235ebe40a3aa869e1c9b3a authorevancz <info@elm-lang.org> dateSat 25 May 2013, 14:52 (13 years ago) parent4190f06

2 files changed+21−27

compare with master

unifiedsplit

libraries/Graphics/Element.elm+6−2 runtime/Render/Element.js+15−25

libraries/Graphics/Element.elm+6−2

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

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

33 width, height, opacity, color, tag, link,

4− image, fittedImage, croppedImage,

4+ image, fittedImage, croppedImage, tiledImage,

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

66 above, below, beside, layers,

77 container, absolute, relative,

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

9393 | RawHtml JSString

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

9595

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

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

9797

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

9999image : Int -> Int -> String -> Element

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

113113croppedImage w h pos src =

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

115115

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

117+tiledImage w h src =

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

119+

116120data Three = P | Z | N

117121data Pos = Absolute Int | Relative Float

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

runtime/Render/Element.js+15−25

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

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

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

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

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

3233 }

3334}

3435

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

4041 return img;

4142}

4243

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

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

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

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

47−

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

49− img.onload = function() {

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

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

44+function tiledImage(src) {

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

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

47+ return div;

48+}

5249

53− var sw = w, sh = h;

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

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

56− } else {

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

58− }

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

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;

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

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

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

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

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

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

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

57+ return div;

6858}

6959

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

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

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

181171 break;

182172 case "Image":

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

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

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

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

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