Skip to content

Instantly share code, notes, and snippets.

@lucprincen

lucprincen/JS Example

Created June 27, 2017 15:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lucprincen/105837804e91fb8c4cce8dc2b2f65950 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lucprincen/105837804e91fb8c4cce8dc2b2f65950 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lucprincen created this gist Jun 27, 2017.
    44 changes: 44 additions & 0 deletions JS Example
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    const $ = require('jquery');

    class RadioTabs {

    constructor($component) {
    this.$component = $component;

    this.attachEventHandlers();
    this.selectTabBasedOnRadioValue();
    }

    /**
    * Attach event handlers to component
    *
    * @return {void}
    */
    attachEventHandlers() {
    this.$component.find('input[type="radio"]').on('change', () => this.selectTabBasedOnRadioValue());
    }

    /**
    * Select the correct source based on the radio value
    *
    * @return {void}
    */
    selectTabBasedOnRadioValue() {
    let name = this.$component.find('input[type="radio"]:checked').val();
    this.selectSource(name);
    }

    /**
    * Show the source for the given name and hide the rest
    *
    * @param {string} name
    * @return {void}
    */
    selectSource(name) {
    this.$component.find('[data-tab]').hide();
    this.$component.find(`[data-tab="${name}"]`).show();
    }

    }

    module.exports = RadioTabs;