Javascript code cleanup & coverage

.eslintrc

@@ -27,7 +27,10 @@
     "Blob": true,
     "Set": true,
     "ResizeObserver": true,
-
+    "FormData": true,
+    "URL": true,
+    "URLSearchParams": true,
+
     /* External libraries */
     "jQuery": true,
     "$": true,

CHANGELOG.txt

@@ -3,6 +3,8 @@
   UPGRADE NOTES :
     - If you upgrade your MariaDB server to 10.7+, you have to convert all the UUID fields
       (which were just CharFields before MariaDB 10.7) to real UUID fields.
+    - Many fallbacks and helpers for older browsers (e.g IE 9 & 10) are removed. Read carefully the changelog, it
+      contains tips to upgrade your code.
 
   Users side :
   ------------
@@ -104,6 +106,7 @@
               The class 'django.forms.fields.CallableChoiceIterator' has been removed ;
               use 'django.utils.choices.CallableChoiceIterator' instead.
         - https://docs.djangoproject.com/en/5.1/releases/5.1/
+    - The version of 'underscorejs' is now '1.13.7'.
 
     Non breaking changes :
     ----------------------
@@ -179,10 +182,26 @@
                     - Add allowEventOverlaps property (boolean or method).
                     - Add allowEventCreate property (boolean).
         # Javascript:
+            * Deprecations:
+                - Array.copy(iterable, start, end) is deprecated; Use native code Array.from(iterable).slice(start, end) instead.
+                - creme.ajax.URL is deprecated; use RelativeURL instead
+                - creme.ajax.parseUrl() is deprecated; Use _.urlAsDict() instead
+                - creme.ajax.params() is deprecated; Use _.encodeURLSearch() instead
+                - creme.ajax.decodeSearchData() is deprecated; Use _.decodeURLSearchData() instead
+                - creme.exports.exportAs() is deprecated; Use creme.lv_widget.DownloadAction instead.
+                - creme.utils.confirmSubmit() is deprecated; Use the new 'creme_core-hatmenubar-delete' or 'delete' actions instead.
+                - creme.utils.showPageLoadOverlay() is deprecated;  Use creme.dialog.Overlay instead.
+                - creme.utils.hidePageLoadOverlay() is deprecated;  Use creme.dialog.Overlay instead.
+                - creme.utils.overlay() is deprecated;  Use creme.dialog.Overlay instead.
+         - Add RelativeURL() class as an alternative of URL() that do not accepts relative paths (e.g '/list?page=1' is not a valid URL)
+            * Use Object.assign instead of $.extend to remove the dependency to jQuery for : RGBColor, DateFaker, BrowserVersion & Assert.
+            * Use Object.assign instead of $.extend for sketch components.
             * FormDialog:
                 - Form submit error responses with HTML can either replace the default overlay content or the frame content.
                 - New creme.dialog.Frame option 'fillOnError'; if enabled the html error response replaces the content.
                 - New creme.dialog.Dialog option 'fillFrameOnError'; if enabled the html error response replaces the content.
+            * creme.ajax.jqueryAjaxSend() arguments have changed from (url, data, successCb, errorCb, options) to ({url: url, body: data, ...options}, {done: successCb, fail: errorCb}).
+            * Added _.pop() method that works like python dict.pop().
 
     Breaking changes :
     ------------------
@@ -213,6 +232,38 @@
                 - "creme_core-hatmenubar-form"
                 - "creme_core-hatmenubar-update"
                 - "creme_core-hatmenubar-view"
+            - Javascript :
+                * ArrayTools & GeneratorTools are no longer used (only by jqplot). So drop them and use underscore or d3 instead.
+                * Drop fallbacks or helpers for widely implemented Array methods :
+                    - Use Array.prototype.some() native implementation.
+                    - Array.prototype.unique() is removed; Use _.uniq(iterable) instead.
+                    - Array.prototype.removeAt() is removed; Use Array.prototype.splice(index, 1) instead.
+                    - Array.prototype.insertAt() is removed; Use Array.prototype.splice(index, 0, val1, val2, ...) instead.
+                    - Array.prototype.inArray() is removed; Use Array.prototype.indexOf(value) instead.
+                    - Array.prototype.getRange() is removed; Use Array.prototype.slice() instead.
+                    - Array.prototype.exfiltrate() is removed; Use _.without(iterable, val1, val2, ...) instead.
+                    - Array.prototype.contains() is removed; Use Array.prototype.includes(value) instead.
+                * Remove fallbacks for HTMLDocument, CSSStyleDeclaration & Event classes.
+                * Drop fallbacks or helpers for widely implemented String methods :
+                    - Use Array.prototype.startsWith() native implementation.
+                    - Use Array.prototype.endsWith() native implementation.
+                    - Use Array.prototype.trim() native implementation.
+                    - Array.prototype.ltrim() is removed; Use Array.prototype.trimStart() instead.
+                    - Array.prototype.rtrim() is removed; Use Array.prototype.trimEnd() instead.
+                * Drop fallbacks for console methods: log(), warn() & error()
+                * Drop fallbacks for widely implemented Object methods :
+                    - Object.keys()
+                    - Object.values()
+                    - Object.entries()
+                    - Object.getPrototypeOf()
+                * Drop creme.widget.template(); Use String.prototype.template instead.
+                * Refactor of creme.ajax.Backend:
+                    - Drop jquery.forms plugin; Use FormData standard API instead.
+                    - $.validateHTML5() is removed (came along jquery.forms)
+                    - Add support for download & upload progress event : new 'uploadProgress' & 'progress' options.
+                        - Refactor 'ListViewController' & 'creme.bricks.BricksReloader'
+                        - 'creme.ajax.Query' now accepts new 'uploadProgress' & 'progress' options.
+                * creme.ajax.URL.prototype.relativeTo() is replaced by RelativeURL.prototype.fullPath()
             - Apps :
                 * Activities:
                     - Refactor creme.ActivityCalendar : can be now used as independent component.
@@ -296,6 +347,11 @@
               (good news, some {% block %} have been added) :
                 - "creme_core/bricks/base/hat-card.html"
                 - "creme_core/bricks/generic/hat-bar.html"
+        # Javascript :
+            - Refactor creme.notification.NotificationBox & add unit tests
+                - Toggle fetch 'job' when disabling a tab or window.
+                - Elapsed time from message creation is now updated each minute.
+            - Removed ChainedSelect.clone() method : not used and does not work anyway.
         # Apps :
             * Creme_config :
                 - In the brick 'GenericModelBrick', "meta" is not injected in the context anymore.

creme/activities/static/activities/js/activities-calendar.js

@@ -155,8 +155,8 @@ creme.ActivityCalendarController = creme.component.Component.sub({
     },
 
     _loadStateFromUrl: function(url) {
-        var hash = creme.ajax.parseUrl(url || this._currentUrl()).hash || '';
-        var data = creme.ajax.decodeSearchData(hash.slice(1));
+        var hash = _.urlAsDict(url || this._currentUrl()).hash || '';
+        var data = _.decodeURLSearchData(hash.slice(1));
         var view = data.view && (this.fullCalendarViewNames().indexOf(data.view) !== -1 ? data.view : this.prop('defaultView'));
         var date = data.date ? moment(data.date) : undefined;
         date = date && date.isValid() ? date : undefined;
@@ -165,7 +165,7 @@ creme.ActivityCalendarController = creme.component.Component.sub({
     },
 
     _storeStateInUrl: function(state) {
-        creme.history.push('#' + creme.ajax.param({
+        creme.history.push('#' + _.encodeURLSearch({
             view: state.view,
             date: state.date.format('YYYY-MM-DD')
         }));

creme/creme_config/static/creme_config/js/tests/custom-forms-brick.js

@@ -326,7 +326,10 @@ QUnit.test('creme.FormGroupsController (reorder groups)', function(assert) {
             {brick_id: ['creme_core-test'], extra_data: '{}'},
             {dataType: 'json', delay: 0, enableUriSearch: false, sync: true}
           ]
-    ], this.mockBackendCalls());
+    ], this.mockBackendCalls().map(function(e) {
+        var request = _.omit(e[3], 'progress');
+        return [e[0], e[1], e[2], request];
+    }));
 });
 
 
@@ -382,7 +385,10 @@ QUnit.test('creme.FormGroupsController (reorder groups, failure)', function(asse
              {"brick_id": ["creme_core-test"], "extra_data": "{}"},
              {dataType: "json", delay: 0, enableUriSearch: false, sync: true}
         ]
-    ], this.mockBackendCalls());
+    ], this.mockBackendCalls().map(function(e) {
+        var request = _.omit(e[3], 'progress');
+        return [e[0], e[1], e[2], request];
+    }));
 });
 
 QUnit.test('creme.FormGroupsController (toggle item)', function(assert) {

creme/creme_core/static/chantilly/creme_core/css/header_menu.css

@@ -413,7 +413,7 @@ span.create-group-entry {
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
 }
 
-.notification-box.notification-box-activated .notification-panel {
+.notification-box:hover .notification-panel {
     visibility: visible;
     opacity: 1;
 }

creme/creme_core/static/chantilly/creme_core/css/list_view.css

@@ -86,6 +86,39 @@
     float: right;
 }
 
+.ui-creme-listview-standalone .list-controls {
+    margin-top: -10px;
+    margin-right: 8px;
+}
+
+.ui-creme-listview-standalone.is-loading {
+    overflow: visible !important;
+}
+
+.ui-creme-listview-standalone .floatThead-container ~ .ui-creme-overlay {
+    z-index: 99;
+}
+
+.ui-creme-listview .lv-loading {
+    background-color: white;
+    opacity: .70;
+    filter: Alpha(Opacity=70);
+}
+
+.ui-creme-listview .lv-loading .overlay-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ui-creme-listview .lv-loading .overlay-content span {
+    padding-left: 10px;
+}
+
+.ui-creme-listview-popup .list-controls {
+    margin-top: 5px;
+}
+
 /* Listview page - page header and controls - end */
 
 /* Listview page header buttons */

creme/creme_core/static/creme_core/js/bricks.js

@@ -1,6 +1,6 @@
 /*******************************************************************************
  Creme is a free/open-source Customer Relationship Management software
- Copyright (C) 2015-2024  Hybird
+ Copyright (C) 2015-2025  Hybird
 
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as published by
@@ -1021,12 +1021,8 @@ creme.bricks.BricksReloader.prototype = {
                 sync: false,
                 dataType: 'json'
             },
-            onDownloadProgress: function(evt) {
-                var percent = 100;
-
-                if (evt.lengthComputable && evt.total > 0) {
-                    percent = Math.trunc(Math.max((evt.loaded / evt.total) * 100, 0) / 20) * 20;
-                }
+            progress: function(evt) {
+                var percent = _.clamp(evt.loadedPercent || 100, 20, 100);
 
                 bricks.forEach(function(brick) {
                     brick.setDownloadStatus(percent);

creme/creme_core/static/creme_core/js/detailview.js

@@ -1,6 +1,6 @@
 /*******************************************************************************
     Creme is a free/open-source Customer Relationship Management software
-    Copyright (C) 2017-2024  Hybird
+    Copyright (C) 2017-2025  Hybird
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -77,13 +77,19 @@
 
         'creme_core-hatmenubar-update': function(url, options, data) {
             return this._postQueryAction(url, options, data);
+        },
+
+        'creme_core-hatmenubar-delete': function(url, options, data) {
+            return this._postQueryAction(url, options).onDone(function() {
+                creme.utils.goTo(data.redirect);
+            });
         }
     };
 
     creme.views.HatMenuBar = creme.widget.declare('ui-creme-hatmenubar', {
         _create: function(element, options, cb, sync, args) {
             var builder = this._builder = new creme.action.DefaultActionBuilderRegistry();
-            var buttons = $('.menu_button[data-action]', element);
+            var buttons = $('[data-action]', element);
 
             builder.registerAll(menuBarActions);
 

creme/creme_core/static/creme_core/js/entity_cell.js

@@ -1,6 +1,6 @@
 /*******************************************************************************
     Creme is a free/open-source Customer Relationship Management software
-    Copyright (C) 2013-2022  Hybird
+    Copyright (C) 2013-2025  Hybird
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -30,7 +30,7 @@ creme.entity_cell.EntityCellsWidget = creme.component.Component.sub({
         this.column_titles = {};
         this.columns = [];
         this.underlays = {};
-        this.samples = Array.copy(options.samples);
+        this.samples = Array.from(options.samples);
     },
 
     isBound: function() {

creme/creme_core/static/creme_core/js/export.js

@@ -1,6 +1,6 @@
 /*******************************************************************************
     Creme is a free/open-source Customer Relationship Management software
-    Copyright (C) 2009-2018  Hybird
+    Copyright (C) 2009-2025  Hybird
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -26,6 +26,7 @@
 creme.exports = creme.exports || {};
 
 creme.exports.exportAs = function(url, formats, fieldname) {
+    console.warn('creme.exports.exportAs() is deprecated; Use creme.lv_widget.DownloadAction instead');
     formats = formats || [['', 'No backend found']];
 
     return creme.dialogs.choice(gettext("Select the export format"), {

creme/creme_core/static/creme_core/js/forms.js

@@ -1,6 +1,6 @@
 /*******************************************************************************
     Creme is a free/open-source Customer Relationship Management software
-    Copyright (C) 2009-2023  Hybird
+    Copyright (C) 2009-2025  Hybird
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -192,6 +192,19 @@ creme.forms.toImportField = function(table_id, target_query, speed) {
     $csv_select.on('change', handleColChange);
 };
 
+// Backport from jquery.form-3.51
+// TODO : factorize code in form controller
+function __validateHTML5(element) {
+    var errors = {};
+
+    $('*:invalid', element).each(function(index, item) {
+        errors[$(this).prop('name')] = item.validationMessage;
+    });
+
+    return errors;
+}
+
+
 // TODO : create a real form controller with better lifecycle (not just a css class) and
 //        factorize some code with creme.dialog.FormDialog for html5 validation.
 creme.forms.initialize = function(form) {
@@ -215,7 +228,7 @@ creme.forms.initialize = function(form) {
                 form.attr('novalidate', 'novalidate');
             }
 
-            var isHtml5Valid = Object.isEmpty(form.validateHTML5());
+            var isHtml5Valid = Object.isEmpty(__validateHTML5(form));
 
             if (isHtml5Valid === true) {
                 if (button.is(':not(.is-form-submit)')) {

creme/creme_core/static/creme_core/js/lib/assert.js

@@ -1,6 +1,6 @@
 /*******************************************************************************
     Creme is a free/open-source Customer Relationship Management software
-    Copyright (C) 2020  Hybird
+    Copyright (C) 2025  Hybird
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -16,7 +16,7 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *******************************************************************************/
 
-(function($) {
+(function() {
 "use strict";
 
 var __eval = function(value) {
@@ -66,14 +66,14 @@ window.Assert = {
             return test();
         } catch (e) {
             throw new Error((message || '${error}').template(
-                $.extend({error: e.message}, context || {})
+                Object.assign({error: e.message}, context || {})
             ));
         }
     },
 
     in: function(value, data, message, context) {
         message = message || "${value} is not in the collection";
-        context = $.extend({}, context || {}, {value: value});
+        context = Object.assign({}, context || {}, {value: value});
 
         if (Array.isArray(data) || Object.isString(data)) {
             Assert.that(data.indexOf(value) !== -1, message, context);
@@ -86,7 +86,7 @@ window.Assert = {
 
     notIn: function(value, data, message, context) {
         message = message || "${value} should not be in the collection";
-        context = $.extend({}, context || {}, {value: value});
+        context = Object.assign({}, context || {}, {value: value});
 
         if (Array.isArray(data) || Object.isString(data)) {
             Assert.that(data.indexOf(value) === -1, message, context);
@@ -99,7 +99,7 @@ window.Assert = {
 
     is: function(value, expected, message, context) {
         message = message || '${value} is not a ${expected}';
-        context = $.extend({}, context || {}, {
+        context = Object.assign({}, context || {}, {
             value: Object.isString(value) ? '"' + value + '"' : value,
             expected: __fmtType(expected)
         });
@@ -110,7 +110,7 @@ window.Assert = {
 
     isAnyOf: function(value, expected, message, context) {
         message = message || '${value} is none of [${expected}]';
-        context = $.extend({}, context || {}, {
+        context = Object.assign({}, context || {}, {
             value: Object.isString(value) ? '"' + value + '"' : value,
             expected: expected.map(__fmtType).join(', ')
         });
@@ -126,4 +126,4 @@ window.Assert = {
     }
 };
 
-}(jQuery));
+}());