colonel-kurtz/addons/youtube.js

A block editor

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var cx = _interopDefault(require('classnames'));

/**
 * Field
 * A reuseable field element
 */

function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }

function uid(len) {
  len = len || 7;
  return Math.random()
    .toString(35)
    .substr(2, len)
}

var defaultProps = {
  hint: null,
  element: 'input',
  type: 'text'
};

var Field = /*@__PURE__*/(function (superclass) {
  function Field(props) {
    superclass.call(this, props);

    this.fieldId = "col-field-" + (uid());
    this.hintId = (this.fieldId) + "-hint";
  }

  if ( superclass ) Field.__proto__ = superclass;
  Field.prototype = Object.create( superclass && superclass.prototype );
  Field.prototype.constructor = Field;

  Field.prototype.getHint = function getHint (hint) {
    return hint ? (
      React.createElement( 'span', { id: this.hintId, className: "col-field-hint" },
        hint
      )
    ) : null
  };

  Field.prototype.render = function render () {
    var this$1 = this;

    var ref = this.props;
    var hint = ref.hint;
    var Element = ref.element;
    var label = ref.label;
    var rest = objectWithoutProperties( ref, ["hint", "element", "label"] );
    var props = rest;

    var id = 'id' in props ? props.id : this.fieldId;

    return (
      React.createElement( 'label', { className: "col-field", htmlFor: id },
        React.createElement( 'span', { className: "col-field-label" }, label),

        React.createElement( Element, Object.assign({},
          { ref: function (el) { return (this$1.input = el); }, id: id, className: "col-field-input", 'aria-describedby': hint ? this.hintId : null }, props)),
        this.getHint(hint)
      )
    )
  };

  return Field;
}(React.Component));

Field.defaultProps = defaultProps;

function objectWithoutProperties$1 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }

var defaultProps$1 = {
  element: 'figure'
};

var Frame = /*@__PURE__*/(function (superclass) {
  function Frame () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) Frame.__proto__ = superclass;
  Frame.prototype = Object.create( superclass && superclass.prototype );
  Frame.prototype.constructor = Frame;

  Frame.prototype.render = function render () {
    var ref = this.props;
    var element = ref.element;
    var children = ref.children;
    var open = ref.open;
    var rest = objectWithoutProperties$1( ref, ["element", "children", "open"] );
    var other = rest;

    var className = cx('col-frame', {
      'col-frame-open': !!open
    });

    return React.createElement(element, Object.assign({}, {className: className}, other), children)
  };

  return Frame;
}(React.Component));

Frame.defaultProps = defaultProps$1;

function objectWithoutProperties$2 (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }

var defaultProps$2 = {
  className: 'col-graphic',
  element: 'img',
  src: null
};

var Graphic = /*@__PURE__*/(function (superclass) {
  function Graphic () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) Graphic.__proto__ = superclass;
  Graphic.prototype = Object.create( superclass && superclass.prototype );
  Graphic.prototype.constructor = Graphic;

  Graphic.prototype.render = function render () {
    var ref = this.props;
    var element = ref.element;
    var rest = objectWithoutProperties$2( ref, ["element"] );
    var other = rest;
    return React.createElement(element, other)
  };

  return Graphic;
}(React.Component));

Graphic.defaultProps = defaultProps$2;

/**
 * Embedded
 * A reuseable embedded content element. For usage, see the YouTube addon.
 */

var defaultProps$3 = {
  baseUrl: '',
  slug: '',
  title: 'Embedded Content',
  resolveUrl: function (base, slug) { return base + slug; }
};

var Embedded = /*@__PURE__*/(function (superclass) {
  function Embedded () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) Embedded.__proto__ = superclass;
  Embedded.prototype = Object.create( superclass && superclass.prototype );
  Embedded.prototype.constructor = Embedded;

  Embedded.prototype.getSrc = function getSrc () {
    var ref = this.props;
    var baseUrl = ref.baseUrl;
    var resolveUrl = ref.resolveUrl;
    var slug = ref.slug;

    return this.hasSlug() ? resolveUrl(baseUrl, slug) : null
  };

  Embedded.prototype.hasSlug = function hasSlug () {
    var ref = this.props;
    var slug = ref.slug;

    return ("" + (slug == undefined ? '' : slug)).trim().length > 0
  };

  Embedded.prototype.render = function render () {
    var this$1 = this;

    var ref = this.props;
    var className = ref.className;
    var hint = ref.hint;
    var name = ref.name;
    var slug = ref.slug;
    var title = ref.title;

    return (
      React.createElement( 'div', { className: className },
        React.createElement( Field, {
          ref: function (el) { return (this$1.field = el); }, hint: hint, label: title, value: slug, name: name, onChange: this._onChange.bind(this) }),
        this.props.children,
        React.createElement( Frame, { ref: function (el) { return (this$1.frame = el); }, open: this.hasSlug() },
          React.createElement( Graphic, { key: slug, element: "iframe", src: this.getSrc(slug) })
        )
      )
    )
  };

  Embedded.prototype._onChange = function _onChange (e) {
    var obj;

    this.props.onChange(( obj = {}, obj[this.props.name] = e.currentTarget.value, obj));
  };

  return Embedded;
}(React.Component));

Embedded.defaultProps = defaultProps$3;

/**
 * Youtube Colonel Kurtz Addon
 * This component adds a basic image block type, including a
 * src, caption, and credit
 */

var getYouTubeID = new RegExp(
  '(?:youtube(?:-nocookie)?.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu.be/)([^"&?/ ]{11})',
  'i'
);

function parseYouTube(value) {
  if ( value === void 0 ) value = '';

  var matches = value.match(getYouTubeID);
  return matches ? matches[1] : value
}

var defaultProps$4 = {
  baseUrl: 'https://www.youtube.com/embed/',
  content: {
    video_id: ''
  }
};

var YouTube = /*@__PURE__*/(function (superclass) {
  function YouTube () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) YouTube.__proto__ = superclass;
  YouTube.prototype = Object.create( superclass && superclass.prototype );
  YouTube.prototype.constructor = YouTube;

  YouTube.prototype.render = function render () {
    var ref = this.props;
    var baseUrl = ref.baseUrl;
    var content = ref.content;

    return (
      React.createElement( Embedded, {
        className: "col-youtube", title: "YouTube Video", hint: "This can either be a video ID or URL. The video's unique ID will be saved.", baseUrl: baseUrl, name: "video_id", slug: content.video_id, onChange: this._onChange.bind(this) })
    )
  };

  YouTube.prototype._onChange = function _onChange (ref) {
    var video_id = ref.video_id;

    this.props.onChange({ video_id: parseYouTube(video_id) });
  };

  return YouTube;
}(React.Component));

YouTube.defaultProps = defaultProps$4;

module.exports = YouTube;
//# sourceMappingURL=youtube.js.map