From 48212278950d6a47cf611271aa1108d8ce127165 Mon Sep 17 00:00:00 2001
From: Michael Bumann <hello@michaelbumann.com>
Date: Tue, 14 Apr 2020 14:01:50 +0200
Subject: [PATCH] Experiment with typing cycler

---
 app/javascript/backend_typed.js     | 13 +++++++++++++
 app/javascript/packs/application.js |  1 +
 app/views/home/index.html.erb       |  4 ++--
 package.json                        |  3 ++-
 yarn.lock                           |  5 +++++
 5 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/backend_typed.js

diff --git a/app/javascript/backend_typed.js b/app/javascript/backend_typed.js
new file mode 100644
index 0000000..6148c06
--- /dev/null
+++ b/app/javascript/backend_typed.js
@@ -0,0 +1,13 @@
+const Typed = require('typed.js');
+document.addEventListener("turbolinks:load", function () {
+  new Typed('.backends-cycler', {
+    strings: ['Google Sheets', 'Airtable', 'Google Sheets', 'Airtable'], // smoother loops
+    loop: true,
+    typeSpeed: 100,
+    backSpeed: 40,
+    backDelay: 1400,
+    smartBackspace: true,
+    startDelay: 800,
+    onBegin: (typed) => { typed.currentElContent = typed.el.innerText; }
+  });
+});
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index fb7f3ef..38aa7c6 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -11,6 +11,7 @@ require("channels")
 require('burger_menu');
 require('tinyforms');
 require('demo');
+require('backend_typed');
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 5be9a9b..4976a1d 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -2,10 +2,10 @@
   <div class="hero-body">
     <div class="container">
       <h1 class="title is-family-secondary has-text-weight-bold">
-        Welcome
+        Tinyforms - the form backend for designers and developers
       </h1>
       <p class="subtitle is-size-6 has-text-white">
-        Generate forms instantly
+        Link your online forms to <span class="backends-cycler">Google Sheets</span> and receive form submissions in your favorit spreadsheet.
       </p>
     </div>
   </div>
diff --git a/package.json b/package.json
index e7e23f4..515e8e0 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "@rails/webpacker": "4.2.2",
     "bulma": "^0.8.1",
     "bulma-helpers": "^0.3.10",
-    "turbolinks": "^5.2.0"
+    "turbolinks": "^5.2.0",
+    "typed.js": "^2.0.11"
   },
   "version": "0.1.0",
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 9956bd1..18f063a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7053,6 +7053,11 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typed.js@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/typed.js/-/typed.js-2.0.11.tgz#d298a91f959f11a3803bf48b841a6fadd29640d9"
+  integrity sha512-1ZORHalEyLob34q738mqmwp0pT6syMigB1SZuTItqdhovWBKFIt7I5uVALXAGQZCg2MCtihCt6uqkoqPJK+9iQ==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"