ng-feedback
Version:
An angular directive for sending feedback featuring Angular 6, Html2canvas, Angular Material, Rxjs, inspired by Google send feedback, based on angular-cli.
126 lines (125 loc) • 10.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Injectable } from '@angular/core';
import html2canvas from 'html2canvas';
import { Subject } from 'rxjs';
export class FeedbackService {
constructor() {
this.initialVariables = {};
this.highlightedColor = 'yellow';
this.hiddenColor = 'black';
this.screenshotCanvasSource = new Subject();
this.screenshotCanvas$ = this.screenshotCanvasSource.asObservable();
this.feedbackSource = new Subject();
this.feedback$ = this.feedbackSource.asObservable();
this.isDraggingToolbarSource = new Subject();
this.isDraggingToolbar$ = this.isDraggingToolbarSource.asObservable();
}
/**
* @return {?}
*/
initScreenshotCanvas() {
/** @type {?} */
const that = this;
/** @type {?} */
const body = document.body;
html2canvas(body, {
logging: false,
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
x: document.documentElement.scrollLeft,
y: document.documentElement.scrollTop,
allowTaint: true
}).then(bodyCanvas => {
this.screenshotCanvasSource.next(bodyCanvas);
});
}
/**
* @param {?} canvas
* @return {?}
*/
setCanvas(canvas) {
this.screenshotCanvasSource.next(canvas);
}
/**
* @param {?} feedback
* @return {?}
*/
setFeedback(feedback) {
this.feedbackSource.next(feedback);
}
/**
* @param {?} isDragging
* @return {?}
*/
setIsDraggingToolbar(isDragging) {
this.isDraggingToolbarSource.next(isDragging);
}
/**
* @param {?} canvas
* @return {?}
*/
getImgEle(canvas) {
/** @type {?} */
const img = canvas.toDataURL('image/png');
/** @type {?} */
const imageEle = document.createElement('img');
imageEle.setAttribute('src', img);
Object.assign(imageEle.style, {
position: 'absolute',
top: '50%',
right: '0',
left: '0',
margin: '0 auto',
maxHeight: '100%',
maxWidth: '100%',
transform: 'translateY(-50%)'
});
return imageEle;
}
/**
* @return {?}
*/
hideBackDrop() {
/** @type {?} */
const dialogBackDrop = /** @type {?} */ (document.getElementsByClassName('dialogBackDrop')[0]);
dialogBackDrop.style.backgroundColor = 'initial';
}
/**
* @return {?}
*/
showBackDrop() {
/** @type {?} */
const dialogBackDrop = /** @type {?} */ (document.getElementsByClassName('dialogBackDrop')[0]);
if (!dialogBackDrop.getAttribute('data-html2canvas-ignore')) {
dialogBackDrop.setAttribute('data-html2canvas-ignore', 'true');
}
dialogBackDrop.style.backgroundColor = 'rgba(0, 0, 0, .288)';
}
}
FeedbackService.decorators = [
{ type: Injectable }
];
if (false) {
/** @type {?} */
FeedbackService.prototype.initialVariables;
/** @type {?} */
FeedbackService.prototype.highlightedColor;
/** @type {?} */
FeedbackService.prototype.hiddenColor;
/** @type {?} */
FeedbackService.prototype.screenshotCanvasSource;
/** @type {?} */
FeedbackService.prototype.screenshotCanvas$;
/** @type {?} */
FeedbackService.prototype.feedbackSource;
/** @type {?} */
FeedbackService.prototype.feedback$;
/** @type {?} */
FeedbackService.prototype.isDraggingToolbarSource;
/** @type {?} */
FeedbackService.prototype.isDraggingToolbar$;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVlZGJhY2suc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLWZlZWRiYWNrLyIsInNvdXJjZXMiOlsibGliL2ZlZWRiYWNrLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxXQUFXLE1BQU0sYUFBYSxDQUFDO0FBQ3RDLE9BQU8sRUFBQyxPQUFPLEVBQWEsTUFBTSxNQUFNLENBQUM7QUFJekMsTUFBTTs7Z0NBQzhCLEVBQUU7Z0NBQ1YsUUFBUTsyQkFDYixPQUFPO3NDQUNLLElBQUksT0FBTyxFQUFxQjtpQ0FDUCxJQUFJLENBQUMsc0JBQXNCLENBQUMsWUFBWSxFQUFFOzhCQUUzRSxJQUFJLE9BQU8sRUFBWTt5QkFDUCxJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksRUFBRTt1Q0FFekMsSUFBSSxPQUFPLEVBQVc7a0NBQ1AsSUFBSSxDQUFDLHVCQUF1QixDQUFDLFlBQVksRUFBRTs7Ozs7SUFHckYsb0JBQW9COztRQUN6QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUM7O1FBQ2xCLE1BQU0sSUFBSSxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUM7UUFDM0IsV0FBVyxDQUFDLElBQUksRUFBRTtZQUNoQixPQUFPLEVBQUUsS0FBSztZQUNkLEtBQUssRUFBRSxRQUFRLENBQUMsZUFBZSxDQUFDLFdBQVc7WUFDM0MsTUFBTSxFQUFFLFFBQVEsQ0FBQyxlQUFlLENBQUMsWUFBWTtZQUM3QyxDQUFDLEVBQUUsUUFBUSxDQUFDLGVBQWUsQ0FBQyxVQUFVO1lBQ3RDLENBQUMsRUFBRSxRQUFRLENBQUMsZUFBZSxDQUFDLFNBQVM7WUFDckMsVUFBVSxFQUFHLElBQUk7U0FDbEIsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNuQixJQUFJLENBQUMsc0JBQXNCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1NBQzlDLENBQUMsQ0FBQzs7Ozs7O0lBR0UsU0FBUyxDQUFDLE1BQXlCO1FBQ3hDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7Ozs7OztJQUdwQyxXQUFXLENBQUMsUUFBa0I7UUFDbkMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7Ozs7OztJQUc5QixvQkFBb0IsQ0FBQyxVQUFtQjtRQUM3QyxJQUFJLENBQUMsdUJBQXVCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDOzs7Ozs7SUFHekMsU0FBUyxDQUFDLE1BQU07O1FBQ3JCLE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLENBQ007O1FBRC9DLE1BQ00sUUFBUSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDL0MsUUFBUSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDbEMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFO1lBQzVCLFFBQVEsRUFBRSxVQUFVO1lBQ3BCLEdBQUcsRUFBRSxLQUFLO1lBQ1YsS0FBSyxFQUFFLEdBQUc7WUFDVixJQUFJLEVBQUUsR0FBRztZQUNULE1BQU0sRUFBRSxRQUFRO1lBQ2hCLFNBQVMsRUFBRSxNQUFNO1lBQ2pCLFFBQVEsRUFBRSxNQUFNO1lBQ2hCLFNBQVMsRUFBRSxrQkFBa0I7U0FDOUIsQ0FBQyxDQUFDO1FBQ0gsT0FBTyxRQUFRLENBQUM7Ozs7O0lBR1gsWUFBWTs7UUFDakIsTUFBTSxjQUFjLHFCQUFHLFFBQVEsQ0FBQyxzQkFBc0IsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsQ0FBZ0IsRUFBQztRQUMzRixjQUFjLENBQUMsS0FBSyxDQUFDLGVBQWUsR0FBRyxTQUFTLENBQUM7Ozs7O0lBRzVDLFlBQVk7O1FBQ2pCLE1BQU0sY0FBYyxxQkFBRyxRQUFRLENBQUMsc0JBQXNCLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQWdCLEVBQUM7UUFDM0YsSUFBSSxDQUFDLGNBQWMsQ0FBQyxZQUFZLENBQUMseUJBQXlCLENBQUMsRUFBRTtZQUMzRCxjQUFjLENBQUMsWUFBWSxDQUFDLHlCQUF5QixFQUFFLE1BQU0sQ0FBQyxDQUFDO1NBQ2hFO1FBQ0QsY0FBYyxDQUFDLEtBQUssQ0FBQyxlQUFlLEdBQUcscUJBQXFCLENBQUM7Ozs7WUFyRWhFLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0luamVjdGFibGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgaHRtbDJjYW52YXMgZnJvbSAnaHRtbDJjYW52YXMnO1xyXG5pbXBvcnQge1N1YmplY3QsIE9ic2VydmFibGV9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQge0ZlZWRiYWNrfSBmcm9tICcuL2VudGl0eS9mZWVkYmFjayc7IC8vIGltcG9ydCBPYnNlcnZhYmxlIHRvIHNvbHZlIGJ1aWxkIGlzc3VlXHJcblxyXG5ASW5qZWN0YWJsZSgpXHJcbmV4cG9ydCBjbGFzcyBGZWVkYmFja1NlcnZpY2Uge1xyXG4gIHB1YmxpYyBpbml0aWFsVmFyaWFibGVzOiBvYmplY3QgPSB7fTtcclxuICBwdWJsaWMgaGlnaGxpZ2h0ZWRDb2xvciA9ICd5ZWxsb3cnO1xyXG4gIHB1YmxpYyBoaWRkZW5Db2xvciA9ICdibGFjayc7XHJcbiAgcHJpdmF0ZSBzY3JlZW5zaG90Q2FudmFzU291cmNlID0gbmV3IFN1YmplY3Q8SFRNTENhbnZhc0VsZW1lbnQ+KCk7XHJcbiAgcHVibGljIHNjcmVlbnNob3RDYW52YXMkOiBPYnNlcnZhYmxlPEhUTUxDYW52YXNFbGVtZW50PiA9IHRoaXMuc2NyZWVuc2hvdENhbnZhc1NvdXJjZS5hc09ic2VydmFibGUoKTtcclxuXHJcbiAgcHJpdmF0ZSBmZWVkYmFja1NvdXJjZSA9IG5ldyBTdWJqZWN0PEZlZWRiYWNrPigpO1xyXG4gIHB1YmxpYyBmZWVkYmFjayQ6IE9ic2VydmFibGU8RmVlZGJhY2s+ID0gdGhpcy5mZWVkYmFja1NvdXJjZS5hc09ic2VydmFibGUoKTtcclxuXHJcbiAgcHJpdmF0ZSBpc0RyYWdnaW5nVG9vbGJhclNvdXJjZSA9IG5ldyBTdWJqZWN0PGJvb2xlYW4+KCk7XHJcbiAgcHVibGljIGlzRHJhZ2dpbmdUb29sYmFyJDogT2JzZXJ2YWJsZTxib29sZWFuPiA9IHRoaXMuaXNEcmFnZ2luZ1Rvb2xiYXJTb3VyY2UuYXNPYnNlcnZhYmxlKCk7XHJcblxyXG5cclxuICBwdWJsaWMgaW5pdFNjcmVlbnNob3RDYW52YXMoKSB7XHJcbiAgICBjb25zdCB0aGF0ID0gdGhpcztcclxuICAgIGNvbnN0IGJvZHkgPSBkb2N1bWVudC5ib2R5O1xyXG4gICAgaHRtbDJjYW52YXMoYm9keSwge1xyXG4gICAgICBsb2dnaW5nOiBmYWxzZSxcclxuICAgICAgd2lkdGg6IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5jbGllbnRXaWR0aCxcclxuICAgICAgaGVpZ2h0OiBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xpZW50SGVpZ2h0LFxyXG4gICAgICB4OiBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc2Nyb2xsTGVmdCxcclxuICAgICAgeTogZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnNjcm9sbFRvcCxcclxuICAgICAgYWxsb3dUYWludCA6IHRydWVcclxuICAgIH0pLnRoZW4oYm9keUNhbnZhcyA9PiB7XHJcbiAgICAgIHRoaXMuc2NyZWVuc2hvdENhbnZhc1NvdXJjZS5uZXh0KGJvZHlDYW52YXMpO1xyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgc2V0Q2FudmFzKGNhbnZhczogSFRNTENhbnZhc0VsZW1lbnQpOiB2b2lkIHtcclxuICAgIHRoaXMuc2NyZWVuc2hvdENhbnZhc1NvdXJjZS5uZXh0KGNhbnZhcyk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgc2V0RmVlZGJhY2soZmVlZGJhY2s6IEZlZWRiYWNrKTogdm9pZCB7XHJcbiAgICB0aGlzLmZlZWRiYWNrU291cmNlLm5leHQoZmVlZGJhY2spO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHNldElzRHJhZ2dpbmdUb29sYmFyKGlzRHJhZ2dpbmc6IGJvb2xlYW4pOiB2b2lkIHtcclxuICAgIHRoaXMuaXNEcmFnZ2luZ1Rvb2xiYXJTb3VyY2UubmV4dChpc0RyYWdnaW5nKTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBnZXRJbWdFbGUoY2FudmFzKTogSFRNTEVsZW1lbnQge1xyXG4gICAgY29uc3QgaW1nID0gY2FudmFzLnRvRGF0YVVSTCgnaW1hZ2UvcG5nJyksXHJcbiAgICAgICAgICBpbWFnZUVsZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2ltZycpO1xyXG4gICAgaW1hZ2VFbGUuc2V0QXR0cmlidXRlKCdzcmMnLCBpbWcpO1xyXG4gICAgT2JqZWN0LmFzc2lnbihpbWFnZUVsZS5zdHlsZSwge1xyXG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcclxuICAgICAgdG9wOiAnNTAlJyxcclxuICAgICAgcmlnaHQ6ICcwJyxcclxuICAgICAgbGVmdDogJzAnLFxyXG4gICAgICBtYXJnaW46ICcwIGF1dG8nLFxyXG4gICAgICBtYXhIZWlnaHQ6ICcxMDAlJyxcclxuICAgICAgbWF4V2lkdGg6ICcxMDAlJyxcclxuICAgICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWSgtNTAlKSdcclxuICAgIH0pO1xyXG4gICAgcmV0dXJuIGltYWdlRWxlO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGhpZGVCYWNrRHJvcCgpIHtcclxuICAgIGNvbnN0IGRpYWxvZ0JhY2tEcm9wID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnZGlhbG9nQmFja0Ryb3AnKVswXSBhcyBIVE1MRWxlbWVudDtcclxuICAgIGRpYWxvZ0JhY2tEcm9wLnN0eWxlLmJhY2tncm91bmRDb2xvciA9ICdpbml0aWFsJztcclxuICB9XHJcblxyXG4gIHB1YmxpYyBzaG93QmFja0Ryb3AoKSB7XHJcbiAgICBjb25zdCBkaWFsb2dCYWNrRHJvcCA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ2RpYWxvZ0JhY2tEcm9wJylbMF0gYXMgSFRNTEVsZW1lbnQ7XHJcbiAgICBpZiAoIWRpYWxvZ0JhY2tEcm9wLmdldEF0dHJpYnV0ZSgnZGF0YS1odG1sMmNhbnZhcy1pZ25vcmUnKSkge1xyXG4gICAgICBkaWFsb2dCYWNrRHJvcC5zZXRBdHRyaWJ1dGUoJ2RhdGEtaHRtbDJjYW52YXMtaWdub3JlJywgJ3RydWUnKTtcclxuICAgIH1cclxuICAgIGRpYWxvZ0JhY2tEcm9wLnN0eWxlLmJhY2tncm91bmRDb2xvciA9ICdyZ2JhKDAsIDAsIDAsIC4yODgpJztcclxuICB9XHJcbn1cclxuIl19