lib.nodejs.base.template

This package contains everything frontend-related of our informaticon template. This package is published to npm as @information/lib.nodejs.base.template. It is a new version of the @informaticon/base-assets package (Guide for migration).

Prerequisites

Your project is already prepared to use npm packages, and you already have a bundler like Webpack, Rollup, or something similar set up.

If you are unsure on how to set that up in a Play! project, check out the internal Using Webpack with Play! Framework guide.

Contributions

Please see CONTRIBUTING.md for information on contributions to this package.

Usage

• add the lib.play.base.template dependency in your project. Please see the README for more information.

  :handshake: Compatibility

  | Version | lib.play.base.template | | -------- | ------------------------ | | 0.1.0+ | 1.0.0+ |

• install the package via npm

  npm i @informaticon/lib.nodejs.base.template -D

• import and init components used in your application

  The needed stylesheets are already imported via the InfComponents

  import { InfNotification } from '@informaticon/lib.nodejs.base.template/notification';
  import { InfCollapsible } from '@informaticon/lib.nodejs.base.template/collapsible';
  import { InfConfirm } from '@informaticon/lib.nodejs.base.template/confirm';
  import { InfDialog } from '@informaticon/lib.nodejs.base.template/dialog';
  import { InfNavToggle } from '@informaticon/lib.nodejs.base.template/nav';
  import { InfPopup } from '@informaticon/lib.nodejs.base.template/popup';
  import { InfTabulator } from '@informaticon/lib.nodejs.base.template/table';
  import { InfTour } from '@informaticon/lib.nodejs.base.template/tour';
  import { ChoicesController } from '@informaticon/lib.nodejs.base.template/choices';
  import '../stylesheets/main.scss';
  
  export class Loader {
  	constructor() {
  		document.addEventListener('DOMContentLoaded', () => this.ready());
  	}
  
  	private ready(): void {
  		let collapsibles: InfCollapsible[] = InfCollapsible.init();
  		let confirms: Map<string, InfConfirm> = InfConfirm.init();
  		let dialogs: InfDialog[] = InfDialog.init();
  		let navToggle: InfNavToggle = InfNavToggle.init();
  		let popups: InfPopup[] = InfPopup.init();
  		let tabulators: InfTabulator[] = InfTabulator.init();
  		let tours: Map<string, InfTour> = InfTour.init();
  
  		new ChoicesController().ready();
  
  		// the noficiation don't have to be initalized
  		InfNotification.showInfo('Hello World!');
  	}
  }
  new Loader();

  The init functions provide a Map<> structure where you can access the specific item for components that are identified by a specific name, other components are simply returned as an array of components.

• add the main stylesheet to enable informaticon layout in your main.css file

  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/layout/main.css';

  You can overwrite CSS3 variables if you reassign them after this import.

  :bulb: Importing scss instead of compiled css
  You can also import the source SCSS code instead of the compiled CSS:

  @import "~@informaticon/lib.nodejs.base.template/dist/stylesheets/layout/main.scss";

  It's recommended to use the compiled CSS and the CSS3 variables instead of the SCSS source though.

• you can add more stylesheets for elements:

  //if you want to use the scss functions you have to import them as scss
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/util/mixins.scss';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/util/functions.scss';
  
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/input.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/datepicker.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/button.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/card.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/code.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/hr.css';
  @import '~@informaticon/lib.nodejs.base.template/dist/stylesheets/elements/tree.css';