-
Notifications
You must be signed in to change notification settings - Fork 0
/
hype_view.coffee
91 lines (71 loc) · 3.35 KB
/
hype_view.coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
window.HypeView = class HypeView extends Backbone.View
@_views = {} # a mapping from documentNames to created views
initialize:()->
@basename = @options['basename']
@width = @options['width']
@height = @options['height']
@sounds = {}
HypeView._views[@basename] = this
load:(@documentLoadedCallback)=>
# when this is called, the @el must be set, so the rendered content can
# go in the DOM. callback will be called as soon as the doc is loaded
@render()
_documentLoaded:()=>
console.log("hype view loaded", @basename)
@documentLoadedCallback()
#for scene_name in hypeDocument.sceneNames()
# @sounds[scene_name] = new Sound("#{@basename}_Resources/#{scene_name}.mp3");
render:()=>
new_el = $("""
<div id='#{@basename}_hype_container' class='hype-container' style='position:relative;overflow:hidden;width:#{@options['width']}px;height:#{@options['height']}px;background-color:transparent;'>
<script type='text/javascript' charset='utf-8' src='#{@basename}_Resources/#{@basename}_hype_generated_script.js?71143'></script>
</div>
""")
@$el.replaceWith(new_el)
@setElement(new_el)
@
showSceneNamed:(scene_name, data, @animationCompleteCallback)=>
@hypeDocument.templateData = data
@hypeDocument.showSceneNamed(scene_name)
_transitionToSceneNamed:(scene_name, timeline_name, data, @animationCompleteCallback)=>
@hypeDocument.templateData = data
@bind "animation:complete_for_transition", ()=>
@unbind "animation:complete_for_transition"
@showSceneNamed(scene_name, data, @animationCompleteCallback)
@hypeDocument.playTimelineNamed(timeline_name)
@byDocumentName:(document_name)->
return @_views[document_name]
_mouseClick:(element, event)=>
# trigger a click:element_id
console.log("click", element.id)
@trigger("click:#{element.id}")
_animationSceneLoad:()=>
# apply the underscore templates in the alt tags
alts = @$el.find("[alt]")
alts.each (i, el)=>
d = _.clone(@hypeDocument.templateData)
d['el'] = el
$(el).html(_.template($(el).attr("alt"), d))
override_function_name = @hypeDocument.currentSceneName() + "_animationSceneLoad"
if this[override_function_name]?
this[override_function_name]()
#@sounds[@hypeDocument.currentSceneName()]?.play()
_animationComplete:()=>
console.log("animation complete")
@trigger("animation:complete_for_transition")
if @animationCompleteCallback?
@animationCompleteCallback()
# these are the static methods that can be called from your Hype javascript
@documentLoaded:(hypeDocument)->
# must be called in onSceneLoad of first scene
@_views[hypeDocument.documentName()].hypeDocument = hypeDocument
@_views[hypeDocument.documentName()]._documentLoaded()
@animationSceneLoad:(hypeDocument)->
@_views[hypeDocument.documentName()]._animationSceneLoad()
@animationComplete:(hypeDocument)->
@_views[hypeDocument.documentName()]._animationComplete()
@mouseClick:(hypeDocument, element, event)->
@_views[hypeDocument.documentName()]._mouseClick(element, event)
@transitionToSceneNamed:(hypeDocument, scene_name, timeline_name, data, animationCompleteCallback)->
@_views[hypeDocument.documentName()]._transitionToSceneNamed(scene_name, timeline_name, data, animationCompleteCallback)
module.exports = window.HypeView