Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
Dilwoar Hussain committed Feb 4, 2021
1 parent c805fd5 commit 5660c52
Show file tree
Hide file tree
Showing 10 changed files with 4,248 additions and 1 deletion.
108 changes: 108 additions & 0 deletions app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
//= require sortablejs/Sortable.js
window.GOVUK = window.GOVUK || {}
window.GOVUK.Modules = window.GOVUK.Modules || {};

(function (Modules) {
function ReorderableList () { }

ReorderableList.prototype.start = function ($module) {
this.$module = $module[0]
this.$upButtons = this.$module.querySelectorAll('.js-reorderable-list-up')
this.$downButtons = this.$module.querySelectorAll('.js-reorderable-list-down')

this.sortable = window.Sortable.create(this.$module, { // eslint-disable-line new-cap
chosenClass: 'gem-c-reorderable-list__item--chosen',
dragClass: 'gem-c-reorderable-list__item--drag',
onSort: function () {
this.updateOrderIndexes()
this.triggerEvent(this.$module, 'reorder-drag')
}.bind(this)
})

if (typeof window.matchMedia === 'function') {
this.setupResponsiveChecks()
} else {
this.sortable.option('disabled', true)
}

var boundOnClickUpButton = this.onClickUpButton.bind(this)
this.$upButtons.forEach(function (button) {
button.addEventListener('click', boundOnClickUpButton)
})

var boundOnClickDownButton = this.onClickDownButton.bind(this)
this.$downButtons.forEach(function (button) {
button.addEventListener('click', boundOnClickDownButton)
})
}

ReorderableList.prototype.setupResponsiveChecks = function () {
var tabletBreakpoint = '40.0625em' // ~640px
this.mediaQueryList = window.matchMedia('(min-width: ' + tabletBreakpoint + ')')
this.mediaQueryList.addListener(this.checkMode.bind(this))
this.checkMode()
}

ReorderableList.prototype.checkMode = function () {
this.sortable.option('disabled', !this.mediaQueryList.matches)
}

ReorderableList.prototype.onClickUpButton = function (e) {
var item = e.target.closest('.gem-c-reorderable-list__item')
var previousItem = item.previousElementSibling
if (item && previousItem) {
item.parentNode.insertBefore(item, previousItem)
this.updateOrderIndexes()
}
// if triggered by keyboard preserve focus on button
if (e.detail === 0) {
if (item !== item.parentNode.firstElementChild) {
e.target.focus()
} else {
e.target.nextElementSibling.focus()
}
}
this.triggerEvent(e.target, 'reorder-move-up')
}

ReorderableList.prototype.onClickDownButton = function (e) {
var item = e.target.closest('.gem-c-reorderable-list__item')
var nextItem = item.nextElementSibling
if (item && nextItem) {
item.parentNode.insertBefore(item, nextItem.nextElementSibling)
this.updateOrderIndexes()
}
// if triggered by keyboard preserve focus on button
if (e.detail === 0) {
if (item !== item.parentNode.lastElementChild) {
e.target.focus()
} else {
e.target.previousElementSibling.focus()
}
}
this.triggerEvent(e.target, 'reorder-move-down')
}

ReorderableList.prototype.updateOrderIndexes = function () {
var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
$orderInputs.forEach(function (input, index) {
input.setAttribute('value', index + 1)
})
}

ReorderableList.prototype.triggerEvent = function (element, eventName) {
var params = { bubbles: true, cancelable: true }
var event

if (typeof window.CustomEvent === 'function') {
event = new window.CustomEvent(eventName, params)
} else {
event = document.createEvent('CustomEvent')
event.initCustomEvent(eventName, params.bubbles, params.cancelable)
}

element.dispatchEvent(event)
}

Modules.ReorderableList = ReorderableList
})(window.GOVUK.Modules)
1 change: 1 addition & 0 deletions app/assets/stylesheets/govuk_publishing_components/_all_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
@import "components/print-link";
@import "components/radio";
@import "components/related-navigation";
@import "components/reorderable-list";
@import "components/search";
@import "components/select";
@import "components/share-links";
Expand Down
140 changes: 140 additions & 0 deletions app/assets/stylesheets/govuk_publishing_components/components/_reorderable-list.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
.gem-c-reorderable-list {
@include govuk-font(19, bold);

list-style-type: none;
margin-bottom: govuk-spacing(6);
margin-top: 0;
padding-left: 0;
position: relative;

.govuk-form-group {
margin-bottom: 0;
}
}

.gem-c-reorderable-list--numeric-list {
list-style-type: decimal;
padding-left: govuk-spacing(4);
}

.gem-c-reorderable-list__item {
margin-bottom: govuk-spacing(3);
}

.gem-c-reorderable-list__item--border {
border: 1px solid $govuk-border-colour;
padding: govuk-spacing(3);
}

.gem-c-reorderable-list__item--border-bottom {
border-bottom: 1px solid $govuk-border-colour;
}

.gem-c-reorderable-list__item--chosen {
background-color: govuk-colour('light-grey');
outline: 2px dotted $govuk-border-colour;

&:after {
content: none;
}
}

.gem-c-reorderable-list__item--drag {
background-color: govuk-colour('white');
list-style-type: none;

.gem-c-reorderable-list__actions {
visibility: hidden;
}

&:after {
content: none;
}
}

.gem-c-reorderable-list__wrapper {
display: block;

@include govuk-media-query($from: desktop) {
display: inline-flex;
width: 100%;
}
}

.gem-c-reorderable-list__content,
.gem-c-reorderable-list__actions {
margin-bottom: govuk-spacing(2);
}

.gem-c-reorderable-list__content {
@include govuk-media-query($from: desktop) {
flex: 0 1 auto;
min-width: 70%;
}
}

.gem-c-reorderable-list__title {
margin: 0;
}

.gem-c-reorderable-list__description {
@include govuk-font(16, regular);
margin: 0;
}

.gem-c-reorderable-list__actions {
display: block;

@include govuk-media-query($from: desktop) {
flex: 1 0 auto;
text-align: right;
}

.gem-c-button {
display: none;
}
}

.js-enabled {
.gem-c-reorderable-list__item {
@include govuk-media-query($from: desktop) {
cursor: move;
}
}

.gem-c-reorderable-list__actions .govuk-form-group {
display: none;
}

.gem-c-reorderable-list__actions .gem-c-button {
display: inline-block;
margin-left: govuk-spacing(3);
width: 80px;
}

.gem-c-reorderable-list__actions .gem-c-button:first-of-type {
margin-left: 0;

@include govuk-media-query($from: desktop) {
margin-left: govuk-spacing(3);
}
}

.gem-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
.gem-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
display: none;

@include govuk-media-query($from: desktop) {
display: inline-block;
visibility: hidden;
}
}

.gem-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
margin-left: 0;

@include govuk-media-query($from: desktop) {
margin-left: govuk-spacing(3);
}
}
}
55 changes: 55 additions & 0 deletions app/views/govuk_publishing_components/components/_reorderable_list.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<%
items ||= []
input_name ||= "ordering"
data_attributes ||= {}
data_attributes[:module] = "reorderable-list"

numeric_list ||= false
border ||= false
border_bottom ||= false

classes = %w(gem-c-reorderable-list)
classes << "gem-c-reorderable-list--numeric-list" if numeric_list

list_item_classes = %w(gem-c-reorderable-list__item)
list_item_classes << "gem-c-reorderable-list__item--border" if border && !border_bottom
list_item_classes << "gem-c-reorderable-list__item--border-bottom" if border_bottom
%>

<%= tag.ol class: classes, data: data_attributes do %>
<% items.each_with_index do |item, index| %>
<%= tag.li class: list_item_classes do %>
<%= tag.div class: "gem-c-reorderable-list__wrapper" do %>
<%= tag.div class: "gem-c-reorderable-list__content" do %>
<%= tag.p item[:title], class: "gem-c-reorderable-list__title" %>
<%= tag.p item[:description], class: "gem-c-reorderable-list__description" %>
<% end %>
<%= tag.div class: "gem-c-reorderable-list__actions" do %>
<%= render "govuk_publishing_components/components/input", {
label: {
text: sanitize("Position<span class='govuk-visually-hidden'> for #{item[:title]}</span>")
},
name: "#{input_name}[#{item[:order_id]}]",
type: "number",
value: index + 1,
width: 2
} %>
<%= render "govuk_publishing_components/components/button", {
text: "Up",
type: "button",
aria_label: "Move #{item[:title]} up",
classes: "js-reorderable-list-up",
secondary_quiet: true
} %>
<%= render "govuk_publishing_components/components/button", {
text: "Down",
type: "button",
aria_label: "Move #{item[:title]} down",
classes: "js-reorderable-list-down",
secondary_quiet: true
} %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
Loading

0 comments on commit 5660c52

Please sign in to comment.