Task #46357

Epic #55575: Streamline JavaScript Code in the TYPO3 Backend

Move TCEForms JS Code to external file - part 1

Added by Benni Mack almost 7 years ago. Updated over 1 year ago.

Status:
Closed
Priority:
Should have
Assignee:
Category:
FormEngine aka TCEforms
Target version:
-
Start date:
2013-03-16
Due date:
% Done:

100%

TYPO3 Version:
6.1
PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

Parts of the JavaScript code used in TCEforms is put inline, coming from
the PHP file. There is no concept of using HTML5-data attributes
to store information. Plus, most of the JS functions are inline in the
HTML output and called in onclick etc. handlers in the HTML elements.
Thus, the functionality cannot be abstracted from the markup,
and the JS functionality cannot be cached by the browser.

Previously, the JS functionality is based on plain MSIE4-compatible
JS code without any framework (no prototype, jQuery etc), and are not
in any namespace.

This approach extracts TCEforms JS code to an external file (AMD module),
and rewrite it to current jQuery and JS standards. But since the JS code
of TCEforms is very complicated, it is hard to do it all at once.

The beginning makes the functionality around select fields in TCEforms,
the functions for importing values from the Element browser,
from any other source.

The patch does this: * Extract the static functions from the PHP code to an external JS file,
in a new RequireJS module named "TYPO3/CMS/Backend/FormEngine.js" * Add options that are page-specific (backPath, formName, callback fn)
to PHP so JS can access it. * Add classes and data-attributes and remove onclick... functionality in order
to reduce the HTML code and split the data from the logic. * Functionality for icons like "move up" etc are rewritten * Functionality for adding elements from a two-select (like "Access" element in pages)
is rewritten, using CSS classes and data attributes.

By keeping the global variables for the old functionality, the old functions
still work as expected.

Please note that you need to have the RequireJS code in the Core in order to use that.

Also, find the work-in-progress for JS coding guidelines and CSS Class guidelines here:

https://notes.typo3.org/p/JS-Coding-Conventions
https://notes.typo3.org/p/BE-CSS-Classes


Related issues

Related to TYPO3 Core - Task #55572: Switch IRRE to jQuery Closed 2014-02-02
Related to TYPO3 Core - Bug #61276: TCA property "exclusiveKeys" prevents from selecting an item Closed 2014-08-29

Associated revisions

Revision 4bef9b87 (diff)
Added by Benni Mack almost 6 years ago

[TASK] Move TCEForms JS Code to external file - part 1

Parts of the JavaScript code used in TCEforms is put
inline, coming from the PHP file. There is no concept of
using HTML5-data attributes to store information.
Plus, most of the JS functions are inline in the HTML
output and called in onclick etc. handlers in the HTML
elements.

Thus, the functionality cannot be abstracted from the
markup, and the JS functionality cannot be cached by
the browser.

Previously, the JS functionality is based on plain
MSIE4-compatible JS code without any framework
(no prototype, jQuery etc), and are not in any namespace.

This approach extracts TCEforms JS code to an external
file (AMD module / RequireJS), and rewrite it to current
jQuery and JS standards. But since the JS code
of TCEforms is very complicated,
it is hard to do it all at once, and the task is split
into separate parts.

The beginning marks the functionality around select
fields in TCEforms, the functions for importing values
from the Element browser, from any other source.

The patch does this:

  • Extract the static functions from the PHP code to
    an external JS file, in a new RequireJS module named
    "TYPO3/CMS/Backend/FormEngine.js"
  • Add options that are page-specific (backPath,
    formName, callback fn) to PHP so JS can access it.
  • Add classes and data-attributes and remove
    onclick... functionality in order to reduce the HTML
    code and split the data from the logic.
  • Functionality for icons like "move up" etc are rewritten
  • Functionality for adding elements from a two-select
    (like "Access" element in pages) is rewritten, using
    CSS classes and data attributes.

By keeping the global variables for the old functionality,
the old functions still work as expected.

Resolves: #46357
Releases: 6.2
Change-Id: I3b9936143342d99eec3058cd55fefdb006060cd4
Reviewed-on: https://review.typo3.org/18971
Reviewed-by: Andreas Wolf
Reviewed-by: Stefan Neufeind
Tested-by: Stefan Neufeind
Tested-by: Felix Kopp
Reviewed-by: Benjamin Mack
Tested-by: Benjamin Mack

History

#1 Updated by Gerrit Code Review almost 7 years ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/18971

#2 Updated by Gerrit Code Review almost 7 years ago

Patch set 2 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/18971

#3 Updated by Gerrit Code Review over 6 years ago

Patch set 3 for branch master has been pushed to the review server.
It is available at https://review.typo3.org/18971

#4 Updated by Gerrit Code Review almost 6 years ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/18971

#5 Updated by Benni Mack almost 6 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#6 Updated by Daniel Siepmann almost 6 years ago

  • Parent task set to #55575

#7 Updated by Benni Mack over 1 year ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF