184 lines
5.9 KiB
JavaScript
184 lines
5.9 KiB
JavaScript
var H5P = H5P || {};
|
|
|
|
/**
|
|
* H5P Joubel UI library.
|
|
*
|
|
* This is a utility library, which does not implement attach. I.e, it has to bee actively used by
|
|
* other libraries
|
|
* @module
|
|
*/
|
|
H5P.JoubelUI = (function ($) {
|
|
|
|
/**
|
|
* The internal object to return
|
|
* @class H5P.JoubelUI
|
|
* @static
|
|
*/
|
|
function JoubelUI() {}
|
|
|
|
/* Public static functions */
|
|
|
|
/**
|
|
* Create a tip icon
|
|
* @method H5P.JoubelUI.createTip
|
|
* @param {string} text The textual tip
|
|
* @param {Object} params Parameters
|
|
* @return {H5P.JoubelTip}
|
|
*/
|
|
JoubelUI.createTip = function (text, params) {
|
|
return new H5P.JoubelTip(text, params);
|
|
};
|
|
|
|
/**
|
|
* Create message dialog
|
|
* @method H5P.JoubelUI.createMessageDialog
|
|
* @param {H5P.jQuery} $container The dom container
|
|
* @param {string} message The message
|
|
* @return {H5P.JoubelMessageDialog}
|
|
*/
|
|
JoubelUI.createMessageDialog = function ($container, message) {
|
|
return new H5P.JoubelMessageDialog($container, message);
|
|
};
|
|
|
|
/**
|
|
* Create help text dialog
|
|
* @method H5P.JoubelUI.createHelpTextDialog
|
|
* @param {string} header The textual header
|
|
* @param {string} message The textual message
|
|
* @param {string} closeButtonTitle The title for the close button
|
|
* @return {H5P.JoubelHelpTextDialog}
|
|
*/
|
|
JoubelUI.createHelpTextDialog = function (header, message, closeButtonTitle) {
|
|
return new H5P.JoubelHelpTextDialog(header, message, closeButtonTitle);
|
|
};
|
|
|
|
/**
|
|
* Create progress circle
|
|
* @method H5P.JoubelUI.createProgressCircle
|
|
* @param {number} number The progress (0 to 100)
|
|
* @param {string} progressColor The progress color in hex value
|
|
* @param {string} fillColor The fill color in hex value
|
|
* @param {string} backgroundColor The background color in hex value
|
|
* @return {H5P.JoubelProgressCircle}
|
|
*/
|
|
JoubelUI.createProgressCircle = function (number, progressColor, fillColor, backgroundColor) {
|
|
return new H5P.JoubelProgressCircle(number, progressColor, fillColor, backgroundColor);
|
|
};
|
|
|
|
/**
|
|
* Create throbber for loading
|
|
* @method H5P.JoubelUI.createThrobber
|
|
* @return {H5P.JoubelThrobber}
|
|
*/
|
|
JoubelUI.createThrobber = function () {
|
|
return new H5P.JoubelThrobber();
|
|
};
|
|
|
|
/**
|
|
* Create simple rounded button
|
|
* @method H5P.JoubelUI.createSimpleRoundedButton
|
|
* @param {string} text The button label
|
|
* @return {H5P.SimpleRoundedButton}
|
|
*/
|
|
JoubelUI.createSimpleRoundedButton = function (text) {
|
|
return new H5P.SimpleRoundedButton(text);
|
|
};
|
|
|
|
/**
|
|
* Create Slider
|
|
* @method H5P.JoubelUI.createSlider
|
|
* @param {Object} [params] Parameters
|
|
* @return {H5P.JoubelSlider}
|
|
*/
|
|
JoubelUI.createSlider = function (params) {
|
|
return new H5P.JoubelSlider(params);
|
|
};
|
|
|
|
/**
|
|
* Create Score Bar
|
|
* @method H5P.JoubelUI.createScoreBar
|
|
* @param {number=} maxScore The maximum score
|
|
* @param {string} [label] Makes it easier for readspeakers to identify the scorebar
|
|
* @return {H5P.JoubelScoreBar}
|
|
*/
|
|
JoubelUI.createScoreBar = function (maxScore, label, helpText, scoreExplanationButtonLabel) {
|
|
return new H5P.JoubelScoreBar(maxScore, label, helpText, scoreExplanationButtonLabel);
|
|
};
|
|
|
|
/**
|
|
* Create Progressbar
|
|
* @method H5P.JoubelUI.createProgressbar
|
|
* @param {number=} numSteps The total numer of steps
|
|
* @param {Object} [options] Additional options
|
|
* @param {boolean} [options.disableAria] Disable readspeaker assistance
|
|
* @param {string} [options.progressText] A progress text for describing
|
|
* current progress out of total progress for readspeakers.
|
|
* e.g. "Slide :num of :total"
|
|
* @return {H5P.JoubelProgressbar}
|
|
*/
|
|
JoubelUI.createProgressbar = function (numSteps, options) {
|
|
return new H5P.JoubelProgressbar(numSteps, options);
|
|
};
|
|
|
|
/**
|
|
* Create standard Joubel button
|
|
*
|
|
* @method H5P.JoubelUI.createButton
|
|
* @param {object} params
|
|
* May hold any properties allowed by jQuery. If href is set, an A tag
|
|
* is used, if not a button tag is used.
|
|
* @return {H5P.jQuery} The jquery element created
|
|
*/
|
|
JoubelUI.createButton = function(params) {
|
|
var type = 'button';
|
|
if (params.href) {
|
|
type = 'a';
|
|
}
|
|
else {
|
|
params.type = 'button';
|
|
}
|
|
if (params.class) {
|
|
params.class += ' h5p-joubelui-button';
|
|
}
|
|
else {
|
|
params.class = 'h5p-joubelui-button';
|
|
}
|
|
return $('<' + type + '/>', params);
|
|
};
|
|
|
|
/**
|
|
* Fix for iframe scoll bug in IOS. When focusing an element that doesn't have
|
|
* focus support by default the iframe will scroll the parent frame so that
|
|
* the focused element is out of view. This varies dependening on the elements
|
|
* of the parent frame.
|
|
*/
|
|
if (H5P.isFramed && !H5P.hasiOSiframeScrollFix &&
|
|
/iPad|iPhone|iPod/.test(navigator.userAgent)) {
|
|
H5P.hasiOSiframeScrollFix = true;
|
|
|
|
// Keep track of original focus function
|
|
var focus = HTMLElement.prototype.focus;
|
|
|
|
// Override the original focus
|
|
HTMLElement.prototype.focus = function () {
|
|
// Only focus the element if it supports it natively
|
|
if ( (this instanceof HTMLAnchorElement ||
|
|
this instanceof HTMLInputElement ||
|
|
this instanceof HTMLSelectElement ||
|
|
this instanceof HTMLTextAreaElement ||
|
|
this instanceof HTMLButtonElement ||
|
|
this instanceof HTMLIFrameElement ||
|
|
this instanceof HTMLAreaElement) && // HTMLAreaElement isn't supported by Safari yet.
|
|
!this.getAttribute('role')) { // Focus breaks if a different role has been set
|
|
// In theory this.isContentEditable should be able to recieve focus,
|
|
// but it didn't work when tested.
|
|
|
|
// Trigger the original focus with the proper context
|
|
focus.call(this);
|
|
}
|
|
};
|
|
}
|
|
|
|
return JoubelUI;
|
|
})(H5P.jQuery);
|