Commit a91f51f3 authored by Tim Wagner's avatar Tim Wagner
Browse files

[BUGFIX] Fix README code elements and update broken icon URLs

parent 4ac27a9c
...@@ -13,12 +13,12 @@ TYPO3 version: >7.6 ...@@ -13,12 +13,12 @@ TYPO3 version: >7.6
## About ## About
This extension adds a new plugin to the content element wizard that provides the user the possibility to define other content elements and pages as tab based content. This extension adds a new plugin to the content element wizard that provides the user the possibility to define other content elements and pages as tab based content.
Furthermore you can define an auto-play mechanism with a custom interval to implement an auto-sliding effect. Furthermore, you can define an auto-play mechanism with a custom interval to implement an auto-sliding effect.
## Installation ## Installation
1. Install the extension with the extension manager 1. Install the extension with the extension manager
2. Add the static template of the extension to your template of your root page or you extension root templates 2. Add the static template of the extension to your template of your root page, or your extension root templates
3. Download and include the MooTools Core or JQuery (If your project already has MooTools or JQuery included, skip this step) 3. Download and include the MooTools Core or JQuery (If your project already has MooTools or JQuery included, skip this step)
...@@ -32,152 +32,158 @@ Furthermore you can define an auto-play mechanism with a custom interval to impl ...@@ -32,152 +32,158 @@ Furthermore you can define an auto-play mechanism with a custom interval to impl
If you want to use the new Fluid Renderer, very little configuration is necessary. Just overwrite the following in your TypoScript Configuration: If you want to use the new Fluid Renderer, very little configuration is necessary. Just overwrite the following in your TypoScript Configuration:
``` ```TypoScript
plugin.tx_dftabs_plugin1.renderer = Fluid plugin.tx_dftabs_plugin1.renderer = Fluid
``` ```
The output can be completely controlled from within the Fluid-Template ```(EXT:df_tabs/Resources/Private/Templates/Standard/Tabs.html)```. Just overwrite it to adjust it to your needs. The output can be completely controlled from within the Fluid-Template `(EXT:df_tabs/Resources/Private/Templates/Standard/Tabs.html)`.
Just overwrite it to adjust it to your needs.
Please note that the Fluid Renderer does not come with preconfigured CSS or JavaScript. You have to add this on your own. Please note that the Fluid Renderer does not come with preconfigured CSS or JavaScript. You have to add this on your own.
#### TypoScript Renderer (deprecated) #### TypoScript Renderer (deprecated)
##### TypoScript Constants ##### TypoScript Constants
# The css file that should be used.
css = EXT:df_tabs/Resources/Public/StyleSheets/df_tabs.css
js { ```TypoScript
# Javascript file that implements the back button for tabs # The css file that should be used.
history = EXT:df_tabs/Resources/Public/Scripts/History/History.js css = EXT:df_tabs/Resources/Public/StyleSheets/df_tabs.css
js {
# Javascript file that implements the back button for tabs
history = EXT:df_tabs/Resources/Public/Scripts/History/History.js
# Router Javascript file (see above) # Router Javascript file (see above)
historyRouting = EXT:df_tabs/Resources/Public/Scripts/History/History.Routing.js historyRouting = EXT:df_tabs/Resources/Public/Scripts/History/History.Routing.js
# Javascript that implements the default tab functionality # Javascript that implements the default tab functionality
app = EXT:df_tabs/Resources/Public/Scripts/df_tabs.js app = EXT:df_tabs/Resources/Public/Scripts/df_tabs.js
# JQuery specific code # JQuery specific code
jqueryApp = EXT:df_tabs/Resources/Public/Scripts/jquery.tabs.js jqueryApp = EXT:df_tabs/Resources/Public/Scripts/jquery.tabs.js
} }
# Enables the usage of the inline javascript that triggers the functionality # Enables the usage of the inline javascript that triggers the functionality
enableJavascript = 1 enableJavascript = 1
# Default tab title if the given information is empty # Default tab title if the given information is empty
defaultTabTitle = Tab defaultTabTitle = Tab
# #
classPrefix = tx-dftabs- classPrefix = tx-dftabs-
# Prefix for classes and ids to prevent html errors and styling problems if multiple plugins are used on the same page # Prefix for classes and ids to prevent html errors and styling problems if multiple plugins are used on the same page
hashName = tab hashName = tab
# Polling interval (in ms) to detect url changes for the history functionality # Polling interval (in ms) to detect url changes for the history functionality
pollingInterval = 1000 pollingInterval = 1000
# Animation speed in ms (if a transition effect between the tabs is used) # Animation speed in ms (if a transition effect between the tabs is used)
animationSpeed = 400 animationSpeed = 400
# the tab index where the animation should start (starts with 0) # the tab index where the animation should start (starts with 0)
startIndex = 0 startIndex = 0
# #
forceUsageOfLeft = false forceUsageOfLeft = false
# Node type that is used for the tab menu # Node type that is used for the tab menu
menuNodeType = li menuNodeType = li
# Node type that is used for the tab content # Node type that is used for the tab content
contentNodeType = div contentNodeType = div
# Javascript callback function that is triggered for the tab switches. The default is no animation # Javascript callback function that is triggered for the tab switches. The default is no animation
animationCallback = animationCallback =
# Remove a substring from all tab-title. Can be either a string, or a regex. This example will remove the string # Remove a substring from all tab-title. Can be either a string, or a regex. This example will remove the string
# 'Foo' if is found at the end of the title. # 'Foo' if is found at the end of the title.
removeFromTitle = Foo$ removeFromTitle = Foo$
# flexform options for the plugin usage with plain typoscript # flexform options for the plugin usage with plain typoscript
# Enables the autoplay functionality # Enables the autoplay functionality
enableAutoPlay = 0 enableAutoPlay = 0
# Interval of the autoplay functionality in ms # Interval of the autoplay functionality in ms
autoPlayInterval = 7000 autoPlayInterval = 7000
# Enables the mouseover event for tab switches instead of simple clicks # Enables the mouseover event for tab switches instead of simple clicks
enableMouseOver = 0 enableMouseOver = 0
# Data Provider Mode: tt_content, pages, combined and typoscript # Data Provider Mode: tt_content, pages, combined and typoscript
mode = tt_content mode = tt_content
# Comma separated list of preferred menu titles # Comma separated list of preferred menu titles
titles = titles =
# Comma-separated list of ids related to the mode; not needed for the typoscript mode; combined mode requires the table name as a prefix of the id (e.g. pages_12,tt_content_14) # Comma-separated list of ids related to the mode; not needed for the typoscript mode; combined mode requires the table name as a prefix of the id (e.g. pages_12,tt_content_14)
data = data =
# pages mode related configuration settings # pages mode related configuration settings
pages { pages {
# Limit of fetched content elements from a page # Limit of fetched content elements from a page
limit = 999 limit = 999
# Order clause for the content elements # Order clause for the content elements
orderBy = colPos,sorting orderBy = colPos,sorting
# Extra filter for content elements from a page # Extra filter for content elements from a page
additionalWhere = AND colPos >= 0 additionalWhere = AND colPos >= 0
# Title field for the tab menu # Title field for the tab menu
titleField = title titleField = title
# Link field for links # Link field for links
linkField = uid linkField = uid
} }
# tt_content mode related configuration settings # tt_content mode related configuration settings
tt_content { tt_content {
# Title field for the tab menu # Title field for the tab menu
titleField = header titleField = header
# Link field for links # Link field for links
linkField = header_link linkField = header_link
} }
```
#### Output customization #### Output customization
There are various settings in the **setup.txt** TypoScript file, which allow you to customize the output beyond css. There are various settings in the **setup.txt** TypoScript file, which allow you to customize the output beyond css.
stdWrap { ```TypoScript
# Tab content title (normally hidden in JS mode) stdWrap {
tabTitle { # Tab content title (normally hidden in JS mode)
wrap = <h4 class="###CLASSES###">|</h4> tabTitle {
} wrap = <h4 class="###CLASSES###">|</h4>
}
# Wrap around all tab content elements
tabContents { # Wrap around all tab content elements
wrap = <div class="###CLASSES###" id="###ID###">|</div> tabContents {
} wrap = <div class="###CLASSES###" id="###ID###">|</div>
}
# Tab content element
tabContent { # Tab content element
wrap = <div class="###CLASSES###" id="###ID###">|</div> tabContent {
} wrap = <div class="###CLASSES###" id="###ID###">|</div>
}
# Wrap around all tab menu entries
tabMenu { # Wrap around all tab menu entries
wrap = <ul class="###CLASSES###" id="###ID###">|</ul> tabMenu {
} wrap = <ul class="###CLASSES###" id="###ID###">|</ul>
}
# Tab menu entry (###LINK### can also be used in combination with the linkField property)
tabMenuEntry { # Tab menu entry (###LINK### can also be used in combination with the linkField property)
wrap = <li id="###ID###" class="###CLASSES###"><a href="###LINK_ANCHOR###">|</a></li> tabMenuEntry {
wrap = <li id="###ID###" class="###CLASSES###"><a href="###LINK_ANCHOR###">|</a></li>
# alternative wrap if you want to jump directly to the tab if the location hash changes
# wrap = <li id="###ID###" class="###CLASSES###"><a href="###LINK_ANCHOR###" id="###LINK_ID###">|</a></li> # alternative wrap if you want to jump directly to the tab if the location hash changes
} # wrap = <li id="###ID###" class="###CLASSES###"><a href="###LINK_ANCHOR###" id="###LINK_ID###">|</a></li>
} }
}
```
#### Plugin Settings #### Plugin Settings
...@@ -197,9 +203,9 @@ Use the tt_content and the pages table to retrieve the content ...@@ -197,9 +203,9 @@ Use the tt_content and the pages table to retrieve the content
##### Pages and content ##### Pages and content
Here you can select pages or single content elements, that should be displayed in a tab: Here you can select pages or single content elements, that should be displayed in a tab:
<img height="20px" width="20px" src="https://camo.githubusercontent.com/c366677d070f7a1775a8c0d2518568c4c3095e72/68747470733a2f2f7261776769742e636f6d2f5459504f332f5459504f332e49636f6e732f6d61737465722f646973742f617070732f617070732d70616765747265652d706167652d64656661756c742e737667"> Opens the "Select Page" dialog <img height="20px" width="20px" src="https://raw.githubusercontent.com/TYPO3/TYPO3.Icons/master/src/apps/apps-pagetree-page-hideinmenu.svg"> Opens the "Select Page" dialog
<br> <br>
<img height="20px" width="20px" src="https://camo.githubusercontent.com/1cd0e59939bcd63da9e8e872decb330de013023b/68747470733a2f2f7261776769742e636f6d2f5459504f332f5459504f332e49636f6e732f6d61737465722f646973742f636f6e74656e742f636f6e74656e742d746578742e737667"> Opens the "Select Page Content" dialog <img height="20px" width="20px" src="https://raw.githubusercontent.com/TYPO3/TYPO3.Icons/master/src/content/content-text.svg"> Opens the "Select Page Content" dialog
--- ---
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment