+
+ );
+};
+
+export default CC;
diff --git a/docs/components/container/container-style.scss b/docs/components/container/container-style.scss
new file mode 100644
index 000000000..474eeebf1
--- /dev/null
+++ b/docs/components/container/container-style.scss
@@ -0,0 +1,8 @@
+@import 'http://github.com/vars';
+@import 'http://github.com/mixins';
+
+.container {
+ width: 100%;
+ max-width: map-get($screens, large);
+ margin: 0 auto;
+}
diff --git a/docs/components/container/container.jsx b/docs/components/container/container.jsx
new file mode 100644
index 000000000..9f00bd0a8
--- /dev/null
+++ b/docs/components/container/container.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default (props = {}) => {
+ let { className = '' } = props;
+
+ return (
+
+ { props.children }
+
+ );
+};
diff --git a/docs/components/contributors/contributors-style.scss b/docs/components/contributors/contributors-style.scss
new file mode 100644
index 000000000..b8a441e02
--- /dev/null
+++ b/docs/components/contributors/contributors-style.scss
@@ -0,0 +1,37 @@
+@import 'http://github.com/functions';
+
+.contributors__list {
+ padding: 6px;
+}
+
+.contributor {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 1em;
+ font-size: 14px;
+
+ img {
+ height: 45px;
+ width: 45px;
+ border-radius: 50%;
+ box-shadow: 0 0 2px rgba(0,0,0,0.3);
+ }
+
+ .contributor__name {
+ color: getColor(fiord);
+ margin-top: -6px;
+ box-shadow: 0 0 2px rgba(0,0,0,0.3);
+ line-height: 1.4;
+ transition: color 0.1s;
+ padding: 0 6px;
+ border-radius: 2px;
+ background: transparentize(getColor(white), 0.05);
+ }
+
+ &:hover {
+ .contributor__name {
+ color: lighten(getColor(denim), 5%);
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/components/contributors/contributors.jsx b/docs/components/contributors/contributors.jsx
new file mode 100644
index 000000000..e114aac18
--- /dev/null
+++ b/docs/components/contributors/contributors.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import './contributors-style';
+
+export default ({contributors}) => {
+ if (!contributors.length) {
+ return ;
+ }
+
+ return (
+
+
+ );
+};
diff --git a/docs/components/cube/cube-style.scss b/docs/components/cube/cube-style.scss
new file mode 100644
index 000000000..dd52b31a3
--- /dev/null
+++ b/docs/components/cube/cube-style.scss
@@ -0,0 +1,39 @@
+@import 'http://github.com/functions';
+
+.cube {
+ position:relative;
+ display:block;
+ transform-style:preserve-3d;
+ transform:rotateX(-33.5deg) rotateY(45deg);
+
+ &__inner,
+ &__outer {
+ display:inline-block;
+ transform-style:preserve-3d;
+ transition:transform 1000ms;
+ }
+
+ &__inner {
+ position:absolute;
+ top:-2px;
+ left:0;
+ }
+
+ &__face {
+ position:absolute;
+ width:100%;
+ height:100%;
+ border: 1px solid getColor(white);
+ }
+
+ .cube__outer .cube__face {
+ background:transparentize(getColor(malibu), 0.5);
+ transition: border-width 0.2s;
+ transition-delay: 0.2s;
+ }
+
+ .cube__inner .cube__face {
+ background:getColor(denim);
+ border: 2px solid getColor(white);
+ }
+}
diff --git a/docs/components/cube/cube.jsx b/docs/components/cube/cube.jsx
new file mode 100644
index 000000000..06f4f01a9
--- /dev/null
+++ b/docs/components/cube/cube.jsx
@@ -0,0 +1,231 @@
+import React, { PropTypes } from 'react';
+
+export default class Cube extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.listeners = {
+ spin: this._spin.bind(this),
+ reset: this._reset.bind(this)
+ };
+
+ this.state = {
+ x: 0,
+ y: 0,
+ z: 0,
+ iteration: 0,
+ };
+ }
+
+ render() {
+ let { x, y, z } = this.state;
+ let { theme, depth, className = '' } = this.props;
+
+ return (
+
+ {
+ contributors.map(contributor => (
+
+ 
+ {contributor}
+
+ ))
+ }
+
+
+ this.container = ref }
+ className={ `cube cube--${theme}` }
+ style={{
+ width: `${depth}px`,
+ paddingBottom: `${depth * 0.5}px`
+ }}>
+
+ { this._getFaces('outer') }
+
+
+ { this._getFaces('inner') }
+
+
+
+ );
+ }
+
+ componentDidMount() {
+ let { hover, continuous, repeatDelay } = this.props;
+
+ if (hover) {
+ this.container.addEventListener('mouseenter', this.listeners.spin);
+ this.container.addEventListener('mouseleave', this.listeners.reset);
+
+ } else if (continuous) {
+ let degrees = 0;
+ let axis = 'y';
+
+ this._interval = setInterval(() => {
+ let obj = {};
+ obj[axis] = degrees += 90;
+
+ this.setState({ ...obj, iteration: (this.state.iteration + 1) % 4 });
+ }, repeatDelay);
+ }
+ }
+
+ componentWillUnmount() {
+ let { hover, continuous } = this.props;
+
+ if (hover) {
+ this.container.removeEventListener('mouseenter', this.listeners.spin);
+ this.container.removeEventListener('mouseleave', this.listeners.reset);
+
+ } else if (continuous) {
+ clearInterval(this._interval);
+ }
+ }
+
+ /**
+ * Get all faces for a cube
+ *
+ * @param {'inner' | 'outer' } type
+ * @return {array} - An array of nodes
+ */
+ _getFaces(type) {
+ let { iteration } = this.state;
+
+ // Keep the thicker border on
+ // the outside on each iteration
+ const borderWidthMap = {
+ 0: {
+ left: [1, 1, 1, 6],
+ right: [6, 1, 1, 1],
+ top: [1, 1, 1, 1],
+ bottom: [6, 1, 1, 6],
+ },
+ 1: {
+ left: [1, 1, 1, 1],
+ right: [1, 1, 1, 1],
+ top: [1, 1, 1, 1],
+ bottom: [1, 1, 1, 1],
+ },
+ 2: {
+ left: [1, 1, 6, 6],
+ right: [6, 6, 1, 1],
+ top: [6, 1, 1, 6],
+ bottom: [1, 6, 6, 1],
+ },
+ 3: {
+ left: [6, 1, 1, 1],
+ right: [1, 6, 1, 1],
+ top: [1, 1, 1, 1],
+ bottom: [6, 6, 1, 1],
+ },
+ 4: {
+ left: [1, 1, 6, 1],
+ right: [1, 1, 1, 6],
+ top: [1, 1, 1, 1],
+ bottom: [1, 1, 6, 6],
+ },
+ 5: {
+ left: [1, 6, 1, 1],
+ right: [1, 1, 6, 1],
+ top: [1, 1, 1, 1],
+ bottom: [1, 6, 6, 1],
+ }
+ };
+
+ return [
+ 'rotateX(0deg)',
+ 'rotateX(-90deg)',
+ 'rotateX(90deg)',
+ 'rotateY(-90deg)',
+ 'rotateY(90deg)',
+ 'rotateY(180deg)'
+ ].map((rotation, i) => {
+ const borderStyles = type === 'outer' ? {
+ borderTopWidth: borderWidthMap[i].top[iteration],
+ borderRightWidth: borderWidthMap[i].right[iteration],
+ borderBottomWidth: borderWidthMap[i].bottom[iteration],
+ borderLeftWidth: borderWidthMap[i].left[iteration],
+ } : {};
+
+ return (
+
+ );
+ });
+ }
+
+ /**
+ * Get a random axis
+ *
+ * @return {string} - A random axis (i.e. x, y, or z)
+ */
+ _getRandomAxis() {
+ let axes = Object.keys(this.state);
+
+ return axes[ Math.floor(Math.random() * axes.length) ];
+ }
+
+ /**
+ * Spin the cubes in opposite directions semi-randomly
+ *
+ * @param {object} e - Native event
+ */
+ _spin(e) {
+ let obj = {};
+ let axis = this._getRandomAxis();
+ let sign = Math.random() < 0.5 ? -1 : 1;
+
+ obj[axis] = sign * 90;
+
+ this.setState(obj);
+ }
+
+ /**
+ * Rotate the cubes back to their original position
+ *
+ * @param {object} e - Native event
+ */
+ _reset(e) {
+ this.setState({
+ x: 0,
+ y: 0,
+ z: 0
+ });
+ }
+}
+
+Cube.propTypes = {
+ hover: PropTypes.bool,
+ theme: PropTypes.string,
+ depth: PropTypes.number,
+ repeatDelay: PropTypes.number
+};
+
+Cube.defaultProps = {
+ hover: false,
+ theme: 'dark',
+ depth: 30,
+ repeatDelay: 1000,
+};
diff --git a/docs/components/footer/footer-style.scss b/docs/components/footer/footer-style.scss
new file mode 100644
index 000000000..989db31c8
--- /dev/null
+++ b/docs/components/footer/footer-style.scss
@@ -0,0 +1,79 @@
+@import 'http://github.com/mixins';
+@import 'http://github.com/functions';
+
+.footer {
+ width: 100%;
+ flex: 0 0 auto;
+}
+
+.footer__inner {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-content: center;
+ padding: 0.4em 0;
+ border-top:1px solid getColor(concrete);
+
+ @include break {
+ flex-direction: initial;
+ }
+}
+
+.footer__left,
+.footer__right {
+ flex: 0 0 auto;
+ display: flex;
+ margin: auto;
+ align-items: center;
+ padding: 0.25em 0;
+
+ @include break {
+ margin: 0;
+ padding: 0;
+ }
+}
+
+.footer__left {
+ @include break {
+ padding-left:1.5em;
+ }
+}
+
+.footer__right {
+ @include break {
+ padding-right:1.5em;
+ }
+}
+
+.footer__middle {
+ display: none;
+
+ @include break {
+ flex: 0 0 auto;
+ display: block;
+ }
+}
+
+.footer__icon {
+ display:inline-block;
+ height:35px;
+
+ img {
+ width:auto;
+ height:100%;
+ }
+}
+
+.footer__link {
+ font-size: getFontSize(-2);
+ text-transform: uppercase;
+ color: getColor(dusty-grey);
+
+ &:not(:last-child) {
+ margin-right: 1.5em;
+ }
+
+ &:hover {
+ color: getColor(mine-shaft);
+ }
+}
diff --git a/docs/components/footer/footer.jsx b/docs/components/footer/footer.jsx
new file mode 100644
index 000000000..2a922e6c0
--- /dev/null
+++ b/docs/components/footer/footer.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import CC from '../cc/cc';
+import Link from '../link/link';
+import Container from '../container/container';
+import Icon from '../../assets/logo-small.svg';
+import './footer-style';
+
+export default (props) => {
+ return (
+
+
+
+ Get Started
+ Organization
+ Contribute
+
+
+
+
+
+
+
+
+
+ Support
+ Changelog
+
+
+
+ );
+};
diff --git a/docs/components/link/link.jsx b/docs/components/link/link.jsx
new file mode 100644
index 000000000..71e2c3d33
--- /dev/null
+++ b/docs/components/link/link.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import startsWith from 'lodash/startsWith';
+
+let RRouter;
+if (__DEV__) {
+ RRouter = require('react-router');
+}
+
+const Link = ({ to, ...props }) => {
+ if (startsWith(to, 'http') || startsWith(to, '//')) {
+ return ;
+ }
+
+ if (__DEV__) {
+ return
+
+
+
+
+
+
+
+
+
+
+
+ {
+ section.children.map(child => {
+ let activeMod = this._isActive(child) ? 'navigation__child--active' : '';
+
+ return (
+
+ { child.title }
+
+ );
+ })
+ }
+
+
+ );
+ })
+ }
+ The Organization
+ +The list below provides a brief overview of all commonly used projects in the webpack ecosystem.
+ +
+ {
+ Items.map(org => (
+
+
+
+
+ ))
+ }
+ { org.repo }
+ + +{ org.description }
+ +Downloads and Stars
+Activity
+Issues and PRs
+Maintainers
+ { + (() => { + if (org.maintainer) { + return{ page.title }
+ + + Edit this Page + + + + + + + ++
Contributors
+
+ { title }
+
+
+ );
+ }
+
+ toggle(e) {
+ this.setState({
+ open: !this.state.open
+ });
+ }
+}
\ No newline at end of file
diff --git a/docs/components/sidebar-mobile/sidebar-mobile-style.scss b/docs/components/sidebar-mobile/sidebar-mobile-style.scss
new file mode 100644
index 000000000..6074a2e74
--- /dev/null
+++ b/docs/components/sidebar-mobile/sidebar-mobile-style.scss
@@ -0,0 +1,112 @@
+@import 'http://github.com/functions';
+@import 'http://github.com/mixins';
+
+.sidebar-mobile {
+ position: fixed;
+ width: 300px;
+ height: 100vh;
+ z-index: 100;
+ top: 0;
+ overflow-y: auto;
+ overflow-x: hidden;
+ -webkit-overflow-scrolling: touch;
+ transform: translate3D(-100%, 0, 0);
+ transform: translate3D(calc(-100% + 5px), 0, 0);
+ transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
+
+ @include break {
+ display: none;
+ }
+
+ &--visible {
+ transform: translate3D(0, 0, 0);
+ }
+
+ &.no-delay{
+ transition-duration: 0ms;
+ }
+}
+
+.sidebar-mobile__toggle {
+ position: absolute;
+ top: 45px;
+ bottom: 0;
+ width: 32px;
+ left: 285px;
+}
+
+.sidebar-mobile__content {
+ position: relative;
+ width: 285px;
+ height: 100vh;
+ overflow-x: hidden;
+ padding: 12px 0;
+ background: getColor(white);
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar-mobile__close {
+ position:absolute;
+ cursor:pointer;
+ right: 22px;
+ top: 22px;
+ font-size: 1.3em;
+ background: getColor(denim);
+ color: getColor(white);
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ transition: background 150ms;
+ -webkit-tap-highlight-color: transparent;
+
+ &:hover {
+ background: darken(getColor(denim), 20%);
+ }
+}
+
+.sidebar-mobile__section {
+ border-left: 2px solid transparent;
+ padding-bottom:0.5em;
+
+ &--active {
+ border-left: 2px solid getColor(malibu);
+
+ .sidebar-mobile__section-header {
+ color: lighten(getColor(fiord), 15%)
+ }
+ }
+}
+
+.sidebar-mobile__section-header {
+ text-transform: uppercase;
+ color: getColor(elephant);
+ padding: 0.75em 16px 0.25em;
+ font-weight: 600;
+ display: block;
+
+ .sidebar-mobile__content div:not(:first-of-type) & {
+ border-top: 1px solid getColor(alto);
+ }
+}
+
+.sidebar-mobile__page {
+ display: block;
+ padding: 0.5em 17px;
+ text-transform: capitalize;
+ color: getColor(dove-grey);
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+ &:active,
+ &--active {
+ color: getColor(mine-shaft);
+ font-weight: 600;
+ background: #F1F4F4;
+ }
+
+ &:hover {
+ color: inherit;
+ }
+}
diff --git a/docs/components/sidebar-mobile/sidebar-mobile.jsx b/docs/components/sidebar-mobile/sidebar-mobile.jsx
new file mode 100644
index 000000000..55b8b3f5d
--- /dev/null
+++ b/docs/components/sidebar-mobile/sidebar-mobile.jsx
@@ -0,0 +1,193 @@
+import React from 'react';
+import Link from '../link/link';
+
+let initialTouchPosition = {};
+let lastTouchPosition = {};
+
+export default class SidebarMobile extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this._handleBodyClick = this._handleBodyClick.bind(this);
+ }
+
+ render() {
+ return (
+
+ );
+ }
+
+ componentDidMount() {
+ if (typeof window !== 'undefined') {
+ window.addEventListener('click', this._handleBodyClick);
+ window.addEventListener('touchstart', this._handleBodyClick);
+ }
+ }
+
+ componentWillUnmount() {
+ if (typeof window !== 'undefined') {
+ window.removeEventListener('click', this._handleBodyClick);
+ window.removeEventListener('touchstart', this._handleBodyClick);
+ }
+ }
+
+ /**
+ * Get markup for each section
+ *
+ * @return {array} - Markup containing sections and links
+ */
+ _getSections() {
+ let pathname = '';
+
+ if (typeof window !== 'undefined') {
+ pathname = window.location.pathname;
+ }
+
+ return this.props.sections.map(section => {
+ let active = pathname === section.url || pathname.includes(`/${section.url}`),
+ absoluteUrl = `/${section.url}`;
+ return (
+ -
+ {
+ anchors.map((anchor, j) => (
+
- + { anchor.title} + + )) + } +
+
+
+ );
+ });
+ }
+
+ /**
+ * Retrieve markup for page links
+ *
+ * @param {array} pages - A list of page objects
+ * @return {array} - Markup containing the page links
+ */
+ _getPages(pages) {
+ let pathname = '';
+
+ if (typeof window !== 'undefined') {
+ pathname = window.location.pathname;
+ }
+
+ return pages.map(page => {
+ let url = `/${page.url}`,
+ active = pathname === url || pathname.includes(`${url}/`);
+
+ return (
+
+ { page.title }
+
+ );
+ });
+ }
+
+ /**
+ * Handle clicks on content
+ *
+ * @param {object} e - Native click event
+ */
+ _handleBodyClick(e) {
+ if (
+ !e.target.classList.contains('icon-menu') &&
+ !this.container.contains(e.target)
+ ) {
+ this._close();
+ }
+ }
+
+ /**
+ * Hide the sidebar
+ *
+ */
+ _close() {
+ this.container.classList.remove(
+ 'sidebar-mobile--visible'
+ );
+ }
+
+ _open() {
+ this.container.classList.add(
+ 'sidebar-mobile--visible'
+ );
+ }
+
+ _handleTouchStart(e){
+ initialTouchPosition.x = e.touches[0].pageX;
+ initialTouchPosition.y = e.touches[0].pageY;
+
+ // For instant transform along with the touch
+ this.container.classList.add('no-delay');
+ }
+
+ _handleTouchMove(e){
+ let xDiff = initialTouchPosition.x - e.touches[0].pageX;
+ let yDiff = initialTouchPosition.y - e.touches[0].pageY;
+ let factor = Math.abs(yDiff / xDiff);
+
+ // Factor makes sure horizontal and vertical scroll dont take place together
+ if (xDiff>0 && factor < 0.8) {
+ e.preventDefault();
+ this.container.style.transform = `translateX(-${xDiff}px)`;
+ lastTouchPosition.x = e.touches[0].pageX;
+ lastTouchPosition.y = e.touches[0].pageY;
+ }
+ }
+
+ _handleOpenerTouchMove(e){
+ let xDiff = e.touches[0].pageX - initialTouchPosition.x;
+ let yDiff = initialTouchPosition.y - e.touches[0].pageY;
+ let factor = Math.abs(yDiff / xDiff);
+
+ // Factor makes sure horizontal and vertical scroll dont take place together
+ if (xDiff > 0 && xDiff < 295 && factor < 0.8) {
+ e.preventDefault();
+ this.container.style.transform = `translateX(calc(-100% + ${xDiff}px))`;
+ lastTouchPosition.x = e.touches[0].pageX;
+ lastTouchPosition.y = e.touches[0].pageY;
+ }
+ }
+
+ _handleTouchEnd(e){
+ // Free up all the inline styling
+ this.container.classList.remove('no-delay');
+ this.container.style.transform = '';
+
+ if (initialTouchPosition.x - lastTouchPosition.x > 100) {
+ this._close();
+ } else if (lastTouchPosition.x - initialTouchPosition.x > 100) {
+ this._open();
+ }
+ }
+}
diff --git a/docs/components/sidebar/sidebar-style.scss b/docs/components/sidebar/sidebar-style.scss
new file mode 100644
index 000000000..6d3bd9b7a
--- /dev/null
+++ b/docs/components/sidebar/sidebar-style.scss
@@ -0,0 +1,19 @@
+@import 'http://github.com/vars';
+@import 'http://github.com/mixins';
+
+.sidebar {
+ position: relative;
+ display: none;
+ flex: 1;
+ min-height: 100%;
+
+ @include break {
+ display:block;
+ }
+}
+
+.sidebar__inner {
+ padding: 1.5em;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
diff --git a/docs/components/sidebar/sidebar.jsx b/docs/components/sidebar/sidebar.jsx
new file mode 100644
index 000000000..d91145f4f
--- /dev/null
+++ b/docs/components/sidebar/sidebar.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import SidebarItem from '../sidebar-item/sidebar-item';
+
+export default props => {
+ let { sectionName, pages, currentPage } = props;
+
+ return (
+
+ );
+};
diff --git a/docs/components/sidecar/sidecar-style.scss b/docs/components/sidecar/sidecar-style.scss
new file mode 100644
index 000000000..2a55bb7d6
--- /dev/null
+++ b/docs/components/sidecar/sidecar-style.scss
@@ -0,0 +1,103 @@
+@import 'http://github.com/functions';
+@import 'http://github.com/mixins';
+
+.sidecar {
+ display: none;
+
+ @media (min-width: 1085px) {
+ display: block;
+ position: fixed;
+ top: 100px;
+ right: 0;
+ z-index: 100;
+ }
+}
+
+.sidecar__link {
+ display: inline-block;
+ padding: 0.65em;
+ float: right;
+ clear: both;
+ color: getColor(concrete);
+ transition: all 250ms;
+
+ &:first-of-type {
+ border-top-left-radius: 3px;
+ }
+
+ &:last-of-type {
+ border-bottom-left-radius: 3px;
+ }
+
+ &:hover {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ color: getColor(white);
+ }
+}
+
+.sidecar__label {
+ display: block;
+ float: left;
+ width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ transition: width 250ms;
+}
+
+.sidecar__icon {
+ display: inline-block;
+ width: 18px;
+ vertical-align: middle;
+ font-size: 18px;
+}
+
+// TODO: Fix hardcoded widths using flex perhaps, can't animate to width auto
+.sidecar__link--github {
+ background: #444;
+
+ &:hover {
+ background: #333;
+
+ .sidecar__label {
+ width: 115px;
+ }
+ }
+}
+
+.sidecar__link--gitter {
+ background: desaturate(#ed1965, 15%);
+
+ &:hover {
+ background: #ed1965;
+
+ .sidecar__label {
+ width: 85px;
+ }
+ }
+}
+
+.sidecar__link--medium {
+ background: desaturate(#02b875, 15%);
+
+ &:hover {
+ background: #02b875;
+
+ .sidecar__label {
+ width: 115px;
+ }
+ }
+}
+
+.sidecar__link--so {
+ background: desaturate(#fe7a15, 15%);
+
+ &:hover {
+ background: #fe7a15;
+
+ .sidecar__label {
+ width: 125px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/components/sidecar/sidecar.jsx b/docs/components/sidecar/sidecar.jsx
new file mode 100644
index 000000000..244cba8a5
--- /dev/null
+++ b/docs/components/sidecar/sidecar.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import Link from '../link/link';
+import './sidecar-style';
+
+export default React.createClass({
+ getInitialState() {
+ return {open: false};
+ },
+
+ initChat() {
+ this.chat = new window.gitter.Chat({
+ room: 'angular-fullstack/generator-angular-fullstack',
+ activationElement: '.js-gitter-toggle-chat-button',
+ preload: true
+ });
+ // console.log(this.chat);
+
+ document.addEventListener('gitter-sidecar-instance-started', chat => {
+ // console.log('loaded', chat);
+ this.chat = chat;
+ });
+
+ document.querySelector('.gitter-chat-embed').addEventListener('gitter-chat-toggle', e => {
+ this.state.open = e.detail.state;
+ // console.log(e.detail.state ? 'Chat Opened' : 'Chat Closed');
+ });
+ },
+
+ componentDidMount() {
+ // console.log('did mount');
+ if(window.gitter && typeof window.gitter.Chat === 'function') {
+ // console.log('already loaded');
+
+ this.initChat();
+ } else {
+ // console.log('waiting');
+
+ document.addEventListener('gitter-sidecar-ready', () => {
+ // console.log('ready');
+
+ this.initChat();
+ });
+ }
+ },
+
+ openChat() {
+ this.state.open = true;
+ this.chat.toggleChat(true);
+ },
+
+ render() {
+ return (
+
+ );
+ }
+});
diff --git a/docs/components/site/site-style.scss b/docs/components/site/site-style.scss
new file mode 100644
index 000000000..3eeff2c7a
--- /dev/null
+++ b/docs/components/site/site-style.scss
@@ -0,0 +1,10 @@
+.site {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ overflow: hidden;
+
+ &.nav-displayed {
+ height: 100vh;
+ }
+}
\ No newline at end of file
diff --git a/docs/components/site/site.jsx b/docs/components/site/site.jsx
new file mode 100644
index 000000000..e6f24ef2f
--- /dev/null
+++ b/docs/components/site/site.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Interactive from 'antwar-interactive';
+import { GoogleAnalytics } from 'antwar-helpers';
+import Navigation from '../navigation/navigation';
+import Footer from '../footer/footer';
+import SidebarMobile from '../sidebar-mobile/sidebar-mobile';
+import './site-style';
+
+// Load base styling
+import '../../styles';
+import '../../styles/icon.font.js';
+import '../container/container-style.scss';
+import '../navigation/navigation-style';
+import '../navigation/search-style';
+import '../sidebar-mobile/sidebar-mobile-style';
+import '../sidebar-item/sidebar-item-style';
+import '../logo/logo-style';
+
+export default props => {
+ // Retrieve section data
+ let sections = props.children.props.section.all()
+ .map(({ title, url, pages }) => ({
+ title,
+ url,
+ pages: pages.map(({ title, url }) => ({
+ title: title || url, // XXX: Title shouldn't be coming in as undefined
+ url
+ }))
+ }));
+
+ // Rename the root section ("Webpack" => "Other") and push it to the end
+ let rootIndex = sections.findIndex(section => section.title === 'Webpack');
+ let rootSection = sections.splice(rootIndex, 1)[0];
+ rootSection.title = 'Other';
+ sections.push(rootSection);
+
+ return (
+ { section.title }
+ + + { this._getPages(section.pages) } +
+
+ );
+};
diff --git a/docs/components/splash-viz/splash-viz-style.scss b/docs/components/splash-viz/splash-viz-style.scss
new file mode 100644
index 000000000..35e4509cd
--- /dev/null
+++ b/docs/components/splash-viz/splash-viz-style.scss
@@ -0,0 +1,59 @@
+@import 'http://github.com/functions';
+@import 'http://github.com/mixins';
+
+.splash-viz {
+ position:relative;
+ display:flex;
+ height:calc(100vh - 55px);
+ min-height:320px;
+ max-height:720px;
+ background:getColor(elephant);
+ flex-direction: column;
+
+ &__heading {
+ color: getColor(white);
+ font-size: getFontSize(4);
+ text-align: center;
+ font-weight: 200;
+ margin-top: 24px;
+
+ @include break {
+ font-size: getFontSize(5);
+ }
+ }
+
+ &__modules {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 65vw;
+ min-width: 550px;
+ margin: auto;
+ display: none;
+
+ @include break {
+ display: block;
+ }
+
+ img {
+ // Padding is needed to center align
+ // webpack icon with the module image
+ padding-top: 3vw;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &__cube {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ z-index: 1;
+
+ }
+}
diff --git a/docs/components/splash-viz/splash-viz.jsx b/docs/components/splash-viz/splash-viz.jsx
new file mode 100644
index 000000000..114642e2d
--- /dev/null
+++ b/docs/components/splash-viz/splash-viz.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Cube from '../cube/cube';
+import TextRotator from '../text-rotater/text-rotater';
+import Modules from '../../assets/homepage-modules.svg';
+
+export default class SplashViz extends React.Component {
+
+ render() {
+ return (
+
+ bundle your
+
+ assets
+ scripts
+ images
+ styles
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/docs/components/support/support-style.scss b/docs/components/support/support-style.scss
new file mode 100644
index 000000000..1542f34dd
--- /dev/null
+++ b/docs/components/support/support-style.scss
@@ -0,0 +1,31 @@
+@import 'http://github.com/functions';
+
+.support {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ padding:10px 5px;
+
+ &__item {
+ margin:0 5px;
+ }
+
+ &__bottom {
+ flex:0 0 100%;
+ margin-top:10px;
+ }
+
+ &__button {
+ display:inline-block;
+ padding:0.4em 1em;
+ border:2px solid getColor(denim);
+ color:getColor(denim);
+ border-radius:1.25em;
+ transition:all 250ms;
+
+ &:hover {
+ background:getColor(denim);
+ color:getColor(white);
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/components/support/support.jsx b/docs/components/support/support.jsx
new file mode 100644
index 000000000..754478e01
--- /dev/null
+++ b/docs/components/support/support.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import './support-style';
+
+export default ({number, type}) => {
+ return (
+
+
+
+
+ { page.title }
+ +Support the Team
+ +Through contributions, donations, and sponsorship, you allow this project to thrive.
+ +Sponsors
+Backers
+
+ {[...Array(number)].map((x, i) =>
+
+
+
+ )}
+
+ );
+};
diff --git a/docs/components/text-rotater/text-rotater-style.scss b/docs/components/text-rotater/text-rotater-style.scss
new file mode 100644
index 000000000..108e09158
--- /dev/null
+++ b/docs/components/text-rotater/text-rotater-style.scss
@@ -0,0 +1,46 @@
+.text-rotater {
+ overflow: hidden;
+ position: relative;
+ display: inline-block;
+ padding: 0 0.3em;
+ vertical-align: bottom;
+
+ &::after,
+ &::before {
+ content: '';
+ position: absolute;
+ height: 3px;
+ left: 0;
+ }
+
+ &::after {
+ top: 0;
+ background-image: linear-gradient(#{getColor(elephant)}, transparent);
+ }
+
+ &::before {
+ bottom: 0;
+ z-index: 1;
+ background-image: linear-gradient(transparent, #{getColor(elephant)});
+ }
+
+ > * {
+ display: inline-block;
+ }
+}
+
+.text-rotater--slide-up {
+ transition: transform 1s;
+ transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+ transform: translateY(-100%);
+}
+
+.text-rotater__wrap {
+ display: inline-flex;
+ flex-direction: column;
+ text-align: left;
+
+ > * {
+ flex-shrink: 0;
+ }
+}
diff --git a/docs/components/text-rotater/text-rotater.jsx b/docs/components/text-rotater/text-rotater.jsx
new file mode 100644
index 000000000..5c1352dee
--- /dev/null
+++ b/docs/components/text-rotater/text-rotater.jsx
@@ -0,0 +1,91 @@
+import React, { PropTypes } from 'react';
+
+export default class TextRotater extends React.PureComponent {
+
+ constructor(props) {
+ super(props);
+ this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+ this.calculateContentHeight = this.calculateContentHeight.bind(this);
+
+ this.state = {
+ currentIndex: 0,
+ contentHeight: 0,
+ };
+ }
+
+ componentDidMount() {
+ const { delay } = this.props;
+
+ setTimeout(() => {
+ this.calculateContentHeight();
+ }, 50);
+
+ setTimeout(() => {
+ this.textRotatorWrap.classList.add('text-rotater--slide-up');
+ }, delay);
+
+ window.addEventListener('resize', this.calculateContentHeight);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.calculateContentHeight);
+ }
+
+ calculateContentHeight() {
+ this.setState({
+ contentHeight: this.content.clientHeight,
+ });
+ }
+
+ handleTransitionEnd() {
+ const { children, repeatDelay } = this.props;
+ this.textRotatorWrap.classList.remove('text-rotater--slide-up');
+ this.setState({
+ currentIndex: (this.state.currentIndex + 1) % React.Children.count(children),
+ }, () => {
+ setTimeout(() => {
+ this.textRotatorWrap.classList.add('text-rotater--slide-up');
+ }, repeatDelay);
+ });
+ }
+
+ render() {
+ const { children, maxWidth } = this.props;
+ const { currentIndex, contentHeight } = this.state;
+ const childrenCount = React.Children.count(children);
+
+ const currentChild = React.cloneElement(children[currentIndex], { ref: c => (this.content = c)});
+
+ const nextChild = React.cloneElement(children[(currentIndex + 1) % childrenCount]);
+
+ return (
+
+
+ );
+ }
+}
+
+TextRotater.defaultProps = {
+ delay: 0,
+ repeatDelay: 3000,
+};
+
+
+TextRotater.propTypes = {
+ children: PropTypes.arrayOf(PropTypes.node),
+ delay: PropTypes.number,
+ repeatDelay: PropTypes.number,
+ // Needed to prevent jump when
+ // rotating between texts of different widths
+ maxWidth: PropTypes.number,
+};
+
diff --git a/docs/components/vote/api.dev.js b/docs/components/vote/api.dev.js
new file mode 100644
index 000000000..1689b13da
--- /dev/null
+++ b/docs/components/vote/api.dev.js
@@ -0,0 +1,153 @@
+let usedCurrencies = {
+ influence: 100,
+ goldenInfluence: 100
+};
+let totalCurrencies = {
+ influence: 1000,
+ goldenInfluence: 300
+};
+let lists = {
+ todo: {
+ possibleVotes: [
+ {
+ name: "influence",
+ currency: "influence",
+ score: 1,
+ color: "blue"
+ },
+ {
+ name: "golden",
+ currency: "goldenInfluence",
+ score: 1,
+ color: "#bfa203"
+ }
+ ],
+ items: [
+ { id: "1234", list: "todo", title: "Finish up MVP documentation", description: "Take care for the remaining issues in the webpack.js.org repo which are relevant for the MVP.", influence: 15 },
+ { id: "2345", list: "todo", title: "Review whole documentation", description: "Read over **all** of the documentation to find errors.", golden: 20 },
+ ]
+ }
+};
+let allItems = {
+ "1234": lists.todo.items[0],
+ "2345": lists.todo.items[1],
+};
+
+function delay(time) {
+ return new Promise(function (fulfill) {
+ setTimeout(fulfill, time);
+ });
+}
+
+function clone(json) {
+ return JSON.parse(JSON.stringify(json));
+}
+
+export function isLoginActive() {
+ return /^\?login=/.test(window.location.search);
+}
+
+export function startLogin(callbackUrl) {
+ window.location.search = "?login=" + encodeURIComponent(callbackUrl);
+ return Promise.resolve();
+}
+
+export function continueLogin() {
+ if(/^\?login=/.test(window.location.search)) {
+ return delay(2000).then(() => {
+ setTimeout(() => window.location = decodeURIComponent(window.location.search.substr(7), 100));
+ return "developer";
+ });
+ }
+ return Promise.resolve();
+}
+
+export function getSelf(token) {
+ if(token !== "developer")
+ return Promise.reject(new Error("Not logged in as developer"));
+ return delay(500).then(() => ({
+ login: "dev",
+ name: "Developer",
+ avatar: "https://github.com/webpack.png",
+ currencies: [
+ { name: "influence", displayName: "Influence", description: "Some **description**", value: totalCurrencies.influence, used: usedCurrencies.influence, remaining: totalCurrencies.influence - usedCurrencies.influence },
+ { name: "goldenInfluence", displayName: "Golden Influence", description: "Some **description**", value: totalCurrencies.goldenInfluence, used: usedCurrencies.goldenInfluence, remaining: totalCurrencies.goldenInfluence - usedCurrencies.goldenInfluence }
+ ]
+ }));
+}
+
+export function getList(token, name) {
+ const loggedIn = token === "developer";
+ const listData = lists[name];
+ return delay(500).then(() => ({
+ name: name,
+ displayName: "DEV: " + name,
+ description: "Some **description**",
+ lockable: true,
+ deletable: true,
+ archivable: true,
+ isAdmin: true,
+ possibleVotes: listData.possibleVotes,
+ items: lists[name].items.map(item => {
+ const votes = listData.possibleVotes.map(pv => ({
+ name: pv.name,
+ votes: (item[pv.name] || 0) + Math.floor(Math.random() * 100)
+ }));
+ const score = listData.possibleVotes.map((pv, i) => {
+ return pv.score * votes[i].votes;
+ }).reduce((a, b) => a + b, 0);
+ return {
+ id: item.id,
+ list: item.list,
+ title: item.title,
+ description: item.description,
+ votes,
+ userVotes: loggedIn ? listData.possibleVotes.map(pv => ({
+ name: pv.name,
+ votes: item[pv.name] || 0
+ })) : undefined,
+ score
+ };
+ }).sort((a, b) => b.score - a.score)
+ }));
+}
+
+export function createItem(token, list, title, description) {
+ if(token !== "developer")
+ return Promise.reject(new Error("Not logged in as developer"));
+ let newItem = {
+ id: Math.random() + "",
+ list,
+ title,
+ description
+ };
+ allItems[newItem.id] = newItem;
+ lists[list].items.push(newItem);
+ return delay(500).then(() => ({
+ ...newItem,
+ votes: lists[list].possibleVotes.map(pv => ({
+ name: pv.name,
+ votes: 0
+ })),
+ userVotes: lists[list].possibleVotes.map(pv => ({
+ name: pv.name,
+ votes: 0
+ })),
+ score: 0
+ }));
+}
+
+export function vote(token, itemId, voteName, value) {
+ if(token !== "developer")
+ return Promise.reject(new Error("Not logged in as developer"));
+ var listId = allItems[itemId].list;
+ let listData = lists[listId];
+ let pv = listData.possibleVotes.filter(pv => pv.name === voteName)[0];
+ if(pv.currency) {
+ usedCurrencies[pv.currency] += value;
+ }
+ allItems[itemId][voteName] = (allItems[itemId][voteName] || 0) + value;
+ return delay(500).then(() => ({
+ ok: true
+ }));
+}
diff --git a/docs/components/vote/api.js b/docs/components/vote/api.js
new file mode 100644
index 000000000..27e6cc3f9
--- /dev/null
+++ b/docs/components/vote/api.js
@@ -0,0 +1,112 @@
+import {
+ isLoginActive as devIsLoginActive,
+ startLogin as devStartLogin,
+ continueLogin as devContinueLogin,
+ getSelf as devGetSelf,
+ getList as devGetList,
+ createItem as devCreateItem,
+ vote as devVote
+} from "./api.dev";
+
+const API_URL = "https://oswils44oj.execute-api.us-east-1.amazonaws.com/production/";
+const GITHUB_CLIENT_ID = "4d355e2799cb8926c665";
+const PRODUCTION_HOST = "webpack.js.org";
+
+// You can test the production mode with a host entry,
+// or by setting PRODUCTION_HOST to "localhost:3000" and stealing localStorage.voteAppToken from the production side.
+
+export function isLoginActive() {
+ if(window.location.host !== PRODUCTION_HOST)
+ return devIsLoginActive();
+ return /^\?code=([^&]*)&state=([^&]*)/.test(window.location.search);
+}
+
+export function startLogin(callbackUrl) {
+ if(window.location.host !== PRODUCTION_HOST)
+ return devStartLogin(callbackUrl);
+ let state = "" + Math.random();
+ window.localStorage.githubState = state;
+ window.location = "https://github.com/login/oauth/authorize?client_id=" + GITHUB_CLIENT_ID + "&scope=user:email&state=" + state + "&allow_signup=false&redirect_uri=" + encodeURIComponent(callbackUrl);
+ return Promise.resolve();
+}
+
+export function continueLogin() {
+ if(window.location.host !== PRODUCTION_HOST)
+ return devContinueLogin();
+ const match = /^\?code=([^&]*)&state=([^&]*)/.exec(window.location.search);
+ if(match) {
+ return login(match[1], match[2]).then(result => {
+ setTimeout(() => {
+ let href = window.location.href;
+ window.location = href.substr(0, href.length - window.location.search.length);
+ }, 100);
+ return result;
+ });
+ }
+ return Promise.resolve();
+}
+
+function login(code, state) {
+ if(state !== window.localStorage.githubState)
+ return Promise.reject(new Error("Request state doesn't match (Login was triggered by 3rd party)"));
+ delete window.localStorage.githubState;
+ return fetch(API_URL + "/login", {
+ headers: {
+ "Content-Type": "application/json"
+ },
+ method: "POST",
+ body: JSON.stringify({
+ code,
+ state
+ })
+ }).then((res) => res.json()).then(result => {
+ return result.token;
+ });
+}
+
+export function getSelf(token) {
+ if(window.location.host !== PRODUCTION_HOST)
+ return devGetSelf(token);
+ return fetch(API_URL + "/self?token=" + token, {
+ mode: "cors"
+ }).then((res) => res.json());
+}
+
+export function getList(token, name) {
+ if(window.location.host !== PRODUCTION_HOST)
+ return devGetList(token, name);
+ return fetch(API_URL + "/list/" + name + (token ? "?token=" + token : ""), {
+ mode: "cors"
+ }).then((res) => res.json());
+}
+
+export function createItem(token, list, title, description) {
+ if(window.location.host !== PRODUCTION_HOST)
+ return devCreateItem(token, list, title, description);
+ return fetch(API_URL + "/list/" + list + "?token=" + token, {
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({
+ title,
+ description
+ }),
+ method: "POST"
+ }).then((res) => res.json());
+}
+
+export function vote(token, itemId, voteName, value) {
+ if(window.location.host !== PRODUCTION_HOST)
+ return devVote(token, itemId, voteName, value);
+ return fetch(API_URL + "/vote/" + itemId + "/" + voteName + "?token=" + token, {
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({
+ count: value
+ }),
+ method: "POST"
+ }).then((res) => res.json()).then(result => {
+ return true;
+ });
+}
diff --git a/docs/components/vote/app-style.scss b/docs/components/vote/app-style.scss
new file mode 100644
index 000000000..5bf99c94d
--- /dev/null
+++ b/docs/components/vote/app-style.scss
@@ -0,0 +1,218 @@
+@import 'http://github.com/vars';
+@import 'http://github.com/mixins';
+@import 'http://github.com/functions';
+
+.vote-app {
+ margin: 1.5em;
+
+ &__top {
+ display: flex;
+ flex-direction: column;
+
+ @include break(medium) {
+ flex-direction: row;
+ }
+ }
+
+ &__influence {
+ flex: 0 0 75%;
+ }
+
+ &__influence-description {
+ display: flex;
+ flex-direction: column;
+
+ @include break(medium) {
+ flex-direction: row;
+ }
+ }
+
+ &__user-section {
+ padding: 0 0 30px;
+
+ @include break(medium) {
+ flex: 0 0 25%;
+ padding: 0 0 0 20px;
+ }
+
+ @include break(large) {
+ border-left: 2px solid getColor(elephant);
+ }
+ }
+
+ &__influence-section {
+ flex: 0 0 50%;
+ }
+
+ &__influence-disclaimer {
+ padding: 1em 0;
+ font-size: smaller;
+ color: red;
+
+ @include break(medium) {
+ text-align: center;
+ }
+ }
+
+ &__login-button {
+ margin: 20px 0;
+
+ button {
+ border: none;
+ outline: none;
+ color: getColor(white);
+ background: getColor(elephant);
+ padding: 5px 10px 5px 10px;
+ border-radius: 2px;
+ font-size: 13px;
+ cursor: pointer;
+
+ &:hover {
+ background: black;
+ }
+
+ &:active {
+ background: getColor(elephant)
+ }
+ }
+
+ img {
+ height: 25px;
+ vertical-align: middle;
+ padding-left: 5px;
+ }
+ }
+
+ &__userinfo {
+ outline: none;
+ border: none;
+ background: getColor(elephant);
+ color: white;
+ border-radius: 3px;
+ font-size: 13px;
+ display: inline-block;
+ padding: 3px 10px;
+
+ img {
+ height: 25px;
+ vertical-align: middle;
+ margin-right: 10px;
+ }
+ }
+
+ &__self-info {
+ margin-top: 10px;
+ }
+
+ &__button-area {
+ margin: 5px 0;
+ }
+
+ &__update-button {
+
+ }
+
+ h1 {
+ font-size: 16pt;
+ font-weight: bold;
+ margin-bottom: 10px;
+ }
+
+ &__item-title {
+ font-size: 16pt;
+ font-weight: bold;
+ margin-right: 10px;
+ }
+
+ &__currency-list {
+ display: block;
+
+ & > li {
+ display: inline-block;
+ padding: 5px;
+ }
+ }
+
+ &__item-card {
+ display: flex;
+ flex-direction: column;
+
+ @include break(medium){
+ flex-direction: row;
+ }
+ }
+
+ &__score-section {
+ display: flex;
+ border: 1px solid lightgray;
+ user-select: none;
+ flex-wrap: wrap;
+
+ @include break(medium){
+ flex: 0 0 40%;
+ margin-right: 30px;
+ padding: 0 0 0 20px;
+ }
+ }
+
+ &__item-score {
+ align-self: center;
+ font-size: 20pt;
+ flex: 0 0 100%;
+ text-align: center;
+
+ @include break(medium){
+ flex: 0 0 20%;
+ text-align: left;
+ }
+ }
+
+ &__item-button {
+ align-self: center;
+ flex: 0 0 50%;
+
+ @include break(medium){
+ flex: 0 0 40%;
+ }
+ }
+
+ &__items-list {
+ display: block;
+
+ & > li {
+ display: block;
+ padding: 5px 0;
+ }
+ }
+
+ &__currency-influence, &__vote-influence {
+ color: blue;
+ &:before {
+ content: "♦\2009";
+ }
+ }
+
+ &__currency-goldenInfluence, &__vote-golden {
+ color: #bfa203;
+ &:before {
+ content: "♦\2009";
+ }
+ }
+
+ &__currency-support, &__vote-support {
+ color: green;
+ &:before {
+ content: "$\2009";
+ }
+ }
+
+ &__vote-thumb {
+
+ }
+
+ &__admin {
+ input, textarea, button {
+ width: 100%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/components/vote/app.jsx b/docs/components/vote/app.jsx
new file mode 100644
index 000000000..49a760776
--- /dev/null
+++ b/docs/components/vote/app.jsx
@@ -0,0 +1,332 @@
+import React from 'react';
+import 'whatwg-fetch';
+import * as api from "./api";
+import VoteButton from './button/button';
+import Influence from './influence.jsx';
+import GithubMark from '../../assets/github-logo.svg';
+
+function updateByProperty(array, property, propertyValue, update) {
+ return array.map(item => {
+ if(item[property] === propertyValue) {
+ return update(item);
+ } else {
+ return item;
+ }
+ });
+}
+
+export default class VoteApp extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ selfInfo: undefined,
+ listInfo: undefined,
+ isFetchingSelf: false,
+ isVoting: 0
+ };
+ }
+
+ isBrowserSupported() {
+ return typeof localStorage === 'object';
+ }
+
+ componentDidMount() {
+ if(!this.isBrowserSupported())
+ return;
+
+ let { selfInfo, listInfo } = this.state;
+
+ if(api.isLoginActive()) {
+ this.setState({
+ isLoginActive: true
+ });
+ api.continueLogin().then(token => {
+ window.localStorage.voteAppToken = token;
+ });
+ } else {
+ if(!selfInfo) {
+ this.updateSelf();
+ }
+ if(!listInfo) {
+ this.updateList();
+ }
+ }
+ }
+
+ componentWillReceiveProps(props) {
+ if(!this.isBrowserSupported())
+ return;
+
+ this.updateList(props);
+ }
+
+ updateSelf() {
+ let { voteAppToken } = localStorage;
+ if(voteAppToken) {
+ this.setState({
+ isFetchingSelf: true
+ });
+ api.getSelf(voteAppToken).catch(e => {
+ this.setState({
+ selfInfo: null,
+ isFetchingSelf: false
+ });
+ }).then(result => {
+ this.setState({
+ selfInfo: result,
+ isFetchingSelf: false
+ });
+ });
+ }
+ }
+
+ updateList(props = this.props) {
+ let { name } = props;
+ let { voteAppToken } = localStorage;
+ this.setState({
+ isFetchingList: true
+ });
+ api.getList(voteAppToken, name).catch(e => {
+ this.setState({
+ listInfo: null,
+ isFetchingList: false
+ });
+ }).then(result => {
+ this.setState({
+ listInfo: result,
+ isFetchingList: false
+ });
+ });
+ }
+
+ localVote(itemId, voteName, diffValue, currencyName, score) {
+ let { selfInfo, listInfo } = this.state;
+ this.setState({
+ isVoting: this.state.isVoting + 1,
+ listInfo: listInfo && {
+ ...listInfo,
+ items: updateByProperty(listInfo.items, "id", itemId, item => ({
+ ...item,
+ votes: updateByProperty(item.votes, "name", voteName, vote => ({
+ ...vote,
+ votes: vote.votes + diffValue
+ })),
+ userVotes: updateByProperty(item.userVotes, "name", voteName, vote => ({
+ ...vote,
+ votes: vote.votes + diffValue
+ })),
+ score: item.score + score * diffValue
+ }))
+ },
+ selfInfo: selfInfo && {
+ ...selfInfo,
+ currencies: updateByProperty(selfInfo.currencies, "name", currencyName, currency => ({
+ ...currency,
+ used: currency.used + diffValue,
+ remaining: currency.remaining - diffValue
+ }))
+ }
+ });
+ }
+
+ vote(itemId, voteName, diffValue, currencyName, score) {
+ if(!diffValue) return;
+ this.localVote(itemId, voteName, diffValue, currencyName, score);
+ let { voteAppToken } = localStorage;
+ api.vote(voteAppToken, itemId, voteName, diffValue).catch(e => {
+ console.error(e);
+ // revert local vote
+ this.localVote(itemId, voteName, -diffValue, currencyName, score);
+ this.setState({
+ isVoting: this.state.isVoting - 1
+ });
+ }).then(() => {
+ this.setState({
+ isVoting: this.state.isVoting - 1
+ });
+ });
+ }
+
+ render() {
+ let { name } = this.props;
+
+ if(!this.isBrowserSupported())
+ return (this.textRotatorWrap = trw) }
+ onTransitionEnd={ this.handleTransitionEnd }
+ style={ { height: contentHeight, width: maxWidth } }
+ >
+ { currentChild }
+ { nextChild }
+
+ Your browser is not supported.
;
+
+ let { selfInfo, listInfo, isVoting, isFetchingList, isFetchingSelf, isCreating, isLoginActive } = this.state;
+
+ let { voteAppToken } = localStorage;
+
+ if(isLoginActive) {
+ return Logging in...
;
+ }
+
+ const inProgress = isFetchingList || isFetchingSelf || isCreating || isVoting;
+
+ let maxVoteInfo = listInfo && listInfo.possibleVotes.map(() => 0);
+
+ if(listInfo) listInfo.items.forEach(item => {
+ if(item.userVotes) {
+ maxVoteInfo.forEach((max, idx) => {
+ let votes = item.userVotes[idx].votes;
+ if(votes > max)
+ maxVoteInfo[idx] = votes;
+ });
+ }
+ });
+ listInfo && console.log(listInfo);
+ return (
+
+
+
+ { listInfo &&
+
+
+
+
+
+
+ DISCLAIMER: Since this feature is its Alpha stages, the formula for calculating influence may change.
+
+
+ {this.renderSelf(inProgress)}
+
+
+
{listInfo.displayName}
+{listInfo.description}
+ -
+ { listInfo.items.map(item =>
-
+ ++++{item.score}+ {listInfo.possibleVotes.map((voteSettings, idx) => { + let vote = item.votes[idx]; + let userVote = item.userVotes && item.userVotes[idx]; + let currencyInfo = selfInfo && voteSettings.currency && this.findByName(selfInfo.currencies, voteSettings.currency); + let maximum = voteSettings.maximum || 1000; // infinity + let minimum = voteSettings.minimum || 0; + let value = (userVote && userVote.votes) ? userVote.votes: 0; + if(currencyInfo && currencyInfo.remaining + value < maximum) maximum = currencyInfo.remaining + value; + return+; + })} +
{ + this.vote(item.id, voteSettings.name, diffValue, voteSettings.currency, voteSettings.score); + }} + /> + + {item.title} + {item.description} ++ )}
+ { listInfo.isAdmin && -
+ this.setState({newTitle: e.target.value})} />+