locize/dist/cjs/ui/highlightNode.js

This package adds the incontext editor to your i18next setup.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vars = require('../vars.js');
var ribbonBox = require('./elements/ribbonBox.js');
var highlightBox = require('./elements/highlightBox.js');
var dom = require('@floating-ui/dom');
var utils = require('./utils.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);

var selected = {};
function highlight(item, node, keys) {
  var rectEle = utils.getOptimizedBoundingRectEle(node);
  if (!item.highlightBox) {
    var box = highlightBox.HighlightBox(rectEle, vars.colors.highlight);
    document.body.appendChild(box);
    item.highlightBox = box;
  }
  if (!item.ribbonBox) {
    var _RibbonBox = ribbonBox.RibbonBox(keys),
      actions = _RibbonBox.box,
      arrowEle = _RibbonBox.arrow;
    document.body.appendChild(actions);
    dom.computePosition(rectEle, actions, {
      placement: 'right',
      middleware: [dom.flip({
        fallbackPlacements: ['left', 'bottom']
      }), dom.shift(), dom.offset(function (_ref) {
        var placement = _ref.placement,
          rects = _ref.rects;
        if (placement === 'bottom') return -rects.reference.height / 2 - rects.floating.height / 2;
        return 35;
      }), dom.arrow({
        element: arrowEle
      })]
    }).then(function (_ref2) {
      var x = _ref2.x,
        y = _ref2.y,
        middlewareData = _ref2.middlewareData,
        placement = _ref2.placement;
      Object.assign(actions.style, {
        left: "".concat(x, "px"),
        top: "".concat(y, "px"),
        display: 'inline-flex'
      });
      var side = placement.split('-')[0];
      var staticSide = {
        top: 'bottom',
        right: 'left',
        bottom: 'top',
        left: 'right'
      }[side];
      if (middlewareData.arrow) {
        var _middlewareData$arrow = middlewareData.arrow,
          _x = _middlewareData$arrow.x,
          _y = _middlewareData$arrow.y;
        Object.assign(arrowEle.style, _defineProperty__default["default"](_defineProperty__default["default"]({
          left: _x != null ? "".concat(_x, "px") : '',
          top: _y != null ? "".concat(_y, "px") : '',
          right: '',
          bottom: ''
        }, staticSide, "".concat(side === 'bottom' ? -18 : -25, "px")), "transform", side === 'bottom' ? 'rotate(90deg)' : side === 'left' ? 'rotate(180deg)' : ''));
      }
    });
    item.ribbonBox = actions;
  }
}
function highlightUninstrumented(item, node, keys) {
  var id = item.id;
  if (selected[id]) return;
  var rectEle = utils.getOptimizedBoundingRectEle(node);
  if (!item.highlightBox) {
    var box = highlightBox.HighlightBox(rectEle, vars.colors.warning);
    document.body.appendChild(box);
    item.highlightBox = box;
  }
}
function selectedHighlight(item, node, keys) {
  var id = item.id;
  var rectEle = utils.getOptimizedBoundingRectEle(node);
  if (!item.highlightBox) {
    var box = highlightBox.HighlightBox(rectEle, vars.colors.highlight, vars.colors.gray);
    document.body.appendChild(box);
    item.highlightBox = box;
  }
  selected[id] = true;
}
function recalcSelectedHighlight(item, node, keys) {
  if (!selected[item.id]) return;
  resetHighlight(item, node, keys, false);
  selectedHighlight(item, node);
}
function resetHighlight(item, node, keys) {
  var ignoreSelected = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
  var id = item.id;
  if (ignoreSelected && selected[id]) return;
  if (item.highlightBox) {
    document.body.removeChild(item.highlightBox);
    delete item.highlightBox;
  }
  if (item.ribbonBox) {
    document.body.removeChild(item.ribbonBox);
    delete item.ribbonBox;
  }
  delete selected[id];
}

exports.highlight = highlight;
exports.highlightUninstrumented = highlightUninstrumented;
exports.recalcSelectedHighlight = recalcSelectedHighlight;
exports.resetHighlight = resetHighlight;
exports.selectedHighlight = selectedHighlight;