embed-jsfiddle

Web Component wrapper for jsFiddle's widgets using Polymer

Comment

<embed-jsfiddle>

Web Component wrapper for jsFiddle's widgets using Polymer.

Maintained by Varun Malhotra.

Demo

Check it live.

Installation

Install the component using bower: 

$ bower install embed-jsfiddle

Or Download as ZIP

Usage

  1. Import Web Components' polyfill:

    If using bower, then

    <script src="bower_components/platform/platform.js"></script>

    Otherwise

    <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/polymer.js"></script>

  2. Import Custom Element:

    If using bower, then include the below code inside <head>...</head>

    <link rel="import" href="bower_components/embed-jsfiddle/src/embed-jsfiddle.html">

    Else if using the download as zip copy, then include the below code inside <head>...</head> 

    <link rel="import" href="src/embed-jsfiddle.html">

  3. Start using it!

    <embed-jsfiddle user="softvar" fiddleid="xxxxx"></embed-jsfiddle>

Setup

In order to run it locally you'll need a basic server setup.

  1. Install NodeJS.

  2. Install GruntJS:

    $ [sudo] npm install -g grunt-cli

  3. Install local dependencies:

    $ npm install

  4. Run a local server and open http://localhost:8000.

    $ grunt connect

Or, you can have a bare minimum local server using python.

  1. Clone this repo.

    $ git clone https://github.com/softvar/embed-js

  2. Change the drectory-path in terminal.

    $ cd /path/to/this/dir

  3. Run a local server 

    # to run local server on specified `PORTNUMBER`
$ python -m SimpleHTTPServer `PORTNUMBER` 

    # to run local server on port:8000
$ python -m SimpleHTTPServer

  4. Open and point your browser to http://locahost:8000.

Options

<embed-jsfiddle>

Attribute Options Default Description
user string `` User who created it
fiddleid string `` The ID of the Fiddle
skin light, presentation light The skin layout
tabs result,js,html,css result,js,html The tabs that are going to be rendered
width int 800 The width of the element
height int 300 The height of the element

See jsFiddle Embed Options official documentation.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

History

For detailed changelog, check Releases.

License

MIT License © Varun Malhotra

Built With

Share this project:

Updates