@avvio-reply/spotter

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"