Skip to main content

Adding JavaScript

MWF has its own JavaScript library. This library is built using TypeScript and provides the following advantages:

  • Better support of SPA by observing DOM changes.
  • Added support for AMD, Common, and Global namespaces, as well as UMD.
  • Uses factory pattern to enable component initialization at any time.
  • Allows auto-initialization if you want to initialize components automatically.

Given the flexibility of JavaScript (or TypeScript) and the availability of almost limitless implementation methodologies, we've focused on a few common design features as requested by our partners.

Library versions

Use the static manifest file to determine the correct library version and use its file name as appropriate for your application. Read this article for more about using manifests. Two library varients are offered for each version: a Standard version where application code must initialize each component or module, and an Auto-initialized version where components or modules are initialized at creation. Currently available libraries are listed here.

Standard versions

  • AMD
    minified: mwf-main.amd.min.js
    un-minified: mwf-main.amd.js
  • CommonJs
    minified: mwf-main.commonjs2.min.js
    un-minified: mwf-main.commonjs2.js
  • Globally namespaced
    minified: mwf-main.var.min.js
    un-minified: mwf-main.var.js
  • UMD
    minified: mwf-main.umd.min.js
    un-minified: mwf-main.umd.js

Auto initialized versions

  • AMD
    minified: mwf-auto-init-main.amd.min.js
    un-minified: mwf-auto-init-main.amd.js
  • CommonJs
    minified: mwf-auto-init-main.commonjs2.min.js
    un-minified: mwf-auto-init-main.commonjs2.js
  • Globally namespaced
    minified: mwf-auto-init-main.var.min.js
    un-minified: mwf-auto-init-main.var.js
  • UMD
    minified: mwf-auto-init-main.umd.min.js
    un-minified: mwf-auto-init-main.umd.js

Example use cases

MWF libraries use a Factory pattern to create and initialize new component or module objects. Here is an example on how to create a new component:

ComponentFactory.create([FactoryInput]);

The newly created FactoryInput object has the following properties:

  1. selector - the CSS selector to bind the component to. Required.
  2. context - the context CSS selector.
  3. eventToBind - an event that will be listened for before a component is bound to the DOM. Note: The following two events are supported:
    • DOMContentLoaded – the binding happens at the DOMConentLoaded event of a browser. This binding need to be used for components that need to be bound for early visibility concerns before the onload event happens.
    • load – This is the default event and allows binding the component to the load event. We recommend this for performance reason. MWF scripts generally have a timeout of 6 seconds. So, if the window onload takes longer, the component binding happens either at onload or 6 seconds whichever comes first.
  4. component - a component object to be created. Note: 'c' can be used as an alias.
  5. elements - an optional array of existing elements to bind to instead of a selector to find elements by.
  6. callback - a call back function that will be called when the component is successfully created.

Example 1

Creating two components with default selectors.

    ComponentFactory.create([
        {'component': Carousel},
        {'component': Slider}
    ]);
    

Example 2

Creating two components with unique selectors.

    ComponentFactory.create([
         {'component': Carousel,
         selector: '#myCarousel'},
         {'component': Slider,
         selector: '#mySlider'}
    ]);
    
    

Example 3

Creating a component with a unique selector and a callback function.

    function setSliderMax(slider) {
         slider.setValue(120);
    }
    ComponentFactory.create([
         {'component': Slider,
         selector: '#myslider',
         callback: setSliderMax}
    ]);
    

Example 4

Binding the creation of a component to a specific event.

By default, components are initialized after onLoad for performance reason. But you can also initialize them at DOMContentLoaded as shown here.

    ComponentFactory.create([
         {'component': Slider,
         selector: '#myslider',
         eventToBind: DOMContentLoaded}
    ]);
    

Example 5

Creating a component for an existing element.

    ComponentFactory.create([{
        'component': Slider,
        eventToBind: 'DOMContentLoaded',
        elements: [this.myslider],
        callback: setSliderMax}
    ]);
    @returns {void}
    

Dependencies

There are two additional library dependencies bundled into the MWF distribution. There are:

  • picturefill.min.js
  • modernizr.min.js

It is highly recommended that you use the bundled MWF distribution "as is" because it is fully tested and verified to work with these libraries. Adding these libraries seperately cannot guarantee full MWF functionality. However, if this is a problem for your project, you can contact the MWF team to arrange for access to a distribution that excludes these dependency libraries. Including those libraries in your project will then be your responsibility as well as resolving any functionality issues. This can be a major undertaking and that is why we discourage that option.

Libraries

How you use a ComponentFactory is different based upon which library package you use. The following examples demonstrate how partners would use different libraries:

Example 1: As a global variable

Add this script as a block in the page head.

    <script src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.var.min.js"></script>
    

After the script has successfully loaded the mwf library, you can bind a slider component to your markup by using the following:

    mwf.ComponentFactory.Create([
        {'component': mwf.Slider}
    ]);
    

Example 2: AMD with async

You can add the library package as async in the HTML page head and then you can load using a require function.

    <script async="async"  src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.amd.min.js" crossorigin="anonymous"></script><noscript></noscript>
    

And then, to create and initialize the component:

    require(['mwf'], function(mwf){
        mwf.ComponentFactory.Create([
            {'component': mwf.Slider}
        ]);
    });
    

Example 3: CommonJS

You can add the library package to the HTML page head and then you can create a new component using a global require variable.

    <script async="async"  src="https://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.21.2/scripts/mwf-main.commonjs2.min.js" crossorigin="anonymous"></script><noscript></noscript>
    

And then, to create and initialize the component:

    var mwf = require('mwf');
    mwf.ComponentFactory.Create([
        {'component': mwf.Slider}
    ]);