impress/app/assets/javascripts/closet_hangers/index.js

734 lines
21 KiB
JavaScript
Raw Normal View History

(function () {
2011-07-30 10:40:41 -07:00
var hangersInitCallbacks = [];
function onHangersInit(callback) {
hangersInitCallbacks[hangersInitCallbacks.length] = callback;
}
function hangersInit() {
for(var i = 0; i < hangersInitCallbacks.length; i++) {
hangersInitCallbacks[i]();
}
}
/*
Hanger groups
*/
var hangerGroups = [];
$('div.closet-hangers-group').each(function () {
var el = $(this);
var lists = [];
el.find('div.closet-list').each(function () {
var el = $(this);
var id = el.attr('data-id');
if(id) {
lists[lists.length] = {
id: parseInt(id, 10),
label: el.find('h4').text()
}
}
});
hangerGroups[hangerGroups.length] = {
label: el.find('h3').text(),
lists: lists,
owned: (el.attr('data-owned') == 'true')
};
});
$('div.closet-hangers-group span.toggle').live('click', function () {
$(this).closest('.closet-hangers-group').toggleClass('hidden');
});
var hangersElQuery = '#closet-hangers';
var hangersEl = $(hangersElQuery);
/*
Compare with Your Items
*/
$('#toggle-compare').click(function () {
hangersEl.toggleClass('comparing');
});
/*
Hanger forms
*/
var body = $(document.body).addClass("js");
if(!body.hasClass("current-user")) return false;
// When we get hangers HTML, add the controls. We do this in JS rather than
// in the HTML for caching, since otherwise the requests can take forever.
// If there were another way to add hangers, then we'd have to worry about
// that, but, right now, the only way to create a new hanger from this page
// is through the autocompleter, which reinitializes anyway. Geez, this thing
// is begging for a rewrite, but today we're here for performance.
$("#closet-hanger-update-tmpl").template("updateFormTmpl");
2013-06-22 15:45:59 -07:00
$("#closet-hanger-destroy-tmpl").template("destroyFormTmpl");
onHangersInit(function () {
// Super-lame hack to get the user ID from where it already is :/
var currentUserId = itemsSearchForm.data("current-user-id");
$("#closet-hangers div.closet-hangers-group").each(function () {
var groupEl = $(this);
var owned = groupEl.data("owned");
2013-06-22 15:45:59 -07:00
groupEl.find("div.closet-list").each(function () {
var listEl = $(this);
var listId = listEl.data("id");
2013-06-22 15:45:59 -07:00
listEl.find("div.object").each(function () {
var hangerEl = $(this);
var hangerId = hangerEl.data("id");
var quantityEl = hangerEl.find("div.quantity");
var quantity = hangerEl.data("quantity");
// Ooh, this part is weird. We only want the name to be linked, so
// lift everything else out.
2015-09-26 14:22:11 -07:00
var checkboxId = 'hanger-selected-' + hangerId;
var label = $('<label />', {'for': checkboxId});
var link = hangerEl.children('a');
link.children(':not(.name)').detach().appendTo(label);
link.detach().appendTo(label);
2015-09-26 14:22:11 -07:00
var checkbox = $('<input />', {
type: 'checkbox',
id: checkboxId
}).appendTo(hangerEl);
label.appendTo(hangerEl);
2015-09-26 14:22:11 -07:00
// I don't usually like to _blank things, but it's too easy to click
// the text when you didn't mean to and lose your selection work.
link.attr('target', '_blank');
$.tmpl("updateFormTmpl", {
2013-06-22 15:45:59 -07:00
user_id: currentUserId,
closet_hanger_id: hangerId,
quantity: quantity,
list_id: listId,
2013-06-22 15:45:59 -07:00
owned: owned
}).appendTo(quantityEl);
$.tmpl("destroyFormTmpl", {
user_id: currentUserId,
closet_hanger_id: hangerId
2013-06-22 15:45:59 -07:00
}).appendTo(hangerEl);
});
});
});
});
2011-07-30 10:40:41 -07:00
$.fn.liveDraggable = function (opts) {
this.live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).draggable(opts);
}
});
};
$.fn.disableForms = function () {
return this.data("formsDisabled", true).find("input").attr("disabled", "disabled").end();
}
$.fn.enableForms = function () {
return this.data("formsDisabled", false).find("input").removeAttr("disabled").end();
}
$.fn.hasChanged = function () {
2011-07-30 10:40:41 -07:00
return this.attr('data-previous-value') != this.val();
}
$.fn.revertValue = function () {
return this.each(function () {
var el = $(this);
2011-07-30 10:40:41 -07:00
el.val(el.attr('data-previous-value'));
});
}
$.fn.storeValue = function () {
return this.each(function () {
var el = $(this);
2011-07-30 10:40:41 -07:00
el.attr('data-previous-value', el.val());
});
}
2011-07-30 10:40:41 -07:00
$.fn.insertIntoSortedList = function (list, compare) {
var newChild = this, inserted = false;
list.children().each(function () {
if(compare(newChild, $(this)) < 1) {
newChild.insertBefore(this);
inserted = true;
return false;
}
});
if(!inserted) newChild.appendTo(list);
return this;
}
2011-07-22 11:02:04 -07:00
function handleSaveError(xhr, action) {
try {
var data = $.parseJSON(xhr.responseText);
} catch(e) {
var data = {};
}
if(typeof data.errors != 'undefined') {
$.jGrowl("Error " + action + ": " + data.errors.join(", "));
} else {
$.jGrowl("We had trouble " + action + " just now. Try again?");
}
}
function objectRemoved(objectWrapper) {
objectWrapper.hide(250, function() {
objectWrapper.remove();
updateBulkActions();
});
}
2011-07-30 10:40:41 -07:00
function compareItemsByName(a, b) {
return a.find('span.name').text().localeCompare(b.find('span.name').text());
}
function findList(owned, id, item) {
if(id) {
return $('#closet-list-' + id);
2011-07-30 10:40:41 -07:00
} else {
return $("div.closet-hangers-group[data-owned=" + owned + "] div.closet-list.unlisted");
2011-07-30 10:40:41 -07:00
}
}
function updateListHangersCount(el) {
el.attr('data-hangers-count', el.find('div.object').length);
}
function moveItemToList(item, owned, listId) {
var newList = findList(owned, listId, item);
var oldList = item.closest('div.closet-list');
var hangersWrapper = newList.find('div.closet-list-hangers');
2011-07-30 10:40:41 -07:00
item.insertIntoSortedList(hangersWrapper, compareItemsByName);
updateListHangersCount(oldList);
updateListHangersCount(newList);
2011-07-30 10:40:41 -07:00
}
function submitUpdateForm(form) {
if(form.data('loading')) return false;
2011-07-30 10:40:41 -07:00
var quantityEl = form.children("input[name=closet_hanger\[quantity\]]");
var ownedEl = form.children("input[name=closet_hanger\[owned\]]");
2011-07-30 10:40:41 -07:00
var listEl = form.children("input[name=closet_hanger\[list_id\]]");
var listChanged = ownedEl.hasChanged() || listEl.hasChanged();
2011-07-30 10:40:41 -07:00
if(listChanged || quantityEl.hasChanged()) {
var objectWrapper = form.closest(".object").addClass("loading");
2011-07-30 10:40:41 -07:00
var newQuantity = quantityEl.val();
var quantitySpan = objectWrapper.find(".quantity span").text(newQuantity);
objectWrapper.attr('data-quantity', newQuantity);
var data = form.serialize(); // get data before disabling inputs
objectWrapper.disableForms();
form.data('loading', true);
if(listChanged) moveItemToList(objectWrapper, ownedEl.val(), listEl.val());
$.ajax({
url: form.attr("action") + ".json",
type: "post",
data: data,
dataType: "json",
complete: function (data) {
2011-07-30 10:40:41 -07:00
if(quantityEl.val() == 0) {
objectRemoved(objectWrapper);
} else {
objectWrapper.removeClass("loading").enableForms();
}
form.data('loading', false);
},
success: function () {
// Now that the move was successful, let's merge it with any
// conflicting hangers
var id = objectWrapper.attr("data-item-id");
var conflictingHanger = findList(ownedEl.val(), listEl.val(), objectWrapper).
find("div[data-item-id=" + id + "]").not(objectWrapper);
if(conflictingHanger.length) {
var conflictingQuantity = parseInt(
conflictingHanger.attr('data-quantity'),
10
);
var currentQuantity = parseInt(newQuantity, 10);
var mergedQuantity = conflictingQuantity + currentQuantity;
quantitySpan.text(mergedQuantity);
quantityEl.val(mergedQuantity);
objectWrapper.attr('data-quantity', mergedQuantity);
conflictingHanger.remove();
}
2011-07-30 10:40:41 -07:00
quantityEl.storeValue();
ownedEl.storeValue();
2011-07-30 10:40:41 -07:00
listEl.storeValue();
updateBulkActions();
},
error: function (xhr) {
2011-07-30 10:40:41 -07:00
quantityEl.revertValue();
ownedEl.revertValue();
2011-07-30 10:40:41 -07:00
listEl.revertValue();
if(listChanged) moveItemToList(objectWrapper, ownedEl.val(), listEl.val());
2011-07-30 10:40:41 -07:00
quantitySpan.text(quantityEl.val());
2011-07-22 11:02:04 -07:00
handleSaveError(xhr, "updating the quantity");
}
});
}
}
$(hangersElQuery + ' form.closet-hanger-update').live('submit', function (e) {
e.preventDefault();
submitUpdateForm($(this));
});
function editableInputs() {
return $(hangersElQuery).find(
'input[name=closet_hanger\[quantity\]], ' +
'input[name=closet_hanger\[owned\]], ' +
'input[name=closet_hanger\[list_id\]]'
)
}
2011-07-30 10:40:41 -07:00
$(hangersElQuery + 'input[name=closet_hanger\[quantity\]]').live('change', function () {
submitUpdateForm($(this).parent());
}).storeValue();
2011-07-30 10:40:41 -07:00
onHangersInit(function () {
editableInputs().storeValue();
});
$(hangersElQuery + ' div.object').live('mouseleave', function () {
submitUpdateForm($(this).find('form.closet-hanger-update'));
2011-07-30 10:40:41 -07:00
}).liveDraggable({
appendTo: '#closet-hangers',
distance: 20,
helper: "clone",
revert: "invalid"
});
$(hangersElQuery + " form.closet-hanger-destroy").live("submit", function (e) {
e.preventDefault();
var form = $(this);
2011-07-22 14:55:05 -07:00
var button = form.children("input[type=submit]").val("Removing…");
var objectWrapper = form.closest(".object").addClass("loading");
var data = form.serialize(); // get data before disabling inputs
objectWrapper.addClass("loading").disableForms();
$.ajax({
url: form.attr("action") + ".json",
type: "post",
data: data,
dataType: "json",
complete: function () {
button.val("Remove");
},
success: function () {
objectRemoved(objectWrapper);
},
error: function () {
objectWrapper.removeClass("loading").enableForms();
$.jGrowl("Error removing item. Try again?");
}
});
});
2015-09-26 14:22:11 -07:00
$(hangersElQuery + " .select-all").live("click", function(e) {
var checkboxes = $(this).closest(".closet-list").find(".object input[type=checkbox]");
var allChecked = true;
checkboxes.each(function() {
if (!this.checked) {
allChecked = false;
return false;
}
});
checkboxes.attr('checked', !allChecked);
updateBulkActions(); // setting the checked prop doesn't fire change events
2015-09-26 14:22:11 -07:00
});
function getCheckboxes() {
return $(hangersElQuery + " input[type=checkbox]");
}
function getCheckedIds() {
var checkedIds = [];
getCheckboxes().filter(':checked').each(function() {
if (this.checked) checkedIds.push(this.id);
});
return checkedIds;
}
getCheckboxes().live("change", updateBulkActions);
function updateBulkActions() {
var checkedCount = getCheckboxes().filter(':checked').length;
$('.bulk-actions').attr('data-target-count', checkedCount);
$('.bulk-actions-target-count').text(checkedCount);
}
$(".bulk-actions-move-all").bind("submit", function(e) {
// TODO: DRY
e.preventDefault();
var form = $(this);
var data = form.serializeArray();
data.push({name: "return_to", value: window.location.pathname + window.location.search});
var checkedBoxes = getCheckboxes().filter(':checked');
checkedBoxes.each(function() {
data.push({name: "ids[]", value: $(this).closest('.object').attr('data-id')});
});
$.ajax({
url: form.attr("action"),
type: form.attr("method"),
data: data,
success: function (html) {
var doc = $(html);
2015-09-26 19:58:31 -07:00
hangersEl.html( doc.find('#closet-hangers').html() );
hangersInit();
updateBulkActions(); // don't want to maintain checked; deselect em all
doc.find('.flash').hide().insertBefore(hangersEl).show(500).delay(5000).hide(250);
itemsSearchField.val("");
},
error: function (xhr) {
handleSaveError(xhr, "moving these items");
}
});
});
$(".bulk-actions-remove-all").bind("submit", function(e) {
e.preventDefault();
var form = $(this);
var hangerIds = [];
var checkedBoxes = getCheckboxes().filter(':checked');
var hangerEls = $();
checkedBoxes.each(function() {
hangerEls = hangerEls.add($(this).closest('.object'));
});
hangerEls.each(function() {
hangerIds.push($(this).attr('data-id'));
});
$.ajax({
url: form.attr("action") + ".json?" + $.param({ids: hangerIds}),
type: "delete",
dataType: "json",
success: function () {
objectRemoved(hangerEls);
},
error: function () {
$.jGrowl("Error removing items. Try again?");
}
});
});
2015-09-26 19:58:31 -07:00
$(".bulk-actions-deselect-all").bind("click", function(e) {
getCheckboxes().filter(':checked').attr('checked', false);
updateBulkActions();
});
2015-09-26 20:09:13 -07:00
// hahaha, nasty hacks to make stickUp use our old jQuery
$.fn.on = $.fn.bind;
$(function() {
$('.bulk-actions').stickUp();
});
function maintainCheckboxes(fn) {
var checkedIds = getCheckedIds();
fn();
checkedIds.forEach(function(id) {
document.getElementById(id).checked = true;
});
updateBulkActions();
}
/*
Search, autocomplete
*/
$('input, textarea').placeholder();
var itemsSearchForm = $("#closet-hangers-items-search[data-current-user-id]");
var itemsSearchField = itemsSearchForm.children("input[name=q]");
itemsSearchField.autocomplete({
select: function (e, ui) {
if(ui.item.is_item) {
// Let the autocompleter finish up this search before starting a new one
setTimeout(function () {
itemsSearchField.autocomplete("search", ui.item);
}, 0);
} else {
var item = ui.item.item;
var group = ui.item.group;
itemsSearchField.addClass("loading");
var closetHanger = {
2011-07-29 08:25:17 -07:00
owned: group.owned,
list_id: ui.item.list ? ui.item.list.id : ''
};
if(!item.hasHanger) closetHanger.quantity = 1;
$.ajax({
url: "/user/" + itemsSearchForm.data("current-user-id") + "/items/" + item.id + "/closet_hangers",
type: "post",
data: {closet_hanger: closetHanger, return_to: window.location.pathname + window.location.search},
complete: function () {
itemsSearchField.removeClass("loading");
},
success: function (html) {
var doc = $(html);
maintainCheckboxes(function() {
hangersEl.html( doc.find('#closet-hangers').html() );
hangersInit();
});
doc.find('.flash').hide().insertBefore(hangersEl).show(500).delay(5000).hide(250);
itemsSearchField.val("");
},
error: function (xhr) {
handleSaveError(xhr, "adding the item");
}
});
}
},
source: function (input, callback) {
if(typeof input.term == 'string') { // user-typed query
$.getJSON("/items.json?q=" + input.term, function (data) {
var output = [];
var items = data.items;
for(var i in items) {
items[i].label = items[i].name;
items[i].is_item = true;
output[output.length] = items[i];
}
callback(output);
});
} else { // item was chosen, now choose a group to insert
2011-07-29 08:25:17 -07:00
var groupInserts = [], group;
var item = input.term, itemEl, occupiedGroups, hasHanger;
for(var i in hangerGroups) {
2011-07-29 08:25:17 -07:00
group = hangerGroups[i];
itemEl = $('div.closet-hangers-group[data-owned=' + group.owned + '] div.object[data-item-id=' + item.id + ']');
occupiedGroups = itemEl.closest('.closet-list');
hasHanger = occupiedGroups.filter('.unlisted').length > 0;
2011-07-29 08:25:17 -07:00
groupInserts[groupInserts.length] = {
2011-07-29 08:25:17 -07:00
group: group,
item: item,
label: item.label,
hasHanger: hasHanger
}
2011-07-29 08:25:17 -07:00
for(var i = 0; i < group.lists.length; i++) {
hasHanger = occupiedGroups.
filter("[data-id=" + group.lists[i].id + "]").length > 0;
2011-07-29 08:25:17 -07:00
groupInserts[groupInserts.length] = {
group: group,
item: item,
label: item.label,
list: group.lists[i],
hasHanger: hasHanger
2011-07-29 08:25:17 -07:00
}
}
}
callback(groupInserts);
}
}
});
var autocompleter = itemsSearchField.data("autocomplete");
autocompleter._renderItem = function( ul, item ) {
var li = $("<li></li>").data("item.autocomplete", item);
if(item.is_item) { // these are items from the server
$('#autocomplete-item-tmpl').tmpl({item_name: item.label}).appendTo(li);
2011-07-29 08:25:17 -07:00
} else if(item.list) { // these are list inserts
var listName = item.list.label;
if(item.hasHanger) {
$('#autocomplete-already-in-collection-tmpl').
tmpl({collection_name: listName}).appendTo(li);
} else {
$('#autocomplete-add-to-list-tmpl').tmpl({list_name: listName}).
appendTo(li);
}
li.addClass("closet-list-autocomplete-item");
} else { // these are group inserts
var groupName = item.group.label;
if(!item.hasHanger) {
$('#autocomplete-add-to-group-tmpl').
tmpl({group_name: groupName.replace(/\s+$/, '')}).appendTo(li);
} else {
$('#autocomplete-already-in-collection-tmpl').
tmpl({collection_name: groupName}).appendTo(li);
}
li.addClass('closet-hangers-group-autocomplete-item');
}
return li.appendTo(ul);
}
/*
Contact Neopets username form
*/
var contactEl = $('#closet-hangers-contact');
var contactForm = contactEl.children('form');
var contactField = contactForm.children('select');
var contactAddOption = $('<option/>',
{text: contactField.attr('data-new-text'), value: -1});
contactAddOption.appendTo(contactField);
var currentUserId = $('meta[name=current-user-id]').attr('content');
function submitContactForm() {
var data = contactForm.serialize();
contactForm.disableForms();
$.ajax({
url: contactForm.attr('action') + '.json',
type: 'post',
data: data,
dataType: 'json',
complete: function () {
contactForm.enableForms();
2011-07-22 11:02:04 -07:00
},
error: function (xhr) {
handleSaveError(xhr, 'saving Neopets username');
}
});
}
contactField.change(function(e) {
if (contactField.val() < 0) {
var newUsername = $.trim(prompt(contactField.attr('data-new-prompt'), ''));
if (newUsername) {
$.ajax({
url: '/user/' + currentUserId + '/neopets-connections',
type: 'POST',
data: {neopets_connection: {neopets_username: newUsername}},
dataType: 'json',
success: function(connection) {
var newOption = $('<option/>', {text: newUsername,
value: connection.id})
newOption.insertBefore(contactAddOption);
contactField.val(connection.id);
submitContactForm();
}
});
}
} else {
submitContactForm();
}
});
2011-07-29 07:52:04 -07:00
/*
2011-07-29 07:52:04 -07:00
Hanger list controls
2011-07-29 07:52:04 -07:00
*/
2011-07-29 07:52:04 -07:00
$('input[type=submit][data-confirm]').live('click', function (e) {
2011-07-29 07:52:04 -07:00
if(!confirm(this.getAttribute('data-confirm'))) e.preventDefault();
});
2011-07-30 10:40:41 -07:00
/*
2011-07-30 10:40:41 -07:00
Closet list droppable
2011-07-30 10:40:41 -07:00
*/
onHangersInit(function () {
$('div.closet-list').droppable({
accept: 'div.object',
activate: function () {
$(this).find('.closet-list-content').animate({opacity: 0, height: 100}, 250);
},
activeClass: 'droppable-active',
deactivate: function () {
$(this).find('.closet-list-content').css('height', 'auto').animate({opacity: 1}, 250);
},
drop: function (e, ui) {
var form = ui.draggable.find('form.closet-hanger-update');
form.find('input[name=closet_hanger\[list_id\]]').
val(this.getAttribute('data-id'));
form.find('input[name=closet_hanger\[owned\]]').
val($(this).closest('.closet-hangers-group').attr('data-owned'));
submitUpdateForm(form);
}
2011-07-30 10:40:41 -07:00
});
});
/*
Visibility Descriptions
*/
function updateVisibilityDescription() {
var descriptions = $(this).closest('.visibility-form').
find('ul.visibility-descriptions');
descriptions.children('li.current').removeClass('current');
descriptions.children('li[data-id=' + $(this).val() + ']').addClass('current');
}
function visibilitySelects() { return $('form.visibility-form select') }
visibilitySelects().live('change', updateVisibilityDescription);
onHangersInit(function () {
visibilitySelects().each(updateVisibilityDescription);
});
/*
Help
*/
$('#toggle-help').click(function () {
$('#closet-hangers-help').toggleClass('hidden');
});
2011-07-31 16:24:06 -07:00
/*
Share URL
*/
$('#closet-hangers-share-box').mouseover(function () {
$(this).focus();
}).mouseout(function () {
$(this).blur();
});
/*
2011-07-30 10:40:41 -07:00
Initialize
2011-07-30 10:40:41 -07:00
*/
hangersInit();
})();