320 lines
9.7 KiB
JavaScript
Executable File
320 lines
9.7 KiB
JavaScript
Executable File
var selected_marker_colour = 'navy';
|
|
var selected_marker_size = 20;
|
|
var selected_marker_transparency = 1;
|
|
$(document).on('click change', '.marker_colour', function() {
|
|
selected_marker_colour = $(this).val();
|
|
});
|
|
var whiteboard_ctx;
|
|
function markerInit() {
|
|
var marker_tool = localStorage.getItem('marker_tool');
|
|
var mt = $('.marker_tool[tool="' + marker_tool + '"]')
|
|
mt.addClass('selected');
|
|
var canvas = document.getElementById('whiteboard');
|
|
var win = $('#whiteboard').closest('.wind');
|
|
canvas.height = win.height() - win.find('.top_navbar').height();
|
|
canvas.width = win.width() - win.find('#marker_toolbox').width();
|
|
whiteboard_ctx = canvas.getContext('2d');
|
|
clearInterval(markerVideoInterval);
|
|
// portfolioMaker();
|
|
var mouseInterval;
|
|
$(document).on('click mousemove touchmove', '#whiteboard', function(m) {
|
|
var w = $(this);
|
|
m.preventDefault(); m.preventDefault();
|
|
mouse = m;
|
|
w.closest('.wind').draggable('disable');
|
|
var marker_tool = localStorage.getItem('marker_tool');
|
|
var marker_transparency = $('#marker_transparency').val() || 1;
|
|
selected_marker_transparency = marker_transparency;
|
|
selected_marker_size = $('#marker_size').val();
|
|
selected_marker_colour = $('#marker_colour').val();
|
|
|
|
var x = m.originalEvent.clientX;
|
|
var y = m.originalEvent.clientY;
|
|
if (m.originalEvent.targetTouches) {
|
|
x = m.originalEvent.targetTouches[0].clientX;
|
|
y = m.originalEvent.targetTouches[0].clientY;
|
|
}
|
|
x = numeral(x - w.offset().left).value();
|
|
y = numeral(y - w.offset().top).value();
|
|
|
|
var timestamp = Date.now();
|
|
whiteboard_ctx.beginPath();
|
|
whiteboard_ctx.globalAlpha = marker_transparency;
|
|
var leftButtonDown = false;
|
|
|
|
if (m.which === 1 || m.originalEvent.type == 'touchmove') {
|
|
// marker.push({ 'x': x, 'y': y, 'tool': marker_tool, 'colour': marker_colour, 'transparency': marker_transparency, 'size': marker_size, timestamp: timestamp });
|
|
if (marker_tool == 'marker') {
|
|
whiteboard_ctx.fillStyle = selected_marker_colour;
|
|
whiteboard_ctx.moveTo(x,y);
|
|
whiteboard_ctx.arc(x,y, selected_marker_size, 0, (Math.PI*2), true);
|
|
whiteboard_ctx.fill();
|
|
}
|
|
else if (marker_tool == 'kb') {
|
|
whiteboard_ctx.moveTo(x,y);
|
|
localStorage.setItem('whiteboard_position', '{ "x": "' + x + '", "y": "' + y + '"}');
|
|
var wb = $('#whiteboard').offset();
|
|
$('#pointer').css({ 'top': y + wb['top'] - 12, 'left': x + wb['left'] });
|
|
}
|
|
else if (marker_tool == 'eraser') {
|
|
whiteboard_ctx.moveTo(x,y);
|
|
whiteboard_ctx.clearRect(x,y, selected_marker_size, selected_marker_size);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).on('click', '.marker_colour_add', function() {
|
|
$('#kit').append('<input type="color" style="width:45%;" id="marker_colour" class="marker_colour" value="#CCDDFF" /><br>');
|
|
selected_marker_colour = $('#marker_colour').val();
|
|
});
|
|
|
|
$(document).on('click', '.marker_tool', function() {
|
|
var t = $(this);
|
|
var tool = t.attr('tool');
|
|
var marker_tool = localStorage.getItem('marker_tool');
|
|
$('.marker_tool').removeClass('selected');
|
|
|
|
t.addClass('selected');
|
|
localStorage.setItem('marker_tool',tool);
|
|
});
|
|
|
|
var record_marker;
|
|
$(document).on('click', '.record_marker', function() {
|
|
jpCanvas();
|
|
|
|
});
|
|
|
|
|
|
var play_marker;
|
|
$(document).on('click', '.play_marker', function() {
|
|
var p = $(this);
|
|
var c = p.closest('.marker_toolbox').find('.flipbook_interval').val();
|
|
clearInterval(play_marker);
|
|
var movement = p.attr('movement');
|
|
if (play_marker) {
|
|
clearInterval(play_marker);
|
|
play_marker = undefined;
|
|
}
|
|
else {
|
|
play_marker = setInterval(function() {
|
|
$('.flipbook[movement="' + movement + '"]').trigger('click');
|
|
},c);
|
|
}
|
|
});
|
|
|
|
function markerInfoGrabber() {
|
|
var marker = {
|
|
tool: localStorage.getItem('marker_tool'),
|
|
transparency: $('#marker_transparency').val() || 1,
|
|
colour: $('#marker_colour').val() || 'navy',
|
|
size: $('#marker_size').val(),
|
|
flipbook_interval: $('#flipbook_interval').val()
|
|
};
|
|
return marker;
|
|
}
|
|
|
|
$(document).on('click', '.save_marker', function() {
|
|
var timestamp = Date.now();
|
|
var canvas = document.getElementById('whiteboard');
|
|
var img = canvas.toDataURL('image/png');
|
|
var paper = 'paper_' + timestamp;
|
|
var p = $('#' + paper);
|
|
var marker = markerInfoGrabber();
|
|
app = topWindow('marker');
|
|
$.ajax({
|
|
url: '/manager/marker/save',
|
|
type: 'POST',
|
|
data: {
|
|
timestamp: timestamp,
|
|
paper: paper,
|
|
img: img,
|
|
marker: JSON.stringify(marker),
|
|
browser_tab_id: bti,
|
|
app: app
|
|
},
|
|
success: function(portfolio) {
|
|
portfolioMaker(JSON.parse(portfolio || []));
|
|
}
|
|
});
|
|
|
|
say_it('saved!');
|
|
});
|
|
|
|
$(document).on('click', '.paper', function() {
|
|
var canvas = document.getElementById("whiteboard");
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.globalAlpha = $('#marker_transparency').val();
|
|
var image = new Image();
|
|
image.onload=function(){
|
|
ctx.drawImage(image,0,0,canvas.width,canvas.height);
|
|
};
|
|
image.src = $(this).attr('src');
|
|
});
|
|
|
|
function portfolioMaker(portfolio) {
|
|
console.log(portfolio);
|
|
page_number = (Number(page_number) + 1);
|
|
$('#portfolio').html('');
|
|
$.each(portfolio,function(i,v) {
|
|
var p = JSON.parse(v.file);
|
|
$.each(p, function(ir,vr) {
|
|
var phtml = '<button class="marker_delete" uuid="' + v['uuid'] + '" server_time="' + v['server_time'] + '" timestamp="' + v['timestamp'] + '" paper="' + v['paper'] + '" id="' + v['paper'] + '_delete">D</button> \
|
|
<img class="paper" timestamp="' + v['timestamp'] + '" id="' + v['uuid'] + '" src="/file_open?app=' + v['app'] + '&file=' + vr['f'] + '×tamp=' + vr['server_time'] + '" style="width:40px;height:60px"></img>';
|
|
$('#portfolio').append(phtml);
|
|
});
|
|
});
|
|
|
|
if (portfolio) {
|
|
portfolio = portfolio.sort(function(a, b) {
|
|
return b['timestamp'] - a['timestamp'];
|
|
});
|
|
}
|
|
}
|
|
|
|
var selected_image = 0;
|
|
$(document).on('click', '.flipbook', function() {
|
|
var movement = $(this).attr('movement');
|
|
var canvas = document.getElementById('whiteboard');
|
|
var image = new Image();
|
|
var ctx = canvas.getContext('2d');
|
|
var p = $('.paper');
|
|
var total = p.length;
|
|
if (movement == 'back') {
|
|
if (selected_image <= 0) {
|
|
selected_image = total;
|
|
}
|
|
else {
|
|
selected_image = Number(selected_image) - 1;
|
|
}
|
|
|
|
}
|
|
else if (movement == 'forward') {
|
|
if (selected_image >= total) {
|
|
selected_image = 0;
|
|
}
|
|
else {
|
|
selected_image = Number(selected_image) + 1;
|
|
}
|
|
|
|
}
|
|
ctx.globalAlpha = $('#marker_transparency').val();
|
|
image.onload=function(){
|
|
ctx.drawImage(image,0,0,canvas.width,canvas.height);
|
|
};
|
|
if (p[selected_image]) {
|
|
image.src = p[selected_image].src;
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.marker_delete', function() {
|
|
var a = $(this);
|
|
var timestamp = $(this).attr('timestamp');
|
|
var file_uuid = $(this).attr('file_uuid');
|
|
var app_uuid = $(this).attr('app_uuid');
|
|
var app = $(this).attr('app');
|
|
var server_time = a.attr('server_time');
|
|
var armed = a.attr('armed');
|
|
if (armed == 'yes') {
|
|
$.ajax({
|
|
url: '/manager/marker/delete',
|
|
type: 'POST',
|
|
data: { app_uuid: app_uuid, file_uuid: file_uuid, app: app },
|
|
success: function(response) {
|
|
$('.paper[file_uuid="' + file_uuid + '"][app_uuid="' + app_uuid + '"]').remove();
|
|
$('.marker_delete[file_uuid="' + file_uuid + '"][app_uuid="' + app_uuid + '"]').remove();
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
a.attr('armed', 'yes');
|
|
var bgcolor = a.css('background-color');
|
|
a.css({'background-color': 'red' });
|
|
setTimeout(function() {
|
|
a.css({'background-color': bgcolor });
|
|
a.attr('armed', 'no');
|
|
},2000);
|
|
}
|
|
});
|
|
|
|
$(document).on('click','#marker_pause', function() {
|
|
var b = $(this);
|
|
var app = b.attr('app');
|
|
if (we['rec'][app].state == 'recording') {
|
|
we['rec'][app].pause();
|
|
b.attr('src', '/images/make believe/delay_button.png');
|
|
}
|
|
else {
|
|
we['rec'][app].resume();
|
|
b.attr('src', '/images/make believe/pause.png');
|
|
}
|
|
});
|
|
|
|
var markerVideoInterval = null;
|
|
function markerDragger(id,status) {
|
|
var wind = $('#' + id);
|
|
|
|
if (wind.find('#whiteboard').length >= 1) {
|
|
var canvas = document.getElementById('whiteboard');
|
|
var wb = $('#whiteboard');
|
|
var white = wb.offset();
|
|
white['width'] = wb.width();
|
|
white['height'] = wb.height();
|
|
white['centre'] = [ white['width'] / 2 + white['left'], white['height'] / 2 + white['top'] ];
|
|
if (status == 'drag') {
|
|
$('#marker_targeting').css({ 'left': white['centre'][0], 'top': white['centre'][1], 'position': 'fixed' }).show();
|
|
}
|
|
else if (status == 'stop') {
|
|
var elements = document.elementsFromPoint(white['centre'][0], white['centre'][1]);
|
|
$.each(elements, function(i,v) {
|
|
if (($(v).is('video') && $(v).is(':visible')) ) {
|
|
var fps = $('#flipbook_interval').val();
|
|
clearInterval(markerVideoInterval);
|
|
v.onpause = function() {
|
|
clearInterval(markerVideoInterval);
|
|
};
|
|
v.onended = function() {
|
|
clearInterval(markerVideoInterval);
|
|
}
|
|
markerVideoInterval = setInterval(function() {
|
|
whiteboard_ctx.drawImage(v, 0, 0, white['width'], white['height']);
|
|
}, 1000 / fps);
|
|
}
|
|
else if (($(v).is('img') && $(v).is(':visible')) && ($(v).attr('id') == 'video' || $(v).hasClass('detail_image') || $(v).attr('id') == 'main_image') ) {
|
|
var image = new Image();
|
|
image.onload=function(){
|
|
whiteboard_ctx.drawImage(image,0,0,white['width'], white['height']);
|
|
};
|
|
image.src = $(v).attr('src');
|
|
}
|
|
else if (($(v).is('canvas')) && !$(v).hasClass('background')) {
|
|
var cid = $(v).attr('id');
|
|
var cv = document.getElementById(cid);
|
|
var img = cv.toDataURL('image/png');
|
|
var image = new Image();
|
|
image.onload=function(){
|
|
whiteboard_ctx.drawImage(image,0,0,white['width'], white['height']);
|
|
};
|
|
image.src = img;
|
|
}
|
|
else {
|
|
return true;
|
|
}
|
|
});
|
|
$('#marker_targeting').hide();
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).on('click', '#marker_gallery', function() {
|
|
var app = topWindow('marker');
|
|
$.ajax({
|
|
url: '/manager/marker/gallery',
|
|
type: 'GET',
|
|
data: { timestamp: timestamp, app: app },
|
|
success: function(response) {
|
|
$('#alert').html(response.html).show();
|
|
}
|
|
});
|
|
});
|