Added new sample, react-menu-footer-classic-modern

samples/react-menu-footer-classic-modern/Classic/.gitignore

@@ -0,0 +1,16 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+build
+
+# OSX
+.DS_Store
+
+# Styles Generated Code
+*.scss.ts

samples/react-menu-footer-classic-modern/Classic/ReadMe.md

@@ -0,0 +1,6 @@
+
+Here is the script to run on a publishing site:
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
+<script src="/sites/pubsite/Style%20Library/Scripts/bundleClassic.js"></script>

samples/react-menu-footer-classic-modern/Classic/client/bootHeaderFooter.ts

@@ -0,0 +1,48 @@
+import HeaderFooterDataService from './common/services/HeaderFooterDataService';
+import IHeaderFooterData from './common/model/IHeaderFooterData';
+import ComponentManager from './common/components/ComponentManager';
+
+export class bootstrapper {
+
+  public onInit(): void {
+
+    // Create the div elements to hold the header and footer
+    const header = document.createElement("div");
+    const footer = document.createElement("div");
+
+    // Insert the header and footer on the page
+    const workspace = document.getElementById('s4-workspace');
+    if (workspace) {
+
+      workspace.parentElement.insertBefore(header,workspace);
+      workspace.appendChild(footer);
+
+      // For now this is hard-coded
+      // -- UPLOAD JSON WITH MENU CONTENTS AND PUT THE URL HERE --
+      const url = 'https://<tenant>.sharepoint.com/sites/scripts/Style%20Library/HeaderFooterData.json.txt';
+
+      // Get the header and footer data and render it
+      HeaderFooterDataService.get(url)
+        .then ((data: IHeaderFooterData) => {
+          ComponentManager.render(header, footer, data);
+        })
+        .catch ((error: string) => {
+          console.log(`Error in CustomHeaderFooterApplicationCustomizer: ${error}`);
+        });
+
+    } else {
+
+      // The elemement we want to attach to is missing
+      console.log('Error in CustomHeaderFooterApplicationCustomizer: Unable to find element to attach header and footer');
+
+    }
+  }
+}
+
+// In-line code starts here
+(<any>window).ExecuteOrDelayUntilBodyLoaded(() => {
+  if (window.location.search.indexOf('IsDlg=1') < 0) {
+    let b = new bootstrapper();
+    b.onInit();  
+  }
+})

samples/react-menu-footer-classic-modern/Classic/client/common/components/ComponentManager.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { IHeaderProps, Header } from './Header';
+import { IFooterProps, Footer } from './Footer';
+
+import IHeaderFooterData from '../model/IHeaderFooterData';
+
+import { languageManager } from '../../languageManager';
+
+export default class ComponentManager {
+
+    public static render(headerDomElement: HTMLElement, footerDomElement: HTMLElement,
+        data: IHeaderFooterData): void {
+
+        const strings = languageManager.GetStrings();
+
+        // If there is a header DOM element, make the react element and render it
+        if (headerDomElement) {
+            const reactElt: React.ReactElement<IHeaderProps> = React.createElement(Header, {
+                links: data.headerLinks
+            });
+            ReactDOM.render(reactElt, headerDomElement);
+        }
+
+        // If there is a footer DOM element, make the react element and render it
+        if (footerDomElement) {
+            const reactElt: React.ReactElement<IFooterProps> = React.createElement(Footer, {
+                message: strings.FooterMessage,
+                links: data.footerLinks
+            });
+            ReactDOM.render(reactElt, footerDomElement);
+        }
+    }
+}

samples/react-menu-footer-classic-modern/Classic/client/common/components/Footer.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import ILink from '../model/ILink';
+
+require ('./HeaderFooter.scss');
+
+export interface IFooterProps {
+    message: string;
+    links: ILink[];
+}
+
+export class Footer extends React.Component<IFooterProps, {}> {
+
+    constructor(props: IFooterProps) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div className="bottomNav">
+                {/* Render the message */}
+                <span>{this.props.message}</span>
+                {/* Render links */}
+                <ul className="test">
+                {this.props.links.map(l => (
+                    <li><a href={l.url}>{l.name}</a></li>
+                ))}
+                </ul>
+                {/* End links */}
+            </div>
+        );
+    }
+}

samples/react-menu-footer-classic-modern/Classic/client/common/components/Header.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import ILink from '../model/ILink';
+
+require ('./HeaderFooter.scss');
+
+export interface IHeaderProps {
+    links: ILink[];
+}
+
+export class Header extends React.Component<IHeaderProps, {}> {
+
+    constructor(props: IHeaderProps) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div className="topNav">
+            {/* Render hamburger menu */}
+            <label htmlFor="show-menu" className="show-menu">
+                <div className="show-menu"><div className="hamburger">
+                    <div></div><div></div><div></div>
+                </div></div>
+            </label>
+            <input type="checkbox" id="show-menu" role="button" />
+            {/* Render the main menu */}
+            <ul>
+            {this.props.links.map(l => (
+                <li>
+                    <a href={l.url}>{l.name}</a>
+                    {/* Render a child menu */}
+                    <ul className="hidden">
+                        {l.children ? l.children.map(m => (
+                            <li>
+                                <a href={m.url}>{m.name}</a>
+                            </li>
+                        )) : null}
+                    </ul>
+                    {/* End child menu */}
+                </li>
+            ))}
+            </ul>
+            {/* End main menu */}
+            </div>
+        );
+    }
+}