Commit e95cc0da authored by Ale's avatar Ale

feat: Update map behavior

parent 11f0d870
......@@ -4,16 +4,23 @@ from rest_framework import serializers
from apps.map import models
class TestimonyCategorySerializer(serializers.ModelSerializer):
class Meta:
model = models.TestimonyCategory
fields = ( 'name', )
class TestimonySerializer(serializers.ModelSerializer):
position = serializers.JSONField()
position = serializers.JSONField()
category = TestimonyCategorySerializer()
class Meta:
model = models.Testimony
fields = (
'position',
'summary',
'pk',
'creation_date',
'name',
'link',
'image',
'position',
'category'
)
......@@ -169,7 +169,7 @@ const init_map = function(items)
if(items){
const markers = items.map(i => {
let classes = `item-${i.pk}`;
i.terms.forEach( term => { classes += ` ${term}` });
i.terms.forEach( term => { classes += ` ${ slugify(term).toLowerCase() }` });
return L.marker( i.latlon, {
icon : L.icon({
iconUrl : `/static/site/img/marker.svg`,
......@@ -206,11 +206,9 @@ const init_timeline = function(items)
var item = document.createElement('div');
item.classList.add( `item-${i.pk}`);
item.classList.add('timeline-item');
item.innerHTML = [
`<img class="timeline-item__img" src="${ i.img }" />`,
`<h3 class="timeline-item__name">${ i.name }</h3>`,
`<p class="timeline-item__date">${ i.date }</p>`,
].join("");
item.innerHTML = i.img ? `<img class="timeline-item__img" src="${ i.img }" />` : '';
item.innerHTML += `<h3 class="timeline-item__name">${ i.name }</h3>`;
item.innerHTML += `<p class="timeline-item__date">${ i.date }</p>`;
item.addEventListener('click', ()=>{ select_item(i.pk) });
timeline.appendChild( item );
} );
......@@ -229,8 +227,9 @@ const init_legend = function(items)
// If already created push only new terms into the category
if(cat in categories){
terms.forEach(term => {
if( !term in categories[cat].terms )
if( !(term in categories[cat].terms) ){
categories[cat].terms[term] = true;
}
});
// Else push all item terms into the category
} else {
......@@ -239,6 +238,7 @@ const init_legend = function(items)
};
terms.forEach(term => {
categories[cat].terms[term] = true;
console.log(categories);
});
}
categories[cat].selected = Object.keys(categories[cat].terms).length;
......@@ -249,15 +249,15 @@ const init_legend = function(items)
for(const cat in categories){
// Create menu items
let terms = '';
for(const term in categories[cat].terms){
var sorted = Object.keys( categories[cat].terms ).sort();
sorted.forEach( function(term){
terms += `\
<li class="legend-category__item on" data-id="${term}">\
${ term_name(term) }\
<li class="legend-category__item on" data-id="${ slugify(term.toLowerCase() ) }">\
${ term }\
</li>`;
};
});
var category_node = `\
<div class="legend-category">\
<h5 class="legend-category__label">${cat}</h5>\
<ul class="legend-category__items" data-cat="${cat}">\
${terms}\
<li class="legend-category__unfilter" data-action="remove_filters">\
......@@ -279,7 +279,12 @@ const init_legend = function(items)
i.classList.add('on');
})
categories[category].selected = category_terms.length;
check_items();
document.querySelectorAll('.leaflet-marker-icon').forEach( i => {
i.classList.remove('hidden');
})
document.querySelectorAll('.timeline-item').forEach( i => {
i.classList.remove('hidden');
})
};
if(item.dataset.id)
{
......@@ -328,7 +333,8 @@ const check_items = function()
for(const category in categories){
var is_visible = false;
item_displays.forEach( d => { d.classList.remove('hidden') });
Object.keys(categories[category].terms).forEach(id => {
Object.keys(categories[category].terms).forEach(id =>
{
if( categories[category].terms[id] && item.terms.includes(id) ){
is_visible = true;
return;
......@@ -342,6 +348,23 @@ const check_items = function()
});
}
/**
* Sets data items in proper format
* @param {Array} items - Array with data to set items
*/
const create_items = function(items)
{
return items.map(i =>({
pk : i.pk,
name : i.name,
cats : { 'category' : [ i.category.name ] },
terms : [ slugify(i.category.name.toLowerCase()) ],
date : i.creation_date,
latlon : i.position.coordinates.reverse(),
}));
}
/**
* Loads data from a remote endpoint
* @param {String} endpoint - URL of and endpoint that serves JSON data with the items array to be imported
......@@ -351,12 +374,14 @@ const load_data = function(endpoint)
let items = [];
if(endpoint){
fetch(enpoint)
fetch(endpoint)
.then( response => response.json() )
.then( data => {
items = create_items(data);
items_lookup = items;
init_map( items );
init_timeline( items );
init_legend( items );
});
} else {
const items_size = 20;
......@@ -388,5 +413,5 @@ const load_data = function(endpoint)
}
window.onload = ()=>{
load_data();
load_data('/api/1.0/testimonies/');
};
This diff is collapsed.
......@@ -14,7 +14,7 @@
version="1.1"
id="svg6"
sodipodi:docname="marker.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
inkscape:version="0.92.5 (0.92.5+68)"
style="fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round">
<metadata
id="metadata12">
......@@ -39,14 +39,14 @@
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="740"
inkscape:window-width="1920"
inkscape:window-height="1053"
id="namedview8"
showgrid="false"
inkscape:zoom="6.9532167"
inkscape:cx="30.952288"
inkscape:cx="6.5031722"
inkscape:cy="23.283186"
inkscape:window-x="1920"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg6"
......@@ -72,10 +72,4 @@
style="fill:#0b0709;fill-opacity:1;stroke:none;stroke-width:4.36441088;stroke-opacity:1"
d="M 19.542969 0 C 8.9444722 0.23662646 0.35942731 8.908597 0.359375 19.634766 C 0.359375 34.910203 20 48.003906 20 48.003906 C 20 48.003906 39.640625 34.910203 39.640625 19.634766 C 39.640574 9.012072 31.194305 0.31511787 20.576172 0.00390625 C 20.230315 -0.0062306247 19.884856 -0.0076331117 19.542969 0 z M 20 5.1425781 A 11.793103 11.793103 0 0 1 31.792969 16.935547 A 11.793103 11.793103 0 0 1 20 28.728516 A 11.793103 11.793103 0 0 1 8.2070312 16.935547 A 11.793103 11.793103 0 0 1 20 5.1425781 z "
id="path2" />
<path
inkscape:connector-curvature="0"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4.36441088;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
d="m 20,5.1425781 c 6.513046,7.4e-5 11.792895,5.2799229 11.792969,11.7929689 C 31.792895,23.448593 26.513046,28.728442 20,28.728516 13.486954,28.728442 8.207105,23.448593 8.207031,16.935547 8.207105,10.422501 13.486954,5.1426521 20,5.1425781 Z"
id="path2-3"
sodipodi:nodetypes="ccccc" />
</svg>
.legend
position: absolute
font-family: $font_text
+breakpoint('sm')
position: fixed
z-index: 120000
width: $m*10
width: $m*15
top: $m
right: $m
background: white
padding: $m
font-size: 1.6rem
.legend__label
font-size: 1.6rem
margin-top: 0
text-transform: uppercase
color: $red
.legend-category__items li:hover
cursor: pointer
......@@ -18,11 +23,30 @@
.legend-category__item
opacity: .5
transition: opacity .2s ease
color: #333
&.on
opacity: 1
.legend-category__unfilter
margin-top: $m/2
margin-top: $m
font-size: 1.4rem
text-transform: uppercase
color: #555
text-align: center
&:before
content: "🞨"
margin-right: $m/4
.legend-category__item:before
content: "\25CF"
font-size: 2rem
line-height: 1em
position: relative
top: -1px
margin-right: $m/2
$cats: 'cultura', 'espacio-publico', 'feminismos', 'infancia', 'medioambiente', 'memoria', 'migraciones', 'movilidad', 'seguridad', 'trabajo', 'turismo', 'vivienda'
@for $i from 1 through length($cats)
$cat: nth($cats, $i)
.legend-category__item[data-id="#{$cat}"]:before
color: hsl( $i*30, 75, 50)
......@@ -34,3 +34,28 @@
#map .leaflet-marker-shadow.hidden
display: none !important
.leaflet-marker-icon.cultura
filter: invert(55%) sepia(53%) saturate(920%) hue-rotate(349deg) brightness(93%) contrast(87%)
.leaflet-marker-icon.espacio-publico
filter: invert(90%) sepia(43%) saturate(802%) hue-rotate(0deg) brightness(86%) contrast(105%)
.leaflet-marker-icon.feminismos
filter: invert(97%) sepia(83%) saturate(5721%) hue-rotate(28deg) brightness(94%) contrast(86%)
.leaflet-marker-icon.infancia
filter: invert(77%) sepia(47%) saturate(6032%) hue-rotate(76deg) brightness(109%) contrast(93%)
.leaflet-marker-icon.medioambiente
filter: invert(91%) sepia(29%) saturate(4609%) hue-rotate(79deg) brightness(93%) contrast(82%)
.leaflet-marker-icon.memoria
filter: invert(95%) sepia(80%) saturate(3300%) hue-rotate(117deg) brightness(93%) contrast(86%)
.leaflet-marker-icon.migraciones
filter: invert(38%) sepia(63%) saturate(2525%) hue-rotate(193deg) brightness(94%) contrast(85%)
.leaflet-marker-icon.movilidad
filter: invert(12%) sepia(61%) saturate(7436%) hue-rotate(240deg) brightness(97%) contrast(100%)
.leaflet-marker-icon.seguridad
filter: invert(17%) sepia(96%) saturate(4091%) hue-rotate(268deg) brightness(88%) contrast(99%)
.leaflet-marker-icon.trabajo
filter: invert(29%) sepia(58%) saturate(4935%) hue-rotate(285deg) brightness(94%) contrast(109%)
.leaflet-marker-icon.turismo
filter: invert(29%) sepia(89%) saturate(7135%) hue-rotate(319deg) brightness(95%) contrast(84%)
.leaflet-marker-icon.vivienda
filter: invert(24%) sepia(90%) saturate(5968%) hue-rotate(355deg) brightness(93%) contrast(84%)
......@@ -2,7 +2,7 @@
.timeline-wrapper
max-height: calc(100vh - #{ $height_header } - #{ $m*2 })
border-top: 4px solid #eee
border-top: 4px dashed $red
overflow-y: auto
padding: $m
.timeline-item
......
asgiref==3.2.10
certifi==2020.6.20
chardet==3.0.4
Django==2.2.16
django-admin-sortable==2.2.3
django-appconf==1.0.4
django-ckeditor==6.0.0
django-geojson==3.0.0
django-imagekit==4.0.2
django-js-asset==1.2.2
django-leaflet==0.27.1
djangorestframework==3.12.1
idna==2.10
jsonfield==3.0.0
pilkit==2.0
Pillow==7.2.0
pkg-resources==0.0.0
python-magic==0.4.18
pytz==2020.1
requests==2.24.0
six==1.15.0
sqlparse==0.3.1
urllib3==1.25.10
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