MediaWiki:Common.js

/* Das folgende JavaScript wird für alle Benutzer geladen. */

// grabbing sections
const ele = document.getElementsByClassName('mw-changeslist')[0];
let pos = { top: 0, left: 0, x: 0, y: 0 };

function mouseDownHandler(e) {
    pos = {
        // The current scroll 
        left: ele.scrollLeft,
        top: ele.scrollTop,
        // Get the current mouse position
        x: e.clientX,
        y: e.clientY,
    };

    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
}

ele.addEventListener('keydown', mouseDownHandler);

function mouseMoveHandler(e) {
    // Change the cursor and prevent user from selecting the text
    ele.style.cursor = 'grabbing';
    ele.style.userSelect = 'none';
    
    // How far the mouse has been moved
    const dx = e.clientX - pos.x;
    const dy = e.clientY - pos.y;

    // Scroll the element
    ele.scrollTop = pos.top - dy;
    ele.scrollLeft = pos.left - dx;
}

function mouseUpHandler() {
    ele.style.cursor = 'grab';
    ele.style.removeProperty('user-select');
}

//set random
if ($('.puzzle').length) {
	var puzzleHeight = $('.puzzle').css('height').replace('px','') - $('.draggable').css('height').replace('px','');
	var puzzleWidth = $('.puzzle').css('width').replace('px','') - $('.draggable').css('width').replace('px','');
	$( ".draggable" ).each(function(e) {
		var randomTop = Math.floor(Math.random() * puzzleHeight) + 1;
		var randomLeft = Math.floor(Math.random() * puzzleWidth) + 1;
		
		$( this ).css("top", randomTop);
		$( this ).css("left", randomLeft);
	});
}

/**
 * Add custom buttons in the toolbar
 *
 * @source: https://www.mediawiki.org/wiki/Snippets/Custom_buttons_in_the_toolbar
 * @rev: 2
 */

if ({ edit:1, submit:1 }[mw.config.get('wgAction')]) {
	mw.loader.using('mediawiki.action.edit', function () {
		if (mw.toolbar) {

			// Wikitable
			mw.toolbar.addButton(
				'//upload.wikimedia.org/wikipedia/commons/0/04/Button_array.png',
				'Insert a table',
				'{| class="wikitable"\n|-\n',
				'\n|}',
				'! header 1\n! header 2\n! header 3\n|-\n| row 1, cell 1\n| row 1, cell 2\n| row 1, cell 3\n|-\n| row 2, cell 1\n| row 2, cell 2\n| row 2, cell 3',
				'mw-editbutton-wikitable'
			);

			// Redirect
			mw.toolbar.addButton(
				'//upload.wikimedia.org/wikipedia/en/c/c8/Button_redirect.png',
				'Redirect',
				'#REDIRECT [[',
				']]',
				'Insert text',
				'mw-editbutton-redirect'
			);
		}
	});
}

if (window.location.pathname == '/view/BibleWiki') {
	window.history.replaceState({}, '', '/');
}
if (window.location.href.includes('redlink=1')) {
	$('.page-actions').hide();
}

/*var inputs = $(".formedit .oo-ui-comboBoxInputWidget-field input");
for (var i=0; i<inputs.length; i++) {
	var placeholder = $(inputs[i]).parent().parent().parent().parent().parent().find('.placeholder').text();
	$(inputs[i]).attr('placeholder', placeholder);
}*/

// interact.js
$( ".draggable a" ).removeAttr("href").removeClass("image");

// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    // enable autoScroll
    autoScroll: true,

    listeners: {
      // call this function on every dragmove event
      move: dragMoveListener
    }
  })
  .on('doubletap', function (event) {
    event.currentTarget.classList.toggle('rotate')
    event.preventDefault()
  })

function dragMoveListener (event) {
  var target = event.target
  // keep the dragged position in the data-x/data-y attributes
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

  // translate the element
  target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'

  // update the posiion attributes
  target.setAttribute('data-x', x)
  target.setAttribute('data-y', y)
  
  // on the front
  $('.puzzle .draggable').css('z-index', 0);
  $(target).css('z-index', 9);
}

// this function is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener