From 48921dc56d36a657091081cd15b60de84bcfcf61 Mon Sep 17 00:00:00 2001
From: Radek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Date: Tue, 15 Jun 2010 10:41:50 +0200
Subject: [PATCH 1/1] tag description effects (#682)

---
 wolnelektury/static/css/master.css            |  3 ++
 wolnelektury/static/js/catalogue.js           | 54 +++++++++++++------
 .../catalogue/tagged_object_list.html         |  5 +-
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/wolnelektury/static/css/master.css b/wolnelektury/static/css/master.css
index ff502264e..3b4107150 100644
--- a/wolnelektury/static/css/master.css
+++ b/wolnelektury/static/css/master.css
@@ -353,6 +353,9 @@ div.shown-tags p, div.all-tags p {
     text-align: justify;
     overflow: hidden;
 }
+#description-short {
+	display:none;
+}
 
 #description .meta {
     margin: 0.5em;
diff --git a/wolnelektury/static/js/catalogue.js b/wolnelektury/static/js/catalogue.js
index a76215aa5..ff95df5cc 100644
--- a/wolnelektury/static/js/catalogue.js
+++ b/wolnelektury/static/js/catalogue.js
@@ -310,19 +310,43 @@ function serverTime() {
         ).click(function() {
             location.href = $('h2 a', this).attr('href');
         });
-    
-        $('#toggle-description').hover(
-            function() { $(this).css({background: '#F3F3F3', cursor: 'pointer'}); },
-            function() { $(this).css({background: '#EEE'}); }
-        ).click(function() {
-            if ($('#description').hasClass('hidden')) {
-                $('#description').animate({"height": $('#description').attr("box_h")+'px'}, {duration: "fast" }).removeClass('hidden');
-                $('p', this).html(LOCALE_TEXTS[LANGUAGE_CODE]['HIDE_DESCRIPTION'] + ' ▲');
-            } else {
-                $('#description').animate({"height": '4em'}, {duration: "fast" }).addClass('hidden');
-                $('p', this).html(LOCALE_TEXTS[LANGUAGE_CODE]['EXPAND_DESCRIPTION'] + ' ▼');
-            }
-        });
+        
+		function toggled_by_slide(cont, short_el, long_el, button, short_text, long_text) {
+			function toggle(cont, short_el, long_el, button, short_text, long_text) {
+	            if (cont.hasClass('short')) {
+	                cont.animate({"height": long_el.attr("cont_h")+'px'}, {duration: "fast" }).removeClass('short');
+	                short_el.hide();
+	                long_el.show();
+	                button.html(long_text);
+	            } else {
+	                cont.animate({"height": short_el.attr("cont_h")+'px'}, {duration: "fast" }).addClass('short');
+	                long_el.hide();
+	                short_el.show();
+	                button.html(short_text);
+	            }
+			}
+            long_el.attr("cont_h", cont.height()).hide();
+            short_el.show().attr("cont_h", cont.height());
+			cont.addClass('short');
+			button.html(short_text);
+			button.hover(
+                function() { $(this).css({background: '#F3F3F3', cursor: 'pointer'}); },
+                function() { $(this).css({background: '#EEE'}); }
+			).click(function(){
+				toggle(cont, short_el, long_el, button, short_text, long_text)
+			});
+			cont.hover(
+                function() { $(this).css({background: '#F3F3F3', cursor: 'pointer'}); },
+                function() { $(this).css({background: '#FFF'}); }
+            ).click(function(){
+                toggle(cont, short_el, long_el, button, short_text, long_text)
+            })
+		}
+        toggled_by_slide($('#description'), $('#description-short'), $('#description-long'),  
+          $('#toggle-description p'), 
+          LOCALE_TEXTS[LANGUAGE_CODE]['EXPAND_DESCRIPTION']+' ▼',
+		  LOCALE_TEXTS[LANGUAGE_CODE]['HIDE_DESCRIPTION'] + ' ▲'
+		  );
 
         $('#toggle-share-shelf').hover(
             function() { $(this).css({background: '#F3F3F3', cursor: 'pointer'}); },
@@ -361,10 +385,6 @@ function serverTime() {
                 link.parent().remove();
             });
         });
-        
-        $('#description').attr("box_h", $('#description').height());
-        $('#description').css("height", '4em').addClass('hidden');
-        $('#toggle-description p').html(LOCALE_TEXTS[LANGUAGE_CODE]['EXPAND_DESCRIPTION']+' ▼');
 		
         $('#share-shelf').hide().addClass('hidden');
 		$('#share-shelf input').focus(function(){this.select();});
diff --git a/wolnelektury/templates/catalogue/tagged_object_list.html b/wolnelektury/templates/catalogue/tagged_object_list.html
index 07fda03ad..5f7d69fe6 100644
--- a/wolnelektury/templates/catalogue/tagged_object_list.html
+++ b/wolnelektury/templates/catalogue/tagged_object_list.html
@@ -21,10 +21,11 @@
         {% with tags|last as last_tag %}
         {% if last_tag.has_description %}
             <div id="description">
-                {{ last_tag.description|safe }}
+                <div id='description-long'>{{ last_tag.description|safe }}</div>
+                <div id='description-short'>{{ last_tag.description|safe|truncatewords_html:30 }}</div>
             </div>
             <div class="clearboth"></div>
-            <div id="toggle-description"><p>{% trans "Hide description" %} ▲</p></div>
+            <div id="toggle-description"><p></p></div>
         {% endif %}
         {% if shelf_is_set %}
             <a id="download-shelf" href="{% url download_shelf last_tag.slug %}">
-- 
2.20.1