Skip to content

axpro/ars-arsenal

 
 

Repository files navigation

Ars Arsenal

A gallery picker


Build Status Code Climate Coverage Status


Example

Usage

var ArsArsenal = require('ars-arsenal')

var app = document.getElementById('app')

ArsArsenal.render(app, {

  resource: 'photo', // the noun used for selection, i.e. "Pick a photo"

  url: 'photo/resource/endpoint',

  multiselect: false,

  makeURL: function (url, id) {
    // define how the endpoint url is constructed
    if (id) {
      return url + "/" + id
    }

    return url
  },

  makeQuery: function (term) {
    // define how the search query string is built
    return "q=" + term
  },

  onError: function(response) {
    // format errors before they are sent as a "string" value
    // to the component
    return response.code + ": " + response.message
  },

  onFetch: function (response) {
    // format the response, useful if you do not control the JSON
    // response from your endpoint
    return data
  },

  onChange: function (id) {
    // Whenever a new item is picked, this event is triggered
    console.log("The value was changed to %s", id)
  }

})

Response format

[
  {
    "id": 1,
    "attribution": "League of Legends",
    "name": "Alistar",
    "caption": "Lorem ipsum dolor sit amet",
    "url": "images/alistar.jpg"
  },
  //...
]

See example!

Contributing

Setup

npm install -d
npm start

About

A react gallery picker

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 81.4%
  • CSS 15.8%
  • Makefile 1.6%
  • HTML 1.2%