Spotter
Produces image and click map with event callbacks for user implementation.
OPTIONS
__Object__:
**target**: {string} element selector of container to receive Spotter content
**class**: {string} picture class name - css class applied to top div element of Spotter markup
**image**: {string} image resource path relative/absolute
**alternative**: {string} image alternative text value
**icon**: {string} html to place over found map area
**zones**: {Array[Object]} objects describing each zone (see below)
**counter**: {boolean} when True, Spotter will render and manage found counter
**onFound**: {Function} Callback - Spotter fires this event on map area click
**onComplete**: {Function} Callback - Spotter fires this event on all map areas clicked
**Zones** [Array of Objects]:
[{
**class**: {string} *css-class-name-string*,
**area**: {string} *unique-area-identifier-string*,
**title**: {string} *title-string",
**coords**:{Array} map area poly coordinates, e.g [363,391,362,477,417,480,417,395],
**description**: {string} *description-string*
},
**Callbacks**:
Both **onFound** and **onComplete** have the same signature:
function({Object} zone, {Number} found)
**zone**: zone instance associated with the clicked area
**found**: number of map areas clicked/found
METHODS
**init**(*<no-args>*)
Initialises/resets the Spotter instance. It is on this method that Spotter html is written to the document, and click event listener is formed.
**isComplete**(*<no-args>*)
Call at any time to determine whether all areas have been clicked.
Useful for a completion process async to the Spotter->onComplete event because the user is saved from implementing their own flag.
EXAMPLE USAGE:
var Spotter = require('@avvio-reply/spotter');
var smartHome = new Spotter({
"target":'.picture__container'
, "class":'smart-home-picture'
, "image": 'content/images/pages/home/map.png'
, "alternative":'The Big Picture'
, "icon":$('#matched-icon').html()
, "zones": *resultFromInlineOrModuleOrAjax*
, "counter": true
/**
* Called when a map area has been clicked
*/
, "onFound": function(zone, found){
console.log('found id: ' + zone.area + ', total # found: ' + found);
$('.picture__overlay-title').html(zone.title);
$('.picture__overlay-body-title').html(zone.title);
$('.picture__overlay-body').html(zone.description);
$('.picture__overlay-note').html(zone.note);
$('.initiative-name').html(zone.lead);
$('.initiative-role').html(zone.leadrole);
$('.picture__overlay-image').attr("src","content/images/pages/home/popups/" + zone.class + ".png");
togglePopup();
gtag('event', 'found', {
'event_category': 'Difference',
'event_label': zone.area
});
}
/**
* Called when all map areas have been clicked (spotter is complete)
*/
, "onComplete": function(zone, found){
$('[data-complete-code]').text(generateCode(10));
gtag('event', 'completed', {
'event_category': 'Complete'
});
}
});
smartHome.init();
.....
// Elsewhere an event handler listens for close click of the 'Found' overlay.
// Spotter->isComplete() is implemeted to detect whether another reaction is required.
$('.picture__overlay-close').on("click", function (e) {
togglePopup();
if (smartHome.isComplete()){
completePopup();
}
})
###EXAMPLE HTML OUTPUT
<div class="smart-home-picture" data-spotter-picture-08bac08f-9638-4703-8c73-93ddedb17be5>
<img usemap="#08bac08f-9638-4703-8c73-93ddedb17be5" src="content/images/pages/home/map.png" alt="The Big Picture" />
</div>
<div class="counter">
<p class="counter__text"><span data-diffs-current>0</span>/<span data-diffs-max>10</span></p>
</div>
<map name="08bac08f-9638-4703-8c73-93ddedb17be5">
<area data-area="1" shape="poly" coords="363,391,362,477,417,480,417,395" />
<area data-area="2" shape="poly" coords="139,714,167,714,168,734,139,735" />
<area data-area="3" shape="poly" coords="564,626,603,627,601,726,565,727" />
<area data-area="4" shape="poly" coords="860,610,897,613,898,646,861,646" />
<area data-area="5" shape="poly" coords="1279,420,1336,421,1338,456,1282,453" />
<area data-area="6" shape="poly" coords="856,474,906,473,907,498,856,498" />
<area data-area="7" shape="poly" coords="731,454,788,456,791,542,732,540" />
<area data-area="8" shape="poly" coords="740,258,762,258,763,281,743,282" />
<area data-area="9" shape="poly" coords="780,658,799,660,800,680,780,680" />
</map>
###LOCAL DEV DEPENDENCY:
"@avvio-reply/spotter": "file:///development/node/modules/spotter"