From 8b0786e4dbb638047265760a54523b9c31cf612b Mon Sep 17 00:00:00 2001
From: Georg Ehrke <developer@georgehrke.com>
Date: Sat, 10 Dec 2016 22:40:38 +0100
Subject: [PATCH] make title, description and location autoresizing textareas

---
 css/app/eventdialog.css                | 10 +++++-----
 js/.jshintrc                           |  3 ++-
 js/app/controllers/editorcontroller.js | 12 ++++++++++--
 templates/editor.popover.php           |  7 ++++---
 templates/editor.sidebar.php           | 11 ++++++-----
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/css/app/eventdialog.css b/css/app/eventdialog.css
index 37b8b53faa..a74188b259 100644
--- a/css/app/eventdialog.css
+++ b/css/app/eventdialog.css
@@ -120,6 +120,11 @@
 	width: 60px;
 }
 
+.events--textarea,
+.advanced--textarea {
+	resize: none;
+}
+
 .advanced .events--time {
 	width: 100%;
 }
@@ -164,11 +169,6 @@
 	width: 100%;
 }
 
-.advanced .advanced--fieldset textarea {
-	height: 4.5em;
-	resize: vertical;
-}
-
 .advanced .tabHeaders {
 	margin: 0 0 15px;
 	float: left;
diff --git a/js/.jshintrc b/js/.jshintrc
index 203c65df3e..dd0ee725f8 100644
--- a/js/.jshintrc
+++ b/js/.jshintrc
@@ -38,6 +38,7 @@
           "escapeHTML": true,
           "possible": true,
           "dav": true,
-          "hslToRgb": true
+          "hslToRgb": true,
+          "autosize": true
     }
 }
diff --git a/js/app/controllers/editorcontroller.js b/js/app/controllers/editorcontroller.js
index 0970fc9e03..4902b7ff51 100644
--- a/js/app/controllers/editorcontroller.js
+++ b/js/app/controllers/editorcontroller.js
@@ -26,8 +26,8 @@
  * Description: Takes care of anything inside the Events Modal.
  */
 
-app.controller('EditorController', ['$scope', 'TimezoneService', 'AutoCompletionService', '$window', '$uibModalInstance', 'vevent', 'simpleEvent', 'calendar', 'isNew', 'emailAddress',
-	function($scope, TimezoneService, AutoCompletionService, $window, $uibModalInstance, vevent, simpleEvent, calendar, isNew, emailAddress) {
+app.controller('EditorController', ['$scope', 'TimezoneService', 'AutoCompletionService', '$timeout', '$window', '$uibModalInstance', 'vevent', 'simpleEvent', 'calendar', 'isNew', 'emailAddress',
+	function($scope, TimezoneService, AutoCompletionService, $timeout, $window, $uibModalInstance, vevent, simpleEvent, calendar, isNew, emailAddress) {
 		'use strict';
 
 		$scope.properties = simpleEvent;
@@ -77,6 +77,14 @@ app.controller('EditorController', ['$scope', 'TimezoneService', 'AutoCompletion
 				$scope.properties.dtend.value = moment($scope.properties.dtend.value.subtract(1, 'days'));
 			}
 
+			autosize($('.advanced--textarea'));
+			autosize($('.events--textarea'));
+
+			$timeout(() => {
+				autosize.update($('.advanced--textarea'));
+				autosize.update($('.events--textarea'));
+			}, 50);
+
 			angular.forEach($scope.preEditingHooks, function(callback) {
 				callback();
 			});
diff --git a/templates/editor.popover.php b/templates/editor.popover.php
index 7473ea309b..5e3e6cc772 100644
--- a/templates/editor.popover.php
+++ b/templates/editor.popover.php
@@ -1,13 +1,14 @@
 <div>
 	<form class="events" ng-submit="save()">
 		<fieldset class="events--fieldset" ng-disabled="readOnly">
-			<input
-					class="events--input h2"
+			<textarea
+					rows="1"
+					class="events--input h2 events--textarea"
 					ng-model="properties.summary.value"
 					placeholder="<?php p($l->t('Title of the Event'));?>"
 					name="title" type="text"
 					autofocus="autofocus"
-			/>
+			></textarea>
 			<select
 					ng-model="calendar"
 					ng-change="selectedCalendarChanged()"
diff --git a/templates/editor.sidebar.php b/templates/editor.sidebar.php
index a1f47f52c9..ffebac60dc 100644
--- a/templates/editor.sidebar.php
+++ b/templates/editor.sidebar.php
@@ -3,12 +3,13 @@
 		<div class="sidebar-top">
 			<div class="advanced--container">
 				<fieldset class="advanced--fieldset" ng-disabled="readOnly">
-					<input
-							class="advanced--input h2"
+					<textarea
+							class="advanced--input h2 advanced--textarea"
 							ng-model="properties.summary.value"
 							placeholder="<?php p($l->t('Title of the Event'));?>"
 							name="title" type="text"
-							autofocus="autofocus"/>
+							rows="1"
+							autofocus="autofocus"></textarea>
 					<select
 							ng-model="calendar"
 							ng-change="selectedCalendarChanged()"
@@ -56,12 +57,12 @@ class="checkbox"
 				</fieldset>
 
 				<fieldset ng-show="eventsdetailsview" class="advanced--fieldset" ng-disabled="readOnly">
-					<textarea ng-model="properties.location.value" type="text" class="advanced--input"
+					<textarea ng-model="properties.location.value" type="text" class="advanced--input advanced--textarea" rows="1"
 							  placeholder="<?php p($l->t('Location'));?>" name="location"
 							  uib-typeahead="location.name for location in searchLocation($viewValue)" typeahead-show-hint="true" typeahead-min-length="3"
 							  typeahead-on-select="selectLocationFromTypeahead($item)"
 							  autocomplete="off" ></textarea>
-					<textarea ng-model="properties.description.value" type="text" class="advanced--input advanced--textarea"
+					<textarea ng-model="properties.description.value" type="text" class="advanced--input advanced--textarea" rows="1"
 							  placeholder="<?php p($l->t('Description'));?>" name="description"></textarea>
 					<select id="statusSelector"
 							ng-options="status.type as status.displayname for status in statusSelect"