mirrors/mCaptcha
1
0
Fork 0
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2025-03-14 13:08:27 +03:00
Code Issues Projects Releases Packages Wiki Activity

widget uses LazyElemnt

Browse source
This commit is contained in:
realaravinth 2021-07-21 21:02:03 +05:30
parent 5044d78378
commit 257b3a2b88
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
5 changed files with 42 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/auth/sudo/getForm.test.ts
View file

@ -21,7 +21,7 @@ it('sudo form works', () => {
try {
form.get();
} catch (e) {
expect(e.message).toBe("Element form is undefined");
expect(e.message).toBe('Element form is undefined');
}
const element = document.createElement('form');

8
templates/widget/index.html
View file

@ -16,10 +16,10 @@
id="widget__verification-checkbox"
class="widget__verification-checkbox"
type="checkbox" />
<span class="widget__verification-text--before">I'm not a robot</span>
<span class="widget__verification-text--during">Processing...</span>
<span class="widget__verification-text--after">Verified!</span>
<span class="widget__verification-text--error">Something wen't wrong</span>
<span id="widget__verification-text--before">I'm not a robot</span>
<span id="widget__verification-text--during">Processing...</span>
<span id="widget__verification-text--after">Verified!</span>
<span id="widget__verification-text--error">Something wen't wrong</span>
</label>
<div class="widget__mcaptcha-details">
<a href="<.= crate::PKG_HOMEPAGE .>"

98
templates/widget/js/const.ts
View file

@ -8,6 +8,7 @@
* this program. If not, see <https://spdx.org/licenses/MIT.html> for
* MIT or <http://www.apache.org/licenses/LICENSE-2.0> for Apache.
*/
import LazyElement from '../../utils/lazyElement';
/** mcaptcha checkbox ID **/
export const btnId = 'widget__verification-checkbox';
@ -54,97 +55,56 @@ export const btn = () => {
};
export const messageText = () => {
let beforeClass = 'widget__verification-text--before';
let duringClass = 'widget__verification-text--during';
let errorClass = 'widget__verification-text--error';
let afterClass = 'widget__verification-text--after';
const beforeID = 'widget__verification-text--before';
const duringID = 'widget__verification-text--during';
const errorID = 'widget__verification-text--error';
const afterID = 'widget__verification-text--after';
let before: HTMLElement;
let after: HTMLElement;
let during: HTMLElement;
let error: HTMLElement;
const before = new LazyElement(beforeID);
const after = new LazyElement(afterID);
const during = new LazyElement(duringID);
const error = new LazyElement(errorID);
// let before: HTMLElement;
// let after: HTMLElement;
// let during: HTMLElement;
// let error: HTMLElement;
/** runner fn to display HTMLElement **/
const showMsg = (e: HTMLElement) => (e.style.display = 'block');
/** runner fn to hide HTMLElement **/
const hideMsg = (e: HTMLElement) => (e.style.display = 'none');
/** lazy init and get before elementt **/
const getBefore = () => {
if (before === null || before === undefined) {
before = <HTMLElement>document.querySelector(`.${beforeClass}`);
if (before === null || before === undefined) {
throw new Error(`before element not found)`);
}
return before;
}
};
/** lazy init and get after elementt **/
const getAfter = () => {
if (after === null || after === undefined) {
after = <HTMLSpanElement>document.querySelector(`.${afterClass}`);
if (after === null || after === undefined) {
throw new Error(`after element not found)`);
}
}
return after;
};
/** lazy init and get error elementt **/
const getError = () => {
if (error === null || error === undefined) {
error = <HTMLSpanElement>document.querySelector(`.${errorClass}`);
if (error === null || error === undefined) {
throw new Error(`before error not found)`);
}
}
return error;
};
/** lazy init and get during elementt **/
const getDuring = () => {
if (during === null || during === undefined) {
during = <HTMLSpanElement>document.querySelector(`.${duringClass}`);
if (during === null || during === undefined) {
throw new Error(`before during not found)`);
}
}
return during;
};
return {
/** display "before" message **/
before: () => {
showMsg(getBefore());
hideMsg(getAfter());
hideMsg(getDuring());
hideMsg(getError());
showMsg(before.get());
hideMsg(after.get());
hideMsg(during.get());
hideMsg(error.get());
},
/** display "after" message **/
after: () => {
hideMsg(getBefore());
showMsg(getAfter());
hideMsg(getDuring());
hideMsg(getError());
hideMsg(before.get());
showMsg(after.get());
hideMsg(during.get());
hideMsg(error.get());
},
/** display "during" message **/
during: () => {
hideMsg(getBefore());
hideMsg(getAfter());
showMsg(getDuring());
hideMsg(getError());
hideMsg(before.get());
hideMsg(after.get());
showMsg(during.get());
hideMsg(error.get());
},
/** display "error" message **/
error: () => {
hideMsg(getBefore());
hideMsg(getAfter());
hideMsg(getDuring());
showMsg(getError());
hideMsg(before.get());
hideMsg(after.get());
hideMsg(during.get());
showMsg(error.get());
},
};
};

2
templates/widget/js/tests/setupTests.ts
View file

@ -18,7 +18,7 @@ checkbox.id = CONST.btnId;
const getMessages = (state: string) => {
const msg = <HTMLElement>document.createElement('span');
msg.className = `widget__verification-text--${state}`;
msg.id = `widget__verification-text--${state}`;
return msg;
};

14
templates/widget/main.scss
View file

@ -64,33 +64,33 @@
margin: 0 10px;
}
.widget__verification-text--during {
#widget__verification-text--during {
display: none;
}
.widget__verification-text--after {
#widget__verification-text--after {
display: none;
color: green;
}
.widget__verification-text--error {
#widget__verification-text--error {
display: none;
color: red;
}
.widget__verification-checkbox:checked ~ .widget__verification-text--before {
.widget__verification-checkbox:checked ~ #widget__verification-text--before {
display: none;
}
.widget__verification-checkbox:checked ~ .widget__verification-text--during {
.widget__verification-checkbox:checked ~ #widget__verification-text--during {
display: none;
}
.widget__verification-checkbox:checked ~ .widget__verification-text--error {
.widget__verification-checkbox:checked ~ #widget__verification-text--error {
display: none;
}
.widget__verification-checkbox:checked ~ .widget__verification-text--after {
.widget__verification-checkbox:checked ~ #widget__verification-text--after {
display: block;
}