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">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Landing page</title>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<title>Resources</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Resources</h1>
|
||||
|
||||
</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>require('popper.js')</script>
|
||||
<script>require('bootstrap')</script>
|
||||
<br>
|
||||
<br>
|
||||
<a href="second.html">Go to the second page</a>
|
||||
<br><br>
|
||||
</div>
|
||||
</body>
|
||||
<script>let $ = require('jquery');</script>
|
||||
<script>require('popper.js')</script>
|
||||
<script>require('bootstrap')</script>
|
||||
<script src="scripts/index_app.js"></script>
|
||||
</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