From b92a180d25d321e6d7c3b6a3cf4bdd81720a85fe Mon Sep 17 00:00:00 2001 From: Rocky Duan Date: Sun, 29 Jul 2012 15:24:15 -0400 Subject: [PATCH] add tags to threads & view threads by tags --- common/static/js/vendor/jquery.tagsinput.js | 354 ++++++++++++++++++ .../django_comment_client/base/urls.py | 2 + .../django_comment_client/base/views.py | 11 +- .../django_comment_client/forum/views.py | 15 +- lms/lib/comment_client.py | 8 +- lms/static/coffee/src/customwmd.coffee | 10 +- lms/static/coffee/src/discussion.coffee | 18 +- lms/static/css/vendor/jquery.tagsinput.css | 7 + lms/static/sass/_discussion.scss | 17 + lms/templates/discussion/index.html | 2 + lms/templates/discussion/inline.html | 2 +- lms/templates/discussion/thread.html | 10 + 12 files changed, 442 insertions(+), 14 deletions(-) create mode 100644 common/static/js/vendor/jquery.tagsinput.js create mode 100644 lms/static/css/vendor/jquery.tagsinput.css diff --git a/common/static/js/vendor/jquery.tagsinput.js b/common/static/js/vendor/jquery.tagsinput.js new file mode 100644 index 0000000000..dd39357e82 --- /dev/null +++ b/common/static/js/vendor/jquery.tagsinput.js @@ -0,0 +1,354 @@ +/* + + jQuery Tags Input Plugin 1.3.3 + + Copyright (c) 2011 XOXCO, Inc + + Documentation for this plugin lives here: + http://xoxco.com/clickable/jquery-tags-input + + Licensed under the MIT license: + http://www.opensource.org/licenses/mit-license.php + + ben@xoxco.com + +*/ + +(function($) { + + var delimiter = new Array(); + var tags_callbacks = new Array(); + $.fn.doAutosize = function(o){ + var minWidth = $(this).data('minwidth'), + maxWidth = $(this).data('maxwidth'), + val = '', + input = $(this), + testSubject = $('#'+$(this).data('tester_id')); + + if (val === (val = input.val())) {return;} + + // Enter new content into testSubject + var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(//g, '>'); + testSubject.html(escaped); + // Calculate new width + whether to change + var testerWidth = testSubject.width(), + newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, + currentWidth = input.width(), + isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) + || (newWidth > minWidth && newWidth < maxWidth); + + // Animate width + if (isValidWidthChange) { + input.width(newWidth); + } + + + }; + $.fn.resetAutosize = function(options){ + // alert(JSON.stringify(options)); + var minWidth = $(this).data('minwidth') || options.minInputWidth || $(this).width(), + maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding), + val = '', + input = $(this), + testSubject = $('').css({ + position: 'absolute', + top: -9999, + left: -9999, + width: 'auto', + fontSize: input.css('fontSize'), + fontFamily: input.css('fontFamily'), + fontWeight: input.css('fontWeight'), + letterSpacing: input.css('letterSpacing'), + whiteSpace: 'nowrap' + }), + testerId = $(this).attr('id')+'_autosize_tester'; + if(! $('#'+testerId).length > 0){ + testSubject.attr('id', testerId); + testSubject.appendTo('body'); + } + + input.data('minwidth', minWidth); + input.data('maxwidth', maxWidth); + input.data('tester_id', testerId); + input.css('width', minWidth); + }; + + $.fn.addTag = function(value,options) { + options = jQuery.extend({focus:false,callback:true},options); + this.each(function() { + var id = $(this).attr('id'); + + var tagslist = $(this).val().split(delimiter[id]); + if (tagslist[0] == '') { + tagslist = new Array(); + } + + value = jQuery.trim(value); + + if (options.unique) { + var skipTag = $(this).tagExist(value); + if(skipTag == true) { + //Marks fake input as not_valid to let styling it + $('#'+id+'_tag').addClass('not_valid'); + } + } else { + var skipTag = false; + } + + if (value !='' && skipTag != true) { + $('').addClass('tag').append( + $('').text(value).append('  '), + $('', { + href : '#', + title : 'Removing tag', + text : 'x' + }).click(function () { + return $('#' + id).removeTag(escape(value)); + }) + ).insertBefore('#' + id + '_addTag'); + + tagslist.push(value); + + $('#'+id+'_tag').val(''); + if (options.focus) { + $('#'+id+'_tag').focus(); + } else { + $('#'+id+'_tag').blur(); + } + + $.fn.tagsInput.updateTagsField(this,tagslist); + + if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) { + var f = tags_callbacks[id]['onAddTag']; + f.call(this, value); + } + if(tags_callbacks[id] && tags_callbacks[id]['onChange']) + { + var i = tagslist.length; + var f = tags_callbacks[id]['onChange']; + f.call(this, $(this), tagslist[i-1]); + } + } + + }); + + return false; + }; + + $.fn.removeTag = function(value) { + value = unescape(value); + this.each(function() { + var id = $(this).attr('id'); + + var old = $(this).val().split(delimiter[id]); + + $('#'+id+'_tagsinput .tag').remove(); + str = ''; + for (i=0; i< old.length; i++) { + if (old[i]!=value) { + str = str + delimiter[id] +old[i]; + } + } + + $.fn.tagsInput.importTags(this,str); + + if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) { + var f = tags_callbacks[id]['onRemoveTag']; + f.call(this, value); + } + }); + + return false; + }; + + $.fn.tagExist = function(val) { + var id = $(this).attr('id'); + var tagslist = $(this).val().split(delimiter[id]); + return (jQuery.inArray(val, tagslist) >= 0); //true when tag exists, false when not + }; + + // clear all existing tags and import new ones from a string + $.fn.importTags = function(str) { + id = $(this).attr('id'); + $('#'+id+'_tagsinput .tag').remove(); + $.fn.tagsInput.importTags(this,str); + } + + $.fn.tagsInput = function(options) { + var settings = jQuery.extend({ + interactive:true, + defaultText:'add a tag', + minChars:0, + width:'300px', + height:'100px', + autocomplete: {selectFirst: false }, + 'hide':true, + 'delimiter':',', + 'unique':true, + removeWithBackspace:true, + placeholderColor:'#666666', + autosize: true, + comfortZone: 20, + inputPadding: 6*2 + },options); + + this.each(function() { + if (settings.hide) { + $(this).hide(); + } + var id = $(this).attr('id'); + if (!id || delimiter[$(this).attr('id')]) { + id = $(this).attr('id', 'tags' + new Date().getTime()).attr('id'); + } + + var data = jQuery.extend({ + pid:id, + real_input: '#'+id, + holder: '#'+id+'_tagsinput', + input_wrapper: '#'+id+'_addTag', + fake_input: '#'+id+'_tag' + },settings); + + delimiter[id] = data.delimiter; + + if (settings.onAddTag || settings.onRemoveTag || settings.onChange) { + tags_callbacks[id] = new Array(); + tags_callbacks[id]['onAddTag'] = settings.onAddTag; + tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag; + tags_callbacks[id]['onChange'] = settings.onChange; + } + + var markup = '
'; + + if (settings.interactive) { + markup = markup + ''; + } + + markup = markup + '
'; + + $(markup).insertAfter(this); + + $(data.holder).css('width',settings.width); + $(data.holder).css('min-height',settings.height); + $(data.holder).css('height','100%'); + + if ($(data.real_input).val()!='') { + $.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val()); + } + if (settings.interactive) { + $(data.fake_input).val($(data.fake_input).attr('data-default')); + $(data.fake_input).css('color',settings.placeholderColor); + $(data.fake_input).resetAutosize(settings); + + $(data.holder).bind('click',data,function(event) { + $(event.data.fake_input).focus(); + }); + + $(data.fake_input).bind('focus',data,function(event) { + if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) { + $(event.data.fake_input).val(''); + } + $(event.data.fake_input).css('color','#000000'); + }); + + if (settings.autocomplete_url != undefined) { + autocomplete_options = {source: settings.autocomplete_url}; + for (attrname in settings.autocomplete) { + autocomplete_options[attrname] = settings.autocomplete[attrname]; + } + + if (jQuery.Autocompleter !== undefined) { + $(data.fake_input).autocomplete(settings.autocomplete_url, settings.autocomplete); + $(data.fake_input).bind('result',data,function(event,data,formatted) { + if (data) { + $('#'+id).addTag(data[0] + "",{focus:true,unique:(settings.unique)}); + } + }); + } else if (jQuery.ui.autocomplete !== undefined) { + $(data.fake_input).autocomplete(autocomplete_options); + $(data.fake_input).bind('autocompleteselect',data,function(event,ui) { + $(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)}); + return false; + }); + } + + + } else { + // if a user tabs out of the field, create a new tag + // this is only available if autocomplete is not used. + $(data.fake_input).bind('blur',data,function(event) { + var d = $(this).attr('data-default'); + if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) { + if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) ) + $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)}); + } else { + $(event.data.fake_input).val($(event.data.fake_input).attr('data-default')); + $(event.data.fake_input).css('color',settings.placeholderColor); + } + return false; + }); + + } + // if user types a comma, create a new tag + $(data.fake_input).bind('keypress',data,function(event) { + if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) { + event.preventDefault(); + if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) ) + $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)}); + $(event.data.fake_input).resetAutosize(settings); + return false; + } else if (event.data.autosize) { + $(event.data.fake_input).doAutosize(settings); + + } + }); + //Delete last tag on backspace + data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event) + { + if(event.keyCode == 8 && $(this).val() == '') + { + event.preventDefault(); + var last_tag = $(this).closest('.tagsinput').find('.tag:last').text(); + var id = $(this).attr('id').replace(/_tag$/, ''); + last_tag = last_tag.replace(/[\s]+x$/, ''); + $('#' + id).removeTag(escape(last_tag)); + $(this).trigger('focus'); + } + }); + $(data.fake_input).blur(); + + //Removes the not_valid class when user changes the value of the fake input + if(data.unique) { + $(data.fake_input).keydown(function(event){ + if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) { + $(this).removeClass('not_valid'); + } + }); + } + } // if settings.interactive + }); + + return this; + + }; + + $.fn.tagsInput.updateTagsField = function(obj,tagslist) { + var id = $(obj).attr('id'); + $(obj).val(tagslist.join(delimiter[id])); + }; + + $.fn.tagsInput.importTags = function(obj,val) { + $(obj).val(''); + var id = $(obj).attr('id'); + var tags = val.split(delimiter[id]); + for (i=0; i[\w\-]+)/threads/create$', 'create_thread', name='create_thread'), url(r'(?P[\w\-]+)/watch$', 'watch_commentable', name='watch_commentable'), url(r'(?P[\w\-]+)/unwatch$', 'unwatch_commentable', name='unwatch_commentable'), + + url(r'search$', 'search', name='search'), ) diff --git a/lms/djangoapps/django_comment_client/base/views.py b/lms/djangoapps/django_comment_client/base/views.py index 418cf26286..0a7d9027da 100644 --- a/lms/djangoapps/django_comment_client/base/views.py +++ b/lms/djangoapps/django_comment_client/base/views.py @@ -65,7 +65,7 @@ def extract(dic, keys): @login_required @require_POST def create_thread(request, course_id, commentable_id): - attributes = extract(request.POST, ['body', 'title']) + attributes = extract(request.POST, ['body', 'title', 'tags']) attributes['user_id'] = request.user.id attributes['course_id'] = course_id response = comment_client.create_thread(commentable_id, attributes) @@ -75,7 +75,7 @@ def create_thread(request, course_id, commentable_id): @login_required @require_POST def update_thread(request, course_id, thread_id): - attributes = extract(request.POST, ['body', 'title']) + attributes = extract(request.POST, ['body', 'title', 'tags']) response = comment_client.update_thread(thread_id, attributes) return JsonResponse(response) @@ -193,7 +193,12 @@ def unfollow(request, course_id, followed_user_id): def search(request, course_id): text = request.GET.get('text', None) commentable_id = request.GET.get('commentable_id', None) - response = comment_client.search(text, commentable_id) + tags = request.GET.get('tags', None) + response = comment_client.search_threads({ + 'text': text, + 'commentable_id': commentable_id, + 'tags': tags, + }) return JsonResponse(response) @csrf.csrf_exempt diff --git a/lms/djangoapps/django_comment_client/forum/views.py b/lms/djangoapps/django_comment_client/forum/views.py index 1ba488df93..a7eb01e219 100644 --- a/lms/djangoapps/django_comment_client/forum/views.py +++ b/lms/djangoapps/django_comment_client/forum/views.py @@ -101,8 +101,21 @@ def single_thread(request, course_id, thread_id): def search(request, course_id): course = check_course(course_id) + text = request.GET.get('text', None) - threads = comment_client.search(text) + commentable_id = request.GET.get('commentable_id', None) + tags = request.GET.get('tags', None) + + print text + print commentable_id + print tags + + threads = comment_client.search_threads({ + 'text': text, + 'commentable_id': commentable_id, + 'tags': tags, + }) + context = { 'csrf': csrf(request)['csrf_token'], 'init': '', diff --git a/lms/lib/comment_client.py b/lms/lib/comment_client.py index 7725295786..40da1f2912 100644 --- a/lms/lib/comment_client.py +++ b/lms/lib/comment_client.py @@ -87,8 +87,8 @@ def unsubscribe_thread(user_id, thread_id, *args, **kwargs): def unsubscribe_commentable(user_id, commentable_id, *args, **kwargs): return unsubscribe(user_id, {'source_type': 'other', 'source_id': commentable_id}) -def search(text, commentable_id=None, *args, **kwargs): - return _perform_request('get', _url_for_search(), {'text': text, 'commentable_id': commentable_id}, *args, **kwargs) +def search_threads(attributes, *args, **kwargs): + return _perform_request('get', _url_for_search_threads(), attributes, *args, **kwargs) def _perform_request(method, url, data_or_params=None, *args, **kwargs): if method in ['post', 'put', 'patch']: @@ -127,8 +127,8 @@ def _url_for_subscription(user_id): def _url_for_user(user_id): return "{prefix}/users/{user_id}".format(prefix=PREFIX, user_id=user_id) -def _url_for_search(): - return "{prefix}/search".format(prefix=PREFIX) +def _url_for_search_threads(): + return "{prefix}/search/threads".format(prefix=PREFIX) def _url_for_threads_tags(): return "{prefix}/threads/tags".format(prefix=PREFIX) diff --git a/lms/static/coffee/src/customwmd.coffee b/lms/static/coffee/src/customwmd.coffee index 4e7330f4c2..bb22fcc7f2 100644 --- a/lms/static/coffee/src/customwmd.coffee +++ b/lms/static/coffee/src/customwmd.coffee @@ -96,18 +96,24 @@ $ -> deTilde(@blocks.join("")) + @removeMathWrapper: (_this) -> + (text) -> _this.removeMath(text) + replaceMath: (text) -> text = text.replace /@@(\d+)@@/g, ($0, $1) => @math[$1] @math = null text + @replaceMathWrapper: (_this) -> + (text) -> _this.replaceMath(text) + if Markdown? Markdown.getMathCompatibleConverter = -> converter = Markdown.getSanitizingConverter() processor = new MathJaxProcessor() - converter.hooks.chain "preConversion", processor.removeMath - converter.hooks.chain "postConversion", processor.replaceMath + converter.hooks.chain "preConversion", MathJaxProcessor.removeMathWrapper(processor)#processor.removeMath + converter.hooks.chain "postConversion", MathJaxProcessor.replaceMathWrapper(processor)#.replaceMath converter Markdown.makeWmdEditor = (elem, appended_id, imageUploadUrl) -> diff --git a/lms/static/coffee/src/discussion.coffee b/lms/static/coffee/src/discussion.coffee index 254360b468..45bd207e4c 100644 --- a/lms/static/coffee/src/discussion.coffee +++ b/lms/static/coffee/src/discussion.coffee @@ -111,6 +111,7 @@ Discussion = Discussion.handleAnchorAndReload(response) , 'json' + if id in $$user_info.subscribed_thread_ids unwatchThread = generateDiscussionLink("discussion-unwatch-thread", "Unwatch", handleUnwatchThread) $local(".info").append(unwatchThread) @@ -118,11 +119,21 @@ Discussion = watchThread = generateDiscussionLink("discussion-watch-thread", "Watch", handleWatchThread) $local(".info").append(watchThread) + $local = generateLocal(discussion) + if $$user_info? - $(discussion).find(".comment").each(initializeVote) - $(discussion).find(".thread").each(initializeVote).each(initializeWatchThreads) + $local(".comment").each(initializeVote) + $local(".thread").each(initializeVote).each(initializeWatchThreads) initializeWatchDiscussion(discussion) + if $$tags? + $local(".new-post-tags").tagsInput + autocomplete: $$tags + interactive: true + defaultText: "add a tag" + height: "30px" + removeWithBackspace: true + bindContentEvents: (content) -> $content = $(content) @@ -255,8 +266,9 @@ Discussion = handleSubmitNewThread = (elem) -> title = $local(".new-post-title").val() body = $local("#wmd-input-new-post-body-#{id}").val() + tags = $local(".new-post-tags").val() url = Discussion.urlFor('create_thread', $local(".new-post-form").attr("_id")) - $.post url, {title: title, body: body}, (response, textStatus) -> + $.post url, {title: title, body: body, tags: tags}, (response, textStatus) -> if textStatus == "success" Discussion.handleAnchorAndReload(response) , 'json' diff --git a/lms/static/css/vendor/jquery.tagsinput.css b/lms/static/css/vendor/jquery.tagsinput.css new file mode 100644 index 0000000000..c595e249f9 --- /dev/null +++ b/lms/static/css/vendor/jquery.tagsinput.css @@ -0,0 +1,7 @@ +div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;} +div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;} +div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; } +div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; } +div.tagsinput div { display:block; float: left; } +.tags_clear { clear: both; width: 100%; height: 0px; } +.not_valid {background: #FBD8DB !important; color: #90111A !important;} diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 84414f33ef..381169e34f 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -109,6 +109,9 @@ $discussion_input_width: 60%; margin-top: 10px; font-weight: bold; } + .tagsinput { + margin-top: 20px; + } } .thread { //display: none; @@ -127,6 +130,20 @@ $discussion_input_width: 60%; margin-top: 7px; margin-bottom: 2px; } + .thread-tags { + .thread-tag { + @include discussion-font; + border-right: 3px solid #205C85; + padding-right: 5px; + margin-right: 5px; + border-radius: 15px; + color: #205C85; + &:hover { + color: #3CC5E7; + border-right: 3px solid #3CC5E7; + } + } + } .info { @include discussion-font; font-size: $comment_info_size; diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html index 969cbec3cd..57fc69e9f9 100644 --- a/lms/templates/discussion/index.html +++ b/lms/templates/discussion/index.html @@ -32,6 +32,8 @@ + + <%include file="../course_navigation.html" args="active_page='discussion'" /> diff --git a/lms/templates/discussion/inline.html b/lms/templates/discussion/inline.html index 520e560ecd..e7b3808bad 100644 --- a/lms/templates/discussion/inline.html +++ b/lms/templates/discussion/inline.html @@ -9,7 +9,7 @@
- + New Post
diff --git a/lms/templates/discussion/thread.html b/lms/templates/discussion/thread.html index aea79a120f..33ebe1f71d 100644 --- a/lms/templates/discussion/thread.html +++ b/lms/templates/discussion/thread.html @@ -1,6 +1,9 @@ <%! from django.core.urlresolvers import reverse %> <%! from datehelper import time_ago_in_words %> <%! from dateutil.parser import parse %> +<%! import urllib %> + + <%def name="render_thread(course_id, thread, edit_thread=False, show_comments=False)"> <% @@ -9,6 +12,8 @@ else: thread_id = thread['id'] url_for_thread = reverse('django_comment_client.forum.views.single_thread', args=[course_id, thread_id]) + def url_for_tags(tags): + return reverse('django_comment_client.forum.views.search', args=[course_id]) + '?' + urllib.urlencode({'tags': ",".join(tags)}) %>
@@ -18,6 +23,11 @@ ${thread['title'] | h}
${thread['body'] | h}
+
+ % for tag in thread['tags']: + ${tag} + % endfor +
${render_info(thread)} % if edit_thread: