feat: remove the 'touch' visibility option

.eslintrc.json

@@ -130,6 +130,7 @@
  "error",
  "never"
  ],
+ "space-before-function-paren": ["error", "never"],
  "space-unary-ops": [
  "error",
  {

anchor.js

@@ -2,7 +2,7 @@
 /* globals module:false */
 
 // https:/umdjs/umd/blob/master/templates/returnExports.js
-(function (root, factory) {
+(function(root, factory) {
  'use strict';
 
  if (typeof define === 'function' && define.amd) {
@@ -18,7 +18,7 @@
  root.AnchorJS = factory();
  root.anchors = new root.AnchorJS();
  }
-}(this, function () {
+}(this, function() {
  'use strict';
 
  function AnchorJS(options) {
@@ -31,7 +31,7 @@
  */
  function _applyRemainingDefaultOptions(opts) {
  opts.icon = Object.prototype.hasOwnProperty.call(opts, 'icon') ? opts.icon : '\uE9CB'; // Accepts characters (and also URLs?), like '#', '¶', '❡', or '§'.
- opts.visible = Object.prototype.hasOwnProperty.call(opts, 'visible') ? opts.visible : 'hover'; // Also accepts 'always' & 'touch'
+ opts.visible = Object.prototype.hasOwnProperty.call(opts, 'visible') ? opts.visible : 'hover'; // Also accepts 'always'
  opts.placement = Object.prototype.hasOwnProperty.call(opts, 'placement') ? opts.placement : 'right'; // Also accepts 'left'
  opts.ariaLabel = Object.prototype.hasOwnProperty.call(opts, 'ariaLabel') ? opts.ariaLabel : 'Anchor'; // Accepts any text.
  opts.class = Object.prototype.hasOwnProperty.call(opts, 'class') ? opts.class : ''; // Accepts any class name.
@@ -43,15 +43,6 @@
 
  _applyRemainingDefaultOptions(this.options);
 
- /**
- * Checks to see if this device supports touch. Uses criteria pulled from Modernizr:
- * https:/Modernizr/Modernizr/blob/da22eb27631fc4957f67607fe6042e85c0a84656/feature-detects/touchevents.js#L40
- * @return {Boolean} - true if the current device supports touch.
- */
- this.isTouchDevice = function() {
- return Boolean('ontouchstart' in window || window.TouchEvent || window.DocumentTouch && document instanceof DocumentTouch);
- };
-
  /**
  * Add anchor links to page elements.
  * @param {String|Array|Nodelist} selector - A CSS selector for targeting the elements you wish to add anchor links
@@ -69,7 +60,6 @@
  tidyText,
  newTidyText,
  anchor,
- visibleOptionToUse,
  hrefBase,
  indexesToDrop = [];
 
@@ -79,11 +69,6 @@
  // anchors.options = { visible: 'always'; }
  _applyRemainingDefaultOptions(this.options);
 
- visibleOptionToUse = this.options.visible;
- if (visibleOptionToUse === 'touch') {
- visibleOptionToUse = this.isTouchDevice() ? 'always' : 'hover';
- }
-
  // Provide a sensible default selector, if none is given.
  if (!selector) {
  selector = 'h2, h3, h4, h5, h6';
@@ -156,7 +141,7 @@
  hrefBase = this.options.base || hrefBase;
  anchor.href = hrefBase + '#' + elementID;
 
- if (visibleOptionToUse === 'always') {
+ if (this.options.visible === 'always') {
  anchor.style.opacity = '1';
  }
 
@@ -291,7 +276,6 @@
  if (typeof input === 'string' || input instanceof String) {
  // See https://davidwalsh.name/nodelist-array for the technique transforming nodeList -> Array.
  elements = [].slice.call(document.querySelectorAll(input));
- // I checked the 'input instanceof NodeList' test in IE9 and modern browsers and it worked for me.
  } else if (Array.isArray(input) || input instanceof NodeList) {
  elements = [].slice.call(input);
  } else {

docs/index.html

@@ -212,9 +212,9 @@ <h2>Options</h2>
  </tr>
  <tr>
  <td><code>visible</code></td>
- <td><code>hover</code> <br> <code>always</code> <br> <code>touch</code></td>
+ <td><code>hover</code> <br> <code>always</code></td>
  <td><code>hover</code></td>
- <td><code>hover</code> displays the anchor when hovering over the element.<br> <code>always</code> will always display the anchor link. <br> <code>touch</code> will <em>always</em> display anchors for devices that support touch events, and only display them via <em>hover</em> for devices that do not support touch events. This approximates touchscreen detection (but <a href="http://www.stucox.com/blog/you-cant-detect-a-touchscreen/">isn't 100% accurate</a>).</td>
+ <td><code>hover</code> displays the anchor when hovering over the element.<br> <code>always</code> will always display the anchor link.</td>
  </tr>
  <tr>
  <td><code>icon</code></td>

test/spec/AnchorSpec.js

@@ -517,16 +517,7 @@ describe('AnchorJS', function() {
  expect(opacity).toEqual('1');
  });
 
- it('`touch` invokes the `always` behavior for touch devices', function() {
- spyOn(anchors, 'isTouchDevice').and.returnValue(true);
- anchors.options.visible = 'touch';
- anchors.add('h1');
- opacity = document.querySelector('.anchorjs-link').style.opacity;
- expect(opacity).toEqual('1');
- });
-
- it('`touch` invokes the `hover` behavior for non-touch devices', function() {
- spyOn(anchors, 'isTouchDevice').and.returnValue(false);
+ it('`touch` invokes the `hover` behavior (a fallback for the legacy `touch` option)', function() {
  anchors.options.visible = 'touch';
  anchors.add('h1');
  opacity = document.querySelector('.anchorjs-link').style.opacity;

test/visual-check.html

@@ -41,8 +41,9 @@
  <section class="main">
  <h1 class="page-title">AnchorJS</h1>
  <div class="anchorjs-logo"></div>
- <p class="intro"><strong>Hover over each heading to see the anchor link produced by AnchorJS.</strong></p>
- <div class="content">
+ <div class="hover-anchors">
+ <p class="intro"><strong>Hover over each heading to see the anchor link produced by AnchorJS.</strong></p>
+
  <h1 id="test-id-1">H1 with ID</h1>
  <p>
  If the element being selected has an ID, AnchorJS will create anchors that link to that ID. For example, because the h1 above has an id of <code>test-id-1</code>, AnchorJS creates an anchor link with an href of <code>href="#test-id-1"</code>. Anchor links will always use relative paths.
@@ -97,14 +98,31 @@ <h4>Updating this project with npm is as easy as chocolate coconut pie</h4>
  <h1 data-anchor-id="section">Section Highlighting Example</h1>
  <p>The section including this paragraph should get highlighted when clicking the link.</p>
  </section>
+ </div>
+
+ <br />
+ <hr />
+ <br />
 
+ <div class="visible-anchors">
+ <p class="intro"><strong>The anchors below should be visible without hovering.</strong></p>
+
+ <h1>H1 Anchors that always show</h1>
+ <h2>H2 Anchors that always show</h2>
+ <h3>H3 Anchors that always show</h3>
+ <h4>H4 Anchors that always show</h4>
 
  </div>
  </section>
  <script src="../anchor.js"></script>
  <script>
- var selector = '.content h1, .content h2, .content h3, .content h4';
- anchors.add(selector);
+ const hoverAnchors = new AnchorJS();
+ const hoverSelector = '.hover-anchors h1, .hover-anchors h2, .hover-anchors h3, .hover-anchors h4';
+ hoverAnchors.add(hoverSelector);
+
+ const visibleAnchors = new AnchorJS({ visible: "always", placement: "left" });
+ const visibleSelector = '.visible-anchors h1, .visible-anchors h2, .visible-anchors h3, .visible-anchors h4';
+ visibleAnchors.add(visibleSelector);
  </script>
 </body>
 </html>