@wordpress/block-library/build/cover/edit.js.map

{"version":3,"sources":["@wordpress/block-library/src/cover/edit.js"],"names":["IMAGE_BACKGROUND_TYPE","VIDEO_BACKGROUND_TYPE","ALLOWED_MEDIA_TYPES","INNER_BLOCKS_TEMPLATE","align","fontSize","placeholder","INNER_BLOCKS_ALLOWED_BLOCKS","retrieveFastAverageColor","fastAverageColor","FastAverageColor","backgroundImageStyles","url","backgroundImage","dimRatioToClass","ratio","Math","round","CoverEdit","arguments","state","isDark","imageRef","videoRef","changeIsDarkIfRequired","bind","handleBackgroundMode","prevProps","props","attributes","setAttributes","className","noticeOperations","noticeUI","overlayColor","setOverlayColor","backgroundType","dimRatio","focalPoint","hasParallax","id","onSelectMedia","media","undefined","mediaType","media_type","type","toggleParallax","setDimRatio","style","backgroundColor","color","backgroundPosition","x","y","controls","open","value","onChange","label","placeholderIcon","icon","title","instructions","createErrorNotice","classes","display","element","current","getColorAsync","newIsDark","setState","Component","withNotices"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport FastAverageColor from 'fast-average-color';\nimport tinycolor from 'tinycolor2';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFocalPointPicker,\n\tIconButton,\n\tPanelBody,\n\tRangeControl,\n\tToggleControl,\n\tToolbar,\n\twithNotices,\n} from '@wordpress/components';\nimport { compose } from '@wordpress/compose';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tInnerBlocks,\n\tInspectorControls,\n\tMediaPlaceholder,\n\tMediaUpload,\n\tMediaUploadCheck,\n\tPanelColorSettings,\n\twithColors,\n} from '@wordpress/editor';\nimport { Component, createRef, Fragment } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport icon from './icon';\n\n/**\n * Module Constants\n */\nexport const IMAGE_BACKGROUND_TYPE = 'image';\nexport const VIDEO_BACKGROUND_TYPE = 'video';\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];\nconst INNER_BLOCKS_TEMPLATE = [\n\t[ 'core/paragraph', {\n\t\talign: 'center',\n\t\tfontSize: 'large',\n\t\tplaceholder: __( 'Write title…' ),\n\t} ],\n];\nconst INNER_BLOCKS_ALLOWED_BLOCKS = [ 'core/button', 'core/heading', 'core/paragraph' ];\n\nfunction retrieveFastAverageColor() {\n\tif ( ! retrieveFastAverageColor.fastAverageColor ) {\n\t\tretrieveFastAverageColor.fastAverageColor = new FastAverageColor();\n\t}\n\treturn retrieveFastAverageColor.fastAverageColor;\n}\n\nexport function backgroundImageStyles( url ) {\n\treturn url ?\n\t\t{ backgroundImage: `url(${ url })` } :\n\t\t{};\n}\n\nexport function dimRatioToClass( ratio ) {\n\treturn ( ratio === 0 || ratio === 50 ) ?\n\t\tnull :\n\t\t'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) );\n}\n\nclass CoverEdit extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\t\tthis.state = {\n\t\t\tisDark: false,\n\t\t};\n\t\tthis.imageRef = createRef();\n\t\tthis.videoRef = createRef();\n\t\tthis.changeIsDarkIfRequired = this.changeIsDarkIfRequired.bind( this );\n\t}\n\n\tcomponentDidMount() {\n\t\tthis.handleBackgroundMode();\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tthis.handleBackgroundMode( prevProps );\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tattributes,\n\t\t\tsetAttributes,\n\t\t\tclassName,\n\t\t\tnoticeOperations,\n\t\t\tnoticeUI,\n\t\t\toverlayColor,\n\t\t\tsetOverlayColor,\n\t\t} = this.props;\n\t\tconst {\n\t\t\tbackgroundType,\n\t\t\tdimRatio,\n\t\t\tfocalPoint,\n\t\t\thasParallax,\n\t\t\tid,\n\t\t\turl,\n\t\t} = attributes;\n\t\tconst onSelectMedia = ( media ) => {\n\t\t\tif ( ! media || ! media.url ) {\n\t\t\t\tsetAttributes( { url: undefined, id: undefined } );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tlet mediaType;\n\t\t\t// for media selections originated from a file upload.\n\t\t\tif ( media.media_type ) {\n\t\t\t\tif ( media.media_type === IMAGE_BACKGROUND_TYPE ) {\n\t\t\t\t\tmediaType = IMAGE_BACKGROUND_TYPE;\n\t\t\t\t} else {\n\t\t\t\t\t// only images and videos are accepted so if the media_type is not an image we can assume it is a video.\n\t\t\t\t\t// Videos contain the media type of 'file' in the object returned from the rest api.\n\t\t\t\t\tmediaType = VIDEO_BACKGROUND_TYPE;\n\t\t\t\t}\n\t\t\t} else { // for media selections originated from existing files in the media library.\n\t\t\t\tif (\n\t\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE &&\n\t\t\t\t\tmedia.type !== VIDEO_BACKGROUND_TYPE\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tmediaType = media.type;\n\t\t\t}\n\n\t\t\tsetAttributes( {\n\t\t\t\turl: media.url,\n\t\t\t\tid: media.id,\n\t\t\t\tbackgroundType: mediaType,\n\t\t\t} );\n\t\t};\n\t\tconst toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );\n\t\tconst setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );\n\n\t\tconst style = {\n\t\t\t...(\n\t\t\t\tbackgroundType === IMAGE_BACKGROUND_TYPE ?\n\t\t\t\t\tbackgroundImageStyles( url ) :\n\t\t\t\t\t{}\n\t\t\t),\n\t\t\tbackgroundColor: overlayColor.color,\n\t\t};\n\n\t\tif ( focalPoint ) {\n\t\t\tstyle.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;\n\t\t}\n\n\t\tconst controls = (\n\t\t\t<Fragment>\n\t\t\t\t<BlockControls>\n\t\t\t\t\t{ !! url && (\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t\t\t<Toolbar>\n\t\t\t\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\t\t\t\tvalue={ id }\n\t\t\t\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Edit media' ) }\n\t\t\t\t\t\t\t\t\t\t\t\ticon=\"edit\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Toolbar>\n\t\t\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t) }\n\t\t\t\t</BlockControls>\n\t\t\t\t{ !! url && (\n\t\t\t\t\t<InspectorControls>\n\t\t\t\t\t\t<PanelBody title={ __( 'Cover Settings' ) }>\n\t\t\t\t\t\t\t{ IMAGE_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Fixed Background' ) }\n\t\t\t\t\t\t\t\t\tchecked={ hasParallax }\n\t\t\t\t\t\t\t\t\tonChange={ toggleParallax }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ IMAGE_BACKGROUND_TYPE === backgroundType && ! hasParallax && (\n\t\t\t\t\t\t\t\t<FocalPointPicker\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Focal Point Picker' ) }\n\t\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\t\tvalue={ focalPoint }\n\t\t\t\t\t\t\t\t\tonChange={ ( value ) => setAttributes( { focalPoint: value } ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<PanelColorSettings\n\t\t\t\t\t\t\t\ttitle={ __( 'Overlay' ) }\n\t\t\t\t\t\t\t\tinitialOpen={ true }\n\t\t\t\t\t\t\t\tcolorSettings={ [ {\n\t\t\t\t\t\t\t\t\tvalue: overlayColor.color,\n\t\t\t\t\t\t\t\t\tonChange: setOverlayColor,\n\t\t\t\t\t\t\t\t\tlabel: __( 'Overlay Color' ),\n\t\t\t\t\t\t\t\t} ] }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Background Opacity' ) }\n\t\t\t\t\t\t\t\t\tvalue={ dimRatio }\n\t\t\t\t\t\t\t\t\tonChange={ setDimRatio }\n\t\t\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\t\t\t\tstep={ 10 }\n\t\t\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</PanelColorSettings>\n\t\t\t\t\t\t</PanelBody>\n\t\t\t\t\t</InspectorControls>\n\t\t\t\t) }\n\t\t\t</Fragment>\n\t\t);\n\n\t\tif ( ! url ) {\n\t\t\tconst placeholderIcon = <BlockIcon icon={ icon } />;\n\t\t\tconst label = __( 'Cover' );\n\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t{ controls }\n\t\t\t\t\t<MediaPlaceholder\n\t\t\t\t\t\ticon={ placeholderIcon }\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tlabels={ {\n\t\t\t\t\t\t\ttitle: label,\n\t\t\t\t\t\t\tinstructions: __( 'Drag an image or a video, upload a new one or select a file from your library.' ),\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\taccept=\"image/*,video/*\"\n\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\tnotices={ noticeUI }\n\t\t\t\t\t\tonError={ noticeOperations.createErrorNotice }\n\t\t\t\t\t/>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t\t}\n\n\t\tconst classes = classnames(\n\t\t\tclassName,\n\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t{\n\t\t\t\t'is-dark-theme': this.state.isDark,\n\t\t\t\t'has-background-dim': dimRatio !== 0,\n\t\t\t\t'has-parallax': hasParallax,\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t{ controls }\n\t\t\t\t<div\n\t\t\t\t\tdata-url={ url }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t>\n\t\t\t\t\t{ IMAGE_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t// Used only to programmatically check if the image is dark or not\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tref={ this.imageRef }\n\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tdisplay: 'none',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ VIDEO_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t<video\n\t\t\t\t\t\t\tref={ this.videoRef }\n\t\t\t\t\t\t\tclassName=\"wp-block-cover__video-background\"\n\t\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<div className=\"wp-block-cover__inner-container\">\n\t\t\t\t\t\t<InnerBlocks\n\t\t\t\t\t\t\ttemplate={ INNER_BLOCKS_TEMPLATE }\n\t\t\t\t\t\t\tallowedBlocks={ INNER_BLOCKS_ALLOWED_BLOCKS }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Fragment>\n\t\t);\n\t}\n\n\thandleBackgroundMode( prevProps ) {\n\t\tconst { attributes, overlayColor } = this.props;\n\t\tconst { dimRatio, url } = attributes;\n\t\t// If opacity is greater than 50 the dominant color is the overlay color,\n\t\t// so use that color for the dark mode computation.\n\t\tif ( dimRatio > 50 ) {\n\t\t\tif (\n\t\t\t\tprevProps &&\n\t\t\t\tprevProps.attributes.dimRatio > 50 &&\n\t\t\t\tprevProps.overlayColor.color === overlayColor.color\n\t\t\t) {\n\t\t\t\t// No relevant prop changes happened there is no need to apply any change.\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( ! overlayColor.color ) {\n\t\t\t\t// If no overlay color exists the overlay color is black (isDark )\n\t\t\t\tthis.changeIsDarkIfRequired( true );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis.changeIsDarkIfRequired(\n\t\t\t\ttinycolor( overlayColor.color ).isDark()\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\t\t// If opacity is lower than 50 the dominant color is the image or video color,\n\t\t// so use that color for the dark mode computation.\n\n\t\tif (\n\t\t\tprevProps &&\n\t\t\tprevProps.attributes.dimRatio <= 50 &&\n\t\t\tprevProps.attributes.url === url\n\t\t) {\n\t\t\t// No relevant prop changes happened there is no need to apply any change.\n\t\t\treturn;\n\t\t}\n\t\tconst { backgroundType } = attributes;\n\n\t\tlet element;\n\n\t\tswitch ( backgroundType ) {\n\t\t\tcase IMAGE_BACKGROUND_TYPE:\n\t\t\t\telement = this.imageRef.current;\n\t\t\t\tbreak;\n\t\t\tcase VIDEO_BACKGROUND_TYPE:\n\t\t\t\telement = this.videoRef.current;\n\t\t\t\tbreak;\n\t\t}\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\tretrieveFastAverageColor().getColorAsync( element, ( color ) => {\n\t\t\tthis.changeIsDarkIfRequired( color.isDark );\n\t\t} );\n\t}\n\n\tchangeIsDarkIfRequired( newIsDark ) {\n\t\tif ( this.state.isDark !== newIsDark ) {\n\t\t\tthis.setState( {\n\t\t\t\tisDark: newIsDark,\n\t\t\t} );\n\t\t}\n\t}\n}\n\nexport default compose( [\n\twithColors( { overlayColor: 'background-color' } ),\n\twithNotices,\n] )( CoverEdit );\n"]}