Merge pull request #831 from readthedocs/davidfischer/ad-edit-maximum…

…-length Guide advertisers on maximum ad length
readthedocs · Feb 19, 2024 · 690305f · 690305f
2 parents 97ac91f + c77bea2
commit 690305f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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 <a href='%s'>help</a>."
         ) % (reverse("support") + "?subject=Image+help")
@@ -1033,12 +1037,12 @@ def __init__(self, *args, **kwargs):
                 _("Advertisement text"),
                 Div(
                     HTML(
-                        "<span data-bind='text: totalLength()'></span> total characters"
+                        f"<span data-bind='text: totalLength()'></span> / <span data-bind='text: maxLength()' id='id_maximum_text_length' data-maximum-length='{maximum_text_length}'></span> 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
@@ -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) {