material-ui 0.7.3.1

data/vendor/assets/javascripts/material-ui/components/ripples/circle.jsx

@@ -0,0 +1,35 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+
+var RippleCircle = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    className: React.PropTypes.string,
+    started: React.PropTypes.bool,
+    ending: React.PropTypes.bool
+  },
+
+  render: function() {
+    var {
+      innerClassName,
+      started,
+      ending,
+      ...other
+    } = this.props;
+    var classes = this.getClasses('mui-ripple-circle', {
+      'mui-is-started': this.props.started,
+      'mui-is-ending': this.props.ending
+    });
+
+    return (
+      <div {...other} className={classes}>
+        <div className="mui-ripple-circle-inner" />
+      </div>
+    );
+  }
+
+});
+
+module.exports = RippleCircle;

data/vendor/assets/javascripts/material-ui/components/ripples/focus-ripple.jsx

@@ -0,0 +1,40 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+
+var FocusRipple = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    show: React.PropTypes.bool
+  },
+
+  componentDidMount: function() {
+    this._setRippleSize();
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-focus-ripple', {
+      'mui-is-shown': this.props.show
+    });
+
+    return (
+      <div className={classes}>
+        <div className="mui-focus-ripple-inner" />
+      </div>
+    );
+  },
+
+  _setRippleSize: function() {
+    var el = this.getDOMNode();
+    var height = el.offsetHeight;
+    var width = el.offsetWidth;
+    var size = Math.max(height, width);
+
+    el.style.height = size + 'px';
+    el.style.top = (size / 2 * -1) + (height / 2) + 'px';
+  }
+
+});
+
+module.exports = FocusRipple;

data/vendor/assets/javascripts/material-ui/components/ripples/touch-ripple.jsx

@@ -0,0 +1,174 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+var Dom = require('../utils/dom');
+var RippleCircle = require('./circle');
+
+var TouchRipple = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    centerRipple: React.PropTypes.bool,
+    className: React.PropTypes.string
+  },
+
+  getInitialState: function() {
+    return {
+      ripples: [{
+        key: 0,
+        started: false,
+        ending: false
+      }]
+    };
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-touch-ripple');
+
+    return (
+      <div
+        onMouseUp={this._handleMouseUp}
+        onMouseDown={this._handleMouseDown}
+        onMouseOut={this._handleMouseOut}
+        onTouchStart={this._handleTouchStart}
+        onTouchEnd={this._handleTouchEnd}>
+        <div className={classes}>
+          {this._getRippleElements()}
+        </div>
+        {this.props.children}
+      </div>
+    );
+  },
+
+  start: function(e) {
+    var ripples = this.state.ripples;
+    var nextKey = ripples[ripples.length-1].key + 1;
+    var style = !this.props.centerRipple ? this._getRippleStyle(e) : {};
+    var ripple;
+
+    //Start the next unstarted ripple
+    for (var i = 0; i < ripples.length; i++) {
+      ripple = ripples[i];
+      if (!ripple.started) {
+        ripple.started = true;
+        ripple.style = style;
+        break;
+      }
+    };
+
+    //Add an unstarted ripple at the end
+    ripples.push({
+      key: nextKey,
+      started: false,
+      ending: false
+    });
+
+    //Re-render
+    this.setState({
+      ripples: ripples
+    });
+  },
+
+  end: function() {
+    var ripples = this.state.ripples;
+    var ripple;
+    var endingRipple;
+
+    //End the the next un-ended ripple
+    for (var i = 0; i < ripples.length; i++) {
+      ripple = ripples[i];
+      if (ripple.started && !ripple.ending) {
+        ripple.ending = true;
+        endingRipple = ripple;
+        break;
+      }
+    };
+
+    //Only update if a ripple was found
+    if (endingRipple) {
+      //Re-render
+      this.setState({
+        ripples: ripples
+      });
+
+      //Wait 2 seconds and remove the ripple from DOM
+      setTimeout(function() {
+        ripples.shift();
+        if (this.isMounted()) {
+          this.setState({
+            ripples: ripples
+          });
+        }
+      }.bind(this), 2000);
+    }
+  },
+
+  _handleMouseDown: function(e) {
+    //only listen to left clicks
+    if (e.button === 0) this.start(e);
+  },
+
+  _handleMouseUp: function(e) {
+    this.end();
+  },
+
+  _handleMouseOut: function(e) {
+    this.end();
+  },
+
+  _handleTouchStart: function(e) {
+    this.start(e);
+  },
+
+  _handleTouchEnd: function(e) {
+    this.end();
+  },
+
+  _getRippleStyle: function(e) {
+    var style = {};
+    var el = this.getDOMNode();
+    var elHeight = el.offsetHeight;
+    var elWidth = el.offsetWidth;
+    var offset = Dom.offset(el);
+    var pageX = e.pageX == undefined ? e.nativeEvent.pageX : e.pageX;
+    var pageY = e.pageY == undefined ? e.nativeEvent.pageY : e.pageY;
+    var pointerX = pageX - offset.left;
+    var pointerY = pageY - offset.top;
+    var topLeftDiag = this._calcDiag(pointerX, pointerY);
+    var topRightDiag = this._calcDiag(elWidth - pointerX, pointerY);
+    var botRightDiag = this._calcDiag(elWidth - pointerX, elHeight - pointerY);
+    var botLeftDiag = this._calcDiag(pointerX, elHeight - pointerY);
+    var rippleRadius = Math.max(
+      topLeftDiag, topRightDiag, botRightDiag, botLeftDiag
+    );
+    var rippleSize = rippleRadius * 2;
+    var left = pointerX - rippleRadius;
+    var top = pointerY - rippleRadius;
+
+    style.height = rippleSize + 'px';
+    style.width = rippleSize + 'px';
+    style.top = top + 'px';
+    style.left = left + 'px';
+
+    return style;
+  },
+
+  _calcDiag: function(a, b) {
+    return Math.sqrt((a * a) + (b * b));
+  },
+
+  _getRippleElements: function() {
+    return this.state.ripples.map(function(ripple) {
+      return (
+        <RippleCircle
+          key={ripple.key}
+          started={ripple.started}
+          ending={ripple.ending}
+          style={ripple.style} />
+      );
+    }.bind(this));
+  }
+
+});
+
+module.exports = TouchRipple;

data/vendor/assets/javascripts/material-ui/components/slider.jsx

@@ -0,0 +1,178 @@
+var React = require('react'),
+    Paper = require('./paper'),
+    Classable = require('./mixins/classable'),
+    Draggable = require('react-draggable2');
+
+var Slider = React.createClass({
+
+  propTypes: {
+    required: React.PropTypes.bool,
+    disabled: React.PropTypes.bool,
+    min: React.PropTypes.number,
+    max: React.PropTypes.number,
+    step: React.PropTypes.number,
+    error: React.PropTypes.string,
+    description: React.PropTypes.string,
+    name: React.PropTypes.string.isRequired,
+    onChange: React.PropTypes.func,
+    onDragStart: React.PropTypes.func,
+    onDragStop: React.PropTypes.func
+  },
+
+  mixins: [Classable],
+
+  getDefaultProps: function() {
+    return {
+      required: true,
+      disabled: false,
+      defaultValue: 0,
+      min: 0,
+      max: 1,
+      dragging: false
+    };
+  },
+
+  getInitialState: function() {
+    var value = this.props.value;
+    if (value == null) value = this.props.defaultValue;
+    var percent = (value - this.props.min) / (this.props.max - this.props.min);
+    if (isNaN(percent)) percent = 0;
+    return {
+      value: value,
+      percent: percent
+    }
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    if (nextProps.value != null) {
+      this.setValue(nextProps.value);
+    }
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-input', {
+      'mui-error': this.props.error != null
+    });
+
+    var sliderClasses = this.getClasses('mui-slider', {
+      'mui-slider-zero': this.state.percent == 0,
+      'mui-disabled': this.props.disabled
+    });
+
+    var percent = this.state.percent;
+    if (percent > 1) percent = 1; else if (percent < 0) percent = 0;
+
+    return (
+      <div className={classes} style={this.props.style}>
+        <span className="mui-input-highlight"></span>
+        <span className="mui-input-bar"></span>
+        <span className="mui-input-description">{this.props.description}</span>
+        <span className="mui-input-error">{this.props.error}</span>
+        <div className={sliderClasses} onClick={this._onClick}>
+          <div ref="track" className="mui-slider-track">
+            <Draggable axis="x" bound="point"
+              cancel={this.props.disabled ? '*' : null}
+              start={{x: (percent * 100) + '%'}}
+              onStart={this._onDragStart}
+              onStop={this._onDragStop}
+              onDrag={this._onDragUpdate}>
+              <div className="mui-slider-handle" tabIndex={0}></div>
+            </Draggable>
+            <div className="mui-slider-selection mui-slider-selection-low"
+              style={{width: (percent * 100) + '%'}}>
+              <div className="mui-slider-selection-fill"></div>
+            </div>
+            <div className="mui-slider-selection mui-slider-selection-high"
+              style={{width: ((1 - percent) * 100) + '%'}}>
+              <div className="mui-slider-selection-fill"></div>
+            </div>
+          </div>
+        </div>
+        <input ref="input" type="hidden"
+          name={this.props.name}
+          value={this.state.value}
+          required={this.props.required}
+          min={this.props.min}
+          max={this.props.max}
+          step={this.props.step} />
+      </div>
+    );
+  },
+
+  getValue: function() {
+    return this.state.value;
+  },
+
+  setValue: function(i) {
+    // calculate percentage
+    var percent = (i - this.props.min) / (this.props.max - this.props.min);
+    if (isNaN(percent)) percent = 0;
+    // update state
+    this.setState({
+      value: i,
+      percent: percent
+    });
+  },
+
+  getPercent: function() {
+    return this.state.percent;
+  },
+
+  setPercent: function (percent) {
+    var value = this._percentToValue(percent);
+    this.setState({value: value, percent: percent});
+  },
+
+  clearValue: function() {
+    this.setValue(0);
+  },
+
+  _onClick: function (e) {
+    // let draggable handle the slider
+    if (this.state.dragging || this.props.disabled) return;
+    var value = this.state.value;
+    var node = this.refs.track.getDOMNode();
+    var boundingClientRect = node.getBoundingClientRect();
+    var offset = e.clientX - boundingClientRect.left;
+    this._updateWithChangeEvent(e, offset / node.clientWidth);
+  },
+
+  _onDragStart: function(e, ui) {
+    this.setState({
+      dragging: true
+    });
+    if (this.props.onDragStart) this.props.onDragStart(e, ui);
+  },
+
+  _onDragStop: function(e, ui) {
+    this.setState({
+      dragging: false
+    });
+    if (this.props.onDragStop) this.props.onDragStop(e, ui);
+  },
+
+  _onDragUpdate: function(e, ui) {
+    if (!this.state.dragging) return;
+    if (!this.props.disabled) this._dragX(e, ui.position.left);
+  },
+
+  _dragX: function(e, pos) {
+    var max = this.refs.track.getDOMNode().clientWidth;
+    if (pos < 0) pos = 0; else if (pos > max) pos = max;
+    this._updateWithChangeEvent(e, pos / max);
+  },
+
+  _updateWithChangeEvent: function(e, percent) {
+    if (this.state.percent === percent) return;
+    this.setPercent(percent);
+    var value = this._percentToValue(percent);
+    if (this.props.onChange) this.props.onChange(e, value);
+  },
+
+  _percentToValue: function(percent) {
+    return percent * (this.props.max - this.props.min) + this.props.min;
+  }
+
+});
+
+module.exports = Slider;

data/vendor/assets/javascripts/material-ui/components/snackbar.jsx

@@ -0,0 +1,76 @@
+var React = require('react');
+var CssEvent = require('./utils/css-event');
+var Classable = require('./mixins/classable');
+var ClickAwayable = require('./mixins/click-awayable');
+var FlatButton = require('./flat-button');
+
+var Snackbar = React.createClass({
+
+  mixins: [Classable, ClickAwayable],
+
+  manuallyBindClickAway: true,
+
+  propTypes: {
+    action: React.PropTypes.string,
+    message: React.PropTypes.string.isRequired,
+    openOnMount: React.PropTypes.bool,
+    onActionTouchTap: React.PropTypes.func
+  },
+
+  getInitialState: function() {
+    return {
+      open: this.props.openOnMount || false
+    };
+  },
+
+  componentClickAway: function() {
+    this.dismiss();
+  },
+
+  componentDidUpdate: function(prevProps, prevState) {
+    if (prevState.open != this.state.open) {
+      if (this.state.open) {
+        //Only Bind clickaway after transition finishes
+        CssEvent.onTransitionEnd(this.getDOMNode(), function() {
+          this._bindClickAway();
+        }.bind(this));
+      } else {
+        this._unbindClickAway();
+      }
+    }
+  },
+
+  render: function() {
+    var classes = this.getClasses('mui-snackbar', {
+      'mui-is-open': this.state.open
+    }); 
+    var action;
+
+    if (this.props.action) {
+      action = (
+        <FlatButton
+          className="mui-snackbar-action"
+          label={this.props.action}
+          onTouchTap={this.props.onActionTouchTap} />
+      );
+    }
+
+    return (
+      <span className={classes}>
+        <span className="mui-snackbar-message">{this.props.message}</span>
+        {action}
+      </span>
+    );
+  },
+
+  show: function() {
+    this.setState({ open: true });
+  },
+  
+  dismiss: function() {
+    this.setState({ open: false });
+  }
+
+});
+
+module.exports = Snackbar;