Skip to content

Commit 8a6ae82

Browse files
OpenHypervideoOpenHypervideo
committed
Allow editing all ContentView properties in UI
1 parent feb04ca commit 8a6ae82

6 files changed

Lines changed: 36 additions & 38 deletions

File tree

‎src/_shared/modules/Database/module.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1385,14 +1385,13 @@
13851385
if (cvData.type === 'Transcript' && cvData.transcriptSource) {
13861386
var subs = subtitles[cvData.transcriptSource];
13871387
if (subs && subs.cues) {
1388-
var html = '<div class="transcriptContainer">';
1388+
var html = '';
13891389
for (var c = 0; c < subs.cues.length; c++) {
13901390
var cue = subs.cues[c];
13911391
html += '<span class="timebased" data-start="' + cue.startTime + '" data-end="' + cue.endTime + '">'
13921392
+ cue.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
13931393
+ ' </span>';
13941394
}
1395-
html += '</div>';
13961395
layoutArea[areaKey][cv] = {
13971396
type: 'CustomHTML',
13981397
name: cvData.name,

‎src/_shared/modules/Localization/locale/de.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ window.FrameTrail_L10n['de'] = {
312312
"SettingsQuizQuestionLabel": "Frage",
313313
"SettingsSelectColorTheme": "Farbschema auswählen",
314314
"SettingsSelectContents": "Inhalte auswählen",
315+
"SettingsStartCollapsed": "Eingeklappt starten",
315316
"SettingsSubtitlesShowByDefault": "Untertitel standardmäßig anzeigen (falls vorhanden)",
316317
"SettingsSynchronization": "Mit Hypervideo synchronisieren",
317318
"SettingsTestCode": "Code testen",

‎src/_shared/modules/Localization/locale/en.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ window.FrameTrail_L10n['en'] = {
312312
"SettingsQuizQuestionLabel": "Question",
313313
"SettingsSelectColorTheme": "Select Color Theme",
314314
"SettingsSelectContents": "Select contents",
315+
"SettingsStartCollapsed": "Start collapsed",
315316
"SettingsSubtitlesShowByDefault": "Show subtitles by default (if present)",
316317
"SettingsSynchronization": "Synchronize with Hypervideo",
317318
"SettingsTestCode": "Test Code",

‎src/_shared/modules/Localization/locale/fr.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ window.FrameTrail_L10n['fr'] = {
312312
"SettingsQuizQuestionLabel": "Question",
313313
"SettingsSelectColorTheme": "Sélectionner un thème de couleur",
314314
"SettingsSelectContents": "Sélectionner les contenus",
315+
"SettingsStartCollapsed": "Démarrer replié",
315316
"SettingsSubtitlesShowByDefault": "Afficher les sous-titres par défaut (si présent)",
316317
"SettingsSynchronization": "Synchroniser avec l'Hypervideo",
317318
"SettingsTestCode": "Tester le code",

‎src/player/types/ContentView/style.css‎

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -337,34 +337,7 @@
337337
padding-top: 4px;
338338
}
339339

340-
.layoutArea .contentViewContainer .contentViewContents .transcriptContainer {
341-
margin: 0px 4px 4px 4px;
342-
max-height: calc(100% - 8px);
343-
box-sizing: border-box;
344-
position: relative;
345-
padding: 10px;
346-
overflow-y: auto;
347-
overflow-x: hidden;
348-
}
349-
350-
.layoutArea .contentViewContainer .contentViewContents .transcriptContainer span {
351-
position: relative;
352-
padding: 1px 0px 1px 0px;
353-
opacity: .6;
354-
}
355-
356-
.layoutArea .contentViewContainer .contentViewContents .transcriptContainer span:first-child {
357-
padding-left: 0px;
358-
}
359-
360-
.layoutArea .contentViewContainer .contentViewContents .transcriptContainer span:hover, .layoutArea .contentViewContainer .contentViewContents .transcriptContainer span.active {
361-
background-color: var(--secondary-fg-color);
362-
color: var(--primary-bg-color);
363-
border-radius: 2px;
364-
opacity: 0.8;
365-
cursor: pointer;
366-
}
367-
340+
.layoutArea .contentViewContainer .contentViewContents .transcriptContainer,
368341
.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer {
369342
margin: 0px 4px 4px 4px;
370343
height: calc(100% - 8px);
@@ -374,12 +347,16 @@
374347
overflow: auto;
375348
}
376349

350+
.layoutArea .contentViewContainer .contentViewContents .transcriptContainer span,
377351
.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer .timebased {
378352
border-bottom: 1px solid transparent;
379353
opacity: .7;
380354
}
381355

382-
.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer .timebased:hover, .layoutArea .contentViewContainer .contentViewContents .customhtmlContainer .timebased.active {
356+
.layoutArea .contentViewContainer .contentViewContents .transcriptContainer span:hover,
357+
.layoutArea .contentViewContainer .contentViewContents .transcriptContainer span.active,
358+
.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer .timebased:hover,
359+
.layoutArea .contentViewContainer .contentViewContents .customhtmlContainer .timebased.active {
383360
border-bottom-color: var(--primary-fg-color);
384361
opacity: 1;
385362
cursor: pointer;

‎src/player/types/ContentView/type.js‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,15 @@ FrameTrail.defineType(
181181
self.contentViewContainer.setAttribute('data-type', self.contentViewData.type);
182182
self.contentViewContainer.setAttribute('data-size', self.contentViewData.contentSize);
183183

184+
// Sync cssClass on container
185+
if (self._prevCssClass && self._prevCssClass !== self.contentViewData.cssClass) {
186+
self.contentViewContainer.classList.remove(self._prevCssClass);
187+
}
188+
if (self.contentViewData.cssClass) {
189+
self.contentViewContainer.classList.add(self.contentViewData.cssClass);
190+
}
191+
self._prevCssClass = self.contentViewData.cssClass;
192+
184193
if (self.contentViewData.initClosed) {
185194
self.getLayoutAreaContainer().classList.add('closed');
186195
}
@@ -894,6 +903,10 @@ FrameTrail.defineType(
894903
+ '</div>';
895904
var containerElement = _w.firstElementChild;
896905

906+
if (self.contentViewData.cssClass) {
907+
containerElement.classList.add(self.contentViewData.cssClass);
908+
}
909+
897910
return containerElement;
898911

899912
},
@@ -1799,17 +1812,25 @@ FrameTrail.defineType(
17991812
editingUI = document.createElement('div');
18001813
editingUI.className = 'contentViewEditingUI';
18011814
editingUI.innerHTML = ' <div class="layoutRow">'
1802-
+' <div class="generic column-8">'
1815+
+' <div class="generic column-4">'
18031816
+' <label>'+ self.labels['GenericName'] +':</label>'
18041817
+' <input type="text" class="contentViewData" data-property="name" value="'+ contentViewData.name +'" placeholder="('+ self.labels['GenericOptional'] +')">'
18051818
+' </div>'
18061819
+' <div class="generic column-4">'
18071820
+' <label>Icon:</label>'
18081821
+' <div class="iconInputRow">'
18091822
+' <span class="iconPreview '+ contentViewData.icon +'"></span>'
1810-
+' <input type="text" class="contentViewData" data-property="icon" value="'+ contentViewData.icon +'" placeholder="(optional)">'
1823+
+' <input type="text" class="contentViewData" data-property="icon" value="'+ contentViewData.icon +'" placeholder="('+ self.labels['GenericOptional'] +')">'
18111824
+' </div>'
18121825
+' </div>'
1826+
+' <div class="generic column-2">'
1827+
+' <label>CSS Class:</label>'
1828+
+' <input type="text" class="contentViewData" data-property="cssClass" value="'+ contentViewData.cssClass +'" placeholder="('+ self.labels['GenericOptional'] +')">'
1829+
+' </div>'
1830+
+' <div class="generic column-2">'
1831+
+' <label>'+ self.labels['SettingsStartCollapsed'] +':</label>'
1832+
+' <div class="checkboxRow"><label class="switch"><input type="checkbox" class="contentViewData" data-property="initClosed" '+ (contentViewData.initClosed ? 'checked' : '') +'><span class="slider round"></span></label></div>'
1833+
+' </div>'
18131834
+' </div>'
18141835
+' <hr>'
18151836
+' <div class="layoutRow">'
@@ -1829,10 +1850,6 @@ FrameTrail.defineType(
18291850
+' </div>'
18301851
+' </div>'
18311852
+' </div>'
1832-
+' <div class="generic" style="display: none;">'
1833-
+' <label>CSS Class:</label>'
1834-
+' <input type="text" class="contentViewData" data-property="cssClass" data-value="'+ contentViewData.cssClass +'" value="'+ contentViewData.cssClass +'" placeholder="('+ self.labels['GenericOptional'] +')">'
1835-
+' </div>'
18361853
+' <hr>'
18371854
+' <div class="typeSpecific '+ (contentViewData.type == 'TimedContent' ? 'active' : '') +'" data-type="TimedContent">'
18381855
+' <label>'+ self.labels['SettingsSelectContents'] +':</label>'
@@ -2224,7 +2241,9 @@ FrameTrail.defineType(
22242241
editingUIContainer.querySelectorAll('.contentViewData').forEach(function(el) {
22252242

22262243
var newValue;
2227-
if ( el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ) {
2244+
if ( el.tagName === 'INPUT' && el.type === 'checkbox' ) {
2245+
newValue = el.checked;
2246+
} else if ( el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ) {
22282247
newValue = el.value;
22292248
if ( el.getAttribute('data-property').indexOf('collectionFilter') != -1 && el.getAttribute('data-property') != 'collectionFilter-text' ) {
22302249
if ( el.value.length != 0 ) {

0 commit comments

Comments
 (0)