spree_backend 4.2.4 → 4.3.0.rc3

data/app/assets/javascripts/spree/backend/global/radio_panel_toggle.es6

@@ -0,0 +1,18 @@
+/**
+  radioControlsVisibilityOfElement:
+  Apply to individual radio button that makes another element visible when checked
+**/
+document.addEventListener('DOMContentLoaded', function() {
+  $.fn.radioControlsVisibilityOfElement = function(dependentElementSelector) {
+    if (!this.get(0)) { return }
+    var showValue = this.get(0).value
+    var radioGroup = $("input[name='" + this.get(0).name + "']")
+    radioGroup.each(function() {
+      $(this).click(function() {
+        // eslint-disable-next-line eqeqeq
+        $(dependentElementSelector).visible(this.checked && this.value == showValue)
+      })
+      if (this.checked) { this.click() }
+    })
+  }
+})

data/app/assets/javascripts/spree/backend/global/ransack.es6

@@ -0,0 +1,108 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const QuickSearchInput = document.getElementById('quick_search')
+
+  if (QuickSearchInput) {
+    const QuickSearchPlaceHolder = QuickSearchInput.placeholder
+    const TargetSearchFieldId = document.querySelector('input.js-quick-search-target').id
+    const AssociatedLabelName = document.querySelector(`label[for="${TargetSearchFieldId}"]`).innerHTML
+
+    QuickSearchInput.placeholder = `${QuickSearchPlaceHolder} ${AssociatedLabelName}`
+  }
+
+  $('.js-show-index-filters').click(function() {
+    $('.filter-well').slideToggle()
+    $(this).parents('.filter-wrap').toggleClass('collapsed')
+  })
+
+  // TODO: remove this js temp behaviour and fix this decent
+  // Temp quick search
+  // When there was a search term, copy it
+  $('.js-quick-search').val($('.js-quick-search-target').val())
+
+  // Catch the quick search form submit and submit the real form
+  $('#quick-search').submit(function() {
+    $('.js-quick-search-target').val($('.js-quick-search').val())
+    $('#table-filter form').submit()
+    return false
+  })
+
+  // Clickable ransack filters
+  $('.js-add-filter').click(function() {
+    var ransackField = $(this).data('ransack-field')
+    var ransackValue = $(this).data('ransack-value')
+
+    $('#' + ransackField).val(ransackValue)
+    $('#table-filter form').submit()
+  })
+
+  $(document).on('click', '.js-delete-filter', function() {
+    var ransackField = $(this).parents('.js-filter').data('ransack-field')
+
+    $('#' + ransackField).val('')
+    $('#table-filter form').submit()
+  })
+
+  function ransackField(value) {
+    switch (value) {
+      case 'Date Range':
+        return 'Start'
+      case '':
+        return 'Stop'
+      default:
+        return value.trim()
+    }
+  }
+
+  // To appear in the filtered options, the elements id attribute must start with 'q_',
+  // and it must have the class'.js-filterable'.
+  $('[id^="q_"].js-filterable').each(function() {
+    var $this = $(this)
+
+    if ($this.val() !== null && $this.val() !== '' && $this.val().length !== 0) {
+      var ransackValue, filter
+      var ransackFieldId = $this.attr('id')
+      var label = $('label[for="' + ransackFieldId + '"]')
+
+      if ($this.is('select')) {
+        ransackValue = $this.find('option:selected').toArray().map(function(option) {
+          return option.text;
+        }).join(', ')
+      } else {
+        ransackValue = $this.val()
+      }
+
+      label = ransackField(label.text()) + ': ' + ransackValue
+
+      var cleanLabel = DOMPurify.sanitize(label)
+
+      filter = '<span class="js-filter badge badge-secondary d-inline-flex align-items-center" data-ransack-field="' + ransackFieldId + '">' + cleanLabel + '<i class="icon icon-cancel ml-2 js-delete-filter"></i></span>'
+      $('.js-filters').append(filter).show()
+    }
+  })
+
+  // per page dropdown
+  // preserves all selected filters / queries supplied by user
+  // changes only per_page value
+  $('.js-per-page-select').change(function() {
+    var form = $(this).closest('.js-per-page-form')
+    var url = form.attr('action')
+    var value = $(this).val().toString()
+    if (url.match(/\?/)) {
+      url += '&per_page=' + value
+    } else {
+      url += '?per_page=' + value
+    }
+    window.location = url
+  })
+
+  // injects per_page settings to all available search forms
+  // so when user changes some filters / queries per_page is preserved
+  $(document).ready(function() {
+    var perPageDropdown = $('.js-per-page-select:first')
+    if (perPageDropdown.length) {
+      var perPageValue = perPageDropdown.val().toString()
+      var perPageInput = '<input type="hidden" name="per_page" value=' + perPageValue + ' />'
+      $('#table-filter form').append(perPageInput)
+    }
+  })
+})

data/app/assets/javascripts/spree/backend/global/responsive_menus.es6

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function() {
+  var body = $('body')
+  var modalBackdrop = $('#multi-backdrop')
+
+  // Fail safe on screen resize
+  var resizeTimer;
+  window.addEventListener('resize', function() {
+    document.body.classList.remove('modal-open', 'sidebar-open', 'contextualSideMenu-open');
+    document.body.classList.add('resize-animation-stopper');
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function() {
+      document.body.classList.remove('resize-animation-stopper');
+    }, 400);
+  });
+
+  function closeAllMenus() {
+    body.removeClass()
+    body.addClass('admin')
+    modalBackdrop.removeClass('show')
+  }
+
+  modalBackdrop.click(closeAllMenus)
+
+  // Main Menu Functionality
+  var sidebarOpen = $('#sidebar-open')
+  var sidebarClose = $('#sidebar-close')
+  var activeItem = $('#main-sidebar').find('.selected')
+
+  activeItem.closest('.nav-sidebar').addClass('active-option')
+  activeItem.closest('.nav-pills').addClass('in show')
+
+  function openMenu() {
+    closeAllMenus()
+    body.addClass('sidebar-open modal-open')
+    modalBackdrop.addClass('show')
+  }
+  sidebarOpen.click(openMenu)
+  sidebarClose.click(closeAllMenus)
+
+  // Contextual Sidebar Menu
+  var contextualSidebarMenuToggle = $('#contextual-menu-toggle')
+  var contextualSidebarMenuClose = $('#contextual-menu-close')
+
+  function toggleContextualMenu() {
+    if (document.body.classList.contains('contextualSideMenu-open')) {
+      closeAllMenus()
+    } else {
+      closeAllMenus()
+      body.addClass('contextualSideMenu-open modal-open')
+      modalBackdrop.addClass('show')
+    }
+  }
+
+  contextualSidebarMenuToggle.click(toggleContextualMenu)
+  contextualSidebarMenuClose.click(toggleContextualMenu)
+})

data/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6

@@ -0,0 +1,156 @@
+// SELECT2 AUTOCOMPLETE JS
+// This JavaScript file allows Spree developers to set up Select2 autocomplete search
+// using the API v2 by simply adding data attributes to a select element with the class: 'select2autocomplete'
+// as shown here: <select class="select2autocomplete"></select>.
+
+// REQUIRED ATTRIBUTES
+// You must provide a URL for the API V2, use the format shown below.
+// See the backend.js file for other API V2 URL's.
+//
+//  Example:
+//  data-autocomplete-url-value="products_api_v2"
+
+// OPTIONAL ATTRIBUTES
+// These optional attributes have sensible defaults, you many not need to use them in many cases,
+// but they do provide a powerful toolkit to refine your autocomplete search as required.
+//
+//  Examples:
+//  data-autocomplete-placeholder-value="Seach Pages"    <- Sets the placeholder | DEFAULT is: 'Search'
+//  data-autocomplete-clear-value="boolean"              <- Allow select2 to be cleared | DEFAULT is: false (no clear button)
+//  data-autocomplete-multiple-value="boolean"           <- Multiple or Single select | DEFAULT is: false (single)
+//  data-autocomplete-return-attr-value="pretty_name"    <- Return Attribute. | DEFAULT is: 'name'
+//  data-autocomplete-min-input-value="4"                <- Minimum input for search | DEFAULT is: 3
+//  data-autocomplete-search-query-value="title_i_cont"  <- Custom search query | DEFAULT is: 'name_i_cont'
+//  data-autocomplete-custom-return-id-value="permalink" <- Return a custom attribute rather than the ID | DEFAULT: returns id
+//
+// SECOND HARD CODED FILTER - (OPTIONAL)
+// Use a second hard coded search filter param and term if you require a little more curation
+// than just all results returning, an example of this in use can be seen in the menu_item search for Pages,
+// here we only want to retuen Pages that have linkable slugs, not homepages, and so we filter those using the
+// data attributes shown below.
+//
+//  Examples:
+//  data-autocomplete-additional-query-value="type_not_eq"                  <- Additional hard coded query | DEFAULT: null (not used)
+//  data-autocomplete-additional-term-value="Spree::Cms::Pages::Homepage"   <- Additional hard coded term | DEFAULT: null (not used)
+
+document.addEventListener('DOMContentLoaded', function() {
+  loadAutoCompleteParams()
+})
+
+// eslint-disable-next-line no-unused-vars
+function loadAutoCompleteParams() {
+  const select2Autocompletes = document.querySelectorAll('select[data-autocomplete-url-value]')
+  select2Autocompletes.forEach(element => buildParamsFromDataAttrs(element))
+}
+
+function buildParamsFromDataAttrs(element) {
+  $(element).select2Autocomplete({
+    // Required Attributes
+    apiUrl: Spree.routes[element.dataset.autocompleteUrlValue],
+
+    // Optional Attributes
+    placeholder: element.dataset.autocompletePlaceholderValue,
+    allow_clear: element.dataset.autocompleteClearValue,
+    multiple: element.dataset.autocompleteMultipleValue,
+    return_attribute: element.dataset.autocompleteReturnAttrValue,
+    minimum_input: element.dataset.autocompleteMinInputValue,
+    search_query: element.dataset.autocompleteSearchQueryValue,
+    custom_return_id: element.dataset.autocompleteCustomReturnIdValue,
+
+    // Hard coded additional filter for those edge cases.
+    additional_query: element.dataset.autocompleteAdditionalQueryValue,
+    additional_term: element.dataset.autocompleteAdditionalTermValue
+  })
+}
+
+// Can also be called directly as javastript.
+$.fn.select2Autocomplete = function(params) {
+  // Required params
+  const apiUrl = params.apiUrl || null
+  const resourcePlural = apiUrl.match(/([^/]*)\/*$/)[1]
+  const resourceSingular = resourcePlural.slice(0, -1)
+
+  // Optional Params
+  const select2placeHolder = params.placeholder || Spree.translations.search
+  const select2Multiple = params.multiple || false
+  const select2allowClear = params.allow_clear || false
+  const returnAttribute = params.return_attribute || 'name'
+  const minimumInput = params.minimum_input || 3
+  const searchQuery = params.search_query || 'name_i_cont'
+  const customReturnId = params.custom_return_id || null
+  const additionalQuery = params.additional_query || null
+  const additionalTerm = params.additional_term || null
+
+  function formatList(values) {
+    if (customReturnId) {
+      return values.map(function(obj) {
+        return {
+          id: obj.attributes[customReturnId],
+          text: obj.attributes[returnAttribute]
+        }
+      })
+    } else {
+      return values.map(function(obj) {
+        return {
+          id: obj.id,
+          text: obj.attributes[returnAttribute]
+        }
+      })
+    }
+  }
+
+  if (additionalQuery == null && additionalTerm == null) {
+    this.select2({
+      multiple: select2Multiple,
+      allowClear: select2allowClear,
+      placeholder: select2placeHolder,
+      minimumInputLength: minimumInput,
+      ajax: {
+        url: apiUrl,
+        headers: Spree.apiV2Authentication(),
+        data: function(params) {
+          return {
+            fields: {
+              [resourceSingular]: returnAttribute
+            },
+            filter: {
+              [searchQuery]: params.term
+            }
+          }
+        },
+        processResults: function(json) {
+          return {
+            results: formatList(json.data)
+          }
+        }
+      }
+    })
+  } else {
+    this.select2({
+      multiple: select2Multiple,
+      allowClear: select2allowClear,
+      placeholder: select2placeHolder,
+      minimumInputLength: minimumInput,
+      ajax: {
+        url: apiUrl,
+        headers: Spree.apiV2Authentication(),
+        data: function(params) {
+          return {
+            fields: {
+              [resourceSingular]: returnAttribute
+            },
+            filter: {
+              [searchQuery]: params.term,
+              [additionalQuery]: additionalTerm
+            }
+          }
+        },
+        processResults: function(json) {
+          return {
+            results: formatList(json.data)
+          }
+        }
+      }
+    })
+  }
+}

data/app/assets/javascripts/spree/backend/global/select2_populate.es6

@@ -0,0 +1,61 @@
+/**
+  populateSelectOptionsFromApi(params)
+
+  Allows you to easily fetch data from API (Platfrom v2)
+  and populate an empty <select> with <option> tags,
+  including a selected <option> tag.
+
+  ## EXAMPLE USE CASE called from ERB view file:
+
+  populateSelectOptionsFromApi({
+    targetElement: '#mySelectElement',
+    apiUrl: Spree.routes.taxons_api_v2,
+    returnAttribute: 'pretty_name',
+
+    <% if @menu_item.linked_resource_id %>
+      selectedOption: <%= @menu_item.linked_resource_id %>
+    <% end %>
+  })
+**/
+
+// eslint-disable-next-line no-unused-vars
+const populateSelectOptionsFromApi = function(params) {
+  createRequest(params, updateSelectSuccess, updateSelectError)
+}
+
+const handleErrors = function(response) {
+  if (!response.ok) throw new Error((response.status + ': ' + response.statusText))
+
+  return response.json()
+}
+
+const createRequest = function(params, succeed, fail) {
+  const targetElement = params.targetElement
+  const apiUrl = params.apiUrl
+  const returnAttribute = params.returnAttribute
+  const selectedOption = params.selectedOption
+  const selectEl = document.querySelector(targetElement)
+
+  fetch(apiUrl, { headers: Spree.apiV2Authentication() })
+    .then((response) => handleErrors(response))
+    .then((json) => succeed(json.data, returnAttribute, selectEl, selectedOption))
+    .catch((error) => fail(error, selectEl))
+}
+
+const updateSelectSuccess = function(parsedData, returnAttribute, selectEl, selectedOption) {
+  parsedData.forEach((object) => {
+    const optionEl = document.createElement('option')
+    optionEl.value = object.id
+    optionEl.innerHTML = object.attributes[returnAttribute]
+
+    if (parseInt(selectedOption, 10) === parseInt(object.id, 10)) optionEl.selected = true
+
+    selectEl.appendChild(optionEl)
+  })
+}
+
+const updateSelectError = function(error, selectEl) {
+  selectEl.disabled = true
+
+  console.log(error)
+}

data/app/assets/javascripts/spree/backend/global/side_scroll_indication.es6

@@ -0,0 +1,137 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const navWrapper = document.querySelectorAll('[data-nav-x-wrapper]')
+  navWrapper.forEach(el => initHorizontalNav(el))
+})
+
+const SETTINGS = {
+  navBarTravelling: false,
+  navBarTravelDirection: '',
+  navBarTravelDistance: 150
+}
+
+function initHorizontalNav (containerEl) {
+  const navAdvanceLeft = containerEl.querySelector('.nav-x_Advancer_Left')
+  const navAdvanceRight = containerEl.querySelector('.nav-x_Advancer_Right')
+  const navContainer = containerEl.querySelector('[data-nav-x-container]')
+  const navContent = navContainer.querySelector('[data-nav-x-content]')
+  const activeNavItem = navContent.querySelector('.active')
+
+  // Trigger on DOMContentLoaded
+  setOverscrollIndicators()
+
+  if (activeNavItem) focusActiveItem(navContainer, activeNavItem)
+
+  window.addEventListener('resize', function () {
+    // Trigger on window resize
+    setOverscrollIndicators()
+    focusActiveItem(navContainer, activeNavItem)
+  })
+
+  navContainer.addEventListener('scroll', function () {
+    // Trigger on Side Scrolling
+    setOverscrollIndicators()
+  })
+
+  function setOverscrollIndicators () {
+    navContainer.setAttribute('data-overflowing', determineOverflow(navContent, navContainer))
+  }
+
+  navAdvanceLeft.addEventListener('click', function () {
+    // If in the middle of a move return
+    if (SETTINGS.navBarTravelling === true) return
+
+    // If we have content overflowing both sides or on the left
+    if (determineOverflow(navContent, navContainer) === 'left' || determineOverflow(navContent, navContainer) === 'both') {
+      // Find how far this panel has been scrolled
+      const availableScrollLeft = navContainer.scrollLeft
+      // If the space available is less than two lots of our desired distance, just move the whole amount
+      // otherwise, move by the amount in the settings
+      if (availableScrollLeft < SETTINGS.navBarTravelDistance * 2) {
+        navContent.style.transform = `translateX(${availableScrollLeft}px)`
+      } else {
+        navContent.style.transform = `translateX(${SETTINGS.navBarTravelDistance}px)`
+      }
+      // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
+      navContent.classList.remove('nav-x_Transition_None')
+      // Update our settings
+      SETTINGS.navBarTravelDirection = 'left'
+      SETTINGS.navBarTravelling = true
+    }
+    // Now update the attribute in the DOM
+    navContainer.setAttribute('data-overflowing', determineOverflow(navContent, navContainer))
+  })
+
+  navAdvanceRight.addEventListener('click', function () {
+    // If in the middle of a move return
+    if (SETTINGS.navBarTravelling === true) return
+
+    // If we have content overflowing both sides or on the right
+    if (determineOverflow(navContent, navContainer) === 'right' || determineOverflow(navContent, navContainer) === 'both') {
+      // Get the right edge of the container and content
+      const navBarRightEdge = navContent.getBoundingClientRect().right
+      const navBarScrollerRightEdge = navContainer.getBoundingClientRect().right
+      // Now we know how much space we have available to scroll
+      const availableScrollRight = Math.floor(navBarRightEdge - navBarScrollerRightEdge)
+      // If the space available is less than two lots of our desired distance, just move the whole amount
+      // otherwise, move by the amount in the settings
+      if (availableScrollRight < SETTINGS.navBarTravelDistance * 2) {
+        navContent.style.transform = `translateX(-${availableScrollRight}px)`
+      } else {
+        navContent.style.transform = `translateX(-${SETTINGS.navBarTravelDistance}px)`
+      }
+      // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
+      navContent.classList.remove('nav-x_Transition_None')
+      // Update our settings
+      SETTINGS.navBarTravelDirection = 'right'
+      SETTINGS.navBarTravelling = true
+    }
+    // Now update the attribute in the DOM
+    navContainer.setAttribute('data-overflowing', determineOverflow(navContent, navContainer))
+  })
+
+  navContent.addEventListener('transitionend', function () {
+    // get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform
+    const styleOfTransform = window.getComputedStyle(navContent, null)
+    const tr = styleOfTransform.getPropertyValue('transform') || styleOfTransform.getPropertyValue('transform')
+    // If there is no transition we want to default to 0 and not null
+
+    const amount = Math.abs(parseInt(tr.split(',')[4]) || 0)
+
+    navContent.style.transform = 'none'
+    navContent.classList.add('nav-x_Transition_None')
+    // Now lets set the scroll position
+    if (SETTINGS.navBarTravelDirection === 'left') {
+      navContainer.scrollLeft = navContainer.scrollLeft - amount
+    } else {
+      navContainer.scrollLeft = navContainer.scrollLeft + amount
+    }
+    SETTINGS.navBarTravelling = false
+  })
+}
+
+// Set active link into view
+function focusActiveItem (containerEl, activeEl) {
+  if (!activeEl) return
+
+  containerEl.scrollLeft = activeEl.offsetLeft - 45
+}
+
+// Determine Scroll status
+function determineOverflow (content, container) {
+  const containerMetrics = container.getBoundingClientRect()
+  const containerMetricsRight = Math.floor(containerMetrics.right)
+  const containerMetricsLeft = Math.floor(containerMetrics.left)
+  const contentMetrics = content.getBoundingClientRect()
+  const contentMetricsRight = Math.floor(contentMetrics.right)
+  const contentMetricsLeft = Math.floor(contentMetrics.left)
+
+  if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
+    return 'both'
+  } else if (contentMetricsLeft < containerMetricsLeft) {
+    return 'left'
+  } else if (contentMetricsRight > containerMetricsRight) {
+    return 'right'
+  } else {
+    return 'none'
+  }
+}