prepare for dynamic ratio
This commit is contained in:
jr-k
parent
21162495cb
commit
3b1e78ae02
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,7 +1,17 @@
|
||||
|
||||
jQuery(document).ready(function ($) {
|
||||
const contentData = JSON.parse($('#content-edit-location').val());
|
||||
const screenRatio = 16/9;
|
||||
|
||||
let currentElement = null;
|
||||
let elementCounter = 0;
|
||||
|
||||
$('.screen-holder').css({
|
||||
'padding-top': ( 1/ ( screenRatio ) * 100) + '%'
|
||||
});
|
||||
|
||||
$('.ratio-value').val(screenRatio);
|
||||
|
||||
$('#screen').css({
|
||||
width: $('#screen').width(),
|
||||
height: $('#screen').height(),
|
||||
@ -348,7 +358,7 @@ jQuery(document).ready(function ($) {
|
||||
|
||||
$(document).on('submit', 'form.form', function (e) {
|
||||
unfocusElements();
|
||||
const layers = getLayersPayload();
|
||||
const layers = getLocationPayload();
|
||||
$('#content-edit-location').val(JSON.stringify(layers));
|
||||
});
|
||||
|
||||
@ -367,16 +377,15 @@ jQuery(document).ready(function ($) {
|
||||
});
|
||||
|
||||
const applyElementsFromContent = function() {
|
||||
const contentData = JSON.parse($('#content-edit-location').val());
|
||||
for (let i = 0; i < contentData.length; i++) {
|
||||
createElement(contentData[i]);
|
||||
for (let i = 0; i < contentData.layers.length; i++) {
|
||||
createElement(contentData.layers[i]);
|
||||
}
|
||||
};
|
||||
|
||||
applyElementsFromContent();
|
||||
});
|
||||
|
||||
const getLayersPayload = function() {
|
||||
const getLocationPayload = function() {
|
||||
const screen = $('#screen');
|
||||
const screenWidth = screen.width();
|
||||
const screenHeight = screen.height();
|
||||
@ -418,5 +427,7 @@ const getLayersPayload = function() {
|
||||
return parseInt(b.zIndex) - parseInt(a.zIndex);
|
||||
});
|
||||
|
||||
return layers;
|
||||
return {
|
||||
layers: layers
|
||||
};
|
||||
};
|
||||
@ -1,32 +1,10 @@
|
||||
a.badge,
|
||||
.badge {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px 5px;
|
||||
border-radius: $baseRadius;
|
||||
font-size: 12px;
|
||||
background: rgba($gscaleF, .1);
|
||||
border: 1px solid transparent;
|
||||
color: $gscaleF;
|
||||
}
|
||||
|
||||
a.badge:hover {
|
||||
color: $gscaleF;
|
||||
border: 1px solid rgba($gscaleF, .4);
|
||||
}
|
||||
|
||||
.panel-inactive .badge {
|
||||
background: rgba($gscale7, .1);
|
||||
color: $gscale7;
|
||||
}
|
||||
|
||||
.panel-inactive a.badge:hover {
|
||||
color: $gscale7;
|
||||
border: 1px solid rgba($gscale7,.2);
|
||||
}
|
||||
|
||||
.badge.anonymous {
|
||||
opacity: .2;
|
||||
.badge-inset {
|
||||
display: inline;
|
||||
color: $gscaleA;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
background: $gscale0;
|
||||
border: 1px solid $gscale3;
|
||||
border-radius: $baseRadius;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
@import 'components/tiles';
|
||||
@import 'components/empty';
|
||||
@import 'components/switches';
|
||||
//@import 'components/badges';
|
||||
@import 'components/badges';
|
||||
|
||||
// Import form styles
|
||||
@import 'forms/forms';
|
||||
|
||||
@ -70,7 +70,6 @@
|
||||
border-radius: $baseRadius;
|
||||
outline: 4px solid rgba($gscaleF, .1);
|
||||
|
||||
|
||||
.screen {
|
||||
background-color: #ddd;
|
||||
position: absolute;
|
||||
|
||||
@ -102,6 +102,6 @@ class ContentType(Enum):
|
||||
elif value == ContentType.EXTERNAL_STORAGE:
|
||||
return 'other'
|
||||
elif value == ContentType.COMPOSITION:
|
||||
return 'warning'
|
||||
return 'purple'
|
||||
|
||||
return 'neutral'
|
||||
|
||||
@ -35,7 +35,8 @@
|
||||
<div id="screen"></div>
|
||||
<script src="{{ STATIC_PREFIX }}js/lib/jquery.min.js"></script>
|
||||
<script>
|
||||
const base_iframe_route = '{{ url_for('player', preview_content_id='!c!', autoplay=1, cover=1) }}';
|
||||
const contentData = JSON.parse({{ json_dumps(content.location) | safe }});
|
||||
const baseIframeRoute = '{{ url_for('player', preview_content_id='!c!', autoplay=1, cover=1) }}';
|
||||
|
||||
jQuery(function($) {
|
||||
function setOptimalSize() {
|
||||
@ -78,7 +79,7 @@
|
||||
//x = Math.round(Math.max(0, Math.min(x, screenWidth - elementWidth)));
|
||||
//y = Math.round(Math.max(0, Math.min(y, screenHeight - elementHeight)));
|
||||
|
||||
const element = $('<iframe class="element" id="element-' + zIndex + '" data-id="' + zIndex + '" src="'+base_iframe_route.replace('!c!', config.contentId)+'" frameborder="0"></iframe>');
|
||||
const element = $('<iframe class="element" id="element-' + zIndex + '" data-id="' + zIndex + '" src="'+baseIframeRoute.replace('!c!', config.contentId)+'" frameborder="0"></iframe>');
|
||||
|
||||
element.css({
|
||||
left: x,
|
||||
@ -97,10 +98,9 @@
|
||||
const applyElementsFromContent = function() {
|
||||
$('#screen').html('');
|
||||
|
||||
const contentData = JSON.parse({{ json_dumps(content.location) | safe }});
|
||||
for (let i = 0; i < contentData.length; i++) {
|
||||
if (contentData[i].contentId !== null) {
|
||||
createElement(contentData[i]);
|
||||
for (let i = 0; i < contentData.layers.length; i++) {
|
||||
if (contentData.layers[i].contentId !== null) {
|
||||
createElement(contentData.layers[i]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -117,7 +117,7 @@
|
||||
<div class="page-content">
|
||||
<div class="inner">
|
||||
<h3 class="main">
|
||||
{{ l.composition_monitor }} 16/9
|
||||
{{ l.composition_monitor }} <span class="ratio-value badge-inset">16 / 9</span>
|
||||
</h3>
|
||||
|
||||
<div class="toolbar">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user