# frozen_string_literal: true require "active_support/core_ext/array/extract_options" require "active_support/core_ext/hash/keys" require "active_support/core_ext/object/inclusion" require "active_support/core_ext/object/try" require "action_view/helpers/asset_url_helper" require "action_view/helpers/tag_helper" module ActionView # = Action View Asset Tag Helpers module Helpers #:nodoc: # This module provides methods for generating HTML that links views to assets such # as images, JavaScripts, stylesheets, and feeds. These methods do not verify # the assets exist before linking to them: # # image_tag("rails.png") # # => # stylesheet_link_tag("application") # # => module AssetTagHelper extend ActiveSupport::Concern include AssetUrlHelper include TagHelper # Returns an HTML script tag for each of the +sources+ provided. # # Sources may be paths to JavaScript files. Relative paths are assumed to be relative # to assets/javascripts, full paths are assumed to be relative to the document # root. Relative paths are idiomatic, use absolute paths only when needed. # # When passing paths, the ".js" extension is optional. If you do not want ".js" # appended to the path extname: false can be set on the options. # # You can modify the HTML attributes of the script tag by passing a hash as the # last argument. # # When the Asset Pipeline is enabled, you can pass the name of your manifest as # source, and include other JavaScript or CoffeeScript files inside the manifest. # # If the server supports Early Hints header links for these assets will be # automatically pushed. # # ==== Options # # When the last parameter is a hash you can add HTML attributes using that # parameter. The following options are supported: # # * :extname - Append an extension to the generated URL unless the extension # already exists. This only applies for relative URLs. # * :protocol - Sets the protocol of the generated URL. This option only # applies when a relative URL and +host+ options are provided. # * :host - When a relative URL is provided the host is added to the # that path. # * :skip_pipeline - This option is used to bypass the asset pipeline # when it is set to true. # * :nonce - When set to true, adds an automatic nonce value if # you have Content Security Policy enabled. # # ==== Examples # # javascript_include_tag "xmlhr" # # => # # javascript_include_tag "xmlhr", host: "localhost", protocol: "https" # # => # # javascript_include_tag "template.jst", extname: false # # => # # javascript_include_tag "xmlhr.js" # # => # # javascript_include_tag "common.javascript", "/elsewhere/cools" # # => # # # # javascript_include_tag "http://www.example.com/xmlhr" # # => # # javascript_include_tag "http://www.example.com/xmlhr.js" # # => # # javascript_include_tag "http://www.example.com/xmlhr.js", nonce: true # # => def javascript_include_tag(*sources) options = sources.extract_options!.stringify_keys path_options = options.extract!("protocol", "extname", "host", "skip_pipeline").symbolize_keys early_hints_links = [] sources_tags = sources.uniq.map { |source| href = path_to_javascript(source, path_options) early_hints_links << "<#{href}>; rel=preload; as=script" tag_options = { "src" => href }.merge!(options) if tag_options["nonce"] == true tag_options["nonce"] = content_security_policy_nonce end content_tag("script", "", tag_options) }.join("\n").html_safe request.send_early_hints("Link" => early_hints_links.join("\n")) if respond_to?(:request) && request sources_tags end # Returns a stylesheet link tag for the sources specified as arguments. If # you don't specify an extension, .css will be appended automatically. # You can modify the link attributes by passing a hash as the last argument. # For historical reasons, the 'media' attribute will always be present and defaults # to "screen", so you must explicitly set it to "all" for the stylesheet(s) to # apply to all media types. # # If the server supports Early Hints header links for these assets will be # automatically pushed. # # stylesheet_link_tag "style" # # => # # stylesheet_link_tag "style.css" # # => # # stylesheet_link_tag "http://www.example.com/style.css" # # => # # stylesheet_link_tag "style", media: "all" # # => # # stylesheet_link_tag "style", media: "print" # # => # # stylesheet_link_tag "random.styles", "/css/stylish" # # => # # def stylesheet_link_tag(*sources) options = sources.extract_options!.stringify_keys path_options = options.extract!("protocol", "host", "skip_pipeline").symbolize_keys early_hints_links = [] sources_tags = sources.uniq.map { |source| href = path_to_stylesheet(source, path_options) early_hints_links << "<#{href}>; rel=preload; as=style" tag_options = { "rel" => "stylesheet", "media" => "screen", "href" => href }.merge!(options) tag(:link, tag_options) }.join("\n").html_safe request.send_early_hints("Link" => early_hints_links.join("\n")) if respond_to?(:request) && request sources_tags end # Returns a link tag that browsers and feed readers can use to auto-detect # an RSS, Atom, or JSON feed. The +type+ can be :rss (default), # :atom, or :json. Control the link options in url_for format # using the +url_options+. You can modify the LINK tag itself in +tag_options+. # # ==== Options # # * :rel - Specify the relation of this link, defaults to "alternate" # * :type - Override the auto-generated mime type # * :title - Specify the title of the link, defaults to the +type+ # # ==== Examples # # auto_discovery_link_tag # # => # auto_discovery_link_tag(:atom) # # => # auto_discovery_link_tag(:json) # # => # auto_discovery_link_tag(:rss, {action: "feed"}) # # => # auto_discovery_link_tag(:rss, {action: "feed"}, {title: "My RSS"}) # # => # auto_discovery_link_tag(:rss, {controller: "news", action: "feed"}) # # => # auto_discovery_link_tag(:rss, "http://www.example.com/feed.rss", {title: "Example RSS"}) # # => def auto_discovery_link_tag(type = :rss, url_options = {}, tag_options = {}) if !(type == :rss || type == :atom || type == :json) && tag_options[:type].blank? raise ArgumentError.new("You should pass :type tag_option key explicitly, because you have passed #{type} type other than :rss, :atom, or :json.") end tag( "link", "rel" => tag_options[:rel] || "alternate", "type" => tag_options[:type] || Template::Types[type].to_s, "title" => tag_options[:title] || type.to_s.upcase, "href" => url_options.is_a?(Hash) ? url_for(url_options.merge(only_path: false)) : url_options ) end # Returns a link tag for a favicon managed by the asset pipeline. # # If a page has no link like the one generated by this helper, browsers # ask for /favicon.ico automatically, and cache the file if the # request succeeds. If the favicon changes it is hard to get it updated. # # To have better control applications may let the asset pipeline manage # their favicon storing the file under app/assets/images, and # using this helper to generate its corresponding link tag. # # The helper gets the name of the favicon file as first argument, which # defaults to "favicon.ico", and also supports +:rel+ and +:type+ options # to override their defaults, "shortcut icon" and "image/x-icon" # respectively: # # favicon_link_tag # # => # # favicon_link_tag 'myicon.ico' # # => # # Mobile Safari looks for a different link tag, pointing to an image that # will be used if you add the page to the home screen of an iOS device. # The following call would generate such a tag: # # favicon_link_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png' # # => def favicon_link_tag(source = "favicon.ico", options = {}) tag("link", { rel: "shortcut icon", type: "image/x-icon", href: path_to_image(source, skip_pipeline: options.delete(:skip_pipeline)) }.merge!(options.symbolize_keys)) end # Returns a link tag that browsers can use to preload the +source+. # The +source+ can be the path of a resource managed by asset pipeline, # a full path, or an URI. # # ==== Options # # * :type - Override the auto-generated mime type, defaults to the mime type for +source+ extension. # * :as - Override the auto-generated value for as attribute, calculated using +source+ extension and mime type. # * :crossorigin - Specify the crossorigin attribute, required to load cross-origin resources. # * :nopush - Specify if the use of server push is not desired for the resource. Defaults to +false+. # # ==== Examples # # preload_link_tag("custom_theme.css") # # => # # preload_link_tag("/videos/video.webm") # # => # # preload_link_tag(post_path(format: :json), as: "fetch") # # => # # preload_link_tag("worker.js", as: "worker") # # => # # preload_link_tag("//example.com/font.woff2") # # => # # preload_link_tag("//example.com/font.woff2", crossorigin: "use-credentials") # # => # # preload_link_tag("/media/audio.ogg", nopush: true) # # => # def preload_link_tag(source, options = {}) href = asset_path(source, skip_pipeline: options.delete(:skip_pipeline)) extname = File.extname(source).downcase.delete(".") mime_type = options.delete(:type) || Template::Types[extname].try(:to_s) as_type = options.delete(:as) || resolve_link_as(extname, mime_type) crossorigin = options.delete(:crossorigin) crossorigin = "anonymous" if crossorigin == true || (crossorigin.blank? && as_type == "font") nopush = options.delete(:nopush) || false link_tag = tag.link({ rel: "preload", href: href, as: as_type, type: mime_type, crossorigin: crossorigin }.merge!(options.symbolize_keys)) early_hints_link = "<#{href}>; rel=preload; as=#{as_type}" early_hints_link += "; type=#{mime_type}" if mime_type early_hints_link += "; crossorigin=#{crossorigin}" if crossorigin early_hints_link += "; nopush" if nopush request.send_early_hints("Link" => early_hints_link) if respond_to?(:request) && request link_tag end # Returns an HTML image tag for the +source+. The +source+ can be a full # path, a file, or an Active Storage attachment. # # ==== Options # # You can add HTML attributes using the +options+. The +options+ supports # additional keys for convenience and conformance: # # * :size - Supplied as "{Width}x{Height}" or "{Number}", so "30x45" becomes # width="30" and height="45", and "50" becomes width="50" and height="50". # :size will be ignored if the value is not in the correct format. # * :srcset - If supplied as a hash or array of [source, descriptor] # pairs, each image path will be expanded before the list is formatted as a string. # # ==== Examples # # Assets (images that are part of your app): # # image_tag("icon") # # => # image_tag("icon.png") # # => # image_tag("icon.png", size: "16x10", alt: "Edit Entry") # # => Edit Entry # image_tag("/icons/icon.gif", size: "16") # # => # image_tag("/icons/icon.gif", height: '32', width: '32') # # => # image_tag("/icons/icon.gif", class: "menu_icon") # # => # image_tag("/icons/icon.gif", data: { title: 'Rails Application' }) # # => # image_tag("icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" }) # # => # image_tag("pic.jpg", srcset: [["pic_1024.jpg", "1024w"], ["pic_1980.jpg", "1980w"]], sizes: "100vw") # # => # # Active Storage blobs (images that are uploaded by the users of your app): # # image_tag(user.avatar) # # => # image_tag(user.avatar.variant(resize_to_limit: [100, 100])) # # => # image_tag(user.avatar.variant(resize_to_limit: [100, 100]), size: '100') # # => def image_tag(source, options = {}) options = options.symbolize_keys check_for_image_tag_errors(options) skip_pipeline = options.delete(:skip_pipeline) options[:src] = resolve_image_source(source, skip_pipeline) if options[:srcset] && !options[:srcset].is_a?(String) options[:srcset] = options[:srcset].map do |src_path, size| src_path = path_to_image(src_path, skip_pipeline: skip_pipeline) "#{src_path} #{size}" end.join(", ") end options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size] tag("img", options) end # Returns an HTML video tag for the +sources+. If +sources+ is a string, # a single video tag will be returned. If +sources+ is an array, a video # tag with nested source tags for each source will be returned. The # +sources+ can be full paths or files that exist in your public videos # directory. # # ==== Options # # When the last parameter is a hash you can add HTML attributes using that # parameter. The following options are supported: # # * :poster - Set an image (like a screenshot) to be shown # before the video loads. The path is calculated like the +src+ of +image_tag+. # * :size - Supplied as "{Width}x{Height}" or "{Number}", so "30x45" becomes # width="30" and height="45", and "50" becomes width="50" and height="50". # :size will be ignored if the value is not in the correct format. # * :poster_skip_pipeline will bypass the asset pipeline when using # the :poster option instead using an asset in the public folder. # # ==== Examples # # video_tag("trailer") # # => # video_tag("trailer.ogg") # # => # video_tag("trailer.ogg", controls: true, preload: 'none') # # => # video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png") # # => # video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png", poster_skip_pipeline: true) # # => # video_tag("/trailers/hd.avi", size: "16x16") # # => # video_tag("/trailers/hd.avi", size: "16") # # => # video_tag("/trailers/hd.avi", height: '32', width: '32') # # => # video_tag("trailer.ogg", "trailer.flv") # # => # video_tag(["trailer.ogg", "trailer.flv"]) # # => # video_tag(["trailer.ogg", "trailer.flv"], size: "160x120") # # => def video_tag(*sources) options = sources.extract_options!.symbolize_keys public_poster_folder = options.delete(:poster_skip_pipeline) sources << options multiple_sources_tag_builder("video", sources) do |tag_options| tag_options[:poster] = path_to_image(tag_options[:poster], skip_pipeline: public_poster_folder) if tag_options[:poster] tag_options[:width], tag_options[:height] = extract_dimensions(tag_options.delete(:size)) if tag_options[:size] end end # Returns an HTML audio tag for the +sources+. If +sources+ is a string, # a single audio tag will be returned. If +sources+ is an array, an audio # tag with nested source tags for each source will be returned. The # +sources+ can be full paths or files that exist in your public audios # directory. # # When the last parameter is a hash you can add HTML attributes using that # parameter. # # audio_tag("sound") # # => # audio_tag("sound.wav") # # => # audio_tag("sound.wav", autoplay: true, controls: true) # # => # audio_tag("sound.wav", "sound.mid") # # => def audio_tag(*sources) multiple_sources_tag_builder("audio", sources) end private def multiple_sources_tag_builder(type, sources) options = sources.extract_options!.symbolize_keys skip_pipeline = options.delete(:skip_pipeline) sources.flatten! yield options if block_given? if sources.size > 1 content_tag(type, options) do safe_join sources.map { |source| tag("source", src: send("path_to_#{type}", source, skip_pipeline: skip_pipeline)) } end else options[:src] = send("path_to_#{type}", sources.first, skip_pipeline: skip_pipeline) content_tag(type, nil, options) end end def resolve_image_source(source, skip_pipeline) if source.is_a?(Symbol) || source.is_a?(String) path_to_image(source, skip_pipeline: skip_pipeline) else polymorphic_url(source) end rescue NoMethodError => e raise ArgumentError, "Can't resolve image into URL: #{e}" end def extract_dimensions(size) size = size.to_s if /\A\d+x\d+\z/.match?(size) size.split("x") elsif /\A\d+\z/.match?(size) [size, size] end end def check_for_image_tag_errors(options) if options[:size] && (options[:height] || options[:width]) raise ArgumentError, "Cannot pass a :size option with a :height or :width option" end end def resolve_link_as(extname, mime_type) if extname == "js" "script" elsif extname == "css" "style" elsif extname == "vtt" "track" elsif (type = mime_type.to_s.split("/")[0]) && type.in?(%w(audio video font)) type end end end end end