Add wrap_attributes option to website UI (#2456)

Adds HTML attribute wrapping dropdown to the options panel,
allowing users to control how attributes are wrapped directly
from the website. Previously this option was only available
via the Additional Settings JSON field.

Fixes #1306

Author: diara12

index.html

@@ -148,6 +148,19 @@ <h2>Options</h2>
           </div>
         </div>
 
+        <div>
+          <p style="margin:6px 0 0 0">HTML attribute wrapping:</p>
+          <select id="wrap-attributes">
+            <option value="auto">Wrap when line is too long</option>
+            <option value="force">Wrap each attribute</option>
+            <option value="force-aligned">Wrap and align attributes</option>
+            <option value="force-expand-multiline">Always wrap multiline</option>
+            <option value="aligned-multiple">Align multiple attributes</option>
+            <option value="preserve">Preserve wrapping</option>
+            <option value="preserve-aligned">Preserve and align</option>
+          </select>
+        </div>
+
         <div class="options-checkboxes">
           <input class="checkbox" type="checkbox" id="end-with-newline">
           <label for="end-with-newline">End script and style with newline?</label>

web/common-function.js

@@ -74,6 +74,7 @@ function read_settings_from_cookie() {
   $('#keep-array-indentation').prop('checked', Cookies.get('keep-array-indentation') === 'on');
   $('#break-chained-methods').prop('checked', Cookies.get('break-chained-methods') === 'on');
   $('#indent-scripts').val(any(Cookies.get('indent-scripts'), 'normal'));
+  $('#wrap-attributes').val(any(Cookies.get('wrap-attributes'), 'auto'));
   $('#additional-options').val(any(Cookies.get('additional-options'), '{}'));
   $('#space-before-conditional').prop('checked', Cookies.get('space-before-conditional') !== 'off');
   $('#wrap-line-length').val(any(Cookies.get('wrap-line-length'), '0'));
@@ -104,6 +105,7 @@ function store_settings_to_cookie() {
   Cookies.set('end-with-newline', $('#end-with-newline').prop('checked') ? 'on' : 'off', opts);
   Cookies.set('wrap-line-length', $('#wrap-line-length').val(), opts);
   Cookies.set('indent-scripts', $('#indent-scripts').val(), opts);
+  Cookies.set('wrap-attributes', $('#wrap-attributes').val(), opts);
   Cookies.set('additional-options', $('#additional-options').val(), opts);
   Cookies.set('indent-inner-html', $('#indent-inner-html').prop('checked') ? 'on' : 'off', opts);
   Cookies.set('comma-first', $('#comma-first').prop('checked') ? 'on' : 'off', opts);
@@ -211,6 +213,7 @@ function beautify() {
   opts.keep_array_indentation = $('#keep-array-indentation').prop('checked');
   opts.break_chained_methods = $('#break-chained-methods').prop('checked');
   opts.indent_scripts = $('#indent-scripts').val();
+  opts.wrap_attributes = $('#wrap-attributes').val();
   opts.brace_style = $('#brace-style').val() + ($('#brace-preserve-inline').prop('checked') ? ",preserve-inline" : "");
   opts.space_before_conditional = $('#space-before-conditional').prop('checked');
   opts.unescape_strings = $('#unescape-strings').prop('checked');