Difference between revisions of "MediaWiki:Common.js"

Revision as of 10:06, 14 June 2020

    var id, timeOut, timeOutShow, origin, mouseWhere='',
        container = $("body"),
        count=0;
    // endvar

    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);
      }
    }
    function clickClose(i) {  $('#close-'+ i).trigger('click');  }
    function getID(el) {  return el.text().replace(/ /g, '').replace(':','').replace('-','');  }
    function showHover(hover, lnk) {
      var posleft = lnk.offset().left;  posleft = posleft <= 50 ? 10 : posleft - 50;
      var postop = lnk.offset().top;    postop  = postop <= 200 ? 10 : postop - 200;

      hover.css({"z-index":count,
                    "left":posleft+"px",
                     "top":postop+"px",
              "visibility":"visible"})
           .addClass("mwe-popups-fade-in-up");

    }
    function processHover (lnk) {
      // delay showing the verse hover box
      timeOutShow = setTimeout(function(){
        timeOutShow = null;
        if (lnk.data('verse')) verse = lnk.data('verse');
        else verse = lnk.text();
        id = getID(lnk);
        var hover = $('#' + id);
        count++;
        if (hover.length === 0) {
          $.ajax({ 
            url: '/chronology/index.php?route=common/home/sa',
            type: 'get',
            data: '&verse=' + verse,
            dataType: 'html',
            beforeSend: function() {
              // set the verse hover box:  content is loading
              lnk.after('<div id="' + id +'" class="hover"><div id="'+ id +'header" class="hvr-header">' + verse + '<div id="close-' + id + '" class="close">&times;</div></div><div class="hvr-content"><img src="/natnee/images/6.gif" /></div></div>');
            },
            success: function(json) {
              // verse hover box:  content is the verse
              $('#' + id + ' .hvr-content').html(json);
              // important to redefine the hover; it becomes null if it isn't defined
              hover = $('#' + id);                    
              origin = 'top';
              showHover(hover, lnk);
              // make it draggable
              dragElement(hover);
              // when [x] of verse hover is clicked
              $('#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'});
                    }
                  });//end hover animation
              });//end close on click


              return false;

            }, error: function(xhr, ajaxOptions, thrownError) {
              alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            }
          });
        } else if (hover.css('visibility') == 'hidden') { showHover(hover, lnk); }

      }, 700);

    }


    $(document).on( 'mouseover keyup', '.verse', function () {  processHover($(this));  })
               .on( 'mouseout blur', '.verse', function () {  timeOut = setTimeout( clickClose, 1000, getID($(this))); })
               .on( 'mouseover',     '.hover', function() {  clearTimeout( timeOut );  })
               .on( 'mouseout',      '.hover', function() {  timeOut = setTimeout( clickClose, 1000, $(this)[0].id );  });
    // end document

    $('.verse').on('click', function(){  if (timeOutShow === null) { processHover($(this)); }  });