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

widget uses LazyElemnt

Browse Source
This commit is contained in:
realaravinth
2021-07-21 21:02:03 +05:30
parent 5044d78378
commit 257b3a2b88
5 changed files with 42 additions and 82 deletions
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 { try {
form.get(); form.get();
} catch (e) { } catch (e) {
expect(e.message).toBe("Element form is undefined"); expect(e.message).toBe('Element form is undefined');
} }
const element = document.createElement('form'); const element = document.createElement('form');

8
templates/widget/index.html
View File

@@ -16,10 +16,10 @@
id="widget__verification-checkbox" id="widget__verification-checkbox"
class="widget__verification-checkbox" class="widget__verification-checkbox"
type="checkbox" /> type="checkbox" />
<span class="widget__verification-text--before">I'm not a robot</span> <span id="widget__verification-text--before">I'm not a robot</span>
<span class="widget__verification-text--during">Processing...</span> <span id="widget__verification-text--during">Processing...</span>
<span class="widget__verification-text--after">Verified!</span> <span id="widget__verification-text--after">Verified!</span>
<span class="widget__verification-text--error">Something wen't wrong</span> <span id="widget__verification-text--error">Something wen't wrong</span>
</label> </label>
<div class="widget__mcaptcha-details"> <div class="widget__mcaptcha-details">
<a href="<.= crate::PKG_HOMEPAGE .>" <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 * this program. If not, see <https://spdx.org/licenses/MIT.html> for
* MIT or <http://www.apache.org/licenses/LICENSE-2.0> for Apache. * MIT or <http://www.apache.org/licenses/LICENSE-2.0> for Apache.
*/ */
import LazyElement from '../../utils/lazyElement';
/** mcaptcha checkbox ID **/ /** mcaptcha checkbox ID **/
export const btnId = 'widget__verification-checkbox'; export const btnId = 'widget__verification-checkbox';
@@ -54,97 +55,56 @@ export const btn = () => {
}; };
export const messageText = () => { export const messageText = () => {
let beforeClass = 'widget__verification-text--before'; const beforeID = 'widget__verification-text--before';
let duringClass = 'widget__verification-text--during'; const duringID = 'widget__verification-text--during';
let errorClass = 'widget__verification-text--error'; const errorID = 'widget__verification-text--error';
let afterClass = 'widget__verification-text--after'; const afterID = 'widget__verification-text--after';
let before: HTMLElement; const before = new LazyElement(beforeID);
let after: HTMLElement; const after = new LazyElement(afterID);
let during: HTMLElement; const during = new LazyElement(duringID);
let error: HTMLElement; const error = new LazyElement(errorID);
// let before: HTMLElement;
// let after: HTMLElement;
// let during: HTMLElement;
// let error: HTMLElement;
/** runner fn to display HTMLElement **/ /** runner fn to display HTMLElement **/
const showMsg = (e: HTMLElement) => (e.style.display = 'block'); const showMsg = (e: HTMLElement) => (e.style.display = 'block');
/** runner fn to hide HTMLElement **/ /** runner fn to hide HTMLElement **/
const hideMsg = (e: HTMLElement) => (e.style.display = 'none'); 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 { return {
/** display "before" message **/ /** display "before" message **/
before: () => { before: () => {
showMsg(getBefore()); showMsg(before.get());
hideMsg(getAfter()); hideMsg(after.get());
hideMsg(getDuring()); hideMsg(during.get());
hideMsg(getError()); hideMsg(error.get());
}, },
/** display "after" message **/ /** display "after" message **/
after: () => { after: () => {
hideMsg(getBefore()); hideMsg(before.get());
showMsg(getAfter()); showMsg(after.get());
hideMsg(getDuring()); hideMsg(during.get());
hideMsg(getError()); hideMsg(error.get());
}, },
/** display "during" message **/ /** display "during" message **/
during: () => { during: () => {
hideMsg(getBefore()); hideMsg(before.get());
hideMsg(getAfter()); hideMsg(after.get());
showMsg(getDuring()); showMsg(during.get());
hideMsg(getError()); hideMsg(error.get());
}, },
/** display "error" message **/ /** display "error" message **/
error: () => { error: () => {
hideMsg(getBefore()); hideMsg(before.get());
hideMsg(getAfter()); hideMsg(after.get());
hideMsg(getDuring()); hideMsg(during.get());
showMsg(getError()); 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 getMessages = (state: string) => {
const msg = <HTMLElement>document.createElement('span'); const msg = <HTMLElement>document.createElement('span');
msg.className = `widget__verification-text--${state}`; msg.id = `widget__verification-text--${state}`;
return msg; return msg;
}; };

14
templates/widget/main.scss
View File

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