Skinnable Page Browser¶

Table of Contents¶

Skinnable Page Browser 1

`Introduction 3 <#1.1.Introduction|outline>`_

Screenshots 3

The three examples are each wrapped with different tags and classes, as well as individual CSS. All this is handled in TypoScript. 3

`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

`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

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.

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¶

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 = <div class="browse-box-wrap">|</div>
        showResultsWrap = <div class="show-results-wrap">|</div>
        browseLinksWrap = <ul class="browse-links-wrap">|</ul>
        showResultsNumbersWrap = <span class="show-results-numbers-wrap">|</span>
        disabledLinkWrap = <li class="disabled-link-wrap">|</li>
        inactiveLinkWrap = <li class="inactive-link-wrap">|</li>
        activeLinkWrap = <li class="active-link-wrap">|</li>

        # Extra TypoScript, made available by Skinnable Browser extension
        # "Go to first"
        disabledFirstLinkWrap = <li class="disabled-first-link">|</li>
        inactiveFirstLinkWrap = <li class="inactive-first-link">|</li>

        # "Go to previous"
        disabledPreviousLinkWrap = <li class="disabled-previous-link">|</li>
        inactivePreviousLinkWrap = <li class="inactive-previous-link">|</li>

        # "Go to next"
        disabledNextLinkWrap = <li class="disabled-next-link">|</li>
        inactiveNextLinkWrap = <li class="inactive-next-link">|</li>

        # "Go to last"
        disabledLastLinkWrap = <li class="disabled-last-link">|</li>
        inactiveLastLinkWrap = <li class="inactive-last-link">|</li>
}

The above example will create the following HTML when the first page is the active page (URLs shortened):

<div class="browse-box-wrap">
 <ul class="browse-links-wrap">
  <li class="disabled-first-link"><< First</li>
  <li class="disabled-previous-link">< Previous</li>
  <li class="active-link-wrap">Page 1</li>
  <li class="inactive-link-wrap"><a href="...">Page 2</a></li>
  <li class="inactive-link-wrap"><a href="...">Page 3</a></li>
  <li class="inactive-link-wrap"><a href="...">Page 4</a></li>
  <li class="inactive-link-wrap"><a href="...">Page 5</a></li>
  <li class="inactive-next-link"><a href="...">Next ></a></li>
  <li class="inactive-last-link"><a href="...">Last >></a></li>
 </ul>
</div>

Configuration¶

The configuration mirrors the plugin.tt_news.pageBrowser object. The example shown previously illustrates the use of the below reference.

disabledFirstLinkWrap = <li class="disabled-first-link">|</li>

Known problems¶

There are no known problems.

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¶