141 lines
3.7 KiB
JavaScript
141 lines
3.7 KiB
JavaScript
/*! DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */
|
|
|
|
const config = {
|
|
prefix: 'fr',
|
|
namespace: 'dsfr',
|
|
organisation: '@gouvfr',
|
|
version: '1.11.2'
|
|
};
|
|
|
|
const api = window[config.namespace];
|
|
|
|
const PasswordEmission = {
|
|
TOGGLE: api.internals.ns.emission('password', 'toggle'),
|
|
ADJUST: api.internals.ns.emission('password', 'adjust')
|
|
};
|
|
|
|
class PasswordToggle extends api.core.Instance {
|
|
static get instanceClassName () {
|
|
return 'PasswordToggle';
|
|
}
|
|
|
|
init () {
|
|
this.listenClick();
|
|
this.ascend(PasswordEmission.ADJUST, this.width);
|
|
this.isSwappingFont = true;
|
|
this._isChecked = this.isChecked;
|
|
}
|
|
|
|
get width () {
|
|
const style = getComputedStyle(this.node.parentNode);
|
|
return parseInt(style.width);
|
|
}
|
|
|
|
get isChecked () {
|
|
return this.node.checked;
|
|
}
|
|
|
|
set isChecked (value) {
|
|
this._isChecked = value;
|
|
this.ascend(PasswordEmission.TOGGLE, value);
|
|
}
|
|
|
|
handleClick () {
|
|
this.isChecked = !this._isChecked;
|
|
}
|
|
|
|
swapFont (families) {
|
|
this.ascend(PasswordEmission.ADJUST, this.width);
|
|
}
|
|
}
|
|
|
|
class Password extends api.core.Instance {
|
|
static get instanceClassName () {
|
|
return 'Password';
|
|
}
|
|
|
|
init () {
|
|
this.addAscent(PasswordEmission.TOGGLE, this.toggle.bind(this));
|
|
this.addAscent(PasswordEmission.ADJUST, this.adjust.bind(this));
|
|
}
|
|
|
|
toggle (value) {
|
|
this.descend(PasswordEmission.TOGGLE, value);
|
|
}
|
|
|
|
adjust (value) {
|
|
this.descend(PasswordEmission.ADJUST, value);
|
|
}
|
|
}
|
|
|
|
const PasswordSelector = {
|
|
PASSWORD: api.internals.ns.selector('password'),
|
|
INPUT: api.internals.ns.selector('password__input'),
|
|
LABEL: api.internals.ns.selector('password__label'),
|
|
TOOGLE: `${api.internals.ns.selector('password__checkbox')} input[type="checkbox"]`
|
|
};
|
|
|
|
class PasswordInput extends api.core.Instance {
|
|
static get instanceClassName () {
|
|
return 'PasswordInput';
|
|
}
|
|
|
|
init () {
|
|
this.addDescent(PasswordEmission.TOGGLE, this.toggle.bind(this));
|
|
this._isRevealed = this.hasAttribute('type') === 'password';
|
|
this.listen('keydown', this.capslock.bind(this)); // for capslock enabled
|
|
this.listen('keyup', this.capslock.bind(this)); // for capslock desabled
|
|
}
|
|
|
|
toggle (value) {
|
|
this.isRevealed = value;
|
|
this.setAttribute('type', value ? 'text' : 'password');
|
|
}
|
|
|
|
get isRevealed () {
|
|
return this._isRevealed;
|
|
}
|
|
|
|
capslock (event) {
|
|
if (event && typeof event.getModifierState !== 'function') return;
|
|
if (event.getModifierState('CapsLock')) {
|
|
this.node.parentNode.setAttribute(api.internals.ns.attr('capslock'), '');
|
|
} else {
|
|
this.node.parentNode.removeAttribute(api.internals.ns.attr('capslock'));
|
|
}
|
|
}
|
|
|
|
set isRevealed (value) {
|
|
this._isRevealed = value;
|
|
this.setAttribute('type', value ? 'text' : 'password');
|
|
}
|
|
}
|
|
|
|
class PasswordLabel extends api.core.Instance {
|
|
static get instanceClassName () {
|
|
return 'PasswordLabel';
|
|
}
|
|
|
|
init () {
|
|
this.addDescent(PasswordEmission.ADJUST, this.adjust.bind(this));
|
|
}
|
|
|
|
adjust (value) {
|
|
const valueREM = Math.ceil(value / 16);
|
|
this.node.style.paddingRight = valueREM + 'rem';
|
|
}
|
|
}
|
|
|
|
api.password = {
|
|
Password: Password,
|
|
PasswordToggle: PasswordToggle,
|
|
PasswordSelector: PasswordSelector,
|
|
PasswordInput: PasswordInput,
|
|
PasswordLabel: PasswordLabel
|
|
};
|
|
|
|
api.internals.register(api.password.PasswordSelector.INPUT, api.password.PasswordInput);
|
|
api.internals.register(api.password.PasswordSelector.PASSWORD, api.password.Password);
|
|
api.internals.register(api.password.PasswordSelector.TOOGLE, api.password.PasswordToggle);
|
|
api.internals.register(api.password.PasswordSelector.LABEL, api.password.PasswordLabel);
|
|
//# sourceMappingURL=password.module.js.map
|