ICEfaces
  1. ICEfaces
  2. ICE-11363

ace:tabset - Add new 'scrollableTabs' attribute for scrolling tabs support

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-4.2.0.GA, EE-3.3.0.GA_P05
    • Fix Version/s: 4.3, EE-3.3.0.GA_P06
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ace

      Description

      Either create a new component ace:scrollableTabset or enhance the existing ace:tabSet component to implement scrollable Tabs/tabpanes similar to this behavior:-
      http://joshreed.github.io/jQuery-ScrollTabs/

        Activity

        Hide
        Ken Fyten added a comment -

        Assigned to Art for analysis. We may want to implement for 4.3, depending on scope, etc.

        Show
        Ken Fyten added a comment - Assigned to Art for analysis. We may want to implement for 4.3, depending on scope, etc.
        Hide
        Arturo Zambrano added a comment - - edited

        Since we have been talking about creating a simpler tabset component. It would be a good opportunity to create it and include this scrollable feature. After some analysis of the html and javascript involved, it's clear that it would be feasible to code this component from scratch, without having to use a 3rd party widget.

        After analysing the existing ace:tabSet code, it seems to be feasible as well to implement this feature in our existing ace:tabSet component. This would entail modifying some of the YUI code to rewire some selectors and DOM listeners, but there don't seem to be any big challenges to this.

        In either case, a preliminary estimate would be one week of work to complete.

        Show
        Arturo Zambrano added a comment - - edited Since we have been talking about creating a simpler tabset component. It would be a good opportunity to create it and include this scrollable feature. After some analysis of the html and javascript involved, it's clear that it would be feasible to code this component from scratch, without having to use a 3rd party widget. After analysing the existing ace:tabSet code, it seems to be feasible as well to implement this feature in our existing ace:tabSet component. This would entail modifying some of the YUI code to rewire some selectors and DOM listeners, but there don't seem to be any big challenges to this. In either case, a preliminary estimate would be one week of work to complete.
        Hide
        Arturo Zambrano added a comment -

        r52015: added basic scrollable tabs functionality to ace:tabSet

        We're following the approach of adding this functionality to our existing ace:tabSet component, instead of creating a new component, by using the new boolean 'scrollableTabs' attribute. It was possible to add this functionality without any visible issues at the moment (pending regression tests). This functionality still needs some more polish in terms of styling, behaviour and special cases.

        Show
        Arturo Zambrano added a comment - r52015: added basic scrollable tabs functionality to ace:tabSet We're following the approach of adding this functionality to our existing ace:tabSet component, instead of creating a new component, by using the new boolean 'scrollableTabs' attribute. It was possible to add this functionality without any visible issues at the moment (pending regression tests). This functionality still needs some more polish in terms of styling, behaviour and special cases.
        Hide
        Arturo Zambrano added a comment -

        r52024: added logic to disable/enable scroll buttons only when applicable; refactored initial code; corrected alignments; added animation when scrolling

        Show
        Arturo Zambrano added a comment - r52024: added logic to disable/enable scroll buttons only when applicable; refactored initial code; corrected alignments; added animation when scrolling
        Hide
        Arturo Zambrano added a comment -

        r52025: added scrollable tabs demo to showcase

        Show
        Arturo Zambrano added a comment - r52025: added scrollable tabs demo to showcase
        Hide
        Arturo Zambrano added a comment -

        r52028: modified behaviour to hide scroll buttons when the tabs fit in the available width; added code to reevaluate whether the scroll buttons are needed or not when dynamically adding/removing tabs; added scrollable tabs functionality to bottom orientation mode; modified yui code to avoid moving the <ul> element when in bottom orientation mode so that the scrollable tabs can display and work correctly; refactored code to apply this functionality by calling a separate function

        Show
        Arturo Zambrano added a comment - r52028: modified behaviour to hide scroll buttons when the tabs fit in the available width; added code to reevaluate whether the scroll buttons are needed or not when dynamically adding/removing tabs; added scrollable tabs functionality to bottom orientation mode; modified yui code to avoid moving the <ul> element when in bottom orientation mode so that the scrollable tabs can display and work correctly; refactored code to apply this functionality by calling a separate function
        Hide
        Ken Fyten added a comment -

        Re-opened.

        Would it be feasible to make it so if a tab that is partially obscured (off the screen) is selected, it would scroll to be fully visible on the screen?

        Show
        Ken Fyten added a comment - Re-opened. Would it be feasible to make it so if a tab that is partially obscured (off the screen) is selected, it would scroll to be fully visible on the screen?
        Hide
        Arturo Zambrano added a comment -

        r52435: added improvement to do some automatic scrolling on the tabs when selecting a tab that is not fully visible

        Show
        Arturo Zambrano added a comment - r52435: added improvement to do some automatic scrolling on the tabs when selecting a tab that is not fully visible

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Judy Guglielmin
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: