diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index d8f5eaf..1503e62 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -18,10 +18,5 @@ $(function() {
$('input[data-behavior=focus]:first').focus().select();
- $('#embed-link').click(function(e) {
- e.preventDefault();
- $('.embed-box').slideDown('fast');
- });
-
$('[data-toggle="popover"]').popover({ html: true });
});
diff --git a/app/assets/stylesheets/asciicasts.sass b/app/assets/stylesheets/asciicasts.sass
index 09bb75c..62eeeef 100644
--- a/app/assets/stylesheets/asciicasts.sass
+++ b/app/assets/stylesheets/asciicasts.sass
@@ -79,24 +79,6 @@
float: right
margin-right: 10px
- .embed-box
- display: none
- padding: 15px
- background-color: #f7f7f7
- border-bottom-left-radius: 3px
- border-bottom-right-radius: 3px
- border-left: 1px solid #ddd
- border-right: 1px solid #ddd
- border-bottom: 1px solid #ddd
-
- input
- width: 100%
- border: 1px solid #ddd
- font-family: monospace
- font-size: 12px
- margin-bottom: 5px
- padding: 4px
-
section.description
padding: 0
border-bottom: 1px solid #eee
@@ -110,3 +92,18 @@
h2
font-size: 20px
+
+ .embed-modal
+ max-width: 900px
+ width: initial
+
+ h2:first-child
+ margin-top: 0
+
+ input[type="text"]
+ width: 100%
+ border: 1px solid #ddd
+ font-family: Menlo, Monaco, Consolas, "Bitstream Vera Sans Mono", monospace
+ font-size: 12px
+ margin-bottom: 5px
+ padding: 6px
diff --git a/app/assets/stylesheets/base.sass b/app/assets/stylesheets/base.sass
index c2c1d77..ff32c95 100644
--- a/app/assets/stylesheets/base.sass
+++ b/app/assets/stylesheets/base.sass
@@ -7,6 +7,12 @@ body
background-color: $background-color
padding-top: 42px
+ &.modal-open
+ margin-right: 0
+
+ .navbar-fixed-top
+ margin-right: 0
+
.btn
font-size: 15px
diff --git a/app/presenters/asciicast_page_presenter.rb b/app/presenters/asciicast_page_presenter.rb
index 61c7926..c32fa4b 100644
--- a/app/presenters/asciicast_page_presenter.rb
+++ b/app/presenters/asciicast_page_presenter.rb
@@ -55,6 +55,18 @@ class AsciicastPagePresenter
%()
end
+ def embed_html_link(routes)
+ img_src = routes.asciicast_url(asciicast, format: :png)
+ url = routes.asciicast_url(asciicast)
+ %(
)
+ end
+
+ def embed_markdown_link(routes)
+ img_src = routes.asciicast_url(asciicast, format: :png)
+ url = routes.asciicast_url(asciicast)
+ "[![alt](#{img_src})](#{url})"
+ end
+
def show_admin_dropdown?
[show_edit_link?,
show_delete_link?,
diff --git a/app/views/asciicasts/show.html.slim b/app/views/asciicasts/show.html.slim
index 43b4987..d152d93 100644
--- a/app/views/asciicasts/show.html.slim
+++ b/app/views/asciicasts/show.html.slim
@@ -61,15 +61,7 @@
li
span.glyphicon.glyphicon-link
'
- a href="#" id="embed-link" Embed
-
- .container
- .row
- .col-md-6.col-md-offset-6
- .embed-box.text-right
- input[type="text" class="embed-script" value=page.embed_script(self) data-behavior="auto-select" readonly]
- br
- | See the #{link_to 'embedding docs', docs_path(:embedding)} for more options.
+ a href="#" id="embed-link" data-toggle="modal" data-target="#embed-modal" Embed
- if page.show_description?
section.odd.description
@@ -82,3 +74,28 @@
.other-asciicasts
h2 More by #{page.author_link}
= render 'previews', asciicasts: page.other_asciicasts_by_author, per_row: 3
+
+ .modal.fade id="embed-modal" tabindex="-1" role="dialog"
+ .modal-dialog.embed-modal
+ .modal-content
+ .modal-header
+ button type="button" class="close" data-dismiss="modal"
+ span ×
+ h4.modal-title id="myModalLabel" Embed this asciicast
+ .modal-body
+ h2 Player
+ p Paste this script tag where you want the player to be displayed on your page:
+ p
+ input[type="text" value=page.embed_script(self) data-behavior="auto-select" readonly]
+ p See the #{link_to 'embedding docs', docs_path(:embedding)} for additional options.
+
+ h2 Image link
+ p Use snippets below to display a screenshot linking to this asciicast. Useful in places where scripts are not allowed (e.g. in a project's README file).
+ p
+ span HTML:
+ br
+ input[type="text" value=page.embed_html_link(self) data-behavior="auto-select" readonly]
+ p
+ span Markdown:
+ br
+ input[type="text" value=page.embed_markdown_link(self) data-behavior="auto-select" readonly]