flexiejs v0.5.4

FlexieJS v0.5.4

Lightweight native javascript modal window framework

Installation

Using npm

npm install flexiejs --save

Using script tag

Download flexie.min.js from this repository and insert it in your HTML:

<!-- import flexie -->
<script type="text/javascript" src="some-path/flexie.min.js"></script>

Usage

import {Dialog, ImageHolder} from "flexiejs";

/*
 * Dialog window
 */
const dialog = new Dialog({
  // options
});

dialog.show();

/*
 * ImageHolder
 */
const imageHolder = ImageHolder({
  src: "./img.jpg"
});

imageHolder.show();

Dialog

Default dialog window

const dialog = new Dialog();
dialog.show();

Options

Also, you can cutomize buttons and their actions To add buttons to your dialog box, add buttons array to Flexie options, like this:

new Dialog({
  // some options
  buttons: ["ok", "no", "cancel"]
});

Each element of this array is the text that will be displayed on the corresponding button

buttons0 is confirm button (default), buttons1 - decline, buttons2 - cancel

To handle "click" event on this buttons, add this callbacks to Flexie options:

new Dialog({
  // some options
  buttons: ["ok", "no", "cancel"],
  onConfirm: function(flexie) { alert("onConfirm()") },
  onDecline: function(flexie) { alert("onDecline()") },
  onCancel: function(flexie) { alert("onCancel()") }
});

Each callback function receives a Flexie window object as a parameter. If you need to prevent close action, add this line to your callback function:

new Dialog({
  // some options
  onConfirm: function(flexie) {
    flexie.preventClose();
    // some logic
  }
});

Callback functions

Custom window sample

const dialog = new Dialog({
  color: "green",
  title: "Ask the question",
  content: "Do you want to know the greatest secret?",
  buttons: ["yea!", "nope"],
  onConfirm: function(flexie) {
    console.log("yes");
  },
  onDecline: function(flexie) {
    console.log("no");
  }
});
dialog.show();

ImageHolder

If you need to display some image in dialog window, you should use ImageHolder window:

const image = new ImageHolder({
  src: "https://img2.goodfon.ru/wallpaper/big/0/e9/priroda-derevya-les-doroga-7284.jpg",
  width: 550,
  title: "Road in forest"
});

Options

Animation

You can customize Flexie window open animation. To do this, create animation object

const modal = new Dialog({
  color: "yellow",
  title: "Custom animation demo",
  content: "This animation is not so beautiful as the previous one",
  buttons: ["okay =("],
  onConfirm: function(flexie) {
    console.log("okay =( clicked");
  },
  animation: {
    duration: 1000,
    timingFunction: "easeOutBounce",
    type: "fromTop"
  }
});
modal.show();

Animation options