Skip to content

Commit

Permalink
SK-1242 Revert "SK-1096 SK-1225 replacing of jQuery lib dependency wi…
Browse files Browse the repository at this point in the history 
…th vanila JS (#351)"

This reverts commit c69d1ad.
  • Loading branch information
@yaswanth-pula-skyflow
yaswanth-pula-skyflow committed Nov 15, 2023
1 parent 6a16a58 commit 496e8b7
Show file tree
Hide file tree
Showing 8 changed files with 55 additions and 339 deletions.
6 changes: 2 additions & 4 deletions src/core/internal/iframe-form/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ export class IFrameFormElement extends EventEmitter {
}

// todo: send error message of the field
setValue = (value: any = '', valid: boolean = true, isReset: boolean = false) => {
setValue = (value: any = '', valid: boolean = true) => {
if (this.fieldType === ELEMENTS.checkbox.name) {
// toggle for checkbox
if (this.state.value === value) {
Expand Down Expand Up @@ -329,9 +329,7 @@ export class IFrameFormElement extends EventEmitter {
}
}
}
if (!isReset) {
this.sendChangeStatus(true);
}
this.sendChangeStatus(true);
};

getValue = () => {
Expand Down
73 changes: 24 additions & 49 deletions src/core/internal/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
Copyright (c) 2022 Skyflow, Inc.
*/
import bus from 'framebus';
import $ from 'jquery';
import Client from '../../client';
import { setAttributes } from '../../iframe-libs/iframer';
import { validateElementOptions } from '../../libs/element-options';
import 'jquery-mask-plugin/dist/jquery.mask.min';
import {
ELEMENTS,
ELEMENT_EVENTS_TO_CLIENT,
Expand Down Expand Up @@ -38,7 +40,7 @@ import {
addSeperatorToCardNumberMask,
appendMonthFourDigitYears,
appendMonthTwoDigitYears,
appendZeroToOne, domReady, getMaskedOutput, handleCopyIconClick, styleToString,
appendZeroToOne, handleCopyIconClick, styleToString,
} from '../../utils/helpers';
import { ContainerType } from '../../skyflow';

Expand Down Expand Up @@ -286,6 +288,7 @@ export class FrameElement {
this.options?.cardSeperator,
);
this.iFrameFormElement.setMask(cardNumberMask as string[]);
this.applyMask();
} else if (this.iFrameFormElement.fieldType === ELEMENTS.EXPIRATION_MONTH.name
|| this.iFrameFormElement.fieldType === ELEMENTS.EXPIRATION_DATE.name) {
if (this.domInput) {
Expand Down Expand Up @@ -323,9 +326,6 @@ export class FrameElement {
) {
this.updateStyleClasses(state);
}
if (this.iFrameFormElement.mask) {
this.applyMask();
}
});

this.iFrameFormElement.on(ELEMENT_EVENTS_TO_IFRAME.SET_VALUE, (data) => {
Expand Down Expand Up @@ -466,12 +466,8 @@ export class FrameElement {
this.iFrameFormElement.mask
|| this.iFrameFormElement.replacePattern
) {
domReady(() => {
const domInput = this.domInput;
if (domInput) {
const inputEvent = new Event('input', { bubbles: true, cancelable: true });
domInput.dispatchEvent(inputEvent);
}
$(document).ready(() => {
$(this.domInput as any).trigger('input');
});
}
}
Expand Down Expand Up @@ -508,24 +504,7 @@ export class FrameElement {
this.focusChange(true);
} else {
const target = event.target as HTMLInputElement;
const { mask } = this.iFrameFormElement;
const value = this.domInput?.value || this.iFrameFormElement.getValue();
if (mask) {
const translation = {};
Object.keys(mask[2]).forEach((key) => {
translation[key] = { pattern: mask[2][key] };
});
const output = getMaskedOutput(target.value, mask[0], translation);
if (output.length >= value.length) {
this.iFrameFormElement.setValue(output, target.checkValidity());
} else if (output === '' && target.value === '') {
this.iFrameFormElement.setValue(target.value, target.checkValidity());
} else {
target.value = output;
}
} else {
this.iFrameFormElement.setValue(target.value, target.checkValidity());
}
this.iFrameFormElement.setValue(target.value, target.checkValidity());
}
};

Expand Down Expand Up @@ -565,9 +544,10 @@ export class FrameElement {
});
};

onArrowKeys = (keyBoardEvent: KeyboardEvent) => {
onArrowKeys = (event:JQuery.TriggeredEvent) => {
const keyBoardEvent = event.originalEvent as KeyboardEvent;
const currentInput = keyBoardEvent?.target as HTMLInputElement;
const cursorPosition = currentInput.selectionEnd;
const cursorPosition = event.target.selectionEnd;

switch (keyBoardEvent?.key) {
case INPUT_KEYBOARD_EVENTS.RIGHT_ARROW:
Expand Down Expand Up @@ -772,8 +752,9 @@ export class FrameElement {

if (this.domLabel) this.domLabel.textContent = this.options.label;

domReady(() => {
const id: any = this.domInput;
$(document).ready(() => {
const id: any = this.domInput || `#${this.iFrameFormElement.iFrameName}`;

this.iFrameFormElement.setValidation(this.options.validations);
this.iFrameFormElement.setReplacePattern(this.options.replacePattern);
if (options.elementType === ElementType.EXPIRATION_DATE) {
Expand All @@ -787,25 +768,26 @@ export class FrameElement {
}

// const { mask } = this.iFrameFormElement;
$(id).off('input');
(<any>$).jMaskGlobals.translation = {};
(<any>$).jMaskGlobals.clearIfNotMatch = true;

// $(id).off('input');

// $(id).unmask();
$(id).unmask();
this.applyMask();

if (this.domInput) {
const { replacePattern } = this.iFrameFormElement;
if (replacePattern) {
id.addEventListener('input', (event) => {
$(id).on('input', (event) => {
event.target.value = event.target.value.replace(
replacePattern[0],
replacePattern[1],
);
});
}

id.addEventListener('input', this.onInputChange);
id.addEventListener('keydown', this.onArrowKeys);
$(id).on('input', this.onInputChange);
$(id).on('keydown', this.onArrowKeys);
}

this.setupInputField(
Expand All @@ -817,24 +799,17 @@ export class FrameElement {
}

private applyMask() {
const id: any = this.domInput || `#${this.iFrameFormElement.iFrameName}`;
const { mask } = this.iFrameFormElement;
let output = '';
if (mask) {
const translation = {};
Object.keys(mask[2]).forEach((key) => {
translation[key] = { pattern: mask[2][key] };
});
try {
const value = this.domInput?.value || this.iFrameFormElement.getValue();
output = getMaskedOutput(value, mask[0], translation);
if (this.domInput) {
this.domInput.value = output;
if (!this.domInput.getAttribute('maxlength')) { this.domInput.setAttribute('maxlength', mask[0].length); }
}
if (output !== this.iFrameFormElement.getValue()) {
this.copyText = output;
this.iFrameFormElement.setValue(output, undefined, true);
}
$(id).mask(mask[0], {
translation,
});
} catch (err) {
printLog(parameterizedString(logs.warnLogs.INVALID_INPUT_TRANSLATION,
this.iFrameFormElement.fieldType), MessageType.WARN,
Expand Down
12 changes: 6 additions & 6 deletions src/core/internal/reveal/reveal-frame.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
Copyright (c) 2022 Skyflow, Inc.
*/
import bus from 'framebus';
import $ from 'jquery';
import {
ELEMENT_EVENTS_TO_IFRAME,
STYLE_TYPE,
Expand All @@ -19,9 +20,8 @@ import {
} from '../../../utils/logs-helper';
import logs from '../../../utils/logs';
import { Context, MessageType } from '../../../utils/common';
import {
constructMaskTranslation, getMaskedOutput, handleCopyIconClick, styleToString,
} from '../../../utils/helpers';
import { constructMaskTranslation, handleCopyIconClick, styleToString } from '../../../utils/helpers';
import 'jquery-mask-plugin/dist/jquery.mask.min';

const CLASS_NAME = 'RevealFrame';
class RevealFrame {
Expand Down Expand Up @@ -146,9 +146,9 @@ class RevealFrame {
this.isRevealCalled = true;
this.#dataElememt.innerText = responseValue;
if (this.#record.mask) {
this.#dataElememt.innerText = getMaskedOutput(this.#dataElememt.innerText,
this.#record.mask[0],
constructMaskTranslation(this.#record.mask));
$(this.#dataElememt).mask(this.#record.mask[0], {
translation: constructMaskTranslation(this.#record.mask),
});
}
printLog(parameterizedString(logs.infoLogs.ELEMENT_REVEALED,
CLASS_NAME, this.#record.token), MessageType.LOG, this.#context.logLevel);
Expand Down
60 changes: 0 additions & 60 deletions src/utils/helpers/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,66 +85,6 @@ export const getReturnValue = (value: string | Blob, element: string, doesReturn
return undefined;
};

const fns : Function[] = [];
export function domReady(fn) {
(() => {
let listener;
const doc = typeof document === 'object' ? document : undefined;
const domContentLoaded = 'DOMContentLoaded';
let loaded = doc && (/^loaded|^i|^c/).test(doc.readyState);
if (!loaded && doc) {
doc.addEventListener(domContentLoaded, listener = () => {
doc.removeEventListener(domContentLoaded, listener);
loaded = true;
listener = fns.shift();
while (listener) {
listener();
listener = fns.shift();
}
});
}
return (fun): void => {
if (loaded) {
setTimeout(fun, 0);
} else {
fns.push(fun);
}
};
})()(fn);
}

export const getMaskedOutput = (input: string, format: string, translation: any): string => {
const inputArray = Array.from(input);
const formatArray = Array.from(format);
let output = '';
let j = 0;

for (let i = 0; i < inputArray.length; i += 1) {
if (j < i) { j = i; }
const character = inputArray[i];
if (j < formatArray.length) {
let formatChar = formatArray[j];
if (!translation[formatChar] || character === formatChar) {
output += formatChar;
j += 1;
}
formatChar = formatArray[j];
if (translation[formatChar]) {
const translationString = translation[formatChar].pattern;
const regex = new RegExp(translationString);
const characterString = character.toString();
if (regex.test(characterString)) {
output += characterString;
j += 1;
}
}
} else {
break;
}
}
return output;
};

export const copyToClipboard = (text:string) => {
navigator.clipboard
.writeText(text);
Expand Down
Loading

0 comments on commit 496e8b7

Please sign in to comment.