https://www.learninstitute.net/Ext/Resources?a=bvYs0aOEOUIk3qjg__c…74LUEPQZtTwomg0BGmq_aLNiUTQGivERI26xCcdAI8,

1
2WS.Namespace.Create("WS.Editor.Menu", (function ()
3{
4    var instance = null;
5
6    var _class = function (element)
7    {
8        if (instance) throw "Cannot create more than one instance of menu.";
9
10        instance = this;
11
12        this._element = element;
13        this._wrapper = element.parent();
14        this._tabsHolder = element.children();
15    };
16
17    _class.GetInstance = function ()
18    {
19        return instance;
20    };
21
22    // Private Method(s)
23    var GetTabsWidth = function ()
24    {
25        var width = 0;
26
27        var firstLevelItems = this._element.find(".item, .separator");
28        for (var i = 0; i < firstLevelItems.length; i++)
29        {
30            width += firstLevelItems.eq(i).outerWidth(true);
31        }
32
33        return width;
34    };
35
36    var SetTabsWidth = function (separatorWidth)
37    {
38        var items = this._element.find(".item");
39        var menuWidth = this._element.width();
40        items.css("width", "");
41
42        if (menuData.scaleTabs)
43        {
44            var largestTab = 0;
45            for (var i = 0; i < items.length; i++)
46            {
47                largestTab = Math.max(largestTab, items.eq(i).outerWidth());
48            }
49
50            if (menuData.justifyTabs)
51            {
52                // equal tabs filling menu (menuWidth - separators&tabSpacings / nbTabs)
53                items.css("width", largestTab); 
54                var totalWidth = GetTabsWidth.call(this);
55                if (totalWidth < menuWidth) 
56                {
57                    items.css("width", "+=" + Math.floor((menuWidth - totalWidth) / items.length)); //fix for firefox (Math.floor)
58                }
59            }
60            else //not justify
61            {
62                                       
63                items.css("width", largestTab);
64            }
65        }
66        else if (menuData.justifyTabs)
67        {
68            // original ratio filling menu
69            var tabsTotalWidth = 0;
70            for (var i = 0; i < items.length; i++)
71            {
72                tabsTotalWidth += items.eq(i).outerWidth();
73            }
74
75            var freeSpace = menuWidth - (menuData.tabFxName === "Separator" ? ((items.length - 1) * 2 * menuData.tabSpacing) + (items.length - 1) * separatorWidth : (items.length - 1) * menuData.tabSpacing);
76            for (var i = 0; i < items.length; i++)
77            {
78                if (freeSpace > tabsTotalWidth) $(this).css("width", Math.floor(freeSpace * items.eq(i).outerWidth() / tabsTotalWidth));
79            }
80        }
81    };
82
83    var OnMenuItemMouseEnter = function () {
84        var subMenuItem = $(this).find('.subMenu').first();
85        if (subMenuItem.length < 1) return;
86
87        var initialLeft = parseInt(subMenuItem.data('initialLeft'));
88        if (!isNaN(initialLeft)) {
89            subMenuItem.css({ left: initialLeft });
90        }
91
92        var mainWrapperWidth = $('#MainWrapper').width();
93        var offset = subMenuItem.offset();
94        var width = subMenuItem.width();
95        var currentLeft = parseInt(subMenuItem.position().left) || 0;
96
97        var newOffsetLeft = Math.min(Math.max(offset.left + width, 0), mainWrapperWidth);
98        var newPositionLeft = (newOffsetLeft - newOffsetLeft) + currentLeft;
99
100        subMenuItem.css({ left: newPositionLeft });
101    };
102
103    var OnSubItemMouseEnter = function () {
104        var subSubMenu = $(this).find('> .subSubMenu').first();
105        if (subSubMenu.length < 1) return;
106
107        subSubMenu.removeClass('subMenuLeft');
108
109        var mainWrapperWidth = $('#MainWrapper').width();
110        var offset = subSubMenu.offset();
111        var width = subSubMenu.width();
112
113        subSubMenu.toggleClass('subMenuLeft', offset.left + width > mainWrapperWidth);
114    };
115
116    // Public Method(s)
117    (function (methods)
118    {
119        methods.Bind = function ()
120        {
121            var menuWidth = this._element.width();
122
123            var Items = this._element.find(".item");
124
125            Items.off('mouseenter', OnMenuItemMouseEnter).on('mouseenter', OnMenuItemMouseEnter);
126
127            // Add separators if applicable
128            var separatorWidth = 0;
129            if (menuData.tabFxName === "Separator") separatorWidth = $(document.createElement("div")).addClass("separator").insertBefore(this._element.find(".

129item + .item")).width();
130
131            // Adjust tabs width according to the parameters
132            SetTabsWidth.call(this, separatorWidth);
133
134            // If tabs (+ separators) require extra space
135            if (GetTabsWidth.call(this) > menuWidth)
136            {
137                // Add "More" tab and a separator if applicable
138                var more = $(document.createElement("div")).addClass("item").attr("id", "More").append($(document.createElement("a")).attr("name", menuData.moreTabText).text(menuData.moreTabText)).append($(document.createElement("div")).addClass("subMenu")).appendTo(this._tabsHolder);
139                if (separatorWidth) more.before($(document.createElement("div")).addClass("separator"));
140
141                SetTabsWidth.call(this, separatorWidth);
142
143                // Move last tab (and remove preceding separator) in the "More" sub menu while tabs require more space
144                while (GetTabsWidth.call(this) > menuWidth && this._element.find(".item").length > 1)
145                {
146                    this._element.find(".item:eq(-2)").prependTo(more.find(".subMenu:first")).removeClass("item").addClass("subItem").css("width", "").find(".subMenu").removeClass("subMenu").addClass("subSubMenu");
147                    this._element.find(".separator + .separator").remove();
148                    if (this._element.find(".item").length == 1) this._element.find(".separator").remove();
149
150                    SetTabsWidth.call(this, separatorWidth);
151                }
152            }
153            var subItem = this._element.find('.subItem');
154            subItem.off('mouseenter', OnSubItemMouseEnter).on('mouseenter', OnSubItemMouseEnter);
155
156            if (menuData.justifyTabs) this._tabsHolder.css("margin-left", 0);
157            else this._tabsHolder.css("margin-left", (this._element.width() - this._tabsHolder.width()) * menuData.tabsPosition / 100);
158
159            this.ReassignActivePage();
160
161            // Centering sub menu
162            if (menuData.subTabsPosition == 50)
163            {
164                var _submenu = this._element.find(".subMenu");
165                if (_submenu.length > 0)
166                {
167                    var _submenuLen = _submenu.length;
168                    for (var i = 0; i < _submenuLen; i++)
169                    {
170                        var _currentItem = _submenu.eq(i);
171                        var _submenuParent = _currentItem.parent();
172                        var _parentWidth = _submenuParent.width();
173                        var _submenuWidth = _currentItem.width();
174                        var _marginLeft = 0;
175                        if (_parentWidth > _submenuWidth) _marginLeft = ((_parentWidth - _submenuWidth) / 2);
176                        else _marginLeft = -((_submenuWidth - _parentWidth) / 2);
177
178                        _currentItem.data("initialLeft", _marginLeft);
179                        _currentItem.css("left", _marginLeft);
180                    }
181                }
182            }
183
184            var tabsHolderHeight = this._element.height() / 2 - this._tabsHolder.height() / 2;
185            this._tabsHolder.css('margin-top', tabsHolderHeight + "px");
186        };
187
188        methods.ReassignActivePage = function () {
189
190            var hash = window.location.hash;
191            var activeMenuItem = this._element.find("a").filter(function () {
192                var dataId = Number($(this).attr('data-id'));
193                var isActiveItem = dataId == pageData.pageId;
194                if (isActiveItem) {
195                    var anchor = $(this).attr('data-anchor') || "";
196                    isActiveItem = (anchor.length == 0 && hash.length == 0) || (anchor == hash);
197                }
198
199                return isActiveItem;
200            });
201            this._element.find("div.active").removeClass("active");
202            activeMenuItem.parent().addClass("active");
203        };
204
205    })(_class.prototype);
206
207    return _class;
208})());