spud_media 0.9.4 → 0.9.5

data/Rakefile

@@ -20,21 +20,9 @@ RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_files.include('lib/**/*.rb')
 end
 
-APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
 load 'rails/tasks/engine.rake'
 
-
-
 Bundler::GemHelper.install_tasks
 
-require 'rake/testtask'
-
-Rake::TestTask.new(:test) do |t|
-  t.libs << 'lib'
-  t.libs << 'test'
-  t.pattern = 'test/**/*_test.rb'
-  t.verbose = false
-end
-
-
-task :default => :test
+require 'rake'

data/Readme.markdown

@@ -50,4 +50,24 @@ Files marked as unprotected will be uploaded to Amazon using the `public_read` A
 
 Files marked as protected are uploaded using the `private` ACL. In this case, calling `@media.attachment_url` will return a local URL that hits the show action of our `ProtectedMedia` controller. Once we have verified the user is logged in we generate a secure URL and redirect the user to it. The generated URL is good for 10 minutes. 
 
-[1]:https://github.com/davydotcom/spud_core_admin
+[1]:https://github.com/davydotcom/spud_core_admin
+
+Testing
+-----------------
+
+Spud uses RSpec for testing. Get the tests running with a few short commands:
+
+1. Create and migrate the databases:
+   
+    	rake db:create
+		rake db:migrate
+
+2. Load the schema in to the test database:
+
+		rake app:db:test:prepare
+
+3. Run the tests with RSpec
+
+		rspec spec
+
+After the tests have completed the current code coverage stats is available by opening ```/coverage/index.html``` in a browser.

data/app/assets/javascripts/spud/admin/{media.js → media/application.js}

@@ -1,10 +1,9 @@
 //= require jcrop/js/jquery.Jcrop
+//= require spud/admin/media/plugin
+//= require spud/admin/media/picker
 //= require_self
 
-Spud = (typeof(Spud) == 'undefined') ? {} : Spud;
-Spud.Admin = (typeof(Spud.Admin) == 'undefined') ? {} : Spud.Admin;
-
-Spud.Admin.Media = new function(){
+spud.admin.media = new function(){
 
   var self = this;
   var cropimage;
@@ -51,7 +50,7 @@ Spud.Admin.Media = new function(){
     cropscaleincrement = Math.ceil(3.0 * (maxcropscale / 100));
 
     // scale down the original if necessary
-    cropscale = parseInt($('#spud_media_crop_s').val());
+    cropscale = parseInt($('#spud_media_crop_s').val(), 10);
     if(cropscale > maxcropscale){
       $('#spud_media_crop_s').val(maxcropscale);
       cropscale = maxcropscale;
@@ -114,14 +113,14 @@ Spud.Admin.Media = new function(){
 
   this.changedMediaCropScale = function(e){
     var val = $(this).val();
-    var percent = parseInt(val);
+    var percent = parseInt(val, 10);
     if(!percent || percent > maxcropscale){
       $(this).val(maxcropscale);
     }
     else{
       $(this).val(percent);
       cropscale = percent;
-      self.resizeAndCenter(percent); 
+      self.resizeAndCenter(percent);
     }
   };
 
@@ -136,7 +135,7 @@ Spud.Admin.Media = new function(){
     $('#spud_media_crop_s').val(cropscale);
     self.resizeAndCenter(cropscale);
     return false;
-  }
+  };
 
   this.changedMediaCropDimensions = function(e){
     var selection = self.getSelectFields();
@@ -146,10 +145,10 @@ Spud.Admin.Media = new function(){
   };
 
   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 x = parseInt($('#spud_media_crop_x').val(), 10);
+    var y = parseInt($('#spud_media_crop_y').val(), 10);
+    var w = parseInt($('#spud_media_crop_w').val(), 10);
+    var h = parseInt($('#spud_media_crop_h').val(), 10);
     var x2 = x + w;
     var y2 = y + h;
     if(isNaN(x) || isNaN(w) || isNaN(x2) || isNaN(y2)){
@@ -158,7 +157,7 @@ Spud.Admin.Media = new function(){
     else{
       return [x * (100 / cropscale), y * (100 / cropscale), x2 * (100 / cropscale), y2 * (100 / cropscale)];
     }
-  }
+  };
 
   this.preventSubmitOnEnterKey = function(e){
     if(e.keyCode == 13) {

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

@@ -0,0 +1,208 @@
+spud.admin.mediapicker = new function(){
+  
+  var self = this;
+  var supportsHtml5Upload = false;
+  var selectedFile = {};
+
+  self.init = function(){
+    if(typeof(FormData) != 'undefined'){
+      supportsHtml5Upload = true;
+    }
+    $('.spud_media_picker_tab').on('click', self.clickedTab);
+    $('.spud_media_picker_upload_form').on('submit', self.submittedUpload);
+    $('.spud_media_picker_list').on('click', '.spud_media_picker_item', self.clickedListItem);
+    $('.spud_media_picker_button_cancel').on('click', self.clickedCancel);
+    $('.spud_media_picker_button_use_selected').on('click', self.clickedUseSelected);
+    $('.spud_media_picker_button_insert').on('click', self.clickedInsert);
+    $('.spud_media_picker_item').first().click();
+    $('.spud_media_picker_tabs a').first().click();
+    $('.spud_media_picker_tab_advanced').on('spud_media_picker_tab_activated', self.activatedAdvancedTab);
+    $('.spud_media_picker_option_dimensions').on('blur', 'input', self.dimensionsChanged);
+  };
+
+  self.clickedTab = function(e){
+    e.preventDefault();
+    self.goToTab($(this).attr('href'));
+  };
+
+  self.goToTab = function(tabName){
+    $('.spud_media_picker_tab_active').removeClass('spud_media_picker_tab_active');
+    $('a[href="'+tabName+'"]').addClass('spud_media_picker_tab_active');
+    var selector = tabName.replace('#', '.');
+    $('.spud_media_picker_tab_body').hide();
+    $(selector).show();
+    $(selector).trigger('spud_media_picker_tab_activated');
+  };
+
+  self.clickedListItem = function(){
+    $('.spud_media_picker_item_selected').removeClass('spud_media_picker_item_selected');
+    var element = $(this);
+    element.addClass('spud_media_picker_item_selected');
+    $('.spud_media_picker_details_thumb').attr('src', element.find('img').attr('src'));
+    $('.spud_media_picker_details_name').text(element.attr('data-name'));
+    $('.spud_media_picker_details_size').text(element.attr('data-size'));
+    $('.spud_media_picker_details_lastmod').text(element.attr('data-lastmod'));
+    $('.spud_media_picker_details_protected').text(element.attr('data-protected'));
+    $('.spud_media_picker_details').show();
+  };
+  
+  self.clickedCancel = function(e){
+    e.preventDefault();
+    tinyMCEPopup.close();
+  };
+  
+  self.clickedUseSelected = function(e){
+    e.preventDefault();
+    self.goToTab('#spud_media_picker_tab_advanced');
+  };
+  
+  self.submittedUpload = function(e){
+    if(!$('#spud_media_attachment').val()){
+      window.alert("Please select a file.");
+      return false;
+    }
+
+    if(supportsHtml5Upload){
+      e.preventDefault();
+
+      // create html5 form object
+      var fd = new FormData();
+      var form = $(this);
+      var file = form.find('#spud_media_attachment')[0].files[0];
+      fd.append('_method', form.find('[name=_method]').val());
+      fd.append('authenticity_token', form.find('[name=authenticity_token]').val());
+      fd.append('spud_media[attachment]', file);
+
+      // upload via xhr
+      var xhr = new XMLHttpRequest();
+      xhr.upload.addEventListener('progress', self.onFileUploadProgress);
+      xhr.addEventListener('load', self.onFileUploadComplete);
+      xhr.addEventListener('error', self.onFileUploadError);
+      xhr.addEventListener('abort', self.onFileUploadAbort);
+      xhr.open('POST', form.attr('action'));
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+      xhr.send(fd);
+
+      $('.spud_media_picker_upload_progress').show();
+    }
+  };
+
+  this.onFileUploadProgress = function(e){
+    var percent = Math.round(e.loaded * 100 / e.total);
+    var progress = $('.spud_media_picker_upload_progress');
+    progress.find('.bar').css({width: percent + '%'});
+    if(percent == 100){
+      progress.addClass('progress-success');
+    }
+  };
+
+  this.onFileUploadComplete = function(e){
+    var html = e.target.response;
+    self.onLegacyUploadComplete(html);
+  };
+
+  this.onFileUploadError = function(e){
+    window.alert('Whoops! Something has gone wrong.');
+    self.resetUploadForm();
+  };
+
+  this.onFileUploadAbort = function(e){
+    self.resetUploadForm();
+  };
+
+  // Non-html5 upload
+  this.onLegacyUploadComplete = function(html){
+    $('.spud_media_picker_list').prepend(html);
+    $('.spud_media_picker_item').first().click();
+    self.goToTab('#spud_media_picker_tab_choose');
+    self.resetUplaodForm();
+  };
+
+  this.resetUploadForm = function(){
+    // reset twitter bootstrap "loading" button state
+    $('.spud_media_picker_tab_upload_submit').button('reset');
+    $('#spud_media_attachment').val('');
+    $('.spud_media_picker_upload_progress').hide();
+    $('.spud_media_picker_upload_progress .bar').css({width:0});
+  };
+
+  this.activatedAdvancedTab = function(){
+    var selected = $('.spud_media_picker_item_selected');
+    selectedFile = {
+      id: selected.attr('data-id'),
+      type: selected.attr('data-type'),
+      url: selected.attr('data-url'),
+      name: selected.attr('data-name'),
+      size: selected.attr('data-size'),
+      lastmod: selected.attr('data-lastmod'),
+      isprotected: selected.attr('data-protected')
+    };
+    $('input[name="spud_media_picker_option_selected_file"]').val(selectedFile.name);
+    $('input[name="spud_media_picker_option_type"]').val(selectedFile.type == 'img' ? 'Image' : 'File');
+    if(selectedFile.type == 'img'){
+      $('.spud_media_picker_option_target').hide();
+      $('.spud_media_picker_option_text').hide();
+      $('.spud_media_picker_option_float').show();
+      $('.spud_media_picker_option_title').show();
+      $('.spud_media_picker_option_dimensions').show();
+      self.getOriginalImageDimensions(selectedFile.url);
+    }
+    else{
+      $('.spud_media_picker_option_target').show();
+      $('.spud_media_picker_option_text').show();
+      $('.spud_media_picker_option_float').hide();
+      $('.spud_media_picker_option_title').hide();
+      $('.spud_media_picker_option_dimensions').hide();
+    }
+  };
+
+  var _originalWidth, _originalHeight;
+  self.getOriginalImageDimensions = function(url){
+    var img = new Image();
+    img.onload = function(){
+      _originalWidth = img.width;
+      _originalHeight = img.height;
+      console.log(_originalWidth, _originalHeight);
+    };
+    img.src = url;
+  };
+
+  self.dimensionsChanged = function(e){
+    var element = $(this);
+    var val = parseInt(element.val(), 10);
+    if(isNaN(val)){
+      element.val('');
+      return;
+    }
+    var name = element.attr('name');
+    if(name == 'spud_media_picker_option_dimension_w'){
+      var height = Math.floor((_originalHeight/_originalWidth) * val);
+      $('input[name="spud_media_picker_option_dimension_h"]').val(height);
+    }
+    else{
+      var width = Math.ceil((_originalWidth/_originalHeight) * val);
+      $('input[name="spud_media_picker_option_dimension_w"]').val(width);
+    }
+  };
+
+  self.clickedInsert = function(e){
+    e.preventDefault();
+    if(selectedFile.type == 'img'){
+      selectedFile.title = $('input[name="spud_media_picker_option_title"]').val();
+      selectedFile.width = parseInt($('input[name="spud_media_picker_option_dimension_w"]').val(), 10);
+      selectedFile.height = parseInt($('input[name="spud_media_picker_option_dimension_h"]').val(), 10);
+      var float = $('select[name="spud_media_picker_option_float"]').val();
+      var style = "";
+      if(float){
+        style += "float:" + float + ";";
+      }
+      selectedFile.style = style;
+    }
+    else{
+      selectedFile.target = $('select[name="spud_media_picker_option_target"]').val();
+      selectedFile.text = $('input[name="spud_media_picker_option_text"]').val();
+    }
+    tinyMCEPopup.editor.execCommand('spudMediaInsertSelected', false, selectedFile);
+    tinyMCEPopup.close();
+  };
+};

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

@@ -0,0 +1,98 @@
+/**
+ * editor_plugin_src.js
+ *
+ * Copyright 2009, Moxiecode Systems AB
+ * Released under LGPL License.
+ *
+ * License: http://tinymce.moxiecode.com/license
+ * Contributing: http://tinymce.moxiecode.com/contributing
+ */
+
+(function() {
+
+  spud.admin.editor.registerPlugin('spud_media_picker');
+  spud.admin.editor.registerButton('spud_media_picker');
+
+  tinymce.create('tinymce.plugins.SpudMediaPicker', {
+    /**
+     * Initializes the plugin, this will be executed after the plugin has been created.
+     * This call is done before the editor instance has finished it's initialization so use the onInit event
+     * of the editor instance to intercept that event.
+     *
+     * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
+     * @param {string} url Absolute URL to where the plugin is located.
+     */
+    init : function(ed, url) {
+      // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
+      ed.addCommand('spudMediaShowPicker', function(){
+        ed.windowManager.open({
+          title: 'Spud Media Picker',
+          file: '/spud/admin/media_picker',
+          width: 450 + parseInt(ed.getLang('example.delta_width', 0), 10),
+          height: 300 + parseInt(ed.getLang('example.delta_height', 0), 10),
+          inline: 1,
+          resizable: false,
+          popup_css: false, // prevent tinymce from injecting some default css into our dialog box
+          close_previous: true, // close any previously opened dialogs
+          scrollbars: false
+        });
+      });
+
+      // Register picker button
+      ed.addButton('spud_media_picker', {
+        title: 'Insert Spud Media',
+        cmd: 'spudMediaShowPicker',
+        image: '/assets/spud/admin/media_tiny.png'
+      });
+
+      ed.addCommand('spudMediaInsertSelected', function(ui, data){
+        if(data.type == 'img'){
+          var img = ed.dom.createHTML('img', {
+            src: data.url,
+            title: data.title,
+            style: data.style,
+            width: data.width,
+            height: data.height
+          });
+          ed.execCommand('mceInsertContent', false, img);
+        }
+        else{
+          var link = ed.dom.createHTML('a', {
+            href: data.url,
+            target: data.target
+          }, data.text);
+          ed.execCommand('mceInsertContent', false, link);
+        }
+      });
+
+      /*
+      * Add a node change handler, selects the button in the UI when a image is selected
+      * @param {tinymce.Editor} ed Editor
+      * @param {tinymce.ControlManager} cm
+      * @param {node} n
+      */
+      // ed.onNodeChange.add(function(ed, cm, n) {
+      //   cm.setActive('spud_media_picker', n.nodeName == 'IMG');
+      // });
+    },
+
+    /**
+     * Returns information about the plugin as a name/value array.
+     * The current keys are longname, author, authorurl, infourl and version.
+     *
+     * @return {Object} Name/value array containing information about the plugin.
+     */
+    getInfo: function(){
+      return {
+        longname : 'Spud Media',
+        author : 'Greg Woods',
+        authorurl : 'https://github.com/davydotcom/spud_media',
+        infourl : 'https://github.com/davydotcom/spud_media',
+        version : "1.0"
+      };
+    }
+  });
+
+  // Register plugin
+  tinymce.PluginManager.add('spud_media_picker', tinymce.plugins.SpudMediaPicker);
+})();

data/app/assets/stylesheets/spud/admin/{media.css → media/application.css}

@@ -1,5 +1,6 @@
 /*
 *= require jcrop/css/jquery.Jcrop
+*= require spud/admin/media/plugin
 */
 
 img.size-50-thumb {

data/app/assets/stylesheets/spud/admin/media/plugin.css

@@ -0,0 +1,154 @@
+.spud_media_picker{
+  background: white;
+  font: normal 12px/12px sans-serif;
+}
+.spud_media_picker_container{
+  padding: 10px;
+}
+
+/* Picker Tabs
+-------------- */
+.spud_media_picker_tabs{
+  border-bottom: 1px solid #ccc;
+  margin: 0 0 10px;
+}
+.spud_media_picker_tab{
+  display: inline-block;
+  font: normal 12px/22px sans-serif;
+  padding: 0 5px;
+  margin: 0 5px 0 0;
+  position: relative;
+  top: 1px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.spud_media_picker_tab_active{
+  border: 1px solid #ccc;
+  border-bottom: 1px solid white;
+}
+.spud_media_picker_tab_body{
+  display: none;
+  height: 200px;
+  padding-bottom: 40px;
+  position: relative;
+}
+
+/* Buttons
+------------ */
+.spud_media_picker_buttons{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.spud_media_picker_buttons a, .spud_media_picker_buttons input, .spud_media_picker_buttons button{
+  float: right;
+  margin-left: 5px;
+}
+.spud_media_picker label{
+  font-size: 12px;
+}
+
+/* Uploader 
+------------ */
+.spud_media_picker_upload_progress{
+  display: none;
+}
+.spud_media_picker_upload_progress .bar{
+  width: 0;
+}
+
+/* Picker List
+--------------- */
+.spud_media_picker_list{
+  height: 100%;
+  width: 200px;
+  overflow: auto;
+  border: 1px solid #ccc;
+  float: left;
+  margin: 0 0 10px 0;
+}
+.spud_media_picker_item{
+  cursor: pointer;
+  padding: 3px;
+  font: normal 12px/20px sans-serif;
+  border-top: 1px solid #ccc;
+  overflow: hidden;
+  height: 20px;
+  white-space: nowrap;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.spud_media_picker_item:first-child{
+  border-top: none;
+}
+.spud_media_picker_item:last-child{
+  border-bottom: 1px solid #ccc;
+}
+.spud_media_picker_item:hover{
+  background: #E6E6E6;
+}
+.spud_media_picker_item_selected{
+  background: #D6E4F5;
+}
+.spud_media_picker_item img{
+  max-width: 20px;
+  max-height: 20px;
+  float: left;
+  margin: 0 4px 0 0;
+}
+
+/* Picker  Details
+-------------------- */
+.spud_media_picker_details{
+  margin: 0 0 0 220px;
+  display: none;
+  overflow-x: hidden;
+}
+.spud_media_picker_details_thumb{
+  max-width: 100px;
+  max-height: 100px;
+}
+.spud_media_picker_details_meta{
+  font: bold 11px sans-serif;
+  margin: 10px 0 0;
+  padding: 0 0 0 15px;
+  white-space: nowrap;
+}
+.spud_media_picker_details_meta span{
+  font-weight: normal;
+}
+
+/* Advanced Options 
+------------------- */
+.spud_media_picker_tab_advanced{
+
+}
+.spud_media_picker_option{
+  margin: 10px 0;
+}
+.spud_media_picker_tab_advanced label{
+  width: 100px;
+  padding: 0 5px 0 0;
+  text-align: right;
+}
+.spud_media_picker_tab_advanced label, .spud_media_picker_tab_advanced select, .spud_media_picker_tab_advanced input{
+  display: inline-block;
+  margin: 0;
+}
+.spud_media_picker_tab_advanced select{
+  font: normal 12px/12px sans-serif;
+  height: auto;
+  padding: 0;
+}
+.spud_media_picker_option_dimensions input{
+  width: 50px;
+}