-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add Flickr support * add acceptance test & linting * Merge remote-tracking branch 'origin/main' into flickr-block * disable sizing & add css * suggested changes * fix test * Fix blocks Data components, fix linting --------- Co-authored-by: Érico Andrei <[email protected]> Co-authored-by: Victor Fernandez de Alba <[email protected]>
- Loading branch information
3 people
authored
Mar 22, 2024
1 parent
86fabcc
commit 3eec1e6
Showing
46 changed files
with
749 additions
and
142 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
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
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,28 @@ | ||
| context('Flickr Block Acceptance Tests', () => { | ||
| describe('Flickr Block Tests', () => { | ||
| beforeEach(() => { | ||
| // Given a logged in editor | ||
| cy.viewport('macbook-16'); | ||
| cy.createContent({ | ||
| contentType: 'Document', | ||
| contentId: 'document', | ||
| contentTitle: 'Test document', | ||
| }); | ||
| cy.autologin(); | ||
| }); | ||
|
|
||
| it('As editor I can add a Flickr Block', function () { | ||
| cy.visit('/document'); | ||
| cy.navigate('/document/edit'); | ||
| cy.getSlate().click(); | ||
| cy.get('.button .block-add-button').click({ force: true }); | ||
| cy.get('.blocks-chooser .social .button.flickrBlock').click({ | ||
| force: true, | ||
| }); | ||
|
|
||
| cy.get('.block.inner.flickrBlock .input-wrapper .ui.input input').invoke('val', '<a data-flickr-embed="true" data-header="true" data-footer="true" href="https://www.flickr.com/photos/plone-foundation/albums/72177720303069181" title="Plone Conference 2022 Namur"><img src="https://live.staticflickr.com/65535/52443622430_c442b75502.jpg" width="500" height="375" alt="Plone Conference 2022 Namur"/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>').type('{enter}'); | ||
|
|
||
| cy.get('#toolbar-save').click(); | ||
| }); | ||
| }); | ||
| }); |
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 @@ | ||
| Add Flickr block [@danalvrz] |
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
46 changes: 46 additions & 0 deletions
46
packages/volto-social-blocks/src/components/Blocks/Flickr/Data.jsx
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,46 @@ | ||
| import React from 'react'; | ||
| import { BlockDataForm } from '@plone/volto/components'; | ||
| import { isValidFlickrId } from '../../../helpers'; | ||
| import { flickrSchema } from './schema'; | ||
| import { useIntl } from 'react-intl'; | ||
|
|
||
| const FlickrBlockData = (props) => { | ||
| const { data, block, onChangeBlock, blocksConfig, navRoot, contentType } = | ||
| props; | ||
| const intl = useIntl(); | ||
| const schema = flickrSchema({ ...props, intl }); | ||
| Object.keys(schema.properties).forEach((key) => { | ||
| const field = schema.properties[key]; | ||
| const defaultValue = field.default; | ||
| if (defaultValue !== undefined && data[field] === undefined) { | ||
| data[field] = defaultValue; | ||
| } | ||
| }); | ||
| const onChangeField = (id, value) => { | ||
| if (id === 'flickrId' && value !== '') { | ||
| if (!isValidFlickrId(value)) { | ||
| return; | ||
| } | ||
| } | ||
| onChangeBlock(block, { | ||
| ...data, | ||
| [id]: value, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <BlockDataForm | ||
| schema={schema} | ||
| title={schema.title} | ||
| onChangeField={onChangeField} | ||
| onChangeBlock={onChangeBlock} | ||
| formData={data} | ||
| block={block} | ||
| blocksConfig={blocksConfig} | ||
| navRoot={navRoot} | ||
| contentType={contentType} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default FlickrBlockData; |
71 changes: 71 additions & 0 deletions
71
packages/volto-social-blocks/src/components/Blocks/Flickr/DefaultView.jsx
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,71 @@ | ||
| import React, { useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import SocialContentWrapper from '../../SocialContentWrapper/SocialContentWrapper'; | ||
|
|
||
| const FlickrView = (props) => { | ||
| const { flickrId, align } = props; | ||
| const linkText = 'View post on Flickr'; | ||
| const parser = __CLIENT__ ? new DOMParser() : undefined; | ||
| const galleryData = parser?.parseFromString(flickrId, 'text/html'); | ||
| const scriptSrc = '//embedr.flickr.com/assets/client-code.js'; | ||
|
|
||
| useEffect(() => { | ||
| const head = document.querySelector('head'); | ||
| const script = document.createElement('script'); | ||
|
|
||
| script.setAttribute('src', scriptSrc); | ||
| head.appendChild(script); | ||
|
|
||
| return () => { | ||
| head.removeChild(script); | ||
| }; | ||
| }, [scriptSrc]); | ||
|
|
||
| return ( | ||
| flickrId && ( | ||
| <SocialContentWrapper | ||
| align={align} | ||
| tool="flickr" | ||
| url={flickrId} | ||
| linkText={linkText} | ||
| > | ||
| <figure className="flickr-content"> | ||
| <a | ||
| data-flickr-embed={true} | ||
| data-footer={galleryData?.links[0].dataset.footer} | ||
| data-header={galleryData?.links[0].dataset.header} | ||
| href={galleryData?.links[0].href ?? ''} | ||
| title={galleryData?.links[0].title} | ||
| > | ||
| <img | ||
| src={galleryData?.images[0].src} | ||
| width="100%" | ||
| alt={galleryData?.images[0].alt ?? ''} | ||
| /> | ||
| </a> | ||
| </figure> | ||
| </SocialContentWrapper> | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * Property types. | ||
| * @property {Object} propTypes Property types. | ||
| * @static | ||
| */ | ||
| FlickrView.propTypes = { | ||
| flickrId: PropTypes.string.isRequired, | ||
| align: PropTypes.string, | ||
| }; | ||
|
|
||
| /** | ||
| * Default properties. | ||
| * @property {Object} defaultProps Default properties. | ||
| * @static | ||
| */ | ||
| FlickrView.defaultProps = { | ||
| align: 'center', | ||
| }; | ||
|
|
||
| export default FlickrView; |
Oops, something went wrong.