𝔉𝔫𝔬𝔫

Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name.

Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

Colors are based on Bootstrap main categories:

<div style="width:15px;height:15px;background:#ffffff;display:inline-block"></div> Light <div style="width:15px;height:15px;background:#029eff;display:inline-block"></div> Primary <div style="width:15px;height:15px;background:#39DA8A;display:inline-block"></div> Success <div style="width:15px;height:15px;background:#f55260;display:inline-block"></div> Danger <div style="width:15px;height:15px;background:#fdd347;display:inline-block"></div> Warning <div style="width:15px;height:15px;background:#56b6f7;display:inline-block"></div> Info <div style="width:15px;height:15px;background:#222f3e;display:inline-block"></div> Dark

Current Version : 1.1.13

Live Demo

Installation :

Use node package manager :

npm i fnon

Add direct to HTML (css and js)

<link rel="stylesheet" href="dist/fnon.min.css" />

<script src="dist/fnon.min.js"></script>

Usage

1- Hint

Hint has 7 themed functions named as bootstrap's colors Light > Primary > Success > Danger > Warning > Info > Dark

// @param1 {string}: Required, message text in String format[it's not a plane text, means you could add your own HTML syntax].
// @param2 {Object}: Optional,update the initialize options with new options for current hint.

// Just a message
Fnon.Hint.Light("Your Message comes here");

// Message with a title
Fnon.Hint.Danger("You can not save record to database.", "Connection Failure");

// Message with a callback
Fnon.Hint.Info("Your message", function () {
  // callback function
});
// Message with a title
Fnon.Hint.Success("Your message", {
  callback: function () {
    console.log("Do not stop praying for your parents");
  },
  title: "Title",
});
// Message with settings
Fnon.Hint.Dark("Rest in peace", {
  position: "right-top",
  fontSize: "14px",
  width: "300px",
  title: "Here comes the title",
  callback: function () {
    //do something
  },
});
// rest of functions....
//Fnon.Hint.Primary("Your Message comes here");
//Fnon.Hint.Warning("Your Message comes here");

If you want to modify the default Hint settings, you can use the Init function. Below is the list of all available properties you could change.

Fnon.Hint.Init({
  fontFamily: '"Quicksand", sans-serif',
  position: "right-top",
  spacing: "16px",
  svgSize: { w: "16px", h: "16px" },
  textColor: "#fff",
  fontSize: "14px",
  backgroundColor: "#029eff",
  shadowColor: "rgba(2, 158, 255, 0.3)",
  width: "300px",
  zindex: 4000,
  animation: "slide-left",
  animationDuration: 500,
  displayDuration: 3000,
  progressColor: "rgba(255,255,255,0.9)",
  callback: undefined,
  title: undefined,
});

Hint positioning can be set using the position property with any of the following options:

• right-top
• right-center
• right-bottom
• left-top
• left-center
• left-bottom
• center-top
• center-center
• center-bottom

  Below is the list of available animation effects:

• fade
• slide-left
• slide-right
• slide-bottom
• slide-top

---

2- Wait

The wait functions are simply a block screens that blocks the user from interacting with the page until further notice. Wait simply displays an animated SVG icon and a text if provided.

The Wait object contains 19 functions, 16 of them are named after the icons used in it.

// @param1 {string}: Optional, message text in String format[it's not a plane text, means you could add your own HTML syntax].
// @param2 {Object}: Optional,update the initialize options with new options for current wait block.
// Simple call
Fnon.Wait.Infinity();
// Call with a message
Fnon.Wait.Ripple("Loading");
// call with a message and change some options
Fnon.Wait.Liquid("Please Wait", {
  textSize: "14px",
  clickToClose: true,
});
// The rest of displaying functions
//Fnon.Wait.ColorBar()
//Fnon.Wait.ProgressBar()
//Fnon.Wait.CurveBar()
//Fnon.Wait.LineDots()
//Fnon.Wait.Circle()
//Fnon.Wait.CircleDots()
//Fnon.Wait.Bricks()
//Fnon.Wait.Interwind()
//Fnon.Wait.Typing()
//Fnon.Wait.Gear()
//Fnon.Wait.Gears()
//Fnon.Wait.Rainbow()
//Fnon.Wait.CurveBar()

There are two more functions which are Change and Remove

Change function is going to change or add a text to the running Wait function:

Fnon.Wait.Change("Downloading 77%");

Remove function will remove the current waiting block. You can also delay the remove function by provide time param.

// Remove instantly
Fnon.Wait.Remove();
// Remove after 3 seconds
Fnon.Wait.Remove(3000);

If you want to modify the default Wait settings, you can use the Init function. Below is the list of all available properties you could change.

Fnon.Wait.Init({
  fontFamily: '"Quicksand", sans-serif',
  svgSize: { w: "100px", h: "100px" },
  svgColor: "#029eff",
  textColor: "#029eff",
  textSize: "16px",
  clickToClose: false,
  background: "rgba(255,255,255,0.5)",
  zindex: 4000,
  containerSize: "350px",
});

---

3- Box

well, it's basically similar to Wait, but it is used for blocking specific HTML element where Wait will block everything. You simply have to provide the function with an element or with the respective selector.

// @param1 {string or element}: required, HTML element or respective selector.
// @param2 {string}: optional, message text in String format[it's not a plane text, means you could add your own HTML syntax].
// @param3 {Object}: Optional,update the initialize options with new options for current wait block.
// Simple call
Fnon.Box.Infinity("div.className");
// Call with a message
Fnon.Box.Ripple("form.login", "Loading");
// call with html element, message and change some options
const form = document.querySelector("form#login");
Fnon.Wait.Liquid(form, "Please Wait", {
  textSize: "14px",
  textColor: "#029eff",
});

Change and Remove works similar to Wait.

Init also, works the same but below are the list of settings you can change:

Fnon.Box.Init({
        fontFamily:'"Quicksand", sans-serif',
        svgSize: { w: '100px', h: '100px' },
        svgColor: GColors.Primary,
        background: 'rgba(255,255,255,0.8)',
        zindex: 4000,
        textColor: '#029eff',
        textSize: '16px'
});

---

4- Alert

A simple alert dialog with a single button. Click the close button to dismisses it.

Alert functions are based on bootstrap basic colors Light Primary Success Danger Warning Info Dark

// @param1 {(string | HTMLElement) or json object}: required, message or an object with any settings you wish to modify.
// @param2 {string}: optional, title || if not provided title section won't be displayed.
// @param3 {string}: Optional, ok button text || default is Ok.
// @param4 {function}: Optional, a callback function if needed.
// Simple use
Fnon.Alert.Success("Message", "Title", "Ok Button", () => {
  console.log("I am a callback");
});
// Display by providing setting object
Fnon.Alert.Danger({
  title: "Confirmation",
  message: "Are you sure?",
  callback: () => {
    // do some thing
    console.log("Dismissed");
  },
});

// remaining functions are:
// Fnon.Alert.Primary(.....);
// Fnon.Alert.Warning(.....);
// Fnon.Alert.Dark(.....);
// Fnon.Alert.Light(.....);
// Fnon.Alert.Info(.....);

Here also you can use the Init function to change the default settings, but when it comes to theme and colors, this will effect the Light function only.

Fnon.Alert.Init({
  message: "", // can be a string or an HTMLElement
  title: "",
  titleColor: GColors.Dark,
  titleBackground: GColors.Light,
  color: "#2b2b2b",
  background: "rgba(0, 0, 0, 0.1)",
  fontFamily: '"Quicksand", sans-serif',
  width: "nl",
  closeButton: true,
  animation: "slide-top",
  closeButton: false,
  callback: undefined,
  icon: undefined,
  iconColor: "#000",
  showIcon: false,
  btnOkText: "Ok",
  btnOkColor: "#d4d4d4",
  btnOkBackground: "#d4d4d4",
  btnOkShadow: "rgba(0, 0, 0, 0.2)",
  btnOkBorderColor: "#d4d4d4",
  delButtons: false,

  autoFocus: false, // focus when model is loaded otherwise first button will be focused
  autoFocusTag: "input:not([disabled])", // default focus to input which is not disabled
  autoFocusDelay: 0, //if u need to dealy the focus

  zIndex: 4000,

  showMaxMin: false, // show maximize - minimize button if title bar exists

  // Functions
  beforeShow: undefined,
  afterShow: undefined,
  defaultBefore: undefined,
  defaultAfter: undefined,

  // Extra Functions
  onInit: undefined, // Fires once the Layout is rendered but your body content is not
  onClosing: undefined, // Fires on closing but the html element still exists
  onClosed: undefined, // Fires once the html is removed

  layout: "hbf", /