main.js

var audioButton = false;
var midiButton = false;
var activateButton;
var dataMidi;
var editor;

/**
 * Load the editor and add css
 */
function loadEditor() {
	editor = ace.edit("editor");
	editor.setTheme("ace/theme/tomorrow_night");
	editor.session.setMode("ace/mode/css");
	const langTools = ace.require('ace/ext/language_tools');
	
	const cssTemplate = {
		getCompletions: (editor, session, pos, prefix, callback) => {
			// note, won't fire if caret is at a word that does not have these letters
			callback(null, [
				{ value: '[loud,0,1]', score: 1, meta: 'Audio meter between 0 and 1.' },
				{ value: '[low,0,1]', score: 1, meta: 'Audio energy low between 0 and 1.' },
				{ value: '[lomi,0,1]', score: 1, meta: 'Audio energy low-mid between 0 and 1.' },
				{ value: '[mid,0,1]', score: 1, meta: 'Audio energy mid between 0 and 1.' },
				{ value: '[mihi,0,1]', score: 1, meta: 'Audio energy mid-high between 0 and 1.' },
				{ value: '[hi,0,1]', score: 1, meta: 'Audio energy treble between 0 and 1.' },
				{ value: '[onset:C]', score: 1, meta: 'Audio note C' },
				{ value: '[onset:C#]', score: 1, meta: 'Audio note C#' },
				{ value: '[onset:D]', score: 1, meta: 'Audio note D' },
				{ value: '[onset:D#]', score: 1, meta: 'Audio note D#' },
				{ value: '[onset:E]', score: 1, meta: 'Audio note E' },
				{ value: '[onset:F]', score: 1, meta: 'Audio note F' },
				{ value: '[onset:F#]', score: 1, meta: 'Audio note F#' },
				{ value: '[onset:G]', score: 1, meta: 'Audio note G' },
				{ value: '[onset:G#]', score: 1, meta: 'Audio note G#' },
				{ value: '[onset:A]', score: 1, meta: 'Audio note A' },
				{ value: '[onset:A#]', score: 1, meta: 'Audio note A#' },
				{ value: '[onset:B]', score: 1, meta: 'Audio note B' },
				{ value: '[note:24,0,1]', score: 1, meta: 'MIDI Note C between 0 and 1.' },
				{ value: '[note:26,0,1]', score: 1, meta: 'MIDI Note D between 0 and 1.' },
				{ value: '[note:28,0,1]', score: 1, meta: 'MIDI Note E between 0 and 1.' },
				{ value: '[note:29,0,1]', score: 1, meta: 'MIDI Note F between 0 and 1.' },
				{ value: '[note:31,0,1]', score: 1, meta: 'MIDI Note G between 0 and 1.' },
				{ value: '[note:33,0,1]', score: 1, meta: 'MIDI Note A between 0 and 1.' },
				{ value: '[note:35,0,1]', score: 1, meta: 'MIDI Note B between 0 and 1.' },
			]);
		},
	};
	langTools.addCompleter(cssTemplate);
	editor.setOptions({
		enableBasicAutocompletion: true,
		enableSnippets: true,
		enableLiveAutocompletion: true
	});

	chrome.storage.sync.get(['css'], function (result) {
		editor.setValue(result.css)
	});
}



/**
 * The function is called when the extension is loaded. 
 * It gets the current values of the settings from the browser's local storage. 
 * It then sets the texts of the settings buttons to the current values of the settings.
 */
function initUi() {
	chrome.storage.sync.get(['activateFav'], function (result) {
		$('.activateFav').attr('src', result.activateFav);
	});
	chrome.storage.sync.get(['activate'], function (result) {
		activateButton = result.activate;
		if (activateButton) {
			$('#onOff').text('Désactiver');
		} else {
			$('#onOff').text('Activer');
		}
	});
	chrome.storage.sync.get(['audioI'], function (result) {
		audioButton = result.audioI;
		if (result.audioI) {
			$('.audioI').addClass('active');
		}
		else {
			$('.audioI').removeClass('active');
		}
	});
	chrome.storage.sync.get(['midiI'], function (result) {
		midiButton = result.midiI;
		if (result.midiI) {
			$('.midiI').addClass('active');
		}
		else {
			$('.midiI').removeClass('active');
		}
	});
}


/**
 * Save CSS in editor via save button
 */
function updateCss() {
	console.log('updateCss');
	chrome.tabs.query({ active: true, currentWindow: true },
		function (tabs) {
			let cssStr = editor.getValue();
			const payload = {
				cssStr
			}
			chrome.storage.sync.set({ css: cssStr });
			chrome.tabs.sendMessage(tabs[0].id, { type: 'update', data: payload });
		}
	);
}


/**
 * Function trigger when new message received.
 * @param {type, data} message parameters 
 */
function onMessage({ type, data }) {
	console.log('onMessage', type, data);
	switch (type) {
		case 'updateUi': {
			initUi();
			break;
		}
		case 'midiEvent': {
			if (dataMidi != data) {
				$('#midiEvent').text(data);
				if (editor.isFocused()) {
					editor.session.insert(editor.getCursorPosition(), data)
				}
				dataMidi = data;
			}
			break;
		}
		case 'midiDevices': {
			$('#midiDevices').text(data);
			break;
		}
	}
}


$('#save').on('click', function () {
	updateCss();
});


$('#onOff').on('click', function () {
	activateButton = !activateButton;
	chrome.storage.sync.set({ activate: activateButton }, function () {
		if (activateButton) {
			$('#onOff').text('Désactiver');
			var API = chrome || browser;
			API.tabs.query({ active: true, currentWindow: true }, function (tabs) {
				if (tabs[0] && tabs[0].favIconUrl) {
					chrome.storage.sync.set({ activateFav: tabs[0].favIconUrl });
				}
			});
		} else {
			$('#onOff').text('Activer');
		}
		chrome.tabs.query({ active: true, currentWindow: true },
			function (tabs) {
				chrome.tabs.sendMessage(tabs[0].id, { type: 'start', data: activateButton });
			}
		);
	});
});

/**
 * Activate / Desactivate audio button
 */

$('.audioI').on('click', function () {
	audioButton = !audioButton;
	chrome.storage.sync.set({ audioI: audioButton }, function () {
	});
	chrome.tabs.query({ active: true, currentWindow: true },
		function (tabs) {
			chrome.tabs.sendMessage(tabs[0].id, { type: 'audio', data: audioButton });
		});
	initUi();
});

/**
 * Activate / Desactivate midi button
 */

$('.midiI').on('click', function () {
	midiButton = !midiButton;
	chrome.storage.sync.set({ midiB: midiButton }, function () {
	});
	chrome.tabs.query({ active: true, currentWindow: true },
		function (tabs) {
			chrome.tabs.sendMessage(tabs[0].id, { type: 'midi', data: midiButton });
		});
	initUi();
});


// Wait messages from content script
chrome.runtime.onMessage.addListener(onMessage);
// Indicate to Background that the popup is ready
chrome.runtime.connect({ name: "popup" });
// Load the editor
loadEditor();
// Initialize the settings UI
initUi();