Dismiss reading goal using localstorage

bookwyrm/static/js/shared.js

@@ -21,11 +21,38 @@ window.onload = function() {
     // handle aria settings on menus
     Array.from(document.getElementsByClassName('pulldown-menu'))
         .forEach(t => t.onclick = toggleMenu);
+
+    // display based on localstorage vars
+    document.querySelectorAll('[data-hide]')
+        .forEach(t => setDisplay(t));
+
+    // update localstorage
+    Array.from(document.getElementsByClassName('set-display'))
+        .forEach(t => t.onclick = updateDisplay);
 };
 
+function updateDisplay(e) {
+    var key = e.target.getAttribute('data-id');
+    var value = e.target.getAttribute('data-value');
+    window.localStorage.setItem(key, value);
+
+    document.querySelectorAll('[data-hide="' + key + '"]')
+        .forEach(t => setDisplay(t));
+}
+
+function setDisplay(el) {
+    var key = el.getAttribute('data-hide');
+    var value = window.localStorage.getItem(key)
+    if (!value) {
+        el.className = el.className.replace('hidden', '');
+    } else if (value != null && !!value) {
+        el.className += ' hidden';
+    }
+}
+
 function toggleAction(e) {
     // set hover, if appropriate
-    var hover = e.target.getAttribute('data-hover-target')
+    var hover = e.target.getAttribute('data-hover-target');
     if (hover) {
         document.getElementById(hover).focus();
     }

bookwyrm/templates/feed.html

@@ -95,8 +95,8 @@
 
         {# announcements and system messages #}
         {% if not goal and tab == 'home' %}
-        <section class="block" aria-title="Announcements">
-            {% now 'Y' as year %}
+        {% now 'Y' as year %}
+        <section class="block hidden" aria-title="Announcements" data-hide="hide-{{ year }}-reading-goal">
             <article class="card">
                 <header class="card-header">
                     <h3 class="card-header-title has-background-primary has-text-white">
@@ -110,14 +110,14 @@
                 </section>
                 <footer class="card-footer has-background-white-bis">
                     <div class="card-footer-item is-flex-direction-column">
-                        <button class="button is-danger is-light is-block">Dismiss message</button>
+                        <button class="button is-danger is-light is-block set-display" data-id="hide-{{ year }}-reading-goal" data-value="true">Dismiss message</button>
                         <p class="help">You can set or change your reading goal any time from your <a href="{{ request.user.local_path }}">profile page</a></p>
                     </div>
                 </footer>
             </article>
+            <hr>
         </section>
         {% endif %}
-        <hr>
 
         {# activity feed #}
         {% if not activities %}

bookwyrm/templates/snippets/start_reading_modal.html

@@ -20,8 +20,8 @@
                 <footer class="modal-card-foot">
                     <div class="columns">
                         <div class="column field">
-                            <label for="post_status-{{ uuid }}">
-                                <input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
+                            <label for="post_status_start-{{ uuid }}">
+                                <input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
                                 Post to feed
                             </label>
                             {% include 'snippets/privacy_select.html' %}