Selesti-Bug-UI Working Demo Phase1

by OwenMelbz

HTML

<div class="body">
    <div class="selesti-feedback-tab" title="click to leave feedback/submit a bug" data-state="closed">
        <img src="http://i49.tinypic.com/wb7vw9.png" />
    </div>
    <div class="selesti-feedback-menu">
        <h5>Selesti Bug Reporting</h5>
        <div class="selesti-feedback-menu-wrap">
            <div class="selesti-feedback-btn mark-area">Mark Area</div>
            <div class="selesti-feedback-btn">Comments</div>
            <div class="selesti-feedback-btn">View Bugs</div>
        </div>        
    </div>
</div>

CSS

body {
 background-image:url("http://i45.tinypic.com/sotxf7.png");   
}
.body { height:900px; width:100%}
.selesti-feedback-tab {
    position: fixed;
    top:20%;
    right:-1px;
    width:25px;
    height:25px;
    background-color: #ffffff;
    border: 1px solid #999999;
    border-right:none;
    cursor:pointer;
    -webkit-transition: background-color .5s;
       -moz-transition: background-color .5s;
         -o-transition: background-color .5s;
            transition: background-color .5s;
    z-index:99999;
    /* Test Class 
    right:100px;*/
}
.selesti-feedback-tab:hover {
    background-color: black;
}
.selesti-feedback-tab img {
    width:97%;
    height: auto;
    display:block;
    margin-top:2px;
}
.selesti-feedback-menu {
    width:100px;
    height:140px;
    position:fixed;
    right:-102px;
    top:20%;
    border:1px solid #999999;
    z-index:99998;
    font-family:arial;
    font-size:14px;
    color:#999999;
    background-color:#fff;
    /* Test Class 
    right:-1px;*/
}

.selesti-feedback-menu h5 {
    width:60px;
    height:30px;
    text-indent:-99999px;
    overflow:hidden;
    background-image:url("http://selesti.com/selesti-images/selesti-logo-21.png");
    background-size: 90px auto;
    background-position: -18px 4px;
    background-repeaT:no-repeat;
    margin-left:22px;
}
.selesti-feedback-menu-wrap {
 padding:5px;   
}
.selesti-feedback-btn {
    width:90%;
    margin:5px auto;
    background-color:#64B0EF;
    color:white;
    text-align:center;   
    padding:5px;
    cursor:pointer;
    border:1px solid white;
}
.selesti-feedback-btn:hover {
    border:1px solid #64B0EF;
    color:#64B0EF;
    background-color:white;
}
.selesti-feedback-overlay {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99996;
    background-color:rgba(255,255,255,0.4);
}
.bugged-area {
    position:    absolute;
    background-color:rgba(255,0,0,0.6);
    border:     1px solid #000;
   ...

JavaScript

$(function() {
    var pageID = document.location.pathname;
    var defaultMarkup = document.documentElement.innerHTML;
    var liveMarkup = document.documentElement.innerHTML;

    $('.selesti-feedback-menu').attr('data-pageId', pageID);

    $('.selesti-feedback-tab').click(function() {
        var state = $(this).attr('data-state');

        if (state == "closed") {
            $(this).attr('data-state', 'open');
            $('.selesti-feedback-menu').animate({
                'right': '-1px'
            });
            $('.selesti-feedback-tab').animate({
                'right': '100px'
            });
        }
        else {
            $(this).attr('data-state', 'closed');
            $('.selesti-feedback-menu').animate({
                'right': '-102px'
            });
            $('.selesti-feedback-tab').animate({
                'right': '-1px'
            });
        }
    });

    $('body').append("<div class='selesti-feedback-overlay' style='display:none;'></div>");

    $('.selesti-feedback-btn').live('click', function() {
        setupCanvas();
    });

    var setupCanvas = function() {
        var overlayMarkup = "<div class='selesti-feedback-overlay'></div>";
        var docHeight = $(document).outerHeight();
        var docWidth = $(document).outerWidth();

        
        $('.selesti-feedback-overlay').css({
            'width': docWidth,
            'height': docHeight,
        });
        $('.selesti-feedback-overlay').toggle();
        
        if ($('.selesti-feedback-menu .mark-area').text() == "Mark Area"){
               $('.selesti-feedback-menu .mark-area').text('Hide Area');
        }
        else {
            $('.selesti-feedback-menu .mark-area').text('Mark Area');
        }
            

    };

    var startDrawing = function() {
        initDraw();
    };

    window.bugID = 0;
    window.canvas = $('.selesti-feedback-overlay');

    canvas.live('mousedown', function(e) {
        e.preventDefault();

        if(e.target...