323 lines
8.3 KiB
JavaScript
323 lines
8.3 KiB
JavaScript
'use strict';
|
|
|
|
var doc1 = document.getElementById('doc1');
|
|
var edlform = document.getElementById('edlform');
|
|
var max_zindex = 0;
|
|
var link_bridge_count = 0;
|
|
var payment_params = {};
|
|
var payment_content;
|
|
var xnb_per_char = 150000;
|
|
|
|
var box_height = 400;
|
|
var box_width = 400;
|
|
|
|
function listener (event) {
|
|
console.log(event.type, event.pageX, event.pageY);
|
|
}
|
|
|
|
function hl_location(hl) {
|
|
var rects = hl.getClientRects();
|
|
var top = rects[0].top;
|
|
var right = rects[0].right;
|
|
var bottom = rects[rects.length-1].bottom
|
|
var left = rects[rects.length-1].left;
|
|
console.log(top, right, bottom, left);
|
|
}
|
|
|
|
function dragMoveListener (event) {
|
|
var target = event.target,
|
|
// keep the dragged position in the data-x/data-y attributes
|
|
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
|
|
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
|
|
|
|
update_location(target, x, y);
|
|
|
|
update();
|
|
}
|
|
|
|
function update() {
|
|
for(var i = 0; i < link_bridge_count; i++) {
|
|
update_bridge('linkbridge' + i, 'link1_' + i, 'link2_' + i);
|
|
}
|
|
}
|
|
|
|
function update_bridge(bridge, name_h1, name_h2) {
|
|
var points = []
|
|
|
|
var h1 = document.getElementById(name_h1);
|
|
var h2 = document.getElementById(name_h2);
|
|
|
|
|
|
if (!h1) {
|
|
return;
|
|
}
|
|
if (!h2) {
|
|
return; // because we skipped the large document
|
|
}
|
|
|
|
|
|
var rect1 = h1.getBoundingClientRect();
|
|
var rect2 = h2.getBoundingClientRect();
|
|
|
|
var h1_x_center = rect1.right - rect1.width / 2;
|
|
var h2_x_center = rect2.right - rect2.width / 2;
|
|
|
|
var bridge_element = document.getElementById(bridge);
|
|
|
|
var h_l, h_r, rect_l, rect_r;
|
|
if (h1_x_center < h2_x_center) {
|
|
h_l = h1;
|
|
h_r = h2;
|
|
rect_l = rect1;
|
|
rect_r = rect2;
|
|
} else {
|
|
h_l = h2;
|
|
h_r = h1;
|
|
rect_l = rect2;
|
|
rect_r = rect1;
|
|
}
|
|
|
|
var body_l = $(h_l).closest(".body").get(0).getBoundingClientRect();
|
|
var body_r = $(h_r).closest(".body").get(0).getBoundingClientRect();
|
|
|
|
var left_bottom = rect_l.bottom;
|
|
if(left_bottom < body_l.top) {
|
|
left_bottom = body_l.top;
|
|
} else if (left_bottom > body_l.bottom) {
|
|
left_bottom = body_l.bottom;
|
|
}
|
|
|
|
var left_top = rect_l.top;
|
|
if(left_top < body_l.top) {
|
|
left_top = body_l.top;
|
|
} else if (left_top > body_l.bottom) {
|
|
left_top = body_l.bottom;
|
|
}
|
|
|
|
var right_bottom = rect_r.bottom;
|
|
if(right_bottom < body_r.top) {
|
|
right_bottom = body_r.top;
|
|
} else if (right_bottom > body_r.bottom) {
|
|
right_bottom = body_r.bottom;
|
|
}
|
|
|
|
var right_top = rect_r.top;
|
|
if(right_top < body_r.top) {
|
|
right_top = body_r.top;
|
|
} else if (right_top > body_r.bottom) {
|
|
right_top = body_r.bottom;
|
|
}
|
|
|
|
points.push(rect_l.right + ',' + left_top);
|
|
points.push(rect_l.right + ',' + left_bottom);
|
|
|
|
points.push(rect_r.left + ',' + right_bottom);
|
|
points.push(rect_r.left + ',' + right_top);
|
|
|
|
var poly = document.getElementById(bridge);
|
|
poly.setAttribute('points', points.join(' '));
|
|
}
|
|
|
|
function update_location(target, x, y) {
|
|
// target.style.transform = 'scale(0.75) translate(' + x + 'px, ' + y + 'px)';
|
|
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
|
|
|
|
target.setAttribute('data-x', x);
|
|
target.setAttribute('data-y', y);
|
|
|
|
max_zindex += 1;
|
|
target.style.zIndex = max_zindex;
|
|
}
|
|
|
|
function resizemove(event) {
|
|
var target = event.target,
|
|
x = (parseFloat(target.getAttribute('data-x')) || 0),
|
|
y = (parseFloat(target.getAttribute('data-y')) || 0);
|
|
|
|
// update the element's style
|
|
target.style.width = event.rect.width + 'px';
|
|
target.style.height = event.rect.height + 'px';
|
|
|
|
// translate when resizing from top or left edges
|
|
x += event.deltaRect.left;
|
|
y += event.deltaRect.top;
|
|
|
|
update_location(target, x, y);
|
|
|
|
update();
|
|
}
|
|
|
|
interact('.document')
|
|
.draggable({
|
|
onmove: dragMoveListener,
|
|
})
|
|
.resizable({
|
|
// preserveAspectRatio: false,
|
|
edges: { left: true, right: true, bottom: true, top: true },
|
|
})
|
|
.on('resizemove', resizemove)
|
|
.actionChecker(function (pointer, event, action, interactable, element, interaction) {
|
|
if (!interact.matchesSelector(event.target, '.heading') && action.name == 'drag') {
|
|
return;
|
|
}
|
|
return action;
|
|
});
|
|
|
|
interact('#edlform')
|
|
.draggable({
|
|
onmove: dragMoveListener,
|
|
})
|
|
.on('resizemove', resizemove)
|
|
.actionChecker(function (pointer, event, action, interactable, element, interaction) {
|
|
if (!interact.matchesSelector(event.target, '.heading') && action.name == 'drag') {
|
|
return;
|
|
}
|
|
return action;
|
|
});
|
|
|
|
// doc1.style.height = '400px';
|
|
// update_location(doc1, 200, 50);
|
|
|
|
var docid = 0;
|
|
|
|
function new_document(doc) {
|
|
var source = $("#document-template").html();
|
|
var template = Handlebars.compile(source);
|
|
docid++;
|
|
var context = {
|
|
docid: docid,
|
|
heading: doc.heading,
|
|
doctype: doc.doctype,
|
|
text: doc.text
|
|
};
|
|
var element = $(template(context));
|
|
var w = document.documentElement.clientWidth;
|
|
var h = document.documentElement.clientHeight;
|
|
|
|
if (doc.doctype == 'xanadoc') {
|
|
var ratio = (doc.index + 1) / (doc.doc_count + 1)
|
|
var r_index = doc.doc_count - doc.index - 1;
|
|
var x = (w * ratio - (r_index * (box_width / 2)));
|
|
var y = (h - box_height) / 2;
|
|
} else {
|
|
var x = Math.random() * (w - 400);
|
|
var y = Math.random() * (h - 400);
|
|
}
|
|
update_location(element.get(0), x, y);
|
|
|
|
$("#top").append(element);
|
|
}
|
|
|
|
function reset() {
|
|
$(".document").remove();
|
|
|
|
var svg = document.getElementById('svg');
|
|
while (svg.firstChild) {
|
|
svg.removeChild(svg.firstChild);
|
|
}
|
|
|
|
link_bridge_count = 0;
|
|
}
|
|
|
|
$("button#clear").click(function(event) {
|
|
$("#edl").val("");
|
|
reset();
|
|
});
|
|
|
|
function get_end_number(str) {
|
|
var sep = str.indexOf('_');
|
|
return str.substr(sep + 1);
|
|
}
|
|
|
|
function hover_link_bridge(element, hover) {
|
|
|
|
var num = get_end_number(element.id);
|
|
var bridge = document.getElementById('linkbridge' + num);
|
|
|
|
if (bridge === null) {
|
|
return;
|
|
}
|
|
|
|
bridge.setAttribute("class", hover ? 'hoverlinkbridge' : 'linkbridge');
|
|
|
|
var cls = 'hoverlink';
|
|
|
|
if (hover) {
|
|
// $('#xanalink' + num).addClass(cls);
|
|
$('#link1_' + num).addClass(cls);
|
|
$('#link2_' + num).addClass(cls);
|
|
} else {
|
|
// $('#xanalink' + num).removeClass(cls);
|
|
$('#link1_' + num).removeClass(cls);
|
|
$('#link2_' + num).removeClass(cls);
|
|
}
|
|
}
|
|
|
|
function create_bridges(link_count) {
|
|
link_bridge_count = link_count;
|
|
|
|
var svg_element = document.getElementById('svg');
|
|
|
|
for(var i = 0; i < link_count; i++) {
|
|
var p = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
|
|
p.setAttribute('id', 'linkbridge' + i);
|
|
p.setAttribute('class', 'linkbridge');
|
|
p.setAttribute('visibility', 'hidden');
|
|
|
|
p.addEventListener('mouseover', function(e) {
|
|
hover_link_bridge(this, true);
|
|
});
|
|
|
|
p.addEventListener('mouseout', function(e) {
|
|
hover_link_bridge(this, false);
|
|
});
|
|
|
|
svg_element.appendChild(p);
|
|
}
|
|
|
|
}
|
|
|
|
function fulfil(doc, index, doc_count) {
|
|
var svg_element = document.getElementById('svg');
|
|
|
|
new_document({'heading': 'xanadoc',
|
|
'text': doc.doc,
|
|
'doctype': 'xanadoc',
|
|
'index': index,
|
|
'doc_count': doc_count});
|
|
|
|
}
|
|
|
|
function size_svg() {
|
|
var w = document.documentElement.clientWidth - 10;
|
|
var h = document.documentElement.clientHeight - 10;
|
|
$('svg').width(w);
|
|
$('svg').height(h);
|
|
}
|
|
|
|
function add_handlers() {
|
|
$('.xanadoclink').click(function(e) {
|
|
var num = get_end_number(this.id);
|
|
|
|
var bridge = document.getElementById('linkbridge' + num);
|
|
var cur_state = bridge.getAttribute('visibility');
|
|
var new_state = cur_state == 'hidden' ? 'visible' : 'hidden';
|
|
|
|
bridge.setAttribute('visibility', new_state);
|
|
|
|
update();
|
|
});
|
|
|
|
$('.xanadoclink').bind('mouseover', function(e) {
|
|
hover_link_bridge(this, true);
|
|
});
|
|
|
|
$('.xanadoclink').bind('mouseout', function(e) {
|
|
hover_link_bridge(this, false);
|
|
});
|
|
|
|
$('.body').bind('scroll', function(event) {
|
|
update();
|
|
});
|
|
}
|