Ïntroduces embed mode

EzzalddeenAli · Aug 27, 2020 · 2252dc3 · 2252dc3
1 parent 8ffe516
commit 2252dc3
Show file tree

Hide file tree

Showing 28 changed files with 154 additions and 53 deletions.
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>OpenRouteService - directions and places</title><link rel="shortcut icon" type=image/x-icon href=static/img/favicon.ico><link rel=stylesheet type=text/css href=static/css/font-roboto.css><link rel=stylesheet type=text/css href=static/css/font-raleway.css><link rel=stylesheet type=text/css href=static/css/font-open-sans.css><link rel=stylesheet type=text/css href=static/css/animate.min.css><link rel=stylesheet type=text/css href=static/css/material-icons.css><link href=static/css/vendor.0ca97d2af6e3b0e169e3.css rel=stylesheet><link href=static/css/app.0ca97d2af6e3b0e169e3.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/runtime.089bd630b1d23b8dc0aa.js></script><script type=text/javascript src=static/js/vendor.b9e363add8083dee8a33.js></script><script type=text/javascript src=static/js/app.ef798b70e29037bdcff2.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>OpenRouteService - directions and places</title><link rel="shortcut icon" type=image/x-icon href=static/img/favicon.ico><link rel=stylesheet type=text/css href=static/css/font-roboto.css><link rel=stylesheet type=text/css href=static/css/font-raleway.css><link rel=stylesheet type=text/css href=static/css/font-open-sans.css><link rel=stylesheet type=text/css href=static/css/animate.min.css><link rel=stylesheet type=text/css href=static/css/material-icons.css><link href=static/css/vendor.68b4e3a6091a15095799.css rel=stylesheet><link href=static/css/app.68b4e3a6091a15095799.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/runtime.089bd630b1d23b8dc0aa.js></script><script type=text/javascript src=static/js/vendor.b5fdfd3296a75ed5e238.js></script><script type=text/javascript src=static/js/app.5fdbf386638301cc09d3.js></script></body></html>
diff --git a/src/common/vue-with-vuetify.js b/src/common/vue-with-vuetify.js
@@ -19,6 +19,7 @@ import {
   VSubheader,
   VForm,
   VTextField,
+  VTextarea,
   VDialog,
   VCard,
   VJumbotron,
@@ -60,6 +61,7 @@ Vue.use(Vuetify, {
     VSubheader,
     VForm,
     VTextField,
+    VTextarea,
     VDialog,
     VCard,
     VJumbotron,

diff --git a/src/fragments/forms/map-form/components/share/Share.vue b/src/fragments/forms/map-form/components/share/Share.vue
@@ -11,14 +11,24 @@
               @click="copyUrl()" readonly
               v-model="shareUrl"
               :label="$t('share.share')" >
-              </v-text-field>
+            </v-text-field>
           </v-flex>
           <v-flex xs12 sm2 d-flex>
             <v-btn style="margin-top:11px" color="primary" :title="shortBtnTitle" @click="toggleShortUrl()">{{shortBtnTitle}}</v-btn>
-          </v-flex>
+          </v-flex>          
         </v-layout>
-
         <v-alert :value="true" type="info" > {{$t('share.copyUrlInfo')}}</v-alert>
+        <br><br>
+        <v-layout row wrap>
+          <v-flex xs12 sm12 d-flex>
+            <v-textarea auto-grow
+              @click="copyEmbed()" readonly
+              v-model="embedCode"
+              :label="$t('share.embed')" >
+            </v-textarea>
+          </v-flex>
+        </v-layout>
+        <v-alert :value="true" type="info" > {{$t('share.useThiscodeToEmbedorsMapsInyourWebsite')}}</v-alert>
       </box>
     </v-dialog>
   </div>

diff --git a/src/fragments/forms/map-form/components/share/i18n/share.i18n.en.js b/src/fragments/forms/map-form/components/share/i18n/share.i18n.en.js
@@ -10,6 +10,9 @@ export default {
     short: 'Short url',
     copyUrlInfo: 'You can also copy the link from your browser`s address bar.',
     urlShortened: 'Url shortened',
-    shorteningNotPossible: 'It was not possible to generate a short url. Please use the full Url'
+    shorteningNotPossible: 'It was not possible to generate a short url. Please use the full Url',
+    embedCodeCopied: 'Embeding code copied',
+    embed: 'Embeding (click to copy)',
+    useThiscodeToEmbedorsMapsInyourWebsite: 'Use this code to embed ORS map in your website'
   }
 }
diff --git a/src/fragments/forms/map-form/components/share/share.js b/src/fragments/forms/map-form/components/share/share.js
@@ -15,6 +15,10 @@ export default {
     currentUrl () {
       return location.href
     },
+    embedCode () {
+      let code = `<iframe src="${this.currentUrl}/embed/${this.$store.getters.mapSettings.locale}"></iframe>`
+      return code
+    },
     shortBtnTitle () {
       const label = this.isShortened ? this.$t('share.fullUrl') : this.$t('share.shortUrl')
       return label
@@ -49,6 +53,16 @@ export default {
         this.showSuccess(this.$t('share.urlCopied'), { timeout: 2000 })
       }
     },
+    /**
+     * Copy the current url to clipboard
+     *
+     */
+    copyEmbed () {
+      const url = this.embedCode ? this.shareUrl : this.currentUrl
+      if (this.copyToClipboard(this.embedCode)) {
+        this.showSuccess(this.$t('share.embedCodeCopied'), { timeout: 2000 })
+      }
+    },
     /**
      * Copy the string to chipboard by creating a temporary textarea element
      *

diff --git a/src/fragments/header/Header.vue b/src/fragments/header/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-toolbar :class="{'hidden': !$store.getters.topBarOpen}" class="ors-toolbar app-toolbar" height="93" app
+    <v-toolbar v-if="!$store.getters.embed" :class="{'hidden': !$store.getters.topBarOpen}" class="ors-toolbar app-toolbar" height="93" app
       :clipped-left="clipped" v-click-outside="hideTopBar">
       <v-btn slot="defaukt" icon @click.stop="toggleSidebar" class="hidden-md-and-up">
         <v-icon>menu</v-icon>
@@ -16,10 +16,10 @@
       </v-toolbar-items>
       <v-spacer></v-spacer>
     </v-toolbar>
-    <v-icon large v-if="$store.getters.topBarOpen" class="toggle-top-bar"
+    <v-icon large v-if="$store.getters.topBarOpen && !$store.getters.embed" class="toggle-top-bar"
       :class="{'hidden': !$store.getters.topBarOpen}" @click.stop="toggleTopBar" :title="'Hidde menu bar'">
       keyboard_arrow_up</v-icon>
-    <v-icon large v-else-if="$highResolution" class="toggle-top-bar" :class="{'hidden': !$store.getters.topBarOpen}"
+    <v-icon large v-else-if="$highResolution && !$store.getters.embed" class="toggle-top-bar" :class="{'hidden': !$store.getters.topBarOpen}"
       @click.stop="toggleTopBar" :title="'Show menu bar'">keyboard_arrow_down</v-icon>
   </div>
 </template>

diff --git a/src/fragments/map-view/MapView.vue b/src/fragments/map-view/MapView.vue
@@ -112,12 +112,12 @@
 
     <img class="over-brand" v-if="showBrand" src="@/assets/img/heigit-and-hd-uni.png" :alt="$t('global.brand')" :title="$t('global.brand')">
 
-    <my-location :active="myLocationActive" @updateLocation="updateMyLocation"></my-location>
-
-    <!-- <v-btn v-else small fab class="my-location-btn" @click="setLocationFromBrowser()" :title="$t('mapView.showCurrentLocation')"><v-icon large color="dark" >person_pin_circle</v-icon> </v-btn> -->
     <v-btn fab small v-if="canFitFeatures && showControls" :title="$t('mapView.fitAllFeatures')" class="fit-all-features" @click="fitAllFeatures()" > <v-icon large >all_out</v-icon> </v-btn>
 
-    <map-right-click :map-view-data="mapViewData" @closed="clickLatlng = null" @rightClickEvent="handleRightClickEvent"></map-right-click>
+    <v-btn v-if="$store.getters.embed" small :title="$t('mapView.viewOnORS')" class="view-on-ors" target="_blank" :href="nonEmbedUrl" > {{$t('mapView.viewOnORS')}} <v-icon right small >aspect_ratio</v-icon> </v-btn>
+    <my-location v-else :active="myLocationActive" @updateLocation="updateMyLocation"></my-location>
+
+    <map-right-click v-if="!$store.getters.embed" :map-view-data="mapViewData" @closed="clickLatlng = null" @rightClickEvent="handleRightClickEvent"></map-right-click>
     <map-left-click :current-zoom="zoom" @closed="clickLatlng = null" ></map-left-click>
   </div>
 </template>

diff --git a/src/fragments/map-view/i18n/map-view.i18n.en.js b/src/fragments/map-view/i18n/map-view.i18n.en.js
@@ -70,6 +70,7 @@ export default {
     setMyLocationasMapCenter: 'Do you want to center the map at your current location? This will improve place search precision. You will have to authorize it if prompted.',
     youCanReverseTheNeverInSettigns: 'You can reverse the "don`t ask my location" at any time in settings',
     mapCenterWillBeAtAGenericLocation: 'Based on your settings the map is centered at a generic location. The search results consider the map center.',
-    removePlace: 'Remove place'
+    removePlace: 'Remove place',
+    viewOnORS: 'View on ORS'
   }
 }
diff --git a/src/fragments/map-view/map-view.css b/src/fragments/map-view/map-view.css
@@ -42,3 +42,14 @@
   border-radius: 3px;
   border: 2px solid rgba(0,0,0,0.2);
 }
+
+.view-on-ors {
+  position: absolute !important;
+  bottom: 40px;
+  right: 2px;
+  z-index: 2;
+  background: white !important;
+  color: black;
+  border-radius: 3px;
+  text-transform: initial !important;
+}
diff --git a/src/fragments/map-view/map-view.js b/src/fragments/map-view/map-view.js
@@ -150,6 +150,10 @@ export default {
     }
   },
   computed: {
+    nonEmbedUrl() {
+      let url = location.href.split('/embed')[0]
+      return url
+    },
     zoom () {
       const zoom = this.zoomLevel > 0 ? this.zoomLevel : this.maxZoom
       return zoom
@@ -1047,17 +1051,19 @@ export default {
      * udebouncing them
      */
     setDrawingTool () {
-      if (this.setDrawingTimeout) {
-        clearTimeout(this.setDrawingTimeout)
-      }
-
-      // If the map object is already defined, go ahead
-      if (this.$refs.map && this.$refs.map.mapObject) {
-        this.setAvoidPolygonDrawingTool()
-      } else { // if not, wait a second and execute it again
-        this.setDrawingTimeout = setTimeout(() => {
-          this.setDrawingTool()
-        }, 1000)
+      if (!this.$store.getters.embed) {
+        if (this.setDrawingTimeout) {
+          clearTimeout(this.setDrawingTimeout)
+        }
+
+        // If the map object is already defined, go ahead
+        if (this.$refs.map && this.$refs.map.mapObject) {
+          this.setAvoidPolygonDrawingTool()
+        } else { // if not, wait a second and execute it again
+          this.setDrawingTimeout = setTimeout(() => {
+            this.setDrawingTool()
+          }, 1000)
+        }
       }
     },
     /**

diff --git a/src/fragments/sidebar/Sidebar.vue b/src/fragments/sidebar/Sidebar.vue
@@ -52,7 +52,7 @@
       :title="$t('sidebar.hideSidebar')">keyboard_arrow_left
     </v-icon>
 
-    <v-icon large v-else-if="!isSideBarOpen && !$lowResolution" class="toggle-sidebar" :class="{'hidden': !isSideBarOpen}" @click.stop="isSideBarOpen = true"
+    <v-icon large v-else-if="!isSideBarOpen && !$lowResolution && !$store.getters.embed" class="toggle-sidebar" :class="{'hidden': !isSideBarOpen}" @click.stop="isSideBarOpen = true"
       :title="$t('sidebar.showSidebar')">keyboard_arrow_right
     </v-icon>
 

diff --git a/src/pages/maps/Maps.vue b/src/pages/maps/Maps.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="maps" :style="{height: viewHeight + 'px'}">
     <resize-observer @notify="setViewHeight()" />
-    <simple-place-search :height="simpleMapSearcHeight" v-if="$store.getters.mapReady && !$store.getters.isSidebarVisible"></simple-place-search>
+    <simple-place-search :height="simpleMapSearcHeight" v-if="simpleSearchIsVisible"></simple-place-search>
     <v-btn round v-if="refreshSearchAvailable"
       :style="{top: mapHeight - 50 + 'px !important'}"
       :title="$t('maps.updateSearchAfterZoomOrCenterChange')"
@@ -33,7 +33,7 @@
       @markerClicked="markerClicked">
     </map-view>
 
-    <v-bottom-nav v-if="showBottomNav" :style="{height: bottomNavHeight + 'px !important', top: bottomNavTop + 'px !important'}" class="places-nav" absolute color="white" >
+    <v-bottom-nav v-if="showBottomNav && !$store.getters.embed" :style="{height: bottomNavHeight + 'px !important', top: bottomNavTop + 'px !important'}" class="places-nav" absolute color="white" >
       <places-carousel
         :active-index="activeplaceIndex"
         :map-view-data="mapViewData"

diff --git a/src/pages/maps/maps.js b/src/pages/maps/maps.js
@@ -41,6 +41,10 @@ export default {
     ResizeObserver
   },
   computed: {
+    simpleSearchIsVisible () {
+      let isVisible = !this.$store.getters.embed && this.$store.getters.mapReady && !this.$store.getters.isSidebarVisible
+      return isVisible
+    },
     mapHeight () {
       let height = this.viewHeight
       if (this.showBottomNav) {

diff --git a/src/pages/maps/maps.route.js b/src/pages/maps/maps.route.js
@@ -9,6 +9,13 @@ const placePath = RoutesResolver.place()
 const directionsPath = RoutesResolver.directions()
 const searchPath = RoutesResolver.search()
 const isochronesPath = RoutesResolver.isochronesPath()
+const embedParameters = '/:embed?/:locale?'
+
+// Build the optional placesNames Path
+var optionalplaceNamesPath = ''
+for (let index = 2; index <= 15; index++) {
+  optionalplaceNamesPath += `/:placeName${index}?`  
+}
 
 export default [
   {
@@ -35,41 +42,49 @@ export default [
     }
   },
   {
-    path: `${placePath}:placeName/@:coordinates/data/:data`,
+    path: `${placePath}:placeName/@:coordinates/data/:data${embedParameters}`,
     name: 'MapPlace',
     component: Maps,
     beforeEnter: (to, from, next) => {
       store.commit('mode', constants.modes.place)
-      next()
+      store.dispatch('checkAndSetEmbedState', to).then(() => {
+        next()
+      })
     }
   },
   {
     // The maximum number of places/points of a route is 15. so, we can have 15 places more the data parameter that contains the coordinates for all the palces in que query encoded in base64 format
     // The minimum is one (becaue of round trip needs only one place)
-    path: `${directionsPath}:placeName1/:placeName2?/:placeName3?/:placeName4?/:placeName5?/:placeName6?/:placeName7?/:placeName8?/:placeName9?/:placeName10?/:placeName11?/:placeName12?/:placeName13?/:placeName14?/:placeName15?/data/:data`,
+    path: `${directionsPath}:placeName1${optionalplaceNamesPath}/data/:data${embedParameters}`,
     name: 'MapDirections',
     component: Maps,
     beforeEnter: (to, from, next) => {
       RouteUtils.setDirectionsModeBasedOnRoute(to)
-      next()
+      store.dispatch('checkAndSetEmbedState', to).then(() => {
+        next()
+      })
     }
   },
   {
-    path: `${searchPath}:term/@:center`,
+    path: `${searchPath}:term/@:center${embedParameters}`,
     name: 'MapSearch',
     component: Maps,
     beforeEnter: (to, from, next) => {
       store.commit('mode', constants.modes.search)
-      next()
+      store.dispatch('checkAndSetEmbedState', to).then(() => {
+        next()
+      })
     }
   },
   {
-    path: `${isochronesPath}:placeName1/:placeName2?/:placeName3?/:placeName4?/:placeName5?/:placeName6?/:placeName7?/:placeName8?/:placeName9?/:placeName10?/:placeName11?/:placeName12?/:placeName13?/:placeName14?/:placeName15?/data/:data`,
+    path: `${isochronesPath}:placeName1${optionalplaceNamesPath}/data/:data${embedParameters}`,
     name: 'MapIsochrones',
     component: Maps,
     beforeEnter: (to, from, next) => {
       store.commit('mode', constants.modes.isochrones)
-      next()
+      store.dispatch('checkAndSetEmbedState', to).then(() => {
+        next()
+      })
     }
   },
   {

diff --git a/src/router/index.js b/src/router/index.js
@@ -17,7 +17,7 @@ const router = new Router({
 
 router.beforeEach((to, from, next) => {
   if (!store.getters.dataAcquired) {
-    store.dispatch('fetchApiInitialData').then(() => {
+    store.dispatch('setAppState', to).then(() => {
       next()
     })
   } else {

diff --git a/src/store/modules/app-state.js b/src/store/modules/app-state.js
@@ -3,12 +3,15 @@ import defaultMapSettings from '@/resources/default-map-settings'
 import appConfig from '@/config'
 import utils from '@/support/utils'
 import constants from '@/resources/constants'
+import settingsOptions from '@/resources/settings-options.js'
+import lodash from 'lodash'
 
 const state = {
   mode: constants.modes.place,
   apiDataRequested: false,
   dataAcquired: false,
-  mapSettings: {}
+  mapSettings: {},
+  embed: false
 }
 
 const getters = {
@@ -23,6 +26,9 @@ const getters = {
   },
   mapSettings: state => {
     return state.mapSettings
+  },
+  embed: state => {
+    return state.embed
   }
 }
 
@@ -38,10 +44,16 @@ const mutations = {
   },
   mapSettings: (state, mapSettings) => {
     state.mapSettings = mapSettings
+  },
+  embed: (state, embed) => {
+    state.embed = embed
   }
 }
 
 const actions = {
+  setAppState ( {getters, commit }) {
+    return actions.fetchApiInitialData({getters, commit })
+  },
   fetchApiInitialData ({ getters, commit }) {
     return new Promise((resolve) => {
       // If the data was already acquired
@@ -76,7 +88,31 @@ const actions = {
         }
       }
     })
-  }
+  },
+  /**
+   * check if the embed is in the url params and set the embed state
+   * @param {*} getters 
+   * @param {*} commit 
+   * @param {*} to 
+   */
+  checkAndSetEmbedState ({getters, commit}, routeTo) {
+    return new Promise((resolve) => {
+      let isEmbed = routeTo.params.embed === 'embed' || routeTo.params.embed === '1'
+      commit('embed', isEmbed)
+
+      if (isEmbed && routeTo.params.locale ) {
+        let validLocales = settingsOptions.appLocales
+        let localeSupported = lodash.find(validLocales, ['value', routeTo.params.locale])
+
+        if (lodash.isObject(localeSupported)) {
+          let settings = getters.mapSettings
+          settings.locale = routeTo.params.locale
+          commit('mapSettings', settings)      
+        }
+      }
+      resolve(isEmbed)
+    })
+  } 
 }
 
 /**
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>OpenRouteService - directions and places</title><link rel="shortcut icon" type=image/x-icon href=static/img/favicon.ico><link rel=stylesheet type=text/css href=static/css/font-roboto.css><link rel=stylesheet type=text/css href=static/css/font-raleway.css><link rel=stylesheet type=text/css href=static/css/font-open-sans.css><link rel=stylesheet type=text/css href=static/css/animate.min.css><link rel=stylesheet type=text/css href=static/css/material-icons.css><link href=static/css/vendor.0ca97d2af6e3b0e169e3.css rel=stylesheet><link href=static/css/app.0ca97d2af6e3b0e169e3.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/runtime.089bd630b1d23b8dc0aa.js></script><script type=text/javascript src=static/js/vendor.b9e363add8083dee8a33.js></script><script type=text/javascript src=static/js/app.ef798b70e29037bdcff2.js></script></body></html>
		<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>OpenRouteService - directions and places</title><link rel="shortcut icon" type=image/x-icon href=static/img/favicon.ico><link rel=stylesheet type=text/css href=static/css/font-roboto.css><link rel=stylesheet type=text/css href=static/css/font-raleway.css><link rel=stylesheet type=text/css href=static/css/font-open-sans.css><link rel=stylesheet type=text/css href=static/css/animate.min.css><link rel=stylesheet type=text/css href=static/css/material-icons.css><link href=static/css/vendor.68b4e3a6091a15095799.css rel=stylesheet><link href=static/css/app.68b4e3a6091a15095799.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/runtime.089bd630b1d23b8dc0aa.js></script><script type=text/javascript src=static/js/vendor.b5fdfd3296a75ed5e238.js></script><script type=text/javascript src=static/js/app.5fdbf386638301cc09d3.js></script></body></html>