moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-04 16:36:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-45054 Conditional availability: HTML structure improvements

Browse source 
1. Changed the 'delete' and 'eye' buttons to use an <a> link
tag so that it works without custom tabindex and shows a correct
mouse cursor. This also reduces the code slightly.

2. Changed the Cancel button on the dialog to use the mdl-align
class which is used in Atto dialogs. This results in the button
being centered, consistent with those dialogs.
This commit is contained in:
sam marshall 2014-04-30 15:28:03 +01:00
parent f500ff4e52
commit f67dd62820
4 changed files with 89 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

55
availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-debug.js vendored
View file

@ -572,7 +572,7 @@ M.core_availability.List.prototype.deleteDescendant = function(descendant) {
M.core_availability.List.prototype.clickAdd = function() { M.core_availability.List.prototype.clickAdd = function() {
var content = Y.Node.create('<div>' + var content = Y.Node.create('<div>' +
'<ul class="list-unstyled"></ul>' + '<ul class="list-unstyled"></ul>' +
'<div class="availability-buttons">' + '<div class="availability-buttons mdl-align">' +
'<button type="button" class="btn btn-default">' + M.str.moodle.cancel + '<button type="button" class="btn btn-default">' + M.str.moodle.cancel +
'</button></div></div>'); '</button></div></div>');
var cancel = content.one('button'); var cancel = content.one('button');
@ -927,42 +927,44 @@ M.core_availability.Item.prototype.pluginNode = null;
*/ */
M.core_availability.EyeIcon = function(individual, shown) { M.core_availability.EyeIcon = function(individual, shown) {
this.individual = individual; this.individual = individual;
this.span = Y.Node.create('<span class="availability-eye">'); this.span = Y.Node.create('<a class="availability-eye" href="#" role="button">');
var iconBase = M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev; var iconBase = M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev;
var hideButton = Y.Node.create('<img tabindex="0" role="button"/>'); var icon = Y.Node.create('<img />');
this.span.appendChild(icon);
// Set up button text and icon. // Set up button text and icon.
var suffix = individual ? '_individual' : '_all'; var suffix = individual ? '_individual' : '_all';
var setHidden = function() { var setHidden = function() {
hideButton.set('src', iconBase + '/t/show'); icon.set('src', iconBase + '/t/show');
hideButton.set('alt', M.str.availability['hidden' + suffix]); icon.set('alt', M.str.availability['hidden' + suffix]);
hideButton.set('title', M.str.availability['hidden' + suffix] + ' \u2022 ' + this.span.set('title', M.str.availability['hidden' + suffix] + ' \u2022 ' +
M.str.availability.show_verb); M.str.availability.show_verb);
}; };
var setShown = function() { var setShown = function() {
hideButton.set('src', iconBase + '/t/hide'); icon.set('src', iconBase + '/t/hide');
hideButton.set('alt', M.str.availability['shown' + suffix]); icon.set('alt', M.str.availability['shown' + suffix]);
hideButton.set('title', M.str.availability['shown' + suffix] + ' \u2022 ' + this.span.set('title', M.str.availability['shown' + suffix] + ' \u2022 ' +
M.str.availability.hide_verb); M.str.availability.hide_verb);
}; };
if(shown) { if(shown) {
setShown(); setShown.call(this);
} else { } else {
setHidden(); setHidden.call(this);
} }
// Update when button is clicked. // Update when button is clicked.
this.span.appendChild(hideButton); var click = function(e) {
var click = function() { e.preventDefault();
if (this.isHidden()) { if (this.isHidden()) {
setShown(); setShown.call(this);
} else { } else {
setHidden(); setHidden.call(this);
} }
M.core_availability.form.update(); M.core_availability.form.update();
}; };
hideButton.on('click', click, this); this.span.on('click', click, this);
hideButton.on('key', click, 'up:enter', this); this.span.on('key', click, 'up:32', this);
this.span.on('key', function(e) { e.preventDefault(); }, 'down:32', this);
}; };
/** /**
@ -1002,19 +1004,20 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
* @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
*/ */
M.core_availability.DeleteIcon = function(toDelete) { M.core_availability.DeleteIcon = function(toDelete) {
this.span = Y.Node.create('<span class="availability-delete">'); this.span = Y.Node.create('<a class="availability-delete" href="#" title="' +
var deleteButton = Y.Node.create('<img src="' + M.str.moodle['delete'] + '" role="button">');
var img = Y.Node.create('<img src="' +
M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev + M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev +
'/t/delete" alt="' + '/t/delete" alt="' + M.str.moodle['delete'] + '" />');
M.str.moodle['delete'] + '" title="' + M.str.moodle['delete'] + this.span.appendChild(img);
'" tabindex="0" role="button"/>'); var click = function(e) {
this.span.appendChild(deleteButton); e.preventDefault();
var click = function() {
M.core_availability.form.rootList.deleteDescendant(toDelete); M.core_availability.form.rootList.deleteDescendant(toDelete);
M.core_availability.form.rootList.renumber(); M.core_availability.form.rootList.renumber();
}; };
deleteButton.on('click', click, this); this.span.on('click', click, this);
deleteButton.on('key', click, 'up:enter', this); this.span.on('key', click, 'up:32', this);
this.span.on('key', function(e) { e.preventDefault(); }, 'down:32', this);
}; };
/** /**

4
availability/yui/build/moodle-core_availability-form/moodle-core_availability-form-min.js vendored
View file

File diff suppressed because one or more lines are too long

55
availability/yui/build/moodle-core_availability-form/moodle-core_availability-form.js vendored
View file

@ -572,7 +572,7 @@ M.core_availability.List.prototype.deleteDescendant = function(descendant) {
M.core_availability.List.prototype.clickAdd = function() { M.core_availability.List.prototype.clickAdd = function() {
var content = Y.Node.create('<div>' + var content = Y.Node.create('<div>' +
'<ul class="list-unstyled"></ul>' + '<ul class="list-unstyled"></ul>' +
'<div class="availability-buttons">' + '<div class="availability-buttons mdl-align">' +
'<button type="button" class="btn btn-default">' + M.str.moodle.cancel + '<button type="button" class="btn btn-default">' + M.str.moodle.cancel +
'</button></div></div>'); '</button></div></div>');
var cancel = content.one('button'); var cancel = content.one('button');
@ -927,42 +927,44 @@ M.core_availability.Item.prototype.pluginNode = null;
*/ */
M.core_availability.EyeIcon = function(individual, shown) { M.core_availability.EyeIcon = function(individual, shown) {
this.individual = individual; this.individual = individual;
this.span = Y.Node.create('<span class="availability-eye">'); this.span = Y.Node.create('<a class="availability-eye" href="#" role="button">');
var iconBase = M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev; var iconBase = M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev;
var hideButton = Y.Node.create('<img tabindex="0" role="button"/>'); var icon = Y.Node.create('<img />');
this.span.appendChild(icon);
// Set up button text and icon. // Set up button text and icon.
var suffix = individual ? '_individual' : '_all'; var suffix = individual ? '_individual' : '_all';
var setHidden = function() { var setHidden = function() {
hideButton.set('src', iconBase + '/t/show'); icon.set('src', iconBase + '/t/show');
hideButton.set('alt', M.str.availability['hidden' + suffix]); icon.set('alt', M.str.availability['hidden' + suffix]);
hideButton.set('title', M.str.availability['hidden' + suffix] + ' \u2022 ' + this.span.set('title', M.str.availability['hidden' + suffix] + ' \u2022 ' +
M.str.availability.show_verb); M.str.availability.show_verb);
}; };
var setShown = function() { var setShown = function() {
hideButton.set('src', iconBase + '/t/hide'); icon.set('src', iconBase + '/t/hide');
hideButton.set('alt', M.str.availability['shown' + suffix]); icon.set('alt', M.str.availability['shown' + suffix]);
hideButton.set('title', M.str.availability['shown' + suffix] + ' \u2022 ' + this.span.set('title', M.str.availability['shown' + suffix] + ' \u2022 ' +
M.str.availability.hide_verb); M.str.availability.hide_verb);
}; };
if(shown) { if(shown) {
setShown(); setShown.call(this);
} else { } else {
setHidden(); setHidden.call(this);
} }
// Update when button is clicked. // Update when button is clicked.
this.span.appendChild(hideButton); var click = function(e) {
var click = function() { e.preventDefault();
if (this.isHidden()) { if (this.isHidden()) {
setShown(); setShown.call(this);
} else { } else {
setHidden(); setHidden.call(this);
} }
M.core_availability.form.update(); M.core_availability.form.update();
}; };
hideButton.on('click', click, this); this.span.on('click', click, this);
hideButton.on('key', click, 'up:enter', this); this.span.on('key', click, 'up:32', this);
this.span.on('key', function(e) { e.preventDefault(); }, 'down:32', this);
}; };
/** /**
@ -1002,19 +1004,20 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
* @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
*/ */
M.core_availability.DeleteIcon = function(toDelete) { M.core_availability.DeleteIcon = function(toDelete) {
this.span = Y.Node.create('<span class="availability-delete">'); this.span = Y.Node.create('<a class="availability-delete" href="#" title="' +
var deleteButton = Y.Node.create('<img src="' + M.str.moodle['delete'] + '" role="button">');
var img = Y.Node.create('<img src="' +
M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev + M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev +
'/t/delete" alt="' + '/t/delete" alt="' + M.str.moodle['delete'] + '" />');
M.str.moodle['delete'] + '" title="' + M.str.moodle['delete'] + this.span.appendChild(img);
'" tabindex="0" role="button"/>'); var click = function(e) {
this.span.appendChild(deleteButton); e.preventDefault();
var click = function() {
M.core_availability.form.rootList.deleteDescendant(toDelete); M.core_availability.form.rootList.deleteDescendant(toDelete);
M.core_availability.form.rootList.renumber(); M.core_availability.form.rootList.renumber();
}; };
deleteButton.on('click', click, this); this.span.on('click', click, this);
deleteButton.on('key', click, 'up:enter', this); this.span.on('key', click, 'up:32', this);
this.span.on('key', function(e) { e.preventDefault(); }, 'down:32', this);
}; };
/** /**

55
availability/yui/src/form/js/form.js vendored
View file

@ -570,7 +570,7 @@ M.core_availability.List.prototype.deleteDescendant = function(descendant) {
M.core_availability.List.prototype.clickAdd = function() { M.core_availability.List.prototype.clickAdd = function() {
var content = Y.Node.create('<div>' + var content = Y.Node.create('<div>' +
'<ul class="list-unstyled"></ul>' + '<ul class="list-unstyled"></ul>' +
'<div class="availability-buttons">' + '<div class="availability-buttons mdl-align">' +
'<button type="button" class="btn btn-default">' + M.str.moodle.cancel + '<button type="button" class="btn btn-default">' + M.str.moodle.cancel +
'</button></div></div>'); '</button></div></div>');
var cancel = content.one('button'); var cancel = content.one('button');
@ -925,42 +925,44 @@ M.core_availability.Item.prototype.pluginNode = null;
*/ */
M.core_availability.EyeIcon = function(individual, shown) { M.core_availability.EyeIcon = function(individual, shown) {
this.individual = individual; this.individual = individual;
this.span = Y.Node.create('<span class="availability-eye">'); this.span = Y.Node.create('<a class="availability-eye" href="#" role="button">');
var iconBase = M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev; var iconBase = M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev;
var hideButton = Y.Node.create('<img tabindex="0" role="button"/>'); var icon = Y.Node.create('<img />');
this.span.appendChild(icon);
// Set up button text and icon. // Set up button text and icon.
var suffix = individual ? '_individual' : '_all'; var suffix = individual ? '_individual' : '_all';
var setHidden = function() { var setHidden = function() {
hideButton.set('src', iconBase + '/t/show'); icon.set('src', iconBase + '/t/show');
hideButton.set('alt', M.str.availability['hidden' + suffix]); icon.set('alt', M.str.availability['hidden' + suffix]);
hideButton.set('title', M.str.availability['hidden' + suffix] + ' \u2022 ' + this.span.set('title', M.str.availability['hidden' + suffix] + ' \u2022 ' +
M.str.availability.show_verb); M.str.availability.show_verb);
}; };
var setShown = function() { var setShown = function() {
hideButton.set('src', iconBase + '/t/hide'); icon.set('src', iconBase + '/t/hide');
hideButton.set('alt', M.str.availability['shown' + suffix]); icon.set('alt', M.str.availability['shown' + suffix]);
hideButton.set('title', M.str.availability['shown' + suffix] + ' \u2022 ' + this.span.set('title', M.str.availability['shown' + suffix] + ' \u2022 ' +
M.str.availability.hide_verb); M.str.availability.hide_verb);
}; };
if(shown) { if(shown) {
setShown(); setShown.call(this);
} else { } else {
setHidden(); setHidden.call(this);
} }
// Update when button is clicked. // Update when button is clicked.
this.span.appendChild(hideButton); var click = function(e) {
var click = function() { e.preventDefault();
if (this.isHidden()) { if (this.isHidden()) {
setShown(); setShown.call(this);
} else { } else {
setHidden(); setHidden.call(this);
} }
M.core_availability.form.update(); M.core_availability.form.update();
}; };
hideButton.on('click', click, this); this.span.on('click', click, this);
hideButton.on('key', click, 'up:enter', this); this.span.on('key', click, 'up:32', this);
this.span.on('key', function(e) { e.preventDefault(); }, 'down:32', this);
}; };
/** /**
@ -1000,19 +1002,20 @@ M.core_availability.EyeIcon.prototype.isHidden = function() {
* @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
*/ */
M.core_availability.DeleteIcon = function(toDelete) { M.core_availability.DeleteIcon = function(toDelete) {
this.span = Y.Node.create('<span class="availability-delete">'); this.span = Y.Node.create('<a class="availability-delete" href="#" title="' +
var deleteButton = Y.Node.create('<img src="' + M.str.moodle['delete'] + '" role="button">');
var img = Y.Node.create('<img src="' +
M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev + M.cfg.wwwroot + '/theme/image.php/' + M.cfg.theme + '/core/' + M.cfg.themerev +
'/t/delete" alt="' + '/t/delete" alt="' + M.str.moodle['delete'] + '" />');
M.str.moodle['delete'] + '" title="' + M.str.moodle['delete'] + this.span.appendChild(img);
'" tabindex="0" role="button"/>'); var click = function(e) {
this.span.appendChild(deleteButton); e.preventDefault();
var click = function() {
M.core_availability.form.rootList.deleteDescendant(toDelete); M.core_availability.form.rootList.deleteDescendant(toDelete);
M.core_availability.form.rootList.renumber(); M.core_availability.form.rootList.renumber();
}; };
deleteButton.on('click', click, this); this.span.on('click', click, this);
deleteButton.on('key', click, 'up:enter', this); this.span.on('key', click, 'up:32', this);
this.span.on('key', function(e) { e.preventDefault(); }, 'down:32', this);
}; };
/** /**