Merge branch 'nik72619c-master'

client/components/Nav.jsx

@@ -28,6 +28,33 @@ class Nav extends React.PureComponent {
     this.clearHideTimeout = this.clearHideTimeout.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+    this.handleNew = this.handleNew.bind(this);
+    this.handleDuplicate = this.handleDuplicate.bind(this);
+    this.handleShare = this.handleShare.bind(this);
+    this.handleDownload = this.handleDownload.bind(this);
+    this.handleFind = this.handleFind.bind(this);
+    this.handleAddFile = this.handleAddFile.bind(this);
+    this.handleAddFolder = this.handleAddFolder.bind(this);
+    this.handleFindNext = this.handleFindNext.bind(this);
+    this.handleRun = this.handleRun.bind(this);
+    this.handleFindPrevious = this.handleFindPrevious.bind(this);
+    this.handleStop = this.handleStop.bind(this);
+    this.handleStartAccessible = this.handleStartAccessible.apply(this);
+    this.handleStopAccessible = this.handleStopAccessible.bind(this);
+    this.handleKeyboardShortcuts = this.handleKeyboardShortcuts.bind(this);
+    this.handleLogout = this.handleLogout.bind(this);
+    this.toggleDropdownForFile = this.toggleDropdown.bind(this, 'file');
+    this.handleFocusForFile = this.handleFocus.bind(this, 'file');
+    this.setDropdownForNone = this.setDropdown.bind(this, 'none');
+    this.toggleDropdownForEdit = this.toggleDropdown.bind(this, 'edit');
+    this.handleFocusForEdit = this.handleFocus.bind(this, 'edit');
+    this.toggleDropdownForSketch = this.toggleDropdown.bind(this, 'sketch');
+    this.handleFocusForSketch = this.handleFocus.bind(this, 'sketch');
+    this.toggleDropdownForHelp = this.toggleDropdown.bind(this, 'help');
+    this.handleFocusForHelp = this.handleFocus.bind(this, 'help');
+    this.toggleDropdownForAccount = this.toggleDropdown.bind(this, 'account');
+    this.handleFocusForAccount = this.handleFocus.bind(this, 'account');
     this.closeDropDown = this.closeDropDown.bind(this);
   }
 
@@ -63,6 +90,95 @@ class Nav extends React.PureComponent {
     this.handleClickOutside();
   }
 
+  handleNew() {
+    if (!this.props.unsavedChanges) {
+      this.props.newProject();
+    } else if (this.props.warnIfUnsavedChanges()) {
+      this.props.newProject();
+    }
+    this.setDropdown('none');
+  }
+
+  handleSave() {
+    if (this.props.user.authenticated) {
+      this.props.saveProject(this.props.cmController.getContent());
+    } else {
+      this.props.showErrorModal('forceAuthentication');
+    }
+    this.setDropdown('none');
+  }
+
+  handleFind() {
+    this.props.cmController.showFind();
+    this.setDropdown('none');
+  }
+
+  handleFindNext() {
+    this.props.cmController.findNext();
+    this.setDropdown('none');
+  }
+
+  handleFindPrevious() {
+    this.props.cmController.findPrev();
+    this.setDropdown('none');
+  }
+
+  handleAddFile() {
+    this.props.newFile();
+    this.setDropdown('none');
+  }
+
+  handleAddFolder() {
+    this.props.newFolder();
+    this.setDropdown('none');
+  }
+
+  handleRun() {
+    this.props.startSketch();
+    this.setDropdown('none');
+  }
+
+  handleStop() {
+    this.props.stopSketch();
+    this.setDropdown('none');
+  }
+
+  handleStartAccessible() {
+    this.props.setAllAccessibleOutput(true);
+    this.setDropdown('none');
+  }
+
+  handleStopAccessible() {
+    this.props.setAllAccessibleOutput(false);
+    this.setDropdown('none');
+  }
+
+  handleKeyboardShortcuts() {
+    this.props.showKeyboardShortcutModal();
+    this.setDropdown('none');
+  }
+
+  handleLogout() {
+    this.props.logoutUser();
+    this.setDropdown('none');
+  }
+
+  handleDownload() {
+    this.props.autosaveProject();
+    this.props.exportProjectAsZip(this.props.project.id);
+    this.setDropdown('none');
+  }
+
+  handleDuplicate() {
+    this.props.cloneProject();
+    this.setDropdown('none');
+  }
+
+  handleShare() {
+    this.props.showShareModal();
+    this.setDropdown('none');
+  }
+
   handleClickOutside() {
     this.setState({
       dropdownOpen: 'none'
@@ -132,7 +248,7 @@ class Nav extends React.PureComponent {
           </li>
           <li className={navDropdownState.file}>
             <button
-              onClick={this.toggleDropdown.bind(this, 'file')}
+              onClick={this.toggleDropdownForFile}
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
               onMouseOver={() => {
@@ -147,15 +263,8 @@ class Nav extends React.PureComponent {
             <ul className="nav__dropdown">
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleNew}
-                    if (!this.props.unsavedChanges) {
+                  onFocus={this.handleFocusForFile}
-                      this.props.newProject();
-                    } else if (this.props.warnIfUnsavedChanges()) {
-                      this.props.newProject();
-                    }
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
                   onBlur={this.handleBlur}
                 >
                   New
@@ -164,15 +273,8 @@ class Nav extends React.PureComponent {
               { __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleSave}
-                    if (this.props.user.authenticated) {
+                  onFocus={this.handleFocusForFile}
-                      this.props.saveProject(this.props.cmController.getContent());
-                    } else {
-                      this.props.showErrorModal('forceAuthentication');
-                    }
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
                   onBlur={this.handleBlur}
                 >
                   Save
@@ -182,11 +284,8 @@ class Nav extends React.PureComponent {
               { this.props.project.id && this.props.user.authenticated &&
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleDuplicate}
-                    this.props.cloneProject();
+                  onFocus={this.handleFocusForFile}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
                   onBlur={this.handleBlur}
                 >
                   Duplicate
@@ -195,11 +294,8 @@ class Nav extends React.PureComponent {
               { this.props.project.id &&
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleShare}
-                    this.props.showShareModal();
+                  onFocus={this.handleFocusForFile}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
                   onBlur={this.handleBlur}
                 >
                   Share
@@ -208,12 +304,8 @@ class Nav extends React.PureComponent {
               { this.props.project.id &&
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleDownload}
-                    this.props.autosaveProject();
+                  onFocus={this.handleFocusForFile}
-                    this.props.exportProjectAsZip(this.props.project.id);
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
                   onBlur={this.handleBlur}
                 >
                   Download
@@ -223,9 +315,9 @@ class Nav extends React.PureComponent {
               <li className="nav__dropdown-item">
                 <Link
                   to={`/${this.props.user.username}/sketches`}
-                  onFocus={this.handleFocus.bind(this, 'file')}
+                  onFocus={this.handleFocusForFile}
                   onBlur={this.handleBlur}
-                  onClick={this.setDropdown.bind(this, 'none')}
+                  onClick={this.setDropdownForNone}
                 >
                   Open
                 </Link>
@@ -234,9 +326,9 @@ class Nav extends React.PureComponent {
               <li className="nav__dropdown-item">
                 <Link
                   to="/p5/sketches"
-                  onFocus={this.handleFocus.bind(this, 'file')}
+                  onFocus={this.handleFocusForFile}
                   onBlur={this.handleBlur}
-                  onClick={this.setDropdown.bind(this, 'none')}
+                  onClick={this.setDropdownForNone}
                 >
                   Examples
                 </Link>
@@ -245,7 +337,7 @@ class Nav extends React.PureComponent {
           </li>
           <li className={navDropdownState.edit}>
             <button
-              onClick={this.toggleDropdown.bind(this, 'edit')}
+              onClick={this.toggleDropdownForEdit}
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
               onMouseOver={() => {
@@ -264,7 +356,7 @@ class Nav extends React.PureComponent {
                     this.props.cmController.tidyCode();
                     this.setDropdown('none');
                   }}
-                  onFocus={this.handleFocus.bind(this, 'edit')}
+                  onFocus={this.handleFocusForEdit}
                   onBlur={this.handleBlur}
                 >
                   Tidy Code
@@ -273,11 +365,8 @@ class Nav extends React.PureComponent {
               </li>
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleFind}
-                    this.props.cmController.showFind();
+                  onFocus={this.handleFocusForEdit}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'edit')}
                   onBlur={this.handleBlur}
                 >
                   Find
@@ -286,11 +375,8 @@ class Nav extends React.PureComponent {
               </li>
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleFindNext}
-                    this.props.cmController.findNext();
+                  onFocus={this.handleFocusForEdit}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'edit')}
                   onBlur={this.handleBlur}
                 >
                   Find Next
@@ -299,11 +385,8 @@ class Nav extends React.PureComponent {
               </li>
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleFindPrevious}
-                    this.props.cmController.findPrev();
+                  onFocus={this.handleFocusForEdit}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'edit')}
                   onBlur={this.handleBlur}
                 >
                   Find Previous
@@ -314,7 +397,7 @@ class Nav extends React.PureComponent {
           </li>
           <li className={navDropdownState.sketch}>
             <button
-              onClick={this.toggleDropdown.bind(this, 'sketch')}
+              onClick={this.toggleDropdownForSketch}
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
               onMouseOver={() => {
@@ -329,11 +412,8 @@ class Nav extends React.PureComponent {
             <ul className="nav__dropdown">
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleAddFile}
-                    this.props.newFile();
+                  onFocus={this.handleFocusForSketch}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
                   onBlur={this.handleBlur}
                 >
                   Add File
@@ -341,11 +421,8 @@ class Nav extends React.PureComponent {
               </li>
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleAddFolder}
-                    this.props.newFolder();
+                  onFocus={this.handleFocusForSketch}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
                   onBlur={this.handleBlur}
                 >
                   Add Folder
@@ -353,11 +430,8 @@ class Nav extends React.PureComponent {
               </li>
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleRun}
-                    this.props.startSketch();
+                  onFocus={this.handleFocusForSketch}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
                   onBlur={this.handleBlur}
                 >
                   Run
@@ -366,11 +440,8 @@ class Nav extends React.PureComponent {
               </li>
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleStop}
-                    this.props.stopSketch();
+                  onFocus={this.handleFocusForSketch}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
                   onBlur={this.handleBlur}
                 >
                   Stop
@@ -379,11 +450,8 @@ class Nav extends React.PureComponent {
               </li>
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleStartAccessible}
-                    this.props.setAllAccessibleOutput(true);
+                  onFocus={this.handleFocusForSketch}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
                   onBlur={this.handleBlur}
                 >
                   Start Accessible
@@ -392,11 +460,8 @@ class Nav extends React.PureComponent {
               </li>
               <li className="nav__dropdown-item">
                 <button
-                  onClick={() => {
+                  onClick={this.handleStopAccessible}
-                    this.props.setAllAccessibleOutput(false);
+                  onFocus={this.handleFocusForSketch}
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
                   onBlur={this.handleBlur}
                 >
                   Stop Accessible
@@ -407,7 +472,7 @@ class Nav extends React.PureComponent {
           </li>
           <li className={navDropdownState.help}>
             <button
-              onClick={this.toggleDropdown.bind(this, 'help')}
+              onClick={this.toggleDropdownForHelp}
               onBlur={this.handleBlur}
               onFocus={this.clearHideTimeout}
               onMouseOver={() => {
@@ -422,12 +487,9 @@ class Nav extends React.PureComponent {
             <ul className="nav__dropdown">
               <li className="nav__dropdown-item">
                 <button
-                  onFocus={this.handleFocus.bind(this, 'help')}
+                  onFocus={this.handleFocusForHelp}
                   onBlur={this.handleBlur}
-                  onClick={() => {
+                  onClick={this.handleKeyboardShortcuts}
-                    this.props.showKeyboardShortcutModal();
-                    this.setDropdown('none');
-                  }}
                 >
                   Keyboard Shortcuts
                 </button>
@@ -437,18 +499,18 @@ class Nav extends React.PureComponent {
                   href="https://p5js.org/reference/"
                   target="_blank"
                   rel="noopener noreferrer"
-                  onFocus={this.handleFocus.bind(this, 'help')}
+                  onFocus={this.handleFocusForHelp}
                   onBlur={this.handleBlur}
-                  onClick={this.setDropdown.bind(this, 'none')}
+                  onClick={this.setDropdownForNone}
                 >Reference
                 </a>
               </li>
               <li className="nav__dropdown-item">
                 <Link
                   to="/about"
-                  onFocus={this.handleFocus.bind(this, 'help')}
+                  onFocus={this.handleFocusForHelp}
                   onBlur={this.handleBlur}
-                  onClick={this.setDropdown.bind(this, 'none')}
+                  onClick={this.setDropdownForNone}
                 >
                   About
                 </Link>
@@ -456,9 +518,9 @@ class Nav extends React.PureComponent {
               <li className="nav__dropdown-item">
                 <Link
                   to="/feedback"
-                  onFocus={this.handleFocus.bind(this, 'help')}
+                  onFocus={this.handleFocusForHelp}
                   onBlur={this.handleBlur}
-                  onClick={this.setDropdown.bind(this, 'none')}
+                  onClick={this.setDropdownForNone}
                 >
                   Feedback
                 </Link>
@@ -485,7 +547,7 @@ class Nav extends React.PureComponent {
             <li className={navDropdownState.account}>
               <button
                 className="nav__item-header"
-                onClick={this.toggleDropdown.bind(this, 'account')}
+                onClick={this.toggleDropdownForAccount}
                 onBlur={this.handleBlur}
                 onFocus={this.clearHideTimeout}
                 onMouseOver={() => {
@@ -501,9 +563,9 @@ class Nav extends React.PureComponent {
                 <li className="nav__dropdown-item">
                   <Link
                     to={`/${this.props.user.username}/sketches`}
-                    onFocus={this.handleFocus.bind(this, 'account')}
+                    onFocus={this.handleFocusForAccount}
                     onBlur={this.handleBlur}
-                    onClick={this.setDropdown.bind(this, 'none')}
+                    onClick={this.setDropdownForNone}
                   >
                     My sketches
                   </Link>
@@ -511,9 +573,9 @@ class Nav extends React.PureComponent {
                 <li className="nav__dropdown-item">
                   <Link
                     to="/assets"
-                    onFocus={this.handleFocus.bind(this, 'account')}
+                    onFocus={this.handleFocusForAccount}
                     onBlur={this.handleBlur}
-                    onClick={this.setDropdown.bind(this, 'none')}
+                    onClick={this.setDropdownForNone}
                   >
                     My assets
                   </Link>
@@ -521,20 +583,17 @@ class Nav extends React.PureComponent {
                 <li className="nav__dropdown-item">
                   <Link
                     to="/account"
-                    onFocus={this.handleFocus.bind(this, 'account')}
+                    onFocus={this.handleFocusForAccount}
                     onBlur={this.handleBlur}
-                    onClick={this.setDropdown.bind(this, 'none')}
+                    onClick={this.setDropdownForNone}
                   >
                     Settings
                   </Link>
                 </li>
                 <li className="nav__dropdown-item">
                   <button
-                    onClick={() => {
+                    onClick={this.handleLogout}
-                      this.props.logoutUser();
+                    onFocus={this.handleFocusForAccount}
-                      this.setDropdown('none');
-                    }}
-                    onFocus={this.handleFocus.bind(this, 'account')}
                     onBlur={this.handleBlur}
                   >
                     Log out