Eurostar Popup

Component to show information within a popup/modal

Before installation

It is presumed that you have jspm and npm installed on your machine globally and within your project.

You must also install plugin-sass installed to ensure sass imports work. You can install by running the following command:

$ jspm install scss=sass

Usage

1. Change package.json file and jspm config file (usually jspm.config.js or config.js) to ensure that the mapping to Magnific Popup is correct

   "magnificPopup": "github:dimsemenov/Magnific-Popup@<version>",

2. Install module

   $ jspm install npm:eurostar-popup

3. Import the styles into your main scss file

   @import "jspm:eurostar-popup/popup";

   Note the naming convention: jspm:<pkg-name>/<pkg-scss-file>;

4. Import the javascript file into your main file (refer to http://jspm.io/docs/getting-started.html for bundling packages. However, this should be written in a task, e.g. using gulp).

   import Popup from 'eurostar-popup';
   

   This imports the Popup class from the popup.js file.

5. To initialise the Popup, use the following code:

   let popup = new Popup('.myClassName');

Typical package structure

  /component-name@<version-number>
    component-name.html.twig
    component-name.scss
    component-name.js
    component-name.json
    index.html.twig