Commit d4c5c897

mo k <mo@mokhan.ca>
2012-06-03 07:33:15
move crop js into a separate file.
1 parent 05e5643
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>