+
+ _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 = $("<div class='zakladka'>");
+ $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();
+ }
+ });