https://www.stlouisfed.org/-/media/base-themes/components-theme/scripts/component-toggle.js

1/**
2 * Component Toggle
3 * @module Toggle
4 * @param  {jQuery} $ Instance of jQuery
5 * @return {Object} List of toggle methods
6 */
7XA.component.toggle = (function($) {
8    /**
9     * This object stores all public api methods
10     * @type {Object.<Methods>}
11     * @memberOf module:Toggle
12     * */
13    var api = {};
14
15    var properties, instance;
16    /**
17     * Returns list of flip components
18     * @memberOf module:Toggle
19     * @method
20     * @param {DOMElement} instance Root DOM element of toggle component
21     * @alias module:Toggle.openToggle
22     * @private
23     * @return {jQuery} list of flip components
24     */
25    var getFlipList = function(instance) {
26        return $(instance).find(".component.flip");
27    };
28	/**
29     * Adds attribute "open" for "details" tag.
30     * If inside toggle event calendar is added, this method will trigger
31     * "resize method"
32     * If inside toggle flip component is added, it will call
33     * ["Flip.equalSideHeightInToggle"]{@link  module:Flip.equalSideHeightInToggle}
34     * @memberOf module:Toggle
35     * @method
36     * @param {DOMElement} instance Root DOM element of toggle component
37     * @alias module:Toggle.openToggle
38     * @private
39     */
40    var openToggle = function(instance) {
41        var flipList = getFlipList(instance),
42            eventCalendar = $(instance).find('.event-calendar');
43        $(instance).find('details').attr('open', 'open');
44        if (eventCalendar.length){
45            eventCalendar.trigger('resize')
46        }
47        if (flipList.length) {
48            try {
49                XA.component.flip.equalSideHeightInToggle(instance)
50            } catch (e) {
51                /* eslint-disable no-console */
52                console.warn('Error during calculation height of Flip list in toggle'); // jshint ignore:line
53                /* eslint-enable no-console */
54
55            }
56        }
57
58    }
59	/**
60     * Removes attribute "open" for "details" tag
61     * @memberOf module:Toggle
62     * @method
63     * @param {DOMElement} instance Root DOM element of toggle component
64     * @alias module:Toggle.closeToggle
65     * @private
66     */
67    var closeToggle = function(instance) {
68        $(instance).find('details').removeAttr('open');
69    }
70
71	/**
72     * Sets css animation for component-content of an component
73     * @memberOf module:Toggle
74     * @method
75     * @param {DOMElement} instance Root DOM element of toggle component
76     * @alias module:Toggle.setAnimation
77     * @private
78     */
79    var setAnimation = function(instance) {
80        var childComponents = $(instance).find('details summary~.component>.component-content, details summary~.row>.component>.component-content');
81        childComponents.css({
82            'animation-name': properties.easing,
83            'animation-duration': (properties.speed || 500) + 'ms'
84        });
85    };
86	/**
87     * Checks value of properties.expandOnHover;
88     * @memberOf module:Toggle
89     * @method
90     * @alias module:Toggle.isExpandOnHover
91     * @private
92     * @return {Boolean} properties.expandOnHover
93     */
94    var isExpandOnHover = function() {
95        return properties.expandOnHover;
96    };
97    /**
98     * Checks value of properties.expandedByDefault;
99     * @memberOf module:Toggle
100     * @method
101     * @alias module:Toggle.isExpanded
102     * @private
103     * @return {Boolean} properties.expandedByDefault
104     */
105    var isExpanded = function() {
106        return properties.expandedByDefault;
107    };
108    /**
109     * Binds watchers on "summary" element that will call
110     * ["openToggle"]{@link  module:Toggle.openToggle}
111     * method
112     * @memberOf module:Toggle
113     * @method
114     * @param {jQuery} instance Root DOM element of toggle component
115     * @alias module:Toggle.bindEvents
116     * @private
117     */
118	var bindEvents = function(instance) {
119        var summary = $(instance).find('summary');
120        if (isExpandOnHover()) {
121            summary.on('mouseenter', function() {
122                openToggle(instance);
123            });
124        }
125        if (isExpanded()) {
126            openToggle(instance);
127        }
128
129        summary.on('click', function(event) {
130            event.preventDefault();
131            var details = $(this).closest('details')
132            if (details.attr('open')) {
133                closeToggle(instance);
134            } else {
135                openToggle(instance);
136            }
137        });
138    };
139	/**
140     * Call
141     * ["bindEvents"]{@link  module:Toggle.bindEvents}
142     * ["setAnimation"]{@link  module:Toggle.setAnimation}
143     * methods
144     * @memberOf module:Toggle
145     * @method
146     * @param {jQuery} component Root DOM element of toggle component wrapped by jQuery
147     * @alias module:Toggle.initToggle
148     * @private
149     */
150    var initToggle = function(component) {
151        bindEvents(component);
152		setAnimation(component);
153	};
154    /**
155     * Call
156     * ["initToggle"]{@link  module:Toggle.initToggle}
157     * method
158     * @memberOf module:Toggle
159     * @method
160     * @param {jQuery} component Root DOM element of toggle component wrapped by jQuery
161     * @alias module:Toggle.initInstance
162     */
163    api.initInstance = function(component) {
164        initToggle(component);
165    };
166    /**
167     * Finds all not-initialized 
168     * Toggle components and in a loop for each of them
169     * runs Toggle's
170     * ["initInstance"]{@link module:Toggle.initInstance}
171     * method.
172     * @memberOf module:Toggle
173     * @alias module:Toggle.init
174     */
175    api.init = function() {
176        $('.toggle:not(.initialized)').each(function() {
177            instance = $(this);
178            properties = instance.data('properties');
179            api.initInstance(this,properties);
180            instance.addClass('initialized');
181        });
182    };
183
184    return api;
185})(jQuery);
186
187XA.register('component-toggle', XA.component.toggle);