Initial
This commit is contained in:
Jeremy Rangel
164
assets/css/admin.css
Normal file
164
assets/css/admin.css
Normal file
@ -0,0 +1,164 @@
|
||||
.lcp-post-type-rules {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border: 1px solid #ccd0d4;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.04);
|
||||
}
|
||||
|
||||
.post-type-settings {
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e5e5e5;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.setting-group label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.setting-group input[type="number"] {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
/* Toggle Switch */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #2271b1;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.lcp-rules-container {
|
||||
margin: 15px 0;
|
||||
min-height: 50px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.lcp-rule {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.lcp-rule.ui-sortable-helper {
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.rule-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.rule-header .dashicons-menu {
|
||||
cursor: move;
|
||||
color: #666;
|
||||
margin-right: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.rule-header .delete-rule {
|
||||
margin-left: auto;
|
||||
color: #dc3232;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rule-header .delete-rule:hover {
|
||||
color: #aa0000;
|
||||
}
|
||||
|
||||
.rule-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.rule-body select {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.add-rule {
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
#save-rules {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.post-type-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.post-type-actions .button {
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.save-post-type-rules {
|
||||
margin-left: auto;
|
||||
}
|
||||
171
assets/js/admin.js
Normal file
171
assets/js/admin.js
Normal file
@ -0,0 +1,171 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize Sortable for rule containers
|
||||
document.querySelectorAll('.lcp-rules-container').forEach(container => {
|
||||
new Sortable(container, {
|
||||
handle: '.dashicons-menu',
|
||||
animation: 150
|
||||
});
|
||||
});
|
||||
|
||||
// Add new rule
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.matches('.add-rule')) {
|
||||
const postType = e.target.dataset.postType;
|
||||
const template = document.querySelector('.lcp-rule-template').innerHTML;
|
||||
const container = e.target.closest('.lcp-post-type-rules').querySelector('.lcp-rules-container');
|
||||
container.insertAdjacentHTML('beforeend', template);
|
||||
}
|
||||
});
|
||||
|
||||
// Delete rule
|
||||
document.addEventListener('click', function(e) {
|
||||
// Check if the click was on the delete button or its child icon
|
||||
if (e.target.matches('.delete-rule') || e.target.closest('.delete-rule')) {
|
||||
const ruleElement = e.target.closest('.lcp-rule');
|
||||
if (ruleElement) {
|
||||
ruleElement.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update taxonomy and terms fields visibility
|
||||
document.addEventListener('change', function(e) {
|
||||
if (e.target.matches('.rule-value-type')) {
|
||||
const ruleBody = e.target.closest('.rule-body');
|
||||
if (!ruleBody) return; // Exit if rule-body not found
|
||||
|
||||
const taxonomySelect = ruleBody.querySelector('.rule-taxonomy');
|
||||
const termSelect = ruleBody.querySelector('.rule-term');
|
||||
|
||||
if (!taxonomySelect || !termSelect) return; // Exit if selects not found
|
||||
|
||||
if (e.target.value === 'taxonomy') {
|
||||
taxonomySelect.style.display = 'inline-block';
|
||||
termSelect.style.display = 'inline-block';
|
||||
} else {
|
||||
taxonomySelect.style.display = 'none';
|
||||
termSelect.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update terms when taxonomy changes
|
||||
document.addEventListener('change', function(e) {
|
||||
if (e.target.matches('.rule-taxonomy')) {
|
||||
const termSelect = e.target.nextElementSibling;
|
||||
if (!termSelect) return; // Exit if term select not found
|
||||
|
||||
const taxonomy = e.target.value;
|
||||
|
||||
fetch(lcpPaywall.ajaxurl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
action: 'lcp_get_taxonomy_terms',
|
||||
nonce: lcpPaywall.nonce,
|
||||
taxonomy: taxonomy
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
termSelect.innerHTML = '';
|
||||
data.data.forEach(term => {
|
||||
const option = document.createElement('option');
|
||||
option.value = term.term_id;
|
||||
option.textContent = term.name;
|
||||
termSelect.appendChild(option);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Save individual post type rules
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.matches('.save-post-type-rules')) {
|
||||
const postTypeSection = e.target.closest('.lcp-post-type-rules');
|
||||
const postType = postTypeSection.dataset.postType;
|
||||
|
||||
const rules = {
|
||||
[postType]: {
|
||||
settings: {
|
||||
default_lock_status: postTypeSection.querySelector('.default-lock-status').value,
|
||||
is_metered: postTypeSection.querySelector('.is-metered').checked,
|
||||
metered_free_posts: parseInt(postTypeSection.querySelector('.metered-free-posts').value),
|
||||
metered_interval: parseInt(postTypeSection.querySelector('.metered-interval').value)
|
||||
},
|
||||
rules: []
|
||||
}
|
||||
};
|
||||
|
||||
postTypeSection.querySelectorAll('.lcp-rule').forEach(ruleElement => {
|
||||
const rule = {
|
||||
action: ruleElement.querySelector('.rule-action').value,
|
||||
condition: ruleElement.querySelector('.rule-condition').value,
|
||||
operator: ruleElement.querySelector('.rule-operator').value,
|
||||
value_type: ruleElement.querySelector('.rule-value-type').value,
|
||||
taxonomy: ruleElement.querySelector('.rule-taxonomy')?.value || '',
|
||||
term: ruleElement.querySelector('.rule-term')?.value || ''
|
||||
};
|
||||
rules[postType].rules.push(rule);
|
||||
});
|
||||
|
||||
fetch(lcpPaywall.ajaxurl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
action: 'lcp_save_rules',
|
||||
nonce: lcpPaywall.nonce,
|
||||
rules: JSON.stringify(rules)
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert(`Rules for ${postType} saved successfully!`);
|
||||
} else {
|
||||
alert(`Failed to save rules for ${postType}. Please try again.`);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
alert(`Failed to save rules for ${postType}. Please try again.`);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Save settings
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.matches('#save-settings')) {
|
||||
// Get the content from the WordPress editor
|
||||
const content = wp.editor.getContent('lcp_nag_message');
|
||||
|
||||
fetch(lcpPaywall.ajaxurl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
action: 'lcp_save_settings',
|
||||
nonce: lcpPaywall.nonce,
|
||||
nag_message: content
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('Settings saved successfully!');
|
||||
} else {
|
||||
alert('Failed to save settings. Please try again.');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
alert('Failed to save settings. Please try again.');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user