Fenex · January 16, 2025 16:14
diff --git a/hta_example.cmd b/hta_example.cmd
 <!-- :
  @start mshta "%~f0"&exit /b
 -->

 <html>
  <head>
    <title>CMD as HTA</title>
    <script>
 var map = null;

 function onload() {
    map = document.getElementById('map');
 }
 var q = 0;
 setInterval(function() {
    document.getElementById('test').innerHTML = q++;
 }, 100);

 var Coord = function(x, y) {
    this.X = x;
    this.Y = y;
 };

 Coord.prototype.__validate = function(p1, p2) {
    if(typeof p2 == 'undefined')
        return p1;
    return new Coord(p1, p2);
 }

 Coord.prototype.offset = function(p1, p2) {
    var coord = this.__validate(p1, p2);
    
    return new Coord(
        coord.X - this.X,
        coord.Y - this.Y       
    );
 };

 Coord.prototype.plus = function(p1, p2) {
    var coord = this.__validate(p1, p2);
    
    return new Coord(
        coord.X + this.X,
        coord.Y + this.Y
    );
 }

 Coord.prototype.setElement = function(element) {
    try {
        element.style.top = this.Y + 'px';
        element.style.left = this.X + 'px';
    } catch (e) {
       // alert(e);    
    }
 };

 Coord.prototype.toString = function() {
    return "Coord: X=" + this.X + "; Y=" + this.Y;
 };

 var Moving = {
    status: false,
    element: null,
    start: null,
    last: new Coord(0, 0)
 };

 document.attachEvent('onmousemove', function(e) {
    if(!Moving.status)
        return;
    
    var offset = new Coord(0, 0);
    if(!Moving.start) {
        var offset = Moving.last.offset(e.clientX, e.clientY);
    }    
    Moving.start = null;
    
    if(Moving.element) {
        moveElement(Moving.element);
    } else {
        var sqs = map.getElementsByTagName('div');
        for(var i=0; i<sqs.length; i++) {
            moveElement(sqs[i]);
        }
    }
    
    function moveElement(elem) {
        var x = parseInt(elem.style.left);
        var y = parseInt(elem.style.top);
        var newCoord = offset.plus(x, y);
        newCoord.setElement(elem);
    }
    
    Moving.last = new Coord(e.clientX, e.clientY);
 });

 document.attachEvent('onmouseup', function(e) {
    Moving.status = false;
    
    if(Moving.start)
        return addSquare(Moving.start);
    
 });

 function props(e) {
    for(var key in e) {
        log(key);
    }
 }

 function log(str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    document.getElementById('log').appendChild(div);
 }

 document.attachEvent('onmousedown', function(e) {
    Moving.status = true;
    Moving.start = new Coord(e.clientX, e.clientY);
    
    if(e.srcElement.className == 'square') {
        Moving.element = e.srcElement;
    } else {
        Moving.element = null;
    }
 });

 function addSquare(Coord) {
    var div = document.createElement('div');
    div.style.height = '20px';
    div.style.width = '20px';
    div.style.left = Coord.X + 'px';
    div.style.top = Coord.Y + 'px';
    div.style.backgroundColor = 'red';
    div.style.position = 'absolute';
    div.className = 'square';
    map.appendChild(div);
 };
 </script>
  </head>
  <body style="background-color: beige;" onload="onload()">
    <center>
        <h1>Hello, world!</h1>
        <div id="test"></div>
    </center>
    <div id="map"></div>
    <div id='log'></div>
  </body>
 </html>
	<!-- :
	@start mshta "%~f0"&exit /b
	-->

	<html>
	<head>
	<title>CMD as HTA</title>
	<script>
	var map = null;

	function onload() {
	map = document.getElementById('map');
	}
	var q = 0;
	setInterval(function() {
	document.getElementById('test').innerHTML = q++;
	}, 100);

	var Coord = function(x, y) {
	this.X = x;
	this.Y = y;
	};

	Coord.prototype.__validate = function(p1, p2) {
	if(typeof p2 == 'undefined')
	return p1;
	return new Coord(p1, p2);
	}

	Coord.prototype.offset = function(p1, p2) {
	var coord = this.__validate(p1, p2);

	return new Coord(
	coord.X - this.X,
	coord.Y - this.Y
	);
	};

	Coord.prototype.plus = function(p1, p2) {
	var coord = this.__validate(p1, p2);

	return new Coord(
	coord.X + this.X,
	coord.Y + this.Y
	);
	}

	Coord.prototype.setElement = function(element) {
	try {
	element.style.top = this.Y + 'px';
	element.style.left = this.X + 'px';
	} catch (e) {
	// alert(e);
	}
	};

	Coord.prototype.toString = function() {
	return "Coord: X=" + this.X + "; Y=" + this.Y;
	};

	var Moving = {
	status: false,
	element: null,
	start: null,
	last: new Coord(0, 0)
	};

	document.attachEvent('onmousemove', function(e) {
	if(!Moving.status)
	return;

	var offset = new Coord(0, 0);
	if(!Moving.start) {
	var offset = Moving.last.offset(e.clientX, e.clientY);
	}
	Moving.start = null;

	if(Moving.element) {
	moveElement(Moving.element);
	} else {
	var sqs = map.getElementsByTagName('div');
	for(var i=0; i<sqs.length; i++) {
	moveElement(sqs[i]);
	}
	}

	function moveElement(elem) {
	var x = parseInt(elem.style.left);
	var y = parseInt(elem.style.top);
	var newCoord = offset.plus(x, y);
	newCoord.setElement(elem);
	}

	Moving.last = new Coord(e.clientX, e.clientY);
	});

	document.attachEvent('onmouseup', function(e) {
	Moving.status = false;

	if(Moving.start)
	return addSquare(Moving.start);

	});

	function props(e) {
	for(var key in e) {
	log(key);
	}
	}

	function log(str) {
	var div = document.createElement('div');
	div.innerHTML = str;
	document.getElementById('log').appendChild(div);
	}

	document.attachEvent('onmousedown', function(e) {
	Moving.status = true;
	Moving.start = new Coord(e.clientX, e.clientY);

	if(e.srcElement.className == 'square') {
	Moving.element = e.srcElement;
	} else {
	Moving.element = null;
	}
	});

	function addSquare(Coord) {
	var div = document.createElement('div');
	div.style.height = '20px';
	div.style.width = '20px';
	div.style.left = Coord.X + 'px';
	div.style.top = Coord.Y + 'px';
	div.style.backgroundColor = 'red';
	div.style.position = 'absolute';
	div.className = 'square';
	map.appendChild(div);
	};
	</script>
	</head>
	<body style="background-color: beige;" onload="onload()">
	<center>
	<h1>Hello, world!</h1>
	<div id="test"></div>
	</center>
	<div id="map"></div>
	<div id='log'></div>
	</body>
	</html>