Package Exports

cuic

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cuic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Cuic

Cuic stands for Common User Interface Components and aims to offer various UI components like dialogs, popups, notifications, tooltips, etc.

The code is tested against bugs.

Styling

Cuic has a default styling that you must load to display components correctly.

// Load styles
import cuicStyles from "cuic/dist/cuic.css";

Components

Element

This is the most generic component that contains all the logic of any component, all components inherit from Element.

import Element from "cuit/dist/ui/element";

const element = new Element({
  animationClass: null,
  className: null,
  css: null,
  debug: false,
  maximized: false,
  maximizedX: false,
  maximizedY: false,
  namespace: null,
  parent: null,
});

// Element methods
element.addClass(String);
element.addPositionClass(String, String);
element.align(String);
element.alignInParent();
element.alignInScreen();
element.anchor(String, String, Element);
element.append(Element);
element.appendTo(Element);
element.attr(String, Object);
element.autoFit();
element.autoResize();
element.border();
element.children(String);
element.click();
element.clone();
element.closest(String);
element.css(Object);
element.data(String, Object);
element.debug();
element.disable();
element.empty();
element.enable();
element.enterFullScreen();
element.find(String);
element.focus();
element.getClasses();
element.hasClass(String);
element.hasParent();
element.height();
element.hide();
element.html(html);
element.innerHeight();
element.innerWidth();
element.insertAfter(Element);
element.insertBefore(Element);
element.isAbsolute();
element.isAligned(String);
element.isAnchored(String);
element.isChildOf(Element);
element.isDisabled();
element.isDirectChildOf(Element);
element.isEnabled();
element.isFixed();
element.isHidden();
element.isInDOM();
element.isMaximized();
element.isMaximizedX();
element.isMaximizedY();
element.isMinimized();
element.isPosition(String);
element.isRelative();
element.isRemoved();
element.isShown();
element.isStatic();
element.margin();
element.maximize(Function);
element.maximizeX(Function);
element.maximizeY(Function);
element.minimize(Function);
element.node();
element.off(String, Function);
element.offset();
element.offsetParent();
element.offsetParentNode();
element.on(String, Function);
element.once(String, Function);
element.onAligned(Function);
element.onAnchored(Function);
element.onMaximize(Function);
element.onMaximized(Function);
element.onMinimize(Function);
element.onMinimized(Function);
element.onRemoved(Function);
element.outerHeight(Boolean);
element.outerWidth(Boolean);
element.padding();
element.parent();
element.parentNode();
element.position();
element.positionOnScreen();
element.prepend(Element);
element.prependTo(Element);
element.remove();
element.removeClass(String);
element.scrollHeight();
element.scrollLeft();
element.scrollTop();
element.scrollWidth();
element.show();
element.text(String);
element.val(Object);
element.width();

Component

This is a generic component that most components inherit from, it only adds the component CSS class.

This component inherits from Element.

import Component from "cuit/dist/ui/component";

const component = new Component();

Button

A basic clickable button.

This component inherits from Component.

import Button from "cuit/dist/ui/button";

const button = new Button({
  className: 'btn btn-default btn-secondary',
  disabled: false,
  label: null,
  shortcut: null,
  title: null,
  type: 'button',
});

button.on("click", () => {
    console.log("button clicked");
});

Closable

This is a generic component with opening and closing capabilities.

This component inherits from Component.

import Closable from "cuit/dist/ui/closable";

const closable = new Closable({
  autoClose: false,
  autoCloseDelay: 0,
  autoRemove: false,
  closable: true,
  closed: false,
  closeOnBlur: false,
  closeOnFocus: false,
  closeOnMouseLeave: false,
});

// Closable methods
closable.autoClose(Function);
closable.close(Function);
closable.isClosable();
closable.isClosed();
closable.onClose(Function);
closable.onClosed(Function);
closable.onOpen(Function);
closable.onOpened(Function);
closable.open(Function);
closable.toggle(Function);

Dialog

A dialog can be configured with a header and title, a body and a footer with buttons.

This component inherits from Closable.

import Button from "cuit/dist/ui/button";
import Dialog from "cuit/dist/ui/dialog";

const dialog = new Dialog({
  animationClass: 'cc-anim-fade cc-anim-resize',
  autoClose: false,
  autoCloseDelay: 0,
  autoRemove: true,
  autoResize: true,
  buttons: [],
  closable: true,
  closeButton: null,
  closeButtonClass: 'glyphicon glyphicon-remove-sign',
  closed: true,
  closeOnBlur: false,
  closeOnFocus: false,
  closeOnMouseLeave: false,
  content: null,
  contentHeight: null,
  contentWidth: null,
  movable: true,
  maximized: false,
  modal: true,
  namespace: 'dialog',
  parent: document.body,
  position: 'center',
  resizable: false,
  title: null,
  zIndex: 10,
});

// Dialog methods
dialog.addButton(Button);
dialog.close(Function);
dialog.getContent();
dialog.getFooter();
dialog.getHeader();
dialog.open(Function);
dialog.resizeContent();
dialog.setContent(String);
dialog.setFooter(String);
dialog.setHeader(String);
dialog.setTitle(String);

Guide

A guide is used to assist users, to explain things in an interactive way like "click here, then here...".

import Button from "cuit/dist/ui/button";
import Guide from "cuit/dist/ui/guide";

const guide = new Guide({
  anchor: 'top',
  autoClose: false,
  autoRemove: false,
  autoScroll: true,
  autoStart: false,
  closed: true,
  content: null,
  duration: 5000,
  namespace: 'guide',
  steps: null,
  zIndex: 9,
});

// Guide methods
guide.addStep(Object);
guide.getCurrentStep();
guide.getPopup();
guide.getSteps();
guide.goTo(Number);
guide.next();
guide.onStarted(Function);
guide.onStepChanged(Function);
guide.onStopped(Function);
guide.previous();
guide.start();
guide.stop();

Movable

A generic component that can be moved with the mouse.

This component inherits from Component.

import Element from "cuit/dist/ui/element";
import Movable from "cuit/dist/ui/movable";

const movable = new Movable({
  constraintToParent: true,
  handle: null,
  handleClassName: 'cc-movable-handle',
  horizontally: true,
  namespace: 'movable',
  rootOnly: true,
  vertically: true,
});

// Resizable methods
movable.addMoveHandle(Element);
movable.onMove(Function);
movable.onMoveEnd(Function);
movable.onMoveStart(Function);

Notification

A simple notification where you can put anything inside.

This component inherits from Closable.

import Notification from "cuit/dist/ui/notification";

const notification = new Notification({
  animationClass: 'cc-anim-fade cc-anim-zoom',
  autoClose: true,
  autoCloseDelay: 2000,
  autoRemove: true,
  closable: true,
  closed: true,
  closeButton: '',
  closeButtonClass: 'glyphicon glyphicon-remove-sign',
  closeOnBlur: false,
  closeOnFocus: false,
  closeOnMouseLeave: true,
  content: null,
  namespace: 'notification',
  parent: document.body,
  position: 'center',
  zIndex: 100,
});

// Notification methods
notification.close(Function);
notification.getContent();
notification.open(Function);
notification.setContent(String);

NotificationStack

A notification stack is a group of notifications, easier to manage.

This component inherits from Group.

import NotificationStack from "cuit/dist/ui/notification-stack";

const stack = new NotificationStack({
  namespace: 'notification-stack',
  position: 'right top',
  zIndex: 10,
});

// NotificationStack methods
stack.close(Function);
stack.open(Function);

Overlay

An overlay is used to cover areas with a screen.

This component inherits from Closable.

import Overlay from "cuit/dist/ui/overlay";

const overlay = new Overlay({
  animationClass: 'cc-anim-fade',
  autoClose: false,
  autoCloseDelay: 0,
  autoRemove: false,
  closable: false,
  closed: false,
  closeOnBlur: false,
  closeOnFocus: false,
  closeOnMouseLeave: false,
  namespace: 'overlay',
  zIndex: 1,
});

// Overlay methods
overlay.close(Function);
overlay.open(Function);

Panel

A panel can be configured with a header and title, a body and a footer.

This component inherits from Closable.

import Panel from "cuit/dist/ui/panel";

const panel = new Panel({
  animationClass: 'cc-anim-fade cc-anim-slide',
  closable: true,
  closeButton: null,
  closeButtonClass: 'glyphicon glyphicon-remove-sign',
  closed: true,
  content: null,
  footer: null,
  maximized: false,
  namespace: 'panel',
  parent: null,
  position: 'left top',
  title: null,
  zIndex: 1,
});

// Panel methods
panel.close(Function);
panel.getContent();
panel.getFooter();
panel.getHeader();
panel.open(Function);
panel.resizeContent();
panel.setContent(String);
panel.setFooter(String);
panel.setHeader(String);
panel.setTitle(String);

A popup can be used to display things that are hidden by default.

This component inherits from Closable.

import Popup from "cuit/dist/ui/popup";

const popup = new Popup({
  anchor: 'top',
  animationClass: 'cc-anim-zoom',
  autoClose: false,
  autoCloseDelay: 0,
  autoRemove: false,
  buttons: [],
  closable: true,
  closed: true,
  closeOnBlur: true,
  closeOnFocus: false,
  closeOnMouseLeave: false,
  content: null,
  namespace: 'popup',
  target: null,
  title: null,
  zIndex: 9,
});

// Popup methods
popup.addButton(Button);
popup.close(Function);
popup.getContent();
popup.getFooter();
popup.getHeader();
popup.open(Function);
popup.setContent(String);
popup.setFooter(String);
popup.setHeader(String);
popup.setTitle(String);
popup.updateTail();

Resizable

A generic component that can be resized.

This component inherits from Component.

import Resizable from "cuit/dist/ui/resizable";

const resizable = new Resizable({
  handleSize: 10,
  horizontally: true,
  keepRatio: false,
  maxHeight: null,
  maxWidth: null,
  minHeight: 1,
  minWidth: 1,
  namespace: 'resizable',
  vertically: true,
});

// Resizable methods
resizable.onResize(Function);
resizable.onResizeEnd(Function);
resizable.onResizeStart(Function);

Selectable

A generic component that can be selected.

This component inherits from Component.

import Selectable from "cuit/dist/ui/selectable";

const selectable = new Selectable({
  namespace: 'selectable',
  selected: false,
});

// Selectable methods
selectable.deselect(Function);
selectable.isSelected();
selectable.onDeselected(Function);
selectable.onSelected(Function);
selectable.select(Function);

Switcher

A switcher simply loops through its children, it can be used as a slider.

This component inherits from Closable.

import Switcher from "cuit/dist/ui/switcher";

const switcher = new Switcher({
  autoStart: true,
  delay: 3000,
  namespace: 'switcher',
  repeat: true,
});

// Switcher methods
switcher.first();
switcher.getActiveElement();
switcher.getElementAt();
switcher.getIndex();
switcher.goTo();
switcher.isStarted();
switcher.last();
switcher.next();
switcher.previous();
switcher.start();
switcher.stop();

A tooltip is used to display text near the pointer, it can be static or it can follow the pointer.

This component inherits from Closable.

import Tooltip from "cuit/dist/ui/tooltip";

const tooltip = new Tooltip({
  anchor: 'right',
  animationClass: 'cc-anim-zoom',
  attribute: 'title',
  autoClose: false,
  autoCloseDelay: 0,
  autoRemove: false,
  closable: true,
  closed: true,
  closeOnBlur: false,
  closeOnFocus: false,
  closeOnMouseLeave: false,
  followPointer: true,
  namespace: 'tooltip',
  selector: '[title]',
  zIndex: 100,
});

// Tooltip methods
tooltip.close(Function);
tooltip.getContent();
tooltip.open(Function);
tooltip.setContent(String);
tooltip.updateTail();

Changelog

History of releases is in the changelog.

License

The code is released under the MIT License.

If you find this lib useful and would like to support my work, donations are welcome :)