mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-03 09:49:28 +02:00
325 lines
11 KiB
JavaScript
325 lines
11 KiB
JavaScript
import { iphone, mobile } from "./environment";
|
|
import { EventHandlers } from "./eventhandlers";
|
|
import { EventRuler } from "./eventruler";
|
|
import {
|
|
applyInputValue,
|
|
clearOptionalTail,
|
|
writeBuffer
|
|
} from "./inputHandling";
|
|
import {
|
|
caret,
|
|
getBuffer,
|
|
getBufferTemplate,
|
|
getLastValidPosition,
|
|
resetMaskSet,
|
|
seekNext
|
|
} from "./positioning";
|
|
import { isComplete } from "./validation";
|
|
|
|
export { mask };
|
|
|
|
// todo put on the prototype?
|
|
function mask() {
|
|
const inputmask = this,
|
|
opts = this.opts,
|
|
el = this.el,
|
|
$ = this.dependencyLib;
|
|
|
|
function isElementTypeSupported(input, opts) {
|
|
function patchValueProperty(npt) {
|
|
let valueGet, valueSet;
|
|
|
|
function patchValhook(type) {
|
|
if (
|
|
$.valHooks &&
|
|
($.valHooks[type] === undefined ||
|
|
$.valHooks[type].inputmaskpatch !== true)
|
|
) {
|
|
const valhookGet =
|
|
$.valHooks[type] && $.valHooks[type].get
|
|
? $.valHooks[type].get
|
|
: function (elem) {
|
|
return elem.value;
|
|
},
|
|
valhookSet =
|
|
$.valHooks[type] && $.valHooks[type].set
|
|
? $.valHooks[type].set
|
|
: function (elem, value) {
|
|
elem.value = value;
|
|
return elem;
|
|
};
|
|
|
|
$.valHooks[type] = {
|
|
get: function (elem) {
|
|
if (elem.inputmask) {
|
|
if (elem.inputmask.opts.autoUnmask) {
|
|
return elem.inputmask.unmaskedvalue();
|
|
} else {
|
|
const result = valhookGet(elem);
|
|
return getLastValidPosition.call(
|
|
inputmask,
|
|
undefined,
|
|
undefined,
|
|
elem.inputmask.maskset.validPositions
|
|
) !== -1 || opts.nullable !== true
|
|
? result
|
|
: "";
|
|
}
|
|
} else {
|
|
return valhookGet(elem);
|
|
}
|
|
},
|
|
set: function (elem, value) {
|
|
const result = valhookSet(elem, value);
|
|
if (elem.inputmask) {
|
|
applyInputValue(elem, value);
|
|
}
|
|
return result;
|
|
},
|
|
inputmaskpatch: true
|
|
};
|
|
}
|
|
}
|
|
|
|
function getter() {
|
|
if (this.inputmask) {
|
|
return this.inputmask.opts.autoUnmask
|
|
? this.inputmask.unmaskedvalue()
|
|
: getLastValidPosition.call(inputmask) !== -1 ||
|
|
opts.nullable !== true
|
|
? (this.inputmask.shadowRoot || this.ownerDocument)
|
|
.activeElement === this && opts.clearMaskOnLostFocus
|
|
? (inputmask.isRTL
|
|
? clearOptionalTail
|
|
.call(inputmask, getBuffer.call(inputmask).slice())
|
|
.reverse()
|
|
: clearOptionalTail.call(
|
|
inputmask,
|
|
getBuffer.call(inputmask).slice()
|
|
)
|
|
).join("")
|
|
: valueGet.call(this)
|
|
: "";
|
|
} else {
|
|
return valueGet.call(this);
|
|
}
|
|
}
|
|
|
|
function setter(value) {
|
|
valueSet.call(this, value);
|
|
if (this.inputmask) {
|
|
applyInputValue(this, value);
|
|
}
|
|
}
|
|
|
|
function installNativeValueSetFallback(npt) {
|
|
EventRuler.on(npt, "mouseenter", function () {
|
|
const input = this,
|
|
value = input.inputmask._valueGet(true),
|
|
bufferValue = (
|
|
input.inputmask.isRTL
|
|
? getBuffer.call(input.inputmask).slice().reverse()
|
|
: getBuffer.call(input.inputmask)
|
|
).join("");
|
|
if (value != bufferValue) {
|
|
applyInputValue(input, value);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!npt.inputmask.__valueGet) {
|
|
if (opts.noValuePatching !== true) {
|
|
if (Object.getOwnPropertyDescriptor) {
|
|
const valueProperty = Object.getPrototypeOf
|
|
? Object.getOwnPropertyDescriptor(
|
|
Object.getPrototypeOf(npt),
|
|
"value"
|
|
)
|
|
: undefined;
|
|
if (valueProperty && valueProperty.get && valueProperty.set) {
|
|
valueGet = valueProperty.get;
|
|
valueSet = valueProperty.set;
|
|
Object.defineProperty(npt, "value", {
|
|
get: getter,
|
|
set: setter,
|
|
configurable: true
|
|
});
|
|
} else if (npt.tagName.toLowerCase() !== "input") {
|
|
valueGet = function () {
|
|
return this.textContent;
|
|
};
|
|
valueSet = function (value) {
|
|
this.textContent = value;
|
|
};
|
|
Object.defineProperty(npt, "value", {
|
|
get: getter,
|
|
set: setter,
|
|
configurable: true
|
|
});
|
|
}
|
|
} else if (
|
|
document.__lookupGetter__ &&
|
|
npt.__lookupGetter__("value")
|
|
) {
|
|
valueGet = npt.__lookupGetter__("value");
|
|
valueSet = npt.__lookupSetter__("value");
|
|
|
|
npt.__defineGetter__("value", getter);
|
|
npt.__defineSetter__("value", setter);
|
|
}
|
|
npt.inputmask.__valueGet = valueGet; // store native property getter
|
|
npt.inputmask.__valueSet = valueSet; // store native property setter
|
|
}
|
|
npt.inputmask._valueGet = function (overruleRTL) {
|
|
return inputmask.isRTL && overruleRTL !== true
|
|
? valueGet.call(this.el).split("").reverse().join("")
|
|
: valueGet.call(this.el);
|
|
};
|
|
npt.inputmask._valueSet = function (value, overruleRTL) {
|
|
// null check is needed for IE8 => otherwise converts to "null"
|
|
valueSet.call(
|
|
this.el,
|
|
value === null || value === undefined
|
|
? ""
|
|
: overruleRTL !== true && inputmask.isRTL
|
|
? value.split("").reverse().join("")
|
|
: value
|
|
);
|
|
};
|
|
|
|
if (valueGet === undefined) {
|
|
// jquery.val fallback
|
|
valueGet = function () {
|
|
return this.value;
|
|
};
|
|
valueSet = function (value) {
|
|
this.value = value;
|
|
};
|
|
patchValhook(npt.type);
|
|
installNativeValueSetFallback(npt);
|
|
}
|
|
}
|
|
}
|
|
|
|
// if (input.tagName.toLowerCase() !== "textarea") {
|
|
// opts.ignorables.push(keys.Enter);
|
|
// }
|
|
|
|
let elementType = input.getAttribute("type"),
|
|
isSupported =
|
|
(input.tagName.toLowerCase() === "input" &&
|
|
opts.supportsInputType.includes(elementType)) ||
|
|
input.isContentEditable ||
|
|
input.tagName.toLowerCase() === "textarea";
|
|
if (!isSupported) {
|
|
if (input.tagName.toLowerCase() === "input") {
|
|
let el = document.createElement("input");
|
|
el.setAttribute("type", elementType);
|
|
isSupported = el.type === "text"; // apply mask only if the type is not natively supported
|
|
el = null;
|
|
} else {
|
|
isSupported = "partial";
|
|
}
|
|
}
|
|
if (isSupported !== false) {
|
|
patchValueProperty(input);
|
|
} else {
|
|
input.inputmask = undefined;
|
|
}
|
|
return isSupported;
|
|
}
|
|
|
|
// unbind all events - to make sure that no other mask will interfere when re-masking
|
|
EventRuler.off(el);
|
|
const isSupported = isElementTypeSupported(el, opts);
|
|
if (isSupported !== false) {
|
|
inputmask.originalPlaceholder = el.placeholder;
|
|
|
|
// read maxlength prop from el
|
|
inputmask.maxLength = el !== undefined ? el.maxLength : undefined;
|
|
if (inputmask.maxLength === -1) inputmask.maxLength = undefined;
|
|
if ("inputMode" in el && el.getAttribute("inputmode") === null) {
|
|
el.inputMode = opts.inputmode;
|
|
el.setAttribute("inputmode", opts.inputmode);
|
|
}
|
|
|
|
if (isSupported === true) {
|
|
opts.showMaskOnFocus =
|
|
opts.showMaskOnFocus &&
|
|
["cc-number", "cc-exp"].indexOf(el.autocomplete) === -1;
|
|
if (iphone) {
|
|
// selecting the caret shows as a selection on iphone
|
|
opts.insertModeVisual = false;
|
|
// disable autocorrect
|
|
el.setAttribute("autocorrect", "off");
|
|
}
|
|
|
|
// bind events
|
|
EventRuler.on(el, "submit", EventHandlers.submitEvent);
|
|
EventRuler.on(el, "reset", EventHandlers.resetEvent);
|
|
EventRuler.on(el, "blur", EventHandlers.blurEvent);
|
|
EventRuler.on(el, "focus", EventHandlers.focusEvent);
|
|
EventRuler.on(el, "invalid", EventHandlers.invalidEvent);
|
|
EventRuler.on(el, "click", EventHandlers.clickEvent);
|
|
EventRuler.on(el, "mouseleave", EventHandlers.mouseleaveEvent);
|
|
EventRuler.on(el, "mouseenter", EventHandlers.mouseenterEvent);
|
|
EventRuler.on(el, "paste", EventHandlers.pasteEvent);
|
|
EventRuler.on(el, "cut", EventHandlers.cutEvent);
|
|
EventRuler.on(el, "complete", opts.oncomplete);
|
|
EventRuler.on(el, "incomplete", opts.onincomplete);
|
|
EventRuler.on(el, "cleared", opts.oncleared);
|
|
if (opts.inputEventOnly !== true) {
|
|
EventRuler.on(el, "keydown", EventHandlers.keyEvent);
|
|
}
|
|
if (mobile || opts.inputEventOnly) {
|
|
el.removeAttribute("maxLength");
|
|
}
|
|
EventRuler.on(el, "input", EventHandlers.inputFallBackEvent);
|
|
// EventRuler.on(el, "beforeinput", EventHandlers.beforeInputEvent); //https://github.com/w3c/input-events - to implement
|
|
}
|
|
EventRuler.on(el, "setvalue", EventHandlers.setValueEvent);
|
|
|
|
// apply mask
|
|
inputmask.applyMaskHook === undefined || inputmask.applyMaskHook();
|
|
|
|
getBufferTemplate.call(inputmask).join(""); // initialize the buffer and getmasklength
|
|
inputmask.undoValue = inputmask._valueGet(true);
|
|
const activeElement = (el.inputmask.shadowRoot || el.ownerDocument)
|
|
.activeElement;
|
|
if (
|
|
el.inputmask._valueGet(true) !== "" ||
|
|
opts.clearMaskOnLostFocus === false ||
|
|
activeElement === el
|
|
) {
|
|
applyInputValue(el, el.inputmask._valueGet(true), opts);
|
|
let buffer = getBuffer.call(inputmask).slice();
|
|
if (isComplete.call(inputmask, buffer) === false) {
|
|
if (opts.clearIncomplete) {
|
|
resetMaskSet.call(inputmask, false);
|
|
}
|
|
}
|
|
if (opts.clearMaskOnLostFocus && activeElement !== el) {
|
|
if (getLastValidPosition.call(inputmask) === -1) {
|
|
buffer = [];
|
|
} else {
|
|
clearOptionalTail.call(inputmask, buffer);
|
|
}
|
|
}
|
|
if (
|
|
opts.clearMaskOnLostFocus === false ||
|
|
(opts.showMaskOnFocus && activeElement === el) ||
|
|
el.inputmask._valueGet(true) !== ""
|
|
) {
|
|
writeBuffer(el, buffer);
|
|
}
|
|
if (activeElement === el) {
|
|
// position the caret when in focus
|
|
caret.call(
|
|
inputmask,
|
|
el,
|
|
seekNext.call(inputmask, getLastValidPosition.call(inputmask))
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|