Add CodePen Widget

templaza · Sep 25, 2024 · 8b296a4 · 8b296a4
1 parent 26623dc
commit 8b296a4
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 7 deletions.
diff --git a/framework/elements/articles/articles.php b/framework/elements/articles/articles.php
@@ -401,7 +401,7 @@
     }
 
 } elseif ($use_masonry) {
-    $document->loadMasonry();
+    $document->loadMasonry('.as-masonry');
 }
 if ($params->get('card_size', '') == 'custom') {
     $card_padding   =   $params->get('card_padding', '');

diff --git a/framework/elements/codepen/codepen.php b/framework/elements/codepen/codepen.php
@@ -0,0 +1,76 @@
+<?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\Framework;
+use Astroid\Helper;
+use Joomla\CMS\Factory;
+
+extract($displayData);
+$document           =   Framework::getDocument();
+$astroid_libs       =   json_decode($params->get('astroid_libs', '[]'), true);
+if (count($astroid_libs)) {
+    foreach ($astroid_libs as $lib) {
+        switch ($lib['value']) {
+            case 'gsap':
+                $document->loadGSAP();
+                break;
+            case 'gsap.Flip':
+                $document->loadGSAP('Flip');
+                break;
+            case 'fancybox':
+                $document->loadFancyBox();
+                break;
+            case 'masonry':
+                $document->loadMasonry();
+                break;
+            case 'slick':
+                $document->loadSlick();
+                break;
+            case 'imagesloaded':
+                $document->loadImagesLoaded();
+                break;
+        }
+    }
+}
+$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
+$external_css       =   $params->get('external_css', '');
+if (!empty($external_css)) {
+    $external_css   =   json_decode($external_css);
+    if (count($external_css)) {
+        foreach ($external_css as $key => $css) {
+            $css_params     =   Helper::loadParams($css->params);
+            $wa->registerAndUseStyle($element->id.'.css-'.$key, $css_params->get('url', ''));
+        }
+    }
+}
+$external_js        =   $params->get('external_js', '');
+if (!empty($external_js)) {
+    $external_js    =   json_decode($external_js);
+    if (count($external_js)) {
+        foreach ($external_js as $key => $js) {
+            $js_params      =   Helper::loadParams($js->params);
+            $wa->registerAndUseScript($element->id.'.js-'.$key, $js_params->get('url', ''));
+        }
+    }
+}
+echo $params->get('custom_html', '');
+$custom_css     =   $params->get('custom_css', '');
+$custom_js      =   $params->get('custom_js', '');
+if (!empty($custom_css)) {
+    $wa->addInlineStyle($custom_css);
+}
+if (!empty($custom_js)) {
+    $wa->addInlineScript($custom_js);
+}
diff --git a/framework/elements/codepen/codepen.xml b/framework/elements/codepen/codepen.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<element>
+    <title>ASTROID_WIDGET_CODEPEN_LABEL</title>
+    <description>ASTROID_WIDGET_CODEPEN_LABEL</description>
+    <icon>fa-brands fa-codepen</icon>
+    <category>ASTROID_ELEMENT_CATEGORY_ADVANCED,ASTROID_ELEMENT_CATEGORY_UTILITY</category>
+    <element_type>widget</element_type>
+    <form>
+        <fields>
+            <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
+                <field astroidgroup="general" name="code_selector" type="astroidradio" width="full" default="html">
+                    <option value="html">ASTROID_WIDGET_CODEPEN_HTML_LABEL</option>
+                    <option value="css">ASTROID_WIDGET_CODEPEN_CSS_LABEL</option>
+                    <option value="js">ASTROID_WIDGET_CODEPEN_JS_LABEL</option>
+                </field>
+                <field astroidgroup="general" ngShow="[code_selector]=='html'" code="html" name="custom_html" type="astroidtextarea" label="ASTROID_WIDGET_CODEPEN_CUSTOM_HTML_LABEL" description="ASTROID_WIDGET_CODEPEN_CUSTOM_HTML_LABEL"/>
+                <field astroidgroup="general" ngShow="[code_selector]=='css'" code="css" name="custom_css" type="astroidtextarea" label="ASTROID_WIDGET_CODEPEN_CUSTOM_CSS_LABEL" description="ASTROID_WIDGET_CODEPEN_CUSTOM_CSS_LABEL"/>
+                <field astroidgroup="general" ngShow="[code_selector]=='js'" code="javascript" name="custom_js" type="astroidtextarea" label="ASTROID_WIDGET_CODEPEN_CUSTOM_JS_LABEL" description="ASTROID_WIDGET_CODEPEN_CUSTOM_JS_LABEL"/>
+                <field astroidgroup="general" ngShow="[code_selector]=='js'" name="astroid_libs" type="astroidmultiselect" label="ASTROID_LIBRARIES" default="[]" description="ASTROID_LIBRARIES_DESC" hint="ASTROID_LIBRARIES_HINT">
+                    <option value="gsap">GSAP</option>
+                    <option value="gsap.Flip">GSAP.Flip</option>
+                    <option value="fancybox">FancyBox</option>
+                    <option value="masonry">Masonry</option>
+                    <option value="slick">Slick</option>
+                    <option value="imagesloaded">Images Loaded</option>
+                </field>
+                <field astroidgroup="general" ngShow="[code_selector]=='js'" name="external_js" as-index="url" type="astroidsubform" label="ASTROID_WIDGET_CODEPEN_EXTERNAL_JS_LABEL">
+                    <form>
+                        <fields>
+                            <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL">
+                                <field type="astroidtext" class="form-control" label="ASTROID_WIDGET_CODEPEN_EXTERNAL_JS_URL_LABEL" name="url"/>
+                            </fieldset>
+                        </fields>
+                    </form>
+                </field>
+                <field astroidgroup="general" ngShow="[code_selector]=='css'" name="external_css" as-index="url" type="astroidsubform" label="ASTROID_WIDGET_CODEPEN_EXTERNAL_CSS_LABEL">
+                    <form>
+                        <fields>
+                            <fieldset name="general-settings" label="TPL_ASTROID_GENERAL_SETTINGS_LABEL">
+                                <field type="astroidtext" class="form-control" label="ASTROID_WIDGET_CODEPEN_EXTERNAL_CSS_URL_LABEL" name="url"/>
+                            </fieldset>
+                        </fields>
+                    </form>
+                </field>
+            </fieldset>
+            <fieldset name="assignment-settings" label="TPL_ASTROID_ASSIGNMENT_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields" articleData="false">
+                <field type="astroidlist" name="assignment_type" label="ASTROID_WIDGET_ASSIGN" default="1">
+                    <option value="1">ASTROID_WIDGET_ON_ALL_PAGES</option>
+                    <option value="0">ASTROID_WIDGET_NO_PAGES</option>
+                    <option value="2">ASTROID_WIDGET_SELECTED_PAGES</option>
+                </field>
+                <field ngShow="[assignment_type]==2" type="astroidassignment" label="ASTROID_ASSIGN_TO_MENU_ITEM" name="assignment"/>
+            </fieldset>
+        </fields>
+    </form>
+</element>
diff --git a/framework/elements/imagegroup/imagegroup.php b/framework/elements/imagegroup/imagegroup.php
@@ -185,5 +185,5 @@
 if ($enable_slider) {
     $document->loadSlick('#'.$element->id.' .astroid-slick', implode(',', $slide_settings));
 } elseif ($use_masonry) {
-    $document->loadMasonry();
+    $document->loadMasonry('.as-masonry');
 }
diff --git a/framework/html/com_content/category/blog.php b/framework/html/com_content/category/blog.php
@@ -36,7 +36,7 @@
 
 if ($use_masonry) {
     $document = Framework::getDocument();
-    $document->loadMasonry();
+    $document->loadMasonry('.as-masonry');
 }
 
 ?>

diff --git a/framework/library/astroid/Document.php b/framework/library/astroid/Document.php
@@ -925,14 +925,16 @@ public function loadFancyBox(): void
         self::$_fancybox = true;
     }
 
-    public function loadMasonry(): void
+    public function loadMasonry($selector = ''): void
     {
+        $wa = Factory::getApplication()->getDocument()->getWebAssetManager();
         if (!self::$_masonry) {
-            $wa = Factory::getApplication()->getDocument()->getWebAssetManager();
             $wa->registerAndUseScript('masonry', 'astroid/masonry.pkgd.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']);
-            $wa->addInlineScript('jQuery(window).on("load", function(){$(\'.as-masonry\').masonry({itemSelector: \'.as-masonry > div\',percentPosition: true});});');
             self::$_masonry = true;
         }
+        if (!empty($selector)) {
+            $wa->addInlineScript('jQuery(window).on("load", function(){$(\''.$selector.'\').masonry({itemSelector: \''.$selector.' > div\',percentPosition: true});});');
+        }
     }
 
     public function loadSlick($obj = '', $config = ''): void

diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -1170,6 +1170,7 @@ ASTROID_ELEMENT_CATEGORY_TYPOGRAPHY="Typography"
 ASTROID_ELEMENT_CATEGORY_MEDIA="Media"
 ASTROID_ELEMENT_CATEGORY_UTILITY="Utility"
 ASTROID_ELEMENT_CATEGORY_JOOMLA="Joomla"
+ASTROID_ELEMENT_CATEGORY_ADVANCED="Advanced"
 
 ASTROID_WIDGET_GENERAL_LABEL="General"
 ASTROID_WIDGET_STYLES_LABEL="Widget Styles"
@@ -1660,4 +1661,20 @@ ASTROID_WIDGET_ROWS_LABEL="Rows"
 ASTROID_WIDGET_HOVER_MOTION_GALLERY_ROWS_DESC="Determine the number of image rows on the Library"
 ASTROID_WIDGET_VIEW_DETAIL="View Detail"
 ASTROID_WIDGET_ANGLE_LABEL="Angle"
-ASTROID_WIDGET_IMAGE_ANGLE_DESC="Customize the tilt angle of the photos"
+ASTROID_WIDGET_IMAGE_ANGLE_DESC="Customize the tilt angle of the photos"
+
+; CodePen
+ASTROID_WIDGET_CODEPEN_LABEL="CodePen"
+ASTROID_WIDGET_CODEPEN_HTML_LABEL="<i class=\"fa-solid fa-code me-2\"></i>HTML"
+ASTROID_WIDGET_CODEPEN_CSS_LABEL="<i class=\"fa-brands fa-css3 me-2\"></i>CSS"
+ASTROID_WIDGET_CODEPEN_JS_LABEL="<i class=\"fa-brands fa-js me-2\"></i>JS"
+ASTROID_WIDGET_CODEPEN_CUSTOM_HTML_LABEL="Insert HTML Code"
+ASTROID_WIDGET_CODEPEN_CUSTOM_CSS_LABEL="Insert CSS Code"
+ASTROID_WIDGET_CODEPEN_CUSTOM_JS_LABEL="Insert Javascript Code"
+ASTROID_WIDGET_CODEPEN_EXTERNAL_JS_LABEL="External JS"
+ASTROID_WIDGET_CODEPEN_EXTERNAL_JS_URL_LABEL="External JS URL"
+ASTROID_WIDGET_CODEPEN_EXTERNAL_CSS_LABEL="External CSS"
+ASTROID_WIDGET_CODEPEN_EXTERNAL_CSS_URL_LABEL="External CSS URL"
+ASTROID_LIBRARIES="Astroid Libraries"
+ASTROID_LIBRARIES_DESC="The system will automatically load Astroid libraries to support your scripts."
+ASTROID_LIBRARIES_HINT="Select an Astroid Library"