Package Exports

minimalista

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (minimalista) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Minimalista

npm version npm downloads license GitHub file size in bytes
Minimalista em extensão do Chrome
Uso da geração de cor contrastante em extensão para Chrome

A old-school based library acting minimalist

To read the english version of this document click here.

Uso 1: Com empacotador estilo Webpack

Em seu terminal com Node rode o comando npm:

npm i minimalista --save-dev

ou yarn:

yarn add minimalista --dev

A flag --save-dev ou --dev é opcional, boa no caso de usar esta biblioteca somente em pré-build.

Uso 2: `type="module"` na tag script

<script src="seu_codigo.js" type="module" charset="utf-8"></script>

Este modo evita necessidade de configuração em outras ferramentas, e traz o módulo diretamente no seu código com essa feature do HTML.
Porém, ao usar este deve se atentar a atual compatibilidade da feature nos browsers e sempre servir a página em algum host, como localhost.

Importando para o seu código

// seu_codigo.js

// usando empacotador
var url_pro_modulo_uso1 = "minimalista";
// usando type="module"
var url_pro_modulo_uso2 =
  "https://cdn.jsdelivr.net/npm/minimalista@1.1.0/index.min.js";
import {
  getByTag,
  getByClass,
  getById,
  setStyle,
  Ajax,
  widthBody
} from "url-pro-modulo-aqui";
// necessita string pura, variável não aceitável

Obs: A versão 1.0.0 é menor pois não contém a manipulação de cores, lançada na v1.1.0

Exemplo de Uso Real

// seu_codigo.js

// uso do Ajax
var ajaxProfile = Ajax.send("./user/data.json", "POST");
ajaxProfile.onreadystatechange = function() {
  if (Ajax.isReady(this)) {
    var userData = Object.values(
      JSON.parse(ajaxProfile.responseText)
    );
    // getById() + getByClass()
    // o elemento #user-data de dentro do .profile
    var userProfile = getById("user-data", getByClass("profile")[0]);
    // uso do getByTag()
    // todos os elementos <p> do userProfile
    var paragraphs = getByTag("p", userProfile);
    // percorrendo os <p>
    for (var [p, i] of paragraphs) {
      // colocando dados em cada
      p.innerText = userData[i][0];
      // mudando estilo do <p> dinamicamente
      setStyle(p, userData[i][1]); // uso do setStyle()
    }
  }
};

// Ao alterar o tamanho da janela
window.addEventListener("resize", function() {
  // armazena a largura em pixels
  var screenWidth = widthBody(); // uso do widthBody()
  // 33% ou 50% da tela
  var qtdParts = screenWidth > 769 ? 3 : 2;
  // todos os .grid-item ganham novo tamanho
  setStyle(
    getByClass("grid-item"),
    `width: ${screenWidth / qtdParts};`
  );
  // útil quando há conteúdo adicionado dinamicamente
  // e seus tamanhos envolvem reposicionamento
});

Exemplo Real Usando Vue

Neste exemplo o módulo é usado em uma extensão para Chrome e Firefox, que muda a página inicial, gerando uma nova cor de texto contrastado com o fundo escolhido pelo usuário.

import { contrast, getRgb, genColor, minCon } from 'minimalista';

export default {
  ...
  data: function() {
    return {
      min: { contrast, getRgb, genColor, minCon }
    };
  },
  methods: {
    getContrasted: function(bg, color = '191c4c') {
      const mini = this.min;
      // armazena contraste dos 2 RGB
      const contrast = mini.contrast(
        mini.getRgb(bg),
        mini.getRgb(color));
      // If contraste é suficiente de acordo com WCAG20
      if (contrast > mini.minCon.aa) {
        return color;
      } else {
        // gera nova cor baseada nas atuais
        const newColor = mini.genColor(
          mini.getRgb(bg),
          mini.getRgb(color));
        // testa do começo
        return this.getContrasted(bg, newColor);
      }
    }
  }
};

Lista de funções

Todas as funções disponíveis, assim como seus parâmetros e retornos, estão explicadas aqui.

Licença

MIT

minimalista