https://mycadmium.com/includes/js/flyout.js?_=08.17.2022.20.48

1
2
3(function($){
4	// attach flyout to jquery library
5    $.fn.flyout = function(z) {
6	    var fo = this;
7				
8	    // we pass our config object extended with defaults
9	    (function(config){
10						
11			init(config);
12			
13			// initialize fly out menu
14		    function init(c){
15			    fo.state = 'collapsed';
16			    
17				if (c.panels.length <= 0) {
18					/* we will require at least 1 content item */
19					throw new Error('No panel content provided in configuration.');
20					return false;
21					
22				}else {
23					
24					// ensure the containing element is not position static
25					if (fo.css('position').toLowerCase() == 'static') {
26						fo.css('position', 'relative');
27					}
28										
29					// return the flyout div
30					fo.element = fo_get_wrap(c.template);
31					
32					// We apply css styles from an object passed in the config
33					if (c.css && !($.isEmptyObject(c.css))) {
34						fo.element.css(c.css);
35					}
36					
37					// append the flyout div to the target element
38					fo.prepend(fo.element);
39					
40					// load the first panel
41					fo_load_panel(c.panels[0], c);
42				}
43				
44				// adjust size when window is resized
45				$(window).resize(fo_resize);
46				
47				// adjust size when side navigation is toggled
48				$('body').on('nav-resized', fo_resize);
49				
50				// toggle flyout when trigger element is clicked
51				$('body').on('click', c.trigger, fo_toggle);
52			}
53			
54			// append the flyout div to the container
55			function fo_get_wrap(tmplt) {
56				return $(tmplt).css({
57					width: fo_width(),
58					bottom:0,
59					right: (fo_width() * -1),
60					left:'auto',
61					top:0
62				});
63			}
64			
65			// get the width of the containing element
66			function fo_width() {
67				return $(fo).innerWidth();
68			}
69			
70			// toggle the flyout menu
71			function fo_toggle() {
72				fo.state == 'collapsed' ? fo_expand() : fo_collapse();
73			}
74			
75			// expand the flyout menu
76			function fo_expand() {
77				$('body').trigger('flyout.expand');
78				fo.element.animate({
79					width: fo_width(),
80					right: 0
81				}, 250, function(){
82					fo.state = 'expanded'
83					$('body').trigger('flyout.expanded');
84				});
85			} 
86			
87			// collapse the flyout menu
88			function fo_collapse() {
89				$('body').trigger('flyout.collapse');
90				fo.element.animate({
91					right: (fo.element.outerWidth(true) * -1)
92				}, 250, function(){
93					fo.state = 'collapsed'
94					$('body').trigger('flyout.collapsed');
95				});
96			} 	
97			
98			// resize the flyout menu
99			function fo_resize() {
100				if (fo.state == 'expanded'){
101					$('body').trigger('flyout.resize');
102					fo.element.animate({
103						width: fo_width(),
104						right: 0
105					}, 150, function(){
106						$('body').trigger('flyout.resized');
107					});
108				}
109			}	
110			
111			// load a panel into view
112			function fo_load_panel(pnl, cfg) {
113				var tempPnl = $(cfg.pnl_template).attr('id', pnl.id);
114				fo.element.append(tempPnl);
115				
116				$.get(pnl.url, function(data) {
117					tempPnl.append(data);
118					if (pnl.onload && typeof pnl.onload == 'function') {
119						pnl.onload(pnl);
120					}
121				});
122			}	
123		    
124	    })($.extend({
125            // These are the defaults.
126            width:'auto',
127            trigger: '[data-toggle="flyout"]',
128            template: '<div class="flyout"></div>',
129            pnl_template: '<div class="flyout_panel"></div>',
130            panels: []
131        }, z));
132        
133        // return the jquery object so we can chain methods
134        return this;
135        
136    };		
137}(jQuery));
138
139