I have to trigger a few JS functions after each hotspot is rendered, or each time the hotspots tab is updated and the whole collection has rendered completely after user interaction.
I have to rearrange the content of the custom fields to suit my client's design needs.
I'm really close but I still have issues, because I only manage to get my code executed on the first page load but never on tab update so my design tweaks are lost everytime a user drags the map or searches the database. Could you please assist me?
I understand I have to edit this object for events triggered everytime users interact with the app after the page initially loads. I got to have some code execute there, although the hotspots info panel hadn't finished rendering and my code looks for existing DOM elements so it was still unable to find it.
from hotspots_app.js, I commented where I'm entering code
/**
* Created by DanielDimitrov on 26.02.14.
*/
HotspotsManager.module("HotspotsApp", function(HotspotsApp, HotspotsManager, Backbone, Marionette, $, _){
var API = {
renderHotspotsInTab: function() {
HotspotsApp.Tabs.Controller.render();
},
showList: function(hotspots) {
HotspotsApp.List.Controller.showList(hotspots);
// code written here executes after the list was generated but has not yet finished rendering
},
markerSelected: function(model, isSelected) {
HotspotsApp.List.Controller.selected(model, isSelected);
},
setPage: function(page) {
HotspotsApp.List.Controller.setPage(page);
},
shotTileHotspot: function(hotspot) {
HotspotsApp.List.Controller.shotTileHotspot(hotspot);
}
};
HotspotsManager.on('start
age', function(page) {
API.setPage(page);
});
HotspotsManager.on("tabs:ready", function(){
API.renderHotspotsInTab();
});
this.listenTo(HotspotsManager, "hotspots:fetchedData", function(hotspots) {
// code written here executes right before the list is generated
return API.showList(hotspots);
});
HotspotsManager.on("marker:selected", function(model, isSelected) {
API.markerSelected(model, isSelected);
});
HotspotsManager.on("tile:hotspot:loaded", function(model) {
API.shotTileHotspot(model);
});
});
});