User:Lbenedix/uif.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (â-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (â-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
(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('<div class="uif-head"><div class="uif-help-button"></div><h2>Feedback</h2><div class="uif-collapse-button"></div><div class="uif-expand-button" style="display: none;"></div><div class="uif-close-button"></div></div>');
$(screenshotform).append('<form id="uif-form" method="post" action="." enctype="multipart/form-data"></form>');
$(screenshotform).find('#uif-form').append('<ul></ul>');
/* Screenshot-Annotation-Functions */
$(screenshotform).find('#uif-form ul').append('<li id="uif-functions-li"><label class="uif-label">Click and drag an area to help us to understand your feedback:</label></li>');
$(screenshotform).find('#uif-functions-li').append('<div id="uif-howtouse"><div id="how_to_use_animation"></div>');
$(screenshotform).find('#uif-functions-li').append('<span class="btn-group" data-toggle="buttons" data-target="#target3" id="uif-function">');
$(screenshotform).find('#uif-function').append('<button class="btn btn-active" value="uif-hl" id="uif-hl-button"><div id="uif-icon-hl"></div>Highlight</button>');
$(screenshotform).find('#uif-function').append('<button class="btn" value="uif-sn" id="uif-sn-button"><div id="uif-icon-sn"></div>Sticky-Note</button>');
$(screenshotform).find('#uif-function').append('<button class="btn" value="uif-bo" id="uif-bo-button"><div id="uif-icon-bo"></div>Blackout</button>');
$(screenshotform).find('#uif-functions-li').append('<div id="uif-howtouse-button"></div>');
/* Done? */
$(screenshotform).find('#uif-form ul').append('<li id="uif-done-li"></li>');
$(screenshotform).find('#uif-done-li').append('<label class="uif-label" for="uif-done">Were you able to complete your task?</label>')
$(screenshotform).find('#uif-done-li').append('<label><input type="radio" name="uif-done" value="1">yes</label>')
$(screenshotform).find('#uif-done-li').append('<label><input type="radio" name="uif-done" value="0">no</label>')
/* Importance? */
$(screenshotform).find('#uif-form ul').append('<li id="uif-importance-li"></li>');
$(screenshotform).find('#uif-importance-li').append('<label class="uif-label">How important is it for you?</label>');
$(screenshotform).find('#uif-importance-li').append('<label style="margin-left:10px;"><small>not important</small><input type="radio" name="uif-importance" value="1"></label>');
$(screenshotform).find('#uif-importance-li').append('<label><input type="radio" name="uif-importance" value="2"></label>');
$(screenshotform).find('#uif-importance-li').append('<label><input type="radio" name="uif-importance" value="3"></label>');
$(screenshotform).find('#uif-importance-li').append('<label><input type="radio" name="uif-importance" value="4"></label>');
$(screenshotform).find('#uif-importance-li').append('<label><input type="radio" name="uif-importance" value="5"><small>very important</small></label>');
/* 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"><span class="uif-tooltip">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.</span><label for="uif-anon">post privately</label><div id="uif-help-anon" class="uif-help-icon"></div><br/>');
$(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</label><br/>');
$(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.</label>');
*/
/* buttons */
$(screenshotform).find('#uif-form').append('<div id="uif-buttons">');
$(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 = $( '<div id="markers"></div>' );
function toggleForm( event ) {
$( '.uif-window' ).fadeToggle( 'fast' );
$( button ).fadeToggle();
$( '.uif-window' ).animate( { top: $( window ).scrollTop() + window.innerHeight / 10 }, 500 );
/* 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 = $('<div class="uif-sticky-note"><div class="uif-close-button"></div><textarea placeholder=""></textarea></div>');
$( 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 = $( '<div class="rect">' ).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 = $( '<div class="uif-close-button rect-close"></div>' );
$( close ).css( 'top', '5px' ).css( 'right', '5px' );
$( close ).mousedown( function( e ) {
e.preventDefault();
$( this ).parent().remove();
} );
/* avoid adding two close-buttons */
if( $( "#current" ).children().length == 0 ){ $( "#current" ).append( close ); }
/* add add-note button */
if( actual_function === 'highlight' ){
var add_note_button = $( '<button class="btn btn-small">add note</button>' );
$( add_note_button ).mousedown( function(e){ $(this).remove(); addStickyNote(e); } );
if( $( "#current" ).children().length == 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();
}
});
})();