display videos on front-end + fix sort bug

itf/app/models.py

@@ -94,6 +94,15 @@ class ItfModel(models.Model):
     return d
 
 
+  def get_videos(self):
+    from mediagallery.models import YoutubeVideo
+    
+    if self.galleries:
+        qset = Youtube.objects.filter(album__in=self.galleries.all())
+        if qset.count() == 0:
+            return False
+        return qset[0:9]
+
   #Returns the title for this object, used as title of page, title of object, and by default, title in left hand display. By default, is a field called 'title', but subclasses can over-ride either title field or the get_title method and return anything.
   def get_title(self):
     try:

itf/mediagallery/models.py

@@ -4,6 +4,7 @@ from ox.django.fields import DictField
 from django.contrib.contenttypes.models import ContentType
 from django.contrib.contenttypes import generic
 from django.core.files.base import ContentFile
+from sorl.thumbnail import get_thumbnail
 
 class GalleryAlbum(ItfModel):
     '''
@@ -21,6 +22,25 @@ class GalleryAlbum(ItfModel):
     def get_edit_url(self):
         return '/mediagallery/edit/%d' % self.id
 
+    def thumbnail(self):
+        if Photo.objects.filter(album=self).count() == 0:
+            return None
+        return Photo.objects.filter(album=self)[0].image        
+
+    def get_dict(self):
+        return {
+            'photos': Photo.objects.filter(album=self),
+            'videos': YoutubeVideo.objects.filter(album=self),
+            'links': GalleryLink.objects.filter(album=self)
+        }
+
+    def get_json(self):
+        return {
+            'photos': [p.get_dict() for p in Photo.objects.filter(album=self)],
+            'videos': [y.get_dict() for y in YoutubeVideo.objects.filter(album=self)],
+            'links': [l.get_dict() for l in GalleryLink.objects.filter(album=self)]
+        }        
+
 
 class GalleryItem(models.Model):
     title = models.CharField(max_length=512, blank=True, null=True)
@@ -48,6 +68,16 @@ class Photo(GalleryItem):
             return True
         return False
 
+    def get_thumbnail(self, size='100x100'):
+        return get_thumbnail(self.image, size).url
+
+    def get_dict(self):
+        return {
+            'id': self.id,
+            'title': self.title,
+            'thumb640': self.get_thumbnail(size='640')
+        } 
+
 
 class YoutubeVideo(GalleryItem):
     youtube_id = models.CharField(max_length=64)
@@ -58,10 +88,28 @@ class YoutubeVideo(GalleryItem):
     def thumbnail(self):
         return "http://i.ytimg.com/vi/%s/default.jpg" % self.youtube_id
 
+    def iframe(self):
+        return '<iframe width="560" height="315" src="http://www.youtube.com/embed/%s" frameborder="0" allowfullscreen></iframe>' % self.youtube_id
+
+    def get_dict(self):
+        return {
+            'id': self.id,
+            'youtube_id': self.youtube_id,
+            'thumbnail': self.thumbnail(),
+            'iframe': self.iframe()
+        }
+
 
 class GalleryLink(GalleryItem):
     url = models.URLField(verify_exists=False, max_length=1024)
     
+    def get_dict(self):
+        return {
+            'id': self.id,
+            'title': self.title,
+            'url': self.url
+        }
+
 #class Video(GalleryItem):
 #    ...
 

itf/static/css/noel/inner.css

@@ -115,6 +115,10 @@ padding-right:10px;
 float:left;
 /*border-bottom:1px solid #f0dfdf;*/}
 
+.tab_content {
+    display:none;
+}
+
 #selection
 {padding-left:6px;
 /*border-top:1px solid #f0dfdf;*/

itf/static/js/innertabs.js

@@ -7,9 +7,18 @@
 		    $(".tab_content").hide(); //Hide all tab content
 		    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
 		    $(activeTab).fadeIn(); //Fade in the active ID content
+            location.hash = activeTab.replace("#", "");
 		    return false;
     //    var queryData = {};
 	    }); 
+    	//$(".tab_content").hide(); //Hide all content
+
+        if (location.hash != '') {
+            $('a[href=' + location.hash + ']').closest('li').click();
+            //console.log('a[href=#' + location.hash + ']');
+        } else {
+            $("ul.tabsInnerRight li:first").click(); 
+        }
 /*
         
         if (queryData.hasOwnProperty("innertab")) {
@@ -23,7 +32,7 @@
         }
 */
 	//When page loads...
-    	$(".tab_content").hide(); //Hide all content
-    	$("ul.tabsInnerRight li:first").click() //addClass("active").show(); //Activate first tab
+
+    	//addClass("active").show(); //Activate first tab
 
     });

itf/static/js/render_object.js

@@ -241,18 +241,18 @@ $(function() {
     $('#listForm').submit(function(e) {
         return true;
 //        e.preventDefault();
-        doListLoading();
-        var urlString = "?tab_id=" + $('.innerSelected').attr("data-id") + "&sort=" + sortString + "&search=" + searchTerm;
-        var formData = getSearchFormJSON();
-//        delete(formData.object_id);
-        var urlString = JSONtoQueryString(formData);
-//        console.log(urlString);
-        History.pushState(formData, "", urlString);
-        $.getJSON("/m/get_list", formData, function(data) {
-            stopListLoading(data);
-            displayList(data.items);
-            $('#object_id').val('');            
-        });  
+//        doListLoading();
+//        var urlString = "?tab_id=" + $('.innerSelected').attr("data-id") + "&sort=" + sortString + "&search=" + searchTerm;
+//        var formData = getSearchFormJSON();
+////        delete(formData.object_id);
+//        var urlString = JSONtoQueryString(formData);
+////        console.log(urlString);
+//        History.pushState(formData, "", urlString);
+//        $.getJSON("/m/get_list", formData, function(data) {
+//            stopListLoading(data);
+//            displayList(data.items);
+//            $('#object_id').val('');            
+//        });  
     });
 
 
@@ -270,6 +270,10 @@ $(function() {
         $('#listForm').submit();        
     });
 
+    $('#orderBySelect').change(function() {
+        $('#listForm').submit();
+    });
+
 //    var State = History.getState();
 //    console.log(State);
     

itf/templates/modules/itfprofiles/production.html

@@ -156,7 +156,22 @@ $(function() {
     {% if user.is_authenticated %}
     <div class="addComments">
         <h4>Your comments</h4>
-        {% render_comment_form for obj %}
+
+    <div id="comment_form">
+    {% get_comment_form for obj as form %}
+    <form action="{% comment_form_target %}" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="next" value="{{ obj.get_absolute_url }}#buzz" />
+        {{ form.as_p }}
+        <p class="submit">
+            <input type="submit" name="post" class="submit-post" value="Post" />
+        </p>
+
+    </form>
+    <script>
+    $('#id_honeypot').closest('p').hide();
+    </script>
+        
     </div>
     {% else %}
     <div class="addComments">
@@ -185,7 +200,8 @@ $(function() {
 <!--        <br /><br />-->
 <!--    </div>-->
 <!--    <br />-->
-<!--    <a href="" class="rightFloat">More>></a>
-->
+<!--    <a href="" class="rightFloat">More>></a>
+-->
 
 </div> <!-- end buzz -->
 

itf/templates/modules/scriptbank/script.html

@@ -15,7 +15,7 @@ $(function() {
     <li><a href="#productions">Productions</a></li>
     <li><a href="#people">People</a></li>
     <li><a href="#notes">Notes</a></li>
-    <li><a href="#gallery">Gallery</a></li>
+    {% if obj.galleries.count %} <li><a href="#gallery">Gallery</a></li> {% endif %}
     {% if resources %}<li><a href="#resources">Resources</a></li>{% endif %}
 </ul>    
 
@@ -273,29 +273,27 @@ $(function() {
 
     <div class="imgVideoBlock">
 	<h3 class="orange">Photos</h3>
-    
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
+    {% for g in obj.galleries.all %}
+        {% thumbnail g.thumbnail "160x120" crop="center" as thumb %}        
+            <img src="{{ thumb.url }}" width="160" height="120" alt="{{ g.title }}" />
+        {% endthumbnail %}    
+    {% endfor %}
 
-	<a href="" class="moreLink">More&raquo;</a>    
+	<!-- <a href="" class="moreLink">More&raquo;</a> --> 
     </div>
        
     <br>
 	
-    <div class="imgVideoBlock">
-        <h3 class="orange">Videos</h3>
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-	<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
-
-	<a href="" class="moreLink">More&raquo;</a>    
+    {% if obj.get_videos %}
+        <div class="imgVideoBlock">
+            <h3 class="orange">Videos</h3>
+        {% for v in obj.get_videos %}
+            <a href="http://youtu.be/{{ v.youtube_id }}" class="youtubeLink" target="_blank">
+                <img src="{{ v.thumbnail }}" /> 
+            </a>
+        {% endfor %}
+    {% endif %}
+	<!-- <a href="" class="moreLink">More&raquo;</a> -->    
     </div>
 
 </div> <!-- end gallery -->