Modularize Javascript - Githubissues

The end goal is this issue to that Javascript components (e.g. lazy loading, modals, etc.) can be used independently. Usage should be easy for themers and application developers, similar to how Slick Carousel is deployed.

Javascript files should be executable with as little effort as possible. In some cases, loading the JS file will be enough. For example, in the case of DCF Lazy Loading, there is no configuration and we can simply load the JS file:

<script type="text/javascript" src="//example.com/dcf-lazyload.js"></script>

In the case of a future DCF slider, we may need an initialization script in addition to calling the dcf-slider.js file:

<script type="text/javascript" src="//example.com/dcf-slider.js"></script>

With a separate initialization script:

<script>
$(document).ready(function(){
  $('.your-class').dcfSlider({
    setting-name: setting-value
  });
});
</script>

Alternatively, we may opt to store slider configuration in the DOM in lieu of an initialization script:

<div class=your-class" data-setting-name="setting-value" data-setting2-name="settings-value">
  <div>slide 1 markup here</div>
  <div>slide 2 markup here</div>
  <div>slide 3 markup here</div>
</div>

This is something we should discuss. In either case, we'll provide the component JS file in DCF core, and it'll be up to the themer to implement conforming markup and possible an initialization script in their DCF-based theme. We'll provide documentation, of course.

Note: In DCF core, we'll only be storing ES6 versions of JS component. In dcf_starter, we'll include a Gulp task to transpile to legacy JS.

digitalcampusframework / dcf

Modularize Javascript #301