Tiny File Manager

Back Back Up Advanced Editor

/**
 * BLOCK: extend image block
 */
const { createHigherOrderComponent } = wp.compose,
  { Fragment } = wp.element,
  { InspectorControls } = wp.blockEditor,
  { PanelBody } = wp.components;

/**
 * Transform bytes to human readable format.
 *
 * @param {number} bytes
 * @return {string}  Readable size string.
 */
function humanFileSize(bytes) {
  const thresh = 1024,
    units = ["kB", "MB", "GB", "TB"];

if (Math.abs(bytes) < thresh) {
    return bytes + " B";
  }

let u = -1;
  do {
    bytes /= thresh;
    ++u;
  } while (Math.abs(bytes) >= thresh && u < units.length - 1);

return bytes.toFixed(1) + " " + units[u];
}

/**
 * Generate Smush stats table.
 *
 * @param {number} id
 * @param {Object} stats
 * @return {*}  Smush stats.
 */
export function smushStats(id, stats) {
  if ("undefined" === typeof stats) {
    return window.smush_vars.strings.gb.select_image;
  } else if ("string" === typeof stats) {
    return stats;
  }

return (
    <div
      id="smush-stats"
      className="sui-smush-media smush-stats-wrapper hidden"
      style={{ display: "block" }}
    >
      <table className="wp-smush-stats-holder">
        <thead>
          <tr>
            <th className="smush-stats-header">
              {window.smush_vars.strings.gb.size}
            </th>
            <th className="smush-stats-header">
              {window.smush_vars.strings.gb.savings}
            </th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(stats.sizes)
            .filter(item => 0 < stats.sizes[item].percent)
            .map((item, i) => (
              <tr key={i}>
                <td>{item.toUpperCase()}</td>
                <td>
                  {humanFileSize(stats.sizes[item].bytes)} ({" "}
                  {stats.sizes[item].percent}% )
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}

/**
 * Fetch image data. If image is Smushing, update in 3 seconds.
 *
 * TODO: this could be optimized not to query so much.
 *
 * @param {Object} props
 */
export function fetchProps(props) {
  const image = new wp.api.models.Media({ id: props.attributes.id }),
    smushData = props.attributes.smush;

image.fetch({ attribute: "smush" }).done(function(img) {
    if ("string" === typeof img.smush) {
      props.setAttributes({ smush: img.smush });
      //setTimeout( () => fetch( props ), 3000 );
    } else if (
      "undefined" !== typeof img.smush &&
      ("undefined" === typeof smushData ||
        JSON.stringify(smushData) !== JSON.stringify(img.smush))
    ) {
      props.setAttributes({ smush: img.smush });
    }
  });
}

/**
 * Modify the block’s edit component.
 * Receives the original block BlockEdit component and returns a new wrapped component.
 */
const smushStatsControl = createHigherOrderComponent(BlockEdit => {
  return props => {
    // If not image block or not selected, return unmodified block.
    if (
      "core/image" !== props.name ||
      !props.isSelected ||
      "undefined" === typeof props.attributes.id
    ) {
      return (
        <Fragment>
          <BlockEdit {...props} />
        </Fragment>
      );
    }

const smushData = props.attributes.smush;
    fetchProps(props);

return (
      <Fragment>
        <BlockEdit {...props} />
        <InspectorControls>
          <PanelBody title={window.smush_vars.strings.gb.stats}>
            {smushStats(props.attributes.id, smushData)}
          </PanelBody>
        </InspectorControls>
      </Fragment>
    );
  };
}, "withInspectorControl");

wp.hooks.addFilter(
  "editor.BlockEdit",
  "wp-smush/smush-data-control",
  smushStatsControl
);