Emi Matchu
b2a23b3e7b
I couldn't find a library for this functionality that didn't require jQuery, and I don't want to be adding *more* jQuery requirements. So, I decided to throw together my own! The `<magic-magnifier>` component copies its contents into a "lens" element, then uses basic JS to track mouse position, then uses CSS to move the lens and its contents into a helpful position. One thing I noticed here is that the zoom is a bit crunchy because we're using PNG images, and it's hard to zoom in even further than we already are. I might try switching this UI to use the SVG images by default instead?
27 lines
810 B
Text
27 lines
810 B
Text
= content_tag "support-outfit-viewer", **html_options do
|
|
%magic-magnifier
|
|
= outfit_viewer outfit
|
|
|
|
%table
|
|
%thead
|
|
%tr
|
|
%th{scope: "col"} DTI ID
|
|
%th{scope: "col"} Zone
|
|
%th{scope: "col"} Links
|
|
%tbody
|
|
- outfit.visible_layers.each do |swf_asset|
|
|
%tr
|
|
%th{scope: "row", "data-field": "id"}
|
|
= swf_asset.id
|
|
%td
|
|
= swf_asset.zone.label
|
|
(##{swf_asset.zone.id})
|
|
%td{"data-field": "links"}
|
|
%ul
|
|
- if swf_asset.image_url?
|
|
%li= link_to "PNG", swf_asset.image_url, target: "_blank"
|
|
- if swf_asset.svg_url?
|
|
%li= link_to "SVG", swf_asset.svg_url, target: "_blank"
|
|
%li= link_to "SWF", swf_asset.url, target: "_blank"
|
|
- if swf_asset.manifest_url?
|
|
%li= link_to "Manifest", swf_asset.manifest_url, target: "_blank"
|