Improve cutoff for incident descriptions (#110)

OpenOversight/app/static/js/incidentDescription.js

@@ -1,5 +1,5 @@
 $(document).ready(function() {
-    let overflow_length = 500;
+    let overflow_length = 700;
     $(".incident-description").each(function () {
         let description = this;
         let incidentId = $( this ).data("incident");
@@ -8,7 +8,16 @@ $(document).ready(function() {
         }
         if(description.innerHTML.length > overflow_length) {
             let originalDescription = description.innerHTML;
-            description.innerHTML = description.innerHTML.substring(0, overflow_length) + "…";
+            // Convert the innerHTML into a string, and truncate it to overflow length
+            const sub = description.innerHTML.substring(0, overflow_length)
+            // In order to make the cutoff clean, we will want to truncate *after*
+            // the end of the last HTML tag. So first we need to find the last tag.
+            const cutoff = sub.lastIndexOf("</")
+            // Tags could be variable length, so next find the index of the first
+            // ">" after the start of the closing bracket.
+            const lastTag = sub.substring(cutoff).indexOf(">")
+            // Lastly, trim the HTML to the end of the closing tag
+            description.innerHTML = sub.substring(0, cutoff + lastTag + 1) + "…";
             $(`#description-overflow-button_${incidentId}`).on('click', function(event) {
                 event.stopImmediatePropagation();
                 description.innerHTML = originalDescription;

OpenOversight/app/templates/partials/incident_fields.html

@@ -90,7 +90,3 @@
   {% endif %}
   </tbody>
 </table>
-
-{% block js_footer %}
-  <script src="{{ url_for('static', filename='js/incidentDescription.js') }}"></script>
-{% endblock %}

OpenOversight/app/templates/partials/officer_incidents.html

@@ -17,6 +17,9 @@ <h4>
         </li>
     {% endfor %}
     </ul>
+  {% block js_footer %}
+    <script src="{{ url_for('static', filename='js/incidentDescription.js') }}"></script>
+  {% endblock %}
 {% endif %}
 {% if is_admin_or_coordinator %}
     <a href="{{ url_for('main.incident_api') + 'new?officer_id={}'.format(officer.id) }}" class='btn btn-primary'>New Incident</a>

OpenOversight/tests/test_functional.py

@@ -14,7 +14,7 @@
 from OpenOversight.app.models import Department, Incident, Officer, Unit, db
 
 
-DESCRIPTION_CUTOFF = 500
+DESCRIPTION_CUTOFF = 700
 
 
 @contextmanager