Finished moving to backbone

snipt/media/css/style.less

@@ -384,7 +384,7 @@ article.snipt {
             height: 200px;
             overflow: hidden;
             position: relative;
-            z-index: 49;
+            z-index: 51;
 
             div.highlight {
                 pre {
@@ -409,6 +409,9 @@ article.snipt {
                 width: 100%;
                 .box-shadow(0, -25px, 25px, #FFF);
 
+                span.collapse {
+                    display: none;
+                }
                 &:hover {
                     color: #3BAAF3;
                     font-weight: bold;
@@ -455,19 +458,6 @@ article.snipt {
                 .box-shadow(0, -25px, 25px, #F8F8F8);
             }
         }
-        section.expanded {
-            div.highlight {
-                pre {
-                    padding-bottom: 60px;
-                }
-            }
-            a.expand {
-                background-image: url('/media/images/collapse.png');
-                -webkit-box-shadow: none;
-                -moz-box-shadow: none;
-                box-shadow: none;
-            }
-        }
         &:after {
             bottom: 8px;
             content: "";
@@ -514,6 +504,32 @@ article.snipt {
             }
         }
     }
+    &.expanded {
+        div.container {
+            section.code {
+                height: auto;
+
+                div.highlight {
+                    pre {
+                        padding-bottom: 60px;
+                    }
+                }
+                a.expand {
+                    background-image: url('/media/images/collapse.png');
+                    -webkit-box-shadow: none;
+                    -moz-box-shadow: none;
+                    box-shadow: none;
+
+                    span.expand {
+                        display: none;
+                    }
+                    span.collapse {
+                        display: inline;
+                    }
+                }
+            }
+        }
+    }
 }
 
 // Utils

snipt/media/js/src/modules/site.js

@@ -8,7 +8,7 @@
         initialize: function(opts) {
 
             $search_query = $('input#search-query', this.el);
-            $snipts = $('section#snipts', this.el);
+            $snipts = $('section#snipts article.snipt', this.el);
 
             this.keyboardShortcuts();
             this.inFieldLabels();

snipt/media/js/src/modules/snipt.js

@@ -1,27 +1,32 @@
 (function(Snipt) {
 
+    Snipt.SniptModel = Backbone.Model.extend({
+    });
+
+    SniptView = Backbone.View.extend({
+        initialize: function() {
+            this.model = new Snipt.SniptModel();
+            this.model.view = this;
+            this.$el = $(this.el);
+            this.$expand_button = $('a.expand', this.$el);
+        },
+        events: {
+            'click a.expand': 'expand'
+        },
+        expand: function() {
+            this.$el.toggleClass('expanded');
+            return false;
+        }
+    });
+
     SniptListView = Backbone.View.extend({
         el: 'section#snipts',
 
         initialize: function(opts) {
-
-            $snipts = opts.snipts;
-
-            //$('input, select, textarea', this.el).each(this.addField);
-
-            //$('section.code a.expand').click ->
-                //el = $(this).parent()
-                //el.toggleClass('expanded')
-
-                //if el.hasClass('expanded')
-                    //el.css('height', 'auto')
-                    //$(this).text('Collapse')
-                //else
-                    //el.css('height', '200px')
-                    //$(this).text('Expand')
-                //false
-            //false
-            //
+            opts.snipts.each(this.addSnipt);
+        },
+        addSnipt: function() {
+            model = new SniptView({ el: this });
         }
     });
 

snipt/snipts/templates/snipts/snipt-list.html

@@ -12,7 +12,8 @@
                 {{ snipt.get_stylized|safe }}
                 {% if snipt.get_line_count > 9 %}
                     <a href="#" class="expand">
-                        Expand
+                        <span class="expand">Expand</span>
+                        <span class="collapse">Collapse</span>
                     </a>
                 {% endif %}
             </section>

snipt/templates/base.html

@@ -8,6 +8,7 @@
     {% if debug %}
     <link rel="stylesheet/less" href="{{ STATIC_URL }}css/style.less" />
     <link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" />
+    <link rel="stylesheet" href="{{ STATIC_URL }}css/themes.css" />
 
     <script type="text/javascript" src="{{ STATIC_URL }}js/libs/a_underscore.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}js/libs/b_jquery.js"></script>