Code style

Whitespace usage

Sticking to a consistent use of whitespace ensures that code can be easily reused between projects without needing to replace all indentation in code copied.

Indentation

Standard indentation is two space characters soft indent (actual spaces, not tab characters).

/**
 * Move the draggable element to coordinates typed in by the user
 */
H5P.DragNDrop.prototype.moveToCoordinates = function () {
  var x = parseInt(this.$xCoordinate.val());
  var y = parseInt(this.$yCoordinate.val());
  if (isNaN(x) || isNaN(y)) {
    // Make sure that the NaN doesn't get saved...
    return;
  }
  var event = {
    data: {
      instance: this
    },
    pageX: this.adjust.x + this.containerOffset.left + this.scrollLeft + parseInt(this.$container.css('padding-left')) + x,
    pageY: this.adjust.y + this.containerOffset.top + this.scrollTop + y
  };
  H5P.DragNDrop.move(event);
  H5P.DragNDrop.release(event);
};

Comments follow the indentation of the containing code.

Exceptions may occur when breaking conditions within parentheses, where indentation should match the leading parenthesis.

TBD: Example of parenthesis indentation

Operator spacing

Space before and after all operators.

a = b + c;

Other whitespace

• Trailing whitespace should always be removed, also on empty lines.
• Files should end in a single line break.

Normal statement syntax

if/else/for/while etc. shall always have a space character before the leading parenthesis and between the ending parenthesis and the starting brace. There should not be a space between the parentheses and the condition within. The starting brace should be on the same line. Compound statements (like "else") should start on new lines.

if (condition != true) {
  doStuff();
}
else {
  doSomeOtherStuff();
}

Single line syntax without braces for if statements is allowed only if both the condition and the following statement fits within 80 characters, including indentation.

  if (finished) return false;

Quotes

Strings should generally be quoted with single quotes. This allows double quotes to be used if writing HTML elements with attributes.

      $('.boardgame', dom).append('<div id="action-container" class="action-container"></div>');

Variables

Variables should be camelCased.

var libraryObject = H5P.libraryFromString(params.action.library);

Array variables should be named in plural.

var hotspots = [];

Variables containing jQuery objects should be named with a leading $ character.

var $myDom, $progress;

Functions

Object methods and internal functions should be camelCased. Contructor functions should be PascalCased.

Anonymous functions should have a space between the 'function' keyword and the arguments declaration.

      $(spot).on('hotspotFinished', function (ev, result) {
        _updateProgress();
        _checkIfFinished();
      });

Chaining jQuery operations

jQuery encourages chaining of operators on objects. Single statements after a jQuery selector should always be on the same line.

  H5P.$('.hideMe').hide();

Multiple short statements may be chained on a single line, but larger statements should start with a period on new lines. Example below from the H5P.DragNDrop library.

  H5P.$body
  .bind('mouseup', eventData, H5P.DragNDrop.release)
  .bind('mouseleave', eventData, H5P.DragNDrop.release)
  .mousemove(eventData, H5P.DragNDrop.move)
  .attr('unselectable', 'on')[0]
  .onselectstart = H5P.$body[0].ondragstart = function () {
    return false;
  };