Merge pull request 'Sort films on film page' (#36) from sort-films into main

Reviewed-on: 0x2620/aab21#36

app/static/css/partials/_film.scss

@@ -6,8 +6,15 @@
     color: #ee0;
     text-decoration: none;
   }
+
+  select {
+    font-size: 18px;
+    font-family: "noto_sans", sans-serif;
+    padding: calc(var(--spacing) /4) var(--spacing);
+  }
+
   .film {
-    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-2);
     h1 {
       font-weight: bold;
       font-size: 20px;

app/static/js/films.js

@@ -0,0 +1,22 @@
+function selectChanged() {
+    const sortValue = document.getElementById('sort-select').value
+    const $films = [...document.querySelectorAll('.film')]
+    location.hash = sortValue
+    $films.sort((a, b) => {
+        const aVal = a.dataset[sortValue]
+        const bVal = b.dataset[sortValue]
+        return aVal < bVal ? -1 : 1
+    })
+    document.getElementById('films-list').innerHTML = ''
+    $films.forEach($film => {
+        document.getElementById('films-list').appendChild($film)
+    })
+}
+
+document.getElementById('sort-select').addEventListener('change', selectChanged)
+
+const locationHash = location.hash.replace('#', '')
+if (locationHash !== '') {
+    document.getElementById('sort-select').value = locationHash
+    selectChanged()
+}

app/templates/films.html

@@ -1,9 +1,29 @@
 {% extends "base.html" %}
 {% block body_class%}animated animated-text{% endblock %}
 {% block main %}
+
 <div class="films">
-{% for film in films %}
-	<div class="film">
+	<div>
+		<strong>Sort:</strong>
+		<select id="sort-select">
+			<option value="position" selected>Default</option>
+			<option value="title">Title</option>
+			<option value="duration">Duration</option>
+			<option value="hue">Hue</option>
+			<option value="saturation">Saturation</option>
+			<option value="lightness">Lightness</option>
+		</select>
+	</div>
+	<div id="films-list">
+	{% for film in films %}
+		<div class="film"
+			data-position="{{ film.position }}"
+			data-title="{{ film.data.title }}"
+			data-duration="{{ film.data.duration }}"
+			data-hue="{{ film.data.hue }}"
+			data-saturation="{{ film.data.saturation }}"
+			data-lightness="{{ film.data.lightness }}"
+		>
 			<h1><a href="{{ film.get_absolute_url }}">
 				<span>{{ film.data.title | safe }}</span>
 				<span>{{ film.data.title_zh | safe }}</span>
@@ -14,6 +34,11 @@
 				{% endfor %}
 			</h2>
 		</div>
-{% endfor %}
+	{% endfor %}
+	</div>
 </div>
 {% endblock %}
+
+{% block end %}
+	<script src="{% static 'js/films.js' %}"></script>
+{% endblock %}