Commit d4c5c897
Changed files (2)
app
assets
javascripts
views
creations
app/assets/javascripts/creations.js
@@ -1,1 +1,29 @@
-$(document).ready(function(){ });
+var Creations = Creations || {};
+Creations.Crop = {
+ initialize:function(){
+ $('#cropbox').Jcrop({
+ onChange: update_crop,
+ onSelect: update_crop,
+ setSelect: [100, 100, 210, 150],
+ aspectRatio: 1.4
+ });
+ function update_crop(coords) {
+ var rx = 210/coords.w;
+ var ry = 150/coords.h;
+ var lw = $('#cropbox').width();
+ var lh = $('#cropbox').height();
+
+ $('#preview').css({
+ width: Math.round(rx * lw) + 'px',
+ height: Math.round(ry * lh) + 'px',
+ marginLeft: '-' + Math.round(rx * coords.x) + 'px',
+ marginTop: '-' + Math.round(ry * coords.y) + 'px'
+ });
+
+ $("#crop_x").val(coords.x);
+ $("#crop_y").val(coords.y);
+ $("#crop_w").val(coords.w);
+ $("#crop_h").val(coords.h);
+ }
+ }
+};
app/views/creations/crop.html.erb
@@ -1,45 +1,12 @@
<% content_for :head do %>
<style type="text/css">
-.preview {
- width:210px;
- height:150px;
- overflow:hidden;
-}
-.jcrop img {
- max-width:none;
-}
+ .preview { width:210px; height:150px; overflow:hidden; }
+ .jcrop img { max-width:none; }
</style>
-<script type="text/javascript" charset="utf-8">
-$(function() {
- $('#cropbox').Jcrop({
- onChange: update_crop,
- onSelect: update_crop,
- setSelect: [100, 100, 210, 150],
- aspectRatio: 1.4
- });
-});
-
-function update_crop(coords) {
- var rx = 210/coords.w;
- var ry = 150/coords.h;
- var lw = $('#cropbox').width();
- var lh = $('#cropbox').height();
-
- $('#preview').css({
- width: Math.round(rx * lw) + 'px',
- height: Math.round(ry * lh) + 'px',
- marginLeft: '-' + Math.round(rx * coords.x) + 'px',
- marginTop: '-' + Math.round(ry * coords.y) + 'px'
- });
-
- $("#crop_x").val(coords.x);
- $("#crop_y").val(coords.y);
- $("#crop_w").val(coords.w);
- $("#crop_h").val(coords.h);
-}
-</script>
+ <script type="text/javascript" charset="utf-8">
+ $(function() { Creations.Crop.initialize(); });
+ </script>
<% end %>
-
<div class="row">
<div class="page-header">
<h1> <%= @creation.name %> <small> submitted by <%= link_to @creation.user.name, profile_path(@creation.user) %> </small> </h1>
@@ -49,27 +16,27 @@ function update_crop(coords) {
</div>
</div>
<div class="row">
- <div class="span9 jcrop">
- <h3>Do you want to crop the image as well?</h3>
- <%= image_tag @creation.image_url, :id => "cropbox" %>
- </div>
- <div class="span3 jcrop">
- <h3>Crop Preview</h3>
- <div class="preview">
- <%= image_tag @creation.image_url, :id => "preview" %>
- </div>
+ <div class="span9 jcrop">
+ <h3>Do you want to crop the image as well?</h3>
+ <%= image_tag @creation.image_url, :id => "cropbox" %>
+ </div>
+ <div class="span3 jcrop">
+ <h3>Crop Preview</h3>
+ <div class="preview">
+ <%= image_tag @creation.image_url, :id => "preview" %>
</div>
+ </div>
</div>
<div class="row">
<div class="span12">
<%= form_for @creation, :url => creations_crop_update_path(@creation) do |f| %>
- <% for attribute in [:crop_x, :crop_y, :crop_h, :crop_w] %>
- <%= f.hidden_field attribute, :id => attribute %>
- <% end %>
- <div class="form-actions">
- <%= f.submit "Crop and Publish", :class => "btn btn-large btn-primary" %>
- <a class="btn btn-large" href="<%= url_for creation_path(@creation) %>">Skip</a>
- </div>
+ <% for attribute in [:crop_x, :crop_y, :crop_h, :crop_w] %>
+ <%= f.hidden_field attribute, :id => attribute %>
+ <% end %>
+ <div class="form-actions">
+ <%= f.submit "Crop and Publish", :class => "btn btn-large btn-primary" %>
+ <a class="btn btn-large" href="<%= url_for creation_path(@creation) %>">Skip</a>
+ </div>
<% end %>
</div>
</div>