sy / webcomponent
Component with css, js and translation properties
Installs: 1 427
Dependents: 5
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Requires
- php: >=5.6.0
- sy/component: ^2
Requires (Dev)
- phpunit/phpunit: ^9
README
A web component is a component with CSS and JS properties.
Sy\Component\WebComponent class derives from Sy\Component
Installation
Install the latest version with
$ composer require sy/webcomponent
CSS/JS management
CSS/JS link
Use addCssLink and addJsLink to specify stylesheet and javascript source path.
Example:
<?php use Sy\Component\WebComponent; class MyComponent extends WebComponent { public function __construct() { parent::__construct(); // Add CSS links $this->addCssLink('/web/path/to/style1.css'); $this->addCssLink('/web/path/to/style2.css'); // Add CSS links with media parameter $this->addCssLink('/web/path/to/screen_style1.css', 'screen'); $this->addCssLink('/web/path/to/screen_style2.css', 'screen'); $this->addCssLink('/web/path/to/print_style1.css' , 'print'); $this->addCssLink('/web/path/to/print_style2.css' , 'print'); // Add JS links $this->addJsLink('/web/path/to/script1.js'); $this->addJsLink('/web/path/to/script2.js'); } } $myComponent = new MyComponent(); $css = $myComponent->getCssLinks(); $js = $myComponent->getJsLinks(); print_r($css); print_r($js);
Output:
Array
(
[] => Array
(
[0] => /web/path/to/style1.css
[1] => /web/path/to/style2.css
)
[screen] => Array
(
[0] => /web/path/to/screen_style1.css
[1] => /web/path/to/screen_style2.css
)
[print] => Array
(
[0] => /web/path/to/print_style1.css
[1] => /web/path/to/print_style2.css
)
)
Array
(
[0] => /web/path/to/script1.js
[1] => /web/path/to/script2.js
)
CSS/JS code
Use addCssCode and addJsCode to specify stylesheet and javascript code.
Example:
<?php use Sy\Component\WebComponent; class MyComponent extends WebComponent { public function __construct() { parent::__construct(); // Add CSS code $this->addCssCode(file_get_contents(__DIR__) . '/style.css'); // Add JS code $this->addJsCode(file_get_contents(__DIR__) . '/script.js'); // You can also do that but it's not very clean $this->addJsCode(' function javaScriptTest() { alert("Test"); } '); } }
CSS/JS transmission to parent component
When you add a component B on another component A, all CSS and JS properties of B are transmitted to A.
Exemple:
<?php use Sy\Component\WebComponent; // Component A class A extends WebComponent { public function __construct() { parent::__construct(); // Add CSS/JS links $this->addCssLink('/web/path/to/A/style.css'); $this->addJsLink('/web/path/to/A/script.js'); // Add the component B $this->setComponent('SOMEWHERE', new B()); } } // Component B class B extends WebComponent { public function __construct() { parent::__construct(); // Add CSS/JS links $this->addCssLink('/web/path/to/B/style.css'); $this->addJsLink('/web/path/to/B/script.js'); } } $a = new A(); $css = $a->getCssLinks(); $js = $a->getJsLinks(); print_r($css); print_r($js);
Output:
Array
(
[] => Array
(
[0] => /web/path/to/A/style.css
[1] => /web/path/to/B/style.css
)
)
Array
(
[0] => /web/path/to/A/script.js
[1] => /web/path/to/B/script.js
)