Skip to content

R
RecommenderXBlock
Commit ff642c83 by swdanielli
Options

v0.1 + ux modified

parent 3a0df065
Showing with 335 additions and 186 deletions
recommender/recommender.py
...@@ -92,39 +92,41 @@ class RecommenderXBlock(XBlock): ...@@ -92,39 +92,41 @@ class RecommenderXBlock(XBlock):
@XBlock.json_handler @XBlock.json_handler
def handle_upvote(self, data, suffix=''): def handle_upvote(self, data, suffix=''):
''' untested ''' ''' untested '''
resource = data['resource'] resource = data['resource']
idx = self.getRecommendationIndex(resource) idx = self.getRecommendationIndex(resource)
if resource in self.upvotes: if resource in self.upvotes:
print "Upvote failed!" del self.upvotes[self.upvotes.index(resource)]
return {"Success": False} self.recommendations[idx]['upvotes'] -= 1
elif resource in self.downvotes:
if resource in self.downvotes: del self.downvotes[self.downvotes.index(resource)]
del self.downvotes[self.downvotes.index(resource)] self.recommendations[idx]['downvotes'] -= 1
self.recommendations[idx]['downvotes'] -= 1 self.upvotes.append(resource)
else: self.recommendations[idx]['upvotes'] += 1
self.upvotes.append(resource) else:
self.recommendations[idx]['upvotes'] += 1 self.upvotes.append(resource)
print "Upvote clicked!" self.recommendations[idx]['upvotes'] += 1
return {"Success": True} print "Upvote clicked!"
return {"Success": True}
@XBlock.json_handler @XBlock.json_handler
def handle_downvote(self, data, suffix=''): def handle_downvote(self, data, suffix=''):
''' untested ''' ''' untested '''
resource = data['resource'] resource = data['resource']
idx = self.getRecommendationIndex(resource) idx = self.getRecommendationIndex(resource)
if resource in self.downvotes: if resource in self.downvotes:
print "Downvote failed!" del self.downvotes[self.downvotes.index(resource)]
return {"Success": False} self.recommendations[idx]['downvotes'] -= 1
elif resource in self.upvotes:
if resource in self.upvotes: del self.upvotes[self.upvotes.index(resource)]
del self.upvotes[self.upvotes.index(resource)] self.recommendations[idx]['upvotes'] -= 1
self.recommendations[idx]['upvotes'] -= 1 self.downvotes.append(resource)
else: self.recommendations[idx]['downvotes'] += 1
self.downvotes.append(resource) else:
self.recommendations[idx]['downvotes'] += 1 self.downvotes.append(resource)
print "Downvote clicked!" self.recommendations[idx]['downvotes'] += 1
return {"Success": True} print "Downvote clicked!"
return {"Success": True}
@XBlock.json_handler @XBlock.json_handler
...@@ -148,7 +150,8 @@ class RecommenderXBlock(XBlock): ...@@ -148,7 +150,8 @@ class RecommenderXBlock(XBlock):
new_resource['upvotes'] = 0 new_resource['upvotes'] = 0
new_resource['downvotes'] = 0 new_resource['downvotes'] = 0
new_resource['id'] = self.getResourceNewId() new_resource['id'] = self.getResourceNewId()
new_resource['isMisuse'] = "notMisuse" new_resource['isProblematic'] = "notProblematic"
new_resource['problematicReason'] = ""
print "before append" print "before append"
# self.resources.append(new_resource) # self.resources.append(new_resource)
self.recommendations.append(new_resource) self.recommendations.append(new_resource)
...@@ -185,7 +188,7 @@ class RecommenderXBlock(XBlock): ...@@ -185,7 +188,7 @@ class RecommenderXBlock(XBlock):
print "Flag failed!" print "Flag failed!"
return {"Success": False} return {"Success": False}
self.recommendations[idx]['isMisuse'] = data['isMisuse'] self.recommendations[idx]['isProblematic'] = data['isProblematic']
return {"Success": True} return {"Success": True}
# TO-DO: change this view to display your data your own way. # TO-DO: change this view to display your data your own way.
...@@ -208,19 +211,15 @@ class RecommenderXBlock(XBlock): ...@@ -208,19 +211,15 @@ class RecommenderXBlock(XBlock):
# TODO: Sort by votes # TODO: Sort by votes
# Ideally, we'd estimate score based on votes, such that items with 1 vote have a sensible ranking (rather than a perfect rating) # Ideally, we'd estimate score based on votes, such that items with 1 vote have a sensible ranking (rather than a perfect rating)
# #
resources = [{'id' : r['id'], 'title' : r['title'], "votes" : r['upvotes'] - r['downvotes'], 'url' : r['url'], 'description' : r['description'], 'isMisuse': r['isMisuse']} for r in self.recommendations] resources = [{'id' : r['id'], 'title' : r['title'], "votes" : r['upvotes'] - r['downvotes'], 'url' : r['url'], 'description' : r['description'], 'isProblematic': r['isProblematic'], 'problematicReason': r['problematicReason']} for r in self.recommendations]
resources = sorted(resources, key = lambda r: r['votes'], reverse=True) resources = sorted(resources, key = lambda r: r['votes'], reverse=True)
print resources frag = Fragment(self.template_lookup.get_template("recommender.html").render(resources = resources, upvotes = self.upvotes, downvotes = self.downvotes))
frag = Fragment(self.template_lookup.get_template("recommender.html").render(resources = resources))
frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css") frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
frag.add_css_url("//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css") frag.add_css_url("//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css")
frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js") frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
frag.add_css(self.resource_string("static/css/recommender.css")) frag.add_css(self.resource_string("static/css/recommender.css"))
frag.add_css(self.resource_string("static/css/colorbox.css"))
frag.add_javascript(self.resource_string("static/js/src/recommender.js")) frag.add_javascript(self.resource_string("static/js/src/recommender.js"))
frag.add_javascript(self.resource_string("static/js/src/jquery.colorbox.js"))
frag.initialize_js('RecommenderXBlock') frag.initialize_js('RecommenderXBlock')
return frag return frag
...@@ -234,15 +233,15 @@ class RecommenderXBlock(XBlock): ...@@ -234,15 +233,15 @@ class RecommenderXBlock(XBlock):
"""<vertical_demo> """<vertical_demo>
<html_demo><img class="question" src="http://people.csail.mit.edu/swli/edx/recommendation/img/pset.png"></img></html_demo> <html_demo><img class="question" src="http://people.csail.mit.edu/swli/edx/recommendation/img/pset.png"></img></html_demo>
<recommender> <recommender>
{"id": 1, "title": "Covalent bonding and periodic trends", "upvotes" : 15, "downvotes" : 5, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Periodic_Trends_and_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage1.png", "isMisuse": "notMisuse"} {"id": 1, "title": "Covalent bonding and periodic trends", "upvotes" : 15, "downvotes" : 5, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Periodic_Trends_and_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage1.png", "isProblematic": "notProblematic", "problematicReason": ""}
{"id": 2, "title": "Polar covalent bonds and electronegativity", "upvotes" : 10, "downvotes" : 7, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Covalent_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage2.png", "isMisuse": "notMisuse"} {"id": 2, "title": "Polar covalent bonds and electronegativity", "upvotes" : 10, "downvotes" : 7, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Covalent_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage2.png", "isProblematic": "notProblematic", "problematicReason": ""}
{"id": 3, "title": "Longest wavelength able to to break a C-C bond ...", "upvotes" : 1230, "downvotes" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage1.png", "isMisuse": "notMisuse"} {"id": 3, "title": "Longest wavelength able to to break a C-C bond ...", "upvotes" : 1230, "downvotes" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage1.png", "isProblematic": "notProblematic", "problematicReason": ""}
{"id": 4, "title": "Calculate the maximum wavelength of light for ...", "upvotes" : 10, "downvotes" : 3457, "url" : "https://answers.yahoo.com/question/index?qid=20100110115715AA6toHw", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage2.png", "isMisuse": "notMisuse"} {"id": 4, "title": "Calculate the maximum wavelength of light for ...", "upvotes" : 10, "downvotes" : 3457, "url" : "https://answers.yahoo.com/question/index?qid=20100110115715AA6toHw", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage2.png", "isProblematic": "notProblematic", "problematicReason": ""}
</recommender> </recommender>
</vertical_demo> </vertical_demo>
"""), """),
# {"id": 5, "title": "Covalent bond - wave mechanical concep", "upvotes" : 10, "downvotes" : 7, "url" : "", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage1.png", "isMisuse": "notMisuse"} # {"id": 5, "title": "Covalent bond - wave mechanical concep", "upvotes" : 10, "downvotes" : 7, "url" : "", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage1.png", "isProblematic": "notProblematic"}
# {"id": 6, "title": "Covalent bond - Energetics of covalent bond", "upvotes" : 10, "downvotes" : 7, "url" : "", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage2.png", "isMisuse": "notMisuse"} # {"id": 6, "title": "Covalent bond - Energetics of covalent bond", "upvotes" : 10, "downvotes" : 7, "url" : "", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage2.png", "isProblematic": "notProblematic"}
# </recommender> # </recommender>
# </vertical_demo> # </vertical_demo>
# """), # """),
......
recommender/static/html/recommender.html
...@@ -11,9 +11,15 @@ ...@@ -11,9 +11,15 @@
float: left; float: left;
} }
.recommender_row_top {
/* overflow:scroll;
max-height:200px;*/
font-size: 20px;
background-color:rgb(204, 198, 198);
}
.recommender_row { .recommender_row {
overflow:scroll; height: 380px;
max-height:200px;
} }
.question { .question {
...@@ -21,17 +27,23 @@ ...@@ -21,17 +27,23 @@
} }
.recommender_resource { .recommender_resource {
border : 1; /* border : 1;*/
padding : 1; padding-top : 0.25em;
margin : 1; padding-bottom : 0.25em;
/* margin : 1;*/
/* display:table-cell;*/ /* display:table-cell;*/
float:left; float:left;
/* width:340px;*/ /* width:340px;*/
width : 95%; width : 100%;
border-color:gray; /* border-color:gray;
border-width:1px; border-width:1px;
border-style:solid; border-style:solid;
border-radius:5px; border-radius:5px;*/
}
.recommender_panel {
float: right;
width: 50px;
} }
.resource_list_less, .resource_list_more { .resource_list_less, .resource_list_more {
...@@ -56,7 +68,7 @@ ...@@ -56,7 +68,7 @@
} }
.recommender_modify { .recommender_modify {
width: 500px; width: 700px;
float: left; float: left;
} }
...@@ -64,36 +76,34 @@ ...@@ -64,36 +76,34 @@
height: 400px; height: 400px;
overflow-x: scroll; overflow-x: scroll;
margin-top: 2em; margin-top: 2em;
float: left;
} }
.recommender_vote_arrow_down { .recommender_vote_arrow_down {
color: red; width: 100%;
cursor: pointer;
float: left;
width: 20px;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
text-align:center; text-align:center;
} }
.recommender_vote_arrow_up { .recommender_vote_arrow_up {
color: green; width: 100%;
cursor: pointer;
float: left;
width: 20px;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
text-align:center; text-align:center;
} }
.recommender_vote_score { .recommender_vote_score {
float: left; width: 100%;
width: 50px;
text-align: center; text-align: center;
cursor: default;
} }
.recommender_recommendations { .recommender_recommendations { display: table; }
display:table;
.pagination {
display: table;
margin: 0 auto;
} }
.recommender_blurb { .recommender_blurb {
...@@ -111,77 +121,105 @@ ...@@ -111,77 +121,105 @@
.recommender_vote_box { .recommender_vote_box {
display:inline-block; display:inline-block;
vertical-align: middle; vertical-align: middle;
width:90px; width:50px;
} }
.recommender_edit{ .recommender_edit{
display:inline-block; display:inline-block;
vertical-align: top; vertical-align: top;
float: right;
width: 40px;
} }
.redTxt { .redTxt {
color: red; color: red;
} }
.resource_edit_button { float:left; } .recommender_vote_arrow_down, .recommender_vote_arrow_up, .recommender_title, .resource_edit_button, .flagResource, .resource_add_button, .hide-show, .paginationCell, .backToViewButton { cursor: pointer; }
.resource_add_button { float: left; font-weight: bold; }
.resource_edit_button { float: left; }
/*.hide-show {
float: left;
font-size: small;
}*/
.addSourceBlockTitle, .editSourceBlockTitle { .addSourceBlockTitle, .editSourceBlockTitle {
margin-bottom: 1em; margin-bottom: 1em;
} }
.editSourceBlock, .recommender_add { .editSourceBlock, .recommender_add {
padding: 1em; padding-left: 1em;
}
.paginationCell {
display:table-cell;
text-align:center;
vertical-align: middle;
width:25px;
} }
.ui-icon.misuse { .backToViewButton { color: #1d9dd9; float: left; }
.recommender_modify_title { position: relative; left: 50px; overflow: auto; }
.ui-icon.problematic {
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png); background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png);
} }
.resource_hovered { background: #1d9dd9; } .resource_hovered { background-color:#F2F7FA }
.recommender_modify { margin-left: 2em; }
.recommender_modify_title_container { background: rgb(204, 198, 198); font-size: 20px; }
.nonevoting { color: rgb(204, 198, 198); }
.hide-show-icon { margin-left: 0.5em; }
.recommender_vote_score.upvoting, .recommender_vote_arrow_up.upvoting { color: rgb(69, 194, 10); }
.recommender_vote_score.downvoting, .recommender_vote_arrow_down.downvoting { color: red; }
.recommender_vote_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: rgb(204, 198, 198); }
a:link { color: black; }
form { margin: 0em; } form { margin: 0em; }
</style> </style>
<div class="recommender_block"> <div class="recommender_block">
<div class="recommender_header">
<div class="recommender_title">Helpful resources</div>
<a class="inline cboxElement resource_add_button" href="#recommender_add"><span class="ui-icon ui-icon-plusthick"></span></a>
</div>
<div class="recommender_recommendations"> <div class="recommender_recommendations">
<div class="recommender_content"> <div class="recommender_content">
<div class="recommender_row"> <div class="recommender_row_top hide-show">
<input type="button" class="resource_list_less" value="Show less"> Related resources<div class='recommender_panel'><span class="resource_add_button">+</span> <span class='hide-show-icon'>▲</span> </div>
% for elem in resources: </div>
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isMisuse=elem['isMisuse']" /> <div class='recommender_row_inner'>
% endfor <div class="recommender_row">
<input type="button" class="resource_list_more" value="Show more"> % for elem in resources:
</div> % if elem['id'] in downvotes:
<div class="recommender_description"> <%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='downvoting'" />
<div class="descriptionImg"></div> % elif elem['id'] in upvotes:
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='upvoting'" />
% else:
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='nonevoting'" />
% endif
% endfor
</div>
<div class='pagination'> </div>
<div class="recommender_description">
<div class="descriptionImg"></div>
</div>
</div>
</div> </div>
</div>
<div class='recommender_modify'> <div class='recommender_modify'>
<div class='recommender_modify_title_container'><div class='backToViewButton'>&lt; Related resources</div><div class='recommender_modify_title'></div></div>
<div class="editSourceBlock" id="editSourceBlock"> <div class="editSourceBlock" id="editSourceBlock">
</div> </div>
<div class="recommender_add" id="recommender_add"> <div class="recommender_add" id="recommender_add">
<div class="addSourceBlockTitle">Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource.</div> <div class="addSourceBlockTitle">Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource.</div>
Description: <input type="text" class="in_title"><br> Description: <input type="text" class="in_title" style="height: 25px; position: relative; left: 10px;"><br>
HyperLink: <input type="text" class="in_url"><br> HyperLink: <input type="text" class="in_url" style="height: 25px; position: relative; left: 22px;"><br>
<form id="addResourceForm" action="http://danielswli.s3.amazonaws.com/" method="post" enctype="multipart/form-data"> <form id="addResourceForm" action="http://danielswli.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
<input type="hidden" name="acl" value="public-read"> <input type="hidden" name="acl" value="public-read">
<input type="hidden" name="Content-Type" value="image/jpeg"> <input type="hidden" name="Content-Type" value="image/jpeg">
<input type="hidden" name="AWSAccessKeyId" value="AKIAIRDHSV6YZJZ4RFGA"> <input type="hidden" name="AWSAccessKeyId" value="AKIAIRDHSV6YZJZ4RFGA">
<input type="hidden" name="key" value=""> <input type="hidden" name="key" value="">
</form> </form>
<!-- Resource description: <input type="text" class="in_description"><br>-->
</div> </div>
</div> </div>
</div> </div>
<!--
<div class="recommender_description">
<div class="descriptionImg"></div>
</div>-->
</div> </div>
recommender/static/html/resourcebox.html
<%page args="title,votes,url,description,id,isMisuse"/> <%page args="title,votes,url,description,id,isProblematic,voteMode"/>
<div class="recommender_resource hidden"> <div class="recommender_resource">
<div class="recommender_vote_box"> <div class="recommender_vote_box">
<div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0">↑</div> <div class="recommender_vote_arrow_up ${voteMode}" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div>
<!--div class="recommender_vote_score_dislikes">2927</div--> <div class="recommender_vote_score ${voteMode}"><b>${votes}</b></div>
<div class="recommender_vote_score">${votes}</div> <div class="recommender_vote_arrow_down ${voteMode}" role="button" aria-label="downvote" tabindex="0"><b>↓</b></div>
<!--div class="recommender_vote_score_likes">2927</div-->
<div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0">↓</div>
</div> </div>
<div class="recommender_blurb"><div class="recommender_title">${title}</div><div class="recommender_url">${url}</div><div class="recommender_descriptionSlot">${description}</div><div class="recommender_entryId">${id}</div></div> <div class="recommender_blurb"><div class="recommender_title"><a href="${url}" target="_blank">${title}</a></div><div class="recommender_descriptionSlot">${description}</div><div class="recommender_entryId">${id}</div></div>
<div class="recommender_edit"><a class="inline cboxElement resource_edit_button" href="#editSourceBlock"><span class="ui-icon ui-icon-pencil editResource"></span></a><span class="ui-icon ui-icon-flag flagResource ${isMisuse}"></span></div> <div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource ${isProblematic}"></span></div>
</div> </div>
recommender/static/js/src/recommender.js
...@@ -16,39 +16,117 @@ function RecommenderXBlock(runtime, element) { ...@@ -16,39 +16,117 @@ function RecommenderXBlock(runtime, element) {
var editResourceUrl = runtime.handlerUrl(element, 'edit_resource'); var editResourceUrl = runtime.handlerUrl(element, 'edit_resource');
var flagResourceUrl = runtime.handlerUrl(element, 'flag_resource'); var flagResourceUrl = runtime.handlerUrl(element, 'flag_resource');
var showedResourceLength = 3; var baseUrl = 'http://s3-us-west-2.amazonaws.com/danielswli/';
var showedResourceIncrement = 2; var currentPage = 1;
var entriesPerPage = 5;
var pageSpan = 2;
$(".hide-show").click(function () {
if ($(this).find('.hide-show-icon').text() == '▲') {
$(this).find('.hide-show-icon').text('▼');
//$(this).parent().find('.more').show();
$(this).parent().find('.recommender_row_inner').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();
$(this).parent().find('.recommender_row_inner').slideDown('fast');
$('.resource_add_button').css('visibility', 'visible');
$(this).css('cursor', 'n-resize');
}
//$(this).hide();
});
var baseUrl = 'http://s3-us-west-2.amazonaws.com/danielswli/' function pagination() {
$('.recommender_resource').each(function(index, element) {
if (index < (currentPage-1)*entriesPerPage || index >= currentPage*entriesPerPage) { $(element).hide(); }
else { $(element).show(); }
});
$('.paginationRow').each(function(index, element) {
if (index + 1 == currentPage) { $(element).show(); }
else { $(element).hide(); }
});
}
function paginationRow() {
var totalPage = parseInt($('.recommender_resource').length/entriesPerPage + 0.999);
if (totalPage == 1) { return; }
$('.pagination').empty();
$('.paginationCell').unbind();
for (var pageIdx = 1; pageIdx <= totalPage; pageIdx++) {
var content = '<div class="paginationRow">';
if (pageIdx == 1) { content += '<div class="paginationCell" style="visibility: hidden;">◄</div>'; }
else { content += '<div class="paginationCell">◄</div>'; }
if (pageIdx - pageSpan > 1) { content += '<div class="paginationCell" style="cursor: default;">...</div>'; }
for (var i = pageIdx - pageSpan; i <= pageIdx + pageSpan; i++) {
if (i == pageIdx) { content += '<div class="paginationCell" style="background-color: lightgrey;">' + i.toString() + '</div>'; }
else if (i > 0 && i <= totalPage) { content += '<div class="paginationCell">' + i.toString() + '</div>'; }
}
if (pageIdx + pageSpan < totalPage) { content += '<div class="paginationCell" style="cursor: default;">...</div>'; }
if (pageIdx == totalPage) { content += '<div class="paginationCell" style="visibility: hidden;">►</div>'; }
else { content += '<div class="paginationCell">►</div>'; }
content += '</div>';
$('.pagination').append(content);
}
$('.paginationCell').click(function () {
var buttonText = $(this).text();
if (buttonText == '...') { return; }
else if (buttonText == '◄') { currentPage -= 1; }
else if (buttonText == '►') { currentPage += 1; }
else { currentPage = parseInt(buttonText) }
pagination();
});
}
function initial() {
$(".hide-show").click();
$('.editSourceBlock').hide();
$('.recommender_add').hide();
$('.recommender_modify').hide();
paginationRow();
pagination();
}
initial();
$('.resource_add_button').click(function() { $('.resource_add_button').click(function() {
addResourceReset();
$('.recommender_add').show(); $('.recommender_add').show();
$('.recommender_content').hide();
$('.recommender_modify').show();
$('.recommender_modify_title').text('Recommend new resource');
}); });
$('.resource_edit_button').click(function() {
$('.editSourceBlock').show(); function backToView() {
}); $('.recommender_add').hide();
$(document).bind('cbox_closed', function(){ $('.editSourceBlock').hide();
$('.recommender_add').hide(); $('.recommender_modify').hide();
$('.editSourceBlock').hide(); $('.recommender_content').show();
}); }
$(".inline").colorbox({
inline:true,
width:"50%",
title:""
});
$('.backToViewButton').click(function(){
backToView();
});
var policyBase64 = 'CnsiZXhwaXJhdGlvbiI6ICIyMDIwLTEyLTAxVDEyOjAwOjAwLjAwMFoiLAogICJjb25kaXRpb25zIjogWwogICAgeyJidWNrZXQiOiAiZGFuaWVsc3dsaSJ9LAogICAgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVwbG9hZHMvIl0sCiAgICB7ImFjbCI6ICJwdWJsaWMtcmVhZCJ9LAogICAgWyJzdGFydHMtd2l0aCIsICIkQ29udGVudC1UeXBlIiwgIiJdLAogICAgWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsIDAsIDUyNDI4ODAwMF0KICBdCn0='; var policyBase64 = 'CnsiZXhwaXJhdGlvbiI6ICIyMDIwLTEyLTAxVDEyOjAwOjAwLjAwMFoiLAogICJjb25kaXRpb25zIjogWwogICAgeyJidWNrZXQiOiAiZGFuaWVsc3dsaSJ9LAogICAgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVwbG9hZHMvIl0sCiAgICB7ImFjbCI6ICJwdWJsaWMtcmVhZCJ9LAogICAgWyJzdGFydHMtd2l0aCIsICIkQ29udGVudC1UeXBlIiwgIiJdLAogICAgWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsIDAsIDUyNDI4ODAwMF0KICBdCn0=';
var signature = 'uRVljXwwHfM5K351eTL2MbYLwcI='; var signature = 'uRVljXwwHfM5K351eTL2MbYLwcI=';
$('#addResourceForm').append('<input type="hidden" name="Policy" value="' + policyBase64 + '">' $('#addResourceForm').append('<input type="hidden" name="Policy" value="' + policyBase64 + '">'
+ '<input type="hidden" name="Signature" value="' + signature + '">' + '<input type="hidden" name="Signature" value="' + signature + '">'
+ 'Previewing screenshot: <input type="file" name="file"><br>' + 'Previewing screenshot: <input type="file" name="file"><br>'
+ '<input type="submit" class="submitAddResourceForm" name="submit" value="Upload File">' + '<input type="submit" class="submitAddResourceForm" name="submit" value="Upload File" style="margin-top: 0.5em">'
+ '<input type="button" value="Add resource" class="add_submit" disabled>'); + '<input type="button" value="Add resource" class="add_submit" style="margin-top: 0.5em" disabled >');
function addResourceReset() { function addResourceReset() {
$('.in_title').val(''); $('.in_title').val('');
$('.in_url').val('') $('.in_url').val('');
$('#addResourceForm').find("input[name='file']").val('') $('#addResourceForm').find("input[name='file']").val('')
var key = "uploads/" + (new Date).getTime(); var key = "uploads/" + (new Date).getTime();
...@@ -58,10 +136,21 @@ function RecommenderXBlock(runtime, element) { ...@@ -58,10 +136,21 @@ function RecommenderXBlock(runtime, element) {
} }
addResourceReset(); addResourceReset();
function enableAddSubmit(divPtr) {
if ($('.in_title').val() == '' || $('.in_url').val() == '') {
$('.add_submit').attr('disabled', true);
return;
}
$('.add_submit').attr('disabled', false);
}
$('.in_title').change(function() { enableAddSubmit(); });
$('.in_url').change(function() { enableAddSubmit(); });
$("#addResourceForm").submit( function(e) { $("#addResourceForm").submit( function(e) {
if ($('#addResourceForm').find("input[name='file']").val() == '') { return false; } if ($('#addResourceForm').find("input[name='file']").val() == '') { return false; }
$('.add_submit').attr('disabled', false); enableAddSubmit();
$('.submitAddResourceForm').attr('disabled', true); $('.submitAddResourceForm').attr('disabled', true);
return true; return true;
}); });
...@@ -90,31 +179,39 @@ function RecommenderXBlock(runtime, element) { ...@@ -90,31 +179,39 @@ function RecommenderXBlock(runtime, element) {
var content = '<div class="recommender_resource">' + var content = '<div class="recommender_resource">' +
'<div class="recommender_vote_box">' + '<div class="recommender_vote_box">' +
'<div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0">' + '<div class="recommender_vote_arrow_up nonevoting" role="button" aria-label="upvote" tabindex="0">' +
'↑</div>' + '<b>↑</b></div>' +
'<div class="recommender_vote_score">0</div>' + '<div class="recommender_vote_score nonevoting"><b>0</b></div>' +
'<div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0">' + '<div class="recommender_vote_arrow_down nonevoting" role="button" aria-label="downvote" tabindex="0">' +
'↓</div>' + '<b>↓</b></div>' +
'</div>' + '</div>' +
'<div class="recommender_blurb"><div class="recommender_title">' + '<div class="recommender_blurb"><div class="recommender_title">' +
data['resource']['title'] + '</div>' + '<a href="' + data['resource']['url'] + '" target="_blank">' + data['resource']['title'] + '</a>' + '</div>' +
'<div class="recommender_url">' + data['resource']['url'] + '<div class="recommender_url">' + data['resource']['url'] +
'</div><div class="recommender_descriptionSlot">' + data['resource']['description'] + '</div><div class="recommender_descriptionSlot">' + data['resource']['description'] +
'</div><div class="recommender_entryId">' + result['id'] + '</div><div class="recommender_entryId">' + result['id'] +
'</div></div><div class="recommender_edit">' + '</div></div><div class="recommender_edit">' +
'<a class="inline cboxElement resource_edit_button" href="#editSourceBlock">' + '<span class="ui-icon ui-icon-pencil resource_edit_button"></span>' +
'<span class="ui-icon ui-icon-pencil editResource"></span></a>' + '<span class="ui-icon ui-icon-flag flagResource notProblematic" title="Flag irrelevant resource">' +
'<span class="ui-icon ui-icon-flag flagResource notMisuse" title="Flag irrelevant resource">' +
'</span></div></div>'; '</span></div></div>';
if (pos == -1) { $('.resource_list_more').before(content); } if (pos == -1) {
else { $('.recommender_resource:eq(' + pos.toString() + ')').before(content); } //$('.pagination').before(content);
$('.recommender_resource:last').after(content);
currentPage = parseInt($('.recommender_resource').length/entriesPerPage + 0.999);
}
else {
$('.recommender_resource:eq(' + pos.toString() + ')').before(content);
currentPage = parseInt( (pos + 1)/entriesPerPage + 0.999 );
}
} }
addResourceReset(); addResourceReset();
unbindEvent(); unbindEvent();
bindEvent(); bindEvent();
paginationRow();
pagination();
//addTooltip(); //addTooltip();
$.colorbox.close(); backToView();
} }
}); });
}); });
...@@ -122,9 +219,9 @@ function RecommenderXBlock(runtime, element) { ...@@ -122,9 +219,9 @@ function RecommenderXBlock(runtime, element) {
function unbindEvent() { function unbindEvent() {
$('.recommender_vote_arrow_up').unbind(); $('.recommender_vote_arrow_up').unbind();
$('.recommender_vote_arrow_down').unbind(); $('.recommender_vote_arrow_down').unbind();
$('.recommender_blurb').unbind(); //$('.recommender_blurb').unbind();
$('.recommender_resource').unbind(); $('.recommender_resource').unbind();
$('.editResource').unbind(); $('.resource_edit_button').unbind();
$('.flagResource').unbind(); $('.flagResource').unbind();
} }
...@@ -142,7 +239,18 @@ function RecommenderXBlock(runtime, element) { ...@@ -142,7 +239,18 @@ function RecommenderXBlock(runtime, element) {
success: function(result) { success: function(result) {
if (result['Success'] == true) { if (result['Success'] == true) {
var scoreDiv = $(divArrowUp).parent().find('.recommender_vote_score'); var scoreDiv = $(divArrowUp).parent().find('.recommender_vote_score');
scoreDiv.text((parseInt(scoreDiv.text()) + 1).toString()); if ($(divArrowUp).hasClass('downvoting')) {
$(divArrowUp).parent().find('.downvoting').removeClass('downvoting').addClass('upvoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) + 2).toString() + '</b>');
}
else if ($(divArrowUp).hasClass('nonevoting')) {
$(divArrowUp).parent().find('.nonevoting').removeClass('nonevoting').addClass('upvoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) + 1).toString() + '</b>');
}
else if ($(divArrowUp).hasClass('upvoting')) {
$(divArrowUp).parent().find('.upvoting').removeClass('upvoting').addClass('nonevoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) - 1).toString() + '</b>');
}
} }
} }
}); });
...@@ -154,22 +262,28 @@ function RecommenderXBlock(runtime, element) { ...@@ -154,22 +262,28 @@ function RecommenderXBlock(runtime, element) {
// data['resource'] = findEntry($(this).parent().parent().find('.recommender_entryId').text()); // data['resource'] = findEntry($(this).parent().parent().find('.recommender_entryId').text());
if (data['resource'] == -1) { return; } if (data['resource'] == -1) { return; }
var divArrowDown = this; var divArrowDown = this;
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: handleDownvoteUrl, url: handleDownvoteUrl,
data: JSON.stringify(data), data: JSON.stringify(data),
success: function(result) { success: function(result) {
if (result['Success'] == true) { if (result['Success'] == true) {
var scoreDiv = $(divArrowDown).parent().find('.recommender_vote_score'); var scoreDiv = $(divArrowDown).parent().find('.recommender_vote_score');
scoreDiv.text((parseInt(scoreDiv.text()) - 1).toString()); if ($(divArrowDown).hasClass('downvoting')) {
} $(divArrowDown).parent().find('.downvoting').removeClass('downvoting').addClass('nonevoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) + 1).toString() + '</b>');
}
else if ($(divArrowDown).hasClass('nonevoting')) {
$(divArrowDown).parent().find('.nonevoting').removeClass('nonevoting').addClass('downvoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) - 1).toString() + '</b>');
}
else if ($(divArrowDown).hasClass('upvoting')) {
$(divArrowDown).parent().find('.upvoting').removeClass('upvoting').addClass('downvoting');
scoreDiv.html('<b>' + (parseInt(scoreDiv.text()) - 2).toString() + '</b>');
}
}
} }
}); });
});
$('.recommender_blurb').click(function(){
var win = window.open($(this).find('.recommender_url').text(), '_blank');
win.focus();
}); });
$('.recommender_resource').hover( $('.recommender_resource').hover(
...@@ -184,7 +298,12 @@ function RecommenderXBlock(runtime, element) { ...@@ -184,7 +298,12 @@ function RecommenderXBlock(runtime, element) {
} }
); );
$('.editResource').click(function() { $('.resource_edit_button').click(function() {
$('.editSourceBlock').show();
$('.recommender_content').hide();
$('.recommender_modify').show();
$('.recommender_modify_title').text('Edit existing resource');
$('.editSourceBlock').empty(); $('.editSourceBlock').empty();
var key = "uploads/" + (new Date).getTime(); var key = "uploads/" + (new Date).getTime();
var path = 'http://danielswli.s3.amazonaws.com/'; var path = 'http://danielswli.s3.amazonaws.com/';
...@@ -196,30 +315,44 @@ function RecommenderXBlock(runtime, element) { ...@@ -196,30 +315,44 @@ function RecommenderXBlock(runtime, element) {
+ '<input type="hidden" name="Policy" value="' + policyBase64 + '">' + '<input type="hidden" name="Policy" value="' + policyBase64 + '">'
+ '<input type="hidden" name="Signature" value="' + signature + '">' + '<input type="hidden" name="Signature" value="' + signature + '">'
+ 'Previewing screenshot: <input type="file" name="file"><br>' + 'Previewing screenshot: <input type="file" name="file"><br>'
+ '<input type="submit" class="submitEditResourceForm" name="submit" value="Upload File">' + '<input type="submit" class="submitEditResourceForm" name="submit" value="Upload File" style="margin-top: 0.5em">'
+ '<input type="button" value="Edit resource" class="edit_submit" disabled></form>'; + '<input type="button" value="Edit resource" class="edit_submit" style="margin-top: 0.5em" disabled></form>';
$('.editSourceBlock').append( $('.editSourceBlock').append(
'<div class="editSourceBlockTitle">Edit the description, hypelink, and previewing screenshot for the selected resource</div>' + '<div class="editSourceBlockTitle">Edit the description, hypelink, and previewing screenshot for the selected resource</div>' +
'Description: ' + '<input type="text" class="edit_title"><br>' + 'Description: ' + '<input type="text" class="edit_title" style="height: 25px; position: relative; left: 10px;"><br>' +
'HyperLink: <input type="text" class="edit_url"><br>' + uploadForm); 'HyperLink: <input type="text" class="edit_url" style="height: 25px; position: relative; left: 22px;"><br>' + uploadForm);
//'Edited resource description: ' + //'Edited resource description: ' +
//'<input type="text" class="edit_description"><br>' + //'<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(); addTooltip();
var divEdit = this; 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').change(function() { enableEditSubmit(); });
$('.edit_url').change(function() { enableEditSubmit(); });
$("#editResourceForm").submit( function(e) { $("#editResourceForm").submit( function(e) {
if ($('#editResourceForm').find("input[name='file']").val() == '') { return false; } if ($('#editResourceForm').find("input[name='file']").val() == '') { return false; }
$('.edit_submit').attr('disabled', false); enableEditSubmit();
$('.submitEditResourceForm').attr('disabled', 'disabled'); $('.submitEditResourceForm').attr('disabled', 'disabled');
return true; return true;
}); });
$('.edit_submit').click(function() { $('.edit_submit').click(function() {
var data = {}; var data = {};
data['resource'] = parseInt($(divEdit).parent().parent().parent().find('.recommender_entryId').text()); data['resource'] = parseInt($(divEdit).parent().parent().find('.recommender_entryId').text());
// data['resource'] = findEntry($(divEdit).parent().parent().find('.recommender_entryId').text()); // data['resource'] = findEntry($(divEdit).parent().parent().find('.recommender_entryId').text());
data['url'] = $('.edit_url').val(); data['url'] = $('.edit_url').val();
data['title'] = $('.edit_title').val(); data['title'] = $('.edit_title').val();
...@@ -232,11 +365,11 @@ function RecommenderXBlock(runtime, element) { ...@@ -232,11 +365,11 @@ function RecommenderXBlock(runtime, element) {
data: JSON.stringify(data), data: JSON.stringify(data),
success: function(result) { success: function(result) {
if (result['Success'] == true) { if (result['Success'] == true) {
$(divEdit).parent().parent().parent().find('.recommender_title').text(data['title']); $(divEdit).parent().parent().find('.recommender_title').find('a').text(data['title']);
$(divEdit).parent().parent().parent().find('.recommender_url').text(data['url']); $(divEdit).parent().parent().find('.recommender_title').find('a').attr('href', data['url']);
$(divEdit).parent().parent().parent().find('.recommender_descriptionSlot').text(data['description']); $(divEdit).parent().parent().find('.recommender_descriptionSlot').text(data['description']);
$('.editSourceBlock').empty(); $('.editSourceBlock').empty();
$.colorbox.close(); backToView();
} }
} }
}); });
...@@ -245,13 +378,13 @@ function RecommenderXBlock(runtime, element) { ...@@ -245,13 +378,13 @@ function RecommenderXBlock(runtime, element) {
$('.flagResource').click(function() { $('.flagResource').click(function() {
var data = {}; var data = {};
if ($(this).hasClass('notMisuse')) { if ($(this).hasClass('notProblematic')) {
data['isMisuse'] = 'misuse'; data['isProblematic'] = 'problematic';
$(this).removeClass('notMisuse').addClass('misuse'); $(this).removeClass('notProblematic').addClass('problematic');
} }
else { else {
data['isMisuse'] = 'notMisuse'; data['isProblematic'] = 'notProblematic';
$(this).removeClass('misuse').addClass('notMisuse'); $(this).removeClass('problematic').addClass('notProblematic');
} }
// data['resource'] = findEntry($(this).parent().parent().find('.recommender_entryId').text()); // data['resource'] = findEntry($(this).parent().parent().find('.recommender_entryId').text());
data['resource'] = parseInt($(this).parent().parent().find('.recommender_entryId').text()); data['resource'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
...@@ -266,21 +399,6 @@ function RecommenderXBlock(runtime, element) { ...@@ -266,21 +399,6 @@ function RecommenderXBlock(runtime, element) {
} }
bindEvent(); bindEvent();
$('.resource_list_more').click(function() { showResource(showedResourceIncrement); });
$('.resource_list_less').click(function() {
$('.recommender_resource').addClass('hidden');
showResource(-showedResourceIncrement);
});
function showResource(increment) {
showedResourceLength += increment;
if (showedResourceLength < 1) { showedResourceLength = 1; }
if (showedResourceLength > $('.recommender_resource').length)
showedResourceLength = $('.recommender_resource').length;
$('.recommender_resource:lt(' + showedResourceLength.toString() + ')').removeClass('hidden');
}
showResource(0);
function findEntry(id) { function findEntry(id) {
var entryId = -1; var entryId = -1;
$('.recommender_resource').find('.recommender_entryId').each( $('.recommender_resource').find('.recommender_entryId').each(
...@@ -295,8 +413,8 @@ function RecommenderXBlock(runtime, element) { ...@@ -295,8 +413,8 @@ function RecommenderXBlock(runtime, element) {
} }
function addTooltip() { function addTooltip() {
$('.notMisuse').attr('title', 'Flag this resource as irrelevant'); $('.notProblematic').attr('title', 'Flag this resource as problematic and give the reason');
$('.misuse').attr('title', 'Flag this resource as helpful'); $('.problematic').attr('title', 'Edit the reason of this problematic resource');
$('.resource_add_button').attr('title', 'Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource'); $('.resource_add_button').attr('title', 'Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource');
$('.resource_edit_button').attr('title', 'Edit the description, hypelink, and previewing screenshot of this resource'); $('.resource_edit_button').attr('title', 'Edit the description, hypelink, and previewing screenshot of this resource');
$('.recommender_vote_arrow_up').attr('title', 'Upvote for a helpful resource'); $('.recommender_vote_arrow_up').attr('title', 'Upvote for a helpful resource');
...@@ -308,11 +426,7 @@ function RecommenderXBlock(runtime, element) { ...@@ -308,11 +426,7 @@ function RecommenderXBlock(runtime, element) {
$('.in_url').attr('title', 'Type in the hyperlink to the resource'); $('.in_url').attr('title', 'Type in the hyperlink to the resource');
$('.edit_title').attr('title', 'Type in the description of the resource'); $('.edit_title').attr('title', 'Type in the description of the resource');
$('.edit_url').attr('title', 'Type in the hyperlink to the resource'); $('.edit_url').attr('title', 'Type in the hyperlink to the resource');
$('.backToViewButton').attr('title', 'Back to list of related resources');
} }
// addTooltip();
/* $('.ui-icon-zoomin').click(function(){
//alert($(this).parent().parent().find('.recommender_url').text());
$(this).colorbox({iframe:true, width:800, height:600, href:$(this).parent().parent().find('.recommender_url').text()});
});*/
} }
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