Changeset 4007:d08f9c5e38db for admin/js

Timestamp:

07/11/19 15:15:52 (6 years ago)

Author:

franck <carnet.franck.paul@…>

Branch:

default

Message:

Responsive tables (not yet applied for plugins), thanks Adrian Roselli for code (js/css)  http://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html

Location:

admin/js

Files:

• _blogs.js (modified) (1 diff)
• _comments.js (modified) (1 diff)
• _posts_list.js (modified) (1 diff)
• _users.js (modified) (1 diff)
• common.js (modified) (1 diff)

admin/js/_blogs.js

@@ -8 +8 @@
   $('#form-blogs td input[type=checkbox]').enableShiftClick();
   dotclear.condSubmit('#form-blogs td input[type=checkbox]', '#form-blogs #do-action');
+  dotclear.responsiveCellHeaders(document.querySelector('#form-blogs table'), '#form-blogs table', 1);
   $('#form-blogs').submit(function() {
     const action = $(this).find('select[name="action"]').val();

admin/js/_comments.js

@@ -54 +54 @@
   dotclear.commentsActionsHelper();
   dotclear.condSubmit('#form-comments td input[type=checkbox]', '#form-comments #do-action');
+  dotclear.responsiveCellHeaders(document.querySelector('#form-comments table'), '#form-comments table', 1);
   $('form input[type=submit][name=delete_all_spam]').click(function() {
     return window.confirm(dotclear.msg.confirm_spam_delete);

admin/js/_posts_list.js

@@ -55 +55 @@
   dotclear.condSubmit('#form-entries td input[type=checkbox]', '#form-entries #do-action');
   dotclear.postsActionsHelper();
+  dotclear.responsiveCellHeaders(document.querySelector('#form-entries table'), '#form-entries table', 1);
 });

admin/js/_users.js

@@ -7 +7 @@
   });
   dotclear.condSubmit('#form-users input[type="checkbox"]', '#form-users #do-action');
+  dotclear.responsiveCellHeaders(document.querySelector('#form-users table'), '#form-users table', 1);
   $('#form-users').submit(function() {
     const action = $(this).find('select[name="action"]').val();

admin/js/common.js

@@ -460 +460 @@
       window.open($(this).attr('href'));
     });
+  },
+
+  /**
+   * Add headers on each cells (responsive tables)
+   *
+   * @param      DOM elt   table         The table
+   * @param      string    selector      The selector
+   * @param      number    [offset=0]    The offset = number of firsts columns to ignore
+   * @param      boolean   [thead=false] True if titles are in thead rather than in the first tr of the body
+   */
+  responsiveCellHeaders: function(table, selector, offset = 0, thead = false) {
+    try {
+      let THarray = [];
+      const ths = table.getElementsByTagName("th");
+      for (let i = 0; i < ths.length; i++) {
+        for (let colspan = ths[i].colSpan; colspan > 0; colspan--) {
+          THarray.push(ths[i].innerText.replace('►', ''));
+        }
+      }
+      let styleElm = document.createElement("style");
+      let styleSheet;
+      document.head.appendChild(styleElm);
+      styleSheet = styleElm.sheet;
+      for (let i = offset; i < THarray.length; i++) {
+        styleSheet.insertRule(
+          selector + " td:nth-child(" + (i + 1) + ')::before {content:"' + THarray[i] + ' ";}',
+          styleSheet.cssRules.length
+        );
+      }
+      table.className += (table.className !== '' ? ' ' : '') + 'rch' + (thead ? ' rch-thead' : '');
+    } catch (e) {
+      console.log("responsiveCellHeaders(): " + e);
+    }
   },