Merge pull request #853 from templaza/v3

v3.1.8

README.md

@@ -3,10 +3,11 @@
 [![GitHub release](https://img.shields.io/github/release/templaza/astroid-framework.svg)](https://github.com/templaza/astroid-framework/releases)
 [![Discord](https://img.shields.io/discord/1098077651496874005)](https://discord.gg/2MwtsAX4Py)
 [![Donate](https://img.shields.io/badge/donate-Buy%20me%20a%20coffee-blueviolet)](https://ko-fi.com/astroidframework)
+[![Donate](https://img.shields.io/badge/extend-with%20Astroid%20Pro-orange)](https://astroidframe.work/pricing)
 
 # Astroid Framework - Powerful Joomla Template Framework
 
-[Watch Intro Video here](https://www.youtube.com/watch?v=ZflNq3fDaXE)
+Powerful framework for designers and developers to create responsive, fast & robust Joomla based websites and templates. A great framework for Joomla with outstanding features such as Layout Builder, Article Layout Builder, typography, colors will be a powerful tool to help you create unique styles for your website.
 
 ## Features
 * Bootstrap 5 Compatible
@@ -58,7 +59,8 @@
 * Map Widget
 * Accordion Widget
 * Hover Motion Widget
-* CodePen Widget
+* Raw HTML Widget
+* Image Carousel Widget
 * [View all Widgets](https://astroidframe.work/widgets)
 
 ## Article Widgets
@@ -110,4 +112,5 @@
 * [JoomlaPlate - Joomla Template](https://www.joomlaplates.com/)
 
 ## You love this project
-* [Buy me a coffee](https://ko-fi.com/astroidframework)
+* [Buy me a coffee](https://ko-fi.com/astroidframework)
+* [Extend Astroid with Astroid Pro](https://astroidframe.work/pricing)

assets/vendor/astroid/scss/_menu.scss

@@ -9,7 +9,7 @@
 	padding: 2px 7px;
 	font-weight: normal;
 	text-transform: none;
-	line-height: 15px;
+	line-height: 14px;
 	font-size: 10px;
 	border-radius: 2px;
 }
@@ -24,7 +24,7 @@
 	--as-menu-gutter-x: #{$megamenu-gutter-width};
 	display: none;
 	position: absolute;
-	z-index: 999;
+	z-index: 1003;
 
 	&.nav-submenu-container {
 		padding: 0;
@@ -96,9 +96,15 @@
 
 .astroid-nav {
 	.nav-title {
-		display: block;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
 		position: relative;
-		sup {
+		margin-left: -5px;
+		> * {
+			margin-left: 5px;
+		}
+		> sup {
 			position: absolute;
 			top: -25px;
 			left: 10%;

assets/vendor/astroid/scss/joomla/_com_content.scss

@@ -1,5 +1,5 @@
 .blog {
-  .com-content-category-blog__items + .com-content-category-blog__items {
+  .blog-items + .blog-items {
     margin-top: 3rem;
   }
   .item-content.border-top {

assets/vendor/astroid/scss/joomla/_joomla.scss

@@ -2,6 +2,7 @@
 @import "base";
 @import "language_switcher";
 @import "com_content";
+@import "mod_articles";
 @import "com_media";
 @import "mod_menu";
 @import "mod_articles_categories";

assets/vendor/astroid/scss/joomla/_mod_articles.scss

@@ -0,0 +1,4 @@
+.mod-list {
+  padding-inline-start: 0;
+  list-style: none;
+}

assets/vendor/astroid/scss/utilities/_utilities.scss

@@ -8,5 +8,4 @@
 @import "animations";
 @import "modal";
 @import "carousel";
-@import "lenis";
 @import "cursor";

assets/vendor/manager/src/components/Main.vue

@@ -136,6 +136,7 @@ function selectPreset(event, group) {
     });
   }
 }
+const pro_badge = '<span class="badge text-bg-danger ms-2">PRO</span>';
 </script>
 <template>
   <main class="as-main order-1">
@@ -156,7 +157,7 @@ function selectPreset(event, group) {
             <div :class="(idx !== 0 && field.input.type !== 'astroidhidden' && field.input.type !== 'hidden' ? 'mt-3 pt-3 border-top': '')" v-for="(field, idx) in group.fields" :key="field.id" v-show="checkShow(field)">
               <div class="row">
                 <div v-if="(field.label || field.description) && field.input.type !== `astroidheading`" class="col-sm-6 col-md-5">
-                  <div v-if="(field.input.type === `astroidradio` && field.input.role !== 'switch') || (['astroidpreloaders', 'astroidmedia', 'astroidcolor', 'astroidicon', 'astroidcalendar', 'astroidgradient', 'astroidspacing', 'astroidicons'].includes(field.input.type))" class="form-label" v-html="field.label"></div>
+                  <div v-if="(field.input.type === `astroidradio` && field.input.role !== 'switch') || (['astroidpreloaders', 'astroidmedia', 'astroidcolor', 'astroidicon', 'astroidcalendar', 'astroidgradient', 'astroidspacing', 'astroidicons', 'astroidgetpro'].includes(field.input.type))" class="form-label" v-html="(field.label + (field.input.type === `astroidgetpro` ? pro_badge : ``))"></div>
                   <label v-else :for="(typeof field.type !== 'undefined' && field.type === `json` ? field.input.id : 'params_'+field.name)" class="form-label" v-html="field.label"></label>
                   <p v-if="field.description !== ''" v-html="field.description" class="form-text"></p>
                 </div>

assets/vendor/manager/src/components/helpers/Fields.vue

@@ -197,4 +197,8 @@ function updateSubLayouts() {
     <div v-else-if="props.field.input.type === `articlelayouts`" class="astroid-article-layouts">
         <SubLayouts v-model="props.scope[props.field.name]" :field="props.field" type="article_layouts" />
     </div>
+    <div v-else-if="props.field.input.type === `astroidgetpro`" class="astroid-get-pro card card-body">
+        <h6 class="card-title">{{ props.field.input.title }}</h6>
+        <div class="card-text form-text" v-html="props.field.input.desc"></div>
+    </div>
 </template>

assets/vendor/manager/src/components/helpers/Layout.vue

@@ -130,37 +130,26 @@ function editElement(el) {
     _showModal.value = true;
 }
 function saveElement(param) {
-    layout.value.sections.every(section => {
-        if (element.value.type === section.type && element.value.id === section.id) {
-            section.params = param;
+    const updateParams = (el) => {
+        if (element.value.type === el.type && element.value.id === el.id) {
+            el.params = param;
             element.value = {};
-            return false;
+            return true;
         }
-        section.rows.every(row => {
-            if (element.value.type === row.type && element.value.id === row.id) {
-                row.params = param;
-                element.value = {};
-                return false;
-            }
-            row.cols.every(column => {
-                if (element.value.type === column.type && element.value.id === column.id) {
-                    column.params = param;
-                    element.value = {};
-                    return false;
-                }
-                column.elements.every(el => {
-                    if (element.value.type === el.type && element.value.id === el.id) {
-                        el.params = param;
-                        element.value = {};
-                        return false;
-                    }
-                    return true;
+        return false;
+    };
+
+    layout.value.sections.forEach(section => {
+        if (updateParams(section)) return;
+        section.rows.forEach(row => {
+            if (updateParams(row)) return;
+            row.cols.forEach(column => {
+                if (updateParams(column)) return;
+                column.elements.forEach(el => {
+                    if (updateParams(el)) return;
                 });
-                return true;
             });
-            return true;
         });
-        return true;
     });
 }
 

assets/vendor/manager/src/components/helpers/LayoutBuilder.vue

@@ -344,7 +344,7 @@ function selectLayout(element) {
                     <a href="#" @click.prevent="selectElement(element)" class="bg-light text-dark border px-2 py-1 rounded-pill"><i class="fas fa-plus"></i><span class="add-element-text ms-1">Add Element</span></a>
                 </div>
             </div>
-            <div v-else-if="props.group === `cols`" class="astroid-element card card-default card-body" :class="{'element-disabled' : !element.state}">
+            <div v-else-if="props.group === `cols` && typeof props.form[element.type] !== `undefined`" class="astroid-element card card-default card-body" :class="{'element-disabled' : !element.state}">
                 <div class="d-flex justify-content-between">
                     <div class="element-name">
                         <div><i class="text-body-tertiary me-2" :class="props.form[element.type].info.icon"></i>{{ element.params.find((param) => param.name === 'title').value }}<i v-if="element.type === `sublayout`" class="fa-regular fa-circle-question text-body-tertiary ms-1" :title="element.params.find((param) => param.name === 'desc').value"></i></div>
@@ -368,10 +368,6 @@ function selectLayout(element) {
                     </div>
                 </div>
             </div>
-            <div v-else>
-                {{ element.id }}
-                <LayoutBuilder :list="element" :group="map[props.group]" :system="props.system" :form="props.form" :device="props.device" @edit:Element="_editElement" @select:Element="selectElement" @update:System="updateSystem" />
-            </div>
         </template>
     </draggable>
 </template>

assets/vendor/manager/src/components/helpers/Modal.vue

@@ -71,6 +71,7 @@ function updateSubForm(value) {
 function sidebarClick(id) {
     document.getElementById(id).scrollIntoView();
 }
+const pro_badge = '<span class="badge text-bg-danger ms-2">PRO</span>';
 </script>
 <template>
     <div class="astroid-modal modal d-block" :id="props.element.type+`-`+props.element.id" tabindex="-1" aria-hidden="true">
@@ -95,7 +96,7 @@ function sidebarClick(id) {
                                 <p v-if="group.description" class="form-text">{{ group.description }}</p>
                             </div>
                             <div v-for="field in group.fields" :key="field.id" class="mb-4" v-show="checkShow(field)">
-                                <div v-if="(field.input.type === `astroidradio` && field.input.role !== 'switch') || (['astroidpreloaders', 'astroidmedia', 'astroidcolor', 'astroidicon', 'astroidcalendar', 'astroidgradient', 'astroidspacing'].includes(field.input.type))" class="form-label fw-bold" v-html="field.label"></div>
+                                <div v-if="(field.input.type === `astroidradio` && field.input.role !== 'switch') || (['astroidpreloaders', 'astroidmedia', 'astroidcolor', 'astroidicon', 'astroidcalendar', 'astroidgradient', 'astroidspacing', 'astroidgetpro'].includes(field.input.type))" class="form-label fw-bold" v-html="(field.label + (field.input.type === `astroidgetpro` ? pro_badge : ``))"></div>
                                 <label v-else-if="field.input.type !== `astroidheading` && field.label" :for="field.input.id" class="form-label fw-bold" v-html="field.label"></label>
                                 <div v-if="typeof field.type !== 'undefined' && field.type === `json`">
                                     <Fields 

astroid.xml

@@ -3,8 +3,8 @@
    <name>Astroid Framework</name>
    <libraryname>astroid</libraryname>
    <author>Astroid Framework Team</author>
-   <creationDate>October 2024</creationDate>
-   <version>3.1.7</version>
+   <creationDate>November 2024</creationDate>
+   <version>3.1.8</version>
    <url>https://astroidframe.work/</url>
    <copyright>Copyright (C) 2024 TemPlaza, Inc. All rights reserved.</copyright>
    <license>GNU General Public License version 3 or later; see LICENSE.txt</license>

astroid_framework.xml

@@ -1,13 +1,13 @@
 <updates>
     <update>
         <name>Astroid Framework</name>
-        <version>3.1.7</version>
+        <version>3.1.8</version>
         <infourl title="Astroid Framework">https://astroidframe.work/</infourl>
         <element>astroid</element>
         <type>library</type>
         <client>0</client>
         <downloads>
-            <downloadurl type="full" format="zip">https://github.com/templaza/astroid-framework/releases/download/v3.1.7/astroid-framework-3.1.7.zip</downloadurl>
+            <downloadurl type="full" format="zip">https://github.com/templaza/astroid-framework/releases/download/v3.1.8/astroid-framework-3.1.8.zip</downloadurl>
         </downloads>
         <tags>
             <tag>stable</tag>

css/lenis.css

@@ -0,0 +1,19 @@
+html.lenis, html.lenis body {
+    height: auto;
+}
+
+.lenis.lenis-smooth {
+    scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+    overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+    overflow: clip;
+}
+
+.lenis.lenis-smooth iframe {
+    pointer-events: none;
+}

framework/elements/accordion/accordion.php

@@ -7,7 +7,7 @@
  * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
  * DO NOT MODIFY THIS FILE DIRECTLY AS IT WILL BE OVERWRITTEN IN THE NEXT UPDATE
  * You can easily override all files under /astroid/ folder.
- * Just copy the file to JROOT/templates/YOUR_ASTROID_TEMPLATE/astroid/elements/module_position/module_position.php folder to create and override
+ * Just copy the file to JROOT/media/templates/site/{YOUR_TEMPLATE_NAME}/astroid/elements/module_position/module_position.php folder to create and override
  */
 
 // No direct access.

framework/elements/articles/articles.php

@@ -7,7 +7,7 @@
  * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
  * DO NOT MODIFY THIS FILE DIRECTLY AS IT WILL BE OVERWRITTEN IN THE NEXT UPDATE
  * You can easily override all files under /astroid/ folder.
- * Just copy the file to JROOT/templates/YOUR_ASTROID_TEMPLATE/astroid/elements/module_position/module_position.php folder to create and override
+ * Just copy the file to JROOT/media/templates/site/{YOUR_TEMPLATE_NAME}/astroid/elements/module_position/module_position.php folder to create and override
  */
 
 // No direct access.

framework/elements/articles/articles.xml

@@ -21,10 +21,10 @@
                 <field astroidgroup="general" type="astroidlist" name="ordering" label="JFIELD_ORDERING_LABEL" description="ASTROID_WIDGET_ARTICLES_ORDERING_DESC" default="latest">
                     <option value="latest">ASTROID_WIDGET_ORDERING_LATEST</option>
                     <option value="oldest">ASTROID_WIDGET_ORDERING_OLDEST</option>
-                    <option value="popular">ASTROID_WIDGET_ORDERING_POPULAR</option>
+                    <option value="hits">ASTROID_WIDGET_ORDERING_POPULAR</option>
                     <option value="featured">ASTROID_WIDGET_ORDERING_FEATURED</option>
-                    <option value="ascending">ASTROID_WIDGET_ORDERING_ALPHABET_ASCENDING</option>
-                    <option value="descending">ASTROID_WIDGET_ORDERING_ALPHABET_DESCENDING</option>
+                    <option value="alphabet_asc">ASTROID_WIDGET_ORDERING_ALPHABET_ASCENDING</option>
+                    <option value="alphabet_desc">ASTROID_WIDGET_ORDERING_ALPHABET_DESCENDING</option>
                     <option value="random">ASTROID_WIDGET_ORDERING_RANDOM</option>
                 </field>
                 <field astroidgroup="grid_options" name="column_responsive" type="astroidradio" width="full" default="lg">

framework/elements/banner/banner.php

@@ -7,7 +7,7 @@
  * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
  * DO NOT MODIFY THIS FILE DIRECTLY AS IT WILL BE OVERWRITTEN IN THE NEXT UPDATE
  * You can easily override all files under /astroid/ folder.
- * Just copy the file to JROOT/templates/YOUR_ASTROID_TEMPLATE/astroid/elements/banner/banner.php folder to create and override
+ * Just copy the file to JROOT/media/templates/site/{YOUR_TEMPLATE_NAME}/astroid/elements/banner/banner.php folder to create and override
  * See https://docs.joomdev.com/article/override-core-layouts/ for documentation
  */
 use Joomla\CMS\Factory;

framework/elements/button/button.php

@@ -7,7 +7,7 @@
  * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
  * DO NOT MODIFY THIS FILE DIRECTLY AS IT WILL BE OVERWRITTEN IN THE NEXT UPDATE
  * You can easily override all files under /astroid/ folder.
- * Just copy the file to JROOT/templates/YOUR_ASTROID_TEMPLATE/astroid/elements/module_position/module_position.php folder to create and override
+ * Just copy the file to JROOT/media/templates/site/{YOUR_TEMPLATE_NAME}/astroid/elements/module_position/module_position.php folder to create and override
  */
 
 // No direct access.

framework/elements/component/component.php

@@ -6,7 +6,7 @@
  * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
  * DO NOT MODIFY THIS FILE DIRECTLY AS IT WILL BE OVERWRITTEN IN THE NEXT UPDATE
  * You can easily override all files under /astroid/ folder.
- * Just copy the file to JROOT/templates/YOUR_ASTROID_TEMPLATE/astroid/elements/component/component.php folder to create and override
+ * Just copy the file to JROOT/media/templates/site/{YOUR_TEMPLATE_NAME}/astroid/elements/component/component.php folder to create and override
  * See https://docs.joomdev.com/article/override-core-layouts/ for documentation
  */
 use Joomla\CMS\Factory;

framework/elements/default.xml

@@ -21,6 +21,9 @@
             <field astroidgroup="animation_settings" name="animation" type="astroidanimations" label="ASTROID_ANIMATION"/>
             <field astroidgroup="animation_settings" ngShow="[animation]!=''" name="animation_delay" class="form-control" type="astroidtext" hint="500" default="500" label="ASTROID_ANIMATION_DELAY" description="ASTROID_ANIMATION_DELAY_DESC"/>
             <field astroidgroup="animation_settings" ngShow="[animation]!=''" name="animation_duration" class="form-control" type="astroidtext" hint="500" default="500" label="ASTROID_ANIMATION_DURATION" description="ASTROID_ANIMATION_DURATION_DESC"/>
+            <field astroidgroup="animation_settings" ngShow="[animation]!=''" name="animation_loop" type="astroidgetpro" label="ASTROID_ANIMATION_LOOP" description="ASTROID_ANIMATION_LOOP_DESC"/>
+            <field astroidgroup="animation_settings" ngShow="[animation]!=''" type="astroidgetpro" name="animation_stagger" label="ASTROID_ANIMATION_STAGGER_TIME" description="ASTROID_ANIMATION_STAGGER_TIME_DESC" />
+            <field astroidgroup="animation_settings" ngShow="[animation]!=''" name="animation_element" type="astroidgetpro" label="ASTROID_ANIMATION_ELEMENT" description="ASTROID_ANIMATION_ELEMENT_DESC"/>
 
             <field astroidgroup="general" name="max_width" type="astroidlist" label="ASTROID_WIDGET_MAX_WIDTH_LABEL" description="ASTROID_WIDGET_MAX_WIDTH_DESC" default="">
                <option value="">JGLOBAL_INHERIT</option>
@@ -153,7 +156,7 @@
 
             <field astroidgroup="spacing_settings" name="margin" type="astroidspacing" label="ASTROID_WIDGET_MARGIN_LABEL" />
             <field astroidgroup="spacing_settings" name="padding" type="astroidspacing" label="ASTROID_WIDGET_PADDING_LABEL" />
-            <field astroidgroup="custom_settings" code="scss" name="custom_css" type="astroidtextarea" label="TPL_ASTROID_CUSTOM_CUSTOM_CSS_LABEL" description="TPL_ASTROID_CUSTOM_CUSTOM_SCSS_DESC"/>
+            <field astroidgroup="custom_settings" name="custom_css" type="astroidgetpro" label="TPL_ASTROID_CUSTOM_CUSTOM_CSS_LABEL" description="TPL_ASTROID_CUSTOM_CUSTOM_SCSS_DESC"/>
          </fieldset>
          <fieldset name="responsive-settings" label="ASTROID_ELEMENT_HEAD_RESPONSIVE_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
             <field name="device_settings" type="astroidgroup" title="ASTROID_ELEMENT_HEAD_DEVICE_VISIBILITY_LABEL" />

framework/elements/divider/divider.php

@@ -7,7 +7,7 @@
  * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
  * DO NOT MODIFY THIS FILE DIRECTLY AS IT WILL BE OVERWRITTEN IN THE NEXT UPDATE
  * You can easily override all files under /astroid/ folder.
- * Just copy the file to JROOT/templates/YOUR_ASTROID_TEMPLATE/astroid/elements/module_position/module_position.php folder to create and override
+ * Just copy the file to JROOT/media/templates/site/{YOUR_TEMPLATE_NAME}/astroid/elements/module_position/module_position.php folder to create and override
  */
 
 // No direct access.