add share modal

client/components/Nav.js

@@ -47,9 +47,9 @@ function Nav(props) {
           if (props.project.id) {
             return (
               <li className="nav__item">
-                <Link to={`/full/${props.project.id}`} target="_blank">
+                <a onClick={props.showShareModal}>
-                  Fullscreen
+                  Share
-                </Link>
+                </a>
               </li>
             );
           }
@@ -134,7 +134,8 @@ Nav.propTypes = {
     id: PropTypes.string
   }),
   logoutUser: PropTypes.func.isRequired,
-  stopSketch: PropTypes.func.isRequired
+  stopSketch: PropTypes.func.isRequired,
+  showShareModal: PropTypes.func.isRequired
 };
 
 export default Nav;

client/constants.js

@@ -72,5 +72,8 @@ export const CLOSE_NEW_FOLDER_MODAL = 'CLOSE_NEW_FOLDER_MODAL';
 export const SHOW_FOLDER_CHILDREN = 'SHOW_FOLDER_CHILDREN';
 export const HIDE_FOLDER_CHILDREN = 'HIDE_FOLDER_CHILDREN';
 
+export const SHOW_SHARE_MODAL = 'SHOW_SHARE_MODAL';
+export const CLOSE_SHARE_MODAL = 'CLOSE_SHARE_MODAL';
+
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/ide.js

@@ -126,3 +126,15 @@ export function closeNewFolderModal() {
     type: ActionTypes.CLOSE_NEW_FOLDER_MODAL
   };
 }
+
+export function showShareModal() {
+  return {
+    type: ActionTypes.SHOW_SHARE_MODAL
+  };
+}
+
+export function closeShareModal() {
+  return {
+    type: ActionTypes.CLOSE_SHARE_MODAL
+  };
+}

client/modules/IDE/components/PreviewFrame.js

@@ -148,7 +148,7 @@ class PreviewFrame extends React.Component {
     // one level down...
 
     htmlFile = hijackConsoleLogsScript() + htmlFile;
-    const mediaFiles = this.props.files.filder(file => file.url);
+    const mediaFiles = this.props.files.filter(file => file.url);
 
     const jsFiles = [];
     this.props.jsFiles.forEach(jsFile => {

client/modules/IDE/components/ShareModal.js

@@ -0,0 +1,48 @@
+import React, { PropTypes } from 'react';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+
+function ShareModal(props) {
+  const hostname = window.location.origin;
+  return (
+    <section className="share-modal">
+      <header className="share-modal__header">
+        <h2>Share Sketch</h2>
+        <button className="about__exit-button" onClick={props.closeShareModal}>
+          <InlineSVG src={exitUrl} alt="Close Share Overlay" />
+        </button>
+      </header>
+      <div className="share-modal__section">
+        <label className="share-modal__label">Embed</label>
+        <input
+          type="text"
+          className="share-modal__input"
+          value={`<iframe src="${hostname}/embed/${props.projectId}"></iframe>`}
+        />
+      </div>
+      <div className="share-modal__section">
+        <label className="share-modal__label">Fullscreen</label>
+        <input
+          type="text"
+          className="share-modal__input"
+          value={`${hostname}/full/${props.projectId}`}
+        />
+      </div>
+      <div className="share-modal__section">
+        <label className="share-modal__label">Edit</label>
+        <input
+          type="text"
+          className="share-modal__input"
+          value={`${hostname}/projects/${props.projectId}`}
+        />
+      </div>
+    </section>
+  );
+}
+
+ShareModal.propTypes = {
+  projectId: PropTypes.string.isRequired,
+  closeShareModal: PropTypes.func.isRequired
+};
+
+export default ShareModal;

client/modules/IDE/pages/IDEView.js

@@ -7,6 +7,7 @@ import TextOutput from '../components/TextOutput';
 import Preferences from '../components/Preferences';
 import NewFileModal from '../components/NewFileModal';
 import NewFolderModal from '../components/NewFolderModal';
+import ShareModal from '../components/ShareModal';
 import Nav from '../../../components/Nav';
 import Console from '../components/Console';
 import { bindActionCreators } from 'redux';
@@ -121,6 +122,7 @@ class IDEView extends React.Component {
           project={this.props.project}
           logoutUser={this.props.logoutUser}
           stopSketch={this.props.stopSketch}
+          showShareModal={this.props.showShareModal}
         />
         <Toolbar
           className="Toolbar"
@@ -293,6 +295,18 @@ class IDEView extends React.Component {
             );
           }
         })()}
+        {(() => { // eslint-disable-line
+          if (this.props.ide.shareModalVisible) {
+            return (
+              <Overlay>
+                <ShareModal
+                  projectId={this.props.project.id}
+                  closeShareModal={this.props.closeShareModal}
+                />
+              </Overlay>
+            );
+          }
+        })()}
       </div>
 
     );
@@ -323,7 +337,8 @@ IDEView.propTypes = {
     consoleIsExpanded: PropTypes.bool.isRequired,
     preferencesIsVisible: PropTypes.bool.isRequired,
     projectOptionsVisible: PropTypes.bool.isRequired,
-    newFolderModalVisible: PropTypes.bool.isRequired
+    newFolderModalVisible: PropTypes.bool.isRequired,
+    shareModalVisible: PropTypes.bool.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -396,6 +411,8 @@ IDEView.propTypes = {
   closeNewFolderModal: PropTypes.func.isRequired,
   createFolder: PropTypes.func.isRequired,
   createFile: PropTypes.func.isRequired,
+  showShareModal: PropTypes.func.isRequired,
+  closeShareModal: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -12,7 +12,8 @@ const initialState = {
   consoleIsExpanded: false,
   preferencesIsVisible: false,
   projectOptionsVisible: false,
-  newFolderModalVisible: false
+  newFolderModalVisible: false,
+  shareModalVisible: false
 };
 
 const ide = (state = initialState, action) => {
@@ -55,6 +56,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { newFolderModalVisible: true });
     case ActionTypes.CLOSE_NEW_FOLDER_MODAL:
       return Object.assign({}, state, { newFolderModalVisible: false });
+    case ActionTypes.SHOW_SHARE_MODAL:
+      return Object.assign({}, state, { shareModalVisible: true });
+    case ActionTypes.CLOSE_SHARE_MODAL:
+      return Object.assign({}, state, { shareModalVisible: false });
     default:
       return state;
   }

client/styles/components/_modal.scss

@@ -47,4 +47,30 @@
   height: #{200 / $base-font-size}rem;
   width: 100%;
   text-align: center;
+}
+
+.share-modal {
+  @extend %modal;
+  padding: #{20 / $base-font-size}rem;
+  width: #{500 / $base-font-size}rem;
+}
+
+.share-modal__header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.share-modal__section {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: #{10 / $base-font-size}rem 0;
+}
+
+.share-modal__label {
+  width: #{86 / $base-font-size}rem;
+}
+
+.share-modal__input {
+  flex: 1;
 }