Skip to content

Commit

Permalink
Add feature Load layout from sub-layout-to layout builder
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonvnn
sonvnn committed Aug 13, 2024
1 parent b08bba6 commit ed669d7
Show file tree
Hide file tree
Showing 7 changed files with 176 additions and 114 deletions.
2 changes: 1 addition & 1 deletion assets/vendor/manager/dist/index.html
View file

Large diffs are not rendered by default.

94 changes: 47 additions & 47 deletions assets/vendor/manager/dist/index.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/vendor/manager/src/components/Main.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ function selectPreset(event, group) {
</form>
<nav class="nav justify-content-center mb-3 astroid-footer-links">
<a class="nav-link d-inline-flex align-items-center" href="https://ko-fi.com/astroidframework" data-bs-toggle="tooltip" data-bs-title="Buy Me a Coffee" target="_blank"><img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Buy Me a Coffee" class="me-2">Support Astroid with $10</a>
<a class="nav-link" :href="constant.astroid_link" data-bs-toggle="tooltip" data-bs-title="Go to Astroid Framework" target="_blank">Astroid Framework</a>
<a class="nav-link" :href="constant.jed_link" data-bs-toggle="tooltip" data-bs-title="Reviews for Astroid on JED" target="_blank"><i class="fa-brands fa-joomla me-2"></i>Astroid on JED</a>
<a class="nav-link" :href="constant.document_link" data-bs-toggle="tooltip" data-bs-title="Go to Documentation" target="_blank">Documentation</a>
</nav>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
Expand Down
109 changes: 77 additions & 32 deletions assets/vendor/manager/src/components/helpers/Layout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,46 +163,91 @@ function saveElement(param) {
return true;
});
}
function selectElement(el) {
const select_element_type = ref('');
function selectElement(el, type = '') {
select_element_type.value = type;
element.value = el;
_showElement.value = true;
}
function addElement(addon) {
let id = Date.now() * 1000 + Math.random() * 1000;
id = id.toString(16).replace(/\./g, "").padEnd(14, "0")+Math.trunc(Math.random() * 100000000);
let params = [
{name: 'title', value: addon.title}
];
if (addon.type === `sublayout`) {
params.push({name: 'source', value: addon.name});
params.push({name: 'desc', value: addon.desc});
params.push({name: 'thumbnail', value: addon.thumbnail});
}
const new_element = {
id: id,
type: addon.type,
state: 1,
params: params
}
layout.value.sections.every(section => {
section.rows.every(row => {
row.cols.every(column => {
if (element.value.id === column.id) {
column.elements.push(new_element);
if (typeof system.value[addon.type] !== 'undefined') {
system.value[addon.type] = false;
if (select_element_type.value === 'loadSublayout') {
let url = constant.site_url+"administrator/index.php?option=com_ajax&astroid=getlayout&ts="+Date.now();
let sublayout_data = {};
const sec = Date.now() * 1000 + Math.random() * 1000;
if (process.env.NODE_ENV === 'development') {
url = "editlayout_ajax.txt?ts="+Date.now();
}
const formData = new FormData(); // pass data as a form
formData.append(constant.astroid_admin_token, 1);
formData.append('name', addon.name);
formData.append('template', constant.tpl_template_name);
formData.append('type', 'layouts');
axios.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
}).then((response) => {
if (response.data.status === 'success') {
sublayout_data = JSON.parse(response.data.data.data);
layout.value.sections.every((section, index) => {
if (element.value.id === section.id) {
sublayout_data.sections.forEach((section, sub_idx) => {
layout.value.sections.splice(index+sub_idx+1, 0, {
id: sec.toString(16).replace(/\./g, "").padEnd(14, "0")+Math.trunc(Math.random() * 100000000),
type: section.type,
rows: section.rows,
params: section.params,
state: 1
});
});
// continue
element.value = {};
return false;
}
element.value = {};
return false;
}
return true;
});
}
}).catch((err) => {
console.error(err);
});
} else {
let id = Date.now() * 1000 + Math.random() * 1000;
id = id.toString(16).replace(/\./g, "").padEnd(14, "0")+Math.trunc(Math.random() * 100000000);
let params = [
{name: 'title', value: addon.title}
];
if (addon.type === `sublayout`) {
params.push({name: 'source', value: addon.name});
params.push({name: 'desc', value: addon.desc});
params.push({name: 'thumbnail', value: addon.thumbnail});
}
const new_element = {
id: id,
type: addon.type,
state: 1,
params: params
}
layout.value.sections.every(section => {
section.rows.every(row => {
row.cols.every(column => {
if (element.value.id === column.id) {
column.elements.push(new_element);
if (typeof system.value[addon.type] !== 'undefined') {
system.value[addon.type] = false;
}
element.value = {};
return false;
}
return true;
});
return true;
});
return true;
});
return true;
});
if (addon.type !== `sublayout`) {
editElement(new_element);
if (addon.type !== `sublayout`) {
editElement(new_element);
}
}
}
function closeElement() {
Expand Down Expand Up @@ -384,7 +429,7 @@ function saveSublayout() {
<Modal v-if="_showModal" :element="element" :form="form_template[element.type]" @update:saveElement="saveElement" @update:close-element="closeElement" />
</Transition>
<Transition name="fade">
<SelectElement v-if="_showElement" :form="form_template" :system="system" :source="props.source" @update:close-element="_showElement = false" @update:selectElement="addElement" />
<SelectElement v-if="_showElement" :form="form_template" :type="select_element_type" :system="system" :source="props.source" @update:close-element="_showElement = false" @update:selectElement="addElement" />
</Transition>
<form :id="props.field.input.id+`_saveLayout_form`" v-if="props.source === `root` && _showSublayoutModal">
<div class="astroid-modal modal d-block" :id="props.field.input.id+`_saveLayout`" tabindex="-1" :aria-labelledby="props.field.input.id+`saveLayoutLabel`" aria-hidden="true">
Expand Down
7 changes: 7 additions & 0 deletions assets/vendor/manager/src/components/helpers/LayoutBuilder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,10 @@ function saveLayout(element) {
devices : layout.value.devices
});
}
function selectLayout(element) {
emit('select:Element', element, 'loadSublayout');
}
</script>
<template>
<draggable
Expand All @@ -294,6 +298,9 @@ function saveLayout(element) {
<li class="nav-item">
<a class="nav-link px-1" href="#" @click.prevent="deleteElement(element, index)" title="Remove Section"><i class="fas fa-trash-alt"></i></a>
</li>
<li class="nav-item" v-if="props.source === `root`">
<a class="nav-link px-1" href="#" data-bs-toggle="tooltip" data-bs-title="Load Section from Sublayout" @click.prevent="selectLayout(element)"><i class="fa-solid fa-cubes"></i></a>
</li>
<li class="nav-item" v-if="props.source === `root`">
<a class="nav-link px-1" href="#" data-bs-toggle="tooltip" data-bs-title="Save Section as Sublayout" @click.prevent="saveLayout(element)"><i class="fa-solid fa-floppy-disk"></i></a>
</li>
Expand Down
74 changes: 41 additions & 33 deletions assets/vendor/manager/src/components/helpers/SelectElement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,52 @@ import { onMounted, ref, inject } from 'vue';
import axios from "axios";
const emit = defineEmits(['update:closeElement', 'update:selectElement']);
const props = defineProps(['form', 'system', 'source']);
const props = defineProps(['form', 'type', 'system', 'source']);
const constant = inject('constant', {});
const currentFilter = ref('');
const addons = ref([]);
const filters = ref(['System']);
let orders = {'System':0}
let counter = {'System':0};
const filters = ref([]);
let orders = {}
let counter = {};
const sublayouts = ref([]);
const title = ref('Select an Element');
onMounted(()=> {
let addon = {};
Object.keys(props.form).every(key => {
if (props.form[key].type === 'addon') {
addon = props.form[key].info;
if (typeof props.system[addon.type] !== 'undefined' && !props.system[addon.type]) {
return true;
}
if ((props.source !== `article_layouts` && addon.element_type === 'article') || (props.source === 'article_layouts' && addon.element_type === 'system')) {
return true;
}
if (addon.element_type === 'widget' && parseInt(constant.enable_widget) === 0) {
return true;
}
addon.category.forEach(cat => {
if (filters.value.includes(cat)) {
counter[cat]++;
} else {
filters.value.push(cat);
orders[cat] = Object.keys(orders).length;
counter[cat] = 1;
if (props.type !== 'loadSublayout') {
filters.value.push('System');
orders['System'] = 0;
counter['System'] = 0;
Object.keys(props.form).every(key => {
if (props.form[key].type === 'addon') {
addon = props.form[key].info;
if (typeof props.system[addon.type] !== 'undefined' && !props.system[addon.type]) {
return true;
}
if (typeof addon.order === 'undefined') {
addon.order = orders[cat];
if ((props.source !== `article_layouts` && addon.element_type === 'article') || (props.source === 'article_layouts' && addon.element_type === 'system')) {
return true;
}
});
addons.value.push(addon);
return true;
}
});
if (addon.element_type === 'widget' && parseInt(constant.enable_widget) === 0) {
return true;
}
addon.category.forEach(cat => {
if (filters.value.includes(cat)) {
counter[cat]++;
} else {
filters.value.push(cat);
orders[cat] = Object.keys(orders).length;
counter[cat] = 1;
}
if (typeof addon.order === 'undefined') {
addon.order = orders[cat];
}
});
addons.value.push(addon);
return true;
}
});
} else {
title.value = 'Select a sub-layout';
}
getSublayouts();
})
Expand Down Expand Up @@ -79,13 +87,13 @@ function selectElement(addon) {
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select an Element</h5>
<h5 class="modal-title">{{ title }}</h5>
<button type="button" class="btn-close" aria-label="Close" @click="emit('update:closeElement')"></button>
</div>

<div class="modal-body">
<div class="row g-3">
<div class="col-lg-auto col-12">
<div v-if="props.type !== `loadSublayout`" class="col-lg-auto col-12">
<ul class="astroid-element-nav nav nav-pills flex-column">
<li class="nav-item" :class="{'active' : currentFilter === ''}">
<a class="nav-link" href="#" @click.prevent="currentFilter = ''">All<span class="form-text">{{ addons.length }}</span></a>
Expand All @@ -97,7 +105,7 @@ function selectElement(addon) {
</div>
<div class="col">
<div class="row row-cols-xl-4 row-cols-lg-3 row-cols-2 g-3">
<div v-for="order_key in Object.keys(orders)" v-show="currentFilter === '' || currentFilter === order_key" :class="`order-` + orders[order_key]" class="col-xl-12 col-lg-12 col-12">
<div v-if="props.type !== `loadSublayout`" v-for="order_key in Object.keys(orders)" v-show="currentFilter === '' || currentFilter === order_key" :class="`order-` + orders[order_key]" class="col-xl-12 col-lg-12 col-12">
<h5 class="mt-1 mb-0">{{ order_key }}</h5>
</div>
<div v-for="addon in addons" v-show="currentFilter === '' || addon.category.includes(currentFilter)" :class="`order-` + addon.order">
Expand Down
2 changes: 2 additions & 0 deletions framework/library/astroid/Helper/Constants.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ class Constants
public static $releases_link = 'https://github.com/templaza/astroid-framework/releases';
public static $astroid_link = 'https://astroidframe.work/';
public static $templates_link = 'https://astroidframe.work/partners';
public static $jed_link = 'https://extensions.joomla.org/extension/astroid-framework/';

/**
* Return configurations of Manager
Expand Down Expand Up @@ -58,6 +59,7 @@ public static function manager_configs($mode = '') : array
'video_tutorial' => self::$video_tutorial_link,
'donate_link' => self::$donate_link,
'github_link' => self::$github_link,
'jed_link' => self::$jed_link,
'jtemplate_link' => Helper::getJoomlaUrl(),
'astroid_admin_token' => Session::getFormToken(),
'astroid_action' => Helper::getAstroidUrl('save', ['template' => $template->template . '-' . $template->id]),
Expand Down

0 comments on commit ed669d7

Please sign in to comment.