Difference between revisions of "MediaWiki:Common.js"

Revision as of 05:48, 11 June 2020

/* Any JavaScript here will be loaded for all users on every page load. */
    var id, timeOut, 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(' ', '').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");

    }


    $(document)
        .on( 'mouseover keyup', '.verse', function ( event ) {
          var lnk = $(this);
          // delay showing the verse hover box
          setTimeout(function(){
            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="header">' + verse + '<div id="close-' + id + '" class="close">&times;</div></div><div class="content"><img src="/natnee/images/6.gif" /></div></div>');
                },
                success: function(json) {
                  // verse hover box:  content is the verse
                  $('#' + id + ' .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);
        })
        .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



    $('bak.verse').on('click', function(){ 
      var lnk = $(this);

      verse = lnk.text();
      id = getID(lnk);
      var hover = $('#' + id);//$('#hover-'+title);
      
      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) {
            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);

            origin = 'top';
            var posleft = lnk.offset().left;
            var postop = lnk.offset().top;
            posleft = posleft <= 50 ? 10 : posleft - 50;
            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");
            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'});
              } });
            } );


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

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