Hacky way to set height
I haven't figured out a way yet to get the height of the actual iframe's content, so I did some bad estimate for now to unblock shipping the feature, while I continue investigating.
This commit is contained in:
parent
119a1be1dd
commit
b9f132411b
|
@ -48,6 +48,9 @@ export default Node.create<IframeOptions>({
|
||||||
frameborder: {
|
frameborder: {
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
|
height: {
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
allowfullscreen: {
|
allowfullscreen: {
|
||||||
default: this.options.allowFullscreen,
|
default: this.options.allowFullscreen,
|
||||||
parseHTML: () => this.options.allowFullscreen,
|
parseHTML: () => this.options.allowFullscreen,
|
||||||
|
@ -60,6 +63,11 @@ export default Node.create<IframeOptions>({
|
||||||
},
|
},
|
||||||
|
|
||||||
renderHTML({ HTMLAttributes }) {
|
renderHTML({ HTMLAttributes }) {
|
||||||
|
this.options.HTMLAttributes.style =
|
||||||
|
this.options.HTMLAttributes.style +
|
||||||
|
' height: ' +
|
||||||
|
HTMLAttributes.height +
|
||||||
|
';'
|
||||||
return [
|
return [
|
||||||
'div',
|
'div',
|
||||||
this.options.HTMLAttributes,
|
this.options.HTMLAttributes,
|
||||||
|
|
|
@ -29,7 +29,7 @@ export function MarketModal(props: {
|
||||||
async function doneAddingContracts() {
|
async function doneAddingContracts() {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
if (contracts.length == 1) {
|
if (contracts.length == 1) {
|
||||||
insertContent(editor, ...contracts.map(embedContractCode))
|
insertContent(editor, embedContractCode(contracts[0]))
|
||||||
} else if (contracts.length > 1) {
|
} else if (contracts.length > 1) {
|
||||||
insertContent(editor, embedContractGridCode(contracts))
|
insertContent(editor, embedContractGridCode(contracts))
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,19 +12,17 @@ import { track } from 'web/lib/service/analytics'
|
||||||
export function embedContractCode(contract: Contract) {
|
export function embedContractCode(contract: Contract) {
|
||||||
const title = contract.question
|
const title = contract.question
|
||||||
const src = `https://${DOMAIN}/embed${contractPath(contract)}`
|
const src = `https://${DOMAIN}/embed${contractPath(contract)}`
|
||||||
return embedCode(src, title)
|
return `<iframe src="${src}" title="${title}" frameborder="0"></iframe>`
|
||||||
}
|
}
|
||||||
|
|
||||||
export function embedContractGridCode(contracts: Contract[]) {
|
export function embedContractGridCode(contracts: Contract[]) {
|
||||||
|
const height = (contracts.length - (contracts.length % 2)) * 100 + 'px'
|
||||||
const src = `http://${DOMAIN}/embed/grid/${contracts
|
const src = `http://${DOMAIN}/embed/grid/${contracts
|
||||||
.map((c) => c.slug)
|
.map((c) => c.slug)
|
||||||
.join('/')}`
|
.join('/')}`
|
||||||
return embedCode(src, 'Grid of contracts')
|
return `<iframe height="${height}" src="${src}" title="Grid of contracts" frameborder="0"></iframe>`
|
||||||
}
|
}
|
||||||
|
|
||||||
const embedCode = (src: string, title: string) =>
|
|
||||||
`<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
|
|
||||||
|
|
||||||
export function ShareEmbedButton(props: { contract: Contract }) {
|
export function ShareEmbedButton(props: { contract: Contract }) {
|
||||||
const { contract } = props
|
const { contract } = props
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user