colonel-kurtz/addons/image.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;

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

var defaultProps$3 = {
  content: { src: '' }
};

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

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

  ImageBlock.prototype.render = function render () {
    var ref = this.props.content;
    var src = ref.src;

    return (
      React.createElement( 'div', { className: "col-img" },
        React.createElement( Field, {
          label: "Image Source", type: "url", value: src, name: "image_src", onChange: this._onSrcChange.bind(this) }),
        this.props.children,
        React.createElement( Frame, { open: ("" + (src || '')).trim() },
          React.createElement( Graphic, { src: src, alt: "" })
        )
      )
    )
  };

  ImageBlock.prototype._onSrcChange = function _onSrcChange (e) {
    this.props.onChange({
      src: e.currentTarget.value
    });
  };

  return ImageBlock;
}(React.Component));

ImageBlock.defaultProps = defaultProps$3;

module.exports = ImageBlock;
//# sourceMappingURL=image.js.map