Skip to content
GitLab

Rails 6 & Webpacker · Changes

Page history
Created Rails 6 & Webpacker (markdown) authored by Derk-Jan Karrenbeld's avatar Derk-Jan Karrenbeld
Hide whitespace changes
Inline Side-by-side
Rails-6-&-Webpacker.md 0 → 100644
View page @ e94b455e
In order to use this with Rails 6 and Webpacker, a few changes have to be made:
- Create a pack
- Change the layout so that the pack is loaded
- Update the stylesheet
- Delete the javascript-non-pack
## Create a pack
```
yarn add flatpickr
```
Create a new pack at `app/javascript/packs/administrate.js`
```javascript
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
// The next line you only need if you want ActiveStorage support
require("@rails/activestorage").start()
// The next line you only need if you need channels in administrate
require("channels")
// The next two lines you only need if you want ActionText support
require("trix")
require("@rails/actiontext")
require("../administrate/index")
```
One level up (in `javascript`) create a new folder with one file `administrate/index.js`:
```javascript
import './components/table'
import './components/date_time_picker'
```
### Date & Time picker
This replaces the component currently bundled and works without JavaScript.
Create `components/date_time_picker.js`:
```javascript
import flatpickr from 'flatpickr'
function bindDateTimePickers() {
[...document.querySelectorAll('[data-type="time"]')].forEach((time) => {
flatpickr(time, {
enableTime: true,
enableSeconds: true,
noCalendar: true,
altInput: true,
altFormat: ' h:i:S K',
dateFormat: 'H:i:S' // H:i
})
});
[...document.querySelectorAll('[data-type="datetime"]')].forEach((time) => {
flatpickr(time, {
enableTime: true,
altInput: true,
altFormat: 'F J (D), Y - h:i:S K',
dateFormat: 'Z' // Y-m-d H:i
})
})
}
document.addEventListener("turbolinks:load", function () {
bindDateTimePickers()
})
```
### Table row click
This replaces the current component table.js and works without jquery or the old ujs.
Create `components/table.js`
```javascript
function bindTableLinks() {
const keycodes = { space: 32, enter: 13 }
function visitDataUrl(event) {
/** @type {HTMLTableRowElement} */
const target = event.target.classList.contains("js-table-row")
? event.target
: event.target.closest('.js-table-row')
if (!target) {
return
}
if (event.type === "click" ||
event.keyCode === keycodes.space ||
event.keyCode === keycodes.enter) {
if (event.target.href) {
return
}
const dataUrl = target.getAttribute("data-url")
const selection = window.getSelection().toString()
if (selection.length === 0 && dataUrl) {
const delegate = target.querySelector(`[href="${dataUrl}"]`)
if (delegate) {
delegate.click()
} else {
window.location = dataUrl
}
}
}
}
const tables = [...document.getElementsByTagName("table")]
tables.forEach(
/** @type {HTMLTableElement} */ (table) => {
table.addEventListener("click", visitDataUrl)
table.addEventListener("keydown", visitDataUrl)
})
}
document.addEventListener("turbolinks:load", function() {
bindTableLinks()
})
```
### Select boxes
There is currently no recommended replacement for selectize.js
## Change the layout
Now you need to load this pack in the layout, and stop bundling the old assets.
in `app/views/layouts/admin` create `application.html.erb`:
```erb
<%#
# Application Layout
This view template is used as the layout
for every page that Administrate generates.
By default, it renders:
- Navigation
- Content for a search bar
(if provided by a `content_for` block in a nested page)
- Flashes
- Links to stylesheets and JavaScripts
%>
<!DOCTYPE html>
<html lang="<%= I18n.locale %>">
<head>
<meta charset="utf-8">
<meta name="robots" content="noodp, noydir, index, follow">
<meta name="viewport" content="initial-scale=1">
<title>
<%= content_for(:title) || 'Dashboard' %> - <%= Rails.application.class.parent_name.titlecase %>
</title>
<%= javascript_pack_tag 'administrate', 'data-turbolinks-track': 'reload' %>
<%= render "stylesheet" %>
<%= csrf_meta_tags %>
<meta name="turbolinks-root" content="/admin">
</head>
<body>
<div class="app-container">
<%= render "navigation" -%>
<main class="main-content" role="main">
<%= render "flashes" -%>
<%= yield %>
</main>
</div>
<div style="display: none; width: 0; height: 0; overflow: hidden; position: absolute">
<%= render "icons" %>
</div>
<%= render "javascript" %>
</body>
</html>
```
And one directory up (`app/views`) create the structure `admin/application/_javascript.html.erb`:
```erb
<%#
# Javascript Partial
This partial imports the necessary javascript on each page.
By default, it includes the application JS,
but each page can define additional JS sources
by providing a `content_for(:javascript)` block.
Administrate::Engine.javascripts.each do |js_path|
<= echo javascript_include_tag js_path
<% end
%>
<%= yield :javascript %>
<% if Rails.env.test? %>
<%= javascript_tag do %>
$.fx.off = true;
$.ajaxSetup({ async: false });
<% end %>
<% end %>
```
As you can see, all this does is load the correct pack in the head and stop including the administrate scripts.
## Update stylesheet
In order to work with the flatpickr css, and potentially actionpicker, generate the stylesheets layout via the generator, then open `app/assets/stylesheets/admininistrate/application.scss`:
```scss
@charset "utf-8";
@import "reset/normalize";
@import "library/clearfix";
@import "library/data-label";
@import "library/variables";
@import "base/forms";
@import "base/layout";
@import "base/lists";
@import "base/tables";
@import "base/typography";
@import "components/app-container";
@import "components/attributes";
@import "components/buttons";
@import "components/cells";
@import "components/field-unit";
@import "components/flashes";
@import "components/form-actions";
@import "components/main-content";
@import "components/navigation";
@import "components/pagination";
@import "components/search";
@import "utilities/text-color";
@import "trix/dist/trix";
// We need to override trix.css’s image gallery styles to accommodate the
// <action-text-attachment> element we wrap around attachments. Otherwise,
// images in galleries will be squished by the max-width: 33%; rule.
.trix-content {
.attachment-gallery {
> action-text-attachment,
> .attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}
&.attachment-gallery--2,
&.attachment-gallery--4 {
> action-text-attachment,
> .attachment {
flex-basis: 50%;
max-width: 50%;
}
}
}
action-text-attachment {
.attachment {
padding: 0 !important;
max-width: 100% !important;
}
}
}
.field-unit--rich-text-area-field {
.field-unit__field {
width: 80%;
}
}
@import "flatpickr/dist/flatpickr.min";
```
## Remove javascript
If done right, the only javascript _asset_ left is the administrate one. If it is still there, remove it from `app/assets/javascripts`. You don't need this because it's all packed.
## Rejoice
That's it.
\ No newline at end of file