Fix dropdown (context menu) UI
This commit is contained in:
Samuel Georges
parent
b566583f9a
commit
9215421964
|
|
@ -2,15 +2,34 @@ Customized dropdown menu
|
|||
|
||||
# Example
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<div class="dropdown">
|
||||
<a href="#" data-toggle="dropdown" class="btn btn-primary oc-icon-plus">Add small</a>
|
||||
|
||||
<ul class="dropdown-menu" role="menu" data-dropdown-title="Add something small">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-folder-close">Group</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-copy">Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<a href="#" data-toggle="dropdown" class="btn btn-primary oc-icon-plus">Add large</a>
|
||||
|
||||
<ul class="dropdown-menu" role="menu" data-dropdown-title="Add something large">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-folder-close">Group</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-copy">Page</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-briefcase">Briefcase</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-link">Link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-tag">Tag</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-zoom-out">Zoom out</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-briefcase">Briefcase</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-link">Link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-tag">Tag</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-zoom-out">Zoom out</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-briefcase">Briefcase</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-link">Link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-tag">Tag</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="oc-icon-zoom-out">Zoom out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,105 @@
|
|||
/*
|
||||
=require ../vendor/bootstrap/js/dropdown.js
|
||||
*/
|
||||
/*
|
||||
* Dropdown menus.
|
||||
*
|
||||
* This script customizes the Twitter Bootstrap drop-downs.
|
||||
*
|
||||
*/
|
||||
+function ($) { "use strict";
|
||||
|
||||
$(document).on('shown.bs.dropdown', '.dropdown', function(){
|
||||
$(document.body).addClass('dropdown-open')
|
||||
|
||||
var dropdown = $('.dropdown-menu', this),
|
||||
dropdownContainer = $(this).data('dropdown-container')
|
||||
|
||||
if ($('.dropdown-container', dropdown).length == 0) {
|
||||
var
|
||||
title = $('[data-toggle=dropdown]', this).text(),
|
||||
titleAttr = dropdown.data('dropdown-title'),
|
||||
timer = null;
|
||||
|
||||
if (titleAttr !== undefined)
|
||||
title = titleAttr
|
||||
|
||||
$('li:first-child', dropdown).addClass('first-item')
|
||||
dropdown.prepend($('<li/>').addClass('dropdown-title').text(title))
|
||||
|
||||
var
|
||||
container = $('<li/>').addClass('dropdown-container'),
|
||||
ul = $('<ul/>')
|
||||
|
||||
container.prepend(ul)
|
||||
ul.prepend(dropdown.children())
|
||||
dropdown.prepend(container)
|
||||
|
||||
dropdown.on('touchstart', function(){
|
||||
window.setTimeout(function(){
|
||||
dropdown.addClass('scroll')
|
||||
}, 200)
|
||||
})
|
||||
|
||||
dropdown.on('touchend', function(){
|
||||
window.setTimeout(function(){
|
||||
dropdown.removeClass('scroll')
|
||||
}, 200)
|
||||
})
|
||||
|
||||
dropdown.on('click', 'a', function(){
|
||||
if (dropdown.hasClass('scroll'))
|
||||
return false
|
||||
})
|
||||
}
|
||||
|
||||
if (dropdownContainer !== undefined && dropdownContainer == 'body') {
|
||||
$(this).data('oc.dropdown', dropdown)
|
||||
$(document.body).append(dropdown)
|
||||
|
||||
dropdown.css({
|
||||
'visibility': 'hidden',
|
||||
'left': 0,
|
||||
'top' : 0,
|
||||
'display': 'block'
|
||||
})
|
||||
|
||||
var targetOffset = $(this).offset(),
|
||||
targetHeight = $(this).height(),
|
||||
targetWidth = $(this).width(),
|
||||
position = {
|
||||
x: targetOffset.left,
|
||||
y: targetOffset.top + targetHeight
|
||||
},
|
||||
leftOffset = targetWidth < 30 ? -16 : 0,
|
||||
documentHeight = $(document).height(),
|
||||
dropdownHeight = dropdown.height()
|
||||
|
||||
if ((dropdownHeight + position.y) > $(document).height()) {
|
||||
position.y = targetOffset.top - dropdownHeight - 12
|
||||
dropdown.addClass('top')
|
||||
} else
|
||||
dropdown.removeClass('top')
|
||||
|
||||
dropdown.css({
|
||||
'left': position.x + leftOffset,
|
||||
'top': position.y,
|
||||
'visibility': 'visible'
|
||||
})
|
||||
}
|
||||
|
||||
if ($('.dropdown-overlay', document.body).length == 0)
|
||||
$(document.body).prepend($('<div/>').addClass('dropdown-overlay'));
|
||||
})
|
||||
|
||||
$(document).on('hidden.bs.dropdown', '.dropdown', function(){
|
||||
var dropdown = $(this).data('oc.dropdown')
|
||||
if (dropdown !== undefined) {
|
||||
dropdown.css('display', 'none')
|
||||
$(this).append(dropdown)
|
||||
}
|
||||
|
||||
$(document.body).removeClass('dropdown-open');
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
Loading…
Reference in New Issue