Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heimrichhannot/contao-bootstrapper
Adjust contao elements & markups, to take advantage of twitter bootstrap.
https://github.com/heimrichhannot/contao-bootstrapper
Last synced: about 1 month ago
JSON representation
Adjust contao elements & markups, to take advantage of twitter bootstrap.
- Host: GitHub
- URL: https://github.com/heimrichhannot/contao-bootstrapper
- Owner: heimrichhannot
- Created: 2014-11-05T15:06:32.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2021-01-12T09:42:17.000Z (almost 4 years ago)
- Last Synced: 2024-04-15T08:06:34.055Z (8 months ago)
- Language: PHP
- Size: 9.39 MB
- Stars: 2
- Watchers: 6
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Bootstrapper
Contao external CSS & JS assets groups with bootstrap and font-awesome support.
## Features
- Adds the bootstrap-slider as inputType to the FE
### Form/EFG
- Supports Ajax Form Handling. Support Messages can be easily configured inside the form, within a custom group like fieldsets.
### Module
#### ModuleNewsReader
- Display news details as contao of bootstrap modal window, if selected news_full_modal.html5 template
## Bootstrapper components
### Default components
Disable in Page-layout, if you dont want to use these components.
- [bootstrap-select] (https://github.com/silviomoreto/bootstrap-select) : styled select input with live-search, groups and mobile support - *boostrap.js is required, Extassets\ExtJs group with added bootstrapper.js should be added to tl_layout*
- [bootstrap-flatpickr] (https://github.com/chmln/flatpickr) : styled datepicker with time and datepicker inclduing native support on mobile devices
- [bootstrap-slider] (https://github.com/seiyria/bootstrap-slider) : input slider with ranged slider support
- [bootstrap-tooltips] (http://getbootstrap.com/javascript/#tooltips) : auto-initialize default bootstrap tooltips `[data-toggle="tooltip"]` - *boostrap.js is required, Extassets\ExtJs group with added bootstrapper.js should be added to tl_layout*
- scroll-smooth : Scroll smooth to anchor targets
#### bootstrap-scroll-smooth
If you want to set an offset, for example for a fixed header, you can provide `data-scroll-smooth-offset` at you body element within fe_page.html5
You can provide both integers or multiple element selectors, do calculate the offset height, that should be subtracted from the target offset.
Selectors have the advantage, that in case you have a responsive website, the offset updates from its element height.
You are able to set the animation duration by adding `data-scroll-smooth-duration` to the body element and `data-scroll-smooth-easing` for the easing function.
Example - Integer:
```
```
Example - Selectors:
```
```
## Bootstrapper form field eval extension
Option | Type | Default | InputTypes | Description
------ | ---- | ------- | ----------- | -----------
hideLabel | boolean | false | all | Hide label for this input
explanation | string | null | all | Adds an explanation to the input
showGroupLabel | boolean | false | checkbox/radio |
groupLabel | string | null | checkbox/radio |
changeFile | string | Change | upload | Label that will be displayed when a file has been selected.
removeFile | string | Remove | upload | Label that will be displayed to remove file when a file has been selected.
fileIconClass | string | fa fa-file | upload | Icon css class that will be shown before the uploaded file name.
singleSelect | boolean | false | checkbox | Make a checkbox behave like radio buttons, with the option to disable a selection again.
showDescription | boolean | false | all | Show the description label below the input as help-block (text replaced with error message in case).
inline | boolean | true | checkbox, radio | Show checkbox and radio inputs inline.
toolbar | string | undo redo | bold italic | bullist numlist outdent indent | link unlink | textarea | Add a custom tinyMCE toolbar.
content_css | string | false | textarea | Add a valid location to an css file, that should be loaded as tinyMCE content.css.
disableOptGroups | array | array() | select | Enter the name of the optgroups that should be disabled.
size | integer | | select | The value of the size attribute
slider | array | | slider | Contains information for the bootstrap input slider
invisible | boolean | false | all | Determines whether a field should be invisible (css display: none); the field still is in the markup!
inputGroupPrepend | string | null | Add custom `input-group-prepend` content
inputGroupAppend | string | null | Add custom `input-group-append` content
### Flatpickr (datepicker) data attributes
Attribute | Contao dca eval | Type | Default | InputTypes | Description
------ | ---- | ---- | ------- | ----------- | -----------
data-linked-start | linkedStart | string | | text | The selector of the start date/time input field linking to the end date/time input field (e.g. #ctrl_startDate).
data-linked-end | linkedEnd | string | | text | The selector of the end date/time input field linking to the start date/time input field (e.g. #ctrl_endDate).
data-min-date | minDate | string | | text | A formatted date/time constraining the date/time picker to a certain minimum date/time.
data-max-date | maxDate | string | | text | A formatted date/time constraining the date/time picker to a certain maximum date/time.
data-minute-steps | minuteSteps | integer | text | The number of seconds in a minute
data-date-format | dateFormat | string | text | The php date format (see: https://chmln.github.io/flatpickr/formatting/)
data-moment-date-format | dateFormat | string | text | The javascript/moment version of data-date-format (Use HeimrichHannot\Haste\Util\DateUtil::formatPhpDateToJsDate() for conversion
#### Example 1: Flatpickr (datepicker only with linked picker)
```
```
#### Example 2: Flatpickr (datepicker with timepicker)
```
```
#### Example 3: Flatpickr (timepicker)
```
```
###### Bootstrapper input slider eval extension
| Name | Type | Default | Description |
| ---- |:----:|:-------:|:----------- |
| id | string | '' | set the id of the slider element when it's created |
| min | float | 0 | minimum possible value |
| max | float | 10 | maximum possible value |
| step | float | 1 | increment step |
| precision | float | number of digits after the decimal of _step_ value | The number of digits shown after the decimal. Defaults to the number of digits after the decimal of _step_ value. |
| orientation | string | 'horizontal' | set the orientation. Accepts 'vertical' or 'horizontal' |
| value | float,array | 5 | initial value. Use array to have a range slider. |
| range | bool | false | make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value. |
| selection | string | 'before' | selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles |
| tooltip | string | 'show' | whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always' |
| tooltip_split | bool | false | if false show one tootip if true show two tooltips one for each handler |
| tooltip_position | string | null | Position of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider. |
| handle | string | 'round' | handle shape. Accepts: 'round', 'square', 'triangle' or 'custom' |
| reversed | bool | false | whether or not the slider should be reversed |
| enabled | bool | true | whether or not the slider is initially enabled |
| formatter | function | returns the plain value | formatter callback. Return the value wanted to be displayed in the tooltip |
| natural_arrow_keys | bool | false | The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value. |
| ticks | array | [ ] | Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options. |
| ticks_positions | array | [ ] | Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent. |
| ticks_labels | array | [ ] | Defines the labels below the tick marks. Accepts HTML input. |
| ticks_snap_bounds | float | 0 | Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds. |
| scale | string | 'linear' | Set to 'logarithmic' to use a logarithmic scale. |
| focus | bool | false | Focus the appropriate slider handle after a value change. |
| labelledby | string,array | null | ARIA labels for the slider handle's, Use array for multiple values in a range slider. |
| value_callback | array('Class', 'function') | | callback function to set value|
| min_callback | array('Class', 'function') | | callback function to set min|
| max_callback | array('Class', 'function') | | macallback function to set max|
| step_callback | array('Class', 'function') | | callback function to set step|
| rangeLabels | array, null | array('min' => array('mode' => 'sync', 'suffix' => '', 'prefix => '', 'max' => array('mode' => 'sync', 'suffix' => '', 'prefix => '')) | Adjust min and max labels for range slider, or set to null if you want them to hide. Sync mode doest update values on slide changed.
## Bootstrapper form field callbacks
Option | Type | Default | InputTypes | Description
------ | ---- | ------- | ----------- | -----------
option_callback | array of valid callbacks | array() | select/checkbox/radio | A callback to modify the data of an single option.
## Bootstrapper inserttags
Tag | Arguments | Example
------ | ---- | -------
btn | Buttton Class :: Button text | {{btn::btn-primary visible-ios::download now}}
btn-dropdown | Button Class :: Button Text :: n Links separated by :: | {{btn-dropdown::btn-primary::download now::App Store::Google play}}
## Form templates
- Naming convention for custom form field templates is defined as: ```bootstrapper_form_[type]_[name of your form field].html5``` e.g. "bootstrapper_form_upload_myfiles.html"