diff --git a/src/assets/pages/index.html b/src/assets/pages/index.html index 71a1094..86f18ce 100644 --- a/src/assets/pages/index.html +++ b/src/assets/pages/index.html @@ -3,7 +3,7 @@ Landing page - + diff --git a/src/assets/pages/scripts/tsUtil.js b/src/assets/pages/scripts/tsUtil.js new file mode 100644 index 0000000..34e706d --- /dev/null +++ b/src/assets/pages/scripts/tsUtil.js @@ -0,0 +1,3 @@ +function loadTSTarget(name) { + require(`../../util/${name}`); +} \ No newline at end of file diff --git a/src/assets/pages/second.html b/src/assets/pages/second.html index 3825b8a..dbd13df 100644 --- a/src/assets/pages/second.html +++ b/src/assets/pages/second.html @@ -3,11 +3,32 @@ Landing page + + - - Welcome to the second page -
-
-Testing first Page + +
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
+
+
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
CONTENT
+
+ + \ No newline at end of file diff --git a/src/assets/pages/styles/gridutil.css b/src/assets/pages/styles/gridutil.css new file mode 100644 index 0000000..8fb1ab9 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index b1b4452..3304664 100644 --- 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') { diff --git a/src/ts_source/gridUtil.ts b/src/ts_source/gridUtil.ts new file mode 100644 index 0000000..de36cb1 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/src/ts_source/htmlUtil.ts b/src/ts_source/htmlUtil.ts new file mode 100644 index 0000000..c4d49bc --- /dev/null +++ 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); + } + } + +} \ No newline at end of file