Difference between revisions of "MediaWiki:Common.js"

From SacredWiki
Jump to navigation Jump to search
Line 46: Line 46:
 
     "sampleText": ""};
 
     "sampleText": ""};
 
   }
 
   }
 +
 +
//<![CDATA[
 +
var map = null;   
 +
var lastmarker = null;
 +
      // ========== Read paramaters that have been passed in ==========
 +
     
 +
      // Before we go looking for the passed parameters, set some defaults
 +
      // in case there are no parameters
 +
      var id;
 +
      var index = -1;
 +
 +
      // these set the initial center, zoom and maptype for the map
 +
      // if it is not specified in the query string
 +
      var lat = 75;
 +
      var lng = -115;
 +
      var zoom = 2;
 +
      var maptype = 'S2';
 +
 +
 +
      // If there are any parameters at eh end of the URL, they will be in  location.search
 +
      // looking something like  "?marker=3"
 +
 +
      // skip the first character, we are not interested in the "?"
 +
      var query = location.search.substring(1);
 +
 +
      // split the rest at each "&" character to give a list of  "argname=value"  pairs
 +
      var pairs = query.split("&");
 +
      for (var i=0; i<pairs.length; i++) {
 +
        // break each pair at the first "=" to obtain the argname and value
 +
var pos = pairs[i].indexOf("=");
 +
var argname = pairs[i].substring(0,pos).toLowerCase();
 +
var value = pairs[i].substring(pos+1).toLowerCase();
 +
 +
        // process each possible argname  -  use unescape() if theres any chance of spaces
 +
        if (argname == "id") {id = unescape(value);}
 +
        if (argname == "marker") {index = parseFloat(value);}
 +
        if (argname == "lat") {lat = parseFloat(value);}
 +
        if (argname == "lng") {lng = parseFloat(value);}
 +
        if (argname == "zoom") {zoom = parseInt(value);}
 +
        if (argname == "layers") {
 +
          if (value == "m") {maptype = 'S2';}
 +
          if (value == "d") {maptype = 'dungeons';}
 +
        }
 +
      }
 +
 +
  function MapTypeId2UrlValue(maptype) {
 +
    var urlValue = 'm';
 +
    switch(maptype){
 +
 +
      case 'dungeons':  urlValue='d';
 +
                        break;
 +
      default:
 +
      case 'S2':  urlValue='m';
 +
                        break;
 +
    }
 +
    return urlValue;
 +
  }
 +
 +
      // this variable will collect the html which will eventually be placed in the side_bar
 +
      var side_bar_html = "";
 +
   
 +
      // arrays to hold copies of the markers and html used by the side_bar
 +
      // because the function closure trick doesnt work there
 +
      var gmarkers = [];
 +
      var idmarkers = [];
 +
 +
    // global "map" variable
 +
 +
 +
    var customIcons = {
 +
      boss: {icon: 'boss.png'},
 +
      easter: {icon: 'easter.png'},
 +
      employee: {icon: 'employee.png'}
 +
    };
 +
 +
// A function to create the marker and set up the event window function
 +
function createMarker(latlng, id, html, type) {
 +
    var contentString = html;
 +
    var icon = customIcons[type] || {};
 +
    var marker = new google.maps.Marker({
 +
        position: latlng,
 +
        map: map,
 +
        icon: icon.icon,
 +
        zIndex: Math.round(latlng.lat()*-100000)<<5
 +
        });
 +
    marker.id = id;
 +
    marker.index = gmarkers.length;
 +
    google.maps.event.addListener(marker, 'click', function() {
 +
        lastmarker = new Object;
 +
        lastmarker.id = marker.id;
 +
        lastmarker.index = marker.index;
 +
        infowindow.setContent(contentString);
 +
        infowindow.open(map,marker);
 +
        });
 +
    // save the info we need to use later for the side_bar
 +
    gmarkers.push(marker);
 +
    idmarkers[id.toLowerCase()] = marker;
 +
    // add a line to the side_bar html
 +
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + id + '<\/a><br>';
 +
}
 +
 +
// This function picks up the click and opens the corresponding info window
 +
function myclick(i) {
 +
  google.maps.event.trigger(gmarkers[i], "click");
 +
}
 +
 +
function makeLink() {
 +
        var mapinfo = "lat=" + map.getCenter().lat().toFixed(6)
 +
                    + "&lng=" + map.getCenter().lng().toFixed(6)
 +
                    + "&zoom=" + map.getZoom()
 +
                    + "&layers=" + MapTypeId2UrlValue(map.getMapTypeId());
 +
        if (lastmarker) {
 +
          var a="http://www.sacredwiki.org/index.php5/User:Schot/Map?id=" + lastmarker.id + "&" + mapinfo;
 +
          var b="http://www.sacredwiki.org/index.php5/User:Schot/Map?marker=" + lastmarker.index + "&" + mapinfo;
 +
      } else {
 +
          var a = "http://www.sacredwiki.org/index.php5/User:Schot/Map?"+mapinfo;
 +
          var b = a;
 +
      }
 +
 
 +
        document.getElementById("idlink").innerHTML = '<a href="' +a+ '" id=url target=_new><img src=images/link.gif>- ' +a+ '</a> (id in xml file also entry &quot;name&quot; in sidebar menu)';
 +
        document.getElementById("indexlink").innerHTML = '<a href="' +b+ '" id=url target=_new><img src=images/link.gif>- Link directly to this page by index</a> (position in gmarkers array)';
 +
      }
 +
  
 
function initialize() {
 
function initialize() {
Line 146: Line 269:
 
       });
 
       });
 
     }
 
     }
 +
 +
var infowindow = new google.maps.InfoWindow(
 +
  {
 +
    size: new google.maps.Size(150,50)
 +
  });
 +
   
 +
//]]>
  
 
addOnloadHook(initialize);
 
addOnloadHook(initialize);

Revision as of 18:18, 15 December 2010

/* Any JavaScript here will be loaded for all users on every page load. */


 if (mwCustomEditButtons) {
   mwCustomEditButtons[mwCustomEditButtons.length] = {
     "imageFile": "http://www.darkmatters.org/SacredWiki/images/buttons/align_center.png",
     "speedTip": "Will center highlighted text.",
     "tagOpen": "<center>",
     "tagClose": "</center>",
     "sampleText": ""};
   mwCustomEditButtons[mwCustomEditButtons.length] = {
     "imageFile": "http://www.darkmatters.org/SacredWiki/images/buttons/S1internallink.jpg",
     "speedTip": "Make a Sacred Underworld Internal Link",
     "tagOpen": "[[Sacred:",
     "tagClose": "|]]",
     "sampleText": "Page Name you are linking to"};
   mwCustomEditButtons[mwCustomEditButtons.length] = {
     "imageFile": "http://www.darkmatters.org/SacredWiki/images/buttons/S2internallink.jpg",
     "speedTip": "Make a Sacred 2:Fallen Angel Internal Link",
     "tagOpen": "[[Sacred 2:",
     "tagClose": "|]]",
     "sampleText": "Type here what you want the link to be read as..."};
   mwCustomEditButtons[mwCustomEditButtons.length] = {
     "imageFile": "http://www.darkmatters.org/SacredWiki/images/buttons/questbutton.jpg",
     "speedTip": "Quest Template.  Push the preview to see results.",
     "tagOpen": "{{subst:Quest",
     "tagClose": "}}",
     "sampleText": ""};
   mwCustomEditButtons[mwCustomEditButtons.length] = {
     "imageFile": "http://www.darkmatters.org/SacredWiki/images/buttons/chainquest.jpg",
     "speedTip": "ChainQuest Template.  Push the preview to see results.",
     "tagOpen": "{{subst:ChainQuest",
     "tagClose": "}}",
     "sampleText": ""};
   mwCustomEditButtons[mwCustomEditButtons.length] = {
     "imageFile": "http://www.darkmatters.org/SacredWiki/images/buttons/place.jpg",
     "speedTip": "Place Template.  Push the preview to see results.",
     "tagOpen": "{{subst:Place",
     "tagClose": "}}",
     "sampleText": ""};
   mwCustomEditButtons[mwCustomEditButtons.length] = {
     "imageFile": "http://www.darkmatters.org/SacredWiki/images/buttons/npc.jpg",
     "speedTip": "NPC Template.  Push the preview to see results.",
     "tagOpen": "{{subst:NPC",
     "tagClose": "}}",
     "sampleText": ""};
  }

//<![CDATA[
var map = null;    
var lastmarker = null;
      // ========== Read paramaters that have been passed in ==========
      
      // Before we go looking for the passed parameters, set some defaults
      // in case there are no parameters
      var id;
      var index = -1;

      // these set the initial center, zoom and maptype for the map 
      // if it is not specified in the query string
      var lat = 75;
      var lng = -115;
      var zoom = 2;
      var maptype = 'S2';
 

      // If there are any parameters at eh end of the URL, they will be in  location.search
      // looking something like  "?marker=3"
 
      // skip the first character, we are not interested in the "?"
      var query = location.search.substring(1);
 
      // split the rest at each "&" character to give a list of  "argname=value"  pairs
      var pairs = query.split("&");
      for (var i=0; i<pairs.length; i++) {
        // break each pair at the first "=" to obtain the argname and value
	var pos = pairs[i].indexOf("=");
	var argname = pairs[i].substring(0,pos).toLowerCase();
	var value = pairs[i].substring(pos+1).toLowerCase();
 
        // process each possible argname  -  use unescape() if theres any chance of spaces
        if (argname == "id") {id = unescape(value);}
        if (argname == "marker") {index = parseFloat(value);}
        if (argname == "lat") {lat = parseFloat(value);}
        if (argname == "lng") {lng = parseFloat(value);}
        if (argname == "zoom") {zoom = parseInt(value);}
        if (argname == "layers") {
          if (value == "m") {maptype = 'S2';}
          if (value == "d") {maptype = 'dungeons';}
        }
      }

  function MapTypeId2UrlValue(maptype) {
    var urlValue = 'm';
    switch(maptype){

      case 'dungeons':   urlValue='d';
                        break;
      default:
      case 'S2':   urlValue='m';
                        break;
    }
    return urlValue;
  }

      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
    
      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 
      var idmarkers = [];

     // global "map" variable


    var customIcons = {
      boss: {icon: 'boss.png'},
      easter: {icon: 'easter.png'},
      employee: {icon: 'employee.png'}
    };

// A function to create the marker and set up the event window function 
function createMarker(latlng, id, html, type) {
    var contentString = html;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: icon.icon,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    marker.id = id;
    marker.index = gmarkers.length;
    google.maps.event.addListener(marker, 'click', function() {
        lastmarker = new Object;
        lastmarker.id = marker.id;
        lastmarker.index = marker.index;
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    idmarkers[id.toLowerCase()] = marker;
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + id + '<\/a><br>';
}
 
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function makeLink() {
        var mapinfo = "lat=" + map.getCenter().lat().toFixed(6)
                    + "&lng=" + map.getCenter().lng().toFixed(6)
                    + "&zoom=" + map.getZoom()
                    + "&layers=" + MapTypeId2UrlValue(map.getMapTypeId());
        if (lastmarker) {
          var a="http://www.sacredwiki.org/index.php5/User:Schot/Map?id=" + lastmarker.id + "&" + mapinfo;
          var b="http://www.sacredwiki.org/index.php5/User:Schot/Map?marker=" + lastmarker.index + "&" + mapinfo;
       } else {
          var a = "http://www.sacredwiki.org/index.php5/User:Schot/Map?"+mapinfo;
          var b = a;
       }
		   
        document.getElementById("idlink").innerHTML = '<a href="' +a+ '" id=url target=_new><img src=images/link.gif>- ' +a+ '</a> (id in xml file also entry &quot;name&quot; in sidebar menu)';
        document.getElementById("indexlink").innerHTML = '<a href="' +b+ '" id=url target=_new><img src=images/link.gif>- Link directly to this page by index</a> (position in gmarkers array)';
      }


function initialize() {
  // create the map
  var myOptions = {
    zoom: zoom,
    center: new google.maps.LatLng(lat,lng),
    backgroundColor: '#f0e0be',
    mapTypeId: maptype
}


  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
 
    var S2Options = { 
      getTileUrl: function(coord, zoom) { 
        return "http://www.darkmatters.org/Map/MainMap/"+zoom+"_"+coord.x+"_"+coord.y+".jpg";
      }, 
      tileSize: new google.maps.Size(256, 256), 
      isPng: false
    };

    var S2 = new google.maps.ImageMapType(S2Options);
    S2.name = "Main Map";
    S2.maxZoom = 7;
    S2.minZoom = 2;
    map.mapTypes.set('S2', S2);


var dungeonOptions = { 
      getTileUrl: function(coord, zoom) { 
        return "http://www.darkmatters.org/Map/Dungeons/"+zoom+"_"+coord.x+"_"+coord.y+".jpg";
      }, 
      tileSize: new google.maps.Size(256, 256), 
      isPng: false
    };

    var dungeons = new google.maps.ImageMapType(dungeonOptions);
    dungeons.name = "Dungeons";
    dungeons.maxZoom = 7;
    dungeons.minZoom = 2;
    map.mapTypes.set('dungeons', dungeons); 


    map.setOptions({
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        mapTypeIds: ['S2', 'dungeons']
      }
    });

      // Make the link the first time when the page opens
      makeLink();

      // Make the link again whenever the map changes
      google.maps.event.addListener(map, 'maptypeid_changed', makeLink);
      google.maps.event.addListener(map, 'center_changed', makeLink);
      google.maps.event.addListener(map, 'bounds_changed', makeLink);
      google.maps.event.addListener(map, 'zoom_changed', makeLink);

  google.maps.event.addListener(map, 'click', function() {
        lastmarker = null;
        makeLink();
        infowindow.close();
        });
      // Read the data from example.xml
      downloadUrl("example.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("description");
          var type = markers[i].getAttribute("type");
          var label = markers[i].getAttribute("label");
          // create the marker
          var marker = createMarker(point,label,html,type);
        }
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
          // ========= If a parameter was passed, open the info window ==========
          if (id) {
            if (idmarkers[id]) {
              google.maps.event.trigger(idmarkers[id],"click");
            } else {
              alert("id "+id+" does not match any marker");
            }
          }
          if (index > -1) {
            if (index < gmarkers.length) {
              google.maps.event.trigger(gmarkers[index],"click");
            } else {
              alert("marker "+index+" does not exist");
            }
          }
      });
    }
 
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });
    
//]]>

addOnloadHook(initialize);
Retrieved from "https://www.sacredwiki.org/index.php?title=MediaWiki:Common.js&oldid=44547"