https://www.xanax.com/-/media/Base-Themes/Components-Theme/Scripts/component-flip.js

1/**
2 * Component Flip
3 * @module Flip
4 * @param  {jQuery} $ Instance of jQuery
5 * @return {Object} List of flip methods
6 */
7XA.component.flip = (function($) {
8    /**
9     * This object stores all public api methods
10     * @type {Object.<Methods>}
11     * @memberOf module:Flip
12     * @
13     * */
14    var api = {
15            /**
16             * equalSideHeight set css "min-height" property with value that is
17             * equal to size of bigger flip side 
18             * @param {jQuery<DOMElement>} $el  Root DOM element of Flip component wrapped by jQuery 
19             * @memberof module:Flip
20             * @method equalSideHeight
21             */
22            equalSideHeight: function($el) {
23                var side0 = $el.find(".Side0"),
24                    side1 = $el.find(".Side1"),
25                    slide0Height = this.calcSlideSizeInToggle(side0),
26                    slide1Height = this.calcSlideSizeInToggle(side1),
27                    maxHeight = Math.max(slide0Height, slide1Height);
28                $el.find(".flipsides").css({ "min-height": maxHeight + "px" });
29                side0.add(side1).css({ bottom: 0 });
30            },
31            /**
32             * calcSlideSizeInToggle calculates size of slide content
33             * @param {jQuery<DOMElement>} $slide Slide DOM Element of flip component
34             * @memberof module:Flip
35             * @method calcSlideSizeInToggle
36             * @return {number} size
37             */
38            calcSlideSizeInToggle: function($slide) {
39                var child = $slide.find(">div"),
40                    size = 0;
41                child.each(function(pos, el) {
42                    size += $(el).outerHeight(true);
43                });
44                size += parseInt($slide.css("padding-top"));
45                size += parseInt($slide.css("padding-bottom"));
46                return size;
47            },
48            /**
49             * equalSideHeightInToggle method that called from component toggle 
50             * to make all slides inside same height
51             * @param {jQuery<DOMElement>} $el  Root DOM element of Flip component wrapped by jQuery 
52             * @memberof module:Flip
53             * @method equalSideHeightInToggle
54             */
55            equalSideHeightInToggle: function($el) {
56                var side0 = $el.find(".Side0"),
57                    side1 = $el.find(".Side1"),
58                    slide0Height = this.calcSlideSizeInToggle(side0),
59                    slide1Height = this.calcSlideSizeInToggle(side1),
60                    maxHeight = Math.max(slide0Height, slide1Height);
61                $el.find(".flipsides").css({ "min-height": maxHeight + "px" });
62                side0.add(side1).css({ bottom: 0 });
63            }
64        };
65
66    function detectMobile() {
67        return "ontouchstart" in window;
68    }
69    /**
70     * calcHeightOnResize method calls
71     * ["equalSideHeight"]{@link module:Flip.equalSideHeight} method
72     * for all initialized Flip components
73     * @memberOf module:Flip
74     * @method
75     * @alias module:Flip.initInstance
76     * @private
77     */
78    function calcHeightOnResize() {
79        var flip = $(".flip.initialized");
80        flip.each(function() {
81            api.equalSideHeight($(this));
82        });
83    }
84    /**
85     * initInstance method binds toggling "active" class for component
86     * an Flip element
87     * @memberOf module:Flip
88     * @method
89     * @param {jQuery} component Root DOM element of flip component wrapped by jQuery
90     * @alias module:Flip.initInstance
91     */
92    api.initInstance = function(component) {
93        // Set tabindex=0 for first header
94        component.find('[class*="Side0"]').attr("tabindex", "0");
95        //
96        if (component.hasClass("flip-hover") && !detectMobile()) {
97            component.hover(
98                function() {
99                    component.addClass("active");
100                },
101                function() {
102                    component.removeClass("active");
103                }
104            );
105        } else {
106            component.on("click", function() {
107                component.toggleClass("active");
108            });
109        }
110    };
111    /**
112     * init method calls in a loop for each
113     * flip component on a page and runs Flip's
114     * ["initInstance"]{@link module:Flip.api.initInstance},
115     * ["equalSideHeight"]{@link module:Flip.equalSideHeight} methods.
116     * Added watcher to "resize" event on window that call
117     * ["calcHeightOnResize"]{@link module:Flip.calcHeightOnResize}
118     *
119     * @memberOf module:Flip
120     * @alias module:Flip.init
121     */
122    api.init = function() {
123        var flip = $(".flip:not(.initialized)");
124        $(window).on("resize", function() {
125            calcHeightOnResize();
126        });
127        flip.each(function() {
128            var $flipModule = $(this).find(".flipsides");
129            $flipModule.find(".Side0").attr("tabindex", "0");
130            api.initInstance($(this));
131            $(this).addClass("initialized");
132            api.equalSideHeight($(this));
133        });
134    };
135    return api;
136})(jQuery, document);
137
138XA.register("flip", XA.component.flip);