From 6ebd62a71ef1861c88983eab3c5d02d15e05fedc Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Thu, 13 Sep 2018 21:08:25 +0200 Subject: [PATCH] add map controls --- package.json | 3 ++- resources/components/popper.html | 5 ++++- resources/components/stop-details.html | 8 ++++++++ resources/components/stop.html | 11 ++++++++++- resources/styles/_popper.scss | 5 +++-- resources/ts/app.ts | 2 ++ resources/ts/components/index.ts | 3 ++- resources/ts/components/map.ts | 19 +++++++++++++++++++ resources/ts/components/stop.ts | 1 + resources/ts/components/utils.ts | 5 ++++- resources/ts/types/webpack.d.ts | 2 ++ yarn.lock | 10 ++++++++++ 12 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 resources/ts/components/map.ts diff --git a/package.json b/package.json index 0931b14..487c3e2 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "xpath": "^0.0.27" }, "dependencies": { - "mini-css-extract-plugin": "^0.4.2" + "mini-css-extract-plugin": "^0.4.2", + "vue2-leaflet": "^1.0.2" } } diff --git a/resources/components/popper.html b/resources/components/popper.html index 8812778..133678d 100644 --- a/resources/components/popper.html +++ b/resources/components/popper.html @@ -1,4 +1,7 @@
- + + + +
\ No newline at end of file diff --git a/resources/components/stop-details.html b/resources/components/stop-details.html index 1a4e689..aa2a531 100644 --- a/resources/components/stop-details.html +++ b/resources/components/stop-details.html @@ -14,6 +14,14 @@ + + Na mapie: +
+ + + + +
diff --git a/resources/components/stop.html b/resources/components/stop.html index c0c0cb9..0345d38 100644 --- a/resources/components/stop.html +++ b/resources/components/stop.html @@ -10,7 +10,7 @@ - @@ -19,4 +19,13 @@ + + +
+ + + + +
+
\ No newline at end of file diff --git a/resources/styles/_popper.scss b/resources/styles/_popper.scss index 0ef1ad0..597c344 100644 --- a/resources/styles/_popper.scss +++ b/resources/styles/_popper.scss @@ -59,13 +59,14 @@ $arrow-color: white; $arrow-border: black; - $popper-padding: .5rem; + $popper-padding: 2px; padding: $popper-padding; background: white; border: 1px solid black; z-index: 1000; position: relative; + box-sizing: content-box; max-width: 500px; min-width: 200px; @@ -86,7 +87,7 @@ bottom: top ); - &[x-placement^="#{$placement}"] { + &[x-placement*="#{$placement}"] { margin-#{map-get($opposite, $placement)}: $arrow-base; .popper-arrow { diff --git a/resources/ts/app.ts b/resources/ts/app.ts index d1989d0..9617a57 100644 --- a/resources/ts/app.ts +++ b/resources/ts/app.ts @@ -5,6 +5,8 @@ import '../styles/main.scss' import './font-awesome' import './filters' +import "leaflet/dist/leaflet.css"; + import Popper from 'popper.js'; import * as $ from "jquery"; diff --git a/resources/ts/components/index.ts b/resources/ts/components/index.ts index b749140..1bafc2c 100644 --- a/resources/ts/components/index.ts +++ b/resources/ts/components/index.ts @@ -2,4 +2,5 @@ export * from './utils' export * from './picker' export * from './departures' export * from './stop' -export * from './messages' \ No newline at end of file +export * from './messages' +export * from './map' diff --git a/resources/ts/components/map.ts b/resources/ts/components/map.ts new file mode 100644 index 0000000..7ac34f9 --- /dev/null +++ b/resources/ts/components/map.ts @@ -0,0 +1,19 @@ +import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'; +import Vue from 'vue'; + +import L = require('leaflet') +import 'leaflet/dist/leaflet.css' + +import iconRetinaUrl = require('leaflet/dist/images/marker-icon-2x.png'); +import iconUrl = require('leaflet/dist/images/marker-icon.png'); +import shadowUrl = require('leaflet/dist/images/marker-shadow.png'); + +delete L.Icon.Default.prototype._getIconUrl; + +L.Icon.Default.mergeOptions({ iconRetinaUrl, iconUrl, shadowUrl }); + +Vue.component('LMap', LMap); +Vue.component('LTileLayer', LTileLayer); +Vue.component('LMarker', LMarker); + +export { LMap, LTileLayer, LMarker } from 'vue2-leaflet'; diff --git a/resources/ts/components/stop.ts b/resources/ts/components/stop.ts index 75e3433..8bbb178 100644 --- a/resources/ts/components/stop.ts +++ b/resources/ts/components/stop.ts @@ -44,6 +44,7 @@ export class StopComponent extends Vue { public stop: Stop; details: boolean = false; + map: boolean = false; } Vue.component('Stop', StopComponent); diff --git a/resources/ts/components/utils.ts b/resources/ts/components/utils.ts index 287206c..b53318b 100644 --- a/resources/ts/components/utils.ts +++ b/resources/ts/components/utils.ts @@ -1,7 +1,6 @@ import Vue from 'vue'; import { Component, Prop, Watch } from "vue-property-decorator"; import Popper, { Placement } from "popper.js"; -import * as $ from 'jquery'; import popper = require("../../components/popper.html"); import lazy = require("../../components/lazy.html"); @@ -21,6 +20,9 @@ export class PopperComponent extends Vue { @Prop({ type: Boolean, default: false }) public visible: boolean; + @Prop(Boolean) + public lazy: boolean; + private _popper; mounted() { @@ -37,6 +39,7 @@ export class PopperComponent extends Vue { @Watch('visible') private onVisibilityUpdate() { this._popper.update(); + window.dispatchEvent(new Event('resize')); } } diff --git a/resources/ts/types/webpack.d.ts b/resources/ts/types/webpack.d.ts index 3d249b2..d20b9fc 100644 --- a/resources/ts/types/webpack.d.ts +++ b/resources/ts/types/webpack.d.ts @@ -7,3 +7,5 @@ declare module "*.svg" { const content: string; export = content; } + +declare module "*.png" {} diff --git a/yarn.lock b/yarn.lock index 995e125..a816e13 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1783,6 +1783,10 @@ lcid@^1.0.0: dependencies: invert-kv "^1.0.0" +leaflet@^1.3.1: + version "1.3.4" + resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.4.tgz#7f006ea5832603b53d7269ef5c595fd773060a40" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" @@ -3423,6 +3427,12 @@ vue-property-decorator@^7.0.0: dependencies: vue-class-component "^6.2.0" +vue2-leaflet@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.0.2.tgz#73e0c09a30015db9a8dc0e9256443afb180d1fd5" + dependencies: + leaflet "^1.3.1" + vue@^2.5.17: version "2.5.17" resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"