Skip to content

R
RecommenderXBlock
Commit 2bfae77f by swdanielli
Options

v0.1, comments and bug fixing

parent 71a1acd3
Showing with 133 additions and 123 deletions
recommender/static/js/src/recommender.js
function RecommenderXBlock(runtime, element) {
/*
$(document).tooltip({
close: function(ev, ui) { addTooltip(); },
open: function( ev, ui ) {
var tooltipDiv = $('div[id^="ui-tooltip-"]');
if (tooltipDiv.length > 1) {
$('div[id^="ui-tooltip-"]:lt(' + (tooltipDiv.length-1).toString() + ')').remove();
}
}
});*/
var handleUpvoteUrl = runtime.handlerUrl(element, 'handle_upvote');
var handleDownvoteUrl = runtime.handlerUrl(element, 'handle_downvote');
var addResourceUrl = runtime.handlerUrl(element, 'add_resource');
......@@ -21,44 +10,46 @@ function RecommenderXBlock(runtime, element) {
var entriesPerPage = 5;
var pageSpan = 2;
/* resource list collapse or expansion */
$(".hide-show").click(function () {
if ($(this).find('.hide-show-icon').text() == '▲') {
$(this).find('.hide-show-icon').text('▼');
//$(this).parent().find('.more').show();
$(".recommender_row_inner", element).slideUp('fast');
$('.resource_add_button').css('visibility', 'hidden');
$(this).css('cursor', 's-resize');
}
else {
$(this).find('.hide-show-icon').text('▲');
//$(this).parent().find('.less').show();
$(".recommender_row_inner", element).slideDown('fast');
$('.resource_add_button').css('visibility', 'visible');
$(this).css('cursor', 'n-resize');
}
//$(this).hide();
addTooltip();
});
/* show content/icon for different page */
function pagination() {
/* show resource for each page */
$('.recommender_resource').each(function(index, element) {
if (index < (currentPage-1)*entriesPerPage || index >= currentPage*entriesPerPage) { $(element).hide(); }
else { $(element).show(); }
});
/* change icon for each page */
$('.paginationRow').each(function(index, element) {
if (index + 1 == currentPage) { $(element).show(); }
else { $(element).hide(); }
});
}
/* creating pagination (icon and page-change event) for each page of resource list */
function paginationRow() {
var totalPage = Math.ceil($('.recommender_resource').length/entriesPerPage);
if (totalPage == 1) { return; }
$('.pagination').empty();
$('.paginationCell').unbind();
/* creating pagination for each page of resource list */
/* each paginationRow correspond to each page of resource list */
for (var pageIdx = 1; pageIdx <= totalPage; pageIdx++) {
var content = '<div class="paginationRow">';
/* no previous page if current page = 1 */
......@@ -80,6 +71,7 @@ function RecommenderXBlock(runtime, element) {
$('.pagination').append(content);
}
/* page change */
$('.paginationCell').click(function () {
var buttonText = $(this).text();
......@@ -91,16 +83,7 @@ function RecommenderXBlock(runtime, element) {
});
}
function initial() {
$(".hide-show").click();
$('.editSourceBlock').hide();
$('.recommender_add').hide();
$('.recommender_modify').hide();
paginationRow();
pagination();
}
initial();
/* button for adding new resource */
$('.resource_add_button').click(function() {
addResourceReset();
$('.recommender_add').show();
......@@ -108,7 +91,8 @@ function RecommenderXBlock(runtime, element) {
$('.recommender_modify').show();
$('.recommender_modify_title').text('Recommend new resource');
});
/* change between different mode (resource list or add/edit mode) */
function backToView() {
$('.recommender_add').hide();
$('.editSourceBlock').hide();
......@@ -121,6 +105,7 @@ function RecommenderXBlock(runtime, element) {
backToView();
});
/* prepare the form for uploading file to S3: TODO, handle this with pyfilesystem */
var policyBase64 = 'CnsiZXhwaXJhdGlvbiI6ICIyMDIwLTEyLTAxVDEyOjAwOjAwLjAwMFoiLAogICJjb25kaXRpb25zIjogWwogICAgeyJidWNrZXQiOiAiZGFuaWVsc3dsaSJ9LAogICAgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVwbG9hZHMvIl0sCiAgICB7ImFjbCI6ICJwdWJsaWMtcmVhZCJ9LAogICAgWyJzdGFydHMtd2l0aCIsICIkQ29udGVudC1UeXBlIiwgIiJdLAogICAgWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsIDAsIDUyNDI4ODAwMF0KICBdCn0=';
var signature = 'uRVljXwwHfM5K351eTL2MbYLwcI=';
$('#addResourceForm').append('<input type="hidden" name="Policy" value="' + policyBase64 + '">'
......@@ -129,18 +114,19 @@ function RecommenderXBlock(runtime, element) {
//+ '<input type="submit" class="submitAddResourceForm" name="submit" value="Upload File" style="margin-top: 0.5em">'
+ '<input type="button" value="Add resource" class="add_submit" style="margin-top: 0.5em" disabled >');
/* initialize add resource mode */
function addResourceReset() {
$('.in_title').val('');
$('.in_url').val('');
$('#addResourceForm').find("input[name='file']").val('')
/* get time for unique filenames: TODO, randomize filenames */
var key = "uploads/" + (new Date).getTime();
$('#addResourceForm').find("input[name='key']").val(key);
$('.add_submit').attr('disabled', true);
//$('.submitAddResourceForm').attr('disabled', false);
}
addResourceReset();
/* check whether enough information (title/url) is provided for recommending a resource, if yes, enable summission button */
function enableAddSubmit(divPtr) {
if ($('.in_title').val() == '' || $('.in_url').val() == '') {
$('.add_submit').attr('disabled', true);
......@@ -149,9 +135,11 @@ function RecommenderXBlock(runtime, element) {
$('.add_submit').attr('disabled', false);
}
/* check whether the input text area is changed, if yes, check whether student can submit the resource */
$('.in_title').bind('input propertychange', function() { enableAddSubmit(); });
$('.in_url').bind('input propertychange', function() { enableAddSubmit(); });
/* upload once student select a file */
$('#addResourceForm').find("input[name='file']").change(function (){
if ($(this).val() == '') { return false; }
$("#addResourceForm").submit();
......@@ -159,19 +147,18 @@ function RecommenderXBlock(runtime, element) {
$("#addResourceForm").submit( function(e) {
if ($('#addResourceForm').find("input[name='file']").val() == '') { return false; }
enableAddSubmit();
//$('.submitAddResourceForm').attr('disabled', true);
return true;
});
/* submit the resource, save to database, update the current view */
$('.add_submit').click(function() {
/* data: parameter passed to database */
var data = {};
data['resource'] = {};
data['resource']['url'] = $('.in_url').val();
data['resource']['title'] = $('.in_title').val();
data['resource']['description'] = baseUrl + $(this).parent().find("input[name='key']").val();
// data['resource']['description'] = $(this).parent().find('.in_description').val();
$.ajax({
type: "POST",
......@@ -179,6 +166,7 @@ function RecommenderXBlock(runtime, element) {
data: JSON.stringify(data),
success: function(result) {
if (result['Success'] == true) {
/* decide the rigth place for the added resource (pos), based on sorting the votes */
var pos = -1;
$('.recommender_vote_score').each(function(idx, ele){
if (parseInt($(ele).text()) < 0) {
......@@ -187,6 +175,7 @@ function RecommenderXBlock(runtime, element) {
}
});
/* html for the new resource */
var content = '<div class="recommender_resource">' +
'<div class="recommender_vote_box">' +
'<div class="recommender_vote_arrow_up nonevoting" role="button" aria-label="upvote" tabindex="0">' +
......@@ -205,14 +194,14 @@ function RecommenderXBlock(runtime, element) {
'<span class="ui-icon ui-icon-flag flagResource notProblematic" title="Flag irrelevant resource">' +
'</span></div></div>';
/* show the added resource at right place (pos), based on sorting the votes, and lead student to that page */
if (pos == -1) {
//$('.pagination').before(content);
$('.recommender_resource:last').after(content);
currentPage = parseInt($('.recommender_resource').length/entriesPerPage + 0.999);
currentPage = Math.ceil($('.recommender_resource').length/entriesPerPage);
}
else {
$('.recommender_resource:eq(' + pos.toString() + ')').before(content);
currentPage = parseInt( (pos + 1)/entriesPerPage + 0.999 );
currentPage = Math.ceil((pos + 1)/entriesPerPage);
}
}
addResourceReset();
......@@ -220,26 +209,26 @@ function RecommenderXBlock(runtime, element) {
bindEvent();
paginationRow();
pagination();
//addTooltip();
backToView();
}
});
});
/* unbind event for each entry of resources */
function unbindEvent() {
$('.recommender_vote_arrow_up').unbind();
$('.recommender_vote_arrow_down').unbind();
//$('.recommender_blurb').unbind();
$('.recommender_resource').unbind();
$('.resource_edit_button').unbind();
$('.flagResource').unbind();
}
/* bind event for each entry of resources */
function bindEvent() {
/* upvoting event */
$('.recommender_vote_arrow_up').click(function() {
var data = {};
data['resource'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
// data['resource'] = findEntry($(this).parent().parent().find('.recommender_entryId').text());
if (data['resource'] == -1) { return; }
var divArrowUp = this;
$.ajax({
......@@ -249,14 +238,17 @@ function RecommenderXBlock(runtime, element) {
success: function(result) {
if (result['Success'] == true) {
var scoreDiv = $(divArrowUp).parent().find('.recommender_vote_score');
/* change downvoting to upvoting */
if ($(divArrowUp).hasClass('downvoting')) {
$(divArrowUp).parent().find('.downvoting').removeClass('downvoting').addClass('upvoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) + 2).toString() + '</b>');
}
/* upvoting */
else if ($(divArrowUp).hasClass('nonevoting')) {
$(divArrowUp).parent().find('.nonevoting').removeClass('nonevoting').addClass('upvoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) + 1).toString() + '</b>');
}
/* undo upvoting */
else if ($(divArrowUp).hasClass('upvoting')) {
$(divArrowUp).parent().find('.upvoting').removeClass('upvoting').addClass('nonevoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) - 1).toString() + '</b>');
......@@ -266,10 +258,10 @@ function RecommenderXBlock(runtime, element) {
});
});
/* downvoting event */
$('.recommender_vote_arrow_down').click(function() {
var data = {};
data['resource'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
// data['resource'] = findEntry($(this).parent().parent().find('.recommender_entryId').text());
if (data['resource'] == -1) { return; }
var divArrowDown = this;
$.ajax({
......@@ -279,14 +271,17 @@ function RecommenderXBlock(runtime, element) {
success: function(result) {
if (result['Success'] == true) {
var scoreDiv = $(divArrowDown).parent().find('.recommender_vote_score');
/* undo downvoting */
if ($(divArrowDown).hasClass('downvoting')) {
$(divArrowDown).parent().find('.downvoting').removeClass('downvoting').addClass('nonevoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) + 1).toString() + '</b>');
}
/* downvoting */
else if ($(divArrowDown).hasClass('nonevoting')) {
$(divArrowDown).parent().find('.nonevoting').removeClass('nonevoting').addClass('downvoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) - 1).toString() + '</b>');
}
/* change voting to downvoting */
else if ($(divArrowDown).hasClass('upvoting')) {
$(divArrowDown).parent().find('.upvoting').removeClass('upvoting').addClass('downvoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) - 2).toString() + '</b>');
......@@ -296,6 +291,7 @@ function RecommenderXBlock(runtime, element) {
});
});
/* show preview when hover a entry of resource*/
$('.recommender_resource').hover(
function() {
$('.recommender_resource').removeClass('resource_hovered');
......@@ -304,116 +300,119 @@ function RecommenderXBlock(runtime, element) {
$('.descriptionImg').append('<img class="previewingImg" src="'
+ $(this).find('.recommender_descriptionSlot').text() + '" height=100%>');
}, function() {
// $('.descriptionImg').empty();
}
);
$('.resource_edit_button').click(function() {
$('.editSourceBlock').show();
$('.recommender_content').hide();
$('.recommender_modify').show();
$('.recommender_modify_title').text('Edit existing resource');
/* edit existing resource */
$('.resource_edit_button').click(function() {
$('.editSourceBlock').show();
$('.recommender_content').hide();
$('.recommender_modify').show();
$('.recommender_modify_title').text('Edit existing resource');
$('.editSourceBlock').empty();
var key = "uploads/" + (new Date).getTime();
var path = 'http://danielswli.s3.amazonaws.com/';
var uploadForm = '<form id="editResourceForm" action="' + path + '" method="post" enctype="multipart/form-data">'
+ '<input type="hidden" name="key" value="' + key + '">'
+ '<input type="hidden" name="acl" value="public-read">'
+ '<input type="hidden" name="Content-Type" value="image/jpeg">'
+ '<input type="hidden" name="AWSAccessKeyId" value="AKIAIRDHSV6YZJZ4RFGA">'
+ '<input type="hidden" name="Policy" value="' + policyBase64 + '">'
+ '<input type="hidden" name="Signature" value="' + signature + '">'
+ 'Previewing screenshot: <input type="file" name="file"><br>'
//+ '<input type="submit" class="submitEditResourceForm" name="submit" value="Upload File" style="margin-top: 0.5em">'
+ '<input type="button" value="Edit resource" class="edit_submit" style="margin-top: 0.5em" disabled></form>';
$('.editSourceBlock').append(
'<div class="editSourceBlockTitle">Edit the description, hypelink, and previewing screenshot for the selected resource</div>' +
'Description: ' + '<input type="text" class="edit_title" style="height: 25px; position: relative; left: 10px;"><br>' +
'HyperLink: <input type="text" class="edit_url" style="height: 25px; position: relative; left: 22px;"><br>' + uploadForm);
//'Edited resource description: ' +
//'<input type="text" class="edit_description"><br>' +
$('.edit_title').val($(this).parent().parent().find('.recommender_title').find('a').text());
$('.edit_url').val($(this).parent().parent().find('.recommender_title').find('a').attr('href'));
addTooltip();
var divEdit = this;
function enableEditSubmit() {
if ($('.edit_title').val() == '' || $('.edit_url').val() == '') {
$('.edit_submit').attr('disabled', true);
return;
}
$('.edit_submit').attr('disabled', false);
}
$('.edit_title').bind('input propertychange', function() { enableEditSubmit(); });
$('.edit_url').bind('input propertychange', function() { enableEditSubmit(); });
$('#editResourceForm').find("input[name='file']").change(function (){
if ($(this).val() == '') { return false; }
$("#editResourceForm").submit();
});
$('.editSourceBlock').empty();
/* get time for unique filenames: TODO, randomize filenames */
var key = "uploads/" + (new Date).getTime();
/* prepare the form for uploading file to S3: TODO, handle this with pyfilesystem */
var path = 'http://danielswli.s3.amazonaws.com/';
var uploadForm = '<form id="editResourceForm" action="' + path + '" method="post" enctype="multipart/form-data">'
+ '<input type="hidden" name="key" value="' + key + '">'
+ '<input type="hidden" name="acl" value="public-read">'
+ '<input type="hidden" name="Content-Type" value="image/jpeg">'
+ '<input type="hidden" name="AWSAccessKeyId" value="AKIAIRDHSV6YZJZ4RFGA">'
+ '<input type="hidden" name="Policy" value="' + policyBase64 + '">'
+ '<input type="hidden" name="Signature" value="' + signature + '">'
+ 'Previewing screenshot: <input type="file" name="file"><br>'
+ '<input type="button" value="Edit resource" class="edit_submit" style="margin-top: 0.5em" disabled></form>';
$('.editSourceBlock').append(
'<div class="editSourceBlockTitle">Edit the description, hypelink, and previewing screenshot for the selected resource</div>' +
'Description: ' + '<input type="text" class="edit_title" style="height: 25px; position: relative; left: 10px;"><br>' +
'HyperLink: <input type="text" class="edit_url" style="height: 25px; position: relative; left: 22px;"><br>' + uploadForm);
/* initialize the text area */
$('.edit_title').val($(this).parent().parent().find('.recommender_title').find('a').text());
$('.edit_url').val($(this).parent().parent().find('.recommender_title').find('a').attr('href'));
addTooltip();
var divEdit = this;
/* check whether enough information (title/url) is provided for editing a resource, if yes, enable summission button */
function enableEditSubmit() {
if ($('.edit_title').val() == '' || $('.edit_url').val() == '') {
$('.edit_submit').attr('disabled', true);
return;
}
$('.edit_submit').attr('disabled', false);
}
/* check whether the input text area is changed, if yes, check whether student can submit the resource */
$('.edit_title').bind('input propertychange', function() { enableEditSubmit(); });
$('.edit_url').bind('input propertychange', function() { enableEditSubmit(); });
/* upload once student select a file */
$('#editResourceForm').find("input[name='file']").change(function (){
if ($(this).val() == '') { return false; }
$("#editResourceForm").submit();
});
$("#editResourceForm").submit( function(e) {
if ($('#editResourceForm').find("input[name='file']").val() == '') { return false; }
$("#editResourceForm").submit( function(e) {
if ($('#editResourceForm').find("input[name='file']").val() == '') { return false; }
enableEditSubmit();
//$('.submitEditResourceForm').attr('disabled', 'disabled');
return true;
});
enableEditSubmit();
return true;
});
$('.edit_submit').click(function() {
var data = {};
data['resource'] = parseInt($(divEdit).parent().parent().find('.recommender_entryId').text());
// data['resource'] = findEntry($(divEdit).parent().parent().find('.recommender_entryId').text());
data['url'] = $('.edit_url').val();
data['title'] = $('.edit_title').val();
if (data['url'] == '' || data['title'] == '') { return; }
/* submit the edited resource, save to database, update the current view */
$('.edit_submit').click(function() {
/* data: parameter passed to database */
var data = {};
data['resource'] = parseInt($(divEdit).parent().parent().find('.recommender_entryId').text());
data['url'] = $('.edit_url').val();
data['title'] = $('.edit_title').val();
if (data['url'] == '' || data['title'] == '') { return; }
if ($('#editResourceForm').find("input[name='file']").val() != '') { data['description'] = baseUrl + key; }
if ($('#editResourceForm').find("input[name='file']").val() != '') { data['description'] = baseUrl + key; }
$.ajax({
$.ajax({
type: "POST",
url: editResourceUrl,
data: JSON.stringify(data),
success: function(result) {
if (result['Success'] == true) {
/* show the edited resource */
$(divEdit).parent().parent().find('.recommender_title').find('a').text(data['title']);
$(divEdit).parent().parent().find('.recommender_title').find('a').attr('href', data['url']);
if ("description" in data ) { $(divEdit).parent().parent().find('.recommender_descriptionSlot').text(data['description']); }
if ("description" in data) { $(divEdit).parent().parent().find('.recommender_descriptionSlot').text(data['description']); }
$('.editSourceBlock').empty();
backToView();
}
}
});
});
});
});
$('.flagResource').click(function() {
var data = {};
if ($(this).hasClass('notProblematic')) {
data['isProblematic'] = 'problematic';
$(this).removeClass('notProblematic').addClass('problematic');
}
else {
data['isProblematic'] = 'notProblematic';
$(this).removeClass('problematic').addClass('notProblematic');
}
// data['resource'] = findEntry($(this).parent().parent().find('.recommender_entryId').text());
data['resource'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
$.ajax({
/* flag problematic resource: TODO */
$('.flagResource').click(function() {
var data = {};
if ($(this).hasClass('notProblematic')) {
data['isProblematic'] = 'problematic';
$(this).removeClass('notProblematic').addClass('problematic');
}
else {
data['isProblematic'] = 'notProblematic';
$(this).removeClass('problematic').addClass('notProblematic');
}
data['resource'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
$.ajax({
type: "POST",
url: flagResourceUrl,
data: JSON.stringify(data)
});
});
});
addTooltip();
}
bindEvent();
addTooltip();
}
/*
function findEntry(id) {
var entryId = -1;
$('.recommender_resource').find('.recommender_entryId').each(
......@@ -425,7 +424,7 @@ function RecommenderXBlock(runtime, element) {
}
);
return entryId;
}
}*/
function addTooltip() {
$('.notProblematic').attr('title', 'Flag this resource as problematic and give the reason');
......@@ -446,4 +445,15 @@ function RecommenderXBlock(runtime, element) {
else { $('.recommender_row_top').attr('title', 'Select for expanding resource list' ); }
}
function initial() {
$(".hide-show").click();
$('.editSourceBlock').hide();
$('.recommender_add').hide();
$('.recommender_modify').hide();
paginationRow();
pagination();
addResourceReset();
bindEvent();
}
initial();
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment