BossBey File Manager
PHP:
8.2.30
OS:
Linux
User:
imagivibe
Root
/
.
/
wp-content
/
plugins
/
porto-functionality
/
builders
/
elements
/
type
/
elements
📤 Upload
📝 New File
📁 New Folder
Close
Editing: meta.js
/** * Post Type Builder - Meta element * * @since 2.3.0 */ import PortoStyleOptionsControl, {portoGenerateStyleOptionsCSS} from '../../../../shortcodes/assets/blocks/controls/style-options'; import PortoTypographyControl, {portoGenerateTypographyCSS} from '../../../../shortcodes/assets/blocks/controls/typography'; import {portoAddHelperClasses} from '../../../../shortcodes/assets/blocks/controls/editor-extra-classes'; ( function ( wpI18n, wpBlocks, wpBlockEditor, wpComponents ) { "use strict"; const __ = wpI18n.__, registerBlockType = wpBlocks.registerBlockType, InspectorControls = wpBlockEditor.InspectorControls, SelectControl = wpComponents.SelectControl, TextControl = wpComponents.TextControl, RangeControl = wpComponents.RangeControl, ToggleControl = wpComponents.ToggleControl, Disabled = wpComponents.Disabled, PanelBody = wpComponents.PanelBody, ServerSideRender = wp.serverSideRender, useEffect = wp.element.useEffect; const tmp_options = document.getElementById( 'content_type_term' ).options, porto_all_terms = []; for (var i = 0; i < tmp_options.length; i++) { var option = tmp_options[i]; if ( option.value ) { porto_all_terms.push( { label: option.innerText.trim(), value: option.value } ); } } const PortoTBMeta = function ( { attributes, setAttributes, name, clientId } ) { let selectorCls = 'porto-tb-meta'; useEffect( () => { if ( ! attributes.el_class || -1 !== porto_tb_ids.indexOf( attributes.el_class ) ) { // new or just cloned const new_cls = 'porto-tb-meta-' + Math.ceil( Math.random() * 10000 ); attributes.el_class = new_cls; setAttributes( { el_class: new_cls } ); } porto_tb_ids.push( attributes.el_class ); return () => { const arr_index = porto_tb_ids.indexOf( attributes.el_class ); if ( -1 !== arr_index ) { porto_tb_ids.splice( arr_index, 1 ); } } }, [], ); if ( attributes.el_class ) { selectorCls = attributes.el_class; } let attrs = { field: attributes.field, date_format: attributes.date_format, icon_cls: attributes.icon_cls, icon_pos: attributes.icon_pos, el_class: attributes.el_class, className: attributes.className }; if ( porto_content_type ) { attrs.content_type = porto_content_type; if ( porto_content_type_value ) { attrs.content_type_value = porto_content_type_value; } } if ( attributes.font_settings && typeof attributes.font_settings.alignment != 'undefined' ) { delete attributes.font_settings.alignment; } let internalStyle = '', font_settings = Object.assign( {}, attributes.font_settings ); const style_options = Object.assign( {}, attributes.style_options ); if ( attributes.font_settings ) { let fontAtts = attributes.font_settings; internalStyle += portoGenerateTypographyCSS( fontAtts, selectorCls ); } if ( attributes.spacing || 0 === attributes.spacing ) { if ( 'right' === attributes.icon_pos ) { internalStyle += '.' + selectorCls + ' .porto-tb-icon{margin-left:' + Number( attributes.spacing ) + 'px}'; } else { internalStyle += '.' + selectorCls + ' .porto-tb-icon{margin-right:' + Number( attributes.spacing ) + 'px}'; } } // add helper classes to parent block element if ( attributes.className ) { portoAddHelperClasses( attributes.className, clientId ); } return ( <> <InspectorControls> <PanelBody title={ __( 'General', 'porto-functionality' ) }> <SelectControl label={ __( 'Field', 'porto-functionality' ) } value={ attributes.field } options={ [ { 'label': __( 'Author', 'porto-functionality' ), 'value': 'author' }, { 'label': __( 'Published Date', 'porto-functionality' ), 'value': 'published_date' }, { 'label': __( 'Modified Date', 'porto-functionality' ), 'value': 'modified_date' }, { 'label': __( 'Comments', 'porto-functionality' ), 'value': 'comments' }, { 'label': __( 'Comments Number', 'porto-functionality' ), 'value': 'comments_number' }, { 'label': __( 'Product SKU', 'porto-functionality' ), 'value': 'sku' } ].concat( porto_all_terms ) } onChange={ ( value ) => { setAttributes( { field: value } ); } } /> { ( 'published_date' === attrs.field || 'modified_date' === attrs.field ) && ( <TextControl label={ __( 'Date Format', 'porto-functionality' ) } help={ __( 'j = 1-31, F = January-December, M = Jan-Dec, m = 01-12, n = 1-12', 'porto-functionality' ) } value={ attributes.date_format } onChange={ ( value ) => { setAttributes( { date_format: value } ); } } /> ) } <TextControl label={ __( 'Icon Class (ex: fas fa-pencil-alt)', 'porto-functionality' ) } value={ attributes.icon_cls } onChange={ ( value ) => { setAttributes( { icon_cls: value } ); } } /> { attrs.icon_cls && ( <SelectControl label={ __( 'Icon Position', 'porto-functionality' ) } value={ attributes.icon_pos } options={ [ { label: __( 'Left', 'porto-functionality' ), value: '' }, { label: __( 'Right', 'porto-functionality' ), value: 'right' } ] } onChange={ ( value ) => { setAttributes( { icon_pos: value } ); } } /> ) } { attrs.icon_cls && ( <RangeControl label={ __( 'Spacing (px)', 'porto-functionality' ) } help={ __( 'Spacing between icon and meta', 'porto-functionality' ) } value={ attributes.spacing } min="0" max="100" allowReset={ true } onChange={ ( value ) => { setAttributes( { spacing: value } ); } } /> ) } </PanelBody> </InspectorControls> <InspectorControls group="styles"> <PanelBody title={ __( 'Font Settings', 'porto-functionality' ) } initialOpen={ true }> <PortoTypographyControl label={ __( 'Typography', 'porto-functionality' ) } value={ font_settings } options={ { } } onChange={ ( value ) => { setAttributes( { font_settings: value } ); } } /> </PanelBody> <PortoStyleOptionsControl label={ __( 'Style Options', 'porto-functionality' ) } value={ style_options } options={ {} } onChange={ ( value ) => { setAttributes( { style_options: value } ); } } /> </InspectorControls> <Disabled> <style> { internalStyle } { portoGenerateStyleOptionsCSS( style_options, selectorCls, clientId ) } </style> <ServerSideRender block={ name } attributes={ attrs } /> </Disabled> </> ) } registerBlockType( 'porto-tb/porto-meta', { title: __( 'Meta', 'porto-functionality' ), icon: 'porto', category: 'porto-tb', keywords: [ 'type builder', 'mini', 'card', 'post date', 'post published date', 'post modified date', 'author', 'categories', 'comments count', 'product sku' ], description: __( 'Display the meta of a post or loop.', 'porto-functionality' ), attributes: { content_type: { type: 'string', }, content_type_value: { type: 'string', }, field: { type: 'string', }, date_format: { type: 'string', }, icon_cls: { type: 'string', }, icon_pos: { type: 'string', }, spacing: { type: 'int', }, font_settings: { type: 'object', default: {}, }, style_options: { type: 'object', }, el_class: { type: 'string', } }, edit: PortoTBMeta, save: function () { return null; } } ); } )( wp.i18n, wp.blocks, wp.blockEditor, wp.components );
Save
Cancel