const bindAll = require('lodash.bindall'); const classNames = require('classnames'); const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage; const FormattedMessage = require('react-intl').FormattedMessage; // const injectIntl = require('react-intl').injectIntl; // const intlShape = require('react-intl').intlShape; const React = require('react'); const Button = require('../../components/forms/button.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); // const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx'); const TitleBanner = require('../../components/title-banner/title-banner.jsx'); // const NavigationBox = require('../../components/navigation/base/navigation.jsx'); const Comment = require('../../components/comment/comment.jsx'); const Page = require('../../components/page/www/page.jsx'); const render = require('../../lib/render.jsx'); const MediaQuery = require('react-responsive').default; const frameless = require('../../lib/frameless'); require('./annual-report.scss'); const SECTIONS = { message: 'message', mission: 'mission', reach: 'reach', milestones: 'milestones', initiatives: 'initiatives', financials: 'financials', supporters: 'supporters', leadership: 'leadership', donate: 'donate' }; const SECTION_NAMES = { message: , mission: , reach: , milestones: , initiatives: , financials: , supporters: , leadership: , donate: }; class AnnualReport extends React.Component { constructor () { super(); // Storage for each of the section refs when we need to refer // to them in the scroll handling code // These will be stored with a short lowercase key representing // the specific section (e.g. 'mission') this.sectionRefs = {}; this.subnavRef = null; this.state = { currentlyVisible: SECTIONS.message, dropdownVisible: false }; bindAll(this, [ 'scrollTo', 'setRef', 'setSubnavRef', 'handleSubnavItemClick', 'getDimensionsOfSection', 'handleScroll', 'handleDropDownClick' ]); } componentDidMount () { window.addEventListener('scroll', this.handleScroll); } componentWillUnMount () { window.removeEventListener('scroll', this.handleScroll); } // A generic handler for a subnav item that takes the name of the // section to scroll to (all lowercase) handleSubnavItemClick (sectionName) { // Return a button click handler that scrolls to the // correct section return () => { this.scrollTo(this.sectionRefs[sectionName]); }; } scrollTo (element) { if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } setRef (sectionName) { return ref => (this.sectionRefs[sectionName] = ref); } setSubnavRef (ref) { this.subnavRef = ref; } getDimensionsOfSection (sectionRef) { const {height} = sectionRef.getBoundingClientRect(); const offsetTop = sectionRef.offsetTop; const offsetBottom = offsetTop + height; return { height, offsetTop, offsetBottom }; } handleScroll () { const subnavHeight = this.getDimensionsOfSection(this.subnavRef).height; // The additional 50 is to account for the main site nav height const currentScrollPosition = window.scrollY + subnavHeight + 50; // Find which section is currently visible based on our scroll position for (const key in this.sectionRefs) { if (!this.sectionRefs.hasOwnProperty(key)) continue; const currentRef = this.sectionRefs[key]; const {offsetBottom, offsetTop} = this.getDimensionsOfSection(currentRef); if (currentScrollPosition > offsetTop && currentScrollPosition < offsetBottom) { if (this.state.currentlyVisible !== key) { this.setState({currentlyVisible: key}); return; } } } } handleDropDownClick () { this.setState({dropdownVisible: !this.state.dropdownVisible}); } render () { const subnav = ( {SECTION_NAMES.message} ); return (
{/* Top Bar */}
{SECTION_NAMES[this.state.currentlyVisible]}
{this.state.dropdownVisible ? /* Bottom Bar */

{subnav}
: null }
{/* Bottom Bar */} {subnav}

2003 {/* TODO should this be localized? */}

2004 {/* TODO should this be localized? */}

2007 {/* TODO should this be localized? */}


$3,898,078 (82.7%)

$700,000 (14.8%)

$114,982 (2.4%)

$4,713,060


$1,135,767 (48.8%)

$224,104 (9.6%)

$962,958 (41.4%)

$2,322,829

David Siegel

Co-Founder and
Co-Chairman
Two Sigma
{/* eslint-disable-next-line */}

Founding Partners — $10,00,000+

We are especially grateful to our Founding Partners who supported us from the early days of Scratch, each providing at least $10,000,000 of cumulative support, in various forms.

  • National Science Foundation
  • Massachusetts Institute of Technology
  • Siegel Family Endowment
  • LEGO Foundation
Innovation Circle — $5,00,000+

  • Google
Creativity Circle — $1,00,000++

  • Little Bluebridge Foundation
  • Smilegate Foundation
  • TAL Education
  • Turner Broadcasting System / Cartoon Network (?)
Imagination Circle — $200,000+

  • BrainPOP
  • Cindy and Evan Goldberg
  • Kahn-Rowe Family Fund
  • LEGO Education
  • Mark Dalton
  • Morgan Stanley
  • Paul T. Jones
  • Two Sigma
Inspiration Circle — $50,000+

  • BrainPOP
  • Cindy and Evan Goldberg
  • Kahn-Rowe Family Fund
  • LEGO Education
  • Mark Dalton
  • Morgan Stanley
  • Paul T. Jones
  • Two Sigma
Collaboration Circle — $20,000+

  • BrainPOP
  • Cindy and Evan Goldberg
  • Kahn-Rowe Family Fund
  • LEGO Education
  • Mark Dalton
  • Morgan Stanley
  • Paul T. Jones
  • Two Sigma
Tinkering Circle — $5,000+

  • BrainPOP
  • Cindy and Evan Goldberg
  • Kahn-Rowe Family Fund
  • LEGO Education
  • Mark Dalton
  • Morgan Stanley
  • Paul T. Jones
  • Two Sigma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae commodo orci, quis ultricies nisi

  • Amazon Web Services
  • Cindy and Evan Goldberg
  • Kahn-Rowe Family Fund
  • LEGO Education
  • Mark Dalton
  • Morgan Stanley
  • Paul T. Jones
  • Two Sigma
); } } render( , document.getElementById('app') );