<commit_before>/* globals ga */

const React = require("react");
const ReactDOM = require("react-dom");
const ReactDOMServer = require("react-dom/server");
const { getGitRevision } = require("../linker");
// const { ProfileButton } = require("./profile");
const { addReactScripts } = require("../reactutils");
const { Footer } = require("../footer-view");
const sendEvent = require("../browser-send-event.js");

class ShareButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = {copyText: "Copy"};
  }

  onClickShareButton(whichButton) {
    sendEvent(
      this.props.isOwner ? "share-owner" : "share-non-owner",
      whichButton);
  }

  onClickCopyButton(e) {
    let target = e.target;
    target.previousSibling.select();
    document.execCommand("copy");
    this.setState({copyText: "Copied"});
    setTimeout(() => {
      this.setState({copyText: "Copy"});
    }, 1000);
    sendEvent("share", "copy");
  }

  onClickInputField(e) {
    e.target.select();
    sendEvent("share", "focus-url");
  }

  onChange(e) {
    // Do nothing -- we simply need this event handler to placate React
  }

  render() {
    return <div id="share-buttons-panel" className="share-panel default-color-scheme">
      <div className="wrapper row-space">
        <a onClick={ this.onClickShareButton.bind(this, "facebook") } target="_blank" href={ "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(this.props.shot.viewUrl) }>
          <img src={ this.props.staticLink(`img/share-facebook.svg`) } />
        </a>
        <a onClick={ this.onClickShareButton.bind(this, "twitter") }target="_blank" href={"https://twitter.com/home?status=" + encodeURIComponent(this.props.shot.viewUrl) }>
          <img src={ this.props.staticLink(`img/share-twitter.svg`) } />
        </a>
        <a onClick={ this.onClickShareButton.bind(this, "pinterest") } target="_blank" href={ "https://pinterest.com/pin/create/button/?url=" + encodeURIComponent(this.props.shot.viewUrl) + "&media=" + encodeURIComponent(this.props.clipUrl) + "&description=" + encodeURIComponent(this.props.shot.title) }>
          <img src={ this.props.staticLink(`img/share-pinterest.svg`) } />
        </a>
        <a onClick={ this.onClickShareButton.bind(this, "email") } target="_blank" href={ `mailto:?subject=Fwd:%20${encodeURIComponent(this.props.shot.title)}&body=${encodeURIComponent(this.props.shot.title)}%0A%0A${encodeURIComponent(this.props.shot.viewUrl)}%0A%0ASource:%20${encodeURIComponent(this.props.shot.url)}%0A` }>
          <img src={ this.props.staticLink(`img/share-email.svg`) } />
        </a>
      </div>
      <p>Get a shareable link to this shot:</p>
      <div className="wrapper row-space">
        <input className="copy-shot-link-input"
          value={ this.props.shot.viewUrl }
          onClick={ this.onClickInputField.bind(this) }
          onChange={ this.onChange.bind(this) } />
        <button
          className="button secondary"
          onClick={ this.onClickCopyButton.bind(this) }>
          { this.state.copyText }
        </button>
      </div>
      <div className="small">
        { this.props.isPublic }
      </div>
    </div>;
  }
}

class Clip extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let image = ReactDOM.findDOMNode(this.refs.clipImage);
    let onResize = () => {
      let windowHeight = window.innerHeight;
      let paddingTop = Math.floor((windowHeight - image.height - 35) / 2);
      if (paddingTop < 66) {
        paddingTop = 66;
      }
      this.setState({paddingTop});
    };
    window.addEventListener("resize", onResize, true);

    onResize();

    try {
      window.sendToChild({
        type: "displayClip",
        clip: this.props.clip.asJson()
      });
    } catch (e) {
      console.error("Error sending message to child", e);
    }
  }

  onClickClose() {
    this.props.onClickClose();
  }

  onClickCloseBackground(event) {
    if (event.target.tagName == "A") {
      // A click on the clip itself
      return;
    }
    // FIXME: totally hacky way to handle this,
    // but suppress the click action when the share panel
    // is open:
    if (document.getElementById("share-buttons-panel")) {
      return;
    }

    if (this.props.showCloseButton) {
      this.onClickClose();
    }
  }

  render() {
    let clip = this.props.clip,
      node = null;

    if (clip.image !== undefined) {
      node = <img height={clip.image.dimensions.y} width={clip.image.dimensions.x} ref="clipImage" src={ clip.image.url } />;
    }

    let closeButton = null;
    if (this.props.showCloseButton) {
      closeButton = <img
        style={{
          position: "absolute",
          cursor: "pointer",
          top: "81px",
          right: "15px",
          height: "32px",
          width: "32px"}}
        src={ this.props.staticLink("img/zoom-out.svg") }
        onClick={ this.onClickClose.bind(this) }/>;
    }
    return <div ref="clipContainer" className="clip-container" onClick={this.onClickCloseBackground.bind(this)}>
      { closeButton }<commit_msg>Fix #1730, don't let a clip image go over 100% of the size of the page<commit_after>/* globals ga */

const React = require("react");
const ReactDOM = require("react-dom");
const ReactDOMServer = require("react-dom/server");
const { getGitRevision } = require("../linker");
// const { ProfileButton } = require("./profile");
const { addReactScripts } = require("../reactutils");
const { Footer } = require("../footer-view");
const sendEvent = require("../browser-send-event.js");

class ShareButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = {copyText: "Copy"};
  }

  onClickShareButton(whichButton) {
    sendEvent(
      this.props.isOwner ? "share-owner" : "share-non-owner",
      whichButton);
  }

  onClickCopyButton(e) {
    let target = e.target;
    target.previousSibling.select();
    document.execCommand("copy");
    this.setState({copyText: "Copied"});
    setTimeout(() => {
      this.setState({copyText: "Copy"});
    }, 1000);
    sendEvent("share", "copy");
  }

  onClickInputField(e) {
    e.target.select();
    sendEvent("share", "focus-url");
  }

  onChange(e) {
    // Do nothing -- we simply need this event handler to placate React
  }

  render() {
    return <div id="share-buttons-panel" className="share-panel default-color-scheme">
      <div className="wrapper row-space">
        <a onClick={ this.onClickShareButton.bind(this, "facebook") } target="_blank" href={ "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(this.props.shot.viewUrl) }>
          <img src={ this.props.staticLink(`img/share-facebook.svg`) } />
        </a>
        <a onClick={ this.onClickShareButton.bind(this, "twitter") }target="_blank" href={"https://twitter.com/home?status=" + encodeURIComponent(this.props.shot.viewUrl) }>
          <img src={ this.props.staticLink(`img/share-twitter.svg`) } />
        </a>
        <a onClick={ this.onClickShareButton.bind(this, "pinterest") } target="_blank" href={ "https://pinterest.com/pin/create/button/?url=" + encodeURIComponent(this.props.shot.viewUrl) + "&media=" + encodeURIComponent(this.props.clipUrl) + "&description=" + encodeURIComponent(this.props.shot.title) }>
          <img src={ this.props.staticLink(`img/share-pinterest.svg`) } />
        </a>
        <a onClick={ this.onClickShareButton.bind(this, "email") } target="_blank" href={ `mailto:?subject=Fwd:%20${encodeURIComponent(this.props.shot.title)}&body=${encodeURIComponent(this.props.shot.title)}%0A%0A${encodeURIComponent(this.props.shot.viewUrl)}%0A%0ASource:%20${encodeURIComponent(this.props.shot.url)}%0A` }>
          <img src={ this.props.staticLink(`img/share-email.svg`) } />
        </a>
      </div>
      <p>Get a shareable link to this shot:</p>
      <div className="wrapper row-space">
        <input className="copy-shot-link-input"
          value={ this.props.shot.viewUrl }
          onClick={ this.onClickInputField.bind(this) }
          onChange={ this.onChange.bind(this) } />
        <button
          className="button secondary"
          onClick={ this.onClickCopyButton.bind(this) }>
          { this.state.copyText }
        </button>
      </div>
      <div className="small">
        { this.props.isPublic }
      </div>
    </div>;
  }
}

class Clip extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let image = ReactDOM.findDOMNode(this.refs.clipImage);
    let onResize = () => {
      let windowHeight = window.innerHeight;
      let paddingTop = Math.floor((windowHeight - image.height - 35) / 2);
      if (paddingTop < 66) {
        paddingTop = 66;
      }
      this.setState({paddingTop});
    };
    window.addEventListener("resize", onResize, true);

    onResize();

    try {
      window.sendToChild({
        type: "displayClip",
        clip: this.props.clip.asJson()
      });
    } catch (e) {
      console.error("Error sending message to child", e);
    }
  }

  onClickClose() {
    this.props.onClickClose();
  }

  onClickCloseBackground(event) {
    if (event.target.tagName == "A") {
      // A click on the clip itself
      return;
    }
    // FIXME: totally hacky way to handle this,
    // but suppress the click action when the share panel
    // is open:
    if (document.getElementById("share-buttons-panel")) {
      return;
    }

    if (this.props.showCloseButton) {
      this.onClickClose();
    }
  }

  render() {
    let clip = this.props.clip,
      node = null;

    if (clip.image !== undefined) {
      node = <img style={{height: "auto", width: clip.image.dimensions.x + "px", maxWidth: "100%"}} ref="clipImage" src={ clip.image.url } />;
    }

    let closeButton = null;
    if (this.props.showCloseButton) {
      closeButton = <img
        style={{
          position: "absolute",
          cursor: "pointer",
          top: "81px",
          right: "15px",
          height: "32px",
          width: "32px"}}
        src={ this.props.staticLink("img/zoom-out.svg") }
        onClick={ this.onClickClose.bind(this) }/>;
    }
    return <div ref="clipContainer" className="clip-container" onClick={this.onClickCloseBackground.bind(this)}>
      { closeButton }
{'fraction_non_alphanumeric': 0.16511357018054745, 'fraction_numerical': 0.0064065230052417, 'mean_word_length': 2.8835280814172637, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 63, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2728304', 'n_tokens_mistral': 3270, 'n_tokens_neox': 3261, 'n_words': 602}