91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
|
played_sound = false
|
||
|
|
position = ''
|
||
|
|
|
||
|
|
function removeClass() {
|
||
|
|
$("#main").removeClass();
|
||
|
|
$("#wrapper").removeClass();
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('message', function(event) {
|
||
|
|
var sound = new Audio('sound.mp3');
|
||
|
|
sound.volume = 0.5;
|
||
|
|
|
||
|
|
if (event.data.action == 'open') {
|
||
|
|
position = event.data.position;
|
||
|
|
message = event.data.message;
|
||
|
|
|
||
|
|
$('#message').html(message);
|
||
|
|
|
||
|
|
if (position == 'right') {
|
||
|
|
$('#ui').css('left', '');
|
||
|
|
$('#ui').css('right', '1%');
|
||
|
|
$('#ui').removeClass('hideright');
|
||
|
|
$('#ui').addClass('showright');
|
||
|
|
}
|
||
|
|
if (position == 'left') {
|
||
|
|
$('#ui').css('right', '');
|
||
|
|
$('#ui').css('left', '1%');
|
||
|
|
$('#ui').removeClass('hideleft');
|
||
|
|
$('#ui').addClass('showleft');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (event.data.color == 'lightblue') { // Light Blue
|
||
|
|
removeClass();
|
||
|
|
$('#main').addClass('lightblue-icon');
|
||
|
|
$('#wrapper').addClass('lightblue lightblue-border');
|
||
|
|
} else if (event.data.color == 'lightgreen') { // Light Green
|
||
|
|
removeClass();
|
||
|
|
$('#main').addClass('lightgreen-icon');
|
||
|
|
$('#wrapper').addClass('lightgreen lightgreen-border');
|
||
|
|
} else if (event.data.color == 'lightred') { // Light Red
|
||
|
|
removeClass();
|
||
|
|
$('#main').addClass('lightred-icon');
|
||
|
|
$('#wrapper').addClass('lightred lightred-border');
|
||
|
|
} else if (event.data.color == 'lightgrey') { // Light Red
|
||
|
|
removeClass();
|
||
|
|
$('#main').addClass('lightgrey-icon');
|
||
|
|
$('#wrapper').addClass('lightgrey lightgrey-border');
|
||
|
|
} else if (event.data.color == 'darkblue') { // Dark Blue
|
||
|
|
removeClass();
|
||
|
|
$('#main').addClass('darkblue-icon');
|
||
|
|
$('#wrapper').addClass('darkblue darkblue-border');
|
||
|
|
} else if (event.data.color == 'darkgreen') { // Dark Green
|
||
|
|
removeClass();
|
||
|
|
$('#main').addClass('darkgreen-icon');
|
||
|
|
$('#wrapper').addClass('darkgreen darkgreen-border');
|
||
|
|
} else if (event.data.color == 'darkred') { // Dark Red
|
||
|
|
removeClass();
|
||
|
|
$('#main').addClass('darkred-icon');
|
||
|
|
$('#wrapper').addClass('darkred darkred-border');
|
||
|
|
} else if (event.data.color == 'darkgrey') { // Dark Grey
|
||
|
|
removeClass();
|
||
|
|
$('#main').addClass('darkgrey-icon');
|
||
|
|
$('#wrapper').addClass('darkgrey darkgrey-border');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (played_sound == false) {
|
||
|
|
sound.play();
|
||
|
|
played_sound = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
} else if (event.data.action == 'close') {
|
||
|
|
|
||
|
|
if (position == 'right') {
|
||
|
|
$('#ui').removeClass('hideleft');
|
||
|
|
$('#ui').removeClass('showleft');
|
||
|
|
$('#ui').removeClass('showright');
|
||
|
|
$('#ui').addClass('hideright');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (position == 'left') {
|
||
|
|
$('#ui').removeClass('hideright');
|
||
|
|
$('#ui').removeClass('showright');
|
||
|
|
$('#ui').removeClass('showleft');
|
||
|
|
$('#ui').addClass('hideleft');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
played_sound = false;
|
||
|
|
})
|
||
|
|
|