#107 popover on context menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "geop",
-  "version": "1.5.11",
+  "version": "1.6.0",
   "description": "Estonian geocaching game",
   "main": "index.js",
   "scripts": {

src/geop/components/bookmark/Bookmark.js

@@ -9,7 +9,8 @@ import log from 'Utilities/log'
 import { reloadApp } from 'Root'
 import JSONP from 'jsonpack'
 import QRious from 'qrious'
-import Modal from 'bootstrap.native'
+import Modal from 'bootstrap.native/src/components/modal-native'
+import Dropdown from 'bootstrap.native/src/components/dropdown-native'
 import './Bookmark.styl'
 
 const xhr = fetch()
@@ -22,6 +23,7 @@ class Bookmark extends Component {
         id="modal_bookmark">
       </div>`)
     this.modal = null
+    this.dropdown = null
     this.state = {
       bookmarks: getState('app/bookmarks') || [],
       bookmark: getPermalink('b')
@@ -79,6 +81,7 @@ class Bookmark extends Component {
         this.delete(e.currentTarget.closest('li').dataset.id)
       })
     })
+    this.dropdown = new Dropdown(this.$.get('.dropdown-toggle', this.el))
   }
 
   renderComponents () {
@@ -185,7 +188,6 @@ class Bookmark extends Component {
       size: 200
     })
     qr.value = this.bookmarkUrl(bookmark)
-    console.log(Modal)
     this.modal = new Modal(this.modalEl)
     this.modal.show()
   }
@@ -239,7 +241,6 @@ function formatState (type = 'down', data = {}, hash = null) {
 }
 
 function setBookmarkState (data) {
-  console.log(data)
   return new Promise((resolve, reject) => {
     const hash = uid()
     xhr.post(apiUrls.jsonstore + '/' + hash, {

src/geop/components/contextmenu/ContextMenu.js

@@ -4,6 +4,7 @@ import { closestFeatureTo } from 'Components/map/MapEngine'
 import Overlay from 'ol/Overlay'
 import Point from 'ol/geom/Point'
 import Popper from 'popper.js'
+import Popover from 'bootstrap.native/src/components/popover-native'
 import './ContextMenu.styl'
 
 class ContextMenu extends Component {
@@ -24,7 +25,8 @@ class ContextMenu extends Component {
       }),
       items: items,
       timeout: null,
-      disableClick: false
+      disableClick: false,
+      popover: null
     }
     const map = getState('map')
     if (map) {
@@ -43,8 +45,9 @@ class ContextMenu extends Component {
       if (e.originalEvent.ctrlKey || this.state.disableClick) {
         return
       }
-      // FIXME
-      this.el.popover('dispose')
+      if (this.popover) {
+        this.popover.dispose()
+      }
     })
     this.$.on('contextmenu', map.getViewport(), e => {
       e.preventDefault()
@@ -64,20 +67,22 @@ class ContextMenu extends Component {
     // FIXME
     Popper.Defaults.modifiers.preventOverflow.enabled = false
     Popper.Defaults.modifiers.hide.enabled = false
-    this.el.popover('dispose')
+    if (this.popover) {
+      this.popover.dispose()
+    }
     this.state.overlay.setPosition(coord)
-    this.el.popover(popContent.definition)
+    this.popover = new Popover(this.el, popContent.definition)
     // when popover's content is shown
-    this.el.on('shown.bs.popover', e => {
-      popContent.onShow(e.target.data('bs.popover').tip)
+    this.$.on('shown.bs.popover', this.el, e => {
+      popContent.onShow(e.target.Popover.element.childNodes[0])
     })
     // when popover's content is hidden
-    this.el.on('hidden.bs.popover', () => {
+    this.$.on('hidden.bs.popover', this.el, e => {
       popContent.onHide()
       Popper.Defaults.modifiers.preventOverflow.enabled = true
       Popper.Defaults.modifiers.hide.enabled = true
     })
-    this.el.popover('show')
+    this.popover.show()
   }
 
   getContent (coord, feature) {

src/geop/components/geocache/GeocacheGPX.js

@@ -10,10 +10,12 @@ export default {
       const wpt = feature.get('wpt')
       // format always
       if (feature.get('isCache')) {
+        // fstatus
+        let fstatus = feature.get('sym')
         if (opts.user && opts.user === feature.get('owner')) {
-          const fstatus = 'Geocache Owner'
-          feature.set('fstatus', opts.mapping.fstatusGPX[fstatus] || fstatus)
+          fstatus = 'Geocache Owner'
         }
+        feature.set('fstatus', opts.mapping.fstatusGPX[fstatus] || fstatus)
       }
       if (typeof feature.get('isCache') === 'undefined' && wpt['groundspeak:cache']) {
         const cacheData = {}

src/geop/components/geolocation/GeoLocation.js

@@ -45,44 +45,42 @@ class GeoLocation extends Component {
       lastHeading: null,
       minAccuracy: 100,
       pressStart: null,
-      pressTimer: null,
-      eventHandlers: {
-        down: e => {
-          e.preventDefault()
-          this.state.pressStart = new Date().getTime()
-          this.state.pressTimer = setTimeout(() => {
-            this.disable()
-            e.currentTarget.classList.remove(...this.state.status)
-          }, longPress)
-        },
-        up: e => {
-          e.preventDefault()
-          if (new Date().getTime() < (this.state.pressStart + longPress)) {
-            clearTimeout(this.state.pressTimer)
-            this.state.active = (this.state.active + 1 >= this.state.status.length)
-              ? 0 : this.state.active + 1
-            if (this.state.active === 0) {
-              this.disable()
-              e.currentTarget.classList.remove(...this.state.status)
-            } else {
-              this.enable()
-              e.currentTarget.classList.add(this.state.status[this.state.active])
-            }
-          }
-        },
-        leave: e => {
-          e.preventDefault()
-          this.state.pressStart = 0
-          clearTimeout(this.state.pressTimer)
-        }
-      }
+      pressTimer: null
     }
     this.handlers = {
       updateView: e => {
         this.updateView(e)
       },
       disableTracking: e => {
         this.disableTracking()
+      },
+      down: e => {
+        e.preventDefault()
+        this.state.pressStart = new Date().getTime()
+        this.state.pressTimer = setTimeout(() => {
+          this.disable()
+          e.currentTarget.classList.remove(...this.state.status)
+        }, longPress)
+      },
+      up: e => {
+        e.preventDefault()
+        if (new Date().getTime() < (this.state.pressStart + longPress)) {
+          clearTimeout(this.state.pressTimer)
+          this.state.active = (this.state.active + 1 >= this.state.status.length)
+            ? 0 : this.state.active + 1
+          if (this.state.active === 0) {
+            this.disable()
+            e.currentTarget.classList.remove(...this.state.status)
+          } else {
+            this.enable()
+            e.currentTarget.classList.add(this.state.status[this.state.active])
+          }
+        }
+      },
+      leave: e => {
+        e.preventDefault()
+        this.state.pressStart = 0
+        clearTimeout(this.state.pressTimer)
       }
     }
     if (this.test()) {
@@ -100,11 +98,11 @@ class GeoLocation extends Component {
     this.$.on('contextmenu', this.el, e => {
       e.preventDefault()
     })
-    this.$.on('mousedown', this.el, e => this.eventHandlers.down(e))
-    this.$.on('touchstart', this.el, e => this.eventHandlers.down(e))
-    this.$.on('mouseup', this.el, e => this.eventHandlers.up(e))
-    this.$.on('touchend', this.el, e => this.eventHandlers.up(e))
-    this.$.on('mouseleave', this.el, e => this.eventHandlers.leave(e))
+    this.$.on('mousedown', this.el, e => this.handlers.down(e))
+    this.$.on('touchstart', this.el, e => this.handlers.down(e))
+    this.$.on('mouseup', this.el, e => this.handlers.up(e))
+    this.$.on('touchend', this.el, e => this.handlers.up(e))
+    this.$.on('mouseleave', this.el, e => this.handlers.leave(e))
   }
 
   test () {

src/geop/components/layer/LayerFromService.js

@@ -4,12 +4,14 @@ import { validURL, parseURL, constructURL, uid } from 'Utilities/util'
 import { getState } from 'Utilities/store'
 import log from 'Utilities/log'
 import Component from 'Geop/Component'
+import Modal from 'bootstrap.native/src/components/modal-native'
 import { createLayer } from './LayerCreator'
 
 class LayerFromService extends Component {
   create () {
     this.el = this.$.create('<li />')
-    this.modal = this.$.get('#modal_wmslayer')
+    this.modalEl = this.$.get('#modal_wmslayer')
+    this.modal = null
     this.isRow = true
     this.layer_conf = {
       TileWMS: {
@@ -42,19 +44,19 @@ class LayerFromService extends Component {
   }
 
   render () {
-    if (!this.modal || this.modal.length === 0) {
+    if (!this.modalEl) {
       const examples = Object.keys(apiUrls.wmsexamples).map(title => {
         return `<a href="${apiUrls.wmsexamples[title]}">
           ${title}
         </a>`
       })
-      this.modal = this.$.create(`<div class="modal fade"
+      this.modalEl = this.$.create(`<div class="modal fade"
         id="modal_wmslayer"
         tabindex="-1"
         role="dialog"
         aria-hidden="true">
       </div>`)
-      this.$.html(this.modal, `<div class="modal-dialog">
+      this.$.html(this.modalEl, `<div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">${t('Add WMS layer')}</h4>
@@ -91,17 +93,17 @@ class LayerFromService extends Component {
           </div>
         </div>
       </div>`)
-      this.$.on('click', this.$.get('button.confirm', this.modal), e => {
+      this.$.on('click', this.$.get('button.confirm', this.modalEl), e => {
         e.preventDefault()
-        if (this.$.get('textarea', this.modal).value.length < 10) {
+        if (this.$.get('textarea', this.modalEl).value.length < 10) {
           return
         }
-        const groupId = this.$.get('input[name=group]:checked', this.modal).value
+        const groupId = this.$.get('input[name=group]:checked', this.modalEl).value
         const group = getState('map/layer/' + groupId)
         let idx = group.getLength()
         // edit
-        const idField = this.$.get('input[name=id]', this.modal)
-        const textarea = this.$.get('textarea', this.modal)
+        const idField = this.$.get('input[name=id]', this.modalEl)
+        const textarea = this.$.get('textarea', this.modalEl)
         if (idField.value.length) {
           // get old index
           const oldLayer = group.getArray()
@@ -117,15 +119,15 @@ class LayerFromService extends Component {
           group.insertAt(idx, layer)
           textarea.value = ''
           idField.value = ''
-          // FIXME
-          this.modal.modal('hide')
+          this.modal.hide()
         }
       })
-      this.$.on('click', this.$.get('.examples a', this.modal), e => {
+      this.$.on('click', this.$.get('.examples a', this.modalEl), e => {
         e.preventDefault()
-        this.$.get('textarea', this.modal).value = decodeURIComponent(e.target.href)
+        this.$.get('textarea', this.modalEl).value = decodeURIComponent(e.target.href)
       })
-      this.$.append(this.$.get('body'), this.modal)
+      this.$.append(this.$.get('body'), this.modalEl)
+      this.modal = new Modal(this.modalEl)
     }
     this.$.html(this.el, `
       <a href="#"
@@ -137,6 +139,10 @@ class LayerFromService extends Component {
         ${t('Add WMS layer')}
       </a>
     `)
+    this.$.on('click', this.$.get('#add-wms-layer', this.el), e => {
+      e.preventDefault()
+      this.openModal()
+    })
   }
 
   createLayer (url, isBase) {
@@ -227,6 +233,10 @@ class LayerFromService extends Component {
     }
     return false
   }
+
+  openModal () {
+    this.modal.show()
+  }
 }
 
 export default LayerFromService

src/geop/components/layer/LayerManager.js

@@ -14,6 +14,7 @@ import OSMEdit from 'Components/osmedit/OSMEdit'
 import LayerFromService from './LayerFromService'
 import UrlLayer from './UrlLayer'
 import Sortable from 'sortablejs'
+import Dropdown from 'bootstrap.native/src/components/dropdown-native'
 import './LayerManager.styl'
 
 class LayerManager extends Component {
@@ -56,6 +57,8 @@ class LayerManager extends Component {
       wms: LayerFromService,
       file: FileLayer
     }
+    this.modal = null
+    this.dropdown = null
     // register layer from url
     this.urlLayer = new UrlLayer()
     // listen permalink change
@@ -119,7 +122,7 @@ class LayerManager extends Component {
     this.renderComponents(ul)
     if (this.state.open) {
       // FIXME
-      this.el.find('button.toggle-btn').dropdown('toggle')
+      this.dropdown.toggle()
       this.state.open = false
     }
     this.$.get('.baselayer label', ul, true).forEach(el => {
@@ -187,7 +190,6 @@ class LayerManager extends Component {
         this.$.trigger('click', this.$.get('input[type=color]', e.currentTarget.closest('.color')))
       })
     })
-
     this.$.get('a.edit-layer', ul, true).forEach(el => {
       this.$.on('click', el, e => {
         e.preventDefault()
@@ -202,6 +204,7 @@ class LayerManager extends Component {
           this.$.get('textarea', target).value = url
           this.$.get('input[name=id]', target).value = data.id
           this.$.get(`input[type=radio][value=${data.group}]`, target).checked = true
+          this.components.wms.openModal()
         }
       })
     })
@@ -213,6 +216,7 @@ class LayerManager extends Component {
         this.reorderLayers(e)
       }
     })
+    this.dropdown = new Dropdown(this.$.get('.dropdown-toggle', this.el))
   }
 
   createComponents () {

src/geop/components/settings/Config.js

@@ -228,10 +228,10 @@ class Config extends Component {
       }
     })
     // routing
-    this.$.get('button.set-locale-btn', this.el, true).forEach(el => {
+    this.$.get('button.set-route-btn', this.el, true).forEach(el => {
       this.$.on('click', el, e => {
         setState('routing/infoFromRoute', e.currentTarget.dataset.share === 'on', true)
-        this.$.get('button.set-locale-btn', this.el, true).forEach(elem => {
+        this.$.get('button.set-route-btn', this.el, true).forEach(elem => {
           elem.classList.remove('active')
         })
         e.currentTarget.classList.add('active')

src/geop/utilities/fetch.js

@@ -35,7 +35,7 @@ class Fetch {
   }
 
   fetch (url, options = {}) {
-    url = this.formatURL(url, options)
+    url = this.formatUrl(url, options)
     this.abortController = new window.AbortController()
     options.signal = this.abortController.signal
     return new Promise((resolve, reject) => {