diff --git a/fet2020/fet2020/settings.py b/fet2020/fet2020/settings.py index 5aefc40f..32a163da 100644 --- a/fet2020/fet2020/settings.py +++ b/fet2020/fet2020/settings.py @@ -43,7 +43,8 @@ INSTALLED_APPS = [ 'ckeditor', 'ckeditor_uploader', 'rest_framework', - 'django_filters' + 'django_filters', + 'django_static_jquery_ui', ] MIDDLEWARE = [ @@ -158,4 +159,4 @@ CKEDITOR_CONFIGS = { ], } -} \ No newline at end of file +} diff --git a/fet2020/posts/admin.py b/fet2020/posts/admin.py index 65e08ea2..4052a27c 100644 --- a/fet2020/posts/admin.py +++ b/fet2020/posts/admin.py @@ -11,4 +11,16 @@ class MyPostAdmin(admin.ModelAdmin): def save_model(self, request, obj, form, change): obj.author = request.user super().save_model(request, obj, form, change) -admin.site.register(Post,MyPostAdmin) \ No newline at end of file + + class Media: + css = { + "all": [ + "jquery-ui/jquery-ui.min.css", + "jquery-ui/ui-lightness/theme.css", + ] + } + js = [ + "jquery-ui/jquery-ui.min.js", + ] + +admin.site.register(Post,MyPostAdmin) diff --git a/fet2020/posts/forms.py b/fet2020/posts/forms.py index 81ae8c2c..e7e90b54 100644 --- a/fet2020/posts/forms.py +++ b/fet2020/posts/forms.py @@ -12,5 +12,6 @@ class MyPostForm(forms.ModelForm): class Media: js = ( - 'js/auto_slug.js', # inside app static folder + 'js/auto_slug.js', # automatic slag completion ajax + 'js/tag_completion.js', ) diff --git a/fet2020/posts/static/js/tag_completion.js b/fet2020/posts/static/js/tag_completion.js new file mode 100644 index 00000000..927fd2ae --- /dev/null +++ b/fet2020/posts/static/js/tag_completion.js @@ -0,0 +1,59 @@ +window.addEventListener("load", function() { +(function($) { + + function split( val ) { + return val.split( /,\s*/ ); + } + + function extractLast( term ) { + return split( term ).pop(); + } + + getUrl = window.location; + baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[0]; + remoteUrl = baseUrl + 'posts/func/tag_complete'; + + $( "input#id_tags" ) + // don't navigate away from the field on tab when selecting an item + .on( "keydown", function( event ) { + if ( event.keyCode === $.ui.keyCode.TAB && + $( this ).autocomplete( "instance" ).menu.active ) { + event.preventDefault(); + } + }) + .autocomplete({ + + source: function( request, response ) { + $.getJSON( remoteUrl, { + term: extractLast( request.term ) + }, response ); + }, + + search: function() { + // custom minLength + var term = extractLast( this.value ); + if ( term.length < 2 ) { + return false; + } + }, + + focus: function() { + // prevent value inserted on focus + return false; + }, + + select: function( event, ui ) { + var terms = split( this.value ); + // remove the current input + terms.pop(); + // add the selected item + terms.push( ui.item.value ); + // add placeholder to get the comma-and-space at the end + terms.push( "" ); + this.value = terms.join( ", " ); + return false; + } + }); + +})(django.jQuery); +}); diff --git a/fet2020/posts/urls.py b/fet2020/posts/urls.py index 89ac45d7..446627e5 100644 --- a/fet2020/posts/urls.py +++ b/fet2020/posts/urls.py @@ -1,6 +1,7 @@ from django.urls import path from . import views urlpatterns=[ + path('func/tag_complete', views.tag_complete), path('func/slug_calc', views.slug_calc), path('t/',views.tags,name='posts.tags'), path('',views.index,name='posts.index'), diff --git a/fet2020/posts/views.py b/fet2020/posts/views.py index f135e463..abe325ae 100644 --- a/fet2020/posts/views.py +++ b/fet2020/posts/views.py @@ -12,6 +12,7 @@ from django.core.cache import cache from django.utils.text import slugify from django.utils import timezone +from django.http import JsonResponse def get_next_dict(): posts=Post.news_objects.order_by('-public_date').values('slug') @@ -60,6 +61,23 @@ def slug_calc(request): return HttpResponseServerError("Requires a title field.") +# Ajax function that returns autocomplete suggestions for a given tag input +def tag_complete(request): + + if request.method == "GET": + get = request.GET.copy() + term = get['term'] + + tag_objects = Tag.objects.filter(name__istartswith=term) + + tag_array =[] + for elem in tag_objects: + tag_array.append(elem.name) + + return JsonResponse(tag_array, safe=False) + + return HttpResponseServerError("Requires a term field.") + class PostViewSet(viewsets.ModelViewSet): """ API endpoint that allows users to be viewed or edited. diff --git a/fet2020/requirements.txt b/fet2020/requirements.txt index 4da16394..c782ac3f 100644 --- a/fet2020/requirements.txt +++ b/fet2020/requirements.txt @@ -2,4 +2,5 @@ django django-taggit django-ckeditor Pillow -djangorestframework \ No newline at end of file +djangorestframework +django-static-jquery-ui