-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
379 additions
and
108 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
import { configureTitleBlockContent, configureBlockContent } from '../../editors' | ||
import CompactBlockEditor from '../../components/CompactBlockEditor' | ||
import CharCounterEditor from '../../components/CharCounterEditor' | ||
import type { Rule, ValidationContext, Block } from '@sanity/types' | ||
import type { IFrame } from '../iframe' | ||
|
||
const titleContentType = configureTitleBlockContent() | ||
|
||
const descriptionContentType = configureBlockContent({ | ||
h1: false, | ||
h2: false, | ||
h3: false, | ||
h4: false, | ||
attachment: false, | ||
internalLink: false, | ||
externalLink: false, | ||
lists: false, | ||
}) | ||
|
||
export const title = { | ||
name: 'title', | ||
type: 'array', | ||
title: 'Title', | ||
description: 'The (optional) title/heading shown above the iframe.', | ||
inputComponent: CompactBlockEditor, | ||
of: [titleContentType], | ||
} | ||
|
||
export const frameTitle = { | ||
name: 'frameTitle', | ||
type: 'string', | ||
title: 'Frame title', | ||
fieldset: 'iframe', | ||
|
||
description: 'The title of the iframe. This value is not visible on the page but is required for accessibility.', | ||
validation: (Rule: Rule) => | ||
Rule.custom((value: string, context: ValidationContext) => { | ||
const { parent } = context as { parent: IFrame } | ||
return parent?.url && value === undefined ? 'Required' : true | ||
}), | ||
} | ||
|
||
export const url = { | ||
name: 'url', | ||
type: 'url', | ||
title: 'Frame URL', | ||
description: | ||
'Link to the content to be loaded inside the iframe. Any URL must be whitelisted to load. Please make sure to verify that the iframe loads correctly before publishing, otherwise contact dev team for whitelisting.', | ||
fieldset: 'iframe', | ||
validation: (Rule: Rule) => | ||
Rule.custom((value: any, context: ValidationContext) => { | ||
const { parent } = context as { parent: IFrame } | ||
return (parent?.title || parent?.frameTitle) && value === undefined ? 'Required' : true | ||
}), | ||
} | ||
|
||
export const cookiePolicy = { | ||
name: 'cookiePolicy', | ||
type: 'string', | ||
title: 'Cookie policy', | ||
description: 'Select which cookie policy applies to this iframe.', | ||
fieldset: 'iframe', | ||
|
||
options: { | ||
list: [ | ||
{ title: 'None', value: 'none' }, | ||
{ title: 'Marketing', value: 'marketing' }, | ||
{ title: 'Statistics', value: 'statistics' }, | ||
], | ||
layout: 'dropdown', | ||
}, | ||
initialValue: 'none', | ||
validation: (Rule: Rule) => Rule.required(), | ||
} | ||
|
||
export const aspectRatio = { | ||
name: 'aspectRatio', | ||
type: 'string', | ||
title: 'Aspect ratio', | ||
options: { | ||
list: [ | ||
{ title: '16:9', value: '16:9' }, | ||
{ title: '4:3', value: '4:3' }, | ||
{ title: '1:1', value: '1:1' }, | ||
], | ||
layout: 'dropdown', | ||
}, | ||
fieldset: 'iframe', | ||
initialValue: '16:9', | ||
validation: (Rule: Rule) => Rule.required(), | ||
} | ||
export const height = { | ||
name: 'height', | ||
type: 'number', | ||
title: 'Height', | ||
description: 'Set a fixed height in pixels for the iframe. Note: this will override the aspect ratio setting.', | ||
fieldset: 'iframe', | ||
validation: (Rule: Rule) => Rule.positive().greaterThan(0).precision(0), | ||
} | ||
|
||
export const description = { | ||
name: 'description', | ||
title: 'Description/caption', | ||
description: `Here you can write a short description of the iframes content. This text will show up as a caption text right below the iframe.`, | ||
type: 'array', | ||
inputComponent: CharCounterEditor, | ||
of: [descriptionContentType], | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
import { Colors } from '../../helpers/ColorListValues' | ||
import { EdsIcon } from '../../icons' | ||
import { library_image } from '@equinor/eds-icons' | ||
import blocksToText from '../../helpers/blocksToText' | ||
import type { Rule } from '@sanity/types' | ||
import { title, frameTitle, description, cookiePolicy, aspectRatio, url, height } from './iframe/sharedIframeFields' | ||
|
||
const carouselItemFields = [title, frameTitle, description, cookiePolicy, aspectRatio, url, height] | ||
export default { | ||
name: 'iframeCarousel', | ||
title: 'Iframe carousel', | ||
type: 'object', | ||
fieldsets: [ | ||
{ | ||
title: 'Design options', | ||
name: 'design', | ||
description: 'Some options for design', | ||
options: { | ||
collapsible: true, | ||
collapsed: false, | ||
}, | ||
}, | ||
], | ||
fields: [ | ||
title, | ||
{ | ||
type: 'array', | ||
name: 'items', | ||
description: 'Add iframes for the carousel', | ||
title: 'Carousel items', | ||
of: [ | ||
{ | ||
title: 'Iframe carousel item', | ||
type: 'object', | ||
fieldsets: [ | ||
{ | ||
title: 'IFrame settings', | ||
name: 'iframe', | ||
options: { | ||
collapsible: true, | ||
collapsed: false, | ||
}, | ||
}, | ||
{ | ||
title: 'Design options', | ||
name: 'design', | ||
description: 'Some options for design', | ||
options: { | ||
collapsible: true, | ||
collapsed: false, | ||
}, | ||
}, | ||
], | ||
fields: [...carouselItemFields], | ||
}, | ||
], | ||
validation: (Rule: Rule) => Rule.required().min(2), | ||
}, | ||
{ | ||
title: 'Background', | ||
description: 'Pick a colour for the background. Default is white.', | ||
name: 'background', | ||
type: 'colorlist', | ||
options: { | ||
borderradius: { | ||
outer: '100%', | ||
inner: '100%', | ||
}, | ||
tooltip: false, | ||
list: Colors, | ||
}, | ||
fieldset: 'design', | ||
initialValue: Colors[0], | ||
}, | ||
], | ||
preview: { | ||
select: { | ||
title: 'title', | ||
items: 'items', | ||
}, | ||
prepare(selection: any) { | ||
const { title, items } = selection | ||
const length = items ? items.length : 0 | ||
|
||
return { | ||
title: title ? blocksToText(title) : 'Untitled iframe carousel', | ||
subtitle: `Iframe carousel with ${length} items`, | ||
media: EdsIcon(library_image), | ||
} | ||
}, | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.