diff --git a/adserver/forms.py b/adserver/forms.py index badbc81f..a3da8ffb 100644 --- a/adserver/forms.py +++ b/adserver/forms.py @@ -991,6 +991,10 @@ def __init__(self, *args, **kwargs): adtype_queryset = adtype_queryset.exclude(deprecated=True) self.fields["ad_types"].queryset = adtype_queryset + # Get the lowest maximum text length across all eligible ad types + ad_type_max_lengths = [at.max_text_length for at in adtype_queryset] or [0] + maximum_text_length = min(ad_type_max_lengths) + self.fields["image"].help_text = _( "Sized according to the ad type. Need help with manipulating or resizing images? We can help." ) % (reverse("support") + "?subject=Image+help") @@ -1033,12 +1037,12 @@ def __init__(self, *args, **kwargs): _("Advertisement text"), Div( HTML( - " total characters" + f" / characters" ), # Only display on "new style" ads with the headline, content, and CTA # Simply hide it on the old style ads. - data_bind="visible: totalLength() > 0", - css_class="small text-muted mb-2", + data_bind="visible: totalLength() > 0, css: totalLength() > maxLength() ? 'text-danger' : 'text-muted'", + css_class="small mb-2", ), *ad_display_fields, ), diff --git a/assets/src/views/advertisement-form.js b/assets/src/views/advertisement-form.js index 082c85c9..a5fb91b3 100644 --- a/assets/src/views/advertisement-form.js +++ b/assets/src/views/advertisement-form.js @@ -4,6 +4,7 @@ const ko = require('knockout'); function AdvertisementFormViewModel(method) { const MAX_PREVIEW_LENGTH = 100; + const SENSIBLE_MAXIMUM_LENGTH = 1000; this.headline = ko.observable($("#id_headline").val()); this.content = ko.observable($("#id_content").val()); @@ -28,6 +29,19 @@ function AdvertisementFormViewModel(method) { return length; }; + + + this.maxLength = function () { + // The actual max length passed from the backend form + let max_length = parseInt($("#id_maximum_text_length").attr("data-maximum-length")); + + // Use a sensible default if nothing present + if(isNaN(max_length) || max_length <= 0 || max_length > SENSIBLE_MAXIMUM_LENGTH) { + max_length = MAX_PREVIEW_LENGTH; + } + + return max_length; + }; } if ($('form#advertisement-update').length > 0) {