Code Monkey home page Code Monkey logo

collapse's Introduction

Collapse - Minimize Content Element Preview Size in TYPO3's Page Module

This TYPO3 extension provides functionality to expand or collapse the Content Element details within the TYPO3 Page Module.

TYPO3's page module will show arrow up / down buttons on each content element on the right side.

This is especially useful if you have a lot of content or are using nested content elements.

Installation

Install this extension via composer req b13/collapse.

You can also download the extension from the TYPO3 Extension Repository and activate it in the Extension Manager of your TYPO3 installation.

Usage

No configuration is needed nor provided.

The current state - if an element is expanded or collapsed - is stored within the users' settings "UC".

Futher Development

This is our bare minimum feature set, a few features will following along:

  • Enable / disable collapsing per Content Type
  • Disable collapsing in User Settings
  • Support for TYPO3 v12
  • Customizable preview in collapsed state

Credits

This extension was created by Benni Mack in 2023 for b13 GmbH, Stuttgart.

Find more TYPO3 extensions we have developed that help us deliver value in client projects. As part of the way we work, we focus on testing and best practices ensuring long-term performance, reliability, and results in all our code.

collapse's People

Contributors

bmack avatar davidsteeb avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

collapse's Issues

Feature request: extension configuration by user

Hi there, thank you for the extension, it is really promising. Sadly, I had to deinstall it for one of my clients, as one of the editors experienced severe problems (they would always find all of the items closed again, no status remembering for them). For the others, it worked fine, but as this is the power user, we had to reconsider.
I would like to ask for two configuration options per user, which would mitigate such problems and cater for personal preference.

  1. allow a user to deactivate the extension in their user settings. No trace will remain, or the collapse button will just be there but inactive, all items are open - like the ext was never there.
  2. allow initially all items to be open, not closed as in the current version. Editors can then choose whether to collapse all items (in their user settings) and use the ext as is now, or choose to have them all open and only collapse what is necessary.

Thank your for consideration and all the great extensions you provide.

Collapse state is still not saved in user settings

Collapsing some elements on a page and later revisiting the same page with the same user displays all elements in the expanded state. According to readme, I would expect the state of collapsed elements to be restored, same as #1.

I can confirm this behavior for TYPO3 11.5.30 and Collapse 1.0.0, the collapse state was not saved when I revisited the page.

After some troubleshooting, it looks like the field is not created in the user settings. You either do an addToList or removeFromList in PageModuleCollapse.js, but the field b13.collapse is never set.

I missed something like that in your PageModuleCollapse.js:

if (PersistentStorage.isset('B13.Collapse') === false) {
     PersistentStorage.set('B13.Collapse','');
}

On the first call, the field is created so that I can add or remove a value. This works for me.

Plans for v12 support

Hi there,

are there plans for a v12 support?
Would go deeper into that extension if there is no short-term plan or existing work which can be released soon.

wrong arrow icon after first click

I installed the extension and noticed that all content elements are now collapsed automatically by default (not sure if that is the intended behaviour). The to-top arrow is shown in the button.

grafik

when I click on the icon to expand the preview, the preview opens but the icon doesn't change:

grafik

it changes only after I click another time.

Collapse state is not saved in user settings

Collapsing some elements on a page and later revisiting the same page with the same user displays all elements in the expanded state. According to readme, I would expect the state of collapsed elements to be restored.

Sometimes all elements are collapsed by default, unable to change state

Update: Problem might be due to using outdated browser. So, better alternative might be updating browser. See compat. matrix: https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded#browser_compatibility


It has been reported at least twice since extension was activated. At first I could not reproduce it, but after switching browser from Chromium to Firefox, I could.

It was reported that all elements were collapsed. It was possible to expand individual elements, but after reloading the page, the behaviour was the same (all elements collapsed).

Overrall, we saw 2 different problems:

  1. when element was collapsed, this was not saved. Looks similar to #1 and #7 and seemed to be fixed with #10
  2. (this issue) all elements collapsed, not possible to change behaviour. Depends on Browser

I will create PR.

Possible solution

changing

- if (btn.ariaExpanded == 'true') {
+ if (btn.getAttribute('aria-expanded') == 'true') {

in PageModuleCollapse.js

was reported to work.

Info

Behaviour may be browser-dependant, see also

Versions

  • TYPO3: 11.5.38
  • container: 2.3.6
  • collapse: latest 1.0.0 (or latest "main")

reproduced with

  • Firefox 115.12.0esr (64-bit) "Extended Support Release", Xubuntu (Linux)

Note: I usually do not use Firefox, this might be an outdated version. The other colleagues are usually under Windows using automatically updated versions.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.