Skip to content

[Research] Reworked some of the components with shadow dom #471

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alien1976 wants to merge 1 commit into from
Closed

[Research] Reworked some of the components with shadow dom #471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 126 additions & 18 deletions components/automatic-grid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
<!--Copyright (c) Coherent Labs AD. All rights reserved. Licensed under the MIT License. See License.txt in the project root for license information. -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="./node_modules/coherent-gameface-grid/dist/grid.production.min.css">
<link rel="stylesheet" href="./coherent-gameface-components-theme.css">
<link rel="stylesheet" href="./style.css">

<link
rel="stylesheet"
href="./node_modules/coherent-gameface-grid/dist/grid.production.min.css"
>
<link
rel="stylesheet"
href="./coherent-gameface-components-theme.css"
>
<!-- <link rel="stylesheet" href="./style.css"> -->
<style>
body {
margin: 0;
Expand All @@ -14,7 +19,8 @@
align-items: center;
background-color: white;
}

</style>
<style data-automatic-grid>
.automatic-grid-component {
width: 80vw;
}
Expand Down Expand Up @@ -42,25 +48,127 @@
display: flex;
justify-content: center;
align-items: center;
background-color: cadetblue;
background-color: red;
color: white;
font-size: 1.5rem;
}
</style>

<style>

</style>

<body class="guic-demo">
<gameface-automatic-grid class="automatic-grid-component" columns="7" rows="5" draggable>
<component-slot data-name="item" col="3" row="2" class="box">1</component-slot>
<component-slot data-name="item" col="3" row="2" class="box">2</component-slot>
<component-slot data-name="item" col="8" row="8" class="box">3</component-slot>
<component-slot data-name="item" class="box">4</component-slot>
<component-slot data-name="item" class="box">5</component-slot>
<component-slot data-name="item" class="box">6</component-slot>
<gameface-automatic-grid
class="automatic-grid-component"
columns="7"
rows="5"
draggable
>
<span
slot="item"
col="3"
row="2"
class="box"
>1</span>
<span
slot="item"
col="3"
row="2"
class="box"
>2</span>
<span
slot="item"
col="8"
row="8"
class="box"
>3</span>
<span
slot="item"
class="box"
>4</span>
<span
slot="item"
class="box"
>5</span>
<span
slot="item"
class="box"
>6</span>
</gameface-automatic-grid>
<script
type="module"
src="./script.js"
></script>
<script>
// AutomaticGrid.styles = `
// .automatic-grid-component {
// width: 80vw;
// }

// .guic-row {
// margin: 0;
// }

// .guic-automatic-grid-container {
// border-right: 3px solid black;
// border-bottom: 3px solid black;
// }

// .guic-automatic-grid-cell {
// border-top: 3px solid black;
// border-left: 3px solid black;
// display: flex;
// align-items: center;
// justify-content: center;
// }

// .box {
// width: 50px;
// height: 50px;
// display: flex;
// justify-content: center;
// align-items: center;
// background-color: red;
// color: white;
// font-size: 1.5rem;
// }
// `
</script>
<!-- <script>
class ExtendedAutomaticGrid extends AutomaticGrid {
constructor() {
super(`.automatic-grid-component {
width: 80vw;
}

.guic-row {
margin: 0;
}

.guic-automatic-grid-container {
border-right: 3px solid black;
border-bottom: 3px solid black;
}

.guic-automatic-grid-cell {
border-top: 3px solid black;
border-left: 3px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
color: white;
font-size: 1.5rem;
}
`);
}
}
customElements.define('automatic-grid', ExtendedAutomaticGrid);
</script> -->
</body>

</html>
</html>
79 changes: 45 additions & 34 deletions components/automatic-grid/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,22 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import { Components } from 'coherent-gameface-components';
const components = new Components();
import template from './template.html';
// import { Components } from 'coherent-gameface-components';
// const components = new Components();
// import template from './template.html';
import { components } from '../../lib/components.js';

const templateCSS = `
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-grid.css">
`;

const templateHTML = `
<div class="guic-automatic-grid">
<div class="guic-automatic-grid-container"></div>
<slot name="item"></slot>
</div>
`;

const maxColumns = 12; // Max number of columns as it's based on the grid component
const BaseComponent = components.BaseComponent;
Expand Down Expand Up @@ -34,34 +47,18 @@ class AutomaticGrid extends BaseComponent {

/**
* @constructor
* @param {string} additionalStyles
*/
constructor() {
constructor(additionalStyles) {
super();
// use the template to create the base grid
this.template = template;
// this.template = template;
// const additionalStyles = document.querySelector('[data-automatic-grid]');
this.template = templateCSS + `<style>${additionalStyles}</style>` + templateHTML;

this.dragStart = this.dragStart.bind(this);
this.dragMove = this.dragMove.bind(this);
this.dragEnd = this.dragEnd.bind(this);
this.init = this.init.bind(this);
}

/**
* Initialize the custom component.
* Set template, attach event listeners, setup initial state etc.
* @param {object} data
*/
init(data) {
this.setupTemplate(data, () => {
// render the template
components.renderOnce(this);

// Get the grid container, where all of the cells will be
this._gridContainer = this.querySelector('.guic-automatic-grid-container');

this.buildGrid();
this.addItemsToCells();
});
}

/**
Expand All @@ -82,10 +79,13 @@ class AutomaticGrid extends BaseComponent {
// The array of cells
this._cells = [];

// Load the template
components.loadResource(this)
.then(this.init)
.catch(err => console.error(err));
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = this.template;

this._gridContainer = this.shadowRoot.querySelector('.guic-automatic-grid-container');

this.buildGrid();
this.addItemsToCells();
}

/**
Expand All @@ -104,6 +104,7 @@ class AutomaticGrid extends BaseComponent {
const element = document.createElement('div');

element.classList.add('guic-automatic-grid-cell');
element.setAttribute('part', 'cell');
element.classList.add(`guic-col-${AutomaticGrid.formatFloat(maxColumns / this._columns)}`); // We add the grid class to each cell based on the number of columns

element.dataset.col = (i % this._columns) + 1; // We set the cell column so that it's available if we need it later. +1 so that columns don't start from 0
Expand All @@ -122,7 +123,15 @@ class AutomaticGrid extends BaseComponent {
*/
addItemsToCells() {
// The items we have added to the grid
const items = Array.from(this.querySelectorAll('component-slot'));
const items = Array.from(this.querySelectorAll('[slot="item"]'));
// items.forEach((item) => {
// item.addEventListener('mouseup', (event) => {
// this.dispatchEvent(new MouseEvent('mouseup', {
// bubbles: true,
// composed: true,
// }));
// });
// });

// We check if an item has data-bind-for and we skip adding the items before the data-binding. After data-binding the attribute is "data-bind-meta-for"
if (items.findIndex(item => item.hasAttribute('data-bind-for')) >= 0) return;
Expand Down Expand Up @@ -189,6 +198,7 @@ class AutomaticGrid extends BaseComponent {
dragStart(event) {
// We set the draggedItem to the one we are dragging so it can be used in other functions.
this._draggedItem = event.currentTarget;
// const target = this.shadowRoot.elementFromPoint(event.clientX, event.clientY);

// Calculate offsetX and offsetY from the top left corner of the dragged item
const offsetX = event.clientX - this._draggedItem.getBoundingClientRect().x;
Expand Down Expand Up @@ -223,19 +233,20 @@ class AutomaticGrid extends BaseComponent {
* @param {HTMLEvent} event
*/
dragEnd(event) {
const target = this.shadowRoot.elementFromPoint(event.clientX, event.clientY);

// Removes the class that was added when the drag started
this._draggedItem.classList.remove('guic-dragged');

this.dropItem(event.target);
this.dropItem(target);

// Reset the registry point to the top left
this._draggedItem.style.transform = `translateX(0) translateY(0)`;

// Removes the dragged item
this._draggedItem = null;

document.removeEventListener('mousemove', this.dragMove);
document.removeEventListener('mouseup', this.dragEnd);
// Removes the dragged item
this._draggedItem = null;
}

/**
Expand Down Expand Up @@ -281,4 +292,4 @@ class AutomaticGrid extends BaseComponent {
}

components.defineCustomElement('gameface-automatic-grid', AutomaticGrid);
export default AutomaticGrid;
// customElements.define('gameface-automatic-grid', AutomaticGrid);
Loading
Loading