Code Monkey home page Code Monkey logo

shortcode.js's Introduction

Replace Wordpress-style shortcodes with anything. No dependencies required.

Usage

Shortcode accepts 2 arguments: an element, and an object of tags to match.

Each tag method returns a string to replace the original tag (in the DOM) and accepts an (optional) asynchronous callback. this is bound to the match object.

/* Replaces [hello text="Hello world"] in `body` with "Hello world" */
new Shortcode(document.querySelector('body'), {
  hello: function() {
    return this.options.text;
  }
});

Tip: Because shortcode replaces an element's html, you will lose existing event bindings inside that element. Use delegated bindings where possible and call shortcode at the start of your code.

Features

  • Supports multiple tag instances
  • Supports single and start-end tags
  • Supports multi-line tags
  • Supports asynchronous callbacks
  • Supports DOM or jQuery selectors
  • Includes jQuery plugin definition
  • Ignores tags inside pre and code
  • Tested with Jasmine

Supported browsers

Shortcode.js should work in any browser that supports Function.prototype.bind (Sorry IE7 & 8). If you need to support <IE9, try the polyfill published in MDN.

Using async

Sometimes you need to do asynchronous work. Don't return anything from the shortcode method. Instead, call done with your return value to update the DOM.

new Shortcode(document.querySelector('body'), {
  hello: function(done) {
    var self = this;

    /* setTimeout is used here to simulate an async event */
    setTimeout(function() {
      done(self.options.text);
    }, 1000);
  }
});

Start and end tags

Shortcode.js supports tags like [note]This is a note[/note]. The content between tags will be availble in your callback under this.contents.

new Shortcode(document.querySelector('body'), {
  note: function(done) {
    return this.contents;
  }
});

jQuery

While shortcode.js doesn't rely on jQuery, you may find it convenient to use. Shortcode can accept a jQuery object or a DOM object as the first argument.

Alternatively, a jQuery plugin wrapper is supplied.

$('body').shortcode({
  hello: function() {
    return this.options.text;
  }
});

Releases

See Releases for current version and release notes.

Contributing and dev setup

See CONTRIBUTING.md

License

MIT (c) 2014 Nic Aitch

shortcode.js's People

Contributors

nicinabox avatar

Watchers

James Cloos avatar Amal Gamage avatar

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.