diff --git a/sourcing/edl.py b/sourcing/edl.py index f04bb6f..7851eb4 100644 --- a/sourcing/edl.py +++ b/sourcing/edl.py @@ -42,7 +42,7 @@ def parse_edl(edl_text): return edl -def fulfil_edl_with_sources(edl_text): +def fulfil_edl_with_sources(edl_text, hide_all_transclusions=False): edl = parse_edl(edl_text) spans = edl['spans'] @@ -83,7 +83,7 @@ def fulfil_edl_with_sources(edl_text): doc_spans = [] for num, (url, start, length) in spans: - highlight = url not in hide_transclusions + highlight = not hide_all_transclusions and url not in hide_transclusions span_text = source_text[url] # [start:start + length] new_text = '' pos = start diff --git a/sourcing/parse.py b/sourcing/parse.py index 034c04f..972799e 100644 --- a/sourcing/parse.py +++ b/sourcing/parse.py @@ -68,6 +68,12 @@ def parse_sourcedoc_facet(facet): assert leg.startswith(prefix) return leg[len(prefix):] +def parse_xanapage_facet(facet): + leg = facet[0] + prefix = 'xanapage: ' + assert leg.startswith(prefix) + return leg[len(prefix):] + def parse_link(link_text): link_type = None expect = 'link_type' diff --git a/sourcing/static/js/xanaflight.js b/sourcing/static/js/xanaflight.js new file mode 100644 index 0000000..05513d8 --- /dev/null +++ b/sourcing/static/js/xanaflight.js @@ -0,0 +1,353 @@ +'use strict'; + +var doc1 = document.getElementById('doc1'); +var edlform = document.getElementById('edlform'); +var max_zindex = 0; +var bridge_count = 0; +var link_bridge_count = 0; +var payment_params = {}; +var payment_content; +var xnb_per_char = 150000; + +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 < bridge_count; i++) { + update_bridge('bridge' + i, 'span' + i, 'transclusion' + i); + } + + for(var i = 0; i < link_bridge_count; i++) { + update_bridge('linkbridge' + i, 'xanalink' + i, 'link' + 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; + + 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); + } + + bridge_count = 0; + link_bridge_count = 0; +} + +$("button#clear").click(function(event) { + $("#edl").val(""); + reset(); +}); + +function get_end_number(str) { + var len = str.length; + var num; + for(var i = 0; i < len; i++) { + if(!isNaN(num = parseInt(str.substr(i)))) + return num; + } + throw "no number found"; +} + +function hover_bridge(element, hover) { + var num = get_end_number(element.id); + var bridge = document.getElementById('bridge' + num); + + bridge.setAttribute("class", hover ? 'hoverbridge' : 'bridge'); + + var cls = 'hovertransclusion'; + + if (hover) { + $('#transclusion' + num).addClass(cls); + $('#span' + num).addClass(cls); + } else { + $('#transclusion' + num).removeClass(cls); + $('#span' + num).removeClass(cls); + } +} + +function hover_link_bridge(element, hover) { + var num = get_end_number(element.id); + var bridge = document.getElementById('linkbridge' + num); + + bridge.setAttribute("class", hover ? 'hoverlinkbridge' : 'linkbridge'); + + var cls = 'hoverlink'; + + if (hover) { + $('#xanalink' + num).addClass(cls); + $('#link' + num).addClass(cls); + } else { + $('#xanalink' + num).removeClass(cls); + $('#link' + num).removeClass(cls); + } +} + +function fulfil(doc) { + bridge_count = doc.span_count; + link_bridge_count = doc.link_count; + var svg_element = document.getElementById('svg'); + + for(var i = 0; i < doc.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); + } + + new_document({'heading': 'xanadoc', + 'text': doc.doc, + 'doctype': 'xanadoc'}); + + update(); + + $('.link').bind('mouseover', function(e) { + hover_link_bridge(this, true); + }); + + $('.link').bind('mouseout', function(e) { + hover_link_bridge(this, false); + }); + + $('.xanadoclink').click(function(e) { + var num = get_end_number(this.id); + var source = $('#link' + num).closest( ".sourcedoc" ); + + var bridge1 = document.getElementById('linkbridge' + num); + var cur_state = bridge1.getAttribute('visibility'); + var new_state = cur_state == 'hidden' ? 'visible' : 'hidden'; + + source.find('.sourcedoclink').each(function(index, value) { + var bridge_num = get_end_number(value.id); + var bridge = document.getElementById('linkbridge' + bridge_num); + bridge.setAttribute('visibility', new_state); + }); + + source.toggle(); + + update(); + }); + + $('.xanadoctransclusion').click(function(e) { + var num = get_end_number(this.id); + var source = $('#transclusion' + num).closest( ".sourcedoc" ); + + var bridge1 = document.getElementById('bridge' + num); + var cur_state = bridge1.getAttribute('visibility'); + var new_state = cur_state == 'hidden' ? 'visible' : 'hidden'; + + source.find('.sourcedoctransclusion').each(function(index, value) { + var bridge_num = get_end_number(value.id); + var bridge = document.getElementById('bridge' + bridge_num); + bridge.setAttribute('visibility', new_state); + }); + + source.toggle(); + + update(); + }); + + $('.body').bind('scroll', function(event) { + update(); + }); + + $('.sourcedoc').hide(); +} + +function size_svg() { + var w = document.documentElement.clientWidth - 10; + var h = document.documentElement.clientHeight - 10; + $('svg').width(w); + $('svg').height(h); +} diff --git a/sourcing/templates/view/xanaflight.html b/sourcing/templates/view/xanaflight.html new file mode 100644 index 0000000..7b7adaf --- /dev/null +++ b/sourcing/templates/view/xanaflight.html @@ -0,0 +1,62 @@ + + + + + + +{{ title | default("Xanadu") }} + + + + + + +{% include "navbar.html" %} +
+{% include "flash_msg.html" %} + +{% raw %} + +{% endraw %} + + + + +
+ +
+ + + + + + + + + + + + + + diff --git a/sourcing/view.py b/sourcing/view.py index 20d8177..091a532 100644 --- a/sourcing/view.py +++ b/sourcing/view.py @@ -6,6 +6,7 @@ from .forms import (LoginForm, SignupForm, AccountSettingsForm, UploadSourceDocForm, SourceDocForm, ItemForm, ForgotPasswordForm, PasswordForm) from .model import User, SourceDoc, Item, XanaDoc, XanaLink, Reference +from .parse import parse_xanapage_facet from .url import get_url from .mail import send_mail from .edl import fulfil_edl_with_sources, fulfil_edl, parse_edl @@ -234,13 +235,31 @@ def realize_edl(username, hashid): def view_item_raw(username, hashid): return view_item(username, hashid, raw=True) +def fulfil_xanaflight(item): + link = item.parse() + assert link['type'] == 'flight' + facets = link['facets'] + docs = [] + for facet in facets: + xanapage = Item.from_external(parse_xanapage_facet(facet)) + assert xanapage.type == 'xanadoc' + doc = fulfil_edl_with_sources(xanapage.text, hide_all_transclusions=True) + doc['hashid'] = xanapage.hashid + print(doc) + print() + docs.append(doc) + return render_template('view/xanaflight.html', item=item, docs=docs) + @bp.route('///fulfil') def fulfil(username, hashid): - item = get_xanadoc(username, hashid) + item = get_item(username, hashid) - return render_template('view/xanadoc.html', - item=item, - doc=fulfil_edl_with_sources(item.text)) + if item.type == 'xanadoc': + return render_template('view/xanadoc.html', + item=item, + doc=fulfil_edl_with_sources(item.text)) + if item.type == 'xanalink' and item.text.startswith('type=flight'): + return fulfil_xanaflight(item) @bp.route('///set_title', methods=['POST']) def set_title(username, hashid):