Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/softvar/embed-jsfiddle
Web Component wrapper for jsFiddle's widgets using Polymer
https://github.com/softvar/embed-jsfiddle
Last synced: 4 days ago
JSON representation
Web Component wrapper for jsFiddle's widgets using Polymer
- Host: GitHub
- URL: https://github.com/softvar/embed-jsfiddle
- Owner: softvar
- License: mit
- Created: 2014-05-15T23:25:01.000Z (over 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2014-05-24T22:43:37.000Z (over 10 years ago)
- Last Synced: 2024-05-02T00:02:13.149Z (7 months ago)
- Language: JavaScript
- Homepage: http://softvar.github.io/embed-jsfiddle
- Size: 195 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <embed-jsfiddle>
Web Component wrapper for [jsFiddle's widgets](http://doc.jsfiddle.net/use/embedding.html) using [Polymer](http://www.polymer-project.org/).
> Maintained by [Varun Malhotra](https://github.com/softvar).
## Demo
> [Check it live](http://softvar.github.io/embed-jsfiddle).
## Installation
Install the component using [bower](bower.io):
```sh
$ bower install embed-jsfiddle
```
Or [Download as ZIP](http://github.com/softvar/embed-jsfiddle/archive/master.zip)
## Usage
1. Import Web Components' polyfill:
If using bower, then
```html
```
Otherwise
```html
```
2. Import Custom Element:
If using bower, then include the below code inside `...`
```html
```
Else if using the `download as zip` copy, then include the below code inside `...`
```html
```
3. Start using it!
```html
```
## Setup
In order to run it locally you'll need a basic server setup.
1. Install [NodeJS](http://nodejs.org/download/).
2. Install [GruntJS](http://gruntjs.com/):
```sh
$ [sudo] npm install -g grunt-cli
```
3. Install local dependencies:
```sh
$ npm install
```
4. Run a local server and open `http://localhost:8000`.
```sh
$ grunt connect
```
Or, you can have a bare minimum local server using python.
1. Clone this repo.
```sh
$ git clone https://github.com/softvar/embed-js
```
2. Change the drectory-path in terminal.
```sh
$ cd /path/to/this/dir
```
3. Run a local server
```sh
# to run local server on specified `PORTNUMBER`
$ python -m SimpleHTTPServer `PORTNUMBER`
```
```sh
# to run local server on port:8000
$ python -m SimpleHTTPServer
```
4. Open and point your browser to [http://locahost:8000](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](http://doc.jsfiddle.net/use/embedding.html).
## 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](https://github.com/softvar/embed-jsfiddle/releases).
## License
[MIT License](http://opensource.org/licenses/MIT) © Varun Malhotra