├── .gitignore ├── LICENSE ├── README.md ├── composer.json ├── esbuild.config.js ├── package-lock.json ├── package.json ├── public ├── css │ ├── vendor │ │ ├── flatpicker.min.css │ │ ├── font-awesome.min.css │ │ └── select2.min.css │ └── wp-custom-fields.min.css ├── fonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.svg │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.svg │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-regular-400.woff2 │ ├── fa-solid-900.eot │ ├── fa-solid-900.svg │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ └── fa-solid-900.woff2 ├── img │ ├── abel.png │ ├── alegreya.png │ ├── alegreyasans.png │ ├── amaticsc.png │ ├── amiri.png │ ├── archivonarrow.png │ ├── arial.png │ ├── arimo.png │ ├── arvo.png │ ├── asap.png │ ├── breeserif.png │ ├── cabin.png │ ├── cabinsketch.png │ ├── comicsansms.png │ ├── couriernew.png │ ├── crimsontext.png │ ├── cuprum.png │ ├── dosis.png │ ├── droidsans.png │ ├── droidserif.png │ ├── exo2.png │ ├── firasans.png │ ├── georgia.png │ ├── gloriahallelujah.png │ ├── hind.png │ ├── impact.png │ ├── inconsolata.png │ ├── indieflower.png │ ├── josefinsans.png │ ├── josefinslab.png │ ├── karla.png │ ├── lato.png │ ├── lobster.png │ ├── lora.png │ ├── lucidaconsole.png │ ├── lucidasans.png │ ├── merriweather.png │ ├── merriweathersans.png │ ├── montserrat.png │ ├── muli.png │ ├── notosans.png │ ├── notoserif.png │ ├── nunito.png │ ├── opensans.png │ ├── orbitron.png │ ├── oswald.png │ ├── pacifico.png │ ├── palatino.png │ ├── play.png │ ├── playfairdisplay.png │ ├── poppins.png │ ├── ptsans.png │ ├── ptsansnarrow.png │ ├── ptserif.png │ ├── quicksand.png │ ├── raleway.png │ ├── roboto.png │ ├── robotocondensed.png │ ├── robotoslab.png │ ├── shadowsintolight.png │ ├── signika.png │ ├── sourcecodepro.png │ ├── sourcesanspro.png │ ├── tahoma.png │ ├── timesnewroman.png │ ├── titilliumweb.png │ ├── transparency-grid.png │ ├── trebuchet.png │ ├── ubuntu.png │ ├── verdana.png │ ├── vollkorn.png │ └── yanonekaffeesatz.png └── js │ ├── vendor │ ├── alpha-color-picker.js │ ├── alpha-color-picker.min.js │ ├── flatpicker-i18n │ │ └── nl.js │ ├── flatpicker.min.js │ └── select2.min.js │ └── wpcf.js └── src ├── Base.php ├── Customizer.php ├── Field.php ├── Fields ├── Background.php ├── Border.php ├── Boxshadow.php ├── Button.php ├── Checkbox.php ├── Code.php ├── Colorpicker.php ├── Customizer │ ├── BackgroundProperties.php │ ├── Dimension.php │ ├── Heading.php │ ├── Textarea.php │ └── Typography.php ├── Datepicker.php ├── Dimension.php ├── Dimensions.php ├── Divider.php ├── Editor.php ├── Export.php ├── Heading.php ├── Html.php ├── Icons.php ├── Input.php ├── Location.php ├── Media.php ├── Radio.php ├── Repeatable.php ├── Select.php ├── Slider.php ├── Textarea.php └── Typography.php ├── Frame.php ├── Framework.php ├── Meta.php ├── Options.php ├── Styling.php ├── Validate.php ├── assets ├── js │ ├── app.ts │ ├── fields │ │ ├── button.field.ts │ │ ├── code.field.ts │ │ ├── colorpicker.field.ts │ │ ├── datepicker.field.ts │ │ ├── heading.field.ts │ │ ├── icons.field.ts │ │ ├── location.field.ts │ │ ├── media.field.ts │ │ ├── repeatable.field.ts │ │ ├── select.field.ts │ │ └── slider.field.ts │ ├── helpers │ │ └── dependency.helper.ts │ ├── layout │ │ ├── options.layout.ts │ │ └── tabs.layout.ts │ └── modules │ │ └── fields.module.ts └── less │ ├── attributes.less │ ├── fields.less │ ├── fields │ ├── boxshadow.less │ ├── button.less │ ├── colorpicker.less │ ├── datepicker.less │ ├── dimensions.less │ ├── heading.less │ ├── icons.less │ ├── location.less │ ├── media.less │ ├── radio.less │ ├── repeatable.less │ ├── select.less │ ├── slider.less │ └── typography.less │ ├── frame.less │ ├── grid.less │ └── wp-custom-fields.less ├── config ├── fonts.php ├── icons.php ├── scripts.php └── styles.php └── templates ├── frame.php └── nothing.php /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | *.git 3 | *.gitmodules 4 | *.gitignore 5 | *git/ 6 | node_modules 7 | 8 | wp-config.php 9 | wp-content/advanced-cache.php 10 | wp-content/backup-db/ 11 | wp-content/backups/ 12 | wp-content/blogs.dir/ 13 | wp-content/cache/ 14 | wp-content/upgrade/ 15 | wp-content/uploads/ 16 | wp-content/wp-cache-config.php 17 | wp-content/plugins/hello.php 18 | 19 | /.htaccess 20 | /license.txt 21 | /readme.html 22 | /sitemap.xml 23 | /sitemap.xml.gz -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wp-custom-fields-framework 2 | The wp custom fields framework is an options framework for WordPress aimed at speeding-up plug-in and theme development. 3 | 4 | It can be used to add custom fields to various locations. This allows you to add fields to many locations in the WordPress back-end, and enable users to modify additional data. 5 | 6 | In addition, WP Custom Fields can output the data stored in these fields to css styles. 7 | 8 | ## Installation 9 | For the installation procedure, look into [the Wiki of this Repository](https://github.com/makeitworkpress/wp-custom-fields/wiki)! 10 | 11 | ## Adding option pages, custom metaboxes and customizer fields 12 | WP Custom Fields allows you to: 13 | * Add amazing **custom option pages** in the admin dashboard 14 | * Add awesome **custom metaboxes** to posts, taxonomies and users 15 | * Add (custom) **customizer fields** and panels 16 | * Easily develop custom integrations, fields and extensions for adding information to WordPress 17 | * Have relational metaboxes, which can have two way connections between posts from the same post type, terms from the same taxonomies and users 18 | * Output data to css styles on the front-end. 19 | 20 | How to do this? Look into [the Wiki of this Repository](https://github.com/makeitworkpress/wp-custom-fields/wiki)! 21 | 22 | ## Author & Usage 23 | WP Custom Fields is maintained by Michiel from [Make it WorkPress](https://makeitwork.press/scripts/wp-custom-fields/). For usage and installation, please visit [the Wiki of this Repository](https://github.com/makeitworkpress/wp-custom-fields/wiki) 24 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "makeitworkpress/wp-custom-fields", 3 | "description": "WP Custom Fields allows you to add custom fields easily to options pages, post, taxonomy and usermeta and customizer fields.", 4 | "license": "GPL", 5 | "require": { 6 | "php": ">=5.3" 7 | }, 8 | "autoload": { 9 | "psr-4": { 10 | "MakeitWorkPress\\WP_Custom_Fields\\": "src" 11 | } 12 | }, 13 | "homepage": "https://github.com/makeitworkpress/wp-custom-fields", 14 | "authors": [ 15 | { 16 | "name": "Make it WorkPress", 17 | "email": "michiel@makeitworkpress.com", 18 | "homepage": "https://www.makeitworkpress.com" 19 | 20 | } 21 | ] 22 | } -------------------------------------------------------------------------------- /esbuild.config.js: -------------------------------------------------------------------------------- 1 | const esbuild = require('esbuild'); 2 | 3 | const config = { 4 | entryPoints: { 5 | 'wpcf': './src/assets/js/app.ts', 6 | }, 7 | outdir: './public/js/', 8 | bundle: true, 9 | minify: false, 10 | format: 'iife', 11 | platform: 'browser', 12 | target: 'es2022', 13 | loader: { 14 | '.ts': 'ts', 15 | }, 16 | plugins: [ 17 | { 18 | name: 'rebuild-notify', 19 | setup(build) { 20 | build.onEnd(result => { 21 | console.log(`build ended with ${result.errors.length} errors`); 22 | }) 23 | }, 24 | }, 25 | ], 26 | }; 27 | 28 | (async function() { 29 | const ctx = await esbuild.context(config); 30 | await ctx.watch(); 31 | })(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wp-custom-fields", 3 | "version": "1.0.0", 4 | "author": "Make it WorkPress", 5 | "description": "The package for the WP Custom Fields Framework", 6 | "devDependencies": { 7 | "@esbuild-plugins/node-resolve": "^0.2.2", 8 | "esbuild": "^0.25.0" 9 | }, 10 | "scripts": { 11 | "bundle": "node esbuild.config.js" 12 | } 13 | } -------------------------------------------------------------------------------- /public/fonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-brands-400.eot -------------------------------------------------------------------------------- /public/fonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /public/fonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-brands-400.woff -------------------------------------------------------------------------------- /public/fonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /public/fonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-regular-400.eot -------------------------------------------------------------------------------- /public/fonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /public/fonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-regular-400.woff -------------------------------------------------------------------------------- /public/fonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /public/fonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-solid-900.eot -------------------------------------------------------------------------------- /public/fonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /public/fonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-solid-900.woff -------------------------------------------------------------------------------- /public/fonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/fonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /public/img/abel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/abel.png -------------------------------------------------------------------------------- /public/img/alegreya.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/alegreya.png -------------------------------------------------------------------------------- /public/img/alegreyasans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/alegreyasans.png -------------------------------------------------------------------------------- /public/img/amaticsc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/amaticsc.png -------------------------------------------------------------------------------- /public/img/amiri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/amiri.png -------------------------------------------------------------------------------- /public/img/archivonarrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/archivonarrow.png -------------------------------------------------------------------------------- /public/img/arial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/arial.png -------------------------------------------------------------------------------- /public/img/arimo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/arimo.png -------------------------------------------------------------------------------- /public/img/arvo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/arvo.png -------------------------------------------------------------------------------- /public/img/asap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/asap.png -------------------------------------------------------------------------------- /public/img/breeserif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/breeserif.png -------------------------------------------------------------------------------- /public/img/cabin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/cabin.png -------------------------------------------------------------------------------- /public/img/cabinsketch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/cabinsketch.png -------------------------------------------------------------------------------- /public/img/comicsansms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/comicsansms.png -------------------------------------------------------------------------------- /public/img/couriernew.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/couriernew.png -------------------------------------------------------------------------------- /public/img/crimsontext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/crimsontext.png -------------------------------------------------------------------------------- /public/img/cuprum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/cuprum.png -------------------------------------------------------------------------------- /public/img/dosis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/dosis.png -------------------------------------------------------------------------------- /public/img/droidsans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/droidsans.png -------------------------------------------------------------------------------- /public/img/droidserif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/droidserif.png -------------------------------------------------------------------------------- /public/img/exo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/exo2.png -------------------------------------------------------------------------------- /public/img/firasans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/firasans.png -------------------------------------------------------------------------------- /public/img/georgia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/georgia.png -------------------------------------------------------------------------------- /public/img/gloriahallelujah.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/gloriahallelujah.png -------------------------------------------------------------------------------- /public/img/hind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/hind.png -------------------------------------------------------------------------------- /public/img/impact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/impact.png -------------------------------------------------------------------------------- /public/img/inconsolata.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/inconsolata.png -------------------------------------------------------------------------------- /public/img/indieflower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/indieflower.png -------------------------------------------------------------------------------- /public/img/josefinsans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/josefinsans.png -------------------------------------------------------------------------------- /public/img/josefinslab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/josefinslab.png -------------------------------------------------------------------------------- /public/img/karla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/karla.png -------------------------------------------------------------------------------- /public/img/lato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/lato.png -------------------------------------------------------------------------------- /public/img/lobster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/lobster.png -------------------------------------------------------------------------------- /public/img/lora.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/lora.png -------------------------------------------------------------------------------- /public/img/lucidaconsole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/lucidaconsole.png -------------------------------------------------------------------------------- /public/img/lucidasans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/lucidasans.png -------------------------------------------------------------------------------- /public/img/merriweather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/merriweather.png -------------------------------------------------------------------------------- /public/img/merriweathersans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/merriweathersans.png -------------------------------------------------------------------------------- /public/img/montserrat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/montserrat.png -------------------------------------------------------------------------------- /public/img/muli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/muli.png -------------------------------------------------------------------------------- /public/img/notosans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/notosans.png -------------------------------------------------------------------------------- /public/img/notoserif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/notoserif.png -------------------------------------------------------------------------------- /public/img/nunito.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/nunito.png -------------------------------------------------------------------------------- /public/img/opensans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/opensans.png -------------------------------------------------------------------------------- /public/img/orbitron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/orbitron.png -------------------------------------------------------------------------------- /public/img/oswald.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/oswald.png -------------------------------------------------------------------------------- /public/img/pacifico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/pacifico.png -------------------------------------------------------------------------------- /public/img/palatino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/palatino.png -------------------------------------------------------------------------------- /public/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/play.png -------------------------------------------------------------------------------- /public/img/playfairdisplay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/playfairdisplay.png -------------------------------------------------------------------------------- /public/img/poppins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/poppins.png -------------------------------------------------------------------------------- /public/img/ptsans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/ptsans.png -------------------------------------------------------------------------------- /public/img/ptsansnarrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/ptsansnarrow.png -------------------------------------------------------------------------------- /public/img/ptserif.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/ptserif.png -------------------------------------------------------------------------------- /public/img/quicksand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/quicksand.png -------------------------------------------------------------------------------- /public/img/raleway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/raleway.png -------------------------------------------------------------------------------- /public/img/roboto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/roboto.png -------------------------------------------------------------------------------- /public/img/robotocondensed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/robotocondensed.png -------------------------------------------------------------------------------- /public/img/robotoslab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/robotoslab.png -------------------------------------------------------------------------------- /public/img/shadowsintolight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/shadowsintolight.png -------------------------------------------------------------------------------- /public/img/signika.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/signika.png -------------------------------------------------------------------------------- /public/img/sourcecodepro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/sourcecodepro.png -------------------------------------------------------------------------------- /public/img/sourcesanspro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/sourcesanspro.png -------------------------------------------------------------------------------- /public/img/tahoma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/tahoma.png -------------------------------------------------------------------------------- /public/img/timesnewroman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/timesnewroman.png -------------------------------------------------------------------------------- /public/img/titilliumweb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/titilliumweb.png -------------------------------------------------------------------------------- /public/img/transparency-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/transparency-grid.png -------------------------------------------------------------------------------- /public/img/trebuchet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/trebuchet.png -------------------------------------------------------------------------------- /public/img/ubuntu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/ubuntu.png -------------------------------------------------------------------------------- /public/img/verdana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/verdana.png -------------------------------------------------------------------------------- /public/img/vollkorn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/vollkorn.png -------------------------------------------------------------------------------- /public/img/yanonekaffeesatz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/makeitworkpress/wp-custom-fields/901e56643b9fb2d71dadf7a826eccc13dfcc5a8b/public/img/yanonekaffeesatz.png -------------------------------------------------------------------------------- /public/js/vendor/alpha-color-picker.min.js: -------------------------------------------------------------------------------- 1 | (function(t){if(!t.wp.wpColorPicker.prototype._hasAlpha){var o="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==",e='
',r='
',a='',i=!1;if(__=wp.i18n.__,"undefined"!=typeof wpColorPickerL10n&&(i=void 0!==wpColorPickerL10n.current),i)var n='';else{n='';var l="",s=''}Color.fn.toString=function(){if(this._alpha<1)return this.toCSS("rgba",this._alpha).replace(/\s+/g,"");var t=parseInt(this._color,10).toString(16);return this.error?"":(t.length<6&&(t=("00000"+t).substr(-6)),"#"+t)},t.widget("wp.wpColorPicker",t.wp.wpColorPicker,{_hasAlpha:!0,_create:function(){if(t.support.iris){var p=this,c=p.element;if(t.extend(p.options,c.data()),"hue"===p.options.type)return p._createHueOnly();p.close=t.proxy(p.close,p),p.initialValue=c.val(),c.addClass("wp-color-picker"),i?(c.hide().wrap(r),p.wrap=c.parent(),p.toggler=t(n).insertBefore(c).css({backgroundColor:p.initialValue}).attr("title",__("Select Color")).attr("data-current",__("Current")),p.pickerContainer=t(e).insertAfter(c),p.button=t(a).addClass("hidden")):(c.parent("label").length||(c.wrap(l),p.wrappingLabelText=t(s).insertBefore(c).text(__("Color value"))),p.wrappingLabel=c.parent(),p.wrappingLabel.wrap(r),p.wrap=p.wrappingLabel.parent(),p.toggler=t(n).insertBefore(p.wrappingLabel).css({backgroundColor:p.initialValue}),p.toggler.find(".wp-color-result-text").text(__("Select Color")),p.pickerContainer=t(e).insertAfter(p.wrappingLabel),p.button=t(a)),p.options.defaultColor?(p.button.addClass("wp-picker-default").val(__("Default")),i||p.button.attr("aria-label",__("Select default color"))):(p.button.addClass("wp-picker-clear").val(__("clear")),i||p.button.attr("aria-label",__("Clear color"))),i?c.wrap('').after(p.button):(p.wrappingLabel.wrap('
> 63 | /> 64 | calendar_today 65 | clear 66 |
67 | 68 | 'datepicker', 81 | 'defaults' => '', 82 | 'labels' => [ 83 | 'clear' => __('Clear', 'wpcf'), 84 | 'toggle' => __('Toggle', 'wpcf') 85 | ], 86 | ]; 87 | 88 | return apply_filters( 'wp_custom_fields_datepicker_config', $configurations ); 89 | 90 | } 91 | 92 | } -------------------------------------------------------------------------------- /src/Fields/Dimension.php: -------------------------------------------------------------------------------- 1 | 33 | 34 |
35 | 36 | 37 | /> 38 | 43 |
44 | 45 | 'dimension', 57 | 'defaults' => [], 58 | 'properties' => [ 59 | 'units' => ['', 'px', 'em', '%', 'rem', 'vh', 'vw'] 60 | ], 61 | 'settings' => [ 62 | '[amount]', 63 | '[unit]' 64 | ] 65 | ]; 66 | 67 | return apply_filters( 'wp_custom_fields_dimension_config', $configurations ); 68 | 69 | } 70 | 71 | } -------------------------------------------------------------------------------- /src/Fields/Dimensions.php: -------------------------------------------------------------------------------- 1 | $side ) { ?> 33 | 34 |
35 | $step, 38 | 'icon' => 'border_' . $key, 39 | 'id' => $field['id'] . '-' . $key, 40 | 'name' => $field['name'] . '[' . $key . ']', 41 | 'placeholder' => $side, 42 | 'units' => $units, 43 | 'values' => isset($field['values'][$key]) ? $field['values'][$key] : [] 44 | ) ); 45 | ?> 46 |
47 | 48 | $step, 55 | 'icon' => 'border_outer', 56 | 'id' => $field['id'], 57 | 'name' => $field['name'], 58 | 'units' => $units, 59 | 'values' => isset($field['values']) ? $field['values'] : [] 60 | ] ); 61 | 62 | } 63 | 64 | } 65 | 66 | /** 67 | * Returns the global configurations for this field 68 | * 69 | * @return array $configurations The configurations 70 | */ 71 | public static function configurations(): array { 72 | 73 | $configurations = [ 74 | 'type' => 'dimensions', 75 | 'defaults' => [], 76 | 'properties' => [ 77 | 'sides' => [ 78 | 'top' => __('Top', 'wpcf'), 79 | 'right' => __('Right', 'wpcf'), 80 | 'bottom' => __('Bottom', 'wpcf'), 81 | 'left' => __('Left', 'wpcf') 82 | ] 83 | ] 84 | ]; 85 | 86 | return apply_filters( 'wp_custom_fields_dimensions_config', $configurations ); 87 | 88 | } 89 | 90 | } -------------------------------------------------------------------------------- /src/Fields/Divider.php: -------------------------------------------------------------------------------- 1 | 22 |
23 | 'divider', 34 | 'defaults' => '' 35 | ]; 36 | 37 | return apply_filters( 'wp_custom_fields_divider_config', $configurations ); 38 | 39 | } 40 | 41 | } -------------------------------------------------------------------------------- /src/Fields/Editor.php: -------------------------------------------------------------------------------- 1 | $setting ) { 26 | // The keys should be in the supported format 27 | if( ! in_array($key, ['wpautop', 'media_buttons', 'textarea_rows', 'tabindex', 'editor_css', 'editor_class', 'editor_height', 'teeny', 'dfw', 'tinymce', 'quicktags', 'drag_drop_upload']) ) { 28 | continue; 29 | } 30 | 31 | $settings[$key] = $setting; 32 | } 33 | } 34 | 35 | wp_editor($field['values'], $field['id']); 36 | 37 | } 38 | 39 | /** 40 | * Returns the global configurations for this field 41 | * 42 | * @return array $configurations The configurations 43 | */ 44 | public static function configurations(): array { 45 | 46 | $configurations = [ 47 | 'type' => 'editor', 48 | 'defaults' => '' 49 | ]; 50 | 51 | return apply_filters( 'wp_custom_fields_editor_config', $configurations ); 52 | 53 | } 54 | 55 | } -------------------------------------------------------------------------------- /src/Fields/Export.php: -------------------------------------------------------------------------------- 1 | ID, $key, true ); 43 | break; 44 | case 'user': 45 | 46 | if( ! current_user_can('edit_users') ) { 47 | return; 48 | } 49 | 50 | global $pagenow; 51 | $user = $pagenow == 'profile.php' ? get_current_user_id() : $_GET['user_id']; 52 | $options = get_term_meta( intval($user), $key, true ); 53 | 54 | break; 55 | case 'term': 56 | 57 | if( ! current_user_can('edit_posts') || ! current_user_can('edit_pages') ) { 58 | return; 59 | } 60 | 61 | $options = get_term_meta( intval($_GET['tag_ID']), $key, true ); 62 | 63 | break; 64 | case 'options': 65 | 66 | if( ! current_user_can('manage_options') ) { 67 | return; 68 | } 69 | 70 | $options = get_option( $field['key'] ); 71 | 72 | } 73 | 74 | // We should have options 75 | if( ! isset($options) ) { 76 | return; 77 | } ?> 78 | 79 |
80 | 81 | 82 | 83 |
84 | 85 | 'export', 98 | 'defaults' => '', 99 | 'labels' => [ 100 | 'button' => __('Import', 'wpcf'), 101 | 'label' => __('The Current Settings. Replace these with a different encoded string to import new settings.', 'wpcf') 102 | ] 103 | ]; 104 | 105 | return apply_filters( 'wp_custom_fields_export_config', $configurations ); 106 | 107 | } 108 | 109 | } -------------------------------------------------------------------------------- /src/Fields/Heading.php: -------------------------------------------------------------------------------- 1 | 24 |

25 | 'heading', 38 | 'defaults' => '' 39 | ]; 40 | 41 | return apply_filters( 'wp_custom_fields_heading_config', $configurations ); 42 | 43 | } 44 | 45 | } -------------------------------------------------------------------------------- /src/Fields/Html.php: -------------------------------------------------------------------------------- 1 | 26 |

27 | 'html', 40 | 'defaults' => '' 41 | ]; 42 | 43 | return apply_filters( 'wp_custom_fields_html_config', $configurations ); 44 | 45 | } 46 | 47 | } -------------------------------------------------------------------------------- /src/Fields/Icons.php: -------------------------------------------------------------------------------- 1 | 29 | 30 | 31 | 32 |
33 | 34 | $icons ) { ?> 35 | 36 | 39 | 40 |

41 |
    42 | 43 | $label ) { 45 | 46 | if( $set == 'dashicons' ) { 47 | $display_icon = ''; 48 | } elseif( $set == 'font-awesome-regular' ) { 49 | $display_icon = ''; 50 | } elseif( $set == 'font-awesome-solid' ) { 51 | $display_icon = ''; 52 | } elseif( $set == 'font-awesome-brands' ) { 53 | $display_icon = ''; 54 | } elseif( $set == 'material' ) { 55 | $display_icon = '' . esc_html($icon) . ''; 56 | } 57 | 58 | $display_icon = apply_filters('wp_custom_fields_displayed_icon', $display_icon, $icon, $set); 59 | $id = esc_attr( $field['id'] . '-' . $icon ); 60 | $name = $type == 'checkbox' ? esc_attr($field['name'] . '[' . $icon . ']') : esc_attr($field['name']); 61 | 62 | // Get the values for a set 63 | if( $type == 'checkbox' && is_array($field['values']) ) { 64 | $selected = in_array($icon, $field['values']) ? ' checked="checked" ' : ''; 65 | } else { 66 | $selected = $icon == $field['values'] ? ' checked="checked" ' : ''; 67 | } 68 | 69 | ?> 70 |
  • 71 | /> 72 | 73 |
    • 74 | 75 | 76 |
77 | 78 | 79 |
80 | 81 | 'icons', 94 | 'defaults' => '', 95 | 'labels' => [ 96 | 'search' => __('Search Icons', 'wpcf') 97 | ], 98 | 'properties' => [ 99 | 'icons' => Framework::$icons 100 | ] 101 | ]; 102 | 103 | return apply_filters( 'wp_custom_fields_icons_config', $configurations ); 104 | 105 | } 106 | 107 | } -------------------------------------------------------------------------------- /src/Fields/Input.php: -------------------------------------------------------------------------------- 1 | 39 | 40 | /> 41 | 42 | 'input', 54 | 'defaults' => '' 55 | ]; 56 | 57 | return apply_filters( 'wp_custom_fields_input_config', $configurations ); 58 | 59 | } 60 | 61 | } -------------------------------------------------------------------------------- /src/Fields/Location.php: -------------------------------------------------------------------------------- 1 | 35 | 36 |
37 |
38 | 39 | 40 | 41 |
42 |
43 |
44 | 45 | 46 |
47 | 48 | 49 |
50 | 51 |
52 |
53 | 54 | [ 66 | 'city' => '', 67 | 'country' => '', 68 | 'lat' => '', 69 | 'lng' => '', 70 | 'number' => '', 71 | 'postal_code' => '', 72 | 'state' => '', 73 | 'street' => '' 74 | ], 75 | 'labels' => [ 76 | 'street' => __('Street Address', 'wpcf'), 77 | 'number' => __('Street Number', 'wpcf'), 78 | 'postal_code' => __('Postal Code', 'wpcf'), 79 | 'city' => __('City', 'wpcf'), 80 | 'state' => __('State', 'wpcf'), 81 | 'country' => __('Country', 'wpcf') 82 | ], 83 | 'properties' => ['street', 'number', 'postal_code', 'city', 'state', 'country'], 84 | 'placeholders' => [ 85 | 'search' => __('Search for a location', 'wpcf') 86 | ], 87 | 'type' => 'location' 88 | ]; 89 | 90 | return apply_filters( 'wp_custom_fields_location_config', $configurations ); 91 | } 92 | 93 | } -------------------------------------------------------------------------------- /src/Fields/Media.php: -------------------------------------------------------------------------------- 1 | 37 | 38 |
39 | 40 | 41 |
42 | 43 | 49 |
50 | 51 | wp_get_attachment_url($medium)] ); ?> 52 | 53 | wp_get_attachment_url($medium)] ); ?> 54 | 55 | 56 | 57 | 58 | 59 |
60 | link 61 | 62 |
63 | 64 | clear 65 |
66 | 67 | 68 |
69 | 70 | add 71 | 72 | 73 |
74 | 75 |
76 | 77 | 78 |
79 | 80 | 'media', 93 | 'defaults' => '', 94 | 'labels' => [ 95 | 'add' => __('Add', 'wpcf'), 96 | 'button' => __('Insert', 'wpcf'), 97 | 'title' => __('Add Media', 'wpcf') 98 | ] 99 | ]; 100 | 101 | return apply_filters( 'wp_custom_fields_media_config', $configurations ); 102 | 103 | } 104 | 105 | } -------------------------------------------------------------------------------- /src/Fields/Radio.php: -------------------------------------------------------------------------------- 1 | 28 | 29 | 57 | 58 | 'radio', 71 | 'defaults' => '' 72 | ]; 73 | 74 | return apply_filters( 'wp_custom_fields_radio_config', $configurations ); 75 | 76 | } 77 | 78 | } -------------------------------------------------------------------------------- /src/Fields/Repeatable.php: -------------------------------------------------------------------------------- 1 | $groupValues ) { 38 | 39 | // Link our fields to the values 40 | foreach($field['fields'] as $subkey => $subfield) { 41 | 42 | $groups[$key][$subfield['id']] = $subfield; 43 | $groups[$key][$subfield['id']]['values'] = isset($groupValues[$subfield['id']]) ? $groupValues[$subfield['id']] : ''; 44 | 45 | } 46 | 47 | } 48 | 49 | } ?> 50 | 51 |
52 | 53 |
54 | 55 | $fields) { ?> 56 | 57 |
58 | 59 | arrow_drop_down 60 | 61 | drag_indicator 62 | clear 63 |
64 | 65 | $subfield) { 68 | 69 | // The type should be defined 70 | if( ! isset($subfield['type']) ) { 71 | continue; 72 | } 73 | 74 | // The ID should be defined 75 | if( ! isset($subfield['id']) ) { 76 | continue; 77 | } 78 | 79 | // Render each field based upon the values 80 | $subfield['classes'] = isset($subfield['columns']) ? ' wpcf-' . esc_attr($subfield['columns']) : 'wpcf-full'; 81 | $subfield['classes'] .= ' field-' . esc_attr($subfield['type']) . ' field-id-' . $subfield['id']; 82 | $subfield['values'] = isset($subfield['values']) ? $subfield['values'] : ''; 83 | $subfield['name'] = $field['name'] . '[' . $key . ']' . '[' . esc_attr($subfield['id']) . ']'; 84 | $subfield['id'] = $field['id'] . '_' . $key . '_' . esc_attr($subfield['id']); 85 | $subfield['dependency'] = isset($subfield['dependency']) ? $subfield['dependency'] : []; 86 | 87 | // Additional classes 88 | if( $subfield['dependency'] ) { 89 | $subfield['classes'] .= ' wpcf-dependent-field' . Framework::return_dependency_class($subfield['dependency'], [['fields' => $fields]], $field['values'][$key]); 90 | } 91 | 92 | // If our dependency is fullfilled, the active class should be added 93 | $class = 'MakeitWorkPress\WP_Custom_Fields\Fields\\' . ucfirst( $subfield['type'] ); 94 | 95 | 96 | if( class_exists($class) ) { ?> 97 |
98 | 99 | 100 |

101 | 102 |
103 | 104 | 105 |
$v) { ?> data-="" > 106 | 107 |
108 | 109 |

110 | 111 |
112 | 115 | 116 |
117 |
118 | 119 | 120 | 121 |
122 | 123 |
124 | 125 | 126 |
127 | 128 |
129 | 130 | 'repeatable', 143 | 'defaults' => [], 144 | 'labels' => [ 145 | 'add' => '', 146 | 'add_title' => __('Add', 'wpcf'), 147 | 'remove' => '', 148 | 'remove_title' => __('Remove', 'wpcf') 149 | ], 150 | ]; 151 | 152 | return apply_filters( 'wp_custom_fields_repeatable_config', $configurations ); 153 | 154 | } 155 | 156 | } -------------------------------------------------------------------------------- /src/Fields/Select.php: -------------------------------------------------------------------------------- 1 | true, 'post_type' => $source, 'posts_per_page' => -1, 'orderby' => 'title', 'order' => 'ASC'] ); 57 | 58 | foreach( $posts as $post ) { 59 | $options[$post->ID] = $post->post_title; 60 | } 61 | 62 | } elseif( $object == 'users' || $object == 'user' ) { 63 | 64 | $users = get_users( ['fields' => ['ID', 'display_name'], 'orderby' => 'display_name', 'order' => 'ASC'] ); 65 | 66 | foreach( $users as $user ) { 67 | $options[$user->ID] = $user->display_name; 68 | } 69 | 70 | } elseif( ($object == 'terms' || $object == 'term') && $source ) { 71 | 72 | $terms = get_terms( ['fields' => 'id=>name', 'hide_empty' => false, 'order' => 'ASC', 'taxonomy' => $source] ); 73 | 74 | foreach( $terms as $term_id => $term_name ) { 75 | $options[$term_id] = $term_name; 76 | } 77 | 78 | } 79 | 80 | wp_cache_add('wpc_select_field_cache_' . $object . $source, $options); 81 | 82 | } 83 | 84 | } ?> 85 | 86 | 113 | 114 | 'select', 127 | 'defaults' => '' 128 | ]; 129 | 130 | return apply_filters( 'wp_custom_fields_select_config', $configurations ); 131 | 132 | } 133 | 134 | } -------------------------------------------------------------------------------- /src/Fields/Slider.php: -------------------------------------------------------------------------------- 1 | 30 | 31 | 32 | 33 | 34 | 'slider', 46 | 'defaults' => '' 47 | ]; 48 | 49 | return apply_filters( 'wp_custom_fields_slider_config', $configurations ); 50 | } 51 | 52 | } 53 | -------------------------------------------------------------------------------- /src/Fields/Textarea.php: -------------------------------------------------------------------------------- 1 | 29 | 30 | 31 | 32 | 'textarea', 44 | 'defaults' => '', 45 | 'properties' => [ 46 | 'cols' => 70, 47 | 'rows' => 7 48 | ] 49 | ]; 50 | 51 | return apply_filters( 'wp_custom_fields_textarea_config', $configurations ); 52 | 53 | } 54 | 55 | } -------------------------------------------------------------------------------- /src/assets/js/app.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This script bundles all the modules from the WP_Custom_Fields Application 3 | * and executes them. 4 | */ 5 | 'use strict'; 6 | 7 | import { FieldsModule } from './modules/fields.module'; 8 | import { OptionsLayout } from './layout/options.layout'; 9 | import { TabsLayout } from './layout/tabs.layout'; 10 | 11 | const InitWPCF = () => { 12 | const frameworks = document.querySelectorAll('.wpcf-framework') as NodeListOf ?? undefined; 13 | (window as any).wpcfCodeMirror = {}; 14 | 15 | // Multiple frameworks can exist for each page 16 | if(frameworks) { 17 | frameworks.forEach(framework => { 18 | FieldsModule(framework); 19 | OptionsLayout(framework); 20 | }); 21 | } 22 | 23 | TabsLayout(); 24 | } 25 | 26 | // Boot after document is loaded 27 | document.addEventListener('DOMContentLoaded', () => InitWPCF()); -------------------------------------------------------------------------------- /src/assets/js/fields/button.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The button module, accepting custom ajax actions 3 | * @param {HTMLElement} framework The parent framework element 4 | */ 5 | declare var wpcf; 6 | 7 | export const ButtonField = (framework: HTMLElement) => { 8 | framework.querySelectorAll('.wpcf-button').forEach(async (button: Element) => { 9 | button.addEventListener('click', async function(event) { 10 | event.preventDefault(); 11 | 12 | const action = button.getAttribute('data-action'); 13 | const data = button.getAttribute('data-data'); 14 | const message = button.getAttribute('data-message'); 15 | 16 | if (!action) { 17 | return; 18 | } 19 | 20 | const self = this; 21 | 22 | try { 23 | button.classList.add('wpcf-loading'); 24 | 25 | const response = await fetch(wpcf.ajaxUrl, { 26 | method: 'POST', 27 | headers: { 28 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 29 | }, 30 | body: new URLSearchParams({ 31 | action: action, 32 | data: data, 33 | nonce: wpcf.nonce 34 | }) 35 | }); 36 | 37 | if (!response.ok) { 38 | throw new Error('Network response was not ok'); 39 | } 40 | 41 | const responseData = await response.json(); 42 | 43 | if (wpcf.debug) { 44 | console.log(responseData); 45 | } 46 | 47 | if (message && responseData.data !== undefined) { 48 | const style = responseData.success ? 'updated' : 'error'; 49 | const messageDiv = document.createElement('div'); 50 | messageDiv.classList.add('wpcf-button-message', style); 51 | messageDiv.innerHTML = `

${responseData.data}

`; 52 | button.after(messageDiv); 53 | 54 | setTimeout(() => { 55 | messageDiv.style.opacity = '0'; 56 | }, 3000); 57 | 58 | setTimeout(() => { 59 | messageDiv.remove(); 60 | }, 3500); 61 | } 62 | } catch (error) { 63 | if (wpcf.debug) { 64 | console.error('Error:', error); 65 | } 66 | } finally { 67 | button.classList.remove('wpcf-loading'); 68 | } 69 | }); 70 | }); 71 | }; -------------------------------------------------------------------------------- /src/assets/js/fields/code.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Our code mirror code module, using the native code mirror functionalities from Wordpress 3 | * @param {HTMLElement} framework The parent framework element 4 | */ 5 | declare var wp; 6 | 7 | export const CodeField = (framework) => { 8 | 9 | if (typeof (wp as any).codeEditor === 'undefined') { 10 | return; 11 | } 12 | 13 | framework.querySelectorAll('.wpcf-code-editor-value').forEach((node: HTMLElement) => { 14 | const settings = JSON.parse(node.dataset.settings || '{}'); 15 | (window as any).wpcfCodeMirror[node.id] = (wp as any).codeEditor.initialize(node, settings); 16 | }); 17 | 18 | }; -------------------------------------------------------------------------------- /src/assets/js/fields/colorpicker.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Our colorpicker module - because we included the alpha colorpicker script, this is already included by default 3 | * @param {HTMLElement} framework The parent framework element 4 | */ 5 | declare var jQuery; 6 | 7 | export const ColorpickerField = (framework: HTMLElement) => { 8 | const colorpickers = framework.querySelectorAll('.wpcf-colorpicker'); 9 | colorpickers.forEach((element: Element) => { 10 | jQuery(element as any).wpColorPicker({ 11 | palettes: true 12 | }); 13 | }); 14 | }; -------------------------------------------------------------------------------- /src/assets/js/fields/datepicker.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Initializes our datepicker using the flatpickr library 3 | * @param {HTMLElement} framework The parent framework element 4 | */ 5 | declare var flatpickr; 6 | 7 | export const DatepickerField = (framework: HTMLElement) => { 8 | 9 | if (typeof flatpickr !== 'function') { 10 | return; 11 | } 12 | 13 | interface FlatpickrConfig { 14 | altFormat?: string; 15 | altInput?: boolean; 16 | dateFormat?: string; 17 | time_24hr?: boolean; 18 | wrap?: boolean; 19 | [key: string]: any; // Additional properties 20 | } 21 | 22 | const config: FlatpickrConfig = { 23 | altFormat: 'F j, Y', 24 | altInput: true, 25 | dateFormat: 'U', 26 | time_24hr: true, 27 | wrap: true 28 | }; 29 | 30 | const datePicker = framework.querySelectorAll('.wpcf-datepicker'); 31 | 32 | (datePicker as NodeListOf).forEach((element: HTMLInputElement) => { 33 | const customProperties: string[] = ['enable-time', 'alt-format', 'date-format', 'locale', 'max-date', 'min-date', 'mode', 'no-calendar', 'week-numbers']; 34 | 35 | customProperties.forEach((attribute: string) => { 36 | const propertyValue = element.dataset[attribute]; 37 | 38 | if (propertyValue) { 39 | const propertyName = attribute.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase()); 40 | config[propertyName] = propertyValue; 41 | } 42 | }); 43 | 44 | flatpickr(element, config); 45 | }); 46 | 47 | }; -------------------------------------------------------------------------------- /src/assets/js/fields/heading.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Our heading module, supporting collapsible sections within the customizer 3 | */ 4 | export const HeadingField = () => { 5 | 6 | const collapsibleElements = document.querySelectorAll('.wpcf-heading-collapsible'); 7 | collapsibleElements.forEach((element: any) => { 8 | const collapsibleSections = element.dataset.sections; 9 | 10 | 11 | if (!collapsibleSections) { 12 | return; 13 | } 14 | 15 | const sectionsArray = collapsibleSections.split(','); 16 | 17 | sectionsArray.forEach((section: string) => { 18 | document.querySelector(`li[id$="${section}"]`)?.classList.add('hidden'); 19 | document.querySelector(`.wpcf-field.field-id-${section}`)?.classList.add('hidden'); 20 | }); 21 | 22 | element.addEventListener('click', () => { 23 | element.classList.toggle('active'); 24 | 25 | sectionsArray.forEach((section: string) => { 26 | document.querySelector(`li[id$="${section}"]`)?.classList.toggle('hidden'); 27 | document.querySelector(`.wpcf-field.field-id-${section}`)?.classList.toggle('hidden'); 28 | }); 29 | }); 30 | }); 31 | 32 | } -------------------------------------------------------------------------------- /src/assets/js/fields/icons.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Our icon field, allowing search or icons 3 | * @param {HTMLElement} framework The parent framework element 4 | */ 5 | export const IconsField = (framework: HTMLElement) => { 6 | 7 | const searchFields = framework.querySelectorAll('.wpcf-icons-search') as NodeListOf; 8 | const iconNodes: { [key: string]: NodeListOf } = {}; 9 | 10 | searchFields.forEach((searchField: HTMLInputElement) => { 11 | searchField.addEventListener('input', (event: Event) => { 12 | const fieldId = (searchField.closest('.wpcf-field') as HTMLElement).dataset.id; 13 | 14 | if (!fieldId ) { 15 | return; 16 | } 17 | 18 | if (!iconNodes[fieldId]) { 19 | iconNodes[fieldId] = document.querySelectorAll(`[data-id="${fieldId}"] .wpcf-icon-list li`); 20 | } 21 | 22 | iconNodes[fieldId].forEach((icon: HTMLLIElement) => { 23 | // Reset visibility 24 | if (!searchField.value) { 25 | icon.classList.remove('hidden'); 26 | return; 27 | } 28 | 29 | // Hide non matching icons 30 | if (icon.dataset.icon && icon.dataset.icon.includes(searchField.value)) { 31 | icon.classList.remove('hidden'); 32 | } else { 33 | icon.classList.add('hidden'); 34 | } 35 | }); 36 | }); 37 | }); 38 | 39 | } -------------------------------------------------------------------------------- /src/assets/js/fields/location.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Our location field 3 | * @param {HTMLElement} framework The parent framework element 4 | */ 5 | declare namespace google { 6 | namespace maps { 7 | 8 | class LatLng { 9 | constructor(lat: number, lng: number); 10 | } 11 | 12 | class Map { 13 | constructor(canvas: HTMLElement, options: MapOptions); 14 | fitBounds(viewport: any) 15 | setCenter(location: any) 16 | setZoom(zoom: number) 17 | } 18 | 19 | enum MapTypeId { 20 | ROADMAP 21 | } 22 | 23 | interface MapOptions { 24 | scrollwheel: boolean; 25 | center: LatLng; 26 | zoom: number; 27 | mapTypeId: MapTypeId; 28 | } 29 | 30 | class Marker { 31 | constructor(options: MarkerOptions); 32 | setPosition(latLng: LatLng) 33 | } 34 | 35 | interface MarkerOptions { 36 | map: Map; 37 | draggable: boolean; 38 | } 39 | 40 | namespace event {} 41 | namespace places {} 42 | 43 | } 44 | } 45 | 46 | export const LocationField = (framework: HTMLElement) => { 47 | 48 | framework.querySelectorAll('.wpcf-location').forEach((locationElement: Element) => { 49 | const searchInput = locationElement.querySelector('.wpcf-map-search') as HTMLInputElement, 50 | mapCanvas = locationElement.querySelector('.wpcf-map-canvas') as HTMLElement, 51 | latitude = locationElement.querySelector('.latitude') as HTMLInputElement, 52 | longitude = locationElement.querySelector('.longitude') as HTMLInputElement, 53 | city = locationElement.querySelector('.city') as HTMLInputElement, 54 | country = locationElement.querySelector('.country') as HTMLInputElement, 55 | zip = locationElement.querySelector('.postal_code') as HTMLInputElement, 56 | street = locationElement.querySelector('.street') as HTMLInputElement, 57 | state = locationElement.querySelector('.state') as HTMLInputElement, 58 | number = locationElement.querySelector('.number') as HTMLInputElement; 59 | 60 | let latLng = new google.maps.LatLng(52.2129918, 5.2793703), 61 | zoom = 7; 62 | 63 | // Map 64 | if (latitude.value && longitude.value) { 65 | latLng = new google.maps.LatLng(parseFloat(latitude.value), parseFloat(longitude.value)); 66 | zoom = 15; 67 | } 68 | 69 | // Map Options 70 | const mapOptions: google.maps.MapOptions = { 71 | scrollwheel: false, 72 | center: latLng, 73 | zoom: zoom, 74 | mapTypeId: google.maps.MapTypeId.ROADMAP 75 | }; 76 | const map = new google.maps.Map(mapCanvas, mapOptions); 77 | const markerOptions: google.maps.MarkerOptions = { 78 | map: map, 79 | draggable: false, 80 | }; 81 | const marker = new google.maps.Marker(markerOptions); 82 | 83 | // @ts-ignore 84 | const autocomplete = new google.maps.places.Autocomplete(searchInput, { 85 | types: ['geocode'] 86 | }); 87 | 88 | if (latitude.value.length > 0 && longitude.value.length > 0) { 89 | marker.setPosition(latLng); 90 | } 91 | 92 | // Search 93 | autocomplete.bindTo('bounds', map); 94 | 95 | // @ts-ignore 96 | google.maps.event.addListener(autocomplete, 'place_changed', () => { 97 | const place = autocomplete.getPlace(); 98 | const components = place.address_components; 99 | 100 | if (place.geometry.viewport) { 101 | map.fitBounds(place.geometry.viewport); 102 | } else { 103 | map.setCenter(place.geometry.location); 104 | map.setZoom(17); 105 | } 106 | 107 | marker.setPosition(place.geometry.location); 108 | latitude.value = place.geometry.location.lat().toString(); 109 | longitude.value = place.geometry.location.lng().toString(); 110 | 111 | // Fill in our components 112 | if (components) { 113 | for (let i = 0; i < components.length; i++) { 114 | const component = components[i]; 115 | const types = component.types; 116 | 117 | if (types.includes('street_number')) { 118 | number.value = component.long_name; 119 | } else if (types.includes('route')) { 120 | street.value = component.long_name; 121 | } else if (types.includes('locality')) { 122 | city.value = component.long_name; 123 | } else if (types.includes('postal_code')) { 124 | zip.value = component.long_name; 125 | } else if (types.includes('administrative_area_level_1')) { 126 | state.value = component.long_name; 127 | } else if (types.includes('country')) { 128 | country.value = component.long_name; 129 | } 130 | } 131 | } 132 | }); 133 | }); 134 | }; -------------------------------------------------------------------------------- /src/assets/js/fields/media.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Our Media upload element 3 | * @param {HTMLElement} framework The parent framework element 4 | */ 5 | declare var wp, jQuery; 6 | 7 | export const MediaField = (framework: HTMLElement) => { 8 | 9 | const uploadWrappers = framework.querySelectorAll('.wpcf-upload-wrapper') as NodeListOf; 10 | 11 | uploadWrappers.forEach((uploadWrapper: HTMLElement) => { 12 | 13 | const addMedia = uploadWrapper.querySelector('.wpcf-upload-add') as HTMLElement; 14 | const addWrap = uploadWrapper.querySelector('.wpcf-single-media.empty') as HTMLElement; 15 | const button = uploadWrapper.dataset.button; 16 | const multiple = uploadWrapper.dataset.multiple === 'true'; 17 | const title = uploadWrapper.dataset.title; 18 | const type = uploadWrapper.dataset.type; 19 | const url = uploadWrapper.dataset.url; 20 | const valueInput = uploadWrapper.querySelector('.wpcf-upload-value')as HTMLInputElement; 21 | let frame: any; 22 | 23 | addMedia.addEventListener('click', (e: Event) => { 24 | e.preventDefault(); 25 | 26 | if (frame) { 27 | frame.open(); 28 | return; 29 | } 30 | 31 | frame = wp.media({ 32 | title: title, 33 | library: { 34 | type: type 35 | }, 36 | button: { 37 | text: button 38 | }, 39 | multiple: multiple 40 | }); 41 | 42 | frame.on('select', () => { 43 | const attachments = frame.state().get('selection').toJSON(); 44 | let attachmentIds = valueInput.value; 45 | let urlWrapper = ''; 46 | let src: string; 47 | 48 | attachments.forEach((attachment: any) => { 49 | attachmentIds += attachment.id + ','; 50 | 51 | src = attachment.type === 'image' ? 52 | (attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.sizes.full.url) : 53 | attachment.icon; 54 | 55 | if (url) { 56 | urlWrapper = '
link
'; 57 | } 58 | 59 | addWrap.insertAdjacentHTML('beforebegin', '
' + urlWrapper + 'clear
'); 60 | }); 61 | 62 | if (!multiple) { 63 | attachmentIds.replace(',', ''); 64 | } 65 | 66 | valueInput.value = attachmentIds; 67 | }); 68 | 69 | frame.open(); 70 | }); 71 | 72 | uploadWrapper.addEventListener('click', (event: Event) => { 73 | const target = event.target as HTMLElement; 74 | 75 | if (! target.classList.contains('wpcf-upload-remove') || target.parentElement?.classList.contains('wpcf-upload-remove') ) { 76 | return; 77 | } 78 | 79 | event.preventDefault(); 80 | 81 | const singleMedia = target.closest('.wpcf-single-media') as HTMLElement;; 82 | const targetId = singleMedia.dataset.id; 83 | let currentValues = valueInput.value; 84 | const newValues = currentValues.replace(targetId + ',', ''); 85 | 86 | singleMedia.remove(); 87 | 88 | if (!multiple) { 89 | jQuery(addWrap).fadeIn(); 90 | } 91 | 92 | valueInput.value = newValues; 93 | 94 | }); 95 | }); 96 | 97 | /** 98 | * Make media items sortable 99 | */ 100 | jQuery('.wpcf-media').sortable({ 101 | placeholder: "wpcf-media-highlight", 102 | update: function(event: Event, ui: any) { 103 | const targetElement = event.target as HTMLElement; 104 | const inputElement = (targetElement.closest('.wpcf-upload-wrapper') as HTMLElement).querySelector('.wpcf-upload-value') as HTMLInputElement; 105 | const values: string[] = []; 106 | 107 | (event.target as HTMLElement).querySelectorAll('.wpcf-single-media').forEach((node: any) => { 108 | values.push(node.dataset.id || ''); 109 | }); 110 | 111 | inputElement.value = values.join(','); 112 | } 113 | }); 114 | 115 | }; -------------------------------------------------------------------------------- /src/assets/js/fields/repeatable.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Our repeatable fields module 3 | * @todo Rewrite this in a more efficient manner. 4 | * @param {HTMLElement} framework The parent framework element 5 | */ 6 | import { FieldsModule } from '../modules/fields.module'; 7 | import { DatepickerField } from './datepicker.field'; 8 | 9 | declare var jQuery, wp; 10 | 11 | export const RepeatableField = (framework: HTMLElement) => { 12 | 13 | /** 14 | * Groups are sortable 15 | */ 16 | jQuery('.wpcf-repeatable-groups').sortable({ 17 | placeholder: 'wpcf-highlight', 18 | update: function( event, ui ) { 19 | // This updating does not matter anymore 20 | // jQuery(this).find('.wpcf-repeatable-group').each( function(index, node) { 21 | // jQuery(node).html( function(n, node) { 22 | // return node.replace(/\[\d+\]/g, '[' + index + ']').replace(/\_\d+\_/g, '_' + index + '_'); 23 | // }); 24 | // }); 25 | } 26 | }); 27 | 28 | /** 29 | * Repeatable Groups 30 | */ 31 | document.querySelectorAll('.wpcf-repeatable-add').forEach((button) => { 32 | const repeatableGroup = button.closest('.wpcf-repeatable-container') as HTMLElement; 33 | button.addEventListener('click', (e) => { 34 | e.preventDefault(); 35 | const codeNodes: HTMLElement[] = []; 36 | const length = repeatableGroup.querySelectorAll('.wpcf-repeatable-group').length; 37 | const group = repeatableGroup.querySelector('.wpcf-repeatable-group:last-child') as HTMLElement; 38 | 39 | // Destroy our select2 instances, if defined 40 | const selectAdvancedFields = group.querySelectorAll('.wpcf-select-advanced'); 41 | selectAdvancedFields.forEach((field: any) => { 42 | jQuery(field).select2('destroy'); 43 | }); 44 | 45 | // Destroy current codemirror instances 46 | (repeatableGroup.querySelectorAll('.wpcf-code-editor-value') as NodeListOf).forEach((node: HTMLElement) => { 47 | if ((window as any).wpcfCodeMirror[node.id]) { 48 | (window as any).wpcfCodeMirror[node.id].codemirror.toTextArea(node); 49 | codeNodes.push(node); 50 | } 51 | }); 52 | 53 | // Destroy our datepicker instances before re-adding 54 | const datepickers = group.querySelectorAll('.wpcf-datepicker') as NodeListOf; 55 | datepickers.forEach((datepickerInstance: any) => { 56 | if (datepickerInstance._flatpickr) { 57 | datepickerInstance._flatpickr.destroy(); 58 | } 59 | }); 60 | 61 | // Build our new group 62 | const newGroup = group.cloneNode(true) as HTMLElement; 63 | 64 | // Replace current keys with new ones in the new group 65 | newGroup.innerHTML = newGroup.innerHTML.replace(/\[\d+\]/g, `[${length}]`).replace(/\_\d+\_/g, `_${length}_`); 66 | 67 | // Empty inputs in our new group 68 | (newGroup.querySelectorAll('input, textarea') as NodeListOf).forEach((input: HTMLInputElement) => input.value = ''); 69 | newGroup.querySelectorAll('option').forEach((option: HTMLOptionElement) => option.selected = false); 70 | (newGroup.querySelectorAll('.wpcf-single-media:not(.empty)') as NodeListOf).forEach((media: HTMLElement) => media.remove()); 71 | 72 | // Insert the newGroup after the current group 73 | group.after(newGroup); 74 | 75 | // Redraw all the fields within the group 76 | FieldsModule(newGroup, true); 77 | 78 | // Reinit old datepicker groups 79 | datepickers.forEach((element: HTMLElement) => { 80 | DatepickerField(group); 81 | }); 82 | 83 | // Reinitialize old codemirror groups 84 | codeNodes.forEach((node: HTMLElement) => { 85 | const settings = JSON.parse( node.dataset.settings as string ); 86 | (window as any).wpcfCodeMirror[node.id] = wp.codeEditor.initialize(node, settings); 87 | }); 88 | }); 89 | }); 90 | 91 | // Remove the latest group 92 | document.querySelectorAll('.wpcf-repeatable-remove-latest').forEach((button) => { 93 | button.addEventListener('click', (e) => { 94 | e.preventDefault(); 95 | const groupLength = (button.closest('.wpcf-repeatable-container') as HTMLElement).querySelectorAll('.wpcf-repeatable-group').length; 96 | const group = (button.closest('.wpcf-repeatable-container') as HTMLElement).querySelector('.wpcf-repeatable-group:last-child') as HTMLElement; 97 | 98 | // Keep the first group 99 | if (groupLength < 2) { 100 | return; 101 | } 102 | 103 | jQuery(group).fadeOut(350, () => group.remove()); 104 | }); 105 | }); 106 | 107 | // Remove the current group 108 | document.addEventListener('click', (e) => { 109 | const target = e.target as HTMLElement; 110 | if (target.classList.contains('wpcf-repeatable-remove-group') || target.closest('a')?.classList.contains('wpcf-repeatable-remove-group')) { 111 | e.preventDefault(); 112 | const groupLength = (target.closest('.wpcf-repeatable-container') as HTMLElement).querySelectorAll('.wpcf-repeatable-group').length; 113 | const group = target.closest('.wpcf-repeatable-group') as HTMLElement; 114 | 115 | // Only remove if not the first group 116 | if (groupLength < 2) { 117 | return; 118 | } 119 | 120 | jQuery(group).fadeOut(350, () => group.remove()); 121 | } 122 | }); 123 | 124 | // Open or close a group 125 | document.querySelectorAll('.wpcf-repeatable-toggle').forEach((button) => { 126 | button.addEventListener('click', (e) => { 127 | e.preventDefault(); 128 | const icon = button.querySelector('i') as HTMLElement; 129 | const group = (button.closest('.wpcf-repeatable-group') as HTMLElement).querySelector('.wpcf-repeatable-fields') as HTMLElement; 130 | 131 | if (icon.textContent === 'arrow_drop_down') { 132 | icon.textContent = 'arrow_drop_up'; 133 | } else if (icon.textContent === 'arrow_drop_up') { 134 | icon.textContent = 'arrow_drop_down'; 135 | } 136 | group.style.display = group.style.display === 'none' ? 'block' : 'none'; 137 | }); 138 | }); 139 | 140 | }; -------------------------------------------------------------------------------- /src/assets/js/fields/select.field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Our select field 3 | */ 4 | declare var jQuery; 5 | 6 | export const SelectField = () => { 7 | 8 | // Execute if we do have select2 defined 9 | if( typeof jQuery.fn.select2 !== 'undefined' && jQuery.fn.select2 ) { 10 | 11 | // Regular selects 12 | jQuery('.wpcf-select-advanced').select2({}); 13 | 14 | // Typography selects 15 | jQuery('.wpcf-typography-fonts').select2({ 16 | templateResult: formatState, 17 | templateSelection: formatState 18 | }); 19 | 20 | } 21 | 22 | }; 23 | 24 | /** 25 | * Formats a state for the select2 toolbox, allowing us to add custom images 26 | */ 27 | const formatState = (state) => { 28 | if ( ! state.id ) { 29 | return state.text; 30 | } 31 | 32 | const newState = jQuery( 33 | '' 34 | ); 35 | 36 | return newState; 37 | 38 | }; -------------------------------------------------------------------------------- /src/assets/js/fields/slider.field.ts: -------------------------------------------------------------------------------- 1 | export const SliderField = (framework: HTMLElement) => { 2 | framework.querySelectorAll('.wpcf-slider-input').forEach((slider: Element) => { 3 | const sliderValueElement = slider.nextElementSibling as HTMLElement; 4 | 5 | slider.addEventListener('input', (event: Event) => { 6 | sliderValueElement.innerHTML = (event?.target as HTMLInputElement)?.value; 7 | }); 8 | }); 9 | } -------------------------------------------------------------------------------- /src/assets/js/helpers/dependency.helper.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Helper function to create the dependent field functionality 3 | * 4 | * @param {HTMLElement} framework The framework root element 5 | */ 6 | declare var jQuery; 7 | 8 | export const DependencyHelper = (framework: HTMLElement) => { 9 | 10 | framework.querySelectorAll('.wpcf-dependent-field').forEach((item: Element) => { 11 | // Values from our dependency field 12 | const field = item.classList.contains('wpcf-repeatable-field') ? item.querySelector('.wpcf-repeatable-field-input') : item.querySelector('.wpcf-field-input'); 13 | const equation = field?.getAttribute('data-equation'); 14 | const source = field?.getAttribute('data-source'); 15 | const value = field?.getAttribute('data-value'); 16 | 17 | 18 | if (!equation || !source || !value) { 19 | return; 20 | } 21 | 22 | // Target fields 23 | const selector = item.classList.contains('wpcf-repeatable-field') ? '.wpcf-repeatable-group' : '.wpcf-fields'; 24 | const target = item.closest(selector)?.querySelector(`.field-id-${source}`); 25 | const input = target?.querySelector('input'); 26 | const select = target?.querySelector('select'); 27 | 28 | 29 | // Select fields (only supports single select fields) 30 | if (select) { 31 | jQuery(select).on('change', function() { 32 | compare(this, item, equation, value); 33 | }); 34 | } 35 | 36 | // Input fields (only supports simple input fields) 37 | if (input) { 38 | jQuery(input).on('change', function() { 39 | compare(this, item, equation, value); 40 | }); 41 | } 42 | }); 43 | 44 | /** 45 | * Compare values 46 | * @param {HTMLInputElement | HTMLSelectElement } changedField The field that changed is value 47 | * @param {Element} dependentField The field that depents on the changed field 48 | * @param {string | null} equation The equation to compare 49 | * @param {string | null} value The value to compare for 50 | */ 51 | function compare(changedField: HTMLInputElement | HTMLSelectElement, dependentField: Element, equation: string | null, value: string | null) { 52 | let changedFieldValue = changedField.value; 53 | 54 | // Checkboxes 55 | if (changedField.type === 'checkbox') { 56 | changedField = changedField as HTMLInputElement; 57 | 58 | if (changedField.checked && changedField.dataset.key === value) { 59 | changedFieldValue = value; 60 | } else if (!changedField.checked && changedField.dataset.key === value) { 61 | changedFieldValue = ''; 62 | } 63 | } 64 | 65 | if (equation === '=') { 66 | if (changedFieldValue === value) { 67 | dependentField.classList.add('active'); 68 | } else { 69 | dependentField.classList.remove('active'); 70 | } 71 | } 72 | 73 | if (equation === '!=') { 74 | if (changedFieldValue !== value) { 75 | dependentField.classList.add('active'); 76 | } else { 77 | dependentField.classList.remove('active'); 78 | } 79 | } 80 | } 81 | }; -------------------------------------------------------------------------------- /src/assets/js/layout/options.layout.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Functions for option pages 3 | */ 4 | export const OptionsLayout = (framework) => { 5 | if (! framework.classList.contains('wpcf-options-page')) { 6 | return; 7 | } 8 | 9 | const scrollHeader = framework.querySelector('.wpcf-notifications') as HTMLElement; 10 | const scrollWidth = scrollHeader.offsetWidth; 11 | let scrollPosition = 0; 12 | 13 | window.addEventListener('scroll', () => { 14 | scrollPosition = window.scrollY; 15 | 16 | if (scrollPosition > 50) { 17 | scrollHeader.style.width = `${scrollWidth}px`; 18 | scrollHeader.closest('.wpcf-header')?.classList.add('wpfc-header-scrolling'); 19 | } else { 20 | scrollHeader.closest('.wpcf-header')?.classList.remove('wpfc-header-scrolling'); 21 | } 22 | }); 23 | } -------------------------------------------------------------------------------- /src/assets/js/layout/tabs.layout.ts: -------------------------------------------------------------------------------- 1 | export const TabsLayout = function() { 2 | const tabs = document.querySelectorAll('.wpcf-tabs a'); 3 | 4 | tabs.forEach(tab => { 5 | tab.addEventListener('click', function(e) { 6 | e.preventDefault(); 7 | 8 | const activeTab = this.getAttribute('href'); 9 | const section = activeTab.replace('#', ''); 10 | const frame = this.closest('.wpcf-framework').id; 11 | 12 | // Change our active section 13 | const customFieldsSection = document.querySelector(`#wp_custom_fields_section_${frame}`) as HTMLInputElement; 14 | if (customFieldsSection) { 15 | customFieldsSection.value = section; 16 | } 17 | 18 | // Remove current active classes 19 | const framework = this.closest('.wpcf-framework'); 20 | if (framework) { 21 | framework.querySelectorAll('.wpcf-tabs a').forEach(tab => tab.classList.remove('active')); 22 | framework.querySelectorAll('.wpcf-section').forEach(section => section.classList.remove('active')); 23 | } 24 | 25 | // Add active class to our new things 26 | this.classList.add('active'); 27 | const newActiveTab = document.querySelector(activeTab); 28 | if (newActiveTab) { 29 | newActiveTab.classList.add('active'); 30 | } 31 | }); 32 | }); 33 | }; -------------------------------------------------------------------------------- /src/assets/js/modules/fields.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Executes Field modules 3 | */ 4 | 5 | import { ButtonField } from '../fields/button.field'; 6 | import { CodeField } from '../fields/code.field'; 7 | import { ColorpickerField } from '../fields/colorpicker.field'; 8 | import { DatepickerField } from '../fields/datepicker.field'; 9 | import { HeadingField } from '../fields/heading.field'; 10 | import { IconsField } from '../fields/icons.field'; 11 | import { LocationField } from '../fields/location.field'; 12 | import { MediaField } from '../fields/media.field'; 13 | import { RepeatableField } from '../fields/repeatable.field'; 14 | import { SelectField } from '../fields/select.field'; 15 | import { SliderField } from '../fields/slider.field'; 16 | 17 | import { DependencyHelper } from '../helpers/dependency.helper'; 18 | 19 | export const FieldsModule = (framework: HTMLElement, isRepeatable = false) => { 20 | 21 | // Those fields can also live in the customizer, without a framework element, 22 | // executed after a small time-out to hack loading after customizer 23 | setTimeout(() => { 24 | HeadingField(); 25 | SelectField(); 26 | }, 10) 27 | 28 | // Fields that require JS 29 | if (! framework) { 30 | return; 31 | } 32 | 33 | ButtonField(framework); 34 | CodeField(framework); 35 | ColorpickerField(framework); 36 | DatepickerField(framework); 37 | IconsField(framework); 38 | LocationField(framework); 39 | MediaField(framework); 40 | SliderField(framework); 41 | 42 | // Dependent fields helper 43 | DependencyHelper(framework); 44 | 45 | // The fields function is also invoked by the repeatable field. 46 | // To avoid circular execution, only execute repeatable when not being a repeatable 47 | if( ! isRepeatable ) { 48 | RepeatableField(framework); 49 | } 50 | 51 | }; -------------------------------------------------------------------------------- /src/assets/less/attributes.less: -------------------------------------------------------------------------------- 1 | // main: wp-custom-fields.less 2 | 3 | /** 4 | * Admin Attributes 5 | * ---------------------------------- 6 | */ 7 | @grid-space: 24px; 8 | 9 | @white: #fff; 10 | @light-white: rgba(255, 255, 255, 0.7); 11 | @dark-white: #f5f5f5; 12 | @light-grey: #e5e5e5; 13 | @divergent: #f07; 14 | 15 | @wp-field: #32373c; 16 | @wp-text: #555d66; 17 | @wp-description: #666; 18 | @wp-greyborder: #999; 19 | @wp-darkblue: #0E3950; 20 | @wp-blueborder: #0073AA; 21 | @wp-blue: #0085ba; 22 | @wp-lightblue: #00A0D2; 23 | @wp-menublue: #00b9eb; 24 | @wp-black: #23282d; 25 | @wp-grey: #f1f1f1; 26 | @wp-font-size: 13px; 27 | @wp-greyer: #eee; 28 | @wp-border: #ddd; 29 | @wp-lightborder: #e5e5e5; 30 | @wp-red: #dc3232; 31 | @wp-green: #46b450; 32 | @wp-yellow: #ffb900; 33 | @wp-boxshadow: 0 1px 0 @light-white inset, 0 1px 0 rgba(0, 0, 0, 0.08); 34 | @wp-boxshadow-hover: 0 1px 0 @light-white inset; 35 | 36 | @wp-btnback: #f7f7f7; 37 | @wp-btnbackhvr: #fafafa; 38 | @wp-btnborder: #7e8993; 39 | @wp-btnborderhvr: #999; 40 | @wp-btnboxshadow: 0 1px 0 @wp-btnborder; 41 | @wp-btncolor: #555; 42 | @wp-btncolorhvr: #23282d; 43 | @wp-btnradius: 4px; 44 | 45 | 46 | @base-radius: 3px; 47 | @base-transition: all 300ms ease-out; 48 | 49 | /** 50 | * Default inputs 51 | */ 52 | .wp-input { 53 | border: 1px solid #ddd; 54 | box-shadow: inset 0 1px 2px rgba(0, 0 , 0, .07); 55 | background-color: #fff; 56 | outline: 0; 57 | margin: 1px; 58 | padding: 3px 5px; 59 | } 60 | 61 | .hidden { 62 | display: none; 63 | } 64 | 65 | /** 66 | * Animations 67 | */ 68 | .fadeIn-frames { 69 | from { opacity: 0; } to { opacity: 1; } 70 | } 71 | @keyframes opacity {.fadeIn-frames;} -------------------------------------------------------------------------------- /src/assets/less/fields.less: -------------------------------------------------------------------------------- 1 | // main: wp-custom-fields.less 2 | 3 | /** 4 | * Framework Fields 5 | * ---------------------------------- 6 | */ 7 | @import 'fields/button.less'; 8 | @import 'fields/boxshadow.less'; 9 | @import 'fields/colorpicker.less'; 10 | @import 'fields/datepicker.less'; 11 | @import 'fields/dimensions.less'; 12 | @import 'fields/heading.less'; 13 | @import 'fields/icons.less'; 14 | @import 'fields/location.less'; 15 | @import 'fields/media.less'; 16 | @import 'fields/radio.less'; 17 | @import 'fields/repeatable.less'; 18 | @import 'fields/select.less'; 19 | @import 'fields/slider.less'; 20 | @import 'fields/typography.less'; 21 | 22 | 23 | /** 24 | * General Field sTyling 25 | */ 26 | .wpcf-field-left { 27 | display: inline-block; 28 | margin-right: @grid-space; 29 | vertical-align: top; 30 | } 31 | 32 | .wpcf-field { 33 | box-sizing: border-box; 34 | padding-bottom: @grid-space*0.75; 35 | &.field-divider, &.field-heading { 36 | border: none; 37 | padding: 0; 38 | } 39 | input:placeholder { 40 | color: @wp-greyborder; 41 | } 42 | } 43 | 44 | .wpcf-dependent-field { 45 | display: none; 46 | opacity: 0; 47 | transition: opacity 300ms ease-out; 48 | &.active { 49 | display: block; 50 | opacity: 1; 51 | } 52 | } 53 | 54 | .wpcf-field-title { 55 | border-bottom: 1px solid @light-grey; 56 | h4 { 57 | font-size: 1.1em; 58 | margin: 0 0 0.5em 0; 59 | } 60 | } 61 | 62 | .wpcf-field-description { 63 | p { 64 | color: @wp-description; 65 | font-size: 14px; 66 | font-style: italic; 67 | } 68 | } 69 | 70 | .wpcf-field-input { 71 | margin: 20px 0 10px 0; 72 | .error { 73 | border: 1px solid @wp-red; 74 | } 75 | label.error { 76 | background: lighten(@wp-red, 30); 77 | display: block; 78 | margin: 10px 1px 0 1px; 79 | padding: 3px 5px; 80 | position: relative; 81 | &:before { 82 | border-bottom: 7px solid @wp-red; 83 | border-left: 7px solid transparent; 84 | border-right: 7px solid transparent; 85 | content: ''; 86 | display: block; 87 | height: 0; 88 | left: 5px; 89 | position: absolute; 90 | top: -7px; 91 | width: 0; 92 | } 93 | } 94 | input[readonly]:hover { 95 | cursor: not-allowed; 96 | -moz-user-select: none; 97 | user-select: none; 98 | } 99 | } 100 | 101 | .wpcf-icon-list { 102 | overflow: hidden; 103 | margin: 1px 1px @grid-space*0.5 1px; 104 | li { 105 | border: 1px solid @wp-btnborder; 106 | border-radius: @wp-btnradius; 107 | float: left; 108 | height: 28px; 109 | margin: 0 0 0 -1px; 110 | width: 28px; 111 | &:first-child { 112 | margin-left: 0; 113 | } 114 | label { 115 | background-color: @white; 116 | display: block; 117 | font-size: 16px; 118 | height: 28px; 119 | i { 120 | line-height: 28px; 121 | } 122 | margin: 0; 123 | text-align: center; 124 | } 125 | input { 126 | display: none; 127 | } 128 | input:checked ~ label, label:hover { 129 | background-color: @wp-blue; 130 | color: @white; 131 | } 132 | } 133 | } 134 | 135 | /** 136 | * Reusable classes 137 | */ 138 | .input-button-clear { 139 | color: @wp-red; 140 | } -------------------------------------------------------------------------------- /src/assets/less/fields/boxshadow.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Boxshadow */ 4 | .wpcf-boxshadow { 5 | overflow: hidden; 6 | } -------------------------------------------------------------------------------- /src/assets/less/fields/button.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Button */ 4 | .wrap .wpcf-button-message.updated { 5 | margin-top: 20px; 6 | } -------------------------------------------------------------------------------- /src/assets/less/fields/colorpicker.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Colorpicker */ 4 | .wp-picker-open + .wp-picker-input-wrap { 5 | display: flex; 6 | label { 7 | margin: 0; 8 | } 9 | } 10 | 11 | .wp-color-result .color-alpha { 12 | height: 100% !important; 13 | } 14 | 15 | .iris-picker { 16 | margin-bottom: 6px; 17 | } 18 | 19 | .iris-alpha-slider { 20 | margin-left: 8px !important; 21 | } -------------------------------------------------------------------------------- /src/assets/less/fields/datepicker.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Datepicker Field */ 4 | .wpcf-datepicker { 5 | a { 6 | border: 1px solid @wp-grey; 7 | display: inline-block; 8 | height: 28px; 9 | text-align: center; 10 | width: 28px; 11 | &:hover { 12 | cursor: pointer; 13 | } 14 | i { 15 | line-height: 28px; 16 | } 17 | } 18 | } 19 | 20 | /** 21 | * Overwrite some of flatpickers defaults 22 | */ 23 | .flatpickr-months .flatpickr-month { 24 | height: 36px; 25 | } 26 | 27 | .flatpickr-current-month { 28 | font-size: 1.1em; 29 | height: 36px; 30 | padding: 4px 0 0 0; 31 | .numInputWrapper { 32 | border: 1px solid #8c8f94; 33 | border-radius: 3px; 34 | vertical-align: middle; 35 | } 36 | input.cur-year { 37 | appearance: textfield; 38 | box-shadow: none; 39 | margin: 0 0 0 0.5ch; 40 | padding: 0; 41 | } 42 | } 43 | 44 | .flatpickr-current-month 45 | .flatpickr-day.selected, 46 | .flatpickr-day.startRange, 47 | .flatpickr-day.endRange, 48 | .flatpickr-day.selected.inRange, 49 | .flatpickr-day.startRange.inRange, 50 | .flatpickr-day.endRange.inRange, 51 | .flatpickr-day.selected:focus, 52 | .flatpickr-day.startRange:focus, 53 | .flatpickr-day.endRange:focus, 54 | .flatpickr-day.selected:hover, 55 | .flatpickr-day.startRange:hover, 56 | .flatpickr-day.endRange:hover, 57 | .flatpickr-day.selected.prevMonthDay, 58 | .flatpickr-day.startRange.prevMonthDay, 59 | .flatpickr-day.endRange.prevMonthDay, 60 | .flatpickr-day.selected.nextMonthDay, 61 | .flatpickr-day.startRange.nextMonthDay, 62 | .flatpickr-day.endRange.nextMonthDay { 63 | background: @wp-blue; 64 | border-color: @wp-blue; 65 | } 66 | 67 | .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { 68 | background: @wp-grey; 69 | border-color: @wp-grey; 70 | } -------------------------------------------------------------------------------- /src/assets/less/fields/dimensions.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Dimensions Field */ 4 | .wpcf-dimensions-input { 5 | display: flex; 6 | input { 7 | max-width: 128px; 8 | } 9 | i { 10 | height: 28px; 11 | line-height: 30px; 12 | text-align: center; 13 | } 14 | .customize-control & { 15 | input { 16 | margin: 1px; 17 | max-width: 100px; 18 | } 19 | select { 20 | max-width: 54px; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/assets/less/fields/heading.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /** 4 | * Heading field within the customizer 5 | */ 6 | .customize-control-heading { 7 | background: #fff; 8 | border-bottom: 1px solid @wp-border; 9 | border-top: 4px solid @wp-greyer; 10 | margin: 0 -12px; 11 | overflow: hidden; 12 | padding: 12px; 13 | + .customize-control { 14 | margin-top: 12px; 15 | } 16 | .customize-control-title { 17 | display: block; 18 | font-size: 20px; 19 | font-weight: 300; 20 | margin: 5px 0 0 0; 21 | overflow: hidden; 22 | } 23 | .customize-control-description { 24 | border-top: 1px solid @wp-border; 25 | padding-top: 5px; 26 | } 27 | } 28 | 29 | .wpcf-field-title { 30 | margin-bottom: 12px; 31 | } 32 | 33 | .wpcf-heading-collapsible { 34 | overflow: hidden; 35 | transition: all 300ms ease-out; 36 | &:hover { 37 | cursor: pointer; 38 | .customize-control-title:after, h3:after { 39 | color: @wp-blueborder; 40 | } 41 | } 42 | .customize-control-title:after, h3:after { 43 | content: "\f343"; 44 | font: normal 16px/42px dashicons; 45 | float: right; 46 | } 47 | h3:after { 48 | position: relative; 49 | top: -9px; 50 | } 51 | &.active { 52 | .customize-control-title:after, h3:after { 53 | content: "\f347"; 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /src/assets/less/fields/icons.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Icon Field */ 4 | .wpcf-icons { 5 | border: 1px solid @wp-btnborder; 6 | border-radius: @wp-btnradius; 7 | max-height: 240px; 8 | overflow: scroll; 9 | } 10 | 11 | .wpcf-icons-search { 12 | color: @wp-greyborder; 13 | margin: @grid-space*0.5 0; 14 | } 15 | 16 | .wpcf-icons-title { 17 | color: @wp-greyborder; 18 | font-size: 12px; 19 | margin: 0; 20 | padding: @grid-space*0.25 @grid-space*0.5; 21 | } -------------------------------------------------------------------------------- /src/assets/less/fields/location.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Location Field */ 4 | .wpcf-map-canvas { 5 | margin: 20px 0; 6 | min-height: 360px; 7 | width: 100%; 8 | } -------------------------------------------------------------------------------- /src/assets/less/fields/media.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Uploader */ 4 | .wpcf-upload-wrapper { 5 | clear: both; 6 | overflow: hidden; 7 | } 8 | 9 | // Hide the add field if we have some data 10 | .wpcf-upload-wrapper[data-multiple=""] .wpcf-single-media + .wpcf-single-media { 11 | display: none !important; 12 | } 13 | 14 | .wpcf-single-media { 15 | box-sizing: border-box; 16 | border-radius: @wp-btnradius; 17 | border: 1px solid @wp-btnborder; 18 | float: left; 19 | display: block; 20 | height: 150px; 21 | margin: 0 7px 7px 0; 22 | position: relative; 23 | text-align: center; 24 | width: 150px; 25 | i { 26 | font-size: 16px; 27 | line-height: @grid-space; 28 | } 29 | img { 30 | height: auto; 31 | max-width: 100%; 32 | } 33 | .wpcf-upload-remove { 34 | background: #fff; 35 | border: 1px solid @wp-btnborder; 36 | border-radius: 3px; 37 | color: @wp-red; 38 | height: @grid-space; 39 | position: absolute; 40 | text-align: center; 41 | top: 3px; 42 | right: 3px; 43 | width: @grid-space; 44 | z-index: 9; 45 | &:hover { 46 | color: @wp-blue; 47 | } 48 | } 49 | .wpcf-upload-add { 50 | box-sizing: border-box; 51 | font-size: 16px; 52 | font-weight: 700; 53 | left: 50%; 54 | margin: -30px 0 0 -60px; 55 | padding: @grid-space*0.5; 56 | position: absolute; 57 | top: 50%; 58 | width: 120px; 59 | &:focus, &:active { 60 | border: none; 61 | box-shadow: none; 62 | outline: none; 63 | } 64 | i { 65 | left: -6px; 66 | position: relative; 67 | top: 3px; 68 | } 69 | } 70 | &.empty { 71 | border: 1px dashed @wp-btnborder; 72 | } 73 | &.type-video { 74 | width: 210px; 75 | } 76 | &.type-audio { 77 | padding-top: 40px; 78 | width: 314px; 79 | } 80 | } 81 | 82 | // Our input for sortable 83 | .wpcf-media-highlight { 84 | box-sizing: border-box; 85 | border-radius: @wp-btnradius; 86 | border: 1px dashed @wp-btnborder; 87 | float: left; 88 | height: 150px; 89 | margin: 0 7px 7px 0; 90 | width: 150px; 91 | } 92 | 93 | .wpcf-media-url { 94 | box-sizing: border-box; 95 | bottom: 0; 96 | left: 0; 97 | margin: 0 -1px -1px -1px; 98 | position: absolute; 99 | z-index: 9; 100 | width: ~"calc(100% + 2px)"; 101 | i { 102 | background-color: @wp-greyer; 103 | border-radius: @wp-btnradius; 104 | border: 1px solid @wp-btnborder; 105 | box-sizing: border-box; 106 | height: 100%; 107 | line-height: 25px; 108 | left: 0; 109 | position: absolute; 110 | top: 0; 111 | width: 18px; 112 | } 113 | input { 114 | border-left: none; 115 | padding-left: 26px; 116 | margin: 0; 117 | width: 100%; 118 | &:focus { 119 | border-color: #ddd; 120 | box-shadow: none; 121 | } 122 | } 123 | } 124 | 125 | .wpcf-background-attributes { 126 | .wpcf-select, .select2-container { 127 | display: block; 128 | min-width: 190px; 129 | } 130 | } -------------------------------------------------------------------------------- /src/assets/less/fields/radio.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Radio and Checkbox Fields */ 4 | .wpcf-field-checkbox-wrapper, .wpcf-field-radio-wrapper { 5 | margin: 5px 1px 9px 1px; 6 | i { 7 | font-size: 1.25em; 8 | margin-right: 5px; 9 | position: relative; 10 | top: 2px; 11 | } 12 | input, label { 13 | display: inline-block; 14 | margin: 0; 15 | vertical-align: top; 16 | } 17 | label { 18 | margin: 0 @grid-space*0.5 0 @grid-space*0.25; 19 | } 20 | img { 21 | display: block; 22 | } 23 | &.switcher, &.buttonset { 24 | input { 25 | display: none; 26 | height: 0; 27 | margin: 0; 28 | min-width: 0; 29 | visibility: hidden; 30 | width: 0; 31 | } 32 | } 33 | &.buttonset { 34 | li { 35 | display: inline-block; 36 | vertical-align: top; 37 | } 38 | label { 39 | background-color: @wp-btnback; 40 | border: 1px solid @wp-btnborder; 41 | border-radius: @wp-btnradius; 42 | box-shadow: @wp-btnboxshadow; 43 | color: @wp-btncolor; 44 | line-height: 40px; 45 | margin: 0; 46 | padding: 5px 20px; 47 | transition: @base-transition; 48 | } 49 | input:checked + label { 50 | background-color: @wp-blue; 51 | border: 1px solid @wp-blueborder; 52 | box-shadow: 1px solid @wp-blueborder; 53 | color: #fff; 54 | } 55 | label:hover { 56 | background-color: @wp-btnbackhvr; 57 | border: 1px solid @wp-btnborderhvr; 58 | color: @wp-btncolorhvr; 59 | } 60 | } 61 | &.switcher { 62 | label { 63 | margin: 0; 64 | position: relative; 65 | span { 66 | position: relative; 67 | top: -7px; 68 | } 69 | &:before { 70 | background-color: @wp-btnback; 71 | border: 1px solid @wp-btnborder; 72 | border-radius: @grid-space*0.5; 73 | content: ''; 74 | display: inline-block; 75 | height: @grid-space - 2; 76 | margin-right: 6px; 77 | position: relative; 78 | transition: all 200ms ease-out; 79 | width: @grid-space*2; 80 | } 81 | &:hover:before { 82 | background-color: @wp-btnbackhvr; 83 | border: 1px solid @wp-btnborderhvr; 84 | } 85 | &:after { 86 | background: #fff; 87 | box-shadow: @wp-boxshadow; 88 | border-radius: 50%; 89 | content: ''; 90 | height: @grid-space - 2; 91 | left: 1px; 92 | position: absolute; 93 | top: 1px; 94 | transition: all 200ms ease-out; 95 | width: @grid-space - 2; 96 | } 97 | } 98 | input:checked + label { 99 | &:before { 100 | background-color: @wp-green; 101 | } 102 | &:after { 103 | left: @grid-space + 3; 104 | } 105 | } 106 | } 107 | &.switcher-disable input:checked + label:before { 108 | background-color: @wp-red; 109 | } 110 | } -------------------------------------------------------------------------------- /src/assets/less/fields/repeatable.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Repeatable */ 4 | .wpcf-repeatable-group { 5 | border: 1px solid @wp-lightborder; 6 | border-bottom: none; 7 | border-radius: @base-radius; 8 | min-height: @grid-space*1.5; 9 | position: relative; 10 | &:last-of-type { 11 | border-bottom: 1px solid @wp-lightborder; 12 | margin-bottom: 10px; 13 | } 14 | .wpcf-repeatable-fields.hidden { 15 | display: none; 16 | } 17 | &.ui-sortable-handle:hover { 18 | cursor: grab; 19 | } 20 | &.ui-sortable-helper:hover { 21 | cursor: grabbing; 22 | } 23 | } 24 | 25 | 26 | .wpcf-repeatable-fields { 27 | padding: @grid-space*0.5 @grid-space*1.5 @grid-space*0.25 @grid-space*1.5; 28 | .wpcf-field { 29 | padding: 0; 30 | } 31 | } 32 | 33 | .wpcf-repeatable-toggle, .wpcf-repeatable-remove-group, .wpcf-repeatable-drag { 34 | display: block; 35 | position: absolute; 36 | &:focus { 37 | box-shadow: none; 38 | outline: none; 39 | } 40 | } 41 | 42 | .wpcf-repeatable-drag { 43 | color: @wp-greyborder; 44 | left: @grid-space*0.25; 45 | margin-top: -12px; 46 | top: 50%; 47 | &:hover { 48 | cursor: grab; 49 | } 50 | .ui-sortable-helper & { 51 | &:hover { 52 | cursor: grabbing; 53 | } 54 | } 55 | } 56 | 57 | .wpcf-repeatable-toggle { 58 | height: @grid-space; 59 | left: -@grid-space; 60 | top: 3px; 61 | width: @grid-space; 62 | } 63 | 64 | .wpcf-repeatable-remove-group { 65 | background-color: @wp-red; 66 | border-radius: 3px; 67 | color: #fff; 68 | height: @grid-space;; 69 | right: 6px; 70 | top: 6px; 71 | width: @grid-space; 72 | &:hover { 73 | color: #fff; 74 | } 75 | } 76 | 77 | .wpcf-repeatable-field { 78 | h5 { 79 | margin: 0 0 0.25em 0; 80 | } 81 | p { 82 | margin-top: 0; 83 | } 84 | } 85 | 86 | .wpcf-highlight { 87 | border: 1px dashed @wp-btnborder; 88 | height: @grid-space * 2; 89 | margin-bottom: @grid-space*0.333333333; 90 | } 91 | 92 | .wpcf-repeatable-buttons { 93 | text-align: right; 94 | .button { 95 | display: inline-block; 96 | margin: 0 0 0 5px; 97 | min-width: 80px; 98 | text-align: center; 99 | vertical-align: top; 100 | } 101 | i { 102 | line-height: 28px; 103 | } 104 | .dashicons-minus { 105 | color: @wp-red; 106 | } 107 | } -------------------------------------------------------------------------------- /src/assets/less/fields/select.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | .wpcf-select .wpcf-placeholder { 3 | color: @wp-greyborder; 4 | } 5 | 6 | /* Select2 Styling */ 7 | .select2-container { 8 | min-width: @grid-space * 6; 9 | vertical-align: top; 10 | .select2-selection--single { 11 | height: 30px; 12 | } 13 | .select2-selection--multiple { 14 | min-height: 30px; 15 | .select2-search--inline, .select2-search__field { 16 | margin: 0; 17 | } 18 | } 19 | } 20 | 21 | .select2-container--default .select2-selection--single { 22 | border: 1px solid @wp-btnborder; 23 | border-radius: 4px; 24 | color: @wp-field; 25 | } 26 | 27 | .select2-dropdown { 28 | border: 1px solid @wp-btnborder; 29 | } 30 | 31 | .select2-container--default .select2-search--dropdown .select2-search__field { 32 | border: 1px solid @wp-btnborder; 33 | } 34 | 35 | .select2-container--default .select2-results__option--highlighted[aria-selected] { 36 | background-color: @wp-blue; 37 | } 38 | 39 | .select2-container--default .select2-results__option .select2-results__option { 40 | padding: 3px 8px; 41 | img { 42 | display: block; 43 | } 44 | } 45 | 46 | .select2-container--default .select2-selection--multiple { 47 | .select2-selection__choice { 48 | padding-right: 12px; 49 | } 50 | .select2-selection__choice__remove { 51 | padding: 2px 4px 5px 4px; 52 | } 53 | } -------------------------------------------------------------------------------- /src/assets/less/fields/slider.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /** 4 | * Styling for the slider field 5 | */ 6 | .wpcf-slider-input { 7 | -webkit-appearance: none; 8 | appearance: none; 9 | background: @dark-white; 10 | border-radius: @base-radius; 11 | height: 15px; 12 | margin: 7px 10px 7px 0; 13 | max-width: 140px; 14 | min-width: 60px; 15 | outline: none; 16 | opacity: 0.8; 17 | transition: opacity 350ms ease-out; 18 | width: 80%; 19 | } 20 | 21 | /* Mouse-over effects */ 22 | .wpcf-slider-input:hover { 23 | opacity: 1; /* Fully shown on hover */ 24 | } 25 | 26 | /* The slider handle (the knob that you move) */ 27 | .wpcf-slider-input::-webkit-slider-thumb { 28 | -webkit-appearance: none; 29 | appearance: none; 30 | background:@wp-blue; 31 | box-shadow: @wp-boxshadow; 32 | border: 2px solid @light-grey; 33 | border-radius: @base-radius * 4; 34 | cursor: pointer; 35 | height: 25px; 36 | width: 25px; 37 | } 38 | 39 | /* Same styling for Firefox */ 40 | .wpcf-slider-input::-moz-range-thumb { 41 | background:@wp-blue; 42 | box-shadow: @wp-boxshadow; 43 | border: 2px solid @light-grey; 44 | border-radius: @base-radius * 4; 45 | cursor: pointer; 46 | height: 25px; 47 | width: 25px; 48 | } 49 | 50 | .wpcf-slider-value { 51 | display: inline-block; 52 | font-size: 1.25em; 53 | font-weight: bold; 54 | margin-top: 2px; 55 | max-width: 60px; 56 | padding: 0.25rem; 57 | width: 20%; 58 | } -------------------------------------------------------------------------------- /src/assets/less/fields/typography.less: -------------------------------------------------------------------------------- 1 | // main: ../wp-custom-fields.less 2 | 3 | /* Typography Field */ 4 | .wpcf-typography-fonts ~ .select2-container { 5 | max-width: 100%; 6 | min-width: 100%; 7 | .wpcf-framework & { 8 | min-width: 314px; 9 | } 10 | .select2-selection--single { 11 | height: @grid-space * 2; 12 | .select2-selection__rendered { 13 | line-height: @grid-space*1.5; 14 | padding: 4px 20px 4px 4px; 15 | } 16 | .select2-selection__arrow { 17 | top: 10px; 18 | } 19 | } 20 | } 21 | 22 | // Select2 container must be visible in WordPress Customizer 23 | .select2-container.select2-container--open { 24 | z-index: 999999; 25 | } 26 | 27 | .wpcf-typography-weight { 28 | display: flex; 29 | select { 30 | flex-grow: 1; 31 | } 32 | } 33 | 34 | .wpcf-typography-properties { 35 | margin-top: @grid-space*0.5; 36 | &.wpcf-field-left { 37 | margin-right: 2px; 38 | } 39 | > * { 40 | margin-bottom: @grid-space*0.5; 41 | } 42 | .customize-control & { 43 | float: left; 44 | margin-right: 2px; 45 | } 46 | } 47 | 48 | .wpcf-typography-appearance { 49 | margin-top: @grid-space*0.5; 50 | .wpcf-field-left { 51 | margin-right: 0; 52 | } 53 | + label { 54 | clear: both; 55 | display: block; 56 | } 57 | .customize-control & { 58 | ul { 59 | display: inline-block; 60 | } 61 | } 62 | } 63 | 64 | .customize-control-typography { 65 | margin-bottom: @grid-space; 66 | } -------------------------------------------------------------------------------- /src/assets/less/frame.less: -------------------------------------------------------------------------------- 1 | // main: wp-custom-fields.less 2 | 3 | /** 4 | * Framework Layout 5 | * ---------------------------------- 6 | */ 7 | .wpcf-framework { 8 | border: 1px solid @wp-lightborder; 9 | margin-top: 20px; 10 | .button { 11 | margin-right: 5px; 12 | } 13 | header { 14 | h2 { 15 | margin-bottom: @grid-space; 16 | } 17 | &.wpfc-header-scrolling { 18 | margin-top: 120px; 19 | } 20 | } 21 | a, i { 22 | text-decoration: none; 23 | transition: all 350ms ease-in-out; 24 | } 25 | footer { 26 | padding: @grid-space; 27 | } 28 | input, select, textarea { 29 | max-width: 100%; 30 | vertical-align: top; 31 | } 32 | label { 33 | clear: both; 34 | display: block; 35 | margin: 7px 0; 36 | } 37 | .postbox & { 38 | border: none; 39 | margin-top: 0; 40 | header { 41 | padding: @grid-space 0 0 0; 42 | } 43 | &.tabs-left .wpcf-tabs { 44 | margin-left: 0; 45 | li a.active, li a:hover { 46 | border-left: 1px solid @wp-lightborder; 47 | } 48 | } 49 | .wpcf-sections { 50 | border: 1px solid @wp-lightborder; 51 | } 52 | } 53 | #poststuff & { 54 | h2, h3 { 55 | font-size: 1.3em; 56 | font-weight: 600; 57 | margin: 1em 0; 58 | padding: 0; 59 | &.wpcf-section-title { 60 | margin-top: 0; 61 | } 62 | } 63 | } 64 | } 65 | 66 | .wpcf-notifications { 67 | box-sizing: border-box; 68 | padding: @grid-space; 69 | .wpfc-header-scrolling & { 70 | background: #fff; 71 | border-bottom: 1px solid @wp-lightborder; 72 | display: flex; 73 | position: fixed; 74 | top: 32px; 75 | z-index: 11; 76 | h1 { 77 | flex-grow: 1; 78 | } 79 | .settings-error { 80 | display: none; 81 | } 82 | } 83 | .postbox-container { 84 | display: none; 85 | } 86 | } 87 | 88 | .wpcf-buttons { 89 | clear: both; 90 | text-align: right; 91 | } 92 | 93 | .wpcf-tabs { 94 | margin: 0; 95 | padding: 0 @grid-space; 96 | .tabs-left & { 97 | float: left; 98 | padding: 0; 99 | li { 100 | display: block; 101 | a { 102 | margin: 0 -1px 0 0; 103 | &.active, &:hover { 104 | border: 1px solid @wp-lightborder; 105 | border-left: none; 106 | border-right: none; 107 | } 108 | } 109 | } 110 | } 111 | li { 112 | display: inline-block; 113 | margin: 0; 114 | a { 115 | display: block; 116 | font-size: 14px; 117 | margin: 0 0 -1px 0; 118 | padding: @grid-space * 0.75 @grid-space; 119 | transition: @base-transition; 120 | i { 121 | font-size: 18px; 122 | margin-right: 3px; 123 | position: relative; 124 | top: 3px; 125 | } 126 | &.active, &:hover { 127 | background-color: @white; 128 | border: 1px solid @wp-lightborder; 129 | border-bottom: none; 130 | color: @wp-black; 131 | } 132 | &:focus { 133 | box-shadow: none; 134 | outline: none; 135 | } 136 | } 137 | } 138 | } 139 | 140 | .wpcf-sections { 141 | background: #fff; 142 | border-bottom: 1px solid @wp-lightborder; 143 | border-top: 1px solid @wp-lightborder; 144 | overflow: hidden; 145 | padding: @grid-space; 146 | .tabs-left & { 147 | border: 1px solid @wp-lightborder; 148 | border-right: none; 149 | } 150 | } 151 | 152 | .wpcf-section { 153 | animation: fadeIn 200ms ease-in-out; 154 | display: none; 155 | &.active { 156 | display: block; 157 | } 158 | } 159 | 160 | .wpcf-section-title { 161 | margin: 0 0 24px 0; 162 | } 163 | 164 | 165 | .wpcf-section-description { 166 | margin: -1em 0 0 0; 167 | padding-bottom: 1.5rem; 168 | } -------------------------------------------------------------------------------- /src/assets/less/grid.less: -------------------------------------------------------------------------------- 1 | // main: wp-custom-fields.less 2 | 3 | /** 4 | * Grid Less 5 | */ 6 | 7 | 8 | /* Columns 9 | ------------------------*/ 10 | .grid.flex { 11 | display: flex; 12 | flex-wrap: wrap; 13 | justify-content: space-between; 14 | } 15 | 16 | /* Grid Columns */ 17 | @marge: 2%; 18 | @half: (100% - @marge)*0.5; 19 | @third: (100% - 2*@marge)*0.3333333; 20 | @two-third: @third*2 + @marge; 21 | @fourth: (100% - 3*@marge)*0.25; 22 | @three-fourth: @fourth * 3 + @marge*2; 23 | @fifth: (100% - 4*@marge)*0.2; 24 | 25 | /* Individual Grids */ 26 | .wpcf-full { 27 | width: 100%; 28 | } 29 | 30 | .wpcf-half { 31 | width: @half; 32 | } 33 | 34 | .wpcf-third { 35 | width: @third; 36 | } 37 | 38 | .wpcf-two-third { 39 | width: @two-third; 40 | } 41 | 42 | .wpcf-three-fourth { 43 | width: @three-fourth; 44 | } 45 | 46 | .wpcf-fourth { 47 | width: @fourth; 48 | @media screen and (min-width: 1081px) and (max-width: 1365px) { 49 | width: @third; 50 | } 51 | } 52 | 53 | .wpcf-fifth { 54 | width: @fifth; 55 | @media screen and (min-width: 1081px) and (max-width: 1365px) { 56 | width: @fourth; 57 | } 58 | } 59 | 60 | /* Queries */ 61 | .wpcf-third, .wpcf-two-third, .wpcf-three-fourth, .wpcf-fourth, .wpcf-fifth { 62 | @media screen and (max-width: 1080px) { 63 | width: @half; 64 | } 65 | } 66 | 67 | .wpcf-full, .wpcf-half, .wpcf-third, .wpcf-two-third, .wpcf-three-fourth, .wpcf-fourth, .wpcf-fifth { 68 | margin-bottom: @grid-space*0.25; 69 | @media screen and (max-width: 767px) { 70 | width: 100%; 71 | } 72 | } 73 | 74 | 75 | /* Grid Helpers 76 | ------------------------*/ 77 | .no-padding { 78 | padding: 0; 79 | } -------------------------------------------------------------------------------- /src/assets/less/wp-custom-fields.less: -------------------------------------------------------------------------------- 1 | // out: ../../../public/css/wp-custom-fields.min.css, compress: true 2 | 3 | /** 4 | * All CSS for displaying (additional) admin sections 5 | * 6 | * @package WP_Custom_Fields 7 | * @since 1.0.0 8 | * @author Michiel 9 | */ 10 | @import 'attributes.less'; 11 | @import 'grid.less'; 12 | @import 'frame.less'; 13 | @import 'fields.less'; -------------------------------------------------------------------------------- /src/config/scripts.php: -------------------------------------------------------------------------------- 1 | 'alpha-color-picker', 13 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'js/vendor/alpha-color-picker.min.js', 14 | 'deps' => ['jquery', 'wp-color-picker' ], 15 | 'ver' => '', 16 | 'in_footer' => 'true', 17 | 'action' => 'register', 18 | ]; 19 | 20 | $scripts[] = [ 21 | 'handle' => 'wp-custom-fields-js', 22 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'js/wpcf.js', 23 | 'deps' => ['jquery', 'wp-color-picker' ], 24 | 'ver' => null, 25 | 'in_footer' => true, 26 | 'action' => 'register', 27 | 'localize' => [ 28 | 'ajaxUrl' => admin_url( 'admin-ajax.php' ), 29 | 'debug' => defined('WP_DEBUG') && WP_DEBUG ? true : false, 30 | 'nonce' => wp_create_nonce('wp-custom-fields') 31 | ], 32 | 'object' => 'wpcf' 33 | ]; 34 | 35 | $scripts[] = [ 36 | 'handle' => 'google-maps-js', 37 | 'src' => 'https://maps.googleapis.com/maps/api/js?libraries=places&key=' . GOOGLE_MAPS_KEY, 38 | 'deps' => [], 39 | 'ver' => '3', 40 | 'in_footer' => true, 41 | 'action' => 'register' 42 | ]; 43 | 44 | $scripts[] = [ 45 | 'handle' => 'flatpicker-js', 46 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'js/vendor/flatpicker.min.js', 47 | 'deps' => [], 48 | 'ver' => null, 49 | 'in_footer' => true, 50 | 'action' => 'register' 51 | ]; 52 | 53 | $scripts[] = [ 54 | 'handle' => 'flatpicker-i18n-nl', 55 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'js/vendor/flatpicker-i18n/nl.js', 56 | 'deps' => [], 57 | 'ver' => null, 58 | 'in_footer' => true, 59 | 'action' => 'register' 60 | ]; 61 | 62 | $scripts[] = [ 63 | 'handle' => 'select2-js', 64 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'js/vendor/select2.min.js', 65 | 'deps' => [], 66 | 'ver' => null, 67 | 'in_footer' => true, 68 | 'action' => 'register' 69 | ]; -------------------------------------------------------------------------------- /src/config/styles.php: -------------------------------------------------------------------------------- 1 | 'wpc-material-css', 13 | 'src' => 'https://fonts.googleapis.com/icon?family=Material+Icons', 14 | 'deps' => [], 15 | 'ver' => null, 16 | 'media' => 'all' 17 | ]; 18 | 19 | $styles[] = [ 20 | 'handle' => 'wpc-font-awesome-css', 21 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'css/vendor/font-awesome.min.css', 22 | 'deps' => [], 23 | 'ver' => null, 24 | 'media' => 'all' 25 | ]; 26 | 27 | $styles[] = [ 28 | 'handle' => 'wp-color-picker', 29 | 'src' => '', 30 | 'deps' => [], 31 | 'ver' => '', 32 | 'media' => '' 33 | ]; 34 | 35 | $styles[] = [ 36 | 'handle' => 'wpc-flatpicker-css', 37 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'css/vendor/flatpicker.min.css', 38 | 'deps' => [], 39 | 'ver' => '', 40 | 'media' => '' 41 | ]; 42 | 43 | $styles[] = [ 44 | 'handle' => 'wpc-select2-css', 45 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'css/vendor/select2.min.css', 46 | 'deps' => [], 47 | 'ver' => '', 48 | 'media' => '' 49 | ]; 50 | 51 | $styles[] = [ 52 | 'handle' => 'wpc-css', 53 | 'src' => WP_CUSTOM_FIELDS_ASSETS_URL . 'css/wp-custom-fields.min.css', 54 | 'deps' => [], 55 | 'ver' => null, 56 | 'media' => 'all' 57 | ]; -------------------------------------------------------------------------------- /src/templates/frame.php: -------------------------------------------------------------------------------- 1 | 6 | 7 | type == 'options' ) { ?> 8 |
9 |
10 | 11 | 12 |
13 | 14 |
15 | 16 | type != 'post' ) { ?> 17 | 18 |
19 | 20 | type == 'options' ) { ?> 21 |

title; ?>

22 | 23 | 24 | type == 'user' || $frame->type == 'term' ) { ?> 25 |

title; ?>

26 | 27 | 28 | option_props['restore_button'] || $frame->option_props['save_button'] ) { ?> 29 |
30 | option_props['errors']; 33 | echo $frame->option_props['restore_button']; 34 | echo $frame->option_props['save_button']; 35 | ?> 36 |
37 | 38 | 39 |
40 | 41 | 42 | 43 | 70 | 71 |
72 | 73 |
74 | 75 | sections as $key => $section ) { ?> 76 | 77 |
78 | 79 | 80 |

81 | 82 | 83 | 84 |

85 | 86 | 87 |
88 | 89 | $field ) { ?> 90 | 91 |
92 | 93 | 94 | 95 | 96 |
data-sections="" > 97 | ' . $field['title'] . ''; 99 | ?> 100 |
101 | 102 | 103 | 104 |
$v) { ?> data-="" > 105 | 106 |
107 | 108 | 109 | 110 |
111 |

112 |
113 | 114 | 115 | 116 | 117 |
118 | 119 | 120 | 121 |
122 | 123 |
124 | 125 | 126 | 127 |
128 | 129 | option_props['reset_button'] || $frame->option_props['restore_button_bottom'] || $frame->option_props['save_button_bottom'] ) { ?> 130 |
131 | option_props['reset_button']; 133 | echo $frame->option_props['restore_button_bottom']; 134 | echo $frame->option_props['save_button_bottom']; 135 | ?> 136 |
137 | 138 | 139 |
140 | 141 | settings_fields; 146 | ?> 147 | 148 | 149 | 150 | type == 'options' ) { ?> 151 | 152 | 153 | 154 | type == 'options' ) { ?> 155 |
156 |
157 | -------------------------------------------------------------------------------- /src/templates/nothing.php: -------------------------------------------------------------------------------- 1 | 6 |
7 |

8 | 9 |

10 |
--------------------------------------------------------------------------------