Blame view

README.md 3.46 KB
a038055e4   development server   added ext libs lo...
1
2
3
4
5
  # Webapp tools - web components
  
  This presents a collection of web components to integrate with the [FCCN's webapp skeleton](https://github.com/fccn/webapp-skeleton.git) project. The following components are provided:
  
  - External libraries loader - loads external javascript libraries installed by composer and npm.
6a1a8aaba   root@webrtc-hub   Reorganized web c...
6
  - Language Switcher Action - Controller action for switching the site language
a038055e4   development server   added ext libs lo...
7
8
9
10
11
  
  ## Installation
  
  You can install this collection in your project using composer:
  ```
e7830f703   development server   fixed package nam...
12
  composer require fccn/webapp-tools-web-components
a038055e4   development server   added ext libs lo...
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  
  ```
  
  ## Configuration
  
  The site configuration loader from the [Webapp Tools - common](https://github.com/fccn/wt-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](https://github.com/fccn/webapp-skeleton.git) 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:
  ```php
   $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:
6a1a8aaba   root@webrtc-hub   Reorganized web c...
38
a038055e4   development server   added ext libs lo...
39
40
  ```php
  //---- External libraries loader --------------------
6a1a8aaba   root@webrtc-hub   Reorganized web c...
41
  "ext_libs_loader_service_name" => 'loader',  #name of the loader service in Slim container
a038055e4   development server   added ext libs lo...
42
43
44
45
46
  "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",
  
    );
6a1a8aaba   root@webrtc-hub   Reorganized web c...
47
48
49
  ```
  
  The example below shows how to create a new Slim service for the external library loader
a038055e4   development server   added ext libs lo...
50
6a1a8aaba   root@webrtc-hub   Reorganized web c...
51
52
53
54
  ```php
  
  $app = new Slim\App();
  $c = $app->container();
a038055e4   development server   added ext libs lo...
55
6a1a8aaba   root@webrtc-hub   Reorganized web c...
56
57
58
59
60
61
  //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;
  }
a038055e4   development server   added ext libs lo...
62
  ```
6a1a8aaba   root@webrtc-hub   Reorganized web c...
63
64
65
66
67
68
69
70
71
72
  You can associate a URL path for loading external libraries using the provided controller action - LoadExternalJSAction. The example below shows how to set the *<site-url>/script/lib/{libname}* path to the action controller:
  
  ```php
  
  $app = new Slim\App();
  
  #set route for load library action
  $app->get('/script/lib/{libname}', Fccn\WebComponents\LoadExternalJsAction::class);
  
  ```
a038055e4   development server   added ext libs lo...
73
74
  
  ## Usage
6a1a8aaba   root@webrtc-hub   Reorganized web c...
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
  
  ### 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](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
  
  ## Versioning
  
  We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/fccn/wt-translate/tags).
  
  ## License
  
  This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details