react-annotator/dist/js/Indicator.js

A React mixin to allow for user annotations directly on images.

'use strict';

var React = require('react/addons');

var Indicator = React.createClass({displayName: "Indicator",

  propTypes: {
    annotation: React.PropTypes.object.isRequired,
    showAnnotation: React.PropTypes.func.isRequired,
    closeAnnotation: React.PropTypes.func.isRequired
  },

  getDefaultProps: function() {
    return {
      annotation: {
        text: '',
        xPos: -1000,
        yPos: -1000
      }
    };
  },

  stopPropagation: function(evt) {
    // Prevent clicks on indicators from triggering new annotation form
    evt.preventDefault();
    evt.stopPropagation();
  },

  showAnnotation: function(evt) {
    var element = this.getDOMNode();
    var xPos = this.props.annotation.xPos;
    var yPos = this.props.annotation.yPos + element.offsetHeight;

    if ( evt ) { evt.preventDefault(); }

    this.props.showAnnotation({
      annotation: this.props.annotation,
      xPos: xPos,
      yPos: yPos
    });
  },

  render: function() {
    var styles = {
      'position': 'absolute',
      'top': this.props.annotation.yPos,
      'left': this.props.annotation.xPos
    };

    return (
      React.createElement("div", {ref: "self", 
           className: "annotator-indicator", 
           style: styles, 
           onMouseOver: this.showAnnotation, 
           onMouseLeave: this.props.closeAnnotation, 
           onClick: this.stopPropagation})
    );
  }

});

module.exports = Indicator;