fp-dom-alert

Library that helps you create HTML Alert.

Installation

You need node.js and npm and fp-dom-tool.

npm install fp-dom-alert

import _tool from "fp-dom-tool"; // opt.
import _alert from "fp-dom-alert"; // lib fp-dom-alert

const _export = {
  _alert,
  _alertDanger,
  _alertSuccess,
  _alertWarning,
  _createAlertStyle,
  _setStyle,
};

export default _export;

To export the Style

• In you config.webpack.js:

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
          loader: "style-loader",
        },
        {
          loader: "css-loader",
          options: {
            modules: true,
          },
        },
      ],
    },
  ];
}

• In you scss or css file:

@import "fp-dom-alert/lib/index.css";

Usage

• You need to create an html container with a class ._message. You can use the function _createElement from the fp-dom-tool package.

const _messageContainer = _tool._createElement("div")(["class", "_message"]);

• Create an alert with the function _alert. The function required two arguments: an alert type and and content. The package has 3 alert pre-created.

const _alertDanger = _alert._alert("danger");
const _alertSuccess = _alert._alert("success");
const _alertWarning = _alert._alert("warning");

• You then append all you alert to the ._message container by using the function _appendElement.

const appendMessageContainer = _tool._appendElement(_messageContainer);
appendMessageContainer(
  _alert._alertDanger("Something is wrong"),
  _alert._alertWarning("Better be carefull"),
  _alert._alertSuccess("All is fine now")
);

• The ._message container is by default on display:none. You can use the function _switchElementDisplay from the from the fp-dom-tool package. Everytime the _switchElementDisplay is used the element changes state from display:none to display:block.

const _switchAlertDisplay = _tool._switchElementDisplay(_messageContainer);
_switchAlertDisplay(); // display:block
_switchAlertDisplay(); // display:none

Style

Each pre-created alert has the following style:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,700;1,200;1,300;1,400;1,700&display=swap");
$message-danger: #f8d7d9;
$message-success: #d4edd9;
$message-warning: #fff3cd;

@mixin message($color) {
  background-color: $color;
  border-color: darken($color, 50);
  color: darken($color, 50);
}

._message {
  display: none;

  &__container {
    padding: 0.6rem;
    border: 2px solid #000;
    border-radius: 0.3em;
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    margin: 0.3rem 0;
  }
  &--danger {
    @include message($message-danger);
  }
  &--success {
    @include message($message-success);
  }
  &--warning {
    @include message($message-warning);
  }
}

Changing style

Direclty in css

You can overide the predifined with yours by creating your own style.

By using the library

You can also use the function _createAlertStyle from this package. First you need to create an object that will overide the _AlertCss object. The _AlertCss has the following property:

const _AlertCss = {
  padding: ".6rem",
  border: "2px solid #000",
  borderRadius: "0.3em",
  fontFamily: "'Montserrat', sans-serif",
  fontSize: "1.1rem",
  margin: "0.3rem 0",
  backgroundColor: "#fff",
  borderColor: "#000",
  color: "#000",
};

You can't add additional property to the object. Any property not listed in the _AlertCss won't be added.

const newStyle = {
  backgroundColor: "#9da3d8",
  color: "#2835ad",
  borderColor: "#2835ad",
};

const alertInfoStyle = _alert._createAlertStyle(newStyle);

You can then use the function _setStyle to set the new style to a given element.

const dangerAlert = _tool._getElementClass("_message--danger");
_alert._setStyle(dangerAlert)(dangerStyle);

Example

// Create the div ._message container that will contain all the alerts.
const _messageContainer = _tool._createElement("div")(["class", "_message"]);
const appendMessageContainer = _tool._appendElement(_messageContainer);

// Create a new type of alert: alertinfo
const alertInfo = _alert._alert("info");

// Add a message to the newly alertinfo and append it to the div ._message container.
appendMessageContainer(alertInfo("Fun Fact: I'm an info"));

//creste a new style with the element you wish to override.
const newStyle = {
  backgroundColor: "#9da3d8",
  color: "#2835ad",
  borderColor: "#2835ad",
};

// create a new object style
const alertInfoStyle = _createAlertStyle(newStyle);

// get the alert alertInfo in the dom and set the new style
const info = _tool._getElementClass("_message--info");
_setStyle(info)(alertInfoStyle);

// display the alert
_switchAlertDisplay(); // display:block

The alert now is now created.