csmith1865/obscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

text wip

Browse Source
This commit is contained in:
jr-k 2024-08-26 15:53:53 +02:00
parent c9a35ac933
commit 753053e586
5 changed files with 94 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
data/www/js/lib/jquery-more.js vendored
View File

@ -53,5 +53,32 @@ jQuery(function () {
updateCheckboxActiveClass(); updateCheckboxActiveClass();
}); });
$.fn.serializeObject = function() {
const obj = {};
this.find('input, select, textarea').each(function() {
const field = $(this);
const name = field.attr('name');
if (!name) return; // Ignore fields without a name
if (field.is(':checkbox')) {
const isOnOff = field.val() === 'on' || field.val() === '1';
obj[name] = field.is(':checked') ? field.val() : (isOnOff ? false : null);
} else if (field.is(':radio')) {
if (field.is(':checked')) {
obj[name] = field.val();
} else if (!(name in obj)) {
obj[name] = false;
}
} else {
const tryInt = parseInt(field.val());
obj[name] = isNaN(tryInt) ? field.val() : tryInt;
}
});
return obj;
};
}); });
}); });

4
data/www/js/slideshow/content-composition.js
View File

@ -388,8 +388,8 @@ jQuery(document).ready(function ($) {
$(document).on('submit', 'form.form', function (e) { $(document).on('submit', 'form.form', function (e) {
unfocusElements(); unfocusElements();
const layers = getLocationPayload(); const location = getLocationPayload();
$('#content-edit-location').val(JSON.stringify(layers)); $('#content-edit-location').val(JSON.stringify(location));
}); });
function updateZIndexes() { function updateZIndexes() {

11
data/www/js/slideshow/content-text.js
View File

@ -70,6 +70,13 @@ jQuery(document).ready(function ($) {
draw(); draw();
$(document).on('submit', 'form.form', function (e) {
const location = getLocationPayload();
$('#content-edit-location').val(JSON.stringify(location));
});
}); });
const getLocationPayload = function() {
return $('form#elementForm').serializeObject();
};

12
data/www/scss/components/_animation.scss Normal file
View File

@ -0,0 +1,12 @@
@keyframes blink{50%{opacity:0;}}
.cfx-blink{animation:1.5s linear infinite blink;}
.cfx-ffff-speed {animation-delay: 0.1s;}
.cfx-fff-speed {animation-delay: 0.3s;}
.cfx-ff-speed {animation-delay: 0.5s;}
.cfx-f-speed {animation-delay: 0.8s;}
.cfx-m-speed {animation-delay: 1s;}
.cfx-s-speed {animation-delay: 1.3s;}
.cfx-ss-speed {animation-delay: 1.5s;}
.cfx-sss-speed {animation-delay: 1.8s;}
.cfx-ssss-speed {animation-delay: 2s;}
.cfx-sssss-speed {animation-delay: 3s;}

83
views/slideshow/contents/edit-text.jinja.html
View File

@ -117,11 +117,13 @@
Text Text
</h3> </h3>
{% set contentStyles = json_loads(content.location) %}
<div class="form-group"> <div class="form-group">
<label for="elem-text">Text Label</label> <label for="elem-text">Text Label</label>
<div class="widget"> <div class="widget">
<input type="text" id="elem-text" name="textLabel" <input type="text" id="elem-text" name="textLabel"
value="Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !222"> value="{{ contentStyles.textLabel }}">
</div> </div>
</div> </div>
@ -135,7 +137,7 @@
<label for="elem-font-size">Font Size</label> <label for="elem-font-size">Font Size</label>
<div class="widget widget-unit"> <div class="widget widget-unit">
<input type="text" id="elem-font-size" name="fontSize" maxlength="3" <input type="text" id="elem-font-size" name="fontSize" maxlength="3"
class="numeric-input chars-3" value="20"> class="numeric-input chars-3" value="{{ contentStyles.fontSize }}">
<span>pt</span> <span>pt</span>
</div> </div>
</div> </div>
@ -144,7 +146,7 @@
<label for="elem-fg-color">Text Color</label> <label for="elem-fg-color">Text Color</label>
<div class="widget"> <div class="widget">
<input type="text" id="elem-fg-color" name="color" class="color-picker" <input type="text" id="elem-fg-color" name="color" class="color-picker"
data-jscolor="{ value: '#FFFFFFFF', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/> data-jscolor="{ value: '#{{ contentStyles.color }}', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/>
</div> </div>
</div> </div>
</div> </div>
@ -152,26 +154,33 @@
<div class="form-group"> <div class="form-group">
<label for="elem-font-family">Text Font Type</label> <label for="elem-font-family">Text Font Type</label>
<div class="widget"> <div class="widget">
{% set fonts = [
{"value": "Arial", "name": "Arial"},
{"value": "Arial Black", "name": "Arial Black"},
{"value": "Verdana", "name": "Verdana"},
{"value": "Trebuchet MS", "name": "Trebuchet MS"},
{"value": "Georgia", "name": "Georgia"},
{"value": "Times New Roman", "name": "Times New Roman"},
{"value": "Courier New", "name": "Courier New"},
{"value": "Comic Sans MS", "name": "Comic Sans MS"},
{"value": "Impact", "name": "Impact"},
{"value": "Tahoma", "name": "Tahoma"},
{"value": "Gill Sans", "name": "Gill Sans"},
{"value": "Helvetica", "name": "Helvetica"},
{"value": "Optima", "name": "Optima"},
{"value": "Garamond", "name": "Garamond"},
{"value": "Baskerville", "name": "Baskerville"},
{"value": "Copperplate", "name": "Copperplate"},
{"value": "Futura", "name": "Futura"},
{"value": "Monaco", "name": "Monaco"},
{"value": "Andale Mono", "name": "Andale Mono"}
] %}
<select name="fontFamily" id="elem-font-family" class="size-m"> <select name="fontFamily" id="elem-font-family" class="size-m">
<option value="Arial">Arial</option> {% for font in fonts %}
<option value="Arial Black">Arial Black</option> <option value="{{ font.value }}" {% if font.value == contentStyles.fontFamily %}selected="selected"{% endif %}>
<option value="Verdana">Verdana</option> {{ font.name }}
<option value="Trebuchet MS">Trebuchet MS</option> </option>
<option value="Georgia">Georgia</option> {% endfor %}
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Impact">Impact</option>
<option value="Tahoma">Tahoma</option>
<option value="Gill Sans">Gill Sans</option>
<option value="Helvetica">Helvetica</option>
<option value="Optima">Optima</option>
<option value="Garamond">Garamond</option>
<option value="Baskerville">Baskerville</option>
<option value="Copperplate">Copperplate</option>
<option value="Futura">Futura</option>
<option value="Monaco">Monaco</option>
<option value="Andale Mono">Andale Mono</option>
</select> </select>
</div> </div>
</div> </div>
@ -182,16 +191,15 @@
<label for="elem-fg-color">Text Style</label> <label for="elem-fg-color">Text Style</label>
<div class="widget"> <div class="widget">
<div class="checkbox-group"> <div class="checkbox-group">
<input type="checkbox" id="elem-font-bold" name="fontBold" value="bold"> <input type="checkbox" id="elem-font-bold" name="fontBold" value="bold" {{ 'checked' if contentStyles.fontBold }}>
<label for="elem-font-bold" class="btn btn-neutral"> <label for="elem-font-bold" class="btn btn-neutral">
<i class="fa fa-bold"></i> <i class="fa fa-bold"></i>
</label> </label>
<input type="checkbox" id="elem-font-italic" name="fontItalic" value="italic"> <input type="checkbox" id="elem-font-italic" name="fontItalic" value="italic" {{ 'checked' if contentStyles.fontItalic }}>
<label for="elem-font-italic" class="btn btn-neutral"> <label for="elem-font-italic" class="btn btn-neutral">
<i class="fa fa-italic"></i> <i class="fa fa-italic"></i>
</label> </label>
<input type="checkbox" id="elem-text-underline" name="textUnderline" <input type="checkbox" id="elem-text-underline" name="textUnderline" value="underline" {{ 'checked' if contentStyles.textUnderline }}>
value="underline">
<label for="elem-text-underline" class="btn btn-neutral"> <label for="elem-text-underline" class="btn btn-neutral">
<i class="fa fa-underline"></i> <i class="fa fa-underline"></i>
</label> </label>
@ -202,17 +210,15 @@
<label for="elem-fg-color">Text Alignment</label> <label for="elem-fg-color">Text Alignment</label>
<div class="widget"> <div class="widget">
<div class="radio-group"> <div class="radio-group">
<input type="radio" id="elem-text-align-left" name="textAlign" value="left"> <input type="radio" id="elem-text-align-left" name="textAlign" value="left" {{ 'checked' if contentStyles.textAlign == 'left' }}>
<label for="elem-text-align-left" class="btn btn-neutral"> <label for="elem-text-align-left" class="btn btn-neutral">
<i class="fa fa-align-left"></i> <i class="fa fa-align-left"></i>
</label> </label>
<input type="radio" id="elem-text-align-center" name="textAlign" <input type="radio" id="elem-text-align-center" name="textAlign" value="center" {{ 'checked' if contentStyles.textAlign == 'center' }}>
value="center"
checked="checked">
<label for="elem-text-align-center" class="btn btn-neutral"> <label for="elem-text-align-center" class="btn btn-neutral">
<i class="fa fa-align-center"></i> <i class="fa fa-align-center"></i>
</label> </label>
<input type="radio" id="elem-text-align-right" name="textAlign" value="right"> <input type="radio" id="elem-text-align-right" name="textAlign" value="right" {{ 'checked' if contentStyles.textAlign == 'right' }}>
<label for="elem-text-align-right" class="btn btn-neutral"> <label for="elem-text-align-right" class="btn btn-neutral">
<i class="fa fa-align-right"></i> <i class="fa fa-align-right"></i>
</label> </label>
@ -230,7 +236,7 @@
<label for="elem-bg-color">Background Color</label> <label for="elem-bg-color">Background Color</label>
<div class="widget"> <div class="widget">
<input type="text" id="elem-bg-color" name="backgroundColor" class="color-picker" <input type="text" id="elem-bg-color" name="backgroundColor" class="color-picker"
data-jscolor="{ value: '#000000FF', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/> data-jscolor="{ value: '#{{ contentStyles.backgroundColor }}', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/>
</div> </div>
</div> </div>
@ -243,7 +249,7 @@
<label for="elem-scroll-enable">Enable</label> <label for="elem-scroll-enable">Enable</label>
<div class="widget"> <div class="widget">
<div class="toggle"> <div class="toggle">
<input type="checkbox" name="scrollEnable" id="elem-scroll-enable" /> <input type="checkbox" name="scrollEnable" id="elem-scroll-enable" {{ 'checked' if contentStyles.scrollEnable }} />
<label for="elem-scroll-enable"></label> <label for="elem-scroll-enable"></label>
</div> </div>
</div> </div>
@ -252,11 +258,11 @@
<label for="elem-scroll-direction">Direction</label> <label for="elem-scroll-direction">Direction</label>
<div class="widget"> <div class="widget">
<div class="radio-group"> <div class="radio-group">
<input type="radio" id="elem-scroll-direction-left" name="scrollDirection" value="left" checked> <input type="radio" id="elem-scroll-direction-left" name="scrollDirection" value="left" {{ 'checked' if contentStyles.scrollDirection == 'left' }}>
<label for="elem-scroll-direction-left" class="btn btn-neutral"> <label for="elem-scroll-direction-left" class="btn btn-neutral">
<i class="fa fa-arrow-left"></i> <i class="fa fa-arrow-left"></i>
</label> </label>
<input type="radio" id="elem-scroll-direction-right" name="scrollDirection" value="right"> <input type="radio" id="elem-scroll-direction-right" name="scrollDirection" value="right" {{ 'checked' if contentStyles.scrollDirection == 'right' }}>
<label for="elem-scroll-direction-right" class="btn btn-neutral"> <label for="elem-scroll-direction-right" class="btn btn-neutral">
<i class="fa fa-arrow-right"></i> <i class="fa fa-arrow-right"></i>
</label> </label>
@ -266,7 +272,7 @@
<div class="form-group"> <div class="form-group">
<label for="elem-scroll-speed">Speed</label> <label for="elem-scroll-speed">Speed</label>
<div class="widget widget-unit"> <div class="widget widget-unit">
<input type="text" id="elem-scroll-speed" name="scrollSpeed" maxlength="3" class="numeric-input chars-3" value="10"> <input type="text" id="elem-scroll-speed" name="scrollSpeed" maxlength="3" class="numeric-input chars-3" value="{{ contentStyles.scrollSpeed }}">
</div> </div>
</div> </div>
</div> </div>
@ -282,7 +288,7 @@
<label for="elem-single-line">Single Line Only</label> <label for="elem-single-line">Single Line Only</label>
<div class="widget"> <div class="widget">
<div class="toggle"> <div class="toggle">
<input type="checkbox" name="singleLine" id="elem-single-line" /> <input type="checkbox" name="singleLine" id="elem-single-line" {{ 'checked' if contentStyles.singleLine }} />
<label for="elem-single-line"></label> <label for="elem-single-line"></label>
</div> </div>
</div> </div>
@ -291,8 +297,7 @@
<div class="form-group"> <div class="form-group">
<label for="elem-container-margin">Container Margin</label> <label for="elem-container-margin">Container Margin</label>
<div class="widget widget-unit"> <div class="widget widget-unit">
<input type="text" id="elem-container-margin" name="margin" maxlength="3" <input type="text" id="elem-container-margin" name="margin" maxlength="3" class="numeric-input chars-3" value="{{ contentStyles.margin }}">
class="numeric-input chars-3" value="0">
<span>pt</span> <span>pt</span>
</div> </div>
</div> </div>