358 lines
22 KiB
HTML
358 lines
22 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>jQuery.line by Szymon Działowski</title>
|
|
<meta name="description" content="jQuery.line plugin to draw lines in HTML5 using pure CSS3 by Szymon Działowski">
|
|
<meta name="keywords" content="jQuery.line plugin draw lines html5 css3">
|
|
|
|
<script type="text/javascript" src="../../js/jquery.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../../js/bootstrap/css/bootstrap-rewrite.css" media="all" />
|
|
|
|
<script type="text/javascript" src="../../js/jquery.minicolors/jquery.minicolors.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../../js/jquery.minicolors/jquery.minicolors.css" media="all" />
|
|
|
|
|
|
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write(unescape('%3Cscript src="http://jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
|
|
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="all" />
|
|
<script type="text/javascript" src="http://httpd.pl/poligon/jquery.line/jquery.minicolors/jquery.minicolors.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="http://httpd.pl/poligon/jquery.line/jquery.minicolors/jquery.minicolors.css" media="all" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="http://stopsopa.bitbucket.org/js/bootstrap/css/bootstrap-rewrite.css" media="all" /> -->
|
|
|
|
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,cyrillic-ext,latin-ext,cyrillic" rel="stylesheet" type="text/css">
|
|
<script type="text/javascript" src="jquery.line.js"></script>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: -moz-none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
|
|
}
|
|
#cont {
|
|
width: 500px;
|
|
margin: auto;
|
|
/*border: 1px solid gray;*/
|
|
height: 617px;
|
|
}
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
#width {
|
|
margin-right: 10px;
|
|
}
|
|
#color {
|
|
width: 250px;
|
|
padding-left: 36px;
|
|
}
|
|
#width,
|
|
#correct {
|
|
width: 50px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
/* http://httpd.pl/cssmedia#InQiOiIxMCIsIm8iOiIwIiwiYSI6IjEwMCIsInoiOiIxMDAwIiwicyI6IiNjb250IiwiZCI6ImhlaWdodCIsImMiOiJoZWlnaHRfIiwiciI6Im1hcmdpbi10b3A6IDwlPSBtYXgvMiAtIDIwMCAlPnB4OyI= */
|
|
@media (min-height: 101px) and (max-height: 110px) { #cont {margin-top: -145px;} }@media (min-height: 111px) and (max-height: 120px) { #cont {margin-top: -140px;} }@media (min-height: 121px) and (max-height: 130px) { #cont {margin-top: -135px;} }@media (min-height: 131px) and (max-height: 140px) { #cont {margin-top: -130px;} }@media (min-height: 141px) and (max-height: 150px) { #cont {margin-top: -125px;} }@media (min-height: 151px) and (max-height: 160px) { #cont {margin-top: -120px;} }@media (min-height: 161px) and (max-height: 170px) { #cont {margin-top: -115px;} }@media (min-height: 171px) and (max-height: 180px) { #cont {margin-top: -110px;} }@media (min-height: 181px) and (max-height: 190px) { #cont {margin-top: -105px;} }@media (min-height: 191px) and (max-height: 200px) { #cont {margin-top: -100px;} }@media (min-height: 201px) and (max-height: 210px) { #cont {margin-top: -95px;} }@media (min-height: 211px) and (max-height: 220px) { #cont {margin-top: -90px;} }@media (min-height: 221px) and (max-height: 230px) { #cont {margin-top: -85px;} }@media (min-height: 231px) and (max-height: 240px) { #cont {margin-top: -80px;} }@media (min-height: 241px) and (max-height: 250px) { #cont {margin-top: -75px;} }@media (min-height: 251px) and (max-height: 260px) { #cont {margin-top: -70px;} }@media (min-height: 261px) and (max-height: 270px) { #cont {margin-top: -65px;} }@media (min-height: 271px) and (max-height: 280px) { #cont {margin-top: -60px;} }@media (min-height: 281px) and (max-height: 290px) { #cont {margin-top: -55px;} }@media (min-height: 291px) and (max-height: 300px) { #cont {margin-top: -50px;} }@media (min-height: 301px) and (max-height: 310px) { #cont {margin-top: -45px;} }@media (min-height: 311px) and (max-height: 320px) { #cont {margin-top: -40px;} }@media (min-height: 321px) and (max-height: 330px) { #cont {margin-top: -35px;} }@media (min-height: 331px) and (max-height: 340px) { #cont {margin-top: -30px;} }@media (min-height: 341px) and (max-height: 350px) { #cont {margin-top: -25px;} }@media (min-height: 351px) and (max-height: 360px) { #cont {margin-top: -20px;} }@media (min-height: 361px) and (max-height: 370px) { #cont {margin-top: -15px;} }@media (min-height: 371px) and (max-height: 380px) { #cont {margin-top: -10px;} }@media (min-height: 381px) and (max-height: 390px) { #cont {margin-top: -5px;} }@media (min-height: 391px) and (max-height: 400px) { #cont {margin-top: 0px;} }@media (min-height: 401px) and (max-height: 410px) { #cont {margin-top: 5px;} }@media (min-height: 411px) and (max-height: 420px) { #cont {margin-top: 10px;} }@media (min-height: 421px) and (max-height: 430px) { #cont {margin-top: 15px;} }@media (min-height: 431px) and (max-height: 440px) { #cont {margin-top: 20px;} }@media (min-height: 441px) and (max-height: 450px) { #cont {margin-top: 25px;} }@media (min-height: 451px) and (max-height: 460px) { #cont {margin-top: 30px;} }@media (min-height: 461px) and (max-height: 470px) { #cont {margin-top: 35px;} }@media (min-height: 471px) and (max-height: 480px) { #cont {margin-top: 40px;} }@media (min-height: 481px) and (max-height: 490px) { #cont {margin-top: 45px;} }@media (min-height: 491px) and (max-height: 500px) { #cont {margin-top: 50px;} }@media (min-height: 501px) and (max-height: 510px) { #cont {margin-top: 55px;} }@media (min-height: 511px) and (max-height: 520px) { #cont {margin-top: 60px;} }@media (min-height: 521px) and (max-height: 530px) { #cont {margin-top: 65px;} }@media (min-height: 531px) and (max-height: 540px) { #cont {margin-top: 70px;} }@media (min-height: 541px) and (max-height: 550px) { #cont {margin-top: 75px;} }@media (min-height: 551px) and (max-height: 560px) { #cont {margin-top: 80px;} }@media (min-height: 561px) and (max-height: 570px) { #cont {margin-top: 85px;} }@media (min-height: 571px) and (max-height: 580px) { #cont {margin-top: 90px;} }@media (min-height: 581px) and (max-height: 590px) { #cont {margin-top: 95px;} }@media (min-height: 591px) and (max-height: 600px) { #cont {margin-top: 100px;} }@media (min-height: 601px) and (max-height: 610px) { #cont {margin-top: 105px;} }@media (min-height: 611px) and (max-height: 620px) { #cont {margin-top: 110px;} }@media (min-height: 621px) and (max-height: 630px) { #cont {margin-top: 115px;} }@media (min-height: 631px) and (max-height: 640px) { #cont {margin-top: 120px;} }@media (min-height: 641px) and (max-height: 650px) { #cont {margin-top: 125px;} }@media (min-height: 651px) and (max-height: 660px) { #cont {margin-top: 130px;} }@media (min-height: 661px) and (max-height: 670px) { #cont {margin-top: 135px;} }@media (min-height: 671px) and (max-height: 680px) { #cont {margin-top: 140px;} }@media (min-height: 681px) and (max-height: 690px) { #cont {margin-top: 145px;} }@media (min-height: 691px) and (max-height: 700px) { #cont {margin-top: 150px;} }@media (min-height: 701px) and (max-height: 710px) { #cont {margin-top: 155px;} }@media (min-height: 711px) and (max-height: 720px) { #cont {margin-top: 160px;} }@media (min-height: 721px) and (max-height: 730px) { #cont {margin-top: 165px;} }@media (min-height: 731px) and (max-height: 740px) { #cont {margin-top: 170px;} }@media (min-height: 741px) and (max-height: 750px) { #cont {margin-top: 175px;} }@media (min-height: 751px) and (max-height: 760px) { #cont {margin-top: 180px;} }@media (min-height: 761px) and (max-height: 770px) { #cont {margin-top: 185px;} }@media (min-height: 771px) and (max-height: 780px) { #cont {margin-top: 190px;} }@media (min-height: 781px) and (max-height: 790px) { #cont {margin-top: 195px;} }@media (min-height: 791px) and (max-height: 800px) { #cont {margin-top: 200px;} }@media (min-height: 801px) and (max-height: 810px) { #cont {margin-top: 205px;} }@media (min-height: 811px) and (max-height: 820px) { #cont {margin-top: 210px;} }@media (min-height: 821px) and (max-height: 830px) { #cont {margin-top: 215px;} }@media (min-height: 831px) and (max-height: 840px) { #cont {margin-top: 220px;} }@media (min-height: 841px) and (max-height: 850px) { #cont {margin-top: 225px;} }@media (min-height: 851px) and (max-height: 860px) { #cont {margin-top: 230px;} }@media (min-height: 861px) and (max-height: 870px) { #cont {margin-top: 235px;} }@media (min-height: 871px) and (max-height: 880px) { #cont {margin-top: 240px;} }@media (min-height: 881px) and (max-height: 890px) { #cont {margin-top: 245px;} }@media (min-height: 891px) and (max-height: 900px) { #cont {margin-top: 250px;} }@media (min-height: 901px) and (max-height: 910px) { #cont {margin-top: 255px;} }@media (min-height: 911px) and (max-height: 920px) { #cont {margin-top: 260px;} }@media (min-height: 921px) and (max-height: 930px) { #cont {margin-top: 265px;} }@media (min-height: 931px) and (max-height: 940px) { #cont {margin-top: 270px;} }@media (min-height: 941px) and (max-height: 950px) { #cont {margin-top: 275px;} }@media (min-height: 951px) and (max-height: 960px) { #cont {margin-top: 280px;} }@media (min-height: 961px) and (max-height: 970px) { #cont {margin-top: 285px;} }@media (min-height: 971px) and (max-height: 980px) { #cont {margin-top: 290px;} }@media (min-height: 981px) and (max-height: 990px) { #cont {margin-top: 295px;} }
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
function log(l) {try {console.log(l);}catch (e) {}}
|
|
function track(style, action) {
|
|
style || (style = 'unknown');
|
|
action || (action = 'DrawLine');
|
|
try {
|
|
//_gaq.push(['_trackEvent', 'Events', 'DrawLine', style]); // https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide?hl=pl#SettingUpEventTracking
|
|
ga('send', 'event', 'Events', action, style); // https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=pl
|
|
}
|
|
catch (e) {}
|
|
}
|
|
|
|
$(function () {
|
|
var width = $('#width');
|
|
var color = $('#color');
|
|
$('#up, #down').click(function () {
|
|
var t = $(this);
|
|
var v = parseInt(width.html());
|
|
if (t.is('#up')) {
|
|
++v
|
|
}
|
|
else {
|
|
--v;
|
|
if (v < 1) {
|
|
v = 1;
|
|
}
|
|
}
|
|
width.html(v);
|
|
});
|
|
|
|
|
|
function Correct() {
|
|
var correct = $('#correct');
|
|
var that = this;
|
|
var step = 10;
|
|
var box = $('#switch');
|
|
this.states = function () {
|
|
var v = this.get();
|
|
|
|
if (v !== false && v !== true)
|
|
return box.find('input').removeAttr('disabled');
|
|
|
|
box.find('input').attr('disabled', 'disabled');
|
|
return this;
|
|
};
|
|
$('#cup').click(function () {
|
|
var v = that.get();
|
|
var v = that.get();
|
|
if (v === true) {
|
|
correct.html(step+'');
|
|
return that.states();
|
|
}
|
|
if (v === false) {
|
|
correct.html('true');
|
|
return that.states();
|
|
}
|
|
if (v === 0-step) {
|
|
correct.html('false');
|
|
return that.states();
|
|
}
|
|
correct.html(v+step);
|
|
that.states();
|
|
});
|
|
$('#cdown').click(function () {
|
|
var v = that.get();
|
|
if (v === true) {
|
|
correct.html('false');
|
|
return that.states();
|
|
}
|
|
if (v === false) {
|
|
correct.html('-'+(step+''));
|
|
return that.states();
|
|
}
|
|
if (v === step) {
|
|
correct.html('true');
|
|
return that.states();
|
|
}
|
|
correct.html(v-step);
|
|
that.states();
|
|
});
|
|
this.get = function () {
|
|
var v = correct.html();
|
|
if (v == 'true') {
|
|
return true;
|
|
}
|
|
if (v == 'false') {
|
|
return false;
|
|
}
|
|
return parseInt(v);
|
|
};
|
|
}
|
|
var correct = (new Correct()).states();
|
|
|
|
$('.minicolors').minicolors({
|
|
control: 'hue',
|
|
inline: false,
|
|
letterCase: 'uppercase',
|
|
theme: 'bootstrap'
|
|
});
|
|
|
|
function opt() {
|
|
return {
|
|
width: width.html(),
|
|
color: color.val(),
|
|
style: $('[name="style"]:checked').val(),
|
|
correct: correct.get(),
|
|
correctpos: $('[name="correctpos"]:checked').val(),
|
|
css : {
|
|
height: '0',
|
|
zIndex: '999',
|
|
zoom: 1
|
|
}
|
|
};
|
|
}
|
|
|
|
var a, b, hopt = {
|
|
color: 'red',
|
|
css : {
|
|
zIndex: '1000'
|
|
}
|
|
};
|
|
|
|
var mesure = $('#mesure');
|
|
function callback(div, o, c, leave) {
|
|
if (mesure.is(':checked') && o.correct !== false && o.correct !== true) {
|
|
a = $.line(c.x1, c.y1, c.bx, c.by, hopt);
|
|
b = $.line(c.x2, c.y2, c.dx, c.dy, $.extend({}, hopt, {color: 'green'}));
|
|
if (leave) {
|
|
a = b = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
var x1, y1, x2, y2, run = false, t = $();
|
|
$(window)
|
|
.mousemove(function(e) {
|
|
if (run) {
|
|
t && t.remove();
|
|
a && a.remove();
|
|
b && b.remove();
|
|
t = $.line(x1, y1, e.pageX, e.pageY, opt(), callback);
|
|
}
|
|
})
|
|
.mousedown(function (e) {
|
|
x1 = e.pageX;
|
|
y1 = e.pageY;
|
|
t = false;
|
|
run = true;
|
|
})
|
|
.mouseup(function (e) {
|
|
if ( (x1 - e.pageX) < 4 && (y1 - e.pageY) < 4 ) {
|
|
return run = false;
|
|
}
|
|
run = false;
|
|
t && t.remove();
|
|
a && a.remove();
|
|
b && b.remove();
|
|
$.line(x1, y1, e.pageX, e.pageY, opt(), function (div, o, c) {
|
|
callback(div, o, c, true);
|
|
track(JSON.stringify({
|
|
s: o.style,
|
|
w: parseInt(o.width),
|
|
c: o.color
|
|
}));
|
|
});
|
|
});
|
|
|
|
|
|
(function () {
|
|
var go = false;
|
|
$('#home').click(function (e) {
|
|
e.preventDefault();
|
|
var h = $(this).attr('href');
|
|
if (!go) {
|
|
go = true;
|
|
track('home', 'redirect');
|
|
setTimeout(function () {
|
|
location.href = h;
|
|
},1000);
|
|
}
|
|
});
|
|
})();
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="cont">
|
|
<div class="btspa">
|
|
<div>
|
|
<a href="https://bitbucket.org/stopsopa/jquery.line" class="btn btn-link"><img src="favicon.png" alt="" /> manual/download</a>
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<i class="glyphicon glyphicon-info-sign"></i> Use your mouse to draw lines on screen
|
|
</div>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
width:
|
|
</td>
|
|
<td>
|
|
<span id="width">3</span><button class="btn btn-primary btn-xs" id="up"><i class="glyphicon glyphicon-chevron-up"></i></button> <button class="btn btn-primary btn-xs" id="down"><i class="glyphicon glyphicon-chevron-down"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<br />
|
|
<br />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
color:
|
|
</td>
|
|
<td>
|
|
<input type="text" class="form-control minicolors" value="#383838" id="color" autocomplete="off"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
style:
|
|
</td>
|
|
<td>
|
|
<label><input type="radio" name="style" value="solid" autocomplete="off" checked="checked"/>solid</label>
|
|
<label><input type="radio" name="style" value="dotted" autocomplete="off"/>dotted</label>
|
|
<label><input type="radio" name="style" value="dashed" autocomplete="off"/>dashed</label>
|
|
<label><input type="radio" name="style" value="double" autocomplete="off"/>double</label>
|
|
<br />
|
|
<label><input type="radio" name="style" value="groove" autocomplete="off"/>groove</label>
|
|
<label><input type="radio" name="style" value="ridge" autocomplete="off"/>ridge</label>
|
|
<label><input type="radio" name="style" value="inset" autocomplete="off"/>inset</label>
|
|
<label><input type="radio" name="style" value="outset" autocomplete="off"/>outset</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
correct:
|
|
</td>
|
|
<td>
|
|
<span id="correct">true</span><button class="btn btn-primary btn-xs" id="cup"><i class="glyphicon glyphicon-chevron-up"></i></button> <button class="btn btn-primary btn-xs" id="cdown"><i class="glyphicon glyphicon-chevron-down"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
always on:
|
|
</td>
|
|
<td id="switch">
|
|
<label><input type="radio" name="correctpos" value="normal" autocomplete="off" checked="checked"/>normal</label>
|
|
<label><input type="radio" name="correctpos" value="top" autocomplete="off"/>top</label>
|
|
<label><input type="radio" name="correctpos" value="bottom" autocomplete="off"/>bottom</label>
|
|
<label><input type="radio" name="correctpos" value="left" autocomplete="off"/>left</label>
|
|
<label><input type="radio" name="correctpos" value="right" autocomplete="off"/>right</label>
|
|
<br />
|
|
<label><input type="checkbox" id="mesure" autocomplete="off"/> mesure</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
|
|
<div id="disqus_thread"></div>
|
|
<script type="text/javascript">
|
|
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
|
var disqus_shortname = 'stopsopabitbucket'; // required: replace example with your forum shortname
|
|
|
|
/* * * DON'T EDIT BELOW THIS LINE * * */
|
|
(function() {
|
|
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
|
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
|
})();
|
|
</script>
|
|
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
|
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-52657901-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html> |