Difference between revisions of "MediaWiki:Common.js"

Revision as of 02:59, 16 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, id) {
      // delay showing the verse hover box
      timeOutShow = setTimeout(function(){
        if (mouseWhere == 'hover-'+id) {
          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: '/natnee/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 () {  
                  id = getID($(this));  
                  mouseWhere = 'hover-' + id;  
                  processHover($(this), id);  
                })
               .on( 'mouseout blur', '.verse', function () {  
                  id = getID($(this));  
                  mouseWhere = 'out-' + id;  
                  timeOut = setTimeout( clickClose, 1000, id); 
                })
               .on( 'mouseover',     '.hover', function() {  clearTimeout( timeOut );  })
               .on( 'mouseout',      '.hover', function() {  
                  id = getID($(this));  
                  mouseWhere = 'out-' + id;  
                  timeOut = setTimeout( clickClose, 1000, id );  
               });
    // end document

    $('.verse').on('click', function(){
                  if (timeOutShow === null) { 
                    id = getID($(this));  
                    mouseWhere = 'click-' + id;  
                    processHover($(this), id); 
                  }
                });
    // end .verse