Add native JS support and create a new variable for js custom file

README.rst

@@ -65,6 +65,7 @@ Tabular permissions possible configurations and their default::
 
     TABULAR_PERMISSIONS_CONFIG = {
         'template': 'tabular_permissions/admin/tabular_permissions.html',
+        'js_file': 'tabular_permissions/tabular_permissions.js',
         'exclude': {
             'override': False,
             'apps': [],
@@ -83,6 +84,9 @@ Tabular permissions possible configurations and their default::
   the template which contains the permissions table, you can always customize this template by extending or overriding.
   Notice that there is a `style` block which you can override to easily edit the css.
 
+`js_file`
+  you can change this file for add your custom javascript code. Read how it works below.
+
 `exclude`
   Control which apps, models to show in the permissions table.
 

tabular_permissions/app_settings.py

@@ -3,6 +3,7 @@
 
 TABULAR_PERMISSIONS_CONFIG = {
     'template': 'tabular_permissions/admin/tabular_permissions.html',
+    'js_file': 'tabular_permissions/tabular_permissions.js',
     'exclude': {
         'override': False,
         'apps': [],
@@ -26,6 +27,7 @@
 
 AUTO_IMPLEMENT = TABULAR_PERMISSIONS_CONFIG['auto_implement']
 TEMPLATE = TABULAR_PERMISSIONS_CONFIG['template']
+JS_FILE = TABULAR_PERMISSIONS_CONFIG['js_file']
 
 _base_exclude_apps = ['sessions', 'contenttypes', 'admin']
 user_exclude = TABULAR_PERMISSIONS_CONFIG['exclude']

tabular_permissions/static/tabular_permissions/tabular_permissions.js

@@ -1,52 +1,82 @@
-window.onload = function() {
-  (function($){
-        $(".related-widget-wrapper:has(table)").addClass('related-widget-wrapper-user-permissions');
-        $('#perm_view_select_all').on('change', function () {
-            var state = $(this).prop('checked');
-            $('#tabular_permissions').find('tr td.view').find('input').each(function (i, e) {
-                $(e).prop('checked', state)
-            })
-        });
-        $('#perm_add_select_all').on('change', function () {
-            var state = $(this).prop('checked');
-            $('#tabular_permissions').find('tr td.add').find('input').each(function (i, e) {
-                $(e).prop('checked', state)
-            })
+'use strict';
+{
+    window.addEventListener('load', function(e) {
+
+        // Look for view select all
+        const perm_view_select_all = this.document.getElementById('perm_view_select_all');
+        perm_view_select_all.addEventListener('change', function(){
+            const state = this.checked;
+            const perm_inputs = document.getElementById("tabular_permissions").querySelectorAll("td.view");
+            perm_inputs.forEach(element => {
+                element.getElementsByTagName("input")[0].checked = state;
+            });
         });
-        $('#perm_change_select_all').on('change', function () {
-            var state = $(this).prop('checked');
-            $('#tabular_permissions').find('tr td.change').find('input').each(function (i, e) {
-                $(e).prop('checked', state)
-            })
+
+        // Look for add select all
+        const perm_add_select_all = this.document.getElementById('perm_add_select_all');
+        perm_add_select_all.addEventListener('change', function(){
+            const state = this.checked;
+            const perm_inputs = document.getElementById("tabular_permissions").querySelectorAll("td.add");
+            perm_inputs.forEach(element => {
+                element.getElementsByTagName("input")[0].checked = state;
+            });
+        }); 
+
+        // Look for change select all
+        const perm_change_select_all = this.document.getElementById('perm_change_select_all');
+        perm_change_select_all.addEventListener('change', function(){
+            const state = this.checked;
+            const perm_inputs = document.getElementById("tabular_permissions").querySelectorAll("td.change");
+            perm_inputs.forEach(element => {
+                element.getElementsByTagName("input")[0].checked = state;
+            });
         });
-        $('#perm_delete_select_all').on('change', function () {
-            var state = $(this).prop('checked');
-            $('#tabular_permissions').find('tr td.delete').find('input').each(function (i, e) {
-                $(e).prop('checked', state)
-            })
+
+        // Look for change select all
+        const perm_delete_select_all = document.getElementById('perm_delete_select_all');
+        perm_delete_select_all.addEventListener('change', function(){
+            const state = this.checked;
+            const perm_inputs = document.getElementById("tabular_permissions").querySelectorAll("td.delete");
+            perm_inputs.forEach(element => {
+                element.getElementsByTagName("input")[0].checked = state;
+            });
         });
-        $('.select-all.select-row').on('change', function(){
-            var $this = $(this);
-            $this.parents('tr').find('.checkbox').not('.select-all').each(function(i,elem){
-                $(elem).prop('checked', $this.prop('checked'));
-            })
+
+        // Look for select all in row
+        const select_all_row = this.document.querySelectorAll(".select-all.select-row");
+        select_all_row.forEach(input => {
+            input.addEventListener('change', function(){
+                const tr_parent = this.parentElement.parentElement.parentElement;
+                const checkboxes = tr_parent.querySelectorAll("input.checkbox:not(.select-all)");
+
+                checkboxes.forEach(element => {
+                    element.checked = this.checked;
+                });
+            });
         });
-        $('form').on('submit', function () {
-            var user_perms = [];
-            var table_permissions = $('#tabular_permissions');
-            var input_name = table_permissions.attr('data-input-name');
-            table_permissions.find("input[type=checkbox]").not('.select-all').each(function (i, elem) {
-                var $elem = $(elem);
-                if ($(elem).prop('checked')) {
-                    user_perms.push($elem.attr('data-perm-id'))
+
+        // Submit form 
+        const form = this.document.querySelectorAll("form:not(#logout-form)")[0];
+
+        form.addEventListener('submit', function(){
+            const user_perms = [];
+            const table_permissions = document.getElementById("tabular_permissions");
+            const input_name = table_permissions.getAttribute("data-input-name");
+
+
+            table_permissions.querySelectorAll("input[type=checkbox]:not(.select-all)").forEach(element => {
+                if(element.checked){
+                    user_perms.push(element.getAttribute("data-perm-id"));
                 }
             });
-            var user_group_permissions = $('[name=' + input_name +']');
-            var output = [];
-            $.each(user_perms, function (key, value) {
-                output.push('<option value="' + value + '" selected="selected" style="display:none"></option>');
+
+            const user_group_permissions = document.querySelector('[name=' + input_name + ']');
+            Object.entries(user_perms).forEach(entry => {
+                const [key, value] = entry;
+                user_group_permissions.insertAdjacentHTML('beforeend',
+                '<option value="' + value + '" selected="selected" style="display:none"></option>')
             });
-            user_group_permissions.append(output);
-        })
-    })(django.jQuery);
-};
+        });
+
+    });
+}

tabular_permissions/widgets.py

@@ -11,7 +11,7 @@
 from django.utils.safestring import mark_safe
 from .app_settings import EXCLUDE_FUNCTION, EXCLUDE_APPS, \
     EXCLUDE_MODELS, TEMPLATE, USE_FOR_CONCRETE, TRANSLATION_FUNC, APPS_CUSTOMIZATION_FUNC, \
-    CUSTOM_PERMISSIONS_CUSTOMIZATION_FUNC
+    CUSTOM_PERMISSIONS_CUSTOMIZATION_FUNC, JS_FILE
 from .helpers import get_perm_name
 
 
@@ -26,7 +26,7 @@ def get_reminder_permissions_iterator(choices, reminder_perms):
 
 class TabularPermissionsWidget(FilteredSelectMultiple):
     class Media:
-        js = ('tabular_permissions/tabular_permissions.js',)
+        js = (JS_FILE,)
 
     def __init__(self, verbose_name, is_stacked, input_name='user_permissions', attrs=None, choices=()):
         super().__init__(verbose_name, is_stacked, attrs, choices)