-
Notifications
You must be signed in to change notification settings - Fork 381
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4048 from ampproject/feature/page-ordering
Page reordering from carousel
- Loading branch information
Showing
7 changed files
with
307 additions
and
29 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,6 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { createContext } from '@wordpress/element'; | ||
|
|
||
| export default createContext( { actions: {}, state: {} } ); |
106 changes: 106 additions & 0 deletions
106
assets/src/edit-story/components/dropzone/dropZoneProvider.js
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,106 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useCallback, useState } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Context from './context'; | ||
|
|
||
| function DropZoneProvider( { children } ) { | ||
| const [ dropZones, setDropZones ] = useState( [] ); | ||
| const [ hoveredDropZone, setHoveredDropZone ] = useState( null ); | ||
|
|
||
| const registerDropZone = useCallback( | ||
| ( dropZone ) => { | ||
| // If dropZone isn't registered yet. | ||
| if ( dropZone && ! dropZones.some( ( { node } ) => node === dropZone.node ) ) { | ||
| setDropZones( ( oldDropZones ) => ( [ ...oldDropZones, dropZone ] ) ); | ||
| } | ||
| }, [ dropZones ] ); | ||
|
|
||
| // Unregisters dropzones which node's don't exist. | ||
| const unregisterDropZone = useCallback( | ||
| ( dropZone ) => { | ||
| // If dropZone needs unregistering. | ||
| if ( dropZones.some( ( dz ) => dz === dropZone ) ) { | ||
| setDropZones( ( oldDropZones ) => oldDropZones.filter( ( dz ) => dz !== dropZone ) ); | ||
| } | ||
| }, [ dropZones ] ); | ||
|
|
||
| const isWithinElementBounds = ( element, x, y ) => { | ||
| const rect = element.getBoundingClientRect(); | ||
| if ( rect.bottom === rect.top || rect.left === rect.right ) { | ||
| return false; | ||
| } | ||
| return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom; | ||
| }; | ||
|
|
||
| const resetHoverState = () => { | ||
| setHoveredDropZone( null ); | ||
| }; | ||
|
|
||
| const onDragOver = ( evt ) => { | ||
| evt.preventDefault(); | ||
| // Get the hovered dropzone. // @todo Consider dropzone inside dropzone, will we need this? | ||
| const foundDropZones = dropZones.filter( ( dropZone ) => { | ||
| return isWithinElementBounds( dropZone.node, evt.clientX, evt.clientY ); | ||
| } ); | ||
|
|
||
| // If there was a dropzone before and nothing was found now, reset. | ||
| if ( hoveredDropZone && ! foundDropZones.length ) { | ||
| resetHoverState(); | ||
| return; | ||
| } | ||
| const foundDropZone = foundDropZones[ 0 ]; | ||
| // If dropzone not found, do nothing. | ||
| if ( ! foundDropZone || ! foundDropZone.node ) { | ||
| return; | ||
| } | ||
| const rect = foundDropZone.node.getBoundingClientRect(); | ||
|
|
||
| const position = { | ||
| x: evt.clientX - rect.left < rect.right - evt.clientX ? 'left' : 'right', | ||
| y: evt.clientY - rect.top < rect.bottom - evt.clientY ? 'top' : 'bottom', | ||
| }; | ||
|
|
||
| setHoveredDropZone( { | ||
| node: foundDropZone.node, | ||
| position, | ||
| } ); | ||
| }; | ||
|
|
||
| const state = { | ||
| state: { | ||
| hoveredDropZone, | ||
| dropZones, | ||
| }, | ||
| actions: { | ||
| registerDropZone, | ||
| unregisterDropZone, | ||
| resetHoverState, | ||
| }, | ||
| }; | ||
| return ( | ||
| <div onDragOver={ onDragOver }> | ||
| <Context.Provider value={ state }> | ||
| { children } | ||
| </Context.Provider> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| DropZoneProvider.propTypes = { | ||
| children: PropTypes.oneOfType( [ | ||
| PropTypes.arrayOf( PropTypes.node ), | ||
| PropTypes.node, | ||
| ] ).isRequired, | ||
| }; | ||
|
|
||
| export default DropZoneProvider; |
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,110 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import PropTypes from 'prop-types'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useRef, useState, useLayoutEffect } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import useDropZone from './useDropZone'; | ||
|
|
||
| const DropZoneComponent = styled.div` | ||
| position: relative; | ||
| ${ ( { borderPosition, theme, highlightWidth } ) => borderPosition && ` | ||
| :after { | ||
| height: 100%; | ||
| top: 0; | ||
| display: block; | ||
| position: absolute; | ||
| width: ${ highlightWidth }px; | ||
| background: ${ theme.colors.action }; | ||
| content: ''; | ||
| ${ borderPosition }: -${ highlightWidth / 2 }px; | ||
| } | ||
| ` } | ||
| `; | ||
|
|
||
| function DropZone( { children, onDrop, pageIndex } ) { | ||
| const dropZoneElement = useRef( null ); | ||
| const [ dropZone, setDropZone ] = useState( null ); | ||
| const { actions: { registerDropZone, unregisterDropZone, resetHoverState }, state: { hoveredDropZone } } = useDropZone(); | ||
|
|
||
| useLayoutEffect( () => { | ||
| setDropZone( { | ||
| node: dropZoneElement.current, | ||
| } ); | ||
| }, [ dropZoneElement ] ); | ||
|
|
||
| useLayoutEffect( () => { | ||
| registerDropZone( dropZone ); | ||
| return () => { | ||
| unregisterDropZone( dropZone ); | ||
| setDropZone( null ); | ||
| }; | ||
| }, [ dropZone, registerDropZone, unregisterDropZone ] ); | ||
|
|
||
| const getDragType = ( { dataTransfer } ) => { | ||
| if ( dataTransfer ) { | ||
| if ( Array.isArray( dataTransfer.types ) ) { | ||
| if ( dataTransfer.types.includes( 'Files' ) ) { | ||
| return 'file'; | ||
| } | ||
| if ( dataTransfer.types.includes( 'text/html' ) ) { | ||
| return 'html'; | ||
| } | ||
| } else { | ||
| // For Edge, types is DomStringList and not array. | ||
| if ( dataTransfer.types.contains( 'Files' ) ) { | ||
| return 'file'; | ||
| } | ||
| if ( dataTransfer.types.contains( 'text/html' ) ) { | ||
| return 'html'; | ||
| } | ||
| } | ||
| } | ||
| return 'default'; | ||
| }; | ||
|
|
||
| const onDropHandler = ( evt ) => { | ||
| resetHoverState(); | ||
| if ( dropZoneElement.current ) { | ||
| const rect = dropZoneElement.current.getBoundingClientRect(); | ||
| // Get the relative position of the dropping point based on the dropzone. | ||
| const relativePosition = { | ||
| x: evt.clientX - rect.left < rect.right - evt.clientX ? 'left' : 'right', | ||
| y: evt.clientY - rect.top < rect.bottom - evt.clientY ? 'top' : 'bottom', | ||
| }; | ||
| if ( 'default' === getDragType( evt ) ) { | ||
| onDrop( evt, { position: relativePosition, pageIndex } ); | ||
| } | ||
| // @todo Support for files when it becomes necessary. | ||
| } | ||
| evt.preventDefault(); | ||
| }; | ||
|
|
||
| const isDropZoneActive = dropZoneElement.current && hoveredDropZone && hoveredDropZone.node === dropZoneElement.current; | ||
| // @todo Currently static, can be adjusted for other use cases. | ||
| const highlightWidth = 5; | ||
| return ( | ||
| <DropZoneComponent highlightWidth={ highlightWidth } borderPosition={ isDropZoneActive ? hoveredDropZone.position.x : null } ref={ dropZoneElement } onDrop={ onDropHandler }> | ||
| { children } | ||
| </DropZoneComponent> | ||
| ); | ||
| } | ||
|
|
||
| DropZone.propTypes = { | ||
| children: PropTypes.oneOfType( [ | ||
| PropTypes.arrayOf( PropTypes.node ), | ||
| PropTypes.node, | ||
| ] ).isRequired, | ||
| onDrop: PropTypes.func, | ||
| pageIndex: PropTypes.number, | ||
| }; | ||
|
|
||
| export default DropZone; |
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,15 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useContext } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Context from './context'; | ||
|
|
||
| function useDropZone() { | ||
| return useContext( Context ); | ||
| } | ||
|
|
||
| export default useDropZone; |