summaryrefslogtreecommitdiffstats
path: root/js/foundation/foundation.offcanvas.js
blob: cc1a0f2b56309f2316219de117d296bafb11d443 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
;
(function ($, window, document, undefined) {
    'use strict';

    Foundation.libs.offcanvas = {
        name: 'offcanvas',

        version: '5.5.0',

        settings: {
            open_method: 'move',
            close_on_click: false
        },

        init: function (scope, method, options) {
            this.bindings(method, options);
        },

        events: function () {
            var self = this,
                S = self.S,
                move_class = '',
                right_postfix = '',
                left_postfix = '';

            if (this.settings.open_method === 'move') {
                move_class = 'move-';
                right_postfix = 'right';
                left_postfix = 'left';
            } else if (this.settings.open_method === 'overlap_single') {
                move_class = 'offcanvas-overlap-';
                right_postfix = 'right';
                left_postfix = 'left';
            } else if (this.settings.open_method === 'overlap') {
                move_class = 'offcanvas-overlap';
            }

            S(this.scope).off('.offcanvas')
                .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
                    self.click_toggle_class(e, move_class + right_postfix);
                    if (self.settings.open_method !== 'overlap') {
                        S('.left-submenu').removeClass(move_class + right_postfix);
                    }
                    $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
                })
                .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
                    var settings = self.get_settings(e);
                    var parent = S(this).parent();

                    if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
                        self.hide.call(self, move_class + right_postfix, self.get_wrapper(e));
                        parent.parent().removeClass(move_class + right_postfix);
                    } else if (S(this).parent().hasClass('has-submenu')) {
                        e.preventDefault();
                        S(this).siblings('.left-submenu').toggleClass(move_class + right_postfix);
                    } else if (parent.hasClass('back')) {
                        e.preventDefault();
                        parent.parent().removeClass(move_class + right_postfix);
                    }
                    $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
                })
                .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
                    self.click_toggle_class(e, move_class + left_postfix);
                    if (self.settings.open_method !== 'overlap') {
                        S('.right-submenu').removeClass(move_class + left_postfix);
                    }
                    $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
                })
                .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
                    var settings = self.get_settings(e);
                    var parent = S(this).parent();

                    if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
                        self.hide.call(self, move_class + left_postfix, self.get_wrapper(e));
                        parent.parent().removeClass(move_class + left_postfix);
                    } else if (S(this).parent().hasClass('has-submenu')) {
                        e.preventDefault();
                        S(this).siblings('.right-submenu').toggleClass(move_class + left_postfix);
                    } else if (parent.hasClass('back')) {
                        e.preventDefault();
                        parent.parent().removeClass(move_class + left_postfix);
                    }
                    $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
                })
                .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
                    self.click_remove_class(e, move_class + left_postfix);
                    S('.right-submenu').removeClass(move_class + left_postfix);
                    if (right_postfix) {
                        self.click_remove_class(e, move_class + right_postfix);
                        S('.left-submenu').removeClass(move_class + left_postfix);
                    }
                    $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
                })
                .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
                    self.click_remove_class(e, move_class + left_postfix);
                    $('.left-off-canvas-toggle').attr('aria-expanded', 'false');
                    if (right_postfix) {
                        self.click_remove_class(e, move_class + right_postfix);
                        $('.right-off-canvas-toggle').attr('aria-expanded', 'false');
                    }
                });
        },

        toggle: function (class_name, $off_canvas) {
            $off_canvas = $off_canvas || this.get_wrapper();
            if ($off_canvas.is('.' + class_name)) {
                this.hide(class_name, $off_canvas);
            } else {
                this.show(class_name, $off_canvas);
            }
        },

        show: function (class_name, $off_canvas) {
            $off_canvas = $off_canvas || this.get_wrapper();
            $off_canvas.trigger('open').trigger('open.fndtn.offcanvas');
            $off_canvas.addClass(class_name);
        },

        hide: function (class_name, $off_canvas) {
            $off_canvas = $off_canvas || this.get_wrapper();
            $off_canvas.trigger('close').trigger('close.fndtn.offcanvas');
            $off_canvas.removeClass(class_name);
        },

        click_toggle_class: function (e, class_name) {
            e.preventDefault();
            var $off_canvas = this.get_wrapper(e);
            this.toggle(class_name, $off_canvas);
        },

        click_remove_class: function (e, class_name) {
            e.preventDefault();
            var $off_canvas = this.get_wrapper(e);
            this.hide(class_name, $off_canvas);
        },

        get_settings: function (e) {
            var offcanvas = this.S(e.target).closest('[' + this.attr_name() + ']');
            return offcanvas.data(this.attr_name(true) + '-init') || this.settings;
        },

        get_wrapper: function (e) {
            var $off_canvas = this.S(e ? e.target : this.scope).closest('.off-canvas-wrap');

            if ($off_canvas.length === 0) {
                $off_canvas = this.S('.off-canvas-wrap');
            }
            return $off_canvas;
        },

        reflow: function () {
        }
    };
}(jQuery, window, window.document));