@dipcode/dj-core

Core - Javascript module

Core module with funcionality to integrate in Django projects and help using Typescript and Webpack as a tool for static files.

Exported classes usage examples

App

import { App, Routes, settings } from '@dipcode/dj-core';

export class ExampleApp extends App {
  /**
   * Bootstrap application.
   *
   * @static
   * @returns
   * @memberof ExampleApp
   */
  public static bootstrap(routes: Routes) {
    return new ExampleApp(routes);
  }

  /**
   * Creates an instance of App.
   *
   * @memberof ExampleApp
   */
  constructor(routes: Routes) {
    super(routes);

    this.setup();
  }

  public setup() {
    // ...
  }
}

Script

export class ExampleScript extends Script {
  /**
   * Only execute on bootstrap.
   *
   * @protected
   * @memberof ExampleScript
   */
  protected bootstrapOnly = true;

  /**
   * Append the cookieconsent script in body and define behavior after load.
   *
   * @memberof ExampleScript
   */
  public execute() {
    document.querySelectorAll('[query-selector]').forEach((elem: Element) => ...);
  }
}

Plugin

export class ExamplePlugin extends Plugin {
  protected applyToElement(element: HTMLElement): void {
    // ...
  }
}

Router

const routes: Routes = [
  {
    plugins: [new ExampleScript(), new ExamplePlugin()],
  },
  {
    match: /^pattern-to-match$/,
    plugins: [new AnotherExamplePlugin()],
  },
];
const router = new Router(routes);

Settings

const settings = new Settings();
const currentLanguage = settings.get('LANGUAGE');

Animations

const element = document.querySelector('query-selector');
const effectIn: AnimationEffect = 'animate__fadeIn';
const speedFaster: AnimationSpeed = 'animate__faster';
Animation.animate(element, effectIn, speedFaster);

Breakpoint

const breakpoint = (element.dataset.breakpoint || this.breakpoint) as ScreenSize;
const mediaQuery = Breakpoint.down(breakpoint);
if (mediaQuery.matches) {
    // ...
}
mediaQuery.addEventListener('change', (e: MediaQueryListEvent) => ...);

Formset

const element = document.querySelector('query-selector');
new Formset(element, this.router);

Utils

const element = document.querySelector('query-selector');
// toggle element visibility
Utils.toggleElement(element, false, 'animate__fadeOutUp');

// toggle element class
Utils.toggleElementClass(element, 'class-name', true);

// disable element
Utils.disableElement(element, true);