bachir
/
ola5doc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
							<!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>