User:Shizhao/taggeo.js
注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。
// <nowiki>
mw.notify( '因Google Geocoding API不再提供免费额度，User:Shizhao/taggeo.js已无法正常使用。', { type: 'error' } );
//只在条目空间
if (mw.config.get( 'wgNamespaceNumber' )===0) {
// Create portlet link
var portletLink = mw.util.addPortletLink( 'p-views', '#',
'TagGeo', 'ca-taggeo', '寻找本页的地理坐标'
);
//点击事件
$( portletLink).click( function (e) {
e.preventDefault();
mw.loader.using( 'oojs-ui').done( function () {
var names=[], addresss=[], locations=[],types=[], itemdata, coordinatesdata=[], googlemapsAPIstatus;
var templatecoord;
var gmapAPIurl='//maps.googleapis.com/maps/api/geocode/json?';
$.ajax( { //google map API 请求
url: gmapAPIurl,
data: {
address: mw.config.get( 'wgTitle' ),
},
xhrFields: {
// withCredentials: true
},
dataType: 'json'
} ).done( function(JSONresults) { //解析map API
$.each(JSONresults.results, function(i,item){
names[i] = item.address_components[0].long_name;
addresss[i] = item.formatted_address;
locations[i] = item.geometry.location;
types[i] =item.types;
} );
googlemapsAPIstatus = JSONresults.status;
}).done(function(){
// Subclass ProcessDialog.
function ProcessDialog( config ) {
ProcessDialog.super.call( this, config );
}
OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog );
// Specify a static title and actions.
ProcessDialog.static.title= '坐标搜寻器';
ProcessDialog.static.actions = [
{ action: 'help', label: '帮助', flags: ['primary','progressive'] },
{ label: '取消', flags: 'safe' }
];
// Use the initialize() method to add content to the dialog's $body,
// to initialize widgets, and to set up event handlers.
ProcessDialog.prototype.initialize = function () {
ProcessDialog.super.prototype.initialize.call( this );
menuLayout = new OO.ui.MenuLayout( {
position: 'top'
} );
panel = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: true, scrollable: true } );
menuPanel = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: true, scrollable: true } );
contentPanel = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: true, scrollable: true } );
select = new OO.ui.SelectWidget( {
items: [ //太笨，寻常方法搞不定
new OO.ui.OptionWidget( {
data: {
name: names[0],
address: addresss[0],
location: locations[0],
type: types[0]
},
label: names[0]
}),
new OO.ui.OptionWidget( {
data: {
name: names[1],
address: addresss[1],
location: locations[1],
type: types[1]
},
label: names[1]
}),
new OO.ui.OptionWidget( {
data: {
name: names[2],
address: addresss[2],
location: locations[2],
type: types[2]
},
label: names[2]
}),
new OO.ui.OptionWidget( {
data: {
name: names[3],
address: addresss[3],
location: locations[3],
type: types[3]
},
label: names[3]
}),
new OO.ui.OptionWidget( {
data: {
name: names[4],
address: addresss[4],
location: locations[4],
type: types[4]
},
label: names[4]
}),
new OO.ui.OptionWidget( {
data: {
name: names[5],
address: addresss[5],
location: locations[5],
type: types[5]
},
label: names[5]
}),
new OO.ui.OptionWidget( {
data: {
name: names[6],
address: addresss[6],
location: locations[6],
type: types[6]
},
label: names[6]
}),
new OO.ui.OptionWidget( {
data: {
name: names[7],
address: addresss[7],
location: locations[7],
type: types[7]
},
label: names[7]
}),
new OO.ui.OptionWidget( {
data: {
name: names[8],
address: addresss[8],
location: locations[8],
type: types[8]
},
label: names[8]
}),
new OO.ui.OptionWidget( {
data: {
name: names[9],
address: addresss[9],
location: locations[9],
type: types[9]
},
label: names[9]
}),
]
} ).on( 'select', function (item ) { //菜单选择行为
itemdata=item.getData();
contentname=itemdata.name;
contentaddress = itemdata.address;
contentlocation = itemdata.location.lat+','+itemdata.location.lng;
contentlocationdata = itemdata.location;
contenttype = itemdata.type.join(',');
contentPanel.$element.empty(); //每次重置内容面板
//当前页面坐标
var api = new mw.Api();
api.get( {
format: 'json',
action: 'query',
prop: 'coordinates',
titles: mw.config.get( 'wgTitle' ),
coprop: 'type|name|dim|country|region'
// }).progress( function() {
// var progressBarI = new OO.ui.ProgressBarWidget();
// menuLayout.$content.append(
// contentPanel.$element.append(progressBarI.$element )
// );
}).done( function ( data ) {
try {
for (var i in data.query.pages) {
coordinatesdata = data.query.pages[i].coordinates;
console.log('length', coordinatesdata.length); //去掉此句会报coordinatesdata未定义错误，直接跳过try...catch....，不知为何....
}
} catch(err){
coordinatesdata =[];
console.log('err.message', err.message);
}
var fieldset = new OO.ui.FieldsetLayout( {
label: '坐标编辑',
} );
//页面有坐标的情况
if (coordinatesdata.length==1){
fieldset.setLabel( new OO.ui.HtmlSnippet('坐标编辑<span style="color:red;"><b><big>(当前页面已有坐标信息，请手工修改)</big></b></span>'));
fieldset.setIcon('alert');
fieldset.setIconTitle('当前页面已有坐标信息，请手工修改');
$(".oo-ui-menuLayout-content").css("color", "gray");
} else if(coordinatesdata.length>1) {
fieldset.setLabel( new OO.ui.HtmlSnippet('坐标编辑<span style="color:red;"><b><big>(当前页面有多个坐标信息，脚本无法确认)</big></b></span>'));
fieldset.setIcon('alert');
fieldset.setIconTitle('当前页面有多个坐标信息，不能编辑');
$(".oo-ui-menuLayout-content").css("color", "gray");
}
// Add an action field layout:
var namelabel = new OO.ui.LabelWidget( {
label: $('<b>名称</b>：<code>'+contentname+'</code>')
} );
var addresslabel = new OO.ui.LabelWidget( {
label: $('<b>地址</b>：<code>'+contentaddress+'</code>')
} );
var TextInputcoord= new OO.ui.TextInputWidget( {
value: contentlocation,
required: true,
label: '坐标',
validate:'non-empty',
labelPosition:'before',
indicatorTitle:'必填'
} );
var typelabel = new OO.ui.LabelWidget( {
label: $('<b>找到的坐标类型</b>：<code>'+contenttype+'</code>')
} );
var dropDowntype=new OO.ui.DropdownWidget( {
label: '选择下列一个坐标类型',
// The menu is composed within the DropdownWidget
menu: {
items: [
new OO.ui.MenuOptionWidget( {
data: 'country',
label: 'country（国家）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'adm1st',
label: 'adm1st（国家一级行政区，如州、省等）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'adm2nd',
label: 'adm2nd（国家二级行政区）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'adm3rd',
label: 'adm3rd（国家三级行政区）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'city',
label: 'city（市镇、村庄等）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'airport',
label: 'airport（机场、航空基地）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'mountain',
label: 'mountain（山峰、山脉、丘陵、暗礁等）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'isle',
label: 'isle（岛屿）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'waterbody',
label: 'waterbody（海湾、湖泊、水库、河口、瀑布等）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'forest',
label: 'forest（森林和林地）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'river',
label: 'river（河流、水渠、溪流等）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'glacier',
label: 'glacier（冰川、冰冠）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'event',
label: 'event（在特定地点发生的活动、事件、战争、灾害、事故等）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'edu',
label: 'edu（各种教育机构）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'pass',
label: 'pass（山口）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'railwaystation',
label: 'railwaystation（各种车站）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'landmark',
label: 'landmark（各种地标、建筑物、自然文化景观、旅游景点等）'
} ),
new OO.ui.MenuOptionWidget( {
data: 'satellite',
label: 'satellite（地球同步卫星）',
} ),
new OO.ui.MenuOptionWidget( {
data: '',
label: '不选择'
} )
]
}
} );
var TextInputregion= new OO.ui.TextInputWidget( {
placeholder: '设置一个地区代码（可选）',
label: 'region:',
labelPosition:'before'
} );
var TextInputdim= new OO.ui.TextInputWidget( {
placeholder: '地图覆盖范围（可选）',
label: 'dim:',
labelPosition:'before'
} );
var TextInputnotes= new OO.ui.TextInputWidget( {
placeholder: '<ref>...</ref>',
label: 'notes=',
multiline: true,
autosize: true,
maxRows: 3,
labelPosition:'before'
} );
var previewbutton=new OO.ui.ButtonWidget( {
label: '预览',
flags: [ 'safe'],
icon:'code',
title:'点击按钮，预览{{Coord}}模板代码'
} );
var gmapsbutton=new OO.ui.ButtonWidget( {
label: '地图',
flags: [ 'safe','progressive' ],
icon:'window',
title:'在新窗口中打开Google地图查看位置信息',
href: '//maps.google.com/maps?ll='+TextInputcoord.getValue()+'&q='+TextInputcoord.getValue()+'&t=m&z=18',
target: '_blank'
} );
var editbutton=new OO.ui.ButtonWidget( {
label: '编辑',
flags: [ 'safe','progressive' ],
icon:'add',
title:'在新窗口中编辑本条目',
href: '/w/index.php?title='+mw.config.get( 'wgTitle' )+'&action=edit',
target: '_blank'
} );
if (coordinatesdata.length>0){
editbutton.setFlags([ 'primary','progressive' ]);
}
var savebutton=new OO.ui.ButtonWidget( {
label: '保存',
flags: [ 'primary','constructive' ],
title:'点击按钮，直接保存坐标信息到本条目中'
} );
if (coordinatesdata.length>0){
savebutton.setDisabled(true);
savebutton.setTitle('当前页面已有坐标信息，不能直接保存');
}
var buttonGroup = new OO.ui.ButtonGroupWidget( {
items: [previewbutton, gmapsbutton,editbutton,savebutton]
} );
//显示当前页坐标信息
if (coordinatesdata.length==1){
TextInputcoordnotices=[new OO.ui.HtmlSnippet('<small>当前页面的坐标值是：<code>'+coordinatesdata[0].lat+','+coordinatesdata[0].lon+'</code></small>')];
if (coordinatesdata[0].type) {
dropDowntypenotices=[new OO.ui.HtmlSnippet('<small>当前页面坐标的<code>type</code>值是：<code>'+coordinatesdata[0].type+'</code></small>')];
}else {
dropDowntypenotices=[]; //不显示信息
}
if (coordinatesdata[0].country) {
TextInputregionnotices=[new OO.ui.HtmlSnippet('<small>当前页面坐标的<code>region</code>值是：<code>'+coordinatesdata[0].country+'</code></small>')];
if (coordinatesdata[0].region) {
TextInputregionnotices=[new OO.ui.HtmlSnippet('<small>当前页面坐标的<code>region</code>值是：<code>'+coordinatesdata[0].country+'-'+coordinatesdata[0].region+'</code></small>')];
}
}else {
TextInputregionnotices=[];
}
if (coordinatesdata[0].dim) {
TextInputdimnotices=[new OO.ui.HtmlSnippet('<small>当前页面坐标的<code>dim</code>值是：<code>'+coordinatesdata[0].dim+'</code></small>')];
}else {
TextInputdimnotices=[];
}
} else {
TextInputcoordnotices=[];
dropDowntypenotices=[];
TextInputregionnotices=[];
TextInputdimnotices=[];
}
fieldset.addItems( [
new OO.ui.FieldLayout( namelabel, {
align: 'left'
} ),
new OO.ui.FieldLayout( addresslabel, {
align: 'left'
} ),
new OO.ui.FieldLayout(
TextInputcoord,
{notices: TextInputcoordnotices}
),
new OO.ui.FieldLayout( typelabel, {
align: 'left'
} ),
new OO.ui.FieldLayout(
dropDowntype,
{
notices: dropDowntypenotices,
help: new OO.ui.HtmlSnippet('关于坐标类型，请参考<a href="/wiki/User:Shizhao/taggeo">说明文档</a>。' ),
}
),
new OO.ui.FieldLayout(
TextInputregion,
{
notices: TextInputregionnotices,
help: new OO.ui.HtmlSnippet('地区代码，使用<a href="/wiki/ISO_3166-2">ISO 3166-2</a>和<a href="/wiki/ISO_3166-1_alpha-2">ISO 3166-1 alpha-2</a>。' ),
}
),
new OO.ui.FieldLayout(
TextInputdim,
{
notices: TextInputdimnotices,
help: new OO.ui.HtmlSnippet('dim是一个整数，<code>dim = scale / 10</code>' ),
}
),
new OO.ui.FieldLayout(
TextInputnotes
),
new OO.ui.FieldLayout(
buttonGroup
),
] );
menuLayout.$content.append(
contentPanel.$element.append(fieldset.$element)
);
menuLayout.$content.append(
contentPanel.$element.append('<div id="geotag-preview"></div>') //设置预览位置
);
//{{Coord}}模板内容
function Coord() {
var coordparameter='|';
try {
if (dropDowntype.getMenu().getSelectedItem().getData()!==''){
coordparameter = coordparameter+'type:'+dropDowntype.getMenu().getSelectedItem().getData()+'_';
}
} catch(err){
coordparameter = coordparameter;
}
if (TextInputregion.getValue()){
coordparameter = coordparameter+'region:'+TextInputregion.getValue()+'_';
}
if (TextInputdim.getValue()){
coordparameter = coordparameter+'dim:'+TextInputdim.getValue()+'_';
}
coordparameter = coordparameter+'source:GoogleMaps';
if (TextInputnotes.getValue()){
templatecoord = '{{Coord|'+TextInputcoord.getValue().split(",").join('|')+coordparameter+'|display=title|notes='+TextInputnotes.getValue()+'}}';
} else {
templatecoord = '{{Coord|'+TextInputcoord.getValue().split(",").join('|')+coordparameter+'|display=title}}';
}
return templatecoord;
}
previewbutton.on( 'click', function () {
wikitext = '<p><b>Wikicode预览：</b></p><p><code>'+Coord()+'</code></p>';
$('div#geotag-preview').html(wikitext);
} );
savebutton.on( 'click', function () {
//点击编辑页面
var api = new mw.Api();
CoordDatas=Coord();
api.postWithToken( "edit", {
action: "edit",
title: mw.config.get( "wgPageName" ),
summary: '通过[[User:Shizhao/taggeo|脚本]]添加坐标信息',
tags: 'TagGeo',
appendtext: '\n'+CoordDatas,
contentformat: 'text/x-wiki',
contentmodel: 'wikitext',
} ).done( function( result, jqXHR ) {
mw.log( "Saved successfully" );
location.reload();
} ).fail( function( code, result ) {
if ( code === "http" ) {
mw.log( "HTTP error: " + result.textStatus ); // result.xhr contains the jqXHR object
mw.notify( "HTTP错误: " + result.textStatus );
} else if ( code === "ok-but-empty" ) {
mw.log( "服务器未响应" );
mw.notify( "服务器未响应" );
} else {
mw.log( "API error: " + code );
mw.notify( "API错误: " + code );
}
} );
}); //保存按钮点击事件结束
}); //当前页面坐标.done结束
} ); //菜单选择事件结束
menuLayout.$menu.append(
menuPanel.$element.append( '<b>请选择下列地点：</b>', select.$element )
);
menuLayout.$content.append(
contentPanel.$element.append( '<p><big><b><--</b> 点击左侧地名显示详情</p></big>')
);
//google API状态
if (googlemapsAPIstatus!=='OK') {
if (googlemapsAPIstatus=='ZERO_RESULTS'){
contentPanel.$element.empty();
var alertIcon1 = new OO.ui.IconWidget( {
icon: 'alert'
} );
var Iconlabel1 = new OO.ui.LabelWidget( {
label: $( '<p><big><b>未找到<code>'+mw.config.get( 'wgTitle' )+'</code>的坐标信息。</b></big></p>' )
} );
menuLayout.$content.append(
contentPanel.$element.append(alertIcon1.$element, Iconlabel1.$element )
);
}else if (googlemapsAPIstatus=='OVER_QUERY_LIMIT'){
contentPanel.$element.empty();
var alertIcon2 = new OO.ui.IconWidget( {
icon: 'alert'
} );
var Iconlabel2 = new OO.ui.LabelWidget( {
label: $( '<p><big><b>API请求数已经超过配额限制，请稍后再试！</b></big></p>' )
} );
menuLayout.$content.append(
contentPanel.$element.append(alertIcon2.$element, Iconlabel2.$element )
);
} else{
contentPanel.$element.empty();
var alertIcon3 = new OO.ui.IconWidget( {
icon: 'alert'
} );
var Iconlabel3 = new OO.ui.LabelWidget( {
label: $( '<p><big><b>API请求出错，原因是：</b></big><br><code>'+googlemapsAPIstatus+'</code></p>' )
} );
menuLayout.$content.append(
contentPanel.$element.append(alertIcon3.$element, Iconlabel3.$element )
);
}
} //API状态结束
panel.$element.append( menuLayout.$element );
this.$body.append( panel.$element );
}; //initialize() method to add content to the dialog Done！
// Get dialog height.
ProcessDialog.prototype.getBodyHeight = function () {
return (select.$element.outerHeight( true )+panel.$element.outerHeight( true ))*4;
};
// Use the getActionProcess() method to specify a process to handle the
// actions (for the 'save' action, in this example).
ProcessDialog.prototype.getActionProcess = function ( action ) {
var dialog = this;
if ( action ==='help' ) {
// Create a new process to handle the action
return new OO.ui.Process( function () {
window.open( '/wiki/User:Shizhao/taggeo');
}, this );
}else {
return new OO.ui.Process( function () {
dialog.close( { action: action } );
} );
}
// Fallback to parent handler.
return ProcessDialog.super.prototype.getActionProcess.call( this, action );
};
// Create and append the window manager.
var windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );
// Create a new dialog window.
var processDialog = new ProcessDialog({
size: 'larger'
});
// Add windows to window manager using the addWindows() method.
windowManager.addWindows( { geoprocessDialog: processDialog } );
// Open the window.
windowManager.openWindow( 'geoprocessDialog' );
}); //map API done
}); //oojs-ui load
}); //ca-taggeo click done
}
// </nowiki>