0.1.2 • Published 5 years ago

@softserveopensource/fdbq v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago

Table of contents

Installation

  • Add package to a project

    • using Yarn

      yarn add fdbq

    • using NPM

      npm i -S fdbq

  • Add javascript file

    import "fdbq"

  • Include default theme (optional)

    import "fdbq/theme.css"

  • Enable on a page

      var instance = new Fdbq(config);
  instance.init();

Configuration

{
  mountNode: "body",
  placement: "bottom right",
  modal: {
    title: "Help us get better",
  },
  submit: {
    url: "http://localhost:3000/api/test-feedback"
  },
  subHeader: {
    title: "Feedback",
    description: "Please take a short survey"
  },
  questions: [
    {
      name: "feedback[usage]",
      label: "Please share your feedback upon usage of Practice Dashboard",
      value: "",
      placeholder: "Type here",
      type: "text",
      required: true,
      hint: "Please, describe your opinion about the service we provide."
    }
  ]
}
Instance configuration
SettingRequiredTypeOptionsDefaultDescription
mountNodeNoString"body"Root node to mount lugin into
placementYesStringbottom, top, left, rightButton placement on a screen
appearanceNoStringfade, slide-up, slide-downfadeModal appearance animation
modalNoObjectModal settings
submitYesObjectfuncModal submit handler. Default handler submit on url
subHeaderNoStringModal body sub-header
questionsNoArrayObject[]List of questions for a modal
Modal configuration modal
SettingRequiredTypeOptionsDefaultDescription
titleNoString""Modal title
Modal configuration subHeader
SettingRequiredTypeOptionsDefaultDescription
titleNoString""Modal body title
descriptionNoString""Modal body description
Modal configuration submit

  • as Function

    {
  // ...
  submit: function(fields, instance) {
    console.log(fields, instance);
  },
  // ...
}

  • as Object

SettingRequiredTypeOptionsDefaultDescription
urlYesString""Submit url for the form. (Uses POST request)
Modal configuration questions
SettingRequiredTypeOptionsDefaultDescription
nameYesStringName for a input field. Used as submit param
labelYesStringInput field label
valueNoStringDefault value for the input
placeholderNoStringInput placeholder
typeYesStringText, StringInput field type. Rendered in different style
requiredNoBooleanfalseInput required flag
hintNoStringHint text for input field

Check out a configuration example in examples/basic/index.html

Events

  • hook into a submit complete with fdbq-complete Event.

    document.addEventListener("fdbq-complete", function(event) { console.log(event.data, event.instance); });

TODO:
  • add more event hooks
Feedback
@infinitebrahmanuniverse/nolb-_sof@everything-registry/sub-chunk-850
0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago