123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- /*
- * Fuel UX Dropdown Auto Flip
- * https://github.com/ExactTarget/fuelux
- *
- * Copyright (c) 2014 ExactTarget
- * Licensed under the BSD New license.
- */
- // -- BEGIN UMD WRAPPER PREFACE --
- // For more information on UMD visit:
- // https://github.com/umdjs/umd/blob/master/jqueryPlugin.js
- (function (factory) {
- if (typeof define === 'function' && define.amd) {
- // if AMD loader is available, register as an anonymous module.
- define(['jquery'], factory);
- } else {
- // OR use browser globals if AMD is not present
- factory(jQuery);
- }
- }(function ($) {
- // -- END UMD WRAPPER PREFACE --
- // -- BEGIN MODULE CODE HERE --
- $(document.body).on('click.fu.dropdown-autoflip', '[data-toggle=dropdown][data-flip]', function (event) {
- if ($(this).data().flip === "auto") {
- // have the drop down decide where to place itself
- _autoFlip($(this).next('.dropdown-menu'));
- }
- });
- // For pillbox suggestions dropdown
- $(document.body).on('suggested.fu.pillbox', function (event, element) {
- _autoFlip($(element));
- $(element).parent().addClass('open');
- });
- function _autoFlip(menu) {
- // hide while the browser thinks
- $(menu).css({
- visibility: "hidden"
- });
- // decide where to put menu
- if (dropUpCheck(menu)) {
- menu.parent().addClass("dropup");
- } else {
- menu.parent().removeClass("dropup");
- }
- // show again
- $(menu).css({
- visibility: "visible"
- });
- }
- function dropUpCheck(element) {
- // caching container
- var $container = _getContainer(element);
- // building object with measurementsances for later use
- var measurements = {};
- measurements.parentHeight = element.parent().outerHeight();
- measurements.parentOffsetTop = element.parent().offset().top;
- measurements.dropdownHeight = element.outerHeight();
- measurements.containerHeight = $container.overflowElement.outerHeight();
- // this needs to be different if the window is the container or another element is
- measurements.containerOffsetTop = (!!$container.isWindow) ? $container.overflowElement.scrollTop() : $container.overflowElement.offset().top;
- // doing the calculations
- measurements.fromTop = measurements.parentOffsetTop - measurements.containerOffsetTop;
- measurements.fromBottom = measurements.containerHeight - measurements.parentHeight - (measurements.parentOffsetTop - measurements.containerOffsetTop);
- // actual determination of where to put menu
- // false = drop down
- // true = drop up
- if (measurements.dropdownHeight < measurements.fromBottom) {
- return false;
- } else if (measurements.dropdownHeight < measurements.fromTop) {
- return true;
- } else if (measurements.dropdownHeight >= measurements.fromTop && measurements.dropdownHeight >= measurements.fromBottom) {
- // decide which one is bigger and put it there
- if (measurements.fromTop >= measurements.fromBottom) {
- return true;
- } else {
- return false;
- }
- }
- }
- function _getContainer(element) {
- var containerElement, isWindow;
- if (element.attr('data-target')) {
- containerElement = element.attr('data-target');
- isWindow = false;
- } else {
- containerElement = window;
- isWindow = true;
- }
- $.each(element.parents(), function (index, value) {
- if ($(value).css('overflow') !== 'visible') {
- containerElement = value;
- isWindow = false;
- return false;
- }
- });
- return {
- overflowElement: $(containerElement),
- isWindow: isWindow
- };
- }
- // register empty plugin
- $.fn.dropdownautoflip = function () {
- /* empty */
- };
- // -- BEGIN UMD WRAPPER AFTERWORD --
- }));
- // -- END UMD WRAPPER AFTERWORD --
|