vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

style: Format capture.js

Browse source 
- Replace one invalid translation syntax usage
This commit is contained in:
Suraj Shetty 2020-10-12 11:32:17 +05:30
parent a147e45d0c
commit b2ae8b16ae
1 changed files with 95 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
frappe/public/js/frappe/ui/capture.js
View file

@ -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/>')
$canvas[0].width = width
$canvas[0].height = height
const $canvas = $('<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: "<b>&times</b>"
action: {
secondary: {
label: '<b>&times</b>'
}
}
})
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 = `<span class="indicator red"/> ${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 = `<span class="indicator red"/> ${
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 = `
<div class="frappe-capture">
<div class="panel panel-default">
<img class="fc-p img-responsive"/>
@ -181,14 +165,7 @@ frappe.ui.Capture.TEMPLATE =
<div class="fc-btu">
<div class="row">
<div class="col-md-6">
${
''
// <div class="pull-left">
// <button class="btn btn-default">
// <small>${__('Take Video')}</small>
// </button>
// </div>
}
${''}
</div>
<div class="col-md-6">
<div class="pull-right">
@ -201,4 +178,4 @@ frappe.ui.Capture.TEMPLATE =
</div>
</div>
</div>
`
`;