From 686774a1824dbb43cb9f63e2a4ffe511841c8aaa Mon Sep 17 00:00:00 2001 From: realaravinth Date: Sun, 9 May 2021 16:39:52 +0530 Subject: [PATCH] dom manipulations uses elements --- .github/workflows/coverage.yml | 5 +- .github/workflows/linux.yml | 2 +- templates/_reset.scss | 4 + templates/auth/css/main.scss | 2 +- templates/components/_box.scss | 2 +- templates/components/details-footers.html | 38 +++--- templates/components/details.scss | 11 +- templates/components/footers.html | 2 +- templates/components/headers.html | 38 +++++- templates/index.ts | 11 +- templates/main.scss | 64 ++++++++++ templates/panel/css/main.scss | 1 - templates/panel/header/index.html | 2 +- .../panel/{ => header}/taskbar/index.html | 0 .../panel/{ => header}/taskbar/main.scss | 6 +- templates/panel/index.html | 2 +- .../{header/sidebar => navbar}/index.html | 0 .../panel/{header/sidebar => navbar}/index.ts | 0 .../{header/sidebar => navbar}/main.scss | 17 +-- templates/panel/sitekey/add/css/main.scss | 2 +- templates/panel/sitekey/add/index.html | 8 +- .../panel/sitekey/add/ts/addLevelButton.ts | 109 +++++++++++------- .../sitekey/add/ts/removeLevelButton/index.ts | 29 +++-- .../removeLevelButton.test.ts | 2 +- .../ts/removeLevelButton/updateDom/index.ts | 4 +- .../updateDom/updateInputs.test.ts | 3 +- .../updateDom/updateInputs.ts | 4 +- templates/panel/sitekey/list/index.html | 9 +- templates/panel/sitekey/view/index.html | 7 +- webpack.config.js | 6 +- 30 files changed, 262 insertions(+), 128 deletions(-) create mode 100644 templates/main.scss rename templates/panel/{ => header}/taskbar/index.html (100%) rename templates/panel/{ => header}/taskbar/main.scss (93%) rename templates/panel/{header/sidebar => navbar}/index.html (100%) rename templates/panel/{header/sidebar => navbar}/index.ts (100%) rename templates/panel/{header/sidebar => navbar}/main.scss (92%) diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml index bfad3921..b5f2cc90 100644 --- a/.github/workflows/coverage.yml +++ b/.github/workflows/coverage.yml @@ -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 diff --git a/.github/workflows/linux.yml b/.github/workflows/linux.yml index 8996110f..10e29a2f 100644 --- a/.github/workflows/linux.yml +++ b/.github/workflows/linux.yml @@ -1,4 +1,4 @@ -name: CI (Linux) +name: Check Build on: pull_request: diff --git a/templates/_reset.scss b/templates/_reset.scss index a2539ca8..475eaac4 100644 --- a/templates/_reset.scss +++ b/templates/_reset.scss @@ -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 { diff --git a/templates/auth/css/main.scss b/templates/auth/css/main.scss index 897d65b8..db27ab10 100644 --- a/templates/auth/css/main.scss +++ b/templates/auth/css/main.scss @@ -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%; diff --git a/templates/components/_box.scss b/templates/components/_box.scss index 3b82ddb1..b8edb0f6 100644 --- a/templates/components/_box.scss +++ b/templates/components/_box.scss @@ -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; diff --git a/templates/components/details-footers.html b/templates/components/details-footers.html index 5d1811a3..ad576504 100644 --- a/templates/components/details-footers.html +++ b/templates/components/details-footers.html @@ -1,19 +1,19 @@ - + diff --git a/templates/components/details.scss b/templates/components/details.scss index a41031c1..57094e16 100644 --- a/templates/components/details.scss +++ b/templates/components/details.scss @@ -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; } diff --git a/templates/components/footers.html b/templates/components/footers.html index bf342415..60670481 100644 --- a/templates/components/footers.html +++ b/templates/components/footers.html @@ -1,5 +1,5 @@ -<. include!("./details-footers.html"); .> +<. include!("./details-footers.html"); .> diff --git a/templates/components/headers.html b/templates/components/headers.html index cd0d6edd..6a32c2c2 100644 --- a/templates/components/headers.html +++ b/templates/components/headers.html @@ -2,7 +2,41 @@ - <.= PAGE .> | <.= crate::pages::NAME .> + + + + + + + + + + + + + + + + + + + - + + diff --git a/templates/index.ts b/templates/index.ts index f866e321..920dedcf 100644 --- a/templates/index.ts +++ b/templates/index.ts @@ -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); +} diff --git a/templates/main.scss b/templates/main.scss new file mode 100644 index 00000000..b313d4c4 --- /dev/null +++ b/templates/main.scss @@ -0,0 +1,64 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +// 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; + } +} + */ diff --git a/templates/panel/css/main.scss b/templates/panel/css/main.scss index 1c41d23f..4580d736 100644 --- a/templates/panel/css/main.scss +++ b/templates/panel/css/main.scss @@ -23,7 +23,6 @@ .panel-main { @include main; - margin-left: 14%; } .inner-container { diff --git a/templates/panel/header/index.html b/templates/panel/header/index.html index bbab0382..e39a2430 100644 --- a/templates/panel/header/index.html +++ b/templates/panel/header/index.html @@ -1,3 +1,3 @@
- <. include!("./sidebar/index.html"); .> + <. include!("./taskbar/index.html"); .>
diff --git a/templates/panel/taskbar/index.html b/templates/panel/header/taskbar/index.html similarity index 100% rename from templates/panel/taskbar/index.html rename to templates/panel/header/taskbar/index.html diff --git a/templates/panel/taskbar/main.scss b/templates/panel/header/taskbar/main.scss similarity index 93% rename from templates/panel/taskbar/main.scss rename to templates/panel/header/taskbar/main.scss index f799fd36..4dfc9685 100644 --- a/templates/panel/taskbar/main.scss +++ b/templates/panel/header/taskbar/main.scss @@ -15,9 +15,9 @@ * along with this program. If not, see . */ -@import '../../reset'; -@import '../../vars'; -@import '../../components/button'; +@import '../../../reset'; +@import '../../../vars'; +@import '../../../components/button'; .taskbar { display: flex; diff --git a/templates/panel/index.html b/templates/panel/index.html index 0970afd0..c566b714 100644 --- a/templates/panel/index.html +++ b/templates/panel/index.html @@ -1,7 +1,7 @@ <. include!("../components/headers.html"); .> +<. include!("./navbar/index.html"); .> <. include!("./header/index.html"); .>
- <. include!("./taskbar/index.html"); .> <. include!("./help-banner/index.html"); .>
diff --git a/templates/panel/header/sidebar/index.html b/templates/panel/navbar/index.html similarity index 100% rename from templates/panel/header/sidebar/index.html rename to templates/panel/navbar/index.html diff --git a/templates/panel/header/sidebar/index.ts b/templates/panel/navbar/index.ts similarity index 100% rename from templates/panel/header/sidebar/index.ts rename to templates/panel/navbar/index.ts diff --git a/templates/panel/header/sidebar/main.scss b/templates/panel/navbar/main.scss similarity index 92% rename from templates/panel/header/sidebar/main.scss rename to templates/panel/navbar/main.scss index f8fc3825..52e7fc26 100644 --- a/templates/panel/header/sidebar/main.scss +++ b/templates/panel/navbar/main.scss @@ -15,16 +15,17 @@ * along with this program. If not, see . */ -@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; diff --git a/templates/panel/sitekey/add/css/main.scss b/templates/panel/sitekey/add/css/main.scss index 02098f70..6be65849 100644 --- a/templates/panel/sitekey/add/css/main.scss +++ b/templates/panel/sitekey/add/css/main.scss @@ -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; diff --git a/templates/panel/sitekey/add/index.html b/templates/panel/sitekey/add/index.html index eec56442..4162012e 100644 --- a/templates/panel/sitekey/add/index.html +++ b/templates/panel/sitekey/add/index.html @@ -1,9 +1,9 @@ -<. include!("../../../components/headers.html"); .> <. include!("../../header/index.html"); -.> +<. include!("../../../components/headers.html"); .> +<. include!("../../navbar/index.html"); .> +<. include!("../../header/index.html"); .>
- <. include!("../../taskbar/index.html"); .> <. - include!("../../help-banner/index.html"); .> + <. include!("../../help-banner/index.html"); .>
diff --git a/templates/panel/sitekey/add/ts/addLevelButton.ts b/templates/panel/sitekey/add/ts/addLevelButton.ts index faed1fa6..e2db8913 100644 --- a/templates/panel/sitekey/add/ts/addLevelButton.ts +++ b/templates/panel/sitekey/add/ts/addLevelButton.ts @@ -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 = ` -
- - Level ${level} - - + const fieldset = document.createElement('fieldset'); // new HTMLFieldSetElement(); + fieldset.className = CONST.LEVEL_CONTAINER_CLASS; + fieldset.id = `${CONST.LEVEL_FIELDSET_ID_WITHOUT_LEVEL}${level}`; - - -
-`; - 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; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/index.ts b/templates/panel/sitekey/add/ts/removeLevelButton/index.ts index dfc09694..e6462ffc 100644 --- a/templates/panel/sitekey/add/ts/removeLevelButton/index.ts +++ b/templates/panel/sitekey/add/ts/removeLevelButton/index.ts @@ -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} - - -`; - 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; }; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts b/templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts index ae13ba60..c9c483c0 100644 --- a/templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts +++ b/templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts @@ -46,7 +46,7 @@ const setUp = () => { log.setMode(MODE.none); -it('addLevelButton works', () => { +it('removeLevelButton works', () => { setUp(); for (let i = 1; i < 4; i++) { diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts index 2de0b8c7..9d75629d 100644 --- a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts @@ -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); diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts index 53f4e490..d9fd338d 100644 --- a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts @@ -15,7 +15,6 @@ * along with this program. If not, see . */ -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; diff --git a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts index 6d976d7a..886be119 100644 --- a/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts +++ b/templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts @@ -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}`); + } } }); }; diff --git a/templates/panel/sitekey/list/index.html b/templates/panel/sitekey/list/index.html index ce3abda9..aefc2e3b 100644 --- a/templates/panel/sitekey/list/index.html +++ b/templates/panel/sitekey/list/index.html @@ -1,9 +1,8 @@ -<. include!("../../../components/headers.html"); .> <. -include!("../../header/index.html"); .> - +<. include!("../../../components/headers.html"); .> +<. include!("../../navbar/index.html"); .> +<. include!("../../header/index.html"); .>
- <. include!("../../taskbar/index.html"); .> <. - include!("../../help-banner/index.html"); .> + <.include!("../../help-banner/index.html"); .>
diff --git a/templates/panel/sitekey/view/index.html b/templates/panel/sitekey/view/index.html index 1c81d876..5aa360c6 100644 --- a/templates/panel/sitekey/view/index.html +++ b/templates/panel/sitekey/view/index.html @@ -1,8 +1,7 @@ -<. include!("../../../components/headers.html"); .> <. -include!("../../header/index.html"); .> - +<. include!("../../../components/headers.html"); .> +<. include!("../../navbar/index.html"); .> +<. include!("../../header/index.html"); .>
- <. include!("../../taskbar/index.html"); .> <. include!("../../help-banner/index.html"); .>
diff --git a/webpack.config.js b/webpack.config.js index 96e9c193..8e0adbdb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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',