Carregando meetups via ajax.

Author: whera

_data/meetups.yml

@@ -103,3 +103,7 @@
 <!-- start Main -->
 <script src=" {{ '/js/main.js' | prepend: site.baseurl  | prepend: site.url }}"></script>
 <!-- end Main -->
+
+{% for js in page.files_js %}
+<script src=" {{ js | prepend: site.baseurl  | prepend: site.url }}"></script>
+{% endfor %}

_includes/footer.html

@@ -0,0 +1,46 @@
+$(function() {
+    $.ajax({
+        url: 'https://whera.com.br/phpsc/index.json',
+        type: 'GET',
+        success: callbackSuccess,
+        error: function(e) {
+            //called when there is an error
+            //console.log(e.message);
+        }
+    });
+});
+
+
+function callbackSuccess(json) {
+    $('#text-load').remove();
+
+    $.each(json, function (index, meetup) {
+        var html  = '';
+            html += '<div class="col-lg-4">';
+            html +=     '<div class="panel panel-default">';
+            html +=         '<div class="panel-body">';
+            html +=             '<h4 class="text-center">';
+            html +=                 '<i class="fa fa-users fa-4x col-md-12"></i>';
+            html +=                 '<a href="'+meetup.link+'" target="_blank">'+meetup.name+'</a>';
+            html +=             '</h4>';
+            html +=             '<b>Local:</b> '+meetup.venue+'<br>';
+            html +=             '<b>Data:</b> '+meetup.date+'<br>';
+
+            if (meetup.status == 'past') {
+                html += '<b>Participantes:</b> ' + meetup.members;
+            }
+
+            html += '</div>';
+
+            if (meetup.status == 'upcoming') {
+                html += '<div class="panel-footer">';
+                html += '<a title="Junte-se a nós!" class="btn btn-block btn-primary" href="'+meetup.link+'" role="button">Junte-se a nós!</a>';
+                html += '</div>';
+            }
+            html += '</div>';
+            html += '</div>';
+
+        $('#meetups').append(html);
+    });
+
+}

img/ajax-loader.gif

@@ -2,25 +2,22 @@
 layout: page
 title: Reuniões
 permalink: /reunioes/
+files_js:
+    - /js/meetup.js
 ---
-As reuniões são sempre marcadas pelo nosso <a href="http://www.meetup.com/pt/PHPSC-Floripa/" target="_blank">Meetup</a> 
-e são mensais, alternando entre <b>InCompany</b> e <b>PHPSC Pub</b>.
-
+<div id="text-meetup" class="row">
+    <div class="text-left col-md-10">
+        As reuniões são sempre marcadas pelo nosso <a href="http://www.meetup.com/pt/PHPSC-Floripa/" target="_blank">Meetup</a> 
+        e são mensais, alternando entre <b>InCompany</b> e <b>PHPSC Pub</b>.
+    </div>
+    
+    <span id="text-load" class="col-md-2 text-right">
+        <i>Carregando</i> 
+        <img alt="load" src="{{ '/img/ajax-loader.gif' | prepend: site.baseurl  | prepend: site.url }}" />
+    </span>
+    <p class="clearfix"></p>
+</div>
 <div class="row">
-    {% for meetup in site.data.meetups reversed %}
-        <div class="col-lg-4">
-            <div class="panel panel-default">
-              <div class="panel-body">
-                <h4 class="text-center">
-                    <i class="fa fa-users fa-4x col-md-12"></i>
-                    <a href="{{ meetup.url }}" target="_blank">{{ meetup.titulo }}</a>
-                </h4>
-                
-                <b>Local:</b> {{ meetup.local }}<br>
-                <b>Data:</b> {{ meetup.data }}<br>
-                <b>Participantes:</b> {{ meetup.publico }}
-              </div>
-            </div>
-        </div>
-    {% endfor %}
+    <div id="meetups">
+    </div>
 </div>