Working on test.
parent
35c093835e
commit
5f2c4807c3
|
@ -8,10 +8,6 @@
|
|||
|
||||
initialize: function(opts) {
|
||||
|
||||
_.templateSettings = {
|
||||
interpolate : /\{\{(.+?)\}\}/g
|
||||
};
|
||||
|
||||
this.$el = $(this.el);
|
||||
this.$search_form = $('form.search', this.$el);
|
||||
this.$search_query = $('input#search-query', this.$el);
|
||||
|
|
|
@ -15,20 +15,7 @@
|
|||
this.template = _.template($('#snipt').html());
|
||||
this.editTemplate = _.template($('#edit').html());
|
||||
|
||||
this.$el = $(this.el);
|
||||
this.$aside = $('aside', this.$el);
|
||||
this.$container = $('div.container', this.$el);
|
||||
this.$copyModal = $('div.copy-modal', this.$el);
|
||||
this.$copyModalBody = $('div.modal-body', this.$copyModal);
|
||||
this.$copyModalClose = $('a.close', this.$copyModal);
|
||||
this.$copyModalType = $('h4 span', this.$copyModal);
|
||||
this.$h1 = $('header h1 a', this.$el);
|
||||
this.$raw = $('div.raw', this.$el);
|
||||
this.$tags = $('section.tags ul', this.$aside);
|
||||
|
||||
this.$copyModal.on('hidden', function(e) {
|
||||
$(this).parent().trigger('copyClose');
|
||||
});
|
||||
this.initLocalVars();
|
||||
},
|
||||
events: {
|
||||
'click a.copy': 'copyFromClick',
|
||||
|
@ -45,8 +32,7 @@
|
|||
'expand': 'expand',
|
||||
'next': 'next',
|
||||
'prev': 'prev',
|
||||
'selectSnipt': 'select',
|
||||
'test': 'test'
|
||||
'selectSnipt': 'select'
|
||||
},
|
||||
|
||||
copy: function() {
|
||||
|
@ -69,6 +55,7 @@
|
|||
}
|
||||
},
|
||||
copyClose: function() {
|
||||
console.log('copyClose called');
|
||||
$('textarea', this.$copyModal).remove();
|
||||
},
|
||||
copyFromClick: function() {
|
||||
|
@ -82,7 +69,7 @@
|
|||
}
|
||||
},
|
||||
detail: function() {
|
||||
window.location = this.model.get('absolute_url');
|
||||
window.location = this.model.get('get_absolute_url');
|
||||
},
|
||||
edit: function() {
|
||||
if (!$('section.main-edit:visible').length) {
|
||||
|
@ -103,6 +90,22 @@
|
|||
this.select();
|
||||
return false;
|
||||
},
|
||||
initLocalVars: function() {
|
||||
this.$el = $(this.el);
|
||||
this.$aside = $('aside', this.$el);
|
||||
this.$container = $('div.container', this.$el);
|
||||
this.$copyModal = $('div.copy-modal', this.$el);
|
||||
this.$copyModalBody = $('div.modal-body', this.$copyModal);
|
||||
this.$copyModalClose = $('a.close', this.$copyModal);
|
||||
this.$copyModalType = $('h4 span', this.$copyModal);
|
||||
this.$h1 = $('header h1 a', this.$el);
|
||||
this.$raw = $('div.raw', this.$el);
|
||||
this.$tags = $('section.tags ul', this.$aside);
|
||||
|
||||
this.$copyModal.on('hidden', function(e) {
|
||||
$(this).parent().trigger('copyClose');
|
||||
});
|
||||
},
|
||||
next: function() {
|
||||
window.site.$copyModals.modal('hide');
|
||||
nextSnipt = this.$el.next('article.snipt');
|
||||
|
@ -121,7 +124,33 @@
|
|||
console.log('SniptView.remove() called');
|
||||
},
|
||||
render: function() {
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
|
||||
this.$el.html(this.template({
|
||||
snipt: this.model.toJSON()
|
||||
}));
|
||||
this.initLocalVars();
|
||||
|
||||
if (this.model.get('pub') === true) {
|
||||
this.$el.removeClass('private-snipt');
|
||||
} else {
|
||||
this.$el.addClass('private-snipt');
|
||||
}
|
||||
|
||||
if (this.model.get('user').username === window.user) {
|
||||
this.$el.addClass('editable');
|
||||
} else {
|
||||
this.$el.removeClass('editable');
|
||||
}
|
||||
|
||||
if (this.model.get('line_count') > 8 && !window.detail) {
|
||||
this.$el.addClass('expandable');
|
||||
} else {
|
||||
this.$el.removeClass('expandable');
|
||||
}
|
||||
|
||||
$('script#disqus').remove();
|
||||
$('body').append('<script id="disqus" type="text/javascript">' + $('script#disqus-template').text() + '</script>');
|
||||
|
||||
return this;
|
||||
},
|
||||
select: function(fromClick) {
|
||||
|
@ -144,9 +173,6 @@
|
|||
selectFromClick: function(e) {
|
||||
this.select(true);
|
||||
e.stopPropagation();
|
||||
},
|
||||
test: function() {
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
SniptListView = Backbone.View.extend({
|
||||
|
@ -164,8 +190,10 @@
|
|||
addExistingSnipt: function() {
|
||||
|
||||
var $el = $(this);
|
||||
var $created = $('li.created', $el);
|
||||
var $h1 = $('header h1 a', $el);
|
||||
var $pub = $('div.public', $el);
|
||||
var $user = $('li.author a', $el);
|
||||
var is_public = $pub.text() === 'True' ? true : false;
|
||||
var tag_lis = $('section.tags li', $el);
|
||||
var tags = [];
|
||||
|
@ -179,13 +207,15 @@
|
|||
}
|
||||
|
||||
var data = {
|
||||
absolute_url: $h1.attr('href'),
|
||||
code: $('div.raw', $el).text(),
|
||||
created: $('li.created', $el).attr('title'),
|
||||
created: $created.attr('title'),
|
||||
created_formatted: $created.text(),
|
||||
embed_url: $('div.embed-url', $el).text(),
|
||||
id: parseInt($el.attr('id').replace('snipt-', ''), 0),
|
||||
get_absolute_url: $h1.attr('href'),
|
||||
pk: parseInt($el.attr('id').replace('snipt-', ''), 0),
|
||||
key: $('div.key', $el).text(),
|
||||
lexer: $('div.lexer', $el).text(),
|
||||
lexer_name: $('div.lexer-name', $el).text(),
|
||||
line_count: parseInt($('div.line-count', $el).text(), 0),
|
||||
modified: $('div.modified', $el).text(),
|
||||
pub: is_public,
|
||||
|
@ -195,7 +225,10 @@
|
|||
tags: tags,
|
||||
tags_list: $('div.tags-list', $el).text(),
|
||||
title: $h1.text(),
|
||||
user: $('div.user', $el).text()
|
||||
user: {
|
||||
get_absolute_url: $user.attr('href'),
|
||||
username: $user.text()
|
||||
}
|
||||
};
|
||||
|
||||
var view = new SniptView({
|
||||
|
@ -208,11 +241,6 @@
|
|||
$selected = window.selected;
|
||||
$document = $(document);
|
||||
|
||||
$document.bind('keydown', 'Shift+t', function() {
|
||||
if ($selected) {
|
||||
$selected.trigger('test');
|
||||
}
|
||||
});
|
||||
$document.bind('keydown', 'j', function() {
|
||||
if (!$selected) {
|
||||
SniptList.$snipts.eq(0).trigger('selectSnipt');
|
||||
|
|
|
@ -3,6 +3,11 @@
|
|||
{% block page-title %}/ {{ snipt.title }} / {{ user.username }} - {{ block.super }}{% endblock %}
|
||||
{% block body-class %}detail{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ block.super }}
|
||||
window.detail = true;
|
||||
{% endblock %}
|
||||
|
||||
{% block breadcrumb %}
|
||||
<li><a href="/{{ user.username }}/">{{ user.username }}</a></li>
|
||||
<li>/ <a href="{{ snipt.get_absolute_url }}">{{ snipt.title }}</a></li>
|
||||
|
|
|
@ -4,6 +4,11 @@
|
|||
|
||||
{% block page-title %}/ {% if public %}public{% else %}{{ user.username }}{% endif %}{% if tag %} / {{ tag }}{% endif %} - {{ block.super }}{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ block.super }}
|
||||
window.detail = false;
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="snipts" id="snipts">
|
||||
{% autopaginate snipts 20 %}
|
||||
|
@ -12,7 +17,20 @@
|
|||
{% endfor %}
|
||||
{% paginate %}
|
||||
</section>
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript" id="disqus">
|
||||
var disqus_shortname = 'snipt-net';
|
||||
{% if debug %}
|
||||
var disqus_developer = 1;
|
||||
{% endif %}
|
||||
|
||||
(function () {
|
||||
var s = document.createElement('script'); s.async = true;
|
||||
s.type = 'text/javascript';
|
||||
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
|
||||
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
|
||||
}());
|
||||
</script>
|
||||
<script type="text/html" id="disqus-template">
|
||||
var disqus_shortname = 'snipt-net';
|
||||
{% if debug %}
|
||||
var disqus_developer = 1;
|
||||
|
|
|
@ -79,6 +79,7 @@
|
|||
<div class="hide embed-url">{{ snipt.get_embed_url }}</div>
|
||||
<div class="hide key">{{ snipt.key }}</div>
|
||||
<div class="hide lexer">{{ snipt.lexer }}</div>
|
||||
<div class="hide lexer-name">{{ snipt.lexer_name }}</div>
|
||||
<div class="hide line-count">{{ snipt.line_count }}</div>
|
||||
<div class="hide modified">{{ snipt.modified|date:"Y-m-d\TH:i:s" }}</div>
|
||||
<div class="hide public">{{ snipt.public }}</div>
|
||||
|
@ -90,5 +91,4 @@
|
|||
<div class="hide slug">{{ snipt.slug }}</div>
|
||||
<div class="hide stylized">{{ snipt.stylized }}</div>
|
||||
<div class="hide tags-list">{{ snipt.tags_list }}</div>
|
||||
<div class="hide user">{{ snipt.user.username }}</div>
|
||||
</article>
|
||||
|
|
|
@ -27,7 +27,9 @@
|
|||
{% else %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}cache/snipt.css" />
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}cache/snipt.js"></script>
|
||||
{% endif %}{% block js %}{% endblock %}
|
||||
{% endif %}<script type="text/javascript">{% block js %}window.user = '{{ request.user.username }}';
|
||||
window.pub = {{ public|lower }};{% endblock %} </script>
|
||||
|
||||
<!--[if IE]>
|
||||
<style type="text/css">
|
||||
.group {
|
||||
|
@ -232,27 +234,83 @@
|
|||
{% if snipts or snipt %}
|
||||
{% verbatim %}
|
||||
<div class="hidden" id="templates">
|
||||
<div id="snipt">
|
||||
<div class="number">#0</div>
|
||||
<script id="snipt" type="text/html">
|
||||
<div class="number">#<%= snipt.pk %></div>
|
||||
<div class="group">
|
||||
<div class="container">
|
||||
<header>
|
||||
<h2></h2>
|
||||
<h1><a href="{{absolute_url}}">{{title}}</a></h1>
|
||||
<h2><%= snipt.lexer_name %></h2>
|
||||
<h1><a href="<%= snipt.get_absolute_url %>"><%= snipt.title %></a></h1>
|
||||
</header>
|
||||
<section class="code autumn">
|
||||
<%= snipt.stylized %>
|
||||
<% if (snipt.line_count > 8 && !window.detail) { %>
|
||||
<a href="#" class="expand">
|
||||
<span class="expand">Expand</span>
|
||||
<span class="collapse">Collapse</span>
|
||||
<span class="lines">(<%= snipt.line_count %> lines)</span>
|
||||
</a>
|
||||
<% } %>
|
||||
<div class="raw"><%= snipt.code %></div>
|
||||
</section>
|
||||
<div class="ruler top-x"></div>
|
||||
<div class="ruler bottom-x"></div>
|
||||
</div>
|
||||
<aside>
|
||||
<ul class="options">
|
||||
<% if (snipt.user.username === window.user) { %>
|
||||
<li>
|
||||
<a class="edit" href="#">Edit</a>
|
||||
</li>
|
||||
<% } %>
|
||||
<li>
|
||||
<a class="embed" href="#">Embed</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="copy" href="#"><span class="do">Copy</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<section class="tags">
|
||||
<h2><%= snipt.tags.length %> tag<% if ((snipt.tags.length > 1) || (snipt.tags.length === 0)) { print('s'); } %></h2>
|
||||
<ul>
|
||||
<% for (var i=0; i < snipt.tags.length; i++) { %>
|
||||
<li <% if (i > 2 && !window.detail) { %>class="hidden"<% } %>>
|
||||
<a href="<%= snipt.tags[i].absolute_url %>"><%= snipt.tags[i].name %></a>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
<div id="edit">
|
||||
<footer>
|
||||
<ul class="attrs">
|
||||
<li class="author"><a href="<%= snipt.user.get_absolute_url %>"><%= snipt.user.username %></a></li>
|
||||
<li class="created" title="<%= snipt.created %>"><%= snipt.created_formatted %></li>
|
||||
<li class="comments"><a href="<%= snipt.get_absolute_url %>#disqus_thread" data-disqus-identifier="<%= snipt.pk %>"></a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
<div class="modal hide copy-modal">
|
||||
<div class="modal-header">
|
||||
<a href="#" class="close">×</a>
|
||||
<h3>Copy snipt <span>“<%= snipt.title %>”</span></h3>
|
||||
<h4>(Text is selected. <span></span>+c to copy.)</h4>
|
||||
</div>
|
||||
<div class="modal-body"></div>
|
||||
</div>
|
||||
<div class="modal hide embed-modal">
|
||||
<div class="modal-header">
|
||||
<a href="#" class="close">×</a>
|
||||
<h3>Embed snipt <span>“<%= snipt.title %>”</span></h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<textarea><script type="text/javascript"><%= snipt.get_embed_url %></script></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="edit" type="text/html">
|
||||
<div class="inner">
|
||||
{{absolute_url}}<br />
|
||||
{{title}}
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
{% endverbatim %}
|
||||
{% endif %}
|
||||
|
|
Loading…
Reference in New Issue