https://uth.edu.mx/templates/theme1951/js/jquery.centerIn.js

1/* centerIn.js
2 *
3 * jQuery plugin that allows you to center an element within an element.
4 *
5 * e.g. 
6 *
7 * $(element).centerIn(); // centers horizontally and vertically in parent
8 * $(element).centerIn(window); // centers horizontally and vertically in window
9 * $(element).centerIn(window, { direction: 'vertical' ); // centers vertically in window
10 * $(element).centerIn(window, { top: "-20%" }); // centers vertically in window offset upwards by 20%
11 * $(element).alwaysCenterIn(window); // deals with resize events
12 *
13 * Author: William Silversmith
14 * Affiliation: Seung Lab, Brain and Cognitive Sciences Dept., MIT
15 * Date: August 2013 - February 2014
16 */
17;(function($, undefined) {
18
19	/* centerIn
20	 *
21	 * Centers the element with respect to
22	 * the first element of the given selector
23	 * both horizontally and vertically.
24	 *
25	 * Required:
26	 *   [0] selector: The element to center within
27	 *   [1] options or callback
28	 *   [2] callback (if [1] is options): Mostly useful for alwaysCenterIn
29	 *
30	 * Options:
31	 *	 direction: 'horizontal', 'vertical', or 'both' (default)
32	 *	 top: Additional offset in px
33	 *	 left: Additional offset in px
34	 *
35	 * Returns: void
36	 */
37	$.fn.centerIn = function (selector, options, callback) {
38		var elements = this;
39		options = options || {};
40
41		if (typeof(options) === 'function') {
42			callback = options;
43			options = {};
44		}
45
46		var direction = options.direction || $.fn.centerIn.defaults.direction;
47		var extraleft = options.left || 0;
48		var extratop = options.top || 0;
49
50		if (selector) {
51			selector = $(selector).first();
52		}
53		else {
54			selector = elements.first().parent();
55		}
56
57		try {
58			if (!selector.css('position') || selector.css('position') === 'static') {
59				selector.css('position', 'relative'); 
60			}
61		}
62		catch (e) {
63			// selector was something like window, document, html, or body
64			// which doesn't have a position attribute
65		}
66
67		var horizontal = function (element) {
68			var left = Math.round((selector.innerWidth() - element.outerWidth(false)) / 2);
69			left += translateDisplacement(selector, extraleft, 'width');
70			element.css('left', left + "px");
71		};
72
73		var vertical = function (element) {
74			var top = Math.round((selector.innerHeight() - element.outerHeight(false)) / 2);
75			top += translateDisplacement(selector, extratop, 'height');
76			element.css('top', top + "px");
77		};
78
79		var centerfn = constructCenterFn(horizontal, vertical, callback, direction);
80
81		elements.each(function (index, element) {
82			element = $(element);
83
84			if (element.css("position") !== 'fixed') {
85				element.css("position", 'absolute');
86			}
87			centerfn(element);
88		});
89
90		return this;
91	};
92
93	/* alwaysCenterIn
94	 * 
95	 * Maintains centering even on window resize.
96	 */
97	$.fn.alwaysCenterIn = function () {
98		var args = arguments || []; 
99		var selector = $(this);
100
101		selector.centerIn.apply(selector, args);
102
103		var evt = 'resize.centerIn';
104        if (selector.attr('id')) {
105            evt += '.' + selector.attr('id');
106        }
107
108        $(window).on(evt, function () {
109			selector.centerIn.apply(selector, args);
110		});
111
112		return this;
113	 };
114
115	/* Defaults */
116
117	$.fn.centerIn.defaults = {
118		direction: 'both'
119	};
120
121    /* translateDisplacement
122     *
123     * Translates dimensionless units, pixel measures, and percent
124     * measures into px.
125     *
126     * Required: 
127     *   [0] selector: Container, relevant for percent measures
128     *   [1] value: Amount to displace. e.g. 5, "5px", or "5%"
129     *   [2] direction: 'width' or 'height'
130     * 
131     * Returns: px
132     */
133    function translateDisplacement(selector, value, direction) {
134        if (typeof(value) === 'number') {
135            return value;
136        }
137        else if (/px$/i.test(value)) {
138            return parseFloat(value.replace('px', ''), 10);
139        }
140        else if (/%$/.test(value)) {
141            var total = (direction === 'width')
142                ? $(selector).innerWidth()
143                : $(selector).innerHeight();
144
145            value = parseFloat(value.replace('%', ''), 10);
146            value /= 100;
147
148            return value * total;
149        }
150
151        return parseFloat(value, 10);
152    }
153
154    /* constructCenterFn
155     *
156     * Constructs an appropriate centering function
157     * that includes vertical, horizontal, and callback
158     * functions as applicable.
159     *
160     * Returns: fn
161     */
162	function constructCenterFn(horizontal, vertical, callback, direction) {
163        var fns = []
164
165		if (!direction || direction === 'both') {
166			fns.push(vertical);
167            fns.push(horizontal);
168		}
169		else if (direction === 'horizontal') {
170            fns.push(horizontal);
171		}
172		else if (direction === 'vertical') {
173            fns.push(vertical);
174		}
175
176        if (callback) {
177            fns.push(callback);
178        }
179
180		return compose(fns);
181	}
182
183	/* compose
184	 *
185	 * Compose N functions into a single function call.
186	 *
187	 * Required: 
188	 *   [0-n] functions or arrays of functions
189	 * 
190	 * Returns: function
191	 */
192	function compose () {
193		var fns = flatten(arguments);
194
195		return function () {
196			for (var i = 0; i < fns.length; i++) {
197				fns[i].apply(this, arguments);
198			}
199		};
200	}
201
202	/* flatten
203	 *
204	 * Take an array that potentially contains other arrays 
205	 * and return them as a single array.
206	 *
207	 * e.g. flatten([1, 2, [3, [4]], 5]) => [1,2,3,4,5]
208	 *
209	 * Required: 
210	 *   [0] array
211	 * 
212	 * Returns: array
213	 */
214	function flatten (array) {
215		array = array || [];
216
217		var flat = [];
218
219		var len = array.length;
220		for (var i = 0; i < len; i++) {
221			var item = array[i];
222
223			//console.log(item, typeof(item));
224
225			if (typeof(item) === 'object' && Array.isArray(item)) {
226				flat = flat.concat(flatten(item));
227			}
228			else {
229				flat.push(item);
230			}
231		} 
232
233		return flat;
234	}
235})(jQuery);
236
237/* The MIT License (MIT)
238
239Copyright (c) 2014 Seung Lab, MIT
240
241Permission is hereby granted, free of charge, to any person obtaining a copy of
242this software and associated documentation files (the "Software"), to deal in
243the Software without restriction, including without limitation the rights to
244use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
245the Software, and to permit persons to whom the Software is furnished to do so,
246subject to the following conditions:
247
248The above copyright notice and this permission notice shall be included in all
249copies or substantial portions of the Software.
250
251THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
252IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
253FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
254COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
255IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
256CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
257*/