1b1f058 · elk · git.iko.soy

57 var events = Signal.constant(defaultValue);

58

59 function render(model) {

60− var b = newNode('button');

60+ var b = newNode('button');

61− b.style.display = 'block';

61+ b.style.display = 'block';

62− b.elmEvent = model.event;

62+ b.elmEvent = model.event;

63− function click() { elm.notify(events.id, b.elmEvent); }

63+ function click() { elm.notify(events.id, b.elmEvent); }

64− b.addEventListener('click', click);

64+ b.addEventListener('click', click);

65− b.innerHTML = model.text;

65+ b.innerHTML = model.text;

66− return b;

66+ return b;

67 }

68

69 function update(node, oldModel, newModel) {

70− node.elmEvent = newModel.event;

70+ node.elmEvent = newModel.event;

71− var txt = newModel.text;

71+ var txt = newModel.text;

72− if (oldModel.text !== txt) node.innerHTML = txt;

72+ if (oldModel.text !== txt) node.innerHTML = txt;

73 }

74

75 function button(evnt, txt) {

76− return A3(newElement, 100, 40, {

76+ return A3(newElement, 100, 40, {

77 ctor: 'Custom',

78− type: 'Button',

78+ type: 'Button',

79− render: render,

79+ render: render,

80− update: update,

80+ update: update,

81− model: { event:evnt, text:JS.fromString(txt) }

81+ model: { event:evnt, text:JS.fromString(txt) }

82− });

82+ });

83 }

84

85 return { _:{}, button:F2(button), events:events };

89 var events = Signal.constant(defaultValue);

90

91 function render(model) {

92− var btn = newNode('div');

92+ var btn = newNode('div');

93− btn.elmEvent = model.event;

93+ btn.elmEvent = model.event;

94

95− btn.elmUp = Render.render(model.up);

95+ btn.elmUp = Render.render(model.up);

96− btn.elmHover = Render.render(model.hover);

96+ btn.elmHover = Render.render(model.hover);

97− btn.elmDown = Render.render(model.down);

97+ btn.elmDown = Render.render(model.down);

98

99− function replace(node) {

99+ function replace(node) {

100 if (node !== btn.firstChild) btn.replaceChild(node, btn.firstChild);

101− }

101+ }

102− var overCount = 0;

102+ var overCount = 0;

103− function over(e) {

103+ function over(e) {

104− if (overCount++ > 0) return;

104+ if (overCount++ > 0) return;

105− replace(btn.elmHover);

105+ replace(btn.elmHover);

106− }

106+ }

107− function out(e) {

107+ function out(e) {

108− if (btn.contains(e.toElement || e.relatedTarget)) return;

108+ if (btn.contains(e.toElement || e.relatedTarget)) return;

109− overCount = 0;

109+ overCount = 0;

110− replace(btn.elmUp);

110+ replace(btn.elmUp);

111− }

111+ }

112− function up() {

112+ function up() {

113− replace(btn.elmHover);

113+ replace(btn.elmHover);

114− elm.notify(events.id, btn.elmEvent);

114+ elm.notify(events.id, btn.elmEvent);

115− }

115+ }

116− function down() { replace(btn.elmDown); }

116+ function down() { replace(btn.elmDown); }

117− btn.addEventListener('mouseover', over);

117+ btn.addEventListener('mouseover', over);

118− btn.addEventListener('mouseout' , out);

118+ btn.addEventListener('mouseout' , out);

119− btn.addEventListener('mousedown', down);

119+ btn.addEventListener('mousedown', down);

120− btn.addEventListener('mouseup' , up);

120+ btn.addEventListener('mouseup' , up);

121−

121+

122− btn.appendChild(btn.elmUp);

122+ btn.appendChild(btn.elmUp);

123

124 var clicker = newNode('div');

125 clicker.style.width = btn.elmUp.style.width;

128 clicker.style.top = 0;

129 btn.appendChild(clicker);

130

131− return btn;

131+ return btn;

132 }

133

134 function update(node, oldModel, newModel) {

135− node.elmEvent = newModel.event;

135+ node.elmEvent = newModel.event;

136− Render.update(node.elmUp, oldModel.up, newModel.up)

136+ Render.update(node.elmUp, oldModel.up, newModel.up)

137− Render.update(node.elmHover, oldModel.hover, newModel.hover)

137+ Render.update(node.elmHover, oldModel.hover, newModel.hover)

138− Render.update(node.elmDown, oldModel.down, newModel.down)

138+ Render.update(node.elmDown, oldModel.down, newModel.down)

139 }

140

141 function button(evnt, up, hover, down) {

142− return A3(newElement,

142+ return A3(newElement,

143− Math.max(up.props.width, hover.props.width, down.props.width),

143+ Math.max(up.props.width, hover.props.width, down.props.width),

144− Math.max(up.props.height, hover.props.height, down.props.height),

144+ Math.max(up.props.height, hover.props.height, down.props.height),

145 { ctor: 'Custom',

146− type: 'CustomButton',

146+ type: 'CustomButton',

147− render: render,

147+ render: render,

148− update: update,

148+ update: update,

149− model: { event:evnt, up:up, hover:hover, down:down }

149+ model: { event:evnt, up:up, hover:hover, down:down }

150− });

150+ });

151 }

152

153 return { _:{}, customButton:F4(button), events:events };

171 var events = Signal.constant(defaultValue);

172

173 function render(model) {

174− var b = newNode('input');

174+ var b = newNode('input');

175− b.type = 'checkbox';

175+ b.type = 'checkbox';

176− b.checked = model.checked;

176+ b.checked = model.checked;

177− b.style.display = 'block';

177+ b.style.display = 'block';

178− b.elmHandler = model.handler;

178+ b.elmHandler = model.handler;

179− function change() { elm.notify(events.id, b.elmHandler(b.checked)); }

179+ function change() { elm.notify(events.id, b.elmHandler(b.checked)); }

180− b.addEventListener('change', change);

180+ b.addEventListener('change', change);

181− return b;

181+ return b;

182 }

183

184 function update(node, oldModel, newModel) {

185− node.elmHandler = newModel.handler;

185+ node.elmHandler = newModel.handler;

186− node.checked = newModel.checked;

186+ node.checked = newModel.checked;

187− return true;

187+ return true;

188 }

189

190 function box(handler, checked) {

191− return A3(newElement, 13, 13, {

191+ return A3(newElement, 13, 13, {

192 ctor: 'Custom',

193− type: 'CheckBox',

193+ type: 'CheckBox',

194− render: render,

194+ render: render,

195− update: update,

195+ update: update,

196− model: { checked:checked, handler:handler }

196+ model: { checked:checked, handler:handler }

197− });

197+ });

198 }

199

200 return { _:{}, box:F2(box), events:events };

214 var state = null;

215

216 function render(model) {

217− var field = newNode('input');

217+ var field = newNode('input');

218− field.elmHandler = model.handler;

218+ field.elmHandler = model.handler;

219−

219+

220− field.id = 'test';

220+ field.id = 'test';

221− field.type = type;

221+ field.type = type;

222− field.placeholder = JS.fromString(model.placeHolder);

222+ field.placeholder = JS.fromString(model.placeHolder);

223− field.value = JS.fromString(model.state.string);

223+ field.value = JS.fromString(model.state.string);

224− setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');

224+ setRange(field, model.state.selectionStart, model.state.selectionEnd, 'forward');

225− field.style.border = 'none';

225+ field.style.border = 'none';

226 state = model.state;

227

228− function update() {

228+ function update() {

229− var start = field.selectionStart,

229+ var start = field.selectionStart,

230− end = field.selectionEnd;

230+ end = field.selectionEnd;

231− if (field.selectionDirection === 'backward') {

231+ if (field.selectionDirection === 'backward') {

232− start = end;

232+ start = end;

233− end = field.selectionStart;

233+ end = field.selectionStart;

234− }

234+ }

235 state = { _:{},

236 string:JS.toString(field.value),

237 selectionStart:start,

238 selectionEnd:end };

239− elm.notify(events.id, field.elmHandler(state));

239+ elm.notify(events.id, field.elmHandler(state));

240− }

240+ }

241− function mousedown() {

241+ function mousedown() {

242− update();

242+ update();

243− elm.node.addEventListener('mouseup', mouseup);

243+ elm.node.addEventListener('mouseup', mouseup);

244− }

244+ }

245− function mouseup() {

245+ function mouseup() {

246− update();

246+ update();

247− elm.node.removeEventListener('mouseup', mouseup)

247+ elm.node.removeEventListener('mouseup', mouseup)

248− }

248+ }

249− field.addEventListener('keyup', update);

249+ field.addEventListener('keyup', update);

250− field.addEventListener('mousedown', mousedown);

250+ field.addEventListener('mousedown', mousedown);

251−

251+

252− return field;

252+ return field;

253 }

254

255 function update(node, oldModel, newModel) {

256− node.elmHandler = newModel.handler;

256+ node.elmHandler = newModel.handler;

257 if (state === newModel.state) return;

258 var newStr = JS.fromString(newModel.state.string);

259− if (node.value !== newStr) node.value = newStr;

259+ if (node.value !== newStr) node.value = newStr;

260

261 var start = newModel.state.selectionStart;

262 var end = newModel.state.selectionEnd;

275 }

276

277 function field(handler, placeHolder, state) {

278− return A3(newElement, 200, 30,

278+ return A3(newElement, 200, 30,

279 { ctor: 'Custom',

280− type: type + 'Input',

280+ type: type + 'Input',

281− render: render,

281+ render: render,

282− update: update,

282+ update: update,

283− model: { handler:handler,

283+ model: { handler:handler,

284− placeHolder:placeHolder,

284+ placeHolder:placeHolder,

285− state:state }

285+ state:state }

286− });

286+ });

287 }

288

289 return { _:{}, field:F3(field), events:events };