https://harfordcountymd.gov/Assets/Scripts/Flyout.js

1/* File Created: February 11, 2013 by Vishal Bhatia*/
2
3function rearrangeFlyouts(clearDOM) {
4    if (clearDOM) {
5        //Remove any old .pop elements from the DOM to reload the new one.
6        $('.flyOut.moved').remove();
7    }
8    //Grab all the flyouts that are not moved yet and are not tooltips and not in WidgetManager
9    var $flyOutDivs = $('.flyOut').not('.moved').not('.helpTip').not('.widgetManager');
10    var parentID;
11    var marginLeft, marginTop;
12    $flyOutDivs.each(function (e) {
13        parentID = $(this).parent('.flyOutParent').attr('id');
14
15        //If the element does not have a flyOutParent, display it on the center of the screen.
16        if (parentID == undefined) {
17            marginLeft = '-' + $(this).outerWidth() / 2 + 'px';
18            marginTop = '-' + $(this).outerHeight() / 2 + 'px';
19
20            $(this).css('left', '50%');
21            $(this).css('margin-left', marginLeft);
22            $(this).css('top', '50%');
23            $(this).css('margin-top', marginTop);
24
25            $(this).appendTo('body');
26            $(this).addClass('moved');
27            //TODO: Confirm from Kyle and remove 2 lines below since they are being done through css.
28            $(this).css('position', 'absolute');
29            $(this).css('z-index', '100');
30        }
31        else {
32            //Remove any pre existing copies of this element from the DOM.
33        	$('[data-parentID=' + parentID + ']').remove();
34			//Remove margin styles if the element has a flyOutParent.
35            $(this).css({ 'margin-left': '', 'margin-top': '' });
36            $(this).appendTo('body');
37            $(this).addClass('moved');
38            //TODO: Confirm from Kyle and remove 2 lines below since they are being done through css.
39            $(this).css('position', 'absolute');
40            $(this).css('z-index', '100');
41            $(this).attr('data-parentID', parentID);
42            adjustFlyoutPosition($('#' + parentID), $(this));
43        }
44    });
45}
46
47///Executes when the browser is being resized or the screen orientation changes(portrait/landscape).
48function rearrangeFlyoutsOnResizeEvents() {
49	//Grab all the flyouts that are not moved yet and are not tooltips and not in WidgetManager
50	var $flyOutDivs = $('.flyOut').not('.helpTip').not('.widgetManager').not('.mainNavMegaMenu.megaMenuContainer');;
51	var parentID;
52	var marginLeft, marginTop;
53	$flyOutDivs.each(function (e) {
54		parentID = $(this).data('parentid');
55		//If the element does not have a flyOutParent, display it on the center of the screen.
56		if (parentID == undefined) {
57			marginLeft = '-' + $(this).outerWidth() / 2 + 'px';
58			marginTop = '-' + $(this).outerHeight() / 2 + 'px';
59			$(this).css('margin-left', marginLeft);
60			$(this).css('margin-top', marginTop);
61		}
62		else {			
63			adjustFlyoutPosition($('#' + parentID), $(this));
64		}
65	});
66}
67
68///Checks if any ancestor of a flyout element is fixed positioned.
69function anyAncestorFixedPositioned($parent) {
70	var anyAncestorFixedPosition = false;
71	if ($parent.css('position') === 'fixed')
72		anyAncestorFixedPosition = true;
73	if (!anyAncestorFixedPosition) {
74		$parent.parents().each(function () {
75			if (!anyAncestorFixedPosition) {
76				if ($(this).css('position') === 'fixed')
77					anyAncestorFixedPosition = true;
78			}
79		});
80	}
81	return anyAncestorFixedPosition;
82}
83
84function adjustFlyoutPosition($parent, $this) {
85    var $parentElem = $parent;    
86    if ($parentElem != null) {        
87        var parentWidth = $parent.outerWidth(false);
88        var parentHeight = $parent.outerHeight(false);
89        var offset = $parent.offset();        
90        if (offset != null) {
91            var offsetLeft = offset.left;
92            //Take into account scroll height if the document has been scrolled, to compute the top distance from viewport. VB
93            var offsetTop = $this.css('position') === 'fixed' ? offset.top - $(document).scrollTop() : offset.top; // Take into account if the item is fixed or absolutely positioned.                        
94                        
95			if (anyAncestorFixedPositioned($parent))
96				$this.css('position', 'fixed');
97
98            var offsetRight;
99            var offsetBottom;
100
101            if ($this.hasClass('left') || $this.hasClass('leftCorner')) {
102                offsetLeft = offsetLeft - $this.outerWidth(false);
103                $this.css('left', offsetLeft);
104            }
105
106            if ($this.hasClass('right') || $this.hasClass('rightCorner')) {
107                offsetLeft = offsetLeft + parentWidth;
108                $this.css('left', offsetLeft);
109            }
110
111            if ($this.hasClass('top') || $this.hasClass('topCorner')) {
112                offsetBottom = offsetTop - $this.outerHeight(false);
113                $this.css('top', offsetBottom);
114            }
115
116            if ($this.hasClass('bottom') || $this.hasClass('bottomCorner')) {
117                offsetTop = offsetTop + parentHeight;
118                $this.css('top', offsetTop);                
119            }
120
121            if ($this.hasClass('leftEdge')) {
122                $this.css('left', offsetLeft);
123
124                if ($this.hasClass('rightEdge')) {
125                    $this.css('width', parentWidth);

126                }                
127            }
128
129            if ($this.hasClass('rightEdge')) {
130                offsetLeft = offsetLeft + parentWidth - $this.outerWidth(false);
131                $this.css('left', offsetLeft);
132            }
133
134            if ($this.hasClass('topEdge')) {
135                $this.css('top', offsetTop);
136
137                if ($this.hasClass('bottomEdge')) {
138                    $this.css('height', parentHeight);
139                }
140            }
141
142            if ($this.hasClass('bottomEdge')) {
143                offsetTop = offsetTop + parentHeight - $this.outerHeight(false);                
144                $this.css('top', offsetTop);
145            }
146
147            if ($this.hasClass('center') && ($this.hasClass('top') || $this.hasClass('bottom'))) {
148                offsetLeft = offsetLeft + (parentWidth / 2) - ($this.outerWidth(false) / 2);
149                $this.css('left', offsetLeft);
150            }
151
152            if ($this.hasClass('center') && ($this.hasClass('left') || $this.hasClass('right'))) {
153                offsetTop = offsetTop + (parentHeight / 2) - ($this.outerHeight(false) / 2);
154                $this.css('top', offsetTop);
155            }
156        }
157    }
158};