Merge branch '3-wikimedia-generator'

src/CategoryOverpass.js

@@ -223,14 +223,6 @@ CategoryOverpass.prototype.notifyPopupOpen = function (object, popup) {
 }
 
 CategoryOverpass.prototype.updatePopupContent = function (object, popup) {
-  call_hooks_callback('show-popup', object, this, popup._contentNode,
-    function (err) {
-      if (err.length) {
-        console.log('show-popup produced errors:', err)
-      }
-    }
-  )
-
   if (object.data.popupDescription || object.data.description) {
     var div = document.createElement('div')
     div.className = 'description'
@@ -252,6 +244,14 @@ CategoryOverpass.prototype.updatePopupContent = function (object, popup) {
   var footerContent = '<a class="showDetails" href="#' + this.id + '/' + object.id + '/details">' + lang('show details') + '</a>'
   footer.innerHTML = footerContent
   popup._contentNode.appendChild(footer)
+
+  call_hooks_callback('show-popup', object, this, popup._contentNode,
+    function (err) {
+      if (err.length) {
+        console.log('show-popup produced errors:', err)
+      }
+    }
+  )
 }
 
 CategoryOverpass.prototype.renderTemplate = function (object, templateId, callback) {

src/ImageLoader.js

@@ -1,4 +1,5 @@
 var wikidata = require('./wikidata')
+var wikipedia = require('./wikipedia')
 var cache = {}
 
 function ImageLoader (data) {
@@ -10,10 +11,10 @@ function ImageLoader (data) {
     return new ImageLoader(data)
   }
 
-  this.index = null
   this.sources = []
   this.found = []
   this.data = {}
+  this.defaultCounter = {}
 
   this.parseObject(data)
 }
@@ -55,6 +56,13 @@ ImageLoader.prototype.parseObject = function (data) {
     }
   }
 
+  if (data.object.tags.wikipedia) {
+    this.sources.push({
+      type: 'wikipedia',
+      value: data.object.tags.wikipedia
+    })
+  }
+
   if (data.object.tags.wikidata) {
     this.sources.push({
       type: 'wikidata',
@@ -142,6 +150,28 @@ ImageLoader.prototype.loadWikimediaCommons = function (src, callback) {
   }
 }
 
+ImageLoader.prototype.loadWikipedia = function (src, callback) {
+  var value = src.value
+
+  wikipedia.getImages(value, function (err, result) {
+    if (err) {
+      return callback(err, null)
+    }
+
+    result.forEach(function (d) {
+      if (this.found.indexOf(d) === -1) {
+        this.found.push(d)
+        this.data[d] = {
+          id: d,
+          type: 'wikimedia'
+        }
+      }
+    }.bind(this))
+
+    callback(null)
+  }.bind(this))
+}
+
 ImageLoader.prototype.handlePending = function () {
   var pending = this.pendingCallbacks
   delete this.pendingCallbacks
@@ -169,32 +199,53 @@ ImageLoader.prototype.callbackCurrent = function (index, options, callback) {
       this.loadWikimediaCommons(src, this.handlePending.bind(this))
     } else if (src.type === 'wikidata') {
       this.loadWikidata(src, this.handlePending.bind(this))
+    } else if (src.type === 'wikipedia') {
+      this.loadWikipedia(src, this.handlePending.bind(this))
     }
 
     return
   }
 
   if (options.wrap && this.found.length) {
-    return this.callbackCurrent(index - this.found.length, options, callback)
+    var counter = this.defaultCounter
+    if ('counter' in options) {
+      counter = options.counter
+    }
+    counter.index = index - this.found.length
+
+    return this.callbackCurrent(counter.index, options, callback)
   }
 
   callback(null, null)
 }
 
+/* options:
+ * - wrap: whether to wrap to the first image after last (true/false)
+ * - counter: use a different counter object (pass an empty object)
+ */
 ImageLoader.prototype.first = function (options, callback) {
-  this.index = 0
+  var counter = this.defaultCounter
+  if ('counter' in options) {
+    counter = options.counter
+  }
+  counter.index = 0
 
-  this.callbackCurrent(this.index, options, callback)
+  this.callbackCurrent(counter.index, options, callback)
 }
 
 ImageLoader.prototype.next = function (options, callback) {
-  if (this.index === null) {
-    this.index = 0
+  var counter = this.defaultCounter
+  if ('counter' in options) {
+    counter = options.counter
+  }
+
+  if (!('index' in counter) || counter.index === null) {
+    counter.index = 0
   } else {
-    this.index ++
+    counter.index ++
   }
 
-  this.callbackCurrent(this.index, options, callback)
+  this.callbackCurrent(counter.index, options, callback)
 }
 
 module.exports = ImageLoader

src/image.js

@@ -51,7 +51,10 @@ register_hook('show-details', function (data, category, dom, callback) {
 
   var currentLoader = ImageLoader(data)
 
+  data.detailsImageCounter = {}
+
   currentLoader.next({
+    counter: data.detailsImageCounter,
     wrap: true
   },function (err, img) {
     div.classList.remove('loading')
@@ -76,6 +79,7 @@ register_hook('show-details', function (data, category, dom, callback) {
 
   function loadNext () {
     currentLoader.next({
+      counter: data.detailsImageCounter,
       wrap: true
     }, function (err, img) {
       if (err) {
@@ -107,3 +111,32 @@ register_hook('hide-details', function () {
     window.clearInterval(showTimer)
   }
 })
+
+register_hook('show-popup', function (data, category, dom, callback) {
+  var div = document.createElement('div')
+  div.className = 'images loading'
+  var imageWrapper
+
+  dom.insertBefore(div, dom.firstChild)
+
+  var currentLoader = ImageLoader(data)
+  data.popupImageCounter = {}
+
+  currentLoader.first({
+    counter: data.popupImageCounter
+  },function (err, img) {
+    div.classList.remove('loading')
+
+    if (!img) {
+      return callback(err)
+    }
+
+    imageWrapper = document.createElement('div')
+    imageWrapper.className = 'imageWrapper'
+    div.appendChild(imageWrapper)
+
+    show(img, {}, imageWrapper)
+
+    callback(null)
+  })
+})

src/wikipedia.js

@@ -16,12 +16,9 @@ function stripLinks (dom) {
   })
 }
 
-function prepare (text) {
+function prepare (div) {
   var i
 
-  var div = document.createElement('div')
-  div.innerHTML = text
-
   var contents = div.getElementsByTagName('div')
   for (i = 0; i < contents.length; i++) {
     if (contents[i].id === 'mw-content-text') {
@@ -87,21 +84,32 @@ function get (value, callback) {
         return callback(new Error('error'), null)
       }
 
-      var text = prepare(result.content)
-      text += ' <a target="_blank" href="' + result.languages[result.language] + '">' + lang('more') + '</a>'
+      result.div = document.createElement('div')
+      result.div.innerHTML = result.content
 
-      cache[cacheId] = text
+      cache[cacheId] = result
 
-      callback(null, text)
+      callback(null, result)
 
       loadClash[cacheId].forEach(function (d) {
-        d(null, text)
+        d(null, result)
       })
       delete loadClash[cacheId]
     }
   )
 }
 
+function getAbstract (value, callback) {
+  get(value,
+    function (err, result) {
+      var text = prepare(result.div)
+      text += ' <a target="_blank" href="' + result.languages[result.language] + '">' + lang('more') + '</a>'
+
+      callback(null, text)
+    }
+  )
+}
+
 register_hook('show-details', function (data, category, dom, callback) {
   var ob = data.object
   var found = 0
@@ -261,7 +269,7 @@ function showWikipedia (tagValue, dom, callback) {
   l.className = 'loadingIndicator'
   block.appendChild(l)
 
-  get(tagValue, function (err, text) {
+  getAbstract(tagValue, function (err, text) {
     if (!text) {
       block.appendChild(document.createTextNode(lang('wikipedia:no-url-parse')))
     }
@@ -275,3 +283,38 @@ function showWikipedia (tagValue, dom, callback) {
     callback(err)
   })
 }
+
+function getImages (tagValue, callback) {
+  get(tagValue, function (err, result) {
+    if (err) {
+      return callback(err, null)
+    }
+
+    var imgs = result.div.getElementsByTagName('img')
+    var result = []
+
+    for (i = 0; i < imgs.length; i++) {
+      var img = imgs[i]
+
+      // ignore icons
+      if (img.width <= 64 && img.height <= 64) {
+        continue
+      }
+
+      img.removeAttribute('width')
+      img.removeAttribute('height')
+
+      var m = img.src.match(/^https?:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/\w+\/\w+\/([^\/]+)/)
+      if (m) {
+        var file = decodeURIComponent(m[1]).replace(/_/g, ' ')
+        result.push(file)
+      }
+    }
+
+    callback(null, result)
+  })
+}
+
+module.exports = {
+  getImages: getImages
+}

style.css

@@ -251,8 +251,15 @@ ul.overpass-layer-list > li:after {
   clear: both;
 }
 .leaflet-popup-content {
-  max-height: 250px;
+  min-width: 300px;
+  max-height: 300px;
   overflow: auto;
+  word-wrap: break-word;
+}
+.leaflet-popup-content:after {
+  content: ' ';
+  clear: both;
+  display: table;
 }
 .leaflet-popup-content pre {
   font-size: 8px;
@@ -424,9 +431,6 @@ a.showDetails {
   }
 }
 
-.leaflet-popup-content {
-  min-width: 200px;
-}
 #content {
   font-size: 12px;
   font-family: "Helvetica Neue", "Arial", "Helvetica", sans-serif;
@@ -520,6 +524,17 @@ a.showDetails {
 .wikipedia .reference {
   display: none;
 }
+.leaflet-popup-content .images {
+  float: right;
+  margin-left: 0.5em;
+  max-width: 100px;
+  max-height: 150px;
+}
+.leaflet-popup-content .images img {
+  max-width: 100px;
+  max-height: 150px;
+}
+
 #contentDetails .images {
 }
 #contentDetails .images .imageWrapper {