X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/b94c6ee5854472d0054f42ac5757b84819adcd6c..7bbeecb5dd5c5f20120f9e40e41568a3bff1caa4:/src/wolnelektury/static/js/book_text/references.js
diff --git a/src/wolnelektury/static/js/book_text/references.js b/src/wolnelektury/static/js/book_text/references.js
index 7e21b21d4..ef6c51c94 100644
--- a/src/wolnelektury/static/js/book_text/references.js
+++ b/src/wolnelektury/static/js/book_text/references.js
@@ -1,25 +1,26 @@
(function($){$(function(){
+ let csrf = $("[name='csrfmiddlewaretoken']").val();
var interestingReferences = $("#interesting-references").text();
if (interestingReferences) {
interestingReferences = $.parseJSON(interestingReferences);
}
- if (interestingReferences) {
- $("#settings-references").show();
+ if (Object.keys(interestingReferences).length) {
+ $("#settings-references").css('display', 'block');
}
-
-
var map_enabled = false;
- var marker = L.marker([0,0]);
+ var marker = L.circleMarker([0,0]);
var map = null;
function enable_map() {
+ $("#reference-map").show('slow');
+
if (map_enabled) return;
map = L.map('reference-map').setView([0, 0], 11);
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: 'Map data © OpenStreetMap contributors'
+ L.tileLayer('https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=a8a97f0ae5134403ac38c1a075b03e15', {
+ attribution: 'Maps © Thunderforest, Data © OpenStreetMap contributors'
}).addTo(map);
map_enabled = true;
@@ -29,13 +30,18 @@
}
- $("#reference-close").on("click", function() {
+ $("#reference-close").on("click", function(event) {
+ event.preventDefault();
$("#reference-box").hide();
});
$('a.reference').each(function() {
$this = $(this);
uri = $this.attr('data-uri');
+ if (uri == '') {
+ $this.remove();
+ return;
+ }
if (interestingReferences.hasOwnProperty(uri)) {
$this.addClass('interesting');
ref = interestingReferences[uri];
@@ -58,11 +64,18 @@
if (ref.location) {
enable_map();
- marker.setLatLng(ref.location);
- //marker.setContent(ref.label);
+ let newLoc = [
+ ref.location[0],
+ ref.location[1] + Math.round(
+ (map.getCenter().lng - ref.location[1]) / 360
+ ) * 360
+ ];
+
+ marker.setLatLng(newLoc);
marker.bindTooltip(ref.label).openTooltip();
map.addLayer(marker);
- map.panTo(ref.location, {
+
+ map.panTo(newLoc, {
animate: true,
duration: 1,
});
@@ -73,17 +86,587 @@
}
}
- $("#reference-images img").remove();
+ $("#reference-images a").remove();
if (ref.images) {
$.each(ref.images, function(i, e) {
$i = $("![]()
");
$i.attr('href', e.page);
- $('img', $i).attr('src', e.url);
+ $('img', $i).attr('src', e.thumburl || e.url);
+ if (e.thumbresolution) {
+ $('img', $i).attr('width', e.thumbresolution[0]).attr('height', e.thumbresolution[1]);
+ }
+
$("#reference-images").append($i);
})
}
$("#reference-link").text(ref.label);
$("#reference-link").attr('href', ref.wikipedia_link);
+
+ _paq.push(['trackEvent', 'html', 'reference']);
+ });
+
+
+ function putNoteAt($elem, anchor, side) {
+ $elem.data('anchoredTo', anchor);
+ updateNote($elem, side);
+ }
+
+ function updateNote($elem, side) {
+ anchor = $elem.data('anchoredTo')
+ if (!anchor) return;
+ let anchorRect = anchor.getBoundingClientRect();
+
+ let x = anchorRect.x + anchorRect.width / 2;
+ let y = anchorRect.y;
+ if ($elem.data('attach-bottom')) {
+ y += anchorRect.height;
+ }
+ minx = $("#book-text").position().left;
+ maxx = minx + $("#book-text").width();
+
+ margin = 20;
+ minx += margin;
+ maxx -= margin;
+ maxx += 10000;
+
+ //boxwidth = 470;
+ boxwidth = $elem.width();
+
+ if (maxx - minx <= boxwidth) {
+ nx = margin;
+ right = margin;
+ leftoffset = x - margin;
+ } else {
+ right = '';
+
+ leftoffset = $elem.data('default-leftoffset');
+ if (leftoffset === undefined) {
+ leftoffset = $elem.width() / 2;
+ }
+
+ nx = x - leftoffset;
+
+ $elem.css({right: ''});
+
+ // Do we need to move away from the left?
+ if (nx < minx) {
+ let d = minx - nx;
+ nx += d;
+ leftoffset -= d;
+ }
+
+ // Do we need to move away from the right?
+ if (nx + boxwidth > maxx) {
+ right = '';
+ let d = nx + boxwidth - maxx;
+ nx -= d;
+ leftoffset += d;
+ }
+ }
+ $elem.css({
+ left: nx,
+ right: right
+ });
+ $elem.css({
+ display: "block"
+ });
+ if (!$elem.data('attach-bottom')) {
+ ny = y - $elem.height() - 10;
+ } else {
+ ny = y + 10;
+ }
+ $elem.css({
+ top: ny
+ });
+ $('.pointer', $elem).css({
+ left: leftoffset - 6
+ });
+
+ }
+
+ function closeNoteBox() {
+ $('#annotation-box').data('anchoredTo', null).fadeOut();
+ }
+ $(document).on('click', function(event) {
+ let t = $(event.target);
+ if (t.parents('#annotation-box').length && !t.is('#footnote-link')) {
+ return;
+ }
+ closeNoteBox();
+ });
+ $(window).on('resize', closeNoteBox);
+
+ function getPositionInBookText($e) {
+ let x = 0, y = 0;
+
+ // Ok dla Y, nie ok dla X
+
+ while ($e.attr('id') != 'book-text') {
+ let p = $e.position();
+ x += p.left;
+ y += p.top;
+ $e = $e.offsetParent();
+ break;
+ }
+ return {"x": x, "y": y}
+ }
+
+ $('#book-text .annotation').on('click', function(event) {
+ if ($(this).parents('#footnotes').length) return;
+ event.preventDefault();
+
+ href = $(this).attr('href').substr(1);
+ content = $("[name='" + href + "']").next().next().html();
+ if (!content) return;
+ $("#annotation-content").html(content);
+ $("#footnote-link").attr('href', '#' + href)
+
+ putNoteAt($('#annotation-box'), this);
+ event.stopPropagation();
+ });
+
+
+
+ let zakladki = {};
+ $.get({
+ url: '/zakladki/',
+ success: function(data) {
+ zakladki = data;
+ $.each(zakladki, (i, e) => {
+ zakladkaUpdateFor(
+ // TODO: not just paragraphs.
+ $('[href="#' + e.anchor + '"]').nextAll('.paragraph').first()
+ );
+ });
+ }
+ });
+
+ // TODO: create bookmarks on init
+ // We need to do that from anchors.
+
+ function zakladkaUpdateFor($item) {
+
+ let anchor = $item.prevAll('.target').first().attr('name');
+
+ if (anchor in zakladki) {
+ let $booktag = $item.data('booktag');
+ if (!$booktag) {
+
+ // TODO: only copy without the dialog.
+ $booktag = $("");
+ $booktag.append($('.icon', $zakladka).clone());
+
+ $item.data('booktag', $booktag);
+ $booktag.data('p', $item);
+ $booktag.data('anchor', anchor);
+ $zakladka.after($booktag);
+
+ zakladkaSetPosition($booktag);
+ $booktag.show();
+ }
+
+ $z = $booktag;
+ if (zakladki[anchor].note) {
+ $z.removeClass('zakladka-exists');
+ $z.addClass('zakladka-note');
+ } else {
+ $z.removeClass('zakladka-note');
+ $z.addClass('zakladka-exists');
+ }
+ } else {
+ let $booktag = $item.data('booktag');
+ if ($booktag) {
+ $item.data('booktag', null);
+ $zakladka.append($("#zakladka-box"));
+ $booktag.remove();
+ }
+ }
+ }
+
+ function zakladkaSetPosition($z) {
+ $item = $z.data('p');
+ pos = getPositionInBookText($item);
+ $z.css({
+ display: 'block',
+ top: pos.y,
+ right: ($('#main-text').width() - $('#book-text').width()) / 2,
+ });
+ }
+
+ let $zakladka = $('#zakladka');
+ $('#book-text .paragraph').on('mouseover', function() {showMarker($(this));});
+ $('#book-text .verse').on('mouseover', function() {showMarker($(this));});
+ //$.PMarker.showForP(this);
+
+
+ function showMarker(p) {
+
+ // Close the currently tag box when moving to another one.
+ // TBD: Do we want to keep the box open and prevent moving?
+ $("#zakladka-box").hide();
+
+ let anchor = p.prevAll('.target').first().attr('name');
+ // Don't bother if there's no anchor to use.
+ if (!anchor) return;
+
+ // Only show tag if there is not already a tag for this p.
+ if (p.data('booktag')) {
+ $zakladka.hide();
+ } else {
+ $zakladka.data('p', p);
+ $zakladka.data('anchor', anchor);
+
+ // (not needed) zakladkaUpdateClass();
+ // TODO: UPDATE THIS ON OPEN?
+ //let note = anchor in zakladki ? zakladki[anchor].note : '';
+ //$('textarea', $zakladka).val(note);
+
+ zakladkaSetPosition($zakladka);
+ $zakladka.show();
+ }
+ }
+
+ $(".zakladka-tool_zakladka").on('click', function() {
+ let $z = $("#zakladka-box").data('z');
+ let anchor = $z.data('anchor');
+ let $p = $z.data('p');
+ $.post({
+ url: '/zakladki/',
+ data: {
+ csrfmiddlewaretoken: csrf,
+ anchor: anchor
+ },
+ success: function(data) {
+ zakladki[data.anchor] = data;
+ $("#zakladka-box").hide();
+
+ // Just hide, and create new .zakladka if not already exists?
+ // In general no hiding 'classed' .zakladka.
+ // So the 'cursor' .zakladka doesn't ever need class update.
+ //zakladkaUpdateClass();
+ zakladkaUpdateFor($p);
+
+ }
+ });
+ });
+
+ $(".zakladka-tool_notka_text textarea").on('input', function() {
+ // FIXME: no use const $zakladka here, check which .zakladka are we attached to.
+ let $z = $(this).closest('.zakladka');
+ let anchor = $z.data('anchor');
+
+ $("#notka-saved").hide();
+ //$("#notka-save").show();
+ $.post({
+ url: '/zakladki/' + zakladki[anchor].uuid + '/',
+ data: {
+ csrfmiddlewaretoken: csrf,
+ note: $(this).val()
+ },
+ success: function(data) {
+ zakladki[anchor] = data;
+ zakladkaUpdateFor($z.data('p'));
+ $("#notka-save").hide();
+ $("#notka-saved").fadeIn();
+ }
+ });
+ });
+
+ $(".zakladka-tool_zakladka_delete").on('click', function() {
+ let $z = $(this).closest('.zakladka');
+ let anchor = $z.data('anchor');
+ $.post({
+ url: '/zakladki/' + zakladki[anchor].uuid + '/delete/',
+ data: {
+ csrfmiddlewaretoken: csrf,
+ },
+ success: function(data) {
+ delete zakladki[anchor];
+ $("#zakladka-box").hide();
+ zakladkaUpdateFor($z.data('p'));
+ }
+ });
});
+
+ $("#main-text").on("click", ".zakladka .icon", function() {
+ let $z = $(this).closest('.zakladka');
+ let $box = $("#zakladka-box");
+ $z.append($box);
+ $box.data('z', $z);
+
+ let $p = $z.data('p');
+ let anchor = $z.data('anchor');
+ let note = anchor in zakladki ? zakladki[anchor].note : '';
+
+ $('.zakladka-tool_zakladka', $box).toggle(!(anchor in zakladki));
+ $('.zakladka-tool_sluchaj', $box).toggle($p.hasClass('syncable')).data('sync', $p.attr('id'));
+ $('textarea', $box).val(note);
+
+ $box.toggle();
+ });
+
+
+ class QBox {
+ constructor(qbox) {
+ this.qbox = qbox;
+ }
+ showForSelection(sel) {
+ // TODO: only consider ranges inside text.?
+ this.selection = sel;
+
+ // TODO: multiple ranges.
+ let range = sel.getRangeAt(0);
+ let rect = range.getBoundingClientRect();
+
+ putNoteAt(this.qbox, range)
+ }
+ showForBlock(b) {
+ let rect = b.getBoundingClientRect();
+
+ putNoteAt(this.qbox, b, 'left')
+ }
+ hide() {
+ this.qbox.data('anchoredTo', null);
+ this.qbox.fadeOut();
+ }
+ hideCopied() {
+ this.qbox.data('anchoredTo', null);
+ this.qbox.addClass('copied').fadeOut(1500, () => {
+ this.qbox.removeClass('copied');
+ });
+ }
+
+ copyText() {
+ // TODO: only consider ranges inside text.?
+ let range = this.selection.getRangeAt(0);
+ let e = range.startContainer;
+ let anchor = getIdForElem(e);
+ let text = window.location.protocol + '//' +
+ window.location.host +
+ window.location.pathname;
+
+ navigator.clipboard.writeText(
+ this.selection.toString() +
+ '\n\nCaÅoÅÄ czytaj na: ' + text
+ );
+ this.hideCopied();
+ }
+ copyLink() {
+ // TODO: only consider ranges inside text.?
+ let range = this.selection.getRangeAt(0);
+ let e = range.startContainer;
+ let anchor = getIdForElem(e);
+ let text = window.location.protocol + '//' +
+ window.location.host +
+ window.location.pathname;
+ if (anchor) text += '#' + anchor;
+ navigator.clipboard.writeText(text);
+
+ this.hideCopied();
+ }
+ quote() {
+ // What aboot non-contiguous selections?
+ let sel = this.selection;
+ let textContent = sel.toString();
+ let anchor = getIdForElem(sel.getRangeAt(0).startContainer);
+ let paths = getSelectionPaths(sel);
+ $.post({
+ url: '/cytaty/',
+ data: {
+ csrfmiddlewaretoken: csrf,
+ text: textContent,
+ startElem: anchor,
+ //endElem: endElem,
+ //startOffset: 0,
+ //endOffset: 0,
+ paths: paths,
+ },
+ success: function (data) {
+ var win = window.open('/cytaty/' + data.uuid + '/', '_blank');
+ }
+ });
+
+ }
+
+ }
+ let qbox = new QBox($("#qbox"));
+
+
+ function getPathToNode(elem) {
+ // Need normalize?
+ let path = [];
+ while (elem.id != 'book-text') {
+ let p = elem.parentElement;
+ path.unshift([...p.childNodes].indexOf(elem))
+ elem = p;
+ }
+ return path;
+ }
+ function getSelectionPaths(selection) {
+ // does it work?
+ let range1 = selection.getRangeAt(0);
+ let range2 = selection.getRangeAt(selection.rangeCount - 1);
+ let paths = [
+ getPathToNode(range1.startContainer) + [range1.startOffset],
+ getPathToNode(range2.endContainer) + [range2.endOffset]
+ ]
+ return paths;
+ }
+
+
+ function getIdForElem(elem) {
+ // is it used?
+ let $elem = $(elem);
+ // check if inside book-text?
+
+ while (true) {
+ if ($elem.hasClass('target')) {
+ return $elem.attr('name');
+ }
+ $p = $elem.prev();
+ if ($p.length) {
+ $elem = $p;
+ } else {
+ // Gdy wychodzimy w górÄ -- to jest ten moment, w którym znajdujemy element od którego wychodzimy i zliczamy znaki.
+
+
+ $p = $elem.parent()
+ if ($p.length) {
+ // is there text?
+ $elem = $p;
+ } else {
+ return undefined;
+ }
+ }
+ }
+ }
+
+ function getIdForElem(elem) {
+ // is it used?
+ // check if inside book-text?
+ $elem = $(elem);
+ while (true) {
+ if ($elem.hasClass('target')) {
+ return $elem.attr('name');
+ }
+ $p = $elem.prev();
+ if ($p.length) {
+ $elem = $p;
+ } else {
+ $p = $elem.parent()
+ if ($p.length) {
+ // is there text?
+ $elem = $p;
+ } else {
+ return undefined;
+ }
+ }
+ }
+ }
+
+
+ function positionToIIDOffset(container, offset) {
+ // Container and offset follow Range rules.
+ // If container is a text node, offset is text offset.
+ // If container is an element node, offset is number of child nodes from container start.
+ // (containers of type Comment, CDATASection - ignore)z
+ }
+
+
+ function updateQBox() {
+ sel = document.getSelection();
+ let goodS = true;
+ if (sel.isCollapsed || sel.rangeCount < 1) {
+ goodS = false;
+ }
+
+ if (!goodS) {
+ qbox.hide();
+ } else {
+ qbox.showForSelection(sel);
+ }
+ };
+ $(document).on('selectionchange', updateQBox);
+
+ function updateBoxes() {
+ updateNote(qbox.qbox);
+ updateNote($('#annotation-box'));
+
+ }
+ $(window).on('scroll', updateBoxes);
+ $(window).on('resize', updateBoxes);
+
+
+ $(window).on('resize', function() {
+ $('.zakladka').each(function() {
+ zakladkaSetPosition($(this));
+ });
+ });
+
+ $('a.anchor').on('click', function(e) {
+ // Workaround for bad TOC markers.
+ if ($(this).closest('#toc').length) return;
+ if ($(this).closest('#wltoc').length) return;
+ e.preventDefault();
+
+ let sel = window.getSelection();
+ sel.removeAllRanges();
+ let range = document.createRange();
+
+ let $p = $(this).nextAll('.paragraph').first()
+ range.selectNode($p[0]);
+ sel.addRange(range);
+
+ qbox.showForSelection(sel);
+
+ showMarker($p);
+ });
+
+
+
+ $('.qbox-t-copy').on('click', function(e) {
+ e.preventDefault();
+ qbox.copyText();
+ });
+ $('.qbox-t-link').on('click', function(e) {
+ e.preventDefault();
+ qbox.copyLink();
+ });
+ $('.qbox-t-quote').on('click', function(e) {
+ e.preventDefault();
+ qbox.quote();
+ });
+
+
+ /*
+ $(".paragraph").on('click', function(e) {
+ qbox.showForBlock(this);
+ });
+ */
+
+
+ function scrollToAnchor(anchor) {
+ if (anchor) {
+ var anchor_name = anchor.slice(1);
+ var element = $('a[name="' + anchor_name + '"]');
+ if (element.length > 0) {
+ $("html").animate({
+ scrollTop: element.offset().top - 55
+ }, {
+ duration: 500,
+ done: function() {
+ history.pushState({}, '', anchor);
+ },
+ });
+ }
+ }
+ }
+ scrollToAnchor(window.location.hash)
+ $('#toc, #themes, #book-text, #annotation').on('click', 'a', function(event) {
+ event.preventDefault();
+ scrollToAnchor($(this).attr('href'));
+ });
+
+
})})(jQuery);