couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From robertkowal...@apache.org
Subject fauxton commit: updated refs/heads/master to 7fa70fd
Date Mon, 01 Feb 2016 04:38:11 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master 62f149add -> 7fa70fd60


react migration: move menudropdown to react

PR: #624
PR-URL: https://github.com/apache/couchdb-fauxton/pull/624
Reviewed-By: Benjamin Keen <ben.keen@gmail.com>


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/7fa70fd6
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/7fa70fd6
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/7fa70fd6

Branch: refs/heads/master
Commit: 7fa70fd6065a29ae74d848422626a669bf7bb7a6
Parents: 62f149a
Author: Robert Kowalski <robertkowalski@apache.org>
Authored: Thu Jan 21 17:57:27 2016 +0100
Committer: Robert Kowalski <robertkowalski@apache.org>
Committed: Mon Feb 1 05:38:05 2016 +0100

----------------------------------------------------------------------
 .../components/react-components.react.jsx       | 70 +++++++++++----
 app/addons/documents/helpers.js                 | 64 ++++++++++++--
 app/addons/documents/resources.js               | 47 ----------
 app/addons/documents/shared-routes.js           |  2 +-
 app/addons/documents/sidebar/sidebar.react.jsx  | 44 +--------
 app/addons/fauxton/components.js                | 93 ++++++++------------
 app/addons/fauxton/templates/menu_dropdown.html | 36 --------
 7 files changed, 149 insertions(+), 207 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7fa70fd6/app/addons/components/react-components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/components/react-components.react.jsx b/app/addons/components/react-components.react.jsx
index ccb91e0..105bbae 100644
--- a/app/addons/components/react-components.react.jsx
+++ b/app/addons/components/react-components.react.jsx
@@ -1109,18 +1109,34 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace,
beautifyHelper
 
     createSectionLinks: function (links) {
       if (!links) { return null; }
+
       return links.map(function (link, key) {
-        return (
-          <li key={key}>
-            <a className={link.icon ? 'icon ' + link.icon : ''}
-              data-bypass={link.external ? 'true' : ''}
-              href={link.url}
-              target={link.external ? '_blank' : ''}>
-              {link.title}
-            </a>
-          </li>
-        );
-      });
+        return this.createEntry(link, key);
+      }.bind(this));
+    },
+
+    onClick: function (eventToTrigger, e) {
+      // XXX softmigration react
+
+      if (!eventToTrigger) {
+        return;
+      }
+
+      FauxtonAPI.Events.trigger(eventToTrigger);
+    },
+
+    createEntry: function (link, key) {
+      return (
+        <li key={key}>
+          <a className={link.icon ? 'icon ' + link.icon : ''}
+            data-bypass={link.external ? 'true' : ''}
+            href={link.url}
+            onClick={this.onClick.bind(this, link.trigger)}
+            target={link.external ? '_blank' : ''}>
+            {link.title}
+          </a>
+        </li>
+      );
     },
 
     createSectionTitle: function (title) {
@@ -1135,20 +1151,28 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace,
beautifyHelper
 
     createSection: function () {
       return this.props.links.map(function (linkSection, key) {
-        return (
-          <ul className="dropdown-menu arrow" key={key} role="menu" aria-labelledby="dLabel">
-            {this.createSectionTitle(linkSection.title)}
-            {this.createSectionLinks(linkSection.links)}
-          </ul>
-        );
+        if (linkSection.title && linkSection.links) {
+          return ([
+            this.createSectionTitle(linkSection.title),
+            this.createSectionLinks(linkSection.links)
+          ]);
+        }
+
+        return this.createEntry(linkSection, 'el' + key);
+
       }.bind(this));
     },
 
     render: function () {
       return (
         <div className="dropdown">
-          <a className={"dropdown-toggle icon " + this.props.icon} data-toggle="dropdown"
href="#" data-bypass="true"></a>
+          <a className={"dropdown-toggle icon " + this.props.icon}
+          data-toggle="dropdown"
+          href="#"
+          data-bypass="true"></a>
+          <ul className="dropdown-menu arrow" role="menu" aria-labelledby="dLabel">
             {this.createSection()}
+          </ul>
         </div>
       );
     }
@@ -1357,7 +1381,15 @@ function (app, FauxtonAPI, React, Stores, FauxtonComponents, ace, beautifyHelper
     MenuDropDown: MenuDropDown,
     Tray: Tray,
     TrayContents: TrayContents,
-    ApiBarController: ApiBarController
+    ApiBarController: ApiBarController,
+
+    renderMenuDropDown: function (el, opts) {
+      React.render(<MenuDropDown icon="fonticon-cog" links={opts.links} />, el);
+    },
+
+    removeMenuDropDown: function (el) {
+      React.unmountComponentAtNode(el);
+    },
   };
 
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7fa70fd6/app/addons/documents/helpers.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/helpers.js b/app/addons/documents/helpers.js
index 4a999f7..17d774c 100644
--- a/app/addons/documents/helpers.js
+++ b/app/addons/documents/helpers.js
@@ -11,12 +11,13 @@
 // the License.
 
 define([
+  'app',
   'api'
-], function (FauxtonAPI) {
+], function (app, FauxtonAPI) {
 
-  var Helpers = {};
 
-  Helpers.getPreviousPageForDoc = function (database, wasCloned) {
+
+  function getPreviousPageForDoc (database, wasCloned) {
     var previousPage = database.url('index'), // default to the current database's all_docs
page
         lastPages = FauxtonAPI.router.lastPages;
 
@@ -31,16 +32,61 @@ define([
     }
 
     return previousPage;
-  };
+  }
 
-  Helpers.getPreviousPage = function (database) {
+  function getPreviousPage (database) {
     return database.url('index');
-  };
+  }
 
   // sequence info is an array in couchdb2 with two indexes. On couch 1.x, it's just a string
/ number
-  Helpers.getSeqNum = function (val) {
+  function getSeqNum (val) {
     return _.isArray(val) ? val[1] : val;
-  };
+  }
+
+  function getNewButtonLinks (databaseName) {
+    var addLinks = FauxtonAPI.getExtensions('sidebar:links');
+    var newUrlPrefix = '#' + FauxtonAPI.urls('databaseBaseURL', 'app', databaseName);
+
+    var addNewLinks = _.reduce(addLinks, function (menuLinks, link) {
+      menuLinks.push({
+        title: link.title,
+        url: newUrlPrefix + '/' + link.url,
+        icon: 'fonticon-plus-circled'
+      });
+
+      return menuLinks;
+    }, [{
+      title: 'New Doc',
+      url: newUrlPrefix + '/new',
+      icon: 'fonticon-plus-circled'
+    }, {
+      title: 'New View',
+      url: newUrlPrefix + '/new_view',
+      icon: 'fonticon-plus-circled'
+    }, getMangoLink(databaseName)]);
 
-  return Helpers;
+    return [{
+      title: 'Add New',
+      links: addNewLinks
+    }];
+  }
+
+  function getMangoLink (databaseName) {
+    var newUrlPrefix = '#' + FauxtonAPI.urls('databaseBaseURL', 'app', databaseName);
+
+    return {
+      title: app.i18n.en_US['new-mango-index'],
+      url: newUrlPrefix + '/_index',
+      icon: 'fonticon-plus-circled'
+    };
+  }
+
+
+  return {
+    getPreviousPageForDoc: getPreviousPageForDoc,
+    getPreviousPage: getPreviousPage,
+    getSeqNum: getSeqNum,
+    getNewButtonLinks: getNewButtonLinks,
+
+  };
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7fa70fd6/app/addons/documents/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/resources.js b/app/addons/documents/resources.js
index bd6b3f6..246cb09 100644
--- a/app/addons/documents/resources.js
+++ b/app/addons/documents/resources.js
@@ -588,52 +588,5 @@ function (app, FauxtonAPI, Documents, PagingCollection) {
 
   });
 
-  Documents.setUpDropdown = function (database) {
-    var defaultMenuLinks = [{
-      links: [{
-        title: 'Replicate Database',
-        icon: 'fonticon-replicate',
-        url: FauxtonAPI.urls('replication', 'app', database.get('id'))
-      }, {
-        title: 'Delete',
-        icon: 'fonticon-trash',
-        trigger: 'database:delete'
-      }]
-    }];
-
-    defaultMenuLinks.push({
-      title: 'Add New',
-      links: Documents.getExtensionLinks(database)
-    });
-
-    return defaultMenuLinks;
-  };
-
-  Documents.getExtensionLinks = function (database) {
-    var newUrlPrefix = '#' + FauxtonAPI.urls('databaseBaseURL', 'app', database.get('id'));
-    var menuLinks = [{
-      title: 'New Doc',
-      url: newUrlPrefix + '/new',
-      icon: 'fonticon-plus-circled'
-    }, {
-      title: 'New View',
-      url: newUrlPrefix + '/new_view',
-      icon: 'fonticon-plus-circled'
-    }, {
-      title: app.i18n.en_US['new-mango-index'],
-      url: newUrlPrefix + '/_index',
-      icon: 'fonticon-plus-circled'
-    }];
-
-    return _.reduce(FauxtonAPI.getExtensions('sidebar:links'), function (menuLinks, link)
{
-      menuLinks.push({
-        title: link.title,
-        url: newUrlPrefix + "/" + link.url,
-        icon: 'fonticon-plus-circled'
-      });
-      return menuLinks;
-    }, menuLinks);
-  };
-
   return Documents;
 });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7fa70fd6/app/addons/documents/shared-routes.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/shared-routes.js b/app/addons/documents/shared-routes.js
index daab73b..2238cf2 100644
--- a/app/addons/documents/shared-routes.js
+++ b/app/addons/documents/shared-routes.js
@@ -90,8 +90,8 @@ define([
 
     addLeftHeader: function () {
       this.leftheader = this.setView('#breadcrumbs', new Components.LeftHeader({
+        databaseName: this.database.safeID(),
         crumbs: this.getCrumbs(this.database),
-        dropdownMenu: Documents.setUpDropdown(this.database),
         lookaheadTrayOptions: {
           databaseCollection: this.allDatabases,
           toggleEventName: 'lookaheadTray:toggle',

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7fa70fd6/app/addons/documents/sidebar/sidebar.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/documents/sidebar/sidebar.react.jsx b/app/addons/documents/sidebar/sidebar.react.jsx
index 7a7abd7..660fff5 100644
--- a/app/addons/documents/sidebar/sidebar.react.jsx
+++ b/app/addons/documents/sidebar/sidebar.react.jsx
@@ -18,55 +18,20 @@ define([
   'addons/documents/sidebar/actions',
   'addons/components/react-components.react',
   'addons/documents/views',
+  'addons/documents/helpers',
 
   'plugins/prettify'
 ],
 
-function (app, FauxtonAPI, React, Stores, Actions, Components, DocumentViews) {
+function (app, FauxtonAPI, React, Stores, Actions, Components, DocumentViews, DocumentHelper)
{
   var DeleteDBModal = DocumentViews.Views.DeleteDBModal;
   var store = Stores.sidebarStore;
   var LoadLines = Components.LoadLines;
 
   var MainSidebar = React.createClass({
 
-    getNewButtonLinks: function () {  //these are links for the sidebar '+' on All Docs and
All Design Docs
-      var addLinks = FauxtonAPI.getExtensions('sidebar:links');
-      var databaseName = this.props.databaseName;
-      var newUrlPrefix = '#' + FauxtonAPI.urls('databaseBaseURL', 'app', databaseName);
-
-      var addNewLinks = _.reduce(addLinks, function (menuLinks, link) {
-        menuLinks.push({
-          title: link.title,
-          url: newUrlPrefix + '/' + link.url,
-          icon: 'fonticon-plus-circled'
-        });
-
-        return menuLinks;
-      }, [{
-        title: 'New Doc',
-        url: newUrlPrefix + '/new',
-        icon: 'fonticon-plus-circled'
-      }, {
-        title: 'New View',
-        url: newUrlPrefix + '/new_view',
-        icon: 'fonticon-plus-circled'
-      }, this.getMangoLink()]);
-
-      return [{
-        title: 'Add New',
-        links: addNewLinks
-      }];
-    },
-
-    getMangoLink: function () {
-      var databaseName = this.props.databaseName;
-      var newUrlPrefix = '#' + FauxtonAPI.urls('databaseBaseURL', 'app', databaseName);
-
-      return {
-        title: app.i18n.en_US['new-mango-index'],
-        url: newUrlPrefix + '/_index',
-        icon: 'fonticon-plus-circled'
-      };
+    getNewButtonLinks: function () {  // these are links for the sidebar '+' on All Docs
and All Design Docs
+      return DocumentHelper.getNewButtonLinks(this.props.databaseName);
     },
 
     buildDocLinks: function () {
@@ -79,7 +44,6 @@ function (app, FauxtonAPI, React, Stores, Actions, Components, DocumentViews)
{
             <a id={link.url} href={base + link.url}>{link.title}</a>
           </li>
         );
-
       });
     },
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7fa70fd6/app/addons/fauxton/components.js
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/components.js b/app/addons/fauxton/components.js
index d7c85d2..7d646c7 100644
--- a/app/addons/fauxton/components.js
+++ b/app/addons/fauxton/components.js
@@ -27,24 +27,26 @@ define([
   "api",
   "ace_configuration",
   "spin",
+  'addons/components/react-components.react',
+  'addons/documents/helpers',
 
   "velocity.ui"
 ],
 
-function (app, FauxtonAPI, ace, spin) {
+function (app, FauxtonAPI, ace, spin, ReactComponents, Helpers) {
   var Components = FauxtonAPI.addon();
 
-  // setting up the left header with the backbutton used in Views and All docs
+  // XXX: move to /addons/documents - component is tightly coupled to documents/alldocs
   Components.LeftHeader = FauxtonAPI.View.extend({
     className: "header-left",
     template: "addons/fauxton/templates/header_left",
 
     initialize: function (options) {
-      this.dropdownEvents = options.dropdownEvents;
-      this.dropdownMenuLinks = options.dropdownMenu;
       this.lookaheadTrayOptions = options.lookaheadTrayOptions || null;
       this.crumbs = options.crumbs || [];
 
+      this.dbName = options.databaseName;
+
       // listen for breadcrumb clicks
       this.listenTo(FauxtonAPI.Events, 'breadcrumb:click', this.toggleTray);
       this.listenTo(FauxtonAPI.Events, 'lookaheadTray:close', this.unselectLastBreadcrumb);
@@ -86,14 +88,26 @@ function (app, FauxtonAPI, ace, spin) {
       }));
     },
 
+    getModififyDbLinks: function () {
+      return [{
+        title: 'Replicate Database',
+        icon: 'fonticon-replicate',
+        url: FauxtonAPI.urls('replication', 'app', this.dbName)
+      }, {
+        title: 'Delete',
+        icon: 'fonticon-trash',
+        trigger: 'database:delete'
+      }];
+    },
+
     setUpDropDownMenu: function () {
-      if (this.dropdownMenuLinks) {
-        this.dropdown = this.insertView("#header-dropdown-menu", new Components.MenuDropDown({
-          icon: 'fonticon-cog',
-          links: this.dropdownMenuLinks,
-          events: this.dropdownEvents
-        }));
-      }
+      var dropdownMenuLinks = Helpers.getNewButtonLinks(this.dbName);
+
+      dropdownMenuLinks = this.getModififyDbLinks().concat(dropdownMenuLinks);
+
+      this.dropdown = this.insertView("#header-dropdown-menu", new Components.MenuDropDownReact({
+        links: dropdownMenuLinks,
+      }));
     },
 
     setUpLookaheadTray: function () {
@@ -113,6 +127,19 @@ function (app, FauxtonAPI, ace, spin) {
     }
   });
 
+  Components.MenuDropDownReact = FauxtonAPI.View.extend({
+    initialize: function (options) {
+      this.options = options;
+    },
+
+    afterRender: function () {
+      ReactComponents.renderMenuDropDown(this.el, this.options);
+    },
+
+    cleanup: function () {
+      ReactComponents.removeMenuDropDown(this.el);
+    }
+  });
   Components.Breadcrumbs = FauxtonAPI.View.extend({
     className: "breadcrumb pull-left",
     tagName: "ul",
@@ -412,50 +439,6 @@ function (app, FauxtonAPI, ace, spin) {
     }
   });
 
-
-  //Menu Drop down component. It takes links in this format and renders the Dropdown:
-  // [{
-  //  title: 'Section Title (optional)',
-  //  links: [{
-  //    icon: 'icon-class (optional)',
-  //    url: 'clickalble-url',
-  //    title: 'name of link'
-  //  }]
-  // }]
-  Components.MenuDropDown = FauxtonAPI.View.extend({
-    template: "addons/fauxton/templates/menu_dropdown",
-    className: "dropdown",
-    initialize: function (options) {
-      this.links = options.links;
-      this.icon = options.icon || "fonticon-plus-circled";
-      this.setUpEvents();
-    },
-    setUpEvents: function () {
-      this.events = {};
-      _.each(this.links, function (parentLink) {
-        _.each(parentLink.links, function (link) {
-          if (!link.trigger) { return; }
-          this.events['click .' + link.icon] = "triggerEvent";
-        }, this);
-      }, this);
-    },
-    triggerEvent: function (e) {
-      e.preventDefault();
-      var eventTrigger = $(e.currentTarget).attr('triggerEvent');
-      FauxtonAPI.Events.trigger(eventTrigger);
-    },
-    update: function (links) {
-      this.links = links;
-      this.render();
-    },
-    serialize: function () {
-      return {
-        links: this.links,
-        icon: this.icon
-      };
-    }
-  });
-
   Components.LookaheadTray = FauxtonAPI.View.extend({
     className: "lookahead-tray tray",
     template: "addons/fauxton/templates/lookahead_tray",

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/7fa70fd6/app/addons/fauxton/templates/menu_dropdown.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/menu_dropdown.html b/app/addons/fauxton/templates/menu_dropdown.html
deleted file mode 100644
index 1fc3b16..0000000
--- a/app/addons/fauxton/templates/menu_dropdown.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-Licensed under the Apache License, Version 2.0 (the "License"); you may not
-use this file except in compliance with the License. You may obtain a copy of
-the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-License for the specific language governing permissions and limitations under
-the License.
--->
-
-<a class="dropdown-toggle icon <%=icon%>" data-toggle="dropdown" href="#" data-bypass="true"></a>
-<ul class="dropdown-menu arrow" role="menu" aria-labelledby="dLabel">
-  <% _.each(links, function (linkSection) { %>
-    <% if (linkSection.title) { %>
-    <li class="header-label"> <%- linkSection.title %> </li>
-    <% } %>
-    <% _.each(linkSection.links, function (link) { %>
-      <li>
-        <a
-          <% if (link.trigger) { %> data-bypass="true" triggerEvent="<%-link.trigger%>"
<%}%>
-          <% if (link.icon) { %>
-          class="icon <%- link.icon %>"
-          <% } %>
-          href="<%- link.url %>"
-          <% if (link.external) { %> data-bypass="true" target="_blank" <% } %>
>
-          <%- link.title %>
-        </a>
-      </li>
-    <%});%>
-  <%});%>
- </ul>
-


Mime
View raw message