tabbar: more responsive through flexmenu.js
This commit is contained in:
rabuzarus
parent
6cca98f9c2
commit
551cc39385
|
|
@ -1381,7 +1381,9 @@ img.acpopup-img {
|
||||||
|
|
||||||
}
|
}
|
||||||
/* Menubar Tabs */
|
/* Menubar Tabs */
|
||||||
#tabmenu {
|
#tabmenu,
|
||||||
|
.tabbar,
|
||||||
|
.tabbar > li {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/*margin-left: -15px;*/
|
/*margin-left: -15px;*/
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -1403,9 +1405,9 @@ ul.tabs li {
|
||||||
height: 102%;
|
height: 102%;
|
||||||
transition: all .15s ease;
|
transition: all .15s ease;
|
||||||
}
|
}
|
||||||
ul.tabs.visible-xs > li.active {
|
/*ul.tabs.visible-xs > li.active {
|
||||||
min-width: 150px; /* This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here */
|
min-width: 150px; This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here
|
||||||
}
|
}*/
|
||||||
ul.tabs li a {
|
ul.tabs li a {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
@ -1415,6 +1417,13 @@ ul.tabs li a {
|
||||||
ul.tabs li:hover, ul.tabs li.active {
|
ul.tabs li:hover, ul.tabs li.active {
|
||||||
border-bottom-width: 4px;
|
border-bottom-width: 4px;
|
||||||
}
|
}
|
||||||
|
ul.tabbar ul.tabs-extended li.active {
|
||||||
|
width: 100%;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
}
|
||||||
|
ul.tabbar ul.tabs-extended li.active a {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
ul.dropdown-menu li:hover {
|
ul.dropdown-menu li:hover {
|
||||||
border-bottom-width: 0;
|
border-bottom-width: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
98
frameworks/flexMenu/README.md
Normal file
98
frameworks/flexMenu/README.md
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
#flexMenu 1.3
|
||||||
|
flexMenu is a jQuery plugin that lets you create responsive menus that automatically collapse into a "more" drop-down when they run out of space. When there's only space to display one or two items, all the items collapse into a "menu" drop-down.
|
||||||
|
|
||||||
|
[Demo](http://352media.github.com/flexMenu/)
|
||||||
|
|
||||||
|
[Source on GitHub](https://github.com/352Media/flexMenu)
|
||||||
|
|
||||||
|
Written by [Ryan DeBeasi](http://www.ryandebeasi.com/) and [our fantastic contributors](https://github.com/352Media/flexMenu/graphs/contributors).
|
||||||
|
|
||||||
|
##Usage
|
||||||
|
|
||||||
|
First, download flexmenu.js from GitHub or install it with `bower install flexmenu`. Then, add a script tag that references flexMenu. For example: `<script src="flexmenu.js"></script>`.
|
||||||
|
|
||||||
|
Create an unordered list that contains your menu items. In CSS, use `display: inline-block;` or `float: left;` to get the `li` elements to line up horizontally.
|
||||||
|
|
||||||
|
Finally, call flexMenu on an unordered list that contains your menu items:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
$('ul.menu.flex').flexMenu();
|
||||||
|
```
|
||||||
|
|
||||||
|
###AMD/RequireJS
|
||||||
|
|
||||||
|
The plugin can be loaded using an AMD loader such as RequireJS:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
require(['jquery', 'flexmenu'], function ($) {
|
||||||
|
$('ul.menu.flex').flexMenu();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
##Dependencies
|
||||||
|
|
||||||
|
###jQuery
|
||||||
|
I've tested the plugin in jQuery 1.7-1.9. It probably works on older versions, but I haven't tested on those.
|
||||||
|
|
||||||
|
###Modernizr
|
||||||
|
[Modernizr](http://modernizr.com/) is optional. If it's available, flexMenu will use it to detect touch support. If touch support is available, we'll toggle the menu on click. If touch support is not available, we'll toggle the menu on hover in/out. That way, we can avoid triggering the funky [simulated mouseover/mouseout](http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW17) that happens on many touchscreen devices.
|
||||||
|
|
||||||
|
If Modernizr is not available, we'll always toggle the menu on click.
|
||||||
|
|
||||||
|
The zip for flexMenu includes a build of Modernizr contains only touch detection and the has-js/no-js class. Feel free to use this build, or go with more full-featured build if you're using other features. Or, if you do want to always toggle the menu on click, there is no need to include Modernizr at all - just [set up a js/no-js class](http://paulirish.com/2009/avoiding-the-fouc-v3/) and you'll be good to go.
|
||||||
|
|
||||||
|
##Advanced usage
|
||||||
|
|
||||||
|
If you're feeling fancy, you can include any of the following options when calling flexMenu:
|
||||||
|
|
||||||
|
###threshold
|
||||||
|
(integer, defaults to 2)
|
||||||
|
If there are this many items or fewer in the list, we will not display a "View More" link and will instead let the list break to the next line. This is useful in cases where adding a "view more" link would actually cause more things to break to the next line.
|
||||||
|
|
||||||
|
###cutoff
|
||||||
|
(integer, defaults to 2)
|
||||||
|
If there is space for this many or fewer items outside of our "more" popup, just move everything into the more menu. In that case, also use linkTextAll and linkTitleAll instead of linkText and linkTitle. To disable this feature, just set this value to 0.
|
||||||
|
|
||||||
|
###linkText
|
||||||
|
(string, defaults to 'More')
|
||||||
|
What text should we display on the "view more" link?
|
||||||
|
|
||||||
|
###linkTitle
|
||||||
|
(string, defaults to 'View More')
|
||||||
|
What should the title of the "view more" button be?
|
||||||
|
|
||||||
|
###linkTextAll
|
||||||
|
(string, defaults to 'Menu')
|
||||||
|
If we hit the cutoff and collapse all the links into the popup, what text should we display on the "menu" link?
|
||||||
|
|
||||||
|
###linkTitleAll
|
||||||
|
(string, defaults to 'Menu')
|
||||||
|
If we hit the cutoff and collapse all the links into the popup, what should the title of the "menu" link be?
|
||||||
|
|
||||||
|
###showOnHover
|
||||||
|
(boolean, defaults to 'true')
|
||||||
|
Should we we show the menu on hover? If not, we'll require a click. If we're on a touch device - or if Modernizr is not available - we'll ignore this setting and only show the menu on click. The reason for this is that touch devices emulate hover events in unpredictable ways, causing some taps to do nothing.
|
||||||
|
|
||||||
|
###undo
|
||||||
|
(boolean, defaults to 'false')
|
||||||
|
If this is true, we'll move the list items back to where they were before, and remove the "View More" link. This is useful if you actually _do_ want list items to stack in some cases, or if you want to recalculate the menu.
|
||||||
|
|
||||||
|
###popupAbsolute
|
||||||
|
(boolean, defaults to 'true')
|
||||||
|
Should we absolutely position the popup? Usually this is a good idea. That way, the popup can appear over other content and spill outside a parent that has overflow: hidden set. If you want to do something different from this in CSS, just set this option to false.
|
||||||
|
|
||||||
|
###popupClass
|
||||||
|
(string, defaults to '')
|
||||||
|
If this is set, this class will be added to the `flexMenu-popup` element.
|
||||||
|
|
||||||
|
##License
|
||||||
|
|
||||||
|
flexMenu is licensesed under the MIT License, and is free for commercial or personal use.
|
||||||
|
|
||||||
|
Copyright © 2012-2014 352 Inc. & Contributors
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
165
frameworks/flexMenu/flexmenu.custom.js
Normal file
165
frameworks/flexMenu/flexmenu.custom.js
Normal file
|
|
@ -0,0 +1,165 @@
|
||||||
|
/* jQuery.flexMenu 1.3
|
||||||
|
https://github.com/352Media/flexMenu
|
||||||
|
Description: If a list is too long for all items to fit on one line, display a popup menu instead.
|
||||||
|
Dependencies: jQuery, Modernizr (optional). Without Modernizr, the menu can only be shown on click (not hover). */
|
||||||
|
|
||||||
|
(function (factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['jquery'], factory);
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(jQuery);
|
||||||
|
}
|
||||||
|
}(function ($) {
|
||||||
|
var flexObjects = [], // Array of all flexMenu objects
|
||||||
|
resizeTimeout;
|
||||||
|
// When the page is resized, adjust the flexMenus.
|
||||||
|
function adjustFlexMenu() {
|
||||||
|
$(flexObjects).each(function () {
|
||||||
|
$(this).flexMenu({
|
||||||
|
'undo' : true,
|
||||||
|
'target': this.options.target ? this.options.target : false
|
||||||
|
}).flexMenu(this.options);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function collapseAllExcept($menuToAvoid) {
|
||||||
|
var $activeMenus,
|
||||||
|
$menusToCollapse;
|
||||||
|
$activeMenus = $('li.flexMenu-viewMore.active');
|
||||||
|
$menusToCollapse = $activeMenus.not($menuToAvoid);
|
||||||
|
$menusToCollapse.removeClass('active').find('> ul').hide();
|
||||||
|
}
|
||||||
|
$(window).resize(function () {
|
||||||
|
clearTimeout(resizeTimeout);
|
||||||
|
resizeTimeout = setTimeout(function () {
|
||||||
|
adjustFlexMenu();
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
$.fn.flexMenu = function (options) {
|
||||||
|
var checkFlexObject,
|
||||||
|
s = $.extend({
|
||||||
|
'threshold' : 2, // [integer] If there are this many items or fewer in the list, we will not display a "View More" link and will instead let the list break to the next line. This is useful in cases where adding a "view more" link would actually cause more things to break to the next line.
|
||||||
|
'cutoff' : 2, // [integer] If there is space for this many or fewer items outside our "more" popup, just move everything into the more menu. In that case, also use linkTextAll and linkTitleAll instead of linkText and linkTitle. To disable this feature, just set this value to 0.
|
||||||
|
'linkText' : 'More', // [string] What text should we display on the "view more" link?
|
||||||
|
'linkTitle' : 'View More', // [string] What should the title of the "view more" button be?
|
||||||
|
'linkTextAll' : 'Menu', // [string] If we hit the cutoff, what text should we display on the "view more" link?
|
||||||
|
'linkTitleAll' : 'Open/Close Menu', // [string] If we hit the cutoff, what should the title of the "view more" button be?
|
||||||
|
'showOnHover' : true, // [boolean] Should we we show the menu on hover? If not, we'll require a click. If we're on a touch device - or if Modernizr is not available - we'll ignore this setting and only show the menu on click. The reason for this is that touch devices emulate hover events in unpredictable ways, causing some taps to do nothing.
|
||||||
|
'popupAbsolute' : true, // [boolean] Should we absolutely position the popup? Usually this is a good idea. That way, the popup can appear over other content and spill outside a parent that has overflow: hidden set. If you want to do something different from this in CSS, just set this option to false.
|
||||||
|
'popupClass' : '', // [string] If this is set, this class will be added to the popup
|
||||||
|
'undo' : false, // [boolean] Move the list items back to where they were before, and remove the "View More" link.
|
||||||
|
'target': false // Maybe add a target option to define where to place the removed nav items
|
||||||
|
}, options);
|
||||||
|
this.options = s; // Set options on object
|
||||||
|
checkFlexObject = $.inArray(this, flexObjects); // Checks if this object is already in the flexObjects array
|
||||||
|
if (checkFlexObject >= 0) {
|
||||||
|
flexObjects.splice(checkFlexObject, 1); // Remove this object if found
|
||||||
|
} else {
|
||||||
|
flexObjects.push(this); // Add this object to the flexObjects array
|
||||||
|
}
|
||||||
|
if(s.target)
|
||||||
|
$(s.target).hide();
|
||||||
|
return this.each(function () {
|
||||||
|
var $this = $(this),
|
||||||
|
$items = $this.find('> li'),
|
||||||
|
$self = $this,
|
||||||
|
$firstItem = $items.first(),
|
||||||
|
$lastItem = $items.last(),
|
||||||
|
numItems = $this.find('li').length,
|
||||||
|
firstItemTop = Math.floor($firstItem.offset().top),
|
||||||
|
firstItemHeight = Math.floor($firstItem.outerHeight(true)),
|
||||||
|
$lastChild,
|
||||||
|
keepLooking,
|
||||||
|
$moreItem,
|
||||||
|
$moreLink,
|
||||||
|
numToRemove,
|
||||||
|
allInPopup = false,
|
||||||
|
$menu,
|
||||||
|
$target = s.target,
|
||||||
|
i;
|
||||||
|
function needsMenu($itemOfInterest) {
|
||||||
|
var result = (Math.ceil($itemOfInterest.offset().top) >= (firstItemTop + firstItemHeight)) ? true : false;
|
||||||
|
// Values may be calculated from em and give us something other than round numbers. Browsers may round these inconsistently. So, let's round numbers to make it easier to trigger flexMenu.
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (needsMenu($lastItem) && numItems > s.threshold && !s.undo && $this.is(':visible')) {
|
||||||
|
var $popup = $('<ul class="flexMenu-popup" style="display:none;' + ((s.popupAbsolute) ? ' position: absolute;' : '') + '"></ul>'),
|
||||||
|
// Move all list items after the first to this new popup ul
|
||||||
|
firstItemOffset = $firstItem.offset().top;
|
||||||
|
// Add class if popupClass option is set
|
||||||
|
$popup.addClass(s.popupClass);
|
||||||
|
|
||||||
|
if($target){
|
||||||
|
$popup = $('<ul class="flexMenu-popup ' + s.popupClass + '"></ul>')
|
||||||
|
$popup.appendTo($($target));
|
||||||
|
$($target).show();
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i = numItems; i > 1; i--) {
|
||||||
|
// Find all of the list items that have been pushed below the first item. Put those items into the popup menu. Put one additional item into the popup menu to cover situations where the last item is shorter than the "more" text.
|
||||||
|
$lastChild = $this.find('> li:last-child');
|
||||||
|
keepLooking = (needsMenu($lastChild));
|
||||||
|
$lastChild.appendTo($popup);
|
||||||
|
// If there only a few items left in the navigation bar, move them all to the popup menu.
|
||||||
|
if ((i - 1) <= s.cutoff) { // We've removed the ith item, so i - 1 gives us the number of items remaining.
|
||||||
|
$($this.children().get().reverse()).appendTo($popup);
|
||||||
|
allInPopup = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (!keepLooking) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!$target){
|
||||||
|
if (allInPopup) {
|
||||||
|
$this.append('<li class="flexMenu-viewMore flexMenu-allInPopup"><a href="#" title="' + s.linkTitleAll + '">' + s.linkTextAll + '</a></li>');
|
||||||
|
} else {
|
||||||
|
$this.append('<li class="flexMenu-viewMore"><a href="#" title="' + s.linkTitle + '">' + s.linkText + '</a></li>');
|
||||||
|
}
|
||||||
|
$moreItem = $this.find('> li.flexMenu-viewMore');
|
||||||
|
/// Check to see whether the more link has been pushed down. This might happen if the link immediately before it is especially wide.
|
||||||
|
if (needsMenu($moreItem)) {
|
||||||
|
$this.find('> li:nth-last-child(2)').appendTo($popup);
|
||||||
|
}
|
||||||
|
// Our popup menu is currently in reverse order. Let's fix that.
|
||||||
|
$popup.children().each(function (i, li) {
|
||||||
|
$popup.prepend(li);
|
||||||
|
});
|
||||||
|
$moreItem.append($popup);
|
||||||
|
$moreLink = $this.find('> li.flexMenu-viewMore > a');
|
||||||
|
$moreLink.click(function (e) {
|
||||||
|
// Collapsing any other open flexMenu
|
||||||
|
collapseAllExcept($moreItem);
|
||||||
|
//Open and Set active the one being interacted with.
|
||||||
|
$popup.toggle();
|
||||||
|
$moreItem.toggleClass('active');
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
if (s.showOnHover && (typeof Modernizr !== 'undefined') && !Modernizr.touch) { // If requireClick is false AND touch is unsupported, then show the menu on hover. If Modernizr is not available, assume that touch is unsupported. Through the magic of lazy evaluation, we can check for Modernizr and start using it in the same if statement. Reversing the order of these variables would produce an error.
|
||||||
|
$moreItem.hover(
|
||||||
|
function () {
|
||||||
|
$popup.show();
|
||||||
|
$(this).addClass('active');
|
||||||
|
},
|
||||||
|
function () {
|
||||||
|
$popup.hide();
|
||||||
|
$(this).removeClass('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (s.undo) {
|
||||||
|
$menu = $target ? $($target).find('ul.flexMenu-popup') : $this.find('ul.flexMenu-popup');
|
||||||
|
if($menu.length){
|
||||||
|
numToRemove = $menu.find('li').length;
|
||||||
|
for (i = 1; i <= numToRemove; i++) {
|
||||||
|
$menu.find('> li:first-child').appendTo($this);
|
||||||
|
}
|
||||||
|
$menu.remove();
|
||||||
|
$target ? $($target).find('> li.flexMenu-viewMore').remove() : $this.find('> li.flexMenu-viewMore').remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}));
|
||||||
148
frameworks/flexMenu/flexmenu.js
Normal file
148
frameworks/flexMenu/flexmenu.js
Normal file
|
|
@ -0,0 +1,148 @@
|
||||||
|
/* jQuery.flexMenu 1.3
|
||||||
|
https://github.com/352Media/flexMenu
|
||||||
|
Description: If a list is too long for all items to fit on one line, display a popup menu instead.
|
||||||
|
Dependencies: jQuery, Modernizr (optional). Without Modernizr, the menu can only be shown on click (not hover). */
|
||||||
|
|
||||||
|
(function (factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['jquery'], factory);
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(jQuery);
|
||||||
|
}
|
||||||
|
}(function ($) {
|
||||||
|
var flexObjects = [], // Array of all flexMenu objects
|
||||||
|
resizeTimeout;
|
||||||
|
// When the page is resized, adjust the flexMenus.
|
||||||
|
function adjustFlexMenu() {
|
||||||
|
$(flexObjects).each(function () {
|
||||||
|
$(this).flexMenu({
|
||||||
|
'undo' : true
|
||||||
|
}).flexMenu(this.options);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function collapseAllExcept($menuToAvoid) {
|
||||||
|
var $activeMenus,
|
||||||
|
$menusToCollapse;
|
||||||
|
$activeMenus = $('li.flexMenu-viewMore.active');
|
||||||
|
$menusToCollapse = $activeMenus.not($menuToAvoid);
|
||||||
|
$menusToCollapse.removeClass('active').find('> ul').hide();
|
||||||
|
}
|
||||||
|
$(window).resize(function () {
|
||||||
|
clearTimeout(resizeTimeout);
|
||||||
|
resizeTimeout = setTimeout(function () {
|
||||||
|
adjustFlexMenu();
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
$.fn.flexMenu = function (options) {
|
||||||
|
var checkFlexObject,
|
||||||
|
s = $.extend({
|
||||||
|
'threshold' : 2, // [integer] If there are this many items or fewer in the list, we will not display a "View More" link and will instead let the list break to the next line. This is useful in cases where adding a "view more" link would actually cause more things to break to the next line.
|
||||||
|
'cutoff' : 2, // [integer] If there is space for this many or fewer items outside our "more" popup, just move everything into the more menu. In that case, also use linkTextAll and linkTitleAll instead of linkText and linkTitle. To disable this feature, just set this value to 0.
|
||||||
|
'linkText' : 'More', // [string] What text should we display on the "view more" link?
|
||||||
|
'linkTitle' : 'View More', // [string] What should the title of the "view more" button be?
|
||||||
|
'linkTextAll' : 'Menu', // [string] If we hit the cutoff, what text should we display on the "view more" link?
|
||||||
|
'linkTitleAll' : 'Open/Close Menu', // [string] If we hit the cutoff, what should the title of the "view more" button be?
|
||||||
|
'showOnHover' : true, // [boolean] Should we we show the menu on hover? If not, we'll require a click. If we're on a touch device - or if Modernizr is not available - we'll ignore this setting and only show the menu on click. The reason for this is that touch devices emulate hover events in unpredictable ways, causing some taps to do nothing.
|
||||||
|
'popupAbsolute' : true, // [boolean] Should we absolutely position the popup? Usually this is a good idea. That way, the popup can appear over other content and spill outside a parent that has overflow: hidden set. If you want to do something different from this in CSS, just set this option to false.
|
||||||
|
'popupClass' : '', // [string] If this is set, this class will be added to the popup
|
||||||
|
'undo' : false // [boolean] Move the list items back to where they were before, and remove the "View More" link.
|
||||||
|
}, options);
|
||||||
|
this.options = s; // Set options on object
|
||||||
|
checkFlexObject = $.inArray(this, flexObjects); // Checks if this object is already in the flexObjects array
|
||||||
|
if (checkFlexObject >= 0) {
|
||||||
|
flexObjects.splice(checkFlexObject, 1); // Remove this object if found
|
||||||
|
} else {
|
||||||
|
flexObjects.push(this); // Add this object to the flexObjects array
|
||||||
|
}
|
||||||
|
return this.each(function () {
|
||||||
|
var $this = $(this),
|
||||||
|
$items = $this.find('> li'),
|
||||||
|
$self = $this,
|
||||||
|
$firstItem = $items.first(),
|
||||||
|
$lastItem = $items.last(),
|
||||||
|
numItems = $this.find('li').length,
|
||||||
|
firstItemTop = Math.floor($firstItem.offset().top),
|
||||||
|
firstItemHeight = Math.floor($firstItem.outerHeight(true)),
|
||||||
|
$lastChild,
|
||||||
|
keepLooking,
|
||||||
|
$moreItem,
|
||||||
|
$moreLink,
|
||||||
|
numToRemove,
|
||||||
|
allInPopup = false,
|
||||||
|
$menu,
|
||||||
|
i;
|
||||||
|
function needsMenu($itemOfInterest) {
|
||||||
|
var result = (Math.ceil($itemOfInterest.offset().top) >= (firstItemTop + firstItemHeight)) ? true : false;
|
||||||
|
// Values may be calculated from em and give us something other than round numbers. Browsers may round these inconsistently. So, let's round numbers to make it easier to trigger flexMenu.
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
if (needsMenu($lastItem) && numItems > s.threshold && !s.undo && $this.is(':visible')) {
|
||||||
|
var $popup = $('<ul class="flexMenu-popup" style="display:none;' + ((s.popupAbsolute) ? ' position: absolute;' : '') + '"></ul>'),
|
||||||
|
// Move all list items after the first to this new popup ul
|
||||||
|
firstItemOffset = $firstItem.offset().top;
|
||||||
|
// Add class if popupClass option is set
|
||||||
|
$popup.addClass(s.popupClass);
|
||||||
|
for (i = numItems; i > 1; i--) {
|
||||||
|
// Find all of the list items that have been pushed below the first item. Put those items into the popup menu. Put one additional item into the popup menu to cover situations where the last item is shorter than the "more" text.
|
||||||
|
$lastChild = $this.find('> li:last-child');
|
||||||
|
keepLooking = (needsMenu($lastChild));
|
||||||
|
$lastChild.appendTo($popup);
|
||||||
|
// If there only a few items left in the navigation bar, move them all to the popup menu.
|
||||||
|
if ((i - 1) <= s.cutoff) { // We've removed the ith item, so i - 1 gives us the number of items remaining.
|
||||||
|
$($this.children().get().reverse()).appendTo($popup);
|
||||||
|
allInPopup = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (!keepLooking) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (allInPopup) {
|
||||||
|
$this.append('<li class="flexMenu-viewMore flexMenu-allInPopup"><a href="#" title="' + s.linkTitleAll + '">' + s.linkTextAll + '</a></li>');
|
||||||
|
} else {
|
||||||
|
$this.append('<li class="flexMenu-viewMore"><a href="#" title="' + s.linkTitle + '">' + s.linkText + '</a></li>');
|
||||||
|
}
|
||||||
|
$moreItem = $this.find('> li.flexMenu-viewMore');
|
||||||
|
/// Check to see whether the more link has been pushed down. This might happen if the link immediately before it is especially wide.
|
||||||
|
if (needsMenu($moreItem)) {
|
||||||
|
$this.find('> li:nth-last-child(2)').appendTo($popup);
|
||||||
|
}
|
||||||
|
// Our popup menu is currently in reverse order. Let's fix that.
|
||||||
|
$popup.children().each(function (i, li) {
|
||||||
|
$popup.prepend(li);
|
||||||
|
});
|
||||||
|
$moreItem.append($popup);
|
||||||
|
$moreLink = $this.find('> li.flexMenu-viewMore > a');
|
||||||
|
$moreLink.click(function (e) {
|
||||||
|
// Collapsing any other open flexMenu
|
||||||
|
collapseAllExcept($moreItem);
|
||||||
|
//Open and Set active the one being interacted with.
|
||||||
|
$popup.toggle();
|
||||||
|
$moreItem.toggleClass('active');
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
if (s.showOnHover && (typeof Modernizr !== 'undefined') && !Modernizr.touch) { // If requireClick is false AND touch is unsupported, then show the menu on hover. If Modernizr is not available, assume that touch is unsupported. Through the magic of lazy evaluation, we can check for Modernizr and start using it in the same if statement. Reversing the order of these variables would produce an error.
|
||||||
|
$moreItem.hover(
|
||||||
|
function () {
|
||||||
|
$popup.show();
|
||||||
|
$(this).addClass('active');
|
||||||
|
},
|
||||||
|
function () {
|
||||||
|
$popup.hide();
|
||||||
|
$(this).removeClass('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (s.undo && $this.find('ul.flexMenu-popup')) {
|
||||||
|
$menu = $this.find('ul.flexMenu-popup');
|
||||||
|
numToRemove = $menu.find('li').length;
|
||||||
|
for (i = 1; i <= numToRemove; i++) {
|
||||||
|
$menu.find('> li:first-child').appendTo($this);
|
||||||
|
}
|
||||||
|
$menu.remove();
|
||||||
|
$this.find('> li.flexMenu-viewMore').remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}));
|
||||||
6
frameworks/flexMenu/flexmenu.min.js
vendored
Normal file
6
frameworks/flexMenu/flexmenu.min.js
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
/* jQuery.flexMenu 1.3
|
||||||
|
https://github.com/352Media/flexMenu
|
||||||
|
Description: If a list is too long for all items to fit on one line, display a popup menu instead.
|
||||||
|
Dependencies: jQuery, Modernizr (optional). Without Modernizr, the menu can only be shown on click (not hover). */
|
||||||
|
|
||||||
|
!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):e(jQuery)}(function(e){function i(){e(o).each(function(){e(this).flexMenu({undo:!0}).flexMenu(this.options)})}function n(i){var n,l;n=e("li.flexMenu-viewMore.active"),l=n.not(i),l.removeClass("active").find("> ul").hide()}var l,o=[];e(window).resize(function(){clearTimeout(l),l=setTimeout(function(){i()},200)}),e.fn.flexMenu=function(i){var l,t=e.extend({threshold:2,cutoff:2,linkText:"More",linkTitle:"View More",linkTextAll:"Menu",linkTitleAll:"Open/Close Menu",showOnHover:!0,popupAbsolute:!0,popupClass:"",undo:!1},i);return this.options=t,l=e.inArray(this,o),l>=0?o.splice(l,1):o.push(this),this.each(function(){function i(e){var i=Math.ceil(e.offset().top)>=v+x?!0:!1;return i}var l,o,f,u,s,r,a,p=e(this),d=p.find("> li"),c=d.first(),h=d.last(),M=p.find("li").length,v=Math.floor(c.offset().top),x=Math.floor(c.outerHeight(!0)),T=!1;if(i(h)&&M>t.threshold&&!t.undo&&p.is(":visible")){var w=e('<ul class="flexMenu-popup" style="display:none;'+(t.popupAbsolute?" position: absolute;":"")+'"></ul>');c.offset().top;for(w.addClass(t.popupClass),a=M;a>1;a--){if(l=p.find("> li:last-child"),o=i(l),l.appendTo(w),a-1<=t.cutoff){e(p.children().get().reverse()).appendTo(w),T=!0;break}if(!o)break}T?p.append('<li class="flexMenu-viewMore flexMenu-allInPopup"><a href="#" title="'+t.linkTitleAll+'">'+t.linkTextAll+"</a></li>"):p.append('<li class="flexMenu-viewMore"><a href="#" title="'+t.linkTitle+'">'+t.linkText+"</a></li>"),f=p.find("> li.flexMenu-viewMore"),i(f)&&p.find("> li:nth-last-child(2)").appendTo(w),w.children().each(function(e,i){w.prepend(i)}),f.append(w),u=p.find("> li.flexMenu-viewMore > a"),u.click(function(e){n(f),w.toggle(),f.toggleClass("active"),e.preventDefault()}),t.showOnHover&&"undefined"!=typeof Modernizr&&!Modernizr.touch&&f.hover(function(){w.show(),e(this).addClass("active")},function(){w.hide(),e(this).removeClass("active")})}else if(t.undo&&p.find("ul.flexMenu-popup")){for(r=p.find("ul.flexMenu-popup"),s=r.find("li").length,a=1;s>=a;a++)r.find("> li:first-child").appendTo(p);r.remove(),p.find("> li.flexMenu-viewMore").remove()}})}});
|
||||||
19
js/theme.js
19
js/theme.js
|
|
@ -44,10 +44,21 @@ $(document).ready(function(){
|
||||||
$(".field.select, .field.custom").addClass("form-group");
|
$(".field.select, .field.custom").addClass("form-group");
|
||||||
$(".field.select > select, .field.custom > select").addClass("form-control");
|
$(".field.select > select, .field.custom > select").addClass("form-control");
|
||||||
|
|
||||||
if( $("ul.tabs")) {
|
// move the tabbar to the second nav bar
|
||||||
$("ul.tabs").appendTo("#topbar-second > .container > #tabmenu");
|
if( $("ul.tabbar")) {
|
||||||
|
$("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// make responsive tabmenu with flexmenu.js
|
||||||
|
// the menupoints which doesn't fit in the second nav bar will moved to a
|
||||||
|
// dropdown menu. Look at common_tabs.tpl
|
||||||
|
$("ul.tabs.flex-nav").flexMenu({
|
||||||
|
'cutoff': 2,
|
||||||
|
'popupClass': "dropdown-menu pull-right",
|
||||||
|
'popupAbsolute': false,
|
||||||
|
'target': ".flex-target"
|
||||||
|
});
|
||||||
|
|
||||||
// add Jot botton to the scecond navbar
|
// add Jot botton to the scecond navbar
|
||||||
if( $("section #jotOpen")) {
|
if( $("section #jotOpen")) {
|
||||||
$("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button");
|
$("section #jotOpen").appendTo("#topbar-second > .container > #navbar-button");
|
||||||
|
|
@ -59,6 +70,10 @@ $(document).ready(function(){
|
||||||
$(".search-headding").appendTo("#topbar-second > .container > #tabmenu");
|
$(".search-headding").appendTo("#topbar-second > .container > #tabmenu");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//$('ul.flex-nav').flexMenu();
|
||||||
|
|
||||||
// initialize the bootstrap tooltips
|
// initialize the bootstrap tooltips
|
||||||
$('[data-toggle="tooltip"]').tooltip({
|
$('[data-toggle="tooltip"]').tooltip({
|
||||||
animation: true,
|
animation: true,
|
||||||
|
|
|
||||||
|
|
@ -157,6 +157,7 @@ $("nav").bind('nav-update', function(e,data)
|
||||||
<script src="<?=$frio?>/frameworks/ekko-lightbox/ekko-lightbox.min.js"></script>
|
<script src="<?=$frio?>/frameworks/ekko-lightbox/ekko-lightbox.min.js"></script>
|
||||||
<script src="<?=$frio?>/frameworks/justifiedGallery/jquery.justifiedGallery.min.js"></script>
|
<script src="<?=$frio?>/frameworks/justifiedGallery/jquery.justifiedGallery.min.js"></script>
|
||||||
<script src="<?=$frio?>/frameworks/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
|
<script src="<?=$frio?>/frameworks/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
|
||||||
|
<script src="<?=$frio?>/frameworks/flexMenu/flexmenu.custom.js"></script>
|
||||||
<script src="<?=$frio?>/js/theme.js"></script>
|
<script src="<?=$frio?>/js/theme.js"></script>
|
||||||
<script src="<?=$frio?>/js/acl.js"></script>
|
<script src="<?=$frio?>/js/acl.js"></script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,58 @@
|
||||||
|
|
||||||
<ul class="tabs visible-lg visible-md visible-sm hidden-xs" role="menubar" > <!- for Computer & Tablets -->
|
{{* Tab navigation bar for tablets and computer *}}
|
||||||
{{foreach $tabs as $tab}}
|
<ul role="menubar" class="tabbar list-inline visible-lg visible-md visible-sm hidden-xs">
|
||||||
{{$count=$count+1}}
|
{{* The normal tabbar *}}
|
||||||
{{if $count <= 4}}
|
<li>
|
||||||
<li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
|
<ul class="tabs flex-nav" role="menu" >
|
||||||
{{else}}
|
{{foreach $tabs as $tab}}
|
||||||
{{$exttabs[]=$tab}}
|
<li id="{{$tab.id}}" role="menuitem" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
|
||||||
{{/if}}
|
{{/foreach}}
|
||||||
{{/foreach}}
|
|
||||||
|
|
||||||
|
|
||||||
{{if $count > 5}}
|
|
||||||
<li class="dropdown pull-right">
|
|
||||||
<a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
|
|
||||||
<i class="fa fa-chevron-down"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools">
|
|
||||||
{{foreach $exttabs as $tab}}
|
|
||||||
<li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
|
|
||||||
{{/foreach}}
|
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
|
{{* The extended dropdown menu - this would be shown if the tab menu points
|
||||||
|
dosn't fit in the available space. This is done through flexMenu.js *}}
|
||||||
|
<li class="pull-right">
|
||||||
|
<ul class="tabs tabs-extended" role="menu">
|
||||||
|
<li role="menuitem" class="dropdown flex-target">
|
||||||
|
<a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
|
||||||
|
<i class="fa fa-chevron-down"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul class="tabs visible-xs" role="menubar">
|
{{* Tab navigation bar for smartphones *}}
|
||||||
{{foreach $tabs as $tab}}
|
<ul role="menubar" class="tabbar list-inline visible-xs">
|
||||||
{{if $tab.sel}}
|
{{* The active menupoint will be shown as one menupoint*}}
|
||||||
<li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
|
<li>
|
||||||
{{else}}
|
<ul class="tabs" role="menu">
|
||||||
{{$exttabs[]=$tab}}
|
{{foreach $tabs as $tab}}
|
||||||
{{/if}}
|
{{if $tab.sel}}
|
||||||
{{/foreach}}
|
<li id="{{$tab.id}}" role="menuitem" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
|
||||||
|
{{else}}
|
||||||
<li class="dropdown">
|
{{$exttabs[]=$tab}}
|
||||||
<a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
|
{{/if}}
|
||||||
<i class="fa fa-chevron-down"></i>
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools">
|
|
||||||
{{foreach $exttabs as $tab}}
|
|
||||||
<li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
|
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{{* All others are moved to this dropdown menu *}}
|
||||||
|
<li class="pull-right">
|
||||||
|
<ul class="tabs tabs-extended">
|
||||||
|
<li class="dropdown">
|
||||||
|
<a class="dropdown-toggle" type="button" id="dropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
|
||||||
|
<i class="fa fa-chevron-down"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools">
|
||||||
|
{{foreach $exttabs as $tab}}
|
||||||
|
<li id="{{$tab.id}}" role="menuitem" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}><a href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
|
||||||
|
{{/foreach}}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue