/site

Mostra a tabela com os dados dos subreddits.

Primary LanguageJavaScriptMIT LicenseMIT

Site

Descrição

Site que mostra informações sobre subreddits lusófonos linkados em postagens do subreddit r/EmPortugues.

O site extrai dados serializados em JSON armazenado em servidor usando jQuery para exibir os resultados paginados numa tabela com funcionalidades de DataTables numa página responsiva estilizada com auxílio de Bootstrap.

A página principal do site carrega o arquivo JSON com $.getJSON(), extrai os dados em tabela com $().DataTable() e propicia a filtragem dos dados com search, a reordenação das colunas da tabela com colReorder e a paginação com page além de dispor de um footer com links para o subreddit, o aplicativo e este repositório.

As informações apresentadas no site são: "icon", "name", "description", "recent_submissions" e "recent_comments", "members", "age", "moderators", "nsfw" e o link de cada subreddit listado.

Sumário

Instalação

  1. Clone o repositório;
  2. navegue até a pasta;
  3. selecione o arquivo "index.html";
  4. e edite com um editor de texto.

Instruções

Para alterar o endereço do arquivo JSON, em app.js, edite:

$.getJSON("../../../data/subreddits.json", function (data) {

Para alterar as chaves do objeto JSON, em app.js, edite:

id: data.subreddits[i].id,
icon: data.subreddits[i].icon,
name: data.subreddits[i].name,
description: data.subreddits[i].description,
recent_submissions: data.subreddits[i].recent_submissions,
recent_comments: data.subreddits[i].recent_comments,
members: data.subreddits[i].members,
age: data.subreddits[i].age,
moderators: data.subreddits[i].moderators,
nsfw: data.subreddits[i].nsfw

Para alterar os cabeçalhos das colunas, em index.html, edite:

<th scope="col"></th>
<th class="hidden-column" scope="col">Ícone</th>
<th scope="col">Subreddit</th>
<th scope="col">Descrição</th>
<th scope="col">Atividade</th>
<th class="hidden-column" scope="col">Comentários</th>
<th scope="col">Membros</th>
<th scope="col">Início</th>
<th scope="col">Mods</th>
<th scope="col">NSFW</th>

Para alterar as propriedades da tabela, em app.js, edite:

data: table,
colReorder: true,
fixedHeader: true,
responsive: true,
mark: true,
"processing": true,
"lengthMenu": [
    [5, 25, 100, -1],
    [5, 25, 100, "Todos"]
],
"order": [],
"pageLength": 100,
"pagingType": "full_numbers",
"language": {
    "url": "https://emportugues.org/assets/lang/pt-BR.json"
},
"columnDefs": [{
        "visible": false,
        "targets": [1, 5]
    },
    {
        "searchable": false,
        "orderable": false,
        "targets": 0
    }
],
columns: [{
        data: 'id'
    },
    {
        data: 'icon'
    },
    {
        data: 'name',
        render: $.fn.dataTable.render.name()
    },
    {
        data: 'description',
        render: $.fn.dataTable.render.description()
    },
    {
        data: 'recent_submissions',
        render: $.fn.dataTable.render.activity()
    },
    {
        data: 'recent_comments'
    },
    {
        data: 'members',
        render: $.fn.dataTable.render.members()
    },
    {
        data: 'age',
        render: $.fn.dataTable.render.age()
    },
    {
        data: 'moderators',
        render: $.fn.dataTable.render.moderators()
    },
    {
        data: 'nsfw',
        render: $.fn.dataTable.render.nsfw()
    }
],
colReorder: {
    fixedColumnsLeft: 1
},
"initComplete": function (settings, json) {
    tlite(el => el.classList.contains('data-tooltip'));
    $("#loading-screen").css("visibility", "hidden");
    $("#loading-screen").css("opacity", 0);
}

Dependências

Bootstrap

<link rel="stylesheet" type="text/css" href="assets/vendor/Bootstrap-4-4.1.1/css/bootstrap.min.css"/>

DataTables

<link rel="stylesheet" type="text/css" href="assets/vendor/datatables.css"/>

<script type="text/javascript" src="assets/vendor/datatables.min.js"></script>

Tlite

<link rel="stylesheet" type="text/css" href="assets/vendor/Tlite/tlite.css"/>

<script type="text/javascript" src="assets/vendor/Tlite/tlite.min.js"></script>

Spinner

<link rel="stylesheet" type="text/css" href="assets/vendor/Spinner/spinner.css"/>

FontAwesome

<link rel="stylesheet" href="assets/vendor/font-awesome-4.7.0/css/font-awesome.min.css">

Mark

<script type="text/javascript" src="assets/vendor/Mark/jquery.mark.min.js"></script>

<script type="text/javascript" src="assets/vendor/Mark/datatables.mark.es6.min.js"></script>

Marked

<script type="text/javascript" src="assets/vendor/Marked/marked.min.js"></script>

Colaboração

Você pode colaborar com o desenvolvimento deste projeto!

Confira os kanbans deste projeto, entre em contato com a equipe de moderação e participe da equipe de desenvolvimento para saber a respeito do progresso deste repositório caso queira colaborar antes de reportar um novo problema ou solicitar o recebimento de uma modificação.

Página Inicial

https://emportugues.org

Referências