Problem/Motivation

The current implementation of the "Anchors" JavaScript is rather hack-ish at best and completely un-configurable at worst. This causes conflicts with existing plugins that implement their own click handlers on <a> elements that contain a hash (#).

Proposed resolution

Implement support for http://bootstrap-anchor.com

Remaining tasks

  1. Create plugin. Done - It's currently a separate repository located at https://github.com/markcarver/bootstrap-anchor
  2. Commit plugin to this project's repository
  3. Modify the admin settings UI to allow easier overrides via theme settings
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

markhalliwell’s picture

Title: Refactor "anchor" JavaScript into a proper plugin » Replace custom JS with the bootstrap-anchor plugin
Issue summary: View changes
Status: Active » Needs work

Ok, I've gone ahead and create the following plugin https://github.com/markcarver/bootstrap-anchor

You can view a demonstration of this plugin in action at http://bootstrap-anchor.com

Once the above remaining tasks are complete, I'll mark this issue as fixed and then release 7.x-3.1-beta3 so people can test it out much easier.

If need be, we can always revert whatever is committed in this issue. However, I imagine this is far superior than what is currently in the project.

Instead of creating issues here, please create them over at https://github.com/markcarver/bootstrap-anchor/issues (for now).

My ultimate goal/desire is to actually have this be an official Bootstrap plugin that ships with the framework itself. When/if that happens, we can remove the plugin from this project.

kingfisher64’s picture

I was looking for this feature - very cool indeed.

I'll gladly test it out if that will help.

markhalliwell’s picture

Issue summary: View changes

Added custom domain for plugin.

markhalliwell’s picture

Assigned: markhalliwell » neardark
Status: Needs work » Needs review
FileSize
20.44 KB
neardark’s picture

Assigned: neardark » markhalliwell
Status: Needs review » Needs work
+++ b/theme-settings.php
@@ -339,29 +339,86 @@ function bootstrap_form_system_theme_settings_alter(&$form, $form_state, $form_i
+    '#description' => t('Animates the page by smoothly scrolling to an anchor link target when clicked.<br/><kbd>smooth</kbd><code>data-smooth

'),

The smooth data-smooth could use a slight bit more explanation for beginners, such as "For smooth scrolling for individual anchors, add data-smooth to your code. Or perhaps just linking to the docs on the site.

That's the only thing I saw if you deem worth fixing up, otherwise it looks good and I'll merge it by end of day.

markhalliwell’s picture

Assigned: markhalliwell » neardark

@neardark, sorry. The above patch indeed "needs work", this was just what I had started to do. There are a ton more options that need to be added into the UI.

neardark’s picture

Ahh of course. Working on this now then.

sonicthoughts’s picture

stumbled on this as it was what i needed but the demo is not working for me in chrome (nothing on console). Anchors not working at all at http://bootstrap-anchor.com.

neardark’s picture

Assigned: neardark » Unassigned
FileSize
18.49 KB

Here's a start. Some notes:

  • Settings form partially complete. A few options may need to still be added. Some items still require descriptions. And finally, the ordering/grouping should be more logical. Settings in .info file also not complete. Beware.
  • Submit handler and validation not done.
  • In js_alter the settings are only partially complete.
  • Library detection not rigged up.
  • No JS done yet for activating the plugin.
  • Probably lots of stupid stuff on my part.
neardark’s picture

Assigned: Unassigned » markhalliwell
neardark’s picture

Assigned: markhalliwell » neardark
neardark’s picture

Assigned: neardark » markhalliwell
Status: Needs work » Needs review
FileSize
20.02 KB

OK, this is ready for some testing by anyone willing. You should note that a few options don't appear to be working, such as Normalize IDs and Anchor Offset. Will investigate further.

I did not commit Bootstrap Anchor to this repo -- instead the installation is for users to download and install Drupal libraries module and then place the Bootstrap Anchor in the sites/all/libraries (or anywhere in sites/* I suppose)

Status: Needs review » Needs work

The last submitted patch, 12: replace_custom_js_with-2462645-12.patch, failed testing.

neardark’s picture

Status: Needs work » Needs review
FileSize
35.18 KB

Now with libraries.inc

neardark’s picture

markhalliwell’s picture

Assigned: markhalliwell » Unassigned
Priority: Critical » Normal
Status: Needs review » Postponed
Parent issue: » #2550491: Create @BootstrapPlugin annotated plugin

Discussed this with @neardark in IRC. This issue really deserves to be fully flushed out (which neither of us really have time for right now). It shouldn't be rushed and shouldn't block a release.

We need a better way to implement "plugins" as a whole: not just for bootstrap-anchor, but also for others like bootstrap-select and bootstrap-datepicker.

Postponing this issue on the parent issue.

  • markcarver committed 552fd23 on 7.x-3.x
    "Anchor fix" still works even if disabled
    
    Issue #2462645: Replace...
  • markcarver committed 9ac9a45 on 7.x-3.x
    Make "anchor fix" disabled by default, show warning and disable UI...
markhalliwell’s picture

I've disabled the existing corrupt plugin by default (for new installations or sites that don't have saved settings in the DB or .info file).

If you need to enable/disable this feature, add the following to your .info file:

settings[bootstrap_anchors_fix] = 1
settings[bootstrap_anchors_smooth_scrolling] = 1

  • markcarver committed 5ae8ddf on
    "Anchor fix" still works even if disabled
    
    Issue #2462645: Replace...
  • markcarver committed 77b45b0 on
    Make "anchor fix" disabled by default, show warning and disable UI...
N20’s picture

I tried to enable the settings in my info file without any effect:

settings[bootstrap_anchors_fix] = 1
settings[bootstrap_anchors_smooth_scrolling] = 1

I'm using bootstrap-7.x-3.1

Do i need to install that plugin in libraries?

markhalliwell’s picture

N20’s picture

drush vdel theme_[my_bootstrap_subtheme]_settings worked. Thanks.

kumkum29’s picture

Hello,

I have enabled these settings of my info file :

settings[bootstrap_anchors_fix] = 1
settings[bootstrap_anchors_smooth_scrolling] = 1

and see in the settings of my theme that these options are enabled.

But if I use an anchor, I don't see the "Smooth effect". Maybe Have I omitted anything ?

Thanks for your replies.

markhalliwell’s picture

Title: Replace custom JS with the bootstrap-anchor plugin » Replace custom anchor JS with a "bootstrap-anchor" @BootstrapPlugin
Version: 7.x-3.x-dev » 8.x-3.x-dev
Category: Bug report » Feature request

I don't think this is going to happen in 7.x.

markhalliwell’s picture

Title: Replace custom anchor JS with a "bootstrap-anchor" @BootstrapPlugin » Create @BootstrapPlugin for "bootstrap-anchor"
markhalliwell’s picture

Version: 8.x-3.x-dev » 8.x-4.x-dev

Don't think this is going to happen for 8.x-3.x either.

jcnventura’s picture

Instead of drush vdel which will destroy your current settings you can also use

$ drush php
>>> $settings = variable_get('theme_[my_bootstrap_subtheme]_settings');
>>> $settings['bootstrap_anchors_fix'] = "1";
>>> $settings['bootstrap_anchors_smooth_scrolling'] = "1";
>>> variable_set('theme_[my_bootstrap_subtheme]_settings', $settings);

where [my_bootstrap_subtheme] is the name of your bootstrap sub-theme.

  • markcarver committed 5ae8ddf on 8.x-4.x
    "Anchor fix" still works even if disabled
    
    Issue #2462645: Replace...
  • markcarver committed 77b45b0 on 8.x-4.x
    Make "anchor fix" disabled by default, show warning and disable UI...
Freddy Rodriguez’s picture

Just Css:

html{scroll-behavior:smooth}

markhalliwell’s picture

Yeah, the plugin does a lot more than just smooth scrolling.

shelane’s picture

Status: Postponed » Closed (won't fix)

This theme will not be supported for Bootstrap 4. See alternative themes for this support.