MariaSzubski
10/2/2017 - 4:26 AM

Use <button> to convert between pixel and rem units. Setting applies site-wide.

Use to convert between pixel and rem units. Setting applies site-wide.

/* 
	Requires html button with at least two unit options.
	Unit setting is saved in local storage.
*/

// PX to REM Conversion
	if (Modernizr.localstorage) {
		// ----------------- On initial load: check local storange and convert units
		toggle_pxrem();

		// ----------------- On button press: update localStorage, change button state, and convert units
		(function pxrem(){
			$('button').click(function(e){
				$('button').toggleClass('btn-selected');
				
				$('#size-px').hasClass('btn-selected') ?
					localStorage.setItem('pxrem', 'px')
					: localStorage.setItem('pxrem', 'rem');
				
				convert();
			});
		})();

		// ----------------- Check localStorage and convert units
		function toggle_pxrem(){
			(localStorage.pxrem == undefined) ? localStorage.setItem('pxrem', 'px') : null;

			(localStorage.pxrem == 'rem') ?
				($('#size-px').removeClass('btn-selected'),
				$('#size-rem').addClass('btn-selected'))
				: null;
			
			(localStorage.pxrem == 'px') ?
				($('#size-rem').removeClass('btn-selected'),
				$('#size-px').addClass('btn-selected'))
				: null;
			
			convert();
		}

		// ----------------- Convert units
		function convert(){
			// rem -> px
			if (localStorage.pxrem == 'px'){
				$('.pxrem').each(function(){
					let px = $(this).html();
					if (px.includes('rem')) {
						let px_arr = px.match(/[^rem]+|rem/g);
						px_arr[0] = px_arr[0] * 16;
						px_arr[1] = 'px';
						$(this).html(px_arr.join(''));
					};
				});
			}
			// px -> rem
			else if (localStorage.pxrem == 'rem'){
				$('.pxrem').each(function(){
					let rem = $(this).html();
					let rem_arr = rem.match(/[^px]+|px/g);
					rem_arr[0] = rem_arr[0] / 16;
					rem_arr[1] = 'rem';
					$(this).html(rem_arr.join(''));
				});
			};
		};
	};