README.md

Teamplate iFrame Widget

This teamplate is mean to be used to create new experiences that can be included using iFrames into other application and websites.

Installation

Create a new repository from this template.

Clone your new repository to your local machine.

Install the dependencies:

npm i

Run the development server:

npm start

You can view the development server at http://localhost:4001.

Production build

npm run build

Where to add your code

Here are the main files and folders you will be working with:

Assets and Images

Add your assets and images into src/assets/ folder. These will be copied into dist/ folder as is

HTML

Add your custom HTML code into template src/html/content.html, this file will be added as innerHTML of the body element in templae src/html/_index.html file. This will be compiled into dist/index.html.

CSS

CSS is being compiled using SASS. Add your custom SASS code into template src/sass/content.scss, this will be compiled into dist/widget.css.

JS

Add your custom JS code into js files in src/js/. Each file will be concatanated into dist/widget.js. Files are concatanated in the order they are listed in the folder.

JS Vendor Libs

To add vendor JS libraries that will be compiled into dist/vendor.js and dist/vendor.css update the following section in webpack.common.js:

new MergeIntoSingleFilePlugin({
        files: {
            "vendor.js": [
                'node_modules/jquery/dist/jquery.min.js',
                'node_modules/@popperjs/core/dist/umd/popper.js',
                'node_modules/bootstrap/dist/js/bootstrap.js',
                'node_modules/d3/dist/d3.js',
            ],
            "vendor.css": [
                //nothing here yet
            ],
            "widget.js": [
                paths.src + '/js/**/*.js',
            ]
        }
    }),

JS Conventions

Please keep JS simple, clean and namespaced.

When adding new files "modules" use this as the template for your new module.

//define namespace for your JS file
//window.Widgets = {};  //  already defined in _namespace.js
window.Widgets.Widget = {};

//define your function to use in your component
(function($, ns, componentsNs, document, window) {
    ns.version = '1.0.0';

    ns.selectorComponent = '.js-component';

    ns.init = function() {
        //initialize your class
    };

})(jQuery, Widgets.Widget, window.Widgets, document, window);

//define your behaviour how will this component will be added to DOM.
(function($, ns, componentsNs, document, window) {
    
    //watch for the component to be added to DOM
    componentsNs.watchDOMForComponent(`${ns.selectorComponent}`, ns.init);

})(window.jQuery, window.Widgets.Widget, window.Widgets, document, window);