About & Usage

Bootstrap Card Editor is a simple card editor and render for business intelligence dashboard or other usage.

You have possibility to integrate editor in DOM element or use modal editor

With Bootstrap Card Editor you configure a static card or dynamic card with JSON integration.

Bootstrap Card Editor provide two editors :

• inline editor
• modal editor

After configuration, Bootstrap Card Editor dispatch an event cardEditorConfigure with a ful configuration for implementation.

Example :

Or dynamic example, a configuration for DynamicFetcher, a very simple ETL for JSON.

With this configuration, render card is very simple :

A list of commonly used resources that I find helpful are listed in the acknowledgements.

Built With

• Bootstrap
• JQuery
• Mustache

Getting Started

Prerequisites

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/jeremyrncp/bootstrap-card-editor.git

2. Install NPM packages

   npm install

3. Install NPM packages

   npm run build

   or

4. Install NPM packages

npm install bootstrap-card-editor

Documentation

CardEditor

import  {  CardEditor  }  from  "./card-editor.js";

modalEditor()

Render editor in modal

• Example: * // Render editor in modal const cardEditor = new CardEditor() cardEditor.modalEditor()
• Returns: void —

inlineEditor(elm)

Render editor in element

• Parameters: elm — * — : a valid element
• Example: * // Render editor in element const cardEditor = new CardEditor() const elm = document.querySelector("div") cardEditor.inlineEditor(elm)
• Returns: void —

getConf()

Get render editor configuration

• Returns: object — configuration of CardEditor

render(elm)

Render card in element with card editor configuration

• Example: * // Render editor in element const cardEditor = new CardEditor() const elm = document.querySelector("div") cardEditor.inlineEditor(elm)
• Parameters: elm — * — : a valid element

DynamicFetcher

import  {  DynamicFetcher  }  from  "./dynamic-fetcher";

renderEditor(elm)

Render editor in element

• Parameters: elm — * — : a valid element
• Example: * // Render to div const div = document.querySelector("div") const dynamicFetcher = new DynamicFetcher() dynamicFetcher.render(div);
• Returns: void —

renderResult(elm, conf = null)

Render result in element with configuration, render is refreshed

• Parameters:
  • elm — * — : a valid element
  • conf — * — : a valid configuration or null
• Example: * // Render to div const div = document.querySelector("div") const dynamicFetcher = new DynamicFetcher() dynamicFetcher.renderResult(div, {url:"https://gist.githubusercontent.com/rominirani/8235702/raw/a50f7c449c41b6dc8eb87d8d393eeff62121b392/employees.json", choice: { type: "last", data: "preferredFullName", parent: "Employees" }, refresh: 3600});
• Returns: void —

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Jérémy Gaultier - [email protected]

Project Link: https://github.com/jeremyrncp/bootstrap-card-editor