Hi all, just registered to share with you small javascript to enable touch in layout designer.
The code should go to xibo-layout-designer.js
in declarations add:
var classname = document.getElementsByClassName(“region”);
var clickPositionx;
var clickPositiony;
var i;
and then after $(document).ready(function(){
for (i = 0; i < classname.length;i += 1) {
classname[i].addEventListener(“touchmove”, function(event) {
if (event.touches.length > 1)
{
var attribute = this.getAttribute(“id”);
var draggable = document.getElementById(attribute);
var touch = event.targetTouches[0];
draggable.style.left = ($(this).position().left + touch.pageX - clickPositionx) + “px”;
draggable.style.top = ($(this).position().top + touch.pageY - clickPositiony) + “px”;
event.preventDefault();
clickPositionx = touch.pageX;
clickPositiony = touch.pageY;
var scale = ($(this).closest(“.layout”).attr(“version”) == 1) ? (1 / $(this).attr(“tip_scale”)) : $(this).attr(“designer_scale”);
$(“.region-tip”, this).html(Math.round($(this).width() / scale, 0) + " x " + Math.round($(this).height() / scale, 0) + " (" + Math.round($(this).position().left / scale, 0) + “,” + Math.round($(this).position().top / scale, 0) + “)”);
}
}, false);
classname[i].addEventListener(“touchstart”, function(event) {
if (event.touches.length > 1)
{
var touch = event.targetTouches[0];
$(this).css(“zIndex”, 900);
clickPositionx = touch.pageX;
clickPositiony = touch.pageY;
$(“.region .regionInfo”).show();
$(“.region .previewNav”).show();
}
}, false);
classname[i].addEventListener(“touchend”, function(event) {
if (event.touches.length > 1)
{
$(“#layout-save-all”).removeClass(“disabled”);
$(“#layout-revert”).removeClass(“disabled”);
$(this).css(“zIndex”, 0);
$(“.region .regionInfo”).hide();
$(“.region .previewNav”).hide();
}
}, false);
}
This will give you a possibility to move elements with 2 fingers, one finger is to move the page itself.
I’m sure this code it’s not 100% clear, but it works.
Hope it will help someone.
George