Merge pull request #110 from EPICLab/browser-card

Browser Card

src/assets/style.css

@@ -350,4 +350,42 @@ img.diff_icon {
 
 #new-card-dialog-title {
   margin-top: -10px;
+}
+
+div.browser-topbar {
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+button.arrow-left {
+  background: url('arrow-left-bold.svg') no-repeat center top/contain;
+  background-size: cover;
+  border-style: none;
+  outline: 0px;
+}
+
+button.arrow-right {
+  background: url('arrow-right-bold.svg') no-repeat center top/contain;
+  background-size: cover;
+  border-style: none;
+  outline: 0px;
+}
+
+button.refresh {
+  background: url('refresh.svg') no-repeat center top/contain;
+  background-size: cover;
+  border-style: none;
+  outline: 0px;
+}
+
+.url-bar-style {
+  height: 17px;
+  border-radius: 2px;
+  border: none;
+}
+
+div.browser-content {
+  border-radius: 0px 0px 10px 10px;
 }

src/components/Browser.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { DateTime } from 'luxon';
+import { v4 } from 'uuid';
+import { useDispatch } from 'react-redux';
+import { Button } from '@material-ui/core';
+import { Metafile } from '../types';
+import { Actions, ActionKeys } from '../store/actions';
+import { loadCard } from '../containers/handlers';
+
+type BrowserState = {
+    history: URL[];
+    current: URL;
+    index: number;
+}
+
+export const BrowserComponent: React.FunctionComponent = () => {
+    const [webviewKey, setWebviewKey] = useState(0);
+    const [urlInput, setUrlInput] = useState('');
+    const [browserState, setBrowserState] = useState<BrowserState>({ history: [new URL('https://epiclab.github.io/')], current: new URL('https://epiclab.github.io/'), index: 0 });
+
+    const go = (e: React.KeyboardEvent) => {
+        if (e.keyCode != 13) return;
+        let history = browserState.history;
+        if (browserState.index > 0) {
+            history = history.slice(browserState.index);
+            setBrowserState({ ...browserState, index: 0 });
+        }
+        setBrowserState({ ...browserState, current: new URL(urlInput), history: [new URL(urlInput), ...history] });
+    }
+
+    const backwards = () => {
+        if (browserState.index < browserState.history.length - 1) {
+            const newCurrent = browserState.history[browserState.index + 1];
+            setBrowserState({ ...browserState, current: newCurrent, index: browserState.index + 1 });
+            setUrlInput(newCurrent.toString());
+        }
+    }
+
+    const forwards = () => {
+        if (browserState.index > 0) {
+            const newCurrent = browserState.history[browserState.index - 1];
+            setBrowserState({ ...browserState, current: newCurrent, index: browserState.index - 1 });
+            setUrlInput(newCurrent.toString());
+        }
+    }
+
+    return (
+        <>
+            <div className='browser-topbar'>
+                <button className="arrow-left" onClick={() => backwards()} />
+                <button className="arrow-right" onClick={() => forwards()} />
+                <button className="refresh" onClick={() => setWebviewKey(webviewKey + 1)} />
+                <input className="url-bar-style" type="text" placeholder="URL" value={urlInput} onKeyDown={go} onChange={e => setUrlInput(e.target.value)} />
+            </div>
+            <div className='browser-content'>
+                <webview key={webviewKey} src={browserState.current.toString()} style={{ height: '226px', width: '200px', borderRadius: '10px!important' }}></webview>
+            </div>
+        </>
+    )
+}
+
+
+
+export const BrowserButton: React.FunctionComponent = () => {
+    const dispatch = useDispatch();
+
+    const handleClick = async (e: React.MouseEvent) => {
+        e.preventDefault();
+        const metafile: Metafile = {
+            id: v4(),
+            name: 'Browser',
+            modified: DateTime.local(),
+            handler: 'Browser'
+        };
+        const addMetafileAction: Actions = { type: ActionKeys.ADD_METAFILE, id: metafile.id, metafile: metafile };
+        dispatch(addMetafileAction);
+        dispatch(loadCard(metafile));
+    };
+
+    return (
+        <Button id='diffpicker-button' variant='contained' color='primary' onClick={e => handleClick(e)}>Open Browser...</Button>
+    );
+}

src/components/CanvasComponent.tsx

@@ -12,6 +12,7 @@ import { Button } from '@material-ui/core';
 import StackComponent from './StackComponent';
 import { loadStack } from '../containers/handlers';
 import DiffPickerButton from './DiffPickerDialog';
+import { BrowserButton } from './Browser';
 
 const CanvasComponent: React.FunctionComponent<Canvas> = props => {
   const cards = useSelector((state: RootState) => state.cards);
@@ -70,6 +71,7 @@ const CanvasComponent: React.FunctionComponent<Canvas> = props => {
       <FilePickerButton />
       <DiffPickerButton />
       <Button id='stack-button' variant='contained' color='primary' onClick={createStack}>Create Stack</Button>
+      <BrowserButton />
       {Object.values(stacks).map(stack => <StackComponent key={stack.id} {...stack} />)}
       {Object.values(cards).filter(card => !card.captured).map(card => <CardComponent key={card.id} {...card} />)}
       {props.children}

src/components/CardComponent.tsx

@@ -7,6 +7,7 @@ import { ActionKeys } from '../store/actions';
 import FileExplorerComponent from './FileExplorer';
 import Editor from './Editor';
 import Diff from './Diff';
+import { BrowserComponent } from './Browser';
 import { RootState } from '../store/root';
 
 const Header: React.FunctionComponent<{ title: string }> = props => {
@@ -21,6 +22,8 @@ const ContentFront: React.FunctionComponent<Card> = props => {
       return (<Diff left={props.related[0]} right={props.related[1]} />);
     case 'Explorer':
       return (<FileExplorerComponent rootId={props.related[0]} />);
+    case 'Browser':
+      return (<BrowserComponent />);
     default:
       return null;
   }

src/main.js

@@ -20,7 +20,8 @@ const createWindow = () => {
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       nodeIntegration: true,
-      webSecurity: false
+      webSecurity: false,
+      webviewTag: true
     }
   });