feat(FJS-NOINDEX): native-slider package core

LordWerter · Jan 15, 2022 · 8364e20 · 8364e20
1 parent aae6e0a
commit 8364e20
Show file tree

Hide file tree

Showing 76 changed files with 1,258 additions and 83 deletions.
diff --git a/examples/react-uikit/public/index.html b/examples/react-uikit/public/index.html
@@ -29,15 +29,5 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/examples/react-uikit/src/epics/Welcome/Welcome.tsx b/examples/react-uikit/src/epics/Welcome/Welcome.tsx
@@ -2,6 +2,7 @@ import { useTheme } from '@emotion/react';
 import React from 'react';
 import { TElementProps } from '../../definitions';
 import Section from '../../features/Section';
+import {Slider} from './features';
 import { CWrap } from './Welcome.styles';
 
 export type IProps = TElementProps;
@@ -12,6 +13,7 @@ const Welcome: React.FC<IProps> = (props): JSX.Element => {
     const theme = { ...fullTheme.Welcome };
     return (
         <CWrap sizeId={'desktop'} theme={theme.cwrap}>
+            <Slider sizeId={'desktop'} id={'welcome-slider'} />
             <Section sizeId={'desktop'} />
         </CWrap >
     );

diff --git a/examples/react-uikit/src/epics/Welcome/features/Slider/Slider.styles.tsx b/examples/react-uikit/src/epics/Welcome/features/Slider/Slider.styles.tsx
@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import {getCSSObj} from '../../../../utils';
+import {TElementProps} from '../../../../definitions';
+
+export type TCWrapProps = TElementProps;
+
+export const CWrap = styled.div<TCWrapProps>`
+  ${getCSSObj}
+`;
+
+export type TTrackProps = TElementProps;
+
+export const Track = styled.div<TTrackProps>`
+  ${getCSSObj}
+`;
+
+export type TSlideProps = TElementProps;
+
+export const Slide = styled.div<TSlideProps>`
+  ${getCSSObj}
+`;
+
+export type TArrowProps = TElementProps;
+
+export const Arrow = styled.div<TArrowProps>`
+  ${getCSSObj}
+`;
diff --git a/examples/react-uikit/src/epics/Welcome/features/Slider/Slider.tsx b/examples/react-uikit/src/epics/Welcome/features/Slider/Slider.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useTheme } from '@emotion/react';
+import React, {useEffect} from 'react';
+import { TElementProps } from '../../../../definitions';
+import { CWrap, Track, Slide, Arrow } from './Slider.styles';
+import DOMFactory from './src/DOMComposition/DOMFactory';
+export type IProps = TElementProps & {
+    id: string;
+};
+
+export const Slider: React.FC<IProps> = (props): JSX.Element => {
+    const {id} = props;
+
+    const fullTheme = useTheme();
+    //@ts-ignore
+    const theme = { ...fullTheme.Slider };
+    console.log(theme);
+    const text = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
+
+    useEffect(() => {
+        new DOMFactory({
+            sliderType: 'carousel',
+
+            wrapperSelector: `#${id}`,
+            trackSelector: `#${id}-track`,
+            elementSelector: `.${id}__slide`,
+            leftArrowSelector: `.${id}__left-arrow`,
+            rightArrowSelector: `.${id}__right-arrow`,
+        });
+    }, []);
+
+    return (
+        <CWrap id={id} sizeId={'desktop'} theme={theme.cwrap}>
+            <Track id={`${id}-track`} sizeId={'desktop'} theme={theme.track}>
+                <Slide id={`${id}-1`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-2`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-3`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-4`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-5`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-6`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-7`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-8`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-9`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-10`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-11`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-12`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-13`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-14`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-15`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-16`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-17`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-18`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-19`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+                <Slide id={`${id}-20`} className={`${id}__slide`} sizeId={'desktop'} theme={theme.slide}>{text}</Slide>
+            </Track>
+            <Arrow className={`${id}__left-arrow`} sizeId={'desktop'} theme={theme.leftarrow} />
+            <Arrow className={`${id}__right-arrow`} sizeId={'desktop'} theme={theme.rightarrow} />
+        </CWrap >
+    );
+};
+
+export default Slider;
diff --git a/examples/react-uikit/src/epics/Welcome/features/Slider/index.ts b/examples/react-uikit/src/epics/Welcome/features/Slider/index.ts
@@ -0,0 +1,5 @@
+import Slider from './Slider';
+
+export {Slider} from './Slider';
+
+export default Slider;
diff --git a/...ct-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/ArrowsPanel/AArrowsPanel.ts b/...ct-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/ArrowsPanel/AArrowsPanel.ts
@@ -0,0 +1,5 @@
+export abstract class AArrowsPanel {
+
+}
+
+export default AArrowsPanel;
diff --git a/...ikit/src/epics/Welcome/features/Slider/src/DOMComposition/ArrowsPanel/ArrowsPanel.test.ts b/...ikit/src/epics/Welcome/features/Slider/src/DOMComposition/ArrowsPanel/ArrowsPanel.test.ts
@@ -0,0 +1,17 @@
+import ArrowsPanel from './ArrowsPanel';
+
+describe('ArrowsPanel Class', () => {
+
+    let domComposition = null;
+
+    beforeEach(() => {
+        domComposition = null;
+    });
+
+    it('Check of build DOM with Initial Settings', () => {
+        domComposition = new ArrowsPanel();
+
+        // checking for the Main Wrapper Node was created for slider
+
+    });
+});
diff --git a/...act-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/ArrowsPanel/ArrowsPanel.ts b/...act-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/ArrowsPanel/ArrowsPanel.ts
@@ -0,0 +1,57 @@
+import AArrowsPanel from './AArrowsPanel';
+
+export type TNewArrowParams = {
+    sliderId: string;
+    direction: string;
+    onArrowClick: (event?: MouseEvent) => any;
+};
+
+export class ArrowsPanel extends AArrowsPanel {
+    public options: any = null;
+    public arrows: any = {
+        left: null,
+        right: null,
+    };
+
+    constructor(options: any) {
+        super();
+        this.options = { ...options };
+        this.arrows = [];
+    }
+
+    public createArrow(params: TNewArrowParams) {
+        const {sliderId, direction, onArrowClick} = params;
+        if (!this.arrows[direction]) return null;
+
+        const mainWrapper: HTMLElement | null = document.querySelector(sliderId);
+        if (!mainWrapper) {
+            console.warn(`RUNTIME:STATUS:ARROW_PANEL - There is no any wrapper with id ${sliderId}. Arrow was not created!`)
+            return null;
+        }
+
+        const arrow = document.createElement('div');
+        arrow.classList.add(`${sliderId}__${direction}-arrow`);
+        arrow.addEventListener('click', (event: MouseEvent) => {
+            const onArrowClickFn = onArrowClick;
+            onArrowClickFn(event);
+        });
+        mainWrapper.appendChild(arrow);
+
+        return arrow;
+    }
+
+    public showArrows = () => {
+        const leftArrow = this.toggleArrowVisibility(this.arrows.left);
+        const rightArrow = this.toggleArrowVisibility(this.arrows.right);
+
+        return !!leftArrow && !!rightArrow;
+    }
+
+    public toggleArrowVisibility = (arrow: any) => {
+        const visibility = arrow.style.visibility;
+        arrow.style.visibility = visibility === 'hidden' ? 'visible' : 'hidden';
+        return arrow;
+    };
+}
+
+export default ArrowsPanel;
diff --git a/...les/react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/ArrowsPanel/index.ts b/...les/react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/ArrowsPanel/index.ts
@@ -0,0 +1,3 @@
+import ArrowsPanel from './ArrowsPanel';
+
+export default ArrowsPanel;
diff --git a/...eact-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/ADOMFactory.ts b/...eact-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/ADOMFactory.ts
@@ -0,0 +1,5 @@
+export abstract class ADOMFactory {
+
+}
+
+export default ADOMFactory;
diff --git a/...-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/DOMFactory.test.ts b/...-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/DOMFactory.test.ts
@@ -0,0 +1,17 @@
+import DOMFactory from './DOMFactory';
+
+describe('DOMFactory Class', () => {
+
+    let domComposition = null;
+
+    beforeEach(() => {
+        domComposition = null;
+    });
+
+    it('Check of build DOM with Initial Settings', () => {
+        domComposition = new DOMFactory();
+
+        // checking for the Main Wrapper Node was created for slider
+
+    });
+});
diff --git a/...react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/DOMFactory.ts b/...react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/DOMFactory.ts
@@ -0,0 +1,86 @@
+import ADOMFactory from './ADOMFactory';
+import {Settings, TSettings, TSettingsOutput} from '../../Settings';
+import stylesMap from './stylesMap';
+
+export type THTMLElement = HTMLElement | null;
+
+export class DOMFactory extends ADOMFactory {
+    public curSettings: TSettingsOutput;
+    public wrapper: THTMLElement = null;
+    public leftArrow: THTMLElement = null;
+    public rightArrow: THTMLElement = null;
+    public slidesTrack: THTMLElement = null;
+    public slideElements: HTMLElement[] = [];
+
+    public stylesMap: any = {...stylesMap};
+
+    public count: number = 1;
+
+    constructor(settings: TSettings) {
+        super();
+        this.curSettings = new Settings(settings).getComputed();
+
+        this.wrapper = this.getElementBySelector(this.curSettings.wrapperSelector);
+        if (this.wrapper) this.setCoreStyles(this.wrapper, 'wrapper');
+
+        if (this.curSettings.showArrows) {
+            this.leftArrow = this.setArrow('left', this.curSettings.leftArrowSelector);
+            this.rightArrow = this.setArrow('right', this.curSettings.rightArrowSelector);
+            // @ts-ignore
+            this.leftArrow.addEventListener('click', () => {
+                const curLeft = this.slidesTrack?.getBoundingClientRect().left;
+                this.count--;
+                // @ts-ignore
+                this.slidesTrack.style.left = `${curLeft + (this.wrapper?.clientWidth ? this.wrapper?.clientWidth : 1)}px`;
+            });
+
+            // @ts-ignore
+            this.rightArrow.addEventListener('click', () => {
+                const curLeft = this.slidesTrack?.getBoundingClientRect().left;
+                // @ts-ignore
+                this.slidesTrack.style.left = `${curLeft - (this.wrapper?.clientWidth ? this.wrapper?.clientWidth : 1)}px`;
+            });
+        }
+
+        this.slidesTrack = this.getElementBySelector(this.curSettings.trackSelector);
+        if (this.slidesTrack) this.setCoreStyles(this.slidesTrack, 'slidesTrack');
+
+        if (this.wrapper && this.curSettings.sliderType === 'slides') {
+            this.wrapper.querySelectorAll(this.curSettings.elementSelector).forEach((element: any) => {
+                this.slideElements.push(element);
+            });
+        }
+    }
+
+    public getElementBySelector = (selector: string): HTMLElement | null => {
+        const element: HTMLElement | null = document.querySelector(selector);
+        if (!element) {
+            console.warn(`Element with selector ${selector} not found`);
+        }
+        return element;
+    };
+
+    public setArrow = (direction: string, selector: string): THTMLElement => {
+        let arrow: THTMLElement = this.getElementBySelector(selector);
+        if (!arrow) {
+            arrow = document.createElement('div');
+            arrow.classList.add(`${this.curSettings.wrapperSelector.substring(1)}__${direction}-arrow`);
+            this.setCoreStyles(arrow, direction === 'left' ? 'leftArrow' : 'rightArrow');
+            if (this.wrapper) this.wrapper.appendChild(arrow);
+        }
+        return arrow;
+    };
+
+    public setCoreStyles = (element: HTMLElement, elementName: string) => {
+        const curStyles: any = {...this.stylesMap[elementName]};
+        Object.keys(curStyles).forEach((key: any) => {
+            // @ts-ignore
+            element.style[key] = curStyles[key];
+        });
+    };
+
+
+
+}
+
+export default DOMFactory;
diff --git a/...ples/react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/index.ts b/...ples/react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/index.ts
@@ -0,0 +1,3 @@
+import DOMFactory from './DOMFactory';
+
+export default DOMFactory;
diff --git a/.../react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/stylesMap.ts b/.../react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DOMFactory/stylesMap.ts
@@ -0,0 +1,34 @@
+export const coreStylesMap = {
+    wrapper: {
+        display: 'flex',
+        width: '100%',
+        position: 'relative',
+    },
+    slidesTrack: {
+        display: 'flex',
+        width: 'max-content',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        transition: 'all 1s ease-in-out',
+    },
+    leftArrow: {
+        display: 'flex',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: '#fff',
+    },
+    rightArrow: {
+        display: 'flex',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        right: 0,
+        backgroundColor: '#fff',
+    },
+};
+
+export default coreStylesMap;
diff --git a/.../react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DotsPanel/ADotsPanel.ts b/.../react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DotsPanel/ADotsPanel.ts
@@ -0,0 +1,5 @@
+export abstract class ADotsPanel {
+
+}
+
+export default ADotsPanel;
diff --git a/...ct-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DotsPanel/DotsPanel.test.ts b/...ct-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DotsPanel/DotsPanel.test.ts
@@ -0,0 +1,17 @@
+import DotsPanel from './DotsPanel';
+
+describe('DotsPanel Class', () => {
+
+    let domComposition = null;
+
+    beforeEach(() => {
+        domComposition = null;
+    });
+
+    it('Check of build DOM with Initial Settings', () => {
+        domComposition = new DotsPanel();
+
+        // checking for the Main Wrapper Node was created for slider
+
+    });
+});
diff --git a/...s/react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DotsPanel/DotsPanel.ts b/...s/react-uikit/src/epics/Welcome/features/Slider/src/DOMComposition/DotsPanel/DotsPanel.ts
@@ -0,0 +1,7 @@
+import ADotsPanel from './ADotsPanel';
+
+export class DotsPanel extends ADotsPanel {
+
+}
+
+export default DotsPanel;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ArrowsPanel from './ArrowsPanel';

		export default ArrowsPanel;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import DOMFactory from './DOMFactory';

		export default DOMFactory;