DarkVector/collapsibleTabs.js at master · WikiValley/DarkVector · GitHub

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
155
156
157
158
159
160
161
162
(function ($) {
    var rtl = $("html").attr("dir") === "rtl";
    $.fn.collapsibleTabs = function (options) {
        if (!this.length) {
            return this;
        }
        var settings = $.extend({}, $.collapsibleTabs.defaults, options);
        this.each(function () {
            var $el = $(this);
            $.collapsibleTabs.instances = $.collapsibleTabs.instances.add($el);
            $el.data("collapsibleTabsSettings", settings);
            $el.children(settings.collapsible).each(function () {
                $.collapsibleTabs.addData($(this));
            });
        });
        if (!$.collapsibleTabs.boundEvent) {
            $(window).on(
                "resize",
                $.debounce(500, function () {
                    $.collapsibleTabs.handleResize();
                })
            );
            $.collapsibleTabs.boundEvent = true;
        }
        $.collapsibleTabs.handleResize();
        return this;
    };
    $.collapsibleTabs = {
        instances: $([]),
        boundEvent: null,
        defaults: {
            expandedContainer: "#p-views ul",
            collapsedContainer: "#p-cactions ul",
            collapsible: "li.collapsible",
            shifting: false,
            expandCondition: function (eleWidth) {
                return $.collapsibleTabs.calculateTabDistance() >= eleWidth + 1;
            },
            collapseCondition: function () {
                return $.collapsibleTabs.calculateTabDistance() < 0;
            },
        },
        addData: function ($collapsible) {
            var settings = $collapsible.parent().data("collapsibleTabsSettings");
            if (settings) {
                $collapsible.data("collapsibleTabsSettings", { expandedContainer: settings.expandedContainer, collapsedContainer: settings.collapsedContainer, expandedWidth: $collapsible.width(), prevElement: $collapsible.prev() });
            }
        },
        getSettings: function ($collapsible) {
            var settings = $collapsible.data("collapsibleTabsSettings");
            if (!settings) {
                $.collapsibleTabs.addData($collapsible);
                settings = $collapsible.data("collapsibleTabsSettings");
            }
            return settings;
        },
        handleResize: function () {
            $.collapsibleTabs.instances.each(function () {
                var $el = $(this),
                    data = $.collapsibleTabs.getSettings($el);
                if (data.shifting) {
                    return;
                }
                if ($el.children(data.collapsible).length > 0 && data.collapseCondition()) {
                    $el.trigger("beforeTabCollapse");
                    $.collapsibleTabs.moveToCollapsed($el.children(data.collapsible + ":last"));
                }
                if ($(data.collapsedContainer + " " + data.collapsible).length > 0 && data.expandCondition($.collapsibleTabs.getSettings($(data.collapsedContainer).children(data.collapsible + ":first")).expandedWidth)) {
                    $el.trigger("beforeTabExpand");
                    $.collapsibleTabs.moveToExpanded(data.collapsedContainer + " " + data.collapsible + ":first");
                }
            });
        },
        moveToCollapsed: function (ele) {
            var outerData,
                expContainerSettings,
                target,
                $moving = $(ele);
            outerData = $.collapsibleTabs.getSettings($moving);
            if (!outerData) {
                return;
            }
            expContainerSettings = $.collapsibleTabs.getSettings($(outerData.expandedContainer));
            if (!expContainerSettings) {
                return;
            }
            expContainerSettings.shifting = true;
            target = outerData.collapsedContainer;
            $moving
                .css("position", "relative")
                .css(rtl ? "left" : "right", 0)
                .animate({ width: "1px" }, "normal", function () {
                    var data, expContainerSettings;
                    $(this).hide();
                    $('<span class="placeholder" style="display: none;"></span>').insertAfter(this);
                    $(this).detach().prependTo(target).data("collapsibleTabsSettings", outerData);
                    $(this).attr("style", "display: list-item;");
                    data = $.collapsibleTabs.getSettings($(ele));
                    if (data) {
                        expContainerSettings = $.collapsibleTabs.getSettings($(data.expandedContainer));
                        if (expContainerSettings) {
                            expContainerSettings.shifting = false;
                            $.collapsibleTabs.handleResize();
                        }
                    }
                });
        },
        moveToExpanded: function (ele) {
            var data,
                expContainerSettings,
                $target,
                expandedWidth,
                $moving = $(ele);
            data = $.collapsibleTabs.getSettings($moving);
            if (!data) {
                return;
            }
            expContainerSettings = $.collapsibleTabs.getSettings($(data.expandedContainer));
            if (!expContainerSettings) {
                return;
            }
            expContainerSettings.shifting = true;
            $target = $(data.expandedContainer).find("span.placeholder:first");
            expandedWidth = data.expandedWidth;
            $moving
                .css("position", "relative")
                .css(rtl ? "right" : "left", 0)
                .css("width", "1px");
            $target.replaceWith(
                $moving
                    .detach()
                    .css("width", "1px")
                    .data("collapsibleTabsSettings", data)
                    .animate({ width: expandedWidth + "px" }, "normal", function () {
                        $(this).attr("style", "display: block;");
                        var data, expContainerSettings;
                        data = $.collapsibleTabs.getSettings($(this));
                        if (data) {
                            expContainerSettings = $.collapsibleTabs.getSettings($(data.expandedContainer));
                            if (expContainerSettings) {
                                expContainerSettings.shifting = false;
                                $.collapsibleTabs.handleResize();
                            }
                        }
                    })
            );
        },
        calculateTabDistance: function () {
            var $leftTab, $rightTab, leftEnd, rightStart;
            if (!rtl) {
                $leftTab = $("#left-navigation");
                $rightTab = $("#right-navigation");
            } else {
                $leftTab = $("#right-navigation");
                $rightTab = $("#left-navigation");
            }
            leftEnd = $leftTab.offset().left + $leftTab.width();
            rightStart = $rightTab.offset().left;
            return rightStart - leftEnd;
        },
    };
})(jQuery);