From 760e3f6582e86aed443104b93241b7bb6e85fc46 Mon Sep 17 00:00:00 2001 From: "luca@artattackadv.com" Date: Wed, 28 Sep 2016 16:06:28 +0200 Subject: [PATCH 1/6] add new setting parameter loadHtml2canvas --- CHANGELOG.md | 6 +++++- README.md | 8 +++++++- src/angularSendFeedback.js | 3 ++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 25d0c66..82284ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ + +# 1.2.1 (2016-09-28) +- add new setting **loadHtml2canvas** + # 1.2.0 (2016-06-28) @@ -17,4 +21,4 @@ - **moved button html to property in settings.tpl** - **added CSS file to main** CSS file now in bower main property. - **published to npm** `npm install angular-send-feedback`. -- **ajaxURL optionally a function** ajaxURL property can be either a string or a function. \ No newline at end of file +- **ajaxURL optionally a function** ajaxURL property can be either a string or a function. diff --git a/README.md b/README.md index 690e322..4473d27 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,12 @@ Sets border of the highlighted area. `Default: 3` +### loadHtml2Canvas (Boolean) + +By Setting this false the user will have to include html2canvas library your self, the setting html2canvasURL will be ignored + +`Default: true` + ### html2canvasURL (String) The URL where the plugin can download html2canvas.js from. @@ -218,4 +224,4 @@ Sets whether the user will be able to drag the feedback options modal or not ## //TODO List -* Pulling jQuery out into a more classical AngularJS Directive rather than just wrapping the jQuery plugin. \ No newline at end of file +* Pulling jQuery out into a more classical AngularJS Directive rather than just wrapping the jQuery plugin. diff --git a/src/angularSendFeedback.js b/src/angularSendFeedback.js index 53066a3..5006f44 100644 --- a/src/angularSendFeedback.js +++ b/src/angularSendFeedback.js @@ -33,6 +33,7 @@ angular.module('angular-send-feedback').directive('angularFeedback', [ function( shadowBlur: 10, lineJoin: 'bevel', lineWidth: 3, + loadHtml2canvas: true, html2canvasURL: 'html2canvas.js', feedbackButton: '.feedback-btn', showDescriptionModal: true, @@ -62,7 +63,7 @@ angular.module('angular-send-feedback').directive('angularFeedback', [ function( if(isFeedbackButtonNative) { $(this).hide(); } - if (!_html2canvas) { + if(setting.loadHtml2canvas) $.getScript(settings.html2canvasURL, function() { _html2canvas = true; }); From d2e8613f2a1f5861d3a33db010fc3e6680448542 Mon Sep 17 00:00:00 2001 From: Luca Tamburo Date: Thu, 1 Dec 2016 10:55:50 +0100 Subject: [PATCH 2/6] Update angularSendFeedback.js --- src/angularSendFeedback.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/angularSendFeedback.js b/src/angularSendFeedback.js index 5006f44..520be74 100644 --- a/src/angularSendFeedback.js +++ b/src/angularSendFeedback.js @@ -63,7 +63,7 @@ angular.module('angular-send-feedback').directive('angularFeedback', [ function( if(isFeedbackButtonNative) { $(this).hide(); } - if(setting.loadHtml2canvas) + if(setting.loadHtml2canvas) { $.getScript(settings.html2canvasURL, function() { _html2canvas = true; }); From 16f6bb8cc7187c9ca84beba8ff24db0c7bf428bc Mon Sep 17 00:00:00 2001 From: Luca Tamburo Date: Thu, 1 Dec 2016 09:57:02 +0000 Subject: [PATCH 3/6] add my pull request https://github.com/jacobscarter/angular-feedback/pull/18 --- dist/angular-send-feedback.js | 31 ++++++++++++++++--------------- dist/angular-send-feedback.min.js | 4 ++-- src/angularSendFeedback.js | 2 +- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/dist/angular-send-feedback.js b/dist/angular-send-feedback.js index c24aa56..1e7bef9 100644 --- a/dist/angular-send-feedback.js +++ b/dist/angular-send-feedback.js @@ -1,18 +1,18 @@ -/** - * Angular feedback directive similar to Google Feedback - * @version v1.2.0 - 2016-06-28 * @link https://github.com/jacobscarter/angular-feedback - * @author Jacob Carter - * @license MIT License, http://www.opensource.org/licenses/MIT - */ -angular.module('templates-angularsendfeedback', ['angularsendfeedback.html']); - -angular.module("angularsendfeedback.html", []).run(["$templateCache", function($templateCache) { - $templateCache.put("angularsendfeedback.html", - ""); -}]); - +/** + * Angular feedback directive similar to Google Feedback + * @version v1.2.1 - 2016-12-01 * @link https://github.com/jacobscarter/angular-feedback + * @author Jacob Carter + * @license MIT License, http://www.opensource.org/licenses/MIT + */ +angular.module('templates-angularsendfeedback', ['angularsendfeedback.html']); + +angular.module("angularsendfeedback.html", []).run(["$templateCache", function($templateCache) { + $templateCache.put("angularsendfeedback.html", + ""); +}]); + angular.module('angular-send-feedback', ['templates-angularsendfeedback']); - + angular.module('angular-send-feedback').directive('angularFeedback', [ function() { @@ -48,6 +48,7 @@ angular.module('angular-send-feedback').directive('angularFeedback', [ function( shadowBlur: 10, lineJoin: 'bevel', lineWidth: 3, + loadHtml2canvas: true, html2canvasURL: 'html2canvas.js', feedbackButton: '.feedback-btn', showDescriptionModal: true, @@ -77,7 +78,7 @@ angular.module('angular-send-feedback').directive('angularFeedback', [ function( if(isFeedbackButtonNative) { $(this).hide(); } - if (!_html2canvas) { + if(setting.loadHtml2canvas) { $.getScript(settings.html2canvasURL, function() { _html2canvas = true; }); diff --git a/dist/angular-send-feedback.min.js b/dist/angular-send-feedback.min.js index dfc062e..828782d 100644 --- a/dist/angular-send-feedback.min.js +++ b/dist/angular-send-feedback.min.js @@ -1,7 +1,7 @@ /** * Angular feedback directive similar to Google Feedback - * @version v1.2.0 - 2016-06-28 * @link https://github.com/jacobscarter/angular-feedback + * @version v1.2.1 - 2016-12-01 * @link https://github.com/jacobscarter/angular-feedback * @author Jacob Carter * @license MIT License, http://www.opensource.org/licenses/MIT */ -angular.module("templates-angularsendfeedback",["angularsendfeedback.html"]),angular.module("angularsendfeedback.html",[]).run(["$templateCache",function(a){a.put("angularsendfeedback.html","")}]),angular.module("angular-send-feedback",["templates-angularsendfeedback"]),angular.module("angular-send-feedback").directive("angularFeedback",[function(){return{restrict:"EA",replace:!0,transclude:!0,scope:{options:"="},link:function(a,b,c){!function(a){a.feedback=function(b){function c(){canDraw=!1,a(document).off("mouseenter mouseleave",".feedback-helper"),a(document).off("mouseup keyup"),a(document).off("mousedown",".feedback-setblackout"),a(document).off("mousedown",".feedback-sethighlight"),a(document).off("mousedown click","#feedback-close"),a(document).off("mousedown","#feedback-canvas"),a(document).off("click","#feedback-highlighter-next"),a(document).off("click","#feedback-highlighter-back"),a(document).off("click","#feedback-welcome-next"),a(document).off("click","#feedback-overview-back"),a(document).off("mouseleave","body"),a(document).off("mouseenter",".feedback-helper"),a(document).off("selectstart dragstart",document),a("#feedback-module").off("click",".feedback-wizard-close,.feedback-close-btn"),a(document).off("click","#feedback-submit"),f.highlightElement&&(a(document).off("click","#feedback-canvas"),a(document).off("mousemove","#feedback-canvas")),a('[data-highlighted="true"]').removeAttr("data-highlight-id").removeAttr("data-highlighted"),a("#feedback-module").remove(),a(".feedback-btn").show(),f.onClose.call(this)}function d(b,c){c="undefined"!=typeof c?c:!0,b.clearRect(0,0,a("#feedback-canvas").width(),a("#feedback-canvas").height()),b.fillStyle="rgba(102,102,102,0.5)",b.fillRect(0,0,a("#feedback-canvas").width(),a("#feedback-canvas").height()),a(".feedback-helper").each(function(){"highlight"==a(this).attr("data-type")&&c&&e(b,parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height())}),a(".feedback-helper").each(function(){"highlight"==a(this).attr("data-type")&&b.clearRect(parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height())}),a(".feedback-helper").each(function(){"blackout"==a(this).attr("data-type")&&(b.fillStyle="rgba(0,0,0,1)",b.fillRect(parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height()))})}function e(a,b,c,d,e){a.strokeStyle=f.strokeStyle,a.shadowColor=f.shadowColor,a.shadowOffsetX=f.shadowOffsetX,a.shadowOffsetY=f.shadowOffsetY,a.shadowBlur=f.shadowBlur,a.lineJoin=f.lineJoin,a.lineWidth=f.lineWidth,a.strokeRect(b,c,d,e),a.shadowOffsetX=0,a.shadowOffsetY=0,a.shadowBlur=0,a.lineWidth=1}var f=a.extend({ajaxURL:"",postBrowserInfo:!0,postHTML:!0,postURL:!0,postTimeStamp:!0,proxy:void 0,letterRendering:!1,initButtonText:"Send feedback",strokeStyle:"black",shadowColor:"black",shadowOffsetX:1,shadowOffsetY:1,shadowBlur:10,lineJoin:"bevel",lineWidth:3,html2canvasURL:"html2canvas.js",feedbackButton:".feedback-btn",showDescriptionModal:!0,isDraggable:!0,onScreenshotTaken:function(){},tpl:{initButton:'
',description:'

Feedback lets you send us suggestions about our products. We welcome problem reports, feature ideas and general comments.

Start by writing a brief description:

Next we\'ll let you identify areas of the page related to your description.

Please enter a description.
',highlighter:'

Click and drag on the page to help us better understand your feedback. You can move this dialog if it\'s in the way.

',overview:'

Description

None
Browser Info
Page Info
Time Stamp
Page Structure

Screenshot

Please enter a description.
',submitSuccess:'

Thank you for your feedback. We value every piece of feedback we receive.

We cannot respond individually to every one, but we will use your comments as we strive to improve your experience.

',submitError:'

Sadly an error occurred while sending your feedback. Please try again.

'},onClose:function(){},screenshotStroke:!0,highlightElement:!0,initialBox:!1},b),g=!!window.HTMLCanvasElement,h=".feedback-btn"==f.feedbackButton,i=!1;g&&(h&&a("body").append(f.tpl.initButton),a(document).on("click",f.feedbackButton,function(){h&&a(this).hide(),i||a.getScript(f.html2canvasURL,function(){i=!0});var b=!1,g="",j=a(document).height(),k=a(document).width(),l='
';f.initialBox&&(l+=f.tpl.description),l+=f.tpl.highlighter+f.tpl.overview+'
',a("body").append(l),moduleStyle={position:"absolute",left:"0px",top:"0px"},canvasAttr={width:k,height:j},a("#feedback-module").css(moduleStyle),a("#feedback-canvas").attr(canvasAttr).css("z-index","30000"),f.initialBox||(a("#feedback-highlighter-back").remove(),b=!0,a("#feedback-canvas").css("cursor","crosshair"),a("#feedback-helpers").show(),a("#feedback-welcome").hide(),a("#feedback-highlighter").show()),f.isDraggable&&a("#feedback-highlighter").on("mousedown",function(b){var c=a(this).addClass("feedback-draggable"),d=c.outerHeight(),e=c.outerWidth(),f=c.offset().top+d-b.pageY,g=c.offset().left+e-b.pageX;c.css("z-index",4e4).parents().on("mousemove",function(b){_top=b.pageY+f-d,_left=b.pageX+g-e,_bottom=d-b.pageY,_right=e-b.pageX,_left<0&&(_left=0),_top<0&&(_top=0),_right>a(window).width()&&(_left=a(window).width()-e),_left>a(window).width()-e&&(_left=a(window).width()-e),_bottom>a(document).height()&&(_top=a(document).height()-d),_top>a(document).height()-d&&(_top=a(document).height()-d),a(".feedback-draggable").offset({top:_top,left:_left}).on("mouseup",function(){a(this).removeClass("feedback-draggable")})}),b.preventDefault()}).on("mouseup",function(){a(this).removeClass("feedback-draggable"),a(this).parents().off("mousemove mousedown")});var m=a("#feedback-canvas")[0].getContext("2d");if(m.fillStyle="rgba(102,102,102,0.5)",m.fillRect(0,0,a("#feedback-canvas").width(),a("#feedback-canvas").height()),rect={},drag=!1,highlight=1,post={},f.postBrowserInfo&&(post.browser={},post.browser.appCodeName=navigator.appCodeName,post.browser.appName=navigator.appName,post.browser.appVersion=navigator.appVersion,post.browser.cookieEnabled=navigator.cookieEnabled,post.browser.onLine=navigator.onLine,post.browser.platform=navigator.platform,post.browser.userAgent=navigator.userAgent,post.browser.plugins=[],a.each(navigator.plugins,function(a){post.browser.plugins.push(navigator.plugins[a].name)}),a("#feedback-browser-info").show()),f.postURL&&(post.url=document.URL,a("#feedback-page-info").show()),f.postTimeStamp&&(post.timestamp=(new Date).getTime(),a("#feedback-timestamp").show()),f.postHTML&&(post.html=a("html").html(),a("#feedback-page-structure").show()),f.postBrowserInfo||f.postURL||f.postHTML||a("#feedback-additional-none").show(),a(document).on("mousedown","#feedback-canvas",function(c){b&&(rect.startX=c.pageX-a(this).offset().left,rect.startY=c.pageY-a(this).offset().top,rect.w=0,rect.h=0,drag=!0)}),a(document).on("mouseup",function(){if(b){drag=!1;var c=rect.startY,e=rect.startX,f=rect.w,g=rect.h;if(dtype="highlight",0==f||0==g)return;0>f&&(e+=f,f*=-1),0>g&&(c+=g,g*=-1),c+g>a(document).height()&&(g=a(document).height()-c),e+f>a(document).width()&&(f=a(document).width()-e),0==highlight&&(dtype="blackout"),a("#feedback-helpers").append(''),d(m),rect.w=0}}),a(document).on("mousemove",function(c){b&&drag&&(a("#feedback-highlighter").css("cursor","default"),rect.w=c.pageX-a("#feedback-canvas").offset().left-rect.startX,rect.h=c.pageY-a("#feedback-canvas").offset().top-rect.startY,m.clearRect(0,0,a("#feedback-canvas").width(),a("#feedback-canvas").height()),m.fillStyle="rgba(102,102,102,0.5)",m.fillRect(0,0,a("#feedback-canvas").width(),a("#feedback-canvas").height()),a(".feedback-helper").each(function(){"highlight"==a(this).attr("data-type")&&e(m,parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height())}),1==highlight&&(e(m,rect.startX,rect.startY,rect.w,rect.h),m.clearRect(rect.startX,rect.startY,rect.w,rect.h)),a(".feedback-helper").each(function(){"highlight"==a(this).attr("data-type")&&m.clearRect(parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height())}),a(".feedback-helper").each(function(){"blackout"==a(this).attr("data-type")&&(m.fillStyle="rgba(0,0,0,1)",m.fillRect(parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height()))}),0==highlight&&(m.fillStyle="rgba(0,0,0,0.5)",m.fillRect(rect.startX,rect.startY,rect.w,rect.h)))}),f.highlightElement){var n=[],o=[],p=0;a(document).on("mousemove click","#feedback-canvas",function(c){if(b){d(m),o=[],a("#feedback-canvas").css("cursor","crosshair"),a("* :not(body,script,iframe,div,section,.feedback-btn,#feedback-module *)").each(function(){"true"!==a(this).attr("data-highlighted")&&c.pageX>a(this).offset().left&&c.pageXa(this).offset().top+parseInt(a(this).css("padding-top"),10)&&c.pageY