added feature: make the page tree filter pretty, credits Bennjamin Mack
authorIngo Renner <ingo.renner@typo3.org>
Tue, 15 Jan 2008 22:49:57 +0000 (22:49 +0000)
committerIngo Renner <ingo.renner@typo3.org>
Tue, 15 Jan 2008 22:49:57 +0000 (22:49 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@2911 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/alt_db_navframe.php
typo3/class.webpagetree.php
typo3/gfx/search_bubble.png [new file with mode: 0644]
typo3/gfx/search_reset.png [new file with mode: 0644]
typo3/stylesheet.css
typo3/tree.js

index 3d8242b..1a98a61 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -14,6 +14,7 @@
        * added the shortcut menu, part of the cleaner backend project
        * added feature #7163: Make backend.php the default backend
        * cleanup: removed typo3/alt_main_new.php and typo3/sysext/topapps as it was never finished and used
+       * added feature: make the page tree filter pretty, credits Bennjamin Mack
 
 2008-01-15  Benjamin Mack  <mack@xnos.org>
 
index 86a493b..ae6638f 100755 (executable)
@@ -138,7 +138,7 @@ class SC_alt_db_navframe {
 
                        // If highlighting is active, define the CSS class for the active item depending on the workspace
                if ($this->doHighlight) {
-                       $hlClass = ($BE_USER->workspace === 0 ? 'active' : 'active active-ws wsver'.$BE_USER->workspace); 
+                       $hlClass = ($BE_USER->workspace === 0 ? 'active' : 'active active-ws wsver'.$BE_USER->workspace);
                }
 
                        // Create template object:
@@ -170,9 +170,15 @@ class SC_alt_db_navframe {
                        return false;
                }
                '.($this->cMR?"jumpTo(top.fsMod.recentIds['web'],'');":'').'
+
+                       Event.observe(window, "load", function() {
+                               Event.observe(PageTreeFilter.field, "keyup", PageTreeFilter.filter.bindAsEventListener(PageTreeFilter));
+                               Event.observe(PageTreeFilter.resetfield, "click", PageTreeFilter.resetSearchField.bindAsEventListener(PageTreeFilter) );
+                       });
+
                ');
 
-               $this->doc->bodyTagId = 'bodyTag';
+               $this->doc->bodyTagId = 'typo3-pagetree';
        }
 
 
@@ -189,7 +195,7 @@ class SC_alt_db_navframe {
 
                        // Start page:
                $this->content = $this->doc->startPage('TYPO3 Page Tree');
-               
+
                        // Outputting workspace info
                if ($GLOBALS['BE_USER']->workspace!==0 || $GLOBALS['BE_USER']->getTSConfigVal('options.pageTree.onlineWorkspaceInfo'))  {
                        switch($GLOBALS['BE_USER']->workspace)  {
@@ -213,41 +219,43 @@ class SC_alt_db_navframe {
                        ';
                }
 
+                       // adding tree options
+                       $this->content .= '
+       <div id="treeOptions">';
                if (!$GLOBALS['BE_USER']->getTSConfigVal('options.pageTree.hideFilter'))        {
-                       $this->content.= '
-                                       <div class="bgColor4">
-                                               Filter: <input type="text" value="" name="_livesearch" id="_livesearch" onkeyup="filter(this.value);"/>
-                                       </div><br>
-                       ';
+                       $this->content .= '
+               <div id="treeFilterBox">
+                       <input type="text" value="" name="treeFilter" id="treeFilter" />
+                       <img'.t3lib_iconWorks::skinImg($GLOBALS['BACK_PATH'], 'gfx/search_reset.png', ' width="11" height="11"').' id="treeFilterReset" alt="Reset Filter" />
+               </div>';
+
                }
 
+               $this->content .= '
+               <div id="treeOptionButtons">
+                       <a href="'.htmlspecialchars(t3lib_div::getIndpEnv('REQUEST_URI')).'"><img'.t3lib_iconWorks::skinImg('','gfx/refresh_n.gif','width="14" height="14"').' title="'.$LANG->sL('LLL:EXT:lang/locallang_core.php:labels.refresh',1).'" alt="" /></a>'.
+                               // CSH icon:
+                       t3lib_BEfunc::cshItem('xMOD_csh_corebe', 'pagetree', $GLOBALS['BACK_PATH']).'
+               </div>
+       </div>';
+
+
                        // Outputting Temporary DB mount notice:
                if ($this->active_tempMountPoint)       {
                        $this->content.= '
-                               <div class="bgColor4 c-notice">
-                                       <img'.t3lib_iconWorks::skinImg('','gfx/icon_note.gif','width="18" height="16"').' align="top" alt="" />'.
-                                       '<a href="'.htmlspecialchars(t3lib_div::linkThisScript(array('setTempDBmount' => 0))).'">'.
-                                       $LANG->sl('LLL:EXT:lang/locallang_core.php:labels.temporaryDBmount',1).
-                                       '</a><br/>
-                                       '.$LANG->sl('LLL:EXT:lang/locallang_core.php:labels.path',1).': <span title="'.htmlspecialchars($this->active_tempMountPoint['_thePathFull']).'">'.htmlspecialchars(t3lib_div::fixed_lgd_cs($this->active_tempMountPoint['_thePath'],-50)).'</span>
-                               </div>
+       <div class="bgColor4 c-notice">
+               <img'.t3lib_iconWorks::skinImg('','gfx/icon_note.gif','width="18" height="16"').' align="top" alt="" />'.
+               '<a href="'.htmlspecialchars(t3lib_div::linkThisScript(array('setTempDBmount' => 0))).'">'.
+               $LANG->sl('LLL:EXT:lang/locallang_core.php:labels.temporaryDBmount',1).
+               '</a><br/>
+               '.$LANG->sl('LLL:EXT:lang/locallang_core.php:labels.path',1).': <span title="'.htmlspecialchars($this->active_tempMountPoint['_thePathFull']).'">'.htmlspecialchars(t3lib_div::fixed_lgd_cs($this->active_tempMountPoint['_thePath'],-50)).'</span>
+       </div>
                        ';
                }
 
-                       // Outputting page tree:
-               $this->content.= $tree;
-
-                       // Outputting refresh-link
-               $this->content.= '
-                       <p class="c-refresh">
-                               <a href="'.htmlspecialchars(t3lib_div::getIndpEnv('REQUEST_URI')).'">'.
-                               '<img'.t3lib_iconWorks::skinImg('','gfx/refresh_n.gif','width="14" height="14"').' title="'.$LANG->sL('LLL:EXT:lang/locallang_core.php:labels.refresh',1).'" alt="" />'.
-                               $LANG->sL('LLL:EXT:lang/locallang_core.php:labels.refresh',1).'</a>
-                       </p>
-                       <br />';
 
-                       // CSH icon:
-               $this->content.= t3lib_BEfunc::cshItem('xMOD_csh_corebe', 'pagetree', $GLOBALS['BACK_PATH']);
+                       // Outputting page tree:
+               $this->content .= $tree;
 
                        // Adding javascript for drag & drop activation and highlighting
                $this->content .= $this->doc->wrapScriptTags('
@@ -331,7 +339,7 @@ class SC_alt_db_navframe {
        /**
         * Makes the AJAX call to expand or collapse the pagetree.
         * Called by typo3/ajax.php
-        * 
+        *
         * @param       array           $params: additional parameters (not used here)
         * @param       TYPO3AJAX       &$ajaxObj: reference of the TYPO3AJAX object of this request
         * @return      void
index e468ae9..2571629 100755 (executable)
@@ -183,7 +183,7 @@ class webPageTree extends t3lib_browseTree {
 
                $out = '
                        <!-- TYPO3 tree structure. -->
-                       <ul class="tree">
+                       <ul class="tree" id="treeRoot">
                ';
 
                        // -- evaluate AJAX request
diff --git a/typo3/gfx/search_bubble.png b/typo3/gfx/search_bubble.png
new file mode 100644 (file)
index 0000000..7a7f0ab
Binary files /dev/null and b/typo3/gfx/search_bubble.png differ
diff --git a/typo3/gfx/search_reset.png b/typo3/gfx/search_reset.png
new file mode 100644 (file)
index 0000000..c09a700
Binary files /dev/null and b/typo3/gfx/search_reset.png differ
index d939790..045469b 100755 (executable)
@@ -262,9 +262,11 @@ BODY#typo3-alt-db-navframe-php DIV.c-notice { border: 1px solid black; padding:
 .navFrameHL { background-color: #ebebeb; }
 
 /* AJAX page tree */
-UL.tree { list-style: none; margin: 0 0 10px 0; padding: 0; }
+BODY#typo3-pagetree    { margin: 0; padding: 0; }
+
+UL.tree                { list-style: none; margin: 0; padding: 0; clear: both; }
 UL.tree A              { text-decoration: none; }
-UL.tree A.pm   { cursor: pointer; }
+UL.tree A.pm           { cursor: pointer; }
 UL.tree IMG            { vertical-align: middle; }
 UL.tree UL             { list-style: none; margin: 0; padding: 0; padding-left: 17px; }
 UL.tree UL LI  { list-style: none; margin: 0; padding: 0; line-height: 10px; white-space: nowrap; }
@@ -274,6 +276,15 @@ UL.tree LI.active, UL.tree UL LI.active    { background-color: #ebebeb !important;
 UL.tree LI.active UL, UL.tree UL LI.active UL  { background-color: #f7f3ef; }
 #dragIcon { z-index: 1; position: absolute; visibility: hidden; filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; white-space: nowrap; }
 
+div#treeOptions, div#treeOptions * { float: left; }
+div#treeOptions                { width: 100%; height: 24px; background: #fff; margin: 0 0 5px; border-bottom: 1px solid #ccc; }
+div#treeFilterBox      { width: 158px; margin-top: 2px; height: 22px; background: #fff url('gfx/search_bubble.png') no-repeat 8px 0; padding-left: 10px; }
+input#treeFilter       { height: 14px; width: 120px; margin: 3px 0 0 17px; border: 0; }
+img#treeFilterReset    { border: 0; margin: 5px 0 0 4px; cursor: pointer; visibility: hidden; }
+div#treeOptionButtons  { float: right; }
+div#treeOptionButtons a        { margin: 5px 1px 0; }
+
+
 /* TCEforms */
 table.typo3-TCEforms { width: 93%; border-collapse: collapse; }
 table.typo3-TCEforms, table.typo3-TCEforms td { margin: 0; border: 0; padding: 0; }
index 814229e..c86f6c7 100755 (executable)
 *
 ***************************************************************/
 
-       // Call this function, refresh_nav(), from another script in the backend if you want
-       // to refresh the navigation frame (eg. after having changed a page title or moved pages etc.)
-       //              See t3lib_BEfunc::getSetUpdateSignal()
-       // please use the function in the "Tree" object for future implementations
-function refresh_nav() { window.setTimeout('Tree.refresh();',0); }
-
-       // Deprecated since 4.1.
-       // Another JS function, for highlighting rows in the page tree, kept alive for backwards
-       // compatibility. Please use the function in the "Tree" object for future implementations.
-function hilight_row(frameSetModule, highLightID) { Tree.highlightActiveItem(frameSetModule, highlightID); }
-
-       // Filters the tree by setting a class on items not matching search input string
-function filter(strToDim)      {
-       filterTraverse($("bodyTag").getElementsByClassName("tree")[0],strToDim);
-}
-
-
-       // returns the inner content of an item, this is need because gecko does not know the innerText property
-function getInnerText(el)      {
-       if (el.innerText)       {
-               return el.innerText;
-       } else {
-               return el.textContent;
-       }
-}
-
-function filterTraverse (eUL,strToDim) {
-       var searchRegex = new RegExp(strToDim, "i");
-       eUL.immediateDescendants().each(function(item) {
-               item.immediateDescendants().each(function(eLI) {
-                       if (eLI.nodeName=="UL") {
-                               filterTraverse(eLI,strToDim);
-                       };
-                       if (eLI.nodeName=="SPAN")       {
-                               if (strToDim)   {
-                                       if (getInnerText(eLI).search(searchRegex) != -1) {
-                                               eLI.removeClassName("not-found");
-                                       } else {
-                                               eLI.addClassName("not-found");
-                                       }
-                               } else {
-                                       eLI.removeClassName("not-found");
-                               }
-                       }
-               });
-       });
-}
-
 
 var Tree = {
        thisScript: 'ajax.php',
@@ -166,7 +118,7 @@ var Tree = {
                top.fsMod.navFrameHighlightedID[frameSetModule] = highlightID;
                if ($(highlightID)) Element.addClassName(highlightID, this.highlightClass);
        }
-}
+};
 
 
 
@@ -245,4 +197,74 @@ var DragDrop = {
                var code = '<div id="dragIcon" style="visibility: hidden;">&nbsp;</div>';
                new Insertion.Bottom(document.getElementsByTagName('body')[0], code);
        }
+};
+
+
+
+/**
+ *
+ * @author     Ingo Renner <ingo@typo3.org>
+ **/
+var PageTreeFilter = {
+       field: 'treeFilter',
+       resetfield: 'treeFilterReset',
+
+       /**
+        * Filters the tree by setting a class on items not matching search input string
+        * tested in FF2, S3, IE6, IE7
+        */
+       filter: function() {
+               var searchString = $F(this.field).toLowerCase();
+               var pages = $$('#treeRoot .dragTitle a');
+               pages.each(function(el) {
+                       if (el.innerHTML.toLowerCase().include(searchString)) {
+                               el.up().removeClassName('not-found');
+                       } else {
+                               el.up().addClassName('not-found');
+                       }
+               });
+               this.toggleReset();
+       },
+
+
+       /**
+        * toggles the visibility of the reset button
+        */
+       toggleReset: function() {
+               var searchFieldContent = $F(this.field);
+               var resetButton = $(this.resetfield);
+
+               if (searchFieldContent != '' && resetButton.getStyle('visibility') == 'hidden') {
+                       resetButton.setStyle({ visibility: 'visible'} );
+               } else if (searchFieldContent == '' && resetButton.getStyle('visibility') == 'visible') {
+                       resetButton.setStyle( {visibility: 'hidden'} );
+               }
+       },
+
+       /**
+        * resets the search field
+        */
+       resetSearchField: function() {
+               if ($(this.resetfield).getStyle('visibility') == 'visible') {
+                       $(this.field).value = '';
+                       PageTreeFilter.filter('');
+               }
+       }
+};
+
+
+// Call this function, refresh_nav(), from another script in the backend if you want
+// to refresh the navigation frame (eg. after having changed a page title or moved pages etc.)
+//             See t3lib_BEfunc::getSetUpdateSignal()
+// please use the function in the "Tree" object for future implementations
+function refresh_nav() {
+       window.setTimeout('Tree.refresh();',0);
 }
+
+// Deprecated since 4.1.
+// Another JS function, for highlighting rows in the page tree, kept alive for backwards
+// compatibility. Please use the function in the "Tree" object for future implementations.
+function hilight_row(frameSetModule, highLightID) {
+       Tree.highlightActiveItem(frameSetModule, highlightID);
+}
+