Trial carbon ads in demo site

Author: nomcopter

demo/ExampleApp.tsx

@@ -12,6 +12,7 @@ import {
   getOtherDirection,
   getPathToCorner,
   Mosaic,
+  MosaicBranch,
   MosaicDirection,
   MosaicNode,
   MosaicParent,
@@ -25,6 +26,7 @@ import { CloseAdditionalControlsButton } from './CloseAdditionalControlsButton';
 import '@blueprintjs/core/lib/css/blueprint.css';
 import '@blueprintjs/icons/lib/css/blueprint-icons.css';
 import '../styles/index.less';
+import './carbon.less';
 import './example.less';
 
 // tslint:disable no-console
@@ -34,8 +36,6 @@ const gitHubLogo = require('./GitHub-Mark-Light-32px.png');
 // tslint:disable-next-line no-var-requires
 const { version } = require('../package.json');
 
-let windowCount = 3;
-
 export const THEMES = {
   ['Blueprint']: 'mosaic-blueprint-theme',
   ['Blueprint Dark']: classNames('mosaic-blueprint-theme', Classes.DARK),
@@ -69,27 +69,16 @@ export class ExampleApp extends React.PureComponent<{}, ExampleAppState> {
   };
 
   render() {
+    const totalWindowCount = getLeaves(this.state.currentNode).length;
     return (
       <React.StrictMode>
         <div className="react-mosaic-example-app">
           {this.renderNavBar()}
           <Mosaic<number>
             renderTile={(count, path) => (
-              <MosaicWindow<number>
-                additionalControls={count === 3 ? additionalControls : EMPTY_ARRAY}
-                title={`Window ${count}`}
-                createNode={this.createNode}
-                path={path}
-                onDragStart={() => console.log('MosaicWindow.onDragStart')}
-                onDragEnd={(type) => console.log('MosaicWindow.onDragEnd', type)}
-                renderToolbar={count === 2 ? () => <div className="toolbar-example">Custom Toolbar</div> : null}
-              >
-                <div className="example-window">
-                  <h1>{`Window ${count}`}</h1>
-                </div>
-              </MosaicWindow>
+              <ExampleWindow count={count} path={path} totalWindowCount={totalWindowCount} />
             )}
-            zeroStateView={<MosaicZeroState createNode={this.createNode} />}
+            zeroStateView={<MosaicZeroState createNode={() => totalWindowCount + 1} />}
             value={this.state.currentNode}
             onChange={this.onChange}
             onRelease={this.onRelease}
@@ -109,8 +98,6 @@ export class ExampleApp extends React.PureComponent<{}, ExampleAppState> {
     console.log('Mosaic.onRelease():', currentNode);
   };
 
-  private createNode = () => ++windowCount;
-
   private autoArrange = () => {
     const leaves = getLeaves(this.state.currentNode);
 
@@ -121,6 +108,7 @@ export class ExampleApp extends React.PureComponent<{}, ExampleAppState> {
 
   private addToTopRight = () => {
     let { currentNode } = this.state;
+    const totalWindowCount = getLeaves(currentNode).length;
     if (currentNode) {
       const path = getPathToCorner(currentNode, Corner.TOP_RIGHT);
       const parent = getNodeAtPath(currentNode, dropRight(path)) as MosaicParent<number>;
@@ -131,9 +119,9 @@ export class ExampleApp extends React.PureComponent<{}, ExampleAppState> {
       let second: MosaicNode<number>;
       if (direction === 'row') {
         first = destination;
-        second = ++windowCount;
+        second = totalWindowCount + 1;
       } else {
-        first = ++windowCount;
+        first = totalWindowCount + 1;
         second = destination;
       }
 
@@ -150,7 +138,7 @@ export class ExampleApp extends React.PureComponent<{}, ExampleAppState> {
         },
       ]);
     } else {
-      currentNode = ++windowCount;
+      currentNode = totalWindowCount + 1;
     }
 
     this.setState({ currentNode });
@@ -198,3 +186,44 @@ export class ExampleApp extends React.PureComponent<{}, ExampleAppState> {
     );
   }
 }
+
+interface ExampleWindowProps {
+  count: number;
+  path: MosaicBranch[];
+  totalWindowCount: number;
+}
+
+const ExampleWindow = ({ count, path, totalWindowCount }: ExampleWindowProps) => {
+  const adContainer = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    if (adContainer.current == null) {
+      return;
+    }
+
+    const script = document.createElement('script');
+
+    script.src = '//cdn.carbonads.com/carbon.js?serve=CEAIEK3E&placement=nomcoptergithubio';
+    script.async = true;
+    script.type = 'text/javascript';
+    script.id = '_carbonads_js';
+
+    adContainer.current.appendChild(script);
+  }, []);
+
+  return (
+    <MosaicWindow<number>
+      additionalControls={count === 3 ? additionalControls : EMPTY_ARRAY}
+      title={`Window ${count}`}
+      createNode={() => totalWindowCount + 1}
+      path={path}
+      onDragStart={() => console.log('MosaicWindow.onDragStart')}
+      onDragEnd={(type) => console.log('MosaicWindow.onDragEnd', type)}
+      renderToolbar={count === 2 ? () => <div className="toolbar-example">Custom Toolbar</div> : null}
+    >
+      <div className="example-window">
+        <h1>{`Window ${count}`}</h1>
+        {count === 3 && <div className="ad-container" ref={adContainer} />}
+      </div>
+    </MosaicWindow>
+  );
+};

demo/carbon.less

@@ -0,0 +1,60 @@
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
+    Helvetica, Arial, sans-serif;
+}
+#carbonads {
+  display: flex;
+  max-width: 330px;
+  background-color: hsl(0, 0%, 98%);
+  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
+  z-index: 100;
+}
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+#carbonads a:hover {
+  color: inherit;
+}
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+#carbonads .carbon-wrap {
+  display: flex;
+}
+#carbonads .carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+#carbonads .carbon-img img {
+  display: block;
+}
+#carbonads .carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+  text-align: left;
+}
+#carbonads .carbon-poweredby {
+  display: block;
+  padding: 6px 8px;
+  background: #f1f1f2;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  border-top-left-radius: 3px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}

demo/example.less

@@ -68,5 +68,16 @@ body {
 .example-window {
   height: 100%;
   padding: 20px;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .ad-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    flex: 1;
+    height: 0;
+  }
 }

docs/app.js

@@ -1 +1 @@
- <!doctype html> <html> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <title>React Mosaic</title> </head> <body> <div id=app></div> <script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="app.js"></script></body> </html> 
+<!doctype html> <html> <head> <meta charset=utf-8 /> <meta http-equiv=X-UA-Compatible content="IE=edge"/> <meta name=viewport content="width=device-width,initial-scale=1"/> <title>React Mosaic</title> </head> <body> <div id=app></div> <script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="app.js"></script></body> </html> 

docs/app.js.map

@@ -1,14 +1,12 @@
-<!--
--->
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>React Mosaic</title>
-</head>
-<body>
-<div id="app"></div>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Mosaic</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
 </html>