2289029 · elk · git.iko.soy

git.iko.soy/elk

Correct resizing problems with static elements. Previously, no property updates occurred.

commit22890292b8ed0a2f5c1f172a37a062160fa8bc38 authorevancz <info@elm-lang.org> dateSun 7 Apr 2013, 17:57 (14 years ago) parent703508f

4 files changed+54−39

compare with master

unifiedsplit

libraries/Native/Show.js+2−2 libraries/Native/Signal/Window.js+7−4 runtime/Init.js+12−10 runtime/Render/Element.js+33−23

libraries/Native/Show.js+2−2

@@ -39,7 +39,7 @@ Elm.Native.Show = function(elm) {

3939 return v+"";

4040 } else if (typeof v === "string" && v.length < 2) {

4141 return "'"+v+"'";

42− } else if (typeof v === "object" && ('_' in v)) {

42+ } else if (typeof v === "object" && '_' in v) {

4343 var output = [];

4444 for (var k in v._) {

4545 console.log(k,v._[k]);

@@ -53,7 +53,7 @@ Elm.Native.Show = function(elm) {

5353 }

5454 if (output.length === 0) return "{}";

5555 return "{ " + output.join(", ") + " }";

56− } else if ('ctor' in v) {

56+ } else if (typeof v === "object" && 'ctor' in v) {

5757 if (v.ctor.substring(0,5) === "Tuple") {

5858 var output = [];

5959 for (var k in v) {

libraries/Native/Signal/Window.js+7−4

@@ -14,16 +14,19 @@ Elm.Native.Window = function(elm) {

1414

1515 // Do not move width and height into Elm. By setting the default number of kids,

1616 // the resize listener can be detached.

17− var width = A2(Signal.lift, function(p){console.log(p._0); return p._0}, dimensions);

17+ var width = A2(Signal.lift, function(p){return p._0}, dimensions);

1818 width.defaultNumberOfKids = 0;

1919

2020 var height = A2(Signal.lift, function(p){return p._1}, dimensions);

2121 height.defaultNumberOfKids = 0;

2222

2323 function resize(e) {

24− var hasListener = elm.notify(dimensions.id,

25− Tuple2(elm.node.clientWidth, elm.node.clientHeight));

26− if (!hasListener) window.removeEventListener('resize', resize);

24+ var w = elm.node.clientWidth;

25+ var h = document.body === elm.node ? window.innerHeight : elm.node.clientHeight;

26+ console.log('cmp', dimensions.value._0, w, dimensions.value._1, h);

27+ if (dimensions.value._0 === w && dimensions.value._1 === h) return;

28+ var hasListener = elm.notify(dimensions.id, Tuple2(w,h));

29+ if (!hasListener) window.removeEventListener('resize', resize);

2730 }

2831 window.addEventListener('resize', resize);

2932

runtime/Init.js+12−10

@@ -60,21 +60,23 @@ Elm.init = function(module, baseNode) {

6060 visualModel = signalGraph.value;

6161 inputs = ElmRuntime.filterDeadInputs(inputs);

6262

63+ var tuple2 = Elm.Native.Utils(elm).Tuple2;

64+ function adjustWindow() {

65+ if ('Window' in elm) {

66+ var w = baseNode.clientWidth;

67+ if (w !== elm.Window.dimensions.value._0) {

68+ notify(elm.Window.dimensions.id,

69+ tuple2(w, document.body === baseNode ?

70+ window.innerHeight : baseNode.clientHeight));

71+ }

72+ }

73+ }

74+

6375 // Add the visualModel to the DOM

6476 var renderNode = Render.render(visualModel)

6577 baseNode.appendChild(renderNode);

6678 adjustWindow();

6779

68− function adjustWindow() {

69− if ('Window' in elm) {

70− var w = baseNode.clientWidth;

71− if (w !== elm.Window.dimensions.value._0) {

72− notify(elm.Window.dimensions.id,

73− Elm.Native.Utils(elm).Tuple2(w, baseNode.clientHeight));

74− }

75− }

76− }

77−

7880 // set up updates so that the DOM is adjusted as necessary.

7981 var update = Render.update;

8082 function domUpdate(value) {

runtime/Render/Element.js+33−23

@@ -25,11 +25,11 @@ function setProps(props, e) {

2525}

2626

2727function image(props, img) {

28− switch (img._0.ctor) {

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− }

28+ switch (img._0.ctor) {

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+ }

3333}

3434

3535function plainImage(src) {

@@ -120,21 +120,21 @@ function toPos(pos) {

120120}

121121

122122function setPos(pos,w,h,e) {

123− e.style.position = 'absolute';

124− e.style.margin = 'auto';

125− var transform = '';

126− switch(pos.horizontal.ctor) {

127− case 'P': e.style.right = toPos(pos.x); break;

128− case 'Z': transform = 'translateX(' + ((-w/2)|0) + 'px) ';

129− case 'N': e.style.left = toPos(pos.x); break;

130− }

131− switch(pos.vertical.ctor) {

132− case 'N': e.style.bottom = toPos(pos.y); break;

133− case 'Z': transform += 'translateY(' + ((-h/2)|0) + 'px)';

134− case 'P': e.style.top = toPos(pos.y); break;

135− }

136− if (transform !== '') addTransform(e.style, transform);

137− return e;

123+ e.style.position = 'absolute';

124+ e.style.margin = 'auto';

125+ var transform = '';

126+ switch(pos.horizontal.ctor) {

127+ case 'P': e.style.right = toPos(pos.x); break;

128+ case 'Z': transform = 'translateX(' + ((-w/2)|0) + 'px) ';

129+ case 'N': e.style.left = toPos(pos.x); break;

130+ }

131+ switch(pos.vertical.ctor) {

132+ case 'N': e.style.bottom = toPos(pos.y); break;

133+ case 'Z': transform += 'translateY(' + ((-h/2)|0) + 'px)';

134+ case 'P': e.style.top = toPos(pos.y); break;

135+ }

136+ if (transform !== '') addTransform(e.style, transform);

137+ return e;

138138}

139139

140140function container(pos,elem) {

@@ -168,7 +168,7 @@ function makeElement(e) {

168168

169169function update(node, curr, next) {

170170 if (node.tagName === 'A') { node = node.firstChild; }

171− if (curr.props.id === next.props.id) return false;

171+ if (curr.props.id === next.props.id) return updateProps(node, curr, next);

172172 if (curr.element.ctor !== next.element.ctor) {

173173 node.parentNode.replaceChild(render(next),node);

174174 return true;

@@ -176,7 +176,9 @@ function update(node, curr, next) {

176176 var nextE = next.element, currE = curr.element;

177177 switch(nextE.ctor) {

178178 case "Spacer": break;

179− case "RawHtml": if (nextE._0 !== currE._0) node.innerHTML = nextE._0; break;

179+ case "RawHtml":

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

181+ break;

180182 case "Image":

181183 if (nextE._0.ctor === 'Plain') {

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

@@ -188,6 +190,8 @@ function update(node, curr, next) {

188190 }

189191 break;

190192 case "Flow":

193+ var arr = fromList(nextE._1);

194+ for (var i = arr.length; i--; ) { arr[i] = arr[i].element.ctor; }

191195 if (nextE._0.ctor !== currE._0.ctor) {

192196 node.parentNode.replaceChild(render(next),node);

193197 return true;

@@ -232,6 +236,10 @@ function update(node, curr, next) {

232236 return node.parentNode.replaceChild(render(next), node);

233237 }

234238 }

239+ updateProps(node, curr, next);

240+}

241+

242+function updateProps(node, curr, next) {

235243 var props = next.props, currP = curr.props, e = node;

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

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

@@ -240,7 +248,9 @@ function update(node, curr, next) {

240248 }

241249 var nextColor = (props.color.ctor === 'Just' ?

242250 extract(props.color._0) : 'transparent');

243− if (e.style.backgroundColor !== nextColor) e.style.backgroundColor = nextColor;

251+ if (e.style.backgroundColor !== nextColor) {

252+ e.style.backgroundColor = nextColor;

253+ }

244254 if (props.tag !== currP.tag) { e.id = props.tag; }

245255 if (props.href !== currP.href) {

246256 if (currP.href === '') {