sinatra-jshlp

Helpers for js and css assets in Sinatra applications.

Installation

Add this line to your application's Gemfile:

gem 'sinatra-jshlp'

And then execute:

$ bundle

Or install it yourself as:

$ gem install sinatra-jshlp

Usage

In Classic Applications

# app.rb
require 'sinatra'
require 'sinatra/jshlp'

#...

In Modular Applications

# app.rb
require 'sinatra/base'
require 'sinatra/jshlp'

class MyApp < Sinatra::Base
  register Sinatra::JSHlp

  # ...

end

JS and CSS from view to layout

Simple layout

<html>
<head>
  <link rel="stylesheet" href="/css/style.css" />
  <%= stylesheets %>
</head>
<body>

  <%= yield %>

  <script src="/js/script.js"></script>
  <%= javascripts %>
</body>
</html>

Connect js and css in view

<%
  jscode "alert('Hello from Main Page!');"
  jslink '/lib/dateplugin.js'
  jslink '/js/mainpage.js'
  csslink '/css/mainpage.css'
  jscode "alert('Thanx you!');"
%>
<h1>Main Page</h1>

Result HTML

<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/mainpage.css" />
</head>
<body>
  <h1>Main Page</h1>
  <script src="/js/script.js"></script>
  <script src="/js/mainpage.js"></script>
  <script src="/js/dateplugin.js"></script>
  <script>
    alert("Hello from Main Page!");
    alert('Thanx you!');
  </script>
</body>
</html>

If you connect several times the JS or CSS file, in html once it connects.

# view.erb
<%
  jslink '/lib/jslib.js'
  jslink '/lib/jslib.js'
  jslink '/lib/jslib.js'
%>

HTML Result

...
<body>
...
<script src="/js/script.js"></script>
<script src="/lib/jslib.js"></script>
</body>
...

Dividing javascripts

It is possible to split the output code.

<%= javascripts %>

analog of

<%= jslinks %>
<%= jscodes %>

JS library

Register your library

configure do
  jslibreg( 
    name: "datetimepicker",
    jslinks: [ "/lib/datetimepicker/datetimepicker.js" ],
    csslinks: [ "/lib/datetimepicker/datetimepicker.css" ]
  )
end

Use your library in view

<%
  jslib "datetimepicker"
  jscode "$('#dtp').datetimepicker();"
%>
<input id="dtp" type="text">

Analog code

<%
  jslink "/lib/datetimepicker/datetimepicker.js"
  csslink "/lib/datetimepicker/datetimepicker.css"
  jscode "$('#dtp').datetimepicker();"
%>
<input id="dtp" type="text">

Development

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release to create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

  1. Fork it ( https://github.com/xtsidx/sinatra-jshlp/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request