Merge pull request #1038 from webpack/advertisement-feature

Advertisement

Author: bebraw

assets/ag-grid-logo.png

@@ -6,7 +6,7 @@ if (__DEV__) {
   RRouter = require('react-router');
 }
 
-const Link = ({ to, ...props }) => {
+export default ({ to, ...props }) => {
   if (startsWith(to, 'http') || startsWith(to, '//')) {
     return <a href={to} target="_blank" {...props} />;
   }
@@ -17,5 +17,3 @@ const Link = ({ to, ...props }) => {
 
   return <a href={to} {...props} />;
 };
-
-export default Link;

components/link/link.jsx

@@ -6,6 +6,7 @@ import Gitter from '../gitter/gitter';
 import Contributors from '../contributors/contributors';
 import './page-style';
 import '../sidebar/sidebar-style';
+import '../sponsors/sponsors-style';
 import '../gitter/gitter-style';
 import { trimEnd } from 'lodash';
 

components/page/page.jsx

@@ -8,7 +8,7 @@
   overflow: auto;
 
   @include break {
-    display:block;
+    display: block;
   }
 }
 

components/sidebar/sidebar-style.scss

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import SidebarItem from '../sidebar-item/sidebar-item';
+import Sponsors from '../sponsors/sponsors';
 
 export default class Sidebar extends Component {
   constructor(props) {
@@ -8,13 +9,14 @@ export default class Sidebar extends Component {
     this.state = {
       fixed: false,
       availableHeight: null,
-      maxWidth: null
+      maxWidth: null,
+      adDistance: null
     };
   }
 
   render() {
     let { sectionName, pages, currentPage } = this.props;
-    let { fixed, availableHeight, maxWidth } = this.state;
+    let { fixed, availableHeight, maxWidth, adDistance } = this.state;
     let isGuides = sectionName === 'guides';
 
     return (
@@ -28,6 +30,10 @@ export default class Sidebar extends Component {
           maxHeight: availableHeight
         }}>
 
+        <Sponsors
+          distanceFromTop={ adDistance }
+          height={ availableHeight } />
+
         <div className="sidebar__inner">
           <h3 className="sidebar-item__version">Version 2.2</h3>
 
@@ -56,6 +62,11 @@ export default class Sidebar extends Component {
   }
 
   componentDidMount() {
+    setTimeout(
+      this._recalculate.bind(this),
+      250
+    );
+    
     document.addEventListener(
       'scroll', 
       this._recalculate.bind(this)
@@ -78,7 +89,7 @@ export default class Sidebar extends Component {
     let { scrollHeight } = document.body;
     let { offsetHeight: sidebarHeight } = this._container;
     let { offsetWidth: parentWidth, offsetHeight: parentHeight } = this._container.parentNode;
-    let headerHeight = document.querySelector('header').offsetHeight;
+    let headerHeight = document.querySelector('header').offsetHeight + document.querySelector('.notification-bar').offsetHeight;
     let footerHeight = document.querySelector('footer').offsetHeight;
     let distToBottom = scrollHeight - scrollY - innerHeight;
 
@@ -89,7 +100,8 @@ export default class Sidebar extends Component {
     this.setState({ 
       fixed: scrollY >= headerHeight && sidebarHeight < parentHeight,
       availableHeight: innerHeight - headerSpace - footerSpace,
-      maxWidth: parentWidth
+      maxWidth: parentWidth,
+      adDistance: scrollY < headerHeight ? headerHeight - scrollY : 0
     });
   }
 }

components/sidebar/sidebar.jsx

@@ -0,0 +1,21 @@
+@import 'functions';
+
+.sponsors {
+  position: fixed;
+  display: flex;
+  width: 250px;
+  margin-top: 1.5em;
+  margin-left: calc(-250px - 1.5em);
+  padding: 0 1.5em;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  align-content: flex-start;
+  border-right: 1px solid getColor(concrete);
+  overflow: hidden;
+  transition: background-color 250ms;
+
+  &:hover {
+    background-color: getColor(concrete);
+  }
+}

components/sponsors/sponsors-style.scss

@@ -0,0 +1,31 @@
+import React from 'react';
+import Link from '../link/link';
+
+// Imports for Ad Content
+import AGLogo from '../../assets/ag-grid-logo.png';
+import WebpackIcon from '../../assets/icon-square-small.svg';
+
+export default ({ distanceFromTop, height }) => {
+  return (
+    <Link 
+      className="sponsors"
+      to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship"
+      style={{
+        top: distanceFromTop,
+        height: `calc(${height}px - 3em)`
+      }}>
+
+      <img src={ AGLogo } />
+      <img src={ WebpackIcon } style={{ width: '100px' }} />
+      <div style={{ 
+        marginTop: '1em',
+        fontSize: '2em',
+        textAlign: 'center',
+        color: '#535353'
+      }}>
+        ag-grid is proud to partner with webpack
+      </div>
+
+    </Link>
+  );
+};