From 4d01e22f26dd301d2335a2dbb5890cdf38ca90e0 Mon Sep 17 00:00:00 2001 From: Aldo Cortesi Date: Thu, 1 Jan 2015 20:49:32 +1300 Subject: components/utils.js -> common.js Too many utils modules makes things confusing. These are more "common components" or "common mixins" than utils anyway. --- web/src/js/components/common.js | 194 +++++++++++++++++++++++++++++++++++ web/src/js/components/eventlog.js | 4 +- web/src/js/components/flowdetail.js | 4 +- web/src/js/components/flowtable.js | 4 +- web/src/js/components/header.js | 8 +- web/src/js/components/mainview.js | 6 +- web/src/js/components/proxyapp.js | 6 +- web/src/js/components/utils.js | 196 ------------------------------------ 8 files changed, 210 insertions(+), 212 deletions(-) create mode 100644 web/src/js/components/common.js delete mode 100644 web/src/js/components/utils.js (limited to 'web/src') diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js new file mode 100644 index 00000000..96262acc --- /dev/null +++ b/web/src/js/components/common.js @@ -0,0 +1,194 @@ +var React = require("react"); +var ReactRouter = require("react-router"); +var _ = require("lodash"); + +// http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example) +var AutoScrollMixin = { + componentWillUpdate: function () { + var node = this.getDOMNode(); + this._shouldScrollBottom = ( + node.scrollTop !== 0 && + node.scrollTop + node.clientHeight === node.scrollHeight + ); + }, + componentDidUpdate: function () { + if (this._shouldScrollBottom) { + var node = this.getDOMNode(); + node.scrollTop = node.scrollHeight; + } + }, +}; + + +var StickyHeadMixin = { + adjustHead: function () { + // Abusing CSS transforms to set the element + // referenced as head into some kind of position:sticky. + var head = this.refs.head.getDOMNode(); + head.style.transform = "translate(0," + this.getDOMNode().scrollTop + "px)"; + } +}; + + +var Navigation = _.extend({}, ReactRouter.Navigation, { + setQuery: function (dict) { + var q = this.context.getCurrentQuery(); + for(var i in dict){ + if(dict.hasOwnProperty(i)){ + q[i] = dict[i] || undefined; //falsey values shall be removed. + } + } + q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/599 + this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q); + }, + replaceWith: function(routeNameOrPath, params, query) { + if(routeNameOrPath === undefined){ + routeNameOrPath = this.context.getCurrentPath(); + } + if(params === undefined){ + params = this.context.getCurrentParams(); + } + if(query === undefined){ + query = this.context.getCurrentQuery(); + } + ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query); + } +}); +_.extend(Navigation.contextTypes, ReactRouter.State.contextTypes); + +var State = _.extend({}, ReactRouter.State, { + getInitialState: function () { + this._query = this.context.getCurrentQuery(); + this._queryWatches = []; + return null; + }, + onQueryChange: function (key, callback) { + this._queryWatches.push({ + key: key, + callback: callback + }); + }, + componentWillReceiveProps: function (nextProps, nextState) { + var q = this.context.getCurrentQuery(); + for (var i = 0; i < this._queryWatches.length; i++) { + var watch = this._queryWatches[i]; + if (this._query[watch.key] !== q[watch.key]) { + watch.callback(this._query[watch.key], q[watch.key], watch.key); + } + } + this._query = q; + } +}); + +var Splitter = React.createClass({ + getDefaultProps: function () { + return { + axis: "x" + }; + }, + getInitialState: function () { + return { + applied: false, + startX: false, + startY: false + }; + }, + onMouseDown: function (e) { + this.setState({ + startX: e.pageX, + startY: e.pageY + }); + window.addEventListener("mousemove", this.onMouseMove); + window.addEventListener("mouseup", this.onMouseUp); + // Occasionally, only a dragEnd event is triggered, but no mouseUp. + window.addEventListener("dragend", this.onDragEnd); + }, + onDragEnd: function () { + this.getDOMNode().style.transform = ""; + window.removeEventListener("dragend", this.onDragEnd); + window.removeEventListener("mouseup", this.onMouseUp); + window.removeEventListener("mousemove", this.onMouseMove); + }, + onMouseUp: function (e) { + this.onDragEnd(); + + var node = this.getDOMNode(); + var prev = node.previousElementSibling; + var next = node.nextElementSibling; + + var dX = e.pageX - this.state.startX; + var dY = e.pageY - this.state.startY; + var flexBasis; + if (this.props.axis === "x") { + flexBasis = prev.offsetWidth + dX; + } else { + flexBasis = prev.offsetHeight + dY; + } + + prev.style.flex = "0 0 " + Math.max(0, flexBasis) + "px"; + next.style.flex = "1 1 auto"; + + this.setState({ + applied: true + }); + this.onResize(); + }, + onMouseMove: function (e) { + var dX = 0, dY = 0; + if (this.props.axis === "x") { + dX = e.pageX - this.state.startX; + } else { + dY = e.pageY - this.state.startY; + } + this.getDOMNode().style.transform = "translate(" + dX + "px," + dY + "px)"; + }, + onResize: function () { + // Trigger a global resize event. This notifies components that employ virtual scrolling + // that their viewport may have changed. + window.setTimeout(function () { + window.dispatchEvent(new CustomEvent("resize")); + }, 1); + }, + reset: function (willUnmount) { + if (!this.state.applied) { + return; + } + var node = this.getDOMNode(); + var prev = node.previousElementSibling; + var next = node.nextElementSibling; + + prev.style.flex = ""; + next.style.flex = ""; + + if (!willUnmount) { + this.setState({ + applied: false + }); + } + this.onResize(); + }, + componentWillUnmount: function () { + this.reset(true); + }, + render: function () { + var className = "splitter"; + if (this.props.axis === "x") { + className += " splitter-x"; + } else { + className += " splitter-y"; + } + return ( +
+
+
+ ); + } +}); + +module.exports = { + State: State, + Navigation: Navigation, + StickyHeadMixin: StickyHeadMixin, + AutoScrollMixin: AutoScrollMixin, + Splitter: Splitter +} \ No newline at end of file diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js index 9687096e..85c33527 100644 --- a/web/src/js/components/eventlog.js +++ b/web/src/js/components/eventlog.js @@ -1,5 +1,5 @@ var React = require("react"); -var utils = require("./utils.js"); +var common = require("./common.js"); var VirtualScrollMixin = require("./virtualscroll.js"); var views = require("../store/view.js"); @@ -29,7 +29,7 @@ var LogMessage = React.createClass({ }); var EventLogContents = React.createClass({ - mixins: [utils.AutoScrollMixin, VirtualScrollMixin], + mixins: [common.AutoScrollMixin, VirtualScrollMixin], getInitialState: function () { return { log: [] diff --git a/web/src/js/components/flowdetail.js b/web/src/js/components/flowdetail.js index ecb476e9..1d019ffb 100644 --- a/web/src/js/components/flowdetail.js +++ b/web/src/js/components/flowdetail.js @@ -1,7 +1,7 @@ var React = require("react"); var _ = require("lodash"); -var utils = require("./utils.js"); +var common = require("./common.js"); var actions = require("../actions.js"); var flowutils = require("../flow/utils.js"); var toputils = require("../utils.js"); @@ -337,7 +337,7 @@ var allTabs = { }; var FlowDetail = React.createClass({ - mixins: [utils.StickyHeadMixin, utils.Navigation, utils.State], + mixins: [common.StickyHeadMixin, common.Navigation, common.State], getTabs: function (flow) { var tabs = []; ["request", "response", "error"].forEach(function (e) { diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index c7ce147c..d4515257 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -1,5 +1,5 @@ var React = require("react"); -var utils = require("./utils.js"); +var common = require("./common.js"); var VirtualScrollMixin = require("./virtualscroll.js"); var flowtable_columns = require("./flowtable-columns.js"); @@ -57,7 +57,7 @@ var FlowTableHead = React.createClass({ var ROW_HEIGHT = 32; var FlowTable = React.createClass({ - mixins: [utils.StickyHeadMixin, utils.AutoScrollMixin, VirtualScrollMixin], + mixins: [common.StickyHeadMixin, common.AutoScrollMixin, VirtualScrollMixin], getInitialState: function () { return { columns: flowtable_columns diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index 6d49453c..796f567f 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -1,7 +1,7 @@ var React = require("react"); var $ = require("jquery"); -var utils = require("./utils.js"); +var common = require("./common.js"); var FilterDocs = React.createClass({ statics: { @@ -153,7 +153,7 @@ var FilterInput = React.createClass({ }); var MainMenu = React.createClass({ - mixins: [utils.Navigation, utils.State], + mixins: [common.Navigation, common.State], statics: { title: "Start", route: "flows" @@ -210,7 +210,7 @@ var ViewMenu = React.createClass({ title: "View", route: "flows" }, - mixins: [utils.Navigation, utils.State], + mixins: [common.Navigation, common.State], toggleEventLog: function () { var d = {}; @@ -339,7 +339,7 @@ var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */]; var Header = React.createClass({ - mixins: [utils.Navigation], + mixins: [common.Navigation], getInitialState: function () { return { active: header_entries[0] diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index b9836c64..a98007ec 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -1,6 +1,6 @@ var React = require("react"); -var utils = require("./utils.js"); +var common = require("./common.js"); var toputils = require("../utils.js"); var views = require("../store/view.js"); var Filt = require("../filt/filt.js"); @@ -9,7 +9,7 @@ var flowdetail = require("./flowdetail.js"); var MainView = React.createClass({ - mixins: [utils.Navigation, utils.State], + mixins: [common.Navigation, common.State], getInitialState: function () { this.onQueryChange(Query.FILTER, function () { this.state.view.recalculate(this.getViewFilt(), this.getViewSort()); @@ -210,7 +210,7 @@ var MainView = React.createClass({ var details; if (selected) { details = [ - , + , ]; } else { diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 6d235b50..c5d7491d 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -2,7 +2,7 @@ var React = require("react"); var ReactRouter = require("react-router"); var _ = require("lodash"); -var utils = require("./utils.js"); +var common = require("./common.js"); var MainView = require("./mainview.js"); var Footer = require("./footer.js"); var header = require("./header.js"); @@ -19,7 +19,7 @@ var Reports = React.createClass({ var ProxyAppMain = React.createClass({ - mixins: [utils.State], + mixins: [common.State], getInitialState: function () { var eventStore = new store.EventLogStore(); var flowStore = new store.FlowStore(); @@ -51,7 +51,7 @@ var ProxyAppMain = React.createClass({ var eventlog; if (this.getQuery()[Query.SHOW_EVENTLOG]) { eventlog = [ - , + , ]; } else { diff --git a/web/src/js/components/utils.js b/web/src/js/components/utils.js deleted file mode 100644 index 9afcfbc7..00000000 --- a/web/src/js/components/utils.js +++ /dev/null @@ -1,196 +0,0 @@ -var React = require("react"); -var ReactRouter = require("react-router"); -var _ = require("lodash"); - -//React utils. For other utilities, see ../utils.js - -// http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example) -var AutoScrollMixin = { - componentWillUpdate: function () { - var node = this.getDOMNode(); - this._shouldScrollBottom = ( - node.scrollTop !== 0 && - node.scrollTop + node.clientHeight === node.scrollHeight - ); - }, - componentDidUpdate: function () { - if (this._shouldScrollBottom) { - var node = this.getDOMNode(); - node.scrollTop = node.scrollHeight; - } - }, -}; - - -var StickyHeadMixin = { - adjustHead: function () { - // Abusing CSS transforms to set the element - // referenced as head into some kind of position:sticky. - var head = this.refs.head.getDOMNode(); - head.style.transform = "translate(0," + this.getDOMNode().scrollTop + "px)"; - } -}; - - -var Navigation = _.extend({}, ReactRouter.Navigation, { - setQuery: function (dict) { - var q = this.context.getCurrentQuery(); - for(var i in dict){ - if(dict.hasOwnProperty(i)){ - q[i] = dict[i] || undefined; //falsey values shall be removed. - } - } - q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/599 - this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q); - }, - replaceWith: function(routeNameOrPath, params, query) { - if(routeNameOrPath === undefined){ - routeNameOrPath = this.context.getCurrentPath(); - } - if(params === undefined){ - params = this.context.getCurrentParams(); - } - if(query === undefined){ - query = this.context.getCurrentQuery(); - } - ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query); - } -}); -_.extend(Navigation.contextTypes, ReactRouter.State.contextTypes); - -var State = _.extend({}, ReactRouter.State, { - getInitialState: function () { - this._query = this.context.getCurrentQuery(); - this._queryWatches = []; - return null; - }, - onQueryChange: function (key, callback) { - this._queryWatches.push({ - key: key, - callback: callback - }); - }, - componentWillReceiveProps: function (nextProps, nextState) { - var q = this.context.getCurrentQuery(); - for (var i = 0; i < this._queryWatches.length; i++) { - var watch = this._queryWatches[i]; - if (this._query[watch.key] !== q[watch.key]) { - watch.callback(this._query[watch.key], q[watch.key], watch.key); - } - } - this._query = q; - } -}); - -var Splitter = React.createClass({ - getDefaultProps: function () { - return { - axis: "x" - }; - }, - getInitialState: function () { - return { - applied: false, - startX: false, - startY: false - }; - }, - onMouseDown: function (e) { - this.setState({ - startX: e.pageX, - startY: e.pageY - }); - window.addEventListener("mousemove", this.onMouseMove); - window.addEventListener("mouseup", this.onMouseUp); - // Occasionally, only a dragEnd event is triggered, but no mouseUp. - window.addEventListener("dragend", this.onDragEnd); - }, - onDragEnd: function () { - this.getDOMNode().style.transform = ""; - window.removeEventListener("dragend", this.onDragEnd); - window.removeEventListener("mouseup", this.onMouseUp); - window.removeEventListener("mousemove", this.onMouseMove); - }, - onMouseUp: function (e) { - this.onDragEnd(); - - var node = this.getDOMNode(); - var prev = node.previousElementSibling; - var next = node.nextElementSibling; - - var dX = e.pageX - this.state.startX; - var dY = e.pageY - this.state.startY; - var flexBasis; - if (this.props.axis === "x") { - flexBasis = prev.offsetWidth + dX; - } else { - flexBasis = prev.offsetHeight + dY; - } - - prev.style.flex = "0 0 " + Math.max(0, flexBasis) + "px"; - next.style.flex = "1 1 auto"; - - this.setState({ - applied: true - }); - this.onResize(); - }, - onMouseMove: function (e) { - var dX = 0, dY = 0; - if (this.props.axis === "x") { - dX = e.pageX - this.state.startX; - } else { - dY = e.pageY - this.state.startY; - } - this.getDOMNode().style.transform = "translate(" + dX + "px," + dY + "px)"; - }, - onResize: function () { - // Trigger a global resize event. This notifies components that employ virtual scrolling - // that their viewport may have changed. - window.setTimeout(function () { - window.dispatchEvent(new CustomEvent("resize")); - }, 1); - }, - reset: function (willUnmount) { - if (!this.state.applied) { - return; - } - var node = this.getDOMNode(); - var prev = node.previousElementSibling; - var next = node.nextElementSibling; - - prev.style.flex = ""; - next.style.flex = ""; - - if (!willUnmount) { - this.setState({ - applied: false - }); - } - this.onResize(); - }, - componentWillUnmount: function () { - this.reset(true); - }, - render: function () { - var className = "splitter"; - if (this.props.axis === "x") { - className += " splitter-x"; - } else { - className += " splitter-y"; - } - return ( -
-
-
- ); - } -}); - -module.exports = { - State: State, - Navigation: Navigation, - StickyHeadMixin: StickyHeadMixin, - AutoScrollMixin: AutoScrollMixin, - Splitter: Splitter -} \ No newline at end of file -- cgit v1.2.3