From 7c8fb58600323522abd34be1cf91ee5d8b111dc9 Mon Sep 17 00:00:00 2001
From: Jonathan Wong <Jonny.Wong.16@gmail.com>
Date: Sun, 15 Nov 2015 23:51:31 -0800
Subject: [PATCH] Change input to textarea for notification body

---
 data/interfaces/default/css/plexpy.css | 18 ++++++++++++++++++
 data/interfaces/default/settings.html  | 24 ++++++++++++++++--------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 2571667a..e2e11185 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -341,6 +341,24 @@ input[type="color"],
     border-radius: 3px;
     transition: background-color .3s;
 }
+textarea.form-control {
+    height: initial;
+    margin: 5px 0 5px 0;
+    color: #fff;
+    border: 0px solid #444;
+    background: #555;
+    padding: 6px 12px;
+    background-color: #555;
+    border-radius: 3px;
+    transition: background-color .3s;
+    resize: none;
+}
+textarea.form-control:focus {
+    outline: 0;
+    color: #555;
+    background-color: #fff;
+    transition: background-color .3s;
+}
 .pagination > li > a,
 .pagination > li > span {
     position: relative;
diff --git a/data/interfaces/default/settings.html b/data/interfaces/default/settings.html
index 76a8551f..6fc65627 100644
--- a/data/interfaces/default/settings.html
+++ b/data/interfaces/default/settings.html
@@ -533,7 +533,7 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
                                         </div>
                                         <div class="form-group">
                                             <label for="notify_on_start_body_text">Message Body</label>
-                                            <input class="form-control" type="text" id="notify_on_start_body_text" name="notify_on_start_body_text" value="${config['notify_on_start_body_text']}" data-parsley-trigger="change" required>
+                                            <textarea class="form-control" id="notify_on_start_body_text" name="notify_on_start_body_text" data-parsley-trigger="change" data-autoresize required>${config['notify_on_start_body_text']}</textarea>
                                             <p class="help-block">Set a custom body.</p>
                                         </div>
                                     </li>
@@ -550,7 +550,7 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
                                         </div>
                                         <div class="form-group">
                                             <label for="notify_on_stop_body_text">Message Body</label>
-                                            <input class="form-control" type="text" id="notify_on_stop_body_text" name="notify_on_stop_body_text" value="${config['notify_on_stop_body_text']}" data-parsley-trigger="change" required>
+                                            <textarea class="form-control" id="notify_on_stop_body_text" name="notify_on_stop_body_text" data-parsley-trigger="change" data-autoresize required>${config['notify_on_stop_body_text']}</textarea>
                                             <p class="help-block">Set a custom body.</p>
                                         </div>
                                     </li>
@@ -567,7 +567,7 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
                                         </div>
                                         <div class="form-group">
                                             <label for="notify_on_pause_body_text">Message Body</label>
-                                            <input class="form-control" type="text" id="notify_on_pause_body_text" name="notify_on_pause_body_text" value="${config['notify_on_pause_body_text']}" data-parsley-trigger="change" required>
+                                            <textarea class="form-control" id="notify_on_pause_body_text" name="notify_on_pause_body_text" data-parsley-trigger="change" data-autoresize required>${config['notify_on_pause_body_text']}</textarea>
                                             <p class="help-block">Set a custom body.</p>
                                         </div>
                                     </li>
@@ -584,7 +584,7 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
                                         </div>
                                         <div class="form-group">
                                             <label for="notify_on_resume_body_text">Message Body</label>
-                                            <input class="form-control" type="text" id="notify_on_resume_body_text" name="notify_on_resume_body_text" value="${config['notify_on_resume_body_text']}" data-parsley-trigger="change" required>
+                                            <textarea class="form-control" id="notify_on_resume_body_text" name="notify_on_resume_body_text" data-parsley-trigger="change" data-autoresize required>${config['notify_on_resume_body_text']}</textarea>
                                             <p class="help-block">Set a custom body.</p>
                                         </div>
                                     </li>
@@ -601,7 +601,7 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
                                         </div>
                                         <div class="form-group">
                                             <label for="notify_on_watched_body_text">Message Body</label>
-                                            <input class="form-control" type="text" id="notify_on_watched_body_text" name="notify_on_watched_body_text" value="${config['notify_on_watched_body_text']}" data-parsley-trigger="change" required>
+                                            <textarea class="form-control" id="notify_on_watched_body_text" name="notify_on_watched_body_text" data-parsley-trigger="change" data-autoresize required>${config['notify_on_watched_body_text']}</textarea>
                                             <p class="help-block">Set a custom body.</p>
                                         </div>
                                     </li>
@@ -618,7 +618,7 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
                                         </div>
                                         <div class="form-group">
                                             <label for="notify_on_buffer_body_text">Message Body</label>
-                                            <input class="form-control" type="text" id="notify_on_buffer_body_text" name="notify_on_buffer_body_text" value="${config['notify_on_buffer_body_text']}" data-parsley-trigger="change" required>
+                                            <textarea class="form-control" id="notify_on_buffer_body_text" name="notify_on_buffer_body_text" data-parsley-trigger="change" data-autoresize required>${config['notify_on_buffer_body_text']}</textarea>
                                             <p class="help-block">Set a custom body.</p>
                                         </div>
                                     </li>
@@ -637,7 +637,7 @@ available_notification_agents = sorted(notifiers.available_notification_agents()
                                         </div>
                                         <div class="form-group">
                                             <label for="notify_on_created_body_text">Message Body</label>
-                                            <input class="form-control" type="text" id="notify_on_created_body_text" name="notify_on_created_body_text" value="${config['notify_on_created_body_text']}" data-parsley-trigger="change" required>
+                                            <textarea class="form-control" id="notify_on_created_body_text" name="notify_on_created_body_text" data-parsley-trigger="change" data-autoresize required>${config['notify_on_created_body_text']}</textarea>
                                             <p class="help-block">Set a custom body.</p>
                                         </div>
                                     </li>
@@ -1388,6 +1388,14 @@ $(document).ready(function() {
         e.preventDefault()
     });
 
+    // auto resizing textarea for custom notification message body
+    $('textarea[data-autoresize]').each(function() {
+        var offset = this.offsetHeight - this.clientHeight;
+        var resizeTextarea = function(el) {
+            $(el).css('height', 'auto').css('height', el.scrollHeight + offset);
+        };
+        $(this).on('focus keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');
+    });
 });
 </script>
-</%def>
+</%def>
\ No newline at end of file