Skip to content

feat: support custom gutter template #360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 27, 2023

Conversation

Harpush
Copy link
Collaborator

@Harpush Harpush commented Sep 7, 2023

This adds support for custom gutter template customization.
There are three main features included:

  1. A new structural directive to allow gutter template customization (asSplitGutter).
    The usage as follows:

    <as-split>
      <div *asSplitGutter>...</div>
      <as-split-area>...</as-split-area>
      ...
    </as-split>

    The new asSplitGutter directive allows access to the following context:

    export interface SplitGutterTemplateContext {
      /**
      * The area before the gutter.
      * In RTL the right area and in LTR the left area
      */
      areaBefore: IArea
      /**
      * The area after the gutter.
      * In RTL the left area and in LTR the right area
      */
      areaAfter: IArea
      /**
      * The absolute number of the gutter based on direction (RTL and LTR).
      * First gutter is 1, second is 2, etc...
      */
      gutterNum: number
      /**
       * Whether this is the first gutter.
       * In RTL the most right area and in LTR the most left area
       */
      first: boolean
      /**
       * Whether this is the last gutter.
       * In RTL the most left area and in LTR the most right area
       */
      last: boolean
      /**
      * Whether the gutter is being dragged now
      */
      isDragged: boolean
    }
  2. In case the gutter should have a drag handle allowing dragging only from it, a second directive is introduced - asSplitGutterDragHandle.
    The usage is:

    <div *asSplitGutter>
      <div asSplitGutterDragHandle>...</div>
    </div>
  3. In case a certain element inside the gutter should block dragging (a button for example), a third directive is introduced - asSplitGutterExcludeFromDrag.
    The usage is:

    <div *asSplitGutter>
      <div asSplitGutterExcludeFromDrag>...</div>
    </div>

Implementation notes:

  1. asSplitGutterDragHandle can be declared on multiple elements which means all of them are drag handles.
  2. asSplitGutterExcludeFromDrag can be declared on multiple elements which means all of them are excluded from drag.
  3. asSplitGutterExcludeFromDrag inside asSplitGutterDragHandle works as expected (all of the element is a handle except the excluded area)
  4. asSplitGutterDragHandle inside asSplitGutterExcludeFromDrag is ignored and the whole element marked with exclude is excluded.
  5. asSplitGutter mostly requires width: 100% and height: 100% in order to fill the whole gutter.
  6. If the custom gutter is wider than the declared gutter size (using gutterSize input) the areas will overflow too. So attention is required to match the size of the gutter.

Closes #344
Closes #266
Closes #227
Closes #163
Closes #361

@Harpush Harpush requested a review from beeman September 7, 2023 22:39
@Harpush Harpush force-pushed the support-gutter-customize branch from c14d339 to bbea59f Compare September 8, 2023 12:01
@Harpush Harpush force-pushed the support-gutter-customize branch 4 times, most recently from afd35c6 to 5a71e93 Compare September 9, 2023 11:56
@Harpush Harpush force-pushed the support-gutter-customize branch from 5a71e93 to 16da689 Compare November 16, 2023 07:18
@Harpush Harpush force-pushed the support-gutter-customize branch 2 times, most recently from ec61b23 to 9a810d5 Compare November 26, 2023 23:00
@Harpush Harpush force-pushed the support-gutter-customize branch from 9a810d5 to 2337745 Compare November 26, 2023 23:06
@beeman beeman merged commit 2337745 into angular-split:main Nov 27, 2023
@beeman
Copy link
Collaborator

beeman commented Nov 27, 2023

Thanks @Harpush! This has been released as 17.1.0.

@Harpush Harpush deleted the support-gutter-customize branch November 27, 2023 17:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment