Replaced datatables by own implementation, less overhead easier to handle and not broken in Firefox

js/apps/system/aardvark/frontend/js/collections/arangoDocuments.js

@@ -147,7 +147,6 @@
     },
 
     getDocuments: function (callback) {
-//      window.progressView.show("Fetching documents...");
       window.progressView.showWithDelay(300, "Fetching documents...");
       var self = this,
           query,

js/apps/system/aardvark/frontend/js/templates/documentsView.ejs

@@ -304,18 +304,10 @@
 <div id="documentsDiv" class="innerContent">
 
 <div id="uploadMessages"></div>
-<table cellpadding="0" cellspacing="0" border="0" class="display arangoDataTable" id="documentsTableID">
+<div id="documentsTableID_wrapper" class="dataTables_wrapper" role="grid">
-  <thead>
+  <table cellpadding="0" cellspacing="0" border="0" class="display arangoDataTable dataTable" id="documentsTableID">
-    <tr>
-      <th>Content</th>
-      <th>_key</th>
-      <th>
-        <a id="addDocumentButton" class="pull-right addButton"><span class="arangoicon icon_arangodb_roundplus" title="Add a document"></span></a>
-      </th>
-    </tr>
-  </thead>
   </table>
-
+</div>
     <div id="documentsToolbarFL">
       <div id="documentsToolbarF" class="pagination-line">
       </div>

js/apps/system/aardvark/frontend/js/templates/loadingTableView.ejs

@@ -0,0 +1,17 @@
+<script id="loadingTableView.ejs" type="text/template">
+<thead>
+  <tr role="row">
+    <th class="sorting_disabled docsFirstCol" role="columnheader" rowspan="1" colspan="1">Content</th>
+    <th class="sorting_disabled docsSecCol" role="columnheader" rowspan="1" colspan="1">_key</th>
+    <th class="sorting_disabled docsThirdCol" role="columnheader" rowspan="1" colspan="1">
+      <a id="addDocumentButton" class="pull-right addButton"><span class="arangoicon icon_arangodb_roundplus" title="Add a document"></span></a>
+    </th>
+  </tr>
+</thead>
+<tbody>
+  <tr class="odd">
+    <td valign="top" colspan="3" class="dataTables_empty">Loading...</td>
+  </tr>
+</tbody>
+</script>
+

js/apps/system/aardvark/frontend/js/templates/tableView.ejs

@@ -0,0 +1,59 @@
+<script id="tableView.ejs" type="text/template">
+<%
+var escaped = function (value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+  .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+};
+var cutByResolution = function (str) {
+  if (str.length > 1024) {
+    return escaped(str.substr(0, 1024)) + '...';
+  }
+  return escaped(str);
+};
+%>
+
+<thead>
+  <tr role="row">
+    <th class="sorting_disabled docsFirstCol" role="columnheader" rowspan="1" colspan="1">Content</th>
+    <th class="sorting_disabled docsSecCol" role="columnheader" rowspan="1" colspan="1">_key</th>
+    <th class="sorting_disabled docsThirdCol" role="columnheader" rowspan="1" colspan="1">
+      <a id="addDocumentButton" class="pull-right addButton"><span class="arangoicon icon_arangodb_roundplus" title="Add a document"></span></a>
+    </th>
+  </tr>
+</thead>
+<tbody>
+  <%
+  if (docs.length === 0) {
+  %>
+    <tr class="odd">
+      <td valign="top" colspan="3" class="dataTables_empty">No documents</td>
+    </tr>
+  <%
+  }
+  var odd = true;
+  docs.forEach(function(d) {
+    var tempObj = {};
+    $.each(d.attributes.content, function(k, v) {
+      if (! (k === '_id' || k === '_rev' || k === '_key')) {
+        tempObj[k] = v;
+      }
+    });
+    var tmpObj = JSON.stringify(tempObj); %>
+  <tr class="<%=odd?'odd':'even'%>" id="row_<%=d.attributes.key %>">
+    <td class="docsFirstCol">
+      <pre class="prettify" title="<%=escaped(tmpObj)%>"><%= cutByResolution(tmpObj) %></pre>
+    </td>
+    <td class="docsSecCol">
+    <div class="key"><%= d.attributes.key %></div>
+    </td>
+    <td class="docsThirdCol">
+      <a class="deleteButton">
+      <span class="icon_arangodb_roundminus" data-original-title="Delete document" title="Delete document"></span></a>
+    </td>
+  </tr>
+  <% 
+    odd = !odd;
+    });
+  %>
+</tbody>
+</script>

js/apps/system/aardvark/frontend/js/views/documentsView.js

@@ -19,6 +19,11 @@
 
     allowUpload: false,
 
+    el: '#content',
+    table: '#documentsTableID',
+
+    template: templateEngine.createTemplate("documentsView.ejs"),
+
     collectionContext : {
       prev: null,
       next: null
@@ -29,6 +34,12 @@
     initialize : function () {
       this.documentStore = this.options.documentStore;
       this.collectionsStore = this.options.collectionsStore;
+      this.tableView = new window.TableView({
+        el: this.table,
+        collection: this.collection
+      });
+      this.tableView.setRowClick(this.clicked.bind(this));
+      this.tableView.setRemoveClick(this.remove.bind(this));
     },
 
     setCollectionId : function (colid, pageid) {
@@ -43,10 +54,6 @@
       this.collectionModel = this.collectionsStore.get(colid);
     },
 
-    alreadyClicked: false,
-
-    el: '#content',
-    table: '#documentsTableID',
     getDocsCallback: function() {
       //Hide first/last pagination
       $('#documents_last').css("visibility", "hidden");
@@ -55,8 +62,6 @@
       this.renderPaginationElements();
     },
 
-    template: templateEngine.createTemplate("documentsView.ejs"),
-
     events: {
       "click #collectionPrev"      : "prevCollection",
       "click #collectionNext"      : "nextCollection",
@@ -68,8 +73,6 @@
       "click #filterSend"          : "sendFilter",
       "click #addFilterItem"       : "addFilterItem",
       "click .removeFilterItem"    : "removeFilterItem",
-      "click #documentsTableID tbody tr" : "clicked",
-      "click #deleteDoc"           : "remove",
       "click #deleteSelected"      : "deleteSelectedDocs",
       "click #moveSelected"        : "moveSelectedDocs",
       "click #addDocumentButton"   : "addDocument",
@@ -158,7 +161,6 @@
       this.removeAllFilterItems();
       $('#documentSize').val(this.collection.getPageSize());
 
-      this.clearTable();
       $('#documents_last').css("visibility", "visible");
       $('#documents_first').css("visibility", "visible");
       this.addDocumentSwitch = true;
@@ -265,7 +267,8 @@
       $('#importCollection').removeClass('activated');
       $('#exportCollection').removeClass('activated');
       this.markFilterToggle();
-      $('#markDocuments').toggleClass('activated'); this.changeEditMode();
+      $('#markDocuments').toggleClass('activated');
+      this.changeEditMode();
       $('#filterHeader').hide();
       $('#importHeader').hide();
       $('#indexHeader').hide();
@@ -277,7 +280,8 @@
       $('#indexCollection').removeClass('activated');
       $('#importCollection').removeClass('activated');
       $('#exportCollection').removeClass('activated');
-      $('#markDocuments').removeClass('activated'); this.changeEditMode(false);
+      $('#markDocuments').removeClass('activated');
+      this.changeEditMode(false);
       this.markFilterToggle();
       this.activeFilter = true;
       $('#importHeader').hide();
@@ -299,7 +303,8 @@
       $('#indexCollection').removeClass('activated');
       $('#importCollection').removeClass('activated');
       $('#filterHeader').removeClass('activated');
-      $('#markDocuments').removeClass('activated'); this.changeEditMode(false);
+      $('#markDocuments').removeClass('activated');
+      this.changeEditMode(false);
       $('#exportCollection').toggleClass('activated');
       this.markFilterToggle();
       $('#exportHeader').slideToggle(200);
@@ -312,7 +317,8 @@
     importCollection: function () {
       this.markFilterToggle();
       $('#indexCollection').removeClass('activated');
-      $('#markDocuments').removeClass('activated'); this.changeEditMode(false);
+      $('#markDocuments').removeClass('activated');
+      this.changeEditMode(false);
       $('#importCollection').toggleClass('activated');
       $('#exportCollection').removeClass('activated');
       $('#importHeader').slideToggle(200);
@@ -326,7 +332,8 @@
       this.markFilterToggle();
       $('#importCollection').removeClass('activated');
       $('#exportCollection').removeClass('activated');
-      $('#markDocuments').removeClass('activated'); this.changeEditMode(false);
+      $('#markDocuments').removeClass('activated');
+      this.changeEditMode(false);
       $('#indexCollection').toggleClass('activated');
       $('#newIndexView').hide();
       $('#indexEditView').show();
@@ -344,6 +351,7 @@
         $('.addButton').fadeIn();
         $('.selected-row').removeClass('selected-row');
         this.editMode = false;
+        this.tableView.setRowClick(this.clicked.bind(this));
       }
       else {
         $('#documentsTableID tbody tr').css('cursor', 'copy');
@@ -351,6 +359,7 @@
         $('.addButton').fadeOut();
         $('.selectedCount').text(0);
         this.editMode = true;
+        this.tableView.setRowClick(this.editModeClick.bind(this));
       }
     },
 
@@ -391,7 +400,6 @@
           self.collection.addFilter(f.attribute, f.operator, f.value);
         }
       });
-      this.clearTable();
       this.collection.setToFirst();
 
       this.collection.getDocuments(this.getDocsCallback.bind(this));
@@ -701,10 +709,7 @@
     },
 
     remove: function (a) {
-      this.target = a.currentTarget;
+      this.docid = $(a.currentTarget).closest("tr").attr("id").substr(4);
-      var thiselement = a.currentTarget.parentElement;
-      this.idelement = $(thiselement).prev().prev();
-      this.alreadyClicked = true;
       $("#confirmDeleteBtn").attr("disabled", false);
       $('#docDeleteModal').modal('show');
     },
@@ -722,12 +727,8 @@
     reallyDelete: function () {
       var self = this;
       var row = $(self.target).closest("tr").get(0);
-      var hash = window.location.hash.split("/");
-      var page = hash[3];
 
       var deleted = false;
-      this.docid = $(self.idelement).next().text();
-
       var result;
       if (this.type === 'document') {
         result = this.documentStore.deleteDocument(
@@ -755,29 +756,19 @@
       }
 
       if (deleted === true) {
-        $('#documentsTableID').dataTable().fnDeleteRow(
-          $('#documentsTableID').dataTable().fnGetPosition(row)
-        );
-        $('#documentsTableID').dataTable().fnClearTable();
         this.collection.getDocuments(this.getDocsCallback.bind(this));
         $('#docDeleteModal').modal('hide');
       }
 
     },
-    clicked: function (event) {
-      var self = event.currentTarget;
 
-      if (this.alreadyClicked === true) {
+    editModeClick: function(event) {
-        this.alreadyClicked = false;
+      var target = $(event.currentTarget);
-        return 0;
-      }
 
-      if(this.editMode === true) {
+      if(target.hasClass('selected-row')) {
-        if($(self).hasClass('selected-row')) {
+        target.removeClass('selected-row');
-          $(event.currentTarget).removeClass('selected-row');
+      } else {
-        }
+        target.addClass('selected-row');
-        else {
-          $(event.currentTarget).addClass('selected-row');
       }
 
       var selected = this.getSelectedDocs();
@@ -807,83 +798,15 @@
           }
         }
       });
-        return;
-      }
-
-      var aPos = $(this.table).dataTable().fnGetPosition(self);
-      if (aPos === null) {
-        // headline
-        return;
-      }
-
-      var checkData = $(this.table).dataTable().fnGetData(self);
-      if (checkData && checkData[1] === '') {
-        this.addDocument();
-        return;
-      }
-      var docId = self.firstChild;
-      var NeXt = $(docId).next().text();
-      window.location.hash = "#collection/" + this.collection.collectionID
-          + "/" + NeXt;
     },
 
-    initTable: function () {
+    clicked: function (event) {
-      $('#documentsTableID').dataTable({
+      var self = event.currentTarget;
-        "bSortClasses": false,
+      window.App.navigate("collection/" + this.collection.collectionID + "/" + $(self).attr("id").substr(4), true);
-        "bFilter": false,
-        "bPaginate":false,
-        "bRetrieve": true,
-        "bSortable": false,
-        "bSort": false,
-        "bLengthChange": false,
-        "bAutoWidth": false,
-        "iDisplayLength": -1,
-        "bJQueryUI": false,
-        "aoColumns": [
-          { "sClass":"docsFirstCol","bSortable": false},
-          { "sClass":"docsSecCol", "bSortable": false},
-          { "bSortable": false, "sClass": "docsThirdCol"}
-        ],
-        "oLanguage": { "sEmptyTable": "Loading..."}
-      });
-    },
-    clearTable: function() {
-      $(this.table).dataTable().fnClearTable();
     },
+
     drawTable: function() {
-      this.clearTable();
+      this.tableView.setElement(this.$(this.table)).render();
-      var self = this;
-
-        if (this.collection.size() === 0) {
-        $('.dataTables_empty').text('No documents');
-      }
-      else {
-          this.collection.each(function(value, key) {
-          var tempObj = {};
-          $.each(value.attributes.content, function(k, v) {
-            if (! (k === '_id' || k === '_rev' || k === '_key')) {
-              tempObj[k] = v;
-            }
-          });
-
-          $(self.table).dataTable().fnAddData(
-            [
-              '<pre class="prettify" title="'
-              + self.escaped(JSON.stringify(tempObj))
-              + '">'
-              + self.cutByResolution(JSON.stringify(tempObj))
-              + '</pre>',
-
-              '<div class="key">'
-              + value.attributes.key
-              + '</div>',
-
-              '<a id="deleteDoc" class="deleteButton">'
-              + '<span class="icon_arangodb_roundminus" data-original-title="'
-              +'Delete document" title="Delete document"></span><a>'
-            ]
-          );
-        });
 
       // we added some icons, so we need to fix their tooltips
       arangoHelper.fixTooltips(".icon_arangodb, .arangoicon", "top");
@@ -895,8 +818,6 @@
         transparent: true,
         showNum: false
       });
-
-      }
     },
 
     checkCollectionState: function() {
@@ -917,14 +838,14 @@
     },
 
     render: function() {
+      $(this.el).html(this.template.render({}));
+      this.tableView.setElement(this.$(this.table)).drawLoading();
+
       this.collectionContext = this.collectionsStore.getPosition(
         this.collection.collectionID
       );
 
-      $(this.el).html(this.template.render({}));
-
       this.getIndex();
-      this.initTable();
       this.breadcrumb();
 
       this.checkCollectionState();
@@ -945,7 +866,6 @@
       $('.upload-info').tooltip();
 
       arangoHelper.fixTooltips(".icon_arangodb, .arangoicon", "top");
-      this.drawTable();
       this.renderPaginationElements();
       this.selectActivePagesize();
       this.markFilterToggle();
@@ -953,7 +873,6 @@
     },
 
     rerender : function () {
-      this.clearTable();
       this.collection.getDocuments(this.getDocsCallback.bind(this));
     },
 
@@ -983,16 +902,7 @@
         '</div>'
       );
     },
-    cutByResolution: function (string) {
+
-      if (string.length > 1024) {
-        return this.escaped(string.substr(0, 1024)) + '...';
-      }
-      return this.escaped(string);
-    },
-    escaped: function (value) {
-      return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-    },
     resetIndexForms: function () {
       $('#indexHeader input').val('').prop("checked", false);
       $('#newIndexType').val('Cap').prop('selected',true);

js/apps/system/aardvark/frontend/js/views/tableView.js

@@ -0,0 +1,55 @@
+/*jshint browser: true */
+/*jshint unused: false */
+/*global Backbone, window, templateEngine, $ */
+
+(function() {
+  "use strict";
+
+  window.TableView = Backbone.View.extend({
+
+    template: templateEngine.createTemplate("tableView.ejs"),
+    loading: templateEngine.createTemplate("loadingTableView.ejs"),
+
+    initialize: function() {
+      this.rowClickCallback = this.options.rowClick;
+    },
+
+    events: {
+      "click tbody tr": "rowClick",
+      "click .deleteButton": "removeClick",
+    },
+
+    rowClick: function(event) {
+      if (this.hasOwnProperty("rowClickCallback")) {
+        this.rowClickCallback(event); 
+      }
+    },
+
+    removeClick: function(event) {
+      if (this.hasOwnProperty("removeClickCallback")) {
+        this.removeClickCallback(event); 
+        event.stopPropagation();
+      }
+    },
+
+    setRowClick: function(callback) {
+      this.rowClickCallback = callback;
+    },
+
+    setRemoveClick: function(callback) {
+      this.removeClickCallback = callback;
+    },
+
+    render: function() {
+      $(this.el).html(this.template.render({
+        docs: this.collection
+      }));
+    },
+
+    drawLoading: function() {
+      $(this.el).html(this.loading.render({}));
+    }
+
+  });
+
+}());

js/apps/system/aardvark/manifest.json

@@ -62,6 +62,8 @@
         "frontend/js/templates/testView.ejs",
         "frontend/js/templates/userBarView.ejs",
         "frontend/js/templates/userManagementView.ejs",
+        "frontend/js/templates/tableView.ejs",
+        "frontend/js/templates/loadingTableView.ejs",
         "frontend/html/body.html.part",
         "frontend/html/scripts.html.part",
         "frontend/html/end.html.part"
@@ -136,6 +138,7 @@
         "frontend/js/collections/notificationCollection.js",
         "frontend/js/collections/arangoQueries.js",
         "frontend/js/views/_paginationView.js",
+        "frontend/js/views/tableView.js",
         "frontend/js/views/apiView.js",
         "frontend/js/views/appDocumentationView.js",
         "frontend/js/views/applicationsView.js",