Skip to content

Instantly share code, notes, and snippets.

@weaverryan

weaverryan/add-transition.js Secret

Last active October 30, 2023 09:45
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save weaverryan/b5e24b429a4c129f336dbb7b70b353a0 to your computer and use it in GitHub Desktop.
Save weaverryan/b5e24b429a4c129f336dbb7b70b353a0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. weaverryan revised this gist May 2, 2022. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions package.json
    View file
    @@ -0,0 +1,9 @@
    {
    "devDependencies": {
    "ONLY SHOWING RELEVANT PACKAGE VERSIONS FOR THIS EXAMPLE": "",
    "@hotwired/stimulus": "^3.0.0",
    "@symfony/stimulus-bridge": "^3.0.0",
    "stimulus-autocomplete": "^3.0.2",
    "stimulus-use": "^0.50.0-2"
    }
    }
  2. weaverryan revised this gist May 2, 2022. 2 changed files with 24 additions and 15 deletions.
    27 changes: 20 additions & 7 deletions autocomplete-transition_controller.js
    View file
    @@ -1,18 +1,31 @@
    import { Controller } from '@hotwired/stimulus';
    import { addFadeTransition } from '../util/add-transition';
    import { Autocomplete } from 'stimulus-autocomplete';

    export default class extends Controller {
    export default class extends Autocomplete {
    static targets = ['results'];

    areResultsShown = false;

    connect() {
    addFadeTransition(this, this.resultsTarget);
    super.connect();
    }

    set resultsShown(value) {
    this.areResultsShown = value;
    }

    toggle(event) {
    if (event.detail.action === 'open') {
    this.enter();
    } else {
    this.leave();
    }
    get resultsShown() {
    return this.areResultsShown
    }

    open() {
    super.open();
    this.enter();
    }
    close() {
    super.close();
    this.leave();
    }
    }
    12 changes: 4 additions & 8 deletions index.html.twig
    View file
    @@ -1,26 +1,22 @@
    <div
    class="input-group"
    {{ stimulus_controller({
    'autocomplete': {
    url: path('app_homepage', { preview: 1 }),
    skipHiddenProperty: true
    },
    'autocomplete-transition': {}
    'autocomplete-transition': {
    url: path('app_homepage', { preview: 1 })
    }
    }) }}
    data-action="toggle->autocomplete-transition#toggle"
    >
    <input
    name="q"
    value="{{ searchTerm }}"
    placeholder="Search products..."
    type="search"
    class="form-control"
    data-autocomplete-target="input"
    {{ stimulus_target('autocomplete-transition', 'input') }}
    >

    <div
    class="search-preview"
    data-autocomplete-target="results"
    data-autocomplete-transition-target="results"
    ></div>
    </div>
  3. weaverryan created this gist May 2, 2022.
    14 changes: 14 additions & 0 deletions add-transition.js
    View file
    @@ -0,0 +1,14 @@
    import { useTransition } from 'stimulus-use';

    export function addFadeTransition(controller, element) {
    useTransition(controller, {
    element,
    enterActive: 'fade-enter-active',
    enterFrom: 'fade-enter-from',
    enterTo: 'fade-enter-to',
    leaveActive: 'fade-leave-active',
    leaveFrom: 'fade-leave-from',
    leaveTo: 'fade-leave-to',
    hiddenClass: 'd-none',
    });
    }
    18 changes: 18 additions & 0 deletions autocomplete-transition_controller.js
    View file
    @@ -0,0 +1,18 @@
    import { Controller } from '@hotwired/stimulus';
    import { addFadeTransition } from '../util/add-transition';

    export default class extends Controller {
    static targets = ['results'];

    connect() {
    addFadeTransition(this, this.resultsTarget);
    }

    toggle(event) {
    if (event.detail.action === 'open') {
    this.enter();
    } else {
    this.leave();
    }
    }
    }
    26 changes: 26 additions & 0 deletions index.html.twig
    View file
    @@ -0,0 +1,26 @@
    <div
    class="input-group"
    {{ stimulus_controller({
    'autocomplete': {
    url: path('app_homepage', { preview: 1 }),
    skipHiddenProperty: true
    },
    'autocomplete-transition': {}
    }) }}
    data-action="toggle->autocomplete-transition#toggle"
    >
    <input
    name="q"
    value="{{ searchTerm }}"
    placeholder="Search products..."
    type="search"
    class="form-control"
    data-autocomplete-target="input"
    >

    <div
    class="search-preview"
    data-autocomplete-target="results"
    data-autocomplete-transition-target="results"
    ></div>
    </div>