[BUGFIX] Render tags of documentation changelog deferred 01/61401/2
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Fri, 2 Aug 2019 10:11:11 +0000 (12:11 +0200)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Fri, 2 Aug 2019 13:50:43 +0000 (15:50 +0200)
Currently, when the changelogs get rendered in the Install Tool, for each
document the tags get rendered in the document itself, which has a huge
negative impact on rendering performance.

This patch changes the rendering to the triggered deferred, when the
document is opened.

Resolves: #88882
Releases: master, 9.5
Change-Id: Ie5be93fb0a8b3d1aa2532b2d1a29c1948778c9d7
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/61401
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Josef Glatz <josefglatz@gmail.com>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Josef Glatz <josefglatz@gmail.com>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Build/Sources/TypeScript/install/Resources/Public/TypeScript/Module/Upgrade/UpgradeDocs.ts
typo3/sysext/install/Resources/Private/Partials/Upgrade/UpgradeDocs/PanelItem.html
typo3/sysext/install/Resources/Public/JavaScript/Module/Upgrade/UpgradeDocs.js

index 7df0b8d..086f283 100644 (file)
@@ -21,11 +21,11 @@ import Notification = require('TYPO3/CMS/Backend/Notification');
  * Module: TYPO3/CMS/Install/Module/UpgradeDocs
  */
 class UpgradeDocs extends AbstractInteractableModule {
-  private selectorRestFileItem: string = '.upgrade_analysis_item_to_filter';
   private selectorFulltextSearch: string = '.t3js-upgradeDocs-fulltext-search';
   private selectorChosenField: string = '.t3js-upgradeDocs-chosen-select';
   private selectorChangeLogsForVersionContainer: string = '.t3js-version-changes';
   private selectorChangeLogsForVersion: string = '.t3js-changelog-list';
+  private selectorUpgradeDoc: string = '.t3js-upgrade-doc';
 
   private chosenField: JQuery;
   private fulltextSearchField: JQuery;
@@ -79,6 +79,10 @@ class UpgradeDocs extends AbstractInteractableModule {
 
   private getContent(): void {
     const modalContent = this.getModalBody();
+    modalContent.on('show.bs.collapse', this.selectorUpgradeDoc, (e: JQueryEventObject): void => {
+      this.renderTags($(e.currentTarget));
+    });
+
     $.ajax({
       url: Router.getUrl('upgradeDocsGetContent'),
       cache: false,
@@ -114,7 +118,6 @@ class UpgradeDocs extends AbstractInteractableModule {
             const $panelGroup = $(el);
             const $container = $panelGroup.find(this.selectorChangeLogsForVersion);
             $container.html(data.html);
-            this.renderTags($container);
             this.moveNotRelevantDocuments($container);
 
             // Remove loading spinner form panel
@@ -171,7 +174,7 @@ class UpgradeDocs extends AbstractInteractableModule {
    */
   private appendItemsToChosenSelector(): void {
     let tagString = '';
-    $(this.findInModal(this.selectorRestFileItem)).each((index: number, element: any): void => {
+    $(this.findInModal(this.selectorUpgradeDoc)).each((index: number, element: any): void => {
       tagString += $(element).data('item-tags') + ',';
     });
     const tagArray = UpgradeDocs.trimExplodeAndUnique(',', tagString).sort((a: string, b: string): number => {
@@ -252,15 +255,14 @@ class UpgradeDocs extends AbstractInteractableModule {
     return true;
   }
 
-  private renderTags($container: any): void {
-    $.each($container.find(this.selectorRestFileItem), (index: number, element: any): void => {
-      const $me = $(element);
-      const tags = $me.data('item-tags').split(',');
-      const $tagContainer = $me.find('.t3js-tags');
+  private renderTags($upgradeDocumentContainer: any): void {
+    const $tagContainer = $upgradeDocumentContainer.find('.t3js-tags');
+    if ($tagContainer.children().length === 0) {
+      const tags = $upgradeDocumentContainer.data('item-tags').split(',');
       tags.forEach((value: string): void => {
         $tagContainer.append($('<span />', {'class': 'label'}).text(value));
       });
-    });
+    }
   }
 
   /**
index 245dafb..df286d3 100644 (file)
@@ -1,6 +1,6 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 
-<div class="panel panel-rst panel-{fileArray.class} risk-medium upgrade_analysis_item_to_filter item" data-item-tags="{fileArray.tagList}" data-item-version="{fileArray.version}" data-item-state="{state}" id="heading{id}">
+<div class="t3js-upgrade-doc panel panel-rst panel-{fileArray.class} risk-medium item" data-item-tags="{fileArray.tagList}" data-item-version="{fileArray.version}" data-item-state="{state}" id="heading{id}">
     <div class="panel-heading" role="tab">
         <h3 class="panel-title">
             <f:if condition="{read}">
index 056050a..3c0db76 100644 (file)
@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-var __extends=this&&this.__extends||function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])};return function(t,n){function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}();define(["require","exports","../AbstractInteractableModule","jquery","../../Router","TYPO3/CMS/Backend/Notification","bootstrap"],function(e,t,n,o,a,i){"use strict";return new(function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.selectorRestFileItem=".upgrade_analysis_item_to_filter",e.selectorFulltextSearch=".t3js-upgradeDocs-fulltext-search",e.selectorChosenField=".t3js-upgradeDocs-chosen-select",e.selectorChangeLogsForVersionContainer=".t3js-version-changes",e.selectorChangeLogsForVersion=".t3js-changelog-list",e}return __extends(n,t),n.trimExplodeAndUnique=function(e,t){for(var n=[],a=t.split(e),i=0;i<a.length;i++){var r=a[i].trim();r.length>0&&-1===o.inArray(r,n)&&n.push(r)}return n},n.prototype.initialize=function(t){var n=this;this.currentModal=t,window.location!==window.parent.location?top.require(["TYPO3/CMS/Install/chosen.jquery.min"],function(){n.getContent()}):e(["TYPO3/CMS/Install/chosen.jquery.min"],function(){n.getContent()}),t.on("click",".t3js-upgradeDocs-markRead",function(e){n.markRead(e.target)}),t.on("click",".t3js-upgradeDocs-unmarkRead",function(e){n.unmarkRead(e.target)}),jQuery.expr[":"].contains=jQuery.expr.createPseudo(function(e){return function(t){return jQuery(t).text().toUpperCase().indexOf(e.toUpperCase())>=0}}),e(["jquery.clearable"],function(){t.find(n.selectorFulltextSearch).clearable().focus()})},n.prototype.getContent=function(){var e=this,t=this.getModalBody();o.ajax({url:a.getUrl("upgradeDocsGetContent"),cache:!1,success:function(n){!0===n.success&&"undefined"!==n.html&&n.html.length>0&&(t.empty().append(n.html),e.initializeFullTextSearch(),e.initializeChosenSelector(),e.loadChangelogs())},error:function(e){a.handleAjaxError(e,t)}})},n.prototype.loadChangelogs=function(){var e=this,t=[],n=this.getModalBody();this.findInModal(this.selectorChangeLogsForVersionContainer).each(function(r,s){var l=o.ajax({url:a.getUrl("upgradeDocsGetChangelogForVersion"),cache:!1,data:{install:{version:s.dataset.version}},success:function(t){if(!0===t.success){var n=o(s),a=n.find(e.selectorChangeLogsForVersion);a.html(t.html),e.renderTags(a),e.moveNotRelevantDocuments(a),n.find(".t3js-panel-loading").remove()}else i.error("Something went wrong")},error:function(e){a.handleAjaxError(e,n)}});t.push(l)}),o.when.apply(o,t).done(function(){e.fulltextSearchField.prop("disabled",!1),e.appendItemsToChosenSelector()})},n.prototype.initializeFullTextSearch=function(){var e=this;this.fulltextSearchField=this.findInModal(this.selectorFulltextSearch),this.fulltextSearchField.clearable().focus(),this.initializeChosenSelector(),this.fulltextSearchField.on("keyup",function(){e.combinedFilterSearch()})},n.prototype.initializeChosenSelector=function(){var e=this;this.chosenField=this.getModalBody().find(this.selectorChosenField);var t={".chosen-select":{width:"100%",placeholder_text_multiple:"tags"},".chosen-select-deselect":{allow_single_deselect:!0},".chosen-select-no-single":{disable_search_threshold:10},".chosen-select-no-results":{no_results_text:"Oops, nothing found!"},".chosen-select-width":{width:"100%"}};for(var n in t)t.hasOwnProperty(n)&&this.findInModal(n).chosen(t[n]);this.chosenField.on("change",function(){e.combinedFilterSearch()})},n.prototype.appendItemsToChosenSelector=function(){var e=this,t="";o(this.findInModal(this.selectorRestFileItem)).each(function(e,n){t+=o(n).data("item-tags")+","});var a=n.trimExplodeAndUnique(",",t).sort(function(e,t){return e.toLowerCase().localeCompare(t.toLowerCase())});this.chosenField.prop("disabled",!1),o.each(a,function(t,n){e.chosenField.append(o("<option>").text(n))}),this.chosenField.trigger("chosen:updated")},n.prototype.combinedFilterSearch=function(){var e=this.getModalBody(),t=e.find("div.item");if(this.chosenField.val().length<1&&this.fulltextSearchField.val().length<1)return o(".panel-version:not(:first) > .panel-collapse").collapse("hide"),t.removeClass("hidden searchhit filterhit"),!1;if(t.addClass("hidden").removeClass("searchhit filterhit"),this.chosenField.val().length>0){t.addClass("hidden").removeClass("filterhit");var n=[],a=[];o.each(this.chosenField.val(),function(e,t){var o='[data-item-tags*="'+t+'"]';t.indexOf(":")>0?n.push(o):a.push(o)});var i=a.join(""),r=[];if(n.length)for(var s=0;s<n.length;s++)r.push(i+n[s]);else r.push(i);var l=r.join(",");e.find(l).removeClass("hidden").addClass("searchhit filterhit")}else t.addClass("filterhit").removeClass("hidden");var d=this.fulltextSearchField.val();return e.find("div.item.filterhit").each(function(e,t){var n=o(t);o(":contains("+d+")",n).length>0||o('input[value*="'+d+'"]',n).length>0?n.removeClass("hidden").addClass("searchhit"):n.removeClass("searchhit").addClass("hidden")}),e.find(".searchhit").closest(".panel-collapse").collapse("show"),e.find(".panel-version").each(function(e,t){var n=o(t);n.find(".searchhit",".filterhit").length<1&&n.find(" > .panel-collapse").collapse("hide")}),!0},n.prototype.renderTags=function(e){o.each(e.find(this.selectorRestFileItem),function(e,t){var n=o(t),a=n.data("item-tags").split(","),i=n.find(".t3js-tags");a.forEach(function(e){i.append(o("<span />",{class:"label"}).text(e))})})},n.prototype.moveNotRelevantDocuments=function(e){e.find('[data-item-state="read"]').appendTo(this.findInModal(".panel-body-read")),e.find('[data-item-state="notAffected"]').appendTo(this.findInModal(".panel-body-not-affected"))},n.prototype.markRead=function(e){var t=this.getModalBody(),n=this.getModuleContent().data("upgrade-docs-mark-read-token"),i=o(e).closest("a");i.toggleClass("t3js-upgradeDocs-unmarkRead t3js-upgradeDocs-markRead"),i.find("i").toggleClass("fa-check fa-ban"),i.closest(".panel").appendTo(this.findInModal(".panel-body-read")),o.ajax({method:"POST",url:a.getUrl(),data:{install:{ignoreFile:i.data("filepath"),token:n,action:"upgradeDocsMarkRead"}},error:function(e){a.handleAjaxError(e,t)}})},n.prototype.unmarkRead=function(e){var t=this.getModalBody(),n=this.getModuleContent().data("upgrade-docs-unmark-read-token"),i=o(e).closest("a"),r=i.closest(".panel").data("item-version");i.toggleClass("t3js-upgradeDocs-markRead t3js-upgradeDocs-unmarkRead"),i.find("i").toggleClass("fa-check fa-ban"),i.closest(".panel").appendTo(this.findInModal('*[data-group-version="'+r+'"] .panel-body')),o.ajax({method:"POST",url:a.getUrl(),data:{install:{ignoreFile:i.data("filepath"),token:n,action:"upgradeDocsUnmarkRead"}},error:function(e){a.handleAjaxError(e,t)}})},n}(n.AbstractInteractableModule))});
\ No newline at end of file
+var __extends=this&&this.__extends||function(){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])};return function(t,n){function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}();define(["require","exports","../AbstractInteractableModule","jquery","../../Router","TYPO3/CMS/Backend/Notification","bootstrap"],function(e,t,n,o,a,r){"use strict";return new(function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.selectorFulltextSearch=".t3js-upgradeDocs-fulltext-search",e.selectorChosenField=".t3js-upgradeDocs-chosen-select",e.selectorChangeLogsForVersionContainer=".t3js-version-changes",e.selectorChangeLogsForVersion=".t3js-changelog-list",e.selectorUpgradeDoc=".t3js-upgrade-doc",e}return __extends(n,t),n.trimExplodeAndUnique=function(e,t){for(var n=[],a=t.split(e),r=0;r<a.length;r++){var s=a[r].trim();s.length>0&&-1===o.inArray(s,n)&&n.push(s)}return n},n.prototype.initialize=function(t){var n=this;this.currentModal=t,window.location!==window.parent.location?top.require(["TYPO3/CMS/Install/chosen.jquery.min"],function(){n.getContent()}):e(["TYPO3/CMS/Install/chosen.jquery.min"],function(){n.getContent()}),t.on("click",".t3js-upgradeDocs-markRead",function(e){n.markRead(e.target)}),t.on("click",".t3js-upgradeDocs-unmarkRead",function(e){n.unmarkRead(e.target)}),jQuery.expr[":"].contains=jQuery.expr.createPseudo(function(e){return function(t){return jQuery(t).text().toUpperCase().indexOf(e.toUpperCase())>=0}}),e(["jquery.clearable"],function(){t.find(n.selectorFulltextSearch).clearable().focus()})},n.prototype.getContent=function(){var e=this,t=this.getModalBody();t.on("show.bs.collapse",this.selectorUpgradeDoc,function(t){e.renderTags(o(t.currentTarget))}),o.ajax({url:a.getUrl("upgradeDocsGetContent"),cache:!1,success:function(n){!0===n.success&&"undefined"!==n.html&&n.html.length>0&&(t.empty().append(n.html),e.initializeFullTextSearch(),e.initializeChosenSelector(),e.loadChangelogs())},error:function(e){a.handleAjaxError(e,t)}})},n.prototype.loadChangelogs=function(){var e=this,t=[],n=this.getModalBody();this.findInModal(this.selectorChangeLogsForVersionContainer).each(function(s,i){var l=o.ajax({url:a.getUrl("upgradeDocsGetChangelogForVersion"),cache:!1,data:{install:{version:i.dataset.version}},success:function(t){if(!0===t.success){var n=o(i),a=n.find(e.selectorChangeLogsForVersion);a.html(t.html),e.moveNotRelevantDocuments(a),n.find(".t3js-panel-loading").remove()}else r.error("Something went wrong")},error:function(e){a.handleAjaxError(e,n)}});t.push(l)}),o.when.apply(o,t).done(function(){e.fulltextSearchField.prop("disabled",!1),e.appendItemsToChosenSelector()})},n.prototype.initializeFullTextSearch=function(){var e=this;this.fulltextSearchField=this.findInModal(this.selectorFulltextSearch),this.fulltextSearchField.clearable().focus(),this.initializeChosenSelector(),this.fulltextSearchField.on("keyup",function(){e.combinedFilterSearch()})},n.prototype.initializeChosenSelector=function(){var e=this;this.chosenField=this.getModalBody().find(this.selectorChosenField);var t={".chosen-select":{width:"100%",placeholder_text_multiple:"tags"},".chosen-select-deselect":{allow_single_deselect:!0},".chosen-select-no-single":{disable_search_threshold:10},".chosen-select-no-results":{no_results_text:"Oops, nothing found!"},".chosen-select-width":{width:"100%"}};for(var n in t)t.hasOwnProperty(n)&&this.findInModal(n).chosen(t[n]);this.chosenField.on("change",function(){e.combinedFilterSearch()})},n.prototype.appendItemsToChosenSelector=function(){var e=this,t="";o(this.findInModal(this.selectorUpgradeDoc)).each(function(e,n){t+=o(n).data("item-tags")+","});var a=n.trimExplodeAndUnique(",",t).sort(function(e,t){return e.toLowerCase().localeCompare(t.toLowerCase())});this.chosenField.prop("disabled",!1),o.each(a,function(t,n){e.chosenField.append(o("<option>").text(n))}),this.chosenField.trigger("chosen:updated")},n.prototype.combinedFilterSearch=function(){var e=this.getModalBody(),t=e.find("div.item");if(this.chosenField.val().length<1&&this.fulltextSearchField.val().length<1)return o(".panel-version:not(:first) > .panel-collapse").collapse("hide"),t.removeClass("hidden searchhit filterhit"),!1;if(t.addClass("hidden").removeClass("searchhit filterhit"),this.chosenField.val().length>0){t.addClass("hidden").removeClass("filterhit");var n=[],a=[];o.each(this.chosenField.val(),function(e,t){var o='[data-item-tags*="'+t+'"]';t.indexOf(":")>0?n.push(o):a.push(o)});var r=a.join(""),s=[];if(n.length)for(var i=0;i<n.length;i++)s.push(r+n[i]);else s.push(r);var l=s.join(",");e.find(l).removeClass("hidden").addClass("searchhit filterhit")}else t.addClass("filterhit").removeClass("hidden");var c=this.fulltextSearchField.val();return e.find("div.item.filterhit").each(function(e,t){var n=o(t);o(":contains("+c+")",n).length>0||o('input[value*="'+c+'"]',n).length>0?n.removeClass("hidden").addClass("searchhit"):n.removeClass("searchhit").addClass("hidden")}),e.find(".searchhit").closest(".panel-collapse").collapse("show"),e.find(".panel-version").each(function(e,t){var n=o(t);n.find(".searchhit",".filterhit").length<1&&n.find(" > .panel-collapse").collapse("hide")}),!0},n.prototype.renderTags=function(e){var t=e.find(".t3js-tags");0===t.children().length&&e.data("item-tags").split(",").forEach(function(e){t.append(o("<span />",{class:"label"}).text(e))})},n.prototype.moveNotRelevantDocuments=function(e){e.find('[data-item-state="read"]').appendTo(this.findInModal(".panel-body-read")),e.find('[data-item-state="notAffected"]').appendTo(this.findInModal(".panel-body-not-affected"))},n.prototype.markRead=function(e){var t=this.getModalBody(),n=this.getModuleContent().data("upgrade-docs-mark-read-token"),r=o(e).closest("a");r.toggleClass("t3js-upgradeDocs-unmarkRead t3js-upgradeDocs-markRead"),r.find("i").toggleClass("fa-check fa-ban"),r.closest(".panel").appendTo(this.findInModal(".panel-body-read")),o.ajax({method:"POST",url:a.getUrl(),data:{install:{ignoreFile:r.data("filepath"),token:n,action:"upgradeDocsMarkRead"}},error:function(e){a.handleAjaxError(e,t)}})},n.prototype.unmarkRead=function(e){var t=this.getModalBody(),n=this.getModuleContent().data("upgrade-docs-unmark-read-token"),r=o(e).closest("a"),s=r.closest(".panel").data("item-version");r.toggleClass("t3js-upgradeDocs-markRead t3js-upgradeDocs-unmarkRead"),r.find("i").toggleClass("fa-check fa-ban"),r.closest(".panel").appendTo(this.findInModal('*[data-group-version="'+s+'"] .panel-body')),o.ajax({method:"POST",url:a.getUrl(),data:{install:{ignoreFile:r.data("filepath"),token:n,action:"upgradeDocsUnmarkRead"}},error:function(e){a.handleAjaxError(e,t)}})},n}(n.AbstractInteractableModule))});
\ No newline at end of file