From d768087b2e6701a4f76bd6eae53f9a59439983de Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 11 Jul 2019 13:55:39 +0200
Subject: [PATCH] Add auto grow directive to textarea

---
 .../assignment/SubmissionForm.vue             |  4 +++-
 client/src/directives/auto-grow.js            | 21 ++++++++++++++++++
 client/src/directives/click-outside.js        | 14 ++++++++++++
 client/src/main.js                            | 22 +++++--------------
 client/src/styles/_forms.scss                 |  7 ++++++
 5 files changed, 51 insertions(+), 17 deletions(-)
 create mode 100644 client/src/directives/auto-grow.js
 create mode 100644 client/src/directives/click-outside.js

diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index dd61eee7..bac3a98b 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="submission-form__text-answer">
+  <div class="submission-form__text-answer submission-form">
       <textarea
+        v-auto-grow
+        rows="1"
         class="submission-form__textarea"
         placeholder="Ergebnis erfassen"
         :value="submission.text"
diff --git a/client/src/directives/auto-grow.js b/client/src/directives/auto-grow.js
new file mode 100644
index 00000000..5d370d8a
--- /dev/null
+++ b/client/src/directives/auto-grow.js
@@ -0,0 +1,21 @@
+const resizeElement = (el) => {
+  el.style.height = `auto`;
+  el.style.height = `${el.clientHeight - el.offsetHeight + el.scrollHeight}px`;
+};
+
+export default {
+  update: resizeElement,
+  inserted: resizeElement,
+  bind(el, binding, vnode) {
+    el.classList.add('skillbox-auto-grow');
+    el.addEventListener('input', event => {
+      resizeElement(el);
+    })
+  },
+  unbind(el) {
+    el.classList.remove('skillbox-auto-grow');
+    el.removeEventListener('input', event => {
+      resizeElement(el);
+    })
+  }
+};
diff --git a/client/src/directives/click-outside.js b/client/src/directives/click-outside.js
new file mode 100644
index 00000000..591fda06
--- /dev/null
+++ b/client/src/directives/click-outside.js
@@ -0,0 +1,14 @@
+// taken from https://stackoverflow.com/questions/36170425/detect-click-outside-element
+export default {
+  bind(el, binding, vnode) {
+    el.clickOutsideEvent = event => {
+      if (!(el === event.target || el.contains(event.target))) {
+        vnode.context[binding.expression](event);
+      }
+    };
+    document.body.addEventListener('click', el.clickOutsideEvent);
+  },
+  unbind(el) {
+    document.body.removeEventListener('click', el.clickOutsideEvent)
+  }
+};
diff --git a/client/src/main.js b/client/src/main.js
index d34edd7c..809ec19b 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -14,6 +14,8 @@ import {Validator, install as VeeValidate} from 'vee-validate/dist/vee-validate.
 import {required, min} from 'vee-validate/dist/rules.esm.js';
 import veeDe from 'vee-validate/dist/locale/de';
 import {dateFilter} from './filters/date-filter';
+import autoGrow from '@/directives/auto-grow'
+import clickOutside from '@/directives/click-outside'
 
 Vue.config.productionTip = false;
 
@@ -58,20 +60,8 @@ if (process.env.GOOGLE_ANALYTICS_ID) {
   console.log(process.env.GOOGLE_ANALYTICS_ID);
 }
 
-// taken from https://stackoverflow.com/questions/36170425/detect-click-outside-element
-Vue.directive('click-outside', {
-  bind(el, binding, vnode) {
-    el.clickOutsideEvent = event => {
-      if (!(el === event.target || el.contains(event.target))) {
-        vnode.context[binding.expression](event);
-      }
-    };
-    document.body.addEventListener('click', el.clickOutsideEvent);
-  },
-  unbind(el) {
-    document.body.removeEventListener('click', el.clickOutsideEvent)
-  }
-});
+Vue.directive('click-outside', clickOutside);
+Vue.directive('auto-grow', autoGrow);
 
 const apolloProvider = new VueApollo({
   defaultClient: apolloClient
@@ -90,7 +80,7 @@ const dict = {
       min: 'Das neue Passwort muss mindestens 8 Zeichen lang sein'
     }
   }
-}
+};
 
 Validator.localize('de', veeDe)
 Validator.localize('de', dict)
@@ -101,7 +91,7 @@ Validator.extend('strongPassword', {
     const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*?(),.":{}|<>+])(?=.{8,})/;
     return strongRegex.test(value);
   }
-})
+});
 Vue.use(VeeValidate, {
   locale: 'de'
 });
diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss
index dceb4cd4..ba88e0ad 100644
--- a/client/src/styles/_forms.scss
+++ b/client/src/styles/_forms.scss
@@ -21,3 +21,10 @@
   @include inputstyle;
   height: 120px;
 }
+
+
+.skillbox-auto-grow {
+  overflow: hidden;
+  resize: none;
+  outline: 0;
+}