User:Lbenedix/uif.js

(function{

var highlight_color = 'rgba(225,255,0,0.25)'; var blackout_move_color = 'rgba(0,0,0,0.75)'; var blackout_color = 'rgba(0,0,0,1)';

var actual_function = 'highlight'; var last_function = 'highlight'; var sticky_note_interaction = false; var rect_color = highlight_color ;

var button = document.createElement( 'div' ); button.className = 'uif-feedback-button'; button.innerHTML = 'Feedback';

var screenshotform = document.createElement( 'div' ); screenshotform.className = 'uif-window';

/* head */ $(screenshotform).append(' Feedback    ');

$(screenshotform).append(' ');

$(screenshotform).find('#uif-form').append('');

/* Screenshot-Annotation-Functions */ $(screenshotform).find('#uif-form ul').append('Click and drag an area to help us to understand your feedback: '); $(screenshotform).find('#uif-functions-li').append('  '); $(screenshotform).find('#uif-functions-li').append(' '); $(screenshotform).find('#uif-function').append(' Highlight '); $(screenshotform).find('#uif-function').append(' Sticky-Note '); $(screenshotform).find('#uif-function').append(' Blackout '); $(screenshotform).find('#uif-functions-li').append(' ');

/* Done? */ $(screenshotform).find('#uif-form ul').append(''); $(screenshotform).find('#uif-done-li').append('Were you able to complete your task? ') $(screenshotform).find('#uif-done-li').append(' yes ') $(screenshotform).find('#uif-done-li').append(' no ')

/* Importance? */ $(screenshotform).find('#uif-form ul').append('</li>'); $(screenshotform).find('#uif-importance-li').append('<label class="uif-label">How important is it for you? '); $(screenshotform).find('#uif-importance-li').append('<label style="margin-left:10px;"> not important <input type="radio" name="uif-importance" value="1"> '); $(screenshotform).find('#uif-importance-li').append(' <input type="radio" name="uif-importance" value="2"> '); $(screenshotform).find('#uif-importance-li').append(' <input type="radio" name="uif-importance" value="3"> '); $(screenshotform).find('#uif-importance-li').append(' <input type="radio" name="uif-importance" value="4"> '); $(screenshotform).find('#uif-importance-li').append(' <input type="radio" name="uif-importance" value="5"> very important ');

/* hr */ /* $(screenshotform).find('#uif-form ul').append('<li id="uif-hr-li"><hr id="ui-feedback-hr"></li>'); /* send-options */ /* $(screenshotform).find('#uif-form ul').append('<li id="uif-options-li"></li>'); $(screenshotform).find('#uif-options-li').append('<input type="radio" name="uif-anon" id="uif-anon" value="true"> Check this box if you don\'t want to share your username. Please note that we will not be able to keep you updated on your submitted issue if you choose to remain anonymous. <label for="uif-anon">post privately '); $(screenshotform).find('#uif-options-li').append('<input type="radio" name="uif-anon" id="uif-public" value="false" checked="checked"><label for="uif-public">post publicly '); $(screenshotform).find('#uif-options-li').append('<input type="checkbox" name="uif-notify" id="uif-notify" value="true"><label for="uif-notify" id="uif-notify-li">I want to be updated on this issue. ');

/* buttons */ $(screenshotform).find('#uif-form').append(' '); $(screenshotform).find('#uif-buttons').append('<input type="button" name="reset" id="uif-reset-button" value="reset"> '); $(screenshotform).find('#uif-buttons').append('<input type="button" name="send" id="uif-send-button" value="send">');

/* finished creation of feedback-form */

var markers = $( ' ' );

function toggleForm( event ) { $( '.uif-window' ).fadeToggle( 'fast' ); $( button ).fadeToggle;

/* add markers-overlay */ $( 'body' ).toggleClass( 'noselect' ); $( '#markers' ).toggle; $( '#markers' ).css( 'width', Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"])                      ); $( '#markers' ).css( 'height', Math.max(document.documentElement["clientHeight"], document.body["scrollHeight"], document.documentElement["scrollHeight"], document.body["offsetHeight"], document.documentElement["offsetHeight"])                      ); }

function sendFeedback( event ){ $( '.uif-window' ).hide; console.log( 'send feedback' ); $.cookie( "uif-first-sent", 'true', { path: '/', expires: 21 } ); html2canvas(document.body, {    onrendered: function(canvas) {      $( '.uif-window' ).show;       document.body.appendChild(canvas);       var imgData = canvas.toDataURL("image/png");      console.log(imgData );    }  }); }

function resetForm( event ){ $( '#markers' ).children.remove; var form = '#uif-form'; $( ':input', $( form ) ).each( function( i, item ) {   switch( item.tagName.toLowerCase ) {      case 'input':        switch( item.type.toLowerCase ) {          case 'text':            item.value = ;            break;          case 'radio':          case 'checkbox':            item.checked = ;            break;        }        break;      case 'select':        item.selectedIndex = 0;        break;      case 'textarea':        item.value = '';        break;    }  } ); }

function toggleTooltip{ var tooltip = $( this ).siblings( '.uif-tooltip' ); if( $( tooltip ).is(':visible') ) { $( tooltip ).css('display','none'); } else { $( tooltip ).css('display','block'); } }

function addStickyNote(e){ if( sticky_note_interaction ){ return; } /* remove empty stickies */ $( '.uif-sticky-note' ).each( function{ if( $( this ).find( 'textarea' ).val === '' ){ if( $( this ) !== null ) $( this ).remove; } } ); /* create new sticky */ var note = $('  '); $( note ).css('left',e.pageX); $( note ).css('top',e.pageY); $( '#markers' ).append(note); /* prevent creation of new sticky when moving */ $( note ).draggable({   start: function { sticky_note_interaction = true;  },    stop:  function { sticky_note_interaction = false; }  }); $( note ).hover(   function{ $( note ).find( ".uif-close-button" ).toggle; sticky_note_interaction = true;  },    function{ $( note ).find( ".uif-close-button" ).toggle; sticky_note_interaction = false; }  );

/* make sticky resizable */ $( note ).resizable({ handles: "se" }); /* focus the textarea */ $( note ).find( 'textarea' ).focus;

$( note ).find( ".uif-close-button" ).click(   function{      $( note ).remove;      sticky_note_interaction = false;      return false;    }  ); } /* end sticky */

$( document ).ready( function {

/* add feedback button to body*/ $( 'body' ).prepend( button );

/* add form to body*/ $( 'body' ).append( screenshotform );

/* add the markers overlay */ $( 'body' ).append( markers );

/* hide form */ $( screenshotform ).toggle;

/* add clickhandler to feedback button*/ $( button ).click( toggleForm ); $( '.uif-head .uif-close-button' ).click( toggleForm ); $( '#uif-send-button' ).click( sendFeedback ); $( '#uif-reset-button' ).click( resetForm ); $( '#uif-hl-button').click( function{ actual_function = 'highlight'; }); $( '#uif-sn-button').click( function{ actual_function = 'sticky-note'; }); $( '#uif-bo-button').click( function{ actual_function = 'blackout'; });

$('#uif-howtouse-button').click( function{ $('#uif-howtouse').slideToggle; } );

/* functions buttongroup */ $.each($('.btn'), function {   $( this ).click(function( event ){ event.preventDefault; $.each($('.btn'), function { $( this ).removeClass('btn-active'); } ); $( this ).addClass('btn-active'); }); });  /* tooltips */ $( '#uif-help-anon' ).hover( toggleTooltip ); /* send-options */ $( "input[name='uif-anon']" ).change(    function(event) { $( "input[name='uif-notify']" ).prop( "disabled", $( "input[name='uif-anon']:checked" ).val  === 'true' ); }  );

/* draw rect */ $( '#markers' ).mousedown( function( e ) {   if( actual_function === 'highlight' || actual_function === 'blackout' ){      if( sticky_note_interaction ){ return; }

$( "#current" ).attr( { id: '' } ); var box = $( ' ' ).hide; /* color the rect */ if( actual_function === 'highlight' ) $( box ).css( 'background', highlight_color ); else if( actual_function === 'blackout' ) $( box ).css( 'background', blackout_move_color );

$( '#markers' ).append( box ); x1 = e.pageX; y1 = e.pageY; box.attr( {id: 'current'} ).css( {                        top: e.pageY, //offsets                         left: e.pageX //offsets                      } ).show;

$( box ).hover(        function{ $( this ).children.show; },        function{ $( this ).children.hide; }      ); $( '#markers' ).mousemove( function( e ) {       $( '#current' ).css( { width: Math.abs( e.pageX - x1 ), //offsets height: Math.abs( e.pageY - y1 ) //offsets } );       if( e.pageX < x1 ) {          $( "#current" ).css( "left", e.pageX );        }        if( e.pageY < y1 ) {          $( "#current" ).css( "top", e.pageY );        }      } ); }else if( actual_function === 'sticky-note' ){ addStickyNote(e); } } );

$( '#markers' ).mouseup( function(e) {   if(actual_function === 'highlight' || actual_function === 'blackout' ){      if( $( "#current" ).width < 10 || $( "#current" ).height < 10 ) {        $( "#current" ).remove;      }      var close = $( ' ' );      $( close ).css( 'top', '5px' ).css( 'right', '5px' );      $( close ).mousedown( function( e ) { e.preventDefault; $( this ).parent.remove; } );     /* avoid adding two close-buttons */      if( $( "#current" ).children.size == 0 ){ $( "#current" ).append( close ); }

/* add add-note button */ if( actual_function === 'highlight' ){ var add_note_button = $( '<button class="btn btn-small">add note ' ); $( add_note_button ).mousedown( function(e){ $(this).remove; addStickyNote(e); } ); if( $( "#current" ).children.size == 1 ){ $( "#current" ).append( add_note_button ); } }

/* change the color to solid black when blackout is choosen */ if( actual_function === 'blackout' ){ $( "#current" ).css( 'background', blackout_color ); }

/* remove id */ $( "#current" ).attr( { id: '' } ) } } );  /* end rect */

$( screenshotform ).draggable; $( screenshotform ).draggable( {cancel: "#uif-form"} );

if( $.cookie( "uif-first-sent") !== null){ $( '#uif-howtouse' ).toggle; }

});

});