cubeletInit

method
$.fn.cubeletInit()

@return: {jQuery}

Creates a Cubelet widget. The elements that this method is called upon are treated as containers — it is recommended that these containers are empty when this method is called.

Source

$.fn.cubeletInit = function () {
  if (!hasPerformedFirstTimeInit) {
    firstTimeInit();
    hasPerformedFirstTimeInit = true;
  }

  this._cubeletCoordinates = { x: 0, y: 0, z: 0, scale: 1 };
  this._lastOffsetX = null;
  this._lastOffsetY = null;

  this._$cubeletHtmlFragment = $cubeletBaseHtmlFragment.clone();
  this.append(this._$cubeletHtmlFragment);

  this._$cubeletContainer = this.find('.cubelet-container');
  this._$cubeletCube = this.find('.cubelet-cube');
  this._$cubeletZRotationArm = this.find('.cubelet-rotation-arm');
  this._$cubeletZRotationHandle = this.find('.cubelet-rotation-handle');

  this.css({
    height: CUBELET_SIZE + 'px'
    ,width: CUBELET_SIZE + 'px'
  });

  this.addClass('cubelet');
  this.cubeletSetCoords(this._cubeletCoordinates);
  this._$cubeletContainer.on(
      'mousedown', $.proxy(onCubeletMousedown, this, this));
  this._$cubeletContainer.on(
      'mousemove', $.proxy(onCubeletMousemove, this, this));

  return this;
};

cubeletGetCoords

method
$.fn.cubeletGetCoords()

@return: {Object}

Description

Get the current rotation coordinates of the cube. The returned object has the format:

{ x: number, y: number, z: number, scale: number }

Source

$.fn.cubeletGetCoords = function () {
  return $.extend({}, this._cubeletCoordinates);
};

cubeletSetCoords

method
$.fn.cubeletSetCoords()

@param: {Object}coordinatesThe coordinates to set on the cube.
@return: {jQuery}

Description

Set the rotation coordinates of the Cubelet. Sets the internal state of the widget as well as the inline CSS rotate styles.

The coordinates parameter accepts any object with the following format:

{ x: number=, y: number=, z: number=, scale: number=}

You can omit any parameters you don't want to set — those properties will be unchanged by this method.

Source

$.fn.cubeletSetCoords = function (coordinates) {
  var cubeletCoordinates = this._cubeletCoordinates;
  $.extend(cubeletCoordinates, coordinates);

  var transformString =
           'rotateX(' + cubeletCoordinates.x
    + 'deg) rotateY(' + cubeletCoordinates.y
    + 'deg)';
  this.css('transform',
      'translate(-50%, -50%) rotate(' + cubeletCoordinates.z + 'deg)');
  this._$cubeletCube.css('transform', transformString);
  this._$cubeletContainer.css(
      'transform', 'scale(' + cubeletCoordinates.scale + ')');

  return this;
};

cubeletShow

method
$.fn.cubeletShow()

@return: {jQuery}

Description

Show the Cubelet widget.

Source

$.fn.cubeletShow = function () {
  this._$cubeletContainer.show();

  // If the mouse is already over the Cubelet when it is shown, start listening
  // for mousewheel interactions (which is achieved by triggering the mousemove
  // event.)
  var hoveredEl = document.elementFromPoint(
      trackedMouseCoords.x, trackedMouseCoords.y);

  if ($.contains(this._$cubeletContainer[0], hoveredEl) ||
      this._$cubeletContainer[0] === hoveredEl) {
    this._$cubeletContainer.trigger('mousemove');
  }

  return this;
};

cubeletHide

method
$.fn.cubeletHide()

@return: {jQuery}

Description

Hide the Cubelet widget.

Source

$.fn.cubeletHide = function () {
  this._$cubeletContainer.hide();
  return this;
};

cubeletIsShown

method
$.fn.cubeletIsShown()

@return: {boolean}

Description

Whether the Cubelet is showing or not.

Source

$.fn.cubeletIsShown = function () {
  return this._$cubeletContainer.is(':visible');
};

cubeletApplyRotationToElement

method
$.fn.cubeletApplyRotationToElement()

@param: {jQuery}$elThe elements to apply the Cubelet's current rotation to.

Description

Takes the Cubelet's current rotation coordinates and apply them to another jQuery collection. Note that this will overwrite any inline transform styles currently set on these elements.

Source

$.fn.cubeletApplyRotationToElement = function ($el) {
  var coords = this.cubeletGetCoords();
  $el.css('transform',
               'rotateX(' + coords.x
        + 'deg) rotateY(' + coords.y
        + 'deg) rotateZ(' + coords.z
        + 'deg) scale(' + coords.scale + ')');
};

jQuery Cubelet src/init.js