0

Cannot really JSFiddle this, but this fiddle can give the idea: http://jsfiddle.net/xBc5a/ GCT = Google Closure Tools

<nav class="navbar navbar-inverse navbar-fixed-top role=navigation">
<div id="navbar-container" class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
        <a class="navbar-brand" href="#">Codeshelf</a>
    <a class="navbar-brand" href="#"><img src="favicon.gif" width="24" height="24"></a>

    </div>
    <!-- links, dropdowns -->
</div>
<!-- /.container -->
</nav>

On that, no drop downs or links for simplicity, but you see the collapse functionality. - Make window very wide: no button on the right. - Make window narrower, and the navbar "collapses", giving the button on the right. - Make window wide again, and the button on the right disappears. (If there were drop downs and links, they would come back on the navbar.)

The complaint is this: Using Bootstrap 3.0.3 in my application, and GCT, the compile process breaks the navbar as described next: - Make window wider or narrower. Works ok. When wide, the drop downs and links work. - However, once you touch the button in collapsed mode, the navbar gets broken. -- The links and drop downs do not come. -- And once the window goes wide again, the collapsed button remains. All functionality is lost.

If I do not do the GCT compile, the functionality is perfect. I would guess that in Bootstrap javascript code, there need to be some externs or goog.exportSymbol() defined. Has anyone figured out how to make navbar work with compiled GCT?

More information: May 1

I changed to a non-collapsing navbar as follows:

    <div class="navbar-header">
    <!--  comment out the collapse button until it works in compiled code
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    -->

And also change the navbar collapse class to something that twitter css does not have

    <!-- <div class="navbar-collapse collapse">  -->
    <div class="mystaticnavbar">

The result "works" as expected for compiled or uncompiled. The navbar still transforms on narrower screen, but it does not collapse to the single button. Rather, the links and drop downs (missing in the fiddle) come vertically left, as in the expanded mobile format. Not good as the navbar is hiding much of the available page. But at least this does not lose all functionality when clicked. (Only if closure-compiled.)

All that to say, the problem is most likely isolated to the button.

JonR
  • 113
  • 1
  • 1
  • 6
  • I don't see any JavaScript in your question so I'm not sure how this relates to the Closure Compiler. – Tyler May 08 '14 at 04:51
  • Thanks, MatrixFrog, for asking. I claim that the navbar collapse works fine uncompiled but not compiled. I would guess that is function of twitter bootstrap js code. I have upgraded to latest bootstrap and latest closure compiler. I would love to get a comment from someone saying their collapsing navbar works when compiled. – JonR May 12 '14 at 18:04
  • Solved, sort of. Modified the bootstrap in my application. Collapse.prototype.show = function () { ... // 2014.05.13 jonR. $ is function(selector, context). Uncompiled "camelCase" is there. Compiled (advanced) not. // the point of it is to create the word "scrollHeight", so let's directly do that. Probably misses a horizontal // case irrelevant to our application. //var scrollSize = $.camelCase(['scroll', dimension].join('-')) var scrollSize = "scrollHeight" Hopefully a bootstrap developer can do the proper thing. – JonR May 13 '14 at 15:24

0 Answers0