Merge pull request #14 from ngokevin/desc

add more toggle to descriptions (bug 994827)

src/media/css/style.css

@@ -65,8 +65,10 @@ a {
   text-decoration: none;
 }
 
+a:not([href]):hover,
 a:hover {
   color: #036;
+  cursor: pointer;
 }
 
 a.button,
@@ -92,6 +94,10 @@ button:focus {
   background: #3D8ECC;
 }
 
+.hidden {
+  display: none;
+}
+
 .header {
   flex: 1 0 62px;
 }

src/media/js/templating.js

@@ -15,9 +15,16 @@ define('templating', ['settings', 'utils'], function(settings, utils) {
 
   function render(name, ctx, cb) {
     if (typeof ctx === 'function') {
+      // If callback passed in as second arg, asume no context.
       cb = ctx;
       ctx = {};
     }
+
+    if (!cb) {
+      // If no callback, don't pass into Nunjucks render.
+      return env.render(name + '.html', ctx);
+    }
+
     return env.render(name + '.html', ctx, function(err, res) {
       if (err) {
         return console.error(err);
@@ -47,9 +54,18 @@ define('templating', ['settings', 'utils'], function(settings, utils) {
     return obj.replace(/\n/g, '<br>');
   }
 
-  function summarise(str) {
-    // A temporary solution for creating summaries from long descriptions.
-    return str.split('\n')[0].replace(/<(?:.|\n)*?>/g, '').replace(/\..*:\s+/g, '.');
+  function summarise(str, klass) {
+    // Truncates a long description into a visible portion and hidden portion.
+    // Clicking on a "more" link reveals the hidden portion.
+    var lines = str.split('\n');
+    var firstLine = lines[0].replace(/<(?:.|\n)*?>/g, '').replace(/\..*:\s+/g, '.');
+    lines.splice(0, 1);  // Remove first line now that we've stored it.
+
+    return render('truncated', {
+        'class': klass,
+        'hidden_lines': lines,
+        'visible_line': firstLine,
+    });
   }
 
   env.addFilter('floor', Math.floor);

src/media/js/views/search.js

@@ -145,6 +145,11 @@ define('views/search',
     search();
   });
 
+  $.delegate('click', '.truncated-more', function(e) {
+    e.target.nextElementSibling.classList.remove('hidden');
+    e.target.parentNode.removeChild(e.target);
+  });
+
   $.delegate('click', '.toggle-view', function(e) {
     e.preventDefault();
     $('main').classList.toggle('expanded');

src/templates/detail.html

@@ -33,7 +33,7 @@
       {% endif %}
       <div class="description">
         <h3>{{ _('Description', 'description') }}</h3>
-        {{ doc.description|translate(doc)|summarise }}
+        {{ doc.description|translate(doc)|summarise('description')|safe }}
       </div>
     </div>
     <div class="actions">

src/templates/results.html

@@ -17,7 +17,7 @@
             _('Open', 'open') if installed else _('Install', 'install') }}</button>
         </div>
       </a>
-      <div class="description">{{ doc.description|translate(doc)|summarise }}</div>
+      {{ doc.description|translate(doc)|summarise('description')|safe }}
       {% if doc.previews.length > 0 %}
       <div class="thumbnail">
           <img src="{{ doc.previews[0].thumbnail_url }}">

src/templates/truncated.html

@@ -0,0 +1,15 @@
+<div class="{{ class }} truncated">
+  <span class="visible">{{ visible_line }}</span>
+  {% if hidden_lines.length > 1 %}
+    <a class="truncated-more">{{ _('more') }}</a>
+    <div class="hidden">
+      {% for line in hidden_lines %}
+        {% if not line %}
+          <br>
+        {% else %}
+          <p>{{ line|safe }}</p>
+        {% endif %}
+      {% endfor %}
+    </div>
+  {% endif %}
+</div>