Skip to content

Commit

Permalink
Updating anchorjs, better handling when linking to an anchor that isn…
Browse files Browse the repository at this point in the history 
…'t in the TOC
  • Loading branch information
@itsderek23
itsderek23 committed Nov 29, 2017
1 parent 5904a65 commit a8f2b7c
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 18 deletions.
8 changes: 7 additions & 1 deletion source/javascripts/app/_toc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,13 @@
ignoreSelector: '.toc-ignore',
highlightOffset: 60,
scrollTo: -1,
scrollHistory: true,
/*
* Changed to false. Otherwise, when accesing a URL w/an anchor that doesn't appear in the TOC, the URL is adjusted to the closest
* parent anchor that appears in the TOC.
* Downside: the closest TOC element isn't highlighted immediately but it is the first scroll. Highlighting works if the anchor references
* an item in the TOC.
*/
scrollHistory: false,
hashGenerator: function (text, element) {
return element.prop('id');
}
Expand Down
25 changes: 13 additions & 12 deletions source/javascripts/lib/_anchor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
opts.icon = opts.hasOwnProperty('icon') ? opts.icon : '\ue9cb'; // Accepts characters (and also URLs?), like '#', '¶', '❡', or '§'.
opts.visible = opts.hasOwnProperty('visible') ? opts.visible : 'hover'; // Also accepts 'always' & 'touch'
opts.placement = opts.hasOwnProperty('placement') ? opts.placement : 'right'; // Also accepts 'left'
opts.ariaLabel = opts.hasOwnProperty('ariaLabel') ? opts.ariaLabel : 'Anchor'; // Accepts any text.
opts.class = opts.hasOwnProperty('class') ? opts.class : ''; // Accepts any class name.
// Using Math.floor here will ensure the value is Number-cast and an integer.
opts.truncate = opts.hasOwnProperty('truncate') ? Math.floor(opts.truncate) : 64; // Accepts any value that can be typecast to a number.
Expand Down Expand Up @@ -88,7 +89,7 @@
elements = _getElements(selector);

if (elements.length === 0) {
return false;
return this;
}

_addBaselineStyles();
Expand Down Expand Up @@ -134,11 +135,11 @@
readableID = elementID.replace(/-/g, ' ');

// The following code builds the following DOM structure in a more effiecient (albeit opaque) way.
// '<a class="anchorjs-link ' + this.options.class + '" href="#' + elementID + '" aria-label="Anchor link for: ' + readableID + '" data-anchorjs-icon="' + this.options.icon + '"></a>';
// '<a class="anchorjs-link ' + this.options.class + '" href="#' + elementID + '" aria-label="Anchor" data-anchorjs-icon="' + this.options.icon + '"></a>';
anchor = document.createElement('a');
anchor.className = 'anchorjs-link ' + this.options.class;
anchor.href = '#' + elementID;
anchor.setAttribute('aria-label', 'Anchor link for: ' + readableID);
anchor.setAttribute('aria-label', this.options.ariaLabel);
anchor.setAttribute('data-anchorjs-icon', this.options.icon);

if (visibleOptionToUse === 'always') {
Expand Down Expand Up @@ -230,14 +231,14 @@
}

// Note: we trim hyphens after truncating because truncating can cause dangling hyphens.
// Example string: // " ⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
urlText = text.trim() // "⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
.replace(/\'/gi, '') // "⚡⚡ Dont forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
.replace(nonsafeChars, '-') // "⚡⚡-Dont-forget--URL-fragments-should-be-i18n-friendly--hyphenated--short--and-clean-"
.replace(/-{2,}/g, '-') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-short-and-clean-"
.substring(0, this.options.truncate) // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-"
.replace(/^-+|-+$/gm, '') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated"
.toLowerCase(); // "⚡⚡-dont-forget-url-fragments-should-be-i18n-friendly-hyphenated"
// Example string: // " ⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
urlText = text.trim() // "⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
.replace(/\'/gi, '') // "⚡⚡ Dont forget: URL fragments should be i18n-friendly, hyphenated, short, and clean."
.replace(nonsafeChars, '-') // "⚡⚡-Dont-forget--URL-fragments-should-be-i18n-friendly--hyphenated--short--and-clean-"
.replace(/-{2,}/g, '-') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-short-and-clean-"
.substring(0, this.options.truncate) // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-"
.replace(/^-+|-+$/gm, '') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated"
.toLowerCase(); // "⚡⚡-dont-forget-url-fragments-should-be-i18n-friendly-hyphenated"

return urlText;
};
Expand Down Expand Up @@ -331,4 +332,4 @@
}

return AnchorJS;
}));
}));
18 changes: 13 additions & 5 deletions source/layouts/layout.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,14 @@ under the License.
</div>
</body>
<script>
/* From AnchorJS docs: Don't add anchors on later events, like $(document).ready() or window.onload as some browsers will attempt to jump to your ID before AnchorJS can add it to the page.
*/
/**
* AnchorJS v3.2.0 options and selector
*/
anchors.options.placement = 'right';
anchors.add('.content > h2, .content > h3, .content > h4');

$.ajax({
url: "http://apm.scoutapp.com/latest_gem_version",
dataType: "jsonp"
Expand All @@ -147,13 +155,13 @@ under the License.
* AnchorJS v3.2.0 options and selector
*/

(function (global) {
'use strict';
anchors.options.placement = 'right';
// (function (global) {
// 'use strict';
// anchors.options.placement = 'right';

anchors.add('.content > h2, .content > h3, .content > h4');
// anchors.add('.content > h2, .content > h3, .content > h4');

})(window);
// })(window);

</script>
</html>

0 comments on commit a8f2b7c

Please sign in to comment.