Initial commit

site/OFF_plugins/kirby-index-field/fields/index/assets/js/main.js

@@ -0,0 +1,152 @@
+(function($) {
+
+  var Indexfield = function (el) {
+
+    var element = $(el);
+    var table = element.find('table')
+    var columns = table.data('indexfield-columns');
+    var entriesapi = table.data('indexfield-entries');
+    var rows = table.data('indexfield-rows');
+    var order = table.data('indexfield-order');
+
+    var headers = Object.keys(columns).map(function (key) {
+      if ($.isPlainObject(columns[key])) {
+        return $('<th>' + columns[key].label + '</th>')
+      } else {
+        return $('<th>' + columns[key] + '</th>')
+      }
+    })
+
+    table.append(tableHead(headers, $('<thead></thead>')))
+    table.append(tableHead(headers, $('<tfoot></tfoot>')))
+
+    var defs = columnDefs(columns)
+    
+    var table = table.DataTable({
+      columnDefs: defs,
+      pageLength: rows,
+      order: [[ 0, order ]],
+      ajax: {
+        url: entriesapi,
+        dataSrc: function (json) {
+          var formatted = Object.keys(json).map(function (k) {
+            var i = json[k]
+            var result = []
+            
+            Object.keys(columns).forEach(function (key) {
+              
+              /**
+               * 1. Check for key under content object (page fields)
+               * 2. Check for key under meta object (file fields)
+               * 3. Use name as fallback for title on files
+               * 4. Check for key under top level object
+               * 5. Return empty string if no value
+               */
+
+              var item = i.content && i.content[key]
+                ? i.content[key]
+                : i.meta && i.meta[key]
+                ? i.meta[key]
+                : key === 'title' && !i.title && i.name
+                ? i.name
+                : i[key]
+                ? i[key]
+                : ''
+
+              result.push(item)
+            })
+
+            return result.concat([editButton(i.panelurl)])
+          })
+
+          return formatted
+        }
+      }
+    });
+
+    // click row to edit
+    table.on('click', 'tbody tr', function (e) {
+      var $target = $(e.target)
+      if (!$target.is('i') && !$target.is('a')) {
+        var $edit = $(e.currentTarget).find('.structure-edit-button')
+        if ($edit.length) $edit.get(0).click()
+      }
+    })
+
+    function editButton (editurl) {
+      return ' \
+        <a class="btn structure-edit-button" href="' + editurl + '"> \
+          <i class="icon fa fa-pencil"></i> \
+        </a> \
+      '
+    }
+
+    function tableHead (headers, $element) {
+      var $row = $('<tr></tr>')
+      headers.forEach(function ($header) {
+        $row.append($header.clone())
+      })
+
+      // edit col
+      $row.append($('<th width="18"></th>'))
+
+      return $element.append($row);
+    }
+
+    function columnDefs () {
+      // column defs handle custom column widths and classnames
+      var colCount = Object.keys(columns).length
+    
+      var defs = [
+        { orderable: false, targets: [ colCount ] }
+      ]
+
+      Object.keys(columns).forEach(function (key, i) {
+        if (columns[key].width) {
+          defs.push({
+            width: columns[key].width,
+            targets: i
+          })
+        }
+        if (columns[key].class) {
+          defs.push({
+            className: columns[key].class,
+            targets: i
+          })
+        }
+        if ($.isPlainObject(columns[key]) && columns[key].hasOwnProperty('visible')) {
+          defs.push({
+            visible: columns[key].visible,
+            targets: i
+          })
+        }
+        if ($.isPlainObject(columns[key]) && columns[key].hasOwnProperty('sort')) {
+          defs.push({
+            orderable: columns[key].sort,
+            targets: i
+          })
+        }
+      })
+
+      return defs
+    }
+
+  };
+
+  $.fn.indexfield = function () {
+
+    return this.each(function () {
+
+      if ($(this).data('indexfield')) {
+        return $(this);
+      } else {
+        var indexfield = new Indexfield(this);
+        $(this).data('indexfield', indexfield);
+        return $(this);
+      }
+
+    });
+
+  };
+
+})(jQuery);