Skip to content

Commit 8891ff4

Browse files
SvebdChiampaustinblanchardlux-vpghorpade
authored
feat: creates DetailMedia component (#846)
* adds components list * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * adds notes * Update COMPONENTS.md * claimed component * Update COMPONENTS.md * claim a component * claim a component * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * take a component * take a component * take a component * Update COMPONENTS.md * Update COMPONENTS.md * Adjust the component name - already exists * take a component * take a component * Update COMPONENTS.md - marks footer as already existing * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md - marking BentoPod * add component * add component * Update COMPONENTS.md * Update COMPONENTS.md * take a component * take a component * fix component description * Update COMPONENTS.md Component exists * Update COMPONENTS.md * change component's name * Update COMPONENTS.md Clean up the list somewhat - added a new component for the bento-box-result, as bento-bod is allready.a different component. - removed a footer component as it doesn't really exist. - added some checkboxes to taken/completed compoents * take a component * take a component * take a component * remove AssetFeaturedImage definition * take a component * take a components * take a components * take a component * take a component * add a new line * add detailed component description * add detailed component description * take a component * update component description * Adds a button component * Update COMPONENTS.md * Update COMPONENTS.md * Update COMPONENTS.md * Clean up components.md * Taking the block-collection component * Taking the grid-collections component as well. * Update COMPONENTS.md * Clean up component list * add spacing * add spacing * update component name * Update Button definition * Update COMPONENTS.md * Update COMPONENTS.md * Remove duplicates * remove duplicates * remove duplicates * Remove already existing components * take a component * update package * add a component * Take a component * adjust prop for block anchor nav * take a component * Update COMPONENTS.md * Taking the DropdownSingleSelect * Take the ButtonDropdownSearch component * adding the correct packageMenager version for netlify to see. pnpm Netlify supports pnpm for Node.js 16.9.0 and later. If your site’s base directory includes a pnpm-lock.yaml file, we will run pnpm install to install the dependencies listed in your package.json. To specify a pnpm version, you can edit your package.json file: "packageManager": "[email protected]" This tells Corepack to use and download your preferred pnpm version instead of the default version that Netlify sets. * Update COMPONENTS.md * Marking a component as taken * Remove packageManager field from package.json * Update component statuses and remove completed items Updated the status of various components to reflect their existence and removed existing components from the list. * Update COMPONENTS.md * Taking the FiltersDropdown * Update COMPONENTS.md * Add note regarding existing header component tweaks Added a note about existing similar functionality that requires tweaks. * Update RefineSearchPanel ownership in COMPONENTS.md * Update DetailMedia component owner to Svebor * Update component list * Creates Iiif media viewer * Clarify CTAHexButton entry in COMPONENTS.md * Update COMPONENTS.md to remove and modify components Removed BlockMediaViewer and updated BlockRichText entry. Adjusted completion status for DetailMedia. * Update component status and ownership in COMPONENTS.md * Update component ownership in COMPONENTS.md * fix linting errros * Update package.json * Delete NOTES.md * uses UCLA's existing viewer app to create a component version of it. * run lint fix * delete old component files * fix: Update DLViewer.stories.ts * Update index.ts * fix: update the path for the cypress test * chore: delete unused file --------- Co-authored-by: dchiamp <[email protected]> Co-authored-by: Austin Blanchard <[email protected]> Co-authored-by: Luka Vuk <[email protected]> Co-authored-by: Parinita Mulak <[email protected]>
1 parent c6572e2 commit 8891ff4

File tree

10 files changed

+860
-0
lines changed

10 files changed

+860
-0
lines changed

‎packages/vue-component-library/src/lib-components/DLMediaTypes/AuthFirefoxModal.vue‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<script>
2+
export default {
3+
name: 'AuthFirefoxModal',
4+
props: {
5+
title: {
6+
type: String,
7+
required: true,
8+
},
9+
message: {
10+
type: String,
11+
required: true,
12+
},
13+
},
14+
data() {
15+
return {
16+
show: true,
17+
collapsed: true,
18+
}
19+
},
20+
methods: {
21+
closeModal() {
22+
this.show = false
23+
},
24+
toggleCollapse() {
25+
this.collapsed = !this.collapsed
26+
},
27+
},
28+
}
29+
</script>
30+
31+
<template>
32+
<div
33+
v-if="show"
34+
class="modal-overlay"
35+
>
36+
<div class="modal">
37+
<div class="close-container">
38+
<button
39+
class="close-button"
40+
@click="closeModal"
41+
>
42+
<svg
43+
class="close-icon"
44+
xmlns="http://www.w3.org/2000/svg"
45+
viewBox="0 0 24 24"
46+
>
47+
<path
48+
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
49+
/>
50+
</svg>
51+
</button>
52+
</div>
53+
<h3 class="modal-title">
54+
{{ title }}
55+
</h3>
56+
57+
<button
58+
class="collapse-button"
59+
@click="toggleCollapse"
60+
>
61+
<div class="collapse-button-content">
62+
<svg
63+
class="collapse-icon"
64+
xmlns="http://www.w3.org/2000/svg"
65+
viewBox="0 0 24 24"
66+
>
67+
<path
68+
v-if="collapsed"
69+
d="M10 17l5-5-5-5v10z"
70+
/>
71+
<path
72+
v-else
73+
d="M12 7l5 5-5 5V7z"
74+
/>
75+
</svg>
76+
<span
77+
v-if="collapsed"
78+
class="collapse-text"
79+
>Open details</span>
80+
<span
81+
v-else
82+
class="collapse-text"
83+
>Close details</span>
84+
</div>
85+
</button>
86+
<div v-if="!collapsed">
87+
<div
88+
class="detail-text"
89+
v-html="message"
90+
/>
91+
</div>
92+
</div>
93+
</div>
94+
</template>
95+
96+
<style>
97+
.modal-overlay {
98+
position: fixed;
99+
top: 0;
100+
left: 0;
101+
width: 100%;
102+
height: 100%;
103+
background-color: rgba(0, 0, 0, 0.5);
104+
display: flex;
105+
align-items: center;
106+
justify-content: center;
107+
}
108+
109+
.modal {
110+
background-color: white;
111+
padding: 20px;
112+
border-radius: 5px;
113+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
114+
width: 60%;
115+
}
116+
117+
.modal-title {
118+
font-size: 1.25rem;
119+
}
120+
121+
@media (max-width: 1024px) {
122+
.modal-overlay {
123+
margin: 10px;
124+
}
125+
126+
.modal {
127+
width: 60%;
128+
margin: 10px;
129+
padding: 10px;
130+
}
131+
132+
.modal-title {
133+
font-size: 1rem;
134+
}
135+
136+
.detail-text {
137+
font-size: 13px;
138+
}
139+
}
140+
141+
@media (max-width: 750px) {
142+
.modal {
143+
width: 60%;
144+
margin: 10px;
145+
padding: 10px;
146+
}
147+
148+
.modal-title {
149+
font-size: 0.95rem;
150+
}
151+
152+
.detail-text {
153+
font-size: 12px;
154+
}
155+
}
156+
157+
.collapse-button {
158+
margin-bottom: 10px;
159+
background: none;
160+
border: none;
161+
cursor: pointer;
162+
}
163+
164+
.collapse-button-content {
165+
display: flex;
166+
align-items: center;
167+
}
168+
169+
.collapse-icon {
170+
width: 24px;
171+
height: 24px;
172+
fill: currentColor;
173+
margin-right: 5px;
174+
}
175+
176+
.collapse-text {
177+
font-size: 14px;
178+
color: #777;
179+
}
180+
181+
.close-container {
182+
float: right;
183+
}
184+
185+
.close-button {
186+
top: 10px;
187+
left: 10px;
188+
background: none;
189+
border: none;
190+
cursor: pointer;
191+
}
192+
193+
.close-icon {
194+
width: 16px;
195+
height: 24px;
196+
fill: currentColor;
197+
}
198+
</style>

‎packages/vue-component-library/src/lib-components/DLMediaTypes/ImageTag.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script>
2+
export default {
3+
name: 'ImageTag',
4+
props: {
5+
options: {
6+
// { src: [...] }
7+
type: Object,
8+
required: true,
9+
},
10+
},
11+
}
12+
</script>
13+
14+
<template>
15+
<img
16+
v-if="options.src"
17+
v-bind="options"
18+
class="image-tag"
19+
>
20+
<div
21+
v-else
22+
class="image-tag"
23+
>
24+
<!-- CSS Placeholder w/o broken image icon -->
25+
</div>
26+
</template>
27+
28+
<style>
29+
.image-tag {
30+
width: 100%;
31+
height: 100%;
32+
33+
object-fit: contain;
34+
background-color: black;
35+
}
36+
</style>

‎packages/vue-component-library/src/lib-components/DLMediaTypes/Mirador.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script>
2+
export default {
3+
props: {
4+
options: {
5+
type: Object,
6+
required: true,
7+
},
8+
},
9+
computed: {
10+
iframe_target_url() {
11+
const baseUrl = this.options?.viewerBaseUrl || ''
12+
const manifestUrl = this.options?.iiif_manifest_url
13+
14+
if (manifestUrl) {
15+
// Construct viewer URL with manifest parameter
16+
return `${baseUrl}/mirador3.html?manifest=${encodeURIComponent(manifestUrl)}`
17+
}
18+
19+
// Fallback: try to get manifest from current page URL
20+
const fixed_url = new URL(window.location.toString().replace('#?', '?'))
21+
const manifestParam = fixed_url.searchParams.get('manifest')
22+
23+
if (manifestParam)
24+
return `${baseUrl}/mirador3.html?manifest=${encodeURIComponent(manifestParam)}`
25+
26+
return `${baseUrl}/mirador3.html${fixed_url.search}`
27+
},
28+
},
29+
}
30+
</script>
31+
32+
<template>
33+
<iframe
34+
id="mirador-iframe"
35+
class="mirador"
36+
:src="iframe_target_url"
37+
allowfullscreen
38+
frameborder="0"
39+
/>
40+
</template>
41+
42+
<!-- Add "scoped" attribute to limit CSS to this component only -->
43+
<style scoped>
44+
.mirador {
45+
width: 100%;
46+
height: 100%;
47+
}
48+
</style>

‎packages/vue-component-library/src/lib-components/DLMediaTypes/MiradorPalimpsest.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script>
2+
export default {
3+
props: {
4+
options: {
5+
type: Object,
6+
required: true,
7+
},
8+
},
9+
computed: {
10+
iframe_target_url() {
11+
const baseUrl = this.options?.viewerBaseUrl || 'https://p-w-dl-viewer01.library.ucla.edu'
12+
const manifestUrl = this.options?.iiif_manifest_url
13+
14+
if (manifestUrl) {
15+
// Construct viewer URL with manifest parameter
16+
return `${baseUrl}/palimpsest/viewer.html?manifest=${encodeURIComponent(manifestUrl)}`
17+
}
18+
19+
// Fallback: try to get manifest from current page URL
20+
const fixed_url = new URL(window.location.toString().replace('#?', '?'))
21+
const manifestParam = fixed_url.searchParams.get('manifest')
22+
23+
if (manifestParam)
24+
return `${baseUrl}/palimpsest/viewer.html?manifest=${encodeURIComponent(manifestParam)}`
25+
26+
return `${baseUrl}/palimpsest/viewer.html${fixed_url.search}`
27+
},
28+
},
29+
}
30+
</script>
31+
32+
<template>
33+
<iframe
34+
id="mirador-iframe"
35+
class="mirador"
36+
:src="iframe_target_url"
37+
allowfullscreen
38+
frameborder="0"
39+
/>
40+
</template>
41+
42+
<style scoped>
43+
.mirador {
44+
width: 100%;
45+
height: 100%;
46+
}
47+
</style>

‎packages/vue-component-library/src/lib-components/DLMediaTypes/UniversalViewer.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script>
2+
export default {
3+
props: {
4+
options: {
5+
type: Object,
6+
required: true,
7+
},
8+
},
9+
computed: {
10+
iframe_target_url() {
11+
const baseUrl = this.options?.viewerBaseUrl || ''
12+
const manifestUrl = this.options?.iiif_manifest_url
13+
14+
if (manifestUrl) {
15+
// Construct viewer URL with manifest parameter
16+
return `${baseUrl}/uv.html#?manifest=${encodeURIComponent(manifestUrl)}`
17+
}
18+
19+
// Fallback: try to get manifest from current page URL
20+
const fixed_url = new URL(window.location.toString().replace('#?', '?'))
21+
const manifestParam = fixed_url.searchParams.get('manifest')
22+
23+
if (manifestParam)
24+
return `${baseUrl}/uv.html#?manifest=${encodeURIComponent(manifestParam)}`
25+
26+
return `${baseUrl}/uv.html${fixed_url.search}`
27+
},
28+
},
29+
}
30+
</script>
31+
32+
<template>
33+
<iframe
34+
id="universalviewer-iframe"
35+
class="universalviewer"
36+
:src="iframe_target_url"
37+
allowfullscreen
38+
frameborder="0"
39+
/>
40+
</template>
41+
42+
<!-- Add "scoped" attribute to limit CSS to this component only -->
43+
<style scoped>
44+
.universalviewer {
45+
46+
width: 100%;
47+
height: 100%;
48+
}
49+
</style>

0 commit comments

Comments
 (0)