Giter Site home page Giter Site logo

beat-blocks's Introduction

#Beat Blocks

A helpful scaffolding for building out configurable blocks that describe themselves.

npm dependencies npm dependencies Bower version

NPM

##Global Build Dependencies

  • node/npm - For package management
  • grunt - For task management
  • browserify - For bundling various src files into a single distribution

##Dependencies

##Usage <script type="text/javascript" src="../dist/beat-blocks.js"></script> <script type="text/javascript"> var mySimpleWidget = BeatBlocks.widget('image'); mySimpleWidget.render('#widget'); </script>

See the examples folder of this repo for more detailed information.

##Dev tools install

In root directory of the repo...

npm install

##Development

For development, be sure to have grunt watch running during development so that the bundled distribution is built. This also runs a code linter and unit tests on watch.

Other helper grunt commands are

grunt test - runs lint, complexity checks, and automated tests
grunt build - compiles a distribution copy of the library

##Widget structure

Widgets have a number of methods that make up a widget object. Understanding what each of these methods do is helpful in understanding how to create new and unique widgets. It's helpful to examine src/widget-base.js to get a better understanding of the specifics of how widgets behave.

At their core, a widget is a template file and a simple javascript object.

###Helpful methods

  • .config() - Widget configuration get/setter Accepts 0, 1 or 2 parameters

    .config() - Returns the configuration of a widget as an object. .config(obj value) - Sets multiple config options, returns the full configuration of the widget as an object. .config(string key) - Returns the configuration of setting defined by the key of string. .config(string key, string|object value) - Sets the configuration for key to the value of value.

  • .render(element) - Renders a widget where at a particular DOM element. Element can either be a string (CSS selector) or a DOMElement.

  • .compile() - This method handles preparation of any configuration variables before rendering into a template. Override this method in your custom widgets if you want to load any external data into your template, or generate any additional content for your template before rendering.

  • .link() - This method handles any event reactions or DOM manipulation that needs to happen after the initial DOM render. Override this method in your custom widgets to define your own js behaviors.

  • .template() - The actual rendering method for a widget. By default, widgets use Handlebars.js for templating purposes.

beat-blocks's People

Contributors

fillerwriter avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

un-ocha

beat-blocks's Issues

Add properties method to widget base

We want components to be able to tell users what kind of information they need to have in their configuration. This should enable us to write generic BeatBlock integrations to provide config to a component.

We should use the JSON-Schema standard as a starting point for how to format this information.

http://json-schema.org/

Make Handlebars/D3 optional

We currently define a handlebars plugin in BeatBlocks that doesn't check to see if handlebars exists or not, so we get an error importing BeatBlocks without also having Handlebars installed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.