? ? Success

User tests: Successful: Unsuccessful:

avatar dgt41
dgt41
18 Aug 2016

Pull Request for Issue # .

Summary of Changes

  • No more inline scipts for bootstrap components
  • Make Joomla's bootstrap (js) dependancy less strict, as the init script together with the jlayouts dictate the js framework. For example someone can override bootstrap.js, bootstrap-init.js and the layouts and use Foundation or Ukit or any other framework!

Testing Instructions

You will Need to apply #11671 before testing!!!

For modals, tooltips, popover and tabs apply this patch and navigate to isis template on the backend. Ensure that no javascript errors are logged and everything still works.
To test the other bootstrap components download this module https://github.com/dgt41/bootstrap-test/raw/gh-pages/bootstrap_test.zip install, publish in the front end and then visit that page (template must be protostar).
Enjoy!

B/C

There are few layouts that are touched, but joomla's b/c promise states that these are not B/C breaks. Down to PLT for a decision on that.

Documentation Changes Required

None.

Calling @andrepereiradasilva @Fedik to review
@laoneo this might help your quest for bootstrap 3

e598eaf 12 Nov 2015 avatar n9iels CS
avatar joomla-cms-bot joomla-cms-bot - change - 18 Aug 2016
Category Layout Libraries JavaScript
avatar dgt41 dgt41 - open - 18 Aug 2016
avatar dgt41 dgt41 - change - 18 Aug 2016
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 18 Aug 2016
Labels Added: ?
avatar yvesh
yvesh - comment - 18 Aug 2016

@dgt41 looks like you also need to update the php unit tests accordingly.. Travis is complaining

avatar dgt41
dgt41 - comment - 18 Aug 2016

@yvesh yes that's the fun part ?

avatar joomla-cms-bot joomla-cms-bot - change - 18 Aug 2016
Category Layout Libraries JavaScript Layout Libraries JavaScript Unit Tests
avatar joomla-cms-bot joomla-cms-bot - change - 18 Aug 2016
Labels Added: ?
avatar dgt41 dgt41 - change - 18 Aug 2016
The description was changed
avatar dgt41 dgt41 - change - 18 Aug 2016
The description was changed
avatar C-Lodder
C-Lodder - comment - 18 Aug 2016

@dgt41 - I would suggest defining $(this) as a variable (var $self = $(this)) if it's used multiple times in the same function

Before:

var tooltipsSelector = $(this).data('selector'),
    animation = $(this).data('animation'),
    html  = $(this).data('html'),
    placement = $(this).data('placement'),
    title = $(this).data('title'),
    selector2 = $(this).data('other-selector'),
    trigger = $(this).data('trigger'),
    delay = $(this).data('delay'),
    container = $(this).data('container'),
    template = $(this).data('template'),
    $onshow = $(this).data('on-show'),
    $onshown = $(this).data('on-shown'),
    $onhide = $(this).data('on-hide'),
    $onhidden = $(this).data('on-hidden');

After:

var $self = $(this),
    tooltipsSelector = $self.data('selector'),
    animation = $self.data('animation'),
    html = $self.data('html'),
    placement = $self.data('placement'),
    title = $self.data('title'),
    selector2 = $self.data('other-selector'),
    trigger = $self.data('trigger'),
    delay = $self.data('delay'),
    container = $self.data('container'),
    template = $self.data('template'),
    $onshow = $self.data('on-show'),
    $onshown = $self.data('on-shown'),
    $onhide = $self.data('on-hide'),
    $onhidden = $self.data('on-hidden');

Sorry to be nit-picky, but a performance decrease springs to mind when I see creating the same jQuery object loads of times

avatar C-Lodder
C-Lodder - comment - 18 Aug 2016

@dgt41 - You've made some mistakes with $self. There will be some instances where you need to redefine it as it's out of scope:

var $self = $(this);
$('.modalTooltip').each(function(){
    var attr = $self.attr('data-placement');
});

As you can see from the above code, attr will not represent the data-placement attribute value for $('.modalTooltip') because you've defined $self outside each(function() { ...

If you want me to re-do it for you and put it on PasteBin, let me know and I'll send it over

avatar dgt41
dgt41 - comment - 18 Aug 2016

@C-Lodder thanks, I didn't pay much attention I guess

avatar mbabker
mbabker - comment - 18 Aug 2016

This is exactly why JHtml has a registered callback system.

If you're hell bound and determined to move everything to layouts then JHtml::register(), JHtml::unregister(), JHtml::isRegistered(), JHtml::_(), JHtml::call(), and JHtml::extract() should be deprecated and everything refactored to just call the methods directly.

Until that happens, I honestly just see this PR as adding more complexity to an already complex and poorly constructed system in general. We've already merged a ton of crap code and even crappier layout structures, can we stop doing this? There is no freakin' reason at all to have a layout that has nothing but a closing div or nothing but pure PHP function calls.

avatar dgt41
dgt41 - comment - 18 Aug 2016

@mbabker I reverted that part
@mbabker are you against this PR or was that only the part with the JHtml::_() ?

avatar Fedik
Fedik - comment - 18 Aug 2016

@dgt41 you know I am against such stuff, against use an empty element to keep the options :neckbeard:
it have no profit, really

it force +1 DOM search for each feature, and work with DOM always slower.
Here is huge drawback if compare to inline script: All code bootstrap-init.js will be always executed. Example DOM query $('.joomla-accordion') will be always run, even if accordion not exist on the page, and there more such queries in the file.

And data-blabla="" should be assigned to the element where it used (instead of empty random element), otherwise use scriptOptions.

avatar dgt41
dgt41 - comment - 18 Aug 2016

@Fedik Flexibility comes at a cost. This PR allows overriding of some hidden in the bootstrap.php code. Could it be done otherwise? Yes! In my code I override the bootstrap.php altogether. Maybe this could be broken to individual scripts per component as @yvesh suggested! Then we don't have useless empty elements. About the span/data: in some cases is really hard to not go this way. The idea here was to give some flexibility to template creators to move from 2.3.2 to 3 with minimum effort...

avatar Fedik
Fedik - comment - 18 Aug 2016

This PR allows overriding of some hidden in the bootstrap.php code

yes I understood it, but the cost is to height, for my opinion ?
There should be a better way, I try to show you some example, in near future, I hope ?

I tried similar in #6357, there "bootstrap feature" runs only if it requested

avatar dgt41
dgt41 - comment - 18 Aug 2016

@Fedik I forgot about #6357, yes that's a better BUT requires the event system which is not available (and probably won't be for 3.x)

avatar Fedik
Fedik - comment - 19 Aug 2016

@dgt41 check #11671,
can take #6357 without Joomla.Behavior part,
mean only behavior-xxxx.js files and changes in /html/ and do something like:

var accordion = Joomla.getOptions('bootstrap.accordion');
if(accordion){
  // Set up Bootstrap Accordion feature
}

In result we do not have useless DOM query, and do not have inline JavaScript ?

avatar dgt41
dgt41 - comment - 20 Aug 2016
avatar dgt41 dgt41 - change - 20 Aug 2016
The description was changed
avatar mbabker mbabker - change - 20 Aug 2016
Category Layout Libraries JavaScript Unit Tests JavaScript Layout Libraries
avatar joomla-cms-bot joomla-cms-bot - change - 20 Aug 2016
Category Layout Libraries JavaScript Layout Libraries JavaScript Unit Tests
avatar mbabker mbabker - change - 20 Aug 2016
Labels Removed: ?
avatar joomla-cms-bot joomla-cms-bot - change - 20 Aug 2016
Labels Added: ?
avatar n9iels
n9iels - comment - 20 Aug 2016

If I add options to the carousel, like this JHtml::_('bootstrap.carousel', 'myCarousel', array("interval" => 500)); nothing change...

Before I changed the interval to 500 the slider slides approximately every 5 second. After I change the interval to 500 this is still the same.

avatar dgt41
dgt41 - comment - 20 Aug 2016

@n9iels I think the problem is that the number is parsed as text, I will review the code tomorrow. Thanks

avatar dgt41
dgt41 - comment - 23 Aug 2016

@n9iels myCarousel is an ID or a class? you have to specified that

avatar n9iels
n9iels - comment - 23 Aug 2016

I did not specified with a # or something like that. The case I described was based on you example module.

avatar dgt41
dgt41 - comment - 4 Sep 2016

Oops something went horribly wrong here

avatar dgt41 dgt41 - change - 4 Sep 2016
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2016-09-04 15:01:31
Closed_By dgt41

Add a Comment

Login with GitHub to post a comment