Improve MultiSelect and Typography field. Add social share buttons

templaza · Nov 30, 2023 · 1f05d40 · 1f05d40
1 parent 8e64843
commit 1f05d40
Show file tree

Hide file tree

Showing 17 changed files with 88 additions and 75 deletions.
diff --git a/assets/vendor/astroid/scss/_preloader.scss b/assets/vendor/astroid/scss/_preloader.scss
diff --git a/assets/vendor/astroid/scss/astroid.scss b/assets/vendor/astroid/scss/astroid.scss
@@ -15,5 +15,4 @@
 @import "pagination";
 @import "utilities/utilities";
 @import "components/components";
-@import "joomla/joomla";
-@import "preloader";
+@import "joomla/joomla";
diff --git a/assets/vendor/manager/dist/index.html b/assets/vendor/manager/dist/index.html
diff --git a/assets/vendor/manager/dist/index.js b/assets/vendor/manager/dist/index.js
diff --git a/assets/vendor/manager/index.html b/assets/vendor/manager/index.html
diff --git a/assets/vendor/manager/src/components/helpers/MultiSelect.vue b/assets/vendor/manager/src/components/helpers/MultiSelect.vue
@@ -30,7 +30,7 @@ function onSelectDevice(items, lastSelectItem) {
         option-text="text"
         :id="props.field.id"
         :selected-items="selectedItems"
-        placeholder="Select Bootstrap libraries"
+        :placeholder="props.field.input.hint"
         @select="onSelectDevice"
     >
     </multi-list-select>

diff --git a/assets/vendor/manager/src/components/helpers/Typography.vue b/assets/vendor/manager/src/components/helpers/Typography.vue
@@ -321,7 +321,7 @@ function getRandomInt(min, max) {
             </div>
         </div>
     </div>
-    <div class="typography-preview">
+    <div v-if="props.field.input.options.preview" class="typography-preview">
         <link v-if="font_type === `google` && (typeof options[font_type].find((font) => font.value === fontSelected.value) !== 'undefined') && fontSelected.value !== `` && fontSelected.value !== `__default` && fontSelected.value.search(/^library-font-/) === -1" :href="`https://fonts.googleapis.com/css?family=`+fontSelected.value" rel="stylesheet" />
         <div class="card card-default card-body mt-4" :style="
             {

diff --git a/framework/elements/heading/heading.xml b/framework/elements/heading/heading.xml
@@ -18,7 +18,7 @@
                     <option value="h6">h6</option>
                     <option value="div">div</option>
                 </field>
-                <field astroidgroup="widget_styles" name="font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" font-style-picker="false" color-picker="true" columns="1"/>
+                <field astroidgroup="widget_styles" name="font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" columns="1" preview="false"/>
             </fieldset>
         </fields>
     </form>

diff --git a/framework/fields/astroidmultiselect.php b/framework/fields/astroidmultiselect.php
@@ -9,7 +9,6 @@
 defined('JPATH_PLATFORM') or die;
 use Joomla\CMS\Form\FormField;
 use Joomla\CMS\Language\Text;
-use Joomla\CMS\Factory;
 /**
  * Form Field class for the Joomla Platform.
  * Supports a generic list of options.
@@ -44,6 +43,7 @@ protected function getInput() {
             'name'    =>  $this->name,
             'value'   =>  $this->value,
             'options' =>  $options,
+            'hint'    =>  Text::_($this->hint),
             'type'    =>  strtolower($this->type),
         ];
         return json_encode($json);
@@ -65,7 +65,7 @@ protected function getOptions() {
 
             $tmp = array(
                 'value' => $value,
-                'text' => $text,
+                'text' => Text::_($text),
             );
 
             // Add the option object to the result set.

diff --git a/framework/fields/astroidtext.php b/framework/fields/astroidtext.php
@@ -169,43 +169,6 @@ protected function getInput() {
        ];
 
        return json_encode($json);
-
-//      if ($this->element['useglobal']) {
-//         $component = JFactory::getApplication()->input->getCmd('option');
-//
-//         // Get correct component for menu items
-//         if ($component == 'com_menus') {
-//            $link = $this->form->getData()->get('link');
-//            $uri = new JUri($link);
-//            $component = $uri->getVar('option', 'com_menus');
-//         }
-//
-//         $params = JComponentHelper::getParams($component);
-//         $value = $params->get($this->fieldname);
-//
-//         // Try with global configuration
-//         if (is_null($value)) {
-//            $value = JFactory::getConfig()->get($this->fieldname);
-//         }
-//
-//         // Try with menu configuration
-//         if (is_null($value) && JFactory::getApplication()->input->getCmd('option') == 'com_menus') {
-//            $value = JComponentHelper::getParams('com_menus')->get($this->fieldname);
-//         }
-//
-//         if (!is_null($value)) {
-//            $value = (string) $value;
-//
-//            $this->hint = JText::sprintf('JGLOBAL_USE_GLOBAL_VALUE', $value);
-//         }
-//      }
-//
-//      $renderer = new JLayoutFile($this->layout, JPATH_LIBRARIES . '/astroid/framework/layouts');
-//
-//      $data = $this->getLayoutData();
-//      $data['fieldname'] = $this->fieldname;
-//
-//      return $renderer->render($data);
    }
 
    /**

diff --git a/framework/fields/astroidtypography.php b/framework/fields/astroidtypography.php
@@ -184,6 +184,12 @@ public function getInput()
             $extraData['columns'] = 3;
         }
 
+        if (isset($this->element['preview']) && $this->element['preview'] == 'false') {
+            $extraData['preview'] = false;
+        } else {
+            $extraData['preview'] = true;
+        }
+
         $extraData['colormode'] = $color_mode;
         $system_fonts = array();
         foreach (Astroid\Helper\Font::$system_fonts as $s_font_value => $s_font_title) {

diff --git a/framework/frontend/blog/modules/social.php b/framework/frontend/blog/modules/social.php
@@ -10,6 +10,8 @@
  */
 use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
+use Joomla\CMS\Router\Route;
+use Joomla\Component\Content\Site\Helper\RouteHelper;
 // No direct access.
 defined('_JEXEC') or die;
 extract($displayData);
@@ -20,6 +22,34 @@
    return;
 }
 
+// Share button default
+if ($type == 'default') {
+    $astroid_article_share_buttons = json_decode($params->get('astroid_article_share_buttons', '[]'), true);
+    if (is_array($astroid_article_share_buttons) && count($astroid_article_share_buttons)) {
+        $url = Route::_(RouteHelper::getArticleRoute($article->slug, $article->catid, $article->language), true, 0, true);
+        echo '<div class="astroid-socialshare mb-4">';
+        echo '<div class="row row-cols-auto g-3">';
+        echo '<div class="ui-social-share-text">'.Text::_('ASTROID_SOCIAL_SHARE_TEXT').'</div>';
+        foreach ($astroid_article_share_buttons as $article_share_button) {
+            switch ($article_share_button['value']) {
+                case 'facebook':
+                    echo '<div><a class="facebook" onClick="window.open(\'https://www.facebook.com/sharer.php?u='.$url.'\',\'Facebook\',\'width=600,height=300,left=\'+(screen.availWidth/2-300)+\',top=\'+(screen.availHeight/2-150)+\'\'); return false;" href="https://www.facebook.com/sharer.php?u='.$url.'" title="Facebook"><i class="fa-brands fa-facebook"></i></a></div>';
+                    break;
+                case 'x':
+                    echo '<div><a class="facebook" onClick="window.open(\'https://x.com/share?url='.$url.'&amp;text='.str_replace(" ", "%20", $article->title).'\',\'X\',\'width=600,height=300,left=\'+(screen.availWidth/2-300)+\',top=\'+(screen.availHeight/2-150)+\'\'); return false;" href="https://www.x.com/sharer.php?u='.$url.'&amp;text='.str_replace(" ", "%20", $article->title).'" title="X"><i class="fa-brands fa-x-twitter"></i></a></div>';
+                    break;
+                case 'linkedin':
+                    echo '<div><a class="linkedin" onClick="window.open(\'https://www.linkedin.com/shareArticle?mini=true&url='.$url.'\',\'LinkedIn\',\'width=585,height=666,left=\'+(screen.availWidth/2-292)+\',top=\'+(screen.availHeight/2-333)+\'\'); return false;" href="https://www.linkedin.com/shareArticle?mini=true&url='.$url.'" title="LinkedIn"><i class="fa-brands fa-linkedin"></i></a></div>';
+                    break;
+                case 'pinterest':
+                    echo '<div><a class="pinterest" onClick="window.open(\'http://pinterest.com/pin/create/button/?url='.$url.'&description='.$article->title.'\',\'Pinterest\',\'width=600,height=300,left=\'+(screen.availWidth/2-300)+\',top=\'+(screen.availHeight/2-150)+\'\'); return false;" href="http://pinterest.com/pin/create/button/?url='.$url.'&description='.$article->title.'" title="Pinterest"><i class="fa-brands fa-pinterest"></i></a></div>';
+                    break;
+            }
+        }
+        echo '</div>';
+        echo '</div>';
+    }
+}
 // Sharethis Social Share Start 
 if ($type == 'sharethis') {
 	$article_socialshare_sharethis = $params->get('article_socialshare_sharethis', ''); ?>
@@ -29,5 +59,8 @@
                 <div class="ui-social-share-text"><?php echo Text::_('ASTROID_SOCIAL_SHARE_TEXT') ?></div>
 				<div class="sharethis-inline-share-buttons"></div>
 			</div>
+        <a href="http://pinterest.com/pin/create/button/?url={URI-encoded URL of the page to pin}&media={URI-encoded URL of the image to pin}&description={optional URI-encoded description}" class="pin-it-button" count-layout="horizontal">
+            <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
+        </a>
 	<?php } ?>
 <?php } ?>
diff --git a/framework/frontend/preloader.php b/framework/frontend/preloader.php
@@ -141,10 +141,10 @@
    $preloaderStyles .= '.preload_fontawesome{font-size:'.$preloader_size.'px; color: '.$preloader_color['light'].'; display: flex;justify-content: center;margin: 0 auto;}';
    $preloaderStyles .= '[data-bs-theme=dark] .preload_fontawesome{color: '.$preloader_color['dark'].';}';
 }
-$preloaderStyles    .=  '#astroid-preloader{background:' . $preloader_bgcolor['light'] . ';}';
+$preloaderStyles    .=  '#astroid-preloader{background:' . $preloader_bgcolor['light'] . ';z-index: 99999;}';
 $preloaderStyles    .=  '[data-bs-theme=dark] #astroid-preloader{background:' . $preloader_bgcolor['dark'] . ';}';
 $wa->addInlineStyle($preloaderStyles);
 ?>
-<div id="astroid-preloader" class="d-flex">
+<div id="astroid-preloader" class="d-flex align-items-center justify-content-center position-fixed top-0 start-0 bottom-0 end-0">
    <?php echo $preloaderHTML; ?>
 </div>
diff --git a/framework/html/com_content/article/default.php b/framework/html/com_content/article/default.php
@@ -121,7 +121,9 @@
                     <?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
                 <?php endif; ?>
             <?php endif; ?>
-
+            <?php // Content is generated by content plugin event "onContentAfterDisplay" ?>
+            <?php echo $this->item->event->afterDisplayContent; ?>
+            <?php $astroidArticle->renderSocialShare(); ?>
             <?php
             if (!empty($this->item->pagination) && $this->item->paginationposition && !$this->item->paginationrelative) :
                 echo $this->item->pagination;
@@ -146,16 +148,12 @@
             <?php endif; ?>
         <?php endif; ?>
     </div>
-
     <?php
     if (!empty($this->item->pagination) && $this->item->paginationposition && $this->item->paginationrelative) :
         echo $this->item->pagination;
         ?>
     <?php endif; ?>
-    <?php $astroidArticle->renderSocialShare(); ?>
     <?php $astroidArticle->renderAuthorInfo(); ?>
     <?php $astroidArticle->renderComments(); ?>
     <?php $astroidArticle->renderRelatedPosts(); ?>
-    <?php // Content is generated by content plugin event "onContentAfterDisplay" ?>
-    <?php echo $this->item->event->afterDisplayContent; ?>
 </div>
diff --git a/framework/library/astroid/Helper/Style.php b/framework/library/astroid/Helper/Style.php
@@ -244,6 +244,24 @@ public static function renderTypography($selector, $object, $defaultObject = nul
             }
         }
 
+        // font styles
+        $font_styles = $typography->get('font_style', []);
+        if (is_array($font_styles) && count($font_styles)) {
+            foreach ($font_styles as $font_style) {
+                switch ($font_style) {
+                    case 'bold':
+                        $style->addCss('font-weight', 'bold');
+                        break;
+                    case 'italic':
+                        $style->addCss('font-style', 'italic');
+                        break;
+                    case 'underline':
+                        $style->addCss('text-decoration', 'underline');
+                        break;
+                }
+            }
+        }
+
         // letter spacing
         $letter_spacing = $typography->get('letter_spacing', '');
         $letter_spacing_unit = $typography->get('letter_spacing_unit', '');

diff --git a/framework/options/article.xml b/framework/options/article.xml
@@ -29,9 +29,17 @@
 
 			<field astroidgroup="article_single_options" name="article_socialshare_type" type="astroidradio" default="none" label="ASTROID_ARTICLE_OPTIONS_SOCIALBTNS_LBL" description="ASTROID_ARTICLE_OPTIONS_SOCIALBTNS_DESC">
 				<option class="btn-danger" value="none">ASTROID_NONE</option>
+				<option value="default">ASTROID_SHARE_DEFAULT_LBL</option>
 				<option value="sharethis">ASTROID_SHARETHIS_LBL</option>
 			</field>
 
+			<field astroidgroup="article_single_options" ngShow="[article_socialshare_type]=='default'" name="astroid_article_share_buttons" type="astroidmultiselect" label="ASTROID_SHARE_BUTTONS_LBL" description="ASTROID_SHARE_BUTTONS_DESC" hint="ASTROID_SHARE_BUTTONS_PLACEHOLDER_LBL" default="[]">
+				<option value="facebook">ASTROID_SHARE_FACEBOOK_LBL</option>
+				<option value="x">ASTROID_SHARE_X_LBL</option>
+				<option value="linkedin">ASTROID_SHARE_LINKEDIN_LBL</option>
+				<option value="pinterest">ASTROID_SHARE_PINTEREST_LBL</option>
+			</field>
+
 			<field ngShow="[article_socialshare_type]=='sharethis'" astroidgroup="article_single_options" name="article_socialshare_sharethis" type="astroidtext" filter="raw" class="form-control" label="ASTROID_SHARETHIS_PID_LBL" description="ASTROID_SHARETHIS_PID_DESC" />
 
 			<field astroidgroup="article_single_options" name="article_opengraph" type="astroidradio" astroid-switch="true" default="1" label="ASTROID_ARTICLE_OPTIONS_OPENGRAPH_LBL" description="ASTROID_ARTICLE_OPTIONS_OPENGRAPH_DESC"/>

diff --git a/framework/options/basic.xml b/framework/options/basic.xml
@@ -10,7 +10,7 @@
          <field type="astroidgroup" name="colormode" title="TPL_ASTROID_BASIC_ENABLE_COLOR_MODE_LABEL" help="https://docs.astroidframe.work/basic-settings/color-mode"/>
          <field type="astroidgroup" name="smooth_scroll" title="TPL_SMOOTH_SCROLL_TITLE" help="https://github.com/templaza/astroid-framework/wiki/2.-Basic-Settings#smooth-scroll"/>
 
-         <field astroidgroup="bootstrap" name="bootstrap_js" type="astroidmultiselect" label="TPL_ASTROID_BOOTSTRAP_JS_LABEL" default="[]" description="TPL_ASTROID_BOOTSTRAP_JS_DESC">
+         <field astroidgroup="bootstrap" name="bootstrap_js" type="astroidmultiselect" label="TPL_ASTROID_BOOTSTRAP_JS_LABEL" default="[]" description="TPL_ASTROID_BOOTSTRAP_JS_DESC" hint="TPL_ASTROID_BOOTSTRAP_JS_HINT_LABEL">
             <option value="alert">Alert</option>
             <option value="button">Button</option>
             <option value="carousel">Carousel</option>