Single Preview Button in 3 Vs. Dual Preview Buttons in 4

iamrobert commented 11 months ago

Hi,

I've noticed an alteration in the user interface that's causing me confusion.

Here's a quick video of the issue:

In FLEXIcontent, I had a singular 'Preview' button.

But in the current version, two separate 'Preview' buttons have appeared in the toolbar:

I'm finding it confusing for users, especially considering that the first button, 'Preview Latest,' doesn't show the template.

In: administrator/components/com_flexicontent/views/item/view.html.php

New Way:

            $drop_btn = '
                <button type="button" class="' . $this->btn_sm_class . ' btn-info dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
                    <span title="'.JText::_('FLEXI_ACTIONS').'" class="icon-menu"></span>
                    '.JText::_('FLEXI_PREVIEW').'
                    <span class="caret"></span>
                </button>';

If we switch to this code, it reverts to one button:

            // ADD PREVIEW
            $drop_btn = '<a class="toolbar btn btn-sm dropdown-item  btn-fcaction spaced-btn" href="javascript:;" onClick="window.open(\''.$previewlink.'\', \'preview2\', \''.$link_params.'\'); return false;"><span class="icon-screen"></span>'.JText::_('FLEXI_PREVIEW').'</a>';

How can we add an option for a single-button configuration?

Happy to make a pull request - but need some clarification.

micker commented 11 months ago

Maybe WE need to check différence between to sub option and make a more clear choice (and remove preview with tmpl option) @ggppdk why this New option ?

micker commented 11 months ago

i checked more the problem is here https://github.com/FLEXIcontent/flexicontent-cck/blob/b74e026e1ac8184d592c935bcd8bdca3d5e00e6a/admin/views/item/view.html.php#L1866C1-L1878C5

            // PREVIEW for latest version
            $use_versioning = $page_params->get('use_versioning', 1);
            if ( !$use_versioning || ($item->version == $item->current_version && $item->version == $item->last_version) )
            {
                $btn_arr = array();
                $btn_arr['fc_actions'] = '';

                $lbl_txt = JText::_($use_versioning ? 'FLEXI_PREVIEW_LATEST' :'FLEXI_PREVIEW');
                $btn_arr['preview_current'] = str_replace('_PREVIEW_LINK_', $previewlink . '&amp;tmpl=component',
                     str_replace('_LBL_TEXT_', $lbl_txt, $preview_btn_html));
                $btn_arr['preview_current_insite'] = str_replace('_PREVIEW_LINK_', $previewlink,
                     str_replace('_LBL_TEXT_', $inline_txt . $lbl_txt, $preview_btn_html));
            }

this is actived if versionning is actived but what is the difference between current and last version (current inside ...

ggppdk commented 11 months ago

1st preview button is is component area only (you can see the tmpl=component in the preview URL)
2nd preview button is a preview that includes the site modules

There

should be 2 options for the 2 preview buttons in the configuration to be able to disable them individuallly and
and maybe we should rename the 2 preview buttons to something more clear and understandable a. Preview Latest (without content modules) b. Preview Latest

I ll add an extra option to disable them individually and also rename the buttons as above

iamrobert commented 11 months ago

Hi @ggppdk

Thanks - can I propose ordering this way - as clients are more likely to want to see how it looks:

a. Preview b. Preview (FLEXIcontent changes only) - clients don't know what modules are. It also needs the template design as it breaks my site

Could we also add the option of hiding Edit layout & global parameters button?

It's not frequently used and can break the site for clients.

iamrobert commented 10 months ago

If we replace or add at the end the code in administrator/components/com_flexicontent/views/item/view.html.php

A single-button preview appears that opens in a new tab:

$_sh404sef = defined('SH404SEF_IS_RUNNING') && JFactory::getConfig()->get('sef');

if (!$isnew && in_array('preview_latest', $allowbuttons)) {
    // Existing URL generation logic
    $site_languages = FLEXIUtilities::getLanguages();
    $sef_lang = $item->language != '*' && isset($site_languages->{$item->language}) ? $site_languages->{$item->language}->sef : '';

    $item_url = FlexicontentHelperRoute::getItemRoute($item->id . ':' . $item->alias, $categories[$item->catid]->slug, 0, $item)
    . ($sef_lang ? '&lang=' . $sef_lang : '');

    // Build a frontend SEF url
    $item_url = flexicontent_html::getSefUrl($item_url);
    $previewlink = $item_url . (strstr($item_url, '?') ? '&amp;' : '?') . 'preview=1';
    $this->previewlink = $previewlink;

    // Single link button HTML
    $single_link_html = '<a class="toolbar btn btn-sm btn-info" href="' . $previewlink . '" target="_blank">'.JText::_('FLEXI_PREVIEW').'</a>';

    // Button Array for Toolbar
    $btn_arr = array('preview_single' => $single_link_html);

    // Add to Toolbar
    flexicontent_html::addToolBarDropMenu(
        $btn_arr,
        'preview_btns_group',
        '<button type="button" class="btn btn-sm btn-info"></button>',
        array('drop_class_extra' => '', 'add_inline' => $add_inline),
        $tbname
    );
}

If this isn't required, I've proposed in this pull request - a different solution that I can do via the main.php or custom one.

micker commented 10 months ago

i send a ping to @ggppdk for a review thanks for your work ! realy appreciate

iamrobert commented 10 months ago

Here's the code to add to main.php or a custom one to add the button:

<?php
//ADD A PREVIEW BUTTON 
$allowbuttons = ['preview_latest'];

if (!$isnew && in_array('preview_latest', $allowbuttons)) {

    if (isset($this->previewlink)) {

        echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            var toolbar = document.querySelector("#toolbar"); 
            var cancelButton = document.querySelector("#toolbar-cancel");
            var previewLink = "' . $this->previewlink . '";  
            var newButton = document.createElement("a");

            newButton.className = "btn btn-sm btn-info";
            newButton.href = previewLink;
            newButton.target = "_blank";
            newButton.id = "singlePreview";  

            var newSpan = document.createElement("span");
            newSpan.className = "icon-screen";
            newSpan.title = "'.JText::_('FLEXI_PREVIEW').'";

            newButton.appendChild(newSpan);
            newButton.innerHTML += " '.JText::_('FLEXI_PREVIEW').'";

            if (cancelButton) {
                cancelButton.insertAdjacentElement("afterend", newButton);
            } else {
                toolbar.appendChild(newButton);
            }
        });
      </script>';
    }
}

?>

The last one removes the template button which I don't require:

<style>
    #singlePreview::before {
        display: none !important;
    }
    #singlePreview + .buttons.btn-group.dropdown {
        display: none !important;
    }

    toolbar.btn-fcaction.btn-dark {
        display: none !important;
    }
</style>

micker commented 2 months ago

that on road

FLEXIcontent / flexicontent-cck

Single Preview Button in 3 Vs. Dual Preview Buttons in 4 #1134