@ppg_pl/tinting
v0.0.7
Published
Color-Selector-Tinting WebComponent
Readme
Project Documentation
This documentation provides an overview of the project's architecture, technologies used, and integration instructions for both the backend and frontend components.
Backend
- Framework: The application backend is built using Directus version 10.10.4.
- Database: The staging environment is configured with a PostgreSQL database.
- Collation Method: Refer to the Directus documentation for detailed information on collation.
Frontend
Webcomponent Library: The frontend application is written as a webcomponent using StencilJS.
Integration: To integrate the webcomponent into an HTML file, follow these steps:
Install the package using npm:
npm install @ppg_pl/tintingor using yarn:
yarn add @ppg_pl/tintingConnect the generated
wwwfolder to your HTML file.Ensure correct paths for assets and scripts within the HTML file. Below is an example of how to import the package into any project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Selector</title>
<!-- here is the path -->
<script type="module" src="/node_modules/@ppg_pl/tinting/www/build/tinting.esm.js"></script>
<script nomodule src="/node_modules/@ppg_pl/tinting/www/build/tinting.js"></script>
</head>
<body>
<my-component class="modal_tinting"></my-component>
<label for="shop">Shop</label> <input name="shop" type="shop" /> <label for="product">Product</label><input name="product" type="product" />
<button>open modal</button>
<script>
const btn = document.querySelector('button');
const modal = document.querySelector('.modal_tinting');
const shop = document.querySelector('input[name="shop"]');
const product = document.querySelector('input[name="product"]');
btn.addEventListener('click', () => {
modal.setAttribute('shop', shop.value);
modal.setAttribute('product', product.value);
modal.open();
});
modal.addEventListener('onSelectedColor', e => {
console.log('Color selected:', e.detail);
});
</script>
</body>
</html>Additional Integrations
For other integrations and specific functionalities, refer to the comprehensive documentation provided for each component or library.