Copy-paste woes
Nick Sergeant
parent
1971cfce63
commit
384387548e
|
|
@ -363,6 +363,7 @@ section.main {
|
|||
|
||||
li {
|
||||
background: transparent url('/media/images/api-icon.png') center left no-repeat;
|
||||
list-style-type: none;
|
||||
margin: 6px 0 6px 0;
|
||||
padding-left: 22px;
|
||||
|
||||
|
|
@ -735,6 +736,13 @@ article.snipt {
|
|||
}
|
||||
}
|
||||
}
|
||||
div.copy-modal {
|
||||
textarea {
|
||||
height: 200px;
|
||||
margin: 0;
|
||||
width: 520px;
|
||||
}
|
||||
}
|
||||
}
|
||||
article.private-snipt {
|
||||
div.container {
|
||||
|
|
@ -763,6 +771,34 @@ div.pagination {
|
|||
}
|
||||
}
|
||||
}
|
||||
div.modal {
|
||||
.modal-header {
|
||||
.close {
|
||||
line-height: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
h3 {
|
||||
span {
|
||||
display: inline-block;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
color: #AAA;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
div#keyboard-shortcuts {
|
||||
max-height: 501px;
|
||||
|
||||
table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Pages
|
||||
body.detail {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,6 @@ var snipt = {
|
|||
jQuery(function($) {
|
||||
|
||||
var SiteView = snipt.module('site').Views.SiteView;
|
||||
var Site = new SiteView();
|
||||
window.site = new SiteView();
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
this.$el = $(this.el);
|
||||
this.$search_query = $('input#search-query', this.$el);
|
||||
this.$snipts = $('section#snipts article.snipt', this.$el);
|
||||
this.$copyModals = $('div.copy-modal', this.$snipts);
|
||||
|
||||
this.keyboardShortcuts();
|
||||
this.inFieldLabels();
|
||||
|
|
@ -45,21 +46,20 @@
|
|||
$search_query = this.$search_query;
|
||||
$document = $(document);
|
||||
|
||||
// Search
|
||||
$document.bind('keydown', '/', function(e) {
|
||||
e.preventDefault();
|
||||
$search_query.focus();
|
||||
});
|
||||
|
||||
$document.bind('keydown', 'Shift+/', function(e) {
|
||||
$el.trigger('showKeyboardShortcuts');
|
||||
});
|
||||
|
||||
// Escape
|
||||
$('input').bind('keydown', 'esc', function(e) {
|
||||
e.preventDefault();
|
||||
this.blur();
|
||||
});
|
||||
$document.bind('keydown', 'Shift+h', function(e) {
|
||||
history.go(-1);
|
||||
});
|
||||
},
|
||||
showKeyboardShortcuts: function() {
|
||||
$('#keyboard-shortcuts').modal('toggle');
|
||||
|
|
|
|||
|
|
@ -19,37 +19,68 @@
|
|||
|
||||
this.$aside = $('aside', this.$el);
|
||||
this.$container = $('div.container', this.$el);
|
||||
this.$raw = $('div.raw', this.$container);
|
||||
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.$raw = $('div.raw', this.$el);
|
||||
this.$tags = $('section.tags ul', this.$aside);
|
||||
|
||||
this.$copyModal.on('hidden', function(e) {
|
||||
$(this).parent().trigger('copyClose');
|
||||
});
|
||||
this.$copyModalClose.click(function() {
|
||||
$(this).parent().parent().modal('hide');
|
||||
return false;
|
||||
});
|
||||
},
|
||||
events: {
|
||||
'click a.copy': 'copy',
|
||||
'click a.copy': 'copyFromClick',
|
||||
'click a.embed': 'embed',
|
||||
'click a.expand': 'expand',
|
||||
'click .container': 'selectFromClick',
|
||||
'copy': 'copy',
|
||||
'copyClose': 'copyClose',
|
||||
'detail': 'detail',
|
||||
'deselect': 'deselect',
|
||||
'embed': 'embed',
|
||||
'expand': 'expand',
|
||||
'next': 'next',
|
||||
'prev': 'prev',
|
||||
'select': 'select'
|
||||
'selectSnipt': 'select'
|
||||
},
|
||||
|
||||
copy: function() {
|
||||
var cmd;
|
||||
if (navigator.platform == 'MacPPC' ||
|
||||
navigator.platform == 'MacIntel') {
|
||||
cmd = 'Cmd';
|
||||
if (!this.$copyModal.is(':visible')) {
|
||||
var cmd;
|
||||
if (navigator.platform == 'MacPPC' ||
|
||||
navigator.platform == 'MacIntel') {
|
||||
cmd = 'Cmd';
|
||||
}
|
||||
else {
|
||||
cmd = 'Ctrl';
|
||||
}
|
||||
|
||||
this.$copyModalBody.append('<textarea class="raw"></textarea>');
|
||||
$textarea = $('textarea.raw', this.$copyModalBody).val(this.$raw.text());
|
||||
|
||||
this.$copyModalType.text(cmd);
|
||||
this.$copyModal.modal('show');
|
||||
$textarea.select();
|
||||
}
|
||||
else {
|
||||
cmd = 'Ctrl';
|
||||
}
|
||||
window.prompt('Text is selected. To copy: press ' + cmd + '+C then <Enter>', this.$raw.text());
|
||||
},
|
||||
copyClose: function() {
|
||||
$('textarea', this.$copyModal).remove();
|
||||
},
|
||||
copyFromClick: function() {
|
||||
this.copy();
|
||||
return false;
|
||||
},
|
||||
deselect: function() {
|
||||
this.$el.removeClass('selected');
|
||||
window.$selected = false;
|
||||
if (!this.$copyModal.is(':visible')) {
|
||||
this.$el.removeClass('selected');
|
||||
window.$selected = false;
|
||||
}
|
||||
},
|
||||
detail: function() {
|
||||
window.location = this.model.get('url');
|
||||
|
|
@ -58,18 +89,22 @@
|
|||
this.$container.toggleClass('expanded', 100);
|
||||
this.$tags.toggleClass('expanded');
|
||||
this.select();
|
||||
return false;
|
||||
},
|
||||
embed: function() {
|
||||
alert('TODO');
|
||||
},
|
||||
next: function() {
|
||||
window.site.$copyModals.modal('hide');
|
||||
nextSnipt = this.$el.next('article.snipt');
|
||||
if (nextSnipt.length) {
|
||||
return nextSnipt.trigger('select');
|
||||
return nextSnipt.trigger('selectSnipt');
|
||||
}
|
||||
},
|
||||
prev: function() {
|
||||
window.site.$copyModals.modal('hide');
|
||||
prevSnipt = this.$el.prev('article.snipt');
|
||||
if (prevSnipt.length) {
|
||||
return prevSnipt.trigger('select');
|
||||
return prevSnipt.trigger('selectSnipt');
|
||||
}
|
||||
},
|
||||
select: function(fromClick) {
|
||||
|
|
@ -114,8 +149,23 @@
|
|||
$selected = window.selected;
|
||||
$document = $(document);
|
||||
|
||||
$document.bind('keydown', 'c', function() {
|
||||
$document.bind('keydown', 'j', function() {
|
||||
if (!$selected) {
|
||||
SniptList.$snipts.eq(0).trigger('selectSnipt');
|
||||
} else {
|
||||
$selected.trigger('next');
|
||||
}
|
||||
});
|
||||
$document.bind('keydown', 'k', function() {
|
||||
if (!$selected) {
|
||||
SniptList.$snipts.eq(0).trigger('selectSnipt');
|
||||
} else {
|
||||
$selected.trigger('prev');
|
||||
}
|
||||
});
|
||||
$document.bind('keydown', 'c', function(e) {
|
||||
if ($selected) {
|
||||
e.preventDefault();
|
||||
$selected.trigger('copy');
|
||||
}
|
||||
});
|
||||
|
|
@ -146,20 +196,6 @@
|
|||
$document.bind('keydown', 'h', function() {
|
||||
window.location = '/';
|
||||
});
|
||||
$document.bind('keydown', 'j', function() {
|
||||
if (!$selected) {
|
||||
SniptList.$snipts.eq(0).trigger('select');
|
||||
} else {
|
||||
$selected.trigger('next');
|
||||
}
|
||||
});
|
||||
$document.bind('keydown', 'k', function() {
|
||||
if (!$selected) {
|
||||
SniptList.$snipts.eq(0).trigger('select');
|
||||
} else {
|
||||
$selected.trigger('prev');
|
||||
}
|
||||
});
|
||||
$document.bind('keydown', 'n', function() {
|
||||
var $anc = $('li.next a');
|
||||
if ($anc.length) {
|
||||
|
|
@ -181,6 +217,11 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
$document.bind('keydown', 'v', function() {
|
||||
if ($selected) {
|
||||
$selected.trigger('embed');
|
||||
}
|
||||
});
|
||||
$document.bind('keydown', 'return', function() {
|
||||
if ($selected) {
|
||||
$selected.trigger('detail');
|
||||
|
|
|
|||
|
|
@ -59,4 +59,12 @@
|
|||
<li class="comments"><a href="{{ snipt.get_full_absolute_url }}#disqus_thread" data-disqus-identifier="{{ snipt.id }}"></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>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
{% else %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}cache/snipt.css" />
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}cache/snipt.js"></script>
|
||||
{% endif %}
|
||||
{% endif %}{% block js %}{% endblock %}
|
||||
<!--[if IE]>
|
||||
<style type="text/css">
|
||||
.group {
|
||||
|
|
@ -116,9 +116,6 @@
|
|||
<li class="twitter">
|
||||
<a href="https://twitter.com/#!/nicksergeant">@nicksergeant</a>
|
||||
</li>
|
||||
<li class="twitter">
|
||||
<a href="https://twitter.com/#!/nickadamssays">@nickadamssays</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
|
@ -128,15 +125,80 @@
|
|||
</section>
|
||||
<div class="modal hide" id="keyboard-shortcuts">
|
||||
<div class="modal-header">
|
||||
<a href="#" class="close js-dismiss">×</a>
|
||||
<h3>Modal header</h3>
|
||||
<a href="#" class="close">×</a>
|
||||
<h3>Keyboard shortcuts</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn primary">Save changes</a>
|
||||
<a href="#" class="btn">Close</a>
|
||||
<table class="table table-striped table-bordered table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>?</td>
|
||||
<td>Show keyboard shortcuts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>/</td>
|
||||
<td>Focus search field</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>esc</td>
|
||||
<td>Unfocus search field / deselect snipt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>g</td>
|
||||
<td>Scroll to top of page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>G</td>
|
||||
<td>Scroll to bottom of page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H</td>
|
||||
<td>Go back</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>h</td>
|
||||
<td>Go to home</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>n</td>
|
||||
<td>Next page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p</td>
|
||||
<td>Previous page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>j</td>
|
||||
<td>Next snipt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>k</td>
|
||||
<td>Previous snipt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>o / return</td>
|
||||
<td>Go to snipt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>e</td>
|
||||
<td>Expand / collapse snipt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>v</td>
|
||||
<td>Embed snipt</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>c</td>
|
||||
<td>Copy snipt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% if not debug %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue