Oxygen: rightClick ACSS Vars
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'); } }
Comments