OpalBox-JQuery
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 ;)
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 ;)