Merge pull request #1799 from rtfd/donate-form-arbitrary

Make dollar input field into optional arbitrary value input

Author: ericholscher

readthedocs/donate/forms.py

@@ -44,7 +44,7 @@ class Meta:
             'dollars': _('Companies donating over $400 can specify a logo URL and site link'),
         }
         widgets = {
-            'dollars': forms.Select(attrs={
+            'dollars': forms.HiddenInput(attrs={
                 'data-bind': 'value: dollars'
             }),
             'logo_url': forms.TextInput(attrs={

readthedocs/donate/models.py

@@ -1,23 +1,6 @@
 from django.db import models
 from django.utils.translation import ugettext_lazy as _
 
-AMOUNT_CHOICES = (
-    (5, '$5'),
-    (10, '$10'),
-    (25, '$25'),
-    (50, '1 Hour ($50)'),
-    (100, '2 Hours ($100)'),
-    (200, '4 Hours ($200)'),
-    (400, '1 Day ($400)'),
-    (800, '2 Days ($800)'),
-    (1200, '3 Days ($1200)'),
-    (1600, '4 Days ($1600)'),
-    (2000, '5 Days ($2000)'),
-    (4000, '2 Weeks ($4000)'),
-    (6000, '3 Weeks ($6000)'),
-    (8000, '4 Weeks ($8000)'),
-)
-
 DISPLAY_CHOICES = (
     ('doc', 'Documentation Pages'),
     ('site-footer', 'Site Footer'),
@@ -34,8 +17,7 @@ class Supporter(models.Model):
     email = models.EmailField(_('Email'), max_length=200, blank=True)
     user = models.ForeignKey('auth.User', verbose_name=_('User'),
                              related_name='goldonce', blank=True, null=True)
-    dollars = models.IntegerField(_('Amount'), choices=AMOUNT_CHOICES,
-                                  default=50)
+    dollars = models.IntegerField(_('Amount'), default=50)
     logo_url = models.URLField(_('Logo URL'), max_length=255, blank=True,
                                null=True)
     site_url = models.URLField(_('Site URL'), max_length=255, blank=True,

readthedocs/donate/static-src/donate/js/donate.js

@@ -10,7 +10,16 @@ function DonateView (config) {
 
     self.constructor.call(self, config);
 
-    self.dollars = ko.observable();
+    self.dollars_select = ko.observable();
+    self.dollars_input = ko.observable();
+    self.dollars = ko.computed(function () {
+        var dollars;
+        dollars = self.dollars_select();
+        if (dollars == 'custom') {
+           dollars = self.dollars_input();
+        }
+        return dollars;
+    });
     self.logo_url = ko.observable();
     self.site_url = ko.observable();
     self.error_dollars = ko.observable();

readthedocs/donate/static/donate/js/donate.js

@@ -52,6 +52,46 @@ <h2>Donate to Read the Docs</h2>
             {% include 'core/ko_form_field.html' with field=groupfield %}
           {% endfor %}
         </div>
+      {% elif field.name == 'logo_url' or field.name == 'site_url' %}
+        <div data-bind="visible: urls_enabled">
+          {% include 'core/ko_form_field.html' with field=field %}
+        </div>
+      {% elif field.name == 'dollars' %}
+        {{ field.errors }}
+        <p>
+          <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+          <input
+              type="hidden"
+              name="{{ field.name }}"
+              id="{{ field.id_for_label }}"
+              data-bind="value: dollars" />
+          <input
+              type="number"
+              data-bind="textInput: dollars_input, visible: dollars_select() == 'custom'"
+              value="50"
+              id="id_dollars_input"
+              style="display: none;" />
+          <select data-bind="value: dollars_select, visible: dollars_select() != 'custom'">
+            <option value="custom">{% trans "Custom amount" %}</option>
+            <option value="5">$5</option>
+            <option value="10">$10</option>
+            <option value="25">$25</option>
+            <option value="50" selected>{% trans "1 Hour" %} ($50)</option>
+            <option value="100">{% trans "2 Hours" %} ($100)</option>
+            <option value="200">{% trans "4 Hours" %} ($200)</option>
+            <option value="400">{% trans "1 Day" %} ($400)</option>
+            <option value="800">{% trans "2 Days" %} ($800)</option>
+            <option value="1200">{% trans "3 Days" %} ($1200)</option>
+            <option value="1600">{% trans "4 Days" %} ($1600)</option>
+            <option value="2000">{% trans "5 Days" %} ($2000)</option>
+            <option value="4000">{% trans "2 Weeks" %} ($4000)</option>
+            <option value="6000">{% trans "3 Weeks" %} ($6000)</option>
+            <option value="8000">{% trans "4 Weeks" %} ($8000)</option>
+          </select>
+          {% if field.help_text %}
+            <span class="helptext">{{ field.help_text }}</span>
+          {% endif %}
+        </p>
       {% else %}
         {% include 'core/ko_form_field.html' with field=field %}
       {% endif %}