ndla-article-scripts - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

es/domHelpers.js

@@ -8,3 +8,2 @@ /**
  */
-
 export var forEachElement = function forEachElement(selector, callback) {
@@ -58,2 +57,10 @@ var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   });
+};
+
+export var getElementOffset = function getElementOffset(element) {
+  var rect = element.getBoundingClientRect();
+  var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+  return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
 };

es/figureScripts.js

@@ -9,12 +9,29 @@ /**
 
-import { copyTextToClipboard } from 'ndla-util';
+import { copyTextToClipboard, uuid, noScroll } from 'ndla-util';
+import createFocusTrap from 'focus-trap';
+import jump from 'jump.js';
+
 import { findAncestorByClass, removeElementById, forEachElement } from './domHelpers';
 
+var trapInstances = {};
+
+var closeDialog = function closeDialog(figure) {
+  figure.classList.remove('c-figure--active');
+  var details = figure.querySelector('.c-figure__license');
+  details.setAttribute('aria-hidden', 'true');
+  noScroll(false);
+};
+
 export var addCloseFigureDetailsClickListeners = function addCloseFigureDetailsClickListeners() {
   forEachElement('.c-figure .c-figure__close', function (el) {
     var target = el;
+
     target.onclick = function () {
       removeElementById('c-license-icon-description');
-      target.parentNode.parentNode.classList.remove('c-figure--active');
-      target.parentNode.parentNode.querySelector('figcaption').classList.remove('u-hidden');
+      var figure = findAncestorByClass(target, 'c-figure');
+
+      var instance = trapInstances[figure.id];
+      if (instance) {
+        instance.deactivate();
+      }
     };
@@ -50,11 +67,38 @@ });
     var target = el;
+    var id = uuid();
+    var figure = findAncestorByClass(target, 'c-figure');
+    figure.id = id;
+
+    var details = figure.querySelector('.c-figure__license');
+    trapInstances[id] = createFocusTrap(details, {
+      onDeactivate: function onDeactivate() {
+        closeDialog(figure);
+      },
+      clickOutsideDeactivates: true
+    });
+
     target.onclick = function () {
-      removeElementById('c-license-icon-description');
-      var figure = findAncestorByClass(target, 'c-figure');
-      figure.classList.add('c-figure--active');
+      noScroll(true);
+      var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+      var figureHeight = figure.offsetHeight;
 
-      var figcaption = findAncestorByClass(target, 'c-figure__caption');
-      figcaption.classList.add('u-hidden');
+      jump(figure, {
+        offset: -((viewportHeight - figureHeight) / 2),
+        duration: 300,
+        callback: function callback() {
+          var instance = trapInstances[id];
+
+          if (instance) {
+            instance.activate();
+          }
+        }
+      });
+
+      setTimeout(function () {
+        details.setAttribute('aria-hidden', 'false');
+        removeElementById('c-license-icon-description');
+        figure.classList.add('c-figure--active');
+      }, 150);
     };
   });
 };

es/glossaryScripts.js

@@ -9,4 +9,6 @@ /**
 
-import { forEachElement } from './domHelpers';
+import jump from 'jump.js';
 
+import { forEachElement, getElementOffset } from './domHelpers';
+
 export var addShowGlossaryDefinitionClickListeners = function addShowGlossaryDefinitionClickListeners() {
@@ -20,2 +22,24 @@ forEachElement('.c-glossary-word__item', function (item) {
       var isHidden = !popup.classList.toggle('c-glossary-word__popup--visible');
+
+      if (!isHidden) {
+        var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        var popupHeight = popup.offsetHeight;
+        var popupTop = getElementOffset(popup).top;
+        var offset = 0;
+
+        var body = document.body;
+        var html = document.documentElement;
+        var documentHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+
+        if (popupTop + popupHeight < documentHeight) {
+          offset = -((viewportHeight - popupHeight) / 2);
+        } else {
+          offset = popupHeight;
+        }
+
+        jump(popup, {
+          duration: 300,
+          offset: offset
+        });
+      }
       popup.setAttribute('aria-hidden', isHidden);
@@ -22,0 +46,0 @@ };

lib/domHelpers.js

@@ -13,3 +13,2 @@ 'use strict';
  */
-
 var forEachElement = exports.forEachElement = function forEachElement(selector, callback) {
@@ -63,2 +62,10 @@ var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   });
+};
+
+var getElementOffset = exports.getElementOffset = function getElementOffset(element) {
+  var rect = element.getBoundingClientRect();
+  var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+  return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
 };

lib/figureScripts.js

@@ -10,4 +10,14 @@ 'use strict';
 
+var _focusTrap = require('focus-trap');
+
+var _focusTrap2 = _interopRequireDefault(_focusTrap);
+
+var _jump = require('jump.js');
+
+var _jump2 = _interopRequireDefault(_jump);
+
 var _domHelpers = require('./domHelpers');
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
@@ -21,9 +31,23 @@ * Copyright (c) 2016-present, NDLA.
 
+var trapInstances = {};
+
+var closeDialog = function closeDialog(figure) {
+  figure.classList.remove('c-figure--active');
+  var details = figure.querySelector('.c-figure__license');
+  details.setAttribute('aria-hidden', 'true');
+  (0, _ndlaUtil.noScroll)(false);
+};
+
 var addCloseFigureDetailsClickListeners = exports.addCloseFigureDetailsClickListeners = function addCloseFigureDetailsClickListeners() {
   (0, _domHelpers.forEachElement)('.c-figure .c-figure__close', function (el) {
     var target = el;
+
     target.onclick = function () {
       (0, _domHelpers.removeElementById)('c-license-icon-description');
-      target.parentNode.parentNode.classList.remove('c-figure--active');
-      target.parentNode.parentNode.querySelector('figcaption').classList.remove('u-hidden');
+      var figure = (0, _domHelpers.findAncestorByClass)(target, 'c-figure');
+
+      var instance = trapInstances[figure.id];
+      if (instance) {
+        instance.deactivate();
+      }
     };
@@ -59,11 +83,38 @@ });
     var target = el;
+    var id = (0, _ndlaUtil.uuid)();
+    var figure = (0, _domHelpers.findAncestorByClass)(target, 'c-figure');
+    figure.id = id;
+
+    var details = figure.querySelector('.c-figure__license');
+    trapInstances[id] = (0, _focusTrap2.default)(details, {
+      onDeactivate: function onDeactivate() {
+        closeDialog(figure);
+      },
+      clickOutsideDeactivates: true
+    });
+
     target.onclick = function () {
-      (0, _domHelpers.removeElementById)('c-license-icon-description');
-      var figure = (0, _domHelpers.findAncestorByClass)(target, 'c-figure');
-      figure.classList.add('c-figure--active');
+      (0, _ndlaUtil.noScroll)(true);
+      var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+      var figureHeight = figure.offsetHeight;
 
-      var figcaption = (0, _domHelpers.findAncestorByClass)(target, 'c-figure__caption');
-      figcaption.classList.add('u-hidden');
+      (0, _jump2.default)(figure, {
+        offset: -((viewportHeight - figureHeight) / 2),
+        duration: 300,
+        callback: function callback() {
+          var instance = trapInstances[id];
+
+          if (instance) {
+            instance.activate();
+          }
+        }
+      });
+
+      setTimeout(function () {
+        details.setAttribute('aria-hidden', 'false');
+        (0, _domHelpers.removeElementById)('c-license-icon-description');
+        figure.classList.add('c-figure--active');
+      }, 150);
     };
   });
 };

lib/glossaryScripts.js

@@ -8,4 +8,18 @@ 'use strict';
 
+var _jump = require('jump.js');
+
+var _jump2 = _interopRequireDefault(_jump);
+
 var _domHelpers = require('./domHelpers');
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) 2017-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 var addShowGlossaryDefinitionClickListeners = exports.addShowGlossaryDefinitionClickListeners = function addShowGlossaryDefinitionClickListeners() {
@@ -19,2 +33,24 @@ (0, _domHelpers.forEachElement)('.c-glossary-word__item', function (item) {
       var isHidden = !popup.classList.toggle('c-glossary-word__popup--visible');
+
+      if (!isHidden) {
+        var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        var popupHeight = popup.offsetHeight;
+        var popupTop = (0, _domHelpers.getElementOffset)(popup).top;
+        var offset = 0;
+
+        var body = document.body;
+        var html = document.documentElement;
+        var documentHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+
+        if (popupTop + popupHeight < documentHeight) {
+          offset = -((viewportHeight - popupHeight) / 2);
+        } else {
+          offset = popupHeight;
+        }
+
+        (0, _jump2.default)(popup, {
+          duration: 300,
+          offset: offset
+        });
+      }
       popup.setAttribute('aria-hidden', isHidden);
@@ -28,8 +64,2 @@ };
   });
-}; /**
-    * Copyright (c) 2017-present, NDLA.
-    *
-    * This source code is licensed under the GPLv3 license found in the
-    * LICENSE file in the root directory of this source tree.
-    *
-    */
+};

package.json

 {
   "name": "ndla-article-scripts",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A collection of functions for making article content responsive (and interactive)",
@@ -31,3 +31,7 @@ "license": "GPL-3.0",
     "ndla-util": "^0.1.7"
+  },
+  "dependencies": {
+    "focus-trap": "^2.3.1",
+    "jump.js": "^1.0.2"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29179

increased by19.89%

Lines of code

615

increased by25.77%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Addedfocus-trap@^2.3.1

• + Addedjump.js@^1.0.2

• + Addedfocus-trap@2.4.6(transitive)

• + Addedjump.js@1.0.2(transitive)

• + Addedtabbable@1.1.3(transitive)