Updates XBlock renders its own template. Adds expand and collapse JS + jasmine tests.

ECOM-2809

lms/static/js/courseware/toggle_element_visibility.js

@@ -0,0 +1,42 @@
+;(function (define) {
+    'use strict';
+
+    define(["jquery"],
+        function ($) {
+
+            return function () {
+                // define variables for code legibility
+                var toggleActionElements = $('.toggle-visibility-button');
+
+                var updateToggleActionText = function (targetElement, actionElement) {
+                    var show_text = actionElement.data('show');
+                    var hide_text = actionElement.data('hide');
+
+                    if (targetElement.is(":visible")) {
+                        if (hide_text) {
+                            actionElement.html(actionElement.data('hide'));
+                        } else {
+                            actionElement.hide();
+                        }
+                    } else {
+                        if (show_text) {
+                            actionElement.html(actionElement.data('show'));
+                        }
+                    }
+                };
+
+                $.each(toggleActionElements, function (i, elem) {
+                    var toggleActionElement = $(elem);
+                    var toggleTargetElement = toggleActionElement.siblings('.toggle-visibility-element');
+
+                    updateToggleActionText(toggleTargetElement, toggleActionElement);
+
+                    toggleActionElement.on('click', function (event) {
+                        event.preventDefault();
+                        toggleTargetElement.toggleClass('hidden');
+                        updateToggleActionText(toggleTargetElement, toggleActionElement);
+                    });
+                });
+            };
+        });
+})(define || RequireJS.define);

lms/static/js/fixtures/courseware/course_updates.html

@@ -0,0 +1,45 @@
+<div class="recent-updates">
+    <article>
+        <h2 class="date">December 1, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Hide</a>
+        <div class="toggle-visibility-element article-content ">
+            <h1>Assignment 1</h1>
+            <p>Please submit your first assignment before due date.</p>
+        </div>
+    </article>
+    <article>
+        <h2 class="date">December 1, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Show</a>
+        <div class="toggle-visibility-element article-content">
+            <h1>Quiz 1</h1>
+            <p>You have a quiz due on coming friday.</p>
+        </div>
+    </article>
+    <article>
+        <h2 class="date">November 26, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Show</a>
+        <div class="toggle-visibility-element article-content hidden">
+            <h1>Assignment update</h1>
+            <p>Please submit your first assignment before due date.</p>
+        </div>
+    </article>
+</div>
+<div class="old-updates hidden toggle-visibility-element">
+    <article>
+        <h2 class="date">November 20, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Show</a>
+        <div class="toggle-visibility-element article-content hidden"><h1>Orientation</h1>
+            <p>Orientation will held on monday</p>
+        </div>
+    </article>
+    <article>
+        <h2 class="date">November 19, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Show</a>
+        <div class="toggle-visibility-element article-content hidden"><h1>Course starting</h1>
+            <p>Starting info about course.</p>
+        </div>
+    </article>
+</div>
+<a class="toggle-visibility-button show-older-updates" data-hide="" data-show="Show Earlier Course Updates">
+    Show Earlier Course Updates
+</a>

lms/static/js/spec/courseware/updates_visibility.js

@@ -0,0 +1,36 @@
+define(['jquery', 'js/courseware/toggle_element_visibility'],
+    function ($, ToggleElementVisibility) {
+        'use strict';
+
+        describe('show/hide with mouse click', function () {
+
+            beforeEach(function() {
+                loadFixtures('js/fixtures/courseware/course_updates.html');
+                /*jshint newcap: false */
+                ToggleElementVisibility();
+                /*jshint newcap: true */
+            });
+
+            it('ensures update will hide on hide button click', function () {
+                var $shownUpdate = $('.toggle-visibility-element:not(.hidden)').first();
+                $shownUpdate.siblings('.toggle-visibility-button').trigger('click');
+                expect($shownUpdate).toHaveClass('hidden');
+            });
+
+            it('ensures update will show on show button click', function () {
+                var $hiddenUpdate = $('.toggle-visibility-element.hidden').first();
+                $hiddenUpdate.siblings('.toggle-visibility-button').trigger('click');
+                expect($hiddenUpdate).not.toHaveClass('hidden');
+            });
+
+            it('ensures old updates will show on button click', function () {
+                // on page load old updates will be hidden
+                var $oldUpdates = $('.toggle-visibility-element.old-updates');
+                expect($oldUpdates).toHaveClass('hidden');
+
+                // on click on show earlier update button old updates will be shown
+                $('.toggle-visibility-button.show-older-updates').trigger('click');
+                expect($oldUpdates).not.toHaveClass('hidden');
+            });
+        });
+    });

lms/static/js/spec/main.js

@@ -708,6 +708,7 @@
         'lms/include/js/spec/edxnotes/collections/notes_spec.js',
         'lms/include/js/spec/search/search_spec.js',
         'lms/include/js/spec/navigation_spec.js',
+        'lms/include/js/spec/courseware/updates_visibility.js',
         'lms/include/js/spec/discovery/collections/filters_spec.js',
         'lms/include/js/spec/discovery/models/course_card_spec.js',
         'lms/include/js/spec/discovery/models/course_directory_spec.js',

lms/static/sass/course/_info.scss

@@ -50,6 +50,8 @@ div.info-wrapper {
     @extend .content;
     @include padding-left($baseline);
     line-height: lh();
+    width: 100%;
+    display: block;
 
     h1 {
       @include text-align(left);
@@ -69,6 +71,25 @@ div.info-wrapper {
       margin-bottom: lh();
       padding-left: 0;
 
+      .updates-article {
+        border-radius:3px;
+        background-color: $white;
+        border:1px solid transparent;
+        &:hover {
+          border: 1px solid $gray-l3;
+        }
+      }
+
+      .show-older-updates {
+        @extend %btn-pl-white-base;
+        padding: ($baseline/2);
+        @include font-size(14);
+        width: 100%;
+        display: block;
+        text-align: center;
+        cursor: pointer;
+      }
+
       > li,article {
         @extend .clearfix;
         padding: $baseline;
@@ -81,12 +102,25 @@ div.info-wrapper {
           }
         }
 
-        h2 {
+        h2.date {
           @extend %t-title9;
           margin-bottom: ($baseline/4);
           text-transform: none;
           background: url('#{$static-path}/images/calendar-icon.png') 0 center no-repeat;
           @include padding-left($baseline);
+          @include float(left);
+        }
+
+        .toggle-visibility-button {
+          @extend %t-title9;
+          @include float(right);
+          cursor: pointer;
+        }
+
+        .toggle-visibility-element {
+          content:'';
+          display:block;
+          clear: both;
         }
 
         section.update-description {

lms/templates/courseware/course_updates.html

@@ -0,0 +1,29 @@
+<%! from django.utils.translation import ugettext as _ %>
+<section>
+<div class="recent-updates">
+  % for index, update in enumerate(visible_updates):
+    <article class="updates-article">
+      % if not update.get("is_error"):
+        <h2 class="date">${update.get("date")}</h2>
+        <a class="toggle-visibility-button" data-hide="${_('Hide')}" data-show="${_('Show')}"></a>
+      % endif
+      <div class="toggle-visibility-element article-content ${'hidden' if index >= 1 else ''}">
+        ${update.get("content")}
+      </div>
+    </article>
+  % endfor
+</div>
+<div class="old-updates hidden toggle-visibility-element">
+  % for update in hidden_updates:
+    <article class="updates-article">
+      <h2 class="date">${update.get("date")}</h2>
+      <a class="toggle-visibility-button" data-hide="${_('Hide')}" data-show="${_('Show')}"></a>
+      <div class="toggle-visibility-element article-content hidden">${update.get("content")}</div>
+    </article>
+  % endfor
+</div>
+
+% if len(hidden_updates) > 0:
+  <a class="toggle-visibility-button show-older-updates" data-hide="" data-show="${_('Show Earlier Course Updates')}"></a>
+% endif
+</section>

lms/templates/courseware/info.html

@@ -34,6 +34,10 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
 
 <%include file="/courseware/course_navigation.html" args="active_page='info'" />
 
+<%static:require_module module_name="js/courseware/toggle_element_visibility" class_name="ToggleElementVisibility">
+        ToggleElementVisibility();
+</%static:require_module>
+
 <%block name="bodyclass">view-in-course view-course-info ${course.css_class or ''}</%block>
 <section class="container">
   <div class="home">