From 99232cbf5fa10b2210561100809dc2ce0aa3afdb Mon Sep 17 00:00:00 2001
From: Nick Sergeant <nick@nicksergeant.com>
Date: Wed, 15 Feb 2012 23:06:11 -0500
Subject: [PATCH] Working on edit.

---
 snipt/media/css/style.scss                    |  9 +++-
 snipt/media/js/src/modules/snipt.js           | 35 ++++++++++++----
 snipt/snipts/templates/snipts/snipt-list.html |  2 +-
 snipt/templates/base.html                     | 42 ++++++++++++-------
 4 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/snipt/media/css/style.scss b/snipt/media/css/style.scss
index 1125181..8ebfa49 100644
--- a/snipt/media/css/style.scss
+++ b/snipt/media/css/style.scss
@@ -408,6 +408,12 @@ section.main {
         }
     }
 }
+section.main-edit {
+    div.inner {
+        float: none;
+        width: 100%;
+    }
+}
 article.snipt {
     margin: 30px 0;
     position: relative;
@@ -808,7 +814,8 @@ div.modal {
     }
 }
 div#keyboard-shortcuts {
-    max-height: 590px;
+    max-height: 617px;
+    top: 43%;
 
     table {
         margin-bottom: 0;
diff --git a/snipt/media/js/src/modules/snipt.js b/snipt/media/js/src/modules/snipt.js
index a9fb0f6..b141b60 100644
--- a/snipt/media/js/src/modules/snipt.js
+++ b/snipt/media/js/src/modules/snipt.js
@@ -11,7 +11,9 @@
             this.model.view = this;
             this.model.bind('change', this.render, this);
             this.model.bind('destroy', this.remove, this);
-            this.template = _.template($('#snipt-template').html());
+
+            this.template     = _.template($('#snipt').html());
+            this.editTemplate = _.template($('#edit').html());
 
             this.$el = $(this.el);
             this.$aside = $('aside', this.$el);
@@ -30,6 +32,7 @@
         },
         events: {
             'click a.copy':     'copyFromClick',
+            'click a.edit':     'edit',
             'click a.embed':    'embed',
             'click a.expand':   'expand',
             'click .container': 'selectFromClick',
@@ -37,6 +40,7 @@
             'copyClose':        'copyClose',
             'detail':           'detail',
             'deselect':         'deselect',
+            'edit':             'edit',
             'embed':            'embed',
             'expand':           'expand',
             'next':             'next',
@@ -80,14 +84,23 @@
         detail: function() {
             window.location = this.model.get('url');
         },
+        edit: function() {
+            if (!$('section.main-edit:visible').length) {
+                var editPane = this.editTemplate(this.model.toJSON());
+                $main = $('section.main');
+                $main.hide();
+                $main.after(editPane);
+            }
+            return false;
+        },
+        embed: function() {
+            alert('TODO');
+        },
         expand: function() {
             this.$container.toggleClass('expanded', 100);
             this.$tags.toggleClass('expanded');
             this.select();
         },
-        embed: function() {
-            alert('TODO');
-        },
         next: function() {
             window.site.$copyModals.modal('hide');
             nextSnipt = this.$el.next('article.snipt');
@@ -106,7 +119,6 @@
             console.log('SniptView.remove() called');
         },
         render: function() {
-            console.log('SniptView.render() called');
             this.$el.html(this.template(this.model.toJSON()));
             return this;
         },
@@ -132,7 +144,6 @@
             e.stopPropagation();
         },
         test: function() {
-            console.log('test triggered');
             this.model.set({'title': 'Changed title!'});
         }
     });
@@ -191,8 +202,8 @@
             });
             $document.bind('keydown', 'e', function() {
                 if ($selected) {
-                    if ($selected.hasClass('expandable')) {
-                        $selected.trigger('expand');
+                    if ($selected.hasClass('editable')) {
+                        $selected.trigger('edit');
                     }
                 }
             });
@@ -200,6 +211,10 @@
                 if ($selected) {
                     $selected.trigger('deselect');
                 }
+                if ($('section.main-edit:visible').length) {
+                    $('section.main-edit').remove();
+                    $('section.main').show();
+                }
             });
             $document.bind('keydown', 'g', function() {
                 if (window.$selected) {
@@ -223,7 +238,9 @@
             });
             $document.bind('keydown', 'o', function() {
                 if ($selected) {
-                    $selected.trigger('detail');
+                    if ($selected.hasClass('expandable')) {
+                        $selected.trigger('expand');
+                    }
                 }
             });
             $document.bind('keydown', 'p', function() {
diff --git a/snipt/snipts/templates/snipts/snipt-list.html b/snipt/snipts/templates/snipts/snipt-list.html
index 15e9f6e..dc7feb2 100644
--- a/snipt/snipts/templates/snipts/snipt-list.html
+++ b/snipt/snipts/templates/snipts/snipt-list.html
@@ -1,6 +1,6 @@
 {% load humanize %}
 
-<article class="snipt {% if not snipt.public %}private-snipt{% endif %} {% if snipt.line_count > 8 and not detail %}expandable{% endif %}">
+<article class="snipt {% if not snipt.public %}private-snipt{% endif %} {% if snipt.line_count > 8 and not detail %}expandable{% endif %} {% if snipt.user == request.user %}editable{% endif %}">
     <div class="number">#{{ snipt.id }}</div>
     <div class="group">
         <div class="container">
diff --git a/snipt/templates/base.html b/snipt/templates/base.html
index b322a96..c38ffbe 100644
--- a/snipt/templates/base.html
+++ b/snipt/templates/base.html
@@ -207,7 +207,7 @@
                         <td>Go to snipt</td>
                     </tr>
                     <tr>
-                        <td>e</td>
+                        <td>o</td>
                         <td>Expand / collapse snipt</td>
                     </tr>
                     <tr>
@@ -218,27 +218,41 @@
                         <td>c</td>
                         <td>Copy snipt</td>
                     </tr>
+                    <tr>
+                        <td>e</td>
+                        <td>Edit snipt</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
     </div>
     {% if snipts or snipt %}
         {% verbatim %}
-            <article id="snipt-template" class="snipt">
-                <div class="number">#0</div>
-                <div class="group">
-                    <div class="container">
-                        <header>
-                            <h2></h2>
-                            <h1><a href="{{url}}">{{title}}</a></h1>
-                        </header>
-                        <section class="code autumn">
-                        </section>
-                        <div class="ruler top-x"></div>
-                        <div class="ruler bottom-x"></div>
+            <div class="hidden" id="templates">
+                <div id="snipt">
+                    <div class="number">#0</div>
+                    <div class="group">
+                        <div class="container">
+                            <header>
+                                <h2></h2>
+                                <h1><a href="{{url}}">{{title}}</a></h1>
+                            </header>
+                            <section class="code autumn">
+                            </section>
+                            <div class="ruler top-x"></div>
+                            <div class="ruler bottom-x"></div>
+                        </div>
                     </div>
                 </div>
-            </article>
+                <div id="edit">
+                    <section class="main main-edit">
+                        <div class="inner">
+                            {{url}}<br />
+                            {{title}}
+                        </div>
+                    </section>
+                </div>
+            </div>
         {% endverbatim %}
     {% endif %}
     {% if not debug %}