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>
Duplicate links
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
- Fork it ( https://github.com/xtsidx/sinatra-jshlp/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request