Skip to content

Instantly share code, notes, and snippets.

@DeadWisdom
Last active September 2, 2015 23:21
Show Gist options
  • Save DeadWisdom/d74a01132f32b6776a1e to your computer and use it in GitHub Desktop.
Save DeadWisdom/d74a01132f32b6776a1e to your computer and use it in GitHub Desktop.
<dialog id="add_activity_dialog" data-url="">
<header>Add Activity</header>
<section class="panel">
<i aria-hidden="true" class="icon-magnifier"></i>
<input type="text" class="search" placeholder="search" autocomplete="off">
</section>
<div class="content" url="{{ discipline.url }}browser/">
<p><em>Loading activities...</em></p>
</div>
<form action="{{ url_for('critique_edit', critique.key) }}" method="post">
{{ csrf() }}
</form>
<footer class="row">
<div class="expand">
<button class="cancel act-close">Cancel</button>
<p class="helper inline">Hold down alt or command to select multiple activities.</p>
</div>
<div>
<button class="go act-go" disabled>Add Activity</button>
</div>
</footer>
</dialog>
{% assets %}
<script type="text/javascript">
function refreshAddActivityButton() {
var num = $('#add_activity_dialog .selected').not('.hidden').length;
if (num == 0) {
$('#add_activity_dialog .go').prop('disabled', true);
} else if (num == 1) {
$('#add_activity_dialog .go').prop('disabled', false).text('Add Activity');
} else {
$('#add_activity_dialog .go').prop('disabled', false).text('Add Activities');
}
}
function filterActivityChoices(val) {
val = val.toLowerCase();
$('#add_activity_dialog li').each(function() {
if (val && $(this).text().toLowerCase().search(val) < 0) {
$(this).addClass('hidden');
} else {
$(this).removeClass('hidden');
}
});
refreshAddActivityButton();
}
// When the user clicks on an 'add-activity' button show our dialog.
$(document).on('click', '.act-add-activity', function(e) {
e.preventDefault();
showModal('#add_activity_dialog');
var content = $('#add_activity_dialog .content');
content.load(content.attr('url'));
$('#add_activity_dialog .search').focus().val('');
$('#add_activity_dialog li').removeClass('hidden');
refreshAddActivityButton();
});
// When the user clicks on an activity, select it. If they have ctrl/command/alt held down
// they can select multiple.
$(document).on('click', '#add_activity_dialog li', function(e) {
e.preventDefault();
var source = $(this);
if (source.hasClass('selected')) {
if (source.closest('ul').find('.selected').length > 1) {
source.closest('ul').find('.selected').removeClass('selected');
source.addClass('selected');
} else {
source.removeClass('selected');
}
} else {
if (!e.metaKey && !e.altKey && !e.ctrlKey) {
source.closest('ul').find('.selected').removeClass('selected');
}
source.addClass('selected');
}
refreshAddActivityButton();
});
// When the user changes the search input, filter our activities.
$(document).on('keyup', '#add_activity_dialog .search', function(e) {
filterActivityChoices($(this).val().trim());
})
// When the user clicks on the search input, select all the text so they can easily replace it.
$(document).on('click', '#add_activity_dialog .search', function(e) {
$(this).range(0);
})
// When the user presses the go button, submit the form.
$(document).on('click', '#add_activity_dialog .act-go', function(e) {
e.preventDefault();
if ($(this).is(':disabled')) {
return;
}
var form = $('#add_activity_dialog form');
var selected = $('#add_activity_dialog .selected').not('.hidden');
form.find('input[name=instruction]').remove();
selected.each(function() {
var id = $(this).attr('data-id');
form.append('<input type="hidden" value="' + id + '" name="instruction">');
})
form.submit();
});
// When the user double clicks on an item, select it and press go.
$(document).on('dblclick', '#add_activity_dialog li', function(e) {
})
</script>
<style type="text/css">
#add_activity_dialog .content {
height: 300px;
}
#add_activity_dialog .panel i {
position: absolute;
left: 10px;
top: 16px;
color: #999;
font-size: 14px;
}
#add_activity_dialog .search {
outline: none;
font-size: 14px;
padding-left: 24px;
}
#add_activity_dialog ul {
margin: 0;
padding: 0;
}
ul.activities.listing li {
position: relative;
clear: both;
padding: 10px 4px;
}
#add_activity_dialog ul.activities.listing li:hover {
background-color: hsla(193, 76%, 62%, 0.31);
}
ul.activities.listing li.selected {
background-color: hsla(193, 76%, 62%, 0.7);
}
ul.activities.listing li .icon {
position: absolute;
left: 1px;
top: 14px;
color: white;
font-size: 32px;
}
ul.activities.listing li .controls {
top: 12px;
right: 10px;
display: none;
}
ul.activities.listing li:hover .controls {
display: block;
}
ul.activities.listing li:hover .controls button {
font-size: 14px;
}
ul.activities.listing img {
display: inline-block;
background-color: #aa7daa;
}
ul.activities.listing li figcaption {
display: inline-block;
vertical-align: top;
margin-left: 4px;
width: 80%;
}
ul.activities.listing li figcaption .name {
margin-top: 4px;
font-weight: bold;
font-size: 16px;
}
ul.activities.listing li figcaption p {
margin: 0;
}
</style>
{% endassets %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment