Oxygen: rightClick ACSS Vars

PHOTO EMBED

Fri May 20 2022 11:21:05 GMT+0000 (Coordinated Universal Time)

Saved by @MirkoEchghiG #php 

<?php

/*************
 * 
 * Original code at https://community.automaticcss.com/c/general-discussion/another-workaround
 * Credit @Christoph Sanz
 *        @Rich Deane for the condidtions inclued in JSON file and Oxy BG variable name
 * UI and Style Updates @Lucas Pelton
 * 
 */

function acss_context_menu_enqueue_scripts() {
 
wp_register_script( 'acss-context-menu', '');
wp_enqueue_script( 'acss-context-menu' );
 
$script  =  '
jQuery(document).ready(()=>{
        console.log(\'ACSS-Context-Menu Code Snippet is active\')
let acssContextMenu = document.createElement(\'div\');

acssContextMenu.id = \'acss-context-menu\';


varGroupHelpers = [
    {\'varName\': \'space\', \'icon\': \'dashicons-controls-pause\'},
    {\'varName\': \'text\', \'icon\': \'dashicons-editor-textcolor\'},
    {\'varName\': \'width\', \'icon\': \'dashicons-image-flip-horizontal\'}
    ]
let menuStructure = [];

varGroupHelpers.forEach(varGroupHelper=>{
    menuStructure.push({
        \'icon\': varGroupHelper.icon,
    \'values\': [
        {\'niceName\': \'xs\', \'value\': `var(--${varGroupHelper.varName}-xs)`, \'unit\': \' \'},
        {\'niceName\': \'s\', \'value\': `var(--${varGroupHelper.varName}-s)`,\'unit\': \' \'},
        {\'niceName\': \'m\', \'value\': `var(--${varGroupHelper.varName}-m)`,\'unit\': \' \'},
        {\'niceName\': \'l\', \'value\': `var(--${varGroupHelper.varName}-l)`,\'unit\': \' \'},
        {\'niceName\': \'xl\', \'value\': `var(--${varGroupHelper.varName}-xl)`,\'unit\': \' \'},
        {\'niceName\': \'xxl\', \'value\': `var(--${varGroupHelper.varName}-xxl)`,\'unit\': \' \'}
        
        ]
    })
})

const acssListClass = "acss-var-list";
const acssListItemClass = "acss-var-value";
let acssContextMenuHTML="";
  
menuStructure.forEach(e=>{
    acssContextMenuHTML += `<div class="acss-context-sub"><ul class="${acssListClass}"> `
    acssContextMenuHTML += `<li class="${acssListItemClass} dashicons-before ${e.icon}"></li>`
    e.values.forEach(e=>{
        acssContextMenuHTML += `<li class="${acssListItemClass}" data-value="${e.value}" data-unit="${e.unit}">${e.niceName}</li>`
    })
    acssContextMenuHTML += `</ul></div>`
})
acssContextMenuHTML += `<div class="unset" data-value="" data-unit=" ">Unset/Delete</div>
<style>
#acss-context-menu .unset {
    background-color: black;
    border-radius: 4px;
    color: red;
    cursor: pointer;
    margin: 0.5em auto;
    padding: 0.5em;
}
    #acss-context-menu .acss-context-sub{
        align-items: center;
        text-align: center;
    }
    #acss-context-menu ul{
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        gap: 0;
        useCustomTag: true;
        overflow: hidden;
        padding: unset;
        margin: 0.5em 0.5em 0;
    }
    #acss-context-menu {
        font-size: 12px;
        position: fixed;
        z-index: 9999999;
        background-color: #222b34;
        border-radius: 4px;
        color: white;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: 5px 5px 10px black;
    }
    #acss-context-menu li {
        min-width: 1.5em;
        min-height: 1.5em;
        background-color: black;
        list-style-type: none;
        cursor: pointer;
        align-items: center;
        padding: 0.75em 1.5em;
        transition: background-color .2s ease;
    }
    
    #acss-context-menu .spacing:before {
        content: "\f523";
    }
    
    #acss-context-menu .text:before {
        content: "\f215";
    }
    
    #acss-context-menu .width:before {
        content: "\f169";
    }
    
    #acss-context-menu li:hover,
    #acss-context-menu .unset:hover {
        background: #24577e;
        background: var(--oxy__input-bg);
    }
    
    #acss-context-menu li:first-child {
        border-right:1px solid #333333;
        padding: 0.75em;
        pointer-events: none;
    }
    </style>
    `

acssContextMenu.style.display = "none";

acssContextMenu.innerHTML = acssContextMenuHTML;
document.body.appendChild(acssContextMenu);

let inputItem;
document.addEventListener(\'click\', e=>{
    acssContextMenu.style.display = "none";
})
document.addEventListener(\'contextmenu\',(e)=>{
    acssContextMenu.style.display = "none";
    if(e.target.getAttribute("type") != "text" ) return
    e.preventDefault();
    
    acssContextMenu = document.querySelector(\'#acss-context-menu\');
    acssContextMenu.style.display = "flex";
    acssContextMenu.style.left = e.clientX +\'px\';
    acssContextMenu.style.top = e.clientY + \'px\';
    inputItem = e.target;
    var iframeScope = $scope.iframeScope;
    document.querySelectorAll(\'.acss-var-value, .unset\').forEach(e2=> e2.addEventListener(\'click\', varClick=>{
        iframeScope.setOptionUnit(inputItem.getAttribute("data-option"), varClick.target.getAttribute("data-unit"));
        eval(inputItem.getAttribute("ng-model") + \' = varClick.target.getAttribute("data-value")\');
        
        eval(inputItem.getAttribute("ng-change"))
        acssContextMenu.style.display = "none";
    }))
})});
';
 
wp_add_inline_script('acss-context-menu', $script, 'after');
 
}
If(isset($_GET['ct_builder'])){
If($_GET['ct_builder'] == true){
add_action('wp_enqueue_scripts', 'acss_context_menu_enqueue_scripts');
}
}
content_copyCOPY

https://community.automaticcss.com/c/general-discussion/another-workaround