Adding tinymce for all text areas on course-detail and edit pages.

ECOM-7567

bower.json

@@ -19,6 +19,7 @@
     "moment": "~2.13.0",
     "pikaday": "https://github.com/owenmead/Pikaday.git#1.4.0",
     "underscore": "~1.8.3",
-    "google-diff-match-patch": "0.1.0"
+    "google-diff-match-patch": "0.1.0",
+    "tinymce": "4.5.6"
   }
 }

course_discovery/apps/publisher/forms.py

@@ -94,7 +94,7 @@ class CustomCourseForm(CourseForm):
     title = forms.CharField(label=_('Course Title'), required=True)
     number = forms.CharField(label=_('Course Number'), required=True)
     short_description = forms.CharField(
-        label=_('Brief Description'), max_length=140, widget=forms.Textarea, required=False
+        label=_('Brief Description'), max_length=255, widget=forms.Textarea, required=False
     )
     full_description = forms.CharField(
         label=_('Full Description'), max_length=2500, widget=forms.Textarea, required=False
@@ -131,6 +131,22 @@ class CustomCourseForm(CourseForm):
         required=False
     )
 
+    expected_learnings = forms.CharField(
+        label=_('Expected Learnings'), max_length=2500, widget=forms.Textarea, required=False
+    )
+
+    learner_testimonial = forms.CharField(
+        label=_('Learner Testimonial'), max_length=500, widget=forms.Textarea, required=False
+    )
+
+    faq = forms.CharField(
+        label=_('FAQ'), max_length=2500, widget=forms.Textarea, required=False
+    )
+
+    syllabus = forms.CharField(
+        label=_('Syllabus'), max_length=2500, widget=forms.Textarea, required=False
+    )
+
     class Meta(CourseForm.Meta):
         model = Course
         widgets = {

course_discovery/apps/publisher/tests/test_views.py

@@ -1935,6 +1935,7 @@ class CourseEditViewTests(TestCase):
 
         updated_course_title = 'Updated {}'.format(self.course.title)
         post_data['title'] = updated_course_title
+        post_data['short_description'] = 'Testing description'
 
         self.assertNotEqual(self.course.title, updated_course_title)
         self.assertNotEqual(self.course.changed_by, self.user)
@@ -1952,6 +1953,7 @@ class CourseEditViewTests(TestCase):
         # Assert that course is updated.
         self.assertEqual(course.title, updated_course_title)
         self.assertEqual(course.changed_by, self.user)
+        self.assertEqual(course.short_description, 'Testing description')
 
         # After updating 2 history object exists for a course.
         self.assertEqual(self.course.history.all().count(), 2)

course_discovery/conf/locale/en/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-04-07 11:51+0200\n"
+"POT-Creation-Date: 2017-04-08 22:45+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -376,8 +376,8 @@ msgstr ""
 msgid "Credit"
 msgstr ""
 
-#: apps/course_metadata/models.py apps/publisher/models.py
-#: templates/publisher/course_detail.html
+#: apps/course_metadata/models.py apps/publisher/forms.py
+#: apps/publisher/models.py templates/publisher/course_detail.html
 #: templates/publisher/course_revision_history.html
 #: templates/publisher/course_run_detail/_drupal.html
 msgid "FAQ"
@@ -602,6 +602,21 @@ msgstr ""
 msgid "Tertiary (optional)"
 msgstr ""
 
+#: apps/publisher/forms.py apps/publisher/models.py
+#: templates/publisher/course_detail.html
+#: templates/publisher/course_revision_history.html
+#: templates/publisher/course_run_detail/_all.html
+msgid "Expected Learnings"
+msgstr ""
+
+#: apps/publisher/forms.py
+msgid "Learner Testimonial"
+msgstr ""
+
+#: apps/publisher/forms.py
+msgid "Syllabus"
+msgstr ""
+
 #: apps/publisher/forms.py
 msgid "Course Start Date"
 msgstr ""
@@ -689,12 +704,6 @@ msgstr ""
 
 #: apps/publisher/models.py templates/publisher/course_detail.html
 #: templates/publisher/course_revision_history.html
-#: templates/publisher/course_run_detail/_all.html
-msgid "Expected Learnings"
-msgstr ""
-
-#: apps/publisher/models.py templates/publisher/course_detail.html
-#: templates/publisher/course_revision_history.html
 #: templates/publisher/course_run_detail/_drupal.html
 msgid "Learner Testimonials"
 msgstr ""
@@ -1517,7 +1526,6 @@ msgid ""
 msgstr ""
 
 #: templates/publisher/add_update_course_form.html
-#: templates/publisher/course_edit_form.html
 msgid "140 character limit, including spaces."
 msgstr ""
 
@@ -2009,6 +2017,10 @@ msgid ""
 msgstr ""
 
 #: templates/publisher/course_edit_form.html
+msgid "255 character limit, including spaces."
+msgstr ""
+
+#: templates/publisher/course_edit_form.html
 msgid ""
 "Please provide any frequently asked questions and corresponding answers to "
 "those questions."
@@ -2121,6 +2133,10 @@ msgid ""
 msgstr ""
 
 #: templates/publisher/course_edit_form.html
+msgid "500 character limit, including spaces."
+msgstr ""
+
+#: templates/publisher/course_edit_form.html
 msgid "UPDATE COURSE"
 msgstr ""
 

course_discovery/conf/locale/en/LC_MESSAGES/djangojs.po

@@ -7,14 +7,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-04-06 12:30+0500\n"
+"POT-Creation-Date: 2017-04-08 22:45+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
-"Language: \n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Language: \n"
 
 #: static/js/catalogs-change-form.js
 msgid "Preview"

course_discovery/conf/locale/eo/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-04-07 11:51+0200\n"
+"POT-Creation-Date: 2017-04-08 22:45+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -461,8 +461,8 @@ msgstr "Pröféssïönäl Ⱡ'σяєм ιρѕυм ∂σłσя ѕ#"
 msgid "Credit"
 msgstr "Çrédït Ⱡ'σяєм ιρѕυ#"
 
-#: apps/course_metadata/models.py apps/publisher/models.py
-#: templates/publisher/course_detail.html
+#: apps/course_metadata/models.py apps/publisher/forms.py
+#: apps/publisher/models.py templates/publisher/course_detail.html
 #: templates/publisher/course_revision_history.html
 #: templates/publisher/course_run_detail/_drupal.html
 msgid "FAQ"
@@ -732,6 +732,21 @@ msgstr "Séçöndärý (öptïönäl) Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт
 msgid "Tertiary (optional)"
 msgstr "Tértïärý (öptïönäl) Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт,#"
 
+#: apps/publisher/forms.py apps/publisher/models.py
+#: templates/publisher/course_detail.html
+#: templates/publisher/course_revision_history.html
+#: templates/publisher/course_run_detail/_all.html
+msgid "Expected Learnings"
+msgstr "Éxpéçtéd Léärnïngs Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт#"
+
+#: apps/publisher/forms.py
+msgid "Learner Testimonial"
+msgstr "Léärnér Téstïmönïäl Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт,#"
+
+#: apps/publisher/forms.py
+msgid "Syllabus"
+msgstr "Sýlläßüs Ⱡ'σяєм ιρѕυм ∂#"
+
 #: apps/publisher/forms.py
 msgid "Course Start Date"
 msgstr "Çöürsé Stärt Däté Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмє#"
@@ -821,12 +836,6 @@ msgstr "Lévél Týpé Ⱡ'σяєм ιρѕυм ∂σłσ#"
 
 #: apps/publisher/models.py templates/publisher/course_detail.html
 #: templates/publisher/course_revision_history.html
-#: templates/publisher/course_run_detail/_all.html
-msgid "Expected Learnings"
-msgstr "Éxpéçtéd Léärnïngs Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт#"
-
-#: apps/publisher/models.py templates/publisher/course_detail.html
-#: templates/publisher/course_revision_history.html
 #: templates/publisher/course_run_detail/_drupal.html
 msgid "Learner Testimonials"
 msgstr "Léärnér Téstïmönïäls Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
@@ -1775,7 +1784,6 @@ msgstr ""
 "änd präçtïçés för ä häppý, méänïngfül lïfé. Ⱡ'σяєм ιρѕυм#"
 
 #: templates/publisher/add_update_course_form.html
-#: templates/publisher/course_edit_form.html
 msgid "140 character limit, including spaces."
 msgstr ""
 "140 çhäräçtér lïmït, ïnçlüdïng späçés. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, "
@@ -2390,6 +2398,12 @@ msgstr ""
 "çöürsé rün. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢#"
 
 #: templates/publisher/course_edit_form.html
+msgid "255 character limit, including spaces."
+msgstr ""
+"255 çhäräçtér lïmït, ïnçlüdïng späçés. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, "
+"¢σηѕє¢тєтυя#"
+
+#: templates/publisher/course_edit_form.html
 msgid ""
 "Please provide any frequently asked questions and corresponding answers to "
 "those questions."
@@ -2539,6 +2553,12 @@ msgstr ""
 "ƒυgιαт ηυłłα ραяιαтυя. єχ¢єρтєυя ѕιηт#"
 
 #: templates/publisher/course_edit_form.html
+msgid "500 character limit, including spaces."
+msgstr ""
+"500 çhäräçtér lïmït, ïnçlüdïng späçés. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, "
+"¢σηѕє¢тєтυя#"
+
+#: templates/publisher/course_edit_form.html
 msgid "UPDATE COURSE"
 msgstr "ÛPDÀTÉ ÇÖÛRSÉ Ⱡ'σяєм ιρѕυм ∂σłσя ѕι#"
 

course_discovery/conf/locale/eo/LC_MESSAGES/djangojs.po

@@ -7,14 +7,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-04-06 12:30+0500\n"
+"POT-Creation-Date: 2017-04-08 22:45+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
-"Language: \n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Language: \n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
 #: static/js/catalogs-change-form.js

course_discovery/static/js/publisher/tinymce-charactercount.plugin.js

+/**
+ * Credit: https://amystechnotes.com/2015/05/06/tinymce-add-character-count/
+ * This is a slightly modified version to work with more recent TinyMCE version, fix some code styling and don't trim 
+ * trailing and leading whitespaces from count.
+ */
+
+tinymce.PluginManager.add('charactercount', function (editor) {
+  var _self = this;
+
+  function update() {
+    editor.theme.panel.find('#charactercount').text(['Characters: {0}', _self.getCount()]);
+  }
+
+  editor.on('init', function () {
+    var statusbar = editor.theme.panel && editor.theme.panel.find('#statusbar')[0];
+
+    if (statusbar) {
+      window.setTimeout(function () {
+        statusbar.insert({
+          type: 'label',
+          name: 'charactercount',
+          text: ['Characters: {0}', _self.getCount()],
+          classes: 'charactercount',
+          disabled: editor.settings.readonly
+        }, 0);
+
+        editor.on('setcontent beforeaddundo keyup', update);
+      }, 0);
+    }
+  });
+
+  _self.getCount = function () {
+    var tx = editor.getContent({ format: 'raw' });
+    return tx.length;
+  };
+
+});

course_discovery/static/js/publisher/tinymce-init.js

+$(document).ready(function(){
+    var tinymceConfig = {
+          plugins: [
+            'charactercount','link', 'lists'
+          ],
+          toolbar: 'undo redo | styleselect | bold italic | bullist numlist outdent indent | link anchor',
+          menubar: false,
+          statusbar: true,
+          skin: false,
+          setup: function (editor) {
+              keys(editor);
+          }
+    };
+
+    function keys(editor) {
+        editor.on('keydown', function (e) {
+            var ContentLength = this.plugins["charactercount"].getCount();
+            var maxLength = editor.getElement().maxLength;
+
+            if (maxLength > 0 && ContentLength >= maxLength ) {
+                if(e.keyCode != 8 && e.keyCode != 46)
+                {
+                    tinymce.dom.Event.cancel(e);
+                }
+            }
+        });
+
+        editor.on('paste', function (e) {
+            var data = e.clipboardData.getData('Text');
+            var ContentLength = this.plugins["charactercount"].getCount();
+            var maxLength = editor.getElement().maxLength;
+
+            if (maxLength > 0 && data.length > (maxLength - ContentLength)){
+                if(e.keyCode != 8 && e.keyCode != 46)
+                {
+                    tinymce.dom.Event.cancel(e);
+                }
+            }
+        });
+    }
+
+    tinymceConfig["selector"]="textarea";
+    tinymce.init(tinymceConfig);
+});

course_discovery/templates/publisher/_render_optional_field.html

 {% load i18n %}
 
 {% if field %}
-  {{ field }}
+  {{ field|safe }}
 {% else %}
   {% trans "(Optional) Not yet added" %}
 {% endif %}

course_discovery/templates/publisher/_render_required_field.html

 {% load i18n %}
 
 {% if field %}
-  {{ field }}
+  {{ field|safe }}
 {% else %}
   {% trans "(Required) Not yet added" %}
 {% endif %}

course_discovery/templates/publisher/course_edit_form.html

@@ -7,6 +7,12 @@
     {% trans "Edit Course" %}
 {% endblock title %}
 
+{% block stylesheets %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static 'bower_components/tinymce/skins/lightgray/content.min.css' %}" type="text/x-scss">
+    <link rel="stylesheet" href="{% static 'bower_components/tinymce/skins/lightgray/skin.min.css' %}" type="text/x-scss">
+{% endblock %}
+
 {% block page_content %}
     <div>
         <h1 class="hd-1 emphasized">{% trans "Edit Course" %}</h1>
@@ -163,7 +169,14 @@
                                     <div class="col col-6">
                                         <label class="field-label ">{{ form.short_description.label_tag }}</label>
                                         {{ form.short_description }}
-                                        <p>{% trans "140 character limit, including spaces." %}</p>
+                                        <p>{% trans "255 character limit, including spaces." %}</p>
+                                            {% if form.short_description.errors %}
+                                                <div class="field-message has-error">
+                                                    <span class="field-message-content">
+                                                        {{ form.short_description.errors|escape }}
+                                                    </span>
+                                                </div>
+                                            {% endif %}
                                     </div>
                                 </div>
 
@@ -203,6 +216,13 @@
                                         <label class="field-label ">{{ form.full_description.label_tag }}</label>
                                         {{ form.full_description }}
                                         <p>{% trans "2500 character limit, including spaces." %}</p>
+                                            {% if form.full_description.errors %}
+                                                <div class="field-message has-error">
+                                                    <span class="field-message-content">
+                                                        {{ form.full_description.errors|escape }}
+                                                    </span>
+                                                </div>
+                                            {% endif %}
                                     </div>
                                 </div>
 
@@ -238,6 +258,14 @@
                                     <div class="col col-6">
                                         <label class="field-label ">{{ form.expected_learnings.label_tag }}</label>
                                         {{ form.expected_learnings }}
+                                        <p>{% trans "2500 character limit, including spaces." %}</p>
+                                            {% if form.expected_learnings.errors %}
+                                                <div class="field-message has-error">
+                                                    <span class="field-message-content">
+                                                        {{ form.expected_learnings.errors|escape }}
+                                                    </span>
+                                                </div>
+                                            {% endif %}
                                     </div>
                                 </div>
 
@@ -326,6 +354,13 @@
                                         <label class="field-label ">{{ form.prerequisites.label_tag }}</label>
                                         {{ form.prerequisites }}
                                         <p>{% trans "200 character limit, including spaces." %}</p>
+                                            {% if form.prerequisites.errors %}
+                                                <div class="field-message has-error">
+                                                    <span class="field-message-content">
+                                                        {{ form.prerequisites.errors|escape }}
+                                                    </span>
+                                                </div>
+                                            {% endif %}
                                     </div>
                                 </div>
 
@@ -364,6 +399,14 @@
                                     <div class="col col-6">
                                         <label class="field-label ">{{ form.syllabus.label_tag }}</label>
                                         {{ form.syllabus }}
+                                        <p>{% trans "2500 character limit, including spaces." %}</p>
+                                            {% if form.syllabus.errors %}
+                                                <div class="field-message has-error">
+                                                    <span class="field-message-content">
+                                                        {{ form.syllabus.errors|escape }}
+                                                    </span>
+                                                </div>
+                                            {% endif %}
                                     </div>
                                 </div>
 
@@ -390,6 +433,14 @@
                                     <div class="col col-6 help-text">
                                         <label class="field-label ">{{ form.faq.label }}</label>
                                         {{ form.faq }}
+                                        <p>{% trans "2500 character limit, including spaces." %}</p>
+                                            {% if form.faq.errors %}
+                                                <div class="field-message has-error">
+                                                    <span class="field-message-content">
+                                                        {{ form.faq.errors|escape }}
+                                                    </span>
+                                                </div>
+                                            {% endif %}
                                     </div>
                                 </div>
                                 {% if is_internal_user %}
@@ -477,6 +528,14 @@
                                     <div class="col col-6 help-text">
                                         <label class="field-label ">{{ form.learner_testimonial.label }}</label>
                                         {{ form.learner_testimonial }}
+                                        <p>{% trans "500 character limit, including spaces." %}</p>
+                                            {% if form.learner_testimonial.errors %}
+                                                <div class="field-message has-error">
+                                                    <span class="field-message-content">
+                                                        {{ form.learner_testimonial.errors|escape }}
+                                                    </span>
+                                                </div>
+                                            {% endif %}
                                     </div>
                                 </div>
                             </fieldset>
@@ -499,9 +558,20 @@
     </div>
 {% endblock %}
 
-{% block extra_js %}
+{{% block extra_js %}
     <script src="{% static 'js/publisher/course-tabs.js' %}"></script>
     <script src="{% static 'js/publisher/organizations.js' %}"></script>
     <script src="{% static 'js/publisher/image-validation.js' %}"></script>
     <script src="{% static 'js/publisher/course-image.js' %}"></script>
+    <script src="{% static 'bower_components/tinymce/tinymce.min.js' %}"></script>
+    <script src="{% static 'js/publisher/tinymce-init.js' %}"></script>
+    <script src="{% static 'js/publisher/tinymce-charactercount.plugin.js' %}"></script>
+
+    <script src="{% static 'bower_components/tinymce/themes/modern/theme.min.js' %}"></script>
+    <script src="{% static 'bower_components/tinymce/plugins/lists/plugin.min.js' %}"></script>
+    <script src="{% static 'bower_components/tinymce/plugins/link/plugin.min.js' %}"></script>
+    <script src="{% static 'bower_components/tinymce/plugins/anchor/plugin.min.js' %}"></script>
+
+
 {% endblock %}
+