Skip to content

dragoscirjan/aurelia-content-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Dragos Cirjan
Mar 26, 2019
1364316 · Mar 26, 2019

History

25 Commits
Mar 25, 2019
Mar 25, 2019
Mar 26, 2019
Feb 10, 2019
Mar 16, 2019
Feb 9, 2019
Feb 9, 2019
Feb 9, 2019
Feb 8, 2019
Feb 9, 2019
Feb 11, 2019
Mar 25, 2019
Feb 9, 2019
Feb 9, 2019
Feb 8, 2019
Mar 25, 2019
Feb 9, 2019
Feb 11, 2019
Feb 9, 2019
Mar 25, 2019
Mar 25, 2019

Repository files navigation

Aurelia Content Loader

Npm Version HitCount Contributions welcome

TravisCI CircleCI

Donate to this project using Patreon

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Index

Getting Started

npm i aurelia-content-loader --save

or

yarn add aurelia-content-loader

Usage

In your aurelia main.js add:

aurelia.use.plugin(PLATFORM.moduleName('aurelia-content-loader'));

Options

Option Type Default Description
animate Boolean false Optional. Activate animations with true, 1, any.
animate-duration String 1s Optional. Change to any time value. i.e. 10s.
css-class String Optional. Additional CSS classes to add on the main container of the component.
css-class-inner String Optional. Additional CSS classes to add on the inner container of the component.
height Number 110 Optional. Represents the max height of the <svg />.
image-radius Number 30 Optional. Radius of the main image (see Facebook or Instagram components) - does not matter if the image is a square. If square, image width/height will be the diameter (2 * radius).
image-as-circle Boolean false Optional. Activate circle image with true, 1, any.
line-height Number 7 Optional. Used for components like (Facebook, List and Code), represents the height of the lines representing texts. Can be changed to any number.
line-max-number Number 5 Optional. Used for components like (Facebook, List and Code), represents the maximum number of rendered text lines. If given a very large number, the text lines will fill all the available space according to svg height.
line-padding Number 5 Optional. Used for components like (Facebook, List and Code), represents the top/bottom padding of the lines representing texts. Can be changed to any number.
line-width-randomize Boolean false Optional. Used for components like (Facebook, List), allows 'text' lines to have random widths.
width Number 320 Optional. Represents the max width of the <svg />.
svg-direction Number ltr Optional. Defines the orientation of the <svg />. Can be changed to rtl.
svg-preserve-aspect-ratio String none Optional. Defaults to none. Read more in the preserveAspectRatio attribute documentation.

Examples

Facebook Component

<svg-facebook-loader
  animate="1"
  corner-radius="3"
  image-as-circle="1"
></svg-facebook-loader>

Instagram Component

<svg-instagram-loader
  animate="1"
  height="220"
  corner-radius="3"
  image-as-circle="1"
></svg-instagram-loader>

Code Component

<svg-code-loader
  animate="1"
></svg-code-loader>

Additional Options

Option Type Default Description
max-code-cuhnks Number 5 Optional. Number of chunks in a line.

List Component

<svg-list-loader
  animate="1"
  corner-radius="3"
></svg-list-loader>

Additional Options

Option Type Default Description
bullets Boolean false Optional. Activate bullets with true, 1, any.
bullets-as-squares Boolean false Optional. Activate rendering bullets as squares with true, 1, any.
bullet-radius Number 5 Optional. Set the radius of the list's bullets.

Bullet list Style

<svg-list-loader
  animate="1"
  bullets="1"
  bullets-as-squares="1"
></svg-list-loader>

Custom Component

<svg-content-loader
  animate="1"
>
  <rect x="0" y="0" rx="3" ry="3" width="60" height="60"></rect>

  <rect x="70" y="15" rx="3" ry="3" width="250" height="7"></rect>
  <rect x="70" y="37" rx="3" ry="3" width="200" height="7"></rect>

  <rect x="0" y="75" rx="3" ry="3" width="320" height="7"></rect>
  <rect x="0" y="92" rx="3" ry="3" width="320" height="7"></rect>
</svg-content-loader>

Extending component

Javascript Class

Let's say ./resources/elements/custom-loader.js.

import { bindable, containerless, customElement, inlineView } from 'aurelia-templating';

import { SvgContentLoader } from 'aurelia-content-loader/content-loader';
import { template } from 'aurelia-content-loader/template';

/** @var {String} */
const divTemplate = '';

/** @var {String} */
const svgTemplate = `<rect x="0" y="0" rx="3" ry="3" width="60" height="60"></rect>

<rect x="70" y="15" rx="3" ry="3" width="250" height="7"></rect>
<rect x="70" y="37" rx="3" ry="3" width="200" height="7"></rect>

<rect x="0" y="75" rx="3" ry="3" width="320" height="7"></rect>
<rect x="0" y="92" rx="3" ry="3" width="320" height="7"></rect>`;

/**
 * 
 */
@containerless
@customElement('svg-custom-loader')
@inlineView(template(divTemplate, svgTemplate))
export class SvgCustomLoader extends SvgContentLoader { }

Importing new component

Add to ./resources/index.js.

import { PLATFORM } from 'aurelia-pal';

export function configure(aurelia) {
  aurelia.globalResources(PLATFORM.moduleName('resources/elements/custom-loader'));
}

Using within HTML Templates

<svg-custom-loader
  animate="1"
></svg-custom-loader>

Similar packages

Development

Fork the repo then clone it

$ git clone git@github.com:dragoscirjan/aurelia-content-loader-dev.git && cd aurelia-content-loader

yarn global add gulp-cli (or $ npm install --global gulp-cli): Install Gulp cli tool.

$ yarn (or $ npm i): Install the dependencies;

$ yarn build (or $ npm run build): Build to production;

$ yarn dev: Run the docz to see your changes;

NOTE: Momentarely I do not use the testing environment. I'm using this project to develop. You're all invited to help with the unit tests, if you wish to.

$ yarn test: Run all tests: type checking and unit tests;

$ yarn test:watch: Watch unit tests;

$ yarn tsc: Typescript checking;

$ yarn tsc:watch: Typescript checking with watching;

Issues

For issues, please reffer to this repository's issue page.

License

MIT

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published