Working on edit UI.
parent
4876e0dd7f
commit
6dc6f25cdf
|
@ -59,30 +59,51 @@
|
||||||
window.location = this.model.get('get_absolute_url');
|
window.location = this.model.get('get_absolute_url');
|
||||||
},
|
},
|
||||||
edit: function() {
|
edit: function() {
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
|
||||||
window.editing = true;
|
window.editing = true;
|
||||||
window.ui_halted = true;
|
window.ui_halted = true;
|
||||||
|
|
||||||
this.select();
|
this.select();
|
||||||
|
|
||||||
var editPane = this.editTemplate({snipt: this.model.toJSON()});
|
var editPane = this.editTemplate({snipt: this.model.toJSON()});
|
||||||
var JavaScriptMode = require('ace/mode/javascript').Mode;
|
//var JavaScriptMode = require('ace/mode/javascript').Mode;
|
||||||
|
|
||||||
window.site.$main.hide();
|
window.site.$main.hide();
|
||||||
window.site.$body.addClass('detail editing');
|
window.site.$body.addClass('detail editing');
|
||||||
window.site.$main_edit.html(editPane).show();
|
window.site.$main_edit.html(editPane);
|
||||||
|
|
||||||
|
$('option[value="' + this.model.get('lexer') + '"]').attr('selected', 'selected');
|
||||||
|
|
||||||
|
window.site.$main_edit.show();
|
||||||
|
|
||||||
$('div#editor', window.site.$main_edit).css('height', ($(window).height() - 187));
|
$('div#editor', window.site.$main_edit).css('height', ($(window).height() - 187));
|
||||||
window.editor = ace.edit('editor');
|
var editor = ace.edit('editor');
|
||||||
window.editor.setTheme('ace/theme/tomorrow');
|
editor.setTheme('ace/theme/tomorrow');
|
||||||
window.editor.renderer.setShowGutter(false);
|
editor.renderer.setShowGutter(false);
|
||||||
window.editor.getSession().setMode(new JavaScriptMode());
|
//editor.getSession().setMode(new JavaScriptMode());
|
||||||
window.editor.$textarea = $('textarea', window.editor.container);
|
editor.focus();
|
||||||
window.editor.focus();
|
$('textarea, input', window.site.$main_edit).bind('keydown', 'esc', function(e) {
|
||||||
window.editor.$textarea.bind('keydown', 'esc', function(e) {
|
|
||||||
$(this).blur();
|
$(this).blur();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('button.delete', window.site.$main_edit).on('click', function(e) {
|
||||||
|
if (confirm('Are you sure you want to delete this snipt?')) {
|
||||||
|
that.model.destroy();
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
$('button.cancel', window.site.$main_edit).on('click', function(e) {
|
||||||
|
window.site.snipt_list.escapeUI();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
$('button.save', window.site.$main_edit).on('click', function(e) {
|
||||||
|
that.model.save();
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
@ -150,8 +171,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
remove: function() {
|
remove: function() {
|
||||||
|
console.log('remove() on view called');
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
|
console.log('render called');
|
||||||
|
|
||||||
this.$el.html(this.template({
|
this.$el.html(this.template({
|
||||||
snipt: this.model.toJSON()
|
snipt: this.model.toJSON()
|
||||||
|
@ -273,8 +296,37 @@
|
||||||
model: new Snipt.SniptModel(data)
|
model: new Snipt.SniptModel(data)
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
escapeUI: function() {
|
||||||
|
if (window.editing) {
|
||||||
|
if (!window.site.$html.hasClass('detail')) {
|
||||||
|
window.site.$body.removeClass('detail');
|
||||||
|
}
|
||||||
|
window.site.$main_edit.hide();
|
||||||
|
window.site.$body.removeClass('editing');
|
||||||
|
window.site.$main.show();
|
||||||
|
|
||||||
|
window.editing = true;
|
||||||
|
window.ui_halted = false;
|
||||||
|
|
||||||
|
if (window.site.$snipts.index(window.$selected) === 0) {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
} else {
|
||||||
|
window.site.$html_body.animate({
|
||||||
|
scrollTop: window.$selected.offset().top - 50
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!window.ui_halted) {
|
||||||
|
if ($selected) {
|
||||||
|
$selected.trigger('deselect');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
keyboardShortcuts: function() {
|
keyboardShortcuts: function() {
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
|
||||||
$selected = window.selected;
|
$selected = window.selected;
|
||||||
$document = $(document);
|
$document = $(document);
|
||||||
|
|
||||||
|
@ -314,31 +366,7 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$document.bind('keydown', 'esc', function() {
|
$document.bind('keydown', 'esc', function() {
|
||||||
if (window.editing) {
|
that.escapeUI();
|
||||||
if (!window.site.$html.hasClass('detail')) {
|
|
||||||
window.site.$body.removeClass('detail');
|
|
||||||
}
|
|
||||||
window.site.$main_edit.hide();
|
|
||||||
window.site.$body.removeClass('editing');
|
|
||||||
window.site.$main.show();
|
|
||||||
|
|
||||||
window.editing = true;
|
|
||||||
window.ui_halted = false;
|
|
||||||
|
|
||||||
if (window.site.$snipts.index(window.$selected) === 0) {
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
} else {
|
|
||||||
window.site.$html_body.animate({
|
|
||||||
scrollTop: window.$selected.offset().top - 50
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (!window.ui_halted) {
|
|
||||||
if ($selected) {
|
|
||||||
$selected.trigger('deselect');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
$document.bind('keydown', 'g', function() {
|
$document.bind('keydown', 'g', function() {
|
||||||
if (!window.ui_halted) {
|
if (!window.ui_halted) {
|
||||||
|
|
|
@ -31,13 +31,17 @@
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<label for="</label>">Type</label>
|
<label for="</label>">Type</label>
|
||||||
<select name="lexer" id="id_lexer">
|
<select name="lexer" id="id_lexer">
|
||||||
<option value="0">test</option>
|
{% endverbatim %}
|
||||||
|
{% for lexer in lexers %}
|
||||||
|
<option value="{{ lexer.1.0 }}">{{ lexer.0 }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
{% verbatim %}
|
||||||
</select>
|
</select>
|
||||||
<label>
|
<label>
|
||||||
Public
|
Public
|
||||||
<input type="checkbox" name="" value="" />
|
<input type="checkbox" <% if (snipt.pub) { %>checked="checked"<% } %> name="" value="" />
|
||||||
</label>
|
</label>
|
||||||
<textarea>Tags</textarea>
|
<textarea><%= snipt.tags_list %></textarea>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
from django.shortcuts import get_object_or_404, render_to_response
|
from django.shortcuts import get_object_or_404, render_to_response
|
||||||
from django.http import Http404, HttpResponseRedirect
|
from django.http import Http404, HttpResponseRedirect
|
||||||
from django.contrib.auth.models import User
|
from django.contrib.auth.models import User
|
||||||
|
from pygments.lexers import get_all_lexers
|
||||||
from django.template import RequestContext
|
from django.template import RequestContext
|
||||||
from annoying.decorators import render_to
|
from annoying.decorators import render_to
|
||||||
from snipts.models import Favorite, Snipt
|
from snipts.models import Favorite, Snipt
|
||||||
|
@ -31,6 +32,7 @@ def list_public(request, tag_slug=None):
|
||||||
|
|
||||||
return {
|
return {
|
||||||
'has_snipts': True,
|
'has_snipts': True,
|
||||||
|
'lexers': sorted(get_all_lexers()),
|
||||||
'public': True,
|
'public': True,
|
||||||
'snipts': snipts,
|
'snipts': snipts,
|
||||||
'tags': tags,
|
'tags': tags,
|
||||||
|
@ -68,6 +70,7 @@ def list_user(request, username, tag_slug=None):
|
||||||
|
|
||||||
return {
|
return {
|
||||||
'has_snipts': True,
|
'has_snipts': True,
|
||||||
|
'lexers': sorted(get_all_lexers()),
|
||||||
'public': public,
|
'public': public,
|
||||||
'snipts': snipts,
|
'snipts': snipts,
|
||||||
'tags': tags,
|
'tags': tags,
|
||||||
|
@ -103,6 +106,7 @@ def detail(request, username, snipt_slug):
|
||||||
|
|
||||||
return {
|
return {
|
||||||
'has_snipts': True,
|
'has_snipts': True,
|
||||||
|
'lexers': sorted(get_all_lexers()),
|
||||||
'public': public,
|
'public': public,
|
||||||
'snipt': snipt,
|
'snipt': snipt,
|
||||||
'tags': tags,
|
'tags': tags,
|
||||||
|
|
|
@ -33,7 +33,6 @@
|
||||||
|
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/ace/ace.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/ace/ace.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/ace/theme-tomorrow.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/ace/theme-tomorrow.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/ace/mode-javascript.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript">{% block js %}window.user = '{{ request.user.username }}';
|
<script type="text/javascript">{% block js %}window.user = '{{ request.user.username }}';
|
||||||
window.pub = {{ public|lower }};{% endblock %} </script>
|
window.pub = {{ public|lower }};{% endblock %} </script>
|
||||||
|
|
Loading…
Reference in New Issue