diff --git a/frappe/public/js/frappe/ui/capture.js b/frappe/public/js/frappe/ui/capture.js index 2161970bf7..f08257d394 100644 --- a/frappe/public/js/frappe/ui/capture.js +++ b/frappe/public/js/frappe/ui/capture.js @@ -3,155 +3,139 @@ /** * @description Converts a canvas, image or a video to a data URL string. - * + * * @param {HTMLElement} element - canvas, img or video. * @returns {string} - The data URL string. - * + * * @example * frappe._.get_data_uri(video) * // returns "data:image/pngbase64,..." */ -frappe._.get_data_uri = element => -{ - const $element = $(element) - const width = $element.width() - const height = $element.height() +frappe._.get_data_uri = element => { + const $element = $(element); + const width = $element.width(); + const height = $element.height(); - const $canvas = $('') - $canvas[0].width = width - $canvas[0].height = height + const $canvas = $(''); + $canvas[0].width = width; + $canvas[0].height = height; - const context = $canvas[0].getContext('2d') - context.drawImage($element[0], 0, 0, width, height) - - const data_uri = $canvas[0].toDataURL('image/png') + const context = $canvas[0].getContext('2d'); + context.drawImage($element[0], 0, 0, width, height); - return data_uri -} + const data_uri = $canvas[0].toDataURL('image/png'); + + return data_uri; +}; /** * @description Frappe's Capture object. - * + * * @example * const capture = frappe.ui.Capture() * capture.show() - * + * * capture.click((data_uri) => { * // do stuff * }) - * + * * @see https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos */ -frappe.ui.Capture = class -{ - constructor (options = { }) - { - this.options = frappe.ui.Capture.OPTIONS - this.set_options(options) +frappe.ui.Capture = class { + constructor(options = {}) { + this.options = frappe.ui.Capture.OPTIONS; + this.set_options(options); } - - set_options (options) - { - this.options = { ...frappe.ui.Capture.OPTIONS, ...options } - - return this + + set_options(options) { + this.options = { ...frappe.ui.Capture.OPTIONS, ...options }; + + return this; } - - render ( ) - { - return navigator.mediaDevices.getUserMedia({ video: true }).then(stream => - { - this.dialog = new frappe.ui.Dialog({ - title: this.options.title, + + render() { + return navigator.mediaDevices.getUserMedia({ video: true }).then(stream => { + this.dialog = new frappe.ui.Dialog({ + title: this.options.title, animate: this.options.animate, - action: - { - secondary: - { - label: "×" + action: { + secondary: { + label: '×' } } - }) - - const $e = $(frappe.ui.Capture.TEMPLATE) - - const video = $e.find('video')[0] - video.srcObject = stream - video.play() - - const $container = $(this.dialog.body) - $container.html($e) - - $e.find('.fc-btf').hide() + }); - $e.find('.fc-bcp').click(() => - { - const data_url = frappe._.get_data_uri(video) - $e.find('.fc-p').attr('src', data_url) + const $e = $(frappe.ui.Capture.TEMPLATE); - $e.find('.fc-s').hide() - $e.find('.fc-p').show() + const video = $e.find('video')[0]; + video.srcObject = stream; + video.play(); - $e.find('.fc-btu').hide() - $e.find('.fc-btf').show() - }) + const $container = $(this.dialog.body); + $container.html($e); - $e.find('.fc-br').click(() => - { - $e.find('.fc-p').hide() - $e.find('.fc-s').show() + $e.find('.fc-btf').hide(); - $e.find('.fc-btf').hide() - $e.find('.fc-btu').show() - }) + $e.find('.fc-bcp').click(() => { + const data_url = frappe._.get_data_uri(video); + $e.find('.fc-p').attr('src', data_url); - $e.find('.fc-bs').click(() => - { - const data_url = frappe._.get_data_uri(video) - this.hide() - - if (this.callback) - this.callback(data_url) - }) - }) + $e.find('.fc-s').hide(); + $e.find('.fc-p').show(); + + $e.find('.fc-btu').hide(); + $e.find('.fc-btf').show(); + }); + + $e.find('.fc-br').click(() => { + $e.find('.fc-p').hide(); + $e.find('.fc-s').show(); + + $e.find('.fc-btf').hide(); + $e.find('.fc-btu').show(); + }); + + $e.find('.fc-bs').click(() => { + const data_url = frappe._.get_data_uri(video); + this.hide(); + + if (this.callback) this.callback(data_url); + }); + }); } - show ( ) - { - this.render().then(() => - { - this.dialog.show() - }).catch(err => { - if ( this.options.error ) - { - const alert = ` ${frappe.ui.Capture.ERR_MESSAGE}` - frappe.show_alert(alert, 3) - } + show() { + this.render() + .then(() => { + this.dialog.show(); + }) + .catch(err => { + if (this.options.error) { + const alert = ` ${ + frappe.ui.Capture.ERR_MESSAGE + }`; + frappe.show_alert(alert, 3); + } - throw err - }) + throw err; + }); } - hide ( ) - { - if ( this.dialog ) - this.dialog.hide() + hide() { + if (this.dialog) this.dialog.hide(); } - submit (fn) - { - this.callback = fn + submit(fn) { + this.callback = fn; } -} -frappe.ui.Capture.OPTIONS = -{ - title: __(`Camera`), +}; +frappe.ui.Capture.OPTIONS = { + title: __("Camera"), animate: false, - error: false, -} -frappe.ui.Capture.ERR_MESSAGE = __("Unable to load camera.") -frappe.ui.Capture.TEMPLATE = -` + error: false +}; +frappe.ui.Capture.ERR_MESSAGE = __('Unable to load camera.'); +frappe.ui.Capture.TEMPLATE = `
@@ -181,14 +165,7 @@ frappe.ui.Capture.TEMPLATE =
- ${ - '' - //
- // - //
- } + ${''}
@@ -201,4 +178,4 @@ frappe.ui.Capture.TEMPLATE =
-` \ No newline at end of file +`;