opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up tours.js

Browse Source
This commit is contained in:
Dannon Baker
2017-04-13 15:20:24 -04:00
parent 7d3d91fc55
commit 15a80faf5d
1 changed files with 99 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/mvc/tours.js
+99 -91
View File
@@ -3,11 +3,10 @@
* rendering a tour menu.
*/
define(['libs/bootstrap-tour'],function(BootstrapTour) {
define(["libs/bootstrap-tour"], function(BootstrapTour) {
var gxy_root = typeof Galaxy === "undefined" ? "/" : Galaxy.root;
var gxy_root = typeof Galaxy === "undefined" ? '/' : Galaxy.root;
var tourpage_template = `<h2>Galaxy Tours</h2>
var tourpage_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>
@@ -21,98 +20,107 @@ Select any tour to get started (and remember, you can click 'End Tour' at any ti
<% }); %>
</ul>`;
var tour_opts = { storage: window.sessionStorage,
onEnd: function(){
sessionStorage.removeItem('activeGalaxyTour');
},
delay: 150, // Attempts to make it look natural
orphan:true
};
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 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 Tours = Backbone.Collection.extend({
url: gxy_root + 'api/tours',
model: TourItem,
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 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.");
}
});
};
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();
},
render: function(){
var tpl = _.template(tourpage_template);
this.$el.html(tpl({tours: this.model.models})).on("click", ".tourItem", function(e){
e.preventDefault();
giveTour($(this).data("tour.id"));
});
error: function() {
// Do something.
console.error("Failed to fetch tours.");
}
});
});
},
return {ToursView: ToursView,
hooked_tour_from_data: hooked_tour_from_data,
tour_opts: tour_opts,
giveTour: giveTour};
render: function() {
var tpl = _.template(tourpage_template);
this.$el
.html(tpl({ tours: this.model.models }))
.on("click", ".tourItem", function(e) {
e.preventDefault();
giveTour($(this).data("tour.id"));
});
}
});
return {
ToursView: ToursView,
hooked_tour_from_data: hooked_tour_from_data,
tour_opts: tour_opts,
giveTour: giveTour
};
});