Vue

by blowsie

HTML

<link rel="stylesheet" href="https://qa-justeat.epayworldwide.com/skin/frontend/just-eat/default/css/dist_bundle.css">
<div id="app">
 <form
    ref="textareaForm"
    method="get"
    target="textAreaFrame"
    action="https://jsonplaceholder.typicode.com/test" 
    class="component-text-area-fixed"
  >
    <div
      class="mdc-text-field mdc-text-field--textarea je-textarea"
      :class="{'has-error':
        hasError}"
    >
      <textarea
        :id="_uid"
        :name="_uid"
        class="mdc-text-field__input"
        :cols="cols"
        :rows="rows"
        wrap="hard"
        @keyup="getTextAreaValue"
        @paste="getTextAreaValue"
        @cut="getTextAreaValue"
      ></textarea>
      <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading" />
        <div class="mdc-notched-outline__notch">
          <label :for="_uid" class="mdc-floating-label">{{ label }}</label>
        </div>
        <div class="mdc-notched-outline__trailing" />
      </div>
    </div>
    <div class="validation-advice" :class="{'validation-advice-without-error': !hasError}">
      {{ lines }} / {{ maxLines }} lines used
    </div>
    <!--    <pre>{{ output }}</pre>-->
    <iframe
      id="textAreaFrame"
      ref="textAreaFrame"
      name="textAreaFrame"
      style="display: none"
      @load="setTextAreaValue"
    />
  </form>

</div>
    <script src="https://qa-justeat.epayworldwide.com/skin/frontend/just-eat/default/js/dist_bundle.js" async></script>

SASS

/*@import 'reset-css';*/
/*@import url('https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400,500|Ubuntu:300,500');*/

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');

$viewport-zero-up: (
  min-width: 0px
);
$viewport-phone-up: (
  min-width: 576px
);
$viewport-tablet-up: (
  min-width: 768px
);
$viewport-desktop-up: (
  min-width: 992px
);

:root {
  --je-red: #eb243b;
  --main-padding-h: 16px;
  --main-padding-h-offset: calc(var(--main-padding-h) * -1);
  --main-padding-h-total: calc(var(--main-padding-h) * 2);

  /*From components lib*/
  --je-blue: #266abd;
  --btn-bg-color: var(--je-blue);
  --btn-bg-color-hover: #14509c;
  --btn-bg-color-active: #14427d;
  --btn-bg-color-disabled: #cacaca;
  --grey: #eaeaea;
  --dark-grey: #757575;
  --black-input: #535353;
  --black: #333333;
  --font-ubuntu: 'Ubuntu', sans-serif;
  --font-hind-vadodara: 'Hind Vadodara', sans-serif;
}

@media #{$viewport-tablet-up} {
  :root {
    --main-padding-h: 32px;
  }
}

@media #{$viewport-desktop-up} {
  :root {
    --main-padding-h: 80px;
  }
}

body {
  background: #f5f5f5;
  min-width: 336px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

hr {
  border: 0;
  border-bottom: 1px solid #eaeaea;
  @media #{$viewport-zero-up} {
    margin-bottom: 24px;
  }
  @media #{$viewport-tablet-up} {
    margin-bottom: 32px;
  }
  @media #{$viewport-desktop-up} {
    margin-bottom: 40px;
  }
}

main {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2);
  box-sizing: border-box;
  padding: var(--main-padding-h) var(--main-padding-h) 1px var(--main-padding-h);
  margin-bottom: -1px;
  position: relative;
  transition: width 0.4s;
  @media #{$viewport-zero-up} {
    width: 100%;
    margin: 120px auto;
  }
  @media (min-width: 352px) {
    width: calc(100% - var(--main-padding-h-total));
  }
  @media #{$viewport-tablet-up} {
    max-width: 452px;
    margin: 180px auto;
  }
  @media...

Vue

function getURLParameter(qs, name) {
  const pattern = '[\\?&]' + name + '=([^&#]*)'
  const regex = new RegExp(pattern)
  const res = regex.exec(qs)
  if (res == null) {
    return ''
  } else {
    return res[1]
  }
}


new Vue({
  el: "#app",
  name: 'InputTextAreaFixed',
  props: {
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: 'Message'
    },
    cols: {
      type: Number,
      default: 40
    },
    rows: {
      type: Number,
      default: 5
    },
    maxLines: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      output: '',
      mdc: null
    }
  },
  computed: {
    lines: function() {
      return this.output.split('\n').length
    },
    hasError: function() {
      return this.lines > 4
    }
  },
  mounted() {
    /* eslint-disable no-new */
    // Germany can ignore this line
  //  this.mdc = new MDCTextField(this.$el)
    /* eslint-enable no-new */
    this.getTextAreaValue()
  },
  methods: {
    getTextAreaValue: function() {
      this.$refs.textareaForm.submit()
    },
    setTextAreaValue: function() {
      if (top.location.href !== window.location.href) {
        return
      }
      const fromUrl = this.$refs.textAreaFrame.contentDocument.URL
      if (fromUrl.indexOf('http') < 0) {
        return
      }
      this.output = getURLParameter(unescape(fromUrl), this._uid).replace(/\+/g, ' ')
      // debugger
    }
  }

})