Module: RailsOnboarding::ResponsiveHelper

Defined in:
lib/rails_onboarding/responsive_helper.rb

Overview

Responsive layout helper module Provides helper methods for implementing responsive design features in the host application

Instance Method Summary collapse

Instance Method Details

#image_loading_strategy(eager: false) ⇒ String

Returns appropriate loading attribute for images

Parameters:

  • eager (Boolean) (defaults to: false) —

    Whether to load eagerly

Returns:

  • (String) —

    Loading attribute value



196
197
198
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 196

def image_loading_strategy(eager: false)
  eager ? "eager" : "lazy"
end

#mobile_device? ⇒ Boolean

Checks if the current device is mobile based on user agent

Returns:

  • (Boolean) —

    True if mobile device



61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 61

def mobile_device?
  return false unless request.present?

  user_agent = request.user_agent.to_s.downcase
  mobile_patterns = [
    /mobile/,
    /android/,
    /iphone/,
    /ipad/,
    /ipod/,
    /blackberry/,
    /windows phone/,
    /opera mini/,
    /kindle/,
    /silk/
  ]

  mobile_patterns.any? { |pattern| user_agent.match?(pattern) }
end

#phone_device? ⇒ Boolean

Checks if the current device is a phone

Returns:

  • (Boolean) —

    True if phone device



96
97
98
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 96

def phone_device?
  mobile_device? && !tablet_device?
end

#rails_onboarding_ios_meta ⇒ String

Apple-specific meta tags for iOS devices

Examples:

In a layout

<%= rails_onboarding_ios_meta %>

Returns:

  • (String) —

    Combined meta tags for iOS



135
136
137
138
139
140
141
142
143
144
145
146
147
148
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 135

def rails_onboarding_ios_meta
  tags = []

  # Enable web app capable mode
  tags << tag(:meta, name: "apple-mobile-web-app-capable", content: "yes")

  # Status bar style
  tags << tag(:meta, name: "apple-mobile-web-app-status-bar-style", content: "default")

  # Disable phone number detection
  tags << tag(:meta, name: "format-detection", content: "telephone=no")

  safe_join(tags, "\n")
end

#rails_onboarding_manifest_link(manifest_path = "/manifest.json") ⇒ String

Returns manifest link for PWA support

Examples:

<%= rails_onboarding_manifest_link %>

Parameters:

  • manifest_path (String) (defaults to: "/manifest.json") —

    Path to manifest.json

Returns:

  • (String) —

    Link tag for manifest



157
158
159
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 157

def rails_onboarding_manifest_link(manifest_path = "/manifest.json")
  tag(:link, rel: "manifest", href: manifest_path)
end

#rails_onboarding_theme_color(color = nil) ⇒ String

Returns theme color meta tag for mobile browsers

Examples:

<%= rails_onboarding_theme_color %>
<%= rails_onboarding_theme_color('#6366f1') %>

Parameters:

  • color (String) (defaults to: nil) —

    The theme color (default: primary color from config)

Returns:

  • (String) —

    The theme-color meta tag HTML



53
54
55
56
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 53

def rails_onboarding_theme_color(color = nil)
  color ||= "#6366f1" # Default primary color
  tag(:meta, name: "theme-color", content: color)
end

#rails_onboarding_viewport_meta(options = {}) ⇒ String

Returns the viewport meta tag for responsive design This should be included in the host application's layout

Examples:

Basic usage in a layout

<%= rails_onboarding_viewport_meta %>

Custom configuration

<%= rails_onboarding_viewport_meta(maximum_scale: 3.0, viewport_fit: 'contain') %>

Parameters:

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

    Optional configuration

Options Hash (options):

  • :width (String) —

    The viewport width (default: 'device-width')

  • :initial_scale (Float) —

    The initial zoom level (default: 1.0)

  • :maximum_scale (Float) —

    The maximum zoom level (default: 5.0)

  • :minimum_scale (Float) —

    The minimum zoom level (default: 1.0)

  • :user_scalable (Boolean) —

    Whether user can zoom (default: true)

  • :viewport_fit (String) —

    How to handle notches/safe areas (default: 'cover')

Returns:

  • (String) —

    The viewport meta tag HTML



25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 25

def rails_onboarding_viewport_meta(options = {})
  width = options[:width] || "device-width"
  initial_scale = options[:initial_scale] || 1.0
  maximum_scale = options[:maximum_scale] || 5.0
  minimum_scale = options[:minimum_scale] || 1.0
  user_scalable = options.fetch(:user_scalable, true) ? "yes" : "no"
  viewport_fit = options[:viewport_fit] || "cover"

  content = [
    "width=#{width}",
    "initial-scale=#{initial_scale}",
    "maximum-scale=#{maximum_scale}",
    "minimum-scale=#{minimum_scale}",
    "user-scalable=#{user_scalable}",
    "viewport-fit=#{viewport_fit}"
  ].join(", ")

  tag(:meta, name: "viewport", content: content)
end

#responsive_device_classes ⇒ String

Returns CSS classes for responsive context

Examples:

In a view

<div class="<%= responsive_device_classes %>">

Returns:

  • (String) —

    Space-separated CSS classes



106
107
108
109
110
111
112
113
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 106

def responsive_device_classes
  classes = []
  classes << "is-mobile" if mobile_device?
  classes << "is-tablet" if tablet_device?
  classes << "is-phone" if phone_device?
  classes << "is-desktop" unless mobile_device?
  classes.join(" ")
end

#responsive_device_data ⇒ Hash

Returns data attributes for JavaScript device detection

Examples:

In a view

<div <%= responsive_device_data %>>

Returns:

  • (Hash) —

    Data attributes for HTML tags



121
122
123
124
125
126
127
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 121

def responsive_device_data
  {
    "data-mobile" => mobile_device?,
    "data-tablet" => tablet_device?,
    "data-phone" => phone_device?
  }
end

#responsive_image(src, options = {}) ⇒ Object

Helper to render responsive images

Examples:

<%= responsive_image('welcome.jpg',
      alt: 'Welcome',
      srcset: { '1x' => 'welcome.jpg', '2x' => 'welcome@2x.jpg' },
      sizes: '(max-width: 768px) 100vw, 50vw') %>

Parameters:

  • src (String) —

    Base image source

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

    Image options

Options Hash (options):

  • :alt (String) —

    Alt text

  • :srcset (Hash) —

    Responsive image sources

  • :sizes (String) —

    Media query sizes



174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 174

def responsive_image(src, options = {})
  alt = options[:alt] || ""
  srcset = options[:srcset]
  sizes = options[:sizes]
  css_class = options[:class] || ""

  img_options = { src: src, alt: alt, class: css_class }

  if srcset.present?
    srcset_value = srcset.map { |density, path| "#{path} #{density}" }.join(", ")
    img_options[:srcset] = srcset_value
  end

  img_options[:sizes] = sizes if sizes.present?

  tag(:img, img_options)
end

#supports_hover? ⇒ Boolean

Checks if the viewport supports hover (desktop/laptop)

Note: This is a server-side estimation; client-side detection is more accurate

Returns:

  • (Boolean) —

    True if hover is supported



204
205
206
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 204

def supports_hover?
  !mobile_device?
end

#tablet_device? ⇒ Boolean

Checks if the current device is a tablet

Returns:

  • (Boolean) —

    True if tablet device



84
85
86
87
88
89
90
91
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 84

def tablet_device?
  return false unless request.present?

  user_agent = request.user_agent.to_s.downcase
  tablet_patterns = [ /ipad/, /tablet/, /kindle/, /silk/, /playbook/ ]

  tablet_patterns.any? { |pattern| user_agent.match?(pattern) }
end

#touch_friendly_attrs ⇒ Hash

Returns touch-friendly attributes for interactive elements

Returns:

  • (Hash) —

    Data attributes for touch optimization



211
212
213
214
215
216
 
# File 'lib/rails_onboarding/responsive_helper.rb', line 211

def touch_friendly_attrs
  {
    "data-touch-enabled" => mobile_device?,
    "style" => mobile_device? ? "touch-action: manipulation;" : nil
  }.compact
end