Templates modal converted to bootstrap

[dgrammatiko]

Same as #4575 #4563 #4562 #4561 #4514 #4513

Testing:
After Applying this patch copy
Try the Template Manager

Follow the images to navigate:

And:

[Fedik]

I have a doubt in current, because renderModal expect the URL for iframe ... not sure whether it is valid, put the image to the iframe...
maybe someone know better?

[dgrammatiko]

Practically this is an internal function of com_templates, and will not break anything else.
Best way to find out is by testing...

[dgrammatiko]

@Fedik This is the output:

jQuery('#beez3-Modal').on('show', function () {
document.getElementById('beez3-Modal-container').innerHTML = '<div class="modal-body"><iframe class="iframe" src="/templates/beez3/template_preview.png" height="800px" width="800px"></iframe></div>';
});

Which probably is... not so valid. But it renders in all A grade browsers

[dgrammatiko]

It would be better though if something like:

$preview = ‘<img ‘ . $baseUrl . '/templates/' . $template . '/template_preview.png’ . ‘ alt=“preview” />’

[dgrammatiko]

Nope it doesn’t work

[dgrammatiko]

Yes that will work! But after transferring all the modals to bs, that image was the only situation where in a modal direct content is injected. Bootstrap got also popovers which I thing might be a good fit here ref: http://getbootstrap.com/2.3.2/javascript.html#popovers
And the behavior.popup

    public static function popover($selector = '.hasPopover', $params = array())
    {
        // Only load once
        if (isset(static::$loaded[__METHOD__][$selector]))
        {
            return;
        }

        // Include Bootstrap framework
        static::framework();

        $opt['animation'] = isset($params['animation']) ? $params['animation'] : null;
        $opt['html']      = isset($params['html']) ? $params['html'] : true;
        $opt['placement'] = isset($params['placement']) ? $params['placement'] : null;
        $opt['selector']  = isset($params['selector']) ? $params['selector'] : null;
        $opt['title']     = isset($params['title']) ? $params['title'] : null;
        $opt['trigger']   = isset($params['trigger']) ? $params['trigger'] : 'hover focus';
        $opt['content']   = isset($params['content']) ? $params['content'] : null;
        $opt['delay']     = isset($params['delay']) ? $params['delay'] : null;
        $opt['container'] = isset($params['container']) ? $params['container'] : 'body';

        $options = JHtml::getJSObject($opt);

        // Attach the popover to the document
        JFactory::getDocument()->addScriptDeclaration(
            "jQuery(document).ready(function()
            {
                jQuery('" . $selector . "').popover(" . $options . ");
            });"
        );

[Fedik]

also good idea 👍

[dgrammatiko]

Reading the specs of the preview image:
A thumbnail preview image should be 206 pixels in width and 150 pixels high
A preview image should be 640 pixels in width and 388 pixels high
Popover will get meshy with this image size.
You think that modal with <iframe class="iframe" src="/templates/beez3/template_preview.png” is unacceptable?

[Fedik]

have a doubt in it ... maybe someone else know better ..
ok, the test will show 😉

[dgrammatiko]

Here is what I got:

IE not available in this setup...

[zoom009]

@test

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/4645.

[suredweb]

@test It look good +1

[gunjanpatel]

Moving to RTC as we have two successful tests.
Thanks @rajeshstarlite for reporting.

[Symatic]

look good here

[dgrammatiko]

One short comment for PLT: @Bakual @betweenbrain @dbhurley @infograf768
This PR as well as the other ones dealing with the conversion of admin side modals to bootstrap [ #4661 #4575 #4563 ] were done primarily for isis but with very little effort (2 lines in less and some styling of a in an layout override) it WILL BE a very good fit for hathor as well. And here is the proof:
This PR with admin template hathor:

And here:

With only these additions to template.less:

So why do i write this?
If you decide that this is something that fits the project, and give me some reasonable deadline, I will provide all the needed code (which is not that much anyway) for Hathor compatibility.

[Bakual]

@dgt41 Feel free to create a PR for that. We don't have deadlines. If it isn't ready for 3.4, then it can go fine into 3.5.

[infograf768]

PR has to be updated to current staging

[helvecio]

@test Modal is responsive up to a certain point, then it dissappears. Tested locally on a desktop computer using FF. I think that the image should also be responsive, scaling down to still be visible.

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/4645.

[dgrammatiko]

@helvecio You are right, but this cannot happen before #5087 gets merged...