gistfile1.txt

/** @jsx React.DOM */

import React from 'react'
import {itemHandlerMixin} from '/widgets/mixins'
import $ from 'jquery'


export var socialEmbed = React.createClass({
  getInitialState: function(){
    return this.props.config || {active: {twitter: false, facebook: false,google: false, instagram: false }, twitter: { url: '',html: '' }, facebook: { url: '' }, google: { url: '' }, instagram: { url: '' } }
  },
  get_content_form: function() {
    return ContentForm({content: this})
  },
  componentDidUpdate:function(){
    FB.XFBML.parse()
    twttr.widgets.load()
    gapi.post.go()
  },
  componentDidMount:function(){
    twttr.widgets.load()
    FB.XFBML.parse()
    gapi.post.go()
  },
  shouldComponentUpdate: function(nextProps, nextState) {
      if(this.state.twitter.url == nextState.twitter.url)console.log('dont update')
        else console.log('update')
      var self = this
      var url = this.state.twitter.url
      $.ajax({
        url: "https://api.twitter.com/1/statuses/oembed.json?url="+url,
        dataType: 'jsonp',
        type: 'get',
        success: function(data) {
          self.setState({twitter: {html: data.html} })
        }
      });
      return true
  },
  widget: function(){
    var render = []
    console.log(this.state)
      
      if(this.state.active.twitter){
        render.push(<div dangerouslySetInnerHTML={{__html: this.state.twitter.html}} />)
      }
      console.log(render)
      if(this.state.active.facebook){
        render.push(<div dangerouslySetInnerHTML={{__html: '<div class="fb-post" data-href="'+this.state.facebook.url+'" data-width="350"></div>'}} />)
      }
      if(this.state.active.google){
        render.push(<div dangerouslySetInnerHTML={{__html: '<div class="g-post" data-href="'+this.state.google.url+'"></div>'}} />)
      }
      if(this.state.active.instagram){
        render.push(<div dangerouslySetInnerHTML={{__html: '<iframe src="'+this.state.instagram.url+'embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>'}} />)
      }
    return render
  },
  render: function(){
    return(
        <div className="boxed bottom-shadow">
          {this.widget()}
        </div>
    )
  }
});

var ContentForm = React.createClass({
  mixins: [itemHandlerMixin],
  update: function(event) {
    this.updateMixin(this.state,event.target.dataset.network,event.target.value,event.target.name,false)
  },
  updateActive: function(event) {
    var value = event.target.value
    value = true
    if(this.state.active[event.target.name] == true) value = false
    console.log(value)
  var active = this.state.active
  active[event.target.name] = value
    this.props.content.setState({active: active})
    this.setState({active: active})
  },
  render: function(){

    return(
      <div>
      <h3>Twitter
        <input type="checkbox" name="twitter" checked={this.state.active.twitter} onChange={this.updateActive} />
      </h3>
      <div className="twitter-section">
          <div className="collapsable">
            <input name="url" data-network="twitter" value={this.state.twitter.url} placeholder="Tweet URL" onChange={this.update}/>
          </div>
      </div>
      <h3>Facebook
        <input type="checkbox" name="facebook" checked={this.state.active.facebook} onChange={this.updateActive} />
      </h3>
      <div className="facebook-section">
          <div className="collapsable">
            <input name="url" data-network="facebook" value={this.state.facebook.url} placeholder="Post URL" onChange={this.update}/>
          </div>
      </div>
      <h3>Google Plus
        <input type="checkbox" name="google" checked={this.state.active.google} onChange={this.updateActive} />
      </h3>
      <div className="google-section">
          <div className="collapsable">
            <input name="url" data-network="google" value={this.state.google.url} placeholder="Post URL" onChange={this.update}/>
          </div>
      </div>
      <h3>Instagram
        <input type="checkbox" name="instagram" checked={this.state.active.instagram} onChange={this.updateActive} />
      </h3>
      <div className="instagram-section">
          <div className="collapsable">
            <input name="url" data-network="instagram" value={this.state.instagram.url} placeholder="Picture URL" onChange={this.update}/>
          </div>
      </div>
    </div>)
  }
})