From: Calin Crisan <ccrisan@gmail.com>
Date: Sun, 5 Jul 2015 17:43:23 +0000 (+0300)
Subject: extra options entry now uses a textarea instead of a
X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=7d05050b1d99d3f5e1248af7209376893f63fb0b;p=motioneye-debian

extra options entry now uses a textarea instead of a
contenteditable=true div
---

diff --git a/static/css/main.css b/static/css/main.css
index 9949cae..6373adb 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -24,7 +24,8 @@ body {
 
 select,
 input[type=text],
-input[type=password] {
+input[type=password],
+textarea {
     box-sizing: border-box;
 }
 
diff --git a/static/css/ui.css b/static/css/ui.css
index 895b670..3a5a2af 100644
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -127,12 +127,11 @@ div.check-box.on:HOVER div.check-box-button {
 }
 
 
-    /* input box */
+    /* input boxes */
 
 input[type=password].styled,
 input[type=text].styled,
-textarea.styled,
-[contenteditable=true].styled {
+textarea.styled {
     width: 90%;
     border: 1px solid #317CAD;
     border-radius: 2px;
@@ -180,6 +179,7 @@ input[readonly] {
     border: 1px solid #555 !important;
 }
 
+
     /* combo box */
 
 select.styled {
diff --git a/static/js/main.js b/static/js/main.js
index e4dbe78..d54264d 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -540,19 +540,6 @@ function initUI() {
         }, '');
     });
     
-    /* implement change events for [contenteditable=true] elements */
-    $('[contenteditable=true]').each(function () {
-        var $this = $(this);
-        $this.focus(function () {
-            $this.data('val', $this.html());
-        });
-        $this.blur(function () {
-            if ($this.html() != $this.data('val')) {
-                $this.change();
-            }
-        });
-    });
-    
     /* input value processors */
     makeStrippedInput($('tr[strip=true] input[type=text]'));
     makeStrippedInput($('tr[strip=true] input[type=password]'));
@@ -675,10 +662,10 @@ function initUI() {
             fetchCurrentCameraConfig(endProgress);
         }
     });
-    $('input.main-config, select.main-config, div[contenteditable=true].main-config').change(function () {
+    $('input.main-config, select.main-config, textarea.main-config').change(function () {
         pushMainConfig($(this).parents('tr:eq(0)').attr('reboot') == 'true');
     });
-    $('input.camera-config, select.camera-config, div[contenteditable=true].camera-config').change(function () {
+    $('input.camera-config, select.camera-config, textarea.camera-config').change(function () {
         pushCameraConfig($(this).parents('tr:eq(0)').attr('reboot') == 'true');
     });
     
@@ -1197,7 +1184,7 @@ function dict2MainUi(dict) {
     /* additional configs */
     $('tr.additional-config').each(function () {
         var $this = $(this);
-        var control = $this.find('input, select, div.html');
+        var control = $this.find('input, select, textarea, div.html');
         
         if (!control.hasClass('main-config')) {
             return;
@@ -1249,13 +1236,11 @@ function cameraUi2Dict() {
         'auto_brightness': $('#autoBrightnessSwitch')[0].checked,
         'rotation': $('#rotationSelect').val(),
         'framerate': $('#framerateSlider').val(),
-        'extra_options': $('#extraOptionsEntry').html().split(new RegExp('(<br[^>]*>)|(<div>)|(<p>)')).map(function (o) {
+        'extra_options': $('#extraOptionsEntry').val().split(new RegExp('(\n)|(\r\n)|(\n\r)')).map(function (o) {
             if (!o) {
                 return null;
             }
 
-            o = o.replace(new RegExp('(<([^>]+)>)', 'ig'), ''); /* remove crappy HTML tags added by the browser */
-            o = o.replace(new RegExp('&\\w+;', 'ig'), ''); /* remove crappy HTML entities added by the browser */
             o = o.trim();
             if (!o.length) {
                 return null;
@@ -1493,9 +1478,9 @@ function dict2CameraUi(dict) {
     
     $('#rotationSelect').val(dict['rotation']); markHideIfNull('rotation', 'rotationSelect');
     $('#framerateSlider').val(dict['framerate']); markHideIfNull('framerate', 'framerateSlider');
-    $('#extraOptionsEntry').html(dict['extra_options'] ? (dict['extra_options'].map(function (o) {
+    $('#extraOptionsEntry').val(dict['extra_options'] ? (dict['extra_options'].map(function (o) {
         return o.join(' ');
-    }).join('<br>')) : ''); markHideIfNull('extra_options', 'extraOptionsEntry');
+    }).join('\r\n')) : ''); markHideIfNull('extra_options', 'extraOptionsEntry');
     
     /* file storage */
     $('#storageDeviceSelect').empty();
@@ -1687,7 +1672,7 @@ function dict2CameraUi(dict) {
     /* additional configs */
     $('tr.additional-config').each(function () {
         var $this = $(this);
-        var control = $this.find('input, select, div.html');
+        var control = $this.find('input, select, textarea, div.html');
         
         if (!control.hasClass('camera-config')) {
             return;
diff --git a/templates/main.html b/templates/main.html
index 50e2759..c8d4336 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -274,7 +274,7 @@
                     </tr>
                     <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Extra Motion Options</span></td>
-                        <td class="settings-item-value"><div class="styled device camera-config" id="extraOptionsEntry" contenteditable="true"></div></td>
+                        <td class="settings-item-value"><textarea class="styled device camera-config" id="extraOptionsEntry" rows="3"></textarea></td>
                         <td><span class="help-mark" title="you can add here any extra options for the motion daemon (use the &quot;name value&quot; format, one option per line)">?</span></td>
                     </tr>
                     {% for config in camera_sections.get('device', {}).get('configs', []) %}