You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ro...@apache.org on 2016/02/01 05:38:11 UTC
fauxton commit: updated refs/heads/master to 7fa70fd
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 <be...@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 <ro...@apache.org>
Authored: Thu Jan 21 17:57:27 2016 +0100
Committer: Robert Kowalski <ro...@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>
-