mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
ADD web_widget_model_viewer
[UPD] Update web_widget_model_viewer.pot [UPD] README.rst
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
// Copyright 2020 Lorenzo Battistini @ TAKOBI
|
||||
// Copyright 2020 Andrea Piovesana @ Openindustry.it
|
||||
odoo.define('web_widget_model_viewer.FieldBinaryModelViewer', function (require) {
|
||||
"use strict";
|
||||
|
||||
var BasicFields = require('web.basic_fields');
|
||||
var core = require('web.core');
|
||||
var registry = require('web.field_registry');
|
||||
var session = require('web.session');
|
||||
var utils = require('web.utils');
|
||||
var _t = core._t;
|
||||
var qweb = core.qweb;
|
||||
|
||||
var FieldBinaryModelViewer = BasicFields.FieldBinaryFile.extend({
|
||||
template: 'FieldBinaryModelViewer',
|
||||
events: _.extend({}, BasicFields.FieldBinaryFile.prototype.events, {
|
||||
'click': function () {
|
||||
if (this.mode === "readonly") {
|
||||
this.trigger_up('bounce_edit');
|
||||
}
|
||||
},
|
||||
'click #model-viewer-fullscreen': 'fullscreen',
|
||||
}),
|
||||
supportedFieldTypes: ['binary'],
|
||||
init: function () {
|
||||
this._super.apply(this, arguments);
|
||||
var max_upload_size = this.attrs.max_upload_size;
|
||||
if (max_upload_size) {
|
||||
this.max_upload_size = parseInt(max_upload_size) * 1024 * 1024;
|
||||
}
|
||||
else {
|
||||
this.max_upload_size = 250 * 1024 * 1024; // 250M
|
||||
}
|
||||
},
|
||||
_render: function () {
|
||||
var self = this;
|
||||
var url = "";
|
||||
if (this.value) {
|
||||
if (!utils.is_bin_size(this.value)) {
|
||||
url = 'data:model/gltf-binary;base64,' + this.value;
|
||||
} else {
|
||||
url = session.url('/web/content', {
|
||||
model: this.model,
|
||||
id: JSON.stringify(this.res_id),
|
||||
field: this.name,
|
||||
});
|
||||
}
|
||||
}
|
||||
var $glb = $(qweb.render("FieldBinaryModelViewer-glb", {widget: this, url: url}));
|
||||
var style = this.attrs.style;
|
||||
if (style) {
|
||||
$glb.attr('style', style);
|
||||
}
|
||||
this.$('> model-viewer').remove();
|
||||
this.$el.prepend($glb);
|
||||
$glb.on('error', function () {
|
||||
self._clearFile();
|
||||
$glb.attr('src', "");
|
||||
self.do_warn(_t("3D model"), _t("Could not display the selected model."));
|
||||
});
|
||||
},
|
||||
fullscreen: function (ev) {
|
||||
var isFullscreenAvailable = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || false;
|
||||
var modelViewerElem = ev.target.parentElement.parentElement.parentElement;
|
||||
if (isFullscreenAvailable) {
|
||||
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
|
||||
if (fullscreenElement) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) { /* Firefox */
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.msExitFullscreen) { /* IE/Edge */
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (modelViewerElem.requestFullscreen) {
|
||||
modelViewerElem.requestFullscreen();
|
||||
} else if (modelViewerElem.mozRequestFullScreen) { /* Firefox */
|
||||
modelViewerElem.mozRequestFullScreen();
|
||||
} else if (modelViewerElem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
|
||||
modelViewerElem.webkitRequestFullscreen();
|
||||
} else if (modelViewerElem.msRequestFullscreen) { /* IE/Edge */
|
||||
modelViewerElem.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.error("ERROR : full screen not supported by web browser");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
registry.add('model_viewer', FieldBinaryModelViewer);
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
<t t-name="FieldBinaryModelViewer">
|
||||
<div class="o_field_image" aria-atomic="true" style="background-color: #FFFFFF;">
|
||||
<t t-if="widget.mode !== 'readonly'">
|
||||
<div class="o_form_image_controls">
|
||||
<button class="fa fa-pencil float-left o_select_file_button fa-2x" title="Edit" aria-label="Edit"/>
|
||||
<button class="fa fa-trash-o float-right o_clear_file_button fa-2x" title="Clear" aria-label="Clear"/>
|
||||
|
||||
<span class="o_form_binary_progress">Uploading...</span>
|
||||
<t t-call="HiddenInputFile">
|
||||
<t t-set="image_only" t-value="true"/>
|
||||
<t t-set="fileupload_id" t-value="widget.fileupload_id"/>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="FieldBinaryModelViewer-glb">
|
||||
<model-viewer
|
||||
t-att-src='url'
|
||||
t-att-border="widget.readonly ? 0 : 1"
|
||||
t-att-name="widget.name"
|
||||
alt="3D model"
|
||||
auto-rotate="1"
|
||||
camera-controls="1">
|
||||
<div class="text-center mt-2 mb-2 mr-2">
|
||||
<span id="model-viewer-fullscreen" title="View fullscreen" role="img" aria-label="Fullscreen">
|
||||
<i class="fa fa-arrows-alt fa-2x"/>
|
||||
</span>
|
||||
</div>
|
||||
</model-viewer>
|
||||
</t>
|
||||
</templates>
|
||||
Reference in New Issue
Block a user