Cardinal Direction Input

README.md

Cardinal Direction Input

A Vue.js based input to enter cardinal directions, e.g. in my project the wind direction.

Props	Type	Default
highlightColor	String	'green'

Usage

<CardinalDirectionInput
  v-model="windDirection"
/>

See it in action at CodePen: Cardinal Direction Input [though not used as component]

App.vue

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <h3>Compass with 8 clickable cardinal directions: N, NE, E, SE, S, SW, W, NW</h3>

    <!-- Wind -->
    <CardinalDirectionInput
        v-model="windDirection"
    />
    <p>Select by clicking on any direction. Selected directions are green.</p>
  </div>
</template>
    
windDirection: null,

CardinalDirectionInput.vue

<template>
  <!-- Compass with 8 clickable cardinal directions: N, NE, E, SE, S, SW, W, NW -->
  <svg xmlns="http://www.w3.org/2000/svg"
       width="300"
       height="300"
       viewBox="-5 -3 128 126">
    <g>
      <g fill="#C5F2FB">
        <polygon points="71.9995117,62.8291016 61.9995117,62.8291016 95.9399414,28.8876953 "/>
        <polygon points="61.9995117,52.8291016 61.9995117,62.8291016 28.0581055,28.8886719 "/>
        <polygon points="51.9995117,62.8291016 61.9995117,62.8291016 28.059082,96.7705078 "/>
        <polygon points="61.9995117,72.8291016 61.9995117,62.8291016 95.940918,96.7695313 "/>
      </g>
      <g fill="#4291E4">
        <polygon points="51.9995117,62.8291016 61.9995117,62.8291016 28.0585938,28.8876953 "/>
        <polygon points="61.9995117,52.8291016 61.9995117,62.8291016 95.940918,28.8886719 "/>
        <polygon points="71.9995117,62.8291016 61.9995117,62.8291016 95.9399414,96.7705078 "/>
        <polygon points="61.9995117,72.8291016 61.9995117,62.8291016 28.0581055,96.7695313 "/>
      </g>
      <polygon fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="100" points="61.9995117,52.8291016
          95.940918,28.8876953 71.9995117,62.8291016 95.940918,96.7705078 61.9995117,72.8291016 28.0585938,96.7705078
          51.9995117,62.8291016 28.0585938,28.8876953 "/>
    </g>
    <g>
      <g fill="#D4E5F7">
        <polygon points="71.9995117,52.8291016 61.9995117,62.8291016 61.9995117,14.8291016 "/>
        <polygon points="13.9995117,62.8291016 61.9995117,62.8291016 51.9995117,52.8291016 "/>
        <polygon points="61.9995117,110.8291016 61.9995117,62.8291016 51.9995117,72.8291016 "/>
        <polygon points="109.9995117,62.8291016 61.9995117,62.8291016 71.9995117,72.8291016 "/>
      </g>
      <g fill="#0D0BA9">
        <polygon points="51.9995117,52.8291016 61.9995117,62.8291016 61.9995117,14.8291016 "/>
        <polygon points="109.9995117,62.8291016 61.9995117,62.8291016 71.9995117,52.8291016 "/>
        <polygon points="61.9995117,110.8291016 61.9995117,62.8291016 71.9995117,72.8291016 "/>
        <polygon points="13.9995117,62.8291016 61.9995117,62.8291016 51.9995117,72.8291016 "/>
      </g>
      <polygon fill="none" stroke="#000000" stroke-width="0.5" points="71.9995117,52.8291016 109.9995117,62.8291016
                    71.9995117,72.8291016 61.9995117,110.8291016 51.9995117,72.8291016 14,62.8291016 51.9995117,52.8291016
                    61.9995117,14.8291016 "/>
    </g>
    <g fill="none" stroke="#000000" stroke-width="0.5">
      <polyline points="61.9995117,62.8291016 61.9995117,14.8291016 61.9995117,110.8291016 "/>
      <line x1="109.9995117" y1="62.8291016" x2="14" y2="62.8291016"/>
      <line x1="95.940918" y1="28.8876953" x2="28.0585938" y2="96.7705078"/>
      <polyline points="61.9995117,62.8291016 28.0585938,28.8876953 95.940918,96.7705078 "/>
    </g>
    <text font-family="MgOpen Canonica" font-weight="normal" font-size="12">
      <tspan x="57.7475586" y="9.9775391"
             :fill="direction.north ? highlightColor : 'black'"
             :text-decoration="direction.north ? 'underline' : ''"
             :font-weight="direction.north ? 'bold' : 'normal' "
             @click="direction.north = !direction.north; handleInput()"
      >N
      </tspan>
      <tspan x="95.5004883" y="23.4775391"
             :fill="direction.northEast ? highlightColor : 'black'"
             :text-decoration="direction.northEast ? 'underline' : ''"
             :font-weight="direction.northEast ? 'bold' : 'normal' "
             @click="direction.northEast = !direction.northEast; handleInput()"
      >NO
      </tspan>
      <tspan x="113.3325195" y="65.9775391"
             :fill="direction.east ? highlightColor : 'black'"
             :text-decoration="direction.east ? 'underline' : ''"
             :font-weight="direction.east ? 'bold' : 'normal' "
             @click="direction.east = !direction.east; handleInput()"
      >O
      </tspan>
      <tspan x="96.4956055" y="108.4775391"
             :fill="direction.southEast ? highlightColor : 'black'"
             :text-decoration="direction.southEast ? 'underline' : ''"
             :font-weight="direction.southEast ? 'bold' : 'normal' "
             @click="direction.southEast = !direction.southEast; handleInput()"
      >SO
      </tspan>
      <tspan x="58.6625977" y="121.9775391"
             :fill="direction.south ? highlightColor : 'black'"
             :text-decoration="direction.south ? 'underline' : ''"
             :font-weight="direction.south ? 'bold' : 'normal' "
             @click="direction.south = !direction.south; handleInput()"
      >S
      </tspan>
      <tspan x="10.1630859" y="108.4775391"
             :fill="direction.southWest ? highlightColor : 'black'"
             :text-decoration="direction.southWest ? 'underline' : ''"
             :font-weight="direction.southWest ? 'bold' : 'normal' "
             @click="direction.southWest = !direction.southWest; handleInput()"
      >SW
      </tspan>
      <tspan x="0" y="65.9775391"
             :fill="direction.west ? highlightColor : 'black'"
             :text-decoration="direction.west ? 'underline' : ''"
             :font-weight="direction.west ? 'bold' : 'normal' "
             @click="direction.west = !direction.west; handleInput()"
      >W
      </tspan>
      <tspan x="9.1669922" y="23.4775391"
             :fill="direction.northWest ? highlightColor : 'black'"
             :text-decoration="direction.northWest ? 'underline' : ''"
             :font-weight="direction.northWest ? 'bold' : 'normal' "
             @click="direction.northWest = !direction.northWest; handleInput()"
      >NW
      </tspan>
    </text>
  </svg>
</template>
<script>
export default {
  name: 'CardinalDirection',
  prop: ['value'],
  props: {
    highlightColor: { type: String, default: 'green' },
  },
  data: function() {
    return {
      direction: this.value,
    };
  },
  methods: {
    /**
     * Notify v-model about changes.
     * @param value
     */
    // eslint-disable-next-line no-unused-vars
    handleInput (value) {
      this.$emit('input', this.direction)
    }
  },
  beforeMount() {
    this.direction = {north: false, northEast: false, east: false, southEast: false, south: false, southWest: false, west: false, northWest: false}
    this.handleInput();
  }
};
</script>