-
Notifications
You must be signed in to change notification settings - Fork 967
/
tours.js
121 lines (111 loc) · 4.29 KB
/
tours.js
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
* This is the primary galaxy tours definition, currently only used for
* rendering a tour menu.
*
* For now it's intended to be plunked into the center display a-la
* Galaxy.app.display, but we could use a modal as well for more flexibility.
*
* DBTODO - This is downright backbone abuse, rewrite it.
*/
define(['libs/bootstrap-tour'],function(BootstrapTour) {
var gxy_root = typeof Galaxy === "undefined" ? '/' : Galaxy.root;
var tour_opts = { storage: window.sessionStorage,
onEnd: function(){
sessionStorage.removeItem('activeGalaxyTour');
},
delay: 150, // Attempts to make it look natural
orphan:true
};
var hooked_tour_from_data = function(data){
_.each(data.steps, function(step) {
if (step.preclick){
step.onShow= function(){
_.each(step.preclick, function(preclick){
// TODO: click delay between clicks
$(preclick).click();
});
};
}
if (step.postclick){
step.onHide = function(){
_.each(step.postclick, function(postclick){
// TODO: click delay between clicks
$(postclick).click();
});
};
}
if (step.textinsert){
// Have to manually trigger a change here, for some
// elements which have additional logic, like the
// upload input box
step.onShown= function(){
$(step.element).val(step.textinsert).trigger("change");
};
}
});
return data;
};
var TourItem = Backbone.Model.extend({
urlRoot: gxy_root + 'api/tours',
});
var Tours = Backbone.Collection.extend({
url: gxy_root + 'api/tours',
model: TourItem,
});
var giveTour = function(tour_id){
var url = gxy_root + 'api/tours/' + tour_id;
$.getJSON( url, function( data ) {
// Set hooks for additional click and data entry actions.
var tourdata = hooked_tour_from_data(data);
sessionStorage.setItem('activeGalaxyTour', JSON.stringify(data));
// Store tour steps in sessionStorage to easily persist w/o hackery.
var tour = new Tour(_.extend({
steps: tourdata.steps,
}, tour_opts));
// Always clean restart, since this is a new, explicit giveTour execution.
tour.init();
tour.goTo(0);
tour.restart();
});
};
var ToursView = Backbone.View.extend({
// initialize
initialize: function() {
var self = this;
this.setElement('<div/>');
this.model = new Tours();
this.model.fetch({
success: function(){
self.render();
},
error: function(){
// Do something.
console.error("Failed to fetch tours.");
}
});
},
render: function(){
var tpl = _.template([
"<h2>Galaxy Tours</h2>",
"<p>This page presents a list of interactive tours available on this Galaxy server. ",
"Select any tour to get started (and remember, you can click 'End Tour' at any time).</p>",
"<ul>",
'<% _.each(tours, function(tour) { %>',
'<li>',
'<a href="#" class="tourItem" data-tour.id=<%- tour.id %>>',
'<%- tour.attributes.name || tour.id %>',
'</a>',
' - <%- tour.attributes.description || "No description given." %>',
'</li>',
'<% }); %>',
"</ul>"].join(''));
this.$el.html(tpl({tours: this.model.models})).on("click", ".tourItem", function(){
giveTour($(this).data("tour.id"));
});
}
});
return {ToursView: ToursView,
hooked_tour_from_data: hooked_tour_from_data,
tour_opts: tour_opts,
giveTour: giveTour};
});