https://luciatahan.com/javascript/tahan?21.6.8&1477335391

1/**
2 * Data
3 */
4var data = {
5	default: 9,
6	mobile: 20,
7	mobileChromeHeight: 0,
8	breakpoint: 600,
9	usemobile: false,
10	offset: 0,
11	offsetCalc: 0,
12	padding: 0,
13	chromeHeight: 0,
14	widthunit: '',
15	contentPosition: '',
16	winHeight: 0,
17	winWidth: 0
18}
19
20var $el = { }
21
22$(function () {
23	$el = {
24		body: $('body'),
25		html: $('html'),
26		main: $('main'),
27		contrent_ruler: $('[data-content-ruler]'),
28		content_padded: $('.content_padded'),
29		container_padding: $('[data-container-padding]')
30	}
31
32	Cargo.Event.trigger('design:ready');
33});
34
35/**
36 * Set Unit
37 */
38function setUnit () {
39	var _weight = data.default;
40	var _scale = data.mobile - 15;
41	var _padding = data.padding;
42	var _offset = data.offset;
43	var _diff = 0;
44	var _size = 0;
45
46	// Aspect ratio difference
47	if (data.winHeight > data.winWidth) {
48		_diff = data.winHeight / data.winWidth - 1;
49	} else {
50		_diff = 0;
51	}
52
53	// Ratio
54	_diff = (_diff / 0.777777778) * 1;
55
56	// iPhone vertical  orientation ratio
57	if (_diff > 1) {
58		_diff = 1;
59	}
60
61	// Padding offset
62	_offset = Math.abs(_offset) / 10;
63	_offset = (_padding * _offset) * _diff * -1;
64	data.offsetCalc = _offset + 'rem';
65
66	// If we're mobile, add class
67	if (data.usemobile) {
68		if (Math.abs(_diff) > 0 || useMobileForce()) {
69	  		enableMobile();
70		} else {
71			disableMobile();
72		}
73	} else {
74		disableMobile();
75	}
76
77	// Mobile
78	if (Math.abs(_diff) > 0) {
79  		$el.container_padding.css({
80  			margin: _offset + 'rem'
81  		});
82	} else {
83		$el.container_padding.css('margin', '');
84	}
85
86	// Base unit
87	_size = Cargo.Plugins.baseUnit({
88		weight: _weight + (_scale * _diff)
89	});
90
91	// Set the size
92	if (_size < 20) {
93		_size = 20;
94	}
95
96	$el.html.css('font-size', _size + '%');
97	Cargo.Event.trigger('set_baseunit')
98};
99
100/**
101 * Enable Mobile
102 */
103function enableMobile () {
104	$el.body.addClass('mobile');
105	Cargo.Event.trigger('backdrop_matches_viewport', false);
106}
107
108/**
109 * Disable Mobile
110 */
111function disableMobile () {
112	$el.body.removeClass('mobile');
113	Cargo.Event.trigger('backdrop_matches_viewport', true);
114}
115
116/**
117 * Force Mobile
118 */
119function useMobileForce () {
120	var is_fit_layout = data.contentPosition == 'left_fit' || data.contentPosition == 'right_fit';
121	var	is_percentage_layout = data.widthunit == '%';
122	var	main_width = $el.contrent_ruler.width() / data.winWidth * 100;
123
124	if (is_percentage_layout || !is_fit_layout) { return false }
125
126	if (main_width > 85) {
127		return true
128	} else {
129		return false
130	}
131}
132
133/**
134 * Admin UI Updates
135 */
136Cargo.Event.on('handleAdminUIChange', function(name, value) {
137	switch (name) {
138	    case 'mobile_formatting':
139			data.usemobile = value;
140			setUnit();
141			checkHeight();
142			break;
143
144	    case 'mobile_zoom':
145			data.mobile = parseFloat(value);
146			setUnit();
147			checkHeight();
148			break;
149
150		case 'main_margin':
151			data.padding = parseFloat(value);
152			setUnit();
153			checkHeight();
154			break;
155
156	    case 'mobile_padding':
157			data.offset = parseFloat(value);
158			setUnit();
159			checkHeight();
160			break;
161
162		case 'content_position':
163			data.contentPosition = value;
164			setUnit();
165			checkHeight();
166			break;
167
168		case 'width_unit':
169			data.widthunit = value;
170			setUnit();
171			checkHeight();
172			break;
173	}
174});
175
176
177/**
178 * Set Size
179 */
180function setSize () {
181	if (Cargo.Helper.isMobile()) {
182		if (window.innerHeight > window.innerWidth) {
183			data.mobileChromeHeight = screen.height - window.innerHeight;
184			data.winHeight = screen.height || window.innerHeight;
185			data.winWidth = screen.width || window.innerWidth;
186		} else {
187			data.mobileChromeHeight = screen.width - window.innerHeight;
188			data.winHeight = screen.width || window.innerHeight;
189			data.winWidth = screen.height || window.innerWidth;
190		}
191	} else {
192		data.winHeight = window.innerHeight;
193		data.winWidth = window.innerWidth;
194	}
195}
196
197function eventPreventDefault(e){
198	e.preventDefault();
199}
200
201/**
202 * Check Height
203 */
204function checkHeight () {
205	var height = (data.winHeight - data.mobileChromeHeight) >= $el.content_padded.outerHeight();
206	
207	if (data.usemobile) {
208		resetMobile();
209		return;
210	}
211
212	if (height) {
213		document.addEventListener('touchmove', eventPreventDefault);
214		$el.main.css({
215			position: 'fixed',
216			top: 0,
217			bottom: 0,
218			minHeight: 0
219		});
220	} else {
221		resetMobile();
222	}
223}
224
225/**
226 * Reset Mobile
227 */
228function resetMobile () {
229	document.removeEventListener('touchmove', eventPreventDefault);
230	$el.main.css({
231		position: '',
232		top: '',
233		left: '',
234		right: '',
235		bottom: '',
236		minHeight: ''
237	});
238}
239
240/**
241 * Set the defaults for the mobile design
242 */
243function setMobileDefaults () {
244	var layout_options = Cargo.Model.DisplayOptions.get('layout_options');
245		_.each(layout_options, function(name, value) {
246		Cargo.Event.trigger('handleAdminUIChange', name, value);
247	});
248}
249
250/**
251 * Refresh
252 */
253function refresh () {
254	setUnit();
255	checkHeight();
256}
257
258/**
259 * Initialize
260 */
261function initialize () {
262	var zoom = Cargo.Model.DisplayOptions.get('layout_options').mobile_zoom;
263	var offset = Cargo.Model.DisplayOptions.get('layout_options').mobile_padding;
264	var padding = Cargo.Model.DisplayOptions.get('layout_options').main_margin;
265	var mobile = Cargo.Model.DisplayOptions.get('layout_options').mobile_formatting;
266	var contentPosition = Cargo.Model.DisplayOptions.get('layout_options').content_position;
267	var widthunit = Cargo.Model.DisplayOptions.get('layout_options').width_unit;
268
269	if (zoom) {
270		data.mobile = parseFloat(zoom);
271	}
272
273	if (offset) {
274		data.offset = parseFloat(offset);
275	}
276
277	if (padding) {
278		data.padding = parseFloat(padding);
279	}
280
281	if (mobile) {
282		data.usemobile = mobile;
283	}
284
285	if (contentPosition) {
286		data.contentPosition = contentPosition;
287	}
288
289	if (widthunit) {
290		data.widthunit = widthunit;
291	}
292
293	var resizeEvent;
294
295	if (Cargo.Helper.isMobile()) {
296		resizeEvent = 'orientationchange';
297		if (!Cargo.Helper.isIOS()) {
298			// delay for mobile to make sure the resize after orientation change is complete
299			setSize = _.debounce(setSize, 150);
300			setUnit = _.debounce(setUnit, 150);
301			checkHeight = _.debounce(checkHeight, 150);
302		}
303	} else {
304		resizeEvent = 'resize';
305	}
306
307	$(window)
308		.on(resizeEvent, setSize)
309		.on(resizeEvent, setUnit)
310		.on(resizeEvent, checkHeight);
311
312	setSize();
313	refresh();
314
315	setMobileDefaults();
316}
317
318$(window).on('load', function () {
319	setSize();
320	refresh();
321
322	if(typeof CargoEditor == "object" && CargoEditor.events != undefined) {
323		CargoEditor.events.on('editor-summary-created', function(name) {
324			refresh();
325			Cargo.Plugins.elementResizer.refresh();
326		});	
327	}
328});
329
330/**
331 * Editor Events
332 */
333Cargo.Event.on('design:ready', function () {
334
335	initialize();
336
337	Cargo.Plugins.elementResizer.refresh();
338
339	Cargo.Event.on('editor-image-added', function(image_node) {
340		refresh();
341		Cargo.Plugins.elementResizer.refresh();
342	});
343
344	Cargo.Event.on('handleAdminUIChange', function(name) {
345		refresh();
346		Cargo.Plugins.elementResizer.refresh();
347	});
348
349
350	Cargo.Event.on('slideshow_update', checkHeight);
351	Cargo.Event.on('page_load_complete', refresh);
352});
353
354/**
355 * Element resizing 
356 * 
357 * 	(note: never run this in a ready callback, this needs to fire 
358 * 	 before elementresizer inits.)
359 */
360
361Cargo.Event.on('element_resizer_init', function(plugin) {
362    plugin.setOptions({
363        cargo_refreshEvents: ['inline-editor-load-complete', 'show_index_complete', 'pagination_complete', 'page_load_complete', 'inspector_preview', 'page_collection_reset', 'direct_link_loaded', 'set_baseunit'],
364        generic_refreshEvents: [],
365        updateEvents: ['resize', 'onorientationchange'],
366        adjustElementsToWindowHeight: false,
367        centerElements: false,
368        allowInit: true
369    });
370});