Render copy-to-clipboard text in element attribute [ci-skip]
Rendering copy-to-clipboard text in an invisible element causes invisible extraneous matches when searching text on the page (e.g. with Ctrl+F). Rendering in an element attribute avoids this problem.
This commit is contained in:
parent
fcacb93295
commit
b78966b558
|
@ -257,12 +257,6 @@ body {
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clipboard-content {
|
|
||||||
opacity:0;
|
|
||||||
position:absolute;
|
|
||||||
z-index:-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
background: #c52f24 url(../images/header_tile.gif) repeat-x;
|
background: #c52f24 url(../images/header_tile.gif) repeat-x;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
|
|
|
@ -253,12 +253,6 @@ body {
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clipboard-content {
|
|
||||||
opacity:0;
|
|
||||||
position:absolute;
|
|
||||||
z-index:-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
background: #c52f24 url(../images/header_tile.gif) repeat-x;
|
background: #c52f24 url(../images/header_tile.gif) repeat-x;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
|
|
|
@ -14,12 +14,10 @@ module RailsGuides
|
||||||
formatter = Rouge::Formatters::HTML.new
|
formatter = Rouge::Formatters::HTML.new
|
||||||
lexer = ::Rouge::Lexer.find_fancy(lexer_language(language))
|
lexer = ::Rouge::Lexer.find_fancy(lexer_language(language))
|
||||||
formatted_code = formatter.format(lexer.lex(code))
|
formatted_code = formatter.format(lexer.lex(code))
|
||||||
clipboard_id = "clipboard-#{SecureRandom.hex(16)}"
|
|
||||||
<<~HTML
|
<<~HTML
|
||||||
<div class="code_container">
|
<div class="code_container">
|
||||||
<pre><code class="highlight #{lexer_language(language)}">#{formatted_code}</code></pre>
|
<pre><code class="highlight #{lexer_language(language)}">#{formatted_code}</code></pre>
|
||||||
<textarea class="clipboard-content" id="#{clipboard_id}">#{clipboard_content(code, language)}</textarea>
|
<button class="clipboard-button" data-clipboard-text="#{clipboard_content(code, language)}">Copy</button>
|
||||||
<button class="clipboard-button" data-clipboard-target="##{clipboard_id}">Copy</button>
|
|
||||||
</div>
|
</div>
|
||||||
HTML
|
HTML
|
||||||
end
|
end
|
||||||
|
@ -95,7 +93,7 @@ module RailsGuides
|
||||||
code = code.lines.grep(prompt_regexp).join.gsub(prompt_regexp, "")
|
code = code.lines.grep(prompt_regexp).join.gsub(prompt_regexp, "")
|
||||||
end
|
end
|
||||||
|
|
||||||
ERB::Util.h(code)
|
ERB::Util.html_escape(code)
|
||||||
end
|
end
|
||||||
|
|
||||||
def convert_notes(body)
|
def convert_notes(body)
|
||||||
|
|
Loading…
Reference in New Issue