Merge pull request #7 from globophobe/feature/release-0.1.5

Version 0.1.5

demo/demo/urls.py

@@ -17,8 +17,10 @@
 
 from demo_app.views import semantic_forms_kitchen_sink
 from django.urls import include, path
+from django.views.i18n import JavaScriptCatalog
 
 urlpatterns = [
     path("__debug__/", include("debug_toolbar.urls")),
-    path("forms/", semantic_forms_kitchen_sink),
+    path("jsi18n/", JavaScriptCatalog.as_view(), name="javascript-catalog"),
+    path("forms/", semantic_forms_kitchen_sink, name="semantic-forms-kitchen-sink"),
 ]

demo/demo_app/forms.py

@@ -1,4 +1,5 @@
 from django.db import models
+from django.utils.html import format_html
 
 from semantic_forms import SemanticForm
 from semantic_forms.fields import (
@@ -31,31 +32,67 @@ class Colors(models.TextChoices):
 class SemanticKitchenSinkForm(SemanticForm):
     """Semantic kitchen sink form"""
 
-    char_field = SemanticCharField(label=_("Char"), help_text=_("Helpful text"))
+    char_field = SemanticCharField(
+        label=_("Char"),
+        help_text=format_html(
+            "<pre><code>char_field = SemanticCharField()</code></pre>"
+        ),
+    )
     datetime_field = SemanticDateTimeField(
-        label=_("Datetime"), help_text=_("Helpful text")
+        label=_("Datetime"),
+        help_text=format_html(
+            "<pre><code>datetime_field = SemanticDateTimeField()</code></pre>"
+        ),
+    )
+    date_field = SemanticDateField(
+        label=_("Date"),
+        help_text=format_html(
+            "<pre><code>date_field = SemanticDateField()</code></pre>"
+        ),
+    )
+    time_field = SemanticTimeField(
+        label=_("Time"),
+        help_text=format_html(
+            "<pre><code>time_field = SemanticTimeField()</code></pre>"
+        ),
+    )
+    textarea_field = SemanticTextareaField(
+        label=_("Text"),
+        help_text=format_html(
+            "<pre><code>textarea_field = SemanticTextareaField()</code></pre>"
+        ),
     )
-    date_field = SemanticDateField(label=_("Date"), help_text=_("Helpful text"))
-    time_field = SemanticTimeField(label=_("Time"), help_text=_("Helpful text"))
-    text_field = SemanticTextareaField(label=_("Text"), help_text=_("Helpful text"))
     checkbox_field = SemanticCheckboxField(
-        label=_("Checkbox"), help_text=_("Helpful text")
+        label=_("Checkbox"),
+        help_text=format_html(
+            "<pre><code>checkbox_field = SemanticCheckboxField()</code></pre>"
+        ),
     )
     radio_field = SemanticRadioChoiceField(
         label=_("Radio"),
-        help_text=_("Helpful text"),
+        help_text=format_html(
+            "<pre><code>radio_field = SemanticRadioChoiceField()</code></pre>"
+        ),
         choices=Colors.choices,
     )
     checkbox_select_field = SemanticCheckboxMultipleChoiceField(
         label=_("Checkbox select"),
-        help_text=_("Helpful text"),
+        help_text=format_html(
+            "<pre><code>checkbox_select_field = SemanticCheckboxMultipleChoiceField()</code></pre>"
+        ),
         choices=Colors.choices,
     )
     select_field = SemanticChoiceField(
-        label=_("Select"), help_text=_("Helpful text"), choices=Colors.choices
+        label=_("Select"),
+        help_text=format_html(
+            "<pre><code>select_field = SemanticChoiceField()</code></pre>"
+        ),
+        choices=Colors.choices,
     )
     select_muliple_field = SemanticMultipleChoiceField(
         label=_("Select multiple"),
-        help_text=_("Helpful text"),
+        help_text=format_html(
+            "<pre><code>select_multiple_field = SemanticMultipleChoiceField()</code></pre>"
+        ),
         choices=Colors.choices,
     )

demo/demo_app/views.py

@@ -9,6 +9,16 @@
 except ImportError:
     from django.utils.translation import ugettext_lazy as _
 
+BASIC_TEMPLATE = """{% extends "semantic_forms/base.html" %}
+
+{% block extrahead %}{{ form.media }}{% endblock %}
+
+{% block content %}
+<form class="ui form{% if errors %} error{% endif %}" action="/" method="post" novalidate>
+    {% csrf_token %}{{ form }}
+</form>
+{% endblock %}"""
+
 
 def semantic_forms_kitchen_sink(request: HttpResponse) -> HttpResponse:
     """Semantic forms kitchen sink."""
@@ -18,4 +28,8 @@ def semantic_forms_kitchen_sink(request: HttpResponse) -> HttpResponse:
             messages.success(request, _("Thank you for your submission."))
     else:
         form = SemanticKitchenSinkForm()
-    return render(request, "semantic_forms/demo/kitchen_sink.html", {"form": form})
+    return render(
+        request,
+        "semantic_forms/demo/kitchen_sink.html",
+        {"form": form, "basic_template": BASIC_TEMPLATE},
+    )

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-semantic-forms"
-version = "0.1.4"
+version = "0.1.5"
 description = "Django Semantic UI forms"
 authors = ["Alex <[email protected]>"]
 readme = "README.md"

semantic_forms/static/semantic_forms/semanticCheckbox.js

@@ -1,7 +1,9 @@
 $(document).ready(function () {
   $(".ui.checkbox")
+    .not(".initialized")
     .not("[name*=__prefix__]")
     .each(function () {
       $(this).checkbox();
+      $(this).addClass("initialized");
     });
 });

semantic_forms/static/semantic_forms/semanticChooser.js

@@ -54,7 +54,6 @@ function semanticChooser() {
         forceSelection: false,
         saveRemoteData: false,
       });
-      // b/c not idempotent.
       $(this).addClass("initialized");
     });
 }

semantic_forms/static/semantic_forms/semanticDropdown.js

@@ -9,7 +9,6 @@ $(document).ready(function () {
         fullTextSearch: true,
         forceSelection: false, // https://github.com/Semantic-Org/Semantic-UI/issues/4506
       });
-      // b/c not idempotent.
       $(this).addClass("initialized");
     });
 });

semantic_forms/static/semantic_forms/semanticTranslatedCalendar.js

@@ -2,20 +2,26 @@ $(document).ready(function () {
   const hasJavascriptCatalog = true;
 
   $(".ui.calendar.datetime")
+    .not(".initialized")
     .not("[name*=__prefix__]")
     .each(function () {
       $(this).calendar(getCalendarOptions("datetime", hasJavascriptCatalog));
+      $(this).addClass("initialized");
     });
 
   $(".ui.calendar.date")
+    .not(".initialized")
     .not("[name*=__prefix__]")
     .each(function () {
       $(this).calendar(getCalendarOptions("date", hasJavascriptCatalog));
+      $(this).addClass("initialized");
     });
 
   $(".ui.calendar.time")
+    .not(".initialized")
     .not("[name*=__prefix__]")
     .each(function () {
       $(this).calendar(getCalendarOptions("time", hasJavascriptCatalog));
+      $(this).addClass("initialized");
     });
 });

semantic_forms/static/semantic_forms/semanticUntranslatedCalendar.js

@@ -2,20 +2,26 @@ $(document).ready(function () {
   const hasJavascriptCatalog = false;
 
   $(".ui.calendar.datetime")
+    .not(".initialized")
     .not("[name*=__prefix__]")
     .each(function () {
       $(this).calendar(getCalendarOptions("datetime", hasJavascriptCatalog));
+      $(this).addClass("initialized");
     });
 
   $(".ui.calendar.date")
+    .not(".initialized")
     .not("[name*=__prefix__]")
     .each(function () {
       $(this).calendar(getCalendarOptions("date", hasJavascriptCatalog));
+      $(this).addClass("initialized");
     });
 
   $(".ui.calendar.time")
+    .not(".initialized")
     .not("[name*=__prefix__]")
     .each(function () {
       $(this).calendar(getCalendarOptions("time", hasJavascriptCatalog));
+      $(this).addClass("initialized");
     });
 });

semantic_forms/templates/semantic_forms/demo/kitchen_sink.html

@@ -5,12 +5,50 @@
 
 {% block extrahead %}
 {{ form.media }}
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/googlecode.min.css">
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/django.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/python.min.js"></script>
+
+<style type="text/css">
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin-bottom: 1em;
+}
+
+code {
+  display: block;
+  padding: 1em !important;
+  background-color: #f8f8f8 !important;
+}
+
+code.inline {
+  display: inline;
+  padding: 0.25em !important;
+}
+</style>
 {% endblock %}
 
 {% block content %}
 <div class="ui container">
   <div class="ui basic segment">
     <h2>Semantic Forms</h2>
+
+    <div class="ui segment">
+      Import from <code class="inline">semantic_forms</code>
+      <pre><code>from semantic_forms import SemanticForm, SemanticModelForm, SemanticCharField, SemanticDateTimeField, SemanticDateField, SemanticTimeField, SemanticTextareaField, SemanticCheckboxField, SemanticRadioChoiceField, SemanticCheckboxMultipleChoiceField, SemanticChoiceField, SemanticMultipleChoiceField</code></pre>
+
+      Subclass <code class="inline">SemanticForm</code> or <code class="inline">SemanticModelForm</code>
+
+      <pre><code>class AwesomeForm(SemanticForm):
+    field = SemanticCharField()</code></pre>
+
+      Inherit from <code class="inline">semantic_ui/base.html</code>
+      <pre><code>{{ basic_template }}</code></pre>
+    </div>
 
     {% block messages %}
       {% if messages %}
@@ -50,3 +88,13 @@ <h2>Semantic Forms</h2>
   </div>
 </div>
 {% endblock %}
+
+{% block extrascript %}
+<script type="text/javascript">
+$( document ).ready(function() {
+  $('pre code').each(function(i, block) {
+    hljs.highlightBlock(block);
+  });
+});
+</script>
+{% endblock %}