"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = indicate;

var _aphrodite = require("aphrodite");

/*
 * Copyright (C) 2018 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */
// margin can be overridden, but default is 3px
var MARGIN = 3; // show the indicator over the target with specified margin

function indicate(region) {
  var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MARGIN;
  var el = document.createElement("div"); // add margin to region and lift it in front

  Object.assign(el.style, {
    width: region.width + 2 * margin + "px",
    height: region.height + 2 * margin + "px",
    left: region.left - margin + "px",
    top: region.top - margin + "px"
  }); // start hidden and animate a fade in

  el.className = (0, _aphrodite.css)(styles.indicator, styles.enter);
  document.body.appendChild(el);
  el.className = (0, _aphrodite.css)(styles.indicator, styles.enter, styles.active); // fades out slowly after a half second

  var to = setTimeout(function () {
    el.className = (0, _aphrodite.css)(styles.indicator, styles.leave);
  }, 900); // when moused over dismiss with quick fade

  el.addEventListener("mouseover", function () {
    clearTimeout(to);
    el.className = (0, _aphrodite.css)(styles.indicator, styles.leaveFast);
  }); // destroy element

  setTimeout(function () {
    return document.body.removeChild(el);
  }, 2000);
  return el;
}

var styles = _aphrodite.StyleSheet.create({
  indicator: {
    border: "2px solid #870",
    backgroundColor: "#fd0",
    position: "absolute",
    display: "block",
    borderRadius: "5px",
    zIndex: 999999
  },
  enter: {
    opacity: 0
  },
  active: {
    transition: "opacity 0.4s",
    opacity: 0.8
  },
  leave: {
    transition: "opacity 0.6s",
    opacity: 0
  },
  leaveFast: {
    transition: "opacity 0.2s",
    opacity: 0
  }
});