source: SRUAggregator/trunk/src/main/resources/assets/js/main.jsx @ 7228

import AboutPage from "./pages/aboutpage.jsx";
import AggregatorPage from "./pages/aggregatorpage.jsx";
import HelpPage from "./pages/helppage.jsx";
import StatisticsPage from "./pages/statisticspage.jsx";
import ErrorPane from "./components/errorpane.jsx";
import Footer from "./components/footer.jsx";
import EmbeddedFooter from "./components/embeddedfooter.jsx";
import PropTypes from "prop-types";
import createReactClass from "create-react-class";

(function() {
"use strict";

window.MyAggregator = window.MyAggregator || {};

var VERSION = window.MyAggregator.VERSION = "v.3.0.0-64";

var URLROOT = window.MyAggregator.URLROOT =
        window.location.pathname.substring(0, window.location.pathname.indexOf("/", 2)) ||
        //window.location.pathname ||
        //"/ws/fcs/2.0/aggregator";
        "/Aggregator";


var PT = PropTypes;

/**
The FCS Aggregator UI is based on reactjs.
- index.html: describes the general page structure, with a push-down footer;
  on that structure the Main and Footer components are plugged.
- main.jsx: composes the simple top components (Main, AggregatorPage, HelpPage, 
  AboutPage, StatisticsPage) in pages/
- pages/aggregatorpage.jsx: defines
        - the Corpora store of collections
        - the AggregatorPage component which deals with search and displays the search results
- components/corpusview.jsx: defines the CorpusView, rendered when the user views the available collections
- plus in components/: various general usage React components

The top-most component, Main, tracks of the window's location URL and, depending on the value,
  renders various components inside its frame:
        - AggregatorPage is the view corresponding to the normal search UI (search bar and all)
          This is the most complex component.
        - HelpPage renders the help page
        - AboutPage renders the about page
        - StatisticsPage renders the stats page
        - another URL, /Aggregator/embed, determines Main and AggregatorPage to render just the search bar.
          The embedded view is supposed to work like a YouTube embedded clip.
*/

var Main = createReactClass({
// fixme! - class Main extends React.Component {
        componentWillMount: function() {
                routeFromLocation.bind(this)();
        },

        getInitialState: function () {
                return {
                        navbarCollapse: false,
                        navbarPageFn: this.renderAggregator,
                        errorMessages: [],
                };
        },

        error: function(errObj) {
                var err = "";
                if (typeof errObj === 'string' || errObj instanceof String) {
                        err = errObj;
                } else if (typeof errObj === 'object' && errObj.statusText) {
                        console.log("ERROR: jqXHR = ", errObj);
                        err = errObj.statusText;
                } else {
                        return;
                }

                var that = this;
                var errs = this.state.errorMessages.slice();
                errs.push(err);
                this.setState({errorMessages: errs});

                setTimeout(function() {
                        var errs = that.state.errorMessages.slice();
                        errs.shift();
                        that.setState({errorMessages: errs});
                }, 10000);
        },

        ajax: function(ajaxObject) {
                var that = this;
                if (!ajaxObject.error) {
                        ajaxObject.error = function(jqXHR, textStatus, error) {
                                if (jqXHR.readyState === 0) {
                                        that.error("Network error, please check your internet connection");
                                } else if (jqXHR.responseText) {
                                        that.error(jqXHR.responseText + " ("+error+")");
                                } else  {
                                        that.error(error + " ("+textStatus+")");
                                }
                                console.log("ajax error, jqXHR: ", jqXHR);
                        };
                }
                // console.log("ajax", ajaxObject);
                jQuery.ajax(ajaxObject);
        },

        toggleCollapse: function() {
                this.setState({navbarCollapse: !this.state.navbarCollapse});
        },

        renderAggregator: function() {
                return <AggregatorPage ajax={this.ajax} error={this.error} embedded={false}/>;
        },

        renderHelp: function() {
                return <HelpPage />;
        },

        renderAbout: function() {
                return <AboutPage toStatistics={this.toStatistics} />;
        },

        renderStatistics: function() {
                return <StatisticsPage ajax={this.ajax} />;
        },

        renderEmbedded: function() {
                return <AggregatorPage ajax={this.ajax} error={this.error} embedded={true}/>;
        },

        getPageFns: function() {
                return {
                        '': this.renderAggregator,
                        'help': this.renderHelp,
                        'about': this.renderAbout,
                        'stats': this.renderStatistics,
                        'embed': this.renderEmbedded,
                };
        },

        gotoPage: function(doPushHistory, pageFnName) {
                var pageFn = this.getPageFns()[pageFnName];
                if (this.state.navbarPageFn !== pageFn) {
                        if (doPushHistory) {
                                window.history.pushState({page:pageFnName}, '', URLROOT+"/"+pageFnName);
                        }
                        this.setState({navbarPageFn: pageFn});
                        console.log("new page: " + document.location + ", name: " + pageFnName);
                }
        },

        toAggregator: function(doPushHistory) { this.gotoPage(doPushHistory, ''); },
        toHelp: function(doPushHistory) { this.gotoPage(doPushHistory, 'help'); },
        toAbout: function(doPushHistory) { this.gotoPage(doPushHistory, 'about'); },
        toStatistics: function(doPushHistory) { this.gotoPage(doPushHistory, 'stats'); },
        toEmbedded: function(doPushHistory) { this.gotoPage(doPushHistory, 'embed'); },

        renderLogin: function() {
                return false;
                // return  <li className="unauthenticated">
                //                      <a href="login" tabIndex="-1"><span className="glyphicon glyphicon-log-in"></span> LOGIN</a>
                //              </li>;
        },

        renderCollapsible: function() {
                var classname = "navbar-collapse collapse " + (this.state.navbarCollapse?"in":"");
                return (
                        <div className={classname}>
                                <ul className="nav navbar-nav">
                                        <li className={this.state.navbarPageFn === this.renderAggregator ? "active":""}>
                                                <a className="link" tabIndex="-1" onClick={this.toAggregator.bind(this, true)}>Aggregator</a>
                                        </li>
                                        <li className={this.state.navbarPageFn === this.renderHelp ? "active":""}>
                                                <a className="link" tabIndex="-1" onClick={this.toHelp.bind(this, true)}>Help</a>
                                        </li>
                                </ul>
                                <ul className="nav navbar-nav navbar-right">
                                        <li> <div id="clarinservices" style={{padding:4}}/> </li>
                                        {this.renderLogin()}
                                </ul>
                        </div>
                );
        },

        renderTop: function() {
                if (this.state.navbarPageFn === this.renderEmbedded) {
                        return false;
                }
                return  (
                        <div>
                                <div className="navbar navbar-default navbar-static-top" role="navigation">
                                        <div className="container">
                                                <div className="navbar-header">
                                                        <button type="button" className="navbar-toggle" onClick={this.toggleCollapse}>
                                                                <span className="sr-only">Toggle navigation</span>
                                                                <span className="icon-bar"></span>
                                                                <span className="icon-bar"></span>
                                                                <span className="icon-bar"></span>
                                                        </button>
                                                        <a className="navbar-brand" href={URLROOT + "/"} tabIndex="-1">
                                                                <img width="28px" height="28px" src="img/magglass1.png"/>
                                                                <header className="inline"> Federated Content Search </header>
                                                        </a>
                                                </div>
                                                {this.renderCollapsible()}
                                        </div>
                                </div>

                                <ErrorPane errorMessages={this.state.errorMessages} />

                        </div>
                );
        },

        render: function() {
                return  (
                        <div>
                                <div> { this.renderTop() } </div>

                                <div id="push">
                                        <div className="container">
                                                {this.state.navbarPageFn()}
                                        </div>
                                        <div className="top-gap" />
                                </div>
                        </div>
                );
        }
});

// StatisticsPage

// HelpPage

// AboutPage

// Footer

// EmbeddedFooter

function isEmbeddedView() {
        var path = window.location.pathname.split('/');
        return (path.length >= 3 && path[path.length - 1] === 'embed');
}

function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

var routeFromLocation = function() {
        console.log("routeFromLocation: " + document.location);
        if (!this) throw "routeFromLocation must be bound to main";
        var path = window.location.pathname.split('/');
        console.log("path: " + path);
        if (path.length >= 3) {
                var p = path[path.length - 1];
                if (p === 'help') {
                        this.toHelp(false);
                } else if (p === 'about') {
                        this.toAbout(false);
                } else if (p === 'stats') {
                        this.toStatistics(false);
                } else if (p === 'embed') {
                        this.toEmbedded(false);
                } else {
                        this.toAggregator(false);
                }
        } else {
                this.toAggregator(false);
        }
};

var main = ReactDOM.render(<Main />,  document.getElementById('body'));
if (!isEmbeddedView()) {
        ReactDOM.render(<Footer VERSION={VERSION} toAbout={main.toAbout}/>, document.getElementById('footer') );
} else {
        ReactDOM.render(<EmbeddedFooter URLROOT={URLROOT} />, document.getElementById('footer') );
        if (jQuery) { jQuery('body, #footer').addClass('embedded'); }
}

window.onpopstate = routeFromLocation.bind(main);

})();