[TASK] Migrate Taskcenter JavaScript to jQuery 61/32561/5
authorWouter Wolters <typo3@wouterwolters.nl>
Tue, 2 Sep 2014 18:29:45 +0000 (20:29 +0200)
committerMarkus Klein <klein.t3@reelworx.at>
Thu, 4 Sep 2014 08:31:42 +0000 (10:31 +0200)
Move all JavaScript code to a RequireJS module based
on jQuery.

Resolves: #61322
Releases: 6.3
Change-Id: I8558a4952f22410337011991f304fbec6bb9cb84
Reviewed-on: http://review.typo3.org/32561
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
Reviewed-by: Alexander Opitz <opitz.alexander@googlemail.com>
Tested-by: Alexander Opitz <opitz.alexander@googlemail.com>
Tested-by: Markus Klein <klein.t3@reelworx.at>
typo3/sysext/taskcenter/Classes/Controller/TaskModuleController.php
typo3/sysext/taskcenter/Resources/Public/JavaScript/Taskcenter.js [new file with mode: 0644]
typo3/sysext/taskcenter/ext_tables.php
typo3/sysext/taskcenter/res/mod_styles.css
typo3/sysext/taskcenter/res/tasklist.js [deleted file]

index e050730..bd2e77a 100644 (file)
@@ -39,7 +39,7 @@ class TaskModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass {
                $this->doc = GeneralUtility::makeInstance('TYPO3\\CMS\\Backend\\Template\\DocumentTemplate');
                $this->doc->setModuleTemplate(\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('taskcenter') . 'res/mod_template.html');
                $this->doc->backPath = $GLOBALS['BACK_PATH'];
-               $this->doc->getPageRenderer()->loadScriptaculous('effects,dragdrop');
+               $this->doc->getPageRenderer()->loadJquery();
                $this->doc->addStyleSheet('tx_taskcenter', '../' . \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::siteRelPath('taskcenter') . 'res/mod_styles.css');
        }
 
@@ -182,7 +182,7 @@ class TaskModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass {
                $count = 0;
                // Change the sorting of items to the user's one
                if ($mainMenu) {
-                       $this->doc->getPageRenderer()->addJsFile(\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extRelPath('taskcenter') . 'res/tasklist.js');
+                       $this->doc->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Taskcenter/Taskcenter');
                        $userSorting = unserialize($GLOBALS['BE_USER']->uc['taskcenter']['sorting']);
                        if (is_array($userSorting)) {
                                $newSorting = array();
@@ -356,15 +356,7 @@ class TaskModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass {
         * @return string Code that inserts the iframe (HTML)
         */
        public function urlInIframe($url, $max = 0) {
-               $this->doc->JScodeArray[] = 'function resizeIframe(frame,max) {
-                       var parent = $("typo3-docbody");
-                       var parentHeight = $(parent).getHeight() - 0;
-                       var parentWidth = $(parent).getWidth() - $("taskcenter-menu").getWidth() - 50;
-                       $("list_frame").setStyle({height: parentHeight+"px", width: parentWidth+"px"});
-
-               }
-               Event.observe(window, "resize", resizeIframe, false);';
-               return '<iframe onload="resizeIframe(this,' . $max . ');" scrolling="auto"  width="100%" src="' . $url . '" name="list_frame" id="list_frame" frameborder="no" style="margin-top:-51px;border: none;"></iframe>';
+               return '<iframe scrolling="auto"  width="100%" src="' . $url . '" name="list_frame" id="list_frame" frameborder="no"></iframe>';
        }
 
        /**
diff --git a/typo3/sysext/taskcenter/Resources/Public/JavaScript/Taskcenter.js b/typo3/sysext/taskcenter/Resources/Public/JavaScript/Taskcenter.js
new file mode 100644 (file)
index 0000000..8e5f717
--- /dev/null
@@ -0,0 +1,91 @@
+/**
+ * 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!
+ */
+
+define('TYPO3/CMS/Taskcenter/Taskcenter', ['jquery', 'jquery-ui/jquery-ui-1.10.4.custom.min'], function($) {
+
+       var Taskcenter = {};
+
+       Taskcenter.resizeIframe = function() {
+               var $listFrame = $('#list_frame');
+               if ($listFrame.length > 0) {
+                       $listFrame.ready(function() {
+                               var parent = $('#typo3-docbody');
+                               var parentHeight = parent.height();
+                               var parentWidth = parent.width() - $('#taskcenter-menu').width() - 61;
+                               $listFrame.css({height: parentHeight + 'px', width: parentWidth + 'px'});
+
+                               $(window).on('resize', function() {
+                                       Taskcenter.resizeIframe();
+                               });
+                       });
+               }
+       };
+
+       Taskcenter.doCollapseOrExpand = function(element) {
+               var itemParent = element.parent();
+               var item = element.next('div').next('div').next('div').next('div');
+               var state = itemParent.hasClass('expanded') ? 1 : 0;
+               itemParent.toggleClass('expanded', state);
+               itemParent.toggleClass('collapsed', !state);
+               item.toggle(state);
+
+               $.ajax({
+                       url: TYPO3.settings.ajaxUrls['Taskcenter::saveCollapseState'],
+                       type: 'post',
+                       cache: false,
+                       data: {
+                               'item': itemParent.prop('id'),
+                               'state': state
+                       }
+               });
+       };
+
+       Taskcenter.initializeSorting = function() {
+               $('#task-list').sortable({
+                       update: function(event, ui) {
+                               $.ajax({
+                                       url: TYPO3.settings.ajaxUrls['Taskcenter::saveSortingState'],
+                                       type: 'post',
+                                       cache: false,
+                                       data: {
+                                               'data': $(this).sortable('serialize', {
+                                                       key: 'task-list[]',
+                                                       expression: /[=_](.+)/
+                                               })
+                                       }
+                               });
+                       }
+               });
+       };
+
+       /**
+        * Register listeners
+        */
+       Taskcenter.initializeEvents = function() {
+               $('#taskcenter-menu').find('.down').on('click', function() {
+                       Taskcenter.doCollapseOrExpand($(this));
+               });
+
+               Taskcenter.resizeIframe();
+               Taskcenter.initializeSorting();
+       };
+
+       return function() {
+               $(document).ready(function() {
+                       Taskcenter.initializeEvents();
+               });
+
+               TYPO3.Taskcenter = Taskcenter;
+               return Taskcenter;
+       }();
+});
\ No newline at end of file
index ffdc61a..190288f 100644 (file)
@@ -12,6 +12,14 @@ if (TYPO3_MODE === 'BE') {
                'top',
                \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath($_EXTKEY) . 'task/'
        );
-       \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::registerAjaxHandler('Taskcenter::saveCollapseState', 'TYPO3\\CMS\\Taskcenter\\TaskStatus->saveCollapseState');
-       \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::registerAjaxHandler('Taskcenter::saveSortingState', 'TYPO3\\CMS\\Taskcenter\\TaskStatus->saveSortingState');
+
+       \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::registerAjaxHandler(
+               'Taskcenter::saveCollapseState',
+               'TYPO3\\CMS\\Taskcenter\\TaskStatus->saveCollapseState'
+       );
+
+       \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::registerAjaxHandler(
+               'Taskcenter::saveSortingState',
+               'TYPO3\\CMS\\Taskcenter\\TaskStatus->saveSortingState'
+       );
 }
index b3b1570..ae54538 100644 (file)
@@ -247,3 +247,8 @@ body#ext-taskcenter-task-index-php h3 {
        margin-left: 150px;
        width: 215px;
 }
+
+#list_frame {
+       margin-top: -51px;
+       border: none;
+}
\ No newline at end of file
diff --git a/typo3/sysext/taskcenter/res/tasklist.js b/typo3/sysext/taskcenter/res/tasklist.js
deleted file mode 100644 (file)
index a5fe378..0000000
+++ /dev/null
@@ -1,46 +0,0 @@
-Event.observe(document, "dom:loaded", function(){
-       var changeEffect;
-       Sortable.create("task-list", { handles:$$("#task-list .drag"), tag: "li", ghosting:false, overlap:"vertical", constraint:false,
-        onChange: function(item) {
-                var list = Sortable.options(item).element;
-                // deactivate link
-               $$("#task-list a").each(function(link) {
-                       link.writeAttribute("onclick","return false;");
-               });
-
-        },
-
-        onUpdate: function(list) {
-                new Ajax.Request(TYPO3.settings.ajaxUrls['Taskcenter::saveSortingState'], {
-                        method: "post",
-                        parameters: { data: Sortable.serialize(list)}
-                });
-                       // activate link
-                Event.observe(window,"mouseup",function(){
-                       $$("#task-list a").each(function(link) {
-                               link.writeAttribute("onclick","");
-                       });
-               });
-
-        }
-       });
-
-       $$("#taskcenter-menu .down").invoke("observe", "click", function(event){
-               var item = Event.element(event);
-               var itemParent = item.up();
-               item = item.next("div").next("div").next("div").next("div");
-
-               if (itemParent.hasClassName("expanded")) {
-                       itemParent.removeClassName("expanded").addClassName("collapsed");
-                       Effect.BlindUp(item, {duration : 0.5});
-                       state = 1;
-               } else {
-                       itemParent.removeClassName("collapsed").addClassName("expanded");
-                       Effect.BlindDown(item, {duration : 0.5});
-                       state = 0;
-               }
-               new Ajax.Request(TYPO3.settings.ajaxUrls['Taskcenter::saveCollapseState'], {
-                       parameters : "item=" + itemParent.id + "&state=" + state
-               });
-       });
-});