Pastakhov has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/333587 )
Change subject: Add icon:hover parameter
......................................................................
Add icon:hover parameter
Change-Id: Ia80e1336676917e5b66cc04d05b470ec011294a3
---
M includes/BaseMapService.php
M includes/mapelements/Marker.php
M resources/multimaps.js
M services/Google/ext.google.js
M services/Leaflet/ext.leaflet.js
M services/Yandex/ext.yandex.js
6 files changed, 173 insertions(+), 27 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultiMaps
refs/changes/87/333587/1
diff --git a/includes/BaseMapService.php b/includes/BaseMapService.php
index 366154b..90ff3f4 100644
--- a/includes/BaseMapService.php
+++ b/includes/BaseMapService.php
@@ -115,6 +115,8 @@
'circles',
);
+ static protected $mapid = 0;
+
/**
* Array of map properties available for definition
* @var array
@@ -130,6 +132,7 @@
'title',
'text',
'icon',
+ 'icon:hover',
'color',
'weight',
'opacity',
@@ -161,12 +164,10 @@
* @return string
*/
public function render() {
- static $mapid = 0;
-
$output = \Html::rawElement(
'div',
array(
- 'id' => 'multimaps_map' . $mapid++,
+ 'id' => 'multimaps_map' .
self::$mapid++,
'style' =>
'width:'.htmlspecialchars($this->width).';
height:'.htmlspecialchars($this->height).'; background-color: #cccccc;
overflow: hidden;',
'class' => 'multimaps-map' .
($this->classname != '' ? " multimaps-map-$this->classname" : ''),
),
@@ -261,7 +262,7 @@
$matches = array();
foreach ($param as $value) {
- if( preg_match('/^\s*(\w+)\s*=\s*(.+)\s*$/s', $value,
$matches) ) {
+ if( preg_match('/^\s*(\w+:?\w*)\s*=\s*(.+)\s*$/s',
$value, $matches) ) {
$name = strtolower($matches[1]);
if( array_search($name,
$this->availableMapElements) !== false ) {
$this->addMapElement($name,
$matches[2]);
@@ -472,7 +473,6 @@
$this->errormessages[] = \wfMessage(
'multimaps-unable-parse-parameter', $name, $value )->escaped();
}
return true;
- break;
case 'icon':
$marker = new Marker();
if ( $marker->setProperty('icon', $value) ) {
@@ -498,15 +498,37 @@
$this->errormessages = array_merge(
$this->errormessages, $marker->getErrorMessages() );
}
return true;
- break;
+ case 'icon:hover':
+ $marker = new Marker();
+ if ( $marker->setProperty('icon:hover', $value)
) {
+ if ( $marker->hovericon !== null ) {
+ $this->properties['hoverIcon']
= $marker->hovericon;
+ }
+ if ( $marker->hoversize !== null ) {
+
$this->properties['hoverIconSize'] = $marker->hoversize;
+ }
+ if ( $marker->hoveranchor !== null ) {
+
$this->properties['hoverIconAnchor'] = $marker->hoveranchor;
+ }
+ if ( $marker->hovershadow !== null ) {
+
$this->properties['hoverIconShadow'] = $marker->hovershadow;
+ }
+ if ( $marker->hovershSize !== null ) {
+
$this->properties['hoverIconShSize'] = $marker->hovershSize;
+ }
+ if ( $marker->hovershAnchor !== null ) {
+
$this->properties['hoverIconShAnchor'] = $marker->hovershAnchor;
+ }
+ } else {
+ $this->errormessages = array_merge(
$this->errormessages, $marker->getErrorMessages() );
+ }
+ return true;
case 'height':
$this->height = $value;
return true;
- break;
case 'width':
$this->width = $value;
return true;
- break;
case 'bounds':
//TODO
break;
@@ -518,7 +540,6 @@
$this->properties[$name] = $value;
}
return true;
- break;
}
return false;
}
diff --git a/includes/mapelements/Marker.php b/includes/mapelements/Marker.php
index 5471342..41120ef 100644
--- a/includes/mapelements/Marker.php
+++ b/includes/mapelements/Marker.php
@@ -22,7 +22,7 @@
$this->availableProperties = array_merge(
$this->availableProperties,
- array( 'icon' )
+ array( 'icon', 'icon:hover' )
);
}
@@ -38,8 +38,15 @@
global $egMultiMaps_CoordinatesSeparator,
$egMultiMaps_OptionsSeparator,
$egMultiMaps_IconPath,
$egMultiMaps_IconAllowFromDirectory;
- if ( strtolower($name) != 'icon' ) {
+ $lowerName = strtolower($name);
+ if ( $lowerName !== 'icon' && $lowerName !== 'icon:hover' ) {
return parent::setProperty( $name, $value );
+ }
+
+ if ( $lowerName === 'icon:hover' ) {
+ $prefix = 'hover';
+ } else {
+ $prefix = '';
}
// Explode icon, it containt 'icon', 'size', 'anchor',
'shadow', 'shSize', 'shAnchor'
@@ -67,7 +74,7 @@
return false;
}
}
- $this->properties['icon'] = htmlspecialchars( $v,
ENT_NOQUOTES );
+ $this->properties[$prefix . 'icon'] = htmlspecialchars(
$v, ENT_NOQUOTES );
}
// Icon size
@@ -80,7 +87,7 @@
$this->errormessages[] = \wfMessage(
'multimaps-marker-incorrect-icon-size', $v, $value )->escaped();
return false;
}
- $this->properties['size'] = $v;
+ $this->properties[$prefix . 'size'] = $v;
}
// Icon anchor
@@ -93,7 +100,7 @@
$this->errormessages[] = \wfMessage(
'multimaps-marker-incorrect-icon-anchor', $v, $value )->escaped();
return false;
}
- $this->properties['anchor'] = $v;
+ $this->properties[$prefix . 'anchor'] = $v;
}
// Shadow URL
@@ -115,7 +122,7 @@
return false;
}
}
- $this->properties['shadow'] = htmlspecialchars( $v,
ENT_NOQUOTES );
+ $this->properties[$prefix . 'shadow'] =
htmlspecialchars( $v, ENT_NOQUOTES );
}
// Shadow size
@@ -128,7 +135,7 @@
$this->errormessages[] = \wfMessage(
'multimaps-marker-incorrect-shadow-size', $v, $value )->escaped();
return false;
}
- $this->properties['shSize'] = $v;
+ $this->properties[$prefix . 'shSize'] = $v;
}
// Shadow anchor
@@ -141,7 +148,7 @@
$this->errormessages[] = \wfMessage(
'multimaps-marker-incorrect-shadow-anchor', $v, $value )->escaped();
return false;
}
- $this->properties['shAnchor'] = $v;
+ $this->properties[$prefix . 'shAnchor'] = $v;
}
return true;
diff --git a/resources/multimaps.js b/resources/multimaps.js
index aa12c02..7df07f8 100644
--- a/resources/multimaps.js
+++ b/resources/multimaps.js
@@ -35,6 +35,24 @@
if (globalOptions.iconShAnchor &&
!elementoptions.shAnchor) {
elementoptions.shAnchor =
globalOptions.iconShAnchor;
}
+ if (globalOptions.hoverIcon &&
!elementoptions.hovericon) {
+ elementoptions.hovericon =
globalOptions.hoverIcon;
+ }
+ if (globalOptions.hoverIconSize &&
!elementoptions.hoversize) {
+ elementoptions.hoversize =
globalOptions.hoverIconSize;
+ }
+ if (globalOptions.hoverIconAnchor &&
!elementoptions.hoveranchor) {
+ elementoptions.hoveranchor =
globalOptions.hoverIconAnchor;
+ }
+ if (globalOptions.hoverIconShadow &&
!elementoptions.hovershadow) {
+ elementoptions.hovershadow =
globalOptions.hoverIconShadow;
+ }
+ if (globalOptions.hoverIconShSize &&
!elementoptions.hovershSize) {
+ elementoptions.hovershSize =
globalOptions.hoverIconShSize;
+ }
+ if (globalOptions.hoverIconShAnchor &&
!elementoptions.hovershAnchor) {
+ elementoptions.hovershAnchor =
globalOptions.hoverIconShAnchor;
+ }
break;
case 'polygon':
case 'circle':
diff --git a/services/Google/ext.google.js b/services/Google/ext.google.js
index 1db4300..06357ba 100644
--- a/services/Google/ext.google.js
+++ b/services/Google/ext.google.js
@@ -13,10 +13,10 @@
* @return {Object} options of map element
*/
convertPropertiesToOptions: function (properties) {
- var options = {}, text = false;
+ var options = {}, text = false, iconOptions, hoverIconOptions;
if (properties.icon !== undefined) {
- var iconOptions = { url: properties.icon };
+ iconOptions = { url: properties.icon };
if (properties.size !== undefined) {
iconOptions.scaledSize = new
google.maps.Size(properties.size[0], properties.size[1]);
}
@@ -35,6 +35,17 @@
options.shadow = shadowOptions;
}
}
+
+ if (properties.hovericon !== undefined) {
+ hoverIconOptions = { url: properties.hovericon };
+ if (properties.hoversize !== undefined) {
+ hoverIconOptions.scaledSize = new
google.maps.Size(properties.hoversize[0], properties.hoversize[1]);
+ }
+ if (properties.hoveranchor !== undefined) {
+ hoverIconOptions.anchor = new
google.maps.Point(properties.hoveranchor[0], properties.hoveranchor[1]);
+ }
+ }
+
if (properties.color !== undefined) {
options.strokeColor = properties.color;
}
@@ -64,7 +75,7 @@
text = properties.text;
}
- return { options: options, text: text };
+ return { options: options, text: text, hoverIconOptions:
hoverIconOptions };
},
/**
@@ -74,7 +85,7 @@
* @param {Object} properties Contains the fields lat, lon, title, text
and icon
*/
addMarker: function (map, properties) {
- var marker, infowindow, value =
this.convertPropertiesToOptions(properties);
+ var marker, entered, infowindow, value =
this.convertPropertiesToOptions(properties);
value.options.position = new
google.maps.LatLng(properties.pos[0].lat, properties.pos[0].lon);
value.options.map = map;
@@ -87,6 +98,19 @@
infowindow.open(marker.get('map'), marker);
});
}
+
+ if ( value.hoverIconOptions ) {
+ google.maps.event.addListener( marker, 'mouseover',
function () {
+ if ( !entered ) {
+ marker.setIcon( value.hoverIconOptions
);
+ entered = true;
+ }
+ } );
+ google.maps.event.addListener( marker, 'mouseout',
function () {
+ marker.setIcon( value.options.icon );
+ entered = false;
+ } );
+ }
},
addLine: function (map, properties) {
diff --git a/services/Leaflet/ext.leaflet.js b/services/Leaflet/ext.leaflet.js
index 37e6c91..f378ea4 100644
--- a/services/Leaflet/ext.leaflet.js
+++ b/services/Leaflet/ext.leaflet.js
@@ -13,10 +13,10 @@
* @return {Object} options of map element
*/
convertPropertiesToOptions: function (properties) {
- var options = {}, text = false;
+ var options = {}, hoverIcon, text = false, iconOptions,
hoverIconOptions;
if (properties.icon !== undefined) {
- var iconOptions = { iconUrl: properties.icon };
+ iconOptions = { iconUrl: properties.icon };
if (properties.size !== undefined) {
iconOptions.iconSize = properties.size;
}
@@ -34,6 +34,27 @@
}
options.icon = new L.Icon( iconOptions );
}
+
+ if (properties.hovericon !== undefined) {
+ hoverIconOptions = { iconUrl: properties.hovericon };
+ if (properties.hoversize !== undefined) {
+ hoverIconOptions.iconSize =
properties.hoversize;
+ }
+ if (properties.hoveranchor !== undefined) {
+ hoverIconOptions.iconAnchor =
properties.hoveranchor;
+ }
+ if (properties.hovershadow !== undefined) {
+ hoverIconOptions.shadowUrl =
properties.hovershadow;
+ }
+ if (properties.hovershSize !== undefined) {
+ hoverIconOptions.shadowSize =
properties.hovershSize;
+ }
+ if (properties.hovershAnchor !== undefined) {
+ hoverIconOptions.shadowAnchor =
properties.hovershAnchor;
+ }
+ hoverIcon = new L.Icon( hoverIconOptions );
+ }
+
if (properties.color !== undefined) {
options.color = properties.color;
}
@@ -63,7 +84,7 @@
text = properties.text;
}
- return { options: options, text: text };
+ return { options: options, text: text, hoverIcon: hoverIcon };
},
/**
@@ -73,12 +94,25 @@
* @param {Object} properties Contains the fields lat, lon, title, text
and icon
*/
addMarker: function (map, properties) {
- var marker, value = this.convertPropertiesToOptions(properties);
+ var marker, value =
this.convertPropertiesToOptions(properties), entered;
marker = L.marker([properties.pos[0].lat,
properties.pos[0].lon], value.options).addTo(map);
if (value.text) {
marker.bindPopup(value.text);
}
+
+ if ( value.hoverIcon ) {
+ marker.on( 'mouseover', function ( e ) {
+ if ( !entered ) {
+ e.target.setIcon( value.hoverIcon );
+ entered = true;
+ }
+ } );
+ marker.on( 'mouseout', function ( e ) {
+ e.target.setIcon( value.options.icon ||
L.Marker.prototype.options.icon );
+ entered = false;
+ } );
+ }
},
addLine: function (map, properties) {
diff --git a/services/Yandex/ext.yandex.js b/services/Yandex/ext.yandex.js
index 0fa8f93..b81dc09 100644
--- a/services/Yandex/ext.yandex.js
+++ b/services/Yandex/ext.yandex.js
@@ -13,7 +13,7 @@
* @return {Object} options of map element
*/
convertPropertiesToOptions: function (properties) {
- var prop = {}, options = {};
+ var prop = {}, options = {}, iconOptions, hoverIconOptions;
if (properties.icon !== undefined) {
options.iconImageHref = properties.icon;
@@ -26,6 +26,8 @@
if (properties.shadow !== undefined) {
options.iconShadow = true;
options.iconShadowImageHref = properties.shadow;
+ } else {
+ options.iconShadow = false;
}
if (properties.shSize !== undefined) {
options.iconShadowImageSize = properties.shSize;
@@ -33,7 +35,32 @@
if (properties.shAnchor !== undefined) {
options.iconShadowImageOffset = [
-properties.shAnchor[0], -properties.shAnchor[1] ];
}
+ iconOptions = $.extend( {}, options );
}
+
+
+ if (properties.hovericon !== undefined) {
+ hoverIconOptions = $.extend( {}, iconOptions, {
iconImageHref: properties.hovericon } );
+ if (properties.hoversize !== undefined) {
+ hoverIconOptions.iconImageSize =
properties.hoversize;
+ }
+ if (properties.hoveranchor !== undefined) {
+ hoverIconOptions.iconImageOffset =
properties.hoveranchor;
+ }
+ if (properties.hovershadow !== undefined) {
+ hoverIconOptions.iconShadow = true;
+ hoverIconOptions.iconShadowImageHref =
properties.hovershadow;
+ } else {
+ hoverIconOptions.iconShadow = false;
+ }
+ if (properties.hovershSize !== undefined) {
+ hoverIconOptions.iconShadowImageSize =
properties.hovershSize;
+ }
+ if (properties.hovershAnchor !== undefined) {
+ hoverIconOptions.iconShadowImageOffset =
properties.hovershAnchor;
+ }
+ }
+
if (properties.color !== undefined) {
options.strokeColor = properties.color;
}
@@ -63,7 +90,7 @@
prop.balloonContent = properties.text;
}
- return { properties: prop, options: options };
+ return { properties: prop, options: options, iconOptions:
iconOptions, hoverIconOptions: hoverIconOptions };
},
/**
@@ -77,6 +104,21 @@
marker = new ymaps.Placemark([properties.pos[0].lat,
properties.pos[0].lon], value.properties, value.options);
map.geoObjects.add(marker);
+
+ if ( value.hoverIconOptions ) {
+ marker.events
+ .add( 'mouseenter', function ( e ) {
+ e.get( 'target' ).options.set(
value.hoverIconOptions );
+ } )
+ .add( 'mouseleave', function ( e ) {
+ var options = e.get( 'target'
).options;
+ if ( value.iconOptions ) {
+ options.set(
value.iconOptions );
+ } else {
+ options.unsetAll();
+ }
+ } );
+ }
},
addLine: function (map, properties) {
--
To view, visit https://gerrit.wikimedia.org/r/333587
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia80e1336676917e5b66cc04d05b470ec011294a3
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MultiMaps
Gerrit-Branch: master
Gerrit-Owner: Pastakhov <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
