I'm currently trying to implement a datepicker into my application, the problem is that there is no documentation on how to add the jquery-ui-rails gem through webpacker.
Probably there is another way to add gems or another gem that would fit my needs?
You no longer need to add javascript libraries as gems (which are managed by the bundler). Instead, you add them with yarn and they are managed by webpack (which is enabled by adding the webpacker gem to the Gemfile).
The following steps worked for me to get jquery-ui working in Rails 6:
On the terminal, inside your application type:
yarn add jquery-ui-dist
Your config/webpack/environment.js needs to look as follows:
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
);
const aliasConfig = {
'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
module.exports = environment
Restart your rails server
In the application.html.erb, include the jquery-ui theme:
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Test</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.min.css' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
Now, in your app/javascript/packs/application.js, you can use jquery-ui:
NOTE: If you would like to use jQuery inside your views folder, make it available globally
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
// THIS IS MAKING jQuery AVAILABLE EVEN INSIDE Views FOLDER
global.$ = require("jquery")
require("jquery") // Don't really need to require this...
require("jquery-ui")
$(function(){
// Plain jquery
$('#fadeMe').fadeOut(5000);
// jquery-ui
const availableCities = ['Baltimore', 'New York'];
$('#cityField').autocomplete( { source: availableCities } );
$('#calendarField').datepicker( { dateFormat: 'yy-mm-dd' } );
})
This will work for a page that looks as follows:
<div id='fadeMe'>I will fade</div>
City: <input type='text' id='cityField' />
Calendar: <input type='text' id='calendarField' />
None of these answers quite worked for me. Here's how I ended up getting it implemented:
yarn add jquery
then
yarn add jquery-ui-dist
in your app/javascript/packs/application.js file:
// jquery
import $ from 'jquery';
global.$ = $
global.jQuery = $
require('jquery-ui');
// jquery-ui theme
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true, /jquery-ui\.css/ );
require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true, /jquery-ui\.theme\.css/ );
and in config/webpack/environment.js:
const { environment } = require('#rails/webpacker');
const webpack = require('webpack');
// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader',
options: {
attempts: 1
}
});
// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
$: 'jquery',
JQuery: 'jquery',
jquery: 'jquery',
'window.Tether': "tether",
Popper: ['popper.js', 'default'], // for Bootstrap 4
})
)
const aliasConfig = {
'jquery': 'jquery/src/jquery',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
//
module.exports = environment;
A restart to my server got it working fine for me. Here is a link with details on webpacker that I used to get this to work:
https://gist.github.com/maxivak/2612fa987b9f9ed7cb53a88fcba247b3#jquery-jquery-ui
$ yarn add webpack-jquery-ui
and in application.js
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');
did the job for me.
(I had setup jquery before which might need some additional config)
Weblink: https://www.npmjs.com/package/webpack-jquery-ui
(This is the same process as in Tushar Patil's answer yet with another package).
Kalman's answer worked for me, although not from the very beginning (I'm writing it in a separate answer as I don't have enough reputation to comment on the original answer yet :) )
So, beware that when you put require("jquery-ui") in app/javascript/packs/application.js, the functions provided by jquery-ui will not be available in your scripts loaded to individual views with javascript_pack_tag
The reason for that is that these individual scripts will load before application.js loads.
To make it work, I had to put require("jquery-ui") in one of these individual scripts that depended on jquery-ui
BTW, it works in Kalman's example, as he wrote his script directly in application.js, after requiring "jquery-ui"
Kalman's answer puts jQuery within the scope of the scripts in the app/javascript directory but not with any in-line javascript that you may have on your webpages.
If you want to access jQuery from the scope of the webpage, you could can put jQuery under the public directory then modify app/views/layouts/application.html.erb to link to it like this:
<!DOCTYPE html>
<html>
<head>
<title>JqueryTest</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="/jquery-3.4.1.js"></script>
<%= stylesheet_link_tag "/jquery-ui-1.12.1.custom/jquery-ui.min.css" %>
<script src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
</head>
<body>
<%= yield %>
</body>
</html>
Above steps works fine, removed extra steps
The following steps worked for me to get jquery-ui working in Rails 6:
1) On the terminal, inside your application type:yarn add jquery-ui-dist
2) in app/javascript/packs/application.jsrequire("jquery-ui-dist/jquery-ui");
3) In the application.html.erb, include the jquery-ui theme
<%= stylesheet_link_tag '//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.min.css' %>
4) restart the rails server and webpack dev server.
For me a hybrid of several articles, and things worked and looked the most elegant
CLI:
yarn add jquery jquery-ui-dist
app/javascript/packs/application.js:
// ... SNIP ...
require("jquery")
require("jquery-ui")
config/webpack/environment.js:
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
const aliasConfig = {
'jquery': 'jquery/src/jquery',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
module.exports = environment
app/views/layouts/application.html.erb
<%= stylesheet_link_tag '//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' %>
Run on the terminal (CLI)
yarn add jquery jquery-ui-dist
Add to the config/webpack/environment.js
...
const webpack = require("webpack")
environment.plugins.append("Provide",
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
)
const aliasConfig = {
'jquery': 'jquery/src/jquery',
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};
environment.config.set('resolve.alias', aliasConfig);
...
app/javascript/packs/application.js:
require("jquery-ui")
For the theme add code to any scss file. Do change according to your nee.
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px; }
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none; }
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none; }
Related
The following importmap had to have the entry for stimulus commented out
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "turbo.min.js", preload: true
# pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "trix"
pin "#rails/actiontext", to: "actiontext.js"
in order to run the following HTML behaviour with CSS using a link target
<div class="thumb-wrapper">
<a href="#img1">
<img src="https://unsplash.it/800/400?image=17" class="thumbnail_lb">
</a>
<a href="#img2">
<img src="https://unsplash.it/800/400?image=13" class="thumbnail_lb">
</a>
<a href="#img3">
<img src="https://unsplash.it/800/400?image=3" class="thumbnail_lb">
</a>
</div>
<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
<img src="https://unsplash.it/800/400?image=17">
</a>
<a href="#" class="lightbox" id="img2">
<img src="https://unsplash.it/800/400?image=13">
</a>
<a href="#" class="lightbox" id="img3">
<img src="https://unsplash.it/800/400?image=2">
</a>
stylesheet
.thumbnail_lb {
max-width: 80px;
margin: 1em;
float: left;
}
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
}
.thumb-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
with stimulus enabled, the browser inspector shows the hidden container being highlighted as its source wrapper is clicked upon, but nothing happens in the browser. Reloading the browser with say #img3 generates the overlay,but clicking on it does not return to the page overlay-less.
stimulus is entirely geared around targetting. I have not found documentation indicating that CSS-targetting HTML would be impeded by the presence of this library, although I may have missed it.
How can CSS-driveng taargetting co-exist with stimulus?
I don't know about stimulus, but turbo intercepts click events and does it's own url fetching, and it looks like it doesn't play well with # urls.
You can disable turbo around the lightbox links:
<div data-turbo="false">
<!-- lightbox code -->
</div>
https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms
or you can bypass turbo navigation by catching click events first:
// for any clicks
document.addEventListener("click", e => {
const target = e.target.closest("a[href^='#']")
if (target) {
// this is what Turbo does, normally, which doesn't work.
// Turbo.visit(target.href)
window.location = target.href // bypass Turbo navigation
e.preventDefault();
}
})
// for link clicks
document.addEventListener("turbo:click", e => {
if (e.target.matches("a[href^='#']")) {
e.preventDefault();
}
})
https://turbo.hotwired.dev/reference/events
Well, I am developing my own Content Management System using ASP.NET MVC and for a page builder I've decided to use GrapeJS. Now, since this is new to me, I can't seem to find a way to save the pages I would have assembled using GrapeJS. I have used the gjs-preset-webpage GrapeJS plugin and the only JavaScript for the assembling area I have is as shown below:
<script type="text/javascript">
var editor = grapesjs.init({
height: '100%',
showOffsets: 1,
noticeOnUnload: 0,
storageManager: { autoload: 0 },
container: '#gjs',
fromElement: true,
plugins: ['gjs-preset-webpage'],
pluginsOpts: {
'gjs-preset-webpage': {}
}
});
</script>
The HTML I've used is as follows as well:
<div id="gjs" style="height:0px; overflow:hidden">
<div class="panel">
<h1 class="welcome">Welcome to</h1>
<div class="big-title">
<svg class="logo" viewBox="0 0 100 100">
<path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" />
</svg>
<span>GrapesJS</span>
</div>
<div class="description">
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
</div>
</div>
<style>
.panel {
width: 90%;
max-width: 700px;
border-radius: 3px;
padding: 30px 20px;
margin: 150px auto 0px;
background-color: #d983a6;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
color: rgba(255,255,255,0.75);
font: caption;
font-weight: 100;
}
.welcome {
text-align: center;
font-weight: 100;
margin: 0px;
}
.logo {
width: 70px;
height: 70px;
vertical-align: middle;
}
.logo path {
pointer-events: none;
fill: none;
stroke-linecap: round;
stroke-width: 7;
stroke: #fff
}
.big-title {
text-align: center;
font-size: 3.5rem;
margin: 15px 0;
}
.description {
text-align: justify;
font-size: 1rem;
line-height: 1.5rem;
}
</style>
</div>
Now that I have embedded it into my project and can assembled pages using it, I can't seem to find how to save or where would the assembled page be to be saved. Can anyone help me?
You need a endpoint to allow grapes' storage manager to send your site current status information. I save the json and html just in case, but I think json is enough. Well then you setup your storage manager.
const editor = grapesjs.init({
storageManager:{
type: 'remote',
autosave: true, // Store data automatically
urlStore: 'YOUR_ENDPOINT_URL',
}
});
You will get a call to your endpoint every time something changes with the following parameterts:
gjs-assets: Assets array
gjs-components: Object with markup definition of your site
gjs-styles: Object with styles definition
gjs-html: your site HTML
gjs-css: your CSS
Just be sure to inject this definitions when initialising grapes as well:
const editor = grapesjs.init({
components: "YOUR_STORED_COMPONENTS_HERE",
style: "YOUR_STORED_CSS_HERE",
storageManager:{
type: 'remote',
autosave: true, // Store data automatically
urlStore: 'YOUR_ENDPOINT_URL',
}
});
For further information: Docs
I've copied the raw text files from the book for the tutorial that I'm working on, and the css is not being applied and I can't figure out why. The HTML content displays correctly though. Perhaps you will need more information from me that I'm unaware of at the moment, but I'm glad to bring it to the table if need be.
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<!-- START_HIGHLIGHT -->
<body class='<%= controller.controller_name %>'>
<!-- END_HIGHLIGHT -->
<%= yield %>
</body>
</html>
products.css.scss
// Place all the styles related to the Products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
/* START_HIGHLIGHT */
.products {
table {
border-collapse: collapse;
}
table tr td {
padding: 5px;
vertical-align: top;
}
.list_image {
width: 60px;
height: 70px;
}
.list_description {
width: 60%;
dl {
margin: 0;
}
dt {
color: #244;
font-weight: bold;
font-size: larger;
}
dd {
margin: 0;
}
}
.list_actions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}
.list_line_even {
background: #e0f8f8;
}
.list_line_odd {
background: #f8b0f8;
}
}
/* END_HIGHLIGHT */
Error
You fixed it - congrats!!
Something you may wish to consider is using SASS instead of SCSS. You only need to change the extension of your file to .css.sass - allowing you to get rid of a lot of superfluous brackets in SCSS:
#app/assets/stylesheets/application.css.sass
.products
table
border:
collapse: collapse
& tr td
padding: 5px
vertical:
align: top
--
Stylesheets
Instead of inline-styling your body tag, why not create applicable stylesheets for each controller, and styling the body from these?
Like this:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", controller_name, media: "all","data-turbolinks-track" => true %>
This will allow you to keep default styling in your application.css.scss, and use things like a background image in your various [controller].css.scss files:
app
| - assets
| - stylesheets
- application.css.scss
- controller1.css.scss
- controller2.css.scss
You'll then need to remember to add these assets to your pre-compilation procedure:
Rails.application.config.assets.precompile += ['controller1.css', 'controller2.css']
This will make your styling a LOT DRYer & more versatile
How do I transform the usual input field tag <%= file_field_tag :file, multiple: true %> like
into a link :
This worked for me:
HTML:
<input type='file' id='file' name='file' />
<a href="#" id='link-upload'>Upload</a>
JS:
<script type="text/javascript">
$(function(){
$('#link-upload').click(function(e){
e.preventDefault();
$('#file').click();
});
});
</script>
CSS:
#file{ width:0; height:0; }
Make sure to add jQuery:
<script type="text/javascript">
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
This worked for me:
HTML
<a class="btn-input">seleccionándolos<input type="file" multiple="" id="comment-images" /></a>
CSS
.btn-input {
overflow: hidden;
position: relative;
cursor: pointer;
}
.btn-input input[type="file"] {
height: 30px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
opacity: 0.0;
/* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=0);
/* IE lt 8 */
-ms-filter: "alpha(opacity=0)";
/* IE 8 */
-khtml-opacity: 0.0;
/* Safari 1.x */
-moz-opacity: 0.0;
/* FF lt 1.5, Netscape */
}
Example here
When the dialog is set to modal it should disable all input elements, but I tried a simple example with a textbox and a radiobutton. When the dialog is opened the text-input is disabled as expected, but i still can check the radiobutton.
I used the example from the jQuery-ui demo and a simple html with just a input-textbox and the radio.
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="dialog-message" title="Download complete" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<input type="text"/>
<input type="radio" onClick="showDialog();"/>
<input type="radio"/>
</body>
</html>
And the jQuery:
function showDialog(){
jQuery(function() {
jQuery( "#dialog-message" ).dialog({
position: 'center',
zIndex: 4001,
draggable: false,
modal: true,
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
}
}
});
});
}
Problem solved. It had to do with the css. Because I didn't use the default css or css created with theme roller I forgot to define the styling for ui-widget-overlay. After I copied the ovelay-styling from the jquery-ui css everything worked fine.
the css:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-widget-overlay {
background: #666666 url(ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
opacity: .50;
filter:Alpha(Opacity=50);
}