https://github.com/heimrichhannot/contao-overscroll-bundle

This bundle offers overscroll functionality for Contao pages.
https://github.com/heimrichhannot/contao-overscroll-bundle

Last synced: about 1 month ago
JSON representation

This bundle offers overscroll functionality for Contao pages.

• Host: GitHub
• URL: https://github.com/heimrichhannot/contao-overscroll-bundle
• Owner: heimrichhannot
• Created: 2017-10-16T09:06:50.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-09-27T13:45:46.000Z (about 2 years ago)
• Last Synced: 2024-10-20T18:12:17.759Z (2 months ago)
• Language: PHP
• Homepage:
• Size: 239 KB
• Stars: 0
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Contao Overscroll Bundle

This bundle offers overscroll functionality (as often used on news websites) for Contao pages.

![alt preview](docs/screenshot.png)

## Features

- add a mimic content area after the regular content of your pages

- add an animated circle progress bar that changes on scroll event

- after overscrolling this mimic area, some url is opened

### Technical instructions

1\. This bundle depends on [heimrichhannot/contao-blocks](https://github.com/heimrichhannot/contao-blocks) for specifying on which pages (and under which circumstances) the overscroll area is shown.

   Hence the first step is to create a block and inside a block module where you can configure the overscroll area to your needs:

   ![alt block](docs/block.png)

   ![alt block config](docs/block-config.png)

2\. After that you have to define the necessary custom section *(ATTENTION: The ID of the section has to be "overscroll")* and link the block created above in this section.

   ![alt block config](docs/layout.png)

3\. If you want to add custom sections (sections other than header, left, right, main and footer) to the overscrolling area, you'll have to create contao frontend templates named `section_.html5`for each of these areas.

    Example:

    ```

    quicksearch): ?>

        

        


            


                = $this->quicksearch ?>

            

        

        

    

    ```

4\. Finally put the overscroll section into your `fe_page.html5`:


    ```

    sections['overscroll']): ?>

        = $this->sections['overscroll'] ?>

    

    ```

Optional:

5\. The JavaScript and CSS assets of this bundle are organized using [heimrichhannot/contao-components](https://github.com/heimrichhannot/contao-components). Hence you can easily switch them on or off in your layout under "Disable components".

### Hooks

Name | Arguments | Expected return value | Description

---- | --------- | --------------------- | -----------

adjustOverscroll | $frontendTemplate, $blockModule, $page, $layout | - | Adjust the overscroll element by manipulating `$frontendTemplate` (see `HeimrichHannot\OverscrollBundle\EventListener\HookListener::renderOverscrollBlock()` on what is configurable)