How Many Steps Does It Take To Get From Me To You?

how-many-steps-does-it-take-to-get-from-me-to-you.markdown

How Many Steps Does It Take To Get From Me To You?

Color Interpolation! Yay! More adventures with colors and math! And Vue.js, of course. This is a bit less fun on Safari since it doesn't support input[type=color]. What's up with that, Apple?

Inspired by this pen

A Pen by hagb4rd on CodePen.

License.

index.html

<link rel="stylesheet" src="style.css" />
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://codepen.io/jasesmith/pen/bb578a401c45e3f38f096eb64646e76b"></script>
<main>
  <div class="tools">
    <div>
      <input type="color" v-model="color1" />
      <input type="text" v-model="color1" />
    </div>
    <div>
      <div class="vertical-range"><input type="range" :min="min" :max="max" v-model="steps" xorient="vertical" /></div>
      <div class="steps">{{visualSteps}} {{visualStepsLabel}}</div>
    </div>
    <div>
      <input type="color" v-model="color2" />
      <input type="text" v-model="color2" />
    </div>
  </div>
  <div class="colors">
    <div class="color" v-for="color in colors" :style="setStyles(color)">&nbsp;{{colorName(color)}}</div>
  </div>
</main>
<script src="index.js"></script>

script.js

let vm = new Vue({
  el: 'main',
  mixins: [vueMixinColorFunctions],
  data: {
    min: 3,
    max: 27,
    delta: 10,
    steps: 10,
    color1: '#0ebeff',
    color2: '#ff42b3',
  },
  computed: {
    colors () {
      return this.interpolateColors(this.color1, this.color2, this.steps)
    },
    visualSteps () {
      return (this.steps - 2)
    },
    visualStepsLabel () {
      return (this.visualSteps === 1 ? 'step' : 'steps')
    },
  },
  // mounted () {
  //   this.$el.addEventListener('mousewheel', (event) => {
  //     this.steps = this.scrollShift(event)
  //   })
  // },
  methods: {
    adjust (color) {
      const hex = this.rgbToHex(color[0], color[1], color[2])
      return this.foregroundAdjust(hex)
    },
    setStyles(color) {
      return `background: rgb(${color}); color: ${this.adjust(color)}`
    },
    colorName (color) {
      return this.rgbArrayToHex(color)
    },
    // scrollShift (event) {
    //   this.delta = Math.max(this.min, Math.min(this.max, this.delta + Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)))))
    //   return this.delta
    // }
  }
})

scripts

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://codepen.io/jasesmith/pen/bb578a401c45e3f38f096eb64646e76b"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Work+Sans:300');

:root {
  --fg: #fff;
  --bg: #000;
}

.tools {
  flex: 1;
  padding: 2em;
  color: #fff;
  
  div {
    display: flex;
    position: relative;
    
    + div {
      margin-top: .5em;
    }
  }

  .steps {
    position: absolute;
    top: 50%;
    left: 6em;
    transform: translate(0, -50%);
    padding: 0;
    margin: 0;
  }
}

.colors {
  flex: 2;
  display: flex;
  flex-direction: column;
  font-size: .85em;

  .color {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 1em;
    transition: 300ms linear;
  }
}

.vertical-range {
  display: flex;
  align-items: center;
  width: 9em;
  height: 9em;
  transform: rotate(-90deg);
}

.steps-control {
  width: 10em;
  height: 10em;
  .ring {
    transform: scale(calc(var(--size)/40));
    width: 100%;
    box-shadow: 0 0 0 .2em;
    border-radius: 5em;
    transform: 300ms linear;
  }
}

input {
  margin: 0;
  padding: 0 .5em;
  font-size: inherit;
  font-family: inherit;
  border: none;
  width: 7em;
  outline: none;
  border-radius: 0 1em 1em 0;

  &[type=color] {
    padding: 0;
    width: 2em;
    height: 2em;
    border-radius: 1em 0 0 1em;

    &::-moz-color-swatch {
      border: none;
      border-radius: 1em;
      transform: scale(.75);
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: 1em;
    }
    &::-webkit-color-swatch-wrapper {
      padding: .25em;
      border-radius: 1em;
    }
  }

  &[type=range] {
    appearance: none;
    outline: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: .25em;
    border-radius: 1em;
    cursor: pointer;
    font-size: inherit;
    background: var(--fg);

    // MOZILLA
    &::-moz-range-track {
      appearance: none;
      background: var(--fg);
      outline: none;
    }
    &::-moz-focus-outer {
      border: 0;
    }
    &::-moz-range-thumb {
      appearance: none;
      width: 1em;
      height: 1em;
      border: none;
      border-radius: 1em;
      box-shadow: 0 0 0 .3em var(--bg);
      background: var(--fg);
      transform: scale(1);
      transition: transform .3s ease-out;
    }
    &::-moz-range-thumb:focus,
    &::-moz-range-thumb:active {
      appearance: none;
      transform: scale(.85);
    }

    // BLINK/WEBKIT
    &::-webkit-slider-thumb {
      appearance: none;
      width: 1em;
      height: 1em;
      border: none;
      border-radius: 1em;
      box-shadow: 0 0 0 .3em var(--bg);
      background: var(--fg);
      transform: scale(1);
      transition: transform .3s ease-out;
    }
    &::-webkit-slider-thumb:focus,
    &::-webkit-slider-thumb:active {
      appearance: none;
      transform: scale(.85);
    }
  }
}

// boring
*, *::before, *::after {box-sizing: border-box;}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: #000;
  font-family: 'Work Sans', sans-serif;
}

main {
  flex: 1;
  display: flex;
  font-size: calc(1em + 1vw);
}


@supports (-webkit-backdrop-filter: blur(2em)) {
  input[type=color] {
    display:none;
  }
  input {
    border-radius: 1em;
    padding: .25em .5em;
    width: 9em;
  }
}