Proyectos de Subversion Moodle

/* global H5PAdminIntegration*/

var H5PUtils = H5PUtils || {};

(function ($) {

  /**

   * Generic function for creating a table including the headers

   *

   * @param {array} headers List of headers

   */

  H5PUtils.createTable = function (headers) {

    var $table = $('<table class="h5p-admin-table' + (H5PAdminIntegration.extraTableClasses !== undefined ? ' ' + H5PAdminIntegration.extraTableClasses : '') + '"></table>');

    if (headers) {

      var $thead = $('<thead></thead>');

      var $tr = $('<tr></tr>');

      $.each(headers, function (index, value) {

        if (!(value instanceof Object)) {

          value = {

            html: value

          };

        }

        $('<th/>', value).appendTo($tr);

      });

      $table.append($thead.append($tr));

    }

    return $table;

  };

  /**

   * Generic function for creating a table row

   *

   * @param {array} rows Value list. Object name is used as class name in <TD>

   */

  H5PUtils.createTableRow = function (rows) {

    var $tr = $('<tr></tr>');

    $.each(rows, function (index, value) {

      if (!(value instanceof Object)) {

        value = {

          html: value

        };

      }

      $('<td/>', value).appendTo($tr);

    });

    return $tr;

  };

  /**

   * Generic function for creating a field containing label and value

   *

   * @param {string} label The label displayed in front of the value

   * @param {string} value The value

   */

  H5PUtils.createLabeledField = function (label, value) {

    var $field = $('<div class="h5p-labeled-field"></div>');

    $field.append('<div class="h5p-label">' + label + '</div>');

    $field.append('<div class="h5p-value">' + value + '</div>');

    return $field;

  };

  /**

   * Replaces placeholder fields in translation strings

   *

   * @param {string} template The translation template string in the following format: "$name is a $sex"

   * @param {array} replacors An js object with key and values. Eg: {'$name': 'Frode', '$sex': 'male'}

   */

  H5PUtils.translateReplace = function (template, replacors) {

    $.each(replacors, function (key, value) {

      template = template.replace(new RegExp('\\'+key, 'g'), value);

    });

    return template;

  };

  /**

   * Get throbber with given text.

   *

   * @param {String} text

   * @returns {$}

   */

  H5PUtils.throbber = function (text) {

    return $('<div/>', {

      class: 'h5p-throbber',

      text: text

    });

  };

  /**

   * Makes it possbile to rebuild all content caches from admin UI.

   * @param {Object} notCached

   * @returns {$}

   */

  H5PUtils.getRebuildCache = function (notCached) {

    var $container = $('<div class="h5p-admin-rebuild-cache"><p class="message">' + notCached.message + '</p><p class="progress">' + notCached.progress + '</p></div>');

    var $button = $('<button>' + notCached.button + '</button>').appendTo($container).click(function () {

      var $spinner = $('<div/>', {class: 'h5p-spinner'}).replaceAll($button);

      var parts = ['|', '/', '-', '\\'];

      var current = 0;

      var spinning = setInterval(function () {

        $spinner.text(parts[current]);

        current++;

        if (current === parts.length) current = 0;

      }, 100);

      var $counter = $container.find('.progress');

      var build = function () {

        $.post(notCached.url, function (left) {

          if (left === '0') {

            clearInterval(spinning);

            $container.remove();

            location.reload();

          }

          else {

            var counter = $counter.text().split(' ');

            counter[0] = left;

            $counter.text(counter.join(' '));

            build();

          }

        });

      };

      build();

    });

    return $container;

  };

  /**

   * Generic table class with useful helpers.

   *

   * @class

   * @param {Object} classes

   *   Custom html classes to use on elements.

   *   e.g. {tableClass: 'fixed'}.

   */

  H5PUtils.Table = function (classes) {

    var numCols;

    var sortByCol;

    var $sortCol;

    var sortCol;

    var sortDir;

    // Create basic table

    var tableOptions = {};

    if (classes.table !== undefined) {

      tableOptions['class'] = classes.table;

    }

    var $table = $('<table/>', tableOptions);

    var $thead = $('<thead/>').appendTo($table);

    var $tfoot = $('<tfoot/>').appendTo($table);

    var $tbody = $('<tbody/>').appendTo($table);

    /**

     * Add columns to given table row.

     *

     * @private

     * @param {jQuery} $tr Table row

     * @param {(String|Object)} col Column properties

     * @param {Number} id Used to seperate the columns

     */

    var addCol = function ($tr, col, id) {

      var options = {

        on: {}

      };

      if (!(col instanceof Object)) {

        options.text = col;

      }

      else {

        if (col.text !== undefined) {

          options.text = col.text;

        }

        if (col.class !== undefined) {

          options.class = col.class;

        }

        if (sortByCol !== undefined && col.sortable === true) {

          // Make sortable

          options.role = 'button';

          options.tabIndex = 0;

          // This is the first sortable column, use as default sort

          if (sortCol === undefined) {

            sortCol = id;

            sortDir = 0;

          }

          // This is the sort column

          if (sortCol === id) {

            options['class'] = 'h5p-sort';

            if (sortDir === 1) {

              options['class'] += ' h5p-reverse';

            }

          }

          options.on.click = function () {

            sort($th, id);

          };

          options.on.keypress = function (event) {

            if ((event.charCode || event.keyCode) === 32) { // Space

              sort($th, id);

            }

          };

        }

      }

      // Append

      var $th = $('<th>', options).appendTo($tr);

      if (sortCol === id) {

        $sortCol = $th; // Default sort column

      }

    };

    /**

     * Updates the UI when a column header has been clicked.

     * Triggers sorting callback.

     *

     * @private

     * @param {jQuery} $th Table header

     * @param {Number} id Used to seperate the columns

     */

    var sort = function ($th, id) {

      if (id === sortCol) {

        // Change sorting direction

        if (sortDir === 0) {

          sortDir = 1;

          $th.addClass('h5p-reverse');

        }

        else {

          sortDir = 0;

          $th.removeClass('h5p-reverse');

        }

      }

      else {

        // Change sorting column

        $sortCol.removeClass('h5p-sort').removeClass('h5p-reverse');

        $sortCol = $th.addClass('h5p-sort');

        sortCol = id;

        sortDir = 0;

      }

      sortByCol({

        by: sortCol,

        dir: sortDir

      });

    };

    /**

     * Set table headers.

     *

     * @public

     * @param {Array} cols

     *   Table header data. Can be strings or objects with options like

     *   "text" and "sortable". E.g.

     *   [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']

     * @param {Function} sort Callback which is runned when sorting changes

     * @param {Object} [order]

     */

    this.setHeaders = function (cols, sort, order) {

      numCols = cols.length;

      sortByCol = sort;

      if (order) {

        sortCol = order.by;

        sortDir = order.dir;

      }

      // Create new head

      var $newThead = $('<thead/>');

      var $tr = $('<tr/>').appendTo($newThead);

      for (var i = 0; i < cols.length; i++) {

        addCol($tr, cols[i], i);

      }

      // Update DOM

      $thead.replaceWith($newThead);

      $thead = $newThead;

    };

    /**

     * Set table rows.

     *

     * @public

     * @param {Array} rows Table rows with cols: [[1,'hello',3],[2,'asd',6]]

     */

    this.setRows = function (rows) {

      var $newTbody = $('<tbody/>');

      for (var i = 0; i < rows.length; i++) {

        var $tr = $('<tr/>').appendTo($newTbody);

        for (var j = 0; j < rows[i].length; j++) {

          $('<td>', {

            html: rows[i][j]

          }).appendTo($tr);

        }

      }

      $tbody.replaceWith($newTbody);

      $tbody = $newTbody;

      return $tbody;

    };

    /**

     * Set custom table body content. This can be a message or a throbber.

     * Will cover all table columns.

     *

     * @public

     * @param {jQuery} $content Custom content

     */

    this.setBody = function ($content) {

      var $newTbody = $('<tbody/>');

      var $tr = $('<tr/>').appendTo($newTbody);

      $('<td>', {

        colspan: numCols

      }).append($content).appendTo($tr);

      $tbody.replaceWith($newTbody);

      $tbody = $newTbody;

    };

    /**

     * Set custom table foot content. This can be a pagination widget.

     * Will cover all table columns.

     *

     * @public

     * @param {jQuery} $content Custom content

     */

    this.setFoot = function ($content) {

      var $newTfoot = $('<tfoot/>');

      var $tr = $('<tr/>').appendTo($newTfoot);

      $('<td>', {

        colspan: numCols

      }).append($content).appendTo($tr);

      $tfoot.replaceWith($newTfoot);

    };

    /**

     * Appends the table to the given container.

     *

     * @public

     * @param {jQuery} $container

     */

    this.appendTo = function ($container) {

      $table.appendTo($container);

    };

  };

  /**

   * Generic pagination class. Creates a useful pagination widget.

   *

   * @class

   * @param {Number} num Total number of items to pagiate.

   * @param {Number} limit Number of items to dispaly per page.

   * @param {Function} goneTo

   *   Callback which is fired when the user wants to go to another page.

   * @param {Object} l10n

   *   Localization / translations. e.g.

   *   {

   *     currentPage: 'Page $current of $total',

   *     nextPage: 'Next page',

   *     previousPage: 'Previous page'

   *   }

   */

  H5PUtils.Pagination = function (num, limit, goneTo, l10n) {

    var current = 0;

    var pages = Math.ceil(num / limit);

    // Create components

    // Previous button

    var $left = $('<button/>', {

      html: '<',

      'class': 'button',

      title: l10n.previousPage

    }).click(function () {

      goTo(current - 1);

    });

    // Current page text

    var $text = $('<span/>').click(function () {

      $input.width($text.width()).show().val(current + 1).focus();

      $text.hide();

    });

    // Jump to page input

    var $input = $('<input/>', {

      type: 'number',

      min : 1,

      max: pages,

      on: {

        'blur': function () {

          gotInput();

        },

        'keyup': function (event) {

          if (event.keyCode === 13) {

            gotInput();

            return false;

          }

        }

      }

    }).hide();

    // Next button

    var $right = $('<button/>', {

      html: '>',

      'class': 'button',

      title: l10n.nextPage

    }).click(function () {

      goTo(current + 1);

    });

    /**

     * Check what page the user has typed in and jump to it.

     *

     * @private

     */

    var gotInput = function () {

      var page = parseInt($input.hide().val());

      if (!isNaN(page)) {

        goTo(page - 1);

      }

      $text.show();

    };

    /**

     * Update UI elements.

     *

     * @private

     */

    var updateUI = function () {

      var next = current + 1;

      // Disable or enable buttons

      $left.attr('disabled', current === 0);

      $right.attr('disabled', next === pages);

      // Update counter

      $text.html(l10n.currentPage.replace('$current', next).replace('$total', pages));

    };

    /**

     * Try to go to the requested page.

     *

     * @private

     * @param {Number} page

     */

    var goTo = function (page) {

      if (page === current || page < 0 || page >= pages) {

        return; // Invalid page number

      }

      current = page;

      updateUI();

      // Fire callback

      goneTo(page * limit);

    };

    /**

     * Update number of items and limit.

     *

     * @public

     * @param {Number} newNum Total number of items to pagiate.

     * @param {Number} newLimit Number of items to dispaly per page.

     */

    this.update = function (newNum, newLimit) {

      if (newNum !== num || newLimit !== limit) {

        // Update num and limit

        num = newNum;

        limit = newLimit;

        pages = Math.ceil(num / limit);

        $input.attr('max', pages);

        if (current >= pages) {

          // Content is gone, move to last page.

          goTo(pages - 1);

          return;

        }

        updateUI();

      }

    };

    /**

     * Append the pagination widget to the given container.

     *

     * @public

     * @param {jQuery} $container

     */

    this.appendTo = function ($container) {

      $left.add($text).add($input).add($right).appendTo($container);

    };

    // Update UI

    updateUI();

  };

})(H5P.jQuery);