Inchikutty has uploaded a new change for review.
https://gerrit.wikimedia.org/r/184869
Change subject: [WIP] Embedding Static Map to UploadWizard
......................................................................
[WIP] Embedding Static Map to UploadWizard
Add a new class file mw.GeoMap.js to UploadWizard. Its object can embed
a static map based on OSM data using input coordinates .
This patch will be followed up by code to change coordinates via the map
and other project goals.
Bug: T58612
Change-Id: I87245f7119085f10e6b62f1e1a2c9d2db0af82c7
---
M UploadWizardHooks.php
M docs/jsduck-config.json
A resources/mw.GeoMap.js
M resources/mw.UploadWizardDetails.js
M resources/uploadWizard.css
5 files changed, 97 insertions(+), 33 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UploadWizard
refs/changes/69/184869/1
diff --git a/UploadWizardHooks.php b/UploadWizardHooks.php
index 60b3ef9..270788b 100644
--- a/UploadWizardHooks.php
+++ b/UploadWizardHooks.php
@@ -29,6 +29,7 @@
'jquery.tipsy',
'jquery.ui.widget',
'jquery.validate',
+ 'jquery.throttle-debounce',
'mediawiki.Uri',
'mediawiki.util',
'mediawiki.libs.jpegmeta',
@@ -109,6 +110,9 @@
'resources/mw.UploadWizardDescription.js',
'resources/mw.UploadWizardDetails.js',
'resources/mw.UploadWizardUploadInterface.js',
+
+ // Geographical map library
+ 'resources/mw.GeoMap.js',
),
'styles' => array(
'resources/uploadWizard.css',
diff --git a/docs/jsduck-config.json b/docs/jsduck-config.json
index b24f8a6..46d72ae 100644
--- a/docs/jsduck-config.json
+++ b/docs/jsduck-config.json
@@ -6,6 +6,7 @@
"--output": "./js",
"--": [
"./external.js",
- "../resources/uw/model"
+ "../resources/uw/model",
+ "../resources/mw.GeoMap.js"
]
}
diff --git a/resources/mw.GeoMap.js b/resources/mw.GeoMap.js
new file mode 100644
index 0000000..4fab89e
--- /dev/null
+++ b/resources/mw.GeoMap.js
@@ -0,0 +1,69 @@
+
+( function ( mw, $ ) {
+
+/**
+ * Object to embed OpenStreetMap into UploadWizard
+ * @class mw.GeoMap
+ * @param {jQuery} $form
+ */
+mw.GeoMap = function ( $form ) {
+ var geo = this;
+ geo.$form = $form;
+
+ mw.GeoMap.numInstances = ( mw.GeoMap.numInstances || 0 ) + 1;
+ var mapId = 'mwe-loc-map-' + mw.GeoMap.numInstances;
+ var mapDiv = $( '<div>' )
+ .addClass( 'mwe-loc-map' )
+ .attr( 'id', mapId );
+
+ geo.$form.find( '.mwe-location-label' ).append( mapDiv );
+
+ var $list = geo.$form.find( '.mwe-loc-lat, .mwe-loc-lon' );
+ $list.on( 'input keyup change cut paste uw-copy', $.debounce( 250,
function() {
+ if ( $list.valid() ) {
+ mw.GeoMap.prototype.staticMap( $list.eq( 0 ).val(),
$list.eq( 1 ).val(), mapDiv );
+ } else {
+ mw.GeoMap.prototype.staticMapRemove( mapDiv );
+ }
+ } ) );
+};
+
+mw.GeoMap.prototype = {
+
+ /**
+ * Generates static map url
+ * @param {Number} latitude
+ * @param {Number} longitude
+ * @return {String} Returns static map url
+ */
+ staticMapLink: function ( latVal, lonVal) {
+ var mapLink = new mw.Uri(
'http://staticmap.openstreetmap.de/staticmap.php/?' )
+ .extend( { zoom: 14, maptype: 'mapnik', center: latVal
+ ',' + lonVal, size: '280x230' } );
+ return mapLink.toString();
+ },
+
+ /**
+ * Displays static map.
+ * @param {Number} latitude
+ * @param {Number} longitude
+ * @param {HTMLDivElement} MapDiv The div to append the map into
+ */
+ staticMap: function ( latVal, lonVal, mapDiv ) {
+ this.staticMapRemove( mapDiv );
+ mapDiv.addClass( 'mwe-upwiz-status-progress' );
+ var link = this.staticMapLink( latVal, lonVal );
+ $( '<img>' ).attr( 'src', link ).addClass( 'mwe-loc-map'
).appendTo( mapDiv );
+ },
+
+ /**
+ * Removes static map.
+ * @param {HTMLDivElement} MapDiv The div that contains static map
+ */
+ staticMapRemove: function( mapDiv ){
+ mapDiv.removeClass( 'mwe-upwiz-status-progress' );
+ mapDiv.empty();
+ }
+
+};
+
+}( mediaWiki, jQuery ));
\ No newline at end of file
diff --git a/resources/mw.UploadWizardDetails.js
b/resources/mw.UploadWizardDetails.js
index 950618f..551328b 100644
--- a/resources/mw.UploadWizardDetails.js
+++ b/resources/mw.UploadWizardDetails.js
@@ -21,8 +21,7 @@
categoriesId, dateInputId, dateErrorDiv, dateInputDiv,
moreDetailsCtrlDiv, moreDetailsDiv, otherInformationId,
otherInformationDiv, latitudeDiv, longitudeDiv,
headingDiv,
- showMap, linkDiv, locationDiv, hiddenCats,
missingCatsWikiText,
- $list,
+ locationDiv, hiddenCats, missingCatsWikiText,
details = this;
this.upload = upload;
@@ -181,20 +180,12 @@
$( '<div
class="mwe-upwiz-details-input-error"><label class="mwe-validator-error" for="'
+ 'location-lon' + this.upload.index + '" generated="true"/></div>' ),
$( '<div
class="mwe-upwiz-details-input-error"><label class="mwe-validator-error" for="'
+ 'location-heading' + this.upload.index + '" generated="true"/></div>' ),
//$( '<div
class="mwe-upwiz-details-input-error"><label class="mwe-validator-error" for="'
+ altId + '" generated="true"/></div>' ),
- latitudeDiv, longitudeDiv, headingDiv,
linkDiv//, altitudeDiv
+ latitudeDiv, longitudeDiv, headingDiv//,
altitudeDiv
);
this.$latitudeInput = this.makeLocationField( 'lat',
locationDiv );
this.$longitudeInput = this.makeLocationField( 'lon',
locationDiv );
this.$headingInput = this.makeLocationField( 'heading',
locationDiv );
-
- showMap = $( '<a></a>' )
- .append( mw.message( 'mwe-upwiz-location-button'
).text() )
- .hide();
-
- linkDiv = $( '<div class="mwe-loc-link"></div>' )
- .append( showMap )
- .appendTo( locationDiv );
$( moreDetailsDiv ).append(
locationDiv,
@@ -302,16 +293,6 @@
}
} );
- $list = this.$form.find( '.mwe-loc-lat, .mwe-loc-lon ' )
- .on( 'input keyup change cut paste', function () {
- var link = details.osmMapLink();
- if ( $list.valid() ) {
- showMap.attr( { href: link, target:
'_blank' } ).show();
- } else {
- showMap.hide();
- }
- } );
-
$.each( this.fields, function ( i, $fieldInput ) {
$fieldInput.rules( 'add', {
required: $fieldInput.data( 'field' ).required,
@@ -320,6 +301,7 @@
}
} );
} );
+ this.map = mw.GeoMap( this.$form );
this.$form.find( '.mwe-date' )
.datepicker( {
dateFormat: 'yy-mm-dd',
@@ -783,15 +765,6 @@
this.$form.append( this.copyMetadataCtrlDiv,
$copyMetadataDiv );
this.copyMetadataCtrlDiv.show();
- },
-
- /**
- * Open OSM map
- */
- osmMapLink: function () {
- var mapLink = new mw.Uri( 'https://openstreetmap.org/' )
- .extend( { zoom: 9, layers: 'M', lat:
this.$latitudeInput.val(), lon: this.$longitudeInput.val() } );
- return mapLink.toString();
},
/**
diff --git a/resources/uploadWizard.css b/resources/uploadWizard.css
index aab644d..37190be 100644
--- a/resources/uploadWizard.css
+++ b/resources/uploadWizard.css
@@ -805,8 +805,25 @@
/* Refer --->
http://stackoverflow.com/questions/17047694/add-line-break-to-before-or-after-pseudo-element-content
*/
.mwe-loc-link:before {
- content:'\a';
- white-space:pre;
+ content: '\a';
+ white-space: pre;
+}
+
+.mwe-loc-link a {
+ cursor: pointer;
+}
+
+div.mwe-loc-map {
+ float: right;
+ background-color: #d3d3d3;
+ position: relative;
+ height: 230px;
+ width: 280px;
+ padding: 5px;
+}
+
+img.mwe-loc-map {
+ display: block;
}
.mwe-upwiz-category-will-be-added {
--
To view, visit https://gerrit.wikimedia.org/r/184869
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I87245f7119085f10e6b62f1e1a2c9d2db0af82c7
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UploadWizard
Gerrit-Branch: osm3
Gerrit-Owner: Inchikutty <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
