Add Navigation Widget

templaza · Dec 15, 2023 · b53b9b9 · b53b9b9
1 parent bc8f43e
commit b53b9b9
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 3 deletions.
diff --git a/framework/elements/image/image.php b/framework/elements/image/image.php
@@ -27,11 +27,13 @@
 $hover_effect   = $hover_effect !== '' ? ' as-effect-' . $hover_effect : '';
 $transition     = $params->get('hover_transition', '');
 $transition     = $transition !== '' ? ' as-transition-' . $transition : '';
+$max_width      = $params->get('max_width', '');
+$max_width      = $max_width !== '' ? ' style="max-width:'.$max_width.'"' : '';
 if (!empty($image)) {
     if ($use_link) {
         echo '<a href="'.$link.'" title="'.$title.'">';
     }
-    echo '<div class="d-inline-block position-relative overflow-hidden' . $border_radius . $box_shadow . $hover_effect . $transition . '">';
+    echo '<div class="d-inline-block position-relative overflow-hidden' . $border_radius . $box_shadow . $hover_effect . $transition . '"'.$max_width.'>';
     echo '<img src="'. Astroid\Helper\Media::getPath() . '/' . $image.'" alt="'.$title.'">';
     echo '</div>';
     if ($use_link) {

diff --git a/framework/elements/image/image.xml b/framework/elements/image/image.xml
@@ -11,6 +11,8 @@
                 <field astroidgroup="general" name="image" type="astroidmedia" label="TPL_ASTROID_SELECT_IMAGE"/>
                 <field astroidgroup="general" description="ASTROID_WIDGET_IMAGE_USE_LINK_DESC" name="use_link" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_USE_LINK_LABEL"/>
                 <field astroidgroup="general" ngShow="[use_link]==1" type="astroidtext" label="ASTROID_WIDGET_LINK_LABEL" description="ASTROID_WIDGET_IMAGE_LINK_DESC" name="link" hint="https://astroidframe.work/"/>
+
+                <field astroidgroup="widget_styles" name="max_width" type="astroidtext" default="" label="ASTROID_WIDGET_MAX_WIDTH_LABEL" description="ASTROID_WIDGET_IMAGE_MAX_WIDTH_DESC" hint="500px" />
                 <field astroidgroup="widget_styles" name="border_radius" type="astroidlist" label="ASTROID_WIDGET_BORDER_RADIUS_LABEL" default="">
                     <option value="">ASTROID_NONE</option>
                     <option value="rounded">TPL_ASTROID_ICON_STYLE_ROUNDED</option>

diff --git a/framework/elements/navigation/navigation.php b/framework/elements/navigation/navigation.php
@@ -0,0 +1,81 @@
+<?php
+
+/**
+ * @package   Astroid Framework
+ * @author    Astroid Framework Team https://astroidframe.work
+ * @copyright Copyright (C) 2023 AstroidFrame.work.
+ * @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
+ */
+
+// No direct access.
+defined('_JEXEC') or die;
+
+use Astroid\Helper\Style;
+
+extract($displayData);
+$menu_items     = $params->get('menu_items', '');
+if (empty($menu_items)) {
+    return false;
+}
+$menu_items     = json_decode($menu_items);
+if (!count($menu_items)) {
+    return false;
+}
+
+$font_style     = $params->get('font_style', null);
+$item_margin    = $params->get('item_margin', '');
+$item_padding   = $params->get('item_padding', '');
+$list_style     = $params->get('list_style', '');
+$list_style     = $list_style !== '' ? ' ' . $list_style : '';
+$alignment      = $params->get('alignment', '');
+$alignment      = $alignment !== '' ? ' '. $alignment : '';
+$color          = Style::getColor($params->get('color', ''));
+$color_hover    = Style::getColor($params->get('color_hover', ''));
+$bgcolor        = Style::getColor($params->get('bgcolor', ''));
+$bgcolor_hover  = Style::getColor($params->get('bgcolor_hover', ''));
+echo '<nav class="nav' . $alignment . $list_style . '">';
+foreach ($menu_items as $item) {
+    $icon_params    =   Style::getSubFormParams($item->params);
+    $target         =   isset($icon_params['target']) && $icon_params['target'] ? ' target="'.$icon_params['target'].'"' : '';
+    echo '<a id="item-'.$item->id.'"  class="nav-link" href="' .$icon_params['link']. '" title="'.$icon_params['title'].'"' . $target . '><i class="me-2 '.$icon_params['icon'].'"></i>'.$icon_params['title'].'</a>';
+}
+echo '</nav>';
+
+// Set styles for widget
+$style = new Style('#'. $element->id);
+$style_dark = new Style('#'. $element->id, 'dark');
+
+// Font style
+if (!empty($font_style)) {
+    Style::renderTypography('#'.$element->id.' .nav-link', $font_style);
+}
+// Color style
+$style->child('.nav-link')->addCss('color', $color['light']);
+$style_dark->child('.nav-link')->addCss('color', $color['dark']);
+$style->child('.nav-link')->hover()->addCss('color', $color_hover['light']);
+$style_dark->child('.nav-link')->hover()->addCss('color', $color_hover['dark']);
+// Background color style
+$style->child('.nav-link')->addCss('background-color', $bgcolor['light']);
+$style_dark->child('.nav-link')->addCss('background-color', $bgcolor['dark']);
+$style->child('.nav-link')->hover()->addCss('background-color', $bgcolor_hover['light']);
+$style_dark->child('.nav-link')->hover()->addCss('background-color', $bgcolor_hover['dark']);
+// Item Margin
+if (!empty($item_margin)) {
+    $margin = \json_decode($item_margin, false);
+    foreach ($margin as $device => $props) {
+        $style->child('.nav-link')->addStyle(Style::spacingValue($props, "margin"), $device);
+    }
+}
+// Item Padding
+if (!empty($item_padding)) {
+    $padding = \json_decode($item_padding, false);
+    foreach ($padding as $device => $props) {
+        $style->child('.nav-link')->addStyle(Style::spacingValue($props, "padding"), $device);
+    }
+}
+
+$style->render();
+$style_dark->render();
diff --git a/framework/elements/navigation/navigation.xml b/framework/elements/navigation/navigation.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<element>
+    <title>ASTROID_WIDGET_NAVIGATION_LABEL</title>
+    <description>ASTROID_WIDGET_NAVIGATION_DESC</description>
+    <icon>fa-solid fa-bars</icon>
+    <category>Widgets</category>
+    <form>
+        <fields>
+            <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
+                <field type="astroidgroup" name="misc_options" title="ASTROID_WIDGET_MISC_OPTIONS_LABEL"/>
+                <field type="astroidgroup" name="color_options" title="ASTROID_WIDGET_COLOR_OPTIONS_LABEL"/>
+                <field type="astroidgroup" name="bgcolor_options" title="ASTROID_WIDGET_BG_COLOR_OPTIONS_LABEL"/>
+                <field type="astroidgroup" name="spacing_options" title="ASTROID_ELEMENT_HEAD_SPACING_LABEL"/>
+                <field astroidgroup="general" name="menu_items" type="astroidsubform" label="ASTROID_WIDGET_MENU_ITEMS_LABEL">
+                    <form>
+                        <fields>
+                            <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL">
+                                <field type="astroidtext" class="form-control" label="JGLOBAL_TITLE" name="title"/>
+                                <field type="astroidtext" label="ASTROID_WIDGET_LINK_LABEL" description="ASTROID_WIDGET_NAV_LINK_DESC" name="link" hint="https://astroidframe.work/"/>
+                                <field type="astroidicons" label="ASTROID_WIDGET_ICON_LABEL" name="icon"/>
+                                <field type="astroidlist" name="target" label="ASTROID_WIDGET_LINK_TARGET_LABEL" default="">
+                                    <option value="">Default</option>
+                                    <option value="_blank">New Window</option>
+                                    <option value="_parent">Parent Frame</option>
+                                    <option value="_top">Full body of the window</option>
+                                </field>
+                            </fieldset>
+                        </fields>
+                    </form>
+                </field>
+                <field astroidgroup="misc_options" type="astroidlist" name="list_style" label="ASTROID_WIDGET_NAV_LIST_STYLE" default="">
+                    <option value="">ASTROID_WIDGET_NAV_NAVIGATION</option>
+                    <option value="flex-column">ASTROID_WIDGET_NAV_LIST</option>
+                </field>
+                <field astroidgroup="misc_options" name="alignment" type="astroidradio" default="" label="ASTROID_WIDGET_ALIGNMENT_LABEL">
+                    <option value="">JGLOBAL_LEFT</option>
+                    <option value="justify-content-center">JGLOBAL_CENTER</option>
+                    <option value="justify-content-end">JGLOBAL_RIGHT</option>
+                </field>
+                <field astroidgroup="misc_options" name="font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" columns="1" preview="false" color-picker="false"/>
+
+                <field astroidgroup="color_options" name="color" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
+                <field astroidgroup="color_options" name="color_hover" type="astroidcolor" label="ASTROID_WIDGET_COLOR_HOVER_LABEL"/>
+
+                <field astroidgroup="bgcolor_options" name="bgcolor" type="astroidcolor" label="ASTROID_WIDGET_COLOR_LABEL"/>
+                <field astroidgroup="bgcolor_options" name="bgcolor_hover" type="astroidcolor" label="ASTROID_WIDGET_COLOR_HOVER_LABEL"/>
+
+                <field astroidgroup="spacing_options" name="item_margin" type="astroidspacing" label="ASTROID_WIDGET_MARGIN_LABEL" />
+                <field astroidgroup="spacing_options" name="item_padding" type="astroidspacing" label="ASTROID_WIDGET_PADDING_LABEL" />
+            </fieldset>
+        </fields>
+    </form>
+</element>
diff --git a/framework/library/astroid/Helper/Style.php b/framework/library/astroid/Helper/Style.php
@@ -393,7 +393,6 @@ public static function spacingValue($value = null, $property = "padding", $defau
             }
         }
 
-
         if (count(array_keys($values)) === 4) {
             $return = [];
             $return[] = self::getPropertySet($property) . ':' . implode(' ', $values);

diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -1091,9 +1091,12 @@ TPL_ASTROID_MINIFYJS_EXCLUDES_DESC="Add comma separated filesnames to exclude fi
 
 ; Widgets
 ASTROID_WIDGET_STYLES_LABEL="Widget Styles"
+ASTROID_WIDGET_COLOR_OPTIONS_LABEL="Color Options"
+ASTROID_WIDGET_BG_COLOR_OPTIONS_LABEL="Background Color Options"
 ASTROID_WIDGET_HTML_ELEMENT_LABEL="HTML Element"
 ASTROID_WIDGET_FONT_STYLES_LABEL="Font Styles"
 ASTROID_WIDGET_CONTENT_OPTIONS_LABEL="Content Options"
+ASTROID_WIDGET_ALIGNMENT_LABEL="Alignment"
 ASTROID_WIDGET_BORDER_RADIUS_LABEL="Border Radius"
 ASTROID_WIDGET_MARGIN_LABEL="Margin"
 ASTROID_WIDGET_PADDING_LABEL="Padding"
@@ -1102,6 +1105,7 @@ ASTROID_WIDGET_USE_LINK_LABEL="Use Link"
 ASTROID_WIDGET_LINK_LABEL="Link"
 ASTROID_WIDGET_LINK_TARGET_LABEL="Link Target"
 ASTROID_WIDGET_GLOBAL_STYLES_LABEL="Styles"
+ASTROID_WIDGET_MAX_WIDTH_LABEL="Max Width"
 ASTROID_WIDGET_GLOBAL_SIZE_LABEL="Size"
 ASTROID_WIDGET_GUTTER_LABEL="Gutter"
 ASTROID_WIDGET_COLOR_LABEL="Color"
@@ -1174,4 +1178,14 @@ ASTROID_WIDGET_ICON_LINK_DESC="Add link of your icon"
 ASTROID_WIDGET_IMAGE_LABEL="Image"
 ASTROID_WIDGET_IMAGE_DESC="Display image with different styles"
 ASTROID_WIDGET_IMAGE_USE_LINK_DESC="Add link to your image"
-ASTROID_WIDGET_IMAGE_LINK_DESC="Add link of your image"
+ASTROID_WIDGET_IMAGE_LINK_DESC="Add link of your image"
+ASTROID_WIDGET_IMAGE_MAX_WIDTH_DESC="Define max-width of image"
+
+; Navigation
+ASTROID_WIDGET_NAVIGATION_LABEL="Navigation"
+ASTROID_WIDGET_NAVIGATION_DESC="Define different styles for navigation"
+ASTROID_WIDGET_MENU_ITEMS_LABEL="Menu Items"
+ASTROID_WIDGET_NAV_LINK_DESC="Add link of your nav item"
+ASTROID_WIDGET_NAV_LIST_STYLE="List Style"
+ASTROID_WIDGET_NAV_NAVIGATION="Navigation"
+ASTROID_WIDGET_NAV_LIST="List"
-Original file line number
+Diff line change
@@ Expand Up @@
                 }
             }
             if (count(array_keys($values)) === 4) {
                 $return = [];
                 $return[] = self::getPropertySet($property) . ':' . implode(' ', $values);
@@ Expand Down @@