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 9949cae0c1c3db05822a31f5e19ac624aefa2acc..6373adbf59ffb141f546972dd825da7c36e0318d 100644 (file)
--- 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 895b670948acc7c6bf85292f940d8f878908ae34..3a5a2af99a733d011ed72183f9597223922ddd60 100644 (file)
--- 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 e4dbe785a4edab013e2ccf3f30ddd21b3d780256..d54264d833b28661285ebc6f845e1b13bc8b937c 100644 (file)
--- 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 50e275966ece182623d1ad9a74127ddf2caabcdf..c8d433606564d7802ce3f0bec2512a2b4d0179d0 100644 (file)
--- 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', []) %}