bumped Django version to 3.2, fixed line filtering, fixed issue with text formatting. Had to remove footnotes

Author: ddunc23

memorymap_toolkit/settings/base.py

@@ -149,6 +149,7 @@
 
 FORM_RENDERER = 'django.forms.renderers.TemplatesSetting'
 
+DEFAULT_AUTO_FIELD = 'django.db.models.AutoField'
 
 ### App-Specific Settings ###
 
@@ -168,7 +169,7 @@
             ['Image', 'Table', 'HorizontalRule', 'SpecialChar', 'Iframe'],
             ['RemoveFormat', 'Source']
         ]
-    },
+    }
 }
 
 # Easy Thumbnails

mmt_api/serializers.py

@@ -44,7 +44,7 @@ class DocumentSerializer(serializers.ModelSerializer):
 	attachment_type = serializers.CharField(source='get_type', read_only=True)
 	class Meta:
 		model = Document
-		fields = ('attachment_type', 'title', 'body_processed', 'order', 'slug')
+		fields = ('attachment_type', 'title', 'body_processed', 'order', 'slug', 'body')
 
 class ImageSerializer(serializers.ModelSerializer):
 	attachment_type = serializers.CharField(source='get_type', read_only=True)

mmt_map/models.py

@@ -191,13 +191,16 @@ class Document(AbstractAttachment):
 	def save(self, *args, **kwargs):
 		"""Sanitize html input from users and add footnotes"""
 		# Clean the html
-		self.body = bleach.clean(self.body, tags=['p', 'b', 'strong', 'em', 'img', 'a', 'blockquote', 'i', 'li', 'ul', 'ol', 'h2', 'h3', 'h4', 'br', 'hr', 'iframe'], attributes={'img': ['alt', 'src', 'style'], 'a': ['href', 'target'], 'iframe': ['width', 'height', 'src', 'allow', 'frameborder']}, styles=['width', 'height'])
-		# Convert HTML to Markdown so you can run the footnote filter on it, then save as self.body_processed, which is what gets displayed on the site
-		h = html2text.HTML2Text()
-		h.ignore_images = False
-		h.unicode_snob = True
-		body_markdown = h.handle(self.body)
-		self.body_processed = markdown.markdown(body_markdown, extensions=['markdown.extensions.footnotes'])
+		self.body = bleach.clean(self.body, tags=['p', 'b', 'strong', 'em', 'img', 'a', 'blockquote', 'i', 'li', 'ul', 'ol', 'h2', 'h3', 'h4', 'br', 'hr', 'iframe', 'u'], attributes={'img': ['alt', 'src', 'style'], 'a': ['href', 'target'], 'iframe': ['width', 'height', 'src', 'allow', 'frameborder']}, styles=['width', 'height'])
+		
+		## Todo: Footnotes filter -- disabled to enable bold and italics and underlines. Needs to be re-written and reactivated.
+		
+		# Convert HTML to Markdown so you can run the footnote filter on it, then save as self.body_processed, which is what gets displayed on the site.
+		#h = html2text.HTML2Text()
+		#h.ignore_images = False
+		#h.unicode_snob = True
+		# body_markdown = h.handle(self.body)
+		# self.body_processed = markdown.markdown(body_markdown, extensions=['markdown.extensions.footnotes'])
 		super(Document, self).save(*args, **kwargs)
 
 

project_static/js/filters.js

@@ -10,6 +10,8 @@ $('.theme').click(function(e) {
         map.setFilter('points', ['==', ['get', 'theme_id'], key]);
         map.setFilter('points_labels', ['==', ['get', 'theme_id'], key]);
         map.setFilter('polygon_labels', ['==', ['get', 'theme_id'], key]);
+        map.setFilter('lines', ['==', ['get', 'theme_id'], key]);
+        map.setFilter('line_labels', ['==', ['get', 'theme_id'], key]);
 
         $('.theme').each(function() {
             var color = $(this).data('color');
@@ -27,6 +29,8 @@ $('.theme').click(function(e) {
         map.setFilter('points');
         map.setFilter('points_labels');
         map.setFilter('polygon_labels');
+        map.setFilter('lines');
+        map.setFilter('line_labels');
         $('.theme').each(function() {
             let color = $(this).data('color');
             $(this).css('background-color', 'transparent');
@@ -46,11 +50,15 @@ $('.tag').click(function(e) {
         map.setFilter('points', ['in', tag, ['get', 'tag_str']]);
         map.setFilter('points_labels', tag, ['in', ['get', 'tag_str']]);
         map.setFilter('polygon_labels', ['in', tag, ['get', 'tag_str']]);
+        map.setFilter('line_labels', ['in', tag, ['get', 'tag_str']]);
+        map.setFilter('lines', ['in', tag, ['get', 'tag_str']]);
     } else {
         map.setFilter('polygons');
         map.setFilter('polygon_outlines');
         map.setFilter('points');
         map.setFilter('points_labels');
         map.setFilter('polygon_labels');
+        map.setFilter('lines');
+        map.setFilter('line_labels');
     }
 })

project_static/js/interactionHandler.js

@@ -56,7 +56,11 @@ MmtMap.clickInteractions = {
 	    className: 'detail_popup'
 	}),
 
-	pageHeaderHtmlTemplate: '<div class="feature_detail shadow col-12"><br /><button type="button" class="close close_feature" aria-label="Close"><span aria-hidden="true">&times;</span></button><div class="row"><div class="col-xs-12 col-sm-8 col-lg-6" style="margin: auto"><br /><img src="<%= banner %>" alt="Photo of <%= feature_name %>" class="feature_banner img-fluid" /><p class="small"><em><%= banner_copyright %></em></p><h2><%= feature_name %></h2><br /><article>',
+	pageHeaderHtmlTemplate: '<div class="feature_detail shadow col-12"><br /><button type="button" class="close close_feature" aria-label="Close"><span aria-hidden="true">&times;</span></button><div class="row"><div class="col-xs-12 col-sm-8 col-lg-6" style="margin: auto"><br />',
+
+	headerTitleHmtlTemplate: '<article><h2><%= feature_name %></h2><br />',
+
+	headerImageHtmlTemplate: '<img src="<%= banner %>" alt="Photo of <%= feature_name %>" class="feature_banner img-fluid" /><p class="small"><em><%= banner_copyright %></em></p>',
 
 	documentHtmlTemplate: '<%= document_body %><hr /><br />',
 
@@ -77,7 +81,7 @@ MmtMap.clickInteractions = {
 	        }
 	    };
 
-	    let url = '/api/1.0/features/' + sourceLayer + '/' + id + '/attachments/';
+	    const url = '/api/1.0/features/' + sourceLayer + '/' + id + '/attachments/';
 
 		// Then get the data for the page and display it as an overlay to the map
 	    $.get(url, function(data) {
@@ -88,13 +92,28 @@ MmtMap.clickInteractions = {
 
 	        // Once you have the data, compile the HTML fragments
 
-	        var pageHeader = _.template(MmtMap.clickInteractions.pageHeaderHtmlTemplate);
+	        const pageHeader = _.template(MmtMap.clickInteractions.pageHeaderHtmlTemplate);
+			const pageTitle = _.template(MmtMap.clickInteractions.headerTitleHmtlTemplate);
 
-	        page = pageHeader({
-	            banner: data.properties.banner_image,
-	            feature_name: data.properties.name,
-	            banner_copyright: data.properties.banner_image_copyright
-	        });
+	        let page = pageHeader();
+
+			if (data.properties.banner_image) {
+				
+				const headerImgTemplate = _.template(MmtMap.clickInteractions.headerImageHtmlTemplate);
+				const headerImg = headerImgTemplate({
+					banner: data.properties.banner_image,
+					banner_copyright: data.properties.banner_image_copyright,
+					feature_name: data.properties.name
+				})
+
+				page = page + headerImg;
+			}
+
+			let title = pageTitle({
+				feature_name: data.properties.name
+			});
+
+			page = page + title;
 
 	        if (data.properties.popup_audio_file != null) {
 	            var popupAudio = _.template(MmtMap.clickInteractions.audioFileHtmlTemplate);
@@ -115,7 +134,7 @@ MmtMap.clickInteractions = {
 	                case 'document':
 	                    var doc = _.template(MmtMap.clickInteractions.documentHtmlTemplate);
 	                    doc = doc({
-	                        document_body: attachment.body_processed
+	                        document_body: attachment.body
 	                    });
 	                    page = page + doc;
 	                    break;
@@ -222,8 +241,6 @@ MmtMap.clickInteractions = {
 	clickFeature: function(source, sourceLayer, feature, id, coords) {
 		// Loads the feature from the server and adds a large click popup with an audio player (if there is an audio file related to it)
 
-
-
 		$.get('api/1.0/features/' + sourceLayer + '/' + id, function(data) {
 	        // Construct the HTML for the popup and add it to the map
 	        let popupPlayerId = undefined;

requirements.txt

@@ -1,31 +1,33 @@
-asgiref==3.2.10
+asgiref==3.6.0
 bleach==3.3.0
 certifi==2022.12.7
 chardet==3.0.4
 charset-normalizer==2.1.1
 coreapi==2.3.3
 coreschema==0.0.4
 coverage==5.1
-Django==3.1.13
+cssselect2==0.7.0
+Django==3.2.18
 django-analytical==2.6.0
-django-ckeditor==5.9.0
+django-ckeditor==6.5.1
 django-colorful==1.3
-django-constance==2.6.0
+django-constance==2.9.0
 django-debug-toolbar==2.2.1
-django-filer==2.0.2
+django-filer==2.1
 django-filter==2.2.0
-django-js-asset==1.2.2
+django-js-asset==2.0.0
 django-mptt==0.11.0
 django-picklefield==3.0.1
 django-polymorphic==3.0.0
 django-taggit==1.3.0
 djangorestframework==3.11.2
 djangorestframework-gis==0.15
-easy-thumbnails==2.7
+easy-thumbnails==2.8.5
 html2text==2020.1.16
 idna==2.9
 itypes==1.2.0
 Jinja2==2.11.3
+lxml==4.9.2
 Markdown==3.2.2
 MarkupSafe==1.1.1
 packaging==20.4
@@ -34,9 +36,12 @@ psycopg2==2.8.5
 pyparsing==2.4.7
 python-memcached==1.59
 pytz==2020.1
+reportlab==3.6.12
 requests==2.28.1
 six==1.15.0
 sqlparse==0.3.1
+svglib==1.5.1
+tinycss2==1.2.1
 Unidecode==1.1.1
 Unipath==1.1
 uritemplate==3.0.1

templates/mmt_map/forms/widgets/mapboxgl_widget.html

@@ -160,6 +160,28 @@
         },
         'filter': ['!=', ['get', 'name'], name]
     });
+
+    map.addLayer({
+        'id': 'lines',
+        'source': 'interactive',
+        'source-layer': 'lines',
+        'type': 'line',
+        'paint': {
+            'line-color': '#c1c1c1',
+            'line-width': ["interpolate", ["linear"], ["zoom"], 
+                14, 1, 
+                19, 4
+            ],
+            'line-opacity': ["interpolate", ["linear"], ["zoom"], 
+                14, 0.3, 
+                19, 1
+            ]
+        },
+        'layout': {
+            'line-cap': 'round'
+        },
+        'filter': ['!=', ['get', 'name'], name]
+    });
 
 });