(function ( wpI18n, wpBlocks, wpElement, wpEditor, wpComponents ) { const { __ } = wpI18n; const { Component, Fragment } = wpElement; const { registerBlockType } = wpBlocks; const { InspectorControls, BlockControls, MediaUpload, AlignmentToolbar, PanelColorSettings } = wpEditor; const { RangeControl, BaseControl, PanelBody, TextControl, IconButton, Button, Toolbar, Tooltip } = wpComponents; const socialBlockIconContent = ( ); const socialBlockIcon = {socialBlockIconContent}; const ICONS_SET = { blogger: ( ), facebook: ( ), flickr: ( ), google: ( ), instagram: ( ), linkedin: ( ), mail: ( ), picasa: ( ), pinterest: ( ), reddit: ( ), skype: ( ), soundcloud: ( ), tumblr: ( ), twitter: ( ), vimeo: ( ), youtube: ( ), }; const ICONS_SET_NEW = { blogger: ( ), facebook: ( ), flickr: ( ), google: ( ), instagram: ( ), linkedin: ( ), mail: ( ), picasa: ( ), pinterest: ( ), reddit: ( ), skype: ( ), soundcloud: ( ), tumblr: ( ), twitter: ( ), vimeo: ( ), youtube: ( ), }; class AdvSocialBlock extends Component { constructor() { super( ...arguments ); this.state = { currentSelected: 0, searchedText: '', } } componentWillMount() { const { attributes, setAttributes } = this.props; const currentBlockConfig = advgbDefaultConfig['advgb-social-links']; // No override attributes of blocks inserted before if (attributes.changed !== true) { if (typeof currentBlockConfig === 'object' && currentBlockConfig !== null) { Object.keys(currentBlockConfig).map((attribute) => { if (typeof attributes[attribute] === 'boolean') { attributes[attribute] = !!currentBlockConfig[attribute]; } else { attributes[attribute] = currentBlockConfig[attribute]; } }); } // Finally set changed attribute to true, so we don't modify anything again setAttributes( { changed: true } ); } } render() { const { attributes, setAttributes, isSelected } = this.props; const { items, align, iconSize, iconSpace } = attributes; const { currentSelected, searchedText } = this.state; const matchedIcons = Object.keys( ICONS_SET ).filter( (key) => key.indexOf( searchedText.toLowerCase().trim() ) > -1 ); return ( setAttributes( { items: [ ...items, { icon: '', iconID: '', link: '#' } ] } ) } /> { this.setState( { currentSelected: Math.max(currentSelected - 1, 0) } ); if (items.length > 1) { setAttributes( { items: items.filter( (item, index) => index !== currentSelected ), } ) } else { setAttributes( { items: [ { icon: '', iconID: '', iconColor: '', link: '#' } ] } ) } } } /> setAttributes( { align: value === undefined ? 'center' : value } ) } /> this.setState( { searchedText: value } ) } />
{matchedIcons.map( ( key, index ) => (
{ let newItems = items.map( (item, index) => { if (index === currentSelected) { item = { ...item, icon: key, iconID: '', }; } return item; } ); setAttributes( { items: newItems } ) } }> { ICONS_SET[key] }
) ) } { let newItems = items.map( (item, index) => { if (index === currentSelected) { item = { ...item, icon: media.sizes.thumbnail ? media.sizes.thumbnail.url : media.sizes.full.url, iconID: media.id, }; } return item; } ); setAttributes( { items: newItems } ) } } render={ ( { open } ) => ( ) } />
{ let newItems = items.map( (item, index) => { if (index === currentSelected) { item = { ...item, iconColor: value, }; } return item; } ); setAttributes( { items: newItems } ) }, }, ] } /> setAttributes( { iconSize: value } ) } /> setAttributes( { iconSpace: value } ) } />
{items.map( ( item, index ) => ( this.setState( { currentSelected: index } ) } style={ { width: iconSize + 'px', height: iconSize + 'px', marginLeft: iconSpace + 'px', marginRight: iconSpace + 'px', color: item.iconColor, } } > {!!item.icon ? (item.icon in ICONS_SET) ? {ICONS_SET[item.icon]} : { : {socialBlockIconContent} } ) ) }
{isSelected && (
{ __( 'Social link:' ) } { let newItems = items.map( (vl, idx) => { if (idx === parseInt(currentSelected)) vl = { ...vl, link: value }; return vl; } ); return setAttributes( { items: newItems } ); } } />
) }
) } } const socialBlockAttrs = { items: { type: 'array', default: [ { icon: '', iconID: '', iconColor: '', link: '#' }, { icon: '', iconID: '', iconColor: '', link: '#' }, { icon: '', iconID: '', iconColor: '', link: '#' }, ], }, align: { type: 'string', }, iconSize: { type: 'number', default: 24, }, iconSpace: { type: 'number', default: 5, }, changed: { type: 'boolean', default: false, }, }; registerBlockType( 'advgb/social-links', { title: __( 'Social Links' ), description: __( 'Insert your social link with icon.' ), icon: { src: socialBlockIcon, foreground: typeof advgbBlocks !== 'undefined' ? advgbBlocks.color : undefined, }, category: 'advgb-category', keywords: [ __( 'social icons' ), __( 'shares' ), __( 'icon link' ) ], attributes: socialBlockAttrs, edit: AdvSocialBlock, save: function ( { attributes } ) { const { items, align, iconSize, iconSpace } = attributes; return (
{items.map( ( item, index ) => ( {!!item.icon ? (item.icon in ICONS_SET) ? {ICONS_SET_NEW[item.icon]} : { : {socialBlockIconContent} } ) ) }
); }, deprecated: [ { attributes: socialBlockAttrs, save: function ( { attributes } ) { const { items, align, iconSize, iconSpace } = attributes; return (
{items.map( ( item, index ) => ( {!!item.icon ? (item.icon in ICONS_SET) ? {ICONS_SET_NEW[item.icon]} : { : {socialBlockIconContent} } ) ) }
); }, }, { attributes: socialBlockAttrs, save: function ( { attributes } ) { const { items, align, iconSize, iconSpace } = attributes; return (
{items.map( ( item, index ) => ( {!!item.icon ? (item.icon in ICONS_SET) ? {ICONS_SET[item.icon]} : { : {socialBlockIconContent} } ) ) }
); } } ] } ) })( wp.i18n, wp.blocks, wp.element, wp.editor, wp.components );