fccn/webapp-tools-web-components

Collection of twig templates with web utilities

1.0.0 2019-04-12 15:47 UTC

Requires

• php: >=5.5.0
• fccn/webapp-tools-common: ^1.0
• fccn/webapp-tools-translate: ^1.0
• jswhetstone/twig-extension: dev-master
• twig/extensions: ^1.5

Requires (Dev)

• codeception/codeception: ^2.3
• herloct/codeception-slim-module: ^1.1
• slim/slim: ^3.9

MIT

• Paulo Costa

• twig
• utilities
• fccn
• webapp-tools

README

This presents a collection of web components to integrate with the FCCN's webapp skeleton project. The following components are provided:

• External libraries loader - loads external javascript libraries installed by composer and npm.
• Language Switcher Action - Controller action for switching the site language

Installation

You can install this collection in your project using composer:

composer require fccn/webapp-tools-web-components

Configuration

The site configuration loader from the Webapp Tools - common project is used to centralize the configuration of each of component. You need to add a specific set of key-value pairs to the site configuration file, as described in the sections below.

Some of the web components provide twig views to render HTML content. All the twig template files are located in the templates folder. To load them in your project you need to register a twig namespace for this directory. When integrating with the FCCN's webapp skeleton project you need to add the following line to the templates_path variable in the site configuration:

$templates_path =  array(
  ...
  'web_components' => $fs_root.'/vendor/fccn/webapp-tools/web-components/templates' #add this line
  ...
  );

External libraries loader

For cleaner paths it is advised to create variables for the node modules and vendor folders in the configuration file:

 $node_mods_path = $fs_root.'/node_modules/';
 $vendor_path = $fs_root.'/vendor/';

You can than add the following key-value pairs to the config file's $c array:

//---- External libraries loader --------------------
"ext_libs_loader_service_name" => 'loader',  #name of the loader service in Slim container
"ext_libs" => array(
  //add libraries with the format name => path like for example:
  "headjs" => $node_mods_path."/headjs/dist/1.0.0/head.min.js",

  );

The example below shows how to create a new Slim service for the external library loader

$app = new Slim\App();
$c = $app->container();

//setup ext libs loader
$cnt_name = \Fccn\Lib\SiteConfig::getInstance()->get('ext_libs_loader_service_name');
$c[$cnt_name] = function($cnt){
  $loader = \Fccn\WebComponents\ExtLibsLoader::getInstance();
  return $loader;
}

You can associate a URL path for loading external libraries using the provided controller action - LoadExternalJSAction. The example below shows how to set the /script/lib/{libname} path to the action controller:

$app = new Slim\App();

#set route for load library action
$app->get('/script/lib/{libname}', Fccn\WebComponents\LoadExternalJsAction::class);

Usage

External libraries loader

To load the external library just point to the URL you have configured in the Slim routes with the name of the library.

Testing

This project uses codeception for testing. To run the tests call composer test on the root of the project folder.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the MIT License - see the LICENSE.md file for details