{"size": 1789, "ext": "js", "max_stars_repo_path": "site/framework/component/simple-img.js", "max_stars_repo_name": "wearedoronko/wearedoronko.org", "max_stars_repo_stars_event_min_datetime": "2020-09-10T02:19:20.000Z", "max_stars_repo_stars_event_max_datetime": "2020-09-10T02:19:20.000Z", "max_issues_repo_path": "site/framework/component/simple-img.js", "max_issues_repo_name": "uskay/simple-sitegen", "max_issues_repo_issues_event_min_datetime": "2021-04-02T02:36:31.000Z", "max_issues_repo_issues_event_max_datetime": "2021-04-29T01:12:06.000Z", "max_forks_repo_path": "site/framework/component/simple-img.js", "max_forks_repo_name": "wearedoronko/wearedoronko.org", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 8, "max_forks_count": null, "avg_line_length": 25.9275362319, "max_line_length": 78, "alphanum_fraction": 0.4650642817}
const {h} = require('preact');
const htm = require('htm');
const html = htm.bind(h);
const SimpleUI = require('./simple-ui.js');

module.exports = class SimpleImg extends SimpleUI {
  componentName() {
    return 'SimpleImg';
  }
  commonStyle(props) {
    switch (props.layout) {
      case 'cover':
        return /* css*/`
          :host {
            display: inline;
          }
          .${this.componentName()}-${props.layout}-layout {
            width:100%;
            height:100%;
          }
          .${this.componentName()}-${props.layout}-layout img {
            width:100%;
            height:100%;
            object-fit: cover;
          }
        `;
      case 'responsive':
        return /* css*/`
            .${this.componentName()}-${props.layout}-layout {
              width: 100%;
              position: relative;
              background-color: transparent;
              overflow: hidden;
            }
            .${this.componentName()}-${props.layout}-layout img {
              position: absolute;
              width: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
          `;
    }
    return '';
  }
  style(props) {
    if (props.layout !== 'responsive') {
      return '';
    }
    return /* css*/`
      #${this.uniqueId} .placeholder {
        padding-top: 
        ${Math.round((props.height / props.width * 100) * 10) / 10}%;
      }
    `;
  }
  template(props) {
    return html`
      <div class="placeholder ${this.componentName()}-${props.layout}-layout">
        <img src="${props.src}" 
             srcset="${props.srcset ? props.srcset : ''}" 
             sizes="50vw" loading="lazy" 
             alt="${props.alt}"
             />
      </div>
    `;
  }
};
