spud_media 0.9.0 → 0.9.1

data/Readme.markdown

@@ -1,6 +1,6 @@
 # Spud Media
 
-Spud Media is an engine for managing documents and other media miscellaneous files, designed for use with [Spud][1].
+Spud Media is an engine for managing documents and other miscellaneous media files, designed for use with [Spud][1].
 
 ## Installation/Usage
 
@@ -20,17 +20,17 @@ Spud Media is an engine for managing documents and other media miscellaneous fil
 
 Spud Photos accepts the following configuration options:
 
-  Spud::Media.configure do |config|
+    Spud::Media.configure do |config|
   
-    # s3 storage requires the 'aws-sdk' gem. defaults to filesystem
-    config.paperclip_storage = :s3
-    config.s3_credentials = "#{Rails.root}/config/s3.yml"
+        # s3 storage requires the 'aws-sdk' gem. defaults to filesystem
+        config.paperclip_storage = :s3
+        config.s3_credentials = "#{Rails.root}/config/s3.yml"
 
     # see below for notes on 'storage_path_protected'
-    config.storage_path = "public/system/spud_media/:id/:style/:basename.:extension"
-    config.storage_path_protected = "public/system/spud_media_protected/:id/:style/:basename.:extension"
-    config.storage_url = "/system/spud_media/:id/:style/:basename.:extension"
-  end
+        config.storage_path = "public/system/spud_media/:id/:style/:basename.:extension"
+        config.storage_path_protected = "public/system/spud_media_protected/:id/:style/:basename.:extension"
+        config.storage_url = "/system/spud_media/:id/:style/:basename.:extension"
+    end
 
 ## File Protection
 
@@ -42,7 +42,7 @@ Unprotected files are stored under `/public/system/spud_media` and are accessed
 
 Protected files are moved to `public/system/spud_media_protected`. Note that the public-facing download URL should __not__ reflect the `protected` storage path. Instead the user will hit the same URL as before, but this time their request will hit the `show` action of the `ProtectedMedia` controller. 
 
-It is up to the individual developer to make sure that the protected storage path is not accessible by the public. You may choose to protect this folder via server configurations, or you can move the folder out of the document root using `config.storage_path_protected`.
+__It is up to the individual developer to make sure that the protected storage path is not accessible by the public.__ You may choose to protect this folder via server configurations, or you can move the folder out of the document root using `config.storage_path_protected`.
 
 ### Amazon S3
 

data/app/assets/javascripts/spud/admin/media.js

@@ -0,0 +1,176 @@
+//= require jcrop/js/jquery.Jcrop
+//= require_self
+
+Spud = (typeof(Spud) == 'undefined') ? {} : Spud;
+Spud.Admin = (typeof(Spud.Admin) == 'undefined') ? {} : Spud.Admin;
+
+Spud.Admin.Media = new function(){
+
+  var self = this;
+  var cropimage;
+  var cropcontainer;
+  var croptarget;
+  var cropscale;
+  var maxcropscale;
+  var cropscaleincrement;
+  var originalWidth;
+  var originalHeight;
+  var cropartbox;
+  var jcrop;
+
+  this.edit = function(){
+    cropimage = $('#spud_media_cropper_image');
+    // IE8 isn't handling the image load event properly, so...
+    setTimeout(function(){
+      if(cropimage[0].complete){
+        self.initializeEditor();
+      }
+      else{
+        self.edit();
+      }
+    }, 50);
+  };
+
+  this.initializeEditor = function(){
+
+    // cache some selectors
+    cropcontainer = $('#spud_media_cropper_jcrop_container');
+    cropartbox = $('#spud_media_cropper');
+
+    // get the original dimensions before scaling the image down
+    originalWidth = cropimage.width();
+    originalHeight = cropimage.height();
+
+    // the max width is 900px (at least until the UI can handle more than that)
+    if(originalWidth > 900){
+      maxcropscale = Math.floor(900 / originalWidth * 100);
+    }
+    else{
+      maxcropscale = 100;
+    }
+    cropscaleincrement = Math.ceil(3.0 * (maxcropscale / 100));
+
+    // scale down the original if necessary
+    cropscale = parseInt($('#spud_media_crop_s').val());
+    if(cropscale > maxcropscale){
+      $('#spud_media_crop_s').val(maxcropscale);
+      cropscale = maxcropscale;
+    }
+
+    // if this is a new image, width and hight will be null. set some starter values.
+    if(!$('#spud_media_crop_w').val()){
+      $('#spud_media_crop_w').val(originalWidth * (maxcropscale / 100));
+      $('#spud_media_crop_h').val(originalHeight * (maxcropscale / 100));
+    }
+
+    // update height of artbox to match height of scaled image
+    cropartbox.height(originalHeight * (maxcropscale / 100));
+
+    self.resizeAndCenter(cropscale);
+
+    $('body').on('change', '#spud_media_crop_s', self.changedMediaCropScale);
+    $('body').on('click', '#spud_media_cropper_resize_up, #spud_media_cropper_resize_down', self.incrementMediaCropScale);
+    $('body').on('change', '#spud_media_crop_x, #spud_media_crop_y, #spud_media_crop_w, #spud_media_crop_h', self.changedMediaCropDimensions);
+    $('body').on('keypress', 'form input[type=text]', self.preventSubmitOnEnterKey);
+  };
+
+  this.resizeAndCenter = function(percent){
+
+    // destroy the jcrop object if it exists already
+    if(jcrop){
+      jcrop.destroy();
+    }
+
+    // initialize jcrop. snap to pre-existing selection if one exists.
+    var _width = Math.min(900, (originalWidth * (percent / 100)));
+    var _height = originalHeight * (_width / originalWidth);
+    cropimage.Jcrop({
+        boxWidth:_width,
+        boxHeight:_height,
+        onChange:self.updateCropCoordinates,
+        onSelect:self.updateCropCoordinates,
+        setSelect:self.getSelectFields()
+      },
+      function(){
+        jcrop = this;
+      }
+    );
+
+    // using the outer container, center the jcrop object in the artboard
+    var _left = (900 - _width) / 2;
+    var _top = (cropartbox.height() - _height) / 6;
+    cropcontainer.css({
+      left:_left,
+      top:_top
+    });
+  };
+
+  this.updateCropCoordinates = function(c){
+    $('#spud_media_crop_x').val(Math.floor(c.x * (cropscale / 100)));
+    $('#spud_media_crop_y').val(Math.floor(c.y * (cropscale / 100)));
+    $('#spud_media_crop_w').val(Math.floor(c.w * (cropscale / 100)));
+    $('#spud_media_crop_h').val(Math.floor(c.h * (cropscale / 100)));
+  };
+
+  this.changedMediaCropScale = function(e){
+    var val = $(this).val();
+    var percent = parseInt(val);
+    if(!percent || percent > maxcropscale){
+      $(this).val(maxcropscale);
+    }
+    else{
+      $(this).val(percent);
+      cropscale = percent;
+      self.resizeAndCenter(percent); 
+    }
+  };
+
+  this.incrementMediaCropScale = function(e){
+    var id = $(this).attr('id');
+    if(id == 'spud_media_cropper_resize_up'){
+      cropscale = Math.min(maxcropscale, cropscale+cropscaleincrement);
+    }
+    else{
+      cropscale = Math.max(0, cropscale-cropscaleincrement);
+    }
+    $('#spud_media_crop_s').val(cropscale);
+    self.resizeAndCenter(cropscale);
+    return false;
+  }
+
+  this.changedMediaCropDimensions = function(e){
+    var selection = self.getSelectFields();
+    if(selection){
+      jcrop.setSelect(selection);
+    }
+  };
+
+  this.getSelectFields = function(){
+    var x = parseInt($('#spud_media_crop_x').val());
+    var y = parseInt($('#spud_media_crop_y').val());
+    var w = parseInt($('#spud_media_crop_w').val());
+    var h = parseInt($('#spud_media_crop_h').val());
+    var x2 = x + w;
+    var y2 = y + h;
+    if(isNaN(x) || isNaN(w) || isNaN(x2) || isNaN(y2)){
+      return false;
+    }
+    else{
+      return [x * (100 / cropscale), y * (100 / cropscale), x2 * (100 / cropscale), y2 * (100 / cropscale)];
+    }
+  }
+
+  this.preventSubmitOnEnterKey = function(e){
+    if(e.keyCode == 13) {
+      e.preventDefault();
+      // need to prevent the form submit, but still fire the value change events
+      if($(this).attr('id') == 'spud_media_crop_s'){
+        self.changedMediaCropScale.apply(this, [e]);
+      }
+      else{
+        self.changedMediaCropDimensions(e);
+      }
+      return false;
+    }
+  };
+};

data/app/assets/libs/jcrop/css/jquery.Jcrop.css

@@ -0,0 +1,86 @@
+/* jquery.Jcrop.css v0.9.10 - MIT License */
+
+/*
+  The outer-most container in a typical Jcrop instance
+  If you are having difficulty with formatting related to styles
+  on a parent element, place any fixes here or in a like selector
+
+  You can also style this element if you want to add a border, etc
+  A better method for styling can be seen below with .jcrop-light
+  (Add a class to the holder and style elements for that extended class)
+*/
+.jcrop-holder {
+  direction: ltr;
+  text-align: left;
+}
+
+/* These styles define the border lines */
+.jcrop-vline,.jcrop-hline{background:#FFF url(/assets/jcrop/css/Jcrop.gif) top left repeat;font-size:0;position:absolute;}
+.jcrop-vline{height:100%;width:1px!important;}
+.jcrop-hline{height:1px!important;width:100%;}
+.jcrop-vline.right{right:0;}
+.jcrop-hline.bottom{bottom:0;}
+
+/* Handle style - size is set by Jcrop handleSize option (currently) */
+.jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;}
+
+/* This style is used for invisible click targets */
+.jcrop-tracker
+{
+  height: 100%; 
+  width: 100%;
+  -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
+  -webkit-touch-callout: none;              /* disable callout, image save panel */
+  -webkit-user-select: none;                /* disable cut copy paste */
+}
+
+/* Positioning of handles and drag bars */
+.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
+.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
+.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
+.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
+.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
+.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
+.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
+.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
+.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
+.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
+.jcrop-dragbar.ord-n{margin-top:-4px;}
+.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
+.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
+.jcrop-dragbar.ord-w{margin-left:-4px;}
+
+/* The "jcrop-light" class/extension */
+.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline
+{
+	background:#FFF;
+	filter:Alpha(opacity=70)!important;
+	opacity:.70!important;
+}
+.jcrop-light .jcrop-handle
+{
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	background-color:#000;
+	border-color:#FFF;
+	border-radius:3px;
+}
+
+/* The "jcrop-dark" class/extension */
+.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline
+{
+	background:#000;
+	filter:Alpha(opacity=70)!important;
+	opacity:.7!important;
+}
+.jcrop-dark .jcrop-handle
+{
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	background-color:#FFF;
+	border-color:#000;
+	border-radius:3px;
+}
+
+/* Fix for twitter bootstrap et al. */
+.jcrop-holder img,img.jcrop-preview{ max-width: none; }

data/app/assets/libs/jcrop/css/jquery.Jcrop.min.css

@@ -0,0 +1,28 @@
+/* jquery.Jcrop.min.css v0.9.10 (build:20120429) */
+.jcrop-holder{direction:ltr;text-align:left;}
+.jcrop-vline,.jcrop-hline{background:#FFF url(/assets/jcrop/css/Jcrop.gif) top left repeat;font-size:0;position:absolute;}
+.jcrop-vline{height:100%;width:1px!important;}
+.jcrop-hline{height:1px!important;width:100%;}
+.jcrop-vline.right{right:0;}
+.jcrop-hline.bottom{bottom:0;}
+.jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;}
+.jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;}
+.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
+.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
+.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
+.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
+.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
+.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
+.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
+.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
+.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
+.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
+.jcrop-dragbar.ord-n{margin-top:-4px;}
+.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
+.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
+.jcrop-dragbar.ord-w{margin-left:-4px;}
+.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:Alpha(opacity=70)!important;opacity:.70!important;}
+.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#FFF;border-radius:3px;}
+.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:Alpha(opacity=70)!important;opacity:.7!important;}
+.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-color:#000;border-radius:3px;}
+.jcrop-holder img,img.jcrop-preview{max-width:none;}