automagisch

{
  "name": "postcss-ts-serve-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "src/ts/main.ts",
  "scripts": {
    "postinstall": "npm run build",
    "postcss": "postcss src/pcss/main.pcss --output dist/css/style.css --verbose",
    "postcss:watch": "postcss src/pcss/main.pcss --output dist/css/style.css --verbose --watch",
    "esbuild": "esbuild ./src/ts/*.ts --splitting --bundle --minify --format=esm --log-level=info --outdir=dist/js",

automagisch

env=develop

automagisch

/*
 * hash-based inline navigation 1.0
 *
 * This script utilizes HTML5 'role' attributes to determine its contribution
 * to inline navigation methods. Using that, and a format that works for
 * single-level tabs as well as multi-dimensional deep tabs.
 *
 * <div role="tablist" id="tabs-index">
 *   <a role="tab" href="#test"></a>
 *   <a role="tab" href="#test-two"></a>

automagisch

/** Tests against humanity v1
 * 1. add this file to something like `{project}/tests/test.js`
 * 2. add command `node tests/test.js` to package.json.scripts under the key "test"
 * 3. run `npm test`
 */

const { log } = console;

const lameExcuses = [
  "I guess it's allright-ish. Just do not take my word for it.",

automagisch

/**
 *  const data = [...new Array(10000)]; // some huge array, browser compensates rendering because of size
 *  const pages = chunk(data, 200); // create pages from huge array
 *  pages.size; // size of the results per page
 *  pages.index; // current page index
 *  pages.data; // complete data set
 *  pages.chunks; // data set in chunks
 *  pages.get(0); // returns {pages.size} results at index [0-{pages.chunks.length}]
 *  pages.next(); // increments index and returns the result index page
 *  pages.prev(); // decrements index and returns the result index page

automagisch

/*
  An event mocking class
  - EventEmitter.events = { event: [], event2: [] ...etc }
  - EventEmitter.on('event', d => console.log('adds callbacks with data as d (d=whatever)'))
    ! You can use EventEmitter.on('event event') to subscribe 1 callback to multiple events. note space separator
  - EventEmitter.emit('event', (whatever)); // => runs callbacks from event[evt] added through ~.on(..^)
  - Special: EventEmitter.on('*') will be emitted on any 'emit'.
 */
export default class EventEmitter {
  constructor() {

automagisch

import $ from 'jquery';
import EventEmitter  from './event-emitter';

export default class Paginator extends EventEmitter {

  constructor(props={}) {

    super();

    this.props = {

automagisch

/*
  usage:

  ---
  a.link {
    @include underline(red, 1px, 5px, true)
  }

  ---
  above renders a red 'underline' with a 1px width, offsetted 5px from the bottom of

automagisch

// get a key-value representation of cookies
let cookies = () => {
  let _cookies = document.cookie.split("; ");
  let ret = {};
  _cookies.forEach(cookie => {
    let split = cookie.split("=");
    ret[split[0]] = split[1];
  });
  return ret;
}

automagisch

/*
  .flexify should help me make flexbox grids without writing constantly
  the same stuff over and over again. This integrates flexbox properties directly
  in html, so you can write it like this:

  <div class="flexify" data-space-between data-align-center>
    <div>A</div>
    <div>B</div>
    <div C</div>
  </div>