[WIP] Vertical carousel

package.json

@@ -30,6 +30,7 @@
 		"firebase": "~6.1.0",
 		"firebase-mock": "~2.2.10",
 		"fontfaceobserver": "~2.1.0",
+		"pure-react-carousel": "^1.23.0",
 		"react": "~16.8.6",
 		"react-dom": "~16.8.6",
 		"react-draft-wysiwyg": "~1.13.2",
@@ -66,4 +67,4 @@
 		]
 	},
 	"config-overrides-path": "node_modules/react-app-rewire-disable-chunks"
-}
+}

src/components/ContentMapping/ContentMapping.ts

@@ -24,6 +24,8 @@ import { WYSIWYGEditor } from '../ContentWidgets/WYSIWYG/WYSIWYGEditor';
 import { WYSIWYGWidget } from '../ContentWidgets/WYSIWYG/WYSIWYGWidget';
 import { Accordion } from '../ContentWidgets/Accordion/Accordion';
 import { AccordionEditor } from '../ContentWidgets/Accordion/AccordionEditor';
+import { VerticalSlideshow } from '../ContentWidgets/VerticalSlideshow/VerticalSlideshow';
+import { VerticalSlideshowEditor } from '../ContentWidgets/VerticalSlideshow/VerticalSlideshowEditor';
 
 export type WidgetEditorProps = {
 	originalContent: ContentSingularData,
@@ -58,7 +60,8 @@ export enum WidgetTypes {
 	GALLERY = "GALLERY",
 	WYSIWYG_EDITOR = "WYSIWYG_EDITOR",
 	BANNER = "BANNER",
-	ACCORDION = "ACCORDION"
+	ACCORDION = "ACCORDION",
+	VERTICAL_SLIDESHOW = "VERTICAL_SLIDESHOW"
 }
 
 export const ContentMapping: ContentMappingType = {
@@ -127,5 +130,11 @@ export const ContentMapping: ContentMappingType = {
 		editor: AccordionEditor,
 		displayName: "Accordion",
 		widgetCategory: WidgetCategories.Display
+	},
+	VERTICAL_SLIDESHOW: {
+		widget: VerticalSlideshow,
+		editor: VerticalSlideshowEditor,
+		displayName: "Vertical Slideshow",
+		widgetCategory: WidgetCategories.Media
 	}
 }

src/components/ContentWidgets/Gallery/Gallery.css

@@ -1,91 +1,90 @@
 .gallery-display {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0 2px;
+	display: flex;
+	flex-wrap: wrap;
+	padding: 0 2px;
 }
 
 .gallery-col {
-    flex: 33.3%;
-    max-width: 33.3%;
-    padding: 0 2px;
+	flex: 33.3%;
+	max-width: 33.3%;
+	padding: 0 2px;
 }
 
 .gallery-col img {
-    width: 100%;
-    margin-top: 4px;
-    vertical-align: middle;
-    cursor: pointer;
+	width: 100%;
+	margin-top: 4px;
+	vertical-align: middle;
+	cursor: pointer;
 }
 
 /* Lightbox */
+
 .gallery-lightbox {
-    padding-top: 100px;
-    position: fixed;
-    z-index: 2;
-    left: 0;
-    top: 0;
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+	padding-top: 100px;
+	position: fixed;
+	z-index: 2;
+	left: 0;
+	top: 0;
+	overflow: auto;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.9);
+	/* Black w/ opacity */
 }
 
 .gallery-lightbox span {
-    cursor: pointer;
-    color: var(--white);
-    font-size: 80px;
-    z-index: 1;
+	cursor: pointer;
+	color: var(--white);
+	font-size: 80px;
+	z-index: 1;
 }
 
 .gallery-lightbox-content * {
-    overflow: auto;
+	overflow: auto;
 }
 
 .gallery-lightbox-close {
-    position: fixed;
-    top: 50px;
-    right: 10px;
+	position: fixed;
+	top: 50px;
+	right: 10px;
 }
 
 .gallery-lightbox-content img {
-    position: relative;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+	position: relative;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .gallery-lightbox-prev, .gallery-lightbox-next {
-    position: fixed;
-    top: 50%;
+	position: fixed;
+	top: 50%;
 }
 
 .gallery-lightbox-next {
-    right: 0px;
+	right: 0px;
 }
 
 /* gallery editor */
+
 .gallery-editor input {
-    padding: 15px;
-    margin: 0;
+	padding: 15px;
+	margin: 0;
 }
 
 .gallery-editor button {
-    width: 60px;
-    padding: 12px 0;
-    border-radius: 10%;
-    font-size: 15px
+	width: 60px;
+	padding: 12px 0;
+	border-radius: 10%;
+	font-size: 15px;
 }
 
 .gallery-delete-button {
-    border-color: var(--failure-primary);
-    color: var(--failure-primary);
+	border-color: var(--failure-primary);
+	color: var(--failure-primary);
 }
 
 .accordion-add-new-button {
-    display: block;
-    margin: 15px auto;
-}
-
-
-
-
+	display: block;
+	margin: 15px auto;
+}

src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshow.css

@@ -0,0 +1,25 @@
+.vertical-slideshow {
+	height: 60vh;
+}
+
+.vertical-slideshow-editor input {
+	padding: 15px;
+	margin: 0;
+}
+
+.vertical-slideshow-editor button {
+	width: 60px;
+	padding: 12px 0;
+	border-radius: 10%;
+	font-size: 15px;
+}
+
+.vertical-slideshow-delete-button {
+	border-color: var(--failure-primary);
+	color: var(--failure-primary);
+}
+
+.vertical-slideshow-add-button {
+	display: block;
+	margin: 15px auto;
+}

src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshow.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { ContentSingularData } from '../../_data/ContentSingularData';
+import {
+	CarouselProvider,
+	Image,
+	Slide,
+	Slider
+} from 'pure-react-carousel';
+import 'pure-react-carousel/dist/react-carousel.es.css';
+import './VerticalSlideshow.css';
+
+export type SingleVerticalSlideshowContent = {
+	image: string,
+	// alt: string // TODO: support alt tags
+}
+
+export const VerticalSlideshow: React.FC<ContentSingularData> = ({
+	vertical_slideshow_content
+}) => {
+	if (!vertical_slideshow_content) {
+		return <></>
+	}
+
+	return <div className="vertical-slideshow">
+		<CarouselProvider
+			naturalSlideHeight={0.3 * window.innerHeight}
+			naturalSlideWidth={0.6 * window.innerWidth}
+			totalSlides={vertical_slideshow_content.length}
+		>
+			<Slider>
+				{vertical_slideshow_content.map((slideshowContent, idx) => {
+					return <Image
+						key={slideshowContent.image}
+						hasMasterSpinner={true}
+						src={slideshowContent.image}
+					>
+
+					</Image>
+				})}
+			</Slider>
+		</CarouselProvider>
+	</div>
+}

src/components/ContentWidgets/VerticalSlideshow/VerticalSlideshowEditor.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { WidgetEditorProps } from '../../ContentMapping/ContentMapping';
+
+export const VerticalSlideshowEditor: React.FC<WidgetEditorProps> = ({
+	originalContent,
+	editedContent,
+	setEditedContentOnChange
+}) => {
+	const verticalSlideshowContent = editedContent.vertical_slideshow_content || [];
+
+	const updateSingleSlideshowContent = (image: string, index: number) => {
+		const newContent = verticalSlideshowContent.slice();
+		newContent[index] = {
+			image
+		};
+		setEditedContentOnChange("vertical_slideshow_content", newContent);
+	}
+
+	const deleteSlideshowContent = (index: number) => {
+		const newContent = verticalSlideshowContent.slice();
+		newContent.splice(index, 1);
+		setEditedContentOnChange("vertical_slideshow_content", newContent);
+	}
+
+	return <div className="vertical-slideshow-editor">
+		{verticalSlideshowContent.map((slideshowContent, index) => {
+			return <div key={slideshowContent.image}>
+				<input
+					type="text"
+					onChange={(e) => updateSingleSlideshowContent(e.target.value, index)}
+					value={slideshowContent.image}
+				></input>
+				<button
+					className="vertical-slideshow-delete-button"
+					onClick={() => deleteSlideshowContent(index)}
+				>DELETE</button>
+			</div>
+		})}
+		<div>
+			<button
+				className="vertical-slideshow-add-button"
+				onClick={() => {
+					const newContent = verticalSlideshowContent.slice()
+					newContent.push({ image: "" });
+					setEditedContentOnChange("vertical_slideshow_content", newContent);
+				}}
+			>Add</button>
+		</div>
+	</div>
+}

src/components/CustomAppBar/AppBarSideDrawer/AppBarSideDrawer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-// TODO: 
+// TODO 
 export const AppBarSideDrawer: React.FC = () => {
-    return <></>
+	return <></>
 }