diff --git a/assets/scripts/editor/blocks/email.js b/assets/scripts/editor/blocks/email.js index 0e71c28..ca4aee3 100644 --- a/assets/scripts/editor/blocks/email.js +++ b/assets/scripts/editor/blocks/email.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/email' @@ -17,17 +17,17 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, createBlock, } = wp.blocks; -const { +const { PanelBody, Icon, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; @@ -35,7 +35,7 @@ import { iconEmail as blockicon } from '../utility/icons.js' registerBlockType( blockName, { title: __('E-mail', 'formality'), - description: __('Text field that accepts only valid email address.', 'formality'), + description: __('Text field that accepts only valid email address.', 'formality'), icon: blockicon, category: 'formality', attributes: { @@ -46,11 +46,8 @@ registerBlockType( blockName, { placeholder: { type: 'string', default: ''}, required: { type: 'boolean', default: false }, value: { type: 'string', default: ''}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, preview: { type: 'boolean', default: false }, }, example: { attributes: { preview: true } }, @@ -66,7 +63,7 @@ registerBlockType( blockName, { }], }, edit(props) { - + checkUID(props) let { name, label, placeholder, required, uid, value, rules, preview } = props.attributes let focus = props.isSelected @@ -104,8 +101,8 @@ registerBlockType( blockName, { , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/media.js b/assets/scripts/editor/blocks/media.js index b3026ff..7e5db87 100644 --- a/assets/scripts/editor/blocks/media.js +++ b/assets/scripts/editor/blocks/media.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/media' @@ -17,11 +17,11 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, } = wp.blocks; -const { +const { Icon, Button, BaseControl, @@ -42,7 +42,7 @@ import { iconPlay } from '../utility/icons.js' registerBlockType( blockName, { title: __('Media', 'formality'), - description: __('Hero image, how-to video or any type of visual content for your users.', 'formality'), + description: __('Hero image, how-to video or any type of visual content for your users.', 'formality'), icon: blockicon, category: 'formality_nav', attributes: { @@ -51,11 +51,7 @@ registerBlockType( blockName, { media_type: { type: 'string', default: ''}, media_id: { type: 'integer', default: 0}, exclude: { type: 'integer', default: 99}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, preview: { type: 'boolean', default: false }, }, example: { attributes: { preview: true } }, @@ -107,8 +103,8 @@ registerBlockType( blockName, { { media ? ( media_type == "video" ? { iconPlay } : ) : __('Please select an image or video, from the right sidebar.', 'formality') } , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/message.js b/assets/scripts/editor/blocks/message.js index caf3727..4a0bea6 100644 --- a/assets/scripts/editor/blocks/message.js +++ b/assets/scripts/editor/blocks/message.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/message' @@ -16,15 +16,15 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, } = wp.blocks; -const { +const { Icon, } = wp.components; -const { +const { RichText, InspectorControls, } = wp.blockEditor; @@ -33,18 +33,14 @@ import { iconMessage as blockicon } from '../utility/icons.js' registerBlockType( blockName, { title: __('Message', 'formality'), - description: __('Custom message/information for your users.', 'formality'), + description: __('Custom message/information for your users.', 'formality'), icon: blockicon, category: 'formality_nav', attributes: { //uid: { type: 'string', default: '' }, text: { type: 'string', default: ''}, exclude: { type: 'integer', default: 99}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, preview: { type: 'boolean', default: false }, }, example: { attributes: { preview: true } }, @@ -75,8 +71,8 @@ registerBlockType( blockName, { /> , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/multiple.js b/assets/scripts/editor/blocks/multiple.js index 91216f2..2afaf8a 100644 --- a/assets/scripts/editor/blocks/multiple.js +++ b/assets/scripts/editor/blocks/multiple.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/multiple' @@ -24,12 +24,12 @@ const { sprintf, } = wp.i18n; -const { +const { registerBlockType, createBlock, } = wp.blocks; -const { +const { PanelBody, PanelRow, TextControl, @@ -41,7 +41,7 @@ const { Icon, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; @@ -51,7 +51,7 @@ const { registerBlockType( blockName, { title: __('Multiple choice', 'formality'), - description: __('Checkbox grid with all available options that users can select.', 'formality'), + description: __('Checkbox grid with all available options that users can select.', 'formality'), icon: blockicon, category: 'formality', attributes: { @@ -63,16 +63,9 @@ registerBlockType( blockName, { halfwidth: { type: 'boolean', default: false }, value: { type: 'string', default: ''}, style: { type: 'string', default: 'default' }, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, - options: { - type: 'string|array', - attribute: 'options', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + options: { type: 'string|array', attribute: 'options', default: [], }, option_labels: { type: 'boolean', default: false }, single: { type: 'boolean', default: false }, option_grid: { type: 'integer', default: 2 }, @@ -96,9 +89,9 @@ registerBlockType( blockName, { let { name, label, placeholder, required, uid, value, rules, preview, options, option_labels, option_grid, single, style } = props.attributes let focus = props.isSelected if ( preview ) { return getPreview(props.name) } - + if(!option_grid && style=="default") { option_grid = 1; } - + return ([ @@ -182,7 +175,7 @@ registerBlockType( blockName, { >
{ placeholder }
- {options.map(option => { + {options.map(option => { return
, ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/number.js b/assets/scripts/editor/blocks/number.js index 3ec4110..bf767c7 100644 --- a/assets/scripts/editor/blocks/number.js +++ b/assets/scripts/editor/blocks/number.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/number' @@ -18,19 +18,19 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, createBlock, } = wp.blocks; -const { +const { PanelBody, PanelRow, TextControl, Icon, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; @@ -38,7 +38,7 @@ import { iconNumber as blockicon } from '../utility/icons.js' registerBlockType( blockName, { title: __('Number', 'formality'), - description: __('Number field, accept integer or float number value', 'formality'), + description: __('Number field, accept integer or float number value', 'formality'), icon: blockicon, category: 'formality', attributes: { @@ -49,11 +49,8 @@ registerBlockType( blockName, { required: { type: 'boolean', default: false }, halfwidth: { type: 'boolean', default: false }, value: { type: 'string', default: ''}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, value_min: { type: 'string', default: ''}, value_max: { type: 'string', default: ''}, value_step: { type: 'string', default: '1'}, @@ -72,7 +69,7 @@ registerBlockType( blockName, { }], }, edit(props) { - + checkUID(props) let { name, label, placeholder, required, uid, value, rules, preview, value_min, value_max, value_step } = props.attributes let focus = props.isSelected @@ -132,8 +129,8 @@ registerBlockType( blockName, { , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/rating.js b/assets/scripts/editor/blocks/rating.js index dc2a7d7..04ae62d 100644 --- a/assets/scripts/editor/blocks/rating.js +++ b/assets/scripts/editor/blocks/rating.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/rating' @@ -18,12 +18,12 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, createBlock, } = wp.blocks; -const { +const { PanelBody, PanelRow, TextControl, @@ -31,7 +31,7 @@ const { Icon, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; @@ -45,7 +45,7 @@ import { glyphStar, glyphRhombus, glyphHeart } from '../utility/icons.js' registerBlockType( blockName, { title: __('Rating', 'formality'), - description: __('Ask your users for a rating. Score from one to ten.', 'formality'), + description: __('Ask your users for a rating. Score from one to ten.', 'formality'), icon: blockicon, category: 'formality', attributes: { @@ -56,11 +56,8 @@ registerBlockType( blockName, { required: { type: 'boolean', default: false }, halfwidth: { type: 'boolean', default: false }, value: { type: 'string', default: ''}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, icon: { type: 'string', default: 'star'}, value_max: { type: 'string', default: '10'}, preview: { type: 'boolean', default: false }, @@ -78,12 +75,12 @@ registerBlockType( blockName, { }], }, edit(props) { - - checkUID(props) + + checkUID(props) let { name, label, placeholder, required, uid, value, rules, preview, icon, value_max } = props.attributes let focus = props.isSelected if ( preview ) { return getPreview(props.name) } - + let arrayrating = [] let iconSvg = "" for (let radiovalue = 1; radiovalue <= value_max; radiovalue++) { arrayrating.push(radiovalue) } @@ -91,8 +88,8 @@ registerBlockType( blockName, { case 'heart' : iconSvg = glyphHeart; break; case 'star' : iconSvg = glyphStar; break; case 'rhombus' : iconSvg = glyphRhombus; break; - } - + } + return ([ @@ -135,7 +132,7 @@ registerBlockType( blockName, { className="formality__input" >
{ placeholder }
- {arrayrating.map(singlerating => { + {arrayrating.map(singlerating => { return , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/select.js b/assets/scripts/editor/blocks/select.js index bd070fe..9dd1c16 100644 --- a/assets/scripts/editor/blocks/select.js +++ b/assets/scripts/editor/blocks/select.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/select' @@ -21,12 +21,12 @@ import { iconSelect as blockicon } from '../utility/icons.js' const { __ } = wp.i18n; -const { +const { registerBlockType, createBlock, } = wp.blocks; -const { +const { PanelBody, TextControl, ToggleControl, @@ -34,13 +34,13 @@ const { Icon, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; registerBlockType( blockName, { title: __('Select', 'formality'), - description: __('Dropdown list with all available options that users can select.', 'formality'), + description: __('Dropdown list with all available options that users can select.', 'formality'), icon: blockicon, category: 'formality', attributes: { @@ -51,11 +51,8 @@ registerBlockType( blockName, { required: { type: 'boolean', default: false }, halfwidth: { type: 'boolean', default: false }, value: { type: 'string', default: ''}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, options: { type: 'string|array', attribute: 'options', @@ -148,8 +145,8 @@ registerBlockType( blockName, { , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/switch.js b/assets/scripts/editor/blocks/switch.js index bca9e62..a049972 100644 --- a/assets/scripts/editor/blocks/switch.js +++ b/assets/scripts/editor/blocks/switch.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/switch' @@ -18,18 +18,18 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, createBlock, } = wp.blocks; -const { +const { PanelBody, RadioControl, Icon, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; @@ -37,7 +37,7 @@ import { iconSwitch as blockicon } from '../utility/icons.js' registerBlockType( blockName, { title: __('Switch', 'formality'), - description: __('Checkbox input, good for true/false answer or acceptance field.', 'formality'), + description: __('Checkbox input, good for true/false answer or acceptance field.', 'formality'), icon: blockicon, category: 'formality', attributes: { @@ -49,11 +49,8 @@ registerBlockType( blockName, { halfwidth: { type: 'boolean', default: false }, style: { type: 'string', default: 'switch' }, value: { type: 'string', default: ''}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, preview: { type: 'boolean', default: false }, }, example: { attributes: { preview: true } }, @@ -69,7 +66,7 @@ registerBlockType( blockName, { }], }, edit(props) { - + checkUID(props) let { name, label, placeholder, required, uid, value, rules, preview, style } = props.attributes let focus = props.isSelected @@ -122,8 +119,8 @@ registerBlockType( blockName, { , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/text.js b/assets/scripts/editor/blocks/text.js index 29f1b4a..f9197f9 100644 --- a/assets/scripts/editor/blocks/text.js +++ b/assets/scripts/editor/blocks/text.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/text' @@ -17,17 +17,17 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, createBlock, } = wp.blocks; -const { +const { PanelBody, Icon, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; @@ -35,7 +35,7 @@ import { iconText as blockicon } from '../utility/icons.js' registerBlockType( blockName, { title: __('Text', 'formality'), - description: __('Standard text field, good for short answers and 1 line information.', 'formality'), + description: __('Standard text field, good for short answers and 1 line information.', 'formality'), icon: blockicon, category: 'formality', attributes: { @@ -46,11 +46,8 @@ registerBlockType( blockName, { required: { type: 'boolean', default: false }, halfwidth: { type: 'boolean', default: false }, value: { type: 'string', default: ''}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, preview: { type: 'boolean', default: false }, }, supports: { @@ -66,11 +63,11 @@ registerBlockType( blockName, { }], }, edit(props) { - + checkUID(props) let { name, label, placeholder, required, uid, value, rules, preview } = props.attributes let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + if ( preview ) { return getPreview(props.name) } return ([ @@ -104,8 +101,8 @@ registerBlockType( blockName, { , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/blocks/textarea.js b/assets/scripts/editor/blocks/textarea.js index fb4731a..50c7e8f 100644 --- a/assets/scripts/editor/blocks/textarea.js +++ b/assets/scripts/editor/blocks/textarea.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/textarea' @@ -18,19 +18,19 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, createBlock, } = wp.blocks; -const { +const { PanelBody, PanelRow, TextControl, Icon, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; @@ -38,7 +38,7 @@ import { iconTextarea as blockicon } from '../utility/icons.js' registerBlockType( blockName, { title: __('Textarea', 'formality'), - description: __('Multi-line area, good for texts or long answers.', 'formality'), + description: __('Multi-line area, good for texts or long answers.', 'formality'), icon: blockicon, category: 'formality', attributes: { @@ -50,11 +50,8 @@ registerBlockType( blockName, { value: { type: 'string', default: ''}, rows: { type: 'string', default: '3'}, max_length: { type: 'string', default: '500'}, - rules: { - type: 'string|array', - attribute: 'rules', - default: [], - }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, preview: { type: 'boolean', default: false }, }, example: { attributes: { preview: true } }, @@ -70,7 +67,7 @@ registerBlockType( blockName, { }], }, edit(props) { - + checkUID(props) let { name, label, placeholder, required, uid, value, rules, preview, rows, max_length } = props.attributes let focus = props.isSelected @@ -127,8 +124,8 @@ registerBlockType( blockName, { , ]) - }, + }, save () { return null }, -}); \ No newline at end of file +}); diff --git a/assets/scripts/editor/main/init.js b/assets/scripts/editor/main/init.js index eac57ef..44d29c0 100644 --- a/assets/scripts/editor/main/init.js +++ b/assets/scripts/editor/main/init.js @@ -23,7 +23,7 @@ if(!wp.data.select('core/edit-post').isEditorPanelOpened('formality-sidebar/formality-sidebar')) { wp.data.dispatch('core/edit-post').toggleEditorPanelOpened('formality-sidebar/formality-sidebar') } - + } //remove formality blocks from other post type editor @@ -57,7 +57,7 @@ }) } -//launch functions on domready +//launch functions on domready wp.domReady( function() { if(document.body.classList.contains('post-type-formality_form')) { forcePanel() @@ -65,4 +65,4 @@ } else { removeBlocks() } - }); \ No newline at end of file + }); diff --git a/assets/scripts/editor/utility/blocks.js b/assets/scripts/editor/utility/blocks.js index 026a370..66c6983 100644 --- a/assets/scripts/editor/utility/blocks.js +++ b/assets/scripts/editor/utility/blocks.js @@ -1,7 +1,7 @@ import React from 'react' -const { +const { PanelBody, PanelRow, Button, @@ -11,12 +11,18 @@ const { ButtonGroup, BaseControl, RepeaterControl, + Dropdown, + ColorPicker } = wp.components; const { Fragment, } = wp.element; +const { + MediaUpload, +} = wp.blockEditor; + const { __ } = wp.i18n; @@ -42,7 +48,7 @@ const { __ } = wp.i18n; if(block.attributes.uid == currentuid) { clones++ if(clones>0) { - //if clone uid exist, reset this uid + //if clone uid exist, reset this uid props.setAttributes({uid: trueuid }) } } @@ -50,7 +56,6 @@ const { __ } = wp.i18n; } }; - //setAttibutes shortcut let editAttribute = (props, key, value, toggle = false) => { let tempArray = {} @@ -59,12 +64,10 @@ const { __ } = wp.i18n; props.setAttributes(tempArray) }; - //setAttibutes image shortcut let editAttributeMedia = (props, key, value, type = false) => { let value_id = 0 let value_type = "" - //console.log(value) if(value) { value_id = value.id; value_type = value.type; @@ -79,6 +82,26 @@ const { __ } = wp.i18n; if(type) { editAttribute(props, key + '_type', value_type) } }; +//set dynamic background options + let editDbg = (props, key, value) => { + let dbg = { ...props.attributes.dbg } + if(key=="image") { + if(value) { + dbg['id'] = value.id; + dbg['image'] = value.sizes.full.url; + } else { + delete dbg['id'] + delete dbg['image'] + } + } else { + if(value) { + dbg['color'] = value.hex; + } else { + delete dbg['color'] + } + } + props.setAttributes({dbg: dbg}) + }; //get fields list let getBlocks = (current) => { @@ -101,7 +124,7 @@ const { __ } = wp.i18n; const value = props.attributes.value if(options) { let options_array = [{ label: __('None', 'formality'), value: "" }]; - options.map(option => { + options.map(option => { options_array.push({ label: ( option["label"] ? option["label"] : option["value"] ), value: option["value"] }) }) return editAttribute(props, "value", value)} - /> + /> } else { return editAttribute(props, "value", value)} - /> + /> } }; @@ -133,24 +156,23 @@ const { __ } = wp.i18n; 'formality/rating', ] if(exclude) { - for( var i = 0; i < types.length; i++){ + for( var i = 0; i < types.length; i++){ if ( types[i] === exclude) { - types.splice(i, 1); + types.splice(i, 1); } } } return types; } - //return standard sidebar let mainOptions = (props, width = true, message = false) => { - + let name = props.attributes.name let placeholder = props.attributes.placeholder let required = props.attributes.required let halfwidth = props.attributes.halfwidth - + return ([ { let initopen = false @@ -204,14 +225,17 @@ const { __ } = wp.i18n; return initopen } - //return advanced sidebar let advancedPanel = (props, showname = true) => { - + //const name = props.attributes.name const label = props.attributes.label const rules = props.attributes.rules const uid = props.attributes.uid + const dbg = props.attributes.dbg ? props.attributes.dbg : {}; + const dbgimage = 'image' in dbg ? dbg.image : ''; + const dbgid = 'id' in dbg ? dbg.id : ''; + const dbgcolor = 'color' in dbg ? dbg.color : ''; //const value = props.attributes.value //const options = props.attributes.options //const focus = props.isSelected @@ -225,12 +249,12 @@ const { __ } = wp.i18n; } return initopen } - + return ([ 0 ? "format-image" : "" ) } > , ] }} + + editDbg(props, "image", file)} + allowedTypes={ [ 'image' ] } + value={ dbgid } + render={({ open }) => ( + + + { dbgimage ?   : ''} + { dbgcolor ? : ''} + + )} + /> + ( + + ) } + renderContent={ () => ( + editDbg(props, "color", value)} + disableAlpha + /> + ) } + /> + , ]) } @@ -323,4 +391,4 @@ const { __ } = wp.i18n; advancedPanel, hasRules, getPreview, - } \ No newline at end of file + } diff --git a/assets/scripts/public/core/dbg.js b/assets/scripts/public/core/dbg.js new file mode 100644 index 0000000..43e15ea --- /dev/null +++ b/assets/scripts/public/core/dbg.js @@ -0,0 +1,33 @@ +import { el, uid } from './helpers' + +export default { + init() { + const original = getComputedStyle(document.documentElement).getPropertyValue('--formality_bg'); + document.documentElement.style.setProperty('--formality_bg_backup', original); + }, + check($field) { + const image = $field.attr('data-dbg-image') + const color = $field.attr('data-dbg-color') + if(image) { + const $newbg = $('') + const img = new Image() + $newbg.appendTo(el("bg")) + img.onload = function() { + $newbg.css({ 'background-image': 'url('+image+')', 'opacity': 1 }) + if(color) { document.documentElement.style.setProperty('--formality_bg', color) } + } + img.src = image; + } else { + const $bgs = $(el("bg", true, ' span')) + if($bgs.length) { + $bgs.filter(':not(:last-child)').remove() + $bgs.filter(':last-child').css({ 'opacity': 0 }) + } + } + if(color) { + if(!image) { document.documentElement.style.setProperty('--formality_bg', color) } + } else { + document.documentElement.style.setProperty('--formality_bg', 'var(--formality_bg_backup)') + } + }, +} diff --git a/assets/scripts/public/core/helpers.js b/assets/scripts/public/core/helpers.js index 3cddb96..d48b76c 100644 --- a/assets/scripts/public/core/helpers.js +++ b/assets/scripts/public/core/helpers.js @@ -17,6 +17,7 @@ export let uid = ($element, form = true) => { export let el = (name, parent = true, child = "") => { const el = { form: "formality", + bg: "formality__bg", section: "formality__section", section_header: "formality__section__header", field: "formality__field", @@ -82,7 +83,7 @@ export let focusFirst = (delay = 10) => { } export let isMobile = () => { let hasTouchScreen = false - if ("maxTouchPoints" in navigator) { + if ("maxTouchPoints" in navigator) { hasTouchScreen = navigator.maxTouchPoints > 0 } else if ("msMaxTouchPoints" in navigator) { hasTouchScreen = navigator.msMaxTouchPoints > 0 @@ -101,4 +102,4 @@ export let isMobile = () => { } } return hasTouchScreen -} \ No newline at end of file +} diff --git a/assets/scripts/public/core/uiux.js b/assets/scripts/public/core/uiux.js index 71b8390..5c097a8 100644 --- a/assets/scripts/public/core/uiux.js +++ b/assets/scripts/public/core/uiux.js @@ -1,6 +1,7 @@ import { el, isMobile, focusFirst } from './helpers' import hints from './hints' import hooks from './hooks' +import dbg from './dbg' export default { init() { @@ -10,12 +11,16 @@ export default { this.keyboard() }, focus() { + //check if dynamic background exist + const has_dbg = $('[data-dbg-image], [data-dbg-color]').length + if(has_dbg) { dbg.init() } //toggle focus class on input wrap $(el("field", true, " :input")).on("focus", function() { const $parentEl = $(this).closest(el("field")) $parentEl.addClass(el("field_focus", false)) hints.show($parentEl) hooks.event('FieldFocus', { el: $parentEl[0] }) + if(has_dbg) { dbg.check($parentEl) } }).on("blur", function() { $(el("field_focus")).removeClass(el("field_focus", false)) hints.clear() @@ -132,4 +137,7 @@ export default { } } }, + dbg($field) { + + } } diff --git a/assets/styles/admin/sidebar_form.scss b/assets/styles/admin/sidebar_form.scss index 2ec68f7..34f68c1 100644 --- a/assets/styles/admin/sidebar_form.scss +++ b/assets/styles/admin/sidebar_form.scss @@ -78,7 +78,7 @@ > .components-base-control { margin: 0 0 1.5em; &.components-base-control--nomargin { - margin: 0; + margin: 0; } &.components-base-control--hidden { display: none; @@ -109,5 +109,22 @@ margin-bottom: 0; } } + .components-base-control--dbg { + .components-base-control__field { + position: relative; + .components-dropdown { + position: absolute; + top: 0; + right: 0; + border: 4px solid white; + border-radius: 50%; + box-sizing: content-box; + margin: 0; + * { + box-sizing: border-box; + } + } + } + } } -} \ No newline at end of file +} diff --git a/assets/styles/public/templates/_standard.scss b/assets/styles/public/templates/_standard.scss index 2fbfdf5..b4ce407 100644 --- a/assets/styles/public/templates/_standard.scss +++ b/assets/styles/public/templates/_standard.scss @@ -367,3 +367,25 @@ body.body-formality--standard { } } } + +body.body-formality { + transition: background-color 0.3s linear; + .formality__bg { + &:before { + transition: background-color 0.3s linear; + } + span { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + transition: opacity 0.3s linear; + opacity: 0; + z-index: 1; + } + } +} diff --git a/formality.php b/formality.php index 5295665..6cb5f20 100755 --- a/formality.php +++ b/formality.php @@ -12,7 +12,7 @@ * Plugin Name: Formality * Plugin URI: https://formality.dev * Description: Forms made simple (and cute). Designless, multistep, conversational, secure, all-in-one WordPress forms plugin. - * Version: 1.1.1 + * Version: 1.2 * Author: Michele Giorgi * Author URI: https://giorgi.io * License: GPLv3 @@ -51,7 +51,7 @@ /** * Currently plugin version. */ -define( 'FORMALITY_VERSION', '1.1.1' ); +define( 'FORMALITY_VERSION', '1.2' ); /** * The code that runs during plugin activation. diff --git a/includes/class-formality-activator.php b/includes/class-formality-activator.php index dd34b2d..8386e8e 100755 --- a/includes/class-formality-activator.php +++ b/includes/class-formality-activator.php @@ -19,7 +19,7 @@ class Formality_Activator { public static function activate() { //check wp version $wp_now = get_bloginfo('version'); - $wp_min = 5.4; + $wp_min = 5.5; if($wp_now < $wp_min) { $message = '

' . __( 'Not so fast...', 'formality' ) . '

'; $message .= '

' . sprintf( /* translators: %s: WordPress version */ __( 'Formality requires WordPress %s or higher!', 'formality' ), $wp_min) . '
'; diff --git a/includes/class-formality-setup.php b/includes/class-formality-setup.php index c1b8e3d..bdefaba 100755 --- a/includes/class-formality-setup.php +++ b/includes/class-formality-setup.php @@ -41,10 +41,8 @@ class Formality_Setup { * @param string $version The version of this plugin. */ public function __construct( $formality, $version ) { - $this->formality = $formality; $this->version = $version; - } /** @@ -53,7 +51,6 @@ public function __construct( $formality, $version ) { * @since 1.0.0 */ public function post_types() { - $form_labels = array( 'name' => _x( 'Forms', 'post type general name', 'formality' ), 'singular_name' => _x( 'Form', 'post type singular name', 'formality' ), @@ -70,20 +67,18 @@ public function post_types() { 'not_found' => __( 'No forms found.', 'formality' ), 'not_found_in_trash' => __( 'No forms found in Trash.', 'formality' ) ); - register_post_type('formality_form', array( 'labels' => $form_labels, 'rewrite' => array('slug' => 'form'), 'public' => true, 'show_in_rest' => true, - 'has_archive' => true, + 'has_archive' => false, 'show_ui' => true, 'supports' => array( 'title', 'author', 'editor', 'custom-fields' ), 'show_in_menu' => 'formality_menu', ) ); - $result_labels = array( 'name' => _x( 'Results', 'post type general name', 'formality' ), 'singular_name' => _x( 'Result', 'post type singular name', 'formality' ), @@ -100,11 +95,10 @@ public function post_types() { 'not_found' => __( 'No results found.', 'formality' ), 'not_found_in_trash' => __( 'No results found in Trash.', 'formality' ) ); - register_post_type('formality_result', array( 'labels' => $result_labels, - 'supports' => array('title','author'), + 'supports' => array('title', 'author'), 'public' => false, 'exclude_from_search' => true, 'publicly_queryable' => false, @@ -118,7 +112,6 @@ public function post_types() { 'show_in_menu' => 'formality_menu' ) ); - register_taxonomy('formality_tax', 'formality_result', array( 'label' => __( 'Form' ), @@ -133,7 +126,5 @@ public function post_types() { 'show_in_nav_menus' => false ) ); - } - } diff --git a/package.json b/package.json index 05b9b9d..6179152 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Formality", - "version": "1.1.1", + "version": "1.2.0", "author": "Michele Giorgi ", "homepage": "https://giorgi.io", "private": true, diff --git a/public/class-formality-fields.php b/public/class-formality-fields.php index 240e1c6..a1d6e60 100755 --- a/public/class-formality-fields.php +++ b/public/class-formality-fields.php @@ -34,14 +34,14 @@ public function field($type, $options, $form_type, $index) { "required" => false, "value" => "", "placeholder" => $this->default_placeholder($type), - "rules" => [] + "rules" => [], + "dbg" => [] ); $options = $options + $defaults; $options["value"] = $this->prefill($options, $type); - $class = $type == "message" || $type == "media" ? "formality__" . $type : ( "formality__field formality__field--" . $type); $input_wrap = $options["exclude"] ? "%s" : ($this->label($options) . '

%s
'); - $wrap = '
conditional($options["rules"]) . ' data-type="' . $type . '">'.$input_wrap.'
'; - if(($type=="step")&&($index==1)) { + $wrap = '
field_classes($type, $options) . $this->conditional($options["rules"]) . $this->dbg($options["dbg"]) . '>'.$input_wrap.'
'; + if($type=="step" && $index==1) { $wrap = '
%s'; } else if($index==1) { $wrap = '
'.$wrap; @@ -56,6 +56,20 @@ public function field($type, $options, $form_type, $index) { return sprintf($wrap, $field); } + /** + * Get field classes + * + * @since 1.2 + */ + public function field_classes($type, $options) { + $classes = 'class="' . ( $type == "message" || $type == "media" ? "formality__" . $type : ( "formality__field formality__field--" . $type) ); + $classes .= $options["halfwidth"] ? " formality__field--half" : ""; + $classes .= $options["required"] ? " formality__field--required" : ""; + $classes .= $options["value"] ? " formality__field--filled" : ""; + $classes .= '" data-type="'.$type.'"'; + return $classes; + } + /** * Get default placeholders * @@ -184,6 +198,18 @@ public function conditional($rules) { } } + /** + * Build input dynamic background attributes + * + * @since 1.2 + */ + public function dbg($dbg) { + $attrs = ''; + if(isset($dbg['image']) && $dbg['image']) { $attrs .= ' data-dbg-image="'.esc_attr($dbg['image']).'"'; } + if(isset($dbg['color']) && $dbg['color']) { $attrs .= ' data-dbg-color="'.esc_attr($dbg['color']).'"'; } + return $attrs; + } + /** * Build input label * @@ -201,8 +227,8 @@ public function label($options, $label="", $before = "", $after = "", $class = " * @since 1.0.0 */ public function step($options) { - $step = ($options["name"] ? ('

'.$options["name"].'

') : '' ); - $step .= ($options["description"] ? ('

'.$options["description"].'

') : '' ); + $step = (isset($options["name"]) && $options["name"] ? ('

'.$options["name"].'

') : '' ); + $step .= (isset($options["description"]) && $options["description"] ? ('

'.$options["description"].'

') : '' ); if($step) { $step = '
'.$step.'
'; } return $step; } diff --git a/public/class-formality-public.php b/public/class-formality-public.php index 6d63074..f7b5fe5 100755 --- a/public/class-formality-public.php +++ b/public/class-formality-public.php @@ -39,8 +39,9 @@ private function load_dependencies() { * @since 1.0.0 */ public function enqueue_assets() { - wp_enqueue_style( $this->formality . "-public", plugin_dir_url(__DIR__) . 'dist/styles/formality-public.css', array(), $this->version, 'all' ); - wp_enqueue_script( $this->formality . "-public", plugin_dir_url(__DIR__) . 'dist/scripts/formality-public.js', array( 'jquery', 'wp-i18n' ), $this->version, false ); + $isform = is_singular('formality_form'); + wp_register_style( $this->formality . "-public", plugin_dir_url(__DIR__) . 'dist/styles/formality-public.css', array(), $this->version, 'all' ); + wp_register_script( $this->formality . "-public", plugin_dir_url(__DIR__) . 'dist/scripts/formality-public.js', array( 'jquery', 'wp-i18n' ), $this->version, !$isform ); wp_localize_script($this->formality . "-public", 'formality', array( 'ajax' => admin_url('admin-ajax.php'), 'api' => esc_url_raw(rest_url()), @@ -48,6 +49,10 @@ public function enqueue_assets() { 'login_nonce' => wp_create_nonce('wp_rest') )); wp_set_script_translations( $this->formality . "-public", 'formality', plugin_dir_path( __DIR__ ) . 'languages' ); + if($isform) { + wp_enqueue_style( $this->formality . "-public"); + wp_enqueue_script( $this->formality . "-public"); + } } /** @@ -94,6 +99,8 @@ public function shortcode() { endwhile; wp_reset_query(); wp_reset_postdata(); + wp_enqueue_style( $this->formality . "-public"); + wp_enqueue_script( $this->formality . "-public"); } } return $content; @@ -106,7 +113,7 @@ public function shortcode() { * @since 1.0.0 */ public function page_template( $template ) { - if ( is_single() && (get_post_type()=='formality_form') ) { + if(is_singular('formality_form')) { $file_name = 'single-formality-form.php'; if ( locate_template( $file_name ) ) { $template = locate_template( $file_name ); @@ -124,7 +131,7 @@ public function page_template( $template ) { * @since 1.0.0 */ public function body_classes( $body_classes ) { - if ( is_single() && (get_post_type()=='formality_form') ) { + if(is_singular('formality_form')) { $layout_class = get_post_meta(get_the_ID(), '_formality_bg_layout', true); $body_classes[] = 'body-formality'; $body_classes[] = 'body-formality--' . ($layout_class ? $layout_class : 'standard'); @@ -140,7 +147,7 @@ public function body_classes( $body_classes ) { * @since 1.0.1 */ public function remove_styles() { - if ( is_single() && (get_post_type()=='formality_form') ) { + if(is_singular('formality_form')) { global $wp_styles; $queue = $wp_styles->queue; $clean_queue = array(); diff --git a/public/class-formality-submit.php b/public/class-formality-submit.php index 5218c0c..eba4806 100755 --- a/public/class-formality-submit.php +++ b/public/class-formality-submit.php @@ -47,20 +47,25 @@ public function decode_token($action, $string) { $output = false; $encrypt_method = "AES-256-CBC"; $token = get_option('formality_token'); - $secret_key = $token[0]; - $secret_iv = $token[1]; - $secret_offset = $token[2]; + if(is_array($token) && count($token) == 3) { + $secret_key = $token[0]; + $secret_iv = $token[1]; + $secret_offset = $token[2]; - $key = hash('sha256', $secret_key); - $iv = substr(hash('sha256', $secret_iv), 0, 16); + $key = hash('sha256', $secret_key); + $iv = substr(hash('sha256', $secret_iv), 0, 16); - if($action == 'encrypt') { - $string = intval($string) + $secret_offset; - $output = openssl_encrypt($string, $encrypt_method, $key, 0, $iv); - $output = base64_encode($output); + if($action == 'encrypt') { + $string = intval($string) + $secret_offset; + $output = openssl_encrypt($string, $encrypt_method, $key, 0, $iv); + $output = base64_encode($output); + } else { + $output = openssl_decrypt(base64_decode($string), $encrypt_method, $key, 0, $iv); + $output = intval($output) - $secret_offset; + } } else { - $output = openssl_decrypt(base64_decode($string), $encrypt_method, $key, 0, $iv); - $output = intval($output) - $secret_offset; + $token = [ uniqid(mt_rand()), uniqid(mt_rand()), rand(999, time()) ]; + add_option( 'formality_token', $token, '', 'no' ); } return $output; } @@ -228,9 +233,13 @@ public function save($data) { } //create fields array - foreach ( $data['fields'] as $fieldname => $fieldvalue ) { - $metas[$fieldname] = $fieldvalue; - if(!$title) { $title = $fieldvalue; } + if(isset($data['fields']) && is_array($data['fields'])) { + foreach ( $data['fields'] as $fieldname => $fieldvalue ) { + $metas[$fieldname] = $fieldvalue; + if(!$title) { $title = $fieldvalue; } + } + } else { + $title = __('There is no data to save', 'formality'); } //save result diff --git a/public/templates/single.php b/public/templates/single.php index fd100f6..2541d9b 100644 --- a/public/templates/single.php +++ b/public/templates/single.php @@ -7,11 +7,12 @@ > - + + - > + > - \ No newline at end of file + diff --git a/readme.txt b/readme.txt index 5117e1d..db52fda 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Donate link: https://www.paypal.me/michelegiorgi/ Tags: form, conversational, multistep, design form, gutenberg, block editor Requires at least: 5.5 Tested up to: 5.6 -Stable tag: 1.1.1 +Stable tag: 1.2 Requires PHP: 7.0 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.txt @@ -41,7 +41,7 @@ You can extend Formality plugin functionality with its custom hooks. Formality h = Translations = -Formality is now available in 2 languages. You can now choose between English and Italian. You can help translating Formality to your language on [translate.wordpress.org](https://translate.wordpress.org/projects/wp-plugins/formality) +Formality is now available in 3 languages. You can now choose between English, Italian and Indonesian (Thanks to [Kharis Sulistiyono](https://profiles.wordpress.org/kharisblank/)). You can help translating Formality to your language on [translate.wordpress.org](https://translate.wordpress.org/projects/wp-plugins/formality) == Installation == @@ -61,6 +61,13 @@ You will find **Formality** menu in your WordPress admin screen. == Changelog == += 1.2 = +Release Date: January 10th, 2021 + +* Dynamic background +* Conditional assets loading +* PHP 8.0 compatibility + = 1.1.1 = Release Date: December 29th, 2020