Fixed #29523 -- Removed jQuery usage in DateTimeShortcuts.js & collapse.js.

This commit is contained in:
Claude Paroz 2018-06-25 12:24:40 +02:00 committed by Tim Graham
parent 9bcbda43dc
commit ba83378a77
5 changed files with 57 additions and 55 deletions

View File

@ -81,12 +81,7 @@ class Fieldset:
def media(self): def media(self):
if 'collapse' in self.classes: if 'collapse' in self.classes:
extra = '' if settings.DEBUG else '.min' extra = '' if settings.DEBUG else '.min'
js = [ return forms.Media(js=['admin/js/collapse%s.js' % extra])
'vendor/jquery/jquery%s.js' % extra,
'jquery.init.js',
'collapse%s.js' % extra,
]
return forms.Media(js=['admin/js/%s' % url for url in js])
return forms.Media() return forms.Media()
def __iter__(self): def __iter__(self):

View File

@ -166,13 +166,7 @@ Requires jQuery, core.js, and SelectBox.js.
// In horizontal mode, give the same height to the two boxes. // In horizontal mode, give the same height to the two boxes.
var j_from_box = $('#' + field_id + '_from'); var j_from_box = $('#' + field_id + '_from');
var j_to_box = $('#' + field_id + '_to'); var j_to_box = $('#' + field_id + '_to');
var resize_filters = function() { j_to_box.height($(filter_p).outerHeight() + j_from_box.outerHeight()); }; j_to_box.height($(filter_p).outerHeight() + j_from_box.outerHeight());
if (j_from_box.outerHeight() > 0) {
resize_filters(); // This fieldset is already open. Resize now.
} else {
// This fieldset is probably collapsed. Wait for its 'show' event.
j_to_box.closest('fieldset').one('show.fieldset', resize_filters);
}
} }
// Initial icon refresh // Initial icon refresh

View File

@ -63,7 +63,6 @@
}, },
// Add a warning when the time zone in the browser and backend do not match. // Add a warning when the time zone in the browser and backend do not match.
addTimezoneWarning: function(inp) { addTimezoneWarning: function(inp) {
var $ = django.jQuery;
var warningClass = DateTimeShortcuts.timezoneWarningClass; var warningClass = DateTimeShortcuts.timezoneWarningClass;
var timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600; var timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;
@ -73,7 +72,7 @@
} }
// Check if warning is already there. // Check if warning is already there.
if ($(inp).siblings('.' + warningClass).length) { if (inp.parentNode.querySelectorAll('.' + warningClass).length) {
return; return;
} }
@ -95,13 +94,11 @@
} }
message = interpolate(message, [timezoneOffset]); message = interpolate(message, [timezoneOffset]);
var $warning = $('<span>'); var warning = document.createElement('span');
$warning.attr('class', warningClass); warning.className = warningClass;
$warning.text(message); warning.textContent = message;
inp.parentNode.appendChild(document.createElement('br'));
$(inp).parent() inp.parentNode.appendChild(warning);
.append($('<br>'))
.append($warning);
}, },
// Add clock widget to a given field // Add clock widget to a given field
addClock: function(inp) { addClock: function(inp) {
@ -115,7 +112,7 @@
inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling); inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
var now_link = document.createElement('a'); var now_link = document.createElement('a');
now_link.setAttribute('href', "#"); now_link.setAttribute('href', "#");
now_link.appendChild(document.createTextNode(gettext('Now'))); now_link.textContent = gettext('Now');
now_link.addEventListener('click', function(e) { now_link.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
DateTimeShortcuts.handleClockQuicklink(num, -1); DateTimeShortcuts.handleClockQuicklink(num, -1);
@ -345,7 +342,7 @@
e.preventDefault(); e.preventDefault();
DateTimeShortcuts.dismissCalendar(num); DateTimeShortcuts.dismissCalendar(num);
}); });
django.jQuery(document).on('keyup', function(event) { document.addEventListener('keyup', function(event) {
if (event.which === 27) { if (event.which === 27) {
// ESC key closes popup // ESC key closes popup
DateTimeShortcuts.dismissCalendar(num); DateTimeShortcuts.dismissCalendar(num);

View File

@ -1,26 +1,52 @@
/*global gettext*/ /*global gettext*/
(function($) { (function() {
'use strict'; 'use strict';
$(document).ready(function() { var closestElem = function(elem, tagName) {
// Add anchor tag for Show/Hide link if (elem.nodeName === tagName.toUpperCase()) {
$("fieldset.collapse").each(function(i, elem) { return elem;
// Don't hide if fields in this fieldset have errors }
if ($(elem).find("div.errors").length === 0) { if (elem.parentNode.nodeName === 'BODY') {
$(elem).addClass("collapsed").find("h2").first().append(' (<a id="fieldsetcollapser' + return null;
i + '" class="collapse-toggle" href="#">' + gettext("Show") + }
'</a>)'); return elem.parentNode && closestElem(elem.parentNode, tagName);
};
window.addEventListener('load', function() {
// Add anchor tag for Show/Hide link
var fieldsets = document.querySelectorAll('fieldset.collapse');
for (var i = 0; i < fieldsets.length; i++) {
var elem = fieldsets[i];
// Don't hide if fields in this fieldset have errors
if (elem.querySelectorAll('div.errors').length === 0) {
elem.classList.add('collapsed');
var h2 = elem.querySelector('h2');
var link = document.createElement('a');
link.setAttribute('id', 'fieldsetcollapser' + i);
link.setAttribute('class', 'collapse-toggle');
link.setAttribute('href', '#');
link.textContent = gettext('Show');
h2.appendChild(document.createTextNode(' ('));
h2.appendChild(link);
h2.appendChild(document.createTextNode(')'));
}
} }
});
// Add toggle to anchor tag // Add toggle to anchor tag
$("fieldset.collapse a.collapse-toggle").on('click', function(ev) { var toggles = document.querySelectorAll('fieldset.collapse a.collapse-toggle');
if ($(this).closest("fieldset").hasClass("collapsed")) { var toggleFunc = function(ev) {
ev.preventDefault();
var fieldset = closestElem(this, 'fieldset');
if (fieldset.classList.contains('collapsed')) {
// Show // Show
$(this).text(gettext("Hide")).closest("fieldset").removeClass("collapsed").trigger("show.fieldset", [$(this).attr("id")]); this.textContent = gettext('Hide');
fieldset.classList.remove('collapsed');
} else { } else {
// Hide // Hide
$(this).text(gettext("Show")).closest("fieldset").addClass("collapsed").trigger("hide.fieldset", [$(this).attr("id")]); this.textContent = gettext('Show');
fieldset.classList.add('collapsed');
}
};
for (i = 0; i < toggles.length; i++) {
toggles[i].addEventListener('click', toggleFunc);
} }
return false;
}); });
}); })();
})(django.jQuery);

View File

@ -51,16 +51,11 @@ class FilteredSelectMultiple(forms.SelectMultiple):
class AdminDateWidget(forms.DateInput): class AdminDateWidget(forms.DateInput):
@property class Media:
def media(self):
extra = '' if settings.DEBUG else '.min'
js = [ js = [
'vendor/jquery/jquery%s.js' % extra, 'admin/js/calendar.js',
'jquery.init.js', 'admin/js/admin/DateTimeShortcuts.js',
'calendar.js',
'admin/DateTimeShortcuts.js',
] ]
return forms.Media(js=["admin/js/%s" % path for path in js])
def __init__(self, attrs=None, format=None): def __init__(self, attrs=None, format=None):
attrs = {'class': 'vDateField', 'size': '10', **(attrs or {})} attrs = {'class': 'vDateField', 'size': '10', **(attrs or {})}
@ -68,16 +63,11 @@ class AdminDateWidget(forms.DateInput):
class AdminTimeWidget(forms.TimeInput): class AdminTimeWidget(forms.TimeInput):
@property class Media:
def media(self):
extra = '' if settings.DEBUG else '.min'
js = [ js = [
'vendor/jquery/jquery%s.js' % extra, 'admin/js/calendar.js',
'jquery.init.js', 'admin/js/admin/DateTimeShortcuts.js',
'calendar.js',
'admin/DateTimeShortcuts.js',
] ]
return forms.Media(js=["admin/js/%s" % path for path in js])
def __init__(self, attrs=None, format=None): def __init__(self, attrs=None, format=None):
attrs = {'class': 'vTimeField', 'size': '8', **(attrs or {})} attrs = {'class': 'vTimeField', 'size': '8', **(attrs or {})}