@pixelated-tech/components 3.1.4

package/dist/components/callout/callout.scss

@@ -0,0 +1,331 @@
+/* ========================================
+============  DEFAUTL CALLOUT  ============
+======================================== */
+
+.callout, 
+.callout * {
+    box-sizing: border-box; 
+    display: flex;
+    flex-flow: row;
+    padding: 0px;
+    /* border: 1px solid black; */
+}
+
+.callout {
+    padding: 20px;
+    align-items: stretch;
+    width: 100%;
+}
+
+.callout.vertical {
+    flex-direction: column;
+    padding: 0;
+}
+
+.callout .calloutImage {
+    overflow: hidden;
+    width: 100%;
+    background-color: white;
+    /* position: relative; */
+    /* align-self: start; */
+    /* aspect-ratio causing some interesting results */
+    /* aspect-ratio: 1/1;  */
+}
+
+.callout.vertical .calloutImage {
+    width: 70%;
+    margin: 0 auto;
+    aspect-ratio: 1;
+}
+
+.callout .calloutImage a,
+.callout .calloutImage img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top;
+}
+
+.callout .calloutImage.square {
+    border-radius: 0%;
+}
+
+.callout .calloutImage.bevel {
+    clip-path: rect(1% 98% 98% 1% round 5%);
+}
+
+.callout .calloutImage.squircle {
+    clip-path: rect(1% 98% 98% 1% round 25%);
+}
+
+.callout .calloutImage.round {
+    clip-path: rect(1% 98% 98% 1% round 100%);
+}
+
+.callout .calloutBody {
+    flex-flow: column;
+}
+
+.callout .calloutBody > * {
+    padding: 5px 20px;
+}
+
+.callout.left,
+.callout.right {
+    float: unset !important; /* OVERRIDE pixelated.global.css */
+}
+
+.callout.left .calloutBody > * {
+    text-align: left;
+    margin-left: 0;
+    margin-right: auto;
+}
+
+.callout.right .calloutBody > * {
+    text-align: right;
+    margin-right: 0;
+    margin-left: auto;
+}
+
+.callout .calloutHeader {
+    text-align: center;
+    margin: 0 auto;
+}
+
+.callout .calloutHeader a {
+    --do-nothing: true;
+}
+
+.callout .calloutHeader h2 {
+    --do-nothing: true;
+}
+
+.callout .calloutTitle {
+    text-align: center;
+}
+
+.callout .calloutSubtitle {
+    text-align: left;
+}
+
+.callout.vertical .calloutSubtitle {
+    text-align: center;
+    margin: 0 auto;
+}
+
+.callout .calloutSubtitle h3 {
+    padding: 0;
+    --do-nothing: true;
+}
+
+.callout .calloutContent {
+    --do-nothing: true;
+}
+
+.callout .calloutButton { 
+    --do-nothing: true;
+}
+
+.callout .calloutButton button { 
+    display: inline-block;
+    max-width: 250px;
+    margin: 10px auto !important;
+    padding: 10px 30px;
+    border: 1px solid #999;
+    background-color: #DDD;
+    text-align: center;
+    font: inherit;
+    font-weight: 700;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    /* cursor: pointer */
+}
+
+.callout .calloutButton a {
+    display: inline-block;
+}
+
+/* ========================================
+=============  BOXED CALLOUT  =============
+======================================== */
+
+.callout.boxed {
+	padding: 0px;
+    margin: 10px 0;
+    border: 1.5px solid #666;
+    /* border-radius: 25px; */ /* moved to specific box shapes */
+    overflow: hidden; /* hide image beyond round corners */
+}
+
+.callout.boxed.square {
+    border-radius: 0px;
+}
+
+.callout.boxed.bevel {
+    border-radius: 5px;
+}
+
+.callout.boxed.squircle {
+    border-radius: 25px;
+}
+
+.callout.boxed.round {
+    border-radius: 100%;
+}
+
+.callout.boxed .calloutImage {
+	clip-path: none;
+    aspect-ratio: 1/1;
+    background-color: white;
+    width: 100% !important;
+}
+
+.callout.boxed .calloutBody { 
+    --do-nothing: true;
+    padding: 5px 20px;
+}
+
+.callout.boxed.vertical .calloutBody { 
+    --do-nothing: true;
+    padding: 20px 0px;
+}
+
+/* ========================================
+=============  FULL CALLOUT  =============
+======================================== */
+
+.callout.full {
+    padding: 0px;
+}
+
+.callout.full.vertical .calloutImage {
+    width: 100%;
+}
+
+.callout.full .calloutBody > * {
+    padding: 5px 5px;
+}
+
+/* ========================================
+=============  GRID CALLOUT  ==============
+======================================== */
+
+.callout.grid, 
+.callout.grid * {
+    display: grid;
+}
+
+@for $i from 1 through 11 {
+    @for $k from 1 through 11 {
+        .calloutGrid-#{$i}-#{$k} { grid-template-columns: #{$i}fr #{$k}fr; }
+        @media screen and (max-width: 480px) {
+			.calloutGrid-#{$i}-#{$k} { grid-template-columns: 1fr; }
+		}
+    }
+}
+
+.callout.grid {
+    --do-nothing: true;
+    /* assumes horizontal left */
+	/* grid-template-columns: 1fr 2fr; */ /* moved to tsx */
+}
+
+.callout.grid.right {
+    --do-nothing: true;
+    /* assumes horizontal right */
+	/* grid-template-columns: 2fr 1fr; */ /* moved to tsx */
+}
+
+.callout.grid.vertical {
+	grid-template-columns: 1fr;
+
+}
+
+.callout.grid .calloutImage img {
+    /* duplicate of .callout .calloutImage img */
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top;
+}
+
+.callout.grid .calloutBody {
+	grid-auto-rows: min-content;
+}
+
+/* ========================================
+===========  OVERLAY CALLOUT  =============
+======================================== */
+
+.callout.overlay {
+    position: relative;
+    padding: 0;
+    overflow: hidden;
+}
+
+.callout.overlay .calloutImage {
+    width: 100%;
+    height: 100%;
+}
+
+.callout.overlay .calloutBody {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    /* padding: 20px; */
+}
+
+/* ========================================
+=========  SPLIT SCREEN CALLOUT  ==========
+======================================== */
+
+.callout.split, 
+.callout.split * {
+    padding: 0px;
+}
+
+.callout.split .calloutImage,
+.callout.split .calloutBody {
+    flex: 1;
+}
+
+.callout.split .calloutBody > * {
+    padding: 5px 20px;
+}
+
+/* ========================================
+=========  CALLOUT MEDIA QUERIES  =========
+======================================== */
+
+@media screen and (max-width: 480px) {
+    .callout { 
+        flex-direction: column;
+        margin: 30px 0;
+        padding: 0;
+    }
+	.callout.full {
+		margin: 0;
+	}
+    .callout.grid {
+	    grid-template-columns: 1fr;
+    }
+    .callout .calloutImage { 
+        width: 70%;
+        margin: 0 auto;
+    }
+    .callout.full .calloutImage,
+    .callout.split .calloutImage { 
+        width: 100%;
+        margin: 0 auto;
+    }
+    .callout .calloutBody > * { 
+        margin: 0 auto !important;
+        text-align: center !important;
+    }
+    .callout .calloutContent  { 
+        text-align: left !important;
+    }
+} 

package/dist/components/carousel/carousel.css

@@ -0,0 +1,178 @@
+/* ========================================
+===============  CAROUSEL   ===============
+======================================== */
+
+.carouselContainer {
+	height: 600px;
+    background: #FFF;
+    border: 1px solid #AAA;
+}
+.carouselCardsContainer {
+	height: 550px;
+	position: relative;
+    overflow: hidden;
+}
+@media screen and (max-width: 480px) {
+    .carouselContainer {
+		height: 350px;
+	}
+	.carouselCardsContainer {
+        height: 300px;
+    }
+}
+
+#carouselCardsContainer {
+	--do-nothing: true;
+}
+
+/* .noDrag {
+	-webkit-user-drag: none;
+	-moz-user-drag: none;
+	-ms-user-drag: none;
+	user-drag: none;
+  	-webkit-user-select: none;
+  	-moz-user-select: none;
+  	-ms-user-select: none;
+	user-select: none;
+} */
+
+.carouselCardWrapper {
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0 auto;
+	overflow: hidden;
+}
+
+.carouselCard {
+	width: 100%;
+	margin: 0 auto;
+	
+}
+
+/* .carouselCard {
+	width: 100%;
+	height: 100%;
+    margin: 0 auto;
+} */
+
+.carouselCardHeader {
+	font-size: 1.5em;
+	font-weight: bold;
+	text-align: center;
+	margin: 5px auto;
+	width: 100%;
+}
+
+.carouselCardSubHeader {
+	font-size: 1.1em;
+	font-weight: bold;
+	text-align: center;
+	margin: 5px auto;
+	width: 100%;
+}
+
+.carouselCardBody {
+	margin: 5px auto;
+	width: 90%;
+}
+
+.carouselCardImage {
+	margin: 0 auto;
+	max-width: 100%;
+	max-height: 100%;
+	width: 100%;
+	height: 400px;
+	position: relative;
+	object-fit: fill;
+	overflow: clip;
+}
+
+.carouselCardImage { 
+	img {
+		/* max-height: auto; 
+		max-width: 100%;
+		height: auto;
+		width: 100%; */
+		position: absolute; 
+		top: 50%; 
+		left: 50%; 
+		transform: translate(-50%, -50%)
+	}
+
+	.imgFill {
+		max-height: 100%; 
+		max-width: 100%;
+		height: 100%;
+		width: 100%;
+		object-fit: fill;
+	}
+
+	.imgContain {
+		max-height: 100%; 
+		max-width: auto;
+		height: 100%;
+		width: auto;
+		object-fit: contain;
+	}
+	
+	.imgCover {
+		max-height: auto; 
+		max-width: 100%;
+		height: auto;
+		width: 100%;
+		object-fit: cover;
+	}
+
+}
+
+.carouselButtons {
+	width: 100%;
+	height: 50px;
+	text-align: center;
+}
+
+.carouselButton {
+    font-size: 24px;
+	z-index: 900;
+    padding: 5px;
+	display: inline-block;
+}
+
+.carouselArrow,
+.carouselArrowLeft, 
+.carouselArrowRight {
+	position: absolute;
+    font-size: 24px;
+	top: 50%;
+    opacity: .5;
+	z-index: 900;
+    padding: 5px;
+}
+
+.carouselArrowLeft {
+	left: 0; 
+}
+
+.carouselArrowRight {
+	right: 0;
+} 
+
+.carouselDetails {
+	position: absolute;
+	bottom: 20px;
+	z-index: 1000;
+    width: 100%;
+	font-size: 11px;
+	text-align: center;
+}
+
+.carouselLoading {
+    column-span: all;
+	text-align: center;
+}

package/dist/components/carousel/carousel.drag.js

@@ -0,0 +1,203 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+/*
+    if (props.draggable && props.draggable === true) {
+        if (debug) console.log('CarouselSimple: Dragging enabled');
+        DragHandler(cardIndex, 'carouselCardWrapper', nextCard, previousCard);
+    } else {
+        if (debug) console.log('CarouselSimple: Dragging disabled');
+    }
+*/
+DragHandler.propTypes = {
+    activeIndex: PropTypes.number.isRequired,
+    targetDiv: PropTypes.string.isRequired,
+    nextImage: PropTypes.func.isRequired,
+    previousImage: PropTypes.func.isRequired,
+};
+export function DragHandler(props) {
+    // export function DragHandler(props: { activeIndex: number, targetDiv: string, nextImage: () => void, previousImage: () => void} ) {
+    const classSelector = props.targetDiv;
+    const divSelector = 'div.' + classSelector;
+    const debug = false;
+    function dragObj() {
+        return {
+            draggable: false,
+            dragMoving: false,
+            startX: 0, /* start left of object */
+            firstX: 0, /* first mouse x */
+            previousX: 0, /* prevous mouse x */
+            currentX: 0, /* current mouse x */
+            directionX: 0,
+            momentumX: 0, /* maximum diff of current and previous */
+            moveX: 0, /* total mouse x distance */
+            newX: 0, /* new left of object */
+            minDistance: 50,
+            dragStyles: {}
+        };
+    }
+    let drag = dragObj();
+    function dragStart(event) {
+        if (debug) {
+            console.log('Drag Start - ' + event.type);
+        }
+        // var elem = event.currentTarget ;
+        const target = event.target;
+        const currentTarget = event.currentTarget;
+        const elem = target.closest(divSelector);
+        if (!elem) {
+            if (debug)
+                console.log('No element found for drag start');
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        drag.draggable = true;
+        drag.previousX = drag.firstX;
+        drag.currentX = drag.firstX;
+        drag.startX = elem.offsetLeft;
+        /* Add existing drag styles to array - save for later */
+        drag.dragStyles.transform = elem.style.transform;
+        drag.dragStyles.transition = elem.style.transition;
+        if (event instanceof MouseEvent) {
+            drag.firstX = Math.round(event.pageX);
+        }
+        else if (event instanceof TouchEvent) {
+            drag.firstX = Math.round(event.touches[0].pageX);
+        }
+        if (event instanceof DragEvent) {
+            const dragEvent = event;
+            if (dragEvent.dataTransfer) {
+                dragEvent.dataTransfer.setData('text/plain', currentTarget.id);
+                const img = new Image();
+                // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
+                img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=';
+                dragEvent.dataTransfer.setDragImage(img, 0, 0);
+            }
+        }
+    }
+    ;
+    function draggable(event) {
+        drag.dragMoving = true;
+        if (drag.draggable) {
+            event.preventDefault();
+            event.stopPropagation();
+            const target = event.target;
+            const elem = target.closest(divSelector);
+            if (!elem) {
+                if (debug)
+                    console.log('No element found for draggable');
+                return;
+            }
+            drag.previousX = drag.currentX;
+            if (event instanceof MouseEvent) {
+                drag.currentX = Math.round(event.pageX);
+            }
+            else if (event instanceof TouchEvent) {
+                drag.currentX = Math.round(event.touches[0].pageX);
+            }
+            /* Set Momentum to max value */
+            const _momentumX = Math.round(Math.abs(drag.previousX - drag.currentX));
+            drag.momentumX = (_momentumX > drag.momentumX) ? _momentumX : drag.momentumX;
+            drag.moveX = Math.round(Math.abs(drag.firstX - drag.currentX));
+            /* Right to Left or Left to Right */
+            drag.directionX = (drag.firstX > drag.currentX) ? -1 : 1;
+            drag.newX = drag.startX + (drag.moveX * drag.directionX);
+            elem.style.left = drag.newX + 'px';
+            /* Remove styles that conflict with dragging */
+            elem.style.transition = '';
+            elem.style.transform = '';
+        }
+    }
+    ;
+    function dragEnd(event) {
+        if (drag.draggable) {
+            if (debug) {
+                console.log('Drag End - ' + event.type);
+            }
+            const target = event.target;
+            const elem = target.closest(divSelector);
+            if (!elem) {
+                if (debug)
+                    console.log('No element found for drag end');
+                return;
+            }
+            /* Add styles back */
+            for (const property in drag.dragStyles) {
+                elem.style[property] = drag.dragStyles[property];
+            }
+            /* Determine drag distance */
+            drag.previousX = drag.currentX;
+            if (event instanceof MouseEvent) {
+                drag.currentX = Math.round(event.pageX);
+            }
+            else if (event instanceof TouchEvent) {
+                drag.currentX = Math.round(event.changedTouches[0].pageX);
+            }
+            drag.moveX = Math.round(Math.abs(drag.firstX - drag.currentX));
+            const farEnough = drag.moveX > drag.minDistance;
+            /* Add momentum at the end of the slide */
+            elem.style.transition = 'all 0.5s ease-out 0.0s'; /* ease-in */
+            elem.style.transform = 'translateX(' + ((drag.newX + (drag.momentumX)) * drag.directionX) + ')';
+            /* roll in the next / previous image */
+            if (farEnough && drag.directionX !== 0) {
+                if ((drag.directionX < 0)) {
+                    if (debug)
+                        console.log("Dragged Far Enough - Go Next");
+                    props.nextImage();
+                }
+                else {
+                    if (debug)
+                        console.log("Dragged Far Enough - Go Previous");
+                    props.previousImage();
+                }
+                ;
+            }
+            else {
+                if (debug)
+                    console.log("Not Dragged Far Enough!");
+            }
+            /* Reset drag variables */
+            drag = dragObj();
+        }
+    }
+    ;
+    function transitionEnd(event) {
+        if (debug) {
+            console.log('Transition End - ' + event.type);
+        }
+        const elem = event.target;
+        if (!elem) {
+            if (debug)
+                console.log('No element found for transition end');
+            return;
+        }
+        if (elem.matches(divSelector)) {
+            elem.style.left = '0px';
+        }
+    }
+    ;
+    function handleEventListeners(activeIndex) {
+        useEffect(() => {
+            // const container = document.getElementById(classSelector);
+            // { passive: true } is needed for preventDefault to work on drag events
+            document.addEventListener('touchstart', dragStart, { capture: true, passive: false });
+            document.addEventListener('touchmove', draggable, { capture: true, passive: false });
+            document.addEventListener('touchend', dragEnd, { capture: true, passive: true });
+            document.addEventListener('mousedown', dragStart, { capture: true, passive: false });
+            document.addEventListener('mousemove', draggable, { capture: true, passive: false });
+            document.addEventListener('mouseup', dragEnd, { capture: true, passive: true });
+            document.addEventListener('transitionend', transitionEnd, { capture: true, passive: true });
+            return () => {
+                // { passive: true } is not needed to match and remove an event listener
+                document.removeEventListener('touchstart', dragStart, { capture: true });
+                document.removeEventListener('touchmove', draggable, { capture: true });
+                document.removeEventListener('touchend', dragEnd, { capture: true });
+                document.removeEventListener('mousedown', dragStart, { capture: true });
+                document.removeEventListener('mousemove', draggable, { capture: true });
+                document.removeEventListener('mouseup', dragEnd, { capture: true });
+                document.removeEventListener('transitionend', transitionEnd, { capture: true });
+            };
+        }, [activeIndex]);
+    }
+    handleEventListeners(props.activeIndex);
+}