Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Bootstrap Anchor plugin #16248
I'd first like to preface this with a little about myself. I am the primary maintainer for the Drupal Bootstrap base-theme. It currently has over 60k installs, so needless to say we get a lot of our own issues.
Recently, I started the task of trying to tackle better anchor and scrolling support in the base-theme. Support for anchors or scrolling to them has always been a big pain, for not only me, but also a lot of others; especially when dealing with fixed navbars [jsbin].
The code I currently have in the project was rather hack-ish and completely un-configurable (my feeble attempt to satisfy a growing issue), so I set out to tackle this once and for all [https://www.drupal.org/node/2462645]. I've poured over countless blogs, docs, support forums and even found a few in this project's issue queue [#193, #1768, #11854].
The "solutions" vary from CSS to JS, but more often than not require at least some sort of manual configuration for it to work with that specific theme/offset requirement.
Ultimately though, I've determined that a CSS-only solution just doesn't really cut it; especially when dealing with dynamic and varying content as such in CMS framework like Drupal. So, I've created the following JS based plugin instead:
In an effort to offset the "cost" for using JS, I was also inspired with the recent addition using anchor.js for Bootstrap's own documentation (#14897, #15491). This got me to thinking how this could easily be expanded from Bootstrap's own Tooltip plugin, like Popovers are. What makes it even more enticing is that there has been a
Since both Tooltips and Popovers are completely opt-in with no data API support, it made sense to follow in that direction; especially for those who still want/need a CSS-only solution.
My ultimate goal/desire is to merge this upstream into Bootstrap directly. I'm sure this will be a daunting task which is why I'm creating this issue now to get some feedback and eyes on this plugin so it can be flushed out a bit more. I'm still working on documentation of all the new options, so bare that in mind.
I look forward to y'alls feedback!
I personally doubt the Core Team would be interested in getting into the same business as Anchor.js when Anchor.js itself already does a fine job.
As for #1768 & friends, you might have more traction on that front, although we're fairly reluctant to add more jQuery plugins at this point. I too wish there was a good solution to that bug though.
Except that Anchor.js isn't bundled with Bootstrap. This is about providing and out-of-the-box native Bootstrap plugin... not relying on yet another 3rd party external library that people will have to download, install and configure in addition to.
That's certainly debatable. It's lightweight and works well for simple sites, sure, but also at the cost of being easily configurable in case complexities arise.
It doesn't use a template for inserting existing markup that a framework (like Bootstrap) already has available and the only way to replace the "icon" is to override/replace the CSS it provides. It's ID generation logic could also use some work.
I'm really not trying to knock it, in fact it was in part responsible for the discovery process that led to this plugin. It certainly has it's use cases, but I wouldn't have built what I did if it did a "good" enough job.
I would like to make it clear that this plugin is a pure extension on top of the existing Bootstrap tooltip plugin. It is and was not an Anchor.js rip-off, just inspired by it as well as Bootstrap's existing Tooltip plugin.
I think you're missing the point of the plugin. It's goal is to really tie two concepts together: anchors and links to anchors (anchor links). By doing so, they're aware of each other and can work together in harmony to provide a more cohesive anchor/scrolling solution.
Sure. I'm not suggesting that this should be in the next release. It's currently not, by any means, "production" ready. In fact, I imagined that it would be BS4 in all reality (with the separate repo for BS3 support/prototyping).
Like I said above, I opened this issue for exposure and to get viable feedback. I was hoping to have more of a positive feedback and to move forward rather than defending a solution to a problem that has been quite evident for quite some time now.
I'm certainly open to suggestions, improvements and even changing some fundamental aspects about the plugin, it's not set in stone. I urge people to seriously consider this proposal rather than simply dismissing it outright because of "simpler" existing plugins.
Just speaking generally: There is a limit to what we can bundle, both due to the amount of effort required (e.g. I'm doubtful that Bootstrap itself will ever include a datepicker; they're just too damn complex and we already have our work cut out for us just maintaining the existing widgets) and due to fears of bloat (which we're already occasionally accused of with just our current set of widgets).
Anyway, I'll be interested to see what the rest of the team says about the proposal.
I'm rather curious as to the hesitation. Have you even looked at the code and demo yet? I've already done most of the ground work...
I agree, but this isn't about just adding a arbitrary feature, it's also a solution to an issue that this framework introduces in the first place by providing a fixed navbar.
It's kind of like saying:
I will gladly accept sole responsibility for maintaining this specific plugin it if it were ever to come to that. Somehow though, I doubt that will happen considering it's already built upon and in the same format as the Tooltip plugin.
Yes, I would be too.
@markcarver A few things:
It's interesting to me that you get a lot of requests for the feature in your Drupal theme. Forgive me, but it's been quite some time since I touched PHP or any CMS but is that a common sort of feature in Drupal themes? I haven't seen it come up too often in Bootstrap's IRC channel or elsewhere, so it's interesting to me that it'd be a requested feature elsewhere.
I'd also be interested if it's the sort of plugin other theme developers might want to use.
Secondly, this is a bit unfair:
The docs note that using fixed navbars requires some padding adjustments. While that doesn't cover every combination of components and HTML on a page (a fixed navbar and anchors to IDs in this specific instance). Solving that problem is usually done simply with an offset on the click.
Bootstrap-anchor does much more than solve that one issue, though, which brings me to my third thing. Adding features, especially full-fledged plugins, need to be evaluated in terms of long-term maintenance costs (it's great that you're offering to support it, but it's also no guarantee, unfortunately), added complexity (you'll be surprised by how authors use Bootstrap in unexpected ways) and package costs (like @cvrebert pointed out, Bootstrap already gets flack for being heavy in many ways).
Anyway, I'm not saying
I wouldn't say it's "common" per se, but it certainly more of a prevalent issue when Drupal modules like the Administration Menu add their own fixed nav and increases the
I think that's because people who are in the business of starting with Bootstrap directly (i.e. reading the docs, in the IRC channel) are generally themers/site builders or at the very least able to understand that there will be a minimal amount of effort in configuring their "theme".
The Drupal Bootstrap base-theme's sole purpose is to bridge that gap between the dynamic aspect of Drupal and the Bootstrap framework. One of the main reasons this base-theme has risen to become very popular (currently third top Drupal theme) in such a short amount of time is because it allows non-themers to configure their Bootstrap theme in an easy to use administrative UI.
I understand that I come from a unique perspective and it's partially a unique issue to us. Users choose Drupal Bootstrap because the framework is popular. The don't always choose it because they know the little intricacies/issues that come with choosing their fixed navbar type from the UI:
These types of users are not always skilled CSS/JS ninjas, so when they see that there's an issue with their anchor's "Solving that problem is usually done simply with an offset on the click" is really not always as "simple" as it sounds. Which is why I've been working on a way to assist with/fix this problem.
Yes, I understand and acknowledged this fact up front as one of the reasons for offsetting the "cost" of using a JS based solution to the scrolling issue by expanding upon Bootstrap's Tooltip plugin with anchor links.
Also, again, it goes further than just "adding in another feature" really. The two work in together in harmony. By building the plugin with the concept of "anchors" and "anchor links", it allows for a more cohesive UX in addressing "What happens when I click an anchor on this page?".
I do find it a little ironic though that even the docs suddenly had a need for them, but there wasn't anything native in Bootstrap to do it so a third party plugin was used instead.
I really do understand all of this and agree with it, believe me, I do. I'm not suggesting this plugin is just thrown in willy nilly without any sort of evaluation, game plan or what have you. I think the real purpose of why I opened this issue in the first place is really being lost here.
I'm not saying it can't be either. I opened this issue to get evaluation and feedback on the plugin itself, not quarrel over semantics. Yes, I said it was my goal/desire to ultimately make this a core plugin, but who knows, maybe that won't be the case and I'll just keep it as a separate contrib plugin. That is certainly fine by me.
All I was looking for really was "Wow that's cool... let's work on making it better! Maybe it's something that does have merit to pull into core."... you know FOSS, not getting smacked down for having an idea on how to fix a very real issue.
I'm honestly half tempted to just close this issue and just continue developing it as a contrib plugin if this is going to be the attitude moving forward
Your plugin looks and feels awesome in my super quick tests, so props on that front. I'll try to address as much of your post and the replies here as I can.
Tooltips and popovers are opt-in do to performance issues with detecting
Your goal and feedback
Right on, a bold endeavor to say the least :). I think @cvrebert, as a core team member, covered the generalities quite well, though I think you've mistaken some of his comments as overly dismissive. He's outlined that:
You didn't get any real feedback on your own plugin, but that's not really something we're here to provide unfortunately. At least, not in a structured or timely way that would be of much use to yourself. Looking at the demo and docs though, it seems to work quite well and is a decently structured and focused plugin. All around, it seems great.
You've offered to maintain it, but that's not enough. Putting it in the main repo means committing to it and supporting it as a team. Bug reports, further feature development, and documentation all come into play there. I'm not saying you wouldn't be up to it, but we might not be. That's not meant to be dick-ish, it's just matter-of-fact.
No one has smacked you down. One team contributor and one community member voiced their opinions. Their questions and comments are just as valid as your own. While you've very clearly asked for feedback, you also very clearly stated you'd like this to be part of the core project. Two folks have focused on the latter while reviewing this thread.
Lastly, shifting gears back to the plugin itself, it's a damned fine plugin. I'd like to see it continue as a community project as I don't think it's something we'd like to see addressed with Bootstrap. Yes, the fixed navbar introduces a potential need for this. However, that's not unique to our navbars—damned near every component likely introduces a potential need for n number of edge cases, extensions, etc.
Please do continue to develop and share it with folks, but it won't be part of Bootstrap's core (not in v3 or v4, not at this point at least). Please also continue to use this thread to gather feedback from folks if you wish. I'd love if more of our team chimed in, but we're all on different schedules and what not.
Hope that helps some.