diff --git a/README.md b/README.md index 80996ca..a08ea1d 100644 --- a/README.md +++ b/README.md @@ -27,9 +27,10 @@ To customize a Snackbar, pass the function a JS object with any of the following | status | `string` | | Possible statuses include "success", "green", "warning", "alert", "orange", "danger", "error", "red." All other values will default to the blue "info" status| | actions | `array` | `[]` | See [Actions](#actions)| | fixed | `boolean` | `false` | `true` indicates a `positioning:fixed;` be added to the container| -| position | `string` | `"br"` | Possible values are "br", "tr", "tl", or "bl"| +| position | `string` | `"br"` | Possible values are `"br"`, `"tr"`, `"tc"`, `"tm"`, `"bc"`, `"bm"`, `"tl"`, or `"bl"` | | container | `DOMNode` or `string`| `document.body` | If a string is provided, the string is passed to `querySelector` to find the container| -| width | `string` | | Any valid CSS value for width | +| width | `string` | | Any valid CSS value for `width` | +| speed | `string` or `number` | | Any valid CSS value for `transition-duration` or a duration in milliseconds | ### Actions diff --git a/dist/js-snackbar.css b/dist/js-snackbar.css index 518d997..8cf0856 100644 --- a/dist/js-snackbar.css +++ b/dist/js-snackbar.css @@ -17,6 +17,14 @@ left: 0; } +.js-snackbar-container--top-center { + top: 0; + bottom: unset; + left: 50%; + right: unset; + transform: translateX(-50%); +} + .js-snackbar-container--top-right { bottom: unset; right: 0; @@ -31,6 +39,14 @@ top: unset; } +.js-snackbar-container--bottom-center { + bottom: 0; + right: unset; + left: 50%; + top: unset; + transform: translateX(-50%); +} + .js-snackbar-container--fixed { position: fixed; } @@ -43,10 +59,12 @@ overflow: hidden; height: auto; margin: 0; - transition: all ease .5s; border-radius: 3px; display: flex; min-width: auto; + transition-property: all; + transition-timing-function: ease; + transition-duration: 0.5s; } .js-snackbar { diff --git a/dist/js-snackbar.js b/dist/js-snackbar.js index 41f74ed..28b6316 100644 --- a/dist/js-snackbar.js +++ b/dist/js-snackbar.js @@ -37,7 +37,8 @@ function SnackBar(userOptions) { fixed: userOptions?.fixed ?? false, position: userOptions?.position ?? "br", container: userOptions?.container ?? document.body, - width: userOptions?.width + width: userOptions?.width, + speed: userOptions?.speed }; } @@ -110,6 +111,7 @@ function SnackBar(userOptions) { outerElement.style.marginTop = "0px"; outerElement.style.marginBottom = "0px"; setWidth(outerElement); + setSpeed(outerElement); return outerElement; } @@ -218,6 +220,22 @@ function SnackBar(userOptions) { if (!_Options.width) return; element.style.width = _Options.width; } + + function setSpeed(element) { + const { + speed + } = _Options; + + switch (typeof speed) { + case "number": + element.style.transitionDuration = speed + "ms"; + break; + + case "string": + element.style.transitionDuration = speed; + break; + } + } } function _getPositionClass() { @@ -231,6 +249,14 @@ function SnackBar(userOptions) { case "tr": return "js-snackbar-container--top-right"; + case "tc": + case "tm": + return "js-snackbar-container--top-center"; + + case "bc": + case "bm": + return "js-snackbar-container--bottom-center"; + default: return "js-snackbar-container--bottom-right"; } diff --git a/dist/js-snackbar.min.css b/dist/js-snackbar.min.css index 608b158..104553c 100644 --- a/dist/js-snackbar.min.css +++ b/dist/js-snackbar.min.css @@ -1,2 +1,2 @@ -.js-snackbar-container{position:absolute;bottom:0;right:0;display:flex;flex-direction:column;align-items:flex-end;max-width:100%;z-index:999;overflow:hidden}.js-snackbar-container--top-left{bottom:unset;right:unset;top:0;left:0}.js-snackbar-container--top-right{bottom:unset;right:0;left:unset;top:0}.js-snackbar-container--bottom-left{bottom:0;right:unset;left:0;top:unset}.js-snackbar-container--fixed{position:fixed}.js-snackbar-container *{box-sizing:border-box}.js-snackbar__wrapper{overflow:hidden;height:auto;margin:0;transition:all .5s ease;border-radius:3px;display:flex;min-width:auto}.js-snackbar{display:inline-flex;box-sizing:border-box;border-radius:3px;color:#eee;font-size:16px;background-color:#262626;vertical-align:bottom;box-shadow:0 0 4px 0 #000;margin:0 10px;flex-grow:1}.js-snackbar__close,.js-snackbar__message-wrapper,.js-snackbar__status{position:relative}.js-snackbar__message-wrapper{flex:1;padding:12px}.js-snackbar__message{display:inline-block}.js-snackbar__status{display:none;width:15px;margin-right:5px;border-radius:3px 0 0 3px;background-color:transparent}.js-snackbar__status.js-snackbar--danger,.js-snackbar__status.js-snackbar--info,.js-snackbar__status.js-snackbar--success,.js-snackbar__status.js-snackbar--warning{display:block}.js-snackbar__status.js-snackbar--success{background-color:#4caf50}.js-snackbar__status.js-snackbar--warning{background-color:#ff9800}.js-snackbar__status.js-snackbar--danger{background-color:#b90909}.js-snackbar__status.js-snackbar--info{background-color:#2196f3}.js-snackbar__action{display:flex;align-items:center;padding:0 10px;color:#838cff;cursor:pointer}.js-snackbar__action:hover{background-color:#333}.js-snackbar__close{cursor:pointer;display:flex;align-items:center;padding:0 10px;user-select:none;color:#bbb}.js-snackbar__close:hover{background-color:#444} -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9qcy1zbmFja2Jhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsdUJBQ0ksaUJBQWtCLENBQ2xCLFFBQVMsQ0FDVCxPQUFRLENBQ1IsWUFBYSxDQUNiLHFCQUFzQixDQUN0QixvQkFBcUIsQ0FDckIsY0FBZSxDQUNmLFdBQVksQ0FDWixlQUNKLENBRUEsaUNBQ0ksWUFBYSxDQUNiLFdBQVksQ0FDWixLQUFNLENBQ04sTUFDSixDQUVBLGtDQUNJLFlBQWEsQ0FDYixPQUFRLENBQ1IsVUFBVyxDQUNYLEtBQ0osQ0FFQSxvQ0FDSSxRQUFTLENBQ1QsV0FBWSxDQUNaLE1BQU8sQ0FDUCxTQUNKLENBRUEsOEJBQ0ksY0FDSixDQUVBLHlCQUNJLHFCQUNKLENBRUEsc0JBQ0ksZUFBZ0IsQ0FDaEIsV0FBWSxDQUNaLFFBQVMsQ0FDVCx1QkFBd0IsQ0FDeEIsaUJBQWtCLENBQ2xCLFlBQWEsQ0FDYixjQUNKLENBRUEsYUFDSSxtQkFBb0IsQ0FDcEIscUJBQXNCLENBQ3RCLGlCQUFrQixDQUNsQixVQUFXLENBQ1gsY0FBZSxDQUNmLHdCQUF5QixDQUN6QixxQkFBc0IsQ0FDdEIseUJBQTJCLENBQzNCLGFBQWMsQ0FDZCxXQUNKLENBRUEsdUVBR0ksaUJBQ0osQ0FFQSw4QkFDSSxNQUFPLENBQ1AsWUFDSixDQUVBLHNCQUNJLG9CQUNKLENBRUEscUJBQ0ksWUFBYSxDQUNiLFVBQVcsQ0FDWCxnQkFBaUIsQ0FDakIseUJBQTBCLENBQzFCLDRCQUNKLENBRUMsb0tBSUcsYUFDSixDQUVBLDBDQUNJLHdCQUNKLENBRUEsMENBQ0ksd0JBQ0osQ0FFQyx5Q0FDRyx3QkFDSixDQUVDLHVDQUNHLHdCQUNKLENBRUEscUJBQ0ksWUFBYSxDQUNiLGtCQUFtQixDQUNuQixjQUFlLENBQ2YsYUFBYyxDQUNkLGNBQ0osQ0FFQSwyQkFDSSxxQkFDSixDQUVBLG9CQUNJLGNBQWUsQ0FDZixZQUFhLENBQ2Isa0JBQW1CLENBQ25CLGNBQWUsQ0FDZixnQkFBaUIsQ0FDakIsVUFDSixDQUVBLDBCQUNJLHFCQUNKIiwiZmlsZSI6ImpzLXNuYWNrYmFyLm1pbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuanMtc25hY2tiYXItY29udGFpbmVyIHtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIGJvdHRvbTogMDtcclxuICAgIHJpZ2h0OiAwO1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XHJcbiAgICBhbGlnbi1pdGVtczogZmxleC1lbmQ7XHJcbiAgICBtYXgtd2lkdGg6IDEwMCU7XHJcbiAgICB6LWluZGV4OiA5OTk7XHJcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXItY29udGFpbmVyLS10b3AtbGVmdCB7XHJcbiAgICBib3R0b206IHVuc2V0O1xyXG4gICAgcmlnaHQ6IHVuc2V0O1xyXG4gICAgdG9wOiAwO1xyXG4gICAgbGVmdDogMDtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyLWNvbnRhaW5lci0tdG9wLXJpZ2h0IHtcclxuICAgIGJvdHRvbTogdW5zZXQ7XHJcbiAgICByaWdodDogMDtcclxuICAgIGxlZnQ6IHVuc2V0O1xyXG4gICAgdG9wOiAwO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXItY29udGFpbmVyLS1ib3R0b20tbGVmdCB7XHJcbiAgICBib3R0b206IDA7XHJcbiAgICByaWdodDogdW5zZXQ7XHJcbiAgICBsZWZ0OiAwO1xyXG4gICAgdG9wOiB1bnNldDtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyLWNvbnRhaW5lci0tZml4ZWQge1xyXG4gICAgcG9zaXRpb246IGZpeGVkO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXItY29udGFpbmVyICoge1xyXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX193cmFwcGVyIHtcclxuICAgIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgICBoZWlnaHQ6IGF1dG87XHJcbiAgICBtYXJnaW46IDA7XHJcbiAgICB0cmFuc2l0aW9uOiBhbGwgZWFzZSAuNXM7XHJcbiAgICBib3JkZXItcmFkaXVzOiAzcHg7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgbWluLXdpZHRoOiBhdXRvO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXIge1xyXG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XHJcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xyXG4gICAgYm9yZGVyLXJhZGl1czogM3B4O1xyXG4gICAgY29sb3I6ICNlZWU7XHJcbiAgICBmb250LXNpemU6IDE2cHg7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjYyNjI2O1xyXG4gICAgdmVydGljYWwtYWxpZ246IGJvdHRvbTtcclxuICAgIGJveC1zaGFkb3c6IDAgMCA0cHggMCBibGFjaztcclxuICAgIG1hcmdpbjogMCAxMHB4O1xyXG4gICAgZmxleC1ncm93OiAxO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXJfX2Nsb3NlLFxyXG4uanMtc25hY2tiYXJfX3N0YXR1cyxcclxuLmpzLXNuYWNrYmFyX19tZXNzYWdlLXdyYXBwZXIge1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXJfX21lc3NhZ2Utd3JhcHBlciB7XHJcbiAgICBmbGV4OiAxO1xyXG4gICAgcGFkZGluZzogMTJweDtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX19tZXNzYWdlIHtcclxuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX19zdGF0dXMge1xyXG4gICAgZGlzcGxheTogbm9uZTtcclxuICAgIHdpZHRoOiAxNXB4O1xyXG4gICAgbWFyZ2luLXJpZ2h0OiA1cHg7XHJcbiAgICBib3JkZXItcmFkaXVzOiAzcHggMCAwIDNweDtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xyXG59XHJcblxyXG4gLmpzLXNuYWNrYmFyX19zdGF0dXMuanMtc25hY2tiYXItLXN1Y2Nlc3MsXHJcbiAuanMtc25hY2tiYXJfX3N0YXR1cy5qcy1zbmFja2Jhci0td2FybmluZyxcclxuIC5qcy1zbmFja2Jhcl9fc3RhdHVzLmpzLXNuYWNrYmFyLS1kYW5nZXIsXHJcbiAuanMtc25hY2tiYXJfX3N0YXR1cy5qcy1zbmFja2Jhci0taW5mbyB7XHJcbiAgICBkaXNwbGF5OiBibG9jaztcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX19zdGF0dXMuanMtc25hY2tiYXItLXN1Y2Nlc3MgIHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICM0Y2FmNTA7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fc3RhdHVzLmpzLXNuYWNrYmFyLS13YXJuaW5nICB7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmY5ODAwO1xyXG59XHJcblxyXG4gLmpzLXNuYWNrYmFyX19zdGF0dXMuanMtc25hY2tiYXItLWRhbmdlciB7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjYjkwOTA5O1xyXG59XHJcblxyXG4gLmpzLXNuYWNrYmFyX19zdGF0dXMuanMtc25hY2tiYXItLWluZm8ge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzIxOTZmMztcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX19hY3Rpb24ge1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICBwYWRkaW5nOiAwIDEwcHg7XHJcbiAgICBjb2xvcjogIzgzOGNmZjtcclxuICAgIGN1cnNvcjogcG9pbnRlcjtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX19hY3Rpb246aG92ZXIge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzMzMztcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX19jbG9zZSB7XHJcbiAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIHBhZGRpbmc6IDAgMTBweDtcclxuICAgIHVzZXItc2VsZWN0OiBub25lO1xyXG4gICAgY29sb3I6ICNCQkI7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fY2xvc2U6aG92ZXIge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzQ0NDtcclxufSJdfQ== */ \ No newline at end of file +.js-snackbar-container{position:absolute;bottom:0;right:0;display:flex;flex-direction:column;align-items:flex-end;max-width:100%;z-index:999;overflow:hidden}.js-snackbar-container--top-left{bottom:unset;right:unset;top:0;left:0}.js-snackbar-container--top-center{top:0;bottom:unset;left:50%;right:unset;transform:translateX(-50%)}.js-snackbar-container--top-right{bottom:unset;right:0;left:unset;top:0}.js-snackbar-container--bottom-left{bottom:0;right:unset;left:0;top:unset}.js-snackbar-container--bottom-center{bottom:0;right:unset;left:50%;top:unset;transform:translateX(-50%)}.js-snackbar-container--fixed{position:fixed}.js-snackbar-container *{box-sizing:border-box}.js-snackbar__wrapper{overflow:hidden;height:auto;margin:0;border-radius:3px;display:flex;min-width:auto;transition-property:all;transition-timing-function:ease;transition-duration:.5s}.js-snackbar{display:inline-flex;box-sizing:border-box;border-radius:3px;color:#eee;font-size:16px;background-color:#262626;vertical-align:bottom;box-shadow:0 0 4px 0 #000;margin:0 10px;flex-grow:1}.js-snackbar__close,.js-snackbar__message-wrapper,.js-snackbar__status{position:relative}.js-snackbar__message-wrapper{flex:1;padding:12px}.js-snackbar__message{display:inline-block}.js-snackbar__status{display:none;width:15px;margin-right:5px;border-radius:3px 0 0 3px;background-color:transparent}.js-snackbar__status.js-snackbar--danger,.js-snackbar__status.js-snackbar--info,.js-snackbar__status.js-snackbar--success,.js-snackbar__status.js-snackbar--warning{display:block}.js-snackbar__status.js-snackbar--success{background-color:#4caf50}.js-snackbar__status.js-snackbar--warning{background-color:#ff9800}.js-snackbar__status.js-snackbar--danger{background-color:#b90909}.js-snackbar__status.js-snackbar--info{background-color:#2196f3}.js-snackbar__action{display:flex;align-items:center;padding:0 10px;color:#838cff;cursor:pointer}.js-snackbar__action:hover{background-color:#333}.js-snackbar__close{cursor:pointer;display:flex;align-items:center;padding:0 10px;user-select:none;color:#bbb}.js-snackbar__close:hover{background-color:#444} +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9qcy1zbmFja2Jhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsdUJBQ0ksaUJBQWtCLENBQ2xCLFFBQVMsQ0FDVCxPQUFRLENBQ1IsWUFBYSxDQUNiLHFCQUFzQixDQUN0QixvQkFBcUIsQ0FDckIsY0FBZSxDQUNmLFdBQVksQ0FDWixlQUNKLENBRUEsaUNBQ0ksWUFBYSxDQUNiLFdBQVksQ0FDWixLQUFNLENBQ04sTUFDSixDQUVBLG1DQUNJLEtBQU0sQ0FDTixZQUFhLENBQ2IsUUFBUyxDQUNULFdBQVksQ0FDWiwwQkFDSixDQUVBLGtDQUNJLFlBQWEsQ0FDYixPQUFRLENBQ1IsVUFBVyxDQUNYLEtBQ0osQ0FFQSxvQ0FDSSxRQUFTLENBQ1QsV0FBWSxDQUNaLE1BQU8sQ0FDUCxTQUNKLENBRUEsc0NBQ0ksUUFBUyxDQUNULFdBQVksQ0FDWixRQUFTLENBQ1QsU0FBVSxDQUNWLDBCQUNKLENBRUEsOEJBQ0ksY0FDSixDQUVBLHlCQUNJLHFCQUNKLENBRUEsc0JBQ0ksZUFBZ0IsQ0FDaEIsV0FBWSxDQUNaLFFBQVMsQ0FDVCxpQkFBa0IsQ0FDbEIsWUFBYSxDQUNiLGNBQWUsQ0FDZix1QkFBd0IsQ0FDeEIsK0JBQWdDLENBQ2hDLHVCQUNKLENBRUEsYUFDSSxtQkFBb0IsQ0FDcEIscUJBQXNCLENBQ3RCLGlCQUFrQixDQUNsQixVQUFXLENBQ1gsY0FBZSxDQUNmLHdCQUF5QixDQUN6QixxQkFBc0IsQ0FDdEIseUJBQTJCLENBQzNCLGFBQWMsQ0FDZCxXQUNKLENBRUEsdUVBR0ksaUJBQ0osQ0FFQSw4QkFDSSxNQUFPLENBQ1AsWUFDSixDQUVBLHNCQUNJLG9CQUNKLENBRUEscUJBQ0ksWUFBYSxDQUNiLFVBQVcsQ0FDWCxnQkFBaUIsQ0FDakIseUJBQTBCLENBQzFCLDRCQUNKLENBRUMsb0tBSUcsYUFDSixDQUVBLDBDQUNJLHdCQUNKLENBRUEsMENBQ0ksd0JBQ0osQ0FFQyx5Q0FDRyx3QkFDSixDQUVDLHVDQUNHLHdCQUNKLENBRUEscUJBQ0ksWUFBYSxDQUNiLGtCQUFtQixDQUNuQixjQUFlLENBQ2YsYUFBYyxDQUNkLGNBQ0osQ0FFQSwyQkFDSSxxQkFDSixDQUVBLG9CQUNJLGNBQWUsQ0FDZixZQUFhLENBQ2Isa0JBQW1CLENBQ25CLGNBQWUsQ0FDZixnQkFBaUIsQ0FDakIsVUFDSixDQUVBLDBCQUNJLHFCQUNKIiwiZmlsZSI6ImpzLXNuYWNrYmFyLm1pbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuanMtc25hY2tiYXItY29udGFpbmVyIHtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIGJvdHRvbTogMDtcclxuICAgIHJpZ2h0OiAwO1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XHJcbiAgICBhbGlnbi1pdGVtczogZmxleC1lbmQ7XHJcbiAgICBtYXgtd2lkdGg6IDEwMCU7XHJcbiAgICB6LWluZGV4OiA5OTk7XHJcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXItY29udGFpbmVyLS10b3AtbGVmdCB7XHJcbiAgICBib3R0b206IHVuc2V0O1xyXG4gICAgcmlnaHQ6IHVuc2V0O1xyXG4gICAgdG9wOiAwO1xyXG4gICAgbGVmdDogMDtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyLWNvbnRhaW5lci0tdG9wLWNlbnRlciB7XHJcbiAgICB0b3A6IDA7XHJcbiAgICBib3R0b206IHVuc2V0O1xyXG4gICAgbGVmdDogNTAlO1xyXG4gICAgcmlnaHQ6IHVuc2V0O1xyXG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC01MCUpO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXItY29udGFpbmVyLS10b3AtcmlnaHQge1xyXG4gICAgYm90dG9tOiB1bnNldDtcclxuICAgIHJpZ2h0OiAwO1xyXG4gICAgbGVmdDogdW5zZXQ7XHJcbiAgICB0b3A6IDA7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhci1jb250YWluZXItLWJvdHRvbS1sZWZ0IHtcclxuICAgIGJvdHRvbTogMDtcclxuICAgIHJpZ2h0OiB1bnNldDtcclxuICAgIGxlZnQ6IDA7XHJcbiAgICB0b3A6IHVuc2V0O1xyXG59XHJcblxyXG4uanMtc25hY2tiYXItY29udGFpbmVyLS1ib3R0b20tY2VudGVyIHtcclxuICAgIGJvdHRvbTogMDtcclxuICAgIHJpZ2h0OiB1bnNldDtcclxuICAgIGxlZnQ6IDUwJTtcclxuICAgIHRvcDogdW5zZXQ7XHJcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhci1jb250YWluZXItLWZpeGVkIHtcclxuICAgIHBvc2l0aW9uOiBmaXhlZDtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyLWNvbnRhaW5lciAqIHtcclxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fd3JhcHBlciB7XHJcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gICAgaGVpZ2h0OiBhdXRvO1xyXG4gICAgbWFyZ2luOiAwO1xyXG4gICAgYm9yZGVyLXJhZGl1czogM3B4O1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIG1pbi13aWR0aDogYXV0bztcclxuICAgIHRyYW5zaXRpb24tcHJvcGVydHk6IGFsbDtcclxuICAgIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlO1xyXG4gICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC41cztcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyIHtcclxuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xyXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcclxuICAgIGJvcmRlci1yYWRpdXM6IDNweDtcclxuICAgIGNvbG9yOiAjZWVlO1xyXG4gICAgZm9udC1zaXplOiAxNnB4O1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzI2MjYyNjtcclxuICAgIHZlcnRpY2FsLWFsaWduOiBib3R0b207XHJcbiAgICBib3gtc2hhZG93OiAwIDAgNHB4IDAgYmxhY2s7XHJcbiAgICBtYXJnaW46IDAgMTBweDtcclxuICAgIGZsZXgtZ3JvdzogMTtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX19jbG9zZSxcclxuLmpzLXNuYWNrYmFyX19zdGF0dXMsXHJcbi5qcy1zbmFja2Jhcl9fbWVzc2FnZS13cmFwcGVyIHtcclxuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxufVxyXG5cclxuLmpzLXNuYWNrYmFyX19tZXNzYWdlLXdyYXBwZXIge1xyXG4gICAgZmxleDogMTtcclxuICAgIHBhZGRpbmc6IDEycHg7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fbWVzc2FnZSB7XHJcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fc3RhdHVzIHtcclxuICAgIGRpc3BsYXk6IG5vbmU7XHJcbiAgICB3aWR0aDogMTVweDtcclxuICAgIG1hcmdpbi1yaWdodDogNXB4O1xyXG4gICAgYm9yZGVyLXJhZGl1czogM3B4IDAgMCAzcHg7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcclxufVxyXG5cclxuIC5qcy1zbmFja2Jhcl9fc3RhdHVzLmpzLXNuYWNrYmFyLS1zdWNjZXNzLFxyXG4gLmpzLXNuYWNrYmFyX19zdGF0dXMuanMtc25hY2tiYXItLXdhcm5pbmcsXHJcbiAuanMtc25hY2tiYXJfX3N0YXR1cy5qcy1zbmFja2Jhci0tZGFuZ2VyLFxyXG4gLmpzLXNuYWNrYmFyX19zdGF0dXMuanMtc25hY2tiYXItLWluZm8ge1xyXG4gICAgZGlzcGxheTogYmxvY2s7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fc3RhdHVzLmpzLXNuYWNrYmFyLS1zdWNjZXNzICB7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNGNhZjUwO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXJfX3N0YXR1cy5qcy1zbmFja2Jhci0td2FybmluZyAge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmOTgwMDtcclxufVxyXG5cclxuIC5qcy1zbmFja2Jhcl9fc3RhdHVzLmpzLXNuYWNrYmFyLS1kYW5nZXIge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2I5MDkwOTtcclxufVxyXG5cclxuIC5qcy1zbmFja2Jhcl9fc3RhdHVzLmpzLXNuYWNrYmFyLS1pbmZvIHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICMyMTk2ZjM7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fYWN0aW9uIHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAgcGFkZGluZzogMCAxMHB4O1xyXG4gICAgY29sb3I6ICM4MzhjZmY7XHJcbiAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fYWN0aW9uOmhvdmVyIHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICMzMzM7XHJcbn1cclxuXHJcbi5qcy1zbmFja2Jhcl9fY2xvc2Uge1xyXG4gICAgY3Vyc29yOiBwb2ludGVyO1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICBwYWRkaW5nOiAwIDEwcHg7XHJcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcclxuICAgIGNvbG9yOiAjQkJCO1xyXG59XHJcblxyXG4uanMtc25hY2tiYXJfX2Nsb3NlOmhvdmVyIHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6ICM0NDQ7XHJcbn0iXX0= */ \ No newline at end of file diff --git a/dist/js-snackbar.min.js b/dist/js-snackbar.min.js index 1027605..0dac64b 100644 --- a/dist/js-snackbar.min.js +++ b/dist/js-snackbar.min.js @@ -1,4 +1,4 @@ -function SnackBar(userOptions){var _This=this;var _Interval;var _Element;var _Container;var _Message;var _MessageWrapper;function _create(){_applyUserOptions();_setContainer();_applyPositionClasses();_Element=_createMessage();_Container.appendChild(_Element);if(_Options.timeout!==false&&_Options.timeout>0){_Interval=setTimeout(_This.Close,_Options.timeout)}}function _applyUserOptions(){_Options={message:userOptions?.message??"Operation performed successfully.",dismissible:userOptions?.dismissible??true,timeout:userOptions?.timeout??5000,status:userOptions?.status?userOptions.status.toLowerCase().trim():"",actions:userOptions?.actions??[],fixed:userOptions?.fixed??false,position:userOptions?.position??"br",container:userOptions?.container??document.body,width:userOptions?.width}}function _setContainer(){var target=getOrFindContainer();if(target===undefined){console.warn("SnackBar: Could not find target container "+_Options.container);target=document.body;// default to the body as the container -}_Container=getOrAddContainerIn(target);function getOrAddContainerIn(target){var node;var positionClass=_getPositionClass();for(var i=0;i0&&node.classList.contains("js-snackbar-container")&&node.classList.contains(positionClass)){return node}}return createNewContainer(target)}function createNewContainer(target){container=document.createElement("div");container.classList.add("js-snackbar-container");if(_Options.fixed){container.classList.add("js-snackbar-container--fixed")}target.appendChild(container);return container}function getOrFindContainer(){return typeof _Options.container==="object"?_Options.container:document.getElementById(_Options.container)}}function _applyPositionClasses(){_Container.classList.add(_getPositionClass());var fixedClassName="js-snackbar-container--fixed";if(_Options.fixed){_Container.classList.add(fixedClassName)}else{_Container.classList.remove(fixedClassName)}}function _createMessage(){var outerElement=createWrapper();var innerSnack=createInnerSnackbar();outerElement.appendChild(innerSnack);return outerElement;function createWrapper(){var outerElement=document.createElement("div");outerElement.classList.add("js-snackbar__wrapper");outerElement.style.height="0px";outerElement.style.opacity="0";outerElement.style.marginTop="0px";outerElement.style.marginBottom="0px";setWidth(outerElement);return outerElement}function createInnerSnackbar(){var innerSnack=document.createElement("div");innerSnack.classList.add("js-snackbar","js-snackbar--show");applyColorTo(innerSnack);insertMessageTo(innerSnack);addActionsTo(innerSnack);addDismissButtonTo(innerSnack);return innerSnack}function applyColorTo(element){if(!_Options.status)return;var status=document.createElement("span");status.classList.add("js-snackbar__status");switch(_Options.status){case"success":case"green":status.classList.add("js-snackbar--success");break;case"warning":case"alert":case"orange":status.classList.add("js-snackbar--warning");break;case"danger":case"error":case"red":status.classList.add("js-snackbar--danger");break;default:status.classList.add("js-snackbar--info");break;}element.appendChild(status)}function insertMessageTo(element){_MessageWrapper=document.createElement("div");_MessageWrapper.classList.add("js-snackbar__message-wrapper");_Message=document.createElement("span");_Message.classList.add("js-snackbar__message");_Message.innerHTML=_Options.message;_MessageWrapper.appendChild(_Message);element.appendChild(_MessageWrapper)}function addActionsTo(element){if(typeof _Options.actions!=="object"){return}for(var i=0;i<_Options.actions.length;i++){addAction(element,_Options.actions[i])}function addAction(element,action){var button=document.createElement("span");button.classList.add("js-snackbar__action");button.textContent=action.text;if(typeof action.function==="function"){if(action.dismiss===true){button.onclick=function(){action.function();_This.Close()}}else{button.onclick=action.function}}else{button.onclick=_This.Close}element.appendChild(button)}}function addDismissButtonTo(element){if(!_Options.dismissible){return}var closeButton=document.createElement("span");closeButton.classList.add("js-snackbar__close");closeButton.innerText="\xD7";closeButton.onclick=_This.Close;element.appendChild(closeButton)}function setWidth(element){if(!_Options.width)return;element.style.width=_Options.width}}function _getPositionClass(){switch(_Options.position){case"bl":return"js-snackbar-container--bottom-left";case"tl":return"js-snackbar-container--top-left";case"tr":return"js-snackbar-container--top-right";default:return"js-snackbar-container--bottom-right";}}this.Open=function(){var contentHeight=getMessageHeight();_Element.style.height=contentHeight+"px";_Element.style.opacity=1;_Element.style.marginTop="5px";_Element.style.marginBottom="5px";_Element.addEventListener("transitioned",function(){_Element.removeEventListener("transitioned",arguments.callee);_Element.style.height=null});function getMessageHeight(){const wrapperStyles=window.getComputedStyle(_MessageWrapper);return _Message.scrollHeight+parseFloat(wrapperStyles.getPropertyValue("padding-top"))+parseFloat(wrapperStyles.getPropertyValue("padding-bottom"))}};this.Close=function(){if(_Interval)clearInterval(_Interval);var snackbarHeight=_Element.scrollHeight;// get the auto height as a px value +function SnackBar(userOptions){var _This=this;var _Interval;var _Element;var _Container;var _Message;var _MessageWrapper;function _create(){_applyUserOptions();_setContainer();_applyPositionClasses();_Element=_createMessage();_Container.appendChild(_Element);if(_Options.timeout!==false&&_Options.timeout>0){_Interval=setTimeout(_This.Close,_Options.timeout)}}function _applyUserOptions(){_Options={message:userOptions?.message??"Operation performed successfully.",dismissible:userOptions?.dismissible??true,timeout:userOptions?.timeout??5000,status:userOptions?.status?userOptions.status.toLowerCase().trim():"",actions:userOptions?.actions??[],fixed:userOptions?.fixed??false,position:userOptions?.position??"br",container:userOptions?.container??document.body,width:userOptions?.width,speed:userOptions?.speed}}function _setContainer(){var target=getOrFindContainer();if(target===undefined){console.warn("SnackBar: Could not find target container "+_Options.container);target=document.body;// default to the body as the container +}_Container=getOrAddContainerIn(target);function getOrAddContainerIn(target){var node;var positionClass=_getPositionClass();for(var i=0;i0&&node.classList.contains("js-snackbar-container")&&node.classList.contains(positionClass)){return node}}return createNewContainer(target)}function createNewContainer(target){container=document.createElement("div");container.classList.add("js-snackbar-container");if(_Options.fixed){container.classList.add("js-snackbar-container--fixed")}target.appendChild(container);return container}function getOrFindContainer(){return typeof _Options.container==="object"?_Options.container:document.getElementById(_Options.container)}}function _applyPositionClasses(){_Container.classList.add(_getPositionClass());var fixedClassName="js-snackbar-container--fixed";if(_Options.fixed){_Container.classList.add(fixedClassName)}else{_Container.classList.remove(fixedClassName)}}function _createMessage(){var outerElement=createWrapper();var innerSnack=createInnerSnackbar();outerElement.appendChild(innerSnack);return outerElement;function createWrapper(){var outerElement=document.createElement("div");outerElement.classList.add("js-snackbar__wrapper");outerElement.style.height="0px";outerElement.style.opacity="0";outerElement.style.marginTop="0px";outerElement.style.marginBottom="0px";setWidth(outerElement);setSpeed(outerElement);return outerElement}function createInnerSnackbar(){var innerSnack=document.createElement("div");innerSnack.classList.add("js-snackbar","js-snackbar--show");applyColorTo(innerSnack);insertMessageTo(innerSnack);addActionsTo(innerSnack);addDismissButtonTo(innerSnack);return innerSnack}function applyColorTo(element){if(!_Options.status)return;var status=document.createElement("span");status.classList.add("js-snackbar__status");switch(_Options.status){case"success":case"green":status.classList.add("js-snackbar--success");break;case"warning":case"alert":case"orange":status.classList.add("js-snackbar--warning");break;case"danger":case"error":case"red":status.classList.add("js-snackbar--danger");break;default:status.classList.add("js-snackbar--info");break;}element.appendChild(status)}function insertMessageTo(element){_MessageWrapper=document.createElement("div");_MessageWrapper.classList.add("js-snackbar__message-wrapper");_Message=document.createElement("span");_Message.classList.add("js-snackbar__message");_Message.innerHTML=_Options.message;_MessageWrapper.appendChild(_Message);element.appendChild(_MessageWrapper)}function addActionsTo(element){if(typeof _Options.actions!=="object"){return}for(var i=0;i<_Options.actions.length;i++){addAction(element,_Options.actions[i])}function addAction(element,action){var button=document.createElement("span");button.classList.add("js-snackbar__action");button.textContent=action.text;if(typeof action.function==="function"){if(action.dismiss===true){button.onclick=function(){action.function();_This.Close()}}else{button.onclick=action.function}}else{button.onclick=_This.Close}element.appendChild(button)}}function addDismissButtonTo(element){if(!_Options.dismissible){return}var closeButton=document.createElement("span");closeButton.classList.add("js-snackbar__close");closeButton.innerText="\xD7";closeButton.onclick=_This.Close;element.appendChild(closeButton)}function setWidth(element){if(!_Options.width)return;element.style.width=_Options.width}function setSpeed(element){const{speed}=_Options;switch(typeof speed){case"number":element.style.transitionDuration=speed+"ms";break;case"string":element.style.transitionDuration=speed;break;}}}function _getPositionClass(){switch(_Options.position){case"bl":return"js-snackbar-container--bottom-left";case"tl":return"js-snackbar-container--top-left";case"tr":return"js-snackbar-container--top-right";case"tc":case"tm":return"js-snackbar-container--top-center";case"bc":case"bm":return"js-snackbar-container--bottom-center";default:return"js-snackbar-container--bottom-right";}}this.Open=function(){var contentHeight=getMessageHeight();_Element.style.height=contentHeight+"px";_Element.style.opacity=1;_Element.style.marginTop="5px";_Element.style.marginBottom="5px";_Element.addEventListener("transitioned",function(){_Element.removeEventListener("transitioned",arguments.callee);_Element.style.height=null});function getMessageHeight(){const wrapperStyles=window.getComputedStyle(_MessageWrapper);return _Message.scrollHeight+parseFloat(wrapperStyles.getPropertyValue("padding-top"))+parseFloat(wrapperStyles.getPropertyValue("padding-bottom"))}};this.Close=function(){if(_Interval)clearInterval(_Interval);var snackbarHeight=_Element.scrollHeight;// get the auto height as a px value var snackbarTransitions=_Element.style.transition;_Element.style.transition="";requestAnimationFrame(function(){_Element.style.height=snackbarHeight+"px";// set the auto height to the px height _Element.style.opacity=1;_Element.style.marginTop="0px";_Element.style.marginBottom="0px";_Element.style.transition=snackbarTransitions;requestAnimationFrame(function(){_Element.style.height="0px";_Element.style.opacity=0})});setTimeout(function(){_Container.removeChild(_Element)},1000)};_create();_This.Open()} diff --git a/index.html b/index.html index b5594ff..3b35e81 100644 --- a/index.html +++ b/index.html @@ -57,6 +57,12 @@

JS-Snackbar

+
  • + + Animation Speed + +
    • +
  • Positioning @@ -450,6 +456,47 @@

    Timeout Options

    +
    +

    Animation Speed

    + +

    + You may want the SnackBar to come on screen quicker or slower. + To that end, you can specify the speed property to set the transition-duration + for the element. +

    + +

    + If you send in a number, then it will be applied as milliseconds (e.g. 500 will become "500ms"). + If you send in a string, then it will be applied directly to the property with no modifications, making the valid + options any valid CSS property for the transformation-duration property. + Sending in any other type of value will result in no change to the animation duration. +

    + + +SnackBar({ + speed: "0.5s" +}); + +// OR + +SnackBar({ + speed: 500 +}); + + + + + + +
    +

    Positioning

    @@ -466,22 +513,30 @@

    Positioning

    - - "tr" - Top-Right - "tl" Top-Left - "br" - Bottom-Right + "tc" or "tm" + Top-Center + + + "tr" + Top-Right "bl" Bottom-Left + + "bc" or "bm" + Bottom-Center + + + "br" + Bottom-Right + @@ -494,17 +549,19 @@

    Positioning

    position: "br" }); - - - - + + + + + + @@ -654,10 +711,13 @@

    Try it Yourself!

    diff --git a/src/js-snackbar.css b/src/js-snackbar.css index 518d997..8cf0856 100644 --- a/src/js-snackbar.css +++ b/src/js-snackbar.css @@ -17,6 +17,14 @@ left: 0; } +.js-snackbar-container--top-center { + top: 0; + bottom: unset; + left: 50%; + right: unset; + transform: translateX(-50%); +} + .js-snackbar-container--top-right { bottom: unset; right: 0; @@ -31,6 +39,14 @@ top: unset; } +.js-snackbar-container--bottom-center { + bottom: 0; + right: unset; + left: 50%; + top: unset; + transform: translateX(-50%); +} + .js-snackbar-container--fixed { position: fixed; } @@ -43,10 +59,12 @@ overflow: hidden; height: auto; margin: 0; - transition: all ease .5s; border-radius: 3px; display: flex; min-width: auto; + transition-property: all; + transition-timing-function: ease; + transition-duration: 0.5s; } .js-snackbar { diff --git a/src/js-snackbar.js b/src/js-snackbar.js index 665cabe..e3bdbe4 100644 --- a/src/js-snackbar.js +++ b/src/js-snackbar.js @@ -29,7 +29,8 @@ fixed: userOptions?.fixed ?? false, position: userOptions?.position ?? "br", container: userOptions?.container ?? document.body, - width: userOptions?.width + width: userOptions?.width, + speed: userOptions?.speed }; } @@ -113,6 +114,7 @@ outerElement.style.marginBottom = "0px"; setWidth(outerElement); + setSpeed(outerElement); return outerElement; } @@ -222,6 +224,19 @@ element.style.width = _Options.width; } + + function setSpeed(element) { + const { speed } = _Options; + + switch (typeof speed) { + case "number": + element.style.transitionDuration = speed + "ms"; + break; + case "string": + element.style.transitionDuration = speed; + break; + } + } } function _getPositionClass() { @@ -233,6 +248,12 @@ return "js-snackbar-container--top-left"; case "tr": return "js-snackbar-container--top-right"; + case "tc": + case "tm": + return "js-snackbar-container--top-center"; + case "bc": + case "bm": + return "js-snackbar-container--bottom-center"; default: return "js-snackbar-container--bottom-right"; }