Working on edit.
Nick Sergeant
parent
b7a628165a
commit
99232cbf5f
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue