Class: Www::CarouselSliderComponent

Inherits:
ApplicationComponent show all
Includes:
ApplicationHelper
Defined in:
app/components/www/carousel_slider_component.rb

Overview

ViewComponent: renders the carousel slider block.

Constant Summary

Constants included from ApplicationHelper

ApplicationHelper::CF_WEB_ANALYTICS_SKIP_PATHS, ApplicationHelper::MARKDOWN_ALLOWED_ATTRIBUTES, ApplicationHelper::MARKDOWN_ALLOWED_TAGS

Constants included from SeoHelper

SeoHelper::AWARDS, SeoHelper::CA_ADDRESS, SeoHelper::CA_BUSINESS_HOURS, SeoHelper::CA_CONTACT_POINT, SeoHelper::CA_CURRENCIES, SeoHelper::CA_DESCRIPTION, SeoHelper::CA_FOUNDING_DATE, SeoHelper::CA_GLOBAL_LOCATION_NUMBER, SeoHelper::CA_LEGAL_NAME, SeoHelper::CA_LOCAL_BUSINESS, SeoHelper::CA_ONLINE_STORE, SeoHelper::CA_RETURN_POLICY, SeoHelper::CA_SALES_DEPARTMENT, SeoHelper::CA_SERVICE_AREA, SeoHelper::CA_URL, SeoHelper::CA_VAT_ID, SeoHelper::CA_WAREHOUSE_DEPARTMENT, SeoHelper::CA_WAREHOUSE_HOURS, SeoHelper::COMPANY_EMAIL, SeoHelper::COMPANY_LOGO, SeoHelper::COMPANY_NAME, SeoHelper::COMPANY_SLOGAN, SeoHelper::EXPERTISE, SeoHelper::FAX_NUMBER, SeoHelper::GS1_COMPANY_PREFIX, SeoHelper::ISO6523_CODE, SeoHelper::PAYMENT_METHODS, SeoHelper::PHONE_NUMBER, SeoHelper::PRIMARY_NAICS, SeoHelper::REFUND_TYPE, SeoHelper::RETURN_FEES, SeoHelper::RETURN_METHOD, SeoHelper::RETURN_POLICY_CATEGORY, SeoHelper::SECONDARY_NAICS, SeoHelper::SOCIAL_PROFILES, SeoHelper::US_ADDRESS, SeoHelper::US_BUSINESS_HOURS, SeoHelper::US_CONTACT_POINT, SeoHelper::US_CURRENCIES, SeoHelper::US_DESCRIPTION, SeoHelper::US_FOUNDING_DATE, SeoHelper::US_GLOBAL_LOCATION_NUMBER, SeoHelper::US_IMAGE, SeoHelper::US_LEGAL_NAME, SeoHelper::US_LOCAL_BUSINESS, SeoHelper::US_ONLINE_STORE, SeoHelper::US_RETURN_POLICY, SeoHelper::US_SALES_DEPARTMENT, SeoHelper::US_SERVICE_AREA, SeoHelper::US_TAX_ID, SeoHelper::US_URL, SeoHelper::US_WAREHOUSE_DEPARTMENT, SeoHelper::US_WAREHOUSE_HOURS

Constants included from IconHelper

IconHelper::CUSTOM_ICON_MAP, IconHelper::CUSTOM_SVG_DIR, IconHelper::DEFAULT_FAMILY

Instance Method Summary collapse

Methods included from ApplicationHelper

#better_number_to_currency, #cf_web_analytics?, #check_or_cross, #check_or_times, #embedded_tab_frame_id, #error_messages, #general_disclaimer_on_product_installation_and_local_codes, #markdown_to_html, #parent_layout, #pass_or_fail, #render_error_messages_list, #render_video_card, #resolved_auth_form_turbo_frame, #return_path_or, #safe_css_color, #set_return_path_if_present, #set_section_if_present, #tab_frame_id, #to_underscore, #turbo_section_wrapper, #turbo_tabs_request?, #url_on_same_domain_as_request, #working_hours?, #yes_or_no, #yes_or_no_highlighted, #yes_or_no_with_check_or_cross

Methods included from UppyUploaderHelper

#file_uploader, #image_uploader, #large_file_uploader_s3, #lead_sketch_uploader, #public_warranty_card_uploader, #rma_image_uploader, #rma_image_uploader_s3, #uppy_uploader, #video_uploader, #warranty_card_uploader

Methods included from ImagesHelper

#image_asset_tag, #image_asset_url, #picture_asset_tag

Methods included from SeoHelper

#add_page_schema, #add_webpage_schema, #canada?, #collect_schema, #company_social_links, #ensure_context_json, #json_ld_script_tag, #local_business_schema, #online_store_id, #online_store_schema, #page_main_entity, #page_main_entity_json, #render_auto_collection_page_schema, #render_collection_page_schema, #render_local_business_schema, #render_online_store_schema, #render_page_schemas, #render_page_video_schemas, #render_webpage_schema, #render_webpage_schema_with_collections, #usa?

Methods included from UrlsHelper

#catalog_breadcrumb_links, #catalog_link, #catalog_link_for_product_line, #catalog_link_for_sku, #cms_link, #delocalized_path, #path_to_sales_product_sku, #path_to_sales_product_sku_for_product_line, #path_to_sales_product_sku_for_product_line_slug, #product_line_from_catalog_link, #protocol_neutral_url, #sanitize_external_url, #valid_external_url?

Methods included from IconHelper

#account_nav_icon, #fa_icon, #star_rating_html

Methods inherited from ApplicationComponent

#cms_link, #fetch_or_fallback, #image_asset_tag, #image_tag, #number_to_currency, #number_with_delimiter, #post_path, #post_url, #strip_tags

Constructor Details

#initialize(items:, options: {}, per_page: 4, per_move: 1, gap: '1rem', autoplay: true, interval: 3000, pause_on_hover: true, pause_on_focus: true, type: 'loop', arrows: true, pagination: true, rewind: true, class: '', item_partial: nil, item_locals: {}, **html_attributes) ⇒ CarouselSliderComponent

Returns a new instance of CarouselSliderComponent.

Parameters:

  • items (Array)

    items to render as carousel slides

  • per_page (Integer) (defaults to: 4)

    slides visible per page

  • per_move (Integer) (defaults to: 1)

    slides to move per transition

  • gap (String) (defaults to: '1rem')

    CSS gap between slides

  • autoplay (Boolean) (defaults to: true)

    whether the carousel autoplays

  • interval (Integer) (defaults to: 3000)

    autoplay interval in milliseconds

  • pause_on_hover (Boolean) (defaults to: true)

    whether autoplay pauses on hover

  • pause_on_focus (Boolean) (defaults to: true)

    whether autoplay pauses on focus

  • type (String) (defaults to: 'loop')

    carousel type ('loop', 'slide', 'fade')

  • arrows (Boolean) (defaults to: true)

    whether to show navigation arrows

  • pagination (Boolean) (defaults to: true)

    whether to show pagination

  • rewind (Boolean) (defaults to: true)

    whether the carousel rewinds at the end

  • class (String) (defaults to: '')

    additional CSS classes, merged with the component's own classes

  • item_partial (String, nil) (defaults to: nil)

    partial used to render each item

  • item_locals (Hash) (defaults to: {})

    locals passed to the item partial

  • html_attributes (Hash)

    additional HTML attributes applied to the rendered element

  • options (Hash) (defaults to: {})

    carousel options forwarded as-is to fancy_carousel_controller;
    when non-empty, they replace all of the per_* / autoplay / etc. keyword defaults

Options Hash (options:):

  • :any (Object)

    any Fancyapps-native key (slidesPerPage, infinite, transition, ...)
    or legacy key (perPage, type, autoplay, ...) accepted by fancy_carousel_controller



26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
# File 'app/components/www/carousel_slider_component.rb', line 26

def initialize(
  items:,
  options: {},
  per_page: 4,
  per_move: 1,
  gap: '1rem',
  autoplay: true,
  interval: 3000,
  pause_on_hover: true,
  pause_on_focus: true,
  type: 'loop',
  arrows: true,
  pagination: true,
  rewind: true,
  class: '',
  item_partial: nil,
  item_locals: {},
  **html_attributes
)
  @items = items
  @options = options
  @per_page = per_page
  @per_move = per_move
  @gap = gap
  @autoplay = autoplay
  @interval = interval
  @pause_on_hover = pause_on_hover
  @pause_on_focus = pause_on_focus
  @type = type
  @arrows = arrows
  @pagination = pagination
  @rewind = rewind
  @class = binding.local_variable_get(:class)
  @item_partial = item_partial
  @item_locals = item_locals || {}
  @html_attributes = html_attributes

  super()
end

Instance Method Details

Options are forwarded as-is to fancy_carousel_controller, which accepts
both Fancyapps-native keys (slidesPerPage, infinite, transition, …) and
legacy keys (perPage, type, autoplay, …) for migration safety.

Returns:

  • (String)

    JSON carousel options



70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# File 'app/components/www/carousel_slider_component.rb', line 70

def carousel_options
  if @options.any?
    @options.to_json
  else
    {
      type: @type,
      perPage: @per_page,
      perMove: @per_move,
      gap: @gap,
      autoplay: @autoplay,
      interval: @interval,
      pauseOnHover: @pause_on_hover,
      pauseOnFocus: @pause_on_focus,
      arrows: @arrows,
      pagination: @pagination,
      rewind: @rewind
    }.compact.to_json
  end
end

#slider_classesString

Returns CSS classes for the slider element.

Returns:

  • (String)

    CSS classes for the slider element



91
92
93
# File 'app/components/www/carousel_slider_component.rb', line 91

def slider_classes
  "f-carousel #{@class}".strip
end