diff options
| -rw-r--r-- | lib/classes/sidebar/RoomClipboardWidget.class.php | 17 | ||||
| -rw-r--r-- | resources/assets/javascripts/bootstrap/clipboard.js | 145 | ||||
| -rw-r--r-- | resources/assets/javascripts/bootstrap/resources.js | 2 | ||||
| -rw-r--r-- | resources/assets/javascripts/lib/actionmenu.js | 23 | ||||
| -rw-r--r-- | resources/assets/javascripts/lib/clipboard.js | 187 | ||||
| -rw-r--r-- | resources/assets/stylesheets/less/clipboard.less | 18 | ||||
| -rw-r--r-- | resources/assets/stylesheets/scss/resources.scss | 5 | ||||
| -rw-r--r-- | templates/sidebar/clipboard-area.php | 65 | ||||
| -rw-r--r-- | templates/sidebar/clipboard-widget.php | 4 | ||||
| -rw-r--r-- | templates/sidebar/room-clipboard-item.php | 66 | ||||
| -rw-r--r-- | 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 cf6b967..da5146a 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 0b6c271..e525b35 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 908593b..c5370df 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 bcbdf04..730cbae 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 a06d422..6b349f2 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 55e591f..4026c5b 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 a10ca4a..11eec3d 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 6aa036b..64c3d03 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 dc2b911..46015e7 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 ae5c47d..2fc220b 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 ca58443..c6a9830 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', |