@qooxdoo/framework/source/class/qx/bom/Vml.js

The JS Framework for Coders

/* ************************************************************************

   qooxdoo - the new era of web development

   http://qooxdoo.org

   Copyright:
     2004-2008 1&1 Internet AG, Germany, http://www.1und1.de

   License:
     MIT: https://opensource.org/licenses/MIT
     See the LICENSE file in the project's top-level directory for details.

   Authors:
     * Sebastian Werner (wpbasti)
     * Fabian Jakobs (fjakobs)

************************************************************************ */

/**
 * Helper class to work with VML . If this class is used, it initialized VML
 * support.
 *
 *  <em>Note: This class is only available in Internet Explorer!</em>
 */
qx.Class.define("qx.bom.Vml", {
  /*
  *****************************************************************************
     STATICS
  *****************************************************************************
  */

  statics: {
    /**
     * Create VML element
     *
     * @param type {String} The VML element type
     * @param attributes {Map?null} An optional map of element attributes
     * @param win {var?null} The browser window element, in which the element
     *     should be created.
     * @return {Element} The VML element
     */
    create(type, attributes, win) {
      var win = win || window;
      var el = win.document.createElement("v:" + (type || "shape"));

      if (attributes) {
        for (var key in attributes) {
          el.setAttribute(key, attributes[key]);
        }
      }

      return el;
    },

    /**
     * Creates an VML image and configures it. The image is always tiled.
     *
     * @param source {String?} The URL of the image to display
     * @param width {Integer?} The desired width of the image element
     * @param height {Integer?} The desired height of the image element
     * @param xOffset {Integer?0} The horizontal offset of the image inside of
     *     the image element.
     * @param yOffset {Integer?0} The vertical offset of the image inside of
     *     the image element.
     * @param imageWidth {Integer?null} The full width of the image. This value
     *     is required, when an xOffset is given.
     * @param imageHeight {Integer?null} The full height of the image. This value
     *     is required, when an yOffset is given.
     * @return {Element} the VML element of the image
     */
    createImage(
      source,
      width,
      height,
      xOffset,
      yOffset,
      imageWidth,
      imageHeight
    ) {
      var shape = qx.bom.Vml.create("rect", {
        stroked: "False"
      });

      var fill = qx.bom.Vml.create("fill", {
        type: "tile"
      });

      shape.appendChild(fill);

      if (source || width || height) {
        this.updateImage(
          shape,
          source,
          width,
          height,
          xOffset,
          yOffset,
          imageWidth,
          imageHeight
        );
      }

      return shape;
    },

    /**
     * Sets the image source and configures the image. The image element size
     * resized to the given size and the image is always tiled.
     *
     * @signature function(image, source, width, height, xOffset, yOffset, imageWidth, imageHeight)
     * @param image {Element} The image VML element created by {@link #createImage}.
     * @param source {String} The URL of the image to display
     * @param width {Integer} The desired width of the image element
     * @param height {Integer} The desired height of the image element
     * @param xOffset {Integer?0} The horizontal offset of the image inside of
     *     the image element.
     * @param yOffset {Integer?0} The vertical offset of the image inside of
     *     the image element.
     * @param imageWidth {Integer?null} The full width of the image. This value
     *     is required, when an xOffset is given.
     * @param imageHeight {Integer?null} The full height of the image. This value
     *     is required, when an yOffset is given.
     */
    updateImage(
      image,
      source,
      width,
      height,
      xOffset,
      yOffset,
      imageWidth,
      imageHeight
    ) {
      var Style = qx.bom.element.Style;
      var Attribute = qx.bom.element.Attribute;

      Style.set(image, "width", width, false);
      Style.set(image, "height", height, false);

      var fill = image.firstChild;
      Attribute.set(fill, "src", source, false);

      var xOrigin = xOffset ? -xOffset / imageWidth : 0;
      var yOrigin = yOffset ? -yOffset / imageHeight : 0;

      Attribute.set(fill, "origin", xOrigin.toFixed(2) + "," + yOrigin, false);
    }
  },

  /*
  *****************************************************************************
     DEFER
  *****************************************************************************
  */

  defer() {
    qx.module.Event.ready(function () {
      if (qx.core.Environment.get("html.vml")) {
        qx.bom.Stylesheet.createElement(
          "v\\: * { behavior:url(#default#VML);display:inline-block; }"
        );

        if (!document.namespaces["v"]) {
          document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
        }
      }
    });
  }
});