Commit 136ef8c6 authored by Andreas Fernandez's avatar Andreas Fernandez
Browse files

[TASK] Load TypeScript declarations for sortablejs

This patch adds the TypeScript declaration for the sortablejs library.
Since the imported module has a different naming, the PageRenderer needs
both the new module name ("sortablejs") and the old name ("Sortable") as
this would be a breaking change, otherwise.

In the master patch, the old module name has been declared deprecated.

Resolves: #93454
Releases: master, 10.4
Change-Id: Ia8cc7bb4fb57bc7d55aa3601d6ccd1bfe6e0b54d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67658


Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Tested-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
parent 876389bc
......@@ -17,7 +17,7 @@ import {AjaxDispatcher} from './../InlineRelation/AjaxDispatcher';
import {InlineResponseInterface} from './../InlineRelation/InlineResponseInterface';
import DocumentService = require('TYPO3/CMS/Core/DocumentService');
import NProgress = require('nprogress');
import Sortable = require('Sortable');
import Sortable from 'sortablejs';
import FormEngine = require('TYPO3/CMS/Backend/FormEngine');
import FormEngineValidation = require('TYPO3/CMS/Backend/FormEngineValidation');
import Icons = require('../../Icons');
......
......@@ -22,7 +22,7 @@
*/
import $ from 'jquery';
import Sortable = require('Sortable');
import Sortable from 'sortablejs';
import {AjaxResponse} from 'TYPO3/CMS/Core/Ajax/AjaxResponse';
import AjaxRequest = require('TYPO3/CMS/Core/Ajax/AjaxRequest');
import {FlexFormElementOptions} from './FormEngine/FlexForm/FlexFormElementOptions';
......
......@@ -22,6 +22,7 @@
"@types/jqueryui": "^1.12.13",
"@types/nprogress": "^0.2.0",
"@types/requirejs": "^2.1.32",
"@types/sortablejs": "^1.10.6",
"@typescript-eslint/eslint-plugin": "^4.2.0",
"@typescript-eslint/parser": "^4.2.0",
"@typescript-eslint/typescript-estree": "^4.2.0",
......
......@@ -133,7 +133,6 @@ declare module 'muuri';
declare module 'codemirror';
declare module 'flatpickr/flatpickr.min';
declare module 'moment';
declare module 'Sortable';
declare module 'TYPO3/CMS/Backend/LegacyTree';
declare module 'TYPO3/CMS/Backend/PageTree/PageTree';
declare module 'TYPO3/CMS/Backend/PageTree/PageTreeDragDrop';
......
......@@ -366,6 +366,11 @@
resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==
"@types/sortablejs@^1.10.6":
version "1.10.6"
resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.10.6.tgz#98725ae08f1dfe28b8da0fdf302c417f5ff043c0"
integrity sha512-QRz8Z+uw2Y4Gwrtxw8hD782zzuxxugdcq8X/FkPsXUa1kfslhGzy13+4HugO9FXNo+jlWVcE6DYmmegniIQ30A==
"@typescript-eslint/eslint-plugin@^4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.2.0.tgz#a3d5c11b377b7e18f3cd9c4e87d465fe9432669b"
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","jquery","Sortable","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Backend/Modal"],(function(require,exports,jquery_1,Sortable,AjaxRequest,FormEngine,Modal){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),jquery_1=__importDefault(jquery_1);class FlexFormElement{constructor(e,t){this.el=e;const o=this;this.el=e,this.$el=jquery_1.default(e);return void 0!==this.$el.data("TYPO3.FormEngine.FlexFormElement")&&this.$el.removeData("TYPO3.FormEngine.FlexFormElement"),this.$el.data("TYPO3.FormEngine.FlexFormElement",this),t||(t=FlexFormElement.defaults),t.allowRestructure=this.$el.data("t3-flex-allow-restructure"),t.flexformId=this.$el.attr("id"),this.opts=jquery_1.default.extend({},FlexFormElement.defaults,t),this.initializeEvents(),this.$el.find(this.opts.sectionSelector).each((function(){o.generateSectionPreview(jquery_1.default(this))})),this}initializeEvents(){return this.$el.prev(this.opts.flexFormToggleAllSectionsSelector).off("click").on("click",()=>{this.$el.find(this.opts.sectionToggleButtonSelector).trigger("click")}),this.opts.allowRestructure&&(this.createSortable(),this.$el.off("click").on("click",this.opts.deleteIconSelector,e=>{e.preventDefault();const t=TYPO3.lang["flexform.section.delete.title"]||"Are you sure?",o=TYPO3.lang["flexform.section.delete.message"]||"Are you sure you want to delete this section?",n=Modal.confirm(t,o);n.on("confirm.button.cancel",()=>{Modal.currentModal.trigger("modal-dismiss")}),n.on("confirm.button.ok",()=>{const t=jquery_1.default(e.target).closest(this.opts.sectionSelector);t.find(this.opts.sectionActionInputFieldSelector).detach().appendTo(t.parent()).val("DELETE"),t.addClass("t3-flex-section--deleted"),t.on("transitionend",()=>{t.hide()}),FormEngine.Validation.validate(this.$el.get(0)),Modal.currentModal.trigger("modal-dismiss")})}),this.$el.on("click",this.opts.sectionToggleButtonSelector,e=>{e.preventDefault();const t=jquery_1.default(e.currentTarget).closest(this.opts.sectionSelector);this.toggleSection(t)}).on("click",this.opts.sectionToggleButtonSelector+" .form-irre-header-control",(function(e){e.stopPropagation()}))),this}createSortable(){new Sortable(this.el,{group:this.el.id,handle:".t3js-sortable-handle",onSort:()=>{this.setActionStatus(),jquery_1.default(document).trigger("flexform:sorting-changed")}})}setActionStatus(){this.$el.find(this.opts.sectionSelector+" "+this.opts.sectionActionInputFieldSelector).each((function(e){this.value=String(e)}))}toggleSection(e){const t=e.find(this.opts.sectionContentSelector);t.toggle(),t.is(":visible")?(e.find(this.opts.sectionToggleIconOpenSelector).show(),e.find(this.opts.sectionToggleIconCloseSelector).hide(),e.find(this.opts.sectionToggleInputFieldSelector).val(0)):(e.find(this.opts.sectionToggleIconOpenSelector).hide(),e.find(this.opts.sectionToggleIconCloseSelector).show(),e.find(this.opts.sectionToggleInputFieldSelector).val(1)),this.generateSectionPreview(e)}generateSectionPreview(e){const t=e.find(this.opts.sectionContentSelector);let o="";t.is(":visible")||t.find("input[type=text], textarea").each((function(){let e=jquery_1.default(jquery_1.default.parseHTML(jquery_1.default(this).val())).text();e.length>50&&(e=e.substring(0,50)+"..."),o+=(o?" / ":"")+e})),0===e.find(this.opts.sectionHeaderPreviewSelector).length&&e.find(this.opts.sectionHeaderSelector).find(".t3js-record-title").parent().append('<span class="'+this.opts.sectionHeaderPreviewSelector.replace(/\./,"")+'"></span>'),e.find(this.opts.sectionHeaderPreviewSelector).text(o)}}FlexFormElement.defaults={deleteIconSelector:".t3js-delete",sectionSelector:".t3js-flex-section",sectionContentSelector:".t3js-flex-section-content",sectionHeaderSelector:".t3js-flex-section-header",sectionHeaderPreviewSelector:".t3js-flex-section-header-preview",sectionActionInputFieldSelector:".t3js-flex-control-action",sectionToggleInputFieldSelector:".t3js-flex-control-toggle",sectionToggleIconOpenSelector:".t3js-flex-control-toggle-icon-open",sectionToggleIconCloseSelector:".t3js-flex-control-toggle-icon-close",sectionToggleButtonSelector:'[data-toggle="formengine-flex"]',flexFormToggleAllSectionsSelector:".t3js-form-field-toggle-flexsection",sectionDeletedClass:"t3js-flex-section-deleted",allowRestructure:!1,flexformId:!1},jquery_1.default.fn.t3FormEngineFlexFormElement=function(e){return this.each((function(){new FlexFormElement(this,e)}))},jquery_1.default((function(){jquery_1.default(".t3-flex-container").t3FormEngineFlexFormElement(),jquery_1.default(document).on("click",".t3js-flex-container-add",(function(e){const me=jquery_1.default(this);e.preventDefault(),new AjaxRequest(TYPO3.settings.ajaxUrls.record_flex_container_add).post({vanillaUid:me.data("vanillauid"),databaseRowUid:me.data("databaserowuid"),command:me.data("command"),tableName:me.data("tablename"),fieldName:me.data("fieldname"),recordTypeValue:me.data("recordtypevalue"),dataStructureIdentifier:me.data("datastructureidentifier"),flexFormSheetName:me.data("flexformsheetname"),flexFormFieldName:me.data("flexformfieldname"),flexFormContainerName:me.data("flexformcontainername")}).then(async response=>{const data=await response.resolve(),flexContainer=me.closest(".t3-form-field-container").find(".t3-flex-container");flexContainer.append(data.html),flexContainer.t3FormEngineFlexFormElement(),data.scriptCall&&data.scriptCall.length>0&&jquery_1.default.each(data.scriptCall,(function(index,value){eval(value)})),data.stylesheetFiles&&data.stylesheetFiles.length>0&&jquery_1.default.each(data.stylesheetFiles,(function(e,t){let o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href=t,document.head.appendChild(o)})),FormEngine.reinitialize(),FormEngine.Validation.initializeInputFields(),FormEngine.Validation.validate(flexContainer.get(0))})}))}))}));
\ No newline at end of file
var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","jquery","sortablejs","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Backend/Modal"],(function(require,exports,jquery_1,sortablejs_1,AjaxRequest,FormEngine,Modal){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),jquery_1=__importDefault(jquery_1),sortablejs_1=__importDefault(sortablejs_1);class FlexFormElement{constructor(e,t){this.el=e;const o=this;this.el=e,this.$el=jquery_1.default(e);return void 0!==this.$el.data("TYPO3.FormEngine.FlexFormElement")&&this.$el.removeData("TYPO3.FormEngine.FlexFormElement"),this.$el.data("TYPO3.FormEngine.FlexFormElement",this),t||(t=FlexFormElement.defaults),t.allowRestructure=this.$el.data("t3-flex-allow-restructure"),t.flexformId=this.$el.attr("id"),this.opts=jquery_1.default.extend({},FlexFormElement.defaults,t),this.initializeEvents(),this.$el.find(this.opts.sectionSelector).each((function(){o.generateSectionPreview(jquery_1.default(this))})),this}initializeEvents(){return this.$el.prev(this.opts.flexFormToggleAllSectionsSelector).off("click").on("click",()=>{this.$el.find(this.opts.sectionToggleButtonSelector).trigger("click")}),this.opts.allowRestructure&&(this.createSortable(),this.$el.off("click").on("click",this.opts.deleteIconSelector,e=>{e.preventDefault();const t=TYPO3.lang["flexform.section.delete.title"]||"Are you sure?",o=TYPO3.lang["flexform.section.delete.message"]||"Are you sure you want to delete this section?",l=Modal.confirm(t,o);l.on("confirm.button.cancel",()=>{Modal.currentModal.trigger("modal-dismiss")}),l.on("confirm.button.ok",()=>{const t=jquery_1.default(e.target).closest(this.opts.sectionSelector);t.find(this.opts.sectionActionInputFieldSelector).detach().appendTo(t.parent()).val("DELETE"),t.addClass("t3-flex-section--deleted"),t.on("transitionend",()=>{t.hide()}),FormEngine.Validation.validate(this.$el.get(0)),Modal.currentModal.trigger("modal-dismiss")})}),this.$el.on("click",this.opts.sectionToggleButtonSelector,e=>{e.preventDefault();const t=jquery_1.default(e.currentTarget).closest(this.opts.sectionSelector);this.toggleSection(t)}).on("click",this.opts.sectionToggleButtonSelector+" .form-irre-header-control",(function(e){e.stopPropagation()}))),this}createSortable(){new sortablejs_1.default(this.el,{group:this.el.id,handle:".t3js-sortable-handle",onSort:()=>{this.setActionStatus(),jquery_1.default(document).trigger("flexform:sorting-changed")}})}setActionStatus(){this.$el.find(this.opts.sectionSelector+" "+this.opts.sectionActionInputFieldSelector).each((function(e){this.value=String(e)}))}toggleSection(e){const t=e.find(this.opts.sectionContentSelector);t.toggle(),t.is(":visible")?(e.find(this.opts.sectionToggleIconOpenSelector).show(),e.find(this.opts.sectionToggleIconCloseSelector).hide(),e.find(this.opts.sectionToggleInputFieldSelector).val(0)):(e.find(this.opts.sectionToggleIconOpenSelector).hide(),e.find(this.opts.sectionToggleIconCloseSelector).show(),e.find(this.opts.sectionToggleInputFieldSelector).val(1)),this.generateSectionPreview(e)}generateSectionPreview(e){const t=e.find(this.opts.sectionContentSelector);let o="";t.is(":visible")||t.find("input[type=text], textarea").each((function(){let e=jquery_1.default(jquery_1.default.parseHTML(jquery_1.default(this).val())).text();e.length>50&&(e=e.substring(0,50)+"..."),o+=(o?" / ":"")+e})),0===e.find(this.opts.sectionHeaderPreviewSelector).length&&e.find(this.opts.sectionHeaderSelector).find(".t3js-record-title").parent().append('<span class="'+this.opts.sectionHeaderPreviewSelector.replace(/\./,"")+'"></span>'),e.find(this.opts.sectionHeaderPreviewSelector).text(o)}}FlexFormElement.defaults={deleteIconSelector:".t3js-delete",sectionSelector:".t3js-flex-section",sectionContentSelector:".t3js-flex-section-content",sectionHeaderSelector:".t3js-flex-section-header",sectionHeaderPreviewSelector:".t3js-flex-section-header-preview",sectionActionInputFieldSelector:".t3js-flex-control-action",sectionToggleInputFieldSelector:".t3js-flex-control-toggle",sectionToggleIconOpenSelector:".t3js-flex-control-toggle-icon-open",sectionToggleIconCloseSelector:".t3js-flex-control-toggle-icon-close",sectionToggleButtonSelector:'[data-toggle="formengine-flex"]',flexFormToggleAllSectionsSelector:".t3js-form-field-toggle-flexsection",sectionDeletedClass:"t3js-flex-section-deleted",allowRestructure:!1,flexformId:!1},jquery_1.default.fn.t3FormEngineFlexFormElement=function(e){return this.each((function(){new FlexFormElement(this,e)}))},jquery_1.default((function(){jquery_1.default(".t3-flex-container").t3FormEngineFlexFormElement(),jquery_1.default(document).on("click",".t3js-flex-container-add",(function(e){const me=jquery_1.default(this);e.preventDefault(),new AjaxRequest(TYPO3.settings.ajaxUrls.record_flex_container_add).post({vanillaUid:me.data("vanillauid"),databaseRowUid:me.data("databaserowuid"),command:me.data("command"),tableName:me.data("tablename"),fieldName:me.data("fieldname"),recordTypeValue:me.data("recordtypevalue"),dataStructureIdentifier:me.data("datastructureidentifier"),flexFormSheetName:me.data("flexformsheetname"),flexFormFieldName:me.data("flexformfieldname"),flexFormContainerName:me.data("flexformcontainername")}).then(async response=>{const data=await response.resolve(),flexContainer=me.closest(".t3-form-field-container").find(".t3-flex-container");flexContainer.append(data.html),flexContainer.t3FormEngineFlexFormElement(),data.scriptCall&&data.scriptCall.length>0&&jquery_1.default.each(data.scriptCall,(function(index,value){eval(value)})),data.stylesheetFiles&&data.stylesheetFiles.length>0&&jquery_1.default.each(data.stylesheetFiles,(function(e,t){let o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href=t,document.head.appendChild(o)})),FormEngine.reinitialize(),FormEngine.Validation.initializeInputFields(),FormEngine.Validation.validate(flexContainer.get(0))})}))}))}));
\ No newline at end of file
......@@ -1391,7 +1391,8 @@ class PageRenderer implements SingletonInterface
'd3-selection' => $corePath . 'd3-selection',
'd3-drag' => $corePath . 'd3-drag',
'd3-dispatch' => $corePath . 'd3-dispatch',
'Sortable' => $corePath . 'Sortable.min',
'Sortable' => $corePath . 'Sortable.min', // @deprecated since v11, will be removed in v12
'sortablejs' => $corePath . 'Sortable.min',
'tablesort' => $corePath . 'tablesort',
'tablesort.dotsep' => $corePath . 'tablesort.dotsep',
'broadcastchannel' => $corePath . 'broadcastchannel-polyfill',
......
.. include:: ../../Includes.txt
===================================================
Deprecation: #93454 - Rename Sortable to sortablejs
===================================================
See :issue:`93454`
Description
===========
Due to importing TypeScript declarations of SortableJS, it's required to make
the library available as `sortablejs`. The previously used name `Sortable` is
still available, but declared deprecated.
Impact
======
There is no direct impact, as we cannot intercept loading the module to log a
deprecation.
Affected Installations
======================
Every 3rd party extension using SortableJS is affected.
Migration
=========
Change the import of the library to `sortablejs`.
.. index:: JavaScript, NotScanned, ext:backend
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment