README_en.md

Minimalista

Use of contrasted colors generation in Chrome extension

A old-school based library acting minimalist

Para ler a versão em português deste documento clique aqui.

Use 1: With bundler like Webpack

In your terminal with Node run the npm command:

npm i minimalista --save-dev

or yarn:

yarn add minimalista --dev

The flag --save-dev or --dev is optional, good in case of use this library only in pre-build.

Use 2: type="module" in script tag

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

This mode avoid need to configure others tools, and brings the module straight in your code with this HTML feature.
But, using this needs attention to current compatibility of feature in browsers and ever serve the page in some host, like localhost.

Importing to your code

// your_code.js

// using bundler
var url_to_module_use1 = "minimalista";
// using type="module"
var url_to_module_use2 =
  "https://cdn.jsdelivr.net/npm/minimalista@1.1.0/index.min.js";
import {
  getByTag,
  getByClass,
  getById,
  setStyle,
  Ajax,
  widthBody
} from "url-to-module-here";
// needs pure string, var not allowed

Note: Version 1.0.0 is smaller because it does not contain the color manipulation, launched in v1.1.0

Real World Example

// your_code.js

// Ajax use
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()
    // the #user-data element inside of .profile
    var userProfile = getById("user-data", getByClass("profile")[0]);
    // getByTag() use
    // all <p> elements inside userProfile
    var paragraphs = getByTag("p", userProfile);
    // iterating <p> elements
    for (var [p, i] of paragraphs) {
      // setting data in each
      p.innerText = userData[i][0];
      // changing <p> style dynamically
      setStyle(p, userData[i][1]); // setStyle() use
    }
  }
};

// In window size change
window.addEventListener("resize", function() {
  // store the width in pixels
  var screenWidth = widthBody(); // widthBody() use
  // 33% or 50% of screen
  var qtdParts = screenWidth > 769 ? 3 : 2;
  // every .grid-item receive new width
  setStyle(
    getByClass("grid-item"),
    `width: ${screenWidth / qtdParts};`
  );
  // good utility when have content added dynamically
  // and their size involves repositioning
});

Real Example using Vue

In this example the module is used in a extension to Chrome and Firefox, that changes the main page, generating a new text color contrasted with the background choiced by user.

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;
      // stores contrast of 2 RGB
      const contrast = mini.contrast(
        mini.getRgb(bg),
        mini.getRgb(color));
      // If contrast is enough according to WCAG20
      if (contrast > mini.minCon.aa) {
        return color;
      } else {
        // generates new color based on current
        const newColor = mini.genColor(
          mini.getRgb(bg),
          mini.getRgb(color));
        // re-test from start
        return this.getContrasted(bg, newColor);
      }
    }
  }
};

Functions List

All the available functions, as their parameters and returns, are explained here.

License

MIT

Copyright (c) 2019, Guilherme Correia