.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ====================== Skinnable Page Browser ====================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Kasper Ligaard :Changed: 2009-08-31T13:23:17.340000000 :Classification: daimi_skinnablepagebrowser :Keywords: forAdmins :Author: Kasper Ligaard :Email: kasperl@cs.au.dk :Info 4: :Language: en |img-1| |img-2| Skinnable Page Browser - daimi\_skinnablepagebrowser .. _Skinnable-Page-Browser: Skinnable Page Browser ====================== Extension Key: daimi\_skinnablepagebrowser Language: en Keywords: forAdmins Copyright 2000-2008, Kasper Ligaard, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `Skinnable Page Browser 1 <#1.Skinnable%20Page%20Browser|outline>`_ **`Introduction 3 <#1.1.Introduction|outline>`_** `Screenshots 3 <#1.1.1.Screenshots|outline>`_ `The three examples are each wrapped with different tags and classes, as well as individual CSS. All this is handled in TypoScript. 3 <#The% 20three%20examples%20are%20each%20wrapped%20with%20different%20tags%20 and%20classes,%20as%20well%20as%20individual%20CSS.%20All%20this%20is% 20handled%20in%20TypoScript.|outline>`_ **`Users manual 4 <#1.2.Users%20manual|outline>`_** **`This extension is for website administrators. The extension is setup in Typoscript. 4 <#This%20extension%20is%20for%20website%20admin istrators.%20The%20extension%20is%20setup%20in%20Typoscript.|outline>` _** **`The extension provides three Typoscript template examples with different layouts: “Digg”, “AU” and “Plain”. Note that these example templates expects the PAGE object variable to be called page; if your PAGE object variable has another name (e.g. “frame”), then you must fix that yourself. 4 <#The%20extension%20provides%20three%20Typoscript %20template%20examples%20with%20different%20layouts:%20%E2%80%9CDigg%E 2%80%9D,%20%E2%80%9CAU%E2%80%9D%20and%20%E2%80%9CPlain%E2%80%9D.%20Not e%20that%20these%20example%20templates%20expects%20the%20PAGE%20object %20variable%20to%20be%20called%20page;%20if%20your%20PAGE%20object%20v ariable%20has%20another%20name%20(e.g.%20%E2%80%9Cframe%E2%80%9D),%20t hen%20you%20must%20fix%20that%20yourself.|outline>`_** **`Administration 5 <#1.3.Administration|outline>`_** **`The Skinnable page class needs to be included, and then attached to the tt\_news. This can be done as follows from a TypoScript Template: 5 <#The%20Skinnable%20page%20class%20needs%20to%20be%20included,%20and %20then%20attached%20to%20the%20tt_news.%20This%20can%20be%20done%20as %20follows%20from%20a%20TypoScript%20Template:|outline>`_** **`# Include the php script for the pageBrowser userfunction 5 <##%20I nclude%20the%20php%20script%20for%20the%20pageBrowser%20userfunction|o utline>`_** **`includeLibs.userPageBrowserFunc = EXT:daimi\_skinnablepagebrowser/class.skinnablePageBrowser.php 5 <#inc ludeLibs.userPageBrowserFunc%20=%20EXT:daimi_skinnablepagebrowser/clas s.skinnablePageBrowser.php|outline>`_** **`# Attach browser function to the hook in tt\_news 5 <##%20Attach%20 browser%20function%20to%20the%20hook%20in%20tt_news|outline>`_** **`plugin.tt\_news.userPageBrowserFunc = user\_SkinnablePageBrowser->browser 5 <#plugin.tt_news.userPageBrowser Func%20=%20user_SkinnablePageBrowser-%3Ebrowser|outline>`_** **`Configuration 6 <#1.4.Configuration|outline>`_** **`The configuration mirrors the plugin.tt\_news.pageBrowser object. The example shown previously illustrates the use of the below reference. 6 <#The%20configuration%20mirrors%20the%20plugin.tt_news.pa geBrowser%20object.%20The%20example%20shown%20previously%20illustrates %20the%20use%20of%20the%20below%20reference.|outline>`_** `Reference 6 <#1.4.1.Reference|outline>`_ **`Known problems 7 <#1.5.Known%20problems|outline>`_** **`To-Do list 8 <#1.6.To-Do%20list|outline>`_** **`ChangeLog 9 <#1.7.ChangeLog|outline>`_** `Version 1.0 9 <#1.7.1.Version%201.0|outline>`_ .. _Introduction: Introduction ------------ This extension provides a *page browser* for the extension tt\_news. A page browser is shown when there are too many news stories to show on one page. It allows the website user to navigate through the news articles. This extension extends the standard tt\_news page browser with the possibility to wrap and style the 'First', 'Last', 'Previous' and 'Next' buttons. .. _Screenshots: Screenshots ^^^^^^^^^^^ The three examples are each wrapped with different tags and classes, as well as individual CSS. All this is handled in TypoScript. |img-3| *Illustration 1:An adaptation of the digg.com pagebrowser.* |img-4| *Illustration 2:AU pagebrowser (University of Aarhus).* |img-5| *Illustration 3:A very plain and simple layout. Good as a starting point for making your own layout and skinning.* .. _Users-manual: Users manual ------------ This extension is for website administrators. The extension is setup in Typoscript. The extension provides three Typoscript template examples with different layouts: “Digg”, “AU” and “Plain”. Note that these example templates expects the PAGE object variable to be called page; if your PAGE object variable has another name (e.g. “frame”), then you must fix that yourself. .. _Administration: Administration -------------- The Skinnable page class needs to be included, and then attached to the tt\_news. This can be done as follows from a TypoScript Template: :: # Include the php script for the pageBrowser userfunction includeLibs.userPageBrowserFunc = EXT:daimi_skinnablepagebrowser/class.skinnablePageBrowser.php # Attach browser function to the hook in tt_news plugin.tt_news.userPageBrowserFunc = user_SkinnablePageBrowser->browser An example configuration is shown below. The lower part are special to *Skinnable Page Browser* is shown with **bold** font and a lightblue backgroundcolor; the rest are standard TypoScript as found in the tt\_news manual. :: # Configure page browser presentation (settings and layout) plugin.tt_news.pageBrowser { # Standard tt_news TypoScript maxPages = 10 showPBrowserText = 1 dontLinkActivePage = 1 showResultCount = 0 alwaysPrev = 0 showFirstLast = 1 hscText = 1 pagefloat = center showRange = 0 # Wrappings defined in standard tt_news browseBoxWrap =
|
showResultsWrap =
|
browseLinksWrap = showResultsNumbersWrap = | disabledLinkWrap =
  • |
    • inactiveLinkWrap =
  • |
    • activeLinkWrap =
  • |
    • # Extra TypoScript, made available by Skinnable Browser extension # "Go to first" disabledFirstLinkWrap =
  • |
    • inactiveFirstLinkWrap =
  • |
    • # "Go to previous" disabledPreviousLinkWrap =
  • |
    • inactivePreviousLinkWrap =
  • |
    • # "Go to next" disabledNextLinkWrap =
  • |
    • inactiveNextLinkWrap =
  • |
    • # "Go to last" disabledLastLinkWrap =
  • |
    • inactiveLastLinkWrap =
  • |
    • } The above example will create the following HTML when the first page is the active page (URLs shortened): ::
    .. _Configuration: Configuration ------------- The configuration mirrors the plugin.tt\_news.pageBrowser object. The example shown previously illustrates the use of the below reference. .. _Reference: Reference ^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _disabledFirstLinkWrap: disabledFirstLinkWrap """"""""""""""""""""" .. container:: table-row Property disabledFirstLinkWrap Data type wrap Description Wraps the whole item. Example: :: disabledFirstLinkWrap =
  • |
    • Default .. _inactiveFirstLinkWrap: inactiveFirstLinkWrap """"""""""""""""""""" .. container:: table-row Property inactiveFirstLinkWrap Data type wrap Description Wraps the whole item. Default .. _disabledLastLinkWrap: disabledLastLinkWrap """""""""""""""""""" .. container:: table-row Property disabledLastLinkWrap Data type wrap Description Wraps the whole item. Default .. _inactiveLastLinkWrap: inactiveLastLinkWrap """""""""""""""""""" .. container:: table-row Property inactiveLastLinkWrap Data type wrap Description Wraps the whole item. Default .. _disabledPreviousLinkWrap: disabledPreviousLinkWrap """""""""""""""""""""""" .. container:: table-row Property disabledPreviousLinkWrap Data type wrap Description Wraps the whole item. Default .. _inactivePreviousLinkWrap: inactivePreviousLinkWrap """""""""""""""""""""""" .. container:: table-row Property inactivePreviousLinkWrap Data type wrap Description Wraps the whole item. Default .. _disabledNextLinkWrap: disabledNextLinkWrap """""""""""""""""""" .. container:: table-row Property disabledNextLinkWrap Data type wrap Description Wraps the whole item. Default .. _inactiveNextLinkWrap: inactiveNextLinkWrap """""""""""""""""""" .. container:: table-row Property inactiveNextLinkWrap Data type wrap Description Wraps the whole item. Default .. _disabledLinkWrap: disabledLinkWrap """""""""""""""" .. container:: table-row Property disabledLinkWrap Data type wrap Description Wraps the whole item. Default .. _inactiveLinkWrap: inactiveLinkWrap """""""""""""""" .. container:: table-row Property inactiveLinkWrap Data type wrap Description Wraps the whole item. Default .. ###### END~OF~TABLE ###### [plugin.tt\_news.pageBrowser] The above properties are those that are extra, i.e. provided by Skinnable Page Browser. tt\_news provides other properties: Those can be found in the tt\_news manual. .. _Known-problems: Known problems -------------- There are no known problems. .. _To-Do-list: To-Do list ---------- Create other layout options. For instance Digg uses “1, 2, … 3, 4, 5, … 6, 7”, i.e. they show the first pages, then an ellipsis, then the current pages, then another ellipsis and finally the last page numbers (the example shown has 7 pages total). .. _ChangeLog: ChangeLog --------- .. _Version-1-0: Version 1.0 ^^^^^^^^^^^ \- Implemented the eight extra TypoScript properties for First, Last, Previous and Next in both disabled and inactive versions. 9 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :id: grafik1 .. :name: grafik1 .. :width: 100% .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :id: grafik2 .. :name: grafik2 .. :width: 100% .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :id: grafik3 .. :name: grafik3 .. :width: 100%