Skip to content

Files

Latest commit

 

History

History
120 lines (99 loc) · 1.85 KB

EXAMPLES.md

File metadata and controls

120 lines (99 loc) · 1.85 KB

Examples

Toggle rendered within a custom element:

class Toggle extends opr.Toolkit.WebComponent {

  static elementName = 'opr-toogle';

  static styles = [
    'styles/toggle.css',
  ];

  getInitialState(props) {
    return {
      id: props.id,
      value: Settings.getValue(props.id),
    };
  }

  onAttached() {
    this.connectTo(Settings, {
      [this.props.id]: this.onValueChanged,
    });
  }

  onValueChanged(value) {
    this.commands.update({
      value,
    });
  }

  render() {
    return [
      'input',
      {
        type: 'checkbox',
        class: 'toggle',
        checked: this.props.value === true,
      },
    ];
  }
}

Impression reporter wrapper:

class ImpressionReporter extends opr.Toolkit.WebComponent {

  onVisible() {
    // called by the intersection observer plugin
    Stats.reportImpression(this.props.id);
  }

  render() {
    return this.children[0];
  }
}

Animation decorator:

class Animation extends opr.Toolkit.WebComponent {

  getInitialState(props) {
    return {
      ...props,
      animation: 'fade-in',
    };
  }

  getUpdatedState(props, state) {
    return {
      ...props,
      animation: 'shake',
    };
  };
}

Image details information with asynchronous state update:

class ImageDetails extends opr.Toolkit.WebComponent {

  static elementName = 'image-details';

  async getInitialState({url}) {
    const metadata = await Service.getImageMetadata(url);
    return {
      url,
      metadata,
    };
  }

  render() {
    return [
      'section',
      [
        'img',
        url: this.props.url,
      ],
      [
        'span',
        `Width: ${this.props.metadata.width}`,
      ]
      [
        'span',
        `Height: ${this.props.metadata.height}`,
      ],
      [
        'span',
        `File size: ${format(this.props.metadata.size)}`,
      ],
    ];
  }
}