Skip to content

Commit 257781c

Browse files
author
Evan You
committed
implement custom javascript transitions
1 parent cd80fe4 commit 257781c

File tree

6 files changed

+92
-34
lines changed

6 files changed

+92
-34
lines changed

‎src/compiler.js

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -197,25 +197,32 @@ CompilerProto.setupObserver = function () {
197197
* Compile a DOM node (recursive)
198198
*/
199199
CompilerProto.compile = function (node, root) {
200+
200201
var compiler = this
202+
201203
if (node.nodeType === 1) {
204+
202205
// a normal node
203206
if (node.hasAttribute(config.preAttr)) return
204207
var vmId = node.getAttribute(config.vmAttr),
205208
repeatExp = node.getAttribute(config.repeatAttr),
206209
partialId = node.getAttribute(config.partialAttr),
207210
transId = node.getAttribute(config.transAttr),
208211
transClass = node.getAttribute(config.transClassAttr)
212+
209213
// we need to check for any possbile special directives
210214
// e.g. sd-repeat, sd-viewmodel & sd-partial
211215
if (repeatExp) { // repeat block
216+
212217
// repeat block cannot have sd-id at the same time.
213218
node.removeAttribute(config.idAttr)
214219
var directive = Directive.parse(config.repeatAttr, repeatExp, compiler, node)
215220
if (directive) {
216221
compiler.bindDirective(directive)
217222
}
223+
218224
} else if (vmId && !root) { // child ViewModels
225+
219226
node.removeAttribute(config.vmAttr)
220227
var ChildVM = compiler.getOption('viewmodels', vmId)
221228
if (ChildVM) {
@@ -228,6 +235,7 @@ CompilerProto.compile = function (node, root) {
228235
})
229236
compiler.childCompilers.push(child.$compiler)
230237
}
238+
231239
} else {
232240

233241
// replace innerHTML with partial
@@ -242,23 +250,24 @@ CompilerProto.compile = function (node, root) {
242250

243251
// Javascript transition
244252
if (transId) {
245-
// TODO implement this
246253
node.removeAttribute(config.transAttr)
254+
node.sd_trans = transId
247255
}
248256

249257
// CSS class transition
250258
if (transClass) {
251-
// attach the transition id to node
252-
// its only text so should be fine...
253-
node.sd_trans_class = transClass
254259
node.removeAttribute(config.transClassAttr)
260+
node.sd_trans_class = transClass
255261
}
256262

257263
// finally, only normal directives left!
258264
compiler.compileNode(node)
259265
}
266+
260267
} else if (node.nodeType === 3) { // text node
268+
261269
compiler.compileTextNode(node)
270+
262271
}
263272
}
264273

@@ -306,7 +315,7 @@ CompilerProto.compileNode = function (node) {
306315
CompilerProto.compileTextNode = function (node) {
307316
var tokens = TextParser.parse(node.nodeValue)
308317
if (!tokens) return
309-
var dirname = config.prefix + '-text',
318+
var dirname = config.textAttr,
310319
el, token, directive
311320
for (var i = 0, l = tokens.length; i < l; i++) {
312321
token = tokens[i]
@@ -639,7 +648,7 @@ CompilerProto.destroy = function () {
639648
} else if (el.parentNode) {
640649
transition(el, -1, function () {
641650
el.parentNode.removeChild(el)
642-
})
651+
}, this)
643652
}
644653
}
645654

‎src/directives/if.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ module.exports = {
1010

1111
update: function (value) {
1212

13-
var el = this.el,
14-
init = this.compiler.init
13+
var el = this.el
1514

1615
if (!this.parent) { // the node was detached when bound
1716
if (!el.parentNode) {
@@ -22,13 +21,14 @@ module.exports = {
2221
}
2322

2423
// should always have this.parent if we reach here
25-
var parent = this.parent,
26-
ref = this.ref
24+
var parent = this.parent,
25+
ref = this.ref,
26+
compiler = this.compiler
2727

2828
if (!value) {
29-
transition(el, -1, remove, init)
29+
transition(el, -1, remove, compiler)
3030
} else {
31-
transition(el, 1, insert, init)
31+
transition(el, 1, insert, compiler)
3232
}
3333

3434
function remove () {

‎src/directives/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = {
3030
change = function () {
3131
el.style.display = target
3232
}
33-
transition(el, value ? 1 : -1, change, this.compiler.init)
33+
transition(el, value ? 1 : -1, change, this.compiler)
3434
},
3535

3636
'class': function (value) {

‎src/directives/repeat.js

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
var config = require('../config'),
2-
Observer = require('../observer'),
3-
Emitter = require('../emitter'),
4-
utils = require('../utils'),
5-
trans = require('../transition'),
1+
var config = require('../config'),
2+
Observer = require('../observer'),
3+
Emitter = require('../emitter'),
4+
utils = require('../utils'),
5+
transition = require('../transition'),
66
ViewModel // lazy def to avoid circular dependency
77

88
/**
@@ -90,18 +90,19 @@ module.exports = {
9090
el = self.el,
9191
ctn = self.container = el.parentNode
9292

93-
el.removeAttribute(config.prefix + '-repeat')
93+
el.removeAttribute(config.repeatAttr)
9494

9595
// extract child VM information, if any
9696
ViewModel = ViewModel || require('../viewmodel')
97-
var vmAttr = config.prefix + '-viewmodel',
98-
vmId = el.getAttribute(vmAttr)
99-
if (vmId) el.removeAttribute(vmAttr)
97+
var vmId = el.getAttribute(config.vmAttr)
98+
if (vmId) el.removeAttribute(config.vmAttr)
10099
self.ChildVM = self.compiler.getOption('viewmodels', vmId) || ViewModel
101100

102101
// extract transition information
103-
var transAttr = config.prefix + '-transition-class'
104-
self.hasTransition = !!el.getAttribute(transAttr)
102+
self.hasTransition = !!(
103+
el.getAttribute(config.transAttr) ||
104+
el.getAttribute(config.transClassAttr)
105+
)
105106

106107
// create a comment node as a reference node for DOM insertions
107108
self.ref = document.createComment('sd-repeat-' + self.arg)
@@ -169,9 +170,9 @@ module.exports = {
169170
: this.ref
170171
// make sure it works with sd-if
171172
if (!ref.parentNode) ref = ref.sd_ref
172-
trans(node, 1, function () {
173+
transition(node, 1, function () {
173174
ctn.insertBefore(node, ref)
174-
}, this.compiler.init)
175+
}, this.compiler)
175176
}
176177

177178
// set data on scope and compile

‎src/main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ function updatePrefix () {
133133
config.idAttr = prefix + '-id'
134134
config.vmAttr = prefix + '-viewmodel'
135135
config.preAttr = prefix + '-pre'
136+
config.textAttr = prefix + '-text'
136137
config.repeatAttr = prefix + '-repeat'
137138
config.partialAttr = prefix + '-partial'
138139
config.transAttr = prefix + '-transition'

‎src/transition.js

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,46 @@ var config = require('./config'),
66
* 1 = enter
77
* 2 = leave
88
*/
9-
module.exports = function (el, stage, changeState, init) {
9+
module.exports = function (el, stage, changeState, compiler) {
1010

11-
if (!endEvent || init) {
11+
if (compiler.init) return changeState()
12+
13+
// in sd-repeat, the transition directives
14+
// might not have been processed yet
15+
var transitionFunctionId =
16+
el.sd_trans ||
17+
el.getAttribute(config.transAttr),
18+
transitionClass =
19+
el.sd_trans_class ||
20+
el.getAttribute(config.transClassAttr)
21+
22+
if (transitionFunctionId) {
23+
applyTransitionFunctions(
24+
el,
25+
stage,
26+
changeState,
27+
transitionFunctionId,
28+
compiler
29+
)
30+
} else if (transitionClass) {
31+
applyTransitionClass(
32+
el,
33+
stage,
34+
changeState,
35+
transitionClass
36+
)
37+
} else {
1238
return changeState()
1339
}
1440

15-
var className =
16-
el.sd_trans_class ||
17-
// in sd-repeat, the sd-transition directive
18-
// might not have been processed yet
19-
el.getAttribute(config.transClassAttr)
41+
}
2042

21-
if (!className) {
43+
/**
44+
* Togggle a CSS class to trigger transition
45+
*/
46+
function applyTransitionClass (el, stage, changeState, className) {
47+
48+
if (!endEvent || !className) {
2249
return changeState()
2350
}
2451

@@ -59,6 +86,26 @@ module.exports = function (el, stage, changeState, init) {
5986
el.sd_trans_cb = onEnd
6087

6188
}
89+
90+
}
91+
92+
function applyTransitionFunctions (el, stage, changeState, functionId, compiler) {
93+
94+
var funcs = compiler.getOption('transitions', functionId)
95+
if (!funcs) {
96+
return changeState()
97+
}
98+
99+
var enter = funcs.enter,
100+
leave = funcs.leave
101+
102+
if (stage > 0) { // enter
103+
if (typeof enter !== 'function') return changeState()
104+
enter(el, changeState)
105+
} else { // leave
106+
if (typeof leave !== 'function') return changeState()
107+
leave(el, changeState)
108+
}
62109
}
63110

64111
/**

0 commit comments

Comments
 (0)