mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2025-03-14 13:08:27 +03:00
widget uses LazyElemnt
This commit is contained in:
parent
5044d78378
commit
257b3a2b88
5 changed files with 42 additions and 82 deletions
|
@ -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');
|
||||
|
|
|
@ -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 .>"
|
||||
|
|
|
@ -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());
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue