[TASK] Replace BrowseLinks.js with jQuery/RequireJS Module 73/35173/5
authorBenjamin Mack <benni@typo3.org>
Mon, 8 Dec 2014 22:56:06 +0000 (23:56 +0100)
committerBenjamin Mack <benni@typo3.org>
Sat, 13 Dec 2014 09:38:21 +0000 (10:38 +0100)
In the main approach to drop prototype/scriptaculous
usage, the BrowseLinks functionality
is rewritten to be used as a RequireJS module.

As BrowseLinks is still a lot of really old code
this needs to be refactored more at a later stage.

To test: FAL / IRRE usage, wizard
functionality, RTE functionality.

Resolves: #63690
Releases: master
Change-Id: I58514fa83a627fe34d13dd77ece0c44f495ee45d
Reviewed-on: http://review.typo3.org/35173
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
typo3/js/browse_links.js [deleted file]
typo3/sysext/backend/Resources/Public/JavaScript/BrowseLinks.js [new file with mode: 0644]
typo3/sysext/recordlist/Classes/Browser/ElementBrowser.php
typo3/sysext/rtehtmlarea/Classes/SelectImage.php

diff --git a/typo3/js/browse_links.js b/typo3/js/browse_links.js
deleted file mode 100644 (file)
index 7e1f0b8..0000000
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-var BrowseLinks = {
-       elements: {},
-       addElements: function(elements) {
-               BrowseLinks.elements = $H(BrowseLinks.elements).merge(elements).toObject();
-       },
-       focusOpenerAndClose: function(close) {
-               if (close) {
-                       parent.window.opener.focus();
-                       parent.close();
-               }
-       }
-};
-
-       // when selecting one or multiple files, this action is called
-BrowseLinks.File = {
-       insertElement: function(index, close) {
-               var result = false;
-               if (typeof BrowseLinks.elements[index] !== undefined) {
-                       var element = BrowseLinks.elements[index];
-
-                       // insertElement takes the following parameters
-                       // table, uid, type, filename,fp,filetype,imagefile,action, close
-                       result = insertElement(
-                                       element.table,
-                                       element.uid,
-                                       element.type,
-                                       element.fileName,
-                                       element.filePath,
-                                       element.fileExt,
-                                       element.fileIcon,
-                                       '',
-                                       close
-                       );
-               }
-               return result;
-       },
-       insertElementMultiple: function(list) {
-               var uidList = [];
-               list.each(function(index) {
-                       if (typeof BrowseLinks.elements[index] !== undefined) {
-                               var element = BrowseLinks.elements[index];
-                               uidList.push(element.uid);
-                       }
-               });
-               insertMultiple('sys_file', uidList);
-               return true;
-       }
-
-};
-
-BrowseLinks.Selector = {
-       element: 'typo3-fileList',
-       toggle: function(element) {
-               var items = this.getItems(element);
-               if (items.length) {
-                       items.each(function(item) {
-                               item.checked = (item.checked ? null : 'checked');
-                       });
-               }
-       },
-       handle: function(element) {
-               var items = this.getItems(element);
-               var selectedItems = [];
-               if (items.length) {
-                       items.each(function(item) {
-                               if (item.checked && item.name) {
-                                       selectedItems.push(item.name);
-                               }
-                       });
-                       if (selectedItems.length == 1) {
-                               BrowseLinks.File.insertElement(selectedItems[0]);
-                       } else {
-                               BrowseLinks.File.insertElementMultiple(selectedItems);
-                       }
-                       BrowseLinks.focusOpenerAndClose(true);
-               }
-       },
-       getParentElement: function(element) {
-               element = $(element);
-               return (element ? element : $(this.element));
-       },
-       getItems: function(element) {
-               element = this.getParentElement(element);
-               return Element.select(element, '.typo3-bulk-item');
-       }
-};
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/BrowseLinks.js b/typo3/sysext/backend/Resources/Public/JavaScript/BrowseLinks.js
new file mode 100644 (file)
index 0000000..c888fb1
--- /dev/null
@@ -0,0 +1,100 @@
+/**
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+var BrowseLinks;
+/**
+ * this module is currently a wrapper for BrowseLinks, as the functionality
+ * is split up in still a lot of inline JS code.
+ */
+define('TYPO3/CMS/Backend/BrowseLinks', ['jquery'], function ($) {
+       BrowseLinks = {
+               elements: {},
+               addElements: function(elements) {
+                       $.extend(BrowseLinks.elements, elements);
+               },
+               focusOpenerAndClose: function(close) {
+                       if (close) {
+                               parent.window.opener.focus();
+                               parent.close();
+                       }
+               }
+       };
+
+       // when selecting one or multiple files, this action is called
+       BrowseLinks.File = {
+               insertElement: function(index, close) {
+                       var result = false;
+                       if (typeof BrowseLinks.elements[index] !== undefined) {
+                               var element = BrowseLinks.elements[index];
+
+                               // insertElement takes the following parameters
+                               // table, uid, type, filename,fp,filetype,imagefile,action, close
+                               result = insertElement(element.table, element.uid, element.type, element.fileName, element.filePath, element.fileExt, element.fileIcon, '', close);
+                       }
+                       return result;
+               },
+               insertElementMultiple: function(list) {
+                       var uidList = [];
+                       list.each(function(index) {
+                               if (typeof BrowseLinks.elements[index] !== undefined) {
+                                       var element = BrowseLinks.elements[index];
+                                       uidList.push(element.uid);
+                               }
+                       });
+                       insertMultiple('sys_file', uidList);
+                       return true;
+               }
+       };
+
+       /**
+        * Selector when using "Import selection" and "Toggle selection"
+        */
+       BrowseLinks.Selector = {
+               containerSelectorElement: '#typo3-filelist',
+               // Toggle selection button is pressed
+               toggle: function() {
+                       var items = this.getItems();
+                       if (items.length) {
+                               items.each(function(position, item) {
+                                       item.checked = (item.checked ? null : 'checked');
+                               });
+                       }
+               },
+               // Import selection button is pressed
+               handle: function() {
+                       var items = this.getItems();
+                       var selectedItems = [];
+                       if (items.length) {
+                               items.each(function(position, item) {
+                                       if (item.checked && item.name) {
+                                               selectedItems.push(item.name);
+                                       }
+                               });
+                               if (selectedItems.length == 1) {
+                                       BrowseLinks.File.insertElement(selectedItems[0]);
+                               } else {
+                                       BrowseLinks.File.insertElementMultiple(selectedItems);
+                               }
+                               BrowseLinks.focusOpenerAndClose(true);
+                       }
+               },
+               getParentElement: function(element) {
+                       return $(element ? element : this.containerSelectorElement);
+               },
+               getItems: function() {
+                       return this.getParentElement().find('.typo3-bulk-item');
+               }
+       };
+
+       // return the object in the global space
+       return BrowseLinks;
+});
index 36c4a93..767df66 100644 (file)
@@ -345,10 +345,10 @@ class ElementBrowser {
                $this->doc = GeneralUtility::makeInstance(\TYPO3\CMS\Backend\Template\DocumentTemplate::class);
                $this->doc->bodyTagId = 'typo3-browse-links-php';
                $this->doc->backPath = $GLOBALS['BACK_PATH'];
-               // Load the Prototype library and browse_links.js
+               // Load the Prototype library and the tree
                $this->doc->getPageRenderer()->loadPrototype();
-               $this->doc->loadJavascriptLib('js/browse_links.js');
                $this->doc->loadJavascriptLib('js/tree.js');
+               $this->doc->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Backend/BrowseLinks');
        }
 
        /**
@@ -1540,7 +1540,10 @@ class ElementBrowser {
                // Add some space
                $content .= '<br /><br />';
                // Setup indexed elements:
-               $this->doc->JScode .= $this->doc->wrapScriptTags('BrowseLinks.addElements(' . json_encode($this->elements) . ');');
+               $this->doc->JScode .= $this->doc->wrapScriptTags('
+               require(["TYPO3/CMS/Backend/BrowseLinks"], function(BrowseLinks) {
+                       BrowseLinks.addElements(' . json_encode($this->elements) . ');
+               });');
                // Ending page, returning content:
                $content .= $this->doc->endPage();
                $content = $this->doc->insertStylesAndJS($content);
index e62c317..dc51f63 100644 (file)
@@ -697,7 +697,10 @@ class SelectImage extends \TYPO3\CMS\Recordlist\Browser\ElementBrowser {
                                        $files = $this->TBE_expandFolder($selectedFolder, $this->act === 'plain' ? self::PLAIN_MODE_IMAGE_FILE_EXTENSIONS : $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'], $GLOBALS['BE_USER']->getTSConfigVal('options.noThumbsInRTEimageSelect'));
                                }
                                // Setup filelist indexed elements:
-                               $this->doc->JScode .= $this->doc->wrapScriptTags('BrowseLinks.addElements(' . json_encode($this->elements) . ');');
+                               $this->doc->JScode .= $this->doc->wrapScriptTags('
+                               require(["TYPO3/CMS/Backend/BrowseLinks"], function(BrowseLinks) {
+                                       BrowseLinks.addElements(' . json_encode($this->elements) . ');
+                               });');
                                // Wrap tree
                                $this->content .= '