Merge remote-tracking branch 'origin/master' into RebeccaBranch
commit
4c8dd34f03
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,3 @@
|
|||||||
{
|
{
|
||||||
"pdf": "pdf-icon.svg"
|
".pdf": "pdf-icon.svg"
|
||||||
}
|
}
|
||||||
@ -1,25 +1,28 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- Required meta tags -->
|
<meta charset="UTF-8">
|
||||||
<meta charset="utf-8">
|
<title>Landing page</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<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';">-->
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
|
||||||
<link rel="stylesheet" href="styles/bootstrap.css">
|
|
||||||
|
|
||||||
<title>Resources</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Resources</h1>
|
<div class="h2">
|
||||||
|
Welcome to the landing page for JDSfaulkner resources
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ul class="list-unstyled d-inline-block debug-green" id="container"></ul>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a href="second.html">Go to the second page</a>
|
||||||
|
<br><br>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
|
|
||||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
|
|
||||||
-->
|
|
||||||
<script>let $ = require('jquery');</script>
|
<script>let $ = require('jquery');</script>
|
||||||
<script>require('popper.js')</script>
|
<script>require('popper.js')</script>
|
||||||
<script>require('bootstrap')</script>
|
<script>require('bootstrap')</script>
|
||||||
|
<script src="scripts/index_app.js"></script>
|
||||||
</html>
|
</html>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
function loadTSTarget(name) {
|
||||||
|
require(`../../util/${name}`);
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
.grid3{
|
||||||
|
border: 1px solid red;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
@ -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();
|
||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
describe('default', ()=>{
|
||||||
|
it('print', ()=>{
|
||||||
|
console.log("okay?")
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue