1. Paul Adamson
  2. Tricks
  3. Thursday, 27 July 2017
  4.  Subscribe via email
I have a scenario using Google's Material Design Lite kit (MDL) to style a websites UI. On this site, all standard elements such as buttons and inputs have a particular layout with specific class names. When the page is rendered, MDL javascript performs some wizardry on those elements to give them animation, coloring and behaviours unique to MDL.

My problem was that I had customized the maps filter and list layout to suit my site, but when the map first is drawn or changes, the Hotspots functionality redraws all those elements and they lose their MDL-specific behaviours.

I've seen this on my other sites where I update page sections via Ajax, and I have to invoke a component handler from MDL to re-upgrade the elements after they've been re-rendered.

The trouble here was that I did not understand backbone.js, which Hotspots uses to manage its UI to know how to call the MDL component handler.

And now I do! So here's how to call any javascript, after Hotspots has completed its work of redrawing your map and associated elements:

Add this to your custom javascript:

$(function() {
// Handler for .ready() called.

var mdl_input = document.getElementById('mdl-search-div'); // my MDL input wrapper
_.extend(mdl_input, Backbone.Events); // let Backbone know its here
mdl_input.listenTo(HotspotsManager, "all", function(el) { // let my input listen to every event (could probably narrow this down to just some events)
var mdl_input = document.getElementById('mdl-search-div'); //there's probably a way to pass mdl_input into the handler but I haven't got there yet
componentHandler.upgradeElement(mdl_input, 'MaterialTextfield'); //restore MDL behaviours

This Hotspots component is turning out to be the best choice I could have made for this site I'm working on! Highly recommended!

Responses (1)

There are %s replies to this question. If you want to see them you need a valid subscription.
If you have a valid subscription, please login now.
Visit store now

Last questions

Questions on new installation...
Working on getting this set up... https://eastend2024.joepolecheck.com/rumma...
0 Replies
Posted on Wednesday, 17 April 2024
  • New
  • Error received? Class "XMLReader" not fo
    Just installed the Pro version of Hotspots, but am getting an error when I try t...
    0 Replies
    Posted on Wednesday, 17 April 2024
  • Resolved
  • New
  • Links aus Veranstaltungsübersicht funktionieren ni
    Nach der Migration von Joomla 3.10 auf Joomla 5.0.3 treten folgende Probleme auf...
    2 Replies
    Posted on Monday, 08 April 2024
    Custom Hotspot Marker fails to load
    I just updated from Joomla 3 to Joomla 4.3.4 and Hotspots 6.0.12. I decided to e...
    0 Replies
    Posted on Tuesday, 09 April 2024
    Language parameter in the link to the comment
    Hello. 1) I have a multilingual website (3 languages). If someone added a comme...
    0 Replies
    Posted on Saturday, 06 April 2024