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>