Skip to content

Commit

Permalink
Merge pull request #1 from boilerroomtv/feature/django-1.11
Browse files Browse the repository at this point in the history 
Feature/django 1.11
  • Loading branch information
Richard Nias authored Nov 1, 2017
2 parents 9230243 + 0ec5873 commit 87538c5
Show file tree
Hide file tree
Showing 2 changed files with 186 additions and 179 deletions.
361 changes: 184 additions & 177 deletions sorted_autocomplete_m2m/static/sorted-autocomplete-m2m/js/m2m.js
View file
Original file line number Diff line number Diff line change
@@ -1,187 +1,194 @@
$(function () {
$('.sortedm2m-container').find('ul').addClass('hide');
function prepareUl(ul) {
ul.addClass('sortedm2m');
var checkboxes = ul.find('input[type=checkbox]');
var id = checkboxes.first().attr('id').match(/^(.*)_\d+$/)[1];
var name = checkboxes.first().attr('name');
checkboxes.removeAttr('name');
ul.before('<input type="hidden" id="' + id + '" name="' + name + '" />');
var recalculate_value = function () {
var values = [];
ul.find(':checked').each(function () {
values.push($(this).val());
});
$('#' + id).val(values.join(','));
};
recalculate_value();
ul.on('change','input[type=checkbox]',recalculate_value);
ul.sortable({
axis: 'y',
//containment: 'parent',
update: recalculate_value
});
return ul;
}

function prepareUI_(ul, id, name) {
if ($('#' + id).length)
return;
ul.addClass('sortedm2m');
ul.before('<input type="hidden" id="' + id + '" name="' + name + '" />');
var recalculate_value = function () {
var values = [];
ul.find(':checked').each(function () {
values.push($(this).val());
});
$('#' + id).val(values.join(','));
};
recalculate_value();
ul.on('change','input[type=checkbox]',recalculate_value);
ul.sortable({
axis: 'y',
//containment: 'parent',
update: recalculate_value
});
ul.removeClass('hide');
return ul;
}

function iterateUl() {
$('ul:has(.sortedm2m)').each(function () {
prepareUl( $(this) );
$(this).removeClass('hide');
});
}

$(".add-row a").click(iterateUl);

iterateUl();

$('.sortedm2m-container .selector-filter input').each(function () {
$(this).bind('input', function() {
var search = $(this).val().toLowerCase();
var $el = $(this).closest('.selector-filter');
var $container = $el.siblings('ul').each(function() {
// walk over each child list el and do name comparisons
$(this).children().each(function() {
var curr = $(this).find('label').text().toLowerCase();
if (curr.indexOf(search) === -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inherit');
}
});
});
});
});

if (window.showAddAnotherPopup) {
var django_dismissAddAnotherPopup = window.dismissAddAnotherPopup;
window.dismissAddAnotherPopup = function (win, newId, newRepr) {
// newId and newRepr are expected to have previously been escaped by
// django.utils.html.escape.
newId = html_unescape(newId);
newRepr = html_unescape(newRepr);
var name = windowname_to_id(win.name);
var elem = $('#' + name);
var sortedm2m = elem.siblings('ul.sortedm2m');
if (sortedm2m.length == 0) {
// no sortedm2m widget, fall back to django's default
// behaviour
return django_dismissAddAnotherPopup.apply(this, arguments);
if (typeof jQuery === 'undefined') {
var jQuery = django.jQuery;
}

(function($) {
$(function () {
$('.sortedm2m-container').find('ul').addClass('hide')

function prepareUl (ul) {
ul.addClass('sortedm2m')
var checkboxes = ul.find('input[type=checkbox]')
var id = checkboxes.first().attr('id').match(/^(.*)_\d+$/)[1]
var name = checkboxes.first().attr('name')
checkboxes.removeAttr('name')
ul.before('<input type="hidden" id="' + id + '" name="' + name + '" />')
var recalculate_value = function () {
var values = []
ul.find(':checked').each(function () {
values.push($(this).val())
})
$('#' + id).val(values.join(','))
}
recalculate_value()
ul.on('change', 'input[type=checkbox]', recalculate_value)
ul.sortable({
axis: 'y',
//containment: 'parent',
update: recalculate_value
})
return ul
}

if (elem.val().length > 0) {
elem.val(elem.val() + ',');
}
elem.val(elem.val() + newId);

var id_template = '';
var maxid = 0;
sortedm2m.find('li input').each(function () {
var match = this.id.match(/^(.+)_(\d+)$/);
id_template = match[1];
id = parseInt(match[2]);
if (id > maxid) maxid = id;
});

var id = id_template + '_' + (maxid + 1);
var new_li = $('<li/>').append(
$('<label/>').attr('for', id).append(
$('<input class="sortedm2m" type="checkbox" checked="checked" />').attr('id', id).val(newId)
).append($('<span/>').text(' ' + newRepr))
);
sortedm2m.append(new_li);

win.close();
};
}

$('.sorted-autocomplete-m2m').each(function (__, main_container) {
main_container = $(main_container);
var field_name = main_container.attr('data-name');
var autocomplete_input = main_container.find('input[data-autocomplete-url]');
var autocomplete_url = autocomplete_input.attr('data-autocomplete-url');
var autocomplete_results = main_container.find('.autocomplete-results');
var autocomplete_results_container = main_container.find('.autocomplete-results-container');
var sorted_results = main_container.find('.sortedm2m-results');
var ajax_timeout;
prepareUI_(sorted_results, 'id_' + field_name, field_name);

autocomplete_input.keyup(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
// tODO: select first in list
}
var q = autocomplete_input.val();
if (!q) {
autocomplete_clear();
return;
function prepareUI_ (ul, id, name) {
if ($('#' + id).length)
return
ul.addClass('sortedm2m')
ul.before('<input type="hidden" id="' + id + '" name="' + name + '" />')
var recalculate_value = function () {
var values = []
ul.find(':checked').each(function () {
values.push($(this).val())
})
$('#' + id).val(values.join(','))
}
clearTimeout(ajax_timeout);
ajax_timeout = setTimeout(function () {
$.get(autocomplete_url, {q: q}, function (result) {
var choices = result['choices'];
if (choices) {
autocomplete_results.html('');
autocomplete_results_container.show();
for (var i = 0; i < choices.length; i++)
autocomplete_add(choices[i].id, choices[i].value);
}
});
}, 100);
});

function autocomplete_add(id, value) {
var element_id = 'id_autocomplete_' + field_name + '_' + id;
var element_html = '<li id="' + element_id + '">' + value + '</li>';
autocomplete_results.append(element_html);
var element = $('#' + element_id);
element.click(function (e) {
sorted_add(id, value);
autocomplete_clear();
autocomplete_input.val('');
recalculate_value()
ul.on('change', 'input[type=checkbox]', recalculate_value)
ul.sortable({
axis: 'y',
//containment: 'parent',
update: recalculate_value
})
ul.removeClass('hide')
return ul
}

function autocomplete_clear() {
autocomplete_results.html('');
autocomplete_results_container.hide();
function iterateUl () {
$('ul:has(.sortedm2m)').each(function () {
prepareUl($(this))
$(this).removeClass('hide')
})
}

function sorted_add(id, value) {
var element_id = 'id_sorted_' + field_name + '_' + id;
var element_html = '' +
'<li id="' + element_id + '">' +
'<label for="' + element_id + '_label">' +
'<input class="sortedm2m" id="' + element_id + '_label" ' +
' type="checkbox" value="' + id + '"> ' + value +
'</label>' +
'</li>';
sorted_results.append(element_html);
$('#' + element_id + '_label').click();
$('.add-row a').click(iterateUl)

iterateUl()

$('.sortedm2m-container .selector-filter input').each(function () {
$(this).bind('input', function () {
var search = $(this).val().toLowerCase()
var $el = $(this).closest('.selector-filter')
var $container = $el.siblings('ul').each(function () {
// walk over each child list el and do name comparisons
$(this).children().each(function () {
var curr = $(this).find('label').text().toLowerCase()
if (curr.indexOf(search) === -1) {
$(this).css('display', 'none')
} else {
$(this).css('display', 'inherit')
}
})
})
})
})

if (window.showAddAnotherPopup) {
var django_dismissAddAnotherPopup = window.dismissAddAnotherPopup
window.dismissAddAnotherPopup = function (win, newId, newRepr) {
// newId and newRepr are expected to have previously been escaped by
// django.utils.html.escape.
newId = html_unescape(newId)
newRepr = html_unescape(newRepr)
var name = windowname_to_id(win.name)
var elem = $('#' + name)
var sortedm2m = elem.siblings('ul.sortedm2m')
if (sortedm2m.length == 0) {
// no sortedm2m widget, fall back to django's default
// behaviour
return django_dismissAddAnotherPopup.apply(this, arguments)
}

if (elem.val().length > 0) {
elem.val(elem.val() + ',')
}
elem.val(elem.val() + newId)

var id_template = ''
var maxid = 0
sortedm2m.find('li input').each(function () {
var match = this.id.match(/^(.+)_(\d+)$/)
id_template = match[1]
id = parseInt(match[2])
if (id > maxid) maxid = id
})

var id = id_template + '_' + (maxid + 1)
var new_li = $('<li/>').append(
$('<label/>').attr('for', id).append(
$('<input class="sortedm2m" type="checkbox" checked="checked" />').attr('id', id).val(newId)
).append($('<span/>').text(' ' + newRepr))
)
sortedm2m.append(new_li)

win.close()
}
}
});
});

$('.sorted-autocomplete-m2m').each(function (__, main_container) {
main_container = $(main_container)
var field_name = main_container.attr('data-name')
var autocomplete_input = main_container.find('input[data-autocomplete-url]')
var autocomplete_url = autocomplete_input.attr('data-autocomplete-url')
var autocomplete_results = main_container.find('.autocomplete-results')
var autocomplete_results_container = main_container.find('.autocomplete-results-container')
var sorted_results = main_container.find('.sortedm2m-results')
var ajax_timeout
prepareUI_(sorted_results, 'id_' + field_name, field_name)

autocomplete_input.keyup(function (event) {
if (event.keyCode == 13) {
event.preventDefault()
// tODO: select first in list
}
var q = autocomplete_input.val()
if (!q) {
autocomplete_clear()
return
}
clearTimeout(ajax_timeout)
ajax_timeout = setTimeout(function () {
$.get(autocomplete_url, {q: q}, function (result) {
var choices = result['choices']
if (choices) {
autocomplete_results.html('')
autocomplete_results_container.show()
for (var i = 0; i < choices.length; i++)
autocomplete_add(choices[i].id, choices[i].value);
}
})
}, 100)
})

function autocomplete_add (id, value) {
var element_id = 'id_autocomplete_' + field_name + '_' + id
var element_html = '<li id="' + element_id + '">' + value + '</li>'
autocomplete_results.append(element_html)
var element = $('#' + element_id)
element.click(function (e) {
sorted_add(id, value)
autocomplete_clear()
autocomplete_input.val('')
})
}

function autocomplete_clear () {
autocomplete_results.html('')
autocomplete_results_container.hide()
}

function sorted_add (id, value) {
var element_id = 'id_sorted_' + field_name + '_' + id
var element_html = '' +
'<li id="' + element_id + '">' +
'<label for="' + element_id + '_label">' +
'<input class="sortedm2m" id="' + element_id + '_label" ' +
' type="checkbox" value="' + id + '"> ' + value +
'</label>' +
'</li>'
sorted_results.append(element_html)
$('#' + element_id + '_label').click()
}
})
})
})(jQuery);

4 changes: 2 additions & 2 deletions sorted_autocomplete_m2m/widgets.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@ def filter_unselected_choices(self, value):
def render(self, name, value, attrs=None, choices=()):
self.filter_unselected_choices(value)
selected, unselected = self._render(name, value, attrs, choices)
return get_template('sorted-autocomplete-m2m/m2m.html').render(Context({
return get_template('sorted-autocomplete-m2m/m2m.html').render({
'autocomplete_id': '%s_autocomplete' % attrs['id'],
'autocomplete_url': self.autocomplete_url,
'selected': selected,
'unselected': unselected,
'name': name,
}))
})

@property
def media(self):
Expand Down

0 comments on commit 87538c5

Please sign in to comment.