VaKeR CYBER ARMY
Apache/2.4.41 (Ubuntu) Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 www-data ( 33 )7.4.33 pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, / var /www /html /libs /absol-acomp /demo /
Current File : /var/www/html/libs/absol-acomp/demo/ruler.html <!DOCTYPE html>
<html>
<head>
<title>Ruler</title>
<link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
<!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://absol.cf/hightlight/highlight.pack.js"></script>
<script src="../dist/absol-acomp.js?<?php echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
<style>
</style>
</head>
<body>
<svg id="my-cat" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="576px" height="576px" viewBox="0 0 576 576"
enable-background="new 0 0 576 576" xml:space="preserve">
<g>
<path fill="#1A1A1A"
d="M282.24,278.997c0.959,2.86,32.775,25.072,48.296,76.951c2.524,8.438,4.052,17.095,3.743,25.946
c-1.204,34.545-20.066,46.939-20.184,48.952c2.708-0.199,5.328-0.762,7.952-1.273c59.117-11.504,86.714-49.513,87.805-82.077
c1.137-33.901-24.694-60.295-55.804-49.372c-18.298,6.424-19.633,29.036-5.372,38.408c5.752,3.78,10.324,3.445,10.184,8.865
c-0.092,3.541-3.598,6.261-6.916,5.04c-12.096-4.45-22.659-12.999-23.824-29.449c-1.093-15.43,7.333-28.03,22.003-33.236
c38.041-13.5,71.502,17.394,70.868,58.552c-0.215,13.944-5.745,98.63-159.075,98.414c-34.123-0.048-47.596,0.638-62.873-2.514
c-24.73-5.103-38.864-25.302-43.01-49.5c-2.363-13.789-0.495-27.229,3.797-40.365c16.26-49.76,46.227-70.726,47.142-73.142
c-0.949-1.307-25.064-6.985-35.365-25.408c-8.605-15.39-9.33-26.195-7.683-37.329c3.314-22.401,12.44-46.005,21.797-71.999
c1.385-3.847,4.157-10.373,7.744-12.39c1.924-1.082,3.844-1.151,5.693,0.225c8.33,6.2,17.903,21.662,22.548,30.879
c0.493,0.979,1.018,1.232,2.117,0.767c3.043-1.287,6.236-2.109,9.457-2.856c10.918-2.533,21.998-1.182,31.997,2.752
c1.555,0.611,1.625,0.615,2.413-0.872c4.941-9.327,13.895-24.246,22.275-30.538c5.597-4.202,10.589,3.803,12.967,10.359
c9.829,27.099,19.245,51.341,22.632,75.012c1.578,11.028-0.116,21.949-7.627,35.604C310.535,266.862,296.677,273.66,282.24,278.997
z M305.929,238.524c0.374,0,0.748-0.002,1.122,0c1.238,0.006,1.777-2.12-0.543-2.479c-2.591-0.401-5.191-0.721-7.822-0.5
c-8.643,0.727-18.036,2.436-26.724,6.336c-0.745,0.335-1.485,0.732-2.13,1.227c-0.735,0.563-0.999,2.331-0.463,2.855
c0.886,0.868,1.605,0.019,5.763-1.696C284.994,240.2,295.173,237.804,305.929,238.524z M184.134,237.738
c-0.815,0.169-1.127,0.643-1.074,1.431c0.128,1.886,2.896,0.022,10.94,0.93c19.967,2.254,26.664,9.63,27.755,7.27
c0.355-0.768,0.393-1.795-0.322-2.53c-0.764-0.786-3.423-1.886-4.149-2.173C209.071,239.419,193.678,235.76,184.134,237.738z
M210.259,203.294c2.18,5.35,2.377,10.66-0.902,16.003c5.452-0.666,9.501-3.046,12.563-7.144c0.97-1.298,1.01-1.502-0.093-2.69
c-2.749-2.961-5.967-5.208-9.957-6.191C211.366,203.148,210.855,202.986,210.259,203.294z M274.397,203.33
c-0.224-0.091-0.368-0.209-0.492-0.191c-4.775,0.679-8.384,3.329-11.481,6.83c-0.623,0.704-0.317,1.347,0.174,2.002
c3.845,5.133,8.978,7.211,12.665,7.172C271.989,213.904,272.257,208.644,274.397,203.33z M243.339,253.951c-0.003,0-0.006,0-0.01,0
c0,2.32,0.002,4.641-0.001,6.962c-0.001,0.806,0.328,1.247,1.199,1.249c0.851,0.001,1.492-0.183,1.509-1.196
c0.041-2.52,0.011-10.976-0.007-13.474c-0.006-0.868,0.098-1.49,1.061-1.919c1.629-0.725,2.639-2.189,3.523-3.672
c1.081-1.812,0.305-3.32-1.809-3.399c-2.766-0.103-5.541-0.102-8.307,0.001c-2.137,0.08-2.896,1.547-1.803,3.397
c0.918,1.551,1.998,3.043,3.72,3.781c0.79,0.338,0.939,0.804,0.932,1.533C243.326,249.459,243.339,251.705,243.339,253.951z
M204.947,203.238c-3.991,0.408-9.442,3.2-12.116,6.126c-1.456,1.593-1.468,2.025,0.156,3.485
c2.991,2.689,6.502,4.504,10.245,5.896c0.397,0.148,0.853,0.326,1.381-0.055C202.483,213.593,202.129,208.467,204.947,203.238z
M280.225,218.909c4.567-1.312,8.67-3.331,12.031-6.648c0.979-0.966,0.891-1.442-0.23-2.672c-2.862-3.139-6.546-4.892-10.524-6.115
c-0.521-0.16-1.075-0.578-1.695-0.078C282.555,208.454,282.169,213.579,280.225,218.909z M208.75,248.577
c-2.56-0.234-5.318,0.177-8.06,0.51c-3.489,0.424-6.97,1.013-10.218,2.488c-1.299,0.591-2.53,0.953-1.969,2.183
c0.41,0.898,1.401-0.019,3.097-0.266c3.705-0.538,7.405-1.131,11.126-1.528c11.199-1.195,12.725,0.342,17.203,0.638
c0.932,0.062,1.114-0.509,1.084-1.291c-0.057-1.457-1.241-1.583-2.221-1.779C215.557,248.884,212.292,248.439,208.75,248.577z
M270.845,248.436c-0.824,0.404-0.929,1.143-0.761,1.915c0.17,0.78,0.87,0.753,1.453,0.696c2.227-0.221,5.996-1.06,7.762-1.088
c7.435-0.116,14.753,0.918,22.006,2.475c0.518,0.111,1.064,0.364,1.354-0.289c0.295-0.664-0.016-1.186-0.625-1.475
c-0.944-0.448-1.893-0.904-2.879-1.24C288.794,245.895,274.08,246.851,270.845,248.436z M221.339,259.42
c0.033-1.217-0.477-1.517-2.208-1.271c-6.248,0.888-11.495,4.003-16.586,7.463c-0.844,0.573-1.508,1.404-0.863,2.198
c0.518,0.637,0.997,0.069,1.927-0.521c6.891-4.376,11.859-5.314,16.802-6.536C221.115,260.58,221.355,260.091,221.339,259.42z
M271.348,256.547c-0.604-0.008-1.416-0.146-1.555,0.944c-0.122,0.958,0.225,1.593,1.211,1.814c0.51,0.114,1.01,0.274,1.522,0.375
c11.946,2.358,15.699,7.646,16.827,6.698c2.345-1.97-8.026-6.661-10.963-8.043C276.202,257.304,273.891,256.757,271.348,256.547z" />
</g>
</svg>
<div id="vruler-container" style="position: fixed; ;left: 0; top: 0;bottom: 0;"></div>
<h1>OnScreenWindow</h1>
<script class="viewable">
var myCat = absol.$('#my-cat').addStyle('position', 'relative');
myCat._left = 0;
myCat._top = 0;
var myVruler = absol._({
tag: 'vruler',
style: {
height: '90vh'
},
props: {
// inverse: true
}
}).addTo(absol.$('#vruler-container'));
var myHruler = absol._({
tag: 'hruler'
});
var modal = absol._({
style: {
left: '0',
top: '0',
right: '0',
bottom: '0',
position: 'fixed',
zIndex: '1000000'
}
});
absol.$(document.body).addChildAfter(myHruler, myCat);
var myResizebox = absol._('resizebox').addTo(document.body)
.on('beginmove', function (event) {
modal.addTo(document.body);
myCat._beginBound = myCat.getBoundingClientRect();
})
.on('moving', function (e) {
var newWidth = myCat._beginBound.width;
var newHeight = myCat._beginBound.height;
if (e.option.right) {
newWidth += e.clientDX;
}
if (e.option.bottom) {
newHeight += e.clientDY;
}
myCat.addStyle('width', newWidth + 'px');
myCat.addStyle('height', newHeight + 'px');
if (e.option.body) {
myCat.addStyle('left', myCat._left + e.clientDX + 'px');
myCat.addStyle('top', myCat._top + e.clientDY + 'px');
}
myHruler.update();
myVruler.update()
updateResizebox();
})
.on('endmove', function (e) {
if (e.option.body) {
myCat._left = myCat._left + e.clientDX;
myCat._top = myCat._top + e.clientDY;
}
modal.remove();
})
.on('click', function(event){
console.log(event);
})
.on('dblclick', function(event){
console.log(event)
});
myResizebox.canResize = true;
myResizebox.canClick = true;
function updateResizebox() {
var catBound = myCat.getBoundingClientRect();
myResizebox.addStyle({
left: catBound.left + 'px',
top: catBound.top + 'px',
width: catBound.width + 'px',
height: catBound.height + 'px'
})
}
myHruler.measureElement(myCat);
myVruler.measureElement(myCat);
updateResizebox();
var mouseXLine = absol._({
style: {
position: 'absolute',
top: '2px',
boxSizing: 'border-box',
bottom: '0',
border: 'solid 1px red'
}
}).addTo(myHruler);
var mouseYLine = absol._({
style: {
position: 'absolute',
left: '2px',
boxSizing: 'border-box',
right: '0',
border: 'solid 1px red'
}
}).addTo(myVruler);
document.addEventListener('scroll', function () {
myHruler.update();
myVruler.update();
});
absol.$(document.body).on('mousemove', function (event) {
var myHrulerBound = myHruler.getBoundingClientRect();
var myVrulerBound = myVruler.getBoundingClientRect();
mouseXLine.addStyle('left', event.clientX - myHrulerBound.left - 1.5 + 'px');
mouseYLine.addStyle('top', event.clientY - myVrulerBound.top - 1.5 + 'px');
});
var bt = absol._({
tag:'flexiconbutton',
props:{
text:'Remove'
},
on:{
click: function () {
myHruler.revokeResource()
myHruler.remove();
myVruler.revokeResource();
myVruler.remove();
// myVruler.remove();
}
}
});
document.body.insertBefore(absol._('br'), document.body.firstChild);
document.body.insertBefore(bt, document.body.firstChild);
</script>
<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>
<script>
setTimeout(()=>{
dispatchEvent(new Event('resize'));
updateResizebox();
}, 100);
</script>
</body>
</html> 
Server : Apache/2.4.41 (Ubuntu)