jquery.mapper.min.js

/*
 _    _        _    _            _      _    _       ______ _
| |  | |      | |  | |          | |    | |  | |      | ___ \ |
| |  | | ___  | |  | | ___  _ __| | __ | |  | | ___  | |_/ / | __ _ _   _
| |/\| |/ _ \ | |/\| |/ _ \| '__| |/ / | |/\| |/ _ \ |  __/| |/ _` | | | |
\  /\  /  __/ \  /\  / (_) | |  |   <  \  /\  /  __/ | |   | | (_| | |_| |
 \/  \/ \___|  \/  \/ \___/|_|  |_|\_\  \/  \/ \___| \_|   |_|\__,_|\__, |
                                                                     __/ |
                                                                    |___/
*/
!function(a,b,c,d){"use strict";function h(b,c){this.element=b,this.$el=a(this.element),this.$map=null,this.areas=[],this.$overlay=a('<canvas class="wwwp-mapper" style="position: absolute; z-index: 1; max-width: 100%; width: 100%;" />'),this.$hoverlay=a('<canvas class="wwwp-mapper wwwp-mapper-highlight" style="position: absolute; z-index: 1; max-width: 100%; width: 100%;" />'),this.settings=a.extend({},g,c),this._defaults=g,this._name=f,this.init()}var e=function(){function b(a){this.id=null,this.$el=a,this.$overlay=null,this.$hoverlay=null,this.coords=[],this.options={normal:{color:"rgba(255, 0, 0, .2)",strokeColor:"rgba(148, 0, 0, .3)"},mouseover:{color:"rgba(255, 0, 0, 0.5)",strokeColor:"rgba(148, 0, 0, 0)"},click:{}},this.type=this.$el.attr("shape"),this.dissectCoords(),this.bind()}return b.prototype.bind=function(){var b=this;this.$el.on("mouseover",function(){a(b).trigger("mouseover"),b.showOverlay()}),this.$el.on("mouseout",function(){a(b).trigger("mouseout"),b.clearOverlay()}),this.$el.on("click",function(){a(b).trigger("click")})},b.prototype.dissectCoords=function(){var b,a=this.$el.attr("coords").replace(" ","").split(",");for(b=0;b<a.length;b+=2)this.coords.push({x:parseInt(a[b],10),y:parseInt(a[b+1],10)})},b.prototype.addToOverlay=function(a,b,c){this.$overlay=a,this.$hoverlay=b,this.$hoverlay.hide(),c===d&&(c=!0),c&&this.draw()},b.prototype.showOverlay=function(){var a=this.$hoverlay.get(0).getContext("2d"),b=this.options.mouseover.color;a.fillStyle=b,this.drawToContext(a),this.$hoverlay.show()},b.prototype.clearOverlay=function(){var a=this.$hoverlay.get(0).getContext("2d");a.clearRect(0,0,this.$hoverlay.width(),this.$hoverlay.height())},b.prototype.draw=function(a){var b=this.$overlay.get(0).getContext("2d");a||(a=this.options.normal.color),b.fillStyle=a,b.strokeStyle=this.options.normal.strokeColor,b.lineWidth=1,this.drawToContext(b)},b.prototype.drawToContext=function(a){switch(a.beginPath(),this.type){case"poly":var c,b=1;for(a.moveTo(this.coords[0].x,this.coords[0].y),b;b<this.coords.length;b+=1)c=this.coords[b],a.lineTo(c.x,c.y);break;case"rect":a.rect(this.coords[0].x,this.coords[0].y,this.coords[1].x,this.coords[1].y)}a.closePath(),a.fill(),a.stroke()},b}(),f="mapper",g={map:null,height:0,width:0,autoDraw:!0,onInit:function(){},onAreaInit:function(){},onAreaMouseOver:function(){},onAreaMouseOut:function(){},onAreaClick:function(){}};h.prototype={init:function(){this.settings.map||(this.settings.map='map[name="'+a(this.element).attr("usemap").substr(1)+'"]'),0===this.settings.height&&(this.settings.height=this.$el.height()),0===this.settings.width&&(this.settings.width=this.$el.width()),this.$el.css("position","absolute"),this.$map=a(this.settings.map),this.$overlay.attr("width",this.settings.width),this.$overlay.attr("height",this.settings.height),this.$hoverlay.attr("width",this.settings.width),this.$hoverlay.attr("height",this.settings.height),this.$el.before(this.$overlay),this.$overlay.before(this.$hoverlay),this.$el.after(this.$el.clone().removeAttr("id").addClass("wwwp-hover-image")).css("opacity",0).css("z-index",99).css("position","absolute"),this.loadAreas(),this.settings.onInit()},loadAreas:function(){var b=this;this.$map.find("area").each(function(){var c=new e(a(this));c.id=b.areas.length+1,c.addToOverlay(b.$overlay,b.$hoverlay,b.settings.autoDraw),a(c).on("mouseover",function(){b.settings.onAreaMouseOver(this)}),a(c).on("mouseout",function(){b.settings.onAreaMouseOut(this)}),a(c).on("click",function(a){a.preventDefault(),b.settings.onAreaClick(this)}),b.settings.onAreaInit(c),b.areas.push(c)})}},a.fn[f]=function(b){return this.each(function(){a.data(this,"wwwp-"+f)||a.data(this,"wwwp-"+f,new h(this,b))})}}(jQuery,window,document);