Merge branch 'nik72619c-master'

2019-04-03 11:56:57 -04:00 · 2019-04-03 11:56:57 -04:00 · 79ed559eee
commit 79ed559eee
parent 7ef34e8f59 c421a73705
1 changed files with 170 additions and 111 deletions
--- a/client/components/Nav.jsx
+++ b/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={() => {
-                    if (!this.props.unsavedChanges) {
-                      this.props.newProject();
-                    } else if (this.props.warnIfUnsavedChanges()) {
-                      this.props.newProject();
-                    }
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
+                  onClick={this.handleNew}
+                  onFocus={this.handleFocusForFile}
                  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={() => {
-                    if (this.props.user.authenticated) {
-                      this.props.saveProject(this.props.cmController.getContent());
-                    } else {
-                      this.props.showErrorModal('forceAuthentication');
-                    }
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
+                  onClick={this.handleSave}
+                  onFocus={this.handleFocusForFile}
                  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={() => {
-                    this.props.cloneProject();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
+                  onClick={this.handleDuplicate}
+                  onFocus={this.handleFocusForFile}
                  onBlur={this.handleBlur}
                >
                  Duplicate
@ -195,11 +294,8 @@ class Nav extends React.PureComponent {
              { this.props.project.id &&
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.showShareModal();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
+                  onClick={this.handleShare}
+                  onFocus={this.handleFocusForFile}
                  onBlur={this.handleBlur}
                >
                  Share
@ -208,12 +304,8 @@ class Nav extends React.PureComponent {
              { this.props.project.id &&
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.autosaveProject();
-                    this.props.exportProjectAsZip(this.props.project.id);
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'file')}
+                  onClick={this.handleDownload}
+                  onFocus={this.handleFocusForFile}
                  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={() => {
-                    this.props.cmController.showFind();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'edit')}
+                  onClick={this.handleFind}
+                  onFocus={this.handleFocusForEdit}
                  onBlur={this.handleBlur}
                >
                  Find
@ -286,11 +375,8 @@ class Nav extends React.PureComponent {
              </li>
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.cmController.findNext();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'edit')}
+                  onClick={this.handleFindNext}
+                  onFocus={this.handleFocusForEdit}
                  onBlur={this.handleBlur}
                >
                  Find Next
@ -299,11 +385,8 @@ class Nav extends React.PureComponent {
              </li>
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.cmController.findPrev();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'edit')}
+                  onClick={this.handleFindPrevious}
+                  onFocus={this.handleFocusForEdit}
                  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={() => {
-                    this.props.newFile();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
+                  onClick={this.handleAddFile}
+                  onFocus={this.handleFocusForSketch}
                  onBlur={this.handleBlur}
                >
                  Add File
@ -341,11 +421,8 @@ class Nav extends React.PureComponent {
              </li>
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.newFolder();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
+                  onClick={this.handleAddFolder}
+                  onFocus={this.handleFocusForSketch}
                  onBlur={this.handleBlur}
                >
                  Add Folder
@ -353,11 +430,8 @@ class Nav extends React.PureComponent {
              </li>
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.startSketch();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
+                  onClick={this.handleRun}
+                  onFocus={this.handleFocusForSketch}
                  onBlur={this.handleBlur}
                >
                  Run
@ -366,11 +440,8 @@ class Nav extends React.PureComponent {
              </li>
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.stopSketch();
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
+                  onClick={this.handleStop}
+                  onFocus={this.handleFocusForSketch}
                  onBlur={this.handleBlur}
                >
                  Stop
@ -379,11 +450,8 @@ class Nav extends React.PureComponent {
              </li>
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.setAllAccessibleOutput(true);
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
+                  onClick={this.handleStartAccessible}
+                  onFocus={this.handleFocusForSketch}
                  onBlur={this.handleBlur}
                >
                  Start Accessible
@ -392,11 +460,8 @@ class Nav extends React.PureComponent {
              </li>
              <li className="nav__dropdown-item">
                <button
-                  onClick={() => {
-                    this.props.setAllAccessibleOutput(false);
-                    this.setDropdown('none');
-                  }}
-                  onFocus={this.handleFocus.bind(this, 'sketch')}
+                  onClick={this.handleStopAccessible}
+                  onFocus={this.handleFocusForSketch}
                  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={() => {
-                    this.props.showKeyboardShortcutModal();
-                    this.setDropdown('none');
-                  }}
+                  onClick={this.handleKeyboardShortcuts}
                >
                  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={() => {
-                      this.props.logoutUser();
-                      this.setDropdown('none');
-                    }}
-                    onFocus={this.handleFocus.bind(this, 'account')}
+                    onClick={this.handleLogout}
+                    onFocus={this.handleFocusForAccount}
                    onBlur={this.handleBlur}
                  >
                    Log out