custom aspect ratio for composition
This commit is contained in:
jr-k
parent
236b9324f5
commit
0830af4f56
@ -1,25 +1,31 @@
|
||||
|
||||
jQuery(document).ready(function ($) {
|
||||
const contentData = JSON.parse($('#content-edit-location').val() || '{"layers":{}}');
|
||||
const screenRatio = 16/9;
|
||||
|
||||
const DEFAULT_RATIO = "16/9";
|
||||
const contentData = JSON.parse($('#content-edit-location').val() || `{"ratio":"${DEFAULT_RATIO}", "layers":{}}`);
|
||||
let currentElement = null;
|
||||
let elementCounter = 0;
|
||||
let screenRatio = 16/9;
|
||||
|
||||
$('.screen-holder').css({
|
||||
'padding-top': ( 1/ ( screenRatio ) * 100) + '%'
|
||||
});
|
||||
|
||||
const setRatio = function () {
|
||||
const ratioString = $('#elem-screen-ratio').val() || DEFAULT_RATIO;
|
||||
$('.ratio-value').text(ratioString.replace('/', ' / '));
|
||||
screenRatio = evalStringRatio(ratioString);
|
||||
$('.screen-holder').css({ 'padding-top': ( 1/ ( screenRatio ) * 100) + '%' });
|
||||
$('.ratio-value').val(screenRatio);
|
||||
|
||||
$('#screen').css({
|
||||
width: $('#screen').width(),
|
||||
height: $('#screen').height(),
|
||||
height: $('#screen').width() * (1/screenRatio),
|
||||
position: 'relative',
|
||||
}).parents('.screen-holder:eq(0)').css({
|
||||
width: 'auto',
|
||||
'padding-top': '0px'
|
||||
});
|
||||
};
|
||||
setRatio();
|
||||
|
||||
$(document).on('input', '#elem-screen-ratio', function() {
|
||||
setRatio();
|
||||
});
|
||||
|
||||
function createElement(config = null) {
|
||||
const screen = $('#screen');
|
||||
@ -109,7 +115,7 @@ jQuery(document).ready(function ($) {
|
||||
return element;
|
||||
}
|
||||
|
||||
$(document).on('click', '.adjust-aspect-ratio', function(){
|
||||
$(document).on('click', '.element-adjust-aspect-ratio', function(){
|
||||
const metadata = currentElement.data('content-metadata');
|
||||
const ratio = metadata.height / metadata.width;
|
||||
$('#elem-height').val($('#elem-width').val() * ratio).trigger('input');
|
||||
@ -174,7 +180,7 @@ jQuery(document).ready(function ($) {
|
||||
if (contentType === 'picture' || contentType === 'video') {
|
||||
const contentMetadata = $element.data('content-metadata');
|
||||
if (contentMetadata.width && contentMetadata.height) {
|
||||
$('.element-tool.adjust-aspect-ratio-container').removeClass('hidden');
|
||||
$('.element-tool.element-adjust-aspect-ratio-container').removeClass('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -414,7 +420,6 @@ jQuery(document).ready(function ($) {
|
||||
};
|
||||
|
||||
applyElementsFromContent();
|
||||
});
|
||||
|
||||
const getLocationPayload = function() {
|
||||
const screen = $('#screen');
|
||||
@ -459,6 +464,8 @@ const getLocationPayload = function() {
|
||||
});
|
||||
|
||||
return {
|
||||
ratio: $('#elem-screen-ratio').val(),
|
||||
layers: layers
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
@ -71,12 +71,9 @@ jQuery(document).ready(function ($) {
|
||||
|
||||
|
||||
$(document).on('submit', 'form.form', function (e) {
|
||||
const location = getLocationPayload();
|
||||
const location = $('form#elementForm').serializeObject();
|
||||
$('#content-edit-location').val(JSON.stringify(location));
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
const getLocationPayload = function() {
|
||||
return $('form#elementForm').serializeObject();
|
||||
};
|
||||
|
||||
@ -81,3 +81,9 @@ const secondsToHHMMSS = function (seconds) {
|
||||
const secs = seconds % 60;
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const evalStringRatio = function(str) {
|
||||
return str.replace(/(\d+)\/(\d+)/g, function(match, p1, p2) {
|
||||
return (parseInt(p1) / parseInt(p2)).toString();
|
||||
});
|
||||
};
|
||||
|
||||
@ -34,13 +34,14 @@
|
||||
<body>
|
||||
<div id="screen"></div>
|
||||
<script src="{{ STATIC_PREFIX }}js/lib/jquery.min.js"></script>
|
||||
<script src="{{ STATIC_PREFIX }}js/utils.js"></script>
|
||||
<script>
|
||||
const contentData = JSON.parse({{ json_dumps(content.location) | safe }});
|
||||
const baseIframeRoute = '{{ url_for('player', preview_content_id='!c!', autoplay=1, cover=1, transparent=1) }}';
|
||||
|
||||
jQuery(function($) {
|
||||
function setOptimalSize() {
|
||||
const ratio = 16 / 9;
|
||||
const ratio = evalStringRatio(contentData.ratio);
|
||||
const bodyWidth = $('body').width() - 100;
|
||||
const bodyHeight = $('body').height() - 100;
|
||||
|
||||
|
||||
@ -79,6 +79,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% set contentData = json_loads(content.location) %}
|
||||
<div class="horizontal">
|
||||
<div class="form-holder">
|
||||
<form class="form"
|
||||
@ -91,6 +92,26 @@
|
||||
value="{{ content.name }}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="elem-screen-ratio">{{ l.enum_content_type_composition_object_label }}</label>
|
||||
<div class="widget">
|
||||
{% set ratios = [
|
||||
"4/3",
|
||||
"16/9",
|
||||
"16/10",
|
||||
"3/4",
|
||||
"9/16",
|
||||
"10/16",
|
||||
] %}
|
||||
<select name="name" id="elem-screen-ratio" required="required">
|
||||
{% for ratio in ratios %}
|
||||
<option value="{{ ratio }}" {% if ratio == contentData.ratio %}selected="selected"{% endif %}>
|
||||
{{ ratio }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# <div class="form-group">#}
|
||||
{# <label for="">Ratio</label>#}
|
||||
@ -136,7 +157,7 @@
|
||||
<div class="page-content">
|
||||
<div class="inner">
|
||||
<h3 class="main">
|
||||
{{ l.composition_monitor }} <span class="ratio-value badge-inset">16 / 9</span>
|
||||
{{ l.composition_monitor }} <span class="ratio-value badge-inset"></span>
|
||||
</h3>
|
||||
|
||||
<div class="toolbar">
|
||||
@ -199,8 +220,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal fx-end element-tool adjust-aspect-ratio-container hidden">
|
||||
<button type="button" class="btn btn-wire-neutral adjust-aspect-ratio">
|
||||
<div class="horizontal fx-end element-tool element-adjust-aspect-ratio-container hidden">
|
||||
<button type="button" class="btn btn-wire-neutral element-adjust-aspect-ratio">
|
||||
<i class="fa fa-solid fa-down-left-and-up-right-to-center icon-left"></i> {{ l.composition_element_match_content_aspect_ratio }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -56,8 +56,20 @@
|
||||
<div class="form-group">
|
||||
<label for="" class="object-label"></label>
|
||||
<div class="widget">
|
||||
{% set ratios = [
|
||||
"16/9",
|
||||
"16/10",
|
||||
"4/3",
|
||||
"9/16",
|
||||
"10/16",
|
||||
"3/4",
|
||||
] %}
|
||||
<select name="object" data-input-type="composition" class="content-object-input size-m">
|
||||
<option value="16/9">16/9</option>
|
||||
{% for ratio in ratios %}
|
||||
<option value="{{ ratio }}">
|
||||
{{ ratio }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user