Skip to content

Commit

Permalink
refactor: code cleanup and consistency
Browse files Browse the repository at this point in the history
  • Loading branch information
@biati-digital
biati-digital committed Feb 8, 2025
1 parent 5405f34 commit c4424cc
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 64 deletions.
12 changes: 6 additions & 6 deletions packages/drag-navigation/src/drag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ export default class DragNavigation extends GLightboxPlugin {
name = 'drag';
type: PluginType = 'other';
options: DragOptions = {};
isDown: boolean = false;
isDown = false;
slider: HTMLElement | null = null;
actveSlide: HTMLElement | null = null;
startX = 0;
scrollLeft: number = 0;
activeSlideIndex: number = 0;
movedAmount: number = 0;
movedDirection: string = '';
scrollLeft = 0;
activeSlideIndex = 0;
movedAmount = 0;
movedDirection = '';
defaults: DragOptions = {
dragToleranceX: 10
};
Expand Down Expand Up @@ -64,7 +64,7 @@ export default class DragNavigation extends GLightboxPlugin {
this.startX = e.pageX - this.slider.offsetLeft;
this.scrollLeft = this.slider.scrollLeft;
this.actveSlide = this.slider.querySelector('.visible');
this.activeSlideIndex = parseInt(this.actveSlide?.getAttribute('data-index') || '0');
this.activeSlideIndex = Number.parseInt(this.actveSlide?.getAttribute('data-index') || '0');
}

onMouseUp() {
Expand Down
44 changes: 23 additions & 21 deletions packages/glightbox/src/glightbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default class GLightbox {
nextButton: HTMLButtonElement | null = null;
overlay: HTMLButtonElement | null = null;
slidesContainer: HTMLElement | null = null;
reduceMotion: boolean = false;
reduceMotion = false;
private observer: IntersectionObserver;

constructor(options: Partial<GLightboxOptions> = {}) {
Expand Down Expand Up @@ -225,12 +225,12 @@ export default class GLightbox {

const children = document.body.querySelectorAll(':scope > *');
if (children) {
[...children].forEach((el: HTMLElement) => {
if (el.parentNode == document.body && el.nodeName.charAt(0) !== '#' && el.hasAttribute && !el.hasAttribute('aria-hidden')) {
el.ariaHidden = 'true';
el.dataset.glHidden = 'true';
for (const el of children) {
if (el.parentNode === document.body && el.nodeName.charAt(0) !== '#' && el.hasAttribute && !el.hasAttribute('aria-hidden')) {
(el as HTMLElement).ariaHidden = 'true';
(el as HTMLElement).dataset.glHidden = 'true';
}
});
}
}

const root = this.options?.root ?? document.body;
Expand All @@ -249,8 +249,8 @@ export default class GLightbox {
this.slidesContainer = document.getElementById('gl-slider');

addClass(this.modal, this.reduceMotion ? 'gl-reduce-motion' : 'gl-motion');
addClass(this.modal, 'gl-theme-' + (this.options?.appearance?.theme ?? 'base'));
addClass(this.modal, 'gl-slide-effect-' + (this.options?.appearance?.slideEffect || 'none'));
addClass(this.modal, `gl-theme-${this.options?.appearance?.theme ?? 'base'}`);
addClass(this.modal, `gl-slide-effect-${this.options?.appearance?.slideEffect || 'none'}`);

if (this.options?.appearance?.cssVariables) {
for (const [key, value] of Object.entries(this.options.appearance.cssVariables)) {
Expand Down Expand Up @@ -293,10 +293,10 @@ export default class GLightbox {
this.processVariables(this.modal);

this.observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
for (const entry of entries) {
removeClass(entry.target, 'visible');
if (entry.isIntersecting && this.state.get('open')) {
const enteredIndex = parseInt(entry.target?.getAttribute('data-index') ?? '0');
const enteredIndex = Number.parseInt(entry.target?.getAttribute('data-index') ?? '0');
addClass(entry.target, 'visible');

// on scroll make sure to recheck active indexes
Expand All @@ -310,7 +310,7 @@ export default class GLightbox {
this.preloadSlide(enteredIndex - 1);
}
}
});
}
}, {
root: this.modal,
rootMargin: '0px',
Expand Down Expand Up @@ -361,10 +361,10 @@ export default class GLightbox {

const hiddenElements = document.querySelectorAll('*[data-gl-hidden="true"]');
if (hiddenElements) {
hiddenElements.forEach((el: HTMLElement) => {
el.ariaHidden = 'false';
delete el.dataset.glHidden;
});
for (const el of hiddenElements) {
(el as HTMLElement).ariaHidden = 'false';
delete (el as HTMLElement).dataset.glHidden;
}
}

if (this.reduceMotion || this.options.appearance?.slideEffect === 'none') {
Expand Down Expand Up @@ -392,7 +392,9 @@ export default class GLightbox {

const styles = document.querySelectorAll('.gl-css');
if (styles) {
styles.forEach((style) => style?.parentNode?.removeChild(style));
for (const style of styles) {
style?.parentNode?.removeChild(style);
}
}

this.trigger('close');
Expand Down Expand Up @@ -440,7 +442,7 @@ export default class GLightbox {
}

let matched = false;
if (slideType?.match && slideType.match(item.url.toLowerCase())) {
if (slideType?.match?.(item.url.toLowerCase())) {
item.type = key;
matched = true;
}
Expand Down Expand Up @@ -481,10 +483,10 @@ export default class GLightbox {
return;
}
const parsedItemsData: SlideConfig[] = [];
[...items].forEach(item => {
for (const item of items) {
const itemData: SlideConfig = this.parseConfigFromNode(item as HTMLElement);
parsedItemsData.push(itemData);
});
}
this.setItems(parsedItemsData);
}

Expand Down Expand Up @@ -637,7 +639,7 @@ export default class GLightbox {
}
}

if (data?.description && data.description.startsWith('.')) {
if (data?.description?.startsWith('.')) {
const description = document.querySelector(data.description)?.innerHTML;
if (description) {
data.description = description;
Expand All @@ -657,7 +659,7 @@ export default class GLightbox {
private getRegisteredSlideType(id: string): false | Plugin {
if (this.plugins.has('slide')) {
const slideModules = this.plugins.get('slide');
if (slideModules && slideModules.has(id)) {
if (slideModules?.has(id)) {
return slideModules.get(id) as Plugin;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/image/src/image.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default class ImageSlide extends GLightboxPlugin {
build({ index, slide, config }: BuildParams): Promise<boolean> {
return new Promise((resolve, reject) => {
const img = new Image();
const titleID = 'gl-slide-title-' + index;
const titleID = `gl-slide-title-${index}`;
const imgWidth = config?.width || this.options.maxWidth;

img.addEventListener('load', () => resolve(true), false);
Expand Down
2 changes: 1 addition & 1 deletion packages/keyboard-navigation/src/keyboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { GLightboxPlugin } from '@glightbox/plugin-core';
export default class KeyboardNavigation extends GLightboxPlugin {
name = 'keyboard';
type: PluginType = 'other';
largest: number = -1;
largest = -1;
keyBoardEvent: ((e: KeyboardEvent) => void) | null = null;

init(): void {
Expand Down
39 changes: 4 additions & 35 deletions packages/utils/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
export interface EventType {
(event: Event): void; // Just an example
(event: Event): void;
destroy(): void;
}

interface EventElement extends HTMLElement {
attachedEvent: string;
}

/**
* Merge two or more objects
*/
export const mergeObjects = <T extends object = object>(target: T, ...sources: T[]): T => {
if (!sources.length) {
return target;
Expand All @@ -35,32 +32,18 @@ export const mergeObjects = <T extends object = object>(target: T, ...sources: T
return mergeObjects(target, ...sources);
};


/**
* Add element class
*/
export function addClass(node: HTMLElement | Element, classes: string): void {
node.classList.add(...classes.split(' '));
}

/**
* Remove element class
*/
export function removeClass(node: HTMLElement | Element, classes: string): void {
node.classList.remove(...classes.split(' '));
}

/**
* Has class
*/
export function hasClass(node: HTMLElement | Element, name: string): boolean {
return node.classList.contains(name);
}

/**
* Add Event
* Add an event listener
*/
export function addEvent(eventName: string, {
element,
callback,
Expand Down Expand Up @@ -123,12 +106,6 @@ export function animate(element: HTMLElement, classes: string): Promise<boolean>
});
}

/**
* Return screen size
* return the current screen dimensions
*
* @returns {object}
*/
export function windowSize() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
Expand Down Expand Up @@ -156,14 +133,6 @@ export function createIframe(config) {
return iframe
}


/**
* Inject videos api
* used for video player
*
* @param {string} url
* @param {function} callback
*/
export function injectAssets(url: string | { src: string; module?: boolean }): Promise<boolean> {
return new Promise((resolve, reject) => {
if (!url) {
Expand All @@ -176,10 +145,10 @@ export function injectAssets(url: string | { src: string; module?: boolean }): P
src = url;
}

let found;
let found: NodeListOf<HTMLLinkElement | HTMLScriptElement>;
const scriptType = src.includes('.css') ? 'css' : 'js';
if (scriptType === 'css') {
found = document.querySelectorAll('link[href="' + src + '"]');
found = document.querySelectorAll(`link[href="${src}"]`);
if (found && found.length > 0) {
resolve(true);
return;
Expand All @@ -203,7 +172,7 @@ export function injectAssets(url: string | { src: string; module?: boolean }): P
return;
}

found = document.querySelectorAll('script[src="' + src + '"]');
found = document.querySelectorAll(`script[src="${src}"]`);
if (found && found.length > 0) {
resolve(true);
return;
Expand Down

0 comments on commit c4424cc

Please sign in to comment.