321 lines
8.9 KiB
JavaScript
Executable File
321 lines
8.9 KiB
JavaScript
Executable File
|
|
$(document).on('click', '#editor_toggle', function() {
|
|
editorMaker();
|
|
});
|
|
|
|
var grapple_key_index;
|
|
var original_grapple_position;
|
|
function editorMaker(source) {
|
|
var url = '/manager/editor';
|
|
var scope = localStorage.getItem('scope');
|
|
var timestamp = timestamp;
|
|
var uuid = localStorage.getItem('article_uuid');
|
|
$.ajax({
|
|
url: url,
|
|
type: 'GET',
|
|
data: { window_maker: 'yes', timestamp: timestamp, scope: scope, article_uuid: uuid },
|
|
success: function(response) {
|
|
windowMaker(response);
|
|
editorInit(source);
|
|
},
|
|
error: function (response) {}
|
|
});
|
|
}
|
|
|
|
function editorInit(source) {
|
|
$('#editor_content_parent').html($('#editor_content_parent').text());
|
|
if (original_key_position == undefined) {
|
|
original_grapple_position = {
|
|
top: $('#grapple').css('top'),
|
|
left: $('#grapple').css('left')
|
|
};
|
|
}
|
|
$('#grapple').show();
|
|
|
|
$('#grapple').draggable({
|
|
start: function(p) {
|
|
var capable_of = $('#grapple').attr('capable_of');
|
|
grapple_key_index = $('#grapple').css('z-index');
|
|
console.log('grapple is capable of ' + capable_of);
|
|
|
|
if (capable_of == 'h1' || capable_of == 'h2' || capable_of == 'h3' || capable_of == 'h4') {
|
|
grappleDropper('.name_text');
|
|
}
|
|
else if (capable_of == 'p') {
|
|
grappleDropper('.notespace');
|
|
}
|
|
else if (capable_of == 'img') {
|
|
grappleDropper('img');
|
|
}
|
|
else if (capable_of == 'canvas') {
|
|
grappleDropper('canvas');
|
|
}
|
|
else if (capable_of == 'video') {
|
|
grappleDropper('video');
|
|
}
|
|
else if (capable_of == 'audio') {
|
|
grappleDropper('audio');
|
|
}
|
|
else if (capable_of == 'a') {
|
|
grappleDropper('a');
|
|
}
|
|
else if (capable_of == 'iframe') {
|
|
grappleDropper('iframe')
|
|
}
|
|
},
|
|
drag: function(p) {
|
|
|
|
|
|
},
|
|
stop: function(p) {
|
|
$('.grapple_capable').each(function(i,v) {
|
|
$(v).removeClass('grapple_capable');
|
|
if ($(v).hasClass('ui-droppable')) {
|
|
// $(v).droppable('disable');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
if (source == 'new') {
|
|
$('#editor_content_parent').html('<div id="editor_content_area"></div>');
|
|
}
|
|
}
|
|
|
|
function grappleDropper(type) {
|
|
$(type).addClass('grapple_capable');
|
|
$(type).droppable({
|
|
drop: function(ui,event) {
|
|
var node = $(this);
|
|
var node_id = node.attr('id');
|
|
if (node_id == '' || node_id == undefined) {
|
|
node_id = 'temporary_node_id';
|
|
node.attr('id', node_id);
|
|
}
|
|
if (type == 'canvas') {
|
|
var canvas = document.getElementById(node_id);
|
|
if (!$(canvas).hasClass('background')) {
|
|
console.log(node_id);
|
|
console.log('ya this is a canvas');
|
|
var img = canvas.toDataURL('image/png');
|
|
$('.grapple_active').attr('id', 'temporary_grapple_node_id');
|
|
var grapple_canvas = document.getElementById('temporary_grapple_node_id');
|
|
var ctx = grapple_canvas.getContext('2d');
|
|
var image = new Image();
|
|
var ratio = canvas.height / canvas.width;
|
|
grapple_canvas.width = 1366 || 0;
|
|
grapple_canvas.height = ratio * canvas.width || 0;
|
|
image.onload=function(){
|
|
ctx.drawImage(image,0,0,grapple_canvas.width,grapple_canvas.height);
|
|
};
|
|
image.src = img;
|
|
|
|
$('.grapple_active').attr('src', src);
|
|
$('.grapple_active').css({'max-height': '100%', 'max-width':'100%' });
|
|
$('.grapple_active').removeClass('medium_thumb');
|
|
|
|
$('#temporary_grapple_node_id').attr('id', 'editor_canvas' + Date.now() / 23);
|
|
}
|
|
}
|
|
else if (type == 'img') {
|
|
var canvas = document.createElement('canvas');
|
|
var image = document.getElementById(node_id);
|
|
console.log(node_id);
|
|
console.log(image.height + ' ' + image.width);
|
|
|
|
var ratio = image.height / image.width;
|
|
canvas.width = image.width || 0;
|
|
canvas.height = ratio * canvas.width || 0;
|
|
canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
var src = canvas.toDataURL('image/png');
|
|
$('.grapple_active').attr('src', src);
|
|
$('.grapple_active').css({'max-height': '100%', 'max-width':'100%' });
|
|
$('.grapple_active').removeClass('medium_thumb');
|
|
}
|
|
else if (type == "video" || type == "audio") {
|
|
var n = document.getElementById(node_id);
|
|
var content = n.src.split('/');
|
|
var src = n.src;
|
|
var seen_it = 0;
|
|
for (var i = 0; i < content.length; i++) {
|
|
var q = content[i].split('\?');
|
|
if (q.length > 1 && seen_it == 0) {
|
|
seen_it = i;
|
|
}
|
|
};
|
|
if (seen_it == 1) {
|
|
var d = content.splice(seen_it);
|
|
var src = d.join('/');
|
|
src = '/' + src;
|
|
}
|
|
|
|
|
|
$('.grapple_active').attr('src', src);
|
|
$('.grapple_active').attr('controls', true);
|
|
}
|
|
else {
|
|
$('.grapple_active').html(node.html());
|
|
}
|
|
if (node_id == 'temporary_node_id') {
|
|
node.attr('id', undefined);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).on('click', '.editor_content_adder', function() {
|
|
var timestamp = Date.now();
|
|
var b = $(this);
|
|
var type = b.attr('content_type');
|
|
var content = '<' + type + ' type="' + type + '" class="editor_content_component grapple_inactive">This is a ' + type + '</' + type + '>';
|
|
|
|
if (type == 'a') {
|
|
content = '<' + type + ' type="' + type + '" class="editor_content_component grapple_inactive" href="">' + type + ' type</' + type + '>';
|
|
}
|
|
else if (type == 'img') {
|
|
content = '<' + type + ' type="' + type + '" style="background-color:white;" class="medium_thumb editor_content_component grapple_inactive" src="/images/make believe/camera.png"></' + type + '>';
|
|
}
|
|
|
|
if ($('.grapple_active').length > 0) {
|
|
$('.grapple_active').after(content);
|
|
}
|
|
else {
|
|
$('#editor_content_area').append(content);
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.editor_content_component', function(e) {
|
|
e.preventDefault();
|
|
var component = $(this);
|
|
var is_active = 0;
|
|
if (component.hasClass('grapple_active')) {
|
|
is_active = 1;
|
|
}
|
|
$('.editor_content_component').each(function(i,v) {
|
|
$(v).removeClass('grapple_active');
|
|
$(v).addClass('grapple_inactive');
|
|
});
|
|
if (is_active == 1) {
|
|
component.addClass('grapple_inactive');
|
|
component.removeClass('grapple_active');
|
|
}
|
|
else {
|
|
component.addClass('grapple_active');
|
|
component.removeClass('grapple_inactive');
|
|
$('#grapple').attr('capable_of', component.attr('type'));
|
|
}
|
|
|
|
});
|
|
|
|
$(document).on('dblclick', '.editor_content_component', function(e) {
|
|
$(this).remove();
|
|
});
|
|
|
|
$(document).on('change', '#editor_background_colour', function(e) {
|
|
if ($('.grapple_active').length > 0) {
|
|
$('.grapple_active').css({ 'background-color': $(this).val() });
|
|
}
|
|
else {
|
|
$('#editor_content_area').css({ 'background-color': $(this).val() });
|
|
}
|
|
});
|
|
|
|
$(document).on('change', '#editor_text_colour', function(e) {
|
|
if ($('.grapple_active').length > 0) {
|
|
$('.grapple_active').css({ 'color': $(this).val() });
|
|
}
|
|
else {
|
|
$('#editor_content_area').css({ 'color': $(this).val() });
|
|
}
|
|
});
|
|
|
|
$(document).on('change', '#editor_article_picker', function(e) {
|
|
var b = $(this).val();
|
|
|
|
localStorage.setItem('article_uuid', b);
|
|
editorMaker();
|
|
});
|
|
|
|
$(document).on('click', '#editor_save', function() {
|
|
|
|
var content = $('#editor_content_parent').html();
|
|
var title = Date.now();
|
|
if ($('#editor_content_area').find('h1')[0]) {
|
|
title = $('#editor_content_area').find('h1')[0].textContent;
|
|
}
|
|
var image;
|
|
if ($('#editor_content_area').find('img')[0]) {
|
|
image = $('#editor_content_area').find('img')[0].src;
|
|
}
|
|
var teaser;
|
|
if ($('#editor_content_area').find('p')[0]) {
|
|
teaser = $('#editor_content_area').find('p')[0].textContent;
|
|
}
|
|
var category = $('#editor_category_picker').val();
|
|
var text_colour = $('#editor_text_colour').val();
|
|
var background_colour = $('#editor_background_colour').val();
|
|
var uuid = localStorage.getItem('article_uuid');
|
|
var status = $('#editor_status_picker').val();
|
|
var scope = localStorage.getItem('scope');
|
|
var warranty = $('#editor_warranty').val();
|
|
var ts = $('#editor_timestamp').val();
|
|
$.ajax({
|
|
url: '/manager/editor/save',
|
|
type: 'POST',
|
|
data: {
|
|
content: content,
|
|
title: title,
|
|
timestamp: ts,
|
|
category: category,
|
|
text_colour: text_colour,
|
|
background_colour: background_colour,
|
|
article_uuid: uuid,
|
|
status: status,
|
|
scope: scope,
|
|
warranty: warranty,
|
|
image: image,
|
|
teaser: teaser
|
|
},
|
|
success: function(response) {
|
|
localStorage.setItem('article_uuid', response.uuid);
|
|
editorMaker();
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '#editor_delete', function() {
|
|
var a = $(this);
|
|
var uuid = localStorage.getItem('article_uuid');
|
|
var armed = a.attr('armed');
|
|
|
|
if (armed == 'yes') {
|
|
$.ajax({
|
|
url: '/manager/editor/delete',
|
|
type: 'POST',
|
|
data: { article_uuid: uuid },
|
|
success:function(response) {
|
|
localStorage.setItem('article_uuid', 'none');
|
|
editorMaker();
|
|
}
|
|
});
|
|
}
|
|
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', '#editor_new', function() {
|
|
localStorage.setItem('article_uuid', 'none');
|
|
editorMaker('new');
|
|
|
|
});
|
|
|
|
$(document).on('click', '.editor_close_button', function() {
|
|
$('#grapple').hide();
|
|
$('#grapple').css(original_grapple_position);
|
|
}); |