<!doctype html>
<html>
<head>
<title>CSS Transform Matrix Dragging Tests ... RJM Programming - September, 2017 ... Thanks to http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/</title>
<meta id="myviewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes">
<style>
.box {
margin: 20px;
padding: 10px;
height: 150px;
width: 500px;
border: 1px solid black;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
console.log('start');
// place this within dom ready function
function showpanel() {
console.log('more');
$(".ui-draggable").sortable({
start: function(event, ui) {
console.log('start');
ui.item.toggleClass("highlight");
},
stop: function(event, ui) {
console.log('stop');
ui.item.toggleClass("highlight");
}
});
}
// use setTimeout() to execute
setTimeout(showpanel, 3000)
});
//<style><br>
//.box {<br>
// margin: 20px; padding: 10px;<br>
// height: 150px; width: 500px;<br>
// border: 1px solid black; }<br>
//</style><br>
// Thanks to http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/ for most of jQuery Javascript below
var selector = '#img' // Replace this with the selector for the element you want to make transformable
var fbr=null, needlook=true;
var attachment='', img1=null, imgw=0, imgh=0;
var imgd=null, imgh=-1, imgw=-1, altimgw=-1, altimgh=-1, two=2, twotwo=2, wasv='', firstgo=true, ewo=null, ewf=null, prevffs=-11, ffs=-1;
var vtrue=true, twentythousand=20000, altsubject='', prevlastisaved='', prevlastvsaved='', prevlastasaved='', lastvsaved='', lastasaved='', lastisaved='', lastaudioname='', lastresult='';
var vsres='', zhr=null, zform=null, lastacnt=1, tgsps=[], tgspsop=[], newres='', preurl='', tgspsopwhat=[], cvis='', prevsv='', thissv='', haikusuffix='', lastu='';
jQuery.getScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', function() {
jQuery.getScript('//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js', function() {
(function() {
var $, applyTransform, getTransform, makeTransformable;
$ = jQuery;
getTransform = function(from, to) {
var A, H, b, h, i, k_i, lhs, rhs, _i, _j, _k, _ref;
console.assert((from.length === (_ref = to.length) && _ref === 4));
A = [];
for (i = _i = 0; _i < 4; i = ++_i) {
A.push([from[i].x, from[i].y, 1, 0, 0, 0, -from[i].x * to[i].x, -from[i].y * to[i].x]);
A.push([0, 0, 0, from[i].x, from[i].y, 1, -from[i].x * to[i].y, -from[i].y * to[i].y]);
}
b = [];
for (i = _j = 0; _j < 4; i = ++_j) {
b.push(to[i].x);
b.push(to[i].y);
}
h = numeric.solve(A, b);
H = [[h[0], h[1], 0, h[2]], [h[3], h[4], 0, h[5]], [0, 0, 1, 0], [h[6], h[7], 0, 1]];
for (i = _k = 0; _k < 4; i = ++_k) {
lhs = numeric.dot(H, [from[i].x, from[i].y, 0, 1]);
k_i = lhs[3];
rhs = numeric.dot(k_i, [to[i].x, to[i].y, 0, 1]);
console.assert(numeric.norm2(numeric.sub(lhs, rhs)) < 1e-9, "Not equal:", lhs, rhs);
}
return H;
};
applyTransform = function(element, originalPos, targetPos, callback) {
var H, from, i, j, p, to;
from = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = originalPos.length; _i < _len; _i++) {
p = originalPos[_i];
_results.push({
x: p[0] - originalPos[0][0],
y: p[1] - originalPos[0][1]
});
}
return _results;
})();
to = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = targetPos.length; _i < _len; _i++) {
p = targetPos[_i];
_results.push({
x: p[0] - originalPos[0][0],
y: p[1] - originalPos[0][1]
});
}
return _results;
})();
H = getTransform(from, to);
$(element).css({
'transform': "matrix3d(" + (((function() {
var _i, _results;
_results = [];
for (i = _i = 0; _i < 4; i = ++_i) {
_results.push((function() {
var _j, _results1;
_results1 = [];
for (j = _j = 0; _j < 4; j = ++_j) {
_results1.push(H[j][i].toFixed(20));
}
return _results1;
})());
}
return _results;
})()).join(',')) + ")",
'transform-origin': '0 0'
});
var bits=('' + H).split(',');
var cbits='' + bits[0];
for (var ibits=1; ibits<bits.length; ibits++) {
cbits+=',';
if (eval(ibits % 4) == 0) cbits+='<br>';
cbits+='' + bits[ibits];
}
document.getElementById(selector.replace('#','')).title='matrix3d(' + cbits.replace(/<br>/g,'') + ')';
if (('' + document.getElementById(selector.replace('#','')).style.background) == '' && document.getElementById(selector.replace('#','')).innerHTML.replace(/<br>/g,'').indexOf('<') == -1) {
document.getElementById(selector.replace('#','')).innerHTML='matrix3d(' + cbits + ')';
} else {
document.getElementById(selector.replace('#','')).innerHTML='';
}
return typeof callback === "function" ? callback(element, H) : void 0;
};
makeTransformable = function(selector, callback) {
return $(selector).each(function(i, element) {
var controlPoints, originalPos, p, position;
$(element).css('transform', '');
controlPoints = (function() {
var _i, _len, _ref, _results;
_ref = ['left top', 'left bottom', 'right top', 'right bottom'];
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
position = _ref[_i];
_results.push($('<div>').css({
border: '3px solid black',
borderRadius: '3px',
cursor: 'move',
position: 'absolute',
zIndex: 100000
}).appendTo('body').position({
at: position,
of: element,
collision: 'none'
}));
}
return _results;
})();
originalPos = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})();
$(controlPoints).draggable({
start: (function(_this) {
return function() {
return $(element).css('pointer-events', 'none');
};
})(this),
drag: (function(_this) {
return function() {
return applyTransform(element, originalPos, (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})(), callback);
};
})(this),
stop: (function(_this) {
return function() {
applyTransform(element, originalPos, (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})(), callback);
return $(element).css('pointer-events', 'auto');
};
})(this)
});
$(controlPoints).sortable({
start: (function(_this) {
return function() {
return $(element).css('pointer-events', 'none');
};
})(this),
touchmove: (function(_this) {
return function() {
return applyTransform(element, originalPos, (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})(), callback);
};
})(this),
stop: (function(_this) {
return function() {
applyTransform(element, originalPos, (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = controlPoints.length; _i < _len; _i++) {
p = controlPoints[_i];
_results.push([p.offset().left, p.offset().top]);
}
return _results;
})(), callback);
return $(element).css('pointer-events', 'auto');
};
})(this)
});
return element;
});
};
window.makeTransformable = makeTransformable;
}).call(this);
makeTransformable(selector);
});
});
function applythis(tv) {
var hides, ihides=0;
if (tv != "") {
if (window.sessionStorage) {
if (('' + window.sessionStorage.getItem('moretransdatauri')).replace(/^null$/g,'') != '') {
tv=window.sessionStorage.getItem('moretransdatauri');
window.sessionStorage.removeItem('moretransdatauri');
}
}
if (tv.trim() == tv) {
document.getElementById(selector.replace('#','')).style.background='URL(' + tv.split('#')[0] + ')';
document.getElementById(selector.replace('#','')).style.backgroundRepeat='repeat';
} else {
if (tv.indexOf(tv.trim() + ' ') != -1) {
document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim().split('#')[0] + ')';
document.getElementById(selector.replace('#','')).style.backgroundSize='cover';
document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
} else if (tv.indexOf(tv.trim() + ' ') != -1) {
document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim().split('#')[0] + ')';
document.getElementById(selector.replace('#','')).style.backgroundSize='contain';
document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
} else {
document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim().split('#')[0] + ')';
document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
}
}
if (tv.indexOf('#') != -1) {
hides=document.getElementsByTagName('h1');
for (ihides=0; ihides<hides.length; ihides++) {
if (('' + hides[ihides].outerHTML).indexOf(' onclick=') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hides[ihides].onclick = function() { location.href=document.URL.split('?')[0].split('#')[0]; };
} else {
hides[ihides].onclick = function() { window.open(document.URL.split('?')[0].split('#')[0],'_blank'); };
}
}
hides[ihides].style.visibility='hidden';
}
hides=document.getElementsByTagName('h3');
for (ihides=0; ihides<hides.length; ihides++) {
if (('' + hides[ihides].outerHTML).indexOf(' onclick=') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hides[ihides].onclick = function() { location.href=document.URL.split('?')[0].split('#')[0]; };
} else {
hides[ihides].onclick = function() { window.open(document.URL.split('?')[0].split('#')[0],'_blank'); };
}
}
hides[ihides].style.visibility='hidden';
}
hides=document.getElementsByTagName('p');
for (ihides=0; ihides<hides.length; ihides++) {
if (('' + hides[ihides].outerHTML).indexOf(' onclick=') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hides[ihides].onclick = function() { location.href=document.URL.split('?')[0].split('#')[0]; };
} else {
hides[ihides].onclick = function() { window.open(document.URL.split('?')[0].split('#')[0],'_blank'); };
}
}
hides[ihides].style.visibility='hidden';
}
hides=document.getElementsByTagName('span');
for (ihides=0; ihides<hides.length; ihides++) {
if (('' + hides[ihides].outerHTML).indexOf(' onclick=') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hides[ihides].onclick = function() { location.href=document.URL.split('?')[0].split('#')[0]; };
} else {
hides[ihides].onclick = function() { window.open(document.URL.split('?')[0].split('#')[0],'_blank'); };
}
}
hides[ihides].style.visibility='hidden';
}
}
}
}
function noscrollbutzoom() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
//document.getElementById('img').addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });
//document.getElementById('img').addEventListener('touchdown', function(e){ e.preventDefault(); }, { passive: false });
document.getElementById('img').style.marginRight='50px';
document.getElementById('img').setAttribute('contenteditable', false);
document.getElementById('img').scroll='no';
}
function fixstyle(stih) {
var idivs=0, boxrect=null, kdivs=0;
stih=stih.replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>');
//alert('0:' + stih);
if (stih.indexOf('<style>') != -1 && stih.indexOf('</style>') != -1) {
document.getElementById('dstyle').innerHTML='<style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>';
//alert('<Style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
var divs=document.getElementsByTagName('div');
for (var jdivs=0; jdivs<2; jdivs++) {
if (kdivs == 0) {
for (idivs=0; idivs<divs.length; idivs++) {
if (('' + divs[idivs].className).indexOf('ui-draggable') != -1) {
if (boxrect) {
if (kdivs == 0 && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left=('' + boxrect.left) + 'px';
divs[idivs].style.top=('' + boxrect.top) + 'px';
} else if (kdivs == 1 && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left=('' + boxrect.left) + 'px';
divs[idivs].style.top=('' + boxrect.bottom) + 'px';
} else if (kdivs == 2 && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left=('' + boxrect.right) + 'px';
divs[idivs].style.top=('' + boxrect.top) + 'px';
} else if (kdivs == 3 && !navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left=('' + boxrect.right) + 'px';
divs[idivs].style.top=('' + boxrect.bottom) + 'px';
//alert('<stylE>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
location.href=document.URL.split('?')[0].split('#')[0] + '?styling=' + encodeURIComponent('<style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
} else if (kdivs == 0 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + window.scrollX)) + 'px';
divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + window.scrollY)) + 'px';
//divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='dotted'; }, { passive: false });
divs[idivs].style.border='8px solid red';
divs[idivs].style.borderRadius='8px';
divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); } var nevent = new Event('mousemove'); evt.target.dispatchEvent(nevent); evt.preventDefault(); });
} else if (kdivs == 1 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + window.scrollX)) + 'px';
divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px';
//divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='dashed'; }, { passive: false });
divs[idivs].style.border='8px solid red';
divs[idivs].style.borderRadius='8px';
divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); } var nevent = new Event('mousemove'); evt.target.dispatchEvent(nevent); evt.preventDefault(); });
} else if (kdivs == 2 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + 'px';
divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + window.scrollY)) + 'px';
//divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='double'; }, { passive: false });
divs[idivs].style.border='8px solid red';
divs[idivs].style.borderRadius='8px';
divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); } var nevent = new Event('mousemove'); evt.target.dispatchEvent(nevent); evt.preventDefault(); });
} else if (kdivs == 3 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
kdivs++;
divs[idivs].style.left='' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + 'px';
divs[idivs].style.top='' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px';
//divs[idivs].addEventListener('click', function(e){ document.getElementById('img').style.borderStyle='groove'; }, { passive: false });
divs[idivs].style.border='8px solid red';
divs[idivs].style.borderRadius='8px';
divs[idivs].addEventListener('touchmove', function(evt) { if (1 == 1) { alert('Drop now.'); } var nevent = new Event('mousemove'); evt.target.dispatchEvent(nevent); evt.preventDefault(); });
//alert('<stylE>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
location.href=document.URL.split('?')[0].split('#')[0] + '?styling=' + encodeURIComponent('<style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
} else {
//alert('' + window.scrollY + ' ' + boxrect.left + ' ' + boxrect.width + ' ... Left=' + eval(eval('' + boxrect.left) + eval('' + boxrect.width) + eval('' + window.scrollX)) + ' top=' + '' + eval(eval('' + boxrect.top) + eval('' + boxrect.height) + eval('' + window.scrollY)) + 'px');
noscrollbutzoom(); //document.getElementById('resultav').innerHTML+="<script> document.body.addEventListener('touchstart', function(e){ e.preventDefault(); }); </s" + "cript> ";
}
}
}
} else if (('' + divs[idivs].className).indexOf('box') != -1 && !boxrect) {
boxrect=divs[idivs].getBoundingClientRect();
}
}
}
}
} //else {
//alert(stih);
//}
}
function checkmedia(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
var hs=aconto.getElementsByTagName('h1');
hs[0].style.display='none';
hs=aconto.getElementsByTagName('h3');
hs[0].style.display='none';
console.log(1);
fbr=aconto.getElementById('files');
setTimeout(laterfbr,3000);
aconto.getElementById('files').accept='image/*';
console.log(2);
}
}
}
}
function fvsres(inv) {
if (newres == '') {
if (inv == 'progress') {
vsres=document.getElementById('result').innerHTML;
setTimeout(lookfvsres, 2000);
return inv;
} else if (inv == 'pointer') {
if (vsres != document.getElementById('result').innerHTML) {
document.getElementById('inum').innerHTML='1';
document.getElementById('result').style.cursor=inv;
vsres=document.getElementById('result').innerHTML;
} else {
setTimeout(lookfvsres, 2000);
}
}
}
return inv;
}
function laterfbr() {
if (fbr) {
console.log(11);
fbr.accept='.pdf,audio/*,video/*,image/*';
console.log(12);
}
}
function lookfvsres() {
fvsres('pointer');
}
function notwotwo() {
twotwo=33;
vtrue=false;
twentythousand=200;
}
function checkresultdiv() {
var mysuff='';
if (needlook) {
needlook=false;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('snbsp').innerHTML='<br>';
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
} else {
document.getElementById('snbsp').innerHTML='<br>';
document.getElementById('iurl').style.width='530px';
}
if (window.sessionStorage) {
if (('' + window.sessionStorage.getItem('moretransdatauri')).replace(/^null$/g,'') != '') {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//alert('imagelen=' + document.getElementById('result').innerHTML.length);
applythis(window.sessionStorage.getItem('moretransdatauri'));
}
document.getElementById('iurl').value=window.sessionStorage.getItem('moretransdatauri');
window.sessionStorage.removeItem('moretransdatauri');
applythis(document.getElementById('iurl').value);
}
}
}
if (document.getElementById('result').innerHTML != '') {
if (document.getElementById('iurl').value.indexOf(document.getElementById('result').innerHTML) != 0) {
if (document.getElementById('iurl').value.indexOf('#') != -1) {
mysuff='#' + document.getElementById('iurl').value.split('#')[1];
if (document.getElementById('iurl').value.indexOf(document.getElementById('iurl').value.trim() + ' ') != -1) {
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '' + mysuff);
}
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
} else if (document.getElementById('iurl').value.indexOf(document.getElementById('iurl').value.trim() + ' ') != -1) {
mysuff=' ';
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '#' + mysuff);
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
} else if (document.getElementById('iurl').value.indexOf(document.getElementById('iurl').value.trim() + ' ') != -1) {
mysuff=' ';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '#' + mysuff);
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('img').style.width=imgw + 'px';
document.getElementById('img').style.height=imgh + 'px';
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
}
} else if (document.getElementById('iurl').value.indexOf(document.getElementById('iurl').value.trim() + ' ') != -1) {
mysuff=' ';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '#' + mysuff);
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('img').style.width=imgw + 'px';
document.getElementById('img').style.height=imgh + 'px';
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
}
} else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (window.sessionStorage) {
window.sessionStorage.setItem('moretransdatauri', document.getElementById('result').innerHTML + '#' + mysuff);
}
img1 = document.createElement('img');
img1.onload = function() {
imgw=img1.width;
imgh=img1.height;
var preboxw='', preboxh='', boxw='', boxh='';
if (document.getElementById('img').innerHTML.indexOf('width:') != -1) {
preboxw=document.getElementById('img').innerHTML.split('width:')[1];
}
if (document.getElementById('img').innerHTML.indexOf('height:') != -1) {
preboxh=document.getElementById('img').innerHTML.split('height:')[1];
}
if (preboxw != '' && preboxh != '') {
boxw='width:' + preboxw.split(';')[0] + ';';
boxh='height:' + preboxh.split(';')[0] + ';';
while (document.getElementById('img').innerHTML.indexOf(boxw) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxw, 'width: ' + imgw + 'px;');
}
while (document.getElementById('img').innerHTML.indexOf(boxh) != -1) {
document.getElementById('img').innerHTML=document.getElementById('img').innerHTML.replace(boxh, 'height: ' + imgh + 'px;');
}
document.getElementById('img').style.width=imgw + 'px';
document.getElementById('img').style.height=imgh + 'px';
document.getElementById('myviewport').content = "width=" + eval(1.8 * eval('' + imgw)) + ", height=" + eval(1.8 * eval('' + imgh)) + ", initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes";
fixstyle((document.getElementById('img').innerText || document.getElementById('img').contentWindow || document.getElementById('img').contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));
}
};
img1.src = document.getElementById('result').innerHTML;
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
//alert('imagelen=' + document.getElementById('result').innerHTML.length);
applythis(document.getElementById('result').innerHTML + mysuff);
}
console.log('imagelen=' + document.getElementById('result').innerHTML.length);
document.getElementById('iurl').value=document.getElementById('result').innerHTML + mysuff;
}
document.getElementById('result').innerHTML='';
}
setTimeout(checkresultdiv, 2000);
}
function touchHandler(event) { // thanks to https://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
setTimeout(checkresultdiv, 2000);
</script>
</head>
<body>
<div id=dstyle style='display:none;'>
<script type='text/javascript'>
var styis=location.search.split('styling=')[1] ? decodeURIComponent(location.search.split('styling=')[1].split('&')[0]) : '';
if (styis != '') {
document.write(styis);
}
</script>
</div>
<h1 id=myh1>CSS Transform Matrix Dragging Tests</h1>
<h3>RJM Programming <a target=_blank title=Reset href='./more_transform.html'>-</a> September, 2017</h3>
<h3>Thanks to <a target=_blank title='Frank Ta work regarding CSS transform matrix ... thanks' href='http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/'>http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/</a></h3>
<p>Optional Background Image URL for Box Below: <br><input style="width:95%;" type='text' id='iurl' title='Optionally append space to this image URL to not have it repeat, two spaces for contain and three spaces for cover (combined with Choose File causes us to Apply Below for you allowing for display of image alone ready for your user dragged transformations), and include hash # for top element invisibility' value='http://www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg'></input><span id=snbsp><br></span><iframe onload="checkmedia(this);" frameborder="0" id="cbi" data-style="border-top:1px solid black;border-bottom:1px solid black;border-left:2px solid yellow;border-right:1px solid yellow;" style="width:116px;height:28px;margin-top:0px;" onmouseover="vsres=document.getElementById('result').innerHTML; document.getElementById('result').style.cursor=fvsres('progress');" src="client_browsing.htm?gfn=00000220.238.10.100.gif&d=156261280#Most%20people%20recognize%20me%20by%20my%20voice."></iframe> <input type='button' style='background-color:yellow;' title='Optionally append space to this image URL to not have it repeat, two spaces for contain and three spaces for cover (combined with Choose File causes us to Apply Below for you allowing for display of image alone ready for your user dragged transformations), and include hash # for top element invisibility' onclick=" applythis(document.getElementById('iurl').value); " value="Apply Below"></input><br></p>
<span style='display:inline-block;'> </span><div id="img" style='display:inline-block;' class="box" contenteditable=true onblur="fixstyle((this.innerText || this.contentWindow || this.contentDocument).replace(/\<br\>/g, ' ').replace(/\&\;lt\;/g, '<').replace(/\&\;gt\;/g, '>').replace(/\<\;/g, '<').replace(/\>\;/g, '>'));">
Drag the points to transform the box! Optionally change styling below.<br>
<script type='text/javascript'>
var xstyis=location.search.split('styling=')[1] ? decodeURIComponent(location.search.split('styling=')[1].split('&')[0]) : '';
if (xstyis != '') {
while (xstyis.indexOf(String.fromCharCode(10)) != -1) {
xstyis=xstyis.replace(String.fromCharCode(10), '<br>');
}
//alert(xstyis.replace(/\</g,'<').replace(/\>/g,'>'));
document.write(xstyis.replace(/\<s/g,'<s').replace(/\<\//g,'</').replace(/e\>/g,'e>'));
} else {
document.write('<style><br>.box {<br>margin: 20px; padding: 10px;<br>height: 150px; width: 500px;<br>border: 1px solid black; }<br></style><br>');
}
</script>
</div><span style='display:inline-block;'> </span><br><br>
<div id=inum style='display:none;'></div>
<input id=audioname style='display:none;' type=hidden value=''></input>
<input id=saysub style='display:none;' type=hidden value=''></input>
<input id=outputname style='display:none;' type=hidden value=''></input>
<input id=path style='display:none;' type=hidden value=''></input>
<input id=opath style='display:none;' type=hidden value=''></input>
<input id=cto style='display:none;' type=hidden value=''></input>
<a target=_blank id=aemailto style='display:none;' href=''>Email</a><a target=_blank id=asmsto style='display:none;' href=''>SMS</a>
<select id=sin style='display:none;position:absolute;left:-500px;top:-500px;'><option style='display:none;' value=''></option></select>
<div id=thewords style='display:none;'></div>
<div id=result style='display:none;'></div>
<div id=resultav style='display:none;'></div>
<div id=topleftx style='display:none;'></div>
<div id=videoag style='display:none;'></div><br>
<div id=divmore></div>
</body>
</html>