Kukun Loan Page Acorn Example

index.html

<div id="q-app">
  <template>
    <q-layout view="hHh lpR fFf">

      <q-header elevated class="bg-white text-black q-header">
        <q-toolbar>
          <q-toolbar-title>
            <img class="nav-logo" src="https://fs.acornfinance.com/companies/logos/kukun-logo.svg">
          </q-toolbar-title>
          <q-btn @click="loadApply">Load Apply</q-btn>
          <q-btn @click="loadOffers">Load Offers</q-btn>
        </q-toolbar>
      </q-header>

      <q-page-container>
         <q-page>
          <q-card flat>
            <iframe
              id="applyIframeId"
              ref="applyIframeRef"
              name="applyIframe"
              :src="iframeUrl"
              allowtransparency="true"
              @load="setIframeHeight('applyIframeId')"
              scrolling="auto"
              :class="iframeClass"
            >
            </iframe>
          </q-card>
          <section flat class="bg-grey-1 text-center vertical-middle our-lenders-section">
            <h3 class="partnership">IN PARTNERSHIP WITH</h3>
            <img src="https://fs.acornfinance.com/logos/acorn-finance-logo-180x54.png" style="width: 180px">
            <h3 class="partnership">Our Lenders</h3>
            <div class="q-gutter-sm">
              <img src="https://fs.acornfinance.com/images/lightstream-logo276x96.png">
              <img src="https://fs.acornfinance.com/images/bestegg-logo276x96.png">
              <img src="https://fs.acornfinance.com/images/lendingpoint-logo276x96.png">
              <img src="https://fs.acornfinance.com/images/upgrade-logo276x96.png">
              <img src="https://fs.acornfinance.com/images/prosper-logo276x96.png">
              <img src="https://fs.acornfinance.com/images/sofi-logo276x96.png">
            </div>

           </section>
        </q-page>
      </q-page-container>

      <footer bordered class="bg-blue-grey-9 text-white q-footer">
        <q-toolbar>
          <q-toolbar-title>
            KUKUN Footer
          </q-toolbar-title>
            Versioin {{$q.version}}
        </q-toolbar>
      </footer>

    </q-layout>
  </template>
</div>

kukun-loan-page-acorn-example.markdown

Kukun Loan Page Acorn Example

You can use it to submit Github tickets for Quasar v1+.

A Pen by Chuck Horton on CodePen.

License.

script.js

let curDomain = window.location.hostname.split('.').slice(-2).join('.')
if (curDomain === 'acornfinance.com') {
  document.domain = 'acornfinance.com'
}
new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      iframeUrl: 'https://qa.pr.acornfinance.com/app-page-1?dealerid=1001&hf=0',
      iframeClass: 'iframe-desktop'
    };
  },
  methods: {
    loadApply() {
      this.iframeUrl = '';
      this.iframeUrl = 'https://qa.pr.acornfinance.com/app-page-1?dealerid=1001&hf=0';
      this.$q.notify({
        message: '<b>Loading Apply</b><br> ' + this.iframeUrl,
        html: true,
        multiLine: true,
        position: 'top',
        timeout: 5000,
        color: 'blue'
      });
    },
    loadOffers() {
      this.iframeUrl =
        'https://pr.acornfinance.com/offers?dealerid=JL92Z&applicationid=68059&hf=0';
      this.$q.notify({
        message: '<b>Loading Offers</b><br> ' + this.iframeUrl,
        html: true,
        multiLine: true,
        position: 'top',
        timeout: 5000,
        color: 'blue'
      });
    },
    receiveIframeMessage(event) {
      let message = event.data;
      if (
        typeof message === 'string' &&
        message.substr(0, 13) === 'Resize Height'
      ) {
        console.log('Resize Height', message);
        let newHeight = message.substr(14, 10);
        this.setIframeHeight('applyIframeId', newHeight);
      } else if (
        typeof message === 'string' &&
        message.substr(0, 8) === 'Continue'
      ) {
        console.log('Continue', message);
        this.hideForInput = true;
        this.$root.$emit('hide-tabs');
      }
    },
    getDocHeight (doc) {
      doc = doc || document
      // stackoverflow.com/questions/1145850/
      var body = doc.body, html = doc.documentElement
      var height = Math.max(body.scrollHeight, body.offsetHeight,
        html.clientHeight, html.scrollHeight, html.offsetHeight)
      this.prevHeight = height
      // console.log('getDocHeight', height)
      return height
    },
    setIframeHeight(id, height) {
      var ifrm = document.getElementById(id);
      var doc = ifrm.contentDocument
        ? ifrm.contentDocument
        : ifrm.contentWindow.document;
      // var prevHeight = ifrm.style.height
      ifrm.style.height = '10px'; // reset to minimal height ...
      // IE opt. for bing/msn needs a bit added or scrollbar appears
      var newHeight = this.getDocHeight(doc) + 4;
      if (height > newHeight) {
        newHeight = height;
      }
      if (newHeight !== this.prevHeight) {
        ifrm.style.visibility = 'hidden';
        ifrm.style.height = newHeight + 'px';
        ifrm.style.visibility = 'visible';
      }
      // console.log('setIframeHeight', prevHeight, newHeight, height)
    },
    onResize(size) {
      if (
        window.location.protocol !== 'https:' &&
        window.location.hostname !== 'localhost'
      ) {
        this.setIframeHeight('applyIframeId', 0);
      }
      if (this.$q.platform.is.desktop) {
        this.iframeClass = 'iframe-desktop';
      } else {
        this.iframeClass = 'iframe-mobile';
      }
      // console.log('Personal onResize', size, this.iframeClass)
    }
  }
});

scripts

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>

style.css

.q-header {
  min-height: 64px;
  padding: 4px 16px;
}
.nav-logo {
  margin-top: 12px;
}
.q-btn {
  margin: 0 10px;
}

.iframe-desktop {
  min-height: 675px !important;
  width: 100%;
  margin: 0;
  border: none;
}
.iframe-mobile {
  min-height: 575px !important;
  width: 100%;
  margin: 0;
  border: none;
}
.partnership {
  font-size: 18px;
  text-align: center;
}

.our-lenders-section {
  padding: 30px;
}

.q-footer {
  min-height: 64px;
  padding: 8px 16px;
  font-size: 10px;
}

styles

<link href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css" rel="stylesheet" />