Add line numbers and word-wrap to variant and combo description text …

…areas.

Closes #114.

backend/spellbook/static/admin/css/jquery/linenumbers/jquery.linenumbers.css

@@ -0,0 +1,44 @@
+div.editor {
+    display: inline-flex;
+    gap: 10px;
+    line-height: 25px;
+    border-radius: 2px;
+    padding: 10px 5px;
+    outline: lightgray solid 0.5px;
+}
+
+div.editor:focus-within {
+    outline: black solid 2px;
+}
+
+div.editor > textarea {
+    line-height: 25px;
+    overflow-y: hidden;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    min-width: 40px;
+    outline: none;
+    resize: horizontal;
+    max-height: none;
+}
+
+div.editor > div.line-numbers {
+    width: 20px;
+    text-align: right;
+    margin-bottom: 25px;
+}
+
+div.editor > .line-numbers > span.number {
+    counter-increment: linenumber;
+}
+
+div.editor > .line-numbers > span::before {
+    content: ' ';
+    white-space: pre;
+    display: block;
+}
+
+div.editor > .line-numbers > span.number::before {
+    content: counter(linenumber);
+}

backend/spellbook/static/admin/js/enable_jquery_linenumbers.js

@@ -0,0 +1,6 @@
+django.jQuery(function() {
+    django.jQuery('textarea#id_description').each(function() {
+        var $this = django.jQuery(this);
+        $this.linenumbers();
+    });
+});

backend/spellbook/static/admin/js/jquery/linenumbers/jquery.linenumbers.js

@@ -0,0 +1,90 @@
+(function ($) {
+    /** @type {HTMLTextAreaElement} */
+    var _buffer;
+
+    /**
+    * Returns the number of lines in a textarea, including wrapped lines.
+    *
+    * __NOTE__:
+    * [textarea] should have an integer line height to avoid rounding errors.
+    * 
+    * Source: https://stackoverflow.com/a/45252226/8589004
+    */
+    function countLines(textarea, text=null) {
+        if (_buffer == null) {
+            _buffer = document.createElement('textarea');
+            _buffer.style.border = 'none';
+            _buffer.style.height = '0';
+            _buffer.style.overflow = 'hidden';
+            _buffer.style.padding = '0';
+            _buffer.style.position = 'absolute';
+            _buffer.style.left = '0';
+            _buffer.style.top = '0';
+            _buffer.style.zIndex = '-1';
+            document.body.appendChild(_buffer);
+        }
+
+        var cs = window.getComputedStyle(textarea);
+        var pl = parseInt(cs.paddingLeft);
+        var pr = parseInt(cs.paddingRight);
+        var lh = parseInt(cs.lineHeight);
+
+        // [cs.lineHeight] may return 'normal', which means line height = font size.
+        if (isNaN(lh)) lh = parseInt(cs.fontSize);
+
+        // Copy content width.
+        _buffer.style.width = (textarea.clientWidth - pl - pr) + 'px';
+
+        // Copy text properties.
+        _buffer.style.font = cs.font;
+        _buffer.style.letterSpacing = cs.letterSpacing;
+        _buffer.style.whiteSpace = cs.whiteSpace;
+        _buffer.style.wordBreak = cs.wordBreak;
+        _buffer.style.wordSpacing = cs.wordSpacing;
+
+        // Copy value.
+        _buffer.value = text === null ? textarea.value : text;
+
+        var result = Math.floor(_buffer.scrollHeight / lh);
+        if (result == 0) result = 1;
+        return result;
+    }
+
+    $.fn.linenumbers = function(options) {
+        if (typeof options === "object" || !options) {
+            return this.each(function(_, e) {
+                options = $.extend({}, $.fn.linenumbers.defaults, options);
+                const $this = $(e);
+                $this.wrap('<div class="editor"></div>');
+                const $editor = $this.parent();
+                $editor.prepend('<div class="line-numbers"></div>');
+                const $lineNumbers = $editor.find('div.line-numbers');
+                function updateLineNumbers() {
+                    const current = $lineNumbers.children().length;
+                    const lines = countLines($this[0]);
+                    if (lines == current) {
+                        return;
+                    }
+                    $lineNumbers.empty();
+                    const rows = $this.val().split('\n') || [];
+                    for (let i = 0; i < rows.length; i++) {
+                        $lineNumbers.append(`<span class="number"></span>`);
+                        const lines = countLines($this[0], rows[i]);
+                        for (let j = 0; j < lines - 1; j++) {
+                            $lineNumbers.append(`<span></span>`);
+                        }
+                    }
+                }
+                updateLineNumbers();
+                $this.on('input', _ => {
+                    updateLineNumbers();
+                });
+                new ResizeObserver(updateLineNumbers).observe($this[0]);
+            });
+        }
+    };
+
+    $.fn.linenumbers.defaults = {
+        // default options
+    };
+})(django.jQuery);

backend/spellbook/templates/admin/spellbook/card/change_form.html

@@ -3,7 +3,7 @@
 
 {% block extrahead %}
     {{ block.super }}
-    {% include 'admin/spellbook/includes/jquery_imports.html' %}
+    {% include 'admin/spellbook/includes/jqueryui_imports.html' %}
     {% include 'admin/spellbook/includes/card_info_imports.html' %}
     <style>
         #card-images>img {

backend/spellbook/templates/admin/spellbook/combo/change_form.html

@@ -2,8 +2,9 @@
 
 {% block extrahead %}
     {{ block.super }}
-    {% include 'admin/spellbook/includes/jquery_imports.html' %}
+    {% include 'admin/spellbook/includes/jqueryui_imports.html' %}
     {% include 'admin/spellbook/includes/card_info_imports.html' %}
+    {% include 'admin/spellbook/includes/combo_description_imports.html' %}
     <script>
         'use strict';
         {

backend/spellbook/templates/admin/spellbook/includes/combo_description_imports.html

@@ -0,0 +1,7 @@
+{% load static %}
+
+{% block combo_description_imports %}
+<link rel="stylesheet" href="{% static 'admin/css/jquery/linenumbers/jquery.linenumbers.css' %}">
+<script src="{% static 'admin/js/jquery/linenumbers/jquery.linenumbers.js' %}"></script>
+<script src="{% static 'admin/js/enable_jquery_linenumbers.js' %}"></script>
+{% endblock %}

backend/spellbook/templates/admin/spellbook/includes/jquery_imports.html → backend/spellbook/templates/admin/spellbook/includes/jqueryui_imports.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-{% block jquery_imports %}
+{% block jqueryui_imports %}
 <!-- jQuery UI !-->
 <link rel="stylesheet" href="{% static 'admin/css/jqueryui/1.13.2/themes/smoothness/jquery-ui.min.css' %}">
 <link rel="stylesheet" href="{% static 'admin/css/jqueryui/jquery-ui-custom.css' %}">

backend/spellbook/templates/admin/spellbook/variant/change_form.html

@@ -3,8 +3,9 @@
 
 {% block extrahead %}
     {{ block.super }}
-    {% include 'admin/spellbook/includes/jquery_imports.html' %}
+    {% include 'admin/spellbook/includes/jqueryui_imports.html' %}
     {% include 'admin/spellbook/includes/card_info_imports.html' %}
+    {% include 'admin/spellbook/includes/combo_description_imports.html' %}
     <style>
         td.original p {
             visibility: hidden

backend/spellbook/templates/admin/website/websiteproperty/change_form.html

@@ -2,7 +2,7 @@
 
 {% block extrahead %}
     {{ block.super }}
-    {% include 'admin/spellbook/includes/jquery_imports.html' %}
+    {% include 'admin/spellbook/includes/jqueryui_imports.html' %}
 {% endblock %}
 
 {% block admin_change_form_document_ready  %}