Skip to content

Commit

Permalink
Merge pull request #8 from viivue/vue-integrating
Browse files Browse the repository at this point in the history
Vue integrating
  • Loading branch information
daomapsieucap authored Apr 21, 2022
2 parents 83b4e53 + 00cf0d7 commit c088bc2
Show file tree
Hide file tree
Showing 19 changed files with 478 additions and 351 deletions.
Binary file modified .wordpress-org/screenshot-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .wordpress-org/screenshot-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .wordpress-org/screenshot-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ All notable changes to this project will be documented in this file.

## Changelog

### v3.4.0 - 2021-12-06
### v4.0.0 - 2022-04-21

- New: Mass upgrade with VueJS and a brand-new layout.

### v4.0.0 - 2021-12-06

- Changed: Refactor HTML, CSS, JS
- New: Search icons inside popup
Expand Down
23 changes: 12 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<div align="center">

<img width="100px" src="https://ps.w.org/acf-icomoon/assets/icon.svg" align="center" alt="Icomoon for Advanced Custom Fields" />

<h1 align="center" style="border:none; padding:0;">IcoMoon for Advanced Custom Fields</h1>

<p align="center">A new ACF field that allows to select icon from <a href="https://icomoon.io" target="_blank">IcoMoon</a> json.</p>

<p align="center">
<a href="https://wordpress.org/plugins/acf-icomoon/">
<a href="https://github.com/viivue/acf-icomoon/releases/latest">
<img src="https://badgen.net/github/release/viivue/acf-icomoon/?cache=600">
</a><a href="https://wordpress.org/plugins/acf-icomoon/">
<img src="https://img.shields.io/badge/-WordPress-0273A9">
</a>
<a href="https://icomoon.io">
Expand All @@ -17,28 +19,27 @@
<img src="https://img.shields.io/badge/-Advanced Custom Fields-347C39">
</a>
</p>

</div>

</div>

## Getting started

### Download

Search this plugin from your _CMS Admin > Plugins_ page

or
Search for "**Support For Icomoon with Advanced Custom Fields**" from your _CMS Admin > Plugins_ page

Download the zip file from [WordPress > Plugin](https://wordpress.org/plugins/acf-icomoon/)
or download the zip file from [WordPress > Plugin](https://wordpress.org/plugins/acf-icomoon/) or
from [releases](https://github.com/viivue/acf-icomoon/releases)

### Create field

Go to Field Groups > Create new Field and choose Icomoon Type in Content Group.

![Screenshot 1](https://ps.w.org/acf-icomoon/assets/screenshot-1.png)
![Screenshot 3](https://ps.w.org/acf-icomoon/assets/screenshot-3.png)

How it looks in the page

![Screenshot 1](https://ps.w.org/acf-icomoon/assets/screenshot-1.png)
![Screenshot 2](https://ps.w.org/acf-icomoon/assets/screenshot-2.png)

## Compatibility
Expand Down
15 changes: 6 additions & 9 deletions acf-icomoon.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Plugin Name: Support For Icomoon with Advanced Custom Fields
* Plugin URI: https://wordpress.org/plugins/acf-icomoon/
* Description: 🔩 Add a field to select icons from a selection.json file generated by IcoMoon
* Version: 3.4.0
* Version: 4.0.0
* Requires at least: 5.2
* Requires PHP: 7.2
* Author: ViiVue
Expand All @@ -25,7 +25,7 @@
* Definitions
*/

define('ACFICOMOON_VERSION', '3.4.0');
const ACFICOMOON_VERSION = '4.0.0';
define("ACFICOMOON_DIR", plugin_dir_path(__FILE__));
define("ACFICOMOON_ASSETS_URL", plugin_dir_url(__FILE__) . 'assets/');
define("ACFICOMOON_STYLESHEET_DIR", get_stylesheet_directory());
Expand All @@ -41,15 +41,12 @@
include_once(ACFICOMOON_DIR . 'includes/acf-icomoon.php');

/**
* Init Functions
* WPBakery Page Builder
*/

add_action('init', 'viivue_icomoon_init');
function viivue_icomoon_init(){
// WPBakery Page Builder Param
if(defined('WPB_VC_VERSION')){
include_once(ACFICOMOON_DIR . 'includes/js_composer.php');
}
add_action('vc_before_init', 'viivue_icomoon_vc_param');
function viivue_icomoon_vc_param(){
include_once(ACFICOMOON_DIR . 'compatibility/js_composer.php');
}

/**
Expand Down
115 changes: 73 additions & 42 deletions assets/css/acf-icomoon.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
****************************/
.vii-icomoon {
position:relative; z-index:9;
--vico-right:110px;
--vico-left:calc(100% - var(--vico-right));
--vico-field-height:30px;
--vico-field-svg-size:20px;
}
Expand All @@ -14,34 +12,31 @@
/****************************
* Icomoon Select - Custom Field
****************************/
.vii-icomoon__custom-field, .vii-icomoon__custom-field-result {
display:flex; align-items:center;
}
.vii-icomoon__custom-field-col.left {width:var(--vico-left); position:relative;}
.vii-icomoon__custom-field-col.right {width:var(--vico-right); padding-left:5px;}
.vii-icomoon__custom-field, .vii-icomoon__custom-field-result {display:flex; align-items:center;}
.vii-icomoon__custom-field-inner {width:100%; position:relative;}

/* result */
.vii-icomoon__custom-field-result {
justify-content:flex-start; padding-left:10px;
border-radius:4px; border:1px solid #7e8993; height:var(--vico-field-height); line-height:1;
border-radius:4px; box-shadow:0 0 0 1px #7e8993;
height:var(--vico-field-height); line-height:1;
transition:all .3s ease; cursor:pointer;
background-color:#fff;
}
.vii-icomoon__custom-field-result .icon-svg svg {width:var(--vico-field-svg-size); height:var(--vico-field-svg-size); display:block;}
.vii-icomoon__custom-field-result .icon-name {padding-left:10px;}
.vii-icomoon__custom-field-result:hover {box-shadow:0 0 0 1px #6c75df;}
.vii-icomoon__custom-field-result:hover {box-shadow:0 0 0 2px #6c75df;}

/* button remove */
.vii-icomoon:not(.empty) .vii-icomoon__custom-field-remove {display:block;}
.vii-icomoon__custom-field-remove {
position:absolute; top:50%; right:0;
transform:translateY(-50%); display:none;
background-color:red; color:#fff !important;
transform:translateY(-50%);
background-color:red; color:#fff !important; border:none;
border-radius:0 4px 4px 0; height:100%; width:var(--vico-field-height);
line-height:var(--vico-field-height); text-align:center; text-decoration:none;
font-size:14px; font-weight:700;
transition:all .3s ease;
cursor:pointer;
cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.vii-icomoon__custom-field-remove:not(:hover) {background-color:transparent; color:red !important;}

Expand All @@ -54,10 +49,10 @@
/****************************
* Icomoon Select - Popup
****************************/
.vii-icomoon.popup-open {z-index:9000;}
body.wp-admin .easy-popup-master {z-index:9999999;}

/* custom scrollbar */
.vii-icomoon *::-webkit-scrollbar {width:4px;}
.vii-icomoon *::-webkit-scrollbar {width:3px;}
.vii-icomoon *::-webkit-scrollbar-track {background:rgb(255 255 255);}
.vii-icomoon *::-webkit-scrollbar-thumb {background-color:#007cba;}

Expand All @@ -68,66 +63,102 @@
.vii-icomoon.popup-right .vii-icomoon__popup {left:auto; right:0;}

.vii-icomoon__popup {
position:absolute; left:0; z-index:20;
margin:3px 0 0; width:300px; max-height:300px;
border-radius:4px; border:1px solid #7e8993;
background-color:rgb(235, 235, 240); box-shadow:0 0 10px 0 rgba(0, 0, 0, .15);
overflow:auto;
padding:0;
border-radius:10px; border:1px solid #7e8993;
background-color:#fff; box-shadow:0 0 10px 0 rgba(0, 0, 0, .15);
}
.vii-icomoon__popup * {box-sizing:border-box;}
.vii-icomoon__popup-inner {position:relative; padding-top:57px;}

/* popup head */
.vii-icomoon__popup-head {
position:sticky; top:0;
margin-bottom:5px; padding:5px;
border-bottom:1px solid #ccc; background-color:rgb(255 255 255 / 50%);
-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
position:absolute; top:0; left:0; z-index:2; width:100%;
padding:10px 45px 10px 10px;
border-bottom:1px solid #ccc;
display:flex; align-items:center; justify-content:space-between;
}

/* popup head search */
.vii-icomoon__search {width:100%;}
.vii-icomoon__search input[type=search] {padding:4px 70px 4px 8px; min-height:30px;}
.vii-icomoon__search input[type=search] {padding:4px 8px; min-height:30px; width:100%; border:none;}
.vii-icomoon__search input[type=search]:focus {
box-shadow:0 0 0 2px #6c75df;
}

/* popup head count */
.vii-icomoon__count-text {position:absolute; top:50%; right:15px; transform:translateY(-50%);}
.vii-icomoon__count-text {white-space:nowrap; display:none;}

/* body */
.vii-icomoon__popup-body {max-height:400px; min-height:400px; overflow:auto; padding:10px;}

/* close button */
.vii-icomoon-easy-popup .easy-popup-close-button {height:60px; cursor:pointer;}

/* icon list */
ul.vii-icomoon__icons {
list-style:none; margin:0; padding:7px;
display:flex; flex-wrap:wrap;
}

ul.vii-icomoon__icons li {
padding:7px; margin:0; width:20%; aspect-ratio:1/1;
list-style:none; margin:0;
display:flex; flex-wrap:wrap; justify-content:center;
}

ul.vii-icomoon__icons li a {
width:100%; aspect-ratio:1/1; padding:5px;
ul.vii-icomoon__icons li.search-hidden {display:none;}
ul.vii-icomoon__icons li {margin:0; width:84px; aspect-ratio:1/1;}
ul.vii-icomoon__icons li button {
width:100%; aspect-ratio:1/1; padding:5px; cursor:pointer;
border-radius:4px; transition:all .3s ease;
display:flex; align-items:center; justify-content:center;
display:flex; align-items:center; justify-content:center; flex-direction:column;
background:transparent; border:none;
}

ul.vii-icomoon__icons li a svg {width:85%;}
ul.vii-icomoon__icons li button i {display:block; margin-bottom:5px; height:25px;}
ul.vii-icomoon__icons li button i svg {width:100%; height:100%;}

ul.vii-icomoon__icons li a:hover {background-color:#fff;}
ul.vii-icomoon__icons li button.active {box-shadow:inset 0 0 0 2px #6c75df;}
ul.vii-icomoon__icons li button.active path {fill:#6c75df;}
ul.vii-icomoon__icons li button:hover {box-shadow:0 0 0 2px #6c75df;}

ul.vii-icomoon__icons li a.active,
ul.vii-icomoon__icons li a:focus {
box-shadow:0 0 0 1px #6c75df;
background-color:#fff;
ul.vii-icomoon__icons li label {
display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;
font-size:11px; color:#909090;
}
.label-search-highlight {background:#6c75df52; color:#000;}

/* icon list empty */
.vii-icomoon__icons-empty {display:block; text-align:center; padding:20px;}

/****************************
* Icomoon Select - VC Param
****************************/
.vii-icomoon.vc-element {
--vico-right:130px;
--vico-field-height:45px;
--vico-field-height:44px;
--vico-field-svg-size:25px;
}

/* popup */
.vii-icomoon.vc-element .vii-icomoon__popup {
position:relative; top:auto; bottom:auto; left:auto;
width:100%; max-width:300px; max-height:250px;
}


/* Loading */
.unmounted {position:relative; border-radius:5px; overflow:hidden;}
.unmounted:before {
content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:999;
background-color:rgba(255, 255, 255, 0.5);
backdrop-filter:blur(5px);
}
.unmounted:after {
--loading-size:20px;
content:""; position:absolute; top:50%; left:50%; z-index:9999;
width:var(--loading-size); height:var(--loading-size);
margin:calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
border-radius:50%; border:1px dashed transparent;
border-bottom-color:#6c75df;
border-right-color:#6c75df;
animation:spinner .6s linear infinite;
box-sizing:border-box;
}
@keyframes spinner {
to {transform:rotate(360deg);}
}
4 changes: 4 additions & 0 deletions assets/css/easy-popup.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

68 changes: 68 additions & 0 deletions assets/js/acf-icomoon-app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
const dev = false;
const appSelector = '[data-icomoon-app]:not([data-v-app])';

const initIcomoonSelect = e => {
const app = e.$el.find(appSelector).get()[0];
if(app){
app.setAttribute('data-icomoon-init-html', app.outerHTML);
new AcfIcomoonDom(app, 'acf');
}
}

/**
* ACF events
*/
// on load
acf.addAction('load_field/type=viivue_acf_icomoon', e => initIcomoonSelect(e));

// watch for new fields via ACF
acf.addAction('append_field/type=viivue_acf_icomoon', e => initIcomoonSelect(e));

/**
* VC After Element Render
* @param panel
*/
const jsComposerAfterElementRender = panel => {
panel.querySelectorAll(appSelector).forEach(app => new AcfIcomoonDom(app, 'vc-field'));
}

/**
* VC Param Group After Add
* @param fields
*/
function vcAfterIcomoonFieldAdd(fields){
const app = fields[0].querySelector(appSelector);
if(app) new AcfIcomoonDom(app, 'vc-param-field')
}


/**
* Watch for ACF repeater duplicate
*/
document.addEventListener('click', function(e){
if(e.target.classList.contains('-duplicate')){
const oldRow = e.target.closest('.acf-row');
const app = oldRow.querySelector('[data-icomoon-app]');
const oldRowId = oldRow.getAttribute('data-id');
if(app){
const newRow = oldRow.nextSibling;

// load app html
newRow.querySelector('[data-icomoon-app]').parentElement.innerHTML = app.getAttribute('data-icomoon-init-html');

// clone value
const newId = newRow.getAttribute('data-id');
const newVal = app.getAttribute('data-icomoon-selected');
const newRowApp = newRow.querySelector('[data-icomoon-app]');
const newInput = newRowApp.querySelector('input[data-icomoon-input]');
const newInputName = newInput.getAttribute('name').replace(oldRowId, newId);
newRowApp.setAttribute('data-icomoon-selected', newVal);
newInput.setAttribute('name', newInputName);
newInput.value = newVal;

// init app
newRowApp.setAttribute('data-icomoon-init-html', newRowApp.outerHTML);
new AcfIcomoonDom(newRowApp, 'acf-repeater-duplicate');
}
}
});
Loading

0 comments on commit c088bc2

Please sign in to comment.