Bug 602918 - [Step 3] Construct the Describe Your Add-on page

2010-11-11 21:41:34 -08:00 · 2010-11-11 21:41:34 -08:00 · eccefe9e91
--- a/apps/devhub/templates/devhub/addons/submit/describe.html
+++ b/apps/devhub/templates/devhub/addons/submit/describe.html
@ -0,0 +1,71 @@
+{% extends "devhub/base.html" %}
+{% from "devhub/addons/submit/macros.html" import addon_submission_process %}
+
+{% set title = _('Submit a New Add-on') %}
+
+{% block title %}
+{{ dev_page_title(title) }}
+{% endblock %}
+
+
+{% block content %}
+<header>
+  {{ dev_breadcrumbs(items=[(None, _('Submit Add-on'))]) }}
+  <h2>{{ title }}</h2>
+</header>
+<section class="primary addon-submission-process" id="submit-describe" role="main">
+  <div>
+    <h3>{{ _('Step 3. Describe your addon') }}</h3>
+    <form method="post" class="item" action="">
+      {{ csrf() }}
+      <div class="addon-submission-field">
+        <label for="id_name">{{ _("Your add-on's name and version:") }}</label>
+        {{ form.name|safe }}
+
+        {# TODO(gkoberger): Add in actual version when it becomes available #}
+        <input type="text" disabled value="1.2" size="6" />
+
+        {{ form.name.errors|safe }}
+      </div>
+      <div class="addon-submission-field">
+        <label>{{ _("Your add-on's detail page will be:") }}</label>
+        <span id="slug_edit" class="edit_with_prefix edit_initially_hidden">
+          <span>{{ settings.SITE_URL }}</span>{{ form.slug|safe }}
+        </span>
+        <span id="slug_readonly">
+          {{ settings.SITE_URL }}/&hellip;/<span id="slug_value"></span>
+          <a id="edit_slug" href="#">{{ _('Edit') }}</a>
+        </span>
+      </div>
+      <div class="addon-submission-field">
+        <label>{{ _('Provide a brief summary of your add-on:') }}</label>
+        {{ form.summary|safe }}
+        {{ form.summary.errors|safe }}
+        <div class="edit-addon-details">
+          {% trans %}
+            This summary will be shown with your add-on in listings and searches.
+          {% endtrans %}
+        </div>
+      </div>
+      <div class="addon-submission-field">
+        <label>
+          {{ _('Select 1 or 2 categories that best describe your add-on:') }}
+        </label>
+        Coming Soon
+        {# TODO(gkoberger): See bug 606246 #}
+      </div>
+      <div class="submission-buttons addon-submission-field">
+        <button type="submit">
+          {{ _('Continue') }}
+        </button>
+      </div>
+    </form>
+  </div>
+</section>
+
+<section class="secondary" role="complementary">
+{{ addon_submission_process('describe') }}
+</section>
+
+{% endblock content %}
+
--- a/apps/devhub/urls.py
+++ b/apps/devhub/urls.py
@ -64,6 +64,8 @@ urlpatterns = decorate(write, patterns('',
    url('^addon/submit$', views.submit, name='devhub.submit'),
    url('^addon/submit/new$', views.submit_addon,
        name='devhub.submit.addon'),
+    url('^addon/submit/3/(?P<addon_id>\d+)/$', views.submit_describe,
+        name='devhub.submit.describe'),

    # Redirect to /addons/ at the base.
    url('^addon$', lambda r: redirect('devhub.addons', permanent=True)),
--- a/apps/devhub/views.py
+++ b/apps/devhub/views.py
@ -533,6 +533,20 @@ def submit(request):
    return jingo.render(request, 'devhub/addons/submit/start.html',
                        {'agreement_text': agreement_text})

+@login_required
+def submit_describe(request, addon_id):
+    addon = get_object_or_404(Addon, id=addon_id)
+
+    form = addon_forms.AddonFormBasic((request.POST or None), instance=addon)
+    if request.method == 'POST' and form.is_valid():
+        addon = form.save(addon)
+        amo.log(amo.LOG.EDIT_DESCRIPTIONS, addon)
+
+        return redirect('devhub.submit.add_media')
+
+    return jingo.render(request, 'devhub/addons/submit/describe.html',
+                        {'form': form, 'addon': addon})
+

@login_required
 def submit_addon(request):
--- a/media/css/zamboni/developers.css
+++ b/media/css/zamboni/developers.css
@ -481,6 +481,22 @@ h3 a.subscribe-feed:hover {
    background-position: 0 -16px;
 }

+.addon-submission-process form div.addon-submission-field {
+    margin-bottom: 1em;
+    display: block;
+}
+
+.addon-submission-process form label {
+    display: block;
+    padding-bottom: 3px;
+}
+
+.addon-submission-process #id_name {
+    width: 300px;
+    display: inline-block;
+    margin-right: 10px;
+}
+
 /* @end */

 /* @group Ownership */
@ -1063,7 +1079,9 @@ ol.submit-addon-progress li.current {
 #agreement-extra-links span {
    padding: 0 0.5em;
 }
-.submit-buttons {
+.submit-buttons,
+#agreement-buttons,
+.addon-submission-process .submission-buttons{
    border-top: 1px dotted #A4CFDE;
    margin-bottom: 0;
    padding-top: 0.8em;
--- a/media/js/zamboni/collections.js
+++ b/media/js/zamboni/collections.js
@ -517,55 +517,23 @@ $(document).ready(function() {

 $(document).ready(function () {

-    var url_customized = false;
    var name_val = $('#id_name').val();

-    function load_unicode() {
-        var $body = $(document.body);
-        $body.append("<script src='" + $body.attr('data-media-url') + "/js/zamboni/unicode.js'></script>");
-    }
-
    $(document).bind('unicode_loaded', function() {
-        url_customized = !!$('#id_slug').val() && ($('#id_slug').val() != makeslug(name_val));
+        $('#id_slug').attr('data-customized', (!!$('#id_slug').val() &&
+                           ($('#id_slug').val() != makeslug(name_val))) ? 1 : 0);
        slugify();
    });

-    function makeslug(s) {
-        var re = new RegExp("[^\w" + z.unicode_letters + "0-9\s-]+","g");
-        s = $.trim(s.replace(re, ' '));
-        s = s.replace(/[-\s]+/g, '-').toLowerCase();
-        return s
-    }
-
-    function show_slug_edit(e) {
-        $("#slug_readonly").hide();
-        $("#slug_edit").show();
-        $("#id_slug").focus();
-        e.preventDefault();
-    }
-
-    function slugify() {
-        if (z.unicode_letters) {
-            var slug = $('#id_slug');
-            if (!url_customized || !slug.val()) {
-                var s = makeslug($('#id_name').val())
-                slug.val(s);
-                name_val = s;
-                $('#slug_value').text(s);
-            }
-        } else {
-            load_unicode();
-        }
-    }
-
-    $('#details-edit form, .collection-create form').delegate('#id_name', 'keyup', slugify)
+    $('#details-edit form, .collection-create form')
+        .delegate('#id_name', 'keyup', slugify)
        .delegate('#id_name', 'blur', slugify)
        .delegate('#edit_slug', 'click', show_slug_edit)
        .delegate('#id_slug', 'change', function() {
-            url_customized = true;
+            $('#id_slug').attr('data-customized', 1);
            if (!$('#id_slug').val()) {
-              url_customized = false;
-              slugify();
+                $('#id_slug').attr('data-customized', 0);
+                slugify();
            }
        });

@ -661,9 +629,9 @@ $(document).ready(function () {
                .delegate('#id_name', 'blur', slugify)
                .delegate('#edit_slug', 'click', show_slug_edit)
                .delegate('#id_slug', 'change', function() {
-                    url_customized = true;
+                    $('#id_slug').attr('data-customized', 1);
                    if (!$('#id_slug').val()) {
-                      url_customized = false;
+                      $('#id_slug').attr('data-customized', 0);
                      slugify();
                    }
                });
--- a/media/js/zamboni/devhub.js
+++ b/media/js/zamboni/devhub.js
@ -19,6 +19,11 @@ $(document).ready(function() {
    if($('#version-list').length) {
        initVersions();
    }
+
+    // Submission process
+    if($('.addon-submission-process').length) {
+        initSubmit();
+    }
 });


@ -126,6 +131,20 @@ function initVersions() {

 }

+function initSubmit() {
+    $('#submit-describe form').delegate('#id_name', 'keyup', slugify)
+        .delegate('#id_name', 'blur', slugify)
+        .delegate('#edit_slug', 'click', show_slug_edit)
+        .delegate('#id_slug', 'change', function() {
+            $('#id_slug').attr('data-customized', 1);
+            if (!$('#id_slug').val()) {
+                $('#id_slug').attr('data-customized', 0);
+                slugify;
+            }
+        });
+    $('#id_slug').each(slugify);
+}
+
 function initEditVersions() {
    var file = {},
        xhr = false;
--- a/media/js/zamboni/global.js
+++ b/media/js/zamboni/global.js
@ -310,3 +310,49 @@ $.fn.modal = function(click_target, o) {

    return $modal;
 };
+
+// Slugify
+// This allows you to create a line of text with a "Edit" field,
+// and swap it out for an editable slug.  For example:
+//
+// http://mozilla.com/slugname <a>edit</a>
+// ..to..
+// http://mozilla.com/[editable slug name]
+
+function load_unicode() {
+    var $body = $(document.body);
+    $body.append("<script src='" + $body.attr('data-media-url') + "/js/zamboni/unicode.js'></script>");
+}
+
+function makeslug(s) {
+    var re = new RegExp("[^\w" + z.unicode_letters + "\s-]+","g");
+    s = $.trim(s.replace(re, ' '));
+    s = s.replace(/[-\s]+/g, '-').toLowerCase();
+    return s
+}
+
+function show_slug_edit(e) {
+    $("#slug_readonly").hide();
+    $("#slug_edit").show();
+    $("#id_slug").focus();
+    e.preventDefault();
+}
+
+function slugify() {
+    if (z == null || z.unicode_letters) {
+        var slug = $('#id_slug');
+        url_customized = slug.attr('data-customized') == 0 ||
+                                   !slug.attr('data-customized');
+        if (url_customized || !slug.val()) {
+            var s = makeslug($('#id_name').val())
+            slug.val(s);
+            name_val = s;
+            $('#slug_value').text(s);
+        } else {
+            $('#slug_value').text($('#id_slug').val());
+        }
+    } else {
+        load_unicode();
+    }
+}
+