implemented simple grid api

5 years ago · 93bb0d461d
parent 81a60ecb09
commit 93bb0d461d
7 changed files with 130 additions and 8 deletions
--- a/src/assets/pages/index.html
+++ b/src/assets/pages/index.html
@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <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">
    <!--    <meta http-equiv="Content-Security-Policy" content="script-src 'self';">-->

--- a/src/assets/pages/scripts/tsUtil.js
+++ b/src/assets/pages/scripts/tsUtil.js
@ -0,0 +1,3 @@
+function loadTSTarget(name) {
+    require(`../../util/${name}`);
+}
--- a/src/assets/pages/second.html
+++ b/src/assets/pages/second.html
@ -3,11 +3,32 @@
 <head>
    <meta charset="UTF-8">
    <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>
-<body>
-    Welcome to the second page
-<br>
-<br>
-<a href="index.html">Testing first Page</a>
+<body style="display:inline-block;">
+<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>
+<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>
+<script src="scripts/tsUtil.js"></script>
+<script>loadTSTarget("gridUtil.js")</script>
 </html>
--- a/src/assets/pages/styles/gridutil.css
+++ b/src/assets/pages/styles/gridutil.css
@ -0,0 +1,10 @@
+.grid3{
+    border: 1px solid red;
+    display: inline-block;
+    overflow: hidden;
+}
+
+.grid-item{
+    position: absolute;
+    z-index: 3;
+}
--- a/src/index.js
+++ b/src/index.js
@ -24,8 +24,6 @@ function initialize () {
                nodeIntegration: true,
                preload: path.join(__dirname, 'util', 'preload.js')
            },
-
-
        }

        if (process.platform === 'linux') {
--- a/src/ts_source/gridUtil.ts
+++ b/src/ts_source/gridUtil.ts
@ -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();
--- a/src/ts_source/htmlUtil.ts
+++ b/src/ts_source/htmlUtil.ts
@ -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);
+        }
+    }
+
+}