User:Abbe98/mapillary.js

(function(mw, $) {
  var mapillaryEndpoint = 'https://a.mapillary.com/v3/images?client_id=WHZlUV9FNXhFZ24xZEZQRHZzUlZ3QToyZjg5ZWI2YzQ1Zjg0ZWJm&radius=50&closeto=';
  var style = '\
  #mapillary-container {\
    position: absolute;\
    left: 0;\
    right: 0;\
    top: 0;\
    z-index: 3000;\
    background: #FFF;\
    min-height: 100vh;\
  }\
  \
  #mapillary-close {\
    position: fixed;\
    top: 5px;\
    right: 5px;\
    cursor: pointer;\
    z-index: 4000;\
  }\
  \
  #mapillary-close:before {\
    content: "X";\
  }\
  \
  #mapillary-container span, #mapillary-container a {\
    margin-left: 5px;\
  }\
  \
  #mapillary-container img {\
    width: 20%;\
  }\
  ';

  var styleInject = document.createElement('style');
  styleInject.innerHTML = style;
  document.head.appendChild(styleInject);

  if (window.mw.config.values.wbEntity) {
    var coordinateClaim = JSON.parse(window.mw.config.values.wbEntity).claims.P625;
    if (coordinateClaim) {
      var latitude = coordinateClaim[0].mainsnak.datavalue.value.latitude;
      var longitude = coordinateClaim[0].mainsnak.datavalue.value.longitude;
      $.ajax({
        url: mapillaryEndpoint + longitude + ',' + latitude,
        success: function(res) {
          if (res.features.length) {
            var container = document.createElement('div');
            container.id = 'mapillary-container';
            container.style.display = 'none';

            var containerClose = document.createElement('span');
            containerClose.id = 'mapillary-close';
            containerClose.addEventListener('click', function() {
              container.style.display = 'none';
            });


            container.appendChild(containerClose);
            document.body.appendChild(container);

            var navList = document.getElementById('p-tb').lastElementChild.firstElementChild;

            var a = document.createElement('a');
            a.setAttribute('role', 'button');
            var aText = document.createTextNode('Mapillary');
            a.appendChild(aText);
            a.addEventListener('click', function() {
              container.style.display = 'block';
            });

            var li = document.createElement('li');
            li.appendChild(a);

            navList.appendChild(li);

            res.features.forEach(function(img) {
              var html = '<a href="https://www.mapillary.com/app/?focus=photo&pKey=' + img.properties.key + '" target="_blank"><img src="https://d1cuyjsrcm0gby.cloudfront.net/' + img.properties.key + '/thumb-320.jpg" alt="thumbnail" /></a><a href="https://www.mapillary.com/app/user/' + img.properties.username + '">' + img.properties.username + '</a><span>' + img.properties.captured_at + '</span><a href="https://tools.wmflabs.org/mapillary-commons/mapillary2commons?mapillary=' + img.properties.key + '" target="_blank">Import to wikimedia Commons</a>';
              var imgCon = document.createElement('div');
              imgCon.innerHTML = html;
              container.appendChild(imgCon);
            });
          }
        }
      });
    }
  }
})(mediaWiki, jQuery);