Кто-нибудь знаком с Raphael.js?
Этот сайт использует PHP и Wordpress и создал эти "интерактивные" карты с помощью Raphael.js.Эти две карты находятся на двух разных страницах WP Post.
Пытается понять, где в коде выбранные состояния установлены напо умолчанию синий или золотой цвет.Обе карты созданы в одном файле?
(function($, document, window, Raphael, undefined) {
// jQuery Plugin Factory
function jQueryPluginFactory( $, name, methods, getters ){
getters = getters instanceof Array ? getters : [];
var getters_obj = {};
for(var i=0; i<getters.length; i++){
getters_obj[getters[i]] = true;
}
// Create the object
var Plugin = function(element){
this.element = element;
};
Plugin.prototype = methods;
// Assign the plugin
$.fn[name] = function(){
var args = arguments;
var returnValue = this;
this.each(function() {
var $this = $(this);
var plugin = $this.data('plugin-'+name);
// Init the plugin if first time
if( !plugin ){
plugin = new Plugin($this);
$this.data('plugin-'+name, plugin);
if(plugin._init){
plugin._init.apply(plugin, args);
}
// call a method
} else if(typeof args[0] == 'string' && args[0].charAt(0) != '_' && typeof plugin[args[0]] == 'function'){
var methodArgs = Array.prototype.slice.call(args, 1);
var r = plugin[args[0]].apply(plugin, methodArgs);
// set the return value if method is a getter
if( args[0] in getters_obj ){
returnValue = r;
}
}
});
return returnValue; // returning the jQuery object
};
};
// Some constants
var WIDTH = 930,
HEIGHT = 630,
LABELS_WIDTH = 70;
// Default options
var defaults = {
// The styles for the state
'stateStyles': {
fill: "#E7E8E8",
stroke: "#ADCEE9",
"stroke-width": 1,
"stroke-linejoin": "round",
scale: [1, 1]
},
// The styles for the hover
'stateHoverStyles': {
fill: "#17427A",
stroke: "#F89B25",
scale: [1.1, 1.1]
},
// The time for the animation, set to false to remove the animation
'stateHoverAnimation': 500,
// State specific styles. 'ST': {}
'stateSpecificStyles': {},
// State specific hover styles
'stateSpecificHoverStyles': {},
// Events
'click': null,
'mouseover': null,
'mouseout': null,
'clickState': {},
'mouseoverState': {},
'mouseoutState': {},
// Labels
'showLabels' : true,
'labelWidth': 20,
'labelHeight': 15,
'labelGap' : 6,
'labelRadius' : 3,
'labelBackingStyles': {
fill: "#F89B25",
stroke: "#666",
"stroke-width": 1,
"stroke-linejoin": "round",
scale: [1, 1]
},
// The styles for the hover
'labelBackingHoverStyles': {
fill: "#17427A",
stroke: "#F89B25"
},
'stateSpecificLabelBackingStyles': {},
'stateSpecificLabelBackingHoverStyles': {},
'labelTextStyles': {
fill: "#fff",
'stroke': 'none',
'font-weight': 300,
'stroke-width': 0,
'font-size': '10px'
},
// The styles for the hover
'labelTextHoverStyles': {},
'stateSpecificLabelTextStyles': {},
'stateSpecificLabelTextHoverStyles': {}
};
// Methods
var methods = {
/**
* The init function
*/
_init: function(options) {
// Save the options
this.options = {};
$.extend(this.options, defaults, options);
// Save the width and height;
var width = this.element.width();
var height = this.element.height();
// Calculate the width and height to match the container while keeping the labels at a fixed size
var xscale = this.element.width()/WIDTH;
var yscale = this.element.height()/HEIGHT;
this.scale = Math.min(xscale, yscale);
this.labelAreaWidth = Math.ceil(LABELS_WIDTH/this.scale); // The actual width with the labels reversed scaled
var paperWidthWithLabels = WIDTH + Math.max(0, this.labelAreaWidth - LABELS_WIDTH);
// Create the Raphael instances
this.paper = Raphael(this.element.get(0), paperWidthWithLabels, HEIGHT);//this.element.width(), this.element.height());
// Scale to fit
this.paper.setSize(width, height);
this.paper.setViewBox(0, 0, paperWidthWithLabels, HEIGHT, false);
// Keep track of all the states
this.stateHitAreas = {}; // transparent for the hit area
this.stateShapes = {}; // for the visual shape
this.topShape = null;
// create all the states
this._initCreateStates();
// create the labels for the smaller states
this.labelShapes = {};
this.labelTexts = {};
this.labelHitAreas = {};
if(this.options.showLabels) {
this._initCreateLabels();
}
// Add the
},
/**
* Create the state objects
*/
_initCreateStates: function() {
// TODO: Dynamic attrs
var attr = this.options.stateStyles;
var R = this.paper; // shorter name for usage here
// The coords for each state
var paths = {
HI: "M 233.08751,519.30948 L 235.02744,515.75293 L 237.2907,515.42961 L 237.61402,516.23791 L 235.51242,519.30948 z M 243.27217,515.59127 L 249.4153,518.17784 L 251.51689,517.85452 L 253.1335,513.97465 L 252.48686,510.57977 L 248.28366,510.09479 L 244.24213,511.87306 z M 273.9878,525.61427 L 277.706,531.11074 L 280.13092,530.78742 L 281.26255,530.30244 L 282.7175,531.59573 L 286.43571,531.43407 L 287.40568,529.97912 L 284.49577,528.20085 L 282.55584,524.48263 L 280.45424,520.92609 L 274.63444,523.83599 z M 294.19545,534.50564 L 295.48874,532.5657 L 300.17691,533.53566 L 300.82356,533.05068 L 306.96668,533.69732 L 306.64336,534.99062 L 304.05678,536.44556 L 299.69193,536.12224 z M 299.53027,539.67879 L 301.47021,543.55866 L 304.54176,542.42703 L 304.86509,540.81041 L 303.24848,538.70882 L 299.53027,538.3855 z M 306.4817,538.54716 L 308.74496,535.63726 L 313.43313,538.06218 L 317.79798,539.19381 L 322.16284,541.94205 L 322.16284,543.88198 L 318.6063,545.66026 L 313.75645,546.63022 L 311.33154,545.17527 z M 323.13281,554.06663 L 324.74942,552.77335 L 328.14431,554.38997 L 335.74238,557.94651 L 339.13727,560.0481 L 340.75387,562.47302 L 342.69381,566.83787 L 346.73534,569.42445 L 346.41202,570.71775 L 342.53215,573.95097 L 338.32896,575.40592 L 336.87401,574.75928 L 333.80244,576.53754 L 331.37753,579.77077 L 329.11427,582.68067 L 327.33599,582.51901 L 323.77945,579.93243 L 323.45613,575.40592 L 324.10277,572.981 L 322.48616,567.32286 L 320.38456,565.54458 L 320.2229,562.958 L 322.48616,561.98804 L 324.58776,558.91648 L 325.07274,557.94651 L 323.45613,556.16823 z",
...
DC: "M 801.75695,253.84384 L 800.67992,252.20717 L 799.66604,251.36463 L 800.7653,249.74841 L 802.99814,251.25941 z"
}
// Create the actual objects
var stateAttr = {};
for(var state in paths) {
stateAttr = {};
if(this.options.stateSpecificStyles[state]) {
$.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
} else {
stateAttr = attr;
}
this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
this.topShape = this.stateShapes[state];
this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000",
"stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
this.stateHitAreas[state].node.dataState = state;
}
// Bind events
this._onClickProxy = $.proxy(this, '_onClick');
this._onMouseOverProxy = $.proxy(this, '_onMouseOver'),
this._onMouseOutProxy = $.proxy(this, '_onMouseOut');
for(var state in this.stateHitAreas) {
this.stateHitAreas[state].toFront();
$(this.stateHitAreas[state].node).bind('mouseout', this._onMouseOutProxy);
$(this.stateHitAreas[state].node).bind('click', this._onClickProxy);
$(this.stateHitAreas[state].node).bind('mouseover', this._onMouseOverProxy);
}
},
/**
* Create the labels
*/
_initCreateLabels: function() {
var R = this.paper; // shorter name for usage here
var neStates = ['CA', 'AL', 'AR','AZ', 'CO', 'FL', 'GA', 'IL', 'IN', 'LA', 'MI', 'MS', 'MO', 'NC' , 'NV', 'NY', 'OR', 'PA', 'TN', 'TX', 'WI'];
// calculate the values for placing items
var neBoxX = 860;
var neBoxY = 220;
var oWidth = this.options.labelWidth;
var oHeight = this.options.labelHeight;
var oGap = this.options.labelGap;
var oRadius = this.options.labelRadius;
var shapeWidth = oWidth/this.scale;
var shapeHeight = oHeight/this.scale;
var colWidth = (oWidth+oGap)/this.scale;
var downBy = (oHeight+oGap)/this.scale*0.5;
var shapeRadius = oRadius/this.scale;
// Styling information
var backingAttr = this.options.labelBackingStyles;
var textAttr = this.options.labelTextStyles;
var stateAttr = {};
// NE States
for(var i=0, x, y, state; i<neStates.length; ++i) {
state = neStates[i];
// position
x = ((i+1)%2) * colWidth + neBoxX;
y = i*downBy + neBoxY;
// attributes for styling the backing
stateAttr = {};
if(this.options.stateSpecificLabelBackingStyles[state]) {
$.extend(stateAttr, backingAttr, this.options.stateSpecificLabelBackingStyles[state]);
} else {
stateAttr = backingAttr;
}
// add the backing
this.labelShapes[state] = R.rect(x, y, shapeWidth, shapeHeight, shapeRadius).attr(stateAttr);
// attributes for styling the text
stateAttr = {};
if(this.options.stateSpecificLabelTextStyles[state]) {
$.extend(stateAttr, textAttr, this.options.stateSpecificLabelTextStyles[state]);
} else {
$.extend(stateAttr, textAttr);
}
// adjust font-size
if(stateAttr['font-size']) {
stateAttr['font-size'] = (parseInt(stateAttr['font-size'])/this.scale) + 'px';
}
// add the text
this.labelTexts[state] = R.text(x+(shapeWidth/2), y+(shapeHeight/2), state).attr(stateAttr);
// Create the hit areas
this.labelHitAreas[state] = R.rect(x, y, shapeWidth, shapeHeight, shapeRadius).attr({
fill: "#F89B25",
"stroke-width": 0,
"opacity" : 0.0,
'cursor': 'pointer'
});
this.labelHitAreas[state].node.dataState = state;
}
// Bind events
for(var state in this.labelHitAreas) {
this.labelHitAreas[state].toFront();
$(this.labelHitAreas[state].node).bind('mouseout', this._onMouseOutProxy);
$(this.labelHitAreas[state].node).bind('click', this._onClickProxy);
$(this.labelHitAreas[state].node).bind('mouseover', this._onMouseOverProxy);
}
},
/**
* Get the state Raphael object
*/
_getStateFromEvent: function(event) {
// first get the state name
var stateName = (event.target && event.target.dataState) || (event.dataState);
return this._getState(stateName);
},
/**
*
*/
_getState: function(stateName) {
var stateShape = this.stateShapes[stateName];
var stateHitArea = this.stateHitAreas[stateName];
var labelBacking = this.labelShapes[stateName];
var labelText = this.labelTexts[stateName];
var labelHitArea = this.labelHitAreas[stateName]
return {
shape: stateShape,
hitArea: stateHitArea,
name: stateName,
labelBacking: labelBacking,
labelText: labelText,
labelHitArea: labelHitArea
};
},