mirror/mCaptcha
1
0
Fork 1
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2026-02-11 10:05:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

dom manipulations uses elements

Browse Source
This commit is contained in:
realaravinth
2021-05-09 16:39:52 +05:30
parent cd729effb9
commit 686774a182
30 changed files with 262 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/panel/sitekey/add/css/main.scss
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;

8
templates/panel/sitekey/add/index.html
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 -->

109
templates/panel/sitekey/add/ts/addLevelButton.ts
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;

29
templates/panel/sitekey/add/ts/removeLevelButton/index.ts
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;
};

2
templates/panel/sitekey/add/ts/removeLevelButton/removeLevelButton.test.ts
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++) {

4
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/index.ts
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);

3
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.test.ts
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;

4
templates/panel/sitekey/add/ts/removeLevelButton/updateDom/updateInputs.ts
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}`);
}
}
});
};

9
templates/panel/sitekey/list/index.html
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 -->

7
templates/panel/sitekey/view/index.html
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">