Difference between revisions of "MediaWiki:Common.js"

Revision as of 09:36, 9 June 2020

/* Any JavaScript here will be loaded for all users on every page load. */
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if ($('#'+elmnt[0].id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    $('#'+elmnt[0].id + "header").on('mousedown', dragMouseDown);
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.on('mousedown',dragMouseDown);
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    $(document).on('mouseup',closeDragElement);
    // call a function whenever the cursor moves:
    $(document).on('mousemove',elementDrag);
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.css('top', (elmnt[0].offsetTop - pos2) + "px");
    elmnt.css('left', (elmnt[0].offsetLeft - pos1) + "px");
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    $(document).off('mouseup',closeDragElement);
    $(document).off('mousemove',elementDrag);
  }
}
var timer, timer_out, origin, what, mouseWhere='';
var dte, whereami;
var container = $("body");
var count=0;

$('.verse').each(function(){  });

$('.verse').on('click', function(){ 
  elm = $(this);
  verse = elm.text();
  id = elm.text().replace(' ', '').replace(':','').replace('-','');
  
  if ($('#' + id).length === 0) {
    $.ajax({
      url: '/chronology/index.php?route=common/home/sa',
      type: 'get',
      data: '&verse=' + verse,
      dataType: 'html',
      beforeSend: function() { },
      success: function(json) {
        var dv = '<div id="' + id +'" style="visibility:hidden; box-shadow: 0 0 10px rgba(0,0,0,0.5); background-color:#eee; width:250px;height:250px;position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);"><div id="'+ id +'header" style="background-color:#aaa;cursor: move;padding:5px 10px">' + verse + '<div class="close" style="display:inline-block;cursor:pointer; float:right; font-weight:900;font-size:18px;line-height:15px" data-id="'+ id +'">&times;</div></div><div style="padding:20px;height:160px; overflow-y:scroll; ">' + json +  '</div></div>'
        elm.after(dv);
        $('#' + id).css('visibility', 'visible');
        //$('#one #header').mousedown(handle_mousedown);
        dragElement($("#" + id));
        $('.close').on('click', function() { close(this); } );

      },
      error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }

    });
  } else {
    $('#' + id).css('visibility', 'visible');
  }
});

$(document).on( 'mouseover keyup', '.verse', function ( event ) {
  whereami = $(this).attr("data-ttl");
  mouseWhere = 'over';

  dte = Date.now();
  var lnk = $(this);

  verse = lnk.text();
  id = lnk.text().replace(' ', '').replace(':','').replace('-','');
  var hover = $('#' + id);//$('#hover-'+title);

  if (mouseWhere == 'over') {
    count++;
    if (hover.length === 0) {
      $.ajax({ 
        url: '/chronology/index.php?route=common/home/sa',
        type: 'get',
        data: '&verse=' + verse,
        dataType: 'html',
        success: function(json) {
          lnk.after('<div id="' + id +'" class="hover"><div id="'+ id +'header" class="header">' + verse + '<div id="close-' + id + '" class="close">&times;</div></div><div class="content">' + json +  '</div></div>');
          hover = $('#' + id);

          hover.css('--hover-border-color',lnk.offsetParent().css("color"));
          origin = 'top';
          hover.css({"z-index":count,"left":(lnk.offset().left-50)+"px","top":(lnk.offset().top-200)+"px","visibility":"visible"}).addClass("mwe-popups-fade-in-up");
          dragElement(hover);
          $('#close-'+id).on('click', function() {
            if (origin == 'top') hover.removeClass("mwe-popups-fade-in-up").addClass("mwe-popups-fade-out-down");
            else hover.removeClass("mwe-popups-fade-in-down").hover.addClass("mwe-popups-fade-out-up");

            hover.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(e){ hover.off(e); 
            if (hover.attr('class').indexOf('mwe-popups-fade-out') >= 0 ) {
              hover.removeClass("mwe-popups-fade-out-down").css({'visibility':'hidden','top':'0','left':'0', 'z-index':'0'});
            } });
          } );

          dte = Date.now();

          return false;

        }, error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    } else if (hover.css('visibility') == 'hidden') {
      hover.css({"z-index":count,"left":(lnk.offset().left-50)+"px","top":(lnk.offset().top-200)+"px","visibility":"visible"}).addClass("mwe-popups-fade-in-down");
    }
  }

});