vgquotes/Src/VideoGameQuotes.Web/media/js/vgquotes.js

350 lines
10 KiB
JavaScript

(function($, window, undefined){
$.fn.center = function() {
var fixed = this.css("position") === "fixed";
this.css("top", ($(window).height() - this.height()) / 2 + (fixed ? 0 : $(window).scrollTop()) + "px");
this.css("left", ($(window).width() - this.width()) / 2 + (fixed ? 0 : $(window).scrollLeft()) + "px");
return this;
};
$.fn.applyModelErrors = function(errorMessage, errorData) {
var $this = this;
if (errorMessage !== null) {
$this.find(".error-summary").first().text(errorMessage).show();
}
$.each(errorData, function(inputFieldName, value) {
var $input = $this.find("input[name='" + inputFieldName + "']");
if ($input.length > 1) {
$input = $("#" + inputFieldName);
}
if ($input.length === 1) {
if ($input[0].localName === "INPUT") {
$input.addClass("input-validation-error");
}
$("<span/>")
.addClass("field-validation-error")
.append($("<span/>").addClass("error-icon"))
.append($("<span/>").text(value))
.insertAfter($input);
}
});
return this;
};
$.fn.clearModelErrors = function() {
this
.find(".field-validation-error").remove().end()
.find(".input-validation-error").removeClass("input-validation-error").end()
.find(".error-summary").empty().hide();
return this;
};
$.vgquotes = function() {
var ajaxCallback = function(type, callback) {
return function(data) {
if (typeof(data) === "undefined" || typeof(data.Error) === "undefined" || data.Error !== null) {
callback.call(null, null);
return;
}
callback.call(null, data.Data.records[0]);
};
};
return {
refresh: function() { },
parseDate: function(jsonDate) { return new Date(parseInt(jsonDate.substr(6))); },
formatDate: function(date) { return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); },
parseAndFormatDate: function(jsonDate) { return $.vgquotes.formatDate($.vgquotes.parseDate(jsonDate)); },
ajaxErrorHandler: function(xhr) {
alert("An error occurred (" + xhr.status + ")");
},
preload: function(images) {
$.each(images, function() {
$('<img/>')[0].src = this;
});
},
loadingGif: "/media/images/loading.gif",
getResourceById: function(type, id, callback) {
id = id.toString();
$.ajax("/api/" + type + "/" + id, {
type: "GET",
success: ajaxCallback(type, callback),
error: ajaxCallback(type, callback)
});
},
createDialog: function($dialog) {
$("body")
.append($("<div/>").attr("id", "modal-background"))
.append($dialog);
$dialog.center();
},
closeDialog: function($dialog) {
$("#modal-background").remove();
$dialog.remove();
}
};
}();
(function(){
var refreshCookie = "vgquotes.refreshFragment";
var refresh = function() {
var url = window.location.href;
var fragmentPosition = url.lastIndexOf("#");
if (fragmentPosition >= 0) {
if (fragmentPosition !== url.length - 1) {
$.cookie(refreshCookie, url.substring(fragmentPosition + 1)); //store the fragment in a cookie
}
url = url.substring(0, fragmentPosition);
}
window.location.href = url;
};
var applyFragmentFromCookie = function() {
var fragment = $.cookie(refreshCookie);
if (fragment !== null) {
window.location.href += "#" + fragment;
$.cookie(refreshCookie, null); //delete cookie
}
};
$(document).ready(applyFragmentFromCookie);
$.vgquotes.refresh = refresh;
}());
var setupSearch = function() {
var submitSearch = function() {
var searchQuery = $.trim($("#search-query").val());
if (searchQuery.length > 0) {
window.location = "/search/" + searchQuery;
}
return false;
};
$(document).ready(function() {
$("#search-query").keypress(function(e) {
if (e.which === 13) {
submitSearch();
}
});
$("#search-submit").click(submitSearch);
});
};
var setupVoting = function() {
var voting = false;
$(".vote-for, .vote-against").live("click", function() {
if (voting) {
alert("Please wait for the current vote to process before voting again");
return false;
}
voting = true;
var $votingLink = $(this);
var $container = $votingLink.parents(".quote-container");
var direction = $votingLink.hasClass("vote-for") ? 1 : 0;
var quoteId = $container.find("input.quote-id").val();
var $score = $container.find(".quote-score");
var score = $score.text();
$.ajax("/vote", {
type: "POST",
data: { QuoteId: quoteId, Direction: direction },
beforeSend: function() {
$score.empty().append($("<img/>").attr({ src: $.vgquotes.loadingGif, title: "submitting your vote" + String.fromCharCode(0x2026) }));
},
success: function(data, status, $xhr) {
if (data.Error !== null) {
window.alert(data.Error);
return;
}
score = data.Data.score;
$score.attr("title", "+" + data.Data.upVotes + ", -" + data.Data.downVotes);
//remove the voting arrow, and add the other one if needed
$votingLink.remove();
if (direction === 1) {
if ($container.find(".vote-against").length === 0) {
$("<span/>")
.addClass("vote-against")
.attr("title", "I hate this quote")
.text(String.fromCharCode(0x25BC))
.appendTo($container.find(".vote-container:last"));
}
} else {
if ($container.find(".vote-for").length === 0) {
$("<span/>")
.addClass("vote-for")
.attr("title", "I like this quote")
.text(String.fromCharCode(0x25B2))
.appendTo($container.find(".vote-container:first"));
}
}
},
complete: function() {
voting = false;
var $img = $score.find("img");
if ($img.length) {
$img.remove();
}
$score.text(score);
}
});
return false;
});
};
var setupFlagLink = function() {
$("a.quote-flag-icon").click(function() {
if ($(".flag-dialog").length > 0) {
return false;
}
var $container = $(this).parents(".quote-container");
var quoteId = $container.find("input.quote-id").val();
var $row = $("<tr/>");
var flagTypes = [ [1, "Inaccurate"], [2, "Duplicate"], [3, "Spam"], [4, "Fake"], [0, "Other"] ];
for (var i = 0; i < flagTypes.length; i++) {
var html = "<td><input type=\"radio\" name=\"flagType\" value=\""
+ flagTypes[i][0] + "\" id=\"flag-type-" +flagTypes[i][0] + "\"/>"
+ "<label for=\"flag-type-" + flagTypes[i][0] + "\">" + flagTypes[i][1] + "</label></td>";
$row.append($(html));
}
var $dialog = $("<div/>").addClass("dialog flag-dialog");
var $submit = $("<a/>")
.attr({ href: "#", title: "submit" })
.addClass("button-link")
.append($("<span/>").addClass("submit-icon"))
.append($("<span/>").text("Submit"))
.click(function() {
var $icon = $(this).find(".submit-icon");
$icon.toggleClass("submit-icon loading-icon");
$.ajax("/flag", {
type: "POST",
data: { QuoteId: quoteId, Comment: $dialog.find("textarea").val(), FlagType: $dialog.find("input[name='flagType']:checked").val() },
success: function(data, status, $xhr) {
if (data.Error !== null) {
alert(data.Error);
return;
}
$.vgquotes.closeDialog($dialog);
},
complete: function() { $icon.toggleClass("submit-icon loading-icon"); }
});
return false;
});
var $cancel = $("<a/>")
.attr({ href: "#", title: "cancel" })
.addClass("button-link")
.append($("<span/>").addClass("cancel-icon"))
.append($("<span/>").text("Cancel"))
.click(function() { $.vgquotes.closeDialog($dialog); return false; });
$dialog
.append($("<p/>").addClass("label").text("Flag as:"))
.append($("<table/>").append($row))
.append($("<p/>").addClass("label").text("Comment"))
.append($("<textarea/>"))
.append($("<div/>").addClass("submit-container").append($submit).append($cancel));
//"other" should be checked by default
$dialog.find("#flag-type-0").attr("checked", "checked");
$.vgquotes.createDialog($dialog);
return false;
});
};
var setupLogin = function() {
var showLoginForm = function() {
var $dialog = $("#login-dialog");
if ($dialog.length > 0) {
$.vgquotes.closeDialog($dialog);
return false;
}
var $usernameInput = $("<input/>").attr({ type: "text", id: "login-username" });
var $passwordInput = $("<input/>").attr({ type: "password", id: "login-password" });
var $submit = $("<input/>").attr("type", "submit").css("display", "none");
var $form = $("<form/>").attr({ method: "post", action: "/login" }).submit(function() {
$.ajax("/login", {
type: "POST",
data: { username: $usernameInput.val(), password: $passwordInput.val() },
success: function(data, status, $xhr) {
if (data.Error !== null) {
alert(data.Error);
return;
}
$.vgquotes.refresh();
}
});
return false;
});
$dialog = $("<div/>").addClass("dialog").attr("id", "login-dialog");
$form.append($usernameInput).append($passwordInput).append($submit);
$dialog.append($form);
$.vgquotes.createDialog($dialog);
$usernameInput.focus();
return false;
};
$(document).ready(function() {
$("#login-link").click(showLoginForm);
});
};
(function(){
setupLogin();
setupSearch();
$(document).ready(function() {
$.vgquotes.preload([$.vgquotes.loadingGif]);
setupFlagLink();
setupVoting();
$("body").ajaxError(function(e, xhr, options, error){
$.vgquotes.ajaxErrorHandler.call(this, xhr);
});
$("#search-query").focus();
$(document).keyup(function(e) {
if (e.keyCode === 27) {
$.vgquotes.closeDialog($(".dialog"));
}
});
});
}());
}(jQuery, window));