Merge pull request #432 from navascogt/issue#378

feat: Citas aleatorias en página de inicio

Author: sdelquin

apps/homepage/static/homepage/js/main.js

@@ -0,0 +1,7 @@
+import RandomQuote from './random-quotes'
+
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  RandomQuote.init()
+})

apps/homepage/static/homepage/js/random-quotes/index.js

@@ -0,0 +1,37 @@
+function init() {
+  getRandomQuote();
+
+  // Change quote every RANDOM_QUOTE_INTERVAL
+  setInterval(function() { getRandomQuote(); }, random_quote_interval);
+
+  function getRandomQuote() {
+    // Get the text and author span id
+    let text = document.getElementById("quote-text");
+    let author = document.getElementById("quote-author");
+    // Load random quote and convert to JSON
+    fetch(quotes_api_url)
+      .then(response => response.json())
+      .then(data => {
+        text.textContent = data.result.text
+        author.textContent = data.result.author
+      })
+    // Animate display
+    let quote_block = document.getElementById("quote-block");
+    fadeInQuote(quote_block)
+  }
+}
+
+function fadeInQuote(quote, duration=2000) {
+  quote.animate([
+    { // from
+      opacity: 0,
+    },
+    { // to
+      opacity: 1,
+    }
+  ], duration);
+}
+
+export default {
+  init
+}

apps/homepage/templates/homepage/index.html

@@ -37,12 +37,18 @@
 
         <img class="logo" src="{{ assets|get_asset_key:'commons/img/logo_text.png' }}" alt="Python Canarias" />
 
-      {% if quote %}
-        <div class="quote is-centered">
-          <p><i class="fas fa-quote-left"></i> {{ quote.text }} <i class="fas fa-quote-right"></i></p>
-          <p>&mdash; {{ quote.author }}</p>
+        <div id="quote-block" class="quote is-centered">
+            <p>
+              <i class="fas fa-quote-left"></i>
+                <span id="quote-text">
+                </span>
+              <i class="fas fa-quote-right"></i>
+            </p>
+          <p>&mdash;
+            <span id="quote-author">
+            </span>
+          </p>
         </div>
-      {% endif %}
 
         <div class="links buttons is-centered">
           <a href="{% url 'about:index' %}" class="link button is-primary is-medium is-outlined">Entrar</a>
@@ -93,5 +99,13 @@ <h4 class="blog-message">Para más noticias, pásate por nuestro
       </div>
     </div>
   </div>
+
+  <!-- Live random quotes managed through JS -->
+  <script>
+    const random_quote_interval = "{{ random_quote_interval }}";
+    const quotes_api_url = "{% url 'api:random_quote' %}";
+  </script>
+  <script src="{{ assets|get_asset_key:'homepage/custom.min.js' }}"></script>
+
 </body>
 </html>

apps/homepage/views.py

@@ -2,6 +2,8 @@
 
 from django.shortcuts import render
 
+from django.conf import settings
+
 from apps.events.models import Event
 from apps.quotes.models import Quote
 from apps.jobs.models import JobOffer
@@ -12,4 +14,5 @@ def homepage(request):
         'active_events': Event.objects.all().filter(active=True).count(),
         'quote': Quote.get_random_quote(),
         'jobs_count': JobOffer.actives.count(),
+        'random_quote_interval': settings.RANDOM_QUOTE_INTERVAL,
     })

main/settings.py

@@ -331,6 +331,11 @@
 TWITTER_ACCESS_TOKEN = config('TWITTER_ACCESS_TOKEN')
 TWITTER_ACCESS_TOKEN_SECRET = config('TWITTER_ACCESS_TOKEN_SECRET')
 
+# Random quote interval (seconds)
+RANDOM_QUOTE_INTERVAL = config(
+    'RANDOM_QUOTE_INTERVAL', default=10, cast=lambda i: 1000 * int(i)
+)
+
 if DEBUG:
     MESSAGE_LEVEL = message_constants.DEBUG