A box to compile and run Ruby code on your website. This plugin uses OpalRB libraries.

Installation

Add the dist files to your project. You will need js/opalbox.jquery.min.js , css/opalbox.min.css and a theme, for example css/themes/opalbox.light.min.css . You can add all themes adding css/themes/all_themes.min.css file.

Now, link it into your website. In <head> tag:

<!-- Styles --> < link rel = " stylesheet " type = " text/css " href = " <route to opalbox.min.css> " /> < link rel = " stylesheet " type = " text/css " href = " <route to theme> " />

Javascript files can be defined on <head> tag or at bottom of your website.

<!-- JS Dependencies (You can use CDN or local files) --> < script type = " text/javascript " src = " http://cdn.opalrb.org/opal/0.8.1/opal.min.js " ></ script > < script type = " text/javascript " src = " http://cdn.opalrb.org/opal/0.8.1/opal-parser.min.js " ></ script > < script type = " text/javascript " src = " https://code.jquery.com/jquery-1.11.3.min.js " ></ script > <!-- JS File --> < script type = " text/javascript " src = " <route to opalbox.jquery.min.js> " ></ script >

Use

To create OpalBoxes, define an HTML element. Predefined ruby code can be inside of this tags:

< div class = " ruby-code " > class Value def initialize(val) @value = val end def my_value return @value end end value = Value.new(10) value.my_value </ div >

Next call to opalBox in a script:

$( document ).ready( function (){ $( ' .ruby-code ' ).opalBox(); });

This code create isolated opalBoxes to run your Ruby code. Try it ;)

class Value def initialize(val) @value = val end def my_value return @value end end value = Value.new(10) value.my_value

Options

opalBox() function accepts an object with optios. Available options and default values are:

// Default options! defaults = { // Theme of the opalBox theme : ' light ' , // Listener when compile and show the data onComplete : null , // Title of the block title : ' Ruby code ' , // Placeholder when there aren't any result result : ' Result will appear here ' , // Auto-adjust height of the textarea to the code autoadjust : false };

Themes

List of available themes:

light (by @laux_es) def hello return 'hello' end hello

dark (by @laux_es) def hello return 'hello' end hello

Create a theme

First of all, I recommend you to read Develop section. To create theme, create a file on src/sass/themes with name opalbox.your_theme.scss . Insert all styles inside of a global class. The name of the class will be the string of theme option (see options). For example, for light theme:

.opbox.light { /* Your style... */ }

You can use light theme as example.

Develop

To work with opalBox-jquery you will need to install NodeJS, NPM and Gulp.

After install base dependencies, clone the repository and run npm install to download development dependencies:

git clone https://github.com/Angelmmiguel/opalbox-jquery.git cd opalbox-jquery npm install

All changes must be performed on src/sass and src/js folders, because src/css and dist folders are generated automatically with Gulp.

When you finish your changes, execute gulp on your terminal and all minified/compiled files will be generated.

Contribute

To contribute opalBox-jquery:

Create an issue with the contribution: bug, enhancement (except when create a new theme)

Fork the repository and make all changes you need (See develop)

Compile all files with gulp

Create a pull request when you finish

License

Opal is released under MIT License. See Opal License.

OpalBox-Jquery is released under the MIT license. Copyright @Laux_es ;)