feat: add ability to download image of code

Lewis Youl · Lewis Youl · commit 7c370c1651bd · 2021-03-06T17:27:57.000Z
diff --git a/app/controllers/modals/snippets_controller.rb b/app/controllers/modals/snippets_controller.rb
@@ -21,6 +21,11 @@ def move
     @folders = current_user.folders.order(name: :asc)
   end
 
+  def picture
+    @snippet = Snippet.find(params[:id])
+    @languages = Language.order(name: :asc)
+  end
+
   private
 
   def set_snippet
diff --git a/app/javascript/controllers/codemirror_controller.js b/app/javascript/controllers/codemirror_controller.js
@@ -10,7 +10,8 @@ export default class extends Controller {
     code: String,
     modeId: String,
     initialized: Boolean,
-    readOnly: Boolean
+    readOnly: Boolean,
+    isCapture: Boolean,
   }
 
   connect() {
@@ -35,6 +36,11 @@ export default class extends Controller {
     });
 
     this.initializedValue = true
+
+    if (this.isCaptureValue) {
+      document.querySelector(".CodeMirror")
+        .classList.add('rounded-tr-md', 'rounded-tl-md', 'shadow-2xl')
+    }
   }
 
   setCodeMirrorValue() {
diff --git a/app/javascript/controllers/picture_controller.js b/app/javascript/controllers/picture_controller.js
@@ -0,0 +1,34 @@
+import { Controller } from 'stimulus';
+import domtoimage from 'dom-to-image';
+
+export default class extends Controller {
+	static targets = ['code']
+
+	capture() {
+		const scale = 2;
+		const node = this.codeTarget
+		const options = {
+			height: node.offsetHeight * scale,
+			width: node.offsetWidth * scale,
+			style: {
+				transform: "scale(" + scale + ")",
+				transformOrigin: "top left",
+				width: node.offsetWidth + "px",
+				height: node.offsetHeight + "px"
+			}
+		}
+
+		domtoimage.toJpeg(node, options)
+			.then(this.downloadImage)
+			.catch(console.error)
+	}
+
+	downloadImage(dataUrl) {
+		let link = document.createElement('a')
+
+		link.setAttribute('download', 'snippetsafe.jpeg');
+		link.setAttribute('href', dataUrl);
+		link.click();
+		link.remove()
+	}
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -22,7 +22,6 @@
 
     <meta name="turbolinks-cache-control" content="no-preview">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/atom-one-light.min.css">
     <%# <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.1/highlight.min.js"></script> %>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css" integrity="sha512-w+u2vZqMNUVngx+0GVZYM21Qm093kAexjueWOv9e9nIeYJb1iEfiHC7Y+VvmP/tviQyA5IR32mwN/5hTEJx6Ng==" crossorigin="anonymous" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js" integrity="sha512-9pGiHYK23sqK5Zm0oF45sNBAX/JqbZEP7bSDHyt+nT3GddF+VFIcYNqREt0GDpmFVZI3LZ17Zu9nMMc9iktkCw==" crossorigin="anonymous"></script>
diff --git a/app/views/layouts/modal.html.erb b/app/views/layouts/modal.html.erb
@@ -33,7 +33,7 @@
         From: "opacity-100 translate-y-0 sm:scale-100"
         To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
     -->
-    <div class="z-10 relative mt-2 inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle w-full sm:max-w-2xl sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline" data-modal-target="body">
+    <div class="z-10 relative mt-2 inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle w-full sm:max-w-4xl sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline" data-modal-target="body">
       <span data-action="click->modal#close" title="Close modal" class="hover:bg-cyan-hover transition cursor-pointer absolute z-12 -top-4 -right-5 inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-cyan mr-2">
         <%= render partial: 'shared/icons/close', locals: { height: 7, width: 7, color: 'text-white' } %>
       </span>
diff --git a/app/views/modals/snippets/picture.html.erb b/app/views/modals/snippets/picture.html.erb
@@ -0,0 +1,13 @@
+<h3 class="text-center mb-4">Capture Image</h3>
+
+<h5 class="mb-2"><%= @snippet.description %></h5>
+<div data-controller="picture">
+	<div data-picture-target="code" class="bg-cyan p-20">
+		<%= render partial: 'shared/codemirror', locals: { code: @snippet.body, mode_id: @snippet.language_id, read_only: false, capture: true  } %>
+	</div>
+
+	<div class="flex justify-end mt-4">
+		<%= button_tag('Tweet', class: 'button--disabled mr-2') %>
+		<%= button_tag('Download', class: 'button--cta-tertiary', data: { action: 'click->picture#capture' }) %>
+	</div>
+</div>
diff --git a/app/views/shared/_codemirror.html.erb b/app/views/shared/_codemirror.html.erb
@@ -10,7 +10,8 @@
         codemirror_modes_value: @languages,
         codemirror_initialized_value: false,
         codemirror_read_only_value: read_only,
-        codemirror_target: 'mirror'
+        codemirror_target: 'mirror',
+        codemirror_is_capture_value: capture
       },
       class: "font-mono h-80 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm"
     }
diff --git a/app/views/shared/_picture_button.html.erb b/app/views/shared/_picture_button.html.erb
@@ -0,0 +1,10 @@
+<%= button_tag(
+    class: "ml-2 no-underline flex items-center cursor-pointer transition",
+		data: {
+			controller: 'modal',
+			action: 'modal#present',
+			modal_url_value: picture_modals_snippet_path(snippet: snippet)
+		}
+	) do %>
+  <%= render partial: 'shared/icons/camera', locals: { classes: 'w-5 h-5 text-gray-500' } %>
+<% end %>
diff --git a/app/views/shared/icons/_camera.html.erb b/app/views/shared/icons/_camera.html.erb
@@ -0,0 +1 @@
+<svg class="<%= classes %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
diff --git a/app/views/snippets/_snippet.html.erb b/app/views/snippets/_snippet.html.erb
@@ -29,9 +29,10 @@
       <div class="flex">
         <%= render partial: 'shared/like_button', locals: { snippet: snippet } %>
         <%= render partial: 'shared/comment_button', locals: { snippet: snippet } %>
+        <%= render partial: 'shared/picture_button', locals: { snippet: snippet } %>
       </div>
     </div>
   </div>
 
-  <%= render partial: 'shared/codemirror', locals: { code: snippet.body, mode_id: snippet.language_id, read_only: true  } %>
+  <%= render partial: 'shared/codemirror', locals: { code: snippet.body, mode_id: snippet.language_id, read_only: true, capture: false  } %>
 <% end %>
diff --git a/app/views/snippets/_snippet_preview.html.erb b/app/views/snippets/_snippet_preview.html.erb
@@ -38,7 +38,7 @@
           <span>More...</span>
         </div>
       <% end %>
-      <%= render partial: 'shared/codemirror', locals: { code: snippet.preview, mode_id: snippet.language_id, read_only: true, classes: 'snippet--content' } %>
+      <%= render partial: 'shared/codemirror', locals: { code: snippet.preview, mode_id: snippet.language_id, read_only: true, capture: false, classes: 'snippet--content' } %>
     </div>
   </div>
 <% end %>
diff --git a/config/routes.rb b/config/routes.rb
@@ -39,6 +39,7 @@
 
     resources :snippets, only: %i(new edit) do
       get :move, on: :member
+      get :picture, on: :member
     end
 
     resources :folders, only: :new
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "autoprefixer": "^10.2.3",
     "axios": "^0.19.2",
     "codemirror": "^5.59.2",
+    "dom-to-image": "^2.6.0",
     "highlightjs": "^9.16.2",
     "lodash": "^4.17.15",
     "marked": "^0.8.2",
diff --git a/yarn.lock b/yarn.lock
@@ -2698,6 +2698,11 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-to-image@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.6.0.tgz#8a503608088c87b1c22f9034ae032e1898955867"
+  integrity sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc=
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<svg class="<%= classes %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>`