Mercurial > gemma
changeset 3166:286c2e3cc105
client: moved Zoom component to map subdirectory
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 06 May 2019 14:29:02 +0200 |
parents | 891705431545 |
children | 85734c763652 |
files | client/src/components/Zoom.vue client/src/components/map/Map.vue client/src/components/map/Zoom.vue |
diffstat | 3 files changed, 94 insertions(+), 94 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Zoom.vue Mon May 06 14:27:54 2019 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,93 +0,0 @@ -<template> - <div class="zoom-buttons shadow-xs"> - <button - class="zoom-button border-0 bg-white rounded-left ui-element" - @click="zoomOut" - > - <font-awesome-icon icon="minus" /> - </button> - <button - class="zoom-button border-0 bg-white ui-element border-right" - @click="refreshMap" - > - <font-awesome-icon icon="sync" /> - </button> - <button - class="zoom-button border-0 bg-white rounded-right ui-element border-right" - @click="zoomIn" - > - <font-awesome-icon icon="plus" /> - </button> - </div> -</template> - -<style lang="sass"> -.zoom-buttons - position: absolute - z-index: 1 - bottom: $small-offset - left: 50% - margin-left: -($icon-width * 1.5) - margin-bottom: 0 - transition: margin-bottom 0.3s - - .zoom-button - min-height: $icon-width - min-width: $icon-width - z-index: 1 - outline: none - color: #666 -</style> - -<script> -/* This is Free Software under GNU Affero General Public License v >= 3.0 - * without warranty, see README.md and license for details. - * - * SPDX-License-Identifier: AGPL-3.0-or-later - * License-Filename: LICENSES/AGPL-3.0.txt - * - * Copyright (C) 2018 by via donau - * – Österreichische Wasserstraßen-Gesellschaft mbH - * Software engineering by Intevation GmbH - * - * Author(s): - * Markus Kottländer <markus@intevation.de> - * Thomas Junk <thomas.junk@intevation.de> - */ -import { Vector as VectorLayer } from "ol/layer"; - -export default { - props: ["map"], - computed: { - zoomLevel: { - get() { - return this.map.getView().getZoom(); - }, - set(value) { - this.map.getView().animate({ zoom: value, duration: 300 }); - } - } - }, - methods: { - zoomIn() { - this.zoomLevel = this.zoomLevel + 1; - }, - zoomOut() { - this.zoomLevel = this.zoomLevel - 1; - }, - refreshMap() { - let layers = this.map.getLayers().getArray(); - for (let i = 0; i < layers.length; i++) { - let layer = layers[i]; - if ( - layer instanceof VectorLayer && - layer.get("source").loader_.name != "VOID" - ) { - layer.getSource().clear(true); - layer.getSource().refresh({ force: true }); - } - } - } - } -}; -</script>
--- a/client/src/components/map/Map.vue Mon May 06 14:27:54 2019 +0200 +++ b/client/src/components/map/Map.vue Mon May 06 14:29:02 2019 +0200 @@ -50,7 +50,7 @@ export default { mixins: [pane], components: { - Zoom: () => import("@/components/Zoom") + Zoom: () => import("@/components/map/Zoom") }, data() { return {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/map/Zoom.vue Mon May 06 14:29:02 2019 +0200 @@ -0,0 +1,93 @@ +<template> + <div class="zoom-buttons shadow-xs"> + <button + class="zoom-button border-0 bg-white rounded-left ui-element" + @click="zoomOut" + > + <font-awesome-icon icon="minus" /> + </button> + <button + class="zoom-button border-0 bg-white ui-element border-right" + @click="refreshMap" + > + <font-awesome-icon icon="sync" /> + </button> + <button + class="zoom-button border-0 bg-white rounded-right ui-element border-right" + @click="zoomIn" + > + <font-awesome-icon icon="plus" /> + </button> + </div> +</template> + +<style lang="sass"> +.zoom-buttons + position: absolute + z-index: 1 + bottom: $small-offset + left: 50% + margin-left: -($icon-width * 1.5) + margin-bottom: 0 + transition: margin-bottom 0.3s + + .zoom-button + min-height: $icon-width + min-width: $icon-width + z-index: 1 + outline: none + color: #666 +</style> + +<script> +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Markus Kottländer <markus@intevation.de> + * Thomas Junk <thomas.junk@intevation.de> + */ +import { Vector as VectorLayer } from "ol/layer"; + +export default { + props: ["map"], + computed: { + zoomLevel: { + get() { + return this.map.getView().getZoom(); + }, + set(value) { + this.map.getView().animate({ zoom: value, duration: 300 }); + } + } + }, + methods: { + zoomIn() { + this.zoomLevel = this.zoomLevel + 1; + }, + zoomOut() { + this.zoomLevel = this.zoomLevel - 1; + }, + refreshMap() { + let layers = this.map.getLayers().getArray(); + for (let i = 0; i < layers.length; i++) { + let layer = layers[i]; + if ( + layer instanceof VectorLayer && + layer.get("source").loader_.name != "VOID" + ) { + layer.getSource().clear(true); + layer.getSource().refresh({ force: true }); + } + } + } + } +}; +</script>