htwkmooc/codeocean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Bootstrap from v4 to v5

Browse Source
This commit is contained in:
Sebastian Serth
2022-08-11 19:10:49 +02:00
parent 6803efc023
commit 8a055a0d68
84 changed files with 559 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/bootstrap-dropdown-submenu.js vendored
View File

@@ -1,6 +1,6 @@
$(document).on('turbolinks:load', function() {
var subMenusSelector = 'ul.dropdown-menu [data-toggle=dropdown]';
var subMenusSelector = 'ul.dropdown-menu [data-bs-toggle=dropdown]';
function openSubMenu(event) {
if (this.pathname === '/') {

2
app/assets/javascripts/codeharbor_link.js
View File

@@ -1,5 +1,5 @@
$(document).on('turbolinks:load', function() {
$('[data-toggle="tooltip"]').tooltip();
$('[data-bs-toggle="tooltip"]').tooltip();
if($.isController('codeharbor_links')) {
if ($('.edit_codeharbor_link, .new_codeharbor_link').isPresent()) {

11
app/assets/javascripts/editor.js
View File

@@ -15,12 +15,9 @@ $(document).on('turbolinks:load', function(event) {
);
if ($('#editor').isPresent() && CodeOceanEditor && event.originalEvent.data.url.includes("/implement")) {
if (CodeOceanEditor.isBrowserSupported()) {
$('#alert').hide();
// This call will (amon other things) initializeEditors and load the content except for the last line
// It must not be called during page navigation. Otherwise, content will be duplicated!
// Search for insertLines and Turbolinks reload / cache control
CodeOceanEditor.initializeEverything();
}
// This call will (amon other things) initializeEditors and load the content except for the last line
// It must not be called during page navigation. Otherwise, content will be duplicated!
// Search for insertLines and Turbolinks reload / cache control
CodeOceanEditor.initializeEverything();
}
});

46
app/assets/javascripts/editor/editor.js.erb
View File

@@ -78,7 +78,7 @@ var CodeOceanEditor = {
if ($('#output-' + index).isPresent()) {
return $('#output-' + index);
} else {
var element = $('<pre class="mt-2">').attr('id', 'output-' + index);
var element = $('<pre class="mb-2">').attr('id', 'output-' + index);
$('#output').append(element);
return element;
}
@@ -235,10 +235,20 @@ var CodeOceanEditor = {
window.dispatchEvent(new Event('resize'));
},
resizeParentOfAceEditor: function (element) {
resizeSidebars: function () {
$('#content-left-sidebar').height(this.calculateEditorHeight('#content-left-sidebar', false));
$('#content-right-sidebar').height(this.calculateEditorHeight('#content-right-sidebar', false));
},
calculateEditorHeight: function (element, considerStatusbar) {
let bottom = considerStatusbar ? ($('#statusbar').height() || 0) : 0;
// calculate needed size: window height - position of top of ACE editor - height of autosave label below editor - 5 for bar margins
var windowHeight = window.innerHeight - $(element).offset().top - ($('#statusbar').height() || 0) - 5;
$(element).parent().height(windowHeight);
return window.innerHeight - $(element).offset().top - bottom - 5;
},
resizeParentOfAceEditor: function (element) {
const editorHeight = this.calculateEditorHeight(element, true);
$(element).parent().height(editorHeight);
},
initializeEditors: function (own_solution = false) {
@@ -259,6 +269,7 @@ var CodeOceanEditor = {
// Resize frame on window size change
$(window).resize(function () {
this.resizeParentOfAceEditor(element);
this.resizeSidebars();
}.bind(this));
var editor = ace.edit(element);
@@ -390,6 +401,7 @@ var CodeOceanEditor = {
tipButton.on('click', this.handleSideBarToggle.bind(this));
}
$('#sidebar').on('transitionend', this.resizeAceEditors.bind(this));
$('#sidebar').on('transitionend', this.resizeSidebars.bind(this));
},
handleSideBarToggle: function () {
@@ -433,12 +445,12 @@ var CodeOceanEditor = {
button.prop('disabled', true);
button.on('click', function () {
$('#rfc_intervention_text').hide()
$('#comment-modal').modal('show');
new bootstrap.Modal($('#comment-modal')).show();
});
$('#askForCommentsButton').on('click', this.requestComments.bind(this));
$('#closeAskForCommentsButton').on('click', function () {
$('#comment-modal').modal('hide');
bootstrap.Modal.getInstance($('#comment-modal')).hide();
});
setTimeout(function () {
@@ -475,12 +487,6 @@ var CodeOceanEditor = {
return this.isActiveFileExecutable() && ['teacher_defined_test', 'user_defined_test', 'teacher_defined_linter'].includes(this.active_frame.data('role'));
},
isBrowserSupported: function () {
// websockets are used for run, score and test
// Also exclude IE and IE 11
return Modernizr.websockets && window.navigator.userAgent.indexOf("MSIE") <= 0 && !navigator.userAgent.match(/Trident\/7\./);
},
populateCard: function (card, result, index) {
card.addClass(this.getCardClass(result));
card.find('.card-title .filename').text(result.filename);
@@ -778,7 +784,7 @@ var CodeOceanEditor = {
event.preventDefault();
this.createSubmission('#create-file', null, function (response) {
$('#code_ocean_file_context_id').val(response.id);
$('#modal-file').modal('show');
new bootstrap.Modal($('#modal-file')).show();
}.bind(this));
},
@@ -786,6 +792,7 @@ var CodeOceanEditor = {
$('#toggle-sidebar-output').on('click', this.hideOutputBar.bind(this));
$('#toggle-sidebar-output-collapsed').on('click', this.showOutputBar.bind(this));
$('#output_sidebar').on('transitionend', this.resizeAceEditors.bind(this));
$('#output_sidebar').on('transitionend', this.resizeSidebars.bind(this));
},
showOutputBar: function () {
@@ -801,7 +808,7 @@ var CodeOceanEditor = {
},
initializeSideBarTooltips: function () {
$('[data-toggle="tooltip"]').tooltip()
$('[data-bs-toggle="tooltip"]').tooltip()
},
initializeDescriptionToggle: function () {
@@ -809,12 +816,13 @@ var CodeOceanEditor = {
$('a#toggle').on('click', this.toggleDescriptionCard.bind(this));
},
toggleDescriptionCard: function () {
toggleDescriptionCard: function (event) {
$('#description-card').toggleClass('description-card-collapsed').toggleClass('description-card');
$('#description-symbol').toggleClass('fa-chevron-down').toggleClass('fa-chevron-right');
var toggle = $('a#toggle');
toggle.text(toggle.text() == toggle.data('hide') ? toggle.data('show') : toggle.data('hide'));
this.resizeAceEditors();
this.resizeSidebars();
event.preventDefault();
},
@@ -871,7 +879,7 @@ var CodeOceanEditor = {
if (editor.data('tips-interventions')) {
const modal = $('#tips-intervention-modal');
modal.find('.modal-footer').html(I18n.t("exercises.implement.intervention.explanation", {duration: Math.round(percentile75 / 60)}));
modal.modal('show');
new bootstrap.Modal(modal).show();
$.ajax({
data: {
intervention_type: 'TipsIntervention'
@@ -883,7 +891,7 @@ var CodeOceanEditor = {
} else if (editor.data('break-interventions')) {
const modal = $('#break-intervention-modal');
modal.find('.modal-footer').html(I18n.t("exercises.implement.intervention.explanation", {duration: Math.round(percentile75 / 60)}));
modal.modal('show');
new bootstrap.Modal(modal).show();
$.ajax({
data: {
intervention_type: 'BreakIntervention'
@@ -902,7 +910,7 @@ var CodeOceanEditor = {
modal.on('hidden.bs.modal', function () {
modal.find('.modal-footer').text('');
});
modal.modal('show');
new bootstrap.Modal(modal).show();
$.ajax({
data: {
intervention_type: 'QuestionIntervention'
@@ -945,7 +953,6 @@ var CodeOceanEditor = {
CodeOceanEditor.editors = [];
this.initializeRegexes();
this.initializeCodePilot();
$('.score, #development-environment').show();
this.configureEditors();
this.initializeEditors();
this.initializeEventHandlers();
@@ -961,6 +968,7 @@ var CodeOceanEditor = {
this.renderScore();
this.showFirstFile();
this.resizeAceEditors();
this.resizeSidebars();
this.initializeDeadlines();
CodeOceanEditorTips.initializeEventHandlers();

10
app/assets/javascripts/editor/participantsupport.js.erb
View File

@@ -4,7 +4,7 @@ CodeOceanEditorFlowr = {
'<div class="card mb-2">' +
'<div id="{{headingId}}" role="tab" class="card-header">' +
'<div class="card-title mb-0">' +
'<a class="collapsed" data-toggle="collapse" data-parent="#flowrHint" href="#{{collapseId}}" aria-expanded="false" aria-controls="{{collapseId}}">' +
'<a class="collapsed" data-bs-toggle="collapse" data-bs-parent="#flowrHint" href="#{{collapseId}}" aria-expanded="false" aria-controls="{{collapseId}}">' +
'<div class="clearfix" role="button">' +
'<i class="fa-solid" aria-hidden="true"></i>' +
'<span>' +
@@ -14,7 +14,7 @@ CodeOceanEditorFlowr = {
'</div>' +
'</div>' +
'<div id="{{collapseId}}" role="tabpanel" aria-labelledby="{{headingId}}" class="card card-collapse collapse">' +
'<div class="card-body"></div>' +
'<div class="card-body d-grid gap-2"></div>' +
'</div>' +
'</div>',
@@ -93,7 +93,7 @@ CodeOceanEditorFlowr = {
var body = resultTile.find('.card-body');
body.html(result.body);
body.append('<a target="_blank" href="' + questionUrl + '" class="btn btn-primary btn-block">' +
body.append('<a target="_blank" href="' + questionUrl + '" class="btn btn-primary">' +
'<%= I18n.t('exercises.implement.flowr.go_to_question') %></a>');
body.find('.btn').on('click', CodeOceanEditor.createEventHandler('editor_flowr_click_question', questionUrl));
@@ -112,7 +112,7 @@ CodeOceanEditorCodePilot = {
QaApiOutputBuffer: {'stdout': '', 'stderr': ''},
initializeCodePilot: function () {
if ($('#questions-column').isPresent() && (typeof QaApi != 'undefined') && QaApi.isBrowserSupported()) {
if ($('#questions-column').isPresent() && (typeof QaApi != 'undefined')) {
$('#editor-column').addClass('col-md-10').removeClass('col-md-12');
$('#questions-column').addClass('col-md-2');
@@ -161,7 +161,7 @@ CodeOceanEditorRequestForComments = {
this.createSubmission($('#requestComments'), null, createRequestForComments.bind(this));
$('#comment-modal').modal('hide');
bootstrap.Modal.getInstance($('#comment-modal')).hide();
$('#question').val('');
// we disabled the button to prevent that the user spams RFCs, but decided against this now.
//var button = $('#requestComments');

11
app/assets/javascripts/editor/turtle.js
View File

@@ -37,15 +37,16 @@ CodeOceanEditorTurtle = {
},
showCanvas: function () {
if ($('#turtlediv').isPresent() && this.turtlecanvas.hasClass('d-none')) {
this.turtlecanvas.removeClass('d-none');
const turtlediv = $('#turtlediv');
if (turtlediv.isPresent() && turtlediv.hasClass('d-none')) {
turtlediv.removeClass('d-none');
}
},
hideCanvas: function () {
const turtlecanvas = $('#turtlecanvas');
if ($('#turtlediv').isPresent() && !turtlecanvas.hasClass('d-none')) {
turtlecanvas.addClass('d-none');
const turtlediv = $('#turtlediv');
if (turtlediv.isPresent() && !turtlediv.hasClass('d-none')) {
turtlediv.addClass('d-none');
}
}

2
app/assets/javascripts/exercise_collections.js.erb
View File

@@ -187,7 +187,7 @@ $(document).on('turbolinks:load', function() {
for (var i = 0; i < selectedExercises.length; i++) {
addExercise(selectedExercises[i].value, selectedExercises[i].label);
}
$('#add-exercise-modal').modal('hide')
bootstrap.Modal.getInstance($('#add-exercise-modal')).hide();
updateExerciseList();
addExercisesForm.find('select').val('').trigger("chosen:updated");
});

19
app/assets/javascripts/exercises.js.erb
View File

@@ -123,7 +123,7 @@ $(document).on('turbolinks:load', function () {
var buildCheckboxes = function () {
$('tbody tr').each(function (index, element) {
var td = $('td.public', element);
var checkbox = $('<input>', {
var checkbox = $('<input class="form-check-input">', {
checked: td.data('value'),
type: 'checkbox'
});
@@ -225,9 +225,9 @@ $(document).on('turbolinks:load', function () {
const tip = {id: id, title: title}
const template =
'<div class="list-group-item d-block" data-tip-id=' + tip.id + ' data-id="">' +
'<span class="fa-solid fa-bars mr-3"></span>' + tip.title +
'<a class="fa-regular fa-eye ml-2" href="/tips/' + tip.id + '" target="_blank"></a>' +
'<a class="fa-solid fa-xmark ml-2 remove-tip" href="#""></a>' +
'<span class="fa-solid fa-bars me-3"></span>' + tip.title +
'<a class="fa-regular fa-eye ms-2" href="/tips/' + tip.id + '" target="_blank"></a>' +
'<a class="fa-solid fa-xmark ms-2 remove-tip" href="#""></a>' +
'<div class="list-group nested-sortable-list"></div>' +
'</div>';
const tipList = $('#tip-list').append(template);
@@ -243,7 +243,7 @@ $(document).on('turbolinks:load', function () {
for (let i = 0; i < selectedTips.length; i++) {
addTip(selectedTips[i].value, selectedTips[i].label);
}
$('#add-tips-modal').modal('hide')
bootstrap.Modal.getInstance($('#add-tips-modal')).hide();
updateTipsJSON();
chosenInputTips.val('').trigger("chosen:updated");
});
@@ -328,10 +328,7 @@ $(document).on('turbolinks:load', function () {
var observeExportButtons = function () {
$('.export-start').on('click', function (e) {
e.preventDefault();
$('#export-modal').modal({
height: 250
});
$('#export-modal').modal('show');
new bootstrap.Modal($('#export-modal')).show();
exportExerciseStart($(this).data().exerciseId);
});
$('body').on('click', '.export-retry-button', function () {
@@ -382,7 +379,7 @@ $(document).on('turbolinks:load', function () {
if (response.status == 'success') {
$messageDiv.addClass('export-success');
setTimeout((function () {
$('#export-modal').modal('hide');
bootstrap.Modal.getInstance($('#export-modal')).hide();
$messageDiv.html('').removeClass('export-success');
}), 3000);
} else {
@@ -396,7 +393,7 @@ $(document).on('turbolinks:load', function () {
};
var overrideTextareaTabBehavior = function () {
$('.form-group textarea[name$="[content]"]').on('keydown', function (event) {
$('.mb-3 textarea[name$="[content]"]').on('keydown', function (event) {
if (event.which === TAB_KEY_CODE) {
event.preventDefault();
insertTabAtCursor($(this));

2
app/assets/javascripts/forms.js
View File

@@ -9,7 +9,7 @@ $(document).on('turbolinks:load', function() {
event.preventDefault();
if (!$(this).hasClass('disabled')) {
var parent = $(this).parents('.form-group');
var parent = $(this).parents('.mb-3');
var original_input = parent.find('.original-input');
var alternative_input = parent.find('.alternative-input');

24
app/assets/javascripts/pagedown/markdown.editor.js.erb
View File

@@ -1018,7 +1018,7 @@
text = 'http://' + text;
}
$(dialog).modal('hide');
bootstrap.Modal.getInstance($(dialog)).hide();
callback(text);
return false;
@@ -1032,7 +1032,7 @@
// <div class="modal-dialog">
// <div class="modal-content">
// <div class="modal-header">
// <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
// <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
// <h3 class="modal-title">Modal title</h3>
// </div>
// <div class="modal-body">
@@ -1062,7 +1062,7 @@
// The header.
var header = doc.createElement("div");
header.className = "modal-header";
header.innerHTML = '<h3 class="modal-title">'+title+'</h3> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
header.innerHTML = '<h3 class="modal-title">'+title+'</h3> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>';
dialogContent.appendChild(header);
// The body.
@@ -1082,7 +1082,7 @@
// The input text box
var formGroup = doc.createElement("div");
formGroup.className = "form-group";
formGroup.className = "mb-3";
form.appendChild(formGroup);
var label = doc.createElement("label");
@@ -1144,15 +1144,15 @@
range.select();
}
$(dialog).on('shown', function () {
$(dialog).on('shown.bs.modal', function () {
input.focus();
});
$(dialog).on('hidden', function () {
$(dialog).on('hidden.bs.modal', function () {
dialog.parentNode.removeChild(dialog);
});
$(dialog).modal()
new bootstrap.Modal($(dialog)).show();
}, 0);
};
@@ -1360,8 +1360,8 @@
button.appendChild(buttonImage);
button.id = id + postfix;
button.title = title;
button.setAttribute("data-toggle", "tooltip");
button.setAttribute("data-placement", "top");
button.setAttribute("data-bs-toggle", "tooltip");
button.setAttribute("data-bs-placement", "top");
if (textOp)
button.textOp = textOp;
setupButton(button, true);
@@ -1416,7 +1416,7 @@
if (helpOptions) {
var group5 = makeGroup(5);
group5.className = group5.className + " ml-auto";
group5.className = group5.className + " ms-auto";
var helpButton = document.createElement("button");
var helpButtonImage = document.createElement("i");
helpButtonImage.className = "m-1 fa-solid fa-info";
@@ -1424,8 +1424,8 @@
helpButton.className = "btn btn-info btn-sm";
helpButton.id = "wmd-help-button" + postfix;
helpButton.isHelp = true;
helpButton.setAttribute("data-toggle", "tooltip");
helpButton.setAttribute("data-placement", "top");
helpButton.setAttribute("data-bs-toggle", "tooltip");
helpButton.setAttribute("data-bs-placement", "top");
helpButton.title = helpOptions.title || defaultHelpHoverTitle;
helpButton.onclick = helpOptions.handler;

2
app/assets/javascripts/pagedown/pagedown.js.erb
View File

@@ -32,7 +32,7 @@ createPagedownEditor = function( selector, context ) {
const editor = new Markdown.Editor(converter, attr, help);
editor.run();
$('[data-toggle="tooltip"]').tooltip();
$('[data-bs-toggle="tooltip"]').tooltip();
return $(input).data('is_rendered', true);
});
};