From b6f711b6717a10a81f98a29f89ad0a60dda98528 Mon Sep 17 00:00:00 2001
From: David Siegfried <david.siegfried@uni-vechta.de>
Date: Tue, 12 Jul 2022 18:15:13 +0000
Subject: [PATCH] fix a11y stuff in individual rooms-groups, closes #1094
Closes #1094
Merge request studip/studip!651
---
.../sidebar/RoomClipboardWidget.class.php | 17 +-
.../assets/javascripts/bootstrap/clipboard.js | 145 ++++++--------
.../assets/javascripts/bootstrap/resources.js | 2 +-
.../assets/javascripts/lib/actionmenu.js | 23 ++-
resources/assets/javascripts/lib/clipboard.js | 187 ++++++++----------
.../assets/stylesheets/less/clipboard.less | 18 +-
.../assets/stylesheets/scss/resources.scss | 5 -
templates/sidebar/clipboard-area.php | 65 +++---
templates/sidebar/clipboard-widget.php | 4 +-
templates/sidebar/room-clipboard-item.php | 66 +++----
templates/sidebar/room-clipboard-widget.php | 9 +-
11 files changed, 221 insertions(+), 320 deletions(-)
diff --git a/lib/classes/sidebar/RoomClipboardWidget.class.php b/lib/classes/sidebar/RoomClipboardWidget.class.php
index cf6b9672272..da5146a9cd5 100644
--- a/lib/classes/sidebar/RoomClipboardWidget.class.php
+++ b/lib/classes/sidebar/RoomClipboardWidget.class.php
@@ -13,9 +13,6 @@ class RoomClipboardWidget extends ClipboardWidget
{
public function __construct()
{
- $all_classes = get_declared_classes();
- $allowed_item_classes = [];
-
parent::__construct(['Room']);
$this->setTitle(_('Individuelle Raumgruppen'));
@@ -38,9 +35,11 @@ class RoomClipboardWidget extends ClipboardWidget
_('Raumgruppe buchen'),
URLHelper::getURL('dispatch.php/resources/booking/add/clipboard_CLIPBOARD_ID'),
Icon::create('link-intern'),
- ['class' => 'room-clipboard-group-action',
- 'data-show_in_dialog' => 'size=auto',
- 'data-needs_items'=> '1']
+ [
+ 'class' => 'room-clipboard-group-action',
+ 'data-show_in_dialog' => 'size=auto',
+ 'data-needs_items '=> '1'
+ ]
);
}
if (ResourceManager::userHasGlobalPermission($current_user, 'admin')) {
@@ -48,8 +47,10 @@ class RoomClipboardWidget extends ClipboardWidget
_('Berechtigungen für die gesamte Raumgruppe setzen'),
URLHelper::getURL('dispatch.php/resources/room_group/permissions/CLIPBOARD_ID'),
Icon::create('link-intern'),
- ['class' => 'room-clipboard-group-action',
- 'data-show_in_dialog' => '1']
+ [
+ 'class' => 'room-clipboard-group-action',
+ 'data-show_in_dialog' => '1'
+ ]
);
}
}
diff --git a/resources/assets/javascripts/bootstrap/clipboard.js b/resources/assets/javascripts/bootstrap/clipboard.js
index 0b6c2711a5a..e525b356744 100644
--- a/resources/assets/javascripts/bootstrap/clipboard.js
+++ b/resources/assets/javascripts/bootstrap/clipboard.js
@@ -1,95 +1,74 @@
-STUDIP.domReady(function() {
- jQuery('.clipboard-draggable-item').draggable(
- {
- cursorAt: {left: 28, top: 15},
- appendTo: 'body',
- helper: function () {
- var dragged_item = jQuery('<div class="dragged-clipboard-item"></div>');
- jQuery(dragged_item).data('id', jQuery(this).data('id'));
- jQuery(dragged_item).data('range_type', jQuery(this).data('range_type'));
- jQuery(dragged_item).text(jQuery(this).data('name'));
- return dragged_item;
- },
- revert: true,
- revertDuration: 0
- }
- );
+STUDIP.domReady(function () {
+ jQuery('.clipboard-draggable-item').draggable({
+ cursorAt: {left: 28, top: 15}, appendTo: 'body', helper: function () {
+ let dragged_item = jQuery('<div class="dragged-clipboard-item"></div>');
+ jQuery(dragged_item).data('id', jQuery(this).data('id'));
+ jQuery(dragged_item).data('range_type', jQuery(this).data('range_type'));
+ jQuery(dragged_item).text(jQuery(this).data('name'));
+ return dragged_item;
+ }, revert: true, revertDuration: 0
+ });
- jQuery('.clipboard-area').droppable(
- {
- drop: STUDIP.Clipboard.handleItemDrop
- }
- );
+ jQuery('.clipboard-area').droppable({
+ drop: STUDIP.Clipboard.handleItemDrop
+ });
- jQuery('.clipboard-selector').change(
- STUDIP.Clipboard.switchClipboard
- );
+ jQuery(document).on('click', '.clipboard-edit-button, .clipboard-edit-cancel', function (event) {
+ event.preventDefault();
+ STUDIP.Clipboard.toggleEditButtons($(this).data('widget-id'));
+ })
- jQuery(document).on(
- 'change',
- '.clipboard-selector',
- STUDIP.Clipboard.switchClipboard
- );
+ jQuery(document).on('click', '.clipboard-edit-accept', function (event) {
+ event.preventDefault();
+ STUDIP.Clipboard.rename($(this).data('widget-id'));
+ });
- jQuery(document).on(
- 'dragend',
- '.clipboard-draggable-item',
- function(event) {
- jQuery(event.target).css(
- {
- 'top': '0px',
- 'left': '0px'
- }
- );
- }
- );
+ jQuery(document).on('click', '.clipboard-remove-button', function (event) {
+ event.preventDefault();
+ STUDIP.Dialog.confirm($(this).data('confirm-message'), function() {
+ STUDIP.Clipboard.handleRemoveClick(event.target);
+ });
+ });
- jQuery(document).on(
- 'dragover',
- '.clipboard-area',
- function(event) {
- event.preventDefault();
- event.stopPropagation();
- }
- );
+ jQuery(document).on('change', '.clipboard-selector', function (event) {
+ STUDIP.Clipboard.switchClipboard(event);
+ });
- jQuery(document).on(
- 'dragenter',
- '.clipboard-area',
- function(event) {
- //TODO:rrv2: use CSS classes!
- event.target.style.backgroundColor = '#0F0';
- }
- );
+ jQuery(document).on('dragend', '.clipboard-draggable-item', function (event) {
+ jQuery(this).css({
+ 'top': '0px', 'left': '0px'
+ });
+ });
- jQuery(document).on(
- 'dragleave',
- '.clipboard-area',
- function(event) {
- //TODO:rrv2: use CSS classes!
- event.target.style.backgroundColor = '#FFF';
- }
- );
+ jQuery(document).on('dragover', '.clipboard-area', function (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ });
- jQuery(document).on(
- 'click',
- '.clipboard-remove-button',
- STUDIP.Clipboard.confirmRemoveClick
- );
+ jQuery(document).on('dragenter', '.clipboard-area', function (event) {
+ //TODO:rrv2: use CSS classes!
+ event.target.style.backgroundColor = '#0F0';
+ });
- jQuery(document).on(
- 'click',
- '.clipboard-item-remove-button',
- STUDIP.Clipboard.confirmRemoveItemClick
- );
+ jQuery(document).on('dragleave', '.clipboard-area', function (event) {
+ //TODO:rrv2: use CSS classes!
+ event.target.style.backgroundColor = '#FFF';
+ });
- jQuery('.clipboard-widget .new-clipboard-form').submit(
- STUDIP.Clipboard.handleAddForm
- );
+ jQuery(document).on('click', '.clipboard-item-remove-button', function (event) {
+ event.preventDefault();
+ STUDIP.Dialog.confirm($(this).data('confirm-message'), function() {
+ STUDIP.Clipboard.removeItem(event.target)
+ });
+ });
- jQuery(document).on(
- 'click',
- '.clipboard-add-item-button',
- STUDIP.Clipboard.handleAddItemButtonClick
- );
+ jQuery(document).on('submit', '.clipboard-widget .new-clipboard-form', function (event) {
+ event.preventDefault();
+ STUDIP.Clipboard.handleAddForm(event);
+ });
+
+ jQuery(document).on('click', '.clipboard-add-item-button', function (event) {
+ event.preventDefault();
+ STUDIP.Clipboard.handleAddItemButtonClick(event);
+ });
});
diff --git a/resources/assets/javascripts/bootstrap/resources.js b/resources/assets/javascripts/bootstrap/resources.js
index 908593b8e97..c5370dfe0df 100644
--- a/resources/assets/javascripts/bootstrap/resources.js
+++ b/resources/assets/javascripts/bootstrap/resources.js
@@ -968,7 +968,7 @@ STUDIP.domReady(function() {
}
}
- var url_path = jQuery(event.target).data('url_path');
+ var url_path = jQuery(event.target).attr('href');
url_path = url_path.replace(/CLIPBOARD_ID/, clipboard_id);
var complete_url = STUDIP.URLHelper.getURL(
diff --git a/resources/assets/javascripts/lib/actionmenu.js b/resources/assets/javascripts/lib/actionmenu.js
index bcbdf046eae..730cbae7ecf 100644
--- a/resources/assets/javascripts/lib/actionmenu.js
+++ b/resources/assets/javascripts/lib/actionmenu.js
@@ -13,7 +13,7 @@ function getScrollableParents(element, menu_width, menu_height) {
const offset = $(element).offset();
const breakpoint = determineBreakpoint(element);
- var elements = [];
+ let elements = [];
$(element).parents().each(function () {
// Stop at breakpoint
if ($(this).is(breakpoint)) {
@@ -110,9 +110,6 @@ class ActionMenu {
throw new Error('Cannot create ActionMenu. Use ActionMenu.create()!');
}
- const offset = $(element).offset();
- const height = $('.action-menu-content').height();
- const width = $('.action-menu-content').width();
const breakpoint = determineBreakpoint(element);
this.element = $(element);
@@ -120,13 +117,12 @@ class ActionMenu {
this.content = $('.action-menu-content', element);
this.is_reversed = reversed;
this.is_open = false;
-
const menu_width = this.content.width();
const menu_height = this.content.height();
// Reposition the menu?
if (position) {
- var parents = getScrollableParents(this.element, menu_width, menu_height);
+ let parents = getScrollableParents(this.element, menu_width, menu_height);
if (parents.length > 0) {
this.menu = $('<div class="action-menu-wrapper">').append(this.content.remove());
$('.action-menu-icon', element).clone().data('action-menu-element', element).prependTo(this.menu);
@@ -138,7 +134,7 @@ class ActionMenu {
// Always add breakpoint
parents.push(breakpoint);
parents.forEach((parent, index) => {
- var data = $(parent).data('action-menu-scroll-data') || {
+ let data = $(parent).data('action-menu-scroll-data') || {
menus: [],
left: parent.scrollLeft,
top: parent.scrollTop
@@ -153,7 +149,6 @@ class ActionMenu {
});
}
}
-
this.update();
}
@@ -185,6 +180,10 @@ class ActionMenu {
this.is_open = state === null ? !this.is_open : state;
this.update();
+
+ if (this.is_open) {
+ this.menu.find('.action-menu-icon').focus();
+ }
}
/**
@@ -192,10 +191,10 @@ class ActionMenu {
*/
update() {
this.element.toggleClass('is-open', this.is_open);
-
this.menu.toggleClass('is-open', this.is_open);
this.menu.toggleClass('is-reversed', this.is_reversed);
- this.menu.find('.action-menu-icon').attr('aria-expanded', this.is_open ? 'true' : 'false');
+ this.menu.find('.action-menu-icon')
+ .attr('aria-expanded', this.is_open ? 'true' : 'false')
}
/**
@@ -207,11 +206,11 @@ class ActionMenu {
//duplicate the functionality in the done() handler.
//(code copied from copyable_link.js and modified)
(new Promise((resolve, reject) => {
- var confirmation = $('<div class="js-action-confirmation">');
+ let confirmation = $('<div class="js-action-confirmation">');
confirmation.text = jQuery(element).data('confirmation_text');
confirmation.insertBefore(element);
jQuery(element).parent().addClass('js-action-confirm-animation');
- var timeout = setTimeout(() => {
+ let timeout = setTimeout(() => {
jQuery(element).parent().off('animationend');
resolve(confirmation);
}, 1500);
diff --git a/resources/assets/javascripts/lib/clipboard.js b/resources/assets/javascripts/lib/clipboard.js
index a06d422273a..6b349f294c7 100644
--- a/resources/assets/javascripts/lib/clipboard.js
+++ b/resources/assets/javascripts/lib/clipboard.js
@@ -1,24 +1,21 @@
import {$gettext} from './gettext';
const Clipboard = {
-
- current_delete_icon: null,
-
switchClipboard: function(event) {
- var select = jQuery(event.target);
+ let select = jQuery(event.target);
if (!select) {
return;
}
- var selected_clipboard_id = jQuery(select).val();
+ let selected_clipboard_id = jQuery(select).val();
//Make all clipboard areas of that clipboard invisible, except the one
//that has been selected:
- var clipboard_areas = jQuery(select).parent().parent().find('.clipboard-area');
+ let clipboard_areas = jQuery(select).parent().parent().find('.clipboard-area');
- for (var clipboard of clipboard_areas) {
- var current_clipboard_id = jQuery(clipboard).attr('data-id');
+ for (let clipboard of clipboard_areas) {
+ let current_clipboard_id = jQuery(clipboard).attr('data-id');
if (current_clipboard_id) {
if (current_clipboard_id === selected_clipboard_id) {
@@ -40,15 +37,15 @@ const Clipboard = {
return false;
}
- event.preventDefault();
+
//Check if a name is entered in the form:
- var name_input = jQuery(event.target).find('input[type="text"][name="name"]');
+ let name_input = jQuery(event.target).find('input[type="text"][name="name"]');
if (!name_input) {
//Something is wrong with the HTML:
return false;
}
- var name = jQuery(name_input).val().trim();
+ let name = jQuery(name_input).val().trim();
if (!name) {
//The name field is empty. Why send an empty field?
return false;
@@ -70,13 +67,13 @@ const Clipboard = {
}
//Get the clipboard template:
- var widget_node = jQuery('#ClipboardWidget_' + data['widget_id'])[0];
+ let widget_node = jQuery('#ClipboardWidget_' + data['widget_id'])[0];
if (!widget_node) {
//No widget? No clipboard.
return;
}
- var clipboard_template = jQuery(widget_node).find(
+ let clipboard_template = jQuery(widget_node).find(
'.clipboard-area.clipboard-template'
)[0];
@@ -85,23 +82,23 @@ const Clipboard = {
return;
}
- var clipboard_node = jQuery(clipboard_template).clone();
+ let clipboard_node = jQuery(clipboard_template).clone();
//Remove classes:
jQuery(clipboard_node).removeClass('clipboard-template');
jQuery(clipboard_node).removeClass('invisible');
- var clipboard_html = jQuery('<div></div>').append(clipboard_node).html();
+ let clipboard_html = jQuery('<div></div>').append(clipboard_node).html();
//Replace placeholders for CLIPBOARD_ID:
clipboard_html = clipboard_html.replace(/CLIPBOARD_ID/g, data['id']);
//Get the widget content element to append the clipboard:
- var content_node = jQuery(widget_node).find('.sidebar-widget-content');
+ let content_node = jQuery(widget_node).find('.sidebar-widget-content');
//Append the new clipboard's HTML code to the last clipboard:
- var clipboards = jQuery(content_node).find('.clipboard-area');
- var last_clipboard = undefined;
+ let clipboards = jQuery(content_node).find('.clipboard-area');
+ let last_clipboard = undefined;
if (clipboards.length > 0) {
last_clipboard = clipboards[clipboards.length -1];
} else {
@@ -110,15 +107,15 @@ const Clipboard = {
}
//Add the select option:
- var clipboard_selector = jQuery(widget_node).find('.clipboard-selector')[0];
+ let clipboard_selector = jQuery(widget_node).find('.clipboard-selector')[0];
if (!clipboard_selector) {
//Something is wrong with the HTML.
return;
}
- var old_options = jQuery(clipboard_selector).find('option');
+ let old_options = jQuery(clipboard_selector).find('option');
jQuery(old_options).removeAttr('selected');
- var new_option = jQuery('<option></option>');
+ let new_option = jQuery('<option></option>');
jQuery(new_option).val(data['id']);
jQuery(new_option).text(data['name']);
jQuery(new_option).attr('selected', 'selected');
@@ -153,10 +150,10 @@ const Clipboard = {
event.preventDefault();
- var range_id = jQuery(ui_element.helper).data('id');
- var range_type = jQuery(ui_element.helper).data('range_type');
+ let range_id = jQuery(ui_element.helper).data('id');
+ let range_type = jQuery(ui_element.helper).data('range_type');
- var clipboard = event.target;
+ let clipboard = event.target;
if (!clipboard) {
//An event without a target. Nothing to do here.
return;
@@ -169,25 +166,24 @@ const Clipboard = {
if (!event) {
return;
}
- event.preventDefault();
- var button = event.target;
+ let button = event.target;
if (!button) {
return;
}
- var clipboard_id = jQuery(button).data('clipboard_id');
- var clipboard_widget = jQuery('#ClipboardWidget_' + clipboard_id)[0];
+ let clipboard_id = jQuery(button).data('clipboard_id');
+ let clipboard_widget = jQuery('#ClipboardWidget_' + clipboard_id)[0];
if (!clipboard_widget) {
return;
}
- var clipboard = jQuery(clipboard_widget).find('.clipboard-area:not(.invisible)')[0];
+ let clipboard = jQuery(clipboard_widget).find('.clipboard-area:not(.invisible)')[0];
if (!clipboard) {
return;
}
- var range_id = jQuery(button).data('range_id');
- var range_type = jQuery(button).data('range_type');
+ let range_id = jQuery(button).data('range_id');
+ let range_type = jQuery(button).data('range_type');
STUDIP.Clipboard.prepareAddingItem(clipboard, range_id, range_type);
STUDIP.ActionMenu.confirmJSAction(event.target);
@@ -198,10 +194,10 @@ const Clipboard = {
return false;
}
- var clipboard_id = clipboard.getAttribute('data-id');
- var widget_id = jQuery(clipboard).parents('.clipboard-widget').data('widget_id');
+ let clipboard_id = clipboard.getAttribute('data-id');
+ let widget_id = jQuery(clipboard).parents('.clipboard-widget').data('widget_id');
- var allowed_classes = clipboard.getAttribute('data-allowed_classes');
+ let allowed_classes = clipboard.getAttribute('data-allowed_classes');
if (allowed_classes) {
//A list of allowed classes is set. Check if the specified
//range_type is in the list of allowed classes.
@@ -233,7 +229,7 @@ const Clipboard = {
}
//Check for duplicates:
- var already_existing_entry = jQuery(clipboard).find(
+ let already_existing_entry = jQuery(clipboard).find(
".clipboard-item[data-range_id='" + range_id + "']"
).length > 0;
if (already_existing_entry) {
@@ -251,7 +247,9 @@ const Clipboard = {
'widget_id': widget_id
}
}
- ).done(STUDIP.Clipboard.addDroppedItem);
+ ).done(function(data) {
+ STUDIP.Clipboard.addDroppedItem(data);
+ });
},
addDroppedItem: function(response_data) {
@@ -262,8 +260,8 @@ const Clipboard = {
return;
}
- var widget = jQuery('#ClipboardWidget_' + response_data['widget_id']);
- var clipboard_id = jQuery(widget).find(".clipboard-selector").val();
+ let widget = jQuery('#ClipboardWidget_' + response_data['widget_id']);
+ let clipboard_id = jQuery(widget).find(".clipboard-selector").val();
if (!widget) {
//The widget with the speicified widget-ID
@@ -271,7 +269,7 @@ const Clipboard = {
return;
}
- var clipboard = jQuery(widget).find(
+ let clipboard = jQuery(widget).find(
'.clipboard-area[data-id="' + clipboard_id + '"]'
)[0];
if (!clipboard) {
@@ -280,7 +278,7 @@ const Clipboard = {
}
//Check for duplicates:
- var already_existing_entry = jQuery(clipboard).find(
+ let already_existing_entry = jQuery(clipboard).find(
".clipboard-item[data-range_id='" + response_data['range_id'] + "']"
).length > 0;
if (already_existing_entry) {
@@ -288,14 +286,14 @@ const Clipboard = {
return;
}
- var template = jQuery(clipboard).find('.clipboard-item-template')[0];
+ let template = jQuery(clipboard).find('.clipboard-item-template')[0];
if (!template) {
//What is the use of continuing when there is no template?
return;
}
- var new_item_node = jQuery(template).clone();
- var checkbox_id = "item_" + clipboard_id + "_" + response_data['range_type'] + "_" + response_data['range_id'];
+ let new_item_node = jQuery(template).clone();
+ let checkbox_id = "item_" + clipboard_id + "_" + response_data['range_type'] + "_" + response_data['range_id'];
//Set some HTML attributes of the template:
jQuery(new_item_node).attr('data-range_id', response_data['range_id']);
@@ -303,15 +301,14 @@ const Clipboard = {
jQuery(new_item_node).removeClass('clipboard-item-template');
jQuery(new_item_node).removeClass('invisible');
- var name_label = jQuery(new_item_node).find('label');
- jQuery(name_label).text(response_data['name']);
- var id_field = jQuery(new_item_node).find("input[name='selected_clipboard_items[]']");
+ let name_label = jQuery(new_item_node).find('label');
+ jQuery('<span/>').text(response_data['name']).appendTo(name_label)
+ let id_field = jQuery(new_item_node).find("input[name='selected_clipboard_items[]']");
jQuery(id_field).val(checkbox_id);
- var new_item_html = jQuery('<div></div>').append(new_item_node).html();
+ let new_item_html = jQuery('<div></div>').append(new_item_node).html();
//Replace RANGE_ID with an escaped real range-ID:
new_item_html = new_item_html.replace(/RANGE_ID/g, _.escape(response_data['range_id']));
-
//Append the template to the clipboard:
jQuery(clipboard).append(jQuery(new_item_html));
@@ -327,17 +324,16 @@ const Clipboard = {
);
},
- rename: function(data) {
- if (!data['widget_id']) {
+ rename: function(widget_id) {
+ if (!widget_id) {
//Required data are missing!
return;
}
- var widget = jQuery('#ClipboardWidget_' + data['widget_id']);
- var clipboard_id = jQuery(widget).find(".clipboard-selector").val();
- var namer = jQuery(widget).find("input.clipboard-name");
+ let widget = jQuery('#ClipboardWidget_' + widget_id);
+ let clipboard_id = jQuery(widget).find(".clipboard-selector").val();
+ let namer = jQuery(widget).find("input.clipboard-name");
- var widget_id = data['widget_id'];
STUDIP.api.PUT(
'clipboard/' + clipboard_id,
{
@@ -355,9 +351,8 @@ const Clipboard = {
//Required data are missing!
return;
}
-
- var widget = jQuery('#ClipboardWidget_' + widget_id);
- var selector = jQuery(widget).find("select.clipboard-selector");
+ let widget = jQuery('#ClipboardWidget_' + widget_id);
+ let selector = jQuery(widget).find("select.clipboard-selector");
selector.find("option[value=" + data['id'] + "]").text(data['name']);
STUDIP.Clipboard.toggleEditButtons(widget_id);
},
@@ -368,9 +363,9 @@ const Clipboard = {
return;
}
- var widget = jQuery('#ClipboardWidget_' + widget_id);
+ let widget = jQuery('#ClipboardWidget_' + widget_id);
- var clipboard_selector = jQuery(widget).find('.clipboard-selector')[0];
+ let clipboard_selector = jQuery(widget).find('.clipboard-selector')[0];
if (!clipboard_selector) {
//Something is wrong with the HTML.
return;
@@ -378,10 +373,10 @@ const Clipboard = {
//Get the option and the corresponding clipboard area
//for the deleted clipboard:
- var clipboard_select_option = jQuery(clipboard_selector).find(
+ let clipboard_select_option = jQuery(clipboard_selector).find(
'option[value="' + clipboard_id + '"]'
)[0];
- var clipboard_area = jQuery(widget).find(
+ let clipboard_area = jQuery(widget).find(
'.clipboard-area[data-id="' + clipboard_id + '"]'
)[0];
@@ -390,13 +385,13 @@ const Clipboard = {
//Display the previous or the next select option
//and the previous or next clipboard area:
- var new_selected_clipboard_id = null;
- var predecessor = jQuery(clipboard_select_option).prev();
+ let new_selected_clipboard_id = null;
+ let predecessor = jQuery(clipboard_select_option).prev();
if (predecessor.length > 0) {
jQuery(predecessor).attr('selected', 'selected');
new_selected_clipboard_id = jQuery(predecessor).val();
} else {
- var successor = jQuery(clipboard_select_option).next();
+ let successor = jQuery(clipboard_select_option).next();
if (successor.length > 0) {
jQuery(successor).attr('selected', 'selected');
new_selected_clipboard_id = jQuery(successor).val();
@@ -418,8 +413,8 @@ const Clipboard = {
jQuery(widget).find('#clipboard-group-container').addClass('invisible');
jQuery(clipboard_selector).attr('disabled', 'disabled');
//Change the icon next to the clipboard selector:
- var active_icon = jQuery(clipboard_selector).next();
- var inactive_icon = jQuery(active_icon).next();
+ let active_icon = jQuery(clipboard_selector).next();
+ let inactive_icon = jQuery(active_icon).next();
jQuery(active_icon).addClass('invisible');
jQuery(inactive_icon).removeClass('invisible');
}
@@ -430,36 +425,25 @@ const Clipboard = {
jQuery(clipboard_area).remove();
},
-
- confirmRemoveClick: function(event) {
- STUDIP.Clipboard.current_delete_icon = event.target;
- STUDIP.Dialog.confirm(
- $gettext('Sind Sie sicher?'),
- STUDIP.Clipboard.handleRemoveClick
- );
- },
-
-
- handleRemoveClick: function() {
- var delete_icon = STUDIP.Clipboard.current_delete_icon;
+ handleRemoveClick: function(delete_icon) {
if (!delete_icon) {
return;
}
//Get the data of the clipboard:
- var clipboard_select = jQuery(delete_icon).siblings('.clipboard-selector')[0];
+ let clipboard_select = jQuery(delete_icon).siblings('.clipboard-selector')[0];
if (!clipboard_select) {
//Something is wrong with the HTML.
return;
}
- var clipboard_id = jQuery(clipboard_select).val();
- var widget = jQuery(delete_icon).parents('.clipboard-widget')[0];
+ let clipboard_id = jQuery(clipboard_select).val();
+ let widget = jQuery(delete_icon).parents('.clipboard-widget')[0];
if (!widget) {
//Another case where something is wrong with the HTML.
return;
}
- var widget_id = jQuery(widget).data('widget_id');
+ let widget_id = jQuery(widget).data('widget_id');
STUDIP.api.DELETE(
'clipboard/' + clipboard_id,
@@ -473,26 +457,16 @@ const Clipboard = {
});
},
-
- confirmRemoveItemClick: function(event) {
- STUDIP.Clipboard.current_delete_icon = event.target;
- STUDIP.Dialog.confirm(
- $gettext('Sind Sie sicher?'),
- STUDIP.Clipboard.removeItem
- );
- },
-
- removeItem: function() {
- var delete_icon = STUDIP.Clipboard.current_delete_icon;
+ removeItem: function(delete_icon) {
if (!delete_icon) {
return;
}
//Get the item-ID:
- var item_html = jQuery(delete_icon).parents('tr');
- var range_id = jQuery(item_html).data('range_id');
- var clipboard_element = jQuery(item_html).parents('table');
- var clipboard_id = jQuery(clipboard_element).data('id');
+ let item_html = jQuery(delete_icon).parents('tr');
+ let range_id = jQuery(item_html).data('range_id');
+ let clipboard_element = jQuery(item_html).parents('table');
+ let clipboard_id = jQuery(clipboard_element).data('id');
if (!range_id || !clipboard_id) {
//We cannot proceed without the item-ID and the clipboard-ID!
@@ -503,7 +477,7 @@ const Clipboard = {
'clipboard/' + clipboard_id + '/item/' + range_id
).done(function() {
//Check if the item has siblings:
- var siblings = jQuery(item_html).siblings();
+ let siblings = jQuery(item_html).siblings();
if (siblings.length < 3) {
//Only the "no items" element and the template
//are siblings of the item.
@@ -523,14 +497,15 @@ const Clipboard = {
//Required data are missing!
return;
}
- var widget = jQuery('#ClipboardWidget_' + widget_id);
- jQuery(widget).find("img.clipboard-edit-accept").toggle();
- jQuery(widget).find("img.clipboard-edit-cancel").toggle();
- jQuery(widget).find("img.clipboard-edit-button").toggle();
- jQuery(widget).find("img.clipboard-remove-button").toggle();
-
- var selector = jQuery(widget).find("select.clipboard-selector");
- var namer = jQuery(widget).find("input.clipboard-name");
+
+ let widget = jQuery('#ClipboardWidget_' + widget_id);
+ jQuery(widget).find(".clipboard-edit-accept").toggle();
+ jQuery(widget).find(".clipboard-edit-cancel").toggle();
+ jQuery(widget).find(".clipboard-edit-button").toggle();
+ jQuery(widget).find(".clipboard-remove-button").toggle();
+
+ let selector = jQuery(widget).find("select.clipboard-selector");
+ let namer = jQuery(widget).find("input.clipboard-name");
selector.toggle();
namer.val(selector.find("option:selected").text().trim());
namer.toggle();
diff --git a/resources/assets/stylesheets/less/clipboard.less b/resources/assets/stylesheets/less/clipboard.less
index 55e591fccb9..4026c5bf1c6 100644
--- a/resources/assets/stylesheets/less/clipboard.less
+++ b/resources/assets/stylesheets/less/clipboard.less
@@ -22,7 +22,7 @@
border: @drag_and_drop_border;
color: @base-color;
font-weight: bold;
- font-size: 16px;
+ font-size: @font-size-large;
background-color: @white;
}
@@ -35,7 +35,6 @@ div.clipboard-area-container {
table.clipboard-area {
width: 100%;
border: 1px solid @content-color-40;
- min-height: 8em;
height: 8em;
padding: 0.25em;
}
@@ -45,21 +44,6 @@ table.clipboard-area tr.empty-clipboard-message > td {
text-align: center;
}
-.clipboard-item {
-
- > td.item-name, > td.item-actions {
- vertical-align: top;
- }
-
- > .item-name {
- width: 80%;
- }
-
- > .item-actions {
- width: 20%;
- }
-}
-
.clipboard-widget {
form .apply-button {
width: 100%;
diff --git a/resources/assets/stylesheets/scss/resources.scss b/resources/assets/stylesheets/scss/resources.scss
index a10ca4a327c..11eec3d3b08 100644
--- a/resources/assets/stylesheets/scss/resources.scss
+++ b/resources/assets/stylesheets/scss/resources.scss
@@ -233,11 +233,6 @@ ul.resource-tree {
margin-left: 0.25em;
}
-.room-clipboard-group-action {
- display: block;
- cursor: pointer;
-}
-
.resource-request {
.overlapping-requests {
color: $yellow-60;
diff --git a/templates/sidebar/clipboard-area.php b/templates/sidebar/clipboard-area.php
index 6aa036b3034..64c3d031b2e 100644
--- a/templates/sidebar/clipboard-area.php
+++ b/templates/sidebar/clipboard-area.php
@@ -17,49 +17,31 @@
<? if (!$readonly): ?>
<input class="clipboard-name invisible" type="text" name="clipboard_name" value="">
-
- <?= Icon::create('edit', 'clickable')->asImg(
- '20px',
+ <?= Icon::create('edit')->asInput(
[
- 'class' => 'middle clipboard-edit-button'
- . (
- $clipboards ? '' : ' invisible'
- ),
- 'onClick' => "STUDIP.Clipboard.toggleEditButtons('"
- . htmlReady($clipboard_widget_id)
- . "');"
+ 'data-widget-id' => $clipboard_widget_id,
+ 'class' => 'middle clipboard-edit-button' . ($clipboards ? '' : ' invisible')
]
) ?>
- <?= Icon::create('accept', 'clickable')->asImg(
- '20px',
+ <?= Icon::create('accept')->asInput(
[
'class' => 'middle clipboard-edit-accept invisible',
- 'onClick' => "STUDIP.Clipboard.rename(
- {
- 'clipboard_id': '" . htmlReady($selected_clipboard_id) ."',
- 'widget_id': '" . htmlReady($clipboard_widget_id) . "'
- });"
+ 'data-widget-id' => $clipboard_widget_id
]
) ?>
- <?= Icon::create('decline', 'clickable')->asImg(
- '20px',
+ <?= Icon::create('decline')->asInput(
[
+ 'data-widget-id' => $clipboard_widget_id,
'class' => 'middle clipboard-edit-cancel invisible',
- 'onClick' => "STUDIP.Clipboard.toggleEditButtons('"
- . htmlReady($clipboard_widget_id)
- . "');"
]
) ?>
- <?= Icon::create('trash', 'clickable')->asImg(
- '20px',
+ <?= Icon::create('trash')->asInput(
[
- 'class' => 'middle clipboard-remove-button'
- . (
- $clipboards ? '' : ' invisible'
- )
+ 'class' => 'middle clipboard-remove-button' . ($clipboards ? '' : ' invisible'),
+ 'data-confirm-message' => _('Sind Sie sicher?')
]
) ?>
<? endif ?>
@@ -72,6 +54,9 @@
? 'invisible'
: '' ?>"
data-id="<?= htmlReady($clipboard->id) ?>">
+ <colgroup>
+ <col style="width: 70%">
+ </colgroup>
<? $items = $clipboard->getContent(false) ?>
<? if ($items): ?>
<? foreach ($items as $item): ?>
@@ -98,11 +83,11 @@
? 'draggable'
: '' ?>"
data-range_id="<?= htmlReady($item['range_id']) ?>">
- <td class="item-name">
+ <td>
<label>
<input type="checkbox"
name="selected_clipboard_items[]"
- title="<?= _('Diesen Eintrag auswählen.') ?>"
+ title="<?= sprintf(_('%s auswählen.'), htmlReady($item['name'])) ?>"
value="<?= htmlReady($item['id']) ?>"
<?= in_array($item['id'], $selected_clipboard_items)
? 'checked="checked"'
@@ -114,10 +99,11 @@
</label>
</td>
<? if (!$readonly): ?>
- <td class="item-actions">
- <?= Icon::create('trash', 'clickable')->asImg(
- '16px',
+ <td class="actions">
+ <?= Icon::create('trash')->asInput(
[
+ 'title' => sprintf(_('%s löschen.'), htmlReady($item['name'])),
+ 'data-confirm-message' => _('Sind Sie sicher?'),
'class' => 'text-bottom clipboard-item-remove-button'
]
) ?>
@@ -154,8 +140,7 @@
</td>
<? if (!$readonly): ?>
<td class="item-actions">
- <?= Icon::create('trash', 'clickable')->asImg(
- '16px',
+ <?= Icon::create('trash')->asInput(
[
'class' => 'text-bottom clipboard-item-remove-button'
]
@@ -170,6 +155,9 @@
<table id="Clipboard_CLIPBOARD_ID"
class="clipboard-area clipboard-template invisible"
data-id="CLIPBOARD_ID">
+ <colgroup>
+ <col style="width: 80%">
+ </colgroup>
<tr class="empty-clipboard-message">
<td>
<?= htmlReady($empty_clipboard_string) ?>
@@ -191,12 +179,13 @@
data-range_id="">
<td>
<input type="checkbox"
- name="clipboard_selected_items[]"
+ name="selected_clipboard_items[]"
+ title="<?= _('Diesen Eintrag auswählen.') ?>"
value="">
+ <label></label>
</td>
<td>
- <?= Icon::create('trash', 'clickable')->asImg(
- '16px',
+ <?= Icon::create('trash')->asInput(
[
'class' => 'text-bottom clipboard-item-remove-button'
]
diff --git a/templates/sidebar/clipboard-widget.php b/templates/sidebar/clipboard-widget.php
index dc2b911e143..46015e7a452 100644
--- a/templates/sidebar/clipboard-widget.php
+++ b/templates/sidebar/clipboard-widget.php
@@ -36,7 +36,9 @@
<input type="text" name="name" placeholder="<?= _('Name des neuen Merkzettels') ?>"
</label>
- <?= Icon::create('add', 'clickable',
+ <?= Icon::create(
+ 'add',
+ Icon::ROLE_CLICKABLE,
[ 'title' => _('Hinzufügen')])->asInput([
'name' => 'save',
'id' => 'add-clipboard-button',
diff --git a/templates/sidebar/room-clipboard-item.php b/templates/sidebar/room-clipboard-item.php
index ae5c47d9591..2fc220b54f3 100644
--- a/templates/sidebar/room-clipboard-item.php
+++ b/templates/sidebar/room-clipboard-item.php
@@ -30,7 +30,7 @@ if (!$item) {
?>
<tr class="<?= htmlReady($classes) ?>"
data-range_id="<?= htmlReady($item['range_id']) ?>">
- <td class="item-name">
+ <td>
<label>
<input type="checkbox"
name="selected_clipboard_items[]"
@@ -46,50 +46,30 @@ if (!$item) {
<?= htmlReady($item['name']) ?>
</label>
</td>
- <td class="item-actions">
- <?
- $actions = ActionMenu::get()->setContext($item['name'] ?: '');
- $actions->addLink(
- Room::getLinkForAction(
- 'show',
- ($item ? $item['range_id'] : 'RANGE_ID')
- ),
- _('Info'),
- Icon::create('info', 'clickable'),
- [
- 'data-dialog' => '1'
- ]
- );
- $actions->addLink(
- Room::getLinkForAction(
- 'booking_plan',
- ($item ? $item['range_id'] : 'RANGE_ID')
- ),
- _('Wochenbelegung'),
- Icon::create('timetable', 'clickable'),
- [
- 'target' => '_blank'
- ]
- );
- $actions->addLink(
- Room::getLinkForAction(
- 'semester_plan',
- ($item ? $item['range_id'] : 'RANGE_ID')
- ),
- _('Semesterbelegung'),
- Icon::create('timetable', 'clickable'),
- [
- 'target' => '_blank'
- ]
- );
- ?>
- <span class="clipboard-item-actions-container">
- <?= $actions->render() ?>
- </span>
+ <td class="actions">
+ <a href="<?= Room::getLinkForAction('show', ($item ? $item['range_id'] : 'RANGE_ID')) ?>" data-dialog>
+ <?= Icon::create(
+ 'info',
+ Icon::ROLE_CLICKABLE,
+ [
+ 'title' => _('Rauminformationen'),
+ 'class' => 'text-bottom'
+ ])?>
+ </a>
+ <a href="<?= Room::getLinkForAction('semester_plan', ($item ? $item['range_id'] : 'RANGE_ID')) ?>" target="_blank">
+ <?= Icon::create(
+ 'timetable',
+ Icon::ROLE_CLICKABLE,
+ [
+ 'title' => _('Semesterbelegung'),
+ 'class' => 'text-bottom'
+ ]
+ )?>
+ </a>
<? if (!$readonly): ?>
- <?= Icon::create('trash', 'clickable')->asImg(
- '20px',
+ <?= Icon::create('trash')->asInput(
[
+ 'data-confirm-message' => _('Sind Sie sicher?'),
'class' => 'text-bottom clipboard-item-remove-button'
]
) ?>
diff --git a/templates/sidebar/room-clipboard-widget.php b/templates/sidebar/room-clipboard-widget.php
index ca584436ca1..c6a983002e6 100644
--- a/templates/sidebar/room-clipboard-widget.php
+++ b/templates/sidebar/room-clipboard-widget.php
@@ -14,11 +14,8 @@
<ul class="widget-list widget-links invisible">
<? foreach ($elements as $index => $element): ?>
- <li id="<?= htmlReady('link-' . md5($element->url)) ?>" <?= $element->icon ? 'style="' . $element->icon->asCSS() .'"' : '' ?>>
- <a <?= arrayToHtmlAttributes($element->attributes) ?>
- data-url_path = "<?= htmlReady($element->url) ?>">
- <?= htmlReady($element->label) ?>
- </a>
+ <li id="<?= htmlReady($index) ?>" <?= $element->icon ? 'style="' . $element->icon->asCSS() .'"' : '' ?>>
+ <?= $element->render() ?>
</li>
<? endforeach; ?>
</ul>
@@ -39,7 +36,7 @@
<?= tooltipIcon(_('Geben Sie bitte einen Namen ein und klicken Sie auf das Plus-Symbol um eine neue Raumgruppe zu erstellen.')) ?>
<input type="text" name="name" placeholder="<?= _('Name der neuen Raumgruppe') ?>">
- <?= Icon::create('add', 'clickable',
+ <?= Icon::create('add', Icon::ROLE_CLICKABLE,
[ 'title' => _('Hinzufügen')])->asInput([
'name' => 'save',
'id' => 'add-clipboard-button',
--
GitLab