Ellipis plugin for datatable - truncate too long text

4 files changed, 95 insertions, 3 deletions

diff --git a/ishtar_common/static/datatables/ellipsis.js b/ishtar_common/static/datatables/ellipsis.js
new file mode 100644
index 000000000..186e9e56a
--- /dev/null
+++ b/ishtar_common/static/datatables/ellipsis.js
@@ -0,0 +1,89 @@
+/**
+ * This data rendering helper method can be useful for cases where you have
+ * potentially large data strings to be shown in a column that is restricted by
+ * width. The data for the column is still fully searchable and sortable, but if
+ * it is longer than a give number of characters, it will be truncated and
+ * shown with ellipsis. A browser provided tooltip will show the full string
+ * to the end user on mouse hover of the cell.
+ *
+ * This function should be used with the `dt-init columns.render` configuration
+ * option of DataTables.
+ *
+ * It accepts three parameters:
+ *
+ * 1. `-type integer` - The number of characters to restrict the displayed data
+ *    to.
+ * 2. `-type boolean` (optional - default `false`) - Indicate if the truncation
+ *    of the string should not occur in the middle of a word (`true`) or if it
+ *    can (`false`). This can allow the display of strings to look nicer, at the
+ *    expense of showing less characters.
+ * 2. `-type boolean` (optional - default `false`) - Escape HTML entities
+ *    (`true`) or not (`false` - default).
+ *
+ *  @name ellipsis
+ *  @summary Restrict output data to a particular length, showing anything
+ *      longer with ellipsis and a browser provided tooltip on hover.
+ *  @author [Allan Jardine](http://datatables.net)
+ *  @requires DataTables 1.10+
+ *
+ * @returns {Number} Calculated average
+ *
+ *  @example
+ *    // Restrict a column to 17 characters, don't split words
+ *    $('#example').DataTable( {
+ *      columnDefs: [ {
+ *        targets: 1,
+ *        render: $.fn.dataTable.render.ellipsis( 17, true )
+ *      } ]
+ *    } );
+ *
+ *  @example
+ *    // Restrict a column to 10 characters, do split words
+ *    $('#example').DataTable( {
+ *      columnDefs: [ {
+ *        targets: 2,
+ *        render: $.fn.dataTable.render.ellipsis( 10 )
+ *      } ]
+ *    } );
+ */
+
+jQuery.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
+	var esc = function ( t ) {
+		return t
+			.replace( /&/g, '&' )
+			.replace( /</g, '&lt;' )
+			.replace( />/g, '&gt;' )
+			.replace( /"/g, '&quot;' );
+	};
+
+	return function ( d, type, row ) {
+		// Order, search and type get the original data
+		if ( type !== 'display' ) {
+			return d;
+		}
+
+		if ( typeof d !== 'number' && typeof d !== 'string' ) {
+			return d;
+		}
+
+		d = d.toString(); // cast numbers
+
+		if ( d.length <= cutoff ) {
+			return d;
+		}
+
+		var shortened = d.substr(0, cutoff-1);
+
+		// Find the last white space character in the string
+		if ( wordbreak ) {
+			shortened = shortened.replace(/\s([^\s]*)$/, '');
+		}
+
+		// Protect against uncontrolled HTML input
+		if ( escapeHtml ) {
+			shortened = esc( shortened );
+		}
+
+		return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
+	};
+};
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 72c6a9b65..f2ed41243 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -19,6 +19,7 @@
             src="{{STATIC_URL}}datatables/datatables.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/dataTables.bootstrap4.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/dataTables.buttons.min.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/ellipsis.js?ver={{VERSION}}"></script>
     <script src="{{STATIC_URL}}lightgallery/js/lightgallery.min.js?ver={{VERSION}}"></script>
     <!-- lightgallery plugins -->
     <script src="{{STATIC_URL}}lightgallery/js/lg-zoom.min.js?ver={{VERSION}}"></script>
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index ef407d553..f2ae42412 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -166,7 +166,7 @@ jQuery(document).ready(function(){
         'selectAll',
         'selectNone'
     ],
-    language: {
+    "language": {
         buttons: {
             selectAll: "{% trans 'Select all items' %}",
             selectNone: "{% trans 'Select none' %}"
@@ -179,7 +179,8 @@ jQuery(document).ready(function(){
     "columns": [
         { "data": "id", "visible": false },
         { "data": "link", "orderable": false },{% for col in extra_cols %}
-        { "data": "{{col}}", "defaultContent": "-"}{% if not forloop.last %},{% endif %}{% endfor %}
+        { "data": "{{col}}", "defaultContent": "-",
+          "render": $.fn.dataTable.render.ellipsis( 70, true ) }{% if not forloop.last %},{% endif %}{% endfor %}
     ]
   };
 
diff --git a/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html b/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html
index 84a9b9b03..a9e58f3e8 100644
--- a/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html
+++ b/ishtar_common/templates/ishtar/blocks/window_tables/dynamic_documents.html
@@ -68,7 +68,8 @@ setTimeout(
         "columns": [
             { "data": "id", "visible": false },
             { "data": "link", "orderable": false },{% for col in extra_cols %}
-            { "data": "{{col}}", "defaultContent": "-"}{% if not forloop.last %},{% endif %}{% endfor %}
+            { "data": "{{col}}", "defaultContent": "-",
+              "render": $.fn.dataTable.render.ellipsis( 70, true ) }{% if not forloop.last %},{% endif %}{% endfor %}
         ]
       };
       $.extend(datatable_options, datatables_default);