JSFiddle - React, Tailwind, and code Playground

by von

CSS

.h5p-greetingcard {
  width: 200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 4px #ccc;
}
.h5p-greetingcard .greeting-image {
width: 400px;
height: 200px;
}
.h5p-greetingcard .greeting-text {
  width: auto;
  margin: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
}

.h5p-greetingcard .greeting-captions {
  width: auto;
  margin: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
}

JavaScript

var H5P = H5P || {};

H5P.AAUImagerx = (function ($) {
  /**
   * Constructor function.
   */
  function C(options, id) {
    this.$ = $(this);
    // Extend defaults with provided options
    this.options = $.extend(true, {}, {
      greeting: 'Hello world!',
      captions:'sdddsd',
      something:'okay your',
      image: null
    }, options);
    // Keep provided id.
    this.id = id;
  };

  /**
   * Attach function called by H5P framework to insert H5P content into
   * page
   *
   * @param {jQuery} $container
   */
  C.prototype.attach = function ($container) {
    var self = this;
    // Set class on container to identify it as a greeting card
    // container.  Allows for styling later.
    $container.addClass("h5p-greetingcard");
    // Add image if provided.
    if (this.options.image && this.options.image.path) {
      $container.append('<img class="greeting-image" src="' + H5P.getPath(this.options.image.path, this.id) + '">');
    }
    // Add greeting text.
    $container.append('<div class="greeting-text">' + this.options.greeting +'</div>');
    $container.append('<div class="greeting-captions">' + this.options.captions +'</div>');
    $container.append('<div class="greeting-something">' + this.options.something +'</div>');
    
    
    // TODO - need to wait for image beeing loaded
    // For now using timer. Should wait for image is loaded...
    setTimeout(function () {
      self.$.trigger('resize');
    }, 1000);
  };

  return C;
})(H5P.jQuery);