Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added optional overlay for alerts #136

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added optional overlay for alerts #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c504b8
Added optional overlay for alerts so desktop users can click anywhere to
mrkmg Dec 7, 2017
8858ef2
Fixed missing removeOverlay calls
mrkmg Dec 12, 2017
6ba76a1
Fixed missing removeOverlay calls
mrkmg Dec 12, 2017
201f862
Fixes bug with overlay causing problems with alert popup
mrkmg Dec 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,8 @@ notie.alert({
text: String,
stay: Boolean, // optional, default = false
time: Number, // optional, default = 3, minimum = 1,
position: String // optional, default = 'top', enum: ['top', 'bottom']
position: String, // optional, default = 'top', enum: ['top', 'bottom']
overlay: Boolean // optional, default = false
})

notie.force({
Expand Down Expand Up @@ -329,6 +330,7 @@ $notie-color-neutral: #A0A0A0;
// Showing all available options with defaults
notie.setOptions({
alertTime: 3,
alertOverlay: false,
dateMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
overlayClickDismiss: true,
overlayOpacity: 0.75,
Expand Down
58 changes: 35 additions & 23 deletions dist/notie.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,41 +11,41 @@
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};

/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {

/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;

/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };

/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/
/******/ // Flag the module as loaded
/******/ module.l = true;

/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }


/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;

/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;

/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };

/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
Expand All @@ -56,7 +56,7 @@ return /******/ (function(modules) { // webpackBootstrap
/******/ });
/******/ }
/******/ };

/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
Expand All @@ -65,13 +65,13 @@ return /******/ (function(modules) { // webpackBootstrap
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };

/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";

/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
Expand Down Expand Up @@ -104,6 +104,7 @@ var positions = {

var options = {
alertTime: 3,
alertOverlay: false,
dateMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
overlayClickDismiss: true,
overlayOpacity: 0.75,
Expand Down Expand Up @@ -232,6 +233,7 @@ var removeFromDocument = function removeFromDocument(id, position) {
};

var addOverlayToDocument = function addOverlayToDocument(owner, position) {
removeOverlayFromDocument();
var element = document.createElement('div');
element.id = options.ids.overlay;
element.classList.add(options.classes.overlay);
Expand All @@ -254,10 +256,12 @@ var addOverlayToDocument = function addOverlayToDocument(owner, position) {

var removeOverlayFromDocument = function removeOverlayFromDocument() {
var element = document.getElementById(options.ids.overlay);
element.style.opacity = 0;
wait(options.transitionDuration).then(function () {
if (element.parentNode) element.parentNode.removeChild(element);
});
if (element) {
element.style.opacity = 0;
wait(options.transitionDuration).then(function () {
if (element.parentNode) element.parentNode.removeChild(element);
});
}
};

var hideAlerts = exports.hideAlerts = function hideAlerts(callback) {
Expand Down Expand Up @@ -286,7 +290,9 @@ var alert = exports.alert = function alert(_ref) {
_ref$stay = _ref.stay,
stay = _ref$stay === undefined ? false : _ref$stay,
_ref$position = _ref.position,
position = _ref$position === undefined ? options.positions.alert || position.top : _ref$position;
position = _ref$position === undefined ? options.positions.alert || position.top : _ref$position,
_ref$overlay = _ref.overlay,
overlay = _ref$overlay === undefined ? options.alertOverlay : _ref$overlay;

blur();
hideAlerts();
Expand All @@ -300,18 +306,24 @@ var alert = exports.alert = function alert(_ref) {
element.classList.add(options.classes.alert);
element.innerHTML = '<div class="' + options.classes.textboxInner + '">' + text + '</div>';
element.onclick = function () {
return removeFromDocument(id, position);
removeOverlayFromDocument();
removeFromDocument(id, position);
};

element.listener = function (event) {
if (enterClicked(event) || escapeClicked(event)) hideAlerts();
if (enterClicked(event) || escapeClicked(event)) {
hideAlerts();
}
};

addToDocument(element, position);

if (overlay) addOverlayToDocument(element);

if (time && time < 1) time = 1;
if (!stay && time) wait(time).then(function () {
return removeFromDocument(id, position);
removeOverlayFromDocument();
removeFromDocument(id, position);
});
};

Expand Down
Loading