dom manipulations uses elements

This commit is contained in:
realaravinth 2021-05-09 16:39:52 +05:30
parent cd729effb9
commit 686774a182
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
30 changed files with 262 additions and 128 deletions

View file

@ -1,4 +1,4 @@
name: CI (Linux)
name: Coverage
on:
pull_request:
@ -52,6 +52,9 @@ jobs:
- name: Install JavaScript Dependencies
run: yarn install
- name: Build frontend
run: yarn build
- name: Run the tests
run: yarn test

View file

@ -1,4 +1,4 @@
name: CI (Linux)
name: Check Build
on:
pull_request:

View file

@ -19,6 +19,9 @@
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
// check all layouts
box-sizing: border-box;
}
a {
@ -31,6 +34,7 @@ li {
html {
height: 100%;
box-sizing: border-box;
}
body {

View file

@ -27,7 +27,7 @@ body {
.auth-inner-container {
@include inner-container;
flex-direction: column;
margin: 0px, auto;
margin: auto;
width: $auth-content-width;
top: 50%;
left: 50%;

View file

@ -33,7 +33,7 @@
width: 90%;
justify-content: center;
align-items: center;
box-sizing: content-box;
// box-sizing: content-box;
background-color: $white;
margin: auto;
padding-bottom: 30px;

View file

@ -1,19 +1,19 @@
<ul class="details">
<li class="details__item">&copy; 2021 mCAptcha Developers</li>
<li class="details__dummy-filler"></li>
<li class="details__item">
<a class="details__link" href="<.= crate::PKG_HOMEPAGE .>">Homepage</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.about .>">About</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.thanks .>">Thanks</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.donate .>">Donate</a>
</li>
<li class="details__item">
v<.= crate::VERSION .>-<.= crate::GIT_COMMIT_HASH[0..8] .>
</li>
</ul>
<footer role="contentinfo">
<ul class="details">
<li class="details__item">
<a class="details__link" href="<.= crate::PKG_HOMEPAGE .>">Homepage</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.about .>">About</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.thanks .>">Thanks</a>
</li>
<li class="details__item">
<a class="details__link" href="<.= crate::PAGES.donate .>">Donate</a>
</li>
<li class="details__item">
v<.= crate::VERSION .>-<.= crate::GIT_COMMIT_HASH[0..8] .>
</li>
</ul>
</footer>

View file

@ -18,27 +18,20 @@
.details {
list-style: none;
position: absolute;
position: relative;
bottom: 0px;
box-sizing: border-box;
width: 95%;
display: flex;
font-size: 14px;
margin: auto;
}
.details__dummy-filler {
flex: 10;
background-color: $backdrop;
}
.details__item {
margin: auto 10px;
}
.details__item:first-child {
flex: 4;
}
.details__link {
color: $blue-link;
}

View file

@ -1,5 +1,5 @@
<. include!("./details-footers.html"); .>
</main>
<. include!("./details-footers.html"); .>
</body>
<link rel="stylesheet" href="<.= &*crate::CSS .>" type="text/css" media="all">
<script src="<.= &*crate::JS .>"></script>

View file

@ -2,7 +2,41 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><.= PAGE .> | <.= crate::pages::NAME .></title>
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="HTML and CSS Tips and Tricks for creating applications that are both responsive and accessible out of the box"
/>
<meta name="author" content="Aravinth Manivannan" />
<meta name="twitter:card" value="summary_large_image" />
<meta name="twitter:site" content="@realaravinth" />
<meta
name="twitter:title"
content="<.= PAGE .> | <.= crate::pages::NAME .>"
/>
<meta
name="twitter:description"
content="mCaptcha is an AGPL'd, privacy focued, proof-of-work based CAPTCHA System"
/>
<meta name="twitter:creator" content="@realaravinth" />
<meta name="twitter:image" content="https://mcaptcaha.org/icon-trans.png" />
<meta
property="og:title"
content="<.= PAGE .> | <.= crate::pages::NAME .>"
/>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://mcaptcaha.org" />
<meta property="og:image" content="https://mcaptcaha.org/icon-trans.png" />
<meta
property="og:description"
content="mCaptcha is an AGPL'd, privacy focued, proof-of-work based CAPTCHA System"
/>
<meta property="og:site_name" content="Responsible Web Applications" />
</head>
<body>
<body class="layout"></body>
</html>

View file

@ -26,11 +26,12 @@ import log from './logger';
import VIEWS from './views/v1/routes';
import './main.scss';
import './auth/css/main.scss';
import './components/details.scss';
import './panel/css/main.scss';
import './panel/header/sidebar/main.scss';
import './panel/taskbar/main.scss';
import './panel/navbar/main.scss';
import './panel/header/taskbar/main.scss';
import './panel/help-banner/main.scss';
import './panel/sitekey/add/css/main.scss';
import './panel/sitekey/list/css/main.scss';
@ -46,4 +47,8 @@ router.register(VIEWS.registerUser, register.index);
router.register(VIEWS.loginUser, login.index);
router.register(VIEWS.addSiteKey, addSiteKey.index);
router.route();
try {
router.route();
} catch (e) {
console.log(e);
}

64
templates/main.scss Normal file
View file

@ -0,0 +1,64 @@
/*
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// creadits: https://codepen.io/rachelandrew/pen/MmOvPr/?editors=1100
.layout {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: 1fr 6fr 1fr;
}
h1,
p {
margin: 0 0 1em 0;
}
/* no grid support? check this out later */
/*
.sidebar {
float: left;
width: 19.1489%;
}
.content {
float: right;
width: 79.7872%;
}
*/
/* make a grid */
header,
footer {
grid-column: 2 / 5;
/* needed for the floated layout */
clear: both;
}
nav {
grid-row: 1/ 4;
/* needed for the floated layout */
clear: both;
}
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps.
* @supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
*/

View file

@ -23,7 +23,6 @@
.panel-main {
@include main;
margin-left: 14%;
}
.inner-container {

View file

@ -1,3 +1,3 @@
<header>
<. include!("./sidebar/index.html"); .>
<. include!("./taskbar/index.html"); .>
</header>

View file

@ -15,9 +15,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '../../reset';
@import '../../vars';
@import '../../components/button';
@import '../../../reset';
@import '../../../vars';
@import '../../../components/button';
.taskbar {
display: flex;

View file

@ -1,7 +1,7 @@
<. include!("../components/headers.html"); .>
<. include!("./navbar/index.html"); .>
<. include!("./header/index.html"); .>
<main class="panel-main">
<. include!("./taskbar/index.html"); .>
<. include!("./help-banner/index.html"); .>
<div class="inner-container">

View file

@ -15,16 +15,17 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '../../../reset';
@import '../../../vars';
@import '../../reset';
@import '../../vars';
.secondary-menu {
position: fixed;
width: 14%;
left: 0;
bottom: 0;
top: 0;
right: 0;
// position: fixed;
// width: 14%;
// left: 0;
// bottom: 0;
// top: 0;
// right: 0;
height: 100%;
overflow: auto;

View file

@ -26,7 +26,7 @@
width: 90%;
justify-content: center;
align-items: center;
box-sizing: content-box;
// box-sizing: content-box;
background-color: $white;
margin: auto;
padding-bottom: 30px;

View file

@ -1,9 +1,9 @@
<. include!("../../../components/headers.html"); .> <. include!("../../header/index.html");
.>
<. include!("../../../components/headers.html"); .>
<. include!("../../navbar/index.html"); .>
<. include!("../../header/index.html"); .>
<main class="panel-main">
<. include!("../../taskbar/index.html"); .> <.
include!("../../help-banner/index.html"); .>
<. include!("../../help-banner/index.html"); .>
<!-- Main content container -->
<div class="inner-container">
<!-- Main menu/ important actions roaster -->

View file

@ -25,7 +25,6 @@ import CONST from './const';
import log from '../../../../logger';
/**
* Gets executed when 'Add' Button is clicked to add levels
* Used to validate levels per m_captcha::defense::Defense's
@ -43,19 +42,24 @@ const addLevel = (e: Event) => {
return log.error('Aborting level addition');
}
eventTarget.remove();
PARENT.innerHTML = getRemoveButtonHTML(onScreenLevel);
PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`;
// eventTarget.remove();
FIELDSET.replaceChild(getRemoveButtonHTML(onScreenLevel), PARENT);
// PARENT.appendChild( PARENT.htmlFor = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${onScreenLevel}`;
//FIELDSET.innerHTML += getRemoveButtonHTML(numLevels);
//PARENT.remove();
const newLevelHTML = getHtml(onScreenLevel + 1);
FIELDSET.insertAdjacentHTML('afterend', newLevelHTML);
const newLevelElement = getHtml(onScreenLevel + 1);
FIELDSET.insertAdjacentElement('afterend', newLevelElement);
UpdateLevel.register(onScreenLevel);
addRemoveLevelButtonEventListener(onScreenLevel);
addLevelButtonAddEventListener();
const main = document.querySelector('body');
const style = main.style.display;
main.style.display = 'none';
main.style.display = style;
};
/** adds onclick event listener */
@ -73,43 +77,64 @@ const addLevelButtonAddEventListener = () => {
const getHtml = (level: number) => {
log.debug(`[generating HTML getHtml]level: ${level}`);
const HTML = `
<fieldset class="sitekey__level-container" id="level-group-${level}">
<legend class="sitekey__level-title">
Level ${level}
</legend>
<label class="sitekey-form__level-label" for="visitor${level}"
>Visitor
<input
class="sitekey-form__level-input"
type="number"
name="visitor${level}"
id="visitor${level}"
/>
</label>
const fieldset = document.createElement('fieldset'); // new HTMLFieldSetElement();
fieldset.className = CONST.LEVEL_CONTAINER_CLASS;
fieldset.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`;
<label class="sitekey-form__level-label" for="difficulty${level}">
Difficulty
<input
type="number"
name="difficulty${level}"
class="sitekey-form__level-input"
id="difficulty${level}"
/>
</label>
<label class="sitekey-form__level-label--hidden" for="add">
Add level
<input
class="sitekey-form__level-add-level-button"
type="button"
name="add"
id="add"
value="Add"
/>
</label>
</fieldset>
`;
return HTML;
const legend = document.createElement('legend'); // new HTMLLegendElement();
legend.className = CONST.LEGEND_CLASS;
const legendText = document.createTextNode(`Level ${level}`);
legend.appendChild(legendText);
fieldset.appendChild(legend);
const vistitorLabel = document.createElement('label'); //document.createElement('label');
vistitorLabel.className = CONST.LABEL_CLASS;
const visitorText = document.createTextNode('Visitor');
vistitorLabel.appendChild(visitorText);
const visitor = document.createElement('input'); //document.createElement('input');
const visitorId = `${CONST.VISITOR_WITHOUT_LEVEL}${level}`;
visitor.className = CONST.LEVEL_INPUT_CLASS;
visitor.type = 'number';
visitor.name = visitorId;
visitor.id = visitorId;
vistitorLabel.htmlFor = visitorId;
vistitorLabel.appendChild(visitor);
fieldset.appendChild(vistitorLabel);
const difficultyLabel = document.createElement('label');
difficultyLabel.className = CONST.LABEL_CLASS;
const difficultyText = document.createTextNode('Difficulty');
difficultyLabel.appendChild(difficultyText);
const difficulty = document.createElement('input');
const difficultyID = `${CONST.DIFFICULTY_WITHOUT_LEVEL}${level}`;
difficulty.type = 'number';
difficulty.name = difficultyID;
difficulty.className = CONST.LEVEL_INPUT_CLASS;
difficulty.id = difficultyID;
difficultyLabel.htmlFor = difficultyID;
difficultyLabel.appendChild(difficulty);
fieldset.appendChild(difficultyLabel);
const addLevelLabel = document.createElement('label');
addLevelLabel.className = CONST.REMOVE_LEVEL_LABEL_CLASS;
const addLevel = document.createElement('input');
addLevel.className = CONST.ADD_LEVEL_BUTTON;
addLevel.type = 'button';
const addLevelButtonID = 'add';
addLevel.name = addLevelButtonID;
addLevel.id = addLevelButtonID;
addLevelLabel.htmlFor = addLevelButtonID;
const addText = document.createTextNode('Add level');
addLevelLabel.appendChild(addText);
addLevel.value = 'Add';
addLevelLabel.appendChild(addLevel);
fieldset.appendChild(addLevelLabel);
return fieldset;
};
export default addLevelButtonAddEventListener;

View file

@ -69,16 +69,21 @@ export const addRemoveLevelButtonEventListenerAll = () => {
*/
export const getRemoveButtonHTML = (level: number) => {
log.log(`[generating HTML getHtml]level: ${level}`);
const HTML = `
${CONST.REMOVE_LEVEL_LABEL_TEXT}
<input
class="${CONST.REMOVE_LEVEL_BUTTON_CLASS}"
type="button"
name="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
id="${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}"
value="x"
/>
</fieldset>
`;
return HTML;
const btn = document.createElement('input');
btn.className = CONST.REMOVE_LEVEL_BUTTON_CLASS;
btn.type = 'button';
const id = `${CONST.REMOVE_LEVEL_BUTTON_ID_WITHOUT_LEVEL}${level}`;
btn.name = id;
btn.id = id;
btn.value = 'x';
const removeLabel = document.createElement('label');
removeLabel.className = CONST.REMOVE_LEVEL_LABEL_CLASS;
const removeLabelText = document.createTextNode('RemoveLevel');
removeLabel.appendChild(removeLabelText);
removeLabel.appendChild(btn);
removeLabel.htmlFor = id;
return removeLabel;
};

View file

@ -46,7 +46,7 @@ const setUp = () => {
log.setMode(MODE.none);
it('addLevelButton works', () => {
it('removeLevelButton works', () => {
setUp();
for (let i = 1; i < 4; i++) {

View file

@ -53,9 +53,11 @@ const updateLevelNumbersOnDOM = (id: number) => {
}
// rename legend
const legendText = document.createTextNode(`Level ${newLevel}`);
levelGroup.getElementsByTagName(
'legend',
)[0].innerText = `Level ${newLevel}`;
)[0].appendChild(legendText);
// rename labels
updateLabels(levelGroup, newLevel);

View file

@ -15,7 +15,6 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import getNumLevels from '../../levels/getNumLevels';
import {getAddForm, trim} from '../../setupTests';
import updateInputs from './updateInputs';
import CONST from '../../const';
@ -29,7 +28,7 @@ document.body.innerHTML = getAddForm();
log.setMode(MODE.none);
it('addLevelButton works', () => {
it('updateInputs works', () => {
setupAddlevels();
// removing level 2
const level = 2;

View file

@ -36,7 +36,9 @@ const updateInput = (levelGroup: Element, newLevel: number) => {
input.id = id;
input.name = id;
} else {
throw new Error('Did you add an extra input to DOM?');
if (input.id != 'add') {
throw new Error(`Did you add an extra input to DOM? ${input.id} ${input.className} ${input.name}`);
}
}
});
};

View file

@ -1,9 +1,8 @@
<. include!("../../../components/headers.html"); .> <.
include!("../../header/index.html"); .>
<. include!("../../../components/headers.html"); .>
<. include!("../../navbar/index.html"); .>
<. include!("../../header/index.html"); .>
<main class="panel-main">
<. include!("../../taskbar/index.html"); .> <.
include!("../../help-banner/index.html"); .>
<.include!("../../help-banner/index.html"); .>
<!-- Main content container -->
<div class="inner-container">
<!-- Main menu/ important actions roaster -->

View file

@ -1,8 +1,7 @@
<. include!("../../../components/headers.html"); .> <.
include!("../../header/index.html"); .>
<. include!("../../../components/headers.html"); .>
<. include!("../../navbar/index.html"); .>
<. include!("../../header/index.html"); .>
<main class="panel-main">
<. include!("../../taskbar/index.html"); .> <.
include!("../../help-banner/index.html"); .>
<!-- Main content container -->
<div class="inner-container">

View file

@ -4,9 +4,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
//devtool: 'inline-source-map',
//mode: ''development,
mode: 'production',
devtool: 'inline-source-map',
mode: 'development',
//mode: 'production',
entry: './templates/index.ts',
output: {
filename: 'bundle.js',