Skip to content

Commit 5a7044d

Browse files
OpenHypervideoOpenHypervideo
committed
Add new resourceHTML type (vs resourceText)
1 parent 02f3fef commit 5a7044d

20 files changed

Lines changed: 561 additions & 28 deletions

File tree

‎CLAUDE.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ FrameTrail/
2828
│ │ │ ├── _templateModule.js # Module boilerplate template
2929
│ │ │ └── _templateType.js # Type boilerplate template
3030
│ │ ├── modules/ # 12 shared modules
31-
│ │ ├── types/ # 22 resource type definitions
31+
│ │ ├── types/ # 23 resource type definitions
3232
│ │ ├── styles/ # Global CSS (variables, generic, webfont)
3333
│ │ └── fonts/ # Webfonts (woff2 only)
3434
│ ├── player/
@@ -181,7 +181,7 @@ _data/
181181

182182
### Resource Types
183183

184-
All 22 resource types inherit from the base `Resource` type in `src/_shared/types/Resource/`:
184+
All 23 resource types inherit from the base `Resource` type in `src/_shared/types/Resource/`:
185185

186186
| Type | Description |
187187
|------|-------------|
@@ -198,7 +198,8 @@ All 22 resource types inherit from the base `Resource` type in `src/_shared/type
198198
| ResourceWebpage | Generic iframe embeds |
199199
| ResourceWikipedia | Wikipedia article embeds |
200200
| ResourcePDF | PDF document viewer |
201-
| ResourceText | Rich HTML text |
201+
| ResourceText | Rich text (WYSIWYG via Quill + HTML editor) |
202+
| ResourceHtml | Raw HTML (CodeMirror HTML editor only, no sanitisation) |
202203
| ResourceLocation | OpenStreetMap (via Leaflet) |
203204
| ResourceQuiz | Interactive quiz |
204205
| ResourceHotspot | Clickable hotspot |

‎docs/ARCHITECTURE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@ Resource (abstract base)
208208
├── ResourceWikipedia
209209
├── ResourcePDF
210210
├── ResourceText
211+
├── ResourceHtml
211212
├── ResourceLocation
212213
├── ResourceQuiz
213214
├── ResourceHotspot

‎scripts/build.sh‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ CSS_FILES=(
5858
"_shared/types/ResourceWikipedia/style.css"
5959
"_shared/types/ResourceYoutube/style.css"
6060
"_shared/types/ResourceText/style.css"
61+
"_shared/types/ResourceHtml/style.css"
6162
"_shared/types/ResourceQuiz/style.css"
6263
"_shared/types/ResourceHotspot/style.css"
6364
"_shared/types/ResourceEntity/style.css"
@@ -136,6 +137,7 @@ JS_FILES=(
136137
"_shared/types/ResourceWikipedia/type.js"
137138
"_shared/types/ResourceYoutube/type.js"
138139
"_shared/types/ResourceText/type.js"
140+
"_shared/types/ResourceHtml/type.js"
139141
"_shared/types/ResourceQuiz/type.js"
140142
"_shared/types/ResourceHotspot/type.js"
141143
"_shared/types/ResourceEntity/type.js"

‎src/_lib/dialog/dialog.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
* close: function() { ... }, // 'this' = content element
1616
* open: function() { ... }, // 'this' = content element
1717
* classes: 'custom-class', // extra CSS class(es) on <dialog>
18+
* titlebar: false, // show the title bar (default true)
1819
* resizable: false, // ignored (native <dialog> not resizable by default)
1920
* autoOpen: true // default true
2021
* });
@@ -57,6 +58,7 @@ window.Dialog = function(opts) {
5758
var position = opts.position || null;
5859
var closeOnEscape = (opts.closeOnEscape !== false);
5960
var inheritTheme = opts.inheritTheme || null;
61+
var showTitlebar = (opts.titlebar !== false);
6062

6163
// ── Build native <dialog> ──────────────────────────────────────────────
6264

@@ -102,7 +104,9 @@ window.Dialog = function(opts) {
102104
var buttonPane = document.createElement('div');
103105
buttonPane.className = 'ft-dialog-buttonpane';
104106

105-
dlg.appendChild(titlebar);
107+
if (showTitlebar) {
108+
dlg.appendChild(titlebar);
109+
}
106110
dlg.appendChild(contentWrapper);
107111
dlg.appendChild(buttonPane);
108112

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,8 @@ window.FrameTrail_L10n['de'] = {
216216
"ResourceAddMap": "Karte hinzufügen",
217217
"ResourceAddNew": "Ressource hinzufügen",
218218
"ResourceChoose": "Ressource auswählen",
219-
"ResourceCustomTextHTML": "Eigener Text / HTML Inhalt",
219+
"ResourceCustomHTML": "Eigenes HTML",
220+
"ResourceCustomTextHTML": "Eigener Text",
220221
"ResourceManager": "Ressourcen-Verwaltung",
221222
"ResourceOpenInNewTab": "In neuem Tab öffnen",
222223
"ResourcePasteURL": "URL einfügen",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,8 @@ window.FrameTrail_L10n['en'] = {
216216
"ResourceAddMap": "Add Map",
217217
"ResourceAddNew": "Add Resource",
218218
"ResourceChoose": "Choose Resource",
219-
"ResourceCustomTextHTML": "Custom Text / HTML",
219+
"ResourceCustomHTML": "Custom HTML",
220+
"ResourceCustomTextHTML": "Custom Text",
220221
"ResourceManager": "Resource Manager",
221222
"ResourceOpenInNewTab": "Open in New Tab",
222223
"ResourcePasteURL": "Paste URL",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,8 @@ window.FrameTrail_L10n['fr'] = {
216216
"ResourceAddMap": "Ajouter une carte",
217217
"ResourceAddNew": "Ajouter une ressource",
218218
"ResourceChoose": "Choisir une ressource",
219-
"ResourceCustomTextHTML": "Texte personnalisé / HTML",
219+
"ResourceCustomHTML": "HTML personnalisé",
220+
"ResourceCustomTextHTML": "Texte personnalisé",
220221
"ResourceManager": "Gestionnaire de ressources",
221222
"ResourceOpenInNewTab": "Ouvrir dans un nouvel onglet",
222223
"ResourcePasteURL": "Coller l'URL",

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ FrameTrail.defineModule('UserTraces', function(FrameTrail){
6464
newObject.start = evt.detail.annotation.start;
6565
newObject.end = evt.detail.annotation.end;
6666

67-
if (evt.detail.annotation.type == 'text') {
67+
if (evt.detail.annotation.type == 'text' || evt.detail.annotation.type == 'html') {
6868
newObject.text = evt.detail.annotation.attributes.text;
6969
} else if (evt.detail.annotation.src) {
7070
newObject.source = evt.detail.annotation.src;
@@ -77,8 +77,8 @@ FrameTrail.defineModule('UserTraces', function(FrameTrail){
7777
newObject.type = evt.detail.overlay.type;
7878
newObject.start = evt.detail.overlay.start;
7979
newObject.end = evt.detail.overlay.end;
80-
81-
if (evt.detail.overlay.type == 'text') {
80+
81+
if (evt.detail.overlay.type == 'text' || evt.detail.overlay.type == 'html') {
8282
newObject.text = evt.detail.overlay.attributes.text;
8383
} else if (evt.detail.overlay.src) {
8484
newObject.source = evt.detail.overlay.src;

‎src/_shared/types/Resource/type.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ FrameTrail.defineType(
140140
previewContent.appendChild(contentEl);
141141

142142
var previewDialogCtrl = Dialog({
143-
title: (self.resourceData.type == 'text') ? '' : self.resourceData.name,
143+
title: (self.resourceData.type == 'text' || self.resourceData.type == 'html') ? '' : self.resourceData.name,
144144
content: previewContent,
145145
inheritTheme: elementOrigin,
146146
resizable: false,

‎src/_shared/types/ResourceHtml/style.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
.resourceDetail[data-type="html"] {
2+
background-color: transparent;
3+
color: var(--primary-fg-color);
4+
}
5+
6+
.resourceDetail[data-type="html"] .resourceContent {
7+
padding: 10px;
8+
box-sizing: border-box;
9+
overflow-y: auto;
10+
}
11+
12+
.resourcePreviewDialog .resourceDetail[data-type="html"] {
13+
color: var(--primary-bg-color);
14+
}
15+
16+
.overlayElement .resourceDetail[data-type="html"] .resourceContent {
17+
padding: 0px;
18+
color: #000;
19+
}
20+
21+
.resourceDetail[data-type="html"] ol, .resourceDetail[data-type="html"] ul {
22+
margin: 0;
23+
padding-left: 20px;
24+
}
25+
26+
.resourceThumb[data-type="html"] .resourceTextPreview {
27+
position: absolute;
28+
top: 0px;
29+
left: 0px;
30+
width: 100%;
31+
height: 100%;
32+
padding: 8px;
33+
box-sizing: border-box;
34+
color: var(--primary-fg-color) !important;
35+
line-height: 1.2em !important;
36+
opacity: .6;
37+
overflow: hidden;
38+
}
39+
40+
.resourceThumb[data-type="html"] .resourceTextPreview * {
41+
font-size: 100% !important;
42+
color: var(--primary-fg-color) !important;
43+
line-height: 1.2em !important;
44+
}
45+
46+
.resourceThumb[data-type="html"] .resourceTextPreview:after {
47+
content: '';
48+
position: absolute;
49+
left: 0px;
50+
bottom: 0px;
51+
height: 40%;
52+
background-image: linear-gradient(to top, var(--primary-bg-color) 0%, var(--primary-bg-color) 30%, transparent 100%);
53+
width: 100%;
54+
}
55+
56+
.resourceThumb[data-type="html"] .resourceOverlay {
57+
background: transparent;
58+
}
59+
60+
.resourceThumb[data-type="html"] .resourceTitle {
61+
display: none;
62+
}
63+
64+
.contentViewContainer[data-size="small"] .resourceThumb[data-type="html"] .resourceTextPreview {
65+
display: none;
66+
}
67+
68+
/* Edit HTML Overlay Properties */
69+
70+
.editPropertiesContainer .propertiesTypeIcon[data-type="html"] [class^="icon-"]::before, .editPropertiesContainer .propertiesTypeIcon[data-type="html"] [class*=" icon-"]::before {
71+
content: "\f0f6";
72+
}
73+
74+
/* HTML-only editor: no tabs needed, full height */
75+
.editPropertiesContainer .htmlOnlyEditorContainer {
76+
height: 100%;
77+
}
78+
79+
.editPropertiesContainer .htmlOnlyEditorContainer .textEditorTab {
80+
pointer-events: none;
81+
}

0 commit comments

Comments
 (0)