dtookey
/
Engine_Rebuild
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

implemented simple grid api

Browse Source
build-validation
David Tookey 5 years ago
parent 81a60ecb09
commit 93bb0d461d
7 changed files with 130 additions and 8 deletions
Show Stats Download Patch File Download Diff File

2
src/assets/pages/index.html
Unescape Escape View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Landing page</title> <title>Landing page</title>
<link rel="stylesheet" href="styles/bootstrap.css"> <link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles/default.css"> <link rel="stylesheet" type="text/css" href="styles/default.css">
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self';">--> <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self';">-->

3
src/assets/pages/scripts/tsUtil.js
Unescape Escape View File

@ -0,0 +1,3 @@
function loadTSTarget(name) {
require(`../../util/${name}`);
}

31
src/assets/pages/second.html
Unescape Escape View File

@ -3,11 +3,32 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Landing page</title> <title>Landing page</title>
<link rel="stylesheet" type="text/css" href="styles/default.css">
<link rel="stylesheet" type="text/css" href="styles/gridutil.css">
</head> </head>
<body> <body style="display:inline-block;">
Welcome to the second page <div class="grid3">
<br> <div class="grid-item">CONTENT</div>
<br> <div class="grid-item">CONTENT</div>
<a href="index.html">Testing first Page</a> <div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
</div>
<br/>
<div class="grid3">
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
<div class="grid-item">CONTENT</div>
</div>
</body> </body>
<script src="scripts/tsUtil.js"></script>
<script>loadTSTarget("gridUtil.js")</script>
</html> </html>

10
src/assets/pages/styles/gridutil.css
Unescape Escape View File

@ -0,0 +1,10 @@
.grid3{
border: 1px solid red;
display: inline-block;
overflow: hidden;
}
.grid-item{
position: absolute;
z-index: 3;
}

2
src/index.js
Unescape Escape View File

@ -24,8 +24,6 @@ function initialize () {
nodeIntegration: true, nodeIntegration: true,
preload: path.join(__dirname, 'util', 'preload.js') preload: path.join(__dirname, 'util', 'preload.js')
}, },
} }
if (process.platform === 'linux') { if (process.platform === 'linux') {

70
src/ts_source/gridUtil.ts
Unescape Escape View File

@ -0,0 +1,70 @@
function arrangeGrids() {
let $ = require('jquery');
let grids = $(".grid3");
for (let i = 0, l = grids.length; i < l; i++) {
let grid = grids[i];
arrangeGrid(grid, 3);
}
}
function arrangeGrid(grid: HTMLElement, width: number) {
let children = grid.children;
for (let i = 0, l = children.length; i < l; i++) {
if (0 === i) {
placeZero(children[i] as HTMLElement);
continue;
}
let sibling = children[i - 1];
let child = children[i];
if (0 === (i % width)) {
let rowBegin = children[i - width];
placeUnder(rowBegin as HTMLElement, child as HTMLElement, 15);
} else {
placeRight(sibling as HTMLElement, child as HTMLElement, 15);
}
}
}
function placeZero(anchor: HTMLElement) {
let posX = anchor.offsetLeft;
let posY = anchor.offsetTop;
anchor.style.left = `${posX}px`
anchor.style.top = `${posY}px`;
}
function placeRight(anchor: HTMLElement, satellite: HTMLElement, spacing: number) {
let posX = anchor.offsetLeft;
let posY = anchor.offsetTop;
let finalX = posX + anchor.clientWidth + spacing;
let finalY = posY;
satellite.style.left = `${finalX}px`
satellite.style.top = `${finalY}px`;
let childX = finalX + satellite.clientWidth - satellite.parentElement.offsetLeft;
if (childX > satellite.parentElement.clientWidth) {
console.log(`setting parent width to ${childX}`)
satellite.parentElement.style.width = `${childX}px`;
}
}
function placeUnder(anchor: HTMLElement, satellite: HTMLElement, spacing: number) {
let posX = anchor.offsetLeft;
let posY = anchor.offsetTop;
let finalX = posX;
let finalY = posY + anchor.clientHeight + spacing;
satellite.style.left = `${finalX}px`
satellite.style.top = `${finalY}px`;
let childY = finalY + satellite.clientHeight - satellite.parentElement.offsetTop;
if (childY > satellite.parentElement.clientHeight) {
console.log(`setting parent height to ${childY}`)
satellite.parentElement.style.height = `${childY}px`;
}
}
arrangeGrids();

20
src/ts_source/htmlUtil.ts
Unescape Escape View File

@ -0,0 +1,20 @@
export module HTMLUtil {
export function getElementXinParent(elem: HTMLElement, parent: HTMLElement): number {
let styleLeft = elem.style.left;
if (0 === styleLeft.length) {
return parent.offsetLeft;
} else {
return parent.offsetLeft+parseInt(styleLeft);
}
}
export function getElementYInParent(elem: HTMLElement, parent: HTMLElement): number {
let styleTop = elem.style.top;
if (0 === styleTop.length) {
return parent.offsetTop;
} else {
return parent.offsetTop + parseInt(styleTop);
}
}
}
Write Preview
Loading…
Cancel
Save