OTRS API Reference JavaScript

Source: Core.UI.js

  1. // --
  2. // Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
  3. // --
  4. // This software comes with ABSOLUTELY NO WARRANTY. For details, see
  5. // the enclosed file COPYING for license information (GPL). If you
  6. // did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
  7. // --
  9. "use strict";
  11. var Core = Core || {};
  13. /**
  14.  * @namespace Core.UI
  15.  * @memberof Core
  16.  * @author OTRS AG
  17.  * @description
  18.  *      This namespace contains all UI functions.
  19.  */
  20. Core.UI = (function (TargetNS) {
  22.     /**
  23.      * @private
  24.      * @name IDGeneratorCount
  25.      * @memberof Core.UI
  26.      * @member {Number}
  27.      * @description
  28.      *      Counter for automatic HTML element ID generation.
  29.      */
  30.     var IDGeneratorCount = 0;
  32.     /**
  33.      * @name InitWidgetActionToggle
  34.      * @memberof Core.UI
  35.      * @function
  36.      * @description
  37.      *      This function initializes the toggle mechanism for all widgets with a WidgetAction toggle icon.
  38.      */
  39.     TargetNS.InitWidgetActionToggle = function () {
  40.         $(".WidgetAction.Toggle > a")
  41.             .each(function () {
  42.                 var $WidgetElement = $(this).closest("div.Header").parent('div'),
  43.                     ContentDivID = TargetNS.GetID($WidgetElement.children('.Content'));
  45.                 // fallback to Expanded if default state was not given
  46.                 if (!$WidgetElement.hasClass('Expanded') && !$WidgetElement.hasClass('Collapsed')){
  47.                     $WidgetElement.addClass('Expanded');
  48.                 }
  50.                 $(this)
  51.                     .attr('aria-controls', ContentDivID)
  52.                     .attr('aria-expanded', $WidgetElement.hasClass('Expanded'));
  53.             })
  54.             .off('click.WidgetToggle')
  55.             .on('click.WidgetToggle', function (Event) {
  56.                 var $WidgetElement = $(this).closest("div.Header").parent('div'),
  57.                     Animate = $WidgetElement.hasClass('Animate'),
  58.                     $that = $(this);
  60.                 function ToggleWidget() {
  61.                     $WidgetElement
  62.                         .toggleClass('Collapsed')
  63.                         .toggleClass('Expanded')
  64.                         .end()
  65.                         .end()
  66.                         .attr('aria-expanded', $that.closest("div.Header").parent('div').hasClass('Expanded'));
  67.                         Core.App.Publish('Event.UI.ToggleWidget', [$WidgetElement]);
  68.                 }
  70.                 if (Animate) {
  71.                     $WidgetElement.addClass('AnimationRunning').find('.Content').slideToggle("fast", function () {
  72.                         ToggleWidget();
  73.                         $WidgetElement.removeClass('AnimationRunning');
  74.                     });
  75.                 } else {
  76.                     ToggleWidget();
  77.                 }
  79.                 Event.preventDefault();
  80.             });
  81.     };
  83.     /**
  84.      * @name WidgetOverlayShow
  85.      * @memberof Core.UI
  86.      * @function
  87.      * @param {jQueryObject} $Widget - Widget element
  88.      * @param {String} Type - type of icon which should be displayed (currently only 'Loading' is possible)
  89.      * @description
  90.      *      This function covers a given widget with an overlay
  91.      */
  92.     TargetNS.WidgetOverlayShow = function ($Widget, Type) {
  94.         var IconClass = 'fa-check'
  95.         if (Type || Type == 'Loading') {
  96.             IconClass = 'fa-circle-o-notch fa-spin'
  97.         }
  99.         $Widget
  100.             .addClass('HasOverlay')
  101.             .find('.Content')
  102.             .prepend('<div class="Overlay" style="display: none;"><i class="fa ' + IconClass + '"></i></div>')
  103.             .children('.Overlay')
  104.             .fadeIn();
  105.     };
  107.     /**
  108.      * @name InitWidgetTabs
  109.      * @memberof Core.UI
  110.      * @function
  111.      * @description
  112.      *      Initializes tab functions (e.g. link navigation) on widgets with class 'Tabs'.
  113.      */
  114.     TargetNS.InitWidgetTabs = function() {
  116.         function ActivateTab($TriggerObj) {
  118.             var $ContainerObj = $TriggerObj.closest('.WidgetSimple'),
  119.                 TargetID      = $TriggerObj.attr('href').replace('#', ''),
  120.                 $TargetObj    = $ContainerObj.find('div[data-id="' + TargetID + '"]');
  122.             if ($TriggerObj.hasClass('Disabled')) {
  123.                 return false;
  124.             }
  126.             // if tab doesnt exist or is already active, do nothing
  127.             if ($TargetObj.length && !$TargetObj.hasClass('Active')) {
  129.                 $ContainerObj.find('.Header > a').removeClass('Active');
  130.                 $TriggerObj.addClass('Active');
  131.                 $ContainerObj.find('.Content > div.Active').hide().removeClass('Active');
  132.                 $TargetObj.fadeIn(function() {
  133.                     $(this).addClass('Active');
  135.                     // activate any modern input fields on the active tab
  136.                     Core.UI.InputFields.Activate($TargetObj);
  137.                 });
  138.             }
  139.         }
  141.         // check if the url contains a tab id anchor and jump directly
  142.         // to this tab if it's the case.
  143.         $('.WidgetSimple.Tabs .Header a').each(function() {
  144.             var TargetID = $(this).attr('href');
  145.             if (window.location.href.indexOf(TargetID) > -1) {
  146.                 ActivateTab($(this));
  147.                 return false;
  148.             }
  149.         });
  151.         $('.WidgetSimple.Tabs .Header a').on('click', function(Event) {
  153.             if ($(this).hasClass('Disabled')) {
  154.                 Event.stopPropagation();
  155.                 Event.preventDefault();
  156.                 return false;
  157.             }
  159.             ActivateTab($(this));
  160.         });
  161.     };
  163.     /**
  164.      * @name WidgetOverlayHide
  165.      * @memberof Core.UI
  166.      * @function
  167.      * @param {jQueryObject} $Widget - Widget element
  168.      * @param {Boolean} Switch - Whether the overlay should show a success icon before being removed
  169.      * @description
  170.      *      This function removes an overlay from a given widget
  171.      */
  172.     TargetNS.WidgetOverlayHide = function ($Widget, Switch) {
  174.         if (Switch) {
  175.             $Widget
  176.                 .find('.Overlay i')
  177.                 .fadeOut()
  178.                 .parent()
  179.                 .append('<i class="fa fa-check" style="display: none;" />')
  180.                 .find('i:last-child')
  181.                 .fadeIn()
  182.                 .parent()
  183.                 .delay(1000)
  184.                 .fadeOut(function() {
  185.                     $(this).remove();
  186.                     $Widget.removeClass('HasOverlay');
  187.                 });
  188.         }
  189.         else {
  190.             $Widget
  191.                 .find('.Overlay')
  192.                 .fadeOut(function() {
  193.                     $(this).remove();
  194.                     $Widget.removeClass('HasOverlay');
  195.                 });
  196.         }
  197.     };
  199.     /**
  200.      * @name InitMessageBoxClose
  201.      * @memberof Core.UI
  202.      * @function
  203.      * @description
  204.      *      This function initializes the close buttons for the message boxes that show server messages.
  205.      */
  206.     TargetNS.InitMessageBoxClose = function () {
  207.         $(".MessageBox > a.Close")
  208.             .off('click.MessageBoxClose')
  209.             .on('click.MessageBoxClose', function (Event) {
  210.                 $(this).parent().remove();
  211.                 Event.preventDefault();
  212.             });
  213.     };
  215.     /**
  216.      * @name GetID
  217.      * @memberof Core.UI
  218.      * @function
  219.      * @returns {String} ID of the element
  220.      * @param {jQueryObject} $Element - The HTML element
  221.      * @description
  222.      *      Returns the ID of the Element and creates one for it if nessessary.
  223.      */
  224.     TargetNS.GetID = function ($Element) {
  225.         var ID;
  227.         function GenerateID() {
  228.             return 'Core_UI_AutogeneratedID_' + IDGeneratorCount++;
  229.         }
  231.         if ($Element) {
  232.             if ($Element.attr('id')) {
  233.                 ID = $Element.attr('id');
  234.             }
  235.             else {
  236.                 ID = GenerateID();
  237.                 $Element.attr('id', ID);
  238.             }
  239.         }
  240.         else {
  241.             ID = GenerateID();
  242.         }
  244.         return ID;
  245.     };
  247.     /**
  248.      * @name ToggleTwoContainer
  249.      * @memberof Core.UI
  250.      * @function
  251.      * @param {jQueryObject} $Element1 - First container element.
  252.      * @param {jQueryObject} $Element2 - Second container element.
  253.      * @description
  254.      *      This functions toggles two Containers with a nice slide effect.
  255.      */
  256.     TargetNS.ToggleTwoContainer = function ($Element1, $Element2) {
  257.         if (isJQueryObject($Element1, $Element2) && $Element1.length && $Element2.length) {
  258.             $Element1.slideToggle('fast', function () {
  259.                 $Element2.slideToggle('fast', function() {
  260.                     Core.UI.InputFields.InitSelect($Element2.find('.Modernize'));
  261.                 });
  262.                 Core.UI.InputFields.InitSelect($Element1.find('.Modernize'));
  263.             });
  264.         }
  265.     };
  267.     /**
  268.      * @name RegisterToggleTwoContainer
  269.      * @memberof Core.UI
  270.      * @function
  271.      * @param {jQueryObject} $ClickedElement
  272.      * @param {jQueryObject} $Element1 - First container element.
  273.      * @param {jQueryObject} $Element2 - Second container element.
  274.      * @description
  275.      *      Registers click event to toggle the container.
  276.      */
  277.     TargetNS.RegisterToggleTwoContainer = function ($ClickedElement, $Element1, $Element2) {
  278.         if (isJQueryObject($ClickedElement) && $ClickedElement.length) {
  279.             $ClickedElement.click(function () {
  280.                 var $ContainerObj = $(this).closest('.WidgetSimple').find('.AllocationListContainer'),
  281.                     FieldName,
  282.                     Data = {};
  284.                 if ($Element1.is(':visible')) {
  285.                     TargetNS.ToggleTwoContainer($Element1, $Element2);
  286.                 }
  287.                 else {
  288.                     TargetNS.ToggleTwoContainer($Element2, $Element1);
  289.                 }
  291.                 Data.Columns = {};
  292.                 Data.Order = [];
  294.                 // Get initial columns order (see bug#10683).
  295.                 $ContainerObj.find('.AvailableFields').find('li').each(function() {
  296.                     FieldName = $(this).attr('data-fieldname');
  297.                     Data.Columns[FieldName] = 0;
  298.                 });
  300.                 $ContainerObj.find('.AssignedFields').find('li').each(function() {
  301.                     FieldName = $(this).attr('data-fieldname');
  302.                     Data.Columns[FieldName] = 1;
  303.                     Data.Order.push(FieldName);
  304.                 });
  305.                 $ContainerObj.closest('form').find('.ColumnsJSON').val(Core.JSON.Stringify(Data));
  307.                 return false;
  308.             });
  309.         }
  310.     };
  312.     /**
  313.      * @name ScrollTo
  314.      * @memberof Core.UI
  315.      * @function
  316.      * @param {jQueryObject} $Element
  317.      * @description
  318.      *      Scrolls the active window until an element is visible.
  319.      */
  320.     TargetNS.ScrollTo = function ($Element) {
  321.         if (isJQueryObject($Element) && $Element.length) {
  322.             window.scrollTo(0, $Element.offset().top);
  323.         }
  324.     };
  326.     /**
  327.      * @name ShowNotification
  328.      * @memberof Core.UI
  329.      * @function
  330.      * @param {String} Text the text which should be shown in the notification (untranslated)
  331.      * @param {String} Type Error|Notice (default)
  332.      * @param {String} Link the (internal) URL to which the notification text should point
  333.      * @param {Function} Callback function which should be executed once the notification was hidden
  334.      * @param {String} ID The id for the newly created notification (default: no ID)
  335.      * @param {String} Icon Class of a fontawesome icon which will be added before the text (optional)
  336.      * @returns {Boolean} true or false depending on if the notification could be shown or not
  337.      * @description
  338.      *      Displays a notification on top of the page.
  339.      */
  340.     TargetNS.ShowNotification = function (Text, Type, Link, Callback, ID, Icon) {
  342.         var $ExistingNotifications,
  343.             $NotificationObj;
  345.         if (!Text) {
  346.             return false;
  347.         }
  349.         if (!Type) {
  350.             Type = 'Notice';
  351.         }
  353.         // check if a similar notification is already shown,
  354.         // in this case do nothing
  355.         $ExistingNotifications = $('.MessageBox').filter(
  356.             function() {
  357.                 var Match = 0;
  358.                 if ($(this).find('a').text().indexOf(Text) > 0 && $(this).hasClass(Type)) {
  359.                     Match = 1;
  360.                 }
  361.                 return Match;
  362.             }
  363.         );
  365.         if ($ExistingNotifications.length) {
  366.             return false;
  367.         }
  369.         if (Link) {
  370.             Link = Core.Config.Get('Baselink') + Link;
  371.         }
  373.         // render the notification
  374.         $NotificationObj = $(
  375.             Core.Template.Render("Agent/Notification", {
  376.                 Class: Type,
  377.                 URL: Link,
  378.                 ID: ID,
  379.                 Icon: Icon,
  380.                 Text: Text
  381.             })
  382.         );
  384.         // hide it initially
  385.         $NotificationObj.hide();
  387.         // if there are other notifications, append the new on the bottom
  388.         if ($('.MessageBox:visible').length) {
  389.             $NotificationObj.insertAfter('.MessageBox:visible:last');
  390.         }
  391.         // otherwise insert it on top
  392.         else {
  393.             $NotificationObj.insertAfter('#NavigationContainer');
  394.         }
  396.         // show it finally with animation and execute possible callbacks
  397.         $NotificationObj.slideDown(function() {
  398.             if ($.isFunction(Callback)) {
  399.                 Callback();
  400.             }
  401.         });
  403.         return true;
  404.     };
  406.     /**
  407.      * @name HideNotification
  408.      * @memberof Core.UI
  409.      * @function
  410.      * @param {String} Text the text by which the notification can be recognized (untranslated).
  411.      * @param {String} Type Error|Notice
  412.      * @param {Function} Callback function which should be executed once the notification was hidden
  413.      * @returns {Boolean} true or false depending on if the notification could be removed or not
  414.      * @description
  415.      *      Hides a certain notification.
  416.      */
  417.     TargetNS.HideNotification = function (Text, Type, Callback) {
  419.         if (!Text || !Type) {
  420.             return false;
  421.         }
  423.         $('.MessageBox').filter(
  424.             function() {
  425.                 if ($(this).find('a').text().indexOf(Text) > 0 && $(this).hasClass(Type)) {
  426.                     $(this).slideUp(function() {
  427.                         $(this).remove();
  428.                         if ($.isFunction(Callback)) {
  429.                             Callback();
  430.                         }
  431.                     })
  432.                 }
  433.             }
  434.         );
  436.         return true;
  437.     }
  439.     /**
  440.      * @name InitCheckboxSelection
  441.      * @memberof Core.UI
  442.      * @function
  443.      * @param {jQueryObject} $Element - The element selector which describes the element(s) which surround the checkboxes.
  444.      * @description
  445.      *      This function initializes a click event for tables / divs with checkboxes.
  446.      *      If you click in the table cell / div around the checkbox the checkbox will be selected.
  447.      *      A possible MasterAction will not be executed.
  448.      */
  449.     TargetNS.InitCheckboxSelection = function ($Element) {
  450.         if (!$Element.length) {
  451.             return;
  452.         }
  454.         // e.g. 'table td.Checkbox' or 'div.Checkbox'
  455.         $Element.off('click.CheckboxSelection').on('click.CheckboxSelection', function (Event) {
  456.             var $Checkbox = $(this).find('input[type="checkbox"]');
  458.             if (!$Checkbox.length) {
  459.                 return;
  460.             }
  462.             if ($(Event.target).is('input[type="checkbox"]')) {
  463.                 return;
  464.             }
  466.             Event.stopPropagation();
  468.             $Checkbox
  469.                 .prop('checked', !$Checkbox.prop('checked'))
  470.                 .triggerHandler('click');
  473.         });
  474.     };
  476.     /**
  477.      * @name Animate
  478.      * @memberof Core.UI
  479.      * @function
  480.      * @param {jQueryObject} $Element - The element to animate.
  481.      * @param {String} Type - The animation type as defined in Core.Animations.css, e.g. 'Shake'
  482.      * @description
  483.      *      Animate an element on demand using a css-based animation of the given type
  484.      */
  485.     TargetNS.Animate = function ($Element, Type) {
  486.         if (!$Element.length || !Type) {
  487.             return;
  488.         }
  489.         $Element.addClass('Animation' + Type);
  490.     };
  492.     /**
  493.      * @name InitMasterAction
  494.      * @memberof Core.UI
  495.      * @function
  496.      * @description
  497.      *      Extend click event to the whole table row.
  498.      */
  499.     TargetNS.InitMasterAction = function () {
  500.         $('.MasterAction').click(function (Event) {
  501.             var $MasterActionLink = $(this).find('.MasterActionLink');
  503.             // only act if the link was not clicked directly
  504.             if (Event.target !== $MasterActionLink.get(0)) {
  505.                 window.location = $MasterActionLink.attr('href');
  506.                 return false;
  507.             }
  508.         });
  509.     };
  511.     /**
  512.      * @name InitAjaxDnDUpload
  513.      * @memberof Core.UI
  514.      * @function
  515.      * @description
  516.      *      Init drag & drop ajax upload on relevant input fields of type "file"
  517.      */
  518.     TargetNS.InitAjaxDnDUpload = function () {
  520.         function UploadFiles(SelectedFiles, $DropObj) {
  522.             var $ContainerObj = $DropObj.closest('.Field'),
  523.                 $FileuploadFieldObj = $ContainerObj.find('.AjaxDnDUpload'),
  524.                 FormID = $FileuploadFieldObj.data('form-id') ? $FileuploadFieldObj.data('form-id') : $DropObj.closest('form').find('input[name=FormID]').val(),
  525.                 ChallengeToken = $DropObj.closest('form').find('input[name=ChallengeToken]').val(),
  526.                 IsMultiple = ($FileuploadFieldObj.attr('multiple') == 'multiple'),
  527.                 MaxFiles = $FileuploadFieldObj.data('max-files'),
  528.                 MaxSizePerFile = $FileuploadFieldObj.data('max-size-per-file'),
  529.                 MaxSizePerFileHR = $FileuploadFieldObj.data('max-size-per-file-hr'),
  530.                 FileTypes = $FileuploadFieldObj.data('file-types'),
  531.                 Upload,
  532.                 XHRObj,
  533.                 FileTypeNotAllowed = [],
  534.                 FileTypeNotAllowedText,
  535.                 FilesTooBig = [],
  536.                 FilesTooBigText,
  537.                 AttemptedToUploadAgain = [],
  538.                 AttemptedToUploadAgainText,
  539.                 NoSpaceLeft = [],
  540.                 NoSpaceLeftText,
  541.                 UsedSpace = 0,
  542.                 WebMaxFileUpload = Core.Config.Get('WebMaxFileUpload'),
  543.                 CGIHandle = Core.Config.Get('CGIHandle'),
  544.                 SessionToken = '',
  545.                 SessionName;
  547.             if (!FormID || !SelectedFiles || !$DropObj || !ChallengeToken) {
  548.                 return false;
  549.             }
  551.             // If SessionUseCookie is disabled use Session cookie in AjaxAttachment. See bug#14432.
  552.             if (Core.Config.Get('SessionUseCookie') === '0') {
  553.                 if (CGIHandle.indexOf('index') > -1) {
  554.                     SessionName =  Core.Config.Get('SessionName');
  555.                 }
  556.                 else if (CGIHandle.indexOf('customer') > -1) {
  557.                     SessionName =  Core.Config.Get('CustomerPanelSessionName');
  558.                 }
  559.                 SessionToken = ';' + SessionName + '=' + $DropObj.closest('form').find('input[name=' + SessionName + ']').val();
  560.             }
  562.             // if the original upload field doesn't have the multiple attribute,
  563.             // prevent uploading of more than one file
  564.             if (!IsMultiple && SelectedFiles.length > 1) {
  565.                 alert(Core.Language.Translate("Please only select one file for upload."));
  566.                 return false;
  567.             }
  569.             // if multiple is not allowed and a file has already been uploaded, don't allow uploading more
  570.             if (!IsMultiple && $FileuploadFieldObj.closest('.Field').find('.AttachmentList tbody tr').length > 0) {
  571.                 alert(Core.Language.Translate("Sorry, you can only upload one file here."));
  572.                 return false;
  573.             }
  575.             if (MaxFiles && $FileuploadFieldObj.closest('.Field').find('.AttachmentList tbody tr').length >= MaxFiles) {
  576.                 alert(Core.Language.Translate("Sorry, you can only upload %s files.", [ MaxFiles ]));
  577.                 return false;
  578.             }
  580.             if (MaxFiles && SelectedFiles.length > MaxFiles) {
  581.                 alert(Core.Language.Translate("Please only select at most %s files for upload.", [ MaxFiles ]));
  582.                 return false;
  583.             }
  585.             // check for allowed file types
  586.             if (FileTypes) {
  587.                 FileTypes = FileTypes.split(',');
  588.             }
  590.             $DropObj.prev('input[type=file]').removeClass('Error');
  592.             // collect size of already uploaded files
  593.             $.each($FileuploadFieldObj.closest('.Field').find('.AttachmentList tbody tr td.Filesize'), function() {
  594.                 var FileSize = parseFloat($(this).attr('data-file-size'));
  596.                 if (FileSize) {
  597.                     UsedSpace += FileSize;
  598.                 }
  599.             });
  601.             $.each(SelectedFiles, function(index, File) {
  603.                 var $CurrentRowObj,
  604.                     FileExtension = File.name.slice((File.name.lastIndexOf(".") - 1 >>> 0) + 2),
  605.                     AttachmentItem = Core.Template.Render('AjaxDnDUpload/AttachmentItemUploading', {
  606.                         'Filename' : File.name,
  607.                         'Filetype' : File.type
  608.                     }),
  609.                     FileExist;
  611.                 // check uploaded file size
  612.                 if (File.size > (WebMaxFileUpload - UsedSpace)) {
  613.                     NoSpaceLeft.push(
  614.                         File.name + ' (' + Core.App.HumanReadableDataSize(File.size) + ')'
  615.                     );
  616.                     return true;
  617.                 }
  618.                 UsedSpace += File.size;
  620.                 // check for allowed file types
  621.                 if (typeof FileTypes === 'object' && FileTypes.indexOf(FileExtension) < 0) {
  622.                     FileTypeNotAllowed.push(File.name);
  623.                     return true;
  624.                 }
  626.                 // check for max file size per file
  627.                 if (MaxSizePerFile && File.size > MaxSizePerFile) {
  628.                     FilesTooBig.push(File.name);
  629.                     return true;
  630.                 }
  632.                 // don't allow uploading multiple files with the same name
  633.                 FileExist = $ContainerObj.find('.AttachmentList tbody tr td.Filename').filter(function() {
  634.                     if ($(this).text() === File.name) {
  635.                         return $(this);
  636.                     }
  637.                 });
  638.                 if (FileExist.length) {
  639.                     AttemptedToUploadAgain.push(File.name);
  640.                     return true;
  641.                 }
  643.                 $DropObj.addClass('Uploading');
  644.                 $ContainerObj.find('.AttachmentList').show();
  646.                 $(AttachmentItem).prependTo($ContainerObj.find('.AttachmentList tbody')).fadeIn();
  647.                 $CurrentRowObj = $ContainerObj.find('.AttachmentList tbody tr:first-child');
  649.                 Upload = new FormData();
  650.                 Upload.append('Files', File);
  652.                 $.ajax({
  653.                     url: Core.Config.Get('CGIHandle') + '?Action=AjaxAttachment;Subaction=Upload;FormID=' + FormID + ';ChallengeToken=' + ChallengeToken + SessionToken,
  654.                     type: 'post',
  655.                     data: Upload,
  656.                     xhr: function() {
  657.                         XHRObj = $.ajaxSettings.xhr();
  658.                         if(XHRObj.upload){
  659.                             XHRObj.upload.addEventListener(
  660.                                 'progress',
  661.                                 function(Upload) {
  662.                                     var Percentage = (Upload.loaded * 100) / Upload.total;
  663.                                     $CurrentRowObj.find('.Progress').animate({
  664.                                         'width': Percentage + '%'
  665.                                     });
  666.                                     if (Percentage === 100) {
  667.                                         $CurrentRowObj.find('.Progress').delay(1000).fadeOut(function() {
  668.                                             $(this).remove();
  669.                                         });
  670.                                     }
  671.                                 },
  672.                                 false
  673.                             );
  674.                         }
  675.                         return XHRObj;
  676.                     },
  677.                     dataType: 'json',
  678.                     cache: false,
  679.                     contentType: false,
  680.                     processData: false,
  681.                     success: function(Response) {
  683.                         $.each(Response, function(index, Attachment) {
  685.                             // walk through the list to see if we can update an entry
  686.                             var AttachmentItem,
  687.                                 $ExistingItemObj = $ContainerObj.find('.AttachmentList tbody tr td.Filename').filter(function() {
  688.                                     if ($(this).text() === Attachment.Filename) {
  689.                                         return $(this);
  690.                                     }
  691.                                 }),
  692.                                 $TargetObj;
  694.                             // update the existing item if one exists
  695.                             if ($ExistingItemObj.length) {
  697.                                 $TargetObj = $ExistingItemObj.closest('tr');
  699.                                 if ($TargetObj.find('a').data('file-id')) {
  700.                                     return;
  701.                                 }
  703.                                 $TargetObj
  704.                                     .find('.Filetype')
  705.                                     .text(Attachment.ContentType)
  706.                                     .closest('tr')
  707.                                     .find('.Filesize')
  708.                                     .text(Attachment.HumanReadableDataSize)
  709.                                     .attr('data-file-size', Attachment.Filesize)
  710.                                     .next('td')
  711.                                     .find('a')
  712.                                     .removeClass('Hidden')
  713.                                     .data('file-id', Attachment.FileID);
  714.                             }
  715.                             else {
  717.                                 AttachmentItem = Core.Template.Render('AjaxDnDUpload/AttachmentItem', {
  718.                                     'Filename' : Attachment.Filename,
  719.                                     'Filetype' : Attachment.ContentType,
  720.                                     'Filesize' : Attachment.Filesize,
  721.                                     'FileID'   : Attachment.FileID,
  722.                                 });
  724.                                 $(AttachmentItem).prependTo($ContainerObj.find('.AttachmentList tbody')).fadeIn();
  725.                             }
  727.                             // Append input field for validation (see bug#13081).
  728.                             if (!$('#AttachmentExists').length) {
  729.                                 $('.AttachmentListContainer').append('<input type="hidden" id="AttachmentExists" name="AttachmentExists" value="1" />');
  730.                             }
  731.                         });
  733.                         // we need to empty the relevant file upload field because it would otherwise
  734.                         // transfer the selected files again (only on click select, not on drag & drop)
  735.                         $DropObj.prev('input[type=file]').val('');
  736.                         $DropObj.removeClass('Uploading');
  737.                     },
  738.                     error: function() {
  739.                         // TODO: show an error tooltip?
  740.                         $DropObj.removeClass('Uploading');
  741.                     }
  742.                 });
  743.             });
  745.             if (FileTypeNotAllowed.length || FilesTooBig.length || NoSpaceLeft.length || AttemptedToUploadAgain.length) {
  747.                 FileTypeNotAllowedText = '';
  748.                 FilesTooBigText = '';
  749.                 AttemptedToUploadAgainText = '';
  750.                 NoSpaceLeftText = '';
  752.                 if (FileTypeNotAllowed.length) {
  753.                     FileTypeNotAllowedText =
  754.                         Core.Language.Translate(
  755.                             'The following files are not allowed to be uploaded: %s',
  756.                             '<br>' + FileTypeNotAllowed.join(',<br>') + '<br><br>'
  757.                         );
  758.                 }
  760.                 if (FilesTooBig.length) {
  761.                     FilesTooBigText =
  762.                         Core.Language.Translate(
  763.                             'The following files exceed the maximum allowed size per file of %s and were not uploaded: %s',
  764.                             MaxSizePerFileHR,
  765.                             '<br>' + FilesTooBig.join(',<br>') + '<br><br>'
  766.                         );
  767.                 }
  769.                 if (AttemptedToUploadAgain.length) {
  770.                     AttemptedToUploadAgainText =
  771.                         Core.Language.Translate(
  772.                             'The following files were already uploaded and have not been uploaded again: %s',
  773.                             '<br>' + AttemptedToUploadAgain.join(',<br>') + '<br><br>'
  774.                         );
  775.                 }
  777.                 if (NoSpaceLeft.length) {
  778.                     NoSpaceLeftText =
  779.                         Core.Language.Translate(
  780.                             'No space left for the following files: %s',
  781.                             '<br>' + NoSpaceLeft.join(',<br>')
  782.                         )
  783.                         + '<br><br>'
  784.                         + Core.Language.Translate(
  785.                             'Available space %s of %s.',
  786.                             Core.App.HumanReadableDataSize(WebMaxFileUpload - UsedSpace),
  787.                             Core.App.HumanReadableDataSize(WebMaxFileUpload)
  788.                         );
  789.                 }
  790.                 Core.UI.Dialog.ShowAlert(Core.Language.Translate('Upload information'), FileTypeNotAllowedText + FilesTooBigText + AttemptedToUploadAgainText + NoSpaceLeftText);
  791.             }
  792.         }
  794.         $('.AttachmentList').each(function() {
  795.             if ($(this).find('tbody tr').length) {
  796.                 $(this).show();
  797.             }
  798.         });
  800.         // Attachment deletion
  801.         $('.AttachmentList').off('click').on('click', '.AttachmentDelete', function() {
  803.             var $TriggerObj = $(this),
  804.                 $AttachmentListContainerObj = $TriggerObj.closest('.AttachmentListContainer'),
  805.                 $UploadFieldObj = $AttachmentListContainerObj.next('.AjaxDnDUpload'),
  806.                 FormID = $UploadFieldObj.data('form-id') ? $UploadFieldObj.data('form-id') : $(this).closest('form').find('input[name=FormID]').val(),
  807.                 Data = {
  808.                     Action: $(this).data('delete-action') ? $(this).data('delete-action') : 'AjaxAttachment',
  809.                     Subaction: 'Delete',
  810.                     FileID: $(this).data('file-id'),
  811.                     FormID: FormID,
  812.                     ObjectID: $(this).data('object-id'),
  813.                     FieldID: $(this).data('field-id'),
  814.                 };
  816.             $TriggerObj.closest('.AttachmentListContainer').find('.Busy').fadeIn();
  818.             Core.AJAX.FunctionCall(Core.Config.Get('CGIHandle'), Data, function (Response) {
  819.                 if (Response && Response.Message && Response.Message == 'Success') {
  820.                     $TriggerObj.closest('tr').fadeOut(function() {
  822.                         $(this).remove();
  824.                         if (Response.Data && Response.Data.length) {
  826.                             // go through all attachments and update the FileIDs
  827.                             $.each(Response.Data, function(index, Attachment) {
  828.                                 $AttachmentListContainerObj.find('.AttachmentList td:contains(' + Attachment.Filename + ')').closest('tr').find('a').data('file-id', Attachment.FileID);
  829.                             });
  830.                             $AttachmentListContainerObj.find('.Busy').fadeOut();
  831.                         }
  832.                         else {
  833.                             $AttachmentListContainerObj.find('.AttachmentList').hide();
  834.                             $AttachmentListContainerObj.find('.Busy').hide();
  836.                             // Remove input field because validation is not needed when there is no attachments (see bug#13081).
  837.                             $('#AttachmentExists').remove();
  838.                         }
  839.                     });
  840.                 }
  841.                 else {
  842.                     alert(Core.Language.Translate('An unknown error occurred when deleting the attachment. Please try again. If the error persists, please contact your system administrator.'));
  843.                     $AttachmentListContainerObj.find('.Busy').hide();
  844.                 }
  845.             });
  847.             return false;
  848.         });
  850.         $('input[type=file].AjaxDnDUpload').each(function() {
  852.             var IsMultiple = ($(this).attr('multiple') == 'multiple'),
  853.                 UploadContainer = Core.Template.Render('AjaxDnDUpload/UploadContainer', {
  854.                     'IsMultiple': IsMultiple
  855.                 });
  857.             // Only initialize events once per attachment field.
  858.             if ($(this).next().hasClass('AjaxDnDUploadReady')) {
  859.                 return;
  860.             }
  862.             $(this)
  863.                 .val('')
  864.                 .hide()
  865.                 .on('change', function(Event) {
  866.                     UploadFiles(Event.target.files, $(this).next('.DnDUpload'));
  867.                 })
  868.                 .after($(UploadContainer))
  869.                 .next('.DnDUpload')
  870.                 .on('click keydown', function(Event) {
  872.                     if (Event.keyCode && Event.keyCode == 9) {
  873.                         return true;
  874.                     }
  876.                     // The file selection dialog should also appear on focusing the element and pressing enter/space.
  877.                     if (Event.keyCode && (Event.keyCode != 13 && Event.keyCode != 32)) {
  878.                         return false;
  879.                     }
  881.                     // If this certain upload field does not allow uploading more than one file and a file has
  882.                     // already been uploaded, prevent the user from uploading more files.
  883.                     if (!IsMultiple && $(this).closest('.Field').find('.AttachmentList tbody tr').length > 0) {
  884.                         alert(Core.Language.Translate("Sorry, you can only upload one file here."));
  885.                         return false;
  886.                     }
  888.                     $(this).prev('input.AjaxDnDUpload').trigger('click');
  889.                 })
  890.                 .on('drag dragstart dragend dragover dragenter dragleave drop', function(Event) {
  891.                     Event.preventDefault();
  892.                     Event.stopPropagation();
  893.                 })
  894.                 .on('dragover dragenter', function() {
  895.                     $(this).addClass('DragOver');
  896.                 })
  897.                 .on('dragleave dragend drop', function() {
  898.                     $(this).removeClass('DragOver');
  899.                 })
  900.                 .on('drop', function(Event) {
  901.                     UploadFiles(Event.originalEvent.dataTransfer.files, $(this));
  902.                 })
  903.                 .addClass('AjaxDnDUploadReady');
  904.         });
  905.     };
  907.     /**
  908.      * @name InitStickyWidget
  909.      * @memberof Core.UI
  910.      * @function
  911.      * @param {jQueryObject} $Element - The element to animate.
  912.      * @param {String} Type - The animation type as defined in Core.Animations.css, e.g. 'Shake'
  913.      * @description
  914.      *      Animate an element on demand using a css-based animation of the given type
  915.      */
  916.     TargetNS.InitStickyElement = function () {
  918.         var Position = $('.StickyElement').offset(),
  919.             Width = $('.StickyElement').outerWidth(),
  920.             $Element = $('.StickyElement'),
  921.             Visible = $('.StickyElement').is(':visible');
  923.         if (!Visible) {
  924.             return;
  925.         }
  927.         // if we are on a mobile environment, don't use sticky elements
  928.         if (Core.App.Responsive.IsSmallerOrEqual(Core.App.Responsive.GetScreenSize(), 'ScreenL')) {
  929.             return;
  930.         }
  932.         if (!$Element.length || $Element.length > 1) {
  933.             return;
  934.         }
  936.         if ($Element.hasClass('IsSticky')) {
  937.             return;
  938.         }
  940.         function RepositionElement($Element, Width) {
  941.             if ($(window).scrollTop() > Position.top) {
  943.                 if ($Element.hasClass('IsSticky')) {
  944.                     return false;
  945.                 }
  947.                 $Element.css({
  948.                     'position' : 'fixed',
  949.                     'top'      : '9px',
  950.                     'width'    : Width
  951.                 }).addClass('IsSticky');
  952.             }
  953.             else {
  954.                 $Element.css('position', 'static').removeClass('IsSticky');
  955.             }
  956.         }
  958.         RepositionElement($Element, Width);
  959.         $(window).off('scroll.StickyElement').on('scroll.StickyElement', function() {
  960.             RepositionElement($Element, Width);
  961.         });
  962.     };
  964.     /**
  965.      * @name Init
  966.      * @memberof Core.UI
  967.      * @function
  968.      * @description
  969.      *      Initializes the namespace.
  970.      */
  971.     TargetNS.Init = function() {
  972.         Core.UI.InitWidgetActionToggle();
  973.         Core.UI.InitWidgetTabs();
  974.         Core.UI.InitMessageBoxClose();
  975.         Core.UI.InitMasterAction();
  976.         Core.UI.InitAjaxDnDUpload();
  977.         Core.UI.InitStickyElement();
  978.     };
  980.     Core.Init.RegisterNamespace(TargetNS, 'APP_GLOBAL');
  982.     return TargetNS;
  983. }(Core.UI || {}));

^ Use Elevator