Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Gutenberg Like Color Picking #51

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added Gutenberg Like Color Picking #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b7456cd
Added Gutenberg Like Color Picking
ElvarP Feb 25, 2023
c5d187e
fixed lint error
ElvarP Feb 25, 2023
6c4fcac
fixed bug where first color was not working properly
ElvarP Feb 27, 2023
fc88417
updated styling to look more like Gutenberg
ElvarP Feb 27, 2023
ec905bb
should fix lint error
ElvarP Feb 27, 2023
4232019
fixed bug where border was not showing up
ElvarP Mar 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 37 additions & 2 deletions assets/css/field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,22 @@
.acf-input {
@apply max-w-xs mt-2;

.color-palette-wrapper {
@apply bg-white pt-3 pb-4 px-4 border mt-1 rounded-sm shadow-sm;

.color-palette-wrapper-title {
@apply font-medium uppercase mb-2 py-1;
font-size: 11px;
}
}

ul {
@apply list-none grid grid-cols-6 gap-y-3 m-0 p-0;

li {
label {
display: inline-block !important;
}
@apply m-0 p-0 min-w-0 relative;

input {
Expand All @@ -26,8 +38,31 @@
}
}
}

.hidden {
display: none !important;
}
.transparent-bg {
background: linear-gradient(
-45deg,
transparent 48%,
#ddd 0,
#ddd 52%,
transparent 0
) !important;
}
.empty-value {
@apply hidden;
display: none !important;
}
.toggle-color-palette {
border: 1px solid rgba(0, 0, 0, 0.1);
@apply flex items-center p-2 cursor-pointer px-2.5 gap-2;

&:hover {
color: var(--wp-admin-theme-color);
}

.component-color-indicator {
@apply h-5 w-5;
}
}
}
66 changes: 39 additions & 27 deletions assets/js/field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
;(function($) {
;(function ($) {
if (typeof acf.add_action === 'undefined') {
return
}
Expand All @@ -11,12 +11,41 @@
*
* @param {jQuery} element
*/
acf.add_action('ready append', function(element) {
acf.get_fields({ type: 'editor_palette' }, element).each(function() {
acf.add_action('ready append', function (element) {
acf.get_fields({ type: 'editor_palette' }, element).each(function () {
$(this)
.find('.toggle-color-palette')
.click(() => {
$(this).find('.color-palette-wrapper').toggleClass('hidden')
})

$(document).click(function (event) {
if (
!$(event.target).is('.color-palette-wrapper') &&
!$(event.target).is('.components-circular-option-picker__swatches') &&
!$(event.target).is('.color-palette-wrapper-title') &&
!$(event.target).parent().is('li') &&
!$(event.target)
.parent()
.hasClass('components-circular-option-picker')
) {
$('.color-palette-wrapper').addClass('hidden')
}
})

const onChange = () => {
$(this).find('.component-color-indicator').removeClass('transparent-bg')

let current = $(this).find('.acf-input li input + label.is-pressed')
let selected = $(this).find('.acf-input li input:checked + label')

if ($(event.target).parent().find('label').hasClass('is-pressed')) {
current.removeClass('is-pressed').parent().find('svg').remove()
event.stopPropagation()
event.preventDefault()
onClear()
return
}
if ((!selected.length && !current.length) || current === selected) {
return
}
Expand All @@ -29,13 +58,8 @@
}

let checkmark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="${color.inverted}" role="img" aria-hidden="true" focusable="false"><path d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"></path></svg>`

current
.removeClass('is-pressed')
.parent()
.find('svg')
.remove()
selected.addClass('is-pressed').after(checkmark)
current.removeClass('is-pressed').parent().find('svg').remove()

$(this)
.find('.component-color-indicator')
Expand All @@ -47,29 +71,15 @@
}

const onClear = () => {
$ref = $(this);
$ref = $(this)
$ref.find('.acf-input li input').attr('checked', false)
$ref.find('.acf-input li input + label')
.removeClass('is-pressed')
.parent()
.find('svg')
.remove()
$ref.find('.acf-input li input + label').removeClass('is-pressed')

$(this)
.find('.component-color-indicator')
.hide()
$(this).find('.component-color-indicator').addClass('transparent-bg')

$(this)
.find('.empty-value')
.click();
$(this).find('.empty-value').click()
}

$(this)
.find('.acf-label label')
.append(
`<span class="component-color-indicator" style="display: none;"></span>`
)

$(this)
.find('.components-circular-option-picker__clear')
.on('click', () => onClear())
Expand All @@ -78,6 +88,8 @@
.find('.acf-input li')
.on('click', () => onChange())

$(this).find('.component-color-indicator').removeAttr('style')

onChange()
})
})
Expand Down
102 changes: 101 additions & 1 deletion public/css/field.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,101 @@
.acf-field-editor-palette .acf-label label{align-items:center;cursor:default;display:flex}.acf-field-editor-palette .acf-label label .component-color-indicator{margin-left:.5rem}.acf-field-editor-palette .acf-input{margin-top:.5rem;max-width:20rem}.acf-field-editor-palette .acf-input ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style-type:none;margin:0;padding:0;row-gap:.75rem}.acf-field-editor-palette .acf-input ul li{margin:0;min-width:0;padding:0;position:relative}.acf-field-editor-palette .acf-input ul li input{display:none}.acf-field-editor-palette .acf-input ul li .components-circular-option-picker__option{padding:0}.acf-field-editor-palette .empty-value{display:none}
.acf-field-editor-palette .acf-label label {
display: flex;
cursor: default;
align-items: center;
}

.acf-field-editor-palette .acf-label label .component-color-indicator {
margin-left: 0.5rem;
}

.acf-field-editor-palette .acf-input {
margin-top: 0.5rem;
max-width: 20rem;
}

.acf-field-editor-palette .acf-input .color-palette-wrapper {
margin-top: 0.25rem;
border-radius: 0.125rem;
border-width: 1px;
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 1rem;
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.acf-field-editor-palette .acf-input .color-palette-wrapper .color-palette-wrapper-title {
margin-bottom: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-weight: 500;
text-transform: uppercase;
font-size: 11px;
}

.acf-field-editor-palette .acf-input ul {
margin: 0px;
display: grid;
list-style-type: none;
grid-template-columns: repeat(6, minmax(0, 1fr));
row-gap: 0.75rem;
padding: 0px;
}

.acf-field-editor-palette .acf-input ul li {
position: relative;
margin: 0px;
min-width: 0px;
padding: 0px;
}

.acf-field-editor-palette .acf-input ul li label {
display: inline-block !important;
}

.acf-field-editor-palette .acf-input ul li input {
display: none;
}

.acf-field-editor-palette .acf-field-editor-palette .acf-input ul li input {
display: none;
}

.acf-field-editor-palette .acf-input ul li .components-circular-option-picker__option {
padding: 0px;
}

.acf-field-editor-palette .hidden {
display: none !important;
}

.acf-field-editor-palette .transparent-bg {
background: linear-gradient(-45deg, transparent 48%, #ddd 0, #ddd 52%, transparent 0) !important;
}

.acf-field-editor-palette .empty-value {
display: none !important;
}

.acf-field-editor-palette .toggle-color-palette {
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
cursor: pointer;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
padding-left: 0.625rem;
padding-right: 0.625rem;
}

.acf-field-editor-palette .toggle-color-palette:hover {
color: var(--wp-admin-theme-color);
}

.acf-field-editor-palette .toggle-color-palette .component-color-indicator {
height: 1.25rem;
width: 1.25rem;
}
Loading